@kortix/ui 0.0.0-stage → 0.14.4

package/dist/workspace/sessions/session-owner-filters.d.ts

@@ -0,0 +1,61 @@
+import type { ProjectSession } from '@kortix/sdk';
+/**
+ * Owner and access facets for the project Sessions page.
+ *
+ * The page lists every session the viewer may open — for an account admin with
+ * session oversight on, that is every member's work. Two questions then matter
+ * on every row: WHOSE session is this, and WHO ELSE can open it. These pure
+ * helpers answer both, and build the faceted options the filter menu renders.
+ * Labels are the caller's job (translations); this module returns data only.
+ */
+/** Stable key for a session with no recorded owner (legacy rows, deleted users). */
+export declare const UNKNOWN_OWNER_KEY = "__unknown__";
+/** Who can open a session, from its stored `visibility`. */
+export type SessionAccessFilter = 'private' | 'restricted' | 'project';
+/** Declared order: narrowest access first. */
+export declare const SESSION_ACCESS_FILTERS: readonly SessionAccessFilter[];
+export declare function sessionOwnerKey(session: Pick<ProjectSession, 'created_by'>): string;
+/** An absent visibility is the platform default: private (owner only). */
+export declare function sessionAccessKind(session: Pick<ProjectSession, 'visibility'>): SessionAccessFilter;
+export declare function matchesOwnerFilters(session: Pick<ProjectSession, 'created_by'>, owners: readonly string[]): boolean;
+export declare function matchesAccessFilters(session: Pick<ProjectSession, 'visibility'>, access: readonly SessionAccessFilter[]): boolean;
+export interface SessionOwnerFacetOption {
+    value: string;
+    name: string | null;
+    email: string | null;
+    /** The viewer's own sessions. Rendered as "You" and listed first. */
+    isViewer: boolean;
+    count: number;
+}
+export interface SessionAccessFacetOption {
+    value: SessionAccessFilter;
+    count: number;
+}
+/**
+ * One option per owner present in `sessions`, plus any selected owner that no
+ * longer has a session there (count 0, so it stays reachable to deselect).
+ *
+ * `sessions` must already be narrowed by every OTHER active facet: each count
+ * is then exactly the number of rows the list shows if this owner alone is
+ * picked — the same invariant the status and source facets hold.
+ *
+ * Order: the viewer first, then by display name or email, the unknown owner
+ * last.
+ */
+export declare function resolveOwnerFacetOptions(sessions: readonly ProjectSession[], activeOwners: readonly string[]): SessionOwnerFacetOption[];
+/** Access kinds present in `sessions` (or selected), in declared order. */
+export declare function resolveAccessFacetOptions(sessions: readonly ProjectSession[], activeAccess: readonly SessionAccessFilter[]): SessionAccessFacetOption[];
+/**
+ * Whether the page offers the Owner and Access facets at all.
+ *
+ * Decided from EVERY listed session, never from the rows another facet left:
+ * the counts are faceted, the presence is not. Otherwise picking
+ * Access = Whole project can leave one owner, the Owner row leaves the OPEN
+ * menu, every row below it moves up under a still pointer, and the submenu the
+ * user is working in closes. One person or one access kind is not a filter
+ * worth offering; an active selection always keeps its facet.
+ */
+export declare function resolvePageFacetVisibility(sessions: readonly ProjectSession[], activeOwners: readonly string[], activeAccess: readonly SessionAccessFilter[]): {
+    owner: boolean;
+    access: boolean;
+};

package/dist/workspace/sessions/session-owner-filters.js

@@ -0,0 +1,106 @@
+/**
+ * Owner and access facets for the project Sessions page.
+ *
+ * The page lists every session the viewer may open — for an account admin with
+ * session oversight on, that is every member's work. Two questions then matter
+ * on every row: WHOSE session is this, and WHO ELSE can open it. These pure
+ * helpers answer both, and build the faceted options the filter menu renders.
+ * Labels are the caller's job (translations); this module returns data only.
+ */
+/** Stable key for a session with no recorded owner (legacy rows, deleted users). */
+export const UNKNOWN_OWNER_KEY = '__unknown__';
+/** Declared order: narrowest access first. */
+export const SESSION_ACCESS_FILTERS = [
+    'private',
+    'restricted',
+    'project',
+];
+export function sessionOwnerKey(session) {
+    return session.created_by || UNKNOWN_OWNER_KEY;
+}
+/** An absent visibility is the platform default: private (owner only). */
+export function sessionAccessKind(session) {
+    return session.visibility === 'project' || session.visibility === 'restricted'
+        ? session.visibility
+        : 'private';
+}
+export function matchesOwnerFilters(session, owners) {
+    return owners.length === 0 || owners.includes(sessionOwnerKey(session));
+}
+export function matchesAccessFilters(session, access) {
+    return access.length === 0 || access.includes(sessionAccessKind(session));
+}
+/**
+ * One option per owner present in `sessions`, plus any selected owner that no
+ * longer has a session there (count 0, so it stays reachable to deselect).
+ *
+ * `sessions` must already be narrowed by every OTHER active facet: each count
+ * is then exactly the number of rows the list shows if this owner alone is
+ * picked — the same invariant the status and source facets hold.
+ *
+ * Order: the viewer first, then by display name or email, the unknown owner
+ * last.
+ */
+export function resolveOwnerFacetOptions(sessions, activeOwners) {
+    const byOwner = new Map();
+    for (const session of sessions) {
+        const key = sessionOwnerKey(session);
+        const existing = byOwner.get(key);
+        if (existing) {
+            existing.count += 1;
+            existing.name ??= session.owner_name ?? null;
+            existing.email ??= session.owner_email ?? null;
+            continue;
+        }
+        byOwner.set(key, {
+            value: key,
+            name: session.owner_name ?? null,
+            email: session.owner_email ?? null,
+            isViewer: key !== UNKNOWN_OWNER_KEY && session.is_owner === true,
+            count: 1,
+        });
+    }
+    for (const key of activeOwners) {
+        if (!byOwner.has(key)) {
+            byOwner.set(key, { value: key, name: null, email: null, isViewer: false, count: 0 });
+        }
+    }
+    const rank = (option) => option.isViewer ? 0 : option.value === UNKNOWN_OWNER_KEY ? 2 : 1;
+    return [...byOwner.values()].sort((a, b) => {
+        const byRank = rank(a) - rank(b);
+        if (byRank !== 0)
+            return byRank;
+        const aLabel = a.name ?? a.email ?? a.value;
+        const bLabel = b.name ?? b.email ?? b.value;
+        return aLabel.localeCompare(bLabel, undefined, { sensitivity: 'base' });
+    });
+}
+/** Access kinds present in `sessions` (or selected), in declared order. */
+export function resolveAccessFacetOptions(sessions, activeAccess) {
+    const active = new Set(activeAccess);
+    const options = [];
+    for (const value of SESSION_ACCESS_FILTERS) {
+        const count = sessions.filter((session) => sessionAccessKind(session) === value).length;
+        if (count > 0 || active.has(value))
+            options.push({ value, count });
+    }
+    return options;
+}
+/**
+ * Whether the page offers the Owner and Access facets at all.
+ *
+ * Decided from EVERY listed session, never from the rows another facet left:
+ * the counts are faceted, the presence is not. Otherwise picking
+ * Access = Whole project can leave one owner, the Owner row leaves the OPEN
+ * menu, every row below it moves up under a still pointer, and the submenu the
+ * user is working in closes. One person or one access kind is not a filter
+ * worth offering; an active selection always keeps its facet.
+ */
+export function resolvePageFacetVisibility(sessions, activeOwners, activeAccess) {
+    const owners = new Set(sessions.map(sessionOwnerKey));
+    const kinds = new Set(sessions.map(sessionAccessKind));
+    return {
+        owner: owners.size > 1 || activeOwners.length > 0,
+        access: kinds.size > 1 || activeAccess.length > 0,
+    };
+}

package/dist/workspace/sessions/session-row.d.ts

@@ -0,0 +1,57 @@
+import { type ProjectSession } from '@kortix/sdk';
+import { type ReactNode } from 'react';
+export interface SessionRowActions {
+    onRename: (sessionId: string, currentName: string) => void;
+    onEditLabels: (session: ProjectSession) => void;
+    onShare: (session: ProjectSession) => void;
+    onDelete: (sessionId: string, label: string) => void;
+    onRestart: (sessionId: string, label: string) => void;
+    onStop: (sessionId: string, label: string) => void;
+    /** Pin (`true`) or unpin the session in the viewer's own list. */
+    onPin: (sessionId: string, pinned: boolean) => void;
+    /** Archive (`true`) or unarchive the session in the viewer's own list. */
+    onArchive: (sessionId: string, archived: boolean) => void;
+}
+export interface SessionRowProps {
+    session: ProjectSession;
+    /** Preformatted last-activity stamp. Formatting stays in the container so
+     *  every row shares one `date-fns` pass instead of one per row. */
+    time: {
+        relative: string;
+        exact: string;
+    };
+    open: boolean;
+    /** Takes the session id so the container can pass ONE stable callback to
+     *  every row. A per-row `(open) => setExpanded(...)` closure is a new
+     *  function on each parent render, which defeats the memo below. */
+    onToggleOpen: (sessionId: string, open: boolean) => void;
+    selectMode: boolean;
+    selected: boolean;
+    onToggleSelect: (sessionId: string) => void;
+    restarting: boolean;
+    stopping: boolean;
+    actions: SessionRowActions;
+    /** Review items, agent questions and approvals that wait on the viewer
+     *  (`useSessionNeedsYouCounts`). Above 0 the tile reads `needs-you`. */
+    needsYouCount?: number;
+    /** Spawned sessions under this one (`child_count`). 0 or absent: no toggle. */
+    childCount?: number;
+    childrenOpen?: boolean;
+    onToggleChildren?: (sessionId: string) => void;
+    /** Detail panel — the container renders it only while expanded. */
+    children: ReactNode;
+}
+declare function SessionRowImpl({ session, time, open, onToggleOpen, selectMode, selected, onToggleSelect, restarting, stopping, actions, needsYouCount, childCount, childrenOpen, onToggleChildren, children, }: SessionRowProps): import("react").JSX.Element;
+/**
+ * Memoised: a project inventory renders every session at once, and without this
+ * one keystroke in the toolbar's search re-rendered all of them — each row
+ * resolving its source, access meta and status tile again to produce identical
+ * output. Every prop the container passes is now referentially stable across
+ * renders (`time` is cached, the callbacks take the session id), so a row
+ * re-renders only when its own data or its own row state changes.
+ *
+ * `children` is deliberately part of that contract: the container passes `null`
+ * for a collapsed row, so it stays stable until the row is actually expanded.
+ */
+export declare const SessionRow: import("react").MemoExoticComponent<typeof SessionRowImpl>;
+export {};

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

@@ -0,0 +1,156 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { SESSION_STATUS_TRANSLATION_KEY, sessionCanBeStopped, sessionDisplayStatus, sessionSource, } from '../../session/actions/session-label.js';
+import { Button } from '../../primitives/button.js';
+import { Checkbox } from '../../primitives/checkbox.js';
+import { Disclosure, DisclosureContent, DisclosureTrigger } from '../../primitives/disclosure.js';
+import Hint from '../../primitives/hint.js';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from '../../primitives/dropdown-menu.js';
+import Loading from '../../primitives/loading.js';
+import { TypedTitle } from '../../primitives/typed-title.js';
+import { getSessionDisplayTitle, shortRelative, } from '../../session/actions/project-session-list-helpers.js';
+import { useTranslations } from '../../i18n/index.js';
+import { cn } from '../../internal/lib/utils.js';
+import { SESSION_LIST_STATUS, } from '@kortix/sdk';
+import { ArchiveIcon, ArrowCounterClockwiseIcon, CaretRightIcon, ChatTeardropTextIcon, DotsThreeIcon, PencilSimpleIcon, PushPinIcon, PushPinSlashIcon, TagIcon, ShareNetworkIcon, SquareIcon, TrashIcon, } from '@phosphor-icons/react';
+import { memo, useState } from 'react';
+import { SESSION_ACCESS_ICONS } from '../sidebar/session-filter-menu.js';
+import { SOURCE_ICONS } from '../sidebar/session-source-icons.js';
+import { sessionAccessMeta } from './project-sessions-helpers.js';
+import { SessionLabelBadges } from './session-label-badges.js';
+import { sessionAccessKind, sessionOwnerKey } from './session-owner-filters.js';
+import { SessionStarterMark, useSessionStarter } from './session-starter-mark.js';
+/**
+ * Whose session this is, and who else can open it — on every row of the
+ * Sessions page. An account admin with session oversight sees every member's
+ * work here, so the owner has to be readable at a glance, not only inside the
+ * expanded detail panel.
+ *
+ * Keeps `data-session-shared` on sessions the viewer does not own: that marker
+ * (formerly `SessionSharedIcon`) is what the browser journeys key on.
+ */
+function SessionOwnerChip({ session }) {
+    const t = useTranslations('sidebar.filter');
+    const starter = useSessionStarter(session);
+    const isViewer = session.is_owner !== false;
+    const access = sessionAccessKind(session);
+    const AccessIcon = SESSION_ACCESS_ICONS[access];
+    const accessLabel = t(`accessValue.${access}`);
+    const label = t('ownerAccess', { owner: starter.label, access: accessLabel });
+    return (_jsx(Hint, { label: label, side: "top", sideOffset: 6, children: _jsxs("span", { className: "text-muted-foreground flex max-w-48 shrink-0 items-center gap-1.5 text-xs", "aria-label": label, "data-session-owner": sessionOwnerKey(session), "data-session-starter": starter.type, "data-session-shared": isViewer ? undefined : 'true', children: [_jsx(SessionStarterMark, { session: session, starter: starter }), _jsx("span", { className: "hidden min-w-0 truncate sm:inline", children: starter.label }), _jsx(AccessIcon, { className: "size-3.5 shrink-0" })] }) }));
+}
+/** Chevron + count of the sessions this one spawned. Sits inside the row's own
+ *  toggle, so it stops the event before it opens the detail panel. */
+function SessionChildrenToggle({ count, open, onToggle, }) {
+    const t = useTranslations('sidebar.sessionList');
+    const label = open ? t('collapseChildren') : t('expandChildren', { count });
+    return (_jsx("span", { onClick: (event) => event.stopPropagation(), onKeyDown: (event) => event.stopPropagation(), children: _jsxs(Button, { type: "button", variant: "ghost", size: "xs", "aria-expanded": open, "aria-label": label, "data-session-children-toggle": "true", className: "text-muted-foreground gap-1 tabular-nums", onClick: onToggle, children: [_jsx(CaretRightIcon, { "aria-hidden": true, className: cn('size-3 transition-transform', open && 'rotate-90') }), count] }) }));
+}
+/** Fixed slot shared by relative time and the ⋯ trigger — same overlay swap as
+ *  the sidebar session list so the row never reflows on hover. */
+const SESSION_RELATIVE_TIME_CLASS = 'text-muted-foreground block w-10 min-w-10 max-w-10 shrink-0 truncate text-right text-xs tabular-nums';
+/** Resting / idle — secondary surface, muted icon. Matches design-system idle. */
+const SECONDARY_TILE = {
+    tile: 'bg-secondary',
+    icon: 'text-muted-foreground',
+};
+/** Tile colour per status tone: green only for live or actionable, never for finished. */
+const TONE_TILE = {
+    live: { tile: 'bg-kortix-green/15', icon: 'text-kortix-green' },
+    actionable: { tile: 'bg-kortix-green/15', icon: 'text-kortix-green' },
+    progress: { tile: 'bg-kortix-yellow/15', icon: 'text-kortix-yellow' },
+    danger: { tile: 'bg-kortix-red/15', icon: 'text-kortix-red' },
+    muted: SECONDARY_TILE,
+};
+/**
+ * Status colour on the source-icon tile. Deleted wins over lifecycle status.
+ *
+ * The lifecycle word is the one every list uses (`sessionDisplayStatus`): this
+ * page used to name the raw sandbox status ("Queued", "Branching",
+ * "Provisioning", "Completed") where the sidebar beside it said "Starting" and
+ * "Done" for the same session.
+ */
+function sessionStatusTile(session, options, tI18nComplete, statusLabel) {
+    if (options.deleted) {
+        return {
+            label: tI18nComplete.raw('textb48ff39c2e0f'),
+            tile: 'bg-kortix-red/15',
+            icon: 'text-kortix-red',
+        };
+    }
+    if (options.metadataOnly) {
+        return { label: tI18nComplete.raw('textdf0453d185c4'), ...SECONDARY_TILE };
+    }
+    const status = sessionDisplayStatus(session, options.needsYouCount);
+    return { label: statusLabel(status), ...TONE_TILE[SESSION_LIST_STATUS[status].tone] };
+}
+function SessionRowImpl({ session, time, open, onToggleOpen, selectMode, selected, onToggleSelect, restarting, stopping, actions, needsYouCount = 0, childCount = 0, childrenOpen = false, onToggleChildren, children, }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const tStatus = useTranslations('sidebar.sessionList.status');
+    const tLabels = useTranslations('sidebar.labels');
+    const tPinArchive = useTranslations('sidebar.pinArchive');
+    const [menuOpen, setMenuOpen] = useState(false);
+    const title = getSessionDisplayTitle(session);
+    const source = sessionSource(session, tI18nComplete);
+    const SourceIcon = source.kind === 'chat' ? ChatTeardropTextIcon : SOURCE_ICONS[source.kind];
+    const access = sessionAccessMeta(session, tI18nComplete);
+    const isDeleted = Boolean(session.deleted_at);
+    // `can_manage_sharing` answers ONE question — may this viewer change who can
+    // open the session — and it is the owner's call, not a manager's. It does not
+    // gate the entry itself: everyone who can open the session sees it, the owner
+    // to change access and everyone else to read who else has it.
+    const canManageSharing = session.can_manage_sharing !== false && !isDeleted;
+    const hasLifecycleActions = access.canOpen && !isDeleted;
+    // Restart, Stop and Delete are the owner's or a project manager's; the server
+    // answers anyone else 403. Opening the session is not enough.
+    const canManageLifecycle = hasLifecycleActions && session.can_manage_lifecycle !== false;
+    const showAccessEntry = hasLifecycleActions;
+    const hasActions = hasLifecycleActions;
+    const relativeLabel = time.relative ? shortRelative(time.relative) : '';
+    const statusTile = sessionStatusTile(session, {
+        deleted: isDeleted,
+        metadataOnly: session.can_access === false,
+        needsYouCount,
+    }, tI18nComplete, (status) => tStatus(SESSION_STATUS_TRANSLATION_KEY[status]));
+    const deferAfterClose = (fn) => {
+        setMenuOpen(false);
+        requestAnimationFrame(() => fn());
+    };
+    const identity = (_jsxs(_Fragment, { children: [_jsx("span", { className: cn('flex size-8 shrink-0 items-center justify-center rounded-sm', statusTile.tile), title: statusTile.label, "aria-label": statusTile.label, children: _jsx(SourceIcon, { className: cn('size-4', statusTile.icon) }) }), _jsxs("span", { className: "flex min-w-0 flex-1 items-center gap-2", children: [_jsxs("span", { className: "min-w-0 flex-1 truncate text-sm", children: [_jsx(TypedTitle, { text: title }), source.triggerSlug ? (_jsxs("span", { className: "text-muted-foreground", children: [" \u00B7 ", source.triggerSlug] })) : null] }), session.pinned_at ? (_jsx(PushPinIcon, { role: "img", "aria-label": tPinArchive('pinnedMark'), className: "text-muted-foreground size-3.5 shrink-0" })) : null, childCount > 0 && onToggleChildren ? (_jsx(SessionChildrenToggle, { count: childCount, open: childrenOpen, onToggle: () => onToggleChildren(session.session_id) })) : null, _jsx(SessionLabelBadges, { session: session, className: "max-sm:hidden" }), _jsx(SessionOwnerChip, { session: session })] })] }));
+    if (selectMode) {
+        return (
+        // A label, not a button: the row wraps a real Checkbox, and nesting a
+        // button (Radix renders one) inside a button is invalid.
+        _jsxs("label", { className: cn('hover:bg-muted/40 flex h-11 w-full cursor-pointer items-center gap-3 rounded-md px-3 text-left', 'transition-none', 'has-disabled:pointer-events-none has-disabled:opacity-50', selected && 'bg-primary/[0.06]'), children: [_jsx(Checkbox, { checked: selected, disabled: isDeleted, onCheckedChange: () => onToggleSelect(session.session_id), "aria-label": title, 
+                    // This redesign removes the blue accent: the black variant.
+                    variant: "black" }), identity, relativeLabel ? (_jsx("time", { className: SESSION_RELATIVE_TIME_CLASS, dateTime: time.exact, title: tI18nComplete('texta680491a9229', { value0: time.exact }), children: relativeLabel })) : null] }));
+    }
+    return (_jsxs(Disclosure, { open: open, onOpenChange: (next) => onToggleOpen(session.session_id, next), variant: "outline", className: "group/session bg-popover overflow-hidden", children: [_jsx(DisclosureTrigger, { variant: "outline", children: _jsxs("div", { "aria-label": tI18nComplete('text1c8c818388dd', {
+                        value0: open ? 'Hide' : 'Show',
+                        value1: title,
+                    }), className: "hover:bg-muted/40 group/row flex w-full cursor-pointer items-center gap-3 rounded-md px-3 py-2 transition-none", children: [identity, _jsxs("div", { className: "relative w-10 min-w-10 shrink-0", children: [relativeLabel ? (_jsx("time", { className: cn(SESSION_RELATIVE_TIME_CLASS, 'pr-1.5 transition-opacity duration-normal', hasActions &&
+                                        cn('opacity-100 group-hover/row:opacity-0 group-has-data-[state=open]/row:opacity-0', 
+                                        // Touch has no hover — cede the slot to the always-visible ⋯.
+                                        '[@media(hover:none)]:opacity-0')), dateTime: time.exact, title: tI18nComplete('texta680491a9229', { value0: time.exact }), "aria-label": tI18nComplete('texta680491a9229', { value0: relativeLabel }), children: relativeLabel })) : null, hasActions ? (
+                                // Stops the row's toggle from firing when the menu is used.
+                                _jsx("span", { onClick: (event) => event.stopPropagation(), onKeyDown: (event) => event.stopPropagation(), children: _jsxs(DropdownMenu, { open: menuOpen, onOpenChange: setMenuOpen, children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { type: "button", variant: "ghost", size: "icon-sm", "aria-label": tI18nComplete('text33da220b1a34', { value0: title }), className: cn('absolute top-1/2 right-0.5 -translate-y-1/2 transition-opacity duration-normal', 'focus:ring-0 focus-visible:ring-0 active:scale-[0.96]', relativeLabel
+                                                        ? cn('pointer-events-none opacity-0', 'group-hover/row:pointer-events-auto group-hover/row:opacity-100', 'data-[state=open]:pointer-events-auto data-[state=open]:opacity-100', 
+                                                        // Touch has no hover — keep the only path visible.
+                                                        '[@media(hover:none)]:pointer-events-auto [@media(hover:none)]:opacity-100')
+                                                        : 'opacity-100'), onClick: (event) => {
+                                                        event.preventDefault();
+                                                        event.stopPropagation();
+                                                    }, children: _jsx(DotsThreeIcon, { className: "size-3.5 shrink-0" }) }) }), _jsxs(DropdownMenuContent, { align: "end", className: "w-44", children: [hasLifecycleActions ? (_jsxs(DropdownMenuItem, { className: "cursor-pointer", onSelect: () => deferAfterClose(() => actions.onRename(session.session_id, title)), children: [_jsx(PencilSimpleIcon, {}), tI18nComplete.raw('text3064d79a295c')] })) : null, hasLifecycleActions ? (_jsxs(DropdownMenuItem, { className: "cursor-pointer", onSelect: () => deferAfterClose(() => actions.onEditLabels(session)), children: [_jsx(TagIcon, {}), tLabels('menu')] })) : null, showAccessEntry ? (_jsxs(DropdownMenuItem, { className: "cursor-pointer", onSelect: () => deferAfterClose(() => actions.onShare(session)), children: [_jsx(ShareNetworkIcon, {}), canManageSharing ? 'Share' : tI18nComplete.raw('textadc01d813da0')] })) : null, hasLifecycleActions && session.pinned_at !== undefined ? (_jsxs(_Fragment, { children: [_jsxs(DropdownMenuItem, { className: "cursor-pointer", onSelect: () => deferAfterClose(() => actions.onPin(session.session_id, !session.pinned_at)), children: [session.pinned_at ? _jsx(PushPinSlashIcon, {}) : _jsx(PushPinIcon, {}), tPinArchive(session.pinned_at ? 'unpin' : 'pin')] }), _jsxs(DropdownMenuItem, { className: "cursor-pointer", onSelect: () => deferAfterClose(() => actions.onArchive(session.session_id, !session.archived_at)), children: [_jsx(ArchiveIcon, {}), tPinArchive(session.archived_at ? 'unarchive' : 'archive')] })] })) : null, canManageLifecycle ? (_jsxs(DropdownMenuItem, { className: "cursor-pointer", disabled: restarting, onSelect: () => deferAfterClose(() => actions.onRestart(session.session_id, title)), children: [restarting ? (_jsx(Loading, { className: "size-4 shrink-0" })) : (_jsx(ArrowCounterClockwiseIcon, {})), tI18nComplete.raw('text6b983a81e5e8')] })) : null, sessionCanBeStopped(session) && canManageLifecycle ? (_jsxs(DropdownMenuItem, { className: "cursor-pointer", disabled: stopping, onSelect: () => deferAfterClose(() => actions.onStop(session.session_id, title)), children: [stopping ? _jsx(Loading, { className: "size-4 shrink-0" }) : _jsx(SquareIcon, {}), tI18nComplete.raw('textcae7d57bc067')] })) : null, canManageLifecycle ? (_jsxs(DropdownMenuItem, { className: "cursor-pointer", variant: "destructive", onSelect: () => deferAfterClose(() => actions.onDelete(session.session_id, title)), children: [_jsx(TrashIcon, {}), tI18nComplete.raw('texte2d0a54968ea')] })) : null] })] }) })) : null] })] }) }), _jsx(DisclosureContent, { variant: "outline", contentClassName: "border-border border-t", children: children })] }));
+}
+/**
+ * Memoised: a project inventory renders every session at once, and without this
+ * one keystroke in the toolbar's search re-rendered all of them — each row
+ * resolving its source, access meta and status tile again to produce identical
+ * output. Every prop the container passes is now referentially stable across
+ * renders (`time` is cached, the callbacks take the session id), so a row
+ * re-renders only when its own data or its own row state changes.
+ *
+ * `children` is deliberately part of that contract: the container passes `null`
+ * for a collapsed row, so it stays stable until the row is actually expanded.
+ */
+export const SessionRow = memo(SessionRowImpl);

package/dist/workspace/sessions/session-starter-mark.d.ts

@@ -0,0 +1,15 @@
+import { type SessionStarter } from '../projects/session-starter.js';
+import type { ProjectSession } from '@kortix/sdk';
+/** The session's starter, resolved against the signed-in viewer. */
+export declare function useSessionStarter(session: ProjectSession): SessionStarter;
+/**
+ * One glyph per starter type: the member's avatar, the trigger's schedule or
+ * webhook icon, the channel's own icon, a key for an API caller, the Kortix
+ * mark for the platform. Never an emoji.
+ */
+export declare function SessionStarterMark({ session, starter, iconClassName, avatarClassName, }: {
+    session: ProjectSession;
+    starter: SessionStarter;
+    iconClassName?: string;
+    avatarClassName?: string;
+}): import("react").JSX.Element;

package/dist/workspace/sessions/session-starter-mark.js

@@ -0,0 +1,53 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { sessionSource } from '../../session/actions/session-label.js';
+import { sessionStarter } from '../projects/session-starter.js';
+import { KortixLogo } from '../../primitives/kortix-logo.js';
+import { UserAvatar } from '../../primitives/user-avatar.js';
+import { SOURCE_ICONS } from '../sidebar/session-source-icons.js';
+import { useUiViewer } from '../../providers/ui-provider.js';
+import { useTranslations } from '../../i18n/index.js';
+import { cn } from '../../internal/lib/utils.js';
+import { ChatTeardropTextIcon, KeyIcon } from '@phosphor-icons/react';
+import { useMemo } from 'react';
+/** The session's starter, resolved against the signed-in viewer. */
+export function useSessionStarter(session) {
+    const user = useUiViewer();
+    const t = useTranslations('sidebar.filter');
+    const you = t('ownerValue.you');
+    const unknown = t('ownerValue.unknown');
+    return useMemo(() => sessionStarter(session, user?.id ?? null, { you, unknown }), [session, user?.id, you, unknown]);
+}
+/**
+ * One glyph per starter type: the member's avatar, the trigger's schedule or
+ * webhook icon, the channel's own icon, a key for an API caller, the Kortix
+ * mark for the platform. Never an emoji.
+ */
+export function SessionStarterMark({ session, starter, iconClassName, avatarClassName, }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const user = useUiViewer();
+    if (starter.type === 'member') {
+        // The viewer's own row draws the viewer's avatar, never the "You" label's
+        // initial. The photo the list carries wins: the signed-in user's metadata
+        // is the copy from sign-in and misses a photo changed since.
+        const metadataName = user?.metadata?.full_name ?? user?.metadata?.name;
+        const metadataAvatar = user?.metadata?.avatar_url;
+        return (_jsx(UserAvatar, { size: "sm", className: avatarClassName, name: starter.isViewer ? (typeof metadataName === 'string' ? metadataName : undefined) : starter.label, email: starter.isViewer ? (user?.email ?? '') : (session.owner_email ?? ''), avatarUrl: session.owner_avatar_url ??
+                (starter.isViewer && typeof metadataAvatar === 'string' ? metadataAvatar : null) }));
+    }
+    if (starter.type === 'system')
+        return _jsx(KortixLogo, { variant: "icon", size: 12 });
+    let Icon = ChatTeardropTextIcon;
+    if (starter.type === 'api')
+        Icon = KeyIcon;
+    else if (starter.type === 'channel') {
+        Icon = SOURCE_ICONS[(starter.id ?? '')] ?? ChatTeardropTextIcon;
+    }
+    else {
+        // A trigger fires under its own source kind: schedule, webhook, or manual
+        // (`kortix triggers fire`). The kind's glyph, not the scheduler's.
+        const kind = sessionSource(session, tI18nComplete).kind;
+        Icon = kind === 'chat' ? ChatTeardropTextIcon : SOURCE_ICONS[kind];
+    }
+    return _jsx(Icon, { className: cn('size-4', iconClassName) });
+}

package/dist/workspace/sessions/sessions-bulk-delete-dialog.d.ts

@@ -0,0 +1,8 @@
+/** The Sessions page's confirm for deleting the selected sessions. */
+export declare function SessionsBulkDeleteDialog({ count, open, isPending, onOpenChange, onConfirm, }: {
+    count: number;
+    open: boolean;
+    isPending: boolean;
+    onOpenChange: (open: boolean) => void;
+    onConfirm: () => void;
+}): import("react").JSX.Element;

package/dist/workspace/sessions/sessions-bulk-delete-dialog.js

@@ -0,0 +1,15 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ConfirmDialog } from '../../primitives/confirm-dialog.js';
+import { RESTORE_DAYS } from '../../session/actions/session-delete-modal.js';
+import { useTranslations } from '../../i18n/index.js';
+import { bulkDeleteConfirmLabel } from './project-sessions-helpers.js';
+/** The Sessions page's confirm for deleting the selected sessions. */
+export function SessionsBulkDeleteDialog({ count, open, isPending, onOpenChange, onConfirm, }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const t = useTranslations('sessionDelete');
+    return (_jsx(ConfirmDialog, { open: open, onOpenChange: (next) => !isPending && onOpenChange(next), title: tI18nComplete('text7ed6733a3900', {
+            value0: count,
+            value1: count === 1 ? 'session' : 'sessions',
+        }), description: t('bulkDescription', { days: RESTORE_DAYS }), confirmLabel: bulkDeleteConfirmLabel(count, tI18nComplete), confirmVariant: "destructive", isPending: isPending, onConfirm: onConfirm }));
+}

package/dist/workspace/sessions/sessions-empty-state.d.ts

@@ -0,0 +1,16 @@
+/**
+ * What a project's session list shows before its first session: one line of
+ * text over the pixel Kortix mark, or over the host's icon when `useUiBrand()`
+ * sets one (a white-label never shows the Kortix mark). The sidebar list and the sessions page both
+ * render it, so the two empty lists always say the same thing.
+ *
+ * No button. The sidebar and the sessions toolbar each already have a "New
+ * session" control one glance away, and a second one here would be the same
+ * action twice.
+ *
+ * It fades in once, over 300ms, when it replaces the loading rows. It is
+ * opacity only, so reduced motion needs no other variant.
+ */
+export declare function SessionsEmptyState({ className }: {
+    className?: string;
+}): import("react").JSX.Element;

package/dist/workspace/sessions/sessions-empty-state.js

@@ -0,0 +1,25 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { KortixLogo } from '../../primitives/kortix-logo.js';
+import { PixelKortixMark } from '../../primitives/pixel-kortix-mark.js';
+import { useUiBrand } from '../../providers/ui-provider.js';
+import { useTranslations } from '../../i18n/index.js';
+import { cn } from '../../internal/lib/utils.js';
+/**
+ * What a project's session list shows before its first session: one line of
+ * text over the pixel Kortix mark, or over the host's icon when `useUiBrand()`
+ * sets one (a white-label never shows the Kortix mark). The sidebar list and the sessions page both
+ * render it, so the two empty lists always say the same thing.
+ *
+ * No button. The sidebar and the sessions toolbar each already have a "New
+ * session" control one glance away, and a second one here would be the same
+ * action twice.
+ *
+ * It fades in once, over 300ms, when it replaces the loading rows. It is
+ * opacity only, so reduced motion needs no other variant.
+ */
+export function SessionsEmptyState({ className }) {
+    const t = useTranslations('sidebar');
+    const branded = Boolean(useUiBrand()?.icon_url);
+    return (_jsxs("div", { className: cn('flex flex-col items-center justify-center gap-6 px-6 text-center', 'transition-opacity duration-(--duration-slow) ease-out starting:opacity-0', className), children: [_jsx("p", { className: "text-muted-foreground max-w-48 text-sm text-balance", children: t('sessionList.empty') }), branded ? (_jsx(KortixLogo, { variant: "icon", size: 40, className: "opacity-50 grayscale" })) : (_jsx(PixelKortixMark, { className: "text-muted-foreground opacity-50" }))] }));
+}

package/dist/workspace/sessions/sessions-selection-bar.d.ts

@@ -0,0 +1,15 @@
+export declare function SessionsSelectionBar({ selectedCount, selectableCount, allSelected, onSelectAll, onClearSelection, onExit, onDelete, deleting, onArchive, archiveLabel, archiving, }: {
+    selectedCount: number;
+    /** Deletable sessions in the CURRENT filtered view, not the whole project. */
+    selectableCount: number;
+    allSelected: boolean;
+    onSelectAll: () => void;
+    onClearSelection: () => void;
+    onExit: () => void;
+    onDelete: () => void;
+    deleting: boolean;
+    /** Archive or unarchive the selection in the viewer's own list (KRTX-2418). */
+    onArchive?: () => void;
+    archiveLabel?: string;
+    archiving?: boolean;
+}): import("react").JSX.Element;

package/dist/workspace/sessions/sessions-selection-bar.js

@@ -0,0 +1,14 @@
+'use client';
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Button } from '../../primitives/button.js';
+import Hint from '../../primitives/hint.js';
+import Loading from '../../primitives/loading.js';
+import { ArchiveIcon, TrashIcon, XIcon } from '@phosphor-icons/react';
+import { useTranslations } from '../../i18n/index.js';
+export function SessionsSelectionBar({ selectedCount, selectableCount, allSelected, onSelectAll, onClearSelection, onExit, onDelete, deleting, onArchive, archiveLabel, archiving = false, }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const busy = deleting || archiving;
+    return (_jsxs("div", { className: "flex items-center gap-3", children: [_jsxs("span", { className: "text-sm font-medium tabular-nums", "aria-live": "polite", children: [selectedCount, " ", tI18nComplete.raw('textd7cbbb688b2e')] }), _jsxs("div", { className: "ml-auto flex items-center gap-2", children: [_jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: allSelected ? onClearSelection : onSelectAll, disabled: busy || selectableCount === 0, className: "h-8 transition-[scale] duration-150 active:scale-[0.96]", children: allSelected
+                            ? tI18nComplete.raw('text83b12c2216ef')
+                            : tI18nComplete.raw('text1fc9a387654d') }), selectedCount > 0 && onArchive && archiveLabel ? (_jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: onArchive, disabled: busy, "aria-busy": archiving, className: "h-8 gap-1.5 transition-[scale] duration-normal active:scale-[0.96]", children: [archiving ? (_jsx(Loading, { className: "size-3.5 shrink-0" })) : (_jsx(ArchiveIcon, { className: "size-3.5 shrink-0" })), archiveLabel, " ", selectedCount] })) : null, selectedCount > 0 && (_jsxs(Button, { type: "button", variant: "destructive", size: "sm", onClick: onDelete, disabled: busy || selectedCount === 0, "aria-busy": deleting, className: "h-8 gap-1.5 transition-[scale] duration-150 active:scale-[0.96]", children: [deleting ? (_jsx(Loading, { className: "size-3.5 shrink-0" })) : (_jsx(TrashIcon, { className: "size-3.5 shrink-0" })), tI18nComplete.raw('texte2d0a54968ea'), " ", selectedCount > 0 ? selectedCount : ''] })), _jsx(Hint, { label: tI18nComplete.raw('text22206bc67806'), side: "bottom", children: _jsx(Button, { type: "button", variant: "ghost", size: "icon", "aria-label": tI18nComplete.raw('text22206bc67806'), onClick: onExit, disabled: busy, className: "size-8 transition-[scale] duration-150 active:scale-[0.96]", children: _jsx(XIcon, { className: "size-4 shrink-0" }) }) })] })] }));
+}

package/dist/workspace/sessions/sessions-toolbar.d.ts

@@ -0,0 +1,18 @@
+import type { ProjectSession } from '@kortix/sdk';
+export declare function SessionsToolbar({ projectId, sessions, reviewCountBySession, search, onSearchChange, searchOpen, onSearchOpenChange, onEnterSelectMode, onNewSession, creatingSession, canSelect, }: {
+    projectId: string;
+    sessions: ProjectSession[];
+    reviewCountBySession: Record<string, number>;
+    search: string;
+    onSearchChange: (search: string) => void;
+    searchOpen: boolean;
+    onSearchOpenChange: (open: boolean) => void;
+    onEnterSelectMode: () => void;
+    /**
+     * Click-time side effects for "New". The control is an anchor to the project
+     * composer, so the navigation itself is not this handler's job.
+     */
+    onNewSession?: () => void;
+    creatingSession: boolean;
+    canSelect: boolean;
+}): import("react").JSX.Element;

package/dist/workspace/sessions/sessions-toolbar.js

@@ -0,0 +1,40 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { uiRoutes } from '../../lib/routes.js';
+import { Button } from '../../primitives/button.js';
+import { DropdownMenu, DropdownMenuTrigger } from '../../primitives/dropdown-menu.js';
+import Hint from '../../primitives/hint.js';
+import { InputGroupSearch, InputGroupSearchClear, InputGroupSearchIcon, InputGroupSearchInput, } from '../../primitives/input-group.js';
+import Loading from '../../primitives/loading.js';
+import { SessionFilterMenu } from '../sidebar/session-filter-menu.js';
+import { cn } from '../../internal/lib/utils.js';
+import { MagnifyingGlassIcon, PlusIcon } from '@phosphor-icons/react';
+import { useTranslations } from '../../i18n/index.js';
+import { UiLink as Link } from '../../providers/ui-provider.js';
+export function SessionsToolbar({ projectId, sessions, reviewCountBySession, search, onSearchChange, searchOpen, onSearchOpenChange, onEnterSelectMode, onNewSession, creatingSession, canSelect, }) {
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const closeSearch = () => {
+        onSearchChange('');
+        onSearchOpenChange(false);
+    };
+    if (searchOpen) {
+        return (
+        // Fixed width, not flex-1: the section header wraps its action slot in
+        // `shrink-0`, so a flex-1 child would collapse to its content width.
+        _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs(InputGroupSearch, { className: "w-[min(20rem,60vw)]", children: [_jsx(InputGroupSearchIcon, { children: _jsx(MagnifyingGlassIcon, {}) }), _jsx(InputGroupSearchInput, { autoFocus: true, variant: "popover", value: search, onChange: (event) => onSearchChange(event.target.value), onKeyDown: (event) => {
+                                if (event.key === 'Escape') {
+                                    event.preventDefault();
+                                    closeSearch();
+                                }
+                            }, size: "xs", placeholder: tI18nComplete.raw('textb65a63353da6'), "aria-label": tI18nComplete.raw('text8cb650539ec8') }), search ? _jsx(InputGroupSearchClear, { onClick: () => onSearchChange('') }) : null] }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: closeSearch, children: tI18nComplete.raw('text19766ed6ccb2') })] }));
+    }
+    return (_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(Hint, { label: tI18nComplete.raw('text8cb650539ec8'), side: "bottom", children: _jsx(Button, { type: "button", variant: "outline", size: "icon", "aria-label": tI18nComplete.raw('text8cb650539ec8'), onClick: () => onSearchOpenChange(true), className: "size-8 transition-[scale] duration-150 active:scale-[0.96]", children: _jsx(MagnifyingGlassIcon, { className: "size-4 shrink-0" }) }) }), sessions.length > 0 ? (
+            // The SAME component the sidebar's Sessions header mounts — Grouping,
+            // Ordering, Show, both faceted filters, Collapse all. Not a lookalike:
+            // one menu, so the two surfaces cannot drift in what they OFFER. What
+            // they do not share is state — see the `surface` prop below.
+            _jsxs(DropdownMenu, { children: [_jsx(Hint, { label: tI18nComplete.raw('text6c03b504d991'), side: "bottom", children: _jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { type: "button", variant: "outline", size: "sm", "aria-label": tI18nComplete.raw('text6c03b504d991'), className: "transition-[scale] duration-150 active:scale-[0.96]", children: tI18nComplete.raw('text638e249f4a15') }) }) }), _jsx(SessionFilterMenu, { projectId: projectId, sessions: sessions, reviewCountBySession: reviewCountBySession, align: "end", side: "bottom", 
+                        // Same menu as the sidebar, its OWN state. Inherits the sidebar's
+                        // values until something is changed here.
+                        surface: "page" })] })) : null, canSelect ? (_jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: onEnterSelectMode, className: "h-8 transition-[scale] duration-150 active:scale-[0.96]", children: tI18nComplete.raw('text2a78025de6aa') })) : null, creatingSession ? (_jsxs(Button, { type: "button", size: "sm", variant: "secondary", className: cn('h-8 gap-1.5 transition-[scale] duration-150 active:scale-[0.96]'), disabled: true, "aria-busy": true, children: [_jsx(Loading, { className: "size-4 shrink-0" }), tI18nComplete.raw('text18fdd549b2ed')] })) : (_jsx(Button, { asChild: true, size: "sm", variant: "secondary", className: cn('h-8 gap-1.5 transition-[scale] duration-150 active:scale-[0.96]'), children: _jsxs(Link, { href: uiRoutes().project(projectId), prefetch: true, onClick: onNewSession, children: [_jsx(PlusIcon, { className: "size-4 shrink-0" }), tI18nComplete.raw('text18fdd549b2ed')] }) }))] }));
+}