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

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],
@@ -566,6 +576,7 @@ export default function DashboardEditorPage({
                     }}
                     templateMap={templateMap}
                     showParameterBar={showParameterBar}
+                    parameterSourceMap={parameterSourceMap}
                   />
                 </div>
               );

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

@@ -20,6 +20,8 @@ import {
 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";
@@ -192,13 +194,21 @@ 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],
@@ -412,6 +422,7 @@ export default function DashboardViewerPage({
                 refetchInterval={refetchInterval}
                 actions={{ 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

@@ -3,12 +3,13 @@
 import { useWidgetQuery } from "@/hooks/use-widget-query";
 import { resolveCacheOptions } from "@/lib/resolve-cache-options";
 import { getChartConfig } from "@/lib/chart-registry";
-import type { ColumnMapping } 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 type { ColorScaleConfig } from "@neoboard/components";
 import {
   useParameterStore,
@@ -18,6 +19,9 @@ 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 {
@@ -26,6 +30,9 @@ import {
   AlertDescription,
   AlertTitle,
   Button,
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
 } from "@neoboard/components";
 import {
   EmptyState,
@@ -60,10 +67,12 @@ interface CardContainerProps {
   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;
 }
 
 /**
@@ -78,6 +87,74 @@ function extractColumnNames(data: unknown): string[] {
   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.
@@ -95,6 +172,7 @@ export function CardContainer({
   refetchInterval,
   onNavigateToPage,
   autoFit,
+  parameterSourceMap,
 }: CardContainerProps) {
   const chartConfig = getChartConfig(widget.chartType);
 
@@ -141,6 +219,12 @@ export function CardContainer({
     [ws.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],
@@ -245,10 +329,13 @@ export function CardContainer({
         />
       );
     }
-    const transformedData = chartConfig.transformWithMapping(
+    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">
@@ -392,12 +479,12 @@ export function CardContainer({
           {missingParams.length > 0 && (
             <div className="flex flex-wrap justify-center gap-1.5">
               {missingParams.map((name) => (
-                <code
+                <MissingParamBadge
                   key={name}
-                  className="rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-foreground"
-                >
-                  $param_{name}
-                </code>
+                  name={name}
+                  parameterSourceMap={parameterSourceMap}
+                  onNavigateToPage={onNavigateToPage}
+                />
               ))}
             </div>
           )}
@@ -459,10 +546,10 @@ export function CardContainer({
     );
   }
 
-  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,19 @@ import { useState, useMemo, useCallback } from "react";
 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,
@@ -47,7 +53,9 @@ export interface WidgetActions {
     widgetId: string,
     settings: Record<string, unknown>,
   ) => void;
-  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;
   onSyncWidget?: (widget: DashboardWidget) => void;
   onDetachWidget?: (widgetId: string) => void;
@@ -60,6 +68,8 @@ interface DashboardContainerProps {
   refetchInterval?: number | false;
   templateMap?: Record<string, WidgetTemplate>;
   showParameterBar?: boolean;
+  /** Maps parameter names to the widgets that set them (for clickable badges). */
+  parameterSourceMap?: ParameterSourceMap;
 }
 
 function getWidgetTitle(widget: DashboardWidget): string {
@@ -75,6 +85,7 @@ export function DashboardContainer({
   refetchInterval,
   templateMap,
   showParameterBar = true,
+  parameterSourceMap,
 }: DashboardContainerProps) {
   const {
     onRemoveWidget,
@@ -139,9 +150,39 @@ export function DashboardContainer({
     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",
@@ -285,6 +326,7 @@ export function DashboardContainer({
                     }
                     refetchInterval={refetchInterval}
                     onNavigateToPage={onNavigateToPage}
+                    parameterSourceMap={parameterSourceMap}
                   />
                 </WidgetCard>
               </div>
@@ -312,6 +354,7 @@ export function DashboardContainer({
                     widget={fullscreenWidget}
                     refetchInterval={refetchInterval}
                     onNavigateToPage={onNavigateToPage}
+                    parameterSourceMap={parameterSourceMap}
                     autoFit
                   />
                 ) : (