@jini-ai/ui 0.5.4 → 0.5.6

package/dist/features/media-providers/constants.js

@@ -1,82 +1,3 @@
-import { findProvider, canonicalMediaProviderId } from '@jini-ai/integrations/media-providers/catalog';
-/**
- * A small, vendor-shaped starting catalog — same convention as `execution/constants.ts`'s
- * `DEFAULT_PROVIDER_PRESETS`. Sourced by driving Open Design's own Settings → Media providers
- * panel directly (Playwright) and transcribing its real provider list, base URLs, and default
- * models. Pass your own `catalog` to `MediaProvidersTab` to replace this wholesale; Zana or any
- * other host is expected to do so once it has its own provider roster.
- */
-const starterCatalog = [
-    {
-        id: 'nano-banana',
-        label: 'Nano Banana',
-        models: ['gemini-3.1-flash-image-preview'],
-    },
-    {
-        id: 'aihubmix',
-        label: 'AIHubMix',
-        models: ['gemini-3.1-flash-image-preview'],
-    },
-    {
-        id: 'custom-image-api',
-        label: 'Custom Media API',
-        models: ['gemini-3.1-flash-image-preview'],
-    },
-    {
-        id: 'elevenlabs',
-        label: 'ElevenLabs',
-    },
-    {
-        id: 'fal-ai',
-        label: 'Fal.ai',
-        models: ['gemini-3.1-flash-image-preview'],
-    },
-    {
-        id: 'fishaudio',
-        label: 'FishAudio',
-    },
-    {
-        id: 'imagerouter',
-        label: 'ImageRouter',
-        models: ['gemini-3.1-flash-image-preview'],
-    },
-    {
-        id: 'leonardo-ai',
-        label: 'Leonardo.ai',
-    },
-    {
-        id: 'minimax',
-        label: 'MiniMax',
-    },
-    {
-        id: 'openai',
-        label: 'OpenAI',
-        models: ['gpt-image-2', 'dall-e-3'],
-    },
-    {
-        id: 'openrouter',
-        label: 'OpenRouter',
-    },
-    {
-        id: 'senseaudio',
-        label: 'SenseAudio',
-    },
-    {
-        id: 'tavily-search',
-        label: 'Tavily Search',
-    },
-    {
-        id: 'volcengine-ark',
-        label: 'Volcengine Ark (Doubao)',
-    },
-    {
-        id: 'xai-grok-imagine',
-        label: 'xAI Grok Imagine',
-    },
-];
-export const DEFAULT_MEDIA_PROVIDER_CATALOG = starterCatalog.map((entry) => {
-    const id = canonicalMediaProviderId({ id: entry.id });
-    const provider = findProvider({ id });
-    return { ...entry, id, label: provider.label, ...(provider.defaultBaseUrl ? { defaultBaseUrl: provider.defaultBaseUrl } : {}) };
-});
+/** @deprecated Supply a host catalog. The former starter set is exported by integrations/media-providers/catalog. */
+export const DEFAULT_MEDIA_PROVIDER_CATALOG = [];
 //# sourceMappingURL=constants.js.map

package/dist/features/media-providers/index.d.ts

@@ -1,6 +1,6 @@
 export { DEFAULT_MEDIA_PROVIDER_CATALOG } from './constants.js';
 export { createFakeMediaProvidersPort, type FakeMediaProvidersPortOptions } from './dependencies.js';
-export type { MediaProvidersPort } from './ports.js';
+export type { MediaProvidersPort, MediaProviderCatalogPolicy } from './ports.js';
 export { hasAnyConfiguredProvider, hasRecoverableFields, isEntryEmpty, isEntryPresent, isMarkerOnlyEntry, maskedKeyLabel, mergeDaemonProviders, resolveProviderBaseUrl, shouldSyncLocalProvidersToDaemon, sortProvidersByConfigured, isProviderBaseUrlInvalid, invalidBaseUrlProviderIds, } from './rules.js';
 export type { MediaProviderCredentials, MediaProviderMap, MediaProviderOption, MediaProvidersLoadState, MediaProvidersSaveState, } from './types.js';
 export { useMediaProvidersTab } from './react/hooks/useMediaProvidersTab.js';

package/dist/features/media-providers/ports.d.ts

@@ -1,3 +1,5 @@
+/** Catalog policy is UI-owned; the shared contract lives once in core. */
+export type { MediaProviderCatalogPolicy } from '@jini-ai/core';
 import type { MediaProviderMap } from './types.js';
 /**
  * The daemon-side transport this tab needs: reading the server's current

package/dist/features/media-providers/react/components/MediaProviderCard.d.ts

@@ -0,0 +1,22 @@
+import type { I18nContextValue } from '../../../i18n/index.js';
+import type { MediaProviderCredentials, MediaProviderOption } from '../../types.js';
+import type { MediaProviderEditPatch } from '../hooks/useMediaProvidersTab.js';
+import type { ResolvedMediaProvidersTabLabels } from './media-providers-tab-labels.js';
+type Translate = I18nContextValue['t'];
+export interface MediaProviderCardProps {
+    option: MediaProviderOption;
+    entry: MediaProviderCredentials;
+    labels: ResolvedMediaProvidersTabLabels;
+    t: Translate;
+    pending: boolean;
+    keyVisible: boolean;
+    showDividerBefore: boolean;
+    providerHandle: string | undefined;
+    onUpdate: (patch: MediaProviderEditPatch) => void;
+    onClear: () => void;
+    onToggleKeyVisible: () => void;
+}
+/** One provider's credential card: API key, base URL, optional model, clear, and the base-URL hint. */
+export declare function MediaProviderCard(props: MediaProviderCardProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=MediaProviderCard.d.ts.map

package/dist/features/media-providers/react/components/MediaProviderCard.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from 'react';
+import { agentHandleProps } from '@jini-ai/agentic';
+import { Icon } from '../../../../react/components/Icon.js';
+import { isEntryPresent, isMarkerOnlyEntry, isProviderBaseUrlInvalid, maskedKeyLabel, resolveProviderBaseUrl, } from '../../rules.js';
+/** One provider's credential card: API key, base URL, optional model, clear, and the base-URL hint. */
+export function MediaProviderCard(props) {
+    const { option, entry, labels, t, providerHandle, onUpdate } = props;
+    const saved = isMarkerOnlyEntry(entry);
+    // Guaranteed non-null: `isMarkerOnlyEntry` only holds when a server
+    // marker is present, and `maskedKeyLabel` always resolves a string
+    // for exactly that case — see both functions' doc comments.
+    const maskedLabel = saved ? maskedKeyLabel(entry) : null;
+    const fields = { option, entry, labels, providerHandle, onUpdate };
+    return (_jsxs(Fragment, { children: [props.showDividerBefore ? _jsx("hr", { className: "jini-media-provider-divider" }) : null, _jsxs("div", { className: "jini-media-provider-card", children: [_jsx(CardHead, { option: option, labels: labels, t: t, maskedLabel: maskedLabel, pending: props.pending }), _jsxs("div", { className: "jini-media-provider-fields", children: [_jsx(ApiKeyField, { ...fields, maskedLabel: maskedLabel, keyVisible: props.keyVisible, onToggleKeyVisible: props.onToggleKeyVisible }), _jsx(BaseUrlField, { ...fields }), option.models && option.models.length > 0 ? _jsx(ModelField, { ...fields, models: option.models }) : null, _jsx("button", { type: "button", className: "jini-button jini-button-ghost", disabled: !isEntryPresent(entry), "aria-label": `${option.label} ${labels.clearLabel}`, onClick: props.onClear, ...agentHandleProps({}, { base: providerHandle, ...({ action: 'clear', role: 'button', label: `${option.label} ${labels.clearLabel}` }) }), children: labels.clearLabel })] }), _jsx(BaseUrlHint, { entry: entry, option: option, labels: labels, t: t })] })] }));
+}
+function CardHead({ option, labels, t, maskedLabel, pending, }) {
+    // `maskedLabel` is non-null exactly when the entry is marker-only ("saved").
+    const saved = maskedLabel !== null;
+    return (_jsxs("div", { className: "jini-media-provider-card-head", children: [_jsx("strong", { children: option.label }), saved ? (
+            // `maskedLabel` is guaranteed non-null here — see its
+            // definition above — so no fallback is reachable to test.
+            _jsx("span", { className: "jini-field-status-badge jini-field-status-badge-success", children: t(labels.savedWithMaskTemplate, { mask: maskedLabel }) })) : null, !saved && pending ? _jsx("span", { className: "jini-field-status-badge", children: labels.unsavedLabel }) : null] }));
+}
+function ApiKeyField({ option, entry, labels, providerHandle, onUpdate, maskedLabel, keyVisible, onToggleKeyVisible, }) {
+    return (_jsxs("label", { className: "jini-media-provider-field jini-media-provider-field--secret", children: [_jsx("span", { className: "jini-field-label jini-sr-only", children: labels.apiKeyLabel }), _jsx("input", { className: "jini-input", type: keyVisible ? 'text' : 'password', 
+                /* `new-password`, NOT `"off"` — Chrome deliberately ignores `off` on
+                   credential-shaped fields, which is how a saved password gets autofilled into
+                   an API-key box. Same defect, same fix, same reasoning as
+                   `ByokProviderForm`'s own API-key input; see its comment. */
+                autoComplete: "new-password", spellCheck: false, placeholder: maskedLabel ?? labels.apiKeyPlaceholder, "aria-label": `${option.label} ${labels.apiKeyLabel}`, value: entry.apiKey ?? '', onChange: (event) => onUpdate({ apiKey: event.target.value }), ...agentHandleProps({}, { base: providerHandle, ...({ action: 'api-key', role: 'field', label: `${option.label} ${labels.apiKeyLabel}` }) }) }), _jsx("button", { type: "button", className: "jini-input-affix-btn", "aria-pressed": keyVisible, "aria-label": `${option.label} ${keyVisible ? labels.hideKeyLabel : labels.showKeyLabel}`, onClick: onToggleKeyVisible, ...agentHandleProps({}, { base: providerHandle, ...({ action: 'reveal-key', role: 'button', label: `${option.label} ${labels.showKeyLabel}` }) }), children: _jsx(Icon, { name: keyVisible ? 'eye-off' : 'eye', size: 14 }) })] }));
+}
+function BaseUrlField({ option, entry, labels, providerHandle, onUpdate }) {
+    return (_jsxs("label", { className: "jini-media-provider-field", children: [_jsx("span", { className: "jini-field-label jini-sr-only", children: labels.baseUrlLabel }), _jsx("input", { className: "jini-input", type: "url", inputMode: "url", spellCheck: false, placeholder: option.defaultBaseUrl || labels.baseUrlPlaceholder, "aria-label": `${option.label} ${labels.baseUrlLabel}`, value: entry.baseUrl ?? '', "aria-invalid": isProviderBaseUrlInvalid(entry) || undefined, onChange: (event) => onUpdate({ baseUrl: event.target.value }), ...agentHandleProps({}, { base: providerHandle, ...({ action: 'base-url', role: 'field', label: `${option.label} ${labels.baseUrlLabel}` }) }) })] }));
+}
+function ModelField({ option, entry, labels, providerHandle, onUpdate, models }) {
+    const modelListId = `jini-media-provider-models-${option.id}`;
+    return (_jsxs("label", { className: "jini-media-provider-field", children: [_jsx("span", { className: "jini-field-label jini-sr-only", children: labels.modelLabel }), _jsx("input", { className: "jini-input", list: modelListId, spellCheck: false, placeholder: labels.modelPlaceholder, "aria-label": `${option.label} ${labels.modelLabel}`, value: entry.model ?? '', onChange: (event) => onUpdate({ model: event.target.value }), ...agentHandleProps({}, { base: providerHandle, ...({ action: 'model', role: 'field', label: `${option.label} ${labels.modelLabel}` }) }) }), _jsx("datalist", { id: modelListId, children: models.map((model) => (_jsx("option", { value: model }, model))) })] }));
+}
+/** The invalid-URL alert, else the "uses X by default" hint while the field is blank, else nothing. */
+function BaseUrlHint({ entry, option, labels, t, }) {
+    if (isProviderBaseUrlInvalid(entry)) {
+        return (_jsx("span", { className: "jini-field-hint jini-hint-error", role: "alert", children: labels.baseUrlInvalidLabel }));
+    }
+    const effectiveBaseUrl = resolveProviderBaseUrl(entry, option.defaultBaseUrl);
+    if ((entry.baseUrl ?? '').trim() || !effectiveBaseUrl)
+        return null;
+    return _jsx("span", { className: "jini-field-hint", children: t(labels.baseUrlDefaultHintTemplate, { url: effectiveBaseUrl }) });
+}
+//# sourceMappingURL=MediaProviderCard.js.map

package/dist/features/media-providers/react/components/MediaProvidersTab.d.ts

@@ -1,4 +1,4 @@
-import type { MediaProvidersPort } from '../../ports.js';
+import type { MediaProviderCatalogPolicy, MediaProvidersPort } from '../../ports.js';
 import type { MediaProviderMap, MediaProviderOption } from '../../types.js';
 export interface MediaProvidersTabLabels {
     title?: string;
@@ -32,10 +32,9 @@ export interface MediaProvidersTabLabels {
 }
 export interface MediaProvidersTabProps {
     port: MediaProvidersPort;
-    /** The provider catalog to render. Optional — defaults to
-     *  `DEFAULT_MEDIA_PROVIDER_CATALOG`; see `MediaProviderOption`'s doc for
-     *  the host-override convention. */
-    catalog?: readonly MediaProviderOption[];
+    /** Host-owned provider catalog and its matching identity policy. */
+    catalog: readonly MediaProviderOption[];
+    catalogPolicy: MediaProviderCatalogPolicy;
     /** Host-persisted local edits from before this tab mounted. See
      *  `useMediaProvidersTab`'s doc for how this feeds the first-load merge. */
     initialProviders?: MediaProviderMap;
@@ -58,5 +57,5 @@ export interface MediaProvidersTabProps {
  * decorations outside this package's boundary; see `MediaProviderOption`'s
  * doc and this tab's `ports.ts` header for the full provenance note.
  */
-export declare function MediaProvidersTab({ port, catalog, initialProviders, pinnedProviderIds, labels, agentHandle, }: MediaProvidersTabProps): import("react").JSX.Element;
+export declare function MediaProvidersTab({ port, catalog, catalogPolicy, initialProviders, pinnedProviderIds, labels, agentHandle, }: MediaProvidersTabProps): import("react").JSX.Element;
 //# sourceMappingURL=MediaProvidersTab.d.ts.map

package/dist/features/media-providers/react/components/MediaProvidersTab.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { canonicalMediaProviderId } from '@jini-ai/integrations/media-providers/catalog';
-import { Fragment, useState } from 'react';
+import { useState } from 'react';
 import { agentHandleProps, buildAgentListHandles } from '@jini-ai/agentic';
 import { useT } from '../../../i18n/index.js';
 import { Icon } from '../../../../react/components/Icon.js';
-import { invalidBaseUrlProviderIds, isEntryPresent, isMarkerOnlyEntry, isProviderBaseUrlInvalid, maskedKeyLabel, resolveProviderBaseUrl, sortProvidersByConfigured, } from '../../rules.js';
-import { DEFAULT_MEDIA_PROVIDER_CATALOG } from '../../constants.js';
+import { invalidBaseUrlProviderIds, sortProvidersByConfigured } from '../../rules.js';
 import { useMediaProvidersTab } from '../hooks/useMediaProvidersTab.js';
+import { MediaProviderCard } from './MediaProviderCard.js';
+import { resolveMediaProvidersTabLabels } from './media-providers-tab-labels.js';
 /**
  * Per-provider credential cards: API key, base URL, and (when the catalog
  * entry advertises any) a model picker, each independently editable and
@@ -16,47 +16,17 @@ import { useMediaProvidersTab } from '../hooks/useMediaProvidersTab.js';
  * decorations outside this package's boundary; see `MediaProviderOption`'s
  * doc and this tab's `ports.ts` header for the full provenance note.
  */
-export function MediaProvidersTab({ port, catalog = DEFAULT_MEDIA_PROVIDER_CATALOG, initialProviders, pinnedProviderIds, labels, agentHandle, }) {
+export function MediaProvidersTab({ port, catalog, catalogPolicy, initialProviders, pinnedProviderIds, labels, agentHandle, }) {
     const t = useT();
-    const { providers, load, save, hasAnyConfigured, pendingProviderIds, updateProvider, clearProvider, saveChanges, reload } = useMediaProvidersTab({ port, initialProviders });
+    const { providers, load, save, hasAnyConfigured, pendingProviderIds, updateProvider, clearProvider, saveChanges, reload } = useMediaProvidersTab({ port, catalogPolicy, initialProviders });
+    const { canonicalMediaProviderId } = catalogPolicy;
     const [visibleApiKeys, setVisibleApiKeys] = useState(() => new Set());
-    const title = labels?.title ?? t('Media providers');
-    const description = labels?.description ?? t('Credentials this host uses to generate images and video.');
-    const reloadLabel = labels?.reloadLabel ?? t('Reload');
-    const reloadingLabel = labels?.reloadingLabel ?? t('Reloading…');
-    const unreachableLabel = labels?.unreachableLabel ?? t('Could not reach the server. Showing local changes only.');
-    const emptyStateLabel = labels?.emptyStateLabel ?? t('No media providers configured yet.');
-    const apiKeyLabel = labels?.apiKeyLabel ?? t('API key');
-    const apiKeyPlaceholder = labels?.apiKeyPlaceholder ?? t('Paste your API key');
-    const showKeyLabel = labels?.showKeyLabel ?? t('Show');
-    const hideKeyLabel = labels?.hideKeyLabel ?? t('Hide');
-    const baseUrlLabel = labels?.baseUrlLabel ?? t('Base URL');
-    const baseUrlPlaceholder = labels?.baseUrlPlaceholder ?? t('https://api.example.com');
-    const baseUrlDefaultHintTemplate = labels?.baseUrlDefaultHintTemplate ?? t('Uses {url} by default.');
-    const baseUrlInvalidLabel = labels?.baseUrlInvalidLabel ??
-        t('Enter an absolute http:// or https:// URL that is not a private or internal address.');
-    const modelLabel = labels?.modelLabel ?? t('Model');
-    const modelPlaceholder = labels?.modelPlaceholder ?? t('Default model');
-    const savedWithMaskTemplate = labels?.savedWithMaskTemplate ?? t('Saved ({mask})');
-    const unsavedLabel = labels?.unsavedLabel ?? t('Unsaved');
-    const clearLabel = labels?.clearLabel ?? t('Clear');
-    const saveChangesLabel = labels?.saveChangesLabel ?? t('Save changes');
-    const savingLabel = labels?.savingLabel ?? t('Saving…');
-    const savedNoticeLabel = labels?.savedNoticeLabel ?? t('Saved.');
-    const saveErrorLabel = labels?.saveErrorLabel ?? t('Could not save media providers.');
+    const resolved = resolveMediaProvidersTabLabels({ t }, { labels });
     const toggleKeyVisible = (providerId) => {
-        setVisibleApiKeys((current) => {
-            const next = new Set(current);
-            if (next.has(providerId)) {
-                next.delete(providerId);
-            }
-            else {
-                next.add(providerId);
-            }
-            return next;
-        });
+        setVisibleApiKeys((current) => toggledMember({ set: current, member: providerId }));
     };
-    const orderedCatalog = sortProvidersByConfigured(catalog.map((entry) => ({ ...entry, id: canonicalMediaProviderId({ id: entry.id }) })), providers, pinnedProviderIds?.map((id) => canonicalMediaProviderId({ id })));
+    const canonicalPinnedIds = pinnedProviderIds?.map((id) => canonicalMediaProviderId({ id }));
+    const orderedCatalog = sortProvidersByConfigured(catalog.map((entry) => ({ ...entry, id: canonicalMediaProviderId({ id: entry.id }) })), providers, canonicalPinnedIds);
     const providerHandles = agentHandle
         ? buildAgentListHandles({ prefix: agentHandle, ids: orderedCatalog.map((option) => option.id) })
         : undefined;
@@ -64,40 +34,38 @@ export function MediaProvidersTab({ port, catalog = DEFAULT_MEDIA_PROVIDER_CATAL
     // pinned id absent from `catalog` never appears in `orderedCatalog` either (see
     // `sortProvidersByConfigured`'s own "silently skipped" doc), so this stays correct without
     // re-deriving which pinned ids actually resolved to a real card.
-    const pinnedIdSet = new Set(pinnedProviderIds?.map((id) => canonicalMediaProviderId({ id })) ?? []);
+    const pinnedIdSet = new Set(canonicalPinnedIds ?? []);
     const hasPendingChanges = pendingProviderIds.size > 0;
     // Save writes every provider at once, so ONE unacceptable endpoint blocks the
     // whole button rather than being silently persisted alongside the good ones.
     const blockedByInvalidBaseUrl = invalidBaseUrlProviderIds(providers).length > 0;
-    return (_jsxs("section", { className: "jini-settings-section jini-settings-media-providers", children: [_jsxs("div", { className: "jini-section-head", children: [_jsxs("div", { children: [_jsx("h4", { children: title }), _jsx("p", { className: "jini-hint", children: description })] }), _jsxs("button", { type: "button", className: "jini-button jini-button-ghost", onClick: reload, disabled: load.status === 'loading', ...agentHandleProps({}, { base: agentHandle, ...({ action: 'reload', role: 'button', label: reloadLabel }) }), children: [_jsx(Icon, { name: "refresh", size: 13 }), _jsx("span", { children: load.status === 'loading' ? reloadingLabel : reloadLabel })] })] }), load.status === 'unreachable' ? (_jsx("p", { className: "jini-hint jini-hint-error", role: "alert", children: unreachableLabel })) : null, !hasAnyConfigured ? _jsx("p", { className: "jini-hint", children: emptyStateLabel }) : null, _jsx("div", { className: "jini-media-provider-list", children: orderedCatalog.map((option, index) => {
-                    const entry = providers[option.id] ?? {};
-                    const clearable = isEntryPresent(entry);
-                    const saved = isMarkerOnlyEntry(entry);
-                    // Guaranteed non-null: `isMarkerOnlyEntry` only holds when a server
-                    // marker is present, and `maskedKeyLabel` always resolves a string
-                    // for exactly that case — see both functions' doc comments.
-                    const maskedLabel = saved ? maskedKeyLabel(entry) : null;
-                    const keyVisible = visibleApiKeys.has(option.id);
-                    const rawBaseUrl = entry.baseUrl ?? '';
-                    const effectiveBaseUrl = resolveProviderBaseUrl(entry, option.defaultBaseUrl);
-                    const baseUrlInvalid = isProviderBaseUrlInvalid(entry);
-                    const modelListId = `jini-media-provider-models-${option.id}`;
-                    // A divider renders once, directly above the first UNpinned card — i.e. exactly at the
-                    // pinned/rest boundary `sortProvidersByConfigured` produced. Never renders above index 0
-                    // (nothing pinned, or the pinned card IS index 0 with no boundary yet) and never when
-                    // every card is pinned (no "rest" to separate from).
-                    const previousOption = index > 0 ? orderedCatalog[index - 1] : undefined;
-                    const showDividerBefore = !pinnedIdSet.has(option.id) && previousOption !== undefined && pinnedIdSet.has(previousOption.id);
-                    const providerHandle = providerHandles?.[index];
-                    return (_jsxs(Fragment, { children: [showDividerBefore ? _jsx("hr", { className: "jini-media-provider-divider" }) : null, _jsxs("div", { className: "jini-media-provider-card", children: [_jsxs("div", { className: "jini-media-provider-card-head", children: [_jsx("strong", { children: option.label }), saved ? (
-                                            // `maskedLabel` is guaranteed non-null here — see its
-                                            // definition above — so no fallback is reachable to test.
-                                            _jsx("span", { className: "jini-field-status-badge jini-field-status-badge-success", children: t(savedWithMaskTemplate, { mask: maskedLabel }) })) : null, !saved && pendingProviderIds.has(option.id) ? _jsx("span", { className: "jini-field-status-badge", children: unsavedLabel }) : null] }), _jsxs("div", { className: "jini-media-provider-fields", children: [_jsxs("label", { className: "jini-media-provider-field jini-media-provider-field--secret", children: [_jsx("span", { className: "jini-field-label jini-sr-only", children: apiKeyLabel }), _jsx("input", { className: "jini-input", type: keyVisible ? 'text' : 'password', 
-                                                        /* `new-password`, NOT `"off"` — Chrome deliberately ignores `off` on
-                                                           credential-shaped fields, which is how a saved password gets autofilled into
-                                                           an API-key box. Same defect, same fix, same reasoning as
-                                                           `ByokProviderForm`'s own API-key input; see its comment. */
-                                                        autoComplete: "new-password", spellCheck: false, placeholder: saved ? maskedLabel : apiKeyPlaceholder, "aria-label": `${option.label} ${apiKeyLabel}`, value: entry.apiKey ?? '', onChange: (event) => updateProvider(option.id, { apiKey: event.target.value }), ...agentHandleProps({}, { base: providerHandle, ...({ action: 'api-key', role: 'field', label: `${option.label} ${apiKeyLabel}` }) }) }), _jsx("button", { type: "button", className: "jini-input-affix-btn", "aria-pressed": keyVisible, "aria-label": `${option.label} ${keyVisible ? hideKeyLabel : showKeyLabel}`, onClick: () => toggleKeyVisible(option.id), ...agentHandleProps({}, { base: providerHandle, ...({ action: 'reveal-key', role: 'button', label: `${option.label} ${showKeyLabel}` }) }), children: _jsx(Icon, { name: keyVisible ? 'eye-off' : 'eye', size: 14 }) })] }), _jsxs("label", { className: "jini-media-provider-field", children: [_jsx("span", { className: "jini-field-label jini-sr-only", children: baseUrlLabel }), _jsx("input", { className: "jini-input", type: "url", inputMode: "url", spellCheck: false, placeholder: option.defaultBaseUrl || baseUrlPlaceholder, "aria-label": `${option.label} ${baseUrlLabel}`, value: rawBaseUrl, "aria-invalid": baseUrlInvalid || undefined, onChange: (event) => updateProvider(option.id, { baseUrl: event.target.value }), ...agentHandleProps({}, { base: providerHandle, ...({ action: 'base-url', role: 'field', label: `${option.label} ${baseUrlLabel}` }) }) })] }), option.models && option.models.length > 0 ? (_jsxs("label", { className: "jini-media-provider-field", children: [_jsx("span", { className: "jini-field-label jini-sr-only", children: modelLabel }), _jsx("input", { className: "jini-input", list: modelListId, spellCheck: false, placeholder: modelPlaceholder, "aria-label": `${option.label} ${modelLabel}`, value: entry.model ?? '', onChange: (event) => updateProvider(option.id, { model: event.target.value }), ...agentHandleProps({}, { base: providerHandle, ...({ action: 'model', role: 'field', label: `${option.label} ${modelLabel}` }) }) }), _jsx("datalist", { id: modelListId, children: option.models.map((model) => (_jsx("option", { value: model }, model))) })] })) : null, _jsx("button", { type: "button", className: "jini-button jini-button-ghost", disabled: !clearable, "aria-label": `${option.label} ${clearLabel}`, onClick: () => clearProvider(option.id), ...agentHandleProps({}, { base: providerHandle, ...({ action: 'clear', role: 'button', label: `${option.label} ${clearLabel}` }) }), children: clearLabel })] }), baseUrlInvalid ? (_jsx("span", { className: "jini-field-hint jini-hint-error", role: "alert", children: baseUrlInvalidLabel })) : !rawBaseUrl.trim() && effectiveBaseUrl ? (_jsx("span", { className: "jini-field-hint", children: t(baseUrlDefaultHintTemplate, { url: effectiveBaseUrl }) })) : null] })] }, option.id));
-                }) }), _jsxs("div", { className: "jini-media-provider-save-row", children: [_jsx("button", { type: "button", className: "jini-button", onClick: saveChanges, disabled: save.status === 'saving' || !hasPendingChanges || blockedByInvalidBaseUrl, ...agentHandleProps({}, { base: agentHandle, ...({ action: 'save', role: 'button', label: saveChangesLabel }) }), children: save.status === 'saving' ? savingLabel : saveChangesLabel }), save.status === 'saved' ? (_jsx("span", { className: "jini-hint", role: "status", children: savedNoticeLabel })) : null, save.status === 'save-error' ? (_jsx("span", { className: "jini-hint jini-hint-error", role: "alert", children: saveErrorLabel })) : null] })] }));
+    return (_jsxs("section", { className: "jini-settings-section jini-settings-media-providers", children: [_jsx(TabHead, { labels: resolved, loading: load.status === 'loading', onReload: reload, agentHandle: agentHandle }), load.status === 'unreachable' ? (_jsx("p", { className: "jini-hint jini-hint-error", role: "alert", children: resolved.unreachableLabel })) : null, !hasAnyConfigured ? _jsx("p", { className: "jini-hint", children: resolved.emptyStateLabel }) : null, _jsx("div", { className: "jini-media-provider-list", children: orderedCatalog.map((option, index) => (_jsx(MediaProviderCard, { option: option, entry: providers[option.id] ?? {}, labels: resolved, t: t, pending: pendingProviderIds.has(option.id), keyVisible: visibleApiKeys.has(option.id), showDividerBefore: isDividerBefore({ option, previousOption: orderedCatalog[index - 1], pinnedIdSet }), providerHandle: providerHandles?.[index], onUpdate: (patch) => updateProvider(option.id, patch), onClear: () => clearProvider(option.id), onToggleKeyVisible: () => toggleKeyVisible(option.id) }, option.id))) }), _jsx(SaveRow, { labels: resolved, save: save, disabled: !hasPendingChanges || blockedByInvalidBaseUrl, onSave: saveChanges, agentHandle: agentHandle })] }));
+}
+/** A copy of `set` with `member` added if absent, removed if present. */
+function toggledMember({ set, member }) {
+    const next = new Set(set);
+    if (next.has(member)) {
+        next.delete(member);
+    }
+    else {
+        next.add(member);
+    }
+    return next;
+}
+/**
+ * A divider renders once, directly above the first UNpinned card — i.e. exactly at the
+ * pinned/rest boundary `sortProvidersByConfigured` produced. Never renders above index 0
+ * (nothing pinned, or the pinned card IS index 0 with no boundary yet) and never when
+ * every card is pinned (no "rest" to separate from).
+ */
+function isDividerBefore({ option, previousOption, pinnedIdSet, }) {
+    return !pinnedIdSet.has(option.id) && previousOption !== undefined && pinnedIdSet.has(previousOption.id);
+}
+function TabHead({ labels, loading, onReload, agentHandle, }) {
+    return (_jsxs("div", { className: "jini-section-head", children: [_jsxs("div", { children: [_jsx("h4", { children: labels.title }), _jsx("p", { className: "jini-hint", children: labels.description })] }), _jsxs("button", { type: "button", className: "jini-button jini-button-ghost", onClick: onReload, disabled: loading, ...agentHandleProps({}, { base: agentHandle, ...({ action: 'reload', role: 'button', label: labels.reloadLabel }) }), children: [_jsx(Icon, { name: "refresh", size: 13 }), _jsx("span", { children: loading ? labels.reloadingLabel : labels.reloadLabel })] })] }));
+}
+function SaveRow({ labels, save, disabled, onSave, agentHandle, }) {
+    const saving = save.status === 'saving';
+    return (_jsxs("div", { className: "jini-media-provider-save-row", children: [_jsx("button", { type: "button", className: "jini-button", onClick: onSave, disabled: saving || disabled, ...agentHandleProps({}, { base: agentHandle, ...({ action: 'save', role: 'button', label: labels.saveChangesLabel }) }), children: saving ? labels.savingLabel : labels.saveChangesLabel }), save.status === 'saved' ? (_jsx("span", { className: "jini-hint", role: "status", children: labels.savedNoticeLabel })) : null, save.status === 'save-error' ? (_jsx("span", { className: "jini-hint jini-hint-error", role: "alert", children: labels.saveErrorLabel })) : null] }));
 }
 //# sourceMappingURL=MediaProvidersTab.js.map

package/dist/features/media-providers/react/components/media-providers-tab-labels.d.ts

@@ -0,0 +1,11 @@
+import type { I18nContextValue } from '../../../i18n/index.js';
+import type { MediaProvidersTabLabels } from './MediaProvidersTab.js';
+/** Every `MediaProvidersTabLabels` field, resolved to the string actually rendered. */
+export type ResolvedMediaProvidersTabLabels = Required<MediaProvidersTabLabels>;
+/** Host-supplied label where given, else the translated English default. */
+export declare function resolveMediaProvidersTabLabels({ t }: {
+    t: I18nContextValue['t'];
+}, { labels }?: {
+    labels?: MediaProvidersTabLabels | undefined;
+}): ResolvedMediaProvidersTabLabels;
+//# sourceMappingURL=media-providers-tab-labels.d.ts.map

package/dist/features/media-providers/react/components/media-providers-tab-labels.js

@@ -0,0 +1,57 @@
+/** English defaults, keyed exactly like `MediaProvidersTabLabels`; each is passed through `t`
+ *  only when the host did not supply that label (the dictionaries are keyed by this English text). */
+const DEFAULT_LABELS = {
+    title: 'Media providers',
+    description: 'Credentials this host uses to generate images and video.',
+    reloadLabel: 'Reload',
+    reloadingLabel: 'Reloading…',
+    unreachableLabel: 'Could not reach the server. Showing local changes only.',
+    emptyStateLabel: 'No media providers configured yet.',
+    apiKeyLabel: 'API key',
+    apiKeyPlaceholder: 'Paste your API key',
+    showKeyLabel: 'Show',
+    hideKeyLabel: 'Hide',
+    baseUrlLabel: 'Base URL',
+    baseUrlPlaceholder: 'https://api.example.com',
+    baseUrlDefaultHintTemplate: 'Uses {url} by default.',
+    baseUrlInvalidLabel: 'Enter an absolute http:// or https:// URL that is not a private or internal address.',
+    modelLabel: 'Model',
+    modelPlaceholder: 'Default model',
+    savedWithMaskTemplate: 'Saved ({mask})',
+    unsavedLabel: 'Unsaved',
+    clearLabel: 'Clear',
+    saveChangesLabel: 'Save changes',
+    savingLabel: 'Saving…',
+    savedNoticeLabel: 'Saved.',
+    saveErrorLabel: 'Could not save media providers.',
+};
+/** Host-supplied label where given, else the translated English default. */
+export function resolveMediaProvidersTabLabels({ t }, { labels } = {}) {
+    const pick = (key) => labels?.[key] ?? t(DEFAULT_LABELS[key]);
+    return {
+        title: pick('title'),
+        description: pick('description'),
+        reloadLabel: pick('reloadLabel'),
+        reloadingLabel: pick('reloadingLabel'),
+        unreachableLabel: pick('unreachableLabel'),
+        emptyStateLabel: pick('emptyStateLabel'),
+        apiKeyLabel: pick('apiKeyLabel'),
+        apiKeyPlaceholder: pick('apiKeyPlaceholder'),
+        showKeyLabel: pick('showKeyLabel'),
+        hideKeyLabel: pick('hideKeyLabel'),
+        baseUrlLabel: pick('baseUrlLabel'),
+        baseUrlPlaceholder: pick('baseUrlPlaceholder'),
+        baseUrlDefaultHintTemplate: pick('baseUrlDefaultHintTemplate'),
+        baseUrlInvalidLabel: pick('baseUrlInvalidLabel'),
+        modelLabel: pick('modelLabel'),
+        modelPlaceholder: pick('modelPlaceholder'),
+        savedWithMaskTemplate: pick('savedWithMaskTemplate'),
+        unsavedLabel: pick('unsavedLabel'),
+        clearLabel: pick('clearLabel'),
+        saveChangesLabel: pick('saveChangesLabel'),
+        savingLabel: pick('savingLabel'),
+        savedNoticeLabel: pick('savedNoticeLabel'),
+        saveErrorLabel: pick('saveErrorLabel'),
+    };
+}
+//# sourceMappingURL=media-providers-tab-labels.js.map

package/dist/features/media-providers/react/hooks/useMediaProvidersTab.d.ts

@@ -1,4 +1,4 @@
-import type { MediaProvidersPort } from '../../ports.js';
+import type { MediaProviderCatalogPolicy, MediaProvidersPort } from '../../ports.js';
 import type { MediaProviderCredentials, MediaProviderMap, MediaProvidersLoadState, MediaProvidersSaveState } from '../../types.js';
 /** The operator-editable fields of a provider entry. Server markers
  *  (`apiKeyConfigured`/`apiKeyTail`) are deliberately excluded — they only
@@ -8,6 +8,8 @@ import type { MediaProviderCredentials, MediaProviderMap, MediaProvidersLoadStat
 export type MediaProviderEditPatch = Pick<MediaProviderCredentials, 'apiKey' | 'baseUrl' | 'model'>;
 export interface UseMediaProvidersTabOptions {
     port: MediaProvidersPort;
+    /** Identity rules shared by catalog rows, local edits and daemon responses. Stable while mounted. */
+    catalogPolicy: MediaProviderCatalogPolicy;
     /** Host-persisted local edits from before this tab mounted (e.g. the
      *  host's own locally-cached config, read before the daemon round-trip
      *  completes). Defaults to none. Threaded into the initial
@@ -54,5 +56,5 @@ export interface UseMediaProvidersTabResult {
  * `{}` before merging — would make a transient daemon blip read as "the
  * server manages nothing" and silently wipe local edits.
  */
-export declare function useMediaProvidersTab({ port, initialProviders }: UseMediaProvidersTabOptions): UseMediaProvidersTabResult;
+export declare function useMediaProvidersTab({ port, catalogPolicy, initialProviders }: UseMediaProvidersTabOptions): UseMediaProvidersTabResult;
 //# sourceMappingURL=useMediaProvidersTab.d.ts.map

package/dist/features/media-providers/react/hooks/useMediaProvidersTab.js

@@ -1,6 +1,33 @@
-import { normalizeMediaProviderMap, canonicalMediaProviderId } from '@jini-ai/integrations/media-providers/catalog';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { hasAnyConfiguredProvider, isEntryEmpty, mergeDaemonProviders, shouldSyncLocalProvidersToDaemon, } from '../../rules.js';
+/**
+ * Releases the tombstones a successful write carried. The server has now accepted a map without
+ * these, so the local absence is no longer a claim waiting to be defended — the daemon agrees.
+ * Re-touched ids keep their tombstone: the operator changed their mind mid-flight and this
+ * response does not describe that decision.
+ */
+function releaseAcknowledgedClears({ cleared, clearsInFlight, touched, }) {
+    for (const providerId of clearsInFlight) {
+        if (!touched.has(providerId))
+            cleared.delete(providerId);
+    }
+}
+/** The server's saved map with every provider touched during the flight reset to local truth —
+ *  including local deletion (see `flushNow`'s doc comment). Mutates and returns `saved`. */
+function overlayTouchedProviders({ saved, local, touched, }) {
+    for (const providerId of touched) {
+        const entry = local[providerId];
+        if (entry === undefined)
+            delete saved[providerId];
+        else
+            saved[providerId] = entry;
+    }
+    return saved;
+}
+/** A save rejection as display text; a non-`Error` rejection is stringified rather than read as `.message`. */
+function saveErrorMessage({ error }) {
+    return error instanceof Error ? error.message : String(error);
+}
 /**
  * Owns the tab's async edges: the initial daemon fetch (plus the one-time
  * first-upload migration `shouldSyncLocalProvidersToDaemon` guards), manual
@@ -18,7 +45,8 @@ import { hasAnyConfiguredProvider, isEntryEmpty, mergeDaemonProviders, shouldSyn
  * `{}` before merging — would make a transient daemon blip read as "the
  * server manages nothing" and silently wipe local edits.
  */
-export function useMediaProvidersTab({ port, initialProviders }) {
+export function useMediaProvidersTab({ port, catalogPolicy, initialProviders }) {
+    const { normalizeMediaProviderMap, canonicalMediaProviderId } = catalogPolicy;
     const [providers, setProviders] = useState(() => normalizeMediaProviderMap({ providers: initialProviders ?? {} }));
     const [pendingProviderIds, setPendingProviderIds] = useState(() => new Set());
     const [load, setLoad] = useState({ status: 'loading' });
@@ -107,22 +135,8 @@ export function useMediaProvidersTab({ port, initialProviders }) {
             if (!alive.current)
                 return { status: 'abandoned' };
             const touched = mutatedSinceSend.current;
-            // The server has now accepted a map without these, so the local absence is no longer a claim
-            // waiting to be defended — the daemon agrees. Re-touched ids keep their tombstone: the
-            // operator changed their mind mid-flight and this response does not describe that decision.
-            for (const providerId of clearsInFlight) {
-                if (!touched.has(providerId))
-                    clearedProviderIds.current.delete(providerId);
-            }
-            const next = normalizeMediaProviderMap({ providers: saved });
-            for (const providerId of touched) {
-                const local = providersRef.current[providerId];
-                if (local === undefined)
-                    delete next[providerId];
-                else
-                    next[providerId] = local;
-            }
-            applyProviders(next);
+            releaseAcknowledgedClears({ cleared: clearedProviderIds.current, clearsInFlight, touched });
+            applyProviders(overlayTouchedProviders({ saved: normalizeMediaProviderMap({ providers: saved }), local: providersRef.current, touched }));
             // Everything this write sent is now persisted; only edits made during
             // the flight are still unflushed.
             applyPending(new Set([...pendingRef.current].filter((providerId) => touched.has(providerId))));
@@ -132,10 +146,10 @@ export function useMediaProvidersTab({ port, initialProviders }) {
         catch (error) {
             if (!alive.current)
                 return { status: 'abandoned' };
-            setSave({ status: 'save-error', message: error instanceof Error ? error.message : String(error) });
+            setSave({ status: 'save-error', message: saveErrorMessage({ error }) });
             return { status: 'failed' };
         }
-    }, [applyProviders, applyPending]);
+    }, [applyProviders, applyPending, normalizeMediaProviderMap]);
     /** True while a write is at the port. */
     const writing = useRef(false);
     /** The single coalesced follow-up write requested during that one. */
@@ -216,7 +230,7 @@ export function useMediaProvidersTab({ port, initialProviders }) {
                 void persist();
             }
         });
-    }, [persist, applyProviders]);
+    }, [persist, applyProviders, normalizeMediaProviderMap]);
     useEffect(() => {
         // Mount (or host-supplied port swap): migration is a one-time boot
         // check, matching the origin's App.tsx boot sequence — a manual
@@ -242,7 +256,7 @@ export function useMediaProvidersTab({ port, initialProviders }) {
         if (!currentPending.has(providerId))
             applyPending(new Set(currentPending).add(providerId));
         mutatedSinceSend.current.add(providerId);
-    }, [applyProviders, applyPending]);
+    }, [applyProviders, applyPending, canonicalMediaProviderId]);
     const clearProvider = useCallback((providerId) => {
         providerId = canonicalMediaProviderId({ id: providerId });
         void (async () => {
@@ -278,7 +292,7 @@ export function useMediaProvidersTab({ port, initialProviders }) {
                 return;
             applyProviders({ ...providersRef.current, [providerId]: previousEntry });
         })();
-    }, [persist, applyProviders]);
+    }, [persist, applyProviders, canonicalMediaProviderId]);
     const saveChanges = useCallback(() => {
         void persist();
     }, [persist]);

package/dist/features/media-providers/rules.js

@@ -89,27 +89,34 @@ export function hasAnyConfiguredProvider(providers) {
  */
 export function mergeDaemonProviders(localProviders, daemonProviders, options) {
     const dropped = options?.dropProviderIds;
-    const withoutDropped = (map) => dropped === undefined || dropped.size === 0
-        ? map
-        : Object.fromEntries(Object.entries(map).filter(([providerId]) => !dropped.has(providerId)));
-    const local = withoutDropped({ ...(localProviders ?? {}) });
+    const local = withoutProviderIds({ map: { ...(localProviders ?? {}) } }, { dropped });
     if (daemonProviders == null)
         return local;
     if (!hasAnyConfiguredProvider(daemonProviders)) {
         return Object.fromEntries(Object.entries(local).filter(([, entry]) => !isMarkerOnlyEntry(entry)));
     }
+    const preserveIds = options?.preserveLocalProviderIds;
     const merged = { ...local };
     for (const [providerId, daemonEntry] of Object.entries(daemonProviders)) {
-        if (!isEntryPresent(daemonEntry))
+        if (!isEntryPresent(daemonEntry) || dropped?.has(providerId))
             continue;
-        if (dropped?.has(providerId))
-            continue;
-        const localEntry = merged[providerId];
-        const preserveLocalEdit = Boolean(options?.preserveLocalProviderIds?.has(providerId)) && hasRecoverableFields(localEntry);
-        merged[providerId] = preserveLocalEdit ? { ...daemonEntry, ...localEntry } : { ...daemonEntry };
+        merged[providerId] = mergeDaemonEntry({ providerId, daemonEntry, localEntry: merged[providerId] }, { preserveIds });
     }
     return merged;
 }
+/** `map` minus every id in `dropped` (see `mergeDaemonProviders`'s `dropProviderIds`). */
+function withoutProviderIds({ map }, { dropped }) {
+    if (dropped === undefined || dropped.size === 0)
+        return map;
+    return Object.fromEntries(Object.entries(map).filter(([providerId]) => !dropped.has(providerId)));
+}
+/** Case 3 of `mergeDaemonProviders` for one provider: the server entry wins
+ *  unless the caller asked to preserve a local edit that has recoverable
+ *  fields, which is then layered ON TOP so server-only markers survive. */
+function mergeDaemonEntry({ providerId, daemonEntry, localEntry, }, { preserveIds }) {
+    const preserveLocalEdit = Boolean(preserveIds?.has(providerId)) && hasRecoverableFields(localEntry);
+    return preserveLocalEdit ? { ...daemonEntry, ...localEntry } : { ...daemonEntry };
+}
 /**
  * Whether local credentials should be pushed to the server.
  *