Add per-source default Perspective layout

Forecast falls back to a saved per-source layout when no version-local
layout is cached, so new versions of a source open with a sensible pivot
without each user reconfiguring it.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

.gitignore

@@ -1,2 +1,3 @@
 node_modules/
 .env
+public/app/

lib/sql_generator.js

@@ -26,11 +26,10 @@ function generateSQL(source, colMeta) {
     if (dims.length === 0) throw new Error('No dimension columns defined in col_meta');
 
     const srcTable        = `${source.schema}.${source.tname}`;
-    // exclude 'id' — forecast table has its own bigserial id primary key
-    const dataCols        = [...dims, dateCol, valueCol, unitsCol].filter(c => c !== 'id');
+    const dataCols        = [...dims, dateCol, valueCol, unitsCol].filter(Boolean);
     const effectiveValue  = dataCols.includes(valueCol) ? valueCol : null;
     const effectiveUnits  = dataCols.includes(unitsCol) ? unitsCol : null;
-    const insertCols      = [...dataCols.map(q), 'iter', 'logid', 'pf_user', 'created_at'].join(', ');
+    const insertCols      = [...dataCols.map(q), 'pf_iter', 'pf_logid', 'pf_user', 'pf_created_at'].join(', ');
     const selectData      = dataCols.map(q).join(', ');
     const dimsJoined      = dims.map(q).join(', ');
 
@@ -49,6 +48,9 @@ function generateSQL(source, colMeta) {
     }
 
     function buildBaseline() {
+        const baselineSelect = dataCols.map(c =>
+            c === dateCol ? `(${q(c)} + '{{date_offset}}'::interval)::date` : q(c)
+        ).join(', ');
         return `
 WITH
 ilog AS (
@@ -56,20 +58,20 @@ ilog AS (
     VALUES ({{version_id}}, '{{pf_user}}', 'baseline', NULL, '{{params}}'::jsonb, '{{note}}')
     RETURNING id
 )
-,del AS (
-    DELETE FROM {{fc_table}} WHERE iter = 'baseline'
-)
 ,ins AS (
     INSERT INTO {{fc_table}} (${insertCols})
-    SELECT ${selectData}, 'baseline', (SELECT id FROM ilog), '{{pf_user}}', now()
+    SELECT ${baselineSelect}, 'baseline', (SELECT id FROM ilog), '{{pf_user}}', now()
     FROM ${srcTable}
-    WHERE ${q(dateCol)} BETWEEN '{{date_from}}' AND '{{date_to}}'
+    WHERE {{filter_clause}}
     RETURNING *
 )
 SELECT count(*) AS rows_affected FROM ins`.trim();
     }
 
     function buildReference() {
+        const referenceSelect = dataCols.map(c =>
+            c === dateCol ? `(${q(c)} + '{{date_offset}}'::interval)::date` : q(c)
+        ).join(', ');
         return `
 WITH
 ilog AS (
@@ -79,9 +81,9 @@ ilog AS (
 )
 ,ins AS (
     INSERT INTO {{fc_table}} (${insertCols})
-    SELECT ${selectData}, 'reference', (SELECT id FROM ilog), '{{pf_user}}', now()
+    SELECT ${referenceSelect}, 'reference', (SELECT id FROM ilog), '{{pf_user}}', now()
     FROM ${srcTable}
-    WHERE ${q(dateCol)} BETWEEN '{{date_from}}' AND '{{date_to}}'
+    WHERE {{filter_clause}}
     RETURNING *
 )
 SELECT count(*) AS rows_affected FROM ins`.trim();
@@ -124,7 +126,7 @@ ilog AS (
     FROM base
     RETURNING *
 )
-SELECT count(*) AS rows_affected FROM ins`.trim();
+SELECT * FROM ins`.trim();
     }
 
     function buildRecode() {
@@ -146,16 +148,16 @@ ilog AS (
     SELECT ${dimsJoined}, ${q(dateCol)}, ${effectiveValue ? `-${q(effectiveValue)}` : '0'}, ${effectiveUnits ? `-${q(effectiveUnits)}` : '0'},
            'recode', (SELECT id FROM ilog), '{{pf_user}}', now()
     FROM src
-    RETURNING id
+    RETURNING *
 )
 ,ins AS (
     INSERT INTO {{fc_table}} (${insertCols})
     SELECT {{set_clause}}, ${q(dateCol)}, ${effectiveValue ? q(effectiveValue) : '0'}, ${effectiveUnits ? q(effectiveUnits) : '0'},
            'recode', (SELECT id FROM ilog), '{{pf_user}}', now()
     FROM src
-    RETURNING id
+    RETURNING *
 )
-SELECT (SELECT count(*) FROM neg) + (SELECT count(*) FROM ins) AS rows_affected`.trim();
+SELECT * FROM neg UNION ALL SELECT * FROM ins`.trim();
     }
 
     function buildClone() {
@@ -179,7 +181,7 @@ ilog AS (
     {{exclude_clause}}
     RETURNING *
 )
-SELECT count(*) AS rows_affected FROM ins`.trim();
+SELECT * FROM ins`.trim();
     }
 
     function buildUndo() {
@@ -189,7 +191,7 @@ SELECT count(*) AS rows_affected FROM ins`.trim();
         // This entry is a placeholder — the undo route uses it as a template reference.
         return `
 -- step 1 (run first):
-DELETE FROM {{fc_table}} WHERE logid = {{logid}};
+DELETE FROM {{fc_table}} WHERE pf_logid = {{logid}};
 -- step 2 (run after step 1):
 DELETE FROM pf.log WHERE id = {{logid}};`.trim();
     }
@@ -205,7 +207,7 @@ function applyTokens(sql, tokens) {
 }
 
 // build a SQL WHERE clause string from a slice object
-// validates all keys against the allowed dimension column list
+// only dimension columns are included; unrecognised keys are silently skipped
 function buildWhere(slice, dimCols) {
     if (!slice || Object.keys(slice).length === 0) return 'TRUE';
 
@@ -213,9 +215,7 @@ function buildWhere(slice, dimCols) {
     const parts = [];
 
     for (const [col, val] of Object.entries(slice)) {
-        if (!allowed.has(col)) {
-            throw new Error(`"${col}" is not a dimension column`);
-        }
+        if (!allowed.has(col)) continue;
         if (Array.isArray(val)) {
             const escaped = val.map(v => esc(v));
             parts.push(`"${col}" IN ('${escaped.join("', '")}')`);
@@ -224,14 +224,14 @@ function buildWhere(slice, dimCols) {
         }
     }
 
-    return parts.join('\nAND ');
+    return parts.length ? parts.join('\nAND ') : 'TRUE';
 }
 
 // build AND iter NOT IN (...) from a version's exclude_iters array
 function buildExcludeClause(excludeIters) {
     if (!excludeIters || excludeIters.length === 0) return '';
     const list = excludeIters.map(i => `'${esc(i)}'`).join(', ');
-    return `AND iter NOT IN (${list})`;
+    return `AND pf_iter NOT IN (${list})`;
 }
 
 // build the dimension columns portion of a SELECT for recode/clone
@@ -245,10 +245,44 @@ function buildSetClause(dimCols, setObj) {
     }).join(', ');
 }
 
+// build a SQL WHERE clause from an array of filter objects { col, op, values }
+// only allows columns with role 'date' or 'filter'
+function buildFilterClause(filters, colMeta) {
+    if (!filters || filters.length === 0) {
+        const err = new Error('At least one filter is required');
+        err.status = 400; throw err;
+    }
+    const allowed = new Set(
+        colMeta.filter(c => c.role !== 'ignore').map(c => c.cname)
+    );
+    const parts = filters.map(({ col, op, values = [] }) => {
+        if (!allowed.has(col)) {
+            const err = new Error(`Column "${col}" is not available for baseline filtering`);
+            err.status = 400; throw err;
+        }
+        const c = `"${col}"`;
+        const v = values.map(x => `'${esc(String(x))}'`);
+        switch (op) {
+            case '=':           return `${c} = ${v[0]}`;
+            case '!=':          return `${c} != ${v[0]}`;
+            case 'IN':          return `${c} IN (${v.join(', ')})`;
+            case 'NOT IN':      return `${c} NOT IN (${v.join(', ')})`;
+            case 'BETWEEN':     return `${c} BETWEEN ${v[0]} AND ${v[1]}`;
+            case 'IS NULL':     return `${c} IS NULL`;
+            case 'IS NOT NULL': return `${c} IS NOT NULL`;
+            default: {
+                const err = new Error(`Unsupported operator "${op}"`);
+                err.status = 400; throw err;
+            }
+        }
+    });
+    return parts.join('\nAND ');
+}
+
 // escape a value for safe SQL string substitution
 function esc(val) {
     if (val === null || val === undefined) return '';
     return String(val).replace(/'/g, "''");
 }
 
-module.exports = { generateSQL, applyTokens, buildWhere, buildExcludeClause, buildSetClause, esc };
+module.exports = { generateSQL, applyTokens, buildWhere, buildExcludeClause, buildSetClause, buildFilterClause, esc };

package-lock.json

@@ -8,6 +8,7 @@
       "name": "pf_app",
       "version": "1.0.0",
       "dependencies": {
+        "apache-arrow": "^21.1.0",
         "cors": "^2.8.5",
         "dotenv": "^16.0.0",
         "express": "^4.18.2",
@@ -17,6 +18,36 @@
         "nodemon": "^3.0.0"
       }
     },
+    "node_modules/@swc/helpers": {
+      "version": "0.5.21",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.21.tgz",
+      "integrity": "sha512-jI/VAmtdjB/RnI8GTnokyX7Ug8c+g+ffD6QRLa6XQewtnGyukKkKSk3wLTM3b5cjt1jNh9x0jfVlagdN2gDKQg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.8.0"
+      }
+    },
+    "node_modules/@types/command-line-args": {
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/@types/command-line-args/-/command-line-args-5.2.3.tgz",
+      "integrity": "sha512-uv0aG6R0Y8WHZLTamZwtfsDLVRnOa+n+n5rEvFWL5Na5gZ8V2Teab/duDPFzIIIhs9qizDpcavCusCLJZu62Kw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/command-line-usage": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/@types/command-line-usage/-/command-line-usage-5.0.4.tgz",
+      "integrity": "sha512-BwR5KP3Es/CSht0xqBcUXS3qCAUVXwpRKsV2+arxeb65atasuXG9LykC9Ab10Cw3s2raH92ZqOeILaQbsB2ACg==",
+      "license": "MIT"
+    },
+    "node_modules/@types/node": {
+      "version": "24.12.2",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-24.12.2.tgz",
+      "integrity": "sha512-A1sre26ke7HDIuY/M23nd9gfB+nrmhtYyMINbjI1zHJxYteKR6qSMX56FsmjMcDb3SMcjJg5BiRRgOCC/yBD0g==",
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~7.16.0"
+      }
+    },
     "node_modules/accepts": {
       "version": "1.3.8",
       "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
@@ -30,6 +61,21 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
     "node_modules/anymatch": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
@@ -44,6 +90,35 @@
         "node": ">= 8"
       }
     },
+    "node_modules/apache-arrow": {
+      "version": "21.1.0",
+      "resolved": "https://registry.npmjs.org/apache-arrow/-/apache-arrow-21.1.0.tgz",
+      "integrity": "sha512-kQrYLxhC+NTVVZ4CCzGF6L/uPVOzJmD1T3XgbiUnP7oTeVFOFgEUu6IKNwCDkpFoBVqDKQivlX4RUFqqnWFlEA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@swc/helpers": "^0.5.11",
+        "@types/command-line-args": "^5.2.3",
+        "@types/command-line-usage": "^5.0.4",
+        "@types/node": "^24.0.3",
+        "command-line-args": "^6.0.1",
+        "command-line-usage": "^7.0.1",
+        "flatbuffers": "^25.1.24",
+        "json-bignum": "^0.0.3",
+        "tslib": "^2.6.2"
+      },
+      "bin": {
+        "arrow2csv": "bin/arrow2csv.js"
+      }
+    },
+    "node_modules/array-back": {
+      "version": "6.2.3",
+      "resolved": "https://registry.npmjs.org/array-back/-/array-back-6.2.3.tgz",
+      "integrity": "sha512-SGDvmg6QTYiTxCBkYVmThcoa67uLl35pyzRHdpCGBOcqFy6BtwnphoFPk7LhJshD+Yk1Kt35WGWeZPTgwR4Fhw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.17"
+      }
+    },
     "node_modules/array-flatten": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
@@ -161,6 +236,58 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/chalk-template": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/chalk-template/-/chalk-template-0.4.0.tgz",
+      "integrity": "sha512-/ghrgmhfY8RaSdeo43hNXxpoHAtxdbskUHjPpfqUWGttFgycUhYPGx3YZBCnUCvOa7Doivn1IZec3DEGFoMgLg==",
+      "license": "MIT",
+      "dependencies": {
+        "chalk": "^4.1.2"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk-template?sponsor=1"
+      }
+    },
+    "node_modules/chalk/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/chalk/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/chokidar": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
@@ -186,6 +313,62 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "license": "MIT"
+    },
+    "node_modules/command-line-args": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/command-line-args/-/command-line-args-6.0.2.tgz",
+      "integrity": "sha512-AIjYVxrV9X752LmPDLbVYv8aMCuHPSLZJXEo2qo/xJfv+NYhaZ4sMSF01rM+gHPaMgvPM0l5D/F+Qx+i2WfSmQ==",
+      "license": "MIT",
+      "dependencies": {
+        "array-back": "^6.2.3",
+        "find-replace": "^5.0.2",
+        "lodash.camelcase": "^4.3.0",
+        "typical": "^7.3.0"
+      },
+      "engines": {
+        "node": ">=12.20"
+      },
+      "peerDependencies": {
+        "@75lb/nature": "latest"
+      },
+      "peerDependenciesMeta": {
+        "@75lb/nature": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/command-line-usage": {
+      "version": "7.0.4",
+      "resolved": "https://registry.npmjs.org/command-line-usage/-/command-line-usage-7.0.4.tgz",
+      "integrity": "sha512-85UdvzTNx/+s5CkSgBm/0hzP80RFHAa7PsfeADE5ezZF3uHz3/Tqj9gIKGT9PTtpycc3Ua64T0oVulGfKxzfqg==",
+      "license": "MIT",
+      "dependencies": {
+        "array-back": "^6.2.2",
+        "chalk-template": "^0.4.0",
+        "table-layout": "^4.1.1",
+        "typical": "^7.3.0"
+      },
+      "engines": {
+        "node": ">=12.20.0"
+      }
+    },
     "node_modules/content-disposition": {
       "version": "0.5.4",
       "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz",
@@ -430,6 +613,29 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/find-replace": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/find-replace/-/find-replace-5.0.2.tgz",
+      "integrity": "sha512-Y45BAiE3mz2QsrN2fb5QEtO4qb44NcS7en/0y9PEVsg351HsLeVclP8QPMH79Le9sH3rs5RSwJu99W0WPZO43Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "@75lb/nature": "latest"
+      },
+      "peerDependenciesMeta": {
+        "@75lb/nature": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/flatbuffers": {
+      "version": "25.9.23",
+      "resolved": "https://registry.npmjs.org/flatbuffers/-/flatbuffers-25.9.23.tgz",
+      "integrity": "sha512-MI1qs7Lo4Syw0EOzUl0xjs2lsoeqFku44KpngfIduHBYvzm8h2+7K8YMQh1JtVVVrUvhLpNwqVi4DERegUJhPQ==",
+      "license": "Apache-2.0"
+    },
     "node_modules/forwarded": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@@ -668,6 +874,20 @@
         "node": ">=0.12.0"
       }
     },
+    "node_modules/json-bignum": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/json-bignum/-/json-bignum-0.0.3.tgz",
+      "integrity": "sha512-2WHyXj3OfHSgNyuzDbSxI1w2jgw5gkWSWhS7Qg4bWXx1nLk3jnbwfUeS0PSba3IzpTUWdHxBieELUzXRjQB2zg==",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/lodash.camelcase": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
+      "integrity": "sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==",
+      "license": "MIT"
+    },
     "node_modules/math-intrinsics": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
@@ -885,7 +1105,6 @@
       "resolved": "https://registry.npmjs.org/pg/-/pg-8.20.0.tgz",
       "integrity": "sha512-ldhMxz2r8fl/6QkXnBD3CR9/xg694oT6DZQ2s6c/RI28OjtSOpxnPrUCGOBJ46RCUxcWdx3p6kw/xnDHjKvaRA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "pg-connection-string": "^2.12.0",
         "pg-pool": "^3.13.0",
@@ -1300,6 +1519,19 @@
         "node": ">=4"
       }
     },
+    "node_modules/table-layout": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/table-layout/-/table-layout-4.1.1.tgz",
+      "integrity": "sha512-iK5/YhZxq5GO5z8wb0bY1317uDF3Zjpha0QFFLA8/trAoiLbQD0HUbMesEaxyzUgDxi2QlcbM8IvqOlEjgoXBA==",
+      "license": "MIT",
+      "dependencies": {
+        "array-back": "^6.2.2",
+        "wordwrapjs": "^5.1.0"
+      },
+      "engines": {
+        "node": ">=12.17"
+      }
+    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -1332,6 +1564,12 @@
         "nodetouch": "bin/nodetouch.js"
       }
     },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    },
     "node_modules/type-is": {
       "version": "1.6.18",
       "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
@@ -1345,6 +1583,15 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/typical": {
+      "version": "7.3.0",
+      "resolved": "https://registry.npmjs.org/typical/-/typical-7.3.0.tgz",
+      "integrity": "sha512-ya4mg/30vm+DOWfBg4YK3j2WD6TWtRkCbasOJr40CseYENzCUby/7rIvXA99JGsQHeNxLbnXdyLLxKSv3tauFw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.17"
+      }
+    },
     "node_modules/undefsafe": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/undefsafe/-/undefsafe-2.0.5.tgz",
@@ -1352,6 +1599,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/undici-types": {
+      "version": "7.16.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.16.0.tgz",
+      "integrity": "sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==",
+      "license": "MIT"
+    },
     "node_modules/unpipe": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
@@ -1379,6 +1632,15 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/wordwrapjs": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/wordwrapjs/-/wordwrapjs-5.1.1.tgz",
+      "integrity": "sha512-0yweIbkINJodk27gX9LBGMzyQdBDan3s/dEAiwBOj+Mf0PPyWL6/rikalkv8EeD0E8jm4o5RXEOrFTP3NXbhJg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.17"
+      }
+    },
     "node_modules/xtend": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",

package.json

@@ -5,9 +5,11 @@
   "main": "server.js",
   "scripts": {
     "start": "node server.js",
-    "dev": "nodemon server.js"
+    "dev": "nodemon server.js",
+    "build": "cd ui && npm run build"
   },
   "dependencies": {
+    "apache-arrow": "^21.1.0",
     "cors": "^2.8.5",
     "dotenv": "^16.0.0",
     "express": "^4.18.2",

pf_perspective_options.md

@@ -0,0 +1,257 @@
+# Perspective Architecture Options
+
+This document weighs how the Forecast view should source data for the Perspective
+pivot. The current implementation hits practical limits on initial load
+(~30s for 350k rows × ~55 cols), and growth is expected. Choosing an architecture
+now should account for both **read** (initial pivot load + interaction) and
+**write** (forecasting operations that mutate rows).
+
+---
+
+## Current architecture
+
+### Data flow
+
+- **Transport:** `GET /api/versions/:id/data` returns the full forecast table
+  as Apache Arrow IPC stream. Server-side: pg cursor (`FETCH 10000`) accumulates
+  all rows, `tableFromJSON` builds an Arrow table, `tableToIPC` produces one
+  record batch, response sent with `Content-Length`.
+- **Joined columns:** `/data` LEFT JOINs `pf.log` to surface `pf_note` (the
+  user's note for the operation that produced each row) and `pf_op`
+  (baseline/scale/recode/clone). Joined at fetch time so note edits are
+  always live. (Added in `bf85f11`.)
+- **Client:** Streams the response body to a `Uint8Array`, hands it to
+  Perspective's `worker.table()` (`@perspective-dev/client@4.4.0` from CDN).
+  Perspective's WASM engine owns the table in browser memory; all
+  pivots/filters/group-bys run locally.
+- **Progress UI:** Forecast view reads the response body via
+  `response.body.getReader()` and shows received-bytes / total-bytes while
+  loading.
+- **Forecasting writes:**
+  - `scale`/`recode`/`clone` POST → server INSERTs new rows with
+    `RETURNING *` → client receives JSON rows →
+    `tableRef.current.update(rows)` appends to Perspective's local table.
+    **Fast — no reload.**
+  - `undo` (DELETE) → server removes rows by `pf_logid` → client calls
+    `initViewer(...)` which **fully reloads** the table.
+  - `baseline` reload → currently also a full reload.
+
+### Why this specific shape (the bug history)
+
+The current "accumulate all rows, emit one record batch" approach is not
+accidental. Two failure modes drove it:
+
+1. **pg returns `bigint` (oid 20) and `numeric` (oid 1700) as JS strings by
+   default.** That made `tableFromJSON` infer `Dictionary<Utf8>` for ~50 of
+   55 columns. Fix in `server.js`: register type parsers that coerce both
+   to `Number` so Arrow infers `Int`/`Float64`.
+2. **Per-batch `tableFromJSON` creates independent dictionaries.** When we
+   streamed batches, the writer emitted ~1230 dictionary REPLACEMENT
+   messages between batches. Perspective's WASM Arrow reader crashes on
+   those (`RuntimeError: memory access out of bounds`). Fix: accumulate
+   rows server-side, build one Arrow table, emit a single record batch.
+   Reference comment lives in `routes/operations.js` near the cursor loop.
+
+These two bugs explain the ~10–15s server stall before the progress bar
+appears: the server can't send byte 1 until every row has been fetched,
+encoded, and the buffer is sized for `Content-Length`. **Any redesign of
+the read path needs to either solve the dictionary-replacement issue
+(streaming with stable dictionary IDs declared up front) or replace the
+transport entirely (e.g., Parquet, server-side virtual table).**
+
+### Implication for any redesign
+
+The incremental update path (`table.update(rows)`) is what makes
+operations feel snappy today. Whatever architecture comes next, writes
+need to stay incremental — or get even cheaper. Undo's full reload is
+already a known wart.
+
+---
+
+## The options
+
+### A. Stay client-side WASM; optimize the encode path
+
+Keep the architecture. Replace the slow pieces.
+
+- **Encode:** drop `tableFromJSON`. Build Arrow vectors directly from
+  `cols_meta` types (typed arrays for numerics, dictionary builders for
+  strings). Eliminates per-row type inference.
+- **Stream:** declare schema up front, send dictionaries once, stream record
+  batches as they come off the cursor. Progress bar starts within ~1s.
+- **Trim:** request-level `?cols=` parameter so the server can return only
+  the columns the active layout needs.
+- **Writes:** unchanged — `table.update(rows)` keeps working.
+- **Undo:** same path; same wart. Could be improved by surfacing a
+  `table.remove(pf_ids)` instead of `initViewer`.
+
+| Aspect | Impact |
+|---|---|
+| Initial load | ~3–5× faster server encode + parallel transfer; bar appears in ~1s |
+| Interaction | Unchanged (already instant) |
+| Writes | Unchanged (already fast) |
+| Browser memory ceiling | Still limited by Perspective WASM (~1–2M rows is the rough wall) |
+| Code change | Medium: new builder code in `routes/operations.js`, schema declaration; UI mostly unchanged |
+| New runtime deps | None |
+
+**Right answer if:** dataset stays under ~1M rows and the goal is "make it
+faster without rearchitecting."
+
+---
+
+### B. DuckDB-WASM in the browser (Parquet load + `DuckDBHandler`)
+
+Replace the Arrow IPC payload with a Parquet file. Browser loads it into
+DuckDB-WASM. Perspective's `DuckDBHandler` (from
+`@perspective-dev/client/dist/esm/virtual_servers/duckdb.js`) backs the
+viewer — every pivot interaction becomes a SQL query against the local
+DuckDB-WASM instance. Perspective ships the view-config-to-SQL translator;
+no custom code there.
+
+- **Initial transfer:** Parquet for a forecast table is typically ~10–30 MB
+  for 350k rows (vs. ~80–150 MB for Arrow IPC). Smaller download, no
+  server-side `tableFromJSON`.
+- **Encode:** server-side. DuckDB on the server can `COPY (SELECT ... FROM
+  postgres_scan(...)) TO 'foo.parquet'`, or pre-stage Parquet on each
+  forecast write. Either way, no Node-side Arrow encode.
+- **Interaction:** instant — local SQL on a columnar engine. No round trips.
+- **Writes:** **this is the hard part.** After a `scale`/`recode`/`clone`,
+  the server has new rows in pg but DuckDB-WASM has a stale snapshot.
+  Options:
+  1. **Server returns new rows as Arrow** → client does `INSERT INTO
+     forecast SELECT * FROM arrow_view` in DuckDB-WASM, then notifies the
+     `DuckDBHandler` to refresh views.
+  2. **Re-export Parquet** → re-fetch. Simple but wasteful for small
+     incremental ops.
+  3. **Maintain a delta log** → client replays inserts/deletes by `pf_logid`.
+- **Undo:** `DELETE FROM forecast WHERE pf_logid = $1` against DuckDB-WASM,
+  then refresh. Strictly faster than the current full reload.
+
+| Aspect | Impact |
+|---|---|
+| Initial load | Smaller payload + fast WASM ingest; likely 3–5× total |
+| Interaction | Instant (local SQL) — same as today |
+| Writes | New write-sync layer required (medium effort) |
+| Browser memory ceiling | DuckDB-WASM handles 10M+ rows comfortably |
+| Code change | Significant: new server route for Parquet, new client wiring, write-sync code |
+| New runtime deps | DuckDB on server (Node-API or shell), `@duckdb/duckdb-wasm` on client |
+
+**Right answer if:** dataset will grow past ~1M rows but you still want
+local interaction speed, *and* you're willing to write the write-sync layer.
+
+---
+
+### C. Server-side DuckDB as a virtual server (no client load)
+
+DuckDB lives on the Node server. Browser uses a `VirtualServerHandler`
+implementation that proxies Perspective's view requests (`tableMakeView`,
+`viewGetData`, `viewGetMinMax`, `tableSchema`) to a `/perspective` endpoint.
+Server runs SQL against DuckDB which queries pg directly via
+`postgres_scanner`, or against a Parquet copy.
+
+- **Initial transfer:** essentially zero. Schema + first viewport only.
+- **Interaction:** every drag/filter/group-by is a network round trip.
+  50–200ms typical. Imperceptible for most operations; noticeable on
+  rapid drag interactions.
+- **Writes:** simplest. Operations write to pg as today. DuckDB queries
+  pg live (via `postgres_scanner`) so it always sees current state. No
+  client-side state to sync.
+- **Undo:** same as writes — server state is the source of truth.
+
+| Aspect | Impact |
+|---|---|
+| Initial load | <1s regardless of dataset size |
+| Interaction | 50–200ms round trip per interaction |
+| Writes | Simple — single source of truth on server |
+| Browser memory ceiling | Irrelevant — data never enters the browser |
+| Code change | Significant: custom `VirtualServerHandler` that talks to a new `/perspective` endpoint; server-side translator wiring |
+| New runtime deps | DuckDB on server |
+
+**Right answer if:** dataset will outgrow browser memory (10M+ rows) or
+multiple users need to see real-time shared state. Pays an interaction
+latency tax forever.
+
+**Note:** Perspective-dev also ships a Python `virtual_servers/duckdb`.
+If you're willing to add a Python sidecar, you may not need to write the
+JS-side handler — just stand up the Python server. Significant infra
+change for a Node-based app.
+
+---
+
+### D. Hybrid — DuckDB-WASM read, pg write, server-pushed deltas
+
+Same browser stack as B, but writes flow differently. After a forecast
+operation, the server pushes back an Arrow batch of new rows (or a list of
+`pf_logid`s to delete for undo). The client applies it to DuckDB-WASM via
+SQL and refreshes the Perspective view. No re-export of Parquet on every
+write.
+
+This is essentially B with the write-sync layer specified. Splitting it out
+because the write contract is the architectural decision worth deciding
+explicitly:
+
+- **Insert deltas:** server returns new rows as Arrow IPC, client does
+  `INSERT INTO forecast SELECT * FROM arrow_view`. Already trivial in
+  DuckDB-WASM.
+- **Delete deltas:** server returns `{deleted_logid: N}`, client does
+  `DELETE FROM forecast WHERE pf_logid = N`.
+- **Replace deltas (e.g., note edits):** if `pf_note` is joined at fetch
+  time (current state after `bf85f11`), edits are invisible until refetch.
+  Either accept that, or store note on the row and `UPDATE`.
+
+This is the cleanest end state for a forecasting app: bulk read once,
+incremental sync after.
+
+---
+
+## Comparison
+
+| | Current | A: optimize | B/D: DuckDB-WASM | C: server DuckDB |
+|---|---|---|---|---|
+| Initial load (350k rows) | ~30s | ~5–10s | ~3–8s | <1s |
+| Interaction latency | 0 | 0 | 0 | 50–200ms |
+| Write feedback | instant | instant | instant (after sync) | instant |
+| Undo cost | full reload | full reload (or fix) | local DELETE | server-side |
+| Browser memory ceiling | ~1M rows | ~1M rows | 10M+ rows | none |
+| New deps | — | — | DuckDB (server + WASM) | DuckDB (server) |
+| Code change | — | medium | significant | significant |
+| Risk surface | low | low | medium (write sync) | medium (translator wiring) |
+
+---
+
+## Open questions to resolve before choosing
+
+1. **Expected dataset size 12 months out.** If it stays at ~350k–1M rows,
+   option A is enough. If it goes to 5M+, A is dead in the water.
+2. **Parquet caching strategy if going B/D.** Re-export on every write is
+   wasteful; delta replay is more code. Pick one explicitly before
+   building.
+3. **Multi-user scenarios.** If two users edit the same version
+   concurrently, options B/D need a mechanism for one user's writes to
+   appear in another's local DuckDB-WASM. Option C gets this for free.
+4. **Python-or-Node decision for server-side DuckDB.** Perspective-dev's
+   Python virtual server might let you skip writing a translator entirely
+   — at the cost of a Python runtime alongside Node. Worth investigating
+   before committing to a JS-side custom handler.
+5. **Should the spec move?** The spec mentions DuckDB only as a faster
+   bulk-encode path (option A-ish, server-side). Options B/C/D are
+   architectural shifts the spec doesn't contemplate. Whatever's chosen
+   should be written into `pf_spec.md` so the reasoning isn't lost again.
+
+---
+
+## Recommendation framing (not a decision)
+
+- **If the immediate problem is "30s loads feel bad":** option A. It's the
+  smallest change with the highest perceived impact and doesn't paint you
+  into an architectural corner.
+- **If you're already planning for data growth:** option D (DuckDB-WASM +
+  delta sync). It's the right end state for a single-user-per-version
+  forecasting tool with mid-to-large datasets.
+- **If multi-user real-time becomes a goal:** option C. Pay the latency
+  tax once and have a cleaner data model.
+
+A reasonable phased path: do A first (fast, low risk, ships value this
+week), live with it while planning, then move to D when row counts demand
+it. C is a different shape and probably not warranted unless multi-user
+emerges as a requirement.

pf_spec.md

@@ -0,0 +1,735 @@
+# Pivot Forecast — Application Spec
+
+## Overview
+
+A web application for building named forecast scenarios against any PostgreSQL table. The core workflow is: load known historical actuals as a baseline, shift those dates forward by a specified interval into the forecast period to establish a no-change starting point, then apply incremental adjustments (scale, recode, clone) to build the plan. An admin configures a source table, generates a baseline, and opens it for users to make adjustments. Users interact with a pivot table to select slices of data and apply forecast operations. All changes are incremental (append-only), fully audited, and reversible.
+
+---
+
+## Tech Stack
+
+- **Backend:** Node.js / Express
+- **Database:** PostgreSQL — isolated `pf` schema, installs into any existing DB
+- **Frontend:** React + Vite + Tailwind CSS; Perspective (forecast pivot)
+- **Pattern:** Follows fc_webapp (shell) + pivot_forecast (operations)
+
+---
+
+## Database Schema: `pf`
+
+Everything lives in the `pf` schema. Install via sequential SQL scripts.
+
+### `pf.source`
+Registered source tables available for forecasting.
+
+```sql
+CREATE TABLE pf.source (
+    id          serial PRIMARY KEY,
+    schema      text NOT NULL,
+    tname       text NOT NULL,
+    label       text,                   -- friendly display name
+    status      text DEFAULT 'active',  -- active | archived
+    created_at  timestamptz DEFAULT now(),
+    created_by  text,
+    UNIQUE (schema, tname)
+);
+```
+
+### `pf.col_meta`
+Column configuration for each registered source table. Determines how the app treats each column.
+
+```sql
+CREATE TABLE pf.col_meta (
+    id          serial PRIMARY KEY,
+    source_id   integer REFERENCES pf.source(id),
+    cname       text NOT NULL,          -- column name in source table
+    label       text,                   -- friendly display name
+    role        text NOT NULL,          -- 'dimension' | 'value' | 'units' | 'date' | 'ignore'
+    is_key      boolean DEFAULT false,  -- true = part of natural key (used in WHERE slice)
+    opos        integer,                -- ordinal position (for ordering)
+    UNIQUE (source_id, cname)
+);
+```
+
+**Roles:**
+- `dimension` — categorical field (customer, part, channel, rep, geography, etc.) — appears as pivot rows/cols, used in WHERE filters for operations
+- `value` — the money/revenue field to scale
+- `units` — the quantity field to scale
+- `date` — the primary date field; used for baseline/reference date range and stored in the forecast table
+- `filter` — columns available as filter conditions in the Baseline Workbench (e.g. order status, ship date, open flag); used in baseline WHERE clauses but **not stored** in the forecast table
+- `ignore` — exclude from forecast table entirely
+
+### `pf.version`
+Named forecast scenarios. One forecast table (`pf.fc_{tname}_{version_id}`) is created per version.
+
+```sql
+CREATE TABLE pf.version (
+    id              serial PRIMARY KEY,
+    source_id       integer REFERENCES pf.source(id),
+    name            text NOT NULL,
+    description     text,
+    status          text DEFAULT 'open',        -- open | closed
+    exclude_iters   jsonb DEFAULT '["reference"]', -- iter values excluded from all operations
+    created_at      timestamptz DEFAULT now(),
+    created_by      text,
+    closed_at       timestamptz,
+    closed_by       text,
+    UNIQUE (source_id, name)
+);
+```
+
+**`exclude_iters`:** jsonb array of `iter` values that are excluded from operation WHERE clauses. Defaults to `["reference"]`. Reference rows are still returned by `get_data` (visible in pivot) but are never touched by scale/recode/clone. Additional iters can be added to lock them from further adjustment.
+
+**Forecast table naming:** `pf.fc_{tname}_{version_id}` — e.g., `pf.fc_sales_3`. One table per version, physically isolated. Contains both operational rows and reference rows.
+
+Creating a version → `CREATE TABLE pf.fc_{tname}_{version_id} (...)`
+Deleting a version → `DROP TABLE pf.fc_{tname}_{version_id}` + delete from `pf.version` + delete from `pf.log`
+
+### `pf.log`
+Audit log. Every write operation gets one entry here.
+
+```sql
+CREATE TABLE pf.log (
+    id          bigserial PRIMARY KEY,
+    version_id  integer REFERENCES pf.version(id),
+    pf_user     text NOT NULL,
+    stamp       timestamptz DEFAULT now(),
+    operation   text NOT NULL,  -- 'baseline' | 'reference' | 'scale' | 'recode' | 'clone'
+    slice       jsonb,          -- the WHERE conditions that defined the selection
+    params      jsonb,          -- operation parameters (increments, new values, scale factor, etc.)
+    note        text            -- user-provided comment
+);
+```
+
+### `pf.fc_{tname}_{version_id}` (dynamic, one per version)
+Created when a version is created. Mirrors source table dimension/value/units/date columns plus forecast metadata. Contains both operational rows (`iter = 'baseline' | 'scale' | 'recode' | 'clone'`) and reference rows (`iter = 'reference'`).
+
+```sql
+-- Example: source table "sales", version id 3 → pf.fc_sales_3
+CREATE TABLE pf.fc_sales_3 (
+    id          bigserial PRIMARY KEY,
+
+    -- mirrored from source (role = dimension | value | units | date only):
+    customer    text,
+    channel     text,
+    part        text,
+    geography   text,
+    order_date  date,
+    units       numeric,
+    value       numeric,
+
+    -- forecast metadata:
+    iter        text,       -- 'baseline' | 'reference' | 'scale' | 'recode' | 'clone'
+    logid       bigint REFERENCES pf.log(id),
+    pf_user     text,
+    created_at  timestamptz DEFAULT now()
+);
+```
+
+Note: no `version_id` column on the forecast table — it's implied by the table itself.
+
+### `pf.sql`
+Generated SQL stored per source and operation. Built once when col_meta is finalized, fetched at request time.
+
+```sql
+CREATE TABLE pf.sql (
+    id           serial PRIMARY KEY,
+    source_id    integer REFERENCES pf.source(id),
+    operation    text NOT NULL,  -- 'baseline' | 'reference' | 'scale' | 'recode' | 'clone' | 'get_data' | 'undo'
+    sql          text NOT NULL,
+    generated_at timestamptz DEFAULT now(),
+    UNIQUE (source_id, operation)
+);
+```
+
+**Column names are baked in at generation time.** Runtime substitution tokens:
+
+| Token | Resolved from |
+|-------|--------------|
+| `{{fc_table}}` | `pf.fc_{tname}_{version_id}` — derived at request time |
+| `{{where_clause}}` | built from `slice` JSON by `build_where()` in JS |
+| `{{exclude_clause}}` | built from `version.exclude_iters` — e.g. `AND iter NOT IN ('reference')` |
+| `{{logid}}` | newly inserted `pf.log` id |
+| `{{pf_user}}` | from request body |
+| `{{date_from}}` / `{{date_to}}` | baseline/reference date range (source period) |
+| `{{date_offset}}` | PostgreSQL interval string to shift dates into the forecast period — e.g. `1 year`, `6 months`, `2 years 3 months` (baseline only; empty string = no shift) |
+| `{{value_incr}}` / `{{units_incr}}` | scale operation increments |
+| `{{pct}}` | scale mode: absolute or percentage |
+| `{{set_clause}}` | recode/clone dimension overrides |
+| `{{scale_factor}}` | clone multiplier |
+
+**Request-time flow:**
+1. Fetch SQL from `pf.sql` for `source_id` + `operation`
+2. Fetch `version.exclude_iters`, build `{{exclude_clause}}`
+3. Build `{{where_clause}}` from `slice` JSON via `build_where()`
+4. Substitute all tokens
+5. Execute — single round trip
+
+**WHERE clause safety:** `build_where()` validates every key in the slice against col_meta (only `role = 'dimension'` columns are permitted). Values are sanitized (escaped single quotes). No parameterization — consistent with existing projects, debuggable in Postgres logs.
+
+---
+
+## Setup / Install Scripts
+
+```
+setup_sql/
+  01_schema.sql   -- CREATE SCHEMA pf; create all metadata tables (source, col_meta, version, log, sql)
+```
+
+Source registration, col_meta configuration, SQL generation, version creation, and forecast table DDL all happen via API.
+
+---
+
+## API Routes
+
+### DB Browser
+
+| Method | Route | Description |
+|--------|-------|-------------|
+| GET | `/api/tables` | List all tables in the DB with row counts |
+| GET | `/api/tables/:schema/:tname/preview` | Preview columns + sample rows |
+
+### Source Management
+
+| Method | Route | Description |
+|--------|-------|-------------|
+| GET | `/api/sources` | List registered sources |
+| POST | `/api/sources` | Register a source table |
+| GET | `/api/sources/:id/cols` | Get col_meta for a source |
+| PUT | `/api/sources/:id/cols` | Save col_meta configuration |
+| POST | `/api/sources/:id/generate-sql` | Generate/regenerate all operation SQL into `pf.sql` |
+| GET | `/api/sources/:id/sql` | View generated SQL for a source (inspection/debug) |
+| DELETE | `/api/sources/:id` | Deregister a source (does not affect existing forecast tables) |
+
+### Forecast Versions
+
+| Method | Route | Description |
+|--------|-------|-------------|
+| GET | `/api/sources/:id/versions` | List versions for a source |
+| POST | `/api/sources/:id/versions` | Create a new version (CREATE TABLE for forecast table) |
+| PUT | `/api/versions/:id` | Update version (name, description, exclude_iters) |
+| POST | `/api/versions/:id/close` | Close a version (blocks further edits) |
+| POST | `/api/versions/:id/reopen` | Reopen a closed version |
+| DELETE | `/api/versions/:id` | Delete a version (DROP TABLE + delete log entries) |
+
+### Baseline & Reference Data
+
+| Method | Route | Description |
+|--------|-------|-------------|
+| POST | `/api/versions/:id/baseline` | Load one baseline segment (additive — does not clear existing baseline rows) |
+| DELETE | `/api/versions/:id/baseline` | Clear all baseline rows and baseline log entries for this version |
+| POST | `/api/versions/:id/reference` | Load reference rows from source table for a date range (additive) |
+
+**Baseline load request body:**
+```json
+{
+  "date_offset":  "1 year",
+  "filters": [
+    [
+      { "col": "order_date",   "op": "BETWEEN", "values": ["2024-01-01", "2024-12-31"] },
+      { "col": "order_status", "op": "IN",      "values": ["OPEN", "PENDING"] }
+    ],
+    [
+      { "col": "order_status", "op": "IS NULL" }
+    ]
+  ],
+  "pf_user":  "admin",
+  "note":     "FY2024 actuals + open orders projected to FY2025",
+  "replay":   false
+}
+```
+
+The example above generates: `(order_date BETWEEN '2024-01-01' AND '2024-12-31' AND order_status IN ('OPEN','PENDING')) OR (order_status IS NULL)`
+
+- `date_offset` — PostgreSQL interval string applied to the primary `role = 'date'` column at insert time. Examples: `"1 year"`, `"6 months"`, `"2 years 3 months"`. Defaults to `"0 days"`. Applied to the stored date value only — filter columns are never shifted.
+- `filters` — an array of **groups**. Conditions within a group are AND-ed; groups are OR-ed together. Each group is an array of one or more condition objects:
+  - `col` — must be `role = 'date'` or `role = 'filter'` in col_meta
+  - `op` — one of `=`, `!=`, `IN`, `NOT IN`, `BETWEEN`, `IS NULL`, `IS NOT NULL`
+  - `values` — array of strings; two elements for `BETWEEN`; multiple for `IN`/`NOT IN`; omitted for `IS NULL`/`IS NOT NULL`
+  - Backward compatibility: a flat array of condition objects (non-nested) is treated as a single group (all AND).
+- At least one group with at least one condition is required.
+- `raw_where` — optional string. When present, bypasses `filters` entirely and injects the value verbatim as the WHERE clause body. **Admin-only** — rejected with `403` if the requesting `pf_user` is not in the admin list. Not validated against col_meta. Caller is responsible for correctness and SQL safety. Stored as-is in `pf.log.params` for audit. Cannot be combined with `filters` — if both are present the request is rejected with `400`.
+- Baseline loads are **additive** — existing `iter = 'baseline'` rows are not touched. Each load is its own log entry and is independently undoable.
+
+`replay` controls behavior when incremental rows exist (applies to Clear + reload, not individual segments):
+
+- `replay: false` (default) — after clearing, re-load baseline segments, leave incremental rows untouched
+- `replay: true` — after clearing, re-load baseline, then re-execute each incremental log entry in chronological order
+
+**v1 note:** `replay: true` returns `501 Not Implemented` until the replay engine is built.
+
+**Clear baseline (`DELETE /api/versions/:id/baseline`)** — deletes all rows where `iter = 'baseline'` and all `operation = 'baseline'` log entries. Irreversible (no undo). Returns `{ rows_deleted, log_entries_deleted }`.
+
+**Reference request body:** same shape as baseline load without `replay`. Reference dates land verbatim (no offset). Additive — multiple reference loads stack independently, each undoable by logid.
+
+### Forecast Data
+
+| Method | Route | Description |
+|--------|-------|-------------|
+| GET | `/api/versions/:id/data` | Stream all rows for this version as an Arrow IPC binary |
+
+**Transport format — Apache Arrow IPC stream**
+
+The endpoint returns `Content-Type: application/vnd.apache.arrow.stream` (binary). JSON is not used for this route. The client fetches the response as `arrayBuffer()` and passes it directly to `worker.table(buffer)` — Perspective's native ingestion path with no JS deserialization overhead.
+
+Arrow's columnar layout with dictionary encoding on string dimension columns keeps payload size manageable at scale (typically 50–150 MB for 1M rows depending on string cardinality), compared to several times that for equivalent JSON.
+
+**Server-side streaming (cursor-based)**
+
+For datasets that may reach 1M+ rows, the server must not buffer the full query result in memory before writing the response. Instead:
+
+1. Open a PostgreSQL cursor over the `SELECT * FROM {{fc_table}}` query
+2. Fetch rows in batches (target: 10 000 rows per batch)
+3. For each batch, append a serialized Arrow record batch to the HTTP response using chunked transfer encoding
+4. Close the cursor and end the response when all batches are written
+
+This means the first bytes of the Arrow stream reach the client while the server is still reading from the database, and Node.js heap stays bounded regardless of dataset size.
+
+**Client-side loading**
+
+- **Moderate datasets (< ~500k rows):** accumulate the full `arrayBuffer()` then call `worker.table(buffer)` once. Perspective becomes interactive after the stream completes.
+- **Large datasets (≥ ~500k rows):** process Arrow record batches incrementally — call `worker.table(firstBatch)` to create the table, then `pspTable.update(batch)` for each subsequent batch. Perspective is interactive and browseable while remaining batches are still arriving.
+
+The client detects which path to use by checking the `X-Row-Count` response header (see below).
+
+**Row-count pre-check**
+
+Before opening the cursor, the server runs `SELECT COUNT(*) FROM {{fc_table}}`. The result is attached as the `X-Row-Count` response header so the client can choose its loading strategy. If the count exceeds 500 000, the UI displays a non-blocking notice ("Loading large dataset — pivot will become interactive as data arrives") rather than a blank screen.
+
+### Forecast Operations
+
+All operations share a common request envelope:
+
+```json
+{
+  "pf_user": "paul.trowbridge",
+  "note":    "optional comment",
+  "slice": {
+    "channel":   "WHS",
+    "geography": "WEST"
+  }
+}
+```
+
+`slice` keys must be `role = 'dimension'` columns per col_meta. Stored in `pf.log` as the implicit link to affected rows.
+
+#### Scale
+`POST /api/versions/:id/scale`
+
+```json
+{
+  "pf_user":    "paul.trowbridge",
+  "note":       "10% volume lift Q3 West",
+  "slice":      { "channel": "WHS", "geography": "WEST" },
+  "value_incr": null,
+  "units_incr": 5000,
+  "pct":        false
+}
+```
+
+- `value_incr` / `units_incr` — absolute amounts to add (positive or negative). Either can be null.
+- `pct: true` — treat as percentage of current slice total instead of absolute
+- Excludes `exclude_iters` rows from the source selection
+- Distributes increment proportionally across rows in the slice
+- Inserts rows tagged `iter = 'scale'`
+
+#### Recode
+`POST /api/versions/:id/recode`
+
+```json
+{
+  "pf_user": "paul.trowbridge",
+  "note":    "Part discontinued, replaced by new SKU",
+  "slice":   { "part": "OLD-SKU-001" },
+  "set":     { "part": "NEW-SKU-002" }
+}
+```
+
+- `set` — one or more dimension fields to replace (can swap multiple at once)
+- Inserts negative rows to zero out the original slice
+- Inserts positive rows with replaced dimension values
+- Both sets of rows share the same `logid` — undone together
+- Inserts rows tagged `iter = 'recode'`
+
+#### Clone
+`POST /api/versions/:id/clone`
+
+```json
+{
+  "pf_user": "paul.trowbridge",
+  "note":    "New customer win, similar profile to existing",
+  "slice":   { "customer": "EXISTING CO", "channel": "DIR" },
+  "set":     { "customer": "NEW CO" },
+  "scale":   0.75
+}
+```
+
+- `set` — dimension values to override on cloned rows
+- `scale` — optional multiplier on value/units (default 1.0)
+- Does not offset original slice
+- Inserts rows tagged `iter = 'clone'`
+
+### Audit & Undo
+
+| Method | Route | Description |
+|--------|-------|-------------|
+| GET | `/api/versions/:id/log` | List all log entries for a version, newest first |
+| DELETE | `/api/log/:logid` | Undo: delete all forecast rows with this logid, then delete log entry |
+
+---
+
+## Frontend (Web UI)
+
+### Navigation (sidebar)
+
+Three-step collapsible sidebar (200 px expanded / 48 px collapsed, state persisted to `localStorage`):
+
+1. **① Setup** — browse DB tables, register sources, configure col_meta, generate SQL. One-time admin task.
+2. **② Baseline** — create/manage versions, load baseline segments, timeline preview. One-time per version.
+3. **③ Forecast** — main working view: Perspective pivot + operation panel. Primary ongoing use.
+
+### Setup View (① Setup)
+
+- Left panel: DB table browser — all tables with row counts; click a table to open a preview modal (column list + sample rows)
+- Right panel: Registered sources list; click a source to open col_meta editor below
+- Col_meta editor: inline table — role dropdown per column, is_key checkbox, label text input, ordinal position
+- "Save" button — upserts col_meta; "Generate SQL" button — triggers generate-sql route, shows confirmation
+- "Register source" button available in the table preview modal
+- New columns default to role `dimension` on registration
+- Must generate SQL before a version can be created against this source
+
+### Baseline View (② Baseline)
+
+Source and version selectors at top. Version management inline: create new version (explains that a forecast table will be created), Close / Reopen / Delete buttons. Delete drops the forecast table and removes all version records.
+
+### Baseline Workbench
+
+A dedicated view for constructing the baseline for the selected version. The baseline is built from one or more **segments** — each segment is an independent query against the source table that appends rows to `iter = 'baseline'`. Segments are additive; clearing is explicit.
+
+**Layout:**
+```
+┌─────────────────────────────────────────────────────────────┐
+│  Baseline — [Version name]              [Clear Baseline]     │
+├─────────────────────────────────────────────────────────────┤
+│  Segments loaded (from log):                                 │
+│  ┌──────┬────────────────┬──────────┬───────┬──────────┐    │
+│  │  ID  │  Description   │  Rows    │  By   │  [Undo]  │    │
+│  └──────┴────────────────┴──────────┴───────┴──────────┘    │
+├─────────────────────────────────────────────────────────────┤
+│  Add Segment                                                 │
+│                                                              │
+│  Description  [_______________________________________]      │
+│                                                              │
+│  Date range   [date_from] to [date_to]  on [date col ▾]     │
+│  Date offset  [0] years  [0] months                         │
+│                                                              │
+│  Additional filters:                                         │
+│  [ + Add filter ]                                            │
+│  ┌──────────────────┬──────────┬──────────────┬───────┐     │
+│  │  Column          │  Op      │  Value(s)    │  [ x ]│     │
+│  └──────────────────┴──────────┴──────────────┴───────┘     │
+│                                                              │
+│  Preview: [projected month chips]                            │
+│                                                              │
+│  Note  [___________]          [Load Segment]                 │
+└─────────────────────────────────────────────────────────────┘
+```
+
+**Segments list** — shows all `operation = 'baseline'` log entries for this version, newest first. Each has an Undo button. Undo removes only that segment's rows (by logid), leaving other segments intact.
+
+**Clear Baseline** — deletes ALL `iter = 'baseline'` rows and all `operation = 'baseline'` log entries for this version. Prompts for confirmation. Used when starting over from scratch.
+
+**Add Segment form:**
+
+- **Description** — free text label stored as the log `note`, shown in the segments list
+- **Date offset** — years + months spinners; shifts the primary `role = 'date'` column forward on insert
+- **Filters** — one or more filter groups that define what rows to pull. Conditions within a group are AND-ed; groups are OR-ed. There is no separate "date range" section — period selection is just a filter like any other:
+  - Each group has a header row ("Group 1", "Group 2 — OR", …) and a `+ Add condition` link
+  - Within a group: Column (any `role = 'date'` or `role = 'filter'`), Operator (`=`, `!=`, `IN`, `NOT IN`, `BETWEEN`, `IS NULL`, `IS NOT NULL`), Value(s)
+  - Value inputs: `BETWEEN` → two date/text inputs; `IN`/`NOT IN` → comma-separated list; `=`/`!=` → single input; omitted for `IS NULL`/`IS NOT NULL`
+  - `+ Add OR group` button appends a new empty group below, joined by an "OR" separator label
+  - Groups with more than one condition render an "AND" badge between rows to make the logic explicit
+  - A group can be removed with `×` on its header (not available when only one group remains)
+  - At least one group with at least one condition is required to load a segment
+- **Manual WHERE clause** (admin only) — a toggle link ("Switch to manual SQL") that replaces the filter builder with a plain textarea. The admin types a raw PostgreSQL WHERE clause body (no `WHERE` keyword). Switching back to the builder clears the textarea. When active, the filter builder is hidden and the structured `filters` field is not sent; `raw_where` is sent instead. A prominent warning banner reads: "Raw SQL is not validated. You are responsible for correctness and security."
+- **Timeline preview** — rendered when any condition in any group is a `BETWEEN` or `=` on a `role = 'date'` column. Shows a horizontal bar (number-line style) for the source period and, if offset > 0, a second bar below for the projected period. Each bar shows start date on the left, end date on the right, duration in the centre. The two bars share the same visual width so the shift is immediately apparent. Not shown in manual WHERE mode or when no date condition is present.
+- **Note** — optional free text
+- **Load Segment** — submits; appends rows, does not clear existing baseline rows
+
+**Example — three-segment baseline:**
+
+| # | Description | Filter logic | Offset |
+|---|-------------|--------------|--------|
+| 1 | All orders taken 6/1/25–3/31/26 | `order_date BETWEEN 2025-06-01 AND 2026-03-31` | 0 |
+| 2 | Open or unshipped orders (status missing or explicit) | `(status IN ('OPEN','PENDING')) OR (status IS NULL)` | 0 |
+| 3 | Prior year book-and-ship 4/1/25–5/31/25 | `order_date BETWEEN 2025-04-01 AND 2025-05-31 AND ship_date BETWEEN 2025-04-01 AND 2025-05-31` | 0 |
+
+Segment 2 uses two OR groups; segment 3 has two AND conditions in one group. Any combination is valid as long as at least one group with at least one condition is present.
+
+### Forecast View
+
+**Layout:**
+```
+┌─────────────────────────────────────────────────────────────────┐
+│  [Version label]  [Refresh]  [Save layout]  [Reset layout]       │
+├──────────────────────────────────────┬──────────────────────────┤
+│                                      │                           │
+│  Perspective Viewer                  │  Operation Panel          │
+│  (interactive pivot web component)   │  (active when slice set)  │
+│                                      │                           │
+│                                      │  Slice:                   │
+│                                      │    channel = WHS          │
+│                                      │    geography = WEST       │
+│                                      │                           │
+│                                      │  [ Scale ] [ Recode ]     │
+│                                      │  [ Clone ]                │
+│                                      │                           │
+│                                      │  ... operation form ...   │
+│                                      │                           │
+│                                      │  [ Submit ]               │
+│                                      │                           │
+└──────────────────────────────────────┴──────────────────────────┘
+```
+
+**Pivot control:** [Perspective](https://perspective.finos.org/) 4.4.0, loaded from CDN at runtime. Data is fetched from `GET /api/versions/:id/data` as an Arrow IPC binary stream and loaded into an in-browser Perspective worker — Perspective's native ingestion path. Supports grouping, splitting, filtering, sorting, and charting interactively. Layout (group_by, split_by, filters, plugin) is saved per version to `localStorage` via Save layout / Reset layout buttons.
+
+**Large-dataset loading sequence:**
+1. Client issues `GET /api/versions/:id/data`
+2. Server responds with `X-Row-Count` header and begins streaming Arrow record batches
+3. If `X-Row-Count` ≥ 500 000, UI shows a non-blocking loading banner; otherwise no indicator
+4. Client calls `worker.table(firstBatch)` on the first batch to make the pivot interactive immediately
+5. Each subsequent batch is applied with `pspTable.update(batch)` as it arrives
+6. Banner clears when the stream closes
+
+**Interaction flow:**
+1. Click a cell or row in the pivot — the `perspective-click` event fires
+2. `detail.config.filter` from the event is parsed: only `==` filters on `role = dimension` columns are extracted as the slice
+3. Slice populates the Operation Panel — pick operation tab, fill in parameters
+4. Submit → POST to API → new rows returned via `RETURNING *` are streamed directly into the Perspective table (`pspTable.update(rows)`) — no full reload needed
+5. For recode, both the negative offset rows and positive replacement rows are returned and streamed
+
+**Pivot default layout:** built from col_meta — first two `dimension` columns as `group_by`, `date` column as `split_by`. User can rearrange in Perspective settings panel and save.
+
+**Reference rows** (`pf_iter = 'reference'`) are visible in the pivot for comparison context. Operations never affect them (enforced by `exclude_iters` in the version).
+
+### Log View
+
+AG Grid list of log entries — user, timestamp, operation, slice, note, rows affected.
+"Undo" button per row → `DELETE /api/log/:logid` → grid and pivot refresh (full reload of Perspective table).
+
+---
+
+## Forecast SQL Patterns
+
+Column names baked in at generation time. Tokens substituted at request time.
+
+### Baseline Load (one segment)
+
+```sql
+WITH ilog AS (
+    INSERT INTO pf.log (version_id, pf_user, operation, slice, params, note)
+    VALUES ({{version_id}}, '{{pf_user}}', 'baseline', NULL, '{{params}}'::jsonb, '{{note}}')
+    RETURNING id
+)
+INSERT INTO {{fc_table}} (
+    {dimension_cols}, {value_col}, {units_col}, {date_col},
+    iter, logid, pf_user, created_at
+)
+SELECT
+    {dimension_cols}, {value_col}, {units_col},
+    ({date_col} + '{{date_offset}}'::interval)::date,
+    'baseline', (SELECT id FROM ilog), '{{pf_user}}', now()
+FROM
+    {schema}.{tname}
+WHERE
+    {{filter_clause}}
+```
+
+Baseline loads are **additive** — no DELETE before INSERT. Each segment appends independently.
+
+Token details:
+- `{{date_offset}}` — PostgreSQL interval string (e.g. `1 year`); defaults to `0 days`; applied only to the primary `role = 'date'` column on insert
+- `{{filter_clause}}` — built from `filters` or `raw_where` at request time (not baked into stored SQL since conditions vary per segment).
+  - Structured path (`filters`): each group becomes a parenthesized AND block; groups are joined with `OR`. Every column is validated against col_meta (`role = 'date'` or `role = 'filter'`). Values are escaped (single quotes doubled). Supported operators: `=`, `!=`, `IN`, `NOT IN`, `BETWEEN`, `IS NULL`, `IS NOT NULL`.
+  - Raw path (`raw_where`): the string is injected verbatim. No col_meta validation. Admin-only.
+
+### Clear Baseline
+
+Two queries, run in a transaction:
+```sql
+DELETE FROM {{fc_table}} WHERE iter = 'baseline';
+DELETE FROM pf.log WHERE version_id = {{version_id}} AND operation = 'baseline';
+```
+
+### Reference Load
+
+```sql
+WITH ilog AS (
+    INSERT INTO pf.log (version_id, pf_user, operation, slice, params, note)
+    VALUES ({{version_id}}, '{{pf_user}}', 'reference', NULL, '{{params}}'::jsonb, '{{note}}')
+    RETURNING id
+)
+INSERT INTO {{fc_table}} (
+    {dimension_cols}, {value_col}, {units_col}, {date_col},
+    iter, logid, pf_user, created_at
+)
+SELECT
+    {dimension_cols}, {value_col}, {units_col}, {date_col},
+    'reference', (SELECT id FROM ilog), '{{pf_user}}', now()
+FROM
+    {schema}.{tname}
+WHERE
+    {date_col} BETWEEN '{{date_from}}' AND '{{date_to}}'
+```
+
+No date offset — reference rows land at their original dates for prior-period comparison.
+
+### Scale
+
+```sql
+WITH ilog AS (
+    INSERT INTO pf.log (version_id, pf_user, operation, slice, params, note)
+    VALUES ({{version_id}}, '{{pf_user}}', 'scale', '{{slice}}'::jsonb, '{{params}}'::jsonb, '{{note}}')
+    RETURNING id
+)
+,base AS (
+    SELECT
+        {dimension_cols}, {date_col},
+        {value_col}, {units_col},
+        sum({value_col}) OVER () AS total_value,
+        sum({units_col}) OVER () AS total_units
+    FROM {{fc_table}}
+    WHERE {{where_clause}}
+    {{exclude_clause}}
+)
+INSERT INTO {{fc_table}} (
+    {dimension_cols}, {date_col}, {value_col}, {units_col},
+    iter, logid, pf_user, created_at
+)
+SELECT
+    {dimension_cols}, {date_col},
+    round(({value_col} / NULLIF(total_value, 0)) * {{value_incr}}, 2),
+    round(({units_col} / NULLIF(total_units, 0)) * {{units_incr}}, 5),
+    'scale', (SELECT id FROM ilog), '{{pf_user}}', now()
+FROM base
+```
+
+`{{value_incr}}` / `{{units_incr}}` are pre-computed in JS when `pct: true` (multiply slice total by pct).
+
+### Recode
+
+```sql
+WITH ilog AS (
+    INSERT INTO pf.log (version_id, pf_user, operation, slice, params, note)
+    VALUES ({{version_id}}, '{{pf_user}}', 'recode', '{{slice}}'::jsonb, '{{params}}'::jsonb, '{{note}}')
+    RETURNING id
+)
+,src AS (
+    SELECT {dimension_cols}, {date_col}, {value_col}, {units_col}
+    FROM {{fc_table}}
+    WHERE {{where_clause}}
+    {{exclude_clause}}
+)
+,negatives AS (
+    INSERT INTO {{fc_table}} ({dimension_cols}, {date_col}, {value_col}, {units_col}, iter, logid, pf_user, created_at)
+    SELECT {dimension_cols}, {date_col}, -{value_col}, -{units_col}, 'recode', (SELECT id FROM ilog), '{{pf_user}}', now()
+    FROM src
+)
+INSERT INTO {{fc_table}} ({dimension_cols}, {date_col}, {value_col}, {units_col}, iter, logid, pf_user, created_at)
+SELECT {{set_clause}}, {date_col}, {value_col}, {units_col}, 'recode', (SELECT id FROM ilog), '{{pf_user}}', now()
+FROM src
+```
+
+`{{set_clause}}` replaces the listed dimension columns with new values, passes others through unchanged.
+
+### Clone
+
+```sql
+WITH ilog AS (
+    INSERT INTO pf.log (version_id, pf_user, operation, slice, params, note)
+    VALUES ({{version_id}}, '{{pf_user}}', 'clone', '{{slice}}'::jsonb, '{{params}}'::jsonb, '{{note}}')
+    RETURNING id
+)
+INSERT INTO {{fc_table}} ({dimension_cols}, {date_col}, {value_col}, {units_col}, iter, logid, pf_user, created_at)
+SELECT
+    {{set_clause}}, {date_col},
+    round({value_col} * {{scale_factor}}, 2),
+    round({units_col} * {{scale_factor}}, 5),
+    'clone', (SELECT id FROM ilog), '{{pf_user}}', now()
+FROM {{fc_table}}
+WHERE {{where_clause}}
+{{exclude_clause}}
+```
+
+### Undo
+
+```sql
+DELETE FROM {{fc_table}} WHERE logid = {{logid}};
+DELETE FROM pf.log WHERE id = {{logid}};
+```
+
+---
+
+## Admin Setup Flow (end-to-end)
+
+1. Open **Sources** view → browse DB tables → register source table
+2. Open col_meta editor → assign roles to columns (`dimension`, `value`, `units`, `date`, `filter`, `ignore`), mark is_key dimensions, set labels
+3. Click **Generate SQL** → app writes operation SQL to `pf.sql`
+4. Open **Versions** view → create a named version (sets `exclude_iters`, creates forecast table)
+5. Open **Baseline Workbench** → build the baseline from one or more segments:
+   - Each segment specifies a date range (on any date/filter column), date offset, and optional additional filter conditions
+   - Add segments until the baseline is complete; each is independently undoable
+   - Use "Clear Baseline" to start over if needed
+6. Optionally load **Reference** → pick prior period date range → inserts `iter = 'reference'` rows at their original dates (for comparison in the pivot)
+7. Open **Forecast** view → share with users
+
+## User Forecast Flow (end-to-end)
+
+1. Open **Forecast** view → select version
+2. Pivot loads — explore data, identify slice to adjust
+3. Select cells → Operation Panel populates with slice
+4. Choose operation → fill in parameters → Submit
+5. Grid refreshes — adjustment visible immediately
+6. Repeat as needed
+7. Admin closes version when forecasting is complete
+
+---
+
+## Open Questions / Future Scope
+
+- **Baseline replay** — re-execute change log against a restated baseline (`replay: true`); v1 returns 501
+- **Arrow IPC for initial data load** — at large row counts (1M+) the `/versions/:id/data` JSON response becomes a bottleneck. Option: serve Arrow IPC binary instead of JSON; Perspective's `worker.table()` accepts Arrow buffers natively. Incremental operation rows (scale/recode/clone) can stay as JSON fed to `table.update()` since they're always small. Could be implemented with `pg` + `apache-arrow` in Node, or by adding a server-side DuckDB instance (Postgres scanner → Arrow IPC) if a caching layer is also needed.
+- **Approval workflow** — user submits, admin approves before changes are visible to others (deferred)
+- **Territory filtering** — restrict what a user can see/edit by dimension value (deferred)
+- **Export** — download forecast as CSV or push results to a reporting table
+- **Version comparison** — side-by-side view of two versions (facilitated by isolated tables via UNION)
+- **Col meta / version schema drift** — if col_meta roles are changed after a version's forecast table is already created, the generated SQL and the table DDL go out of sync (e.g. a column added to SQL that doesn't exist in the table). UI should detect this: compare col_meta against the forecast table's actual columns via `information_schema`, warn the user, and offer to rebuild the version (drop + recreate table, preserving the version record and log). For now the workaround is to delete and recreate the version manually.
+- **Multi-connection support** — currently one DB via `.env`. Full vision: `pf.connection` table (host, port, dbname, user, password as env-var ref), `connection_id` on `pf.source`, per-connection pg pools at runtime. `pf` schema stays on a "home" connection; source data can live anywhere. Connections UI in Setup. Safe to defer while in dev — requires clean reinstall when added since it changes the source schema.
+
+---
+
+## Project Status — 2026-04-25
+
+### What's working
+- Full backend: source registration, col_meta, SQL generation, versions, baseline segments, reference load, scale, recode, clone, undo
+- React + Vite + Tailwind CSS frontend scaffolded in `ui/`, built output to `public/app/`, served by Express
+- 3-step collapsible sidebar (Setup / Baseline / Forecast) — addresses prior UX concern about opaque 5-tab nav
+- Setup view: DB table browser with preview modal, source registration, col_meta editor, SQL generation
+- Baseline view: version management (create/close/reopen/delete), multi-segment baseline workbench, canvas timeline, filter builder
+- Perspective pivot in Forecast view: loads all version rows, interactive group/split/filter/chart, layout saved per version
+- Slice extraction from `perspective-click` event feeds operation panel directly
+- Incremental row streaming: operation results (`RETURNING *`) stream into Perspective table without full reload
+- Status bar: shows current source · version · baseline row count · status
+
+### Known issues / next focus
+
+- **Forecast view** — operation panel (Scale / Recode / Clone) is a stub; needs wiring to API
+- **Status bar** — currently hardcoded; needs to reflect actual selected source/version from state
+- **Col_meta / version schema drift** — if col_meta changes after a version's forecast table is created, the SQL and table DDL go out of sync. UI should detect this (compare col_meta against `information_schema`), warn, and offer rebuild. Workaround: delete and recreate the version.
+- **No "current version" persistence** — source/version selection resets on page reload; session context not persisted
+- **Perspective slice limitation** — computed date columns (Month, YearDate) extracted via split_by don't filter back to raw rows; only native dimension columns work for slice extraction
+
+### Branch status
+- `baseline-workbench` — merged to origin, stable
+- `perspective-forecast` — active development branch; React UI scaffolded, Forecast operation panel pending
+

pf_ux_mockup.md

@@ -0,0 +1,112 @@
+# Pivot Forecast — UX Mockup
+
+```
+┌─────────────────────────────────────────────────────────────────────┐
+│  Pivot Forecast                                                     │
+│  ① Setup  ② Baseline  ③ Forecast ◀ (default landing)                │
+└─────────────────────────────────────────────────────────────────────┘
+
+
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+  ① SETUP
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+┌──── All Tables ──────────────┐  ┌──── Registered Sources ─────────┐
+│ schema  table        rows    │  │                                  │
+│ ──────  ──────────   ──────  │  │  sales_orders      ✓ SQL ready  │
+│ public  sales_orders  48,291 │◀─│  invoices          ✓ SQL ready  │
+│ public  invoices      12,004 │  │  + Register table               │
+│ public  products         891 │  └──────────────────────────────────┘
+│ rpt     summary_mv     3,442 │
+└──────────────────────────────┘  ┌──── Col Meta: sales_orders ─────┐
+                                  │ column        role      key label│
+                                  │ ──────────    ────────  ─── ─── │
+                                  │ customer      dimension  ✓       │
+                                  │ channel       dimension  ✓       │
+                                  │ part          dimension           │
+                                  │ geography     dimension           │
+                                  │ order_date    date                │
+                                  │ ship_date     filter              │
+                                  │ status        filter              │
+                                  │ units         units               │
+                                  │ revenue       value               │
+                                  │ internal_id   ignore              │
+                                  │                                  │
+                                  │              [Generate SQL ▶]    │
+                                  └──────────────────────────────────┘
+
+
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+  ② BASELINE
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  Source  [sales_orders ▾]    Version  [FY2026 Plan ▾]  [+ New version]
+
+┌──── Segments ──────────────────────────────────────────────────────┐
+│  #   description                  rows    by       date            │
+│  ─   ──────────────────────────── ──────  ──────   ──────────────  │
+│  1   FY25 actuals +1yr            41,204  paul     Apr 24          │
+│  2   Open orders                   3,109  paul     Apr 24   [Undo] │
+│                                                                    │
+│  Total baseline rows: 44,313                [Clear all baseline]   │
+└────────────────────────────────────────────────────────────────────┘
+
+┌──── Add Segment ────────────────────────────────────────────────────┐
+│                                                                     │
+│  Description  [                                    ]               │
+│                                                                     │
+│  Filters   [+ Add filter]                                           │
+│  ┌─────────────────┬──────────┬─────────────────────┬───┐          │
+│  │ order_date      │ BETWEEN  │ 2025-01-01 2025-12-31│ x │          │
+│  └─────────────────┴──────────┴─────────────────────┴───┘          │
+│                                                                     │
+│  Date offset   [1] yr  [0] mo                                       │
+│                                                                     │
+│  ·───────────────────────────·   source                            │
+│  Jan 2025              Dec 2025                                     │
+│  ·───────────────────────────·   projected (+1 yr)                 │
+│  Jan 2026              Dec 2026                                     │
+│                                                                     │
+│  Note  [                          ]          [Load Segment]        │
+└────────────────────────────────────────────────────────────────────┘
+
+┌──── Reference (optional) ──────────────────────────────────────────┐
+│  Load prior-period rows for comparison in the pivot                │
+│  Date range  [2024-01-01] to [2024-12-31]                          │
+│  Note  [                  ]                         [Load Ref]     │
+└────────────────────────────────────────────────────────────────────┘
+
+
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+  ③ FORECAST                          source: sales_orders
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+  Version  [FY2026 Plan ▾]    [Refresh]  [Save layout]  [Reset layout]
+
+┌──── Pivot ───────────────────────────────┐ ┌──── Operations ───────┐
+│                                          │ │                       │
+│  (Perspective viewer)                    │ │  Slice                │
+│                                          │ │  channel  = WHS       │
+│   channel  │ Jan 2026 │ Feb 2026 │ ...   │ │  geo      = WEST      │
+│  ──────────┼──────────┼──────────┼───    │ │                       │
+│   DIR      │  412,000 │  388,000 │       │ │  [Scale][Recode]      │
+│   WHS ◀    │  290,000 │  310,000 │       │ │  [Clone]              │
+│   ──────── │          │          │       │ │  ───────────────────  │
+│   Total    │  702,000 │  698,000 │       │ │  Value incr  [     ]  │
+│                                          │ │  Units incr  [     ]  │
+│                                          │ │  Pct?        [ ]      │
+│                                          │ │                       │
+│                                          │ │  Note  [          ]   │
+│                                          │ │                       │
+│                                          │ │       [Submit]        │
+└──────────────────────────────────────────┘ └───────────────────────┘
+
+  ▼ Change log (12 entries)
+  ┌────┬───────────┬──────────┬─────────────────────────┬────────────┐
+  │ id │ operation │ by       │ slice                   │            │
+  │ ── │ ───────── │ ──────── │ ───────────────────── ─ │            │
+  │ 12 │ scale     │ paul     │ channel=WHS geo=WEST    │ [Undo]     │
+  │ 11 │ recode    │ paul     │ part=OLD-SKU            │ [Undo]     │
+  │ 10 │ scale     │ paul     │ channel=DIR             │ [Undo]     │
+  └────┴───────────┴──────────┴─────────────────────────┴────────────┘
+```

public/app.js

@@ -16,9 +16,10 @@ const state = {
         sources:  null,
         colMeta:  null,
         versions: null,
-        pivot:    null,
         log:      null
-    }
+    },
+    pspWorker:  null,   // Perspective worker
+    pspTable:   null,   // Perspective table
 };
 
 /* ============================================================
@@ -50,7 +51,7 @@ function showStatus(msg, type = 'info') {
    NAVIGATION
    ============================================================ */
 function switchView(name) {
-    if ((name === 'forecast' || name === 'log') && !state.version) {
+    if ((name === 'forecast' || name === 'log' || name === 'baseline') && !state.version) {
         showStatus('Select a version first', 'error');
         return;
     }
@@ -68,6 +69,7 @@ function switchView(name) {
     if (name === 'versions') renderVersions();
     if (name === 'forecast') loadForecastData();
     if (name === 'log')      loadLogData();
+    if (name === 'baseline') openBaselineWorkbench();
 }
 
 function setSource(source) {
@@ -115,15 +117,20 @@ function renderTablesGrid(tables) {
 
     state.grids.tables = agGrid.createGrid(el, {
         columnDefs: [
-            { field: 'schema',       headerName: 'Schema', width: 90 },
+            { field: 'schema',       headerName: 'Schema', flex: 1 },
             { field: 'tname',        headerName: 'Table',  flex: 1 },
-            { field: 'row_estimate', headerName: 'Rows',   width: 80,
+            { field: 'row_estimate', headerName: 'Rows',   flex: 1,
               valueFormatter: p => p.value != null ? Number(p.value).toLocaleString() : '—' }
         ],
         rowData:         tables,
         rowSelection:    'single',
         onRowClicked:    onTableRowClicked,
         onRowDoubleClicked: e => showTablePreview(e.data.schema, e.data.tname),
+        allowContextMenuWithControlKey: true,
+        getContextMenuItems: e => [
+            { name: 'Preview', action: () => showTablePreview(e.node.data.schema, e.node.data.tname) },
+            { name: 'Register', action: () => registerTable(e.node.data.schema, e.node.data.tname) }
+        ],
         defaultColDef:   { resizable: true, sortable: true },
         headerHeight:    32, rowHeight: 28
     });
@@ -133,6 +140,7 @@ function onTableRowClicked(e) {
     const { schema, tname } = e.data;
     state.previewSchema = schema;
     state.previewTname  = tname;
+    document.getElementById('btn-preview').classList.remove('hidden');
     document.getElementById('btn-register').classList.remove('hidden');
 }
 
@@ -211,13 +219,11 @@ function renderSourcesGrid(sources) {
 
 async function selectSource(source) {
     setSource(source);
+    document.getElementById('btn-delete-source').classList.remove('hidden');
     try {
         state.colMeta = await api('GET', `/sources/${source.id}/cols`);
         renderColMetaGrid(state.colMeta);
-        document.getElementById('sources-list-grid').classList.add('hidden');
-        document.getElementById('col-meta-grid').classList.remove('hidden');
         document.getElementById('right-panel-title').textContent = `${source.schema}.${source.tname} — Columns`;
-        document.getElementById('btn-back-sources').classList.remove('hidden');
         document.getElementById('btn-save-cols').classList.remove('hidden');
         document.getElementById('btn-generate-sql').classList.remove('hidden');
     } catch (err) {
@@ -225,13 +231,24 @@ async function selectSource(source) {
     }
 }
 
-function backToSources() {
-    document.getElementById('sources-list-grid').classList.remove('hidden');
-    document.getElementById('col-meta-grid').classList.add('hidden');
-    document.getElementById('right-panel-title').textContent = 'Registered Sources';
-    document.getElementById('btn-back-sources').classList.add('hidden');
+async function deleteSource() {
+    if (!state.source) return;
+    const { id, schema, tname } = state.source;
+    if (!confirm(`Delete source ${schema}.${tname}? This does not drop existing forecast tables.`)) return;
+    try {
+        await api('DELETE', `/sources/${id}`);
+        showStatus(`Source ${tname} deleted`, 'success');
+        setSource(null);
+        document.getElementById('btn-delete-source').classList.add('hidden');
         document.getElementById('btn-save-cols').classList.add('hidden');
         document.getElementById('btn-generate-sql').classList.add('hidden');
+        document.getElementById('right-panel-title').textContent = 'Select a source to map columns';
+        state.grids.colMeta?.setGridOption('rowData', []);
+        const sources = await api('GET', '/sources');
+        state.grids.sources?.setGridOption('rowData', sources);
+    } catch (err) {
+        showStatus(err.message, 'error');
+    }
 }
 
 function renderColMetaGrid(colMeta) {
@@ -375,10 +392,81 @@ function showLoadForm(op) {
     state.loadDataOp = op;
     document.getElementById('load-data-title').textContent =
         op === 'baseline' ? 'Load Baseline' : 'Load Reference';
-    document.getElementById('load-data-form').classList.remove('hidden');
+    document.getElementById('load-date-from').value    = '';
+    document.getElementById('load-date-to').value      = '';
+    document.getElementById('load-offset-years').value  = '0';
+    document.getElementById('load-offset-months').value = '0';
+    document.getElementById('load-note').value         = '';
+    document.getElementById('load-date-preview').classList.add('hidden');
+
+    const showOffset = op === 'baseline';
+    document.getElementById('load-offset-fields').classList.toggle('hidden', !showOffset);
+
+    document.getElementById('load-data-modal').classList.remove('hidden');
     document.getElementById('load-date-from').focus();
 }
 
+function hideLoadModal() {
+    document.getElementById('load-data-modal').classList.add('hidden');
+}
+
+function buildMonthList(fromVal, toVal) {
+    const from = new Date(fromVal + 'T00:00:00');
+    const to   = new Date(toVal   + 'T00:00:00');
+    if (isNaN(from) || isNaN(to) || from > to) return null;
+    const months = [];
+    const cur = new Date(from.getFullYear(), from.getMonth(), 1);
+    const end = new Date(to.getFullYear(),   to.getMonth(),   1);
+    while (cur <= end) { months.push(new Date(cur)); cur.setMonth(cur.getMonth() + 1); }
+    return months;
+}
+
+function renderChips(months, fmt) {
+    if (months.length <= 36) {
+        return months.map(m => `<span class="date-chip">${fmt.format(m)}</span>`).join('');
+    }
+    return `<span class="date-chip-summary">${months.length} months — ${fmt.format(months[0])} → ${fmt.format(months[months.length - 1])}</span>`;
+}
+
+function updateDatePreview() {
+    const fromVal  = document.getElementById('load-date-from').value;
+    const toVal    = document.getElementById('load-date-to').value;
+    const preview  = document.getElementById('load-date-preview');
+    const simple   = document.getElementById('load-preview-simple');
+    const offset   = document.getElementById('load-preview-offset');
+
+    if (!fromVal || !toVal) { preview.classList.add('hidden'); return; }
+
+    const months = buildMonthList(fromVal, toVal);
+    if (!months) { preview.classList.add('hidden'); return; }
+
+    const fmt = new Intl.DateTimeFormat('en-US', { month: 'short', year: 'numeric' });
+
+    if (state.loadDataOp === 'baseline') {
+        const years  = parseInt(document.getElementById('load-offset-years').value)  || 0;
+        const mths   = parseInt(document.getElementById('load-offset-months').value) || 0;
+        const projected = months.map(d => {
+            const p = new Date(d);
+            p.setFullYear(p.getFullYear() + years);
+            p.setMonth(p.getMonth() + mths);
+            return p;
+        });
+
+        document.getElementById('load-chips-source').innerHTML    = renderChips(months,    fmt);
+        document.getElementById('load-chips-projected').innerHTML = renderChips(projected, fmt);
+        simple.classList.add('hidden');
+        offset.classList.remove('hidden');
+    } else {
+        simple.querySelector('.load-preview-label').textContent =
+            `${months.length} month${months.length !== 1 ? 's' : ''} covered`;
+        document.getElementById('load-date-chips').innerHTML = renderChips(months, fmt);
+        offset.classList.add('hidden');
+        simple.classList.remove('hidden');
+    }
+
+    preview.classList.remove('hidden');
+}
+
 async function submitLoadData() {
     const date_from = document.getElementById('load-date-from').value;
     const date_to   = document.getElementById('load-date-to').value;
@@ -391,10 +479,19 @@ async function submitLoadData() {
         note:    document.getElementById('load-note').value.trim() || undefined
     };
 
+    if (state.loadDataOp === 'baseline') {
+        const years  = parseInt(document.getElementById('load-offset-years').value)  || 0;
+        const months = parseInt(document.getElementById('load-offset-months').value) || 0;
+        const parts  = [];
+        if (years)  parts.push(`${years} year${years  !== 1 ? 's' : ''}`);
+        if (months) parts.push(`${months} month${months !== 1 ? 's' : ''}`);
+        body.date_offset = parts.length ? parts.join(' ') : '0 days';
+    }
+
     try {
         showStatus(`Loading ${state.loadDataOp}...`, 'info');
         const result = await api('POST', `/versions/${state.selectedVersionId}/${state.loadDataOp}`, body);
-        document.getElementById('load-data-form').classList.add('hidden');
+        hideLoadModal();
         showStatus(`${state.loadDataOp} loaded — ${result.rows_affected} rows`, 'success');
     } catch (err) {
         showStatus(err.message, 'error');
@@ -448,9 +545,163 @@ function openForecast() {
     switchView('forecast');
 }
 
+function openVersionBaseline() {
+    if (!state.selectedVersionId) return;
+    let v = null;
+    state.grids.versions.forEachNode(n => {
+        if (n.data.id === state.selectedVersionId) v = n.data;
+    });
+    if (!v) return;
+    setVersion(v);
+    switchView('baseline');
+}
+
+/* ============================================================
+   BASELINE WORKBENCH
+   ============================================================ */
+async function openBaselineWorkbench() {
+    if (!state.version) return;
+    document.getElementById('baseline-label').textContent =
+        `${state.source?.tname || ''} — ${state.version.name} [${state.version.status}]`;
+
+    // ensure colMeta loaded
+    if (!state.colMeta.length && state.source) {
+        state.colMeta = await api('GET', `/sources/${state.source.id}/cols`);
+    }
+
+    // populate column chips
+    const chips = document.getElementById('seg-col-chips');
+    chips.innerHTML = state.colMeta
+        .filter(c => c.role !== 'ignore')
+        .map(c => `<span class="col-chip" data-col="${c.cname}">${c.cname}</span>`)
+        .join('');
+    chips.querySelectorAll('.col-chip').forEach(chip => {
+        chip.addEventListener('click', () => insertAtCursor(document.getElementById('seg-where'), chip.dataset.col));
+    });
+
+    // reset form
+    document.getElementById('seg-description').value  = '';
+    document.getElementById('seg-offset-type').value  = '';
+    document.getElementById('seg-offset-value').value = '0';
+    document.getElementById('seg-where').value        = '';
+    document.getElementById('seg-timeline').classList.add('hidden');
+
+    await loadBaselineSegments();
+}
+
+function insertAtCursor(textarea, text) {
+    const start = textarea.selectionStart;
+    const end   = textarea.selectionEnd;
+    const val   = textarea.value;
+    textarea.value = val.slice(0, start) + text + val.slice(end);
+    textarea.selectionStart = textarea.selectionEnd = start + text.length;
+    textarea.focus();
+}
+
+async function loadBaselineSegments() {
+    if (!state.version) return;
+    try {
+        const logs = await api('GET', `/versions/${state.version.id}/log`);
+        const segments = logs.filter(l => l.operation === 'baseline');
+        renderBaselineSegments(segments);
+    } catch (err) {
+        showStatus(err.message, 'error');
+    }
+}
+
+function renderBaselineSegments(segments) {
+    const el = document.getElementById('baseline-segments-list');
+    if (segments.length === 0) {
+        el.innerHTML = '<div class="segments-empty">No segments loaded yet.</div>';
+        return;
+    }
+    el.innerHTML = segments.map(s => {
+        const params      = s.params || {};
+        const whereClause = params.where_clause && params.where_clause !== 'TRUE' ? params.where_clause : '';
+        const offset      = params.date_offset && params.date_offset !== '0 days' ? `offset: ${params.date_offset}` : '';
+        const paramsText  = [whereClause, offset].filter(Boolean).join('  ·  ');
+        const stamp       = s.stamp ? new Date(s.stamp).toLocaleString() : '';
+        return `
+        <div class="segment-card">
+            <div class="segment-card-header">
+                <span class="segment-card-note">${s.note || '(no description)'}</span>
+                <span class="segment-card-meta">${s.pf_user} — ${stamp}</span>
+                <button class="btn btn-sm btn-danger" data-logid="${s.id}">Undo</button>
+            </div>
+            ${paramsText ? `<div class="segment-card-params">${paramsText}</div>` : ''}
+        </div>`;
+    }).join('');
+}
+
+
+function updateTimelinePreview() {
+    const el          = document.getElementById('seg-timeline');
+    const offsetType  = document.getElementById('seg-offset-type').value;
+    const offsetValue = parseInt(document.getElementById('seg-offset-value').value) || 0;
+
+    if (!offsetType || !offsetValue) { el.classList.add('hidden'); return; }
+
+    el.innerHTML = `<div class="timeline-offset-indicator">+ ${offsetValue} ${offsetType}${offsetValue !== 1 ? 's' : ''} applied to date column</div>`;
+    el.classList.remove('hidden');
+}
+
+async function submitBaselineSegment() {
+    if (!state.version) return;
+
+    const offsetType  = document.getElementById('seg-offset-type').value;
+    const offsetValue = parseInt(document.getElementById('seg-offset-value').value) || 0;
+    const date_offset = (offsetType && offsetValue)
+        ? `${offsetValue} ${offsetType}${offsetValue !== 1 ? 's' : ''}`
+        : '0 days';
+
+    const body = {
+        where_clause: document.getElementById('seg-where').value.trim() || undefined,
+        date_offset,
+        pf_user: getPfUser(),
+        note:    document.getElementById('seg-description').value.trim() || undefined
+    };
+
+    try {
+        showStatus('Loading segment...', 'info');
+        const result = await api('POST', `/versions/${state.version.id}/baseline`, body);
+        showStatus(`Segment loaded — ${result.rows_affected} rows`, 'success');
+        document.getElementById('seg-description').value  = '';
+        document.getElementById('seg-where').value        = '';
+        document.getElementById('seg-offset-type').value  = '';
+        document.getElementById('seg-offset-value').value = '0';
+        document.getElementById('seg-timeline').classList.add('hidden');
+        await loadBaselineSegments();
+    } catch (err) {
+        showStatus(err.message, 'error');
+    }
+}
+
+async function clearBaseline() {
+    if (!state.version) return;
+    if (!confirm('Delete all baseline rows and segment history for this version? This cannot be undone.')) return;
+    try {
+        const result = await api('DELETE', `/versions/${state.version.id}/baseline`);
+        showStatus(`Baseline cleared — ${result.rows_deleted} rows removed`, 'success');
+        await loadBaselineSegments();
+    } catch (err) {
+        showStatus(err.message, 'error');
+    }
+}
+
 /* ============================================================
    FORECAST VIEW — data loading
    ============================================================ */
+function parseNumericRows(rows) {
+    const numericCols = state.colMeta
+        .filter(c => c.role === 'value' || c.role === 'units')
+        .map(c => c.cname);
+    return rows.map(row => {
+        const r = { ...row };
+        numericCols.forEach(col => { if (r[col] != null) r[col] = parseFloat(r[col]); });
+        return r;
+    });
+}
+
 async function loadForecastData() {
     if (!state.version) return;
     document.getElementById('forecast-label').textContent =
@@ -462,15 +713,8 @@ async function loadForecastData() {
         }
         showStatus('Loading forecast data...', 'info');
         const rawData = await api('GET', `/versions/${state.version.id}/data`);
-        const numericCols = state.colMeta
-            .filter(c => c.role === 'value' || c.role === 'units')
-            .map(c => c.cname);
-        const data = rawData.map(row => {
-            const r = { ...row };
-            numericCols.forEach(col => { if (r[col] != null) r[col] = parseFloat(r[col]); });
-            return r;
-        });
-        initPivotGrid(data);
+        const data = parseNumericRows(rawData);
+        await initPerspectiveViewer(data);
         showStatus(`Loaded ${data.length.toLocaleString()} rows`, 'success');
     } catch (err) {
         showStatus(err.message, 'error');
@@ -478,125 +722,100 @@ async function loadForecastData() {
 }
 
 /* ============================================================
-   FORECAST VIEW — pivot grid
+   FORECAST VIEW — Perspective pivot
    ============================================================ */
-function buildPivotColDefs() {
-    const defs = [];
+let _perspectivePromise = null;
+function loadPerspective() {
+    if (_perspectivePromise) return _perspectivePromise;
+    _perspectivePromise = (async () => {
+        const [{ default: perspective }] = await Promise.all([
+            import('https://cdn.jsdelivr.net/npm/@perspective-dev/client@4.4.0/dist/cdn/perspective.js'),
+            import('https://cdn.jsdelivr.net/npm/@perspective-dev/viewer@4.4.0/dist/cdn/perspective-viewer.js'),
+            import('https://cdn.jsdelivr.net/npm/@perspective-dev/viewer-datagrid@4.4.0/dist/cdn/perspective-viewer-datagrid.js'),
+            import('https://cdn.jsdelivr.net/npm/@perspective-dev/viewer-d3fc@4.4.0/dist/cdn/perspective-viewer-d3fc.js'),
+        ]);
+        return perspective;
+    })();
+    return _perspectivePromise;
+}
 
-    state.colMeta.forEach((c) => {
-        if (c.role === 'ignore') return;
-        const needsGetter = /\W/.test(c.cname);
-        const def = {
-            field:       c.cname,
-            headerName:  c.label || c.cname,
-            resizable:   true,
-            sortable:    true,
-            ...(needsGetter ? { valueGetter: p => p.data ? p.data[c.cname] : undefined } : {})
+function pspLayoutKey() {
+    return `psp_layout_pf_${state.version?.id}`;
+}
+
+function buildDefaultLayout() {
+    const dims   = state.colMeta.filter(c => c.role === 'dimension').map(c => c.cname);
+    const values = state.colMeta.filter(c => c.role === 'value' || c.role === 'units').map(c => c.cname);
+    const date   = state.colMeta.find(c => c.role === 'date')?.cname;
+    return {
+        group_by:  dims.slice(0, 2),           // first two dimensions as row groups
+        split_by:  date ? [date] : [],          // date as column pivot
+        columns:   values,
+        settings:  true,
+        plugin_config: { edit_mode: 'SELECT_ROW' }
     };
-        if (c.role === 'dimension' || c.role === 'date') {
-            def.enableRowGroup = true;
-            def.enablePivot    = true;
-        }
-        if (c.role === 'value' || c.role === 'units') {
-            def.enableValue    = true;
-            def.aggFunc        = 'sum';
-            def.type           = 'numericColumn';
-            def.valueFormatter = p => p.value != null
-                ? Number(p.value).toLocaleString(undefined, { maximumFractionDigits: 2 })
-                : '';
-        }
-        defs.push(def);
-
-        if (c.role === 'date') {
-            defs.push({
-                colId:       c.cname + '__month',
-                headerName:  (c.label || c.cname) + ' (Month)',
-                enableRowGroup: true,
-                enablePivot:    true,
-                valueGetter: p => {
-                    const v = p.data ? p.data[c.cname] : undefined;
-                    if (!v) return undefined;
-                    const d = new Date(v);
-                    return isNaN(d) ? undefined : `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}`;
-                }
-            });
-        }
-    });
-
-    // always include iter for grouping context
-    defs.push({ field: 'iter', headerName: 'Iter', enableRowGroup: true, enablePivot: true, width: 90 });
-    defs.push({ field: 'pf_user',    headerName: 'User',    width: 90, hide: true });
-    defs.push({ field: 'created_at', headerName: 'Created', width: 130, hide: true,
-        valueFormatter: p => p.value ? new Date(p.value).toLocaleDateString() : '' });
-
-    return defs;
 }
 
-function initPivotGrid(data) {
-    const el = document.getElementById('pivot-grid');
+async function initPerspectiveViewer(data) {
+    const tableName = `pf_${state.version.id}`;
 
-    if (state.grids.pivot) {
-        state.grids.pivot.setGridOption('rowData', data);
-        return;
+    // terminate old worker if reloading
+    if (state.pspWorker) {
+        try { state.pspWorker.terminate(); } catch (_) {}
+        state.pspWorker = null;
+        state.pspTable  = null;
     }
 
-    state.grids.pivot = agGrid.createGrid(el, {
-        columnDefs:           buildPivotColDefs(),
-        rowData:              data,
-        rowSelection:         'single',
-        groupDisplayType:     'singleColumn',
-        rowGroupPanelShow:    'always',
-        groupDefaultExpanded: 1,
-        suppressAggFuncInHeader: true,
-        animateRows:          true,
-        sideBar: {
-            toolPanels: [{
-                id:             'columns',
-                labelDefault:   'Columns',
-                labelKey:       'columns',
-                iconKey:        'columns',
-                toolPanel:      'agColumnsToolPanel',
-                toolPanelParams: {}
-            }],
-            defaultToolPanel: 'columns'
-        },
-        defaultColDef:        { resizable: true, sortable: true },
-        autoGroupColumnDef:   {
-            headerName:   'Group',
-            minWidth:     200,
-            cellRendererParams: { suppressCount: false }
-        },
-        headerHeight: 32,
-        rowHeight:    28,
-        onRowClicked: onPivotRowClicked
-    });
+    const perspective = await loadPerspective();
+    const worker      = await perspective.worker();
+    state.pspWorker   = worker;
+
+    const table    = await worker.table(data, { name: tableName });
+    state.pspTable = table;
+
+    const v = document.getElementById('pivot-viewer');
+
+    // re-attach click listener (use named handler so it can be replaced on refresh)
+    v._pspClickHandler = async (e) => {
+        const detail       = e.detail || {};
+        const eventFilters = (detail.config || {}).filter || [];
+        extractSliceFromPerspective(eventFilters);
+    };
+    v.removeEventListener('perspective-click', v._pspClickHandler);
+    v.addEventListener('perspective-click', v._pspClickHandler);
+
+    await v.load(worker);
+
+    const saved = localStorage.getItem(pspLayoutKey());
+    if (saved) {
+        const layout = JSON.parse(saved);
+        await v.restore({ ...layout, table: tableName });
+    } else {
+        await v.restore({ ...buildDefaultLayout(), table: tableName });
+    }
+
+    // update reset button visibility
+    document.getElementById('btn-reset-layout')
+        .classList.toggle('hidden', !localStorage.getItem(pspLayoutKey()));
 }
 
 /* ============================================================
    FORECAST VIEW — slice selection
    ============================================================ */
-function onPivotRowClicked(event) {
-    const node  = event.node;
-    state.slice = extractSliceFromNode(node);
+function extractSliceFromPerspective(eventFilters, config) {
+    const dimFields = new Set(state.colMeta.filter(c => c.role === 'dimension').map(c => c.cname));
+    const slice = {};
+    for (const [field, op, value] of eventFilters) {
+        if (op === '==' && dimFields.has(field) && value != null && value !== '') {
+            slice[field] = String(value);
+        }
+    }
+    state.slice = slice;
     renderSliceDisplay();
-
-    // populate recode and clone fields whenever slice changes
     renderDimFields('recode');
     renderDimFields('clone');
 }
 
-function extractSliceFromNode(node) {
-    const slice   = {};
-    let current = node;
-    while (current) {
-        if (current.field && current.key != null && current.key !== '') {
-            slice[current.field] = current.key;
-        }
-        current = current.parent;
-    }
-    return slice;
-}
-
 function renderSliceDisplay() {
     const display = document.getElementById('slice-display');
     const hasSlice = Object.keys(state.slice).length > 0;
@@ -695,7 +914,7 @@ async function submitScale() {
         document.getElementById('scale-value-incr').value = '';
         document.getElementById('scale-units-incr').value = '';
         document.getElementById('scale-note').value = '';
-        await loadForecastData();
+        if (state.pspTable) await state.pspTable.update(parseNumericRows(result.rows));
     } catch (err) {
         showStatus(err.message, 'error');
     }
@@ -721,7 +940,7 @@ async function submitRecode() {
         });
         showStatus(`Recode applied — ${result.rows_affected} rows inserted`, 'success');
         document.querySelectorAll('#recode-fields input[data-col], #recode-fields select[data-col]').forEach(i => { i.value = ''; });
-        await loadForecastData();
+        if (state.pspTable) await state.pspTable.update(parseNumericRows(result.rows));
     } catch (err) {
         showStatus(err.message, 'error');
     }
@@ -750,7 +969,7 @@ async function submitClone() {
         showStatus(`Clone applied — ${result.rows_affected} rows inserted`, 'success');
         document.querySelectorAll('#clone-fields input[data-col], #clone-fields select[data-col]').forEach(i => { i.value = ''; });
         document.getElementById('clone-scale').value = '1';
-        await loadForecastData();
+        if (state.pspTable) await state.pspTable.update(parseNumericRows(result.rows));
     } catch (err) {
         showStatus(err.message, 'error');
     }
@@ -780,6 +999,8 @@ function renderLogGrid(logs) {
         { field: 'operation', headerName: 'Operation',  width: 90 },
         { field: 'slice',     headerName: 'Slice',      flex: 1,
           valueFormatter: p => p.value ? JSON.stringify(p.value) : '' },
+        { field: 'params',    headerName: 'Params',     flex: 1,
+          valueFormatter: p => p.value ? JSON.stringify(p.value) : '' },
         { field: 'note',      headerName: 'Note',       flex: 1 },
         {
             headerName: '',
@@ -841,12 +1062,17 @@ document.addEventListener('DOMContentLoaded', () => {
     });
 
     // sources view buttons
+    document.getElementById('btn-preview').addEventListener('click', () => {
+        if (state.previewSchema && state.previewTname) {
+            showTablePreview(state.previewSchema, state.previewTname);
+        }
+    });
     document.getElementById('btn-register').addEventListener('click', () => {
         if (state.previewSchema && state.previewTname) {
             registerTable(state.previewSchema, state.previewTname);
         }
     });
-    document.getElementById('btn-back-sources').addEventListener('click', backToSources);
+    document.getElementById('btn-delete-source').addEventListener('click', deleteSource);
     document.getElementById('btn-save-cols').addEventListener('click', saveColMeta);
     document.getElementById('btn-generate-sql').addEventListener('click', generateSQL);
 
@@ -870,19 +1096,35 @@ document.addEventListener('DOMContentLoaded', () => {
         document.getElementById('new-version-form').classList.add('hidden');
     });
     document.getElementById('vbtn-forecast').addEventListener('click', openForecast);
-    document.getElementById('vbtn-baseline').addEventListener('click', () => showLoadForm('baseline'));
+    document.getElementById('vbtn-baseline').addEventListener('click', openVersionBaseline);
     document.getElementById('vbtn-reference').addEventListener('click', () => showLoadForm('reference'));
     document.getElementById('vbtn-toggle').addEventListener('click', toggleVersionStatus);
     document.getElementById('vbtn-delete').addEventListener('click', deleteVersion);
     document.getElementById('btn-load-submit').addEventListener('click', submitLoadData);
-    document.getElementById('btn-load-cancel').addEventListener('click', () => {
-        document.getElementById('load-data-form').classList.add('hidden');
-    });
+    document.getElementById('btn-load-cancel').addEventListener('click', hideLoadModal);
+    document.getElementById('btn-load-close').addEventListener('click', hideLoadModal);
+    document.getElementById('load-date-from').addEventListener('change', updateDatePreview);
+    document.getElementById('load-date-to').addEventListener('change', updateDatePreview);
+    document.getElementById('load-offset-years').addEventListener('input', updateDatePreview);
+    document.getElementById('load-offset-months').addEventListener('input', updateDatePreview);
 
     // forecast view buttons
     document.getElementById('btn-forecast-refresh').addEventListener('click', loadForecastData);
-    document.getElementById('btn-expand-all').addEventListener('click',   () => state.grids.pivot?.expandAll());
-    document.getElementById('btn-collapse-all').addEventListener('click', () => state.grids.pivot?.collapseAll());
+    document.getElementById('btn-save-layout').addEventListener('click', async () => {
+        const v = document.getElementById('pivot-viewer');
+        if (!v) return;
+        const layout = await v.save();
+        localStorage.setItem(pspLayoutKey(), JSON.stringify(layout));
+        document.getElementById('btn-reset-layout').classList.remove('hidden');
+        showStatus('Layout saved', 'success');
+    });
+    document.getElementById('btn-reset-layout').addEventListener('click', async () => {
+        const v = document.getElementById('pivot-viewer');
+        if (!v) return;
+        localStorage.removeItem(pspLayoutKey());
+        document.getElementById('btn-reset-layout').classList.add('hidden');
+        await v.restore(buildDefaultLayout());
+    });
     document.getElementById('btn-clear-slice').addEventListener('click', clearSlice);
 
     document.querySelectorAll('.op-tab').forEach(tab => {
@@ -899,6 +1141,32 @@ document.addEventListener('DOMContentLoaded', () => {
         if (btn) undoOperation(parseInt(btn.dataset.logid));
     });
 
+    // baseline workbench
+    document.getElementById('btn-load-segment').addEventListener('click', submitBaselineSegment);
+    document.getElementById('btn-clear-baseline').addEventListener('click', clearBaseline);
+    document.getElementById('seg-offset-type').addEventListener('change', updateTimelinePreview);
+    document.getElementById('seg-offset-value').addEventListener('input', updateTimelinePreview);
+
+    // undo in baseline segments list
+    document.getElementById('baseline-segments-list').addEventListener('click', async e => {
+        const btn = e.target.closest('[data-logid]');
+        if (!btn) return;
+        const logid = parseInt(btn.dataset.logid);
+        const result = await api('DELETE', `/log/${logid}`);
+        showStatus(`Segment undone — ${result.rows_deleted} rows removed`, 'success');
+        await loadBaselineSegments();
+    });
+
+    // tables search
+    document.getElementById('tables-search').addEventListener('input', e => {
+        state.grids.tables?.setGridOption('quickFilterText', e.target.value);
+    });
+
+    // columns search
+    document.getElementById('cols-search').addEventListener('input', e => {
+        state.grids.colMeta?.setGridOption('quickFilterText', e.target.value);
+    });
+
     // init sources view
     initSourcesView().catch(err => showStatus(err.message, 'error'));
 });

public/index.html

@@ -4,8 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Pivot Forecast</title>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ag-grid-community@31.0.0/styles/ag-grid.css">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ag-grid-community@31.0.0/styles/ag-theme-alpine.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@perspective-dev/viewer/dist/css/themes.css" crossorigin="anonymous">
     <link rel="stylesheet" href="styles.css">
 </head>
 <body>
@@ -17,6 +16,7 @@
         <ul class="nav-links">
             <li data-view="sources"  class="active">Sources</li>
             <li data-view="versions">Versions</li>
+            <li data-view="baseline">Baseline</li>
             <li data-view="forecast">Forecast</li>
             <li data-view="log">Log</li>
         </ul>
@@ -43,27 +43,43 @@
 
         <!-- ===== SOURCES VIEW ===== -->
         <div id="view-sources" class="view active">
-            <div class="two-col-layout">
-                <div class="panel">
+            <div class="sources-layout">
+                <!-- Left column: two stacked panels -->
+                <div class="sources-left-col">
+                    <div class="panel sources-tables-panel">
                         <div class="panel-header">
                             <span>Database Tables</span>
                             <div class="header-actions">
-                            <button id="btn-register" class="btn btn-primary hidden">Register Table</button>
+                                <button id="btn-preview" class="btn btn-sm hidden">Preview</button>
+                                <button id="btn-register" class="btn btn-primary btn-sm hidden">Register</button>
                             </div>
                         </div>
-                    <div id="tables-grid" class="ag-theme-alpine grid-fill"></div>
+                        <div class="tables-search-wrap">
+                            <input type="text" id="tables-search" placeholder="Search…" />
                         </div>
-                <div class="panel">
+                        <div id="tables-grid" class="ag-theme-alpine tables-grid"></div>
+                    </div>
+                    <div class="panel sources-list-panel">
                         <div class="panel-header">
-                        <span id="right-panel-title">Registered Sources</span>
+                            <span>Registered Sources</span>
+                            <button id="btn-delete-source" class="btn btn-danger btn-sm hidden">Delete</button>
+                        </div>
+                        <div id="sources-list-grid" class="ag-theme-alpine grid-fill"></div>
+                    </div>
+                </div>
+                <!-- Right column: column mapping workbench -->
+                <div class="panel sources-mapping-panel">
+                    <div class="panel-header">
+                        <span id="right-panel-title">Select a source to map columns</span>
                         <div class="header-actions">
-                            <button id="btn-back-sources"  class="btn hidden">← Sources</button>
                             <button id="btn-save-cols"    class="btn hidden">Save Columns</button>
                             <button id="btn-generate-sql" class="btn btn-primary hidden">Generate SQL</button>
                         </div>
                     </div>
-                    <div id="sources-list-grid" class="ag-theme-alpine grid-fill"></div>
-                    <div id="col-meta-grid"     class="ag-theme-alpine grid-fill hidden"></div>
+                    <div class="tables-search-wrap">
+                        <input type="text" id="cols-search" placeholder="Search columns…" />
+                    </div>
+                    <div id="col-meta-grid" class="ag-theme-alpine grid-fill"></div>
                 </div>
             </div>
         </div>
@@ -94,16 +110,49 @@
                 <button class="btn" id="vbtn-toggle">Close Version</button>
                 <button class="btn btn-danger" id="vbtn-delete">Delete</button>
             </div>
-            <div id="load-data-form" class="inline-form hidden">
-                <h3 id="load-data-title">Load Baseline</h3>
-                <div class="form-row">
-                    <label>Date From<input type="date" id="load-date-from" /></label>
-                    <label>Date To<input type="date" id="load-date-to" /></label>
-                    <label>Note<input type="text" id="load-note" placeholder="optional" /></label>
         </div>
-                <div class="form-actions">
-                    <button id="btn-load-submit" class="btn btn-primary">Load</button>
-                    <button id="btn-load-cancel" class="btn">Cancel</button>
+
+        <!-- ===== BASELINE WORKBENCH VIEW ===== -->
+        <div id="view-baseline" class="view hidden">
+            <div class="workbench-toolbar">
+                <span id="baseline-label">No version selected</span>
+                <button id="btn-clear-baseline" class="btn btn-danger">Clear Baseline</button>
+            </div>
+            <div class="baseline-layout">
+                <div class="baseline-form-panel">
+                    <div class="panel-section-title">Add Segment</div>
+                    <div class="baseline-form">
+                        <label class="baseline-field-label">Description
+                            <input type="text" id="seg-description" placeholder="e.g. All orders FY2024" />
+                        </label>
+                        <div class="offset-row">
+                            <label class="baseline-field-label">Offset Type
+                                <select id="seg-offset-type">
+                                    <option value="">— none —</option>
+                                    <option value="year">Year</option>
+                                    <option value="month">Month</option>
+                                    <option value="week">Week</option>
+                                    <option value="day">Day</option>
+                                </select>
+                            </label>
+                            <label class="baseline-field-label">Offset Value
+                                <input type="number" id="seg-offset-value" min="0" value="0" />
+                            </label>
+                        </div>
+                        <div class="where-section">
+                            <div class="filter-section-label">WHERE clause</div>
+                            <div id="seg-col-chips" class="col-chips"></div>
+                            <textarea id="seg-where" class="where-textarea" rows="4" placeholder="e.g. order_date BETWEEN '2024-01-01' AND '2024-12-31' AND region = 'East'"></textarea>
+                        </div>
+                        <div id="seg-timeline" class="timeline-preview hidden"></div>
+                        <button id="btn-load-segment" class="btn btn-primary">Load Segment</button>
+                    </div>
+                </div>
+                <div class="baseline-segments-panel">
+                    <div class="panel-section-title">Loaded Segments</div>
+                    <div id="baseline-segments-list">
+                        <div class="segments-empty">No segments loaded yet.</div>
+                    </div>
                 </div>
             </div>
         </div>
@@ -113,12 +162,12 @@
             <div class="forecast-toolbar">
                 <span id="forecast-label">No version selected</span>
                 <button id="btn-forecast-refresh" class="btn">Refresh</button>
-                <button id="btn-expand-all" class="btn">Expand All</button>
-                <button id="btn-collapse-all" class="btn">Collapse All</button>
+                <button id="btn-save-layout" class="btn">Save layout</button>
+                <button id="btn-reset-layout" class="btn hidden">Reset layout</button>
             </div>
             <div class="forecast-layout">
                 <div id="pivot-panel">
-                    <div id="pivot-grid" class="ag-theme-alpine"></div>
+                    <perspective-viewer id="pivot-viewer" theme="Pro Light"></perspective-viewer>
                 </div>
                 <div id="operation-panel">
                     <div class="op-section">
@@ -170,6 +219,54 @@
     </main>
 </div>
 
+<!-- Load baseline / reference modal -->
+<div id="load-data-modal" class="modal-overlay hidden">
+    <div class="modal load-data-modal">
+        <div class="modal-header">
+            <span id="load-data-title">Load Baseline</span>
+            <button id="btn-load-close" class="btn-icon">×</button>
+        </div>
+        <div id="load-data-body">
+            <div class="load-form-fields">
+                <label>Date From<input type="date" id="load-date-from" /></label>
+                <label>Date To<input type="date" id="load-date-to" /></label>
+                <div id="load-offset-fields">
+                    <div class="load-offset-row">
+                        <label>Offset Years<input type="number" id="load-offset-years" min="0" value="0" /></label>
+                        <label>Offset Months<input type="number" id="load-offset-months" min="0" value="0" /></label>
+                    </div>
+                </div>
+                <label>Note<input type="text" id="load-note" placeholder="optional" /></label>
+            </div>
+            <div id="load-date-preview" class="load-date-preview hidden">
+                <!-- reference: single chip list -->
+                <div id="load-preview-simple">
+                    <div class="load-preview-label"></div>
+                    <div id="load-date-chips" class="date-chips"></div>
+                </div>
+                <!-- baseline: before → after -->
+                <div id="load-preview-offset" class="hidden">
+                    <div class="load-preview-columns">
+                        <div class="load-preview-col">
+                            <div class="load-preview-label">Source</div>
+                            <div id="load-chips-source" class="date-chips"></div>
+                        </div>
+                        <div class="load-preview-arrow">→</div>
+                        <div class="load-preview-col">
+                            <div class="load-preview-label">Projected</div>
+                            <div id="load-chips-projected" class="date-chips"></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="modal-footer">
+            <button id="btn-load-submit" class="btn btn-primary">Load</button>
+            <button id="btn-load-cancel" class="btn">Cancel</button>
+        </div>
+    </div>
+</div>
+
 <!-- Table preview modal -->
 <div id="modal-overlay" class="modal-overlay hidden">
     <div class="modal">

public/mockup.html

@@ -0,0 +1,888 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Pivot Forecast — Mockup</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <style>
+    .help-popup { display:none; position:absolute; z-index:50; }
+    .help-popup.open { display:block; }
+    #sidebar { transition: width 150ms ease; }
+    #sidebar.expanded { width: 200px; }
+    #sidebar.collapsed { width: 48px; }
+    #sidebar .nav-label { transition: opacity 100ms ease; }
+    #sidebar.collapsed .nav-label { opacity:0; pointer-events:none; width:0; overflow:hidden; }
+    #sidebar.expanded .nav-label { opacity:1; }
+    #sidebar .app-title { transition: opacity 100ms ease; }
+    #sidebar.collapsed .app-title { opacity:0; pointer-events:none; width:0; overflow:hidden; }
+  </style>
+</head>
+<body class="bg-gray-100 text-sm text-gray-800 font-sans">
+
+<!-- Help popups (global, positioned by JS) -->
+<div id="help-overlay" class="fixed inset-0 z-40 hidden" onclick="closeHelp()"></div>
+<div id="help-box" class="help-popup w-72 bg-gray-900 text-gray-100 text-xs rounded-lg shadow-xl p-4 leading-relaxed"></div>
+
+<div class="flex h-screen">
+
+  <!-- Side Nav -->
+  <div id="sidebar" class="expanded bg-white border-r border-gray-200 flex flex-col shrink-0 overflow-hidden">
+
+    <!-- Logo / toggle -->
+    <div class="h-12 flex items-center px-3 border-b border-gray-100 gap-2 shrink-0">
+      <button onclick="toggleSidebar()" class="w-8 h-8 flex items-center justify-center rounded hover:bg-gray-100 text-gray-400 shrink-0" title="Toggle sidebar">
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="1" y="3" width="14" height="1.5" rx="0.75" fill="currentColor"/><rect x="1" y="7.25" width="14" height="1.5" rx="0.75" fill="currentColor"/><rect x="1" y="11.5" width="14" height="1.5" rx="0.75" fill="currentColor"/></svg>
+      </button>
+      <span class="app-title text-xs font-semibold text-gray-600 tracking-wide uppercase whitespace-nowrap">Pivot Forecast</span>
+    </div>
+
+    <!-- Nav items -->
+    <nav class="flex flex-col gap-0.5 p-2 flex-1">
+      <button onclick="show('setup')"    id="tab-setup"    class="nav-item flex items-center gap-3 px-2 py-2 rounded text-gray-500 hover:bg-gray-100 hover:text-gray-800 text-left w-full" title="Setup">
+        <!-- sliders / config icon -->
+        <svg class="shrink-0" width="18" height="18" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round">
+          <line x1="3" y1="5" x2="17" y2="5"/><circle cx="7" cy="5" r="1.8" fill="white" stroke="currentColor" stroke-width="1.6"/>
+          <line x1="3" y1="10" x2="17" y2="10"/><circle cx="13" cy="10" r="1.8" fill="white" stroke="currentColor" stroke-width="1.6"/>
+          <line x1="3" y1="15" x2="17" y2="15"/><circle cx="8" cy="15" r="1.8" fill="white" stroke="currentColor" stroke-width="1.6"/>
+        </svg>
+        <span class="nav-label text-sm whitespace-nowrap">Setup</span>
+      </button>
+      <button onclick="show('baseline')" id="tab-baseline" class="nav-item flex items-center gap-3 px-2 py-2 rounded text-gray-500 hover:bg-gray-100 hover:text-gray-800 text-left w-full" title="Baseline">
+        <!-- layers / stack icon -->
+        <svg class="shrink-0" width="18" height="18" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
+          <polygon points="10,2 18,7 10,12 2,7"/>
+          <polyline points="2,12 10,17 18,12"/>
+        </svg>
+        <span class="nav-label text-sm whitespace-nowrap">Baseline</span>
+      </button>
+      <button onclick="show('forecast')" id="tab-forecast" class="nav-item flex items-center gap-3 px-2 py-2 rounded text-gray-500 hover:bg-gray-100 hover:text-gray-800 text-left w-full" title="Forecast">
+        <!-- trending up / chart icon -->
+        <svg class="shrink-0" width="18" height="18" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
+          <polyline points="2,15 7,9 11,12 18,4"/>
+          <polyline points="14,4 18,4 18,8"/>
+        </svg>
+        <span class="nav-label text-sm whitespace-nowrap">Forecast</span>
+      </button>
+    </nav>
+
+  </div>
+
+  <div class="flex-1 overflow-hidden flex flex-col">
+
+    <!-- Status bar -->
+    <div class="bg-white border-b border-gray-100 px-4 h-8 flex items-center gap-4 shrink-0 text-xs">
+      <span class="text-gray-400">Source</span>
+      <span class="font-medium text-gray-700">sales_orders</span>
+      <span class="text-gray-200">|</span>
+      <span class="text-gray-400">Version</span>
+      <span class="font-medium text-gray-700">FY2026 Plan</span>
+      <span class="text-gray-200">|</span>
+      <span class="text-gray-400">Baseline</span>
+      <span class="font-medium text-gray-700">44,313 rows</span>
+      <span class="text-gray-200">|</span>
+      <span class="text-gray-400">Status</span>
+      <span class="text-green-600 font-medium">open</span>
+    </div>
+
+    <!-- ① SETUP -->
+    <div id="view-setup" class="hidden h-full flex gap-0 overflow-hidden">
+
+      <!-- All Tables -->
+      <div class="w-64 bg-white border-r border-gray-200 flex flex-col shrink-0">
+        <div class="px-3 py-2 border-b border-gray-100 text-xs font-medium text-gray-500 uppercase tracking-wide">All Tables</div>
+        <div class="overflow-y-auto flex-1">
+          <table class="w-full text-xs">
+            <thead class="sticky top-0 bg-gray-50">
+              <tr class="text-left text-gray-400 border-b border-gray-100">
+                <th class="px-3 py-1.5 font-medium">schema</th>
+                <th class="px-3 py-1.5 font-medium">table</th>
+                <th class="px-3 py-1.5 font-medium text-right">rows</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr onclick="peekTable('sales_orders')" class="border-t border-gray-50 hover:bg-blue-50 cursor-pointer bg-blue-50">
+                <td class="px-3 py-1.5 text-gray-400">public</td>
+                <td class="px-3 py-1.5 font-medium text-blue-600">sales_orders</td>
+                <td class="px-3 py-1.5 text-right text-gray-500">48,291</td>
+              </tr>
+              <tr onclick="peekTable('invoices')" class="border-t border-gray-50 hover:bg-blue-50 cursor-pointer">
+                <td class="px-3 py-1.5 text-gray-400">public</td>
+                <td class="px-3 py-1.5">invoices</td>
+                <td class="px-3 py-1.5 text-right text-gray-500">12,004</td>
+              </tr>
+              <tr onclick="peekTable('products')" class="border-t border-gray-50 hover:bg-blue-50 cursor-pointer">
+                <td class="px-3 py-1.5 text-gray-400">public</td>
+                <td class="px-3 py-1.5">products</td>
+                <td class="px-3 py-1.5 text-right text-gray-500">891</td>
+              </tr>
+              <tr onclick="peekTable('summary_mv')" class="border-t border-gray-50 hover:bg-blue-50 cursor-pointer">
+                <td class="px-3 py-1.5 text-gray-400">rpt</td>
+                <td class="px-3 py-1.5">summary_mv</td>
+                <td class="px-3 py-1.5 text-right text-gray-500">3,442</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+
+      <div class="flex-1 flex flex-col gap-4 overflow-hidden min-w-0 p-4">
+
+        <div class="bg-white border border-gray-200 rounded shrink-0">
+          <div class="px-3 py-2 border-b border-gray-100 text-xs font-medium text-gray-500 uppercase tracking-wide flex items-center justify-between">
+            <span>Registered Sources</span>
+            <button class="text-blue-600 hover:text-blue-700 text-xs font-medium">+ Register table</button>
+          </div>
+          <table class="w-full text-xs">
+            <tbody>
+              <tr class="border-t border-gray-50 hover:bg-gray-50 cursor-pointer bg-blue-50">
+                <td class="px-3 py-2 font-medium text-blue-600">sales_orders</td>
+                <td class="px-3 py-2 text-green-600 font-medium">✓ SQL ready</td>
+                <td class="px-3 py-2 text-gray-400 text-right">public</td>
+              </tr>
+              <tr class="border-t border-gray-50 hover:bg-gray-50 cursor-pointer">
+                <td class="px-3 py-2 font-medium">invoices</td>
+                <td class="px-3 py-2 text-green-600 font-medium">✓ SQL ready</td>
+                <td class="px-3 py-2 text-gray-400 text-right">public</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <div class="bg-white border border-gray-200 rounded flex flex-col flex-1 overflow-hidden">
+          <div class="px-3 py-2 border-b border-gray-100 text-xs font-medium text-gray-500 uppercase tracking-wide flex items-center justify-between shrink-0">
+            <span>Col Meta — <span class="text-gray-700">sales_orders</span></span>
+            <button class="bg-blue-600 text-white text-xs px-3 py-1 rounded hover:bg-blue-700">Generate SQL</button>
+          </div>
+          <div class="overflow-y-auto flex-1">
+            <table class="w-full text-xs">
+              <thead class="sticky top-0 bg-gray-50">
+                <tr class="text-left text-gray-400 border-b border-gray-100">
+                  <th class="px-3 py-1.5 font-medium">column</th>
+                  <th class="px-3 py-1.5 font-medium">role</th>
+                  <th class="px-3 py-1.5 font-medium text-center">key</th>
+                  <th class="px-3 py-1.5 font-medium">label</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr class="border-t border-gray-50"><td class="px-3 py-1.5 font-mono text-gray-700">customer</td><td class="px-3 py-1.5"><span class="bg-blue-50 text-blue-700 px-1.5 py-0.5 rounded">dimension</span></td><td class="px-3 py-1.5 text-center text-green-500">✓</td><td class="px-3 py-1.5 text-gray-400">—</td></tr>
+                <tr class="border-t border-gray-50"><td class="px-3 py-1.5 font-mono text-gray-700">channel</td><td class="px-3 py-1.5"><span class="bg-blue-50 text-blue-700 px-1.5 py-0.5 rounded">dimension</span></td><td class="px-3 py-1.5 text-center text-green-500">✓</td><td class="px-3 py-1.5 text-gray-400">—</td></tr>
+                <tr class="border-t border-gray-50"><td class="px-3 py-1.5 font-mono text-gray-700">part</td><td class="px-3 py-1.5"><span class="bg-blue-50 text-blue-700 px-1.5 py-0.5 rounded">dimension</span></td><td class="px-3 py-1.5 text-center text-gray-300">✓</td><td class="px-3 py-1.5 text-gray-400">—</td></tr>
+                <tr class="border-t border-gray-50"><td class="px-3 py-1.5 font-mono text-gray-700">geography</td><td class="px-3 py-1.5"><span class="bg-blue-50 text-blue-700 px-1.5 py-0.5 rounded">dimension</span></td><td class="px-3 py-1.5 text-center text-gray-300">✓</td><td class="px-3 py-1.5 text-gray-400">—</td></tr>
+                <tr class="border-t border-gray-50"><td class="px-3 py-1.5 font-mono text-gray-700">order_date</td><td class="px-3 py-1.5"><span class="bg-purple-50 text-purple-700 px-1.5 py-0.5 rounded">date</span></td><td class="px-3 py-1.5 text-center text-gray-300">✓</td><td class="px-3 py-1.5 text-gray-400">—</td></tr>
+                <tr class="border-t border-gray-50"><td class="px-3 py-1.5 font-mono text-gray-700">ship_date</td><td class="px-3 py-1.5"><span class="bg-yellow-50 text-yellow-700 px-1.5 py-0.5 rounded">filter</span></td><td class="px-3 py-1.5 text-center text-gray-300">✓</td><td class="px-3 py-1.5 text-gray-400">—</td></tr>
+                <tr class="border-t border-gray-50"><td class="px-3 py-1.5 font-mono text-gray-700">status</td><td class="px-3 py-1.5"><span class="bg-yellow-50 text-yellow-700 px-1.5 py-0.5 rounded">filter</span></td><td class="px-3 py-1.5 text-center text-gray-300">✓</td><td class="px-3 py-1.5 text-gray-400">—</td></tr>
+                <tr class="border-t border-gray-50"><td class="px-3 py-1.5 font-mono text-gray-700">units</td><td class="px-3 py-1.5"><span class="bg-green-50 text-green-700 px-1.5 py-0.5 rounded">units</span></td><td class="px-3 py-1.5 text-center text-gray-300">✓</td><td class="px-3 py-1.5 text-gray-400">—</td></tr>
+                <tr class="border-t border-gray-50"><td class="px-3 py-1.5 font-mono text-gray-700">revenue</td><td class="px-3 py-1.5"><span class="bg-green-50 text-green-700 px-1.5 py-0.5 rounded">value</span></td><td class="px-3 py-1.5 text-center text-gray-300">✓</td><td class="px-3 py-1.5 text-gray-400">—</td></tr>
+                <tr class="border-t border-gray-50"><td class="px-3 py-1.5 font-mono text-gray-700">internal_id</td><td class="px-3 py-1.5"><span class="bg-gray-100 text-gray-400 px-1.5 py-0.5 rounded">ignore</span></td><td class="px-3 py-1.5 text-center text-gray-300">✓</td><td class="px-3 py-1.5 text-gray-400">—</td></tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+
+      </div>
+    </div>
+
+    <!-- ② BASELINE -->
+    <div id="view-baseline" class="hidden h-full overflow-y-auto">
+      <div class="p-4 flex flex-col gap-4">
+
+      <!-- Version bar -->
+      <div class="flex items-center gap-4">
+        <div class="flex items-center gap-2">
+          <span class="text-xs text-gray-500">Source</span>
+          <select class="border border-gray-200 rounded px-2 py-1 text-sm bg-white">
+            <option>sales_orders</option><option>invoices</option>
+          </select>
+        </div>
+        <div class="flex items-center gap-2">
+          <span class="text-xs text-gray-500">Version</span>
+          <select class="border border-gray-200 rounded px-2 py-1 text-sm bg-white">
+            <option>FY2026 Plan</option><option>FY2026 Conservative</option>
+          </select>
+        </div>
+        <button class="text-blue-600 hover:text-blue-700 text-xs font-medium border border-blue-200 px-2 py-1 rounded">+ New version</button>
+      </div>
+
+      <!-- Segments loaded -->
+      <div class="bg-white border border-gray-200 rounded">
+        <div class="px-3 py-2 border-b border-gray-100 text-xs font-medium text-gray-500 uppercase tracking-wide flex items-center justify-between">
+          <span>Segments loaded</span>
+          <button class="text-red-500 hover:text-red-600 text-xs normal-case font-normal">Clear all baseline</button>
+        </div>
+        <table class="w-full text-xs">
+          <thead class="bg-gray-50">
+            <tr class="text-left text-gray-400 border-b border-gray-100">
+              <th class="px-3 py-1.5 font-medium">#</th>
+              <th class="px-3 py-1.5 font-medium">description</th>
+              <th class="px-3 py-1.5 font-medium text-right">rows</th>
+              <th class="px-3 py-1.5 font-medium">by</th>
+              <th class="px-3 py-1.5 font-medium">date</th>
+              <th class="px-3 py-1.5 font-medium"></th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr class="border-t border-gray-50">
+              <td class="px-3 py-2 text-gray-400">1</td>
+              <td class="px-3 py-2">FY25 actuals +1yr</td>
+              <td class="px-3 py-2 text-right font-mono">41,204</td>
+              <td class="px-3 py-2 text-gray-500">paul</td>
+              <td class="px-3 py-2 text-gray-400">Apr 24</td>
+              <td class="px-3 py-2 text-right"><button class="text-gray-400 hover:text-red-500 text-xs">Undo</button></td>
+            </tr>
+            <tr class="border-t border-gray-50">
+              <td class="px-3 py-2 text-gray-400">2</td>
+              <td class="px-3 py-2">Open orders</td>
+              <td class="px-3 py-2 text-right font-mono">3,109</td>
+              <td class="px-3 py-2 text-gray-500">paul</td>
+              <td class="px-3 py-2 text-gray-400">Apr 24</td>
+              <td class="px-3 py-2 text-right"><button class="text-gray-400 hover:text-red-500 text-xs">Undo</button></td>
+            </tr>
+          </tbody>
+          <tfoot>
+            <tr class="border-t border-gray-100 bg-gray-50">
+              <td colspan="2" class="px-3 py-1.5 text-gray-500 text-xs">Total baseline rows</td>
+              <td class="px-3 py-1.5 text-right font-mono font-medium">44,313</td>
+              <td colspan="3"></td>
+            </tr>
+          </tfoot>
+        </table>
+      </div>
+
+      <!-- Add Segment -->
+      <div class="bg-white border border-gray-200 rounded">
+        <div class="px-3 py-2 border-b border-gray-100 text-xs font-medium text-gray-500 uppercase tracking-wide flex items-center justify-between">
+          <span>Add Segment</span>
+          <button onclick="showHelp(this,'segment')" class="text-gray-300 hover:text-gray-500 text-xs normal-case font-normal">? Help</button>
+        </div>
+        <div class="p-4 flex flex-col gap-4">
+
+          <div class="flex items-center gap-3">
+            <label class="text-xs text-gray-500 w-28">Description</label>
+            <input type="text" placeholder="e.g. FY25 actuals shifted +1yr" class="border border-gray-200 rounded px-2 py-1.5 text-sm flex-1 max-w-sm" />
+          </div>
+
+          <!-- Description -->
+          <div class="flex flex-col gap-1">
+            <label class="text-xs text-gray-500">Description</label>
+            <input type="text" placeholder="e.g. FY25 actuals shifted +1yr" class="border border-gray-200 rounded px-2 py-1.5 text-sm bg-white w-full max-w-sm" />
+          </div>
+
+          <!-- Filters -->
+          <div class="flex flex-col gap-2">
+            <div class="flex items-center justify-between">
+              <label class="text-xs text-gray-500">Filters</label>
+              <div class="flex items-center gap-2">
+                <button onclick="showHelp(this,'filters')" class="text-gray-300 hover:text-gray-500 text-xs">?</button>
+                <button class="text-blue-600 hover:text-blue-700 text-xs font-medium">+ Add filter</button>
+              </div>
+            </div>
+            <div class="flex flex-col gap-1.5">
+              <div class="flex items-center gap-2">
+                <select class="border border-gray-200 rounded px-2 py-1 text-xs bg-white">
+                  <option>order_date</option><option>ship_date</option><option>status</option>
+                </select>
+                <select class="border border-gray-200 rounded px-2 py-1 text-xs bg-white">
+                  <option>BETWEEN</option><option>=</option><option>IN</option><option>NOT IN</option>
+                </select>
+                <input id="date-from" type="text" value="2025-01-01" oninput="drawTimeline()" class="border border-gray-200 rounded px-2 py-1 text-xs w-24 font-mono bg-white" />
+                <span class="text-gray-400 text-xs">and</span>
+                <input id="date-to" type="text" value="2025-12-31" oninput="drawTimeline()" class="border border-gray-200 rounded px-2 py-1 text-xs w-24 font-mono bg-white" />
+                <button class="text-gray-300 hover:text-red-400 text-xs">✕</button>
+              </div>
+            </div>
+          </div>
+
+          <!-- Date offset -->
+          <div class="flex flex-col gap-2">
+            <div class="flex items-center justify-between">
+              <label class="text-xs text-gray-500">Date offset</label>
+              <button onclick="showHelp(this,'offset')" class="text-gray-300 hover:text-gray-500 text-xs">?</button>
+            </div>
+            <div class="flex items-center gap-2">
+              <input id="offset-yr" type="number" value="1" min="0" oninput="drawTimeline()" class="border border-gray-200 rounded px-2 py-1 text-sm w-16 text-center bg-white" />
+              <span class="text-xs text-gray-500">yr</span>
+              <input id="offset-mo" type="number" value="0" min="0" max="11" oninput="drawTimeline()" class="border border-gray-200 rounded px-2 py-1 text-sm w-16 text-center bg-white" />
+              <span class="text-xs text-gray-500">mo</span>
+            </div>
+          </div>
+
+          <!-- Timeline -->
+          <div class="flex flex-col gap-1">
+            <div class="flex items-center justify-between">
+              <label class="text-xs text-gray-500">Timeline preview</label>
+              <button onclick="showHelp(this,'timeline')" class="text-gray-300 hover:text-gray-500 text-xs">?</button>
+            </div>
+            <div class="bg-white border border-gray-200 rounded p-3">
+              <canvas id="timeline-canvas" height="90" style="width:100%;display:block;"></canvas>
+            </div>
+          </div>
+
+          <!-- Note + submit -->
+          <div class="flex items-end gap-3">
+            <div class="flex flex-col gap-1 flex-1 max-w-xs">
+              <label class="text-xs text-gray-500">Note</label>
+              <input type="text" placeholder="optional" class="border border-gray-200 rounded px-2 py-1.5 text-sm bg-white" />
+            </div>
+            <button class="bg-blue-600 text-white text-xs px-5 py-2 rounded hover:bg-blue-700 shrink-0">Load Segment</button>
+          </div>
+
+        </div>
+
+      <!-- Reference -->
+      <div class="bg-white border border-gray-200 rounded">
+        <div class="px-3 py-2 border-b border-gray-100 text-xs font-medium text-gray-500 uppercase tracking-wide flex items-center justify-between">
+          <span>Reference <span class="text-gray-300 font-normal normal-case">optional</span></span>
+          <button onclick="showHelp(this,'reference')" class="text-gray-300 hover:text-gray-500 text-xs normal-case font-normal">?</button>
+        </div>
+        <div class="p-4 flex items-center gap-3">
+          <label class="text-xs text-gray-500 w-28">Date range</label>
+          <input type="text" value="2024-01-01" class="border border-gray-200 rounded px-2 py-1 text-xs w-28 font-mono" />
+          <span class="text-xs text-gray-400">to</span>
+          <input type="text" value="2024-12-31" class="border border-gray-200 rounded px-2 py-1 text-xs w-28 font-mono" />
+          <input type="text" placeholder="note" class="border border-gray-200 rounded px-2 py-1 text-sm flex-1 max-w-xs" />
+          <button class="border border-gray-200 text-gray-600 text-xs px-4 py-1.5 rounded hover:bg-gray-50">Load Reference</button>
+        </div>
+      </div>
+
+      </div>
+    </div>
+
+    <!-- ③ FORECAST -->
+    <div id="view-forecast" class="hidden h-full flex flex-col overflow-hidden">
+
+      <div class="bg-white border-b border-gray-200 px-4 py-2 flex items-center gap-3 shrink-0">
+        <div class="flex items-center gap-2">
+          <span class="text-xs text-gray-500">Version</span>
+          <select class="border border-gray-200 rounded px-2 py-1 text-sm bg-white">
+            <option>FY2026 Plan</option>
+            <option>FY2026 Conservative</option>
+          </select>
+        </div>
+        <div class="flex-1"></div>
+        <button class="text-xs text-gray-500 hover:text-gray-700 border border-gray-200 px-3 py-1 rounded">Refresh</button>
+        <button class="text-xs text-gray-500 hover:text-gray-700 border border-gray-200 px-3 py-1 rounded">Save layout</button>
+        <button class="text-xs text-gray-500 hover:text-gray-700 border border-gray-200 px-3 py-1 rounded">Reset layout</button>
+      </div>
+
+      <div class="flex flex-1 overflow-hidden gap-0">
+
+        <div class="flex-1 overflow-hidden flex flex-col bg-white border-r border-gray-200">
+          <div class="flex-1 overflow-hidden relative">
+            <table class="w-full text-xs">
+              <thead class="sticky top-0 bg-gray-50 border-b border-gray-200">
+                <tr class="text-right text-gray-500">
+                  <th class="px-3 py-2 text-left text-gray-600 font-medium">channel</th>
+                  <th class="px-3 py-2 font-medium">Jan 2026</th>
+                  <th class="px-3 py-2 font-medium">Feb 2026</th>
+                  <th class="px-3 py-2 font-medium">Mar 2026</th>
+                  <th class="px-3 py-2 font-medium">Apr 2026</th>
+                  <th class="px-3 py-2 font-medium">May 2026</th>
+                  <th class="px-3 py-2 font-medium">Jun 2026</th>
+                  <th class="px-3 py-2 font-medium text-gray-800">Total</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr class="border-t border-gray-100 hover:bg-gray-50 cursor-pointer">
+                  <td class="px-3 py-2 font-medium">DIR</td>
+                  <td class="px-3 py-2 text-right font-mono">412,000</td>
+                  <td class="px-3 py-2 text-right font-mono">388,000</td>
+                  <td class="px-3 py-2 text-right font-mono">425,000</td>
+                  <td class="px-3 py-2 text-right font-mono">401,000</td>
+                  <td class="px-3 py-2 text-right font-mono">390,000</td>
+                  <td class="px-3 py-2 text-right font-mono">410,000</td>
+                  <td class="px-3 py-2 text-right font-mono font-medium">2,426,000</td>
+                </tr>
+                <tr class="border-t border-gray-100 hover:bg-blue-50 cursor-pointer bg-blue-50">
+                  <td class="px-3 py-2 font-medium text-blue-700">WHS ◂</td>
+                  <td class="px-3 py-2 text-right font-mono text-blue-700">290,000</td>
+                  <td class="px-3 py-2 text-right font-mono text-blue-700">310,000</td>
+                  <td class="px-3 py-2 text-right font-mono text-blue-700">298,000</td>
+                  <td class="px-3 py-2 text-right font-mono text-blue-700">315,000</td>
+                  <td class="px-3 py-2 text-right font-mono text-blue-700">305,000</td>
+                  <td class="px-3 py-2 text-right font-mono text-blue-700">320,000</td>
+                  <td class="px-3 py-2 text-right font-mono font-medium text-blue-700">1,838,000</td>
+                </tr>
+                <tr class="border-t border-gray-100 hover:bg-gray-50 cursor-pointer">
+                  <td class="px-3 py-2 font-medium">ECOM</td>
+                  <td class="px-3 py-2 text-right font-mono">155,000</td>
+                  <td class="px-3 py-2 text-right font-mono">162,000</td>
+                  <td class="px-3 py-2 text-right font-mono">170,000</td>
+                  <td class="px-3 py-2 text-right font-mono">158,000</td>
+                  <td class="px-3 py-2 text-right font-mono">165,000</td>
+                  <td class="px-3 py-2 text-right font-mono">175,000</td>
+                  <td class="px-3 py-2 text-right font-mono font-medium">985,000</td>
+                </tr>
+                <tr class="border-t-2 border-gray-200 bg-gray-50">
+                  <td class="px-3 py-2 font-medium text-gray-700">Total</td>
+                  <td class="px-3 py-2 text-right font-mono font-medium">857,000</td>
+                  <td class="px-3 py-2 text-right font-mono font-medium">860,000</td>
+                  <td class="px-3 py-2 text-right font-mono font-medium">893,000</td>
+                  <td class="px-3 py-2 text-right font-mono font-medium">874,000</td>
+                  <td class="px-3 py-2 text-right font-mono font-medium">860,000</td>
+                  <td class="px-3 py-2 text-right font-mono font-medium">905,000</td>
+                  <td class="px-3 py-2 text-right font-mono font-medium">5,249,000</td>
+                </tr>
+              </tbody>
+            </table>
+            <div class="absolute bottom-2 right-3 text-xs text-gray-300 italic">Perspective viewer</div>
+          </div>
+        </div>
+
+        <div class="w-56 bg-white flex flex-col shrink-0">
+          <div class="px-3 py-2 border-b border-gray-100 text-xs font-medium text-gray-500 uppercase tracking-wide flex items-center justify-between">
+            <span>Operations</span>
+            <button onclick="showHelp(this,'operations')" class="text-gray-300 hover:text-gray-500 text-xs">?</button>
+          </div>
+          <div class="px-3 py-2 border-b border-gray-100">
+            <div class="text-xs text-gray-400 mb-1.5">Slice</div>
+            <div class="flex flex-col gap-1">
+              <div class="flex items-center justify-between text-xs">
+                <span class="text-gray-500">channel</span>
+                <span class="font-mono text-blue-700 bg-blue-50 px-1.5 py-0.5 rounded">WHS</span>
+              </div>
+            </div>
+          </div>
+          <div class="flex border-b border-gray-100 text-xs">
+            <button class="flex-1 py-1.5 text-center bg-blue-50 text-blue-700 font-medium border-b-2 border-blue-500">Scale</button>
+            <button class="flex-1 py-1.5 text-center text-gray-400 hover:text-gray-600">Recode</button>
+            <button class="flex-1 py-1.5 text-center text-gray-400 hover:text-gray-600">Clone</button>
+          </div>
+          <div class="px-3 py-3 flex flex-col gap-3 text-xs flex-1">
+            <div class="flex flex-col gap-1">
+              <label class="text-gray-400">Value increment</label>
+              <input type="text" placeholder="e.g. 50000" class="border border-gray-200 rounded px-2 py-1 text-sm font-mono" />
+            </div>
+            <div class="flex flex-col gap-1">
+              <label class="text-gray-400">Units increment</label>
+              <input type="text" placeholder="e.g. 500" class="border border-gray-200 rounded px-2 py-1 text-sm font-mono" />
+            </div>
+            <div class="flex items-center gap-2">
+              <input type="checkbox" id="pct" class="rounded" />
+              <label for="pct" class="text-gray-500">% of slice total</label>
+            </div>
+            <div class="flex flex-col gap-1">
+              <label class="text-gray-400">Note</label>
+              <input type="text" placeholder="optional" class="border border-gray-200 rounded px-2 py-1 text-sm" />
+            </div>
+          </div>
+          <div class="px-3 py-3 border-t border-gray-100">
+            <button class="w-full bg-blue-600 text-white text-xs py-1.5 rounded hover:bg-blue-700">Submit</button>
+          </div>
+        </div>
+
+      </div>
+
+      <div class="bg-white border-t border-gray-200 shrink-0">
+        <button onclick="toggleLog()" class="w-full px-4 py-2 text-left text-xs text-gray-500 hover:bg-gray-50 flex items-center gap-2">
+          <span id="log-arrow">▶</span>
+          <span>Change log (12 entries)</span>
+        </button>
+        <div id="log-panel" class="hidden overflow-auto max-h-40">
+          <table class="w-full text-xs">
+            <thead class="bg-gray-50 sticky top-0">
+              <tr class="text-left text-gray-400 border-b border-gray-100">
+                <th class="px-4 py-1.5 font-medium">id</th>
+                <th class="px-4 py-1.5 font-medium">operation</th>
+                <th class="px-4 py-1.5 font-medium">by</th>
+                <th class="px-4 py-1.5 font-medium">slice</th>
+                <th class="px-4 py-1.5 font-medium">note</th>
+                <th class="px-4 py-1.5 font-medium"></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="border-t border-gray-50"><td class="px-4 py-1.5 text-gray-400 font-mono">12</td><td class="px-4 py-1.5"><span class="bg-blue-50 text-blue-700 px-1.5 py-0.5 rounded">scale</span></td><td class="px-4 py-1.5 text-gray-500">paul</td><td class="px-4 py-1.5 font-mono text-gray-600">channel=WHS geo=WEST</td><td class="px-4 py-1.5 text-gray-400">10% lift Q3</td><td class="px-4 py-1.5 text-right"><button class="text-gray-300 hover:text-red-500">Undo</button></td></tr>
+              <tr class="border-t border-gray-50"><td class="px-4 py-1.5 text-gray-400 font-mono">11</td><td class="px-4 py-1.5"><span class="bg-orange-50 text-orange-700 px-1.5 py-0.5 rounded">recode</span></td><td class="px-4 py-1.5 text-gray-500">paul</td><td class="px-4 py-1.5 font-mono text-gray-600">part=OLD-SKU-001</td><td class="px-4 py-1.5 text-gray-400">discontinued SKU</td><td class="px-4 py-1.5 text-right"><button class="text-gray-300 hover:text-red-500">Undo</button></td></tr>
+              <tr class="border-t border-gray-50"><td class="px-4 py-1.5 text-gray-400 font-mono">10</td><td class="px-4 py-1.5"><span class="bg-blue-50 text-blue-700 px-1.5 py-0.5 rounded">scale</span></td><td class="px-4 py-1.5 text-gray-500">paul</td><td class="px-4 py-1.5 font-mono text-gray-600">channel=DIR</td><td class="px-4 py-1.5 text-gray-400"></td><td class="px-4 py-1.5 text-right"><button class="text-gray-300 hover:text-red-500">Undo</button></td></tr>
+              <tr class="border-t border-gray-50"><td class="px-4 py-1.5 text-gray-400 font-mono">9</td><td class="px-4 py-1.5"><span class="bg-green-50 text-green-700 px-1.5 py-0.5 rounded">clone</span></td><td class="px-4 py-1.5 text-gray-500">paul</td><td class="px-4 py-1.5 font-mono text-gray-600">customer=ACME</td><td class="px-4 py-1.5 text-gray-400">new account win</td><td class="px-4 py-1.5 text-right"><button class="text-gray-300 hover:text-red-500">Undo</button></td></tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+    </div>
+
+  </div><!-- flex-1 content area -->
+</div><!-- app shell -->
+
+<!-- Table peek modal -->
+<div id="peek-modal" class="fixed inset-0 z-50 hidden flex items-center justify-center">
+  <div class="absolute inset-0 bg-black/30" onclick="closePeek()"></div>
+  <div class="relative bg-white rounded-lg shadow-2xl flex flex-col z-10" style="width:720px;max-width:90vw;max-height:80vh;">
+    <div class="flex items-center justify-between px-4 py-3 border-b border-gray-200 shrink-0">
+      <div>
+        <span id="peek-title" class="text-sm font-semibold text-gray-800"></span>
+        <span id="peek-rowcount" class="ml-2 text-xs text-gray-400"></span>
+      </div>
+      <button onclick="closePeek()" class="text-gray-300 hover:text-gray-600 text-lg leading-none ml-4">✕</button>
+    </div>
+    <div id="peek-body" class="overflow-y-auto flex-1 text-xs"></div>
+  </div>
+</div>
+
+<script>
+
+// ── Table peek ─────────────────────────────────────────────────
+const peekData = {
+  sales_orders: {
+    schema: 'public', rows: 48291,
+    cols: [
+      {name:'customer',   type:'text'},
+      {name:'channel',    type:'text'},
+      {name:'part',       type:'text'},
+      {name:'geography',  type:'text'},
+      {name:'order_date', type:'date'},
+      {name:'ship_date',  type:'date'},
+      {name:'status',     type:'text'},
+      {name:'units',      type:'numeric'},
+      {name:'revenue',    type:'numeric'},
+      {name:'internal_id',type:'integer'},
+    ],
+    sample: [
+      {customer:'ACME CORP',   channel:'WHS', part:'SKU-001', geography:'WEST', order_date:'2025-03-14', ship_date:'2025-03-18', status:'SHIPPED', units:120,  revenue:4800.00,  internal_id:10041},
+      {customer:'GLOBEX INC',  channel:'DIR', part:'SKU-004', geography:'EAST', order_date:'2025-03-15', ship_date:null,         status:'OPEN',    units:50,   revenue:2250.00,  internal_id:10042},
+      {customer:'INITECH',     channel:'WHS', part:'SKU-002', geography:'CENT', order_date:'2025-03-15', ship_date:'2025-03-20', status:'SHIPPED', units:200,  revenue:7600.00,  internal_id:10043},
+      {customer:'UMBRELLA CO', channel:'ECOM',part:'SKU-007', geography:'WEST', order_date:'2025-03-16', ship_date:null,         status:'PENDING', units:30,   revenue:1350.00,  internal_id:10044},
+      {customer:'ACME CORP',   channel:'DIR', part:'SKU-001', geography:'EAST', order_date:'2025-03-16', ship_date:'2025-03-19', status:'SHIPPED', units:80,   revenue:3200.00,  internal_id:10045},
+    ]
+  },
+  invoices: {
+    schema: 'public', rows: 12004,
+    cols: [
+      {name:'invoice_id',   type:'integer'},
+      {name:'customer',     type:'text'},
+      {name:'invoice_date', type:'date'},
+      {name:'due_date',     type:'date'},
+      {name:'amount',       type:'numeric'},
+      {name:'status',       type:'text'},
+    ],
+    sample: [
+      {invoice_id:5001, customer:'ACME CORP',   invoice_date:'2025-02-01', due_date:'2025-03-01', amount:12400.00, status:'PAID'},
+      {invoice_id:5002, customer:'GLOBEX INC',  invoice_date:'2025-02-03', due_date:'2025-03-03', amount:8750.00,  status:'OPEN'},
+      {invoice_id:5003, customer:'INITECH',     invoice_date:'2025-02-05', due_date:'2025-03-05', amount:31200.00, status:'PAID'},
+      {invoice_id:5004, customer:'UMBRELLA CO', invoice_date:'2025-02-08', due_date:'2025-03-08', amount:4100.00,  status:'OVERDUE'},
+      {invoice_id:5005, customer:'ACME CORP',   invoice_date:'2025-02-10', due_date:'2025-03-10', amount:9600.00,  status:'OPEN'},
+    ]
+  },
+  products: {
+    schema: 'public', rows: 891,
+    cols: [
+      {name:'sku',      type:'text'},
+      {name:'name',     type:'text'},
+      {name:'category', type:'text'},
+      {name:'price',    type:'numeric'},
+      {name:'active',   type:'boolean'},
+    ],
+    sample: [
+      {sku:'SKU-001', name:'Widget A',     category:'Widgets',    price:40.00, active:true},
+      {sku:'SKU-002', name:'Widget B',     category:'Widgets',    price:38.00, active:true},
+      {sku:'SKU-004', name:'Gadget Pro',   category:'Gadgets',    price:45.00, active:true},
+      {sku:'SKU-007', name:'Doohickey X',  category:'Other',      price:45.00, active:true},
+      {sku:'SKU-009', name:'Old Widget',   category:'Widgets',    price:22.00, active:false},
+    ]
+  },
+  summary_mv: {
+    schema: 'rpt', rows: 3442,
+    cols: [
+      {name:'period',   type:'text'},
+      {name:'channel',  type:'text'},
+      {name:'revenue',  type:'numeric'},
+      {name:'units',    type:'numeric'},
+    ],
+    sample: [
+      {period:'2025-01', channel:'WHS',  revenue:1240000, units:32100},
+      {period:'2025-01', channel:'DIR',  revenue:980000,  units:24400},
+      {period:'2025-01', channel:'ECOM', revenue:410000,  units:10200},
+      {period:'2025-02', channel:'WHS',  revenue:1190000, units:30800},
+      {period:'2025-02', channel:'DIR',  revenue:1020000, units:25500},
+    ]
+  }
+}
+
+function peekTable(name) {
+  const d = peekData[name]
+  if (!d) return
+  const cols = d.cols
+  const sample = d.sample
+
+  let html = '<div class="px-3 pt-3 pb-1 text-gray-400 uppercase tracking-wide font-medium text-xs">Columns</div>'
+  html += '<table class="w-full mb-3"><thead><tr class="text-left text-gray-400 border-b border-gray-100 bg-gray-50"><th class="px-3 py-1">name</th><th class="px-3 py-1">type</th></tr></thead><tbody>'
+  cols.forEach(c => {
+    html += `<tr class="border-t border-gray-50"><td class="px-3 py-1 font-mono text-gray-700">${c.name}</td><td class="px-3 py-1 text-gray-400">${c.type}</td></tr>`
+  })
+  html += '</tbody></table>'
+
+  html += '<div class="px-3 py-1 text-gray-400 uppercase tracking-wide font-medium text-xs border-t border-gray-100">Sample rows</div>'
+  html += '<div class="overflow-x-auto"><table class="text-xs" style="min-width:100%"><thead><tr class="text-left text-gray-400 bg-gray-50 border-b border-gray-100">'
+  cols.forEach(c => { html += `<th class="px-3 py-1 font-medium whitespace-nowrap">${c.name}</th>` })
+  html += '</tr></thead><tbody>'
+  sample.forEach(row => {
+    html += '<tr class="border-t border-gray-50">'
+    cols.forEach(c => {
+      const v = row[c.name]
+      html += `<td class="px-3 py-1 font-mono whitespace-nowrap ${v == null ? 'text-gray-300' : 'text-gray-600'}">${v == null ? 'null' : v}</td>`
+    })
+    html += '</tr>'
+  })
+  html += '</tbody></table></div>'
+
+  document.getElementById('peek-title').textContent = d.schema + '.' + name
+  document.getElementById('peek-rowcount').textContent = d.rows.toLocaleString() + ' rows'
+  document.getElementById('peek-body').innerHTML = html
+  document.getElementById('peek-modal').classList.remove('hidden')
+}
+
+function closePeek() {
+  document.getElementById('peek-modal').classList.add('hidden')
+}
+
+// ── Sidebar toggle ─────────────────────────────────────────────
+function toggleSidebar() {
+  const sb = document.getElementById('sidebar')
+  const expanded = sb.classList.contains('expanded')
+  sb.classList.toggle('expanded', !expanded)
+  sb.classList.toggle('collapsed', expanded)
+  localStorage.setItem('sb', expanded ? 'collapsed' : 'expanded')
+}
+
+// ── Tab switching ──────────────────────────────────────────────
+function show(view) {
+  ['setup','baseline','forecast'].forEach(v => {
+    document.getElementById('view-' + v).classList.add('hidden')
+    const btn = document.getElementById('tab-' + v)
+    btn.classList.remove('bg-blue-50','text-blue-700')
+    btn.classList.add('text-gray-500')
+  })
+  document.getElementById('view-' + view).classList.remove('hidden')
+  const active = document.getElementById('tab-' + view)
+  active.classList.add('bg-blue-50','text-blue-700')
+  active.classList.remove('text-gray-500')
+  if (view === 'baseline') setTimeout(drawTimeline, 50)
+}
+
+// ── Log drawer ─────────────────────────────────────────────────
+function toggleLog() {
+  const panel = document.getElementById('log-panel')
+  const arrow = document.getElementById('log-arrow')
+  panel.classList.toggle('hidden')
+  arrow.textContent = panel.classList.contains('hidden') ? '▶' : '▼'
+}
+
+
+// ── Timeline canvas ────────────────────────────────────────────
+function parseDate(s) {
+  const [y,m,d] = s.split('-').map(Number)
+  return new Date(y, (m||1)-1, (d||1))
+}
+
+function addMonths(date, months) {
+  const d = new Date(date)
+  d.setMonth(d.getMonth() + months)
+  return d
+}
+
+function drawTimeline() {
+  const from  = document.getElementById('date-from').value
+  const to    = document.getElementById('date-to').value
+  const yr    = parseInt(document.getElementById('offset-yr').value)  || 0
+  const mo    = parseInt(document.getElementById('offset-mo').value)  || 0
+  drawTimelineOn('timeline-canvas', from, to, yr, mo)
+}
+
+function drawTimelineOn(canvasId, fromStr, toStr, yr, mo) {
+  const canvas = document.getElementById(canvasId)
+  if (!canvas) return
+  const W = canvas.offsetWidth || 500
+  canvas.width  = W * devicePixelRatio
+  canvas.height = 90 * devicePixelRatio
+  const ctx = canvas.getContext('2d')
+  ctx.scale(devicePixelRatio, devicePixelRatio)
+
+  const H = 90
+  const PAD = { l: 8, r: 8, top: 20 }
+  const trackH = 22
+  const gap    = 10
+  const srcY   = PAD.top
+  const projY  = srcY + trackH + gap
+
+  const srcStart  = parseDate(fromStr)
+  const srcEnd    = parseDate(toStr)
+  if (isNaN(srcStart) || isNaN(srcEnd)) return
+
+  const offsetMo  = yr * 12 + mo
+  const projStart = addMonths(srcStart, offsetMo)
+  const projEnd   = addMonths(srcEnd,   offsetMo)
+
+  // window: from 1 month before srcStart to 1 month after projEnd
+  const winStart = addMonths(srcStart, -1)
+  const winEnd   = addMonths(projEnd,   1)
+  const winMs    = winEnd - winStart
+  const drawW    = W - PAD.l - PAD.r
+
+  function xOf(date) {
+    return PAD.l + ((date - winStart) / winMs) * drawW
+  }
+
+  ctx.clearRect(0, 0, W, H)
+
+  // ── axis line ──
+  ctx.strokeStyle = '#e5e7eb'
+  ctx.lineWidth = 1
+  ctx.beginPath()
+  ctx.moveTo(PAD.l, srcY - 8)
+  ctx.lineTo(PAD.l + drawW, srcY - 8)
+  ctx.stroke()
+
+  // ── month ticks ──
+  ctx.fillStyle = '#9ca3af'
+  ctx.font = '9px system-ui'
+  ctx.textAlign = 'center'
+  const tickStart = new Date(winStart.getFullYear(), winStart.getMonth(), 1)
+  for (let d = new Date(tickStart); d <= winEnd; d = addMonths(d, 1)) {
+    const x = xOf(d)
+    if (x < PAD.l || x > PAD.l + drawW) continue
+    ctx.strokeStyle = '#f3f4f6'
+    ctx.lineWidth = 1
+    ctx.beginPath()
+    ctx.moveTo(x, srcY - 8)
+    ctx.lineTo(x, projY + trackH)
+    ctx.stroke()
+    // year label on Jan
+    if (d.getMonth() === 0) {
+      ctx.fillStyle = '#6b7280'
+      ctx.font = 'bold 9px system-ui'
+      ctx.fillText(d.getFullYear(), x, srcY - 10)
+      ctx.font = '9px system-ui'
+    }
+  }
+
+  // ── source band ──
+  const sx1 = xOf(srcStart), sx2 = xOf(srcEnd)
+  ctx.fillStyle = '#dbeafe'
+  ctx.strokeStyle = '#93c5fd'
+  ctx.lineWidth = 1
+  roundRect(ctx, sx1, srcY, sx2 - sx1, trackH, 4, true, true)
+  ctx.fillStyle = '#1d4ed8'
+  ctx.font = '10px system-ui'
+  ctx.textAlign = 'left'
+  ctx.fillText('Source  ' + fromStr + ' → ' + toStr, sx1 + 6, srcY + 14)
+
+  if (offsetMo > 0) {
+    // ── projected band ──
+    const px1 = xOf(projStart), px2 = xOf(projEnd)
+    ctx.fillStyle = '#dcfce7'
+    ctx.strokeStyle = '#86efac'
+    ctx.lineWidth = 1
+    roundRect(ctx, px1, projY, px2 - px1, trackH, 4, true, true)
+    ctx.fillStyle = '#15803d'
+    ctx.font = '10px system-ui'
+    ctx.textAlign = 'left'
+    ctx.fillText('Projected  ' + fmtDate(projStart) + ' → ' + fmtDate(projEnd), px1 + 6, projY + 14)
+
+    // ── offset arrow ──
+    const arrowY = srcY + trackH / 2
+    ctx.strokeStyle = '#94a3b8'
+    ctx.lineWidth = 1
+    ctx.setLineDash([3, 3])
+    ctx.beginPath()
+    ctx.moveTo(sx1, arrowY)
+    ctx.lineTo(px1 - 2, arrowY)
+    ctx.stroke()
+    ctx.setLineDash([])
+    // arrowhead
+    ctx.fillStyle = '#94a3b8'
+    ctx.beginPath()
+    ctx.moveTo(px1 + 4, arrowY)
+    ctx.lineTo(px1 - 4, arrowY - 4)
+    ctx.lineTo(px1 - 4, arrowY + 4)
+    ctx.closePath()
+    ctx.fill()
+    // label
+    const midX = (sx1 + px1) / 2
+    ctx.fillStyle = '#64748b'
+    ctx.font = '9px system-ui'
+    ctx.textAlign = 'center'
+    ctx.fillText('+' + (yr ? yr + 'yr ' : '') + (mo ? mo + 'mo' : ''), midX, arrowY - 5)
+  }
+}
+
+function roundRect(ctx, x, y, w, h, r, fill, stroke) {
+  ctx.beginPath()
+  ctx.moveTo(x + r, y)
+  ctx.lineTo(x + w - r, y)
+  ctx.quadraticCurveTo(x + w, y, x + w, y + r)
+  ctx.lineTo(x + w, y + h - r)
+  ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h)
+  ctx.lineTo(x + r, y + h)
+  ctx.quadraticCurveTo(x, y + h, x, y + h - r)
+  ctx.lineTo(x, y + r)
+  ctx.quadraticCurveTo(x, y, x + r, y)
+  ctx.closePath()
+  if (fill) ctx.fill()
+  if (stroke) ctx.stroke()
+}
+
+function fmtDate(d) {
+  return d.getFullYear() + '-' + String(d.getMonth()+1).padStart(2,'0') + '-' + String(d.getDate()).padStart(2,'0')
+}
+
+// ── Help popovers ──────────────────────────────────────────────
+const helpText = {
+  segment: {
+    title: 'What is a segment?',
+    body: 'A segment is one query against the source table. Each segment appends rows independently — you can layer multiple segments to build up the baseline (e.g. core actuals, open orders, special items). Each is independently undoable.'
+  },
+  filters: {
+    title: 'Filters',
+    body: 'Define what rows to pull from the source table. You can use any date or filter-role column. At least one filter is required. Multiple filters are ANDed together.\n\nFor date ranges use BETWEEN. For lists use IN. For exact matches use =.'
+  },
+  offset: {
+    title: 'Date offset',
+    body: 'Shifts the primary date column forward by this amount when rows are inserted. For example, with offset = 1 yr, a row with order_date 2025-03-15 is stored as 2026-03-15.\n\nLeave at 0 to keep dates as-is (useful for open orders or non-date segments).'
+  },
+  timeline: {
+    title: 'Timeline preview',
+    body: 'The blue band shows the source period — the date range of rows being pulled from the source table.\n\nThe green band shows where those dates will land after the offset is applied. The arrow shows the shift.'
+  },
+  reference: {
+    title: 'Reference rows',
+    body: 'Reference rows are prior-period actuals loaded for comparison only. They appear in the pivot alongside your forecast rows but are never touched by scale, recode, or clone operations.'
+  },
+  operations: {
+    title: 'Operations',
+    body: 'Click a cell in the pivot to set the slice, then choose an operation:\n\n• Scale — add or subtract value/units across the slice\n• Recode — reassign dimension values (e.g. rename a customer)\n• Clone — copy a slice to a new set of dimension values\n\nAll operations are incremental and undoable from the log.'
+  }
+}
+
+function showHelp(btn, key) {
+  const data = helpText[key]
+  if (!data) return
+  const box  = document.getElementById('help-box')
+  const over = document.getElementById('help-overlay')
+  box.innerHTML = `<div class="font-semibold text-white mb-1.5">${data.title}</div><div class="text-gray-300 whitespace-pre-line">${data.body}</div>`
+  const rect = btn.getBoundingClientRect()
+  box.style.top  = (rect.bottom + 6 + window.scrollY) + 'px'
+  box.style.left = Math.min(rect.left, window.innerWidth - 300) + 'px'
+  box.classList.add('open')
+  over.classList.remove('hidden')
+}
+
+function closeHelp() {
+  document.getElementById('help-box').classList.remove('open')
+  document.getElementById('help-overlay').classList.add('hidden')
+}
+
+window.addEventListener('resize', drawTimeline)
+
+// restore sidebar state
+const sbState = localStorage.getItem('sb') || 'expanded'
+const sb = document.getElementById('sidebar')
+sb.classList.toggle('expanded', sbState === 'expanded')
+sb.classList.toggle('collapsed', sbState === 'collapsed')
+
+show('forecast')
+
+</script>
+</body>
+</html>

public/styles.css

@@ -83,9 +83,18 @@ body {
 .view.hidden { display: none !important; }
 
 /* ============================================================
-   SOURCES VIEW — two-column
+   SOURCES VIEW
    ============================================================ */
 .two-col-layout        { display: flex; gap: 10px; flex: 1; overflow: hidden; }
+.sources-layout        { display: flex; gap: 10px; flex: 1; overflow: hidden; }
+.sources-left-col      { width: 420px; flex-shrink: 0; display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
+.sources-tables-panel  { flex-shrink: 0; }
+.sources-list-panel    { flex: 1; min-height: 0; }
+.sources-mapping-panel { flex: 1; min-width: 0; }
+.tables-search-wrap    { padding: 6px 8px; border-bottom: 1px solid #e8ecf0; flex-shrink: 0; }
+.tables-search-wrap input { width: 100%; padding: 4px 7px; border: 1px solid #d0d7de; border-radius: 4px; font-size: 12px; outline: none; }
+.tables-search-wrap input:focus { border-color: #3498db; }
+.tables-grid           { height: 172px; flex-shrink: 0; }
 .panel {
     flex: 1;
     background: white;
@@ -190,7 +199,7 @@ body {
     box-shadow: 0 1px 3px rgba(0,0,0,.08);
     min-width: 0;
 }
-#pivot-grid { width: 100%; height: 100%; }
+#pivot-viewer { width: 100%; height: 100%; }
 
 #operation-panel {
     width: 270px;
@@ -312,9 +321,310 @@ body {
 #modal-body { padding: 16px 18px; overflow-y: auto; flex: 1; font-size: 12px; }
 .modal-footer { padding: 10px 18px; border-top: 1px solid #eee; display: flex; justify-content: flex-end; gap: 8px; }
 
+/* ============================================================
+   LOAD BASELINE / REFERENCE MODAL
+   ============================================================ */
+.load-data-modal { width: 480px; max-height: 80vh; }
+
+#load-data-body {
+    padding: 20px 24px;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    overflow-y: auto;
+}
+
+.load-form-fields {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+.load-form-fields label {
+    font-size: 11px;
+    color: #555;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.load-form-fields input[type=date],
+.load-form-fields input[type=text] {
+    border: 1px solid #dce1e7;
+    padding: 7px 10px;
+    border-radius: 3px;
+    font-size: 13px;
+    color: #333;
+    width: 100%;
+}
+
+.load-form-fields input[type=date]:focus,
+.load-form-fields input[type=text]:focus {
+    outline: none;
+    border-color: #2980b9;
+    box-shadow: 0 0 0 2px rgba(41,128,185,.15);
+}
+
+.load-offset-row { display: flex; gap: 12px; }
+.load-offset-row label { flex: 1; }
+
+.load-date-preview { display: flex; flex-direction: column; gap: 8px; }
+.load-date-preview.hidden { display: none; }
+
+.load-preview-columns {
+    display: flex;
+    gap: 10px;
+    align-items: flex-start;
+}
+.load-preview-col { flex: 1; display: flex; flex-direction: column; gap: 6px; }
+.load-preview-arrow {
+    font-size: 20px;
+    color: #aaa;
+    padding-top: 18px;
+    flex-shrink: 0;
+}
+
+.load-preview-label {
+    font-size: 11px;
+    font-weight: 600;
+    color: #7f8c8d;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+}
+
+.date-chips {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 5px;
+}
+
+.date-chip {
+    background: #eaf4fb;
+    color: #1a6fa8;
+    border: 1px solid #c5dff0;
+    padding: 3px 9px;
+    border-radius: 12px;
+    font-size: 11px;
+    white-space: nowrap;
+}
+
+.date-chip-summary {
+    font-size: 12px;
+    color: #555;
+    font-style: italic;
+}
+
 .preview-section h4 { font-size: 12px; margin-bottom: 6px; color: #555; }
 .preview-section + .preview-section { margin-top: 16px; }
 .preview-table { border-collapse: collapse; width: 100%; font-size: 11px; }
 .preview-table th, .preview-table td { border: 1px solid #e0e0e0; padding: 4px 8px; text-align: left; }
 .preview-table th { background: #f5f7f9; font-weight: 600; }
 .preview-table tr:hover td { background: #fafbfc; }
+
+/* ============================================================
+   BASELINE WORKBENCH
+   ============================================================ */
+.workbench-toolbar {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    flex-shrink: 0;
+}
+#baseline-label { font-weight: 600; font-size: 13px; flex: 1; }
+
+.baseline-layout {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    flex: 1;
+    overflow-y: auto;
+    min-height: 0;
+}
+
+.baseline-form-panel {
+    background: white;
+    border-radius: 5px;
+    padding: 14px 20px;
+    box-shadow: 0 1px 3px rgba(0,0,0,.08);
+    flex-shrink: 0;
+}
+
+.baseline-segments-panel {
+    flex: 1;
+    background: white;
+    border-radius: 5px;
+    padding: 14px 20px;
+    box-shadow: 0 1px 3px rgba(0,0,0,.08);
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    min-height: 120px;
+}
+
+.panel-section-title {
+    font-size: 10px;
+    font-weight: 700;
+    text-transform: uppercase;
+    color: #7f8c8d;
+    letter-spacing: 0.05em;
+    margin-bottom: 12px;
+}
+
+.baseline-form {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    max-width: 860px;
+}
+
+.baseline-field-label {
+    font-size: 11px;
+    color: #555;
+    display: flex;
+    flex-direction: column;
+    gap: 3px;
+}
+
+.baseline-field-label input[type=text],
+.baseline-field-label input[type=number],
+.baseline-field-label select {
+    border: 1px solid #dce1e7;
+    padding: 5px 8px;
+    border-radius: 3px;
+    font-size: 12px;
+    color: #333;
+    background: white;
+}
+
+.offset-row { display: flex; gap: 10px; }
+.offset-row label { flex: 1; }
+
+/* WHERE clause builder */
+.where-section         { display: flex; flex-direction: column; gap: 6px; }
+.filter-section-label  { font-size: 11px; color: #555; font-weight: 600; }
+.col-chips             { display: flex; flex-wrap: wrap; gap: 4px; }
+.col-chip {
+    display: inline-block;
+    padding: 2px 8px;
+    background: #eaf4fb;
+    border: 1px solid #aed6f1;
+    border-radius: 10px;
+    font-size: 11px;
+    color: #2471a3;
+    cursor: pointer;
+    user-select: none;
+}
+.col-chip:hover        { background: #d6eaf8; border-color: #2471a3; }
+.where-textarea {
+    width: 100%;
+    font-family: 'SFMono-Regular', Consolas, monospace;
+    font-size: 12px;
+    padding: 8px;
+    border: 1px solid #d0d7de;
+    border-radius: 4px;
+    resize: vertical;
+    color: #333;
+    line-height: 1.5;
+}
+.where-textarea:focus  { outline: none; border-color: #3498db; }
+
+.filter-row {
+    display: flex;
+    gap: 4px;
+    align-items: flex-start;
+    flex-wrap: wrap;
+    padding: 6px 8px;
+    background: #f8fafc;
+    border: 1px solid #e8ecf0;
+    border-radius: 3px;
+    margin-bottom: 4px;
+}
+
+.filter-row select,
+.filter-row input[type=text] {
+    border: 1px solid #dce1e7;
+    padding: 4px 6px;
+    border-radius: 3px;
+    font-size: 11px;
+    color: #333;
+    background: white;
+}
+
+.filter-col-select { min-width: 120px; }
+.filter-op-select  { min-width: 90px; }
+.filter-val-single,
+.filter-val-list   { min-width: 120px; flex: 1; }
+.filter-val-from,
+.filter-val-to     { min-width: 90px; flex: 1; }
+.filter-between-sep { font-size: 11px; color: #aaa; padding: 5px 2px; }
+.filter-value-container { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; }
+
+/* Timeline preview */
+.timeline-preview { display: flex; flex-direction: column; gap: 6px; padding: 10px 0 4px; }
+.timeline-preview.hidden { display: none; }
+
+.timeline-row { display: flex; align-items: center; gap: 8px; }
+.timeline-row-label {
+    font-size: 10px;
+    font-weight: 700;
+    text-transform: uppercase;
+    color: #7f8c8d;
+    letter-spacing: 0.04em;
+    width: 60px;
+    flex-shrink: 0;
+    text-align: right;
+}
+.timeline-bar-wrap { flex: 1; display: flex; flex-direction: column; gap: 3px; }
+.timeline-bar {
+    height: 14px;
+    background: #2980b9;
+    border-radius: 3px;
+    width: 100%;
+}
+.timeline-bar-projected { background: #27ae60; }
+.timeline-bar-labels {
+    display: flex;
+    justify-content: space-between;
+    font-size: 10px;
+    color: #666;
+}
+.timeline-offset-indicator {
+    font-size: 11px;
+    color: #aaa;
+    padding: 2px 0 2px 68px;
+    font-style: italic;
+}
+
+/* Segment cards */
+.segment-card {
+    border: 1px solid #e8ecf0;
+    border-radius: 4px;
+    padding: 10px 12px;
+    background: #fafbfc;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+.segment-card-header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+.segment-card-note {
+    font-size: 12px;
+    font-weight: 600;
+    flex: 1;
+}
+.segment-card-meta {
+    font-size: 11px;
+    color: #888;
+}
+.segment-card-params {
+    font-size: 11px;
+    color: #555;
+    font-family: monospace;
+    white-space: pre-wrap;
+    word-break: break-word;
+}
+.segments-empty { font-size: 12px; color: #aaa; font-style: italic; }

routes/log.js

@@ -43,13 +43,17 @@ module.exports = function(pool) {
             await client.query('BEGIN');
             // delete forecast rows first (logid has no FK constraint — managed by app)
             const del = await client.query(
-                `DELETE FROM ${table} WHERE logid = $1 RETURNING id`,
+                `DELETE FROM ${table} WHERE pf_logid = $1 RETURNING pf_id`,
                 [logid]
             );
             await client.query(`DELETE FROM pf.log WHERE id = $1`, [logid]);
             await client.query('COMMIT');
 
-            res.json({ message: 'Operation undone', rows_deleted: del.rowCount });
+            res.json({
+                message: 'Operation undone',
+                rows_deleted: del.rowCount,
+                pf_ids: del.rows.map(r => r.pf_id)
+            });
         } catch (err) {
             await client.query('ROLLBACK');
             console.error(err);

routes/operations.js

@@ -1,4 +1,5 @@
 const express = require('express');
+const { tableFromJSON, tableToIPC } = require('apache-arrow');
 const { applyTokens, buildWhere, buildExcludeClause, buildSetClause, esc } = require('../lib/sql_generator');
 const { fcTable } = require('../lib/utils');
 
@@ -61,41 +62,86 @@ module.exports = function(pool) {
         return true;
     }
 
-    // fetch all rows for a version (all iters including reference)
+    // stream all rows for a version as Arrow IPC (all iters including reference)
     router.get('/versions/:id/data', async (req, res) => {
+        const versionId = parseInt(req.params.id);
+        let client, committed = false;
         try {
-            const ctx = await getContext(parseInt(req.params.id), 'get_data');
-            const sql = applyTokens(ctx.sql, { fc_table: ctx.table });
-            const result = await runSQL(sql);
-            res.json(result.rows);
+            const verResult = await pool.query(
+                `SELECT v.*, s.tname FROM pf.version v JOIN pf.source s ON s.id = v.source_id WHERE v.id = $1`,
+                [versionId]
+            );
+            if (!verResult.rows.length) {
+                const err = new Error('Version not found'); err.status = 404; throw err;
+            }
+            const tbl = fcTable(verResult.rows[0].tname, versionId);
+
+            const { rows: [{ count }] } = await pool.query(`SELECT COUNT(*) FROM ${tbl}`);
+            const rowCount = parseInt(count);
+
+            res.setHeader('Content-Type', 'application/vnd.apache.arrow.stream');
+            res.setHeader('X-Row-Count', String(rowCount));
+
+            if (rowCount === 0) { res.end(); return; }
+
+            client = await pool.connect();
+            await client.query('BEGIN');
+            await client.query(`
+                DECLARE pf_cur CURSOR FOR
+                SELECT f.*, l.note AS pf_note, l.operation AS pf_op
+                FROM ${tbl} f
+                LEFT JOIN pf.log l ON l.id = f.pf_logid
+            `);
+
+            // Accumulate rows from the cursor, then emit a single Arrow record batch.
+            // Per-batch tableFromJSON() builds independent dictionaries, which forces the
+            // writer to emit dictionary REPLACEMENT messages between batches — Perspective's
+            // WASM Arrow reader crashes on those (memory access out of bounds).
+            const allRows = [];
+            while (true) {
+                const { rows } = await client.query('FETCH 10000 FROM pf_cur');
+                if (!rows.length) break;
+                for (const r of rows) allRows.push(r);
+            }
+            await client.query('COMMIT');
+            committed = true;
+
+            const buf = tableToIPC(tableFromJSON(allRows), 'stream');
+            res.setHeader('Content-Length', String(buf.byteLength));
+            res.end(Buffer.from(buf.buffer, buf.byteOffset, buf.byteLength));
         } catch (err) {
             console.error(err);
-            res.status(err.status || 500).json({ error: err.message });
+            if (!res.headersSent) res.status(err.status || 500).json({ error: err.message });
+            else res.destroy();
+        } finally {
+            if (client) {
+                if (!committed) try { await client.query('ROLLBACK'); } catch {}
+                client.release();
+            }
         }
     });
 
-    // load baseline rows from source table for a date range
-    // deletes existing iter='baseline' rows before inserting (handled inside stored SQL)
+    // load baseline rows from source table — additive, no delete
     router.post('/versions/:id/baseline', async (req, res) => {
-        const { date_from, date_to, pf_user, note, replay } = req.body;
-        if (!date_from || !date_to) {
-            return res.status(400).json({ error: 'date_from and date_to are required' });
-        }
-        if (replay) {
-            return res.status(501).json({ error: 'replay is not yet implemented' });
-        }
+        const { where_clause, date_offset, pf_user, note, filters, raw_where } = req.body;
+        const dateOffset    = date_offset  || '0 days';
+        const filterClause  = (raw_where || where_clause || '').trim() || 'TRUE';
         try {
             const ctx = await getContext(parseInt(req.params.id), 'baseline');
             if (!guardOpen(ctx.version, res)) return;
-
+            const paramsJson = JSON.stringify({
+                where_clause: filterClause,
+                date_offset:  dateOffset,
+                ...(raw_where ? { raw_where } : (filters ? { filters } : {}))
+            });
             const sql = applyTokens(ctx.sql, {
                 fc_table:      ctx.table,
                 version_id:    ctx.version.id,
                 pf_user:       esc(pf_user || ''),
                 note:          esc(note    || ''),
-                params:     esc(JSON.stringify({ date_from, date_to })),
-                date_from:  esc(date_from),
-                date_to:    esc(date_to)
+                params:        esc(paramsJson),
+                filter_clause: filterClause,
+                date_offset:   esc(dateOffset)
             });
 
             const result = await runSQL(sql);
@@ -106,24 +152,137 @@ module.exports = function(pool) {
         }
     });
 
-    // load reference rows from source table (additive — does not clear prior reference rows)
-    router.post('/versions/:id/reference', async (req, res) => {
-        const { date_from, date_to, pf_user, note } = req.body;
-        if (!date_from || !date_to) {
-            return res.status(400).json({ error: 'date_from and date_to are required' });
-        }
+    // edit a baseline or reference segment in place — only allowed before any
+    // scale/recode/clone has been applied on this version, since those would
+    // have been calibrated against the old segment's totals.
+    router.put('/versions/:id/baseline/:logid', async (req, res) => {
+        const versionId = parseInt(req.params.id);
+        const logid     = parseInt(req.params.logid);
+        const { where_clause, date_offset, pf_user, note, filters, raw_where } = req.body;
+        const dateOffset   = date_offset  || '0 days';
+        const filterClause = (raw_where || where_clause || '').trim() || 'TRUE';
+
+        const client = await pool.connect();
         try {
-            const ctx = await getContext(parseInt(req.params.id), 'reference');
+            const logResult = await client.query(
+                `SELECT * FROM pf.log WHERE id = $1 AND version_id = $2`,
+                [logid, versionId]
+            );
+            if (logResult.rows.length === 0) {
+                return res.status(404).json({ error: 'Log entry not found' });
+            }
+            const oldLog = logResult.rows[0];
+            if (!['baseline', 'reference'].includes(oldLog.operation)) {
+                return res.status(400).json({ error: 'Only baseline or reference segments can be edited' });
+            }
+
+            const opsResult = await client.query(
+                `SELECT COUNT(*)::int AS n FROM pf.log
+                 WHERE version_id = $1 AND operation IN ('scale', 'recode', 'clone')`,
+                [versionId]
+            );
+            if (opsResult.rows[0].n > 0) {
+                return res.status(409).json({
+                    error: 'Cannot edit segments after forecast operations have been applied. Undo the operations first.'
+                });
+            }
+
+            const ctx = await getContext(versionId, oldLog.operation);
             if (!guardOpen(ctx.version, res)) return;
 
+            const paramsJson = JSON.stringify({
+                where_clause: filterClause,
+                date_offset:  dateOffset,
+                ...(raw_where ? { raw_where } : (filters ? { filters } : {}))
+            });
             const sql = applyTokens(ctx.sql, {
                 fc_table:      ctx.table,
                 version_id:    ctx.version.id,
                 pf_user:       esc(pf_user || ''),
                 note:          esc(note    || ''),
-                params:     esc(JSON.stringify({ date_from, date_to })),
-                date_from:  esc(date_from),
-                date_to:    esc(date_to)
+                params:        esc(paramsJson),
+                filter_clause: filterClause,
+                date_offset:   esc(dateOffset)
+            });
+
+            await client.query('BEGIN');
+            const delRows = await client.query(
+                `DELETE FROM ${ctx.table} WHERE pf_logid = $1 RETURNING pf_id`,
+                [logid]
+            );
+            await client.query(`DELETE FROM pf.log WHERE id = $1`, [logid]);
+            const insResult = await client.query(sql);
+            await client.query('COMMIT');
+
+            res.json({
+                rows_deleted: delRows.rowCount,
+                pf_ids:       delRows.rows.map(r => r.pf_id),
+                rows_affected: insResult.rows[0]?.rows_affected ?? 0
+            });
+        } catch (err) {
+            try { await client.query('ROLLBACK'); } catch {}
+            console.error(err);
+            res.status(err.status || 500).json({ error: err.message });
+        } finally {
+            client.release();
+        }
+    });
+
+    // delete all baseline rows and log entries for a version
+    router.delete('/versions/:id/baseline', async (req, res) => {
+        const versionId = parseInt(req.params.id);
+        try {
+            const ctx = await getContext(versionId, 'baseline');
+            if (!guardOpen(ctx.version, res)) return;
+            const client = await pool.connect();
+            try {
+                await client.query('BEGIN');
+                const delRows = await client.query(
+                    `DELETE FROM ${ctx.table} WHERE pf_iter = 'baseline' RETURNING pf_id`
+                );
+                const delLog = await client.query(
+                    `DELETE FROM pf.log WHERE version_id = $1 AND operation = 'baseline'`,
+                    [versionId]
+                );
+                await client.query('COMMIT');
+                res.json({
+                    rows_deleted: delRows.rowCount,
+                    log_entries_deleted: delLog.rowCount,
+                    pf_ids: delRows.rows.map(r => r.pf_id)
+                });
+            } catch (err) {
+                await client.query('ROLLBACK');
+                throw err;
+            } finally {
+                client.release();
+            }
+        } catch (err) {
+            console.error(err);
+            res.status(err.status || 500).json({ error: err.message });
+        }
+    });
+
+    // load reference rows from source table (additive — does not clear prior reference rows)
+    router.post('/versions/:id/reference', async (req, res) => {
+        const { where_clause, date_offset, pf_user, note, filters, raw_where } = req.body;
+        const dateOffset   = date_offset || '0 days';
+        const filterClause = (raw_where || where_clause || '').trim() || 'TRUE';
+        try {
+            const ctx = await getContext(parseInt(req.params.id), 'reference');
+            if (!guardOpen(ctx.version, res)) return;
+            const paramsJson = JSON.stringify({
+                where_clause: filterClause,
+                date_offset:  dateOffset,
+                ...(raw_where ? { raw_where } : (filters ? { filters } : {}))
+            });
+            const sql = applyTokens(ctx.sql, {
+                fc_table:      ctx.table,
+                version_id:    ctx.version.id,
+                pf_user:       esc(pf_user || ''),
+                note:          esc(note    || ''),
+                params:        esc(paramsJson),
+                filter_clause: filterClause,
+                date_offset:   esc(dateOffset)
             });
 
             const result = await runSQL(sql);
@@ -183,7 +342,8 @@ module.exports = function(pool) {
             });
 
             const result = await runSQL(sql);
-            res.json(result.rows[0]);
+            const rows = result.rows.map(r => ({ ...r, pf_note: note || null, pf_op: 'scale' }));
+            res.json({ rows, rows_affected: rows.length });
         } catch (err) {
             console.error(err);
             res.status(err.status || 500).json({ error: err.message });
@@ -218,7 +378,8 @@ module.exports = function(pool) {
             });
 
             const result = await runSQL(sql);
-            res.json(result.rows[0]);
+            const rows = result.rows.map(r => ({ ...r, pf_note: note || null, pf_op: 'recode' }));
+            res.json({ rows, rows_affected: rows.length });
         } catch (err) {
             console.error(err);
             res.status(err.status || 500).json({ error: err.message });
@@ -255,6 +416,104 @@ module.exports = function(pool) {
             });
 
             const result = await runSQL(sql);
+            const rows = result.rows.map(r => ({ ...r, pf_note: note || null, pf_op: 'clone' }));
+            res.json({ rows, rows_affected: rows.length });
+        } catch (err) {
+            console.error(err);
+            res.status(err.status || 500).json({ error: err.message });
+        }
+    });
+
+    // list log entries for a version, newest first, with row counts
+    router.get('/versions/:id/log', async (req, res) => {
+        const versionId = parseInt(req.params.id);
+        try {
+            const verResult = await pool.query(
+                `SELECT v.*, s.tname, s.id AS source_id FROM pf.version v JOIN pf.source s ON s.id = v.source_id WHERE v.id = $1`,
+                [versionId]
+            );
+            if (!verResult.rows.length) return res.status(404).json({ error: 'Version not found' });
+            const { tname, source_id } = verResult.rows[0];
+            const table = fcTable(tname, versionId);
+
+            const colMeta = await pool.query(
+                `SELECT cname, role FROM pf.col_meta WHERE source_id = $1 AND role IN ('value', 'units')`,
+                [source_id]
+            );
+            const valueCol = colMeta.rows.find(c => c.role === 'value')?.cname;
+            const unitsCol = colMeta.rows.find(c => c.role === 'units')?.cname;
+
+            const aggCols = [
+                `count(f.pf_id)::int AS row_count`,
+                valueCol ? `sum(f."${valueCol}")::float8 AS value_total` : `NULL::float8 AS value_total`,
+                unitsCol ? `sum(f."${unitsCol}")::float8 AS units_total` : `NULL::float8 AS units_total`
+            ].join(', ');
+
+            const result = await pool.query(`
+                SELECT l.*, ${aggCols},
+                       $2::text AS value_col,
+                       $3::text AS units_col
+                FROM pf.log l
+                LEFT JOIN ${table} f ON f.pf_logid = l.id
+                WHERE l.version_id = $1
+                GROUP BY l.id
+                ORDER BY l.id DESC
+            `, [versionId, valueCol || null, unitsCol || null]);
+            res.json(result.rows);
+        } catch (err) {
+            console.error(err);
+            res.status(err.status || 500).json({ error: err.message });
+        }
+    });
+
+    // undo a log entry — delete all fc rows with this logid, then delete the log entry
+    router.delete('/log/:logid', async (req, res) => {
+        const logId = parseInt(req.params.logid);
+        try {
+            const logResult = await pool.query(`
+                SELECT l.*, v.status, s.tname, v.id AS version_id
+                FROM pf.log l
+                JOIN pf.version v ON v.id = l.version_id
+                JOIN pf.source s ON s.id = v.source_id
+                WHERE l.id = $1
+            `, [logId]);
+            if (!logResult.rows.length) return res.status(404).json({ error: 'Log entry not found' });
+            const log = logResult.rows[0];
+            if (log.status === 'closed') return res.status(403).json({ error: 'Version is closed' });
+            const table = fcTable(log.tname, log.version_id);
+            const client = await pool.connect();
+            try {
+                await client.query('BEGIN');
+                const deleted = await client.query(
+                    `DELETE FROM ${table} WHERE pf_logid = $1 RETURNING pf_id`, [logId]
+                );
+                await client.query('DELETE FROM pf.log WHERE id = $1', [logId]);
+                await client.query('COMMIT');
+                res.json({
+                    rows_deleted: deleted.rowCount,
+                    pf_ids: deleted.rows.map(r => r.pf_id)
+                });
+            } catch (err) {
+                await client.query('ROLLBACK');
+                throw err;
+            } finally {
+                client.release();
+            }
+        } catch (err) {
+            console.error(err);
+            res.status(err.status || 500).json({ error: err.message });
+        }
+    });
+
+    // update the note on a log entry
+    router.patch('/log/:logid', async (req, res) => {
+        const logId = parseInt(req.params.logid);
+        const { note } = req.body;
+        try {
+            const result = await pool.query(
+                `UPDATE pf.log SET note = $1 WHERE id = $2 RETURNING *`, [note, logId]
+            );
+            if (!result.rows.length) return res.status(404).json({ error: 'Log entry not found' });
             res.json(result.rows[0]);
         } catch (err) {
             console.error(err);

routes/sources.js

@@ -42,7 +42,7 @@ module.exports = function(pool) {
             // seed col_meta from information_schema
             await client.query(`
                 INSERT INTO pf.col_meta (source_id, cname, role, opos)
-                SELECT $1, column_name, 'ignore', ordinal_position
+                SELECT $1, column_name, 'dimension', ordinal_position
                 FROM information_schema.columns
                 WHERE table_schema = $2 AND table_name = $3
                 ORDER BY ordinal_position
@@ -222,6 +222,24 @@ module.exports = function(pool) {
         }
     });
 
+    // set or clear the default Perspective layout for a source.
+    // Body: a Perspective view config (group_by, split_by, columns, plugin_config, …).
+    // Pass null or {} to clear.
+    router.put('/sources/:id/default-layout', async (req, res) => {
+        try {
+            const layout = req.body && Object.keys(req.body).length > 0 ? req.body : null;
+            const result = await pool.query(
+                `UPDATE pf.source SET default_layout = $1 WHERE id = $2 RETURNING *`,
+                [layout, req.params.id]
+            );
+            if (result.rows.length === 0) return res.status(404).json({ error: 'Source not found' });
+            res.json(result.rows[0]);
+        } catch (err) {
+            console.error(err);
+            res.status(500).json({ error: err.message });
+        }
+    });
+
     // deregister a source — does not drop existing forecast tables
     router.delete('/sources/:id', async (req, res) => {
         try {

routes/tables.js

@@ -12,8 +12,8 @@ module.exports = function(pool) {
                     t.table_name    AS tname,
                     c.reltuples::bigint AS row_estimate
                 FROM information_schema.tables t
-                LEFT JOIN pg_class c ON c.relname = t.table_name
-                LEFT JOIN pg_namespace n ON n.oid = c.relnamespace AND n.nspname = t.table_schema
+                LEFT JOIN pg_namespace n ON n.nspname = t.table_schema
+                LEFT JOIN pg_class c ON c.relname = t.table_name AND c.relnamespace = n.oid
                 WHERE t.table_schema NOT IN ('pg_catalog', 'information_schema', 'pf')
                 ORDER BY t.table_schema, t.table_name
             `);

routes/versions.js

@@ -79,8 +79,9 @@ module.exports = function(pool) {
 
             // build CREATE TABLE DDL using col_meta + mapped data types
             const table   = fcTable(source.tname, version.id);
+            const systemCols = new Set(['pf_id', 'pf_iter', 'pf_logid', 'pf_user', 'pf_created_at']);
             const colDefs = colResult.rows
-                .filter(c => c.cname !== 'id')
+                .filter(c => !systemCols.has(c.cname))
                 .map(c => {
                     const pgType = mapType(c.data_type, c.numeric_precision, c.numeric_scale);
                     const quoted = `"${c.cname}"`;
@@ -89,12 +90,12 @@ module.exports = function(pool) {
 
             const ddl = `
                 CREATE TABLE ${table} (
-                    id              bigserial    PRIMARY KEY,
+                    pf_id           bigserial    PRIMARY KEY,
 ${colDefs},
-                    iter            text         NOT NULL,
-                    logid           bigint       NOT NULL,
+                    pf_iter         text         NOT NULL,
+                    pf_logid        bigint       NOT NULL,
                     pf_user         text,
-                    created_at      timestamptz  NOT NULL DEFAULT now()
+                    pf_created_at   timestamptz  NOT NULL DEFAULT now()
                 )
             `;
             await client.query(ddl);

server.js

@@ -1,12 +1,17 @@
 require('dotenv').config();
 const express = require('express');
 const cors    = require('cors');
-const { Pool } = require('pg');
+const { Pool, types } = require('pg');
+
+// Return bigint (oid 20) and numeric (oid 1700) as JS numbers instead of strings,
+// so apache-arrow's tableFromJSON infers Int/Float64 rather than Dictionary<Utf8>.
+types.setTypeParser(20, v => v === null ? null : Number(v));
+types.setTypeParser(1700, v => v === null ? null : Number(v));
 
 const app = express();
 app.use(cors());
 app.use(express.json());
-app.use(express.static('public'));
+app.use(express.static('public/app'));
 
 const pool = new Pool({
     host:     process.env.DB_HOST,
@@ -27,7 +32,6 @@ app.use('/api', require('./routes/versions')(pool));
 app.use('/api', require('./routes/operations')(pool));
 app.use('/api', require('./routes/log')(pool));
 
-app.get('/', (req, res) => res.send('pf_app running'));
 
 const port = process.env.PORT || 3010;
 app.listen(port, '0.0.0.0', () => console.log(`pf_app started on port ${port}`));

setup_sql/01_schema.sql

@@ -9,11 +9,15 @@ CREATE TABLE IF NOT EXISTS pf.source (
     tname          text NOT NULL,
     label          text,
     status         text NOT NULL DEFAULT 'active',  -- active | archived
+    default_layout jsonb,                            -- Perspective view config used as the per-source default
     created_at     timestamptz NOT NULL DEFAULT now(),
     created_by     text,
     UNIQUE (schema, tname)
 );
 
+-- backfill column for existing installs
+ALTER TABLE pf.source ADD COLUMN IF NOT EXISTS default_layout jsonb;
+
 CREATE TABLE IF NOT EXISTS pf.col_meta (
     id          serial PRIMARY KEY,
     source_id   integer NOT NULL REFERENCES pf.source(id) ON DELETE CASCADE,

todo.md

@@ -0,0 +1,113 @@
+- [ ] when you enter the forecast, be able to enter in a context so you dont have to open the whole thing (should show in status bar and be a filter for SQL and spi calls)
+
+
+- [x] should be able to edit and revise forecase segments that constitute baseline or reference. if you edit, maybe a warning that your forecast values wont mean a lot, and have an option to delete them.
+
+  Notes: A baseline/reference segment is a `pf.log` row plus the
+  forecast rows it produced (joined by pf_logid). Editing has the
+  shape of a delete-then-replay: drop the rows by pf_logid, drop the
+  log entry, re-run the segment with the new params (offset, filter,
+  iter type), insert the new log entry. New endpoint:
+  `PUT /versions/:id/baseline/:logid` (and the same for reference).
+  UI: an Edit button on each segment in Baseline view, populating the
+  form with the original `params`.
+
+  Cascade warning: if any scale/recode/clone log entries exist *after*
+  this segment was added, those operations were calibrated against
+  the old totals and will no longer reconcile cleanly. Show a banner
+  like "3 forecast operations applied after this segment may be
+  invalidated. View / Delete / Continue." Probably want a CASCADE
+  option that deletes downstream forecast entries too, plus a plain
+  "edit only" option for the user who knows what they're doing.
+
+  Implementation order: API + cascade detection first (compare
+  pf.log.stamp ordering); UI second.
+
+- [~] be able to copy an existing forecast and it's segments to adjust some parameters without having to start from scrath.
+
+  Notes: A version is the unit of copy. Need a `POST /versions/:id/copy`
+  endpoint that creates a new pf.version row with the same source/
+  col_meta, creates the new fc_<tname>_<id> table via the same DDL
+  path, and replays each pf.log entry's INSERT against the new table
+  (preserving stamp ordering). Each log entry gets re-inserted
+  pointing at the new version_id; the new pf_logid feeds the row
+  inserts. Notes/users come along.
+
+  UI: "Copy" button next to each version in Baseline. Copy modal
+  asks for a new name and optional description, then runs the API
+  call (likely 5–30s for a 350k-row version since every segment is
+  re-evaluated). Show progress.
+
+  Two design questions worth deciding up front:
+  - Copy as-of-now (re-fetch source data, so freshly-arrived rows
+    show up in baseline)? Or freeze (replay from existing forecast
+    rows, i.e. clone the forecast table directly)? Different
+    semantics, different SQL — pick one before building.
+  - Should the copy track its origin? A `parent_version_id` column
+    on pf.version makes "show me variants of FY2026 Plan" easy.
+
+- [x] need the list of filters to have an and/or specification
+
+  Notes: Spec already covers this in `pf_spec.md:245` — `filters` is
+  an array of groups; conditions within a group are AND-ed, groups
+  OR-ed. Backend has `buildFilterClause` in
+  `lib/sql_generator.js:247` but it's not wired into the routes
+  (baseline currently takes raw `where_clause`). Wiring + UI is the
+  remaining work.
+
+  UI: each group is a card with a header ("Group 1", "Group 2 — OR"),
+  rows of `column / operator / values`, a `+ Add condition` link,
+  and a `+ Add OR group` button at the bottom. The Baseline view
+  already has a single-group filter builder; extend it to wrap the
+  current rows in a group container and allow adding more groups.
+
+- [x] the filters should have the option to just write the WHERE clause SQL
+
+  Notes: Spec covers this too (`pf_spec.md:251`, `:454`) as the
+  `raw_where` admin-only escape hatch. The current baseline endpoint
+  *already* takes `where_clause` as a raw string — so the API is
+  effectively in "raw only" mode today; it's the structured side
+  that's missing. Two things to add:
+
+  - Once structured `filters` is wired in, gate `raw_where` behind
+    an admin check (`pf_user` in admin list — needs admin list
+    config) and reject 400 if both are sent.
+  - UI toggle: a "Switch to manual SQL" link in the Baseline filter
+    builder swaps the structured rows for a `<textarea>`; warning
+    banner: "Raw SQL is not validated. You are responsible for
+    correctness and security."
+
+- [ ] load status bar is super jittery and the numbers wildly change
+
+  Notes: `setLoadProgress` fires per chunk in the body-stream reader
+  (Forecast.jsx:155–161). On localhost or fast connections the
+  reader yields chunks in tight bursts and React re-renders the
+  overlay text on each — the visible bytes value flickers because
+  paints land out of order with respect to setState batching.
+
+  Fix: throttle to ~10 updates/sec. Either `if (now - lastUpdate >
+  100)` before `setLoadProgress`, or accumulate received bytes into
+  a ref and flush on `requestAnimationFrame`. Five-line change.
+
+- [ ] default layout for the pivot should be sales_usd group by pending_rep, split by pf_iter
+
+  Notes: Default-layout logic lives in `initViewer` (Forecast.jsx
+  ~line 240) and currently picks `group_by = first 2 dimensions`,
+  `split_by = date column`. `sales_usd` / `pending_rep` are
+  source-specific, so hardcoding them in the view would break for
+  any other source.
+
+  Two paths:
+  - **Quick**: hardcode for the current source. Cheap, but rots
+    the moment a second source comes along.
+  - **Right**: store a default-layout config on `pf.source` (e.g., a
+    JSON `default_view` column with `{ group_by, split_by, columns }`)
+    and let initViewer read it. Setup view gets a small "Default
+    pivot" editor — pick a value column, group_by columns, split_by
+    column.
+
+  Suggest the right version since the spec already implies
+  per-source customization in col_meta, and you're going to want
+  this for any future source you register. The col_meta path is
+  even tighter: extend col_meta with role flags like `default_value`,
+  `default_group`, `default_split` that initViewer reads.

ui/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

ui/README.md

@@ -0,0 +1,16 @@
+# React + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.

ui/eslint.config.js

@@ -0,0 +1,21 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{js,jsx}'],
+    extends: [
+      js.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      globals: globals.browser,
+      parserOptions: { ecmaFeatures: { jsx: true } },
+    },
+  },
+])

ui/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Pivot Forecast</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@perspective-dev/viewer@4.4.0/dist/css/themes.css" crossorigin="anonymous">
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

ui/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "ui",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5"
+  },
+  "devDependencies": {
+    "@eslint/js": "^10.0.1",
+    "@tailwindcss/vite": "^4.2.4",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "eslint": "^10.2.1",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-react-refresh": "^0.5.2",
+    "globals": "^17.5.0",
+    "vite": "^8.0.10"
+  }
+}

ui/public/icons.svg

@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <symbol id="bluesky-icon" viewBox="0 0 16 17">
+    <g clip-path="url(#bluesky-clip)"><path fill="#08060d" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g>
+    <defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs>
+  </symbol>
+  <symbol id="discord-icon" viewBox="0 0 20 19">
+    <path fill="#08060d" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/>
+  </symbol>
+  <symbol id="documentation-icon" viewBox="0 0 21 20">
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/>
+  </symbol>
+  <symbol id="github-icon" viewBox="0 0 19 19">
+    <path fill="#08060d" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/>
+  </symbol>
+  <symbol id="social-icon" viewBox="0 0 20 20">
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/>
+  </symbol>
+  <symbol id="x-icon" viewBox="0 0 19 19">
+    <path fill="#08060d" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/>
+  </symbol>
+</svg>

ui/src/App.css

@@ -0,0 +1,184 @@
+.counter {
+  font-size: 16px;
+  padding: 5px 10px;
+  border-radius: 5px;
+  color: var(--accent);
+  background: var(--accent-bg);
+  border: 2px solid transparent;
+  transition: border-color 0.3s;
+  margin-bottom: 24px;
+
+  &:hover {
+    border-color: var(--accent-border);
+  }
+  &:focus-visible {
+    outline: 2px solid var(--accent);
+    outline-offset: 2px;
+  }
+}
+
+.hero {
+  position: relative;
+
+  .base,
+  .framework,
+  .vite {
+    inset-inline: 0;
+    margin: 0 auto;
+  }
+
+  .base {
+    width: 170px;
+    position: relative;
+    z-index: 0;
+  }
+
+  .framework,
+  .vite {
+    position: absolute;
+  }
+
+  .framework {
+    z-index: 1;
+    top: 34px;
+    height: 28px;
+    transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg)
+      scale(1.4);
+  }
+
+  .vite {
+    z-index: 0;
+    top: 107px;
+    height: 26px;
+    width: auto;
+    transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg)
+      scale(0.8);
+  }
+}
+
+#center {
+  display: flex;
+  flex-direction: column;
+  gap: 25px;
+  place-content: center;
+  place-items: center;
+  flex-grow: 1;
+
+  @media (max-width: 1024px) {
+    padding: 32px 20px 24px;
+    gap: 18px;
+  }
+}
+
+#next-steps {
+  display: flex;
+  border-top: 1px solid var(--border);
+  text-align: left;
+
+  & > div {
+    flex: 1 1 0;
+    padding: 32px;
+    @media (max-width: 1024px) {
+      padding: 24px 20px;
+    }
+  }
+
+  .icon {
+    margin-bottom: 16px;
+    width: 22px;
+    height: 22px;
+  }
+
+  @media (max-width: 1024px) {
+    flex-direction: column;
+    text-align: center;
+  }
+}
+
+#docs {
+  border-right: 1px solid var(--border);
+
+  @media (max-width: 1024px) {
+    border-right: none;
+    border-bottom: 1px solid var(--border);
+  }
+}
+
+#next-steps ul {
+  list-style: none;
+  padding: 0;
+  display: flex;
+  gap: 8px;
+  margin: 32px 0 0;
+
+  .logo {
+    height: 18px;
+  }
+
+  a {
+    color: var(--text-h);
+    font-size: 16px;
+    border-radius: 6px;
+    background: var(--social-bg);
+    display: flex;
+    padding: 6px 12px;
+    align-items: center;
+    gap: 8px;
+    text-decoration: none;
+    transition: box-shadow 0.3s;
+
+    &:hover {
+      box-shadow: var(--shadow);
+    }
+    .button-icon {
+      height: 18px;
+      width: 18px;
+    }
+  }
+
+  @media (max-width: 1024px) {
+    margin-top: 20px;
+    flex-wrap: wrap;
+    justify-content: center;
+
+    li {
+      flex: 1 1 calc(50% - 8px);
+    }
+
+    a {
+      width: 100%;
+      justify-content: center;
+      box-sizing: border-box;
+    }
+  }
+}
+
+#spacer {
+  height: 88px;
+  border-top: 1px solid var(--border);
+  @media (max-width: 1024px) {
+    height: 48px;
+  }
+}
+
+.ticks {
+  position: relative;
+  width: 100%;
+
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+    top: -4.5px;
+    border: 5px solid transparent;
+  }
+
+  &::before {
+    left: 0;
+    border-left-color: var(--border);
+  }
+  &::after {
+    right: 0;
+    border-right-color: var(--border);
+  }
+}

ui/src/App.jsx

@@ -0,0 +1,74 @@
+import { useState, useEffect, useCallback } from 'react'
+import Sidebar from './components/Sidebar.jsx'
+import StatusBar from './components/StatusBar.jsx'
+import Setup from './views/Setup.jsx'
+import Baseline from './views/Baseline.jsx'
+import Forecast from './views/Forecast.jsx'
+
+export default function App() {
+  const [view, setView] = useState(() => localStorage.getItem('pf_view') || 'forecast')
+  const [sidebarExpanded, setSidebarExpanded] = useState(() => localStorage.getItem('pf_sidebar') !== 'collapsed')
+
+  const [sources,   setSources]   = useState([])
+  const [sourceId,  setSourceId]  = useState(() => localStorage.getItem('pf_sourceId')  || '')
+  const [versions,  setVersions]  = useState([])
+  const [versionId, setVersionId] = useState(() => localStorage.getItem('pf_versionId') || '')
+
+  useEffect(() => { localStorage.setItem('pf_view', view) }, [view])
+  useEffect(() => { localStorage.setItem('pf_sidebar', sidebarExpanded ? 'expanded' : 'collapsed') }, [sidebarExpanded])
+  useEffect(() => { localStorage.setItem('pf_sourceId',  sourceId  || '') }, [sourceId])
+  useEffect(() => { localStorage.setItem('pf_versionId', versionId || '') }, [versionId])
+
+  const refreshSources = useCallback(async () => {
+    const data = await fetch('/api/sources').then(r => r.json())
+    setSources(data)
+    return data
+  }, [])
+
+  const refreshVersions = useCallback(async (sid) => {
+    const id = sid ?? sourceId
+    if (!id) { setVersions([]); return [] }
+    const data = await fetch(`/api/sources/${id}/versions`).then(r => r.json())
+    setVersions(data)
+    return data
+  }, [sourceId])
+
+  useEffect(() => {
+    refreshSources().then(data => {
+      if (data.length === 0) { setSourceId(''); return }
+      if (!sourceId || !data.some(s => String(s.id) === String(sourceId))) {
+        setSourceId(String(data[0].id))
+      }
+    })
+  }, [])
+
+  useEffect(() => {
+    if (!sourceId) { setVersions([]); setVersionId(''); return }
+    refreshVersions(sourceId).then(data => {
+      if (data.length === 0) { setVersionId(''); return }
+      if (!versionId || !data.some(v => String(v.id) === String(versionId))) {
+        setVersionId(String(data[0].id))
+      }
+    })
+  }, [sourceId])
+
+  const ctx = {
+    sources, sourceId, setSourceId,
+    versions, versionId, setVersionId,
+    refreshSources, refreshVersions, setVersions,
+  }
+
+  return (
+    <div className="flex h-screen w-full text-sm overflow-hidden">
+      <Sidebar view={view} setView={setView} expanded={sidebarExpanded} setExpanded={setSidebarExpanded} />
+      <div className="flex flex-col flex-1 overflow-hidden min-w-0">
+        <StatusBar view={view} {...ctx} />
+        <div className="flex-1 overflow-hidden">
+          {view === 'setup'    && <Setup    {...ctx} />}
+          {view === 'baseline' && <Baseline {...ctx} />}
+          {view === 'forecast' && <Forecast {...ctx} />}
+        </div>
+      </div>
+    </div>
+  )
+}

ui/src/assets/react.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>

ui/src/components/Sidebar.jsx

@@ -0,0 +1,88 @@
+const NAV = [
+  {
+    id: 'setup',
+    label: 'Setup',
+    icon: (
+      <svg width="18" height="18" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round">
+        <line x1="3" y1="5" x2="17" y2="5"/><circle cx="7" cy="5" r="1.8" fill="white" stroke="currentColor" strokeWidth="1.6"/>
+        <line x1="3" y1="10" x2="17" y2="10"/><circle cx="13" cy="10" r="1.8" fill="white" stroke="currentColor" strokeWidth="1.6"/>
+        <line x1="3" y1="15" x2="17" y2="15"/><circle cx="8" cy="15" r="1.8" fill="white" stroke="currentColor" strokeWidth="1.6"/>
+      </svg>
+    )
+  },
+  {
+    id: 'baseline',
+    label: 'Baseline',
+    icon: (
+      <svg width="18" height="18" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
+        <polygon points="10,2 18,7 10,12 2,7"/>
+        <polyline points="2,12 10,17 18,12"/>
+      </svg>
+    )
+  },
+  {
+    id: 'forecast',
+    label: 'Forecast',
+    icon: (
+      <svg width="18" height="18" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
+        <polyline points="2,15 7,9 11,12 18,4"/>
+        <polyline points="14,4 18,4 18,8"/>
+      </svg>
+    )
+  },
+]
+
+export default function Sidebar({ view, setView, expanded, setExpanded }) {
+  return (
+    <div
+      className="bg-white border-r border-gray-200 flex flex-col shrink-0 overflow-hidden transition-all duration-150"
+      style={{ width: expanded ? 200 : 48 }}
+    >
+      <div className="h-12 flex items-center px-3 border-b border-gray-100 gap-2 shrink-0">
+        <button
+          onClick={() => setExpanded(e => !e)}
+          className="w-8 h-8 flex items-center justify-center rounded hover:bg-gray-100 text-gray-400 shrink-0"
+          title="Toggle sidebar"
+        >
+          <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+            <rect x="1" y="3" width="14" height="1.5" rx="0.75" fill="currentColor"/>
+            <rect x="1" y="7.25" width="14" height="1.5" rx="0.75" fill="currentColor"/>
+            <rect x="1" y="11.5" width="14" height="1.5" rx="0.75" fill="currentColor"/>
+          </svg>
+        </button>
+        <span
+          className="text-xs font-semibold text-gray-600 tracking-wide uppercase whitespace-nowrap transition-opacity duration-100"
+          style={{ opacity: expanded ? 1 : 0, pointerEvents: expanded ? 'auto' : 'none' }}
+        >
+          Pivot Forecast
+        </span>
+      </div>
+
+      <nav className="flex flex-col gap-0.5 p-2 flex-1">
+        {NAV.map(item => {
+          const active = view === item.id
+          return (
+            <button
+              key={item.id}
+              onClick={() => setView(item.id)}
+              title={!expanded ? item.label : undefined}
+              className={`flex items-center gap-3 px-2 py-2 rounded text-left w-full transition-colors ${
+                active
+                  ? 'bg-blue-50 text-blue-700'
+                  : 'text-gray-500 hover:bg-gray-100 hover:text-gray-800'
+              }`}
+            >
+              <span className="shrink-0">{item.icon}</span>
+              <span
+                className="text-sm whitespace-nowrap transition-opacity duration-100"
+                style={{ opacity: expanded ? 1 : 0, pointerEvents: expanded ? 'auto' : 'none', width: expanded ? 'auto' : 0, overflow: 'hidden' }}
+              >
+                {item.label}
+              </span>
+            </button>
+          )
+        })}
+      </nav>
+    </div>
+  )
+}

ui/src/components/StatusBar.jsx

@@ -0,0 +1,63 @@
+import useTheme from '../theme.jsx'
+
+export default function StatusBar({ view, sources = [], sourceId, setSourceId, versions = [], versionId, setVersionId }) {
+  const { dark, setDark } = useTheme()
+  const showVersion = view === 'baseline' || view === 'forecast'
+  const selectedVersion = versions.find(v => String(v.id) === String(versionId))
+
+  return (
+    <div className="bg-white border-b border-gray-200 px-3 h-9 flex items-center gap-3 shrink-0 text-xs">
+      <span className="text-gray-400">Source</span>
+      <select
+        value={sourceId || ''}
+        onChange={e => setSourceId(e.target.value)}
+        disabled={sources.length === 0}
+        className="border border-gray-200 rounded px-2 py-0.5 bg-white"
+      >
+        {sources.length === 0
+          ? <option value="">— no sources —</option>
+          : sources.map(s => <option key={s.id} value={s.id}>{s.tname}</option>)}
+      </select>
+
+      {showVersion && (
+        <>
+          <span className="text-gray-200">|</span>
+          <span className="text-gray-400">Version</span>
+          <select
+            value={versionId || ''}
+            onChange={e => setVersionId(e.target.value)}
+            disabled={versions.length === 0}
+            className="border border-gray-200 rounded px-2 py-0.5 bg-white"
+          >
+            {versions.length === 0
+              ? <option value="">— no versions —</option>
+              : versions.map(v => <option key={v.id} value={v.id}>{v.name}</option>)}
+          </select>
+          {selectedVersion && (
+            <span className={`font-medium ${selectedVersion.status === 'open' ? 'text-green-600' : 'text-gray-400'}`}>
+              {selectedVersion.status}
+            </span>
+          )}
+        </>
+      )}
+
+      <div className="ml-auto">
+        <button
+          onClick={() => setDark(d => !d)}
+          className="w-6 h-6 flex items-center justify-center rounded hover:bg-gray-100"
+          title={dark ? 'Switch to light mode' : 'Switch to dark mode'}
+        >
+          {dark ? (
+            <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
+              <path d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8z"/>
+            </svg>
+          ) : (
+            <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
+              <path d="M6 .278a.768.768 0 0 1 1.065.02A.75.75 0 0 1 5.792 15.5a.75.75 0 0 1-1.498-.075.768.768 0 0 1-.02-1.05A8 8 0 1 0 6.278 14.72a.768.768 0 0 1-1.055-.02A.75.75 0 0 1 2.5 13.75a.75.75 0 0 1 1.498.075A8 8 0 1 0 6 .278z"/>
+            </svg>
+          )}
+        </button>
+      </div>
+    </div>
+  )
+}

ui/src/components/Timeline.jsx

@@ -0,0 +1,162 @@
+import { useEffect, useRef } from 'react'
+
+function parseDate(s) {
+  if (!s) return null
+  const [y, m, d] = s.split('-').map(Number)
+  return new Date(y, (m || 1) - 1, (d || 1))
+}
+
+function addMonths(date, months) {
+  const d = new Date(date)
+  d.setMonth(d.getMonth() + months)
+  return d
+}
+
+function fmtDate(d) {
+  return d.getFullYear() + '-' + String(d.getMonth() + 1).padStart(2, '0') + '-' + String(d.getDate()).padStart(2, '0')
+}
+
+function roundRect(ctx, x, y, w, h, r, fill, stroke) {
+  ctx.beginPath()
+  ctx.moveTo(x + r, y)
+  ctx.lineTo(x + w - r, y)
+  ctx.quadraticCurveTo(x + w, y, x + w, y + r)
+  ctx.lineTo(x + w, y + h - r)
+  ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h)
+  ctx.lineTo(x + r, y + h)
+  ctx.quadraticCurveTo(x, y + h, x, y + h - r)
+  ctx.lineTo(x, y + r)
+  ctx.quadraticCurveTo(x, y, x + r, y)
+  ctx.closePath()
+  if (fill) ctx.fill()
+  if (stroke) ctx.stroke()
+}
+
+export default function Timeline({ dateFrom, dateTo, offsetYr, offsetMo, type = 'baseline' }) {
+  const canvasRef = useRef(null)
+
+  const offsetMoTotal = (offsetYr || 0) * 12 + (offsetMo || 0)
+  const twoBands = type === 'baseline' && offsetMoTotal > 0
+  const canvasH  = twoBands ? 90 : 52
+
+  useEffect(() => {
+    const canvas = canvasRef.current
+    if (!canvas) return
+    let raf
+    const draw = () => {
+      const dpr = window.devicePixelRatio || 1
+      const W = canvas.offsetWidth || 500
+      canvas.width  = W * dpr
+      canvas.height = canvasH * dpr
+      const ctx = canvas.getContext('2d')
+      ctx.scale(dpr, dpr)
+
+      const PAD   = { l: 8, r: 8 }
+      const trackH = 22
+      const drawW  = W - PAD.l - PAD.r
+      const bandY  = twoBands ? 20 : (canvasH - trackH) / 2
+      const projY  = bandY + trackH + 10
+
+      const srcStart = parseDate(dateFrom)
+      const srcEnd   = parseDate(dateTo)
+      if (!srcStart || !srcEnd || isNaN(srcStart) || isNaN(srcEnd)) return
+
+      const projStart = addMonths(srcStart, offsetMoTotal)
+      const projEnd   = addMonths(srcEnd,   offsetMoTotal)
+
+      const winStart = addMonths(srcStart, -1)
+      const winEnd   = addMonths(twoBands ? projEnd : srcEnd, 1)
+      const winMs    = winEnd - winStart
+
+      function xOf(date) {
+        return PAD.l + ((date - winStart) / winMs) * drawW
+      }
+
+      ctx.clearRect(0, 0, W, canvasH)
+
+      // axis
+      ctx.strokeStyle = '#e5e7eb'
+      ctx.lineWidth = 1
+      ctx.beginPath()
+      ctx.moveTo(PAD.l, bandY - 8)
+      ctx.lineTo(PAD.l + drawW, bandY - 8)
+      ctx.stroke()
+
+      // month ticks + year labels
+      const tickStart = new Date(winStart.getFullYear(), winStart.getMonth(), 1)
+      const tickBottom = twoBands ? projY + trackH : bandY + trackH
+      for (let d = new Date(tickStart); d <= winEnd; d = addMonths(d, 1)) {
+        const x = xOf(d)
+        if (x < PAD.l || x > PAD.l + drawW) continue
+        ctx.strokeStyle = '#f3f4f6'
+        ctx.lineWidth = 1
+        ctx.beginPath()
+        ctx.moveTo(x, bandY - 8)
+        ctx.lineTo(x, tickBottom)
+        ctx.stroke()
+        if (d.getMonth() === 0) {
+          ctx.fillStyle = '#6b7280'
+          ctx.font = 'bold 9px system-ui'
+          ctx.textAlign = 'center'
+          ctx.fillText(d.getFullYear(), x, bandY - 10)
+        }
+      }
+
+      // first band
+      const sx1 = xOf(srcStart), sx2 = xOf(srcEnd)
+      if (type === 'reference') {
+        ctx.fillStyle  = '#f3e8ff'
+        ctx.strokeStyle = '#d8b4fe'
+      } else {
+        ctx.fillStyle  = '#dbeafe'
+        ctx.strokeStyle = '#93c5fd'
+      }
+      ctx.lineWidth = 1
+      roundRect(ctx, sx1, bandY, Math.max(sx2 - sx1, 4), trackH, 4, true, true)
+
+      ctx.fillStyle = type === 'reference' ? '#7c3aed' : '#1d4ed8'
+      ctx.font = '10px system-ui'
+      ctx.textAlign = 'left'
+      const bandLabel = type === 'reference' ? 'Reference' : 'Source'
+      ctx.fillText(bandLabel + '  ' + dateFrom + ' → ' + dateTo, sx1 + 6, bandY + 14)
+
+      // projected band + arrow (baseline only, when offset > 0)
+      if (twoBands) {
+        const px1 = xOf(projStart), px2 = xOf(projEnd)
+        ctx.fillStyle  = '#dcfce7'
+        ctx.strokeStyle = '#86efac'
+        roundRect(ctx, px1, projY, Math.max(px2 - px1, 4), trackH, 4, true, true)
+        ctx.fillStyle = '#15803d'
+        ctx.font = '10px system-ui'
+        ctx.textAlign = 'left'
+        ctx.fillText('Projected  ' + fmtDate(projStart) + ' → ' + fmtDate(projEnd), px1 + 6, projY + 14)
+
+        const arrowY = bandY + trackH / 2
+        ctx.strokeStyle = '#94a3b8'
+        ctx.lineWidth = 1
+        ctx.setLineDash([3, 3])
+        ctx.beginPath()
+        ctx.moveTo(sx1, arrowY)
+        ctx.lineTo(px1 - 2, arrowY)
+        ctx.stroke()
+        ctx.setLineDash([])
+        ctx.fillStyle = '#94a3b8'
+        ctx.beginPath()
+        ctx.moveTo(px1 + 4, arrowY)
+        ctx.lineTo(px1 - 4, arrowY - 4)
+        ctx.lineTo(px1 - 4, arrowY + 4)
+        ctx.closePath()
+        ctx.fill()
+        const offsetLabel = '+' + (offsetYr ? offsetYr + 'yr ' : '') + (offsetMo ? offsetMo + 'mo' : '')
+        ctx.fillStyle = '#64748b'
+        ctx.font = '9px system-ui'
+        ctx.textAlign = 'center'
+        ctx.fillText(offsetLabel.trim(), (sx1 + px1) / 2, arrowY - 5)
+      }
+    }
+    raf = requestAnimationFrame(draw)
+    return () => cancelAnimationFrame(raf)
+  }, [dateFrom, dateTo, offsetYr, offsetMo, type, twoBands, canvasH])
+
+  return <canvas ref={canvasRef} height={canvasH} style={{ width: '100%', display: 'block' }} />
+}

ui/src/index.css

@@ -0,0 +1,93 @@
+@import "tailwindcss";
+
+:root, .light {
+  --bg-primary: #f3f4f6;
+  --bg-secondary: #ffffff;
+  --bg-tertiary: #f9fafb;
+  --text-primary: #1f2937;
+  --text-secondary: #374151;
+  --text-muted: #9ca3af;
+  --border-color: #e5e7eb;
+  --border-light: #f3f4f6;
+  --accent-bg: #eff6ff;
+  --accent-text: #1d4ed8;
+}
+
+/* Dark palette tuned to Perspective's "Pro Dark" theme:
+   bg #242526, tooltip #2a2c2f, gridline #3b3f46, inactive #61656e,
+   inactive border #4c505b, active #2770a9, legend #c5c9d0. */
+.dark {
+  --bg-primary: #242526;
+  --bg-secondary: #2a2c2f;
+  --bg-tertiary: #3b3f46;
+  --text-primary: #ffffff;
+  --text-secondary: #c5c9d0;
+  --text-muted: #61656e;
+  --border-color: #4c505b;
+  --border-light: #3b3f46;
+  --accent-bg: rgba(39, 113, 170, 0.32);
+  --accent-text: #4778c2;
+}
+
+body { margin: 0; background-color: var(--bg-primary); color: var(--text-primary); }
+#root { height: 100vh; display: flex; }
+
+.dark .bg-white { background-color: var(--bg-secondary); }
+.dark .bg-gray-50 { background-color: var(--bg-tertiary); }
+.dark .bg-gray-100 { background-color: var(--bg-tertiary); }
+.dark .bg-gray-200 { background-color: var(--bg-tertiary); }
+.dark .bg-gray-300 { background-color: var(--bg-tertiary); }
+.dark .text-gray-300 { color: var(--text-muted); }
+.dark .text-gray-400 { color: var(--text-muted); }
+.dark .text-gray-500 { color: var(--text-muted); }
+.dark .text-gray-600 { color: var(--text-secondary); }
+.dark .text-gray-700 { color: var(--text-secondary); }
+.dark .text-gray-800 { color: var(--text-primary); }
+.dark .text-gray-900 { color: var(--text-primary); }
+.dark .bg-blue-50 { background-color: var(--accent-bg); }
+.dark .bg-blue-100 { background-color: var(--accent-bg); }
+.dark .text-blue-600 { color: var(--accent-text); }
+.dark .text-blue-700 { color: var(--accent-text); }
+.dark .border-blue-300 { border-color: var(--accent-text); }
+.dark .hover\:bg-blue-50:hover { background-color: var(--accent-bg); }
+
+/* Status accents — desaturated to sit on Pro Dark's neutral background */
+.dark .bg-green-50 { background-color: #1a3d2c; }
+.dark .text-green-600 { color: #6ee7b7; }
+.dark .text-green-700 { color: #6ee7b7; }
+.dark .text-green-400 { color: #6ee7b7; }
+.dark .bg-yellow-50 { background-color: #3a2e14; }
+.dark .text-yellow-700 { color: #f5c66f; }
+.dark .bg-amber-50 { background-color: #3a2e14; }
+.dark .border-amber-200 { border-color: #5a4a26; }
+.dark .text-amber-700 { color: #f5c66f; }
+.dark .text-amber-800 { color: #f5c66f; }
+.dark .bg-purple-50 { background-color: #2a1f3d; }
+.dark .text-purple-600 { color: #c4a8e8; }
+.dark .text-purple-700 { color: #c4a8e8; }
+.dark .bg-red-50 { background-color: #3d1f1f; }
+.dark .text-red-600 { color: #ff9485; }
+.dark .text-red-700 { color: #ff9485; }
+
+.dark .border-gray-100 { border-color: var(--border-light); }
+.dark .border-gray-200 { border-color: var(--border-color); }
+.dark .border-gray-300 { border-color: var(--border-color); }
+.dark .border-blue-100 { border-color: var(--border-color); }
+.dark .border-b { border-color: var(--border-color); }
+.dark .border-t { border-color: var(--border-color); }
+.dark .border-r { border-color: var(--border-color); }
+.dark .border-l { border-color: var(--border-color); }
+.dark .hover\:bg-gray-50:hover { background-color: var(--bg-tertiary); }
+.dark .hover\:bg-gray-100:hover { background-color: var(--bg-tertiary); }
+.dark .hover\:bg-gray-200:hover { background-color: var(--bg-tertiary); }
+.dark .hover\:text-gray-500:hover { color: var(--text-secondary); }
+.dark .hover\:text-gray-600:hover { color: var(--text-secondary); }
+.dark .hover\:text-gray-800:hover { color: var(--text-primary); }
+.dark .hover\:border-gray-300:hover { border-color: var(--border-color); }
+.dark .hover\:border-gray-400:hover { border-color: var(--border-color); }
+.dark .focus\:border-gray-300:focus { border-color: var(--border-color); }
+.dark ::selection { background-color: var(--accent-bg); color: var(--text-primary); }
+.dark input { background-color: var(--bg-secondary); color: var(--text-primary); border-color: var(--border-color); }
+.dark select { background-color: var(--bg-secondary); color: var(--text-primary); border-color: var(--border-color); }
+.dark textarea { background-color: var(--bg-secondary); color: var(--text-primary); border-color: var(--border-color); }
+.dark .bg-transparent { background-color: transparent; }

ui/src/main.jsx

@@ -0,0 +1,13 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { ThemeProvider } from './theme.jsx'
+import './index.css'
+import App from './App.jsx'
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <ThemeProvider>
+      <App />
+    </ThemeProvider>
+  </StrictMode>,
+)

ui/src/theme.jsx

@@ -0,0 +1,25 @@
+import { createContext, useContext, useState, useEffect } from 'react'
+
+const ThemeContext = createContext()
+
+export function ThemeProvider({ children }) {
+  const [dark, setDark] = useState(() => {
+    const saved = localStorage.getItem('pf_dark')
+    if (saved !== null) return saved === 'true'
+    return window.matchMedia('(prefers-color-scheme: dark)').matches
+  })
+
+  useEffect(() => {
+    localStorage.setItem('pf_dark', dark)
+    document.documentElement.classList.toggle('dark', dark)
+  }, [dark])
+
+  return (
+    <ThemeContext.Provider value={{ dark, setDark }}>
+      {children}
+    </ThemeContext.Provider>
+  )
+}
+
+const useTheme = () => useContext(ThemeContext)
+export default useTheme

ui/src/views/Baseline.jsx

@@ -0,0 +1,699 @@
+import { useState, useEffect } from 'react'
+import Timeline from '../components/Timeline.jsx'
+
+const OPERATORS = ['BETWEEN', '=', '!=', 'IN', 'NOT IN', 'IS NULL', 'IS NOT NULL']
+
+function buildCondition(c) {
+  const col = `"${c.col}"`
+  if (c.op === 'IS NULL')     return `${col} IS NULL`
+  if (c.op === 'IS NOT NULL') return `${col} IS NOT NULL`
+  if (c.op === 'BETWEEN') {
+    const [a, b] = c.values
+    if (!a || !b) return null
+    return `${col} BETWEEN '${a}' AND '${b}'`
+  }
+  if (c.op === 'IN' || c.op === 'NOT IN') {
+    const v = (c.values[0] || '').split(',').map(s => s.trim()).filter(Boolean)
+    if (!v.length) return null
+    return `${col} ${c.op} ('${v.join("','")}')`
+  }
+  if (!c.values[0]) return null
+  return `${col} ${c.op} '${c.values[0]}'`
+}
+
+function buildFilterClause(groups) {
+  if (!groups?.length) return null
+  const parts = groups
+    .map(g => g.map(buildCondition).filter(Boolean).join(' AND '))
+    .filter(s => s.length > 0)
+    .map(s => `(${s})`)
+  if (!parts.length) return null
+  return parts.join(' OR ')
+}
+
+function parseDateRangeFromClause(clause) {
+  if (!clause) return null
+  const m = clause.match(/BETWEEN '(\d{4}-\d{2}-\d{2})' AND '(\d{4}-\d{2}-\d{2})'/)
+  if (m) return { from: m[1], to: m[2] }
+  return null
+}
+
+function getDateRange(groups) {
+  for (const g of groups || []) {
+    for (const c of g) {
+      if (c.op === 'BETWEEN' && c.values[0] && c.values[1]) return { from: c.values[0], to: c.values[1] }
+      if (c.op === '=' && c.values[0]) return { from: c.values[0], to: c.values[0] }
+    }
+  }
+  return null
+}
+
+function parseOffset(offsetStr) {
+  if (!offsetStr || offsetStr === '0 days') return { yr: 0, mo: 0 }
+  const yr = parseInt(offsetStr.match(/(\d+)\s+year/)?.[1] || 0)
+  const mo = parseInt(offsetStr.match(/(\d+)\s+month/)?.[1] || 0)
+  return { yr, mo }
+}
+
+function emptyCondition(cols) {
+  return { col: cols[0]?.cname || '', op: 'BETWEEN', values: ['', ''] }
+}
+function emptyGroup(cols) { return [emptyCondition(cols)] }
+
+function normalizeFilters(stored) {
+  // accept legacy flat shape and wrap as one group; fall back to a blank group
+  if (!Array.isArray(stored) || stored.length === 0) return null
+  if (Array.isArray(stored[0])) return stored
+  if (stored[0]?.col != null) return [stored]
+  return null
+}
+
+export default function Baseline({ sources = [], sourceId, versions = [], versionId, setVersionId, refreshVersions }) {
+  const [filterCols,     setFilterCols]     = useState([])
+  const [log,            setLog]            = useState([])
+
+  // new version form
+  const [showNewVersion, setShowNewVersion] = useState(false)
+  const [newVerName,     setNewVerName]     = useState('')
+  const [newVerDesc,     setNewVerDesc]     = useState('')
+  const [creatingVer,    setCreatingVer]    = useState(false)
+
+  // segment form
+  const [segType,        setSegType]        = useState('baseline')
+  const [description,    setDescription]    = useState('')
+  const [filters,        setFilters]        = useState([])  // [[cond,...], [cond,...]]
+  const [useRaw,         setUseRaw]         = useState(false)
+  const [rawSql,         setRawSql]         = useState('')
+  const [offsetYr,       setOffsetYr]       = useState(0)
+  const [offsetMo,       setOffsetMo]       = useState(0)
+  const [segNote,        setSegNote]        = useState('')
+  const [submitting,     setSubmitting]     = useState(false)
+  const [editingLogId,   setEditingLogId]   = useState(null)
+  const [showAddForm,    setShowAddForm]    = useState(false)
+  const [hasForecastOps, setHasForecastOps] = useState(false)
+
+  const [expandedId,     setExpandedId]     = useState(null)
+  const [msg,            setMsg]            = useState(null)
+
+  useEffect(() => {
+    if (!sourceId) return
+    fetch(`/api/sources/${sourceId}/cols`).then(r => r.json()).then(cols => {
+      const fc = cols.filter(c => c.role === 'date' || c.role === 'filter')
+      setFilterCols(fc)
+      setFilters(fc.length > 0 ? [emptyGroup(fc)] : [])
+    })
+  }, [sourceId])
+
+  useEffect(() => {
+    if (!versionId) { setLog([]); return }
+    loadLog()
+  }, [versionId])
+
+  function loadLog() {
+    fetch(`/api/versions/${versionId}/log`).then(r => r.json()).then(data => {
+      setLog(data.filter(e => e.operation === 'baseline' || e.operation === 'reference'))
+      setHasForecastOps(data.some(e => ['scale', 'recode', 'clone'].includes(e.operation)))
+    })
+  }
+
+  async function createVersion() {
+    if (!newVerName.trim()) return
+    setCreatingVer(true)
+    try {
+      const res = await fetch(`/api/sources/${sourceId}/versions`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ name: newVerName.trim(), description: newVerDesc, created_by: 'admin' })
+      })
+      const data = await res.json()
+      if (!res.ok) { flash(data.error, 'error'); return }
+      await refreshVersions(sourceId)
+      setVersionId(String(data.id))
+      setShowNewVersion(false)
+      setNewVerName('')
+      setNewVerDesc('')
+      flash(`Version "${data.name}" created`)
+    } catch (err) {
+      flash(err.message, 'error')
+    } finally {
+      setCreatingVer(false)
+    }
+  }
+
+  async function loadSegment() {
+    const clause = useRaw ? rawSql.trim() : buildFilterClause(filters)
+    if (!clause) { flash(useRaw ? 'Enter a WHERE clause' : 'Add at least one filter', 'error'); return }
+    const isRef = segType === 'reference'
+    const offsetStr = [offsetYr > 0 ? `${offsetYr} year` : '', offsetMo > 0 ? `${offsetMo} month` : ''].filter(Boolean).join(' ') || '0 days'
+    const endpoint = isRef ? 'reference' : 'baseline'
+    const body = {
+      where_clause: clause,
+      pf_user: 'admin',
+      note: description || segNote,
+      date_offset: offsetStr,
+      ...(useRaw ? { raw_where: clause } : { filters }),
+    }
+    setSubmitting(true)
+    try {
+      const url    = editingLogId
+        ? `/api/versions/${versionId}/baseline/${editingLogId}`
+        : `/api/versions/${versionId}/${endpoint}`
+      const method = editingLogId ? 'PUT' : 'POST'
+      const res = await fetch(url, {
+        method,
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(body)
+      })
+      const data = await res.json()
+      if (!res.ok) { flash(data.error, 'error'); return }
+      flash(editingLogId
+        ? `Updated — ${data.rows_deleted} rows replaced with ${data.rows_affected}`
+        : `Loaded ${data.rows_affected ?? data.row_count ?? ''} rows`)
+      loadLog()
+      cancelEdit()
+    } catch (err) {
+      flash(err.message, 'error')
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  function startEdit(entry) {
+    if (hasForecastOps) {
+      flash('Undo forecast operations first to edit segments', 'error')
+      return
+    }
+    const params = entry.params || {}
+    setSegType(entry.operation)
+    setSegNote(entry.note || '')
+    setDescription('')
+    const off = parseOffset(params.date_offset)
+    setOffsetYr(off.yr)
+    setOffsetMo(off.mo)
+    const groups = normalizeFilters(params.filters)
+    if (groups) {
+      setUseRaw(false)
+      setRawSql('')
+      setFilters(groups)
+    } else if (params.where_clause) {
+      // legacy: only the compiled WHERE was stored. Open in raw mode.
+      setUseRaw(true)
+      setRawSql(params.where_clause)
+      setFilters(filterCols.length > 0 ? [emptyGroup(filterCols)] : [])
+    } else {
+      setUseRaw(false)
+      setRawSql('')
+      setFilters(filterCols.length > 0 ? [emptyGroup(filterCols)] : [])
+    }
+    setEditingLogId(entry.id)
+    setExpandedId(null)
+    setTimeout(() => {
+      document.getElementById('add-segment')?.scrollIntoView({ behavior: 'smooth', block: 'start' })
+    }, 0)
+  }
+
+  function cancelEdit() {
+    setEditingLogId(null)
+    setShowAddForm(false)
+    setDescription('')
+    setSegNote('')
+    setOffsetYr(0)
+    setOffsetMo(0)
+    setUseRaw(false)
+    setRawSql('')
+    setFilters(filterCols.length > 0 ? [emptyGroup(filterCols)] : [])
+  }
+
+  async function undoSegment(logid) {
+    await fetch(`/api/log/${logid}`, { method: 'DELETE' })
+    loadLog()
+    flash('Segment undone')
+  }
+
+  async function clearBaseline() {
+    if (!confirm('Delete all baseline rows for this version?')) return
+    const res = await fetch(`/api/versions/${versionId}/baseline`, { method: 'DELETE' })
+    const data = await res.json()
+    if (!res.ok) { flash(data.error, 'error'); return }
+    loadLog()
+    flash(`Cleared ${data.rows_deleted} rows`)
+  }
+
+  async function closeVersion() {
+    const res = await fetch(`/api/versions/${versionId}/close`, {
+      method: 'POST', headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ pf_user: 'admin' })
+    })
+    const data = await res.json()
+    if (!res.ok) { flash(data.error, 'error'); return }
+    await refreshVersions(sourceId)
+    flash('Version closed')
+  }
+
+  async function reopenVersion() {
+    const res = await fetch(`/api/versions/${versionId}/reopen`, { method: 'POST' })
+    const data = await res.json()
+    if (!res.ok) { flash(data.error, 'error'); return }
+    await refreshVersions(sourceId)
+    flash('Version reopened')
+  }
+
+  async function deleteVersion() {
+    if (!confirm(`Delete version "${selectedVersion?.name}"? This drops the forecast table and cannot be undone.`)) return
+    const res = await fetch(`/api/versions/${versionId}`, { method: 'DELETE' })
+    const data = await res.json()
+    if (!res.ok) { flash(data.error, 'error'); return }
+    const updated = await refreshVersions(sourceId)
+    setVersionId(updated.length > 0 ? String(updated[0].id) : '')
+    flash('Version deleted')
+  }
+
+  function flash(text, type = 'ok') {
+    setMsg({ text, type })
+    setTimeout(() => setMsg(null), 3000)
+  }
+
+  const selectedVersion = versions.find(v => String(v.id) === versionId)
+
+  return (
+    <div className="h-full overflow-y-auto bg-gray-50">
+      <div className="p-4 flex flex-col gap-4 max-w-4xl">
+
+        {msg && (
+          <div className={`px-3 py-2 text-xs rounded font-medium ${msg.type === 'error' ? 'bg-red-50 text-red-700' : 'bg-green-50 text-green-700'}`}>
+            {msg.text}
+          </div>
+        )}
+
+        {/* Version actions */}
+        <div className="flex items-center gap-3 flex-wrap">
+          <button onClick={() => setShowNewVersion(v => !v)} className="text-xs text-blue-600 hover:text-blue-700 border border-blue-200 px-2 py-1 rounded">
+            + New version
+          </button>
+          {versionId && (
+            <div className="flex items-center gap-2">
+              {selectedVersion?.status === 'open'
+                ? <button onClick={closeVersion} className="text-xs text-gray-500 hover:text-gray-700 border border-gray-200 px-2 py-1 rounded">Close</button>
+                : <button onClick={reopenVersion} className="text-xs text-gray-500 hover:text-gray-700 border border-gray-200 px-2 py-1 rounded">Reopen</button>
+              }
+              <button onClick={deleteVersion} className="text-xs text-red-400 hover:text-red-600 border border-red-200 px-2 py-1 rounded">Delete</button>
+            </div>
+          )}
+        </div>
+
+        {showNewVersion && (
+          <div className="bg-white border border-gray-200 rounded p-3 flex flex-col gap-3">
+            <div className="flex items-end gap-3">
+              <div className="flex flex-col gap-1">
+                <label className="text-xs text-gray-500">Name</label>
+                <input value={newVerName} onChange={e => setNewVerName(e.target.value)} placeholder="e.g. FY2026 Plan" className="border border-gray-200 rounded px-2 py-1 text-sm w-48" />
+              </div>
+              <div className="flex flex-col gap-1 flex-1">
+                <label className="text-xs text-gray-500">Description</label>
+                <input value={newVerDesc} onChange={e => setNewVerDesc(e.target.value)} placeholder="optional" className="border border-gray-200 rounded px-2 py-1 text-sm" />
+              </div>
+              <button onClick={createVersion} disabled={creatingVer || !newVerName.trim()} className="bg-blue-600 text-white text-xs px-3 py-1.5 rounded hover:bg-blue-700 disabled:opacity-50 shrink-0">
+                {creatingVer ? 'Creating table…' : 'Create'}
+              </button>
+              <button onClick={() => setShowNewVersion(false)} className="text-gray-400 hover:text-gray-600 text-xs shrink-0">Cancel</button>
+            </div>
+            <div className="text-xs text-gray-400 border-t border-gray-100 pt-2">
+              Creates a forecast table <span className="font-mono text-gray-500">pf.fc_{sources.find(s=>String(s.id)===sourceId)?.tname}_&lt;id&gt;</span> in the database from the current col meta. If col meta changes after creation the table and SQL will be out of sync — delete and recreate the version to realign.
+            </div>
+          </div>
+        )}
+
+        {versionId && <>
+
+          {/* Segments loaded */}
+          <div className="bg-white border border-gray-200 rounded">
+            <div className="px-3 py-2 border-b border-gray-100 text-xs font-medium text-gray-500 uppercase tracking-wide flex items-center justify-between">
+              <span>Segments loaded</span>
+              <button onClick={clearBaseline} className="text-red-400 hover:text-red-600 text-xs normal-case font-normal">Clear all baseline</button>
+            </div>
+            <table className="w-full text-xs">
+              <thead className="bg-gray-50">
+                <tr className="text-left text-gray-400 border-b border-gray-100">
+                  <th className="px-3 py-1.5 font-medium w-6"></th>
+                  <th className="px-3 py-1.5 font-medium">#</th>
+                  <th className="px-3 py-1.5 font-medium">note</th>
+                  <th className="px-3 py-1.5 font-medium text-right">rows</th>
+                  <th className="px-3 py-1.5 font-medium text-right">{log[0]?.value_col || 'value'}</th>
+                  <th className="px-3 py-1.5 font-medium">by</th>
+                  <th className="px-3 py-1.5 font-medium">when</th>
+                  <th className="px-3 py-1.5 font-medium"></th>
+                </tr>
+              </thead>
+              <tbody>
+                {log.length === 0 && (
+                  <tr><td colSpan={8} className="px-3 py-3 text-gray-300 italic">No segments loaded yet</td></tr>
+                )}
+                {!showAddForm && !editingLogId && (
+                  <tr className="border-t border-gray-100">
+                    <td colSpan={8} className="p-0">
+                      <button
+                        onClick={() => setShowAddForm(true)}
+                        className="w-full px-3 py-2 text-xs text-blue-600 hover:bg-blue-50 text-left font-medium"
+                      >
+                        + Add segment
+                      </button>
+                    </td>
+                  </tr>
+                )}
+                {log.map((entry, i) => {
+                  const isOpen = expandedId === entry.id
+                  const view = segmentValuesFor(entry, filterCols)
+                  return (
+                    <>
+                      <tr
+                        key={entry.id}
+                        onClick={() => setExpandedId(isOpen ? null : entry.id)}
+                        className={`border-t border-gray-50 cursor-pointer hover:bg-gray-50 ${editingLogId === entry.id ? 'bg-amber-50 ring-1 ring-amber-300 ring-inset' : isOpen ? 'bg-blue-50' : ''}`}
+                      >
+                        <td className="px-3 py-2 text-gray-400 w-6"><span className="text-gray-300 text-xs">{isOpen ? '▾' : '▸'}</span></td>
+                        <td className="px-3 py-2 text-gray-400">{log.length - i}</td>
+                        <td className="px-3 py-2">
+                          <span className={`inline-block mr-2 px-1.5 py-0.5 rounded text-xs font-medium ${entry.operation === 'reference' ? 'bg-purple-50 text-purple-600' : 'bg-blue-50 text-blue-600'}`}>
+                            {entry.operation}
+                          </span>
+                          {entry.note || <span className="text-gray-300">—</span>}
+                        </td>
+                        <td className="px-3 py-2 text-right text-gray-700 font-mono">
+                          {entry.row_count != null ? entry.row_count.toLocaleString() : '—'}
+                        </td>
+                        <td className="px-3 py-2 text-right text-gray-700 font-mono">
+                          {entry.value_total != null ? entry.value_total.toLocaleString(undefined, { maximumFractionDigits: 0 }) : '—'}
+                        </td>
+                        <td className="px-3 py-2 text-gray-500">{entry.pf_user}</td>
+                        <td className="px-3 py-2 text-gray-400">{new Date(entry.stamp).toLocaleDateString()}</td>
+                        <td className="px-3 py-2 text-right">
+                          {!hasForecastOps && (
+                            <button onClick={e => { e.stopPropagation(); startEdit(entry) }} className="text-gray-400 hover:text-blue-600 text-xs mr-3">Edit</button>
+                          )}
+                          <button onClick={e => { e.stopPropagation(); undoSegment(entry.id) }} className="text-gray-400 hover:text-red-500 text-xs">Undo</button>
+                        </td>
+                      </tr>
+                      {isOpen && (
+                        <tr key={`${entry.id}-detail`} className="bg-blue-50 border-t border-blue-100">
+                          <td colSpan={6} className="px-2 py-2">
+                            <div className="bg-white border border-gray-200 rounded">
+                              <SegmentForm mode="view" {...view} filterCols={filterCols} />
+                            </div>
+                          </td>
+                        </tr>
+                      )}
+                    </>
+                  )
+                })}
+              </tbody>
+            </table>
+          </div>
+
+          {/* Add / Edit Segment */}
+          {(showAddForm || editingLogId) && (
+            <div id="add-segment" className={`bg-white border rounded ${editingLogId ? 'border-amber-300' : 'border-gray-200'}`}>
+              <div className={`px-3 py-2 border-b text-xs font-medium uppercase tracking-wide flex items-center justify-between ${editingLogId ? 'bg-amber-50 border-amber-200 text-amber-800' : 'bg-white border-gray-100 text-gray-500'}`}>
+                <span>{(() => {
+                  if (!editingLogId) return 'Add Segment'
+                  const idx = log.findIndex(e => e.id === editingLogId)
+                  if (idx < 0) return 'Edit Segment'
+                  const entry  = log[idx]
+                  const segNum = log.length - idx
+                  const label  = entry.operation === 'reference' ? 'reference' : 'baseline'
+                  return entry.note
+                    ? `Edit segment #${segNum} — ${label} — ${entry.note}`
+                    : `Edit segment #${segNum} — ${label}`
+                })()}</span>
+                <button onClick={cancelEdit} className="text-gray-400 hover:text-gray-600 normal-case font-normal">
+                  {editingLogId ? 'Cancel edit' : 'Close'}
+                </button>
+              </div>
+              <SegmentForm
+                mode="edit"
+                segType={segType} setSegType={setSegType}
+                filters={filters} setFilters={setFilters}
+                useRaw={useRaw} setUseRaw={setUseRaw}
+                rawSql={rawSql} setRawSql={setRawSql}
+                description={description} setDescription={setDescription}
+                segNote={segNote} setSegNote={setSegNote}
+                offsetYr={offsetYr} setOffsetYr={setOffsetYr}
+                offsetMo={offsetMo} setOffsetMo={setOffsetMo}
+                filterCols={filterCols}
+                onSubmit={loadSegment}
+                submitting={submitting}
+                editing={!!editingLogId}
+              />
+            </div>
+          )}
+
+        </>}
+
+      </div>
+    </div>
+  )
+}
+
+// derive view-mode props for a saved segment
+function segmentValuesFor(entry, filterCols) {
+  const params = entry.params || {}
+  const off = parseOffset(params.date_offset)
+  const groups = normalizeFilters(params.filters)
+  return {
+    segType: entry.operation === 'reference' ? 'reference' : 'baseline',
+    filters: groups || (filterCols.length > 0 ? [emptyGroup(filterCols)] : []),
+    useRaw: !groups && !!params.where_clause,
+    rawSql: params.where_clause || '',
+    description: '',
+    segNote: entry.note || '',
+    offsetYr: off.yr,
+    offsetMo: off.mo,
+  }
+}
+
+function SegmentForm({
+  mode,                // 'view' | 'edit'
+  segType, setSegType,
+  filters, setFilters,
+  useRaw, setUseRaw,
+  rawSql, setRawSql,
+  description, setDescription,
+  segNote, setSegNote,
+  offsetYr, setOffsetYr,
+  offsetMo, setOffsetMo,
+  filterCols,
+  onSubmit,
+  submitting,
+  editing,
+}) {
+  const disabled  = mode === 'view'
+  const compiled  = useRaw ? rawSql : (buildFilterClause(filters) || '')
+  const dateRange = useRaw ? parseDateRangeFromClause(rawSql) : getDateRange(filters)
+
+  function setGroup(gi, fn) {
+    setFilters(prev => prev.map((g, i) => i === gi ? fn(g) : g))
+  }
+  function addCondition(gi)   { setGroup(gi, g => [...g, emptyCondition(filterCols)]) }
+  function removeCondition(gi, ci) {
+    setFilters(prev => {
+      const next = prev.map((g, i) => i === gi ? g.filter((_, j) => j !== ci) : g)
+      return next.filter(g => g.length > 0)
+    })
+  }
+  function updateCondition(gi, ci, field, value) {
+    setGroup(gi, g => g.map((c, j) => {
+      if (j !== ci) return c
+      if (field === 'op') {
+        const needsTwo  = value === 'BETWEEN'
+        const needsNone = ['IS NULL', 'IS NOT NULL'].includes(value)
+        return { ...c, op: value, values: needsNone ? [] : needsTwo ? ['', ''] : [''] }
+      }
+      return { ...c, [field]: value }
+    }))
+  }
+  function updateConditionValue(gi, ci, vi, value) {
+    setGroup(gi, g => g.map((c, j) => {
+      if (j !== ci) return c
+      const vals = [...c.values]; vals[vi] = value
+      return { ...c, values: vals }
+    }))
+  }
+  function addGroup() { setFilters(prev => [...prev, emptyGroup(filterCols)]) }
+  function removeGroup(gi) { setFilters(prev => prev.filter((_, i) => i !== gi)) }
+  function toggleRaw() {
+    if (useRaw) {
+      setUseRaw(false)
+      setRawSql('')
+    } else {
+      setRawSql(compiled)
+      setUseRaw(true)
+    }
+  }
+
+  const baseInp = 'border border-gray-200 rounded px-2 py-1 text-xs bg-white disabled:bg-gray-50 disabled:text-gray-500'
+
+  return (
+    <div className="p-4 flex flex-col gap-4">
+
+      {/* Type */}
+      <div className="flex items-center gap-3">
+        <label className="text-xs text-gray-500 w-28 shrink-0">Type</label>
+        <div className="flex rounded border border-gray-200 overflow-hidden text-xs">
+          {['baseline', 'reference'].map(t => (
+            <button
+              key={t}
+              disabled={disabled}
+              onClick={() => { if (disabled) return; setSegType(t); if (t === 'reference') { setOffsetYr(0); setOffsetMo(0) } }}
+              className={`px-3 py-1 capitalize ${segType === t ? 'bg-blue-600 text-white' : 'bg-white text-gray-500 hover:bg-gray-50'} disabled:opacity-60 disabled:cursor-default`}
+            >{t}</button>
+          ))}
+        </div>
+      </div>
+
+      {/* Description (edit only) */}
+      {mode === 'edit' && (
+        <div className="flex items-center gap-3">
+          <label className="text-xs text-gray-500 w-28 shrink-0">Description</label>
+          <input value={description} onChange={e => setDescription(e.target.value)} placeholder="e.g. FY25 actuals +1yr" className="border border-gray-200 rounded px-2 py-1.5 text-sm flex-1 max-w-sm" />
+        </div>
+      )}
+
+      {/* Filters */}
+      <div>
+        <div className="flex items-center justify-between mb-2">
+          <label className="text-xs text-gray-500 w-28 shrink-0">Filters</label>
+          {!disabled && (
+            <button onClick={toggleRaw} className="text-blue-600 hover:text-blue-700 text-xs font-medium">
+              {useRaw ? '← Back to filters' : 'Switch to manual SQL →'}
+            </button>
+          )}
+        </div>
+
+        {!useRaw && (
+          <div className="flex flex-col gap-3 ml-28">
+            {filters.map((group, gi) => (
+              <div key={gi} className="border border-gray-200 rounded">
+                <div className="flex items-center justify-between px-2 py-1 bg-gray-50 border-b border-gray-100">
+                  <span className="text-xs text-gray-500">
+                    {gi === 0 ? 'Group 1' : `Group ${gi + 1} — OR`}
+                  </span>
+                  {!disabled && (
+                    <div className="flex items-center gap-3">
+                      <button onClick={() => addCondition(gi)} className="text-blue-600 hover:text-blue-700 text-xs">+ AND condition</button>
+                      {filters.length > 1 && (
+                        <button onClick={() => removeGroup(gi)} className="text-gray-300 hover:text-red-400 text-xs">remove group</button>
+                      )}
+                    </div>
+                  )}
+                </div>
+                <div className="flex flex-col gap-1.5 p-2">
+                  {group.map((c, ci) => {
+                    const isDateCol = filterCols.find(fc => fc.cname === c.col)?.role === 'date'
+                    return (
+                      <div key={ci} className="flex items-center gap-2 flex-wrap">
+                        <select disabled={disabled} value={c.col} onChange={e => updateCondition(gi, ci, 'col', e.target.value)} className={baseInp}>
+                          {filterCols.map(fc => <option key={fc.cname} value={fc.cname}>{fc.cname}</option>)}
+                        </select>
+                        <select disabled={disabled} value={c.op} onChange={e => updateCondition(gi, ci, 'op', e.target.value)} className={baseInp}>
+                          {OPERATORS.map(op => <option key={op} value={op}>{op}</option>)}
+                        </select>
+                        {c.op === 'BETWEEN' && <>
+                          <input disabled={disabled} type={isDateCol ? 'date' : 'text'} value={c.values[0] || ''} onChange={e => updateConditionValue(gi, ci, 0, e.target.value)} placeholder="from" className={`${baseInp} w-36 font-mono`} />
+                          <span className="text-gray-400 text-xs">and</span>
+                          <input disabled={disabled} type={isDateCol ? 'date' : 'text'} value={c.values[1] || ''} onChange={e => updateConditionValue(gi, ci, 1, e.target.value)} placeholder="to" className={`${baseInp} w-36 font-mono`} />
+                        </>}
+                        {(c.op === '=' || c.op === '!=') && (
+                          <input disabled={disabled} type={isDateCol ? 'date' : 'text'} value={c.values[0] || ''} onChange={e => updateConditionValue(gi, ci, 0, e.target.value)} placeholder="value" className={`${baseInp} w-36 font-mono`} />
+                        )}
+                        {(c.op === 'IN' || c.op === 'NOT IN') && (
+                          <input disabled={disabled} value={c.values[0] || ''} onChange={e => updateConditionValue(gi, ci, 0, e.target.value)} placeholder="val1, val2, …" className={`${baseInp} w-48 font-mono`} />
+                        )}
+                        {!disabled && group.length > 1 && (
+                          <button onClick={() => removeCondition(gi, ci)} className="text-gray-300 hover:text-red-400 text-xs">✕</button>
+                        )}
+                      </div>
+                    )
+                  })}
+                </div>
+              </div>
+            ))}
+            {!disabled && (
+              <button onClick={addGroup} className="self-start text-blue-600 hover:text-blue-700 text-xs font-medium">+ Add OR group</button>
+            )}
+            {filters.length === 0 && (
+              <span className="text-xs text-gray-300 italic">No filters — at least one is required</span>
+            )}
+          </div>
+        )}
+
+        {useRaw && (
+          <div className="ml-28">
+            <textarea
+              disabled={disabled}
+              value={rawSql}
+              onChange={e => setRawSql(e.target.value)}
+              placeholder="WHERE clause body (no WHERE keyword) — e.g. (status = 'OPEN' AND order_date BETWEEN '2024-01-01' AND '2024-12-31') OR id IS NULL"
+              rows={3}
+              className={`w-full border border-gray-200 rounded px-2 py-1.5 text-xs font-mono bg-white disabled:bg-gray-50 disabled:text-gray-500`}
+            />
+            {!disabled && (
+              <p className="text-xs text-amber-700 mt-1">Raw SQL is not validated. You are responsible for correctness and security.</p>
+            )}
+          </div>
+        )}
+
+        {/* Compiled SQL preview (only meaningful when not in raw mode) */}
+        {!useRaw && (
+          <div className="ml-28 mt-2 flex items-start gap-2">
+            <span className="text-xs text-gray-400 w-12 shrink-0 pt-0.5">SQL</span>
+            <code className="text-xs font-mono text-gray-700 bg-gray-50 border border-gray-200 rounded px-2 py-1 flex-1 break-all">
+              {compiled || <span className="text-gray-300 not-italic">— add a condition —</span>}
+            </code>
+          </div>
+        )}
+      </div>
+
+      {/* Date offset */}
+      <div className="flex items-center gap-3">
+        <label className="text-xs text-gray-500 w-28 shrink-0">Date offset</label>
+        <div className="flex items-center gap-2">
+          <input disabled={disabled} type="number" value={offsetYr} min={0} onChange={e => setOffsetYr(parseInt(e.target.value) || 0)} className={`${baseInp} text-sm w-16 text-center`} />
+          <span className="text-xs text-gray-500">yr</span>
+          <input disabled={disabled} type="number" value={offsetMo} min={0} max={11} onChange={e => setOffsetMo(parseInt(e.target.value) || 0)} className={`${baseInp} text-sm w-16 text-center`} />
+          <span className="text-xs text-gray-500">mo</span>
+        </div>
+      </div>
+
+      {/* Timeline */}
+      {dateRange && (
+        <div className="ml-28">
+          <div className="bg-gray-50 border border-gray-200 rounded p-3">
+            <Timeline
+              dateFrom={dateRange.from}
+              dateTo={dateRange.to}
+              offsetYr={offsetYr}
+              offsetMo={offsetMo}
+              type={segType}
+            />
+          </div>
+        </div>
+      )}
+
+      {/* Note + submit */}
+      <div className="flex items-end gap-3">
+        <div className="flex flex-col gap-1 flex-1 max-w-xs">
+          <label className="text-xs text-gray-500">Note</label>
+          <input disabled={disabled} value={segNote} onChange={e => setSegNote(e.target.value)} placeholder="optional" className={`${baseInp} text-sm py-1.5`} />
+        </div>
+        {mode === 'edit' && (
+          <button onClick={onSubmit} disabled={submitting || (!useRaw && filters.length === 0)} className="bg-blue-600 text-white text-xs px-5 py-2 rounded hover:bg-blue-700 disabled:opacity-50 shrink-0">
+            {submitting
+              ? (editing ? 'Saving…' : 'Loading…')
+              : (editing
+                  ? `Save ${segType === 'reference' ? 'Reference' : 'Segment'}`
+                  : `Load ${segType === 'reference' ? 'Reference' : 'Segment'}`)}
+          </button>
+        )}
+      </div>
+    </div>
+  )
+}

ui/src/views/Forecast.jsx

@@ -0,0 +1,870 @@
+import { useState, useEffect, useRef } from 'react'
+import useTheme from '../theme.jsx'
+
+const LAYOUT_KEY  = (vid) => `pf_layout_v${vid}`   // last-used layout (auto restore)
+const LAYOUTS_KEY = (vid) => `pf_layouts_v${vid}`  // named layout list
+
+let perspectivePromise = null
+function loadPerspective() {
+  if (perspectivePromise) return perspectivePromise
+  perspectivePromise = Promise.all([
+    import(/* @vite-ignore */ 'https://cdn.jsdelivr.net/npm/@perspective-dev/client@4.4.0/dist/cdn/perspective.js'),
+    import(/* @vite-ignore */ 'https://cdn.jsdelivr.net/npm/@perspective-dev/viewer@4.4.0/dist/cdn/perspective-viewer.js'),
+    import(/* @vite-ignore */ 'https://cdn.jsdelivr.net/npm/@perspective-dev/viewer-datagrid@4.4.0/dist/cdn/perspective-viewer-datagrid.js'),
+    import(/* @vite-ignore */ 'https://cdn.jsdelivr.net/npm/@perspective-dev/viewer-d3fc@4.4.0/dist/cdn/perspective-viewer-d3fc.js'),
+  ]).then(([{ default: perspective }]) => perspective)
+  return perspectivePromise
+}
+
+function cleanLayout(cfg, validCols) {
+  if (!cfg) return cfg
+  const c = { ...cfg }
+  const exprNames = new Set(Object.keys(cfg.expressions || {}))
+  const ok = (col) => validCols.has(col) || exprNames.has(col)
+  if (c.columns)  c.columns  = c.columns.filter(col => col == null || ok(col))
+  if (c.group_by) c.group_by = c.group_by.filter(ok)
+  if (c.split_by) c.split_by = c.split_by.filter(ok)
+  if (c.sort)     c.sort     = c.sort.filter(([col]) => ok(col))
+  if (c.filter)   c.filter   = c.filter.filter(([col]) => ok(col))
+  return c
+}
+
+export default function Forecast({ sources = [], sourceId, versionId, refreshSources }) {
+  const { dark } = useTheme()
+  const [loading,      setLoading]      = useState(false)
+  const [largeDataset, setLargeDataset] = useState(false)
+  const [loadProgress, setLoadProgress] = useState(null)  // { received, total }
+  const [msg,          setMsg]          = useState(null)
+
+  // layouts
+  const [layouts,        setLayouts]        = useState([])
+  const [activeLayoutId, setActiveLayoutId] = useState(null)
+  const [showSaveAs,     setShowSaveAs]     = useState(false)
+  const [saveAsName,     setSaveAsName]     = useState('')
+
+  // operation panel
+  const [slice,          setSlice]          = useState({})
+  const [activeOp,       setActiveOp]       = useState('scale')
+  const [currentTotals,  setCurrentTotals]  = useState(null)  // { value, units }
+  const [scaleMode,      setScaleMode]      = useState('target')  // 'target' | 'delta'
+  const [scaleValue,     setScaleValue]     = useState('')
+  const [scaleUnits,     setScaleUnits]     = useState('')
+  const [scalePrice,     setScalePrice]     = useState('')
+  const [scalePct,       setScalePct]       = useState(false)
+  const [scaleNote,      setScaleNote]      = useState('')
+  const [recodeSet,      setRecodeSet]      = useState({})
+  const [recodeNote,     setRecodeNote]     = useState('')
+  const [cloneSet,       setCloneSet]       = useState({})
+  const [cloneScale,     setCloneScale]     = useState('1')
+  const [cloneNote,      setCloneNote]      = useState('')
+
+  const [panelWidth, setPanelWidth] = useState(224)
+
+  // history modal
+  const [showLog,       setShowLog]       = useState(false)
+  const [logEntries,    setLogEntries]    = useState([])
+  const [logLoading,    setLogLoading]    = useState(false)
+  const [editingNote,   setEditingNote]   = useState(null)  // { id, text }
+  const [undoingId,     setUndoingId]     = useState(null)
+
+  const viewerRef      = useRef(null)
+  const workerRef      = useRef(null)
+  const tableRef       = useRef(null)
+  const colMetaRef     = useRef([])
+  const expandDepthRef = useRef(null)
+  const initIdRef      = useRef(0)
+
+  function onDragStart(e) {
+    e.preventDefault()
+    const startX = e.clientX
+    const startW = panelWidth
+    const onMove = (ev) => setPanelWidth(Math.max(160, Math.min(480, startW - (ev.clientX - startX))))
+    const onUp   = () => { window.removeEventListener('mousemove', onMove); window.removeEventListener('mouseup', onUp) }
+    window.addEventListener('mousemove', onMove)
+    window.addEventListener('mouseup', onUp)
+  }
+
+  useEffect(() => {
+    if (!versionId || !sourceId) return
+    loadLayouts(versionId)
+    initViewer(versionId, sourceId)
+  }, [versionId, sourceId])
+
+  useEffect(() => {
+    if (viewerRef.current) {
+      viewerRef.current.setAttribute('theme', dark ? 'Pro Dark' : 'Pro Light')
+    }
+  }, [dark, versionId])
+
+  useEffect(() => {
+    const blank = Object.fromEntries(Object.keys(slice).map(k => [k, '']))
+    setRecodeSet(blank)
+    setCloneSet(blank)
+    setScaleValue('')
+    setScaleUnits('')
+    setScalePrice('')
+    if (Object.keys(slice).length > 0) fetchCurrentTotals(slice)
+    else setCurrentTotals(null)
+  }, [slice])
+
+  async function fetchCurrentTotals(sliceObj) {
+    if (!tableRef.current) return
+    const valueCol = colMetaRef.current.find(c => c.role === 'value')?.cname
+    const unitsCol = colMetaRef.current.find(c => c.role === 'units')?.cname
+    if (!valueCol && !unitsCol) return
+    try {
+      const dimNames = new Set(colMetaRef.current.filter(c => c.role === 'dimension').map(c => c.cname))
+      const filters = [
+        ...Object.entries(sliceObj)
+          .filter(([col]) => dimNames.has(col))
+          .map(([col, val]) => [col, '==', val]),
+        ['pf_iter', '!=', 'reference'],
+      ]
+      const view = await tableRef.current.view({ filter: filters })
+      const rows = await view.to_json()
+      await view.delete()
+      const buckets = new Map()
+      for (const r of rows) {
+        const k = r.pf_iter || '?'
+        const t = buckets.get(k) || { value: 0, units: 0 }
+        if (valueCol) t.value += parseFloat(r[valueCol]) || 0
+        if (unitsCol) t.units += parseFloat(r[unitsCol]) || 0
+        buckets.set(k, t)
+      }
+      const ITER_ORDER = ['baseline', 'scale', 'recode', 'clone']
+      const byIter = Array.from(buckets, ([iter, t]) => ({ iter, ...t }))
+        .sort((a, b) => {
+          const ai = ITER_ORDER.indexOf(a.iter), bi = ITER_ORDER.indexOf(b.iter)
+          return (ai === -1 ? 99 : ai) - (bi === -1 ? 99 : bi)
+        })
+      const total = byIter.reduce((s, r) => ({ value: s.value + (r.value || 0), units: s.units + (r.units || 0) }), { value: 0, units: 0 })
+      setCurrentTotals({ byIter, total, valueCol, unitsCol })
+    } catch {
+      setCurrentTotals(null)
+    }
+  }
+
+  function loadLayouts(vid) {
+    const stored = localStorage.getItem(LAYOUTS_KEY(vid))
+    setLayouts(stored ? JSON.parse(stored) : [])
+    setActiveLayoutId(null)
+  }
+
+  async function initViewer(vid, sid) {
+    const viewer = viewerRef.current
+    if (!viewer) return
+    const myId = ++initIdRef.current
+    setLoading(true)
+    setLargeDataset(false)
+    setLoadProgress(null)
+    setSlice({})
+    expandDepthRef.current = null
+    try {
+      const [perspective, dataResult, meta] = await Promise.all([
+        loadPerspective(),
+        fetch(`/api/versions/${vid}/data`).then(async r => {
+          if (!r.ok) { const { error } = await r.json(); throw new Error(error || 'Failed to load data') }
+          const rowCount = parseInt(r.headers.get('X-Row-Count') || '0')
+          const total    = parseInt(r.headers.get('Content-Length') || '0') || null
+          const reader   = r.body.getReader()
+          const chunks   = []
+          let received   = 0
+          setLoadProgress({ received: 0, total })
+          while (true) {
+            const { done, value } = await reader.read()
+            if (done) break
+            chunks.push(value)
+            received += value.byteLength
+            setLoadProgress({ received, total })
+          }
+          const merged = new Uint8Array(received)
+          let pos = 0
+          for (const c of chunks) { merged.set(c, pos); pos += c.byteLength }
+          return { buffer: merged.buffer, rowCount }
+        }),
+        fetch(`/api/sources/${sid}/cols`).then(r => r.json()),
+      ])
+
+      const { buffer, rowCount } = dataResult
+      colMetaRef.current = meta
+      const validCols = new Set([
+        ...meta.filter(c => ['dimension','value','units','date'].includes(c.role)).map(c => c.cname),
+        'pf_id', 'pf_iter', 'pf_logid', 'pf_user', 'created_at',
+      ])
+      const tableName = `fc_${vid}`
+
+      if (rowCount >= 500000) setLargeDataset(true)
+
+      if (myId !== initIdRef.current) return
+
+      if (!workerRef.current) workerRef.current = await perspective.worker()
+      const worker = workerRef.current
+
+      if (tableRef.current) {
+        try { await tableRef.current.delete() } catch {}
+        tableRef.current = null
+      }
+
+      const opts = { name: tableName, index: 'pf_id' }
+      const makeTable = async () => rowCount > 0 ? worker.table(buffer, opts) : worker.table([], opts)
+      try {
+        tableRef.current = await makeTable()
+      } catch (err) {
+        if (/already exists/i.test(String(err?.message || err))) {
+          try {
+            const existing = await worker.open_table(tableName)
+            if (existing) await existing.delete()
+          } catch {}
+          tableRef.current = await makeTable()
+        } else {
+          throw err
+        }
+      }
+
+      if (myId !== initIdRef.current) {
+        try { await tableRef.current.delete() } catch {}
+        tableRef.current = null
+        return
+      }
+
+      await viewer.load(worker)
+      viewer.setAttribute('theme', dark ? 'Pro Dark' : 'Pro Light')
+
+      // restore last-used layout or build default
+      const saved = localStorage.getItem(LAYOUT_KEY(vid))
+      if (saved) {
+        const cfg = cleanLayout(JSON.parse(saved), validCols)
+        cfg.plugin_config = { edit_mode: 'SELECT_REGION', ...(cfg.plugin_config || {}) }
+        await viewer.restore(cfg)
+        if (cfg.expand_depth != null) await applyDepth(cfg.expand_depth)
+      } else {
+        const sourceDefault = sources.find(s => String(s.id) === String(sid))?.default_layout
+        let cfg
+        if (sourceDefault && Object.keys(sourceDefault).length > 0) {
+          cfg = cleanLayout(sourceDefault, validCols)
+          cfg.table = tableName
+          cfg.plugin_config = { edit_mode: 'SELECT_REGION', ...(cfg.plugin_config || {}) }
+        } else {
+          const valueCol = meta.find(c => c.role === 'value')?.cname
+          cfg = {
+            table: tableName,
+            settings: false,
+            group_by: ['pf_iter'],
+            columns: valueCol ? [valueCol] : [],
+            plugin_config: { edit_mode: 'SELECT_REGION' }
+          }
+        }
+        await viewer.restore(cfg)
+      }
+
+      // auto-persist viewer state (formatting, columns, etc.) to the last-used cache
+      if (viewer._pspUpdate) viewer.removeEventListener('perspective-config-update', viewer._pspUpdate)
+      viewer._pspUpdate = async () => {
+        try {
+          const cfg = await captureConfig()
+          if (cfg) await persistLayout(vid, cfg)
+        } catch {}
+      }
+      viewer.addEventListener('perspective-config-update', viewer._pspUpdate)
+
+      // click → slice via event filters (Perspective encodes row position as [col,'==',val] triples)
+      if (viewer._pspClick) viewer.removeEventListener('perspective-click', viewer._pspClick)
+      viewer._pspClick = async (e) => {
+        const detail = e.detail || {}
+        if (!detail.row) return
+        const config = await viewer.save()
+        if (!(config.group_by || []).length) return
+        const eventFilters = (detail.config || {}).filter || []
+        const s = {}
+        eventFilters.forEach(([col, op, val]) => {
+          if (op === '==' && val != null) s[col] = String(val)
+        })
+        if (Object.keys(s).length > 0) setSlice(s)
+      }
+      viewer.addEventListener('perspective-click', viewer._pspClick)
+      setLargeDataset(false)
+
+    } catch (err) {
+      flash(err.message, 'error')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  async function applyDepth(d) {
+    const viewer = viewerRef.current
+    if (!viewer) return
+    const view   = await viewer.getView()
+    await view.set_depth(d)
+    const plugin = await viewer.getPlugin()
+    await plugin.draw(view)
+    expandDepthRef.current = d
+  }
+
+  async function captureConfig() {
+    const viewer = viewerRef.current
+    if (!viewer) return null
+    const cfg = await viewer.save()
+    return { ...cfg, expand_depth: expandDepthRef.current }
+  }
+
+  async function persistLayout(vid, cfg) {
+    localStorage.setItem(LAYOUT_KEY(vid), JSON.stringify(cfg))
+  }
+
+  async function handleSaveAs() {
+    const name = saveAsName.trim()
+    if (!name) return
+    const cfg = await captureConfig()
+    if (!cfg) return
+    const id      = Date.now()
+    const updated = [...layouts, { id, name, config: cfg }]
+    localStorage.setItem(LAYOUTS_KEY(versionId), JSON.stringify(updated))
+    await persistLayout(versionId, cfg)
+    setLayouts(updated)
+    setActiveLayoutId(id)
+    setShowSaveAs(false)
+    setSaveAsName('')
+    flash('Saved')
+  }
+
+  async function saveAsSourceDefault() {
+    const cfg = await captureConfig()
+    if (!cfg) return
+    const { table, expand_depth, ...rest } = cfg
+    try {
+      const res = await fetch(`/api/sources/${sourceId}/default-layout`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(rest)
+      })
+      if (!res.ok) { const data = await res.json(); flash(data.error || 'Failed', 'error'); return }
+      if (refreshSources) await refreshSources()
+      flash('Saved as source default')
+    } catch (err) { flash(err.message, 'error') }
+  }
+
+  async function handleSaveOver() {
+    const layout = layouts.find(l => l.id === activeLayoutId)
+    if (!layout) return
+    const cfg     = await captureConfig()
+    if (!cfg) return
+    const updated = layouts.map(l => l.id === activeLayoutId ? { ...l, config: cfg } : l)
+    localStorage.setItem(LAYOUTS_KEY(versionId), JSON.stringify(updated))
+    await persistLayout(versionId, cfg)
+    setLayouts(updated)
+    flash('Saved')
+  }
+
+  async function applyLayout(layout) {
+    const viewer = viewerRef.current
+    if (!viewer) return
+    const validCols = new Set(tableRef.current ? Object.keys(await tableRef.current.schema()) : [])
+    const cfg = cleanLayout(layout.config, validCols)
+    cfg.plugin_config = { edit_mode: 'SELECT_REGION', ...(cfg.plugin_config || {}) }
+    await viewer.restore(cfg)
+    if (cfg.expand_depth != null) await applyDepth(cfg.expand_depth)
+    setActiveLayoutId(layout.id)
+    await persistLayout(versionId, cfg)
+  }
+
+  function deleteLayout(id, e) {
+    e.stopPropagation()
+    const updated = layouts.filter(l => l.id !== id)
+    localStorage.setItem(LAYOUTS_KEY(versionId), JSON.stringify(updated))
+    setLayouts(updated)
+    if (activeLayoutId === id) setActiveLayoutId(null)
+  }
+
+  function resetLayout() {
+    localStorage.removeItem(LAYOUT_KEY(versionId))
+    setActiveLayoutId(null)
+    const viewer = viewerRef.current
+    if (viewer) viewer.restore({ settings: true })
+  }
+
+  async function submitOp(op) {
+    if (!Object.keys(slice).length) { flash('Select a slice first', 'error'); return }
+    let body = { pf_user: 'admin', slice }
+
+    if (op === 'scale') {
+      let vi = null, ui = null
+      if (scaleMode === 'target') {
+        const curValue = currentTotals?.total?.value
+        const curUnits = currentTotals?.total?.units
+        if (scalePrice !== '' && curUnits != null && curValue != null) {
+          // hold units constant; new value = price × current units
+          vi = (parseFloat(scalePrice) * curUnits) - curValue
+        }
+        if (scaleValue !== '' && curValue != null)
+          vi = parseFloat(scaleValue) - curValue
+        if (scaleUnits !== '' && curUnits != null)
+          ui = parseFloat(scaleUnits) - curUnits
+      } else {
+        if (scaleValue !== '') vi = scalePct ? parseFloat(scaleValue) : parseFloat(scaleValue)
+        if (scaleUnits !== '') ui = scalePct ? parseFloat(scaleUnits) : parseFloat(scaleUnits)
+      }
+      if (vi == null && ui == null) { flash('Enter a target or increment', 'error'); return }
+      body = { ...body, note: scaleNote, value_incr: vi, units_incr: ui, pct: scaleMode === 'delta' && scalePct }
+    } else if (op === 'recode') {
+      const set = Object.fromEntries(Object.entries(recodeSet).filter(([, v]) => v.trim()))
+      if (!Object.keys(set).length) { flash('Enter at least one new dimension value', 'error'); return }
+      body = { ...body, note: recodeNote, set }
+    } else if (op === 'clone') {
+      const set = Object.fromEntries(Object.entries(cloneSet).filter(([, v]) => v.trim()))
+      if (!Object.keys(set).length) { flash('Enter at least one override value', 'error'); return }
+      body = { ...body, note: cloneNote, set, scale: parseFloat(cloneScale) || 1 }
+    }
+
+    try {
+      const res  = await fetch(`/api/versions/${versionId}/${op}`, {
+        method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body)
+      })
+      const data = await res.json()
+      if (!res.ok) { flash(data.error, 'error'); return }
+      if (data.rows?.length && tableRef.current) await tableRef.current.update(data.rows)
+      flash(`${op}: ${data.rows_affected ?? data.rows?.length ?? ''} rows`)
+      if (op === 'scale')  { setScaleValue(''); setScaleUnits(''); setScalePrice(''); setScaleNote(''); fetchCurrentTotals(slice) }
+      if (op === 'recode') { setRecodeNote('') }
+      if (op === 'clone')  { setCloneNote(''); setCloneScale('1') }
+    } catch (err) { flash(err.message, 'error') }
+  }
+
+  function flash(text, type = 'ok') {
+    setMsg({ text, type })
+    setTimeout(() => setMsg(null), 3000)
+  }
+
+  async function openLog() {
+    setShowLog(true)
+    setLogLoading(true)
+    try {
+      const data = await fetch(`/api/versions/${versionId}/log`).then(r => r.json())
+      setLogEntries(data)
+    } catch (err) {
+      flash(err.message, 'error')
+    } finally {
+      setLogLoading(false)
+    }
+  }
+
+  async function undoEntry(logId) {
+    setUndoingId(logId)
+    try {
+      const res  = await fetch(`/api/log/${logId}`, { method: 'DELETE' })
+      const data = await res.json()
+      if (!res.ok) { flash(data.error, 'error'); return }
+      setLogEntries(prev => prev.filter(e => e.id !== logId))
+      if (data.pf_ids?.length && tableRef.current) {
+        await tableRef.current.remove(data.pf_ids)
+      }
+      flash(`Undone — ${data.rows_deleted} rows removed`)
+    } catch (err) {
+      flash(err.message, 'error')
+    } finally {
+      setUndoingId(null)
+    }
+  }
+
+  async function saveNote(logId, text) {
+    try {
+      const res  = await fetch(`/api/log/${logId}`, {
+        method: 'PATCH', headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ note: text })
+      })
+      if (!res.ok) { flash('Failed to save note', 'error'); return }
+      setLogEntries(prev => prev.map(e => e.id === logId ? { ...e, note: text } : e))
+      setEditingNote(null)
+    } catch (err) {
+      flash(err.message, 'error')
+    }
+  }
+
+  const dimCols  = colMetaRef.current.filter(c => c.role === 'dimension')
+  const hasSlice = Object.keys(slice).length > 0
+
+  return (
+    <div className="h-full flex flex-col">
+
+      {/* Toolbar */}
+      <div className="px-3 py-1.5 border-b border-gray-200 bg-white flex items-center gap-3 shrink-0 flex-wrap text-xs">
+
+        {/* Layout group */}
+        <div className="flex items-center gap-1.5">
+          <span className="text-gray-400 uppercase tracking-wide" style={{fontSize:'10px'}}>Layout</span>
+          {layouts.map(l => (
+            <div key={l.id} onClick={() => applyLayout(l)}
+              className={`flex items-center gap-1 rounded px-2 py-0.5 cursor-pointer border transition-colors
+                ${activeLayoutId === l.id ? 'bg-blue-50 border-blue-300 text-blue-700' : 'bg-white border-gray-200 text-gray-600 hover:border-gray-400'}`}>
+              {l.name}
+              <button onClick={e => deleteLayout(l.id, e)} className="text-gray-300 hover:text-red-400 text-sm leading-none ml-0.5">×</button>
+            </div>
+          ))}
+          {showSaveAs ? (
+            <div className="flex items-center gap-1">
+              <input autoFocus value={saveAsName} onChange={e => setSaveAsName(e.target.value)}
+                onKeyDown={e => { if (e.key === 'Enter') handleSaveAs(); if (e.key === 'Escape') { setShowSaveAs(false); setSaveAsName('') } }}
+                placeholder="Layout name…" className="border border-gray-300 rounded px-2 py-0.5 w-32 focus:outline-none focus:border-blue-400" />
+              <button onClick={handleSaveAs} className="text-blue-600 hover:text-blue-800 px-1">Save</button>
+              <button onClick={() => { setShowSaveAs(false); setSaveAsName('') }} className="text-gray-400 px-1">Cancel</button>
+            </div>
+          ) : (
+            <>
+              {activeLayoutId !== null && (
+                <button onClick={handleSaveOver} className="border border-blue-200 text-blue-500 hover:text-blue-700 rounded px-2 py-0.5">Save</button>
+              )}
+              <button onClick={() => setShowSaveAs(true)} className="border border-dashed border-gray-200 text-gray-400 hover:text-gray-600 rounded px-2 py-0.5">
+                Save as…
+              </button>
+              <button onClick={saveAsSourceDefault} disabled={!sourceId}
+                className="border border-dashed border-gray-200 text-gray-400 hover:text-gray-600 rounded px-2 py-0.5 disabled:opacity-40"
+                title="Use this layout as the default for new versions of this source">
+                Set source default
+              </button>
+              {activeLayoutId !== null && (
+                <button onClick={resetLayout} className="text-gray-300 hover:text-red-400">Reset</button>
+              )}
+            </>
+          )}
+        </div>
+
+        <div className="w-px h-4 bg-gray-200 shrink-0" />
+
+        {/* Expand group */}
+        <div className="flex items-center gap-1.5">
+          <span className="text-gray-400 uppercase tracking-wide" style={{fontSize:'10px'}}>Expand</span>
+          {[0, 1, 2, 3].map(d => (
+            <button key={d} onClick={() => applyDepth(d)}
+              className={`border rounded px-1.5 py-0.5 transition-colors
+                ${expandDepthRef.current === d ? 'border-blue-300 text-blue-600 bg-blue-50' : 'border-gray-200 text-gray-500 hover:border-gray-400'}`}>
+              {d}
+            </button>
+          ))}
+        </div>
+
+        <div className="w-px h-4 bg-gray-200 shrink-0" />
+
+        {/* Data group */}
+        <div className="flex items-center gap-1.5">
+          <button onClick={() => initViewer(versionId, sourceId)} disabled={loading || !versionId}
+            className="border border-gray-200 rounded px-2 py-0.5 text-gray-500 hover:bg-gray-50 disabled:opacity-40">
+            {loading ? 'Loading…' : 'Refresh data'}
+          </button>
+          <button onClick={openLog} disabled={!versionId}
+            className="border border-gray-200 rounded px-2 py-0.5 text-gray-500 hover:bg-gray-50 disabled:opacity-40">
+            Change log
+          </button>
+        </div>
+
+        {msg && (
+          <span className={`ml-2 text-xs font-medium px-2 py-0.5 rounded ${msg.type === 'error' ? 'bg-red-50 text-red-600' : 'bg-green-50 text-green-600'}`}>
+            {msg.text}
+          </span>
+        )}
+
+      </div>
+
+      {/* History modal */}
+      {showLog && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40" onClick={() => setShowLog(false)}>
+          <div className="bg-white rounded-lg shadow-xl w-full max-w-4xl mx-4 flex flex-col max-h-[80vh]" onClick={e => e.stopPropagation()}>
+            <div className="flex items-center justify-between px-5 py-3 border-b border-gray-200 shrink-0">
+              <span className="font-medium text-gray-700 text-sm">Change History</span>
+              <button onClick={() => setShowLog(false)} className="text-gray-400 hover:text-gray-600 text-lg leading-none">×</button>
+            </div>
+
+            <div className="overflow-y-auto flex-1">
+              {logLoading ? (
+                <div className="p-8 text-center text-sm text-gray-400">Loading…</div>
+              ) : logEntries.length === 0 ? (
+                <div className="p-8 text-center text-sm text-gray-400">No log entries yet.</div>
+              ) : (
+                <table className="w-full text-xs border-collapse">
+                  <thead className="sticky top-0 bg-gray-50 text-gray-400 uppercase tracking-wide" style={{fontSize:'10px'}}>
+                    <tr>
+                      <th className="text-left px-4 py-2 font-medium w-32">Time</th>
+                      <th className="text-left px-4 py-2 font-medium w-24">Op</th>
+                      <th className="text-left px-4 py-2 font-medium">Slice</th>
+                      <th className="text-left px-4 py-2 font-medium">Note</th>
+                      <th className="text-right px-4 py-2 font-medium w-16">Rows</th>
+                      <th className="px-4 py-2 w-16"></th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {logEntries.map(entry => (
+                      <tr key={entry.id} className="border-t border-gray-100 hover:bg-gray-50">
+                        <td className="px-4 py-2 text-gray-400 whitespace-nowrap">{fmtStamp(entry.stamp)}</td>
+                        <td className="px-4 py-2">
+                          <span className={`px-1.5 py-0.5 rounded text-xs font-medium ${opBadge(entry.operation)}`}>
+                            {entry.operation}
+                          </span>
+                        </td>
+                        <td className="px-4 py-2 text-gray-600 font-mono">{fmtSlice(entry.slice)}</td>
+                        <td className="px-4 py-2 text-gray-600 max-w-xs">
+                          {editingNote?.id === entry.id ? (
+                            <div className="flex items-center gap-1">
+                              <input autoFocus value={editingNote.text}
+                                onChange={e => setEditingNote(n => ({ ...n, text: e.target.value }))}
+                                onKeyDown={e => {
+                                  if (e.key === 'Enter') saveNote(entry.id, editingNote.text)
+                                  if (e.key === 'Escape') setEditingNote(null)
+                                }}
+                                className="border border-blue-300 rounded px-1.5 py-0.5 text-xs flex-1 focus:outline-none" />
+                              <button onClick={() => saveNote(entry.id, editingNote.text)} className="text-blue-600 hover:text-blue-800">✓</button>
+                              <button onClick={() => setEditingNote(null)} className="text-gray-400 hover:text-gray-600">✕</button>
+                            </div>
+                          ) : (
+                            <span onClick={() => setEditingNote({ id: entry.id, text: entry.note || '' })}
+                              className="cursor-text hover:bg-blue-50 rounded px-1 -mx-1 block truncate"
+                              title={entry.note || 'Click to add note'}>
+                              {entry.note || <span className="text-gray-300 italic">add note</span>}
+                            </span>
+                          )}
+                        </td>
+                        <td className="px-4 py-2 text-right text-gray-500 tabular-nums">{entry.row_count ?? '—'}</td>
+                        <td className="px-4 py-2">
+                          <button
+                            onClick={() => undoEntry(entry.id)}
+                            disabled={undoingId === entry.id}
+                            className="text-xs border border-red-200 text-red-400 hover:text-red-600 hover:border-red-400 rounded px-2 py-0.5 disabled:opacity-40 whitespace-nowrap">
+                            {undoingId === entry.id ? '…' : 'Undo'}
+                          </button>
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Main area */}
+      <div className="flex-1 flex min-h-0">
+        {/* Perspective viewer */}
+        <div className="relative flex-1 min-w-0">
+          {loading && (
+            <div className="absolute inset-0 flex flex-col items-center justify-center bg-gray-50 z-10 gap-2">
+              <span className="text-sm text-gray-400">Loading…</span>
+              {loadProgress && (
+                <>
+                  <span className="text-xs text-gray-400 font-mono">
+                    {fmtBytes(loadProgress.received)}
+                    {loadProgress.total ? ` / ${fmtBytes(loadProgress.total)}` : ''}
+                  </span>
+                  {loadProgress.total > 0 && (
+                    <div className="w-48 h-1 bg-gray-200 rounded overflow-hidden">
+                      <div
+                        className="h-full bg-blue-400 transition-all"
+                        style={{ width: `${Math.min(100, (loadProgress.received / loadProgress.total) * 100)}%` }}
+                      />
+                    </div>
+                  )}
+                </>
+              )}
+            </div>
+          )}
+          {!loading && largeDataset && (
+            <div className="absolute top-2 left-1/2 -translate-x-1/2 z-10 bg-amber-50 border border-amber-200 text-amber-800 text-xs px-3 py-1.5 rounded shadow-sm">
+              Large dataset — pivot may take a moment to render
+            </div>
+          )}
+          <perspective-viewer ref={viewerRef} style={{ position: 'absolute', inset: 0 }} />
+        </div>
+
+        {/* Drag handle */}
+        <div onMouseDown={onDragStart} className="w-1 shrink-0 cursor-col-resize hover:bg-blue-400 bg-transparent transition-colors" />
+
+        {/* Operation panel */}
+        <div className="shrink-0 border-l border-gray-200 bg-white flex flex-col overflow-y-auto text-xs" style={{ width: panelWidth }}>
+          <div className="p-3 border-b border-gray-100">
+            <div className="font-medium text-gray-400 uppercase tracking-wide mb-2" style={{fontSize:'10px'}}>Slice</div>
+            {!hasSlice ? (
+              <div className="text-gray-300 italic">Click a pivot row to select a slice</div>
+            ) : (
+              <div className="flex flex-col gap-1">
+                {Object.entries(slice).map(([k, v]) => (
+                  <div key={k} className="text-gray-700">
+                    <span className="text-gray-400">{k}</span> = <span className="font-medium">{v}</span>
+                  </div>
+                ))}
+                <button onClick={() => setSlice({})} className="text-gray-300 hover:text-red-500 mt-1 text-left">Clear</button>
+              </div>
+            )}
+          </div>
+
+          {hasSlice && currentTotals?.byIter?.length > 0 && (
+            <div className="px-3 py-2 border-b border-gray-100">
+              <div className="font-medium text-gray-400 uppercase tracking-wide mb-1.5" style={{fontSize:'10px'}}>Current</div>
+              <table className="w-full text-xs">
+                <thead>
+                  <tr className="text-gray-400" style={{fontSize:'10px'}}>
+                    <th className="text-left font-normal pb-1"></th>
+                    {currentTotals.valueCol && <th className="text-right font-normal pb-1 pl-1">{currentTotals.valueCol}</th>}
+                    {currentTotals.unitsCol && <th className="text-right font-normal pb-1 pl-1">{currentTotals.unitsCol}</th>}
+                    {currentTotals.valueCol && currentTotals.unitsCol && <th className="text-right font-normal pb-1 pl-1">price</th>}
+                  </tr>
+                </thead>
+                <tbody>
+                  {currentTotals.byIter.map(r => (
+                    <tr key={r.iter}>
+                      <td className="text-gray-500 capitalize pr-1">{r.iter}</td>
+                      {currentTotals.valueCol && <td className="text-right font-mono text-gray-700 pl-1">{fmtNum(r.value)}</td>}
+                      {currentTotals.unitsCol && <td className="text-right font-mono text-gray-700 pl-1">{fmtNum(r.units)}</td>}
+                      {currentTotals.valueCol && currentTotals.unitsCol && <td className="text-right font-mono text-gray-700 pl-1">{fmtNum(r.units ? r.value / r.units : null, 4)}</td>}
+                    </tr>
+                  ))}
+                  {currentTotals.byIter.length > 1 && (
+                    <tr className="border-t border-gray-100">
+                      <td className="text-gray-600 font-medium pt-1 pr-1">total</td>
+                      {currentTotals.valueCol && <td className="text-right font-mono font-semibold text-gray-800 pt-1 pl-1">{fmtNum(currentTotals.total.value)}</td>}
+                      {currentTotals.unitsCol && <td className="text-right font-mono font-semibold text-gray-800 pt-1 pl-1">{fmtNum(currentTotals.total.units)}</td>}
+                      {currentTotals.valueCol && currentTotals.unitsCol && <td className="text-right font-mono font-semibold text-gray-800 pt-1 pl-1">{fmtNum(currentTotals.total.units ? currentTotals.total.value / currentTotals.total.units : null, 4)}</td>}
+                    </tr>
+                  )}
+                </tbody>
+              </table>
+            </div>
+          )}
+
+          {hasSlice && (
+            <>
+              <div className="flex border-b border-gray-100">
+                {['scale', 'recode', 'clone'].map(op => (
+                  <button key={op} onClick={() => setActiveOp(op)}
+                    className={`flex-1 py-2 capitalize ${activeOp === op ? 'border-b-2 border-blue-500 text-blue-600 font-medium' : 'text-gray-400 hover:text-gray-600'}`}>
+                    {op}
+                  </button>
+                ))}
+              </div>
+
+              <div className="p-3 flex flex-col gap-2.5">
+                {activeOp === 'scale' && <>
+                  {/* Mode toggle */}
+                  <div className="flex rounded border border-gray-200 overflow-hidden">
+                    {[['target','= Target'],['delta','Δ Increment']].map(([m, label]) => (
+                      <button key={m} onClick={() => { setScaleMode(m); setScaleValue(''); setScaleUnits(''); setScalePrice('') }}
+                        className={`flex-1 py-1 text-xs ${scaleMode === m ? 'bg-blue-600 text-white' : 'bg-white text-gray-500 hover:bg-gray-50'}`}>
+                        {label}
+                      </button>
+                    ))}
+                  </div>
+
+                  {currentTotals?.valueCol && (
+                    <Row label={currentTotals.valueCol}>
+                      <input type="number" step="any" value={scaleValue}
+                        onChange={e => setScaleValue(e.target.value)}
+                        placeholder={scaleMode === 'target' ? 'target total' : '+ / − amount'}
+                        className={inp} />
+                    </Row>
+                  )}
+
+                  {currentTotals?.unitsCol && (
+                    <Row label={currentTotals.unitsCol}>
+                      <input type="number" step="any" value={scaleUnits}
+                        onChange={e => setScaleUnits(e.target.value)}
+                        placeholder={scaleMode === 'target' ? 'target total' : '+ / − amount'}
+                        className={inp} />
+                    </Row>
+                  )}
+
+                  {scaleMode === 'target' && currentTotals?.valueCol && currentTotals?.unitsCol && (
+                    <Row label="price">
+                      <input type="number" step="any" value={scalePrice}
+                        onChange={e => setScalePrice(e.target.value)}
+                        placeholder="target price (holds units)"
+                        className={inp} />
+                    </Row>
+                  )}
+
+                  {scaleMode === 'delta' && (
+                    <label className="flex items-center gap-2 text-gray-500">
+                      <input type="checkbox" checked={scalePct} onChange={e => setScalePct(e.target.checked)} /> % of slice
+                    </label>
+                  )}
+
+                  <Row label="Note"><input value={scaleNote} onChange={e => setScaleNote(e.target.value)} placeholder="optional" className={inp} /></Row>
+                  <Submit onClick={() => submitOp('scale')}>Apply Scale</Submit>
+                </>}
+
+                {activeOp === 'recode' && <>
+                  <p className="text-gray-400">New values for dimensions to replace. Leave blank to keep.</p>
+                  {dimCols.map(c => (
+                    <Row key={c.cname} label={c.cname}>
+                      <input value={recodeSet[c.cname] || ''} onChange={e => setRecodeSet(s => ({ ...s, [c.cname]: e.target.value }))}
+                        placeholder={slice[c.cname] || '—'} className={`${inp} font-mono`} />
+                    </Row>
+                  ))}
+                  <Row label="Note"><input value={recodeNote} onChange={e => setRecodeNote(e.target.value)} placeholder="optional" className={inp} /></Row>
+                  <Submit onClick={() => submitOp('recode')}>Apply Recode</Submit>
+                </>}
+
+                {activeOp === 'clone' && <>
+                  <p className="text-gray-400">Override dimensions on cloned rows. Leave blank to keep.</p>
+                  {dimCols.map(c => (
+                    <Row key={c.cname} label={c.cname}>
+                      <input value={cloneSet[c.cname] || ''} onChange={e => setCloneSet(s => ({ ...s, [c.cname]: e.target.value }))}
+                        placeholder={slice[c.cname] || '—'} className={`${inp} font-mono`} />
+                    </Row>
+                  ))}
+                  <Row label="Scale"><input type="number" step="any" value={cloneScale} onChange={e => setCloneScale(e.target.value)} className={inp} /></Row>
+                  <Row label="Note"><input value={cloneNote} onChange={e => setCloneNote(e.target.value)} placeholder="optional" className={inp} /></Row>
+                  <Submit onClick={() => submitOp('clone')}>Apply Clone</Submit>
+                </>}
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+const inp = 'border border-gray-200 rounded px-2 py-1 text-xs flex-1 bg-white min-w-0'
+
+function fmtBytes(n) {
+  if (n < 1024) return `${n} B`
+  if (n < 1048576) return `${(n / 1024).toFixed(1)} KB`
+  return `${(n / 1048576).toFixed(1)} MB`
+}
+
+function fmtNum(n, decimals = 2) {
+  if (n == null || !isFinite(n)) return '—'
+  return n.toLocaleString(undefined, { maximumFractionDigits: decimals })
+}
+
+function fmtStamp(stamp) {
+  return new Date(stamp).toLocaleString(undefined, { month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit' })
+}
+
+function fmtSlice(slice) {
+  if (!slice || !Object.keys(slice).length) return '—'
+  return Object.entries(slice).map(([k, v]) => `${k} = ${v}`).join(', ')
+}
+
+const OP_BADGE = {
+  baseline:  'bg-gray-100 text-gray-600',
+  reference: 'bg-blue-50 text-blue-600',
+  scale:     'bg-green-50 text-green-700',
+  recode:    'bg-amber-50 text-amber-700',
+  clone:     'bg-purple-50 text-purple-700',
+}
+function opBadge(op) { return OP_BADGE[op] || 'bg-gray-100 text-gray-500' }
+
+function Row({ label, children }) {
+  return (
+    <div className="flex items-center gap-2">
+      <span className="text-gray-400 w-14 shrink-0 truncate" title={label}>{label}</span>
+      {children}
+    </div>
+  )
+}
+
+function Submit({ onClick, children }) {
+  return (
+    <button onClick={onClick} className="mt-1 bg-blue-600 text-white text-xs px-3 py-1.5 rounded hover:bg-blue-700 w-full">
+      {children}
+    </button>
+  )
+}

ui/src/views/Setup.jsx

@@ -0,0 +1,411 @@
+import { useState, useEffect } from 'react'
+
+const ROLES = ['ignore', 'dimension', 'value', 'units', 'date', 'filter']
+
+const ROLE_STYLE = {
+  dimension: 'bg-blue-50 text-blue-700',
+  value:     'bg-green-50 text-green-700',
+  units:     'bg-green-50 text-green-700',
+  date:      'bg-purple-50 text-purple-700',
+  filter:    'bg-yellow-50 text-yellow-700',
+  ignore:    'bg-gray-100 text-gray-400',
+}
+
+export default function Setup({ refreshSources }) {
+  const [tables,         setTables]         = useState([])
+  const [sources,        setSources]        = useState([])
+  const [selectedSource, setSelectedSource] = useState(null)
+  const [cols,           setCols]           = useState([])
+  const [editedCols,     setEditedCols]     = useState([])
+  const [colsDirty,      setColsDirty]      = useState(false)
+  const [preview,        setPreview]        = useState(null)   // { schema, tname, columns, rows }
+  const [previewLoading, setPreviewLoading] = useState(false)
+  const [sqlStatus,      setSqlStatus]      = useState({})     // sourceId -> bool
+  const [saving,         setSaving]         = useState(false)
+  const [generating,     setGenerating]     = useState(false)
+  const [msg,            setMsg]            = useState(null)
+
+  useEffect(() => {
+    fetch('/api/tables').then(r => r.json()).then(setTables).catch(console.error)
+    loadSources()
+  }, [])
+
+  function loadSources() {
+    fetch('/api/sources').then(r => r.json()).then(data => {
+      setSources(data)
+      // check sql status for each source
+      data.forEach(s => {
+        fetch(`/api/sources/${s.id}/sql`).then(r => r.json()).then(sqls => {
+          setSqlStatus(prev => ({ ...prev, [s.id]: sqls.length > 0 }))
+        })
+      })
+    }).catch(console.error)
+    refreshSources?.()
+  }
+
+  function selectSource(source) {
+    setSelectedSource(source)
+    setColsDirty(false)
+    fetch(`/api/sources/${source.id}/cols`).then(r => r.json()).then(data => {
+      setCols(data)
+      setEditedCols(data.map(c => ({ ...c })))
+    })
+  }
+
+  async function openPreview(schema, tname, e) {
+    e.stopPropagation()
+    setPreviewLoading(true)
+    setPreview({ schema, tname, loading: true })
+    try {
+      const data = await fetch(`/api/tables/${schema}/${tname}/preview`).then(r => r.json())
+      setPreview({ schema, tname, ...data })
+    } catch {
+      setPreview(null)
+    } finally {
+      setPreviewLoading(false)
+    }
+  }
+
+  async function registerSource(schema, tname) {
+    try {
+      const res = await fetch('/api/sources', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ schema, tname, created_by: 'admin' })
+      })
+      if (!res.ok) {
+        const err = await res.json()
+        flash(err.error, 'error')
+        return
+      }
+      const source = await res.json()
+      loadSources()
+      flash(`Registered ${schema}.${tname}`)
+      // auto-select new source and load its cols
+      fetch(`/api/sources/${source.id}/cols`).then(r => r.json()).then(data => {
+        setSelectedSource(source)
+        setCols(data)
+        setEditedCols(data.map(c => ({ ...c })))
+        setColsDirty(false)
+      })
+    } catch (err) {
+      flash(err.message, 'error')
+    }
+  }
+
+  function updateCol(idx, field, value) {
+    setEditedCols(prev => {
+      const next = prev.map((c, i) => i === idx ? { ...c, [field]: value } : c)
+      return next
+    })
+    setColsDirty(true)
+  }
+
+  async function saveCols() {
+    setSaving(true)
+    try {
+      const res = await fetch(`/api/sources/${selectedSource.id}/cols`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(editedCols)
+      })
+      if (!res.ok) { const e = await res.json(); flash(e.error, 'error'); return }
+      const saved = await res.json()
+      setCols(saved)
+      setEditedCols(saved.map(c => ({ ...c })))
+      setColsDirty(false)
+      flash('Saved')
+    } catch (err) {
+      flash(err.message, 'error')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  async function generateSQL() {
+    setGenerating(true)
+    try {
+      const res = await fetch(`/api/sources/${selectedSource.id}/generate-sql`, { method: 'POST' })
+      const data = await res.json()
+      if (!res.ok) { flash(data.error, 'error'); return }
+      setSqlStatus(prev => ({ ...prev, [selectedSource.id]: true }))
+      flash(`SQL generated: ${data.operations.join(', ')}`)
+    } catch (err) {
+      flash(err.message, 'error')
+    } finally {
+      setGenerating(false)
+    }
+  }
+
+  async function deleteSource(id, e) {
+    e.stopPropagation()
+    if (!confirm('Deregister this source? Existing forecast tables are not affected.')) return
+    await fetch(`/api/sources/${id}`, { method: 'DELETE' })
+    if (selectedSource?.id === id) { setSelectedSource(null); setCols([]); setEditedCols([]) }
+    loadSources()
+  }
+
+  function flash(text, type = 'ok') {
+    setMsg({ text, type })
+    setTimeout(() => setMsg(null), 3000)
+  }
+
+  const registeredKeys = new Set(sources.map(s => `${s.schema}.${s.tname}`))
+
+  return (
+    <div className="h-full flex overflow-hidden text-sm">
+
+      {/* All Tables */}
+      <div className="w-64 bg-white border-r border-gray-200 flex flex-col shrink-0">
+        <div className="px-3 py-2 border-b border-gray-100 text-xs font-medium text-gray-500 uppercase tracking-wide">
+          All Tables
+        </div>
+        <div className="overflow-y-auto flex-1">
+          <table className="w-full text-xs">
+            <thead className="sticky top-0 bg-gray-50">
+              <tr className="text-left text-gray-400 border-b border-gray-100">
+                <th className="px-3 py-1.5 font-medium">schema</th>
+                <th className="px-3 py-1.5 font-medium">table</th>
+                <th className="px-3 py-1.5 font-medium text-right">rows</th>
+              </tr>
+            </thead>
+            <tbody>
+              {tables.map(t => {
+                const key = `${t.schema}.${t.tname}`
+                const registered = registeredKeys.has(key)
+                return (
+                  <tr
+                    key={key}
+                    onClick={e => openPreview(t.schema, t.tname, e)}
+                    className="border-t border-gray-50 hover:bg-blue-50 cursor-pointer group"
+                  >
+                    <td className="px-3 py-1.5 text-gray-400">{t.schema}</td>
+                    <td className="px-3 py-1.5 font-medium">
+                      <div className="flex items-center gap-1">
+                        <span className={registered ? 'text-green-600' : ''}>{t.tname}</span>
+                        {registered && <span className="text-green-400 text-xs">✓</span>}
+                      </div>
+                    </td>
+                    <td className="px-3 py-1.5 text-right text-gray-500">
+                      {Number(t.row_estimate).toLocaleString()}
+                    </td>
+                  </tr>
+                )
+              })}
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      {/* Right side */}
+      <div className="flex-1 flex flex-col overflow-hidden min-w-0">
+
+        {/* Flash message */}
+        {msg && (
+          <div className={`px-4 py-2 text-xs font-medium ${msg.type === 'error' ? 'bg-red-50 text-red-700' : 'bg-green-50 text-green-700'}`}>
+            {msg.text}
+          </div>
+        )}
+
+        <div className="flex-1 flex flex-col gap-0 overflow-hidden">
+
+          {/* Registered Sources */}
+          <div className="bg-white border-b border-gray-200 shrink-0">
+            <div className="px-3 py-2 border-b border-gray-100 text-xs font-medium text-gray-500 uppercase tracking-wide">
+              Registered Sources
+            </div>
+            <table className="w-full text-xs">
+              <thead className="bg-gray-50">
+                <tr className="text-left text-gray-400 border-b border-gray-100">
+                  <th className="px-3 py-1.5 font-medium">source</th>
+                  <th className="px-3 py-1.5 font-medium">schema</th>
+                  <th className="px-3 py-1.5 font-medium">sql</th>
+                  <th className="px-3 py-1.5 font-medium">created</th>
+                  <th className="px-3 py-1.5"></th>
+                </tr>
+              </thead>
+              <tbody>
+                {sources.length === 0 && (
+                  <tr><td colSpan={5} className="px-3 py-3 text-gray-300 italic">No sources registered — click a table to preview, then register it</td></tr>
+                )}
+                {sources.map(s => (
+                  <tr
+                    key={s.id}
+                    onClick={() => selectSource(s)}
+                    className={`border-t border-gray-50 cursor-pointer hover:bg-gray-50 ${selectedSource?.id === s.id ? 'bg-blue-50' : ''}`}
+                  >
+                    <td className={`px-3 py-2 font-medium ${selectedSource?.id === s.id ? 'text-blue-700' : ''}`}>{s.tname}</td>
+                    <td className="px-3 py-2 text-gray-400">{s.schema}</td>
+                    <td className="px-3 py-2">
+                      {sqlStatus[s.id]
+                        ? <span className="text-green-600 font-medium">✓ ready</span>
+                        : <span className="text-gray-300">—</span>}
+                    </td>
+                    <td className="px-3 py-2 text-gray-400">{s.created_by || '—'}</td>
+                    <td className="px-3 py-2 text-right">
+                      <button onClick={e => deleteSource(s.id, e)} className="text-gray-300 hover:text-red-500 text-xs">✕</button>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+
+          {/* Col Meta Editor */}
+          {selectedSource ? (
+            <div className="flex-1 flex flex-col overflow-hidden bg-white">
+              <div className="px-3 py-2 border-b border-gray-100 flex items-center justify-between shrink-0">
+                <span className="text-xs font-medium text-gray-500 uppercase tracking-wide">
+                  Col Meta — <span className="text-gray-700 normal-case">{selectedSource.schema}.{selectedSource.tname}</span>
+                </span>
+                <div className="flex items-center gap-2">
+                  {colsDirty && (
+                    <button onClick={saveCols} disabled={saving} className="text-xs border border-gray-200 px-3 py-1 rounded hover:bg-gray-50 disabled:opacity-50">
+                      {saving ? 'Saving…' : 'Save'}
+                    </button>
+                  )}
+                  <button
+                    onClick={generateSQL}
+                    disabled={generating || colsDirty}
+                    className="text-xs bg-blue-600 text-white px-3 py-1 rounded hover:bg-blue-700 disabled:opacity-50"
+                    title={colsDirty ? 'Save col meta first' : ''}
+                  >
+                    {generating ? 'Generating…' : 'Generate SQL'}
+                  </button>
+                </div>
+              </div>
+              <div className="overflow-y-auto flex-1">
+                <table className="w-full text-xs">
+                  <thead className="sticky top-0 bg-gray-50">
+                    <tr className="text-left text-gray-400 border-b border-gray-100">
+                      <th className="px-3 py-1.5 font-medium">column</th>
+                      <th className="px-3 py-1.5 font-medium">role</th>
+                      <th className="px-3 py-1.5 font-medium text-center">key</th>
+                      <th className="px-3 py-1.5 font-medium">label</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {editedCols.map((col, i) => (
+                      <tr key={col.cname} className="border-t border-gray-50 hover:bg-gray-50">
+                        <td className="px-3 py-1.5 font-mono text-gray-700">{col.cname}</td>
+                        <td className="px-3 py-1.5">
+                          <select
+                            value={col.role}
+                            onChange={e => updateCol(i, 'role', e.target.value)}
+                            className={`text-xs px-1.5 py-0.5 rounded border-0 font-medium cursor-pointer ${ROLE_STYLE[col.role] || ''}`}
+                          >
+                            {ROLES.map(r => <option key={r} value={r}>{r}</option>)}
+                          </select>
+                        </td>
+                        <td className="px-3 py-1.5 text-center">
+                          <input
+                            type="checkbox"
+                            checked={!!col.is_key}
+                            onChange={e => updateCol(i, 'is_key', e.target.checked)}
+                            disabled={col.role !== 'dimension'}
+                            className="cursor-pointer disabled:opacity-20"
+                          />
+                        </td>
+                        <td className="px-3 py-1.5">
+                          <input
+                            type="text"
+                            value={col.label || ''}
+                            onChange={e => updateCol(i, 'label', e.target.value)}
+                            placeholder={col.cname}
+                            className="border border-transparent hover:border-gray-200 focus:border-gray-300 rounded px-1.5 py-0.5 w-full outline-none bg-transparent"
+                          />
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          ) : (
+            <div className="flex-1 flex items-center justify-center text-gray-300 text-xs italic">
+              Select a source to edit col meta
+            </div>
+          )}
+
+        </div>
+      </div>
+
+      {/* Table preview modal */}
+      {preview && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center">
+          <div className="absolute inset-0 bg-black/30" onClick={() => setPreview(null)} />
+          <div className="relative bg-white rounded-lg shadow-2xl flex flex-col z-10 text-xs" style={{ width: 720, maxWidth: '90vw', maxHeight: '80vh' }}>
+            <div className="flex items-center justify-between px-4 py-3 border-b border-gray-200 shrink-0">
+              <div className="flex items-center gap-3">
+                <span className="text-sm font-semibold text-gray-800">{preview.schema}.{preview.tname}</span>
+                {preview.columns && (
+                  <span className="text-gray-400">{preview.columns.length} columns</span>
+                )}
+                {!registeredKeys.has(`${preview.schema}.${preview.tname}`) && (
+                  <button
+                    onClick={() => { registerSource(preview.schema, preview.tname); setPreview(null) }}
+                    className="bg-blue-600 text-white text-xs px-3 py-1 rounded hover:bg-blue-700"
+                  >
+                    + Register source
+                  </button>
+                )}
+              </div>
+              <button onClick={() => setPreview(null)} className="text-gray-300 hover:text-gray-600 text-lg leading-none ml-4">✕</button>
+            </div>
+            {preview.loading ? (
+              <div className="p-8 text-center text-gray-400">Loading…</div>
+            ) : (
+              <div className="overflow-y-auto flex-1">
+                {/* Columns */}
+                <div className="px-4 pt-3 pb-1 text-gray-400 uppercase tracking-wide font-medium text-xs">Columns</div>
+                <table className="w-full mb-2">
+                  <thead>
+                    <tr className="text-left text-gray-400 border-b border-gray-100 bg-gray-50">
+                      <th className="px-4 py-1 font-medium">name</th>
+                      <th className="px-4 py-1 font-medium">type</th>
+                      <th className="px-4 py-1 font-medium">nullable</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {(preview.columns || []).map(c => (
+                      <tr key={c.column_name} className="border-t border-gray-50">
+                        <td className="px-4 py-1 font-mono text-gray-700">{c.column_name}</td>
+                        <td className="px-4 py-1 text-gray-400">{c.data_type}</td>
+                        <td className="px-4 py-1 text-gray-400">{c.is_nullable}</td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+                {/* Sample rows */}
+                <div className="px-4 py-1 text-gray-400 uppercase tracking-wide font-medium text-xs border-t border-gray-100">Sample rows</div>
+                <div className="overflow-x-auto">
+                  <table className="text-xs" style={{ minWidth: '100%' }}>
+                    <thead>
+                      <tr className="text-left text-gray-400 bg-gray-50 border-b border-gray-100">
+                        {(preview.columns || []).map(c => (
+                          <th key={c.column_name} className="px-4 py-1 font-medium whitespace-nowrap">{c.column_name}</th>
+                        ))}
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {(preview.rows || []).map((row, i) => (
+                        <tr key={i} className="border-t border-gray-50">
+                          {(preview.columns || []).map(c => (
+                            <td key={c.column_name} className={`px-4 py-1 font-mono whitespace-nowrap ${row[c.column_name] == null ? 'text-gray-300' : 'text-gray-600'}`}>
+                              {row[c.column_name] == null ? 'null' : String(row[c.column_name])}
+                            </td>
+                          ))}
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+
+    </div>
+  )
+}

ui/vite.config.js

@@ -0,0 +1,17 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+  server: {
+    host: '0.0.0.0',
+    proxy: {
+      '/api': 'http://localhost:3030'
+    }
+  },
+  build: {
+    outDir: '../public/app',
+    emptyOutDir: true
+  }
+})