@kortix/ui 0.14.9 → 0.14.11

package/dist/internal/apps-and-extensions/apps-modal.js

@@ -0,0 +1,107 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * "Apps and extensions": every way to use Kortix outside this tab, in one
+ * dialog. Chrome first, then the computer, then the developer surfaces. Each
+ * row opens the dialog that already owns the flow (computer, MCP, Settings →
+ * Kortix in Chrome); nothing here pairs or connects by itself.
+ *
+ * It is mounted once, in the project sidebar, next to its only triggers: the
+ * workspace menu row, the sidebar row and `?apps=1`. Outside a project there is
+ * no workspace menu and no sidebar, so `?apps=1` there does nothing.
+ */
+import { useChromeConnections } from '@kortix/sdk/react';
+import { ArrowUpRightIcon, DownloadSimpleIcon, LaptopIcon, MonitorIcon, PlugsConnectedIcon, TerminalWindowIcon, } from '@phosphor-icons/react';
+import { useEffect, useId } from 'react';
+import { Button } from '../../primitives/button.js';
+import { Modal, ModalContent, ModalDescription, ModalTitle } from '../../primitives/modal.js';
+import { ChromeCopyLink, ChromeInstallActions, ChromeOnlineDot, useChromeConnect, } from '../chrome/chrome-connect.js';
+import { BrowserLogoTile } from '../chrome/browser-icon.js';
+import { ChromeMock } from '../chrome/chrome-mock.js';
+import { chromeCardState } from '../chrome/chrome-card-state.js';
+import { chromeCounts } from '../chrome/chrome-names.js';
+import { SolidCheckIcon } from '../icons/solid-check-icon.js';
+import { detectPlatform, isMobilePlatform } from '../lib/detect-os.js';
+import { useOwnsPairedComputer } from '../tunnel/computer-connect.js';
+import { errorToast } from '../../primitives/toast.js';
+import { useCopy } from '../hooks/use-copy.js';
+import { useTranslations } from '../../i18n/index.js';
+import { desktopDownloadUrl, isDesktop } from '../lib/desktop.js';
+import { useUiHostConfig, useUiPathname, useUiRouter, useUiSearchParams, } from '../../providers/ui-provider.js';
+import { useDeploymentCliInstallCommand } from '../lib/use-deployment-cli-install-command.js';
+import { useAppsModalStore } from '../stores/apps-modal-store.js';
+import { useSettingsPanelStore } from '../stores/settings-panel-store.js';
+/** Opens the dialog from `?apps=1` and removes the parameter. */
+export function useAppsDeepLink() {
+    const params = useUiSearchParams();
+    const pathname = useUiPathname();
+    const router = useUiRouter();
+    const wanted = params.get('apps') === '1';
+    useEffect(() => {
+        if (!wanted)
+            return;
+        useAppsModalStore.getState().setOpen(true);
+        const next = new URLSearchParams(params.toString());
+        next.delete('apps');
+        const query = next.toString();
+        router.replace(query ? `${pathname}?${query}` : pathname, { scroll: false });
+    }, [wanted, params, pathname, router]);
+}
+export function AppsModal({ chrome, onOpenComputer, onOpenMcp, }) {
+    const t = useTranslations('appsModal');
+    const open = useAppsModalStore((state) => state.open);
+    const setOpen = useAppsModalStore((state) => state.setOpen);
+    useAppsDeepLink();
+    // Close first, then hand over: one dialog on screen at a time.
+    const hand = (next) => () => {
+        setOpen(false);
+        next();
+    };
+    return (_jsx(Modal, { open: open, onOpenChange: setOpen, children: _jsx(ModalContent, { className: "max-h-[90dvh] space-y-0 overflow-y-auto lg:max-w-2xl", children: _jsxs("div", { className: "flex flex-col gap-6 p-5 lg:p-8", children: [_jsxs("header", { className: "space-y-1.5 pr-10", children: [_jsx(ModalTitle, { className: "text-xl font-medium text-balance", children: t('title') }), _jsx(ModalDescription, { className: "text-muted-foreground text-sm text-pretty", children: t('subtitle') })] }), open ? (_jsxs(_Fragment, { children: [chrome ? _jsx(ChromeSection, { onManage: () => setOpen(false) }) : null, _jsx(ComputerSection, { onOpenComputer: hand(onOpenComputer) }), _jsx(DevelopersSection, { onOpenMcp: hand(onOpenMcp) })] })) : null] }) }) }));
+}
+/** The hero decides from THIS browser first. Other browsers are one line plus Manage. */
+function ChromeSection({ onManage }) {
+    const t = useTranslations('appsModal.chrome');
+    const state = useChromeConnect();
+    const { environment, checking, installed, signedIn, connected } = state;
+    const connections = useChromeConnections();
+    const { count, online } = chromeCounts(connections.data ?? []);
+    const cardState = chromeCardState({
+        thisBrowserConnected: Boolean(connected),
+        environment,
+        checking,
+        installed: installed || signedIn,
+    });
+    const manage = (_jsx(Button, { size: "sm", variant: "secondary", "aria-label": t('manageLabel'), onClick: () => {
+            onManage();
+            useSettingsPanelStore.getState().openSettings('chrome');
+        }, children: t('manage') }));
+    return (_jsxs("section", { "aria-labelledby": "apps-modal-browser", className: "space-y-3", children: [_jsx("h3", { id: "apps-modal-browser", className: "text-muted-foreground text-xs font-medium", children: t('group') }), _jsxs("div", { className: "grid items-center gap-4 sm:grid-cols-2", children: [_jsxs("div", { className: "flex min-w-0 flex-col gap-4", children: [_jsxs("div", { className: "space-y-1.5", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(BrowserLogoTile, { brand: "chrome", className: "size-7", iconClassName: "size-4" }), _jsx("h4", { className: "text-base font-medium", children: t('name') })] }), _jsx("p", { className: "text-muted-foreground text-sm text-pretty", children: t('description') })] }), cardState === 'connected' && connected ? (_jsxs("div", { className: "flex flex-wrap items-center gap-x-3 gap-y-2", children: [manage, _jsxs("span", { className: "flex min-w-0 items-center gap-1.5 text-xs", children: [_jsx(ChromeOnlineDot, { online: connected.online }), _jsx("span", { className: "truncate", children: connected.name }), count > 1 ? (_jsxs("span", { className: "text-muted-foreground shrink-0", children: ["\u00B7 ", t('summary', { count, online })] })) : null] })] })) : (_jsxs(_Fragment, { children: [cardState === 'unsupported' ? (_jsxs("div", { className: "space-y-2", children: [_jsx("p", { className: "text-muted-foreground text-xs text-pretty", children: t('unsupported') }), _jsx(ChromeCopyLink, {})] })) : (_jsx(ChromeInstallActions, { state: state })), count > 0 ? (_jsxs("div", { className: "flex flex-wrap items-center gap-x-3 gap-y-2", children: [_jsx("span", { className: "text-muted-foreground text-xs", children: t('summary', { count, online }) }), manage] })) : null] }))] }), _jsx(ChromeMock, {})] })] }));
+}
+function ComputerSection({ onOpenComputer }) {
+    const t = useTranslations('appsModal.computer');
+    const { owned } = useOwnsPairedComputer();
+    const live = owned.some((machine) => machine.isLive);
+    const inShell = typeof window !== 'undefined' && isDesktop();
+    const platform = typeof navigator === 'undefined' ? null : detectPlatform(navigator.userAgent);
+    const download = platform && !isMobilePlatform(platform) ? desktopDownloadUrl(platform) : desktopDownloadUrl();
+    return (_jsxs(Group, { title: t('title'), children: [_jsx(AppRow, { icon: LaptopIcon, name: t('thisComputer'), description: live ? (_jsxs("span", { className: "flex items-center gap-1.5", children: [_jsx(ChromeOnlineDot, { online: true }), t('connected')] })) : (t('thisComputerDescription')), action: _jsx(Button, { size: "sm", variant: "secondary", "aria-label": t(live ? 'manageLabel' : 'connectLabel'), onClick: onOpenComputer, children: live ? t('manage') : t('connect') }) }), _jsx(AppRow, { icon: MonitorIcon, name: t('desktop'), description: inShell ? t('desktopRunning') : t('desktopDescription'), action: inShell ? null : (_jsx(Button, { asChild: true, size: "sm", variant: "secondary", className: "gap-1.5", children: _jsxs("a", { href: download, children: [_jsx(DownloadSimpleIcon, { className: "size-3.5 shrink-0" }), t('download')] }) })) })] }));
+}
+function DevelopersSection({ onOpenMcp }) {
+    const t = useTranslations('appsModal.developers');
+    const command = useDeploymentCliInstallCommand(useUiHostConfig().deploymentVersion);
+    const { copy, copied } = useCopy({ toast: false });
+    const copyCommand = async () => {
+        if (!(await copy(command)))
+            errorToast(t('copyFailed'));
+    };
+    return (_jsxs(Group, { title: t('title'), children: [_jsx(AppRow, { icon: TerminalWindowIcon, name: t('cli'), description: t('cliDescription'), action: _jsxs(Button, { size: "sm", variant: "secondary", className: "gap-1.5", onClick: copyCommand, children: [copied ? _jsx(SolidCheckIcon, { className: "size-3.5" }) : null, copied ? t('copied') : t('copy')] }) }), _jsx(AppRow, { icon: PlugsConnectedIcon, name: t('mcp'), description: t('mcpDescription'), action: _jsxs(Button, { size: "sm", variant: "secondary", className: "gap-1.5", "aria-label": t('connectLabel'), onClick: onOpenMcp, children: [t('connect'), _jsx(ArrowUpRightIcon, { className: "size-3.5 shrink-0" })] }) })] }));
+}
+/** A muted label over plain rows: no card, no border, one rule between rows. */
+function Group({ title, children }) {
+    const id = useId();
+    return (_jsxs("section", { "aria-labelledby": id, className: "min-w-0 space-y-1", children: [_jsx("h3", { id: id, className: "text-muted-foreground text-xs font-medium", children: title }), _jsx("ul", { className: "divide-border divide-y", children: children })] }));
+}
+function AppRow({ icon: RowIcon, name, description, action, }) {
+    return (_jsxs("li", { className: "flex items-center gap-3 py-3", children: [_jsx("span", { className: "bg-muted flex size-9 shrink-0 items-center justify-center rounded-sm", children: _jsx(RowIcon, { className: "size-5" }) }), _jsxs("div", { className: "min-w-0 flex-1 space-y-0.5", children: [_jsx("p", { className: "text-sm font-medium", children: name }), _jsx("div", { className: "text-muted-foreground line-clamp-2 text-xs text-pretty", children: description })] }), action] }));
+}

package/dist/internal/branding/branding-provider.js

@@ -90,8 +90,8 @@ const originals = new WeakMap();
  * trade-off (host-based tenancy would be the way to remove it).
  *
  * Title: Next writes `<title>` on every navigation from the route's metadata:
- * the site default (`Kortix – The open-source AI Operating System`) on
- * routes with no title of their own, `<page> | Kortix` elsewhere. A
+ * the site default (`Kortix CompanyOS – the open-source operating system for your company`) on
+ * routes with no title of their own, `<page> | Kortix CompanyOS` elsewhere. A
  * `MutationObserver` on `<head>` rewrites whatever Next just wrote, so the
  * swap survives navigation without touching every page's metadata: the site
  * default collapses to the org name alone (its tagline is Kortix's, not
@@ -190,7 +190,7 @@ function BrandingDocumentEffect({ branding }) {
             const current = document.title;
             if (!current.includes('Kortix'))
                 return;
-            const next = current === siteMetadata.title ? appName : current.replace(/\bKortix\b/g, appName);
+            const next = current === siteMetadata.title ? appName : current.replace(/\bKortix(?: CompanyOS)?\b/g, appName);
             if (next !== current)
                 document.title = next;
         };

package/dist/internal/chrome/browser-icon.d.ts

@@ -0,0 +1,24 @@
+/** @internal Kortix apps only. No semver: it may change in any release. */
+type BrowserKey = 'chrome' | 'brave' | 'arc' | 'opera' | 'vivaldi' | 'edge';
+/** Maps the API's `brand` string (Chrome, Edge, Brave, Arc, Dia, …) to a mark. Any other Chromium browser gets Chrome. */
+export declare function browserKey(brand: string | null | undefined): BrowserKey;
+/**
+ * The browser's mark. `tone="brand"` paints the official color; `tone="current"`
+ * paints `currentColor`, for the monochrome sidebar and settings rail.
+ */
+export declare function BrowserIcon({ brand, tone, className, }: {
+    brand?: string | null;
+    tone?: 'brand' | 'current';
+    className?: string;
+}): import("react").JSX.Element;
+/** The browser mark on a white tile. `className` sets the tile size and radius. */
+export declare function BrowserLogoTile({ brand, className, iconClassName, }: {
+    brand?: string | null;
+    className?: string;
+    iconClassName?: string;
+}): import("react").JSX.Element;
+/** Monochrome Chrome mark with the `Icon` call shape the settings rail expects. */
+export declare function ChromeRailIcon({ className }: {
+    className?: string;
+}): import("react").JSX.Element;
+export {};

package/dist/internal/chrome/browser-icon.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Edge } from '../icons/edge.js';
+import { cn } from '../lib/utils.js';
+/** A third-party logo tile is white in both themes (color.md). */
+const LOGO_TILE_BACKGROUND = 'bg-white';
+/**
+ * Official brand colors, from simple-icons (CC0). The SVG files in
+ * `public/browser-icons/` are the same set. Edge is not in simple-icons 13:
+ * it renders the house full-colour `Edge` mark instead.
+ */
+const CHROME_BLUE = '#4285F4';
+const BRAVE_ORANGE = '#FB542B';
+const ARC_PINK = '#FCBFBD';
+const OPERA_RED = '#FF1B2D';
+const VIVALDI_RED = '#EF3939';
+const BROWSER_BRAND_HEX = {
+    chrome: CHROME_BLUE,
+    brave: BRAVE_ORANGE,
+    arc: ARC_PINK,
+    opera: OPERA_RED,
+    vivaldi: VIVALDI_RED,
+};
+const BROWSER_KEYS = ['brave', 'arc', 'opera', 'vivaldi', 'edge', 'chrome'];
+/** Maps the API's `brand` string (Chrome, Edge, Brave, Arc, Dia, …) to a mark. Any other Chromium browser gets Chrome. */
+export function browserKey(brand) {
+    const name = (brand ?? '').toLowerCase();
+    return BROWSER_KEYS.find((key) => name.includes(key)) ?? 'chrome';
+}
+/**
+ * The browser's mark. `tone="brand"` paints the official color; `tone="current"`
+ * paints `currentColor`, for the monochrome sidebar and settings rail.
+ */
+export function BrowserIcon({ brand, tone = 'brand', className, }) {
+    const key = browserKey(brand);
+    if (key === 'edge' && tone === 'brand')
+        return _jsx(Edge, { className: className });
+    const file = key === 'edge' ? 'chrome' : key;
+    const url = `url(/browser-icons/${file}.svg)`;
+    return (_jsx("span", { "aria-hidden": "true", className: cn('inline-block size-4 shrink-0', tone === 'current' && 'bg-current', className), style: {
+            backgroundColor: tone === 'brand' && key !== 'edge' ? BROWSER_BRAND_HEX[key] : undefined,
+            maskImage: url,
+            WebkitMaskImage: url,
+            maskSize: 'contain',
+            WebkitMaskSize: 'contain',
+            maskRepeat: 'no-repeat',
+            WebkitMaskRepeat: 'no-repeat',
+            maskPosition: 'center',
+            WebkitMaskPosition: 'center',
+        } }));
+}
+/** The browser mark on a white tile. `className` sets the tile size and radius. */
+export function BrowserLogoTile({ brand, className, iconClassName, }) {
+    return (_jsx("span", { className: cn(LOGO_TILE_BACKGROUND, 'ring-border flex size-9 shrink-0 items-center justify-center rounded-sm ring-1 ring-inset', className), children: _jsx(BrowserIcon, { brand: brand, className: cn('size-5', iconClassName) }) }));
+}
+/** Monochrome Chrome mark with the `Icon` call shape the settings rail expects. */
+export function ChromeRailIcon({ className }) {
+    return _jsx(BrowserIcon, { brand: "chrome", tone: "current", className: className });
+}

package/dist/internal/chrome/chrome-card-state.d.ts

@@ -0,0 +1,16 @@
+/** @internal Kortix apps only. No semver: it may change in any release. */
+/**
+ * Which call to action the Chrome card shows. Pure, so the three states
+ * (not installed, installed, connected) are testable without a browser.
+ */
+export type ChromeCardState = 'connected' | 'unsupported' | 'checking' | 'installed' | 'notInstalled';
+export declare function chromeCardState(input: {
+    /** THIS browser is connected. Other connected browsers do not count. */
+    thisBrowserConnected: boolean;
+    /** `unsupported`: Safari, Firefox, the desktop shell. */
+    environment: 'checking' | 'supported' | 'unsupported';
+    /** The first ping has not answered yet. */
+    checking: boolean;
+    /** The extension answered a ping, or a browser connected. */
+    installed: boolean;
+}): ChromeCardState;

package/dist/internal/chrome/chrome-card-state.js

@@ -0,0 +1,9 @@
+export function chromeCardState(input) {
+    if (input.thisBrowserConnected)
+        return 'connected';
+    if (input.environment === 'unsupported')
+        return 'unsupported';
+    if (input.checking)
+        return 'checking';
+    return input.installed ? 'installed' : 'notInstalled';
+}

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

@@ -0,0 +1,69 @@
+/** @internal Kortix apps only. No semver: it may change in any release. */
+import { type ChromeConnection } from '@kortix/sdk';
+type Environment = 'checking' | 'supported' | 'unsupported';
+/**
+ * The live state of the three steps: the extension is installed (ping every
+ * 2 s), the extension is signed in, and the new browser shows in the list
+ * (poll every 3 s). Mount it only while the steps are on screen.
+ */
+export type ChromeConnectState = ReturnType<typeof useChromeConnect>;
+/**
+ * `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 declare function useChromeConnect({ fresh }?: {
+    fresh?: boolean;
+}): {
+    environment: Environment;
+    /** The first ping has not answered yet. */
+    checking: boolean;
+    installed: boolean;
+    signedIn: boolean;
+    connected: ChromeConnection | undefined;
+    connect: import("@tanstack/react-query").UseMutationResult<import("./extension.js").ExtensionConnectResult, Error, void, unknown>;
+};
+/** The Chrome mark on a small white tile, for a button label. */
+export declare function ChromeButtonMark(): import("react").JSX.Element;
+export declare function ChromeOnlineDot({ online, className }: {
+    online: boolean;
+    className?: string;
+}): import("react").JSX.Element;
+/** Copies the link that opens Settings → Kortix in Chrome, for a browser that cannot run the extension. */
+export declare function ChromeCopyLink({ size, className }: {
+    size?: 'sm' | 'lg';
+    className?: string;
+}): import("react").JSX.Element;
+/**
+ * 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 declare function ChromeInstallActions({ state, size, className, showGuide, }: {
+    state: ChromeConnectState;
+    size?: 'sm' | 'lg';
+    className?: string;
+    /** The "How to install" link. Off where the page already links the docs. */
+    showGuide?: boolean;
+}): import("react").JSX.Element | 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 declare function ChromeConnectSteps({ state, onDone, showActions, }: {
+    state: ChromeConnectState;
+    onDone?: () => void;
+    showActions?: boolean;
+}): import("react").JSX.Element;
+/**
+ * "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 declare function ChromeConnectModal({ open, onOpenChange, fresh, }: {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    fresh?: boolean;
+}): import("react").JSX.Element;
+export {};

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>;