lytx 0.3.0

package/src/app/components/reports/AskAiWorkspace.tsx

@@ -0,0 +1,371 @@
+"use client";
+
+import { useContext, useEffect, useMemo, useRef, useState } from "react";
+import { useChat } from "@ai-sdk/react";
+import { DefaultChatTransport } from "ai";
+import { ResponsiveBar } from "@nivo/bar";
+import { ResponsiveLine } from "@nivo/line";
+import { ResponsivePie } from "@nivo/pie";
+import { Button } from "@/app/components/ui/Button";
+import { AuthContext } from "@/app/providers/AuthProvider";
+import { useTheme } from "@/app/providers/ThemeProvider";
+import { createChartTheme } from "@/app/utils/chartThemes";
+
+type AskAiWorkspaceProps = {
+  initialAiConfigured: boolean;
+  initialAiModel: string;
+};
+
+type AiChartPoint = {
+  x: string;
+  y: number;
+};
+
+type AiNivoChartOutput = {
+  kind: "nivo-chart";
+  chartType: "bar" | "line" | "pie";
+  title: string;
+  metricType?: string;
+  siteId: number;
+  dateRange?: {
+    start?: string;
+    end?: string;
+  };
+  points: AiChartPoint[];
+};
+
+const truncateAxisLabel = (value: unknown, max = 20) => {
+  const label = String(value ?? "").trim();
+  if (label.length <= max) return label;
+  return `${label.slice(0, max - 3)}...`;
+};
+
+function isAiNivoChartOutput(value: unknown): value is AiNivoChartOutput {
+  if (!value || typeof value !== "object") return false;
+  const candidate = value as Partial<AiNivoChartOutput>;
+  const chartType = candidate.chartType;
+  return candidate.kind === "nivo-chart"
+    && (chartType === "bar" || chartType === "line" || chartType === "pie")
+    && Array.isArray(candidate.points);
+}
+
+function getMessageText(parts: Array<unknown>) {
+  return parts
+    .map((part) => {
+      if (!part || typeof part !== "object") return "";
+      const candidate = part as { type?: string; text?: string };
+      return candidate.type === "text" && typeof candidate.text === "string" ? candidate.text : "";
+    })
+    .join("");
+}
+
+function getChartOutput(parts: Array<unknown>): AiNivoChartOutput | null {
+  for (const part of parts) {
+    if (!part || typeof part !== "object") continue;
+    const candidate = part as { state?: string; output?: unknown };
+    if (candidate.state !== "output-available") continue;
+    if (isAiNivoChartOutput(candidate.output)) {
+      return candidate.output;
+    }
+  }
+
+  return null;
+}
+
+function getChartFallbackSummary(chart: AiNivoChartOutput) {
+  const points = chart.points
+    .map((point) => ({ x: String(point.x ?? "Unknown"), y: Number(point.y) || 0 }))
+    .filter((point) => point.x.length > 0)
+    .toSorted((a, b) => b.y - a.y);
+
+  if (points.length === 0) {
+    return `Here is your ${chart.chartType} chart for ${chart.title}. There is no data in the selected range.`;
+  }
+
+  const top = points.slice(0, 3).map((point) => `${point.x} (${point.y})`).join(", ");
+  return `Here is your ${chart.chartType} chart for ${chart.title}. Top values: ${top}.`;
+}
+
+const starterPrompts = [
+  "Show a bar chart of top pages in the last 14 days",
+  "Make a bar chart of top referrers for the last 7 days",
+  "Create a line chart of daily event volume for the last 30 days",
+  "Plot a line chart of hourly events for the last 24 hours",
+  "Show a pie chart of device types for this week",
+  "Give me a pie chart of country distribution for today",
+];
+
+function AskAiChartPanel({
+  chart,
+  chartTheme,
+  legendTextColor,
+}: {
+  chart: AiNivoChartOutput;
+  chartTheme: ReturnType<typeof createChartTheme>;
+  legendTextColor: string;
+}) {
+  const points = chart.points
+    .map((point) => ({ x: String(point.x ?? "Unknown"), y: Number(point.y) || 0 }))
+    .filter((point) => point.x.length > 0);
+
+  return (
+    <div className="w-full rounded-lg border border-(--theme-border-primary) bg-(--theme-bg-primary) p-3">
+      <div className="mb-2 text-sm font-medium text-(--theme-text-primary)">{chart.title}</div>
+      <div style={{ height: 260 }}>
+        {points.length === 0 ? (
+          <div className="flex h-full items-center justify-center text-sm text-(--theme-text-secondary)">
+            No chart data for this range.
+          </div>
+        ) : chart.chartType === "line" ? (
+          <ResponsiveLine
+            data={[
+              {
+                id: chart.metricType || chart.title,
+                data: points.map((point) => ({ x: point.x, y: point.y })),
+              },
+            ]}
+            margin={{ top: 20, right: 24, bottom: 44, left: 56 }}
+            xScale={{ type: "point" }}
+            yScale={{ type: "linear", min: 0, max: "auto", stacked: false, reverse: false }}
+            pointSize={7}
+            pointBorderWidth={2}
+            enableArea
+            areaOpacity={0.2}
+            useMesh
+            colors={["#f59e0b"]}
+            theme={chartTheme}
+          />
+        ) : chart.chartType === "pie" ? (
+          <ResponsivePie
+            data={points.map((point) => ({ id: point.x, label: point.x, value: point.y }))}
+            margin={{ top: 20, right: 24, bottom: 44, left: 24 }}
+            innerRadius={0.5}
+            padAngle={0.7}
+            cornerRadius={3}
+            activeOuterRadiusOffset={8}
+            colors={["#f59e0b", "#f97316", "#fb923c", "#fdba74", "#fcd34d", "#fbbf24"]}
+            theme={chartTheme}
+            legends={[
+              {
+                anchor: "bottom",
+                direction: "row",
+                justify: false,
+                translateY: 36,
+                itemWidth: 90,
+                itemHeight: 18,
+                itemsSpacing: 4,
+                symbolSize: 12,
+                symbolShape: "circle",
+                itemTextColor: legendTextColor,
+              },
+            ]}
+          />
+        ) : (
+          <ResponsiveBar
+            data={points.map((point) => ({ x: point.x, y: point.y }))}
+            keys={["y"]}
+            indexBy="x"
+            margin={{ top: 20, right: 24, bottom: 56, left: 72 }}
+            padding={0.3}
+            colors={["#f59e0b"]}
+            valueScale={{ type: "linear" }}
+            indexScale={{ type: "band", round: true }}
+            axisBottom={{
+              tickRotation: -20,
+              tickPadding: 14,
+              format: (value) => truncateAxisLabel(value),
+            }}
+            theme={chartTheme}
+          />
+        )}
+      </div>
+    </div>
+  );
+}
+
+export function AskAiWorkspace({ initialAiConfigured, initialAiModel }: AskAiWorkspaceProps) {
+  const { current_site } = useContext(AuthContext) || { current_site: null };
+  const { theme } = useTheme();
+  const chartTheme = useMemo(() => createChartTheme(theme === "dark"), [theme]);
+  const legendTextColor = theme === "dark" ? "#ffffff" : "#4b5563";
+  const chatTransport = useMemo(
+    () =>
+      new DefaultChatTransport({
+        api: "/api/ai/chat",
+        body: {
+          site_id: current_site?.id ?? null,
+        },
+      }),
+    [current_site?.id],
+  );
+
+  const messagesContainerRef = useRef<HTMLDivElement>(null);
+  const aiConfigured = initialAiConfigured;
+
+  const {
+    messages,
+    status,
+    error,
+    sendMessage,
+    setMessages,
+    clearError,
+  } = useChat({
+    transport: chatTransport,
+    experimental_throttle: 24,
+  });
+
+  const isBusy = status === "submitted" || status === "streaming";
+  const canSend = aiConfigured && !isBusy;
+  const [draft, setDraft] = useState("");
+  const draftValue = typeof draft === "string" ? draft : "";
+  const modelLabel = aiConfigured
+    ? (initialAiModel || "Configured model")
+    : "Model not configured";
+
+  useEffect(() => {
+    const container = messagesContainerRef.current;
+    if (!container) return;
+
+    const frame = window.requestAnimationFrame(() => {
+      container.scrollTo({ top: container.scrollHeight, behavior: "auto" });
+    });
+
+    return () => window.cancelAnimationFrame(frame);
+  }, [messages, status, error]);
+
+  return (
+    <section className="w-full min-h-[calc(100dvh-9rem)]">
+      <div className="flex h-[calc(100dvh-11rem)] min-h-[560px] flex-col rounded-xl border border-(--theme-border-primary) bg-(--theme-card-bg) p-4 sm:p-6">
+        <div className="flex items-center justify-between gap-3">
+          <div>
+            <h2 className="text-xl font-semibold text-(--theme-text-primary)">Ask AI</h2>
+            <p className="mt-1 text-sm text-(--theme-text-secondary)">
+              Quick conversational help for analytics questions and report ideas.
+            </p>
+          </div>
+          <div className="flex items-center gap-2">
+            <span className="hidden sm:inline-flex rounded-full border border-(--theme-border-primary) bg-(--theme-bg-secondary) px-2.5 py-1 text-xs text-(--theme-text-secondary)">
+              {modelLabel}
+            </span>
+            <Button
+              variant="secondary"
+              size="sm"
+              onClick={() => {
+                setMessages([]);
+                clearError();
+              }}
+              disabled={messages.length === 0 && !error}
+            >
+              Clear
+            </Button>
+          </div>
+        </div>
+
+        {!aiConfigured ? (
+          <div className="mt-4 rounded-lg border border-red-500 bg-red-500/10 px-3 py-2 text-sm text-red-400">
+            AI is not configured on the server yet.
+          </div>
+        ) : null}
+
+        <div className="mt-4 flex min-h-0 flex-1 flex-col rounded-lg border border-(--theme-border-primary) bg-(--theme-bg-secondary) p-3">
+          <div ref={messagesContainerRef} className="min-h-0 flex-1 overflow-y-auto space-y-3 pr-1">
+            {messages.length === 0 ? (
+              <div className="space-y-3">
+                <p className="text-sm text-(--theme-text-secondary)">
+                  Ask a question or use a starter prompt below.
+                </p>
+              </div>
+            ) : (
+              messages.map((message) => {
+                const isUser = message.role === "user";
+                const text = getMessageText(message.parts as Array<unknown>);
+                const chart = getChartOutput(message.parts as Array<unknown>);
+
+                if (text.trim().length === 0 && !chart) {
+                  return null;
+                }
+
+                if (isUser) {
+                  return (
+                    <div
+                      key={message.id}
+                      className="ml-auto max-w-[92%] rounded-lg bg-(--theme-text-primary) px-3 py-2 text-sm whitespace-pre-wrap text-(--theme-bg-primary)"
+                    >
+                      {text}
+                    </div>
+                  );
+                }
+
+                return (
+                  <div key={message.id} className="mr-auto w-full space-y-2">
+                    {text.trim().length > 0 ? (
+                      <div className="max-w-[92%] rounded-lg border border-(--theme-border-primary) bg-(--theme-bg-primary) px-3 py-2 text-sm whitespace-pre-wrap text-(--theme-text-primary)">
+                        {text}
+                      </div>
+                    ) : chart ? (
+                      <div className="max-w-[92%] rounded-lg border border-(--theme-border-primary) bg-(--theme-bg-primary) px-3 py-2 text-sm whitespace-pre-wrap text-(--theme-text-primary)">
+                        {getChartFallbackSummary(chart)}
+                      </div>
+                    ) : null}
+                    {chart ? (
+                      <AskAiChartPanel
+                        chart={chart}
+                        chartTheme={chartTheme}
+                        legendTextColor={legendTextColor}
+                      />
+                    ) : null}
+                  </div>
+                );
+              })
+            )}
+            {error ? <p className="text-sm text-red-400">{error.message}</p> : null}
+          </div>
+
+          {messages.length === 0 ? (
+            <div className="mt-3 flex flex-wrap gap-2">
+              {starterPrompts.map((prompt) => (
+                <button
+                  key={prompt}
+                  type="button"
+                  className="rounded-full border border-(--theme-border-primary) bg-(--theme-bg-primary) px-3 py-1.5 text-xs text-(--theme-text-primary) hover:bg-(--theme-bg-tertiary)"
+                  onClick={() => setDraft(prompt)}
+                >
+                  {prompt}
+                </button>
+              ))}
+            </div>
+          ) : null}
+
+          <form
+            className="mt-3 flex items-center gap-2"
+            onSubmit={(event) => {
+              event.preventDefault();
+              if (!canSend) {
+                return;
+              }
+              const nextMessage = draftValue.trim();
+              if (!nextMessage) return;
+              clearError();
+              void sendMessage({ text: nextMessage });
+              setDraft("");
+            }}
+          >
+            <input
+              value={draftValue}
+              onChange={(event) => {
+                if (error) clearError();
+                setDraft(event.target.value);
+              }}
+              placeholder={aiConfigured ? "Ask about your data..." : "AI not configured"}
+              disabled={!aiConfigured || isBusy}
+              className="flex-1 rounded-md border border-(--theme-input-border) bg-(--theme-input-bg) px-3 py-2 text-sm text-(--theme-text-primary) focus:outline-none focus:ring-2 focus:ring-(--theme-border-secondary)"
+            />
+            <Button type="submit" variant="primary" disabled={!canSend || draftValue.trim().length === 0}>
+              {isBusy ? "..." : "Send"}
+            </Button>
+          </form>
+        </div>
+      </div>
+    </section>
+  );
+}

package/src/app/components/reports/CreateReportStarter.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+type ReportTemplateCard = {
+  id: string;
+  title: string;
+  description: string;
+};
+
+const reportTemplateCards: ReportTemplateCard[] = [
+  {
+    id: "ecomm-tracker",
+    title: "Ecomm Tracker",
+    description: "Monitor storefront traffic, product views, cart starts, and checkout conversion in one report.",
+  },
+  {
+    id: "marketing-leads",
+    title: "Marketing leads",
+    description: "Track landing-page engagement, lead-form submissions, and channel quality for campaign optimization.",
+  },
+];
+
+type CreateReportStarterProps = {
+  onStartCustomReport: () => void;
+  onStartTemplate: (templateId: string) => void;
+};
+
+export function CreateReportStarter({ onStartCustomReport, onStartTemplate }: CreateReportStarterProps) {
+  return (
+    <section className="max-w-5xl mx-auto space-y-6">
+      <div className="space-y-2">
+        <h2 className="text-2xl sm:text-3xl font-semibold text-(--theme-text-primary)">
+          Start a report
+        </h2>
+        <p className="text-(--theme-text-secondary)">
+          Build a custom report from scratch or start from a saved template.
+        </p>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
+        <button
+          type="button"
+          onClick={onStartCustomReport}
+          className="group rounded-xl border border-dashed border-(--theme-border-primary) bg-(--theme-bg-secondary) hover:bg-(--theme-bg-tertiary) p-5 text-left transition-colors focus:outline-none focus:ring-2 focus:ring-(--theme-border-secondary)"
+        >
+          <span className="inline-flex h-10 w-10 items-center justify-center rounded-full border border-(--theme-border-primary) text-(--theme-text-primary) mb-4">
+            <svg aria-hidden="true" className="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <path d="M12 5v14" />
+              <path d="M5 12h14" />
+            </svg>
+          </span>
+          <p className="text-base font-semibold text-(--theme-text-primary)">Build custom report</p>
+          <p className="mt-1 text-sm text-(--theme-text-secondary)">
+            Start with a blank canvas and add the metrics and dimensions you need.
+          </p>
+        </button>
+
+        {reportTemplateCards.map((template) => (
+          <button
+            key={template.id}
+            type="button"
+            onClick={() => onStartTemplate(template.id)}
+            className="rounded-xl border border-(--theme-border-primary) bg-(--theme-card-bg) hover:bg-(--theme-bg-secondary) p-5 text-left transition-colors focus:outline-none focus:ring-2 focus:ring-(--theme-border-secondary)"
+          >
+            <p className="text-base font-semibold text-(--theme-text-primary)">{template.title}</p>
+            <p className="mt-1 text-sm text-(--theme-text-secondary)">{template.description}</p>
+            <span className="mt-4 inline-flex items-center text-xs font-medium text-(--theme-text-secondary)">
+              Use template
+            </span>
+          </button>
+        ))}
+      </div>
+    </section>
+  );
+}

package/src/app/components/reports/DashboardRouteFiltersContext.tsx

@@ -0,0 +1,14 @@
+"use client";
+
+import { createContext, useContext } from "react";
+import type { DashboardFilters } from "@/app/components/charts/ChartComponents";
+
+type DashboardRouteFiltersContextValue = {
+  filters: DashboardFilters;
+  timezone: string;
+};
+
+export const DashboardRouteFiltersContext =
+  createContext<DashboardRouteFiltersContextValue | null>(null);
+
+export const useDashboardRouteFilters = () => useContext(DashboardRouteFiltersContext);

package/src/app/components/reports/DashboardToolbar.tsx

@@ -0,0 +1,154 @@
+"use client";
+
+import { useContext, useMemo } from "react";
+import { useQuery } from "@tanstack/react-query";
+import type { ReactNode } from "react";
+import { SiteSelector } from "@components/SiteSelector";
+import { AuthContext } from "@/app/providers/AuthProvider";
+import { CurrentVisitors } from "@/app/components/charts/ChartComponents";
+import {
+  ReportBuilderMenu,
+  type ReportBuilderMenuActiveId,
+  type ReportBuilderMenuItem,
+} from "@/app/components/ui/ReportBuilderMenu";
+import { getDashboardReportBuilderMenuItems } from "@/app/components/reports/reportBuilderMenuItems";
+import type { CustomReportRecord } from "@/app/components/reports/custom/types";
+
+export type ToolbarSiteOption = {
+  site_id: number;
+  name: string;
+  tag_id: string;
+};
+
+type DashboardToolbarProps = {
+  activeReportBuilderItemId?: ReportBuilderMenuActiveId;
+  reportBuilderEnabled?: boolean;
+  askAiEnabled?: boolean;
+  controls?: ReactNode;
+  footer?: ReactNode;
+  initialSites?: ToolbarSiteOption[];
+  initialSiteId?: number | null;
+  initialReportSwitcherItems?: ReportBuilderMenuItem[];
+};
+
+export function DashboardToolbar({
+  activeReportBuilderItemId = "create-report",
+  reportBuilderEnabled = false,
+  askAiEnabled = true,
+  controls,
+  footer,
+  initialSites = [],
+  initialSiteId = null,
+  initialReportSwitcherItems = [],
+}: DashboardToolbarProps) {
+  const { data: session, current_site } = useContext(AuthContext) || { data: null, current_site: null };
+  const activeCustomReportUuid =
+    activeReportBuilderItemId.startsWith("custom-report:")
+      ? activeReportBuilderItemId.slice("custom-report:".length)
+      : null;
+
+  const fallbackSiteId = session?.userSites?.[0]?.site_id ?? initialSiteId ?? initialSites[0]?.site_id;
+  const currentSiteId = current_site?.id ?? fallbackSiteId;
+
+  const { data: customReportsData } = useQuery<{ reports?: CustomReportRecord[] }>({
+    queryKey: ["dashboard-toolbar-custom-reports", currentSiteId],
+    enabled: reportBuilderEnabled && !!currentSiteId,
+    queryFn: async () => {
+      const response = await fetch(`/api/reports/custom?site_id=${currentSiteId}`);
+      if (!response.ok) {
+        return { reports: [] };
+      }
+      return (await response.json()) as { reports?: CustomReportRecord[] };
+    },
+    staleTime: 0,
+    gcTime: 0,
+  });
+
+  const reportSwitcherItems = useMemo<ReportBuilderMenuItem[]>(() => {
+    const reports = customReportsData?.reports ?? [];
+    if (reports.length === 0 && initialReportSwitcherItems.length > 0) {
+      return initialReportSwitcherItems;
+    }
+
+    return reports.slice(0, 10).map((report) => ({
+      id: `custom-report:${report.uuid}`,
+      label: report.name || "Untitled custom report",
+      href: `/dashboard/reports/custom/${report.uuid}`,
+    }));
+  }, [customReportsData?.reports, initialReportSwitcherItems]);
+
+  const hasActiveCustomReportItem = activeCustomReportUuid
+    ? reportSwitcherItems.some((item) => item.id === `custom-report:${activeCustomReportUuid}`)
+    : false;
+
+  const { data: activeCustomReportData } = useQuery<{ report?: CustomReportRecord | null }>({
+    queryKey: ["dashboard-toolbar-active-custom-report", activeCustomReportUuid],
+    enabled: reportBuilderEnabled && Boolean(activeCustomReportUuid) && !hasActiveCustomReportItem,
+    queryFn: async () => {
+      const response = await fetch(`/api/reports/custom/${activeCustomReportUuid}`);
+      if (!response.ok) {
+        return { report: null };
+      }
+      return (await response.json()) as { report?: CustomReportRecord | null };
+    },
+    staleTime: 0,
+    gcTime: 0,
+  });
+
+  const resolvedReportSwitcherItems = useMemo<ReportBuilderMenuItem[]>(() => {
+    if (!activeCustomReportUuid || hasActiveCustomReportItem) {
+      return reportSwitcherItems;
+    }
+
+    return [
+      {
+        id: `custom-report:${activeCustomReportUuid}`,
+        label: activeCustomReportData?.report?.name || "Custom report",
+        href: `/dashboard/reports/custom/${activeCustomReportUuid}`,
+      },
+      ...reportSwitcherItems,
+    ];
+  }, [
+    activeCustomReportData?.report?.name,
+    activeCustomReportUuid,
+    hasActiveCustomReportItem,
+    reportSwitcherItems,
+  ]);
+
+  const reportBuilderMenuItems = useMemo<ReportBuilderMenuItem[]>(
+    () => [...getDashboardReportBuilderMenuItems({ askAiEnabled }), ...resolvedReportSwitcherItems],
+    [askAiEnabled, resolvedReportSwitcherItems],
+  );
+
+  return (
+    <div className="sticky top-0 z-40 bg-(--theme-bg-primary) border-t border-b border-(--theme-border-primary) px-3 py-2 sm:px-6 sm:py-3 lg:px-8 shadow-[0_6px_14px_rgba(0,0,0,0.12)]">
+      <div className="flex items-center justify-between gap-2 sm:gap-4">
+        <div className="flex items-center gap-2 sm:gap-3 min-w-0">
+          <SiteSelector initialSites={initialSites} initialSiteId={initialSiteId} />
+          {currentSiteId ? (
+            <div className="hidden sm:flex">
+              <CurrentVisitors siteId={currentSiteId} />
+            </div>
+          ) : null}
+        </div>
+        <div className="flex items-center gap-2 relative">
+          {reportBuilderEnabled ? (
+            <ReportBuilderMenu
+              items={reportBuilderMenuItems}
+              activeItemId={activeReportBuilderItemId}
+            />
+          ) : null}
+          {controls}
+        </div>
+      </div>
+
+      {currentSiteId ? (
+        <div className="flex sm:hidden items-center mt-1.5">
+          <CurrentVisitors siteId={currentSiteId} />
+        </div>
+      ) : null}
+
+      {footer}
+    </div>
+  );
+}

package/src/app/components/reports/DashboardWorkspaceLayout.tsx

@@ -0,0 +1,63 @@
+import type { LayoutProps } from "rwsdk/router";
+import type { ReportBuilderMenuActiveId } from "@/app/components/ui/ReportBuilderMenu";
+import { DashboardWorkspaceShell } from "@/app/components/reports/DashboardWorkspaceShell";
+import { isAskAiEnabled, isReportBuilderEnabled } from "@/lib/featureFlags";
+import type { ToolbarSiteOption } from "@/app/components/reports/DashboardToolbar";
+
+type LayoutContextLike = {
+  session?: {
+    last_site_id?: number | null;
+  };
+  sites?: Array<{
+    site_id: number;
+    name: string | null;
+    tag_id: string;
+  }> | null;
+};
+
+const resolveActiveReportBuilderItem = (pathname: string): ReportBuilderMenuActiveId => {
+  const customReportMarker = "/dashboard/reports/custom/";
+  if (pathname.includes(customReportMarker)) {
+    const reportUuid = decodeURIComponent(pathname.slice(pathname.indexOf(customReportMarker) + customReportMarker.length));
+    if (reportUuid && reportUuid !== "new" && !reportUuid.includes("/")) {
+      return `custom-report:${reportUuid}`;
+    }
+  }
+
+  if (pathname.includes("/dashboard/reports/create-reference")) return "create-reference";
+  if (pathname.includes("/dashboard/reports/ask-ai")) return "ask-ai";
+  if (pathname.includes("/dashboard/reports/create-dashboard")) return "create-dashboard";
+  if (pathname.includes("/dashboard/reports/create-notification")) return "create-notification";
+  return "create-report";
+};
+
+export function DashboardWorkspaceLayout({ children, requestInfo }: LayoutProps) {
+  const pathname = requestInfo ? new URL(requestInfo.request.url).pathname : "/dashboard/reports/create-report";
+  const activeReportBuilderItemId = resolveActiveReportBuilderItem(pathname);
+  const reportBuilderEnabled = isReportBuilderEnabled();
+  const askAiEnabled = reportBuilderEnabled && isAskAiEnabled();
+  const ctx = requestInfo?.ctx as LayoutContextLike | undefined;
+
+  const initialSites: ToolbarSiteOption[] = (ctx?.sites ?? []).map((site) => ({
+    site_id: site.site_id,
+    name: site.name || `Site ${site.site_id}`,
+    tag_id: site.tag_id,
+  }));
+
+  const preferredSiteId = ctx?.session?.last_site_id ?? null;
+  const initialSiteId = initialSites.some((site) => site.site_id === preferredSiteId)
+    ? preferredSiteId
+    : (initialSites[0]?.site_id ?? null);
+
+  return (
+    <DashboardWorkspaceShell
+      activeReportBuilderItemId={activeReportBuilderItemId}
+      reportBuilderEnabled={reportBuilderEnabled}
+      askAiEnabled={askAiEnabled}
+      initialSites={initialSites}
+      initialSiteId={initialSiteId}
+    >
+      {children}
+    </DashboardWorkspaceShell>
+  );
+}