@kortix/ui 0.0.0-stage → 0.14.4

package/dist/internal/tunnel/computer-connect.d.ts

@@ -0,0 +1,175 @@
+/** @internal Kortix apps only. No semver: it may change in any release. */
+import { type Connection } from '@kortix/sdk';
+import { type TunnelConnection } from '@kortix/sdk/react';
+import { type DesktopComputerStatus } from '../lib/desktop.js';
+/**
+ * A computer is an ACCOUNT of the project's `computer` connector: one
+ * `connector_connections` row that points at a paired machine (`tunnel_id`).
+ * Everything here reads the generic connection list; nothing keeps a second
+ * list of machines per project.
+ */
+export declare const DESKTOP_STATUS_KEY: readonly ["desktop-computer-status"];
+/** Fired after this desktop pairs: the workspace menu opens computer setup. */
+export declare const COMPUTER_SETUP_EVENT = "kortix:computer-setup";
+/** A connection that fronts a paired machine. */
+export declare function isComputerConnection(connection: Connection): boolean;
+/**
+ * A machine's name for people: its own friendly name (`machineInfo.displayName`,
+ * e.g. "Ada's MacBook Pro") until the owner picks another, and never the
+ * `.local` suffix of a raw hostname. Empty when nothing names it.
+ */
+export declare function computerDisplayName(name: string | null | undefined, machineInfo?: Record<string, unknown> | null): string;
+/** `darwin` → macOS. `null` for anything the agent did not report. */
+export declare function platformName(platform: unknown): string | null;
+/**
+ * The active computer accounts in this project the caller can use: their own
+ * (which follow them into every project) and the project-shared ones.
+ */
+export declare function projectComputerAccounts(connections: readonly Connection[] | undefined, userId: string | null | undefined): Connection[];
+export declare function useProjectComputerAccounts(projectId: string, options?: {
+    refetchInterval?: number;
+}): {
+    query: import("@tanstack/react-query").UseQueryResult<{
+        connections: Connection[];
+    }, Error>;
+    accounts: Connection[];
+    /** The project's computer connector slug, whatever an older project named it. */
+    connectorAlias: string;
+    connections: Connection[] | undefined;
+};
+/**
+ * The caller's machines as people think of them: one entry per physical
+ * computer. `computers`: registrations that name their hardware (one per
+ * hardware id, the live or most recently seen one), plus any online now.
+ * `older`: registrations from agents older than hardware ids that are offline;
+ * nothing can tell which computer they were, so they are listed apart. Both
+ * live first, then most recently seen.
+ */
+export declare function groupOwnedComputers(machines: readonly TunnelConnection[]): {
+    computers: TunnelConnection[];
+    older: TunnelConnection[];
+};
+/** True once the caller owns a paired machine, in any project. Polls once a
+ *  minute until they do: the sidebar promo mounts it for every signed-in user
+ *  and hides for good once they own one, so polling then would be waste. The
+ *  connect dialog's own 5 s observer takes over while it is open. */
+export declare function useOwnsPairedComputer(): {
+    isSuccess: boolean;
+    owns: boolean;
+    /** The machines the caller paired, the live ones first. */
+    owned: TunnelConnection[];
+};
+/**
+ * The desktop app's local tunnel agent. `null` in a browser, and on a desktop
+ * build that predates the computer commands. Resolved client-side only, so the
+ * server render and the first client render agree.
+ *
+ * Read once per mount; `poll` refreshes it every 5 s, only while the "Your
+ * computer" dialog is open. Every read asks the desktop app for its status.
+ */
+export declare function useDesktopComputer({ poll }?: {
+    poll?: boolean;
+}): import("@tanstack/react-query").UseQueryResult<DesktopComputerStatus | null, Error>;
+/**
+ * One-click pairing through the desktop app. Resolves once the service runs.
+ * `reauth` drops a stale local pairing first (see `useThisComputerState`).
+ */
+export declare function useConnectDesktopComputer(projectId: string): import("@tanstack/react-query").UseMutationResult<import("../lib/desktop.js").DesktopComputerConnectResult, Error, {
+    reauth?: boolean;
+} | undefined, unknown>;
+export type ComputerState = 'online' | 'connecting' | 'offline' | 'paused' | 'needsReconnect';
+/**
+ * One status for this machine, from both sides: the desktop service (local)
+ * and the relay heartbeat (server). The server wins when it has an answer,
+ * because it is what a cloud session sees.
+ *
+ * - `paused`: the owner paused computer access (it stays paused across a
+ *   restart). A stopped service that is not paused reads offline: the desktop
+ *   app repairs it.
+ * - `needsReconnect`: the API refused the machine's credential (`rejected`):
+ *   it was disconnected elsewhere. Connecting again pairs it afresh.
+ */
+export declare function computerState(local: DesktopComputerStatus | null | undefined, serverLive: boolean | undefined): ComputerState;
+/**
+ * This desktop's paired machine and its combined state. `null` outside the
+ * desktop app.
+ *
+ * `stale`: the desktop holds a pairing this backend does not list for the
+ * signed-in user (unpaired elsewhere, another person's, another backend's).
+ * It is treated as unpaired, and connecting again re-pairs (`reauth`).
+ */
+export declare function useThisComputerState({ poll }?: {
+    poll?: boolean;
+}): {
+    desktop: import("@tanstack/react-query").UseQueryResult<DesktopComputerStatus | null, Error>;
+    status: DesktopComputerStatus | null | undefined;
+    tunnelId: string | undefined;
+    machine: TunnelConnection | undefined;
+    /** False where the deployment has computers disabled (`/tunnel/connections` answers 503). */
+    computersEnabled: boolean;
+    stale: boolean;
+    /** When `machine` was read: "now" for time-relative display, without an impure render. */
+    readAt: number;
+    /** The desktop app can pair this machine in one click. */
+    oneClick: boolean;
+    state: ComputerState | null;
+};
+/**
+ * What the workspace menu's "Your computer" row opens, and its dot:
+ * - `this`: this desktop's own paired machine, with its own state.
+ * - `mine`: the machines the caller paired, where this machine cannot pair in
+ *   one click (a browser, or a desktop build without the agent). The dot is
+ *   online when any of them is.
+ * - `connect`: the connect dialog, when there is nothing to show yet.
+ */
+export declare function yourComputerMenu({ tunnelId, state, oneClickHere, owned, }: {
+    tunnelId?: string;
+    state?: ComputerState | null;
+    oneClickHere: boolean;
+    owned: readonly {
+        isLive: boolean;
+    }[];
+}): {
+    dialog: 'this' | 'mine' | 'connect';
+    dot: ComputerState | null;
+};
+/** Status dot, e.g. in the workspace menu, the "Your computer" dialog, account rows. */
+export declare function ComputerStateDot({ state, className, }: {
+    state: ComputerState;
+    className?: string;
+}): import("react").JSX.Element;
+/** The device glyph in a muted tile: the computer's avatar everywhere it appears. */
+export declare function ComputerGlyph({ className }: {
+    className?: string;
+}): import("react").JSX.Element;
+/**
+ * What Kortix can use on a computer. With `granted` (the capabilities the
+ * owner approved) each row says Allowed / Not allowed; without it, it is a
+ * preview. With `onChange` each row is a switch: the owner turns a capability
+ * on or off, and the next call obeys it. A capability the machine's agent
+ * does not serve (`available`) cannot be turned on.
+ */
+export declare function ComputerCapabilities({ granted, needsSetup, available, onChange, disabled, }: {
+    granted?: readonly string[];
+    /** Approved, but the macOS permission it needs is still missing (setup). */
+    needsSetup?: readonly string[];
+    /** What the machine's agent serves. Absent: everything. */
+    available?: readonly string[];
+    onChange?: (next: string[]) => void;
+    disabled?: boolean;
+}): import("react").JSX.Element;
+/**
+ * "Connect your computer": every way to pair a machine.
+ *
+ * 1. The desktop app, this machine unpaired → one click.
+ * 2. A browser → download the desktop app; the npx command is one click away.
+ *
+ * A paired machine follows its owner into every project, so there is no
+ * per-project step. Closes itself when a new computer account appears here.
+ */
+export declare function ComputerConnectModal({ projectId, open, onOpenChange, onConnected, }: {
+    projectId: string;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    onConnected?: (connection: Connection) => void;
+}): import("react").JSX.Element;

package/dist/internal/tunnel/computer-connect.js

@@ -0,0 +1,355 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { listConnections, platformConfig } from '@kortix/sdk';
+import { CursorClickIcon, FolderIcon, LaptopIcon, MonitorIcon, TerminalWindowIcon, } from '@phosphor-icons/react';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useEffect, useState } 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 { Switch } from '../../primitives/switch.js';
+import { errorToast, successToast } from '../../primitives/toast.js';
+import { Download } from '../icons/download.js';
+import { SolidCheckIcon } from '../icons/solid-check-icon.js';
+import { useUiViewerId } from '../../providers/ui-provider.js';
+import { tunnelKeys, useTunnelConnections } from '@kortix/sdk/react';
+import { useCopy } from '../hooks/use-copy.js';
+import { useTranslations } from '../../i18n/index.js';
+import { desktopComputerConnect, desktopComputerStatus, desktopDownloadUrl, isDesktop, startDownload, } from '../lib/desktop.js';
+import { cn } from '../lib/utils.js';
+import { buildTunnelConnectCommand } from './tunnel-connect-command.js';
+/**
+ * A computer is an ACCOUNT of the project's `computer` connector: one
+ * `connector_connections` row that points at a paired machine (`tunnel_id`).
+ * Everything here reads the generic connection list; nothing keeps a second
+ * list of machines per project.
+ */
+export const DESKTOP_STATUS_KEY = ['desktop-computer-status'];
+/** Fired after this desktop pairs: the workspace menu opens computer setup. */
+export const COMPUTER_SETUP_EVENT = 'kortix:computer-setup';
+/** Same key and fetcher as `ConnectionsList`, so both share one cache entry. */
+function connectionsQueryOptions(projectId) {
+    return {
+        queryKey: ['connections', projectId],
+        queryFn: () => listConnections(projectId),
+        staleTime: 30_000,
+    };
+}
+/** A connection that fronts a paired machine. */
+export function isComputerConnection(connection) {
+    return Boolean(connection.tunnel_id);
+}
+/**
+ * A machine's name for people: its own friendly name (`machineInfo.displayName`,
+ * e.g. "Ada's MacBook Pro") until the owner picks another, and never the
+ * `.local` suffix of a raw hostname. Empty when nothing names it.
+ */
+export function computerDisplayName(name, machineInfo) {
+    const own = name?.trim() ?? '';
+    const host = typeof machineInfo?.hostname === 'string' ? machineInfo.hostname : '';
+    const friendly = typeof machineInfo?.displayName === 'string' ? machineInfo.displayName.trim() : '';
+    const chosen = friendly && (!own || own === host) ? friendly : own;
+    return chosen.replace(/\.local$/i, '');
+}
+const PLATFORM_NAMES = {
+    darwin: 'macOS',
+    win32: 'Windows',
+    linux: 'Linux',
+};
+/** `darwin` → macOS. `null` for anything the agent did not report. */
+export function platformName(platform) {
+    return typeof platform === 'string' ? (PLATFORM_NAMES[platform] ?? null) : null;
+}
+/**
+ * The active computer accounts in this project the caller can use: their own
+ * (which follow them into every project) and the project-shared ones.
+ */
+export function projectComputerAccounts(connections, userId) {
+    if (!userId)
+        return [];
+    return (connections ?? []).filter((connection) => isComputerConnection(connection) &&
+        connection.status === 'active' &&
+        (connection.owner_type === 'project' ||
+            (connection.owner_type === 'member' && connection.owner_id === userId)));
+}
+export function useProjectComputerAccounts(projectId, options) {
+    const viewerId = useUiViewerId();
+    const query = useQuery({
+        ...connectionsQueryOptions(projectId),
+        refetchInterval: options?.refetchInterval,
+    });
+    const connections = query.data?.connections;
+    return {
+        query,
+        accounts: projectComputerAccounts(connections, viewerId),
+        /** The project's computer connector slug, whatever an older project named it. */
+        connectorAlias: connections?.find(isComputerConnection)?.connector_alias ?? 'computer',
+        connections,
+    };
+}
+/**
+ * The caller's machines as people think of them: one entry per physical
+ * computer. `computers`: registrations that name their hardware (one per
+ * hardware id, the live or most recently seen one), plus any online now.
+ * `older`: registrations from agents older than hardware ids that are offline;
+ * nothing can tell which computer they were, so they are listed apart. Both
+ * live first, then most recently seen.
+ */
+export function groupOwnedComputers(machines) {
+    const seen = (machine) => machine.isLive ? Number.MAX_SAFE_INTEGER : Date.parse(machine.lastHeartbeatAt ?? machine.createdAt) || 0;
+    const byRecency = [...machines].sort((a, b) => seen(b) - seen(a));
+    const hardware = (machine) => typeof machine.machineInfo?.machineId === 'string' ? machine.machineInfo.machineId : null;
+    const counted = new Set();
+    const computers = [];
+    const older = [];
+    for (const machine of byRecency) {
+        const id = hardware(machine);
+        if (id) {
+            if (!counted.has(id))
+                computers.push(machine);
+            counted.add(id);
+        }
+        else if (machine.isLive) {
+            computers.push(machine);
+        }
+        else {
+            older.push(machine);
+        }
+    }
+    return { computers, older };
+}
+/** True once the caller owns a paired machine, in any project. Polls once a
+ *  minute until they do: the sidebar promo mounts it for every signed-in user
+ *  and hides for good once they own one, so polling then would be waste. The
+ *  connect dialog's own 5 s observer takes over while it is open. */
+export function useOwnsPairedComputer() {
+    const viewerId = useUiViewerId();
+    const queryClient = useQueryClient();
+    const ownedBy = (machines) => viewerId ? (machines ?? []).filter((machine) => machine.ownerUserId === viewerId) : [];
+    const known = ownedBy(queryClient.getQueryData(tunnelKeys.connections())).length > 0;
+    const machines = useTunnelConnections({ refetchInterval: known ? false : 60_000 });
+    const owned = ownedBy(machines.data).sort((a, b) => Number(b.isLive) - Number(a.isLive));
+    return { isSuccess: machines.isSuccess, owns: owned.length > 0, owned };
+}
+/**
+ * The desktop app's local tunnel agent. `null` in a browser, and on a desktop
+ * build that predates the computer commands. Resolved client-side only, so the
+ * server render and the first client render agree.
+ *
+ * Read once per mount; `poll` refreshes it every 5 s, only while the "Your
+ * computer" dialog is open. Every read asks the desktop app for its status.
+ */
+export function useDesktopComputer({ poll = false } = {}) {
+    return useQuery({
+        queryKey: DESKTOP_STATUS_KEY,
+        queryFn: async () => (isDesktop() ? ((await desktopComputerStatus()) ?? null) : null),
+        staleTime: 10_000,
+        refetchInterval: (query) => (poll && query.state.data ? 5_000 : false),
+    });
+}
+/**
+ * One-click pairing through the desktop app. Resolves once the service runs.
+ * `reauth` drops a stale local pairing first (see `useThisComputerState`).
+ */
+export function useConnectDesktopComputer(projectId) {
+    const t = useTranslations('computers');
+    const queryClient = useQueryClient();
+    return useMutation({
+        // Never retried: a failure is usually the person closing the approval
+        // window, and a retry would open it again.
+        retry: false,
+        mutationFn: async (options) => {
+            // The desktop app derives the backend from its own instance (X6).
+            const result = await desktopComputerConnect({
+                projectId,
+                reauth: options?.reauth === true,
+            });
+            if (!result)
+                throw new Error(t('desktopUnavailable'));
+            // Closing the approval window is the person's choice, not an error.
+            if (!result.ok && result.error === 'cancelled')
+                return result;
+            if (!result.ok)
+                throw new Error(result.error || t('connectFailed'));
+            return result;
+        },
+        onSuccess: (result) => {
+            if (!result.ok)
+                return;
+            successToast(t('connected'));
+            // Setup comes next, on the spot: the "Your computer" dialog asks macOS
+            // for every permission the approved access needs.
+            window.dispatchEvent(new Event(COMPUTER_SETUP_EVENT));
+        },
+        onError: (error) => errorToast(error.message || t('connectFailed')),
+        onSettled: () => {
+            void queryClient.invalidateQueries({ queryKey: ['connections', projectId] });
+            void queryClient.invalidateQueries({ queryKey: tunnelKeys.connections() });
+            void queryClient.invalidateQueries({ queryKey: DESKTOP_STATUS_KEY });
+        },
+    });
+}
+/**
+ * One status for this machine, from both sides: the desktop service (local)
+ * and the relay heartbeat (server). The server wins when it has an answer,
+ * because it is what a cloud session sees.
+ *
+ * - `paused`: the owner paused computer access (it stays paused across a
+ *   restart). A stopped service that is not paused reads offline: the desktop
+ *   app repairs it.
+ * - `needsReconnect`: the API refused the machine's credential (`rejected`):
+ *   it was disconnected elsewhere. Connecting again pairs it afresh.
+ */
+export function computerState(local, serverLive) {
+    if (local?.paused)
+        return 'paused';
+    if (local?.state === 'rejected')
+        return 'needsReconnect';
+    if (serverLive)
+        return 'online';
+    const live = local?.state;
+    if (live === 'connecting' || live === 'online' || live === 'standby')
+        return 'connecting';
+    return 'offline';
+}
+/**
+ * This desktop's paired machine and its combined state. `null` outside the
+ * desktop app.
+ *
+ * `stale`: the desktop holds a pairing this backend does not list for the
+ * signed-in user (unpaired elsewhere, another person's, another backend's).
+ * It is treated as unpaired, and connecting again re-pairs (`reauth`).
+ */
+export function useThisComputerState({ poll = false } = {}) {
+    const desktop = useDesktopComputer({ poll });
+    const status = desktop.data;
+    const localTunnelId = status?.paired ? status.tunnelId : undefined;
+    // 5 s while open: access answered in the prompt on the machine shows here.
+    const machines = useTunnelConnections({
+        refetchInterval: poll && localTunnelId ? 5_000 : false,
+    });
+    const machine = machines.data?.find((candidate) => candidate.tunnelId === localTunnelId);
+    const stale = Boolean(localTunnelId && machines.isSuccess && !machine);
+    const tunnelId = stale ? undefined : localTunnelId;
+    return {
+        desktop,
+        status,
+        tunnelId,
+        machine,
+        /** False where the deployment has computers disabled (`/tunnel/connections` answers 503). */
+        computersEnabled: machines.isSuccess,
+        stale,
+        /** When `machine` was read: "now" for time-relative display, without an impure render. */
+        readAt: machines.dataUpdatedAt,
+        /** The desktop app can pair this machine in one click. */
+        oneClick: Boolean(status?.available && !tunnelId),
+        state: tunnelId ? computerState(status, machine?.isLive) : null,
+    };
+}
+/**
+ * What the workspace menu's "Your computer" row opens, and its dot:
+ * - `this`: this desktop's own paired machine, with its own state.
+ * - `mine`: the machines the caller paired, where this machine cannot pair in
+ *   one click (a browser, or a desktop build without the agent). The dot is
+ *   online when any of them is.
+ * - `connect`: the connect dialog, when there is nothing to show yet.
+ */
+export function yourComputerMenu({ tunnelId, state, oneClickHere, owned, }) {
+    if (tunnelId)
+        return { dialog: 'this', dot: state ?? null };
+    if (!oneClickHere && owned.length > 0) {
+        return { dialog: 'mine', dot: owned.some((machine) => machine.isLive) ? 'online' : 'offline' };
+    }
+    return { dialog: 'connect', dot: null };
+}
+/** Status dot, e.g. in the workspace menu, the "Your computer" dialog, account rows. */
+export function ComputerStateDot({ state, className, }) {
+    const t = useTranslations('computers');
+    return (_jsx("span", { role: "img", "aria-label": t(`state.${state}`), className: cn('inline-block size-2 shrink-0 rounded-full', state === 'online'
+            ? 'bg-kortix-green'
+            : state === 'needsReconnect'
+                ? 'bg-kortix-orange'
+                : 'bg-muted-foreground', state === 'paused' && 'ring-muted-foreground bg-transparent ring-1', className) }));
+}
+/** The device glyph in a muted tile: the computer's avatar everywhere it appears. */
+export function ComputerGlyph({ className }) {
+    return (_jsx("span", { className: cn('bg-muted text-foreground flex size-9 shrink-0 items-center justify-center rounded-sm', className), children: _jsx(LaptopIcon, { className: "size-5" }) }));
+}
+const CAPABILITIES = [
+    { key: 'filesystem', icon: FolderIcon },
+    { key: 'shell', icon: TerminalWindowIcon },
+    { key: 'desktop', icon: CursorClickIcon },
+];
+/**
+ * What Kortix can use on a computer. With `granted` (the capabilities the
+ * owner approved) each row says Allowed / Not allowed; without it, it is a
+ * preview. With `onChange` each row is a switch: the owner turns a capability
+ * on or off, and the next call obeys it. A capability the machine's agent
+ * does not serve (`available`) cannot be turned on.
+ */
+export function ComputerCapabilities({ granted, needsSetup, available, onChange, disabled, }) {
+    const t = useTranslations('computers');
+    return (_jsx("ul", { className: "divide-border divide-y", children: CAPABILITIES.map(({ key, icon: CapabilityIcon }) => {
+            const on = granted?.includes(key) ?? false;
+            const servable = !available || available.includes(key);
+            const allowed = on && servable && !needsSetup?.includes(key);
+            const pending = on && needsSetup?.includes(key);
+            return (_jsxs("li", { className: "flex items-center gap-3 py-3", children: [_jsx("span", { className: "bg-muted text-muted-foreground flex size-10 shrink-0 items-center justify-center rounded-sm", children: _jsx(CapabilityIcon, { className: "size-5" }) }), _jsxs("div", { className: "min-w-0 flex-1 space-y-0.5", children: [_jsx("p", { className: "text-sm font-medium", children: t(`capability.${key}`) }), _jsx("p", { className: "text-muted-foreground truncate text-xs", children: servable ? t(`capability.${key}Description`) : t('capability.notAvailable') })] }), granted && onChange ? (_jsxs("span", { className: "flex shrink-0 items-center gap-2", children: [pending ? (_jsx("span", { className: "text-muted-foreground text-xs", children: t('capability.needsSetup') })) : null, _jsx(Switch, { checked: on && servable, disabled: disabled || !servable, onCheckedChange: (next) => onChange(next ? [...granted, key] : granted.filter((capability) => capability !== key)), "aria-label": t(`capability.${key}`) })] })) : granted ? (_jsxs("span", { className: cn('flex shrink-0 items-center gap-1 text-xs', allowed ? 'text-foreground' : 'text-muted-foreground'), children: [allowed ? _jsx(SolidCheckIcon, { className: "text-kortix-green size-3.5" }) : null, allowed
+                                ? t('capability.allowed')
+                                : pending
+                                    ? t('capability.needsSetup')
+                                    : t('capability.notAllowed')] })) : null] }, key));
+        }) }));
+}
+/**
+ * "Connect your computer": every way to pair a machine.
+ *
+ * 1. The desktop app, this machine unpaired → one click.
+ * 2. A browser → download the desktop app; the npx command is one click away.
+ *
+ * A paired machine follows its owner into every project, so there is no
+ * per-project step. Closes itself when a new computer account appears here.
+ */
+export function ComputerConnectModal({ projectId, open, onOpenChange, onConnected, }) {
+    const t = useTranslations('computers');
+    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(LaptopIcon, { className: "size-4 shrink-0" }), t('localComputerTitle')] })] }), _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('connectDescription') })] }), open ? (_jsx(ComputerConnectOptions, { projectId: projectId, onConnected: (connection) => {
+                                    onConnected?.(connection);
+                                    onOpenChange(false);
+                                } })) : null] })] }) }) }));
+}
+function ComputerConnectOptions({ projectId, onConnected, }) {
+    const t = useTranslations('computers');
+    // Polls while open: pairing finishes on another page (the approval page) or
+    // in the desktop app, and this dialog closes itself when the account lands.
+    const { query, accounts } = useProjectComputerAccounts(projectId, { refetchInterval: 5_000 });
+    const { desktop, oneClick, stale } = useThisComputerState();
+    const connectDesktop = useConnectDesktopComputer(projectId);
+    // The accounts that existed when the dialog opened. Adjusted during render:
+    // the first loaded list is the baseline, and a later new one is the result.
+    const [baseline, setBaseline] = useState(null);
+    if (baseline === null && query.isSuccess) {
+        setBaseline(new Set(accounts.map((account) => account.connection_id)));
+    }
+    const added = baseline
+        ? accounts.find((account) => !baseline.has(account.connection_id))
+        : undefined;
+    const addedId = added?.connection_id;
+    useEffect(() => {
+        if (added)
+            onConnected(added);
+        // Once per new account; `added` is a fresh object on every poll.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [addedId]);
+    const inBrowser = desktop.isSuccess && !desktop.data && !isDesktop();
+    // The CLI fallback is one click: it copies the pairing command. The command
+    // prints its own instructions when it runs.
+    // The button itself confirms the copy; no toast.
+    const { copied, copy } = useCopy({ toast: false });
+    const copyCliCommand = () => copy(buildTunnelConnectCommand({
+        backendUrl: platformConfig().backendUrl || '',
+        origin: window.location.origin,
+        projectId,
+    }));
+    return (_jsxs(_Fragment, { children: [_jsx(ComputerCapabilities, {}), _jsxs("div", { className: "mt-auto space-y-2", children: [oneClick ? (_jsxs(Button, { size: "lg", className: "w-full", disabled: connectDesktop.isPending, onClick: () => connectDesktop.mutate({ reauth: stale }), children: [connectDesktop.isPending ? (_jsx(Loading, { className: "size-4 shrink-0" })) : (_jsx(MonitorIcon, { className: "size-4 shrink-0" })), connectDesktop.isPending ? t('connecting') : t('connectThisComputer')] })) : null, inBrowser ? (_jsxs(Button, { size: "lg", className: "w-full", onClick: () => startDownload(desktopDownloadUrl()), children: [_jsx(Download, { className: "shrink-0" }), t('downloadDesktop')] })) : null, oneClick || inBrowser ? (_jsx("div", { className: "flex justify-center", children: _jsxs(Button, { variant: "ghost", size: "sm", className: "text-muted-foreground gap-1.5", onClick: copyCliCommand, children: [copied ? _jsx(SolidCheckIcon, {}) : _jsx(TerminalWindowIcon, { className: "size-3.5 shrink-0" }), copied ? t('commandCopied') : t('copyCliCommand')] }) })) : (_jsxs(Button, { variant: "secondary", size: "lg", className: "w-full", onClick: copyCliCommand, children: [copied ? _jsx(SolidCheckIcon, {}) : null, copied ? t('commandCopied') : t('copyCliCommand')] }))] })] }));
+}

package/dist/internal/tunnel/tunnel-connect-command.d.ts

@@ -0,0 +1,23 @@
+/** @internal Kortix apps only. No semver: it may change in any release. */
+type BackendUrlArgs = {
+    backendUrl: string;
+    origin: string;
+};
+/**
+ * The absolute Kortix API root (`.../v1`). `BACKEND_URL` may be root-relative
+ * (`/v1`) behind a same-origin proxy; the local agent runs outside the browser,
+ * so it needs the origin spelled out.
+ */
+export declare function absoluteBackendUrl({ backendUrl, origin }: BackendUrlArgs): string;
+/**
+ * The pairing command for a browser without the desktop app.
+ *
+ * The local agent appends its own endpoint paths under `--api-url`, so the value
+ * must point at the absolute tunnel API root: `.../v1/tunnel`. `--project-id`
+ * lets the approval page offer "Also share with <project>"; the machine is its
+ * owner's in every project either way. Agents that predate the flag ignore it.
+ */
+export declare function buildTunnelConnectCommand({ backendUrl, origin, projectId, }: BackendUrlArgs & {
+    projectId?: string;
+}): string;
+export {};

package/dist/internal/tunnel/tunnel-connect-command.js

@@ -0,0 +1,23 @@
+import { stripTrailingSlashes } from '@kortix/sdk';
+/**
+ * The absolute Kortix API root (`.../v1`). `BACKEND_URL` may be root-relative
+ * (`/v1`) behind a same-origin proxy; the local agent runs outside the browser,
+ * so it needs the origin spelled out.
+ */
+export function absoluteBackendUrl({ backendUrl, origin }) {
+    const backend = stripTrailingSlashes(backendUrl);
+    return /^https?:\/\//i.test(backend) ? backend : `${origin}${backend}`;
+}
+/**
+ * The pairing command for a browser without the desktop app.
+ *
+ * The local agent appends its own endpoint paths under `--api-url`, so the value
+ * must point at the absolute tunnel API root: `.../v1/tunnel`. `--project-id`
+ * lets the approval page offer "Also share with <project>"; the machine is its
+ * owner's in every project either way. Agents that predate the flag ignore it.
+ */
+export function buildTunnelConnectCommand({ backendUrl, origin, projectId, }) {
+    const apiUrl = `${absoluteBackendUrl({ backendUrl, origin })}/tunnel`;
+    const project = projectId ? ` --project-id ${projectId}` : '';
+    return `npx --yes @kortix/agent-tunnel@latest connect --api-url ${apiUrl}${project}`;
+}