@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 +906 -367
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +33 -19
- package/dist/index.d.cts.map +1 -1
- package/dist/index.d.mts +33 -19
- package/dist/index.d.mts.map +1 -1
- package/dist/index.mjs +909 -370
- package/dist/index.mjs.map +1 -1
- package/dist/index.umd.js +1078 -457
- package/dist/index.umd.js.map +1 -1
- package/dist/lib/home-briefing.cjs +19 -5
- package/dist/lib/home-briefing.cjs.map +1 -1
- package/dist/lib/home-briefing.mjs +19 -6
- package/dist/lib/home-briefing.mjs.map +1 -1
- package/dist/lib/persistence.cjs +56 -3
- package/dist/lib/persistence.cjs.map +1 -1
- package/dist/lib/persistence.mjs +54 -4
- package/dist/lib/persistence.mjs.map +1 -1
- package/dist/lib/telemetry.cjs +15 -0
- package/dist/lib/telemetry.cjs.map +1 -1
- package/dist/lib/telemetry.d.cts.map +1 -1
- package/dist/lib/telemetry.d.mts.map +1 -1
- package/dist/lib/telemetry.mjs +15 -1
- package/dist/lib/telemetry.mjs.map +1 -1
- package/dist/package.cjs +1 -1
- package/dist/package.mjs +1 -1
- package/dist/styles/generated.cjs +1 -1
- package/dist/styles/generated.cjs.map +1 -1
- package/dist/styles/generated.mjs +1 -1
- package/dist/styles/generated.mjs.map +1 -1
- package/package.json +3 -3
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
|
|
116
|
-
const
|
|
117
|
-
const
|
|
118
|
-
const
|
|
119
|
-
const
|
|
120
|
-
const
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
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 =
|
|
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
|
|
251
|
-
* then
|
|
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
|
-
|
|
258
|
-
|
|
259
|
-
|
|
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
|
|
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.
|
|
5060
|
-
this.
|
|
5061
|
-
this.
|
|
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
|
-
|
|
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 === "
|
|
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-
|
|
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.
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
8136
|
-
|
|
8137
|
-
|
|
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: #
|
|
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:
|
|
8171
|
+
z-index: 2;
|
|
8159
8172
|
width: 10px;
|
|
8160
8173
|
height: 10px;
|
|
8161
8174
|
border: 0;
|
|
8162
|
-
|
|
8163
|
-
|
|
8164
|
-
|
|
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-
|
|
8184
|
-
|
|
8185
|
-
|
|
8186
|
-
|
|
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
|
|
8193
|
-
align-items:
|
|
8194
|
-
|
|
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
|
-
|
|
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
|
-
|
|
8211
|
-
|
|
8212
|
-
|
|
8213
|
-
|
|
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:
|
|
8457
|
+
min-height: 52px;
|
|
8220
8458
|
align-items: center;
|
|
8221
|
-
padding:
|
|
8459
|
+
padding: 7px 4px;
|
|
8222
8460
|
border: 0;
|
|
8223
|
-
border-radius:
|
|
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
|
|
8238
|
-
|
|
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-
|
|
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:
|
|
8257
|
-
height:
|
|
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(
|
|
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-
|
|
8270
|
-
|
|
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
|
-
|
|
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
|
-
|
|
8590
|
+
background: #8c8e99;
|
|
8591
|
+
transition:
|
|
8592
|
+
background 120ms ease,
|
|
8593
|
+
transform 120ms ease;
|
|
8278
8594
|
}
|
|
8279
8595
|
|
|
8280
|
-
.cpk-launcher-
|
|
8281
|
-
|
|
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-
|
|
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-
|
|
8291
|
-
|
|
8292
|
-
|
|
8293
|
-
|
|
8294
|
-
|
|
8295
|
-
|
|
8296
|
-
|
|
8297
|
-
|
|
8298
|
-
|
|
8299
|
-
|
|
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:
|
|
8656
|
+
transform: translate(3px, -50%);
|
|
8657
|
+
white-space: normal;
|
|
8303
8658
|
transition:
|
|
8304
|
-
|
|
8305
|
-
|
|
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-
|
|
8311
|
-
|
|
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-
|
|
8315
|
-
|
|
8316
|
-
|
|
8317
|
-
|
|
8318
|
-
|
|
8319
|
-
|
|
8320
|
-
|
|
8321
|
-
|
|
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-
|
|
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;
|
|
8334
|
-
*
|
|
8335
|
-
*
|
|
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:
|
|
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:
|
|
8716
|
+
transform: translateY(3px);
|
|
8350
8717
|
}
|
|
8351
8718
|
}
|
|
8352
8719
|
|
|
8353
|
-
@keyframes cpk-launcher-hud-
|
|
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(
|
|
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"]
|
|
8397
|
-
|
|
8398
|
-
|
|
8399
|
-
|
|
8400
|
-
|
|
8401
|
-
|
|
8402
|
-
|
|
8403
|
-
|
|
8404
|
-
|
|
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:
|
|
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"]
|
|
8416
|
-
|
|
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:
|
|
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.
|
|
8864
|
-
if (this.
|
|
8865
|
-
window.clearTimeout(this.
|
|
8866
|
-
this.
|
|
9205
|
+
this.homeFeaturePromptCopyGeneration += 1;
|
|
9206
|
+
if (this.homeFeaturePromptCopyResetTimeoutId !== null) {
|
|
9207
|
+
window.clearTimeout(this.homeFeaturePromptCopyResetTimeoutId);
|
|
9208
|
+
this.homeFeaturePromptCopyResetTimeoutId = null;
|
|
8867
9209
|
}
|
|
8868
|
-
this.
|
|
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.
|
|
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=${
|
|
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
|
|
9567
|
+
if (!this.launcherHudOpen) return;
|
|
9160
9568
|
this.launcherHudOpen = false;
|
|
9161
|
-
this.launcherHudHelp = null;
|
|
9162
9569
|
this.requestUpdate();
|
|
9163
9570
|
}
|
|
9164
|
-
|
|
9165
|
-
return
|
|
9166
|
-
|
|
9167
|
-
|
|
9168
|
-
|
|
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-
|
|
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
|
-
<
|
|
9199
|
-
|
|
9200
|
-
|
|
9201
|
-
|
|
9202
|
-
|
|
9203
|
-
|
|
9204
|
-
|
|
9205
|
-
|
|
9206
|
-
|
|
9207
|
-
|
|
9208
|
-
|
|
9209
|
-
|
|
9210
|
-
|
|
9211
|
-
|
|
9212
|
-
|
|
9213
|
-
|
|
9214
|
-
|
|
9215
|
-
|
|
9216
|
-
|
|
9217
|
-
|
|
9218
|
-
|
|
9219
|
-
|
|
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
|
|
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-
|
|
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
|
-
|
|
9245
|
-
|
|
9246
|
-
|
|
9247
|
-
|
|
9248
|
-
|
|
9249
|
-
|
|
9250
|
-
|
|
9251
|
-
|
|
9252
|
-
|
|
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:
|
|
9256
|
-
|
|
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:
|
|
9270
|
-
|
|
9716
|
+
label: HUD_LEARNING_LABEL,
|
|
9717
|
+
icon: "Brain",
|
|
9271
9718
|
connected: learningOn,
|
|
9272
|
-
introIndex:
|
|
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) =>
|
|
9904
|
-
|
|
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
|
-
|
|
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
|
|
9914
|
-
|
|
9915
|
-
|
|
9916
|
-
|
|
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
|
-
|
|
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}
|
|
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="
|
|
10442
|
+
aria-label="Enabled features"
|
|
9941
10443
|
>
|
|
9942
10444
|
<header class="inspector-home-feature-group-header">
|
|
9943
|
-
<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="
|
|
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
|
-
|
|
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.
|
|
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.
|
|
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
|
|
14514
|
-
*
|
|
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
|
|
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
|
|
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
|
|
15135
|
+
* and spoken sentence that follow it. One slot, not two — see reason 4 in
|
|
14597
15136
|
* `startSignalPulse`.
|
|
14598
15137
|
*/
|
|
14599
15138
|
get gestureSlotSignal() {
|