@kortix/ui 0.14.8 → 0.14.10

package/dist/internal/chrome/chrome-connect.js

@@ -0,0 +1,178 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { platformConfig } from '@kortix/sdk';
+import { useChromeConnections } from '@kortix/sdk/react';
+import { AppWindowIcon, ArrowUpRightIcon, LinkSimpleIcon, PuzzlePieceIcon, SignInIcon, } from '@phosphor-icons/react';
+import { useMutation, useQuery } from '@tanstack/react-query';
+import { useState, useSyncExternalStore } from 'react';
+import { Button } from '../../primitives/button.js';
+import Loading from '../../primitives/loading.js';
+import { Modal, ModalContent, ModalDescription, ModalTitle } from '../../primitives/modal.js';
+import { BeamsShader } from '../../primitives/paper-wallpaper-shaders.js';
+import { errorToast } from '../../primitives/toast.js';
+import { SolidCheckIcon } from '../icons/solid-check-icon.js';
+import { useCopy } from '../hooks/use-copy.js';
+import { useTranslations } from '../../i18n/index.js';
+import { isDesktop } from '../lib/desktop.js';
+import { cn } from '../lib/utils.js';
+import { BrowserIcon, BrowserLogoTile } from './browser-icon.js';
+import { apiOrigin, CHROME_INSTALL_DOCS_PATH, CHROME_STORE_LISTED, chromeSettingsLink, connectExtension, isChromiumBrowser, KORTIX_EXTENSION_STORE_URL, pingExtension, } from './extension.js';
+const subscribeNever = () => () => { };
+function detectEnvironment() {
+    return isChromiumBrowser(navigator.userAgent) && !isDesktop() ? 'supported' : 'unsupported';
+}
+/**
+ * `fresh`: the person adds ANOTHER browser. This browser's own extension state
+ * does not count: no ping, and only a browser that was not in the list when the
+ * dialog opened completes it.
+ */
+export function useChromeConnect({ fresh = false } = {}) {
+    const t = useTranslations('chrome');
+    const environment = useSyncExternalStore(subscribeNever, detectEnvironment, () => 'checking');
+    const ping = useQuery({
+        queryKey: ['chrome-extension-ping'],
+        queryFn: () => pingExtension(),
+        enabled: environment === 'supported' && !fresh,
+        refetchInterval: 2_000,
+        staleTime: 0,
+        gcTime: 0,
+    });
+    const connections = useChromeConnections({ refetchInterval: 3_000 });
+    // The browsers that existed when the steps appeared. A browser outside it is
+    // the one this person is connecting now.
+    const [baseline, setBaseline] = useState(null);
+    if (baseline === null && connections.isSuccess) {
+        setBaseline(new Set(connections.data.map((chrome) => chrome.id)));
+    }
+    const status = fresh ? null : (ping.data ?? null);
+    const connected = connections.data?.find((chrome) => baseline && !baseline.has(chrome.id)) ??
+        // The extension keeps its browser id after a sign-out: trust it only while signed in.
+        (status?.connected && status.chromeId
+            ? connections.data?.find((chrome) => chrome.id === status.chromeId && chrome.online)
+            : undefined);
+    const connect = useMutation({
+        // A retry would open the sign-in window again.
+        retry: false,
+        mutationFn: () => connectExtension(apiOrigin(platformConfig().backendUrl || '', window.location.origin)),
+        onSuccess: (result) => {
+            if (!result.ok) {
+                // `unavailable`: the page could not reach the extension.
+                errorToast(t(result.error === 'unavailable' ? 'extensionMissing' : 'connectFailed'));
+            }
+            void ping.refetch();
+            void connections.refetch();
+        },
+    });
+    return {
+        environment,
+        /** The first ping has not answered yet. */
+        checking: environment === 'checking' || (environment === 'supported' && !fresh && !ping.isFetched),
+        // A page opened before the install cannot reach the extension until it
+        // reloads. The extension's own tab finishes the sign-in, and the browser
+        // then shows up in the list, so a connected browser completes every step.
+        installed: status !== null || Boolean(connected),
+        signedIn: status?.connected === true || Boolean(connected),
+        connected,
+        connect,
+    };
+}
+/** The Chrome mark on a small white tile, for a button label. */
+export function ChromeButtonMark() {
+    return _jsx(BrowserLogoTile, { brand: "chrome", className: "size-5 shrink-0 ring-0", iconClassName: "size-3.5" });
+}
+function StepTile({ done, icon: StepIcon, brand }) {
+    // The last step shows the connected browser's own mark.
+    if (done && brand)
+        return _jsx(BrowserLogoTile, { brand: brand, className: "size-10" });
+    return (_jsx("span", { className: cn('flex size-10 shrink-0 items-center justify-center rounded-sm', done ? 'bg-kortix-green/15' : 'bg-muted text-muted-foreground'), children: done ? _jsx(SolidCheckIcon, { className: "text-kortix-green size-5" }) : _jsx(StepIcon, { className: "size-5" }) }));
+}
+export function ChromeOnlineDot({ online, className }) {
+    const t = useTranslations('chrome');
+    return (_jsx("span", { role: "img", "aria-label": online ? t('online') : t('offline'), className: cn('inline-block size-2 shrink-0 rounded-full', online ? 'bg-kortix-green' : 'bg-muted-foreground', className) }));
+}
+/** Copies the link that opens Settings → Kortix in Chrome, for a browser that cannot run the extension. */
+export function ChromeCopyLink({ size = 'sm', className }) {
+    const t = useTranslations('chrome');
+    const { copy, copied } = useCopy({ toast: false });
+    return (_jsxs(Button, { variant: "secondary", size: size, className: cn('gap-1.5', className), onClick: async () => {
+            if (!(await copy(chromeSettingsLink(window.location.origin))))
+                errorToast(t('copyFailed'));
+        }, children: [copied ? _jsx(SolidCheckIcon, { className: "size-3.5 shrink-0" }) : _jsx(LinkSimpleIcon, { className: "size-3.5 shrink-0" }), copied ? t('linkCopied') : t('copyLink')] }));
+}
+/**
+ * The action that moves this browser forward: Connect once the extension is
+ * there, otherwise Connect plus "How to install" (or "Add to Chrome" once the
+ * Web Store listing is public). Renders nothing for a connected browser.
+ */
+export function ChromeInstallActions({ state, size = 'sm', className, showGuide = true, }) {
+    const t = useTranslations('chrome');
+    const { checking, installed, connected, connect } = state;
+    const [openedStore, setOpenedStore] = useState(false);
+    if (connected)
+        return null;
+    const full = size === 'lg' ? 'w-full' : '';
+    const connectButton = (_jsxs(Button, { size: size, className: full, disabled: connect.isPending, onClick: () => connect.mutate(), children: [connect.isPending ? _jsx(Loading, { className: "size-4 shrink-0" }) : null, connect.isPending ? t('connecting') : t('connect')] }));
+    if (installed)
+        return _jsx("div", { className: className, children: connectButton });
+    if (CHROME_STORE_LISTED) {
+        return (_jsxs("div", { className: cn('space-y-2', className), children: [_jsx(Button, { asChild: true, size: size, className: full, "aria-disabled": checking, children: _jsxs("a", { href: KORTIX_EXTENSION_STORE_URL, target: "_blank", rel: "noreferrer", onClick: () => setOpenedStore(true), children: [_jsx(ChromeButtonMark, {}), t('addToChrome')] }) }), openedStore ? (_jsx("p", { className: "text-muted-foreground text-center text-xs text-pretty", children: t('finishInChrome') })) : null] }));
+    }
+    return (_jsxs("div", { className: cn(size === 'lg' ? 'flex flex-col gap-2' : 'flex flex-wrap items-center gap-x-3 gap-y-2', className), children: [connectButton, showGuide ? (_jsx(Button, { asChild: true, variant: "ghost", size: size, className: cn('gap-1.5', size === 'sm' && 'text-muted-foreground'), children: _jsxs("a", { href: CHROME_INSTALL_DOCS_PATH, target: "_blank", rel: "noreferrer", children: [t('howToInstall'), _jsx(ArrowUpRightIcon, { className: "size-3.5 shrink-0" })] }) })) : null] }));
+}
+/**
+ * The three steps and the one action that moves them. Used in the connect
+ * dialog and, with no browser connected yet, inline in Settings → Kortix in
+ * Chrome (`showActions={false}`: the page header holds the action there).
+ */
+export function ChromeConnectSteps({ state, onDone, showActions = true, }) {
+    const t = useTranslations('chrome');
+    const { environment, installed, signedIn, connected } = state;
+    if (environment === 'unsupported') {
+        return (_jsxs("div", { className: "mt-auto space-y-3", children: [_jsx("p", { className: "text-muted-foreground text-sm text-pretty", children: t('unsupported') }), showActions ? _jsx(ChromeCopyLink, { size: "lg", className: "w-full" }) : null] }));
+    }
+    const steps = [
+        {
+            key: 'install',
+            icon: PuzzlePieceIcon,
+            done: installed,
+            description: installed ? (t('steps.install.done')) : CHROME_STORE_LISTED ? (t('steps.install.description')) : (_jsxs(_Fragment, { children: [t('steps.install.descriptionUnlisted'), showActions ? null : (_jsxs(_Fragment, { children: [' ', _jsx("a", { href: CHROME_INSTALL_DOCS_PATH, target: "_blank", rel: "noreferrer", className: "text-foreground underline underline-offset-2", children: t('howToInstall') })] }))] })),
+        },
+        {
+            key: 'connect',
+            icon: SignInIcon,
+            done: signedIn,
+            description: t(signedIn ? 'steps.connect.done' : 'steps.connect.description'),
+        },
+        {
+            key: 'done',
+            icon: AppWindowIcon,
+            done: Boolean(connected),
+            brand: connected?.brand,
+            description: connected ? (_jsxs("span", { className: "flex min-w-0 items-center gap-1.5", children: [_jsx(ChromeOnlineDot, { online: connected.online }), _jsx("span", { className: "truncate", children: connected.name })] })) : (t('steps.done.description')),
+        },
+    ];
+    return (_jsxs(_Fragment, { children: [_jsx("ol", { className: "divide-border divide-y", children: steps.map(({ key, icon, done, brand, description }) => (_jsxs("li", { className: "flex items-center gap-3 py-3", children: [_jsx(StepTile, { done: done, icon: icon, brand: brand }), _jsxs("div", { className: "min-w-0 flex-1 space-y-0.5", children: [_jsx("p", { className: "text-sm font-medium", children: t(`steps.${key}.title`) }), _jsx("div", { className: "text-muted-foreground line-clamp-2 text-xs text-pretty", children: description })] })] }, key))) }), showActions || connected ? (_jsx("div", { className: "mt-auto space-y-2", children: connected ? (onDone ? (_jsx(Button, { size: "lg", className: "w-full", onClick: onDone, children: t('done') })) : null) : (_jsx(ChromeInstallActions, { state: state, size: "lg" })) })) : null] }));
+}
+/**
+ * "Add another browser": the other browser, or another Chrome profile, signs
+ * itself in. This page cannot do that for it, so the dialog says where to go
+ * and waits for the new browser to show up in the list.
+ */
+function ChromeAddAnother({ onDone }) {
+    const t = useTranslations('chrome');
+    const { connected } = useChromeConnect({ fresh: true });
+    return (_jsxs(_Fragment, { children: [_jsx("ol", { className: "divide-border divide-y", children: _jsxs("li", { className: "flex items-center gap-3 py-3", children: [_jsx(StepTile, { done: Boolean(connected), icon: AppWindowIcon, brand: connected?.brand }), _jsxs("div", { className: "min-w-0 flex-1 space-y-0.5", children: [_jsx("p", { className: "text-sm font-medium", children: t('another.title') }), _jsx("div", { className: "text-muted-foreground line-clamp-2 text-xs text-pretty", children: connected ? (_jsxs("span", { className: "flex min-w-0 items-center gap-1.5", children: [_jsx(ChromeOnlineDot, { online: connected.online }), _jsx("span", { className: "truncate", children: connected.name })] })) : (t('another.waiting')) })] })] }) }), _jsx("div", { className: "mt-auto space-y-2", children: connected ? (onDone ? (_jsx(Button, { size: "lg", className: "w-full", onClick: onDone, children: t('done') })) : null) : (_jsx(ChromeCopyLink, { size: "lg", className: "w-full" })) })] }));
+}
+function ChromeConnectBody({ onDone }) {
+    const state = useChromeConnect();
+    return _jsx(ChromeConnectSteps, { state: state, onDone: onDone });
+}
+/**
+ * "Add Kortix to Chrome": add the Kortix extension to Chrome, sign it in, and
+ * watch the browser appear. `fresh`: add ANOTHER browser. Same frame as
+ * `ComputerConnectModal`.
+ */
+export function ChromeConnectModal({ open, onOpenChange, fresh = false, }) {
+    const t = useTranslations('chrome');
+    return (_jsx(Modal, { open: open, onOpenChange: onOpenChange, children: _jsx(ModalContent, { className: "space-y-0 lg:max-w-3xl", closeClassName: "max-sm:bg-background border-0 overflow-hidden", children: _jsxs("div", { className: "grid sm:grid-cols-5 lg:min-h-128", children: [_jsxs("div", { "aria-hidden": "true", className: "dark bg-background relative isolate flex h-48 items-center justify-center overflow-hidden rounded-t-xl border-b sm:col-span-2 sm:h-auto sm:rounded-tr-none sm:border-r sm:border-b-0 lg:rounded-bl-xl", children: [_jsx(BeamsShader, {}), _jsxs("span", { className: "bg-foreground text-background relative flex items-center gap-2 rounded-full px-4 py-2 text-sm font-medium", children: [_jsx(BrowserIcon, { brand: "chrome", tone: "current", className: "size-4" }), t('pill')] })] }), _jsxs("div", { className: "flex min-w-0 flex-col gap-5 p-5 sm:col-span-3 lg:p-8", children: [_jsxs("header", { className: "space-y-1.5 pr-10", children: [_jsx(ModalTitle, { className: "text-lg font-medium text-balance", children: t('connectTitle') }), _jsx(ModalDescription, { className: "text-pretty", children: t(fresh ? 'another.description' : 'connectDescription') })] }), open ? (fresh ? (_jsx(ChromeAddAnother, { onDone: () => onOpenChange(false) })) : (_jsx(ChromeConnectBody, { onDone: () => onOpenChange(false) }))) : null] })] }) }) }));
+}

package/dist/internal/chrome/chrome-mock.d.ts

@@ -0,0 +1,4 @@
+/** @internal Kortix apps only. No semver: it may change in any release. */
+export declare function ChromeMock({ className }: {
+    className?: string;
+}): import("react").JSX.Element;

package/dist/internal/chrome/chrome-mock.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CursorIcon } from '@phosphor-icons/react';
+import { useTranslations } from '../../i18n/index.js';
+import { cn } from '../lib/utils.js';
+/**
+ * What the person sees while a session works in their chrome: the Kortix tab
+ * group, the page with a halo, the agent cursor and the control bar. Static,
+ * decorative, built from tokens. Blue marks agent state only. It mirrors the
+ * extension's welcome page (`apps/chrome-extension/src/pages/welcome.html`).
+ */
+const MOCK_URL = 'shop.example.com/returns';
+export function ChromeMock({ className }) {
+    const t = useTranslations('appsModal.mock');
+    return (_jsx("div", { "aria-hidden": "true", className: cn('bg-muted rounded-md p-3 sm:p-4', className), children: _jsxs("div", { className: "bg-background overflow-hidden rounded-sm border", children: [_jsx("div", { className: "bg-card flex items-center gap-2 border-b px-2 py-1.5", children: _jsxs("span", { className: "bg-kortix-base/15 flex min-w-0 items-center gap-1.5 rounded-sm px-2 py-0.5 text-xs", children: [_jsx("span", { className: "bg-kortix-base size-1.5 shrink-0 rounded-full" }), _jsx("span", { className: "truncate", children: t('group') })] }) }), _jsx("div", { className: "border-b px-2 py-1.5", children: _jsx("span", { className: "bg-muted text-muted-foreground block truncate rounded-sm px-2 py-0.5 font-mono text-xs", children: MOCK_URL }) }), _jsxs("div", { className: "relative space-y-3 px-3 pt-3 pb-14 sm:px-4 sm:pt-4", children: [_jsx("span", { className: "bg-muted block h-2 w-24 rounded-sm" }), _jsxs("div", { className: "flex items-center justify-between gap-3 rounded-sm border p-3", children: [_jsxs("span", { className: "space-y-1.5", children: [_jsx("span", { className: "bg-muted block h-2 w-20 rounded-sm" }), _jsx("span", { className: "bg-muted block h-2 w-12 rounded-sm" })] }), _jsxs("span", { className: "border-ring ring-ring/15 relative rounded-sm border px-2 py-1 text-xs ring-3", children: [t('button'), _jsxs("span", { className: "absolute top-full right-1 -mt-0.5 flex flex-col items-end", children: [_jsx(CursorIcon, { weight: "fill", className: "text-kortix-base size-4" }), _jsx("span", { className: "bg-popover -mt-0.5 rounded-sm border px-1.5 py-0.5 text-xs", children: "Kortix" })] })] })] }), _jsxs("span", { className: "bg-popover absolute bottom-3 left-1/2 flex -translate-x-1/2 items-center gap-2 rounded-full border px-3 py-1 text-xs whitespace-nowrap", children: [_jsx("span", { className: "bg-kortix-base size-1.5 rounded-full" }), t('working'), _jsx("span", { className: "text-muted-foreground", children: t('takeOver') }), _jsx("span", { className: "text-muted-foreground", children: t('stop') })] })] })] }) }));
+}

package/dist/internal/chrome/chrome-names.d.ts

@@ -0,0 +1,15 @@
+/** @internal Kortix apps only. No semver: it may change in any release. */
+import type { ChromeConnection } from '@kortix/sdk';
+/**
+ * Two browsers can share a default name ("Chromium on macOS"). Where they do,
+ * the list tells them apart: the profile label when it has one, else a count
+ * in connection order. The stored name never changes; this is display only.
+ */
+export declare function chromeDisplayNames(list: readonly ChromeConnection[]): Map<string, string>;
+/** "N browsers · M online" for the Apps modal. */
+export declare function chromeCounts(list: readonly ChromeConnection[]): {
+    count: number;
+    online: number;
+};
+/** Offline for longer than `thresholdMs`: only then is "last seen" worth saying. */
+export declare function offlineLongerThan(lastSeenAt: string | null, thresholdMs: number, now?: number): boolean;

package/dist/internal/chrome/chrome-names.js

@@ -0,0 +1,35 @@
+/**
+ * Two browsers can share a default name ("Chromium on macOS"). Where they do,
+ * the list tells them apart: the profile label when it has one, else a count
+ * in connection order. The stored name never changes; this is display only.
+ */
+export function chromeDisplayNames(list) {
+    const byName = new Map();
+    for (const chrome of list)
+        byName.set(chrome.name, [...(byName.get(chrome.name) ?? []), chrome]);
+    const out = new Map();
+    for (const chrome of list) {
+        const same = byName.get(chrome.name) ?? [];
+        if (same.length < 2) {
+            out.set(chrome.id, chrome.name);
+        }
+        else if (chrome.profileLabel && !chrome.name.includes(chrome.profileLabel)) {
+            out.set(chrome.id, `${chrome.name} · ${chrome.profileLabel}`);
+        }
+        else {
+            out.set(chrome.id, `${chrome.name} #${same.indexOf(chrome) + 1}`);
+        }
+    }
+    return out;
+}
+/** "N browsers · M online" for the Apps modal. */
+export function chromeCounts(list) {
+    return { count: list.length, online: list.filter((chrome) => chrome.online).length };
+}
+/** Offline for longer than `thresholdMs`: only then is "last seen" worth saying. */
+export function offlineLongerThan(lastSeenAt, thresholdMs, now = Date.now()) {
+    if (!lastSeenAt)
+        return false;
+    const seen = Date.parse(lastSeenAt);
+    return Number.isFinite(seen) && now - seen > thresholdMs;
+}

package/dist/internal/chrome/extension.d.ts

@@ -0,0 +1,47 @@
+/** @internal Kortix apps only. No semver: it may change in any release. */
+/**
+ * The Kortix Chrome extension, seen from the web app.
+ *
+ * A page talks to the extension through `chrome.runtime.sendMessage(id, …)`
+ * (`externally_connectable`). Chrome exposes `chrome.runtime` to a page only
+ * when the extension is installed and lists the page's origin. Safari, Firefox
+ * and the desktop shell never expose it, so `pingExtension` answers `null`.
+ */
+export declare const KORTIX_EXTENSION_ID: string;
+export declare const KORTIX_EXTENSION_STORE_URL: string;
+/**
+ * The Web Store listing is public. While `false`, no surface offers "Add to
+ * Chrome": each one shows "Connect" and a "How to install" link to the docs.
+ * Flip it with the listing, nothing else changes.
+ */
+export declare const CHROME_STORE_LISTED = false;
+/** Where "How to install" points: the docs page that explains Load unpacked. */
+export declare const CHROME_INSTALL_DOCS_PATH = "/docs/connect/chrome";
+/** Opens Settings → Kortix in Chrome. The link a person copies to open it in Chrome. */
+export declare function chromeSettingsLink(origin: string): string;
+export interface ExtensionStatus {
+    version: string;
+    /** The extension holds a Kortix sign-in and a browser id. */
+    connected: boolean;
+    apiUrl: string | null;
+    chromeId: string | null;
+}
+export type ExtensionConnectResult = {
+    ok: true;
+    chromeId: string;
+} | {
+    ok: false;
+    error: string;
+};
+/** Chrome, Edge, Brave, Arc and Opera on a computer. Not Electron, not Chrome on iOS. */
+export declare function isChromiumBrowser(userAgent: string): boolean;
+/**
+ * The API origin the extension signs in to. The web app's backend URL can be
+ * root-relative (`/v1`, same-origin deployments), so resolve it against the
+ * page. The extension appends `/v1/...` itself. `''` when there is none.
+ */
+export declare function apiOrigin(backendUrl: string, pageOrigin: string): string;
+/** The extension's state, or `null`: not installed, not Chromium, or no answer in 1.5 s. */
+export declare function pingExtension(timeoutMs?: number): Promise<ExtensionStatus | null>;
+/** Starts the extension's Kortix sign-in. Resolves when the person finishes it. */
+export declare function connectExtension(apiUrl: string): Promise<ExtensionConnectResult>;

package/dist/internal/chrome/extension.js

@@ -0,0 +1,91 @@
+/**
+ * The Kortix Chrome extension, seen from the web app.
+ *
+ * A page talks to the extension through `chrome.runtime.sendMessage(id, …)`
+ * (`externally_connectable`). Chrome exposes `chrome.runtime` to a page only
+ * when the extension is installed and lists the page's origin. Safari, Firefox
+ * and the desktop shell never expose it, so `pingExtension` answers `null`.
+ */
+export const KORTIX_EXTENSION_ID = process.env.NEXT_PUBLIC_KORTIX_EXTENSION_ID || 'gefbbnjgoiljpbnalgafbhbfdhikgjek';
+export const KORTIX_EXTENSION_STORE_URL = `https://chromewebstore.google.com/detail/${KORTIX_EXTENSION_ID}`;
+/**
+ * The Web Store listing is public. While `false`, no surface offers "Add to
+ * Chrome": each one shows "Connect" and a "How to install" link to the docs.
+ * Flip it with the listing, nothing else changes.
+ */
+export const CHROME_STORE_LISTED = false;
+/** Where "How to install" points: the docs page that explains Load unpacked. */
+export const CHROME_INSTALL_DOCS_PATH = '/docs/connect/chrome';
+/** Opens Settings → Kortix in Chrome. The link a person copies to open it in Chrome. */
+export function chromeSettingsLink(origin) {
+    return `${origin}/settings/chrome`;
+}
+const PING_TIMEOUT_MS = 1_500;
+// Sign-in happens in a Chrome window the person must finish.
+const CONNECT_TIMEOUT_MS = 120_000;
+/** Chrome, Edge, Brave, Arc and Opera on a computer. Not Electron, not Chrome on iOS. */
+export function isChromiumBrowser(userAgent) {
+    return /Chrome\/\d/.test(userAgent) && !/Electron\//.test(userAgent);
+}
+/**
+ * The API origin the extension signs in to. The web app's backend URL can be
+ * root-relative (`/v1`, same-origin deployments), so resolve it against the
+ * page. The extension appends `/v1/...` itself. `''` when there is none.
+ */
+export function apiOrigin(backendUrl, pageOrigin) {
+    if (!backendUrl)
+        return '';
+    try {
+        return new URL(backendUrl, pageOrigin).origin;
+    }
+    catch {
+        return '';
+    }
+}
+function send(message, timeoutMs, parse) {
+    const runtime = globalThis.chrome?.runtime;
+    if (!runtime?.sendMessage)
+        return Promise.resolve(null);
+    return new Promise((resolve) => {
+        const timer = setTimeout(() => resolve(null), timeoutMs);
+        const done = (value) => {
+            clearTimeout(timer);
+            resolve(value);
+        };
+        try {
+            runtime.sendMessage(KORTIX_EXTENSION_ID, message, (response) => {
+                // Reading `lastError` marks it handled. Set when the extension is absent.
+                done(runtime.lastError ? null : parse(response));
+            });
+        }
+        catch {
+            done(null);
+        }
+    });
+}
+/** The extension's state, or `null`: not installed, not Chromium, or no answer in 1.5 s. */
+export function pingExtension(timeoutMs = PING_TIMEOUT_MS) {
+    return send({ type: 'kortix.ping' }, timeoutMs, (response) => {
+        const r = response;
+        if (!r || r.ok !== true)
+            return null;
+        return {
+            version: String(r.version ?? ''),
+            connected: r.connected === true,
+            apiUrl: typeof r.apiUrl === 'string' ? r.apiUrl : null,
+            chromeId: typeof r.chromeId === 'string' ? r.chromeId : null,
+        };
+    });
+}
+/** Starts the extension's Kortix sign-in. Resolves when the person finishes it. */
+export async function connectExtension(apiUrl) {
+    const result = await send({ type: 'kortix.connect', apiUrl }, CONNECT_TIMEOUT_MS, (response) => {
+        const r = response;
+        if (r?.ok === true)
+            return { ok: true, chromeId: String(r.chromeId ?? '') };
+        if (r)
+            return { ok: false, error: typeof r.error === 'string' ? r.error : 'failed' };
+        return null;
+    });
+    return result ?? { ok: false, error: 'unavailable' };
+}

package/dist/internal/chrome/use-chrome-offered.d.ts

@@ -0,0 +1,11 @@
+/** @internal Kortix apps only. No semver: it may change in any release. */
+/**
+ * Whether this platform offers Kortix in Chrome at all. Until launch the API
+ * answers 404 on /v1/chrome/* where KORTIX_CHROME_ENABLED is off (staging,
+ * prod), so the account-level surfaces — Settings → Kortix in Chrome and its
+ * command-palette entry — show only once the browser list answers. Project
+ * surfaces read the project's `chrome` flag instead.
+ *
+ * `enabled`: ask only while the surface that needs the answer is open.
+ */
+export declare function useChromeOffered(enabled?: boolean): boolean;

package/dist/internal/chrome/use-chrome-offered.js

@@ -0,0 +1,22 @@
+'use client';
+import { listChromeConnections } from '@kortix/sdk';
+import { chromeKeys } from '@kortix/sdk/react';
+import { useQuery } from '@tanstack/react-query';
+/**
+ * Whether this platform offers Kortix in Chrome at all. Until launch the API
+ * answers 404 on /v1/chrome/* where KORTIX_CHROME_ENABLED is off (staging,
+ * prod), so the account-level surfaces — Settings → Kortix in Chrome and its
+ * command-palette entry — show only once the browser list answers. Project
+ * surfaces read the project's `chrome` flag instead.
+ *
+ * `enabled`: ask only while the surface that needs the answer is open.
+ */
+export function useChromeOffered(enabled = true) {
+    return useQuery({
+        queryKey: chromeKeys.list(),
+        queryFn: listChromeConnections,
+        enabled,
+        staleTime: 60_000,
+        retry: false,
+    }).isSuccess;
+}

package/dist/internal/components/agent-mark.js

@@ -22,7 +22,10 @@ export function agentMarkVars(slug) {
 }
 /** The bare pixel figure, painted with `--mark-ink` from an ancestor. */
 export function AgentMarkGlyph({ slug, size }) {
-    return (_jsx("svg", { "aria-hidden": true, width: size, height: size, viewBox: `0 0 ${PIXEL_MARK_SIZE} ${PIXEL_MARK_SIZE}`, shapeRendering: "crispEdges", className: "shrink-0", children: _jsx("path", { d: pixelMark(slug).path, className: "fill-(--mark-ink)" }) }));
+    return (_jsx("svg", { "aria-hidden": true, width: size, height: size, 
+        // Inline, so a host's `[&_svg]:size-4` default (menu rows) cannot rescale
+        // the 7-pixel grid off whole device pixels.
+        style: { width: size, height: size }, viewBox: `0 0 ${PIXEL_MARK_SIZE} ${PIXEL_MARK_SIZE}`, shapeRendering: "crispEdges", className: "shrink-0", children: _jsx("path", { d: pixelMark(slug).path, className: "fill-(--mark-ink)" }) }));
 }
 /**
  * An agent's pixel mark on its tile — the agent's face wherever it appears:
@@ -30,7 +33,7 @@ export function AgentMarkGlyph({ slug, size }) {
  */
 export function AgentMark({ slug, size = 14, tile = TILE[size], label, className, }) {
     // A mark is a face, not a name: the hover hint says whose face it is.
-    const mark = (_jsx("span", { "aria-hidden": true, style: { ...agentMarkVars(slug), width: tile, height: tile }, className: cn('inline-flex shrink-0 items-center justify-center bg-(--mark-tile)', size >= 28 ? 'rounded-md' : 'rounded-sm', className), children: _jsx(AgentMarkGlyph, { slug: slug, size: size }) }));
+    const mark = (_jsx("span", { "aria-hidden": true, "data-slot": "agent-mark", style: { ...agentMarkVars(slug), width: tile, height: tile }, className: cn('inline-flex shrink-0 items-center justify-center bg-(--mark-tile)', size >= 28 ? 'rounded-md' : 'rounded-sm', className), children: _jsx(AgentMarkGlyph, { slug: slug, size: size }) }));
     return (_jsx(Hint, { side: "top", sideOffset: 6, alignOffset: 0, label: label ?? agentLabel(slug), children: mark }));
 }
 function agentLabel(slug) {

package/dist/internal/connector-logo/connector-logo-source.d.ts

@@ -0,0 +1,64 @@
+/** @internal Kortix apps only. No semver: it may change in any release. */
+import { type ChannelPlatformId } from '../../_vendor/shared/channel-descriptors.js';
+/**
+ * Which logo a connector shows. ONE rule for every surface — catalogue card,
+ * app page, connector page, Connected list, account rows, pickers, channel
+ * heroes, approvals — so an app looks the same wherever it appears.
+ *
+ * 1. A Kortix-built connector (Slack, Teams, Email, Telegram, Computer) shows
+ *    its banner mark: the Slack and Teams brand components, the Phosphor
+ *    envelope, plane and monitor glyphs (`ConnectorLogo` draws them). The
+ *    files under `apps/web/public/connector-icons/<app>.svg` are the same
+ *    marks, for consumers that need a URL, so an icon URL pointing at one is
+ *    read as that app too.
+ * 2. Else the app's own icon URL: the catalogue record's, or the one the API
+ *    resolved for an installed connector (`AdminConnector.iconUrl`).
+ * 3. Else the favicon of a PUBLIC catalogue domain. Never of a connector's own
+ *    URL: a custom MCP or API host may be private, and the favicon service
+ *    would learn it (the API holds the same line, `connector-icon.ts`).
+ * 4. Else the neutral fallback glyph.
+ */
+export type NativeConnectorApp = ChannelPlatformId | 'computer';
+/** Whatever a surface knows about the connector; every field optional. */
+export interface ConnectorLogoSource {
+    /** Connector slug (`kortix_email`, `computer`) or catalogue id (`native:email`). */
+    slug?: string | null;
+    /** `AdminConnector.provider`: `channel`, `computer`, `composio`, `mcp`, … */
+    provider?: string | null;
+    /** A channel connector's platform. */
+    platform?: string | null;
+    /** The Kortix app a catalogue record names (`DiscoverConnector.kortix.app`). */
+    nativeApp?: string | null;
+    /** The app's own icon URL, when the source has one. */
+    icon?: string | null;
+    /** A public catalogue domain (never a connector's own URL). */
+    domain?: string | null;
+}
+export type ConnectorLogoKind = {
+    kind: 'native';
+    app: NativeConnectorApp;
+} | {
+    kind: 'image';
+    src: string;
+} | {
+    kind: 'none';
+};
+export declare function nativeConnectorApp(source: ConnectorLogoSource): NativeConnectorApp | null;
+export declare function resolveConnectorLogo(source: ConnectorLogoSource): ConnectorLogoKind;
+/** A catalogue record (Discover) as a logo source. */
+export declare function discoverLogoSource(connector: {
+    id?: string | null;
+    slug?: string | null;
+    icon?: string | null;
+    domain?: string | null;
+    kortix?: {
+        app?: string | null;
+    } | null;
+}): ConnectorLogoSource;
+/** An installed connector (`AdminConnector`) as a logo source. */
+export declare function installedConnectorLogoSource(connector: {
+    slug: string;
+    provider?: string | null;
+    platform?: string | null;
+    iconUrl?: string | null;
+}): ConnectorLogoSource;

package/dist/internal/connector-logo/connector-logo-source.js

@@ -0,0 +1,49 @@
+import { CHANNEL_PLATFORM_IDS } from '../../_vendor/kortix-shared.js';
+import { faviconUrlForHostname } from '../../lib/favicon.js';
+const NATIVE_APPS = [...CHANNEL_PLATFORM_IDS, 'computer'];
+function isNative(value) {
+    return !!value && NATIVE_APPS.includes(value);
+}
+export function nativeConnectorApp(source) {
+    if (isNative(source.nativeApp))
+        return source.nativeApp;
+    if (source.provider === 'computer')
+        return 'computer';
+    if (source.provider === 'channel' && isNative(source.platform))
+        return source.platform;
+    const slug = (source.slug ?? '').toLowerCase();
+    const named = /^(?:native:|kortix_)([a-z]+)$/.exec(slug)?.[1];
+    if (isNative(named))
+        return named;
+    if (slug === 'computer' || slug === 'computers')
+        return 'computer';
+    const file = /\/connector-icons\/([a-z]+)\.svg$/.exec(source.icon ?? '')?.[1];
+    return isNative(file) ? file : null;
+}
+export function resolveConnectorLogo(source) {
+    const native = nativeConnectorApp(source);
+    if (native)
+        return { kind: 'native', app: native };
+    if (source.icon)
+        return { kind: 'image', src: source.icon };
+    const domain = source.domain?.trim();
+    return domain ? { kind: 'image', src: faviconUrlForHostname(domain) } : { kind: 'none' };
+}
+/** A catalogue record (Discover) as a logo source. */
+export function discoverLogoSource(connector) {
+    return {
+        slug: connector.id ?? connector.slug,
+        nativeApp: connector.kortix?.app ?? null,
+        icon: connector.icon,
+        domain: connector.domain,
+    };
+}
+/** An installed connector (`AdminConnector`) as a logo source. */
+export function installedConnectorLogoSource(connector) {
+    return {
+        slug: connector.slug,
+        provider: connector.provider,
+        platform: connector.platform,
+        icon: connector.iconUrl,
+    };
+}

package/dist/internal/connector-logo/connector-logo.d.ts

@@ -0,0 +1,39 @@
+/** @internal Kortix apps only. No semver: it may change in any release. */
+import { type ComponentType } from 'react';
+import { type ConnectorLogoSource, type NativeConnectorApp } from './connector-logo-source.js';
+export type { ConnectorLogoSource } from './connector-logo-source.js';
+declare const TILE: {
+    readonly xs: "size-5 rounded-sm";
+    readonly sm: "size-6 rounded-sm";
+    readonly md: "size-8 rounded-md";
+    readonly lg: "size-9 rounded-md";
+    readonly xl: "size-14 rounded-xl";
+};
+export type ConnectorLogoSize = keyof typeof TILE;
+/**
+ * The marks of the Kortix-built connectors, as their channel banners draw
+ * them; brand marks keep their colours. `apps/web/public/connector-icons/<app>.svg`
+ * is this mark rendered on its tile (`connector-mark-files.tsx`), so the URL
+ * the API catalogue sends and this component are one image.
+ */
+export declare const NATIVE_MARK: Record<NativeConnectorApp, {
+    Mark: ComponentType<{
+        className?: string;
+    }>;
+    brand: boolean;
+}>;
+/**
+ * A connector's logo — the only one. Every connector, app and account surface
+ * renders this, so the same app shows the same mark everywhere
+ * (`connector-logo-source.ts` holds the rule).
+ *
+ * Kortix-built connectors and connectors with no logo draw a mark on the
+ * banner tile. A catalogue logo is the bare image: its own shape is the edge.
+ * A URL that fails to load latches per URL (a swapped URL gets a fresh try)
+ * and shows the neutral fallback, so "missing" and "broken" look identical.
+ */
+export declare function ConnectorLogo({ source, size, className, }: {
+    source: ConnectorLogoSource;
+    size?: ConnectorLogoSize;
+    className?: string;
+}): import("react").JSX.Element;