From 72f3e5a45ee9e21c704b59cffa8aee7924a4b772 Mon Sep 17 00:00:00 2001
From: Adam Bowker <adam.b@posthog.com>
Date: Mon, 20 Jul 2026 15:34:35 -0400
Subject: [PATCH] refactor(canvas): move freeform authoring contract to
 @posthog/shared
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Relocate the freeform canvas authoring contract — the system-prompt builder
(freeformSystemPromptFor), the import whitelist, the starter scaffold, and the
freeform template id — from @posthog/core into @posthog/shared, so @posthog/agent
can consume it (for the canvas_checkout tool) without a core↔agent package cycle.

Pure move: @posthog/core/canvas/{canvasTemplates,freeformSchemas,freeformWhitelist,
freeformStarter} now re-export from @posthog/shared, so existing consumers are
unchanged.

Generated-By: PostHog Code
Task-Id: 2ed89933-091b-446c-af91-5cc72d939b3b
---
 packages/core/src/canvas/canvasTemplates.ts   | 162 +----------------
 .../core/src/canvas/canvasTemplatesService.ts |   7 +-
 packages/core/src/canvas/dashboardsService.ts |   3 +-
 packages/core/src/canvas/freeformSchemas.ts   |   1 -
 packages/shared/package.json                  |  12 ++
 packages/shared/src/canvas-freeform-prompt.ts | 163 ++++++++++++++++++
 .../src/canvas-freeform-starter.ts}           |   0
 .../src/canvas-freeform-whitelist.test.ts}    |   2 +-
 .../src/canvas-freeform-whitelist.ts}         |   0
 packages/shared/tsup.config.ts                |   3 +
 .../canvas/components/canvasTemplateIcon.tsx  |   2 +-
 .../canvas/freeform/sandboxRuntime.ts         |   2 +-
 .../ui/src/features/canvas/freeformPrompt.ts  |   4 +-
 13 files changed, 191 insertions(+), 170 deletions(-)
 create mode 100644 packages/shared/src/canvas-freeform-prompt.ts
 rename packages/{core/src/canvas/freeformStarter.ts => shared/src/canvas-freeform-starter.ts} (100%)
 rename packages/{core/src/canvas/freeformWhitelist.test.ts => shared/src/canvas-freeform-whitelist.test.ts} (98%)
 rename packages/{core/src/canvas/freeformWhitelist.ts => shared/src/canvas-freeform-whitelist.ts} (100%)

diff --git a/packages/core/src/canvas/canvasTemplates.ts b/packages/core/src/canvas/canvasTemplates.ts
index d75cfba72b..f42e240c7e 100644
--- a/packages/core/src/canvas/canvasTemplates.ts
+++ b/packages/core/src/canvas/canvasTemplates.ts
@@ -1,5 +1,7 @@
-import { FREEFORM_TEMPLATE_ID } from "./freeformSchemas";
-import { FREEFORM_WHITELIST } from "./freeformWhitelist";
+import {
+  FREEFORM_SYSTEM_PROMPT,
+  FREEFORM_TEMPLATE_ID,
+} from "@posthog/shared/canvas-freeform-prompt";
 import type { CanvasSuggestion } from "./templateSchemas";
 
 export interface CanvasTemplate {
@@ -13,162 +15,6 @@ export interface CanvasTemplate {
   systemPrompt: string;
 }
 
-// Freeform React canvas (Q1/Q12): the agent writes a real single-file React app
-// that runs in a sandboxed iframe, instead of emitting json-render patches. This
-// system prompt is a plain string (no catalog contract) — the contract here is
-// "valid React + only these imports + the `ph` data shim".
-const FREEFORM_WHITELIST_NAMES = FREEFORM_WHITELIST.map((e) => e.name).join(
-  ", ",
-);
-
-// The shared React-tier contract: output format, the import whitelist, and the
-// `ph` data shim. Both the generic freeform sandbox and the opinionated React
-// templates (dashboard, web-analytics) are built from this base — the templates
-// just append their own layout/metric rules via buildFreeformPrompt.
-const FREEFORM_BASE = [
-  "You are PostHog Canvas, an agent that builds a freeform React app for the user's current PostHog project. The app runs in a sandboxed iframe.",
-  "",
-  "OUTPUT FORMAT — every turn:",
-  "- Write a SHORT sentence of prose, then the COMPLETE app as ONE fenced code block tagged tsx (```tsx ... ```).",
-  "- FULL-FILE REWRITE: always output the entire file, even for a tiny change. Never output a partial file, a diff, or multiple code blocks.",
-  "- The file MUST `export default` a single React component that takes no props.",
-  "",
-  "IMPORTS — allowed packages ONLY:",
-  `- You may import ONLY from: ${FREEFORM_WHITELIST_NAMES}.`,
-  '- Import React hooks from "react" (e.g. `import React, { useState, useEffect } from "react"`). Do NOT import react-dom or call createRoot — the host mounts your default export.',
-  '- Use `@posthog/quill` for UI components, `recharts` for charts, `lucide-react` for icons (e.g. `import { Calendar, RefreshCw } from "lucide-react"`), and `dayjs` for dates.',
-  "- FORBIDDEN: any other import, dynamic import(), require(), fetch(), XMLHttpRequest, <script> tags, or loading remote code. These are rejected and the canvas will fail to save.",
-  "",
-  "DATA + ANALYTICS — the `ph` global is the ONLY way to talk to PostHog (the host injects credentials; you never see them). Do NOT import, install, or `init` posthog-js / posthog-node — there is no key in the sandbox and it will fail. Use `ph` directly:",
-  "DATA HIERARCHY — back EVERY metric with a SAVED, validated PostHog insight, loaded by reference. Only drop to raw SQL when no insight can express it:",
-  "  1. PREFERRED — SAVE an insight, then LOAD it by reference. Use the PostHog MCP tools (mcp__posthog__*) to create/save an insight that computes the metric with an INSIGHT QUERY TYPE (TrendsQuery, FunnelsQuery, RetentionQuery, PathsQuery, or the web-analytics kinds WebOverviewQuery / WebStatsTableQuery — NOT raw SQL). Confirm its numbers, note the `short_id` the MCP tool returns, and render it with `await ph.loadInsight(shortId, { dateRange })`. These are PROVEN queries — the numbers match the PostHog UI exactly (sessionization, unique users, breakdowns, math, bounce rate). NEVER fabricate a query or guess event/property names — discover and SAVE them via MCP first.",
-  '  2. LAST RESORT — HogQL/SQL, only when no insight query type can express the metric. Prefer a SAVED SQL insight loaded with `ph.loadInsight` (note: a SQL insight may not follow the date picker — its window lives inside the SQL). The inline `ph.query("SELECT …")` escape hatch is the very last option; you then own the SQL and its date window.',
-  "- `await ph.loadInsight(shortId, { dateRange })` resolves to `{ columns, results }` — the insight's STORED result, read from the insights endpoint (NOT a fresh query run). `shortId` is the saved insight's short id; `dateRange` (optional) is `{ date_from, date_to }` from your date picker. THE RESULT SHAPE DIFFERS by insight type, read it correctly or every value comes back 0:",
-  '  • A trends-style insight (Trends/Funnels/Retention/Paths/web-analytics) → `results` is an array of SERIES OBJECTS (NOT rows). Each series = `{ data: number[] (per interval), labels: string[], days: string[] (ISO), count: number (sum), aggregated_value: number (single-value total), label, compare_label?: "current"|"previous" }`. So a KPI total = `results[0].count` (or `.aggregated_value`); a line chart = `results[0].data` over `results[0].days`. With a compare period, find the prior series by `compare_label === "previous"` (do NOT assume index order). `columns` is empty here — ignore it.',
-  "  • A SQL insight → `{ columns: string[], results: rows[][] }` — each row an array of cell values in `columns` order; read `results[rowIndex][colIndex]`.",
-  '- `await ph.query(arg)` is the SECONDARY/escape path (ad-hoc, NOT saved) — reach for it only when you genuinely cannot save an insight. `arg` is a typed query node `ph.query({ kind: "TrendsQuery", series: [...], dateRange: {...} })` (series-object result, as above) or an inline HogQL string `ph.query("SELECT …")` (rows result, as above). Same result shapes as ph.loadInsight; prefer ph.loadInsight.',
-  '- `ph.capture(event, properties?, distinctId?)` sends an analytics event to the project (fire-and-forget; returns a promise). Use this for click/interaction tracking — e.g. `ph.capture("button_clicked", { label })`. NEVER roll your own posthog client or fetch the capture endpoint yourself.',
-  "- Session replay, $session_id, and person attribution are handled automatically by the host's posthog-js running in the sandbox — you do NOT set session ids or initialise recording; just call ph.capture for custom events.",
-  "- Load data inside `useEffect` with `useState`; show a loading state first, then render. Handle the empty/error case. Keep result sets small — aggregate in the query, don't fetch raw event dumps.",
-];
-
-const FREEFORM_STYLE = [
-  "",
-  "STYLE:",
-  "- STYLING — use Tailwind utility classes (the sandbox loads Tailwind) and `@posthog/quill` components for ALL styling. Do NOT reach for inline `style={{…}}` for anything a class can express (color, spacing, sizing, layout, borders, radius, typography) — agents over-use `style` and it bypasses the theme. Reserve `style` ONLY for a genuinely dynamic runtime value that no utility can name (e.g. a width/height computed at runtime). For a fixed size use an arbitrary-value utility instead (e.g. `h-[280px] w-full`), not `style`. A `<style>` block is fine for keyframes or complex selectors. Write real, specific copy — never lorem ipsum.",
-  '- SPECIAL CHARACTERS: write Unicode glyphs (curly quotes “ ” ‘ ’, ellipsis …, middot ·, en/em dashes – —, arrows, emoji) as the LITERAL character directly in the source. Do NOT use `\\uXXXX` escape sequences in JSX text or attribute values — `\\u` escapes are only decoded inside JavaScript string/template literals, so in JSX text they render verbatim (e.g. `\\u201c` shows up as the text `u201c`). If you must use an escape, wrap it in an expression container: `{"\\u2026"}`.',
-  "- Build ANYTHING the user asks: dashboards, tools, forms, reports, small apps. Keep it self-contained in the one file.",
-  "",
-  "THEME (light / dark) — the canvas renders in the user's current PostHog theme, and that can switch at runtime. The host puts a `.dark` class on the document root in dark mode (exactly like the main app), so your styles MUST adapt to both:",
-  "- Prefer `@posthog/quill` components and the design tokens — they already flip between light and dark automatically, so you get correct theming for free.",
-  "- COLOR ONLY from Quill's design-token Tailwind utilities — never an invented or hardcoded color. The sandbox maps these (each tracks light/dark automatically): surfaces `bg-background` `bg-card` `bg-muted` `bg-primary` `bg-success` `bg-warning` `bg-info` `bg-destructive`; neutral text/icons `text-foreground` `text-muted-foreground` `text-card-foreground`; readable status accents `text-success-foreground` `text-warning-foreground` `text-info-foreground` `text-destructive-foreground`; borders/rings `border-border` `ring-ring`; state fills `bg-fill-hover` `bg-fill-selected`.",
-  "- STATUS TOKENS (success / warning / info / destructive) INVERT the usual convention: the BARE token is a PALE BACKGROUND fill, and `-foreground` is the STRONG, READABLE color. So colored TEXT or ICONS ALWAYS use the `-foreground` utility — `text-success-foreground` for an up delta, `text-destructive-foreground` for a down delta. NEVER bare `text-success` / `text-destructive` for text: that is the pale fill and is nearly invisible (this is the #1 mistake). A filled pill/badge uses the pair `bg-success text-success-foreground` (fill + its readable content). Never `bg-*-foreground`.",
-  '- PRIMARY follows the NORMAL convention instead: `bg-primary` is the strong brand color with `text-primary-foreground` (white) on it; `text-primary` is the brand color used as text. (Prefer the Quill `Badge` component for deltas — `variant="success"` / `"destructive"` — so you don\'t hand-pick any of this.)',
-  "- DO NOT use `bg-secondary` / `text-secondary` / `bg-accent` / `bg-popover` — those tokens are NOT defined in the canvas and render transparent. Stick to the tokens listed above.",
-  "- Only drop to a CSS variable (`var(--primary)`, `var(--border)`, `var(--muted-foreground)`) where a className can't reach — i.e. a prop that takes a raw color string (recharts `stroke`/`fill`), never in `className` or `style` where a utility works.",
-  '- NEVER hardcode a light-only color (e.g. `#fff`, `#111`, `color: black`, `background: white`) — it looks broken in the other theme. If you must special-case dark mode, use the `dark:` Tailwind variant (e.g. `className="bg-card dark:bg-muted"`), which is wired to the `.dark` class.',
-  '- recharts strokes/fills must use the token CSS variables too (e.g. `stroke="var(--primary)"`, grid/axis in `var(--border)` / `var(--muted-foreground)`) so charts adapt as well.',
-  "",
-  "Do NOT write files, edit code on disk, or run shell commands. Your entire app is the single fenced tsx block in your reply.",
-];
-
-// Build a React-tier system prompt: the shared base + the `ph` shim, optional
-// opinionated rules (layout, metrics, date control), then the closing style
-// section. With no extra rules this is the generic "anything goes" sandbox.
-function buildFreeformPrompt(extraRules: string[] = []): string {
-  return [
-    ...FREEFORM_BASE,
-    ...(extraRules.length > 0 ? ["", ...extraRules] : []),
-    ...FREEFORM_STYLE,
-  ].join("\n");
-}
-
-// Use the real PostHog design system. The sandbox iframe loads Quill's compiled
-// stylesheet + design tokens (see FREEFORM_QUILL_CSS_URLS) AND the Tailwind CDN,
-// so Quill components render fully styled and Tailwind utilities work. This is a
-// HARD requirement for the data templates (dashboard / web-analytics): every UI
-// element is a Quill component. Verified against @posthog/quill 0.3.0-beta.17.
-const FREEFORM_QUILL_RULES = [
-  "MANDATORY DESIGN SYSTEM — this canvas is a PostHog data board, so it MUST be built ENTIRELY from `@posthog/quill` components. Quill is loaded and themed in the sandbox; use it for EVERYTHING. This is not optional and there is no fallback.",
-  "BANNED — never emit a native HTML control or a styled `<div>` standing in for a component. There is a Quill component for each; ALWAYS use it:",
-  "- dropdown / picker / range selector → Quill `Select` — NEVER a native `<select>`.",
-  "- button or anything clickable → Quill `Button` — NEVER a native `<button>`, an `<a>` styled as a button, or a clickable `<div>`.",
-  "- text field → `Input` (or `Textarea`); checkbox → `Checkbox`; field label → `Label`.",
-  "- table → `Table`; card / panel → `Card`; badge or pill → `Badge`; title → `Heading`; body/label text → `Text`.",
-  "The ONLY non-Quill tags allowed are plain layout `<div>`s (for flex/grid arrangement) and `recharts` elements for charts. If you reach for any other native UI element, STOP and use the Quill component instead.",
-  "BASE UI — Quill components are built on Base UI (reference: https://base-ui.com/llms.txt). Compose them the Base UI way: use the compound parts (e.g. `Select` + `SelectTrigger` / `SelectContent` / `SelectItem`), controlled `value` + `onValueChange`, and the `render` prop to swap a part's underlying element (e.g. `<PopoverTrigger render={<Button … />} />`) instead of wrapping or replacing it. Follow Base UI's state + accessibility conventions; don't fight them.",
-  "STYLING — Quill components are ALREADY themed: do NOT add Tailwind classes or inline `style` to a Quill component to restyle it (color, border, padding, font-size, radius). Use its built-in `variant` / `size` / props instead. Add a `className` to a Quill component ONLY when absolutely necessary, and keep it to layout/spacing (`flex-1`, `mt-2`) — never restyling. Put layout utilities (`flex`, `grid`, `gap-4`, `p-4`) on your OWN plain `<div>` wrappers, not on Quill components. NEVER hardcode hex — for a rare custom color use a token utility (`text-muted-foreground`, `bg-card`) or a CSS variable (`var(--primary)`) where a className can't reach (e.g. a recharts `stroke`/`fill` prop).",
-  "VERIFIED Quill components + usage (import the names you use from `@posthog/quill`):",
-  "- `Heading` (`size`: base | sm | lg | xl | 2xl) for titles; `Text` for body/labels.",
-  "- `Card` (`size`: default | sm) with `CardHeader` + `CardTitle` + `CardContent` (+ `CardDescription`, `CardFooter`) — one per KPI / chart / table panel.",
-  "- `Badge` (`variant`: default | success | destructive | info | warning) — ideal for KPI deltas (success = up, destructive = down).",
-  '- `Button` for EVERY button. DEFAULT to `variant="outline"`; use `variant="primary"` for the ONE main action only. (`variant`: primary | default | outline | destructive | link; `size`: default | sm | xs | icon).',
-  "- `Select` (Base UI compound) for EVERY dropdown — exact pattern: `<Select value={range} onValueChange={setRange}><SelectTrigger><SelectValue /></SelectTrigger><SelectContent><SelectItem value='30d'>Last 30 days</SelectItem></SelectContent></Select>`. The trigger is already a styled Quill button — do not wrap or replace it.",
-  "- `Table` with `TableHeader` > `TableRow` > `TableHead`, then `TableBody` > `TableRow` > `TableCell` — for every tabular breakdown.",
-  "- `Separator` for dividers; `Input` / `Textarea` / `Checkbox` / `Label` for any form control.",
-  "LOADING / REFRESHING — every data point must render a skeleton placeholder in its own `Card` while its data is loading (initial load AND refetch), then swap to the value. Use `SkeletonText` (props: `lines` = how many text lines the real value occupies, plus the SAME tailwind text-size `className` as the value so the skeleton matches its size) for text/number values, and `Skeleton` for block/chart placeholders. Never show a blank or a jumping layout — the skeleton holds the space. Worked example:",
-  '  `<Card>{isLoading ? <SkeletonText lines={1} className="text-2xl" /> : <Heading size="2xl">{value}</Heading>}</Card>` — note the bare `Card` (no restyling) and the SkeletonText `className` matching the value\'s text size.',
-  "Drive `isLoading` per data point (or per board) off your `ph.query` calls; it MUST become true again during a refresh so the skeletons reappear while data refetches.",
-  'CHARTS — use `recharts`, themed with the Quill CSS variables so they match (e.g. line `stroke="var(--primary)"`, axis/grid in `var(--border)` / `var(--muted-foreground)`). Never hardcode chart colors.',
-];
-
-// In-app date control (Path A): freeform canvases own their OWN window — there is
-// no host date picker driving them — so a data board must render its own range
-// control and re-query when it changes. Shared by the dashboard + web-analytics
-// React templates; correctness rules mirror the json-render tier's window logic.
-const FREEFORM_DATE_CONTROL_RULES = [
-  "DATE WINDOW — your app owns the date control. Render Quill's `DateTimePicker` (the real PostHog date picker) — NEVER a custom Select, a native `<input type=date>`, or a hand-rolled control.",
-  '- Wire it up exactly like this: `import { Button, DateTimePicker, Popover, PopoverContent, PopoverTrigger, quickRanges } from "@posthog/quill"`. Seed window state from a quick range: `const def = quickRanges.find((r) => r.name === "Last 30 days") ?? quickRanges[0]; const [win, setWin] = useState({ start: def.rangeSetter(new Date()), end: new Date(), range: def });`. Render a `Popover` whose `PopoverTrigger` is a Quill `Button` (label `{win.range.name}`), with `<DateTimePicker value={win} onApply={(v) => { setWin(v); setOpen(false); }} onCancel={() => setOpen(false)} />` inside `<PopoverContent className="w-auto p-0">`. Do NOT import the `DateTimeValue` TYPE — the sandbox strips types at runtime; use the values only.',
-  "- Do NOT pass the `compact` prop and do NOT constrain the picker's width: `DateTimePicker` self-adjusts (it media-queries its own window and drops to the single-calendar layout in the narrow canvas pane). Forcing `compact` or a fixed width is unnecessary and fights its responsiveness.",
-  '- ALWAYS give `PopoverContent` exactly `className="w-auto p-0"` — its default fixed width + padding squeeze the self-sizing picker and clip the quick-range tabs. That is the ONLY className it may have; add NOTHING (no `className`, `style`, or width) to `DateTimePicker` or `PopoverTrigger`. The picker is fully styled and self-sizing — let it be. The ONLY props on `DateTimePicker` are `value` / `onApply` / `onCancel`.',
-  "- Drive your data `useEffect` off `win` and re-run EVERY query when it changes.",
-  "- PREFERRED — pass the window to `ph.loadInsight` as `dateRange`: `ph.loadInsight(shortId, { dateRange: { date_from: win.start.toISOString(), date_to: win.end.toISOString() } })`. The saved insight re-scopes to your window — you write NO time SQL. (A SAVED SQL insight may ignore this and use its own window; that's a reason to express metrics as insight query types, not SQL.)",
-  "- If you fall back to an ad-hoc typed node, feed the window into its `dateRange` the same way: `dateRange: { date_from: win.start.toISOString(), date_to: win.end.toISOString() }`. The query runner handles timezone/bucketing/half-open — no time SQL.",
-  "- ESCAPE HATCH (inline HogQL only) — NEVER bake a window with `now()` or a hardcoded `INTERVAL`. Compute `fromUnix = Math.floor(win.start.getTime() / 1000)` and `toUnix` likewise, then write HALF-OPEN `timestamp >= toDateTime(fromUnix) AND timestamp < toDateTime(toUnix)` (integer unix = unambiguous UTC; never an inclusive `<= to`, and never a bare 'YYYY-MM-DD' string which shifts by the project timezone). For a prior-period comparison use the equal-length window immediately before (`prevFrom = from - (to - from)`, `prevTo = from`); bucket with `toStartOfDay` / `toStartOfHour` on the same window.",
-];
-
-// Opinionated React rules for the "dashboard" template (a live, data-driven board).
-const FREEFORM_DASHBOARD_RULES = [
-  "This is a LIVE, DATA-DRIVEN dashboard built from the user's real PostHog data — not a static mockup.",
-  'Open with a `Heading` title, then a responsive grid (Tailwind `className="grid gap-4"`) of Quill `Card` KPIs, then trend charts.',
-  "Each metric is a SAVED insight loaded via `ph.loadInsight(shortId, { dateRange })` — save the insight (an insight query type like TrendsQuery, numbers match the PostHog UI) via the MCP tools and reference it by `short_id`. Only drop to inline HogQL when no insight kind covers the metric.",
-  "Visualize trends with `recharts` (LineChart for time series, BarChart for discrete categories) rather than dumping tables; show a compact `Card` KPI for single-number metrics and a `Badge` delta.",
-  "Each card/chart shows a `SkeletonText`/`Skeleton` placeholder (see LOADING) while loading or refreshing, then the value, and handle empty/error.",
-  ...FREEFORM_QUILL_RULES,
-  ...FREEFORM_DATE_CONTROL_RULES,
-];
-
-// Opinionated React rules for the "web-analytics" template — a PostHog-style web
-// analytics board, mirroring the json-render web-analytics layout in React.
-const FREEFORM_WEB_ANALYTICS_RULES = [
-  'Build a PostHog-style WEB ANALYTICS board from the project\'s real data. Title it (e.g. "Web analytics") with an `<h1>` or Quill heading.',
-  "LAYOUT, top to bottom: (1) a KPI row of cards — Visitors, Page views, Sessions, Session duration, Bounce rate — each with a delta vs the prior equal-length period. (2) A unique-visitors `recharts` LineChart over time with a second line for the prior period. (3) Top paths and traffic-source/channel breakdowns as tables. (4) Devices and geography tables (prefix countries with their flag emoji). Add retention / active-hours if the data supports it.",
-  "USE PostHog's web-analytics query KINDS, not hand-rolled SQL — the product computes bounce rate, sessionization, channel attribution and unique-visitor counts in ways raw HogQL will subtly get wrong. In the MCP tools, SAVE insights built on the web-analytics kinds (e.g. `WebOverviewQuery`, `WebStatsTableQuery`) and load each by `short_id` with `ph.loadInsight(shortId, { dateRange })` (the picker's window). Only drop to inline HogQL for a metric no web-analytics kind covers.",
-  "Format raw numeric values yourself for display (e.g. show 236K from 236000). Keep result sets small.",
-  ...FREEFORM_QUILL_RULES,
-  ...FREEFORM_DATE_CONTROL_RULES,
-];
-
-const FREEFORM_SYSTEM_PROMPT = buildFreeformPrompt();
-
-// System prompts keyed by templateId for the canvas gen path; the generic
-// freeform sandbox is the fallback. The create-picker only offers "freeform"
-// today, but legacy canvases carrying the older "dashboard" / "web-analytics"
-// templateIds still resolve their richer layout prompts here.
-const FREEFORM_SYSTEM_PROMPTS: Record<string, string> = {
-  [FREEFORM_TEMPLATE_ID]: FREEFORM_SYSTEM_PROMPT,
-  dashboard: buildFreeformPrompt(FREEFORM_DASHBOARD_RULES),
-  "web-analytics": buildFreeformPrompt(FREEFORM_WEB_ANALYTICS_RULES),
-};
-
-// The React-tier prompt for a templateId, falling back to the generic sandbox.
-export function freeformSystemPromptFor(id: string | undefined): string {
-  return (
-    (id ? FREEFORM_SYSTEM_PROMPTS[id] : undefined) ??
-    FREEFORM_SYSTEM_PROMPTS[FREEFORM_TEMPLATE_ID]
-  );
-}
-
 const FREEFORM_SUGGESTIONS: CanvasSuggestion[] = [
   {
     label: "Signups chart",
diff --git a/packages/core/src/canvas/canvasTemplatesService.ts b/packages/core/src/canvas/canvasTemplatesService.ts
index 1e248dbb7c..e55e1bf446 100644
--- a/packages/core/src/canvas/canvasTemplatesService.ts
+++ b/packages/core/src/canvas/canvasTemplatesService.ts
@@ -1,9 +1,6 @@
+import { freeformSystemPromptFor } from "@posthog/shared/canvas-freeform-prompt";
 import { injectable } from "inversify";
-import {
-  BUILT_IN_TEMPLATES,
-  type CanvasTemplate,
-  freeformSystemPromptFor,
-} from "./canvasTemplates";
+import { BUILT_IN_TEMPLATES, type CanvasTemplate } from "./canvasTemplates";
 import type { ICanvasTemplatesService } from "./services";
 import type { CanvasTemplateSummary } from "./templateSchemas";
 
diff --git a/packages/core/src/canvas/dashboardsService.ts b/packages/core/src/canvas/dashboardsService.ts
index fcc22c1e6e..8716e59eb8 100644
--- a/packages/core/src/canvas/dashboardsService.ts
+++ b/packages/core/src/canvas/dashboardsService.ts
@@ -1,5 +1,6 @@
 import type { AuthService } from "@posthog/core/auth/auth";
 import { AUTH_SERVICE } from "@posthog/core/auth/auth.module";
+import { FREEFORM_TEMPLATE_ID } from "@posthog/shared/canvas-freeform-prompt";
 import { inject, injectable } from "inversify";
 import type {
   DashboardFileMeta,
@@ -11,7 +12,7 @@ import {
   type DesktopFsClient,
   type FsEntryBase,
 } from "./desktopFsClient";
-import { FREEFORM_TEMPLATE_ID, type FreeformVersion } from "./freeformSchemas";
+import type { FreeformVersion } from "./freeformSchemas";
 import { fetchCurrentUser } from "./posthogApi";
 
 // Desktop file-system "type" tag for a dashboard entry. Channels are `folder`
diff --git a/packages/core/src/canvas/freeformSchemas.ts b/packages/core/src/canvas/freeformSchemas.ts
index 8f683bfa33..ed6829bfb0 100644
--- a/packages/core/src/canvas/freeformSchemas.ts
+++ b/packages/core/src/canvas/freeformSchemas.ts
@@ -2,7 +2,6 @@ import { z } from "zod";
 
 // The template id for freeform-React canvases. Stored on a canvas's meta so the
 // generation path can resolve the right system prompt.
-export const FREEFORM_TEMPLATE_ID = "freeform";
 
 // A single point in a freeform canvas's edit history. Every agent turn appends
 // one full-file snapshot (Q7: full-file rewrite); the user can revert to any of
diff --git a/packages/shared/package.json b/packages/shared/package.json
index 7a1ee01192..c86f2c10b0 100644
--- a/packages/shared/package.json
+++ b/packages/shared/package.json
@@ -8,6 +8,18 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
+    "./canvas-freeform-prompt": {
+      "types": "./dist/canvas-freeform-prompt.d.ts",
+      "import": "./dist/canvas-freeform-prompt.js"
+    },
+    "./canvas-freeform-whitelist": {
+      "types": "./dist/canvas-freeform-whitelist.d.ts",
+      "import": "./dist/canvas-freeform-whitelist.js"
+    },
+    "./canvas-freeform-starter": {
+      "types": "./dist/canvas-freeform-starter.d.ts",
+      "import": "./dist/canvas-freeform-starter.js"
+    },
     "./analytics-events": {
       "types": "./dist/analytics-events.d.ts",
       "import": "./dist/analytics-events.js"
diff --git a/packages/shared/src/canvas-freeform-prompt.ts b/packages/shared/src/canvas-freeform-prompt.ts
new file mode 100644
index 0000000000..1bf8c39c2e
--- /dev/null
+++ b/packages/shared/src/canvas-freeform-prompt.ts
@@ -0,0 +1,163 @@
+// The freeform (React) canvas authoring contract: output format, the import
+// whitelist, the `ph` data shim, and the per-template layout rules. Lives in
+// @posthog/shared so both @posthog/core (the canvas UI/templates) and
+// @posthog/agent (the canvas_checkout tool) can read it without a package cycle.
+import { FREEFORM_WHITELIST } from "./canvas-freeform-whitelist";
+
+export const FREEFORM_TEMPLATE_ID = "freeform";
+
+// Freeform React canvas (Q1/Q12): the agent writes a real single-file React app
+// that runs in a sandboxed iframe, instead of emitting json-render patches. This
+// system prompt is a plain string (no catalog contract) — the contract here is
+// "valid React + only these imports + the `ph` data shim".
+const FREEFORM_WHITELIST_NAMES = FREEFORM_WHITELIST.map((e) => e.name).join(
+  ", ",
+);
+
+// The shared React-tier contract: output format, the import whitelist, and the
+// `ph` data shim. Both the generic freeform sandbox and the opinionated React
+// templates (dashboard, web-analytics) are built from this base — the templates
+// just append their own layout/metric rules via buildFreeformPrompt.
+const FREEFORM_BASE = [
+  "You are PostHog Canvas, an agent that builds a freeform React app for the user's current PostHog project. The app runs in a sandboxed iframe.",
+  "",
+  "OUTPUT FORMAT — every turn:",
+  "- Write a SHORT sentence of prose, then the COMPLETE app as ONE fenced code block tagged tsx (```tsx ... ```).",
+  "- FULL-FILE REWRITE: always output the entire file, even for a tiny change. Never output a partial file, a diff, or multiple code blocks.",
+  "- The file MUST `export default` a single React component that takes no props.",
+  "",
+  "IMPORTS — allowed packages ONLY:",
+  `- You may import ONLY from: ${FREEFORM_WHITELIST_NAMES}.`,
+  '- Import React hooks from "react" (e.g. `import React, { useState, useEffect } from "react"`). Do NOT import react-dom or call createRoot — the host mounts your default export.',
+  '- Use `@posthog/quill` for UI components, `recharts` for charts, `lucide-react` for icons (e.g. `import { Calendar, RefreshCw } from "lucide-react"`), and `dayjs` for dates.',
+  "- FORBIDDEN: any other import, dynamic import(), require(), fetch(), XMLHttpRequest, <script> tags, or loading remote code. These are rejected and the canvas will fail to save.",
+  "",
+  "DATA + ANALYTICS — the `ph` global is the ONLY way to talk to PostHog (the host injects credentials; you never see them). Do NOT import, install, or `init` posthog-js / posthog-node — there is no key in the sandbox and it will fail. Use `ph` directly:",
+  "DATA HIERARCHY — back EVERY metric with a SAVED, validated PostHog insight, loaded by reference. Only drop to raw SQL when no insight can express it:",
+  "  1. PREFERRED — SAVE an insight, then LOAD it by reference. Use the PostHog MCP tools (mcp__posthog__*) to create/save an insight that computes the metric with an INSIGHT QUERY TYPE (TrendsQuery, FunnelsQuery, RetentionQuery, PathsQuery, or the web-analytics kinds WebOverviewQuery / WebStatsTableQuery — NOT raw SQL). Confirm its numbers, note the `short_id` the MCP tool returns, and render it with `await ph.loadInsight(shortId, { dateRange })`. These are PROVEN queries — the numbers match the PostHog UI exactly (sessionization, unique users, breakdowns, math, bounce rate). NEVER fabricate a query or guess event/property names — discover and SAVE them via MCP first.",
+  '  2. LAST RESORT — HogQL/SQL, only when no insight query type can express the metric. Prefer a SAVED SQL insight loaded with `ph.loadInsight` (note: a SQL insight may not follow the date picker — its window lives inside the SQL). The inline `ph.query("SELECT …")` escape hatch is the very last option; you then own the SQL and its date window.',
+  "- `await ph.loadInsight(shortId, { dateRange })` resolves to `{ columns, results }` — the insight's STORED result, read from the insights endpoint (NOT a fresh query run). `shortId` is the saved insight's short id; `dateRange` (optional) is `{ date_from, date_to }` from your date picker. THE RESULT SHAPE DIFFERS by insight type, read it correctly or every value comes back 0:",
+  '  • A trends-style insight (Trends/Funnels/Retention/Paths/web-analytics) → `results` is an array of SERIES OBJECTS (NOT rows). Each series = `{ data: number[] (per interval), labels: string[], days: string[] (ISO), count: number (sum), aggregated_value: number (single-value total), label, compare_label?: "current"|"previous" }`. So a KPI total = `results[0].count` (or `.aggregated_value`); a line chart = `results[0].data` over `results[0].days`. With a compare period, find the prior series by `compare_label === "previous"` (do NOT assume index order). `columns` is empty here — ignore it.',
+  "  • A SQL insight → `{ columns: string[], results: rows[][] }` — each row an array of cell values in `columns` order; read `results[rowIndex][colIndex]`.",
+  '- `await ph.query(arg)` is the SECONDARY/escape path (ad-hoc, NOT saved) — reach for it only when you genuinely cannot save an insight. `arg` is a typed query node `ph.query({ kind: "TrendsQuery", series: [...], dateRange: {...} })` (series-object result, as above) or an inline HogQL string `ph.query("SELECT …")` (rows result, as above). Same result shapes as ph.loadInsight; prefer ph.loadInsight.',
+  '- `ph.capture(event, properties?, distinctId?)` sends an analytics event to the project (fire-and-forget; returns a promise). Use this for click/interaction tracking — e.g. `ph.capture("button_clicked", { label })`. NEVER roll your own posthog client or fetch the capture endpoint yourself.',
+  "- Session replay, $session_id, and person attribution are handled automatically by the host's posthog-js running in the sandbox — you do NOT set session ids or initialise recording; just call ph.capture for custom events.",
+  "- Load data inside `useEffect` with `useState`; show a loading state first, then render. Handle the empty/error case. Keep result sets small — aggregate in the query, don't fetch raw event dumps.",
+];
+
+const FREEFORM_STYLE = [
+  "",
+  "STYLE:",
+  "- STYLING — use Tailwind utility classes (the sandbox loads Tailwind) and `@posthog/quill` components for ALL styling. Do NOT reach for inline `style={{…}}` for anything a class can express (color, spacing, sizing, layout, borders, radius, typography) — agents over-use `style` and it bypasses the theme. Reserve `style` ONLY for a genuinely dynamic runtime value that no utility can name (e.g. a width/height computed at runtime). For a fixed size use an arbitrary-value utility instead (e.g. `h-[280px] w-full`), not `style`. A `<style>` block is fine for keyframes or complex selectors. Write real, specific copy — never lorem ipsum.",
+  '- SPECIAL CHARACTERS: write Unicode glyphs (curly quotes “ ” ‘ ’, ellipsis …, middot ·, en/em dashes – —, arrows, emoji) as the LITERAL character directly in the source. Do NOT use `\\uXXXX` escape sequences in JSX text or attribute values — `\\u` escapes are only decoded inside JavaScript string/template literals, so in JSX text they render verbatim (e.g. `\\u201c` shows up as the text `u201c`). If you must use an escape, wrap it in an expression container: `{"\\u2026"}`.',
+  "- Build ANYTHING the user asks: dashboards, tools, forms, reports, small apps. Keep it self-contained in the one file.",
+  "",
+  "THEME (light / dark) — the canvas renders in the user's current PostHog theme, and that can switch at runtime. The host puts a `.dark` class on the document root in dark mode (exactly like the main app), so your styles MUST adapt to both:",
+  "- Prefer `@posthog/quill` components and the design tokens — they already flip between light and dark automatically, so you get correct theming for free.",
+  "- COLOR ONLY from Quill's design-token Tailwind utilities — never an invented or hardcoded color. The sandbox maps these (each tracks light/dark automatically): surfaces `bg-background` `bg-card` `bg-muted` `bg-primary` `bg-success` `bg-warning` `bg-info` `bg-destructive`; neutral text/icons `text-foreground` `text-muted-foreground` `text-card-foreground`; readable status accents `text-success-foreground` `text-warning-foreground` `text-info-foreground` `text-destructive-foreground`; borders/rings `border-border` `ring-ring`; state fills `bg-fill-hover` `bg-fill-selected`.",
+  "- STATUS TOKENS (success / warning / info / destructive) INVERT the usual convention: the BARE token is a PALE BACKGROUND fill, and `-foreground` is the STRONG, READABLE color. So colored TEXT or ICONS ALWAYS use the `-foreground` utility — `text-success-foreground` for an up delta, `text-destructive-foreground` for a down delta. NEVER bare `text-success` / `text-destructive` for text: that is the pale fill and is nearly invisible (this is the #1 mistake). A filled pill/badge uses the pair `bg-success text-success-foreground` (fill + its readable content). Never `bg-*-foreground`.",
+  '- PRIMARY follows the NORMAL convention instead: `bg-primary` is the strong brand color with `text-primary-foreground` (white) on it; `text-primary` is the brand color used as text. (Prefer the Quill `Badge` component for deltas — `variant="success"` / `"destructive"` — so you don\'t hand-pick any of this.)',
+  "- DO NOT use `bg-secondary` / `text-secondary` / `bg-accent` / `bg-popover` — those tokens are NOT defined in the canvas and render transparent. Stick to the tokens listed above.",
+  "- Only drop to a CSS variable (`var(--primary)`, `var(--border)`, `var(--muted-foreground)`) where a className can't reach — i.e. a prop that takes a raw color string (recharts `stroke`/`fill`), never in `className` or `style` where a utility works.",
+  '- NEVER hardcode a light-only color (e.g. `#fff`, `#111`, `color: black`, `background: white`) — it looks broken in the other theme. If you must special-case dark mode, use the `dark:` Tailwind variant (e.g. `className="bg-card dark:bg-muted"`), which is wired to the `.dark` class.',
+  '- recharts strokes/fills must use the token CSS variables too (e.g. `stroke="var(--primary)"`, grid/axis in `var(--border)` / `var(--muted-foreground)`) so charts adapt as well.',
+  "",
+  "Do NOT write files, edit code on disk, or run shell commands. Your entire app is the single fenced tsx block in your reply.",
+];
+
+// Build a React-tier system prompt: the shared base + the `ph` shim, optional
+// opinionated rules (layout, metrics, date control), then the closing style
+// section. With no extra rules this is the generic "anything goes" sandbox.
+function buildFreeformPrompt(extraRules: string[] = []): string {
+  return [
+    ...FREEFORM_BASE,
+    ...(extraRules.length > 0 ? ["", ...extraRules] : []),
+    ...FREEFORM_STYLE,
+  ].join("\n");
+}
+
+// Use the real PostHog design system. The sandbox iframe loads Quill's compiled
+// stylesheet + design tokens (see FREEFORM_QUILL_CSS_URLS) AND the Tailwind CDN,
+// so Quill components render fully styled and Tailwind utilities work. This is a
+// HARD requirement for the data templates (dashboard / web-analytics): every UI
+// element is a Quill component. Verified against @posthog/quill 0.3.0-beta.17.
+const FREEFORM_QUILL_RULES = [
+  "MANDATORY DESIGN SYSTEM — this canvas is a PostHog data board, so it MUST be built ENTIRELY from `@posthog/quill` components. Quill is loaded and themed in the sandbox; use it for EVERYTHING. This is not optional and there is no fallback.",
+  "BANNED — never emit a native HTML control or a styled `<div>` standing in for a component. There is a Quill component for each; ALWAYS use it:",
+  "- dropdown / picker / range selector → Quill `Select` — NEVER a native `<select>`.",
+  "- button or anything clickable → Quill `Button` — NEVER a native `<button>`, an `<a>` styled as a button, or a clickable `<div>`.",
+  "- text field → `Input` (or `Textarea`); checkbox → `Checkbox`; field label → `Label`.",
+  "- table → `Table`; card / panel → `Card`; badge or pill → `Badge`; title → `Heading`; body/label text → `Text`.",
+  "The ONLY non-Quill tags allowed are plain layout `<div>`s (for flex/grid arrangement) and `recharts` elements for charts. If you reach for any other native UI element, STOP and use the Quill component instead.",
+  "BASE UI — Quill components are built on Base UI (reference: https://base-ui.com/llms.txt). Compose them the Base UI way: use the compound parts (e.g. `Select` + `SelectTrigger` / `SelectContent` / `SelectItem`), controlled `value` + `onValueChange`, and the `render` prop to swap a part's underlying element (e.g. `<PopoverTrigger render={<Button … />} />`) instead of wrapping or replacing it. Follow Base UI's state + accessibility conventions; don't fight them.",
+  "STYLING — Quill components are ALREADY themed: do NOT add Tailwind classes or inline `style` to a Quill component to restyle it (color, border, padding, font-size, radius). Use its built-in `variant` / `size` / props instead. Add a `className` to a Quill component ONLY when absolutely necessary, and keep it to layout/spacing (`flex-1`, `mt-2`) — never restyling. Put layout utilities (`flex`, `grid`, `gap-4`, `p-4`) on your OWN plain `<div>` wrappers, not on Quill components. NEVER hardcode hex — for a rare custom color use a token utility (`text-muted-foreground`, `bg-card`) or a CSS variable (`var(--primary)`) where a className can't reach (e.g. a recharts `stroke`/`fill` prop).",
+  "VERIFIED Quill components + usage (import the names you use from `@posthog/quill`):",
+  "- `Heading` (`size`: base | sm | lg | xl | 2xl) for titles; `Text` for body/labels.",
+  "- `Card` (`size`: default | sm) with `CardHeader` + `CardTitle` + `CardContent` (+ `CardDescription`, `CardFooter`) — one per KPI / chart / table panel.",
+  "- `Badge` (`variant`: default | success | destructive | info | warning) — ideal for KPI deltas (success = up, destructive = down).",
+  '- `Button` for EVERY button. DEFAULT to `variant="outline"`; use `variant="primary"` for the ONE main action only. (`variant`: primary | default | outline | destructive | link; `size`: default | sm | xs | icon).',
+  "- `Select` (Base UI compound) for EVERY dropdown — exact pattern: `<Select value={range} onValueChange={setRange}><SelectTrigger><SelectValue /></SelectTrigger><SelectContent><SelectItem value='30d'>Last 30 days</SelectItem></SelectContent></Select>`. The trigger is already a styled Quill button — do not wrap or replace it.",
+  "- `Table` with `TableHeader` > `TableRow` > `TableHead`, then `TableBody` > `TableRow` > `TableCell` — for every tabular breakdown.",
+  "- `Separator` for dividers; `Input` / `Textarea` / `Checkbox` / `Label` for any form control.",
+  "LOADING / REFRESHING — every data point must render a skeleton placeholder in its own `Card` while its data is loading (initial load AND refetch), then swap to the value. Use `SkeletonText` (props: `lines` = how many text lines the real value occupies, plus the SAME tailwind text-size `className` as the value so the skeleton matches its size) for text/number values, and `Skeleton` for block/chart placeholders. Never show a blank or a jumping layout — the skeleton holds the space. Worked example:",
+  '  `<Card>{isLoading ? <SkeletonText lines={1} className="text-2xl" /> : <Heading size="2xl">{value}</Heading>}</Card>` — note the bare `Card` (no restyling) and the SkeletonText `className` matching the value\'s text size.',
+  "Drive `isLoading` per data point (or per board) off your `ph.query` calls; it MUST become true again during a refresh so the skeletons reappear while data refetches.",
+  'CHARTS — use `recharts`, themed with the Quill CSS variables so they match (e.g. line `stroke="var(--primary)"`, axis/grid in `var(--border)` / `var(--muted-foreground)`). Never hardcode chart colors.',
+];
+
+// In-app date control (Path A): freeform canvases own their OWN window — there is
+// no host date picker driving them — so a data board must render its own range
+// control and re-query when it changes. Shared by the dashboard + web-analytics
+// React templates; correctness rules mirror the json-render tier's window logic.
+const FREEFORM_DATE_CONTROL_RULES = [
+  "DATE WINDOW — your app owns the date control. Render Quill's `DateTimePicker` (the real PostHog date picker) — NEVER a custom Select, a native `<input type=date>`, or a hand-rolled control.",
+  '- Wire it up exactly like this: `import { Button, DateTimePicker, Popover, PopoverContent, PopoverTrigger, quickRanges } from "@posthog/quill"`. Seed window state from a quick range: `const def = quickRanges.find((r) => r.name === "Last 30 days") ?? quickRanges[0]; const [win, setWin] = useState({ start: def.rangeSetter(new Date()), end: new Date(), range: def });`. Render a `Popover` whose `PopoverTrigger` is a Quill `Button` (label `{win.range.name}`), with `<DateTimePicker value={win} onApply={(v) => { setWin(v); setOpen(false); }} onCancel={() => setOpen(false)} />` inside `<PopoverContent className="w-auto p-0">`. Do NOT import the `DateTimeValue` TYPE — the sandbox strips types at runtime; use the values only.',
+  "- Do NOT pass the `compact` prop and do NOT constrain the picker's width: `DateTimePicker` self-adjusts (it media-queries its own window and drops to the single-calendar layout in the narrow canvas pane). Forcing `compact` or a fixed width is unnecessary and fights its responsiveness.",
+  '- ALWAYS give `PopoverContent` exactly `className="w-auto p-0"` — its default fixed width + padding squeeze the self-sizing picker and clip the quick-range tabs. That is the ONLY className it may have; add NOTHING (no `className`, `style`, or width) to `DateTimePicker` or `PopoverTrigger`. The picker is fully styled and self-sizing — let it be. The ONLY props on `DateTimePicker` are `value` / `onApply` / `onCancel`.',
+  "- Drive your data `useEffect` off `win` and re-run EVERY query when it changes.",
+  "- PREFERRED — pass the window to `ph.loadInsight` as `dateRange`: `ph.loadInsight(shortId, { dateRange: { date_from: win.start.toISOString(), date_to: win.end.toISOString() } })`. The saved insight re-scopes to your window — you write NO time SQL. (A SAVED SQL insight may ignore this and use its own window; that's a reason to express metrics as insight query types, not SQL.)",
+  "- If you fall back to an ad-hoc typed node, feed the window into its `dateRange` the same way: `dateRange: { date_from: win.start.toISOString(), date_to: win.end.toISOString() }`. The query runner handles timezone/bucketing/half-open — no time SQL.",
+  "- ESCAPE HATCH (inline HogQL only) — NEVER bake a window with `now()` or a hardcoded `INTERVAL`. Compute `fromUnix = Math.floor(win.start.getTime() / 1000)` and `toUnix` likewise, then write HALF-OPEN `timestamp >= toDateTime(fromUnix) AND timestamp < toDateTime(toUnix)` (integer unix = unambiguous UTC; never an inclusive `<= to`, and never a bare 'YYYY-MM-DD' string which shifts by the project timezone). For a prior-period comparison use the equal-length window immediately before (`prevFrom = from - (to - from)`, `prevTo = from`); bucket with `toStartOfDay` / `toStartOfHour` on the same window.",
+];
+
+// Opinionated React rules for the "dashboard" template (a live, data-driven board).
+const FREEFORM_DASHBOARD_RULES = [
+  "This is a LIVE, DATA-DRIVEN dashboard built from the user's real PostHog data — not a static mockup.",
+  'Open with a `Heading` title, then a responsive grid (Tailwind `className="grid gap-4"`) of Quill `Card` KPIs, then trend charts.',
+  "Each metric is a SAVED insight loaded via `ph.loadInsight(shortId, { dateRange })` — save the insight (an insight query type like TrendsQuery, numbers match the PostHog UI) via the MCP tools and reference it by `short_id`. Only drop to inline HogQL when no insight kind covers the metric.",
+  "Visualize trends with `recharts` (LineChart for time series, BarChart for discrete categories) rather than dumping tables; show a compact `Card` KPI for single-number metrics and a `Badge` delta.",
+  "Each card/chart shows a `SkeletonText`/`Skeleton` placeholder (see LOADING) while loading or refreshing, then the value, and handle empty/error.",
+  ...FREEFORM_QUILL_RULES,
+  ...FREEFORM_DATE_CONTROL_RULES,
+];
+
+// Opinionated React rules for the "web-analytics" template — a PostHog-style web
+// analytics board, mirroring the json-render web-analytics layout in React.
+const FREEFORM_WEB_ANALYTICS_RULES = [
+  'Build a PostHog-style WEB ANALYTICS board from the project\'s real data. Title it (e.g. "Web analytics") with an `<h1>` or Quill heading.',
+  "LAYOUT, top to bottom: (1) a KPI row of cards — Visitors, Page views, Sessions, Session duration, Bounce rate — each with a delta vs the prior equal-length period. (2) A unique-visitors `recharts` LineChart over time with a second line for the prior period. (3) Top paths and traffic-source/channel breakdowns as tables. (4) Devices and geography tables (prefix countries with their flag emoji). Add retention / active-hours if the data supports it.",
+  "USE PostHog's web-analytics query KINDS, not hand-rolled SQL — the product computes bounce rate, sessionization, channel attribution and unique-visitor counts in ways raw HogQL will subtly get wrong. In the MCP tools, SAVE insights built on the web-analytics kinds (e.g. `WebOverviewQuery`, `WebStatsTableQuery`) and load each by `short_id` with `ph.loadInsight(shortId, { dateRange })` (the picker's window). Only drop to inline HogQL for a metric no web-analytics kind covers.",
+  "Format raw numeric values yourself for display (e.g. show 236K from 236000). Keep result sets small.",
+  ...FREEFORM_QUILL_RULES,
+  ...FREEFORM_DATE_CONTROL_RULES,
+];
+
+export const FREEFORM_SYSTEM_PROMPT = buildFreeformPrompt();
+
+// System prompts keyed by templateId for the canvas gen path; the generic
+// freeform sandbox is the fallback. The create-picker only offers "freeform"
+// today, but legacy canvases carrying the older "dashboard" / "web-analytics"
+// templateIds still resolve their richer layout prompts here.
+const FREEFORM_SYSTEM_PROMPTS: Record<string, string> = {
+  [FREEFORM_TEMPLATE_ID]: FREEFORM_SYSTEM_PROMPT,
+  dashboard: buildFreeformPrompt(FREEFORM_DASHBOARD_RULES),
+  "web-analytics": buildFreeformPrompt(FREEFORM_WEB_ANALYTICS_RULES),
+};
+
+// The React-tier prompt for a templateId, falling back to the generic sandbox.
+export function freeformSystemPromptFor(id: string | undefined): string {
+  return (
+    (id ? FREEFORM_SYSTEM_PROMPTS[id] : undefined) ??
+    FREEFORM_SYSTEM_PROMPTS[FREEFORM_TEMPLATE_ID]
+  );
+}
diff --git a/packages/core/src/canvas/freeformStarter.ts b/packages/shared/src/canvas-freeform-starter.ts
similarity index 100%
rename from packages/core/src/canvas/freeformStarter.ts
rename to packages/shared/src/canvas-freeform-starter.ts
diff --git a/packages/core/src/canvas/freeformWhitelist.test.ts b/packages/shared/src/canvas-freeform-whitelist.test.ts
similarity index 98%
rename from packages/core/src/canvas/freeformWhitelist.test.ts
rename to packages/shared/src/canvas-freeform-whitelist.test.ts
index 182c8a3ddf..c2e63235f8 100644
--- a/packages/core/src/canvas/freeformWhitelist.test.ts
+++ b/packages/shared/src/canvas-freeform-whitelist.test.ts
@@ -3,7 +3,7 @@ import {
   buildImportMap,
   checkFreeformImports,
   FREEFORM_WHITELIST,
-} from "./freeformWhitelist";
+} from "./canvas-freeform-whitelist";
 
 describe("checkFreeformImports", () => {
   it("accepts whitelisted imports", () => {
diff --git a/packages/core/src/canvas/freeformWhitelist.ts b/packages/shared/src/canvas-freeform-whitelist.ts
similarity index 100%
rename from packages/core/src/canvas/freeformWhitelist.ts
rename to packages/shared/src/canvas-freeform-whitelist.ts
diff --git a/packages/shared/tsup.config.ts b/packages/shared/tsup.config.ts
index 4d3231a785..6b1fc34f37 100644
--- a/packages/shared/tsup.config.ts
+++ b/packages/shared/tsup.config.ts
@@ -5,6 +5,9 @@ export default defineConfig({
     "src/index.ts",
     "src/agent-platform-types.ts",
     "src/analytics-events.ts",
+    "src/canvas-freeform-prompt.ts",
+    "src/canvas-freeform-starter.ts",
+    "src/canvas-freeform-whitelist.ts",
     "src/constants.ts",
     "src/deeplink.ts",
     "src/dismissalReasons.ts",
diff --git a/packages/ui/src/features/canvas/components/canvasTemplateIcon.tsx b/packages/ui/src/features/canvas/components/canvasTemplateIcon.tsx
index 693dc20150..96f0f04c70 100644
--- a/packages/ui/src/features/canvas/components/canvasTemplateIcon.tsx
+++ b/packages/ui/src/features/canvas/components/canvasTemplateIcon.tsx
@@ -4,7 +4,7 @@ import {
   FileIcon,
   ShapesIcon,
 } from "@phosphor-icons/react";
-import { FREEFORM_TEMPLATE_ID } from "@posthog/core/canvas/freeformSchemas";
+import { FREEFORM_TEMPLATE_ID } from "@posthog/shared/canvas-freeform-prompt";
 import type { ReactNode } from "react";
 
 // A canvas's leading icon, chosen from its template so the tree and header read
diff --git a/packages/ui/src/features/canvas/freeform/sandboxRuntime.ts b/packages/ui/src/features/canvas/freeform/sandboxRuntime.ts
index 78b26e0f26..1f6300218f 100644
--- a/packages/ui/src/features/canvas/freeform/sandboxRuntime.ts
+++ b/packages/ui/src/features/canvas/freeform/sandboxRuntime.ts
@@ -4,7 +4,7 @@ import {
   FREEFORM_ESM_HOST,
   FREEFORM_POSTHOG_JS_URL,
   FREEFORM_QUILL_CSS_URLS,
-} from "@posthog/core/canvas/freeformWhitelist";
+} from "@posthog/shared/canvas-freeform-whitelist";
 
 // Builds the HTML document loaded into the freeform-canvas sandbox iframe.
 //
diff --git a/packages/ui/src/features/canvas/freeformPrompt.ts b/packages/ui/src/features/canvas/freeformPrompt.ts
index 32631fc0c7..df252d8ed6 100644
--- a/packages/ui/src/features/canvas/freeformPrompt.ts
+++ b/packages/ui/src/features/canvas/freeformPrompt.ts
@@ -1,5 +1,5 @@
-import { freeformSystemPromptFor } from "@posthog/core/canvas/canvasTemplates";
-import { FREEFORM_STARTER_CODE } from "@posthog/core/canvas/freeformStarter";
+import { freeformSystemPromptFor } from "@posthog/shared/canvas-freeform-prompt";
+import { FREEFORM_STARTER_CODE } from "@posthog/shared/canvas-freeform-starter";
 
 // Builds the prompt for the task that generates a freeform (React) canvas. Like
 // CONTEXT.md generation, this runs as a normal repo-less agent task (no repo