@docyrus/ui-pro-ai-assistant 0.0.1

package/src/views/canvas-app.tsx

@@ -0,0 +1,839 @@
+'use client';
+
+import { useState } from 'react';
+
+import {
+  ChevronDown, ChevronRight, FolderOpen, LayoutDashboard, Menu, Table2
+} from 'lucide-react';
+
+import {
+  Bar,
+  BarChart,
+  Cell,
+  Legend,
+  Line,
+  LineChart,
+  Pie,
+  PieChart,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis
+} from 'recharts';
+
+import { Button } from '@docyrus/ui-pro-shared/components/button';
+import { cn } from '@docyrus/ui-pro-shared/lib/utils';
+
+import { MermaidDiagram } from '../components/mermaid-diagram';
+
+/*
+ * ─────────────────────────────────────────────────────────────
+ * Mermaid generators (ported from mermaid-generator.js)
+ * ─────────────────────────────────────────────────────────────
+ */
+
+function generateLayoutDiagram(app: any): string {
+  if (!app?.layout) return '';
+  const { layout } = app;
+  let d = 'graph LR\n';
+  const menuArr: any[] = Array.isArray(layout.menu) ? layout.menu : Object.values(layout.menu ?? {});
+  const widgetsArr: any[] = Array.isArray(layout.widgets) ? layout.widgets : Object.values(layout.widgets ?? {});
+
+  d += `  App["${layout.title || 'App'}"]\n`;
+  menuArr.forEach((item: any, i: number) => {
+    const mid = `Menu_${i}`;
+
+    d += `  subgraph cluster_${mid}\n    direction TB\n    ${mid}["${item.title || item.id}"]\n`;
+    item.views?.forEach((v: any, j: number) => {
+      const vid = `View_${i}_${j}`;
+
+      d += `    ${vid}["${v.title || v.id} (${v.type})"]\n    ${mid} --> ${vid}\n`;
+    });
+    d += `  end\n  App --> ${mid}\n`;
+  });
+  if (widgetsArr.length > 0) {
+    d += `  subgraph cluster_Widgets\n    direction TB\n    Widgets[Widgets]\n`;
+    widgetsArr.forEach((w: any, i: number) => {
+      d += `    Widget_${i}["${w.title || w.type}"]\n    Widgets --> Widget_${i}\n`;
+    });
+    d += `  end\n  App -.-> Widgets\n`;
+  }
+
+  return d;
+}
+
+function generateDataStructureDiagram(app: any): string {
+  if (!app?.data_sources) return '';
+
+  const dsArr: any[] = Array.isArray(app.data_sources) ? app.data_sources : Object.values(app.data_sources);
+  let d = 'classDiagram\n  direction TB\n';
+  const idMap: Record<string, string> = {};
+
+  dsArr.forEach((ds: any) => {
+    const safe = (ds.name || ds.slug || 'DS').replace(/[^a-zA-Z0-9_]/g, '_');
+    const key = ds.id || ds.slug || ds.name;
+
+    if (key) idMap[key] = safe;
+  });
+  dsArr.forEach((ds: any) => {
+    const safe = (ds.name || ds.slug || 'DS').replace(/[^a-zA-Z0-9_]/g, '_');
+    const fieldsArr: any[] = Array.isArray(ds.fields) ? ds.fields : Object.values(ds.fields ?? {});
+
+    d += `  class ${safe} {\n`;
+    fieldsArr.forEach((f: any) => {
+      d += `    +${f.type || 'string'} ${f.name || f.slug}\n`;
+    });
+    d += '  }\n';
+    fieldsArr.forEach((f: any) => {
+      if (f.type === 'field-relation' && f.relationDataSourceId) {
+        const target = idMap[f.relationDataSourceId];
+
+        if (target) d += `  ${safe} --> ${target} : ${f.name || f.slug}\n`;
+      }
+    });
+  });
+
+  return d;
+}
+
+/*
+ * ─────────────────────────────────────────────────────────────
+ * AppSidebar
+ * ─────────────────────────────────────────────────────────────
+ */
+
+function AppSidebar({
+  data, title, onMenuClick
+}: {
+  data: any[];
+  title?: string;
+  onMenuClick: (id: string) => void;
+}) {
+  const [collapsed, setCollapsed] = useState(false);
+  const [expanded, setExpanded] = useState<Set<string>>(new Set());
+
+  const toggleFolder = (id: string) => {
+    if (collapsed) {
+      setCollapsed(false);
+      setExpanded(prev => new Set([...prev, id]));
+
+      return;
+    }
+    setExpanded((prev) => {
+      const next = new Set(prev);
+
+      next.has(id) ? next.delete(id) : next.add(id);
+
+      return next;
+    });
+  };
+
+  return (
+    <aside
+      className={cn(
+        'h-full bg-white border-r border-gray-200 transition-all duration-300 flex flex-col shrink-0',
+        collapsed ? 'w-12' : 'w-52'
+      )}>
+      {/* Header */}
+      <div className="flex items-center justify-between px-2 py-1.5 border-b border-gray-200 h-9 shrink-0">
+        {!collapsed && (
+          <span className="grow text-sm font-semibold text-gray-900 truncate mr-1">{title}</span>
+        )}
+        <Button
+          variant="ghost"
+          size="icon"
+          className="h-6 w-6 shrink-0"
+          onClick={() => setCollapsed(v => !v)}>
+          <Menu className="size-3.5" />
+        </Button>
+      </div>
+
+      {/* Nav */}
+      <nav className="flex-1 overflow-y-auto p-1.5 space-y-0.5">
+        {data.map((item: any) => {
+          if (item.type === 'folder') {
+            const isExp = expanded.has(item.id);
+
+            return (
+              <div key={item.id}>
+                <button
+                  onClick={() => toggleFolder(item.id)}
+                  className="w-full flex items-center gap-2 px-2 py-1.5 rounded-md hover:bg-gray-100 text-left text-sm">
+                  <FolderOpen className="size-4 text-gray-500 shrink-0" />
+                  {!collapsed && (
+                    <>
+                      <span className="flex-1 truncate text-gray-900 font-medium">{item.title}</span>
+                      {isExp ? <ChevronDown className="size-3 text-gray-400" /> : <ChevronRight className="size-3 text-gray-400" />}
+                    </>
+                  )}
+                </button>
+                {!collapsed && isExp && (
+                  <div className="ml-4 mt-0.5 space-y-0.5">
+                    {item.menu?.map((sub: any) => (
+                      <button
+                        key={sub.id}
+                        onClick={() => { onMenuClick(sub.id); }}
+                        className="w-full flex items-center gap-2 px-2 py-1.5 rounded-md hover:bg-gray-100 text-left text-sm text-gray-700">
+                        <span className="truncate">{sub.title}</span>
+                      </button>
+                    ))}
+                  </div>
+                )}
+              </div>
+            );
+          }
+
+          return (
+            <button
+              key={item.id}
+              onClick={() => { onMenuClick(item.id); }}
+              title={collapsed ? item.title : undefined}
+              className="w-full flex items-center gap-2 px-2 py-1.5 rounded-md hover:bg-gray-100 text-left text-sm">
+              <LayoutDashboard className="size-4 text-gray-500 shrink-0" />
+              {!collapsed && (
+                <span className="truncate text-gray-900 font-medium">{item.title}</span>
+              )}
+            </button>
+          );
+        })}
+      </nav>
+    </aside>
+  );
+}
+
+/*
+ * ─────────────────────────────────────────────────────────────
+ * AppBoardView — simplified board (shows columns/fields as table)
+ * ─────────────────────────────────────────────────────────────
+ */
+
+function AppBoardView({ page, dataSources }: { page: any; dataSources: any[] }) {
+  const [activeViewIdx, setActiveViewIdx] = useState(0);
+  const views = page?.views ?? [];
+  const activeView = views[activeViewIdx];
+  const dsId = activeView?.config?.dataSourceId ?? activeView?.dataSourceId;
+  const ds = dsId ? dataSources.find(
+    (d: any) => d.id === dsId
+      || d.slug === dsId
+      || d.name === dsId
+  ) ?? dataSources[0] ?? null : dataSources[0] ?? null;
+
+  // Columns: from view config, falling back to data source fields
+  const columns: any[] = activeView?.config?.columns ?? activeView?.columns ?? ds?.fields ?? [];
+
+  // DEBUG
+  console.info('[AppBoardView] dsId', dsId, 'ds.id', ds?.id, 'records', ds?.records?.length);
+  console.info('[AppBoardView] columns[0]', columns[0], 'record[0] keys', Object.keys(ds?.records?.[0] ?? {}));
+
+  // Records: dummy data from the data source
+  const records: any[] = ds?.records ?? [];
+
+  const getCellValue = (record: any, col: any): string => {
+    // column.field is the primary key (from view config), fallback to slug/id/name
+    const key = col.field || col.slug || col.id || col.name || col;
+    const val = record[key];
+
+    if (val === null || val === undefined) return '';
+    // Relation fields: {id, name} → show name
+    if (typeof val === 'object' && !Array.isArray(val)) return val.name ?? JSON.stringify(val);
+    if (Array.isArray(val)) return val.map((v: any) => v?.name ?? v).join(', ');
+
+    return String(val);
+  };
+
+  return (
+    <div className="flex flex-col h-full w-full overflow-hidden">
+      <div className="flex items-center gap-2 px-3 py-2 border-b bg-muted/30 shrink-0">
+        <Table2 className="size-4 text-muted-foreground" />
+        <span className="text-sm font-medium">{page.title}</span>
+      </div>
+      {views.length > 1 && (
+        <div className="flex gap-1 px-3 py-1 border-b shrink-0">
+          {views.map((v: any, i: number) => (
+            <button
+              key={v.id || i}
+              onClick={() => setActiveViewIdx(i)}
+              className={cn(
+                'px-2 py-0.5 rounded text-xs',
+                activeViewIdx === i ? 'bg-primary text-primary-foreground' : 'hover:bg-muted text-muted-foreground'
+              )}>
+              {v.title || v.type}
+            </button>
+          ))}
+        </div>
+      )}
+      <div className="flex-1 overflow-auto p-3">
+        {columns.length > 0 ? (
+          <table className="w-full text-xs border border-gray-200">
+            <thead className="bg-gray-50">
+              <tr>
+                {columns.map((col: any, i: number) => (
+                  <th key={i} className="border border-gray-200 px-2 py-1 text-left font-medium text-gray-700">
+                    {col.name || col.title || col.slug || col}
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {records.length > 0 ? records.map((record: any, ri: number) => (
+                <tr key={ri} className="hover:bg-gray-50">
+                  {columns.map((col: any, ci: number) => (
+                    <td key={ci} className="border border-gray-200 px-2 py-1 max-w-[200px] truncate">
+                      {getCellValue(record, col)}
+                    </td>
+                  ))}
+                </tr>
+              )) : (
+                <tr>
+                  {columns.map((_: any, i: number) => (
+                    <td key={i} className="border border-gray-200 px-2 py-1 text-gray-400 italic">—</td>
+                  ))}
+                </tr>
+              )}
+            </tbody>
+          </table>
+        ) : (
+          <div className="text-sm text-muted-foreground text-center py-8">
+            {ds ? `Data source: ${ds.title || ds.slug}` : 'No view data available'}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+/*
+ * ─────────────────────────────────────────────────────────────
+ * AppDashboardPreview — widget cards with dot background
+ * ─────────────────────────────────────────────────────────────
+ */
+
+function WidgetSummary({ widget }: { widget: any }) {
+  const ds = widget.options?.dataSource;
+  const records: any[] = ds?.records ?? [];
+  const widgetType: string = widget.options?.type || widget.type || '';
+  const normType = widgetType.toLowerCase().replace(/_/g, '');
+
+  const dataConfig = widget.options?.dataConfig ?? {};
+
+  // Calculations from dataConfig (each has func + field)
+  const calculations: any[] = Array.isArray(dataConfig.calculations) ? dataConfig.calculations : [];
+
+  // Group-by rows from dataConfig.fields.rows
+  const rowFields: string[] = Array.isArray(dataConfig.fields?.rows) ? dataConfig.fields.rows : [];
+  const groupField: string = rowFields[0] || '';
+
+  // Primary metric: first calculation's field
+  const primaryCalc = calculations[0];
+  const metricField: string = primaryCalc?.field || '';
+
+  console.info('[WidgetSummary]', widget.title, {
+    widgetType, groupField, metricField, records: records.length
+  });
+
+  const isKpi = normType === 'chartstatistic'
+    || normType.includes('kpi')
+    || normType.includes('stat')
+    || normType.includes('metric');
+
+  // For KPI: sum of primary calc field
+  const kpiValue = (() => {
+    if (!metricField || records.length === 0) return null;
+
+    if (primaryCalc?.func === 'count') return records.length;
+
+    const sum = records.reduce((acc: number, r: any) => {
+      const v = r[metricField];
+      const num = typeof v === 'object' && v !== null ? Number(v.id ?? 0) : Number(v) || 0;
+
+      return acc + num;
+    }, 0);
+
+    return sum;
+  })();
+
+  // For bar/pie charts: group records by rowField, aggregate by calc field
+  const groups: [string, number][] = (() => {
+    if (!groupField || records.length === 0) return [];
+
+    const map: Record<string, number> = {};
+
+    records.forEach((r: any) => {
+      const rawKey = r[groupField];
+      const label = typeof rawKey === 'object' && rawKey !== null ? (rawKey.name ?? String(rawKey.id ?? '—')) : String(rawKey ?? '—');
+
+      const val = primaryCalc?.func === 'count' ? 1 : metricField ? (() => {
+        const v = r[metricField];
+
+        return typeof v === 'object' && v !== null ? Number(v.id ?? 0) : Number(v) || 0;
+      })() : 1;
+
+      map[label] = (map[label] || 0) + val;
+    });
+
+    return Object.entries(map).sort((a, b) => b[1] - a[1]).slice(0, 6);
+  })();
+
+  const COLORS = [
+    '#6366f1',
+    '#22d3ee',
+    '#f59e0b',
+    '#10b981',
+    '#f43f5e',
+    '#8b5cf6'
+  ];
+  const chartData = groups.map(([name, value]) => ({ name, value }));
+
+  const isPie = normType.includes('pie') || normType.includes('donut');
+  const isLine = normType.includes('line') || normType.includes('area');
+  const isColumn = normType.includes('column');
+
+  const metricLabel = primaryCalc?.name || metricField || 'Value';
+
+  return (
+    <div className="bg-white border border-gray-200 rounded-lg p-3 shadow-sm flex flex-col gap-1 min-h-[140px]">
+      <div className="text-xs font-semibold text-gray-700 truncate">{widget.title || widget.type}</div>
+
+      {isKpi && kpiValue !== null && (
+        <div className="mt-auto">
+          <div className="text-2xl font-bold text-gray-900">
+            {kpiValue.toLocaleString(undefined, { maximumFractionDigits: 1 })}
+          </div>
+          <div className="text-[10px] text-muted-foreground">
+            {metricLabel} · {records.length} records
+          </div>
+        </div>
+      )}
+
+      {isPie && chartData.length === 0 && records.length > 0 && (
+        <div className="text-xs text-muted-foreground mt-auto py-2">
+          {records.length} records · no group field configured
+        </div>
+      )}
+
+      {isPie && chartData.length > 0 && (
+        <div style={{ width: '100%', height: 160 }}>
+          <ResponsiveContainer width="100%" height="100%">
+            <PieChart>
+              <Pie
+                data={chartData}
+                dataKey="value"
+                nameKey="name"
+                cx="50%"
+                cy="50%"
+                innerRadius={normType.includes('donut') ? 35 : 0}
+                outerRadius={55}
+                paddingAngle={2}>
+                {chartData.map((_: any, i: number) => (
+                  <Cell key={i} fill={COLORS[i % COLORS.length]} />
+                ))}
+              </Pie>
+              <Tooltip formatter={(v: any) => v.toLocaleString(undefined, { maximumFractionDigits: 1 })} />
+              <Legend iconSize={8} wrapperStyle={{ fontSize: 10 }} />
+            </PieChart>
+          </ResponsiveContainer>
+        </div>
+      )}
+
+      {isLine && chartData.length > 0 && (
+        <div style={{ width: '100%', height: 110 }}>
+          <ResponsiveContainer width="100%" height="100%">
+            <LineChart
+              data={chartData}
+              margin={{
+                top: 4, right: 4, left: -20, bottom: 0
+              }}>
+              <XAxis dataKey="name" tick={{ fontSize: 9 }} interval="preserveStartEnd" />
+              <YAxis tick={{ fontSize: 9 }} />
+              <Tooltip formatter={(v: any) => v.toLocaleString(undefined, { maximumFractionDigits: 1 })} />
+              <Line type="monotone" dataKey="value" stroke="#6366f1" strokeWidth={2} dot={{ r: 3 }} name={metricLabel} />
+            </LineChart>
+          </ResponsiveContainer>
+        </div>
+      )}
+
+      {(isColumn || (!isKpi && !isPie && !isLine)) && chartData.length > 0 && (
+        <div style={{ width: '100%', height: 110 }}>
+          <ResponsiveContainer width="100%" height="100%">
+            <BarChart
+              data={chartData}
+              layout={isColumn ? 'vertical' : 'horizontal'}
+              margin={{
+                top: 4, right: 4, left: isColumn ? 40 : -20, bottom: 0
+              }}>
+              {isColumn ? (
+                <>
+                  <XAxis type="number" tick={{ fontSize: 9 }} />
+                  <YAxis type="category" dataKey="name" tick={{ fontSize: 9 }} width={36} />
+                </>
+              ) : (
+                <>
+                  <XAxis dataKey="name" tick={{ fontSize: 9 }} interval={0} />
+                  <YAxis tick={{ fontSize: 9 }} />
+                </>
+              )}
+              <Tooltip formatter={(v: any) => v.toLocaleString(undefined, { maximumFractionDigits: 1 })} />
+              <Bar
+                dataKey="value"
+                name={metricLabel}
+                radius={[
+                  3,
+                  3,
+                  0,
+                  0
+                ]}>
+                {chartData.map((_: any, i: number) => (
+                  <Cell key={i} fill={COLORS[i % COLORS.length]} />
+                ))}
+              </Bar>
+            </BarChart>
+          </ResponsiveContainer>
+        </div>
+      )}
+
+      {!isKpi && chartData.length > 0 && (
+        <div className="text-[10px] text-muted-foreground">
+          {metricLabel}{groupField ? ` by ${groupField}` : ''}
+        </div>
+      )}
+
+      {kpiValue === null && chartData.length === 0 && (
+        <div className="text-[10px] text-muted-foreground mt-auto">
+          {records.length > 0 ? `${records.length} records` : 'No data'}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function AppDashboardPreview({ page, widgets }: { page: any; widgets: any[] }) {
+  return (
+    <div className="flex flex-col h-full w-full overflow-hidden">
+      <div className="flex items-center gap-2 px-3 py-2 border-b bg-muted/30 shrink-0">
+        <LayoutDashboard className="size-4 text-muted-foreground" />
+        <span className="text-sm font-medium">{page.title}</span>
+      </div>
+      <div
+        className="flex-1 overflow-auto p-4"
+        style={{
+          background: 'radial-gradient(circle, #94a3b8 1.5px, transparent 1.5px) 0 0 / 22px 22px #f1f5f9'
+        }}>
+        <div className="grid grid-cols-2 gap-3">
+          {widgets.map((widget: any, i: number) => (
+            <WidgetSummary key={widget.id || i} widget={widget} />
+          ))}
+          {widgets.length === 0 && (
+            <div className="col-span-2 text-sm text-muted-foreground text-center py-8">No widgets configured</div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/*
+ * ─────────────────────────────────────────────────────────────
+ * AppPreviewDocument — mermaid diagrams + data structure table
+ * ─────────────────────────────────────────────────────────────
+ */
+
+function AppPreviewDocument({ app }: { app: any }) {
+  const [tab, setTab] = useState(0);
+  const tabs = ['Layout Structure', 'Data Structure Table', 'Data Structure Diagram'];
+  const layoutDiagram = generateLayoutDiagram(app);
+  const dataDiagram = generateDataStructureDiagram(app);
+
+  return (
+    <div className="flex flex-col h-full overflow-hidden">
+      <div className="flex border-b shrink-0">
+        {tabs.map((t, i) => (
+          <button
+            key={i}
+            onClick={() => setTab(i)}
+            className={cn(
+              'px-3 py-2 text-xs font-medium border-b-2 -mb-px',
+              tab === i ? 'border-primary text-primary' : 'border-transparent text-muted-foreground hover:text-foreground'
+            )}>
+            {t}
+          </button>
+        ))}
+      </div>
+      <div className="flex-1 overflow-auto p-4">
+        {tab === 0 && (
+          <MermaidDiagram
+            title="Layout Structure"
+            mermaidNotation={layoutDiagram}
+            state="output-available" />
+        )}
+        {tab === 2 && (
+          <MermaidDiagram
+            title="Data Structure Diagram"
+            mermaidNotation={dataDiagram}
+            state="output-available" />
+        )}
+        {tab === 1 && (
+          <div className="text-sm space-y-6">
+            <div>
+              <h3 className="font-bold border-b pb-2 mb-3">Data Sources</h3>
+              <table className="w-full border border-gray-200 text-xs">
+                <thead className="bg-gray-50">
+                  <tr>
+                    {['Title', 'Name', 'Slug'].map(h => (
+                      <th key={h} className="border border-gray-200 px-2 py-1 text-left">{h}</th>
+                    ))}
+                  </tr>
+                </thead>
+                <tbody>
+                  {(Array.isArray(app?.data_sources) ? app.data_sources : Object.values(app?.data_sources ?? {})).map((ds: any) => (
+                    <tr key={ds.slug}>
+                      <td className="border border-gray-200 px-2 py-1">{ds.title}</td>
+                      <td className="border border-gray-200 px-2 py-1">{ds.name}</td>
+                      <td className="border border-gray-200 px-2 py-1">{ds.slug}</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+
+            <div>
+              <h3 className="font-bold border-b pb-2 mb-3">Fields</h3>
+              {(Array.isArray(app?.data_sources) ? app.data_sources : Object.values(app?.data_sources ?? {})).map((ds: any) => (
+                <div key={ds.slug} className="border border-gray-300 bg-gray-50 rounded p-3 mb-3">
+                  <div className="font-bold text-sm mb-2">
+                    {ds.title}
+                    {' '}
+                    <span className="text-muted-foreground font-normal text-xs">{ds.name}</span>
+                  </div>
+                  <table className="w-full border border-gray-200 text-xs bg-white">
+                    <thead className="bg-gray-50">
+                      <tr>
+                        {[
+                          'Name',
+                          'Slug',
+                          'Type',
+                          'Validations'
+                        ].map(h => (
+                          <th key={h} className="border border-gray-200 px-2 py-1 text-left">{h}</th>
+                        ))}
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {ds.fields?.map((field: any) => (
+                        <tr key={field.id || field.slug}>
+                          <td className="border border-gray-200 px-2 py-1">{field.name}</td>
+                          <td className="border border-gray-200 px-2 py-1">{field.slug}</td>
+                          <td className="border border-gray-200 px-2 py-1">{field.type}</td>
+                          <td className="border border-gray-200 px-2 py-1 max-w-[200px] truncate">
+                            {JSON.stringify(field.validations)}
+                          </td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+/*
+ * ─────────────────────────────────────────────────────────────
+ * CanvasAppView — main export (mirrors KvCanvasAppPreview.vue)
+ * ─────────────────────────────────────────────────────────────
+ */
+
+interface CanvasAppViewProps {
+  app: any;
+}
+
+export function CanvasAppView({ app }: CanvasAppViewProps) {
+  // DEBUG — runs regardless of app being null
+  console.info('[CanvasAppView] render, app=', app);
+
+  const [activeTab, setActiveTab] = useState(0);
+  const [activeMenuId, setActiveMenuId] = useState<string | null>(() => {
+    const m = app?.layout?.menu;
+
+    if (!m) return null;
+
+    const first = Array.isArray(m) ? m[0] : Object.values(m)[0];
+
+    return (first as any)?.id ?? null;
+  });
+
+  if (!app) {
+    return (
+      <div className="flex h-full items-center justify-center text-sm text-muted-foreground">
+        No app data available
+      </div>
+    );
+  }
+
+  // Normalize values that may arrive as {0:{...},1:{...}} objects or proper arrays
+  const toArray = (val: any): any[] => {
+    if (!val) return [];
+    if (Array.isArray(val)) return val;
+    if (typeof val === 'object') return Object.values(val);
+
+    return [];
+  };
+
+  const rawDataSources = toArray(app.data_sources);
+  const rawWidgets = toArray(app.layout?.widgets);
+  const menu = toArray(app.layout?.menu);
+
+  // DEBUG
+  console.info('[CanvasAppView] app.data_sources', app.data_sources);
+  console.info('[CanvasAppView] app.layout.dummy_data_json', app.layout?.dummy_data_json);
+
+  /*
+   * Parse dummy data from layout (mirrors Vue's dummyData parsing)
+   * Format can be either:
+   *   { "ds_slug": [...records], "other_slug": [...] }  — keyed by data source slug
+   *   [...records]                                       — flat array for single data source
+   * dummy_data_json may be a JSON string or already a parsed object/array.
+   */
+  let dummyDataMap: Record<string, any[]> = {};
+
+  try {
+    const raw = app.layout?.dummy_data_json;
+
+    if (raw) {
+      const parsed = typeof raw === 'string' ? JSON.parse(raw) : raw;
+
+      if (Array.isArray(parsed)) {
+        // Flat array — assign to ALL possible keys for every data source
+        rawDataSources.forEach((ds: any) => {
+          if (ds.slug) dummyDataMap[ds.slug] = parsed;
+          if (ds.id) dummyDataMap[ds.id] = parsed;
+          if (ds.name) dummyDataMap[ds.name] = parsed;
+        });
+        dummyDataMap['__all__'] = parsed;
+      } else if (parsed && typeof parsed === 'object') {
+        // Keyed object (slug → records[])
+        dummyDataMap = parsed;
+        const firstArr = Object.values(parsed).find(v => Array.isArray(v));
+
+        if (firstArr) dummyDataMap['__all__'] = firstArr as any[];
+      }
+    }
+  } catch {
+    // invalid JSON, skip
+  }
+
+  const findRecords = (ds: any): any[] => dummyDataMap[ds.slug]
+    ?? dummyDataMap[ds.id]
+    ?? dummyDataMap[ds.name]
+    ?? dummyDataMap['__all__']
+    ?? [];
+
+  /*
+   * Prepare data sources with normalized fields + dummy records.
+   * Vue sets id = slug (useInlineDataSource({ id: ds.slug })), mirror that.
+   */
+  const dataSources = rawDataSources.map((ds: any) => ({
+    ...ds,
+    _originalId: ds.id, // keep UUID for widget lookup
+    id: ds.slug || ds.id,
+    slug: ds.slug || ds.id,
+    fields: toArray(ds.fields).map((f: any) => ({
+      ...f,
+      id: f.id || f.slug,
+      type: f.type?.replace('field-', '') ?? f.type
+    })),
+    records: findRecords(ds)
+  }));
+
+  const findDataSource = (id: string | undefined) => {
+    if (!id) return undefined;
+
+    return dataSources.find(
+      (ds: any) => ds.id === id
+        || ds.slug === id
+        || ds.name === id
+        || ds._originalId === id
+    );
+  };
+
+  // Prepare widgets — resolve dataSource, clear dataConfig.meta as Vue does
+  const widgets = rawWidgets.map((widget: any) => ({
+    ...widget,
+    options: {
+      ...widget.options,
+      dataConfig: { ...(widget.options?.dataConfig ?? {}), meta: [] },
+      dataSource: findDataSource(widget.options?.dataSourceId ?? widget.dataSourceId)
+    }
+  }));
+
+  const activeMenu = menu.find((m: any) => m.id === activeMenuId) ?? menu[0] ?? null;
+
+  // DEBUG
+  console.info('[CanvasAppView] dummyDataMap keys', Object.keys(dummyDataMap));
+  console.info('[CanvasAppView] dataSources', dataSources.map((ds: any) => ({ id: ds.id, slug: ds.slug, records: ds.records?.length })));
+  console.info('[CanvasAppView] widgets', widgets.map((w: any) => ({ title: w.title, dsId: w.options?.dataSourceId, resolved: !!w.options?.dataSource })));
+  console.info('[CanvasAppView] menu activeMenu', activeMenu?.type, activeMenu?.id);
+
+  const tabLabels = ['Preview', 'JSON', 'Docs'];
+
+  return (
+    <div className="flex flex-col h-full w-full overflow-hidden">
+      {/* Tab bar */}
+      <div className="flex border-b shrink-0 bg-background">
+        {tabLabels.map((t, i) => (
+          <button
+            key={i}
+            onClick={() => setActiveTab(i)}
+            className={cn(
+              'px-4 py-2 text-xs font-medium border-b-2 -mb-px transition-colors',
+              activeTab === i ? 'border-primary text-primary' : 'border-transparent text-muted-foreground hover:text-foreground'
+            )}>
+            {t}
+          </button>
+        ))}
+      </div>
+
+      {/* Tab 0: App preview */}
+      {activeTab === 0 && (
+        <div className="flex flex-1 overflow-hidden">
+          <AppSidebar
+            data={menu}
+            title={app.layout?.title}
+            onMenuClick={setActiveMenuId} />
+          <div className="grow overflow-hidden">
+            {activeMenu?.type === 'board' && (
+              <AppBoardView page={activeMenu} dataSources={dataSources} />
+            )}
+            {activeMenu?.type === 'dashboard' && (
+              <AppDashboardPreview page={activeMenu} widgets={widgets} />
+            )}
+            {!activeMenu && (
+              <div className="flex h-full items-center justify-center text-sm text-muted-foreground">
+                Select a menu item to preview
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* Tab 1: JSON editor */}
+      {activeTab === 1 && (
+        <div className="flex-1 overflow-auto p-4">
+          <pre className="text-xs font-mono text-muted-foreground whitespace-pre-wrap break-all">
+            {JSON.stringify(app, null, 2)}
+          </pre>
+        </div>
+      )}
+
+      {/* Tab 2: Documentation */}
+      {activeTab === 2 && (
+        <div className="flex-1 overflow-hidden">
+          <AppPreviewDocument app={app} />
+        </div>
+      )}
+    </div>
+  );
+}