@agentconnect/ui 0.1.0

package/dist/components/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Component exports.
+ */
+export { AgentConnectLoginButton } from './login-button';
+export { AgentConnectModelPicker } from './model-picker';
+export { AgentConnectProviderStatus } from './provider-status';
+export { AgentConnectConnect } from './connect';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,uBAAuB,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,uBAAuB,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,0BAA0B,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,mBAAmB,EAAE,MAAM,WAAW,CAAC"}

package/dist/components/index.js

@@ -0,0 +1,7 @@
+/**
+ * Component exports.
+ */
+export { AgentConnectLoginButton } from './login-button';
+export { AgentConnectModelPicker } from './model-picker';
+export { AgentConnectProviderStatus } from './provider-status';
+export { AgentConnectConnect } from './connect';

package/dist/components/login-button.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Login button component for a single provider.
+ */
+import type { ProviderId } from '../types';
+export declare class AgentConnectLoginButton extends HTMLElement {
+    static get observedAttributes(): string[];
+    private button;
+    private status;
+    constructor();
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    get provider(): ProviderId;
+    refresh(): Promise<void>;
+    handleClick(): Promise<void>;
+}
+//# sourceMappingURL=login-button.d.ts.map

package/dist/components/login-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"login-button.d.ts","sourceRoot":"","sources":["../../src/components/login-button.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,EAAE,UAAU,EAA4B,MAAM,UAAU,CAAC;AAIrE,qBAAa,uBAAwB,SAAQ,WAAW;IACtD,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAExC;IAED,OAAO,CAAC,MAAM,CAAoB;IAClC,OAAO,CAAC,MAAM,CAAkB;;IAShC,iBAAiB,IAAI,IAAI;IAYzB,wBAAwB,IAAI,IAAI;IAIhC,IAAI,QAAQ,IAAI,UAAU,CAEzB;IAEK,OAAO,IAAI,OAAO,CAAC,IAAI,CAAC;IAYxB,WAAW,IAAI,OAAO,CAAC,IAAI,CAAC;CAqBnC"}

package/dist/components/login-button.js

@@ -0,0 +1,69 @@
+/**
+ * Login button component for a single provider.
+ */
+import { getClient } from '../client';
+import { ensureStyles } from '../styles';
+export class AgentConnectLoginButton extends HTMLElement {
+    static get observedAttributes() {
+        return ['provider'];
+    }
+    button;
+    status;
+    constructor() {
+        super();
+        this.attachShadow({ mode: 'open' });
+        this.button = document.createElement('button');
+        this.status = document.createElement('span');
+    }
+    connectedCallback() {
+        ensureStyles(this.shadowRoot);
+        this.button.className = 'ac-button';
+        this.button.addEventListener('click', () => this.handleClick());
+        this.status.className = 'ac-chip';
+        const row = document.createElement('div');
+        row.className = 'ac-row';
+        row.append(this.button, this.status);
+        this.shadowRoot.appendChild(row);
+        this.refresh();
+    }
+    attributeChangedCallback() {
+        this.refresh();
+    }
+    get provider() {
+        return this.getAttribute('provider') || 'claude';
+    }
+    async refresh() {
+        this.button.textContent = `Login: ${this.provider}`;
+        this.status.textContent = 'Checking...';
+        try {
+            const client = await getClient();
+            const info = await client.providers.status(this.provider);
+            this.status.textContent = info.loggedIn ? 'Ready' : 'Login needed';
+        }
+        catch {
+            this.status.textContent = 'Unavailable';
+        }
+    }
+    async handleClick() {
+        this.button.disabled = true;
+        this.status.textContent = 'Working...';
+        try {
+            const client = await getClient();
+            const installed = await client.providers.ensureInstalled(this.provider);
+            if (!installed.installed) {
+                this.status.textContent = 'Install failed';
+                return;
+            }
+            const loggedIn = await client.providers.login(this.provider);
+            this.status.textContent = loggedIn.loggedIn ? 'Ready' : 'Login needed';
+            const detail = {
+                provider: this.provider,
+                loggedIn: loggedIn.loggedIn,
+            };
+            this.dispatchEvent(new CustomEvent('provider-login', { detail }));
+        }
+        finally {
+            this.button.disabled = false;
+        }
+    }
+}

package/dist/components/model-picker.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Model picker dropdown component.
+ */
+import type { ProviderId } from '../types';
+export declare class AgentConnectModelPicker extends HTMLElement {
+    static get observedAttributes(): string[];
+    private select;
+    private label;
+    constructor();
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    get provider(): ProviderId | '';
+    refresh(): Promise<void>;
+    emitChange(): void;
+}
+//# sourceMappingURL=model-picker.d.ts.map

package/dist/components/model-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"model-picker.d.ts","sourceRoot":"","sources":["../../src/components/model-picker.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,EAAE,UAAU,EAA0B,MAAM,UAAU,CAAC;AAInE,qBAAa,uBAAwB,SAAQ,WAAW;IACtD,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAExC;IAED,OAAO,CAAC,MAAM,CAAoB;IAClC,OAAO,CAAC,KAAK,CAAkB;;IAS/B,iBAAiB,IAAI,IAAI;IAazB,wBAAwB,IAAI,IAAI;IAIhC,IAAI,QAAQ,IAAI,UAAU,GAAG,EAAE,CAE9B;IAEK,OAAO,IAAI,OAAO,CAAC,IAAI,CAAC;IAoB9B,UAAU,IAAI,IAAI;CAKnB"}

package/dist/components/model-picker.js

@@ -0,0 +1,61 @@
+/**
+ * Model picker dropdown component.
+ */
+import { getClient } from '../client';
+import { ensureStyles } from '../styles';
+export class AgentConnectModelPicker extends HTMLElement {
+    static get observedAttributes() {
+        return ['provider'];
+    }
+    select;
+    label;
+    constructor() {
+        super();
+        this.attachShadow({ mode: 'open' });
+        this.select = document.createElement('select');
+        this.label = document.createElement('span');
+    }
+    connectedCallback() {
+        ensureStyles(this.shadowRoot);
+        this.select.className = 'ac-select';
+        this.label.className = 'ac-chip';
+        this.label.textContent = 'Model';
+        const row = document.createElement('div');
+        row.className = 'ac-row';
+        row.append(this.label, this.select);
+        this.shadowRoot.appendChild(row);
+        this.select.addEventListener('change', () => this.emitChange());
+        this.refresh();
+    }
+    attributeChangedCallback() {
+        this.refresh();
+    }
+    get provider() {
+        return this.getAttribute('provider') || '';
+    }
+    async refresh() {
+        this.select.innerHTML = '';
+        try {
+            const client = await getClient();
+            const models = await client.models.list(this.provider || undefined);
+            for (const model of models) {
+                const option = document.createElement('option');
+                option.value = model.id;
+                option.textContent = model.displayName || model.id;
+                this.select.appendChild(option);
+            }
+            this.emitChange();
+        }
+        catch {
+            const option = document.createElement('option');
+            option.value = '';
+            option.textContent = 'No models';
+            this.select.appendChild(option);
+        }
+    }
+    emitChange() {
+        const value = this.select.value;
+        const detail = { model: value };
+        this.dispatchEvent(new CustomEvent('model-change', { detail }));
+    }
+}

package/dist/components/provider-status.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Provider status list component.
+ */
+export declare class AgentConnectProviderStatus extends HTMLElement {
+    private container;
+    constructor();
+    connectedCallback(): void;
+    refresh(): Promise<void>;
+}
+//# sourceMappingURL=provider-status.d.ts.map

package/dist/components/provider-status.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"provider-status.d.ts","sourceRoot":"","sources":["../../src/components/provider-status.ts"],"names":[],"mappings":"AAAA;;GAEG;AAKH,qBAAa,0BAA2B,SAAQ,WAAW;IACzD,OAAO,CAAC,SAAS,CAAiB;;IAQlC,iBAAiB,IAAI,IAAI;IAOnB,OAAO,IAAI,OAAO,CAAC,IAAI,CAAC;CAsB/B"}

package/dist/components/provider-status.js

@@ -0,0 +1,42 @@
+/**
+ * Provider status list component.
+ */
+import { getClient } from '../client';
+import { ensureStyles } from '../styles';
+export class AgentConnectProviderStatus extends HTMLElement {
+    container;
+    constructor() {
+        super();
+        this.attachShadow({ mode: 'open' });
+        this.container = document.createElement('div');
+    }
+    connectedCallback() {
+        ensureStyles(this.shadowRoot);
+        this.container.className = 'ac-list';
+        this.shadowRoot.appendChild(this.container);
+        this.refresh();
+    }
+    async refresh() {
+        this.container.innerHTML = '';
+        try {
+            const client = await getClient();
+            const providers = await client.providers.list();
+            for (const info of providers) {
+                const row = document.createElement('div');
+                row.className = 'ac-row';
+                const chip = document.createElement('span');
+                chip.className = 'ac-chip';
+                chip.textContent = info.loggedIn ? 'Ready' : 'Login needed';
+                const label = document.createElement('strong');
+                label.textContent = info.name || info.id;
+                row.append(label, chip);
+                this.container.appendChild(row);
+            }
+        }
+        catch {
+            const row = document.createElement('div');
+            row.textContent = 'Provider status unavailable';
+            this.container.appendChild(row);
+        }
+    }
+}

package/dist/constants.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Constants used across UI components.
+ */
+import type { ErrorMessageConfig, ProviderId } from './types';
+/**
+ * Predefined error messages for common failure scenarios.
+ */
+export declare const ERROR_MESSAGES: Record<string, ErrorMessageConfig>;
+/**
+ * SVG icons for each provider.
+ */
+export declare const PROVIDER_ICONS: Record<ProviderId, string>;
+/**
+ * HTML template for the connect component.
+ */
+export declare const CONNECT_TEMPLATE = "\n  <div class=\"ac-connect\">\n    <button class=\"ac-button ac-connect-button\" type=\"button\">Connect Agent</button>\n  </div>\n  <div class=\"ac-overlay\" part=\"overlay\" data-mode=\"modal\">\n    <div class=\"ac-panel ac-modal\" role=\"dialog\" aria-modal=\"true\" data-view=\"connect\" data-active=\"true\">\n      <div class=\"ac-modal-header\">\n        <div>\n          <div class=\"ac-modal-subtitle\">AgentConnect</div>\n          <div class=\"ac-modal-title\">Connect your agent</div>\n        </div>\n        <button class=\"ac-button ghost ac-close\" type=\"button\" aria-label=\"Close\">&times;</button>\n      </div>\n      <div class=\"ac-progress\" hidden>\n        <div class=\"ac-progress-track\">\n          <div class=\"ac-progress-bar\"></div>\n        </div>\n        <div class=\"ac-progress-label\" aria-live=\"polite\"></div>\n      </div>\n      <div class=\"ac-section\">\n        <div class=\"ac-provider-list\"></div>\n      </div>\n    </div>\n    <div class=\"ac-panel ac-modal\" role=\"dialog\" aria-modal=\"true\" data-view=\"local\" hidden>\n      <div class=\"ac-modal-header\">\n        <div>\n          <div class=\"ac-modal-subtitle\">Local provider</div>\n          <div class=\"ac-modal-title\">Connect a local model</div>\n        </div>\n        <button class=\"ac-button ghost ac-close\" type=\"button\" aria-label=\"Close\">&times;</button>\n      </div>\n      <div class=\"ac-helper\">\n        Connect to an OpenAI-compatible endpoint (Ollama, LM Studio, vLLM, llama.cpp).\n      </div>\n      <div class=\"ac-field\">\n        <label>Base URL</label>\n        <input class=\"ac-input ac-local-base\" type=\"text\" placeholder=\"http://localhost:11434/v1\" />\n      </div>\n      <div class=\"ac-field\">\n        <label>Model ID</label>\n        <input class=\"ac-input ac-local-model\" type=\"text\" placeholder=\"llama3.1:8b\" />\n      </div>\n      <div class=\"ac-field\">\n        <label>API Key (optional)</label>\n        <input class=\"ac-input ac-local-key\" type=\"password\" placeholder=\"sk-...\" />\n      </div>\n      <div class=\"ac-field\">\n        <label>Model list (optional)</label>\n        <input class=\"ac-input ac-local-models\" type=\"text\" placeholder=\"llama3.1:8b, qwen2.5:7b\" />\n      </div>\n      <div class=\"ac-alert ac-local-status\" hidden></div>\n      <div class=\"ac-actions\">\n        <button class=\"ac-button ghost ac-back\" type=\"button\">Back</button>\n        <div class=\"ac-actions-right\">\n          <button class=\"ac-button ac-save-local\" type=\"button\">Save</button>\n        </div>\n      </div>\n    </div>\n    <div class=\"ac-panel ac-popover\" role=\"dialog\" aria-modal=\"true\" data-view=\"connected\" hidden>\n      <div>\n        <div class=\"ac-popover-title\">Provider</div>\n      </div>\n      <div class=\"ac-field ac-model-field\">\n        <label>Model</label>\n        <select class=\"ac-select ac-connected-model\"></select>\n        <div class=\"ac-model-loading\" style=\"display: none\">\n          <span class=\"ac-spinner\"></span>\n          <span>Loading models...</span>\n        </div>\n      </div>\n      <div class=\"ac-field ac-effort-field\" style=\"display: none\">\n        <label>Reasoning</label>\n        <select class=\"ac-select ac-connected-effort\"></select>\n      </div>\n      <div class=\"ac-actions\">\n        <button class=\"ac-button ghost ac-disconnect\" type=\"button\">Disconnect</button>\n      </div>\n    </div>\n  </div>\n";
+/**
+ * Default local provider configuration.
+ */
+export declare const DEFAULT_LOCAL_CONFIG: {
+    baseUrl: string;
+    apiKey: string;
+    model: string;
+    models: string[];
+};
+/**
+ * Default storage keys.
+ */
+export declare const STORAGE_KEYS: {
+    readonly lastSelection: "agentconnect:last-selection";
+    readonly localConfig: "agentconnect:local-config";
+};
+//# sourceMappingURL=constants.d.ts.map

package/dist/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,EAAE,kBAAkB,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE9D;;GAEG;AACH,eAAO,MAAM,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,kBAAkB,CAoC7D,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,EAAE,MAAM,CAAC,UAAU,EAAE,MAAM,CAUrD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,gBAAgB,y6GA+E5B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,oBAAoB;;;;YAIjB,MAAM,EAAE;CACvB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,YAAY;;;CAGf,CAAC"}

package/dist/constants.js

@@ -0,0 +1,156 @@
+/**
+ * Constants used across UI components.
+ */
+/**
+ * Predefined error messages for common failure scenarios.
+ */
+export const ERROR_MESSAGES = {
+    install_failed: {
+        title: 'Installation failed',
+        message: 'Could not install provider. Check your internet connection.',
+        action: 'Try again',
+    },
+    login_failed: {
+        title: 'Login failed',
+        message: 'Could not authenticate. Please try again.',
+        action: 'Retry',
+    },
+    login_incomplete: {
+        title: 'Login incomplete',
+        message: 'Authentication was not completed. Please try again.',
+        action: 'Retry',
+    },
+    connection_failed: {
+        title: 'Connection failed',
+        message: 'Cannot reach AgentConnect host. Start it with: agentconnect dev',
+        action: 'Retry',
+    },
+    local_unreachable: {
+        title: 'Endpoint unreachable',
+        message: 'Cannot reach the local endpoint. Make sure Ollama/LM Studio is running.',
+        action: 'Retry',
+    },
+    local_save_failed: {
+        title: 'Save failed',
+        message: 'Could not save local provider settings.',
+        action: 'Retry',
+    },
+    no_models: {
+        title: 'No models available',
+        message: 'No models found for this provider.',
+        action: null,
+    },
+};
+/**
+ * SVG icons for each provider.
+ */
+export const PROVIDER_ICONS = {
+    claude: `<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <path d="m4.7144 15.9555 4.7174-2.6471.079-.2307-.079-.1275h-.2307l-.7893-.0486-2.6956-.0729-2.3375-.0971-2.2646-.1214-.5707-.1215-.5343-.7042.0546-.3522.4797-.3218.686.0608 1.5179.1032 2.2767.1578 1.6514.0972 2.4468.255h.3886l.0546-.1579-.1336-.0971-.1032-.0972L6.973 9.8356l-2.55-1.6879-1.3356-.9714-.7225-.4918-.3643-.4614-.1578-1.0078.6557-.7225.8803.0607.2246.0607.8925.686 1.9064 1.4754 2.4893 1.8336.3643.3035.1457-.1032.0182-.0728-.164-.2733-1.3539-2.4467-1.445-2.4893-.6435-1.032-.17-.6194c-.0607-.255-.1032-.4674-.1032-.7285L6.287.1335 6.6997 0l.9957.1336.419.3642.6192 1.4147 1.0018 2.2282 1.5543 3.0296.4553.8985.2429.8318.091.255h.1579v-.1457l.1275-1.706.2368-2.0947.2307-2.6957.0789-.7589.3764-.9107.7468-.4918.5828.2793.4797.686-.0668.4433-.2853 1.8517-.5586 2.9021-.3643 1.9429h.2125l.2429-.2429.9835-1.3053 1.6514-2.0643.7286-.8196.85-.9046.5464-.4311h1.0321l.759 1.1293-.34 1.1657-1.0625 1.3478-.8804 1.1414-1.2628 1.7-.7893 1.36.0729.1093.1882-.0183 2.8535-.607 1.5421-.2794 1.8396-.3157.8318.3886.091.3946-.3278.8075-1.967.4857-2.3072.4614-3.4364.8136-.0425.0304.0486.0607 1.5482.1457.6618.0364h1.621l3.0175.2247.7892.522.4736.6376-.079.4857-1.2142.6193-1.6393-.3886-3.825-.9107-1.3113-.3279h-.1822v.1093l1.0929 1.0686 2.0035 1.8092 2.5075 2.3314.1275.5768-.3218.4554-.34-.0486-2.2039-1.6575-.85-.7468-1.9246-1.621h-.1275v.17l.4432.6496 2.3436 3.5214.1214 1.0807-.17.3521-.6071.2125-.6679-.1214-1.3721-1.9246L14.38 17.959l-1.1414-1.9428-.1397.079-.674 7.2552-.3156.3703-.7286.2793-.6071-.4614-.3218-.7468.3218-1.4753.3886-1.9246.3157-1.53.2853-1.9004.17-.6314-.0121-.0425-.1397.0182-1.4328 1.9672-2.1796 2.9446-1.7243 1.8456-.4128.164-.7164-.3704.0667-.6618.4008-.5889 2.386-3.0357 1.4389-1.882.929-1.0868-.0062-.1579h-.0546l-6.3385 4.1164-1.1293.1457-.4857-.4554.0608-.7467.2307-.2429 1.9064-1.3114Z"/>
+  </svg>`,
+    codex: `<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <path d="M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.18a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .51 4.911 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.99 5.99 0 0 0 3.997-2.9 6.056 6.056 0 0 0-.747-7.073zM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.141-.081 4.779-2.758a.795.795 0 0 0 .392-.681v-6.737l2.02 1.168a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.494 4.494zM3.6 18.304a4.47 4.47 0 0 1-.535-3.014l.142.085 4.783 2.759a.771.771 0 0 0 .78 0l5.843-3.369v2.332a.08.08 0 0 1-.033.062L9.74 19.95a4.5 4.5 0 0 1-6.14-1.646zM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.676l5.815 3.355-2.02 1.168a.076.076 0 0 1-.071 0l-4.83-2.786A4.504 4.504 0 0 1 2.34 7.872zm16.597 3.855l-5.833-3.387L15.119 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.105v-5.678a.79.79 0 0 0-.407-.667zm2.01-3.023l-.141-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.5 4.5 0 0 1 6.68 4.66zm-12.64 4.135l-2.02-1.164a.08.08 0 0 1-.038-.057V6.075a4.5 4.5 0 0 1 7.375-3.453l-.142.08L8.704 5.46a.795.795 0 0 0-.393.681zm1.097-2.365l2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5z"/>
+  </svg>`,
+    local: `<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <path d="M4 1h16c1.1 0 2 .9 2 2v4c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V3c0-1.1.9-2 2-2zm0 2v4h16V3H4zm0 6h16c1.1 0 2 .9 2 2v4c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2v-4c0-1.1.9-2 2-2zm0 2v4h16v-4H4zm0 6h16c1.1 0 2 .9 2 2v4c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2v-4c0-1.1.9-2 2-2zm0 2v4h16v-4H4zm2-13a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm0 8a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm0 8a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
+  </svg>`,
+};
+/**
+ * HTML template for the connect component.
+ */
+export const CONNECT_TEMPLATE = `
+  <div class="ac-connect">
+    <button class="ac-button ac-connect-button" type="button">Connect Agent</button>
+  </div>
+  <div class="ac-overlay" part="overlay" data-mode="modal">
+    <div class="ac-panel ac-modal" role="dialog" aria-modal="true" data-view="connect" data-active="true">
+      <div class="ac-modal-header">
+        <div>
+          <div class="ac-modal-subtitle">AgentConnect</div>
+          <div class="ac-modal-title">Connect your agent</div>
+        </div>
+        <button class="ac-button ghost ac-close" type="button" aria-label="Close">&times;</button>
+      </div>
+      <div class="ac-progress" hidden>
+        <div class="ac-progress-track">
+          <div class="ac-progress-bar"></div>
+        </div>
+        <div class="ac-progress-label" aria-live="polite"></div>
+      </div>
+      <div class="ac-section">
+        <div class="ac-provider-list"></div>
+      </div>
+    </div>
+    <div class="ac-panel ac-modal" role="dialog" aria-modal="true" data-view="local" hidden>
+      <div class="ac-modal-header">
+        <div>
+          <div class="ac-modal-subtitle">Local provider</div>
+          <div class="ac-modal-title">Connect a local model</div>
+        </div>
+        <button class="ac-button ghost ac-close" type="button" aria-label="Close">&times;</button>
+      </div>
+      <div class="ac-helper">
+        Connect to an OpenAI-compatible endpoint (Ollama, LM Studio, vLLM, llama.cpp).
+      </div>
+      <div class="ac-field">
+        <label>Base URL</label>
+        <input class="ac-input ac-local-base" type="text" placeholder="http://localhost:11434/v1" />
+      </div>
+      <div class="ac-field">
+        <label>Model ID</label>
+        <input class="ac-input ac-local-model" type="text" placeholder="llama3.1:8b" />
+      </div>
+      <div class="ac-field">
+        <label>API Key (optional)</label>
+        <input class="ac-input ac-local-key" type="password" placeholder="sk-..." />
+      </div>
+      <div class="ac-field">
+        <label>Model list (optional)</label>
+        <input class="ac-input ac-local-models" type="text" placeholder="llama3.1:8b, qwen2.5:7b" />
+      </div>
+      <div class="ac-alert ac-local-status" hidden></div>
+      <div class="ac-actions">
+        <button class="ac-button ghost ac-back" type="button">Back</button>
+        <div class="ac-actions-right">
+          <button class="ac-button ac-save-local" type="button">Save</button>
+        </div>
+      </div>
+    </div>
+    <div class="ac-panel ac-popover" role="dialog" aria-modal="true" data-view="connected" hidden>
+      <div>
+        <div class="ac-popover-title">Provider</div>
+      </div>
+      <div class="ac-field ac-model-field">
+        <label>Model</label>
+        <select class="ac-select ac-connected-model"></select>
+        <div class="ac-model-loading" style="display: none">
+          <span class="ac-spinner"></span>
+          <span>Loading models...</span>
+        </div>
+      </div>
+      <div class="ac-field ac-effort-field" style="display: none">
+        <label>Reasoning</label>
+        <select class="ac-select ac-connected-effort"></select>
+      </div>
+      <div class="ac-actions">
+        <button class="ac-button ghost ac-disconnect" type="button">Disconnect</button>
+      </div>
+    </div>
+  </div>
+`;
+/**
+ * Default local provider configuration.
+ */
+export const DEFAULT_LOCAL_CONFIG = {
+    baseUrl: '',
+    apiKey: '',
+    model: '',
+    models: [],
+};
+/**
+ * Default storage keys.
+ */
+export const STORAGE_KEYS = {
+    lastSelection: 'agentconnect:last-selection',
+    localConfig: 'agentconnect:local-config',
+};

package/dist/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * AgentConnect UI Components
+ *
+ * Web components for integrating AgentConnect into applications.
+ */
+export type { ProviderId, ProviderInfo, ModelInfo, ReasoningEffortOption, AgentConnectClient, ProviderInfoWithPending, LocalProviderConfig, SelectionInfo, AlertConfig, ConnectViewType, ConnectComponentState, ConnectComponentElements, ErrorMessageConfig, ValidationError, SelectionEventDetail, ProviderLoginEventDetail, ModelChangeEventDetail, AgentConnectUIEventMap, } from './types';
+export { AgentConnectLoginButton, AgentConnectModelPicker, AgentConnectProviderStatus, AgentConnectConnect, } from './components';
+export { defineAgentConnectComponents } from './register';
+export { getClient, resetClient } from './client';
+export { ensureStyles, combinedStyles } from './styles';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,YAAY,EACV,UAAU,EACV,YAAY,EACZ,SAAS,EACT,qBAAqB,EACrB,kBAAkB,EAClB,uBAAuB,EACvB,mBAAmB,EACnB,aAAa,EACb,WAAW,EACX,eAAe,EACf,qBAAqB,EACrB,wBAAwB,EACxB,kBAAkB,EAClB,eAAe,EACf,oBAAoB,EACpB,wBAAwB,EACxB,sBAAsB,EACtB,sBAAsB,GACvB,MAAM,SAAS,CAAC;AAGjB,OAAO,EACL,uBAAuB,EACvB,uBAAuB,EACvB,0BAA0B,EAC1B,mBAAmB,GACpB,MAAM,cAAc,CAAC;AAGtB,OAAO,EAAE,4BAA4B,EAAE,MAAM,YAAY,CAAC;AAG1D,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAGlD,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC"}

package/dist/index.js

@@ -0,0 +1,13 @@
+/**
+ * AgentConnect UI Components
+ *
+ * Web components for integrating AgentConnect into applications.
+ */
+// Export components
+export { AgentConnectLoginButton, AgentConnectModelPicker, AgentConnectProviderStatus, AgentConnectConnect, } from './components';
+// Export registration function
+export { defineAgentConnectComponents } from './register';
+// Export client utilities
+export { getClient, resetClient } from './client';
+// Export style utilities
+export { ensureStyles, combinedStyles } from './styles';

package/dist/register.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Custom element registration.
+ */
+/**
+ * Register all AgentConnect custom elements.
+ * Safe to call multiple times - will only register once.
+ */
+export declare function defineAgentConnectComponents(): void;
+//# sourceMappingURL=register.d.ts.map

package/dist/register.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"register.d.ts","sourceRoot":"","sources":["../src/register.ts"],"names":[],"mappings":"AAAA;;GAEG;AASH;;;GAGG;AACH,wBAAgB,4BAA4B,IAAI,IAAI,CAgBnD"}

package/dist/register.js

@@ -0,0 +1,25 @@
+/**
+ * Custom element registration.
+ */
+import { AgentConnectLoginButton, AgentConnectModelPicker, AgentConnectProviderStatus, AgentConnectConnect, } from './components';
+/**
+ * Register all AgentConnect custom elements.
+ * Safe to call multiple times - will only register once.
+ */
+export function defineAgentConnectComponents() {
+    if (typeof window === 'undefined' || !window.customElements) {
+        return;
+    }
+    if (!customElements.get('agentconnect-login-button')) {
+        customElements.define('agentconnect-login-button', AgentConnectLoginButton);
+    }
+    if (!customElements.get('agentconnect-model-picker')) {
+        customElements.define('agentconnect-model-picker', AgentConnectModelPicker);
+    }
+    if (!customElements.get('agentconnect-provider-status')) {
+        customElements.define('agentconnect-provider-status', AgentConnectProviderStatus);
+    }
+    if (!customElements.get('agentconnect-connect')) {
+        customElements.define('agentconnect-connect', AgentConnectConnect);
+    }
+}

package/dist/styles/base.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Base styles - host, reset, and common selectors.
+ */
+export declare const baseStyles = "\n  :host {\n    font-family: inherit;\n    display: inline-flex;\n    align-items: center;\n  }\n  :host * {\n    box-sizing: border-box;\n  }\n  button, select {\n    font-family: inherit;\n  }\n  .ac-connect {\n    display: inline-flex;\n    align-items: center;\n  }\n  .ac-row {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n  }\n  .ac-list {\n    display: grid;\n    gap: 6px;\n  }\n  .ac-section {\n    display: grid;\n    gap: 8px;\n  }\n  .ac-field {\n    display: grid;\n    gap: 6px;\n  }\n  .ac-field label {\n    font-size: 12px;\n    text-transform: uppercase;\n    letter-spacing: 0.12em;\n    color: var(--ac-muted, #556070);\n    font-weight: 700;\n  }\n  .ac-helper {\n    font-size: 13px;\n    color: var(--ac-muted, #556070);\n    line-height: 1.4;\n  }\n";
+//# sourceMappingURL=base.d.ts.map

package/dist/styles/base.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"base.d.ts","sourceRoot":"","sources":["../../src/styles/base.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,eAAO,MAAM,UAAU,myBA6CtB,CAAC"}

package/dist/styles/base.js

@@ -0,0 +1,49 @@
+/**
+ * Base styles - host, reset, and common selectors.
+ */
+export const baseStyles = `
+  :host {
+    font-family: inherit;
+    display: inline-flex;
+    align-items: center;
+  }
+  :host * {
+    box-sizing: border-box;
+  }
+  button, select {
+    font-family: inherit;
+  }
+  .ac-connect {
+    display: inline-flex;
+    align-items: center;
+  }
+  .ac-row {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+  }
+  .ac-list {
+    display: grid;
+    gap: 6px;
+  }
+  .ac-section {
+    display: grid;
+    gap: 8px;
+  }
+  .ac-field {
+    display: grid;
+    gap: 6px;
+  }
+  .ac-field label {
+    font-size: 12px;
+    text-transform: uppercase;
+    letter-spacing: 0.12em;
+    color: var(--ac-muted, #556070);
+    font-weight: 700;
+  }
+  .ac-helper {
+    font-size: 13px;
+    color: var(--ac-muted, #556070);
+    line-height: 1.4;
+  }
+`;

package/dist/styles/buttons.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Button styles.
+ */
+export declare const buttonStyles = "\n  .ac-button {\n    appearance: none;\n    border: 1px solid transparent;\n    border-radius: 999px;\n    padding: 10px 16px;\n    background: var(--ac-button-bg, #0b1320);\n    color: var(--ac-button-color, #f8fbff);\n    font-size: 13px;\n    font-weight: 700;\n    letter-spacing: 0.01em;\n    cursor: pointer;\n    transition: transform 0.15s ease, box-shadow 0.2s ease, opacity 0.2s ease;\n  }\n  .ac-button:hover:not([disabled]) {\n    transform: translateY(-1px);\n    box-shadow: 0 14px 30px rgba(10, 16, 28, 0.2);\n  }\n  .ac-button.secondary {\n    background: linear-gradient(\n      165deg,\n      rgba(255, 255, 255, 0.95) 0%,\n      rgba(250, 251, 254, 0.9) 100%\n    );\n    color: #1a1f2e;\n    border: 1px solid rgba(195, 165, 90, 0.35);\n    box-shadow:\n      inset 0 1px 0 rgba(255, 255, 255, 0.9),\n      0 1px 3px rgba(0, 0, 0, 0.04);\n  }\n  .ac-button.secondary:hover:not([disabled]) {\n    border-color: rgba(200, 170, 90, 0.55);\n    background: linear-gradient(\n      165deg,\n      rgba(255, 255, 255, 1) 0%,\n      rgba(253, 253, 255, 0.95) 100%\n    );\n    box-shadow:\n      0 0 0 1px rgba(210, 180, 100, 0.12),\n      inset 0 1px 0 rgba(255, 255, 255, 1),\n      0 4px 12px rgba(0, 0, 0, 0.06);\n  }\n  .ac-button.ghost {\n    background: transparent;\n    color: rgba(80, 70, 50, 0.7);\n    border: 1px solid rgba(195, 165, 90, 0.3);\n    box-shadow: none;\n  }\n  .ac-button.ghost:hover:not([disabled]) {\n    color: rgba(80, 70, 50, 0.9);\n    border-color: rgba(200, 170, 90, 0.45);\n    background: rgba(255, 255, 255, 0.5);\n  }\n  .ac-button.ac-close {\n    width: 32px;\n    height: 32px;\n    padding: 0;\n    border-radius: 999px;\n    font-size: 18px;\n    line-height: 1;\n    color: rgba(80, 70, 50, 0.5);\n  }\n  .ac-button.ac-close:hover:not([disabled]) {\n    color: rgba(80, 70, 50, 0.8);\n    background: rgba(200, 170, 90, 0.12);\n  }\n  .ac-button[disabled] {\n    opacity: 0.6;\n    cursor: default;\n    box-shadow: none;\n  }\n  .ac-chip {\n    font-size: 12px;\n    font-weight: 600;\n    padding: 6px 10px;\n    border-radius: 999px;\n    background: linear-gradient(\n      165deg,\n      rgba(255, 255, 255, 0.9) 0%,\n      rgba(250, 248, 245, 0.85) 100%\n    );\n    color: rgba(80, 70, 50, 0.8);\n    border: 1px solid rgba(195, 165, 90, 0.28);\n    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);\n  }\n  .ac-button.loading {\n    position: relative;\n    color: transparent;\n    pointer-events: none;\n  }\n  .ac-button.loading::after {\n    content: '';\n    position: absolute;\n    inset: 0;\n    margin: auto;\n    width: 16px;\n    height: 16px;\n    border: 2px solid var(--ac-button-color, #f8fbff);\n    border-top-color: transparent;\n    border-radius: 50%;\n    animation: ac-spin 0.8s linear infinite;\n  }\n  .ac-button.secondary.loading::after {\n    border-color: var(--ac-button-secondary-color, #0b1320);\n    border-top-color: transparent;\n  }\n  .ac-button:active:not([disabled]) {\n    transform: scale(0.98);\n  }\n";
+export declare const connectButtonStyles = "\n  .ac-connect .ac-button {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: 10px;\n    min-height: 52px;\n    padding: 14px 24px;\n    border-radius: 999px;\n    background: linear-gradient(\n      165deg,\n      rgba(255, 255, 255, 0.95) 0%,\n      rgba(245, 247, 250, 0.9) 25%,\n      rgba(235, 238, 245, 0.85) 50%,\n      rgba(240, 242, 248, 0.9) 75%,\n      rgba(250, 251, 254, 0.95) 100%\n    );\n    color: #1a1f2e;\n    font-size: 13px;\n    font-weight: 600;\n    letter-spacing: 0.02em;\n    border: 1.5px solid rgba(195, 165, 90, 0.55);\n    box-shadow:\n      0 0 0 1px rgba(210, 180, 100, 0.2),\n      0 1px 2px rgba(0, 0, 0, 0.04),\n      0 4px 12px rgba(0, 0, 0, 0.06),\n      0 12px 36px rgba(0, 0, 0, 0.08),\n      inset 0 1px 0 rgba(255, 255, 255, 1),\n      inset 0 -1px 0 rgba(0, 0, 0, 0.03);\n    backdrop-filter: blur(12px);\n    -webkit-backdrop-filter: blur(12px);\n    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n    overflow: hidden;\n    width: min(var(--ac-connect-width, 240px), 92vw);\n    text-align: center;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  }\n  .ac-connect .ac-connect-label {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n  .ac-connect .ac-connect-icon {\n    width: 20px;\n    height: 20px;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex: 0 0 20px;\n  }\n  .ac-connect .ac-connect-icon svg {\n    width: 18px;\n    height: 18px;\n  }\n  .ac-connect .ac-connect-icon[data-provider=\"claude\"] svg {\n    fill: #d97757;\n  }\n  .ac-connect .ac-button:hover:not([disabled]) {\n    transform: translateY(-2px);\n    background: linear-gradient(\n      165deg,\n      rgba(255, 255, 255, 1) 0%,\n      rgba(250, 252, 255, 0.95) 25%,\n      rgba(245, 248, 255, 0.9) 50%,\n      rgba(248, 250, 255, 0.95) 75%,\n      rgba(255, 255, 255, 1) 100%\n    );\n    border-color: rgba(200, 170, 90, 0.65);\n    box-shadow:\n      0 0 0 1px rgba(215, 185, 100, 0.25),\n      0 2px 4px rgba(0, 0, 0, 0.04),\n      0 8px 24px rgba(0, 0, 0, 0.08),\n      0 20px 50px rgba(0, 0, 0, 0.1),\n      inset 0 1px 0 rgba(255, 255, 255, 1),\n      inset 0 -1px 0 rgba(0, 0, 0, 0.02);\n  }\n  .ac-connect .ac-button:active:not([disabled]) {\n    transform: translateY(0) scale(0.98);\n    background: linear-gradient(\n      165deg,\n      rgba(245, 247, 252, 0.95) 0%,\n      rgba(240, 243, 250, 0.9) 50%,\n      rgba(245, 247, 252, 0.95) 100%\n    );\n    box-shadow:\n      0 1px 2px rgba(0, 0, 0, 0.05),\n      0 4px 12px rgba(0, 0, 0, 0.06),\n      inset 0 1px 0 rgba(255, 255, 255, 0.9),\n      inset 0 -1px 0 rgba(0, 0, 0, 0.02);\n  }\n";
+//# sourceMappingURL=buttons.d.ts.map

package/dist/styles/buttons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"buttons.d.ts","sourceRoot":"","sources":["../../src/styles/buttons.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,eAAO,MAAM,YAAY,s8FA6GxB,CAAC;AAEF,eAAO,MAAM,mBAAmB,urFA4F/B,CAAC"}