Skip to content

fix(cockpit): Spec 1C smoke-test fixes (nx run, env, hydration, posthog)#357

Merged
blove merged 1 commit into
mainfrom
smoke/spec-1c-verification
May 16, 2026
Merged

fix(cockpit): Spec 1C smoke-test fixes (nx run, env, hydration, posthog)#357
blove merged 1 commit into
mainfrom
smoke/spec-1c-verification

Conversation

@blove
Copy link
Copy Markdown
Contributor

@blove blove commented May 16, 2026

Summary

Iteratively-discovered fixes from a local Chrome MCP smoke test against the merged Spec 1C work. End-to-end verified — `cockpit_did` propagates from the React shell through iframe URL params to `@ngaf/cockpit-telemetry` inside the Angular example, and both `cockpit:recipe_opened` (shell) and `cockpit:transport_connected` (iframe) arrive in PostHog with matching `distinct_id`.

Bugs fixed

  1. `nx serve` syntax in 14 `serve-*` targets in `apps/cockpit/project.json` + the loop in `apps/cockpit/scripts/serve-example.ts` — was `nx serve :serve:cockpit` (parsed as project name → fails) → fixed to `nx run :serve:cockpit`.
  2. Streaming Angular postcss error on cockpit build — the cockpit config inherited production optimization which broke the @ngaf/example-layouts tailwind layers. All 31 cockpit configs now mirror `development` (`optimization:false` + sourcemaps + env file replacement) and only override the browser entry to `main.cockpit.ts`.
  3. PostHog never initialized in the cockpit shell — `instrumentation-client.ts` compiles into a chunk but its module body doesn't execute reliably in turbopack dev. Added an `` client component mounted from the root layout that calls `posthog.init()` in useEffect; idempotent on `posthog.__loaded`.
  4. `shouldCaptureAnalytics` DNT guard — dropped to match the website's first-party tracker semantics. The captureLocal flag + localhost gate cover the privacy contract; DNT was over-blocking on dev machines.
  5. Iframe URL pointed to `examples.cacheplane.ai` in dev — `NEXT_PUBLIC_COCKPIT_RUNTIME_BASE_URL` needs to be set (even to empty) for the localhost fallback. Documented via `.env.local` (not committed) — the smoke procedure is to set `NEXT_PUBLIC_COCKPIT_RUNTIME_BASE_URL=` to use `devPort`-based localhost URLs.
  6. SSR/CSR hydration mismatch on the iframe `src` — `getCockpitSessionId()` generates a fresh UUID per process, so SSR and CSR produced different `cockpit_did` values. `` is now a client component that fills the src in useEffect after mount.

What was verified end-to-end

  • Cockpit shell loads at `localhost:4201` and PostHog initializes (`flags/` + `/e/?` traffic to `us.i.posthog.com`).
  • Clicking a sidebar capability fires `cockpit:recipe_opened` (confirmed in PostHog event list).
  • Iframe URL carries `cockpit_did=cockpit_`, `cockpit_cap=streaming`, `cockpit_phk=phc_…`, `cockpit_host=…`.
  • Angular streaming example loads in the iframe with no postcss errors.
  • Typing in the chat input triggers `cockpit:transport_connected` (and the agent-lifecycle wiring) — confirmed in PostHog with the same `distinct_id` as the parent.

`docs/superpowers/specs/gtm/2026-05-15-analytics-foundation-1c-cockpit-instrumentation-design.md` Phase 3.3 (Chrome MCP smoke) and the AGENT_LIFECYCLE registry path (PR #351) are now confirmed working in dev.

Test plan

  • `nx run cockpit:test` — green (73/73)
  • `nx run cockpit-langgraph-streaming-angular:serve:cockpit` — boots clean, no postcss error
  • PostHog Live Events shows `cockpit:recipe_opened` + `cockpit:transport_connected` with matching cockpit_ distinct_id
  • Post-merge regression: run `nx run cockpit:serve-streaming` (or any `serve-*`) end-to-end through Chrome and verify it doesn't error

🤖 Generated with Claude Code

@blove @claude
fix(cockpit): Spec 1C smoke-test fixes (nx run, env, hydration, posthog)
4f2543d 
Issues found during Chrome MCP local smoke and resolved iteratively. End-to-end
verified: cockpit_did flows from React shell → iframe URL params → @ngaf/
cockpit-telemetry → PostHog with matching distinct_id. Both `cockpit:recipe_opened`
and `cockpit:transport_connected` confirmed in PostHog.

apps/cockpit/project.json + scripts/serve-example.ts
  14 serve-* targets and the serve-example script invoked
  `nx serve <project>:serve:cockpit` which Nx parses as a project name and
  fails. Switched to `nx run <project>:serve:cockpit`.

cockpit/<cat>/<cap>/angular/project.json (31 examples)
  cockpit build configuration now mirrors the example's `development`
  configuration (sourceMap, optimization:false, env file replacement) +
  overrides browser to main.cockpit.ts. The earlier copy of production
  settings triggered a CSS optimizer issue on the @ngaf/example-layouts
  imported tailwind layers when consumed via the cockpit iframe.

apps/cockpit/src/lib/analytics/properties.ts(+spec)
  Drop the doNotTrack guard. The website's shouldCaptureAnalytics doesn't
  consider DNT and we want consistent guard semantics across both shells.
  DNT is a strong privacy signal for third-party tracking; cockpit shell
  analytics is first-party developer-funnel telemetry, governed by the
  captureLocal flag + localhost gate.

apps/cockpit/instrumentation-client.ts
  Stay aligned with the updated shouldCaptureAnalytics signature.

apps/cockpit/src/components/analytics-bootstrap.tsx (new) + layout.tsx
  Next.js's instrumentation-client.ts is loaded but its module body
  doesn't execute reliably in turbopack dev mode on this app layout.
  Added a client-side bootstrap component mounted from the root layout
  that calls posthog.init() in useEffect. Idempotent — re-renders no-op
  on `posthog.__loaded`.

apps/cockpit/src/components/run-mode/run-mode.tsx
  Made RunMode a client component. The iframe src is now computed in
  useEffect rather than during render so getCockpitSessionId() (which
  generates a fresh UUID per process) doesn't produce different values
  between SSR and CSR. Eliminates the hydration warning that was visible
  on every cockpit page load.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
@vercel
Copy link
Copy Markdown

vercel Bot commented May 16, 2026 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
cacheplane Ready Ready Preview, Comment May 16, 2026 7:19am

Request Review

@blove blove merged commit 5c3c6fb into main May 16, 2026
13 of 14 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@blove