@magemetrics/ai 0.0.27 → 0.0.29

package/dist/web-component/{web-component-D6IanYiA.js → web-component-BC-1HsSF.js}

@@ -12259,7 +12259,7 @@ class RealtimeClient {
         close: () => {
           this.conn = null;
         }
-      }), import("./browser-BwTlMJQO.js").then((R) => R.b).then(({ default: R }) => {
+      }), import("./browser-P0ubu0oY.js").then((R) => R.b).then(({ default: R }) => {
         this.conn = new R(this.endpointURL(), void 0, {
           headers: this.headers
         }), this.setupConnection();
@@ -33117,17 +33117,21 @@ const AnalyzeRequestSchema = z$1.object({
   }).array()
 });
 z$1.object({
-  matched_from_descriptions: z$1.number().array(),
-  matched_from_values: z$1.number().array()
+  id: z$1.number(),
+  flow_data_id: z$1.number(),
+  created_at: z$1.string(),
+  updated_at: z$1.string(),
+  response_type: z$1.string(),
+  summary: z$1.string()
 });
 z$1.object({
   findings: z$1.object({
     title: z$1.string(),
     value: z$1.string(),
-    subtitle_sentiment: z$1.enum(["positive", "negative", "neutral"]),
-    subtitle_value: z$1.string(),
-    subtitle_description: z$1.string(),
-    info_description: z$1.string(),
+    subtitleSentiment: z$1.enum(["positive", "negative", "neutral"]),
+    subtitleValue: z$1.string(),
+    subtitleDescription: z$1.string(),
+    infoDescription: z$1.string(),
     sql: z$1.string()
   }).array()
 });
@@ -33145,24 +33149,13 @@ const VisualizationConfigGenerationSchema = z$1.object({
   created_at: z$1.string(),
   configuration: VisualizationConfigGenerationSchema.shape.plot_configuration,
   data_transformation: VisualizationConfigGenerationSchema.shape.transformation
-});
-z$1.object({
-  title: z$1.string(),
-  description: z$1.string()
-});
-const FlowSteps = {
+}), FlowSteps = {
   analyzeRequest: "analyze_request",
   shortlistColumns: "shortlist_columns",
   executeProcedure: "execute_procedure",
-  listInsights: "list_insights",
-  executeInsights: "execute_insights",
-  summarizeKeyFindings: "summarize_insights",
-  // TODO: Change reference name in the agentic workflow
-  graphProcedure: "visualization_procedure",
-  confidenceScore: "confidence_score",
   columnsLineage: "columns_lineage",
-  viewGraphs: "visualization_config_generation",
-  dashboard: "dashboard"
+  confidenceScore: "confidence_score",
+  summarizeKeyFindings: "summarize_insights"
 };
 var dayjs_min$1 = { exports: {} }, dayjs_min = dayjs_min$1.exports, hasRequiredDayjs_min;
 function requireDayjs_min() {
@@ -43434,7 +43427,7 @@ const defaultProps$s = {}, ModalCloseButton = factory((C, R) => {
 });
 ModalCloseButton.classes = classes$b;
 ModalCloseButton.displayName = "@mantine/core/ModalCloseButton";
-const defaultProps$r = {}, ModalContent = factory((C, R) => {
+const defaultProps$r = {}, ModalContent$1 = factory((C, R) => {
   const M = useProps("ModalContent", defaultProps$r, C), { classNames: D, className: F, style: H, styles: U, vars: q, children: G, __hidden: Z, ...Y } = M, Q = useModalContext(), J = Q.scrollAreaComponent || NativeScrollArea;
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     ModalBaseContent,
@@ -43458,8 +43451,8 @@ const defaultProps$r = {}, ModalContent = factory((C, R) => {
     }
   );
 });
-ModalContent.classes = classes$b;
-ModalContent.displayName = "@mantine/core/ModalContent";
+ModalContent$1.classes = classes$b;
+ModalContent$1.displayName = "@mantine/core/ModalContent";
 const defaultProps$q = {}, ModalHeader = factory((C, R) => {
   const M = useProps("ModalHeader", defaultProps$q, C), { classNames: D, className: F, style: H, styles: U, vars: q, ...G } = M, Z = useModalContext();
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -43634,7 +43627,7 @@ const defaultProps$m = {
           }
         ),
         /* @__PURE__ */ jsxRuntimeExports.jsxs(
-          ModalContent,
+          ModalContent$1,
           {
             radius: G,
             __hidden: te && Y && Z ? Y !== te.currentId : !1,
@@ -43655,7 +43648,7 @@ Modal.classes = classes$b;
 Modal.displayName = "@mantine/core/Modal";
 Modal.Root = ModalRoot;
 Modal.Overlay = ModalOverlay;
-Modal.Content = ModalContent;
+Modal.Content = ModalContent$1;
 Modal.Body = ModalBody;
 Modal.Header = ModalHeader;
 Modal.Title = ModalTitle;
@@ -47431,6 +47424,7 @@ const SuccessVersion$4 = z$1.object({
   status: z$1.literal("success"),
   public: z$1.object({}),
   private: z$1.object({
+    message: z$1.string().optional(),
     columns: z$1.object({
       id: z$1.number(),
       name: z$1.string(),
@@ -47490,6 +47484,7 @@ const SuccessVersion$4 = z$1.object({
   status: z$1.literal("success"),
   public: z$1.object({}),
   private: z$1.object({
+    message: z$1.string().optional(),
     columns: z$1.object({
       id: z$1.number(),
       name: z$1.string(),
@@ -55942,7 +55937,7 @@ const InsightsMessage = ({ children: C, tagText: R, isActive: M, ...D }) => {
             "data-active": M,
             "data-hovered": F,
             sx: () => ({
-              background: "white",
+              background: "var(--mantine-color-white)",
               "&[data-hovered=true]": {
                 background: "var(--mantine-color-mageWhisper-10)"
               },
@@ -56227,6 +56222,42 @@ const InsightsMessage = ({ children: C, tagText: R, isActive: M, ...D }) => {
       }
     }
   }
+}), RetrieveFlow = createRoute({
+  method: "get",
+  path: "/api/v1/flows/{flowId}",
+  operationId: "retrieveFlow",
+  request: {
+    headers: SupabaseHeaderSchema,
+    params: FlowIdParam
+  },
+  responses: {
+    200: {
+      description: "The flow with its steps",
+      content: {
+        "application/json": {
+          schema: FlowSchema
+        }
+      }
+    },
+    404: {
+      content: {
+        "application/json": {
+          schema: z$1.object({ error: z$1.string() })
+        }
+      },
+      description: "Unable to retrieve flow with this id"
+    },
+    500: {
+      description: "Something wrong happened",
+      content: {
+        "application/json": {
+          schema: z$1.object({
+            error: z$1.string()
+          })
+        }
+      }
+    }
+  }
 }), End2EndApiResponseSchema = z$1.discriminatedUnion("status", [
   z$1.object({
     status: z$1.literal("error"),
@@ -56248,7 +56279,7 @@ const InsightsMessage = ({ children: C, tagText: R, isActive: M, ...D }) => {
         "application/json": {
           schema: z$1.object({
             userQuery: z$1.string(),
-            runVisualizations: z$1.boolean().optional().default(!0),
+            runVisualizations: z$1.boolean().optional().default(!1),
             runKeyFindings: z$1.boolean().optional().default(!0)
           })
         }
@@ -56279,33 +56310,7 @@ const InsightsMessage = ({ children: C, tagText: R, isActive: M, ...D }) => {
     U.length > 0 && (F.filter = U);
   }
   return F;
-}, flowQueryOptions = (C) => ({
-  queryKey: ["flow", { flowId: C }],
-  queryFn: async () => {
-    if (!C || !supabase) return null;
-    const { data: R, error: M } = await supabase.from("flows").select("*, flow_steps(*)").eq("id", C).order("created_at", {
-      referencedTable: "flow_steps",
-      ascending: !0
-    }).single();
-    if (M)
-      throw new Error(M.message);
-    return FlowSchema.parse(R);
-  }
-}), useFlow = (C) => useQuery({
-  ...flowQueryOptions(C),
-  enabled: !!C,
-  refetchIntervalInBackground: !1,
-  refetchInterval: (R) => {
-    var G;
-    if (!((G = R.state.data) != null && G.flow_steps.length))
-      return 1e3;
-    const D = R.state.data.flow_steps, F = Object.values(FlowSteps);
-    if (D.some((Z) => Z.status === "failed")) return;
-    const U = D.filter((Z) => Z.status === "completed").map((Z) => Z.name);
-    if (!F.every((Z) => U.includes(Z)))
-      return 1e3;
-  }
-}), useStartFlow = (C) => useMutation({
+}, useStartFlow = (C) => useMutation({
   mutationFn: async (R) => {
     const M = await withAuthTokens(supabase), { data: D } = await client.POST(RunEnd2EndFlowRoute.path, {
       params: { ...M },
@@ -56425,31 +56430,13 @@ const InsightsMessage = ({ children: C, tagText: R, isActive: M, ...D }) => {
   getNextPageParam: (D, F) => D.length < R ? null : F.length,
   refetchOnWindowFocus: !1,
   placeholderData: keepPreviousData
-}), useFirstFlowDataId = (C) => {
-  const R = useContextReady();
-  return useQuery({
-    queryKey: ["firstFlowDataId", { flowId: C }],
-    staleTime: 1 / 0,
-    enabled: R,
-    queryFn: async () => {
-      const M = await (supabase == null ? void 0 : supabase.from("flow_data").select("id").eq("flow_id", C).order("created_at", { ascending: !0 }).limit(1).maybeSingle());
-      if (!M)
-        throw new Error("No flow data found");
-      const { data: D, error: F } = M;
-      if (F)
-        throw new Error(
-          `Failed to fetch first flow_data_id for flow ${C}`
-        );
-      return D == null ? void 0 : D.id;
-    }
-  });
-}, recentFlowsQueryOptions = (C) => ({
+}), recentFlowsQueryOptions = (C) => ({
   queryKey: ["recentFlows", C],
   queryFn: async () => {
     if (!supabase) return [];
     const { data: R, error: M } = await supabase.from("flows").select("*, flow_steps(*)").order("created_at", {
       ascending: !1
-    }).limit(10);
+    }).limit(C || 10);
     if (M)
       throw new Error(M.message);
     return R.map((D) => FlowSchema.parse(D));
@@ -79246,7 +79233,7 @@ const MotionStack$1 = motion.create(Stack), AnimatedBox = ({ children: C }) => /
                 border: "1px solid var(--mantine-color-mageGunmetal-1)"
               },
               '& [data-active="true"]': {
-                backgroundColor: "white",
+                backgroundColor: "var(--mantine-color-white)",
                 borderBottom: 0
               }
             }),
@@ -79280,7 +79267,7 @@ const MotionStack$1 = motion.create(Stack), AnimatedBox = ({ children: C }) => /
               overflow: "hidden",
               display: "flex",
               flexDirection: "column",
-              backgroundColor: "white",
+              backgroundColor: "var(--mantine-color-white)",
               border: "1px solid var(--mantine-color-mageGunmetal-1)",
               borderTop: 0,
               borderBottomLeftRadius: "var(--mantine-radius-md)",
@@ -79310,7 +79297,7 @@ const MotionStack$1 = motion.create(Stack), AnimatedBox = ({ children: C }) => /
               overflow: "hidden",
               display: "flex",
               flexDirection: "column",
-              backgroundColor: "white",
+              backgroundColor: "var(--mantine-color-white)",
               border: "1px solid var(--mantine-color-mageGunmetal-1)",
               borderTop: 0,
               borderBottomLeftRadius: "var(--mantine-radius-md)",
@@ -85425,7 +85412,7 @@ const TableBody$1 = ({ table: C, virtualizer: R, ...M }) => {
         {
           h: `${q.size}px`,
           style: {
-            backgroundColor: q.index % 2 === 0 ? "var(--table-striped-color)" : "white",
+            backgroundColor: q.index % 2 === 0 ? "var(--table-striped-color)" : "var(--mantine-color-white)",
             overflow: "hidden"
           },
           children: Z.getVisibleCells().map((Y) => /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -94131,7 +94118,7 @@ const Dagre = /* @__PURE__ */ getDefaultExportFromCjs(dagreExports), getLayouted
 }) }, D.id)) }), CellContent$1 = ({ formattedValue: { display: C } }) => C === "empty" ? /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { span: !0, ff: "heading", c: "dimmed", size: "sm", truncate: "end", children: "empty" }) : C, sortingFn = (C, R, M) => {
   const D = C.getValue(M), F = R.getValue(M), H = isFormattedData(D) ? D.sortValue : null, U = isFormattedData(F) ? F.sortValue : null;
   return H === null && U === null ? 0 : H === null ? -1 : U === null ? 1 : H instanceof Date && U instanceof Date ? H.getTime() - U.getTime() : typeof H == "number" && typeof U == "number" ? H - U : String(H).localeCompare(String(U));
-}, columnHelper$1 = createColumnHelper(), formatColumnName = (C) => C.split("_").map((D) => D.length === 0 ? "" : D.charAt(0).toUpperCase() + D.slice(1)).join(" "), InfiniteTable = ({ dataColumns: C, virtualizer: R, data: M, tableRef: D, explainability: F }) => {
+}, columnHelper$1 = createColumnHelper(), formatColumnName$1 = (C) => C.split("_").map((D) => D.length === 0 ? "" : D.charAt(0).toUpperCase() + D.slice(1)).join(" "), InfiniteTable = ({ dataColumns: C, virtualizer: R, data: M, tableRef: D, explainability: F }) => {
   const H = reactExports.useMemo(() => M ? M.map((G) => {
     const Z = {};
     for (const [Y, Q] of Object.entries(G))
@@ -94141,7 +94128,7 @@ const Dagre = /* @__PURE__ */ getDefaultExportFromCjs(dagreExports), getLayouted
     ({ name: G }) => columnHelper$1.accessor(G, {
       minSize: 100,
       maxSize: 200,
-      header: () => formatColumnName(G),
+      header: () => formatColumnName$1(G),
       cell: (Z) => /* @__PURE__ */ jsxRuntimeExports.jsx(CellContent$1, { formattedValue: Z.getValue() }),
       sortingFn
     })
@@ -95024,7 +95011,360 @@ const DataReportContent = ({
       ]
     }
   );
-}, TableBody = ({ table: C, ...R }) => /* @__PURE__ */ jsxRuntimeExports.jsx(Table$1.Tbody, { ...R, children: C.getRowModel().rows.map((M) => /* @__PURE__ */ jsxRuntimeExports.jsx(Table$1.Tr, { children: M.getVisibleCells().map((D) => /* @__PURE__ */ jsxRuntimeExports.jsx(Table$1.Td, { maw: 0, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { span: !0, ff: "monospace", size: "sm", truncate: "end", children: flexRender(D.column.columnDef.cell, D.getContext()) }) }, D.id)) }, M.id)) }), TemplateNode = ({
+}, t = Symbol.for("@ts-pattern/matcher"), e = Symbol.for("@ts-pattern/isVariadic"), n = "@ts-pattern/anonymous-select-key", r = (C) => !!(C && typeof C == "object"), i = (C) => C && !!C[t], o = (C, R, M) => {
+  if (i(C)) {
+    const D = C[t](), { matched: F, selections: H } = D.match(R);
+    return F && H && Object.keys(H).forEach((U) => M(U, H[U])), F;
+  }
+  if (r(C)) {
+    if (!r(R)) return !1;
+    if (Array.isArray(C)) {
+      if (!Array.isArray(R)) return !1;
+      let D = [], F = [], H = [];
+      for (const U of C.keys()) {
+        const q = C[U];
+        i(q) && q[e] ? H.push(q) : H.length ? F.push(q) : D.push(q);
+      }
+      if (H.length) {
+        if (H.length > 1) throw new Error("Pattern error: Using `...P.array(...)` several times in a single pattern is not allowed.");
+        if (R.length < D.length + F.length) return !1;
+        const U = R.slice(0, D.length), q = F.length === 0 ? [] : R.slice(-F.length), G = R.slice(D.length, F.length === 0 ? 1 / 0 : -F.length);
+        return D.every((Z, Y) => o(Z, U[Y], M)) && F.every((Z, Y) => o(Z, q[Y], M)) && (H.length === 0 || o(H[0], G, M));
+      }
+      return C.length === R.length && C.every((U, q) => o(U, R[q], M));
+    }
+    return Reflect.ownKeys(C).every((D) => {
+      const F = C[D];
+      return (D in R || i(H = F) && H[t]().matcherType === "optional") && o(F, R[D], M);
+      var H;
+    });
+  }
+  return Object.is(R, C);
+}, s = (C) => {
+  var R, M, D;
+  return r(C) ? i(C) ? (R = (M = (D = C[t]()).getSelectionKeys) == null ? void 0 : M.call(D)) != null ? R : [] : Array.isArray(C) ? c(C, s) : c(Object.values(C), s) : [];
+}, c = (C, R) => C.reduce((M, D) => M.concat(R(D)), []);
+function a(...C) {
+  if (C.length === 1) {
+    const [R] = C;
+    return (M) => o(R, M, () => {
+    });
+  }
+  if (C.length === 2) {
+    const [R, M] = C;
+    return o(R, M, () => {
+    });
+  }
+  throw new Error(`isMatching wasn't given the right number of arguments: expected 1 or 2, received ${C.length}.`);
+}
+function u(C) {
+  return Object.assign(C, { optional: () => h(C), and: (R) => m(C, R), or: (R) => d(C, R), select: (R) => R === void 0 ? y(C) : y(R, C) });
+}
+function l(C) {
+  return Object.assign(((R) => Object.assign(R, { [Symbol.iterator]() {
+    let M = 0;
+    const D = [{ value: Object.assign(R, { [e]: !0 }), done: !1 }, { done: !0, value: void 0 }];
+    return { next: () => {
+      var F;
+      return (F = D[M++]) != null ? F : D.at(-1);
+    } };
+  } }))(C), { optional: () => l(h(C)), select: (R) => l(R === void 0 ? y(C) : y(R, C)) });
+}
+function h(C) {
+  return u({ [t]: () => ({ match: (R) => {
+    let M = {};
+    const D = (F, H) => {
+      M[F] = H;
+    };
+    return R === void 0 ? (s(C).forEach((F) => D(F, void 0)), { matched: !0, selections: M }) : { matched: o(C, R, D), selections: M };
+  }, getSelectionKeys: () => s(C), matcherType: "optional" }) });
+}
+const f = (C, R) => {
+  for (const M of C) if (!R(M)) return !1;
+  return !0;
+}, g = (C, R) => {
+  for (const [M, D] of C.entries()) if (!R(D, M)) return !1;
+  return !0;
+};
+function m(...C) {
+  return u({ [t]: () => ({ match: (R) => {
+    let M = {};
+    const D = (F, H) => {
+      M[F] = H;
+    };
+    return { matched: C.every((F) => o(F, R, D)), selections: M };
+  }, getSelectionKeys: () => c(C, s), matcherType: "and" }) });
+}
+function d(...C) {
+  return u({ [t]: () => ({ match: (R) => {
+    let M = {};
+    const D = (F, H) => {
+      M[F] = H;
+    };
+    return c(C, s).forEach((F) => D(F, void 0)), { matched: C.some((F) => o(F, R, D)), selections: M };
+  }, getSelectionKeys: () => c(C, s), matcherType: "or" }) });
+}
+function p(C) {
+  return { [t]: () => ({ match: (R) => ({ matched: !!C(R) }) }) };
+}
+function y(...C) {
+  const R = typeof C[0] == "string" ? C[0] : void 0, M = C.length === 2 ? C[1] : typeof C[0] == "string" ? void 0 : C[0];
+  return u({ [t]: () => ({ match: (D) => {
+    let F = { [R ?? n]: D };
+    return { matched: M === void 0 || o(M, D, (H, U) => {
+      F[H] = U;
+    }), selections: F };
+  }, getSelectionKeys: () => [R ?? n].concat(M === void 0 ? [] : s(M)) }) });
+}
+function v(C) {
+  return typeof C == "number";
+}
+function b(C) {
+  return typeof C == "string";
+}
+function w(C) {
+  return typeof C == "bigint";
+}
+const S = u(p(function(C) {
+  return !0;
+})), O = S, j = (C) => Object.assign(u(C), { startsWith: (R) => {
+  return j(m(C, (M = R, p((D) => b(D) && D.startsWith(M)))));
+  var M;
+}, endsWith: (R) => {
+  return j(m(C, (M = R, p((D) => b(D) && D.endsWith(M)))));
+  var M;
+}, minLength: (R) => j(m(C, ((M) => p((D) => b(D) && D.length >= M))(R))), length: (R) => j(m(C, ((M) => p((D) => b(D) && D.length === M))(R))), maxLength: (R) => j(m(C, ((M) => p((D) => b(D) && D.length <= M))(R))), includes: (R) => {
+  return j(m(C, (M = R, p((D) => b(D) && D.includes(M)))));
+  var M;
+}, regex: (R) => {
+  return j(m(C, (M = R, p((D) => b(D) && !!D.match(M)))));
+  var M;
+} }), K = j(p(b)), x = (C) => Object.assign(u(C), { between: (R, M) => x(m(C, ((D, F) => p((H) => v(H) && D <= H && F >= H))(R, M))), lt: (R) => x(m(C, ((M) => p((D) => v(D) && D < M))(R))), gt: (R) => x(m(C, ((M) => p((D) => v(D) && D > M))(R))), lte: (R) => x(m(C, ((M) => p((D) => v(D) && D <= M))(R))), gte: (R) => x(m(C, ((M) => p((D) => v(D) && D >= M))(R))), int: () => x(m(C, p((R) => v(R) && Number.isInteger(R)))), finite: () => x(m(C, p((R) => v(R) && Number.isFinite(R)))), positive: () => x(m(C, p((R) => v(R) && R > 0))), negative: () => x(m(C, p((R) => v(R) && R < 0))) }), E = x(p(v)), A = (C) => Object.assign(u(C), { between: (R, M) => A(m(C, ((D, F) => p((H) => w(H) && D <= H && F >= H))(R, M))), lt: (R) => A(m(C, ((M) => p((D) => w(D) && D < M))(R))), gt: (R) => A(m(C, ((M) => p((D) => w(D) && D > M))(R))), lte: (R) => A(m(C, ((M) => p((D) => w(D) && D <= M))(R))), gte: (R) => A(m(C, ((M) => p((D) => w(D) && D >= M))(R))), positive: () => A(m(C, p((R) => w(R) && R > 0))), negative: () => A(m(C, p((R) => w(R) && R < 0))) }), P = A(p(w)), T = u(p(function(C) {
+  return typeof C == "boolean";
+})), B = u(p(function(C) {
+  return typeof C == "symbol";
+})), _ = u(p(function(C) {
+  return C == null;
+})), k = u(p(function(C) {
+  return C != null;
+}));
+var N = { __proto__: null, matcher: t, optional: h, array: function(...C) {
+  return l({ [t]: () => ({ match: (R) => {
+    if (!Array.isArray(R)) return { matched: !1 };
+    if (C.length === 0) return { matched: !0 };
+    const M = C[0];
+    let D = {};
+    if (R.length === 0) return s(M).forEach((H) => {
+      D[H] = [];
+    }), { matched: !0, selections: D };
+    const F = (H, U) => {
+      D[H] = (D[H] || []).concat([U]);
+    };
+    return { matched: R.every((H) => o(M, H, F)), selections: D };
+  }, getSelectionKeys: () => C.length === 0 ? [] : s(C[0]) }) });
+}, set: function(...C) {
+  return u({ [t]: () => ({ match: (R) => {
+    if (!(R instanceof Set)) return { matched: !1 };
+    let M = {};
+    if (R.size === 0) return { matched: !0, selections: M };
+    if (C.length === 0) return { matched: !0 };
+    const D = (H, U) => {
+      M[H] = (M[H] || []).concat([U]);
+    }, F = C[0];
+    return { matched: f(R, (H) => o(F, H, D)), selections: M };
+  }, getSelectionKeys: () => C.length === 0 ? [] : s(C[0]) }) });
+}, map: function(...C) {
+  return u({ [t]: () => ({ match: (R) => {
+    if (!(R instanceof Map)) return { matched: !1 };
+    let M = {};
+    if (R.size === 0) return { matched: !0, selections: M };
+    const D = (q, G) => {
+      M[q] = (M[q] || []).concat([G]);
+    };
+    if (C.length === 0) return { matched: !0 };
+    var F;
+    if (C.length === 1) throw new Error(`\`P.map\` wasn't given enough arguments. Expected (key, value), received ${(F = C[0]) == null ? void 0 : F.toString()}`);
+    const [H, U] = C;
+    return { matched: g(R, (q, G) => {
+      const Z = o(H, G, D), Y = o(U, q, D);
+      return Z && Y;
+    }), selections: M };
+  }, getSelectionKeys: () => C.length === 0 ? [] : [...s(C[0]), ...s(C[1])] }) });
+}, intersection: m, union: d, not: function(C) {
+  return u({ [t]: () => ({ match: (R) => ({ matched: !o(C, R, () => {
+  }) }), getSelectionKeys: () => [], matcherType: "not" }) });
+}, when: p, select: y, any: S, _: O, string: K, number: E, bigint: P, boolean: T, symbol: B, nullish: _, nonNullable: k, instanceOf: function(C) {
+  return u(p(/* @__PURE__ */ function(R) {
+    return (M) => M instanceof R;
+  }(C)));
+}, shape: function(C) {
+  return u(p(a(C)));
+} };
+class W extends Error {
+  constructor(R) {
+    let M;
+    try {
+      M = JSON.stringify(R);
+    } catch {
+      M = R;
+    }
+    super(`Pattern matching error: no pattern matches value ${M}`), this.input = void 0, this.input = R;
+  }
+}
+const $ = { matched: !1, value: void 0 };
+function z(C) {
+  return new I(C, $);
+}
+class I {
+  constructor(R, M) {
+    this.input = void 0, this.state = void 0, this.input = R, this.state = M;
+  }
+  with(...R) {
+    if (this.state.matched) return this;
+    const M = R[R.length - 1], D = [R[0]];
+    let F;
+    R.length === 3 && typeof R[1] == "function" ? F = R[1] : R.length > 2 && D.push(...R.slice(1, R.length - 1));
+    let H = !1, U = {};
+    const q = (Z, Y) => {
+      H = !0, U[Z] = Y;
+    }, G = !D.some((Z) => o(Z, this.input, q)) || F && !F(this.input) ? $ : { matched: !0, value: M(H ? n in U ? U[n] : U : this.input, this.input) };
+    return new I(this.input, G);
+  }
+  when(R, M) {
+    if (this.state.matched) return this;
+    const D = !!R(this.input);
+    return new I(this.input, D ? { matched: !0, value: M(this.input, this.input) } : $);
+  }
+  otherwise(R) {
+    return this.state.matched ? this.state.value : R(this.input);
+  }
+  exhaustive(R = L) {
+    return this.state.matched ? this.state.value : R(this.input);
+  }
+  run() {
+    return this.exhaustive();
+  }
+  returnType() {
+    return this;
+  }
+}
+function L(C) {
+  throw new W(C);
+}
+const ArtifactPaper = ({ text: C, ...R }) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+  Paper,
+  {
+    withBorder: !0,
+    style: { borderColor: "mageGunmetal.9" },
+    px: "sm",
+    py: 6,
+    ...R,
+    children: /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { size: "md", fw: 400, truncate: "end", style: { textAlign: "left" }, children: C })
+  }
+), GenericError = () => /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { children: "Something went wrong. Please try again later." }), GenericLoading = () => /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { children: "Loading..." }), useTemporaryMessage = (C) => {
+  const [R, M] = reactExports.useState(C), D = reactExports.useRef(!0), F = reactExports.useRef(!1);
+  return reactExports.useEffect(() => {
+    D.current ? D.current = !1 : C && !F.current && (F.current = !0, setTimeout(() => {
+      M(!0);
+    }, 2e3));
+  }, [C]), R;
+}, flowQueryOptions = (C) => ({
+  queryKey: ["flows", { flowId: C }],
+  queryFn: async () => {
+    if (!C || !supabase) return null;
+    const R = await withAuthTokens(supabase), { data: M, error: D } = await client.GET(RetrieveFlow.path, {
+      params: {
+        ...R,
+        path: { flowId: C }
+      }
+    });
+    if (D)
+      throw new Error(D.error);
+    return M;
+  }
+}), STEP_NAMES = Object.values(FlowSteps), useFlow = (C) => useQuery({
+  ...flowQueryOptions(C),
+  enabled: !!C,
+  refetchIntervalInBackground: !1,
+  refetchInterval: (R) => {
+    var q;
+    if (!((q = R.state.data) != null && q.flow_steps.length))
+      return 1e3;
+    const D = R.state.data.flow_steps;
+    if (D.some((G) => G.status === "failed")) return;
+    const H = D.filter((G) => G.status === "completed").map((G) => G.name);
+    if (!STEP_NAMES.every((G) => H.includes(G)))
+      return 1e3;
+  }
+}), useFirstFlowDataId = (C) => {
+  const R = useContextReady();
+  return useQuery({
+    queryKey: ["firstFlowDataId", { flowId: C }],
+    staleTime: 1 / 0,
+    enabled: R,
+    queryFn: async () => {
+      const M = await (supabase == null ? void 0 : supabase.from("flow_data").select("id").eq("flow_id", C).order("created_at", { ascending: !0 }).limit(1).maybeSingle());
+      if (!M)
+        throw new Error("No flow data found");
+      const { data: D, error: F } = M;
+      if (F)
+        throw new Error(
+          `Failed to fetch first flow_data_id for flow ${C}`
+        );
+      return D == null ? void 0 : D.id;
+    }
+  });
+}, Step = ({
+  title: C,
+  children: R,
+  value: M,
+  rightSection: D,
+  isLast: F,
+  disabled: H
+}) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+  Accordion.Item,
+  {
+    value: M,
+    styles: {
+      item: {
+        borderBottom: F ? "none" : ""
+      }
+    },
+    children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        Accordion.Control,
+        {
+          h: 65,
+          disabled: H,
+          sx: () => ({
+            "&:hover": {
+              backgroundColor: "transparent"
+            }
+          }),
+          children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Group, { align: "center", justify: "space-between", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(Title$1, { tt: "uppercase", size: "lg", fw: 600, children: C }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { maw: 300, children: !!D && D })
+          ] })
+        }
+      ),
+      R && /* @__PURE__ */ jsxRuntimeExports.jsx(Accordion.Panel, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { px: "md", children: R }) })
+    ]
+  }
+), AnimatedStep = ({
+  children: C,
+  ...R
+}) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+  motion.span,
+  {
+    initial: { opacity: 0, y: 15 },
+    animate: { opacity: 1, y: 0 },
+    exit: { opacity: 0, y: -15 },
+    transition: { duration: 0.3, ease: "easeInOut" },
+    style: { minWidth: 0, textWrap: "nowrap" },
+    ...R,
+    children: C
+  }
+), TableBody = ({ table: C, ...R }) => /* @__PURE__ */ jsxRuntimeExports.jsx(Table$1.Tbody, { ...R, children: C.getRowModel().rows.map((M) => /* @__PURE__ */ jsxRuntimeExports.jsx(Table$1.Tr, { children: M.getVisibleCells().map((D) => /* @__PURE__ */ jsxRuntimeExports.jsx(Table$1.Td, { maw: 0, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { span: !0, ff: "monospace", size: "sm", truncate: "end", children: flexRender(D.column.columnDef.cell, D.getContext()) }) }, D.id)) }, M.id)) }), TemplateNode = ({
   title: C,
   data: { explanation: R }
 }) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
@@ -95270,7 +95610,7 @@ const DataReportContent = ({
       H.id
     );
   }) }, F.id)) });
-}, MAX_CELL_CHAR_LENGTH = 35, CellContent = ({ formattedValue: { display: C } }) => C === "empty" ? /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { c: "dimmed", size: "sm", truncate: "end", children: "empty" }) : C && C.length > MAX_CELL_CHAR_LENGTH ? /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip$1, { multiline: !0, maw: "25rem", label: C, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { truncate: "end", children: C }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { truncate: "end", children: C }), columnHelper = createColumnHelper(), Table = ({
+}, MAX_CELL_CHAR_LENGTH = 35, CellContent = ({ formattedValue: { display: C } }) => C === "empty" ? /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { c: "dimmed", size: "sm", truncate: "end", children: "empty" }) : C && C.length > MAX_CELL_CHAR_LENGTH ? /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip$1, { multiline: !0, maw: "25rem", label: C, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { truncate: "end", children: C }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { truncate: "end", children: C }), columnHelper = createColumnHelper(), formatColumnName = (C) => C.split("_").map((D) => D.length === 0 ? "" : D.charAt(0).toUpperCase() + D.slice(1)).join(" "), Table = ({
   flowId: C,
   dataColumns: R,
   data: M,
@@ -95290,6 +95630,7 @@ const DataReportContent = ({
     return ce;
   }) : [], [M]), ne = reactExports.useMemo(() => R && R.length > 0 ? R.map(
     ({ name: se }) => columnHelper.accessor(se, {
+      header: () => formatColumnName(se),
       cell: (ce) => /* @__PURE__ */ jsxRuntimeExports.jsx(CellContent, { formattedValue: ce.getValue() })
     })
   ) : [], [R]), oe = useReactTable({
@@ -95454,314 +95795,7 @@ const DataReportContent = ({
       U ? dayjs(U).startOf("hour").format("DD MMM. YYYY, [at] ha") : "Loading..."
     ] })
   ] });
-}, t = Symbol.for("@ts-pattern/matcher"), e = Symbol.for("@ts-pattern/isVariadic"), n = "@ts-pattern/anonymous-select-key", r = (C) => !!(C && typeof C == "object"), i = (C) => C && !!C[t], o = (C, R, M) => {
-  if (i(C)) {
-    const D = C[t](), { matched: F, selections: H } = D.match(R);
-    return F && H && Object.keys(H).forEach((U) => M(U, H[U])), F;
-  }
-  if (r(C)) {
-    if (!r(R)) return !1;
-    if (Array.isArray(C)) {
-      if (!Array.isArray(R)) return !1;
-      let D = [], F = [], H = [];
-      for (const U of C.keys()) {
-        const q = C[U];
-        i(q) && q[e] ? H.push(q) : H.length ? F.push(q) : D.push(q);
-      }
-      if (H.length) {
-        if (H.length > 1) throw new Error("Pattern error: Using `...P.array(...)` several times in a single pattern is not allowed.");
-        if (R.length < D.length + F.length) return !1;
-        const U = R.slice(0, D.length), q = F.length === 0 ? [] : R.slice(-F.length), G = R.slice(D.length, F.length === 0 ? 1 / 0 : -F.length);
-        return D.every((Z, Y) => o(Z, U[Y], M)) && F.every((Z, Y) => o(Z, q[Y], M)) && (H.length === 0 || o(H[0], G, M));
-      }
-      return C.length === R.length && C.every((U, q) => o(U, R[q], M));
-    }
-    return Reflect.ownKeys(C).every((D) => {
-      const F = C[D];
-      return (D in R || i(H = F) && H[t]().matcherType === "optional") && o(F, R[D], M);
-      var H;
-    });
-  }
-  return Object.is(R, C);
-}, s = (C) => {
-  var R, M, D;
-  return r(C) ? i(C) ? (R = (M = (D = C[t]()).getSelectionKeys) == null ? void 0 : M.call(D)) != null ? R : [] : Array.isArray(C) ? c(C, s) : c(Object.values(C), s) : [];
-}, c = (C, R) => C.reduce((M, D) => M.concat(R(D)), []);
-function a(...C) {
-  if (C.length === 1) {
-    const [R] = C;
-    return (M) => o(R, M, () => {
-    });
-  }
-  if (C.length === 2) {
-    const [R, M] = C;
-    return o(R, M, () => {
-    });
-  }
-  throw new Error(`isMatching wasn't given the right number of arguments: expected 1 or 2, received ${C.length}.`);
-}
-function u(C) {
-  return Object.assign(C, { optional: () => h(C), and: (R) => m(C, R), or: (R) => d(C, R), select: (R) => R === void 0 ? y(C) : y(R, C) });
-}
-function l(C) {
-  return Object.assign(((R) => Object.assign(R, { [Symbol.iterator]() {
-    let M = 0;
-    const D = [{ value: Object.assign(R, { [e]: !0 }), done: !1 }, { done: !0, value: void 0 }];
-    return { next: () => {
-      var F;
-      return (F = D[M++]) != null ? F : D.at(-1);
-    } };
-  } }))(C), { optional: () => l(h(C)), select: (R) => l(R === void 0 ? y(C) : y(R, C)) });
-}
-function h(C) {
-  return u({ [t]: () => ({ match: (R) => {
-    let M = {};
-    const D = (F, H) => {
-      M[F] = H;
-    };
-    return R === void 0 ? (s(C).forEach((F) => D(F, void 0)), { matched: !0, selections: M }) : { matched: o(C, R, D), selections: M };
-  }, getSelectionKeys: () => s(C), matcherType: "optional" }) });
-}
-const f = (C, R) => {
-  for (const M of C) if (!R(M)) return !1;
-  return !0;
-}, g = (C, R) => {
-  for (const [M, D] of C.entries()) if (!R(D, M)) return !1;
-  return !0;
-};
-function m(...C) {
-  return u({ [t]: () => ({ match: (R) => {
-    let M = {};
-    const D = (F, H) => {
-      M[F] = H;
-    };
-    return { matched: C.every((F) => o(F, R, D)), selections: M };
-  }, getSelectionKeys: () => c(C, s), matcherType: "and" }) });
-}
-function d(...C) {
-  return u({ [t]: () => ({ match: (R) => {
-    let M = {};
-    const D = (F, H) => {
-      M[F] = H;
-    };
-    return c(C, s).forEach((F) => D(F, void 0)), { matched: C.some((F) => o(F, R, D)), selections: M };
-  }, getSelectionKeys: () => c(C, s), matcherType: "or" }) });
-}
-function p(C) {
-  return { [t]: () => ({ match: (R) => ({ matched: !!C(R) }) }) };
-}
-function y(...C) {
-  const R = typeof C[0] == "string" ? C[0] : void 0, M = C.length === 2 ? C[1] : typeof C[0] == "string" ? void 0 : C[0];
-  return u({ [t]: () => ({ match: (D) => {
-    let F = { [R ?? n]: D };
-    return { matched: M === void 0 || o(M, D, (H, U) => {
-      F[H] = U;
-    }), selections: F };
-  }, getSelectionKeys: () => [R ?? n].concat(M === void 0 ? [] : s(M)) }) });
-}
-function v(C) {
-  return typeof C == "number";
-}
-function b(C) {
-  return typeof C == "string";
-}
-function w(C) {
-  return typeof C == "bigint";
-}
-const S = u(p(function(C) {
-  return !0;
-})), O = S, j = (C) => Object.assign(u(C), { startsWith: (R) => {
-  return j(m(C, (M = R, p((D) => b(D) && D.startsWith(M)))));
-  var M;
-}, endsWith: (R) => {
-  return j(m(C, (M = R, p((D) => b(D) && D.endsWith(M)))));
-  var M;
-}, minLength: (R) => j(m(C, ((M) => p((D) => b(D) && D.length >= M))(R))), length: (R) => j(m(C, ((M) => p((D) => b(D) && D.length === M))(R))), maxLength: (R) => j(m(C, ((M) => p((D) => b(D) && D.length <= M))(R))), includes: (R) => {
-  return j(m(C, (M = R, p((D) => b(D) && D.includes(M)))));
-  var M;
-}, regex: (R) => {
-  return j(m(C, (M = R, p((D) => b(D) && !!D.match(M)))));
-  var M;
-} }), K = j(p(b)), x = (C) => Object.assign(u(C), { between: (R, M) => x(m(C, ((D, F) => p((H) => v(H) && D <= H && F >= H))(R, M))), lt: (R) => x(m(C, ((M) => p((D) => v(D) && D < M))(R))), gt: (R) => x(m(C, ((M) => p((D) => v(D) && D > M))(R))), lte: (R) => x(m(C, ((M) => p((D) => v(D) && D <= M))(R))), gte: (R) => x(m(C, ((M) => p((D) => v(D) && D >= M))(R))), int: () => x(m(C, p((R) => v(R) && Number.isInteger(R)))), finite: () => x(m(C, p((R) => v(R) && Number.isFinite(R)))), positive: () => x(m(C, p((R) => v(R) && R > 0))), negative: () => x(m(C, p((R) => v(R) && R < 0))) }), E = x(p(v)), A = (C) => Object.assign(u(C), { between: (R, M) => A(m(C, ((D, F) => p((H) => w(H) && D <= H && F >= H))(R, M))), lt: (R) => A(m(C, ((M) => p((D) => w(D) && D < M))(R))), gt: (R) => A(m(C, ((M) => p((D) => w(D) && D > M))(R))), lte: (R) => A(m(C, ((M) => p((D) => w(D) && D <= M))(R))), gte: (R) => A(m(C, ((M) => p((D) => w(D) && D >= M))(R))), positive: () => A(m(C, p((R) => w(R) && R > 0))), negative: () => A(m(C, p((R) => w(R) && R < 0))) }), P = A(p(w)), T = u(p(function(C) {
-  return typeof C == "boolean";
-})), B = u(p(function(C) {
-  return typeof C == "symbol";
-})), _ = u(p(function(C) {
-  return C == null;
-})), k = u(p(function(C) {
-  return C != null;
-}));
-var N = { __proto__: null, matcher: t, optional: h, array: function(...C) {
-  return l({ [t]: () => ({ match: (R) => {
-    if (!Array.isArray(R)) return { matched: !1 };
-    if (C.length === 0) return { matched: !0 };
-    const M = C[0];
-    let D = {};
-    if (R.length === 0) return s(M).forEach((H) => {
-      D[H] = [];
-    }), { matched: !0, selections: D };
-    const F = (H, U) => {
-      D[H] = (D[H] || []).concat([U]);
-    };
-    return { matched: R.every((H) => o(M, H, F)), selections: D };
-  }, getSelectionKeys: () => C.length === 0 ? [] : s(C[0]) }) });
-}, set: function(...C) {
-  return u({ [t]: () => ({ match: (R) => {
-    if (!(R instanceof Set)) return { matched: !1 };
-    let M = {};
-    if (R.size === 0) return { matched: !0, selections: M };
-    if (C.length === 0) return { matched: !0 };
-    const D = (H, U) => {
-      M[H] = (M[H] || []).concat([U]);
-    }, F = C[0];
-    return { matched: f(R, (H) => o(F, H, D)), selections: M };
-  }, getSelectionKeys: () => C.length === 0 ? [] : s(C[0]) }) });
-}, map: function(...C) {
-  return u({ [t]: () => ({ match: (R) => {
-    if (!(R instanceof Map)) return { matched: !1 };
-    let M = {};
-    if (R.size === 0) return { matched: !0, selections: M };
-    const D = (q, G) => {
-      M[q] = (M[q] || []).concat([G]);
-    };
-    if (C.length === 0) return { matched: !0 };
-    var F;
-    if (C.length === 1) throw new Error(`\`P.map\` wasn't given enough arguments. Expected (key, value), received ${(F = C[0]) == null ? void 0 : F.toString()}`);
-    const [H, U] = C;
-    return { matched: g(R, (q, G) => {
-      const Z = o(H, G, D), Y = o(U, q, D);
-      return Z && Y;
-    }), selections: M };
-  }, getSelectionKeys: () => C.length === 0 ? [] : [...s(C[0]), ...s(C[1])] }) });
-}, intersection: m, union: d, not: function(C) {
-  return u({ [t]: () => ({ match: (R) => ({ matched: !o(C, R, () => {
-  }) }), getSelectionKeys: () => [], matcherType: "not" }) });
-}, when: p, select: y, any: S, _: O, string: K, number: E, bigint: P, boolean: T, symbol: B, nullish: _, nonNullable: k, instanceOf: function(C) {
-  return u(p(/* @__PURE__ */ function(R) {
-    return (M) => M instanceof R;
-  }(C)));
-}, shape: function(C) {
-  return u(p(a(C)));
-} };
-class W extends Error {
-  constructor(R) {
-    let M;
-    try {
-      M = JSON.stringify(R);
-    } catch {
-      M = R;
-    }
-    super(`Pattern matching error: no pattern matches value ${M}`), this.input = void 0, this.input = R;
-  }
-}
-const $ = { matched: !1, value: void 0 };
-function z(C) {
-  return new I(C, $);
-}
-class I {
-  constructor(R, M) {
-    this.input = void 0, this.state = void 0, this.input = R, this.state = M;
-  }
-  with(...R) {
-    if (this.state.matched) return this;
-    const M = R[R.length - 1], D = [R[0]];
-    let F;
-    R.length === 3 && typeof R[1] == "function" ? F = R[1] : R.length > 2 && D.push(...R.slice(1, R.length - 1));
-    let H = !1, U = {};
-    const q = (Z, Y) => {
-      H = !0, U[Z] = Y;
-    }, G = !D.some((Z) => o(Z, this.input, q)) || F && !F(this.input) ? $ : { matched: !0, value: M(H ? n in U ? U[n] : U : this.input, this.input) };
-    return new I(this.input, G);
-  }
-  when(R, M) {
-    if (this.state.matched) return this;
-    const D = !!R(this.input);
-    return new I(this.input, D ? { matched: !0, value: M(this.input, this.input) } : $);
-  }
-  otherwise(R) {
-    return this.state.matched ? this.state.value : R(this.input);
-  }
-  exhaustive(R = L) {
-    return this.state.matched ? this.state.value : R(this.input);
-  }
-  run() {
-    return this.exhaustive();
-  }
-  returnType() {
-    return this;
-  }
-}
-function L(C) {
-  throw new W(C);
-}
-const ArtifactPaper = ({ text: C, ...R }) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-  Paper,
-  {
-    withBorder: !0,
-    style: { borderColor: "mageGunmetal.9" },
-    px: "sm",
-    py: 6,
-    ...R,
-    children: /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { size: "md", fw: 400, truncate: "end", style: { textAlign: "left" }, children: C })
-  }
-), GenericError = () => /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { children: "Something went wrong. Please try again later." }), GenericLoading = () => /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { children: "Loading..." }), useTemporaryMessage = (C) => {
-  const [R, M] = reactExports.useState(C), D = reactExports.useRef(!0), F = reactExports.useRef(!1);
-  return reactExports.useEffect(() => {
-    D.current ? D.current = !1 : C && !F.current && (F.current = !0, setTimeout(() => {
-      M(!0);
-    }, 2e3));
-  }, [C]), R;
-}, Step = ({
-  title: C,
-  children: R,
-  value: M,
-  rightSection: D,
-  isLast: F,
-  disabled: H
-}) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
-  Accordion.Item,
-  {
-    value: M,
-    styles: {
-      item: {
-        borderBottom: F ? "none" : ""
-      }
-    },
-    children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
-        Accordion.Control,
-        {
-          h: 65,
-          disabled: H,
-          sx: () => ({
-            "&:hover": {
-              backgroundColor: "transparent"
-            }
-          }),
-          children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Group, { align: "center", justify: "space-between", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(Title$1, { tt: "uppercase", size: "lg", fw: 600, children: C }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { maw: 300, children: !!D && D })
-          ] })
-        }
-      ),
-      R && /* @__PURE__ */ jsxRuntimeExports.jsx(Accordion.Panel, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { px: "md", children: R }) })
-    ]
-  }
-), AnimatedStep = ({
-  children: C,
-  ...R
-}) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-  motion.span,
-  {
-    initial: { opacity: 0, y: 15 },
-    animate: { opacity: 1, y: 0 },
-    exit: { opacity: 0, y: -15 },
-    transition: { duration: 0.3, ease: "easeInOut" },
-    style: { minWidth: 0, textWrap: "nowrap" },
-    ...R,
-    children: C
-  }
-), useDataStepRenderer = (C) => {
+}, useDataStepRenderer = (C) => {
   var Z, Y;
   const R = useFlow(C), M = (Z = R.data) == null ? void 0 : Z.flow_steps.find(
     (Q) => Q.name === FlowSteps.shortlistColumns
@@ -95881,10 +95915,10 @@ const ArtifactPaper = ({ text: C, ...R }) => /* @__PURE__ */ jsxRuntimeExports.j
     }
   );
 }, AnalyzeRequestRunning = () => /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { children: "We're getting clear on your needs..." }), useStepRenderer = (C) => {
-  var G, Z;
-  const R = useFlow(C), M = (G = R.data) == null ? void 0 : G.flow_steps.find(
-    (Y) => Y.name === FlowSteps.analyzeRequest
-  ), D = (M == null ? void 0 : M.status) === "completed", F = useTemporaryMessage(D), H = reactExports.useMemo(() => z(M).with(void 0, () => ({
+  var Z, Y;
+  const R = useFlow(C), M = useMediaQuery(`(max-width: ${em(750)})`), D = (Z = R.data) == null ? void 0 : Z.flow_steps.find(
+    (Q) => Q.name === FlowSteps.analyzeRequest
+  ), F = (D == null ? void 0 : D.status) === "completed", H = useTemporaryMessage(F), U = reactExports.useMemo(() => z(D).with(void 0, () => ({
     rightSection: /* @__PURE__ */ jsxRuntimeExports.jsx(AnimatedStep, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { children: "Your request" }) }, "tasks-0"),
     content: /* @__PURE__ */ jsxRuntimeExports.jsx(AnalyzeRequestRunning, {})
   })).with({ status: "running" }, () => ({
@@ -95894,12 +95928,12 @@ const ArtifactPaper = ({ text: C, ...R }) => /* @__PURE__ */ jsxRuntimeExports.j
     rightSection: /* @__PURE__ */ jsxRuntimeExports.jsx(AnimatedStep, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { children: "?" }) }, "tasks-2"),
     content: /* @__PURE__ */ jsxRuntimeExports.jsx(GenericError, {})
   })).with({ status: "completed" }, () => {
-    var Y, Q;
+    var Q, J;
     return {
-      rightSection: F ? /* @__PURE__ */ jsxRuntimeExports.jsx(AnimatedStep, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip$1, { multiline: !0, w: 350, label: ((Y = R.data) == null ? void 0 : Y.request) || "", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      rightSection: H ? /* @__PURE__ */ jsxRuntimeExports.jsx(AnimatedStep, { children: !M && /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip$1, { multiline: !0, w: 350, label: ((Q = R.data) == null ? void 0 : Q.request) || "", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
         ArtifactPaper,
         {
-          text: ((Q = R.data) == null ? void 0 : Q.request) || "",
+          text: ((J = R.data) == null ? void 0 : J.request) || "",
           withBorder: !1
         }
       ) }) }, "tasks-3") : /* @__PURE__ */ jsxRuntimeExports.jsx(AnimatedStep, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Group, { gap: "xs", wrap: "nowrap", children: [
@@ -95916,10 +95950,10 @@ const ArtifactPaper = ({ text: C, ...R }) => /* @__PURE__ */ jsxRuntimeExports.j
           }
         )
       ] }) }, "data-done"),
-      content: /* @__PURE__ */ jsxRuntimeExports.jsx(AnalyzeRequestCompleted, { step: M })
+      content: /* @__PURE__ */ jsxRuntimeExports.jsx(AnalyzeRequestCompleted, { step: D })
     };
-  }).otherwise(() => null), [M, (Z = R.data) == null ? void 0 : Z.request, F]), U = !!M, q = !M || M.status === "running";
-  return { currentStep: H, highlight: U, isLoading: q, allCompleted: D };
+  }).otherwise(() => null), [D, (Y = R.data) == null ? void 0 : Y.request, M, H]), q = !!D, G = !D || D.status === "running";
+  return { currentStep: U, highlight: q, isLoading: G, allCompleted: F };
 }, TaskStep = ({
   isOpened: C,
   flowId: R
@@ -96133,24 +96167,22 @@ const ArtifactPaper = ({ text: C, ...R }) => /* @__PURE__ */ jsxRuntimeExports.j
 }), useRecommendations = () => useQuery(recommendationsQueryOptions()), DEFAULT_EVENTS = ["mousedown", "touchstart"], useShadowClickOutside = (C, R, M) => {
   const D = reactExports.useRef(null);
   return reactExports.useEffect(() => {
-    const F = (U) => {
-      var Y;
-      const { target: q } = U ?? {}, G = (Y = D.current) == null ? void 0 : Y.getRootNode(), Z = G instanceof ShadowRoot;
+    const F = new AbortController(), H = (G) => {
+      var J;
+      const { target: Z } = G ?? {}, Y = (J = D.current) == null ? void 0 : J.getRootNode(), Q = Y instanceof ShadowRoot;
       if (Array.isArray(M)) {
-        const Q = (q == null ? void 0 : q.hasAttribute("data-ignore-outside-clicks")) || !document.body.contains(q) && q.tagName !== "HTML", J = U.composedPath();
-        M.every((ie) => ie ? !J.includes(ie) : !0) && !Q && C();
+        const te = (Z == null ? void 0 : Z.hasAttribute("data-ignore-outside-clicks")) || !document.body.contains(Z) && Z.tagName !== "HTML", ie = G.composedPath();
+        M.every((oe) => oe ? !ie.includes(oe) : !0) && !te && C();
       } else if (D.current)
-        if (Z) {
-          const Q = U.composedPath(), J = Q.includes(G), te = Q.includes(D.current);
-          (!J || J && !te) && C();
-        } else D.current.contains(q) || C();
-    }, H = { capture: !0, passive: !0 };
+        if (Q) {
+          const te = G.composedPath(), ie = te.includes(Y), ne = te.includes(D.current);
+          (!ie || ie && !ne) && C();
+        } else D.current.contains(Z) || C();
+    }, U = { capture: !0, passive: !0, signal: F.signal };
     return DEFAULT_EVENTS.forEach(
-      (U) => document.addEventListener(U, F, H)
+      (G) => document.addEventListener(G, H, U)
     ), () => {
-      DEFAULT_EVENTS.forEach(
-        (U) => document.removeEventListener(U, F, H)
-      );
+      F.abort();
     };
   }, [D, C, M, R]), D;
 };
@@ -96786,17 +96818,14 @@ function PiFile(C) {
   return GenIcon({ attr: { viewBox: "0 0 256 256", fill: "currentColor" }, child: [{ tag: "path", attr: { d: "M213.66,82.34l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40V216a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V88A8,8,0,0,0,213.66,82.34ZM160,51.31,188.69,80H160ZM200,216H56V40h88V88a8,8,0,0,0,8,8h48V216Z" }, child: [] }] })(C);
 }
 const TextSkeleton = () => /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { height: 24 }), RecentDashboardsDropdown = () => {
-  const C = useRecentFlows(), [R, M] = reactExports.useState(!1), D = useSetAtom(flowIdAtom), F = reactExports.useMemo(() => {
-    var U;
-    return (U = C.data) == null ? void 0 : U.slice(0, 5);
-  }, [C.data]), H = R ? "#DADADA" : "var(--mantine-color-body)";
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+  const { data: C, status: R } = useRecentFlows(5), [M, D] = reactExports.useState(!1), F = useSetAtom(flowIdAtom), H = M ? "#DADADA" : "var(--mantine-color-body)";
+  return !C || C.length == 0 ? null : /* @__PURE__ */ jsxRuntimeExports.jsxs(
     Popover,
     {
       withinPortal: !1,
       width: 350,
-      opened: R,
-      onChange: M,
+      opened: M,
+      onChange: D,
       position: "top-start",
       offset: { mainAxis: -1, crossAxis: 0 },
       styles: {
@@ -96811,7 +96840,7 @@ const TextSkeleton = () => /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { hei
           Group,
           {
             gap: 4,
-            onClick: () => M((U) => !U),
+            onClick: () => D((U) => !U),
             style: {
               cursor: "pointer",
               userSelect: "none",
@@ -96834,7 +96863,7 @@ const TextSkeleton = () => /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { hei
                   size: 18,
                   color: "var(--mantine-color-mageGunmetal-1)",
                   style: {
-                    transform: R ? "rotate(-180deg)" : "",
+                    transform: M ? "rotate(-180deg)" : "",
                     transition: "all 0.2s"
                   }
                 }
@@ -96842,12 +96871,12 @@ const TextSkeleton = () => /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { hei
             ]
           }
         ) }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(Popover.Dropdown, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(Stack, { gap: 2, align: "stretch", children: C.status === "success" ? F == null ? void 0 : F.map((U) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Popover.Dropdown, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(Stack, { gap: 2, align: "stretch", children: R === "success" ? C.map((U) => /* @__PURE__ */ jsxRuntimeExports.jsx(
           Button,
           {
             component: "a",
             onClick: (q) => {
-              q.preventDefault(), D(U.id);
+              q.preventDefault(), F(U.id);
             },
             size: "compact-md",
             leftSection: /* @__PURE__ */ jsxRuntimeExports.jsx(PiFile, { size: 14 }),
@@ -96868,6 +96897,7 @@ const TextSkeleton = () => /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { hei
               {
                 size: "sm",
                 fw: 400,
+                c: "black",
                 style: {
                   textOverflow: "ellipsis",
                   overflow: "hidden",
@@ -96913,6 +96943,9 @@ const TextSkeleton = () => /* @__PURE__ */ jsxRuntimeExports.jsx(Skeleton, { hei
       borderColor: "var(--mantine-primary-color-1)",
       "&::before": {
         opacity: 1
+      },
+      "&::after": {
+        opacity: 0
       }
     },
     "&::after": {
@@ -96968,18 +97001,18 @@ ${M}`);
 ] }) }), Recommendations = ({
   startFlow: C
 }) => {
-  const { data: R, status: M } = useRecommendations(), D = reactExports.useMemo(() => R == null ? void 0 : R.slice(0, 3), [R]);
+  const { data: R, status: M } = useRecommendations(), D = useMediaQuery(`(max-width: ${em(750)})`), F = reactExports.useMemo(() => R == null ? void 0 : R.slice(0, 3), [R]);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(Stack, { flex: 1, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(Title$1, { size: "md", fw: 600, tt: "uppercase", children: "Recommendations based on your data" }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(Group, { wrap: "nowrap", align: "stretch", children: M === "success" ? D == null ? void 0 : D.map((F) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+    /* @__PURE__ */ jsxRuntimeExports.jsx(Group, { wrap: "nowrap", align: "stretch", gap: D ? "xs" : "md", children: M === "success" ? F == null ? void 0 : F.map((H) => /* @__PURE__ */ jsxRuntimeExports.jsx(
       Recommendation,
       {
         startFlow: C,
-        starter: F.starter,
-        explanation: F.explanation,
-        type: F.type
+        starter: H.starter,
+        explanation: H.explanation,
+        type: H.type
       },
-      F.starter
+      H.starter
     )) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(RecommendationSkeleton, {}),
       /* @__PURE__ */ jsxRuntimeExports.jsx(RecommendationSkeleton, {}),
@@ -96988,22 +97021,21 @@ ${M}`);
   ] });
 }, MotionStack = motion.create(Stack), MotionModal = motion.create(Modal.Root), ControlledMageMetricsModal = ({
   children: C,
-  visible: R,
-  onClose: M
+  onClose: R
 }) => {
-  const { classes: D } = useModalStyles();
+  const { classes: M } = useModalStyles();
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     MotionModal,
     {
-      opened: R,
+      opened: !0,
       closeOnEscape: !0,
       fullScreen: !0,
-      onClose: M,
+      onClose: R,
       transitionProps: { transition: "fade", duration: 200 },
       removeScrollProps: {
         enabled: !1
       },
-      className: D.centered,
+      className: M.centered,
       styles: {
         content: {
           display: "flex",
@@ -97041,23 +97073,22 @@ ${M}`);
       ]
     }
   );
-}, StartModal = ({
+}, ModalContent = ({
   showRecentDashboards: C,
   showRecommendations: R,
-  ...M
+  onClose: M
 }) => {
-  const [D, F] = reactExports.useState(!1), H = useContextReady(), { classes: U } = useFlowTrackerStyles({}), q = useSetAtom(flowIdAtom), { mutate: G } = useStartFlow({
+  const [D, F] = reactExports.useState(!1), H = useContextReady(), { classes: U } = useFlowTrackerStyles({}), q = useMediaQuery(`(max-width: ${em(750)})`), G = useSetAtom(flowIdAtom), { mutate: Z } = useStartFlow({
     onSuccess: (se) => {
-      q(se.flowId);
+      G(se.flowId);
     }
-  }), Z = useQueryClient();
+  }), Y = useQueryClient();
   reactExports.useEffect(() => {
-    H && (C && Z.prefetchQuery(recentFlowsQueryOptions()), R && Z.prefetchQuery(recommendationsQueryOptions()));
-  }, [H, R, C, Z]);
-  const Y = useShadowClickOutside(() => {
-    var se;
-    F(!1), (se = M.onClose) == null || se.call(M);
-  }), Q = useForm({
+    H && (C && Y.prefetchQuery(recentFlowsQueryOptions()), R && Y.prefetchQuery(recommendationsQueryOptions()));
+  }, [H, R, C, Y]);
+  const Q = useShadowClickOutside(() => {
+    F(!1), M == null || M();
+  }), J = useForm({
     initialValues: {
       userQuery: ""
     },
@@ -97066,24 +97097,25 @@ ${M}`);
         userQuery: z$1.string().nonempty("Please type in a request")
       })
     )
-  }), J = (se) => {
-    G(se.trim());
-  }, te = reactExports.useMemo(
-    () => Q.values.userQuery.length > 30 || /[\r\n]/.test(Q.values.userQuery) ? Q.values.userQuery.slice(0, 30).replace(/[\r\n]/g, " ") + "…" : Q.values.userQuery,
-    [Q.values.userQuery]
-  ), ie = D && R, ne = D && C, oe = /* @__PURE__ */ jsxRuntimeExports.jsx(
+  }), te = (se) => {
+    Z(se.trim());
+  }, ie = reactExports.useMemo(
+    () => J.values.userQuery.length > 30 || /[\r\n]/.test(J.values.userQuery) ? J.values.userQuery.slice(0, 30).replace(/[\r\n]/g, " ") + "…" : J.values.userQuery,
+    [J.values.userQuery]
+  ), ne = D && R, oe = D && C;
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
     MotionStack,
     {
       flex: 1,
-      w: 600,
+      w: q ? "95%" : 600,
       justify: "flex-end",
       style: { alignSelf: "center" },
       initial: "hidden",
       animate: "visible",
       exit: "hidden",
       variants: overlayVariants,
-      children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Stack, { pb: "md", ref: Y, children: [
-        ie && /* @__PURE__ */ jsxRuntimeExports.jsx(
+      children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Stack, { pb: "md", ref: Q, children: [
+        ne && /* @__PURE__ */ jsxRuntimeExports.jsx(
           Paper,
           {
             component: motion.div,
@@ -97099,7 +97131,7 @@ ${M}`);
             shadow: "lg",
             radius: "md",
             style: { overflow: "hidden", originY: 1 },
-            children: /* @__PURE__ */ jsxRuntimeExports.jsx(Recommendations, { startFlow: J })
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx(Recommendations, { startFlow: te })
           }
         ),
         /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -97127,7 +97159,7 @@ ${M}`);
                     gap: D ? "xs" : "lg",
                     direction: D ? "column" : "row",
                     children: [
-                      /* @__PURE__ */ jsxRuntimeExports.jsxs(Group, { justify: "space-between", children: [
+                      /* @__PURE__ */ jsxRuntimeExports.jsxs(Group, { justify: "space-between", gap: q ? "xs" : "md", children: [
                         /* @__PURE__ */ jsxRuntimeExports.jsx(
                           Title$1,
                           {
@@ -97139,13 +97171,13 @@ ${M}`);
                             children: "Ask your data about"
                           }
                         ),
-                        ne && /* @__PURE__ */ jsxRuntimeExports.jsx(RecentDashboardsDropdown, {})
+                        oe && /* @__PURE__ */ jsxRuntimeExports.jsx(RecentDashboardsDropdown, {})
                       ] }),
                       /* @__PURE__ */ jsxRuntimeExports.jsx(
                         "form",
                         {
-                          onSubmit: Q.onSubmit(
-                            (se) => J(se.userQuery)
+                          onSubmit: J.onSubmit(
+                            (se) => te(se.userQuery)
                           ),
                           style: { flex: "1" },
                           children: /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -97169,16 +97201,16 @@ ${M}`);
                                 }
                               },
                               rightSectionWidth: 28,
-                              ...Q.getInputProps("userQuery"),
-                              value: D ? Q.values.userQuery : te,
+                              ...J.getInputProps("userQuery"),
+                              value: D ? J.values.userQuery : ie,
                               onFocus: () => {
                                 F(!0);
                               },
                               onKeyDown: (se) => {
-                                se.key === "Enter" && !se.shiftKey && (se.preventDefault(), Q.onSubmit((ce) => J(ce.userQuery))());
+                                se.key === "Enter" && !se.shiftKey && (se.preventDefault(), J.onSubmit((ce) => te(ce.userQuery))());
                               }
                             },
-                            Q.key("userQuery")
+                            J.key("userQuery")
                           )
                         }
                       )
@@ -97193,8 +97225,25 @@ ${M}`);
     },
     "request-form"
   );
-  return M.onClose != null && M.visible != null ? /* @__PURE__ */ jsxRuntimeExports.jsx(ControlledMageMetricsModal, { visible: M.visible, onClose: M.onClose, children: oe }) : oe;
-}, defaultColors = {
+}, StartModal = ({
+  showRecentDashboards: C,
+  showRecommendations: R,
+  onClose: M
+}) => M != null ? /* @__PURE__ */ jsxRuntimeExports.jsx(ControlledMageMetricsModal, { onClose: M, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+  ModalContent,
+  {
+    showRecentDashboards: C,
+    showRecommendations: R,
+    onClose: M
+  }
+) }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
+  ModalContent,
+  {
+    showRecentDashboards: C,
+    showRecommendations: R,
+    onClose: M
+  }
+), defaultColors = {
   mageMagenta: [
     "#EED4EB",
     // 0
@@ -97282,87 +97331,92 @@ ${M}`);
     // 11
   ],
   mageWhisper: [...colorsTuple("#FCFDFD"), "#F7F8F8"]
-}, theme = (C, R) => ({
-  cursorType: "pointer",
-  colors: R ? {
-    mageGunmetal: R.darkAccent,
-    mageMagenta: R.primary,
-    mageRuby: R.secondary,
-    mageWhisper: R.lightAccent
-  } : defaultColors,
-  white: "var(--mantine-color-mageWhisper-6)",
-  black: "var(--mantine-color-mageGunmetal-6)",
-  primaryColor: "mageGunmetal",
-  fontFamily: "'Bitter Variable', serif",
-  fontFamilyMonospace: '"Source Code Pro Variable", monospace',
-  headings: { fontFamily: "'Source Sans 3 Variable', sans-serif" },
-  other: {
-    ctaPrimaryFill: "linear-gradient(180deg, var(--mantine-color-mageGunmetal-6) 0%, var(--mantine-color-mageGunmetal-8) 100%)",
-    ctaPrimaryFillDarken: "linear-gradient(180deg, var(--mantine-color-mageGunmetal-7) 0%, var(--mantine-color-mageGunmetal-9) 100%)",
-    ctaSuccessFill: "linear-gradient(180deg, #179949 0%, #117035 100%)",
-    whiteGradient: "linear-gradient(180deg, var(--mantine-color-mageWhisper-0) 0%, var(--mantine-color-mageGunmetal-0) 100%)",
-    rubyGradient: "linear-gradient(91deg, var(--mantine-color-mageRuby-7) 3.36%, var(--mantine-color-mageMagenta-7) 94.28%)",
-    rubyShadow: `0px 0px 7px 2px ${alpha$2("var(--mantine-color-mageRuby-7)", 0.3)}`
-  },
-  components: {
-    Tooltip: {
-      styles: {
-        tooltip: {
-          fontFamily: "'Source Sans 3 Variable'",
-          fontSize: "var(--mantine-font-size-md)",
-          color: "var(--mantine-color-mageWhisper-6)",
-          backgroundColor: "var(--mantine-color-mageGunmetal-8)",
-          padding: "var(--mantine-spacing-xs) var(--mantine-spacing-sm)",
-          lineHeight: 1.8
-        }
-      }
+}, theme = (C, R) => {
+  var M, D, F;
+  return {
+    cursorType: "pointer",
+    colors: R ? {
+      mageGunmetal: R.primary,
+      mageMagenta: R.darkAccent,
+      mageRuby: R.secondary,
+      mageWhisper: R.lightAccent
+    } : defaultColors,
+    white: "var(--mantine-color-mageWhisper-6)",
+    black: R ? "black" : "var(--mantine-color-mageGunmetal-6)",
+    primaryColor: "mageGunmetal",
+    fontFamily: ((M = R == null ? void 0 : R.fonts) == null ? void 0 : M.body) || "'Bitter Variable', serif",
+    fontFamilyMonospace: ((D = R == null ? void 0 : R.fonts) == null ? void 0 : D.monospace) || '"Source Code Pro Variable", monospace',
+    headings: {
+      fontFamily: ((F = R == null ? void 0 : R.fonts) == null ? void 0 : F.heading) || "'Source Sans 3 Variable', sans-serif"
     },
-    Text: {
-      styles: {
-        root: {
-          fontFamily: "'Bitter Variable'"
-        }
-      }
+    other: {
+      ctaPrimaryFill: "linear-gradient(180deg, var(--mantine-color-mageGunmetal-6) 0%, var(--mantine-color-mageGunmetal-8) 100%)",
+      ctaPrimaryFillDarken: "linear-gradient(180deg, var(--mantine-color-mageGunmetal-7) 0%, var(--mantine-color-mageGunmetal-9) 100%)",
+      ctaSuccessFill: "linear-gradient(180deg, #179949 0%, #117035 100%)",
+      whiteGradient: "linear-gradient(180deg, var(--mantine-color-mageWhisper-0) 0%, var(--mantine-color-mageGunmetal-0) 100%)",
+      rubyGradient: "linear-gradient(91deg, var(--mantine-color-mageRuby-7) 3.36%, var(--mantine-color-mageMagenta-7) 94.28%)",
+      rubyShadow: `0px 0px 7px 2px ${alpha$2("var(--mantine-color-mageRuby-7)", 0.3)}`
     },
-    Badge: {
-      styles: {
-        root: {
-          fontFamily: "'Source Sans 3 Variable'"
+    components: {
+      Tooltip: {
+        styles: {
+          tooltip: {
+            fontFamily: "'Source Sans 3 Variable'",
+            fontSize: "var(--mantine-font-size-md)",
+            color: "var(--mantine-color-mageWhisper-6)",
+            backgroundColor: "var(--mantine-color-mageGunmetal-8)",
+            padding: "var(--mantine-spacing-xs) var(--mantine-spacing-sm)",
+            lineHeight: 1.8
+          }
         }
-      }
-    },
-    Button: {
-      styles: {
-        root: {
-          fontFamily: "'Source Sans 3 Variable'"
+      },
+      Text: {
+        styles: {
+          root: {
+            fontFamily: "'Bitter Variable'"
+          }
         }
-      }
-    },
-    Portal: {
-      defaultProps: {
-        target: C
-      }
-    },
-    ScrollArea: {
-      defaultProps: {
-        offsetScrollbars: "present"
-      }
-    },
-    Select: {
-      styles: {
-        root: {
-          fontFamily: "'Source Sans 3 Variable'"
-        },
-        input: {
-          fontFamily: "'Source Sans 3 Variable'"
-        },
-        section: {
-          fontFamily: "'Source Sans 3 Variable'"
+      },
+      Badge: {
+        styles: {
+          root: {
+            fontFamily: "'Source Sans 3 Variable'"
+          }
+        }
+      },
+      Button: {
+        styles: {
+          root: {
+            fontFamily: "'Source Sans 3 Variable'"
+          }
+        }
+      },
+      Portal: {
+        defaultProps: {
+          target: C
+        }
+      },
+      ScrollArea: {
+        defaultProps: {
+          offsetScrollbars: "present"
+        }
+      },
+      Select: {
+        styles: {
+          root: {
+            fontFamily: "'Source Sans 3 Variable'"
+          },
+          input: {
+            fontFamily: "'Source Sans 3 Variable'"
+          },
+          section: {
+            fontFamily: "'Source Sans 3 Variable'"
+          }
         }
       }
     }
-  }
-}), cssResolver = (C) => ({
+  };
+}, cssResolver = (C) => ({
   variables: {
     "--mantine-color-ctaPrimaryFill": C.other.ctaPrimaryFill,
     "--mantine-color-ctaPrimaryFillDarken": C.other.ctaPrimaryFillDarken,
@@ -97373,7 +97427,7 @@ ${M}`);
   },
   light: {},
   dark: {}
-}), Wrapper = ({ children: C, root: R, themeColors: M }) => {
+}), Wrapper = ({ children: C, root: R, theme: M }) => {
   const D = reactExports.useMemo(
     () => theme(R, M),
     [R, M]
@@ -97410,7 +97464,7 @@ ${M}`);
   externalJWT: R,
   apiUrl: M,
   children: D,
-  themeColors: F,
+  theme: F,
   display: H = "block"
 }) => {
   const U = reactExports.useRef(null), [q, G] = reactExports.useState(!1);
@@ -97447,60 +97501,57 @@ ${M}`);
         apiKey: C,
         externalJWT: R,
         apiUrl: M,
-        children: /* @__PURE__ */ jsxRuntimeExports.jsx(Wrapper, { root: U.current, themeColors: F, children: D })
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx(Wrapper, { root: U.current, theme: F, children: D })
       }
     ) }) : null
   ] });
 }, InnerModal = ({
-  persist: C,
-  visible: R,
-  onClose: M,
-  showRecentDashboards: D,
-  showRecommendations: F
+  onClose: C,
+  showRecentDashboards: R,
+  showRecommendations: M
 }) => {
-  const H = useAtomValue(flowIdAtom), U = useAtomValue(activeModalAtom), q = useSetAtom(persistenceAtom);
-  reactExports.useEffect(() => {
-    q(C);
-  }, [C, q]);
-  const G = !!H, Z = G && U === "flow", Y = G && U === "exploreData", Q = !(Z || Y);
+  const D = useAtomValue(flowIdAtom), F = useAtomValue(activeModalAtom), H = !!D, U = H && F === "flow", q = H && F === "exploreData", G = !(U || q);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(AnimatePresence, { mode: "wait", children: [
-    Y && /* @__PURE__ */ jsxRuntimeExports.jsx(ExploreDataModal, {}),
-    Z && /* @__PURE__ */ jsxRuntimeExports.jsx(FlowModal, {}),
-    Q && /* @__PURE__ */ jsxRuntimeExports.jsx(
+    q && /* @__PURE__ */ jsxRuntimeExports.jsx(ExploreDataModal, {}),
+    U && /* @__PURE__ */ jsxRuntimeExports.jsx(FlowModal, {}),
+    G && /* @__PURE__ */ jsxRuntimeExports.jsx(
       StartModal,
       {
-        showRecentDashboards: D !== void 0 ? D : !1,
-        showRecommendations: F !== void 0 ? F : !1,
-        visible: R,
-        onClose: M
+        showRecentDashboards: R !== void 0 ? R : !1,
+        showRecommendations: M !== void 0 ? M : !1,
+        onClose: C
       }
     )
-  ] }, H);
+  ] }, D);
 }, MainModal = ({
   apiKey: C,
   externalJWT: R,
   apiUrl: M,
-  persist: D = "none",
-  modal: F = void 0,
-  startOptions: H = void 0,
-  themeColors: U = void 0
+  display: D = "contents",
+  persist: F = "none",
+  modal: H = void 0,
+  startOptions: U = void 0,
+  theme: q = void 0
 }) => {
-  const q = (F == null ? void 0 : F.visible) === !0 || F == null;
+  const G = useSetAtom(persistenceAtom);
+  reactExports.useEffect(() => {
+    G(F);
+  }, [F, G]);
+  const Z = (H == null ? void 0 : H.visible) === !0 || H === void 0;
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     AppWrapper,
     {
       apiKey: C,
       externalJWT: R,
       apiUrl: M,
-      themeColors: U,
-      children: q && /* @__PURE__ */ jsxRuntimeExports.jsx(
+      theme: q,
+      display: D,
+      children: Z && /* @__PURE__ */ jsxRuntimeExports.jsx(
         InnerModal,
         {
-          persist: D,
-          visible: q,
-          onClose: F == null ? void 0 : F.onClose,
-          showRecentDashboards: H == null ? void 0 : H.showRecentDashboards,
-          showRecommendations: H == null ? void 0 : H.showRecommendations
+          onClose: H == null ? void 0 : H.onClose,
+          showRecentDashboards: U == null ? void 0 : U.showRecentDashboards,
+          showRecommendations: U == null ? void 0 : U.showRecommendations
         }
       )
     }
@@ -97521,6 +97572,7 @@ ${M}`);
   customElements.get("magemetrics-ai") || customElements.define("magemetrics-ai", MagemetricsAI);
 };
 export {
+  colorsTuple as a,
   createMagemetrics as c,
   getDefaultExportFromCjs as g,
   logout as l