Skip to content
This repository was archived by the owner on Aug 6, 2026. It is now read-only.

Add HTML document canvases with anchored teammate comments - #3693

Closed
puemos wants to merge 1 commit into
mainfrom
posthog-code/html-canvas-artifacts-comments
Closed

puemos wants to merge 1 commit into
mainfrom
posthog-code/html-canvas-artifacts-comments

Conversation

@puemos

@puemos puemos commented Jul 22, 2026

Copy link
Copy Markdown
Contributor

Problem

Agents can already build freeform React canvases in Channels, but there's no way to generate a plain document artifact — a report, spec, or one-pager — and no way for teammates to leave feedback anchored to specific parts of a canvas. Inspired by puemos/peek.

Changes

  • New "Document (HTML)" canvas template (html): the agent authors a complete standalone HTML page (self-contained inline CSS/JS, PostHog numbers baked in at generation time via MCP) and publishes it through the existing desktop-file-system-canvas-partial-update flow. Versions, undo/redo, fork, share links, the Artifacts tab, and the dashboards grid all work unchanged.
  • Sandboxed rendering: documents render in a null-origin sandbox="allow-scripts" iframe (HtmlArtifactFrame, no warm pool) with an injected CSP that blocks all network egress.
  • Anchored comments (peek-style): an annotation shim injected into the document captures text selections and element picks and paints highlights + numbered pins; anchors travel over a Zod-validated postMessage protocol. Three anchor kinds: text quote (with prefix/suffix context for re-resolution), CSS-selector element pin, and page-level. Anchors that no longer resolve after an edit degrade to a "context missing" badge instead of breaking.
  • Comments are stored on PostHog's comments API (scope: "code_canvas", anchor JSON in item_context, replies via source_comment, soft delete) — first wiring of that generated-client surface — so every project member sees them via polling. Side panel gains a Comments tab with threads, replies, and delete-own.

How did you test this?

  • pnpm --filter @posthog/core test -- --run (2504 tests) and vitest run src/features/canvas in packages/ui (170 tests), including new suites for the protocol schemas, comment threading/orphan parsing, shim algorithms (text-quote capture/resolution, CSS-path round-trips in jsdom), CSP/shim document splicing, and the HTML generation-prompt branch.
  • pnpm --filter @posthog/{core,api-client,ui,code,web} typecheck and biome lint all clean.
  • Not manually verified in the running app (no desktop environment in this sandbox) — worth a dogfood pass on a real channel before shipping.

Automatic notifications

  • Publish to changelog?
  • Alert Sales and Marketing teams?

Created with PostHog Code

A new "html" canvas template lets the agent generate standalone HTML
documents (reports, specs, one-pagers) alongside freeform React
canvases, published through the same desktop-file-system canvas flow.
Documents render in a null-origin sandboxed iframe with a locked-down
CSP and an injected annotation shim; teammates can comment by selecting
text, picking an element, or on the whole page, with numbered pins and
a side-panel thread view backed by PostHog's comments API.

Generated-By: PostHog Code
Task-Id: b6ef557f-b02a-45d6-9128-577e1fbad8b1
@trunk-io

trunk-io Bot commented Jul 22, 2026

Copy link
Copy Markdown

Merging to main in this repository is managed by Trunk.

  • To merge this pull request, check the box to the left or comment /trunk merge below.

After your PR is submitted to the merge queue, this comment will be automatically updated with its status. If the PR fails, failure details will also be posted here

@github-actions

Copy link
Copy Markdown

React Doctor found no issues in the changed files. 🎉

Reviewed by React Doctor for commit 39f2ac8.

const doc = buildHtmlArtifactDocument(html);
const stripped = doc
.replace(/<meta http-equiv="Content-Security-Policy"[^>]*>/, "")
.replace(/<script>[\s\S]*<\/script>/, "");
@puemos puemos closed this Jul 22, 2026
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants