@kortix/ui 0.14.5 → 0.14.6

package/dist/terminal/session-terminal-panel.js

@@ -94,11 +94,9 @@ export function SessionTerminalPanel({ sessionId, projectId, projectSessionId, h
         setOptimisticPty(null);
         setTerminalPty(sessionId, null);
     }, [sessionId, setTerminalPty]);
-    useEffect(() => {
-        if (listedPty && optimisticPty?.id === listedPty.id) {
-            setOptimisticPty(null);
-        }
-    }, [listedPty, optimisticPty?.id]);
+    if (listedPty && optimisticPty?.id === listedPty.id) {
+        setOptimisticPty(null);
+    }
     useEffect(() => {
         if (!terminalPtyId || isLoading || !ptys || pty || optimisticPty?.id === terminalPtyId)
             return;

package/dist/theme/theme.js

@@ -123,8 +123,9 @@ function checkName(name) {
     return name;
 }
 function steps(field, allowed, values) {
+    const allowedSet = new Set(allowed);
     return Object.entries(values ?? {}).flatMap(([k, v]) => {
-        if (!allowed.includes(k))
+        if (!allowedSet.has(k))
             throw new Error(`@kortix/ui theme: unknown ${field} step "${k}"`);
         return v === undefined ? [] : [[k, v]];
     });

package/dist/workspace/projects/modal/github-import-pickers.js

@@ -10,7 +10,7 @@ import { Github } from '../../../internal/icons/github.js';
 import { cn } from '../../../internal/lib/utils.js';
 import { CaretDownIcon as CaretDown, GitBranchIcon as GitBranch, MagnifyingGlassIcon as Search, } from '@phosphor-icons/react';
 import { useTranslations } from '../../../i18n/index.js';
-import { useEffect, useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 /** Varied so the placeholder reads as a list of names, not a barcode. */
 const SKELETON_WIDTHS = ['w-3/5', 'w-2/5', 'w-1/2', 'w-3/4', 'w-1/3'];
 /** Above this many options the list is fixed-height (see `SearchPicker`). */
@@ -28,13 +28,14 @@ function SearchPicker({ value, options, loading, disabled, loadingLabel, placeho
     const filtered = normalizedSearch
         ? options.filter((option) => option.keywords.includes(normalizedSearch))
         : options;
-    useEffect(() => {
-        if (!open) {
+    const handleOpenChange = (next) => {
+        setOpen(next);
+        if (!next) {
             setSearch('');
             onSearchChange?.('');
         }
-    }, [onSearchChange, open]);
-    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, modal: false, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("button", { type: "button", disabled: disabled, className: cn(triggerVariants({ size: 'md' }), 'w-full'), children: [_jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [_jsx("span", { className: "text-muted-foreground flex shrink-0 [&_svg]:size-4", children: icon }), _jsx("span", { className: cn('min-w-0 truncate', !selected && 'text-muted-foreground'), children: selected?.label ?? (firstLoad ? loadingLabel : placeholder) })] }), loading ? (_jsx(Loading, { variant: "spokes", className: "text-muted-foreground! size-4 shrink-0" })) : (_jsx(CaretDown, { className: cn(TRIGGER_CARET_CLASS, TRIGGER_ICON_SIZE.md) }))] }) }), _jsxs(PopoverContent, { side: "top", align: "start", avoidCollisions: false, className: "w-[var(--radix-popover-trigger-width)] overflow-hidden p-0", children: [_jsx("div", { className: "border-border border-b py-1", children: _jsxs(InputGroupSearch, { children: [_jsx(InputGroupSearchIcon, { children: _jsx(Search, {}) }), _jsx(InputGroupSearchInput, { size: "xs", className: "border-transparent focus:border-transparent focus:ring-0", value: search, onChange: (event) => {
+    };
+    return (_jsxs(Popover, { open: open, onOpenChange: handleOpenChange, modal: false, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("button", { type: "button", disabled: disabled, className: cn(triggerVariants({ size: 'md' }), 'w-full'), children: [_jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [_jsx("span", { className: "text-muted-foreground flex shrink-0 [&_svg]:size-4", children: icon }), _jsx("span", { className: cn('min-w-0 truncate', !selected && 'text-muted-foreground'), children: selected?.label ?? (firstLoad ? loadingLabel : placeholder) })] }), loading ? (_jsx(Loading, { variant: "spokes", className: "text-muted-foreground! size-4 shrink-0" })) : (_jsx(CaretDown, { className: cn(TRIGGER_CARET_CLASS, TRIGGER_ICON_SIZE.md) }))] }) }), _jsxs(PopoverContent, { side: "top", align: "start", avoidCollisions: false, className: "w-[var(--radix-popover-trigger-width)] overflow-hidden p-0", children: [_jsx("div", { className: "border-border border-b py-1", children: _jsxs(InputGroupSearch, { children: [_jsx(InputGroupSearchIcon, { children: _jsx(Search, {}) }), _jsx(InputGroupSearchInput, { size: "xs", className: "border-transparent focus:border-transparent focus:ring-0", value: search, onChange: (event) => {
                                         setSearch(event.target.value);
                                         onSearchChange?.(event.target.value);
                                     }, placeholder: searchPlaceholder, autoCapitalize: "none", autoCorrect: "off", autoFocus: true })] }) }), firstLoad ? (
@@ -49,7 +50,7 @@ function SearchPicker({ value, options, loading, disabled, loadingLabel, placeho
                             const active = option.value === value;
                             return (_jsx("li", { children: _jsxs("button", { type: "button", "aria-pressed": active, className: cn(menuRow('md', 'default'), 'text-left', option.description && 'items-start', active && 'bg-primary/10 text-foreground'), onClick: () => {
                                         onValueChange(option.value);
-                                        setOpen(false);
+                                        handleOpenChange(false);
                                     }, children: [_jsxs("span", { className: "flex min-w-0 flex-1 flex-col", children: [_jsx("span", { className: "text-foreground truncate", children: option.label }), option.description ? (_jsx("span", { className: "text-muted-foreground truncate text-xs", children: option.description })) : null] }), option.badge ? _jsx("span", { className: "shrink-0", children: option.badge }) : null] }) }, option.value));
                         }) }))] })] }));
 }

package/dist/workspace/review/review-center.js

@@ -347,15 +347,15 @@ export function ReviewCenter({ initialItems, segment: segmentProp, onSegmentChan
             setSelectMode(false);
     }
     // If the active session filter no longer has items in this segment, reset it.
-    useEffect(() => {
-        if (sessionFilter !== 'all' && !sessionOpts.some((s) => s.sessionId === sessionFilter)) {
-            setSessionFilter('all');
-        }
-    }, [sessionOpts, sessionFilter]);
+    if (sessionFilter !== 'all' && !sessionOpts.some((s) => s.sessionId === sessionFilter)) {
+        setSessionFilter('all');
+    }
     // Keep the focus cursor in range as the visible list changes.
-    useEffect(() => {
+    const [visibleCountSeen, setVisibleCountSeen] = useState(null);
+    if (visible.length !== visibleCountSeen) {
+        setVisibleCountSeen(visible.length);
         setFocusedIdx((i) => Math.max(0, Math.min(i, visible.length - 1)));
-    }, [visible.length]);
+    }
     // Select mode: DOM focus follows the cursor (j/k, a toggled row), so Space
     // and Enter act on the row the user sees, and a pointer entry that
     // unmounts the clicked checkbox keeps focus on its row.
@@ -377,12 +377,14 @@ export function ReviewCenter({ initialItems, segment: segmentProp, onSegmentChan
     // mutation (there's no per-call settle callback threaded through `apply`),
     // so clear the pending marker here rather than leave a button spinning
     // forever if the item already left the list (e.g. a stale poll raced it).
-    useEffect(() => {
+    const [initialItemsSeen, setInitialItemsSeen] = useState(initialItems);
+    if (initialItems !== initialItemsSeen) {
+        setInitialItemsSeen(initialItems);
         if (initialItems)
             setItems(initialItems);
         setPendingId(null);
         setPendingDecision(null);
-    }, [initialItems]);
+    }
     // Detect items that arrived since the user last looked → flag them "fresh".
     // The first load of each segment seeds its known set silently (nothing is
     // "new" on open, or on a first visit to a segment).
@@ -711,9 +713,10 @@ export function ReviewCenter({ initialItems, segment: segmentProp, onSegmentChan
         },
     ];
     const confirmCount = bulkIds[confirm.verb].length;
+    const confirmIds = new Set(bulkIds[confirm.verb]);
     // Every item the verb will decide: which app, what it does, to what, how risky.
     const confirmList = (_jsx("ul", { className: "border-border divide-border max-h-72 w-full min-w-0 divide-y overflow-y-auto rounded-lg border", children: selectedItems
-            .filter((i) => bulkIds[confirm.verb].includes(i.id))
+            .filter((i) => confirmIds.has(i.id))
             .map((i) => {
             const risk = RISK_BADGE[i.risk];
             // The arguments, as the approval modal reads them: the content

package/dist/workspace/session-workspace.js

@@ -21,7 +21,7 @@ import { useKortixComputerStore } from '../internal/stores/kortix-computer-store
 import { sessionPreviewTabId, useSessionBrowserStore, } from '../internal/stores/session-browser-store.js';
 import { ProjectScope } from '../internal/project-scope.js';
 import { SessionThread } from '../session/thread/session-thread.js';
-import { memo, useCallback, useEffect, useState } from 'react';
+import { memo, useCallback, useState } from 'react';
 export const SessionLayout = memo(function SessionLayout({ sessionId, projectId, projectSessionId, children, bootStage = null, transient = false, }) {
     const isMobile = useIsMobile();
     const booting = !!bootStage;
@@ -129,15 +129,11 @@ function useSessionPanelBody({ sessionId, projectId, projectSessionId, isEasy, e
     const showTerminal = !isEasy && effectiveView === 'terminal';
     const showAudit = !isEasy && effectiveView === 'audit';
     const [terminalActivated, setTerminalActivated] = useState(false);
-    useEffect(() => {
-        if (showTerminal)
-            setTerminalActivated(true);
-    }, [showTerminal]);
+    if (showTerminal && !terminalActivated)
+        setTerminalActivated(true);
     const [browserActivated, setBrowserActivated] = useState(false);
-    useEffect(() => {
-        if (showBrowser)
-            setBrowserActivated(true);
-    }, [showBrowser]);
+    if (showBrowser && !browserActivated)
+        setBrowserActivated(true);
     // Easy mode's body is the detail shell and nothing else — the cards moved to
     // the floating overlay over the chat. The Advanced branches below are kept
     // intact (Advanced is disabled, not deleted) and are unreachable while

package/dist/workspace/sessions/deleted-session-row.js

@@ -5,6 +5,7 @@ import Loading from '../../primitives/loading.js';
 import { getSessionDisplayTitle } from '../../session/actions/project-session-list-helpers.js';
 import { useLocale, useTranslations } from '../../i18n/index.js';
 import { relativeTime } from '../../internal/lib/relative-time.js';
+import { useMemo } from 'react';
 /**
  * One row of Recently deleted (KRTX-2853): a session the viewer deleted (or,
  * as a manager, one they can open), still inside its restore window. Not a
@@ -16,10 +17,12 @@ export function DeletedSessionRow({ session, restoring, onRestore, }) {
     const title = getSessionDisplayTitle(session);
     const deletedAt = session.deleted_at ? new Date(session.deleted_at) : null;
     const restoreUntil = session.restore_until ? new Date(session.restore_until) : null;
-    const exact = (date) => new Intl.DateTimeFormat(locale, { dateStyle: 'medium', timeStyle: 'short' }).format(date);
+    const exactFormat = useMemo(() => new Intl.DateTimeFormat(locale, { dateStyle: 'medium', timeStyle: 'short' }), [locale]);
+    const dayFormat = useMemo(() => new Intl.DateTimeFormat(locale, { month: 'short', day: 'numeric' }), [locale]);
+    const exact = (date) => exactFormat.format(date);
     return (_jsxs("div", { className: "bg-popover flex items-center gap-3 rounded-md border px-3 py-2", "data-deleted-session-id": session.session_id, children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("p", { className: "text-foreground truncate text-sm", children: title }), _jsxs("p", { className: "text-muted-foreground truncate text-xs", children: [deletedAt ? (_jsx("time", { dateTime: session.deleted_at, title: exact(deletedAt), children: t('deletedAgo', {
                                     when: relativeTime(session.deleted_at, locale, undefined, { style: 'long' }),
                                 }) })) : null, deletedAt && restoreUntil ? ' · ' : null, restoreUntil ? (_jsx("time", { dateTime: session.restore_until, title: exact(restoreUntil), children: t('restorableUntil', {
-                                    date: new Intl.DateTimeFormat(locale, { month: 'short', day: 'numeric' }).format(restoreUntil),
+                                    date: dayFormat.format(restoreUntil),
                                 }) })) : null] })] }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", disabled: restoring, onClick: () => onRestore(session), "aria-label": t('restoreNamed', { title }), children: [restoring ? _jsx(Loading, { className: "size-3.5 shrink-0" }) : null, t('restore')] })] }));
 }

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

@@ -2,13 +2,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { PromoNavRow } from './promo-nav-row.js';
 import { LaptopIcon } from '@phosphor-icons/react';
-import { useCallback, useState } from 'react';
+import { useCallback, useState, useSyncExternalStore } from 'react';
 import Loading from '../../../primitives/loading.js';
 import { useSidebar } from '../../../primitives/sidebar.js';
 import { useConnectDesktopComputer, useOwnsPairedComputer, useThisComputerState, } from '../../../internal/tunnel/computer-connect.js';
 import { useIsMobile } from '../../../internal/hooks/index.js';
 import { useTranslations } from '../../../i18n/index.js';
 export const COMPUTER_PROMO_DISMISSED_KEY = 'kortix.computer-promo.dismissed';
+const subscribeNoop = () => () => { };
 function readDismissed() {
     try {
         return window.localStorage.getItem(COMPUTER_PROMO_DISMISSED_KEY) === '1';
@@ -30,9 +31,10 @@ function readDismissed() {
  *   and closing the sheet unmounts it together with anything it renders.
  */
 export function ProjectComputerNavItem({ projectId, onOpenConnect, }) {
-    // Client-only: the row renders nothing until its queries resolve, so the
-    // server render and the first client render agree.
-    const [dismissed, setDismissed] = useState(() => typeof window === 'undefined' ? true : readDismissed());
+    // The server and the hydrating render read "dismissed"; the stored flag applies after.
+    const stored = useSyncExternalStore(subscribeNoop, readDismissed, () => true);
+    const [dismissedNow, setDismissed] = useState(false);
+    const dismissed = stored || dismissedNow;
     const dismiss = useCallback(() => {
         setDismissed(true);
         try {

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

@@ -1,12 +1,13 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { PromoNavRow } from './promo-nav-row.js';
-import { useCallback, useState } from 'react';
+import { useCallback, useState, useSyncExternalStore } from 'react';
 import { useSidebar } from '../../../primitives/sidebar.js';
 import { Mcp } from '../../../internal/icons/mcp.js';
 import { useIsMobile } from '../../../internal/hooks/index.js';
 import { useTranslations } from '../../../i18n/index.js';
 export const MCP_PROMO_DISMISSED_KEY = 'kortix.mcp-promo.dismissed';
+const subscribeNoop = () => () => { };
 function readDismissed() {
     try {
         return window.localStorage.getItem(MCP_PROMO_DISMISSED_KEY) === '1';
@@ -26,7 +27,10 @@ export function ProjectMcpNavItem({ onOpenConnect }) {
     const tComputers = useTranslations('computers');
     const isMobile = useIsMobile();
     const { setOpenMobile } = useSidebar();
-    const [dismissed, setDismissed] = useState(() => typeof window === 'undefined' ? true : readDismissed());
+    // The server and the hydrating render read "dismissed"; the stored flag applies after.
+    const stored = useSyncExternalStore(subscribeNoop, readDismissed, () => true);
+    const [dismissedNow, setDismissed] = useState(false);
+    const dismissed = stored || dismissedNow;
     const dismiss = useCallback(() => {
         setDismissed(true);
         try {

package/dist/workspace/sidebar/modal/rename-session-modal.js

@@ -5,15 +5,20 @@ import { Input } from '../../../primitives/input.js';
 import Loading from '../../../primitives/loading.js';
 import { Modal, ModalBody, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalTitle, } from '../../../primitives/modal.js';
 import { useTranslations } from '../../../i18n/index.js';
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { MAX_SESSION_NAME_LENGTH, useRenameSession } from '../../../session/actions/use-rename-session.js';
 export function RenameSessionModal({ projectId, sessionId, currentName, open, onOpenChange, onSaved, }) {
     const tI18nHardcoded = useTranslations('hardcodedUi');
     const [value, setValue] = useState(currentName ?? '');
-    useEffect(() => {
+    const [syncedFor, setSyncedFor] = useState([
+        open,
+        currentName,
+    ]);
+    if (syncedFor[0] !== open || syncedFor[1] !== currentName) {
+        setSyncedFor([open, currentName]);
         if (open)
             setValue(currentName ?? '');
-    }, [open, currentName]);
+    }
     const renameMutation = useRenameSession(projectId, sessionId, {
         onSuccess: () => {
             onSaved?.();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kortix/ui",
-  "version": "0.14.5",
+  "version": "0.14.6",
   "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",
@@ -2157,7 +2157,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.5",
+    "@kortix/llm-catalog": "0.14.6",
     "@lezer/highlight": "1.2.3",
     "@paper-design/shaders-react": "^0.0.76",
     "@phosphor-icons/react": "2.1.10",
@@ -2246,7 +2246,7 @@
     "zustand": "^5.0.3"
   },
   "peerDependencies": {
-    "@kortix/sdk": "^0.14.5",
+    "@kortix/sdk": "^0.14.6",
     "@tanstack/react-query": "^5.75.2",
     "@types/react": ">=18",
     "react": ">=19",