@kortix/ui 0.14.6 → 0.14.8

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-connect-bar.js

@@ -25,7 +25,8 @@ export function SessionTerminalConnectBar({ projectSessionId }) {
 export function SessionTerminalConnectSteps({ id, projectSessionId, }) {
     const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
     const installCmd = useDeploymentCliInstallCommand(undefined);
-    const connectCmd = `kortix sessions connect ${projectSessionId}`;
+    // A shell through the Kortix PTY: it works on every harness. `sessions connect` attaches OpenCode's own TUI and fails on pi.
+    const connectCmd = `kortix sessions shell ${projectSessionId}`;
     return (_jsxs("ol", { id: id, className: "space-y-3 pr-1.5 pb-3 pl-3", children: [_jsx(CommandStep, { label: tI18nComplete.raw('textd236e9cd730b'), command: installCmd }), _jsx(CommandStep, { label: tI18nComplete.raw('text842bad27af42'), command: connectCmd })] }));
 }
 function CommandStep({ label, command }) {

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/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

@@ -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, }) {

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/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]);
 }

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

@@ -1,6 +1,7 @@
 'use client';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { ProjectAppsNavItem } from './footer/project-apps-nav.js';
+import { ProjectGoalsNavItem } from './footer/project-goals-nav.js';
 import { ProjectRoomsNavItem } from './footer/project-rooms-nav.js';
 import { ProjectFilesNavItem } from './footer/project-files-nav.js';
 import { ProjectCustomizeNavItem } from '../../internal/layout/project-settings-nav.js';
@@ -95,5 +96,7 @@ function NavItem({ entry, projectId }) {
             return _jsx(ProjectFilesNavItem, { projectId: projectId });
         case 'rooms':
             return _jsx(ProjectRoomsNavItem, { projectId: projectId });
+        case 'goals':
+            return _jsx(ProjectGoalsNavItem, { projectId: projectId });
     }
 }

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

@@ -39,8 +39,8 @@ import { selectExpandedIds, useSessionExpandedStore } from '../../internal/store
 import { selectCollapsedSections, selectGroupMode, selectHiddenSections, selectLabelFilters, selectOrderMode, selectSourceFilters, selectStatusFilters, useSessionFilterStore, } from '../../internal/stores/session-filter-store.js';
 import { shouldBeginSessionSwitch, useSessionSwitchStore } from '../../internal/stores/session-switch-store.js';
 import { directSubsessions, createProjectSession, listChangeRequests, restartProjectSession, sessionParentId, stopProjectSession, } from '@kortix/sdk';
-import { qk, useProjectSession, useProjectSessions, useRuntimeSupports, useSessionChildren, } from '@kortix/sdk/react';
-import { ArchiveIcon, ArrowsSplitIcon, CaretRightIcon, DotsThreeIcon, PushPinIcon, PushPinSlashIcon, RobotIcon, GitForkIcon, PencilSimpleIcon, ArrowCounterClockwiseIcon as RotateCcw, ShareIcon as Share, SparkleIcon, SquareIcon as Square, TagIcon, TrashIcon, TreeViewIcon, } from '@phosphor-icons/react';
+import { qk, useProjectSession, useProjectSessions, useRuntimeSupports, useSessionChildren, useFeatureFlag, useSessionGoal, } from '@kortix/sdk/react';
+import { ArchiveIcon, ArrowsSplitIcon, CaretRightIcon, DotsThreeIcon, PushPinIcon, PushPinSlashIcon, RobotIcon, GitForkIcon, PencilSimpleIcon, ArrowCounterClockwiseIcon as RotateCcw, ShareIcon as Share, SparkleIcon, TargetIcon, SquareIcon as Square, TagIcon, TrashIcon, TreeViewIcon, } from '@phosphor-icons/react';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { formatDistanceToNowStrict } from 'date-fns';
 import { useUiPathname, useUiRouter, useUiSearchParams, useUiViewerId } from '../../providers/ui-provider.js';
@@ -549,7 +549,7 @@ function ProjectSessionRow({ session, href, isActive, isSwitching, onNavigate, d
     // same `reviewCount` prop, so they agree by construction rather than by luck.
     const displayStatus = sessionDisplayStatus(session, reviewCount);
     const waitingOn = awaitingAnswer ? 'answer' : 'review';
-    const sessionLink = (_jsxs(HoverPrefetchLink, { href: href, prefetch: true, onClick: onNavigate, ...openIntent, "aria-busy": isSwitching || undefined, "aria-current": isActive ? 'page' : undefined, "aria-describedby": descriptionId, className: "focus-visible:ring-kortix-base flex min-w-0 flex-1 items-center gap-2 self-stretch rounded-md py-1 focus-visible:ring-[0.6px] focus-visible:outline-none", children: [_jsx("div", { className: "size-4 shrink-0", children: spawned ? (_jsx(ArrowsSplitIcon, { "aria-hidden": true, className: "text-muted-foreground size-4" })) : (_jsx(SessionStatusDot, { session: session, reviewCount: reviewCount, waitingOn: waitingOn, changeRequests: changeRequests })) }), isMeta && (_jsx(Hint, { side: "top", label: t('metaCoordinator'), children: _jsx("span", { className: "text-muted-foreground flex size-4 shrink-0 items-center justify-center", children: _jsx(SparkleIcon, { className: "size-3.5", weight: "fill" }) }) })), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx(SessionTitle, { title: displayTitle, className: cn('min-w-0', isActive && 'font-medium') }), _jsx("span", { className: "hidden max-md:block pointer-coarse:block [@media(hover:none)]:block", "aria-hidden": true, "data-session-mobile-created-at": "true", children: _jsx(MobileSessionCreatedTime, { createdAt: session.created_at }) })] }), subagentCount + spawnedCount > 0 && onToggleChildRuns && (_jsx(ChildRunsToggle, { count: subagentCount + spawnedCount, open: childRunsOpen, onToggle: onToggleChildRuns, clearOfMenu: !hasIndicators })), hasIndicators && (_jsxs("div", { className: cn('flex shrink-0 items-center gap-0 transition-none', 'max-md:hidden pointer-coarse:hidden [@media(hover:none)]:hidden', 'group-hover/session-list:pointer-events-none group-hover/session-list:opacity-0', 'group-has-data-[state=open]/session-list:pointer-events-none group-has-data-[state=open]/session-list:opacity-0'), "data-session-indicators": "true", children: [showStarter && (_jsx("span", { className: "flex size-5 shrink-0 items-center justify-center", "data-session-source": "true", "data-session-starter": starter.type, children: _jsx(Hint, { side: "top", label: t('startedByLabel', { name: starter.label }), children: _jsx("span", { className: "text-muted-foreground flex size-5 items-center justify-center", children: _jsx(SessionStarterMark, { session: session, starter: starter, iconClassName: "size-3", avatarClassName: "size-5" }) }) }) })), !inSharedGroup && _jsx(SessionSharedIcon, { session: session })] }))] }));
+    const sessionLink = (_jsxs(HoverPrefetchLink, { href: href, prefetch: true, onClick: onNavigate, ...openIntent, "aria-busy": isSwitching || undefined, "aria-current": isActive ? 'page' : undefined, "aria-describedby": descriptionId, className: "focus-visible:ring-kortix-base flex min-w-0 flex-1 items-center gap-2 self-stretch rounded-md py-1 focus-visible:ring-[0.6px] focus-visible:outline-none", children: [_jsx("div", { className: "size-4 shrink-0", children: spawned ? (_jsx(ArrowsSplitIcon, { "aria-hidden": true, className: "text-muted-foreground size-4" })) : (_jsx(SessionStatusDot, { session: session, reviewCount: reviewCount, waitingOn: waitingOn, changeRequests: changeRequests })) }), _jsx(SessionGoalMark, { projectId: session.project_id, sessionId: session.session_id }), isMeta && (_jsx(Hint, { side: "top", label: t('metaCoordinator'), children: _jsx("span", { className: "text-muted-foreground flex size-4 shrink-0 items-center justify-center", children: _jsx(SparkleIcon, { className: "size-3.5", weight: "fill" }) }) })), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx(SessionTitle, { title: displayTitle, className: cn('min-w-0', isActive && 'font-medium') }), _jsx("span", { className: "hidden max-md:block pointer-coarse:block [@media(hover:none)]:block", "aria-hidden": true, "data-session-mobile-created-at": "true", children: _jsx(MobileSessionCreatedTime, { createdAt: session.created_at }) })] }), subagentCount + spawnedCount > 0 && onToggleChildRuns && (_jsx(ChildRunsToggle, { count: subagentCount + spawnedCount, open: childRunsOpen, onToggle: onToggleChildRuns, clearOfMenu: !hasIndicators })), hasIndicators && (_jsxs("div", { className: cn('flex shrink-0 items-center gap-0 transition-none', 'max-md:hidden pointer-coarse:hidden [@media(hover:none)]:hidden', 'group-hover/session-list:pointer-events-none group-hover/session-list:opacity-0', 'group-has-data-[state=open]/session-list:pointer-events-none group-has-data-[state=open]/session-list:opacity-0'), "data-session-indicators": "true", children: [showStarter && (_jsx("span", { className: "flex size-5 shrink-0 items-center justify-center", "data-session-source": "true", "data-session-starter": starter.type, children: _jsx(Hint, { side: "top", label: t('startedByLabel', { name: starter.label }), children: _jsx("span", { className: "text-muted-foreground flex size-5 items-center justify-center", children: _jsx(SessionStarterMark, { session: session, starter: starter, iconClassName: "size-3", avatarClassName: "size-5" }) }) }) })), !inSharedGroup && _jsx(SessionSharedIcon, { session: session })] }))] }));
     return (_jsx("div", { className: "group/session-list block", children: _jsxs("div", { className: cn(
             // --session-row-surface paints the row AND the title fade in the same
             // style pass. Do not transition background — transition-colors made the
@@ -602,6 +602,15 @@ function ProjectSubsessionRow({ id, title, href, isActive, createdAt, updatedAt,
         : '';
     return (_jsx(SubagentHoverCard, { id: id, title: title, createdAt: createdAt, updatedAt: updatedAt, children: _jsx(HoverPrefetchLink, { href: href, className: "block", children: _jsxs("div", { className: cn('flex h-8 cursor-pointer items-center gap-2 rounded-lg px-2 text-sm', isActive ? 'bg-sidebar-accent text-sidebar-foreground font-medium' : ''), children: [_jsx(RobotIcon, { "aria-hidden": true, className: "text-muted-foreground size-4 shrink-0" }), _jsx("span", { className: cn('flex-1 truncate', isActive && 'font-medium'), children: title }), relative && _jsx("span", { className: SESSION_RELATIVE_TIME_CLASS, children: relative })] }) }) }));
 }
+/** A target beside a session that runs a goal (flag `goals`); the hint names the goal. */
+function SessionGoalMark({ projectId, sessionId }) {
+    const tGoals = useTranslations('goals');
+    const flag = useFeatureFlag(projectId, 'goals');
+    const { goal, role } = useSessionGoal(flag.enabled ? projectId : null, sessionId);
+    if (!goal || role !== 'coordinator')
+        return null;
+    return (_jsx(Hint, { side: "top", label: `${tGoals('sessionChip')}: ${goal.goal?.objective ?? goal.slug}`, children: _jsx("span", { className: "text-muted-foreground flex size-4 shrink-0 items-center justify-center", "data-testid": "session-goal-mark", children: _jsx(TargetIcon, { className: "size-3.5" }) }) }));
+}
 function SessionStatusDot({ session, reviewCount = 0, waitingOn, changeRequests, }) {
     const display = sessionDisplayStatus(session, reviewCount);
     return (_jsx("div", { className: "flex size-4 shrink-0 items-center justify-center", children: _jsx(SessionStatusMark, { status: display, waitingOn: waitingOn, overdue: isReviewOverdue(changeRequests) }) }));

package/dist/workspace/sidebar/session-brief-hover-card.js

@@ -11,7 +11,7 @@ import { menuRow } from '../../primitives/menu-recipe.js';
 import { CR_ID_PREFIX } from '../review/review-actions.js';
 import { reviewHref } from '../../internal/lib/capability-tab-routes.js';
 import { useTranslations } from '../../i18n/index.js';
-import { useSessionHoverStore } from '../../internal/stores/session-hover-store.js';
+import { sessionRowHoverHandlers, useSessionHoverStore } from '../../internal/stores/session-hover-store.js';
 import { ArrowsSplitIcon, GitDiffIcon, RobotIcon } from '@phosphor-icons/react';
 import { formatDistanceToNowStrict } from 'date-fns';
 import { Slot } from 'radix-ui';
@@ -150,6 +150,33 @@ export function SessionBriefCardHost() {
         el.style.transform = `translate(${rect.right}px, ${top}px)`;
         shown.current = true;
     }, [visible, activeSessionId, anchor, via]);
+    // Native listeners, not React's `onPointerEnter/Leave`. The card's content is
+    // portaled in from the row, so in React's tree it is the row's child, not
+    // this wrapper's: React fired the wrapper's leave the moment the pointer
+    // crossed from the gap onto the content, and the card closed under a pointer
+    // on its way to the Review link. The DOM tree is the one the pointer is in.
+    useEffect(() => {
+        const el = wrapperRef.current;
+        if (!el)
+            return;
+        const active = () => useSessionHoverStore.getState().activeSessionId;
+        const onEnter = () => {
+            const id = active();
+            if (id)
+                openSession(id);
+        };
+        const onLeave = () => {
+            const id = active();
+            if (id)
+                closeSession(id);
+        };
+        el.addEventListener('pointerenter', onEnter);
+        el.addEventListener('pointerleave', onLeave);
+        return () => {
+            el.removeEventListener('pointerenter', onEnter);
+            el.removeEventListener('pointerleave', onLeave);
+        };
+    }, [openSession, closeSession]);
     // WCAG 1.4.13: dismissible without moving the pointer. A scroll moves the
     // row away from the card, so it closes too, unless it scrolls the card itself.
     useEffect(() => {
@@ -169,7 +196,7 @@ export function SessionBriefCardHost() {
             window.removeEventListener('resize', dismiss);
         };
     }, [visible, dismiss]);
-    return createPortal(_jsx("div", { ref: wrapperRef, "data-slot": "session-brief-card", className: cn('fixed top-0 left-0 pl-3.5 starting:opacity-0', !visible && 'hidden'), style: { zIndex: floatingZ(depth) }, onPointerEnter: () => activeSessionId && openSession(activeSessionId), onPointerLeave: () => activeSessionId && closeSession(activeSessionId), children: _jsx("div", { ref: setSlot, className: cn(FLOATING_PANEL_SURFACE, 'w-72 overflow-hidden rounded-md shadow-xs') }) }), container ?? document.body);
+    return createPortal(_jsx("div", { ref: wrapperRef, "data-slot": "session-brief-card", className: cn('fixed top-0 left-0 pl-3.5 starting:opacity-0', !visible && 'hidden'), style: { zIndex: floatingZ(depth) }, children: _jsx("div", { ref: setSlot, className: cn(FLOATING_PANEL_SURFACE, 'w-72 overflow-hidden rounded-md shadow-xs') }) }), container ?? document.body);
 }
 /**
  * A row's trigger plus its brief, rendered into the shared card while the row
@@ -180,20 +207,17 @@ export function SessionBriefCardHost() {
 function SessionBriefCard({ id, children, content, }) {
     const open = useSessionHoverStore((state) => state.activeSessionId === id);
     const slot = useSessionHoverStore((state) => state.slot);
-    const openSession = useSessionHoverStore((state) => state.openSession);
-    const closeSession = useSessionHoverStore((state) => state.closeSession);
     // A row can be filtered out, or the sidebar unmounted, while its card shows.
     // Without this the store keeps naming a row that no longer exists and the
-    // group is still warm the next time the list mounts.
+    // group is still warm the next time the list mounts. A row unmounted under
+    // the pointer gets no pointerleave, so its click's suppression ends here too.
     useEffect(() => () => {
         const store = useSessionHoverStore.getState();
         if (store.activeSessionId === id)
             store.dismiss();
+        store.release(id);
     }, [id]);
-    return (_jsxs(_Fragment, { children: [_jsx(Slot.Root, { "data-state": open ? 'open' : 'closed', onPointerEnter: (event) => {
-                    if (event.pointerType !== 'touch')
-                        openSession(id, event.currentTarget, 'pointer');
-                }, onPointerLeave: () => closeSession(id), onFocus: (event) => openSession(id, event.currentTarget, 'focus'), onBlur: () => closeSession(id), children: children }), open && slot ? createPortal(content, slot) : null] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Slot.Root, { "data-state": open ? 'open' : 'closed', ...sessionRowHoverHandlers(id), children: children }), open && slot ? createPortal(content, slot) : null] }));
 }
 export function SessionBriefHoverCard({ sessionId, children, ...brief }) {
     const dismiss = useSessionHoverStore((state) => state.dismiss);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kortix/ui",
-  "version": "0.14.6",
+  "version": "0.14.8",
   "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",
@@ -911,6 +911,10 @@
       "types": "./dist/internal/capture/use-capture-area.d.ts",
       "import": "./dist/internal/capture/use-capture-area.js"
     },
+    "./internal/components/agent-mark": {
+      "types": "./dist/internal/components/agent-mark.d.ts",
+      "import": "./dist/internal/components/agent-mark.js"
+    },
     "./internal/components/hover-prefetch-link": {
       "types": "./dist/internal/components/hover-prefetch-link.d.ts",
       "import": "./dist/internal/components/hover-prefetch-link.js"
@@ -1463,6 +1467,10 @@
       "types": "./dist/markdown/setup-links/api-base.d.ts",
       "import": "./dist/markdown/setup-links/api-base.js"
     },
+    "./markdown/setup-links/app-credentials-form": {
+      "types": "./dist/markdown/setup-links/app-credentials-form.d.ts",
+      "import": "./dist/markdown/setup-links/app-credentials-form.js"
+    },
     "./markdown/setup-links/approval-decision": {
       "types": "./dist/markdown/setup-links/approval-decision.d.ts",
       "import": "./dist/markdown/setup-links/approval-decision.js"
@@ -2157,7 +2165,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.6",
+    "@kortix/llm-catalog": "0.14.8",
     "@lezer/highlight": "1.2.3",
     "@paper-design/shaders-react": "^0.0.76",
     "@phosphor-icons/react": "2.1.10",
@@ -2214,7 +2222,7 @@
     "heic2any": "0.0.4",
     "i18next": "^26.3.6",
     "jszip": "^3.10.1",
-    "katex": "^0.16.22",
+    "katex": "^0.18.7",
     "maplibre-gl": "6.12.0",
     "mermaid": "^11.12.0",
     "motion": "^12.40.0",
@@ -2246,7 +2254,7 @@
     "zustand": "^5.0.3"
   },
   "peerDependencies": {
-    "@kortix/sdk": "^0.14.6",
+    "@kortix/sdk": "^0.14.8",
     "@tanstack/react-query": "^5.75.2",
     "@types/react": ">=18",
     "react": ">=19",

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

@@ -373,6 +373,8 @@ export function Sessions({ projectId }: { projectId: string }) {
 }
 ```
 
+Goals (behind the `goals` flag): `GoalStatusBadge` (a goal's status), `GoalHealthDot` (green running, orange needs attention, grey closed), `useGoalIssueText` (one sentence per health issue), `goalProgress` (met and total criteria), `goalOpenAsks` (asks waiting on a person), `goalNeedsYou` (an open ask or a health issue), `formatGoalTime` (the reminders time format), `goalHref` (the goal's page, or null), `useGoalClock` (the current time, re-read every 30 s).
+
 Names: `ProjectPageHeader`, `useCapabilityAccess`, `useProjectNavRows`, `SidebarToggle`, `activeCapabilityTab`, `agentHref`, `capabilityTabHref`, `channelsHref`, `remindersHref`, `reviewHref`, `detectManifestVersion`, `manifestFilename`, `manifestNeedsUpgrade`, `useProjectManifestVersion`, `ManifestVersion`, `CUSTOMIZE_SECTION_ACCESS`, `CUSTOMIZE_SECTION_GATE_ACTIONS`, `PROJECT_ACTIONS`, `isCustomizeSectionVisible`, `CustomizeSection`, `ProjectAction`, `usePermission`, `usePermissions`, `usePermissionsFor`, `PROJECT_PAGE_ACTIONS`, `useProjectCan`, `useProjectCans`, `useProjectPageCans`, `CanResult`, `formatFireTime`, `nearestFire`, `reminderTitle`, `scheduleLabel`, `ProjectHomeWallpaper`, `ProjectHomeWelcomeBody`, `InstantSessionShell`, `ProjectFilesView`, `ProjectHome`, `ProjectHomeSendOptions`, `useProjectHomeSend`, `UseProjectHomeSendOptions`, `SavedSessionSkeleton`, `SessionLayout`, `SessionWorkspace`, `SessionLayoutProps`, `SessionWorkspaceProps`, `ProjectSessionsView`, `ProjectSessionList`, `ProjectSidebar`, `ShareSessionModal`
 
 ## `@kortix/ui/access`

package/dist/session/status/use-readiness-settling.d.ts

@@ -1,18 +0,0 @@
-/**
- * How long a freshly mounted session may say NOTHING about its runtime.
- *
- * Long enough to cover the first health probe + `GET .../turn` round trip on a
- * healthy session (both answer well inside a second locally and on dev), short
- * enough that a genuinely parked box still announces its wake promptly. The
- * cost of being wrong in one direction is a false "your session dropped" flash
- * on every page load; in the other, a real wake notice arrives ~1.5s later.
- */
-export declare const READINESS_SETTLE_MS = 1500;
-/**
- * True while the runtime has not been contacted yet AND the mount is young.
- *
- * Feeds `sessionComposerReadiness({ settling })`, whose fallback would
- * otherwise assert "Waking this session up…" the instant a page loads — the
- * one claim nothing had checked. See that input's docstring.
- */
-export declare function useReadinessSettling(uncontacted: boolean, windowMs?: number): boolean;