feat: app features — CSV export, GFM tables, param badges, data transforms

app/e2e/fixtures.ts

@@ -148,8 +148,9 @@
       return;
     }
 
-    // Strategy 2: Keyboard fallback (for environments where cmView is not accessible)
-    if (dispatched === "no-view") {
+    // Strategy 2: Keyboard fallback (for environments where cmView is not accessible
+    // or when the view is temporarily readonly during initialization)
+    if (dispatched === "no-view" || dispatched === "readonly") {
       await expect(cm).toHaveAttribute("contenteditable", "true", { timeout: 2_000 });
       await cm.click();
       await page.keyboard.press("ControlOrMeta+a");
@@ -162,9 +163,9 @@
       return;
     }
 
-    // Retry-worthy states: no-editor, readonly, dispatch-failed
+    // Retry-worthy states: no-editor, dispatch-failed
     throw new Error(`CM6 dispatch returned "${dispatched}" — retrying`);
   }).toPass({ timeout: 20_000 });
 }
 
 /**

app/src/app/(dashboard)/[id]/edit/page.tsx

@@ -21,6 +21,8 @@ import { useConnections } from "@/hooks/use-connections";
 import { useUnsavedChangesWarning } from "@/hooks/use-unsaved-changes-warning";
 import { useParameterStore } from "@/stores/parameter-store";
 import { filterParentParams } from "@/lib/format-parameter-value";
+import { buildParameterSourceMap } from "@/lib/collect-parameter-names";
+import { scrollToWidgetWhenReady } from "@/lib/scroll-to-widget";
 import { useDashboardStore } from "@/stores/dashboard-store";
 import { useWidgetTemplates } from "@/hooks/use-widget-templates";
 import { DashboardContainer } from "@/components/dashboard-container";
@@ -148,12 +150,20 @@ export default function DashboardEditorPage({
     requestNavigation,
   } = useUnsavedChangesWarning();
 
+  const parameterSourceMap = useMemo(
+    () => buildParameterSourceMap(layout),
+    [layout],
+  );
+
   const handleNavigateToPage = useCallback(
-    (pageId: string) => {
+    (pageId: string, scrollToWidgetId?: string) => {
       const index = layout.pages.findIndex((p) => p.id === pageId);
       if (index >= 0) {
         markVisited(index);
         setActivePage(index);
+        if (scrollToWidgetId) {
+          scrollToWidgetWhenReady(scrollToWidgetId);
+        }
       }
     },
     [layout.pages, setActivePage],
@@ -552,6 +562,7 @@ export default function DashboardEditorPage({
                     onSyncWidget={handleSyncWidget}
                     onDetachWidget={handleDetachWidget}
                     showParameterBar={showParameterBar}
+                    parameterSourceMap={parameterSourceMap}
                   />
                 </div>
               );

app/src/app/(dashboard)/[id]/page.tsx

@@ -6,6 +6,8 @@ import { ArrowLeft, Filter, Pencil, LayoutDashboard, RefreshCw } from "lucide-re
 import { useDashboard, useUpdateDashboard } from "@/hooks/use-dashboards";
 import { useParameterStore } from "@/stores/parameter-store";
 import { filterParentParams } from "@/lib/format-parameter-value";
+import { buildParameterSourceMap } from "@/lib/collect-parameter-names";
+import { scrollToWidgetWhenReady } from "@/lib/scroll-to-widget";
 import { DashboardContainer } from "@/components/dashboard-container";
 import { PageTabs } from "@/components/page-tabs";
 import { migrateLayout } from "@/lib/migrate-layout";
@@ -164,16 +166,24 @@ export default function DashboardViewerPage({
     ? `${intervalLabel} · ${formatCountdown(countdown)}`
     : intervalLabel;
 
+  const parameterSourceMap = useMemo(
+    () => (layout ? buildParameterSourceMap(layout) : {}),
+    [layout],
+  );
+
   const handleNavigateToPage = useCallback(
-    (pageId: string) => {
+    (pageId: string, scrollToWidgetId?: string) => {
       if (!layout) return;
       const index = layout.pages.findIndex((p) => p.id === pageId);
       if (index >= 0) {
         markVisited(index);
         setActivePageIndex(index);
+        if (scrollToWidgetId) {
+          scrollToWidgetWhenReady(scrollToWidgetId);
+        }
       }
     },
-    [layout]
+    [layout],
   );
 
   if (isLoading) {
@@ -350,7 +360,7 @@ export default function DashboardViewerPage({
               className={isActive ? undefined : "hidden"}
               aria-hidden={!isActive}
             >
-              <DashboardContainer page={page} refetchInterval={refetchInterval} onNavigateToPage={handleNavigateToPage} showParameterBar={showParameterBar} />
+              <DashboardContainer page={page} refetchInterval={refetchInterval} onNavigateToPage={handleNavigateToPage} showParameterBar={showParameterBar} parameterSourceMap={parameterSourceMap} />
             </div>
           );
         })}

app/src/app/globals.css

@@ -12,3 +12,13 @@
     @apply bg-background text-foreground;
   }
 }
+
+@keyframes widget-highlight-pulse {
+  0%   { box-shadow: 0 0 0 0 hsl(var(--primary) / 0.5); }
+  50%  { box-shadow: 0 0 0 4px hsl(var(--primary) / 0.3); }
+  100% { box-shadow: 0 0 0 0 hsl(var(--primary) / 0); }
+}
+
+.widget-highlight {
+  animation: widget-highlight-pulse 1.5s ease-out;
+}

app/src/components/card-container.tsx

@@ -5,8 +5,12 @@
 import { getChartConfig } from "@/lib/chart-registry";
 import type { ChartType, ColumnMapping } from "@/lib/chart-registry";
 import type { DashboardWidget, ClickAction, StylingConfig } from "@/lib/db/schema";
+import type { ParameterSourceMap } from "@/lib/collect-parameter-names";
 import { useParameterStore, useParameterValues } from "@/stores/parameter-store";
 import { resolveClickActions, deriveClickableColumns } from "@/lib/resolve-click-action";
+import { scrollAndHighlight } from "@/lib/scroll-to-widget";
+import { applyTransforms } from "@/lib/data-transforms";
+import type { Transform } from "@/lib/data-transforms";
 import React, { useMemo, useCallback, useState } from "react";
 import { AlertCircle, Play } from "lucide-react";
 import {
@@ -15,6 +19,9 @@
   AlertDescription,
   AlertTitle,
   Button,
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
 } from "@neoboard/components";
 import {
   EmptyState,
@@ -46,10 +53,12 @@
   onWidgetSettingsChange?: (settings: Record<string, unknown>) => void;
   /** TanStack Query refetchInterval — periodically re-executes the widget query. */
   refetchInterval?: number | false;
-  /** Called when a click action navigates to a different page. */
-  onNavigateToPage?: (pageId: string) => void;
+  /** Called when a click action navigates to a different page. Optionally scrolls to a widget. */
+  onNavigateToPage?: (pageId: string, scrollToWidgetId?: string) => void;
   /** When true, graph widgets trigger a fit-to-viewport after mount. */
   autoFit?: boolean;
+  /** Maps parameter names to the widgets that set them (for clickable badges). */
+  parameterSourceMap?: ParameterSourceMap;
 }
 
 /**
@@ -64,6 +73,74 @@
   return Object.keys(first);
 }
 
+/**
+ * Renders a parameter badge in the "Waiting for parameters" section.
+ * When source widgets exist, shows a clickable badge with a popover listing
+ * which widgets set that parameter and enabling navigation to them.
+ */
+function MissingParamBadge({
+  name,
+  parameterSourceMap,
+  onNavigateToPage,
+}: {
+  name: string;
+  parameterSourceMap?: ParameterSourceMap;
+  onNavigateToPage?: (pageId: string, scrollToWidgetId?: string) => void;
+}) {
+  const sources = parameterSourceMap?.[name];
+
+  if (!sources || sources.length === 0) {
+    return (
+      <code className="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground">
+        $param_{name}
+      </code>
+    );
+  }
+
+  function handleNavigateToWidget(pageId: string, widgetId: string) {
+    // Try same-page scroll first
+    if (scrollAndHighlight(widgetId)) return;
+    // Cross-page navigation
+    onNavigateToPage?.(pageId, widgetId);
+  }
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <button
+          type="button"
+          className="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground hover:bg-accent cursor-pointer transition-colors"
+        >
+          $param_{name}
+        </button>
+      </PopoverTrigger>
+      <PopoverContent className="w-64 p-3" align="center">
+        <p className="text-xs font-medium text-muted-foreground mb-2">
+          Set by {sources.length} widget{sources.length !== 1 ? "s" : ""}
+        </p>
+        <ul className="space-y-1">
+          {sources.map((source) => (
+            <li key={`${source.pageId}-${source.widgetId}`}>
+              <button
+                type="button"
+                className="w-full text-left rounded px-2 py-1.5 text-sm hover:bg-accent transition-colors"
+                onClick={() =>
+                  handleNavigateToWidget(source.pageId, source.widgetId)
+                }
+              >
+                <span className="font-medium">{source.widgetTitle}</span>
+                <span className="text-muted-foreground text-xs ml-1">
+                  ({source.pageTitle})
+                </span>
+              </button>
+            </li>
+          ))}
+        </ul>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
 /**
  * CardContainer: Fetches query results and renders the appropriate chart.
  * Uses React Query caching so queries are deduplicated across view->edit navigation.
@@ -81,6 +158,7 @@
   refetchInterval,
   onNavigateToPage,
   autoFit,
+  parameterSourceMap,
 }: CardContainerProps) {
   const chartConfig = getChartConfig(widget.chartType);
 
@@ -117,6 +195,12 @@
     [widget.settings?.chartOptions],
   );
 
+  // Client-side transforms pipeline (applied post-query, pre-render)
+  const dataTransforms = useMemo(
+    () => (widget.settings?.transforms ?? []) as Transform[],
+    [widget.settings?.transforms],
+  );
+
   const { staleTime, gcTime } = useMemo(
     () => resolveCacheOptions(chartOptions, enableCache, cacheTtlMinutes),
     [chartOptions, enableCache, cacheTtlMinutes],
@@ -208,7 +292,10 @@
         />
       );
     }
-    const transformedData = chartConfig.transformWithMapping(previewData, columnMapping);
+    const mappedData = chartConfig.transformWithMapping(previewData, columnMapping);
+    const transformedData = dataTransforms.length
+      ? applyTransforms(mappedData as Record<string, unknown>[], dataTransforms)
+      : mappedData;
     const availableColumns = extractColumnNames(previewData);
     return (
       <div className="h-full w-full flex flex-col">
@@ -338,9 +425,12 @@
           {missingParams.length > 0 && (
             <div className="flex flex-wrap justify-center gap-1.5">
               {missingParams.map((name) => (
-                <code key={name} className="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground">
-                  $param_{name}
-                </code>
+                <MissingParamBadge
+                  key={name}
+                  name={name}
+                  parameterSourceMap={parameterSourceMap}
+                  onNavigateToPage={onNavigateToPage}
+                />
               ))}
             </div>
           )}
@@ -399,7 +489,10 @@
     );
   }
 
-  const transformedData = chartConfig.transformWithMapping(rawData, columnMapping);
+  const mappedData = chartConfig.transformWithMapping(rawData, columnMapping);
+  const transformedData = dataTransforms.length
+    ? applyTransforms(mappedData as Record<string, unknown>[], dataTransforms)
+    : mappedData;
   const availableColumns = extractColumnNames(rawData);
 
   return (

app/src/components/dashboard-container.tsx

@@ -4,13 +4,15 @@
 import { useQueryClient } from "@tanstack/react-query";
 import { CardContainer } from "./card-container";
 import { getChartConfig } from "@/lib/chart-registry";
+import { buildCsvString, triggerDownload, buildExportFilename } from "@neoboard/components";
 import { interpolateTitle } from "@/lib/interpolate-title";
 import type {
   DashboardPage,
   DashboardWidget,
   GridLayoutItem,
   WidgetTemplate,
 } from "@/lib/db/schema";
+import type { ParameterSourceMap } from "@/lib/collect-parameter-names";
 import { useParameterStore } from "@/stores/parameter-store";
 import {
   formatParameterValue,
@@ -35,7 +37,7 @@
   AlertDialogFooter,
   AlertDialogHeader,
   AlertDialogTitle,
 } from "@neoboard/components";
 
 interface DashboardContainerProps {
   /** The active page to render. */
@@ -55,8 +57,8 @@
   ) => void;
   /** TanStack Query refetchInterval — periodically re-executes all widget queries. */
   refetchInterval?: number | false;
-  /** Called when a click action navigates to a different page. */
-  onNavigateToPage?: (pageId: string) => void;
+  /** Called when a click action navigates to a different page. Optionally scrolls to a widget. */
+  onNavigateToPage?: (pageId: string, scrollToWidgetId?: string) => void;
   /** Called when the user chooses "Save to Widget Lab" for a widget. */
   onSaveAsTemplate?: (widget: DashboardWidget) => void;
   /** Map of template ID → template for outdated-sync detection. */
@@ -67,6 +69,8 @@
   onDetachWidget?: (widgetId: string) => void;
   /** When false, the parameter bar is hidden. Defaults to true. */
   showParameterBar?: boolean;
+  /** Maps parameter names to the widgets that set them (for clickable badges). */
+  parameterSourceMap?: ParameterSourceMap;
 }
 
 function getWidgetTitle(widget: DashboardWidget): string {
@@ -91,6 +95,7 @@
   onSyncWidget,
   onDetachWidget,
   showParameterBar = true,
+  parameterSourceMap,
 }: DashboardContainerProps) {
   const queryClient = useQueryClient();
   const [fullscreenWidget, setFullscreenWidget] =
@@ -144,9 +149,31 @@
     return new Date(tmpl.updatedAt) > new Date(widget.templateSyncedAt);
   }
 
+  function exportWidgetCsv(widget: DashboardWidget) {
+    const cached = queryClient.getQueryData<{ data: unknown }>([
+      "widget-query",
+      widget.connectionId,
+      widget.query,
+      widget.params,
+    ]);
+    const rawData = cached?.data;
+    if (!Array.isArray(rawData) || rawData.length === 0) return;
+    const csv = buildCsvString(rawData as Record<string, unknown>[]);
+    const title = (widget.settings?.title as string) || widget.chartType;
+    const filename = buildExportFilename(title, "csv", page.title);
+    triggerDownload(csv, filename);
+  }
+
   const buildActions = (widget: DashboardWidget) => {
-    if (!editable) return undefined;
     const actions = [];
+
+    // Export CSV — available for data-producing widgets in both edit and view mode
+    const isDataWidget = !["markdown", "iframe", "form", "parameter-select"].includes(widget.chartType);
+    if (isDataWidget) {
+      actions.push({ label: "Export CSV", onClick: () => exportWidgetCsv(widget) });
+    }
+
+    if (!editable) return actions.length > 0 ? actions : undefined;
     if (onEditWidget) {
       actions.push({
         label: "Edit",
@@ -290,6 +317,7 @@
                   }
                   refetchInterval={refetchInterval}
                   onNavigateToPage={onNavigateToPage}
+                  parameterSourceMap={parameterSourceMap}
                 />
               </WidgetCard>
             </div>
@@ -317,6 +345,7 @@
                     widget={fullscreenWidget}
                     refetchInterval={refetchInterval}
                     onNavigateToPage={onNavigateToPage}
+                    parameterSourceMap={parameterSourceMap}
                     autoFit
                   />
                 ) : (