@voyantjs/workflows-react 0.106.0 → 0.107.1

package/README.md

@@ -1,5 +1,14 @@
 # @voyantjs/workflows-react
 
+The workflows client tier: headless hooks and API clients plus the styled
+workflow-run admin UI (formerly `@voyantjs/workflows-ui`).
+
+Headless consumers import from the root, `./workflow-runs`,
+`./workflow-runs-client`, or `./workflow-schedules-client` — these pull no
+styling peers. Styled surfaces live under `./ui`, `./components/*`, `./client`,
+`./i18n`, and `./styles.css`, whose heavier peers (`@voyantjs/ui`,
+`lucide-react`) are optional and only needed when you import those subpaths.
+
 React hooks for triggering Voyant Workflows and subscribing to runs in
 real time. The package also includes admin workflow-run observability hooks for
 the `/v1/admin/workflow-runs` routes exposed by `@voyantjs/workflow-runs`.
@@ -62,3 +71,37 @@ export function WorkflowsRoute() {
 `useWorkflowRuns` polls every 5 seconds only while the visible list contains a
 running workflow. `useWorkflowRun` polls every 2 seconds while the selected run
 is running. Both stop polling in background tabs.
+
+## UI components
+
+Importable React UI for the workflow run admin API exposed by
+`@voyantjs/workflow-runs`.
+
+```tsx
+import "@voyantjs/workflows-react/styles.css"
+
+import { createWorkflowRunsApiClient, WorkflowRunsPage } from "@voyantjs/workflows-react/ui"
+
+const workflowsApi = createWorkflowRunsApiClient({
+  apiBase: "/api",
+})
+
+export function WorkflowsRoute() {
+  return <WorkflowRunsPage api={workflowsApi} />
+}
+```
+
+The `./ui` subpath exports `WorkflowRunsPage` and `WorkflowRunDetailPage`.
+Route-owning apps can wire deep links by controlling the selected run id:
+
+```tsx
+<WorkflowRunsPage
+  api={workflowsApi}
+  selectedRunId={params.id}
+  onOpenRun={(id) => navigate({ to: "/workflows/$id", params: { id } })}
+/>
+```
+
+`@voyantjs/workflows-react/ui` is the public workflows-facing import path for
+these surfaces. Older `@voyantjs/workflows-react/ui` and `@voyantjs/workflow-runs-ui`
+imports should migrate here.

package/dist/client.d.ts

@@ -0,0 +1,2 @@
+export { createWorkflowRunsApiClient, type WorkflowRunsApiClientOptions, } from "./workflow-runs-client.js";
+//# sourceMappingURL=client.d.ts.map

package/dist/client.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../src/client.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,2BAA2B,EAC3B,KAAK,4BAA4B,GAClC,MAAM,2BAA2B,CAAA"}

package/dist/client.js

@@ -0,0 +1 @@
+export { createWorkflowRunsApiClient, } from "./workflow-runs-client.js";

package/dist/components/common.d.ts

@@ -0,0 +1,30 @@
+import { type WorkflowRunsUiMessages } from "../i18n/index.js";
+import type { WorkflowRun, WorkflowRunStep, WorkflowRunStepStatus } from "../types.js";
+export declare function StatusIcon({ status }: {
+    status: WorkflowRun["status"];
+}): import("react/jsx-runtime").JSX.Element;
+export declare function StepStatusIcon({ status }: {
+    status: WorkflowRunStepStatus;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function StatusBadge({ status, messages, }: {
+    status: WorkflowRun["status"];
+    messages: WorkflowRunsUiMessages;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function TagChip({ tag }: {
+    tag: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function CopyableId({ id, copiedLabel, className, }: {
+    id: string;
+    copiedLabel: string;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function PayloadBlock({ title, value, messages, hideTitle, }: {
+    title: string;
+    value: Record<string, unknown>;
+    messages: WorkflowRunsUiMessages;
+    hideTitle?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function formatRelative(iso: string, messages: WorkflowRunsUiMessages): string;
+export declare function formatDuration(ms: number): string;
+export declare function runHasLiveStatus(run: WorkflowRun | WorkflowRunStep): boolean;
+//# sourceMappingURL=common.d.ts.map

package/dist/components/common.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../src/components/common.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAsC,KAAK,sBAAsB,EAAE,MAAM,kBAAkB,CAAA;AAClG,OAAO,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,qBAAqB,EAAE,MAAM,aAAa,CAAA;AAEtF,wBAAgB,UAAU,CAAC,EAAE,MAAM,EAAE,EAAE;IAAE,MAAM,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAA;CAAE,2CAWvE;AAED,wBAAgB,cAAc,CAAC,EAAE,MAAM,EAAE,EAAE;IAAE,MAAM,EAAE,qBAAqB,CAAA;CAAE,2CAa3E;AAED,wBAAgB,WAAW,CAAC,EAC1B,MAAM,EACN,QAAQ,GACT,EAAE;IACD,MAAM,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAA;IAC7B,QAAQ,EAAE,sBAAsB,CAAA;CACjC,2CAaA;AAED,wBAAgB,OAAO,CAAC,EAAE,GAAG,EAAE,EAAE;IAAE,GAAG,EAAE,MAAM,CAAA;CAAE,2CAiB/C;AAED,wBAAgB,UAAU,CAAC,EACzB,EAAE,EACF,WAAW,EACX,SAAS,GACV,EAAE;IACD,EAAE,EAAE,MAAM,CAAA;IACV,WAAW,EAAE,MAAM,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,2CAyBA;AAED,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,KAAK,EACL,QAAQ,EACR,SAAiB,GAClB,EAAE;IACD,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IAC9B,QAAQ,EAAE,sBAAsB,CAAA;IAChC,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,2CAkCA;AAED,wBAAgB,cAAc,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,sBAAsB,GAAG,MAAM,CAWpF;AAED,wBAAgB,cAAc,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,CAMjD;AAED,wBAAgB,gBAAgB,CAAC,GAAG,EAAE,WAAW,GAAG,eAAe,GAAG,OAAO,CAE5E"}

package/dist/components/common.js

@@ -0,0 +1,108 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Badge } from "@voyantjs/ui/components/badge";
+import { AlertCircle, CheckCircle2, Clock, Copy, RefreshCw, XCircle } from "lucide-react";
+import { useMemo, useState } from "react";
+import { useWorkflowRunsUiMessagesOrDefault } from "../i18n/index.js";
+export function StatusIcon({ status }) {
+    switch (status) {
+        case "succeeded":
+            return _jsx(CheckCircle2, { className: "h-4 w-4 text-emerald-500" });
+        case "failed":
+            return _jsx(XCircle, { className: "h-4 w-4 text-destructive" });
+        case "cancelled":
+            return _jsx(AlertCircle, { className: "h-4 w-4 text-amber-500" });
+        case "running":
+            return _jsx(Clock, { className: "h-4 w-4 animate-pulse text-blue-500" });
+    }
+}
+export function StepStatusIcon({ status }) {
+    switch (status) {
+        case "succeeded":
+            return _jsx(CheckCircle2, { className: "h-4 w-4 text-emerald-500" });
+        case "failed":
+            return _jsx(XCircle, { className: "h-4 w-4 text-destructive" });
+        case "running":
+            return _jsx(Clock, { className: "h-4 w-4 animate-pulse text-blue-500" });
+        case "skipped":
+            return _jsx(AlertCircle, { className: "h-4 w-4 text-muted-foreground" });
+        case "compensated":
+            return _jsx(RefreshCw, { className: "h-4 w-4 text-amber-500" });
+    }
+}
+export function StatusBadge({ status, messages, }) {
+    useWorkflowRunsUiMessagesOrDefault();
+    const className = {
+        succeeded: "border-emerald-500/40 bg-emerald-500/10 text-emerald-600 dark:text-emerald-300", // i18n-literal-ok: CSS classes
+        failed: "border-destructive/40 bg-destructive/10 text-destructive", // i18n-literal-ok: CSS classes
+        cancelled: "border-amber-500/40 bg-amber-500/10 text-amber-600 dark:text-amber-300", // i18n-literal-ok: CSS classes
+        running: "border-blue-500/40 bg-blue-500/10 text-blue-600 dark:text-blue-300", // i18n-literal-ok: CSS classes
+    }[status];
+    return (_jsx(Badge, { variant: "outline", className: `text-[11px] ${className}`, children: messages.status[status] }));
+}
+export function TagChip({ tag }) {
+    const colonIdx = tag.indexOf(":");
+    if (colonIdx < 0) {
+        return (_jsx(Badge, { variant: "outline", className: "font-mono text-[10px]", children: tag }));
+    }
+    const key = tag.slice(0, colonIdx);
+    const value = tag.slice(colonIdx + 1);
+    return (_jsxs(Badge, { variant: "outline", className: "gap-1 font-mono text-[10px]", title: tag, children: [_jsx("span", { className: "text-muted-foreground", children: key }), _jsx("span", { className: "max-w-[18ch] truncate", children: value })] }));
+}
+export function CopyableId({ id, copiedLabel, className, }) {
+    const [copied, setCopied] = useState(false);
+    const onCopy = async () => {
+        try {
+            await navigator.clipboard.writeText(id);
+            setCopied(true);
+            setTimeout(() => setCopied(false), 1500);
+        }
+        catch {
+            /* clipboard blocked */
+        }
+    };
+    return (_jsxs("button", { type: "button", onClick: onCopy, className: `group inline-flex items-center gap-1.5 rounded border bg-muted/40 px-2 py-1 font-mono text-[11px] hover:bg-muted ${className ?? ""}`, title: id, children: [_jsx("span", { className: "max-w-[16ch] truncate", children: id }), _jsx(Copy, { className: "h-3 w-3 opacity-60 group-hover:opacity-100" }), copied ? _jsx("span", { className: "text-emerald-500 text-[10px]", children: copiedLabel }) : null] }));
+}
+export function PayloadBlock({ title, value, messages, hideTitle = false, }) {
+    const [copied, setCopied] = useState(false);
+    const json = useMemo(() => JSON.stringify(value, null, 2), [value]);
+    const onCopy = async () => {
+        try {
+            await navigator.clipboard.writeText(json);
+            setCopied(true);
+            setTimeout(() => setCopied(false), 1500);
+        }
+        catch {
+            /* clipboard blocked */
+        }
+    };
+    return (_jsxs("div", { className: "space-y-1", children: [hideTitle ? null : (_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx("span", { className: "text-muted-foreground text-xs", children: title }), _jsxs("button", { type: "button", onClick: onCopy, className: "flex items-center gap-1 text-muted-foreground text-xs hover:text-foreground", children: [_jsx(Copy, { className: "h-3 w-3" }), copied ? messages.detail.copied : messages.detail.copy] })] })), _jsx("pre", { className: "max-h-[24rem] overflow-auto rounded bg-muted/40 p-3 font-mono text-[11px] leading-relaxed", children: json })] }));
+}
+export function formatRelative(iso, messages) {
+    const seconds = Math.round((Date.now() - new Date(iso).getTime()) / 1000);
+    if (Math.abs(seconds) < 5)
+        return messages.format.relativeNow;
+    const formatter = new Intl.RelativeTimeFormat(undefined, { numeric: "auto" });
+    if (Math.abs(seconds) < 60)
+        return formatter.format(-seconds, "second");
+    const minutes = Math.round(seconds / 60);
+    if (Math.abs(minutes) < 60)
+        return formatter.format(-minutes, "minute");
+    const hours = Math.round(minutes / 60);
+    if (Math.abs(hours) < 24)
+        return formatter.format(-hours, "hour");
+    const days = Math.round(hours / 24);
+    return formatter.format(-days, "day");
+}
+export function formatDuration(ms) {
+    if (ms < 1000)
+        return `${ms}ms`;
+    if (ms < 60_000)
+        return `${(ms / 1000).toFixed(2)}s`;
+    const minutes = Math.floor(ms / 60_000);
+    const seconds = Math.round((ms % 60_000) / 1000);
+    return `${minutes}m ${seconds}s`;
+}
+export function runHasLiveStatus(run) {
+    return run.status === "running";
+}

package/dist/components/workflow-run-actions.d.ts

@@ -0,0 +1,7 @@
+import type { WorkflowRun, WorkflowRunsApi } from "../types.js";
+export declare function WorkflowRunActionsCard({ api, run, onOpenRun, }: {
+    api: WorkflowRunsApi;
+    run: WorkflowRun;
+    onOpenRun?: (id: string) => void;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=workflow-run-actions.d.ts.map

package/dist/components/workflow-run-actions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"workflow-run-actions.d.ts","sourceRoot":"","sources":["../../src/components/workflow-run-actions.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,WAAW,EAA0B,eAAe,EAAE,MAAM,aAAa,CAAA;AAGvF,wBAAgB,sBAAsB,CAAC,EACrC,GAAG,EACH,GAAG,EACH,SAAS,GACV,EAAE;IACD,GAAG,EAAE,eAAe,CAAA;IACpB,GAAG,EAAE,WAAW,CAAA;IAChB,SAAS,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;CACjC,2CAuGA"}

package/dist/components/workflow-run-actions.js

@@ -0,0 +1,72 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "@voyantjs/ui/components/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@voyantjs/ui/components/card";
+import { AlertTriangle, Play, RotateCw } from "lucide-react";
+import { useCallback, useState } from "react";
+import { useWorkflowRunsUiMessagesOrDefault } from "../i18n/index.js";
+import { runHasLiveStatus } from "./common.js";
+export function WorkflowRunActionsCard({ api, run, onOpenRun, }) {
+    const messages = useWorkflowRunsUiMessagesOrDefault();
+    const [busy, setBusy] = useState(null);
+    const [feedback, setFeedback] = useState(null);
+    const [confirmOpen, setConfirmOpen] = useState(false);
+    const explainError = useCallback((err) => {
+        if (err.error === "runner_not_registered")
+            return messages.actions.runnerMissing;
+        if (err.error === "rerun_blocked")
+            return err.detail ?? messages.actions.rerunBlocked;
+        if (err.error === "incomplete_prior_step") {
+            return err.detail ?? messages.actions.incompletePriorStep;
+        }
+        return err.detail ?? err.error ?? messages.actions.actionFailed;
+    }, [messages]);
+    const doRerun = async (confirm) => {
+        setBusy("rerun");
+        setFeedback(null);
+        try {
+            const result = await api.rerunRun(run.id, { confirm });
+            if (result.ok) {
+                setFeedback({ kind: "info", message: messages.actions.rerunStarted });
+                onOpenRun?.(result.data.runId);
+                setConfirmOpen(false);
+            }
+            else if (result.error.error === "confirmation_required") {
+                setConfirmOpen(true);
+            }
+            else {
+                setFeedback({ kind: "error", message: explainError(result.error) });
+            }
+        }
+        finally {
+            setBusy(null);
+        }
+    };
+    const doResume = async () => {
+        setBusy("resume");
+        setFeedback(null);
+        try {
+            const result = await api.resumeRun(run.id);
+            if (result.ok) {
+                setFeedback({
+                    kind: "info",
+                    message: messages.actions.resumeStarted(result.data.resumeFromStep ?? ""),
+                });
+                onOpenRun?.(result.data.runId);
+            }
+            else {
+                setFeedback({ kind: "error", message: explainError(result.error) });
+            }
+        }
+        finally {
+            setBusy(null);
+        }
+    };
+    const canResume = run.status === "failed";
+    const isRunning = runHasLiveStatus(run);
+    return (_jsxs(Card, { children: [_jsxs(CardContent, { className: "flex flex-wrap items-center gap-2 pt-4", children: [_jsxs(Button, { variant: "default", size: "sm", onClick: () => void doRerun(false), disabled: busy !== null || isRunning, title: isRunning ? messages.actions.waitForCompletion : messages.actions.rerunDescription, children: [_jsx(RotateCw, { className: `mr-1.5 h-3.5 w-3.5 ${busy === "rerun" ? "animate-spin" : ""}` }), busy === "rerun" ? messages.actions.rerunBusy : messages.actions.rerun] }), _jsxs(Button, { variant: "secondary", size: "sm", onClick: () => void doResume(), disabled: busy !== null || !canResume, title: canResume ? messages.actions.resumeDescription : messages.actions.resumeUnavailable, children: [_jsx(Play, { className: `mr-1.5 h-3.5 w-3.5 ${busy === "resume" ? "animate-pulse" : ""}` }), busy === "resume" ? messages.actions.resumeBusy : messages.actions.resume] }), feedback ? (_jsx("span", { className: `ml-auto text-xs ${feedback.kind === "error" ? "text-destructive" : "text-muted-foreground"}`, children: feedback.message })) : null] }), confirmOpen ? (_jsx(ConfirmRerunDialog, { onCancel: () => setConfirmOpen(false), onConfirm: () => void doRerun(true), busy: busy === "rerun" })) : null] }));
+}
+function ConfirmRerunDialog({ onCancel, onConfirm, busy, }) {
+    const messages = useWorkflowRunsUiMessagesOrDefault();
+    return (_jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4", children: _jsxs(Card, { className: "w-full max-w-md border-amber-500/40", children: [_jsx(CardHeader, { className: "pb-3", children: _jsxs(CardTitle, { className: "flex items-center gap-2 text-base", children: [_jsx(AlertTriangle, { className: "h-4 w-4 text-amber-500" }), messages.actions.confirmTitle] }) }), _jsxs(CardContent, { className: "space-y-3 text-sm", children: [_jsx("p", { children: messages.actions.confirmBody }), _jsx("p", { className: "text-muted-foreground text-xs", children: messages.actions.confirmTip }), _jsxs("div", { className: "flex justify-end gap-2 pt-2", children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: onCancel, disabled: busy, children: messages.actions.cancel }), _jsxs(Button, { variant: "default", size: "sm", onClick: onConfirm, disabled: busy, children: [_jsx(RotateCw, { className: `mr-1.5 h-3.5 w-3.5 ${busy ? "animate-spin" : ""}` }), messages.actions.rerunAnyway] })] })] })] }) }));
+}

package/dist/components/workflow-run-detail-page.d.ts

@@ -0,0 +1,10 @@
+import type { WorkflowRunsApi } from "../types.js";
+export interface WorkflowRunDetailPageProps {
+    api: WorkflowRunsApi;
+    runId: string;
+    onOpenRun?: (id: string) => void;
+    pollIntervalMs?: number;
+    className?: string;
+}
+export declare function WorkflowRunDetailPage({ api, runId, onOpenRun, pollIntervalMs, className, }: WorkflowRunDetailPageProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=workflow-run-detail-page.d.ts.map

package/dist/components/workflow-run-detail-page.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"workflow-run-detail-page.d.ts","sourceRoot":"","sources":["../../src/components/workflow-run-detail-page.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAIV,eAAe,EAChB,MAAM,aAAa,CAAA;AAapB,MAAM,WAAW,0BAA0B;IACzC,GAAG,EAAE,eAAe,CAAA;IACpB,KAAK,EAAE,MAAM,CAAA;IACb,SAAS,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAChC,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,qBAAqB,CAAC,EACpC,GAAG,EACH,KAAK,EACL,SAAS,EACT,cAAqB,EACrB,SAAS,GACV,EAAE,0BAA0B,2CA6D5B"}

package/dist/components/workflow-run-detail-page.js

@@ -0,0 +1,96 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Badge } from "@voyantjs/ui/components/badge";
+import { Card, CardContent, CardHeader, CardTitle } from "@voyantjs/ui/components/card";
+import { ChevronDown, ChevronRight, Link2 } from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
+import { useWorkflowRunsUiMessagesOrDefault } from "../i18n/index.js";
+import { CopyableId, formatDuration, formatRelative, PayloadBlock, StatusBadge, StatusIcon, StepStatusIcon, TagChip, } from "./common.js";
+import { WorkflowRunActionsCard } from "./workflow-run-actions.js";
+export function WorkflowRunDetailPage({ api, runId, onOpenRun, pollIntervalMs = 3000, className, }) {
+    const messages = useWorkflowRunsUiMessagesOrDefault();
+    const [run, setRun] = useState(null);
+    const [steps, setSteps] = useState([]);
+    const [error, setError] = useState(null);
+    const [reruns, setReruns] = useState([]);
+    useEffect(() => {
+        let cancelled = false;
+        const refresh = async () => {
+            try {
+                const [detail, children] = await Promise.all([
+                    api.getRun(runId),
+                    api.listRuns({ parentRunId: runId, limit: 20 }).catch(() => ({ data: [] })),
+                ]);
+                if (cancelled)
+                    return;
+                setRun(detail.data.run);
+                setSteps(detail.data.steps);
+                setReruns(children.data);
+                setError(null);
+            }
+            catch (err) {
+                if (!cancelled)
+                    setError(err instanceof Error ? err.message : String(err));
+            }
+        };
+        void refresh();
+        const interval = setInterval(() => void refresh(), pollIntervalMs);
+        return () => {
+            cancelled = true;
+            clearInterval(interval);
+        };
+    }, [api, pollIntervalMs, runId]);
+    const duplicateRunError = useMemo(() => {
+        if (!run?.error)
+            return false;
+        return steps.some((step) => step.error?.message === run.error?.message);
+    }, [run?.error, steps]);
+    if (error)
+        return _jsx(ErrorMessage, { message: error });
+    if (!run) {
+        return (_jsx(Card, { className: className, children: _jsx(CardContent, { className: "pt-4 text-muted-foreground text-sm", children: messages.page.loading }) }));
+    }
+    return (_jsxs("div", { className: `space-y-4 ${className ?? ""}`, children: [_jsx(RunHeaderCard, { run: run, onOpenRun: onOpenRun }), _jsx(WorkflowRunActionsCard, { api: api, run: run, onOpenRun: onOpenRun }), reruns.length > 0 ? _jsx(RerunsListCard, { reruns: reruns, onOpenRun: onOpenRun }) : null, _jsx(StepsCard, { steps: steps }), run.input ? _jsx(PayloadCard, { title: messages.detail.input, value: run.input }) : null, run.result ? _jsx(PayloadCard, { title: messages.detail.result, value: run.result }) : null, run.error && !duplicateRunError ? (_jsx(ErrorCard, { title: messages.detail.runError, error: run.error })) : null] }));
+}
+function RunHeaderCard({ run, onOpenRun }) {
+    const messages = useWorkflowRunsUiMessagesOrDefault();
+    return (_jsxs(Card, { children: [_jsxs(CardHeader, { className: "space-y-3 pb-4", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [_jsx(StatusIcon, { status: run.status }), _jsx(CardTitle, { className: "font-semibold text-lg", children: run.workflowName }), _jsx(StatusBadge, { status: run.status, messages: messages }), run.durationMs != null ? (_jsx(Badge, { variant: "outline", className: "font-mono text-xs", children: formatDuration(run.durationMs) })) : null, run.resumeFromStep ? (_jsx(Badge, { variant: "outline", className: "font-mono text-xs", children: messages.detail.resumedAt(run.resumeFromStep) })) : null, _jsx(CopyableId, { id: run.id, copiedLabel: messages.detail.copied, className: "ml-auto" })] }), _jsxs("div", { className: "text-muted-foreground text-sm", children: [_jsxs("span", { children: [messages.detail.started, " ", new Date(run.startedAt).toLocaleString()] }), run.completedAt ? (_jsxs("span", { children: [" · ", messages.detail.finished, " ", new Date(run.completedAt).toLocaleString()] })) : null] })] }), _jsxs(CardContent, { className: "space-y-3 pt-0", children: [_jsxs("dl", { className: "grid grid-cols-1 gap-x-6 gap-y-2 text-sm sm:grid-cols-2", children: [_jsx(DefRow, { label: messages.detail.trigger, value: run.trigger, mono: true }), run.correlationId ? (_jsx(DefRow, { label: messages.detail.correlation, value: run.correlationId, mono: true })) : null, run.parentRunId ? (_jsx(LinkedRunRow, { label: messages.detail.parent, runId: run.parentRunId, onOpenRun: onOpenRun })) : null, run.triggeredByUserId ? (_jsx(DefRow, { label: messages.detail.triggeredBy, value: run.triggeredByUserId, mono: true })) : null] }), run.tags.length > 0 ? (_jsxs("div", { children: [_jsx("div", { className: "mb-1.5 text-muted-foreground text-xs uppercase tracking-wide", children: messages.detail.tags }), _jsx("div", { className: "flex flex-wrap gap-1", children: run.tags.map((tag) => (_jsx(TagChip, { tag: tag }, tag))) })] })) : null] })] }));
+}
+function LinkedRunRow({ label, runId, onOpenRun, }) {
+    return (_jsxs("div", { className: "flex items-baseline gap-2", children: [_jsx("dt", { className: "shrink-0 text-muted-foreground text-xs uppercase tracking-wide", children: label }), _jsx("dd", { className: "min-w-0 truncate", children: _jsxs("button", { type: "button", onClick: () => onOpenRun?.(runId), className: "inline-flex items-center gap-1.5 truncate font-mono text-xs hover:underline", title: runId, children: [_jsx(Link2, { className: "h-3 w-3 opacity-60" }), runId] }) })] }));
+}
+function DefRow({ label, value, mono }) {
+    return (_jsxs("div", { className: "flex items-baseline gap-2", children: [_jsx("dt", { className: "shrink-0 text-muted-foreground text-xs uppercase tracking-wide", children: label }), _jsx("dd", { className: mono ? "min-w-0 truncate font-mono text-xs" : "min-w-0 truncate text-sm" // i18n-literal-ok: CSS classes
+                , children: value })] }));
+}
+function RerunsListCard({ reruns, onOpenRun, }) {
+    const messages = useWorkflowRunsUiMessagesOrDefault();
+    return (_jsxs(Card, { children: [_jsx(CardHeader, { className: "pb-3", children: _jsxs(CardTitle, { className: "flex items-center gap-2 text-sm", children: [_jsx(Link2, { className: "h-3.5 w-3.5 text-muted-foreground" }), messages.detail.reruns, _jsx("span", { className: "font-normal text-muted-foreground text-xs", children: `(${reruns.length})` })] }) }), _jsx(CardContent, { children: _jsx("ul", { className: "space-y-1", children: reruns.map((run) => (_jsx("li", { children: _jsxs("button", { type: "button", onClick: () => onOpenRun?.(run.id), className: "flex w-full items-center gap-2 rounded p-2 text-left text-sm hover:bg-muted/40", children: [_jsx(StatusIcon, { status: run.status }), _jsx("span", { className: "font-mono text-xs", children: run.id }), _jsx("span", { className: "text-muted-foreground text-xs", children: run.trigger }), run.resumeFromStep ? (_jsx(Badge, { variant: "outline", className: "font-mono text-[10px]", children: messages.detail.resumedAt(run.resumeFromStep) })) : null, _jsx("span", { className: "ml-auto whitespace-nowrap text-muted-foreground text-xs", children: formatRelative(run.startedAt, messages) })] }) }, run.id))) }) })] }));
+}
+function StepsCard({ steps }) {
+    const messages = useWorkflowRunsUiMessagesOrDefault();
+    return (_jsxs(Card, { children: [_jsx(CardHeader, { className: "pb-3", children: _jsx(CardTitle, { className: "text-sm", children: messages.detail.steps }) }), _jsx(CardContent, { children: steps.length === 0 ? (_jsx("p", { className: "text-muted-foreground text-sm", children: messages.detail.noSteps })) : (_jsx("ol", { className: "space-y-2", children: steps.map((step) => (_jsx(StepRow, { step: step }, step.id))) })) })] }));
+}
+function StepRow({ step }) {
+    const messages = useWorkflowRunsUiMessagesOrDefault();
+    const [open, setOpen] = useState(step.status === "failed");
+    const hasDetail = step.output !== null || step.error !== null;
+    return (_jsxs("li", { className: "rounded-md border", children: [_jsxs("button", { type: "button", className: "flex w-full items-center gap-2 p-3 text-left text-sm hover:bg-muted/30", onClick: () => hasDetail && setOpen((prev) => !prev), disabled: !hasDetail, children: [_jsx(StepStatusIcon, { status: step.status }), _jsx("span", { className: "font-medium", children: `${step.sequence}. ${step.stepName}` }), step.error ? (_jsx("span", { className: "truncate text-destructive text-xs", children: step.error.message })) : null, _jsx("span", { className: "ml-auto whitespace-nowrap text-muted-foreground text-xs", children: step.durationMs != null
+                            ? formatDuration(step.durationMs)
+                            : messages.detail.durationUnavailable }), hasDetail ? (open ? (_jsx(ChevronDown, { className: "h-3.5 w-3.5 text-muted-foreground" })) : (_jsx(ChevronRight, { className: "h-3.5 w-3.5 text-muted-foreground" }))) : null] }), open && hasDetail ? (_jsxs("div", { className: "space-y-3 border-t p-3", children: [step.error ? _jsx(ErrorBlock, { error: step.error }) : null, step.output ? (_jsx(PayloadBlock, { title: messages.detail.output, value: step.output, messages: messages })) : null] })) : null] }));
+}
+function PayloadCard({ title, value }) {
+    const messages = useWorkflowRunsUiMessagesOrDefault();
+    return (_jsxs(Card, { children: [_jsx(CardHeader, { className: "pb-3", children: _jsx(CardTitle, { className: "text-sm", children: title }) }), _jsx(CardContent, { children: _jsx(PayloadBlock, { title: title, value: value, messages: messages, hideTitle: true }) })] }));
+}
+function ErrorCard({ title, error }) {
+    return (_jsxs(Card, { className: "border-destructive/40", children: [_jsx(CardHeader, { className: "pb-3", children: _jsx(CardTitle, { className: "text-destructive text-sm", children: title }) }), _jsx(CardContent, { children: _jsx(ErrorBlock, { error: error }) })] }));
+}
+function ErrorBlock({ error }) {
+    const messages = useWorkflowRunsUiMessagesOrDefault();
+    const [stackOpen, setStackOpen] = useState(false);
+    return (_jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "rounded border border-destructive/30 bg-destructive/5 p-3 text-sm", children: [_jsx("div", { className: "font-medium text-destructive", children: error.message }), error.code || error.stepName ? (_jsxs("div", { className: "mt-1 flex flex-wrap gap-2 text-muted-foreground text-xs", children: [error.code ? _jsx("span", { children: `${messages.detail.code} ${error.code}` }) : null, error.stepName ? _jsx("span", { children: `${messages.detail.step} ${error.stepName}` }) : null] })) : null] }), error.stack ? (_jsxs("details", { open: stackOpen, onToggle: (event) => setStackOpen(event.target.open), className: "rounded border bg-muted/30", children: [_jsxs("summary", { className: "flex cursor-pointer select-none items-center gap-1.5 px-3 py-2 text-muted-foreground text-xs hover:text-foreground", children: [stackOpen ? (_jsx(ChevronDown, { className: "h-3.5 w-3.5" })) : (_jsx(ChevronRight, { className: "h-3.5 w-3.5" })), messages.detail.stackTrace] }), _jsx("pre", { className: "overflow-x-auto whitespace-pre p-3 pt-0 font-mono text-[11px] leading-relaxed text-muted-foreground", children: error.stack })] })) : null] }));
+}
+function ErrorMessage({ message }) {
+    return (_jsx(Card, { className: "border-destructive/40", children: _jsx(CardContent, { className: "pt-4 text-destructive text-sm", children: message }) }));
+}

package/dist/components/workflow-runs-filters.d.ts

@@ -0,0 +1,32 @@
+import type { ListWorkflowRunsQuery, WorkflowRun, WorkflowRunStatus } from "../types.js";
+export declare const STATUS_OPTIONS: WorkflowRunStatus[];
+export declare const TIME_RANGES: readonly ["15m", "1h", "24h", "7d", "all"];
+export type TimeRange = (typeof TIME_RANGES)[number];
+export type WorkflowOption = {
+    name: string;
+    count: number;
+};
+export declare function WorkflowRunsFilters({ filters, workflowOptions, tagOptions, statusFilters, tagFilters, searchQuery, timeRange, onChange, onToggleStatus, onAddTagFilter, onRemoveTagFilter, onSearchChange, onTimeRangeChange, onClear, }: {
+    filters: ListWorkflowRunsQuery;
+    workflowOptions: WorkflowOption[];
+    tagOptions: string[];
+    statusFilters: WorkflowRunStatus[];
+    tagFilters: string[];
+    searchQuery: string;
+    timeRange: TimeRange;
+    onChange: (next: ListWorkflowRunsQuery) => void;
+    onToggleStatus: (status: WorkflowRunStatus) => void;
+    onAddTagFilter: (tag: string) => void;
+    onRemoveTagFilter: (tag: string) => void;
+    onSearchChange: (value: string) => void;
+    onTimeRangeChange: (value: TimeRange) => void;
+    onClear: () => void;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function buildFilterOptions(runs: WorkflowRun[], selectedWorkflow?: string): {
+    workflows: {
+        name: string;
+        count: number;
+    }[];
+    tags: string[];
+};
+//# sourceMappingURL=workflow-runs-filters.d.ts.map

package/dist/components/workflow-runs-filters.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"workflow-runs-filters.d.ts","sourceRoot":"","sources":["../../src/components/workflow-runs-filters.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAAE,qBAAqB,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAA;AAGxF,eAAO,MAAM,cAAc,EAAE,iBAAiB,EAAoD,CAAA;AAClG,eAAO,MAAM,WAAW,4CAA6C,CAAA;AAErE,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;AAEpD,MAAM,MAAM,cAAc,GAAG;IAC3B,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,wBAAgB,mBAAmB,CAAC,EAClC,OAAO,EACP,eAAe,EACf,UAAU,EACV,aAAa,EACb,UAAU,EACV,WAAW,EACX,SAAS,EACT,QAAQ,EACR,cAAc,EACd,cAAc,EACd,iBAAiB,EACjB,cAAc,EACd,iBAAiB,EACjB,OAAO,GACR,EAAE;IACD,OAAO,EAAE,qBAAqB,CAAA;IAC9B,eAAe,EAAE,cAAc,EAAE,CAAA;IACjC,UAAU,EAAE,MAAM,EAAE,CAAA;IACpB,aAAa,EAAE,iBAAiB,EAAE,CAAA;IAClC,UAAU,EAAE,MAAM,EAAE,CAAA;IACpB,WAAW,EAAE,MAAM,CAAA;IACnB,SAAS,EAAE,SAAS,CAAA;IACpB,QAAQ,EAAE,CAAC,IAAI,EAAE,qBAAqB,KAAK,IAAI,CAAA;IAC/C,cAAc,EAAE,CAAC,MAAM,EAAE,iBAAiB,KAAK,IAAI,CAAA;IACnD,cAAc,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAA;IACrC,iBAAiB,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAA;IACxC,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,iBAAiB,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAA;IAC7C,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB,2CA0GA;AAED,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,WAAW,EAAE,EAAE,gBAAgB,CAAC,EAAE,MAAM;;;;;;EAkBhF"}

package/dist/components/workflow-runs-filters.js

@@ -0,0 +1,97 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "@voyantjs/ui/components/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@voyantjs/ui/components/card";
+import { Combobox, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList, } from "@voyantjs/ui/components/combobox";
+import { Input } from "@voyantjs/ui/components/input";
+import { CheckCircle2, Clock, Search, X, XCircle } from "lucide-react";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useWorkflowRunsUiMessagesOrDefault } from "../i18n/index.js";
+import { TagChip } from "./common.js";
+export const STATUS_OPTIONS = ["running", "failed", "succeeded", "cancelled"];
+export const TIME_RANGES = ["15m", "1h", "24h", "7d", "all"];
+export function WorkflowRunsFilters({ filters, workflowOptions, tagOptions, statusFilters, tagFilters, searchQuery, timeRange, onChange, onToggleStatus, onAddTagFilter, onRemoveTagFilter, onSearchChange, onTimeRangeChange, onClear, }) {
+    const messages = useWorkflowRunsUiMessagesOrDefault();
+    const searchInputRef = useRef(null);
+    useEffect(() => {
+        const onKeyDown = (event) => {
+            if (!(event.metaKey || event.ctrlKey) || event.key.toLowerCase() !== "k")
+                return;
+            event.preventDefault();
+            searchInputRef.current?.focus();
+        };
+        globalThis.addEventListener("keydown", onKeyDown);
+        return () => globalThis.removeEventListener("keydown", onKeyDown);
+    }, []);
+    return (_jsxs(Card, { children: [_jsx(CardHeader, { className: "pb-3", children: _jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx(CardTitle, { className: "text-sm", children: messages.page.filterTitle }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: onClear, children: messages.page.clearFilters })] }) }), _jsxs(CardContent, { className: "space-y-4", children: [_jsx(Field, { label: messages.page.searchLabel, children: _jsxs("div", { className: "relative", children: [_jsx(Search, { className: "absolute top-1/2 left-2.5 h-4 w-4 -translate-y-1/2 text-muted-foreground" }), _jsx(Input, { ref: searchInputRef, className: "pl-8", placeholder: messages.page.searchPlaceholder, value: searchQuery, onChange: (event) => onSearchChange(event.target.value) })] }) }), _jsx(Field, { label: messages.page.workflowLabel, children: _jsx(WorkflowCombobox, { value: filters.workflowName ?? null, options: workflowOptions, placeholder: messages.page.workflowPlaceholder, emptyLabel: messages.page.workflowEmpty, onChange: (workflowName) => onChange({ ...filters, workflowName: workflowName ?? undefined }) }) }), _jsx(Field, { label: messages.page.statusLabel, children: _jsxs("div", { className: "flex flex-wrap gap-1.5", children: [_jsx(Button, { type: "button", variant: statusFilters.length === 0 ? "default" : "outline", size: "sm", onClick: () => {
+                                        for (const status of statusFilters)
+                                            onToggleStatus(status);
+                                    }, children: messages.page.anyStatus }), STATUS_OPTIONS.map((status) => (_jsxs(Button, { type: "button", variant: statusFilters.includes(status) ? "default" : "outline", size: "sm", onClick: () => onToggleStatus(status), "aria-pressed": statusFilters.includes(status), children: [_jsx(StatusGlyph, { status: status }), messages.status[status]] }, status)))] }) }), _jsx(Field, { label: messages.page.timeRangeLabel, children: _jsx("div", { className: "flex flex-wrap gap-1.5", children: TIME_RANGES.map((range) => (_jsx(Button, { type: "button", variant: timeRange === range ? "default" : "outline", size: "sm", onClick: () => onTimeRangeChange(range), "aria-pressed": timeRange === range, children: messages.page.timeRanges[range] }, range))) }) }), _jsx(Field, { label: messages.page.tagLabel, children: _jsx(TagFilterBuilder, { tagOptions: tagOptions, tagFilters: tagFilters, placeholder: messages.page.tagPlaceholder, emptyLabel: messages.page.tagEmpty, addLabel: messages.page.addTag, removeLabel: messages.page.removeTag, onAdd: onAddTagFilter, onRemove: onRemoveTagFilter }) })] })] }));
+}
+export function buildFilterOptions(runs, selectedWorkflow) {
+    const workflowCounts = new Map();
+    const tags = new Set();
+    for (const run of runs) {
+        workflowCounts.set(run.workflowName, (workflowCounts.get(run.workflowName) ?? 0) + 1);
+        for (const tag of run.tags)
+            tags.add(tag);
+    }
+    if (selectedWorkflow && !workflowCounts.has(selectedWorkflow)) {
+        workflowCounts.set(selectedWorkflow, 0);
+    }
+    return {
+        workflows: Array.from(workflowCounts.entries())
+            .map(([name, count]) => ({ name, count }))
+            .sort((a, b) => b.count - a.count || a.name.localeCompare(b.name)),
+        tags: Array.from(tags).sort((a, b) => a.localeCompare(b)),
+    };
+}
+function WorkflowCombobox({ value, options, placeholder, emptyLabel, onChange, }) {
+    const itemMap = useMemo(() => new Map(options.map((item) => [item.name, item])), [options]);
+    const selectedLabel = value ?? "";
+    const [inputValue, setInputValue] = useState(selectedLabel);
+    useEffect(() => {
+        setInputValue(selectedLabel);
+    }, [selectedLabel]);
+    return (_jsxs(Combobox, { items: options.map((item) => item.name), value: value, inputValue: inputValue, autoHighlight: true, itemToStringValue: (item) => String(item), onInputValueChange: (next) => {
+            setInputValue(next);
+            if (!next)
+                onChange(null);
+        }, onValueChange: (next) => {
+            const nextValue = next ?? null;
+            onChange(nextValue);
+            setInputValue(nextValue ?? "");
+        }, children: [_jsx(ComboboxInput, { placeholder: placeholder, showClear: !!value, className: "w-full" }), _jsxs(ComboboxContent, { children: [_jsx(ComboboxEmpty, { children: emptyLabel }), _jsx(ComboboxList, { children: _jsx(ComboboxCollection, { children: (name) => {
+                                const option = itemMap.get(String(name));
+                                if (!option)
+                                    return null;
+                                return (_jsx(ComboboxItem, { value: option.name, children: _jsxs("div", { className: "flex min-w-0 flex-1 items-center justify-between gap-3", children: [_jsx("span", { className: "truncate font-medium", children: option.name }), _jsx("span", { className: "text-muted-foreground text-xs", children: option.count })] }) }, option.name));
+                            } }) })] })] }));
+}
+function TagFilterBuilder({ tagOptions, tagFilters, placeholder, emptyLabel, addLabel, removeLabel, onAdd, onRemove, }) {
+    const [inputValue, setInputValue] = useState("");
+    const submit = () => {
+        const next = inputValue.trim();
+        if (!next)
+            return;
+        onAdd(next);
+        setInputValue("");
+    };
+    return (_jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "grid grid-cols-[1fr_auto] gap-2", children: [_jsxs(Combobox, { items: tagOptions, value: null, inputValue: inputValue, autoHighlight: true, itemToStringValue: (item) => String(item), onInputValueChange: setInputValue, onValueChange: (next) => {
+                            const tag = next ?? "";
+                            if (tag) {
+                                onAdd(tag);
+                                setInputValue("");
+                            }
+                        }, children: [_jsx(ComboboxInput, { placeholder: placeholder, className: "w-full" }), _jsxs(ComboboxContent, { children: [_jsx(ComboboxEmpty, { children: emptyLabel }), _jsx(ComboboxList, { children: _jsx(ComboboxCollection, { children: (tag) => (_jsx(ComboboxItem, { value: String(tag), children: _jsx(TagChip, { tag: String(tag) }) }, String(tag))) }) })] })] }), _jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: submit, children: addLabel })] }), tagFilters.length > 0 ? (_jsx("div", { className: "flex flex-wrap gap-1.5", children: tagFilters.map((tag) => (_jsxs("button", { type: "button", className: "inline-flex items-center gap-1 rounded-full border px-2 py-0.5 font-mono text-[10px] hover:bg-muted", onClick: () => onRemove(tag), "aria-label": `${removeLabel}: ${tag}`, children: [_jsx(TagChip, { tag: tag }), _jsx(X, { className: "h-3 w-3", "aria-hidden": "true" })] }, tag))) })) : null] }));
+}
+function Field({ label, children }) {
+    return (_jsxs("div", { className: "space-y-1", children: [_jsx("span", { className: "text-muted-foreground text-xs", children: label }), children] }));
+}
+function StatusGlyph({ status }) {
+    if (status === "succeeded")
+        return _jsx(CheckCircle2, { "data-icon": "inline-start", "aria-hidden": "true" });
+    if (status === "failed")
+        return _jsx(XCircle, { "data-icon": "inline-start", "aria-hidden": "true" });
+    return _jsx(Clock, { "data-icon": "inline-start", "aria-hidden": "true" });
+}

package/dist/components/workflow-runs-page.d.ts

@@ -0,0 +1,12 @@
+import type { ListWorkflowRunsQuery, WorkflowRunsApi } from "../types.js";
+export interface WorkflowRunsPageProps {
+    api: WorkflowRunsApi;
+    selectedRunId?: string | null;
+    onOpenRun?: (id: string) => void;
+    initialFilters?: ListWorkflowRunsQuery;
+    pollIntervalMs?: number;
+    className?: string;
+}
+export declare function WorkflowRunsPage({ api, selectedRunId, onOpenRun, initialFilters, pollIntervalMs, className, }: WorkflowRunsPageProps): import("react/jsx-runtime").JSX.Element;
+export declare function WorkflowRunsPageSkeleton(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=workflow-runs-page.d.ts.map

package/dist/components/workflow-runs-page.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"workflow-runs-page.d.ts","sourceRoot":"","sources":["../../src/components/workflow-runs-page.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EACV,qBAAqB,EAGrB,eAAe,EAChB,MAAM,aAAa,CAAA;AAKpB,MAAM,WAAW,qBAAqB;IACpC,GAAG,EAAE,eAAe,CAAA;IACpB,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC7B,SAAS,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAChC,cAAc,CAAC,EAAE,qBAAqB,CAAA;IACtC,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,GAAG,EACH,aAAa,EACb,SAAS,EACT,cAAc,EACd,cAAqB,EACrB,SAAS,GACV,EAAE,qBAAqB,2CAuKvB;AAED,wBAAgB,wBAAwB,4CAqBvC"}