@kortix/ui 0.14.9 → 0.14.10

package/dist/customize/sections/view/channels-view.js

@@ -108,6 +108,7 @@ import { useEffect, useMemo, useState } from 'react';
 import { useTunnelConnections } from '@kortix/sdk/react';
 import { ComputerHero } from '../../connectors/detail/computer-app-page.js';
 import { FeatureGateScreen } from '../../shared/feature-gate-screen.js';
+import { CHANNEL_PLATFORM_IDS, CHANNELS, isChannelPlatform, } from '../../../_vendor/kortix-shared.js';
 export function ChannelsSection({ projectId, platform }) {
     const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
     useTeamsInstallReturnToast();
@@ -137,7 +138,7 @@ export function ChannelsSection({ projectId, platform }) {
     // platform, the Channels tab every platform, one under the other.
     const platforms = platform
         ? [platform]
-        : ['slack', 'teams', ...(emailEnabled ? ['email'] : []), 'telegram'];
+        : CHANNEL_PLATFORM_IDS.filter((pf) => pf !== 'email' || emailEnabled);
     // The Kortix tab also holds the computer, where this deployment can pair one
     // (the machine list answers 503 where computers are off).
     const computersEnabled = useTunnelConnections({ refetchInterval: false }).isSuccess;
@@ -153,6 +154,11 @@ export function ChannelsSection({ projectId, platform }) {
                 return _jsx(EmailHero, { projectId: projectId, canWrite: canWrite });
             case 'telegram':
                 return _jsx(TelegramChannelRow, { projectId: projectId, canWrite: canWrite });
+            default: {
+                // A new channel id fails here until it has a hero.
+                const _exhaustive = pf;
+                return _exhaustive;
+            }
         }
     };
     // The Email page with the flag off: the standard flag-off screen, with its enable action.
@@ -190,14 +196,15 @@ function ChannelsButton({ count, onOpen }) {
 }
 /**
  * What follows a connected Slack before its first channel: the one-time "now
- * do this in Slack" nudge. It retires itself as soon as `bindings.length > 0`:
- * a bound channel is proof the user already invited the bot and mentioned it,
+ * do this in Slack" nudge. It retires itself as soon as a Slack channel is
+ * bound: that is proof the user already invited the bot and mentioned it,
  * and from then on the Slack row's "N channels" opens the bindings dialog.
+ * Another platform's row (a Telegram chat's `/model`) proves nothing about Slack.
  */
 function SlackFollowUp({ projectId }) {
     const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
     const bindingsQuery = useChannelBindings(projectId);
-    const bindings = bindingsQuery.data?.bindings ?? [];
+    const bindings = (bindingsQuery.data?.bindings ?? []).filter((b) => b.platform === 'slack');
     return bindings.length === 0 && !bindingsQuery.isLoading ? (_jsxs(InfoBanner, { tone: "neutral", icon: AtIcon, title: tI18nComplete.raw('textd63af8edd3d6'), children: [tI18nComplete.raw('text1fd9ae1607aa'), ' ', _jsx("span", { className: "text-foreground font-medium", children: tI18nComplete.raw('text476b90bdc143') }), ' ', tI18nComplete.raw('textb81b729b4538')] })) : null;
 }
 /**
@@ -249,7 +256,7 @@ function ChannelBindingsDialog({ projectId, canWrite, platform, open, onOpenChan
     return (_jsx(Modal, { open: open, onOpenChange: onOpenChange, children: selected ? (_jsx(ChannelSettingsModalContent, { projectId: projectId, binding: selected.binding, name: selected.name, scope: selected.scope, projectDefaultAgent: projectDefaultAgent, canWrite: canWrite, onBack: back })) : (_jsxs(ModalContent, { className: "lg:max-w-lg", children: [_jsxs(ModalHeader, { children: [_jsx(ModalTitle, { children: tI18nComplete.raw('text5f61b63c2c4a') }), _jsx(ModalDescription, { children: tI18nComplete.raw('text1f2550ed44dc') })] }), _jsxs(ModalBody, { className: "space-y-3 pt-4", children: [tabs.length > 1 ? (_jsx(Tabs, { value: active, onValueChange: (value) => {
                                 setTab(value);
                                 setQuery('');
-                            }, children: _jsx(TabsListCompact, { children: tabs.map((t) => (_jsxs(TabsTriggerCompact, { value: t.platform, className: "gap-1.5", children: [PLATFORM_NAMES[t.platform] ?? t.platform, _jsx("span", { className: "text-muted-foreground tabular-nums", children: t.count })] }, t.platform))) }) })) : null, inTab.length >= BINDING_SEARCH_MIN ? (_jsxs(InputGroupSearch, { children: [_jsx(InputGroupSearchIcon, { children: _jsx(MagnifyingGlassIcon, {}) }), _jsx(InputGroupSearchInput, { placeholder: tI18nComplete.raw('text49c266baaaa7'), value: query, onChange: (e) => setQuery(e.target.value), size: "sm" }), _jsx(InputGroupSearchClear, { onClick: () => setQuery('') })] })) : null, bindingsQuery.isLoading ? (_jsxs("div", { className: "space-y-2", children: [_jsx(Skeleton, { className: "h-12 rounded-md" }), _jsx(Skeleton, { className: "h-12 rounded-md" })] })) : visible.length === 0 ? (_jsx("p", { className: "text-muted-foreground px-3 py-6 text-center text-xs", children: tI18nComplete.raw('texte8dd87902b91') })) : (
+                            }, children: _jsx(TabsListCompact, { children: tabs.map((t) => (_jsxs(TabsTriggerCompact, { value: t.platform, className: "gap-1.5", children: [isChannelPlatform(t.platform) ? CHANNELS[t.platform].label : t.platform, _jsx("span", { className: "text-muted-foreground tabular-nums", children: t.count })] }, t.platform))) }) })) : null, inTab.length >= BINDING_SEARCH_MIN ? (_jsxs(InputGroupSearch, { children: [_jsx(InputGroupSearchIcon, { children: _jsx(MagnifyingGlassIcon, {}) }), _jsx(InputGroupSearchInput, { placeholder: tI18nComplete.raw('text49c266baaaa7'), value: query, onChange: (e) => setQuery(e.target.value), size: "sm" }), _jsx(InputGroupSearchClear, { onClick: () => setQuery('') })] })) : null, bindingsQuery.isLoading ? (_jsxs("div", { className: "space-y-2", children: [_jsx(Skeleton, { className: "h-12 rounded-md" }), _jsx(Skeleton, { className: "h-12 rounded-md" })] })) : visible.length === 0 ? (_jsx("p", { className: "text-muted-foreground px-3 py-6 text-center text-xs", children: tI18nComplete.raw('texte8dd87902b91') })) : (
                         // The list scrolls; the tabs and search above it stay put. Capped at
                         // the viewport less ~21rem of header, tabs, search and footer, so
                         // the footer stays on screen at the 720 × 480 desktop minimum,
@@ -262,8 +269,6 @@ function ChannelBindingsDialog({ projectId, canWrite, platform, open, onOpenChan
                                     _jsx(BindingOverrides, { binding: binding, policies: conversationPolicies }, "overrides"),
                                 ], onClick: () => setSelectedId(binding.bindingId) }, binding.bindingId))) }))] }), _jsx(ModalFooter, { className: "pt-2 pb-5", children: _jsx(Button, { type: "button", variant: "outline-ghost", onClick: () => onOpenChange(false), children: tI18nComplete.raw('text11a6767d5674') }) })] })) }));
 }
-/** Brand names, as the platform rows spell them. */
-const PLATFORM_NAMES = { slack: 'Slack', teams: 'Microsoft Teams' };
 /** A row's settings at a glance: only what overrides the project, else "Project default". */
 function BindingOverrides({ binding, policies, }) {
     const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');

package/dist/customize/settings/rail.js

@@ -1,5 +1,6 @@
 import { ArrowCircleUpIcon as ArrowUpCircle, ChatCircleIcon as ChatCircle, CoinsIcon as Coins, ShippingContainerIcon as Container, CreditCardIcon as CreditCard, FlaskIcon as Flask, KeyIcon as Key, LaptopIcon as Laptop, LinkIcon as Link, PaletteIcon as Palette, ShieldCheckIcon as ShieldCheck, SlidersHorizontalIcon as SlidersHorizontal, SquaresFourIcon as SquaresFour, UserIcon as User, } from '@phosphor-icons/react';
 import { Mcp } from '../../internal/icons/mcp.js';
+import { ChromeRailIcon } from '../../internal/chrome/browser-icon.js';
 /**
  * Whether a rail item is the active one for the current settings tab.
  *
@@ -64,6 +65,14 @@ const STATIC_GROUPS = [
                 description: 'Language and keyboard shortcuts.',
                 icon: SlidersHorizontal,
             },
+            {
+                tab: 'chrome',
+                label: 'Kortix in Chrome',
+                description: 'Your sessions use Chrome with your logins. You see every step.',
+                docsHref: '/docs/connect/chrome',
+                // Monochrome like its neighbours; `ChromeRailIcon` takes only `className`.
+                icon: ChromeRailIcon,
+            },
             // Labelled "API keys", routed at `/settings/tokens`. The id has to be
             // `tokens` — it is the URL segment, and the account page already spends
             // `api-keys` on a legacy redirect (`RENAMED` in `settings-tabs.ts`) —

package/dist/customize/settings/settings-tabs.d.ts

@@ -1,4 +1,4 @@
-export type SettingsTab = 'profile' | 'security' | 'appearance' | 'sessions' | 'preferences' | 'connected' | 'tokens' | 'plan' | 'credits' | 'workspace' | 'sandbox' | 'feature-flags' | 'upgrades' | 'mcp' | 'computer';
+export type SettingsTab = 'profile' | 'security' | 'appearance' | 'sessions' | 'preferences' | 'connected' | 'chrome' | 'tokens' | 'plan' | 'credits' | 'workspace' | 'sandbox' | 'feature-flags' | 'upgrades' | 'mcp' | 'computer';
 /**
  * The default must be a tab that survives every gate, or the overlay opens on
  * nothing. It was `general` until project configuration moved to

package/dist/customize/settings/settings-tabs.js

@@ -54,6 +54,7 @@ export const SETTINGS_TABS = [
     'appearance',
     'sessions',
     'preferences',
+    'chrome',
     'tokens',
     'mcp',
     'computer',

package/dist/customize/settings/tabs/chrome-connections-tab.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Settings → Kortix in Chrome: the browsers this person connected with the
+ * Kortix extension. With none, the three connect steps stand inline and the
+ * connect action sits in the page header.
+ */
+export declare function ChromeConnectionsTab(): import("react").JSX.Element;

package/dist/customize/settings/tabs/chrome-connections-tab.js

@@ -0,0 +1,99 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useChromeConnections, useDeleteChromeConnection, useUpdateChromeConnection } from '@kortix/sdk/react';
+import { PencilSimpleIcon } from '@phosphor-icons/react';
+import { useState } from 'react';
+import { Button } from '../../../primitives/button.js';
+import { ConfirmDialog } from '../../../primitives/confirm-dialog.js';
+import { InlineMeta } from '../../../primitives/inline-meta.js';
+import { Input } from '../../../primitives/input.js';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '../../../primitives/select.js';
+import { SettingsRow, SettingsRowGroup } from '../../../primitives/settings-row.js';
+import { SettingsSubsectionHeader } from '../../../primitives/settings-subsection-header.js';
+import { Skeleton } from '../../../primitives/skeleton.js';
+import { errorToast, successToast } from '../../../primitives/toast.js';
+import { ErrorState } from '../../../primitives/error-state.js';
+import { SettingsTabHeader } from '../settings-tab-header.js';
+import { useLocale, useTranslations } from '../../../i18n/index.js';
+import { relativeTime } from '../../../internal/lib/relative-time.js';
+import { ChromeButtonMark, ChromeConnectModal, ChromeConnectSteps, ChromeCopyLink, ChromeInstallActions, ChromeOnlineDot, useChromeConnect, } from '../../../internal/chrome/chrome-connect.js';
+import { BrowserLogoTile } from '../../../internal/chrome/browser-icon.js';
+import { chromeDisplayNames, offlineLongerThan } from '../../../internal/chrome/chrome-names.js';
+import { ChromeMock } from '../../../internal/chrome/chrome-mock.js';
+const ACCESS_MODES = ['always', 'ask', 'off'];
+// `all` first: it is the recommended default.
+const TAB_SCOPES = ['all', 'own'];
+/** Offline longer than this shows when the browser was last seen. Shorter is just "Offline". */
+const LAST_SEEN_AFTER_MS = 10 * 60_000;
+/**
+ * Settings → Kortix in Chrome: the browsers this person connected with the
+ * Kortix extension. With none, the three connect steps stand inline and the
+ * connect action sits in the page header.
+ */
+export function ChromeConnectionsTab() {
+    const t = useTranslations('chrome');
+    const connections = useChromeConnections();
+    const [connectOpen, setConnectOpen] = useState(false);
+    const list = connections.data ?? [];
+    if (connections.isSuccess && list.length === 0)
+        return _jsx(ChromeEmptyTab, {});
+    const names = chromeDisplayNames(list);
+    return (
+    // `max-w-2xl`: the form tier every person-scoped pane in this dialog uses.
+    _jsxs("div", { className: "mx-auto w-full max-w-2xl space-y-5", children: [_jsx(SettingsTabHeader, { tab: "chrome", action: list.length > 0 ? (_jsxs(Button, { size: "sm", variant: "secondary", className: "gap-1.5", onClick: () => setConnectOpen(true), children: [_jsx(ChromeButtonMark, {}), t('connectAnother')] })) : undefined }), connections.isPending ? (_jsx("div", { className: "space-y-2", children: _jsx(Skeleton, { className: "h-24 rounded-md" }) })) : connections.isError ? (_jsx(ErrorState, { size: "sm", title: t('loadFailed'), action: _jsx(Button, { variant: "outline", size: "sm", onClick: () => connections.refetch(), children: t('retry') }) })) : (_jsxs(_Fragment, { children: [_jsxs("section", { className: "space-y-3", children: [_jsx(SettingsSubsectionHeader, { title: t('listTitle') }), _jsx("ul", { className: "space-y-3", children: list.map((chrome) => (_jsx(ChromeRow, { chrome: chrome, displayName: names.get(chrome.id) ?? chrome.name }, chrome.id))) })] }), _jsxs("section", { className: "space-y-2", children: [_jsx(SettingsSubsectionHeader, { title: t('how.title') }), _jsxs("ul", { className: "text-muted-foreground list-disc space-y-1 pl-5 text-sm text-pretty", children: [_jsx("li", { children: t('how.group') }), _jsx("li", { children: t('how.control') }), _jsx("li", { children: t('how.own') })] })] })] })), _jsx(ChromeConnectModal, { open: connectOpen, onOpenChange: setConnectOpen, fresh: true })] }));
+}
+/** No browser yet: the steps stand inline, the one action is in the header. */
+function ChromeEmptyTab() {
+    const state = useChromeConnect();
+    return (_jsxs("div", { className: "mx-auto w-full max-w-2xl space-y-5", children: [_jsx(SettingsTabHeader, { tab: "chrome", action: state.environment === 'unsupported' ? (_jsx(ChromeCopyLink, {})) : (_jsx(ChromeInstallActions, { state: state, showGuide: false })) }), _jsxs("div", { className: "space-y-4", children: [_jsx(ChromeMock, { className: "mx-auto max-w-md" }), _jsx("div", { className: "bg-popover flex flex-col gap-5 rounded-md border px-4 py-5", children: _jsx(ChromeConnectSteps, { state: state, showActions: false }) })] })] }));
+}
+/** "Chromium on macOS · Work · v1.0.0": what tells two browsers apart. The name is not repeated. */
+function chromeMeta(chrome, displayName) {
+    // The profile label already sits in the display name of a duplicate: say it once.
+    const profile = chrome.profileLabel && !displayName.includes(chrome.profileLabel) ? chrome.profileLabel : null;
+    return [profile, chrome.extensionVersion ? `v${chrome.extensionVersion}` : null].filter((part) => Boolean(part));
+}
+function ChromeRow({ chrome, displayName }) {
+    const t = useTranslations('chrome');
+    const locale = useLocale();
+    const update = useUpdateChromeConnection();
+    const remove = useDeleteChromeConnection();
+    const [confirmOpen, setConfirmOpen] = useState(false);
+    const [draft, setDraft] = useState(null);
+    const save = (change) => update.mutate({ id: chrome.id, ...change }, { onError: () => errorToast(t('updateFailed')) });
+    const commitName = () => {
+        const name = draft?.trim();
+        // An empty name is not a name: keep the field open and flag it. Blur reverts.
+        if (!name)
+            return false;
+        setDraft(null);
+        if (name !== chrome.name)
+            save({ name });
+        return true;
+    };
+    const sessions = chrome.activeSessions.length;
+    // "Last seen just now" beside "Offline" contradicts itself: say it only once it is a while ago.
+    const longOffline = !chrome.online && offlineLongerThan(chrome.lastSeenAt, LAST_SEEN_AFTER_MS);
+    const status = chrome.online
+        ? t('online')
+        : longOffline
+            ? t('lastSeen', { time: relativeTime(chrome.lastSeenAt, locale) })
+            : t('offline');
+    const meta = [...chromeMeta(chrome, displayName), status];
+    return (_jsxs("li", { children: [_jsxs(SettingsRowGroup, { children: [_jsxs("div", { className: "flex items-center gap-3 px-4 py-3", children: [_jsx(BrowserLogoTile, { brand: chrome.brand }), _jsxs("div", { className: "min-w-0 flex-1 space-y-0.5", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(ChromeOnlineDot, { online: chrome.online }), draft === null ? (_jsxs("button", { type: "button", "aria-label": t('rename', { name: displayName }), title: displayName, className: "focus-visible:ring-ring/50 -mx-1 flex min-w-0 items-center gap-1.5 rounded-sm px-1 text-left outline-none focus-visible:ring-3", onClick: () => setDraft(chrome.name), children: [_jsx("span", { className: "truncate text-sm font-medium", children: displayName }), _jsx(PencilSimpleIcon, { className: "text-muted-foreground size-3.5 shrink-0" })] })) : (_jsx(Input, { autoFocus: true, value: draft, maxLength: 255, "aria-label": t('renameLabel'), className: "h-6 py-0", "aria-invalid": draft.trim() === '' ? true : undefined, onChange: (event) => setDraft(event.target.value), onBlur: () => {
+                                                    if (!commitName())
+                                                        setDraft(null);
+                                                }, onKeyDown: (event) => {
+                                                    if (event.key === 'Enter')
+                                                        commitName();
+                                                    // Closes the field only. The settings dialog ignores Escape from a text field.
+                                                    if (event.key === 'Escape')
+                                                        setDraft(null);
+                                                } }))] }), _jsxs(InlineMeta, { children: [meta, sessions > 0 ? t('usedBy', { count: sessions }) : ''] })] }), _jsx(Button, { variant: "ghost", size: "sm", onClick: () => setConfirmOpen(true), children: t('disconnect') })] }), _jsx(SettingsRow, { label: t('access.label'), description: t('access.description'), children: _jsxs(Select, { value: chrome.accessMode, disabled: update.isPending, onValueChange: (value) => save({ accessMode: value }), children: [_jsx(SelectTrigger, { size: "sm", className: "w-44", "aria-label": t('access.label'), children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: ACCESS_MODES.map((mode) => (_jsx(SelectItem, { value: mode, children: t(`access.${mode}`) }, mode))) })] }) }), _jsx(SettingsRow, { label: t('scope.label'), description: t('scope.description'), children: _jsxs(Select, { value: chrome.tabScope, disabled: update.isPending, onValueChange: (value) => save({ tabScope: value }), children: [_jsx(SelectTrigger, { size: "sm", className: "w-44", "aria-label": t('scope.label'), children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: TAB_SCOPES.map((scope) => (_jsx(SelectItem, { value: scope, children: t(`scope.${scope}`) }, scope))) })] }) })] }), _jsx(ConfirmDialog, { open: confirmOpen, onOpenChange: setConfirmOpen, title: t('disconnectTitle', { name: displayName }), description: _jsxs(_Fragment, { children: [_jsx("span", { className: "text-muted-foreground mb-2 block text-xs", children: meta.join(' · ') }), t('disconnectDescription')] }), confirmLabel: t('disconnect'), confirmVariant: "destructive", isPending: remove.isPending, onConfirm: () => remove.mutate(chrome.id, {
+                    onSuccess: () => {
+                        setConfirmOpen(false);
+                        successToast(t('disconnected'));
+                    },
+                    onError: () => errorToast(t('disconnectFailed')),
+                }) })] }));
+}

package/dist/customize/shared/catalog/catalog-empty-state.d.ts

@@ -1,8 +1,8 @@
 import type { ReactNode } from 'react';
 /**
- * The "nothing here" line every catalog uses, so five hand-typed copies of one
- * class string cannot drift into five different-looking messages. `CatalogGrid`
- * owns loading/error/empty; this is what callers put IN the empty slot when the
+ * The "nothing here" state every catalog uses: the shared `EmptyState`, so a
+ * catalog's empty slot looks like every other empty view. `CatalogGrid` owns
+ * loading/error/empty; this is what callers put IN the empty slot when the
  * cause is the search box rather than an empty project.
  */
 export declare function CatalogEmptyNote({ children }: {

package/dist/customize/shared/catalog/catalog-empty-state.js

@@ -1,13 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MagnifyingGlassIcon } from '@phosphor-icons/react';
 import { useTranslations } from '../../../i18n/index.js';
+import { EmptyState } from '../../../primitives/empty-state.js';
 /**
- * The "nothing here" line every catalog uses, so five hand-typed copies of one
- * class string cannot drift into five different-looking messages. `CatalogGrid`
- * owns loading/error/empty; this is what callers put IN the empty slot when the
+ * The "nothing here" state every catalog uses: the shared `EmptyState`, so a
+ * catalog's empty slot looks like every other empty view. `CatalogGrid` owns
+ * loading/error/empty; this is what callers put IN the empty slot when the
  * cause is the search box rather than an empty project.
  */
 export function CatalogEmptyNote({ children }) {
-    return _jsx("p", { className: "text-muted-foreground px-3 py-6 text-center text-xs", children: children });
+    return _jsx(EmptyState, { size: "sm", icon: MagnifyingGlassIcon, title: children });
 }
 /**
  * "No matches for `<query>`."

package/dist/files/renderers/image-frame.d.ts

@@ -27,6 +27,8 @@ export interface ImageFrameProps {
     naturalRatio?: string | null;
     /** Reports the image's natural size once it decoded. */
     onNaturalSize?: (width: number, height: number) => void;
+    /** Drawn over the frame's own box (an overlay on the image's corner), which narrows with `maxHeight`. */
+    children?: ReactNode;
 }
 /**
  * The box an image takes before, while and after it exists: a flat `bg-muted`
@@ -35,7 +37,7 @@ export interface ImageFrameProps {
  * The frame itself never moves: the busy signal is the label (one waiting
  * channel, kortix-brand `layout.md` States).
  */
-export declare function ImageFrame({ aspectRatio, src, alt, pending, label, onOpen, className, fill, maxHeight, openLabel, naturalRatio, onNaturalSize, }: ImageFrameProps): import("react").JSX.Element;
+export declare function ImageFrame({ aspectRatio, src, alt, pending, label, onOpen, className, fill, maxHeight, openLabel, naturalRatio, onNaturalSize, children, }: ImageFrameProps): import("react").JSX.Element;
 /**
  * An image whose file could not be read: "Image unavailable" and Try again,
  * centered in the frame. Never the read's own error text (R38): that is

package/dist/files/renderers/image-frame.js

@@ -16,7 +16,7 @@ function ratioValue(ratio) {
  * The frame itself never moves: the busy signal is the label (one waiting
  * channel, kortix-brand `layout.md` States).
  */
-export function ImageFrame({ aspectRatio, src, alt, pending, label, onOpen, className, fill = false, maxHeight, openLabel, naturalRatio = null, onNaturalSize, }) {
+export function ImageFrame({ aspectRatio, src, alt, pending, label, onOpen, className, fill = false, maxHeight, openLabel, naturalRatio = null, onNaturalSize, children, }) {
     const img = useRef(null);
     const [loaded, setLoaded] = useState(false);
     const [natural, setNatural] = useState(naturalRatio);
@@ -46,7 +46,7 @@ export function ImageFrame({ aspectRatio, src, alt, pending, label, onOpen, clas
             : {
                 aspectRatio: natural ?? aspectRatio,
                 ...(maxHeight && { width: `min(100%, calc(${maxHeight} * ${ratioValue(natural ?? aspectRatio)}))` }),
-            }, children: [image && onOpen ? (_jsx("button", { type: "button", onClick: onOpen, "aria-label": openLabel ?? alt, className: "focus-visible:ring-kortix-base block size-full cursor-zoom-in rounded-md focus-visible:ring-2 focus-visible:outline-none focus-visible:ring-inset", children: image })) : (image), label ? (_jsx("div", { className: "absolute inset-0 flex items-center justify-center p-4 text-center", children: label })) : null] }));
+            }, children: [image && onOpen ? (_jsx("button", { type: "button", onClick: onOpen, "aria-label": openLabel ?? alt, className: "focus-visible:ring-kortix-base block size-full cursor-zoom-in rounded-md focus-visible:ring-2 focus-visible:outline-none focus-visible:ring-inset", children: image })) : (image), label ? (_jsx("div", { className: "absolute inset-0 flex items-center justify-center p-4 text-center", children: label })) : null, children] }));
 }
 /**
  * An image whose file could not be read: "Image unavailable" and Try again,

package/dist/i18n/en.d.ts

@@ -371,6 +371,10 @@ declare const catalog: {
                 connected: {
                     label: string;
                 };
+                chrome: {
+                    label: string;
+                    description: string;
+                };
                 tokens: {
                     label: string;
                     description: string;
@@ -835,6 +839,14 @@ declare const catalog: {
                     name: string;
                     description: string;
                 };
+                artifact_comments: {
+                    name: string;
+                    description: string;
+                };
+                chrome: {
+                    name: string;
+                    description: string;
+                };
             };
             channelsSwitch: {
                 onTitle: string;
@@ -1161,6 +1173,7 @@ declare const catalog: {
             loadError: string;
             createIn: string;
             localComputer: string;
+            appsAndExtensions: string;
         };
         manifestUpgrade: {
             title: string;
@@ -1772,6 +1785,13 @@ declare const catalog: {
                 unexpected: string;
             };
         };
+        panel: {
+            waitingTitle: string;
+            waitingBody: string;
+            errorTitle: string;
+            errorBody: string;
+            signIn: string;
+        };
     };
     tools: {
         executeCommand: string;
@@ -6777,6 +6797,127 @@ declare const catalog: {
         calendarEstimatedSr: string;
         calendarUpcomingSr: string;
     };
+    chrome: {
+        pill: string;
+        connectTitle: string;
+        connectDescription: string;
+        promoLabel: string;
+        dismissPromo: string;
+        steps: {
+            install: {
+                title: string;
+                description: string;
+                done: string;
+                descriptionUnlisted: string;
+            };
+            connect: {
+                title: string;
+                description: string;
+                done: string;
+            };
+            done: {
+                title: string;
+                description: string;
+            };
+        };
+        addToChrome: string;
+        finishInChrome: string;
+        connect: string;
+        connecting: string;
+        done: string;
+        unsupported: string;
+        connectFailed: string;
+        online: string;
+        offline: string;
+        lastSeen: string;
+        usedBy: string;
+        connectAnother: string;
+        listTitle: string;
+        rename: string;
+        renameLabel: string;
+        disconnect: string;
+        disconnectTitle: string;
+        disconnectDescription: string;
+        disconnected: string;
+        disconnectFailed: string;
+        updateFailed: string;
+        loadFailed: string;
+        retry: string;
+        access: {
+            label: string;
+            always: string;
+            ask: string;
+            off: string;
+            description: string;
+        };
+        scope: {
+            label: string;
+            own: string;
+            all: string;
+            description: string;
+        };
+        how: {
+            title: string;
+            group: string;
+            control: string;
+            own: string;
+        };
+        howToInstall: string;
+        copyLink: string;
+        linkCopied: string;
+        copyFailed: string;
+        extensionMissing: string;
+        another: {
+            title: string;
+            waiting: string;
+            description: string;
+        };
+        panel: {
+            project: string;
+            title: string;
+            body: string;
+            selectionTitle: string;
+            selectionBody: string;
+            actions: {
+                summarize: string;
+                tables: string;
+                compare: string;
+                email: string;
+            };
+            prompts: {
+                summarize: string;
+                tables: string;
+                compare: string;
+                email: string;
+            };
+            recent: string;
+            noProjects: string;
+            createProject: string;
+            addTab: string;
+            addTabsTitle: string;
+            addTabsHint: string;
+            addTabs: string;
+            noTabs: string;
+            tabsFailed: string;
+            cancel: string;
+            removeTab: string;
+            removeQuote: string;
+            wholePage: string;
+            unreadable: string;
+            message: string;
+            placeholder: string;
+            placeholderNoTab: string;
+            modeLabel: string;
+            read: string;
+            act: string;
+            readHint: string;
+            actHint: string;
+            send: string;
+            readFailed: string;
+            screenshot: string;
+            captureFailed: string;
+        };
+    };
     computers: {
         connectYourComputer: string;
         connectThisComputer: string;
@@ -8087,5 +8228,53 @@ declare const catalog: {
         tryAgain: string;
         details: string;
     };
+    appsModal: {
+        title: string;
+        subtitle: string;
+        mock: {
+            group: string;
+            button: string;
+            working: string;
+            takeOver: string;
+            stop: string;
+        };
+        chrome: {
+            name: string;
+            description: string;
+            connect: string;
+            connecting: string;
+            manage: string;
+            unsupported: string;
+            group: string;
+            manageLabel: string;
+            summary: string;
+        };
+        computer: {
+            title: string;
+            thisComputer: string;
+            thisComputerDescription: string;
+            connected: string;
+            connect: string;
+            manage: string;
+            desktop: string;
+            desktopDescription: string;
+            desktopRunning: string;
+            download: string;
+            manageLabel: string;
+            connectLabel: string;
+        };
+        developers: {
+            title: string;
+            cli: string;
+            cliDescription: string;
+            copy: string;
+            copied: string;
+            mcp: string;
+            mcpDescription: string;
+            connect: string;
+            connectLabel: string;
+            copyFailed: string;
+        };
+    };
 };
 export default catalog;