@kortix/ui 0.14.12 → 0.14.14

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;

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

@@ -0,0 +1,259 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Badge } from '../../primitives/badge.js';
+import { Button } from '../../primitives/button.js';
+import { CountBadge } from '../../primitives/count-badge.js';
+import { Hint } from '../../primitives/hint.js';
+import Loading from '../../primitives/loading.js';
+import { Popover, PopoverContent, PopoverTrigger } from '../../primitives/popover.js';
+import { Tabs, TabsContent, TabsListCompact, TabsTriggerCompact } from '../../primitives/tabs.js';
+import { errorToast } from '../../primitives/toast.js';
+import { useTranslations } from '../../i18n/index.js';
+import { agentDisplayName } from '../../internal/components/agent-mark.js';
+import { cn } from '../../lib/utils.js';
+import { AgentStateMark } from './agent-state-mark.js';
+import { SubagentDialog } from './subagent-view.js';
+import { ArrowUpRightIcon, CaretUpIcon, SquareIcon } from '@phosphor-icons/react';
+import { useMemo, useState } from 'react';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { stopProjectSession } from '@kortix/sdk';
+import { qk, useFeatureFlag, useSessionChildren, useSessionWorkflows, useTeamTasks, useTeammates, } from '@kortix/sdk/react';
+import { countAgents, parseWorkflowRun } from '../tool/tools/workflow-run.js';
+import { WorkflowProgress } from '../tool/tools/workflow-progress.js';
+import { isActive, lineSummary, shortElapsed, stripGroups, } from './agent-model.js';
+import { TasksPanel } from './tasks-panel.js';
+import { isLargeRun, LargeRunBadge, useLiveWorkflowRun, useNow, useRestartAgent, WorkflowRunControls, } from './workflow-run-controls.js';
+/**
+ * The agents line: one muted control in the composer's under-row, right of the
+ * agent picker (Claude Code's agent panel, folded to one line).
+ *
+ *   ● 2 agents · 1 working ⌃        ✓ 2 agents · poet done ⌃
+ *
+ * It names the state of what this session started (its child sessions, the
+ * teammates of a team it leads, its workflow runs) and opens a popover above
+ * the line with one row per agent: open its session, stop it while it works,
+ * and the Tasks tab of a team it leads. It renders nothing while the session
+ * started nothing, and it never holds the composer: the agents run in their own
+ * sessions, and the person keeps talking to this one.
+ */
+/** How often the child list polls while the line is mounted. */
+const CHILDREN_POLL_MS = 5_000;
+/** A finished workflow run stays listed this long after it ended. */
+const RECENT_RUN_MS = 60 * 60_000;
+/** The popover lists at most this many runs. */
+const MAX_RUNS = 5;
+const LINE_STATE = {
+    needs_input: 'needs_input',
+    working: 'working',
+    failed: 'failed',
+    done: 'completed',
+};
+/** The runs the line lists: running ones, and ones that ended in the last hour; newest first. */
+export function stripRuns(runs, now) {
+    const out = [];
+    for (const raw of runs) {
+        const run = parseWorkflowRun(raw);
+        if (!run)
+            continue;
+        if (run.status !== 'running' && (run.endedAt === undefined || now - run.endedAt > RECENT_RUN_MS))
+            continue;
+        out.push(run);
+        if (out.length >= MAX_RUNS)
+            break;
+    }
+    return out;
+}
+/** Every session a run owns: its runner and its agents. They show under the run, not as agent rows. */
+export function runSessionIds(runs) {
+    const ids = new Set();
+    for (const run of runs) {
+        if (run.background)
+            ids.add(run.background.sessionId);
+        for (const agent of run.agents)
+            if (agent.sessionId)
+                ids.add(agent.sessionId);
+    }
+    return ids;
+}
+/** The text of the line: `2 agents · 1 working`, `2 agents · poet done`, `1 workflow running`. */
+function useLineText(rows, runs, compact) {
+    const t = useTranslations('multiAgent.strip');
+    const summary = lineSummary(rows, runs);
+    const parts = [];
+    if (summary.agents > 0)
+        parts.push(t('agents', { count: summary.agents }));
+    if (summary.runs > 0) {
+        parts.push(summary.runningRuns > 0
+            ? t('workflowsRunning', { count: summary.runningRuns })
+            : t('workflows', { count: summary.runs }));
+    }
+    if (!compact && summary.agents > 0) {
+        if (summary.needsInput > 0)
+            parts.push(t('state.needs_input'));
+        else if (summary.working > 0)
+            parts.push(t('working', { count: summary.working }));
+        else if (summary.newest)
+            parts.push(t('newest', { name: summary.newest.handle, state: t(`state.${summary.newest.state}`) }));
+    }
+    return { summary, text: parts.join(' · ') };
+}
+export function AgentsLineView({ projectId, sessionId, agents, team, runs, tasks, onOpen, onStop, stopping, compact = false, defaultOpen = false, }) {
+    const t = useTranslations('multiAgent.strip');
+    const [open, setOpen] = useState(defaultOpen);
+    const rows = useMemo(() => [...agents, ...team], [agents, team]);
+    const { summary, text } = useLineText(rows, runs, compact);
+    if (rows.length === 0 && runs.length === 0)
+        return null;
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { type: "button", variant: "ghost", size: "sm", "data-testid": "agents-line", "aria-label": compact ? `${t('label')}: ${text}` : undefined, className: "text-muted-foreground hit-area-y-3 min-w-0 shrink gap-1.5 rounded-lg px-2 text-xs font-normal tabular-nums", children: [_jsx(AgentStateMark, { state: LINE_STATE[summary.mark] }), _jsx("span", { className: "max-w-64 min-w-0 truncate", children: text }), _jsx(CaretUpIcon, { "aria-hidden": true, className: cn('size-3 shrink-0', open && 'rotate-180') })] }) }), _jsx(PopoverContent, { side: "top", align: "start", sideOffset: 8, "aria-label": t('label'), "data-testid": "agents-line-popover", tabIndex: -1, 
+                // Focus the panel, not its first row action: a focused action opens its
+                // tooltip, and the first Escape would close the tooltip, not the popover.
+                onOpenAutoFocus: (event) => {
+                    event.preventDefault();
+                    event.currentTarget?.focus();
+                }, className: "flex w-[min(360px,calc(100vw-1.5rem))] flex-col p-0", children: _jsx(AgentsPanel, { projectId: projectId, sessionId: sessionId, agents: agents, team: team, runs: runs, tasks: tasks, onOpen: (target) => {
+                        setOpen(false);
+                        onOpen(target);
+                    }, onStop: onStop, stopping: stopping, live: open }) })] }));
+}
+/** The popover body: Agents, Team, Workflows, and a Tasks tab when this session leads a team. */
+export function AgentsPanel({ projectId, sessionId, agents, team, runs, tasks, onOpen, onStop, stopping, live }) {
+    const t = useTranslations('multiAgent.strip');
+    const anyWorking = live && [...agents, ...team].some((row) => row.state === 'working');
+    const now = useNow(anyWorking);
+    const sections = [agents.length > 0, team.length > 0, runs.length > 0].filter(Boolean).length;
+    const renderRows = (list, teammate) => (_jsx("ul", { children: list.map((row) => (_jsx(AgentLineRow, { row: row, teammate: teammate, now: now, stopping: stopping.has(row.sessionId), onOpen: () => onOpen({ sessionId: row.sessionId, title: row.handle }), onStop: () => onStop(row) }, row.sessionId))) }));
+    const list = (_jsxs("div", { className: "max-h-96 overflow-y-auto p-1", children: [agents.length > 0 && (_jsxs("section", { "aria-label": t('label'), children: [sections > 1 && _jsx(GroupLabel, { children: t('label') }), renderRows(agents, false)] })), team.length > 0 && (_jsxs("section", { "aria-label": t('team'), children: [_jsx(GroupLabel, { children: t('team') }), renderRows(team, true)] })), runs.length > 0 && (_jsxs("section", { "aria-label": t('workflowsGroup'), children: [_jsx(GroupLabel, { children: t('workflowsGroup') }), _jsx("ul", { children: runs.map((run) => (_jsx(WorkflowLineRow, { projectId: projectId, sessionId: sessionId, run: run, onOpen: onOpen }, run.runId || run.title))) })] }))] }));
+    if (tasks === null)
+        return list;
+    const openTasks = tasks.filter((task) => task.status !== 'completed').length;
+    return (_jsxs(Tabs, { defaultValue: "agents", className: "gap-0", children: [_jsx(TabsContent, { value: "agents", children: list }), _jsx(TabsContent, { value: "tasks", className: "max-h-96 overflow-y-auto p-1", children: _jsx(TasksPanel, { tasks: tasks }) }), _jsx("div", { className: "border-t p-1", children: _jsxs(TabsListCompact, { animate: "none", className: "w-full", children: [_jsx(TabsTriggerCompact, { value: "agents", children: t('label') }), _jsxs(TabsTriggerCompact, { value: "tasks", className: "gap-1.5", children: [t('tasks'), openTasks > 0 && _jsx(CountBadge, { count: openTasks })] })] }) })] }));
+}
+function GroupLabel({ children }) {
+    return _jsx("div", { className: "text-muted-foreground px-2 pt-1.5 pb-0.5 text-xs font-medium", children: children });
+}
+/** Row actions: shown on hover and on keyboard focus, always on a touch screen. */
+const ROW_ACTIONS = 'flex shrink-0 items-center opacity-0 group-hover/row:opacity-100 group-focus-within/row:opacity-100 [@media(hover:none)]:opacity-100';
+/** The short state of a row: `working · 1m`, `done`, `needs you`, `failed`. */
+function rowState(row, now, t) {
+    if (row.state === 'working' && row.workingSinceMs !== null) {
+        return t('workingFor', { elapsed: shortElapsed(now - row.workingSinceMs) });
+    }
+    return t(`state.${row.state}`);
+}
+function AgentLineRow({ row, teammate, now, stopping, onOpen, onStop, }) {
+    const t = useTranslations('multiAgent.strip');
+    // The result, or what it waits for: one line on hover, never inline.
+    const detail = row.state === 'needs_input' ? (row.line ?? t(`attention.${row.attention ?? 'question'}`)) : row.line;
+    const handle = (_jsx("span", { className: "text-foreground min-w-0 truncate font-medium", title: teammate ? undefined : row.handle, children: row.handle }));
+    const state = (_jsx("span", { className: "text-muted-foreground shrink-0 tabular-nums", children: rowState(row, now, t) }));
+    return (_jsxs("li", { "data-testid": "agents-line-row", "data-agent-row": row.sessionId, className: "group/row hover:bg-hover focus-within:bg-hover flex min-w-0 items-center gap-1 rounded-sm", children: [_jsxs("div", { onClick: onOpen, className: "flex min-w-0 flex-1 cursor-pointer items-center gap-2 py-1.5 pl-2 text-xs", children: [_jsx(AgentStateMark, { state: row.state }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex min-w-0 items-baseline gap-2", children: [teammate ? (_jsx(Hint, { label: t('teamRole'), side: "top", children: handle })) : (handle), detail ? (_jsx(Hint, { label: _jsx("span", { className: "block max-w-72 truncate", children: detail }), side: "top", children: state })) : (state)] }), row.named && row.agent && (_jsx("p", { className: "text-muted-foreground truncate", children: t('runsAs', { agent: agentDisplayName(row.agent) }) }))] })] }), _jsxs("div", { className: cn(ROW_ACTIONS, 'pr-1', stopping && 'opacity-100'), children: [_jsx(Hint, { label: t('openAgent', { name: row.handle }), side: "top", children: _jsx(Button, { type: "button", variant: "ghost", size: "icon-xs", "aria-label": t('openAgent', { name: row.handle }), onClick: onOpen, className: "text-muted-foreground hover:text-foreground", children: _jsx(ArrowUpRightIcon, { className: "size-3.5 shrink-0" }) }) }), stopping ? (_jsx("span", { className: "flex size-6 items-center justify-center", children: _jsx(Loading, { className: "text-muted-foreground size-3" }) })) : isActive(row.state) ? (_jsx(Hint, { label: t('stopHint'), side: "top", children: _jsx(Button, { type: "button", variant: "ghost", size: "icon-xs", "aria-label": t('stopAgent', { name: row.handle }), onClick: onStop, className: "text-muted-foreground hover:text-foreground", children: _jsx(SquareIcon, { weight: "fill", className: "size-2.5" }) }) })) : null] })] }));
+}
+const RUN_STATE = {
+    running: 'working',
+    done: 'completed',
+    failed: 'failed',
+    stopped: 'stopped',
+};
+/** One workflow run: its live progress and controls; it unfolds into its agents. */
+function WorkflowLineRow({ projectId, sessionId, run: listed, onOpen, }) {
+    const t = useTranslations('multiAgent.strip');
+    const tw = useTranslations('multiAgent.workflow');
+    const [open, setOpen] = useState(false);
+    // A background run's progress is read from its runner, so it keeps moving after this turn ended.
+    const { run, controlSessionId } = useLiveWorkflowRun(projectId, sessionId, listed);
+    const now = useNow(open && run?.status === 'running');
+    const restart = useRestartAgent(projectId, controlSessionId, run);
+    const queryClient = useQueryClient();
+    const stopAgent = useMutation({
+        mutationFn: (agent) => stopProjectSession(projectId, agent.sessionId),
+        onSuccess: () => projectId && queryClient.invalidateQueries({ queryKey: qk.project.sessionsScope(projectId) }),
+        onError: (error) => errorToast(t('stopFailed'), { description: error instanceof Error ? error.message : undefined }),
+    });
+    if (!run)
+        return null;
+    const counts = countAgents(run.agents);
+    const progress = counts.total > 0 ? t('runProgress', { done: counts.done, total: counts.total }) : undefined;
+    const line = (run.status === 'running'
+        ? [run.paused ? tw('paused') : run.background ? t('runBackground') : t('runRunning'), progress]
+        : [progress])
+        .filter(Boolean)
+        .join(' · ');
+    const live = run.status === 'running';
+    const stop = {
+        enabled: !!projectId,
+        pending: new Set(stopAgent.isPending && stopAgent.variables?.sessionId ? [stopAgent.variables.sessionId] : []),
+        stop: (agent) => agent.sessionId && stopAgent.mutate(agent),
+        ...(restart.enabled ? { restart: { pending: restart.restarting, run: restart.restart } } : {}),
+    };
+    const title = run.title || run.name || t('runFallback');
+    return (_jsxs("li", { "data-testid": "agents-line-row", "data-workflow-run": run.runId, children: [_jsxs("div", { className: "group/row hover:bg-hover focus-within:bg-hover flex min-w-0 items-center gap-1 rounded-sm", children: [_jsxs("button", { type: "button", "aria-expanded": open, onClick: () => setOpen((value) => !value), className: "flex min-w-0 flex-1 cursor-pointer items-center gap-2 py-1.5 pl-2 text-left text-xs outline-none", children: [_jsx(AgentStateMark, { state: RUN_STATE[run.status] }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex min-w-0 items-baseline gap-2", children: [_jsx("span", { className: "text-foreground min-w-0 truncate font-medium", title: title, children: title }), _jsx("span", { className: "text-muted-foreground shrink-0", children: t(`state.${RUN_STATE[run.status]}`) })] }), line && _jsx("p", { className: "text-muted-foreground truncate tabular-nums", children: line })] })] }), isLargeRun(run) && _jsx(LargeRunBadge, {}), _jsxs("div", { className: cn(ROW_ACTIONS, 'pr-1'), children: [run.background && (_jsx(Hint, { label: t('openRun'), side: "top", children: _jsx(Button, { type: "button", variant: "ghost", size: "icon-xs", "aria-label": t('openRun'), onClick: () => onOpen({ sessionId: run.background.sessionId, title }), className: "text-muted-foreground hover:text-foreground", children: _jsx(ArrowUpRightIcon, { className: "size-3.5 shrink-0" }) }) })), _jsx(WorkflowRunControls, { projectId: projectId, controlSessionId: live ? controlSessionId : undefined, ownerSessionId: sessionId, run: run })] })] }), open && run.agents.length > 0 && (_jsx("div", { className: "pl-5", children: _jsx(WorkflowProgress, { run: run, live: live, now: now, onOpen: (agent) => agent.sessionId && onOpen({ sessionId: agent.sessionId, title: agent.agent ? `${agent.label} · ${agent.agent}` : agent.label }), stop: stop }) })), open && run.agents.length === 0 && (_jsx(Badge, { variant: "muted", size: "sm", className: "ml-7", children: t('runNoAgents') }))] }));
+}
+/**
+ * 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 function useAgentsLine(projectId, sessionId) {
+    const t = useTranslations('multiAgent.strip');
+    const pid = projectId ?? '';
+    const sid = sessionId ?? '';
+    const ready = !!projectId && !!sessionId;
+    const teams = useFeatureFlag(projectId, 'agent_teams').enabled;
+    const childList = useSessionChildren(pid, sid, { enabled: ready, refetchInterval: CHILDREN_POLL_MS, limit: 50 });
+    const children = childList.sessions;
+    const { data: teammates, dataUpdatedAt: teammatesAt } = useTeammates(projectId, sessionId, { enabled: ready && teams });
+    const { data: tasks } = useTeamTasks(projectId, sessionId, { enabled: ready && teams });
+    const { data: runData, dataUpdatedAt: runsAt } = useSessionWorkflows(projectId, sessionId, { enabled: ready });
+    const [stopping, setStopping] = useState(() => new Set());
+    const queryClient = useQueryClient();
+    const stopMutation = useMutation({
+        mutationFn: (row) => stopProjectSession(pid, row.sessionId),
+        onSettled: (_data, _error, row) => {
+            setStopping((previous) => {
+                const next = new Set(previous);
+                next.delete(row.sessionId);
+                return next;
+            });
+            void queryClient.invalidateQueries({ queryKey: qk.project.sessionsScope(pid) });
+        },
+        onError: (error, row) => errorToast(t('stopAgentFailed', { name: row.handle }), { description: error instanceof Error ? error.message : undefined }),
+    });
+    // "Recent" is measured at the newest answer, not at each render: the lists re-derive when data arrives.
+    const now = Math.max(childList.dataUpdatedAt, teammatesAt, runsAt);
+    const runs = useMemo(() => stripRuns(runData ?? [], now), [runData, now]);
+    const groups = useMemo(() => stripGroups({
+        leadSessionId: sid,
+        children,
+        teammates: teammates ?? [],
+        exclude: runSessionIds(runs),
+        now,
+    }), [sid, children, teammates, runs, now]);
+    const leadsTeam = teams && ((teammates?.length ?? 0) > 0 || (tasks?.length ?? 0) > 0);
+    return {
+        ready,
+        agents: groups.agents,
+        team: groups.team,
+        runs,
+        tasks: leadsTeam ? (tasks ?? []) : null,
+        stopping,
+        stop: (row) => {
+            setStopping((previous) => new Set(previous).add(row.sessionId));
+            stopMutation.mutate(row);
+        },
+    };
+}
+/**
+ * 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 function AgentsLine({ projectId, sessionId, compact = false, }) {
+    const line = useAgentsLine(projectId, sessionId);
+    const [open, setOpen] = useState(null);
+    if (!line.ready)
+        return null;
+    return (_jsxs(_Fragment, { children: [_jsx(AgentsLineView, { projectId: projectId, sessionId: sessionId, agents: line.agents, team: line.team, runs: line.runs, tasks: line.tasks, onOpen: setOpen, onStop: line.stop, stopping: line.stopping, compact: compact }), open && (_jsx(SubagentDialog, { open: true, onOpenChange: (next) => {
+                    if (!next)
+                        setOpen(null);
+                }, projectId: projectId, sessionId: open.sessionId, title: open.title }))] }));
+}

package/dist/session/agents/held-messages.d.ts

@@ -0,0 +1,33 @@
+import type { PeerMessage } from '@kortix/sdk';
+import { usePeerMessages } from '@kortix/sdk/react';
+/**
+ * Messages from other sessions that wait for the person (`inbound: hold`, or a
+ * session the person asked to approve first). Claude Code opens an approval
+ * dialog with the sender and a preview; Kortix shows one card per message above
+ * the agent strip. "Approve message" delivers it, "Deny" drops it. A message
+ * nobody decides expires after 5 minutes on the server.
+ */
+/** The preview line: the sender's summary, else the message's first line. */
+export declare function heldPreview(message: Pick<PeerMessage, 'summary' | 'message'>): string;
+export interface HeldMessageCardProps {
+    message: PeerMessage;
+    pending: 'approve' | 'deny' | null;
+    onApprove: () => void;
+    onDeny: () => void;
+}
+export declare function HeldMessageCard({ message, pending, onApprove, onDeny }: HeldMessageCardProps): import("react").JSX.Element;
+type PeerMessagesQuery = ReturnType<typeof usePeerMessages>;
+/** The held messages of `usePeerMessages(…, 'in')`, one card each; nothing when none waits. */
+export declare function HeldMessageList({ messages, approve, deny, }: {
+    messages: readonly PeerMessage[] | undefined;
+    approve: PeerMessagesQuery['approve'];
+    deny: PeerMessagesQuery['deny'];
+}): import("react").JSX.Element | null;
+/** The messages that wait for the person, oldest first (the order they arrived). */
+export declare function heldMessages(messages: readonly PeerMessage[] | undefined): PeerMessage[];
+/** A session's held messages, read on their own (for a host without the agent strip). */
+export declare function HeldMessages({ projectId, sessionId }: {
+    projectId: string | undefined;
+    sessionId: string | undefined;
+}): import("react").JSX.Element;
+export {};