@kortix/ui 0.14.5 → 0.14.7

package/dist/internal/hooks/use-auto-scroll.js

@@ -1,5 +1,5 @@
 'use client';
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { OWN_SCROLL_MS, chevronVisible, isAtEnd, keyScrollIntentFor, pickAnchorIndex, prefersReducedMotion, roomUnderNewestTurn, settleMotion, shouldReleaseFollow, } from './use-auto-scroll-physics.js';
 export { AT_END_PX, BOTTOM_GAP_PX, CHEVRON_PX, GLIDE_MIN_PX, OWN_SCROLL_MS, TURN_TOP_OFFSET, chevronVisible, classifyScrollKey, isAtEnd, isEditableTarget, isSpaceActivatedTarget, keyScrollIntentFor, pickAnchorIndex, roomUnderNewestTurn, settleMotion, shouldReleaseFollow, } from './use-auto-scroll-physics.js';
 /**
@@ -234,7 +234,9 @@ export function useAutoScroll({ hasContent = false, } = {}) {
         markOwnScroll(OWN_SCROLL_MS);
         el.scrollTop = end;
     }, [sizeRoom, glideTo, markOwnScroll]);
-    settleRef.current = settle;
+    useLayoutEffect(() => {
+        settleRef.current = settle;
+    }, [settle]);
     const goToEnd = useCallback((behavior) => {
         const el = scrollRef.current;
         if (!el)
@@ -455,7 +457,7 @@ export function useAutoScroll({ hasContent = false, } = {}) {
             document.removeEventListener('keydown', onKeyDown, { capture: true });
             el.removeEventListener('scroll', onScroll);
         };
-    }, [goToEnd, endGlide, hasContent, setFollow, markOwnScroll]);
+    }, [goToEnd, endGlide, hasContent, setFollow]);
     return {
         scrollRef,
         contentRef,

package/dist/internal/lib/query-client-singleton.d.ts

@@ -3,7 +3,13 @@ import type { QueryClient } from '@tanstack/react-query';
 export declare function registerQueryClient(client: QueryClient): void;
 export declare function getSharedQueryClient(): QueryClient | null;
 /**
- * Run `run` with the shared client — now if it is registered, else as soon as
- * it registers. A one-shot: it fires once and is forgotten.
+ * Run `run` with the shared client now (if one is registered), and again with
+ * every DIFFERENT client registered later. Returns the unsubscribe.
+ *
+ * AuthProvider sits ABOVE ReactQueryProvider, and #10344 mounts the app shell
+ * one auth round trip sooner, so a caller can ask before any client exists.
+ * `ReactQueryProvider` registers during render, and React can discard that
+ * render (a hydration retry, a suspension, Strict Mode) and commit a second
+ * client: a caller that ran once would hold a client the app no longer reads.
  */
-export declare function whenQueryClientReady(run: (client: QueryClient) => void): void;
+export declare function onEachQueryClient(run: (client: QueryClient) => void): () => void;

package/dist/internal/lib/query-client-singleton.js

@@ -8,27 +8,33 @@
  * from the central reset helper.
  */
 let sharedQueryClient = null;
-let waiters = [];
+/** `onEachQueryClient` subscribers. replica-local: one tab's app. */
+const followers = new Set();
 export function registerQueryClient(client) {
+    if (sharedQueryClient === client)
+        return;
     sharedQueryClient = client;
-    // AuthProvider sits ABOVE ReactQueryProvider, and #10344 mounts the app
-    // shell one auth round trip sooner, so `adoptDeviceCaches` can run before
-    // this registers. Flush anyone who asked for the client before it existed.
-    const pending = waiters;
-    waiters = [];
-    for (const run of pending)
+    for (const run of [...followers])
         run(client);
 }
 export function getSharedQueryClient() {
     return sharedQueryClient;
 }
 /**
- * Run `run` with the shared client — now if it is registered, else as soon as
- * it registers. A one-shot: it fires once and is forgotten.
+ * Run `run` with the shared client now (if one is registered), and again with
+ * every DIFFERENT client registered later. Returns the unsubscribe.
+ *
+ * AuthProvider sits ABOVE ReactQueryProvider, and #10344 mounts the app shell
+ * one auth round trip sooner, so a caller can ask before any client exists.
+ * `ReactQueryProvider` registers during render, and React can discard that
+ * render (a hydration retry, a suspension, Strict Mode) and commit a second
+ * client: a caller that ran once would hold a client the app no longer reads.
  */
-export function whenQueryClientReady(run) {
+export function onEachQueryClient(run) {
+    followers.add(run);
     if (sharedQueryClient)
         run(sharedQueryClient);
-    else
-        waiters.push(run);
+    return () => {
+        followers.delete(run);
+    };
 }

package/dist/internal/notifications/notification-rows.js

@@ -44,10 +44,11 @@ export function newArrivals(seen, rows) {
  * is not.
  */
 export function planArrivals(fresh, context) {
+    const unseen = new Set(context.unseen);
     const announce = fresh
         .filter((row) => !row.session_id ||
         (!context.onScreen(row.session_id) &&
-            !(row.kind === 'turn_done' && context.unseen.includes(row.session_id))))
+            !(row.kind === 'turn_done' && unseen.has(row.session_id))))
         .slice(0, MAX_ARRIVAL_ALERTS);
     return context.os ? { toast: [], os: announce } : { toast: announce, os: [] };
 }

package/dist/internal/outcomes/outcome-types.d.ts

@@ -49,6 +49,11 @@ export interface OutcomeAction {
     intent: 'open' | 'link';
     /** Required when `intent` is `link`; ignored otherwise. */
     href?: string;
+    /**
+     * For `open`: the source id the modal opens when it is not this outcome's
+     * own. A superseded change request opens its replacement (KRTX-3031).
+     */
+    target?: string;
 }
 export interface Outcome {
     /**

package/dist/internal/share/session-shares-modal.js

@@ -16,13 +16,13 @@ import { isShareLive, publicShareUrl, shareListState, useRevokePublicShare, useS
 import { cn } from '../../lib/utils.js';
 function ShareRow({ share, onRevoke, isRevoking, }) {
     const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
-    const tTranscript = useTranslations('hardcodedUi.publicTranscriptShare');
     const [copied, setCopied] = useState(false);
     const live = isShareLive(share);
     // Read at render time: `publicShareUrl` is null outside a browser (SSR).
     const url = publicShareUrl(share.public_path);
     const isFile = share.resource_type === 'file';
-    // A transcript share has no port and no file: it names the conversation.
+    // A legacy transcript share (revoked; the feature is removed) still carries
+    // no port and no file: its label is the row's own meta.
     const isTranscript = share.resource_type === 'transcript';
     const Icon = isFile ? FileText : isTranscript ? ChatText : Globe;
     const copy = async () => {
@@ -33,11 +33,7 @@ function ShareRow({ share, onRevoke, isRevoking, }) {
         successToast(tI18nComplete.raw('textd0f24de8dbc6'));
         setTimeout(() => setCopied(false), 2000);
     };
-    return (_jsxs("li", { className: cn('group bg-popover flex items-center gap-3 rounded-md border px-4 py-2.5 transition-colors', !live && 'opacity-60'), children: [_jsx("span", { className: cn('flex size-9 shrink-0 items-center justify-center rounded-sm', live ? 'bg-kortix-green/15' : 'bg-muted'), children: _jsx(Icon, { className: cn('size-5', live ? 'text-kortix-green' : 'text-muted-foreground') }) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("span", { className: "truncate text-sm font-medium", children: share.label }), !live && (_jsx(Badge, { variant: "outline", size: "xs", children: share.revoked_at ? 'Revoked' : 'Expired' }))] }), _jsx("p", { className: "text-muted-foreground truncate text-xs", children: isFile
-                            ? share.file_path
-                            : isTranscript
-                                ? tTranscript('rowMeta')
-                                : `Port ${share.port}${share.path}` })] }), live && (_jsxs("span", { className: "flex shrink-0 items-center gap-1", children: [_jsx(Hint, { label: copied ? 'Copied' : tI18nComplete.raw('textdbf362d4f210'), side: "bottom", children: _jsx(Button, { variant: "ghost", size: "icon", "aria-label": tI18nComplete.raw('textdbf362d4f210'), disabled: !url, onClick: () => void copy(), className: "size-8 active:scale-[0.96]", children: copied ? (_jsx(Check, { className: "text-kortix-green size-4" })) : (_jsx(Link2, { className: "size-4" })) }) }), _jsxs(Button, { variant: "ghost", size: "sm", onClick: onRevoke, disabled: isRevoking, children: [isRevoking ? _jsx(Loading, { className: "size-4 shrink-0" }) : null, tI18nComplete.raw('text87e6d00bbf53')] })] }))] }));
+    return (_jsxs("li", { className: cn('group bg-popover flex items-center gap-3 rounded-md border px-4 py-2.5 transition-colors', !live && 'opacity-60'), children: [_jsx("span", { className: cn('flex size-9 shrink-0 items-center justify-center rounded-sm', live ? 'bg-kortix-green/15' : 'bg-muted'), children: _jsx(Icon, { className: cn('size-5', live ? 'text-kortix-green' : 'text-muted-foreground') }) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("span", { className: "truncate text-sm font-medium", children: share.label }), !live && (_jsx(Badge, { variant: "outline", size: "xs", children: share.revoked_at ? 'Revoked' : 'Expired' }))] }), _jsx("p", { className: "text-muted-foreground truncate text-xs", children: isFile ? share.file_path : isTranscript ? share.label : `Port ${share.port}${share.path}` })] }), live && (_jsxs("span", { className: "flex shrink-0 items-center gap-1", children: [_jsx(Hint, { label: copied ? 'Copied' : tI18nComplete.raw('textdbf362d4f210'), side: "bottom", children: _jsx(Button, { variant: "ghost", size: "icon", "aria-label": tI18nComplete.raw('textdbf362d4f210'), disabled: !url, onClick: () => void copy(), className: "size-8 active:scale-[0.96]", children: copied ? (_jsx(Check, { className: "text-kortix-green size-4" })) : (_jsx(Link2, { className: "size-4" })) }) }), _jsxs(Button, { variant: "ghost", size: "sm", onClick: onRevoke, disabled: isRevoking, children: [isRevoking ? _jsx(Loading, { className: "size-4 shrink-0" }) : null, tI18nComplete.raw('text87e6d00bbf53')] })] }))] }));
 }
 export function SessionSharesModal({ projectId, sessionId, open, onOpenChange, }) {
     const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');

package/dist/internal/stores/kortix-computer-store.js

@@ -173,6 +173,20 @@ export const useKortixComputerStore = create()(devtools((set, get) => ({
             get().setIsActionPanelOpen(true);
     },
     setActiveSession: (sessionId, continuity) => {
+        const nextProjectSessionId = continuity?.projectSessionId ?? null;
+        const nextIsTransient = continuity?.transient ?? false;
+        // The boot shell of the session whose real chat already owns the right
+        // side. The two layers mount in either order, and the chat holds the
+        // panel's content: a shell that took over kept the right side after it
+        // faded out, so ⌘I reopened the cards instead of the detail it had
+        // just hidden (KRTX-2944). Not a session change, so nothing moves.
+        if (nextIsTransient &&
+            nextProjectSessionId !== null &&
+            get()._activeSessionId !== null &&
+            !get()._activeIsTransient &&
+            get()._activeProjectSessionId === nextProjectSessionId) {
+            return;
+        }
         // A quick-view is an intent about the session it was made in — it must
         // not replay when some other session mounts later. Cleared even on the
         // no-op re-activation path below, or a request planted for another
@@ -182,8 +196,6 @@ export const useKortixComputerStore = create()(devtools((set, get) => ({
             set({ pendingQuickView: null });
         }
         const prev = get()._activeSessionId;
-        const nextProjectSessionId = continuity?.projectSessionId ?? null;
-        const nextIsTransient = continuity?.transient ?? false;
         if (prev === sessionId) {
             // Same layout re-activating (e.g. the shell flipping transient→ready
             // state, or a tab refocus): keep the continuity bookkeeping fresh so

package/dist/internal/stores/session-hover-store.d.ts

@@ -59,6 +59,38 @@ interface SessionHoverState {
     closeSession: (sessionId: string) => void;
     /** Immediate, for a click that opens something else and for unmount. */
     dismiss: () => void;
+    /**
+     * The row whose session a click just opened. Its card would only describe
+     * the page on screen, so it stays shut until the pointer leaves the row.
+     * Unselected, like `warm`.
+     */
+    suppressedSessionId: string | null;
+    suppress: (sessionId: string) => void;
+    release: (sessionId: string) => void;
 }
 export declare const useSessionHoverStore: import("zustand").UseBoundStore<import("zustand").StoreApi<SessionHoverState>>;
+type RowTarget = {
+    matches?: (selector: string) => boolean;
+};
+/**
+ * A session row's hover wiring (KRTX-2847). The press focuses the row and the
+ * pointer rests on it, so without the click handler every switch showed the
+ * card of the session just opened, 200 ms later, until the page took focus.
+ * Focus leaving the row releases it only when the pointer is elsewhere: the
+ * new page takes focus while the pointer still rests on the row.
+ */
+export declare function sessionRowHoverHandlers(id: string): {
+    onPointerEnter: (event: {
+        pointerType: string;
+        currentTarget: RowTarget;
+    }) => void;
+    onPointerLeave: () => void;
+    onFocus: (event: {
+        currentTarget: RowTarget;
+    }) => void;
+    onBlur: (event: {
+        currentTarget: RowTarget;
+    }) => void;
+    onClick: () => void;
+};
 export {};

package/dist/internal/stores/session-hover-store.js

@@ -65,8 +65,11 @@ export const useSessionHoverStore = create((set, get) => ({
     via: 'pointer',
     slot: null,
     warm: false,
+    suppressedSessionId: null,
     setSlot: (slot) => set({ slot }),
     openSession: (sessionId, anchor, via = 'pointer') => {
+        if (get().suppressedSessionId === sessionId)
+            return;
         closeTimer = cancel(closeTimer);
         warmTimer = cancel(warmTimer);
         // A pending open belongs to whichever row the pointer has just left.
@@ -106,4 +109,39 @@ export const useSessionHoverStore = create((set, get) => ({
         warmTimer = cancel(warmTimer);
         set({ activeSessionId: null, warm: false });
     },
+    suppress: (sessionId) => {
+        set({ suppressedSessionId: sessionId });
+        get().dismiss();
+    },
+    release: (sessionId) => {
+        if (get().suppressedSessionId === sessionId)
+            set({ suppressedSessionId: null });
+    },
 }));
+/**
+ * A session row's hover wiring (KRTX-2847). The press focuses the row and the
+ * pointer rests on it, so without the click handler every switch showed the
+ * card of the session just opened, 200 ms later, until the page took focus.
+ * Focus leaving the row releases it only when the pointer is elsewhere: the
+ * new page takes focus while the pointer still rests on the row.
+ */
+export function sessionRowHoverHandlers(id) {
+    const store = () => useSessionHoverStore.getState();
+    return {
+        onPointerEnter: (event) => {
+            if (event.pointerType !== 'touch')
+                store().openSession(id, event.currentTarget, 'pointer');
+        },
+        onPointerLeave: () => {
+            store().release(id);
+            store().closeSession(id);
+        },
+        onFocus: (event) => store().openSession(id, event.currentTarget, 'focus'),
+        onBlur: (event) => {
+            if (!event.currentTarget.matches?.(':hover'))
+                store().release(id);
+            store().closeSession(id);
+        },
+        onClick: () => store().suppress(id),
+    };
+}

package/dist/internal/stores/sidebar-nav-store.d.ts

@@ -8,7 +8,7 @@
  * (`customize-sidebar-modal.tsx` syncs it). A row a project does not offer (a flag is off, a permission is denied)
  * keeps its place here and simply does not render.
  */
-export declare const SIDEBAR_NAV_ITEM_IDS: readonly ["customize", "apps", "files", "rooms"];
+export declare const SIDEBAR_NAV_ITEM_IDS: readonly ["customize", "apps", "files", "rooms", "goals"];
 export type SidebarNavItemId = (typeof SIDEBAR_NAV_ITEM_IDS)[number];
 /**
  * `never` moves the row into the More menu (`project-nav-items.tsx`), so its

package/dist/internal/stores/sidebar-nav-store.js

@@ -13,7 +13,7 @@ import { registerPersistedStore, resetPersistedStore } from './persisted-store-r
  */
 // Review (2026-10-17) and Reminders (2026-10-19) left the sidebar for Customize
 // tabs. A saved layout that still names one drops the id in `normalizeSidebarNav`.
-export const SIDEBAR_NAV_ITEM_IDS = ['customize', 'apps', 'files', 'rooms'];
+export const SIDEBAR_NAV_ITEM_IDS = ['customize', 'apps', 'files', 'rooms', 'goals'];
 /** The layout before anyone customizes it. */
 export const SIDEBAR_NAV_DEFAULTS = [
     { id: 'customize', visibility: 'always' },
@@ -22,6 +22,8 @@ export const SIDEBAR_NAV_DEFAULTS = [
     // Rooms (2026-10-19, flag `agent_rooms`): chat rooms for sessions and people.
     // In the More menu until the person pins it (2026-10-20).
     { id: 'rooms', visibility: 'never' },
+    // Goals (2026-10-21, flag `goals`): objectives agents own until verified done.
+    { id: 'goals', visibility: 'always' },
 ];
 function isItemId(value) {
     return SIDEBAR_NAV_ITEM_IDS.includes(value);

package/dist/lib/routes.d.ts

@@ -22,6 +22,8 @@ export interface UiRoutes {
     apps: (projectId: string) => string | null;
     /** The project's chat rooms (flag `agent_rooms`). */
     rooms: (projectId: string) => string | null;
+    /** The project's goals (flag `goals`); a goal is `<goals>/<scope>/<slug>`. */
+    goals: (projectId: string) => string | null;
     members: (projectId: string) => string | null;
     /** The project settings page, on its sandbox section. */
     sandboxSettings: (projectId: string) => string | null;

package/dist/lib/routes.js

@@ -6,6 +6,7 @@ const DEFAULT_ROUTES = {
     drive: (p) => `/projects/${p}/drive`,
     apps: (p) => `/projects/${p}/apps`,
     rooms: (p) => `/projects/${p}/rooms`,
+    goals: (p) => `/projects/${p}/goals`,
     members: (p) => `/projects/${p}/members`,
     sandboxSettings: (p) => `/projects/${p}/config?section=sandbox`,
     customize: (p, path) => `/projects/${p}/customize${path ? `/${path}` : ''}`,

package/dist/markdown/code/inline-code.js

@@ -12,6 +12,7 @@ import { useSessionBrowserStore } from '../../internal/stores/session-browser-st
 import { useUiLink } from '../../providers/ui-provider.js';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { useInsideLink } from './inside-link-context.js';
+import { outputPathForName, useOutputPaths } from './output-paths-context.js';
 import { childrenToText } from './children-text.js';
 // Server-safe by design — see `inline-chip.tsx`. Re-exported so the client
 // consumers that already import them from here keep working.
@@ -114,6 +115,7 @@ export function ClickableInlineCode({ children }) {
     const { proxyUrl } = useSandboxProxy();
     const openPreview = useOpenPreviewLink();
     const insideLink = useInsideLink();
+    const outputPaths = useOutputPaths();
     const text = childrenToText(children).trim();
     // Before the URL and path checks: a hex is neither, and the test is a single
     // anchored regex against a string that is at most nine characters.
@@ -146,5 +148,11 @@ export function ClickableInlineCode({ children }) {
     if (looksLikeFilePath(text)) {
         return _jsx(FilePathCode, { text: text, children: children });
     }
+    // A bare filename (`claims.md`) is no path, but it may name one of this
+    // session's outputs: open that file, still showing the name.
+    const outputPath = outputPathForName(text, outputPaths);
+    if (outputPath) {
+        return _jsx(FilePathCode, { text: outputPath, children: children });
+    }
     return _jsx("code", { className: INLINE_CODE, children: children });
 }

package/dist/markdown/code/output-paths-context.d.ts

@@ -0,0 +1,18 @@
+/**
+ * The paths of the files this session produced: its Outputs.
+ *
+ * A reply names its deliverables by bare filename (`claims.md`), and a bare
+ * name is not a path, so it never linked. Opening it took Expand pane →
+ * Outputs → the file (KRTX-3023). Inline code that names exactly one of these
+ * outputs now opens it.
+ *
+ * Provider: `SessionPanelProvider`. Empty outside a session: nothing extra links.
+ */
+export declare const OutputPathsContext: import("react").Context<readonly string[]>;
+export declare const useOutputPaths: () => readonly string[];
+/**
+ * The output a bare filename names, or null: it is not a filename, no output
+ * has that name, or two different outputs share it and the reply does not say
+ * which.
+ */
+export declare function outputPathForName(text: string, paths: readonly string[]): string | null;

package/dist/markdown/code/output-paths-context.js

@@ -0,0 +1,35 @@
+'use client';
+import { createContext, useContext } from 'react';
+/**
+ * The paths of the files this session produced: its Outputs.
+ *
+ * A reply names its deliverables by bare filename (`claims.md`), and a bare
+ * name is not a path, so it never linked. Opening it took Expand pane →
+ * Outputs → the file (KRTX-3023). Inline code that names exactly one of these
+ * outputs now opens it.
+ *
+ * Provider: `SessionPanelProvider`. Empty outside a session: nothing extra links.
+ */
+export const OutputPathsContext = createContext([]);
+export const useOutputPaths = () => useContext(OutputPathsContext);
+const BARE_FILENAME = /^[\w@][\w@.-]*\.[A-Za-z0-9]+$/;
+/** `/workspace/a/b.md` and `a/b.md` are one file. */
+const sameFileKey = (path) => path.replace(/^\/workspace\//, '');
+/**
+ * The output a bare filename names, or null: it is not a filename, no output
+ * has that name, or two different outputs share it and the reply does not say
+ * which.
+ */
+export function outputPathForName(text, paths) {
+    if (!BARE_FILENAME.test(text))
+        return null;
+    let found = null;
+    for (const path of paths) {
+        if (path.slice(path.lastIndexOf('/') + 1) !== text)
+            continue;
+        if (found !== null && sameFileKey(found) !== sameFileKey(path))
+            return null;
+        found ??= path;
+    }
+    return found;
+}

package/dist/markdown/genui/components/charts.js

@@ -25,7 +25,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  */
 // eslint-disable-next-line no-restricted-imports -- screen-reader text for the figure; this module is reached only through lazy()
 import { genuiA11yText } from '@kortix/sdk/genui';
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import { Bar, BarChart, CartesianGrid, Cell, Line, LineChart, Pie, PieChart, XAxis, YAxis } from 'recharts';
 import { ChartContainer, ChartTooltip, ChartTooltipContent } from '../../../primitives/chart.js';
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from '../../../primitives/dialog.js';
@@ -95,7 +95,7 @@ function PieFigure({ variant, slices, total, unit, format, tooltip, focus, }) {
         const restTotal = rest.reduce((sum, slice) => sum + slice.value, 0);
         const block = (slice, i) => {
             const small = i > 0 && slice.value / restTotal < 0.12;
-            return (_jsxs(HoverCard, { openDelay: 80, closeDelay: 40, children: [_jsx(HoverCardTrigger, { asChild: true, children: _jsx("div", { tabIndex: 0, onMouseEnter: () => focus.hover(slice.key), onMouseLeave: () => focus.hover(null), onClick: () => focus.toggle(slice.key), "aria-label": `${slice.label}: ${format(slice.value)} (${slice.percent}%)`, className: cn('focus-visible:ring-ring duration-fast flex min-h-1.5 min-w-0 flex-col justify-between overflow-hidden rounded-md transition-opacity outline-none focus-visible:ring-2', small ? 'p-0' : 'p-3', i < 2 ? 'text-background' : 'text-foreground'), style: { backgroundColor: PIE_RAMP[i], flexGrow: slice.value, flexBasis: 0, opacity: dimmed(focus, slice.key) }, children: small ? null : (_jsxs(_Fragment, { children: [_jsx("span", { className: "truncate text-xs", children: slice.label }), _jsxs("span", { className: cn('truncate tabular-nums', i === 0 ? 'text-2xl font-medium' : 'text-sm'), children: [slice.percent, "%"] })] })) }) }), _jsxs(HoverCardContent, { side: "top", className: "flex w-auto min-w-40 flex-col gap-1 p-3", children: [_jsxs("span", { className: "text-foreground flex items-center gap-2 text-sm font-medium", children: [dot(slice.fill), slice.label] }), _jsxs("span", { className: "text-muted-foreground font-mono text-xs tabular-nums", children: [unit ? `${format(slice.value)} ${unit}` : format(slice.value), " \u00B7 ", slice.percent, "%"] })] })] }, slice.key));
+            return (_jsxs(HoverCard, { openDelay: 80, closeDelay: 40, children: [_jsx(HoverCardTrigger, { asChild: true, children: _jsx("button", { type: "button", onMouseEnter: () => focus.hover(slice.key), onMouseLeave: () => focus.hover(null), onClick: () => focus.toggle(slice.key), "aria-label": `${slice.label}: ${format(slice.value)} (${slice.percent}%)`, className: cn('focus-visible:ring-ring duration-fast flex min-h-1.5 min-w-0 flex-col justify-between overflow-hidden rounded-md text-left transition-opacity outline-none focus-visible:ring-2', small ? 'p-0' : 'p-3', i < 2 ? 'text-background' : 'text-foreground'), style: { backgroundColor: PIE_RAMP[i], flexGrow: slice.value, flexBasis: 0, opacity: dimmed(focus, slice.key) }, children: small ? null : (_jsxs(_Fragment, { children: [_jsx("span", { className: "truncate text-xs", children: slice.label }), _jsxs("span", { className: cn('truncate tabular-nums', i === 0 ? 'text-2xl font-medium' : 'text-sm'), children: [slice.percent, "%"] })] })) }) }), _jsxs(HoverCardContent, { side: "top", className: "flex w-auto min-w-40 flex-col gap-1 p-3", children: [_jsxs("span", { className: "text-foreground flex items-center gap-2 text-sm font-medium", children: [dot(slice.fill), slice.label] }), _jsxs("span", { className: "text-muted-foreground font-mono text-xs tabular-nums", children: [unit ? `${format(slice.value)} ${unit}` : format(slice.value), " \u00B7 ", slice.percent, "%"] })] })] }, slice.key));
         };
         return (_jsxs("div", { className: "flex min-h-0 flex-1 gap-1", children: [block(first, 0), rest.length > 0 ? (_jsx("div", { className: "flex min-w-0 flex-col gap-1", style: { flexGrow: restTotal, flexBasis: 0 }, children: rest.map((slice, i) => block(slice, i + 1)) })) : null] }));
     }
@@ -118,11 +118,11 @@ export function ChartView({ node, props }) {
     const t = useTranslations('genui');
     const focus = useFocus();
     const locale = useLocale();
+    const number = useMemo(() => new Intl.NumberFormat(locale), [locale]);
+    const compact = useMemo(() => new Intl.NumberFormat(locale, { notation: 'compact' }), [locale]);
     // A streamed pie arrives before its slices resolve (the parent line comes first). Hold its space until one lands.
     if (node.type === 'PieChart' && kids(props.slices).length === 0)
         return GenuiPending(node);
-    const number = new Intl.NumberFormat(locale);
-    const compact = new Intl.NumberFormat(locale, { notation: 'compact' });
     const format = (value) => (typeof value === 'number' ? number.format(value) : value == null ? '—' : String(value));
     // The tooltip row of `ChartTooltipContent`, with the table's number format.
     const tooltip = (_jsx(ChartTooltipContent, { hideLabel: node.type === 'PieChart', formatter: (value, name, item) => (_jsxs(_Fragment, { children: [_jsx("span", { className: "size-2.5 shrink-0 rounded-xs", style: { backgroundColor: item.payload?.fill ?? item.color } }), _jsxs("span", { className: "flex flex-1 items-center justify-between gap-2 leading-none", children: [_jsx("span", { className: "text-muted-foreground", children: name }), _jsx("span", { className: "text-foreground font-mono font-medium tabular-nums", children: format(value) })] })] })) }));
@@ -160,7 +160,8 @@ export function ChartView({ node, props }) {
 /** The chart's values as text: the Show data dialog's table. A missing value stays a dash, never a zero. */
 export function ChartDataTable({ node }) {
     const t = useTranslations('genui');
-    const number = new Intl.NumberFormat(useLocale());
+    const locale = useLocale();
+    const number = useMemo(() => new Intl.NumberFormat(locale), [locale]);
     const format = (value) => (typeof value === 'number' ? number.format(value) : value == null ? '—' : String(value));
     const { props } = node;
     let head;

package/dist/primitives/map.js

@@ -163,7 +163,8 @@ function MapMarker({ longitude, latitude, label, children, ...markerOptions }) {
             marker.setLngLat([longitude, latitude]);
         }
     }, [marker, longitude, latitude]);
-    return _jsx(MarkerContext.Provider, { value: { marker, map }, children: children });
+    const markerContextValue = useMemo(() => ({ marker, map }), [marker, map]);
+    return _jsx(MarkerContext.Provider, { value: markerContextValue, children: children });
 }
 function MarkerContent({ children, className }) {
     const { marker } = useMarkerContext();

package/dist/primitives/preview-image.js

@@ -22,10 +22,12 @@ const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
 const PreviewImageContent = React.forwardRef(({ className, fileContent, fileName, ...props }, ref) => {
     const [zoomLevel, setZoomLevel] = React.useState(DEFAULT_ZOOM);
     const [transformOrigin, setTransformOrigin] = React.useState(DEFAULT_ORIGIN);
-    React.useEffect(() => {
+    const [zoomedContent, setZoomedContent] = React.useState(fileContent);
+    if (fileContent !== zoomedContent) {
+        setZoomedContent(fileContent);
         setZoomLevel(DEFAULT_ZOOM);
         setTransformOrigin(DEFAULT_ORIGIN);
-    }, [fileContent]);
+    }
     const getTransformOrigin = (event) => {
         const rect = event.currentTarget.getBoundingClientRect();
         if (!rect.width || !rect.height) {

package/dist/primitives/settings-section-header.d.ts

@@ -7,7 +7,7 @@ import type { ReactNode } from 'react';
  */
 export declare function SettingsSectionHeader({ title, description, action, className, }: {
     title: string;
-    description?: string;
+    description?: ReactNode;
     action?: ReactNode;
     className?: string;
 }): import("react").JSX.Element;

package/dist/primitives/textarea.js

@@ -59,7 +59,7 @@ export const useAutosizeTextArea = ({ textAreaRef, triggerAutoSize, maxHeight =
                 clearTimeout(resizeTimeoutRef.current);
             }
         };
-    }, [textAreaRef.current, triggerAutoSize, minHeight, maxHeight, currentHeight, init]);
+    }, [textAreaRef, triggerAutoSize, minHeight, maxHeight, currentHeight, init]);
 };
 export const Textarea = React.forwardRef(({ maxHeight = Number.MAX_SAFE_INTEGER, minHeight = 52, className, onChange, value, variant: _variant, ...props }, ref) => {
     const textAreaRef = React.useRef(null);

package/dist/primitives/typed-title.js

@@ -19,25 +19,23 @@ import { shouldTypeOnChange, TYPE_SPEED_MS } from './typed-title-logic.js';
 import { TypingAnimation } from './typing-animation.js';
 import { cn } from '../lib/utils.js';
 import { useReducedMotion } from 'motion/react';
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useState } from 'react';
 export { TYPE_SPEED_MS };
 export function useTypeOnChange(text) {
-    // The last value this row DISPLAYED, in a ref rather than state: it must not
-    // itself cause a render, and it has to update in the same pass that decides
-    // to animate, or a second change arriving mid-type compares against a stale
-    // value and is missed.
-    const previousRef = useRef(null);
+    // The last value this row DISPLAYED. It updates in the same render pass that
+    // decides to animate, or a second change arriving mid-type compares against
+    // a stale value and is missed.
+    const [previous, setPrevious] = useState(null);
     const [isTyping, setIsTyping] = useState(false);
     const [runId, setRunId] = useState(0);
     const reduceMotion = !!useReducedMotion();
-    useEffect(() => {
-        const previous = previousRef.current;
-        previousRef.current = text;
-        if (!shouldTypeOnChange({ previous, next: text, reduceMotion }))
-            return;
-        setIsTyping(true);
-        setRunId((id) => id + 1);
-    }, [text, reduceMotion]);
+    if (previous !== text) {
+        setPrevious(text);
+        if (shouldTypeOnChange({ previous, next: text, reduceMotion })) {
+            setIsTyping(true);
+            setRunId((id) => id + 1);
+        }
+    }
     const stop = useCallback(() => setIsTyping(false), []);
     return { isTyping, runId, stop };
 }

package/dist/primitives/typing-animation.js

@@ -34,12 +34,14 @@ export function TypingAnimation({ children, words, className, duration = 100, ty
     const deletingSpeed = deleteSpeed ?? typingSpeed / 2;
     const shouldStart = startOnView ? isInView : true;
     const animationSourceKey = useMemo(() => (words ? words.join('\u0000') : (children ?? '')), [words, children]);
-    useEffect(() => {
+    const [seenSourceKey, setSeenSourceKey] = useState(animationSourceKey);
+    if (animationSourceKey !== seenSourceKey) {
+        setSeenSourceKey(animationSourceKey);
         setDisplayedText('');
         setCurrentWordIndex(0);
         setCurrentCharIndex(0);
         setPhase('typing');
-    }, [animationSourceKey]);
+    }
     useEffect(() => {
         let timeout = null;
         if (shouldStart && wordsToAnimate.length > 0) {

package/dist/session/composer/agent-selector.js

@@ -45,7 +45,12 @@ export function AgentSelector({ agents, selectedAgent, onSelect, disabled = fals
     const [search, setSearch] = useState('');
     const { offeredAgents, agentLabels } = useUiHostConfig();
     // A host that lists its agents (`offeredAgents`) offers only those; it names them with `agentLabels`.
-    const offered = useMemo(() => (offeredAgents ? agents.filter((a) => offeredAgents.includes(a.name)) : agents), [agents, offeredAgents]);
+    const offered = useMemo(() => {
+        if (!offeredAgents)
+            return agents;
+        const offeredNames = new Set(offeredAgents);
+        return agents.filter((a) => offeredNames.has(a.name));
+    }, [agents, offeredAgents]);
     const primaryAgents = useMemo(() => composerSelectableAgents(offered), [offered]);
     const label = (name) => agentLabels?.[name] ?? (isMetaAgentName(name) ? META_AGENT_DISPLAY_NAME : capitalizeWords(name));
     // A `flash` state, a `prevAgentRef` feeding it, two effects and a 400ms

package/dist/session/composer/attachment-tile.d.ts

@@ -51,8 +51,6 @@ export declare function splitFilenameForTile(name: string): {
     head: string;
     tail: string;
 } | null;
-/** The one-string form, for places that cannot render two lines (tooltips, tests). */
-export declare function middleTruncateFilename(name: string, max?: number): string;
 /** A tile previews the head of the paste only: the clamp shows four lines, and the DOM need not hold 100 kB. */
 export declare const PASTE_PREVIEW_CHARS = 400;
 export interface AttachmentTileProps {

package/dist/session/composer/attachment-tile.js

@@ -58,14 +58,6 @@ export function splitFilenameForTile(name) {
         return null;
     return { head: name.slice(0, -NAME_TAIL_CHARS), tail: name.slice(-NAME_TAIL_CHARS) };
 }
-/** The one-string form, for places that cannot render two lines (tooltips, tests). */
-export function middleTruncateFilename(name, max = 22) {
-    if (name.length <= max)
-        return name;
-    const tail = Math.min(NAME_TAIL_CHARS, Math.floor((max - 1) / 2));
-    const head = max - 1 - tail;
-    return `${name.slice(0, head)}…${name.slice(-tail)}`;
-}
 /** A tile previews the head of the paste only: the clamp shows four lines, and the DOM need not hold 100 kB. */
 export const PASTE_PREVIEW_CHARS = 400;
 /**

package/dist/session/composer/clipboard-files.d.ts

@@ -2,7 +2,7 @@ export interface ClipboardItemLike {
     readonly kind: string;
     getAsFile(): File | null;
 }
-export interface ClipboardPayload {
+interface ClipboardPayload {
     readonly files: ArrayLike<File>;
     readonly items: ArrayLike<ClipboardItemLike>;
 }
@@ -14,3 +14,4 @@ export interface ClipboardPayload {
  * handle the text itself.
  */
 export declare function extractClipboardFiles(data: ClipboardPayload | null | undefined): File[];
+export {};