@burdenoff/microfe-bigconsole 2026.929.2 → 2026.930.2

package/dist/bigconsole/components/DrilldownDashboardRenderer.js

@@ -2,12 +2,13 @@ import { GetDashboardDocument as e, ListWidgetsByDashboardDocument as t } from "
 import { Section as n, SectionStack as r } from "./common/Section.js";
 import "./common/index.js";
 import { mapFromFederationWidgetType as i } from "../utils/widgetTypeMapping.js";
-import a from "./widgets/WidgetWrapper.js";
-import { memo as o, useEffect as s, useState as c } from "react";
-import { useApolloClient as l } from "@apollo/client/react";
-import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { MODAL_TARGET_PAGE_PARAM as a } from "../hooks/useDrilldown.js";
+import o from "./widgets/WidgetWrapper.js";
+import { memo as s, useEffect as c, useState as l } from "react";
+import { useApolloClient as u } from "@apollo/client/react";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
 //#region src/bigconsole/components/DrilldownDashboardRenderer.tsx
-function f(e, t) {
+function p(e, t) {
 	let n = t * 4, r = {
 		x: 0,
 		y: n,
@@ -47,72 +48,88 @@ function f(e, t) {
 		updatedAt: e.updatedAt || (/* @__PURE__ */ new Date()).toISOString()
 	};
 }
-var p = o(function({ dashboardId: i, params: a }) {
-	let o = l(), [p, h] = c(!0), [g, _] = c(null), [v, y] = c(null), [b, x] = c([]);
-	if (s(() => {
+function m(e, t) {
+	let n = {
+		x: 0,
+		y: t * 4,
+		width: 12,
+		height: 4
+	};
+	return {
+		...e,
+		position: n,
+		positionX: 0,
+		positionY: n.y,
+		positionWidth: 12,
+		positionHeight: 4
+	};
+}
+var h = s(function({ dashboardId: i, params: o }) {
+	let s = u(), [h, _] = l(!0), [v, y] = l(null), [b, x] = l(null), [S, C] = l([]);
+	if (c(() => {
 		if (!i) {
-			h(!1);
+			_(!1);
 			return;
 		}
 		async function n() {
-			h(!0), _(null);
+			_(!0), y(null);
 			try {
-				let n = (await o.query({
+				let n = (await s.query({
 					query: e,
 					variables: { id: i },
 					fetchPolicy: "network-only"
 				})).data?.getDashboard;
 				if (!n) {
-					_("Dashboard not found"), h(!1);
+					y("Dashboard not found"), _(!1);
 					return;
 				}
 				let r = n.pages?.edges?.map((e) => ({
 					id: e.node.id,
 					name: e.node.name || "Page 1"
 				})) || [];
-				y({
+				x({
 					id: n.id,
 					name: n.name,
 					description: n.description,
 					pages: r
-				}), x(((await o.query({
+				}), C(((await s.query({
 					query: t,
 					variables: { dashboardId: i },
 					fetchPolicy: "network-only"
-				})).data?.listWidgetsByDashboard || []).map((e, t) => f(e, t)));
+				})).data?.listWidgetsByDashboard || []).map((e, t) => p(e, t)));
 			} catch (e) {
-				_(e instanceof Error ? e.message : "Failed to load dashboard");
+				y(e instanceof Error ? e.message : "Failed to load dashboard");
 			} finally {
-				h(!1);
+				_(!1);
 			}
 		}
 		n();
-	}, [i, o]), p) return /* @__PURE__ */ u("div", {
+	}, [i, s]), h) return /* @__PURE__ */ d("div", {
 		className: "flex items-center justify-center h-full",
-		children: /* @__PURE__ */ d("div", {
+		children: /* @__PURE__ */ f("div", {
 			className: "flex flex-col items-center gap-3",
-			children: [/* @__PURE__ */ u("div", { className: "w-8 h-8 border-2 border-action-primary-bg border-t-transparent rounded-full animate-spin" }), /* @__PURE__ */ u("p", {
+			children: [/* @__PURE__ */ d("div", { className: "w-8 h-8 border-2 border-action-primary-bg border-t-transparent rounded-full animate-spin" }), /* @__PURE__ */ d("p", {
 				className: "text-sm text-text-secondary",
 				children: "Loading dashboard..."
 			})]
 		})
 	});
-	if (g) return /* @__PURE__ */ u("div", {
+	if (v) return /* @__PURE__ */ d("div", {
 		className: "flex h-full items-center justify-center",
 		role: "alert",
-		children: /* @__PURE__ */ u(n, {
+		children: /* @__PURE__ */ d(n, {
 			headingLevel: 3,
 			tone: "danger",
 			className: "w-full max-w-md",
 			"data-testid": "drilldown-error",
 			title: "Could not load this dashboard",
-			description: g,
-			icon: /* @__PURE__ */ u("svg", {
+			description: v,
+			icon: /* @__PURE__ */ d("svg", {
 				className: "h-icon-md w-icon-md",
 				fill: "none",
 				stroke: "currentColor",
 				viewBox: "0 0 24 24",
-				children: /* @__PURE__ */ u("path", {
+				children: /* @__PURE__ */ d("path", {
 					strokeLinecap: "round",
 					strokeLinejoin: "round",
 					strokeWidth: 1.5,
@@ -121,62 +138,69 @@ var p = o(function({ dashboardId: i, params: a }) {
 			})
 		})
 	});
-	if (!v || b.length === 0) return /* @__PURE__ */ u("div", {
+	if (!b || S.length === 0) return /* @__PURE__ */ d("div", {
 		className: "flex items-center justify-center h-full",
-		children: /* @__PURE__ */ d("div", {
+		children: /* @__PURE__ */ f("div", {
 			className: "flex flex-col items-center gap-3 text-center",
-			children: [/* @__PURE__ */ u("svg", {
+			children: [/* @__PURE__ */ d("svg", {
 				className: "w-12 h-12 text-text-muted",
 				fill: "none",
 				stroke: "currentColor",
 				viewBox: "0 0 24 24",
-				children: /* @__PURE__ */ u("path", {
+				children: /* @__PURE__ */ d("path", {
 					strokeLinecap: "round",
 					strokeLinejoin: "round",
 					strokeWidth: 1.5,
 					d: "M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"
 				})
-			}), /* @__PURE__ */ u("p", {
+			}), /* @__PURE__ */ d("p", {
 				className: "text-sm text-text-secondary",
-				children: v ? "This dashboard has no widgets" : "Dashboard not found"
+				children: b ? "This dashboard has no widgets" : "Dashboard not found"
 			})]
 		})
 	});
-	let S = Object.entries(a).filter(([e]) => !e.startsWith("__"));
-	return /* @__PURE__ */ d(r, {
+	let w = Object.entries(o).filter(([e]) => !e.startsWith("__")), T = o[a], E = b.pages.find((e) => e.id === T) ?? b.pages[0] ?? null, D = (E ? S.filter((e) => !e.pageId || e.pageId === E.id) : S).map((e, t) => m(e, t));
+	return /* @__PURE__ */ f(r, {
 		className: "w-full",
 		children: [
-			/* @__PURE__ */ u(n, {
+			/* @__PURE__ */ d(n, {
 				emphasis: "bare",
 				padding: "none",
 				headingLevel: 3,
-				title: v.name,
-				description: v.description,
+				title: b.name,
+				description: b.pages.length > 1 && E ? /* @__PURE__ */ d("span", {
+					"data-testid": "drilldown-dashboard-page",
+					children: E.name
+				}) : b.description,
 				"data-testid": "drilldown-dashboard-header"
 			}),
-			S.length > 0 && /* @__PURE__ */ u(n, {
+			w.length > 0 && /* @__PURE__ */ d(n, {
 				emphasis: "muted",
 				padding: "compact",
 				headingLevel: 3,
 				title: "Filtered by",
 				"data-testid": "drilldown-params",
 				bodyClassName: "flex flex-wrap gap-control-gap",
-				children: S.map(([e, t]) => /* @__PURE__ */ d("span", {
+				children: w.map(([e, t]) => /* @__PURE__ */ f("span", {
 					className: "inline-flex items-center rounded-pill bg-bg-surface px-2 py-1 text-xs text-text-secondary",
-					children: [/* @__PURE__ */ d("span", {
+					children: [/* @__PURE__ */ f("span", {
 						className: "font-medium text-text-primary",
 						children: [e, ":"]
-					}), /* @__PURE__ */ u("span", {
+					}), /* @__PURE__ */ d("span", {
 						className: "ml-1",
 						children: typeof t == "object" && t ? JSON.stringify(t) : String(t)
 					})]
 				}, e))
 			}),
-			/* @__PURE__ */ u("div", {
+			/* @__PURE__ */ f("div", {
 				className: "flex flex-col gap-form-gap",
-				children: b.map((e) => {
+				children: [D.length === 0 && /* @__PURE__ */ d("p", {
+					className: "text-sm text-text-secondary",
+					"data-testid": "drilldown-page-empty",
+					children: "This page has no widgets"
+				}), D.map((e) => {
 					let t = e.config?._internalWidgetType, n = e.type;
-					return /* @__PURE__ */ u("div", {
+					return /* @__PURE__ */ d("div", {
 						className: "min-w-0 overflow-hidden rounded-card border border-[var(--color-border-subtle)] bg-bg-surface",
 						style: n === "LINE_CHART" || n === "chart" || t === "chart" || t === "funnel_chart" ? { height: "clamp(220px, 45vh, 350px)" } : n === "TABLE" || n === "table" || t === "table" || t === "list" || t === "pivot_table" ? {
 							minHeight: "min(250px, 40vh)",
@@ -185,19 +209,19 @@ var p = o(function({ dashboardId: i, params: a }) {
 							minHeight: "min(120px, 25vh)",
 							maxHeight: "min(300px, 50vh)"
 						},
-						children: /* @__PURE__ */ u(m, {
+						children: /* @__PURE__ */ d(g, {
 							widget: e,
-							filterValues: a
+							filterValues: o
 						})
 					}, e.id);
-				})
+				})]
 			})
 		]
 	});
-}), m = o(function({ widget: e, filterValues: t }) {
-	return /* @__PURE__ */ u("div", {
+}), g = s(function({ widget: e, filterValues: t }) {
+	return /* @__PURE__ */ d("div", {
 		className: "h-full [&_[data-widget-id]]:border-transparent [&_[data-widget-id]:hover]:border-transparent",
-		children: /* @__PURE__ */ u(a, {
+		children: /* @__PURE__ */ d(o, {
 			widget: e,
 			isLoading: !1,
 			error: null,
@@ -206,6 +230,6 @@ var p = o(function({ dashboardId: i, params: a }) {
 	});
 });
 //#endregion
-export { p as default };
+export { h as default };
 
 //# sourceMappingURL=DrilldownDashboardRenderer.js.map

package/dist/bigconsole/components/DrilldownDashboardRenderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"DrilldownDashboardRenderer.js","names":[],"sources":["../../../src/bigconsole/components/DrilldownDashboardRenderer.tsx"],"sourcesContent":["/**\n * DrilldownDashboardRenderer Component\n *\n * Renders a dashboard inside the DrilldownModal.\n * Fetches dashboard data and displays widgets with passed parameters.\n */\n\nimport { type FC, memo, useEffect, useState } from 'react';\nimport { useApolloClient } from '@apollo/client/react';\nimport type { Widget } from '../types';\nimport { WidgetWrapper } from './widgets/WidgetWrapper';\nimport { Section, SectionStack } from './common';\nimport { ListWidgetsByDashboardDocument, GetDashboardDocument } from '../../generated/wspace-operations';\nimport { mapFromFederationWidgetType } from '../utils/widgetTypeMapping';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface DrilldownDashboardRendererProps {\n  /** Target dashboard ID to render */\n  dashboardId: string;\n  /** Parameters passed from drilldown (can be used for filtering) */\n  params: Record<string, unknown>;\n}\n\ninterface DashboardData {\n  id: string;\n  name: string;\n  description?: string;\n  pages: Array<{\n    id: string;\n    name: string;\n  }>;\n}\n\n// ============================================================================\n// Helper: Normalize widget from GraphQL\n// ============================================================================\n\nfunction normalizeWidget(raw: Record<string, unknown>, index: number): Widget {\n  // For drilldown modal, stack widgets vertically with compact sizing\n  const posX = 0;\n  const posY = index * 4; // Stack vertically, 4 row units per widget\n  const posW = 12; // Full width\n  const posH = 4; // Better height for widget content\n\n  const position = { x: posX, y: posY, width: posW, height: posH };\n\n  // Get the config object\n  const config = (raw.config as Record<string, unknown>) || {};\n\n  // Map widget type correctly: check _internalWidgetType first, then map from federation type\n  // This is critical — federation types like 'KPI' must be mapped to internal types like 'metric_card'\n  const internalType = config._internalWidgetType as string | undefined;\n  const widgetType = internalType || mapFromFederationWidgetType((raw.type as string) || 'KPI');\n\n  return {\n    id: (raw.id as string) ?? '',\n    pageId: (raw.pageId as string) || '',\n    dashboardId: raw.dashboardId as string | undefined,\n    type: widgetType,\n    title: (raw.title as string) || 'Untitled Widget',\n    renderer: raw.renderer || 'BIGCONSOLE',\n    template: raw.template || null,\n    dataSinkId: raw.dataSinkId || null,\n    datasetId: raw.datasetId || null,\n    parserId: raw.parserId || null,\n    parserRules: raw.parserRules || null,\n    config: config,\n    position: position,\n    positionX: posX,\n    positionY: posY,\n    positionWidth: posW,\n    positionHeight: posH,\n    positionResponsive: raw.positionResponsive as Widget['positionResponsive'],\n    rowOrder: (raw.rowOrder as number | null) ?? null,\n    refreshInterval: raw.refreshInterval,\n    lastRefreshedAt: raw.lastRefreshedAt,\n    cacheTTL: (raw.cacheTTL as number | null) ?? null,\n    drilldown: raw.drilldown as Widget['drilldown'],\n    actions: (raw.actions as Widget['actions']) || [],\n    translations: (raw.translations as Widget['translations']) || [],\n    metadata: raw.metadata as Record<string, unknown> | undefined,\n    context: raw.context,\n    // Include widget data from backend (critical for showing real data in modal)\n    data: raw.data || null,\n    createdAt: (raw.createdAt as string) || new Date().toISOString(),\n    updatedAt: (raw.updatedAt as string) || new Date().toISOString(),\n  } as Widget;\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const DrilldownDashboardRenderer: FC<DrilldownDashboardRendererProps> = memo(\n  function DrilldownDashboardRenderer({ dashboardId, params }) {\n    const apolloClient = useApolloClient();\n    const [loading, setLoading] = useState(true);\n    const [error, setError] = useState<string | null>(null);\n    const [dashboard, setDashboard] = useState<DashboardData | null>(null);\n    const [widgets, setWidgets] = useState<Widget[]>([]);\n\n    // Fetch dashboard and widgets — only when dashboardId is provided\n    useEffect(() => {\n      if (!dashboardId) {\n        setLoading(false);\n        return;\n      }\n\n      async function fetchData() {\n        setLoading(true);\n        setError(null);\n\n        try {\n          // Fetch dashboard info\n          interface DashboardQueryResult {\n            getDashboard: {\n              id: string;\n              name: string;\n              description?: string;\n              pages?: {\n                edges?: Array<{ node: { id: string; name?: string } }>;\n              };\n            } | null;\n          }\n\n          const dashboardResult = await apolloClient.query<DashboardQueryResult>({\n            query: GetDashboardDocument,\n            variables: { id: dashboardId },\n            fetchPolicy: 'network-only',\n          });\n\n          const dashboardData = dashboardResult.data?.getDashboard;\n          if (!dashboardData) {\n            setError('Dashboard not found');\n            setLoading(false);\n            return;\n          }\n\n          // Normalize dashboard\n          const pages =\n            dashboardData.pages?.edges?.map((edge) => ({\n              id: edge.node.id,\n              name: edge.node.name || 'Page 1',\n            })) || [];\n\n          setDashboard({\n            id: dashboardData.id,\n            name: dashboardData.name,\n            description: dashboardData.description,\n            pages,\n          });\n\n          // Fetch widgets for the dashboard\n          const widgetsResult = await apolloClient.query<{ listWidgetsByDashboard: Record<string, unknown>[] }>({\n            query: ListWidgetsByDashboardDocument,\n            variables: { dashboardId },\n            fetchPolicy: 'network-only',\n          });\n\n          const widgetsList = widgetsResult.data?.listWidgetsByDashboard || [];\n          setWidgets(widgetsList.map((w, i) => normalizeWidget(w, i)));\n        } catch (err) {\n          setError(err instanceof Error ? err.message : 'Failed to load dashboard');\n        } finally {\n          setLoading(false);\n        }\n      }\n\n      fetchData();\n    }, [dashboardId, apolloClient]);\n\n    // Loading state\n    if (loading) {\n      return (\n        <div className=\"flex items-center justify-center h-full\">\n          <div className=\"flex flex-col items-center gap-3\">\n            <div className=\"w-8 h-8 border-2 border-action-primary-bg border-t-transparent rounded-full animate-spin\" />\n            <p className=\"text-sm text-text-secondary\">Loading dashboard...</p>\n          </div>\n        </div>\n      );\n    }\n\n    // Error state\n    if (error) {\n      return (\n        <div className=\"flex h-full items-center justify-center\" role=\"alert\">\n          <Section\n            headingLevel={3}\n            tone=\"danger\"\n            className=\"w-full max-w-md\"\n            data-testid=\"drilldown-error\"\n            title=\"Could not load this dashboard\"\n            description={error}\n            icon={\n              <svg className=\"h-icon-md w-icon-md\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                <path\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                  strokeWidth={1.5}\n                  d=\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z\"\n                />\n              </svg>\n            }\n          />\n        </div>\n      );\n    }\n\n    // Empty state\n    if (!dashboard || widgets.length === 0) {\n      return (\n        <div className=\"flex items-center justify-center h-full\">\n          <div className=\"flex flex-col items-center gap-3 text-center\">\n            <svg className=\"w-12 h-12 text-text-muted\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={1.5}\n                d=\"M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z\"\n              />\n            </svg>\n            <p className=\"text-sm text-text-secondary\">\n              {dashboard ? 'This dashboard has no widgets' : 'Dashboard not found'}\n            </p>\n          </div>\n        </div>\n      );\n    }\n\n    const visibleParams = Object.entries(params).filter(([key]) => !key.startsWith('__'));\n\n    return (\n      <SectionStack className=\"w-full\">\n        {/* Which board you drilled into — identity, not content. */}\n        <Section\n          emphasis=\"bare\"\n          padding=\"none\"\n          headingLevel={3}\n          title={dashboard.name}\n          description={dashboard.description}\n          data-testid=\"drilldown-dashboard-header\"\n        />\n\n        {/* The filter context you arrived with: supporting detail, recessed. */}\n        {visibleParams.length > 0 && (\n          <Section\n            emphasis=\"muted\"\n            padding=\"compact\"\n            headingLevel={3}\n            title=\"Filtered by\"\n            data-testid=\"drilldown-params\"\n            bodyClassName=\"flex flex-wrap gap-control-gap\"\n          >\n            {visibleParams.map(([key, value]) => (\n              <span\n                key={key}\n                className=\"inline-flex items-center rounded-pill bg-bg-surface px-2 py-1 text-xs text-text-secondary\"\n              >\n                <span className=\"font-medium text-text-primary\">{key}:</span>\n                <span className=\"ml-1\">\n                  {typeof value === 'object' && value !== null ? JSON.stringify(value) : String(value)}\n                </span>\n              </span>\n            ))}\n          </Section>\n        )}\n\n        {/* Widgets List - simple vertical layout for modal */}\n        <div className=\"flex flex-col gap-form-gap\">\n          {widgets.map((widget) => {\n            // Chart widgets (LINE_CHART / chart) need explicit pixel height because\n            // Recharts ResponsiveContainer height=\"100%\" requires a parent with\n            // a definite height — minHeight alone doesn't work.\n            const internalType = (widget.config as Record<string, unknown>)?._internalWidgetType as string | undefined;\n            const widgetType = widget.type as string;\n            const isChartWidget =\n              widgetType === 'LINE_CHART' ||\n              widgetType === 'chart' ||\n              internalType === 'chart' ||\n              internalType === 'funnel_chart';\n            const isTableWidget =\n              widgetType === 'TABLE' ||\n              widgetType === 'table' ||\n              internalType === 'table' ||\n              internalType === 'list' ||\n              internalType === 'pivot_table';\n\n            // Charts need an explicit height (Recharts' ResponsiveContainer needs a\n            // definite parent). Clamping against the viewport keeps a 350px chart\n            // plus a 500px table from filling a phone screen twice over.\n            const heightStyle = isChartWidget\n              ? { height: 'clamp(220px, 45vh, 350px)' }\n              : isTableWidget\n                ? { minHeight: 'min(250px, 40vh)', maxHeight: 'min(500px, 65vh)' }\n                : { minHeight: 'min(120px, 25vh)', maxHeight: 'min(300px, 50vh)' };\n\n            return (\n              <div\n                key={widget.id}\n                className=\"min-w-0 overflow-hidden rounded-card border border-[var(--color-border-subtle)] bg-bg-surface\"\n                style={heightStyle}\n              >\n                <WidgetInModal widget={widget} filterValues={params} />\n              </div>\n            );\n          })}\n        </div>\n      </SectionStack>\n    );\n  }\n);\n\n// ============================================================================\n// Widget In Modal Component\n// ============================================================================\n\ninterface WidgetInModalProps {\n  widget: Widget;\n  filterValues?: Record<string, unknown>;\n}\n\nconst WidgetInModal: FC<WidgetInModalProps> = memo(function WidgetInModal({ widget, filterValues }) {\n  return (\n    <div className=\"h-full [&_[data-widget-id]]:border-transparent [&_[data-widget-id]:hover]:border-transparent\">\n      <WidgetWrapper widget={widget} isLoading={false} error={null} filterValues={filterValues} />\n    </div>\n  );\n});\n\nexport default DrilldownDashboardRenderer;\n"],"mappings":"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"}
+{"version":3,"file":"DrilldownDashboardRenderer.js","names":[],"sources":["../../../src/bigconsole/components/DrilldownDashboardRenderer.tsx"],"sourcesContent":["/**\n * DrilldownDashboardRenderer Component\n *\n * Renders a dashboard inside the DrilldownModal.\n * Fetches dashboard data and displays the target page's widgets (the page named\n * by the drilldown, else the first page) with passed parameters (BOFF-7625).\n */\n\nimport { type FC, memo, useEffect, useState } from 'react';\nimport { useApolloClient } from '@apollo/client/react';\nimport type { Widget } from '../types';\nimport { WidgetWrapper } from './widgets/WidgetWrapper';\nimport { Section, SectionStack } from './common';\nimport { ListWidgetsByDashboardDocument, GetDashboardDocument } from '../../generated/wspace-operations';\nimport { mapFromFederationWidgetType } from '../utils/widgetTypeMapping';\nimport { MODAL_TARGET_PAGE_PARAM } from '../hooks/useDrilldown';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface DrilldownDashboardRendererProps {\n  /** Target dashboard ID to render */\n  dashboardId: string;\n  /** Parameters passed from drilldown (can be used for filtering) */\n  params: Record<string, unknown>;\n}\n\ninterface DashboardData {\n  id: string;\n  name: string;\n  description?: string;\n  pages: Array<{\n    id: string;\n    name: string;\n  }>;\n}\n\n// ============================================================================\n// Helper: Normalize widget from GraphQL\n// ============================================================================\n\nfunction normalizeWidget(raw: Record<string, unknown>, index: number): Widget {\n  // For drilldown modal, stack widgets vertically with compact sizing\n  const posX = 0;\n  const posY = index * 4; // Stack vertically, 4 row units per widget\n  const posW = 12; // Full width\n  const posH = 4; // Better height for widget content\n\n  const position = { x: posX, y: posY, width: posW, height: posH };\n\n  // Get the config object\n  const config = (raw.config as Record<string, unknown>) || {};\n\n  // Map widget type correctly: check _internalWidgetType first, then map from federation type\n  // This is critical — federation types like 'KPI' must be mapped to internal types like 'metric_card'\n  const internalType = config._internalWidgetType as string | undefined;\n  const widgetType = internalType || mapFromFederationWidgetType((raw.type as string) || 'KPI');\n\n  return {\n    id: (raw.id as string) ?? '',\n    pageId: (raw.pageId as string) || '',\n    dashboardId: raw.dashboardId as string | undefined,\n    type: widgetType,\n    title: (raw.title as string) || 'Untitled Widget',\n    renderer: raw.renderer || 'BIGCONSOLE',\n    template: raw.template || null,\n    dataSinkId: raw.dataSinkId || null,\n    datasetId: raw.datasetId || null,\n    parserId: raw.parserId || null,\n    parserRules: raw.parserRules || null,\n    config: config,\n    position: position,\n    positionX: posX,\n    positionY: posY,\n    positionWidth: posW,\n    positionHeight: posH,\n    positionResponsive: raw.positionResponsive as Widget['positionResponsive'],\n    rowOrder: (raw.rowOrder as number | null) ?? null,\n    refreshInterval: raw.refreshInterval,\n    lastRefreshedAt: raw.lastRefreshedAt,\n    cacheTTL: (raw.cacheTTL as number | null) ?? null,\n    drilldown: raw.drilldown as Widget['drilldown'],\n    actions: (raw.actions as Widget['actions']) || [],\n    translations: (raw.translations as Widget['translations']) || [],\n    metadata: raw.metadata as Record<string, unknown> | undefined,\n    context: raw.context,\n    // Include widget data from backend (critical for showing real data in modal)\n    data: raw.data || null,\n    createdAt: (raw.createdAt as string) || new Date().toISOString(),\n    updatedAt: (raw.updatedAt as string) || new Date().toISOString(),\n  } as Widget;\n}\n\n/** Place a widget at a given slot of the modal's single-column stack. */\nfunction normalizeStacking(widget: Widget, index: number): Widget {\n  const position = { x: 0, y: index * 4, width: 12, height: 4 };\n  return { ...widget, position, positionX: 0, positionY: position.y, positionWidth: 12, positionHeight: 4 };\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const DrilldownDashboardRenderer: FC<DrilldownDashboardRendererProps> = memo(\n  function DrilldownDashboardRenderer({ dashboardId, params }) {\n    const apolloClient = useApolloClient();\n    const [loading, setLoading] = useState(true);\n    const [error, setError] = useState<string | null>(null);\n    const [dashboard, setDashboard] = useState<DashboardData | null>(null);\n    const [widgets, setWidgets] = useState<Widget[]>([]);\n\n    // Fetch dashboard and widgets — only when dashboardId is provided\n    useEffect(() => {\n      if (!dashboardId) {\n        setLoading(false);\n        return;\n      }\n\n      async function fetchData() {\n        setLoading(true);\n        setError(null);\n\n        try {\n          // Fetch dashboard info\n          interface DashboardQueryResult {\n            getDashboard: {\n              id: string;\n              name: string;\n              description?: string;\n              pages?: {\n                edges?: Array<{ node: { id: string; name?: string } }>;\n              };\n            } | null;\n          }\n\n          const dashboardResult = await apolloClient.query<DashboardQueryResult>({\n            query: GetDashboardDocument,\n            variables: { id: dashboardId },\n            fetchPolicy: 'network-only',\n          });\n\n          const dashboardData = dashboardResult.data?.getDashboard;\n          if (!dashboardData) {\n            setError('Dashboard not found');\n            setLoading(false);\n            return;\n          }\n\n          // Normalize dashboard\n          const pages =\n            dashboardData.pages?.edges?.map((edge) => ({\n              id: edge.node.id,\n              name: edge.node.name || 'Page 1',\n            })) || [];\n\n          setDashboard({\n            id: dashboardData.id,\n            name: dashboardData.name,\n            description: dashboardData.description,\n            pages,\n          });\n\n          // Fetch widgets for the dashboard\n          const widgetsResult = await apolloClient.query<{ listWidgetsByDashboard: Record<string, unknown>[] }>({\n            query: ListWidgetsByDashboardDocument,\n            variables: { dashboardId },\n            fetchPolicy: 'network-only',\n          });\n\n          const widgetsList = widgetsResult.data?.listWidgetsByDashboard || [];\n          setWidgets(widgetsList.map((w, i) => normalizeWidget(w, i)));\n        } catch (err) {\n          setError(err instanceof Error ? err.message : 'Failed to load dashboard');\n        } finally {\n          setLoading(false);\n        }\n      }\n\n      fetchData();\n    }, [dashboardId, apolloClient]);\n\n    // Loading state\n    if (loading) {\n      return (\n        <div className=\"flex items-center justify-center h-full\">\n          <div className=\"flex flex-col items-center gap-3\">\n            <div className=\"w-8 h-8 border-2 border-action-primary-bg border-t-transparent rounded-full animate-spin\" />\n            <p className=\"text-sm text-text-secondary\">Loading dashboard...</p>\n          </div>\n        </div>\n      );\n    }\n\n    // Error state\n    if (error) {\n      return (\n        <div className=\"flex h-full items-center justify-center\" role=\"alert\">\n          <Section\n            headingLevel={3}\n            tone=\"danger\"\n            className=\"w-full max-w-md\"\n            data-testid=\"drilldown-error\"\n            title=\"Could not load this dashboard\"\n            description={error}\n            icon={\n              <svg className=\"h-icon-md w-icon-md\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n                <path\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                  strokeWidth={1.5}\n                  d=\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z\"\n                />\n              </svg>\n            }\n          />\n        </div>\n      );\n    }\n\n    // Empty state\n    if (!dashboard || widgets.length === 0) {\n      return (\n        <div className=\"flex items-center justify-center h-full\">\n          <div className=\"flex flex-col items-center gap-3 text-center\">\n            <svg className=\"w-12 h-12 text-text-muted\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path\n                strokeLinecap=\"round\"\n                strokeLinejoin=\"round\"\n                strokeWidth={1.5}\n                d=\"M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z\"\n              />\n            </svg>\n            <p className=\"text-sm text-text-secondary\">\n              {dashboard ? 'This dashboard has no widgets' : 'Dashboard not found'}\n            </p>\n          </div>\n        </div>\n      );\n    }\n\n    const visibleParams = Object.entries(params).filter(([key]) => !key.startsWith('__'));\n\n    // Show one page: the drilldown's target page when it still exists, else the\n    // first page. Widgets without a page id (older payloads) are always shown.\n    const requestedPageId = params[MODAL_TARGET_PAGE_PARAM];\n    const activePage = dashboard.pages.find((page) => page.id === requestedPageId) ?? dashboard.pages[0] ?? null;\n    const pageWidgets = activePage\n      ? widgets.filter((widget) => !widget.pageId || widget.pageId === activePage.id)\n      : widgets;\n    // Re-flow the page's widgets top to bottom (the stacking was computed over\n    // the whole dashboard).\n    const stackedWidgets = pageWidgets.map((widget, index) => normalizeStacking(widget, index));\n\n    return (\n      <SectionStack className=\"w-full\">\n        {/* Which board you drilled into — identity, not content. */}\n        <Section\n          emphasis=\"bare\"\n          padding=\"none\"\n          headingLevel={3}\n          title={dashboard.name}\n          description={\n            dashboard.pages.length > 1 && activePage ? (\n              <span data-testid=\"drilldown-dashboard-page\">{activePage.name}</span>\n            ) : (\n              dashboard.description\n            )\n          }\n          data-testid=\"drilldown-dashboard-header\"\n        />\n\n        {/* The filter context you arrived with: supporting detail, recessed. */}\n        {visibleParams.length > 0 && (\n          <Section\n            emphasis=\"muted\"\n            padding=\"compact\"\n            headingLevel={3}\n            title=\"Filtered by\"\n            data-testid=\"drilldown-params\"\n            bodyClassName=\"flex flex-wrap gap-control-gap\"\n          >\n            {visibleParams.map(([key, value]) => (\n              <span\n                key={key}\n                className=\"inline-flex items-center rounded-pill bg-bg-surface px-2 py-1 text-xs text-text-secondary\"\n              >\n                <span className=\"font-medium text-text-primary\">{key}:</span>\n                <span className=\"ml-1\">\n                  {typeof value === 'object' && value !== null ? JSON.stringify(value) : String(value)}\n                </span>\n              </span>\n            ))}\n          </Section>\n        )}\n\n        {/* Widgets List - simple vertical layout for modal */}\n        <div className=\"flex flex-col gap-form-gap\">\n          {stackedWidgets.length === 0 && (\n            <p className=\"text-sm text-text-secondary\" data-testid=\"drilldown-page-empty\">\n              This page has no widgets\n            </p>\n          )}\n          {stackedWidgets.map((widget) => {\n            // Chart widgets (LINE_CHART / chart) need explicit pixel height because\n            // Recharts ResponsiveContainer height=\"100%\" requires a parent with\n            // a definite height — minHeight alone doesn't work.\n            const internalType = (widget.config as Record<string, unknown>)?._internalWidgetType as string | undefined;\n            const widgetType = widget.type as string;\n            const isChartWidget =\n              widgetType === 'LINE_CHART' ||\n              widgetType === 'chart' ||\n              internalType === 'chart' ||\n              internalType === 'funnel_chart';\n            const isTableWidget =\n              widgetType === 'TABLE' ||\n              widgetType === 'table' ||\n              internalType === 'table' ||\n              internalType === 'list' ||\n              internalType === 'pivot_table';\n\n            // Charts need an explicit height (Recharts' ResponsiveContainer needs a\n            // definite parent). Clamping against the viewport keeps a 350px chart\n            // plus a 500px table from filling a phone screen twice over.\n            const heightStyle = isChartWidget\n              ? { height: 'clamp(220px, 45vh, 350px)' }\n              : isTableWidget\n                ? { minHeight: 'min(250px, 40vh)', maxHeight: 'min(500px, 65vh)' }\n                : { minHeight: 'min(120px, 25vh)', maxHeight: 'min(300px, 50vh)' };\n\n            return (\n              <div\n                key={widget.id}\n                className=\"min-w-0 overflow-hidden rounded-card border border-[var(--color-border-subtle)] bg-bg-surface\"\n                style={heightStyle}\n              >\n                <WidgetInModal widget={widget} filterValues={params} />\n              </div>\n            );\n          })}\n        </div>\n      </SectionStack>\n    );\n  }\n);\n\n// ============================================================================\n// Widget In Modal Component\n// ============================================================================\n\ninterface WidgetInModalProps {\n  widget: Widget;\n  filterValues?: Record<string, unknown>;\n}\n\nconst WidgetInModal: FC<WidgetInModalProps> = memo(function WidgetInModal({ widget, filterValues }) {\n  return (\n    <div className=\"h-full [&_[data-widget-id]]:border-transparent [&_[data-widget-id]:hover]:border-transparent\">\n      <WidgetWrapper widget={widget} isLoading={false} error={null} filterValues={filterValues} />\n    </div>\n  );\n});\n\nexport default DrilldownDashboardRenderer;\n"],"mappings":"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"}

package/dist/bigconsole/components/dashboard/DrilldownBreadcrumb.js

@@ -38,10 +38,15 @@ var h = i(function({ className: i = "", currentDashboardId: h, currentDashboardN
 		let n = x().path.slice(0, t), r = t, i = new URL(e.href, window.location.origin);
 		i.searchParams.set("drilldown_depth", String(r)), n.length > 0 && i.searchParams.set("drilldown_path", encodeURIComponent(JSON.stringify(n))), t > 0 && n.length > 0 && i.searchParams.set("drilldown_parent", n[n.length - 1]), b(i.pathname + i.search);
 	}, [x, b]), O = a(() => {
-		let e = x();
-		if (e.parent) {
-			let t = e.path.slice(0, -1), n = e.depth - 1, r = new URL(`${v}/${e.parent}`, window.location.origin);
-			r.searchParams.set("drilldown_depth", String(n)), t.length > 0 && (r.searchParams.set("drilldown_path", encodeURIComponent(JSON.stringify(t))), r.searchParams.set("drilldown_parent", t[t.length - 1])), b(r.pathname + r.search);
+		let e = window.history.state?.idx;
+		if (typeof e == "number" && e > 0) {
+			window.history.back();
+			return;
+		}
+		let t = x();
+		if (t.parent) {
+			let e = t.path.slice(0, -1), n = t.depth - 1, r = new URL(`${v}/${t.parent}`, window.location.origin);
+			r.searchParams.set("drilldown_depth", String(n)), e.length > 0 && (r.searchParams.set("drilldown_path", encodeURIComponent(JSON.stringify(e))), r.searchParams.set("drilldown_parent", e[e.length - 1])), b(r.pathname + r.search);
 		} else if (T.length > 0) {
 			let e = T[T.length - 1];
 			D(e, T.length - 1);

package/dist/bigconsole/components/dashboard/DrilldownBreadcrumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"DrilldownBreadcrumb.js","names":[],"sources":["../../../../src/bigconsole/components/dashboard/DrilldownBreadcrumb.tsx"],"sourcesContent":["/**\n * DrilldownBreadcrumb Component\n *\n * Displays a breadcrumb trail showing the drilldown navigation path.\n * Allows users to navigate back up the drilldown hierarchy.\n *\n * URL Parameters Used:\n * - drilldown_depth: Current depth in drilldown hierarchy\n * - drilldown_parent: Parent dashboard ID\n * - drilldown_path: JSON array of dashboard IDs in the path\n */\n\nimport { memo, useCallback, useEffect, useState } from 'react';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { useBigConsoleNavigate } from '../../context';\nimport { useFilterUrlSync } from '../../hooks/useFilterUrlSync';\nimport { useDashboardStore } from '../../store';\nimport { ChevronRight, Home, ArrowLeft } from 'lucide-react';\nimport { SECTION_FOCUS_RING } from '../common';\n\n// ============================================================================\n// Types\n// ============================================================================\n\ninterface DrilldownBreadcrumbProps {\n  /** Additional CSS classes */\n  className?: string;\n  /** Current dashboard ID */\n  currentDashboardId?: string;\n  /** Current dashboard name */\n  currentDashboardName?: string;\n  /** Whether to show the home/root link */\n  showHome?: boolean;\n  /** Base path for dashboard URLs */\n  basePath?: string;\n}\n\ninterface BreadcrumbItem {\n  id: string;\n  name: string;\n  href: string;\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const DrilldownBreadcrumb = memo(function DrilldownBreadcrumb({\n  className = '',\n  currentDashboardId,\n  currentDashboardName,\n  showHome = true,\n  basePath = '/bigconsole/dashboards',\n}: DrilldownBreadcrumbProps) {\n  const { t } = useI18n();\n  const navigate = useBigConsoleNavigate();\n  const { getDrilldownMetadata, isInDrilldown, drilldownDepth } = useFilterUrlSync();\n\n  // Get dashboards from store for name lookup\n  const dashboards = useDashboardStore((state) => state.dashboards);\n\n  const [breadcrumbs, setBreadcrumbs] = useState<BreadcrumbItem[]>([]);\n\n  // Build breadcrumb items from path\n  useEffect(() => {\n    if (!isInDrilldown) {\n      setBreadcrumbs([]);\n      return;\n    }\n\n    const metadata = getDrilldownMetadata();\n    const { path } = metadata;\n\n    if (path.length === 0) {\n      setBreadcrumbs([]);\n      return;\n    }\n\n    // Map path IDs to breadcrumb items\n    const items: BreadcrumbItem[] = path.map((dashboardId) => {\n      // Try to find dashboard name in store\n      const dashboard = dashboards.get(dashboardId);\n      const name =\n        dashboard?.name ||\n        t('bigconsole.dashboards.drilldownBreadcrumb.fallbackName', 'Dashboard {{id}}...', {\n          id: dashboardId.slice(0, 8),\n        });\n\n      return {\n        id: dashboardId,\n        name,\n        href: `${basePath}/${dashboardId}`,\n      };\n    });\n\n    setBreadcrumbs(items);\n  }, [isInDrilldown, getDrilldownMetadata, dashboards, basePath, t]);\n\n  // Handle navigation to a breadcrumb item\n  const handleNavigate = useCallback(\n    (item: BreadcrumbItem, index: number) => {\n      // Build URL preserving context up to this point\n      const metadata = getDrilldownMetadata();\n      const newPath = metadata.path.slice(0, index);\n      const newDepth = index;\n\n      // Build URL with updated drilldown params\n      const url = new URL(item.href, window.location.origin);\n      url.searchParams.set('drilldown_depth', String(newDepth));\n      if (newPath.length > 0) {\n        url.searchParams.set('drilldown_path', encodeURIComponent(JSON.stringify(newPath)));\n      }\n      if (index > 0 && newPath.length > 0) {\n        url.searchParams.set('drilldown_parent', newPath[newPath.length - 1]);\n      }\n\n      navigate(url.pathname + url.search);\n    },\n    [getDrilldownMetadata, navigate]\n  );\n\n  // Handle back button click\n  const handleBack = useCallback(() => {\n    const metadata = getDrilldownMetadata();\n\n    if (metadata.parent) {\n      // Navigate to parent dashboard\n      const newPath = metadata.path.slice(0, -1);\n      const newDepth = metadata.depth - 1;\n\n      const url = new URL(`${basePath}/${metadata.parent}`, window.location.origin);\n      url.searchParams.set('drilldown_depth', String(newDepth));\n      if (newPath.length > 0) {\n        url.searchParams.set('drilldown_path', encodeURIComponent(JSON.stringify(newPath)));\n        url.searchParams.set('drilldown_parent', newPath[newPath.length - 1]);\n      }\n\n      navigate(url.pathname + url.search);\n    } else if (breadcrumbs.length > 0) {\n      // Navigate to last breadcrumb\n      const lastBreadcrumb = breadcrumbs[breadcrumbs.length - 1];\n      handleNavigate(lastBreadcrumb, breadcrumbs.length - 1);\n    }\n  }, [getDrilldownMetadata, basePath, navigate, breadcrumbs, handleNavigate]);\n\n  // Handle home click\n  const handleHomeClick = useCallback(\n    (e: React.MouseEvent) => {\n      e.preventDefault();\n      navigate(basePath);\n    },\n    [navigate, basePath]\n  );\n\n  // Don't render if not in drilldown mode\n  if (!isInDrilldown) {\n    return null;\n  }\n\n  return (\n    <nav\n      // Recessed on purpose: this is navigational CONTEXT, not chrome you act\n      // on, so it reads a step below the route header and the toolbar it sits\n      // between instead of being a third identical bar. Wraps rather than\n      // overflowing once the trail gets deep on a narrow viewport.\n      className={`flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1 border-b border-[var(--color-border-subtle)] bg-bg-sunken px-4 py-1.5 ${className}`}\n      aria-label={t('bigconsole.dashboards.drilldownBreadcrumb.ariaLabel', 'Drilldown breadcrumb')}\n      data-testid=\"drilldown-breadcrumb\"\n    >\n      {/* Back button */}\n      <button\n        type=\"button\"\n        onClick={handleBack}\n        className={`flex min-h-control-sm items-center gap-1 rounded-button px-2 py-1 text-sm font-medium text-text-link motion-safe:transition-colors hover:bg-bg-accentSubtle ${SECTION_FOCUS_RING}`}\n        aria-label={t('bigconsole.dashboards.drilldownBreadcrumb.back', 'Go back')}\n      >\n        <ArrowLeft className=\"w-4 h-4\" />\n        <span className=\"hidden sm:inline\">{t('bigconsole.dashboards.drilldownBreadcrumb.backLabel', 'Back')}</span>\n      </button>\n\n      <span className=\"text-text-muted\" aria-hidden=\"true\">\n        |\n      </span>\n\n      {/* Home link */}\n      {showHome && (\n        <>\n          <a\n            href={basePath}\n            onClick={handleHomeClick}\n            className={`flex min-h-control-sm items-center gap-1 rounded-button px-1 text-sm text-text-secondary motion-safe:transition-colors hover:text-text-primary ${SECTION_FOCUS_RING}`}\n            aria-label={t('bigconsole.dashboards.drilldownBreadcrumb.home', 'Home')}\n          >\n            <Home className=\"w-4 h-4\" />\n            <span className=\"hidden sm:inline\">\n              {t('bigconsole.dashboards.drilldownBreadcrumb.dashboards', 'Dashboards')}\n            </span>\n          </a>\n          <ChevronRight className=\"w-4 h-4 shrink-0 text-text-muted\" aria-hidden=\"true\" />\n        </>\n      )}\n\n      {/* Breadcrumb items */}\n      {breadcrumbs.map((item, index) => (\n        <div key={item.id} className=\"flex min-w-0 items-center gap-2\">\n          <button\n            type=\"button\"\n            onClick={() => handleNavigate(item, index)}\n            className={`min-h-control-sm max-w-[150px] truncate rounded-button px-1 text-sm text-text-secondary motion-safe:transition-colors hover:text-text-primary hover:underline ${SECTION_FOCUS_RING}`}\n            title={item.name}\n          >\n            {item.name}\n          </button>\n          <ChevronRight className=\"w-4 h-4 shrink-0 text-text-muted\" aria-hidden=\"true\" />\n        </div>\n      ))}\n\n      {/* Current dashboard (non-clickable) */}\n      {currentDashboardName && (\n        <span\n          aria-current=\"page\"\n          className=\"max-w-[200px] truncate text-sm font-medium text-text-primary\"\n          title={currentDashboardName}\n        >\n          {currentDashboardName}\n        </span>\n      )}\n\n      {/* Depth indicator */}\n      <span className=\"ml-auto shrink-0 rounded-pill bg-bg-surface px-2 py-0.5 text-xs text-text-muted\">\n        {t('bigconsole.dashboards.drilldownBreadcrumb.level', 'Level {{depth}}', { depth: drilldownDepth ?? '' })}\n      </span>\n    </nav>\n  );\n});\n\nexport default DrilldownBreadcrumb;\n"],"mappings":"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"}
+{"version":3,"file":"DrilldownBreadcrumb.js","names":[],"sources":["../../../../src/bigconsole/components/dashboard/DrilldownBreadcrumb.tsx"],"sourcesContent":["/**\n * DrilldownBreadcrumb Component\n *\n * Displays a breadcrumb trail showing the drilldown navigation path.\n * Allows users to navigate back up the drilldown hierarchy.\n *\n * URL Parameters Used:\n * - drilldown_depth: Current depth in drilldown hierarchy\n * - drilldown_parent: Parent dashboard ID\n * - drilldown_path: JSON array of dashboard IDs in the path\n */\n\nimport { memo, useCallback, useEffect, useState } from 'react';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { useBigConsoleNavigate } from '../../context';\nimport { useFilterUrlSync } from '../../hooks/useFilterUrlSync';\nimport { useDashboardStore } from '../../store';\nimport { ChevronRight, Home, ArrowLeft } from 'lucide-react';\nimport { SECTION_FOCUS_RING } from '../common';\n\n// ============================================================================\n// Types\n// ============================================================================\n\ninterface DrilldownBreadcrumbProps {\n  /** Additional CSS classes */\n  className?: string;\n  /** Current dashboard ID */\n  currentDashboardId?: string;\n  /** Current dashboard name */\n  currentDashboardName?: string;\n  /** Whether to show the home/root link */\n  showHome?: boolean;\n  /** Base path for dashboard URLs */\n  basePath?: string;\n}\n\ninterface BreadcrumbItem {\n  id: string;\n  name: string;\n  href: string;\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const DrilldownBreadcrumb = memo(function DrilldownBreadcrumb({\n  className = '',\n  currentDashboardId,\n  currentDashboardName,\n  showHome = true,\n  basePath = '/bigconsole/dashboards',\n}: DrilldownBreadcrumbProps) {\n  const { t } = useI18n();\n  const navigate = useBigConsoleNavigate();\n  const { getDrilldownMetadata, isInDrilldown, drilldownDepth } = useFilterUrlSync();\n\n  // Get dashboards from store for name lookup\n  const dashboards = useDashboardStore((state) => state.dashboards);\n\n  const [breadcrumbs, setBreadcrumbs] = useState<BreadcrumbItem[]>([]);\n\n  // Build breadcrumb items from path\n  useEffect(() => {\n    if (!isInDrilldown) {\n      setBreadcrumbs([]);\n      return;\n    }\n\n    const metadata = getDrilldownMetadata();\n    const { path } = metadata;\n\n    if (path.length === 0) {\n      setBreadcrumbs([]);\n      return;\n    }\n\n    // Map path IDs to breadcrumb items\n    const items: BreadcrumbItem[] = path.map((dashboardId) => {\n      // Try to find dashboard name in store\n      const dashboard = dashboards.get(dashboardId);\n      const name =\n        dashboard?.name ||\n        t('bigconsole.dashboards.drilldownBreadcrumb.fallbackName', 'Dashboard {{id}}...', {\n          id: dashboardId.slice(0, 8),\n        });\n\n      return {\n        id: dashboardId,\n        name,\n        href: `${basePath}/${dashboardId}`,\n      };\n    });\n\n    setBreadcrumbs(items);\n  }, [isInDrilldown, getDrilldownMetadata, dashboards, basePath, t]);\n\n  // Handle navigation to a breadcrumb item\n  const handleNavigate = useCallback(\n    (item: BreadcrumbItem, index: number) => {\n      // Build URL preserving context up to this point\n      const metadata = getDrilldownMetadata();\n      const newPath = metadata.path.slice(0, index);\n      const newDepth = index;\n\n      // Build URL with updated drilldown params\n      const url = new URL(item.href, window.location.origin);\n      url.searchParams.set('drilldown_depth', String(newDepth));\n      if (newPath.length > 0) {\n        url.searchParams.set('drilldown_path', encodeURIComponent(JSON.stringify(newPath)));\n      }\n      if (index > 0 && newPath.length > 0) {\n        url.searchParams.set('drilldown_parent', newPath[newPath.length - 1]);\n      }\n\n      navigate(url.pathname + url.search);\n    },\n    [getDrilldownMetadata, navigate]\n  );\n\n  // Handle back button click. When the drilldown was reached inside this app\n  // session, step back through browser history: that restores the exact\n  // origin (its page, filters and scroll) rather than rebuilding a URL that\n  // would land on the parent's first page (BOFF-7625). React Router records\n  // the history index in `history.state.idx`.\n  const handleBack = useCallback(() => {\n    const historyIndex = (window.history.state as { idx?: unknown } | null)?.idx;\n    if (typeof historyIndex === 'number' && historyIndex > 0) {\n      window.history.back();\n      return;\n    }\n\n    const metadata = getDrilldownMetadata();\n\n    if (metadata.parent) {\n      // Navigate to parent dashboard\n      const newPath = metadata.path.slice(0, -1);\n      const newDepth = metadata.depth - 1;\n\n      const url = new URL(`${basePath}/${metadata.parent}`, window.location.origin);\n      url.searchParams.set('drilldown_depth', String(newDepth));\n      if (newPath.length > 0) {\n        url.searchParams.set('drilldown_path', encodeURIComponent(JSON.stringify(newPath)));\n        url.searchParams.set('drilldown_parent', newPath[newPath.length - 1]);\n      }\n\n      navigate(url.pathname + url.search);\n    } else if (breadcrumbs.length > 0) {\n      // Navigate to last breadcrumb\n      const lastBreadcrumb = breadcrumbs[breadcrumbs.length - 1];\n      handleNavigate(lastBreadcrumb, breadcrumbs.length - 1);\n    }\n  }, [getDrilldownMetadata, basePath, navigate, breadcrumbs, handleNavigate]);\n\n  // Handle home click\n  const handleHomeClick = useCallback(\n    (e: React.MouseEvent) => {\n      e.preventDefault();\n      navigate(basePath);\n    },\n    [navigate, basePath]\n  );\n\n  // Don't render if not in drilldown mode\n  if (!isInDrilldown) {\n    return null;\n  }\n\n  return (\n    <nav\n      // Recessed on purpose: this is navigational CONTEXT, not chrome you act\n      // on, so it reads a step below the route header and the toolbar it sits\n      // between instead of being a third identical bar. Wraps rather than\n      // overflowing once the trail gets deep on a narrow viewport.\n      className={`flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1 border-b border-[var(--color-border-subtle)] bg-bg-sunken px-4 py-1.5 ${className}`}\n      aria-label={t('bigconsole.dashboards.drilldownBreadcrumb.ariaLabel', 'Drilldown breadcrumb')}\n      data-testid=\"drilldown-breadcrumb\"\n    >\n      {/* Back button */}\n      <button\n        type=\"button\"\n        onClick={handleBack}\n        className={`flex min-h-control-sm items-center gap-1 rounded-button px-2 py-1 text-sm font-medium text-text-link motion-safe:transition-colors hover:bg-bg-accentSubtle ${SECTION_FOCUS_RING}`}\n        aria-label={t('bigconsole.dashboards.drilldownBreadcrumb.back', 'Go back')}\n      >\n        <ArrowLeft className=\"w-4 h-4\" />\n        <span className=\"hidden sm:inline\">{t('bigconsole.dashboards.drilldownBreadcrumb.backLabel', 'Back')}</span>\n      </button>\n\n      <span className=\"text-text-muted\" aria-hidden=\"true\">\n        |\n      </span>\n\n      {/* Home link */}\n      {showHome && (\n        <>\n          <a\n            href={basePath}\n            onClick={handleHomeClick}\n            className={`flex min-h-control-sm items-center gap-1 rounded-button px-1 text-sm text-text-secondary motion-safe:transition-colors hover:text-text-primary ${SECTION_FOCUS_RING}`}\n            aria-label={t('bigconsole.dashboards.drilldownBreadcrumb.home', 'Home')}\n          >\n            <Home className=\"w-4 h-4\" />\n            <span className=\"hidden sm:inline\">\n              {t('bigconsole.dashboards.drilldownBreadcrumb.dashboards', 'Dashboards')}\n            </span>\n          </a>\n          <ChevronRight className=\"w-4 h-4 shrink-0 text-text-muted\" aria-hidden=\"true\" />\n        </>\n      )}\n\n      {/* Breadcrumb items */}\n      {breadcrumbs.map((item, index) => (\n        <div key={item.id} className=\"flex min-w-0 items-center gap-2\">\n          <button\n            type=\"button\"\n            onClick={() => handleNavigate(item, index)}\n            className={`min-h-control-sm max-w-[150px] truncate rounded-button px-1 text-sm text-text-secondary motion-safe:transition-colors hover:text-text-primary hover:underline ${SECTION_FOCUS_RING}`}\n            title={item.name}\n          >\n            {item.name}\n          </button>\n          <ChevronRight className=\"w-4 h-4 shrink-0 text-text-muted\" aria-hidden=\"true\" />\n        </div>\n      ))}\n\n      {/* Current dashboard (non-clickable) */}\n      {currentDashboardName && (\n        <span\n          aria-current=\"page\"\n          className=\"max-w-[200px] truncate text-sm font-medium text-text-primary\"\n          title={currentDashboardName}\n        >\n          {currentDashboardName}\n        </span>\n      )}\n\n      {/* Depth indicator */}\n      <span className=\"ml-auto shrink-0 rounded-pill bg-bg-surface px-2 py-0.5 text-xs text-text-muted\">\n        {t('bigconsole.dashboards.drilldownBreadcrumb.level', 'Level {{depth}}', { depth: drilldownDepth ?? '' })}\n      </span>\n    </nav>\n  );\n});\n\nexport default DrilldownBreadcrumb;\n"],"mappings":"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"}

package/dist/bigconsole/components/embed/ReadOnlyDashboardRenderer.js

@@ -1,101 +1,129 @@
 import { EmbedErrorBoundary as e } from "./EmbedErrorBoundary.js";
 import { EmbedWidgetRenderer as t } from "./EmbedWidgetRenderer.js";
-import { useState as n } from "react";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { readDrilldownHint as n } from "./drilldown.js";
+import { useMemo as r, useState as i } from "react";
+import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
 //#region src/bigconsole/components/embed/ReadOnlyDashboardRenderer.tsx
-var a = 12;
-function o({ page: e, capabilities: n }) {
-	return e.widgets.length === 0 ? /* @__PURE__ */ r("div", {
+var c = 12;
+function l({ title: e, onClick: t }) {
+	return /* @__PURE__ */ o("button", {
+		type: "button",
+		onClick: t,
+		"aria-label": e ? `View details for ${e}` : "View details",
+		className: "absolute right-2 top-2 z-10 rounded-button border border-border-default bg-bg-surface px-2 py-1 text-xs font-medium text-text-link shadow-sm transition-colors hover:bg-bg-sunken focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+		"data-testid": "embed-drilldown",
+		children: "View details →"
+	});
+}
+function u({ page: e, capabilities: t, pageIds: n, onDrilldown: r }) {
+	return e.widgets.length === 0 ? /* @__PURE__ */ o("div", {
 		className: "flex h-40 items-center justify-center text-sm text-text-secondary",
 		children: "This page has no widgets."
-	}) : /* @__PURE__ */ r("div", {
+	}) : /* @__PURE__ */ o("div", {
 		className: "grid w-full gap-4 p-4",
 		style: {
-			gridTemplateColumns: `repeat(${a}, minmax(0, 1fr))`,
+			gridTemplateColumns: `repeat(${c}, minmax(0, 1fr))`,
 			gridAutoRows: "minmax(80px, auto)"
 		},
-		children: e.widgets.map((e) => /* @__PURE__ */ r("div", {
-			className: "overflow-hidden rounded-lg border border-border-default bg-bg-surface shadow-sm",
+		children: e.widgets.map((e) => /* @__PURE__ */ o("div", {
+			className: "relative overflow-hidden rounded-lg border border-border-default bg-bg-surface shadow-sm",
 			style: {
-				gridColumn: `${Math.min(Math.max(e.layout.x, 0), a - 1) + 1} / span ${Math.min(Math.max(e.layout.w, 1), a)}`,
+				gridColumn: `${Math.min(Math.max(e.layout.x, 0), c - 1) + 1} / span ${Math.min(Math.max(e.layout.w, 1), c)}`,
 				gridRow: `${Math.max(e.layout.y, 0) + 1} / span ${Math.max(e.layout.h, 1)}`
 			},
-			children: /* @__PURE__ */ r(t, {
+			children: /* @__PURE__ */ o(d, {
 				widget: e,
-				capabilities: n
+				capabilities: t,
+				pageIds: n,
+				onDrilldown: r
 			})
 		}, e.id))
 	});
 }
-function s() {
-	return /* @__PURE__ */ r("div", {
+function d({ widget: e, capabilities: r, pageIds: i, onDrilldown: c }) {
+	let u = r.drilldown && c ? n(e, i) : null;
+	return /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o(t, {
+		widget: e,
+		capabilities: r
+	}), u && c && /* @__PURE__ */ o(l, {
+		title: e.title,
+		onClick: () => c(u)
+	})] });
+}
+function f() {
+	return /* @__PURE__ */ o("div", {
 		className: "flex shrink-0 items-center justify-end border-t border-border-default bg-bg-surface px-4 py-2",
-		children: /* @__PURE__ */ i("a", {
+		children: /* @__PURE__ */ s("a", {
 			href: "https://bigconsole.com",
 			target: "_blank",
 			rel: "noopener noreferrer",
 			className: "text-xs text-text-tertiary transition-colors hover:text-text-secondary",
-			children: ["Powered by ", /* @__PURE__ */ r("span", {
+			children: ["Powered by ", /* @__PURE__ */ o("span", {
 				className: "font-semibold text-text-secondary",
 				children: "BigConsole"
 			})]
 		})
 	});
 }
-function c({ model: t }) {
-	let [a, c] = n(0), l = t.pages, u = t.presentation, d = u?.showTitle ? (u.title ?? "").trim() : "", f = l[Math.min(a, l.length - 1)];
-	return f ? /* @__PURE__ */ r(e, {
+function p({ model: t, activePageId: n, onPageChange: a, onDrilldown: c }) {
+	let [l, d] = i(0), p = t.pages, m = t.presentation, h = r(() => new Set(p.map((e) => e.id)), [p]), g = m?.showTitle ? (m.title ?? "").trim() : "", _ = a !== void 0, v = p.findIndex((e) => e.id === n), y = _ ? Math.max(v, 0) : l, b = (e) => {
+		let t = p[e];
+		t && (_ ? a(t.id) : d(e));
+	}, x = p[Math.min(y, p.length - 1)];
+	return x ? /* @__PURE__ */ o(e, {
 		label: "dashboard",
-		children: /* @__PURE__ */ i("div", {
+		children: /* @__PURE__ */ s("div", {
 			className: "flex h-full w-full flex-col bg-bg-canvas",
 			children: [
-				d && /* @__PURE__ */ r("header", {
+				g && /* @__PURE__ */ o("header", {
 					className: "shrink-0 border-b border-border-default bg-bg-surface px-4 py-3",
-					children: /* @__PURE__ */ r("h1", {
+					children: /* @__PURE__ */ o("h1", {
 						className: "truncate text-base font-semibold text-text-primary",
-						children: d
+						children: g
 					})
 				}),
-				l.length > 1 && /* @__PURE__ */ r("div", {
+				p.length > 1 && /* @__PURE__ */ o("div", {
 					role: "tablist",
 					className: "flex gap-1 border-b border-border-default bg-bg-surface px-2",
-					children: l.map((e, t) => /* @__PURE__ */ r("button", {
+					children: p.map((e, t) => /* @__PURE__ */ o("button", {
 						role: "tab",
-						"aria-selected": t === a,
-						onClick: () => c(t),
-						className: t === a ? "-mb-px border-b-2 border-action-primary-bg px-3 py-2 text-sm font-medium text-text-primary" : "border-b-2 border-transparent px-3 py-2 text-sm text-text-secondary hover:text-text-primary",
+						"aria-selected": t === y,
+						onClick: () => b(t),
+						className: t === y ? "-mb-px border-b-2 border-action-primary-bg px-3 py-2 text-sm font-medium text-text-primary" : "border-b-2 border-transparent px-3 py-2 text-sm text-text-secondary hover:text-text-primary",
 						children: e.title ?? `Page ${t + 1}`
 					}, e.id))
 				}),
-				/* @__PURE__ */ r("div", {
+				/* @__PURE__ */ o("div", {
 					className: "min-h-0 flex-1 overflow-auto",
-					children: /* @__PURE__ */ r(o, {
-						page: f,
-						capabilities: t.capabilities
+					children: /* @__PURE__ */ o(u, {
+						page: x,
+						capabilities: t.capabilities,
+						pageIds: h,
+						onDrilldown: c
 					})
 				}),
-				/* @__PURE__ */ r(s, {})
+				/* @__PURE__ */ o(f, {})
 			]
 		})
-	}) : /* @__PURE__ */ i("div", {
+	}) : /* @__PURE__ */ s("div", {
 		className: "flex h-full flex-col bg-bg-canvas",
 		children: [
-			d && /* @__PURE__ */ r("header", {
+			g && /* @__PURE__ */ o("header", {
 				className: "shrink-0 border-b border-border-default bg-bg-surface px-4 py-3",
-				children: /* @__PURE__ */ r("h1", {
+				children: /* @__PURE__ */ o("h1", {
 					className: "truncate text-base font-semibold text-text-primary",
-					children: d
+					children: g
 				})
 			}),
-			/* @__PURE__ */ r("div", {
+			/* @__PURE__ */ o("div", {
 				className: "flex flex-1 items-center justify-center text-sm text-text-secondary",
 				children: "This dashboard has no pages."
 			}),
-			/* @__PURE__ */ r(s, {})
+			/* @__PURE__ */ o(f, {})
 		]
 	});
 }
 //#endregion
-export { c as ReadOnlyDashboardRenderer };
+export { p as ReadOnlyDashboardRenderer };
 
 //# sourceMappingURL=ReadOnlyDashboardRenderer.js.map