@wildo-ai/saas-frontend-lib 1.0.1 → 1.1.0

package/dist/esm/components/flows-actors/flows-actors-graph.lazy.js

@@ -0,0 +1,106 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * The ONLY public doors onto the `@xyflow/react`-bearing `flows-actors` components.
+ *
+ * Lazy-boundary wrapper (`*.lazy.tsx` convention — `ChartView.lazy` / `pdf-viewer.lazy` /
+ * `cm6-editor.lazy` / the preset-side `graph.lazy` precedent). It owns the
+ * `React.lazy(() => import('./flows-actors-graph-runtime.js'))` split points and the Suspense
+ * fallbacks, and re-exports every props type via `export type` so callers are fully typed with NO
+ * runtime edge onto the heavy module.
+ *
+ * ## Why the door exists — bundle size, and only bundle size
+ *
+ * Three modules value-imported `@xyflow/react` (~375 kB): `flow-node.tsx`, `flow-execution.tsx`
+ * and `actor.tsx`. All three were eagerly re-exported from `src/index.ts`, and `execution-plan.tsx`
+ * plus `task-detail.tsx` reached `flow-node.tsx` transitively. Every application importing the
+ * `@wildo-ai/saas-frontend-lib` root therefore carried the whole graph library in its ENTRY chunk,
+ * whether or not it ever drew a flow diagram.
+ *
+ * The preset-side twin (`@wildo-ai/presets-components` → `components/ai-elements/graph/graph.lazy`)
+ * had a SECOND reason: its `canvas.tsx` imports `@xyflow/react/dist/style.css`, which Node's ESM
+ * loader cannot handle, so Node consumers of that package root died at module load. **That reason
+ * does not apply on this path** — nothing here imports a stylesheet. Stated explicitly because it
+ * is also why `check:lazy-boundaries` Rule B, which is anchored on stylesheet imports, was
+ * structurally unable to report this path. Rule A guards it from here on.
+ *
+ * ## Why every door names the SAME specifier
+ *
+ * Rollup/Vite emit one async chunk per dynamically-imported MODULE. All twelve doors below
+ * dynamically import `./flows-actors-graph-runtime` and nothing else, so the bundler sees exactly
+ * one dynamic target and emits exactly ONE async chunk holding `@xyflow/react`. Three per-leaf
+ * split points would have produced either a duplicated library or an implicit shared chunk. See
+ * `flows-actors-graph-runtime.ts` for the full rationale.
+ *
+ * ## Suspense fallbacks
+ *
+ * Doors that occupy layout reserve it with a `Skeleton`, never collapsing to zero height — the one
+ * door that realistically suspends is whichever the host renders FIRST, and a host composes these
+ * from the outside in (`AI_FlowExecutionCanvas`, `AI_ActorTeam`) rather than mounting a node card
+ * on its own.
+ *
+ * Two deliberate exceptions, by DOM validity rather than by omission:
+ *
+ * - `AI_FlowEdgeActive` renders inside the canvas `<svg>`, where a `<div>` skeleton is invalid
+ *   markup. It is only ever mounted as an `edgeTypes` entry of an already-resolved canvas, so the
+ *   chunk is resident and its fallback is unreachable in practice — hence `null`.
+ * - `AI_FlowExecutionTimelineItem` renders an `<li>` inside its parent's `<ol>`, so its skeleton is
+ *   wrapped in an `<li>` rather than a bare `<div>`.
+ *
+ * Everything except this wrapper (and tests) must import these components from HERE. A static
+ * import of `./flows-actors-graph-runtime`, or of any leaf beneath it, from the eager graph
+ * silently merges the whole payload back into the entry chunk — enforced by
+ * `pnpm check:lazy-boundaries`.
+ *
+ * `AI_FlowNodeStepBadge` / `AI_FlowNodeStatusBadge` are NOT here on purpose: they touch no
+ * `@xyflow/react`, they are consumed by two eager modules that draw no graph, and they stay eager
+ * in `./flow-node-badges`.
+ */
+import * as React from "react";
+import { Skeleton } from "../../components/feedback/skeleton.js";
+/**
+ * One `React.lazy` per exported symbol, every one of them resolving the SAME
+ * `./flows-actors-graph-runtime` module. The module promise is created once by the ESM loader and
+ * reused, so the twelve factories below cost one network fetch and one module evaluation between
+ * them.
+ */
+const LazyActorTeam = React.lazy(() => import("./flows-actors-graph-runtime.js").then((m) => ({ default: m.AI_ActorTeam })));
+const LazyActorCard = React.lazy(() => import("./flows-actors-graph-runtime.js").then((m) => ({ default: m.AI_ActorCard })));
+const LazyActorRoleBadge = React.lazy(() => import("./flows-actors-graph-runtime.js").then((m) => ({ default: m.AI_ActorRoleBadge })));
+const LazyActorExecutionModeBadge = React.lazy(() => import("./flows-actors-graph-runtime.js").then((m) => ({ default: m.AI_ActorExecutionModeBadge })));
+const LazyFlowNode = React.lazy(() => import("./flows-actors-graph-runtime.js").then((m) => ({ default: m.AI_FlowNode })));
+const LazyFlowTriggerNode = React.lazy(() => import("./flows-actors-graph-runtime.js").then((m) => ({ default: m.AI_FlowTriggerNode })));
+const LazyFlowFinishNode = React.lazy(() => import("./flows-actors-graph-runtime.js").then((m) => ({ default: m.AI_FlowFinishNode })));
+const LazyFlowEdgeActive = React.lazy(() => import("./flows-actors-graph-runtime.js").then((m) => ({ default: m.AI_FlowEdgeActive })));
+const LazyFlowExecutionCanvas = React.lazy(() => import("./flows-actors-graph-runtime.js").then((m) => ({ default: m.AI_FlowExecutionCanvas })));
+const LazyFlowExecutionSummary = React.lazy(() => import("./flows-actors-graph-runtime.js").then((m) => ({ default: m.AI_FlowExecutionSummary })));
+const LazyFlowExecutionTimeline = React.lazy(() => import("./flows-actors-graph-runtime.js").then((m) => ({ default: m.AI_FlowExecutionTimeline })));
+const LazyFlowExecutionTimelineItem = React.lazy(() => import("./flows-actors-graph-runtime.js").then((m) => ({ default: m.AI_FlowExecutionTimelineItem })));
+// ─── Flow execution ───────────────────────────────────────────────────────────
+/** The flow graph surface. Reserves the canvas's own fixed height while the chunk loads. */
+export const AI_FlowExecutionCanvas = (props) => (_jsx(React.Suspense, { fallback: _jsx(Skeleton, { "aria-hidden": "true", className: "h-[500px] w-full rounded-lg" }), children: _jsx(LazyFlowExecutionCanvas, { ...props }) }));
+/** Status/progress strip above a flow canvas. */
+export const AI_FlowExecutionSummary = (props) => (_jsx(React.Suspense, { fallback: _jsx(Skeleton, { "aria-hidden": "true", className: "h-14 w-full rounded-lg" }), children: _jsx(LazyFlowExecutionSummary, { ...props }) }));
+/** Ordered list of execution events. */
+export const AI_FlowExecutionTimeline = (props) => (_jsx(React.Suspense, { fallback: _jsx(Skeleton, { "aria-hidden": "true", className: "h-40 w-full rounded-md" }), children: _jsx(LazyFlowExecutionTimeline, { ...props }) }));
+/** One timeline row. Fallback is an `<li>` — a bare `<div>` would be invalid inside the `<ol>`. */
+export const AI_FlowExecutionTimelineItem = (props) => (_jsx(React.Suspense, { fallback: _jsx("li", { "aria-hidden": "true", className: "ms-4", children: _jsx(Skeleton, { className: "h-8 w-full" }) }), children: _jsx(LazyFlowExecutionTimelineItem, { ...props }) }));
+/** Animated edge for active execution paths. Renders inside the canvas `<svg>` — see the header. */
+export const AI_FlowEdgeActive = (props) => (_jsx(React.Suspense, { fallback: null, children: _jsx(LazyFlowEdgeActive, { ...props }) }));
+// ─── Flow nodes ───────────────────────────────────────────────────────────────
+/** Flow step card, with source/target handles. */
+export const AI_FlowNode = (props) => (_jsx(React.Suspense, { fallback: _jsx(Skeleton, { "aria-hidden": "true", className: "h-24 w-sm rounded-md" }), children: _jsx(LazyFlowNode, { ...props }) }));
+/** Flow trigger card. */
+export const AI_FlowTriggerNode = (props) => (_jsx(React.Suspense, { fallback: _jsx(Skeleton, { "aria-hidden": "true", className: "h-20 w-sm rounded-md" }), children: _jsx(LazyFlowTriggerNode, { ...props }) }));
+/** Flow finish card. */
+export const AI_FlowFinishNode = (props) => (_jsx(React.Suspense, { fallback: _jsx(Skeleton, { "aria-hidden": "true", className: "h-12 w-sm rounded-md" }), children: _jsx(LazyFlowFinishNode, { ...props }) }));
+// ─── Actors ───────────────────────────────────────────────────────────────────
+/** Actor team, in grid or graph mode. The graph mode is why this module is behind the door. */
+export const AI_ActorTeam = (props) => (_jsx(React.Suspense, { fallback: _jsx(Skeleton, { "aria-hidden": "true", className: "h-64 w-full rounded-md" }), children: _jsx(LazyActorTeam, { ...props }) }));
+/** Single actor card. */
+export const AI_ActorCard = (props) => (_jsx(React.Suspense, { fallback: _jsx(Skeleton, { "aria-hidden": "true", className: "h-40 w-full rounded-lg" }), children: _jsx(LazyActorCard, { ...props }) }));
+/** Actor role pill. */
+export const AI_ActorRoleBadge = (props) => (_jsx(React.Suspense, { fallback: _jsx(Skeleton, { "aria-hidden": "true", className: "h-5 w-20 rounded-full" }), children: _jsx(LazyActorRoleBadge, { ...props }) }));
+/** Actor execution-mode pill. */
+export const AI_ActorExecutionModeBadge = (props) => (_jsx(React.Suspense, { fallback: _jsx(Skeleton, { "aria-hidden": "true", className: "h-5 w-20 rounded-full" }), children: _jsx(LazyActorExecutionModeBadge, { ...props }) }));
+//# sourceMappingURL=flows-actors-graph.lazy.js.map

package/dist/esm/components/flows-actors/flows-actors-graph.lazy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flows-actors-graph.lazy.js","sourceRoot":"","sources":["../../../../../src/components/flows-actors/flows-actors-graph.lazy.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\";\n\n/**\n * The ONLY public doors onto the `@xyflow/react`-bearing `flows-actors` components.\n *\n * Lazy-boundary wrapper (`*.lazy.tsx` convention — `ChartView.lazy` / `pdf-viewer.lazy` /\n * `cm6-editor.lazy` / the preset-side `graph.lazy` precedent). It owns the\n * `React.lazy(() => import('./flows-actors-graph-runtime'))` split points and the Suspense\n * fallbacks, and re-exports every props type via `export type` so callers are fully typed with NO\n * runtime edge onto the heavy module.\n *\n * ## Why the door exists — bundle size, and only bundle size\n *\n * Three modules value-imported `@xyflow/react` (~375 kB): `flow-node.tsx`, `flow-execution.tsx`\n * and `actor.tsx`. All three were eagerly re-exported from `src/index.ts`, and `execution-plan.tsx`\n * plus `task-detail.tsx` reached `flow-node.tsx` transitively. Every application importing the\n * `@wildo-ai/saas-frontend-lib` root therefore carried the whole graph library in its ENTRY chunk,\n * whether or not it ever drew a flow diagram.\n *\n * The preset-side twin (`@wildo-ai/presets-components` → `components/ai-elements/graph/graph.lazy`)\n * had a SECOND reason: its `canvas.tsx` imports `@xyflow/react/dist/style.css`, which Node's ESM\n * loader cannot handle, so Node consumers of that package root died at module load. **That reason\n * does not apply on this path** — nothing here imports a stylesheet. Stated explicitly because it\n * is also why `check:lazy-boundaries` Rule B, which is anchored on stylesheet imports, was\n * structurally unable to report this path. Rule A guards it from here on.\n *\n * ## Why every door names the SAME specifier\n *\n * Rollup/Vite emit one async chunk per dynamically-imported MODULE. All twelve doors below\n * dynamically import `./flows-actors-graph-runtime` and nothing else, so the bundler sees exactly\n * one dynamic target and emits exactly ONE async chunk holding `@xyflow/react`. Three per-leaf\n * split points would have produced either a duplicated library or an implicit shared chunk. See\n * `flows-actors-graph-runtime.ts` for the full rationale.\n *\n * ## Suspense fallbacks\n *\n * Doors that occupy layout reserve it with a `Skeleton`, never collapsing to zero height — the one\n * door that realistically suspends is whichever the host renders FIRST, and a host composes these\n * from the outside in (`AI_FlowExecutionCanvas`, `AI_ActorTeam`) rather than mounting a node card\n * on its own.\n *\n * Two deliberate exceptions, by DOM validity rather than by omission:\n *\n * - `AI_FlowEdgeActive` renders inside the canvas `<svg>`, where a `<div>` skeleton is invalid\n *   markup. It is only ever mounted as an `edgeTypes` entry of an already-resolved canvas, so the\n *   chunk is resident and its fallback is unreachable in practice — hence `null`.\n * - `AI_FlowExecutionTimelineItem` renders an `<li>` inside its parent's `<ol>`, so its skeleton is\n *   wrapped in an `<li>` rather than a bare `<div>`.\n *\n * Everything except this wrapper (and tests) must import these components from HERE. A static\n * import of `./flows-actors-graph-runtime`, or of any leaf beneath it, from the eager graph\n * silently merges the whole payload back into the entry chunk — enforced by\n * `pnpm check:lazy-boundaries`.\n *\n * `AI_FlowNodeStepBadge` / `AI_FlowNodeStatusBadge` are NOT here on purpose: they touch no\n * `@xyflow/react`, they are consumed by two eager modules that draw no graph, and they stay eager\n * in `./flow-node-badges`.\n */\n\nimport * as React from \"react\";\nimport { Skeleton } from \"~wildo-frontend-lib/components/feedback/skeleton\";\n\nimport type {\n  AI_ActorCardProps,\n  AI_ActorExecutionModeBadgeProps,\n  AI_ActorRoleBadgeProps,\n  AI_ActorTeamProps,\n} from \"./actor\";\nimport type {\n  AI_FlowEdgeActiveProps,\n  AI_FlowExecutionCanvasProps,\n  AI_FlowExecutionSummaryProps,\n  AI_FlowExecutionTimelineItemProps,\n  AI_FlowExecutionTimelineProps,\n} from \"./flow-execution\";\nimport type { AI_FlowFinishNodeProps, AI_FlowNodeProps, AI_FlowTriggerNodeProps } from \"./flow-node\";\n\n/**\n * One `React.lazy` per exported symbol, every one of them resolving the SAME\n * `./flows-actors-graph-runtime` module. The module promise is created once by the ESM loader and\n * reused, so the twelve factories below cost one network fetch and one module evaluation between\n * them.\n */\nconst LazyActorTeam = React.lazy(() => import(\"./flows-actors-graph-runtime\").then((m) => ({ default: m.AI_ActorTeam })));\nconst LazyActorCard = React.lazy(() => import(\"./flows-actors-graph-runtime\").then((m) => ({ default: m.AI_ActorCard })));\nconst LazyActorRoleBadge = React.lazy(() => import(\"./flows-actors-graph-runtime\").then((m) => ({ default: m.AI_ActorRoleBadge })));\nconst LazyActorExecutionModeBadge = React.lazy(() =>\n  import(\"./flows-actors-graph-runtime\").then((m) => ({ default: m.AI_ActorExecutionModeBadge })),\n);\nconst LazyFlowNode = React.lazy(() => import(\"./flows-actors-graph-runtime\").then((m) => ({ default: m.AI_FlowNode })));\nconst LazyFlowTriggerNode = React.lazy(() => import(\"./flows-actors-graph-runtime\").then((m) => ({ default: m.AI_FlowTriggerNode })));\nconst LazyFlowFinishNode = React.lazy(() => import(\"./flows-actors-graph-runtime\").then((m) => ({ default: m.AI_FlowFinishNode })));\nconst LazyFlowEdgeActive = React.lazy(() => import(\"./flows-actors-graph-runtime\").then((m) => ({ default: m.AI_FlowEdgeActive })));\nconst LazyFlowExecutionCanvas = React.lazy(() =>\n  import(\"./flows-actors-graph-runtime\").then((m) => ({ default: m.AI_FlowExecutionCanvas })),\n);\nconst LazyFlowExecutionSummary = React.lazy(() =>\n  import(\"./flows-actors-graph-runtime\").then((m) => ({ default: m.AI_FlowExecutionSummary })),\n);\nconst LazyFlowExecutionTimeline = React.lazy(() =>\n  import(\"./flows-actors-graph-runtime\").then((m) => ({ default: m.AI_FlowExecutionTimeline })),\n);\nconst LazyFlowExecutionTimelineItem = React.lazy(() =>\n  import(\"./flows-actors-graph-runtime\").then((m) => ({ default: m.AI_FlowExecutionTimelineItem })),\n);\n\n// ─── Flow execution ───────────────────────────────────────────────────────────\n\n/** The flow graph surface. Reserves the canvas's own fixed height while the chunk loads. */\nexport const AI_FlowExecutionCanvas = (props: AI_FlowExecutionCanvasProps): React.JSX.Element => (\n  <React.Suspense fallback={<Skeleton aria-hidden=\"true\" className=\"h-[500px] w-full rounded-lg\" />}>\n    <LazyFlowExecutionCanvas {...props} />\n  </React.Suspense>\n);\n\n/** Status/progress strip above a flow canvas. */\nexport const AI_FlowExecutionSummary = (props: AI_FlowExecutionSummaryProps): React.JSX.Element => (\n  <React.Suspense fallback={<Skeleton aria-hidden=\"true\" className=\"h-14 w-full rounded-lg\" />}>\n    <LazyFlowExecutionSummary {...props} />\n  </React.Suspense>\n);\n\n/** Ordered list of execution events. */\nexport const AI_FlowExecutionTimeline = (props: AI_FlowExecutionTimelineProps): React.JSX.Element => (\n  <React.Suspense fallback={<Skeleton aria-hidden=\"true\" className=\"h-40 w-full rounded-md\" />}>\n    <LazyFlowExecutionTimeline {...props} />\n  </React.Suspense>\n);\n\n/** One timeline row. Fallback is an `<li>` — a bare `<div>` would be invalid inside the `<ol>`. */\nexport const AI_FlowExecutionTimelineItem = (props: AI_FlowExecutionTimelineItemProps): React.JSX.Element => (\n  <React.Suspense\n    fallback={\n      <li aria-hidden=\"true\" className=\"ms-4\">\n        <Skeleton className=\"h-8 w-full\" />\n      </li>\n    }\n  >\n    <LazyFlowExecutionTimelineItem {...props} />\n  </React.Suspense>\n);\n\n/** Animated edge for active execution paths. Renders inside the canvas `<svg>` — see the header. */\nexport const AI_FlowEdgeActive = (props: AI_FlowEdgeActiveProps): React.JSX.Element => (\n  <React.Suspense fallback={null}>\n    <LazyFlowEdgeActive {...props} />\n  </React.Suspense>\n);\n\n// ─── Flow nodes ───────────────────────────────────────────────────────────────\n\n/** Flow step card, with source/target handles. */\nexport const AI_FlowNode = (props: AI_FlowNodeProps): React.JSX.Element => (\n  <React.Suspense fallback={<Skeleton aria-hidden=\"true\" className=\"h-24 w-sm rounded-md\" />}>\n    <LazyFlowNode {...props} />\n  </React.Suspense>\n);\n\n/** Flow trigger card. */\nexport const AI_FlowTriggerNode = (props: AI_FlowTriggerNodeProps): React.JSX.Element => (\n  <React.Suspense fallback={<Skeleton aria-hidden=\"true\" className=\"h-20 w-sm rounded-md\" />}>\n    <LazyFlowTriggerNode {...props} />\n  </React.Suspense>\n);\n\n/** Flow finish card. */\nexport const AI_FlowFinishNode = (props: AI_FlowFinishNodeProps): React.JSX.Element => (\n  <React.Suspense fallback={<Skeleton aria-hidden=\"true\" className=\"h-12 w-sm rounded-md\" />}>\n    <LazyFlowFinishNode {...props} />\n  </React.Suspense>\n);\n\n// ─── Actors ───────────────────────────────────────────────────────────────────\n\n/** Actor team, in grid or graph mode. The graph mode is why this module is behind the door. */\nexport const AI_ActorTeam = (props: AI_ActorTeamProps): React.JSX.Element => (\n  <React.Suspense fallback={<Skeleton aria-hidden=\"true\" className=\"h-64 w-full rounded-md\" />}>\n    <LazyActorTeam {...props} />\n  </React.Suspense>\n);\n\n/** Single actor card. */\nexport const AI_ActorCard = (props: AI_ActorCardProps): React.JSX.Element => (\n  <React.Suspense fallback={<Skeleton aria-hidden=\"true\" className=\"h-40 w-full rounded-lg\" />}>\n    <LazyActorCard {...props} />\n  </React.Suspense>\n);\n\n/** Actor role pill. */\nexport const AI_ActorRoleBadge = (props: AI_ActorRoleBadgeProps): React.JSX.Element => (\n  <React.Suspense fallback={<Skeleton aria-hidden=\"true\" className=\"h-5 w-20 rounded-full\" />}>\n    <LazyActorRoleBadge {...props} />\n  </React.Suspense>\n);\n\n/** Actor execution-mode pill. */\nexport const AI_ActorExecutionModeBadge = (props: AI_ActorExecutionModeBadgeProps): React.JSX.Element => (\n  <React.Suspense fallback={<Skeleton aria-hidden=\"true\" className=\"h-5 w-20 rounded-full\" />}>\n    <LazyActorExecutionModeBadge {...props} />\n  </React.Suspense>\n);\n\nexport type {\n  AI_ActorCardProps,\n  AI_ActorExecutionModeBadgeProps,\n  AI_ActorRoleBadgeProps,\n  AI_ActorTeamProps,\n} from \"./actor\";\nexport type {\n  AI_FlowEdgeActiveProps,\n  AI_FlowExecutionCanvasProps,\n  AI_FlowExecutionSummaryProps,\n  AI_FlowExecutionTimelineEvent,\n  AI_FlowExecutionTimelineItemProps,\n  AI_FlowExecutionTimelineProps,\n  FlowCanvasEdge,\n  FlowCanvasFinish,\n  FlowCanvasNodeState,\n  FlowCanvasStep,\n  FlowCanvasTrigger,\n} from \"./flow-execution\";\nexport type {\n  AI_FlowFinishNodeProps,\n  AI_FlowNodeProps,\n  AI_FlowTriggerNodeProps,\n  /**\n   * Not a props type: the step-category vocabulary, declared beside its runtime mapping in\n   * `flow-node.tsx` and re-exported here so the public name survives the boundary. It is the\n   * prop type of the EAGER `AI_FlowNodeStepBadge`, which type-imports it for the same reason.\n   */\n  FlowStepCategory,\n} from \"./flow-node\";\n"]}

package/dist/esm/components/flows-actors/flows-actors-ui.utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"flows-actors-ui.utils.d.ts","sourceRoot":"","sources":["../../../../src/components/flows-actors/flows-actors-ui.utils.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,qBAAa,kBAAkB;IAC7B,OAAO;IAIP,MAAM,CAAC,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAQlD;IAIF,MAAM,CAAC,eAAe,CAAC,GAAG,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM;IAMvD,MAAM,CAAC,mBAAmB,CAAC,GAAG,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM;IAM3D,MAAM,CAAC,cAAc,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM;IAkBhE,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,iBAAiB,CAQvC;IAEF,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,0BAA0B,CAI/C;IAEH,MAAM,CAAC,wBAAwB,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO;IAItD,MAAM,CAAC,iBAAiB,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM;CAGjD"}
+{"version":3,"file":"flows-actors-ui.utils.d.ts","sourceRoot":"","sources":["../../../../../src/components/flows-actors/flows-actors-ui.utils.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,qBAAa,kBAAkB;IAC7B,OAAO;IAIP,MAAM,CAAC,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAQlD;IAIF,MAAM,CAAC,eAAe,CAAC,GAAG,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM;IAMvD,MAAM,CAAC,mBAAmB,CAAC,GAAG,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM;IAM3D,MAAM,CAAC,cAAc,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM;IAkBhE,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,iBAAiB,CAQvC;IAEF,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,0BAA0B,CAI/C;IAEH,MAAM,CAAC,wBAAwB,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO;IAItD,MAAM,CAAC,iBAAiB,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM;CAGjD"}

package/dist/esm/components/flows-actors/flows-actors-ui.utils.js

@@ -70,4 +70,4 @@ export class FlowsActorsUIUtils {
         return FlowsActorsUIUtils.STATUS_LABEL_KEYS[status] ?? status;
     }
 }
-//# sourceMappingURL=flows-actors-ui.utils.js.map
+//# sourceMappingURL=flows-actors-ui.utils.js.map

package/dist/esm/components/flows-actors/flows-actors-ui.utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"flows-actors-ui.utils.js","sourceRoot":"","sources":["../../../../src/components/flows-actors/flows-actors-ui.utils.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"flows-actors-ui.utils.js","sourceRoot":"","sources":["../../../../../src/components/flows-actors/flows-actors-ui.utils.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Static utility class for flows-actors UI logic.\n * Centralises status styling, formatting, and flow-node helpers\n * used across execution-plan, task-detail, flow-execution, and flow-node.\n */\nexport class FlowsActorsUIUtils {\n  private constructor() {}\n\n  // ── Status → CSS color mapping ──\n\n  static readonly STATUS_COLOR: Record<string, string> = {\n    ready: \"bg-muted-foreground\",\n    pending: \"bg-muted-foreground\",\n    processing: \"bg-primary animate-pulse\",\n    completed: \"bg-success\",\n    failed: \"bg-destructive\",\n    cancelled: \"bg-muted-foreground/50\",\n    aborted: \"bg-destructive/70\",\n  };\n\n  // ── Formatting ──\n\n  static formatTimestamp(iso: string | undefined): string {\n    if (!iso) return \"\";\n    const d = new Date(iso);\n    return Number.isNaN(d.getTime()) ? \"\" : d.toLocaleTimeString();\n  }\n\n  static formatTimestampFull(iso: string | undefined): string {\n    if (!iso) return \"\";\n    const d = new Date(iso);\n    return Number.isNaN(d.getTime()) ? \"\" : d.toLocaleString();\n  }\n\n  static formatDuration(startIso: string, endIso?: string): string {\n    const start = new Date(startIso).getTime();\n    if (Number.isNaN(start)) return \"\";\n    const end = endIso ? new Date(endIso).getTime() : Date.now();\n    if (Number.isNaN(end)) return \"\";\n    const ms = Math.max(0, end - start);\n    if (ms < 1000) return `${ms}ms`;\n    const s = Math.floor(ms / 1000);\n    if (s < 60) return `${s}s`;\n    const m = Math.floor(s / 60);\n    const rs = s % 60;\n    if (m < 60) return `${m}m ${rs}s`;\n    const h = Math.floor(m / 60);\n    return `${h}h ${m % 60}m`;\n  }\n\n  // ── Flow node helpers ──\n\n  private static readonly STATUS_LABEL_KEYS: Record<string, string> = {\n    ready: \"statusReady\",\n    pending: \"statusPending\",\n    processing: \"statusProcessing\",\n    completed: \"statusCompleted\",\n    failed: \"statusFailed\",\n    cancelled: \"statusCancelled\",\n    aborted: \"statusAborted\",\n  };\n\n  private static readonly CONTROL_MULTI_SOURCE_KINDS = new Set([\n    \"control.branch\",\n    \"control.switch\",\n    \"control.parallel\",\n  ]);\n\n  static isControlMultiSourceKind(kind: string): boolean {\n    return FlowsActorsUIUtils.CONTROL_MULTI_SOURCE_KINDS.has(kind);\n  }\n\n  static getStatusLabelKey(status: string): string {\n    return FlowsActorsUIUtils.STATUS_LABEL_KEYS[status] ?? status;\n  }\n}\n"]}

package/dist/esm/components/flows-actors/system-catalog.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { Card } from "../../components/sections/card.js";
+import { Card } from "../../components/sections/card";
 import type { ComponentProps } from "react";
 import type { FlowActorSystem_FrontendInfo } from "@wildo-ai/saas-models";
 type KindFilter = "all" | "flow" | "actor";
@@ -13,37 +13,37 @@ export type AI_SystemCatalogProps = ComponentProps<"div"> & {
     /** Callback when a system card is selected for detail view */
     onSelectSystem?: (systemRef: string) => void;
 };
-export declare const AI_SystemCatalog: ({ className, defaultKindFilter, defaultStatusFilter, defaultViewMode, onSelectSystem, ...props }: AI_SystemCatalogProps) => React.JSX.Element;
+export declare const AI_SystemCatalog: ({ className, defaultKindFilter, defaultStatusFilter, defaultViewMode, onSelectSystem, ...props }: AI_SystemCatalogProps) => React.JSX.Element | null;
 export type AI_SystemCardProps = ComponentProps<typeof Card> & {
     system: FlowActorSystem_FrontendInfo;
     onLaunch?: (systemRef: string) => void;
 };
-export declare const AI_SystemCard: ({ system, onLaunch, className, ...props }: AI_SystemCardProps) => React.JSX.Element;
+export declare const AI_SystemCard: ({ system, onLaunch, className, ...props }: AI_SystemCardProps) => React.JSX.Element | null;
 export type AI_SystemCardCompactProps = ComponentProps<"div"> & {
     system: FlowActorSystem_FrontendInfo;
     onLaunch?: (systemRef: string) => void;
 };
-export declare const AI_SystemCardCompact: ({ system, onLaunch, className, ...props }: AI_SystemCardCompactProps) => React.JSX.Element;
+export declare const AI_SystemCardCompact: ({ system, onLaunch, className, ...props }: AI_SystemCardCompactProps) => React.JSX.Element | null;
 export type AI_SystemDetailProps = ComponentProps<"div"> & {
     system: FlowActorSystem_FrontendInfo;
     onBack?: () => void;
     onLaunch?: (systemRef: string) => void;
 };
-export declare const AI_SystemDetail: ({ system, onBack, onLaunch, className, ...props }: AI_SystemDetailProps) => React.JSX.Element;
+export declare const AI_SystemDetail: ({ system, onBack, onLaunch, className, ...props }: AI_SystemDetailProps) => React.JSX.Element | null;
 export type AI_SystemKindBadgeProps = {
     kind: string;
     className?: string;
 };
-export declare const AI_SystemKindBadge: ({ kind, className, }: AI_SystemKindBadgeProps) => React.JSX.Element;
+export declare const AI_SystemKindBadge: ({ kind, className, }: AI_SystemKindBadgeProps) => React.JSX.Element | null;
 export type AI_SystemStatusBadgeProps = {
     status: string;
     className?: string;
 };
-export declare const AI_SystemStatusBadge: ({ status, className, }: AI_SystemStatusBadgeProps) => React.JSX.Element;
+export declare const AI_SystemStatusBadge: ({ status, className, }: AI_SystemStatusBadgeProps) => React.JSX.Element | null;
 export type AI_RiskLevelBadgeProps = {
     level: string;
     className?: string;
 };
-export declare const AI_RiskLevelBadge: ({ level, className, }: AI_RiskLevelBadgeProps) => React.JSX.Element;
+export declare const AI_RiskLevelBadge: ({ level, className, }: AI_RiskLevelBadgeProps) => React.JSX.Element | null;
 export {};
 //# sourceMappingURL=system-catalog.d.ts.map

package/dist/esm/components/flows-actors/system-catalog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"system-catalog.d.ts","sourceRoot":"","sources":["../../../../src/components/flows-actors/system-catalog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,IAAI,EAAmE,MAAM,8CAA8C,CAAC;AAYrI,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,uBAAuB,CAAC;AAmB1E,KAAK,UAAU,GAAG,KAAK,GAAG,MAAM,GAAG,OAAO,CAAC;AAC3C,KAAK,YAAY,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,UAAU,GAAG,YAAY,GAAG,UAAU,CAAC;AACxF,KAAK,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;AAkBhC,MAAM,MAAM,qBAAqB,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IAC1D,+BAA+B;IAC/B,iBAAiB,CAAC,EAAE,UAAU,CAAC;IAC/B,mBAAmB,CAAC,EAAE,YAAY,CAAC;IACnC,eAAe,CAAC,EAAE,QAAQ,CAAC;IAC3B,8DAA8D;IAC9D,cAAc,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CAC9C,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,kGAO9B,qBAAqB,KAAG,KAAK,CAAC,GAAG,CAAC,OAwHpC,CAAC;AAgHF,MAAM,MAAM,kBAAkB,GAAG,cAAc,CAAC,OAAO,IAAI,CAAC,GAAG;IAC7D,MAAM,EAAE,4BAA4B,CAAC;IACrC,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,2CAK3B,kBAAkB,KAAG,KAAK,CAAC,GAAG,CAAC,OA+EjC,CAAC;AAMF,MAAM,MAAM,yBAAyB,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IAC9D,MAAM,EAAE,4BAA4B,CAAC;IACrC,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,2CAKlC,yBAAyB,KAAG,KAAK,CAAC,GAAG,CAAC,OA8DxC,CAAC;AAMF,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IACzD,MAAM,EAAE,4BAA4B,CAAC;IACrC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,mDAM7B,oBAAoB,KAAG,KAAK,CAAC,GAAG,CAAC,OAgKnC,CAAC;AA0DF,MAAM,MAAM,uBAAuB,GAAG;IACpC,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,sBAGhC,uBAAuB,KAAG,KAAK,CAAC,GAAG,CAAC,OAUtC,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG;IACtC,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAUF,eAAO,MAAM,oBAAoB,GAAI,wBAGlC,yBAAyB,KAAG,KAAK,CAAC,GAAG,CAAC,OAQxC,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AASF,eAAO,MAAM,iBAAiB,GAAI,uBAG/B,sBAAsB,KAAG,KAAK,CAAC,GAAG,CAAC,OAQrC,CAAC"}
+{"version":3,"file":"system-catalog.d.ts","sourceRoot":"","sources":["../../../../../src/components/flows-actors/system-catalog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,IAAI,EAAmE,MAAM,8CAA8C,CAAC;AAarI,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,uBAAuB,CAAC;AAsB1E,KAAK,UAAU,GAAG,KAAK,GAAG,MAAM,GAAG,OAAO,CAAC;AAC3C,KAAK,YAAY,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,UAAU,GAAG,YAAY,GAAG,UAAU,CAAC;AACxF,KAAK,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;AAkBhC,MAAM,MAAM,qBAAqB,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IAC1D,+BAA+B;IAC/B,iBAAiB,CAAC,EAAE,UAAU,CAAC;IAC/B,mBAAmB,CAAC,EAAE,YAAY,CAAC;IACnC,eAAe,CAAC,EAAE,QAAQ,CAAC;IAC3B,8DAA8D;IAC9D,cAAc,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CAC9C,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,kGAO9B,qBAAqB,KAAG,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IA0H9C,CAAC;AAkHF,MAAM,MAAM,kBAAkB,GAAG,cAAc,CAAC,OAAO,IAAI,CAAC,GAAG;IAC7D,MAAM,EAAE,4BAA4B,CAAC;IACrC,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,2CAK3B,kBAAkB,KAAG,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAiF3C,CAAC;AAMF,MAAM,MAAM,yBAAyB,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IAC9D,MAAM,EAAE,4BAA4B,CAAC;IACrC,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,2CAKlC,yBAAyB,KAAG,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAgElD,CAAC;AAMF,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IACzD,MAAM,EAAE,4BAA4B,CAAC;IACrC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,mDAM7B,oBAAoB,KAAG,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAkK7C,CAAC;AA2DF,MAAM,MAAM,uBAAuB,GAAG;IACpC,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,sBAGhC,uBAAuB,KAAG,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAWhD,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG;IACtC,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAUF,eAAO,MAAM,oBAAoB,GAAI,wBAGlC,yBAAyB,KAAG,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IASlD,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AASF,eAAO,MAAM,iBAAiB,GAAI,uBAG/B,sBAAsB,KAAG,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAS/C,CAAC"}

package/dist/esm/components/flows-actors/system-catalog.js

@@ -4,15 +4,16 @@ import * as React from "react";
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "../../components/sections/card.js";
 import { Badge } from "../../components/data-display/badge.js";
 import { Button, ButtonVariants_Variant } from "../../components/actions/button.js";
-import { ButtonSize, ControlSize } from "@wildo-ai/presets-components-models";
+import { ButtonSize, ControlSize, FrontendComponentType } from "@wildo-ai/presets-components-models";
 import { InputRoot } from "../../components/form/controls/input.js";
 import { Select } from "../../components/form/controls/enum/select.js";
 import { Skeleton } from "../../components/feedback/skeleton.js";
 import { Tabs, TabsList, TabsTrigger, TabsContent } from "../../components/sections/tabs.js";
 import { ScrollArea } from "../../components/layout/scroll-area.js";
-import { useI18n } from "@wildo-ai/saas-frontend-lib";
+import { useI18n } from "../../core/i18n/useI18n.js";
+import { Text } from "../../components/typography/text.js";
+import { TextSize, TextVariant } from "@wildo-ai/presets-components-models";
 import { cn } from "../../core/ui/cn.js";
-import { FrontendComponentType } from "@wildo-ai/presets-components-models";
 import { z } from "zod";
 import { useFlowsActors, useFlowsActorsSafe } from "../../core/flows-actors/useFlowsActors.js";
 import { FlowsActorsExecutionStatus } from "../../core/flows-actors/FlowsActorsContext.js";
@@ -58,14 +59,18 @@ export const AI_SystemCatalog = ({ className, defaultKindFilter = "all", default
     if (selectedSystem) {
         return (_jsx(AI_SystemDetail, { system: selectedSystem, onBack: handleBackToCatalog, onLaunch: handleLaunch, className: className, ...props }));
     }
+    if (!isReady)
+        return null;
     if (error) {
-        return (_jsxs("div", { className: cn("flex flex-col items-center justify-center gap-card rounded-lg border bg-card p-section text-center", className), ...props, children: [_jsx("p", { className: "text-sm text-destructive", children: tComponent(CT, "errorState") }), _jsx("p", { className: "text-xs text-muted-foreground", children: error.message }), _jsx(Button, { type: "button", variant: ButtonVariants_Variant.SECONDARY, size: ButtonSize.SM, onClick: () => void refreshSystems(), children: tComponent(CT, "retry") })] }));
+        return (_jsxs("div", { className: cn("flex flex-col items-center justify-center gap-card rounded-lg border bg-card p-section text-center", className), ...props, children: [_jsx(Text, { variant: TextVariant.DESTRUCTIVE, children: tComponent(CT, "errorState") }), _jsx(Text, { size: TextSize.XS, variant: TextVariant.MUTED, children: error.message }), _jsx(Button, { type: "button", variant: ButtonVariants_Variant.SECONDARY, size: ButtonSize.SM, onClick: () => void refreshSystems(), children: tComponent(CT, "retry") })] }));
     }
-    return (_jsxs("div", { className: cn("flex flex-col gap-card", className), ...props, children: [_jsx(AI_SystemCatalogToolbar, { searchQuery: searchQuery, onSearchChange: setSearchQuery, kindFilter: kindFilter, onKindFilterChange: setKindFilter, statusFilter: statusFilter, onStatusFilterChange: setStatusFilter, viewMode: viewMode, onViewModeChange: setViewMode, systemCount: filteredSystems.length, totalCount: systems.length }), isLoading ? (_jsx(AI_SystemCatalogSkeleton, { viewMode: viewMode })) : filteredSystems.length === 0 ? (_jsx("div", { className: "flex flex-col items-center justify-center gap-element rounded-lg border bg-card p-section text-center", children: _jsx("p", { className: "text-sm text-muted-foreground", children: systems.length === 0 ? tComponent(CT, "emptyState") : tComponent(CT, "emptyFilteredState") }) })) : viewMode === "grid" ? (_jsx("div", { className: "grid gap-card sm:grid-cols-2 lg:grid-cols-3", children: filteredSystems.map((sys) => (_jsx(AI_SystemCard, { system: sys, onLaunch: handleLaunch, onClick: () => handleSelectSystem(sys.ref) }, sys.ref))) })) : (_jsx("div", { className: "flex flex-col gap-element", children: filteredSystems.map((sys) => (_jsx(AI_SystemCardCompact, { system: sys, onLaunch: handleLaunch, onClick: () => handleSelectSystem(sys.ref) }, sys.ref))) }))] }));
+    return (_jsxs("div", { className: cn("flex flex-col gap-card", className), ...props, children: [_jsx(AI_SystemCatalogToolbar, { searchQuery: searchQuery, onSearchChange: setSearchQuery, kindFilter: kindFilter, onKindFilterChange: setKindFilter, statusFilter: statusFilter, onStatusFilterChange: setStatusFilter, viewMode: viewMode, onViewModeChange: setViewMode, systemCount: filteredSystems.length, totalCount: systems.length }), isLoading ? (_jsx(AI_SystemCatalogSkeleton, { viewMode: viewMode })) : filteredSystems.length === 0 ? (_jsx("div", { className: "flex flex-col items-center justify-center gap-element rounded-lg border bg-card p-section text-center", children: _jsx(Text, { variant: TextVariant.MUTED, children: systems.length === 0 ? tComponent(CT, "emptyState") : tComponent(CT, "emptyFilteredState") }) })) : viewMode === "grid" ? (_jsx("div", { className: "grid gap-card sm:grid-cols-2 lg:grid-cols-3", children: filteredSystems.map((sys) => (_jsx(AI_SystemCard, { system: sys, onLaunch: handleLaunch, onClick: () => handleSelectSystem(sys.ref) }, sys.ref))) })) : (_jsx("div", { className: "flex flex-col gap-element", children: filteredSystems.map((sys) => (_jsx(AI_SystemCardCompact, { system: sys, onLaunch: handleLaunch, onClick: () => handleSelectSystem(sys.ref) }, sys.ref))) }))] }));
 };
 const AI_SystemCatalogToolbar = ({ searchQuery, onSearchChange, kindFilter, onKindFilterChange, statusFilter, onStatusFilterChange, viewMode, onViewModeChange, systemCount, totalCount, }) => {
     const { tComponent, isReady } = useI18n({ component: CT });
-    return (_jsxs("div", { className: "flex flex-col gap-element sm:flex-row sm:items-center sm:justify-between", children: [_jsxs("div", { className: "flex flex-1 flex-wrap items-center gap-element", children: [_jsx(InputRoot, { type: "text", value: searchQuery, onChange: (e) => onSearchChange(e.target.value), placeholder: tComponent(CT, "searchPlaceholder"), className: "min-w-[180px] max-w-xs flex-1" }), _jsx(Tabs, { value: kindFilter, onValueChange: (v) => onKindFilterChange(v), children: _jsxs(TabsList, { children: [_jsx(TabsTrigger, { value: "all", children: tComponent(CT, "allKinds") }), _jsx(TabsTrigger, { value: "flow", children: tComponent(CT, "kindFlow") }), _jsx(TabsTrigger, { value: "actor", children: tComponent(CT, "kindActor") })] }) }), _jsx(Select, { name: "statusFilter", schema: z.string(), options: STATUS_FILTER_VALUES.map((v) => ({ value: v, label: tComponent(CT, `status_${v}`) })), value: statusFilter, onChange: (v) => onStatusFilterChange(v), placeholder: tComponent(CT, "filterByStatus"), size: ControlSize.SM })] }), _jsxs("div", { className: "flex items-center gap-element", children: [_jsx("span", { className: "text-xs text-muted-foreground", children: tComponent(CT, "systemCount", { count: systemCount, total: totalCount }) }), _jsx(Tabs, { value: viewMode, onValueChange: (v) => onViewModeChange(v), children: _jsxs(TabsList, { children: [_jsx(TabsTrigger, { value: "grid", children: tComponent(CT, "gridView") }), _jsx(TabsTrigger, { value: "list", children: tComponent(CT, "listView") })] }) })] })] }));
+    if (!isReady)
+        return null;
+    return (_jsxs("div", { className: "flex flex-col gap-element sm:flex-row sm:items-center sm:justify-between", children: [_jsxs("div", { className: "flex flex-1 flex-wrap items-center gap-element", children: [_jsx(InputRoot, { type: "text", value: searchQuery, onChange: (e) => onSearchChange(e.target.value), placeholder: tComponent(CT, "searchPlaceholder"), className: "min-w-[180px] max-w-xs flex-1" }), _jsx(Tabs, { value: kindFilter, onValueChange: (v) => onKindFilterChange(v), children: _jsxs(TabsList, { children: [_jsx(TabsTrigger, { value: "all", children: tComponent(CT, "allKinds") }), _jsx(TabsTrigger, { value: "flow", children: tComponent(CT, "kindFlow") }), _jsx(TabsTrigger, { value: "actor", children: tComponent(CT, "kindActor") })] }) }), _jsx(Select, { name: "statusFilter", schema: z.string(), options: STATUS_FILTER_VALUES.map((v) => ({ value: v, label: tComponent(CT, `status_${v}`) })), value: statusFilter, onChange: (v) => onStatusFilterChange(v), placeholder: tComponent(CT, "filterByStatus"), size: ControlSize.SM })] }), _jsxs("div", { className: "flex items-center gap-element", children: [_jsx(Text, { as: "span", size: TextSize.XS, variant: TextVariant.MUTED, children: tComponent(CT, "systemCount", { count: systemCount, total: totalCount }) }), _jsx(Tabs, { value: viewMode, onValueChange: (v) => onViewModeChange(v), children: _jsxs(TabsList, { children: [_jsx(TabsTrigger, { value: "grid", children: tComponent(CT, "gridView") }), _jsx(TabsTrigger, { value: "list", children: tComponent(CT, "listView") })] }) })] })] }));
 };
 //===============================================================
 //  AI_SystemCatalogSkeleton  —  loading placeholder
@@ -80,12 +85,14 @@ export const AI_SystemCard = ({ system, onLaunch, className, ...props }) => {
     const { tComponent, isReady } = useI18n({ component: CT });
     const isActive = system.status === "active";
     const config = system.frontendRelevantConfig;
+    if (!isReady)
+        return null;
     return (_jsxs(Card, { role: "button", tabIndex: 0, onKeyDown: (e) => {
             if (e.key === "Enter" || e.key === " ") {
                 e.preventDefault();
                 props.onClick?.(e);
             }
-        }, className: cn("flex cursor-pointer flex-col transition-shadow hover:shadow-[var(--shadow-md)] focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", !isActive && "opacity-[var(--opacity-muted)]", className), ...props, children: [_jsxs(CardHeader, { children: [_jsxs("div", { className: "flex flex-wrap items-center gap-element", children: [_jsx(AI_SystemKindBadge, { kind: system.kind }), _jsx(AI_SystemStatusBadge, { status: system.status }), config.riskLevel !== "low" && _jsx(AI_RiskLevelBadge, { level: config.riskLevel })] }), _jsx(CardTitle, { className: "text-sm", children: system.displayName }), _jsx(CardDescription, { className: "line-clamp-2 text-xs", children: system.description })] }), _jsxs(CardContent, { className: "flex flex-col gap-element", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-element", children: [_jsx(Badge, { variant: "outline", className: "text-2xs", children: tComponent(CT, `scope_${config.primaryScope}`) }), config.requiresApproval && (_jsx(Badge, { variant: "secondary", className: "text-2xs", children: tComponent(CT, "requiresApproval") })), config.hasBudgetLimits && (_jsx(Badge, { variant: "secondary", className: "text-2xs", children: tComponent(CT, "hasBudgetLimits") }))] }), (system.category || (system.tags && system.tags.length > 0)) && (_jsxs("div", { className: "flex flex-wrap gap-element", children: [system.category && (_jsx(Badge, { variant: "outline", className: "text-2xs", children: system.category })), system.tags?.map((tag) => (_jsx(Badge, { variant: "secondary", className: "text-2xs", children: tag }, tag)))] }))] }), _jsx(CardFooter, { className: "mt-auto", children: _jsx(Button, { type: "button", variant: isActive ? ButtonVariants_Variant.DEFAULT : ButtonVariants_Variant.SECONDARY, disabled: !isActive, onClick: (e) => {
+        }, className: cn("flex cursor-pointer flex-col transition-shadow hover:shadow-[var(--shadow-md)] focus-ring-offset", !isActive && "opacity-[var(--opacity-muted)]", className), ...props, children: [_jsxs(CardHeader, { children: [_jsxs("div", { className: "flex flex-wrap items-center gap-element", children: [_jsx(AI_SystemKindBadge, { kind: system.kind }), _jsx(AI_SystemStatusBadge, { status: system.status }), config.riskLevel !== "low" && _jsx(AI_RiskLevelBadge, { level: config.riskLevel })] }), _jsx(CardTitle, { className: "text-sm", children: system.displayName }), _jsx(CardDescription, { className: "line-clamp-2 text-xs", children: system.description })] }), _jsxs(CardContent, { className: "flex flex-col gap-element", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-element", children: [_jsx(Badge, { variant: "outline", className: "text-2xs", children: tComponent(CT, `scope_${config.primaryScope}`) }), config.requiresApproval && (_jsx(Badge, { variant: "secondary", className: "text-2xs", children: tComponent(CT, "requiresApproval") })), config.hasBudgetLimits && (_jsx(Badge, { variant: "secondary", className: "text-2xs", children: tComponent(CT, "hasBudgetLimits") }))] }), (system.category || (system.tags && system.tags.length > 0)) && (_jsxs("div", { className: "flex flex-wrap gap-element", children: [system.category && (_jsx(Badge, { variant: "outline", className: "text-2xs", children: system.category })), system.tags?.map((tag) => (_jsx(Badge, { variant: "secondary", className: "text-2xs", children: tag }, tag)))] }))] }), _jsx(CardFooter, { className: "mt-auto", children: _jsx(Button, { type: "button", variant: isActive ? ButtonVariants_Variant.DEFAULT : ButtonVariants_Variant.SECONDARY, disabled: !isActive, onClick: (e) => {
                         e.stopPropagation();
                         onLaunch?.(system.ref);
                     }, className: "w-full", children: tComponent(CT, config.requiresApproval ? "launchWithApproval" : "launch") }) })] }));
@@ -94,12 +101,14 @@ export const AI_SystemCardCompact = ({ system, onLaunch, className, ...props })
     const { tComponent, isReady } = useI18n({ component: CT });
     const isActive = system.status === "active";
     const config = system.frontendRelevantConfig;
+    if (!isReady)
+        return null;
     return (_jsxs("div", { role: "button", tabIndex: 0, onKeyDown: (e) => {
             if (e.key === "Enter" || e.key === " ") {
                 e.preventDefault();
                 props.onClick?.(e);
             }
-        }, className: cn("flex cursor-pointer items-center gap-card rounded-lg border bg-card p-card-sm transition-shadow hover:shadow-[var(--shadow-md)] focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", !isActive && "opacity-[var(--opacity-muted)]", className), ...props, children: [_jsxs("div", { className: "flex flex-1 items-center gap-card overflow-hidden", children: [_jsxs("div", { className: "flex shrink-0 items-center gap-element", children: [_jsx(AI_SystemKindBadge, { kind: system.kind }), _jsx(AI_SystemStatusBadge, { status: system.status })] }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("p", { className: "truncate text-sm font-medium", children: system.displayName }), _jsx("p", { className: "truncate text-xs text-muted-foreground", children: system.description })] }), _jsxs("div", { className: "hidden shrink-0 items-center gap-element md:flex", children: [config.riskLevel !== "low" && _jsx(AI_RiskLevelBadge, { level: config.riskLevel }), config.requiresApproval && (_jsx(Badge, { variant: "secondary", className: "text-2xs", children: tComponent(CT, "requiresApproval") })), config.hasBudgetLimits && (_jsx(Badge, { variant: "secondary", className: "text-2xs", children: tComponent(CT, "hasBudgetLimits") }))] })] }), _jsx(Button, { type: "button", variant: isActive ? ButtonVariants_Variant.DEFAULT : ButtonVariants_Variant.SECONDARY, disabled: !isActive, size: ButtonSize.SM, onClick: (e) => {
+        }, className: cn("flex cursor-pointer items-center gap-card rounded-lg border bg-card p-card-sm transition-shadow hover:shadow-[var(--shadow-md)] focus-ring-offset", !isActive && "opacity-[var(--opacity-muted)]", className), ...props, children: [_jsxs("div", { className: "flex flex-1 items-center gap-card overflow-hidden", children: [_jsxs("div", { className: "flex shrink-0 items-center gap-element", children: [_jsx(AI_SystemKindBadge, { kind: system.kind }), _jsx(AI_SystemStatusBadge, { status: system.status })] }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("p", { className: "truncate text-sm font-medium", children: system.displayName }), _jsx("p", { className: "truncate text-xs text-muted-foreground", children: system.description })] }), _jsxs("div", { className: "hidden shrink-0 items-center gap-element md:flex", children: [config.riskLevel !== "low" && _jsx(AI_RiskLevelBadge, { level: config.riskLevel }), config.requiresApproval && (_jsx(Badge, { variant: "secondary", className: "text-2xs", children: tComponent(CT, "requiresApproval") })), config.hasBudgetLimits && (_jsx(Badge, { variant: "secondary", className: "text-2xs", children: tComponent(CT, "hasBudgetLimits") }))] })] }), _jsx(Button, { type: "button", variant: isActive ? ButtonVariants_Variant.DEFAULT : ButtonVariants_Variant.SECONDARY, disabled: !isActive, size: ButtonSize.SM, onClick: (e) => {
                     e.stopPropagation();
                     onLaunch?.(system.ref);
                 }, children: tComponent(CT, "launch") })] }));
@@ -119,14 +128,16 @@ export const AI_SystemDetail = ({ system, onBack, onLaunch, className, ...props
         });
         return execs;
     }, [flowsActors?.executions, system.ref]);
-    return (_jsxs("div", { className: cn("flex flex-col gap-card", className), ...props, children: [_jsxs("div", { className: "flex items-start justify-between gap-card", children: [_jsxs("div", { className: "flex flex-col gap-element", children: [onBack && (_jsx(Button, { type: "button", variant: ButtonVariants_Variant.GHOST, size: ButtonSize.SM, onClick: onBack, className: "self-start", children: tComponent(CT, "backToCatalog") })), _jsx("h2", { className: "text-lg font-semibold", children: system.displayName }), _jsx("p", { className: "text-sm text-muted-foreground", children: system.description }), _jsxs("div", { className: "flex flex-wrap items-center gap-element", children: [_jsx(AI_SystemKindBadge, { kind: system.kind }), _jsx(AI_SystemStatusBadge, { status: system.status }), config.riskLevel !== "low" && _jsx(AI_RiskLevelBadge, { level: config.riskLevel })] })] }), _jsx(Button, { type: "button", variant: isActive ? ButtonVariants_Variant.DEFAULT : ButtonVariants_Variant.SECONDARY, disabled: !isActive, onClick: () => onLaunch?.(system.ref), children: tComponent(CT, config.requiresApproval ? "launchWithApproval" : "launch") })] }), _jsxs(Tabs, { defaultValue: "config", children: [_jsxs(TabsList, { children: [_jsx(TabsTrigger, { value: "config", children: tComponent(CT, "detailConfig") }), system.kind === "flow" && (_jsx(TabsTrigger, { value: "preview", children: tComponent(CT, "flowPreview") })), system.kind === "actor" && (_jsx(TabsTrigger, { value: "preview", children: tComponent(CT, "actorTeamPreview") })), _jsx(TabsTrigger, { value: "executions", children: tComponent(CT, "executionHistory") })] }), _jsx(TabsContent, { value: "config", children: _jsxs("div", { className: "grid gap-card sm:grid-cols-2", children: [_jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { className: "text-sm", children: tComponent(CT, "detailConfig") }) }), _jsxs(CardContent, { className: "flex flex-col gap-element text-sm", children: [_jsx(AI_SystemDetailRow, { label: tComponent(CT, "scope"), value: tComponent(CT, `scope_${config.primaryScope}`) }), _jsx(AI_SystemDetailRow, { label: tComponent(CT, "riskLevel"), value: _jsx(AI_RiskLevelBadge, { level: config.riskLevel }) }), _jsx(AI_SystemDetailRow, { label: tComponent(CT, "requiresApproval"), value: config.requiresApproval ? tComponent(CT, "booleanYes") : tComponent(CT, "booleanNo") }), config.approverRoles && config.approverRoles.length > 0 && (_jsx(AI_SystemDetailRow, { label: tComponent(CT, "approverRoles"), value: config.approverRoles.join(", ") })), _jsx(AI_SystemDetailRow, { label: tComponent(CT, "hasBudgetLimits"), value: config.hasBudgetLimits ? tComponent(CT, "booleanYes") : tComponent(CT, "booleanNo") })] })] }), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { className: "text-sm", children: tComponent(CT, "detailMetadata") }) }), _jsxs(CardContent, { className: "flex flex-col gap-element text-sm", children: [_jsx(AI_SystemDetailRow, { label: tComponent(CT, "detailRef"), value: system.ref }), _jsx(AI_SystemDetailRow, { label: tComponent(CT, "detailKind"), value: system.kind }), _jsx(AI_SystemDetailRow, { label: tComponent(CT, "detailStatus"), value: system.status }), system.category && (_jsx(AI_SystemDetailRow, { label: tComponent(CT, "detailCategory"), value: system.category })), system.tags && system.tags.length > 0 && (_jsx(AI_SystemDetailRow, { label: tComponent(CT, "detailTags"), value: _jsx("div", { className: "flex flex-wrap gap-element", children: system.tags.map((t) => (_jsx(Badge, { variant: "secondary", className: "text-2xs", children: t }, t))) }) })), system.metadata && Object.keys(system.metadata).length > 0 && (_jsx(_Fragment, { children: Object.entries(system.metadata).map(([k, v]) => (_jsx(AI_SystemDetailRow, { label: k, value: v }, k))) }))] })] })] }) }), _jsx(TabsContent, { value: "preview", children: _jsx(Card, { children: _jsx(CardContent, { className: "p-card", children: _jsx("p", { className: "text-sm text-muted-foreground", children: system.kind === "flow"
+    if (!isReady)
+        return null;
+    return (_jsxs("div", { className: cn("flex flex-col gap-card", className), ...props, children: [_jsxs("div", { className: "flex items-start justify-between gap-card", children: [_jsxs("div", { className: "flex flex-col gap-element", children: [onBack && (_jsx(Button, { type: "button", variant: ButtonVariants_Variant.GHOST, size: ButtonSize.SM, onClick: onBack, className: "self-start", children: tComponent(CT, "backToCatalog") })), _jsx("h2", { className: "text-lg font-semibold", children: system.displayName }), _jsx(Text, { variant: TextVariant.MUTED, children: system.description }), _jsxs("div", { className: "flex flex-wrap items-center gap-element", children: [_jsx(AI_SystemKindBadge, { kind: system.kind }), _jsx(AI_SystemStatusBadge, { status: system.status }), config.riskLevel !== "low" && _jsx(AI_RiskLevelBadge, { level: config.riskLevel })] })] }), _jsx(Button, { type: "button", variant: isActive ? ButtonVariants_Variant.DEFAULT : ButtonVariants_Variant.SECONDARY, disabled: !isActive, onClick: () => onLaunch?.(system.ref), children: tComponent(CT, config.requiresApproval ? "launchWithApproval" : "launch") })] }), _jsxs(Tabs, { defaultValue: "config", children: [_jsxs(TabsList, { children: [_jsx(TabsTrigger, { value: "config", children: tComponent(CT, "detailConfig") }), system.kind === "flow" && (_jsx(TabsTrigger, { value: "preview", children: tComponent(CT, "flowPreview") })), system.kind === "actor" && (_jsx(TabsTrigger, { value: "preview", children: tComponent(CT, "actorTeamPreview") })), _jsx(TabsTrigger, { value: "executions", children: tComponent(CT, "executionHistory") })] }), _jsx(TabsContent, { value: "config", children: _jsxs("div", { className: "grid gap-card sm:grid-cols-2", children: [_jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { className: "text-sm", children: tComponent(CT, "detailConfig") }) }), _jsxs(CardContent, { className: "flex flex-col gap-element text-sm", children: [_jsx(AI_SystemDetailRow, { label: tComponent(CT, "scope"), value: tComponent(CT, `scope_${config.primaryScope}`) }), _jsx(AI_SystemDetailRow, { label: tComponent(CT, "riskLevel"), value: _jsx(AI_RiskLevelBadge, { level: config.riskLevel }) }), _jsx(AI_SystemDetailRow, { label: tComponent(CT, "requiresApproval"), value: config.requiresApproval ? tComponent(CT, "booleanYes") : tComponent(CT, "booleanNo") }), config.approverRoles && config.approverRoles.length > 0 && (_jsx(AI_SystemDetailRow, { label: tComponent(CT, "approverRoles"), value: config.approverRoles.join(", ") })), _jsx(AI_SystemDetailRow, { label: tComponent(CT, "hasBudgetLimits"), value: config.hasBudgetLimits ? tComponent(CT, "booleanYes") : tComponent(CT, "booleanNo") })] })] }), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { className: "text-sm", children: tComponent(CT, "detailMetadata") }) }), _jsxs(CardContent, { className: "flex flex-col gap-element text-sm", children: [_jsx(AI_SystemDetailRow, { label: tComponent(CT, "detailRef"), value: system.ref }), _jsx(AI_SystemDetailRow, { label: tComponent(CT, "detailKind"), value: system.kind }), _jsx(AI_SystemDetailRow, { label: tComponent(CT, "detailStatus"), value: system.status }), system.category && (_jsx(AI_SystemDetailRow, { label: tComponent(CT, "detailCategory"), value: system.category })), system.tags && system.tags.length > 0 && (_jsx(AI_SystemDetailRow, { label: tComponent(CT, "detailTags"), value: _jsx("div", { className: "flex flex-wrap gap-element", children: system.tags.map((t) => (_jsx(Badge, { variant: "secondary", className: "text-2xs", children: t }, t))) }) })), system.metadata && Object.keys(system.metadata).length > 0 && (_jsx(_Fragment, { children: Object.entries(system.metadata).map(([k, v]) => (_jsx(AI_SystemDetailRow, { label: k, value: v }, k))) }))] })] })] }) }), _jsx(TabsContent, { value: "preview", children: _jsx(Card, { children: _jsx(CardContent, { className: "p-card", children: _jsx(Text, { variant: TextVariant.MUTED, children: system.kind === "flow"
                                         ? tComponent(CT, "flowPreviewPlaceholder")
-                                        : tComponent(CT, "actorTeamPreviewPlaceholder") }) }) }) }), _jsx(TabsContent, { value: "executions", children: systemExecutions.length === 0 ? (_jsx("div", { className: "flex items-center justify-center rounded-lg border bg-card p-section", children: _jsx("p", { className: "text-sm text-muted-foreground", children: tComponent(CT, "noExecutions") }) })) : (_jsx(ScrollArea, { className: "max-h-96", children: _jsx("div", { className: "flex flex-col gap-element", children: systemExecutions.map((exec) => (_jsx(AI_ExecutionRow, { execution: exec }, exec.executionId))) }) })) })] })] }));
+                                        : tComponent(CT, "actorTeamPreviewPlaceholder") }) }) }) }), _jsx(TabsContent, { value: "executions", children: systemExecutions.length === 0 ? (_jsx("div", { className: "flex items-center justify-center rounded-lg border bg-card p-section", children: _jsx(Text, { variant: TextVariant.MUTED, children: tComponent(CT, "noExecutions") }) })) : (_jsx(ScrollArea, { className: "max-h-96", children: _jsx("div", { className: "flex flex-col gap-element", children: systemExecutions.map((exec) => (_jsx(AI_ExecutionRow, { execution: exec }, exec.executionId))) }) })) })] })] }));
 };
 //===============================================================
 //  AI_SystemDetailRow  —  key-value display row
 //===============================================================
-const AI_SystemDetailRow = ({ label, value, }) => (_jsxs("div", { className: "flex items-start justify-between gap-card", children: [_jsx("span", { className: "text-xs font-medium text-muted-foreground", children: label }), _jsx("span", { className: "text-end text-xs", children: value })] }));
+const AI_SystemDetailRow = ({ label, value, }) => (_jsxs("div", { className: "flex items-start justify-between gap-card", children: [_jsx(Text, { as: "span", size: TextSize.XS, variant: TextVariant.MUTED, className: "font-medium", children: label }), _jsx(Text, { as: "span", size: TextSize.XS, className: "text-end", children: value })] }));
 //===============================================================
 //  AI_ExecutionRow  —  compact execution display
 //===============================================================
@@ -140,10 +151,14 @@ const EXECUTION_STATUS_VARIANT = {
 };
 const AI_ExecutionRow = ({ execution, }) => {
     const { tComponent, isReady } = useI18n({ component: CT });
-    return (_jsxs("div", { className: "flex items-center gap-card rounded-lg border bg-card p-card-sm", children: [_jsx(Badge, { variant: EXECUTION_STATUS_VARIANT[execution.status] ?? "secondary", className: "text-2xs", children: tComponent(CT, `execStatus_${execution.status}`) }), _jsx("span", { className: "flex-1 truncate text-xs text-muted-foreground", children: execution.executionId }), execution.progress != null && (_jsxs("span", { className: "text-2xs text-muted-foreground", children: [execution.progress, "%"] })), execution.currentStep && (_jsx("span", { className: "hidden text-2xs text-muted-foreground sm:inline", children: execution.currentStep }))] }));
+    if (!isReady)
+        return null;
+    return (_jsxs("div", { className: "flex items-center gap-card rounded-lg border bg-card p-card-sm", children: [_jsx(Badge, { variant: EXECUTION_STATUS_VARIANT[execution.status] ?? "secondary", className: "text-2xs", children: tComponent(CT, `execStatus_${execution.status}`) }), _jsx(Text, { as: "span", size: TextSize.XS, variant: TextVariant.MUTED, className: "flex-1 truncate", children: execution.executionId }), execution.progress != null && (_jsxs("span", { className: "text-2xs text-muted-foreground", children: [execution.progress, "%"] })), execution.currentStep && (_jsx("span", { className: "hidden text-2xs text-muted-foreground sm:inline", children: execution.currentStep }))] }));
 };
 export const AI_SystemKindBadge = ({ kind, className, }) => {
     const { tComponent, isReady } = useI18n({ component: CT });
+    if (!isReady)
+        return null;
     return (_jsx(Badge, { variant: kind === "flow" ? "default" : "secondary", className: cn("text-2xs", className), children: kind === "flow" ? tComponent(CT, "kindFlow") : tComponent(CT, "kindActor") }));
 };
 const SYSTEM_STATUS_STYLES = {
@@ -156,6 +171,8 @@ const SYSTEM_STATUS_STYLES = {
 export const AI_SystemStatusBadge = ({ status, className, }) => {
     const { tComponent, isReady } = useI18n({ component: CT });
     const style = SYSTEM_STATUS_STYLES[status] ?? { variant: "secondary" };
+    if (!isReady)
+        return null;
     return (_jsx(Badge, { variant: style.variant, className: cn("text-2xs", style.extraClass, className), children: tComponent(CT, `status_${status}`) }));
 };
 const RISK_LEVEL_STYLES = {
@@ -167,6 +184,8 @@ const RISK_LEVEL_STYLES = {
 export const AI_RiskLevelBadge = ({ level, className, }) => {
     const { tComponent, isReady } = useI18n({ component: CT });
     const style = RISK_LEVEL_STYLES[level] ?? { variant: "outline" };
+    if (!isReady)
+        return null;
     return (_jsx(Badge, { variant: style.variant, className: cn("text-2xs", style.extraClass, className), children: tComponent(CT, `riskLevel_${level}`) }));
 };
-//# sourceMappingURL=system-catalog.js.map
+//# sourceMappingURL=system-catalog.js.map