@magemetrics/ai 0.0.28 → 0.0.30

package/dist/web-component/{web-component-J_lmvPsd.js → web-component-CSFSUg2K.js}

@@ -12259,7 +12259,7 @@ class RealtimeClient {
         close: () => {
           this.conn = null;
         }
-      }), import("./browser-yp_VhCQy.js").then((R) => R.b).then(({ default: R }) => {
+      }), import("./browser-sDEj-xS6.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() {
@@ -56229,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"),
@@ -56250,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)
           })
         }
@@ -56281,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 },
@@ -56427,25 +56430,7 @@ 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 [];
@@ -94130,10 +94115,13 @@ const Dagre = /* @__PURE__ */ getDefaultExportFromCjs(dagreExports), getLayouted
     },
     F.id
   );
-}) }, 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) => {
+}) }, D.id)) }), CellContent$1 = ({ formattedValue: C }) => {
+  const R = C == null ? void 0 : C.display;
+  return !R || R === "empty" ? /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { span: !0, ff: "heading", c: "dimmed", size: "sm", truncate: "end", children: "empty" }) : R;
+}, 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))
@@ -94143,7 +94131,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
     })
@@ -95026,7 +95014,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(
@@ -95272,7 +95613,10 @@ 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: C }) => {
+  const R = C == null ? void 0 : C.display;
+  return !R || R === "empty" ? /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { c: "dimmed", size: "sm", truncate: "end", children: "empty" }) : R && R.length > MAX_CELL_CHAR_LENGTH ? /* @__PURE__ */ jsxRuntimeExports.jsx(Tooltip$1, { multiline: !0, maw: "25rem", label: R, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { truncate: "end", children: R }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { truncate: "end", children: R });
+}, 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,
@@ -95292,6 +95636,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({
@@ -95456,314 +95801,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
@@ -95883,10 +95921,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" }, () => ({
@@ -95896,12 +95934,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: [
@@ -95918,10 +95956,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
@@ -96969,18 +97007,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, {}),
@@ -97046,17 +97084,17 @@ ${M}`);
   showRecommendations: R,
   onClose: M
 }) => {
-  const [D, F] = reactExports.useState(!1), H = useContextReady(), { classes: U } = useFlowTrackerStyles({}), q = useSetAtom(flowIdAtom), { mutate: G } = useStartFlow({
-    onSuccess: (oe) => {
-      q(oe.flowId);
+  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) => {
+      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(() => {
+    H && (C && Y.prefetchQuery(recentFlowsQueryOptions()), R && Y.prefetchQuery(recommendationsQueryOptions()));
+  }, [H, R, C, Y]);
+  const Q = useShadowClickOutside(() => {
     F(!1), M == null || M();
-  }), Q = useForm({
+  }), J = useForm({
     initialValues: {
       userQuery: ""
     },
@@ -97065,25 +97103,22 @@ ${M}`);
         userQuery: z$1.string().nonempty("Please type in a request")
       })
     )
-  }), J = (oe) => {
-    G(oe.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;
+  }), 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,
-      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 +97134,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 +97162,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 +97174,13 @@ ${M}`);
                             children: "Ask your data about"
                           }
                         ),
-                        ne && /* @__PURE__ */ jsxRuntimeExports.jsx(RecentDashboardsDropdown, {})
+                        oe && /* @__PURE__ */ jsxRuntimeExports.jsx(RecentDashboardsDropdown, {})
                       ] }),
                       /* @__PURE__ */ jsxRuntimeExports.jsx(
                         "form",
                         {
-                          onSubmit: Q.onSubmit(
-                            (oe) => J(oe.userQuery)
+                          onSubmit: J.onSubmit(
+                            (se) => te(se.userQuery)
                           ),
                           style: { flex: "1" },
                           children: /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -97169,16 +97204,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: (oe) => {
-                                oe.key === "Enter" && !oe.shiftKey && (oe.preventDefault(), Q.onSubmit((se) => J(se.userQuery))());
+                              onKeyDown: (se) => {
+                                se.key === "Enter" && !se.shiftKey && (se.preventDefault(), J.onSubmit((ce) => te(ce.userQuery))());
                               }
                             },
-                            Q.key("userQuery")
+                            J.key("userQuery")
                           )
                         }
                       )
@@ -97197,21 +97232,24 @@ ${M}`);
   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 = {
+}) => {
+  const D = useMediaQuery(`(max-width: ${em(750)})`);
+  return M != null ? /* @__PURE__ */ jsxRuntimeExports.jsx(ControlledMageMetricsModal, { onClose: M, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Flex, { h: "100%", align: "end", w: D ? "95%" : 600, mx: "auto", 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
@@ -97299,87 +97337,92 @@ ${M}`);
     // 11
   ],
   mageWhisper: [...colorsTuple("#FCFDFD"), "#F7F8F8"]
-}, theme = (C, R) => ({
-  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: "'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,
@@ -97390,7 +97433,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]
@@ -97427,7 +97470,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);
@@ -97464,7 +97507,7 @@ ${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
   ] });
@@ -97490,29 +97533,31 @@ ${M}`);
   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 = useSetAtom(persistenceAtom);
+  const G = useSetAtom(persistenceAtom);
   reactExports.useEffect(() => {
-    q(D);
-  }, [D, q]);
-  const G = (F == null ? void 0 : F.visible) === !0 || F === void 0;
+    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: G && /* @__PURE__ */ jsxRuntimeExports.jsx(
+      theme: q,
+      display: D,
+      children: Z && /* @__PURE__ */ jsxRuntimeExports.jsx(
         InnerModal,
         {
-          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
         }
       )
     }