@eyeglass/inspector 0.1.4 → 0.1.6
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.js +288 -20
- package/dist/inspector.d.ts +4 -0
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var R=new Set([0,1,11,14,15]);function F(s){let t=Object.keys(s).find(e=>e.startsWith("__reactFiber$")||e.startsWith("__reactInternalInstance$"));return t?s[t]:null}function H(s){if(!R.has(s.tag)||typeof s.type!="function")return!1;let
|
|
1
|
+
var R=new Set([0,1,11,14,15]);function F(s){let t=Object.keys(s).find(e=>e.startsWith("__reactFiber$")||e.startsWith("__reactInternalInstance$"));return t?s[t]:null}function H(s){if(!R.has(s.tag)||typeof s.type!="function")return!1;let a=s.type.displayName||s.type.name||"";return!(!a||a.startsWith("Context")||a.endsWith("Provider")||a==="StrictMode")}function T(s){return s.type.displayName||s.type.name||void 0}function j(s){let a=s;for(;a;){if(H(a))return a;a=a.return}return null}function M(s){let a=[],t=s;for(;t;){if(H(t)){let e=T(t);e&&a.push(e)}t=t.return}return a}function C(s){if(!s)return;let a={};for(let[t,e]of Object.entries(s)){if(t==="children")continue;let i=typeof e;(i==="string"||i==="number"||i==="boolean"||e===null)&&(a[t]=e)}return Object.keys(a).length>0?a:void 0}function _(s){let a=s.__vue__;if(a)return{name:"vue",componentName:a.$options?.name||a.$options?._componentTag};let e=Object.keys(s).find(i=>i.startsWith("__vue"));if(e){let i=s[e];if(i){let n=i,r,o;n?.type?.name?r=n.type.name:n?.type?.__name?r=n.type.__name:n?.component?.type?.name?r=n.component.type.name:n?.component?.type?.__name&&(r=n.component.type.__name);let l=n?.props||n?.component?.props;l&&(o=C(l));let d;return n?.type?.__file?d=n.type.__file:n?.component?.type?.__file&&(d=n.component.type.__file),{name:"vue",componentName:r,filePath:d,props:o}}return{name:"vue"}}return null}function O(s){let t=Object.keys(s).find(e=>e.startsWith("__svelte"));if(t){let e=s[t],i;if(e?.constructor?.name&&e.constructor.name!=="Object"&&(i=e.constructor.name),!i&&e?.$$?.ctx){let n=e.$$.ctx;n?.constructor?.name&&n.constructor.name!=="Object"&&(i=n.constructor.name)}return{name:"svelte",componentName:i}}return null}function I(s){let a=F(s);if(a){let i=j(a);if(i){let r=T(i),o=i._debugSource,l=M(i);return{name:"react",componentName:r,filePath:o?.fileName,lineNumber:o?.lineNumber,props:C(i.memoizedProps),ancestry:l.length>0?l:void 0}}let n=M(a);return{name:"react",ancestry:n.length>0?n:void 0}}let t=_(s);if(t)return t;let e=O(s);return e||{name:"vanilla"}}function G(s){let a=s.getAttribute("aria-label"),t=s.getAttribute("aria-describedby"),e=s.getAttribute("aria-disabled"),i=s.getAttribute("aria-expanded"),n=s.getAttribute("aria-checked"),r=s.getAttribute("aria-hidden"),o=null;t&&(o=document.getElementById(t)?.textContent?.trim()||null);let l=e==="true"||s.disabled||s.hasAttribute("disabled");return{label:a||s.getAttribute("title")||null,description:o,disabled:l,expanded:i?i==="true":void 0,checked:n==="true"?!0:n==="false"?!1:n==="mixed"?"mixed":void 0,hidden:r==="true"||s.hidden||!1}}function U(s){let a=s.getBoundingClientRect();return{x:Math.round(a.x),y:Math.round(a.y),width:Math.round(a.width),height:Math.round(a.height),visible:a.width>0&&a.height>0}}function Y(s){let a=getComputedStyle(s);return{display:a.display,position:a.position,flexDirection:a.flexDirection!=="row"?a.flexDirection:void 0,gridTemplate:a.display==="grid"?`${a.gridTemplateColumns} / ${a.gridTemplateRows}`:void 0,padding:a.padding,margin:a.margin,color:a.color,backgroundColor:a.backgroundColor,fontFamily:a.fontFamily,zIndex:a.zIndex}}function W(s){let a=s.getAttribute("role");if(a)return a;let t=s.tagName.toLowerCase();return{a:"link",button:"button",input:s.type||"textbox",select:"combobox",textarea:"textbox",img:"img",nav:"navigation",main:"main",header:"banner",footer:"contentinfo",aside:"complementary",article:"article",section:"region",form:"form",ul:"list",ol:"list",li:"listitem",table:"table",tr:"row",td:"cell",th:"columnheader",dialog:"dialog",h1:"heading",h2:"heading",h3:"heading",h4:"heading",h5:"heading",h6:"heading"}[t]||"generic"}function K(s){let a=s.getAttribute("aria-label");if(a)return a;let t=s.getAttribute("aria-labelledby");if(t){let i=document.getElementById(t);if(i)return i.textContent?.trim()||""}if(s.tagName==="INPUT"||s.tagName==="SELECT"||s.tagName==="TEXTAREA"){let i=s.getAttribute("id");if(i){let n=document.querySelector(`label[for="${i}"]`);if(n)return n.textContent?.trim()||""}}if(s.tagName==="IMG")return s.alt||"";let e=s.textContent?.trim()||"";return e.length>50?e.slice(0,50)+"...":e}function J(s){let a={},t=s.getAttribute("id");t&&(a.id=t);let e=s.getAttribute("class");e?.trim()&&(a.className=e.trim());let i={};for(let n=0;n<s.attributes.length;n++){let r=s.attributes[n];r.name.startsWith("data-")&&(i[r.name]=r.value)}return Object.keys(i).length>0&&(a.dataAttributes=i),a}function y(s){let a=J(s);return{role:W(s),name:K(s),tagName:s.tagName.toLowerCase(),...a,framework:I(s),a11y:G(s),geometry:U(s),styles:Y(s),timestamp:Date.now(),url:window.location.href}}var b="http://localhost:3300",x="eyeglass_session",P="eyeglass_history",$="eyeglass_enabled",L="eyeglass_autocommit",N="eyeglass_theme",Z=1e4,w=["Ruminating...","Percolating...","Divining...","Grokking...","Communing...","Concocting...","Synthesizing...","Distilling...","Incubating...","Forging...","Scrutinizing...","Triangulating...","Unraveling...","Traversing...","Sifting...","Marshaling...","Hydrating...","Harmonizing...","Indexing...","Entangling..."],X='url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiM2MzY2ZjEiIHN0cm9rZS13aWR0aD0iMi41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0xIDEyczQtOCAxMS04IDExIDggMTEgOC00IDgtMTEgOC0xMS04LTExLTh6Ii8+PGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iMyIgZmlsbD0iIzYzNjZmMSIvPjwvc3ZnPg==") 8 8, crosshair',Q=`
|
|
2
2
|
:host {
|
|
3
3
|
all: initial;
|
|
4
4
|
position: fixed;
|
|
@@ -27,6 +27,199 @@ var R=new Set([0,1,11,14,15]);function F(s){let t=Object.keys(s).find(e=>e.start
|
|
|
27
27
|
--border-radius-sm: 10px;
|
|
28
28
|
}
|
|
29
29
|
|
|
30
|
+
:host([data-theme="dark"]) {
|
|
31
|
+
--glass-bg: rgba(22, 27, 34, 0.95);
|
|
32
|
+
--glass-border: rgba(240, 246, 252, 0.1);
|
|
33
|
+
--glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.4);
|
|
34
|
+
--divider: rgba(240, 246, 252, 0.1);
|
|
35
|
+
--text-primary: #e6edf3;
|
|
36
|
+
--text-secondary: #8b949e;
|
|
37
|
+
--text-muted: #6e7681;
|
|
38
|
+
--accent: #3b82f6;
|
|
39
|
+
--accent-soft: rgba(59, 130, 246, 0.15);
|
|
40
|
+
--success: #3fb950;
|
|
41
|
+
--error: #f85149;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
@media (prefers-color-scheme: dark) {
|
|
45
|
+
:host([data-theme="auto"]) {
|
|
46
|
+
--glass-bg: rgba(22, 27, 34, 0.95);
|
|
47
|
+
--glass-border: rgba(240, 246, 252, 0.1);
|
|
48
|
+
--glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.4);
|
|
49
|
+
--divider: rgba(240, 246, 252, 0.1);
|
|
50
|
+
--text-primary: #e6edf3;
|
|
51
|
+
--text-secondary: #8b949e;
|
|
52
|
+
--text-muted: #6e7681;
|
|
53
|
+
--accent: #3b82f6;
|
|
54
|
+
--accent-soft: rgba(59, 130, 246, 0.15);
|
|
55
|
+
--success: #3fb950;
|
|
56
|
+
--error: #f85149;
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
/* Dark mode component overrides */
|
|
61
|
+
:host([data-theme="dark"]) .close-btn:hover,
|
|
62
|
+
:host([data-theme="dark"]) .toast-close:hover,
|
|
63
|
+
:host([data-theme="dark"]) .hub-header:hover,
|
|
64
|
+
:host([data-theme="dark"]) .hub-disable:hover,
|
|
65
|
+
:host([data-theme="dark"]) .hub-back-btn:hover,
|
|
66
|
+
:host([data-theme="dark"]) .hub-settings-btn:hover,
|
|
67
|
+
:host([data-theme="dark"]) .followup-done:hover {
|
|
68
|
+
background: rgba(255, 255, 255, 0.08);
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
:host([data-theme="dark"]) .btn-secondary {
|
|
72
|
+
background: rgba(255, 255, 255, 0.08);
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
:host([data-theme="dark"]) .btn-secondary:hover {
|
|
76
|
+
background: rgba(255, 255, 255, 0.12);
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
:host([data-theme="dark"]) .input-field {
|
|
80
|
+
border-color: rgba(255, 255, 255, 0.1);
|
|
81
|
+
background: rgba(255, 255, 255, 0.08);
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
:host([data-theme="dark"]) .input-field:focus {
|
|
85
|
+
background: rgba(255, 255, 255, 0.12);
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
:host([data-theme="dark"]) .followup-input {
|
|
89
|
+
border-color: rgba(255, 255, 255, 0.1);
|
|
90
|
+
background: rgba(255, 255, 255, 0.08);
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
:host([data-theme="dark"]) .followup-input:focus {
|
|
94
|
+
background: rgba(255, 255, 255, 0.12);
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
:host([data-theme="dark"]) .toggle-switch {
|
|
98
|
+
background: #30363d;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
:host([data-theme="dark"]) .toggle-switch.active {
|
|
102
|
+
background: var(--accent);
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
:host([data-theme="dark"]) .skeleton-icon,
|
|
106
|
+
:host([data-theme="dark"]) .skeleton-line {
|
|
107
|
+
background: linear-gradient(90deg, #21262d 25%, #30363d 50%, #21262d 75%);
|
|
108
|
+
background-size: 200% 100%;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
:host([data-theme="dark"]) .question-option {
|
|
112
|
+
border-color: rgba(255, 255, 255, 0.15);
|
|
113
|
+
background: rgba(255, 255, 255, 0.08);
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
:host([data-theme="dark"]) .question-option:hover {
|
|
117
|
+
background: var(--accent-soft);
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
:host([data-theme="dark"]) .user-request {
|
|
121
|
+
background: rgba(255, 255, 255, 0.03);
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
:host([data-theme="dark"]) .hub-item:hover {
|
|
125
|
+
background: rgba(255, 255, 255, 0.04);
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
:host([data-theme="dark"]) .selected-list,
|
|
129
|
+
:host([data-theme="dark"]) .multi-mode-hint {
|
|
130
|
+
background: rgba(255, 255, 255, 0.03);
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
:host([data-theme="dark"]) .followup-area {
|
|
134
|
+
background: rgba(63, 185, 80, 0.1);
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
:host([data-theme="dark"]) .panel-footer.done {
|
|
138
|
+
background: rgba(63, 185, 80, 0.12);
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
@media (prefers-color-scheme: dark) {
|
|
142
|
+
:host([data-theme="auto"]) .close-btn:hover,
|
|
143
|
+
:host([data-theme="auto"]) .toast-close:hover,
|
|
144
|
+
:host([data-theme="auto"]) .hub-header:hover,
|
|
145
|
+
:host([data-theme="auto"]) .hub-disable:hover,
|
|
146
|
+
:host([data-theme="auto"]) .hub-back-btn:hover,
|
|
147
|
+
:host([data-theme="auto"]) .hub-settings-btn:hover,
|
|
148
|
+
:host([data-theme="auto"]) .followup-done:hover {
|
|
149
|
+
background: rgba(255, 255, 255, 0.08);
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
:host([data-theme="auto"]) .btn-secondary {
|
|
153
|
+
background: rgba(255, 255, 255, 0.08);
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
:host([data-theme="auto"]) .btn-secondary:hover {
|
|
157
|
+
background: rgba(255, 255, 255, 0.12);
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
:host([data-theme="auto"]) .input-field {
|
|
161
|
+
border-color: rgba(255, 255, 255, 0.1);
|
|
162
|
+
background: rgba(255, 255, 255, 0.08);
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
:host([data-theme="auto"]) .input-field:focus {
|
|
166
|
+
background: rgba(255, 255, 255, 0.12);
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
:host([data-theme="auto"]) .followup-input {
|
|
170
|
+
border-color: rgba(255, 255, 255, 0.1);
|
|
171
|
+
background: rgba(255, 255, 255, 0.08);
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
:host([data-theme="auto"]) .followup-input:focus {
|
|
175
|
+
background: rgba(255, 255, 255, 0.12);
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
:host([data-theme="auto"]) .toggle-switch {
|
|
179
|
+
background: #30363d;
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
:host([data-theme="auto"]) .toggle-switch.active {
|
|
183
|
+
background: var(--accent);
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
:host([data-theme="auto"]) .skeleton-icon,
|
|
187
|
+
:host([data-theme="auto"]) .skeleton-line {
|
|
188
|
+
background: linear-gradient(90deg, #21262d 25%, #30363d 50%, #21262d 75%);
|
|
189
|
+
background-size: 200% 100%;
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
:host([data-theme="auto"]) .question-option {
|
|
193
|
+
border-color: rgba(255, 255, 255, 0.15);
|
|
194
|
+
background: rgba(255, 255, 255, 0.08);
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
:host([data-theme="auto"]) .question-option:hover {
|
|
198
|
+
background: var(--accent-soft);
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
:host([data-theme="auto"]) .user-request {
|
|
202
|
+
background: rgba(255, 255, 255, 0.03);
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
:host([data-theme="auto"]) .hub-item:hover {
|
|
206
|
+
background: rgba(255, 255, 255, 0.04);
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
:host([data-theme="auto"]) .selected-list,
|
|
210
|
+
:host([data-theme="auto"]) .multi-mode-hint {
|
|
211
|
+
background: rgba(255, 255, 255, 0.03);
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
:host([data-theme="auto"]) .followup-area {
|
|
215
|
+
background: rgba(63, 185, 80, 0.1);
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
:host([data-theme="auto"]) .panel-footer.done {
|
|
219
|
+
background: rgba(63, 185, 80, 0.12);
|
|
220
|
+
}
|
|
221
|
+
}
|
|
222
|
+
|
|
30
223
|
*, *::before, *::after {
|
|
31
224
|
box-sizing: border-box;
|
|
32
225
|
}
|
|
@@ -164,6 +357,13 @@ var R=new Set([0,1,11,14,15]);function F(s){let t=Object.keys(s).find(e=>e.start
|
|
|
164
357
|
.user-request-text {
|
|
165
358
|
color: var(--text-primary);
|
|
166
359
|
font-weight: 500;
|
|
360
|
+
line-height: 1.4;
|
|
361
|
+
display: -webkit-box;
|
|
362
|
+
-webkit-line-clamp: 3;
|
|
363
|
+
-webkit-box-orient: vertical;
|
|
364
|
+
overflow: hidden;
|
|
365
|
+
white-space: pre-wrap;
|
|
366
|
+
word-wrap: break-word;
|
|
167
367
|
}
|
|
168
368
|
|
|
169
369
|
/* Input Mode */
|
|
@@ -182,6 +382,11 @@ var R=new Set([0,1,11,14,15]);function F(s){let t=Object.keys(s).find(e=>e.start
|
|
|
182
382
|
color: var(--text-primary);
|
|
183
383
|
outline: none;
|
|
184
384
|
transition: all 0.15s;
|
|
385
|
+
min-height: 60px;
|
|
386
|
+
max-height: 150px;
|
|
387
|
+
resize: none;
|
|
388
|
+
line-height: 1.4;
|
|
389
|
+
overflow-y: auto;
|
|
185
390
|
}
|
|
186
391
|
|
|
187
392
|
.input-field::placeholder {
|
|
@@ -871,6 +1076,53 @@ var R=new Set([0,1,11,14,15]);function F(s){let t=Object.keys(s).find(e=>e.start
|
|
|
871
1076
|
margin-top: 2px;
|
|
872
1077
|
}
|
|
873
1078
|
|
|
1079
|
+
.theme-selector {
|
|
1080
|
+
display: flex;
|
|
1081
|
+
background: rgba(0, 0, 0, 0.04);
|
|
1082
|
+
border-radius: 6px;
|
|
1083
|
+
padding: 2px;
|
|
1084
|
+
gap: 2px;
|
|
1085
|
+
}
|
|
1086
|
+
|
|
1087
|
+
:host([data-theme="dark"]) .theme-selector {
|
|
1088
|
+
background: rgba(255, 255, 255, 0.08);
|
|
1089
|
+
}
|
|
1090
|
+
|
|
1091
|
+
@media (prefers-color-scheme: dark) {
|
|
1092
|
+
:host([data-theme="auto"]) .theme-selector {
|
|
1093
|
+
background: rgba(255, 255, 255, 0.08);
|
|
1094
|
+
}
|
|
1095
|
+
}
|
|
1096
|
+
|
|
1097
|
+
.theme-btn {
|
|
1098
|
+
padding: 4px 8px;
|
|
1099
|
+
border: none;
|
|
1100
|
+
background: transparent;
|
|
1101
|
+
border-radius: 4px;
|
|
1102
|
+
font-size: 12px;
|
|
1103
|
+
cursor: pointer;
|
|
1104
|
+
transition: all 0.15s;
|
|
1105
|
+
color: var(--text-muted);
|
|
1106
|
+
display: flex;
|
|
1107
|
+
align-items: center;
|
|
1108
|
+
justify-content: center;
|
|
1109
|
+
}
|
|
1110
|
+
|
|
1111
|
+
.theme-btn:hover {
|
|
1112
|
+
color: var(--text-secondary);
|
|
1113
|
+
}
|
|
1114
|
+
|
|
1115
|
+
.theme-btn.active {
|
|
1116
|
+
background: var(--glass-bg);
|
|
1117
|
+
color: var(--text-primary);
|
|
1118
|
+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
|
1119
|
+
}
|
|
1120
|
+
|
|
1121
|
+
.theme-btn svg {
|
|
1122
|
+
width: 14px;
|
|
1123
|
+
height: 14px;
|
|
1124
|
+
}
|
|
1125
|
+
|
|
874
1126
|
.hub-button-group {
|
|
875
1127
|
display: flex;
|
|
876
1128
|
}
|
|
@@ -968,7 +1220,7 @@ var R=new Set([0,1,11,14,15]);function F(s){let t=Object.keys(s).find(e=>e.start
|
|
|
968
1220
|
.followup-row {
|
|
969
1221
|
display: flex;
|
|
970
1222
|
gap: 8px;
|
|
971
|
-
align-items:
|
|
1223
|
+
align-items: flex-end;
|
|
972
1224
|
}
|
|
973
1225
|
|
|
974
1226
|
.followup-input {
|
|
@@ -982,6 +1234,11 @@ var R=new Set([0,1,11,14,15]);function F(s){let t=Object.keys(s).find(e=>e.start
|
|
|
982
1234
|
color: var(--text-primary);
|
|
983
1235
|
outline: none;
|
|
984
1236
|
transition: all 0.15s;
|
|
1237
|
+
min-height: 36px;
|
|
1238
|
+
max-height: 100px;
|
|
1239
|
+
resize: none;
|
|
1240
|
+
line-height: 1.4;
|
|
1241
|
+
overflow-y: auto;
|
|
985
1242
|
}
|
|
986
1243
|
|
|
987
1244
|
.followup-input::placeholder {
|
|
@@ -1172,14 +1429,14 @@ var R=new Set([0,1,11,14,15]);function F(s){let t=Object.keys(s).find(e=>e.start
|
|
|
1172
1429
|
color: var(--accent);
|
|
1173
1430
|
text-align: center;
|
|
1174
1431
|
}
|
|
1175
|
-
`,
|
|
1432
|
+
`,k=class s extends HTMLElement{constructor(){super();this.highlight=null;this.panel=null;this.toast=null;this.hub=null;this.currentElement=null;this.currentSnapshot=null;this.interactionId=null;this.frozen=!1;this.eventSource=null;this.throttleTimeout=null;this.mode="input";this.activityEvents=[];this.currentStatus="idle";this.hubExpanded=!1;this.hubPage="main";this.inspectorEnabled=!0;this.autoCommitEnabled=!0;this.themePreference="auto";this.history=[];this.isDragging=!1;this.dragOffset={x:0,y:0};this.customPanelPosition=null;this.multiSelectMode=!1;this.selectedElements=[];this.selectedSnapshots=[];this.multiSelectHighlights=[];this.submittedSnapshots=[];this.cursorStyleElement=null;this.scrollTimeout=null;this.phraseIndex=0;this.phraseInterval=null;this.handlePanelDrag=t=>{if(!this.isDragging||!this.panel)return;let e=Math.max(0,Math.min(t.clientX-this.dragOffset.x,window.innerWidth-340)),i=Math.max(0,Math.min(t.clientY-this.dragOffset.y,window.innerHeight-100));this.customPanelPosition={x:e,y:i},this.panel.style.left=`${e}px`,this.panel.style.top=`${i}px`};this.handlePanelDragEnd=()=>{this.isDragging=!1,document.removeEventListener("mousemove",this.handlePanelDrag),document.removeEventListener("mouseup",this.handlePanelDragEnd)};this.shadow=this.attachShadow({mode:"closed"})}static{this.MAX_SELECTION=5}connectedCallback(){let t=document.createElement("style");t.textContent=Q,this.shadow.appendChild(t),this.highlight=document.createElement("div"),this.highlight.className="highlight",this.highlight.style.display="none",this.shadow.appendChild(this.highlight),this.handleMouseMove=this.handleMouseMove.bind(this),this.handleClick=this.handleClick.bind(this),this.handleKeyDown=this.handleKeyDown.bind(this),this.handlePanelDragStart=this.handlePanelDragStart.bind(this),this.handleScroll=this.handleScroll.bind(this),document.addEventListener("mousemove",this.handleMouseMove,!0),document.addEventListener("click",this.handleClick,!0),document.addEventListener("keydown",this.handleKeyDown,!0),window.addEventListener("scroll",this.handleScroll,!0),this.loadEnabledState(),this.loadAutoCommitState(),this.loadThemeState(),this.applyTheme(),this.loadHistory(),this.renderHub(),this.connectSSE(),this.restoreSession(),this.updateCursor()}saveSession(t){if(!this.interactionId)return;let e={interactionId:this.interactionId,userNote:this._userNote||"",componentName:this.currentSnapshot?.framework.componentName||this.currentSnapshot?.tagName||"element",status:this.currentStatus,message:t,timestamp:Date.now()};try{sessionStorage.setItem(x,JSON.stringify(e))}catch{}}restoreSession(){try{let t=sessionStorage.getItem(x);if(!t)return;let e=JSON.parse(t);if(Date.now()-e.timestamp>Z){sessionStorage.removeItem(x);return}(e.status==="success"||e.status==="failed")&&(this.showResultToast(e),sessionStorage.removeItem(x))}catch{}}showResultToast(t){this.toast=document.createElement("div"),this.toast.className="result-toast";let e=t.status==="success",i=e?"\u2713":"\u2715",n=e?"Done!":"Failed";this.toast.innerHTML=`
|
|
1176
1433
|
<div class="toast-icon ${t.status}">${i}</div>
|
|
1177
1434
|
<div class="toast-content">
|
|
1178
1435
|
<div class="toast-title">${n}</div>
|
|
1179
1436
|
<div class="toast-message">${this.escapeHtml(t.message||t.userNote)}</div>
|
|
1180
1437
|
</div>
|
|
1181
1438
|
<button class="toast-close">×</button>
|
|
1182
|
-
`,this.toast.querySelector(".toast-close").addEventListener("click",()=>this.hideToast()),this.shadow.appendChild(this.toast),setTimeout(()=>this.hideToast(),4e3)}hideToast(){this.toast&&(this.toast.remove(),this.toast=null)}loadEnabledState(){try{let t=localStorage.getItem(
|
|
1439
|
+
`,this.toast.querySelector(".toast-close").addEventListener("click",()=>this.hideToast()),this.shadow.appendChild(this.toast),setTimeout(()=>this.hideToast(),4e3)}hideToast(){this.toast&&(this.toast.remove(),this.toast=null)}loadEnabledState(){try{let t=localStorage.getItem($);t!==null&&(this.inspectorEnabled=t==="true")}catch{}}saveEnabledState(){try{localStorage.setItem($,String(this.inspectorEnabled))}catch{}}loadAutoCommitState(){try{let t=localStorage.getItem(L);t!==null&&(this.autoCommitEnabled=t==="true")}catch{}}saveAutoCommitState(){try{localStorage.setItem(L,String(this.autoCommitEnabled))}catch{}}loadThemeState(){try{let t=localStorage.getItem(N);(t==="light"||t==="dark"||t==="auto")&&(this.themePreference=t)}catch{}}saveThemeState(){try{localStorage.setItem(N,this.themePreference)}catch{}}applyTheme(){this.setAttribute("data-theme",this.themePreference)}loadHistory(){try{let t=sessionStorage.getItem(P);t&&(this.history=JSON.parse(t))}catch{this.history=[]}}saveHistory(){try{sessionStorage.setItem(P,JSON.stringify(this.history))}catch{}}addToHistory(t){let e=this.history.findIndex(i=>i.interactionId===t.interactionId);e>=0?this.history[e]=t:(this.history.unshift(t),this.history.length>20&&(this.history=this.history.slice(0,20))),this.saveHistory(),this.renderHub()}updateHistoryStatus(t,e){let i=this.history.find(n=>n.interactionId===t);i&&(i.status=e,this.saveHistory(),this.renderHub())}renderHub(){this.hub||(this.hub=document.createElement("div"),this.hub.className="hub",this.shadow.appendChild(this.hub)),this.hubPage==="settings"?this.renderHubSettingsPage():this.renderHubMainPage()}renderHubMainPage(){if(!this.hub)return;let t=this.hubExpanded?"":"collapsed",e=this.inspectorEnabled?"":"disabled",i=this.hubExpanded?"expanded":"",n=this.history.filter(c=>c.status==="pending"||c.status==="fixing").length;this.hub.className=`hub ${t} ${e}`.trim();let r='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>',o='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/><line x1="1" y1="1" x2="23" y2="23"/></svg>',l='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>',d=`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
|
|
1183
1440
|
<defs>
|
|
1184
1441
|
<linearGradient id="lensGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
1185
1442
|
<stop offset="0%" style="stop-color:#60a5fa;stop-opacity:0.3"/>
|
|
@@ -1205,7 +1462,7 @@ var R=new Set([0,1,11,14,15]);function F(s){let t=Object.keys(s).find(e=>e.start
|
|
|
1205
1462
|
<div class="hub-button-group">
|
|
1206
1463
|
<button class="hub-settings-btn" title="Settings">${l}</button>
|
|
1207
1464
|
<button class="hub-disable ${this.inspectorEnabled?"active":""}" title="${this.inspectorEnabled?"Disable":"Enable"} inspector">
|
|
1208
|
-
${this.inspectorEnabled?o
|
|
1465
|
+
${this.inspectorEnabled?r:o}
|
|
1209
1466
|
</button>
|
|
1210
1467
|
</div>
|
|
1211
1468
|
</div>
|
|
@@ -1244,7 +1501,7 @@ var R=new Set([0,1,11,14,15]);function F(s){let t=Object.keys(s).find(e=>e.start
|
|
|
1244
1501
|
<path d="M 10 50 L 5 45" stroke="#3b82f6" stroke-width="3" stroke-linecap="round"/>
|
|
1245
1502
|
<path d="M 90 50 L 95 45" stroke="#3b82f6" stroke-width="3" stroke-linecap="round"/>
|
|
1246
1503
|
<path d="M 65 45 L 65 60 L 69 56 L 74 63 L 76 61 L 71 54 L 76 54 Z" fill="#3b82f6"/>
|
|
1247
|
-
</svg>`;this.hub.className="hub",this.hub.innerHTML=`
|
|
1504
|
+
</svg>`;this.hub.className="hub";let e='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>',i='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>',n='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>';this.hub.innerHTML=`
|
|
1248
1505
|
<div class="hub-header">
|
|
1249
1506
|
<div class="hub-header-left">
|
|
1250
1507
|
<div class="hub-logo">${t}</div>
|
|
@@ -1258,6 +1515,17 @@ var R=new Set([0,1,11,14,15]);function F(s){let t=Object.keys(s).find(e=>e.start
|
|
|
1258
1515
|
<span class="hub-settings-title">Settings</span>
|
|
1259
1516
|
</div>
|
|
1260
1517
|
<div class="hub-settings-list">
|
|
1518
|
+
<div class="hub-setting-row">
|
|
1519
|
+
<div class="hub-setting-info">
|
|
1520
|
+
<div class="hub-setting-label">Theme</div>
|
|
1521
|
+
<div class="hub-setting-desc">Light, dark, or match system</div>
|
|
1522
|
+
</div>
|
|
1523
|
+
<div class="theme-selector">
|
|
1524
|
+
<button class="theme-btn ${this.themePreference==="light"?"active":""}" data-theme="light" title="Light">${e}</button>
|
|
1525
|
+
<button class="theme-btn ${this.themePreference==="auto"?"active":""}" data-theme="auto" title="Auto">${n}</button>
|
|
1526
|
+
<button class="theme-btn ${this.themePreference==="dark"?"active":""}" data-theme="dark" title="Dark">${i}</button>
|
|
1527
|
+
</div>
|
|
1528
|
+
</div>
|
|
1261
1529
|
<div class="hub-setting-row">
|
|
1262
1530
|
<div class="hub-setting-info">
|
|
1263
1531
|
<div class="hub-setting-label">Auto-commit</div>
|
|
@@ -1268,7 +1536,7 @@ var R=new Set([0,1,11,14,15]);function F(s){let t=Object.keys(s).find(e=>e.start
|
|
|
1268
1536
|
</div>
|
|
1269
1537
|
</div>
|
|
1270
1538
|
</div>
|
|
1271
|
-
`,this.hub.querySelector(".hub-back-btn").addEventListener("click",()=>{this.hubPage="main",this.renderHub()}),this.hub.querySelectorAll(".toggle-switch").forEach(
|
|
1539
|
+
`,this.hub.querySelector(".hub-back-btn").addEventListener("click",()=>{this.hubPage="main",this.renderHub()}),this.hub.querySelectorAll(".theme-btn").forEach(o=>{o.addEventListener("click",l=>{let d=l.currentTarget.dataset.theme;this.themePreference=d,this.saveThemeState(),this.applyTheme(),this.renderHub()})}),this.hub.querySelectorAll(".toggle-switch").forEach(o=>{o.addEventListener("click",l=>{l.currentTarget.dataset.setting==="autoCommit"&&(this.autoCommitEnabled=!this.autoCommitEnabled,this.saveAutoCommitState(),this.renderHub())})})}async requestUndo(t){let e=this.history.findIndex(i=>i.interactionId===t);if(e!==-1){this.history[e].status="pending",this.saveHistory(),this.renderHub();try{(await fetch(`${b}/undo`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({interactionId:t})})).ok?(this.history.splice(e,1),this.saveHistory(),this.renderHub()):(this.history[e].status="failed",this.saveHistory(),this.renderHub())}catch(i){this.history[e]&&(this.history[e].status="failed",this.saveHistory(),this.renderHub()),console.warn("Undo request failed:",i)}}}async requestCommit(t){let e=this.history.findIndex(i=>i.interactionId===t);try{(await fetch(`${b}/commit`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({interactionId:t})})).ok?(e>=0&&(this.history[e].status="success",this.saveHistory(),this.renderHub()),this.unfreeze()):console.warn("Commit request failed")}catch(i){console.warn("Commit request failed:",i)}}disconnectedCallback(){document.removeEventListener("mousemove",this.handleMouseMove,!0),document.removeEventListener("click",this.handleClick,!0),document.removeEventListener("keydown",this.handleKeyDown,!0),window.removeEventListener("scroll",this.handleScroll,!0),this.eventSource?.close(),this.cursorStyleElement&&(this.cursorStyleElement.remove(),this.cursorStyleElement=null)}connectSSE(){this.eventSource=new EventSource(`${b}/events`),this.eventSource.onmessage=t=>{try{let e=JSON.parse(t.data);e.type==="activity"&&this.handleActivityEvent(e.payload)}catch{}},this.eventSource.onerror=()=>{this.eventSource?.close(),setTimeout(()=>this.connectSSE(),3e3)}}handleActivityEvent(t){t.type==="status"&&this.updateHistoryStatus(t.interactionId,t.status),t.interactionId===this.interactionId&&(this.activityEvents.push(t),t.type==="status"&&(this.currentStatus=t.status,this.saveSession(t.message),t.status==="fixing"?this.startPhraseRotation():this.stopPhraseRotation(),t.status==="failed"&&setTimeout(()=>this.unfreeze(),4e3)),this.renderPanel())}handleMouseMove(t){if(!this.multiSelectMode&&this.frozen||!this.inspectorEnabled)return;if(t.composedPath().includes(this)){this.multiSelectMode||this.hideHighlight();return}if(this.throttleTimeout)return;this.throttleTimeout=window.setTimeout(()=>{this.throttleTimeout=null},16),this.style.pointerEvents="none";let i=document.elementFromPoint(t.clientX,t.clientY);if(this.style.pointerEvents="",!i||i===document.documentElement||i===document.body){this.multiSelectMode||this.hideHighlight();return}this.shadow.contains(i)||(this.currentElement=i,this.showHighlight(i))}handleClick(t){if(!(!this.inspectorEnabled||!this.currentElement||t.composedPath().some(i=>i===this))){if(t.preventDefault(),t.stopPropagation(),this.multiSelectMode){this.toggleInSelection(this.currentElement);return}this.frozen||this.freeze()}}handleKeyDown(t){t.key==="Escape"&&this.unfreeze()}handleScroll(){this.frozen&&(this.disableHighlightTransitions(),this.currentElement&&this.highlight&&!this.multiSelectMode&&this.showHighlight(this.currentElement),this.multiSelectMode&&this.selectedElements.length>0&&this.updateMultiSelectHighlightPositions(),this.scrollTimeout&&window.clearTimeout(this.scrollTimeout),this.scrollTimeout=window.setTimeout(()=>{this.enableHighlightTransitions(),this.scrollTimeout=null},150))}disableHighlightTransitions(){this.highlight&&this.highlight.classList.add("no-transition"),this.multiSelectHighlights.forEach(t=>t.classList.add("no-transition"))}enableHighlightTransitions(){this.highlight&&this.highlight.classList.remove("no-transition"),this.multiSelectHighlights.forEach(t=>t.classList.remove("no-transition"))}updateMultiSelectHighlightPositions(){this.selectedElements.forEach((e,i)=>{let n=this.multiSelectHighlights[i];if(!n)return;let r=e.getBoundingClientRect();n.style.left=`${r.left-3}px`,n.style.top=`${r.top-3}px`,n.style.width=`${r.width+3*2}px`,n.style.height=`${r.height+3*2}px`})}handlePanelDragStart(t){if(t.target.closest("button"))return;this.isDragging=!0;let e=this.panel.getBoundingClientRect();this.dragOffset={x:t.clientX-e.left,y:t.clientY-e.top},document.addEventListener("mousemove",this.handlePanelDrag),document.addEventListener("mouseup",this.handlePanelDragEnd)}showHighlight(t){if(!this.highlight)return;let e=t.getBoundingClientRect(),i=3;this.highlight.style.display="block",this.highlight.style.left=`${e.left-i}px`,this.highlight.style.top=`${e.top-i}px`,this.highlight.style.width=`${e.width+i*2}px`,this.highlight.style.height=`${e.height+i*2}px`}hideHighlight(){this.highlight&&(this.highlight.style.display="none"),this.currentElement=null}freeze(){this.currentElement&&(this.frozen=!0,this.currentSnapshot=y(this.currentElement),this.selectedElements=[this.currentElement],this.selectedSnapshots=[this.currentSnapshot],this.mode="input",this.activityEvents=[],this.currentStatus="idle",this.updateCursor(),this.renderPanel())}enterMultiSelectMode(){!this.frozen||this.multiSelectMode||(this.multiSelectMode=!0,this.renderMultiSelectHighlights(),this.updateCursor(),this.renderPanel())}toggleInSelection(t){if(!this.multiSelectMode)return;let e=this.selectedElements.indexOf(t);if(e>=0)this.removeFromSelection(e);else{if(this.selectedElements.length>=s.MAX_SELECTION)return;let i=y(t);this.selectedElements.push(t),this.selectedSnapshots.push(i)}this.renderMultiSelectHighlights(),this.renderPanel()}removeFromSelection(t){if(!(t<0||t>=this.selectedElements.length)){if(this.selectedElements.length===1){this.exitMultiSelectMode();return}this.selectedElements.splice(t,1),this.selectedSnapshots.splice(t,1),this.renderMultiSelectHighlights(),this.renderPanel()}}exitMultiSelectMode(){this.multiSelectMode=!1,this.selectedElements.length>0&&(this.currentElement=this.selectedElements[0],this.currentSnapshot=this.selectedSnapshots[0]),this.selectedElements=this.currentElement?[this.currentElement]:[],this.selectedSnapshots=this.currentSnapshot?[this.currentSnapshot]:[],this.clearMultiSelectHighlights(),this.currentElement&&this.showHighlight(this.currentElement),this.updateCursor(),this.renderPanel()}renderMultiSelectHighlights(){this.clearMultiSelectHighlights();let t=3;this.selectedElements.forEach((e,i)=>{let n=e.getBoundingClientRect(),r=document.createElement("div");r.className="highlight multi",r.style.display="block",r.style.left=`${n.left-t}px`,r.style.top=`${n.top-t}px`,r.style.width=`${n.width+t*2}px`,r.style.height=`${n.height+t*2}px`;let o=document.createElement("div");o.className="highlight-badge",o.textContent=String(i+1),r.appendChild(o),this.shadow.appendChild(r),this.multiSelectHighlights.push(r)}),this.highlight&&(this.highlight.style.display="none")}clearMultiSelectHighlights(){this.multiSelectHighlights.forEach(t=>t.remove()),this.multiSelectHighlights=[]}unfreeze(){this.frozen=!1,this.currentSnapshot=null,this.interactionId=null,this.mode="input",this.activityEvents=[],this.customPanelPosition=null,this.multiSelectMode=!1,this.selectedElements=[],this.selectedSnapshots=[],this.submittedSnapshots=[],this.clearMultiSelectHighlights(),this.stopPhraseRotation(),this.hidePanel(),this.hideHighlight(),this.updateCursor();try{sessionStorage.removeItem(x)}catch{}}renderPanel(){if(!this.currentSnapshot||!this.currentElement)return;let t=this.currentElement.getBoundingClientRect(),{framework:e}=this.currentSnapshot;if(this.panel||(this.panel=document.createElement("div"),this.panel.className="glass-panel",this.shadow.appendChild(this.panel)),this.customPanelPosition)this.panel.style.left=`${this.customPanelPosition.x}px`,this.panel.style.top=`${this.customPanelPosition.y}px`;else{let r=window.innerHeight-t.bottom,o=this.mode==="activity"?400:200,l=t.bottom+12;r<o&&t.top>o&&(l=t.top-o-12);let d=t.left;d+340>window.innerWidth-20&&(d=window.innerWidth-360),d<20&&(d=20),this.panel.style.left=`${d}px`,this.panel.style.top=`${l}px`}let i=e.componentName||this.currentSnapshot.tagName,n=e.filePath?e.filePath.split("/").slice(-2).join("/"):null;this.mode==="input"?this.renderInputMode(i,n):this.renderActivityMode(i,n)}renderInputMode(t,e){if(!this.panel)return;let i=this.multiSelectMode,n=i?"multi-select-icon active":"multi-select-icon",r=i?`
|
|
1272
1540
|
<div class="selected-list">
|
|
1273
1541
|
<div class="selected-list-header">
|
|
1274
1542
|
<span class="selected-count">${this.selectedElements.length} element${this.selectedElements.length!==1?"s":""} selected</span>
|
|
@@ -1283,7 +1551,7 @@ var R=new Set([0,1,11,14,15]);function F(s){let t=Object.keys(s).find(e=>e.start
|
|
|
1283
1551
|
`}).join("")}
|
|
1284
1552
|
</div>
|
|
1285
1553
|
</div>
|
|
1286
|
-
`:"",
|
|
1554
|
+
`:"",o=i?`
|
|
1287
1555
|
<div class="multi-mode-hint">Click elements to add/remove from selection (max ${s.MAX_SELECTION})</div>
|
|
1288
1556
|
`:"";this.panel.innerHTML=`
|
|
1289
1557
|
<div class="panel-header">
|
|
@@ -1292,21 +1560,21 @@ var R=new Set([0,1,11,14,15]);function F(s){let t=Object.keys(s).find(e=>e.start
|
|
|
1292
1560
|
<button class="${n}" title="${i?"Exit multi-select":"Select multiple elements"}">+</button>
|
|
1293
1561
|
<button class="close-btn" title="Cancel (Esc)">×</button>
|
|
1294
1562
|
</div>
|
|
1295
|
-
${a}
|
|
1296
1563
|
${o}
|
|
1564
|
+
${r}
|
|
1297
1565
|
<div class="input-area">
|
|
1298
|
-
<
|
|
1299
|
-
type="text"
|
|
1566
|
+
<textarea
|
|
1300
1567
|
class="input-field"
|
|
1301
1568
|
placeholder="${i?"Describe what to change for these elements...":"What do you want to change?"}"
|
|
1302
1569
|
autofocus
|
|
1303
|
-
|
|
1570
|
+
rows="2"
|
|
1571
|
+
></textarea>
|
|
1304
1572
|
<div class="btn-row">
|
|
1305
1573
|
<button class="btn btn-secondary">Cancel</button>
|
|
1306
1574
|
<button class="btn btn-primary">Send</button>
|
|
1307
1575
|
</div>
|
|
1308
1576
|
</div>
|
|
1309
|
-
`;let l=this.panel.querySelector(".input-field"),d=this.panel.querySelector(".close-btn"),u=this.panel.querySelector(".btn-secondary"),f=this.panel.querySelector(".btn-primary"),g=this.panel.querySelector(".multi-select-icon");d.addEventListener("click",()=>this.unfreeze()),u.addEventListener("click",()=>this.unfreeze()),f.addEventListener("click",()=>this.submit(l.value)),l.addEventListener("keydown",h=>{h.key==="Enter"&&l.value.trim()&&this.submit(l.value)}),g.addEventListener("click",()=>{this.multiSelectMode?this.exitMultiSelectMode():this.enterMultiSelectMode()}),this.panel.querySelectorAll(".selected-chip-remove").forEach(h=>{h.addEventListener("click",p=>{p.stopPropagation();let m=parseInt(p.currentTarget.dataset.index,10);this.removeFromSelection(m)})}),this.panel.querySelector(".panel-header").addEventListener("mousedown",this.handlePanelDragStart),requestAnimationFrame(()=>l.focus())}renderActivityMode(t,e){if(!this.panel)return;let i=this.activityEvents.length>0&&this.panel.querySelector(".user-request-text")?.textContent||"",n=this.currentStatus==="success"||this.currentStatus==="failed",
|
|
1577
|
+
`;let l=this.panel.querySelector(".input-field"),d=this.panel.querySelector(".close-btn"),u=this.panel.querySelector(".btn-secondary"),f=this.panel.querySelector(".btn-primary"),g=this.panel.querySelector(".multi-select-icon");d.addEventListener("click",()=>this.unfreeze()),u.addEventListener("click",()=>this.unfreeze()),f.addEventListener("click",()=>this.submit(l.value)),l.addEventListener("keydown",h=>{h.key==="Enter"&&!h.shiftKey&&l.value.trim()&&(h.preventDefault(),this.submit(l.value))}),g.addEventListener("click",()=>{this.multiSelectMode?this.exitMultiSelectMode():this.enterMultiSelectMode()}),this.panel.querySelectorAll(".selected-chip-remove").forEach(h=>{h.addEventListener("click",p=>{p.stopPropagation();let m=parseInt(p.currentTarget.dataset.index,10);this.removeFromSelection(m)})}),this.panel.querySelector(".panel-header").addEventListener("mousedown",this.handlePanelDragStart),requestAnimationFrame(()=>l.focus())}renderActivityMode(t,e){if(!this.panel)return;let i=this.activityEvents.length>0&&this.panel.querySelector(".user-request-text")?.textContent||"",n=this.currentStatus==="success"||this.currentStatus==="failed",r=this.currentStatus==="success"&&!this.autoCommitEnabled,o=this.currentStatus==="success",l=this.submittedSnapshots.length,d=l>1?`${l} elements`:`<${this.escapeHtml(t)} />`;this.panel.innerHTML=`
|
|
1310
1578
|
<div class="panel-header">
|
|
1311
1579
|
<span class="component-tag">${d}</span>
|
|
1312
1580
|
${l<=1&&e?`<span class="file-path">${this.escapeHtml(e)}</span>`:""}
|
|
@@ -1322,23 +1590,23 @@ var R=new Set([0,1,11,14,15]);function F(s){let t=Object.keys(s).find(e=>e.start
|
|
|
1322
1590
|
<div class="panel-footer ${n?"done":""}">
|
|
1323
1591
|
<div class="status-indicator ${this.currentStatus}"></div>
|
|
1324
1592
|
<span class="status-text">${this.getStatusText()}</span>
|
|
1325
|
-
${
|
|
1593
|
+
${r?`
|
|
1326
1594
|
<div class="success-actions">
|
|
1327
1595
|
<button class="action-btn action-btn-undo" title="Discard changes">Undo</button>
|
|
1328
1596
|
<button class="action-btn action-btn-commit" title="Commit changes">Commit</button>
|
|
1329
1597
|
</div>
|
|
1330
1598
|
`:""}
|
|
1331
1599
|
</div>
|
|
1332
|
-
${
|
|
1600
|
+
${o?`
|
|
1333
1601
|
<div class="followup-area">
|
|
1334
1602
|
<div class="followup-row">
|
|
1335
|
-
<
|
|
1603
|
+
<textarea class="followup-input" placeholder="Anything else?" rows="1"></textarea>
|
|
1336
1604
|
<button class="followup-send">Send</button>
|
|
1337
1605
|
<button class="followup-done">\u2715</button>
|
|
1338
1606
|
</div>
|
|
1339
1607
|
</div>
|
|
1340
1608
|
`:""}
|
|
1341
|
-
`,this.panel.querySelector(".close-btn").addEventListener("click",()=>this.unfreeze()),this.panel.querySelector(".panel-header").addEventListener("mousedown",this.handlePanelDragStart),this.panel.querySelectorAll(".question-option").forEach(
|
|
1609
|
+
`,this.panel.querySelector(".close-btn").addEventListener("click",()=>this.unfreeze()),this.panel.querySelector(".panel-header").addEventListener("mousedown",this.handlePanelDragStart),this.panel.querySelectorAll(".question-option").forEach(v=>{v.addEventListener("click",A=>{let E=A.target,q=E.dataset.questionId,D=E.dataset.answerId,B=E.textContent;this.submitAnswer(q,D,B)})});let g=this.panel.querySelector(".action-btn-commit"),c=this.panel.querySelector(".action-btn-undo");g&&this.interactionId&&g.addEventListener("click",()=>this.requestCommit(this.interactionId)),c&&this.interactionId&&c.addEventListener("click",()=>this.requestUndo(this.interactionId));let h=this.panel.querySelector(".followup-input"),p=this.panel.querySelector(".followup-send"),m=this.panel.querySelector(".followup-done");h&&p&&(p.addEventListener("click",()=>{h.value.trim()&&this.submitFollowUp(h.value)}),h.addEventListener("keydown",v=>{v.key==="Enter"&&!v.shiftKey&&h.value.trim()&&(v.preventDefault(),this.submitFollowUp(h.value))}),requestAnimationFrame(()=>h.focus())),m&&m.addEventListener("click",()=>this.unfreeze());let S=this.panel.querySelector(".activity-feed");S&&(S.scrollTop=S.scrollHeight)}renderActivityFeed(){let t=this.activityEvents.map(e=>{switch(e.type){case"status":return e.status==="pending"||e.status==="fixing"&&(!e.message||e.message==="Agent is working...")?"":this.renderStatusItem(e);case"thought":return this.renderThoughtItem(e);case"action":return this.renderActionItem(e);case"question":return this.renderQuestionItem(e);default:return""}}).filter(Boolean);return t.length===0&&(this.currentStatus==="pending"||this.currentStatus==="fixing")?`
|
|
1342
1610
|
<div class="skeleton-item">
|
|
1343
1611
|
<div class="skeleton-icon"></div>
|
|
1344
1612
|
<div class="skeleton-line"></div>
|
|
@@ -1385,8 +1653,8 @@ var R=new Set([0,1,11,14,15]);function F(s){let t=Object.keys(s).find(e=>e.start
|
|
|
1385
1653
|
`).join("")}
|
|
1386
1654
|
</div>
|
|
1387
1655
|
</div>
|
|
1388
|
-
`}getUserNote(){let t=this.activityEvents.find(e=>e.type==="status");return this._userNote||""}getStatusText(){switch(this.currentStatus){case"idle":return"Ready";case"pending":return"Waiting for agent...";case"fixing":return
|
|
1656
|
+
`}getUserNote(){let t=this.activityEvents.find(e=>e.type==="status");return this._userNote||""}getStatusText(){switch(this.currentStatus){case"idle":return"Ready";case"pending":return"Waiting for agent...";case"fixing":return w[this.phraseIndex%w.length];case"success":return"Done!";case"failed":return"Failed";default:return this.currentStatus}}startPhraseRotation(){this.phraseInterval||(this.phraseIndex=Math.floor(Math.random()*w.length),this.phraseInterval=window.setInterval(()=>{this.phraseIndex=(this.phraseIndex+1)%w.length,this.updateFooterText()},1e4))}stopPhraseRotation(){this.phraseInterval&&(window.clearInterval(this.phraseInterval),this.phraseInterval=null)}updateFooterText(){if(!this.panel)return;let t=this.panel.querySelector(".status-text");t&&(t.textContent=this.getStatusText())}hidePanel(){this.panel&&(this.panel.remove(),this.panel=null)}async submit(t){if(!t.trim()||this.selectedSnapshots.length===0&&!this.currentSnapshot)return;this.interactionId=`eyeglass-${Date.now()}-${Math.random().toString(36).slice(2,9)}`,this._userNote=t.trim();let e=this.selectedSnapshots.length>0?this.selectedSnapshots:this.currentSnapshot?[this.currentSnapshot]:[];this.submittedSnapshots=[...e];let i={interactionId:this.interactionId,userNote:t.trim(),autoCommit:this.autoCommitEnabled,...e.length===1?{snapshot:e[0]}:{snapshots:e}},n=e.map(u=>u.framework.componentName||u.tagName),r=e.length===1?n[0]:`${n.length} elements`;this.addToHistory({interactionId:this.interactionId,userNote:t.trim(),componentName:r,filePath:e[0]?.framework.filePath,status:"pending",timestamp:Date.now()});let o=this.multiSelectMode,l=[...this.selectedElements],d=[...this.selectedSnapshots];this.clearMultiSelectHighlights(),this.multiSelectMode=!1,this.mode="activity",this.activityEvents=[],this.currentStatus="pending",this.renderPanel();try{let u=await fetch(`${b}/focus`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(i)});if(!u.ok)throw new Error(`HTTP ${u.status}`)}catch{this.currentStatus="failed",this.updateHistoryStatus(this.interactionId,"failed"),this.activityEvents.push({type:"status",interactionId:this.interactionId,status:"failed",message:"Failed to connect to bridge",timestamp:Date.now()}),o&&l.length>1&&(this.multiSelectMode=!0,this.selectedElements=l,this.selectedSnapshots=d,this.mode="input",this.renderMultiSelectHighlights()),this.renderPanel()}}async submitFollowUp(t){if(!t.trim()||this.submittedSnapshots.length===0)return;this.interactionId=`eyeglass-${Date.now()}-${Math.random().toString(36).slice(2,9)}`,this._userNote=t.trim();let e=this.submittedSnapshots,i={interactionId:this.interactionId,userNote:t.trim(),autoCommit:this.autoCommitEnabled,...e.length===1?{snapshot:e[0]}:{snapshots:e}},n=e.map(o=>o.framework.componentName||o.tagName),r=e.length===1?n[0]:`${n.length} elements`;this.addToHistory({interactionId:this.interactionId,userNote:t.trim(),componentName:r,filePath:e[0]?.framework.filePath,status:"pending",timestamp:Date.now()}),this.activityEvents=[],this.currentStatus="pending",this.renderPanel();try{let o=await fetch(`${b}/focus`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(i)});if(!o.ok)throw new Error(`HTTP ${o.status}`)}catch{this.currentStatus="failed",this.updateHistoryStatus(this.interactionId,"failed"),this.activityEvents.push({type:"status",interactionId:this.interactionId,status:"failed",message:"Failed to connect to bridge",timestamp:Date.now()}),this.renderPanel()}}async submitAnswer(t,e,i){if(!this.interactionId)return;let n={interactionId:this.interactionId,questionId:t,answerId:e,answerLabel:i};try{await fetch(`${b}/answer`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(n)})}catch{}}escapeHtml(t){let e=document.createElement("div");return e.textContent=t,e.innerHTML}updateCursor(){this.inspectorEnabled&&(!this.frozen||this.multiSelectMode)?(this.cursorStyleElement||(this.cursorStyleElement=document.createElement("style"),this.cursorStyleElement.id="eyeglass-cursor-style",document.head.appendChild(this.cursorStyleElement)),this.cursorStyleElement.textContent=`
|
|
1389
1657
|
html, body, body * {
|
|
1390
|
-
cursor: ${
|
|
1658
|
+
cursor: ${X} !important;
|
|
1391
1659
|
}
|
|
1392
|
-
`):this.cursorStyleElement&&(this.cursorStyleElement.textContent="")}};customElements.get("eyeglass-inspector")||customElements.define("eyeglass-inspector",
|
|
1660
|
+
`):this.cursorStyleElement&&(this.cursorStyleElement.textContent="")}};customElements.get("eyeglass-inspector")||customElements.define("eyeglass-inspector",k);function z(){if(document.querySelector("eyeglass-inspector")){console.warn("[eyeglass] Inspector already initialized");return}let s=document.createElement("eyeglass-inspector");document.body.appendChild(s),console.log("[eyeglass] Inspector initialized. Hover over elements and click to annotate.")}typeof window<"u"&&typeof document<"u"&&(document.readyState==="loading"?document.addEventListener("DOMContentLoaded",z):z());export{k as EyeglassInspector,y as captureSnapshot,I as extractFrameworkInfo,z as initInspector};
|
package/dist/inspector.d.ts
CHANGED
|
@@ -20,6 +20,7 @@ export declare class EyeglassInspector extends HTMLElement {
|
|
|
20
20
|
private hubPage;
|
|
21
21
|
private inspectorEnabled;
|
|
22
22
|
private autoCommitEnabled;
|
|
23
|
+
private themePreference;
|
|
23
24
|
private history;
|
|
24
25
|
private isDragging;
|
|
25
26
|
private dragOffset;
|
|
@@ -44,6 +45,9 @@ export declare class EyeglassInspector extends HTMLElement {
|
|
|
44
45
|
private saveEnabledState;
|
|
45
46
|
private loadAutoCommitState;
|
|
46
47
|
private saveAutoCommitState;
|
|
48
|
+
private loadThemeState;
|
|
49
|
+
private saveThemeState;
|
|
50
|
+
private applyTheme;
|
|
47
51
|
private loadHistory;
|
|
48
52
|
private saveHistory;
|
|
49
53
|
private addToHistory;
|