Merge pull request #508 from databuddy-analytics/staging

Release staging to main

Author: izadoesdev

.agents/skills/databuddy-internal/SKILL.md

@@ -79,6 +79,7 @@ Read [codebase-map.md](./references/codebase-map.md) when you need deeper routin
 - When running `bun install --lockfile-only`, preserve lockfile sync for pre-existing `package.json` changes instead of reverting them as unrelated.
 - Task runner: `turbo`
 - Formatting/linting: `bun run format`, `bun run lint`
+- Use neutral branch names, commit messages, and PR copy; do not include tool-attribution prefixes or generated-by language.
 - Lefthook's `no-secrets` guard intentionally ignores the exact `.env.example` template; real `.env`, `.env.*`, key, and credential files should still be blocked.
 - Root dev orchestration: `bun run dev`
 - Dashboard + API together: `bun run dev:dashboard`
@@ -105,6 +106,9 @@ Read [codebase-map.md](./references/codebase-map.md) when you need deeper routin
 - When fixing broken dashboard links to moved sections, update the real docs/search/navigation links and section anchors directly; do not add compatibility redirect pages unless explicitly requested.
 - Custom events UI is shared in `apps/dashboard/components/events/custom-events`; keep many-series legends outside the Recharts plot, use compact controls for property-summary event selection, and avoid separate event-count chip/list sections.
 - Goals and Funnels are sibling conversion surfaces; keep Goals list-first and visually aligned with `app/(main)/websites/[id]/funnels` instead of adding separate summary-card chrome.
+- Funnel rows keep the action menu outside the main toggle button; put row padding on the sibling `Button`, not only on `List.Row`, so the visible row surface is clickable without nesting buttons.
+- Demo website navigation must be public-safe and route-backed; hide sensitive, configuration-heavy, or unavailable website features such as Agent, Feature Flags, Revenue, Users, Realtime, Anomalies, and website Settings instead of inheriting the full website nav. Goals and Funnels may be public demo surfaces, but keep them read-only.
+- Dashboard definitions for feature flags and target groups are admin surfaces; do not expose even sanitized rows to demo-tier/public website access.
 - Insights merged feed (`use-insights-feed`) collapses history + AI by `insightSignalDedupeKey` in `apps/dashboard/lib/insight-signal-key.ts` so the list is one row per signal (latest wins).
 - Insights page (`app/(main)/insights`) should stay focused on the brief + signal queue; do not add generic global analytics KPI cards or top pages/referrers/countries tables there.
 - Theme: `apps/dashboard/app/globals.css`. **`--border` is intentionally subtle**; do not crank it darker for “contrast” unless **iza** asks—prefer text tokens or layout for readability.

apps/api/src/integration/cache-auth-bypass.test.ts

@@ -1,6 +1,6 @@
 import "@databuddy/test/env";
 
-import { targetGroups } from "@databuddy/db/schema";
+import { flags, targetGroups } from "@databuddy/db/schema";
 import { appRouter, type Context } from "@databuddy/rpc";
 import {
 	addToOrganization,
@@ -50,6 +50,22 @@ async function seedTargetGroup(websiteId: string, createdBy: string) {
 		});
 }
 
+async function seedFlag(websiteId: string, createdBy: string) {
+	await db()
+		.insert(flags)
+		.values({
+			id: randomUUIDv7(),
+			websiteId,
+			key: "secret-rollout",
+			name: "Secret Rollout",
+			description: "Internal rollout definition",
+			defaultValue: true,
+			status: "active",
+			rules: [{ field: "country", operator: "equals", value: "US" }],
+			createdBy,
+		});
+}
+
 const annotationsParams = (websiteId: string) =>
 	({
 		websiteId,
@@ -106,7 +122,7 @@ describe("cache-bypass auth: target-groups.list", () => {
 		);
 	});
 
-	iit("demo caller gets sanitized rules even when authed cache exists", async () => {
+	iit("demo caller cannot read target groups even when authed cache exists", async () => {
 		const { user, org, site } = await setupOwnedSite({ isPublic: true });
 		await seedTargetGroup(site.id, user.id);
 
@@ -116,12 +132,10 @@ describe("cache-bypass auth: target-groups.list", () => {
 		)({ websiteId: site.id });
 		expect((authed[0] as { rules: unknown[] }).rules).toHaveLength(1);
 
-		const demo = await call(
-			appRouter.targetGroups.list,
-			context()
-		)({ websiteId: site.id });
-		expect(demo).toHaveLength(1);
-		expect((demo[0] as { rules: unknown[] }).rules).toEqual([]);
+		await expectCode(
+			call(appRouter.targetGroups.list, context())({ websiteId: site.id }),
+			"UNAUTHORIZED"
+		);
 	});
 
 	iit("cross-org API key cannot read a website it does not own", async () => {
@@ -147,6 +161,7 @@ describe("cache-bypass auth: target-groups.list", () => {
 describe("cache-bypass auth: flags.list", () => {
 	iit("anon caller cannot read flags after authed prime", async () => {
 		const { user, org, site } = await setupOwnedSite();
+		await seedFlag(site.id, user.id);
 
 		await call(
 			appRouter.flags.list,
@@ -162,6 +177,7 @@ describe("cache-bypass auth: flags.list", () => {
 	iit("cross-org user is rejected after authed prime", async () => {
 		const a = await setupOwnedSite();
 		const b = await setupOwnedSite();
+		await seedFlag(a.site.id, a.user.id);
 
 		await call(
 			appRouter.flags.list,
@@ -176,6 +192,41 @@ describe("cache-bypass auth: flags.list", () => {
 			"FORBIDDEN"
 		);
 	});
+
+	iit("demo caller cannot read public-site flag definitions", async () => {
+		const { user, org, site } = await setupOwnedSite({ isPublic: true });
+		await seedFlag(site.id, user.id);
+
+		const authed = await call(
+			appRouter.flags.list,
+			userContext(user, org.id)
+		)({ websiteId: site.id });
+		expect(authed).toHaveLength(1);
+
+		await expectCode(
+			call(appRouter.flags.list, context())({ websiteId: site.id }),
+			"UNAUTHORIZED"
+		);
+	});
+
+	iit("demo caller cannot read public-site flag definitions by key", async () => {
+		const { user, org, site } = await setupOwnedSite({ isPublic: true });
+		await seedFlag(site.id, user.id);
+
+		const authed = await call(
+			appRouter.flags.getByKey,
+			userContext(user, org.id)
+		)({ websiteId: site.id, key: "secret-rollout" });
+		expect(authed).toMatchObject({ key: "secret-rollout" });
+
+		await expectCode(
+			call(appRouter.flags.getByKey, context())({
+				websiteId: site.id,
+				key: "secret-rollout",
+			}),
+			"UNAUTHORIZED"
+		);
+	});
 });
 
 describe("cache-bypass auth: annotations.list", () => {

apps/dashboard/app/(main)/websites/[id]/funnels/_components/funnel-item.tsx

@@ -40,6 +40,7 @@ interface FunnelItemProps {
 	onDelete: (funnelId: string) => void;
 	onEdit: (funnel: FunnelItemData) => void;
 	onToggle: (funnelId: string) => void;
+	readOnly?: boolean;
 }
 
 function MiniFunnelPreview({
@@ -94,6 +95,7 @@ export function FunnelItem({
 	onToggle,
 	onEdit,
 	onDelete,
+	readOnly = false,
 	className,
 	children,
 }: FunnelItemProps) {
@@ -104,10 +106,14 @@ export function FunnelItem({
 	return (
 		<div className={cn("w-full", className)}>
 			<List.Row
-				className={cn(isExpanded && "bg-accent/30", isLast && "border-b-0")}
+				className={cn(
+					"gap-0 px-0 py-0",
+					isExpanded && "bg-accent/30",
+					isLast && "border-b-0"
+				)}
 			>
 				<Button
-					className="min-w-0 flex-1 justify-start gap-4 rounded-none bg-transparent p-0 text-left font-normal text-foreground hover:bg-transparent active:scale-100"
+					className="min-h-15 min-w-0 flex-1 justify-start gap-4 rounded-none bg-transparent px-4 py-3 text-left font-normal text-foreground hover:bg-transparent active:scale-100"
 					onClick={() => onToggle(funnel.id)}
 					variant="ghost"
 				>
@@ -188,38 +194,40 @@ export function FunnelItem({
 					</span>
 				</Button>
 
-				<List.Cell action>
-					<DropdownMenu>
-						<DropdownMenu.Trigger
-							aria-label="Funnel actions"
-							className="inline-flex size-8 items-center justify-center gap-1.5 rounded-md bg-transparent p-0 font-medium text-muted-foreground opacity-50 transition-all duration-(--duration-quick) ease-(--ease-smooth) hover:bg-interactive-hover hover:text-foreground hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/60 disabled:pointer-events-none disabled:opacity-50 data-[state=open]:opacity-100"
-							data-dropdown-trigger
-						>
-							<DotsThreeIcon className="size-5" weight="bold" />
-						</DropdownMenu.Trigger>
-						<DropdownMenu.Content align="end" className="w-40">
-							<DropdownMenu.Item
-								className="gap-2"
-								onClick={() => onEdit(funnel)}
-							>
-								<PencilSimpleIcon className="size-4" weight="duotone" />
-								Edit
-							</DropdownMenu.Item>
-							<DropdownMenu.Separator />
-							<DropdownMenu.Item
-								className="gap-2 text-destructive focus:text-destructive"
-								onClick={() => onDelete(funnel.id)}
-								variant="destructive"
+				{!readOnly && (
+					<List.Cell action className="flex items-center pr-4">
+						<DropdownMenu>
+							<DropdownMenu.Trigger
+								aria-label="Funnel actions"
+								className="inline-flex size-8 items-center justify-center gap-1.5 rounded-md bg-transparent p-0 font-medium text-muted-foreground opacity-50 transition-all duration-(--duration-quick) ease-(--ease-smooth) hover:bg-interactive-hover hover:text-foreground hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/60 disabled:pointer-events-none disabled:opacity-50 data-[state=open]:opacity-100"
+								data-dropdown-trigger
 							>
-								<TrashIcon
-									className="size-4 fill-destructive"
-									weight="duotone"
-								/>
-								Delete
-							</DropdownMenu.Item>
-						</DropdownMenu.Content>
-					</DropdownMenu>
-				</List.Cell>
+								<DotsThreeIcon className="size-5" weight="bold" />
+							</DropdownMenu.Trigger>
+							<DropdownMenu.Content align="end" className="w-40">
+								<DropdownMenu.Item
+									className="gap-2"
+									onClick={() => onEdit(funnel)}
+								>
+									<PencilSimpleIcon className="size-4" weight="duotone" />
+									Edit
+								</DropdownMenu.Item>
+								<DropdownMenu.Separator />
+								<DropdownMenu.Item
+									className="gap-2 text-destructive focus:text-destructive"
+									onClick={() => onDelete(funnel.id)}
+									variant="destructive"
+								>
+									<TrashIcon
+										className="size-4 fill-destructive"
+										weight="duotone"
+									/>
+									Delete
+								</DropdownMenu.Item>
+							</DropdownMenu.Content>
+						</DropdownMenu>
+					</List.Cell>
+				)}
 			</List.Row>
 
 			{isExpanded ? (

apps/dashboard/app/(main)/websites/[id]/funnels/_components/funnels-list.tsx

@@ -13,6 +13,7 @@ interface FunnelsListProps {
 	onDeleteFunnel: (funnelId: string) => void;
 	onEditFunnel: (funnel: FunnelItemData) => void;
 	onToggleFunnel: (funnelId: string) => void;
+	readOnly?: boolean;
 }
 
 export function FunnelsList({
@@ -23,6 +24,7 @@ export function FunnelsList({
 	onToggleFunnel,
 	onEditFunnel,
 	onDeleteFunnel,
+	readOnly = false,
 	children,
 }: FunnelsListProps) {
 	return (
@@ -38,6 +40,7 @@ export function FunnelsList({
 					onDelete={onDeleteFunnel}
 					onEdit={onEditFunnel}
 					onToggle={onToggleFunnel}
+					readOnly={readOnly}
 				>
 					{children?.(funnel)}
 				</FunnelItem>

apps/dashboard/app/(main)/websites/[id]/funnels/page.tsx

@@ -13,7 +13,7 @@ import type { CreateFunnelData } from "@/types/funnels";
 import { cn } from "@/lib/utils";
 import { GATED_FEATURES } from "@databuddy/shared/types/features";
 import dynamic from "next/dynamic";
-import { useParams } from "next/navigation";
+import { useParams, usePathname } from "next/navigation";
 import { useState } from "react";
 import { TopBar } from "@/components/layout/top-bar";
 import {
@@ -48,6 +48,8 @@ function FunnelsListSkeleton() {
 export default function FunnelsPage() {
 	const { id } = useParams();
 	const websiteId = id as string;
+	const pathname = usePathname();
+	const isDemoRoute = pathname.startsWith("/demo/");
 	const { formattedDateRangeState, dateRange } = useDateFilters();
 
 	const [expandedId, setExpandedId] = useState<string | null>(null);
@@ -148,19 +150,23 @@ export default function FunnelsPage() {
 							className={cn("size-4 shrink-0", isFetching && "animate-spin")}
 						/>
 					</Button>
-					<Button onClick={() => setEditing("new")} size="sm">
-						<PlusIcon className="size-4 shrink-0" />
-						Create Funnel
-					</Button>
+					{!isDemoRoute && (
+						<Button onClick={() => setEditing("new")} size="sm">
+							<PlusIcon className="size-4 shrink-0" />
+							Create Funnel
+						</Button>
+					)}
 				</TopBar.Actions>
 
 				<div className="min-h-0 flex-1 overflow-y-auto overscroll-none">
 					<List.Content
 						emptyProps={{
-							action: {
-								label: "Create a funnel",
-								onClick: () => setEditing("new"),
-							},
+							action: isDemoRoute
+								? undefined
+								: {
+										label: "Create a funnel",
+										onClick: () => setEditing("new"),
+									},
 							description:
 								"Define a multi-step journey to see where users drop off.",
 							icon: <FunnelIcon className="size-6" weight="duotone" />,
@@ -189,6 +195,7 @@ export default function FunnelsPage() {
 									setExpandedId(expandedId === funnelId ? null : funnelId);
 									setSelectedReferrer("all");
 								}}
+								readOnly={isDemoRoute}
 							>
 								{(funnel) => {
 									if (expandedId !== funnel.id) {
@@ -220,7 +227,7 @@ export default function FunnelsPage() {
 					</List.Content>
 				</div>
 
-				{editing !== null && (
+				{!isDemoRoute && editing !== null && (
 					<EditFunnelDialog
 						autocompleteData={autocomplete.data}
 						funnel={
@@ -241,7 +248,7 @@ export default function FunnelsPage() {
 					/>
 				)}
 
-				{!!deletingId && (
+				{!isDemoRoute && !!deletingId && (
 					<DeleteDialog
 						confirmLabel="Delete Funnel"
 						isOpen={!!deletingId}