@kortix/ui 0.14.5 → 0.14.7

package/dist/terminal/pty-connection.d.ts

@@ -9,7 +9,7 @@ export type PtyCloseAction = 'ended' | 'reconnect' | 'replace';
  * terminal asks `GET /kortix/pty`, which passes the same control-plane gate and
  * returns a readable body. That GET never wakes a box.
  */
-export type PtyAttachProbe = 'reachable' | 'not-ready' | 'unreachable';
+type PtyAttachProbe = 'reachable' | 'not-ready' | 'unreachable';
 /** `null` = the PTY list answered. Anything else is the error it threw. */
 export declare function classifyPtyAttachProbe(error: unknown): PtyAttachProbe;
 /**
@@ -36,10 +36,10 @@ export declare const PTY_WAKE_RETRY_MS = 2000;
 export declare const PTY_WAKE_DEADLINE_MS: number;
 /** Consecutive non-wake failures before the terminal stops and offers Retry. */
 export declare const PTY_MAX_ATTACH_FAILURES = 5;
-export type PtyAttachPause = 'asleep' | 'failed';
+type PtyAttachPause = 'asleep' | 'failed';
 /** What the attach overlay shows. `null` means the shell is live. */
 export type AttachPhase = 'connecting' | 'waking' | 'reconnecting' | PtyAttachPause | null;
-export type PtyAttachStep = {
+type PtyAttachStep = {
     kind: 'retry';
     delayMs: number;
     phase: 'waking' | 'reconnecting';
@@ -56,7 +56,7 @@ export declare function nextPtyAttachStep(input: {
     /** How long the box has reported not-ready while a wake was armed. */
     wakingForMs: number;
 }): PtyAttachStep;
-export type TerminalPanelState = 'connecting' | 'error' | 'empty' | 'terminal';
+type TerminalPanelState = 'connecting' | 'error' | 'empty' | 'terminal';
 export declare function deriveTerminalPanelState(input: {
     hasServerUrl: boolean;
     serverWaitExpired: boolean;
@@ -81,3 +81,4 @@ export declare function classifyPtyClose(input: {
 }): PtyCloseAction;
 /** Prevent a bad runtime from creating terminals forever in a replacement loop. */
 export declare function shouldAutoReplaceTerminal(replacementAttempt: number): boolean;
+export {};

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/index.d.ts

@@ -23,3 +23,4 @@ export { ProjectSessionsView } from './sessions/project-sessions-view.js';
 export { ProjectSessionList } from './sidebar/project-session-list.js';
 export { ProjectSidebar } from './sidebar/project-sidebar.js';
 export { ShareSessionModal } from './sidebar/modal/share-session-modal.js';
+export { formatGoalTime, GoalHealthDot, goalHref, goalNeedsYou, goalOpenAsks, goalProgress, GoalStatusBadge, useGoalClock, useGoalIssueText, } from '../internal/goals/goal-meta.js';

package/dist/workspace/index.js

@@ -23,3 +23,4 @@ export { ProjectSessionsView } from './sessions/project-sessions-view.js';
 export { ProjectSessionList } from './sidebar/project-session-list.js';
 export { ProjectSidebar } from './sidebar/project-sidebar.js';
 export { ShareSessionModal } from './sidebar/modal/share-session-modal.js';
+export { formatGoalTime, GoalHealthDot, goalHref, goalNeedsYou, goalOpenAsks, goalProgress, GoalStatusBadge, useGoalClock, useGoalIssueText, } from '../internal/goals/goal-meta.js';

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/saved-session-skeleton-shape.d.ts

@@ -23,12 +23,12 @@ export declare const LINE_WIDTHS: readonly ["w-full", "w-11/12", "w-5/6"];
 export declare const LAST_LINE_WIDTHS: readonly ["w-1/3", "w-2/5", "w-1/2", "w-3/5", "w-2/3", "w-3/4"];
 /** Tailwind's `animate-pulse` period, which the `Skeleton` primitive runs. */
 export declare const PULSE_PERIOD_MS = 2000;
-export interface SkeletonLine {
+interface SkeletonLine {
     width: string;
     /** The row's place in the pulse wave; see `pulseDelayMs`. */
     phase: number;
 }
-export type SkeletonParagraph = {
+type SkeletonParagraph = {
     kind: 'text';
     lines: SkeletonLine[];
 }
@@ -37,7 +37,7 @@ export type SkeletonParagraph = {
     kind: 'block';
     phase: number;
 };
-export interface SkeletonTurn {
+interface SkeletonTurn {
     prompt: SkeletonLine & {
         tall: boolean;
     };
@@ -63,3 +63,4 @@ export declare function savedSessionSkeletonShape(sessionId: string): SkeletonSh
  * its cycle, so every row is on screen and moving from the first frame.
  */
 export declare function pulseDelayMs(phase: number, phases: number): number;
+export {};

package/dist/workspace/saved-session-skeleton.d.ts

@@ -1,7 +1,11 @@
 import type { SessionStartStage } from '@kortix/sdk';
-export declare function SavedSessionSkeleton({ projectId, sessionId, stage, }: {
+import { type ReactNode } from 'react';
+export declare function SavedSessionSkeleton({ projectId, sessionId, stage, status, }: {
     projectId: string;
     /** The route's session id. */
     sessionId: string;
     stage: SessionStartStage;
+    /** Drawn in place of the skeleton rows: there is no saved conversation to
+     *  stand in for, only the wake's status. */
+    status?: ReactNode;
 }): import("react").JSX.Element;

package/dist/workspace/saved-session-skeleton.js

@@ -15,8 +15,9 @@ import { useMemo } from 'react';
  * The control plane keeps a saved copy of every session's conversation and
  * answers in one round trip; the computer takes 5-240 s to wake. So a session
  * that has a saved copy opens on this — its header, skeleton turns, and the
- * composer's outline — and the conversation replaces it in one step. The boot
- * screen is only for a session with nothing to read (`resolveResumeOverlay`).
+ * composer's outline — and the conversation replaces it in one step. A session
+ * with nothing to read (`resolveResumeOverlay`) gets the same frame with a
+ * `status` in place of the rows.
  *
  * Built from the geometry the real chat uses (`SessionLayout`, `SessionBodyRow`,
  * `SESSION_TRANSCRIPT_CLASS`, `COMPOSER_SHELL_CLASS`), so the crossfade into
@@ -36,8 +37,8 @@ import { useMemo } from 'react';
  * open waits 0.3-2.3 s for the server's copy, so its rows come 200 ms later.
  */
 const APPEAR_AFTER_A_MOMENT = 'animate-in fade-in fill-mode-both duration-normal delay-[var(--duration-moderate)]';
-export function SavedSessionSkeleton({ projectId, sessionId, stage, }) {
+export function SavedSessionSkeleton({ projectId, sessionId, stage, status, }) {
     const t = useTranslations('sessionPage');
     const shape = useMemo(() => savedSessionSkeletonShape(sessionId), [sessionId]);
-    return (_jsx(SessionLayout, { sessionId: sessionId, projectId: projectId, projectSessionId: sessionId, transient: true, bootStage: stage === 'ready' ? null : stage, children: _jsxs("div", { className: "bg-background relative flex h-full flex-col", children: [_jsx(SessionSiteHeader, { sessionId: sessionId, sessionTitle: "" }), _jsxs(SessionBodyRow, { transient: true, children: [_jsx("div", { className: "relative z-10 min-h-0 flex-1 overflow-hidden", children: _jsx("div", { role: "status", "aria-busy": "true", "aria-label": t('loadingConversation'), "data-testid": "saved-session-skeleton", className: cn(SESSION_TRANSCRIPT_CLASS, APPEAR_AFTER_A_MOMENT), children: _jsx(SavedSessionSkeletonRows, { shape: shape }) }) }), _jsx("div", { "aria-hidden": true, className: cn(COMPOSER_SHELL_CLASS, 'pb-8', APPEAR_AFTER_A_MOMENT), children: _jsx(SkeletonBar, { phase: shape.composerPhase, phases: shape.phases, className: "h-28 w-full rounded-xl" }) })] })] }) }));
+    return (_jsx(SessionLayout, { sessionId: sessionId, projectId: projectId, projectSessionId: sessionId, transient: true, bootStage: stage === 'ready' ? null : stage, children: _jsxs("div", { className: "bg-background relative flex h-full flex-col", children: [_jsx(SessionSiteHeader, { sessionId: sessionId, sessionTitle: "" }), _jsxs(SessionBodyRow, { transient: true, children: [_jsx("div", { className: "relative z-10 min-h-0 flex-1 overflow-hidden", children: status ?? (_jsx("div", { role: "status", "aria-busy": "true", "aria-label": t('loadingConversation'), "data-testid": "saved-session-skeleton", className: cn(SESSION_TRANSCRIPT_CLASS, APPEAR_AFTER_A_MOMENT), children: _jsx(SavedSessionSkeletonRows, { shape: shape }) })) }), _jsx("div", { "aria-hidden": true, className: cn(COMPOSER_SHELL_CLASS, 'pb-8', APPEAR_AFTER_A_MOMENT), children: _jsx(SkeletonBar, { phase: shape.composerPhase, phases: shape.phases, className: "h-28 w-full rounded-xl" }) })] })] }) }));
 }

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;
@@ -106,10 +106,9 @@ function useSessionPanelSurfaces({ sessionId, projectId, projectSessionId, bootS
         setIsSidePanelOpen(!isSidePanelOpen);
     }, [isSidePanelOpen, setIsSidePanelOpen]);
     const panelHeader = (_jsx(PanelHeaderSwitcher, { view: effectiveView, onChangeView: (v) => setPanelView(sessionId, v), isSidePanelOpen: isSidePanelOpen, onTogglePanel: handleTogglePanel, auditBadge: auditPendingCount, onToggleMode: togglePanelMode }));
-    // While booting, the panel is JUST the dead-center "Kortix Computer is
-    // starting" loader — no header bar (the loader has its own heading, so a panel
-    // title would be redundant), filling the whole card so it's perfectly
-    // centered. The runtime-coupled views (Actions/Files/Terminal/Browser) need a
+    // While booting, the panel is JUST the wake status — empty unless the wake
+    // needs attention, and then dead-center in the card — with no header bar.
+    // The runtime-coupled views (Actions/Files/Terminal/Browser) need a
     // live sandbox, so they only render once booted.
     //
     // Easy mode has no header either: it is the three cards and nothing else. No
@@ -120,7 +119,7 @@ function useSessionPanelSurfaces({ sessionId, projectId, projectSessionId, bootS
     // own close DISCARDS the detail (it is done with), while ⌘I only puts it
     // away — press it again and the same detail comes back.
     const effectivePanelHeader = booting || isEasy ? null : panelHeader;
-    const effectivePanelBody = booting ? (_jsx(SessionStartingLoader, { stage: bootStage ?? 'provisioning', delayMs: 0, projectId: projectId, sessionId: projectSessionId, variant: "stepper" })) : (panelBody);
+    const effectivePanelBody = booting ? (_jsx(SessionStartingLoader, { projectId: projectId, sessionId: projectSessionId })) : (panelBody);
     return { effectivePanelHeader, effectivePanelBody };
 }
 function useSessionPanelBody({ sessionId, projectId, projectSessionId, isEasy, effectiveView, }) {
@@ -129,15 +128,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-goals-nav.d.ts

@@ -0,0 +1,6 @@
+/** The Goals row shows only with the `goals` flag on. */
+export declare function useGoalsRowVisible(projectId: string | undefined): boolean;
+/** The Goals row, with the count of goals that wait on a person or need attention. */
+export declare function ProjectGoalsNavItem({ projectId }: {
+    projectId: string;
+}): import("react").JSX.Element | null;

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

@@ -0,0 +1,26 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { uiRoutes } from '../../../lib/routes.js';
+import { ProjectNavRow } from '../../../internal/layout/project-nav-row.js';
+import { CountBadge } from '../../../primitives/count-badge.js';
+import { useTranslations } from '../../../i18n/index.js';
+import { useFeatureFlag, useProjectGoals } from '@kortix/sdk/react';
+import { TargetIcon } from '@phosphor-icons/react';
+import { useUiPathname } from '../../../providers/ui-provider.js';
+import { goalNeedsYou } from '../../../internal/goals/goal-meta.js';
+/** The Goals row shows only with the `goals` flag on. */
+export function useGoalsRowVisible(projectId) {
+    return useFeatureFlag(projectId, 'goals').enabled;
+}
+/** The Goals row, with the count of goals that wait on a person or need attention. */
+export function ProjectGoalsNavItem({ projectId }) {
+    const t = useTranslations('sidebar');
+    const pathname = useUiPathname();
+    const visible = useGoalsRowVisible(projectId);
+    const goals = useProjectGoals(visible ? projectId : null);
+    const needsYou = (goals.data ?? []).filter(goalNeedsYou).length;
+    const href = projectId ? uiRoutes().goals(projectId) : null;
+    if (!href || !visible)
+        return null;
+    return (_jsxs(ProjectNavRow, { active: pathname?.startsWith(href) === true, label: t('goals'), href: href, prefetch: true, children: [_jsx("span", { className: "shrink-0", children: _jsx(TargetIcon, {}) }), t('goals'), needsYou > 0 ? (_jsx("span", { className: "ml-auto flex shrink-0 items-center gap-1", children: _jsx(CountBadge, { count: needsYou, tone: "waiting" }) })) : null] }));
+}

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/dist/workspace/sidebar/modal/session-embed-section.d.ts

@@ -0,0 +1,25 @@
+/**
+ * The iframe snippet a host page pastes: the ACTUAL session page
+ * (`/projects/:projectId/sessions/:sessionId`), not a separate widget or
+ * viewer. Pure, so the test can pin the exact HTML without a browser.
+ *
+ * The snippet is static HTML by construction: the URL is built from ids, and
+ * the `title` attribute is a fixed string. Never interpolate a session title
+ * into the attribute — an unescaped quote would break out of it on the HOST
+ * page, which does not share this app's CSP.
+ */
+export declare function sessionEmbedSnippet(projectId: string, sessionId: string, origin: string): string | null;
+/**
+ * "Embed" in the Share dialog: one copy button for the iframe snippet above.
+ * Framing the session page is allowed by the CSP `frame-ancestors` rule on
+ * that route (next.config.ts); the viewer inside the frame is the app's own
+ * auth. Same-site embeds require an existing signed-in session; cross-site
+ * embeds cannot sign in inside the frame (SameSite=Lax and /auth's CSP).
+ *
+ * Mounted inside `ModalContent`, so `window` is read at render time of an open
+ * dialog, never during SSR.
+ */
+export declare function SessionEmbedSection({ projectId, sessionId, }: {
+    projectId: string;
+    sessionId: string;
+}): import("react").JSX.Element;

package/dist/workspace/sidebar/modal/session-embed-section.js

@@ -0,0 +1,71 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../../../primitives/button.js';
+import { Label } from '../../../primitives/label.js';
+import { errorToast, successToast } from '../../../primitives/toast.js';
+import { useTranslations } from '../../../i18n/index.js';
+import { CheckIcon, CodeIcon } from '@phosphor-icons/react';
+import { useEffect, useRef, useState } from 'react';
+/**
+ * The iframe snippet a host page pastes: the ACTUAL session page
+ * (`/projects/:projectId/sessions/:sessionId`), not a separate widget or
+ * viewer. Pure, so the test can pin the exact HTML without a browser.
+ *
+ * The snippet is static HTML by construction: the URL is built from ids, and
+ * the `title` attribute is a fixed string. Never interpolate a session title
+ * into the attribute — an unescaped quote would break out of it on the HOST
+ * page, which does not share this app's CSP.
+ */
+export function sessionEmbedSnippet(projectId, sessionId, origin) {
+    if (!projectId || !sessionId || !origin)
+        return null;
+    const src = `${origin}/projects/${encodeURIComponent(projectId)}/sessions/${encodeURIComponent(sessionId)}`;
+    return `<iframe src="${src}" style="height:640px;width:100%;border:0;border-radius:12px" title="Kortix session" loading="lazy"></iframe>`;
+}
+/**
+ * "Embed" in the Share dialog: one copy button for the iframe snippet above.
+ * Framing the session page is allowed by the CSP `frame-ancestors` rule on
+ * that route (next.config.ts); the viewer inside the frame is the app's own
+ * auth. Same-site embeds require an existing signed-in session; cross-site
+ * embeds cannot sign in inside the frame (SameSite=Lax and /auth's CSP).
+ *
+ * Mounted inside `ModalContent`, so `window` is read at render time of an open
+ * dialog, never during SSR.
+ */
+export function SessionEmbedSection({ projectId, sessionId, }) {
+    const t = useTranslations('hardcodedUi.sessionEmbed');
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const [copied, setCopied] = useState(false);
+    const copiedTimer = useRef(null);
+    const mounted = useRef(false);
+    useEffect(() => {
+        mounted.current = true;
+        return () => {
+            mounted.current = false;
+            if (copiedTimer.current)
+                clearTimeout(copiedTimer.current);
+        };
+    }, []);
+    const origin = typeof window === 'undefined' ? null : window.location.origin;
+    const snippet = origin ? sessionEmbedSnippet(projectId, sessionId, origin) : null;
+    const copy = async () => {
+        if (!snippet)
+            return;
+        try {
+            await navigator.clipboard.writeText(snippet);
+            if (!mounted.current)
+                return;
+            setCopied(true);
+            successToast(t('copied'));
+            if (copiedTimer.current)
+                clearTimeout(copiedTimer.current);
+            copiedTimer.current = setTimeout(() => setCopied(false), 2000);
+        }
+        catch {
+            if (!mounted.current)
+                return;
+            errorToast(tI18nComplete.raw('text167c96824acb'));
+        }
+    };
+    return (_jsxs("section", { className: "space-y-2", "data-testid": "session-embed", children: [_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { children: t('sectionTitle') }), _jsx("p", { className: "text-muted-foreground text-xs", children: t('sectionDescription') })] }), _jsxs(Button, { variant: "outline", size: "sm", disabled: !snippet, onClick: copy, children: [copied ? (_jsx(CheckIcon, { className: "text-kortix-green size-4 shrink-0" })) : (_jsx(CodeIcon, { className: "size-4 shrink-0" })), t('copy')] })] }));
+}

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

@@ -13,7 +13,7 @@ import { sessionOversightQueryKey } from '../../../access/iam/session-oversight-
 import { ShieldCheckIcon } from '@phosphor-icons/react';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { useEffect, useState } from 'react';
-import { SessionPublicLinkSection } from './session-public-link-section.js';
+import { SessionEmbedSection } from './session-embed-section.js';
 import { sessionAccessSummary, sessionAccessView } from './share-session-access.js';
 import { refreshAfterShare } from './share-session-cache.js';
 /**
@@ -105,5 +105,5 @@ export function ShareSessionModal({ projectId, session, open, onOpenChange, onSa
                         // Read-only, not hidden: a person a session was shared with should
                         // still be able to see who else is in it. Withholding that is what
                         // sent people to the editable dialog in the first place.
-                        _jsx("p", { className: "text-foreground text-sm", "data-testid": "session-access-summary", children: session ? sessionAccessSummary(session) : null })), oversightOn ? (_jsx(InfoBanner, { tone: "neutral", icon: ShieldCheckIcon, "data-testid": "session-oversight-disclosure", children: tOversight.raw('shareDisclosure') })) : null, view.canEdit && session && publicSharesEnabled ? (_jsx(SessionPublicLinkSection, { projectId: projectId, sessionId: session.session_id })) : null] }), _jsxs(ModalFooter, { className: "sm:justify-between", children: [_jsx(Button, { variant: "outline-ghost", size: "sm", className: "w-full sm:w-auto", onClick: () => onOpenChange(false), disabled: save.isPending, children: view.canEdit ? 'Cancel' : 'Close' }), view.canEdit && (_jsxs(Button, { size: "sm", onClick: () => save.mutate(), disabled: save.isPending || !isSharingComplete(sharing) || blockedSelection, className: "w-full sm:w-auto", children: [save.isPending && _jsx(Loading, {}), tI18nHardcoded.raw('i18nComplete.text1509f561f241')] }))] })] }) }));
+                        _jsx("p", { className: "text-foreground text-sm", "data-testid": "session-access-summary", children: session ? sessionAccessSummary(session) : null })), oversightOn ? (_jsx(InfoBanner, { tone: "neutral", icon: ShieldCheckIcon, "data-testid": "session-oversight-disclosure", children: tOversight.raw('shareDisclosure') })) : null, view.canEdit && session && publicSharesEnabled ? (_jsx(SessionEmbedSection, { projectId: projectId, sessionId: session.session_id })) : null] }), _jsxs(ModalFooter, { className: "sm:justify-between", children: [_jsx(Button, { variant: "outline-ghost", size: "sm", className: "w-full sm:w-auto", onClick: () => onOpenChange(false), disabled: save.isPending, children: view.canEdit ? 'Cancel' : 'Close' }), view.canEdit && (_jsxs(Button, { size: "sm", onClick: () => save.mutate(), disabled: save.isPending || !isSharingComplete(sharing) || blockedSelection, className: "w-full sm:w-auto", children: [save.isPending && _jsx(Loading, {}), tI18nHardcoded.raw('i18nComplete.text1509f561f241')] }))] })] }) }));
 }

package/dist/workspace/sidebar/nav-row-meta.js

@@ -3,11 +3,12 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { uiRoutes } from '../../lib/routes.js';
 import { capabilityTabHref } from '../../internal/lib/capability-tab-routes.js';
 import { useAppsRowVisible } from './footer/project-apps-nav.js';
+import { useGoalsRowVisible } from './footer/project-goals-nav.js';
 import { useRoomsRowVisible } from './footer/project-rooms-nav.js';
 import { filesRow } from '../../internal/layout/files-nav-label.js';
 import { CustomizeGlyph, useProjectNavRows, } from '../../internal/layout/project-settings-nav.js';
 import { useTranslations } from '../../i18n/index.js';
-import { AppWindowIcon, ChatsTeardropIcon, FoldersIcon, HardDrivesIcon } from '@phosphor-icons/react';
+import { AppWindowIcon, ChatsTeardropIcon, FoldersIcon, HardDrivesIcon, TargetIcon } from '@phosphor-icons/react';
 import { useMemo } from 'react';
 /**
  * Label, glyph, destination and availability of every customizable nav row,
@@ -21,12 +22,14 @@ export function useNavRowMeta(projectId) {
     const { customize: customizeTab, files: filesTarget } = useProjectNavRows(projectId);
     const appsVisible = useAppsRowVisible(projectId);
     const roomsVisible = useRoomsRowVisible(projectId);
+    const goalsVisible = useGoalsRowVisible(projectId);
     // Memoized on the gates, not rebuilt per render: the Customize sidebar
     // modal memoizes its rows on this object, and a fresh one per render would
     // re-render every row on every drag frame.
     return useMemo(() => {
         const appsHref = uiRoutes().apps(projectId);
         const roomsHref = uiRoutes().rooms(projectId);
+        const goalsHref = uiRoutes().goals(projectId);
         const files = filesTarget ? filesRow(projectId, filesTarget) : null;
         return {
             ...(customizeTab
@@ -56,6 +59,15 @@ export function useNavRowMeta(projectId) {
                     },
                 }
                 : {}),
+            ...(goalsVisible && goalsHref
+                ? {
+                    goals: {
+                        label: t('goals'),
+                        icon: _jsx(TargetIcon, {}),
+                        href: goalsHref,
+                    },
+                }
+                : {}),
             ...(files
                 ? {
                     files: {
@@ -66,5 +78,5 @@ export function useNavRowMeta(projectId) {
                 }
                 : {}),
         };
-    }, [t, tI18nComplete, projectId, customizeTab, appsVisible, roomsVisible, filesTarget]);
+    }, [t, tI18nComplete, projectId, customizeTab, appsVisible, roomsVisible, goalsVisible, filesTarget]);
 }