@copilotkit/web-inspector 1.73.0 → 1.73.1

package/dist/index.mjs

@@ -27,7 +27,7 @@ const THREAD_INSPECTOR_TAG = "cpk-thread-inspector";
 * User-facing label for the learning view. The legacy menu key stays
 * "memories" for persistence and telemetry stability.
 */
-const LEARNING_VIEW_LABEL = "Learning";
+const LEARNING_VIEW_LABEL = "Automatic Learning";
 const LEARNING_RECOPY_CONFIRMATION_MS = 2e3;
 /**
 * User-facing label for the What's new view. Its menu key stays `whats-new`
@@ -291,17 +291,17 @@ const SELF_HOSTED_INTELLIGENCE_URL = "https://docs.copilotkit.ai/intelligence/se
 const INTELLIGENCE_STORY_BEATS = [
 	{
 		id: "threads",
-		label: "Threads",
+		label: "Rich 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",
+		label: "Automatic 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."
+		support: "Automatic Learning reads the runs behind those threads and finds the patterns — every Insight linked to the messages that back it."
 	},
 	{
 		id: "skill",
@@ -391,7 +391,7 @@ const INTELLIGENCE_STORY_CHAIN = [
 	}
 ];
 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_OVERVIEW_VIDEO_FALLBACK = "The demo video is unavailable. Use the example threads to explore Conversation, AG-UI Events, and State.";
 const THREADS_LOCKED_VIDEO_URL = "https://www.loom.com/embed/79817778d29e490c97225127d2f17b3a?hide_owner=true&hide_share=true&hide_title=true&hideEmbedTopBar=true&hide_speed=true";
 const LEARNING_LOCKED_VIDEO_URL = "https://www.loom.com/embed/2978fbfe42324e509057ac5fd46b7a70?hide_owner=true&hide_share=true&hide_title=true&hideEmbedTopBar=true&hide_speed=true";
 const THREADS_LOCKED_FEATURE_OUTLINE = [
@@ -739,9 +739,9 @@ const THREADS_EXAMPLE_DETAILS = {
 const THREADS_EXAMPLE_TOUR_STEPS = [
 	{
 		tab: "timeline",
-		label: "Messages",
+		label: "Conversation",
 		title: "Read the run as a story",
-		body: "The timeline turns messages, tool calls, state changes, and run markers into a scannable debugging trail."
+		body: "Read messages and tool calls as a conversation. Switch to the event timeline to inspect state changes and run markers."
 	},
 	{
 		tab: "raw-events",
@@ -1235,6 +1235,7 @@ var CpkThreadList = class extends PortableLitElement {
 var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
 	constructor(..._args2) {
 		super(..._args2);
+		this.showThreadTitle = true;
 		this.threadId = null;
 		this.provider = null;
 		this.thread = null;
@@ -1253,6 +1254,7 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
 		this.tryFromHereBusy = false;
 		this.tryFromHereError = null;
 		this._tab = "timeline";
+		this._showEventTimeline = false;
 		this._fetchedMetadata = null;
 		this._conversation = [];
 		this._fetchedEvents = null;
@@ -1324,6 +1326,10 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
 	static {
 		this.properties = {
 			threadId: { attribute: false },
+			showThreadTitle: {
+				type: Boolean,
+				attribute: false
+			},
 			provider: { attribute: false },
 			thread: { attribute: false },
 			runtimeUrl: { attribute: false },
@@ -1373,7 +1379,7 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
 		this.TAB_LIST = [
 			{
 				id: "timeline",
-				label: "Messages"
+				label: "Conversation"
 			},
 			{
 				id: "raw-events",
@@ -1415,8 +1421,17 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
 	static headersLoadKey(headers) {
 		return JSON.stringify(Object.entries(headers).sort(([leftKey], [rightKey]) => leftKey.localeCompare(rightKey)));
 	}
+	renderConversationActions() {
+		return html`<div class="cpk-td__timeline-toolbar">
+        <button type="button" class="cpk-td__timeline-bulk-toggle" aria-pressed=${this._showEventTimeline} @click=${() => {
+			this._showEventTimeline = !this._showEventTimeline;
+			this.requestUpdate();
+		}}>${this._showEventTimeline ? "Show conversation" : "Show event timeline"}</button>
+        ${this.renderTryFromHereControl()}
+      </div>`;
+	}
 	renderTabContent(id) {
-		if (id === "timeline") return this.withMessagesToolbar(this.renderTimeline());
+		if (id === "timeline") return html`${this._showEventTimeline ? html`<div class="cpk-td__timeline-toolbar">${this.renderTimelineBulkButtons()}</div>${this.renderTimeline()}` : this._conversation.length || this._loadingMessages || this._messagesError ? this.renderConversation() : this.renderTimeline()}`;
 		if (id === "state") return this.renderState();
 		return this.renderEvents();
 	}
@@ -1623,6 +1638,49 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
       margin-inline-start: 0;
     }
 
+    .cpk-td__thread-header {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: 10px 16px;
+      padding: 12px 16px;
+      flex-shrink: 0;
+      border-bottom: 1px solid #dbdbe540;
+    }
+    .cpk-td__thread-title {
+      flex: 1 1 180px;
+      min-width: 0;
+      overflow-wrap: anywhere;
+      font-size: 15px;
+      font-weight: 600;
+    }
+    .cpk-td__pinned-actions {
+      margin-left: auto;
+      max-width: 100%;
+    }
+    .cpk-td__pinned-actions .cpk-td__timeline-toolbar {
+      justify-content: flex-end;
+    }
+
+    :host([data-color-scheme="dark"]) .cpk-td__bubble-inner--assistant {
+      background: transparent;
+      color: #e7e7ed;
+    }
+    :host([data-color-scheme="dark"]) .cpk-td__bubble-inner--user {
+      background: #27272a;
+      color: #f4f4f5;
+    }
+    :host([data-color-scheme="dark"]) .cpk-td__show-more {
+      color: #c5b5ff;
+    }
+    .cpk-td__timeline-bulk-toggle[aria-pressed="true"] {
+      background: #ece7fa;
+      color: #51418b;
+    }
+    .cpk-td__bubble-inner {
+      line-height: 1.65;
+      overflow-wrap: anywhere;
+    }
     .cpk-td__metadata-strip {
       display: flex;
       flex-direction: column;
@@ -1868,7 +1926,7 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
     /* ── Conversation bubbles ────────────────────────────────────────── */
     .cpk-td__bubble {
       display: flex;
-      margin-bottom: 2px;
+      margin-bottom: 10px;
     }
 
     .cpk-td__bubble--user {
@@ -1880,16 +1938,16 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
     }
 
     .cpk-td__bubble-inner {
-      padding: 9px 14px;
-      max-width: 75%;
-      font-size: 13px;
-      line-height: 1.55;
+      padding: 10px 16px;
+      max-width: 80%;
+      font-size: 14px;
+      line-height: 1.65;
     }
 
     .cpk-td__bubble-inner--user {
-      background: #eee6fe;
-      color: #57575b;
-      border-radius: 12px 12px 4px 12px;
+      background: #f4f4f5;
+      color: #18181b;
+      border-radius: 18px;
     }
 
     .cpk-td__show-more {
@@ -1904,16 +1962,17 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
     }
 
     .cpk-td__bubble-inner--assistant {
-      background: #f7f7f9;
+      background: transparent;
       color: #010507;
-      border-radius: 12px 12px 12px 4px;
-      border: 1px solid #e9e9ef;
+      max-width: 100%;
+      padding: 4px 0;
+      border: 0;
     }
 
     /* ── Tool call blocks ────────────────────────────────────────────── */
     .cpk-td__tool-block {
       border: 1px solid #e9e9ef;
-      border-radius: 7px;
+      border-radius: 12px;
       overflow: hidden;
     }
 
@@ -1921,34 +1980,38 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
       display: flex;
       align-items: center;
       gap: 6px;
-      padding: 6px 10px;
-      background: rgba(133, 236, 206, 0.15);
+      padding: 12px;
+      background: #ffffff;
+      color: #71717a;
       cursor: pointer;
       font-size: 11px;
       user-select: none;
     }
 
     .cpk-td__tool-header:hover {
-      background: rgba(133, 236, 206, 0.22);
+      background: #fafafa;
     }
 
     .cpk-td__tool-name {
-      font-family: "Spline Sans Mono", monospace;
-      font-size: 10px;
+      font-size: 13px;
       font-weight: 500;
-      color: #087653;
-      text-transform: uppercase;
+      color: #18181b;
+      overflow-wrap: anywhere;
+      min-width: 0;
       flex: 1;
     }
 
     .cpk-td__tool-status {
-      font-family: "Spline Sans Mono", monospace;
-      font-size: 9px;
-      text-transform: uppercase;
-      color: #087653;
+      font-size: 10px;
+      font-weight: 500;
+      padding: 3px 7px;
+      border-radius: 999px;
+      background: #d1fae5;
+      color: #065f46;
     }
 
     .cpk-td__tool-status--pending {
+      background: #fef3c7;
       color: #8a5900;
     }
 
@@ -2256,21 +2319,25 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
       display: flex;
       flex-direction: column;
       gap: 6px;
-      padding: 4px 16px 8px;
+      padding: 0;
       animation: cpk-genui-enter 0.25s cubic-bezier(0.16, 1, 0.3, 1) both;
     }
 
     .cpk-td__genui-badge {
-      display: inline-flex;
-      align-items: center;
-      gap: 4px;
-      padding: 2px 8px;
-      border-radius: 5px;
-      background: #eee6fe;
+      display: flex;
+      align-items: baseline;
+      flex-wrap: wrap;
+      gap: 6px;
+      padding: 12px;
+      min-height: 44px;
+      box-sizing: border-box;
+      border: 1px solid #e5def5;
+      border-radius: 12px;
+      background: #f7f4fc;
       color: #57575b;
-      font-size: 10px;
-      font-weight: 600;
-      align-self: flex-start;
+      font-size: 13px;
+      line-height: 20px;
+      font-weight: 500;
     }
 
     .cpk-td__genui-card {
@@ -2281,13 +2348,32 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
       box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08);
     }
 
-    .cpk-td__genui-placeholder {
-      padding: 8px 12px;
-      border-radius: 10px;
-      border: 1px solid #ede9fe;
-      background: #f5f3ff;
-      color: #7c3aed;
-      font-size: 11px;
+    .cpk-td__genui-component {
+      margin-left: 6px;
+      font-size: 13px;
+      font-weight: 400;
+      overflow-wrap: anywhere;
+      min-width: 0;
+      line-height: inherit;
+    }
+
+    :host([data-color-scheme="dark"]) .cpk-td__genui-badge {
+      border-color: #49405f;
+    }
+
+    :host([data-color-scheme="dark"]) .cpk-td__tool-header {
+      background: #191c24;
+    }
+    :host([data-color-scheme="dark"]) .cpk-td__tool-name {
+      color: #f4f4f5;
+    }
+    :host([data-color-scheme="dark"]) .cpk-td__tool-status {
+      background: #17392e;
+      color: #6ee7b7;
+    }
+    :host([data-color-scheme="dark"]) .cpk-td__tool-status--pending {
+      background: #3d3019;
+      color: #fbbf24;
     }
 
     /* ── AG-UI Events ────────────────────────────────────────────────── */
@@ -2527,7 +2613,6 @@ 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,
     :host([data-color-scheme="dark"]) .cpk-td__genui-card,
@@ -3500,7 +3585,10 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
             ${viewInApp !== nothing ? html`<div class="cpk-td__chrome-actions">${viewInApp}</div>` : nothing}
             ${this.renderPanelToggle()}
           </div>
-          ${this.renderMetadataStrip()}
+          <div class="cpk-td__thread-header">
+            ${this.showThreadTitle ? html`<div class="cpk-td__thread-title">${this.metadata?.name || this.thread?.name || "Rich Thread"}</div>` : nothing}
+            ${this._tab === "timeline" ? html`<div class="cpk-td__pinned-actions">${this.renderConversationActions()}</div>` : nothing}
+          </div>
 
           <!-- Scrollable content -->
           <div class="cpk-td__content">
@@ -3543,60 +3631,6 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
           ${this.renderDetailPanel()}
         </div>
       </div>
-    `;
-	}
-	renderMetadataStrip() {
-		const metadata = this.metadata;
-		const pills = [{
-			label: "Name",
-			value: metadata?.name ?? this.thread?.name ?? "Untitled"
-		}, {
-			label: "ID",
-			value: metadata?.id ?? this.threadId ?? "—"
-		}];
-		for (const fact of [
-			{
-				label: "Agent",
-				value: metadata?.agentId
-			},
-			{
-				label: "Created",
-				value: metadata?.createdAt
-			},
-			{
-				label: "Updated",
-				value: metadata?.updatedAt
-			}
-		]) {
-			if (fact.value == null || fact.value === "") continue;
-			pills.push({
-				label: fact.label,
-				value: fact.label === "Created" || fact.label === "Updated" ? this.fmtTime(fact.value) : fact.value
-			});
-		}
-		return html`
-      <div
-        class="cpk-td__metadata-strip"
-        role="group"
-        aria-label="Thread metadata"
-      >
-        <div class="cpk-td__metadata-pills">
-          ${pills.map((pill) => html`
-              <span
-                class="cpk-td__metadata-pill ${pill.wrap ? "cpk-td__metadata-pill--wrap" : ""}"
-                role="group"
-                title=${pill.value}
-                aria-label=${`${pill.label}: ${pill.value}`}
-              >
-                <span class="cpk-td__metadata-label">${pill.label}</span>
-                <span
-                  class="cpk-td__metadata-value ${pill.wrap ? "cpk-td__metadata-value--wrap" : ""}"
-                  >${pill.value}</span
-                >
-              </span>
-            `)}
-        </div>
-      </div>
     `;
 	}
 	renderViewInAppAction() {
@@ -3653,57 +3687,33 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
             >${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;
+		const allExpanded = detailIds.every((id) => this._expandedTimelineDetails.has(id));
 		return html`
       <button
         type="button"
         class="cpk-td__timeline-bulk-toggle"
-        ?disabled=${detailIds.every((id) => this._expandedTimelineDetails.has(id))}
-        @click=${() => this.expandTimelineDetails(detailIds)}
-      >
-        Expand all
-      </button>
-      <button
-        type="button"
-        class="cpk-td__timeline-bulk-toggle"
-        ?disabled=${detailIds.every((id) => !this._expandedTimelineDetails.has(id))}
-        @click=${() => this.collapseTimelineDetails(detailIds)}
+        @click=${() => allExpanded ? this.collapseTimelineDetails(detailIds) : this.expandTimelineDetails(detailIds)}
       >
-        Collapse all
+        ${allExpanded ? "Collapse all" : "Expand all"}
       </button>
     `;
 	}
 	renderRawEventBulkControls() {
 		const eventIds = this.activeEvents.map((event) => this.rawEventId(event));
 		if (eventIds.length <= 1) return nothing;
+		const allExpanded = eventIds.every((id) => this._expandedRawEvents.has(id));
 		return html`<div class="cpk-td__timeline-toolbar">
       <button
         type="button"
         class="cpk-td__timeline-bulk-toggle"
-        ?disabled=${eventIds.every((id) => this._expandedRawEvents.has(id))}
-        @click=${() => this.expandRawEventDetails(eventIds)}
-      >
-        Expand all
-      </button>
-      <button
-        type="button"
-        class="cpk-td__timeline-bulk-toggle"
-        ?disabled=${eventIds.every((id) => !this._expandedRawEvents.has(id))}
-        @click=${() => this.collapseRawEventDetails(eventIds)}
+        @click=${() => allExpanded ? this.collapseRawEventDetails(eventIds) : this.expandRawEventDetails(eventIds)}
       >
-        Collapse all
+        ${allExpanded ? "Collapse all" : "Expand all"}
       </button>
     </div>`;
 	}
@@ -3715,9 +3725,6 @@ 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>
@@ -3922,11 +3929,13 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
       <div
         class="cpk-td__bubble ${isUser ? "cpk-td__bubble--user" : "cpk-td__bubble--assistant"}"
         data-message-id=${item.id}
+        role="group"
+        aria-label=${isUser ? "User message" : "Assistant message"}
       >
         <div
           class="cpk-td__bubble-inner ${isUser ? "cpk-td__bubble-inner--user" : "cpk-td__bubble-inner--assistant"}"
         >
-          ${shown}
+          <div style="white-space:pre-wrap">${shown}</div>
           ${tooLong ? html`<span
                 class="cpk-td__show-more"
                 @click=${() => this.toggleMessageExpand(item.id)}
@@ -3947,7 +3956,7 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
           <svg width="10" height="10" viewBox="0 0 10 10" fill="none">
             <path
               d="M1 9C1 9 2 7 5 7C8 7 9 9 9 9M5 1C5 1 7 2.5 7 4.5C7 6.5 5 7 5 7C5 7 3 6.5 3 4.5C3 2.5 5 1 5 1Z"
-              stroke="#087653"
+              stroke="currentColor"
               stroke-width="1.2"
               stroke-linecap="round"
               stroke-linejoin="round"
@@ -3955,9 +3964,9 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
           </svg>
           <span class="cpk-td__tool-name">${item.toolName}</span>
           ${item.result || Object.keys(item.arguments).length > 0 ? html`
-                  <span class="cpk-td__tool-status">DONE</span>
+                  <span class="cpk-td__tool-status">Complete</span>
                 ` : html`
-                  <span class="cpk-td__tool-status cpk-td__tool-status--pending">PENDING</span>
+                  <span class="cpk-td__tool-status cpk-td__tool-status--pending">Pending</span>
                 `}
           <span class="cpk-td__tool-chevron">${expanded ? "▾" : "▸"}</span>
         </div>
@@ -3996,10 +4005,8 @@ var CpkThreadInspector = class CpkThreadInspector extends PortableLitElement {
           <svg width="9" height="9" viewBox="0 0 24 24" fill="currentColor">
             <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" />
           </svg>
-          Generative UI
-        </div>
-        <div class="cpk-td__genui-placeholder">
-          ${item.activityType} — rendered in chat
+          <span>Generative UI</span>
+          <code class="cpk-td__genui-component">${item.activityType}</code>
         </div>
       </div>
     `;
@@ -4993,7 +5000,8 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 		this.requestedThreadId = null;
 		this.focusedThreadMessageId = null;
 		this.threadFocusRequestId = 0;
-		this.threadListWidth = 290;
+		this.threadListWidth = 240;
+		this.threadListCollapsed = false;
 		this.threadDividerResizing = false;
 		this.threadDividerPointerId = -1;
 		this.threadDividerStartX = 0;
@@ -6127,7 +6135,7 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 			},
 			{
 				key: "threads",
-				label: "Threads",
+				label: "Rich Threads",
 				icon: "MessageSquare"
 			},
 			{
@@ -10256,7 +10264,7 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 		const renewing = action?.kind === "renew";
 		if (!connected && action) {
 			const stateLabel = renewing ? "Intelligence plan expired" : "Intelligence is off";
-			const setupLabel = renewing ? "Renew to restore access" : "Set up Threads and Memory";
+			const setupLabel = renewing ? "Renew to restore access" : "Connect Intelligence";
 			return html`
         <a
           class="inspector-sidebar-status-card inspector-sidebar-intelligence inspector-sidebar-intelligence-setup"
@@ -10266,7 +10274,7 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
           href=${action.url}
           target="_blank"
           rel="noopener noreferrer"
-          aria-label="${action.label} to enable Threads and Memory (opens in a new tab)"
+          aria-label="${action.label} to enable Rich Threads and Automatic Learning (opens in a new tab)"
           title=${action.label}
           style=${INTERACTIVE_FOCUS_BASE_STYLE}
           @click=${() => this.handleHomeHeroCta(action)}
@@ -10282,10 +10290,10 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
       `;
 		}
 		const primaryLabel = connected ? organizationName ?? "Intelligence" : "Intelligence unavailable";
-		const secondaryLabel = connected ? planLabel ? `${planLabel} plan` : "Connected" : "Threads and Memory are off";
+		const secondaryLabel = connected ? planLabel ? `${planLabel} plan` : "Connected" : "Rich Threads and Automatic Learning are off";
 		const label = connected ? `${primaryLabel}, ${secondaryLabel}, Intelligence connected` : "Connect Intelligence";
 		const actionLabel = action?.label;
-		const description = connected ? `${secondaryLabel} · Intelligence connected` : "Threads and Memory need Intelligence.";
+		const description = connected ? `${secondaryLabel} · Intelligence connected` : "Rich Threads and Automatic Learning need Intelligence.";
 		return html`
       <section
         class="inspector-sidebar-status-card inspector-sidebar-intelligence"
@@ -10349,15 +10357,17 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 	}
 	renderHomeView() {
 		const model = this.getHomeModel();
+		const connected = model.hero.connection === "connected";
 		return html`
       <div
         class="inspector-home"
         data-inspector-home
-        data-inspector-home-state=${model.hero.connection === "connected" ? "connected" : "disconnected"}
+        data-inspector-home-state=${connected ? "connected" : "disconnected"}
       >
         ${this.renderHomeWhatsNewPreview(model.news)}
-        ${this.renderHomeSystemHealth(model)}
-        ${this.renderHomeIntelligenceHud(model)}
+        <header class="inspector-home-heading"><div><h1>${connected ? model.project?.projectName ?? "Your agent workspace" : "Welcome to Intelligence"}</h1><p>${connected ? "Inspect conversations and see what your agent is learning." : "Connect your agent. Intelligence learns from experience."}</p></div></header>
+        ${connected ? this.renderHomeSystemHealth(model) : this.renderHomeIntelligenceHud(model)}
+        ${connected ? this.renderHomeIntelligenceHud(model) : this.renderHomeSystemHealth(model)}
         ${this.renderHomeFeatures(model)}
       </div>
     `;
@@ -10638,7 +10648,7 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
           class="inspector-home-section-header inspector-system-health-header"
         >
           <div class="inspector-system-health-heading">
-            <h1 class="inspector-home-section-title">System Health</h1>
+            <h2 class="inspector-home-section-title">System Health</h2>
           </div>
           <span
             class="inspector-system-health-state"
@@ -13560,7 +13570,7 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 			setupActive: this.isLearningSetupActive()
 		}) === "landing") return this.renderLockedFeatureOverview({
 			serviceId: "memory",
-			featureName: "Learning",
+			featureName: "Automatic Learning",
 			heading: "Turn every interaction into reusable context.",
 			description: "Learning captures durable information from agent interactions and brings it back when it matters, so your product gets more useful over time.",
 			videoUrl: LEARNING_LOCKED_VIDEO_URL,
@@ -13606,7 +13616,7 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
 	renderLegacyMemoriesView() {
 		if (!this.getHomeModel().services.some((service) => service.id === "memory" && service.enabled)) return this.renderLockedFeatureOverview({
 			serviceId: "memory",
-			featureName: "Learning",
+			featureName: "Automatic Learning",
 			heading: this._memoryStoreUnsupported ? "Upgrade to enable Learning" : "Turn every interaction into reusable context.",
 			description: this._memoryStoreUnsupported ? "Learning requires a newer version of @copilotkit/core and @copilotkit/react. Copy the setup prompt to upgrade and add long-term memory." : "Learning captures durable information from agent interactions and brings it back when it matters, so your product gets more useful over time.",
 			videoUrl: LEARNING_LOCKED_VIDEO_URL,
@@ -13864,10 +13874,14 @@ var WebInspectorElement = class WebInspectorElement extends LitElement {
       <div
         style="display:flex;height:100%;overflow:hidden;flex-direction:column;"
       >
+        <div class="inspector-thread-heading"><strong>Rich Threads</strong><button type="button" class="inspector-text-button" aria-expanded=${!this.threadListCollapsed} @click=${() => {
+			this.threadListCollapsed = !this.threadListCollapsed;
+			this.requestUpdate();
+		}}>${this.threadListCollapsed ? "Show thread list" : "Hide thread list"}</button></div>
         <div style="display:flex;min-height:0;flex:1;overflow:hidden;">
           <!-- Left sidebar: thread list -->
           <div
-            style="width:${this.threadListWidth}px;flex-shrink:0;overflow:hidden;display:flex;flex-direction:column;border-right:1px solid #DBDBE5;"
+            style="display:${this.threadListCollapsed ? "none" : "flex"};width:${this.threadListWidth}px;flex-shrink:0;overflow:hidden;flex-direction:column;border-right:1px solid #DBDBE5;"
           >
         ${ephemeral ? html`
           <button type="button" class="cpk-ephemeral-threads-banner"