feat(canvas): Quill charts + dashboard-aware gen-UI agent

CANVAS_MVP.md

@@ -0,0 +1,145 @@
+# Canvas / Dashboards — Progress & MVP gaps
+
+Generative-UI dashboards built from real PostHog data, wrapped in a Slack-like
+multi-space shell. **Everything is gated behind the `project-bluebird` feature
+flag** (default-on in dev, off for all prod users → app is byte-for-byte the
+current code-only shell). Not enabled for real users.
+
+## Branches / PRs
+
+- **`feat/canvas`** — the full feature (this doc). Draft **PR #2492**.
+- **`code/top-nav`** — minimal extraction of just the nav rail (Home/Inbox/Code,
+  Home empty), for a clean first landing. **PR #2491**.
+
+## Shell / navigation
+
+- **App nav rail** — Slack-like left rail (Home / Inbox / Code). Reserves macOS
+  traffic-light space (2.5rem top padding); draggable titlebar region. Inbox
+  button shows a live actionable-report count badge (`useInboxSignalCount`).
+  - On `feat/canvas`: `features/canvas/components/CanvasNav.tsx`.
+  - On `code/top-nav`: `components/AppNav.tsx` (Home routes to `/code` for now).
+- **Inbox** — top-level `/inbox` renders `InboxView` full-screen.
+- **Home space** (`/website/*`) — its own `HomeSidebar` listing **channels**.
+- Root layout (`routes/__root.tsx`) gates the rail + branches on the flag:
+  settings (full-screen), inbox (full-screen), home (rail + HomeSidebar), code
+  (existing chrome). When the flag is off, `/` and `/inbox` redirect to `/code`
+  once flags resolve (`useFeatureFlagsLoaded`).
+
+## Channels (server-backed)
+
+Replaces the old placeholder Website/Features/Resources nav. A "channel" is a
+top-level folder on PostHog's **desktop file-system** surface.
+
+- `posthogClient.ts` — `getDesktopFileSystem` / `createDesktopFileSystemChannel`
+  / `deleteDesktopFileSystem`. `hooks/useChannels.ts` — list + create/delete.
+- `HomeSidebar.tsx` — a "Channels" list with a Slack-style **create modal**
+  (`CreateChannelModal.tsx`) and a per-channel hover `…` menu → destructive
+  **delete**. Each channel is a collapsible section with active-route
+  highlighting.
+- **Each channel gets its own** dashboards, tasks, and settings, routed under
+  **`/website/$channelId/...`** (`index` = dashboards grid, `dashboards/$id`,
+  `new`, `tasks/$taskId`, `settings`). `/website` redirects to the first channel
+  or an empty "create a channel" state.
+- Channels require auth; logged-out shows an empty state.
+
+## Dashboards (file-backed, channel-scoped)
+
+- **Main `DashboardsService`** (`main/services/dashboards/`) — each dashboard is
+  a JSON file `{id, channelId, name, spec, createdAt, updatedAt}` under
+  `<appData>/dashboards/`. tRPC `dashboards.list(channelId) | get | create |
+  update | delete | adoptOrphans | refresh`. `list` filters by `channelId`;
+  `adoptOrphans` backfills pre-scoping dashboards into the first channel.
+- **Index grid** (`WebsiteDashboardsIndex.tsx`) — 3-wide responsive card grid;
+  each card shows a **live scaled-down preview** (`CanvasRenderer` at
+  `scale(0.4)`), name, "updated" time, and a hover `…` menu → destructive
+  **delete**. "New dashboard" creates a blank board and opens it in edit mode.
+- Breadcrumbs (`WebsiteLayout.tsx`): `<channel> › Dashboards [› <name>]` /
+  `New task` / `Settings`. No hardcoded "Website" root.
+
+## Gen-UI engine
+
+- `@json-render/core` + `@json-render/react`. Shared catalog (`genui/catalog.ts`:
+  Page/Grid/Card/Heading/Text/Stat/Table/BarList/Badge/Divider) →
+  `CANVAS_SYSTEM_PROMPT`.
+- **Shared presentational bodies** (`genui/bodies.tsx`) — the JSX for every
+  component lives once; `renderBody` dispatches by type. Both the view and edit
+  renderers use them, so the surfaces are pixel-identical. `StatBody` formats raw
+  numbers (`34980058 → 34,980,058`) at render.
+- **View renderer** — `genui/registry.tsx` (`CanvasRenderer`, used for the grid
+  thumbnails) and `genui/ViewRenderer.tsx` (key-aware walk used for the saved
+  board, so each Card can carry a per-card refresh button).
+- **Main `CanvasGenService`** reuses `AgentService` (PostHog MCP auto-enabled)
+  via `systemPromptOverride`, runs an ephemeral `__preview__` session per thread
+  with `bypassPermissions`, splits prose / json-render JSONL, assembles the spec,
+  and streams typed events over a tRPC subscription. Renderer: multi-thread
+  `canvasChatStore`, scoped subscription registrar, `CanvasChat` panel.
+
+## Edit mode — direct manipulation
+
+Entering Edit (`WebsiteDashboard.tsx`) seeds the canvas thread from the saved
+spec (`ensureSpec`) and swaps to the gen-UI canvas + chat (`WebsiteCanvas.tsx`).
+
+- **`genui/EditRenderer.tsx`** — recursive, key-aware walk (the map key is the
+  element id, which `createRenderer` doesn't expose):
+  - **Inline edit** of static text (titles/labels) via a contentEditable
+    `InlineText` (commit on blur/Enter, revert on Escape).
+  - **Drag-and-drop reorder** via `@dnd-kit/react` (`useSortable` grouped by
+    parent); drop → `moveChild`.
+  - **Locked data hint** — query-derived values show a "Data — from query"
+    tooltip, not editable.
+  - All affordances gated on `!isStreaming` so edits can't race agent snapshots.
+- **`genui/editable.ts`** — the "interpreter": a prop is inline-editable iff it's
+  an allow-listed static-text prop **and** a string literal (binding objects are
+  auto-excluded).
+- Spec edits mutate the live thread spec via `canvasChatStore`
+  (`setElementProp`, `moveChild`); the existing dirty-diff drives **Save**.
+- **Save** persists; **Save as fork** copies into a new dashboard; **Cancel**
+  (the Edit button when active) resets the thread → discards all unsaved edits
+  and the agent session; the file is untouched.
+
+## Refreshable data — stored queries
+
+Each data point's query lives **in the spec JSON** at
+`spec.state.queries[elementKey][propPath] = { query: "<HogQL>" }` (values stay
+literals in props, so rendering/editing are unchanged; forks stay refreshable).
+
+- **Agent contract** (`catalog.ts`) — the agent records the single-row/single-col
+  HogQL for every Stat value/delta alongside the literal it renders.
+- **Main `DashboardQueryService`** (`main/services/dashboard-query/`) — runs each
+  HogQL via `POST /api/projects/:id/query/` (auth via
+  `authService.authenticatedFetch` → 401-refresh), capped parallelism, reduces to
+  row 0 / col 0, per-point ok/fail (one bad query never fails the batch).
+- **`dashboards.refresh(id, elementKeys?, touchUpdatedAt?)`** — atomic main
+  read→run→patch→write: collects queries (subtree-filtered for per-card), runs
+  them, patches `ok` values into the spec, **persists to the file**. Returns
+  `{ updated, failures }`.
+- **Renderer** — `hooks/useRefreshDashboard.ts` calls refresh + invalidates
+  `dashboards.get` + toasts failures. The `DashboardRefreshControl` button now
+  actually refreshes; polling passes `touchUpdatedAt:false` (no list reorder).
+  `ViewRenderer` adds a **per-card** hover ↻ → `refresh([cardKey])`.
+
+## What's left
+
+1. **Agent reliability of `state.queries`.** If the agent omits the patch, that
+   point silently stays unrefreshable (degrades to baked literal — safe). Needs
+   live verification + prompt tuning; optional post-stream coverage warning.
+2. **Table / BarList refresh** (array data) — not yet; needs a `shape:"rows"`
+   query mode in `DashboardQueryService` + agent contract.
+3. **Edit-mode live refresh** — refresh is view-mode only; edit mode renders the
+   live store. A future enhancement refreshes via `setElementProp`.
+4. **Verify the gen-UI agent end-to-end, live** against a real authed project:
+   valid JSONL, MCP auto-approve under `bypassPermissions`, robust prose/JSONL
+   split, no flooding.
+5. **Persistence niceties.** Polling choice is per-mount local state; canvas chat
+   threads aren't persisted (lost on reload); channel↔task membership is local
+   (`websiteTasksStore`), not backend-bound.
+6. **Tests.** None yet for the dashboards / dashboard-query / canvas-gen services,
+   the stores, or the renderers.
+7. **Settings** per channel is still an inert placeholder.
+
+## Dev caveat
+
+Main-process changes (new services/routers: `dashboards`, `dashboard-query`,
+`canvas-gen`) require a **full dev restart** — renderer HMR won't load them.
+Symptom when stale: a refresh/save no-op or `No "mutation"-procedure on path
+"dashboards.refresh"`.

apps/code/package.json

@@ -124,6 +124,8 @@
     "@dnd-kit/react": "^0.1.21",
     "@fontsource-variable/inter": "^5.2.8",
     "@joplin/turndown-plugin-gfm": "^1.0.67",
+    "@json-render/core": "^0.19.0",
+    "@json-render/react": "^0.19.0",
     "@lezer/common": "^1.5.1",
     "@lezer/highlight": "^1.2.3",
     "@modelcontextprotocol/ext-apps": "^1.1.2",
@@ -142,7 +144,8 @@
     "@posthog/git": "workspace:*",
     "@posthog/hedgehog-mode": "^0.0.48",
     "@posthog/platform": "workspace:*",
-    "@posthog/quill": "0.3.0-beta.1",
+    "@posthog/quill": "0.3.0-beta.14",
+    "@posthog/quill-charts": "0.3.0-beta.14",
     "@posthog/shared": "workspace:*",
     "@radix-ui/react-collapsible": "^1.1.12",
     "@radix-ui/react-icons": "^1.3.2",

apps/code/src/main/di/container.ts

@@ -31,9 +31,12 @@ import { AppLifecycleService } from "../services/app-lifecycle/service";
 import { ArchiveService } from "../services/archive/service";
 import { AuthService } from "../services/auth/service";
 import { AuthProxyService } from "../services/auth-proxy/service";
+import { CanvasGenService } from "../services/canvas-gen/service";
 import { CloudTaskService } from "../services/cloud-task/service";
 import { ConnectivityService } from "../services/connectivity/service";
 import { ContextMenuService } from "../services/context-menu/service";
+import { DashboardQueryService } from "../services/dashboard-query/service";
+import { DashboardsService } from "../services/dashboards/service";
 import { DeepLinkService } from "../services/deep-link/service";
 import { EnrichmentService } from "../services/enrichment/service";
 import { EnvironmentService } from "../services/environment/service";
@@ -114,6 +117,9 @@ container.bind(MAIN_TOKENS.ArchiveService).to(ArchiveService);
 container.bind(MAIN_TOKENS.SuspensionService).to(SuspensionService);
 container.bind(MAIN_TOKENS.AppLifecycleService).to(AppLifecycleService);
 container.bind(MAIN_TOKENS.CloudTaskService).to(CloudTaskService);
+container.bind(MAIN_TOKENS.CanvasGenService).to(CanvasGenService);
+container.bind(MAIN_TOKENS.DashboardsService).to(DashboardsService);
+container.bind(MAIN_TOKENS.DashboardQueryService).to(DashboardQueryService);
 container.bind(MAIN_TOKENS.ConnectivityService).to(ConnectivityService);
 container.bind(MAIN_TOKENS.ContextMenuService).to(ContextMenuService);
 container.bind(MAIN_TOKENS.DeepLinkService).to(DeepLinkService);

apps/code/src/main/di/tokens.ts

@@ -48,6 +48,9 @@ export const MAIN_TOKENS = Object.freeze({
   SuspensionService: Symbol.for("Main.SuspensionService"),
   AppLifecycleService: Symbol.for("Main.AppLifecycleService"),
   CloudTaskService: Symbol.for("Main.CloudTaskService"),
+  CanvasGenService: Symbol.for("Main.CanvasGenService"),
+  DashboardsService: Symbol.for("Main.DashboardsService"),
+  DashboardQueryService: Symbol.for("Main.DashboardQueryService"),
   ConnectivityService: Symbol.for("Main.ConnectivityService"),
   ContextMenuService: Symbol.for("Main.ContextMenuService"),
 

apps/code/src/main/services/agent/schemas.ts

@@ -51,6 +51,18 @@ export const startSessionInput = z.object({
   effort: effortLevelSchema.optional(),
   model: z.string().optional(),
   jsonSchema: z.record(z.string(), z.unknown()).nullish(),
+  /**
+   * When set, fully replaces the built system prompt (attribution / PR / branch
+   * conventions) with this text, keeping only the PostHog project-scoping line.
+   * Used by non-coding agent surfaces (e.g. the canvas generation agent).
+   */
+  systemPromptOverride: z.string().optional(),
+  /**
+   * Tool names the agent may NOT use (Claude Code SDK `disallowedTools`). Used by
+   * non-coding surfaces (e.g. the canvas agent) to deny file/shell tools so the
+   * agent can't write files or run commands regardless of permission mode.
+   */
+  disallowedTools: z.array(z.string()).optional(),
 });
 
 export type StartSessionInput = z.infer<typeof startSessionInput>;

apps/code/src/main/services/agent/service.ts

@@ -197,12 +197,16 @@ function buildClaudeCodeOptions(args: {
   additionalDirectories?: string[];
   effort?: EffortLevel;
   plugins: { type: "local"; path: string }[];
+  disallowedTools?: string[];
 }) {
   return {
     ...(args.additionalDirectories?.length && {
       additionalDirectories: args.additionalDirectories,
     }),
     ...(args.effort && { effort: args.effort }),
+    ...(args.disallowedTools?.length && {
+      disallowedTools: args.disallowedTools,
+    }),
     plugins: args.plugins,
   };
 }
@@ -226,6 +230,10 @@ interface SessionConfig {
   model?: string;
   /** JSON Schema for structured task output — when set, the agent gets a create_output tool */
   jsonSchema?: Record<string, unknown> | null;
+  /** When set, replaces the default system prompt (keeps only project scoping) */
+  systemPromptOverride?: string;
+  /** Tool names the agent may NOT use (Claude Code SDK `disallowedTools`). */
+  disallowedTools?: string[];
 }
 
 interface ManagedSession {
@@ -474,10 +482,20 @@ export class AgentService extends TypedEventEmitter<AgentServiceEvents> {
     taskId: string,
     customInstructions?: string,
     additionalDirectories?: string[],
+    systemPromptOverride?: string,
   ): {
     append: string;
   } {
-    let prompt = `PostHog context: use project ${credentials.projectId} on ${credentials.apiHost}. When using PostHog MCP tools, operate only on this project.`;
+    const projectContext = `PostHog context: use project ${credentials.projectId} on ${credentials.apiHost}. When using PostHog MCP tools, operate only on this project.`;
+
+    // Override mode: non-coding surfaces (e.g. canvas generation) get only the
+    // project-scoping line plus their own instructions — the attribution / PR /
+    // branch conventions below are irrelevant and would mislead the agent.
+    if (systemPromptOverride) {
+      return { append: `${projectContext}\n\n${systemPromptOverride}` };
+    }
+
+    let prompt = projectContext;
 
     prompt += `
 
@@ -565,6 +583,7 @@ When creating pull requests, add the following footer at the end of the PR descr
       effort,
       model,
       jsonSchema,
+      systemPromptOverride,
     } = config;
 
     // Preview config doesn't need a real repo — use a temp directory
@@ -625,6 +644,7 @@ When creating pull requests, add the following footer at the end of the PR descr
         taskId,
         customInstructions,
         additionalDirectories,
+        systemPromptOverride,
       );
 
       const acpConnection = await agent.run(taskId, taskRunId, {
@@ -728,6 +748,7 @@ When creating pull requests, add the following footer at the end of the PR descr
         additionalDirectories,
         effort,
         plugins,
+        disallowedTools: config.disallowedTools,
       });
 
       let configOptions: SessionConfigOption[] | undefined;
@@ -1546,6 +1567,12 @@ For git operations while detached:
       effort: "effort" in params ? params.effort : undefined,
       model: "model" in params ? params.model : undefined,
       jsonSchema: "jsonSchema" in params ? params.jsonSchema : undefined,
+      systemPromptOverride:
+        "systemPromptOverride" in params
+          ? params.systemPromptOverride
+          : undefined,
+      disallowedTools:
+        "disallowedTools" in params ? params.disallowedTools : undefined,
     };
   }
 

apps/code/src/main/services/canvas-gen/schemas.ts

@@ -0,0 +1,48 @@
+import { z } from "zod";
+
+// Input for generating / extending a canvas from a chat prompt.
+export const canvasGenerateInput = z.object({
+  threadId: z.string().min(1),
+  prompt: z.string().min(1),
+  /**
+   * The json-render system prompt describing the component catalog. Computed in
+   * the renderer from the shared catalog and applied once when the ephemeral
+   * agent session for this thread is created.
+   */
+  systemPrompt: z.string().min(1),
+  model: z.string().optional(),
+});
+export type CanvasGenerateInput = z.infer<typeof canvasGenerateInput>;
+
+export const canvasThreadInput = z.object({ threadId: z.string().min(1) });
+export type CanvasThreadInput = z.infer<typeof canvasThreadInput>;
+
+// Events streamed to the renderer as the agent responds. `spec` carries the
+// full assembled json-render Spec snapshot after each applied JSONL patch.
+export const canvasStreamEventSchema = z.discriminatedUnion("type", [
+  z.object({ type: z.literal("started") }),
+  z.object({ type: z.literal("prose"), text: z.string() }),
+  z.object({
+    type: z.literal("spec"),
+    spec: z.record(z.string(), z.unknown()),
+  }),
+  z.object({
+    type: z.literal("tool"),
+    toolName: z.string(),
+    status: z.string(),
+  }),
+  z.object({ type: z.literal("done") }),
+  z.object({ type: z.literal("error"), message: z.string() }),
+]);
+export type CanvasStreamEvent = z.infer<typeof canvasStreamEventSchema>;
+
+export const CanvasGenEvent = { Event: "canvas-event" } as const;
+
+export interface CanvasGenEventPayload {
+  threadId: string;
+  event: CanvasStreamEvent;
+}
+
+export interface CanvasGenEvents {
+  [CanvasGenEvent.Event]: CanvasGenEventPayload;
+}