@kortix/ui 0.14.11 → 0.14.13

package/dist/primitives/pixel-kortix-mark.js

@@ -1,24 +1,14 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PIXEL_KORTIX_ROWS } from '../_vendor/kortix-shared.js';
 import { useId } from 'react';
 import { cn } from '../lib/utils.js';
 /**
- * The Kortix symbol (`kortix-logo.tsx`, `variant="icon"`) sampled onto a
- * 12 × 10 grid. `#` is a cell the symbol fully covers; `+` is a cell on a curve
- * that it only partly covers, drawn as a checker so the curves read as dither.
+ * The Kortix symbol on a 12 × 10 grid: `#` a full cell, `+` a curve cell drawn
+ * as a checker. The rows live in `@kortix/shared/pixel-mark` so the TUI splash
+ * draws the same symbol; this module re-exports them under the same name.
  */
-export const PIXEL_KORTIX_ROWS = [
-    '##   ##   ##',
-    '##   ##   ##',
-    '+#+  ##  +#+',
-    ' ##+ ## +## ',
-    '  ########  ',
-    '  ########  ',
-    ' ##+ ## +## ',
-    '+#+  ##  +#+',
-    '##   ##   ##',
-    '##   ##   ##',
-];
+export { PIXEL_KORTIX_ROWS };
 /** Cell size and the gap after it, in viewBox units. At the default size one
  *  unit is one CSS pixel, so cells and the 1px checker land on whole pixels. */
 const CELL = 5;

package/dist/primitives/tag.d.ts

@@ -1,7 +1,7 @@
 import { type VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 declare const tagVariants: (props?: ({
-    variant?: "custom" | "warning" | "default" | "free" | "new" | "latest" | null | undefined;
+    variant?: "custom" | "warning" | "default" | "new" | "free" | "latest" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Tag({ className, variant, ...props }: React.ComponentProps<'span'> & VariantProps<typeof tagVariants>): React.JSX.Element;
 export { Tag, tagVariants };

package/dist/primitives/textarea.js

@@ -4,11 +4,25 @@ import { inputFocusClasses, inputInvalidClasses, inputSurfaceClasses, inputTrans
 import { cn } from '../lib/utils.js';
 import * as React from 'react';
 import { useImperativeHandle } from 'react';
+const useIsomorphicLayoutEffect = typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect;
 export const useAutosizeTextArea = ({ textAreaRef, triggerAutoSize, maxHeight = Number.MAX_SAFE_INTEGER, minHeight = 0, }) => {
     const [init, setInit] = React.useState(true);
     const [currentHeight, setCurrentHeight] = React.useState(minHeight);
     const previousContentRef = React.useRef(triggerAutoSize);
     const resizeTimeoutRef = React.useRef(null);
+    // Size an empty textarea before the first paint. Otherwise it paints at the
+    // browser's `rows` height and the resize below snaps it 100 ms later: a
+    // visible jump (the New agent modal's "What it does" field).
+    useIsomorphicLayoutEffect(() => {
+        const textAreaElement = textAreaRef.current;
+        if (!textAreaElement)
+            return;
+        textAreaElement.style.minHeight = `${minHeight + 6}px`;
+        if (maxHeight > minHeight)
+            textAreaElement.style.maxHeight = `${maxHeight}px`;
+        if (textAreaElement.value.trim() === '')
+            textAreaElement.style.height = `${minHeight}px`;
+    }, [textAreaRef, minHeight, maxHeight]);
     React.useEffect(() => {
         const offsetBorder = 6;
         const textAreaElement = textAreaRef.current;

package/dist/primitives/toast.d.ts

@@ -10,6 +10,8 @@ type ToastOptions = {
     description?: string;
     duration?: number;
     id?: string | number;
+    /** Runs when the toast leaves: a dismissal or its timeout. */
+    onClose?: () => void;
     position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left' | 'top-center' | 'bottom-center';
     /** Text links under the body, joined by a dot. */
     actions?: ToastAction[];

package/dist/primitives/toast.js

@@ -34,6 +34,8 @@ const toastData = (options, duration, isMobile) => ({
     duration,
     position: isMobile ? 'top-center' : options?.position || DEFAULT_POSITION,
 });
+/** sonner's two ways off the screen, as one callback. */
+const closeCallbacks = (onClose) => onClose ? { onDismiss: onClose, onAutoClose: onClose } : {};
 /** A 16px filled status disc. The mark inside is drawn in the card's own color. */
 function Disc({ className, children }) {
     return (
@@ -150,7 +152,7 @@ function UndoToastCard({ message, icon, undoLabel, onUndo, onDismiss, }) {
  */
 const renderToast = (message, variant, options, duration) => {
     const isMobile = window.innerWidth <= 768;
-    return toast.custom((t) => (_jsx(ToastCard, { message: message, icon: toastIcon(variant), variant: variant, options: options, onDismiss: () => toast.dismiss(t) })), toastData(options, duration, isMobile));
+    return toast.custom((t) => (_jsx(ToastCard, { message: message, icon: toastIcon(variant), variant: variant, options: options, onDismiss: () => toast.dismiss(t) })), { ...toastData(options, duration, isMobile), ...closeCallbacks(options?.onClose) });
 };
 export const successToast = (message, options) => {
     renderToast(message, 'success', options, options?.duration || DEFAULT_DURATION);
@@ -216,7 +218,7 @@ export const customToast = (render, options) => {
     const isMobile = window.innerWidth <= 768;
     return toast.custom((t) => render(() => toast.dismiss(t)), {
         ...toastData(options, options.duration ?? DEFAULT_DURATION, isMobile),
-        ...(options.onClose ? { onDismiss: options.onClose, onAutoClose: options.onClose } : {}),
+        ...closeCallbacks(options.onClose),
     });
 };
 /**

package/dist/providers/ui-provider.d.ts

@@ -320,6 +320,22 @@ export interface UiHostComponents {
      * (apps/web: its mobile app). Without it, nothing is shown.
      */
     HomeAnnouncement?: React.ComponentType;
+    /**
+     * One room's conversation (flag `agent_rooms`): its messages and a composer,
+     * by room NAME. A room that does not exist yet shows an empty state, and the
+     * first post creates it with `emptyTopic`. A space page renders its own room
+     * (the room named like the space's slug) through it, `fill` in its room
+     * tab: no frame, no header, the container's full height. Without it, a link
+     * to the rooms page.
+     */
+    RoomPanel?: React.ComponentType<{
+        projectId: string;
+        roomName: string;
+        emptyTopic?: string;
+        fill?: boolean;
+        /** Replaces the room's one-line intro above its first message (the space page's room tab). */
+        intro?: React.ReactNode;
+    }>;
     /** Who can open a session, and its public link. Without it, the header has no Share button. */
     ShareSessionModal?: React.ComponentType<{
         projectId: string;

package/dist/session/actions/session-label.d.ts

@@ -27,7 +27,7 @@ export interface SessionSource {
     /** For trigger-fired sessions: the kortix.yaml trigger slug. */
     triggerSlug: string | null;
 }
-/** The platform meta coordinator — drives other sessions from its own sandbox. */
+/** My Kortix (slug `mykortix`, `meta` on an older session), the built-in agent — drives other sessions from its own sandbox. */
 export declare function isMetaCoordinatorSession(session: ProjectSession): boolean;
 /**
  * Viewer-relative ownership marker.

package/dist/session/actions/session-label.js

@@ -1,8 +1,8 @@
-import { stripChatMentionMarkup } from '../../_vendor/kortix-shared.js';
+import { isMyKortixAgentName, stripChatMentionMarkup } from '../../_vendor/kortix-shared.js';
 import { isLegacyMigratedSession, SESSION_LIST_STATUS, sessionListStatus, } from '@kortix/sdk';
-/** The platform meta coordinator — drives other sessions from its own sandbox. */
+/** My Kortix (slug `mykortix`, `meta` on an older session), the built-in agent — drives other sessions from its own sandbox. */
 export function isMetaCoordinatorSession(session) {
-    return session.agent_name === 'meta';
+    return isMyKortixAgentName(session.agent_name);
 }
 /**
  * Viewer-relative ownership marker.

package/dist/session/agents/agent-model.d.ts

@@ -0,0 +1,92 @@
+/**
+ * The agents line's model: which child sessions it lists, in which group and
+ * in which order, and what the one line under the composer says. Pure, so the
+ * rules are tested without a render tree.
+ *
+ * Claude Code's agent panel lists the agents a session started (subagents and
+ * teammates) under the prompt; Kortix lists the child sessions of this session.
+ * A teammate (`team_lead_session_id` = this session) goes under "Team". The
+ * sessions a workflow run started are that run's agents, so they stay out of
+ * the agent rows: the "Workflows" group shows the run instead.
+ */
+import type { ProjectSession, SessionBoardState } from '@kortix/sdk';
+/** The states a row draws, Claude's agent view states. */
+export type AgentRowState = SessionBoardState;
+export interface AgentRow {
+    sessionId: string;
+    /**
+     * What the line calls it: the agent handle, else the session name, else the
+     * agent's display name (`kortix` → "Kortix"), never a raw slug.
+     */
+    handle: string;
+    /** The project agent slug it runs as. */
+    agent: string | null;
+    /** The handle is a name of its own (a handle or a session name), so "runs as <agent>" adds something. */
+    named: boolean;
+    state: AgentRowState;
+    /** What it waits for, when `needs_input`. */
+    attention: 'question' | 'approval' | null;
+    /** One line: the result excerpt, else the session title. */
+    line: string | null;
+    /** Epoch ms of its newest activity, for the order inside a state. */
+    activityMs: number;
+    /** Epoch ms its current turn started, while it works and the API says when. */
+    workingSinceMs: number | null;
+}
+/** A child older than this that has settled is no longer "recent": it leaves the line. */
+export declare const RECENT_MS: number;
+/** The popover lists at most this many agent rows per group. */
+export declare const MAX_ROWS = 20;
+/** Board state of a session row: the API's `board_state`, else derived from the older fields. */
+export declare function boardStateOf(session: ProjectSession): AgentRowState;
+/** True while a row works or waits on its person: it can be stopped. */
+export declare function isActive(state: AgentRowState): boolean;
+/**
+ * A spawned session's own title. pi named a child `<description> (@agent
+ * subagent)` until 2026-10-31, and those rows keep the name: every surface shows
+ * the agent apart (`agent_name`), never in the title.
+ */
+export declare function subagentTitle(name: string): string;
+export declare function agentRowOf(session: ProjectSession): AgentRow;
+export interface StripGroups {
+    agents: AgentRow[];
+    team: AgentRow[];
+}
+/**
+ * The agent rows of a session: its children and its teammates, each once.
+ * `exclude` holds the sessions a workflow run owns (its agents and its runner).
+ * A settled row older than {@link RECENT_MS} leaves the line.
+ */
+export declare function stripGroups(input: {
+    leadSessionId: string;
+    children: readonly ProjectSession[];
+    teammates: readonly ProjectSession[];
+    exclude: ReadonlySet<string>;
+    now: number;
+}): StripGroups;
+export interface StripCounts {
+    agents: number;
+    working: number;
+    needsInput: number;
+}
+export declare function stripCounts(rows: readonly AgentRow[]): StripCounts;
+/**
+ * The one mark at the head of the agents line: needs you (an agent waits on the
+ * person), working (an agent or a workflow run works), failed (the newest agent
+ * did not finish), done (everything else: every agent ended its turn).
+ */
+export type LineMark = 'needs_input' | 'working' | 'failed' | 'done';
+export interface LineSummary extends StripCounts {
+    mark: LineMark;
+    /** Workflow runs listed, and how many of them run. */
+    runs: number;
+    runningRuns: number;
+    /** The agent with the newest activity, named on the line while nothing works. */
+    newest: AgentRow | null;
+}
+/** What the agents line says: `2 agents · 1 working`, `2 agents · poet done`, `1 workflow running`. */
+export declare function lineSummary(rows: readonly AgentRow[], runs: readonly {
+    status: string;
+}[]): LineSummary;
+/** `12s`, `4m`, `2h`: the short elapsed time of a working row. */
+export declare function shortElapsed(ms: number): string;

package/dist/session/agents/agent-model.js

@@ -0,0 +1,123 @@
+import { agentDisplayName } from '../../internal/components/agent-mark.js';
+/** A child older than this that has settled is no longer "recent": it leaves the line. */
+export const RECENT_MS = 60 * 60_000;
+/** The popover lists at most this many agent rows per group. */
+export const MAX_ROWS = 20;
+const STATE_ORDER = {
+    needs_input: 0,
+    working: 1,
+    failed: 2,
+    idle: 3,
+    completed: 4,
+    stopped: 5,
+};
+/** Board state of a session row: the API's `board_state`, else derived from the older fields. */
+export function boardStateOf(session) {
+    if (session.board_state)
+        return session.board_state;
+    if (session.attention)
+        return 'needs_input';
+    switch (session.status) {
+        case 'failed':
+            return 'failed';
+        case 'completed':
+            return 'completed';
+        case 'stopped':
+            return 'stopped';
+        case 'queued':
+        case 'branching':
+        case 'provisioning':
+            return 'working';
+        default:
+            return session.working?.state === 'working' ? 'working' : 'idle';
+    }
+}
+/** True while a row works or waits on its person: it can be stopped. */
+export function isActive(state) {
+    return state === 'working' || state === 'needs_input';
+}
+/**
+ * A spawned session's own title. pi named a child `<description> (@agent
+ * subagent)` until 2026-10-31, and those rows keep the name: every surface shows
+ * the agent apart (`agent_name`), never in the title.
+ */
+export function subagentTitle(name) {
+    return name.replace(/\s*\(@[^)]*\)\s*$/, '').trim();
+}
+export function agentRowOf(session) {
+    const name = session.name ? subagentTitle(session.name) : '';
+    const own = session.agent_handle?.trim() || name;
+    const agent = session.agent_name?.trim() || null;
+    const handle = own || (agent ? agentDisplayName(agent) : session.session_id.slice(0, 8));
+    const excerpt = session.result_excerpt?.replace(/\s+/g, ' ').trim() || null;
+    const activity = Date.parse(session.last_activity_at ?? session.updated_at ?? session.created_at);
+    const state = boardStateOf(session);
+    const since = state === 'working' && session.working?.since ? Date.parse(session.working.since) : NaN;
+    return {
+        sessionId: session.session_id,
+        handle,
+        agent,
+        named: !!own,
+        state,
+        attention: session.attention ?? null,
+        line: excerpt ?? (name && name !== handle ? name : null),
+        activityMs: Number.isFinite(activity) ? activity : 0,
+        workingSinceMs: Number.isFinite(since) ? since : null,
+    };
+}
+/**
+ * The agent rows of a session: its children and its teammates, each once.
+ * `exclude` holds the sessions a workflow run owns (its agents and its runner).
+ * A settled row older than {@link RECENT_MS} leaves the line.
+ */
+export function stripGroups(input) {
+    const seen = new Set();
+    const agents = [];
+    const team = [];
+    for (const session of [...input.teammates, ...input.children]) {
+        if (seen.has(session.session_id) || input.exclude.has(session.session_id))
+            continue;
+        if (session.session_id === input.leadSessionId)
+            continue;
+        seen.add(session.session_id);
+        const row = agentRowOf(session);
+        if (!isActive(row.state) && row.state !== 'idle' && input.now - row.activityMs > RECENT_MS)
+            continue;
+        const isTeammate = session.team_lead_session_id === input.leadSessionId || input.teammates.includes(session);
+        (isTeammate ? team : agents).push(row);
+    }
+    const order = (a, b) => STATE_ORDER[a.state] - STATE_ORDER[b.state] || b.activityMs - a.activityMs;
+    return { agents: agents.sort(order).slice(0, MAX_ROWS), team: team.sort(order).slice(0, MAX_ROWS) };
+}
+export function stripCounts(rows) {
+    return {
+        agents: rows.length,
+        working: rows.filter((row) => row.state === 'working').length,
+        needsInput: rows.filter((row) => row.state === 'needs_input').length,
+    };
+}
+/** What the agents line says: `2 agents · 1 working`, `2 agents · poet done`, `1 workflow running`. */
+export function lineSummary(rows, runs) {
+    const counts = stripCounts(rows);
+    const runningRuns = runs.filter((run) => run.status === 'running').length;
+    let newest = null;
+    for (const row of rows)
+        if (!newest || row.activityMs > newest.activityMs)
+            newest = row;
+    const mark = counts.needsInput > 0
+        ? 'needs_input'
+        : counts.working > 0 || runningRuns > 0
+            ? 'working'
+            : newest?.state === 'failed'
+                ? 'failed'
+                : 'done';
+    return { ...counts, mark, runs: runs.length, runningRuns, newest };
+}
+/** `12s`, `4m`, `2h`: the short elapsed time of a working row. */
+export function shortElapsed(ms) {
+    const seconds = Math.max(0, Math.floor(ms / 1000));
+    if (seconds < 60)
+        return `${seconds}s`;
+    const minutes = Math.floor(seconds / 60);
+    return minutes < 60 ? `${minutes}m` : `${Math.floor(minutes / 60)}h`;
+}

package/dist/session/agents/agent-state-mark.d.ts

@@ -0,0 +1,10 @@
+import type { AgentRowState } from './agent-model.js';
+/**
+ * The state mark of an agent row: the live dot while it works, the attention
+ * dot while it waits on the person, a check once its turn ended. The words
+ * beside it say the state; the mark repeats it. The agents line and the
+ * multi-agent tool cards draw the same mark.
+ */
+export declare function AgentStateMark({ state }: {
+    state: AgentRowState;
+}): import("react").JSX.Element;

package/dist/session/agents/agent-state-mark.js

@@ -0,0 +1,22 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CheckIcon } from '@phosphor-icons/react';
+import { StatusDot } from '../../primitives/status.js';
+import { useTranslations } from '../../i18n/index.js';
+import { cn } from '../../lib/utils.js';
+const DOT_TONE = {
+    working: 'success',
+    needs_input: 'warning',
+    failed: 'destructive',
+    stopped: 'neutral',
+};
+/**
+ * The state mark of an agent row: the live dot while it works, the attention
+ * dot while it waits on the person, a check once its turn ended. The words
+ * beside it say the state; the mark repeats it. The agents line and the
+ * multi-agent tool cards draw the same mark.
+ */
+export function AgentStateMark({ state }) {
+    const t = useTranslations('multiAgent.strip');
+    return (_jsxs("span", { className: "flex size-3 shrink-0 items-center justify-center", children: [state === 'idle' || state === 'completed' ? (_jsx(CheckIcon, { "aria-hidden": true, weight: "bold", className: "text-kortix-green size-3" })) : (_jsx(StatusDot, { tone: DOT_TONE[state], pulse: state === 'working', className: cn(state === 'working' && 'motion-reduce:animate-none') })), _jsx("span", { className: "sr-only", children: t(`state.${state}`) })] }));
+}

package/dist/session/agents/agent-strip.d.ts

@@ -0,0 +1,58 @@
+import { type SessionTask, type WorkflowRunMetadata } from '@kortix/sdk';
+import { type WorkflowRun } from '../tool/tools/workflow-run.js';
+import { type AgentRow } from './agent-model.js';
+/** The runs the line lists: running ones, and ones that ended in the last hour; newest first. */
+export declare function stripRuns(runs: readonly WorkflowRunMetadata[], now: number): WorkflowRun[];
+/** Every session a run owns: its runner and its agents. They show under the run, not as agent rows. */
+export declare function runSessionIds(runs: readonly WorkflowRun[]): Set<string>;
+export type OpenTarget = {
+    sessionId: string;
+    title: string;
+};
+export interface AgentsLineViewProps {
+    projectId: string | undefined;
+    sessionId: string | undefined;
+    agents: AgentRow[];
+    team: AgentRow[];
+    runs: WorkflowRun[];
+    /** The team's tasks; `null` when this session leads no team (or `agent_teams` is off). */
+    tasks: SessionTask[] | null;
+    onOpen: (target: OpenTarget) => void;
+    onStop: (row: AgentRow) => void;
+    stopping: ReadonlySet<string>;
+    /** The line shows the mark and the count only: a narrow toolbar (a channel's thread panel). */
+    compact?: boolean;
+    /** First render state of the popover (tests). */
+    defaultOpen?: boolean;
+}
+export declare function AgentsLineView({ projectId, sessionId, agents, team, runs, tasks, onOpen, onStop, stopping, compact, defaultOpen, }: AgentsLineViewProps): import("react").JSX.Element | null;
+export interface AgentsPanelProps extends Omit<AgentsLineViewProps, 'compact' | 'defaultOpen'> {
+    /** The popover is open: a working row's elapsed time ticks. */
+    live: boolean;
+}
+/** The popover body: Agents, Team, Workflows, and a Tasks tab when this session leads a team. */
+export declare function AgentsPanel({ projectId, sessionId, agents, team, runs, tasks, onOpen, onStop, stopping, live }: AgentsPanelProps): import("react").JSX.Element;
+/**
+ * The agents of one session, read live: its children (polled every 5 s), its
+ * teammates and team tasks (flag `agent_teams`) and its workflow runs; and the
+ * stop of one agent.
+ */
+export declare function useAgentsLine(projectId: string | undefined, sessionId: string | undefined): {
+    ready: boolean;
+    agents: AgentRow[];
+    team: AgentRow[];
+    runs: WorkflowRun[];
+    tasks: SessionTask[] | null;
+    stopping: ReadonlySet<string>;
+    stop: (row: AgentRow) => void;
+};
+/**
+ * The agents line of one session, for the composer's under-row
+ * (`SessionChatInputProps.underbarSlot`). Nothing renders while the session
+ * started no agent and no workflow run.
+ */
+export declare function AgentsLine({ projectId, sessionId, compact, }: {
+    projectId: string | undefined;
+    sessionId: string | undefined;
+    compact?: boolean;
+}): import("react").JSX.Element | null;