@copilotkit/web-inspector 1.71.0 → 1.71.2

package/dist/index.cjs

@@ -503,6 +503,10 @@ const AGENT_EVENT_TYPES = [
 	"ACTIVITY_SNAPSHOT",
 	"ACTIVITY_DELTA"
 ];
+const THREADS_LOCKED_COPY = {
+	heading: "Production-grade chat threads without the complexity. Self hostable.",
+	description: "Chat threads that go beyond text with generative UI and multimodal inputs, built to replay missed events and stay in sync across tabs, sessions, and devices."
+};
 const EMPTY_INSPECTOR_MESSAGES = [];
 function textFromUnknownContent(content) {
 	if (typeof content === "string") return content;
@@ -4978,6 +4982,7 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
 		};
 		this.lastScrolledAgentNavigationLayout = null;
 		this.selectedThreadId = null;
+		this.ephemeralThreadsSetupOpen = false;
 		this.inAppThreadId = null;
 		this.inAppAgentId = null;
 		this.inAppSource = null;
@@ -5261,14 +5266,14 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
 			const clipboard = this.getClipboard(event);
 			if (!clipboard?.writeText) return false;
 			try {
-				await clipboard.writeText(require_home_briefing.homeFeatureImplementationPrompt(service, { onboardingRunId }));
+				await clipboard.writeText(require_onboarding_prompt.createFeatureOnboardingPrompt(service.id, onboardingRunId));
 				return true;
 			} catch {
 				return false;
 			}
 		};
 		this.handleLearningSetupCopy = async (event, recopy = false) => {
-			const service = this.getHomeFeaturePromptTarget("threads");
+			const service = this.getHomeFeaturePromptTarget("memory");
 			if (!service || !this.core?.runtimeUrl) return;
 			const request = ++this.learningSetupCopyRequest;
 			const copied = await this.copyFeaturePromptToClipboard(service, event, this.getOnboardingRunId());
@@ -6064,6 +6069,7 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
 		if (oldValue === value) return;
 		this.detachFromCore();
 		const hadResolvedCore = this.hasResolvedCore;
+		this.ephemeralThreadsSetupOpen = false;
 		this._core = value ?? null;
 		if (this._core) this.hasResolvedCore = true;
 		if (!hadResolvedCore && this._core) this.resolvePendingPersistedMenu();
@@ -6233,7 +6239,7 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
 	}
 	/** Report only real rows visible in the active, settled Threads view. */
 	hasActiveVisibleThreads() {
-		if (this.selectedMenu !== "threads" || this.settingsOpen || !this.areThreadEndpointsAvailable()) return false;
+		if (this.selectedMenu !== "threads" || this.settingsOpen || this.ephemeralThreadsSetupOpen || !this.areThreadEndpointsAvailable()) return false;
 		const { displayThreads, threadsErrorMessage, threadsLoading } = this.getActiveThreadsState();
 		return !threadsErrorMessage && !threadsLoading && displayThreads.length > 0;
 	}
@@ -8540,6 +8546,24 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
         );
       }
 
+      /* With no news or setup actions, the dismissal is the whole HUD. */
+      .cpk-launcher-hud[data-cpk-hud-dismiss-only] {
+        --hud-dismiss-day-height: 36px;
+        width: max-content;
+      }
+
+      .cpk-launcher-hud[data-cpk-hud-dismiss-only][data-cpk-hud-vertical="top"] {
+        top: calc((var(--cpk-launcher-size) - var(--hud-dismiss-day-height)) / 2);
+      }
+
+      .cpk-launcher-hud[data-cpk-hud-dismiss-only][data-cpk-hud-vertical="bottom"] {
+        bottom: calc((var(--cpk-launcher-size) - var(--hud-dismiss-day-height)) / 2);
+      }
+
+      .cpk-launcher-hud[data-cpk-hud-dismiss-only] .cpk-launcher-hud__card {
+        width: max-content;
+      }
+
       .cpk-launcher-hud__list {
         margin: 0;
         padding: 0;
@@ -8706,6 +8730,11 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
           color 120ms ease;
       }
 
+      .cpk-launcher-hud[data-cpk-hud-dismiss-only] .cpk-launcher-hud__dismiss-day {
+        font-size: 11px;
+        white-space: nowrap;
+      }
+
       .cpk-launcher-hud__dismiss-day:hover,
       .cpk-launcher-hud__dismiss-day:focus-visible {
         border-color: var(--hud-accent);
@@ -9925,6 +9954,7 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
 		return titleCharacters.length > HUD_ANNOUNCEMENT_TITLE_LIMIT ? `${titleCharacters.slice(0, HUD_ANNOUNCEMENT_TITLE_LIMIT).join("").trimEnd()}...` : title;
 	}
 	renderHudRow(args) {
+		if (args.connected) return lit.nothing;
 		const detailId = `cpk-hud-detail-${args.id}`;
 		return lit.html`
       <li
@@ -9996,11 +10026,13 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
 		const learningOn = homeModel.services.some((service) => service.id === "memory" && service.enabled);
 		const announcementTitle = this.getUnreadAnnouncementTitle();
 		const featureBlockIntroIndex = announcementTitle ? 1 : 0;
+		const dismissOnly = !announcementTitle && threadsOn && learningOn;
 		return lit.html`
       <div
         class="cpk-launcher-hud"
         id="cpk-launcher-hud"
         data-cpk-launcher-hud
+        ?data-cpk-hud-dismiss-only=${dismissOnly}
         data-cpk-hud-side=${this.launcherHudSide}
         data-cpk-hud-vertical=${this.contextState.button.anchor.vertical}
         data-cpk-hud-intro=${this.launcherHudIntro ? "true" : lit.nothing}
@@ -10010,7 +10042,9 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
 			"--cpk-launcher-hud-waterfall-duration": `${LAUNCHER_HUD_INTRO_MS.waterfallDuration}ms`
 		})}
       >
-        <span class="cpk-launcher-hud__arrow" aria-hidden="true"></span>
+        ${dismissOnly ? lit.nothing : lit.html`
+                <span class="cpk-launcher-hud__arrow" aria-hidden="true"></span>
+              `}
         <div class="cpk-launcher-hud__card">
           ${announcementTitle ? lit.html`
                   <div
@@ -10049,31 +10083,33 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
                     </div>
                   </div>
                 ` : lit.nothing}
-          <ul
-            class="cpk-launcher-hud__list cpk-launcher-hud__feature-list"
-            role="list"
-            style=${(0, lit_directives_style_map_js.styleMap)({ "--cpk-hud-waterfall-delay": launcherHudWaterfallDelay(featureBlockIntroIndex) })}
-          >
-            ${this.renderHudRow({
+          ${threadsOn && learningOn ? lit.nothing : lit.html`
+                  <ul
+                    class="cpk-launcher-hud__list cpk-launcher-hud__feature-list"
+                    role="list"
+                    style=${(0, lit_directives_style_map_js.styleMap)({ "--cpk-hud-waterfall-delay": launcherHudWaterfallDelay(featureBlockIntroIndex) })}
+                  >
+                    ${this.renderHudRow({
 			id: "threads",
 			label: HUD_THREADS_LABEL,
 			icon: "MessageSquare",
 			connected: threadsOn,
 			introIndex: featureBlockIntroIndex + 1
 		})}
-            ${this.renderHudRow({
+                    ${this.renderHudRow({
 			id: "learning",
 			label: HUD_LEARNING_LABEL,
 			icon: "Brain",
 			connected: learningOn,
-			introIndex: featureBlockIntroIndex + 2
+			introIndex: featureBlockIntroIndex + (threadsOn ? 1 : 2)
 		})}
-          </ul>
+                  </ul>
+                `}
           <button
             type="button"
             class="cpk-launcher-hud__dismiss-day"
             data-cpk-dismiss-inspector="day"
-            style=${(0, lit_directives_style_map_js.styleMap)({ "--cpk-hud-waterfall-delay": launcherHudWaterfallDelay(featureBlockIntroIndex + 3) })}
+            style=${(0, lit_directives_style_map_js.styleMap)({ "--cpk-hud-waterfall-delay": launcherHudWaterfallDelay(dismissOnly ? 0 : featureBlockIntroIndex + Number(!threadsOn) + Number(!learningOn) + 1) })}
             @click=${this.handleHudDismissDayClick}
             @pointerdown=${(event) => event.stopPropagation()}
           >
@@ -13482,23 +13518,6 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
       </div>
     `;
 	}
-	getThreadsLockedCopy() {
-		switch (this.inspectorMetadataProjection.licenseState) {
-			case "valid": return {
-				heading: "Finish setting up Rich Threads",
-				description: "Copy this prompt into your coding agent to finish the setup."
-			};
-			case "none":
-			case "unknown": return {
-				heading: "Production-grade chat threads without the complexity. Self hostable.",
-				description: "Chat threads that go beyond text with generative UI and multimodal inputs, built to replay missed events and stay in sync across tabs, sessions, and devices."
-			};
-			case "expired": return {
-				heading: "Renew Intelligence to inspect Threads.",
-				description: "Your Intelligence access has expired. Renew it to inspect saved thread history."
-			};
-		}
-	}
 	/**
 	* Renders the realtime-connection indicator in the memory-store header.
 	* Only `"connected"` shows the live (green-dot) state; `"connecting"` shows a
@@ -13549,7 +13568,7 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
 			videoTitle: "CopilotKit Learning overview",
 			outlineItems: LEARNING_LOCKED_FEATURE_OUTLINE,
 			setupPrompt: {
-				serviceId: "threads",
+				serviceId: "memory",
 				copyState: this.learningPromptCopyState,
 				onClick: (event) => void this.handleLearningSetupCopy(event)
 			}
@@ -13565,7 +13584,7 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
         .setupActive=${this.isLearningSetupActive()}
         .copyState=${this.learningPromptCopyState}
         .recopyState=${this.learningPromptRecopyState}
-        .setupPrompt=${this.getHomeFeaturePromptTarget("threads") ? require_home_briefing.homeFeatureImplementationPrompt(this.getHomeFeaturePromptTarget("threads"), { onboardingRunId: this.getOnboardingRunId() }) : ""}
+        .setupPrompt=${require_onboarding_prompt.createFeatureOnboardingPrompt("memory", this.getOnboardingRunId())}
         @learning-retry=${() => this.refreshLearningSnapshot({ preserve: this.learningSnapshot !== null })}
         @learning-copy-setup=${(event) => this.handleLearningSetupCopy(event)}
         @learning-recopy-setup=${(event) => this.handleLearningSetupCopy(event, true)}
@@ -13805,20 +13824,36 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
     `;
 	}
 	renderThreadsView() {
-		if (!this.areThreadEndpointsAvailable()) {
+		const { displayThreads, threadsErrorMessage, threadsLoading } = this.getActiveThreadsState();
+		const ephemeral = !this._core?.intelligence;
+		const available = this.areThreadEndpointsAvailable();
+		const hasEphemeralThreads = ephemeral && available && displayThreads.length > 0;
+		if (!ephemeral) this.ephemeralThreadsSetupOpen = false;
+		if (!available || ephemeral && displayThreads.length === 0 && !threadsLoading && !threadsErrorMessage || this.ephemeralThreadsSetupOpen) {
 			this.trackThreadsViewStateOnce("locked");
-			const lockedCopy = this.getThreadsLockedCopy();
-			return this.renderLockedFeatureOverview({
+			return lit.html`
+        ${hasEphemeralThreads ? lit.html`
+          <nav class="cpk-threads-setup-navigation" aria-label="Threads setup navigation">
+            <button type="button" class="cpk-threads-setup-back"
+              data-inspector-ephemeral-back
+              @click=${() => {
+				this.ephemeralThreadsSetupOpen = false;
+				this.requestUpdate();
+			}}>
+              <span aria-hidden="true">←</span> Back to your threads
+            </button>
+          </nav>
+        ` : lit.nothing}
+        ${this.renderLockedFeatureOverview({
 				serviceId: "threads",
 				featureName: "Rich Threads",
-				heading: lockedCopy.heading,
-				description: lockedCopy.description,
+				heading: THREADS_LOCKED_COPY.heading,
+				description: THREADS_LOCKED_COPY.description,
 				videoUrl: THREADS_LOCKED_VIDEO_URL,
 				videoTitle: "Rich Threads overview",
 				outlineItems: THREADS_LOCKED_FEATURE_OUTLINE
-			});
+			})}`;
 		}
-		const { displayThreads, threadsErrorMessage, threadsLoading } = this.getActiveThreadsState();
 		const loadingWithoutRows = threadsLoading && !threadsErrorMessage && displayThreads.length === 0;
 		const showingExamples = this.shouldRenderExampleThreads(displayThreads, threadsErrorMessage, threadsLoading);
 		const visibleThreads = threadsErrorMessage || loadingWithoutRows ? [] : showingExamples ? THREADS_EXAMPLE_THREADS : displayThreads;
@@ -13835,6 +13870,24 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
           <div
             style="width:${this.threadListWidth}px;flex-shrink:0;overflow:hidden;display:flex;flex-direction:column;border-right:1px solid #DBDBE5;"
           >
+        ${ephemeral ? lit.html`
+          <button type="button" class="cpk-ephemeral-threads-banner"
+            data-inspector-ephemeral-banner data-inspector-ephemeral-upgrade
+            aria-label="Make threads permanent. Ephemeral history can disappear on restart."
+            @click=${() => {
+			this.ephemeralThreadsSetupOpen = true;
+			this.requestUpdate();
+		}}>
+            <span class="cpk-ephemeral-threads-icon" aria-hidden="true">${this.renderIcon("Clock")}</span>
+            <span class="cpk-ephemeral-threads-copy">
+              <span class="cpk-ephemeral-threads-headline">
+                <strong>Keep your threads.</strong>
+              </span>
+              <span class="cpk-ephemeral-threads-description">Ephemeral history can disappear on restart.</span>
+              <span class="cpk-ephemeral-threads-upgrade">Make them permanent <span aria-hidden="true">${this.renderIcon("ArrowRight")}</span></span>
+            </span>
+          </button>
+        ` : lit.nothing}
             <cpk-thread-list
               style="min-height:0;flex:1;"
               data-color-scheme=${this.colorScheme}