@workflow/web 5.0.0-beta.1 → 5.0.0-beta.2

package/build/client/assets/root-ClRrWHkX.js

@@ -0,0 +1,690 @@
+import { r as reactExports, j as jsxRuntimeExports, w as withComponentProps, v as withErrorBoundaryProps, M as Meta, L as Links, S as ScrollRestoration, x as Scripts, O as Outlet, y as useRouteError, i as isRouteErrorResponse, z as Link, A as useNavigate, B as useSearchParams } from "./index-DQa-BExo.js";
+import { c as createLucideIcon, u as useServerConfig, T as Tooltip, a as TooltipTrigger, b as TooltipContent, r as runHealthCheck, t as toast, B as Button, L as LoaderCircle, d as cn, e as Toaster$1, S as ServerConfigProvider, f as TooltipProvider } from "./mermaid-3ZIDBTTL-B9v3aKRl.js";
+var M = (e, i, s, u, m, a, l, h) => {
+  let d = document.documentElement, w = ["light", "dark"];
+  function p(n) {
+    (Array.isArray(e) ? e : [e]).forEach((y) => {
+      let k = y === "class", S = k && a ? m.map((f) => a[f] || f) : m;
+      k ? (d.classList.remove(...S), d.classList.add(a && a[n] ? a[n] : n)) : d.setAttribute(y, n);
+    }), R(n);
+  }
+  function R(n) {
+    h && w.includes(n) && (d.style.colorScheme = n);
+  }
+  function c() {
+    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  }
+  if (u) p(u);
+  else try {
+    let n = localStorage.getItem(i) || s, y = l && n === "system" ? c() : n;
+    p(y);
+  } catch (n) {
+  }
+};
+var b = ["light", "dark"], I = "(prefers-color-scheme: dark)", O = typeof window == "undefined", x = reactExports.createContext(void 0), U = { setTheme: (e) => {
+}, themes: [] }, z = () => {
+  var e;
+  return (e = reactExports.useContext(x)) != null ? e : U;
+}, J = (e) => reactExports.useContext(x) ? reactExports.createElement(reactExports.Fragment, null, e.children) : reactExports.createElement(V, { ...e }), N = ["light", "dark"], V = ({ forcedTheme: e, disableTransitionOnChange: i = false, enableSystem: s = true, enableColorScheme: u = true, storageKey: m = "theme", themes: a = N, defaultTheme: l = s ? "system" : "light", attribute: h = "data-theme", value: d, children: w, nonce: p, scriptProps: R }) => {
+  let [c, n] = reactExports.useState(() => H(m, l)), [T, y] = reactExports.useState(() => c === "system" ? E() : c), k = d ? Object.values(d) : a, S = reactExports.useCallback((o) => {
+    let r = o;
+    if (!r) return;
+    o === "system" && s && (r = E());
+    let v = d ? d[r] : r, C = i ? W(p) : null, P = document.documentElement, L = (g) => {
+      g === "class" ? (P.classList.remove(...k), v && P.classList.add(v)) : g.startsWith("data-") && (v ? P.setAttribute(g, v) : P.removeAttribute(g));
+    };
+    if (Array.isArray(h) ? h.forEach(L) : L(h), u) {
+      let g = b.includes(l) ? l : null, D = b.includes(r) ? r : g;
+      P.style.colorScheme = D;
+    }
+    C == null || C();
+  }, [p]), f = reactExports.useCallback((o) => {
+    let r = typeof o == "function" ? o(c) : o;
+    n(r);
+    try {
+      localStorage.setItem(m, r);
+    } catch (v) {
+    }
+  }, [c]), A = reactExports.useCallback((o) => {
+    let r = E(o);
+    y(r), c === "system" && s && !e && S("system");
+  }, [c, e]);
+  reactExports.useEffect(() => {
+    let o = window.matchMedia(I);
+    return o.addListener(A), A(o), () => o.removeListener(A);
+  }, [A]), reactExports.useEffect(() => {
+    let o = (r) => {
+      r.key === m && (r.newValue ? n(r.newValue) : f(l));
+    };
+    return window.addEventListener("storage", o), () => window.removeEventListener("storage", o);
+  }, [f]), reactExports.useEffect(() => {
+    S(e != null ? e : c);
+  }, [e, c]);
+  let Q = reactExports.useMemo(() => ({ theme: c, setTheme: f, forcedTheme: e, resolvedTheme: c === "system" ? T : c, themes: s ? [...a, "system"] : a, systemTheme: s ? T : void 0 }), [c, f, e, T, s, a]);
+  return reactExports.createElement(x.Provider, { value: Q }, reactExports.createElement(_, { forcedTheme: e, storageKey: m, attribute: h, enableSystem: s, enableColorScheme: u, defaultTheme: l, value: d, themes: a, nonce: p, scriptProps: R }), w);
+}, _ = reactExports.memo(({ forcedTheme: e, storageKey: i, attribute: s, enableSystem: u, enableColorScheme: m, defaultTheme: a, value: l, themes: h, nonce: d, scriptProps: w }) => {
+  let p = JSON.stringify([s, i, a, e, h, l, u, m]).slice(1, -1);
+  return reactExports.createElement("script", { ...w, suppressHydrationWarning: true, nonce: typeof window == "undefined" ? d : "", dangerouslySetInnerHTML: { __html: `(${M.toString()})(${p})` } });
+}), H = (e, i) => {
+  if (O) return;
+  let s;
+  try {
+    s = localStorage.getItem(e) || void 0;
+  } catch (u) {
+  }
+  return s || i;
+}, W = (e) => {
+  let i = document.createElement("style");
+  return e && i.setAttribute("nonce", e), i.appendChild(document.createTextNode("*,*::before,*::after{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}")), document.head.appendChild(i), () => {
+    window.getComputedStyle(document.body), setTimeout(() => {
+      document.head.removeChild(i);
+    }, 1);
+  };
+}, E = (e) => (e || (e = window.matchMedia(I)), e.matches ? "dark" : "light");
+/**
+ * @license lucide-react v0.575.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$4 = [
+  [
+    "path",
+    {
+      d: "M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2",
+      key: "169zse"
+    }
+  ]
+];
+const Activity = createLucideIcon("activity", __iconNode$4);
+/**
+ * @license lucide-react v0.575.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$3 = [
+  ["path", { d: "M7 7h10v10", key: "1tivn9" }],
+  ["path", { d: "M7 17 17 7", key: "1vkiza" }]
+];
+const ArrowUpRight = createLucideIcon("arrow-up-right", __iconNode$3);
+/**
+ * @license lucide-react v0.575.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$2 = [
+  ["rect", { width: "20", height: "14", x: "2", y: "3", rx: "2", key: "48i651" }],
+  ["line", { x1: "8", x2: "16", y1: "21", y2: "21", key: "1svkeh" }],
+  ["line", { x1: "12", x2: "12", y1: "17", y2: "21", key: "vw1qmm" }]
+];
+const Monitor = createLucideIcon("monitor", __iconNode$2);
+/**
+ * @license lucide-react v0.575.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$1 = [
+  [
+    "path",
+    {
+      d: "M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401",
+      key: "kfwtm"
+    }
+  ]
+];
+const Moon = createLucideIcon("moon", __iconNode$1);
+/**
+ * @license lucide-react v0.575.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode = [
+  ["circle", { cx: "12", cy: "12", r: "4", key: "4exip2" }],
+  ["path", { d: "M12 2v2", key: "tus03m" }],
+  ["path", { d: "M12 20v2", key: "1lh1kg" }],
+  ["path", { d: "m4.93 4.93 1.41 1.41", key: "149t6j" }],
+  ["path", { d: "m17.66 17.66 1.41 1.41", key: "ptbguv" }],
+  ["path", { d: "M2 12h2", key: "1t8f8n" }],
+  ["path", { d: "M20 12h2", key: "1q8mjw" }],
+  ["path", { d: "m6.34 17.66-1.41 1.41", key: "1m8zz5" }],
+  ["path", { d: "m19.07 4.93-1.41 1.41", key: "1shlcs" }]
+];
+const Sun = createLucideIcon("sun", __iconNode);
+function getLocalShortName(displayInfo) {
+  return displayInfo == null ? void 0 : displayInfo["local.shortName"];
+}
+function getShowLocalMisconfigWarning(backendId, displayInfo) {
+  return (backendId === "local" || backendId === "@workflow/world-local") && getLocalShortName(displayInfo) === "packages/web";
+}
+function getVercelDisplayString(publicEnv) {
+  const env = publicEnv.WORKFLOW_VERCEL_ENV || "production";
+  const team = publicEnv.WORKFLOW_VERCEL_TEAM;
+  const project = publicEnv.WORKFLOW_VERCEL_PROJECT;
+  const vercelInfo = team && project ? `${team}/${project}` : project || team || "Unknown";
+  return `Connected to Vercel ${env} (${vercelInfo})`;
+}
+function getPostgresDisplayString(displayInfo) {
+  const host = displayInfo == null ? void 0 : displayInfo["derived.WORKFLOW_POSTGRES_URL.hostname"];
+  const db = displayInfo == null ? void 0 : displayInfo["derived.WORKFLOW_POSTGRES_URL.database"];
+  if (!host) return "Connected to Postgres";
+  return `Connected to Postgres (${host}${db ? `/${db}` : ""})`;
+}
+function getDisplayString(config) {
+  const { backendDisplayName, backendId, displayInfo, publicEnv } = config;
+  switch (backendId) {
+    case "local":
+    case "@workflow/world-local":
+      return `Local Dev: ${getLocalShortName(displayInfo) || "Unknown"}`;
+    case "vercel":
+    case "@workflow/world-vercel":
+      return getVercelDisplayString(publicEnv);
+    case "postgres":
+    case "@workflow/world-postgres":
+      return getPostgresDisplayString(displayInfo);
+    default:
+      return `Connected to: ${backendDisplayName}`;
+  }
+}
+function renderKeyValueTable(rows) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-[auto,1fr] gap-x-4 gap-y-1", children: rows.map(({ key, value }) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "contents", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-mono text-xs text-muted-foreground", children: key }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-mono text-xs text-foreground break-all", children: value })
+  ] }, key)) });
+}
+function ConnectionStatus() {
+  const { serverConfig } = useServerConfig();
+  const displayString = getDisplayString(serverConfig);
+  const { backendId } = serverConfig;
+  const showLocalMisconfigWarning = getShowLocalMisconfigWarning(
+    backendId,
+    serverConfig.displayInfo
+  );
+  const publicEnvEntries = Object.entries(serverConfig.publicEnv).sort(
+    ([a], [b2]) => a.localeCompare(b2)
+  );
+  const sensitiveKeys = [...serverConfig.sensitiveEnvKeys].sort();
+  const hasTooltip = publicEnvEntries.length > 0 || sensitiveKeys.length > 0 || showLocalMisconfigWarning;
+  const content = /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-md whitespace-nowrap", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-medium", children: displayString }) });
+  if (!hasTooltip) {
+    return content;
+  }
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: content }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2 max-w-[640px]", children: [
+      showLocalMisconfigWarning && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-2", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-medium text-foreground", children: "Local data directory looks misconfigured" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-muted-foreground", children: [
+          "This UI appears to be pointing at ",
+          /* @__PURE__ */ jsxRuntimeExports.jsx("code", { children: "packages/web" }),
+          ". Configure the local data directory / working directory and restart the web UI. See",
+          " ",
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "a",
+            {
+              className: "underline",
+              href: "https://workflow-sdk.dev/docs/observability",
+              target: "_blank",
+              rel: "noopener noreferrer",
+              children: "docs"
+            }
+          ),
+          "."
+        ] })
+      ] }),
+      renderKeyValueTable([
+        ...publicEnvEntries.map(([key, value]) => ({ key, value })),
+        ...sensitiveKeys.map((key) => ({ key, value: "*****" }))
+      ])
+    ] }) })
+  ] });
+}
+function HealthCheckButton() {
+  const [isChecking, setIsChecking] = reactExports.useState(false);
+  const env = reactExports.useMemo(() => ({}), []);
+  const runChecks = reactExports.useCallback(async () => {
+    setIsChecking(true);
+    const endpoints = ["workflow", "step"];
+    const results = [];
+    try {
+      for (const endpoint of endpoints) {
+        const response = await runHealthCheck(env, endpoint, {
+          timeout: 3e4
+        });
+        if (response.success) {
+          results.push({ endpoint, result: response.data });
+        }
+      }
+      const allHealthy = results.every((r) => r.result.healthy);
+      const anyHealthy = results.some((r) => r.result.healthy);
+      if (allHealthy) {
+        const totalLatency = results.reduce(
+          (sum, r) => sum + (r.result.latencyMs ?? 0),
+          0
+        );
+        toast.success("All endpoints healthy", {
+          description: `Workflow and Step endpoints are responding (${totalLatency}ms total)`
+        });
+      } else if (anyHealthy) {
+        const healthy = results.filter((r) => r.result.healthy);
+        const unhealthy = results.filter((r) => !r.result.healthy);
+        toast.warning("Partial health check success", {
+          description: `${healthy.map((r) => r.endpoint).join(", ")} OK; ${unhealthy.map((r) => `${r.endpoint}: ${r.result.error || "failed"}`).join(", ")}`
+        });
+      } else {
+        const errors = results.map((r) => `${r.endpoint}: ${r.result.error || "failed"}`).join("; ");
+        toast.error("Health check failed", {
+          description: errors
+        });
+      }
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error);
+      toast.error("Health check error", {
+        description: message
+      });
+    } finally {
+      setIsChecking(false);
+    }
+  }, [env]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      Button,
+      {
+        variant: "ghost",
+        size: "sm",
+        onClick: runChecks,
+        disabled: isChecking,
+        className: "gap-1.5",
+        children: [
+          isChecking ? /* @__PURE__ */ jsxRuntimeExports.jsx(LoaderCircle, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Activity, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "hidden sm:inline", children: isChecking ? "Checking..." : "Health Check" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { children: [
+      "Run a queue-based health check on workflow and step endpoints.",
+      /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
+      "This bypasses Deployment Protection."
+    ] }) })
+  ] });
+}
+function SegmentedControl({
+  value,
+  onValueChange,
+  options,
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "div",
+    {
+      className: cn(
+        "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
+        className
+      ),
+      children: options.map((option) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => onValueChange(option.value),
+          className: cn(
+            "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+            value === option.value ? "bg-background text-foreground shadow" : "hover:bg-background/50"
+          ),
+          children: [
+            option.icon,
+            option.label && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ml-2", children: option.label })
+          ]
+        },
+        option.value
+      ))
+    }
+  );
+}
+function ThemePicker() {
+  const { theme, setTheme } = z();
+  const currentTheme = theme || "system";
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    SegmentedControl,
+    {
+      value: currentTheme,
+      onValueChange: (value) => setTheme(value),
+      options: [
+        { value: "system", icon: /* @__PURE__ */ jsxRuntimeExports.jsx(Monitor, { className: "h-4 w-4" }) },
+        { value: "light", icon: /* @__PURE__ */ jsxRuntimeExports.jsx(Sun, { className: "h-4 w-4" }) },
+        { value: "dark", icon: /* @__PURE__ */ jsxRuntimeExports.jsx(Moon, { className: "h-4 w-4" }) }
+      ],
+      className: "h-8"
+    }
+  );
+}
+function DocsLink() {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { asChild: true, variant: "outline", size: "sm", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    "a",
+    {
+      href: "https://workflow-sdk.dev/docs/observability",
+      target: "_blank",
+      rel: "noopener noreferrer",
+      className: "gap-1",
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Docs" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(ArrowUpRight, { className: "h-4 w-4" })
+      ]
+    }
+  ) });
+}
+const Toaster = ({ ...props }) => {
+  const { theme = "system" } = z();
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    Toaster$1,
+    {
+      theme,
+      className: "toaster group",
+      toastOptions: {
+        classNames: {
+          toast: "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+          description: "group-[.toast]:text-muted-foreground",
+          actionButton: "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+          cancelButton: "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+          error: "group-[.toaster]:bg-destructive group-[.toaster]:text-destructive-foreground group-[.toaster]:border-destructive",
+          success: "group-[.toaster]:bg-green-600 group-[.toaster]:text-white group-[.toaster]:border-green-600"
+        }
+      },
+      ...props
+    }
+  );
+};
+function Logo({ className } = {}) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    "svg",
+    {
+      viewBox: "0 0 1792 240",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className: className || "h-6 w-auto",
+      role: "img",
+      "aria-label": "Workflow Logo",
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("title", { children: "Workflow Logo" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "path",
+          {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M753.933 55.627C806.249 55.627 840.685 91.718 840.685 147.345C840.685 202.971 806.249 239.062 753.933 239.062C701.286 239.062 666.851 202.971 666.851 147.345C666.851 91.7181 701.286 55.6271 753.933 55.627ZM753.933 90.0625C726.451 90.0626 710.889 111.254 710.889 147.345C710.889 183.436 726.451 204.627 753.933 204.627C781.084 204.627 796.978 183.436 796.978 147.345C796.978 111.254 781.084 90.0625 753.933 90.0625Z",
+            className: "fill-foreground"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "path",
+          {
+            fillRule: "evenodd",
+            clipRule: "evenodd",
+            d: "M1445.65 55.627C1497.96 55.627 1532.4 91.718 1532.4 147.345C1532.4 202.971 1497.96 239.062 1445.65 239.062C1393 239.062 1358.56 202.971 1358.56 147.345C1358.56 91.718 1393 55.627 1445.65 55.627ZM1445.65 90.0625C1418.16 90.0625 1402.6 111.254 1402.6 147.345C1402.6 183.436 1418.16 204.627 1445.65 204.627C1472.8 204.627 1488.69 183.436 1488.69 147.345C1488.69 111.254 1472.8 90.0626 1445.65 90.0625Z",
+            className: "fill-foreground"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "path",
+          {
+            d: "M902.473 94.0361C909.095 70.8584 922.34 59.5997 944.855 59.5996H961.079V92.3799H944.524C916.38 92.38 904.128 106.949 904.128 135.094V235.089H861.746V59.5996H901.48L902.473 94.0361Z",
+            className: "fill-foreground"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "path",
+          {
+            d: "M1019.25 138.735L1091.11 59.5996H1143.09L1074.55 132.113L1146.4 235.089H1098.72L1046.74 157.609L1019.25 187.078V235.089H976.872V0H1019.25V138.735Z",
+            className: "fill-foreground"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "path",
+          {
+            d: "M1263.63 32.7803H1235.82C1224.89 32.7803 1217.28 41.3893 1217.28 54.9648V59.5996H1260.98V92.3799H1217.28V235.089H1174.56V92.3799H1149.4V59.5996H1174.56V54.9648C1174.56 19.5359 1191.78 0 1230.85 0H1263.63V32.7803Z",
+            className: "fill-foreground"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "path",
+          {
+            d: "M1322.58 189.396C1322.58 197.673 1327.22 202.309 1335.5 202.31H1348.74V235.089H1324.57C1298.08 235.089 1280.2 218.534 1280.2 191.052V0H1322.58V189.396Z",
+            className: "fill-foreground"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "path",
+          {
+            d: "M1604.59 186.416L1641.02 59.5996H1677.77L1713.86 186.416L1749.95 59.5996H1791.34L1737.7 235.089H1694.32L1659.56 116.883L1624.79 235.089H1581.42L1527.77 59.5996H1568.83L1604.59 186.416Z",
+            className: "fill-foreground"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "path",
+          {
+            d: "M472.173 174.847L514.895 0.671875H554.66L598.038 174.847L640.432 0.671875H685.454L623.015 234H575.692L534.942 77.5713L493.863 234H446.869L384.1 0.671875H429.122L472.173 174.847Z",
+            className: "fill-foreground"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "path",
+          {
+            d: "M125.776 0C120.929 1.64945e-05 117 3.9291 117 8.77539V61.4248C117 66.2711 120.929 70.2002 125.776 70.2002H160.875L161.253 70.2051C169.032 70.4023 175.301 76.6734 175.495 84.4531L175.5 84.8252V143.325C175.5 148.171 179.429 152.101 184.276 152.101H219.375L219.753 152.105C227.53 152.303 233.798 158.571 233.995 166.348L234 166.726V225.225C234 230.071 237.929 234 242.776 234H295.425C300.271 234 304.2 230.071 304.2 225.225V172.575C304.2 167.729 300.271 163.8 295.425 163.8H260.25C252.334 163.76 245.905 157.43 245.705 149.553L245.7 149.176V90.6758C245.7 85.8295 241.771 81.9004 236.925 81.9004H201.825C193.874 81.9004 187.405 75.5551 187.205 67.6523L187.2 67.2754V8.77539C187.2 3.9291 183.271 1.64951e-05 178.425 0H125.776Z",
+            className: "fill-foreground"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "path",
+          {
+            d: "M67.2755 81.9004C62.4293 81.9004 58.5002 85.8295 58.5002 90.6758V143.325C58.5004 148.171 62.4294 152.101 67.2755 152.101H102.375L102.753 152.105C110.53 152.303 116.798 158.571 116.995 166.348L117 166.726V225.225C117 230.071 120.929 234 125.776 234H178.425C183.271 234 187.2 230.071 187.2 225.225V172.575C187.2 167.729 183.271 163.8 178.425 163.8H143.25C135.334 163.76 128.905 157.43 128.705 149.553L128.7 149.176V90.6758C128.7 85.8295 124.771 81.9004 119.925 81.9004H67.2755Z",
+            className: "fill-foreground"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "path",
+          {
+            d: "M8.77454 163.8C3.92844 163.8 0.00012207 167.729 0.00012207 172.575V225.225C0.00012207 230.071 3.92844 234 8.77454 234H61.4249C66.2712 234 70.2003 230.071 70.2003 225.225V172.575C70.2003 167.729 66.2712 163.8 61.4249 163.8H8.77454Z",
+            className: "fill-foreground"
+          }
+        )
+      ]
+    }
+  );
+}
+function Layout({
+  children
+}) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("html", {
+    lang: "en",
+    suppressHydrationWarning: true,
+    children: [/* @__PURE__ */ jsxRuntimeExports.jsxs("head", {
+      children: [/* @__PURE__ */ jsxRuntimeExports.jsx("meta", {
+        charSet: "utf-8"
+      }), /* @__PURE__ */ jsxRuntimeExports.jsx("meta", {
+        name: "viewport",
+        content: "width=device-width, initial-scale=1"
+      }), /* @__PURE__ */ jsxRuntimeExports.jsx("link", {
+        rel: "icon",
+        href: "/favicon.ico"
+      }), /* @__PURE__ */ jsxRuntimeExports.jsx("title", {
+        children: "Workflow Observability UI"
+      }), /* @__PURE__ */ jsxRuntimeExports.jsx("meta", {
+        name: "description",
+        content: "Web interface for inspecting flow runs, steps, streams, and events"
+      }), /* @__PURE__ */ jsxRuntimeExports.jsx(Meta, {}), /* @__PURE__ */ jsxRuntimeExports.jsx(Links, {})]
+    }), /* @__PURE__ */ jsxRuntimeExports.jsxs("body", {
+      className: "antialiased",
+      children: [children, /* @__PURE__ */ jsxRuntimeExports.jsx(ScrollRestoration, {}), /* @__PURE__ */ jsxRuntimeExports.jsx(Scripts, {})]
+    })]
+  });
+}
+function computeDirectRunUrl(params) {
+  const {
+    runId,
+    stepId,
+    hookId
+  } = params;
+  if (stepId) {
+    return `/run/${runId}?sidebar=step&stepId=${stepId}`;
+  }
+  if (hookId) {
+    return `/run/${runId}?sidebar=hook&hookId=${hookId}`;
+  }
+  return `/run/${runId}`;
+}
+function computeResourceUrl(params) {
+  const {
+    resource,
+    id,
+    runId
+  } = params;
+  switch (resource) {
+    case "run":
+      return `/run/${id}`;
+    case "step":
+      return runId ? `/run/${runId}?sidebar=step&stepId=${id}` : null;
+    case "stream":
+      return runId ? `/run/${runId}?sidebar=stream&streamId=${id}` : null;
+    case "event":
+      return runId ? `/run/${runId}?sidebar=event&eventId=${id}` : null;
+    case "hook":
+      return runId ? `/run/${runId}?sidebar=hook&hookId=${id}` : `/?sidebar=hook&hookId=${id}`;
+    default:
+      return null;
+  }
+}
+function LayoutContent({
+  children
+}) {
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+  const {
+    setTheme
+  } = z();
+  const id = searchParams.get("id");
+  const runId = searchParams.get("runId");
+  const stepId = searchParams.get("stepId");
+  const hookId = searchParams.get("hookId");
+  const resource = searchParams.get("resource");
+  const themeParam = searchParams.get("theme");
+  const hasNavigatedRef = reactExports.useRef(false);
+  reactExports.useEffect(() => {
+    if (themeParam && (themeParam === "light" || themeParam === "dark" || themeParam === "system")) {
+      setTheme(themeParam);
+    }
+  }, [themeParam, setTheme]);
+  reactExports.useEffect(() => {
+    const pathname = window.location.pathname;
+    if (pathname.startsWith("/run/")) {
+      hasNavigatedRef.current = true;
+      return;
+    }
+    if (pathname !== "/" && hasNavigatedRef.current) {
+      return;
+    }
+    if (resource) {
+      if (!id) return;
+      const url = computeResourceUrl({
+        resource,
+        id,
+        runId
+      });
+      if (url) {
+        hasNavigatedRef.current = true;
+        navigate(url);
+      } else {
+        console.warn(`Can't deep-link to ${resource} ${id}.`);
+      }
+      return;
+    }
+    if (runId) {
+      hasNavigatedRef.current = true;
+      navigate(computeDirectRunUrl({
+        runId,
+        stepId,
+        hookId
+      }));
+      return;
+    }
+  }, [resource, id, runId, stepId, hookId, navigate]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
+    className: "min-h-screen flex flex-col",
+    children: [/* @__PURE__ */ jsxRuntimeExports.jsxs(TooltipProvider, {
+      delayDuration: 0,
+      children: [/* @__PURE__ */ jsxRuntimeExports.jsx("div", {
+        className: "sticky top-0 z-50 bg-background border-b px-6 py-4",
+        children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
+          className: "flex items-center justify-between w-full",
+          children: [/* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
+            className: "flex items-center gap-4",
+            children: [/* @__PURE__ */ jsxRuntimeExports.jsx(Link, {
+              to: "/",
+              children: /* @__PURE__ */ jsxRuntimeExports.jsx("h1", {
+                className: "flex items-center gap-2",
+                title: "Workflow Observability",
+                children: /* @__PURE__ */ jsxRuntimeExports.jsx(Logo, {})
+              })
+            }), /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
+              className: "h-6 w-px bg-border",
+              "aria-hidden": "true"
+            }), /* @__PURE__ */ jsxRuntimeExports.jsx(ConnectionStatus, {})]
+          }), /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
+            className: "ml-auto flex items-center gap-2",
+            children: [/* @__PURE__ */ jsxRuntimeExports.jsx(HealthCheckButton, {}), /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
+              className: "h-6 w-px bg-border",
+              "aria-hidden": "true"
+            }), /* @__PURE__ */ jsxRuntimeExports.jsx(ThemePicker, {}), /* @__PURE__ */ jsxRuntimeExports.jsx(DocsLink, {})]
+          })]
+        })
+      }), /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
+        className: "flex-1 px-6 pt-6",
+        children
+      })]
+    }), /* @__PURE__ */ jsxRuntimeExports.jsx(Toaster, {})]
+  });
+}
+const root = withComponentProps(function App({
+  loaderData
+}) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(J, {
+    attribute: "class",
+    defaultTheme: "system",
+    enableSystem: true,
+    disableTransitionOnChange: true,
+    storageKey: "workflow-theme",
+    children: /* @__PURE__ */ jsxRuntimeExports.jsx(ServerConfigProvider, {
+      serverConfig: loaderData.serverConfig,
+      children: /* @__PURE__ */ jsxRuntimeExports.jsx(LayoutContent, {
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx(Outlet, {})
+      })
+    })
+  });
+});
+const ErrorBoundary = withErrorBoundaryProps(function ErrorBoundary2() {
+  const error = useRouteError();
+  const isNotFound = isRouteErrorResponse(error) && error.status === 404;
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
+    className: "min-h-screen flex items-center justify-center",
+    children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
+      className: "text-center",
+      children: [/* @__PURE__ */ jsxRuntimeExports.jsx("h1", {
+        className: "text-4xl font-bold mb-4",
+        children: isNotFound ? "404" : "Error"
+      }), /* @__PURE__ */ jsxRuntimeExports.jsx("p", {
+        className: "text-muted-foreground mb-6",
+        children: isNotFound ? "This page does not exist." : "Something went wrong."
+      }), /* @__PURE__ */ jsxRuntimeExports.jsx(Link, {
+        to: "/",
+        className: "text-primary underline",
+        children: "Go to dashboard"
+      })]
+    })
+  });
+});
+export {
+  ErrorBoundary,
+  Layout,
+  root as default
+};