@copilotkit/web-inspector 1.56.5-canary.1777972218 → 1.57.0

package/dist/index.cjs

@@ -1809,7 +1809,7 @@ ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(event.payload))}
 };
 if (!customElements.get("cpk-thread-list")) customElements.define("cpk-thread-list", CpkThreadList);
 if (!customElements.get("cpk-thread-details")) customElements.define("cpk-thread-details", ɵCpkThreadDetails);
-var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
+var WebInspectorElement = class extends lit.LitElement {
 	constructor(..._args3) {
 		super(..._args3);
 		this._core = null;
@@ -1821,6 +1821,7 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
 		this.agentSubscriptions = /* @__PURE__ */ new Map();
 		this.agentEvents = /* @__PURE__ */ new Map();
 		this.agentMessages = /* @__PURE__ */ new Map();
+		this.agentRunThreadId = /* @__PURE__ */ new Map();
 		this.liveMessageVersion = /* @__PURE__ */ new Map();
 		this.agentStates = /* @__PURE__ */ new Map();
 		this.flattenedEvents = [];
@@ -1867,12 +1868,6 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
 			150
 		];
 		this._evtColResize = null;
-		this._threadsUnlocked = false;
-		this._threadsUnlocking = false;
-		this._threadsGateError = null;
-		this._threadsGateCodeInvalid = false;
-		this._threadsGateInvalidTimer = null;
-		this._threadsUnlockingTimer = null;
 		this.announcementHtml = null;
 		this.announcementTimestamp = null;
 		this.announcementPreviewText = null;
@@ -2130,6 +2125,31 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
 		this.handleDismissAnnouncement = () => {
 			this.markAnnouncementSeen();
 		};
+		this.copyResetTimeouts = /* @__PURE__ */ new WeakMap();
+		this.handleAnnouncementContentClick = (event) => {
+			const button = (event.target instanceof HTMLElement ? event.target : null)?.closest(".announcement-code__copy");
+			if (!(button instanceof HTMLButtonElement)) return;
+			event.preventDefault();
+			event.stopPropagation();
+			const encoded = button.getAttribute("data-copy") ?? "";
+			const code = this.decodeBase64(encoded);
+			if (!code) return;
+			const showCopied = () => {
+				const existing = this.copyResetTimeouts.get(button);
+				if (existing !== void 0) window.clearTimeout(existing);
+				button.setAttribute("data-copied", "true");
+				button.setAttribute("aria-label", "Code copied");
+				button.textContent = "Copied";
+				const id = window.setTimeout(() => {
+					button.removeAttribute("data-copied");
+					button.setAttribute("aria-label", "Copy code");
+					button.textContent = "Copy";
+					this.copyResetTimeouts.delete(button);
+				}, 1500);
+				this.copyResetTimeouts.set(button, id);
+			};
+			if (typeof navigator !== "undefined" && navigator.clipboard?.writeText) navigator.clipboard.writeText(code).then(showCopied, () => {});
+		};
 	}
 	static {
 		this.properties = {
@@ -2297,6 +2317,12 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
 				this._threadsErrorByAgent.delete(agentId);
 				this._threads = Array.from(this._threadsByAgent.values()).flat();
 				this.requestUpdate();
+			},
+			onAgentRunStarted: ({ agent }) => {
+				this.subscribeToAgent(agent);
+				const runThreadId = agent.threadId;
+				if (agent.agentId && runThreadId) this.agentRunThreadId.set(agent.agentId, runThreadId);
+				this.requestUpdate();
 			}
 		};
 		this.coreUnsubscribe = core.subscribe(this.coreSubscriber).unsubscribe;
@@ -2535,7 +2561,7 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
 			const messages = this.normalizeAgentMessages(agent.messages);
 			if (messages) this.agentMessages.set(agent.agentId, messages);
 			else this.agentMessages.delete(agent.agentId);
-			const runThreadId = agent.threadId;
+			const runThreadId = this.agentRunThreadId.get(agent.agentId);
 			if (runThreadId) this.liveMessageVersion.set(runThreadId, (this.liveMessageVersion.get(runThreadId) ?? 0) + 1);
 			this.requestUpdate();
 		} catch (error) {
@@ -3001,43 +3027,61 @@ ${argsString}</pre
       }
 
       .announcement-content {
-        color: #010507;
-        font-size: 12px;
+        color: #1f2230;
+        font-size: 13px;
         font-family: "Plus Jakarta Sans", system-ui, sans-serif;
-        line-height: 1.5;
+        line-height: 1.55;
       }
 
       .announcement-content h1,
       .announcement-content h2,
       .announcement-content h3 {
+        color: #010507;
         font-weight: 700;
-        margin: 0.4rem 0 0.2rem;
+        line-height: 1.3;
+        margin: 0.9rem 0 0.4rem;
+      }
+      .announcement-content > h1:first-child,
+      .announcement-content > h2:first-child,
+      .announcement-content > h3:first-child {
+        margin-top: 0;
       }
 
       .announcement-content h1 {
-        font-size: 0.75rem;
+        font-size: 1.15rem;
+        letter-spacing: -0.01em;
       }
       .announcement-content h2 {
-        font-size: 0.8rem;
+        font-size: 1rem;
       }
       .announcement-content h3 {
-        font-size: 0.75rem;
+        font-size: 0.9rem;
+        text-transform: none;
       }
 
       .announcement-content p {
-        margin: 0.2rem 0;
+        margin: 0.45rem 0;
+      }
+
+      .announcement-content strong {
+        color: #010507;
+        font-weight: 700;
       }
 
       .announcement-content ul {
         list-style: disc;
         padding-left: 1.25rem;
-        margin: 0.2rem 0;
+        margin: 0.45rem 0;
       }
 
       .announcement-content ol {
         list-style: decimal;
         padding-left: 1.25rem;
-        margin: 0.2rem 0;
+        margin: 0.45rem 0;
+      }
+
+      .announcement-content li + li {
+        margin-top: 0.15rem;
       }
 
       .announcement-content a {
@@ -3045,6 +3089,96 @@ ${argsString}</pre
         text-decoration: underline;
       }
 
+      .announcement-content :not(pre) > code {
+        background: #f3f3f7;
+        border: 1px solid #e4e4ec;
+        border-radius: 4px;
+        padding: 1px 5px;
+        font-size: 0.85em;
+        color: #4a3a8a;
+      }
+
+      .announcement-code {
+        position: relative;
+        margin: 0.6rem 0;
+      }
+
+      .announcement-code pre {
+        background: #0f1117;
+        color: #e6e8f2;
+        border-radius: 8px;
+        padding: 10px 12px;
+        overflow-x: auto;
+        font-size: 12px;
+        line-height: 1.5;
+        white-space: pre;
+      }
+
+      .announcement-code pre code::after {
+        content: "";
+        display: inline-block;
+        width: 80px;
+      }
+
+      .announcement-code__copy-shield {
+        position: absolute;
+        top: 4px;
+        right: 4px;
+        padding: 4px 4px 4px 24px;
+        border-top-right-radius: 8px;
+        background: linear-gradient(
+          to right,
+          rgba(15, 17, 23, 0) 0%,
+          rgba(15, 17, 23, 0.95) 40%,
+          #0f1117 100%
+        );
+        pointer-events: none;
+      }
+
+      .announcement-code pre code {
+        background: transparent;
+        border: none;
+        padding: 0;
+        color: inherit;
+        font-size: inherit;
+      }
+
+      .announcement-code pre::-webkit-scrollbar {
+        height: 6px;
+      }
+      .announcement-code pre::-webkit-scrollbar-track {
+        background: transparent;
+      }
+      .announcement-code pre::-webkit-scrollbar-thumb {
+        background: rgba(255, 255, 255, 0.2);
+        border-radius: 3px;
+      }
+
+      .announcement-code__copy {
+        position: relative;
+        pointer-events: auto;
+        padding: 3px 8px;
+        font-family: "Plus Jakarta Sans", system-ui, sans-serif;
+        font-size: 11px;
+        font-weight: 600;
+        color: #e6e8f2;
+        background: #1f222d;
+        border: 1px solid rgba(255, 255, 255, 0.15);
+        border-radius: 5px;
+        cursor: pointer;
+        transition:
+          background 0.12s ease,
+          color 0.12s ease;
+      }
+      .announcement-code__copy:hover {
+        background: #2a2e3c;
+      }
+      .announcement-code__copy[data-copied="true"] {
+        background: #eee6fe;
+        color: #6430ab;
+        border-color: transparent;
+      }
+
       .announcement-body {
         position: relative;
         overflow: hidden;
@@ -3524,7 +3658,6 @@ ${argsString}</pre
                 </div>
               </div>
             </div>
-            ${this.renderAnnouncementBanner()}
             <div
               class="flex flex-wrap items-center gap-2 border-t border-gray-100 px-3 py-2 text-xs"
             >
@@ -3548,6 +3681,7 @@ ${argsString}</pre
           </div>
           <div class="flex flex-1 flex-col overflow-hidden">
             <div id="cpk-main-scroll" class="flex-1 overflow-auto">
+              ${this.renderAnnouncementBanner()}
               ${this.renderCoreWarningBanner()} ${this.renderMainContent()}
               <slot></slot>
             </div>
@@ -3595,7 +3729,6 @@ ${argsString}</pre
 	}
 	hydrateStateFromStorageEarly() {
 		if (typeof document === "undefined" || typeof window === "undefined") return;
-		if (document.cookie.includes("cpk_threads_access=1")) this._threadsUnlocked = true;
 		const persisted = require_persistence.loadInspectorState(INSPECTOR_STORAGE_KEY);
 		if (!persisted) return;
 		if (typeof persisted.isOpen === "boolean") this.isOpen = persisted.isOpen;
@@ -4071,364 +4204,7 @@ ${argsString}</pre
 		if (this.selectedMenu === "threads") return this.renderThreadsView();
 		return lit.nothing;
 	}
-	renderThreadsGate() {
-		return lit.html`
-      <div style="
-        position:relative;
-        display:flex;
-        flex-direction:column;
-        align-items:center;
-        justify-content:center;
-        padding:40px 24px;
-        min-height:100%;
-        text-align:center;
-        background:linear-gradient(135deg,#f5f4ff 0%,#ede9fe 100%);
-        overflow:hidden;
-      ">
-        <!-- Blurred ellipses from Figma/storybook -->
-        <div style="position:absolute;width:570px;height:570px;border-radius:50%;top:-80px;left:-120px;opacity:0.25;background:#757CF2;filter:blur(120px);pointer-events:none;"></div>
-        <div style="position:absolute;width:570px;height:570px;border-radius:50%;bottom:-100px;right:-80px;opacity:0.2;background:#FFAC4D;filter:blur(120px);pointer-events:none;"></div>
-        <div style="position:absolute;width:400px;height:400px;border-radius:50%;bottom:20px;left:-60px;opacity:0.15;background:#FFAC4D;filter:blur(100px);pointer-events:none;"></div>
-
-        ${this._threadsUnlocking ? this._renderUnlockingCard() : this._renderEarlyAccessCard()}
-      </div>
-    `;
-	}
-	static {
-		this.THREADS_REQUEST_URL = "https://r3x69.share-na2.hsforms.com/2uiZg8EkiT7a_KykeXV1ajQ";
-	}
-	_renderEarlyAccessCard() {
-		const invalid = this._threadsGateCodeInvalid;
-		return lit.html`
-      <div
-        style="
-          position:relative;
-          z-index:1;
-          background:#ffffff;
-          border:1px solid #E5E5EA;
-          border-radius:20px;
-          box-shadow:0 16px 48px rgba(1,5,7,0.12),0 2px 6px rgba(1,5,7,0.05);
-          padding:28px;
-          width:400px;
-          max-width:100%;
-          display:flex;
-          flex-direction:column;
-          gap:18px;
-          text-align:left;
-          font-family:'Plus Jakarta Sans', system-ui, sans-serif;
-        "
-      >
-        <!-- Kicker pill -->
-        <div>
-          <span
-            style="
-              display:inline-flex;
-              align-items:center;
-              gap:4px;
-              padding:4px 10px;
-              border-radius:999px;
-              background:#F3F3FC;
-              color:#757CF2;
-              font-family:'Spline Sans Mono', ui-monospace, monospace;
-              font-size:10px;
-              font-weight:500;
-              letter-spacing:0.08em;
-              text-transform:uppercase;
-            "
-            >Early Access</span
-          >
-        </div>
-
-        <!-- Title + description -->
-        <div style="display:flex;flex-direction:column;gap:8px;">
-          <h2
-            style="
-              font-family:'Plus Jakarta Sans', system-ui, sans-serif;
-              font-size:24px;
-              font-weight:700;
-              color:#010507;
-              line-height:1.2;
-              letter-spacing:-0.015em;
-              margin:0;
-            "
-          >
-            <span
-              style="
-                background:linear-gradient(90deg, #757CF2 0%, #5AE4BB 100%);
-                -webkit-background-clip:text;
-                background-clip:text;
-                color:transparent;
-                -webkit-text-fill-color:transparent;
-              "
-              >Threads</span
-            >
-            are in private beta
-          </h2>
-          <p
-            style="
-              font-size:14px;
-              font-weight:500;
-              color:#5C5C66;
-              line-height:1.55;
-              margin:0;
-            "
-          >
-            Spin up separate conversations with your agent, one per task, bug,
-            or feature, and jump back into any of them without losing context.
-          </p>
-        </div>
-
-        <!-- Bullets -->
-        <div
-          style="display:flex;flex-direction:column;gap:8px;padding:4px 0;"
-        >
-          ${[
-			"One agent, many conversations",
-			"Persistent history across sessions",
-			"Jump between threads in a click"
-		].map((label) => lit.html`
-              <div style="display:flex;align-items:center;gap:10px;">
-                <svg
-                  width="14"
-                  height="14"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="#010507"
-                  stroke-width="2.5"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  style="flex-shrink:0;"
-                >
-                  <polyline points="20 6 9 17 4 12"></polyline>
-                </svg>
-                <span style="font-size:13px;font-weight:500;color:#010507;"
-                  >${label}</span
-                >
-              </div>
-            `)}
-        </div>
-
-        <!-- Primary CTA: dark MonoPillButton with adjacent arrow circle -->
-        <div>
-          <a
-            href=${WebInspectorElement.THREADS_REQUEST_URL}
-            target="_blank"
-            rel="noopener noreferrer"
-            style="
-              display:inline-flex;
-              align-items:center;
-              gap:8px;
-              text-decoration:none;
-              cursor:pointer;
-            "
-          >
-            <span
-              style="
-                display:inline-flex;
-                align-items:center;
-                justify-content:center;
-                background:#010507;
-                color:#ffffff;
-                font-family:'Spline Sans Mono', ui-monospace, monospace;
-                font-size:13px;
-                font-weight:500;
-                letter-spacing:0.06em;
-                text-transform:uppercase;
-                padding:14px 22px;
-                border-radius:999px;
-                box-shadow:0 4px 12px rgba(1,5,7,0.18);
-              "
-              >Request Early Access</span
-            >
-            <span
-              style="
-                display:inline-flex;
-                align-items:center;
-                justify-content:center;
-                width:36px;
-                height:36px;
-                border-radius:999px;
-                background:#010507;
-                color:#ffffff;
-                box-shadow:0 4px 12px rgba(1,5,7,0.18);
-              "
-            >
-              <svg
-                width="14"
-                height="14"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              >
-                <line x1="5" y1="12" x2="19" y2="12"></line>
-                <polyline points="12 5 19 12 12 19"></polyline>
-              </svg>
-            </span>
-          </a>
-        </div>
-
-        <!-- Divider + invite-code section -->
-        <div
-          style="
-            display:flex;
-            flex-direction:column;
-            gap:8px;
-            padding-top:14px;
-            border-top:1px dashed #E5E5EA;
-          "
-        >
-          <span style="font-size:12px;font-weight:500;color:#8A8A94;"
-            >Have an invite code?</span
-          >
-          <div style="display:flex;gap:8px;">
-            <div
-              style="
-                flex:1;
-                background:#ffffff;
-                border:1px solid ${invalid ? "#FA5F67" : "#E5E5EA"};
-                border-radius:10px;
-                padding:2px 4px 2px 12px;
-                transition:border-color 150ms ease;
-              "
-            >
-              <input
-                id="cpk-gate-input"
-                type="text"
-                placeholder="Enter access code"
-                style="
-                  width:100%;
-                  padding:10px 0;
-                  font-family:'Plus Jakarta Sans', system-ui, sans-serif;
-                  font-size:13px;
-                  font-weight:500;
-                  color:#010507;
-                  background:transparent;
-                  border:none;
-                  outline:none;
-                "
-                @keydown=${(e) => {
-			if (e.key === "Enter") this._submitThreadsCode(e.currentTarget.value);
-		}}
-              />
-            </div>
-            <button
-              style="
-                background:#010507;
-                color:#ffffff;
-                border:none;
-                border-radius:10px;
-                padding:0 16px;
-                font-family:'Spline Sans Mono', ui-monospace, monospace;
-                font-size:11px;
-                font-weight:500;
-                letter-spacing:0.06em;
-                text-transform:uppercase;
-                cursor:pointer;
-                white-space:nowrap;
-              "
-              @click=${() => {
-			const input = this.shadowRoot?.getElementById("cpk-gate-input");
-			if (input) this._submitThreadsCode(input.value);
-		}}
-            >
-              Unlock
-            </button>
-          </div>
-          ${invalid ? lit.html`
-                  <div style="font-size: 11px; font-weight: 500; color: #fa5f67">
-                    That code isn't valid. Double-check your invite email.
-                  </div>
-                ` : lit.nothing}
-        </div>
-      </div>
-    `;
-	}
-	_renderUnlockingCard() {
-		return lit.html`
-      <div
-        style="
-          position: relative;
-          z-index: 1;
-          background: #ffffff;
-          border: 1px solid #e5e5ea;
-          border-radius: 20px;
-          box-shadow:
-            0 16px 48px rgba(1, 5, 7, 0.12),
-            0 2px 6px rgba(1, 5, 7, 0.05);
-          padding: 32px;
-          width: 340px;
-          max-width: 100%;
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-          gap: 16px;
-          text-align: center;
-          font-family: &quot;Plus Jakarta Sans&quot;, system-ui, sans-serif;
-        "
-      >
-        <div
-          style="
-            width: 56px;
-            height: 56px;
-            border-radius: 999px;
-            background: linear-gradient(135deg, #bec2ff 0%, #85ecce 100%);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-          "
-        >
-          <svg
-            width="24"
-            height="24"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="#010507"
-            stroke-width="2.5"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          >
-            <polyline points="20 6 9 17 4 12"></polyline>
-          </svg>
-        </div>
-        <div style="font-size: 18px; font-weight: 700; color: #010507">
-          Welcome to Threads
-        </div>
-        <div style="font-size: 13px; color: #5c5c66; line-height: 1.5">
-          Loading your conversations…
-        </div>
-      </div>
-    `;
-	}
-	_submitThreadsCode(value) {
-		if (value.trim().toLowerCase() === "earlyaccess") {
-			document.cookie = "cpk_threads_access=1; path=/; max-age=31536000; SameSite=Lax";
-			this._threadsGateError = null;
-			this._threadsGateCodeInvalid = false;
-			this._threadsUnlocking = true;
-			if (this._threadsUnlockingTimer !== null) clearTimeout(this._threadsUnlockingTimer);
-			this._threadsUnlockingTimer = setTimeout(() => {
-				this._threadsUnlocking = false;
-				this._threadsUnlocked = true;
-				this._threadsUnlockingTimer = null;
-				this.requestUpdate();
-			}, 2e3);
-		} else {
-			this._threadsGateCodeInvalid = true;
-			this._threadsGateError = null;
-			if (this._threadsGateInvalidTimer !== null) clearTimeout(this._threadsGateInvalidTimer);
-			this._threadsGateInvalidTimer = setTimeout(() => {
-				this._threadsGateCodeInvalid = false;
-				this._threadsGateInvalidTimer = null;
-				this.requestUpdate();
-			}, 1600);
-		}
-		this.requestUpdate();
-	}
 	renderThreadsView() {
-		if (!this._threadsUnlocked) return this.renderThreadsGate();
 		const displayThreads = this.selectedContext === "all-agents" ? this._threads : this._threadsByAgent.get(this.selectedContext) ?? [];
 		let threadsErrorMessage = null;
 		if (this.selectedContext === "all-agents") threadsErrorMessage = this._threadsErrorByAgent.values().next().value?.message ?? null;
@@ -5515,7 +5291,7 @@ ${prettyEvent}</pre
         <span>Loading latest announcement…</span>
       </div>`;
 		if (!this.announcementHtml) return lit.nothing;
-		return lit.html`<div class="mx-4 mb-3 rounded-xl border border-slate-200 bg-white px-4 py-3">
+		return lit.html`<div class="mx-4 mt-3 mb-3 rounded-xl border border-slate-200 bg-white px-4 py-3">
       <div
         class="mb-2 flex items-center gap-2 text-xs font-semibold text-slate-900"
       >
@@ -5535,7 +5311,10 @@ ${prettyEvent}</pre
         </button>
       </div>
       <div class="announcement-body ${this.announcementExpanded ? "announcement-body--expanded" : "announcement-body--collapsed"}">
-        <div class="announcement-content">
+        <div
+          class="announcement-content"
+          @click=${this.handleAnnouncementContentClick}
+        >
           ${(0, lit_directives_unsafe_html_js.unsafeHTML)(this.announcementHtml)}
         </div>
         ${!this.announcementExpanded ? lit.html`
@@ -5602,7 +5381,28 @@ ${prettyEvent}</pre
 		renderer.link = (href, title, text) => {
 			return `<a href="${this.escapeHtmlAttr(this.appendRefParam(href ?? ""))}" target="_blank" rel="noopener"${title ? ` title="${this.escapeHtmlAttr(title)}"` : ""}>${text}</a>`;
 		};
-		return marked.marked.parse(markdown, { renderer });
+		renderer.code = (code, lang) => {
+			const safeLang = (lang ?? "").replace(/[^a-z0-9-]/gi, "");
+			return `<div class="announcement-code"><pre><code${safeLang ? ` class="language-${safeLang}"` : ""}>${escapeHtml(code)}</code></pre><div class="announcement-code__copy-shield"><button type="button" class="announcement-code__copy" data-copy="${this.encodeBase64(code)}" aria-label="Copy code">Copy</button></div></div>`;
+		};
+		return marked.marked.parse(markdown, {
+			renderer,
+			async: false
+		});
+	}
+	encodeBase64(value) {
+		if (typeof window === "undefined" || typeof window.btoa !== "function") return "";
+		const bytes = new TextEncoder().encode(value);
+		let binary = "";
+		for (const b of bytes) binary += String.fromCharCode(b);
+		return window.btoa(binary);
+	}
+	decodeBase64(value) {
+		if (typeof window === "undefined" || typeof window.atob !== "function") return "";
+		const decoded = window.atob(value);
+		const bytes = new Uint8Array(decoded.length);
+		for (let i = 0; i < decoded.length; i++) bytes[i] = decoded.charCodeAt(i);
+		return new TextDecoder().decode(bytes);
 	}
 	appendRefParam(href) {
 		try {
@@ -5614,7 +5414,7 @@ ${prettyEvent}</pre
 		}
 	}
 	escapeHtmlAttr(value) {
-		return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+		return escapeHtml(value).replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 	}
 	loadStoredAnnouncementTimestamp() {
 		if (typeof window === "undefined" || !window.localStorage) return null;