mirror of
https://github.com/CopilotKit/CopilotKit.git
synced 2026-09-14 16:26:20 +08:00
Ben Taylor
4970f55878
## Summary Adds production onboarding for the Inspector Threads empty state: - Moves the Threads `Talk to an Engineer` CTA into the main inspector tab nav when Threads is active. - Replaces the enabled-empty `No threads yet` state with example thread rows and a deselected overview. - Lets users select an example thread to preview the real thread-details UI with Timeline, Raw AG-UI Events, and State data. - Adds a dismissible/reopenable example tour that persists dismissal in local storage. - Hides examples once real threads are present. - Adds the `Learn how Threads work` and `Explore self-hosted Intelligence` CTAs. - Adds a deferred autoplay video preview to the enabled-empty deselected overview. ## Telemetry New/updated Threads events in this PR: - `oss.inspector.threads_tab_clicked` — fires when the rendered Threads nav tab is clicked. - `oss.inspector.threads_locked_viewed` — fires once per inspector instance for the locked state. - `oss.inspector.threads_empty_enabled_viewed` — fires once per inspector instance when Threads are enabled with zero real threads. - `oss.inspector.threads_enabled_viewed` — fires once per inspector instance when real threads are present. - `oss.inspector.threads_intelligence_signup_clicked` — fires from locked-state Intelligence signup CTAs. - `oss.inspector.threads_talk_to_engineer_clicked` / `oss.inspector.talk_to_engineer_clicked` — fire from Threads-specific and shared Talk to an Engineer CTAs. - `oss.inspector.threads_example_viewed` — fires once per example thread shown in the empty state. - `oss.inspector.threads_example_selected` — fires once per example thread selection. - `oss.inspector.threads_example_tour_started` — fires when the tour auto-starts for the first selected example. - `oss.inspector.threads_example_tour_step_viewed` — fires once per example thread/tour step. - `oss.inspector.threads_example_tour_dismissed` — fires when the user skips the tour. - `oss.inspector.threads_example_tour_completed` — fires when the user finishes the tour. - `oss.inspector.threads_example_tour_reopened` — fires when the user clicks `Show tour` after dismissal. Telemetry properties are limited to product metadata and funnel context: package/version, inspector distinct IDs, intelligence/thread-service/license/runtime status, runtime URL type, CTA surface/type, telemetry-disabled status, thread count, example thread ID, tour step/tab, and dismiss method. We do **not** send message content, AG-UI event payloads, agent state, prompts, completions, or thread bodies. No telemetry was added for passive video loading; it is a visual affordance rather than a user intent signal. ## Outbound Attribution Threads onboarding CTAs now include existing `ref` attribution plus these UTM parameters: - `utm_source=copilotkit_inspector` - `utm_medium=in_product` - `utm_campaign=threads_onboarding` Affected links are limited to Threads onboarding surfaces: - Threads tab-nav `Talk to an Engineer` - Threads locked-state `Sign up for Intelligence` (`https://dashboard.operations.copilotkit.ai/sign-in`) - Empty Threads overview `Learn how Threads work` - Empty Threads overview `Explore self-hosted Intelligence` The UTM params are opt-in for these Threads onboarding CTAs and do not apply to generic announcement/banner links or locked Memories CTAs. The inspector spec includes a regression test to keep locked Memories CTAs free of the Threads campaign params. ## Video Asset + Performance - The overview video uses the CDN-hosted asset at `https://cdn.copilotkit.ai/corp-site/videos/copilotkit-generative-ui-agentic-frontend-demo.webm` instead of committing a binary to `@copilotkit/web-inspector`. - Verified the URL serves `200`, `Content-Type: video/webm`, `Content-Length: 6765736`, and a CloudFront cache hit. - `@copilotkit/web-inspector` currently only inlines CSS and SVG assets in its package build, while larger docs/showcase media commonly lives on hosted/CDN-style URLs. - The video `src` is not rendered on the initial overview paint. It is deferred until `requestIdleCallback` or a short timeout fallback, uses `preload="metadata"`, fades in after `loadeddata`, and does not load for `prefers-reduced-motion: reduce`. ## Validation - `NX_TUI=false npx -y pnpm@10.33.4 nx run @copilotkit/web-inspector:test -- web-inspector.spec.ts` - `NX_TUI=false npx -y pnpm@10.33.4 nx run @copilotkit/web-inspector:check-types` <img width="1662" height="1382" alt="CleanShot 2026-07-10 at 12 01 03@2x" src="https://github.com/user-attachments/assets/e2031570-f602-40dc-a54c-e9c7690fc0ba" /> <img width="1680" height="1388" alt="CleanShot 2026-07-10 at 12 01 12@2x" src="https://github.com/user-attachments/assets/2c8db42f-3ab0-47e2-a235-ea54e8dd292b" />
@copilotkit/web-inspector
Standalone Thread Inspector QA
Run the shared inspector without an app shell:
pnpm nx run @copilotkit/web-inspector:dev:standalone
Open http://127.0.0.1:5177/.
Validation steps:
- Confirm the initial
AG-UI eventsscenario opens on the Timeline tab and renders run, message, and tool rows. - Click
Messages onlyand confirm the first-visible Timeline renders persisted message content instead of an empty Timeline. - Click
Raw event onlyand confirm the Timeline renders aTHREAD_STATE_WRITTENrow with a source-event link. - Use a Timeline source-event link and confirm it opens the Raw AG-UI Events tab on the corresponding event.
- Open the State tab and confirm the demo state is visible.
This harness uses demo provider data only. Manual product validation for Intelligence-backed threads still needs a real Intelligence backend.