@kortix/ui 0.14.9 → 0.14.10

package/dist/workspace/sessions/session-label-badges.js

@@ -4,7 +4,8 @@ import { Badge } from '../../primitives/badge.js';
 import { cn } from '../../internal/lib/utils.js';
 /** A session's labels as outline badges: the first `max`, then `+N` with the rest in its title. */
 export function SessionLabelBadges({ session, max = 3, className, }) {
-    const labels = session.labels ?? [];
+    // `artifact:<id>` ties an artifact's Ask agent sessions together (its history reads it): a key, not a name.
+    const labels = (session.labels ?? []).filter((label) => !label.startsWith('artifact:'));
     if (labels.length === 0)
         return null;
     const shown = labels.slice(0, max);

package/dist/workspace/sidebar/footer/project-chrome-nav.d.ts

@@ -0,0 +1,10 @@
+export declare const CHROME_PROMO_DISMISSED_KEY = "kortix.chrome-promo.dismissed";
+/**
+ * "Kortix in Chrome": an advertisement, not a status widget. It shows
+ * until the caller connected a browser or dismisses it. The sidebar owns the
+ * connect dialog, not this row: on a phone the row lives in the sidebar sheet,
+ * and closing the sheet unmounts it together with anything it renders.
+ */
+export declare function ProjectChromeNavItem({ onOpenConnect }: {
+    onOpenConnect: () => void;
+}): import("react").JSX.Element | null;

package/dist/workspace/sidebar/footer/project-chrome-nav.js

@@ -0,0 +1,56 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useChromeConnections } from '@kortix/sdk/react';
+import { XIcon } from '@phosphor-icons/react';
+import { useCallback, useState } from 'react';
+import { SidebarMenuAction, SidebarMenuButton, SidebarMenuItem, useSidebar, } from '../../../primitives/sidebar.js';
+import { BrowserIcon } from '../../../internal/chrome/browser-icon.js';
+import { useIsMobile } from '../../../internal/hooks/index.js';
+import { useTranslations } from '../../../i18n/index.js';
+export const CHROME_PROMO_DISMISSED_KEY = 'kortix.chrome-promo.dismissed';
+function readDismissed() {
+    try {
+        return window.localStorage.getItem(CHROME_PROMO_DISMISSED_KEY) === '1';
+    }
+    catch {
+        return false;
+    }
+}
+/**
+ * "Kortix in Chrome": an advertisement, not a status widget. It shows
+ * until the caller connected a browser or dismisses it. The sidebar owns the
+ * connect dialog, not this row: on a phone the row lives in the sidebar sheet,
+ * and closing the sheet unmounts it together with anything it renders.
+ */
+export function ProjectChromeNavItem({ onOpenConnect }) {
+    // Client-only: the row renders nothing until its query resolves, so the
+    // server render and the first client render agree.
+    const [dismissed, setDismissed] = useState(() => typeof window === 'undefined' ? true : readDismissed());
+    const dismiss = useCallback(() => {
+        setDismissed(true);
+        try {
+            window.localStorage.setItem(CHROME_PROMO_DISMISSED_KEY, '1');
+        }
+        catch {
+            // Private mode or blocked storage: dismissed for this page view only.
+        }
+    }, []);
+    if (dismissed)
+        return null;
+    return _jsx(ChromePromo, { onDismiss: dismiss, onOpenConnect: onOpenConnect });
+}
+function ChromePromo({ onDismiss, onOpenConnect, }) {
+    const t = useTranslations('chrome');
+    const isMobile = useIsMobile();
+    const { setOpenMobile } = useSidebar();
+    // One a minute until the first browser connects: the connect dialog polls
+    // faster while it is open.
+    const connections = useChromeConnections({ refetchInterval: 60_000 });
+    if (!connections.isSuccess || connections.data.length > 0)
+        return null;
+    return (_jsxs(SidebarMenuItem, { children: [_jsxs(SidebarMenuButton, { className: "text-sidebar-foreground bg-hover group-has-data-[sidebar=menu-action]/menu-item:pr-8", onClick: () => {
+                    onOpenConnect();
+                    if (isMobile)
+                        setOpenMobile(false);
+                }, children: [_jsx(BrowserIcon, { brand: "chrome", tone: "current", className: "text-muted-foreground size-4" }), _jsx("span", { className: "min-w-0 flex-1 truncate", children: t('promoLabel') })] }), _jsx(SidebarMenuAction, { onClick: onDismiss, "aria-label": t('dismissPromo'), showOnHover: true, className: "mr-1", children: _jsx(XIcon, {}) })] }));
+}

package/dist/workspace/sidebar/project-sidebar.js

@@ -25,6 +25,9 @@ import { useTranslations } from '../../i18n/index.js';
 import { cn } from '../../internal/lib/utils.js';
 import { useBillingAccountId } from '../../internal/stores/billing-account-context.js';
 import { useFeatureFlag } from '@kortix/sdk/react';
+import { AppsModal } from '../../internal/apps-and-extensions/apps-modal.js';
+import { useAppsModalStore } from '../../internal/stores/apps-modal-store.js';
+import { ProjectChromeNavItem } from './footer/project-chrome-nav.js';
 import { MagnifyingGlassIcon, NavigationArrowIcon, } from '@phosphor-icons/react';
 import { UiLink as Link } from '../../providers/ui-provider.js';
 import { useCallback, useEffect, useRef, useState } from 'react';
@@ -48,6 +51,7 @@ export function ProjectSidebar({ projectId, menu, onOpenSearch, }) {
     const accountId = useBillingAccountId();
     // Channels replace New session and the session list (fail-closed: off until the project answers).
     const channels = useFeatureFlag(projectId, 'project_channels').enabled;
+    const chrome = useFeatureFlag(projectId, 'chrome').enabled;
     // Open the project composer without creating a durable session.
     const newSession = useNewProjectSession(projectId);
     const creatingSession = useIsCreatingProjectSession(projectId);
@@ -104,5 +108,5 @@ export function ProjectSidebar({ projectId, menu, onOpenSearch, }) {
                                                 // box clears the 44px floor with the vertical-only extension —
                                                 // vertical-only because this titlebar row packs several
                                                 // controls side by side (KRTX-2004).
-                                                className: "shrink-0 hit-area-y-3", children: _jsx(MagnifyingGlassIcon, { className: "size-4" }) }) })), isMobile && (_jsx(Button, { type: "button", "aria-label": tCommon('close'), variant: "ghost", size: "icon", onClick: () => setOpenMobile(false), className: "shrink-0 hit-area-y-3", children: _jsx(Close, {}) })), !isMobile && !peek && (_jsx(Hint, { side: "bottom", label: _jsxs("span", { className: "flex items-center gap-1.5", children: [isExpanded ? t('collapse') : t('pin'), _jsxs(KbdGroup, { children: [_jsx(Kbd, { className: "font-mono", children: modSymbol }), _jsx(Kbd, { className: "font-mono", children: "B" })] })] }), children: _jsx(Button, { type: "button", "aria-label": isExpanded ? t('collapse') : t('pin'), variant: "ghost", size: "icon", onClick: toggleSidebar, className: "shrink-0", children: _jsx(PanelLeft, { className: "cn-rtl-flip" }) }) }))] })] }) }), _jsx(SidebarContent, { className: "relative min-h-0 flex-1 [scrollbar-width:'none'] overflow-hidden [-ms-overflow-style:'none'] [&::-webkit-scrollbar]:hidden [&_[data-sidebar=menu-button]]:pl-2", children: _jsxs("div", { className: "flex h-full min-h-0 flex-col space-y-2", children: [_jsx(SidebarGroup, { className: "py-0", children: _jsxs(SidebarMenu, { children: [channels ? null : (_jsx(SidebarMenuItem, { children: creatingSession ? (_jsx(SidebarMenuButton, { disabled: true, "aria-busy": true, className: "group/menu-button text-sidebar-foreground relative", children: newSessionRowBody })) : (_jsx(SidebarMenuButton, { asChild: true, className: "group/menu-button text-sidebar-foreground relative", children: _jsx(Link, { href: uiRoutes().project(projectId), prefetch: true, onClick: handleNewSessionClick, children: newSessionRowBody }) })) })), channels ? _jsx(ProjectMemoryNavItem, { projectId: projectId }) : null, _jsx(ProjectNavItems, { projectId: projectId })] }) }), _jsx(SidebarGroup, { className: "min-h-0 flex-1 flex-col py-0", ref: sessionsGroupRef, children: channels ? (_jsx(ProjectSpacesNav, { projectId: projectId })) : (_jsx(ProjectSessionList, { projectId: projectId })) }), _jsx(SidebarGroup, { className: "mt-auto", children: _jsxs(SidebarMenu, { className: "gap-1", children: [_jsx(ProjectRepositoryDisconnectedAlert, { projectId: projectId }), _jsx(ProjectSandboxAlert, { projectId: projectId }), _jsx(ProjectManifestUpgradeAlert, { projectId: projectId }), _jsx(SidebarBalanceWarning, { accountId: accountId }), _jsx("li", { className: "not-has-[li]:hidden", children: _jsxs(SidebarMenu, { className: "gap-px [&>li:not(:first-child)>[data-sidebar=menu-button]]:rounded-t-sm [&>li:not(:last-child)>[data-sidebar=menu-button]]:rounded-b-sm", children: [_jsx(ProjectMcpNavItem, { onOpenConnect: () => setConnectMcpOpen(true) }), _jsx(ProjectComputerNavItem, { projectId: projectId, onOpenConnect: () => setComputerConnectOpen(true) })] }) }), _jsx(SidebarUpgradeButton, { accountId: accountId })] }) })] }) }), _jsx(SidebarRail, { "aria-label": t('resize'), title: t('resizeHelp') })] }), _jsx(ComputerConnectModal, { projectId: projectId, open: computerConnectOpen, onOpenChange: setComputerConnectOpen }), _jsx(ConnectMcpModal, { open: connectMcpOpen, onOpenChange: setConnectMcpOpen }), _jsx(CustomizeSidebarModal, { projectId: projectId })] }));
+                                                className: "shrink-0 hit-area-y-3", children: _jsx(MagnifyingGlassIcon, { className: "size-4" }) }) })), isMobile && (_jsx(Button, { type: "button", "aria-label": tCommon('close'), variant: "ghost", size: "icon", onClick: () => setOpenMobile(false), className: "shrink-0 hit-area-y-3", children: _jsx(Close, {}) })), !isMobile && !peek && (_jsx(Hint, { side: "bottom", label: _jsxs("span", { className: "flex items-center gap-1.5", children: [isExpanded ? t('collapse') : t('pin'), _jsxs(KbdGroup, { children: [_jsx(Kbd, { className: "font-mono", children: modSymbol }), _jsx(Kbd, { className: "font-mono", children: "B" })] })] }), children: _jsx(Button, { type: "button", "aria-label": isExpanded ? t('collapse') : t('pin'), variant: "ghost", size: "icon", onClick: toggleSidebar, className: "shrink-0", children: _jsx(PanelLeft, { className: "cn-rtl-flip" }) }) }))] })] }) }), _jsx(SidebarContent, { className: "relative min-h-0 flex-1 [scrollbar-width:'none'] overflow-hidden [-ms-overflow-style:'none'] [&::-webkit-scrollbar]:hidden [&_[data-sidebar=menu-button]]:pl-2", children: _jsxs("div", { className: "flex h-full min-h-0 flex-col space-y-2", children: [_jsx(SidebarGroup, { className: "py-0", children: _jsxs(SidebarMenu, { children: [channels ? null : (_jsx(SidebarMenuItem, { children: creatingSession ? (_jsx(SidebarMenuButton, { disabled: true, "aria-busy": true, className: "group/menu-button text-sidebar-foreground relative", children: newSessionRowBody })) : (_jsx(SidebarMenuButton, { asChild: true, className: "group/menu-button text-sidebar-foreground relative", children: _jsx(Link, { href: uiRoutes().project(projectId), prefetch: true, onClick: handleNewSessionClick, children: newSessionRowBody }) })) })), channels ? _jsx(ProjectMemoryNavItem, { projectId: projectId }) : null, _jsx(ProjectNavItems, { projectId: projectId })] }) }), _jsx(SidebarGroup, { className: "min-h-0 flex-1 flex-col py-0", ref: sessionsGroupRef, children: channels ? (_jsx(ProjectSpacesNav, { projectId: projectId })) : (_jsx(ProjectSessionList, { projectId: projectId })) }), _jsx(SidebarGroup, { className: "mt-auto", children: _jsxs(SidebarMenu, { className: "gap-1", children: [_jsx(ProjectRepositoryDisconnectedAlert, { projectId: projectId }), _jsx(ProjectSandboxAlert, { projectId: projectId }), _jsx(ProjectManifestUpgradeAlert, { projectId: projectId }), _jsx(SidebarBalanceWarning, { accountId: accountId }), _jsx("li", { className: "not-has-[li]:hidden", children: _jsxs(SidebarMenu, { className: "gap-px [&>li:not(:first-child)>[data-sidebar=menu-button]]:rounded-t-sm [&>li:not(:last-child)>[data-sidebar=menu-button]]:rounded-b-sm", children: [_jsx(ProjectMcpNavItem, { onOpenConnect: () => setConnectMcpOpen(true) }), _jsx(ProjectComputerNavItem, { projectId: projectId, onOpenConnect: () => setComputerConnectOpen(true) }), chrome ? (_jsx(ProjectChromeNavItem, { onOpenConnect: () => useAppsModalStore.getState().setOpen(true) })) : null] }) }), _jsx(SidebarUpgradeButton, { accountId: accountId })] }) })] }) }), _jsx(SidebarRail, { "aria-label": t('resize'), title: t('resizeHelp') })] }), _jsx(ComputerConnectModal, { projectId: projectId, open: computerConnectOpen, onOpenChange: setComputerConnectOpen }), _jsx(AppsModal, { chrome: chrome, onOpenComputer: () => setComputerConnectOpen(true), onOpenMcp: () => setConnectMcpOpen(true) }), _jsx(ConnectMcpModal, { open: connectMcpOpen, onOpenChange: setConnectMcpOpen }), _jsx(CustomizeSidebarModal, { projectId: projectId })] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kortix/ui",
-  "version": "0.14.9",
+  "version": "0.14.10",
   "description": "Kortix UI: the shared React component library for apps/web, Kortix Apps and SDK hosts. Tailwind v4 classes, themed by CSS variables.",
   "type": "module",
   "license": "Elastic-2.0",
@@ -349,6 +349,10 @@
       "types": "./dist/customize/settings/settings-tabs.d.ts",
       "import": "./dist/customize/settings/settings-tabs.js"
     },
+    "./customize/settings/tabs/chrome-connections-tab": {
+      "types": "./dist/customize/settings/tabs/chrome-connections-tab.d.ts",
+      "import": "./dist/customize/settings/tabs/chrome-connections-tab.js"
+    },
     "./customize/settings/tabs/connected-apps": {
       "types": "./dist/customize/settings/tabs/connected-apps.d.ts",
       "import": "./dist/customize/settings/tabs/connected-apps.js"
@@ -911,6 +915,14 @@
       "types": "./dist/internal/capture/use-capture-area.d.ts",
       "import": "./dist/internal/capture/use-capture-area.js"
     },
+    "./internal/chrome/extension": {
+      "types": "./dist/internal/chrome/extension.d.ts",
+      "import": "./dist/internal/chrome/extension.js"
+    },
+    "./internal/chrome/use-chrome-offered": {
+      "types": "./dist/internal/chrome/use-chrome-offered.d.ts",
+      "import": "./dist/internal/chrome/use-chrome-offered.js"
+    },
     "./internal/components/agent-mark": {
       "types": "./dist/internal/components/agent-mark.d.ts",
       "import": "./dist/internal/components/agent-mark.js"
@@ -1015,6 +1027,10 @@
       "types": "./dist/internal/hooks/use-notification-center.d.ts",
       "import": "./dist/internal/hooks/use-notification-center.js"
     },
+    "./internal/hooks/use-slash-focus": {
+      "types": "./dist/internal/hooks/use-slash-focus.d.ts",
+      "import": "./dist/internal/hooks/use-slash-focus.js"
+    },
     "./internal/icons/claude": {
       "types": "./dist/internal/icons/claude.d.ts",
       "import": "./dist/internal/icons/claude.js"
@@ -1023,6 +1039,10 @@
       "types": "./dist/internal/icons/download.d.ts",
       "import": "./dist/internal/icons/download.js"
     },
+    "./internal/icons/edge": {
+      "types": "./dist/internal/icons/edge.d.ts",
+      "import": "./dist/internal/icons/edge.js"
+    },
     "./internal/icons/github": {
       "types": "./dist/internal/icons/github.d.ts",
       "import": "./dist/internal/icons/github.js"
@@ -1107,6 +1127,10 @@
       "types": "./dist/internal/lib/desktop.d.ts",
       "import": "./dist/internal/lib/desktop.js"
     },
+    "./internal/lib/detect-os": {
+      "types": "./dist/internal/lib/detect-os.d.ts",
+      "import": "./dist/internal/lib/detect-os.js"
+    },
     "./internal/lib/error-handler": {
       "types": "./dist/internal/lib/error-handler.d.ts",
       "import": "./dist/internal/lib/error-handler.js"
@@ -1159,6 +1183,10 @@
       "types": "./dist/internal/lib/onboarding/use-app-home.d.ts",
       "import": "./dist/internal/lib/onboarding/use-app-home.js"
     },
+    "./internal/lib/project-preamble": {
+      "types": "./dist/internal/lib/project-preamble.d.ts",
+      "import": "./dist/internal/lib/project-preamble.js"
+    },
     "./internal/lib/promo-art": {
       "types": "./dist/internal/lib/promo-art.d.ts",
       "import": "./dist/internal/lib/promo-art.js"
@@ -1283,6 +1311,10 @@
       "types": "./dist/internal/stores/account-panel-store.d.ts",
       "import": "./dist/internal/stores/account-panel-store.js"
     },
+    "./internal/stores/apps-modal-store": {
+      "types": "./dist/internal/stores/apps-modal-store.d.ts",
+      "import": "./dist/internal/stores/apps-modal-store.js"
+    },
     "./internal/stores/billing-account-context": {
       "types": "./dist/internal/stores/billing-account-context.d.ts",
       "import": "./dist/internal/stores/billing-account-context.js"
@@ -1423,6 +1455,10 @@
       "types": "./dist/primitives/label.d.ts",
       "import": "./dist/primitives/label.js"
     },
+    "./lib/favicon": {
+      "types": "./dist/lib/favicon.d.ts",
+      "import": "./dist/lib/favicon.js"
+    },
     "./lib/host-env": {
       "types": "./dist/lib/host-env.d.ts",
       "import": "./dist/lib/host-env.js"
@@ -1657,6 +1693,10 @@
       "types": "./dist/session/panel/easy/detail-view.d.ts",
       "import": "./dist/session/panel/easy/detail-view.js"
     },
+    "./session/participants/session-participants": {
+      "types": "./dist/session/participants/session-participants.d.ts",
+      "import": "./dist/session/participants/session-participants.js"
+    },
     "./session/prompts/session-approval-review": {
       "types": "./dist/session/prompts/session-approval-review.d.ts",
       "import": "./dist/session/prompts/session-approval-review.js"
@@ -2153,7 +2193,7 @@
     "@extend-ai/react-docx": "^0.7.5",
     "@extend-ai/react-xlsx": "0.13.4",
     "@glideapps/glide-data-grid": "6.0.4-alpha24",
-    "@kortix/llm-catalog": "0.14.9",
+    "@kortix/llm-catalog": "0.14.10",
     "@lezer/highlight": "1.2.3",
     "@paper-design/shaders-react": "^0.0.76",
     "@phosphor-icons/react": "2.1.10",
@@ -2245,7 +2285,7 @@
     "zustand": "^5.0.3"
   },
   "peerDependencies": {
-    "@kortix/sdk": "^0.14.9",
+    "@kortix/sdk": "^0.14.10",
     "@tanstack/react-query": "^5.75.2",
     "@types/react": ">=18",
     "react": ">=19",

package/skills/kortix-ui/references/modules.md

@@ -314,7 +314,7 @@ Source: `src/session/index.ts`. The conversation: the drop-in thread, turns, too
 Mount: Pass the `useSession(projectId, sessionId)` result: `<SessionThread session={session} />`. Importing the entry registers the built-in tool rows.
 
 Props:
-- `SessionThread`: `session` (required), `hideHeader`, `readOnly`, `className`. Without a side panel on the page, file and preview opens show in a dialog.
+- `SessionThread`: `session` (required), `hideHeader`, `readOnly`, `composerPlaceholder`, `quote`, `firstPrompt`, `density`, `className`. Without a side panel on the page, file and preview opens show in a dialog. `firstPrompt`: the prompt of a session the host just created; the thread shows it, with the agent's Thinking row, while the computer boots, then hands it to the transcript. `density="compact"`: tighter conversation gutters for a narrow column, such as a side sheet; the composer keeps its own.
 - `ToolRegistry.register(name, Row)`: `Row` gets `ToolProps` (`call`: `name`, `input`, `status`, `result`); `BasicTool` draws the standard row.
 - `ModelSelector`, `AgentSelector`: the composer's model and agent pickers. They are controlled (`models`/`agents`, the selection, `onSelect`), so a form outside a session uses them too.