@copilotkit/web-inspector 1.69.3 → 1.70.1

package/dist/index.mjs

@@ -2,13 +2,14 @@ import generated_default from "./styles/generated.mjs";
 import inspector_logo_default from "./assets/inspector-logo.mjs";
 import inspector_logo_kite_default from "./assets/inspector-logo-kite.mjs";
 import { applyAnchorPosition, centerContext, clampSize, constrainToViewport, keepPositionWithinViewport, updateAnchorFromPosition, updateSizeFromElement } from "./lib/context-helpers.mjs";
-import { clearLegacyAnnouncementReadState, isValidAnchor, isValidDockMode, isValidPosition, isValidSize, loadAnnouncementPulsedTimestamp, loadAnnouncementReadTimestamp, loadInspectorState, saveAnnouncementPulsedTimestamp, saveAnnouncementReadTimestamp, saveInspectorState } from "./lib/persistence.mjs";
+import { INSPECTOR_DISMISSAL_MAX_DURATION_MS, clearLegacyAnnouncementReadState, isValidAnchor, isValidDockMode, isValidPosition, isValidSize, loadAnnouncementPulsedTimestamp, loadAnnouncementReadTimestamp, loadInspectorDismissedUntil, loadInspectorState, saveAnnouncementPulsedTimestamp, saveAnnouncementReadTimestamp, saveInspectorDismissedUntil, saveInspectorState } from "./lib/persistence.mjs";
 import { buildPopOutFeatures, ensureBrandFont, openPopOutWindow } from "./lib/pop-out.mjs";
 import { projectInspectorMetadata } from "./lib/inspector-metadata.mjs";
-import { buildHomeModel, runtimeConnectionNeedsAttention } from "./lib/home-briefing.mjs";
+import { buildHomeModel, homeFeatureImplementationPrompt, runtimeConnectionNeedsAttention } from "./lib/home-briefing.mjs";
 import { INSPECTOR_GROUPS, INSPECTOR_NAV_SECTIONS, getGroupForMenu, isInspectorMenuKey, shouldUseIconRail } from "./lib/inspector-nav.mjs";
 import { selectVisibleRealThreadId } from "./lib/thread-selection.mjs";
-import { TELEMETRY_DOCS_URL, ensureTelemetryDistinctId, getRuntimeUrlType, getTelemetryDistinctIdForUrl, maybeShowDisclosure, trackErrorSignalViewed, trackHomeCtaClicked, trackHomeViewed, trackInspectorOpened, trackMemoriesTabClicked, trackMetadataActionClicked, trackMetadataModuleViewed, trackTalkToEngineerClicked, trackThreadsEmptyEnabledViewed, trackThreadsEnabledViewed, trackThreadsExampleSelected, trackThreadsExampleTourCompleted, trackThreadsExampleTourDismissed, trackThreadsExampleTourReopened, trackThreadsExampleTourStarted, trackThreadsExampleTourStepViewed, trackThreadsExampleViewed, trackThreadsIntelligenceSignupClicked, trackThreadsLockedViewed, trackThreadsTabClicked, trackThreadsTalkToEngineerClicked, trackWhatsNewClicked, trackWhatsNewSignalViewed, trackWhatsNewViewed } from "./lib/telemetry.mjs";
+import { TELEMETRY_DOCS_URL, ensureTelemetryDistinctId, getRuntimeUrlType, getTelemetryDistinctIdForUrl, maybeShowDisclosure, trackErrorSignalViewed, trackHomeCtaClicked, trackHomeFeaturePromptClicked, trackHomePromptCopied, trackHomeStoryBeatSelected, trackHomeViewed, trackInspectorOpened, trackMemoriesTabClicked, trackMetadataActionClicked, trackMetadataModuleViewed, trackTalkToEngineerClicked, trackThreadsEmptyEnabledViewed, trackThreadsEnabledViewed, trackThreadsExampleSelected, trackThreadsExampleTourCompleted, trackThreadsExampleTourDismissed, trackThreadsExampleTourReopened, trackThreadsExampleTourStarted, trackThreadsExampleTourStepViewed, trackThreadsExampleViewed, trackThreadsIntelligenceSignupClicked, trackThreadsLockedViewed, trackThreadsTabClicked, trackThreadsTalkToEngineerClicked, trackThreadsTryFromHereClicked, trackWhatsNewClicked, trackWhatsNewSignalViewed, trackWhatsNewViewed } from "./lib/telemetry.mjs";
+import { createOnboardingPrompt, createOnboardingRunId } from "./lib/onboarding-prompt.mjs";
 import { LitElement, css, html, nothing, render, unsafeCSS } from "lit";
 import { marked } from "marked";
 import { styleMap } from "lit/directives/style-map.js";
@@ -110,20 +111,15 @@ const EVENT_ERROR_GUIDANCE = {
 * an announcement, and it would double the spoken length.
 */
 const PILL_SUBLINE_LABEL = "Open Inspector for details";
-const HUD_OPEN_INSPECTOR_LABEL = "Open Inspector";
-const HUD_THREADS_OFF_LABEL = "Turn on Threads";
-const HUD_THREADS_ON_LABEL = "Threads on";
-const HUD_INTELLIGENCE_OFF_LABEL = "Turn on Intelligence";
-const HUD_INTELLIGENCE_ON_LABEL = "Intelligence connected";
-const HUD_THREADS_OFF_DETAIL = "Inspect conversations from this app.";
-const HUD_THREADS_ON_DETAIL = "Threads is on. Opens the Threads view.";
-const HUD_INTELLIGENCE_OFF_DETAIL = "Connect Intelligence to use Threads and Learning.";
-const HUD_INTELLIGENCE_ON_DETAIL = "Intelligence is connected. Opens Home.";
-const HUD_LEARNING_OFF_LABEL = "Turn on Learning";
-const HUD_LEARNING_ON_LABEL = "Learning on";
-const HUD_LEARNING_OFF_DETAIL = "Connect Intelligence to use Learning.";
-const HUD_LEARNING_ON_DETAIL = "Learning is on. Opens the Learning view.";
-const HUD_OPEN_INSPECTOR_DETAIL = "Same as clicking the circle. Opens the full Inspector.";
+const HUD_INSPECTOR_LABEL = "CopilotKit Inspector";
+const HUD_ANNOUNCEMENT_TITLE_LIMIT = 80;
+const HUD_THREADS_LABEL = "Rich Threads";
+const HUD_LEARNING_LABEL = "Automatic Learning";
+const HUD_LEARN_MORE_LABEL = "Click to learn more";
+const INSPECTOR_DISMISSAL_MS = {
+	day: 1440 * 60 * 1e3,
+	week: INSPECTOR_DISMISSAL_MAX_DURATION_MS
+};
 const LAUNCHER_SIGNALS = {
 	"whats-new": {
 		tone: "news",
@@ -241,22 +237,24 @@ const THREAD_LIST_DEBOUNCE_MS = 300;
 const LAUNCHER_BASE_LABEL = "Web Inspector";
 const EDGE_MARGIN = 16;
 /** HUD card plus the hover bridge. Used to pick left vs right. */
-const LAUNCHER_HUD_WIDTH = 248;
+const LAUNCHER_HUD_WIDTH = 258;
 /**
 * One page-load preview of the launcher's feature HUD.
 *
-* The card arrives after the host page has had a beat to settle. Its four rows
-* then come online in order, stay readable, and leave together. Nothing is
-* persisted: a new Inspector element means a new preview.
+* The card arrives after the host page has had a beat to settle. Its feature
+* contents then arrive from top to bottom, stay readable, and leave together.
+* Nothing is persisted: a new Inspector element means a new preview.
 */
 const LAUNCHER_HUD_INTRO_MS = {
 	delay: 500,
 	duration: 3400,
-	rowStart: 180,
-	rowStagger: 170,
-	rowDuration: 300,
+	waterfallStart: 180,
+	waterfallStagger: 170,
+	waterfallDuration: 300,
 	blockedRetry: 250
 };
+/** Return the staggered reveal delay for one launcher HUD layer. */
+const launcherHudWaterfallDelay = (introIndex) => `${LAUNCHER_HUD_INTRO_MS.waterfallStart + introIndex * LAUNCHER_HUD_INTRO_MS.waterfallStagger}ms`;
 const DRAG_THRESHOLD = 6;
 const MIN_WINDOW_WIDTH = 880;
 const MIN_WINDOW_WIDTH_DOCKED_LEFT = 640;
@@ -285,17 +283,109 @@ function createPlaygroundThreadId() {
 	return globalThis.crypto?.randomUUID?.() ?? `playground-${Date.now()}`;
 }
 const THREADS_DOCS_URL = "https://docs.copilotkit.ai/threads";
-const THREADS_RUNTIME_SETUP_DOCS_URL = "https://docs.copilotkit.ai/backend/runtime-endpoints#enable-rich-threads-routes";
-const THREADS_RUNTIME_SETUP_PROMPT = [
-	`Read ${THREADS_RUNTIME_SETUP_DOCS_URL} and finish setting up Rich Threads in this repository.`,
-	"",
-	"First inspect the repository's agent instructions, installed CopilotKit versions, Runtime adapter, frontend provider, route or proxy setup, and existing authentication. Preserve the current framework and deployment model. Preserve existing authentication middleware and access checks on every Runtime route.",
-	"",
-	"Follow the guide to enable the multi-route Runtime, align the frontend transport, scope identifyUser to the existing server-verified signed-in application user, and expose the full Runtime subtree for GET, POST, PATCH, and DELETE. Never use a fixed demo identity in production. If no trusted user identity exists, stop and ask me which auth source to use.",
-	"",
-	"Start the app and verify GET {basePath}/info reports threadEndpoints.list, inspect, mutations, and realtimeMetadata as true. Run focused tests, lint, and typecheck. Report the files changed, commands run, and verification result. If blocked, explain the missing input; do not invent setup."
-].join("\n");
-const SELF_HOSTED_INTELLIGENCE_URL = "https://docs.copilotkit.ai/premium/self-hosting";
+const SELF_HOSTED_INTELLIGENCE_URL = "https://docs.copilotkit.ai/intelligence/self-hosting";
+const INTELLIGENCE_STORY_BEATS = [
+	{
+		id: "threads",
+		label: "Threads",
+		duration: 6500,
+		lead: "You only see this session. Your users have all the others.",
+		support: "Rich Threads keep every conversation and its state, so you can open the one that broke instead of reproducing it."
+	},
+	{
+		id: "learning",
+		label: "Learning",
+		duration: 6e3,
+		lead: "Your users already told you what to fix.",
+		support: "Learning reads the runs behind those threads and finds the patterns — every Insight linked to the messages that back it."
+	},
+	{
+		id: "skill",
+		label: "Skills",
+		duration: 5500,
+		lead: "An Insight becomes a skill you own.",
+		support: "A SKILL.md built from that evidence — yours to review, edit and ship with your project."
+	},
+	{
+		id: "intelligence",
+		label: "Intelligence",
+		duration: 6e3,
+		lead: "Every round of real use leaves your agent better.",
+		support: "Approve a skill, pull it into your project, and the next run starts from what already worked."
+	}
+];
+/**
+* The threads the first beat shows.
+*
+* One of them failed, because that is the row a developer actually wants and
+* the reason durable threads are worth paying for. It is a user's thread that
+* went wrong, not a demo of our agent failing — the distinction matters for a
+* card that has to argue for the product.
+*/
+const INTELLIGENCE_STORY_THREADS = [
+	{
+		title: "Reschedule the Tuesday sync",
+		meta: "2 min ago",
+		failed: false
+	},
+	{
+		title: "Book time with the design team",
+		meta: "18 min ago",
+		failed: false
+	},
+	{
+		title: "Booked the wrong slot",
+		meta: "Needs a look",
+		failed: true
+	}
+];
+/** The three rules the story derives, shown verbatim across all three beats. */
+const INTELLIGENCE_STORY_RULES = [
+	"Check both calendars.",
+	"Propose several times.",
+	"Ask before booking."
+];
+/**
+* The raw thread signals the first beat collapses into those rules.
+*
+* Kept at real-message length and varied on purpose — these have to read as
+* things people actually typed, not as three tidy bullet points. The longest
+* one truncates in a narrow panel, which is honest: it is an excerpt.
+*/
+const INTELLIGENCE_STORY_SIGNALS = [
+	"Check our calendars and find a time for both of us.",
+	"Could you share a few options?",
+	"Ask me before you book it."
+];
+const INTELLIGENCE_STORY_SKILL_FILE = "meeting-scheduling/SKILL.md";
+/**
+* How long the copied confirmation stands before the button invites a second
+* press. Longer than the 2s the Threads setup prompt uses, because this state
+* also carries an instruction that has to be read, not just an acknowledgement.
+*/
+const PROMPT_COPY_RESET_MS = 4e3;
+const INTELLIGENCE_STORY_CHAIN = [
+	{
+		icon: "MessagesSquare",
+		name: "Threads",
+		detail: "Every conversation"
+	},
+	{
+		icon: "Lightbulb",
+		name: "Insights",
+		detail: "Backed by evidence"
+	},
+	{
+		icon: "FileText",
+		name: "Skills",
+		detail: "You approve"
+	},
+	{
+		icon: "Wand2",
+		name: "Your agent",
+		detail: "Starts from what worked"
+	}
+];
 const THREADS_EXAMPLE_OVERVIEW_VIDEO_URL = "https://cdn.copilotkit.ai/corp-site/videos/copilotkit-generative-ui-agentic-frontend-demo.webm";
 const THREADS_EXAMPLE_OVERVIEW_VIDEO_FALLBACK = "The demo video is unavailable. Use the example threads to explore Messages, AG-UI Events, and State.";
 const THREADS_EXAMPLE_TOUR_STORAGE_KEY = "cpk:inspector:threads-example-tour:v1";
@@ -1105,6 +1195,9 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
 		this.viewInAppError = null;
 		this.focusMessageId = null;
 		this.focusRequestId = 0;
+		this.tryFromHereAvailable = false;
+		this.tryFromHereBusy = false;
+		this.tryFromHereError = null;
 		this._tab = "timeline";
 		this._fetchedMetadata = null;
 		this._conversation = [];
@@ -1164,6 +1257,15 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
 			if (target.hasPointerCapture(this._dividerPointerId)) target.releasePointerCapture(this._dividerPointerId);
 			this._dividerResizing = false;
 		};
+		this.onTryFromHere = (event) => {
+			event.preventDefault();
+			if (!this.tryFromHereAvailable || this.tryFromHereBusy) return;
+			this.dispatchEvent(new CustomEvent("tryFromHere", {
+				detail: this.threadId,
+				bubbles: true,
+				composed: true
+			}));
+		};
 	}
 	static {
 		this.properties = {
@@ -1181,6 +1283,9 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
 			viewInAppError: { attribute: false },
 			focusMessageId: { attribute: false },
 			focusRequestId: { attribute: false },
+			tryFromHereAvailable: { attribute: false },
+			tryFromHereBusy: { attribute: false },
+			tryFromHereError: { attribute: false },
 			_tab: { state: true },
 			_fetchedMetadata: { state: true },
 			_conversation: { state: true },
@@ -1257,7 +1362,7 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
 		return JSON.stringify(Object.entries(headers).sort(([leftKey], [rightKey]) => leftKey.localeCompare(rightKey)));
 	}
 	renderTabContent(id) {
-		if (id === "timeline") return this.renderTimeline();
+		if (id === "timeline") return this.withMessagesToolbar(this.renderTimeline());
 		if (id === "state") return this.renderState();
 		return this.renderEvents();
 	}
@@ -1572,6 +1677,55 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
       }
     }
 
+    .cpk-td__try-from-here {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      margin-inline-start: auto;
+      padding: 6px 10px;
+      border: 1px solid #dbdbe5;
+      border-radius: 8px;
+      background: #ffffff;
+      color: #36363a;
+      font-family: "Spline Sans Mono", monospace;
+      font-size: 11px;
+      font-weight: 600;
+      line-height: 1.2;
+      cursor: pointer;
+    }
+
+    .cpk-td__try-from-here-icon {
+      display: block;
+      flex-shrink: 0;
+    }
+
+    :host([dir="rtl"]) .cpk-td__try-from-here-icon {
+      scale: -1 1;
+    }
+
+    .cpk-td__try-from-here:hover:not(:disabled) {
+      border-color: rgba(85, 88, 178, 0.38);
+      background: #f7f7ff;
+      color: #010507;
+    }
+
+    .cpk-td__try-from-here:focus-visible {
+      outline: 2px solid #a78bfa;
+      outline-offset: 1px;
+    }
+
+    .cpk-td__try-from-here:disabled {
+      cursor: not-allowed;
+      opacity: 0.55;
+    }
+
+    .cpk-td__try-from-here-error {
+      flex-basis: 100%;
+      color: #c0333a;
+      font-size: 11px;
+      line-height: 1.4;
+    }
+
     /*
      * Each tab's content is wrapped in this panel so the keep-mounted
      * inactive panels can be hidden via display:none without disturbing
@@ -1956,6 +2110,8 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
 
     .cpk-td__timeline-toolbar {
       display: flex;
+      flex-wrap: wrap;
+      align-items: center;
       gap: 6px;
     }
 
@@ -2298,6 +2454,7 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
     :host([data-color-scheme="dark"]) .cpk-td__panel-toggle,
     :host([data-color-scheme="dark"]) .cpk-td__metadata-strip,
     :host([data-color-scheme="dark"]) .cpk-td__metadata-pill,
+    :host([data-color-scheme="dark"]) .cpk-td__try-from-here,
     :host([data-color-scheme="dark"]) .cpk-td__tool-block,
     :host([data-color-scheme="dark"]) .cpk-td__tool-header,
     :host([data-color-scheme="dark"]) .cpk-td__tool-body,
@@ -2315,6 +2472,7 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
     }
 
     :host([data-color-scheme="dark"]) .cpk-td__metadata-pill,
+    :host([data-color-scheme="dark"]) .cpk-td__try-from-here,
     :host([data-color-scheme="dark"]) .cpk-td__bubble-inner--assistant,
     :host([data-color-scheme="dark"]) .cpk-td__tool-block,
     :host([data-color-scheme="dark"]) .cpk-td__event,
@@ -2473,6 +2631,7 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
     :host([data-color-scheme="dark"]) .cpk-td__timeline-title,
     :host([data-color-scheme="dark"]) .cpk-td__timeline-bulk-toggle,
     :host([data-color-scheme="dark"]) .cpk-td__timeline-details-toggle,
+    :host([data-color-scheme="dark"]) .cpk-td__try-from-here,
     :host([data-color-scheme="dark"]) .cpk-tdp__value {
       color: #f3f4f8;
     }
@@ -3405,15 +3564,55 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
         ${isStop ? "Stop viewing" : "View in your app"}
       </button>
       ${this.viewInAppError ? html`<span class="cpk-td__view-in-app-error" role="alert"
-              >${this.viewInAppError}</span
-            >` : nothing}
+            >${this.viewInAppError}</span
+          >` : nothing}
+    `;
+	}
+	renderTryFromHereControl() {
+		if (!this.tryFromHereAvailable) return nothing;
+		return html`
+      <button
+        type="button"
+        class="cpk-td__try-from-here"
+        aria-label="Try from here"
+        ?disabled=${this.tryFromHereBusy}
+        @click=${this.onTryFromHere}
+      >
+        ${this.tryFromHereBusy ? "Loading…" : "Try from here"}
+        <svg
+          class="cpk-td__try-from-here-icon"
+          aria-hidden="true"
+          width="12"
+          height="12"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <path d="M7 7h10v10" />
+          <path d="M7 17 17 7" />
+        </svg>
+      </button>
+      ${this.tryFromHereError ? html`<span class="cpk-td__try-from-here-error" role="alert"
+            >${this.tryFromHereError}</span
+          >` : nothing}
     `;
 	}
 	renderTimelineBulkControls() {
+		const bulk = this.renderTimelineBulkButtons();
+		const tryFromHere = this.renderTryFromHereControl();
+		if (bulk === nothing && tryFromHere === nothing) return nothing;
+		return html`<div class="cpk-td__timeline-toolbar">
+      ${bulk}${tryFromHere}
+    </div>`;
+	}
+	renderTimelineBulkButtons() {
 		if (this._eventsNotAvailable) return nothing;
 		const detailIds = this.timelineItemsForEvents(this.activeEvents).filter((item) => item.details).map((item) => item.id);
 		if (detailIds.length <= 1) return nothing;
-		return html`<div class="cpk-td__timeline-toolbar">
+		return html`
       <button
         type="button"
         class="cpk-td__timeline-bulk-toggle"
@@ -3430,7 +3629,7 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
       >
         Collapse all
       </button>
-    </div>`;
+    `;
 	}
 	renderRawEventBulkControls() {
 		const eventIds = this.activeEvents.map((event) => this.rawEventId(event));
@@ -3462,6 +3661,9 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
 			(this.shadowRoot?.querySelector(`[data-source-index="${sourceIndex}"]`))?.scrollIntoView?.({ block: "center" });
 		});
 	}
+	withMessagesToolbar(content) {
+		return html`${this.renderTimelineBulkControls()}${content}`;
+	}
 	renderTimeline() {
 		if (this._loadingEvents) return html`
         <div class="cpk-td__status">Loading timeline…</div>
@@ -3509,7 +3711,7 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
 			this._conversation,
 			this.agentMessagesInput,
 			this._expandedTimelineDetails
-		], () => html`${this.renderTimelineBulkControls()}${timelineItems.map((item) => this.renderTimelineItem(item))}`);
+		], () => html`${timelineItems.map((item) => this.renderTimelineItem(item))}`);
 	}
 	timelineItemClass(item) {
 		const classes = ["cpk-td__timeline-item", `cpk-td__timeline-item--${item.kind}`];
@@ -3534,14 +3736,14 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
           >
           <span class="cpk-td__timeline-title">${item.title}</span>
           ${item.sourceIndex ? html`
-                  <button
-                    type="button"
-                    class="cpk-td__source-link"
-                    @click=${() => this.revealSourceEvent(item.sourceIndex)}
-                  >
-                    Source event #${item.sourceIndex}
-                  </button>
-                ` : nothing}
+                <button
+                  type="button"
+                  class="cpk-td__source-link"
+                  @click=${() => this.revealSourceEvent(item.sourceIndex)}
+                >
+                  Source event #${item.sourceIndex}
+                </button>
+              ` : nothing}
           <span class="cpk-td__timeline-time"
             >${formatTimestamp(item.timestamp)}</span
           >
@@ -3835,54 +4037,54 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
 				const eventId = this.rawEventId(event);
 				const detailsExpanded = this._expandedRawEvents.has(eventId);
 				return html`
-            <div
-              class="cpk-td__event cpk-td__event--${eventCategory(event.type)}"
-              data-source-index=${event.sourceIndex}
-            >
-              <div class="cpk-td__event-header">
-                <span class="cpk-td__event-type" title=${event.type}
-                  >${humanizeEventType(event.type)}</span
-                >
-                <span class="cpk-td__event-time"
-                  >${formatTimestamp(event.timestamp)}</span
-                >
-              </div>
-              <button
-                type="button"
-                class="cpk-td__timeline-details-toggle"
-                aria-expanded=${detailsExpanded ? "true" : "false"}
-                @click=${() => this.toggleRawEventDetails(eventId)}
+              <div
+                class="cpk-td__event cpk-td__event--${eventCategory(event.type)}"
+                data-source-index=${event.sourceIndex}
               >
-                ${detailsExpanded ? html`
-                        <svg
-                          aria-hidden="true"
-                          viewBox="0 0 24 24"
-                          fill="none"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                        >
-                          <path d="m6 9 6 6 6-6" />
-                        </svg>
-                      ` : html`
-                        <svg
-                          aria-hidden="true"
-                          viewBox="0 0 24 24"
-                          fill="none"
-                          stroke="currentColor"
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                        >
-                          <path d="m9 18 6-6-6-6" />
-                        </svg>
-                      `}
-                <span
-                  >${detailsExpanded ? "Hide details" : "Show details"}</span
+                <div class="cpk-td__event-header">
+                  <span class="cpk-td__event-type" title=${event.type}
+                    >${humanizeEventType(event.type)}</span
+                  >
+                  <span class="cpk-td__event-time"
+                    >${formatTimestamp(event.timestamp)}</span
+                  >
+                </div>
+                <button
+                  type="button"
+                  class="cpk-td__timeline-details-toggle"
+                  aria-expanded=${detailsExpanded ? "true" : "false"}
+                  @click=${() => this.toggleRawEventDetails(eventId)}
                 >
-              </button>
-              ${detailsExpanded ? renderHighlightedJsonBlock(event.rawEvent ?? event) : nothing}
-            </div>
-          `;
+                  ${detailsExpanded ? html`
+                          <svg
+                            aria-hidden="true"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                          >
+                            <path d="m6 9 6 6 6-6" />
+                          </svg>
+                        ` : html`
+                          <svg
+                            aria-hidden="true"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                          >
+                            <path d="m9 18 6-6-6-6" />
+                          </svg>
+                        `}
+                  <span
+                    >${detailsExpanded ? "Hide details" : "Show details"}</span
+                  >
+                </button>
+                ${detailsExpanded ? renderHighlightedJsonBlock(event.rawEvent ?? event) : nothing}
+              </div>
+            `;
 			})}`;
 		});
 	}
@@ -4691,6 +4893,13 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 		this.systemColorSchemeMediaQuery = null;
 		this.briefingRestoreMenu = null;
 		this.homeViewedThisOpen = false;
+		this.onboardingRunId = null;
+		this.promptCopyState = "idle";
+		this.promptCopyResetTimer = null;
+		this.intelStoryBeat = 0;
+		this.intelStoryUserPinned = false;
+		this.intelStoryTimer = null;
+		this.intelStoryReducedMotion = null;
 		this.hasResolvedCore = false;
 		this.settingsOpen = false;
 		this.lastSelectedMenuByGroup = {
@@ -4736,6 +4945,8 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 		this.playgroundError = null;
 		this.playgroundSourceThreadId = null;
 		this.playgroundShowEphemeralNotice = false;
+		this.tryFromHereBusy = false;
+		this.tryFromHereError = null;
 		this.threadCapabilityEnabled = null;
 		this.threadCapabilityGeneration = 0;
 		this.contextMenuOpen = false;
@@ -4799,11 +5010,12 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 		this.pillTimeoutId = null;
 		this.launcherHudOpen = false;
 		this.launcherHudSide = "left";
-		this.launcherHudHelp = null;
 		this.launcherHudCloseTimer = null;
 		this.launcherHudIntro = false;
 		this.launcherHudIntroStartTimer = null;
 		this.launcherHudIntroEndTimer = null;
+		this.inspectorDismissedUntil = null;
+		this.inspectorDismissalTimer = null;
 		this.hudLandingMenu = null;
 		this.pillOutcome = null;
 		this.viewedNewsSignalIds = /* @__PURE__ */ new Set();
@@ -4831,9 +5043,9 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 		this.threadsExampleOverviewVideoPlayAttemptGeneration = 0;
 		this.threadsExampleOverviewVideoPlayPromise = null;
 		this.threadsExampleOverviewVideoPlayOnNextBind = false;
-		this.threadsSetupPromptCopyState = "idle";
-		this.threadsSetupPromptCopyResetTimeoutId = null;
-		this.threadsSetupPromptCopyGeneration = 0;
+		this.homeFeaturePromptCopyState = null;
+		this.homeFeaturePromptCopyResetTimeoutId = null;
+		this.homeFeaturePromptCopyGeneration = 0;
 		this.contextState = {
 			button: {
 				position: {
@@ -4879,7 +5091,8 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 		this.customTabIcons = { threads: `<svg class="h-3.5 w-3.5" width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.04167 15C8.29167 15 7.65972 14.7431 7.14583 14.2292C6.63194 13.7153 6.375 13.0972 6.375 12.375C6.375 11.3194 6.80208 10.3646 7.65625 9.51042C8.51042 8.65625 9.57639 8.125 10.8542 7.91667C10.8125 7.41667 10.6875 7.03819 10.4792 6.78125C10.2708 6.52431 9.98611 6.39583 9.625 6.39583C9.20833 6.39583 8.75694 6.56944 8.27083 6.91667C7.78472 7.26389 7.20833 7.83333 6.54167 8.625C5.45833 9.91667 4.66319 10.7569 4.15625 11.1458C3.64931 11.5347 3.10417 11.7292 2.52083 11.7292C1.8125 11.7292 1.21528 11.4653 0.729167 10.9375C0.243056 10.4097 0 9.77083 0 9.02083C0 8.27083 0.163194 7.50347 0.489583 6.71875C0.815972 5.93403 1.36806 4.99306 2.14583 3.89583C2.40972 3.53472 2.60417 3.22917 2.72917 2.97917C2.85417 2.72917 2.91667 2.52778 2.91667 2.375C2.91667 2.27778 2.89931 2.20486 2.86458 2.15625C2.82986 2.10764 2.77778 2.08333 2.70833 2.08333C2.56944 2.08333 2.39583 2.17014 2.1875 2.34375C1.97917 2.51736 1.73611 2.78472 1.45833 3.14583L0 1.66667C0.444444 1.125 0.895833 0.711806 1.35417 0.427083C1.8125 0.142361 2.26389 0 2.70833 0C3.34722 0 3.88889 0.222222 4.33333 0.666667C4.77778 1.11111 5 1.66667 5 2.33333C5 2.73611 4.89583 3.18056 4.6875 3.66667C4.47917 4.15278 4.13194 4.73611 3.64583 5.41667C3.11806 6.16667 2.72569 6.82639 2.46875 7.39583C2.21181 7.96528 2.08333 8.46528 2.08333 8.89583C2.08333 9.13194 2.12153 9.31597 2.19792 9.44792C2.27431 9.57986 2.38194 9.64583 2.52083 9.64583C2.65972 9.64583 2.78125 9.60764 2.88542 9.53125C2.98958 9.45486 3.18056 9.27083 3.45833 8.97917C3.63889 8.78472 3.85417 8.54514 4.10417 8.26042C4.35417 7.97569 4.65972 7.625 5.02083 7.20833C5.89583 6.16667 6.6875 5.42361 7.39583 4.97917C8.10417 4.53472 8.84722 4.3125 9.625 4.3125C10.5556 4.3125 11.3194 4.625 11.9167 5.25C12.5139 5.875 12.8542 6.72917 12.9375 7.8125H15V9.89583H12.9375C12.8264 11.4514 12.4201 12.691 11.7188 13.6146C11.0174 14.5382 10.125 15 9.04167 15ZM9.08333 12.9167C9.52778 12.9167 9.90278 12.6632 10.2083 12.1562C10.5139 11.6493 10.7222 10.9444 10.8333 10.0417C10.1944 10.1944 9.63889 10.4965 9.16667 10.9479C8.69444 11.3993 8.45833 11.8472 8.45833 12.2917C8.45833 12.4861 8.51389 12.6389 8.625 12.75C8.73611 12.8611 8.88889 12.9167 9.08333 12.9167Z" fill="currentColor"/></svg>` };
 		this.handleDocumentVisibilityChange = () => {
 			this.accountCtaMotionPaused = document.visibilityState !== "visible";
-			if (document.visibilityState === "visible" && !this.isOpen) this.flushPendingSignalPulse();
+			this.refreshInspectorDismissalState();
+			if (document.visibilityState === "visible" && !this.isOpen && !this.isInspectorDismissed) this.flushPendingSignalPulse();
 			this.requestUpdate();
 		};
 		this.handlePillClick = (event) => {
@@ -4919,21 +5132,33 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 		this.handleHudActionClick = (event, row) => {
 			event.preventDefault();
 			event.stopPropagation();
-			this.hudLandingMenu = row === "inspector" ? null : row === "threads" ? "threads" : row === "learning" ? "memories" : "home";
+			this.hudLandingMenu = row === "threads" ? "threads" : row === "learning" ? "memories" : "home";
 			this.closeLauncherHud();
 			this.openInspector("floating_button");
 		};
-		this.handleHudHelpClick = (event, row) => {
-			event.preventDefault();
-			event.stopPropagation();
-			this.launcherHudHelp = this.launcherHudHelp === row ? null : row;
-			this.requestUpdate();
-		};
 		this.handleHudRowClick = (event, row) => {
 			const target = event.target;
-			if (target instanceof Element && target.closest(".cpk-launcher-hud__help, [data-cpk-hud-action]")) return;
+			if (target instanceof Element && target.closest(".cpk-launcher-hud__controls, [data-cpk-hud-action]")) return;
 			this.handleHudActionClick(event, row);
 		};
+		this.handleHudNewsClick = (event) => {
+			event.preventDefault();
+			event.stopPropagation();
+			this.hudLandingMenu = WHATS_NEW_MENU_KEY;
+			this.closeLauncherHud();
+			this.openInspector("floating_button");
+		};
+		this.handleHudNewsDismissClick = (event) => {
+			event.preventDefault();
+			event.stopPropagation();
+			this.clearNewsSignal();
+			this.activeRoot.querySelector(".console-button")?.focus({ preventScroll: true });
+		};
+		this.handleHudDismissDayClick = (event) => {
+			event.preventDefault();
+			event.stopPropagation();
+			this.dismissInspectorFor("day");
+		};
 		this.handleSidebarToggle = () => {
 			this.sidebarRailTooltip = null;
 			this.sidebarCollapsed = !this.sidebarCollapsed;
@@ -4976,6 +5201,51 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 			this.applyEventErrorLanding(key);
 			this.requestUpdate();
 		};
+		this.handleHomeFeaturePromptCopy = async (service, event) => {
+			const generation = this.homeFeaturePromptCopyGeneration += 1;
+			if (this.homeFeaturePromptCopyResetTimeoutId !== null) {
+				window.clearTimeout(this.homeFeaturePromptCopyResetTimeoutId);
+				this.homeFeaturePromptCopyResetTimeoutId = null;
+			}
+			this.homeFeaturePromptCopyState = null;
+			this.requestUpdate();
+			const onboardingRunId = createOnboardingRunId();
+			if (!this.core?.telemetryDisabled) trackHomeFeaturePromptClicked({
+				feature_id: service.id,
+				onboarding_run_id: onboardingRunId
+			});
+			const clipboard = this.getClipboard(event);
+			if (!clipboard?.writeText) {
+				this.showHomeFeaturePromptCopyState(service.id, "error", generation);
+				return;
+			}
+			try {
+				await clipboard.writeText(homeFeatureImplementationPrompt(service, { onboardingRunId }));
+				this.showHomeFeaturePromptCopyState(service.id, "copied", generation);
+			} catch {
+				this.showHomeFeaturePromptCopyState(service.id, "error", generation);
+			}
+		};
+		this.handleIntelligencePromptCopy = async (event) => {
+			this.clearIntelligencePromptReset();
+			const runId = this.getOnboardingRunId();
+			const clipboard = this.getClipboard(event);
+			let outcome = "failed";
+			if (clipboard?.writeText) try {
+				await clipboard.writeText(createOnboardingPrompt(runId));
+				outcome = "copied";
+			} catch {
+				outcome = "failed";
+			}
+			if (!this.isConnected) return;
+			this.promptCopyState = outcome;
+			this.requestUpdate();
+			if (outcome === "copied") this.scheduleIntelligencePromptReset();
+			if (!this.core?.telemetryDisabled) trackHomePromptCopied({
+				onboarding_run_id: runId,
+				outcome
+			});
+		};
 		this.handleSystemColorSchemeChange = (event) => {
 			if (this.hasExplicitColorScheme) return;
 			this.colorScheme = event.matches ? "dark" : "light";
@@ -5220,21 +5490,14 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 				this.startPlaygroundSession(false);
 				return;
 			}
-			const core = this._core;
 			const thread = this._threads.find((candidate) => candidate.id === threadId);
-			if (!core?.runtimeUrl || !thread) return;
+			if (!thread) return;
 			this.playgroundIsLoadingThread = true;
 			this.playgroundError = null;
 			this.requestUpdate();
 			try {
-				const baseUrl = core.runtimeUrl.replace(/\/+$/, "");
-				const encodedThreadId = encodeURIComponent(threadId);
-				const [messagesResponse, stateResponse] = await Promise.all([fetch(`${baseUrl}/threads/${encodedThreadId}/messages`, { headers: { ...core.headers } }), fetch(`${baseUrl}/threads/${encodedThreadId}/state`, { headers: { ...core.headers } })]);
-				if (!messagesResponse.ok) throw new Error(`Failed to load thread (HTTP ${messagesResponse.status}).`);
-				const messagesBody = await messagesResponse.json();
-				const stateBody = stateResponse.ok ? await stateResponse.json() : { state: {} };
-				this.startPlaygroundSession(false, this.mapThreadMessagesToPlayground(messagesBody.messages ?? []), stateBody.state ?? {}, thread.agentId);
-				this.playgroundSourceThreadId = threadId;
+				const snapshot = await this.loadThreadSnapshot(thread);
+				this.applyThreadSnapshotToPlayground(thread, snapshot);
 			} catch (error) {
 				this.playgroundError = error instanceof Error ? error.message : "Failed to load thread.";
 			} finally {
@@ -5242,6 +5505,35 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 				this.requestUpdate();
 			}
 		};
+		this.handleTryFromHere = async (threadId) => {
+			if (!threadId || this.tryFromHereBusy) return;
+			const thread = this._threads.find((candidate) => candidate.id === threadId) ?? null;
+			if (!thread) return;
+			this.tryFromHereBusy = true;
+			this.tryFromHereError = null;
+			this.requestUpdate();
+			const isCurrentTryFromHereRequest = () => this.selectedThreadId === threadId && this.selectedMenu === "threads";
+			try {
+				const snapshot = await this.loadThreadSnapshot(thread);
+				if (isCurrentTryFromHereRequest()) {
+					this.applyThreadSnapshotToPlayground(thread, snapshot);
+					this.handleMenuSelect("playground");
+				}
+				if (!this.core?.telemetryDisabled) trackThreadsTryFromHereClicked({
+					...this.getThreadsTelemetryProps(),
+					outcome: "success"
+				});
+			} catch (error) {
+				if (isCurrentTryFromHereRequest()) this.tryFromHereError = error instanceof Error ? error.message : "Failed to load thread.";
+				if (!this.core?.telemetryDisabled) trackThreadsTryFromHereClicked({
+					...this.getThreadsTelemetryProps(),
+					outcome: "failure"
+				});
+			} finally {
+				this.tryFromHereBusy = false;
+				this.requestUpdate();
+			}
+		};
 		this.runPlaygroundAgent = async () => {
 			const core = this._core;
 			const agent = this.playgroundAgent;
@@ -5413,26 +5705,6 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 			}
 			this.playThreadsExampleOverviewVideo(video, lifecycleGeneration);
 		};
-		this.handleThreadsSetupPromptCopy = async (event) => {
-			const generation = this.threadsSetupPromptCopyGeneration += 1;
-			if (this.threadsSetupPromptCopyResetTimeoutId !== null) {
-				window.clearTimeout(this.threadsSetupPromptCopyResetTimeoutId);
-				this.threadsSetupPromptCopyResetTimeoutId = null;
-			}
-			this.threadsSetupPromptCopyState = "idle";
-			this.requestUpdate();
-			const clipboard = this.getClipboard(event);
-			if (!clipboard?.writeText) {
-				this.showThreadsSetupPromptCopyState("error", generation);
-				return;
-			}
-			try {
-				await clipboard.writeText(THREADS_RUNTIME_SETUP_PROMPT);
-				this.showThreadsSetupPromptCopyState("copied", generation);
-			} catch {
-				this.showThreadsSetupPromptCopyState("error", generation);
-			}
-		};
 		this.handleClearEvents = () => {
 			if (this.selectedContext === "all-agents") {
 				this.agentEvents.clear();
@@ -5778,9 +6050,6 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 	getThreadsDocsUrl() {
 		return this.appendRefParam(THREADS_DOCS_URL, "cpk-inspector-threads");
 	}
-	getThreadsRuntimeSetupDocsUrl() {
-		return this.appendRefParam(THREADS_RUNTIME_SETUP_DOCS_URL, "cpk-inspector-threads");
-	}
 	getThreadsIntelligenceSignupUrl() {
 		return this.appendRefParam(INTELLIGENCE_SIGNUP_URL, "cpk-inspector-threads");
 	}
@@ -5892,7 +6161,7 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 		if (this.core?.getThreadStore(agentId)) return;
 		const core = this.core;
 		if (!core?.runtimeUrl) return;
-		const store = ɵcreateThreadStore({ fetch: globalThis.fetch });
+		const store = ɵcreateThreadStore({ fetch: typeof core.ɵruntimeFetch === "function" ? core.ɵruntimeFetch : globalThis.fetch });
 		store.start();
 		store.setContext({
 			runtimeUrl: core.runtimeUrl,
@@ -6603,7 +6872,9 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
                 <span>${functionName}${isFailedCall ? " failed" : ""}</span>
                 <span class="text-[10px] text-gray-600">ID: ${callId}</span>
               </div>
-              ${isFailedCall && toolError?.message ? html`<p class="mt-2 break-words leading-relaxed text-gray-800">
+              ${isFailedCall && toolError?.message ? html`<p
+                    class="mt-2 break-words leading-relaxed text-gray-800"
+                  >
                     ${toolError.message}
                   </p>` : nothing}
               ${argsString ? html`<div class="mt-2">
@@ -6832,13 +7103,15 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 
       .cpk-playground-composer {
         border: 1px solid #dcdce8;
-        box-shadow: 0 8px 22px rgba(31, 23, 57, 0.08),
+        box-shadow:
+          0 8px 22px rgba(31, 23, 57, 0.08),
           0 1px 2px rgba(31, 23, 57, 0.1);
       }
 
       .cpk-playground-composer:focus-within {
         border-color: #aaa4d4;
-        box-shadow: 0 10px 26px rgba(86, 53, 155, 0.13),
+        box-shadow:
+          0 10px 26px rgba(86, 53, 155, 0.13),
           0 0 0 3px rgba(190, 194, 255, 0.3);
       }
 
@@ -6855,20 +7128,22 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
       .inspector-window[data-color-scheme="dark"] .cpk-playground-composer {
         border-color: #464957;
         background: #15171e !important;
-        box-shadow: 0 8px 22px rgba(0, 0, 0, 0.26),
+        box-shadow:
+          0 8px 22px rgba(0, 0, 0, 0.26),
           0 1px 2px rgba(0, 0, 0, 0.36);
       }
 
       .inspector-window[data-color-scheme="dark"]
         .cpk-playground-composer:focus-within {
         border-color: #777aae;
-        box-shadow: 0 10px 26px rgba(0, 0, 0, 0.34),
+        box-shadow:
+          0 10px 26px rgba(0, 0, 0, 0.34),
           0 0 0 3px rgba(102, 106, 158, 0.3);
       }
 
       .cpk-playground-message-enter {
-        animation: cpk-playground-message-enter 0.24s cubic-bezier(0.16, 1, 0.3, 1)
-          both;
+        animation: cpk-playground-message-enter 0.24s
+          cubic-bezier(0.16, 1, 0.3, 1) both;
       }
 
       .cpk-playground-thinking-dot {
@@ -6887,8 +7162,7 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
         display: none;
       }
 
-      .cpk-playground-reasoning[open]
-        .cpk-playground-reasoning-chevron {
+      .cpk-playground-reasoning[open] .cpk-playground-reasoning-chevron {
         transform: rotate(90deg);
       }
 
@@ -7824,56 +8098,66 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 
       .cpk-launcher-hud {
         --hud-fill: var(--cpk-inspector-surface-dark);
-        --hud-line: rgb(190 194 255 / 0.5);
+        --hud-line: rgb(190 194 255 / 0.38);
+        --hud-accent: #b8adf5;
+        --hud-accent-soft: rgb(184 173 245 / 0.13);
+        --hud-hover-fill: #252231;
         --hud-blur: blur(12px) saturate(1.2);
+        --hud-card-gap: 8px;
+        --hud-dismiss-day-height: 32px;
         position: absolute;
-        top: 0;
         z-index: 4;
-        padding-right: 14px;
+        width: 258px;
         pointer-events: none;
         opacity: 0;
         visibility: hidden;
-        transform: translateX(8px);
         transition:
           opacity 160ms ease,
           transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
       }
 
+      .cpk-launcher-hud[data-cpk-hud-vertical="top"] {
+        top: 0;
+        bottom: auto;
+      }
+
+      .cpk-launcher-hud[data-cpk-hud-vertical="bottom"] {
+        top: auto;
+        bottom: 0;
+      }
+
       .cpk-launcher-hud[data-cpk-hud-side="left"] {
         right: 100%;
+        left: auto;
         padding-right: 14px;
-        padding-left: 0;
+        transform: translateX(8px);
       }
 
       .cpk-launcher-hud[data-cpk-hud-side="right"] {
         left: 100%;
         right: auto;
-        padding-right: 0;
         padding-left: 14px;
         transform: translateX(-8px);
       }
 
-      .console-button-wrapper[data-cpk-hud="open"]
-        .cpk-launcher-hud[data-cpk-hud-side="right"] {
+      .console-button-wrapper[data-cpk-hud="open"] .cpk-launcher-hud {
         transform: none;
       }
 
       .cpk-launcher-hud__card {
         position: relative;
-        width: 228px;
-        padding: 4px;
-        border: 1px dotted var(--hud-line);
-        border-radius: var(--cpk-inspector-shell-radius);
-        background: var(--hud-fill);
+        display: grid;
+        width: 244px;
+        gap: var(--hud-card-gap);
         color: #fff;
-        backdrop-filter: var(--hud-blur);
-        -webkit-backdrop-filter: var(--hud-blur);
-        box-shadow: 0 8px 20px rgb(1 5 7 / 0.18);
       }
 
       .cpk-launcher-hud[data-color-scheme="light"] {
         --hud-fill: #fff;
-        --hud-line: #d8d8e8;
+        --hud-line: #ddd6f4;
+        --hud-accent: #6757b0;
+        --hud-accent-soft: #f1edff;
+        --hud-hover-fill: #f1edff;
       }
 
       .cpk-launcher-hud[data-color-scheme="light"] .cpk-launcher-hud__card {
@@ -7883,70 +8167,297 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
       .cpk-launcher-hud__arrow {
         position: absolute;
         top: calc(var(--cpk-launcher-size) / 2);
-        z-index: 1;
+        z-index: 2;
         width: 10px;
         height: 10px;
         border: 0;
-        /* The card frosts the page behind it, so it reads lighter than the
-           raw fill. Mix a little white so the arrow matches the glass card
-           without going lighter than the HUD. */
-        background: color-mix(in srgb, var(--hud-fill) 88%, white 12%);
-        transform: translateY(-50%) rotate(45deg);
+        background: var(--hud-fill);
+        transform: rotate(45deg);
+        transition: background 120ms ease;
       }
 
       .cpk-launcher-hud[data-cpk-hud-side="left"] .cpk-launcher-hud__arrow {
         right: 9px;
+        border-top: 1px solid var(--hud-line);
+        border-right: 1px solid var(--hud-line);
       }
 
       .cpk-launcher-hud[data-cpk-hud-side="right"] .cpk-launcher-hud__arrow {
         left: 9px;
+        border-bottom: 1px solid var(--hud-line);
+        border-left: 1px solid var(--hud-line);
       }
 
-      .cpk-launcher-hud__list {
-        margin: 0;
-        padding: 0;
-        list-style: none;
+      .cpk-launcher-hud[data-cpk-hud-vertical="top"] .cpk-launcher-hud__arrow {
+        top: calc(var(--cpk-launcher-size) / 2 - 5px);
       }
 
-      .cpk-launcher-hud__list + .cpk-launcher-hud__list {
-        margin-top: 4px;
-        padding-top: 4px;
-        border-top: 1px dotted var(--hud-line);
+      .cpk-launcher-hud[data-cpk-hud-vertical="bottom"]
+        .cpk-launcher-hud__arrow {
+        top: auto;
+        bottom: calc(var(--cpk-launcher-size) / 2 - 5px);
+      }
+
+      /* A bottom-anchored HUD can end with the narrower dismissal bubble.
+         Keep the pointer attached to the full-width feature panel instead of
+         letting it float in the empty space beside that final action. */
+      .cpk-launcher-hud[data-cpk-hud-vertical="bottom"]:has(
+          .cpk-launcher-hud__dismiss-day
+        )
+        .cpk-launcher-hud__arrow {
+        bottom: calc(
+          var(--hud-dismiss-day-height) + var(--hud-card-gap) + 2px
+        );
+      }
+
+      .cpk-launcher-hud__list {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+      }
+
+      .cpk-launcher-hud__masthead {
+        position: relative;
+        z-index: 1;
+        margin-top: 6px;
+        padding: 0;
+        border: 1px solid var(--hud-line);
+        border-radius: var(--cpk-inspector-shell-radius);
+        background: var(--hud-fill);
+        backdrop-filter: var(--hud-blur);
+        -webkit-backdrop-filter: var(--hud-blur);
+        box-shadow: 0 10px 28px rgb(46 37 91 / 0.16);
+        transition: background 120ms ease;
+      }
+
+      .cpk-launcher-hud__news-wrap {
+        position: relative;
+        margin: 0;
+      }
+
+      .cpk-launcher-hud__news {
+        position: relative;
+        display: flex;
+        width: 100%;
+        min-width: 0;
+        flex-direction: column;
+        align-items: flex-start;
+        padding: 18px 12px 11px;
+        border: 0;
+        border-radius: calc(var(--cpk-inspector-shell-radius) - 1px);
+        background: transparent;
+        color: #fff;
+        font-family: inherit;
+        line-height: 1;
+        text-align: start;
+        cursor: pointer;
+      }
+
+      .cpk-launcher-hud__news:hover,
+      .cpk-launcher-hud__news:focus-visible {
+        background: transparent;
+      }
+
+      .cpk-launcher-hud__masthead:has(.cpk-launcher-hud__news:hover),
+      .cpk-launcher-hud__masthead:has(.cpk-launcher-hud__news:focus-visible),
+      .cpk-launcher-hud:has(.cpk-launcher-hud__news:hover)
+        .cpk-launcher-hud__arrow,
+      .cpk-launcher-hud:has(.cpk-launcher-hud__news:focus-visible)
+        .cpk-launcher-hud__arrow {
+        background: var(--hud-hover-fill);
+      }
+
+      .cpk-launcher-hud__news:focus-visible {
+        outline: 2px solid #bec2ff;
+        outline-offset: 1px;
+      }
+
+      .cpk-launcher-hud__news-title {
+        display: block;
+        font-size: 12px;
+        font-weight: 650;
+        line-height: 1.32;
+        overflow-wrap: anywhere;
+        white-space: normal;
+      }
+
+      .cpk-launcher-hud__news-label {
+        position: absolute;
+        top: -9px;
+        left: 12px;
+        display: inline-flex;
+        min-height: 20px;
+        align-items: center;
+        padding: 3px 8px;
+        border-radius: 6px;
+        background: #7563c7;
+        color: #fff;
+        box-shadow: 0 3px 8px rgb(46 37 91 / 0.18);
+        font-size: 9px;
+        font-weight: 700;
+        line-height: 1;
+      }
+
+      .cpk-launcher-hud__news-dismiss {
+        position: absolute;
+        top: -1px;
+        right: 2px;
+        z-index: 2;
+        display: inline-flex;
+        width: 20px;
+        height: 20px;
+        align-items: center;
+        justify-content: center;
+        padding: 0;
+        border: 0;
+        border-radius: 4px;
+        background: transparent;
+        color: rgb(255 255 255 / 0.68);
+        cursor: pointer;
+      }
+
+      .cpk-launcher-hud__news-dismiss:hover,
+      .cpk-launcher-hud__news-dismiss:focus-visible {
+        background: var(--hud-accent-soft);
+        color: #fff;
+      }
+
+      .cpk-launcher-hud[data-color-scheme="light"]
+        .cpk-launcher-hud__news-dismiss {
+        color: #6e697c;
+      }
+
+      .cpk-launcher-hud[data-color-scheme="light"]
+        .cpk-launcher-hud__news-dismiss:hover,
+      .cpk-launcher-hud[data-color-scheme="light"]
+        .cpk-launcher-hud__news-dismiss:focus-visible {
+        color: #27233a;
+      }
+
+      .cpk-launcher-hud__news-dismiss:focus-visible {
+        outline: 2px solid #bec2ff;
+        outline-offset: 1px;
+      }
+
+      .cpk-launcher-hud__news-dismiss svg {
+        width: 7px;
+        height: 7px;
+      }
+
+      .cpk-launcher-hud[data-color-scheme="light"] .cpk-launcher-hud__news {
+        color: #17131f;
+      }
+
+      .cpk-launcher-hud__dismiss-day {
+        position: relative;
+        z-index: 1;
+        display: flex;
+        width: auto;
+        min-height: var(--hud-dismiss-day-height);
+        align-items: center;
+        justify-content: center;
+        justify-self: center;
+        gap: 6px;
+        margin: 0;
+        padding: 7px 13px;
+        border: 1px solid var(--hud-line);
+        border-radius: var(--cpk-inspector-shell-radius);
+        background: var(--hud-fill);
+        color: #c9cad3;
+        box-shadow: 0 8px 20px rgb(17 14 29 / 0.18);
+        font-family: inherit;
+        font-size: 10px;
+        font-weight: 650;
+        line-height: 1.2;
+        cursor: pointer;
+        transition:
+          border-color 120ms ease,
+          background 120ms ease,
+          color 120ms ease;
+      }
+
+      .cpk-launcher-hud__dismiss-day:hover,
+      .cpk-launcher-hud__dismiss-day:focus-visible {
+        border-color: var(--hud-accent);
+        background: var(--hud-hover-fill);
+        color: #f3f4f8;
+      }
+
+      .cpk-launcher-hud__dismiss-day:focus-visible {
+        outline: 2px solid #bec2ff;
+        outline-offset: 1px;
+      }
+
+      .cpk-launcher-hud__dismiss-day svg {
+        width: 12px;
+        height: 12px;
+      }
+
+      .cpk-launcher-hud[data-color-scheme="light"]
+        .cpk-launcher-hud__dismiss-day {
+        box-shadow: 0 8px 20px rgb(46 37 91 / 0.12);
+        color: #5f6068;
+      }
+
+      .cpk-launcher-hud[data-color-scheme="light"]
+        .cpk-launcher-hud__dismiss-day:hover,
+      .cpk-launcher-hud[data-color-scheme="light"]
+        .cpk-launcher-hud__dismiss-day:focus-visible {
+        color: #36373d;
+      }
+
+      .cpk-launcher-hud__feature-list {
+        position: relative;
+        z-index: 1;
+        padding: 5px;
+        border: 1px solid var(--hud-line);
+        border-radius: var(--cpk-inspector-shell-radius);
+        background: var(--hud-fill);
+        backdrop-filter: var(--hud-blur);
+        -webkit-backdrop-filter: var(--hud-blur);
+        box-shadow: 0 10px 28px rgb(46 37 91 / 0.16);
       }
 
       .cpk-launcher-hud__row {
         position: relative;
         display: grid;
-        grid-template-columns: 1fr 28px;
-        align-items: start;
-        border-radius: 7px;
+        grid-template-columns: minmax(0, 1fr) auto;
+        align-items: center;
+        min-height: 54px;
+        border-radius: 9px;
         cursor: pointer;
       }
 
       .cpk-launcher-hud__row + .cpk-launcher-hud__row {
-        margin-top: 1px;
+        border-top: 1px solid var(--hud-line);
+        border-radius: 0 0 9px 9px;
       }
 
       .cpk-launcher-hud__row:hover,
-      .cpk-launcher-hud__row:focus-within,
-      .cpk-launcher-hud__row[data-cpk-hud-help="open"] {
+      .cpk-launcher-hud__row:focus-within {
         background: rgb(255 255 255 / 0.06);
       }
 
       .cpk-launcher-hud[data-color-scheme="light"] .cpk-launcher-hud__row:hover,
-      .cpk-launcher-hud[data-color-scheme="light"] .cpk-launcher-hud__row:focus-within,
-      .cpk-launcher-hud[data-color-scheme="light"] .cpk-launcher-hud__row[data-cpk-hud-help="open"] {
-        background: #f0f0f4;
+      .cpk-launcher-hud[data-color-scheme="light"] .cpk-launcher-hud__row:focus-within {
+        background: #f7f5ff;
+      }
+
+      .cpk-launcher-hud__primary {
+        position: relative;
+        display: flex;
+        min-width: 0;
       }
 
       .cpk-launcher-hud__action {
         display: flex;
+        width: 100%;
         gap: 8px;
-        min-height: 32px;
+        min-height: 52px;
         align-items: center;
-        padding: 6px 8px;
+        padding: 7px 4px;
         border: 0;
-        border-radius: 7px;
+        border-radius: 9px;
         background: transparent;
         color: #fff;
         font-family: inherit;
@@ -7956,129 +8467,243 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
         cursor: pointer;
       }
 
+      .cpk-launcher-hud__label {
+        min-width: 0;
+      }
+
+      .cpk-launcher-hud__feature-icon {
+        display: inline-flex;
+        width: 28px;
+        height: 32px;
+        flex: none;
+        align-items: center;
+        justify-content: center;
+        background: transparent;
+        color: var(--hud-accent);
+      }
+
+      .cpk-launcher-hud__feature-icon svg {
+        width: 17px;
+        height: 17px;
+        stroke-width: 1.8;
+      }
+
       .cpk-launcher-hud[data-color-scheme="light"] .cpk-launcher-hud__action {
         color: #010507;
       }
 
-      /* Stretch the row action over the whole tab, including the detail
-         copy. The help mark sits above this layer. */
+      /* Stretch the row action over the whole tab. The icon controls sit
+         above this layer and keep their own focused interactions. */
       .cpk-launcher-hud__action::after {
         content: "";
         position: absolute;
         inset: 0;
       }
 
-      .cpk-launcher-hud__check {
-        flex: none;
-        width: 14px;
-        height: 14px;
-        color: #34d399;
-      }
-
-      .cpk-launcher-hud__help {
+      .cpk-launcher-hud__controls {
         position: relative;
         z-index: 1;
+        display: flex;
+        gap: 0;
+        align-items: center;
+        padding-right: 5px;
+      }
+
+      .cpk-launcher-hud__learn-more {
         display: inline-flex;
-        width: 28px;
-        height: 32px;
+        width: 24px;
+        height: 44px;
         align-items: center;
         justify-content: center;
         padding: 0;
         border: 0;
         background: transparent;
-        color: rgb(255 255 255 / 0.78);
-        font-size: 12px;
-        font-weight: 600;
+        color: rgb(190 194 255 / 0.72);
         cursor: pointer;
       }
 
-      .cpk-launcher-hud__help span {
-        display: inline-flex;
+      .cpk-launcher-hud__learn-more:hover,
+      .cpk-launcher-hud__learn-more:focus-visible {
+        color: #fff;
+      }
+
+      .cpk-launcher-hud[data-color-scheme="light"]
+        .cpk-launcher-hud__learn-more {
+        color: #777080;
+      }
+
+      .cpk-launcher-hud[data-color-scheme="light"]
+        .cpk-launcher-hud__learn-more:hover,
+      .cpk-launcher-hud[data-color-scheme="light"]
+        .cpk-launcher-hud__learn-more:focus-visible {
+        color: #4b416b;
+      }
+
+      .cpk-launcher-hud__learn-more svg {
         width: 16px;
         height: 16px;
+        stroke-width: 1.8;
+      }
+
+      .cpk-launcher-hud__toggle {
+        display: inline-flex;
+        width: 38px;
+        height: 44px;
         align-items: center;
         justify-content: center;
-        border: 1px dotted rgb(190 194 255 / 0.55);
+        padding: 0;
+        border: 0;
+        background: transparent;
+        color: rgb(255 255 255 / 0.78);
+        font-size: 12px;
+        font-weight: 600;
+        cursor: pointer;
+      }
+
+      .cpk-launcher-hud__toggle:disabled {
+        cursor: not-allowed;
+        opacity: 1;
+      }
+
+      .cpk-launcher-hud__toggle-track {
+        position: relative;
+        display: block;
+        width: 34px;
+        height: 20px;
+        border: 1px solid rgb(190 194 255 / 0.38);
+        border-radius: 999px;
+        background: rgb(255 255 255 / 0.08);
+        transition:
+          border-color 120ms ease,
+          background 120ms ease;
+      }
+
+      .cpk-launcher-hud__toggle-track::after {
+        content: "";
+        position: absolute;
+        top: 2px;
+        left: 2px;
+        width: 14px;
+        height: 14px;
         border-radius: 50%;
-        line-height: 1;
+        background: #8c8e99;
+        transition:
+          background 120ms ease,
+          transform 120ms ease;
       }
 
-      .cpk-launcher-hud[data-color-scheme="light"] .cpk-launcher-hud__help {
-        color: #68686e;
+      .cpk-launcher-hud__toggle[data-enabled="true"]
+        .cpk-launcher-hud__toggle-track {
+        border-color: var(--hud-accent);
+        background: color-mix(in srgb, var(--hud-accent) 76%, transparent);
+      }
+
+      .cpk-launcher-hud__toggle[data-enabled="true"]
+        .cpk-launcher-hud__toggle-track::after {
+        background: #fff;
+        transform: translateX(14px);
+      }
+
+      .cpk-launcher-hud[data-color-scheme="light"]
+        .cpk-launcher-hud__toggle-track {
+        border-color: #c9c9d2;
+        background: #e7e7ec;
+      }
+
+      .cpk-launcher-hud[data-color-scheme="light"]
+        .cpk-launcher-hud__toggle-track::after {
+        background: #777780;
+      }
+
+      .cpk-launcher-hud[data-color-scheme="light"]
+        .cpk-launcher-hud__toggle[data-enabled="true"]
+        .cpk-launcher-hud__toggle-track {
+        border-color: #6757b0;
+        background: #7563c7;
+      }
+
+      .cpk-launcher-hud[data-color-scheme="light"]
+        .cpk-launcher-hud__toggle[data-enabled="true"]
+        .cpk-launcher-hud__toggle-track::after {
+        background: #fff;
       }
 
-      .cpk-launcher-hud__help:focus-visible,
+      .cpk-launcher-hud__toggle:focus-visible,
+      .cpk-launcher-hud__learn-more:focus-visible,
       .cpk-launcher-hud__action:focus-visible {
         outline: 2px solid #bec2ff;
         outline-offset: 1px;
       }
 
-      .cpk-launcher-hud__detail {
-        grid-column: 1 / -1;
-        max-height: 0;
-        margin: 0;
-        padding: 0 8px;
-        overflow: hidden;
-        color: rgb(255 255 255 / 0.78);
-        font-size: 11px;
-        font-weight: 400;
-        line-height: 1.4;
+      .cpk-launcher-hud__tooltip {
+        position: absolute;
+        top: 50%;
+        z-index: 30;
+        width: max-content;
+        max-width: min(220px, 52vw);
+        padding: 7px 9px;
+        border: 1px solid #3a3d49;
+        border-radius: 4px;
+        background: #15171e;
+        color: #f3f4f8;
+        box-shadow: 0 8px 20px rgb(1 5 7 / 0.18);
+        font-size: 10px;
+        font-weight: 500;
+        line-height: 1.45;
         opacity: 0;
         pointer-events: none;
-        transform: translateY(-6px);
+        transform: translate(3px, -50%);
+        white-space: normal;
         transition:
-          max-height 200ms cubic-bezier(0.16, 1, 0.3, 1),
-          opacity 150ms ease-out,
-          transform 200ms cubic-bezier(0.16, 1, 0.3, 1),
-          padding-bottom 200ms cubic-bezier(0.16, 1, 0.3, 1);
+          opacity 120ms ease,
+          transform 120ms ease;
       }
 
-      .cpk-launcher-hud[data-color-scheme="light"] .cpk-launcher-hud__detail {
-        color: #68686e;
+      .cpk-launcher-hud__row:has(.cpk-launcher-hud__learn-more:hover)
+        .cpk-launcher-hud__tooltip,
+      .cpk-launcher-hud__row:has(.cpk-launcher-hud__learn-more:focus-visible)
+        .cpk-launcher-hud__tooltip {
+        opacity: 1;
+        transform: translate(0, -50%);
       }
 
-      .cpk-launcher-hud__row:hover .cpk-launcher-hud__detail,
-      .cpk-launcher-hud__row:focus-within .cpk-launcher-hud__detail,
-      .cpk-launcher-hud__row[data-cpk-hud-help="open"] .cpk-launcher-hud__detail {
-        max-height: 72px;
-        padding: 0 8px 7px;
-        opacity: 1;
-        transform: none;
+      .cpk-launcher-hud[data-cpk-hud-side="left"] .cpk-launcher-hud__tooltip {
+        right: calc(100% + 8px);
+        left: auto;
+      }
+
+      .cpk-launcher-hud[data-cpk-hud-side="right"] .cpk-launcher-hud__tooltip {
+        right: auto;
+        left: calc(100% + 8px);
+        transform: translate(-3px, -50%);
+      }
+
+      .cpk-launcher-hud[data-cpk-hud-side="right"]
+        .cpk-launcher-hud__row:has(.cpk-launcher-hud__learn-more:hover)
+        .cpk-launcher-hud__tooltip,
+      .cpk-launcher-hud[data-cpk-hud-side="right"]
+        .cpk-launcher-hud__row:has(.cpk-launcher-hud__learn-more:focus-visible)
+        .cpk-launcher-hud__tooltip {
+        transform: translate(0, -50%);
       }
 
       @media (prefers-reduced-motion: reduce) {
         .cpk-launcher-hud,
-        .cpk-launcher-hud__detail {
+        .cpk-launcher-hud__tooltip {
           transition: none;
         }
       }
 
       /*
        * On mount, borrow the hover HUD for one short introduction. The card
-       * establishes the destination first; its rows then resolve in order so
-       * the eye can count the available features instead of receiving one
-       * undifferentiated block. Only opacity and transform move.
+       * establishes the destination first; notification, features, and hide
+       * action then fall into place from top to bottom. Only opacity and
+       * transform move.
        */
       @keyframes cpk-launcher-hud-intro {
         0% {
           opacity: 0;
-          transform: translateX(8px);
-        }
-        8%,
-        88% {
-          opacity: 1;
-          transform: none;
-        }
-        100% {
-          opacity: 0;
-          transform: translateX(4px);
-        }
-      }
-
-      @keyframes cpk-launcher-hud-intro-right {
-        0% {
-          opacity: 0;
-          transform: translateX(-8px);
+          transform: translateY(-4px);
         }
         8%,
         88% {
@@ -8087,14 +8712,14 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
         }
         100% {
           opacity: 0;
-          transform: translateX(-4px);
+          transform: translateY(3px);
         }
       }
 
-      @keyframes cpk-launcher-hud-row-online {
+      @keyframes cpk-launcher-hud-waterfall {
         from {
           opacity: 0;
-          transform: translateY(4px);
+          transform: translateY(-8px);
         }
         to {
           opacity: 1;
@@ -8102,48 +8727,33 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
         }
       }
 
-      @keyframes cpk-launcher-hud-check-online {
-        from {
-          opacity: 0;
-          transform: scale(0.65);
-        }
-        to {
-          opacity: 1;
-          transform: scale(1);
-        }
-      }
-
       .cpk-launcher-hud[data-cpk-hud-intro="true"] {
-        animation: cpk-launcher-hud-intro
-          var(--cpk-launcher-hud-intro-duration)
-          cubic-bezier(0.16, 1, 0.3, 1) both;
-      }
-
-      .cpk-launcher-hud[data-cpk-hud-intro="true"][data-cpk-hud-side="right"] {
-        animation-name: cpk-launcher-hud-intro-right;
-      }
-
-      .cpk-launcher-hud[data-cpk-hud-intro="true"]
-        .cpk-launcher-hud__row {
-        animation: cpk-launcher-hud-row-online
-          var(--cpk-launcher-hud-row-duration)
+        animation: cpk-launcher-hud-intro var(--cpk-launcher-hud-intro-duration)
           cubic-bezier(0.16, 1, 0.3, 1) both;
-        animation-delay: var(--cpk-hud-row-delay);
       }
 
       .cpk-launcher-hud[data-cpk-hud-intro="true"]
-        .cpk-launcher-hud__check {
-        animation: cpk-launcher-hud-check-online 220ms
+        :is(
+          .cpk-launcher-hud__masthead,
+          .cpk-launcher-hud__feature-list,
+          .cpk-launcher-hud__row,
+          .cpk-launcher-hud__dismiss-day
+        ) {
+        animation: cpk-launcher-hud-waterfall
+          var(--cpk-launcher-hud-waterfall-duration)
           cubic-bezier(0.16, 1, 0.3, 1) both;
-        animation-delay: calc(var(--cpk-hud-row-delay) + 90ms);
+        animation-delay: var(--cpk-hud-waterfall-delay);
       }
 
       @media (prefers-reduced-motion: reduce) {
         .cpk-launcher-hud[data-cpk-hud-intro="true"],
         .cpk-launcher-hud[data-cpk-hud-intro="true"]
-          .cpk-launcher-hud__row,
-        .cpk-launcher-hud[data-cpk-hud-intro="true"]
-          .cpk-launcher-hud__check {
+          :is(
+            .cpk-launcher-hud__masthead,
+            .cpk-launcher-hud__feature-list,
+            .cpk-launcher-hud__row,
+            .cpk-launcher-hud__dismiss-day
+          ) {
           animation: none !important;
           opacity: 1;
           transform: none;
@@ -8187,15 +8797,15 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
       }
 
       .inspector-account-strip {
-        background: linear-gradient(
-          90deg,
-          #ffffff 0%,
-          #f3f1ff 58%,
-          #eefbf7 100%
-        ) !important;
+        background: #f7f6fd !important;
         color: #010507 !important;
       }
 
+      .inspector-window[data-color-scheme="dark"] .drag-handle,
+      .inspector-window[data-color-scheme="dark"] .inspector-account-strip {
+        background: #15171e !important;
+      }
+
       /* ── Tab buttons ─────────────────────────────────────────────── */
       /*
        * Named classes owned by this component — no Tailwind conflict.
@@ -8310,7 +8920,9 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
       .inspector-sidebar[data-icon-rail="true"]
         .inspector-context-dropdown-icon
         svg,
-      .inspector-sidebar[data-icon-rail="true"] .inspector-agent-placeholder svg {
+      .inspector-sidebar[data-icon-rail="true"]
+        .inspector-agent-placeholder
+        svg {
         width: 18px !important;
         height: 18px !important;
         overflow: visible !important;
@@ -8556,11 +9168,12 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 			const viteHot = import.meta.hot;
 			if (viteHot) viteHot.on("vite:beforeUpdate", this.handleAppBeforeUnload);
 			this.hydrateStateFromStorageEarly();
+			this.refreshInspectorDismissalState();
 			this.subscribeToSystemColorScheme();
 			this.exampleTourDismissed = this.readThreadsExampleTourDismissed();
 			clearLegacyAnnouncementReadState();
 			this.tryAutoAttachCore();
-			this.ensureAnnouncementLoading();
+			if (!this.isInspectorDismissed) this.ensureAnnouncementLoading();
 			this.subscribeToInspectorThreadBridge();
 		}
 		this.requestUpdate();
@@ -8586,15 +9199,18 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 		}
 		this.clearIconRailContextCloseTimer();
 		this.unsubscribeFromInspectorThreadBridge();
-		this.threadsSetupPromptCopyGeneration += 1;
-		if (this.threadsSetupPromptCopyResetTimeoutId !== null) {
-			window.clearTimeout(this.threadsSetupPromptCopyResetTimeoutId);
-			this.threadsSetupPromptCopyResetTimeoutId = null;
-		}
-		this.threadsSetupPromptCopyState = "idle";
+		this.stopIntelligenceStory();
+		this.clearIntelligencePromptReset();
+		this.homeFeaturePromptCopyGeneration += 1;
+		if (this.homeFeaturePromptCopyResetTimeoutId !== null) {
+			window.clearTimeout(this.homeFeaturePromptCopyResetTimeoutId);
+			this.homeFeaturePromptCopyResetTimeoutId = null;
+		}
+		this.homeFeaturePromptCopyState = null;
 		this.stopSignalPulse();
 		this.cancelGestureTail();
 		this.cancelLauncherHudIntro();
+		this.clearInspectorDismissalTimer();
 		this.cancelThreadRefreshDebounce();
 		this.clearInspectorUsageRefresh();
 		this.cleanupThreadsExampleOverviewVideo();
@@ -8629,11 +9245,13 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 		this.applyAnchorPosition("button");
 		if (this.dockMode === "floating") if (this.hasCustomPosition.window) this.applyAnchorPosition("window");
 		else this.centerContext("window");
-		this.ensureAnnouncementLoading();
+		if (this.isInspectorDismissed) this.persistState();
+		else this.ensureAnnouncementLoading();
 		this.updateHostTransform(this.isOpen ? "window" : "button");
-		this.scheduleLauncherHudIntro();
+		if (!this.isInspectorDismissed) this.scheduleLauncherHudIntro();
 	}
 	render() {
+		if (this.isInspectorDismissed) return nothing;
 		return this.isOpen ? html`
           <div data-inspector-portal-anchor></div>
         ` : this.renderButton();
@@ -8655,6 +9273,7 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 		this.maybeCompleteEventErrorView();
 		this.flushErrorLandingScroll();
 		this.maybeTrackHomeViewed();
+		this.syncIntelligenceStory();
 		if (!this.isOpen) {
 			this.lastScrolledAgentNavigationLayout = null;
 			return;
@@ -8725,7 +9344,7 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
           aria-expanded=${this.launcherHudOpen ? "true" : "false"}
           aria-controls=${this.launcherHudOpen ? "cpk-launcher-hud" : nothing}
           aria-label=${signal && signal.tone === "error" ? `${LAUNCHER_BASE_LABEL}, ${signal.accessibleLabel}` : LAUNCHER_BASE_LABEL}
-          title=${activeSignal === NEWS_SIGNAL_ID ? `${WHATS_NEW_VIEW_LABEL} — unread` : nothing}
+          title=${HUD_INSPECTOR_LABEL}
           data-drag-context="button"
           data-cpk-signal=${signal ? signal.tone : nothing}
           data-cpk-signal-pulsing=${activeSignal !== null && this.pulsingSignal === activeSignal ? "true" : nothing}
@@ -8810,14 +9429,78 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
       </span>
     `;
 	}
+	/** Whether a persisted temporary dismissal is still active. */
+	get isInspectorDismissed() {
+		return this.inspectorDismissedUntil !== null && this.inspectorDismissedUntil > Date.now();
+	}
+	/** Cancel the timer that restores Inspector after a temporary dismissal. */
+	clearInspectorDismissalTimer() {
+		if (this.inspectorDismissalTimer === null) return;
+		clearTimeout(this.inspectorDismissalTimer);
+		this.inspectorDismissalTimer = null;
+	}
+	/** Schedule Inspector to return just after its persisted deadline. */
+	scheduleInspectorDismissalExpiry() {
+		this.clearInspectorDismissalTimer();
+		if (this.inspectorDismissedUntil === null) return;
+		const delay = Math.max(0, this.inspectorDismissedUntil - Date.now() + 25);
+		this.inspectorDismissalTimer = setTimeout(() => {
+			this.inspectorDismissalTimer = null;
+			this.refreshInspectorDismissalState();
+		}, delay);
+	}
+	/** Reconcile this tab with host-scoped dismissal state from other ports. */
+	refreshInspectorDismissalState() {
+		const hadDismissal = this.inspectorDismissedUntil !== null;
+		this.inspectorDismissedUntil = loadInspectorDismissedUntil();
+		this.clearInspectorDismissalTimer();
+		if (this.inspectorDismissedUntil !== null) {
+			this.closePopOut();
+			this.closeInspector();
+			this.scheduleInspectorDismissalExpiry();
+			if (!hadDismissal) this.requestUpdate();
+			return;
+		}
+		if (!hadDismissal || !this.isConnected) return;
+		this.ensureAnnouncementLoading();
+		this.requestUpdate();
+		this.updateComplete.then(() => {
+			if (!this.isConnected || this.isInspectorDismissed) return;
+			this.measureContext("button");
+			this.applyAnchorPosition("button");
+			this.scheduleLauncherHudIntro();
+			this.flushPendingSignalPulse();
+		});
+	}
+	/** Hide Inspector for a supported duration and persist it for this host. */
+	dismissInspectorFor(duration) {
+		const now = Date.now();
+		const until = now + INSPECTOR_DISMISSAL_MS[duration];
+		saveInspectorDismissedUntil(until, now);
+		this.inspectorDismissedUntil = until;
+		this.scheduleInspectorDismissalExpiry();
+		this.settingsOpen = false;
+		this.closeLauncherHud();
+		this.stopSignalPulse();
+		this.cancelGestureTail();
+		this.cancelLauncherHudIntro();
+		this.closePopOut();
+		if (this.isOpen) {
+			this.closeInspector();
+			return;
+		}
+		this.persistState();
+		this.requestUpdate();
+	}
 	isLauncherHudBlocked() {
-		return this.gestureSignal !== null;
+		return this.gestureSignal !== null || this.isInspectorDismissed;
 	}
 	scheduleLauncherHudIntro(delay = LAUNCHER_HUD_INTRO_MS.delay) {
+		if (this.isInspectorDismissed) return;
 		if (this.launcherHudIntroStartTimer !== null) clearTimeout(this.launcherHudIntroStartTimer);
 		this.launcherHudIntroStartTimer = setTimeout(() => {
 			this.launcherHudIntroStartTimer = null;
-			if (!this.isConnected || this.isOpen) return;
+			if (!this.isConnected || this.isOpen || this.isInspectorDismissed) return;
 			if (this.isLauncherHudBlocked()) {
 				this.scheduleLauncherHudIntro(LAUNCHER_HUD_INTRO_MS.blockedRetry);
 				return;
@@ -8830,7 +9513,6 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 				this.launcherHudIntroEndTimer = null;
 				this.launcherHudIntro = false;
 				this.launcherHudOpen = false;
-				this.launcherHudHelp = null;
 				this.requestUpdate();
 			}, LAUNCHER_HUD_INTRO_MS.duration);
 		}, delay);
@@ -8881,67 +9563,78 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 			clearTimeout(this.launcherHudCloseTimer);
 			this.launcherHudCloseTimer = null;
 		}
-		if (!this.launcherHudOpen && this.launcherHudHelp === null) return;
+		if (!this.launcherHudOpen) return;
 		this.launcherHudOpen = false;
-		this.launcherHudHelp = null;
 		this.requestUpdate();
 	}
-	renderHudCheck() {
-		return html`
-      <svg
-        class="cpk-launcher-hud__check"
-        viewBox="0 0 16 16"
-        aria-hidden="true"
-        focusable="false"
-        data-cpk-hud-check
-      >
-        <path
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          d="M3 8.5 6.5 12 13 4.5"
-        />
-      </svg>
-    `;
+	getUnreadAnnouncementTitle() {
+		if (!this.newsSignalArmed || !this.announcementLoaded) return null;
+		const title = this.announcementPreviewText?.trim() || "New in CopilotKit";
+		const titleCharacters = Array.from(title);
+		return titleCharacters.length > HUD_ANNOUNCEMENT_TITLE_LIMIT ? `${titleCharacters.slice(0, HUD_ANNOUNCEMENT_TITLE_LIMIT).join("").trimEnd()}...` : title;
 	}
 	renderHudRow(args) {
-		const helpOpen = this.launcherHudHelp === args.id;
 		const detailId = `cpk-hud-detail-${args.id}`;
 		return html`
       <li
         class="cpk-launcher-hud__row"
         data-cpk-hud-row=${args.id}
-        data-cpk-hud-help=${helpOpen ? "open" : nothing}
-        style=${styleMap({
-			"--cpk-hud-row-index": `${args.introIndex}`,
-			"--cpk-hud-row-delay": `${LAUNCHER_HUD_INTRO_MS.rowStart + args.introIndex * LAUNCHER_HUD_INTRO_MS.rowStagger}ms`
-		})}
+        data-cpk-hud-action-kind="navigate"
+        style=${styleMap({ "--cpk-hud-waterfall-delay": launcherHudWaterfallDelay(args.introIndex) })}
         @click=${(event) => this.handleHudRowClick(event, args.id)}
       >
-        <button
-          type="button"
-          class="cpk-launcher-hud__action"
-          data-cpk-hud-action
-          aria-describedby=${detailId}
-          @click=${(event) => this.handleHudActionClick(event, args.id)}
-          @pointerdown=${(event) => event.stopPropagation()}
-        >
-          ${args.connected ? this.renderHudCheck() : nothing}${args.label}
-        </button>
-        <button
-          type="button"
-          class="cpk-launcher-hud__help"
-          aria-expanded=${helpOpen ? "true" : "false"}
-          aria-controls=${detailId}
-          aria-label=${`About ${args.label}`}
-          @click=${(event) => this.handleHudHelpClick(event, args.id)}
-          @pointerdown=${(event) => event.stopPropagation()}
-        >
-          <span aria-hidden="true">?</span>
-        </button>
-        <p class="cpk-launcher-hud__detail" id=${detailId}>${args.detail}</p>
+        <span class="cpk-launcher-hud__primary">
+          <button
+            type="button"
+            class="cpk-launcher-hud__action"
+            data-cpk-hud-action
+            aria-label=${`Open ${args.label} in Inspector`}
+            @click=${(event) => this.handleHudActionClick(event, args.id)}
+            @pointerdown=${(event) => event.stopPropagation()}
+          >
+            <span
+              class="cpk-launcher-hud__feature-icon"
+              data-cpk-hud-icon=${args.id}
+              aria-hidden="true"
+              >${this.renderIcon(args.icon)}</span
+            >
+            <span class="cpk-launcher-hud__label">${args.label}</span>
+          </button>
+          <span
+            class="cpk-launcher-hud__tooltip"
+            id=${detailId}
+            role="tooltip"
+            >${HUD_LEARN_MORE_LABEL}</span
+          >
+        </span>
+        <span class="cpk-launcher-hud__controls">
+          <button
+            type="button"
+            class="cpk-launcher-hud__learn-more"
+            data-cpk-hud-learn-more=${args.id}
+            aria-label=${`Learn more about ${args.label}`}
+            aria-describedby=${detailId}
+            @click=${(event) => this.handleHudActionClick(event, args.id)}
+            @pointerdown=${(event) => event.stopPropagation()}
+          >
+            ${this.renderIcon("CircleHelp")}
+          </button>
+          <button
+            type="button"
+            class="cpk-launcher-hud__toggle"
+            data-cpk-hud-toggle=${args.id}
+            data-enabled=${args.connected ? "true" : "false"}
+            aria-label=${args.connected ? `${args.label} is enabled` : `Open ${args.label} in Inspector`}
+            ?disabled=${args.connected}
+            @click=${(event) => this.handleHudActionClick(event, args.id)}
+            @pointerdown=${(event) => event.stopPropagation()}
+          >
+            <span
+              class="cpk-launcher-hud__toggle-track"
+              aria-hidden="true"
+            ></span>
+          </button>
+        </span>
       </li>
     `;
 	}
@@ -8950,53 +9643,92 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 		const homeModel = this.getHomeModel();
 		const threadsOn = homeModel.services.some((service) => service.id === "threads" && service.enabled);
 		const learningOn = homeModel.services.some((service) => service.id === "memory" && service.enabled);
-		const intelligenceOn = homeModel.hero.connection === "connected";
+		const announcementTitle = this.getUnreadAnnouncementTitle();
+		const featureBlockIntroIndex = announcementTitle ? 1 : 0;
 		return html`
       <div
         class="cpk-launcher-hud"
         id="cpk-launcher-hud"
         data-cpk-launcher-hud
         data-cpk-hud-side=${this.launcherHudSide}
+        data-cpk-hud-vertical=${this.contextState.button.anchor.vertical}
         data-cpk-hud-intro=${this.launcherHudIntro ? "true" : nothing}
         data-color-scheme=${this.colorScheme}
         style=${styleMap({
 			"--cpk-launcher-hud-intro-duration": `${LAUNCHER_HUD_INTRO_MS.duration}ms`,
-			"--cpk-launcher-hud-row-duration": `${LAUNCHER_HUD_INTRO_MS.rowDuration}ms`
+			"--cpk-launcher-hud-waterfall-duration": `${LAUNCHER_HUD_INTRO_MS.waterfallDuration}ms`
 		})}
       >
         <span class="cpk-launcher-hud__arrow" aria-hidden="true"></span>
         <div class="cpk-launcher-hud__card">
-          <ul class="cpk-launcher-hud__list" role="list">
-            ${this.renderHudRow({
-			id: "inspector",
-			label: HUD_OPEN_INSPECTOR_LABEL,
-			detail: HUD_OPEN_INSPECTOR_DETAIL,
-			introIndex: 0
-		})}
-          </ul>
-          <ul class="cpk-launcher-hud__list" role="list">
+          ${announcementTitle ? html`
+                  <div
+                    class="cpk-launcher-hud__masthead"
+                    style=${styleMap({ "--cpk-hud-waterfall-delay": launcherHudWaterfallDelay(0) })}
+                  >
+                    <div class="cpk-launcher-hud__news-wrap">
+                      <button
+                        type="button"
+                        class="cpk-launcher-hud__news"
+                        data-cpk-hud-news
+                        aria-label=${`Open new notification: ${announcementTitle}`}
+                        @click=${this.handleHudNewsClick}
+                        @pointerdown=${(event) => event.stopPropagation()}
+                      >
+                        <span
+                          class="cpk-launcher-hud__news-label"
+                          data-cpk-hud-news-label
+                          aria-hidden="true"
+                          >New</span
+                        >
+                        <span class="cpk-launcher-hud__news-title"
+                          >${announcementTitle}</span
+                        >
+                      </button>
+                      <button
+                        type="button"
+                        class="cpk-launcher-hud__news-dismiss"
+                        data-cpk-hud-news-dismiss
+                        aria-label="Dismiss notification"
+                        @click=${this.handleHudNewsDismissClick}
+                        @pointerdown=${(event) => event.stopPropagation()}
+                      >
+                        ${this.renderIcon("X")}
+                      </button>
+                    </div>
+                  </div>
+                ` : nothing}
+          <ul
+            class="cpk-launcher-hud__list cpk-launcher-hud__feature-list"
+            role="list"
+            style=${styleMap({ "--cpk-hud-waterfall-delay": launcherHudWaterfallDelay(featureBlockIntroIndex) })}
+          >
             ${this.renderHudRow({
 			id: "threads",
-			label: threadsOn ? HUD_THREADS_ON_LABEL : HUD_THREADS_OFF_LABEL,
-			detail: threadsOn ? HUD_THREADS_ON_DETAIL : HUD_THREADS_OFF_DETAIL,
+			label: HUD_THREADS_LABEL,
+			icon: "MessageSquare",
 			connected: threadsOn,
-			introIndex: 1
-		})}
-            ${this.renderHudRow({
-			id: "intelligence",
-			label: intelligenceOn ? HUD_INTELLIGENCE_ON_LABEL : HUD_INTELLIGENCE_OFF_LABEL,
-			detail: intelligenceOn ? HUD_INTELLIGENCE_ON_DETAIL : HUD_INTELLIGENCE_OFF_DETAIL,
-			connected: intelligenceOn,
-			introIndex: 2
+			introIndex: featureBlockIntroIndex + 1
 		})}
             ${this.renderHudRow({
 			id: "learning",
-			label: learningOn ? HUD_LEARNING_ON_LABEL : HUD_LEARNING_OFF_LABEL,
-			detail: learningOn ? HUD_LEARNING_ON_DETAIL : HUD_LEARNING_OFF_DETAIL,
+			label: HUD_LEARNING_LABEL,
+			icon: "Brain",
 			connected: learningOn,
-			introIndex: 3
+			introIndex: featureBlockIntroIndex + 2
 		})}
           </ul>
+          <button
+            type="button"
+            class="cpk-launcher-hud__dismiss-day"
+            data-cpk-dismiss-inspector="day"
+            style=${styleMap({ "--cpk-hud-waterfall-delay": launcherHudWaterfallDelay(featureBlockIntroIndex + 3) })}
+            @click=${this.handleHudDismissDayClick}
+            @pointerdown=${(event) => event.stopPropagation()}
+          >
+            <span aria-hidden="true">${this.renderIcon("Clock")}</span>
+            Hide Inspector for a day
+          </button>
         </div>
       </div>
     `;
@@ -9083,12 +9815,12 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
                       </span>
                       <span class="inspector-nav-label">${item.label}</span>
                       ${marker ? html`
-                              <span
-                                class="inspector-nav-signal-dot"
-                                data-cpk-signal-tone=${marker.tone}
-                                aria-hidden="true"
-                              ></span>
-                            ` : nothing}
+                            <span
+                              class="inspector-nav-signal-dot"
+                              data-cpk-signal-tone=${marker.tone}
+                              aria-hidden="true"
+                            ></span>
+                          ` : nothing}
                     </button>
                   `;
 			})}
@@ -9217,7 +9949,7 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 				type: lastRuntimeEvent.type,
 				timestamp: lastRuntimeEvent.timestamp
 			} : void 0,
-			memoriesOn: this._memoriesAvailable,
+			memoriesOn: this._memorySubscribed && !this._memoriesLoading && this._memoriesAvailable,
 			a2uiOn: this._core?.a2uiEnabled === true,
 			openGenUiOn: this._core?.openGenerativeUIEnabled === true,
 			suggestionsOn: this._core?.suggestions === true,
@@ -9329,23 +10061,37 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 		const connected = model.hero.connection === "connected";
 		const action = model.hero.action;
 		const renewing = action?.kind === "renew";
+		const installing = !connected && !renewing;
 		return html`
       <section
         class="inspector-home-section inspector-intelligence-hud"
         data-inspector-home-card="intelligence"
         data-state=${connected ? "connected" : "disconnected"}
+        data-mode=${connected ? "connected" : renewing ? "renew" : "install"}
         aria-label="Intelligence ${connected ? "connected" : renewing ? "plan expired" : "not enabled"}"
       >
         <header class="inspector-intelligence-hud-header">
           <div class="inspector-intelligence-hud-heading">
             <h2 class="inspector-home-section-title">
+              ${installing ? html`
+                      <img
+                        class="inspector-intelligence-mark"
+                        src=${inspector_logo_kite_default}
+                        alt=""
+                        aria-hidden="true"
+                      />
+                    ` : nothing}
               ${connected ? "Intelligence" : model.hero.title}
             </h2>
-            ${connected ? nothing : html`
-                  <p class="inspector-intelligence-hud-description">
-                    ${model.hero.body}
-                  </p>
-                `}
+            ${connected ? nothing : installing ? html`
+                    <p class="inspector-intelligence-sr-summary">
+                      ${model.hero.body}
+                    </p>
+                  ` : html`
+                    <p class="inspector-intelligence-hud-description">
+                      ${model.hero.body}
+                    </p>
+                  `}
           </div>
           <div class="inspector-intelligence-hud-header-actions">
             ${connected || renewing ? html`
@@ -9357,7 +10103,7 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
                     ${connected ? "Connected" : "Plan expired"}
                   </span>
                 ` : nothing}
-            ${!connected && action ? html`
+            ${renewing && action ? html`
                   <a
                     class="inspector-intelligence-hud-action inspector-intelligence-hud-connect-action"
                     data-inspector-home-intelligence-action=${action.kind}
@@ -9371,9 +10117,18 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
                     ${action.label} ${this.renderIcon("ArrowUpRight")}
                   </a>
                 ` : nothing}
+            ${installing ? this.renderIntelligenceInstallActions(action) : nothing}
           </div>
         </header>
 
+        ${installing && this.promptCopyState === "failed" ? html`
+                <code
+                  class="inspector-intelligence-install-fallback"
+                  tabindex="0"
+                  >${createOnboardingPrompt(this.getOnboardingRunId())}</code
+                >
+              ` : nothing}
+        ${installing ? this.renderIntelligenceStory() : nothing}
         ${connected ? html`
               <div
                 class="inspector-intelligence-hud-details"
@@ -9602,23 +10357,67 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 	renderHomeFeatures(model) {
 		const enabledServices = model.services.filter((service) => service.enabled);
 		const disabledServices = model.services.filter((service) => !service.enabled);
-		const renderService = (service) => html`
-      <a
+		const renderService = (service) => {
+			const copyState = this.homeFeaturePromptCopyState?.serviceId === service.id ? this.homeFeaturePromptCopyState.state : "idle";
+			const stateDescription = `${service.label} is ${service.enabled ? "enabled in your runtime" : "not enabled in your runtime"}`;
+			const copyLabel = copyState === "copied" ? "Copied" : copyState === "error" ? "Copy failed" : "Copy prompt";
+			const copyTitle = copyLabel;
+			return html`
+      <div
         class="inspector-home-feature"
         data-inspector-service=${service.id}
         data-state=${service.enabled ? "on" : "off"}
-        href=${this.appendRefParam(service.docsUrl, "cpk-inspector-home")}
-        target="_blank"
-        rel="noopener noreferrer"
-        aria-label="Learn more about ${service.label}, currently ${service.enabled ? "on" : "off"}"
+        role="listitem"
       >
-        <span>${service.label}</span>
-        <small>${service.enabled ? "On" : "Off"}</small>
-        <span class="inspector-home-feature-arrow" aria-hidden="true">
-          ${this.renderIcon("ArrowUpRight")}
+        <span
+          class="inspector-home-feature-status"
+          role="img"
+          aria-label=${stateDescription}
+          title=${stateDescription}
+        >
+          <span aria-hidden="true"></span>
         </span>
-      </a>
+        <a
+          class="inspector-home-feature-label"
+          data-inspector-home-feature-docs=${service.id}
+          href=${this.appendRefParam(service.docsUrl, "cpk-inspector-home")}
+          target="_blank"
+          rel="noopener noreferrer"
+          aria-label="Open ${service.label} documentation in a new tab"
+        >
+          <span>${service.label}</span>
+          <span class="inspector-home-feature-label-icon" aria-hidden="true"
+            >${this.renderIcon("ArrowUpRight")}</span
+          >
+        </a>
+        <span class="inspector-home-feature-actions">
+          ${service.enabled ? nothing : html`
+                  <button
+                    type="button"
+                    class="inspector-home-feature-action inspector-system-health-url"
+                    data-inspector-home-feature-prompt=${service.id}
+                    data-copy-state=${copyState}
+                    data-full-value=${copyTitle}
+                    aria-label="${copyLabel} for ${service.label}"
+                    @click=${(event) => this.handleHomeFeaturePromptCopy(service, event)}
+                  >
+                    <span class="inspector-home-feature-action-icon" aria-hidden="true"
+                      >${this.renderIcon(copyState === "copied" ? "Check" : "Bot")}</span
+                    >
+                    <span class="inspector-home-feature-action-label"
+                      >${copyTitle}</span
+                    >
+                  </button>
+                `}
+          ${service.enabled ? nothing : html`
+                  <span class="sr-only" aria-live="polite">
+                    ${copyState === "copied" ? `${service.label} implementation prompt copied.` : copyState === "error" ? `Could not copy the ${service.label} implementation prompt.` : ""}
+                  </span>
+                `}
+        </span>
+      </div>
     `;
+		};
 		return html`
       <section
         class="inspector-home-section inspector-home-features"
@@ -9627,7 +10426,7 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
         <header class="inspector-home-section-header">
           <h2 class="inspector-home-section-title">Features</h2>
           <span>
-            ${enabledServices.length} active, ${disabledServices.length} off
+            ${enabledServices.length} enabled, ${disabledServices.length} available
           </span>
         </header>
         ${model.services.length === 0 ? html`
@@ -9639,13 +10438,13 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
                 <section
                   class="inspector-home-feature-group"
                   data-feature-state-group="active"
-                  aria-label="Active features"
+                  aria-label="Enabled features"
                 >
                   <header class="inspector-home-feature-group-header">
-                    <strong>Active</strong>
+                    <strong>Enabled</strong>
                     <span>${enabledServices.length}</span>
                   </header>
-                  <div class="inspector-home-feature-list">
+                  <div class="inspector-home-feature-list" role="list">
                     ${enabledServices.length > 0 ? enabledServices.map(renderService) : html`
                             <p class="inspector-home-feature-group-empty">None enabled</p>
                           `}
@@ -9654,26 +10453,437 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
                 <section
                   class="inspector-home-feature-group"
                   data-feature-state-group="available"
-                  aria-label="Available features"
+                  aria-label="Features available to add"
+                >
+                  <header class="inspector-home-feature-group-header">
+                    <strong>Available to add</strong>
+                    <span>${disabledServices.length}</span>
+                  </header>
+                  <div class="inspector-home-feature-list" role="list">
+                    ${disabledServices.length > 0 ? disabledServices.map(renderService) : html`
+                            <p class="inspector-home-feature-group-empty">Everything is active</p>
+                          `}
+                  </div>
+                </section>
+              </div>
+            `}
+      </section>
+    `;
+	}
+	showHomeFeaturePromptCopyState(serviceId, state, generation) {
+		if (!this.isConnected || generation !== this.homeFeaturePromptCopyGeneration) return;
+		if (this.homeFeaturePromptCopyResetTimeoutId !== null) window.clearTimeout(this.homeFeaturePromptCopyResetTimeoutId);
+		this.homeFeaturePromptCopyState = {
+			serviceId,
+			state
+		};
+		this.requestUpdate();
+		this.homeFeaturePromptCopyResetTimeoutId = window.setTimeout(() => {
+			if (!this.isConnected || generation !== this.homeFeaturePromptCopyGeneration) return;
+			this.homeFeaturePromptCopyState = null;
+			this.homeFeaturePromptCopyResetTimeoutId = null;
+			this.requestUpdate();
+		}, 2e3);
+	}
+	getHomeFeaturePromptTarget(serviceId) {
+		return this.getHomeModel().services.find((service) => service.id === serviceId);
+	}
+	renderFeatureSetupPrompt(serviceId, className) {
+		const service = this.getHomeFeaturePromptTarget(serviceId);
+		if (!service) return nothing;
+		const copyState = this.homeFeaturePromptCopyState?.serviceId === service.id ? this.homeFeaturePromptCopyState.state : "idle";
+		const label = copyState === "copied" ? "Copied" : copyState === "error" ? "Copy blocked" : "Copy setup prompt";
+		return html`
+      <button
+        type="button"
+        class=${className}
+        data-inspector-feature-setup-prompt=${service.id}
+        data-inspector-threads-setup-prompt=${service.id === "threads" ? "" : nothing}
+        data-copy-state=${copyState}
+        aria-label=${copyState === "copied" ? `${service.label} setup prompt copied` : copyState === "error" ? `Could not copy the ${service.label} setup prompt. Try again` : `Copy setup prompt for ${service.label}`}
+        @click=${(event) => this.handleHomeFeaturePromptCopy(service, event)}
+      >
+        ${this.renderIcon(copyState === "copied" ? "Check" : "Copy")}
+        ${label}
+      </button>
+      <span class="sr-only" aria-live="polite">
+        ${copyState === "copied" ? `${service.label} setup prompt copied.` : copyState === "error" ? `Could not copy the ${service.label} setup prompt.` : ""}
+      </span>
+    `;
+	}
+	handleHomeHeroCta(action) {
+		if (this.core?.telemetryDisabled) return;
+		trackHomeCtaClicked({ action_kind: action.kind });
+	}
+	/**
+	* The install row: copy the prompt, or fall back to the signup page.
+	*
+	* The prompt is primary and the link is secondary, which is the inversion
+	* this card exists for. Leaving for a signup page is where developers drop
+	* out; pasting into the editor they are already in is not.
+	*
+	* No third-party coding-agent logos here, unlike the Intelligence app. That
+	* app is a private hosted surface; this one is a published npm package
+	* embedded in other people's sites, and shipping Anthropic's and OpenAI's
+	* marks inside it is a trademark call that is not ours to make quietly. The
+	* helper line names the agents in text instead.
+	*/
+	renderIntelligenceInstallActions(action) {
+		const copied = this.promptCopyState === "copied";
+		const failed = this.promptCopyState === "failed";
+		return html`
+      <div
+        class="inspector-intelligence-install"
+        data-copy-state=${this.promptCopyState}
+      >
+        ${this.promptCopyState === "idle" ? action ? html`
+                  <a
+                    class="inspector-intelligence-install-secondary"
+                    data-inspector-home-intelligence-action=${action.kind}
+                    href=${action.url}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    aria-label="Set Intelligence up yourself (opens in a new tab)"
+                    style=${INTERACTIVE_FOCUS_BASE_STYLE}
+                    @click=${() => this.handleHomeHeroCta(action)}
+                  >
+                    Set it up yourself ${this.renderIcon("ArrowUpRight")}
+                  </a>
+                ` : nothing : html`
+                <p
+                  class="inspector-intelligence-install-hint"
+                  data-tone=${failed ? "error" : "success"}
+                  role="status"
+                >
+                  ${failed ? "Clipboard blocked — copy the prompt below." : "Paste it into your coding agent."}
+                </p>
+              `}
+        <button
+          type="button"
+          class="inspector-intelligence-hud-action inspector-intelligence-install-copy"
+          data-inspector-intelligence-copy-prompt
+          aria-label=${copied ? "Install prompt copied to clipboard. Paste it into your coding agent." : "Copy the Intelligence install prompt"}
+          style=${INTERACTIVE_FOCUS_BASE_STYLE}
+          @click=${this.handleIntelligencePromptCopy}
+        >
+          ${this.renderIcon(copied ? "Check" : "ClipboardCopy")}
+          ${copied ? "Prompt copied" : "Copy setup prompt"}
+        </button>
+      </div>
+    `;
+	}
+	/** One run id per element lifetime; minted on first use, never rotated. */
+	getOnboardingRunId() {
+		this.onboardingRunId ??= createOnboardingRunId();
+		return this.onboardingRunId;
+	}
+	/**
+	* Return the button and its secondary line to the idle state.
+	*
+	* Long enough to read six words, short enough that a developer who went to
+	* their editor and came back — because the paste went somewhere wrong, or
+	* the terminal is gone — finds a button that plainly invites a second press
+	* rather than a spent one wearing a checkmark.
+	*
+	* Only the copied state resets. A failed copy has the prompt on screen for
+	* manual selection, and yanking that away mid-drag would be worse than the
+	* clipboard failing in the first place.
+	*/
+	scheduleIntelligencePromptReset() {
+		this.clearIntelligencePromptReset();
+		this.promptCopyResetTimer = setTimeout(() => {
+			this.promptCopyResetTimer = null;
+			if (!this.isConnected || this.promptCopyState !== "copied") return;
+			this.promptCopyState = "idle";
+			this.requestUpdate();
+		}, PROMPT_COPY_RESET_MS);
+	}
+	clearIntelligencePromptReset() {
+		if (this.promptCopyResetTimer !== null) {
+			clearTimeout(this.promptCopyResetTimer);
+			this.promptCopyResetTimer = null;
+		}
+	}
+	/**
+	* The three-beat Intelligence story.
+	*
+	* Every beat is in the DOM at all times and switched by opacity, so the
+	* strip never reflows and screen readers get one stable structure. The
+	* caption is the live text; the beats themselves are decorative and hidden
+	* from assistive tech, because reading out a mocked code listing helps
+	* nobody.
+	*/
+	/**
+	* The rotating argument, paired to whatever the picture below is showing.
+	*
+	* Hidden from assistive tech: a sentence that replaces itself every few
+	* seconds is noise in a screen reader, so the stable summary above carries
+	* the message there instead. Both sentences are always in the DOM and only
+	* their opacity changes, so the block cannot reflow and the card never jumps
+	* height mid-loop.
+	*/
+	/**
+	* Where a slide sits relative to the one on screen.
+	*
+	* This is what makes the motion agree with the rail: the rail reads left to
+	* right, so a slide that has not been reached yet waits to the right, and one
+	* already passed leaves to the left. Deriving it from the indices rather than
+	* remembering a direction means clicking backwards through the tabs animates
+	* backwards for free, with no state to keep in sync. The loop's wrap from the
+	* last tab to the first therefore reads as a rewind, which is what it is.
+	*/
+	intelligenceSlidePosition(index) {
+		if (index === this.intelStoryBeat) return "active";
+		return index < this.intelStoryBeat ? "before" : "after";
+	}
+	/** Same rule, addressed by beat id, for the picture halves. */
+	intelligenceBeatPosition(beatId) {
+		return this.intelligenceSlidePosition(INTELLIGENCE_STORY_BEATS.findIndex((beat) => beat.id === beatId));
+	}
+	renderIntelligenceStoryCopy() {
+		return html`
+      <div
+        class="inspector-intelligence-copy"
+        data-inspector-intelligence-copy
+        data-beat=${INTELLIGENCE_STORY_BEATS[this.intelStoryBeat]?.id ?? "threads"}
+        aria-hidden="true"
+      >
+        ${INTELLIGENCE_STORY_BEATS.map((beat, index) => html`
+            <div
+              class="inspector-intelligence-copy-slide"
+              data-beat-id=${beat.id}
+              data-active=${index === this.intelStoryBeat}
+              data-position=${this.intelligenceSlidePosition(index)}
+            >
+              <strong>${beat.lead}</strong>
+              <span>${beat.support}</span>
+            </div>
+          `)}
+      </div>
+    `;
+	}
+	renderIntelligenceStory() {
+		return html`
+      <section
+        class="inspector-intelligence-story"
+        data-inspector-intelligence-story
+        data-beat=${INTELLIGENCE_STORY_BEATS[this.intelStoryBeat]?.id ?? "threads"}
+      >
+        ${this.renderIntelligenceStoryCopy()}
+        <div class="inspector-intelligence-story-stage" aria-hidden="true">
+          ${this.renderIntelligenceStoryThreads()}
+          ${this.renderIntelligenceStoryLearning()}
+          ${this.renderIntelligenceStorySkill()}
+          ${this.renderIntelligenceStoryReuse()}
+        </div>
+        <div
+          class="inspector-intelligence-story-rail"
+          role="tablist"
+          aria-label="What Intelligence adds"
+        >
+          ${INTELLIGENCE_STORY_BEATS.map((beat, index) => html`
+              <button
+                type="button"
+                role="tab"
+                class="inspector-intelligence-story-tab"
+                aria-selected=${index === this.intelStoryBeat}
+                data-active=${index === this.intelStoryBeat}
+                style=${INTERACTIVE_FOCUS_BASE_STYLE}
+                @click=${() => this.pinIntelligenceStoryBeat(index)}
+              >
+                ${beat.label}
+              </button>
+            `)}
+        </div>
+      </section>
+    `;
+	}
+	/** Beat 1 — the developer's own users' conversations, one of them broken. */
+	renderIntelligenceStoryThreads() {
+		return html`
+      <div
+        class="inspector-intelligence-beat"
+        data-beat-id="threads"
+        data-position=${this.intelligenceBeatPosition("threads")}
+      >
+        <div class="inspector-intelligence-threads">
+          ${INTELLIGENCE_STORY_THREADS.map((thread, index) => html`
+              <span
+                class="inspector-intelligence-thread"
+                data-failed=${thread.failed}
+                style="--thread-index:${index}"
+              >
+                <i></i>
+                <strong>${thread.title}</strong>
+                <small>${thread.meta}</small>
+              </span>
+            `)}
+        </div>
+      </div>
+    `;
+	}
+	renderIntelligenceStoryLearning() {
+		return html`
+      <div
+        class="inspector-intelligence-beat"
+        data-beat-id="learning"
+        data-position=${this.intelligenceBeatPosition("learning")}
+      >
+        <div class="inspector-intelligence-beat-col">
+          <span class="inspector-intelligence-beat-label">
+            Signals from ${INTELLIGENCE_STORY_SIGNALS.length} threads
+          </span>
+          ${INTELLIGENCE_STORY_SIGNALS.map((signal, index) => html`
+              <span
+                class="inspector-intelligence-signal"
+                style="--signal-index:${index}"
+                >${signal}</span
+              >
+            `)}
+        </div>
+        <div class="inspector-intelligence-beat-flow">
+          ${this.renderIcon("ArrowRight")}
+        </div>
+        <div class="inspector-intelligence-beat-col">
+          <span class="inspector-intelligence-beat-label">
+            Reusable pattern
+          </span>
+          ${INTELLIGENCE_STORY_RULES.map((rule, index) => html`
+              <span
+                class="inspector-intelligence-rule"
+                style="--rule-index:${index}"
+              >
+                <i>${this.renderIcon("Check")}</i>${rule}
+              </span>
+            `)}
+        </div>
+      </div>
+    `;
+	}
+	renderIntelligenceStorySkill() {
+		return html`
+      <div
+        class="inspector-intelligence-beat"
+        data-beat-id="skill"
+        data-position=${this.intelligenceBeatPosition("skill")}
+      >
+        <div class="inspector-intelligence-skill-file">
+          <header>
+            ${this.renderIcon("FileText")}
+            <strong>${INTELLIGENCE_STORY_SKILL_FILE}</strong>
+            <em>Pending review</em>
+          </header>
+          <div class="inspector-intelligence-skill-code">
+            <span data-line="1"><b># Meeting scheduling</b></span>
+            <span data-line="2">When planning a meeting:</span>
+            ${INTELLIGENCE_STORY_RULES.map((rule, index) => html`
+                <span data-line=${index + 3} style="--rule-index:${index}"
+                  >${index + 1}. ${rule}</span
                 >
-                  <header class="inspector-home-feature-group-header">
-                    <strong>Available</strong>
-                    <span>${disabledServices.length}</span>
-                  </header>
-                  <div class="inspector-home-feature-list">
-                    ${disabledServices.length > 0 ? disabledServices.map(renderService) : html`
-                            <p class="inspector-home-feature-group-empty">Everything is active</p>
-                          `}
-                  </div>
-                </section>
-              </div>
-            `}
-      </section>
+              `)}
+          </div>
+        </div>
+      </div>
     `;
 	}
-	handleHomeHeroCta(action) {
-		if (this.core?.telemetryDisabled) return;
-		trackHomeCtaClicked({ action_kind: action.kind });
+	renderIntelligenceStoryReuse() {
+		return html`
+      <div
+        class="inspector-intelligence-beat"
+        data-beat-id="intelligence"
+        data-position=${this.intelligenceBeatPosition("intelligence")}
+      >
+        <div class="inspector-intelligence-chain">
+          ${INTELLIGENCE_STORY_CHAIN.map((step, index) => html`
+              <span
+                class="inspector-intelligence-chain-step"
+                style="--step-index:${index}"
+              >
+                <i>${this.renderIcon(step.icon)}</i>
+                <strong>${step.name}</strong>
+                <small>${step.detail}</small>
+              </span>
+              ${index === INTELLIGENCE_STORY_CHAIN.length - 1 ? nothing : html`
+                    <span
+                      class="inspector-intelligence-chain-arrow"
+                      style="--step-index:${index}"
+                      >${this.renderIcon("ChevronRight")}</span
+                    >
+                  `}
+            `)}
+        </div>
+        <span class="inspector-intelligence-chain-proof">
+          ${this.renderIcon("Sparkles")} Next run starts with
+          <code>${INTELLIGENCE_STORY_SKILL_FILE}</code>
+        </span>
+      </div>
+    `;
+	}
+	/** A press pins that beat and stops the loop; the developer is now driving. */
+	pinIntelligenceStoryBeat(index) {
+		this.intelStoryUserPinned = true;
+		this.intelStoryBeat = index;
+		this.stopIntelligenceStory();
+		this.requestUpdate();
+		if (!this.core?.telemetryDisabled) {
+			const beat = INTELLIGENCE_STORY_BEATS[index];
+			if (beat) trackHomeStoryBeatSelected({
+				beat: beat.id,
+				beat_index: index
+			});
+		}
+	}
+	/**
+	* Advance the story only while it is actually on screen.
+	*
+	* Gated on the panel being open, Home being the visible tab, settings being
+	* closed and the document being visible. Anything less and a debugging tool
+	* would be holding a repeating timer behind a closed panel.
+	*/
+	syncIntelligenceStory() {
+		if (!(this.isOpen && !this.settingsOpen && this.selectedMenu === "home" && !this._core?.intelligence && typeof document !== "undefined" && document.visibilityState !== "hidden")) {
+			this.intelStoryUserPinned = false;
+			this.stopIntelligenceStory();
+			return;
+		}
+		if (this.intelStoryUserPinned || this.prefersReducedMotion()) {
+			this.stopIntelligenceStory();
+			return;
+		}
+		if (this.intelStoryTimer !== null) return;
+		const advance = () => {
+			const current = INTELLIGENCE_STORY_BEATS[this.intelStoryBeat];
+			this.intelStoryTimer = setTimeout(() => {
+				this.intelStoryTimer = null;
+				if (!this.isConnected) return;
+				this.intelStoryBeat = (this.intelStoryBeat + 1) % INTELLIGENCE_STORY_BEATS.length;
+				this.requestUpdate();
+				advance();
+			}, current?.duration ?? 3800);
+		};
+		advance();
+	}
+	stopIntelligenceStory() {
+		if (this.intelStoryTimer !== null) {
+			clearTimeout(this.intelStoryTimer);
+			this.intelStoryTimer = null;
+		}
+	}
+	/**
+	* Reduced motion parks the story on the closing beat.
+	*
+	* That beat is the whole argument in one static frame, so a developer who
+	* asked their OS for less motion still gets the point rather than a
+	* fragment of it.
+	*/
+	prefersReducedMotion() {
+		if (typeof window === "undefined" || !window.matchMedia) return false;
+		this.intelStoryReducedMotion ??= window.matchMedia("(prefers-reduced-motion: reduce)");
+		if (this.intelStoryReducedMotion.matches) {
+			this.intelStoryBeat = INTELLIGENCE_STORY_BEATS.length - 1;
+			return true;
+		}
+		return false;
 	}
 	maybeTrackHomeViewed() {
 		if (this.selectedMenu !== "home" || this.settingsOpen || !this.isOpen) return;
@@ -10294,6 +11504,7 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 		this.draggedDuringInteraction = false;
 	}
 	openInspector(source, options = {}) {
+		if (this.isInspectorDismissed) return;
 		if (options.threadId) this.focusThread(options);
 		if (this.isPoppedOut) return;
 		if (this.isOpen) return;
@@ -10305,10 +11516,8 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 		this.closeLauncherHud();
 		const hudMenu = this.hudLandingMenu;
 		this.hudLandingMenu = null;
-		if (hudMenu) {
-			this.selectedMenu = hudMenu;
-			this.lastSelectedMenuByGroup[getGroupForMenu(hudMenu)] = hudMenu;
-		} else if (activeSignalAtOpen !== null && source === "floating_button") {
+		if (hudMenu) this.handleMenuSelect(hudMenu);
+		else if (activeSignalAtOpen !== null && source === "floating_button") {
 			const landing = LAUNCHER_SIGNALS[activeSignalAtOpen].landingTarget;
 			this.selectedMenu = landing;
 			this.lastSelectedMenuByGroup[getGroupForMenu(landing)] = landing;
@@ -10680,6 +11889,24 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 		});
 		return mapped;
 	}
+	async loadThreadSnapshot(thread) {
+		const core = this._core;
+		if (!core?.runtimeUrl) throw new Error("Failed to load thread.");
+		const baseUrl = core.runtimeUrl.replace(/\/+$/, "");
+		const encodedThreadId = encodeURIComponent(thread.id);
+		const [messagesResponse, stateResponse] = await Promise.all([fetch(`${baseUrl}/threads/${encodedThreadId}/messages`, { headers: { ...core.headers } }), fetch(`${baseUrl}/threads/${encodedThreadId}/state`, { headers: { ...core.headers } })]);
+		if (!messagesResponse.ok) throw new Error(`Failed to load thread (HTTP ${messagesResponse.status}).`);
+		const messagesBody = await messagesResponse.json();
+		const stateBody = stateResponse.ok ? await stateResponse.json() : { state: {} };
+		return {
+			messages: this.mapThreadMessagesToPlayground(messagesBody.messages ?? []),
+			state: stateBody.state ?? {}
+		};
+	}
+	applyThreadSnapshotToPlayground(thread, snapshot) {
+		this.startPlaygroundSession(false, snapshot.messages, snapshot.state, thread.agentId);
+		this.playgroundSourceThreadId = thread.id;
+	}
 	sendPlaygroundMessage(content) {
 		if (!content || this.playgroundIsRunning || this.playgroundIsLoadingThread) return;
 		const selectedAgentId = this.resolvePlaygroundAgentId(this.selectedContext);
@@ -10703,30 +11930,30 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
         @submit=${this.handlePlaygroundSubmit}
       >
         ${this.playgroundError ? html`<div
-                class="mx-auto mb-2 flex max-w-3xl items-start gap-2 rounded-lg border border-rose-200 bg-rose-50 px-2.5 py-2 text-[10px] text-rose-950"
-                role="alert"
-                data-playground-error
+              class="mx-auto mb-2 flex max-w-3xl items-start gap-2 rounded-lg border border-rose-200 bg-rose-50 px-2.5 py-2 text-[10px] text-rose-950"
+              role="alert"
+              data-playground-error
+            >
+              <span class="mt-0.5 shrink-0"
+                >${this.renderIcon("TriangleAlert")}</span
               >
-                <span class="mt-0.5 shrink-0"
-                  >${this.renderIcon("TriangleAlert")}</span
-                >
-                <div class="min-w-0 flex-1">
-                  <p class="font-semibold">Agent run failed</p>
-                  <p class="mt-0.5 break-words leading-relaxed">
-                    ${this.playgroundError}
-                  </p>
-                </div>
-                ${hasRetry ? html`
-                        <button
-                          type="button"
-                          class="shrink-0 rounded-md border border-rose-200 bg-white px-2 py-1 font-medium text-rose-700 transition hover:bg-rose-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-rose-300 focus-visible:ring-offset-1 disabled:opacity-50"
-                          ?disabled=${busy}
-                          @click=${this.handlePlaygroundRetry}
-                        >
-                          Retry
-                        </button>
-                      ` : nothing}
-              </div>` : nothing}
+              <div class="min-w-0 flex-1">
+                <p class="font-semibold">Agent run failed</p>
+                <p class="mt-0.5 break-words leading-relaxed">
+                  ${this.playgroundError}
+                </p>
+              </div>
+              ${hasRetry ? html`
+                    <button
+                      type="button"
+                      class="shrink-0 rounded-md border border-rose-200 bg-white px-2 py-1 font-medium text-rose-700 transition hover:bg-rose-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-rose-300 focus-visible:ring-offset-1 disabled:opacity-50"
+                      ?disabled=${busy}
+                      @click=${this.handlePlaygroundRetry}
+                    >
+                      Retry
+                    </button>
+                  ` : nothing}
+            </div>` : nothing}
         <div
           class="cpk-playground-composer mx-auto flex max-w-3xl items-end gap-1.5 rounded-[28px] bg-white px-2.5 py-1.5 shadow-[0_4px_4px_0_#0000000a,0_0_1px_0_#0000009e] transition-shadow duration-200 focus-within:shadow-[0_6px_18px_0_#00000014,0_0_1px_0_#0000009e]"
         >
@@ -10814,31 +12041,41 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
                 class="h-3 w-px shrink-0 bg-gray-200"
                 aria-hidden="true"
               ></span>
-              <span class="truncate" title=${runtimeLabel}>${runtimeLabel}</span>
+              <span class="truncate" title=${runtimeLabel}
+                >${runtimeLabel}</span
+              >
             </div>
           </div>
           <div
             class="cpk-playground-actions ml-auto flex min-w-0 items-center gap-2"
           >
             ${sourceThreads.length > 0 ? html`
-                    <label class="sr-only" for="cpk-playground-thread-source"
-                      >Start from a thread</label
-                    >
-                    <select
-                      id="cpk-playground-thread-source"
-                      class="cpk-playground-thread-select max-w-[200px] rounded-md border border-gray-200 bg-white px-2 py-1 text-[10px] text-gray-700 outline-none transition hover:border-gray-300 focus:border-violet-400 focus:ring-2 focus:ring-violet-100 disabled:cursor-not-allowed disabled:opacity-50"
-                      .value=${this.playgroundSourceThreadId ?? ""}
-                      ?disabled=${busy}
-                      @change=${this.handlePlaygroundThreadSourceChange}
+                  <label class="sr-only" for="cpk-playground-thread-source"
+                    >Start from a thread</label
+                  >
+                  <select
+                    id="cpk-playground-thread-source"
+                    class="cpk-playground-thread-select max-w-[200px] rounded-md border border-gray-200 bg-white px-2 py-1 text-[10px] text-gray-700 outline-none transition hover:border-gray-300 focus:border-violet-400 focus:ring-2 focus:ring-violet-100 disabled:cursor-not-allowed disabled:opacity-50"
+                    .value=${this.playgroundSourceThreadId ?? ""}
+                    ?disabled=${busy}
+                    @change=${this.handlePlaygroundThreadSourceChange}
+                  >
+                    <option
+                      value=""
+                      ?selected=${!this.playgroundSourceThreadId}
                     >
-                      <option value="">Load a thread...</option>
-                      ${sourceThreads.map((thread) => html`
-                          <option value=${thread.id}>
-                            ${thread.name?.trim() || `Thread ${thread.id.slice(0, 8)}`}
-                          </option>
-                        `)}
-                    </select>
-                  ` : nothing}
+                      Load a thread...
+                    </option>
+                    ${sourceThreads.map((thread) => html`
+                        <option
+                          value=${thread.id}
+                          ?selected=${this.playgroundSourceThreadId === thread.id}
+                        >
+                          ${thread.name?.trim() || `Thread ${thread.id.slice(0, 8)}`}
+                        </option>
+                      `)}
+                  </select>
+                ` : nothing}
             <button
               type="button"
               class="inline-flex shrink-0 items-center gap-1 rounded-md border border-gray-200 bg-white px-2 py-1 text-[10px] font-medium text-gray-700 transition hover:border-gray-300 hover:bg-gray-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-300 focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50 [&>svg]:h-3.5 [&>svg]:w-3.5"
@@ -10851,67 +12088,66 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
         </header>
 
         ${this.playgroundShowEphemeralNotice && runtimeMode !== "intelligence" ? html`
-                <div
-                  role="alert"
-                  class="mx-3 mt-2 flex items-start gap-2 rounded-lg border border-violet-200 bg-violet-50 px-2.5 py-2 text-[10px] text-violet-950"
-                  data-playground-ephemeral-notice
+              <div
+                role="alert"
+                class="mx-3 mt-2 flex items-start gap-2 rounded-lg border border-violet-200 bg-violet-50 px-2.5 py-2 text-[10px] text-violet-950"
+                data-playground-ephemeral-notice
+              >
+                <span class="mt-0.5 text-violet-600 [&>svg]:h-3.5 [&>svg]:w-3.5"
+                  >${this.renderIcon("Clock3")}</span
                 >
-                  <span
-                    class="mt-0.5 text-violet-600 [&>svg]:h-3.5 [&>svg]:w-3.5"
-                    >${this.renderIcon("Clock3")}</span
-                  >
-                  <p class="min-w-0 flex-1 leading-relaxed">
-                    Scratch threads are ephemeral and will be deleted when your
-                    local session ends. Need durable history?
-                    <a
-                      class="font-semibold underline decoration-violet-300 underline-offset-2 hover:decoration-violet-700 focus-visible:rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-400 focus-visible:ring-offset-1"
-                      href=${this.getThreadsIntelligenceSignupUrl()}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      >Set up Intelligence</a
-                    >.
-                  </p>
-                  <button
-                    type="button"
-                    class="rounded p-0.5 text-violet-500 transition hover:bg-violet-100 hover:text-violet-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-400 focus-visible:ring-offset-1"
-                    aria-label="Dismiss ephemeral thread notice"
-                    @click=${() => {
+                <p class="min-w-0 flex-1 leading-relaxed">
+                  Scratch threads are ephemeral and will be deleted when your
+                  local session ends. Need durable history?
+                  <a
+                    class="font-semibold underline decoration-violet-300 underline-offset-2 hover:decoration-violet-700 focus-visible:rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-400 focus-visible:ring-offset-1"
+                    href=${this.getThreadsIntelligenceSignupUrl()}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    >Set up Intelligence</a
+                  >.
+                </p>
+                <button
+                  type="button"
+                  class="rounded p-0.5 text-violet-500 transition hover:bg-violet-100 hover:text-violet-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-400 focus-visible:ring-offset-1"
+                  aria-label="Dismiss ephemeral thread notice"
+                  @click=${() => {
 			this.playgroundShowEphemeralNotice = false;
 			this.requestUpdate();
 		}}
-                  >
-                    ${this.renderIcon("X")}
-                  </button>
-                </div>
-              ` : nothing}
+                >
+                  ${this.renderIcon("X")}
+                </button>
+              </div>
+            ` : nothing}
 
         <div
           class="min-h-0 flex-1 overflow-y-auto px-3 py-3"
           data-playground-messages
         >
           ${this.playgroundIsLoadingThread ? html`
+                <div
+                  class="flex h-full items-center justify-center gap-1.5 text-[10px] text-gray-600"
+                >
+                  <span
+                    class="text-gray-500 [&>svg]:animate-spin"
+                    aria-hidden="true"
+                    >${this.renderIcon("LoaderCircle")}</span
+                  >
+                  Loading thread into a scratch session...
+                </div>
+              ` : visibleMessages.length === 0 ? html`
                   <div
-                    class="flex h-full items-center justify-center gap-1.5 text-[10px] text-gray-600"
+                    class="cpk-playground-welcome mx-auto flex h-full w-full flex-col items-center justify-center text-center"
                   >
-                    <span
-                      class="text-gray-500 [&>svg]:animate-spin"
-                      aria-hidden="true"
-                      >${this.renderIcon("LoaderCircle")}</span
-                    >
-                    Loading thread into a scratch session...
+                    <p class="cpk-playground-welcome-title">
+                      How can I help you today?
+                    </p>
+                    ${this.renderPlaygroundComposer(agentId, busy, hasRetry, true)}
                   </div>
-                ` : visibleMessages.length === 0 ? html`
-                    <div
-                      class="cpk-playground-welcome mx-auto flex h-full w-full flex-col items-center justify-center text-center"
-                    >
-                      <p class="cpk-playground-welcome-title">
-                        How can I help you today?
-                      </p>
-                      ${this.renderPlaygroundComposer(agentId, busy, hasRetry, true)}
-                    </div>
-                  ` : html`
-                    <div class="mx-auto flex max-w-3xl flex-col pb-5">
-                      ${visibleMessages.map((message, index) => {
+                ` : html`
+                  <div class="mx-auto flex max-w-3xl flex-col pb-5">
+                    ${visibleMessages.map((message, index) => {
 			const isUser = message.role === "user";
 			const isReasoning = message.role === "reasoning";
 			const isActivity = message.role === "activity";
@@ -10923,152 +12159,156 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 				const durationLabel = duration === void 0 || duration < 1e3 ? "a few seconds" : `${Math.round(duration / 1e3)} seconds`;
 				const label = isStreaming ? "Thinking…" : `Thought for ${durationLabel}`;
 				if (isStreaming) return html`
-                              <section
-                                class="cpk-playground-message-enter my-1 text-[11px] text-gray-500"
+                            <section
+                              class="cpk-playground-message-enter my-1 text-[11px] text-gray-500"
+                              data-playground-message-role="reasoning"
+                            >
+                              <div
+                                class="inline-flex items-center gap-1 py-1 font-medium"
+                              >
+                                <span>${label}</span>
+                                ${content ? nothing : html`
+                                        <span
+                                          class="cpk-playground-thinking-dot ml-1 h-1.5 w-1.5 rounded-full bg-gray-500"
+                                          aria-hidden="true"
+                                        ></span>
+                                      `}
+                              </div>
+                              ${content ? html`<div
+                                    class="pb-2 pt-1 leading-5 text-gray-500"
+                                  >
+                                    ${content}
+                                  </div>` : nothing}
+                            </section>
+                          `;
+				return content ? html`
+                              <details
+                                class="cpk-playground-message-enter cpk-playground-reasoning my-1 text-[11px] text-gray-500"
                                 data-playground-message-role="reasoning"
                               >
-                                <div
-                                  class="inline-flex items-center gap-1 py-1 font-medium"
+                                <summary
+                                  class="inline-flex cursor-pointer list-none items-center gap-1 py-1 font-medium transition-colors hover:text-gray-900 focus-visible:rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-300 focus-visible:ring-offset-1"
                                 >
                                   <span>${label}</span>
-                                  ${content ? nothing : html`
-                                          <span
-                                            class="cpk-playground-thinking-dot ml-1 h-1.5 w-1.5 rounded-full bg-gray-500"
-                                            aria-hidden="true"
-                                          ></span>
-                                        `}
+                                  <span
+                                    class="cpk-playground-reasoning-chevron transition-transform duration-200 [&>svg]:h-3 [&>svg]:w-3"
+                                    >${this.renderIcon("ChevronRight")}</span
+                                  >
+                                </summary>
+                                <div class="pb-2 pt-1 leading-5 text-gray-500">
+                                  ${content}
                                 </div>
-                                ${content ? html`<div
-                                        class="pb-2 pt-1 leading-5 text-gray-500"
-                                      >
-                                        ${content}
-                                      </div>` : nothing}
-                              </section>
+                              </details>
+                            ` : html`
+                              <div
+                                class="cpk-playground-message-enter my-1 py-1 text-[11px] font-medium text-gray-500"
+                                data-playground-message-role="reasoning"
+                              >
+                                ${label}
+                              </div>
                             `;
-				return content ? html`
-                                <details
-                                  class="cpk-playground-message-enter cpk-playground-reasoning my-1 text-[11px] text-gray-500"
-                                  data-playground-message-role="reasoning"
+			}
+			const isMultiline = content.includes("\n") || content.length > 72;
+			const copyKey = `playground-message-${message.id ?? index}`;
+			const showToolbar = !isUser && !isActivity && Boolean(content) && !(this.playgroundIsRunning && index === lastAssistantIndex);
+			return html`
+                        <article
+                          class=${isActivity ? "cpk-playground-message-enter mr-auto mt-3 flex max-w-full items-center gap-1.5 rounded-lg border border-gray-200 bg-gray-50 px-2.5 py-1.5 text-[10px] text-gray-600" : isUser ? "cpk-playground-message-enter flex w-full flex-col items-end pt-8" : "cpk-playground-message-enter w-full"}
+                          data-playground-message-role=${message.role}
+                        >
+                          ${isActivity ? html`
+                                <span class="text-gray-500"
+                                  >${this.renderIcon("Activity")}</span
                                 >
-                                  <summary
-                                    class="inline-flex cursor-pointer list-none items-center gap-1 py-1 font-medium transition-colors hover:text-gray-900 focus-visible:rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-300 focus-visible:ring-offset-1"
+                                <span class="font-medium text-gray-700"
+                                  >Activity</span
+                                >
+                                <span class="truncate">${content}</span>
+                              ` : isUser ? html`
+                                  <div
+                                    class=${`max-w-[80%] whitespace-pre-wrap break-words rounded-[16px] bg-gray-100 px-3 text-[13px] leading-5 text-gray-900 ${isMultiline ? "py-2.5" : "py-1"}`}
                                   >
-                                    <span>${label}</span>
-                                    <span
-                                      class="cpk-playground-reasoning-chevron transition-transform duration-200 [&>svg]:h-3 [&>svg]:w-3"
-                                      >${this.renderIcon("ChevronRight")}</span
-                                    >
-                                  </summary>
-                                  <div class="pb-2 pt-1 leading-5 text-gray-500">
                                     ${content}
                                   </div>
-                                </details>
-                              ` : html`
+                                ` : html`
+                                  <div
+                                    class="whitespace-pre-wrap break-words py-3 text-[13px] leading-[22px] text-gray-800"
+                                  >
+                                    ${content}
+                                  </div>
+                                `}
+                          ${!isUser && message.toolCalls.length > 0 ? this.renderToolCallDetails(message.toolCalls) : nothing}
+                          ${showToolbar ? html`
                                 <div
-                                  class="cpk-playground-message-enter my-1 py-1 text-[11px] font-medium text-gray-500"
-                                  data-playground-message-role="reasoning"
+                                  class="-ml-1 flex min-h-7 w-full items-center gap-1 bg-transparent"
+                                  data-playground-assistant-toolbar
                                 >
-                                  ${label}
+                                  <button
+                                    type="button"
+                                    class="flex h-7 w-7 items-center justify-center rounded-md text-gray-500 transition hover:bg-gray-100 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-300 focus-visible:ring-offset-1 [&>svg]:h-3.5 [&>svg]:w-3.5"
+                                    title="Copy message"
+                                    aria-label="Copy message"
+                                    @click=${(event) => this.copyToClipboard(content, copyKey, event)}
+                                  >
+                                    ${this.copiedEvents.has(copyKey) ? this.renderIcon("Check") : this.renderIcon("Copy")}
+                                  </button>
+                                  ${index === lastAssistantIndex && hasRetry && !busy && !this.playgroundError ? html`
+                                        <button
+                                          type="button"
+                                          class="flex h-7 w-7 items-center justify-center rounded-md text-gray-500 transition hover:bg-gray-100 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-300 focus-visible:ring-offset-1 [&>svg]:h-3.5 [&>svg]:w-3.5"
+                                          title="Retry last prompt"
+                                          aria-label="Retry last prompt"
+                                          @click=${this.handlePlaygroundRetry}
+                                        >
+                                          ${this.renderIcon("RotateCcw")}
+                                        </button>
+                                      ` : nothing}
                                 </div>
-                              `;
-			}
-			const isMultiline = content.includes("\n") || content.length > 72;
-			const copyKey = `playground-message-${message.id ?? index}`;
-			const showToolbar = !isUser && !isActivity && Boolean(content) && !(this.playgroundIsRunning && index === lastAssistantIndex);
-			return html`
-                          <article
-                            class=${isActivity ? "cpk-playground-message-enter mr-auto mt-3 flex max-w-full items-center gap-1.5 rounded-lg border border-gray-200 bg-gray-50 px-2.5 py-1.5 text-[10px] text-gray-600" : isUser ? "cpk-playground-message-enter flex w-full flex-col items-end pt-8" : "cpk-playground-message-enter w-full"}
-                            data-playground-message-role=${message.role}
-                          >
-                            ${isActivity ? html`
-                                    <span class="text-gray-500"
-                                      >${this.renderIcon("Activity")}</span
-                                    >
-                                    <span class="font-medium text-gray-700"
-                                      >Activity</span
-                                    >
-                                    <span class="truncate">${content}</span>
-                                  ` : isUser ? html`
-                                      <div
-                                        class=${`max-w-[80%] whitespace-pre-wrap break-words rounded-[16px] bg-gray-100 px-3 text-[13px] leading-5 text-gray-900 ${isMultiline ? "py-2.5" : "py-1"}`}
-                                      >${content}</div>
-                                    ` : html`
-                                      <div
-                                        class="whitespace-pre-wrap break-words py-3 text-[13px] leading-[22px] text-gray-800"
-                                      >${content}</div>
-                                    `}
-                            ${!isUser && message.toolCalls.length > 0 ? this.renderToolCallDetails(message.toolCalls) : nothing}
-                            ${showToolbar ? html`
-                                    <div
-                                      class="-ml-1 flex min-h-7 w-full items-center gap-1 bg-transparent"
-                                      data-playground-assistant-toolbar
-                                    >
-                                      <button
-                                        type="button"
-                                        class="flex h-7 w-7 items-center justify-center rounded-md text-gray-500 transition hover:bg-gray-100 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-300 focus-visible:ring-offset-1 [&>svg]:h-3.5 [&>svg]:w-3.5"
-                                        title="Copy message"
-                                        aria-label="Copy message"
-                                        @click=${(event) => this.copyToClipboard(content, copyKey, event)}
-                                      >
-                                        ${this.copiedEvents.has(copyKey) ? this.renderIcon("Check") : this.renderIcon("Copy")}
-                                      </button>
-                                      ${index === lastAssistantIndex && hasRetry && !busy && !this.playgroundError ? html`
-                                              <button
-                                                type="button"
-                                                class="flex h-7 w-7 items-center justify-center rounded-md text-gray-500 transition hover:bg-gray-100 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-300 focus-visible:ring-offset-1 [&>svg]:h-3.5 [&>svg]:w-3.5"
-                                                title="Retry last prompt"
-                                                aria-label="Retry last prompt"
-                                                @click=${this.handlePlaygroundRetry}
-                                              >
-                                                ${this.renderIcon("RotateCcw")}
-                                              </button>
-                                            ` : nothing}
-                                    </div>
-                                  ` : nothing}
-                          </article>
-                        `;
+                              ` : nothing}
+                        </article>
+                      `;
 		})}
-                      ${this.playgroundIsRunning && lastReasoningIndex < 0 ? html`
-                              <div
-                                class="cpk-playground-message-enter mt-3 flex items-center gap-1 px-1 py-1"
-                                aria-label="Agent is working"
-                              >
-                                <span
-                                  class="cpk-playground-thinking-dot h-1.5 w-1.5 rounded-full bg-gray-500"
-                                ></span>
-                                <span
-                                  class="cpk-playground-thinking-dot h-1.5 w-1.5 rounded-full bg-gray-500"
-                                ></span>
-                                <span
-                                  class="cpk-playground-thinking-dot h-1.5 w-1.5 rounded-full bg-gray-500"
-                                ></span>
-                              </div>
-                            ` : nothing}
-                      ${!busy && lastAssistantIndex >= 0 && suggestions.length > 0 ? html`
-                              <div
-                                class="mt-3 flex flex-wrap items-center gap-1.5"
-                                data-playground-suggestions
-                              >
-                                ${suggestions.map((suggestion) => html`
-                                    <button
-                                      type="button"
-                                      class="inline-flex h-7 items-center gap-1 rounded-full border border-gray-200 bg-white px-2.5 text-[10px] font-medium leading-none text-gray-900 transition-colors hover:bg-gray-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-300 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:text-gray-500"
-                                      ?disabled=${suggestion.isLoading}
-                                      aria-busy=${suggestion.isLoading ? "true" : "false"}
-                                      @click=${() => this.handlePlaygroundSuggestion(suggestion.message)}
-                                    >
-                                      ${suggestion.isLoading ? html`<span
-                                              class="[&>svg]:animate-spin"
-                                              aria-hidden="true"
-                                              >${this.renderIcon("LoaderCircle")}</span
-                                            >` : nothing}
-                                      <span>${suggestion.title}</span>
-                                    </button>
-                                  `)}
-                              </div>
-                            ` : nothing}
-                    </div>
-                  `}
+                    ${this.playgroundIsRunning && lastReasoningIndex < 0 ? html`
+                            <div
+                              class="cpk-playground-message-enter mt-3 flex items-center gap-1 px-1 py-1"
+                              aria-label="Agent is working"
+                            >
+                              <span
+                                class="cpk-playground-thinking-dot h-1.5 w-1.5 rounded-full bg-gray-500"
+                              ></span>
+                              <span
+                                class="cpk-playground-thinking-dot h-1.5 w-1.5 rounded-full bg-gray-500"
+                              ></span>
+                              <span
+                                class="cpk-playground-thinking-dot h-1.5 w-1.5 rounded-full bg-gray-500"
+                              ></span>
+                            </div>
+                          ` : nothing}
+                    ${!busy && lastAssistantIndex >= 0 && suggestions.length > 0 ? html`
+                          <div
+                            class="mt-3 flex flex-wrap items-center gap-1.5"
+                            data-playground-suggestions
+                          >
+                            ${suggestions.map((suggestion) => html`
+                                <button
+                                  type="button"
+                                  class="inline-flex h-7 items-center gap-1 rounded-full border border-gray-200 bg-white px-2.5 text-[10px] font-medium leading-none text-gray-900 transition-colors hover:bg-gray-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-300 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:text-gray-500"
+                                  ?disabled=${suggestion.isLoading}
+                                  aria-busy=${suggestion.isLoading ? "true" : "false"}
+                                  @click=${() => this.handlePlaygroundSuggestion(suggestion.message)}
+                                >
+                                  ${suggestion.isLoading ? html`<span
+                                        class="[&>svg]:animate-spin"
+                                        aria-hidden="true"
+                                        >${this.renderIcon("LoaderCircle")}</span
+                                      >` : nothing}
+                                  <span>${suggestion.title}</span>
+                                </button>
+                              `)}
+                          </div>
+                        ` : nothing}
+                  </div>
+                `}
         </div>
 
         ${showWelcome ? nothing : this.renderPlaygroundComposer(agentId, busy, hasRetry)}
@@ -11151,6 +12391,40 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
             </a>
           </div>
         </section>
+
+        <section
+          class="inspector-settings-section"
+          aria-labelledby="inspector-settings-visibility-title"
+        >
+          <div class="inspector-settings-section-heading">
+            <span class="inspector-settings-section-icon" aria-hidden="true">
+              ${this.renderIcon("EyeOff")}
+            </span>
+            <div>
+              <h2 id="inspector-settings-visibility-title">Visibility</h2>
+              <p>Temporarily hide the Inspector on this domain.</p>
+            </div>
+          </div>
+
+          <div class="inspector-settings-visibility">
+            <div>
+              <h3>Take a break from the Inspector</h3>
+              <p>
+                Hide the Inspector for seven days. It will return automatically
+                when the week is over.
+              </p>
+            </div>
+            <button
+              type="button"
+              class="inspector-settings-dismiss"
+              data-cpk-dismiss-inspector="week"
+              @click=${() => this.dismissInspectorFor("week")}
+            >
+              <span aria-hidden="true">${this.renderIcon("Clock")}</span>
+              Hide Inspector for one week
+            </button>
+          </div>
+        </section>
       </div>
     `;
 	}
@@ -11455,6 +12729,7 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 			this.requestUpdate();
 			return;
 		}
+		this.tryFromHereError = null;
 		this.selectedThreadId = threadId;
 		if (showingExamples && this.isExampleThreadId(threadId)) {
 			this.selectedRealThreadIsExplicit = false;
@@ -11691,19 +12966,6 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
           ` : nothing}
     `;
 	}
-	/** Show a copy result briefly and announce it to assistive technology. */
-	showThreadsSetupPromptCopyState(state, generation) {
-		if (!this.isConnected || generation !== this.threadsSetupPromptCopyGeneration) return;
-		if (this.threadsSetupPromptCopyResetTimeoutId !== null) window.clearTimeout(this.threadsSetupPromptCopyResetTimeoutId);
-		this.threadsSetupPromptCopyState = state;
-		this.requestUpdate();
-		this.threadsSetupPromptCopyResetTimeoutId = window.setTimeout(() => {
-			if (!this.isConnected || generation !== this.threadsSetupPromptCopyGeneration) return;
-			this.threadsSetupPromptCopyState = "idle";
-			this.threadsSetupPromptCopyResetTimeoutId = null;
-			this.requestUpdate();
-		}, 2e3);
-	}
 	renderThreadsExampleOverview(locked) {
 		const lockedCopy = locked ? this.getThreadsLockedCopy() : void 0;
 		const { lockedAction } = this.inspectorMetadataProjection;
@@ -11718,34 +12980,10 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
           <p class="cpk-threads-overview-copy">
             ${lockedCopy?.description ?? "Take a tour with the example threads in the sidebar. Then, start chatting in your app to create the first real thread."}
           </p>
+          ${locked ? this.renderRuntimeEntitlementDiagnostic(this.getRuntimeEntitlementDiagnostic()) : nothing}
           <div class="cpk-threads-overview-actions">
             ${locked ? html`
-                  ${this.inspectorMetadataProjection.licenseState === "valid" ? html`
-                        <button
-                          data-inspector-threads-setup-prompt
-                          type="button"
-                          aria-label=${this.threadsSetupPromptCopyState === "copied" ? "Setup prompt copied" : this.threadsSetupPromptCopyState === "error" ? "Copy setup prompt failed. Try again" : "Copy setup prompt for your coding agent"}
-                          @click=${this.handleThreadsSetupPromptCopy}
-                        >
-                          ${this.renderIcon(this.threadsSetupPromptCopyState === "copied" ? "Check" : "Copy")}
-                          ${this.threadsSetupPromptCopyState === "copied" ? "Copied" : this.threadsSetupPromptCopyState === "error" ? "Copy blocked" : "Copy prompt for your agent"}
-                        </button>
-                        <a
-                          data-inspector-threads-setup-link
-                          href=${this.getThreadsRuntimeSetupDocsUrl()}
-                          target="_blank"
-                          rel="noopener"
-                          aria-label="Open setup guide (opens in a new tab)"
-                        >
-                          Open setup guide
-                        </a>
-                        <span
-                          class="sr-only"
-                          data-inspector-threads-setup-copy-status
-                          aria-live="polite"
-                          >${this.threadsSetupPromptCopyState === "copied" ? "Setup prompt copied." : this.threadsSetupPromptCopyState === "error" ? "Setup prompt copy failed. Open the setup guide and copy it manually." : ""}</span
-                        >
-                      ` : nothing}
+                  ${this.renderFeatureSetupPrompt("threads", "cpk-threads-overview-action cpk-threads-overview-action-primary")}
                   ${lockedAction ? this.renderInspectorAction(lockedAction, "locked") : nothing}
                 ` : html`
                   <a
@@ -11896,6 +13134,74 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 		}
 	}
 	/**
+	* Prefer the Runtime's structured entitlement diagnostic and derive a
+	* compatibility diagnostic only when an older Core exposes legacy status.
+	*/
+	getRuntimeEntitlementDiagnostic() {
+		const runtimeEntitlements = this.core?.runtimeEntitlements;
+		if (runtimeEntitlements) return runtimeEntitlements.status === "ready" ? { status: runtimeEntitlements.status } : {
+			status: runtimeEntitlements.status,
+			error: runtimeEntitlements.error
+		};
+		switch (this.core?.licenseStatus) {
+			case "valid": return { status: "ready" };
+			case "expired": return {
+				status: "degraded",
+				error: {
+					code: "legacy_license_expired",
+					message: "Legacy Runtime license has expired.",
+					retryable: false
+				}
+			};
+			case "expiring": return {
+				status: "degraded",
+				error: {
+					code: "legacy_license_expiring",
+					message: "Legacy Runtime license is expiring.",
+					retryable: false
+				}
+			};
+			case "invalid": return {
+				status: "misconfigured",
+				error: {
+					code: "legacy_license_invalid",
+					message: "Legacy Runtime license is invalid.",
+					retryable: false
+				}
+			};
+			case "none":
+			case "unknown": return { status: "unavailable" };
+			default: return null;
+		}
+	}
+	/** Render exact Runtime entitlement correlation details without gating UI. */
+	renderRuntimeEntitlementDiagnostic(diagnostic) {
+		if (!diagnostic) return nothing;
+		return html`
+      <div
+        role="status"
+        data-runtime-entitlement-status=${diagnostic.status}
+        style="
+          margin: -8px auto 18px;
+          max-width: 380px;
+          font-size: 11px;
+          line-height: 1.5;
+          color: #57575b;
+        "
+      >
+        <div style="font-weight: 600;">
+          Runtime entitlement: ${diagnostic.status}
+        </div>
+        ${diagnostic.error ? html`
+              <div>${diagnostic.error.message}</div>
+              <div>Code: ${diagnostic.error.code}</div>
+              ${diagnostic.error.requestId ? html`<div>Request ID: ${diagnostic.error.requestId}</div>` : nothing}
+              ${diagnostic.error.traceId ? html`<div>Trace ID: ${diagnostic.error.traceId}</div>` : nothing}
+            ` : nothing}
+      </div>
+    `;
+	}
+	/**
 	* Renders the realtime-connection indicator in the memory-store header.
 	* Only `"connected"` shows the live (green-dot) state; `"connecting"` shows a
 	* muted amber "reconnecting" and `"unavailable"` a muted grey "offline", so
@@ -11930,7 +13236,7 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
     `;
 	}
 	renderMemoriesView() {
-		if (!this.core?.intelligence || !this._memoriesAvailable) return html`
+		if (!this.getHomeModel().services.some((service) => service.id === "memory" && service.enabled)) return html`
         <div class="cpk-memory-locked">
           ${this.renderThreadsLockedBackgroundMockup()}
           <div aria-hidden="true" class="cpk-memory-locked-scrim"></div>
@@ -11945,6 +13251,7 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
               ${this._memoryStoreUnsupported ? "Learning is unavailable in this version of the @copilotkit SDK. Upgrade @copilotkit/core (and @copilotkit/react) to a version that supports long-term memory." : "Learning turns durable information from agent interactions into reusable context. It isn't enabled on this deployment."}
             </p>
             <div class="cpk-memory-locked-actions">
+              ${this.renderFeatureSetupPrompt("memory", "cpk-memory-locked-action")}
               <a
                 href=${this.getTalkToEngineerUrl()}
                 target="_blank"
@@ -12280,6 +13587,12 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
                         .agentStateInput=${this.getLatestStateForAgent(selectedThread.agentId)}
                         .agentEventsInput=${this.agentEvents.get(selectedThread.agentId) ?? []}
                         .agentMessagesInput=${selectedThreadIsLocalExample ? EMPTY_INSPECTOR_MESSAGES : this.getLiveAgentMessagesForThread(selectedThread)}
+                        .tryFromHereAvailable=${!selectedThreadIsLocalExample && this.areThreadEndpointsAvailable() && this._core?.threadEndpoints?.inspect !== false}
+                        .tryFromHereBusy=${this.tryFromHereBusy}
+                        .tryFromHereError=${this.tryFromHereError}
+                        @tryFromHere=${(event) => {
+			this.handleTryFromHere(event.detail);
+		}}
                       ></cpk-thread-details>
                       ${selectedThreadIsLocalExample ? this.renderThreadsExampleTour() : nothing}` : showingExamples ? this.renderThreadsExampleOverview(locked) : html`
                         <div
@@ -12781,9 +14094,10 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
                               </span>
                             </div>
                             <div class="flex-1 px-4 py-2">
-                              ${hasContent ? html`<div
-                                    class="whitespace-pre-wrap break-words text-gray-700"
-                                  >${rawContent}</div>` : html`<div class="italic text-gray-400">
+                              ${hasContent ? html`
+                                    <!-- prettier-ignore -->
+                                    <div class="whitespace-pre-wrap break-words text-gray-700">${rawContent}</div>
+                                  ` : html`<div class="italic text-gray-400">
                                     ${contentFallback}
                                   </div>`}
                               ${role === "assistant" && toolCalls.length > 0 ? this.renderToolCallDetails(toolCalls) : nothing}
@@ -13734,12 +15048,12 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 	/**
 	* Requests one beat for a signal, running it now or deferring it.
 	*
-	* There is a single pending slot and four reasons a beat cannot land. All
-	* four are the same situation — "cannot land now, run later" — and treating
+	* There is a single pending slot and five reasons a beat cannot land. All
+	* five are the same situation — "cannot land now, run later" — and treating
 	* them alike is the point: three separate behaviours for one situation would
 	* not survive a third signal.
 	*
-	* Reason 3 is not cosmetic. Starting a beat while one runs does not restart
+	* Reason 4 is not cosmetic. Starting a beat while one runs does not restart
 	* the animation, because the attribute it binds to does not change value and
 	* the pseudo-element selectors match on attribute *presence*; the running
 	* beat would merely change colour mid-flight. A failure that arms during an
@@ -13748,11 +15062,11 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 	*
 	* A failure's beat is followed by a pill, and the whole 3.4-second gesture
 	* holds this one slot for its full duration. That is not a second scheduling
-	* concept: reason 3 already says "another beat is running", and a gesture is
+	* concept: reason 4 already says "another beat is running", and a gesture is
 	* simply a longer beat.
 	*/
 	startSignalPulse(key) {
-		if (this.isOpen || typeof document !== "undefined" && document.visibilityState !== "visible" || this.gestureSlotSignal !== null && this.gestureSlotSignal !== key || this.getActiveLauncherSignal() !== key) {
+		if (this.isOpen || this.isInspectorDismissed || typeof document !== "undefined" && document.visibilityState !== "visible" || this.gestureSlotSignal !== null && this.gestureSlotSignal !== key || this.getActiveLauncherSignal() !== key) {
 			const pending = this.pendingPulseSignal;
 			if (pending === null || LAUNCHER_SIGNALS[key].priority >= LAUNCHER_SIGNALS[pending].priority) this.pendingPulseSignal = key;
 			this.requestUpdate();
@@ -13817,7 +15131,7 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 	}
 	/**
 	* The signal holding the single gesture slot: a beat in flight, or the pill
-	* and spoken sentence that follow it. One slot, not two — see reason 3 in
+	* and spoken sentence that follow it. One slot, not two — see reason 4 in
 	* `startSignalPulse`.
 	*/
 	get gestureSlotSignal() {