@agentconnect/ui 0.1.3 → 0.1.5

package/dist/components/connect.d.ts

@@ -22,10 +22,16 @@ export declare class AgentConnectConnect extends HTMLElement {
     private readonly loginPending;
     private readonly statusCheckInFlight;
     private readonly modelsRefreshIntervalMs;
+    private readonly updatePending;
+    private updateRefreshTimer;
+    private updateRefreshAttempts;
+    private readonly updateRefreshDelayMs;
+    private readonly updateRefreshMaxAttempts;
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
     private createInitialState;
+    private createInitialProviders;
     private get storageKey();
     private get localConfigKey();
     private render;
@@ -51,15 +57,19 @@ export declare class AgentConnectConnect extends HTMLElement {
     private checkProviderStatus;
     private waitForProviderLogin;
     private prefetchProviders;
+    private scheduleUpdateRefresh;
     private prefetchAllProviderModels;
     private refreshModels;
     private renderProviders;
     private buildProviderCard;
     private getProviderStatusText;
-    private buildProviderAction;
+    private isUpdatingProvider;
+    private buildProviderActions;
     private buildActionButton;
+    private buildUpdateButton;
     private handleProviderSelect;
     private connectProvider;
+    private updateProvider;
     private setProviderLoading;
     private ensureProviderReady;
     private openLocalConfig;

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

@@ -1 +1 @@
-{"version":3,"file":"connect.d.ts","sourceRoot":"","sources":["../../src/components/connect.ts"],"names":[],"mappings":"AAAA;;;GAGG;AA+BH,qBAAa,mBAAoB,SAAQ,WAAW;IAClD,OAAO,CAAC,KAAK,CAAwB;IACrC,OAAO,CAAC,WAAW,CAAsB;IACzC,OAAO,CAAC,WAAW,CAAU;IAC7B,OAAO,CAAC,IAAI,CAAU;IACtB,OAAO,CAAC,WAAW,CAAgB;IACnC,OAAO,CAAC,gBAAgB,CAAU;IAClC,OAAO,CAAC,kBAAkB,CAAU;IACpC,OAAO,CAAC,aAAa,CAAU;IAC/B,OAAO,CAAC,eAAe,CAAuC;IAC9D,OAAO,CAAC,cAAc,CAAoB;IAC1C,OAAO,CAAC,eAAe,CAAS;IAChC,OAAO,CAAC,QAAQ,CAAkC;IAClD,OAAO,CAAC,YAAY,CAAa;IACjC,OAAO,CAAC,cAAc,CAAwC;IAC9D,OAAO,CAAC,QAAQ,CAAC,mBAAmB,CAAQ;IAC5C,OAAO,CAAC,QAAQ,CAAC,kBAAkB,CAAW;IAC9C,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAyB;IACtD,OAAO,CAAC,QAAQ,CAAC,mBAAmB,CAAyB;IAC7D,OAAO,CAAC,QAAQ,CAAC,uBAAuB,CAAU;;IAyBlD,iBAAiB,IAAI,IAAI;IASzB,oBAAoB,IAAI,IAAI;IAK5B,OAAO,CAAC,kBAAkB;IAc1B,OAAO,KAAK,UAAU,GAErB;IAED,OAAO,KAAK,cAAc,GAEzB;IAED,OAAO,CAAC,MAAM;IAWd,OAAO,CAAC,aAAa;IA4BrB,OAAO,CAAC,UAAU;IAiElB,OAAO,CAAC,IAAI;IAeZ,OAAO,CAAC,KAAK;IAOb,OAAO,CAAC,OAAO;IAsBf,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,eAAe;IA8BvB,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,oBAAoB;IAW5B,OAAO,CAAC,oBAAoB;IAQ5B,OAAO,CAAC,iBAAiB;IAazB,OAAO,CAAC,gBAAgB;YAeV,OAAO;IA2DrB,OAAO,CAAC,iBAAiB;IAYzB,OAAO,CAAC,gBAAgB;YAMV,kBAAkB;IA+BhC,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,kBAAkB;IAQ1B,OAAO,CAAC,mBAAmB;YAMb,mBAAmB;YA4BnB,oBAAoB;YAoCpB,iBAAiB;YAQjB,yBAAyB;YAQzB,aAAa;IAyC3B,OAAO,CAAC,eAAe;IAWvB,OAAO,CAAC,iBAAiB;IAmEzB,OAAO,CAAC,qBAAqB;IAiB7B,OAAO,CAAC,mBAAmB;IA0C3B,OAAO,CAAC,iBAAiB;YAsBX,oBAAoB;YAUpB,eAAe;IAiC7B,OAAO,CAAC,kBAAkB;YAqBZ,mBAAmB;IA6DjC,OAAO,CAAC,eAAe;YAST,eAAe;IAoE7B,OAAO,CAAC,qBAAqB;IA+C7B,OAAO,CAAC,gBAAgB;IAMxB,OAAO,CAAC,2BAA2B;IAOnC,OAAO,CAAC,yBAAyB;IAOjC,OAAO,CAAC,mBAAmB;IAmB3B,OAAO,CAAC,sBAAsB;IAsB9B,OAAO,CAAC,kBAAkB;IAa1B,OAAO,CAAC,iBAAiB;IA0BzB,OAAO,CAAC,sBAAsB;IAiB9B,OAAO,CAAC,0BAA0B;IA6BlC,OAAO,CAAC,cAAc;IA0BtB,OAAO,CAAC,UAAU;IAelB,OAAO,CAAC,sBAAsB;IA0B9B,OAAO,CAAC,mBAAmB;IAuB3B,OAAO,CAAC,cAAc;IAiBtB,OAAO,CAAC,gBAAgB;IAQxB,OAAO,CAAC,SAAS;IAOjB,OAAO,CAAC,QAAQ;IAwChB,OAAO,CAAC,OAAO;CAkBhB"}
+{"version":3,"file":"connect.d.ts","sourceRoot":"","sources":["../../src/components/connect.ts"],"names":[],"mappings":"AAAA;;;GAGG;AA+BH,qBAAa,mBAAoB,SAAQ,WAAW;IAClD,OAAO,CAAC,KAAK,CAAwB;IACrC,OAAO,CAAC,WAAW,CAAsB;IACzC,OAAO,CAAC,WAAW,CAAU;IAC7B,OAAO,CAAC,IAAI,CAAU;IACtB,OAAO,CAAC,WAAW,CAAgB;IACnC,OAAO,CAAC,gBAAgB,CAAU;IAClC,OAAO,CAAC,kBAAkB,CAAU;IACpC,OAAO,CAAC,aAAa,CAAU;IAC/B,OAAO,CAAC,eAAe,CAAuC;IAC9D,OAAO,CAAC,cAAc,CAAoB;IAC1C,OAAO,CAAC,eAAe,CAAS;IAChC,OAAO,CAAC,QAAQ,CAAkC;IAClD,OAAO,CAAC,YAAY,CAAa;IACjC,OAAO,CAAC,cAAc,CAAwC;IAC9D,OAAO,CAAC,QAAQ,CAAC,mBAAmB,CAAQ;IAC5C,OAAO,CAAC,QAAQ,CAAC,kBAAkB,CAAW;IAC9C,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAyB;IACtD,OAAO,CAAC,QAAQ,CAAC,mBAAmB,CAAyB;IAC7D,OAAO,CAAC,QAAQ,CAAC,uBAAuB,CAAU;IAClD,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAyB;IACvD,OAAO,CAAC,kBAAkB,CAAuC;IACjE,OAAO,CAAC,qBAAqB,CAAS;IACtC,OAAO,CAAC,QAAQ,CAAC,oBAAoB,CAAQ;IAC7C,OAAO,CAAC,QAAQ,CAAC,wBAAwB,CAAK;;IA2B9C,iBAAiB,IAAI,IAAI;IASzB,oBAAoB,IAAI,IAAI;IAK5B,OAAO,CAAC,kBAAkB;IAc1B,OAAO,CAAC,sBAAsB;IAS9B,OAAO,KAAK,UAAU,GAErB;IAED,OAAO,KAAK,cAAc,GAEzB;IAED,OAAO,CAAC,MAAM;IAWd,OAAO,CAAC,aAAa;IA4BrB,OAAO,CAAC,UAAU;IAiElB,OAAO,CAAC,IAAI;IAeZ,OAAO,CAAC,KAAK;IAOb,OAAO,CAAC,OAAO;IAsBf,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,eAAe;IA8BvB,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,oBAAoB;IAW5B,OAAO,CAAC,oBAAoB;IAS5B,OAAO,CAAC,iBAAiB;IAazB,OAAO,CAAC,gBAAgB;YAeV,OAAO;IAqFrB,OAAO,CAAC,iBAAiB;IAYzB,OAAO,CAAC,gBAAgB;YAMV,kBAAkB;IAUhC,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,kBAAkB;IAQ1B,OAAO,CAAC,mBAAmB;YASb,mBAAmB;YAgDnB,oBAAoB;YA4CpB,iBAAiB;IAQ/B,OAAO,CAAC,qBAAqB;YAcf,yBAAyB;YAmBzB,aAAa;IAyC3B,OAAO,CAAC,eAAe;IAWvB,OAAO,CAAC,iBAAiB;IAgFzB,OAAO,CAAC,qBAAqB;IAmB7B,OAAO,CAAC,kBAAkB;IAI1B,OAAO,CAAC,oBAAoB;IA0D5B,OAAO,CAAC,iBAAiB;IAuBzB,OAAO,CAAC,iBAAiB;YAyBX,oBAAoB;YAWpB,eAAe;YAiCf,cAAc;IAqB5B,OAAO,CAAC,kBAAkB;YAqBZ,mBAAmB;IA6DjC,OAAO,CAAC,eAAe;YAST,eAAe;IAoE7B,OAAO,CAAC,qBAAqB;IA+C7B,OAAO,CAAC,gBAAgB;IAMxB,OAAO,CAAC,2BAA2B;IAOnC,OAAO,CAAC,yBAAyB;IAOjC,OAAO,CAAC,mBAAmB;IAmB3B,OAAO,CAAC,sBAAsB;IAsB9B,OAAO,CAAC,kBAAkB;IAa1B,OAAO,CAAC,iBAAiB;IA0BzB,OAAO,CAAC,sBAAsB;IAiB9B,OAAO,CAAC,0BAA0B;IA6BlC,OAAO,CAAC,cAAc;IA0BtB,OAAO,CAAC,UAAU;IAelB,OAAO,CAAC,sBAAsB;IA0B9B,OAAO,CAAC,mBAAmB;IAuB3B,OAAO,CAAC,cAAc;IAiBtB,OAAO,CAAC,gBAAgB;IAQxB,OAAO,CAAC,SAAS;IAOjB,OAAO,CAAC,QAAQ;IAwChB,OAAO,CAAC,OAAO;CAkBhB"}

package/dist/components/connect.js

@@ -26,6 +26,11 @@ export class AgentConnectConnect extends HTMLElement {
     loginPending = new Set();
     statusCheckInFlight = new Set();
     modelsRefreshIntervalMs = 30_000;
+    updatePending = new Set();
+    updateRefreshTimer;
+    updateRefreshAttempts;
+    updateRefreshDelayMs = 1500;
+    updateRefreshMaxAttempts = 2;
     constructor() {
         super();
         this.attachShadow({ mode: 'open' });
@@ -42,6 +47,8 @@ export class AgentConnectConnect extends HTMLElement {
         this.modelsFetchedAt = 0;
         this.elements = null;
         this.loginPollTimer = null;
+        this.updateRefreshTimer = null;
+        this.updateRefreshAttempts = 0;
         this.handleResize = () => {
             if (this.state.view === 'connected' && this.elements?.overlay?.classList.contains('open')) {
                 this.positionPopover(true);
@@ -73,6 +80,14 @@ export class AgentConnectConnect extends HTMLElement {
             loginExperience: null,
         };
     }
+    createInitialProviders() {
+        return [
+            { id: 'claude', name: 'Claude', installed: false, loggedIn: false, pending: true },
+            { id: 'codex', name: 'Codex', installed: false, loggedIn: false, pending: true },
+            { id: 'cursor', name: 'Cursor', installed: false, loggedIn: false, pending: true },
+            { id: 'local', name: 'Local', installed: false, loggedIn: false, pending: true },
+        ];
+    }
     get storageKey() {
         return this.getAttribute('storage-key') || STORAGE_KEYS.lastSelection;
     }
@@ -258,6 +273,7 @@ export class AgentConnectConnect extends HTMLElement {
         return [
             { id: 'claude', name: 'Claude', installed: false, loggedIn: false, pending: true },
             { id: 'codex', name: 'Codex', installed: false, loggedIn: false, pending: true },
+            { id: 'cursor', name: 'Cursor', installed: false, loggedIn: false, pending: true },
             { id: 'local', name: 'Local', installed: false, loggedIn: false, pending: true },
         ];
     }
@@ -297,19 +313,38 @@ export class AgentConnectConnect extends HTMLElement {
         }
         try {
             const client = await getClient();
+            let providerIds = [];
             if (!this.state.loginExperience) {
                 const hello = await client.hello().catch(() => null);
                 this.state.loginExperience = hello?.loginExperience ?? null;
+                providerIds = hello?.providers ?? [];
+            }
+            if (!providerIds.length) {
+                providerIds = this.state.providers.map((entry) => entry.id);
             }
-            const providers = await client.providers.list();
-            this.state.providers = providers;
+            if (!providerIds.length) {
+                providerIds = this.createInitialProviders().map((entry) => entry.id);
+            }
+            const existing = new Map(this.state.providers.map((entry) => [entry.id, entry]));
+            const initial = new Map(this.createInitialProviders().map((entry) => [entry.id, entry]));
+            this.state.providers = providerIds.map((id) => {
+                const base = existing.get(id) ||
+                    initial.get(id) || {
+                    id,
+                    name: id,
+                    installed: false,
+                    loggedIn: false,
+                };
+                return { ...base, pending: true };
+            });
             if (this.state.connected) {
                 this.state.selectedProvider = this.state.connected.provider;
                 this.state.selectedModel = this.state.connected.model;
             }
             else if (!this.state.selectedProvider) {
-                this.state.selectedProvider = providers[0]?.id || null;
+                this.state.selectedProvider = providerIds[0] || null;
             }
+            this.renderProviders();
             const shouldRefreshModels = !this.state.selectedProvider ||
                 this.state.models.length === 0 ||
                 this.modelsProvider !== this.state.selectedProvider ||
@@ -329,9 +364,14 @@ export class AgentConnectConnect extends HTMLElement {
             this.renderReasoningEfforts();
             this.updatePopoverTitle();
             this.updateButtonLabel();
+            this.scheduleUpdateRefresh();
             if (this.state.view === 'connected') {
                 requestAnimationFrame(() => this.positionPopover());
             }
+            providerIds.forEach((providerId) => {
+                const name = this.state.providers.find((entry) => entry.id === providerId)?.name;
+                this.checkProviderStatus(providerId, name, { silent: true }).catch(() => { });
+            });
         }
         catch {
             if (!silent) {
@@ -363,34 +403,8 @@ export class AgentConnectConnect extends HTMLElement {
         this.loginPollTimer = null;
     }
     async pollProviderStatus() {
-        const client = await getClient();
-        const previous = this.state.providers;
-        const providers = await client.providers.list();
-        this.state.providers = providers;
-        for (const provider of providers) {
-            if (provider.loggedIn) {
-                this.loginPending.delete(provider.id);
-            }
-        }
-        if (this.state.view === 'connected') {
-            this.updatePopoverTitle();
-            this.updateButtonLabel();
-        }
-        else {
-            this.renderProviders();
-            this.updatePopoverTitle();
-            this.updateButtonLabel();
-        }
-        const selected = this.state.selectedProvider;
-        if (!selected)
-            return;
-        const before = previous.find((entry) => entry.id === selected);
-        const after = providers.find((entry) => entry.id === selected);
-        if (before && after && !before.loggedIn && after.loggedIn) {
-            await this.refreshModels();
-            this.renderConnectedModels();
-            this.renderReasoningEfforts();
-        }
+        const providerIds = this.state.providers.map((entry) => entry.id);
+        await Promise.all(providerIds.map((providerId) => this.checkProviderStatus(providerId, undefined, { silent: true })));
         this.updateLoginPolling();
     }
     shouldPollLogin() {
@@ -414,12 +428,14 @@ export class AgentConnectConnect extends HTMLElement {
             return;
         this.state.providers[index] = { ...this.state.providers[index], ...updates };
     }
-    async checkProviderStatus(providerId, providerName) {
+    async checkProviderStatus(providerId, providerName, options = {}) {
         if (this.statusCheckInFlight.has(providerId))
             return;
         this.statusCheckInFlight.add(providerId);
         const label = providerName || providerId;
-        this.setStatus(`Checking ${label} status...`);
+        if (!options.silent) {
+            this.setStatus(`Checking ${label} status...`);
+        }
         try {
             const client = await getClient();
             const status = await client.providers.status(providerId);
@@ -427,6 +443,14 @@ export class AgentConnectConnect extends HTMLElement {
                 installed: status.installed,
                 loggedIn: status.loggedIn,
                 version: status.version,
+                pending: false,
+                updateAvailable: status.updateAvailable,
+                latestVersion: status.latestVersion,
+                updateCheckedAt: status.updateCheckedAt,
+                updateSource: status.updateSource,
+                updateCommand: status.updateCommand,
+                updateMessage: status.updateMessage,
+                updateInProgress: status.updateInProgress,
             });
             if (status.loggedIn) {
                 this.loginPending.delete(providerId);
@@ -438,6 +462,13 @@ export class AgentConnectConnect extends HTMLElement {
             this.updatePopoverTitle();
             this.updateButtonLabel();
             this.updateLoginPolling();
+            this.scheduleUpdateRefresh();
+        }
+        catch {
+            this.updateProviderEntry(providerId, { pending: false });
+            this.renderProviders();
+            this.updatePopoverTitle();
+            this.updateButtonLabel();
         }
         finally {
             this.statusCheckInFlight.delete(providerId);
@@ -458,6 +489,13 @@ export class AgentConnectConnect extends HTMLElement {
                 installed: status.installed,
                 loggedIn: status.loggedIn,
                 version: status.version,
+                updateAvailable: status.updateAvailable,
+                latestVersion: status.latestVersion,
+                updateCheckedAt: status.updateCheckedAt,
+                updateSource: status.updateSource,
+                updateCommand: status.updateCommand,
+                updateMessage: status.updateMessage,
+                updateInProgress: status.updateInProgress,
             });
             if (status.loggedIn) {
                 this.loginPending.delete(providerId);
@@ -467,6 +505,7 @@ export class AgentConnectConnect extends HTMLElement {
                 this.updatePopoverTitle();
                 this.updateButtonLabel();
                 this.updateLoginPolling();
+                this.scheduleUpdateRefresh();
                 return true;
             }
             await new Promise((resolve) => setTimeout(resolve, this.loginPollIntervalMs));
@@ -484,11 +523,37 @@ export class AgentConnectConnect extends HTMLElement {
         await this.prefetchAllProviderModels();
         this.prefetching = false;
     }
+    scheduleUpdateRefresh() {
+        if (this.updateRefreshTimer)
+            return;
+        if (this.updateRefreshAttempts >= this.updateRefreshMaxAttempts)
+            return;
+        const needsUpdateInfo = this.state.providers.some((provider) => provider.installed && provider.updateCheckedAt === undefined);
+        if (!needsUpdateInfo)
+            return;
+        this.updateRefreshAttempts += 1;
+        this.updateRefreshTimer = setTimeout(() => {
+            this.updateRefreshTimer = null;
+            this.refresh({ silent: true }).catch(() => { });
+        }, this.updateRefreshDelayMs);
+    }
     async prefetchAllProviderModels() {
         if (!this.state.providers.length)
             return;
         const client = await getClient();
-        await Promise.allSettled(this.state.providers.map((provider) => client.models.list(provider.id)));
+        await Promise.allSettled(this.state.providers.map((provider) => {
+            const key = `agentconnect:models-prefetch:${provider.id}`;
+            if (localStorage.getItem(key) === '1') {
+                return Promise.resolve();
+            }
+            try {
+                localStorage.setItem(key, '1');
+            }
+            catch {
+                // ignore
+            }
+            return client.models.list(provider.id);
+        }));
     }
     async refreshModels() {
         if (!this.state.selectedProvider) {
@@ -576,25 +641,36 @@ export class AgentConnectConnect extends HTMLElement {
             icon.appendChild(iconLabel);
         }
         const textWrap = document.createElement('div');
+        const nameRow = document.createElement('div');
+        nameRow.className = 'ac-provider-name-row';
         const name = document.createElement('div');
         name.className = 'ac-provider-name';
         name.textContent = provider.name || provider.id;
+        nameRow.appendChild(name);
+        if (provider.updateAvailable && !this.isUpdatingProvider(provider)) {
+            const updateBadge = document.createElement('span');
+            updateBadge.className = 'ac-provider-update';
+            updateBadge.textContent = 'Update available';
+            nameRow.appendChild(updateBadge);
+        }
         const status = document.createElement('div');
         status.className = 'ac-provider-status';
         status.textContent = statusText;
-        textWrap.append(name, status);
+        textWrap.append(nameRow, status);
         meta.append(icon, textWrap);
         row.appendChild(meta);
         card.appendChild(row);
         card.addEventListener('click', () => {
             this.handleProviderSelect(provider);
         });
-        const action = this.buildProviderAction(provider);
-        if (action) {
-            const actions = document.createElement('div');
-            actions.className = 'ac-provider-actions';
-            actions.appendChild(action);
-            card.appendChild(actions);
+        const actions = this.buildProviderActions(provider);
+        if (actions.length) {
+            const actionsEl = document.createElement('div');
+            actionsEl.className = 'ac-provider-actions';
+            for (const action of actions) {
+                actionsEl.appendChild(action);
+            }
+            card.appendChild(actionsEl);
         }
         return card;
     }
@@ -603,8 +679,11 @@ export class AgentConnectConnect extends HTMLElement {
         const isLocal = provider.id === 'local';
         const hasLocalConfig = this.hasLocalConfig();
         const isConnected = this.state.connected?.provider === provider.id;
+        const updating = this.isUpdatingProvider(provider);
         if (pending)
             return 'Checking...';
+        if (updating)
+            return 'Updating...';
         if (isLocal) {
             if (!hasLocalConfig)
                 return 'Needs setup';
@@ -620,17 +699,31 @@ export class AgentConnectConnect extends HTMLElement {
             return 'Connected';
         return 'Detected';
     }
-    buildProviderAction(provider) {
+    isUpdatingProvider(provider) {
+        return Boolean(provider.updateInProgress || this.updatePending.has(provider.id));
+    }
+    buildProviderActions(provider) {
+        const actions = [];
         const pending = provider.pending === true;
         const isLocal = provider.id === 'local';
         const hasLocalConfig = this.hasLocalConfig();
         const isConnected = this.state.connected?.provider === provider.id;
         const terminalLogin = provider.id === 'claude' && this.state.loginExperience === 'terminal';
+        const updating = this.isUpdatingProvider(provider);
         if (pending) {
-            return this.buildActionButton('Checking...', true);
+            actions.push(this.buildActionButton('Checking...', true));
+            return actions;
+        }
+        if (updating) {
+            actions.push(this.buildUpdateButton(provider, true));
+            return actions;
         }
         if (isLocal) {
-            return this.buildActionButton(hasLocalConfig ? 'Edit' : 'Configure', false, () => this.openLocalConfig());
+            actions.push(this.buildActionButton(hasLocalConfig ? 'Edit' : 'Configure', false, () => this.openLocalConfig()));
+            return actions;
+        }
+        if (provider.updateAvailable) {
+            actions.push(this.buildUpdateButton(provider, false));
         }
         if (!provider.installed) {
             const label = terminalLogin ? 'Install + Run /login' : 'Install + Login';
@@ -638,12 +731,14 @@ export class AgentConnectConnect extends HTMLElement {
             if (terminalLogin) {
                 button.title = 'Opens a terminal and runs claude login';
             }
-            return button;
+            actions.push(button);
+            return actions;
         }
         if (this.loginPending.has(provider.id)) {
             const button = this.buildActionButton('Waiting for login...', false, () => this.checkProviderStatus(provider.id, provider.name));
             button.title = `Click to check ${provider.name || provider.id} login status`;
-            return button;
+            actions.push(button);
+            return actions;
         }
         if (!provider.loggedIn) {
             const label = terminalLogin ? 'Run /login' : 'Login';
@@ -651,15 +746,16 @@ export class AgentConnectConnect extends HTMLElement {
             if (terminalLogin) {
                 button.title = 'Opens a terminal and runs claude login';
             }
-            return button;
+            actions.push(button);
+            return actions;
         }
         if (isConnected)
-            return null;
-        return null;
+            return actions;
+        return actions;
     }
-    buildActionButton(label, disabled, onClick, loading = false) {
+    buildActionButton(label, disabled, onClick, loading = false, variant = 'secondary') {
         const button = document.createElement('button');
-        button.className = 'ac-button secondary';
+        button.className = `ac-button ${variant}`;
         if (loading) {
             button.classList.add('loading');
         }
@@ -673,11 +769,37 @@ export class AgentConnectConnect extends HTMLElement {
         }
         return button;
     }
+    buildUpdateButton(provider, loading) {
+        const updateButton = document.createElement('button');
+        updateButton.className = 'ac-button update icon';
+        updateButton.type = 'button';
+        updateButton.setAttribute('aria-label', `Update ${provider.name || provider.id}`);
+        updateButton.title = provider.updateMessage || 'Update available';
+        if (loading) {
+            updateButton.classList.add('loading');
+            updateButton.disabled = true;
+        }
+        updateButton.innerHTML = `
+      <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
+        <path d="M12 3a1 1 0 0 1 1 1v8.17l2.59-2.58a1 1 0 1 1 1.41 1.42l-4.3 4.29a1 1 0 0 1-1.42 0l-4.3-4.29a1 1 0 0 1 1.41-1.42L11 12.17V4a1 1 0 0 1 1-1z" />
+        <path d="M5 19a1 1 0 0 1-1-1v-2a1 1 0 1 1 2 0v1h12v-1a1 1 0 1 1 2 0v2a1 1 0 0 1-1 1H5z" />
+      </svg>
+    `;
+        if (!loading) {
+            updateButton.addEventListener('click', (event) => {
+                event.stopPropagation();
+                this.updateProvider(provider);
+            });
+        }
+        return updateButton;
+    }
     async handleProviderSelect(provider) {
         if (this.busy)
             return;
         if (provider.pending)
             return;
+        if (this.isUpdatingProvider(provider))
+            return;
         if (provider.id === 'local') {
             this.openLocalConfig();
             return;
@@ -720,6 +842,29 @@ export class AgentConnectConnect extends HTMLElement {
             this.setProviderLoading(provider.id, false);
         }
     }
+    async updateProvider(provider) {
+        if (this.updatePending.has(provider.id))
+            return;
+        this.updatePending.add(provider.id);
+        this.renderProviders();
+        try {
+            const client = await getClient();
+            await client.providers.update(provider.id);
+            await this.refresh({ silent: true });
+        }
+        catch (err) {
+            this.setAlert({
+                title: 'Update failed',
+                message: err instanceof Error ? err.message : 'Could not update provider.',
+                action: 'Retry',
+                onAction: () => this.updateProvider(provider),
+            });
+        }
+        finally {
+            this.updatePending.delete(provider.id);
+            this.renderProviders();
+        }
+    }
     setProviderLoading(providerId, loading, label = 'Working...') {
         const card = this.elements?.providerList?.querySelector(`.ac-provider-card[data-provider="${providerId}"]`);
         if (!card)

package/dist/constants.d.ts.map

@@ -1 +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"}
+{"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,CAarD,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

@@ -47,6 +47,9 @@ export const ERROR_MESSAGES = {
 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>`,
+    cursor: `<svg viewBox="0 0 466.73 532.09" xmlns="http://www.w3.org/2000/svg">
+    <path d="M457.43 125.94 244.42 2.96c-6.84-3.95-15.28-3.95-22.12 0L9.3 125.94c-5.75 3.32-9.3 9.46-9.3 16.11v247.99c0 6.65 3.55 12.79 9.3 16.11l213.01 122.98c6.84 3.95 15.28 3.95 22.12 0l213.01-122.98c5.75-3.32 9.3-9.46 9.3-16.11V142.05c0-6.65-3.55-12.79-9.3-16.11ZM444.05 151.99 238.42 508.15c-1.39 2.4-5.06 1.42-5.06-1.36V273.58c0-4.66-2.49-8.97-6.53-11.31L24.87 145.67c-2.4-1.39-1.42-5.06 1.36-5.06h411.26c5.84 0 9.49 6.33 6.57 11.39Z"/>
   </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"/>

package/dist/register.d.ts.map

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

package/dist/register.js

@@ -2,6 +2,21 @@
  * Custom element registration.
  */
 import { AgentConnectLoginButton, AgentConnectModelPicker, AgentConnectProviderStatus, AgentConnectConnect, } from './components';
+import { getClient } from './client';
+let prefetchStarted = false;
+async function prefetchProviderData() {
+    if (prefetchStarted)
+        return;
+    prefetchStarted = true;
+    try {
+        const client = await getClient();
+        const providers = await client.providers.list();
+        await Promise.allSettled(providers.map((provider) => client.models.list(provider.id)));
+    }
+    catch {
+        // Ignore background prefetch errors
+    }
+}
 /**
  * Register all AgentConnect custom elements.
  * Safe to call multiple times - will only register once.
@@ -22,4 +37,7 @@ export function defineAgentConnectComponents() {
     if (!customElements.get('agentconnect-connect')) {
         customElements.define('agentconnect-connect', AgentConnectConnect);
     }
+    queueMicrotask(() => {
+        void prefetchProviderData();
+    });
 }

package/dist/styles/buttons.d.ts

@@ -1,6 +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";
+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.update {\n    background: transparent;\n    color: #2b2f3a;\n    border: 1px solid rgba(120, 129, 145, 0.45);\n    --ac-button-color: #2b2f3a;\n    box-shadow:\n      inset 0 1px 0 rgba(255, 255, 255, 0.9),\n      0 6px 16px rgba(18, 24, 38, 0.12);\n  }\n  .ac-button.update:hover:not([disabled]) {\n    border-color: rgba(90, 100, 120, 0.7);\n    background: transparent;\n    box-shadow:\n      0 0 0 1px rgba(80, 90, 110, 0.2),\n      inset 0 1px 0 rgba(255, 255, 255, 1),\n      0 10px 20px rgba(18, 24, 38, 0.16);\n  }\n  .ac-button.update.icon {\n    width: 40px;\n    height: 40px;\n    padding: 0;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    position: relative;\n    transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease;\n  }\n  .ac-button.update.icon svg {\n    width: 18px;\n    height: 18px;\n    fill: currentColor;\n    filter: none;\n  }\n  .ac-button.update.icon:hover:not([disabled]) {\n    border-color: rgba(90, 100, 120, 0.7);\n    box-shadow:\n      0 0 0 1px rgba(80, 90, 110, 0.2),\n      inset 0 1px 0 rgba(255, 255, 255, 1),\n      0 10px 20px rgba(18, 24, 38, 0.16);\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-connect-icon[data-provider=\"cursor\"] svg {\n    fill: #26251e;\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

@@ -1 +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"}
+{"version":3,"file":"buttons.d.ts","sourceRoot":"","sources":["../../src/styles/buttons.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,eAAO,MAAM,YAAY,mmIAqJxB,CAAC;AAEF,eAAO,MAAM,mBAAmB,gxFA+F/B,CAAC"}

package/dist/styles/buttons.js

@@ -43,6 +43,46 @@ export const buttonStyles = `
       inset 0 1px 0 rgba(255, 255, 255, 1),
       0 4px 12px rgba(0, 0, 0, 0.06);
   }
+  .ac-button.update {
+    background: transparent;
+    color: #2b2f3a;
+    border: 1px solid rgba(120, 129, 145, 0.45);
+    --ac-button-color: #2b2f3a;
+    box-shadow:
+      inset 0 1px 0 rgba(255, 255, 255, 0.9),
+      0 6px 16px rgba(18, 24, 38, 0.12);
+  }
+  .ac-button.update:hover:not([disabled]) {
+    border-color: rgba(90, 100, 120, 0.7);
+    background: transparent;
+    box-shadow:
+      0 0 0 1px rgba(80, 90, 110, 0.2),
+      inset 0 1px 0 rgba(255, 255, 255, 1),
+      0 10px 20px rgba(18, 24, 38, 0.16);
+  }
+  .ac-button.update.icon {
+    width: 40px;
+    height: 40px;
+    padding: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease;
+  }
+  .ac-button.update.icon svg {
+    width: 18px;
+    height: 18px;
+    fill: currentColor;
+    filter: none;
+  }
+  .ac-button.update.icon:hover:not([disabled]) {
+    border-color: rgba(90, 100, 120, 0.7);
+    box-shadow:
+      0 0 0 1px rgba(80, 90, 110, 0.2),
+      inset 0 1px 0 rgba(255, 255, 255, 1),
+      0 10px 20px rgba(18, 24, 38, 0.16);
+  }
   .ac-button.ghost {
     background: transparent;
     color: rgba(80, 70, 50, 0.7);
@@ -170,6 +210,9 @@ export const connectButtonStyles = `
   .ac-connect .ac-connect-icon[data-provider="claude"] svg {
     fill: #d97757;
   }
+  .ac-connect .ac-connect-icon[data-provider="cursor"] svg {
+    fill: #26251e;
+  }
   .ac-connect .ac-button:hover:not([disabled]) {
     transform: translateY(-2px);
     background: linear-gradient(

package/dist/styles/cards.d.ts

@@ -1,5 +1,5 @@
 /**
  * Provider card styles.
  */
-export declare const cardStyles = "\n  .ac-provider-list {\n    display: grid;\n    gap: 12px;\n  }\n  .ac-provider-card {\n    border: 1px solid rgba(195, 165, 90, 0.28);\n    border-radius: 16px;\n    padding: 14px 16px;\n    display: grid;\n    grid-template-columns: 1fr auto;\n    align-items: center;\n    gap: 12px;\n    background: linear-gradient(\n      165deg,\n      rgba(255, 255, 255, 0.8) 0%,\n      rgba(250, 251, 254, 0.7) 50%,\n      rgba(255, 255, 255, 0.8) 100%\n    );\n    cursor: pointer;\n    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    box-shadow:\n      inset 0 1px 0 rgba(255, 255, 255, 0.8),\n      0 2px 8px rgba(0, 0, 0, 0.04);\n  }\n  .ac-provider-card:hover {\n    transform: translateY(-2px);\n    border-color: rgba(200, 170, 90, 0.5);\n    background: linear-gradient(\n      165deg,\n      rgba(255, 255, 255, 0.95) 0%,\n      rgba(252, 253, 255, 0.9) 50%,\n      rgba(255, 255, 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 8px 24px rgba(0, 0, 0, 0.08);\n  }\n  .ac-provider-card[data-provider=\"claude\"]:hover {\n    border-color: rgba(217, 119, 87, 0.45);\n    box-shadow:\n      0 0 0 1px rgba(217, 119, 87, 0.1),\n      inset 0 1px 0 rgba(255, 255, 255, 1),\n      0 8px 24px rgba(217, 119, 87, 0.12);\n  }\n  .ac-provider-card[data-provider=\"codex\"]:hover {\n    border-color: rgba(32, 33, 35, 0.45);\n    box-shadow:\n      0 0 0 1px rgba(32, 33, 35, 0.1),\n      inset 0 1px 0 rgba(255, 255, 255, 1),\n      0 8px 24px rgba(32, 33, 35, 0.12);\n  }\n  .ac-provider-card[data-provider=\"local\"]:hover {\n    border-color: rgba(100, 116, 139, 0.45);\n    box-shadow:\n      0 0 0 1px rgba(100, 116, 139, 0.1),\n      inset 0 1px 0 rgba(255, 255, 255, 1),\n      0 8px 24px rgba(100, 116, 139, 0.12);\n  }\n  .ac-provider-card.active {\n    border-color: rgba(200, 170, 90, 0.6);\n    background: linear-gradient(\n      165deg,\n      rgba(255, 255, 255, 1) 0%,\n      rgba(253, 252, 250, 0.95) 50%,\n      rgba(255, 255, 255, 1) 100%\n    );\n    box-shadow:\n      0 0 0 1px rgba(210, 180, 100, 0.18),\n      inset 0 1px 0 rgba(255, 255, 255, 1),\n      0 8px 28px rgba(180, 150, 80, 0.15);\n  }\n  .ac-provider-card[data-provider=\"claude\"].active {\n    border-color: rgba(217, 119, 87, 0.55);\n    box-shadow:\n      0 0 0 1px rgba(217, 119, 87, 0.15),\n      inset 0 1px 0 rgba(255, 255, 255, 1),\n      0 8px 28px rgba(217, 119, 87, 0.18);\n  }\n  .ac-provider-card[data-provider=\"codex\"].active {\n    border-color: rgba(32, 33, 35, 0.55);\n    box-shadow:\n      0 0 0 1px rgba(32, 33, 35, 0.15),\n      inset 0 1px 0 rgba(255, 255, 255, 1),\n      0 8px 28px rgba(32, 33, 35, 0.18);\n  }\n  .ac-provider-card[data-provider=\"local\"].active {\n    border-color: rgba(100, 116, 139, 0.55);\n    box-shadow:\n      0 0 0 1px rgba(100, 116, 139, 0.15),\n      inset 0 1px 0 rgba(255, 255, 255, 1),\n      0 8px 28px rgba(100, 116, 139, 0.18);\n  }\n  .ac-provider-row {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n  }\n  .ac-provider-meta {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n  }\n  .ac-provider-icon {\n    width: 48px;\n    height: 48px;\n    border-radius: 14px;\n    display: grid;\n    place-items: center;\n    font-weight: 700;\n    letter-spacing: 0.06em;\n    font-size: 11px;\n    background: linear-gradient(\n      145deg,\n      rgba(255, 255, 255, 0.95) 0%,\n      rgba(245, 243, 240, 0.9) 100%\n    );\n    color: rgba(100, 85, 60, 0.8);\n    border: 1.5px solid rgba(195, 165, 90, 0.35);\n    box-shadow:\n      inset 0 1px 0 rgba(255, 255, 255, 1),\n      inset 0 -1px 0 rgba(0, 0, 0, 0.03),\n      0 2px 6px rgba(0, 0, 0, 0.04);\n  }\n  .ac-provider-icon svg {\n    width: 26px;\n    height: 26px;\n  }\n  .ac-provider-icon[data-provider=\"claude\"] {\n    background: linear-gradient(145deg, #fff8f3 0%, #ffeee2 100%);\n    border-color: rgba(217, 119, 87, 0.4);\n    box-shadow:\n      inset 0 1px 0 rgba(255, 255, 255, 1),\n      0 2px 8px rgba(217, 119, 87, 0.12);\n  }\n  .ac-provider-icon[data-provider=\"claude\"] svg {\n    fill: #d97757;\n  }\n  .ac-provider-card:hover .ac-provider-icon[data-provider=\"claude\"] {\n    box-shadow:\n      inset 0 1px 0 rgba(255, 255, 255, 1),\n      0 4px 16px rgba(217, 119, 87, 0.2);\n  }\n  .ac-provider-icon[data-provider=\"codex\"] {\n    background: linear-gradient(145deg, #f5f5f5 0%, #e8e8e8 100%);\n    border-color: rgba(32, 33, 35, 0.4);\n    box-shadow:\n      inset 0 1px 0 rgba(255, 255, 255, 1),\n      0 2px 8px rgba(32, 33, 35, 0.12);\n  }\n  .ac-provider-icon[data-provider=\"codex\"] svg {\n    fill: #202123;\n  }\n  .ac-provider-card:hover .ac-provider-icon[data-provider=\"codex\"] {\n    box-shadow:\n      inset 0 1px 0 rgba(255, 255, 255, 1),\n      0 4px 16px rgba(32, 33, 35, 0.2);\n  }\n  .ac-provider-icon[data-provider=\"local\"] {\n    background: linear-gradient(145deg, #f2f4f8 0%, #e4e8f0 100%);\n    border-color: rgba(100, 116, 139, 0.4);\n    box-shadow:\n      inset 0 1px 0 rgba(255, 255, 255, 1),\n      0 2px 8px rgba(100, 116, 139, 0.12);\n  }\n  .ac-provider-icon[data-provider=\"local\"] svg {\n    fill: #64748b;\n  }\n  .ac-provider-card:hover .ac-provider-icon[data-provider=\"local\"] {\n    box-shadow:\n      inset 0 1px 0 rgba(255, 255, 255, 1),\n      0 4px 16px rgba(100, 116, 139, 0.2);\n  }\n  .ac-provider-name {\n    font-size: 15px;\n    font-weight: 700;\n  }\n  .ac-provider-status {\n    font-size: 12px;\n    color: var(--ac-muted, #556070);\n  }\n  .ac-provider-actions {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n  }\n  .ac-provider-card.loading {\n    pointer-events: none;\n  }\n  .ac-provider-card.loading .ac-provider-name,\n  .ac-provider-card.loading .ac-provider-status {\n    background: var(--ac-skeleton-base, #e3e8ef);\n    color: transparent;\n    border-radius: 4px;\n    animation: ac-shimmer 1.5s ease-in-out infinite;\n    background-size: 200% 100%;\n  }\n  .ac-provider-card:active {\n    transform: scale(0.99);\n  }\n  .ac-provider-card .ac-provider-actions .ac-button {\n    pointer-events: none;\n  }\n  .ac-provider-card .ac-provider-actions .ac-button:hover {\n    transform: none;\n    box-shadow: inherit;\n  }\n";
+export declare const cardStyles = "\n  .ac-provider-list {\n    display: grid;\n    gap: 12px;\n  }\n\n  .ac-provider-card {\n    border: 1px solid rgba(195, 165, 90, 0.28);\n    border-radius: 16px;\n    padding: 14px 16px;\n    display: grid;\n    grid-template-columns: 1fr auto;\n    align-items: center;\n    gap: 12px;\n    background: linear-gradient(\n      165deg,\n      rgba(255, 255, 255, 0.8) 0%,\n      rgba(250, 251, 254, 0.7) 50%,\n      rgba(255, 255, 255, 0.8) 100%\n    );\n    cursor: pointer;\n    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    box-shadow:\n      inset 0 1px 0 rgba(255, 255, 255, 0.8),\n      0 2px 8px rgba(0, 0, 0, 0.04);\n  }\n  .ac-provider-card:hover {\n    transform: translateY(-2px);\n    border-color: rgba(200, 170, 90, 0.5);\n    background: linear-gradient(\n      165deg,\n      rgba(255, 255, 255, 0.95) 0%,\n      rgba(252, 253, 255, 0.9) 50%,\n      rgba(255, 255, 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 8px 24px rgba(0, 0, 0, 0.08);\n  }\n  .ac-provider-card:active {\n    transform: scale(0.99);\n  }\n  .ac-provider-card.active {\n    border-color: rgba(200, 170, 90, 0.6);\n    background: linear-gradient(\n      165deg,\n      rgba(255, 255, 255, 1) 0%,\n      rgba(253, 252, 250, 0.95) 50%,\n      rgba(255, 255, 255, 1) 100%\n    );\n    box-shadow:\n      0 0 0 1px rgba(210, 180, 100, 0.18),\n      inset 0 1px 0 rgba(255, 255, 255, 1),\n      0 8px 28px rgba(180, 150, 80, 0.15);\n  }\n\n  .ac-provider-card[data-provider=\"claude\"]:hover {\n    border-color: rgba(217, 119, 87, 0.45);\n    box-shadow:\n      0 0 0 1px rgba(217, 119, 87, 0.1),\n      inset 0 1px 0 rgba(255, 255, 255, 1),\n      0 8px 24px rgba(217, 119, 87, 0.12);\n  }\n  .ac-provider-card[data-provider=\"claude\"].active {\n    border-color: rgba(217, 119, 87, 0.55);\n    box-shadow:\n      0 0 0 1px rgba(217, 119, 87, 0.15),\n      inset 0 1px 0 rgba(255, 255, 255, 1),\n      0 8px 28px rgba(217, 119, 87, 0.18);\n  }\n\n  .ac-provider-card[data-provider=\"codex\"]:hover {\n    border-color: rgba(97, 108, 120, 0.45);\n    box-shadow:\n      0 0 0 1px rgba(97, 108, 120, 0.1),\n      inset 0 1px 0 rgba(255, 255, 255, 1),\n      0 8px 24px rgba(97, 108, 120, 0.12);\n  }\n  .ac-provider-card[data-provider=\"codex\"].active {\n    border-color: rgba(97, 108, 120, 0.55);\n    box-shadow:\n      0 0 0 1px rgba(97, 108, 120, 0.15),\n      inset 0 1px 0 rgba(255, 255, 255, 1),\n      0 8px 28px rgba(97, 108, 120, 0.18);\n  }\n\n  .ac-provider-card[data-provider=\"cursor\"]:hover {\n    border-color: rgba(20, 22, 26, 0.55);\n    box-shadow:\n      0 0 0 1px rgba(20, 22, 26, 0.18),\n      inset 0 1px 0 rgba(255, 255, 255, 1),\n      0 8px 24px rgba(20, 22, 26, 0.16);\n  }\n  .ac-provider-card[data-provider=\"cursor\"].active {\n    border-color: rgba(20, 22, 26, 0.65);\n    box-shadow:\n      0 0 0 1px rgba(20, 22, 26, 0.22),\n      inset 0 1px 0 rgba(255, 255, 255, 1),\n      0 8px 28px rgba(20, 22, 26, 0.2);\n  }\n\n  .ac-provider-card[data-provider=\"local\"]:hover {\n    border-color: rgba(100, 116, 139, 0.45);\n    box-shadow:\n      0 0 0 1px rgba(100, 116, 139, 0.1),\n      inset 0 1px 0 rgba(255, 255, 255, 1),\n      0 8px 24px rgba(100, 116, 139, 0.12);\n  }\n  .ac-provider-card[data-provider=\"local\"].active {\n    border-color: rgba(100, 116, 139, 0.55);\n    box-shadow:\n      0 0 0 1px rgba(100, 116, 139, 0.15),\n      inset 0 1px 0 rgba(255, 255, 255, 1),\n      0 8px 28px rgba(100, 116, 139, 0.18);\n  }\n\n  .ac-provider-row {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n  }\n  .ac-provider-meta {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n  }\n\n  .ac-provider-icon {\n    width: 48px;\n    height: 48px;\n    border-radius: 14px;\n    display: grid;\n    place-items: center;\n    font-weight: 700;\n    letter-spacing: 0.06em;\n    font-size: 11px;\n    background: linear-gradient(\n      145deg,\n      rgba(255, 255, 255, 0.95) 0%,\n      rgba(245, 243, 240, 0.9) 100%\n    );\n    color: rgba(100, 85, 60, 0.8);\n    border: 1.5px solid rgba(195, 165, 90, 0.35);\n    box-shadow:\n      inset 0 1px 0 rgba(255, 255, 255, 1),\n      inset 0 -1px 0 rgba(0, 0, 0, 0.03),\n      0 2px 6px rgba(0, 0, 0, 0.04);\n  }\n  .ac-provider-icon svg {\n    width: 26px;\n    height: 26px;\n  }\n\n  .ac-provider-icon[data-provider=\"claude\"] {\n    background: linear-gradient(145deg, #fff8f3 0%, #ffeee2 100%);\n    border-color: rgba(217, 119, 87, 0.4);\n    box-shadow:\n      inset 0 1px 0 rgba(255, 255, 255, 1),\n      0 2px 8px rgba(217, 119, 87, 0.12);\n  }\n  .ac-provider-icon[data-provider=\"claude\"] svg {\n    fill: #d97757;\n  }\n  .ac-provider-card:hover .ac-provider-icon[data-provider=\"claude\"] {\n    box-shadow:\n      inset 0 1px 0 rgba(255, 255, 255, 1),\n      0 4px 16px rgba(217, 119, 87, 0.2);\n  }\n\n  .ac-provider-icon[data-provider=\"codex\"] {\n    background: linear-gradient(145deg, #f5f5f5 0%, #e8e8e8 100%);\n    border-color: rgba(122, 132, 146, 0.4);\n    box-shadow:\n      inset 0 1px 0 rgba(255, 255, 255, 1),\n      0 2px 8px rgba(97, 108, 120, 0.14);\n  }\n  .ac-provider-icon[data-provider=\"codex\"] svg {\n    fill: #2a2f36;\n  }\n  .ac-provider-card:hover .ac-provider-icon[data-provider=\"codex\"] {\n    box-shadow:\n      inset 0 1px 0 rgba(255, 255, 255, 1),\n      0 4px 16px rgba(97, 108, 120, 0.2);\n  }\n\n  .ac-provider-icon[data-provider=\"cursor\"] {\n    background: linear-gradient(145deg, #fbfaf6 0%, #f0ede6 100%);\n    border-color: rgba(29, 32, 38, 0.42);\n    box-shadow:\n      inset 0 1px 0 rgba(255, 255, 255, 1),\n      0 2px 8px rgba(20, 22, 26, 0.16);\n  }\n  .ac-provider-icon[data-provider=\"cursor\"] svg {\n    fill: #111316;\n  }\n  .ac-provider-card:hover .ac-provider-icon[data-provider=\"cursor\"] {\n    box-shadow:\n      inset 0 1px 0 rgba(255, 255, 255, 1),\n      0 4px 16px rgba(20, 22, 26, 0.24);\n  }\n\n  .ac-provider-icon[data-provider=\"local\"] {\n    background: linear-gradient(145deg, #f2f4f8 0%, #e4e8f0 100%);\n    border-color: rgba(100, 116, 139, 0.4);\n    box-shadow:\n      inset 0 1px 0 rgba(255, 255, 255, 1),\n      0 2px 8px rgba(100, 116, 139, 0.12);\n  }\n  .ac-provider-icon[data-provider=\"local\"] svg {\n    fill: #64748b;\n  }\n  .ac-provider-card:hover .ac-provider-icon[data-provider=\"local\"] {\n    box-shadow:\n      inset 0 1px 0 rgba(255, 255, 255, 1),\n      0 4px 16px rgba(100, 116, 139, 0.2);\n  }\n\n  .ac-provider-name {\n    font-size: 15px;\n    font-weight: 700;\n  }\n  .ac-provider-name-row {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n  }\n  .ac-provider-update {\n    display: inline-flex;\n    align-items: center;\n    padding: 3px 10px;\n    border-radius: 999px;\n    font-size: 11px;\n    font-weight: 600;\n    letter-spacing: 0.01em;\n    background: transparent;\n    color: #2b2f3a;\n    border: 1px solid rgba(120, 129, 145, 0.45);\n    box-shadow:\n      inset 0 1px 0 rgba(255, 255, 255, 0.9),\n      0 6px 16px rgba(18, 24, 38, 0.12);\n    background-image: linear-gradient(120deg, #6b7280 0%, #1f2937 45%, #64748b 100%);\n    -webkit-background-clip: text;\n    background-clip: text;\n    -webkit-text-fill-color: transparent;\n  }\n  .ac-provider-status {\n    font-size: 12px;\n    color: var(--ac-muted, #556070);\n  }\n  .ac-provider-actions {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n  }\n\n  .ac-provider-card.loading {\n    pointer-events: none;\n  }\n  .ac-provider-card.loading .ac-provider-name,\n  .ac-provider-card.loading .ac-provider-status {\n    background: var(--ac-skeleton-base, #e3e8ef);\n    color: transparent;\n    border-radius: 4px;\n    animation: ac-shimmer 1.5s ease-in-out infinite;\n    background-size: 200% 100%;\n  }\n  .ac-provider-card .ac-provider-actions .ac-button {\n    pointer-events: none;\n  }\n  .ac-provider-card .ac-provider-actions .ac-button.update.icon {\n    pointer-events: auto;\n  }\n";
 //# sourceMappingURL=cards.d.ts.map

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

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

package/dist/styles/cards.js

@@ -6,6 +6,7 @@ export const cardStyles = `
     display: grid;
     gap: 12px;
   }
+
   .ac-provider-card {
     border: 1px solid rgba(195, 165, 90, 0.28);
     border-radius: 16px;
@@ -40,26 +41,8 @@ export const cardStyles = `
       inset 0 1px 0 rgba(255, 255, 255, 1),
       0 8px 24px rgba(0, 0, 0, 0.08);
   }
-  .ac-provider-card[data-provider="claude"]:hover {
-    border-color: rgba(217, 119, 87, 0.45);
-    box-shadow:
-      0 0 0 1px rgba(217, 119, 87, 0.1),
-      inset 0 1px 0 rgba(255, 255, 255, 1),
-      0 8px 24px rgba(217, 119, 87, 0.12);
-  }
-  .ac-provider-card[data-provider="codex"]:hover {
-    border-color: rgba(32, 33, 35, 0.45);
-    box-shadow:
-      0 0 0 1px rgba(32, 33, 35, 0.1),
-      inset 0 1px 0 rgba(255, 255, 255, 1),
-      0 8px 24px rgba(32, 33, 35, 0.12);
-  }
-  .ac-provider-card[data-provider="local"]:hover {
-    border-color: rgba(100, 116, 139, 0.45);
-    box-shadow:
-      0 0 0 1px rgba(100, 116, 139, 0.1),
-      inset 0 1px 0 rgba(255, 255, 255, 1),
-      0 8px 24px rgba(100, 116, 139, 0.12);
+  .ac-provider-card:active {
+    transform: scale(0.99);
   }
   .ac-provider-card.active {
     border-color: rgba(200, 170, 90, 0.6);
@@ -74,6 +57,14 @@ export const cardStyles = `
       inset 0 1px 0 rgba(255, 255, 255, 1),
       0 8px 28px rgba(180, 150, 80, 0.15);
   }
+
+  .ac-provider-card[data-provider="claude"]:hover {
+    border-color: rgba(217, 119, 87, 0.45);
+    box-shadow:
+      0 0 0 1px rgba(217, 119, 87, 0.1),
+      inset 0 1px 0 rgba(255, 255, 255, 1),
+      0 8px 24px rgba(217, 119, 87, 0.12);
+  }
   .ac-provider-card[data-provider="claude"].active {
     border-color: rgba(217, 119, 87, 0.55);
     box-shadow:
@@ -81,12 +72,43 @@ export const cardStyles = `
       inset 0 1px 0 rgba(255, 255, 255, 1),
       0 8px 28px rgba(217, 119, 87, 0.18);
   }
+
+  .ac-provider-card[data-provider="codex"]:hover {
+    border-color: rgba(97, 108, 120, 0.45);
+    box-shadow:
+      0 0 0 1px rgba(97, 108, 120, 0.1),
+      inset 0 1px 0 rgba(255, 255, 255, 1),
+      0 8px 24px rgba(97, 108, 120, 0.12);
+  }
   .ac-provider-card[data-provider="codex"].active {
-    border-color: rgba(32, 33, 35, 0.55);
+    border-color: rgba(97, 108, 120, 0.55);
     box-shadow:
-      0 0 0 1px rgba(32, 33, 35, 0.15),
+      0 0 0 1px rgba(97, 108, 120, 0.15),
       inset 0 1px 0 rgba(255, 255, 255, 1),
-      0 8px 28px rgba(32, 33, 35, 0.18);
+      0 8px 28px rgba(97, 108, 120, 0.18);
+  }
+
+  .ac-provider-card[data-provider="cursor"]:hover {
+    border-color: rgba(20, 22, 26, 0.55);
+    box-shadow:
+      0 0 0 1px rgba(20, 22, 26, 0.18),
+      inset 0 1px 0 rgba(255, 255, 255, 1),
+      0 8px 24px rgba(20, 22, 26, 0.16);
+  }
+  .ac-provider-card[data-provider="cursor"].active {
+    border-color: rgba(20, 22, 26, 0.65);
+    box-shadow:
+      0 0 0 1px rgba(20, 22, 26, 0.22),
+      inset 0 1px 0 rgba(255, 255, 255, 1),
+      0 8px 28px rgba(20, 22, 26, 0.2);
+  }
+
+  .ac-provider-card[data-provider="local"]:hover {
+    border-color: rgba(100, 116, 139, 0.45);
+    box-shadow:
+      0 0 0 1px rgba(100, 116, 139, 0.1),
+      inset 0 1px 0 rgba(255, 255, 255, 1),
+      0 8px 24px rgba(100, 116, 139, 0.12);
   }
   .ac-provider-card[data-provider="local"].active {
     border-color: rgba(100, 116, 139, 0.55);
@@ -95,6 +117,7 @@ export const cardStyles = `
       inset 0 1px 0 rgba(255, 255, 255, 1),
       0 8px 28px rgba(100, 116, 139, 0.18);
   }
+
   .ac-provider-row {
     display: flex;
     align-items: center;
@@ -105,6 +128,7 @@ export const cardStyles = `
     align-items: center;
     gap: 12px;
   }
+
   .ac-provider-icon {
     width: 48px;
     height: 48px;
@@ -130,6 +154,7 @@ export const cardStyles = `
     width: 26px;
     height: 26px;
   }
+
   .ac-provider-icon[data-provider="claude"] {
     background: linear-gradient(145deg, #fff8f3 0%, #ffeee2 100%);
     border-color: rgba(217, 119, 87, 0.4);
@@ -145,21 +170,39 @@ export const cardStyles = `
       inset 0 1px 0 rgba(255, 255, 255, 1),
       0 4px 16px rgba(217, 119, 87, 0.2);
   }
+
   .ac-provider-icon[data-provider="codex"] {
     background: linear-gradient(145deg, #f5f5f5 0%, #e8e8e8 100%);
-    border-color: rgba(32, 33, 35, 0.4);
+    border-color: rgba(122, 132, 146, 0.4);
     box-shadow:
       inset 0 1px 0 rgba(255, 255, 255, 1),
-      0 2px 8px rgba(32, 33, 35, 0.12);
+      0 2px 8px rgba(97, 108, 120, 0.14);
   }
   .ac-provider-icon[data-provider="codex"] svg {
-    fill: #202123;
+    fill: #2a2f36;
   }
   .ac-provider-card:hover .ac-provider-icon[data-provider="codex"] {
     box-shadow:
       inset 0 1px 0 rgba(255, 255, 255, 1),
-      0 4px 16px rgba(32, 33, 35, 0.2);
+      0 4px 16px rgba(97, 108, 120, 0.2);
+  }
+
+  .ac-provider-icon[data-provider="cursor"] {
+    background: linear-gradient(145deg, #fbfaf6 0%, #f0ede6 100%);
+    border-color: rgba(29, 32, 38, 0.42);
+    box-shadow:
+      inset 0 1px 0 rgba(255, 255, 255, 1),
+      0 2px 8px rgba(20, 22, 26, 0.16);
   }
+  .ac-provider-icon[data-provider="cursor"] svg {
+    fill: #111316;
+  }
+  .ac-provider-card:hover .ac-provider-icon[data-provider="cursor"] {
+    box-shadow:
+      inset 0 1px 0 rgba(255, 255, 255, 1),
+      0 4px 16px rgba(20, 22, 26, 0.24);
+  }
+
   .ac-provider-icon[data-provider="local"] {
     background: linear-gradient(145deg, #f2f4f8 0%, #e4e8f0 100%);
     border-color: rgba(100, 116, 139, 0.4);
@@ -175,10 +218,35 @@ export const cardStyles = `
       inset 0 1px 0 rgba(255, 255, 255, 1),
       0 4px 16px rgba(100, 116, 139, 0.2);
   }
+
   .ac-provider-name {
     font-size: 15px;
     font-weight: 700;
   }
+  .ac-provider-name-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+  .ac-provider-update {
+    display: inline-flex;
+    align-items: center;
+    padding: 3px 10px;
+    border-radius: 999px;
+    font-size: 11px;
+    font-weight: 600;
+    letter-spacing: 0.01em;
+    background: transparent;
+    color: #2b2f3a;
+    border: 1px solid rgba(120, 129, 145, 0.45);
+    box-shadow:
+      inset 0 1px 0 rgba(255, 255, 255, 0.9),
+      0 6px 16px rgba(18, 24, 38, 0.12);
+    background-image: linear-gradient(120deg, #6b7280 0%, #1f2937 45%, #64748b 100%);
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
   .ac-provider-status {
     font-size: 12px;
     color: var(--ac-muted, #556070);
@@ -188,6 +256,7 @@ export const cardStyles = `
     align-items: center;
     gap: 8px;
   }
+
   .ac-provider-card.loading {
     pointer-events: none;
   }
@@ -199,14 +268,10 @@ export const cardStyles = `
     animation: ac-shimmer 1.5s ease-in-out infinite;
     background-size: 200% 100%;
   }
-  .ac-provider-card:active {
-    transform: scale(0.99);
-  }
   .ac-provider-card .ac-provider-actions .ac-button {
     pointer-events: none;
   }
-  .ac-provider-card .ac-provider-actions .ac-button:hover {
-    transform: none;
-    box-shadow: inherit;
+  .ac-provider-card .ac-provider-actions .ac-button.update.icon {
+    pointer-events: auto;
   }
 `;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agentconnect/ui",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "license": "MIT",
   "type": "module",
   "homepage": "https://github.com/rayzhudev/agent-connect",
@@ -29,7 +29,7 @@
     "dev": "tsc --watch"
   },
   "dependencies": {
-    "@agentconnect/sdk": "workspace:*"
+    "@agentconnect/sdk": "^0.1.5"
   },
   "devDependencies": {
     "typescript": "^5.6.2"