@copilotkit/web-inspector 1.70.0 → 1.70.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.cjs CHANGED
@@ -112,20 +112,15 @@ const EVENT_ERROR_GUIDANCE = {
112
112
  * an announcement, and it would double the spoken length.
113
113
  */
114
114
  const PILL_SUBLINE_LABEL = "Open Inspector for details";
115
- const HUD_OPEN_INSPECTOR_LABEL = "Open Inspector";
116
- const HUD_THREADS_OFF_LABEL = "Turn on Threads";
117
- const HUD_THREADS_ON_LABEL = "Threads on";
118
- const HUD_INTELLIGENCE_OFF_LABEL = "Turn on Intelligence";
119
- const HUD_INTELLIGENCE_ON_LABEL = "Intelligence connected";
120
- const HUD_THREADS_OFF_DETAIL = "Inspect conversations from this app.";
121
- const HUD_THREADS_ON_DETAIL = "Threads is on. Opens the Threads view.";
122
- const HUD_INTELLIGENCE_OFF_DETAIL = "Connect Intelligence to use Threads and Learning.";
123
- const HUD_INTELLIGENCE_ON_DETAIL = "Intelligence is connected. Opens Home.";
124
- const HUD_LEARNING_OFF_LABEL = "Turn on Learning";
125
- const HUD_LEARNING_ON_LABEL = "Learning on";
126
- const HUD_LEARNING_OFF_DETAIL = "Connect Intelligence to use Learning.";
127
- const HUD_LEARNING_ON_DETAIL = "Learning is on. Opens the Learning view.";
128
- const HUD_OPEN_INSPECTOR_DETAIL = "Same as clicking the circle. Opens the full Inspector.";
115
+ const HUD_INSPECTOR_LABEL = "CopilotKit Inspector";
116
+ const HUD_ANNOUNCEMENT_TITLE_LIMIT = 80;
117
+ const HUD_THREADS_LABEL = "Rich Threads";
118
+ const HUD_LEARNING_LABEL = "Automatic Learning";
119
+ const HUD_LEARN_MORE_LABEL = "Click to learn more";
120
+ const INSPECTOR_DISMISSAL_MS = {
121
+ day: 1440 * 60 * 1e3,
122
+ week: require_persistence.INSPECTOR_DISMISSAL_MAX_DURATION_MS
123
+ };
129
124
  const LAUNCHER_SIGNALS = {
130
125
  "whats-new": {
131
126
  tone: "news",
@@ -243,22 +238,24 @@ const THREAD_LIST_DEBOUNCE_MS = 300;
243
238
  const LAUNCHER_BASE_LABEL = "Web Inspector";
244
239
  const EDGE_MARGIN = 16;
245
240
  /** HUD card plus the hover bridge. Used to pick left vs right. */
246
- const LAUNCHER_HUD_WIDTH = 248;
241
+ const LAUNCHER_HUD_WIDTH = 258;
247
242
  /**
248
243
  * One page-load preview of the launcher's feature HUD.
249
244
  *
250
- * The card arrives after the host page has had a beat to settle. Its four rows
251
- * then come online in order, stay readable, and leave together. Nothing is
252
- * persisted: a new Inspector element means a new preview.
245
+ * The card arrives after the host page has had a beat to settle. Its feature
246
+ * contents then arrive from top to bottom, stay readable, and leave together.
247
+ * Nothing is persisted: a new Inspector element means a new preview.
253
248
  */
254
249
  const LAUNCHER_HUD_INTRO_MS = {
255
250
  delay: 500,
256
251
  duration: 3400,
257
- rowStart: 180,
258
- rowStagger: 170,
259
- rowDuration: 300,
252
+ waterfallStart: 180,
253
+ waterfallStagger: 170,
254
+ waterfallDuration: 300,
260
255
  blockedRetry: 250
261
256
  };
257
+ /** Return the staggered reveal delay for one launcher HUD layer. */
258
+ const launcherHudWaterfallDelay = (introIndex) => `${LAUNCHER_HUD_INTRO_MS.waterfallStart + introIndex * LAUNCHER_HUD_INTRO_MS.waterfallStagger}ms`;
262
259
  const DRAG_THRESHOLD = 6;
263
260
  const MIN_WINDOW_WIDTH = 880;
264
261
  const MIN_WINDOW_WIDTH_DOCKED_LEFT = 640;
@@ -287,17 +284,7 @@ function createPlaygroundThreadId() {
287
284
  return globalThis.crypto?.randomUUID?.() ?? `playground-${Date.now()}`;
288
285
  }
289
286
  const THREADS_DOCS_URL = "https://docs.copilotkit.ai/threads";
290
- const THREADS_RUNTIME_SETUP_DOCS_URL = "https://docs.copilotkit.ai/backend/runtime-endpoints#enable-rich-threads-routes";
291
- const THREADS_RUNTIME_SETUP_PROMPT = [
292
- `Read ${THREADS_RUNTIME_SETUP_DOCS_URL} and finish setting up Rich Threads in this repository.`,
293
- "",
294
- "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.",
295
- "",
296
- "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.",
297
- "",
298
- "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."
299
- ].join("\n");
300
- const SELF_HOSTED_INTELLIGENCE_URL = "https://docs.copilotkit.ai/premium/self-hosting";
287
+ const SELF_HOSTED_INTELLIGENCE_URL = "https://docs.copilotkit.ai/intelligence/self-hosting";
301
288
  const INTELLIGENCE_STORY_BEATS = [
302
289
  {
303
290
  id: "threads",
@@ -5024,11 +5011,12 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
5024
5011
  this.pillTimeoutId = null;
5025
5012
  this.launcherHudOpen = false;
5026
5013
  this.launcherHudSide = "left";
5027
- this.launcherHudHelp = null;
5028
5014
  this.launcherHudCloseTimer = null;
5029
5015
  this.launcherHudIntro = false;
5030
5016
  this.launcherHudIntroStartTimer = null;
5031
5017
  this.launcherHudIntroEndTimer = null;
5018
+ this.inspectorDismissedUntil = null;
5019
+ this.inspectorDismissalTimer = null;
5032
5020
  this.hudLandingMenu = null;
5033
5021
  this.pillOutcome = null;
5034
5022
  this.viewedNewsSignalIds = /* @__PURE__ */ new Set();
@@ -5056,9 +5044,9 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
5056
5044
  this.threadsExampleOverviewVideoPlayAttemptGeneration = 0;
5057
5045
  this.threadsExampleOverviewVideoPlayPromise = null;
5058
5046
  this.threadsExampleOverviewVideoPlayOnNextBind = false;
5059
- this.threadsSetupPromptCopyState = "idle";
5060
- this.threadsSetupPromptCopyResetTimeoutId = null;
5061
- this.threadsSetupPromptCopyGeneration = 0;
5047
+ this.homeFeaturePromptCopyState = null;
5048
+ this.homeFeaturePromptCopyResetTimeoutId = null;
5049
+ this.homeFeaturePromptCopyGeneration = 0;
5062
5050
  this.contextState = {
5063
5051
  button: {
5064
5052
  position: {
@@ -5104,7 +5092,8 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
5104
5092
  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>` };
5105
5093
  this.handleDocumentVisibilityChange = () => {
5106
5094
  this.accountCtaMotionPaused = document.visibilityState !== "visible";
5107
- if (document.visibilityState === "visible" && !this.isOpen) this.flushPendingSignalPulse();
5095
+ this.refreshInspectorDismissalState();
5096
+ if (document.visibilityState === "visible" && !this.isOpen && !this.isInspectorDismissed) this.flushPendingSignalPulse();
5108
5097
  this.requestUpdate();
5109
5098
  };
5110
5099
  this.handlePillClick = (event) => {
@@ -5144,21 +5133,33 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
5144
5133
  this.handleHudActionClick = (event, row) => {
5145
5134
  event.preventDefault();
5146
5135
  event.stopPropagation();
5147
- this.hudLandingMenu = row === "inspector" ? null : row === "threads" ? "threads" : row === "learning" ? "memories" : "home";
5136
+ this.hudLandingMenu = row === "threads" ? "threads" : row === "learning" ? "memories" : "home";
5148
5137
  this.closeLauncherHud();
5149
5138
  this.openInspector("floating_button");
5150
5139
  };
5151
- this.handleHudHelpClick = (event, row) => {
5152
- event.preventDefault();
5153
- event.stopPropagation();
5154
- this.launcherHudHelp = this.launcherHudHelp === row ? null : row;
5155
- this.requestUpdate();
5156
- };
5157
5140
  this.handleHudRowClick = (event, row) => {
5158
5141
  const target = event.target;
5159
- if (target instanceof Element && target.closest(".cpk-launcher-hud__help, [data-cpk-hud-action]")) return;
5142
+ if (target instanceof Element && target.closest(".cpk-launcher-hud__controls, [data-cpk-hud-action]")) return;
5160
5143
  this.handleHudActionClick(event, row);
5161
5144
  };
5145
+ this.handleHudNewsClick = (event) => {
5146
+ event.preventDefault();
5147
+ event.stopPropagation();
5148
+ this.hudLandingMenu = WHATS_NEW_MENU_KEY;
5149
+ this.closeLauncherHud();
5150
+ this.openInspector("floating_button");
5151
+ };
5152
+ this.handleHudNewsDismissClick = (event) => {
5153
+ event.preventDefault();
5154
+ event.stopPropagation();
5155
+ this.clearNewsSignal();
5156
+ this.activeRoot.querySelector(".console-button")?.focus({ preventScroll: true });
5157
+ };
5158
+ this.handleHudDismissDayClick = (event) => {
5159
+ event.preventDefault();
5160
+ event.stopPropagation();
5161
+ this.dismissInspectorFor("day");
5162
+ };
5162
5163
  this.handleSidebarToggle = () => {
5163
5164
  this.sidebarRailTooltip = null;
5164
5165
  this.sidebarCollapsed = !this.sidebarCollapsed;
@@ -5201,6 +5202,31 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
5201
5202
  this.applyEventErrorLanding(key);
5202
5203
  this.requestUpdate();
5203
5204
  };
5205
+ this.handleHomeFeaturePromptCopy = async (service, event) => {
5206
+ const generation = this.homeFeaturePromptCopyGeneration += 1;
5207
+ if (this.homeFeaturePromptCopyResetTimeoutId !== null) {
5208
+ window.clearTimeout(this.homeFeaturePromptCopyResetTimeoutId);
5209
+ this.homeFeaturePromptCopyResetTimeoutId = null;
5210
+ }
5211
+ this.homeFeaturePromptCopyState = null;
5212
+ this.requestUpdate();
5213
+ const onboardingRunId = require_onboarding_prompt.createOnboardingRunId();
5214
+ if (!this.core?.telemetryDisabled) require_telemetry.trackHomeFeaturePromptClicked({
5215
+ feature_id: service.id,
5216
+ onboarding_run_id: onboardingRunId
5217
+ });
5218
+ const clipboard = this.getClipboard(event);
5219
+ if (!clipboard?.writeText) {
5220
+ this.showHomeFeaturePromptCopyState(service.id, "error", generation);
5221
+ return;
5222
+ }
5223
+ try {
5224
+ await clipboard.writeText(require_home_briefing.homeFeatureImplementationPrompt(service, { onboardingRunId }));
5225
+ this.showHomeFeaturePromptCopyState(service.id, "copied", generation);
5226
+ } catch {
5227
+ this.showHomeFeaturePromptCopyState(service.id, "error", generation);
5228
+ }
5229
+ };
5204
5230
  this.handleIntelligencePromptCopy = async (event) => {
5205
5231
  this.clearIntelligencePromptReset();
5206
5232
  const runId = this.getOnboardingRunId();
@@ -5680,26 +5706,6 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
5680
5706
  }
5681
5707
  this.playThreadsExampleOverviewVideo(video, lifecycleGeneration);
5682
5708
  };
5683
- this.handleThreadsSetupPromptCopy = async (event) => {
5684
- const generation = this.threadsSetupPromptCopyGeneration += 1;
5685
- if (this.threadsSetupPromptCopyResetTimeoutId !== null) {
5686
- window.clearTimeout(this.threadsSetupPromptCopyResetTimeoutId);
5687
- this.threadsSetupPromptCopyResetTimeoutId = null;
5688
- }
5689
- this.threadsSetupPromptCopyState = "idle";
5690
- this.requestUpdate();
5691
- const clipboard = this.getClipboard(event);
5692
- if (!clipboard?.writeText) {
5693
- this.showThreadsSetupPromptCopyState("error", generation);
5694
- return;
5695
- }
5696
- try {
5697
- await clipboard.writeText(THREADS_RUNTIME_SETUP_PROMPT);
5698
- this.showThreadsSetupPromptCopyState("copied", generation);
5699
- } catch {
5700
- this.showThreadsSetupPromptCopyState("error", generation);
5701
- }
5702
- };
5703
5709
  this.handleClearEvents = () => {
5704
5710
  if (this.selectedContext === "all-agents") {
5705
5711
  this.agentEvents.clear();
@@ -6045,9 +6051,6 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
6045
6051
  getThreadsDocsUrl() {
6046
6052
  return this.appendRefParam(THREADS_DOCS_URL, "cpk-inspector-threads");
6047
6053
  }
6048
- getThreadsRuntimeSetupDocsUrl() {
6049
- return this.appendRefParam(THREADS_RUNTIME_SETUP_DOCS_URL, "cpk-inspector-threads");
6050
- }
6051
6054
  getThreadsIntelligenceSignupUrl() {
6052
6055
  return this.appendRefParam(INTELLIGENCE_SIGNUP_URL, "cpk-inspector-threads");
6053
6056
  }
@@ -8096,56 +8099,66 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
8096
8099
 
8097
8100
  .cpk-launcher-hud {
8098
8101
  --hud-fill: var(--cpk-inspector-surface-dark);
8099
- --hud-line: rgb(190 194 255 / 0.5);
8102
+ --hud-line: rgb(190 194 255 / 0.38);
8103
+ --hud-accent: #b8adf5;
8104
+ --hud-accent-soft: rgb(184 173 245 / 0.13);
8105
+ --hud-hover-fill: #252231;
8100
8106
  --hud-blur: blur(12px) saturate(1.2);
8107
+ --hud-card-gap: 8px;
8108
+ --hud-dismiss-day-height: 32px;
8101
8109
  position: absolute;
8102
- top: 0;
8103
8110
  z-index: 4;
8104
- padding-right: 14px;
8111
+ width: 258px;
8105
8112
  pointer-events: none;
8106
8113
  opacity: 0;
8107
8114
  visibility: hidden;
8108
- transform: translateX(8px);
8109
8115
  transition:
8110
8116
  opacity 160ms ease,
8111
8117
  transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
8112
8118
  }
8113
8119
 
8120
+ .cpk-launcher-hud[data-cpk-hud-vertical="top"] {
8121
+ top: 0;
8122
+ bottom: auto;
8123
+ }
8124
+
8125
+ .cpk-launcher-hud[data-cpk-hud-vertical="bottom"] {
8126
+ top: auto;
8127
+ bottom: 0;
8128
+ }
8129
+
8114
8130
  .cpk-launcher-hud[data-cpk-hud-side="left"] {
8115
8131
  right: 100%;
8132
+ left: auto;
8116
8133
  padding-right: 14px;
8117
- padding-left: 0;
8134
+ transform: translateX(8px);
8118
8135
  }
8119
8136
 
8120
8137
  .cpk-launcher-hud[data-cpk-hud-side="right"] {
8121
8138
  left: 100%;
8122
8139
  right: auto;
8123
- padding-right: 0;
8124
8140
  padding-left: 14px;
8125
8141
  transform: translateX(-8px);
8126
8142
  }
8127
8143
 
8128
- .console-button-wrapper[data-cpk-hud="open"]
8129
- .cpk-launcher-hud[data-cpk-hud-side="right"] {
8144
+ .console-button-wrapper[data-cpk-hud="open"] .cpk-launcher-hud {
8130
8145
  transform: none;
8131
8146
  }
8132
8147
 
8133
8148
  .cpk-launcher-hud__card {
8134
8149
  position: relative;
8135
- width: 228px;
8136
- padding: 4px;
8137
- border: 1px dotted var(--hud-line);
8138
- border-radius: var(--cpk-inspector-shell-radius);
8139
- background: var(--hud-fill);
8150
+ display: grid;
8151
+ width: 244px;
8152
+ gap: var(--hud-card-gap);
8140
8153
  color: #fff;
8141
- backdrop-filter: var(--hud-blur);
8142
- -webkit-backdrop-filter: var(--hud-blur);
8143
- box-shadow: 0 8px 20px rgb(1 5 7 / 0.18);
8144
8154
  }
8145
8155
 
8146
8156
  .cpk-launcher-hud[data-color-scheme="light"] {
8147
8157
  --hud-fill: #fff;
8148
- --hud-line: #d8d8e8;
8158
+ --hud-line: #ddd6f4;
8159
+ --hud-accent: #6757b0;
8160
+ --hud-accent-soft: #f1edff;
8161
+ --hud-hover-fill: #f1edff;
8149
8162
  }
8150
8163
 
8151
8164
  .cpk-launcher-hud[data-color-scheme="light"] .cpk-launcher-hud__card {
@@ -8155,23 +8168,47 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
8155
8168
  .cpk-launcher-hud__arrow {
8156
8169
  position: absolute;
8157
8170
  top: calc(var(--cpk-launcher-size) / 2);
8158
- z-index: 1;
8171
+ z-index: 2;
8159
8172
  width: 10px;
8160
8173
  height: 10px;
8161
8174
  border: 0;
8162
- /* The card frosts the page behind it, so it reads lighter than the
8163
- raw fill. Mix a little white so the arrow matches the glass card
8164
- without going lighter than the HUD. */
8165
- background: color-mix(in srgb, var(--hud-fill) 88%, white 12%);
8166
- transform: translateY(-50%) rotate(45deg);
8175
+ background: var(--hud-fill);
8176
+ transform: rotate(45deg);
8177
+ transition: background 120ms ease;
8167
8178
  }
8168
8179
 
8169
8180
  .cpk-launcher-hud[data-cpk-hud-side="left"] .cpk-launcher-hud__arrow {
8170
8181
  right: 9px;
8182
+ border-top: 1px solid var(--hud-line);
8183
+ border-right: 1px solid var(--hud-line);
8171
8184
  }
8172
8185
 
8173
8186
  .cpk-launcher-hud[data-cpk-hud-side="right"] .cpk-launcher-hud__arrow {
8174
8187
  left: 9px;
8188
+ border-bottom: 1px solid var(--hud-line);
8189
+ border-left: 1px solid var(--hud-line);
8190
+ }
8191
+
8192
+ .cpk-launcher-hud[data-cpk-hud-vertical="top"] .cpk-launcher-hud__arrow {
8193
+ top: calc(var(--cpk-launcher-size) / 2 - 5px);
8194
+ }
8195
+
8196
+ .cpk-launcher-hud[data-cpk-hud-vertical="bottom"]
8197
+ .cpk-launcher-hud__arrow {
8198
+ top: auto;
8199
+ bottom: calc(var(--cpk-launcher-size) / 2 - 5px);
8200
+ }
8201
+
8202
+ /* A bottom-anchored HUD can end with the narrower dismissal bubble.
8203
+ Keep the pointer attached to the full-width feature panel instead of
8204
+ letting it float in the empty space beside that final action. */
8205
+ .cpk-launcher-hud[data-cpk-hud-vertical="bottom"]:has(
8206
+ .cpk-launcher-hud__dismiss-day
8207
+ )
8208
+ .cpk-launcher-hud__arrow {
8209
+ bottom: calc(
8210
+ var(--hud-dismiss-day-height) + var(--hud-card-gap) + 2px
8211
+ );
8175
8212
  }
8176
8213
 
8177
8214
  .cpk-launcher-hud__list {
@@ -8180,47 +8217,248 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
8180
8217
  list-style: none;
8181
8218
  }
8182
8219
 
8183
- .cpk-launcher-hud__list + .cpk-launcher-hud__list {
8184
- margin-top: 4px;
8185
- padding-top: 4px;
8186
- border-top: 1px dotted var(--hud-line);
8220
+ .cpk-launcher-hud__masthead {
8221
+ position: relative;
8222
+ z-index: 1;
8223
+ margin-top: 6px;
8224
+ padding: 0;
8225
+ border: 1px solid var(--hud-line);
8226
+ border-radius: var(--cpk-inspector-shell-radius);
8227
+ background: var(--hud-fill);
8228
+ backdrop-filter: var(--hud-blur);
8229
+ -webkit-backdrop-filter: var(--hud-blur);
8230
+ box-shadow: 0 10px 28px rgb(46 37 91 / 0.16);
8231
+ transition: background 120ms ease;
8232
+ }
8233
+
8234
+ .cpk-launcher-hud__news-wrap {
8235
+ position: relative;
8236
+ margin: 0;
8237
+ }
8238
+
8239
+ .cpk-launcher-hud__news {
8240
+ position: relative;
8241
+ display: flex;
8242
+ width: 100%;
8243
+ min-width: 0;
8244
+ flex-direction: column;
8245
+ align-items: flex-start;
8246
+ padding: 18px 12px 11px;
8247
+ border: 0;
8248
+ border-radius: calc(var(--cpk-inspector-shell-radius) - 1px);
8249
+ background: transparent;
8250
+ color: #fff;
8251
+ font-family: inherit;
8252
+ line-height: 1;
8253
+ text-align: start;
8254
+ cursor: pointer;
8255
+ }
8256
+
8257
+ .cpk-launcher-hud__news:hover,
8258
+ .cpk-launcher-hud__news:focus-visible {
8259
+ background: transparent;
8260
+ }
8261
+
8262
+ .cpk-launcher-hud__masthead:has(.cpk-launcher-hud__news:hover),
8263
+ .cpk-launcher-hud__masthead:has(.cpk-launcher-hud__news:focus-visible),
8264
+ .cpk-launcher-hud:has(.cpk-launcher-hud__news:hover)
8265
+ .cpk-launcher-hud__arrow,
8266
+ .cpk-launcher-hud:has(.cpk-launcher-hud__news:focus-visible)
8267
+ .cpk-launcher-hud__arrow {
8268
+ background: var(--hud-hover-fill);
8269
+ }
8270
+
8271
+ .cpk-launcher-hud__news:focus-visible {
8272
+ outline: 2px solid #bec2ff;
8273
+ outline-offset: 1px;
8274
+ }
8275
+
8276
+ .cpk-launcher-hud__news-title {
8277
+ display: block;
8278
+ font-size: 12px;
8279
+ font-weight: 650;
8280
+ line-height: 1.32;
8281
+ overflow-wrap: anywhere;
8282
+ white-space: normal;
8283
+ }
8284
+
8285
+ .cpk-launcher-hud__news-label {
8286
+ position: absolute;
8287
+ top: -9px;
8288
+ left: 12px;
8289
+ display: inline-flex;
8290
+ min-height: 20px;
8291
+ align-items: center;
8292
+ padding: 3px 8px;
8293
+ border-radius: 6px;
8294
+ background: #7563c7;
8295
+ color: #fff;
8296
+ box-shadow: 0 3px 8px rgb(46 37 91 / 0.18);
8297
+ font-size: 9px;
8298
+ font-weight: 700;
8299
+ line-height: 1;
8300
+ }
8301
+
8302
+ .cpk-launcher-hud__news-dismiss {
8303
+ position: absolute;
8304
+ top: -1px;
8305
+ right: 2px;
8306
+ z-index: 2;
8307
+ display: inline-flex;
8308
+ width: 20px;
8309
+ height: 20px;
8310
+ align-items: center;
8311
+ justify-content: center;
8312
+ padding: 0;
8313
+ border: 0;
8314
+ border-radius: 4px;
8315
+ background: transparent;
8316
+ color: rgb(255 255 255 / 0.68);
8317
+ cursor: pointer;
8318
+ }
8319
+
8320
+ .cpk-launcher-hud__news-dismiss:hover,
8321
+ .cpk-launcher-hud__news-dismiss:focus-visible {
8322
+ background: var(--hud-accent-soft);
8323
+ color: #fff;
8324
+ }
8325
+
8326
+ .cpk-launcher-hud[data-color-scheme="light"]
8327
+ .cpk-launcher-hud__news-dismiss {
8328
+ color: #6e697c;
8329
+ }
8330
+
8331
+ .cpk-launcher-hud[data-color-scheme="light"]
8332
+ .cpk-launcher-hud__news-dismiss:hover,
8333
+ .cpk-launcher-hud[data-color-scheme="light"]
8334
+ .cpk-launcher-hud__news-dismiss:focus-visible {
8335
+ color: #27233a;
8336
+ }
8337
+
8338
+ .cpk-launcher-hud__news-dismiss:focus-visible {
8339
+ outline: 2px solid #bec2ff;
8340
+ outline-offset: 1px;
8341
+ }
8342
+
8343
+ .cpk-launcher-hud__news-dismiss svg {
8344
+ width: 7px;
8345
+ height: 7px;
8346
+ }
8347
+
8348
+ .cpk-launcher-hud[data-color-scheme="light"] .cpk-launcher-hud__news {
8349
+ color: #17131f;
8350
+ }
8351
+
8352
+ .cpk-launcher-hud__dismiss-day {
8353
+ position: relative;
8354
+ z-index: 1;
8355
+ display: flex;
8356
+ width: auto;
8357
+ min-height: var(--hud-dismiss-day-height);
8358
+ align-items: center;
8359
+ justify-content: center;
8360
+ justify-self: center;
8361
+ gap: 6px;
8362
+ margin: 0;
8363
+ padding: 7px 13px;
8364
+ border: 1px solid var(--hud-line);
8365
+ border-radius: var(--cpk-inspector-shell-radius);
8366
+ background: var(--hud-fill);
8367
+ color: #c9cad3;
8368
+ box-shadow: 0 8px 20px rgb(17 14 29 / 0.18);
8369
+ font-family: inherit;
8370
+ font-size: 10px;
8371
+ font-weight: 650;
8372
+ line-height: 1.2;
8373
+ cursor: pointer;
8374
+ transition:
8375
+ border-color 120ms ease,
8376
+ background 120ms ease,
8377
+ color 120ms ease;
8378
+ }
8379
+
8380
+ .cpk-launcher-hud__dismiss-day:hover,
8381
+ .cpk-launcher-hud__dismiss-day:focus-visible {
8382
+ border-color: var(--hud-accent);
8383
+ background: var(--hud-hover-fill);
8384
+ color: #f3f4f8;
8385
+ }
8386
+
8387
+ .cpk-launcher-hud__dismiss-day:focus-visible {
8388
+ outline: 2px solid #bec2ff;
8389
+ outline-offset: 1px;
8390
+ }
8391
+
8392
+ .cpk-launcher-hud__dismiss-day svg {
8393
+ width: 12px;
8394
+ height: 12px;
8395
+ }
8396
+
8397
+ .cpk-launcher-hud[data-color-scheme="light"]
8398
+ .cpk-launcher-hud__dismiss-day {
8399
+ box-shadow: 0 8px 20px rgb(46 37 91 / 0.12);
8400
+ color: #5f6068;
8401
+ }
8402
+
8403
+ .cpk-launcher-hud[data-color-scheme="light"]
8404
+ .cpk-launcher-hud__dismiss-day:hover,
8405
+ .cpk-launcher-hud[data-color-scheme="light"]
8406
+ .cpk-launcher-hud__dismiss-day:focus-visible {
8407
+ color: #36373d;
8408
+ }
8409
+
8410
+ .cpk-launcher-hud__feature-list {
8411
+ position: relative;
8412
+ z-index: 1;
8413
+ padding: 5px;
8414
+ border: 1px solid var(--hud-line);
8415
+ border-radius: var(--cpk-inspector-shell-radius);
8416
+ background: var(--hud-fill);
8417
+ backdrop-filter: var(--hud-blur);
8418
+ -webkit-backdrop-filter: var(--hud-blur);
8419
+ box-shadow: 0 10px 28px rgb(46 37 91 / 0.16);
8187
8420
  }
8188
8421
 
8189
8422
  .cpk-launcher-hud__row {
8190
8423
  position: relative;
8191
8424
  display: grid;
8192
- grid-template-columns: 1fr 28px;
8193
- align-items: start;
8194
- border-radius: 7px;
8425
+ grid-template-columns: minmax(0, 1fr) auto;
8426
+ align-items: center;
8427
+ min-height: 54px;
8428
+ border-radius: 9px;
8195
8429
  cursor: pointer;
8196
8430
  }
8197
8431
 
8198
8432
  .cpk-launcher-hud__row + .cpk-launcher-hud__row {
8199
- margin-top: 1px;
8433
+ border-top: 1px solid var(--hud-line);
8434
+ border-radius: 0 0 9px 9px;
8200
8435
  }
8201
8436
 
8202
8437
  .cpk-launcher-hud__row:hover,
8203
- .cpk-launcher-hud__row:focus-within,
8204
- .cpk-launcher-hud__row[data-cpk-hud-help="open"] {
8438
+ .cpk-launcher-hud__row:focus-within {
8205
8439
  background: rgb(255 255 255 / 0.06);
8206
8440
  }
8207
8441
 
8208
8442
  .cpk-launcher-hud[data-color-scheme="light"] .cpk-launcher-hud__row:hover,
8209
- .cpk-launcher-hud[data-color-scheme="light"]
8210
- .cpk-launcher-hud__row:focus-within,
8211
- .cpk-launcher-hud[data-color-scheme="light"]
8212
- .cpk-launcher-hud__row[data-cpk-hud-help="open"] {
8213
- background: #f0f0f4;
8443
+ .cpk-launcher-hud[data-color-scheme="light"] .cpk-launcher-hud__row:focus-within {
8444
+ background: #f7f5ff;
8445
+ }
8446
+
8447
+ .cpk-launcher-hud__primary {
8448
+ position: relative;
8449
+ display: flex;
8450
+ min-width: 0;
8214
8451
  }
8215
8452
 
8216
8453
  .cpk-launcher-hud__action {
8217
8454
  display: flex;
8455
+ width: 100%;
8218
8456
  gap: 8px;
8219
- min-height: 32px;
8457
+ min-height: 52px;
8220
8458
  align-items: center;
8221
- padding: 6px 8px;
8459
+ padding: 7px 4px;
8222
8460
  border: 0;
8223
- border-radius: 7px;
8461
+ border-radius: 9px;
8224
8462
  background: transparent;
8225
8463
  color: #fff;
8226
8464
  font-family: inherit;
@@ -8230,114 +8468,243 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
8230
8468
  cursor: pointer;
8231
8469
  }
8232
8470
 
8471
+ .cpk-launcher-hud__label {
8472
+ min-width: 0;
8473
+ }
8474
+
8475
+ .cpk-launcher-hud__feature-icon {
8476
+ display: inline-flex;
8477
+ width: 28px;
8478
+ height: 32px;
8479
+ flex: none;
8480
+ align-items: center;
8481
+ justify-content: center;
8482
+ background: transparent;
8483
+ color: var(--hud-accent);
8484
+ }
8485
+
8486
+ .cpk-launcher-hud__feature-icon svg {
8487
+ width: 17px;
8488
+ height: 17px;
8489
+ stroke-width: 1.8;
8490
+ }
8491
+
8233
8492
  .cpk-launcher-hud[data-color-scheme="light"] .cpk-launcher-hud__action {
8234
8493
  color: #010507;
8235
8494
  }
8236
8495
 
8237
- /* Stretch the row action over the whole tab, including the detail
8238
- copy. The help mark sits above this layer. */
8496
+ /* Stretch the row action over the whole tab. The icon controls sit
8497
+ above this layer and keep their own focused interactions. */
8239
8498
  .cpk-launcher-hud__action::after {
8240
8499
  content: "";
8241
8500
  position: absolute;
8242
8501
  inset: 0;
8243
8502
  }
8244
8503
 
8245
- .cpk-launcher-hud__check {
8246
- flex: none;
8247
- width: 14px;
8248
- height: 14px;
8249
- color: #34d399;
8250
- }
8251
-
8252
- .cpk-launcher-hud__help {
8504
+ .cpk-launcher-hud__controls {
8253
8505
  position: relative;
8254
8506
  z-index: 1;
8507
+ display: flex;
8508
+ gap: 0;
8509
+ align-items: center;
8510
+ padding-right: 5px;
8511
+ }
8512
+
8513
+ .cpk-launcher-hud__learn-more {
8255
8514
  display: inline-flex;
8256
- width: 28px;
8257
- height: 32px;
8515
+ width: 24px;
8516
+ height: 44px;
8258
8517
  align-items: center;
8259
8518
  justify-content: center;
8260
8519
  padding: 0;
8261
8520
  border: 0;
8262
8521
  background: transparent;
8263
- color: rgb(255 255 255 / 0.78);
8264
- font-size: 12px;
8265
- font-weight: 600;
8522
+ color: rgb(190 194 255 / 0.72);
8266
8523
  cursor: pointer;
8267
8524
  }
8268
8525
 
8269
- .cpk-launcher-hud__help span {
8270
- display: inline-flex;
8526
+ .cpk-launcher-hud__learn-more:hover,
8527
+ .cpk-launcher-hud__learn-more:focus-visible {
8528
+ color: #fff;
8529
+ }
8530
+
8531
+ .cpk-launcher-hud[data-color-scheme="light"]
8532
+ .cpk-launcher-hud__learn-more {
8533
+ color: #777080;
8534
+ }
8535
+
8536
+ .cpk-launcher-hud[data-color-scheme="light"]
8537
+ .cpk-launcher-hud__learn-more:hover,
8538
+ .cpk-launcher-hud[data-color-scheme="light"]
8539
+ .cpk-launcher-hud__learn-more:focus-visible {
8540
+ color: #4b416b;
8541
+ }
8542
+
8543
+ .cpk-launcher-hud__learn-more svg {
8271
8544
  width: 16px;
8272
8545
  height: 16px;
8546
+ stroke-width: 1.8;
8547
+ }
8548
+
8549
+ .cpk-launcher-hud__toggle {
8550
+ display: inline-flex;
8551
+ width: 38px;
8552
+ height: 44px;
8273
8553
  align-items: center;
8274
8554
  justify-content: center;
8275
- border: 1px dotted rgb(190 194 255 / 0.55);
8555
+ padding: 0;
8556
+ border: 0;
8557
+ background: transparent;
8558
+ color: rgb(255 255 255 / 0.78);
8559
+ font-size: 12px;
8560
+ font-weight: 600;
8561
+ cursor: pointer;
8562
+ }
8563
+
8564
+ .cpk-launcher-hud__toggle:disabled {
8565
+ cursor: not-allowed;
8566
+ opacity: 1;
8567
+ }
8568
+
8569
+ .cpk-launcher-hud__toggle-track {
8570
+ position: relative;
8571
+ display: block;
8572
+ width: 34px;
8573
+ height: 20px;
8574
+ border: 1px solid rgb(190 194 255 / 0.38);
8575
+ border-radius: 999px;
8576
+ background: rgb(255 255 255 / 0.08);
8577
+ transition:
8578
+ border-color 120ms ease,
8579
+ background 120ms ease;
8580
+ }
8581
+
8582
+ .cpk-launcher-hud__toggle-track::after {
8583
+ content: "";
8584
+ position: absolute;
8585
+ top: 2px;
8586
+ left: 2px;
8587
+ width: 14px;
8588
+ height: 14px;
8276
8589
  border-radius: 50%;
8277
- line-height: 1;
8590
+ background: #8c8e99;
8591
+ transition:
8592
+ background 120ms ease,
8593
+ transform 120ms ease;
8278
8594
  }
8279
8595
 
8280
- .cpk-launcher-hud[data-color-scheme="light"] .cpk-launcher-hud__help {
8281
- color: #68686e;
8596
+ .cpk-launcher-hud__toggle[data-enabled="true"]
8597
+ .cpk-launcher-hud__toggle-track {
8598
+ border-color: var(--hud-accent);
8599
+ background: color-mix(in srgb, var(--hud-accent) 76%, transparent);
8600
+ }
8601
+
8602
+ .cpk-launcher-hud__toggle[data-enabled="true"]
8603
+ .cpk-launcher-hud__toggle-track::after {
8604
+ background: #fff;
8605
+ transform: translateX(14px);
8606
+ }
8607
+
8608
+ .cpk-launcher-hud[data-color-scheme="light"]
8609
+ .cpk-launcher-hud__toggle-track {
8610
+ border-color: #c9c9d2;
8611
+ background: #e7e7ec;
8612
+ }
8613
+
8614
+ .cpk-launcher-hud[data-color-scheme="light"]
8615
+ .cpk-launcher-hud__toggle-track::after {
8616
+ background: #777780;
8617
+ }
8618
+
8619
+ .cpk-launcher-hud[data-color-scheme="light"]
8620
+ .cpk-launcher-hud__toggle[data-enabled="true"]
8621
+ .cpk-launcher-hud__toggle-track {
8622
+ border-color: #6757b0;
8623
+ background: #7563c7;
8624
+ }
8625
+
8626
+ .cpk-launcher-hud[data-color-scheme="light"]
8627
+ .cpk-launcher-hud__toggle[data-enabled="true"]
8628
+ .cpk-launcher-hud__toggle-track::after {
8629
+ background: #fff;
8282
8630
  }
8283
8631
 
8284
- .cpk-launcher-hud__help:focus-visible,
8632
+ .cpk-launcher-hud__toggle:focus-visible,
8633
+ .cpk-launcher-hud__learn-more:focus-visible,
8285
8634
  .cpk-launcher-hud__action:focus-visible {
8286
8635
  outline: 2px solid #bec2ff;
8287
8636
  outline-offset: 1px;
8288
8637
  }
8289
8638
 
8290
- .cpk-launcher-hud__detail {
8291
- grid-column: 1 / -1;
8292
- max-height: 0;
8293
- margin: 0;
8294
- padding: 0 8px;
8295
- overflow: hidden;
8296
- color: rgb(255 255 255 / 0.78);
8297
- font-size: 11px;
8298
- font-weight: 400;
8299
- line-height: 1.4;
8639
+ .cpk-launcher-hud__tooltip {
8640
+ position: absolute;
8641
+ top: 50%;
8642
+ z-index: 30;
8643
+ width: max-content;
8644
+ max-width: min(220px, 52vw);
8645
+ padding: 7px 9px;
8646
+ border: 1px solid #3a3d49;
8647
+ border-radius: 4px;
8648
+ background: #15171e;
8649
+ color: #f3f4f8;
8650
+ box-shadow: 0 8px 20px rgb(1 5 7 / 0.18);
8651
+ font-size: 10px;
8652
+ font-weight: 500;
8653
+ line-height: 1.45;
8300
8654
  opacity: 0;
8301
8655
  pointer-events: none;
8302
- transform: translateY(-6px);
8656
+ transform: translate(3px, -50%);
8657
+ white-space: normal;
8303
8658
  transition:
8304
- max-height 200ms cubic-bezier(0.16, 1, 0.3, 1),
8305
- opacity 150ms ease-out,
8306
- transform 200ms cubic-bezier(0.16, 1, 0.3, 1),
8307
- padding-bottom 200ms cubic-bezier(0.16, 1, 0.3, 1);
8659
+ opacity 120ms ease,
8660
+ transform 120ms ease;
8308
8661
  }
8309
8662
 
8310
- .cpk-launcher-hud[data-color-scheme="light"] .cpk-launcher-hud__detail {
8311
- color: #68686e;
8663
+ .cpk-launcher-hud__row:has(.cpk-launcher-hud__learn-more:hover)
8664
+ .cpk-launcher-hud__tooltip,
8665
+ .cpk-launcher-hud__row:has(.cpk-launcher-hud__learn-more:focus-visible)
8666
+ .cpk-launcher-hud__tooltip {
8667
+ opacity: 1;
8668
+ transform: translate(0, -50%);
8312
8669
  }
8313
8670
 
8314
- .cpk-launcher-hud__row:hover .cpk-launcher-hud__detail,
8315
- .cpk-launcher-hud__row:focus-within .cpk-launcher-hud__detail,
8316
- .cpk-launcher-hud__row[data-cpk-hud-help="open"]
8317
- .cpk-launcher-hud__detail {
8318
- max-height: 72px;
8319
- padding: 0 8px 7px;
8320
- opacity: 1;
8321
- transform: none;
8671
+ .cpk-launcher-hud[data-cpk-hud-side="left"] .cpk-launcher-hud__tooltip {
8672
+ right: calc(100% + 8px);
8673
+ left: auto;
8674
+ }
8675
+
8676
+ .cpk-launcher-hud[data-cpk-hud-side="right"] .cpk-launcher-hud__tooltip {
8677
+ right: auto;
8678
+ left: calc(100% + 8px);
8679
+ transform: translate(-3px, -50%);
8680
+ }
8681
+
8682
+ .cpk-launcher-hud[data-cpk-hud-side="right"]
8683
+ .cpk-launcher-hud__row:has(.cpk-launcher-hud__learn-more:hover)
8684
+ .cpk-launcher-hud__tooltip,
8685
+ .cpk-launcher-hud[data-cpk-hud-side="right"]
8686
+ .cpk-launcher-hud__row:has(.cpk-launcher-hud__learn-more:focus-visible)
8687
+ .cpk-launcher-hud__tooltip {
8688
+ transform: translate(0, -50%);
8322
8689
  }
8323
8690
 
8324
8691
  @media (prefers-reduced-motion: reduce) {
8325
8692
  .cpk-launcher-hud,
8326
- .cpk-launcher-hud__detail {
8693
+ .cpk-launcher-hud__tooltip {
8327
8694
  transition: none;
8328
8695
  }
8329
8696
  }
8330
8697
 
8331
8698
  /*
8332
8699
  * On mount, borrow the hover HUD for one short introduction. The card
8333
- * establishes the destination first; its rows then resolve in order so
8334
- * the eye can count the available features instead of receiving one
8335
- * undifferentiated block. Only opacity and transform move.
8700
+ * establishes the destination first; notification, features, and hide
8701
+ * action then fall into place from top to bottom. Only opacity and
8702
+ * transform move.
8336
8703
  */
8337
8704
  @keyframes cpk-launcher-hud-intro {
8338
8705
  0% {
8339
8706
  opacity: 0;
8340
- transform: translateX(8px);
8707
+ transform: translateY(-4px);
8341
8708
  }
8342
8709
  8%,
8343
8710
  88% {
@@ -8346,30 +8713,14 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
8346
8713
  }
8347
8714
  100% {
8348
8715
  opacity: 0;
8349
- transform: translateX(4px);
8716
+ transform: translateY(3px);
8350
8717
  }
8351
8718
  }
8352
8719
 
8353
- @keyframes cpk-launcher-hud-intro-right {
8354
- 0% {
8355
- opacity: 0;
8356
- transform: translateX(-8px);
8357
- }
8358
- 8%,
8359
- 88% {
8360
- opacity: 1;
8361
- transform: none;
8362
- }
8363
- 100% {
8364
- opacity: 0;
8365
- transform: translateX(-4px);
8366
- }
8367
- }
8368
-
8369
- @keyframes cpk-launcher-hud-row-online {
8720
+ @keyframes cpk-launcher-hud-waterfall {
8370
8721
  from {
8371
8722
  opacity: 0;
8372
- transform: translateY(4px);
8723
+ transform: translateY(-8px);
8373
8724
  }
8374
8725
  to {
8375
8726
  opacity: 1;
@@ -8377,43 +8728,33 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
8377
8728
  }
8378
8729
  }
8379
8730
 
8380
- @keyframes cpk-launcher-hud-check-online {
8381
- from {
8382
- opacity: 0;
8383
- transform: scale(0.65);
8384
- }
8385
- to {
8386
- opacity: 1;
8387
- transform: scale(1);
8388
- }
8389
- }
8390
-
8391
8731
  .cpk-launcher-hud[data-cpk-hud-intro="true"] {
8392
8732
  animation: cpk-launcher-hud-intro var(--cpk-launcher-hud-intro-duration)
8393
8733
  cubic-bezier(0.16, 1, 0.3, 1) both;
8394
8734
  }
8395
8735
 
8396
- .cpk-launcher-hud[data-cpk-hud-intro="true"][data-cpk-hud-side="right"] {
8397
- animation-name: cpk-launcher-hud-intro-right;
8398
- }
8399
-
8400
- .cpk-launcher-hud[data-cpk-hud-intro="true"] .cpk-launcher-hud__row {
8401
- animation: cpk-launcher-hud-row-online
8402
- var(--cpk-launcher-hud-row-duration) cubic-bezier(0.16, 1, 0.3, 1)
8403
- both;
8404
- animation-delay: var(--cpk-hud-row-delay);
8405
- }
8406
-
8407
- .cpk-launcher-hud[data-cpk-hud-intro="true"] .cpk-launcher-hud__check {
8408
- animation: cpk-launcher-hud-check-online 220ms
8736
+ .cpk-launcher-hud[data-cpk-hud-intro="true"]
8737
+ :is(
8738
+ .cpk-launcher-hud__masthead,
8739
+ .cpk-launcher-hud__feature-list,
8740
+ .cpk-launcher-hud__row,
8741
+ .cpk-launcher-hud__dismiss-day
8742
+ ) {
8743
+ animation: cpk-launcher-hud-waterfall
8744
+ var(--cpk-launcher-hud-waterfall-duration)
8409
8745
  cubic-bezier(0.16, 1, 0.3, 1) both;
8410
- animation-delay: calc(var(--cpk-hud-row-delay) + 90ms);
8746
+ animation-delay: var(--cpk-hud-waterfall-delay);
8411
8747
  }
8412
8748
 
8413
8749
  @media (prefers-reduced-motion: reduce) {
8414
8750
  .cpk-launcher-hud[data-cpk-hud-intro="true"],
8415
- .cpk-launcher-hud[data-cpk-hud-intro="true"] .cpk-launcher-hud__row,
8416
- .cpk-launcher-hud[data-cpk-hud-intro="true"] .cpk-launcher-hud__check {
8751
+ .cpk-launcher-hud[data-cpk-hud-intro="true"]
8752
+ :is(
8753
+ .cpk-launcher-hud__masthead,
8754
+ .cpk-launcher-hud__feature-list,
8755
+ .cpk-launcher-hud__row,
8756
+ .cpk-launcher-hud__dismiss-day
8757
+ ) {
8417
8758
  animation: none !important;
8418
8759
  opacity: 1;
8419
8760
  transform: none;
@@ -8457,15 +8798,15 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
8457
8798
  }
8458
8799
 
8459
8800
  .inspector-account-strip {
8460
- background: linear-gradient(
8461
- 90deg,
8462
- #ffffff 0%,
8463
- #f3f1ff 58%,
8464
- #eefbf7 100%
8465
- ) !important;
8801
+ background: #f7f6fd !important;
8466
8802
  color: #010507 !important;
8467
8803
  }
8468
8804
 
8805
+ .inspector-window[data-color-scheme="dark"] .drag-handle,
8806
+ .inspector-window[data-color-scheme="dark"] .inspector-account-strip {
8807
+ background: #15171e !important;
8808
+ }
8809
+
8469
8810
  /* ── Tab buttons ─────────────────────────────────────────────── */
8470
8811
  /*
8471
8812
  * Named classes owned by this component — no Tailwind conflict.
@@ -8828,11 +9169,12 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
8828
9169
  const viteHot = {}.hot;
8829
9170
  if (viteHot) viteHot.on("vite:beforeUpdate", this.handleAppBeforeUnload);
8830
9171
  this.hydrateStateFromStorageEarly();
9172
+ this.refreshInspectorDismissalState();
8831
9173
  this.subscribeToSystemColorScheme();
8832
9174
  this.exampleTourDismissed = this.readThreadsExampleTourDismissed();
8833
9175
  require_persistence.clearLegacyAnnouncementReadState();
8834
9176
  this.tryAutoAttachCore();
8835
- this.ensureAnnouncementLoading();
9177
+ if (!this.isInspectorDismissed) this.ensureAnnouncementLoading();
8836
9178
  this.subscribeToInspectorThreadBridge();
8837
9179
  }
8838
9180
  this.requestUpdate();
@@ -8860,15 +9202,16 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
8860
9202
  this.unsubscribeFromInspectorThreadBridge();
8861
9203
  this.stopIntelligenceStory();
8862
9204
  this.clearIntelligencePromptReset();
8863
- this.threadsSetupPromptCopyGeneration += 1;
8864
- if (this.threadsSetupPromptCopyResetTimeoutId !== null) {
8865
- window.clearTimeout(this.threadsSetupPromptCopyResetTimeoutId);
8866
- this.threadsSetupPromptCopyResetTimeoutId = null;
9205
+ this.homeFeaturePromptCopyGeneration += 1;
9206
+ if (this.homeFeaturePromptCopyResetTimeoutId !== null) {
9207
+ window.clearTimeout(this.homeFeaturePromptCopyResetTimeoutId);
9208
+ this.homeFeaturePromptCopyResetTimeoutId = null;
8867
9209
  }
8868
- this.threadsSetupPromptCopyState = "idle";
9210
+ this.homeFeaturePromptCopyState = null;
8869
9211
  this.stopSignalPulse();
8870
9212
  this.cancelGestureTail();
8871
9213
  this.cancelLauncherHudIntro();
9214
+ this.clearInspectorDismissalTimer();
8872
9215
  this.cancelThreadRefreshDebounce();
8873
9216
  this.clearInspectorUsageRefresh();
8874
9217
  this.cleanupThreadsExampleOverviewVideo();
@@ -8903,11 +9246,13 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
8903
9246
  this.applyAnchorPosition("button");
8904
9247
  if (this.dockMode === "floating") if (this.hasCustomPosition.window) this.applyAnchorPosition("window");
8905
9248
  else this.centerContext("window");
8906
- this.ensureAnnouncementLoading();
9249
+ if (this.isInspectorDismissed) this.persistState();
9250
+ else this.ensureAnnouncementLoading();
8907
9251
  this.updateHostTransform(this.isOpen ? "window" : "button");
8908
- this.scheduleLauncherHudIntro();
9252
+ if (!this.isInspectorDismissed) this.scheduleLauncherHudIntro();
8909
9253
  }
8910
9254
  render() {
9255
+ if (this.isInspectorDismissed) return lit.nothing;
8911
9256
  return this.isOpen ? lit.html`
8912
9257
  <div data-inspector-portal-anchor></div>
8913
9258
  ` : this.renderButton();
@@ -9000,7 +9345,7 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
9000
9345
  aria-expanded=${this.launcherHudOpen ? "true" : "false"}
9001
9346
  aria-controls=${this.launcherHudOpen ? "cpk-launcher-hud" : lit.nothing}
9002
9347
  aria-label=${signal && signal.tone === "error" ? `${LAUNCHER_BASE_LABEL}, ${signal.accessibleLabel}` : LAUNCHER_BASE_LABEL}
9003
- title=${activeSignal === NEWS_SIGNAL_ID ? `${WHATS_NEW_VIEW_LABEL} — unread` : lit.nothing}
9348
+ title=${HUD_INSPECTOR_LABEL}
9004
9349
  data-drag-context="button"
9005
9350
  data-cpk-signal=${signal ? signal.tone : lit.nothing}
9006
9351
  data-cpk-signal-pulsing=${activeSignal !== null && this.pulsingSignal === activeSignal ? "true" : lit.nothing}
@@ -9085,14 +9430,78 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
9085
9430
  </span>
9086
9431
  `;
9087
9432
  }
9433
+ /** Whether a persisted temporary dismissal is still active. */
9434
+ get isInspectorDismissed() {
9435
+ return this.inspectorDismissedUntil !== null && this.inspectorDismissedUntil > Date.now();
9436
+ }
9437
+ /** Cancel the timer that restores Inspector after a temporary dismissal. */
9438
+ clearInspectorDismissalTimer() {
9439
+ if (this.inspectorDismissalTimer === null) return;
9440
+ clearTimeout(this.inspectorDismissalTimer);
9441
+ this.inspectorDismissalTimer = null;
9442
+ }
9443
+ /** Schedule Inspector to return just after its persisted deadline. */
9444
+ scheduleInspectorDismissalExpiry() {
9445
+ this.clearInspectorDismissalTimer();
9446
+ if (this.inspectorDismissedUntil === null) return;
9447
+ const delay = Math.max(0, this.inspectorDismissedUntil - Date.now() + 25);
9448
+ this.inspectorDismissalTimer = setTimeout(() => {
9449
+ this.inspectorDismissalTimer = null;
9450
+ this.refreshInspectorDismissalState();
9451
+ }, delay);
9452
+ }
9453
+ /** Reconcile this tab with host-scoped dismissal state from other ports. */
9454
+ refreshInspectorDismissalState() {
9455
+ const hadDismissal = this.inspectorDismissedUntil !== null;
9456
+ this.inspectorDismissedUntil = require_persistence.loadInspectorDismissedUntil();
9457
+ this.clearInspectorDismissalTimer();
9458
+ if (this.inspectorDismissedUntil !== null) {
9459
+ this.closePopOut();
9460
+ this.closeInspector();
9461
+ this.scheduleInspectorDismissalExpiry();
9462
+ if (!hadDismissal) this.requestUpdate();
9463
+ return;
9464
+ }
9465
+ if (!hadDismissal || !this.isConnected) return;
9466
+ this.ensureAnnouncementLoading();
9467
+ this.requestUpdate();
9468
+ this.updateComplete.then(() => {
9469
+ if (!this.isConnected || this.isInspectorDismissed) return;
9470
+ this.measureContext("button");
9471
+ this.applyAnchorPosition("button");
9472
+ this.scheduleLauncherHudIntro();
9473
+ this.flushPendingSignalPulse();
9474
+ });
9475
+ }
9476
+ /** Hide Inspector for a supported duration and persist it for this host. */
9477
+ dismissInspectorFor(duration) {
9478
+ const now = Date.now();
9479
+ const until = now + INSPECTOR_DISMISSAL_MS[duration];
9480
+ require_persistence.saveInspectorDismissedUntil(until, now);
9481
+ this.inspectorDismissedUntil = until;
9482
+ this.scheduleInspectorDismissalExpiry();
9483
+ this.settingsOpen = false;
9484
+ this.closeLauncherHud();
9485
+ this.stopSignalPulse();
9486
+ this.cancelGestureTail();
9487
+ this.cancelLauncherHudIntro();
9488
+ this.closePopOut();
9489
+ if (this.isOpen) {
9490
+ this.closeInspector();
9491
+ return;
9492
+ }
9493
+ this.persistState();
9494
+ this.requestUpdate();
9495
+ }
9088
9496
  isLauncherHudBlocked() {
9089
- return this.gestureSignal !== null;
9497
+ return this.gestureSignal !== null || this.isInspectorDismissed;
9090
9498
  }
9091
9499
  scheduleLauncherHudIntro(delay = LAUNCHER_HUD_INTRO_MS.delay) {
9500
+ if (this.isInspectorDismissed) return;
9092
9501
  if (this.launcherHudIntroStartTimer !== null) clearTimeout(this.launcherHudIntroStartTimer);
9093
9502
  this.launcherHudIntroStartTimer = setTimeout(() => {
9094
9503
  this.launcherHudIntroStartTimer = null;
9095
- if (!this.isConnected || this.isOpen) return;
9504
+ if (!this.isConnected || this.isOpen || this.isInspectorDismissed) return;
9096
9505
  if (this.isLauncherHudBlocked()) {
9097
9506
  this.scheduleLauncherHudIntro(LAUNCHER_HUD_INTRO_MS.blockedRetry);
9098
9507
  return;
@@ -9105,7 +9514,6 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
9105
9514
  this.launcherHudIntroEndTimer = null;
9106
9515
  this.launcherHudIntro = false;
9107
9516
  this.launcherHudOpen = false;
9108
- this.launcherHudHelp = null;
9109
9517
  this.requestUpdate();
9110
9518
  }, LAUNCHER_HUD_INTRO_MS.duration);
9111
9519
  }, delay);
@@ -9156,67 +9564,78 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
9156
9564
  clearTimeout(this.launcherHudCloseTimer);
9157
9565
  this.launcherHudCloseTimer = null;
9158
9566
  }
9159
- if (!this.launcherHudOpen && this.launcherHudHelp === null) return;
9567
+ if (!this.launcherHudOpen) return;
9160
9568
  this.launcherHudOpen = false;
9161
- this.launcherHudHelp = null;
9162
9569
  this.requestUpdate();
9163
9570
  }
9164
- renderHudCheck() {
9165
- return lit.html`
9166
- <svg
9167
- class="cpk-launcher-hud__check"
9168
- viewBox="0 0 16 16"
9169
- aria-hidden="true"
9170
- focusable="false"
9171
- data-cpk-hud-check
9172
- >
9173
- <path
9174
- fill="none"
9175
- stroke="currentColor"
9176
- stroke-width="2"
9177
- stroke-linecap="round"
9178
- stroke-linejoin="round"
9179
- d="M3 8.5 6.5 12 13 4.5"
9180
- />
9181
- </svg>
9182
- `;
9571
+ getUnreadAnnouncementTitle() {
9572
+ if (!this.newsSignalArmed || !this.announcementLoaded) return null;
9573
+ const title = this.announcementPreviewText?.trim() || "New in CopilotKit";
9574
+ const titleCharacters = Array.from(title);
9575
+ return titleCharacters.length > HUD_ANNOUNCEMENT_TITLE_LIMIT ? `${titleCharacters.slice(0, HUD_ANNOUNCEMENT_TITLE_LIMIT).join("").trimEnd()}...` : title;
9183
9576
  }
9184
9577
  renderHudRow(args) {
9185
- const helpOpen = this.launcherHudHelp === args.id;
9186
9578
  const detailId = `cpk-hud-detail-${args.id}`;
9187
9579
  return lit.html`
9188
9580
  <li
9189
9581
  class="cpk-launcher-hud__row"
9190
9582
  data-cpk-hud-row=${args.id}
9191
- data-cpk-hud-help=${helpOpen ? "open" : lit.nothing}
9192
- style=${(0, lit_directives_style_map_js.styleMap)({
9193
- "--cpk-hud-row-index": `${args.introIndex}`,
9194
- "--cpk-hud-row-delay": `${LAUNCHER_HUD_INTRO_MS.rowStart + args.introIndex * LAUNCHER_HUD_INTRO_MS.rowStagger}ms`
9195
- })}
9583
+ data-cpk-hud-action-kind="navigate"
9584
+ style=${(0, lit_directives_style_map_js.styleMap)({ "--cpk-hud-waterfall-delay": launcherHudWaterfallDelay(args.introIndex) })}
9196
9585
  @click=${(event) => this.handleHudRowClick(event, args.id)}
9197
9586
  >
9198
- <button
9199
- type="button"
9200
- class="cpk-launcher-hud__action"
9201
- data-cpk-hud-action
9202
- aria-describedby=${detailId}
9203
- @click=${(event) => this.handleHudActionClick(event, args.id)}
9204
- @pointerdown=${(event) => event.stopPropagation()}
9205
- >
9206
- ${args.connected ? this.renderHudCheck() : lit.nothing}${args.label}
9207
- </button>
9208
- <button
9209
- type="button"
9210
- class="cpk-launcher-hud__help"
9211
- aria-expanded=${helpOpen ? "true" : "false"}
9212
- aria-controls=${detailId}
9213
- aria-label=${`About ${args.label}`}
9214
- @click=${(event) => this.handleHudHelpClick(event, args.id)}
9215
- @pointerdown=${(event) => event.stopPropagation()}
9216
- >
9217
- <span aria-hidden="true">?</span>
9218
- </button>
9219
- <p class="cpk-launcher-hud__detail" id=${detailId}>${args.detail}</p>
9587
+ <span class="cpk-launcher-hud__primary">
9588
+ <button
9589
+ type="button"
9590
+ class="cpk-launcher-hud__action"
9591
+ data-cpk-hud-action
9592
+ aria-label=${`Open ${args.label} in Inspector`}
9593
+ @click=${(event) => this.handleHudActionClick(event, args.id)}
9594
+ @pointerdown=${(event) => event.stopPropagation()}
9595
+ >
9596
+ <span
9597
+ class="cpk-launcher-hud__feature-icon"
9598
+ data-cpk-hud-icon=${args.id}
9599
+ aria-hidden="true"
9600
+ >${this.renderIcon(args.icon)}</span
9601
+ >
9602
+ <span class="cpk-launcher-hud__label">${args.label}</span>
9603
+ </button>
9604
+ <span
9605
+ class="cpk-launcher-hud__tooltip"
9606
+ id=${detailId}
9607
+ role="tooltip"
9608
+ >${HUD_LEARN_MORE_LABEL}</span
9609
+ >
9610
+ </span>
9611
+ <span class="cpk-launcher-hud__controls">
9612
+ <button
9613
+ type="button"
9614
+ class="cpk-launcher-hud__learn-more"
9615
+ data-cpk-hud-learn-more=${args.id}
9616
+ aria-label=${`Learn more about ${args.label}`}
9617
+ aria-describedby=${detailId}
9618
+ @click=${(event) => this.handleHudActionClick(event, args.id)}
9619
+ @pointerdown=${(event) => event.stopPropagation()}
9620
+ >
9621
+ ${this.renderIcon("CircleHelp")}
9622
+ </button>
9623
+ <button
9624
+ type="button"
9625
+ class="cpk-launcher-hud__toggle"
9626
+ data-cpk-hud-toggle=${args.id}
9627
+ data-enabled=${args.connected ? "true" : "false"}
9628
+ aria-label=${args.connected ? `${args.label} is enabled` : `Open ${args.label} in Inspector`}
9629
+ ?disabled=${args.connected}
9630
+ @click=${(event) => this.handleHudActionClick(event, args.id)}
9631
+ @pointerdown=${(event) => event.stopPropagation()}
9632
+ >
9633
+ <span
9634
+ class="cpk-launcher-hud__toggle-track"
9635
+ aria-hidden="true"
9636
+ ></span>
9637
+ </button>
9638
+ </span>
9220
9639
  </li>
9221
9640
  `;
9222
9641
  }
@@ -9225,53 +9644,92 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
9225
9644
  const homeModel = this.getHomeModel();
9226
9645
  const threadsOn = homeModel.services.some((service) => service.id === "threads" && service.enabled);
9227
9646
  const learningOn = homeModel.services.some((service) => service.id === "memory" && service.enabled);
9228
- const intelligenceOn = homeModel.hero.connection === "connected";
9647
+ const announcementTitle = this.getUnreadAnnouncementTitle();
9648
+ const featureBlockIntroIndex = announcementTitle ? 1 : 0;
9229
9649
  return lit.html`
9230
9650
  <div
9231
9651
  class="cpk-launcher-hud"
9232
9652
  id="cpk-launcher-hud"
9233
9653
  data-cpk-launcher-hud
9234
9654
  data-cpk-hud-side=${this.launcherHudSide}
9655
+ data-cpk-hud-vertical=${this.contextState.button.anchor.vertical}
9235
9656
  data-cpk-hud-intro=${this.launcherHudIntro ? "true" : lit.nothing}
9236
9657
  data-color-scheme=${this.colorScheme}
9237
9658
  style=${(0, lit_directives_style_map_js.styleMap)({
9238
9659
  "--cpk-launcher-hud-intro-duration": `${LAUNCHER_HUD_INTRO_MS.duration}ms`,
9239
- "--cpk-launcher-hud-row-duration": `${LAUNCHER_HUD_INTRO_MS.rowDuration}ms`
9660
+ "--cpk-launcher-hud-waterfall-duration": `${LAUNCHER_HUD_INTRO_MS.waterfallDuration}ms`
9240
9661
  })}
9241
9662
  >
9242
9663
  <span class="cpk-launcher-hud__arrow" aria-hidden="true"></span>
9243
9664
  <div class="cpk-launcher-hud__card">
9244
- <ul class="cpk-launcher-hud__list" role="list">
9245
- ${this.renderHudRow({
9246
- id: "inspector",
9247
- label: HUD_OPEN_INSPECTOR_LABEL,
9248
- detail: HUD_OPEN_INSPECTOR_DETAIL,
9249
- introIndex: 0
9250
- })}
9251
- </ul>
9252
- <ul class="cpk-launcher-hud__list" role="list">
9665
+ ${announcementTitle ? lit.html`
9666
+ <div
9667
+ class="cpk-launcher-hud__masthead"
9668
+ style=${(0, lit_directives_style_map_js.styleMap)({ "--cpk-hud-waterfall-delay": launcherHudWaterfallDelay(0) })}
9669
+ >
9670
+ <div class="cpk-launcher-hud__news-wrap">
9671
+ <button
9672
+ type="button"
9673
+ class="cpk-launcher-hud__news"
9674
+ data-cpk-hud-news
9675
+ aria-label=${`Open new notification: ${announcementTitle}`}
9676
+ @click=${this.handleHudNewsClick}
9677
+ @pointerdown=${(event) => event.stopPropagation()}
9678
+ >
9679
+ <span
9680
+ class="cpk-launcher-hud__news-label"
9681
+ data-cpk-hud-news-label
9682
+ aria-hidden="true"
9683
+ >New</span
9684
+ >
9685
+ <span class="cpk-launcher-hud__news-title"
9686
+ >${announcementTitle}</span
9687
+ >
9688
+ </button>
9689
+ <button
9690
+ type="button"
9691
+ class="cpk-launcher-hud__news-dismiss"
9692
+ data-cpk-hud-news-dismiss
9693
+ aria-label="Dismiss notification"
9694
+ @click=${this.handleHudNewsDismissClick}
9695
+ @pointerdown=${(event) => event.stopPropagation()}
9696
+ >
9697
+ ${this.renderIcon("X")}
9698
+ </button>
9699
+ </div>
9700
+ </div>
9701
+ ` : lit.nothing}
9702
+ <ul
9703
+ class="cpk-launcher-hud__list cpk-launcher-hud__feature-list"
9704
+ role="list"
9705
+ style=${(0, lit_directives_style_map_js.styleMap)({ "--cpk-hud-waterfall-delay": launcherHudWaterfallDelay(featureBlockIntroIndex) })}
9706
+ >
9253
9707
  ${this.renderHudRow({
9254
9708
  id: "threads",
9255
- label: threadsOn ? HUD_THREADS_ON_LABEL : HUD_THREADS_OFF_LABEL,
9256
- detail: threadsOn ? HUD_THREADS_ON_DETAIL : HUD_THREADS_OFF_DETAIL,
9709
+ label: HUD_THREADS_LABEL,
9710
+ icon: "MessageSquare",
9257
9711
  connected: threadsOn,
9258
- introIndex: 1
9259
- })}
9260
- ${this.renderHudRow({
9261
- id: "intelligence",
9262
- label: intelligenceOn ? HUD_INTELLIGENCE_ON_LABEL : HUD_INTELLIGENCE_OFF_LABEL,
9263
- detail: intelligenceOn ? HUD_INTELLIGENCE_ON_DETAIL : HUD_INTELLIGENCE_OFF_DETAIL,
9264
- connected: intelligenceOn,
9265
- introIndex: 2
9712
+ introIndex: featureBlockIntroIndex + 1
9266
9713
  })}
9267
9714
  ${this.renderHudRow({
9268
9715
  id: "learning",
9269
- label: learningOn ? HUD_LEARNING_ON_LABEL : HUD_LEARNING_OFF_LABEL,
9270
- detail: learningOn ? HUD_LEARNING_ON_DETAIL : HUD_LEARNING_OFF_DETAIL,
9716
+ label: HUD_LEARNING_LABEL,
9717
+ icon: "Brain",
9271
9718
  connected: learningOn,
9272
- introIndex: 3
9719
+ introIndex: featureBlockIntroIndex + 2
9273
9720
  })}
9274
9721
  </ul>
9722
+ <button
9723
+ type="button"
9724
+ class="cpk-launcher-hud__dismiss-day"
9725
+ data-cpk-dismiss-inspector="day"
9726
+ style=${(0, lit_directives_style_map_js.styleMap)({ "--cpk-hud-waterfall-delay": launcherHudWaterfallDelay(featureBlockIntroIndex + 3) })}
9727
+ @click=${this.handleHudDismissDayClick}
9728
+ @pointerdown=${(event) => event.stopPropagation()}
9729
+ >
9730
+ <span aria-hidden="true">${this.renderIcon("Clock")}</span>
9731
+ Hide Inspector for a day
9732
+ </button>
9275
9733
  </div>
9276
9734
  </div>
9277
9735
  `;
@@ -9492,7 +9950,7 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
9492
9950
  type: lastRuntimeEvent.type,
9493
9951
  timestamp: lastRuntimeEvent.timestamp
9494
9952
  } : void 0,
9495
- memoriesOn: this._memoriesAvailable,
9953
+ memoriesOn: this._memorySubscribed && !this._memoriesLoading && this._memoriesAvailable,
9496
9954
  a2uiOn: this._core?.a2uiEnabled === true,
9497
9955
  openGenUiOn: this._core?.openGenerativeUIEnabled === true,
9498
9956
  suggestionsOn: this._core?.suggestions === true,
@@ -9900,23 +10358,67 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
9900
10358
  renderHomeFeatures(model) {
9901
10359
  const enabledServices = model.services.filter((service) => service.enabled);
9902
10360
  const disabledServices = model.services.filter((service) => !service.enabled);
9903
- const renderService = (service) => lit.html`
9904
- <a
10361
+ const renderService = (service) => {
10362
+ const copyState = this.homeFeaturePromptCopyState?.serviceId === service.id ? this.homeFeaturePromptCopyState.state : "idle";
10363
+ const stateDescription = `${service.label} is ${service.enabled ? "enabled in your runtime" : "not enabled in your runtime"}`;
10364
+ const copyLabel = copyState === "copied" ? "Copied" : copyState === "error" ? "Copy failed" : "Copy prompt";
10365
+ const copyTitle = copyLabel;
10366
+ return lit.html`
10367
+ <div
9905
10368
  class="inspector-home-feature"
9906
10369
  data-inspector-service=${service.id}
9907
10370
  data-state=${service.enabled ? "on" : "off"}
9908
- href=${this.appendRefParam(service.docsUrl, "cpk-inspector-home")}
9909
- target="_blank"
9910
- rel="noopener noreferrer"
9911
- aria-label="Learn more about ${service.label}, currently ${service.enabled ? "on" : "off"}"
10371
+ role="listitem"
9912
10372
  >
9913
- <span>${service.label}</span>
9914
- <small>${service.enabled ? "On" : "Off"}</small>
9915
- <span class="inspector-home-feature-arrow" aria-hidden="true">
9916
- ${this.renderIcon("ArrowUpRight")}
10373
+ <span
10374
+ class="inspector-home-feature-status"
10375
+ role="img"
10376
+ aria-label=${stateDescription}
10377
+ title=${stateDescription}
10378
+ >
10379
+ <span aria-hidden="true"></span>
9917
10380
  </span>
9918
- </a>
10381
+ <a
10382
+ class="inspector-home-feature-label"
10383
+ data-inspector-home-feature-docs=${service.id}
10384
+ href=${this.appendRefParam(service.docsUrl, "cpk-inspector-home")}
10385
+ target="_blank"
10386
+ rel="noopener noreferrer"
10387
+ aria-label="Open ${service.label} documentation in a new tab"
10388
+ >
10389
+ <span>${service.label}</span>
10390
+ <span class="inspector-home-feature-label-icon" aria-hidden="true"
10391
+ >${this.renderIcon("ArrowUpRight")}</span
10392
+ >
10393
+ </a>
10394
+ <span class="inspector-home-feature-actions">
10395
+ ${service.enabled ? lit.nothing : lit.html`
10396
+ <button
10397
+ type="button"
10398
+ class="inspector-home-feature-action inspector-system-health-url"
10399
+ data-inspector-home-feature-prompt=${service.id}
10400
+ data-copy-state=${copyState}
10401
+ data-full-value=${copyTitle}
10402
+ aria-label="${copyLabel} for ${service.label}"
10403
+ @click=${(event) => this.handleHomeFeaturePromptCopy(service, event)}
10404
+ >
10405
+ <span class="inspector-home-feature-action-icon" aria-hidden="true"
10406
+ >${this.renderIcon(copyState === "copied" ? "Check" : "Bot")}</span
10407
+ >
10408
+ <span class="inspector-home-feature-action-label"
10409
+ >${copyTitle}</span
10410
+ >
10411
+ </button>
10412
+ `}
10413
+ ${service.enabled ? lit.nothing : lit.html`
10414
+ <span class="sr-only" aria-live="polite">
10415
+ ${copyState === "copied" ? `${service.label} implementation prompt copied.` : copyState === "error" ? `Could not copy the ${service.label} implementation prompt.` : ""}
10416
+ </span>
10417
+ `}
10418
+ </span>
10419
+ </div>
9919
10420
  `;
10421
+ };
9920
10422
  return lit.html`
9921
10423
  <section
9922
10424
  class="inspector-home-section inspector-home-features"
@@ -9925,7 +10427,7 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
9925
10427
  <header class="inspector-home-section-header">
9926
10428
  <h2 class="inspector-home-section-title">Features</h2>
9927
10429
  <span>
9928
- ${enabledServices.length} active, ${disabledServices.length} off
10430
+ ${enabledServices.length} enabled, ${disabledServices.length} available
9929
10431
  </span>
9930
10432
  </header>
9931
10433
  ${model.services.length === 0 ? lit.html`
@@ -9937,13 +10439,13 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
9937
10439
  <section
9938
10440
  class="inspector-home-feature-group"
9939
10441
  data-feature-state-group="active"
9940
- aria-label="Active features"
10442
+ aria-label="Enabled features"
9941
10443
  >
9942
10444
  <header class="inspector-home-feature-group-header">
9943
- <strong>Active</strong>
10445
+ <strong>Enabled</strong>
9944
10446
  <span>${enabledServices.length}</span>
9945
10447
  </header>
9946
- <div class="inspector-home-feature-list">
10448
+ <div class="inspector-home-feature-list" role="list">
9947
10449
  ${enabledServices.length > 0 ? enabledServices.map(renderService) : lit.html`
9948
10450
  <p class="inspector-home-feature-group-empty">None enabled</p>
9949
10451
  `}
@@ -9952,13 +10454,13 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
9952
10454
  <section
9953
10455
  class="inspector-home-feature-group"
9954
10456
  data-feature-state-group="available"
9955
- aria-label="Available features"
10457
+ aria-label="Features available to add"
9956
10458
  >
9957
10459
  <header class="inspector-home-feature-group-header">
9958
- <strong>Available</strong>
10460
+ <strong>Available to add</strong>
9959
10461
  <span>${disabledServices.length}</span>
9960
10462
  </header>
9961
- <div class="inspector-home-feature-list">
10463
+ <div class="inspector-home-feature-list" role="list">
9962
10464
  ${disabledServices.length > 0 ? disabledServices.map(renderService) : lit.html`
9963
10465
  <p class="inspector-home-feature-group-empty">Everything is active</p>
9964
10466
  `}
@@ -9967,6 +10469,47 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
9967
10469
  </div>
9968
10470
  `}
9969
10471
  </section>
10472
+ `;
10473
+ }
10474
+ showHomeFeaturePromptCopyState(serviceId, state, generation) {
10475
+ if (!this.isConnected || generation !== this.homeFeaturePromptCopyGeneration) return;
10476
+ if (this.homeFeaturePromptCopyResetTimeoutId !== null) window.clearTimeout(this.homeFeaturePromptCopyResetTimeoutId);
10477
+ this.homeFeaturePromptCopyState = {
10478
+ serviceId,
10479
+ state
10480
+ };
10481
+ this.requestUpdate();
10482
+ this.homeFeaturePromptCopyResetTimeoutId = window.setTimeout(() => {
10483
+ if (!this.isConnected || generation !== this.homeFeaturePromptCopyGeneration) return;
10484
+ this.homeFeaturePromptCopyState = null;
10485
+ this.homeFeaturePromptCopyResetTimeoutId = null;
10486
+ this.requestUpdate();
10487
+ }, 2e3);
10488
+ }
10489
+ getHomeFeaturePromptTarget(serviceId) {
10490
+ return this.getHomeModel().services.find((service) => service.id === serviceId);
10491
+ }
10492
+ renderFeatureSetupPrompt(serviceId, className) {
10493
+ const service = this.getHomeFeaturePromptTarget(serviceId);
10494
+ if (!service) return lit.nothing;
10495
+ const copyState = this.homeFeaturePromptCopyState?.serviceId === service.id ? this.homeFeaturePromptCopyState.state : "idle";
10496
+ const label = copyState === "copied" ? "Copied" : copyState === "error" ? "Copy blocked" : "Copy setup prompt";
10497
+ return lit.html`
10498
+ <button
10499
+ type="button"
10500
+ class=${className}
10501
+ data-inspector-feature-setup-prompt=${service.id}
10502
+ data-inspector-threads-setup-prompt=${service.id === "threads" ? "" : lit.nothing}
10503
+ data-copy-state=${copyState}
10504
+ 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}`}
10505
+ @click=${(event) => this.handleHomeFeaturePromptCopy(service, event)}
10506
+ >
10507
+ ${this.renderIcon(copyState === "copied" ? "Check" : "Copy")}
10508
+ ${label}
10509
+ </button>
10510
+ <span class="sr-only" aria-live="polite">
10511
+ ${copyState === "copied" ? `${service.label} setup prompt copied.` : copyState === "error" ? `Could not copy the ${service.label} setup prompt.` : ""}
10512
+ </span>
9970
10513
  `;
9971
10514
  }
9972
10515
  handleHomeHeroCta(action) {
@@ -10962,6 +11505,7 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
10962
11505
  this.draggedDuringInteraction = false;
10963
11506
  }
10964
11507
  openInspector(source, options = {}) {
11508
+ if (this.isInspectorDismissed) return;
10965
11509
  if (options.threadId) this.focusThread(options);
10966
11510
  if (this.isPoppedOut) return;
10967
11511
  if (this.isOpen) return;
@@ -10973,10 +11517,8 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
10973
11517
  this.closeLauncherHud();
10974
11518
  const hudMenu = this.hudLandingMenu;
10975
11519
  this.hudLandingMenu = null;
10976
- if (hudMenu) {
10977
- this.selectedMenu = hudMenu;
10978
- this.lastSelectedMenuByGroup[require_inspector_nav.getGroupForMenu(hudMenu)] = hudMenu;
10979
- } else if (activeSignalAtOpen !== null && source === "floating_button") {
11520
+ if (hudMenu) this.handleMenuSelect(hudMenu);
11521
+ else if (activeSignalAtOpen !== null && source === "floating_button") {
10980
11522
  const landing = LAUNCHER_SIGNALS[activeSignalAtOpen].landingTarget;
10981
11523
  this.selectedMenu = landing;
10982
11524
  this.lastSelectedMenuByGroup[require_inspector_nav.getGroupForMenu(landing)] = landing;
@@ -11850,6 +12392,40 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
11850
12392
  </a>
11851
12393
  </div>
11852
12394
  </section>
12395
+
12396
+ <section
12397
+ class="inspector-settings-section"
12398
+ aria-labelledby="inspector-settings-visibility-title"
12399
+ >
12400
+ <div class="inspector-settings-section-heading">
12401
+ <span class="inspector-settings-section-icon" aria-hidden="true">
12402
+ ${this.renderIcon("EyeOff")}
12403
+ </span>
12404
+ <div>
12405
+ <h2 id="inspector-settings-visibility-title">Visibility</h2>
12406
+ <p>Temporarily hide the Inspector on this domain.</p>
12407
+ </div>
12408
+ </div>
12409
+
12410
+ <div class="inspector-settings-visibility">
12411
+ <div>
12412
+ <h3>Take a break from the Inspector</h3>
12413
+ <p>
12414
+ Hide the Inspector for seven days. It will return automatically
12415
+ when the week is over.
12416
+ </p>
12417
+ </div>
12418
+ <button
12419
+ type="button"
12420
+ class="inspector-settings-dismiss"
12421
+ data-cpk-dismiss-inspector="week"
12422
+ @click=${() => this.dismissInspectorFor("week")}
12423
+ >
12424
+ <span aria-hidden="true">${this.renderIcon("Clock")}</span>
12425
+ Hide Inspector for one week
12426
+ </button>
12427
+ </div>
12428
+ </section>
11853
12429
  </div>
11854
12430
  `;
11855
12431
  }
@@ -12391,19 +12967,6 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
12391
12967
  ` : lit.nothing}
12392
12968
  `;
12393
12969
  }
12394
- /** Show a copy result briefly and announce it to assistive technology. */
12395
- showThreadsSetupPromptCopyState(state, generation) {
12396
- if (!this.isConnected || generation !== this.threadsSetupPromptCopyGeneration) return;
12397
- if (this.threadsSetupPromptCopyResetTimeoutId !== null) window.clearTimeout(this.threadsSetupPromptCopyResetTimeoutId);
12398
- this.threadsSetupPromptCopyState = state;
12399
- this.requestUpdate();
12400
- this.threadsSetupPromptCopyResetTimeoutId = window.setTimeout(() => {
12401
- if (!this.isConnected || generation !== this.threadsSetupPromptCopyGeneration) return;
12402
- this.threadsSetupPromptCopyState = "idle";
12403
- this.threadsSetupPromptCopyResetTimeoutId = null;
12404
- this.requestUpdate();
12405
- }, 2e3);
12406
- }
12407
12970
  renderThreadsExampleOverview(locked) {
12408
12971
  const lockedCopy = locked ? this.getThreadsLockedCopy() : void 0;
12409
12972
  const { lockedAction } = this.inspectorMetadataProjection;
@@ -12421,32 +12984,7 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
12421
12984
  ${locked ? this.renderRuntimeEntitlementDiagnostic(this.getRuntimeEntitlementDiagnostic()) : lit.nothing}
12422
12985
  <div class="cpk-threads-overview-actions">
12423
12986
  ${locked ? lit.html`
12424
- ${this.inspectorMetadataProjection.licenseState === "valid" ? lit.html`
12425
- <button
12426
- data-inspector-threads-setup-prompt
12427
- type="button"
12428
- aria-label=${this.threadsSetupPromptCopyState === "copied" ? "Setup prompt copied" : this.threadsSetupPromptCopyState === "error" ? "Copy setup prompt failed. Try again" : "Copy setup prompt for your coding agent"}
12429
- @click=${this.handleThreadsSetupPromptCopy}
12430
- >
12431
- ${this.renderIcon(this.threadsSetupPromptCopyState === "copied" ? "Check" : "Copy")}
12432
- ${this.threadsSetupPromptCopyState === "copied" ? "Copied" : this.threadsSetupPromptCopyState === "error" ? "Copy blocked" : "Copy prompt for your agent"}
12433
- </button>
12434
- <a
12435
- data-inspector-threads-setup-link
12436
- href=${this.getThreadsRuntimeSetupDocsUrl()}
12437
- target="_blank"
12438
- rel="noopener"
12439
- aria-label="Open setup guide (opens in a new tab)"
12440
- >
12441
- Open setup guide
12442
- </a>
12443
- <span
12444
- class="sr-only"
12445
- data-inspector-threads-setup-copy-status
12446
- aria-live="polite"
12447
- >${this.threadsSetupPromptCopyState === "copied" ? "Setup prompt copied." : this.threadsSetupPromptCopyState === "error" ? "Setup prompt copy failed. Open the setup guide and copy it manually." : ""}</span
12448
- >
12449
- ` : lit.nothing}
12987
+ ${this.renderFeatureSetupPrompt("threads", "cpk-threads-overview-action cpk-threads-overview-action-primary")}
12450
12988
  ${lockedAction ? this.renderInspectorAction(lockedAction, "locked") : lit.nothing}
12451
12989
  ` : lit.html`
12452
12990
  <a
@@ -12699,7 +13237,7 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
12699
13237
  `;
12700
13238
  }
12701
13239
  renderMemoriesView() {
12702
- if (!this.core?.intelligence || !this._memoriesAvailable) return lit.html`
13240
+ if (!this.getHomeModel().services.some((service) => service.id === "memory" && service.enabled)) return lit.html`
12703
13241
  <div class="cpk-memory-locked">
12704
13242
  ${this.renderThreadsLockedBackgroundMockup()}
12705
13243
  <div aria-hidden="true" class="cpk-memory-locked-scrim"></div>
@@ -12714,6 +13252,7 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
12714
13252
  ${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."}
12715
13253
  </p>
12716
13254
  <div class="cpk-memory-locked-actions">
13255
+ ${this.renderFeatureSetupPrompt("memory", "cpk-memory-locked-action")}
12717
13256
  <a
12718
13257
  href=${this.getTalkToEngineerUrl()}
12719
13258
  target="_blank"
@@ -14510,12 +15049,12 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
14510
15049
  /**
14511
15050
  * Requests one beat for a signal, running it now or deferring it.
14512
15051
  *
14513
- * There is a single pending slot and four reasons a beat cannot land. All
14514
- * four are the same situation — "cannot land now, run later" — and treating
15052
+ * There is a single pending slot and five reasons a beat cannot land. All
15053
+ * five are the same situation — "cannot land now, run later" — and treating
14515
15054
  * them alike is the point: three separate behaviours for one situation would
14516
15055
  * not survive a third signal.
14517
15056
  *
14518
- * Reason 3 is not cosmetic. Starting a beat while one runs does not restart
15057
+ * Reason 4 is not cosmetic. Starting a beat while one runs does not restart
14519
15058
  * the animation, because the attribute it binds to does not change value and
14520
15059
  * the pseudo-element selectors match on attribute *presence*; the running
14521
15060
  * beat would merely change colour mid-flight. A failure that arms during an
@@ -14524,11 +15063,11 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
14524
15063
  *
14525
15064
  * A failure's beat is followed by a pill, and the whole 3.4-second gesture
14526
15065
  * holds this one slot for its full duration. That is not a second scheduling
14527
- * concept: reason 3 already says "another beat is running", and a gesture is
15066
+ * concept: reason 4 already says "another beat is running", and a gesture is
14528
15067
  * simply a longer beat.
14529
15068
  */
14530
15069
  startSignalPulse(key) {
14531
- if (this.isOpen || typeof document !== "undefined" && document.visibilityState !== "visible" || this.gestureSlotSignal !== null && this.gestureSlotSignal !== key || this.getActiveLauncherSignal() !== key) {
15070
+ if (this.isOpen || this.isInspectorDismissed || typeof document !== "undefined" && document.visibilityState !== "visible" || this.gestureSlotSignal !== null && this.gestureSlotSignal !== key || this.getActiveLauncherSignal() !== key) {
14532
15071
  const pending = this.pendingPulseSignal;
14533
15072
  if (pending === null || LAUNCHER_SIGNALS[key].priority >= LAUNCHER_SIGNALS[pending].priority) this.pendingPulseSignal = key;
14534
15073
  this.requestUpdate();
@@ -14593,7 +15132,7 @@ var WebInspectorElement = class WebInspectorElement extends lit.LitElement {
14593
15132
  }
14594
15133
  /**
14595
15134
  * The signal holding the single gesture slot: a beat in flight, or the pill
14596
- * and spoken sentence that follow it. One slot, not two — see reason 3 in
15135
+ * and spoken sentence that follow it. One slot, not two — see reason 4 in
14597
15136
  * `startSignalPulse`.
14598
15137
  */
14599
15138
  get gestureSlotSignal() {