@flowdular/sdk 0.2.4 → 0.3.0

package/modules/agents/src/client/AgentDashboardWidget.tsrx

@@ -1,8 +1,8 @@
-import { useEffect, useMemo } from 'octane';
+import { useEffect, useMemo, useState } from 'octane';
 import { t } from '@flowdular/sdk/client';
 import { Kpi } from '@flowdular/sdk/ui';
 import { useValue } from 'segment-state';
-import { loadAgentRuns } from './api.ts';
+import { loadAllAgentRuns } from './api.ts';
 import { countLabel } from './presentation.ts';
 import { createAgentClientState } from './state.ts';
 
@@ -10,21 +10,29 @@ export function AgentDashboardWidget() @{
 	const client = useMemo(() => createAgentClientState(), []);
 	const [runs] = useValue(client.state.runs);
 	const [status, setStatus] = useValue(client.state.status);
+	const [complete, setComplete] = useState(true);
+	/* The tile counts the work in flight, so it walks those two statuses to
+   their end; past WHOLE_LIST_CAP of either the count reads as a floor. */
 	useEffect(() => {
 		setStatus('loading');
-		void loadAgentRuns().then(
-			(records) => client.store.act(
-				(transaction) => transaction.set(client.state.runs, records),
+		void Promise.all([
+			loadAllAgentRuns({ status: 'queued' }),
+			loadAllAgentRuns({ status: 'running' }),
+		]).then(([queued, running]) => {
+			client.store.act(
+				(transaction) => transaction.set(client.state.runs, [
+					...queued.items,
+					...running.items,
+				]),
 				'agents/widget-loaded',
-			),
-		).catch(() => undefined).finally(() => setStatus('idle'));
+			);
+			setComplete(queued.complete && running.complete);
+		}).catch(() => undefined).finally(() => setStatus('idle'));
 	}, []);
-	const active = runs.filter(
-		(run) => ['queued', 'running'].includes(run.status),
-	).length;
+	const active = countLabel(runs.length) + (complete ? '' : '+');
 	<Kpi
 		label={t('agents.widget.label')}
-		value={status === 'loading' ? '…' : countLabel(active)}
+		value={status === 'loading' ? '…' : active}
 		note={t('agents.widget.note')}
 		href="/agent-runs"
 		linkLabel={t('agents.widget.link')}

package/modules/agents/src/client/AgentDefinitionList.tsrx

@@ -1,10 +1,18 @@
 import { t } from '@flowdular/sdk/client';
-import { SearchField, TableCard, Tag, type TableColumn } from '@flowdular/sdk/ui';
+import {
+	Pagination,
+	SearchField,
+	TableCard,
+	Tag,
+	type TableColumn,
+	type TableSort,
+} from '@flowdular/sdk/ui';
 import type {
 	AgentDefinition,
 	AgentProviderConnection,
 } from '../domain/types.ts';
-import { stateTone } from './presentation.ts';
+import { stateTone, timestampLabel } from './presentation.ts';
+import { hasMorePages, PAGE_SIZE, type CursorStack } from './state.ts';
 
 export interface AgentDefinitionListProps {
 	readonly agents: readonly AgentDefinition[];
@@ -13,13 +21,18 @@ export interface AgentDefinitionListProps {
 	readonly filtered: boolean;
 	readonly canManage: boolean;
 	readonly query: string;
-	readonly activeCount: number;
+	readonly sorting: readonly TableSort[];
+	readonly page: CursorStack;
 	readonly onQuery: (value: string) => void;
+	readonly onSortingChange: (sorts: readonly TableSort[]) => void;
+	readonly onPageChange: (pageIndex: number) => void;
 	readonly onSelect: (agentId: string) => void;
 	readonly onArchive: (agentId: string) => void;
 	readonly onDelete: (agentId: string) => void;
 }
 
+/* The two sortable columns carry the list's sort keys as their keys, so the
+   sort the header reports is the sort the request sends. */
 function columns(
 	providers: readonly AgentProviderConnection[],
 ): readonly TableColumn<AgentDefinition>[] {
@@ -28,9 +41,10 @@ function columns(
 			t('agents.definitions.unknownProvider');
 	return [
 		{
-			key: 'agent',
+			key: 'name',
 			header: t('agents.definitions.column.agent'),
-			width: '23%',
+			width: '22%',
+			value: (agent) => agent.name,
 			cell: (agent) => <span class="ui-cell">
 				<b>{agent.name}</b>
 				<small class="ui-mono">{agent.key + ' · r' + agent.revision}</small>
@@ -39,22 +53,29 @@ function columns(
 		{
 			key: 'purpose',
 			header: t('agents.definitions.column.purpose'),
-			width: '30%',
+			width: '26%',
 			cell: (agent) => <span class="ui-cell__muted">{agent.description}</span>,
 		},
 		{
 			key: 'model',
 			header: t('agents.definitions.column.model'),
-			width: '21%',
+			width: '20%',
 			cell: (agent) => <span class="ui-cell">
 				<b class="ui-mono">{agent.model}</b>
 				<small>{providerName(agent.provider)}</small>
 			</span>,
 		},
+		{
+			key: 'updatedAt',
+			header: t('agents.definitions.column.updated'),
+			width: '18%',
+			value: (agent) => agent.updatedAt,
+			cell: (agent) => timestampLabel(agent.updatedAt),
+		},
 		{
 			key: 'status',
 			header: t('agents.definitions.column.status'),
-			width: '16%',
+			width: '14%',
 			cell: (agent) =>
 				<Tag tone={stateTone(agent.status)} dot>{t(
 					'agents.status.' + agent.status,
@@ -67,8 +88,7 @@ export function AgentDefinitionList(props: AgentDefinitionListProps) @{
 	<TableCard
 		title={t('agents.definitions.table.title')}
 		count={t('agents.definitions.table.count', {
-			active: props.activeCount,
-			total: props.agents.length,
+			count: props.agents.length,
 		})}
 		search={<SearchField
 			value={props.query}
@@ -76,11 +96,21 @@ export function AgentDefinitionList(props: AgentDefinitionListProps) @{
 			label={t('agents.definitions.search.label')}
 			onInput={props.onQuery}
 		/>}
+		mode="server"
 		columns={columns(props.providers)}
 		rows={props.agents}
 		status={props.status}
 		loadingLabel={t('agents.definitions.loading')}
 		rowKey={(agent) => agent.id}
+		sorting
+		sortingState={props.sorting}
+		onSortingChange={props.onSortingChange}
+		pagination={{
+			pageIndex: props.page.pageIndex,
+			pageSize: PAGE_SIZE,
+			hasMore: hasMorePages(props.page),
+			onPageChange: props.onPageChange,
+		}}
 		filtered={props.filtered}
 		empty={{
 			icon: 'bot',
@@ -121,6 +151,19 @@ export function AgentDefinitionList(props: AgentDefinitionListProps) @{
 			: undefined}
 		onSelect={props.canManage ? (agent) => props.onSelect(agent.id) : undefined}
 		caption={t('agents.definitions.table.caption')}
+		after={<Pagination
+			pageIndex={props.page.pageIndex}
+			pageSize={PAGE_SIZE}
+			hasMore={hasMorePages(props.page)}
+			onPageChange={props.onPageChange}
+			label={t('agents.common.page.label')}
+			previousLabel={t('agents.common.page.previous')}
+			nextLabel={t('agents.common.page.next')}
+			summary={(page) => t('agents.common.page.summary', {
+				page: page.pageIndex + 1,
+				from: page.from,
+			})}
+		/>}
 		note={t('agents.definitions.note')}
 		noteIcon="shield"
 	/>

package/modules/agents/src/client/AgentPlaygroundView.tsrx

@@ -12,7 +12,7 @@ import type { AgentRunDetail } from '../domain/types.ts';
 import {
 	cancelAgentRun,
 	enqueueAgentRun,
-	loadAgents,
+	loadAllAgents,
 	loadAgentWorker,
 	observeAgentRun,
 } from './api.ts';
@@ -49,13 +49,13 @@ export function AgentPlaygroundView(props: AgentPlaygroundViewProps) @{
 
 	useEffect(() => {
 		setStatus('loading');
-		void loadAgents().then((result) => {
+		void loadAllAgents().then((result) => {
 			client.store.act((transaction) => {
-				transaction.set(client.state.agents, result.agents);
+				transaction.set(client.state.agents, result.items);
 				if (!selectedAgentId) {
 					transaction.set(
 						client.state.selectedAgentId,
-						result.agents.find((agent) => agent.status === 'active')?.id ?? '',
+						result.items.find((agent) => agent.status === 'active')?.id ?? '',
 					);
 				}
 			}, 'agents/playground-loaded');

package/modules/agents/src/client/AgentProceduresView.tsrx

@@ -17,7 +17,7 @@ import {
 	archiveAgentProcedure,
 	createAgentProcedure,
 	deleteAgentProcedure,
-	loadAgents,
+	loadAgentContext,
 	updateAgentProcedure,
 } from './api.ts';
 import { AgentProcedureForm } from './AgentProcedureForm.tsrx';
@@ -67,7 +67,7 @@ export function AgentProceduresView(props: AgentProceduresViewProps) @{
 		setStatus('loading');
 		setError('');
 		try {
-			const result = await loadAgents();
+			const result = await loadAgentContext();
 			client.store.act((transaction) => {
 				transaction.set(client.state.procedures, result.procedures);
 				transaction.set(client.state.tools, result.tools);

package/modules/agents/src/client/AgentRunsView.tsrx

@@ -7,10 +7,12 @@ import {
 	Filters,
 	Icon,
 	PageHeader,
+	Pagination,
 	SearchField,
 	TableCard,
 	Tag,
 	type TableColumn,
+	type TableSort,
 } from '@flowdular/sdk/ui';
 import { useValue } from 'segment-state';
 import type { AgentRun } from '../domain/types.ts';
@@ -28,13 +30,26 @@ import {
 	triggerLabel,
 } from './presentation.ts';
 import { RunTimeline } from './RunTimeline.tsrx';
-import { createAgentRunClientState } from './state.ts';
+import {
+	createAgentRunClientState,
+	FIRST_PAGE,
+	hasMorePages,
+	mergeAgentOptions,
+	moveToPage,
+	PAGE_SIZE,
+	pageCursor,
+	pageLoaded,
+	runDirection,
+} from './state.ts';
 
 export interface AgentRunsViewProps {
 	readonly csrfToken: string;
 	readonly canCancel: boolean;
 }
 
+const SEARCH_DEBOUNCE_MS = 250;
+const POLL_MS = 2_500;
+
 function date(value: number): string {
 	return new Intl.DateTimeFormat(activeLocale(), {
 		dateStyle: 'medium',
@@ -62,9 +77,10 @@ function columns(now: number): readonly TableColumn<AgentRun>[] {
 			cell: (run) => triggerLabel(run.trigger),
 		},
 		{
-			key: 'queued',
+			key: 'queuedAt',
 			header: t('agents.runs.column.queued'),
 			width: '25%',
+			value: (run) => run.queuedAt,
 			cell: (run) => date(run.queuedAt),
 		},
 		{
@@ -89,16 +105,57 @@ function columns(now: number): readonly TableColumn<AgentRun>[] {
 export function AgentRunsView(props: AgentRunsViewProps) @{
 	const client = useMemo(() => createAgentRunClientState(), []);
 	const [runs] = useValue(client.state.runs);
+	const [page] = useValue(client.state.page);
+	const [direction] = useValue(client.state.direction);
+	const [agentOptions] = useValue(client.state.agentOptions);
 	const [selectedRun, setSelectedRun] = useValue(client.state.selectedRun);
 	const [status, setStatus] = useValue(client.state.status);
 	const [error, setError] = useValue(client.state.error);
-	const [query, setQuery] = useValue(client.state.query);
-	const [statusFilter, setStatusFilter] = useValue(client.state.statusFilter);
-	const [agentFilter, setAgentFilter] = useValue(client.state.agentFilter);
-	const [triggerFilter, setTriggerFilter] = useValue(
+	const [query] = useValue(client.state.query);
+	const [statusFilter] = useValue(client.state.statusFilter);
+	const [agentFilter] = useValue(client.state.agentFilter);
+	const [triggerFilter] = useValue(client.state.triggerFilter);
+	const [filtersOpen, setFiltersOpen] = useValue(client.state.filtersOpen);
+	const term = query.trim();
+
+	/* Every filter, the sort and the page are request parameters; a change of
+   any but the page starts the list over from its first page. */
+	const narrow = (
+		key: | typeof client.state.query
+		| typeof client.state.statusFilter
+		| typeof client.state.agentFilter
+		| typeof client.state.triggerFilter,
+		value: string,
+	) => client.store.act((transaction) => {
+		transaction.set(key, value);
+		transaction.set(client.state.page, FIRST_PAGE);
+	}, 'agents/runs-narrowed');
+	const setQuery = (value: string) => narrow(client.state.query, value);
+	const setStatusFilter = (value: string) => narrow(
+		client.state.statusFilter,
+		value,
+	);
+	const setAgentFilter = (value: string) => narrow(
+		client.state.agentFilter,
+		value,
+	);
+	const setTriggerFilter = (value: string) => narrow(
 		client.state.triggerFilter,
+		value,
+	);
+	const setSorting = (sorts: readonly TableSort[]) => client.store.act((
+		transaction,
+	) => {
+		transaction.set(client.state.direction, runDirection(sorts));
+		transaction.set(client.state.page, FIRST_PAGE);
+	}, 'agents/runs-sorted');
+	const setPage = (pageIndex: number) => client.store.act(
+		(transaction) => transaction.set(
+			client.state.page,
+			moveToPage(page, pageIndex),
+		),
+		'agents/runs-page',
 	);
-	const [filtersOpen, setFiltersOpen] = useValue(client.state.filtersOpen);
 
 	const open = async (run: AgentRun) => {
 		try {
@@ -129,34 +186,69 @@ export function AgentRunsView(props: AgentRunsViewProps) @{
 		}
 	};
 
-	const refresh = async () => {
-		setStatus('loading');
-		setError('');
+	/* A poll keeps the rows on screen while it reads; only a request the
+   reader asked for replaces them with the loading row. */
+	const loadPage = async (
+		isCurrent: () => boolean = () => true,
+		poll = false,
+	) => {
+		if (!poll) {
+			setStatus('loading');
+			setError('');
+		}
 		try {
-			const records = await loadAgentRuns();
-			client.store.act(
-				(transaction) => transaction.set(client.state.runs, records),
-				'agents/runs-loaded',
-			);
-			if (selectedRun) {
+			const result = await loadAgentRuns({
+				limit: PAGE_SIZE,
+				cursor: pageCursor(page),
+				direction,
+				status: statusFilter,
+				agentId: agentFilter,
+				trigger: triggerFilter,
+				q: term,
+			});
+			if (!isCurrent()) return;
+			client.store.act((transaction) => {
+				transaction.set(client.state.runs, result.items);
+				transaction.set(
+					client.state.page,
+					pageLoaded(page, result.page.nextCursor),
+				);
+				transaction.set(
+					client.state.agentOptions,
+					mergeAgentOptions(
+						client.store.get(client.state.agentOptions),
+						result.items,
+					),
+				);
+			}, 'agents/runs-loaded');
+			if (selectedRun && !poll) {
 				setSelectedRun(await loadAgentRun(selectedRun.id));
 			}
 		} catch (loadError) {
+			if (!isCurrent()) return;
 			setError(
 				loadError instanceof Error
 					? loadError.message
 					: t('agents.runs.error.load'),
 			);
 		} finally {
-			setStatus('idle');
+			if (isCurrent() && !poll) setStatus('idle');
 		}
 	};
 
 	useEffect(() => {
-		void refresh();
-		const timer = setInterval(() => void refresh(), 2_500);
-		return () => clearInterval(timer);
-	}, []);
+		let current = true;
+		const timer = setTimeout(
+			() => void loadPage(() => current),
+			term === '' ? 0 : SEARCH_DEBOUNCE_MS,
+		);
+		const poll = setInterval(() => void loadPage(() => current, true), POLL_MS);
+		return () => {
+			current = false;
+			clearTimeout(timer);
+			clearInterval(poll);
+		};
+	}, [term, statusFilter, agentFilter, triggerFilter, direction, page.pageIndex]);
 
 	useEffect(() => {
 		if (
@@ -173,20 +265,6 @@ export function AgentRunsView(props: AgentRunsViewProps) @{
 	}, [selectedRun?.id, selectedRun?.status]);
 
 	const now = Date.now();
-	const locale = activeLocale();
-	const term = query.trim().toLocaleLowerCase(locale);
-	const agentNames = [...new Set(runs.map((run) => run.agentName))].sort(
-		(a, b) => a.localeCompare(b),
-	);
-	const visible = runs.filter(
-		(run) =>
-			(term === '' || run.agentName.toLocaleLowerCase(locale).includes(term) ||
-				run.input.toLocaleLowerCase(locale).includes(term) ||
-				run.id.toLocaleLowerCase(locale).includes(term)) &&
-				(statusFilter === '' || run.status === statusFilter) &&
-				(agentFilter === '' || run.agentName === agentFilter) &&
-				(triggerFilter === '' || run.trigger === triggerFilter),
-	);
 	const activeFilters = [statusFilter, agentFilter, triggerFilter].filter(
 		Boolean,
 	).length;
@@ -197,7 +275,7 @@ export function AgentRunsView(props: AgentRunsViewProps) @{
 			title={t('agents.runs.title')}
 			description={t('agents.runs.description')}
 		>
-			<Button size="sm" onClick={() => void refresh()}>
+			<Button size="sm" onClick={() => void loadPage()}>
 				<Icon name="refresh" size={14} />
 				{status === 'loading'
 					? t('agents.common.refreshing')
@@ -246,8 +324,8 @@ export function AgentRunsView(props: AgentRunsViewProps) @{
 								onInput={(event) => setAgentFilter(event.currentTarget.value)}
 							>
 								<option value="">{t('agents.runs.filter.allAgents')}</option>
-								@for (const name of agentNames; key name) {
-									<option value={name}>{name}</option>
+								@for (const agent of agentOptions; key agent.id) {
+									<option value={agent.id}>{agent.name}</option>
 								}
 							</select>
 						</label>
@@ -267,11 +345,36 @@ export function AgentRunsView(props: AgentRunsViewProps) @{
 					</div>
 				</Filters>}
 				caption={t('agents.runs.table.caption')}
+				mode="server"
 				columns={columns(now)}
-				rows={visible}
+				rows={runs}
 				rowKey={(run) => run.id}
-				status={status === 'loading' && runs.length === 0 ? 'loading' : 'idle'}
+				status={status === 'loading' ? 'loading' : 'idle'}
 				loadingLabel={t('agents.runs.loading')}
+				sorting
+				sortingState={[
+					{ key: 'queuedAt', desc: direction === 'desc' },
+				]}
+				onSortingChange={setSorting}
+				pagination={{
+					pageIndex: page.pageIndex,
+					pageSize: PAGE_SIZE,
+					hasMore: hasMorePages(page),
+					onPageChange: setPage,
+				}}
+				after={<Pagination
+					pageIndex={page.pageIndex}
+					pageSize={PAGE_SIZE}
+					hasMore={hasMorePages(page)}
+					onPageChange={setPage}
+					label={t('agents.common.page.label')}
+					previousLabel={t('agents.common.page.previous')}
+					nextLabel={t('agents.common.page.next')}
+					summary={(keyset) => t('agents.common.page.summary', {
+						page: keyset.pageIndex + 1,
+						from: keyset.from,
+					})}
+				/>}
 				filtered={term !== '' || activeFilters > 0}
 				empty={{
 					icon: 'play',