@kortix/ui 0.14.12 → 0.14.14

package/dist/workspace/sessions/board-dispatch.js

@@ -0,0 +1,110 @@
+/** Claude Code rejects a dispatch under 4 characters with "Too short". */
+export const DISPATCH_MIN_CHARS = 4;
+const STATE_WORDS = {
+    working: ['working'],
+    needs_input: ['needs_input'],
+    input: ['needs_input'],
+    blocked: ['needs_input'],
+    idle: ['idle'],
+    completed: ['completed'],
+    done: ['completed'],
+    failed: ['failed'],
+    stopped: ['stopped'],
+    ended: ['failed', 'stopped'],
+};
+/** Split the leading `s:` / `a:` filter tokens off the input. An unknown state word is prompt text. */
+export function parseBoardInput(input) {
+    const states = [];
+    const agents = [];
+    const words = input.trimStart().split(/(\s+)/);
+    let index = 0;
+    for (; index < words.length; index += 2) {
+        const word = words[index] ?? '';
+        const state = /^s:(\S+)$/i.exec(word)?.[1]?.toLowerCase();
+        const agent = /^a:(\S+)$/i.exec(word)?.[1];
+        if (state && STATE_WORDS[state]) {
+            for (const value of STATE_WORDS[state])
+                if (!states.includes(value))
+                    states.push(value);
+        }
+        else if (agent) {
+            if (!agents.includes(agent))
+                agents.push(agent);
+        }
+        else
+            break;
+    }
+    return { states, agents, rest: words.slice(index).join('').trim() };
+}
+/**
+ * What Enter does with the prompt part of the input. `agents` is the project's
+ * agent names; a match is case-insensitive and returns the agent's own spelling.
+ */
+export function parseDispatch(text, agents) {
+    const trimmed = text.trim();
+    if (!trimmed)
+        return { kind: 'empty' };
+    if (trimmed.length < DISPATCH_MIN_CHARS)
+        return { kind: 'too_short' };
+    const [first = '', ...more] = trimmed.split(/\s+/);
+    const named = first.startsWith('@') ? first.slice(1) : first;
+    const agent = agents.find((name) => name.toLowerCase() === named.toLowerCase());
+    const rest = trimmed.slice(first.length).trim();
+    if (agent && more.length > 0) {
+        // The prompt the agent gets must stand on its own: "@reviewer hi" is still too short.
+        if (rest.length < DISPATCH_MIN_CHARS)
+            return { kind: 'too_short' };
+        return { kind: 'dispatch', prompt: rest, agent };
+    }
+    return { kind: 'dispatch', prompt: trimmed };
+}
+/**
+ * The board's keys when the list has focus: ↑/↓ move, Space opens or closes the
+ * peek, Enter opens the session, x stops it, Escape closes the peek. A key typed
+ * into a field, or with a modifier, belongs to the field or the browser.
+ */
+export function boardKeyAction(event, target) {
+    if (event.altKey || event.ctrlKey || event.metaKey)
+        return null;
+    const tag = target?.tagName ?? '';
+    if (target?.isContentEditable || tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT')
+        return null;
+    // A focused button or link inside a row answers Enter and Space itself.
+    if ((tag === 'BUTTON' || tag === 'A') && (event.key === 'Enter' || event.key === ' '))
+        return null;
+    switch (event.key) {
+        case 'ArrowUp':
+            return 'up';
+        case 'ArrowDown':
+            return 'down';
+        case ' ':
+            return 'peek';
+        case 'Enter':
+            return 'open';
+        case 'x':
+            return event.shiftKey ? null : 'stop';
+        case 'Escape':
+            return 'close';
+        default:
+            return null;
+    }
+}
+/** The row the selection moves to; it stays inside the list. */
+export function moveBoardSelection(order, current, step) {
+    if (order.length === 0)
+        return null;
+    const index = current ? order.indexOf(current) : -1;
+    if (index === -1)
+        return step === 1 ? order[0] : order[order.length - 1];
+    return order[Math.min(order.length - 1, Math.max(0, index + step))];
+}
+export const sessionsLayoutOf = (view) => (view === 'board' ? 'board' : 'list');
+/** The query string after the List/Board toggle: `view=board`, or no `view` for the list. */
+export function withSessionsLayout(search, layout) {
+    const params = new URLSearchParams(search);
+    if (layout === 'board')
+        params.set('view', 'board');
+    else if (params.get('view') === 'board')
+        params.delete('view');
+    return params.toString();
+}

package/dist/workspace/sessions/board-grouping.d.ts

@@ -0,0 +1,63 @@
+import type { ProjectSession, SessionBoardState } from '@kortix/sdk';
+/** The board's groups, top to bottom. */
+export declare const BOARD_GROUPS: readonly ["pinned", "needs_input", "working", "review", "completed", "ended"];
+export type BoardGroupId = (typeof BOARD_GROUPS)[number];
+/** Rows a folding group shows before "… N more". */
+export declare const BOARD_FOLD_LIMIT = 5;
+/**
+ * A session's board state: the API's `board_state`, else derived from the row
+ * an older API serves. `needs_input` wins when the session waits on its person
+ * (`attention`) or the review inbox holds an item for it.
+ */
+export declare function boardStateOf(session: ProjectSession, needsYouCount?: number): SessionBoardState;
+/**
+ * The group a session sits in.
+ *
+ * "Ready for review": Claude Code puts a session there when it opened a pull
+ * request. A Kortix session row carries no change request, so the rule here is
+ * the closest fact the row has: the session is idle (its turn ended, it waits
+ * for the next prompt) and it left an answer (`result_excerpt`). That is a
+ * result for the person to read. An idle session with no answer is finished
+ * work with nothing to read: Completed.
+ */
+export declare function boardGroupOf(session: ProjectSession, needsYouCount?: number): BoardGroupId;
+/** When the session last did something, for the row's age and the sort. */
+export declare function boardActivityAt(session: ProjectSession): string;
+export interface BoardFilters {
+    /** Board states to keep; empty keeps every state. */
+    states?: readonly SessionBoardState[];
+    /** Agent names or handles to keep; empty keeps every agent. */
+    agents?: readonly string[];
+    /** Case-insensitive text the title or result must contain. */
+    text?: string;
+}
+/** The agent a row names: the handle an agent gave it, else the agent it runs. */
+export declare function boardAgentOf(session: ProjectSession): string | null;
+/** The agent a row shows: the handle an agent gave it, else the agent it runs as a person reads it ("My Kortix"). */
+export declare function boardAgentLabel(session: ProjectSession): string | null;
+export declare function matchesBoardFilters(session: ProjectSession, filters: BoardFilters, title: string, needsYouCount?: number): boolean;
+export interface BoardGroup {
+    id: BoardGroupId;
+    /** The rows shown. */
+    sessions: ProjectSession[];
+    /** Rows past the fold ("… N more"); 0 when the group shows every row. */
+    hidden: number;
+    total: number;
+}
+export interface GroupBoardOptions {
+    needsYouBySession?: Record<string, number>;
+    /** Groups the person unfolded with "… N more". */
+    expanded?: ReadonlySet<BoardGroupId>;
+    /** A filter is active: every group shows every match, as Claude's filters expand collapsed groups. */
+    filtering?: boolean;
+    foldLimit?: number;
+}
+/**
+ * The sessions in board order: groups in `BOARD_GROUPS` order, newest activity
+ * first inside a group, empty groups dropped, a long finished group folded.
+ */
+export declare function groupBoard(sessions: readonly ProjectSession[], options?: GroupBoardOptions): BoardGroup[];
+/** The rows the keyboard walks, top to bottom: every shown row of every group. */
+export declare function boardRowOrder(groups: readonly BoardGroup[]): string[];
+/** The row's age as Claude Code prints it: `now`, `3m`, `2h`, `4d`. */
+export declare function compactAge(fromIso: string, nowMs: number): string;

package/dist/workspace/sessions/board-grouping.js

@@ -0,0 +1,141 @@
+/**
+ * The agent board (`/projects/<id>/sessions?view=board`): every session of the
+ * project grouped by what it needs from the person, as Claude Code's agent view
+ * groups background sessions. Pure functions; the board component renders them.
+ */
+import { agentDisplayName } from '../../internal/components/agent-mark.js';
+/** The board's groups, top to bottom. */
+export const BOARD_GROUPS = ['pinned', 'needs_input', 'working', 'review', 'completed', 'ended'];
+/** Rows a folding group shows before "… N more". */
+export const BOARD_FOLD_LIMIT = 5;
+/** Groups that fold: they collect finished sessions and grow without bound. */
+const FOLDING_GROUPS = new Set(['completed', 'ended']);
+/**
+ * A session's board state: the API's `board_state`, else derived from the row
+ * an older API serves. `needs_input` wins when the session waits on its person
+ * (`attention`) or the review inbox holds an item for it.
+ */
+export function boardStateOf(session, needsYouCount = 0) {
+    if (session.attention || needsYouCount > 0)
+        return 'needs_input';
+    if (session.board_state)
+        return session.board_state;
+    switch (session.status) {
+        case 'completed':
+            return 'completed';
+        case 'failed':
+            return 'failed';
+        case 'stopped':
+            return 'stopped';
+        case 'running':
+            return session.working?.state === 'idle' ? 'idle' : 'working';
+        default:
+            // queued, branching, provisioning: the session is starting, which is work in progress.
+            return 'working';
+    }
+}
+/**
+ * The group a session sits in.
+ *
+ * "Ready for review": Claude Code puts a session there when it opened a pull
+ * request. A Kortix session row carries no change request, so the rule here is
+ * the closest fact the row has: the session is idle (its turn ended, it waits
+ * for the next prompt) and it left an answer (`result_excerpt`). That is a
+ * result for the person to read. An idle session with no answer is finished
+ * work with nothing to read: Completed.
+ */
+export function boardGroupOf(session, needsYouCount = 0) {
+    if (session.pinned_at)
+        return 'pinned';
+    const state = boardStateOf(session, needsYouCount);
+    switch (state) {
+        case 'needs_input':
+            return 'needs_input';
+        case 'working':
+            return 'working';
+        case 'idle':
+            return session.result_excerpt?.trim() ? 'review' : 'completed';
+        case 'completed':
+            return 'completed';
+        case 'failed':
+        case 'stopped':
+            return 'ended';
+    }
+}
+/** When the session last did something, for the row's age and the sort. */
+export function boardActivityAt(session) {
+    return session.last_activity_at || session.updated_at || session.created_at;
+}
+/** The agent a row names: the handle an agent gave it, else the agent it runs. */
+export function boardAgentOf(session) {
+    return session.agent_handle || session.agent_name || null;
+}
+/** The agent a row shows: the handle an agent gave it, else the agent it runs as a person reads it ("My Kortix"). */
+export function boardAgentLabel(session) {
+    if (session.agent_handle)
+        return session.agent_handle;
+    return session.agent_name ? agentDisplayName(session.agent_name) : null;
+}
+export function matchesBoardFilters(session, filters, title, needsYouCount = 0) {
+    if (filters.states?.length && !filters.states.includes(boardStateOf(session, needsYouCount)))
+        return false;
+    if (filters.agents?.length) {
+        const names = [session.agent_handle, session.agent_name].filter((name) => !!name);
+        if (!filters.agents.some((agent) => names.some((name) => name.toLowerCase() === agent.toLowerCase())))
+            return false;
+    }
+    const text = filters.text?.trim().toLowerCase();
+    if (text && !`${title}\n${session.result_excerpt ?? ''}`.toLowerCase().includes(text))
+        return false;
+    return true;
+}
+/**
+ * The sessions in board order: groups in `BOARD_GROUPS` order, newest activity
+ * first inside a group, empty groups dropped, a long finished group folded.
+ */
+export function groupBoard(sessions, options = {}) {
+    const limit = options.foldLimit ?? BOARD_FOLD_LIMIT;
+    const byGroup = new Map();
+    for (const session of sessions) {
+        const group = boardGroupOf(session, options.needsYouBySession?.[session.session_id] ?? 0);
+        const list = byGroup.get(group);
+        if (list)
+            list.push(session);
+        else
+            byGroup.set(group, [session]);
+    }
+    const groups = [];
+    for (const id of BOARD_GROUPS) {
+        const list = byGroup.get(id);
+        if (!list?.length)
+            continue;
+        list.sort((a, b) => Date.parse(boardActivityAt(b)) - Date.parse(boardActivityAt(a)));
+        const fold = FOLDING_GROUPS.has(id) && !options.filtering && !options.expanded?.has(id) && list.length > limit + 1;
+        groups.push({
+            id,
+            sessions: fold ? list.slice(0, limit) : list,
+            hidden: fold ? list.length - limit : 0,
+            total: list.length,
+        });
+    }
+    return groups;
+}
+/** The rows the keyboard walks, top to bottom: every shown row of every group. */
+export function boardRowOrder(groups) {
+    return groups.flatMap((group) => group.sessions.map((session) => session.session_id));
+}
+/** The row's age as Claude Code prints it: `now`, `3m`, `2h`, `4d`. */
+export function compactAge(fromIso, nowMs) {
+    const then = Date.parse(fromIso);
+    if (!Number.isFinite(then))
+        return '';
+    const minutes = Math.floor(Math.max(0, nowMs - then) / 60_000);
+    if (minutes < 1)
+        return 'now';
+    if (minutes < 60)
+        return `${minutes}m`;
+    const hours = Math.floor(minutes / 60);
+    if (hours < 24)
+        return `${hours}h`;
+    return `${Math.floor(hours / 24)}d`;
+}

package/dist/workspace/sessions/board-peek.d.ts

@@ -0,0 +1,15 @@
+import type { ProjectSession } from '@kortix/sdk';
+/**
+ * The board's peek (Claude Code's `Space`): a side sheet with the session's
+ * transcript, live, read from the API (`SessionPeek`): a preview wakes no
+ * computer and never moves the app's runtime. One reply input steers the
+ * running turn. ↑/↓ outside the input move the peek to the next row.
+ */
+export declare function BoardPeek({ projectId, session, title, needsYouCount, onClose, onMove, }: {
+    projectId: string;
+    session: ProjectSession | null;
+    title: string;
+    needsYouCount: number;
+    onClose: () => void;
+    onMove: (step: 1 | -1) => void;
+}): import("react").JSX.Element;

package/dist/workspace/sessions/board-peek.js

@@ -0,0 +1,54 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowSquareOutIcon, PaperPlaneRightIcon } from '@phosphor-icons/react';
+import { useState } from 'react';
+import { useTranslations } from '../../i18n/index.js';
+import { uiRoutes } from '../../lib/routes.js';
+import { Button } from '../../primitives/button.js';
+import { Input } from '../../primitives/input.js';
+import Loading from '../../primitives/loading.js';
+import { Sheet, SheetContent, SheetDescription, SheetTitle } from '../../primitives/sheet.js';
+import { errorToast, successToast } from '../../primitives/toast.js';
+import { UiLink } from '../../providers/ui-provider.js';
+import { SessionPeek } from '../../session/agents/session-peek.js';
+import { useSteerSession } from '../../session/agents/steer-session.js';
+import { boardAgentLabel, boardStateOf } from './board-grouping.js';
+import { BoardStateMark } from './board-state-mark.js';
+/**
+ * The board's peek (Claude Code's `Space`): a side sheet with the session's
+ * transcript, live, read from the API (`SessionPeek`): a preview wakes no
+ * computer and never moves the app's runtime. One reply input steers the
+ * running turn. ↑/↓ outside the input move the peek to the next row.
+ */
+export function BoardPeek({ projectId, session, title, needsYouCount, onClose, onMove, }) {
+    const t = useTranslations('multiAgent.board');
+    const [reply, setReply] = useState('');
+    const send = useSteerSession(projectId, {
+        onSent: () => {
+            setReply('');
+            successToast(t('replySent'));
+        },
+        onError: (error) => errorToast(t('replyFailed'), { description: error instanceof Error ? error.message : undefined }),
+    });
+    const submit = () => {
+        const text = reply.trim();
+        if (!session || !text || send.isPending)
+            return;
+        send.mutate({ sessionId: session.session_id, text });
+    };
+    const onKeyDown = (event) => {
+        const target = event.target;
+        if (target.tagName === 'INPUT' || target.isContentEditable)
+            return;
+        if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+            event.preventDefault();
+            onMove(event.key === 'ArrowDown' ? 1 : -1);
+        }
+    };
+    const state = session ? boardStateOf(session, needsYouCount) : null;
+    const agent = session ? boardAgentLabel(session) : null;
+    return (_jsx(Sheet, { open: !!session, onOpenChange: (open) => !open && onClose(), children: _jsx(SheetContent, { side: "right", className: "w-full gap-0 p-0 sm:max-w-xl", overlayClassName: "bg-transparent", onKeyDown: onKeyDown, "aria-describedby": undefined, children: session && state ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "border-border flex shrink-0 items-start gap-3 border-b px-4 py-3 pr-14", children: [_jsxs("div", { className: "min-w-0 flex-1 space-y-1", children: [_jsx(SheetTitle, { className: "text-foreground truncate text-sm font-medium", children: title }), _jsx(SheetDescription, { asChild: true, children: _jsxs("div", { className: "text-muted-foreground flex min-w-0 items-center gap-1.5 text-xs", children: [_jsx(BoardStateMark, { state: state }), agent ? (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": true, children: "\u00B7" }), _jsx("span", { className: "truncate", children: agent })] })) : null] }) })] }), _jsx(Button, { asChild: true, variant: "outline", size: "sm", className: "shrink-0 gap-1.5", children: _jsxs(UiLink, { href: uiRoutes().session(projectId, session.session_id), children: [_jsx(ArrowSquareOutIcon, { className: "size-3.5 shrink-0" }), t('openSession')] }) })] }), _jsx("div", { className: "flex min-h-0 flex-1 flex-col", children: _jsx(SessionPeek, { projectId: projectId, sessionId: session.session_id, working: state === 'working', density: "compact" }, session.session_id) }), _jsxs("form", { className: "border-border flex shrink-0 items-center gap-2 border-t px-4 py-3", onSubmit: (event) => {
+                            event.preventDefault();
+                            submit();
+                        }, children: [_jsx(Input, { value: reply, onChange: (event) => setReply(event.target.value), placeholder: t('replyPlaceholder'), "aria-label": t('replyLabel', { title }), disabled: send.isPending, className: "min-w-0 flex-1" }), _jsxs(Button, { type: "submit", size: "sm", className: "shrink-0 gap-1.5", disabled: !reply.trim() || send.isPending, children: [send.isPending ? (_jsx(Loading, { className: "size-3.5 shrink-0" })) : (_jsx(PaperPlaneRightIcon, { className: "size-3.5 shrink-0" })), t('sendReply')] })] })] })) : null }) }));
+}

package/dist/workspace/sessions/board-state-mark.d.ts

@@ -0,0 +1,15 @@
+import type { SessionBoardState } from '@kortix/sdk';
+import { type StatusTone } from '../../primitives/status.js';
+/**
+ * One hue per state (color.md, D5): working is live (green), needs input asks
+ * for attention (orange), completed succeeded (green), failed broke (red);
+ * idle and stopped carry no hue. The word beside the dot says the state, so
+ * the color is never the only carrier.
+ */
+export declare const BOARD_STATE_TONE: Record<SessionBoardState, StatusTone>;
+/** The state dot and its word. A working dot pulses: it is the one state that changes while you watch. */
+export declare function BoardStateMark({ state, showLabel, className, }: {
+    state: SessionBoardState;
+    showLabel?: boolean;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/workspace/sessions/board-state-mark.js

@@ -0,0 +1,24 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslations } from '../../i18n/index.js';
+import { cn } from '../../lib/utils.js';
+import { StatusDot } from '../../primitives/status.js';
+/**
+ * One hue per state (color.md, D5): working is live (green), needs input asks
+ * for attention (orange), completed succeeded (green), failed broke (red);
+ * idle and stopped carry no hue. The word beside the dot says the state, so
+ * the color is never the only carrier.
+ */
+export const BOARD_STATE_TONE = {
+    working: 'success',
+    needs_input: 'warning',
+    idle: 'neutral',
+    completed: 'success',
+    failed: 'destructive',
+    stopped: 'neutral',
+};
+/** The state dot and its word. A working dot pulses: it is the one state that changes while you watch. */
+export function BoardStateMark({ state, showLabel = true, className, }) {
+    const t = useTranslations('multiAgent.board.state');
+    return (_jsxs("span", { className: cn('inline-flex shrink-0 items-center gap-1.5', className), "data-board-state": state, children: [_jsx(StatusDot, { tone: BOARD_STATE_TONE[state], pulse: state === 'working', className: "motion-reduce:animate-none" }), _jsx("span", { className: cn(showLabel ? 'text-muted-foreground text-xs' : 'sr-only'), children: t(state) })] }));
+}

package/dist/workspace/sessions/project-sessions-view.js

@@ -7,7 +7,7 @@ import { Button } from '../../primitives/button.js';
 import { Disclosure, DisclosureContent, DisclosureTrigger } from '../../primitives/disclosure.js';
 import { FadedScrollArea } from '../../primitives/faded-scroll-area.js';
 import { Skeleton } from '../../primitives/skeleton.js';
-import { Tabs, TabsListCompact, TabsTriggerCompact } from '../../primitives/tabs.js';
+import { Tabs, TabsList, TabsListCompact, TabsTrigger, TabsTriggerCompact } from '../../primitives/tabs.js';
 import { errorToast, successToast, warningToast } from '../../primitives/toast.js';
 import { EmptyState } from '../../primitives/empty-state.js';
 import { ErrorState } from '../../primitives/error-state.js';
@@ -27,7 +27,7 @@ import { selectExpandedIds, useSessionExpandedStore, } from '../../internal/stor
 import { selectCollapsedSections, selectGroupMode, selectHiddenSections, selectOrderMode, selectSourceFilters, selectLabelFilters, selectAccessFilters, selectOwnerFilters, selectStatusFilters, useSessionFilterStore, } from '../../internal/stores/session-filter-store.js';
 import { deleteProjectSession, restartProjectSession, setSessionArchived, stopProjectSession, } from '@kortix/sdk';
 import { qk, removeCachedProjectSession, useFeatureFlag, useProjectSessions, useSessionChildren, } from '@kortix/sdk/react';
-import { CaretRightIcon, MagnifyingGlassIcon } from '@phosphor-icons/react';
+import { CaretRightIcon, KanbanIcon, ListIcon, MagnifyingGlassIcon } from '@phosphor-icons/react';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { format, formatDistanceToNowStrict } from 'date-fns';
 import { useUiPathname, useUiRouter, useUiSearchParams } from '../../providers/ui-provider.js';
@@ -41,6 +41,8 @@ import { SessionRow } from './session-row.js';
 import { SessionsEmptyState } from './sessions-empty-state.js';
 import { SessionsSelectionBar } from './sessions-selection-bar.js';
 import { SessionsToolbar } from './sessions-toolbar.js';
+import { sessionsLayoutOf, withSessionsLayout } from './board-dispatch.js';
+import { SessionsBoard } from './sessions-board.js';
 /**
  * This page's view state is its OWN — narrowing the manager inventory here must not
  * narrow the sidebar you navigate with. It still OPENS matching the sidebar:
@@ -136,6 +138,7 @@ export function ProjectSessionsView({ projectId }) {
     const tPinArchive = useTranslations('sidebar.pinArchive');
     const tDeleted = useTranslations('sidebar.recentlyDeleted');
     const tSessionDelete = useTranslations('sessionDelete');
+    const tBoard = useTranslations('multiAgent.board');
     const queryClient = useQueryClient();
     const router = useUiRouter();
     const pathname = useUiPathname();
@@ -157,6 +160,14 @@ export function ProjectSessionsView({ projectId }) {
         if (tab)
             setStartedBy(tab);
     }
+    // `?view=board` is the agent board (Claude Code's agent view); the toggle writes it.
+    const layout = sessionsLayoutOf(viewParam);
+    const selectLayout = (next) => {
+        if (next === layout)
+            return;
+        const query = withSessionsLayout(searchParams?.toString() ?? '', next);
+        router.replace(query ? `${pathname}?${query}` : pathname, { scroll: false });
+    };
     // A tab writes `?view=`: a reload keeps it, and the sidebar link opens the
     // view again after the viewer picked another tab.
     const selectTab = (tab) => {
@@ -535,35 +546,35 @@ export function ProjectSessionsView({ projectId }) {
                         } })) : null }), childrenOpen ? (_jsx(SessionChildrenRows, { projectId: projectId, parentId: session.session_id, q: searching && session.search_match === 'child' ? searchQuery : undefined, renderRow: (child) => renderRow(child) })) : null] }, session.session_id));
     };
     const header = selectMode ? (_jsx(SessionsSelectionBar, { selectedCount: selectedCount, selectableCount: selectableSessions.length, allSelected: allSelected, onSelectAll: () => setSelected(new Set(selectableSessions.map((session) => session.session_id))), onClearSelection: () => setSelected(new Set()), onExit: exitSelectMode, onDelete: () => setBulkConfirmOpen(true), deleting: bulkDeleteMutation.isPending, onArchive: () => bulkArchiveMutation.mutate({ sessionIds: [...visibleSelection], archived: !archivedTab }), archiveLabel: tPinArchive(archivedTab ? 'bulkUnarchive' : 'bulkArchive'), archiving: bulkArchiveMutation.isPending })) : (_jsx(SessionsToolbar, { projectId: projectId, sessions: sessions, reviewCountBySession: needsYouBySession, search: search, onSearchChange: setSearch, searchOpen: searchOpen, onSearchOpenChange: setSearchOpen, onEnterSelectMode: () => setSelectMode(true), creatingSession: creatingSession, canSelect: sessions.length > 0 && !deletedTab, showNewSession: !channelsOn }));
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "relative flex h-full min-h-0 flex-col overflow-hidden", children: [_jsx(SidebarToggle, { placement: "floating" }), _jsxs("header", { className: cn('mx-auto w-full max-w-4xl shrink-0 px-4 pt-10 pb-5 lg:pt-20', 'flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between'), children: [_jsx("div", { className: "space-y-1", children: _jsx("h2", { className: "text-foreground text-xl font-medium", children: tI18nComplete.raw('text6fa3cbf451b2') }) }), _jsx("div", { className: "mt-2 shrink-0 sm:mt-0", children: header })] }), _jsxs("div", { className: cn('mx-auto flex min-h-0 w-full max-w-4xl flex-1 flex-col px-4 pb-4'), children: [_jsx(Tabs, { value: startedBy, onValueChange: (value) => selectTab(value), className: "shrink-0", children: _jsxs(TabsListCompact, { "aria-label": tSidebar('startedBy.label'), children: [STARTED_BY_FILTERS.map((value) => (_jsx(TabsTriggerCompact, { value: value, children: tSidebar(`startedBy.${value}`) }, value))), _jsx(TabsTriggerCompact, { value: "archived", children: tPinArchive('view') }), _jsx(TabsTriggerCompact, { value: "deleted", children: tDeleted('view') })] }) }), listState === 'loading' ? (_jsx(SessionListSkeleton, {})) : listState === 'error' ? (_jsx(ErrorState, { size: "sm", title: tI18nComplete.raw('textb6d85433a7ee'), description: sessionsQuery.error instanceof Error ? sessionsQuery.error.message : undefined, action: _jsx(Button, { variant: "outline", size: "sm", onClick: () => sessionsQuery.refetch(), children: tI18nComplete.raw('text942087cc2d41') }) })) : listState === 'more' ? (
-                            // No row the viewer can see on the pages read so far, and more
-                            // pages exist (KRTX-1727): offer them, never "No sessions yet".
-                            _jsx("div", { className: "pt-6", children: loadMoreButton })) : listState === 'empty' && !searching && archivedTab ? (_jsx(EmptyState, { size: "sm", title: tPinArchive('empty') })) : listState === 'empty' && !searching && deletedTab ? (_jsx(EmptyState, { size: "sm", title: tDeleted('empty', { days: RESTORE_DAYS }) })) : deletedTab && listState !== 'empty' ? (
-                            // Flat, newest first as the server pages it. No grouping or client
-                            // facets: these are the rows the restore route would still take.
-                            _jsx("div", { className: "relative min-h-0 flex-1", children: _jsx("div", { className: "absolute inset-0", children: _jsx(FadedScrollArea, { fadeColor: "from-background", className: "pt-4", children: _jsxs("div", { className: "space-y-2 pb-6", "aria-live": "polite", "data-recently-deleted": true, children: [sessions.map((session) => (_jsx(DeletedSessionRow, { session: session, restoring: restoreMutation.isPending &&
-                                                        restoreMutation.variables?.session_id === session.session_id, onRestore: restoreSession }, session.session_id))), sessionsQuery.hasNextPage && loadMoreButton] }) }) }) })) : listState === 'empty' && !searching && startedBy === 'all' ? (_jsx(SessionsEmptyState, { className: "flex-1 pb-24" })) : grouped.sections.length === 0 || listState === 'empty' ? (
-                            // Covers BOTH "the filters/search match nothing" and "every section
-                            // was hidden via the menu's Show list" — `visibleSessions.length`
-                            // alone cannot see the second, and the list would otherwise render
-                            // an empty scroll area with no explanation.
-                            _jsx(EmptyState, { size: "sm", icon: MagnifyingGlassIcon, title: tI18nComplete.raw('text2732406e3be5'), description: visibleSessions.length > 0
-                                    ? tI18nComplete.raw('text67f2187d81d7')
-                                    : tI18nComplete.raw('text2749b54ef956'), action: _jsx(Button, { variant: "outline", size: "sm", onClick: () => {
-                                        resetFilters(projectId, SURFACE);
-                                        setSearch('');
-                                        selectTab('all');
-                                    }, children: tI18nComplete.raw('text7179ea0035fc') }) })) : (
-                            /* The list gets a containing block whose height cannot depend on
-                                   its children. `FadedScrollArea` sizes its outer element with
-                                   `h-full`, and `height: 100%` only resolves against a definite
-                                   height — inside a flex chain still being measured from content it
-                                   resolves to `auto`, so the component grows to fit every row and
-                                   the whole app shell scrolls instead of the list. An
-                                   `absolute inset-0` layer is out of flow, so this parent
-                                   contributes no content height and takes only what flexbox gives
-                                   it, which makes the percentage definite. */
-                            _jsx("div", { className: "relative min-h-0 flex-1", children: _jsx("div", { className: "absolute inset-0", children: _jsx(FadedScrollArea, { fadeColor: "from-background", className: "pt-4", children: _jsxs("div", { className: "space-y-4 pb-6", "aria-live": "polite", children: [grouped.sections.map((section) => (_jsx(SessionsSection, { section: section, showHeader: grouped.showHeaders, open: !collapsedSectionSet.has(section.id), onOpenChange: () => toggleSectionCollapsed(projectId, section.id, SURFACE), children: section.sessions.map((session) => renderRow(session, true)) }, section.id))), sessionsQuery.hasNextPage && loadMoreButton] }) }) }) }))] })] }), _jsx(SessionsBulkDeleteDialog, { count: selectedCount, open: bulkConfirmOpen, isPending: bulkDeleteMutation.isPending, onOpenChange: setBulkConfirmOpen, onConfirm: () => bulkDeleteMutation.mutate([...visibleSelection]) }), _jsx(ShareSessionModal, { projectId: projectId, session: sessionToShare, open: !!sessionToShare, onOpenChange: (open) => !open && setSessionToShare(null), onSaved: invalidateSessions }), _jsx(SessionLabelsModal, { projectId: projectId, session: sessionToLabel, open: !!sessionToLabel, onOpenChange: (open) => !open && setSessionToLabel(null) }), _jsx(RenameSessionModal, { projectId: projectId, sessionId: sessionToRename?.id ?? null, currentName: sessionToRename?.name, open: !!sessionToRename, onOpenChange: (open) => !open && setSessionToRename(null) }), _jsx(SessionDeleteModal, { projectId: projectId, sessionId: sessionToDelete?.id ?? null, sessionLabel: sessionToDelete?.label, open: !!sessionToDelete, onOpenChange: (open) => !open && setSessionToDelete(null), 
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "relative flex h-full min-h-0 flex-col overflow-hidden", children: [_jsx(SidebarToggle, { placement: "floating" }), _jsxs("header", { className: cn('mx-auto w-full max-w-4xl shrink-0 px-4 pt-10 pb-5 lg:pt-20', 'flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between'), children: [_jsx("div", { className: "space-y-1", children: _jsx("h2", { className: "text-foreground text-xl font-medium", children: tI18nComplete.raw('text6fa3cbf451b2') }) }), _jsxs("div", { className: "mt-2 flex shrink-0 items-center gap-2 sm:mt-0", children: [_jsx(Tabs, { value: layout, onValueChange: (value) => selectLayout(value), children: _jsxs(TabsList, { "aria-label": tBoard('layoutLabel'), children: [_jsxs(TabsTrigger, { value: "list", size: "sm", className: "gap-1.5", children: [_jsx(ListIcon, { className: "size-3.5" }), tBoard('layoutList')] }), _jsxs(TabsTrigger, { value: "board", size: "sm", className: "gap-1.5", children: [_jsx(KanbanIcon, { className: "size-3.5" }), tBoard('layoutBoard')] })] }) }), layout === 'list' ? header : null] })] }), _jsx("div", { className: cn('mx-auto flex min-h-0 w-full max-w-4xl flex-1 flex-col px-4 pb-4'), children: layout === 'board' ? (_jsx(SessionsBoard, { projectId: projectId })) : (_jsxs(_Fragment, { children: [_jsx(Tabs, { value: startedBy, onValueChange: (value) => selectTab(value), className: "shrink-0", children: _jsxs(TabsListCompact, { "aria-label": tSidebar('startedBy.label'), children: [STARTED_BY_FILTERS.map((value) => (_jsx(TabsTriggerCompact, { value: value, children: tSidebar(`startedBy.${value}`) }, value))), _jsx(TabsTriggerCompact, { value: "archived", children: tPinArchive('view') }), _jsx(TabsTriggerCompact, { value: "deleted", children: tDeleted('view') })] }) }), listState === 'loading' ? (_jsx(SessionListSkeleton, {})) : listState === 'error' ? (_jsx(ErrorState, { size: "sm", title: tI18nComplete.raw('textb6d85433a7ee'), description: sessionsQuery.error instanceof Error ? sessionsQuery.error.message : undefined, action: _jsx(Button, { variant: "outline", size: "sm", onClick: () => sessionsQuery.refetch(), children: tI18nComplete.raw('text942087cc2d41') }) })) : listState === 'more' ? (
+                                // No row the viewer can see on the pages read so far, and more
+                                // pages exist (KRTX-1727): offer them, never "No sessions yet".
+                                _jsx("div", { className: "pt-6", children: loadMoreButton })) : listState === 'empty' && !searching && archivedTab ? (_jsx(EmptyState, { size: "sm", title: tPinArchive('empty') })) : listState === 'empty' && !searching && deletedTab ? (_jsx(EmptyState, { size: "sm", title: tDeleted('empty', { days: RESTORE_DAYS }) })) : deletedTab && listState !== 'empty' ? (
+                                // Flat, newest first as the server pages it. No grouping or client
+                                // facets: these are the rows the restore route would still take.
+                                _jsx("div", { className: "relative min-h-0 flex-1", children: _jsx("div", { className: "absolute inset-0", children: _jsx(FadedScrollArea, { fadeColor: "from-background", className: "pt-4", children: _jsxs("div", { className: "space-y-2 pb-6", "aria-live": "polite", "data-recently-deleted": true, children: [sessions.map((session) => (_jsx(DeletedSessionRow, { session: session, restoring: restoreMutation.isPending &&
+                                                            restoreMutation.variables?.session_id === session.session_id, onRestore: restoreSession }, session.session_id))), sessionsQuery.hasNextPage && loadMoreButton] }) }) }) })) : listState === 'empty' && !searching && startedBy === 'all' ? (_jsx(SessionsEmptyState, { className: "flex-1 pb-24" })) : grouped.sections.length === 0 || listState === 'empty' ? (
+                                // Covers BOTH "the filters/search match nothing" and "every section
+                                // was hidden via the menu's Show list" — `visibleSessions.length`
+                                // alone cannot see the second, and the list would otherwise render
+                                // an empty scroll area with no explanation.
+                                _jsx(EmptyState, { size: "sm", icon: MagnifyingGlassIcon, title: tI18nComplete.raw('text2732406e3be5'), description: visibleSessions.length > 0
+                                        ? tI18nComplete.raw('text67f2187d81d7')
+                                        : tI18nComplete.raw('text2749b54ef956'), action: _jsx(Button, { variant: "outline", size: "sm", onClick: () => {
+                                            resetFilters(projectId, SURFACE);
+                                            setSearch('');
+                                            selectTab('all');
+                                        }, children: tI18nComplete.raw('text7179ea0035fc') }) })) : (
+                                /* The list gets a containing block whose height cannot depend on
+                                       its children. `FadedScrollArea` sizes its outer element with
+                                       `h-full`, and `height: 100%` only resolves against a definite
+                                       height — inside a flex chain still being measured from content it
+                                       resolves to `auto`, so the component grows to fit every row and
+                                       the whole app shell scrolls instead of the list. An
+                                       `absolute inset-0` layer is out of flow, so this parent
+                                       contributes no content height and takes only what flexbox gives
+                                       it, which makes the percentage definite. */
+                                _jsx("div", { className: "relative min-h-0 flex-1", children: _jsx("div", { className: "absolute inset-0", children: _jsx(FadedScrollArea, { fadeColor: "from-background", className: "pt-4", children: _jsxs("div", { className: "space-y-4 pb-6", "aria-live": "polite", children: [grouped.sections.map((section) => (_jsx(SessionsSection, { section: section, showHeader: grouped.showHeaders, open: !collapsedSectionSet.has(section.id), onOpenChange: () => toggleSectionCollapsed(projectId, section.id, SURFACE), children: section.sessions.map((session) => renderRow(session, true)) }, section.id))), sessionsQuery.hasNextPage && loadMoreButton] }) }) }) }))] })) })] }), _jsx(SessionsBulkDeleteDialog, { count: selectedCount, open: bulkConfirmOpen, isPending: bulkDeleteMutation.isPending, onOpenChange: setBulkConfirmOpen, onConfirm: () => bulkDeleteMutation.mutate([...visibleSelection]) }), _jsx(ShareSessionModal, { projectId: projectId, session: sessionToShare, open: !!sessionToShare, onOpenChange: (open) => !open && setSessionToShare(null), onSaved: invalidateSessions }), _jsx(SessionLabelsModal, { projectId: projectId, session: sessionToLabel, open: !!sessionToLabel, onOpenChange: (open) => !open && setSessionToLabel(null) }), _jsx(RenameSessionModal, { projectId: projectId, sessionId: sessionToRename?.id ?? null, currentName: sessionToRename?.name, open: !!sessionToRename, onOpenChange: (open) => !open && setSessionToRename(null) }), _jsx(SessionDeleteModal, { projectId: projectId, sessionId: sessionToDelete?.id ?? null, sessionLabel: sessionToDelete?.label, open: !!sessionToDelete, onOpenChange: (open) => !open && setSessionToDelete(null), 
                 // The modal's own onSuccess already invalidates qk.project.sessionsScope
                 // — the prefix that reaches the 'project'-scoped key this view reads
                 // — so this is a harmless duplicate, kept so the two do not silently

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

@@ -0,0 +1,12 @@
+/**
+ * The agent board (`/projects/<id>/sessions?view=board`), Claude Code's agent
+ * view in Kortix's own look: every session of the project, child sessions
+ * included, grouped by what it needs (Pinned, Needs input, Working, Ready for
+ * review, Completed, Failed · Stopped). One input on top starts a session
+ * (`@agent prompt` or a plain prompt) or filters the board (`s:working`,
+ * `a:reviewer`). The list owns the keys: ↑/↓ move, Space peeks, Enter opens,
+ * x stops.
+ */
+export declare function SessionsBoard({ projectId }: {
+    projectId: string;
+}): import("react").JSX.Element;