pith-ui 0.1.0 → 0.1.4

package/dist/forms/panels.d.ts

@@ -1,4 +1,6 @@
-import type { UIBlock } from '../core.js';
+import { type ActionResult, type UIBlock, type UIAction } from '../core.js';
+import { type ModelEditorState, type ModelSelection } from './model-editor.js';
+export { modelEditorMarkup } from './model-editor.js';
 export interface FormFeedback {
     error?: string;
     disabled?: boolean;
@@ -10,11 +12,63 @@ export interface FormDOMBlock<State extends FormFeedback> extends UIBlock<State>
 export interface SettingsPanelState extends FormFeedback {
     baseUrl: string;
     hasApiKey: boolean;
+    ready?: boolean;
+    testing?: boolean;
+    appearance?: {
+        mode: 'light' | 'dark' | 'system';
+        disabled?: boolean;
+        error?: string;
+    };
+    testResult?: {
+        message: string;
+        ok?: boolean;
+    };
 }
 export interface FormOptions {
     idPrefix?: string;
 }
-export declare function createSettingsPanel(state: SettingsPanelState, options?: FormOptions): FormDOMBlock<SettingsPanelState>;
+export interface SettingsDraft {
+    provider: string;
+    baseUrl: string;
+    apiKey: string;
+}
+export interface SettingsProviderOption {
+    id: string;
+    name: string;
+    configured?: boolean;
+    signedIn?: boolean;
+}
+export interface SettingsCredentialView {
+    status: string;
+    hidden: boolean;
+    required: boolean;
+    placeholder: string;
+    removeVisible: boolean;
+    hint?: string;
+    actions?: Node;
+}
+export interface SettingsPanel extends FormDOMBlock<SettingsPanelState> {
+    read(): SettingsDraft;
+    setProviders(providers: readonly SettingsProviderOption[], selected?: string): void;
+    resetProvider(value: {
+        provider: string;
+        baseUrl: string;
+        clearKey?: boolean;
+        collapseAdvanced?: boolean;
+    }): void;
+    setCredential(view: SettingsCredentialView): void;
+    clearSecrets(): void;
+    readonly updates: HTMLElement;
+}
+export interface SettingsPanelOptions extends FormOptions {
+    onAppearanceChange?: (mode: string) => void;
+    onProviderChange?: (provider: string) => void;
+    onDraftChange?: (draft: SettingsDraft) => void;
+    onSubmit?: (draft: SettingsDraft) => ActionResult | Promise<ActionResult>;
+    onTest?: (draft: SettingsDraft) => void;
+    onRemoveKey?: (draft: SettingsDraft) => ActionResult | Promise<ActionResult>;
+}
+export declare function createSettingsPanel(state: SettingsPanelState, options?: SettingsPanelOptions): SettingsPanel;
 export interface MCPEditorValue {
     name: string;
     type: string;
@@ -28,13 +82,48 @@ export interface MCPEditorValue {
     hasBearerToken?: boolean;
     envKeys?: readonly string[];
 }
-export interface MCPConnectionsPanel extends FormDOMBlock<FormFeedback> {
+export interface MCPConnectionDraft {
+    name: string;
+    type: 'http' | 'stdio';
+    url: string;
+    oauth: boolean;
+    oauthClientId: string;
+    oauthScope: string;
+    command: string;
+    args: string;
+    enabled: boolean;
+    bearerToken: string;
+    clearBearerToken: boolean;
+    env: string;
+    clearEnv: boolean;
+}
+export interface MCPConnectionsState extends FormFeedback {
+    formError?: string;
+}
+export interface MCPConnectionsPanel extends FormDOMBlock<MCPConnectionsState> {
     renderType(): void;
     edit(value?: MCPEditorValue): void;
+    read(): MCPConnectionDraft;
+    clearBearerToken(): void;
+    clearSecrets(): void;
+    toggleEnvironment(): void;
+    readonly list: HTMLElement;
 }
-export declare function createMCPConnectionsPanel(state?: FormFeedback, options?: FormOptions): MCPConnectionsPanel;
-export declare function modelEditorMarkup(prefix: string): string;
-export declare function createModelPicker(state?: FormFeedback, options?: FormOptions): FormDOMBlock<FormFeedback>;
+export declare function createMCPConnectionsPanel(state?: MCPConnectionsState, options?: FormOptions & {
+    onSubmit?: (draft: MCPConnectionDraft) => ActionResult | Promise<ActionResult>;
+}): MCPConnectionsPanel;
+export interface ModelPickerState extends FormFeedback {
+    editor?: ModelEditorState;
+    loading?: boolean;
+}
+export interface ModelPicker extends FormDOMBlock<ModelPickerState> {
+    read(): ModelSelection;
+    reset(selection: ModelSelection): void;
+    focus(): void;
+}
+export declare function createModelPicker(state?: ModelPickerState, options?: FormOptions & {
+    onSubmit?: (selection: ModelSelection) => ActionResult | Promise<ActionResult>;
+}): ModelPicker;
 export interface MCPConnectionItem {
     name: string;
     type: string;
@@ -53,5 +142,12 @@ export interface MCPConnectionItem {
 export interface MCPConnectionListState extends FormFeedback {
     entries: readonly MCPConnectionItem[];
 }
-export declare function createMCPConnectionList(initial: MCPConnectionListState): UIBlock<MCPConnectionListState>;
+export type MCPConnectionAction = 'mcp-login' | 'mcp-logout' | 'mcp-edit' | 'mcp-toggle' | 'mcp-remove';
+export interface MCPConnectionTarget {
+    readonly name: string;
+}
+export interface MCPConnectionListOptions {
+    onAction?: (action: MCPConnectionAction, target: MCPConnectionTarget) => ReturnType<UIAction>;
+}
+export declare function createMCPConnectionList(initial: MCPConnectionListState, options?: MCPConnectionListOptions): UIBlock<MCPConnectionListState>;
 //# sourceMappingURL=panels.d.ts.map

package/dist/forms/panels.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"panels.d.ts","sourceRoot":"","sources":["../../src/forms/panels.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAI1C,MAAM,WAAW,YAAY;IAAG,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE;AACpE,MAAM,WAAW,YAAY,CAAC,KAAK,SAAS,YAAY,CAAE,SAAQ,OAAO,CAAC,KAAK,CAAC;IAC9E,KAAK,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,EAAE,EAAE,EAAE,MAAM,GAAG,CAAC,CAAC;IAC1D,EAAE,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,CAAC;CAC7B;AA0BD,MAAM,WAAW,kBAAmB,SAAQ,YAAY;IAAG,OAAO,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,OAAO,CAAA;CAAE;AAChG,MAAM,WAAW,WAAW;IAAG,QAAQ,CAAC,EAAE,MAAM,CAAA;CAAE;AAClD,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,kBAAkB,EAAE,OAAO,GAAE,WAAgB,GAAG,YAAY,CAAC,kBAAkB,CAAC,CAuD1H;AACD,MAAM,WAAW,cAAc;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,GAAG,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,OAAO,CAAC;IAAC,aAAa,CAAC,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAAC,OAAO,CAAC,EAAE,SAAS,MAAM,EAAE,CAAA;CAAC;AAC9P,MAAM,WAAW,mBAAoB,SAAQ,YAAY,CAAC,YAAY,CAAC;IAAE,UAAU,IAAI,IAAI,CAAC;IAAC,IAAI,CAAC,KAAK,CAAC,EAAE,cAAc,GAAG,IAAI,CAAA;CAAC;AAChI,wBAAgB,yBAAyB,CAAC,KAAK,GAAE,YAAiB,EAAE,OAAO,GAAE,WAAgB,GAAG,mBAAmB,CAwBlH;AACD,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAshC;AAC/kC,wBAAgB,iBAAiB,CAAC,KAAK,GAAE,YAAiB,EAAE,OAAO,GAAE,WAAgB,GAAG,YAAY,CAAC,YAAY,CAAC,CAEjH;AACD,MAAM,WAAW,iBAAiB;IACjC,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,GAAG,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAAC,OAAO,EAAE,OAAO,CAAC;IACvG,cAAc,CAAC,EAAE,OAAO,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,WAAW,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,OAAO,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACjJ;AACD,MAAM,WAAW,sBAAuB,SAAQ,YAAY;IAAG,OAAO,EAAE,SAAS,iBAAiB,EAAE,CAAA;CAAE;AAEtG,wBAAgB,uBAAuB,CAAC,OAAO,EAAE,sBAAsB,GAAG,OAAO,CAAC,sBAAsB,CAAC,CAmCxG"}
+{"version":3,"file":"panels.d.ts","sourceRoot":"","sources":["../../src/forms/panels.ts"],"names":[],"mappings":"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"}

package/dist/forms/panels.js

@@ -1,10 +1,17 @@
-import { scopeIds } from './identity.js';
+import {} from '../core.js';
+import { scopeIds, bindFormSubmission } from './identity.js';
 import { dialogHeading, escape, icon, uniqueId, setText } from '../dom.js';
+import { createModelEditor, modelEditorMarkup } from './model-editor.js';
+import { adoptAction, adoptProductParts, reconcileSelectOptions } from '../foundations.js';
+import { createOperation } from '../operation.js';
+import { reconcileKeyed } from '../reconcile.js';
+export { modelEditorMarkup } from './model-editor.js';
 function formBlock(markup, className, initial, prefix = '') {
     const element = document.createElement('div');
     element.className = className;
     element.innerHTML = markup;
     scopeIds(element, prefix);
+    const parts = adoptProductParts(element);
     let destroyed = false;
     const field = (id) => {
         const result = Array.from(element.querySelectorAll('[id]')).find((node) => node.getAttribute('id') === prefix + id);
@@ -18,20 +25,20 @@ function formBlock(markup, className, initial, prefix = '') {
         if (state.error !== undefined) {
             const error = element.querySelector('[data-dialog-error]') || element.querySelector('.pui-form-error[role="alert"]');
             if (error)
-                error.textContent = state.error;
+                parts.feedback(error).update({ message: state.error, tone: 'error' });
         }
         if (state.disabled !== undefined) {
             for (const control of element.querySelectorAll('button[type="submit"]')) {
-                control.disabled = state.disabled || control.dataset.controlPending === 'true';
+                parts.action(control).update({ disabled: state.disabled, pending: control.dataset.controlPending === 'true' });
             }
         }
     };
     update(initial);
-    return { element, field, id: (id) => prefix + id, update, destroy() { if (destroyed)
-            return; destroyed = true; element.remove(); } };
+    return { element, field, parts, id: (id) => prefix + id, update, destroy() { if (destroyed)
+            return; destroyed = true; parts.destroy(); element.remove(); } };
 }
 export function createSettingsPanel(state, options = {}) {
-    return formBlock(`
+    const block = formBlock(`
     ${dialogHeading('Settings', 'settings-title', 'settings-dialog', 'MAKE IT YOURS')}
     <section class="pui-settings-section pui-appearance-settings" aria-labelledby="appearance-title">
       <h3 id="appearance-title">Appearance</h3>
@@ -83,63 +90,167 @@ export function createSettingsPanel(state, options = {}) {
         <p class="pui-field-hint">Version, usage and failure category only; no conversation, file contents, paths or credentials.</p>
         <div class="pui-settings-actions"><button type="button" class="pui-secondary-button" data-action="diagnostics">Save diagnostics</button></div>
       </section>
-      <div class="pui-modal-footer"><button class="pui-secondary-button" type="button" data-close="settings-dialog">Cancel</button><button class="pui-primary-button" id="save-settings" data-control-pending="true" disabled data-global-idle type="submit">Save settings</button></div>
+      <div class="pui-modal-footer"><button class="pui-secondary-button" type="button" data-pui-close data-close="settings-dialog">Cancel</button><button class="pui-primary-button" id="save-settings" data-control-pending="true" disabled data-global-idle type="submit">Save settings</button></div>
     </form>`, 'pui-settings-panel', state, options.idPrefix ?? uniqueId('pui-form') + '-');
+    const $ = block.field, abort = new AbortController();
+    let current = state, pending = false, removing = false, destroyed = false, operationKind = 'submit';
+    // These controls also exist before providers or appearance state have loaded.
+    // Adopt them eagerly so the first rendered frame uses the shared selector.
+    block.parts.control($('appearance-mode'));
+    block.parts.control($('settings-provider'));
+    const form = $('settings-form'), submit = $('save-settings'), test = $('test-connection'), remove = $('remove-key');
+    const read = () => { const key = $('api-key'); return { provider: block.parts.control($('settings-provider')).getValue(), baseUrl: block.parts.control($('base-url')).getValue().trim(), apiKey: key.disabled ? '' : block.parts.control(key).getValue().trim() }; };
+    const update = (next) => {
+        if (destroyed)
+            return;
+        current = next;
+        block.update(next);
+        block.parts.action(submit).update({ disabled: next.disabled, pending: pending || removing || !!next.testing || next.ready !== true });
+        block.parts.action(test).update({ label: next.testing ? 'Cancel test' : 'Test connection', disabled: !!next.disabled || pending || removing, pending: next.ready !== true });
+        block.parts.action(remove).update({ disabled: !!next.disabled || pending || !!next.testing || next.ready !== true, pending: removing });
+        if (next.appearance) {
+            const appearance = block.parts.control($('appearance-mode'));
+            appearance.reset(next.appearance.mode);
+            appearance.update({ disabled: !!next.appearance.disabled });
+            block.parts.feedback($('appearance-error')).update({ message: next.appearance.error || '', tone: 'error' });
+        }
+        if (next.testResult) {
+            const result = $('connection-test-result');
+            result.textContent = next.testResult.message;
+            result.className = next.testResult.ok === undefined ? '' : next.testResult.ok ? 'pui-test-success' : 'pui-form-error';
+        }
+    };
+    const operation = createOperation({ unavailable: () => !!current.disabled || !!current.testing || current.ready !== true,
+        onPending(value) { pending = value && operationKind === 'submit'; removing = value && operationKind === 'remove'; update(current); },
+        onError(error) { update({ ...current, error }); } });
+    const run = (action, kind) => {
+        if (!action || operation.pending || current.disabled || current.testing || current.ready !== true)
+            return;
+        if (kind === 'submit' && !form.reportValidity())
+            return;
+        operationKind = kind;
+        operation.run(() => { update({ ...current, error: '' }); return action(read()); }, result => { if (!result.ok)
+            update({ ...current, error: result.error }); });
+    };
+    form.addEventListener('submit', event => { if (options.onSubmit) {
+        event.preventDefault();
+        void run(options.onSubmit, 'submit');
+    } }, { signal: abort.signal });
+    remove.addEventListener('click', () => { void run(options.onRemoveKey, 'remove'); }, { signal: abort.signal });
+    test.addEventListener('click', () => { if (!test.disabled && (current.testing || form.reportValidity()))
+        options.onTest?.(read()); }, { signal: abort.signal });
+    $('appearance-mode').addEventListener('change', () => options.onAppearanceChange?.($('appearance-mode').value), { signal: abort.signal });
+    $('settings-provider').addEventListener('change', () => options.onProviderChange?.(read().provider), { signal: abort.signal });
+    form.addEventListener('input', () => options.onDraftChange?.(read()), { signal: abort.signal });
+    $('base-url').addEventListener('invalid', () => { $('provider-advanced').open = true; }, { signal: abort.signal });
+    update(state);
+    return { ...block, read, update, updates: $('update-settings'),
+        setProviders(providers, selected) { if (destroyed)
+            return; const select = $('settings-provider'), previous = selected ?? select.value; reconcileSelectOptions(select, providers.map(provider => ({ value: provider.id, label: `${provider.name}${provider.signedIn ? ' · Signed in' : provider.configured ? ' · Configured' : ''}` })), providers.some(provider => provider.id === previous) ? previous : providers[0]?.id || ''); block.parts.control(select).update({ disabled: !providers.length }); },
+        resetProvider(value) { if (destroyed)
+            return; operation.invalidate(); update({ ...current, error: '' }); block.parts.control($('settings-provider')).reset(value.provider); block.parts.control($('base-url')).reset(value.baseUrl); if (value.clearKey)
+            block.parts.control($('api-key')).reset(''); if (value.collapseAdvanced)
+            $('provider-advanced').open = false; },
+        setCredential(view) { if (destroyed)
+            return; $('key-status').textContent = view.status; $('provider-api-key').hidden = view.hidden; block.parts.control($('api-key')).update({ disabled: view.hidden, required: view.required, placeholder: view.placeholder }); remove.hidden = !view.removeVisible; $('provider-auth-hint').hidden = !view.hint; $('provider-auth-hint').textContent = view.hint || ''; const actions = $('provider-actions'); actions.hidden = !view.actions; if (view.actions && actions.firstChild !== view.actions)
+            actions.replaceChildren(view.actions);
+        else if (!view.actions)
+            actions.replaceChildren(); block.parts.update(); },
+        clearSecrets() { block.parts.control($('api-key')).reset(''); },
+        destroy() { if (destroyed)
+            return; destroyed = true; operation.destroy(); abort.abort(); $('api-key').value = ''; block.destroy(); }
+    };
 }
 export function createMCPConnectionsPanel(state = {}, options = {}) {
-    const block = formBlock(`${dialogHeading('Connections', 'connections-title', 'connections-dialog', 'EXTERNAL TOOLS')}<p class="pui-modal-description">Add an MCP server to give Pith access to its tools. Enabled connections connect automatically when a task starts. Disable a connection to stop using it in tasks. External tools require approval unless this conversation has full access.</p><div class="pui-feature-toolbar"><button class="pui-secondary-button" data-action="refresh-mcp">Refresh</button></div><div id="mcp-list"><p class="pui-feature-hint">Loading connections…</p></div><div id="mcp-error" data-dialog-error class="pui-form-error" role="alert"></div><section class="pui-connection-editor"><div class="pui-section-heading"><span id="mcp-form-title">Add connection</span><button type="button" class="pui-secondary-button" data-action="new-mcp">New connection</button></div><form id="mcp-form"><label class="pui-field-label" for="mcp-name">Name</label><input id="mcp-name" name="name" required autocomplete="off" placeholder="my-tools" /><label class="pui-field-label" for="mcp-type">Connection type</label><select id="mcp-type" name="type" class="pui-feature-select"><option value="http">HTTP</option><option value="stdio">Local command (stdio)</option></select><div id="mcp-http-fields"><label class="pui-field-label" for="mcp-url">Server URL</label><input id="mcp-url" name="url" type="url" placeholder="https://example.com/mcp" autocomplete="off" /><label class="pui-checkbox-field"><input id="mcp-oauth" type="checkbox" />Sign in with OAuth</label><details class="pui-provider-advanced"><summary>OAuth settings (optional)</summary><label class="pui-field-label">Registered client ID<input id="mcp-oauth-client" /></label><label class="pui-field-label">Scopes<input id="mcp-oauth-scope" /></label><p class="pui-field-hint">Uses the server’s OAuth discovery and PKCE. The temporary callback listens on 127.0.0.1:54819.</p></details><label class="pui-field-label" for="mcp-token">Bearer token (optional)</label><input id="mcp-token" name="bearerToken" type="password" autocomplete="new-password" placeholder="Optional token" /><label class="pui-checkbox-field" id="mcp-clear-token-row" hidden><input id="mcp-clear-token" type="checkbox" />Remove saved bearer token</label><p class="pui-field-hint">Saved tokens are never returned to this page. Leave this field blank to keep an existing token.</p></div><div id="mcp-stdio-fields" hidden><label class="pui-field-label" for="mcp-command">Installed executable</label><input id="mcp-command" name="command" placeholder="/path/to/mcp-server" autocomplete="off" /><label class="pui-field-label" for="mcp-args">Arguments (JSON array)</label><textarea id="mcp-args" name="args" rows="3" spellcheck="false">[]</textarea><p class="pui-field-hint">The executable and any runtime it needs must already be installed on your computer. Pith Desk does not bundle external runtimes or a marketplace.</p><div class="pui-secret-label"><label class="pui-field-label" for="mcp-env">Environment overrides (JSON object, optional)</label><button class="pui-secondary-button" type="button" id="mcp-env-visibility" data-action="toggle-env" aria-controls="mcp-env" aria-pressed="false">Show</button></div><textarea id="mcp-env" class="pui-secret-field" name="env" rows="3" spellcheck="false" autocomplete="off" aria-describedby="mcp-env-hint" placeholder='{"API_KEY":"…"}'></textarea><p id="mcp-env-hint" class="pui-field-hint">Values stay private. Leave blank to keep saved overrides. Add a JSON object of string keys and values to set or replace individual overrides.</p><p id="mcp-env-keys" class="pui-field-hint" hidden></p><label class="pui-checkbox-field" id="mcp-clear-env-row" hidden><input id="mcp-clear-env" type="checkbox" />Clear saved environment overrides</label></div><label class="pui-checkbox-field"><input id="mcp-enabled" name="enabled" type="checkbox" checked />Enable this connection</label><div id="mcp-form-error" class="pui-form-error" role="alert"></div><div class="pui-modal-footer"><button class="pui-secondary-button" type="button" data-close="connections-dialog">Close</button><button class="pui-primary-button" type="submit" data-idle-action data-global-idle>Save connection</button></div></form></section>`, 'pui-mcp-connections', state, options.idPrefix ?? uniqueId('pui-form') + '-');
+    const block = formBlock(`${dialogHeading('Connections', 'connections-title', 'connections-dialog', 'EXTERNAL TOOLS')}<p class="pui-modal-description">Add an MCP server to give Pith access to its tools. Enabled connections connect automatically when a task starts. Disable a connection to stop using it in tasks. External tools require approval unless this conversation has full access.</p><div class="pui-feature-toolbar"><button type="button" class="pui-secondary-button" data-action="refresh-mcp">Refresh</button></div><div id="mcp-list"><p class="pui-feature-hint">Loading connections…</p></div><div id="mcp-error" data-dialog-error class="pui-form-error" role="alert"></div><section class="pui-connection-editor"><div class="pui-section-heading"><span id="mcp-form-title">Add connection</span><button type="button" class="pui-secondary-button" data-action="new-mcp">New connection</button></div><form id="mcp-form"><label class="pui-field-label" for="mcp-name">Name</label><input id="mcp-name" name="name" required autocomplete="off" placeholder="my-tools" /><label class="pui-field-label" for="mcp-type">Connection type</label><select id="mcp-type" name="type" class="pui-feature-select"><option value="http">HTTP</option><option value="stdio">Local command (stdio)</option></select><div id="mcp-http-fields"><label class="pui-field-label" for="mcp-url">Server URL</label><input id="mcp-url" name="url" type="url" placeholder="https://example.com/mcp" autocomplete="off" /><label class="pui-checkbox-field"><input id="mcp-oauth" type="checkbox" />Sign in with OAuth</label><details class="pui-provider-advanced"><summary>OAuth settings (optional)</summary><label class="pui-field-label">Registered client ID<input id="mcp-oauth-client" /></label><label class="pui-field-label">Scopes<input id="mcp-oauth-scope" /></label><p class="pui-field-hint">Uses the server’s OAuth discovery and PKCE. The temporary callback listens on 127.0.0.1:54819.</p></details><label class="pui-field-label" for="mcp-token">Bearer token (optional)</label><input id="mcp-token" name="bearerToken" type="password" autocomplete="new-password" placeholder="Optional token" /><label class="pui-checkbox-field" id="mcp-clear-token-row" hidden><input id="mcp-clear-token" type="checkbox" />Remove saved bearer token</label><p class="pui-field-hint">Saved tokens are never returned to this page. Leave this field blank to keep an existing token.</p></div><div id="mcp-stdio-fields" hidden><label class="pui-field-label" for="mcp-command">Installed executable</label><input id="mcp-command" name="command" placeholder="/path/to/mcp-server" autocomplete="off" /><label class="pui-field-label" for="mcp-args">Arguments (JSON array)</label><textarea id="mcp-args" name="args" rows="3" spellcheck="false">[]</textarea><p class="pui-field-hint">The executable and any runtime it needs must already be installed on your computer. Pith Desk does not bundle external runtimes or a marketplace.</p><div class="pui-secret-label"><label class="pui-field-label" for="mcp-env">Environment overrides (JSON object, optional)</label><button class="pui-secondary-button" type="button" id="mcp-env-visibility" data-action="toggle-env" aria-controls="mcp-env" aria-pressed="false">Show</button></div><textarea id="mcp-env" class="pui-secret-field" name="env" rows="3" spellcheck="false" autocomplete="off" aria-describedby="mcp-env-hint" placeholder='{"API_KEY":"…"}'></textarea><p id="mcp-env-hint" class="pui-field-hint">Values stay private. Leave blank to keep saved overrides. Add a JSON object of string keys and values to set or replace individual overrides.</p><p id="mcp-env-keys" class="pui-field-hint" hidden></p><label class="pui-checkbox-field" id="mcp-clear-env-row" hidden><input id="mcp-clear-env" type="checkbox" />Clear saved environment overrides</label></div><label class="pui-checkbox-field"><input id="mcp-enabled" name="enabled" type="checkbox" checked />Enable this connection</label><div id="mcp-form-error" class="pui-form-error" role="alert"></div><div class="pui-modal-footer"><button class="pui-secondary-button" type="button" data-pui-close data-close="connections-dialog">Close</button><button class="pui-primary-button" type="submit" data-idle-action data-global-idle>Save connection</button></div></form></section>`, 'pui-mcp-connections', state, options.idPrefix ?? uniqueId('pui-form') + '-');
     const $ = block.field;
     const abort = new AbortController();
-    let disposed = false;
+    let disposed = false, pending = false, current = state;
+    const form = $('mcp-form'), submit = form.querySelector('button[type="submit"]');
+    const control = (id) => block.parts.control($(id));
+    const read = () => ({ name: control('mcp-name').getValue().trim(), type: control('mcp-type').getValue() === 'stdio' ? 'stdio' : 'http', url: control('mcp-url').getValue().trim(), oauth: control('mcp-oauth').getChecked(), oauthClientId: control('mcp-oauth-client').getValue().trim(), oauthScope: control('mcp-oauth-scope').getValue().trim(), command: control('mcp-command').getValue().trim(), args: control('mcp-args').getValue(), enabled: control('mcp-enabled').getChecked(), bearerToken: control('mcp-token').getValue().trim(), clearBearerToken: control('mcp-clear-token').getChecked(), env: control('mcp-env').getValue(), clearEnv: control('mcp-clear-env').getChecked() });
+    const update = (next) => { if (disposed)
+        return; current = next; block.update(next); if (next.formError !== undefined)
+        block.parts.feedback($('mcp-form-error')).update({ message: next.formError, tone: 'error' }); block.parts.action(submit).update({ disabled: next.disabled, pending }); };
     const renderType = () => { if (disposed)
-        return; const http = $('mcp-type').value === 'http'; $('mcp-http-fields').hidden = !http; $('mcp-stdio-fields').hidden = http; $('mcp-url').required = http; $('mcp-command').required = !http; };
+        return; const http = control('mcp-type').getValue() === 'http'; for (const [id, active] of [['mcp-http-fields', http], ['mcp-stdio-fields', !http]]) {
+        const group = $(id);
+        group.hidden = !active;
+        for (const field of group.querySelectorAll('input,textarea'))
+            block.parts.control(field).update({ disabled: !active });
+    } control('mcp-url').update({ required: http }); control('mcp-command').update({ required: !http }); };
     const edit = (entry) => {
         if (disposed)
             return;
+        submission.invalidate();
         $('mcp-form').reset();
         $('mcp-env').classList.remove('pui-revealed');
         $('mcp-env-visibility').setAttribute('aria-pressed', 'false');
         $('mcp-env-visibility').textContent = 'Show';
         $('mcp-form-title').textContent = entry ? `Edit ${entry.name}` : 'Add connection';
-        $('mcp-name').value = entry?.name || '';
-        $('mcp-name').readOnly = !!entry;
-        $('mcp-type').value = entry?.type || 'http';
-        $('mcp-url').value = entry?.url || '';
-        $('mcp-oauth').checked = entry?.oauth || false;
-        $('mcp-oauth-client').value = entry?.oauthClientId || '';
-        $('mcp-oauth-scope').value = entry?.oauthScope || '';
-        $('mcp-command').value = entry?.command || '';
-        $('mcp-args').value = JSON.stringify(entry?.args || [], null, 2);
-        $('mcp-enabled').checked = entry?.enabled ?? true;
-        $('mcp-token').placeholder = entry?.hasBearerToken ? 'Leave blank to keep your saved token' : 'Optional token';
+        control('mcp-name').reset(entry?.name || '');
+        control('mcp-name').update({ readOnly: !!entry });
+        control('mcp-type').reset(entry?.type || 'http');
+        control('mcp-url').reset(entry?.url || '');
+        control('mcp-oauth').reset(entry?.oauth || false);
+        control('mcp-oauth-client').reset(entry?.oauthClientId || '');
+        control('mcp-oauth-scope').reset(entry?.oauthScope || '');
+        control('mcp-command').reset(entry?.command || '');
+        control('mcp-args').reset(JSON.stringify(entry?.args || [], null, 2));
+        control('mcp-enabled').reset(entry?.enabled ?? true);
+        control('mcp-token').update({ placeholder: entry?.hasBearerToken ? 'Leave blank to keep your saved token' : 'Optional token' });
         $('mcp-clear-token-row').hidden = !entry?.hasBearerToken;
         const envKeys = entry?.envKeys || [];
         $('mcp-clear-env-row').hidden = !envKeys.length;
         $('mcp-env-keys').hidden = !envKeys.length;
         $('mcp-env-keys').textContent = `Saved environment keys: ${envKeys.join(', ')}`;
         $('mcp-form-error').textContent = '';
+        current = { ...current, formError: '' };
+        update(current);
         renderType();
         $(entry ? entry.type === 'stdio' ? 'mcp-command' : 'mcp-url' : 'mcp-name').focus();
     };
     $('mcp-type').addEventListener('change', renderType, { signal: abort.signal });
-    $('mcp-env-visibility').addEventListener('click', (event) => { event.stopPropagation(); const field = $('mcp-env'); const revealed = field.classList.toggle('pui-revealed'); const button = $('mcp-env-visibility'); button.setAttribute('aria-pressed', String(revealed)); button.textContent = revealed ? 'Hide' : 'Show'; }, { signal: abort.signal });
+    const toggleEnvironment = () => { if (disposed)
+        return; const field = $('mcp-env'); const revealed = field.classList.toggle('pui-revealed'); const button = $('mcp-env-visibility'); button.setAttribute('aria-pressed', String(revealed)); block.parts.action(button).update({ label: revealed ? 'Hide' : 'Show' }); };
+    $('mcp-env-visibility').addEventListener('click', event => { event.stopPropagation(); toggleEnvironment(); }, { signal: abort.signal });
+    const submission = bindFormSubmission(form, { read, unavailable: () => !!current.disabled, onSubmit: options.onSubmit, onPending(value) { pending = value; update(current); }, onError(formError) { update({ ...current, formError }); } });
+    const clearBearerToken = () => { control('mcp-token').reset(''); };
+    const clearSecrets = () => { clearBearerToken(); control('mcp-env').reset(''); };
     renderType();
-    return { ...block, renderType, edit, destroy() { if (disposed)
-            return; disposed = true; abort.abort(); block.destroy(); } };
+    update(state);
+    return { ...block, update, renderType, edit, read, clearBearerToken, clearSecrets, toggleEnvironment, list: $('mcp-list'), destroy() { if (disposed)
+            return; disposed = true; submission.destroy(); abort.abort(); clearSecrets(); block.destroy(); } };
 }
-export function modelEditorMarkup(prefix) { prefix = escape(prefix); return `<label class="pui-field-label" for="${prefix}-provider">Provider</label><select class="pui-feature-select" id="${prefix}-provider" required disabled><option value="">Loading providers…</option></select><label class="pui-field-label" for="${prefix}-search">Model</label><input id="${prefix}-search" type="search" placeholder="Search by model name or ID" autocomplete="off" /><label class="pui-sr-only" for="${prefix}-model">Choose model</label><select id="${prefix}-model" class="pui-model-list" size="6" required disabled></select><p id="${prefix}-capabilities" class="pui-field-hint" aria-live="polite"></p><label class="pui-field-label" id="${prefix}-thinking-label" for="${prefix}-thinking">Thinking effort</label><select id="${prefix}-thinking" class="pui-feature-select" aria-describedby="${prefix}-capabilities" required></select><p class="pui-field-hint">Built-in models come from the Pith SDK catalog. Custom models use your saved definitions. Availability depends on your endpoint and account.</p>`; }
 export function createModelPicker(state = {}, options = {}) {
-    return formBlock(`${dialogHeading('Choose a model', 'model-title', 'model-dialog', 'PITH MODEL CATALOG')}<form id="model-form">${modelEditorMarkup('picker')}<div id="model-error" class="pui-form-error" role="alert"></div><div class="pui-modal-footer"><button type="button" class="pui-secondary-button" data-close="model-dialog">Cancel</button><button type="submit" class="pui-primary-button" id="choose-model" data-global-idle data-control-pending="true" disabled>Use model</button></div></form>`, 'pui-model-picker', state, options.idPrefix ?? uniqueId('pui-form') + '-');
+    const prefix = options.idPrefix ?? uniqueId('pui-form') + '-';
+    const block = formBlock(`${dialogHeading('Choose a model', 'model-title', 'model-dialog', 'PITH MODEL CATALOG')}<form id="model-form">${modelEditorMarkup('picker')}<div id="model-error" class="pui-form-error" role="alert"></div><div class="pui-modal-footer"><button type="button" class="pui-secondary-button" data-pui-close data-close="model-dialog">Cancel</button><button type="submit" class="pui-primary-button" id="choose-model" data-global-idle data-control-pending="true" disabled>Use model</button></div></form>`, 'pui-model-picker', state, prefix);
+    let editor;
+    let destroyed = false, pending = false, current = state;
+    const form = block.field('model-form'), submit = block.field('choose-model');
+    const update = (next) => { if (destroyed)
+        return; current = next; block.update(next); if (next.editor) {
+        if (editor)
+            editor.update(next.editor);
+        else
+            editor = createModelEditor(next.editor, { prefix: prefix + 'picker', element: block.element });
+    } const loading = next.loading ?? !next.editor; block.parts.action(submit).update({ disabled: next.disabled, pending: pending || loading }); };
+    const read = () => editor?.read() || { provider: '', model: '', thinkingLevel: '' };
+    const submission = bindFormSubmission(form, { read, unavailable: () => submit.disabled, onSubmit: options.onSubmit, onPending(value) { pending = value; update(current); }, onError(error) { update({ ...current, error }); } });
+    update(state);
+    return { ...block, update, read, reset(selection) { submission.invalidate(); editor?.reset(selection); }, focus() { editor?.focus(); }, destroy() { if (destroyed)
+            return; destroyed = true; submission.destroy(); editor?.destroy(); block.destroy(); } };
 }
-export function createMCPConnectionList(initial) {
+export function createMCPConnectionList(initial, options = {}) {
     const element = document.createElement('div');
     element.className = 'pui-mcp-connection-list';
+    const parts = adoptProductParts(element);
     let destroyed = false;
     const entries = new Map();
     const empty = document.createElement('p');
     empty.className = 'pui-feature-hint';
     empty.textContent = 'No connections yet. Add an HTTP server or an installed local MCP command below. Tools are discovered on demand using tool search and Codemode.';
-    function createEntry() {
+    function createEntry(item) {
         const root = document.createElement('article');
         root.className = 'pui-connection-card';
         root.innerHTML = '<div class="pui-connection-card-heading"><strong></strong></div><p class="pui-file-path"></p><p class="pui-feature-hint"></p><p class="pui-connection-status" role="status"></p><p class="pui-feature-hint" hidden></p><p class="pui-form-error"></p><div class="pui-file-actions"></div>';
@@ -158,67 +269,62 @@ export function createMCPConnectionList(initial) {
             node.dataset.idleAction = '';
         }
         actions.append(edit, toggle, remove);
-        return { element: root, name: root.querySelector('strong'), address: paragraphs[0], enabled: paragraphs[1], status: paragraphs[2], env: paragraphs[3], error: paragraphs[4], actions, signIn, signOut, edit, toggle, remove };
+        const entry = { element: root, name: root.querySelector('strong'), address: paragraphs[0], enabled: paragraphs[1], status: paragraphs[2], env: paragraphs[3], error: paragraphs[4], actions, signIn, signOut, edit, toggle, remove, handles: new Map(), abort: new AbortController(), localError: '' };
+        const target = Object.freeze({ name: item.name });
+        for (const [node, action] of [[signIn, 'mcp-login'], [signOut, 'mcp-logout'], [edit, 'mcp-edit'], [toggle, 'mcp-toggle'], [remove, 'mcp-remove']]) {
+            if (options.onAction)
+                node.addEventListener('click', event => event.stopPropagation(), { signal: entry.abort.signal });
+            entry.handles.set(node, adoptAction(node, { onAction: options.onAction ? () => { entry.localError = ''; parts.feedback(entry.error).update({ message: '', tone: 'error' }); return options.onAction(action, target); } : undefined, onError(message) { entry.localError = message; parts.feedback(entry.error).update({ message, tone: 'error' }); } }));
+        }
+        return entry;
     }
+    const release = (entry) => { entry.abort.abort(); for (const handle of entry.handles.values())
+        handle.destroy(); };
     const update = (state) => {
         if (destroyed)
             return;
-        const current = new Set();
-        let cursor = element.firstElementChild;
-        for (const item of state.entries) {
-            current.add(item.name);
-            let entry = entries.get(item.name);
-            if (!entry) {
-                entry = createEntry();
-                entries.set(item.name, entry);
-            }
-            setText(entry.name, item.name);
-            entry.element.dataset.connectionKey = item.name;
-            setText(entry.address, item.type === 'http' ? item.url || '' : [item.command, ...(item.args || [])].join(' '));
-            setText(entry.enabled, `${item.enabled ? 'Enabled' : 'Disabled'}${item.hasBearerToken ? ' · Token configured' : ''}`);
-            setText(entry.status, item.statusLabel);
-            entry.status.classList.toggle('pui-is-error', item.enabled && item.status === 'error');
-            entry.env.hidden = !item.envKeys?.length;
-            setText(entry.env, item.envKeys?.length ? 'Saved environment keys: ' + item.envKeys.join(', ') : '');
-            setText(entry.error, item.error || '');
-            setText(entry.signIn, item.signedIn ? 'Sign in again' : 'Sign in');
-            entry.signIn.dataset.id = entry.signOut.dataset.id = item.name;
-            entry.edit.dataset.mcpEdit = item.name;
-            entry.toggle.dataset.mcpToggle = item.name;
-            entry.remove.dataset.mcpRemove = item.name;
-            setText(entry.toggle, item.enabled ? 'Disable' : 'Enable');
-            if (item.oauth) {
-                if (entry.signIn.parentElement !== entry.actions)
-                    entry.actions.insertBefore(entry.signIn, entry.edit);
-            }
-            else
-                entry.signIn.remove();
-            if (item.oauth && item.signedIn) {
-                if (entry.signOut.parentElement !== entry.actions)
-                    entry.actions.insertBefore(entry.signOut, entry.edit);
-            }
-            else
-                entry.signOut.remove();
-            for (const button of [entry.signIn, entry.signOut, entry.edit, entry.toggle, entry.remove])
-                button.disabled = !!state.disabled;
-            if (entry.element !== cursor)
-                element.insertBefore(entry.element, cursor);
-            cursor = entry.element.nextElementSibling;
-        }
-        for (const [key, entry] of entries)
-            if (!current.has(key)) {
-                entry.element.remove();
-                entries.delete(key);
-            }
+        reconcileKeyed(element, entries, state.entries, { key: item => item.name, element: entry => entry.element, create: createEntry, update(entry, item) {
+                setText(entry.name, item.name);
+                entry.element.dataset.connectionKey = item.name;
+                setText(entry.address, item.type === 'http' ? item.url || '' : [item.command, ...(item.args || [])].join(' '));
+                setText(entry.enabled, `${item.enabled ? 'Enabled' : 'Disabled'}${item.hasBearerToken ? ' · Token configured' : ''}`);
+                setText(entry.status, item.statusLabel);
+                entry.status.classList.toggle('pui-is-error', item.enabled && item.status === 'error');
+                entry.env.hidden = !item.envKeys?.length;
+                setText(entry.env, item.envKeys?.length ? 'Saved environment keys: ' + item.envKeys.join(', ') : '');
+                parts.feedback(entry.error).update({ message: item.error || entry.localError, tone: 'error' });
+                setText(entry.signIn, item.signedIn ? 'Sign in again' : 'Sign in');
+                entry.signIn.dataset.id = entry.signOut.dataset.id = item.name;
+                entry.edit.dataset.mcpEdit = item.name;
+                entry.toggle.dataset.mcpToggle = item.name;
+                entry.remove.dataset.mcpRemove = item.name;
+                setText(entry.toggle, item.enabled ? 'Disable' : 'Enable');
+                if (item.oauth) {
+                    if (entry.signIn.parentElement !== entry.actions)
+                        entry.actions.insertBefore(entry.signIn, entry.edit);
+                }
+                else
+                    entry.signIn.remove();
+                if (item.oauth && item.signedIn) {
+                    if (entry.signOut.parentElement !== entry.actions)
+                        entry.actions.insertBefore(entry.signOut, entry.edit);
+                }
+                else
+                    entry.signOut.remove();
+                for (const [button, handle] of entry.handles)
+                    handle.update({ disabled: !!state.disabled || (button === entry.signIn && !item.oauth) || (button === entry.signOut && (!item.oauth || !item.signedIn)) });
+            }, destroy: release });
         if (!state.entries.length) {
             if (empty.parentElement !== element)
                 element.append(empty);
         }
         else
             empty.remove();
+        parts.update();
     };
     update(initial);
     return { element, update, destroy() { if (destroyed)
-            return; destroyed = true; entries.clear(); element.remove(); } };
+            return; destroyed = true; for (const entry of entries.values())
+            release(entry); parts.destroy(); entries.clear(); element.remove(); } };
 }
 //# sourceMappingURL=panels.js.map