@hachej/boring-bi-dashboard 0.1.60

package/dist/front/index.js

@@ -0,0 +1,831 @@
+// src/front/index.ts
+import { LayoutDashboard as LayoutDashboard2 } from "lucide-react";
+import { definePlugin } from "@hachej/boring-workspace/plugin";
+
+// src/front/BiDashboardPane.tsx
+import { useEffect as useEffect2, useMemo as useMemo2, useState as useState2 } from "react";
+import { BarChart3, Database, ExternalLink, Gauge, RefreshCcw, SlidersHorizontal, Table2 } from "lucide-react";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  EmptyState,
+  IconButton,
+  Toolbar,
+  ToolbarGroup
+} from "@hachej/boring-ui-kit";
+import { useApiBaseUrl, useWorkspaceRequestId } from "@hachej/boring-workspace";
+import { defineGeneratedPaneProfile, GeneratedPaneRenderer } from "@hachej/boring-generated-pane/front";
+
+// src/shared/validation.ts
+import { parseGeneratedPaneSpec } from "@hachej/boring-generated-pane/shared";
+
+// src/shared/schemas.ts
+import { z } from "zod";
+var chartRenderers = ["echarts", "vega-lite", "plotly"];
+var chartTypes = ["bar", "line", "area", "scatter", "heatmap", "pie", "treemap", "sunburst", "gauge", "table"];
+var perspectivePlugins = ["Datagrid", "Y Bar", "X Bar", "Y Line", "Y Area", "Y Scatter", "Y Treemap", "Sunburst", "Heatmap"];
+var metricFormats = ["number", "currency", "percent"];
+var filterControlTypes = ["select", "multiSelect", "dateRange", "numberRange", "search"];
+var sortDirections = ["asc", "desc"];
+var dashboardQuerySchema = z.union([
+  z.object({
+    id: z.string().min(1),
+    model: z.string().min(1),
+    query: z.string().min(1),
+    limit: z.number().int().safe().min(1).optional()
+  }),
+  z.object({
+    id: z.string().min(1),
+    source: z.string().min(1).optional(),
+    sql: z.string().min(1),
+    params: z.record(z.string(), z.unknown()).optional(),
+    limit: z.number().int().safe().min(1).optional()
+  })
+]);
+var dashboardGridPropsSchema = z.object({
+  title: z.string().optional(),
+  columns: z.union([z.literal(1), z.literal(2), z.literal(3), z.literal(4), z.literal(6), z.literal(12)]).optional()
+});
+var bslMetricPropsSchema = z.object({
+  queryId: z.string(),
+  valueField: z.string(),
+  label: z.string(),
+  format: z.enum(metricFormats).optional()
+});
+var bslChartPropsSchema = z.object({
+  queryId: z.string(),
+  title: z.string().optional(),
+  renderer: z.enum(chartRenderers).optional(),
+  chartType: z.enum(chartTypes),
+  x: z.string().optional(),
+  y: z.union([z.string(), z.array(z.string())]).optional(),
+  color: z.string().optional(),
+  controls: z.array(z.string()).optional()
+});
+var bslPerspectiveViewerPropsSchema = z.object({
+  queryId: z.string(),
+  title: z.string().optional(),
+  plugin: z.enum(perspectivePlugins).optional(),
+  columns: z.array(z.string()).optional(),
+  groupBy: z.array(z.string()).optional(),
+  splitBy: z.array(z.string()).optional(),
+  sort: z.array(z.tuple([z.string(), z.enum(sortDirections)])).optional()
+});
+var bslFilterPropsSchema = z.object({
+  id: z.string(),
+  field: z.string(),
+  label: z.string().optional(),
+  controlType: z.enum(filterControlTypes),
+  targetQueries: z.array(z.string())
+});
+var bslTextPropsSchema = z.object({
+  markdown: z.string()
+});
+var componentPropsSchemas = {
+  DashboardGrid: dashboardGridPropsSchema,
+  BSLMetric: bslMetricPropsSchema,
+  BSLChart: bslChartPropsSchema,
+  BSLPerspectiveViewer: bslPerspectiveViewerPropsSchema,
+  BSLFilter: bslFilterPropsSchema,
+  BSLText: bslTextPropsSchema
+};
+
+// src/shared/validation.ts
+function isRecord(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function formatSchemaErrors(prefix, error) {
+  return error.issues.map((issue) => `${prefix}${issue.path.length ? `.${issue.path.map(String).join(".")}` : ""}: ${issue.message}`);
+}
+function parseDashboardSpec(value) {
+  const base = parseGeneratedPaneSpec(value);
+  if (!base.spec) return { spec: null, errors: base.errors };
+  const errors = [];
+  if (base.spec.profile !== "bi-dashboard") errors.push('dashboard spec profile must be "bi-dashboard"');
+  if (typeof base.spec.title !== "string" || base.spec.title.length === 0) errors.push("dashboard spec needs a title");
+  if (!isRecord(base.spec.queries)) errors.push("dashboard spec needs a queries object");
+  if (errors.length > 0) return { spec: null, errors };
+  const queries = base.spec.queries;
+  for (const [id, query] of Object.entries(queries)) {
+    const parsed = dashboardQuerySchema.safeParse(query);
+    if (!parsed.success) {
+      errors.push(...formatSchemaErrors(`query ${id}`, parsed.error));
+      continue;
+    }
+    if (parsed.data.id !== id) errors.push(`query ${id} must repeat its id field`);
+  }
+  for (const [id, element] of Object.entries(base.spec.elements)) {
+    const type = element.type;
+    const schema = componentPropsSchemas[type];
+    if (!schema) {
+      errors.push(`component ${id} has unsupported type ${String(element.type)}`);
+      continue;
+    }
+    const props = schema.safeParse(element.props ?? {});
+    if (!props.success) errors.push(...formatSchemaErrors(`component ${id}.props`, props.error));
+    if (type === "DashboardGrid" && !Array.isArray(element.children)) {
+      errors.push(`DashboardGrid ${id} must include string children`);
+    }
+    if ((type === "BSLMetric" || type === "BSLChart" || type === "BSLPerspectiveViewer") && props.success) {
+      const queryId = props.data.queryId;
+      if (!queries[queryId]) errors.push(`component ${id} references unknown query ${queryId}`);
+    }
+    if (type === "BSLFilter" && props.success) {
+      for (const queryId of props.data.targetQueries) {
+        if (!queries[queryId]) errors.push(`BSLFilter ${id} references unknown query ${queryId}`);
+      }
+    }
+  }
+  if (errors.length > 0) return { spec: null, errors };
+  return { spec: base.spec, errors: [] };
+}
+
+// src/front/sampleSpec.ts
+var sampleBiDashboardSpec = {
+  kind: "boring.generated-pane",
+  version: 1,
+  profile: "bi-dashboard",
+  title: "Semantic Data Overview",
+  description: "Dashboard backed by data-bridge SQL query strings.",
+  queries: {
+    total_people: {
+      id: "total_people",
+      source: "people-duckdb",
+      sql: "SELECT count(*) AS count FROM people"
+    },
+    people_by_role: {
+      id: "people_by_role",
+      source: "people-duckdb",
+      sql: "SELECT role, count(*) AS count FROM people GROUP BY role ORDER BY count DESC"
+    },
+    status_by_owner: {
+      id: "status_by_owner",
+      source: "people-duckdb",
+      sql: "SELECT owner, count(*) AS count FROM workspace_status GROUP BY owner ORDER BY count DESC"
+    },
+    people_detail: {
+      id: "people_detail",
+      source: "people-duckdb",
+      sql: "SELECT role, active, count(*) AS count FROM people GROUP BY role, active ORDER BY count DESC"
+    }
+  },
+  root: "dashboard",
+  elements: {
+    dashboard: {
+      type: "DashboardGrid",
+      props: { title: "Workspace Data Overview", columns: 12 },
+      children: ["total-people", "people-role", "status-owner", "people-table"]
+    },
+    "total-people": {
+      type: "BSLMetric",
+      props: {
+        queryId: "total_people",
+        valueField: "count",
+        label: "People rows",
+        format: "number"
+      }
+    },
+    "people-role": {
+      type: "BSLChart",
+      props: {
+        queryId: "people_by_role",
+        renderer: "echarts",
+        chartType: "bar",
+        x: "role",
+        y: "count",
+        title: "People by role"
+      }
+    },
+    "status-owner": {
+      type: "BSLChart",
+      props: {
+        queryId: "status_by_owner",
+        renderer: "echarts",
+        chartType: "bar",
+        x: "owner",
+        y: "count",
+        title: "Workspace components by owner"
+      }
+    },
+    "people-table": {
+      type: "BSLPerspectiveViewer",
+      props: {
+        queryId: "people_detail",
+        title: "People explorer",
+        plugin: "Datagrid",
+        columns: ["role", "active", "count"],
+        sort: [["count", "desc"]]
+      }
+    }
+  }
+};
+
+// src/front/dashboardData.ts
+import { useEffect, useMemo, useState } from "react";
+var DATA_BRIDGE_QUERY_RUN_OP = "data.v1.query.run";
+function inferColumns(rows) {
+  const names = [...new Set(rows.flatMap((row) => Object.keys(row)))];
+  return names.map((name) => ({ name, type: typeof rows.find((row) => row[name] != null)?.[name] }));
+}
+async function fetchDataBridgeQuery(options) {
+  const response = await fetch(`${options.apiBaseUrl}/api/v1/workspace-bridge/call`, {
+    method: "POST",
+    credentials: "include",
+    headers: {
+      "content-type": "application/json",
+      ...options.workspaceId ? { "x-boring-workspace-id": options.workspaceId } : {}
+    },
+    body: JSON.stringify({
+      op: DATA_BRIDGE_QUERY_RUN_OP,
+      input: {
+        query: "sql" in options.query ? {
+          language: "sql",
+          source: options.query.source ?? "default",
+          sql: options.query.sql,
+          params: options.query.params,
+          limit: options.query.limit
+        } : {
+          language: "bsl",
+          model: options.query.model,
+          query: options.query.query,
+          limit: options.query.limit
+        }
+      }
+    })
+  });
+  const body = await response.json();
+  if (!response.ok || !body.ok || !body.output) {
+    const message = body.error?.message ?? `Data bridge failed with HTTP ${response.status}`;
+    throw new Error(message);
+  }
+  const rows = body.output.rows ?? [];
+  return {
+    queryId: options.query.id,
+    columns: body.output.columns ?? inferColumns(rows),
+    rows,
+    source: body.output.source,
+    loading: false
+  };
+}
+function useDashboardQueryData(spec, apiBaseUrl, workspaceId) {
+  const queries = useMemo(
+    () => spec ? Object.entries(spec.queries) : [],
+    [spec]
+  );
+  const [results, setResults] = useState({});
+  useEffect(() => {
+    let cancelled = false;
+    if (queries.length === 0) {
+      setResults({});
+      return;
+    }
+    setResults(Object.fromEntries(queries.map(([queryId]) => [queryId, { queryId, columns: [], rows: [], loading: true }])));
+    void Promise.all(queries.map(async ([queryId, query]) => {
+      try {
+        return [queryId, await fetchDataBridgeQuery({ apiBaseUrl, workspaceId, query })];
+      } catch (error) {
+        return [queryId, {
+          queryId,
+          columns: [],
+          rows: [],
+          loading: false,
+          error: error instanceof Error ? error.message : String(error)
+        }];
+      }
+    })).then((entries) => {
+      if (!cancelled) setResults(Object.fromEntries(entries));
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [apiBaseUrl, queries, workspaceId]);
+  return results;
+}
+
+// src/front/BiDashboardPane.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function BiDashboardPane({ params }) {
+  const apiBaseUrl = useApiBaseUrl();
+  const workspaceId = useWorkspaceRequestId();
+  const [loadedFile, setLoadedFile] = useState2({ spec: null, loading: false });
+  const [controllerValues, setControllerValues] = useState2({});
+  const [refreshKey, setRefreshKey] = useState2(0);
+  useEffect2(() => {
+    if (!params?.path || params.spec) {
+      setLoadedFile({ spec: null, loading: false });
+      return;
+    }
+    const controller = new AbortController();
+    setLoadedFile({ spec: null, loading: true });
+    void fetch(`${apiBaseUrl}/api/v1/files/raw?path=${encodeURIComponent(params.path)}`, {
+      signal: controller.signal,
+      credentials: "include",
+      headers: workspaceId ? { "x-boring-workspace-id": workspaceId } : {}
+    }).then(async (response) => {
+      if (!response.ok) throw new Error(`Failed to load ${params.path}: HTTP ${response.status}`);
+      return await response.text();
+    }).then((text) => {
+      try {
+        setLoadedFile({ spec: JSON.parse(text), loading: false });
+      } catch (error) {
+        setLoadedFile({
+          spec: null,
+          loading: false,
+          error: error instanceof Error ? error.message : "Dashboard file is not valid JSON"
+        });
+      }
+    }).catch((error) => {
+      if (controller.signal.aborted) return;
+      setLoadedFile({
+        spec: null,
+        loading: false,
+        error: error instanceof Error ? error.message : String(error)
+      });
+    });
+    return () => controller.abort();
+  }, [apiBaseUrl, params?.path, params?.spec, refreshKey, workspaceId]);
+  const rawSpec = loadedFile.loading || loadedFile.error ? null : params?.spec ?? loadedFile.spec ?? sampleBiDashboardSpec;
+  const parsed = rawSpec ? parseDashboardSpec(rawSpec) : { spec: null, errors: [] };
+  const spec = useMemo2(() => parsed.spec ? applyControllerFilters(parsed.spec, controllerValues) : null, [controllerValues, parsed.spec]);
+  const queryData = useDashboardQueryData(spec, apiBaseUrl, workspaceId ?? void 0);
+  if (loadedFile.loading) {
+    return /* @__PURE__ */ jsx("div", { className: "flex h-full min-h-0 min-w-0 items-center justify-center bg-background p-6 text-foreground", children: /* @__PURE__ */ jsx(EmptyState, { title: "Loading BI dashboard", description: params?.path }) });
+  }
+  if (loadedFile.error) {
+    return /* @__PURE__ */ jsx("div", { className: "flex h-full min-h-0 min-w-0 items-center justify-center bg-background p-6 text-foreground", children: /* @__PURE__ */ jsx(EmptyState, { title: "Could not load BI dashboard", description: loadedFile.error }) });
+  }
+  if (!parsed.spec) {
+    return /* @__PURE__ */ jsx("div", { className: "flex h-full min-h-0 min-w-0 items-center justify-center bg-background p-6 text-foreground", children: /* @__PURE__ */ jsx(
+      EmptyState,
+      {
+        title: "Invalid BI dashboard spec",
+        description: parsed.errors.slice(0, 5).join(" \u2022 ")
+      }
+    ) });
+  }
+  if (!spec) {
+    return /* @__PURE__ */ jsx("div", { className: "flex h-full min-h-0 min-w-0 items-center justify-center bg-background p-6 text-foreground", children: /* @__PURE__ */ jsx(EmptyState, { title: "Invalid BI dashboard spec", description: "Dashboard could not be prepared" }) });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-full min-h-0 min-w-0 flex-col bg-background text-foreground", children: [
+    /* @__PURE__ */ jsxs(Toolbar, { className: "border-b border-border bg-background/95 px-3 py-2", children: [
+      /* @__PURE__ */ jsx(ToolbarGroup, { children: /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-muted-foreground", children: "BI dashboard" }) }),
+      /* @__PURE__ */ jsxs(ToolbarGroup, { className: "ml-auto", children: [
+        /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            type: "button",
+            variant: "ghost",
+            size: "icon-xs",
+            className: "text-muted-foreground hover:text-foreground",
+            onClick: () => setRefreshKey((value) => value + 1),
+            "aria-label": "Refresh dashboard",
+            title: "Refresh dashboard",
+            disabled: !params?.path || loadedFile.loading,
+            children: /* @__PURE__ */ jsx(RefreshCcw, { className: `h-3.5 w-3.5 ${loadedFile.loading ? "animate-spin" : ""}`, strokeWidth: 1.75 })
+          }
+        ),
+        params?.path ? /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            asChild: true,
+            variant: "ghost",
+            size: "icon-xs",
+            className: "text-muted-foreground hover:text-foreground",
+            "aria-label": "Open raw dashboard in new tab",
+            title: "Open raw dashboard in new tab",
+            children: /* @__PURE__ */ jsx("a", { href: `${apiBaseUrl}/api/v1/files/raw?path=${encodeURIComponent(params.path)}`, target: "_blank", rel: "noreferrer", children: /* @__PURE__ */ jsx(ExternalLink, { className: "h-3.5 w-3.5", strokeWidth: 1.75 }) })
+          }
+        ) : null
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "min-h-0 min-w-0 flex-1 overflow-auto bg-background p-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
+        /* @__PURE__ */ jsx("h1", { className: "text-2xl font-semibold tracking-tight", children: spec.title }),
+        spec.description ? /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: spec.description }) : null
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "grid min-w-0 gap-4 xl:grid-cols-[minmax(0,1fr)_360px]", children: [
+        /* @__PURE__ */ jsx("div", { className: "min-w-0 space-y-4", children: /* @__PURE__ */ jsx(GeneratedPaneRenderer, { spec, profile: createBiDashboardPaneProfile(queryData, controllerValues, setControllerValues) }) }),
+        /* @__PURE__ */ jsxs(Card, { className: "min-w-0", children: [
+          /* @__PURE__ */ jsxs(CardHeader, { children: [
+            /* @__PURE__ */ jsxs(CardTitle, { className: "flex items-center gap-2 text-sm", children: [
+              /* @__PURE__ */ jsx(Database, { className: "h-4 w-4" }),
+              " Query manifest"
+            ] }),
+            /* @__PURE__ */ jsx(CardDescription, { children: "The agent should generate this neutral BSL dashboard contract; the plugin maps it to BSL, ECharts, and Perspective runtime calls." })
+          ] }),
+          /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx("pre", { className: "max-h-[520px] overflow-auto rounded-lg border border-border bg-muted/40 p-3 text-xs text-muted-foreground", children: JSON.stringify({ queries: spec.queries }, null, 2) }) })
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function gridColumnsClass(columns) {
+  switch (columns) {
+    case 1:
+      return "grid-cols-1";
+    case 2:
+      return "lg:grid-cols-2";
+    case 3:
+      return "lg:grid-cols-3";
+    case 4:
+      return "lg:grid-cols-4";
+    case 6:
+      return "lg:grid-cols-6";
+    case 12:
+      return "lg:grid-cols-2 xl:grid-cols-4";
+    default:
+      return "lg:grid-cols-2";
+  }
+}
+function formatMetricValue(value, format) {
+  const number = typeof value === "number" ? value : Number(value);
+  if (!Number.isFinite(number)) return value == null ? "\u2014" : String(value);
+  if (format === "currency") return new Intl.NumberFormat("en-US", { style: "currency", currency: "USD", maximumFractionDigits: 0 }).format(number);
+  if (format === "percent") return new Intl.NumberFormat("en-US", { style: "percent", maximumFractionDigits: 1 }).format(number);
+  return new Intl.NumberFormat("en-US", { maximumFractionDigits: 2 }).format(number);
+}
+function applyControllerFilters(spec, _controllerValues) {
+  return spec;
+}
+function ChartPreview({ data, x, y, chartType }) {
+  if (!data) return /* @__PURE__ */ jsx(Placeholder, { text: "No live data source configured yet" });
+  if (data.loading) return /* @__PURE__ */ jsx(Placeholder, { text: "Loading data\u2026" });
+  if (data.error) return /* @__PURE__ */ jsx(Placeholder, { text: data.error, destructive: true });
+  const yField = Array.isArray(y) ? y[0] : y;
+  if (!x || !yField || data.rows.length === 0) return /* @__PURE__ */ jsx(Placeholder, { text: "No chartable rows" });
+  const values = data.rows.map((row) => Number(row[yField])).filter(Number.isFinite);
+  const max = Math.max(1, ...values);
+  return /* @__PURE__ */ jsx("div", { className: "h-56 rounded-lg border border-border bg-card p-3 text-foreground", children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 640 210", className: "h-full w-full overflow-visible", role: "img", "aria-label": `${chartType} chart`, children: [
+    data.rows.map((row, index) => {
+      const value = Number(row[yField]);
+      const label = String(row[x] ?? index + 1);
+      const width = 560 / Math.max(1, data.rows.length);
+      const height = Number.isFinite(value) ? Math.max(3, value / max * 150) : 3;
+      const left = 55 + index * width;
+      if (chartType === "line" || chartType === "area") return null;
+      return /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("rect", { x: left, y: 165 - height, width: Math.max(8, width - 8), height, rx: "4", fill: "var(--boring-primary, var(--primary))", opacity: "0.9" }),
+        /* @__PURE__ */ jsx("text", { x: left + width / 2, y: "190", textAnchor: "middle", className: "fill-current text-[10px] text-muted-foreground", children: label.slice(0, 10) })
+      ] }, index);
+    }),
+    (chartType === "line" || chartType === "area") && /* @__PURE__ */ jsx(
+      "polyline",
+      {
+        fill: "none",
+        stroke: "var(--boring-primary, var(--primary))",
+        strokeWidth: "3",
+        points: data.rows.map((row, index) => {
+          const value = Number(row[yField]);
+          const xPos = 65 + index * (540 / Math.max(1, data.rows.length - 1));
+          const yPos = 165 - (Number.isFinite(value) ? value : 0) / max * 150;
+          return `${xPos},${yPos}`;
+        }).join(" ")
+      }
+    )
+  ] }) });
+}
+function DataTable({ data, columns }) {
+  if (!data) return /* @__PURE__ */ jsx(Placeholder, { text: "No live data source configured yet" });
+  if (data.loading) return /* @__PURE__ */ jsx(Placeholder, { text: "Loading data\u2026" });
+  if (data.error) return /* @__PURE__ */ jsx(Placeholder, { text: data.error, destructive: true });
+  const visibleColumns = columns?.length ? columns : data.columns.map((column) => column.name);
+  return /* @__PURE__ */ jsx("div", { className: "max-h-72 overflow-auto rounded-lg border border-border", children: /* @__PURE__ */ jsxs("table", { className: "w-full border-collapse text-xs", children: [
+    /* @__PURE__ */ jsx("thead", { className: "sticky top-0 bg-muted", children: /* @__PURE__ */ jsx("tr", { children: visibleColumns.map((column) => /* @__PURE__ */ jsx("th", { className: "border-b border-border px-2 py-1.5 text-left font-medium", children: column }, column)) }) }),
+    /* @__PURE__ */ jsx("tbody", { children: data.rows.map((row, rowIndex) => /* @__PURE__ */ jsx("tr", { className: "odd:bg-muted/20", children: visibleColumns.map((column) => /* @__PURE__ */ jsx("td", { className: "border-b border-border/50 px-2 py-1.5 text-muted-foreground", children: String(row[column] ?? "") }, column)) }, rowIndex)) })
+  ] }) });
+}
+function Placeholder({ text, destructive }) {
+  return /* @__PURE__ */ jsx("div", { className: `flex h-52 items-center justify-center rounded-lg border border-dashed border-border bg-card text-sm ${destructive ? "text-destructive" : "text-muted-foreground"}`, children: text });
+}
+function createBiDashboardPaneProfile(queryData, controllerValues, setControllerValues) {
+  return defineGeneratedPaneProfile({
+    id: "bi-dashboard",
+    label: "BI Dashboard",
+    components: {
+      DashboardGrid: {
+        description: "Responsive dashboard grid for chart, table, metric, filter, and text widgets.",
+        slots: ["default"],
+        props: dashboardGridPropsSchema,
+        component: ({ props, children }) => /* @__PURE__ */ jsx("div", { className: `grid min-w-0 gap-4 ${gridColumnsClass(props.columns)}`, children })
+      },
+      BSLMetric: {
+        description: "Metric card bound to a BI query result field.",
+        props: bslMetricPropsSchema,
+        component: ({ props }) => {
+          const queryId = String(props.queryId);
+          const valueField = String(props.valueField);
+          const data = queryData[queryId];
+          const value = data?.rows[0]?.[valueField];
+          return /* @__PURE__ */ jsxs(Card, { className: "min-w-0", children: [
+            /* @__PURE__ */ jsxs(CardHeader, { className: "pb-2", children: [
+              /* @__PURE__ */ jsx(CardDescription, { children: String(props.label) }),
+              /* @__PURE__ */ jsxs(CardTitle, { className: "flex items-center gap-2 text-3xl", children: [
+                /* @__PURE__ */ jsx(Gauge, { className: "h-5 w-5 text-muted-foreground" }),
+                " ",
+                data?.loading ? "\u2026" : formatMetricValue(value, props.format)
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(CardContent, { className: "text-xs text-muted-foreground", children: data?.error ? /* @__PURE__ */ jsx("span", { className: "text-destructive", children: data.error }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              "query ",
+              /* @__PURE__ */ jsx("code", { children: queryId }),
+              " \xB7 field ",
+              /* @__PURE__ */ jsx("code", { children: valueField }),
+              data?.source ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                " \xB7 ",
+                data.source
+              ] }) : null
+            ] }) })
+          ] });
+        }
+      },
+      BSLChart: {
+        description: "Chart preview bound to a BI query result.",
+        props: bslChartPropsSchema,
+        component: ({ props }) => {
+          const queryId = String(props.queryId);
+          const data = queryData[queryId];
+          return /* @__PURE__ */ jsxs(Card, { className: "min-w-0", children: [
+            /* @__PURE__ */ jsxs(CardHeader, { children: [
+              /* @__PURE__ */ jsxs(CardTitle, { className: "flex items-center gap-2 text-base", children: [
+                /* @__PURE__ */ jsx(BarChart3, { className: "h-4 w-4" }),
+                " ",
+                typeof props.title === "string" ? props.title : queryId
+              ] }),
+              /* @__PURE__ */ jsxs(CardDescription, { children: [
+                String(props.renderer ?? "echarts"),
+                " \xB7 ",
+                String(props.chartType),
+                " \xB7 query ",
+                /* @__PURE__ */ jsx("code", { children: queryId }),
+                data?.source ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                  " \xB7 ",
+                  data.source
+                ] }) : null
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx(ChartPreview, { data, x: props.x, y: props.y, chartType: String(props.chartType) }) })
+          ] });
+        }
+      },
+      BSLPerspectiveViewer: {
+        description: "Table/Perspective-style viewer bound to a BI query result.",
+        props: bslPerspectiveViewerPropsSchema,
+        component: ({ props }) => {
+          const queryId = String(props.queryId);
+          const data = queryData[queryId];
+          return /* @__PURE__ */ jsxs(Card, { className: "min-w-0", children: [
+            /* @__PURE__ */ jsxs(CardHeader, { children: [
+              /* @__PURE__ */ jsxs(CardTitle, { className: "flex items-center gap-2 text-base", children: [
+                /* @__PURE__ */ jsx(Table2, { className: "h-4 w-4" }),
+                " ",
+                typeof props.title === "string" ? props.title : queryId
+              ] }),
+              /* @__PURE__ */ jsxs(CardDescription, { children: [
+                "Perspective ",
+                String(props.plugin ?? "Datagrid"),
+                " \xB7 query ",
+                /* @__PURE__ */ jsx("code", { children: queryId }),
+                data?.source ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                  " \xB7 ",
+                  data.source
+                ] }) : null
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx(DataTable, { data, columns: props.columns }) })
+          ] });
+        }
+      },
+      BSLFilter: {
+        description: "Dashboard filter control placeholder for target queries.",
+        props: bslFilterPropsSchema,
+        component: ({ props }) => {
+          const id = String(props.id);
+          const field = String(props.field);
+          const targets = props.targetQueries;
+          const options = [...new Set(targets.flatMap((queryId) => queryData[queryId]?.rows.map((row) => row[field]).filter((value) => value != null).map(String) ?? []))].sort((a, b) => a.localeCompare(b));
+          return /* @__PURE__ */ jsxs(Card, { className: "min-w-0 border-primary/25 bg-card", children: [
+            /* @__PURE__ */ jsxs(CardHeader, { children: [
+              /* @__PURE__ */ jsxs(CardTitle, { className: "flex items-center gap-2 text-base", children: [
+                /* @__PURE__ */ jsx(SlidersHorizontal, { className: "h-4 w-4 text-primary" }),
+                " ",
+                String(props.label ?? props.field)
+              ] }),
+              /* @__PURE__ */ jsxs(CardDescription, { children: [
+                String(props.controlType),
+                " controller \xB7 targets ",
+                targets.join(", ")
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsxs(
+              "select",
+              {
+                className: "w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground shadow-sm outline-none focus:ring-2 focus:ring-ring/40",
+                value: controllerValues[id] ?? "__all",
+                onChange: (event) => setControllerValues((previous) => ({ ...previous, [id]: event.target.value })),
+                children: [
+                  /* @__PURE__ */ jsxs("option", { value: "__all", children: [
+                    "All ",
+                    field
+                  ] }),
+                  options.map((option) => /* @__PURE__ */ jsx("option", { value: option, children: option }, option))
+                ]
+              }
+            ) })
+          ] });
+        }
+      },
+      BSLText: {
+        description: "Text/markdown explanation block for dashboard context.",
+        props: bslTextPropsSchema,
+        component: ({ props }) => /* @__PURE__ */ jsx(Card, { className: "min-w-0", children: /* @__PURE__ */ jsx(CardContent, { className: "p-4 text-sm text-muted-foreground", children: String(props.markdown) }) })
+      }
+    }
+  });
+}
+
+// src/front/index.ts
+import { createGeneratedPaneExplorerPane } from "@hachej/boring-generated-pane/front";
+
+// src/front/constants.ts
+var BI_DASHBOARD_PANEL_ID = "bi-dashboard.panel";
+var BI_DASHBOARD_LEFT_TAB_ID = "bi-dashboard.dashboards";
+
+// src/front/surfaceResolver.ts
+import {
+  WORKSPACE_OPEN_PATH_SURFACE_KIND
+} from "@hachej/boring-workspace/plugin";
+function isDashboardPath(path) {
+  return /(^|\/)dashboards\/[^/].*\.dashboard\.json$/i.test(path) || /\.dashboard\.json$/i.test(path);
+}
+function titleFromPath(path) {
+  const file = path.split("/").pop() ?? path;
+  return file.replace(/\.dashboard\.json$/i, "").replace(/[-_]+/g, " ");
+}
+var biDashboardSurfaceResolver = {
+  id: "bi-dashboard.open-path",
+  kind: WORKSPACE_OPEN_PATH_SURFACE_KIND,
+  source: "app",
+  resolve: (request) => {
+    if (request.kind !== WORKSPACE_OPEN_PATH_SURFACE_KIND) return null;
+    const target = String(request.target ?? "");
+    if (!isDashboardPath(target)) return null;
+    return {
+      component: BI_DASHBOARD_PANEL_ID,
+      title: titleFromPath(target),
+      params: { path: target },
+      score: 110
+    };
+  }
+};
+
+// src/front/DashboardFilesPane.tsx
+import { useEffect as useEffect3, useMemo as useMemo3, useState as useState3 } from "react";
+import { FileJson2, LayoutDashboard, RefreshCw } from "lucide-react";
+import { Badge, EmptyState as EmptyState2, IconButton as IconButton2 } from "@hachej/boring-ui-kit";
+import { useApiBaseUrl as useApiBaseUrl2, useWorkspaceRequestId as useWorkspaceRequestId2 } from "@hachej/boring-workspace";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function titleFromPath2(path) {
+  const file = path.split("/").pop() ?? path;
+  return file.replace(/\.dashboard\.json$/i, "").replace(/[-_]+/g, " ");
+}
+function matchesQuery(path, query) {
+  const value = query?.trim().toLowerCase();
+  if (!value) return true;
+  return path.toLowerCase().includes(value) || titleFromPath2(path).toLowerCase().includes(value);
+}
+function DashboardFilesPane({ params, containerApi }) {
+  const apiBaseUrl = useApiBaseUrl2();
+  const workspaceId = useWorkspaceRequestId2();
+  const [state, setState] = useState3({ loading: true, paths: [] });
+  const [refreshKey, setRefreshKey] = useState3(0);
+  useEffect3(() => {
+    const controller = new AbortController();
+    setState((prev) => ({ ...prev, loading: true, error: void 0 }));
+    void fetch(`${apiBaseUrl}/api/v1/files/search?q=**%2F*.dashboard.json&limit=500`, {
+      signal: controller.signal,
+      credentials: "include",
+      headers: workspaceId ? { "x-boring-workspace-id": workspaceId } : {}
+    }).then(async (response) => {
+      if (!response.ok) throw new Error(`Dashboard search failed with HTTP ${response.status}`);
+      return await response.json();
+    }).then((body) => {
+      setState({
+        loading: false,
+        paths: [...new Set(body.results ?? [])].sort((a, b) => a.localeCompare(b))
+      });
+    }).catch((error) => {
+      if (controller.signal.aborted) return;
+      setState({ loading: false, paths: [], error: error instanceof Error ? error.message : String(error) });
+    });
+    return () => controller.abort();
+  }, [apiBaseUrl, refreshKey, workspaceId]);
+  const paths = useMemo3(
+    () => state.paths.filter((path) => matchesQuery(path, params?.searchQuery)),
+    [params?.searchQuery, state.paths]
+  );
+  const openDashboard = (path) => {
+    containerApi.addPanel({
+      id: `${BI_DASHBOARD_PANEL_ID}:${path}`,
+      component: BI_DASHBOARD_PANEL_ID,
+      title: titleFromPath2(path),
+      params: { path }
+    });
+  };
+  return /* @__PURE__ */ jsxs2("div", { className: "flex h-full min-h-0 flex-col text-sm", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between border-b border-border/60 px-3 py-2", children: [
+      /* @__PURE__ */ jsxs2("div", { className: "flex min-w-0 items-center gap-2", children: [
+        /* @__PURE__ */ jsx2(LayoutDashboard, { className: "h-4 w-4 text-muted-foreground" }),
+        /* @__PURE__ */ jsx2("span", { className: "truncate font-medium", children: "Dashboards" }),
+        /* @__PURE__ */ jsx2(Badge, { variant: "secondary", children: state.paths.length })
+      ] }),
+      /* @__PURE__ */ jsx2(
+        IconButton2,
+        {
+          type: "button",
+          "aria-label": "Refresh dashboards",
+          variant: "ghost",
+          size: "icon-xs",
+          onClick: () => setRefreshKey((value) => value + 1),
+          disabled: state.loading,
+          children: /* @__PURE__ */ jsx2(RefreshCw, { className: `h-3.5 w-3.5 ${state.loading ? "animate-spin" : ""}` })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx2("div", { className: "min-h-0 flex-1 overflow-auto p-2", children: state.error ? /* @__PURE__ */ jsx2(EmptyState2, { title: "Could not list dashboards", description: state.error }) : state.loading ? /* @__PURE__ */ jsx2("div", { className: "px-2 py-3 text-xs text-muted-foreground", children: "Scanning dashboards\u2026" }) : paths.length === 0 ? /* @__PURE__ */ jsx2(
+      EmptyState2,
+      {
+        title: "No dashboards found",
+        description: "Create files under dashboards/*.dashboard.json to list them here."
+      }
+    ) : /* @__PURE__ */ jsx2("div", { className: "space-y-1", children: paths.map((path) => /* @__PURE__ */ jsxs2(
+      "button",
+      {
+        type: "button",
+        onClick: () => openDashboard(path),
+        className: "flex w-full min-w-0 items-start gap-2 rounded-lg px-2 py-2 text-left hover:bg-background/70 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40",
+        children: [
+          /* @__PURE__ */ jsx2(FileJson2, { className: "mt-0.5 h-4 w-4 shrink-0 text-muted-foreground" }),
+          /* @__PURE__ */ jsxs2("span", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsx2("span", { className: "block truncate text-[13px] font-medium text-foreground", children: titleFromPath2(path) }),
+            /* @__PURE__ */ jsx2("span", { className: "block truncate text-[11px] text-muted-foreground", children: path })
+          ] })
+        ]
+      },
+      path
+    )) }) })
+  ] });
+}
+
+// src/front/index.ts
+var biDashboardPlugin = definePlugin({
+  id: "bi-dashboard",
+  label: "BI Dashboard",
+  panels: [
+    {
+      id: BI_DASHBOARD_PANEL_ID,
+      label: "BI Dashboard",
+      icon: LayoutDashboard2,
+      component: BiDashboardPane,
+      supportsFullPage: true
+    }
+  ],
+  leftTabs: [
+    {
+      id: BI_DASHBOARD_LEFT_TAB_ID,
+      title: "Dashboards",
+      panelId: BI_DASHBOARD_LEFT_TAB_ID,
+      icon: LayoutDashboard2,
+      component: createGeneratedPaneExplorerPane({
+        title: "Dashboards",
+        patterns: ["**/*.dashboard.json"],
+        panelId: BI_DASHBOARD_PANEL_ID,
+        itemLabel: "Dashboard",
+        emptyDescription: "Create dashboards/*.dashboard.json files to list BI dashboards here."
+      }),
+      chromeless: true
+    }
+  ],
+  surfaceResolvers: [biDashboardSurfaceResolver],
+  commands: [
+    {
+      id: "bi-dashboard.open",
+      title: "Open BI Dashboard",
+      panelId: BI_DASHBOARD_PANEL_ID,
+      keywords: ["bsl", "business intelligence", "dashboard", "perspective", "echarts"]
+    }
+  ]
+});
+var front_default = biDashboardPlugin;
+export {
+  BI_DASHBOARD_LEFT_TAB_ID,
+  BI_DASHBOARD_PANEL_ID,
+  BiDashboardPane,
+  DashboardFilesPane,
+  biDashboardPlugin,
+  biDashboardSurfaceResolver,
+  front_default as default,
+  sampleBiDashboardSpec
+};