@stigmer/react 0.5.0 → 1.0.0

package/workflow/WorkflowDashboard.d.ts

@@ -0,0 +1,35 @@
+import { type UseWorkflowDashboardSummaryOptions } from "./useWorkflowDashboardSummary";
+export interface WorkflowDashboardProps {
+    /** Organization slug for scoping the dashboard data. */
+    readonly org: string | null | undefined;
+    /** Time window for the summary statistics. */
+    readonly timeWindow?: UseWorkflowDashboardSummaryOptions["timeWindow"];
+    /** Called when the user clicks "Review" on a pending approval. */
+    readonly onApprovalClick?: (executionId: string) => void;
+    /** Called when the user clicks "View" on a failed execution. */
+    readonly onFailedRunClick?: (executionId: string) => void;
+    readonly className?: string;
+}
+/**
+ * Composed dashboard widget that aggregates execution KPIs,
+ * pending approvals, and recent failures into a responsive layout.
+ *
+ * Composes three sub-widgets:
+ * - **ExecutionSummaryWidget** — phase counts, cost, duration
+ * - **PendingApprovalsWidget** — human_input tasks awaiting decisions
+ * - **FailedRunsWidget** — recent failed executions (from existing list API)
+ *
+ * All data fetching is internal. The consumer provides org context and
+ * navigation callbacks.
+ *
+ * @example
+ * ```tsx
+ * <WorkflowDashboard
+ *   org="acme"
+ *   onApprovalClick={(id) => navigate(`/workflows/executions/${id}`)}
+ *   onFailedRunClick={(id) => navigate(`/workflows/executions/${id}`)}
+ * />
+ * ```
+ */
+export declare const WorkflowDashboard: import("react").NamedExoticComponent<WorkflowDashboardProps>;
+//# sourceMappingURL=WorkflowDashboard.d.ts.map

package/workflow/WorkflowDashboard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WorkflowDashboard.d.ts","sourceRoot":"","sources":["../../src/workflow/WorkflowDashboard.tsx"],"names":[],"mappings":"AASA,OAAO,EAEL,KAAK,kCAAkC,EACxC,MAAM,+BAA+B,CAAC;AAOvC,MAAM,WAAW,sBAAsB;IACrC,wDAAwD;IACxD,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IACxC,8CAA8C;IAC9C,QAAQ,CAAC,UAAU,CAAC,EAAE,kCAAkC,CAAC,YAAY,CAAC,CAAC;IACvE,kEAAkE;IAClE,QAAQ,CAAC,eAAe,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,gEAAgE;IAChE,QAAQ,CAAC,gBAAgB,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1D,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;CAC7B;AAID;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,iBAAiB,8DAqE5B,CAAC"}

package/workflow/WorkflowDashboard.js

@@ -0,0 +1,59 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useMemo } from "react";
+import { create } from "@bufbuild/protobuf";
+import { ExecutionPhase } from "@stigmer/protos/ai/stigmer/agentic/workflowexecution/v1/enum_pb";
+import { ListWorkflowExecutionsRequestSchema } from "@stigmer/protos/ai/stigmer/agentic/workflowexecution/v1/io_pb";
+import { cn } from "@stigmer/theme";
+import { useStigmer } from "../hooks";
+import { useFetch } from "../internal/useFetch";
+import { useWorkflowDashboardSummary, } from "./useWorkflowDashboardSummary";
+import { usePendingApprovals } from "./usePendingApprovals";
+import { ExecutionSummaryWidget } from "./ExecutionSummaryWidget";
+import { PendingApprovalsWidget } from "./PendingApprovalsWidget";
+import { FailedRunsWidget } from "./FailedRunsWidget";
+const FAILED_LIST_INITIAL = [];
+/**
+ * Composed dashboard widget that aggregates execution KPIs,
+ * pending approvals, and recent failures into a responsive layout.
+ *
+ * Composes three sub-widgets:
+ * - **ExecutionSummaryWidget** — phase counts, cost, duration
+ * - **PendingApprovalsWidget** — human_input tasks awaiting decisions
+ * - **FailedRunsWidget** — recent failed executions (from existing list API)
+ *
+ * All data fetching is internal. The consumer provides org context and
+ * navigation callbacks.
+ *
+ * @example
+ * ```tsx
+ * <WorkflowDashboard
+ *   org="acme"
+ *   onApprovalClick={(id) => navigate(`/workflows/executions/${id}`)}
+ *   onFailedRunClick={(id) => navigate(`/workflows/executions/${id}`)}
+ * />
+ * ```
+ */
+export const WorkflowDashboard = memo(function WorkflowDashboard({ org, timeWindow, onApprovalClick, onFailedRunClick, className, }) {
+    const stigmer = useStigmer();
+    const { summary, isLoading: summaryLoading } = useWorkflowDashboardSummary({
+        org,
+        timeWindow,
+        refetchInterval: 60_000,
+    });
+    const { approvals, totalCount: approvalCount, isLoading: approvalsLoading, } = usePendingApprovals({ org, refetchInterval: 30_000 });
+    const fetchFailedFn = useMemo(() => org
+        ? async () => {
+            const resp = await stigmer.workflowExecution.list(create(ListWorkflowExecutionsRequestSchema, {
+                pageSize: 5,
+                phase: ExecutionPhase.EXECUTION_FAILED,
+            }));
+            return [...resp.entries];
+        }
+        : null, [stigmer, org]);
+    const { data: failedRuns, isLoading: failedLoading } = useFetch(fetchFailedFn, [stigmer, org], FAILED_LIST_INITIAL, {
+        refetchInterval: 60_000,
+    });
+    return (_jsxs("section", { "aria-label": "Workflow dashboard", className: cn("space-y-6", className), children: [_jsx(ExecutionSummaryWidget, { summary: summary, isLoading: summaryLoading }), _jsxs("div", { className: "grid gap-6 lg:grid-cols-2", children: [_jsx(PendingApprovalsWidget, { approvals: approvals, totalCount: approvalCount, isLoading: approvalsLoading, onReviewClick: onApprovalClick }), _jsx(FailedRunsWidget, { executions: failedRuns, isLoading: failedLoading, onViewClick: onFailedRunClick })] })] }));
+});
+//# sourceMappingURL=WorkflowDashboard.js.map

package/workflow/WorkflowDashboard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WorkflowDashboard.js","sourceRoot":"","sources":["../../src/workflow/WorkflowDashboard.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAC5C,OAAO,EAAE,cAAc,EAAE,MAAM,iEAAiE,CAAC;AACjG,OAAO,EAAE,mCAAmC,EAAE,MAAM,+DAA+D,CAAC;AACpH,OAAO,EAAE,EAAE,EAAE,MAAM,gBAAgB,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,OAAO,EACL,2BAA2B,GAE5B,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAetD,MAAM,mBAAmB,GAAiC,EAAE,CAAC;AAE7D;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,IAAI,CAAC,SAAS,iBAAiB,CAAC,EAC/D,GAAG,EACH,UAAU,EACV,eAAe,EACf,gBAAgB,EAChB,SAAS,GACc;IACvB,MAAM,OAAO,GAAG,UAAU,EAAE,CAAC;IAE7B,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,GAC1C,2BAA2B,CAAC;QAC1B,GAAG;QACH,UAAU;QACV,eAAe,EAAE,MAAM;KACxB,CAAC,CAAC;IAEL,MAAM,EACJ,SAAS,EACT,UAAU,EAAE,aAAa,EACzB,SAAS,EAAE,gBAAgB,GAC5B,GAAG,mBAAmB,CAAC,EAAE,GAAG,EAAE,eAAe,EAAE,MAAM,EAAE,CAAC,CAAC;IAE1D,MAAM,aAAa,GAAG,OAAO,CAC3B,GAAG,EAAE,CACH,GAAG;QACD,CAAC,CAAC,KAAK,IAAI,EAAE;YACT,MAAM,IAAI,GAAG,MAAM,OAAO,CAAC,iBAAiB,CAAC,IAAI,CAC/C,MAAM,CAAC,mCAAmC,EAAE;gBAC1C,QAAQ,EAAE,CAAC;gBACX,KAAK,EAAE,cAAc,CAAC,gBAAgB;aACvC,CAAC,CACH,CAAC;YACF,OAAO,CAAC,GAAG,IAAI,CAAC,OAAO,CAAiC,CAAC;QAC3D,CAAC;QACH,CAAC,CAAC,IAAI,EACV,CAAC,OAAO,EAAE,GAAG,CAAC,CACf,CAAC;IAEF,MAAM,EAAE,IAAI,EAAE,UAAU,EAAE,SAAS,EAAE,aAAa,EAAE,GAAG,QAAQ,CAE7D,aAAa,EAAE,CAAC,OAAO,EAAE,GAAG,CAAC,EAAE,mBAAmB,EAAE;QACpD,eAAe,EAAE,MAAM;KACxB,CAAC,CAAC;IAEH,OAAO,CACL,iCACa,oBAAoB,EAC/B,SAAS,EAAE,EAAE,CAAC,WAAW,EAAE,SAAS,CAAC,aAErC,KAAC,sBAAsB,IACrB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,cAAc,GACzB,EAEF,eAAK,SAAS,EAAC,2BAA2B,aACxC,KAAC,sBAAsB,IACrB,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,aAAa,EACzB,SAAS,EAAE,gBAAgB,EAC3B,aAAa,EAAE,eAAe,GAC9B,EACF,KAAC,gBAAgB,IACf,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,aAAa,EACxB,WAAW,EAAE,gBAAgB,GAC7B,IACE,IACE,CACX,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/workflow/WorkflowDetailView.d.ts

@@ -0,0 +1,63 @@
+import type { AdditionalTab, DetailAction } from "../resource-detail/types";
+/** Props for {@link WorkflowDetailView}. */
+export interface WorkflowDetailViewProps {
+    /** Organization slug that owns the workflow. */
+    readonly org: string;
+    /** Workflow slug (URL-friendly identifier unique within the org). */
+    readonly slug: string;
+    /**
+     * Called once when the workflow resource has been fetched successfully.
+     * Provides the resource display name for breadcrumbs, document titles, etc.
+     */
+    readonly onResourceLoad?: (meta: {
+        name: string;
+        id: string;
+    }) => void;
+    /**
+     * Primary action rendered as a visible button in the header area.
+     */
+    readonly primaryAction?: DetailAction;
+    /**
+     * Secondary actions rendered in the kebab overflow menu.
+     */
+    readonly actions?: readonly DetailAction[];
+    /**
+     * Additional tabs to render alongside the built-in tabs.
+     */
+    readonly additionalTabs?: readonly AdditionalTab[];
+    /** Controlled active tab ID. */
+    readonly activeTab?: string;
+    /** Controlled tab change handler. */
+    readonly onTabChange?: (tabId: string) => void;
+    /** Default active tab ID when in uncontrolled mode. @default "overview" */
+    readonly defaultTab?: string;
+    /**
+     * Called when a user clicks an execution row in the Executions tab.
+     * Receives the execution ID — use for navigation to the execution viewer.
+     */
+    readonly onExecutionClick?: (executionId: string) => void;
+    /** Additional CSS classes for the root container. */
+    readonly className?: string;
+}
+/**
+ * Operational detail hub for a Workflow blueprint.
+ *
+ * Fetches the workflow via {@link useWorkflow} internally and renders
+ * its full specification inside a {@link ResourceDetailShell}:
+ *
+ * - **Overview**: Description, document metadata, budget summary, env vars
+ * - **Tasks**: Task list with kind icons and sequential flow
+ * - **Instances**: Environment-bound deployments (embedded, not standalone)
+ * - **Executions**: Recent executions with phase badges and timing
+ *
+ * Handles loading, error, and not-found states automatically.
+ * Zero Console dependencies — safe for platform builder embedding.
+ * All visual properties flow through `--stgm-*` design tokens.
+ *
+ * @example
+ * ```tsx
+ * <WorkflowDetailView org="acme" slug="onboard-user" />
+ * ```
+ */
+export declare function WorkflowDetailView({ org, slug, onResourceLoad, primaryAction, actions, additionalTabs, activeTab, onTabChange, defaultTab, onExecutionClick, className, }: WorkflowDetailViewProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=WorkflowDetailView.d.ts.map

package/workflow/WorkflowDetailView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WorkflowDetailView.d.ts","sourceRoot":"","sources":["../../src/workflow/WorkflowDetailView.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,aAAa,EAAE,YAAY,EAAsB,MAAM,0BAA0B,CAAC;AAQhG,4CAA4C;AAC5C,MAAM,WAAW,uBAAuB;IACtC,gDAAgD;IAChD,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,qEAAqE;IACrE,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,QAAQ,CAAC,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACvE;;OAEG;IACH,QAAQ,CAAC,aAAa,CAAC,EAAE,YAAY,CAAC;IACtC;;OAEG;IACH,QAAQ,CAAC,OAAO,CAAC,EAAE,SAAS,YAAY,EAAE,CAAC;IAC3C;;OAEG;IACH,QAAQ,CAAC,cAAc,CAAC,EAAE,SAAS,aAAa,EAAE,CAAC;IACnD,gCAAgC;IAChC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B,qCAAqC;IACrC,QAAQ,CAAC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,2EAA2E;IAC3E,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAC7B;;;OAGG;IACH,QAAQ,CAAC,gBAAgB,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1D,qDAAqD;IACrD,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,GAAG,EACH,IAAI,EACJ,cAAc,EACd,aAAa,EACb,OAAO,EACP,cAAc,EACd,SAAS,EACT,WAAW,EACX,UAAU,EACV,gBAAgB,EAChB,SAAS,GACV,EAAE,uBAAuB,2CAqFzB"}

package/workflow/WorkflowDetailView.js

@@ -0,0 +1,202 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef } from "react";
+import { cn } from "@stigmer/theme";
+import { timestampDate } from "@bufbuild/protobuf/wkt";
+import { ValidationState } from "@stigmer/protos/ai/stigmer/agentic/workflow/v1/serverless/validation_pb";
+import { useWorkflow } from "./useWorkflow";
+import { useWorkflowInstances } from "./useWorkflowInstances";
+import { useWorkflowExecutionList } from "./useWorkflowExecutionList";
+import { WorkflowTaskList } from "./WorkflowTaskList";
+import { WorkflowExecutionPhaseBadge } from "./WorkflowExecutionPhaseBadge";
+import { ErrorMessage } from "../error/ErrorMessage";
+import { ResourceDetailShell } from "../resource-detail/ResourceDetailShell";
+import { Section } from "../resource-detail/Section";
+import { useDetailTabs } from "../resource-detail/useDetailTabs";
+const OVERVIEW_TAB = { id: "overview", label: "Overview" };
+const TASKS_TAB = { id: "tasks", label: "Tasks" };
+const INSTANCES_TAB = { id: "instances", label: "Instances" };
+const EXECUTIONS_TAB = { id: "executions", label: "Executions" };
+/**
+ * Operational detail hub for a Workflow blueprint.
+ *
+ * Fetches the workflow via {@link useWorkflow} internally and renders
+ * its full specification inside a {@link ResourceDetailShell}:
+ *
+ * - **Overview**: Description, document metadata, budget summary, env vars
+ * - **Tasks**: Task list with kind icons and sequential flow
+ * - **Instances**: Environment-bound deployments (embedded, not standalone)
+ * - **Executions**: Recent executions with phase badges and timing
+ *
+ * Handles loading, error, and not-found states automatically.
+ * Zero Console dependencies — safe for platform builder embedding.
+ * All visual properties flow through `--stgm-*` design tokens.
+ *
+ * @example
+ * ```tsx
+ * <WorkflowDetailView org="acme" slug="onboard-user" />
+ * ```
+ */
+export function WorkflowDetailView({ org, slug, onResourceLoad, primaryAction, actions, additionalTabs, activeTab, onTabChange, defaultTab, onExecutionClick, className, }) {
+    const { workflow, isLoading, error, refetch } = useWorkflow(org, slug);
+    const builtInTabs = useMemo(() => [OVERVIEW_TAB, TASKS_TAB, INSTANCES_TAB, EXECUTIONS_TAB], []);
+    const { effectiveTabs, effectiveActiveTab, effectiveOnTabChange, activeAdditionalTab, } = useDetailTabs({
+        builtInTabs,
+        additionalTabs,
+        activeTab,
+        onTabChange,
+        defaultTab,
+    });
+    const onResourceLoadRef = useRef(onResourceLoad);
+    onResourceLoadRef.current = onResourceLoad;
+    useEffect(() => {
+        if (workflow?.metadata?.name) {
+            onResourceLoadRef.current?.({
+                name: workflow.metadata.name,
+                id: workflow.metadata.id,
+            });
+        }
+    }, [workflow]);
+    if (isLoading)
+        return _jsx(LoadingSkeleton, { className: className });
+    if (error)
+        return _jsx(ErrorMessage, { error: error, retry: refetch, className: className });
+    if (!workflow)
+        return _jsx(NotFoundState, { className: className });
+    const meta = workflow.metadata;
+    const spec = workflow.spec;
+    const specAudit = workflow.status?.audit?.specAudit;
+    const headerMeta = {
+        name: meta?.name || meta?.slug || "Untitled",
+        id: meta?.id || "",
+        org: meta?.org,
+        slug: meta?.slug,
+        description: spec?.description,
+        createdAt: specAudit?.createdAt ? timestampDate(specAudit.createdAt) : null,
+        updatedAt: specAudit?.updatedAt ? timestampDate(specAudit.updatedAt) : null,
+    };
+    const validationState = workflow.status?.serverlessWorkflowValidation?.state;
+    const headerMetaExtra = validationState ? (_jsx(ValidationIndicator, { state: validationState })) : undefined;
+    let tabContent;
+    if (activeAdditionalTab) {
+        tabContent = activeAdditionalTab.content;
+    }
+    else if (effectiveActiveTab === "tasks") {
+        tabContent = _jsx(TasksTab, { tasks: spec?.tasks ?? [] });
+    }
+    else if (effectiveActiveTab === "instances") {
+        tabContent = _jsx(InstancesTab, { workflowId: meta?.id });
+    }
+    else if (effectiveActiveTab === "executions") {
+        tabContent = _jsx(ExecutionsTab, { workflowId: meta?.id, onExecutionClick: onExecutionClick });
+    }
+    else {
+        tabContent = _jsx(OverviewTab, { workflow: workflow });
+    }
+    return (_jsx(ResourceDetailShell, { header: headerMeta, headerMetaExtra: headerMetaExtra, primaryAction: primaryAction, actions: actions, tabs: effectiveTabs, activeTab: effectiveActiveTab, onTabChange: effectiveOnTabChange, tabsAriaLabel: "Workflow detail tabs", className: className, children: tabContent }));
+}
+// ---------------------------------------------------------------------------
+// Tab content components
+// ---------------------------------------------------------------------------
+function OverviewTab({ workflow }) {
+    const spec = workflow.spec;
+    const doc = spec?.document;
+    const budget = spec?.budget;
+    const envEntries = spec?.env ? Object.entries(spec.env) : [];
+    return (_jsxs("div", { className: "flex flex-col gap-6", children: [doc && (_jsx(Section, { title: "Document", children: _jsxs("div", { className: "divide-y divide-border", children: [_jsx(MetadataRow, { label: "DSL Version", value: doc.dsl }), _jsx(MetadataRow, { label: "Namespace", value: doc.namespace }), _jsx(MetadataRow, { label: "Name", value: doc.name }), _jsx(MetadataRow, { label: "Version", value: doc.version }), doc.description && (_jsx(MetadataRow, { label: "Description", value: doc.description }))] }) })), budget && hasBudget(budget) && (_jsx(Section, { title: "Budget", children: _jsxs("div", { className: "divide-y divide-border", children: [budget.maxCostMicros > 0 && (_jsx(MetadataRow, { label: "Max Cost", value: `$${(Number(budget.maxCostMicros) / 1_000_000).toFixed(2)}` })), budget.maxTotalTokens > 0 && (_jsx(MetadataRow, { label: "Max Tokens", value: Number(budget.maxTotalTokens).toLocaleString() })), budget.maxDurationSeconds > 0 && (_jsx(MetadataRow, { label: "Max Duration", value: formatDuration(budget.maxDurationSeconds) }))] }) })), envEntries.length > 0 && (_jsx(Section, { title: "Environment Variables", count: envEntries.length, children: _jsx("div", { className: "divide-y divide-border", children: envEntries.map(([key, decl]) => (_jsxs("div", { className: "flex items-center gap-3 px-4 py-2.5", children: [_jsx("code", { className: "shrink-0 text-xs font-medium text-foreground", children: key }), !decl.optional && (_jsx("span", { className: "shrink-0 rounded bg-destructive/10 px-1 py-0.5 text-[10px] font-medium text-destructive", children: "required" })), decl.description && (_jsx("span", { className: "truncate text-xs text-muted-foreground", children: decl.description }))] }, key))) }) })), _jsx(Section, { title: "Tasks", count: spec?.tasks?.length, children: _jsx("div", { className: "p-4", children: _jsx(WorkflowTaskList, { tasks: spec?.tasks ?? [] }) }) })] }));
+}
+function TasksTab({ tasks, }) {
+    return (_jsx("div", { className: "rounded-lg border border-border p-4", children: _jsx(WorkflowTaskList, { tasks: tasks }) }));
+}
+function InstancesTab({ workflowId }) {
+    const { instances, isLoading, error } = useWorkflowInstances(workflowId);
+    if (isLoading) {
+        return _jsx(TabLoadingSkeleton, {});
+    }
+    if (error) {
+        return (_jsx("div", { className: "py-8 text-center text-sm text-destructive", children: "Failed to load instances" }));
+    }
+    if (instances.length === 0) {
+        return (_jsx("div", { className: "py-8 text-center text-sm text-muted-foreground", children: "No instances found. A default instance is created automatically with each workflow." }));
+    }
+    return (_jsx("div", { className: "overflow-hidden rounded-lg border border-border", children: _jsxs("table", { className: "w-full text-sm", children: [_jsx("thead", { children: _jsxs("tr", { className: "border-b border-border bg-muted/50", children: [_jsx("th", { className: "px-4 py-2 text-left font-medium text-muted-foreground", children: "Name" }), _jsx("th", { className: "px-4 py-2 text-left font-medium text-muted-foreground", children: "ID" })] }) }), _jsx("tbody", { className: "divide-y divide-border", children: instances.map((inst) => (_jsxs("tr", { className: "hover:bg-muted/30 transition-colors", children: [_jsx("td", { className: "px-4 py-2.5 font-medium text-foreground", children: inst.metadata?.name || inst.metadata?.slug || "—" }), _jsx("td", { className: "px-4 py-2.5", children: _jsx("code", { className: "text-xs text-muted-foreground", children: inst.metadata?.id || "—" }) })] }, inst.metadata?.id))) })] }) }));
+}
+function ExecutionsTab({ workflowId, onExecutionClick, }) {
+    const { executions, isLoading, error } = useWorkflowExecutionList({
+        workflowId,
+        pageSize: 10,
+    });
+    if (isLoading) {
+        return _jsx(TabLoadingSkeleton, {});
+    }
+    if (error) {
+        return (_jsx("div", { className: "py-8 text-center text-sm text-destructive", children: "Failed to load executions" }));
+    }
+    if (executions.length === 0) {
+        return (_jsx("div", { className: "py-8 text-center text-sm text-muted-foreground", children: "No executions yet" }));
+    }
+    return (_jsx("div", { className: "overflow-hidden rounded-lg border border-border", children: _jsxs("table", { className: "w-full text-sm", children: [_jsx("thead", { children: _jsxs("tr", { className: "border-b border-border bg-muted/50", children: [_jsx("th", { className: "px-4 py-2 text-left font-medium text-muted-foreground", children: "Name" }), _jsx("th", { className: "px-4 py-2 text-left font-medium text-muted-foreground", children: "Phase" }), _jsx("th", { className: "px-4 py-2 text-left font-medium text-muted-foreground", children: "Started" })] }) }), _jsx("tbody", { className: "divide-y divide-border", children: executions.map((exec) => {
+                        const execId = exec.metadata?.id;
+                        const startedAt = exec.status?.audit?.specAudit?.createdAt;
+                        const clickable = !!onExecutionClick && !!execId;
+                        return (_jsxs("tr", { onClick: clickable ? () => onExecutionClick(execId) : undefined, role: clickable ? "link" : undefined, tabIndex: clickable ? 0 : undefined, onKeyDown: clickable
+                                ? (e) => {
+                                    if (e.key === "Enter" || e.key === " ") {
+                                        e.preventDefault();
+                                        onExecutionClick(execId);
+                                    }
+                                }
+                                : undefined, className: cn("transition-colors hover:bg-muted/30", clickable && "cursor-pointer"), children: [_jsx("td", { className: "px-4 py-2.5 font-medium text-foreground", children: exec.metadata?.name || exec.metadata?.slug || "—" }), _jsx("td", { className: "px-4 py-2.5", children: exec.status?.phase != null ? (_jsx(WorkflowExecutionPhaseBadge, { phase: exec.status.phase })) : (_jsx("span", { className: "text-xs text-muted-foreground", children: "\u2014" })) }), _jsx("td", { className: "px-4 py-2.5 text-xs text-muted-foreground", children: startedAt ? timestampDate(startedAt).toLocaleString() : "—" })] }, execId));
+                    }) })] }) }));
+}
+// ---------------------------------------------------------------------------
+// Validation indicator
+// ---------------------------------------------------------------------------
+function ValidationIndicator({ state }) {
+    const config = VALIDATION_STATE_CONFIG[state];
+    if (!config)
+        return null;
+    return (_jsxs(_Fragment, { children: [_jsx(Dot, {}), _jsx("span", { className: cn("text-xs", config.colorClass), children: config.label })] }));
+}
+const VALIDATION_STATE_CONFIG = {
+    [ValidationState.VALID]: { label: "Valid", colorClass: "text-success" },
+    [ValidationState.INVALID]: { label: "Invalid", colorClass: "text-destructive" },
+    [ValidationState.PENDING]: { label: "Validating…", colorClass: "text-muted-foreground" },
+    [ValidationState.FAILED]: { label: "Validation Error", colorClass: "text-destructive" },
+};
+// ---------------------------------------------------------------------------
+// Shared utilities
+// ---------------------------------------------------------------------------
+function MetadataRow({ label, value, }) {
+    return (_jsxs("div", { className: "flex items-center gap-3 px-4 py-2.5", children: [_jsx("span", { className: "w-28 shrink-0 text-xs text-muted-foreground", children: label }), _jsx("span", { className: "text-sm text-foreground", children: value })] }));
+}
+function Dot() {
+    return (_jsx("span", { className: "shrink-0", "aria-hidden": "true", children: "\u00B7" }));
+}
+function hasBudget(budget) {
+    return (Number(budget.maxCostMicros ?? 0) > 0 ||
+        Number(budget.maxTotalTokens ?? 0) > 0 ||
+        (budget.maxDurationSeconds ?? 0) > 0);
+}
+function formatDuration(seconds) {
+    if (seconds < 60)
+        return `${seconds}s`;
+    if (seconds < 3600)
+        return `${Math.floor(seconds / 60)}m`;
+    const hours = Math.floor(seconds / 3600);
+    const mins = Math.floor((seconds % 3600) / 60);
+    return mins > 0 ? `${hours}h ${mins}m` : `${hours}h`;
+}
+// ---------------------------------------------------------------------------
+// Loading & empty states
+// ---------------------------------------------------------------------------
+function LoadingSkeleton({ className }) {
+    return (_jsxs("div", { className: cn("flex flex-col gap-6", className), children: [_jsx("div", { className: "flex items-start gap-3", children: _jsx("div", { className: "h-8 w-48 animate-pulse rounded bg-muted" }) }), _jsx("div", { className: "h-40 animate-pulse rounded-lg bg-muted" }), _jsx("div", { className: "h-28 animate-pulse rounded-lg bg-muted" })] }));
+}
+function TabLoadingSkeleton() {
+    return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("div", { className: "h-8 w-full animate-pulse rounded bg-muted" }), _jsx("div", { className: "h-8 w-full animate-pulse rounded bg-muted" }), _jsx("div", { className: "h-8 w-3/4 animate-pulse rounded bg-muted" })] }));
+}
+function NotFoundState({ className }) {
+    return (_jsx("div", { className: cn("flex flex-col items-center justify-center py-16", className), children: _jsx("p", { className: "text-sm text-muted-foreground", children: "Workflow not found" }) }));
+}
+//# sourceMappingURL=WorkflowDetailView.js.map

package/workflow/WorkflowDetailView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WorkflowDetailView.js","sourceRoot":"","sources":["../../src/workflow/WorkflowDetailView.tsx"],"names":[],"mappings":"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"}

package/workflow/WorkflowEditorView.d.ts

@@ -0,0 +1,43 @@
+/** Props for {@link WorkflowEditorView}. */
+export interface WorkflowEditorViewProps {
+    /** The initial YAML content to load into the editor. */
+    readonly initialYaml: string;
+    /** Organization slug for the save path. */
+    readonly org: string;
+    /** Called after a successful save. */
+    readonly onSaveSuccess?: () => void;
+    /** Called when a save fails. */
+    readonly onSaveError?: (error: Error) => void;
+    /** Initial editor mode. Defaults to `"code"`. */
+    readonly defaultMode?: WorkflowEditorMode;
+    /** Additional CSS class names for the root container. */
+    readonly className?: string;
+}
+/**
+ * Composed workflow YAML editor with live topology graph preview.
+ *
+ * Renders a side-by-side layout: schema-aware YAML editor on the left,
+ * read-only DAG preview on the right. Includes a toolbar with
+ * validation summary, save button, dirty indicator, and full-page toggle.
+ *
+ * Composes {@link useWorkflowEditor} internally — the caller only needs
+ * to provide the initial YAML and org slug.
+ *
+ * Zero Console dependencies (DD-004). All visual properties flow through
+ * `--stgm-*` design tokens.
+ *
+ * @example
+ * ```tsx
+ * <WorkflowEditorView
+ *   initialYaml={yaml}
+ *   org="acme"
+ *   onSaveSuccess={() => toast.success("Workflow saved")}
+ * />
+ * ```
+ *
+ * @since T10 (YAML Editor with Graph Preview)
+ */
+/** Editing mode for the workflow editor. */
+export type WorkflowEditorMode = "code" | "visual";
+export declare const WorkflowEditorView: import("react").NamedExoticComponent<WorkflowEditorViewProps>;
+//# sourceMappingURL=WorkflowEditorView.d.ts.map

package/workflow/WorkflowEditorView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WorkflowEditorView.d.ts","sourceRoot":"","sources":["../../src/workflow/WorkflowEditorView.tsx"],"names":[],"mappings":"AAWA,4CAA4C;AAC5C,MAAM,WAAW,uBAAuB;IACtC,wDAAwD;IACxD,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;IAC7B,2CAA2C;IAC3C,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,sCAAsC;IACtC,QAAQ,CAAC,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IACpC,gCAAgC;IAChC,QAAQ,CAAC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IAC9C,iDAAiD;IACjD,QAAQ,CAAC,WAAW,CAAC,EAAE,kBAAkB,CAAC;IAC1C,yDAAyD;IACzD,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,4CAA4C;AAC5C,MAAM,MAAM,kBAAkB,GAAG,MAAM,GAAG,QAAQ,CAAC;AAEnD,eAAO,MAAM,kBAAkB,+DA2R7B,CAAC"}

package/workflow/WorkflowEditorView.js

@@ -0,0 +1,165 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { memo, useCallback, useMemo, useState } from "react";
+import { cn } from "@stigmer/theme";
+import { useWorkflowEditor } from "./useWorkflowEditor";
+import { WorkflowYamlEditor } from "./WorkflowYamlEditor";
+import { WorkflowTopologyGraph } from "./WorkflowTopologyGraph";
+import { WorkflowCanvasEditor } from "./WorkflowCanvasEditor";
+import { WorkflowRefinePanel } from "./WorkflowRefinePanel";
+import { yamlToGraph } from "./workflow-graph-conversions";
+export const WorkflowEditorView = memo(function WorkflowEditorView({ initialYaml, org, onSaveSuccess, onSaveError, defaultMode = "code", className, }) {
+    const editor = useWorkflowEditor(initialYaml, { org });
+    const [isFullPage, setIsFullPage] = useState(false);
+    const [mode, setMode] = useState(defaultMode);
+    const [showModeWarning, setShowModeWarning] = useState(false);
+    const [canvasIsSaving, setCanvasIsSaving] = useState(false);
+    const [showRefinePanel, setShowRefinePanel] = useState(false);
+    // Track canvas dirty state separately for mode switch prompts
+    const [canvasDirty, setCanvasDirty] = useState(false);
+    const [showDirtyPrompt, setShowDirtyPrompt] = useState(false);
+    const handleSave = useCallback(async () => {
+        const success = await editor.save();
+        if (success) {
+            onSaveSuccess?.();
+        }
+        else if (editor.saveError) {
+            onSaveError?.(editor.saveError);
+        }
+    }, [editor, onSaveSuccess, onSaveError]);
+    const toggleFullPage = useCallback(() => {
+        setIsFullPage((prev) => !prev);
+    }, []);
+    // -------------------------------------------------------------------------
+    // Mode switching (AD-T15-B3-003)
+    // -------------------------------------------------------------------------
+    const handleSwitchToVisual = useCallback(() => {
+        try {
+            yamlToGraph(editor.yaml);
+            setShowModeWarning(true);
+        }
+        catch {
+            onSaveError?.(new Error("Cannot switch to visual mode: the current YAML has structural errors that prevent parsing."));
+        }
+    }, [editor.yaml, onSaveError]);
+    const confirmSwitchToVisual = useCallback(() => {
+        setShowModeWarning(false);
+        setMode("visual");
+    }, []);
+    const cancelSwitchToVisual = useCallback(() => {
+        setShowModeWarning(false);
+    }, []);
+    const handleSwitchToCode = useCallback(() => {
+        if (canvasDirty) {
+            setShowDirtyPrompt(true);
+            return;
+        }
+        setMode("code");
+    }, [canvasDirty]);
+    const confirmDiscardAndSwitchToCode = useCallback(() => {
+        setShowDirtyPrompt(false);
+        setMode("code");
+        setCanvasDirty(false);
+    }, []);
+    const cancelSwitchToCode = useCallback(() => {
+        setShowDirtyPrompt(false);
+    }, []);
+    // Canvas save handler (AD-T15-B3-002: save via YAML)
+    const handleCanvasSave = useCallback(async (yamlStr) => {
+        setCanvasIsSaving(true);
+        editor.setYaml(yamlStr);
+        // Allow React to propagate the YAML before saving
+        setTimeout(async () => {
+            const success = await editor.save();
+            setCanvasIsSaving(false);
+            setCanvasDirty(false);
+            if (success) {
+                onSaveSuccess?.();
+            }
+            else if (editor.saveError) {
+                onSaveError?.(editor.saveError);
+            }
+        }, 0);
+    }, [editor, onSaveSuccess, onSaveError]);
+    const toggleRefinePanel = useCallback(() => {
+        setShowRefinePanel((prev) => !prev);
+    }, []);
+    const handleRefineAccept = useCallback((updatedYaml) => {
+        editor.setYaml(updatedYaml);
+        if (mode === "visual") {
+            try {
+                yamlToGraph(updatedYaml);
+            }
+            catch {
+                // Canvas will re-parse on next render
+            }
+        }
+    }, [editor, mode]);
+    // Validation error mapping for canvas mode
+    const nodeErrors = useMemo(() => {
+        if (mode !== "visual")
+            return new Map();
+        const errorMap = new Map();
+        for (const diag of editor.diagnostics) {
+            if (diag.severity !== "error")
+                continue;
+            const match = diag.message.match(/task\s+"([^"]+)"/i) ??
+                diag.message.match(/task\s+(\S+)/i);
+            if (match) {
+                const taskName = match[1];
+                const existing = errorMap.get(taskName);
+                if (existing) {
+                    existing.push(diag.message);
+                }
+                else {
+                    errorMap.set(taskName, [diag.message]);
+                }
+            }
+        }
+        return errorMap;
+    }, [mode, editor.diagnostics]);
+    const rootClassName = cn("stgm-workflow-editor flex flex-col", isFullPage && "fixed inset-0 z-50 bg-background", !isFullPage && "h-full", className);
+    return (_jsxs("div", { className: rootClassName, children: [_jsxs("div", { className: "flex items-center justify-between border-b border-border px-3 py-2", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(ModeToggle, { mode: mode, onSwitchToCode: handleSwitchToCode, onSwitchToVisual: handleSwitchToVisual }), _jsx("div", { className: "mx-1 h-4 w-px bg-[var(--stgm-border,#d4d4d8)]", "aria-hidden": "true" }), _jsxs("button", { type: "button", onClick: toggleRefinePanel, className: cn("inline-flex items-center gap-1 rounded px-2 py-1 text-xs font-medium transition-colors", showRefinePanel
+                                    ? "bg-primary/10 text-primary"
+                                    : "text-muted-foreground hover:bg-muted hover:text-foreground"), "aria-pressed": showRefinePanel, "aria-label": "Refine with AI", children: [_jsx(RefineSparklesIcon, {}), "Refine"] }), _jsx("div", { className: "mx-1 h-4 w-px bg-[var(--stgm-border,#d4d4d8)]", "aria-hidden": "true" }), _jsx(ValidationSummary, { errorCount: editor.errorCount, warningCount: editor.warningCount }), (editor.isDirty || canvasDirty) && (_jsx("span", { className: "text-xs text-muted-foreground", children: "Unsaved changes" }))] }), _jsxs("div", { className: "flex items-center gap-2", children: [mode === "code" && (_jsx("button", { type: "button", onClick: editor.reset, disabled: !editor.isDirty || editor.isSaving, className: cn("rounded px-2.5 py-1 text-xs font-medium transition-colors", "text-muted-foreground hover:bg-muted hover:text-foreground", "disabled:pointer-events-none disabled:opacity-40"), children: "Reset" })), mode === "code" && (_jsx("button", { type: "button", onClick: handleSave, disabled: !editor.isDirty || editor.isSaving || editor.errorCount > 0, className: cn("rounded bg-primary px-3 py-1 text-xs font-medium text-primary-foreground transition-colors", "hover:bg-primary/90", "disabled:pointer-events-none disabled:opacity-40"), children: editor.isSaving ? "Saving\u2026" : "Save" })), _jsx("button", { type: "button", onClick: toggleFullPage, className: "rounded p-1 text-muted-foreground hover:bg-muted hover:text-foreground", "aria-label": isFullPage ? "Exit full page" : "Full page", children: _jsx(ExpandIcon, { expanded: isFullPage }) })] })] }), editor.saveError && (_jsx("div", { className: "border-b border-destructive/20 bg-destructive/5 px-3 py-2 text-xs text-destructive", children: editor.saveError.message })), showModeWarning && (_jsx(ModeWarningDialog, { onConfirm: confirmSwitchToVisual, onCancel: cancelSwitchToVisual })), showDirtyPrompt && (_jsx(DirtyPromptDialog, { onDiscard: confirmDiscardAndSwitchToCode, onCancel: cancelSwitchToCode })), _jsx("div", { className: "flex min-h-0 flex-1", children: mode === "code" ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "flex-1 overflow-hidden border-r border-border", children: _jsx(WorkflowYamlEditor, { value: editor.yaml, onChange: editor.setYaml, diagnostics: editor.diagnostics, className: "h-full rounded-none border-0" }) }), _jsx("div", { className: "w-[40%] min-w-[240px] overflow-hidden", children: showRefinePanel ? (_jsx(WorkflowRefinePanel, { org: org, currentYaml: editor.yaml, onAccept: handleRefineAccept, onClose: toggleRefinePanel, className: "h-full" })) : (_jsx(WorkflowTopologyGraph, { topology: editor.topology, className: "h-full" })) })] })) : (_jsxs(_Fragment, { children: [_jsx(WorkflowCanvasEditor, { yaml: editor.yaml, onSave: handleCanvasSave, isSaving: canvasIsSaving, onDirtyChange: setCanvasDirty, nodeErrors: nodeErrors, className: showRefinePanel ? "w-[60%]" : "flex-1" }), showRefinePanel && (_jsx("div", { className: "w-[40%] min-w-[240px] overflow-hidden", children: _jsx(WorkflowRefinePanel, { org: org, currentYaml: editor.yaml, onAccept: handleRefineAccept, onClose: toggleRefinePanel, className: "h-full" }) }))] })) })] }));
+});
+// ---------------------------------------------------------------------------
+// Mode Toggle
+// ---------------------------------------------------------------------------
+function ModeToggle({ mode, onSwitchToCode, onSwitchToVisual, }) {
+    const segmentClass = (active) => cn("rounded px-2.5 py-1 text-xs font-medium transition-colors", active
+        ? "bg-[var(--stgm-primary,#6366f1)] text-[var(--stgm-primary-foreground,#fff)]"
+        : "text-[var(--stgm-muted-foreground,#737373)] hover:bg-[var(--stgm-muted,#f5f5f5)] hover:text-[var(--stgm-foreground,#1a1a2e)]");
+    return (_jsxs("div", { className: "flex items-center gap-0.5 rounded-md border border-[var(--stgm-border,#d4d4d8)] p-0.5", role: "tablist", "aria-label": "Editor mode", children: [_jsx("button", { type: "button", role: "tab", "aria-selected": mode === "code", onClick: onSwitchToCode, className: segmentClass(mode === "code"), children: "Code" }), _jsx("button", { type: "button", role: "tab", "aria-selected": mode === "visual", onClick: onSwitchToVisual, className: segmentClass(mode === "visual"), children: "Visual" })] }));
+}
+// ---------------------------------------------------------------------------
+// Mode Warning Dialog
+// ---------------------------------------------------------------------------
+function ModeWarningDialog({ onConfirm, onCancel, }) {
+    return (_jsx("div", { className: "border-b border-[var(--stgm-border,#e5e5e5)] bg-[var(--stgm-accent,#fffbeb)] px-3 py-2", children: _jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx("p", { className: "text-xs text-[var(--stgm-foreground,#1a1a2e)]", children: "Switching to visual mode will normalize YAML formatting. Comments and custom ordering will not be preserved." }), _jsxs("div", { className: "flex shrink-0 items-center gap-1.5", children: [_jsx("button", { type: "button", onClick: onCancel, className: "rounded px-2 py-1 text-xs text-[var(--stgm-muted-foreground,#737373)] hover:bg-[var(--stgm-muted,#f5f5f5)]", children: "Cancel" }), _jsx("button", { type: "button", onClick: onConfirm, className: "rounded bg-[var(--stgm-primary,#6366f1)] px-2.5 py-1 text-xs font-medium text-[var(--stgm-primary-foreground,#fff)] hover:opacity-90", children: "Continue" })] })] }) }));
+}
+// ---------------------------------------------------------------------------
+// Dirty Prompt Dialog
+// ---------------------------------------------------------------------------
+function DirtyPromptDialog({ onDiscard, onCancel, }) {
+    return (_jsx("div", { className: "border-b border-[var(--stgm-border,#e5e5e5)] bg-[var(--stgm-accent,#fffbeb)] px-3 py-2", children: _jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx("p", { className: "text-xs text-[var(--stgm-foreground,#1a1a2e)]", children: "You have unsaved changes in the visual editor. Switching to code mode will discard them." }), _jsxs("div", { className: "flex shrink-0 items-center gap-1.5", children: [_jsx("button", { type: "button", onClick: onCancel, className: "rounded px-2 py-1 text-xs text-[var(--stgm-muted-foreground,#737373)] hover:bg-[var(--stgm-muted,#f5f5f5)]", children: "Stay in Visual" }), _jsx("button", { type: "button", onClick: onDiscard, className: "rounded bg-[var(--stgm-destructive,#ef4444)] px-2.5 py-1 text-xs font-medium text-white hover:opacity-90", children: "Discard & Switch" })] })] }) }));
+}
+// ---------------------------------------------------------------------------
+// Sub-components
+// ---------------------------------------------------------------------------
+function ValidationSummary({ errorCount, warningCount, }) {
+    if (errorCount === 0 && warningCount === 0) {
+        return (_jsxs("span", { className: "text-xs text-success", children: [_jsx(CheckCircleIcon, {}), " ", "Valid"] }));
+    }
+    return (_jsxs("div", { className: "flex items-center gap-2", children: [errorCount > 0 && (_jsxs("span", { className: "text-xs text-destructive", children: [errorCount, " ", errorCount === 1 ? "error" : "errors"] })), warningCount > 0 && (_jsxs("span", { className: "text-xs text-warning", children: [warningCount, " ", warningCount === 1 ? "warning" : "warnings"] }))] }));
+}
+function CheckCircleIcon() {
+    return (_jsxs("svg", { width: "12", height: "12", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", className: "inline-block", children: [_jsx("circle", { cx: "8", cy: "8", r: "6.5" }), _jsx("path", { d: "M5.5 8l2 2 3-3.5" })] }));
+}
+function RefineSparklesIcon() {
+    return (_jsx("svg", { width: "12", height: "12", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: _jsx("path", { d: "M8 2l1.5 4.5L14 8l-4.5 1.5L8 14l-1.5-4.5L2 8l4.5-1.5z" }) }));
+}
+function ExpandIcon({ expanded }) {
+    return (_jsx("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: expanded ? (_jsxs(_Fragment, { children: [_jsx("path", { d: "M6 2H2v4M10 14h4v-4" }), _jsx("path", { d: "M2 2l5 5M14 14l-5-5" })] })) : (_jsxs(_Fragment, { children: [_jsx("path", { d: "M14 2h-4M2 14h4" }), _jsx("path", { d: "M14 2l-5 5M2 14l5-5" })] })) }));
+}
+//# sourceMappingURL=WorkflowEditorView.js.map