+
-
void;
- onOpen: (session: SessionRecord) => void;
+ result?: SessionThroughputResult;
+ loading: boolean;
+ error: unknown;
}) {
+ const groups = result?.groups ?? EMPTY_THROUGHPUT_GROUPS;
+ const outputChart = useMemo(
+ () => buildThroughputChart(groups, "outputTokensPerSecond"),
+ [groups],
+ );
+ const contextChart = useMemo(
+ () => buildThroughputChart(groups, "contextTokensPerSecond"),
+ [groups],
+ );
+
return (
-
-
- {SESSION_COLUMNS.map((column) => (
-
- ))}
-
-
- {groups.map((group) => (
-
-
-
- {group.sessions.map((session) => (
-
activateSession(session, onOpen)}
- onKeyDown={(event) => handleSessionKeyDown(event, session, onOpen)}
- className={`${SESSION_GRID_CLASS} cursor-pointer items-center gap-density-2 px-density-3 py-density-2 text-sm transition-colors hover:bg-muted/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring data-[disabled=true]:cursor-default data-[disabled=true]:hover:bg-transparent`}
- data-disabled={session.detailAvailable === false ? "true" : undefined}
- >
-
-
-
-
-
-
-
-
-
- ))}
-
- ))}
+
+
+
+
Token Throughput
+
+ {loading ? "Loading completed sessions..." : `${result?.total ?? 0} completed sessions sampled`}
+
+
+ {result?.skipped ? (
+
{result.skipped} skipped
+ ) : null}
+
+ {error ? (
+
+ {errorMessage(error)}
+
+ ) : loading ? (
+
+ Loading throughput...
+
+ ) : groups.length === 0 ? (
+
+ No completed sessions with duration and token usage.
+
+ ) : (
+ <>
+
+
+
+
+
+
+ )}
+
);
}
-function SessionHeaderCell({
- column,
- sort,
- sortDirection,
- onSortChange,
+function StaticThroughputChart({
+ title,
+ icon,
+ model,
+ empty,
}: {
- column: (typeof SESSION_COLUMNS)[number];
- sort: DashboardSort;
- sortDirection: SortDirection;
- onSortChange: (sort: DashboardSort) => void;
+ title: string;
+ icon: DashboardIcon;
+ model: ThroughputChartModel;
+ empty: string;
}) {
- if (!column.sort) {
- return
{column.label}
;
+ const fetcher = useMemo(
+ () => staticThroughputFetcher(model.responses),
+ [model.responses],
+ );
+ if (model.series.length === 0) {
+ return (
+
+ {empty}
+
+ );
}
+ return (
+
+ );
+}
- const active = sort === column.sort;
+function ThroughputTable({ groups }: { groups: SessionThroughputGroup[] }) {
return (
-
+
+
+
+
+
+ | Model |
+ Sessions |
+ Output |
+ Total |
+ Context |
+ Context Used |
+
+
+
+ {groups.map((group) => (
+
+ |
+
+
+
+
+
+ {group.model}
+
+ {group.source} / {effortLabel(group.reasoningEffort) ?? "default"}
+
+
+
+ |
+ {group.sessions} |
+ {formatRate(group.outputTokensPerSecond)} |
+ {formatRate(group.totalTokensPerSecond)} |
+ {formatOptionalRate(group.contextTokensPerSecond)} |
+ {formatOptionalPercent(group.avgContextUsedPercent)} |
+
+ ))}
+
+
+
+
);
}
@@ -521,8 +573,8 @@ function SessionCardGrid({
key={session.key}
role={session.detailAvailable === false ? undefined : "button"}
tabIndex={session.detailAvailable === false ? undefined : 0}
- onClick={() => activateSession(session, onOpen)}
- onKeyDown={(event) => handleSessionKeyDown(event, session, onOpen)}
+ onClick={() => session.detailAvailable !== false && onOpen(session)}
+ onKeyDown={(event) => handleCardKeyDown(event, session, onOpen)}
className="min-w-0 cursor-pointer rounded border border-border bg-card p-density-3 transition-colors hover:border-muted-foreground/40 hover:bg-muted/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring data-[disabled=true]:cursor-default data-[disabled=true]:hover:border-border data-[disabled=true]:hover:bg-card"
data-disabled={session.detailAvailable === false ? "true" : undefined}
>
@@ -531,7 +583,7 @@ function SessionCardGrid({
-
+
@@ -552,7 +604,7 @@ function SessionCardGrid({
value={
@@ -564,9 +616,11 @@ function SessionCardGrid({
-
- {commandLabel(session.live.command)}
-
+ {session.live?.command ? (
+
+ {commandLabel(session.live.command)}
+
+ ) : null}
@@ -576,168 +630,15 @@ function SessionCardGrid({
);
}
-function ProjectGroupHeader({ group }: { group: ProjectSessionGroup }) {
- return (
-
-
-
{group.label}
- {group.detail ? (
-
{group.detail}
- ) : null}
-
-
- {group.sessions.length}
-
-
- );
-}
-
-function UsageBarsCell({
- title,
- value,
- icon,
- thresholds,
-}: {
- title: string;
- value: number | undefined;
- icon: DashboardIcon;
- thresholds: [warning: number, danger: number];
-}) {
- return (
-
-
-
- {formatPercent(value)}
-
-
- );
-}
-
-function SessionIdentity({ session }: { session: SessionRecord }) {
- const model = modelLabel(session);
- const effort = effortLabel(session.reasoningEffort);
- return (
-
-
-
-
-
- {model}
-
- {session.source}
-
-
-
- {effort ? (
-
-
- {effort}
-
- ) : null}
- {sessionTitle(session)}
-
-
- {session.live?.pid ? `pid ${session.live.pid} - ` : ""}
- {commandLabel(session.live?.command)}
-
-
- );
-}
-
-function StatusCell({ session }: { session: SessionRecord & { live: SessionLive } }) {
- const signal = session.health?.[0];
- return (
-
-
-
- {session.live.status ?? "active"}
-
-
- );
-}
-
-function ContextCell({
- session,
- expanded = false,
-}: {
- session: SessionRecord;
- expanded?: boolean;
-}) {
- const percent = session.context?.freePercent;
- if (percent === undefined) {
- return
;
- }
- return (
-
-
- {percent}% free
- {expanded && session.context?.windowTokens ? (
-
- {formatCompactNumber(session.context.windowTokens)}
-
- ) : null}
-
-
-
- );
-}
-
-function SessionActions({
- session,
- onOpen,
- compact = false,
-}: {
- session: SessionRecord;
- onOpen: (session: SessionRecord) => void;
- compact?: boolean;
-}) {
- return (
-
-
-
-
- );
+function handleCardKeyDown(
+ event: React.KeyboardEvent
,
+ session: SessionRecord,
+ onOpen: (session: SessionRecord) => void,
+) {
+ if (event.key !== "Enter" && event.key !== " ") return;
+ if (session.detailAvailable === false) return;
+ event.preventDefault();
+ onOpen(session);
}
function HealthPanel({
@@ -870,173 +771,82 @@ function MetricBox({ label, value }: { label: string; value: ReactNode }) {
);
}
-function MetricText({ value }: { value: ReactNode }) {
- return {value}
;
-}
-
-function hasLiveProcess(session: SessionRecord): session is LiveSessionRecord {
- return Boolean(session.live);
-}
-
-function compareSessions(
- left: LiveSessionRecord,
- right: LiveSessionRecord,
- sort: DashboardSort,
- direction: SortDirection,
-) {
- if (sort === "model") {
- return directionalCompare(
- modelLabel(left).localeCompare(modelLabel(right)) ||
- sessionSortTime(right) - sessionSortTime(left),
- direction,
- "asc",
- );
- }
- if (sort === "context") {
- return directionalCompare(
- (left.context?.freePercent ?? 101) - (right.context?.freePercent ?? 101) ||
- sessionSortTime(right) - sessionSortTime(left),
- direction,
- "asc",
- );
- }
- if (sort === "cpu") {
- return directionalCompare(
- (right.live.cpuPercent ?? -1) - (left.live.cpuPercent ?? -1) ||
- sessionSortTime(right) - sessionSortTime(left),
- direction,
- "desc",
- );
- }
- if (sort === "memory") {
- return directionalCompare(
- (right.live.memoryPercent ?? -1) - (left.live.memoryPercent ?? -1) ||
- sessionSortTime(right) - sessionSortTime(left),
- direction,
- "desc",
- );
- }
- if (sort === "tokens") {
- return directionalCompare(
- tokenTotal(right) - tokenTotal(left) ||
- sessionSortTime(right) - sessionSortTime(left),
- direction,
- "desc",
- );
- }
- if (sort === "recent") {
- return directionalCompare(
- sessionSortTime(right) - sessionSortTime(left),
- direction,
- "desc",
- );
- }
- return directionalCompare(
- healthRank(right) - healthRank(left) ||
- (left.context?.freePercent ?? 101) - (right.context?.freePercent ?? 101) ||
- (right.live.cpuPercent ?? -1) - (left.live.cpuPercent ?? -1) ||
- sessionSortTime(right) - sessionSortTime(left),
- direction,
- "desc",
- );
-}
-
-function directionalCompare(value: number, direction: SortDirection, natural: SortDirection) {
- return direction === natural ? value : -value;
-}
-
-function defaultSortDirection(sort: DashboardSort): SortDirection {
- return sort === "model" || sort === "context" ? "asc" : "desc";
-}
-
-function tokenTotal(session: SessionRecord) {
- return session.tokens?.totalTokens ?? 0;
-}
-
-function groupSessionsByProject(sessions: LiveSessionRecord[]): ProjectSessionGroup[] {
- const groups = new Map();
-
- for (const session of sessions) {
- const cwd = session.live.cwd ?? session.cwd;
- const key = cwd || "unknown";
- const label = projectLabel(cwd);
- const existing = groups.get(key);
-
- if (existing) {
- existing.sessions.push(session);
- continue;
+function buildThroughputChart(
+ groups: SessionThroughputGroup[],
+ metric: ThroughputMetric,
+): ThroughputChartModel {
+ const responses: Record = {};
+ const series: TimeseriesSeries[] = [];
+ const ranked = [...groups]
+ .filter((group) => (group.points?.length ?? 0) >= 2 && (group[metric] ?? 0) > 0)
+ .sort((left, right) => (right[metric] ?? 0) - (left[metric] ?? 0))
+ .slice(0, 5);
+
+ for (const [index, group] of ranked.entries()) {
+ const id = `${metric}-${index}-${hashThroughputGroup(group)}`;
+ const points = [];
+ for (const point of group.points ?? []) {
+ const value = point[metric] ?? 0;
+ if (!Number.isFinite(value)) continue;
+ points.push({ at: point.at, value });
}
-
- groups.set(key, {
- key,
- label,
- detail: cwd && cwd !== label ? cwd : undefined,
- sessions: [session],
+ if (points.length < 2) continue;
+ series.push({
+ id,
+ label: throughputGroupLabel(group),
+ unit: " tok/s",
});
+ responses[id] = { id, points };
}
- return [...groups.values()];
-}
-
-function activateSession(session: SessionRecord, onOpen: (session: SessionRecord) => void) {
- if (session.detailAvailable === false) return;
- onOpen(session);
-}
-
-function handleSessionKeyDown(
- event: KeyboardEvent,
- session: SessionRecord,
- onOpen: (session: SessionRecord) => void,
-) {
- if (event.key !== "Enter" && event.key !== " ") return;
- event.preventDefault();
- activateSession(session, onOpen);
-}
-
-function modelLabel(session: SessionRecord) {
- return session.model || session.provider || session.source;
+ return { series, responses };
}
-function modelIcon(session: SessionRecord): DashboardIcon {
- const value = `${session.provider ?? ""} ${session.model ?? ""} ${session.source}`.toLowerCase();
- if (value.includes("claude") || value.includes("anthropic")) return UiSparkles;
- if (value.includes("codex") || value.includes("openai") || value.includes("gpt")) return UiRobotAi;
- return UiTerminal;
-}
-
-function effortLabel(value: string | undefined) {
- return value ? value.replace(/_/g, " ") : undefined;
-}
-
-function formatPercent(value: number | undefined) {
- return value === undefined ? "--" : `${value.toFixed(1)}%`;
+function staticThroughputFetcher(responses: Record) {
+ return async (url: string): Promise => {
+ const path = url.split("?")[0] ?? url;
+ const id = decodeURIComponent(path.split("/").filter(Boolean).pop() ?? path);
+ return responses[id] ?? { id, points: [] };
+ };
}
-function formatRelativeTime(value: string | undefined) {
- if (!value) return "--";
- const time = new Date(value).getTime();
- if (Number.isNaN(time)) return value;
- const delta = Date.now() - time;
- if (delta < 60_000) return "now";
- if (delta < 3_600_000) return `${Math.round(delta / 60_000)}m ago`;
- if (delta < 86_400_000) return `${Math.round(delta / 3_600_000)}h ago`;
- return `${Math.round(delta / 86_400_000)}d ago`;
+function throughputGroupLabel(group: SessionThroughputGroup) {
+ const effort = effortLabel(group.reasoningEffort);
+ return effort && effort !== "default" ? `${group.model} / ${effort}` : group.model;
+}
+
+function hashThroughputGroup(group: SessionThroughputGroup) {
+ const lastPoint = group.points?.[group.points.length - 1];
+ const input = [
+ group.key,
+ group.sessions,
+ group.durationSeconds,
+ group.outputTokens,
+ group.totalTokens,
+ group.contextTokens,
+ lastPoint?.at,
+ lastPoint?.outputTokensPerSecond,
+ lastPoint?.contextTokensPerSecond,
+ ].join("|");
+ let hash = 0;
+ for (let i = 0; i < input.length; i++) {
+ hash = (hash * 31 + input.charCodeAt(i)) >>> 0;
+ }
+ return hash.toString(36);
}
-function contextTone(percent: number) {
- if (percent <= 10) return "font-medium text-destructive";
- if (percent <= 25) return "font-medium text-amber-700";
- return "font-medium text-emerald-700";
+function formatRate(value: number) {
+ if (!Number.isFinite(value) || value <= 0) return "0/s";
+ if (value >= 1000) return `${formatCompactNumber(Math.round(value))}/s`;
+ if (value >= 10) return `${value.toFixed(0)}/s`;
+ return `${value.toFixed(1)}/s`;
}
-function contextBarTone(percent: number) {
- if (percent <= 10) return "bg-destructive";
- if (percent <= 25) return "bg-amber-500";
- return "bg-emerald-500";
+function formatOptionalRate(value: number | undefined) {
+ return value !== undefined && value > 0 ? formatRate(value) : "--";
}
-function copySessionRef(session: SessionRecord) {
- if (!navigator.clipboard) return;
- const value = session.live?.pid ? `${session.source}:${session.live.pid}` : session.key;
- void navigator.clipboard.writeText(value).catch(() => undefined);
+function formatOptionalPercent(value: number | undefined) {
+ if (value === undefined || !Number.isFinite(value) || value <= 0) return "--";
+ return `${value.toFixed(value >= 10 ? 0 : 1)}%`;
}
diff --git a/pkg/cli/webapp/src/PromptBatchInspector.tsx b/pkg/cli/webapp/src/PromptBatchInspector.tsx
new file mode 100644
index 0000000..5ea34d8
--- /dev/null
+++ b/pkg/cli/webapp/src/PromptBatchInspector.tsx
@@ -0,0 +1,213 @@
+import { memo, useCallback, useEffect, useMemo, useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { Button, Select } from "@flanksource/clicky-ui/components";
+import {
+ SessionChatComposer,
+ SessionInspector,
+ type UnifiedSessionInput,
+} from "@flanksource/clicky-ui/ai";
+import {
+ usePromptRunStream,
+ type PromptBatchHandle,
+ type PromptBatchRunHandle,
+ type PromptRunStreamState,
+} from "./hooks/usePromptRunStream";
+import { useSessionChat, mergeSessionMessages } from "./hooks/useSessionChat";
+import { fetchSession } from "./sessionData";
+import {
+ batchChatTargetState,
+ batchChatTargets,
+ batchSessionCollection,
+} from "./sessionCollection";
+
+export function PromptBatchInspector({
+ handle,
+ onEdit,
+}: {
+ handle: PromptBatchHandle;
+ onEdit: () => void;
+}) {
+ const query = useQuery({
+ queryKey: ["prompt-batch", handle.batchId],
+ queryFn: () => fetchSession(handle.batchId),
+ refetchInterval: 2_000,
+ });
+ const [streams, setStreams] = useState>(
+ {},
+ );
+ const updateStream = useCallback(
+ (runID: string, state: PromptRunStreamState) =>
+ setStreams((current) =>
+ current[runID] === state ? current : { ...current, [runID]: state },
+ ),
+ [],
+ );
+ const liveSessions = useMemo(() => {
+ const sessions = new Map();
+ const savedSessions = new Map(
+ query.data?.sessions.map((item) => [item.captainId, item.detail]) ?? [],
+ );
+ for (const run of handle.runs) {
+ const stream = streams[run.runId];
+ if (!stream) continue;
+ const saved = savedSessions.get(run.sessionId);
+ sessions.set(run.sessionId, {
+ ...saved,
+ id: run.sessionId,
+ source: run.backend || saved?.source || "captain",
+ title: run.selector || run.model || saved?.title,
+ backend: run.backend || saved?.backend,
+ model: run.model || saved?.model,
+ reasoningEffort: run.effort || saved?.reasoningEffort,
+ messages: mergeSessionMessages(saved?.messages ?? [], stream.messages),
+ });
+ }
+ return sessions;
+ }, [handle.runs, query.data?.sessions, streams]);
+ const collection = useMemo(
+ () => batchSessionCollection(handle, query.data, liveSessions),
+ [handle, liveSessions, query.data],
+ );
+ const targets = useMemo(() => batchChatTargets(handle), [handle]);
+ const [targetID, setTargetID] = useState(targets[0]?.sessionId);
+ const target =
+ targets.find((candidate) => candidate.sessionId === targetID) ?? targets[0];
+ const targetState = batchChatTargetState(query.data, target);
+ const chat = useSessionChat({
+ initialRunID: target?.runId,
+ sessionID: target?.sessionId,
+ initialCapabilities: targetState?.capabilities ?? target?.capabilities,
+ initialState: targetState,
+ onTerminal: async () => {
+ await query.refetch();
+ },
+ });
+
+ useEffect(() => {
+ if (target && target.sessionId !== targetID) setTargetID(target.sessionId);
+ }, [target, targetID]);
+
+ return (
+
+ {handle.runs.map((run) => (
+
+ ))}
+
+
+
Multi-model run
+
+ {handle.batchId}
+
+
+
+
+ {query.error && (
+
+ {errorMessage(query.error)}
+
+ )}
+
{
+ const run = handle.runs.find(
+ (candidate) => candidate.sessionId === item.id,
+ );
+ return run ? : undefined;
+ }}
+ {...(target
+ ? {
+ composer: (
+
+
+ {error && {error}}
+
+
+ );
+}
+
+function errorMessage(error: unknown) {
+ return error instanceof Error ? error.message : String(error);
+}
diff --git a/pkg/cli/webapp/src/PromptRunStream.tsx b/pkg/cli/webapp/src/PromptRunStream.tsx
index a6df5d5..b8ed0b6 100644
--- a/pkg/cli/webapp/src/PromptRunStream.tsx
+++ b/pkg/cli/webapp/src/PromptRunStream.tsx
@@ -1,5 +1,10 @@
-import { SessionViewer } from "@flanksource/clicky-ui/ai";
-import { usePromptRunStream, type PromptRunStreamStatus, type PromptRunSummary } from "./hooks/usePromptRunStream";
+import { SessionChatComposer, SessionViewer } from "@flanksource/clicky-ui/ai";
+import { Button } from "@flanksource/clicky-ui/components";
+import {
+ type PromptRunStreamStatus,
+ type PromptRunSummary,
+} from "./hooks/usePromptRunStream";
+import { useSessionChat } from "./hooks/useSessionChat";
/**
* PromptRunStream renders a prompt run's session history live: it subscribes to
@@ -7,13 +12,19 @@ import { usePromptRunStream, type PromptRunStreamStatus, type PromptRunSummary }
* with a status pill and a completion summary footer.
*/
export function PromptRunStream({ runID }: { runID: string }) {
- const { messages, summary, status, error } = usePromptRunStream(runID);
+ const chat = useSessionChat({ initialRunID: runID });
+ const { messages, summary, status, error, run, chatState } = chat;
const empty = messages.length === 0;
return (
-
+
+ {status !== "done" && status !== "error" ? (
+
+ ) : null}
{error && (
@@ -31,6 +42,16 @@ export function PromptRunStream({ runID }: { runID: string }) {
)}
+ {run?.chat && chatState ? (
+
+ ) : null}
{summary &&
}
- {parts.map((part, i) => (
-
- {part}
+ {parts.map((part) => (
+
+ {part.label}
))}
diff --git a/pkg/cli/webapp/src/PromptRuntimeRows.test.tsx b/pkg/cli/webapp/src/PromptRuntimeRows.test.tsx
new file mode 100644
index 0000000..b6ab1bc
--- /dev/null
+++ b/pkg/cli/webapp/src/PromptRuntimeRows.test.tsx
@@ -0,0 +1,31 @@
+import { describe, expect, it } from "vitest";
+import {
+ addRuntimeRow,
+ validateRuntimeRows,
+} from "./promptRuntimeRowsHelpers";
+
+describe("PromptRuntimeRows", () => {
+ it("adds a runtime with the primary backend and an intentionally blank model", () => {
+ expect(
+ addRuntimeRow([{ backend: "codex-cmux", model: "gpt-5.6-sol" }]),
+ ).toEqual([
+ { backend: "codex-cmux", model: "gpt-5.6-sol" },
+ { backend: "codex-cmux" },
+ ]);
+ });
+
+ it("rejects incomplete and duplicate comparison rows", () => {
+ expect(
+ validateRuntimeRows([
+ { backend: "codex-cmux", model: "gpt-5.6-sol" },
+ { backend: "codex-cmux" },
+ ]),
+ ).toEqual("Runtime 2 needs a model");
+ expect(
+ validateRuntimeRows([
+ { backend: "codex-cmux", model: "gpt-5.6-sol", effort: "high" },
+ { backend: "codex-cmux", model: "gpt-5.6-sol", effort: "high" },
+ ]),
+ ).toEqual("Runtime 2 duplicates codex-cmux:gpt-5.6-sol:high");
+ });
+});
diff --git a/pkg/cli/webapp/src/PromptRuntimeRows.tsx b/pkg/cli/webapp/src/PromptRuntimeRows.tsx
new file mode 100644
index 0000000..e774337
--- /dev/null
+++ b/pkg/cli/webapp/src/PromptRuntimeRows.tsx
@@ -0,0 +1,129 @@
+import { Button } from "@flanksource/clicky-ui/components";
+import { Icon, UiAdd, UiTrash } from "@flanksource/clicky-ui/data";
+import {
+ RuntimeModePicker,
+ SPEC_RUNTIME_FAMILIES,
+ effortOptionsForModel,
+ familyById,
+ modelsForFamily,
+ reconcileModelCapabilities,
+ selectionForBackend,
+ type AISpecRuntimeValue,
+} from "@flanksource/clicky-ui/ai";
+import {
+ EffortSelector,
+ ModelSelector,
+ type ChatModel,
+} from "@flanksource/clicky-ui/chat";
+import {
+ addRuntimeRow,
+ validateRuntimeRows,
+} from "./promptRuntimeRowsHelpers";
+
+const REASONING_EFFORTS = ["low", "medium", "high", "xhigh"];
+
+export function PromptRuntimeRows({
+ rows,
+ models,
+ onChange,
+}: {
+ rows: AISpecRuntimeValue[];
+ models: ChatModel[];
+ onChange: (rows: AISpecRuntimeValue[]) => void;
+}) {
+ const error = validateRuntimeRows(rows);
+ const update = (index: number, value: AISpecRuntimeValue) =>
+ onChange(rows.map((row, rowIndex) => (rowIndex === index ? value : row)));
+
+ return (
+
+ {rows.map((row, index) => {
+ const selection = selectionForBackend(
+ SPEC_RUNTIME_FAMILIES,
+ row.backend,
+ );
+ const family = familyById(SPEC_RUNTIME_FAMILIES, selection.family);
+ const availableModels = modelsForFamily(models, family, row.backend);
+ const selectedModel = models.find((model) => model.id === row.model);
+ const efforts = effortOptionsForModel(selectedModel, REASONING_EFFORTS);
+ return (
+
+
+
+ Runtime {index + 1}
+
+ {index > 0 && (
+
+ )}
+
+ update(index, value)}
+ models={models}
+ />
+
+
+ {efforts.length > 0 && (
+
+ )}
+
+
+ );
+ })}
+
+
+ {rows.length > 1 && error && (
+ {error}
+ )}
+
+