@eyeglass/inspector 0.1.7 → 0.1.9

package/dist/index.js

@@ -1,4 +1,4 @@
-var Tt=new Set([0,1,11,14,15]);function Pt(t){let e=Object.keys(t).find(i=>i.startsWith("__reactFiber$")||i.startsWith("__reactInternalInstance$"));return e?t[e]:null}function O(t){if(!Tt.has(t.tag)||typeof t.type!="function")return!1;let n=t.type.displayName||t.type.name||"";return!(!n||n.startsWith("Context")||n.endsWith("Provider")||n==="StrictMode")}function B(t){return t.type.displayName||t.type.name||void 0}function Dt(t){let n=t;for(;n;){if(O(n))return n;n=n.return}return null}function _(t){let n=[],e=t;for(;e;){if(O(e)){let i=B(e);i&&n.push(i)}e=e.return}return n}function j(t){if(!t)return;let n={};for(let[e,i]of Object.entries(t)){if(e==="children")continue;let s=typeof i;(s==="string"||s==="number"||s==="boolean"||i===null)&&(n[e]=i)}return Object.keys(n).length>0?n:void 0}function Lt(t){let n=t.__vue__;if(n)return{name:"vue",componentName:n.$options?.name||n.$options?._componentTag};let i=Object.keys(t).find(s=>s.startsWith("__vue"));if(i){let s=t[i];if(s){let o=s,r,a;o?.type?.name?r=o.type.name:o?.type?.__name?r=o.type.__name:o?.component?.type?.name?r=o.component.type.name:o?.component?.type?.__name&&(r=o.component.type.__name);let l=o?.props||o?.component?.props;l&&(a=j(l));let u;return o?.type?.__file?u=o.type.__file:o?.component?.type?.__file&&(u=o.component.type.__file),{name:"vue",componentName:r,filePath:u,props:a}}return{name:"vue"}}return null}function Nt(t){let e=Object.keys(t).find(i=>i.startsWith("__svelte"));if(e){let i=t[e],s;if(i?.constructor?.name&&i.constructor.name!=="Object"&&(s=i.constructor.name),!s&&i?.$$?.ctx){let o=i.$$.ctx;o?.constructor?.name&&o.constructor.name!=="Object"&&(s=o.constructor.name)}return{name:"svelte",componentName:s}}return null}function T(t){let n=Pt(t);if(n){let s=Dt(n);if(s){let r=B(s),a=s._debugSource,l=_(s);return{name:"react",componentName:r,filePath:a?.fileName,lineNumber:a?.lineNumber,props:j(s.memoizedProps),ancestry:l.length>0?l:void 0}}let o=_(n);return{name:"react",ancestry:o.length>0?o:void 0}}let e=Lt(t);if(e)return e;let i=Nt(t);return i||{name:"vanilla"}}function $t(t){let n=t.getAttribute("aria-label"),e=t.getAttribute("aria-describedby"),i=t.getAttribute("aria-disabled"),s=t.getAttribute("aria-expanded"),o=t.getAttribute("aria-checked"),r=t.getAttribute("aria-hidden"),a=null;e&&(a=document.getElementById(e)?.textContent?.trim()||null);let l=i==="true"||t.disabled||t.hasAttribute("disabled");return{label:n||t.getAttribute("title")||null,description:a,disabled:l,expanded:s?s==="true":void 0,checked:o==="true"?!0:o==="false"?!1:o==="mixed"?"mixed":void 0,hidden:r==="true"||t.hidden||!1}}function At(t){let n=t.getBoundingClientRect();return{x:Math.round(n.x),y:Math.round(n.y),width:Math.round(n.width),height:Math.round(n.height),visible:n.width>0&&n.height>0}}function zt(t){let n=getComputedStyle(t);return{display:n.display,position:n.position,flexDirection:n.flexDirection!=="row"?n.flexDirection:void 0,gridTemplate:n.display==="grid"?`${n.gridTemplateColumns} / ${n.gridTemplateRows}`:void 0,padding:n.padding,margin:n.margin,color:n.color,backgroundColor:n.backgroundColor,fontFamily:n.fontFamily,zIndex:n.zIndex}}function Rt(t){let n=t.getAttribute("role");if(n)return n;let e=t.tagName.toLowerCase();return{a:"link",button:"button",input:t.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"}[e]||"generic"}function qt(t){let n=t.getAttribute("aria-label");if(n)return n;let e=t.getAttribute("aria-labelledby");if(e){let s=document.getElementById(e);if(s)return s.textContent?.trim()||""}if(t.tagName==="INPUT"||t.tagName==="SELECT"||t.tagName==="TEXTAREA"){let s=t.getAttribute("id");if(s){let o=document.querySelector(`label[for="${s}"]`);if(o)return o.textContent?.trim()||""}}if(t.tagName==="IMG")return t.alt||"";let i=t.textContent?.trim()||"";return i.length>50?i.slice(0,50)+"...":i}function Ft(t){let n={},e=t.getAttribute("id");e&&(n.id=e);let i=t.getAttribute("class");i?.trim()&&(n.className=i.trim());let s={};for(let o=0;o<t.attributes.length;o++){let r=t.attributes[o];r.name.startsWith("data-")&&(s[r.name]=r.value)}return Object.keys(s).length>0&&(n.dataAttributes=s),n}function _t(t){let n=getComputedStyle(t),e={display:n.display,position:n.position};return n.display.includes("flex")&&(n.flexDirection!=="row"&&(e.flexDirection=n.flexDirection),n.alignItems!=="normal"&&(e.alignItems=n.alignItems),n.justifyContent!=="normal"&&(e.justifyContent=n.justifyContent),n.gap!=="normal"&&n.gap!=="0px"&&(e.gap=n.gap)),n.display.includes("grid")&&(e.gridTemplate=`${n.gridTemplateColumns} / ${n.gridTemplateRows}`),e}function Ot(t){let n=[],e=[],i=t.parentElement,s=0;for(;i&&s<2&&i!==document.body&&i!==document.documentElement;){let r=i.getAttribute("class")?.trim();n.push({tagName:i.tagName.toLowerCase(),...r&&{className:r},styles:_t(i)}),i=i.parentElement,s++}let o=new Map;for(let r of Array.from(t.children)){let a=r.tagName.toLowerCase(),l=r.getAttribute("class")?.trim(),u=`${a}:${l||""}`;o.has(u)?o.get(u).count++:o.set(u,{className:l||void 0,count:1})}for(let[r,a]of o){let l=r.split(":")[0];e.push({tagName:l,...a.className&&{className:a.className},...a.count>1&&{count:a.count}})}return{parents:n,children:e}}function S(t){let n=Ft(t);return{role:Rt(t),name:qt(t),tagName:t.tagName.toLowerCase(),...n,framework:T(t),a11y:$t(t),geometry:At(t),styles:zt(t),neighborhood:Ot(t),timestamp:Date.now(),url:window.location.href}}var f="http://localhost:3300",E="eyeglass_session",P="eyeglass_history",D="eyeglass_enabled",L="eyeglass_autocommit",N="eyeglass_theme";var v=["Ruminating...","Percolating...","Divining...","Grokking...","Communing...","Concocting...","Synthesizing...","Distilling...","Incubating...","Forging...","Scrutinizing...","Triangulating...","Unraveling...","Traversing...","Sifting...","Marshaling...","Hydrating...","Harmonizing...","Indexing...","Entangling..."],U='url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiM2MzY2ZjEiIHN0cm9rZS13aWR0aD0iMi41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0xIDEyczQtOCAxMS04IDExIDggMTEgOC00IDgtMTEgOC0xMS04LTExLTh6Ii8+PGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iMyIgZmlsbD0iIzYzNjZmMSIvPjwvc3ZnPg==") 8 8, crosshair';var K=`
+var Tt=new Set([0,1,11,14,15]);function Pt(t){let e=Object.keys(t).find(i=>i.startsWith("__reactFiber$")||i.startsWith("__reactInternalInstance$"));return e?t[e]:null}function B(t){if(!Tt.has(t.tag)||typeof t.type!="function")return!1;let n=t.type.displayName||t.type.name||"";return!(!n||n.startsWith("Context")||n.endsWith("Provider")||n==="StrictMode")}function j(t){return t.type.displayName||t.type.name||void 0}function Dt(t){let n=t;for(;n;){if(B(n))return n;n=n.return}return null}function O(t){let n=[],e=t;for(;e;){if(B(e)){let i=j(e);i&&n.push(i)}e=e.return}return n}function U(t){if(!t)return;let n={};for(let[e,i]of Object.entries(t)){if(e==="children")continue;let s=typeof i;(s==="string"||s==="number"||s==="boolean"||i===null)&&(n[e]=i)}return Object.keys(n).length>0?n:void 0}function Lt(t){let n=t.__vue__;if(n)return{name:"vue",componentName:n.$options?.name||n.$options?._componentTag};let i=Object.keys(t).find(s=>s.startsWith("__vue"));if(i){let s=t[i];if(s){let o=s,r,a;o?.type?.name?r=o.type.name:o?.type?.__name?r=o.type.__name:o?.component?.type?.name?r=o.component.type.name:o?.component?.type?.__name&&(r=o.component.type.__name);let l=o?.props||o?.component?.props;l&&(a=U(l));let u;return o?.type?.__file?u=o.type.__file:o?.component?.type?.__file&&(u=o.component.type.__file),{name:"vue",componentName:r,filePath:u,props:a}}return{name:"vue"}}return null}function Nt(t){let e=Object.keys(t).find(i=>i.startsWith("__svelte"));if(e){let i=t[e],s;if(i?.constructor?.name&&i.constructor.name!=="Object"&&(s=i.constructor.name),!s&&i?.$$?.ctx){let o=i.$$.ctx;o?.constructor?.name&&o.constructor.name!=="Object"&&(s=o.constructor.name)}return{name:"svelte",componentName:s}}return null}function T(t){let n=Pt(t);if(n){let s=Dt(n);if(s){let r=j(s),a=s._debugSource,l=O(s);return{name:"react",componentName:r,filePath:a?.fileName,lineNumber:a?.lineNumber,props:U(s.memoizedProps),ancestry:l.length>0?l:void 0}}let o=O(n);return{name:"react",ancestry:o.length>0?o:void 0}}let e=Lt(t);if(e)return e;let i=Nt(t);return i||{name:"vanilla"}}function $t(t){let n=t.getAttribute("aria-label"),e=t.getAttribute("aria-describedby"),i=t.getAttribute("aria-disabled"),s=t.getAttribute("aria-expanded"),o=t.getAttribute("aria-checked"),r=t.getAttribute("aria-hidden"),a=null;e&&(a=document.getElementById(e)?.textContent?.trim()||null);let l=i==="true"||t.disabled||t.hasAttribute("disabled");return{label:n||t.getAttribute("title")||null,description:a,disabled:l,expanded:s?s==="true":void 0,checked:o==="true"?!0:o==="false"?!1:o==="mixed"?"mixed":void 0,hidden:r==="true"||t.hidden||!1}}function At(t){let n=t.getBoundingClientRect();return{x:Math.round(n.x),y:Math.round(n.y),width:Math.round(n.width),height:Math.round(n.height),visible:n.width>0&&n.height>0}}function zt(t){let n=getComputedStyle(t);return{display:n.display,position:n.position,flexDirection:n.flexDirection!=="row"?n.flexDirection:void 0,gridTemplate:n.display==="grid"?`${n.gridTemplateColumns} / ${n.gridTemplateRows}`:void 0,padding:n.padding,margin:n.margin,color:n.color,backgroundColor:n.backgroundColor,fontFamily:n.fontFamily,zIndex:n.zIndex}}function Rt(t){let n=t.getAttribute("role");if(n)return n;let e=t.tagName.toLowerCase();return{a:"link",button:"button",input:t.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"}[e]||"generic"}function qt(t){let n=t.getAttribute("aria-label");if(n)return n;let e=t.getAttribute("aria-labelledby");if(e){let s=document.getElementById(e);if(s)return s.textContent?.trim()||""}if(t.tagName==="INPUT"||t.tagName==="SELECT"||t.tagName==="TEXTAREA"){let s=t.getAttribute("id");if(s){let o=document.querySelector(`label[for="${s}"]`);if(o)return o.textContent?.trim()||""}}if(t.tagName==="IMG")return t.alt||"";let i=t.textContent?.trim()||"";return i.length>50?i.slice(0,50)+"...":i}function Ft(t){let n={},e=t.getAttribute("id");e&&(n.id=e);let i=t.getAttribute("class");i?.trim()&&(n.className=i.trim());let s={};for(let o=0;o<t.attributes.length;o++){let r=t.attributes[o];r.name.startsWith("data-")&&(s[r.name]=r.value)}return Object.keys(s).length>0&&(n.dataAttributes=s),n}function _t(t){let n=getComputedStyle(t),e={display:n.display,position:n.position};return n.display.includes("flex")&&(n.flexDirection!=="row"&&(e.flexDirection=n.flexDirection),n.alignItems!=="normal"&&(e.alignItems=n.alignItems),n.justifyContent!=="normal"&&(e.justifyContent=n.justifyContent),n.gap!=="normal"&&n.gap!=="0px"&&(e.gap=n.gap)),n.display.includes("grid")&&(e.gridTemplate=`${n.gridTemplateColumns} / ${n.gridTemplateRows}`),e}function Ot(t){let n=[],e=[],i=t.parentElement,s=0;for(;i&&s<2&&i!==document.body&&i!==document.documentElement;){let r=i.getAttribute("class")?.trim();n.push({tagName:i.tagName.toLowerCase(),...r&&{className:r},styles:_t(i)}),i=i.parentElement,s++}let o=new Map;for(let r of Array.from(t.children)){let a=r.tagName.toLowerCase(),l=r.getAttribute("class")?.trim(),u=`${a}:${l||""}`;o.has(u)?o.get(u).count++:o.set(u,{className:l||void 0,count:1})}for(let[r,a]of o){let l=r.split(":")[0];e.push({tagName:l,...a.className&&{className:a.className},...a.count>1&&{count:a.count}})}return{parents:n,children:e}}function S(t){let n=Ft(t);return{role:Rt(t),name:qt(t),tagName:t.tagName.toLowerCase(),...n,framework:T(t),a11y:$t(t),geometry:At(t),styles:zt(t),neighborhood:Ot(t),timestamp:Date.now(),url:window.location.href}}var f="http://localhost:3300",E="eyeglass_session",P="eyeglass_history",D="eyeglass_enabled",L="eyeglass_autocommit",N="eyeglass_theme";var v=["Ruminating...","Percolating...","Divining...","Grokking...","Communing...","Concocting...","Synthesizing...","Distilling...","Incubating...","Forging...","Scrutinizing...","Triangulating...","Unraveling...","Traversing...","Sifting...","Marshaling...","Hydrating...","Harmonizing...","Indexing...","Entangling..."],K='url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiM2MzY2ZjEiIHN0cm9rZS13aWR0aD0iMi41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0xIDEyczQtOCAxMS04IDExIDggMTEgOC00IDgtMTEgOC0xMS04LTExLTh6Ii8+PGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iMyIgZmlsbD0iIzYzNjZmMSIvPjwvc3ZnPg==") 8 8, crosshair';var Y=`
 :host {
   all: initial;
   position: fixed;
@@ -489,7 +489,7 @@ var Tt=new Set([0,1,11,14,15]);function Pt(t){let e=Object.keys(t).find(i=>i.sta
 .activity-icon.status { background: var(--accent-soft); color: var(--accent); }
 .activity-icon.thought { background: rgba(139, 92, 246, 0.1); color: #8b5cf6; }
 .activity-icon.action { background: rgba(14, 165, 233, 0.1); color: #0ea5e9; }
-.activity-icon.question { background: rgba(245, 158, 11, 0.1); color: #f59e0b; }
+.activity-icon.question { background: var(--accent-soft); color: var(--accent); }
 .activity-icon.success { background: rgba(16, 185, 129, 0.1); color: var(--success); }
 .activity-icon.error { background: rgba(239, 68, 68, 0.1); color: var(--error); }
 
@@ -516,8 +516,8 @@ var Tt=new Set([0,1,11,14,15]);function Pt(t){let e=Object.keys(t).find(i=>i.sta
 
 /* Question UI */
 .question-box {
-  background: rgba(245, 158, 11, 0.06);
-  border: 1px solid rgba(245, 158, 11, 0.15);
+  background: rgba(99, 102, 241, 0.06);
+  border: 1px solid rgba(99, 102, 241, 0.15);
   border-radius: var(--border-radius-sm);
   padding: 12px;
   margin: 8px 16px;
@@ -749,7 +749,7 @@ var Tt=new Set([0,1,11,14,15]);function Pt(t){let e=Object.keys(t).find(i=>i.sta
   border-radius: 10px;
   box-shadow: var(--glass-shadow);
   pointer-events: auto;
-  min-width: 36px;
+  min-width: 200px;
   max-width: 200px;
   overflow: hidden;
   animation: hubIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
@@ -1492,11 +1492,11 @@ var Tt=new Set([0,1,11,14,15]);function Pt(t){let e=Object.keys(t).find(i=>i.sta
   color: var(--accent);
   text-align: center;
 }
-`;function d(t){let n=document.createElement("div");return n.textContent=t,n.innerHTML}function $(t,n){switch(t){case"idle":return"Ready";case"pending":return"Waiting for agent...";case"fixing":return v[n%v.length];case"success":return"Done!";case"failed":return"Failed";default:return t}}function Y(t,n,e,i){if(t&&(!n||e)){let o=i;return o||(o=document.createElement("style"),o.id="eyeglass-cursor-style",document.head.appendChild(o)),o.textContent=`
+`;function d(t){let n=document.createElement("div");return n.textContent=t,n.innerHTML}function $(t,n){switch(t){case"idle":return"Ready";case"pending":return"Waiting for agent...";case"fixing":return v[n%v.length];case"success":return"Done!";case"failed":return"Failed";default:return t}}function G(t,n,e,i){if(t&&(!n||e)){let o=i;return o||(o=document.createElement("style"),o.id="eyeglass-cursor-style",document.head.appendChild(o)),o.textContent=`
       html, body, body * {
-        cursor: ${U} !important;
+        cursor: ${K} !important;
       }
-    `,o}else return i&&(i.textContent=""),i}function A(){return`eyeglass-${Date.now()}-${Math.random().toString(36).slice(2,9)}`}function G(t){let n=new EventSource(`${f}/events`);return n.onmessage=e=>{try{let i=JSON.parse(e.data);i.type==="activity"&&t.onActivityEvent(i.payload)}catch{}},n.onerror=()=>{n.close(),setTimeout(()=>t.onReconnect(),3e3)},n}async function z(t){let n={interactionId:t.interactionId,userNote:t.userNote.trim(),autoCommit:t.autoCommit,...t.snapshots.length===1?{snapshot:t.snapshots[0]}:{snapshots:t.snapshots}};try{let e=await fetch(`${f}/focus`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(n)});return e.ok?{success:!0}:{success:!1,error:`HTTP ${e.status}`}}catch{return{success:!1,error:"Failed to connect to bridge"}}}async function W(t,n,e,i){let s={interactionId:t,questionId:n,answerId:e,answerLabel:i};try{await fetch(`${f}/answer`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(s)})}catch{}}async function J(t){try{return{success:(await fetch(`${f}/undo`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({interactionId:t})})).ok}}catch(n){return console.warn("Undo request failed:",n),{success:!1}}}async function V(t){try{return(await fetch(`${f}/commit`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({interactionId:t})})).ok?{success:!0}:(console.warn("Commit request failed"),{success:!1})}catch(n){return console.warn("Commit request failed:",n),{success:!1}}}function R(t,n,e){let i=e.map(o=>o.framework.componentName||o.tagName),s=e.length===1?i[0]:`${i.length} elements`;return{interactionId:t,userNote:n.trim(),componentName:s,filePath:e[0]?.framework.filePath,status:"pending",timestamp:Date.now()}}var Z=`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+    `,o}else return i&&(i.textContent=""),i}function A(){return`eyeglass-${Date.now()}-${Math.random().toString(36).slice(2,9)}`}function W(t){let n=new EventSource(`${f}/events`);return n.onmessage=e=>{try{let i=JSON.parse(e.data);i.type==="activity"&&t.onActivityEvent(i.payload)}catch{}},n.onerror=()=>{n.close(),setTimeout(()=>t.onReconnect(),3e3)},n}async function z(t){let n={interactionId:t.interactionId,userNote:t.userNote.trim(),autoCommit:t.autoCommit,...t.snapshots.length===1?{snapshot:t.snapshots[0]}:{snapshots:t.snapshots}};try{let e=await fetch(`${f}/focus`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(n)});return e.ok?{success:!0}:{success:!1,error:`HTTP ${e.status}`}}catch{return{success:!1,error:"Failed to connect to bridge"}}}async function J(t,n,e,i){let s={interactionId:t,questionId:n,answerId:e,answerLabel:i};try{await fetch(`${f}/answer`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(s)})}catch{}}async function V(t){try{return{success:(await fetch(`${f}/undo`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({interactionId:t})})).ok}}catch(n){return console.warn("Undo request failed:",n),{success:!1}}}async function Z(t){try{return(await fetch(`${f}/commit`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({interactionId:t})})).ok?{success:!0}:(console.warn("Commit request failed"),{success:!1})}catch(n){return console.warn("Commit request failed:",n),{success:!1}}}function R(t,n,e){let i=e.map(o=>o.framework.componentName||o.tagName),s=e.length===1?i[0]:`${i.length} elements`;return{interactionId:t,userNote:n.trim(),componentName:s,filePath:e[0]?.framework.filePath,status:"pending",timestamp:Date.now()}}var X=`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
   <defs>
     <linearGradient id="lensGrad" x1="0%" y1="0%" x2="100%" y2="100%">
       <stop offset="0%" style="stop-color:#60a5fa;stop-opacity:0.3"/>
@@ -1511,11 +1511,10 @@ var Tt=new Set([0,1,11,14,15]);function Pt(t){let e=Object.keys(t).find(i=>i.sta
   <path d="M 10 50 L 5 45" stroke="#3b82f6" stroke-width="3" stroke-linecap="round"/>
   <path d="M 90 50 L 95 45" stroke="#3b82f6" stroke-width="3" stroke-linecap="round"/>
   <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"/>
-</svg>`,Bt='<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>',jt='<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>',Ut='<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>',Kt='<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>',Yt='<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>',Gt='<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>';function X(t,n,e){let i=n.hubExpanded?"":"collapsed",s=n.inspectorEnabled?"":"disabled",o=n.hubExpanded?"expanded":"",r=n.history.filter(c=>c.status==="pending"||c.status==="fixing").length;t.className=`hub ${i} ${s}`.trim(),t.innerHTML=`
+</svg>`,Bt='<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>',jt='<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>',Ut='<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>',Kt='<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>',Yt='<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>',Gt='<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>';function Q(t,n,e){let i=n.hubExpanded?"":"collapsed",s=n.inspectorEnabled?"":"disabled",o=n.hubExpanded?"expanded":"",r=n.history.filter(c=>c.status==="pending"||c.status==="fixing").length;t.className=`hub ${i} ${s}`.trim(),t.innerHTML=`
     <div class="hub-header">
       <div class="hub-header-left">
-        <div class="hub-logo">${Z}</div>
-        <span class="hub-title">Eyeglass</span>
+        <div class="hub-logo">${X}</div>
         ${r>0?`<span class="hub-badge">${r}</span>`:""}
         <button class="hub-toggle ${o}" title="Toggle history">\u25BC</button>
       </div>
@@ -1546,10 +1545,10 @@ var Tt=new Set([0,1,11,14,15]);function Pt(t){let e=Object.keys(t).find(i=>i.sta
         <div class="hub-empty">No requests yet</div>
       `}
     </div>
-  `;let a=t.querySelector(".hub-header"),l=t.querySelector(".hub-disable"),u=t.querySelector(".hub-settings-btn");a.addEventListener("click",c=>{c.target===l||c.target===u||c.target.closest(".hub-settings-btn")||e.onToggleExpanded()}),u.addEventListener("click",c=>{c.stopPropagation(),e.onOpenSettings()}),l.addEventListener("click",c=>{c.stopPropagation(),e.onToggleEnabled()}),t.querySelectorAll(".hub-item-undo").forEach(c=>{c.addEventListener("click",g=>{g.stopPropagation();let x=g.currentTarget.dataset.id;e.onUndo(x)})})}function Q(t,n,e){t.className="hub",t.innerHTML=`
+  `;let a=t.querySelector(".hub-header"),l=t.querySelector(".hub-disable"),u=t.querySelector(".hub-settings-btn");a.addEventListener("click",c=>{c.target===l||c.target===u||c.target.closest(".hub-settings-btn")||e.onToggleExpanded()}),u.addEventListener("click",c=>{c.stopPropagation(),e.onOpenSettings()}),l.addEventListener("click",c=>{c.stopPropagation(),e.onToggleEnabled()}),t.querySelectorAll(".hub-item-undo").forEach(c=>{c.addEventListener("click",g=>{g.stopPropagation();let x=g.currentTarget.dataset.id;e.onUndo(x)})})}function tt(t,n,e){t.className="hub",t.innerHTML=`
     <div class="hub-header">
       <div class="hub-header-left">
-        <div class="hub-logo">${Z}</div>
+        <div class="hub-logo">${X}</div>
         <span class="hub-title">Eyeglass</span>
       </div>
     </div>
@@ -1590,7 +1589,7 @@ var Tt=new Set([0,1,11,14,15]);function Pt(t){let e=Object.keys(t).find(i=>i.sta
         </div>
       </div>
     </div>
-  `,t.querySelector(".hub-back-btn").addEventListener("click",()=>{e.onBack()}),t.querySelectorAll(".theme-btn").forEach(s=>{s.addEventListener("click",o=>{let r=o.currentTarget.dataset.theme;e.onThemeChange(r)})}),t.querySelectorAll(".toggle-switch").forEach(s=>{s.addEventListener("click",o=>{o.currentTarget.dataset.setting==="autoCommit"&&e.onAutoCommitToggle()})})}function tt(t,n){let e=t.map(i=>{switch(i.type){case"status":return i.status==="pending"||i.status==="fixing"&&(!i.message||i.message==="Agent is working...")?"":Wt(i);case"thought":return Jt(i);case"action":return Vt(i);case"question":return Zt(i,t);default:return""}}).filter(Boolean);return e.length===0&&(n==="pending"||n==="fixing")?`
+  `,t.querySelector(".hub-back-btn").addEventListener("click",()=>{e.onBack()}),t.querySelectorAll(".theme-btn").forEach(s=>{s.addEventListener("click",o=>{let r=o.currentTarget.dataset.theme;e.onThemeChange(r)})}),t.querySelectorAll(".toggle-switch").forEach(s=>{s.addEventListener("click",o=>{o.currentTarget.dataset.setting==="autoCommit"&&e.onAutoCommitToggle()})})}function et(t,n){let e=t.map(i=>{switch(i.type){case"status":return i.status==="pending"||i.status==="fixing"&&(!i.message||i.message==="Agent is working...")?"":Wt(i);case"thought":return Jt(i);case"action":return Vt(i);case"question":return Zt(i,t);default:return""}}).filter(Boolean);return e.length===0&&(n==="pending"||n==="fixing")?`
       <div class="skeleton-item">
         <div class="skeleton-icon"></div>
         <div class="skeleton-line"></div>
@@ -1637,7 +1636,7 @@ var Tt=new Set([0,1,11,14,15]);function Pt(t){let e=Object.keys(t).find(i=>i.sta
         `).join("")}
       </div>
     </div>
-  `}function nt(t,n,e){if(e)return e;let i=window.innerHeight-t.bottom,s=n==="activity"?400:200,o=t.bottom+12;i<s&&t.top>s&&(o=t.top-s-12);let r=20,a=window.innerHeight-s-20;o=Math.max(r,Math.min(o,a));let l=t.left;return l+340>window.innerWidth-20&&(l=window.innerWidth-360),l<20&&(l=20),{x:l,y:o}}function it(t,n,e){let i=n.multiSelectMode,s=i?"multi-select-icon active":"multi-select-icon",o=i?`
+  `}function it(t,n,e){if(e)return e;let i=window.innerHeight-t.bottom,s=n==="activity"?400:200,o=t.bottom+12;i<s&&t.top>s&&(o=t.top-s-12);let r=20,a=window.innerHeight-s-20;o=Math.max(r,Math.min(o,a));let l=t.left;return l+340>window.innerWidth-20&&(l=window.innerWidth-360),l<20&&(l=20),{x:l,y:o}}function ot(t,n,e){let i=n.multiSelectMode,s=i?"multi-select-icon active":"multi-select-icon",o=i?`
     <div class="selected-list">
       <div class="selected-list-header">
         <span class="selected-count">${n.selectedSnapshots.length} element${n.selectedSnapshots.length!==1?"s":""} selected</span>
@@ -1675,7 +1674,7 @@ var Tt=new Set([0,1,11,14,15]);function Pt(t){let e=Object.keys(t).find(i=>i.sta
         <button class="btn btn-primary">Send</button>
       </div>
     </div>
-  `;let a=t.querySelector(".input-field"),l=t.querySelector(".close-btn"),u=t.querySelector(".btn-secondary"),c=t.querySelector(".btn-primary"),g=t.querySelector(".multi-select-icon");l.addEventListener("click",()=>e.onClose()),u.addEventListener("click",()=>e.onClose()),c.addEventListener("click",()=>e.onSubmit(a.value)),a.addEventListener("keydown",h=>{h.key==="Enter"&&!h.shiftKey&&a.value.trim()&&(h.preventDefault(),e.onSubmit(a.value))}),g.addEventListener("click",()=>{e.onToggleMultiSelect()}),t.querySelectorAll(".selected-chip-remove").forEach(h=>{h.addEventListener("click",p=>{p.stopPropagation();let b=parseInt(p.currentTarget.dataset.index,10);e.onRemoveFromSelection(b)})}),t.querySelector(".panel-header").addEventListener("mousedown",e.onPanelDragStart),requestAnimationFrame(()=>a.focus())}function ot(t,n,e){let i=n.currentStatus==="success"||n.currentStatus==="failed",s=n.currentStatus==="success"&&!n.autoCommitEnabled,o=n.currentStatus==="success",r=n.submittedSnapshots.length,a=r>1?`${r} elements`:`&lt;${d(n.componentName)} /&gt;`,l=$(n.currentStatus,n.phraseIndex);t.innerHTML=`
+  `;let a=t.querySelector(".input-field"),l=t.querySelector(".close-btn"),u=t.querySelector(".btn-secondary"),c=t.querySelector(".btn-primary"),g=t.querySelector(".multi-select-icon");l.addEventListener("click",()=>e.onClose()),u.addEventListener("click",()=>e.onClose()),c.addEventListener("click",()=>e.onSubmit(a.value)),a.addEventListener("keydown",h=>{h.key==="Enter"&&!h.shiftKey&&a.value.trim()&&(h.preventDefault(),e.onSubmit(a.value))}),g.addEventListener("click",()=>{e.onToggleMultiSelect()}),t.querySelectorAll(".selected-chip-remove").forEach(h=>{h.addEventListener("click",p=>{p.stopPropagation();let b=parseInt(p.currentTarget.dataset.index,10);e.onRemoveFromSelection(b)})}),t.querySelector(".panel-header").addEventListener("mousedown",e.onPanelDragStart),requestAnimationFrame(()=>a.focus())}function st(t,n,e){let i=n.currentStatus==="success"||n.currentStatus==="failed",s=n.currentStatus==="success"&&!n.autoCommitEnabled,o=n.currentStatus==="success",r=n.submittedSnapshots.length,a=r>1?`${r} elements`:`&lt;${d(n.componentName)} /&gt;`,l=$(n.currentStatus,n.phraseIndex);t.innerHTML=`
     <div class="panel-header">
       <span class="component-tag">${a}</span>
       ${r<=1&&n.filePath?`<span class="file-path">${d(n.filePath)}</span>`:""}
@@ -1686,7 +1685,7 @@ var Tt=new Set([0,1,11,14,15]);function Pt(t){let e=Object.keys(t).find(i=>i.sta
       <div class="user-request-text">${d(n.userNote)}</div>
     </div>
     <div class="activity-feed">
-      ${tt(n.activityEvents,n.currentStatus)}
+      ${et(n.activityEvents,n.currentStatus)}
     </div>
     <div class="panel-footer ${i?"done":""}">
       <div class="status-indicator ${n.currentStatus}"></div>
@@ -1707,11 +1706,11 @@ var Tt=new Set([0,1,11,14,15]);function Pt(t){let e=Object.keys(t).find(i=>i.sta
         </div>
       </div>
     `:""}
-  `,t.querySelector(".close-btn").addEventListener("click",()=>e.onClose()),t.querySelector(".panel-header").addEventListener("mousedown",e.onPanelDragStart),t.querySelectorAll(".question-option").forEach(y=>{y.addEventListener("click",Mt=>{let C=Mt.target,Ht=C.dataset.questionId,It=C.dataset.answerId,Ct=C.textContent;e.onSubmitAnswer(Ht,It,Ct)})});let g=t.querySelector(".action-btn-commit"),x=t.querySelector(".action-btn-undo");g&&g.addEventListener("click",()=>e.onCommit()),x&&x.addEventListener("click",()=>e.onUndo());let h=t.querySelector(".followup-input"),p=t.querySelector(".followup-send"),b=t.querySelector(".followup-done");h&&p&&(p.addEventListener("click",()=>{h.value.trim()&&e.onSubmitFollowUp(h.value)}),h.addEventListener("keydown",y=>{y.key==="Enter"&&!y.shiftKey&&h.value.trim()&&(y.preventDefault(),e.onSubmitFollowUp(h.value))}),requestAnimationFrame(()=>h.focus())),b&&b.addEventListener("click",()=>e.onClose());let I=t.querySelector(".activity-feed");I&&(I.scrollTop=I.scrollHeight)}function st(t,n,e){if(!t)return;let i=t.querySelector(".status-text");i&&(i.textContent=$(n,e))}function rt(t,n,e,i){return s=>{let o=e();if(!o.multiSelectMode&&o.frozen||!o.inspectorEnabled)return;if(s.composedPath().includes(t)){o.multiSelectMode||i.hideHighlight();return}if(o.throttleTimeout)return;i.setThrottleTimeout(window.setTimeout(()=>{i.setThrottleTimeout(null)},16)),t.style.pointerEvents="none";let a=document.elementFromPoint(s.clientX,s.clientY);if(t.style.pointerEvents="",!a||a===document.documentElement||a===document.body){o.multiSelectMode||i.hideHighlight();return}n.contains(a)||(i.setCurrentElement(a),i.showHighlight(a))}}function at(t,n,e){return i=>{let s=n();if(!(!s.inspectorEnabled||!s.currentElement||i.composedPath().some(r=>r===t))){if(i.preventDefault(),i.stopPropagation(),s.multiSelectMode){e.toggleInSelection(s.currentElement);return}s.frozen||e.freeze()}}}function lt(t,n){return e=>{let i=t();e.key==="Escape"&&i.frozen&&(e.preventDefault(),n.unfreeze()),(navigator.platform.toUpperCase().indexOf("MAC")>=0?e.metaKey:e.ctrlKey)&&e.shiftKey&&e.key.toLowerCase()==="e"&&(e.preventDefault(),n.toggleInspectorEnabled())}}function ct(t,n){return()=>{let e=t();e.frozen&&(n.disableHighlightTransitions(),e.currentElement&&e.highlight&&!e.multiSelectMode&&n.showHighlight(e.currentElement),e.multiSelectMode&&e.selectedElements.length>0&&n.updateMultiSelectHighlightPositions(),e.scrollTimeout&&window.clearTimeout(e.scrollTimeout),n.setScrollTimeout(window.setTimeout(()=>{n.enableHighlightTransitions(),n.setScrollTimeout(null)},150)))}}function dt(t,n){let e=o=>{let r=t();if(!r.isDragging||!r.panel)return;let a=Math.max(0,Math.min(o.clientX-r.dragOffset.x,window.innerWidth-340)),l=Math.max(0,Math.min(o.clientY-r.dragOffset.y,window.innerHeight-100));n.setCustomPanelPosition({x:a,y:l}),r.panel.style.left=`${a}px`,r.panel.style.top=`${l}px`},i=()=>{n.setDragging(!1),document.removeEventListener("mousemove",e),document.removeEventListener("mouseup",i)};return{handlePanelDragStart:o=>{if(o.target.closest("button"))return;let r=t();if(!r.panel)return;n.setDragging(!0);let a=r.panel.getBoundingClientRect();n.setDragOffset({x:o.clientX-a.left,y:o.clientY-a.top}),document.addEventListener("mousemove",e),document.addEventListener("mouseup",i)},handlePanelDrag:e,handlePanelDragEnd:i}}function ut(t,n,e,i,s){if(!t)return;let o={interactionId:t,userNote:n,componentName:e?.framework.componentName||e?.tagName||"element",status:i,message:s,timestamp:Date.now()};try{sessionStorage.setItem(E,JSON.stringify(o))}catch{}}function ht(){try{let t=sessionStorage.getItem(E);if(!t)return null;let n=JSON.parse(t);return Date.now()-n.timestamp>1e4?(sessionStorage.removeItem(E),null):n}catch{return null}}function q(){try{sessionStorage.removeItem(E)}catch{}}function pt(){try{let t=sessionStorage.getItem(P);if(t)return JSON.parse(t)}catch{}return[]}function m(t){try{sessionStorage.setItem(P,JSON.stringify(t))}catch{}}function F(t,n){let e=[...t],i=e.findIndex(s=>s.interactionId===n.interactionId);return i>=0?e[i]=n:(e.unshift(n),e.length>20&&(e.length=20)),e}function k(t,n,e){return t.map(i=>i.interactionId===n?{...i,status:e}:i)}function mt(t,n){return t.filter(e=>e.interactionId!==n)}function gt(){try{let t=localStorage.getItem(D);if(t!==null)return t==="true"}catch{}return!0}function bt(t){try{localStorage.setItem(D,String(t))}catch{}}function ft(){try{let t=localStorage.getItem(L);if(t!==null)return t==="true"}catch{}return!0}function vt(t){try{localStorage.setItem(L,String(t))}catch{}}function xt(){try{let t=localStorage.getItem(N);if(t==="light"||t==="dark"||t==="auto")return t}catch{}return"auto"}function yt(t){try{localStorage.setItem(N,t)}catch{}}function w(t,n){t.multiSelectHighlights.forEach(s=>s.remove());let e=[],i=3;return t.selectedElements.forEach((s,o)=>{let r=s.getBoundingClientRect(),a=document.createElement("div");a.className="highlight multi",a.style.display="block",a.style.left=`${r.left-i}px`,a.style.top=`${r.top-i}px`,a.style.width=`${r.width+i*2}px`,a.style.height=`${r.height+i*2}px`;let l=document.createElement("div");l.className="highlight-badge",l.textContent=String(o+1),a.appendChild(l),n.appendChild(a),e.push(a)}),e}function M(t,n){t.multiSelectHighlights.forEach(e=>e.remove())}function St(t,n){t.forEach((i,s)=>{let o=n[s];if(!o)return;let r=i.getBoundingClientRect();o.style.left=`${r.left-3}px`,o.style.top=`${r.top-3}px`,o.style.width=`${r.width+3*2}px`,o.style.height=`${r.height+3*2}px`})}function Et(t,n){t&&t.classList.add("no-transition"),n.forEach(e=>e.classList.add("no-transition"))}function wt(t,n){t&&t.classList.remove("no-transition"),n.forEach(e=>e.classList.remove("no-transition"))}var H=class 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._userNote="";this.shadow=this.attachShadow({mode:"closed"}),this.handleMouseMove=rt(this,this.shadow,()=>({frozen:this.frozen,multiSelectMode:this.multiSelectMode,inspectorEnabled:this.inspectorEnabled,throttleTimeout:this.throttleTimeout}),{setThrottleTimeout:e=>this.throttleTimeout=e,hideHighlight:()=>this.hideHighlight(),showHighlight:e=>this.showHighlight(e),setCurrentElement:e=>this.currentElement=e}),this.handleClick=at(this,()=>({inspectorEnabled:this.inspectorEnabled,currentElement:this.currentElement,frozen:this.frozen,multiSelectMode:this.multiSelectMode}),{toggleInSelection:e=>this.toggleInSelection(e),freeze:()=>this.freeze()}),this.handleKeyDown=lt(()=>({frozen:this.frozen}),{unfreeze:()=>this.unfreeze(),toggleInspectorEnabled:()=>this.toggleInspectorEnabled()}),this.handleScroll=ct(()=>({frozen:this.frozen,currentElement:this.currentElement,highlight:this.highlight,multiSelectMode:this.multiSelectMode,selectedElements:this.selectedElements,scrollTimeout:this.scrollTimeout}),{showHighlight:e=>this.showHighlight(e),updateMultiSelectHighlightPositions:()=>St(this.selectedElements,this.multiSelectHighlights),disableHighlightTransitions:()=>Et(this.highlight,this.multiSelectHighlights),enableHighlightTransitions:()=>wt(this.highlight,this.multiSelectHighlights),setScrollTimeout:e=>this.scrollTimeout=e}),this.dragHandlers=dt(()=>({isDragging:this.isDragging,dragOffset:this.dragOffset,panel:this.panel}),{setDragging:e=>this.isDragging=e,setDragOffset:e=>this.dragOffset=e,setCustomPanelPosition:e=>this.customPanelPosition=e})}connectedCallback(){let e=document.createElement("style");e.textContent=K,this.shadow.appendChild(e),this.highlight=document.createElement("div"),this.highlight.className="highlight",this.highlight.style.display="none",this.shadow.appendChild(this.highlight),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.inspectorEnabled=gt(),this.autoCommitEnabled=ft(),this.themePreference=xt(),this.applyTheme(),this.history=pt(),this.renderHub(),this.connectSSE(),this.restoreSession(),this.updateCursor()}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=G({onActivityEvent:e=>this.handleActivityEvent(e),onReconnect:()=>this.connectSSE()})}handleActivityEvent(e){e.type==="status"&&(this.history=k(this.history,e.interactionId,e.status),m(this.history),this.renderHub()),e.interactionId===this.interactionId&&(this.activityEvents.push(e),e.type==="status"&&(this.currentStatus=e.status,ut(this.interactionId,this._userNote,this.currentSnapshot,this.currentStatus,e.message),e.status==="fixing"?this.startPhraseRotation():this.stopPhraseRotation(),e.status==="failed"&&setTimeout(()=>this.unfreeze(),4e3)),this.renderPanel())}restoreSession(){let e=ht();e&&(e.status==="success"||e.status==="failed")&&(this.showResultToast(e),q())}showResultToast(e){this.toast=document.createElement("div"),this.toast.className="result-toast";let i=e.status==="success",s=i?"\u2713":"\u2715",o=i?"Done!":"Failed";this.toast.innerHTML=`
+  `,t.querySelector(".close-btn").addEventListener("click",()=>e.onClose()),t.querySelector(".panel-header").addEventListener("mousedown",e.onPanelDragStart),t.querySelectorAll(".question-option").forEach(y=>{y.addEventListener("click",_=>{_.stopPropagation();let C=_.currentTarget,Ht=C.dataset.questionId,It=C.dataset.answerId,Ct=C.textContent;e.onSubmitAnswer(Ht,It,Ct)})});let g=t.querySelector(".action-btn-commit"),x=t.querySelector(".action-btn-undo");g&&g.addEventListener("click",()=>e.onCommit()),x&&x.addEventListener("click",()=>e.onUndo());let h=t.querySelector(".followup-input"),p=t.querySelector(".followup-send"),b=t.querySelector(".followup-done");h&&p&&(p.addEventListener("click",()=>{h.value.trim()&&e.onSubmitFollowUp(h.value)}),h.addEventListener("keydown",y=>{y.key==="Enter"&&!y.shiftKey&&h.value.trim()&&(y.preventDefault(),e.onSubmitFollowUp(h.value))}),requestAnimationFrame(()=>h.focus())),b&&b.addEventListener("click",()=>e.onClose());let I=t.querySelector(".activity-feed");I&&(I.scrollTop=I.scrollHeight)}function rt(t,n,e){if(!t)return;let i=t.querySelector(".status-text");i&&(i.textContent=$(n,e))}function at(t,n,e,i){return s=>{let o=e();if(!o.multiSelectMode&&o.frozen||!o.inspectorEnabled)return;if(s.composedPath().includes(t)){o.multiSelectMode||i.hideHighlight();return}if(o.throttleTimeout)return;i.setThrottleTimeout(window.setTimeout(()=>{i.setThrottleTimeout(null)},16)),t.style.pointerEvents="none";let a=document.elementFromPoint(s.clientX,s.clientY);if(t.style.pointerEvents="",!a||a===document.documentElement||a===document.body){o.multiSelectMode||i.hideHighlight();return}n.contains(a)||(i.setCurrentElement(a),o.multiSelectMode||i.showHighlight(a))}}function lt(t,n,e){return i=>{let s=n();if(!(!s.inspectorEnabled||!s.currentElement||i.composedPath().some(r=>r===t))){if(i.preventDefault(),i.stopPropagation(),s.multiSelectMode){e.toggleInSelection(s.currentElement);return}s.frozen||e.freeze()}}}function ct(t,n){return e=>{let i=t();e.key==="Escape"&&i.frozen&&(e.preventDefault(),n.unfreeze()),(navigator.platform.toUpperCase().indexOf("MAC")>=0?e.metaKey:e.ctrlKey)&&e.shiftKey&&e.key.toLowerCase()==="e"&&(e.preventDefault(),n.toggleInspectorEnabled())}}function dt(t,n){return()=>{let e=t();e.frozen&&(n.disableHighlightTransitions(),e.currentElement&&e.highlight&&!e.multiSelectMode&&n.showHighlight(e.currentElement),e.multiSelectMode&&e.selectedElements.length>0&&n.updateMultiSelectHighlightPositions(),e.scrollTimeout&&window.clearTimeout(e.scrollTimeout),n.setScrollTimeout(window.setTimeout(()=>{n.enableHighlightTransitions(),n.setScrollTimeout(null)},150)))}}function ut(t,n){let e=o=>{let r=t();if(!r.isDragging||!r.panel)return;let a=Math.max(0,Math.min(o.clientX-r.dragOffset.x,window.innerWidth-340)),l=Math.max(0,Math.min(o.clientY-r.dragOffset.y,window.innerHeight-100));n.setCustomPanelPosition({x:a,y:l}),r.panel.style.left=`${a}px`,r.panel.style.top=`${l}px`},i=()=>{n.setDragging(!1),document.removeEventListener("mousemove",e),document.removeEventListener("mouseup",i)};return{handlePanelDragStart:o=>{if(o.target.closest("button"))return;let r=t();if(!r.panel)return;n.setDragging(!0);let a=r.panel.getBoundingClientRect();n.setDragOffset({x:o.clientX-a.left,y:o.clientY-a.top}),document.addEventListener("mousemove",e),document.addEventListener("mouseup",i)},handlePanelDrag:e,handlePanelDragEnd:i}}function ht(t,n,e,i,s){if(!t)return;let o={interactionId:t,userNote:n,componentName:e?.framework.componentName||e?.tagName||"element",status:i,message:s,timestamp:Date.now()};try{sessionStorage.setItem(E,JSON.stringify(o))}catch{}}function pt(){try{let t=sessionStorage.getItem(E);if(!t)return null;let n=JSON.parse(t);return Date.now()-n.timestamp>1e4?(sessionStorage.removeItem(E),null):n}catch{return null}}function q(){try{sessionStorage.removeItem(E)}catch{}}function mt(){try{let t=sessionStorage.getItem(P);if(t)return JSON.parse(t)}catch{}return[]}function m(t){try{sessionStorage.setItem(P,JSON.stringify(t))}catch{}}function F(t,n){let e=[...t],i=e.findIndex(s=>s.interactionId===n.interactionId);return i>=0?e[i]=n:(e.unshift(n),e.length>20&&(e.length=20)),e}function k(t,n,e){return t.map(i=>i.interactionId===n?{...i,status:e}:i)}function gt(t,n){return t.filter(e=>e.interactionId!==n)}function bt(){try{let t=localStorage.getItem(D);if(t!==null)return t==="true"}catch{}return!0}function ft(t){try{localStorage.setItem(D,String(t))}catch{}}function vt(){try{let t=localStorage.getItem(L);if(t!==null)return t==="true"}catch{}return!0}function xt(t){try{localStorage.setItem(L,String(t))}catch{}}function yt(){try{let t=localStorage.getItem(N);if(t==="light"||t==="dark"||t==="auto")return t}catch{}return"auto"}function St(t){try{localStorage.setItem(N,t)}catch{}}function w(t,n){t.multiSelectHighlights.forEach(s=>s.remove());let e=[],i=3;return t.selectedElements.forEach((s,o)=>{let r=s.getBoundingClientRect(),a=document.createElement("div");a.className="highlight multi",a.style.display="block",a.style.left=`${r.left-i}px`,a.style.top=`${r.top-i}px`,a.style.width=`${r.width+i*2}px`,a.style.height=`${r.height+i*2}px`;let l=document.createElement("div");l.className="highlight-badge",l.textContent=String(o+1),a.appendChild(l),n.appendChild(a),e.push(a)}),e}function M(t,n){t.multiSelectHighlights.forEach(e=>e.remove())}function Et(t,n){t.forEach((i,s)=>{let o=n[s];if(!o)return;let r=i.getBoundingClientRect();o.style.left=`${r.left-3}px`,o.style.top=`${r.top-3}px`,o.style.width=`${r.width+3*2}px`,o.style.height=`${r.height+3*2}px`})}function wt(t,n){t&&t.classList.add("no-transition"),n.forEach(e=>e.classList.add("no-transition"))}function kt(t,n){t&&t.classList.remove("no-transition"),n.forEach(e=>e.classList.remove("no-transition"))}var H=class 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._userNote="";this.shadow=this.attachShadow({mode:"closed"}),this.handleMouseMove=at(this,this.shadow,()=>({frozen:this.frozen,multiSelectMode:this.multiSelectMode,inspectorEnabled:this.inspectorEnabled,throttleTimeout:this.throttleTimeout}),{setThrottleTimeout:e=>this.throttleTimeout=e,hideHighlight:()=>this.hideHighlight(),showHighlight:e=>this.showHighlight(e),setCurrentElement:e=>this.currentElement=e}),this.handleClick=lt(this,()=>({inspectorEnabled:this.inspectorEnabled,currentElement:this.currentElement,frozen:this.frozen,multiSelectMode:this.multiSelectMode}),{toggleInSelection:e=>this.toggleInSelection(e),freeze:()=>this.freeze()}),this.handleKeyDown=ct(()=>({frozen:this.frozen}),{unfreeze:()=>this.unfreeze(),toggleInspectorEnabled:()=>this.toggleInspectorEnabled()}),this.handleScroll=dt(()=>({frozen:this.frozen,currentElement:this.currentElement,highlight:this.highlight,multiSelectMode:this.multiSelectMode,selectedElements:this.selectedElements,scrollTimeout:this.scrollTimeout}),{showHighlight:e=>this.showHighlight(e),updateMultiSelectHighlightPositions:()=>Et(this.selectedElements,this.multiSelectHighlights),disableHighlightTransitions:()=>wt(this.highlight,this.multiSelectHighlights),enableHighlightTransitions:()=>kt(this.highlight,this.multiSelectHighlights),setScrollTimeout:e=>this.scrollTimeout=e}),this.dragHandlers=ut(()=>({isDragging:this.isDragging,dragOffset:this.dragOffset,panel:this.panel}),{setDragging:e=>this.isDragging=e,setDragOffset:e=>this.dragOffset=e,setCustomPanelPosition:e=>this.customPanelPosition=e})}connectedCallback(){let e=document.createElement("style");e.textContent=Y,this.shadow.appendChild(e),this.highlight=document.createElement("div"),this.highlight.className="highlight",this.highlight.style.display="none",this.shadow.appendChild(this.highlight),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.inspectorEnabled=bt(),this.autoCommitEnabled=vt(),this.themePreference=yt(),this.applyTheme(),this.history=mt(),this.renderHub(),this.connectSSE(),this.restoreSession(),this.updateCursor()}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=W({onActivityEvent:e=>this.handleActivityEvent(e),onReconnect:()=>this.connectSSE()})}handleActivityEvent(e){e.type==="status"&&(this.history=k(this.history,e.interactionId,e.status),m(this.history),this.renderHub()),e.interactionId===this.interactionId&&(this.activityEvents.push(e),e.type==="status"&&(this.currentStatus=e.status,ht(this.interactionId,this._userNote,this.currentSnapshot,this.currentStatus,e.message),e.status==="fixing"?this.startPhraseRotation():this.stopPhraseRotation(),e.status==="failed"&&setTimeout(()=>this.unfreeze(),4e3)),this.renderPanel())}restoreSession(){let e=pt();e&&(e.status==="success"||e.status==="failed")&&(this.showResultToast(e),q())}showResultToast(e){this.toast=document.createElement("div"),this.toast.className="result-toast";let i=e.status==="success",s=i?"\u2713":"\u2715",o=i?"Done!":"Failed";this.toast.innerHTML=`
       <div class="toast-icon ${e.status}">${s}</div>
       <div class="toast-content">
         <div class="toast-title">${o}</div>
         <div class="toast-message">${d(e.message||e.userNote)}</div>
       </div>
       <button class="toast-close">&times;</button>
-    `,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)}applyTheme(){this.setAttribute("data-theme",this.themePreference)}toggleInspectorEnabled(){this.inspectorEnabled=!this.inspectorEnabled,bt(this.inspectorEnabled),this.inspectorEnabled||this.unfreeze(),this.updateCursor(),this.renderHub()}updateCursor(){this.cursorStyleElement=Y(this.inspectorEnabled,this.frozen,this.multiSelectMode,this.cursorStyleElement)}showHighlight(e){if(!this.highlight)return;let i=e.getBoundingClientRect(),s=3;this.highlight.style.display="block",this.highlight.style.left=`${i.left-s}px`,this.highlight.style.top=`${i.top-s}px`,this.highlight.style.width=`${i.width+s*2}px`,this.highlight.style.height=`${i.height+s*2}px`}hideHighlight(){this.highlight&&(this.highlight.style.display="none"),this.currentElement=null}freeze(){this.currentElement&&(this.frozen=!0,this.currentSnapshot=S(this.currentElement),this.selectedElements=[this.currentElement],this.selectedSnapshots=[this.currentSnapshot],this.mode="input",this.activityEvents=[],this.currentStatus="idle",this.updateCursor(),this.renderPanel())}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=[],M({multiSelectHighlights:this.multiSelectHighlights},this.shadow),this.multiSelectHighlights=[],this.stopPhraseRotation(),this.hidePanel(),this.hideHighlight(),this.updateCursor(),q()}enterMultiSelectMode(){!this.frozen||this.multiSelectMode||(this.multiSelectMode=!0,this.multiSelectHighlights=w({multiSelectMode:!0,selectedElements:this.selectedElements,selectedSnapshots:this.selectedSnapshots,multiSelectHighlights:this.multiSelectHighlights,currentElement:this.currentElement,currentSnapshot:this.currentSnapshot},this.shadow),this.highlight&&(this.highlight.style.display="none"),this.updateCursor(),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]:[],M({multiSelectHighlights:this.multiSelectHighlights},this.shadow),this.multiSelectHighlights=[],this.currentElement&&this.showHighlight(this.currentElement),this.updateCursor(),this.renderPanel()}toggleInSelection(e){if(!this.multiSelectMode)return;let i=this.selectedElements.indexOf(e);if(i>=0)this.removeFromSelection(i);else{if(this.selectedElements.length>=5)return;let s=S(e);this.selectedElements.push(e),this.selectedSnapshots.push(s)}this.multiSelectHighlights=w({multiSelectMode:!0,selectedElements:this.selectedElements,selectedSnapshots:this.selectedSnapshots,multiSelectHighlights:this.multiSelectHighlights,currentElement:this.currentElement,currentSnapshot:this.currentSnapshot},this.shadow),this.highlight&&(this.highlight.style.display="none"),this.renderPanel()}removeFromSelection(e){if(!(e<0||e>=this.selectedElements.length)){if(this.selectedElements.length===1){this.exitMultiSelectMode();return}this.selectedElements.splice(e,1),this.selectedSnapshots.splice(e,1),this.multiSelectHighlights=w({multiSelectMode:!0,selectedElements:this.selectedElements,selectedSnapshots:this.selectedSnapshots,multiSelectHighlights:this.multiSelectHighlights,currentElement:this.currentElement,currentSnapshot:this.currentSnapshot},this.shadow),this.highlight&&(this.highlight.style.display="none"),this.renderPanel()}}renderHub(){this.hub||(this.hub=document.createElement("div"),this.hub.className="hub",this.shadow.appendChild(this.hub)),this.hubPage==="settings"?Q(this.hub,{themePreference:this.themePreference,autoCommitEnabled:this.autoCommitEnabled},{onBack:()=>{this.hubPage="main",this.renderHub()},onThemeChange:e=>{this.themePreference=e,yt(e),this.applyTheme(),this.renderHub()},onAutoCommitToggle:()=>{this.autoCommitEnabled=!this.autoCommitEnabled,vt(this.autoCommitEnabled),this.renderHub()}}):X(this.hub,{hubExpanded:this.hubExpanded,inspectorEnabled:this.inspectorEnabled,history:this.history},{onToggleExpanded:()=>{this.hubExpanded=!this.hubExpanded,this.renderHub()},onToggleEnabled:()=>this.toggleInspectorEnabled(),onOpenSettings:()=>{this.hubPage="settings",this.hubExpanded=!0,this.renderHub()},onUndo:e=>this.handleUndoRequest(e)})}renderPanel(){if(!this.currentSnapshot||!this.currentElement)return;let e=this.currentElement.getBoundingClientRect(),{framework:i}=this.currentSnapshot;this.panel||(this.panel=document.createElement("div"),this.panel.className="glass-panel",this.shadow.appendChild(this.panel));let s=nt(e,this.mode,this.customPanelPosition);this.panel.style.left=`${s.x}px`,this.panel.style.top=`${s.y}px`;let o=i.componentName||this.currentSnapshot.tagName,r=i.filePath?i.filePath.split("/").slice(-2).join("/"):null;this.mode==="input"?it(this.panel,{componentName:o,filePath:r,multiSelectMode:this.multiSelectMode,selectedSnapshots:this.selectedSnapshots},{onClose:()=>this.unfreeze(),onSubmit:a=>this.submit(a),onToggleMultiSelect:()=>{this.multiSelectMode?this.exitMultiSelectMode():this.enterMultiSelectMode()},onRemoveFromSelection:a=>this.removeFromSelection(a),onPanelDragStart:this.dragHandlers.handlePanelDragStart}):ot(this.panel,{componentName:o,filePath:r,submittedSnapshots:this.submittedSnapshots,activityEvents:this.activityEvents,currentStatus:this.currentStatus,autoCommitEnabled:this.autoCommitEnabled,userNote:this._userNote,interactionId:this.interactionId,phraseIndex:this.phraseIndex},{onClose:()=>this.unfreeze(),onSubmitFollowUp:a=>this.submitFollowUp(a),onSubmitAnswer:(a,l,u)=>this.handleSubmitAnswer(a,l,u),onCommit:()=>this.handleCommitRequest(),onUndo:()=>this.handleUndoFromPanel(),onPanelDragStart:this.dragHandlers.handlePanelDragStart})}hidePanel(){this.panel&&(this.panel.remove(),this.panel=null)}startPhraseRotation(){this.phraseInterval||(this.phraseIndex=Math.floor(Math.random()*v.length),this.phraseInterval=window.setInterval(()=>{this.phraseIndex=(this.phraseIndex+1)%v.length,st(this.panel,this.currentStatus,this.phraseIndex)},1e4))}stopPhraseRotation(){this.phraseInterval&&(window.clearInterval(this.phraseInterval),this.phraseInterval=null)}async submit(e){if(!e.trim()||this.selectedSnapshots.length===0&&!this.currentSnapshot)return;this.interactionId=A(),this._userNote=e.trim();let i=this.selectedSnapshots.length>0?this.selectedSnapshots:this.currentSnapshot?[this.currentSnapshot]:[];this.submittedSnapshots=[...i];let s=R(this.interactionId,e,i);this.history=F(this.history,s),m(this.history),this.renderHub();let o=this.multiSelectMode,r=[...this.selectedElements],a=[...this.selectedSnapshots];M({multiSelectHighlights:this.multiSelectHighlights},this.shadow),this.multiSelectHighlights=[],this.multiSelectMode=!1,this.mode="activity",this.activityEvents=[],this.currentStatus="pending",this.renderPanel();let l=await z({interactionId:this.interactionId,userNote:e.trim(),autoCommit:this.autoCommitEnabled,snapshots:i});l.success||(this.currentStatus="failed",this.history=k(this.history,this.interactionId,"failed"),m(this.history),this.renderHub(),this.activityEvents.push({type:"status",interactionId:this.interactionId,status:"failed",message:l.error||"Failed to connect to bridge",timestamp:Date.now()}),o&&r.length>1&&(this.multiSelectMode=!0,this.selectedElements=r,this.selectedSnapshots=a,this.mode="input",this.multiSelectHighlights=w({multiSelectMode:!0,selectedElements:this.selectedElements,selectedSnapshots:this.selectedSnapshots,multiSelectHighlights:this.multiSelectHighlights,currentElement:this.currentElement,currentSnapshot:this.currentSnapshot},this.shadow),this.highlight&&(this.highlight.style.display="none")),this.renderPanel())}async submitFollowUp(e){if(!e.trim()||this.submittedSnapshots.length===0)return;this.interactionId=A(),this._userNote=e.trim();let i=this.submittedSnapshots,s=R(this.interactionId,e,i);this.history=F(this.history,s),m(this.history),this.renderHub(),this.activityEvents=[],this.currentStatus="pending",this.renderPanel();let o=await z({interactionId:this.interactionId,userNote:e.trim(),autoCommit:this.autoCommitEnabled,snapshots:i});o.success||(this.currentStatus="failed",this.history=k(this.history,this.interactionId,"failed"),m(this.history),this.renderHub(),this.activityEvents.push({type:"status",interactionId:this.interactionId,status:"failed",message:o.error||"Failed to connect to bridge",timestamp:Date.now()}),this.renderPanel())}async handleSubmitAnswer(e,i,s){this.interactionId&&await W(this.interactionId,e,i,s)}async handleUndoRequest(e){let i=this.history.findIndex(o=>o.interactionId===e);if(i===-1)return;this.history[i].status="pending",m(this.history),this.renderHub(),(await J(e)).success?this.history=mt(this.history,e):this.history[i].status="failed",m(this.history),this.renderHub()}async handleUndoFromPanel(){this.interactionId&&await this.handleUndoRequest(this.interactionId)}async handleCommitRequest(){if(!this.interactionId)return;let e=this.history.findIndex(s=>s.interactionId===this.interactionId);(await V(this.interactionId)).success&&(e>=0&&(this.history[e].status="success",m(this.history),this.renderHub()),this.unfreeze())}};customElements.get("eyeglass-inspector")||customElements.define("eyeglass-inspector",H);function kt(){if(document.querySelector("eyeglass-inspector")){console.warn("[eyeglass] Inspector already initialized");return}let t=document.createElement("eyeglass-inspector");document.body.appendChild(t),console.log("[eyeglass] Inspector initialized. Hover over elements and click to annotate.")}typeof window<"u"&&typeof document<"u"&&(document.readyState==="loading"?document.addEventListener("DOMContentLoaded",kt):kt());export{H as EyeglassInspector,S as captureSnapshot,T as extractFrameworkInfo,kt as initInspector};
+    `,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)}applyTheme(){this.setAttribute("data-theme",this.themePreference)}toggleInspectorEnabled(){this.inspectorEnabled=!this.inspectorEnabled,ft(this.inspectorEnabled),this.inspectorEnabled||this.unfreeze(),this.updateCursor(),this.renderHub()}updateCursor(){this.cursorStyleElement=G(this.inspectorEnabled,this.frozen,this.multiSelectMode,this.cursorStyleElement)}showHighlight(e){if(!this.highlight)return;let i=e.getBoundingClientRect(),s=3;this.highlight.style.display="block",this.highlight.style.left=`${i.left-s}px`,this.highlight.style.top=`${i.top-s}px`,this.highlight.style.width=`${i.width+s*2}px`,this.highlight.style.height=`${i.height+s*2}px`}hideHighlight(){this.highlight&&(this.highlight.style.display="none"),this.currentElement=null}freeze(){this.currentElement&&(this.frozen=!0,this.currentSnapshot=S(this.currentElement),this.selectedElements=[this.currentElement],this.selectedSnapshots=[this.currentSnapshot],this.mode="input",this.activityEvents=[],this.currentStatus="idle",this.updateCursor(),this.renderPanel())}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=[],M({multiSelectHighlights:this.multiSelectHighlights},this.shadow),this.multiSelectHighlights=[],this.stopPhraseRotation(),this.hidePanel(),this.hideHighlight(),this.updateCursor(),q()}enterMultiSelectMode(){!this.frozen||this.multiSelectMode||(this.multiSelectMode=!0,this.multiSelectHighlights=w({multiSelectMode:!0,selectedElements:this.selectedElements,selectedSnapshots:this.selectedSnapshots,multiSelectHighlights:this.multiSelectHighlights,currentElement:this.currentElement,currentSnapshot:this.currentSnapshot},this.shadow),this.highlight&&(this.highlight.style.display="none"),this.updateCursor(),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]:[],M({multiSelectHighlights:this.multiSelectHighlights},this.shadow),this.multiSelectHighlights=[],this.currentElement&&this.showHighlight(this.currentElement),this.updateCursor(),this.renderPanel()}toggleInSelection(e){if(!this.multiSelectMode)return;let i=this.selectedElements.indexOf(e);if(i>=0)this.removeFromSelection(i);else{if(this.selectedElements.length>=5)return;let s=S(e);this.selectedElements.push(e),this.selectedSnapshots.push(s)}this.multiSelectHighlights=w({multiSelectMode:!0,selectedElements:this.selectedElements,selectedSnapshots:this.selectedSnapshots,multiSelectHighlights:this.multiSelectHighlights,currentElement:this.currentElement,currentSnapshot:this.currentSnapshot},this.shadow),this.highlight&&(this.highlight.style.display="none"),this.renderPanel()}removeFromSelection(e){if(!(e<0||e>=this.selectedElements.length)){if(this.selectedElements.length===1){this.exitMultiSelectMode();return}this.selectedElements.splice(e,1),this.selectedSnapshots.splice(e,1),this.multiSelectHighlights=w({multiSelectMode:!0,selectedElements:this.selectedElements,selectedSnapshots:this.selectedSnapshots,multiSelectHighlights:this.multiSelectHighlights,currentElement:this.currentElement,currentSnapshot:this.currentSnapshot},this.shadow),this.highlight&&(this.highlight.style.display="none"),this.renderPanel()}}renderHub(){this.hub||(this.hub=document.createElement("div"),this.hub.className="hub",this.shadow.appendChild(this.hub)),this.hubPage==="settings"?tt(this.hub,{themePreference:this.themePreference,autoCommitEnabled:this.autoCommitEnabled},{onBack:()=>{this.hubPage="main",this.renderHub()},onThemeChange:e=>{this.themePreference=e,St(e),this.applyTheme(),this.renderHub()},onAutoCommitToggle:()=>{this.autoCommitEnabled=!this.autoCommitEnabled,xt(this.autoCommitEnabled),this.renderHub()}}):Q(this.hub,{hubExpanded:this.hubExpanded,inspectorEnabled:this.inspectorEnabled,history:this.history},{onToggleExpanded:()=>{this.hubExpanded=!this.hubExpanded,this.renderHub()},onToggleEnabled:()=>this.toggleInspectorEnabled(),onOpenSettings:()=>{this.hubPage="settings",this.hubExpanded=!0,this.renderHub()},onUndo:e=>this.handleUndoRequest(e)})}renderPanel(){if(!this.currentSnapshot||!this.currentElement)return;let e=this.currentElement.getBoundingClientRect(),{framework:i}=this.currentSnapshot;this.panel||(this.panel=document.createElement("div"),this.panel.className="glass-panel",this.shadow.appendChild(this.panel));let s=it(e,this.mode,this.customPanelPosition);this.panel.style.left=`${s.x}px`,this.panel.style.top=`${s.y}px`;let o=i.componentName||this.currentSnapshot.tagName,r=i.filePath?i.filePath.split("/").slice(-2).join("/"):null;this.mode==="input"?ot(this.panel,{componentName:o,filePath:r,multiSelectMode:this.multiSelectMode,selectedSnapshots:this.selectedSnapshots},{onClose:()=>this.unfreeze(),onSubmit:a=>this.submit(a),onToggleMultiSelect:()=>{this.multiSelectMode?this.exitMultiSelectMode():this.enterMultiSelectMode()},onRemoveFromSelection:a=>this.removeFromSelection(a),onPanelDragStart:this.dragHandlers.handlePanelDragStart}):st(this.panel,{componentName:o,filePath:r,submittedSnapshots:this.submittedSnapshots,activityEvents:this.activityEvents,currentStatus:this.currentStatus,autoCommitEnabled:this.autoCommitEnabled,userNote:this._userNote,interactionId:this.interactionId,phraseIndex:this.phraseIndex},{onClose:()=>this.unfreeze(),onSubmitFollowUp:a=>this.submitFollowUp(a),onSubmitAnswer:(a,l,u)=>this.handleSubmitAnswer(a,l,u),onCommit:()=>this.handleCommitRequest(),onUndo:()=>this.handleUndoFromPanel(),onPanelDragStart:this.dragHandlers.handlePanelDragStart})}hidePanel(){this.panel&&(this.panel.remove(),this.panel=null)}startPhraseRotation(){this.phraseInterval||(this.phraseIndex=Math.floor(Math.random()*v.length),this.phraseInterval=window.setInterval(()=>{this.phraseIndex=(this.phraseIndex+1)%v.length,rt(this.panel,this.currentStatus,this.phraseIndex)},1e4))}stopPhraseRotation(){this.phraseInterval&&(window.clearInterval(this.phraseInterval),this.phraseInterval=null)}async submit(e){if(!e.trim()||this.selectedSnapshots.length===0&&!this.currentSnapshot)return;this.interactionId=A(),this._userNote=e.trim();let i=this.selectedSnapshots.length>0?this.selectedSnapshots:this.currentSnapshot?[this.currentSnapshot]:[];this.submittedSnapshots=[...i];let s=R(this.interactionId,e,i);this.history=F(this.history,s),m(this.history),this.renderHub();let o=this.multiSelectMode,r=[...this.selectedElements],a=[...this.selectedSnapshots];M({multiSelectHighlights:this.multiSelectHighlights},this.shadow),this.multiSelectHighlights=[],this.multiSelectMode=!1,this.mode="activity",this.activityEvents=[],this.currentStatus="pending",this.renderPanel();let l=await z({interactionId:this.interactionId,userNote:e.trim(),autoCommit:this.autoCommitEnabled,snapshots:i});l.success||(this.currentStatus="failed",this.history=k(this.history,this.interactionId,"failed"),m(this.history),this.renderHub(),this.activityEvents.push({type:"status",interactionId:this.interactionId,status:"failed",message:l.error||"Failed to connect to bridge",timestamp:Date.now()}),o&&r.length>1&&(this.multiSelectMode=!0,this.selectedElements=r,this.selectedSnapshots=a,this.mode="input",this.multiSelectHighlights=w({multiSelectMode:!0,selectedElements:this.selectedElements,selectedSnapshots:this.selectedSnapshots,multiSelectHighlights:this.multiSelectHighlights,currentElement:this.currentElement,currentSnapshot:this.currentSnapshot},this.shadow),this.highlight&&(this.highlight.style.display="none")),this.renderPanel())}async submitFollowUp(e){if(!e.trim()||this.submittedSnapshots.length===0)return;this.interactionId=A(),this._userNote=e.trim();let i=this.submittedSnapshots,s=R(this.interactionId,e,i);this.history=F(this.history,s),m(this.history),this.renderHub(),this.activityEvents=[],this.currentStatus="pending",this.renderPanel();let o=await z({interactionId:this.interactionId,userNote:e.trim(),autoCommit:this.autoCommitEnabled,snapshots:i});o.success||(this.currentStatus="failed",this.history=k(this.history,this.interactionId,"failed"),m(this.history),this.renderHub(),this.activityEvents.push({type:"status",interactionId:this.interactionId,status:"failed",message:o.error||"Failed to connect to bridge",timestamp:Date.now()}),this.renderPanel())}async handleSubmitAnswer(e,i,s){this.interactionId&&await J(this.interactionId,e,i,s)}async handleUndoRequest(e){let i=this.history.findIndex(o=>o.interactionId===e);if(i===-1)return;this.history[i].status="pending",m(this.history),this.renderHub(),(await V(e)).success?this.history=gt(this.history,e):this.history[i].status="failed",m(this.history),this.renderHub()}async handleUndoFromPanel(){this.interactionId&&await this.handleUndoRequest(this.interactionId)}async handleCommitRequest(){if(!this.interactionId)return;let e=this.history.findIndex(s=>s.interactionId===this.interactionId);(await Z(this.interactionId)).success&&(e>=0&&(this.history[e].status="success",m(this.history),this.renderHub()),this.unfreeze())}};customElements.get("eyeglass-inspector")||customElements.define("eyeglass-inspector",H);function Mt(){if(document.querySelector("eyeglass-inspector")){console.warn("[eyeglass] Inspector already initialized");return}let t=document.createElement("eyeglass-inspector");document.body.appendChild(t),console.log("[eyeglass] Inspector initialized. Hover over elements and click to annotate.")}typeof window<"u"&&typeof document<"u"&&(document.readyState==="loading"?document.addEventListener("DOMContentLoaded",Mt):Mt());export{H as EyeglassInspector,S as captureSnapshot,T as extractFrameworkInfo,Mt as initInspector};

package/dist/styles.d.ts

@@ -1,4 +1,4 @@
 /**
  * CSS styles for Eyeglass Inspector
  */
-export declare const STYLES = "\n:host {\n  all: initial;\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 2147483647;\n  pointer-events: none;\n  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n  font-size: 13px;\n  line-height: 1.5;\n  box-sizing: border-box;\n  --glass-bg: rgba(255, 255, 255, 0.88);\n  --glass-border: rgba(0, 0, 0, 0.25);\n  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);\n  --divider: rgba(0, 0, 0, 0.18);\n  --text-primary: #0f172a;\n  --text-secondary: #64748b;\n  --text-muted: #94a3b8;\n  --accent: #6366f1;\n  --accent-soft: rgba(99, 102, 241, 0.1);\n  --success: #10b981;\n  --error: #ef4444;\n  --border-radius: 16px;\n  --border-radius-sm: 10px;\n}\n\n:host([data-theme=\"dark\"]) {\n  --glass-bg: rgba(22, 27, 34, 0.95);\n  --glass-border: rgba(240, 246, 252, 0.1);\n  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.4);\n  --divider: rgba(240, 246, 252, 0.1);\n  --text-primary: #e6edf3;\n  --text-secondary: #8b949e;\n  --text-muted: #6e7681;\n  --accent: #3b82f6;\n  --accent-soft: rgba(59, 130, 246, 0.15);\n  --success: #3fb950;\n  --error: #f85149;\n}\n\n@media (prefers-color-scheme: dark) {\n  :host([data-theme=\"auto\"]) {\n    --glass-bg: rgba(22, 27, 34, 0.95);\n    --glass-border: rgba(240, 246, 252, 0.1);\n    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.4);\n    --divider: rgba(240, 246, 252, 0.1);\n    --text-primary: #e6edf3;\n    --text-secondary: #8b949e;\n    --text-muted: #6e7681;\n    --accent: #3b82f6;\n    --accent-soft: rgba(59, 130, 246, 0.15);\n    --success: #3fb950;\n    --error: #f85149;\n  }\n}\n\n/* Dark mode component overrides */\n:host([data-theme=\"dark\"]) .close-btn:hover,\n:host([data-theme=\"dark\"]) .toast-close:hover,\n:host([data-theme=\"dark\"]) .hub-header:hover,\n:host([data-theme=\"dark\"]) .hub-disable:hover,\n:host([data-theme=\"dark\"]) .hub-back-btn:hover,\n:host([data-theme=\"dark\"]) .hub-settings-btn:hover,\n:host([data-theme=\"dark\"]) .followup-done:hover {\n  background: rgba(255, 255, 255, 0.08);\n}\n\n:host([data-theme=\"dark\"]) .btn-secondary {\n  background: rgba(255, 255, 255, 0.08);\n}\n\n:host([data-theme=\"dark\"]) .btn-secondary:hover {\n  background: rgba(255, 255, 255, 0.12);\n}\n\n:host([data-theme=\"dark\"]) .input-field {\n  border-color: rgba(255, 255, 255, 0.1);\n  background: rgba(255, 255, 255, 0.08);\n}\n\n:host([data-theme=\"dark\"]) .input-field:focus {\n  background: rgba(255, 255, 255, 0.12);\n}\n\n:host([data-theme=\"dark\"]) .followup-input {\n  border-color: rgba(255, 255, 255, 0.1);\n  background: rgba(255, 255, 255, 0.08);\n}\n\n:host([data-theme=\"dark\"]) .followup-input:focus {\n  background: rgba(255, 255, 255, 0.12);\n}\n\n:host([data-theme=\"dark\"]) .toggle-switch {\n  background: #30363d;\n}\n\n:host([data-theme=\"dark\"]) .toggle-switch.active {\n  background: var(--accent);\n}\n\n:host([data-theme=\"dark\"]) .skeleton-icon,\n:host([data-theme=\"dark\"]) .skeleton-line {\n  background: linear-gradient(90deg, #21262d 25%, #30363d 50%, #21262d 75%);\n  background-size: 200% 100%;\n}\n\n:host([data-theme=\"dark\"]) .question-option {\n  border-color: rgba(255, 255, 255, 0.15);\n  background: rgba(255, 255, 255, 0.08);\n}\n\n:host([data-theme=\"dark\"]) .question-option:hover {\n  background: var(--accent-soft);\n}\n\n:host([data-theme=\"dark\"]) .user-request {\n  background: rgba(255, 255, 255, 0.03);\n}\n\n:host([data-theme=\"dark\"]) .hub-item:hover {\n  background: rgba(255, 255, 255, 0.04);\n}\n\n:host([data-theme=\"dark\"]) .selected-list,\n:host([data-theme=\"dark\"]) .multi-mode-hint {\n  background: rgba(255, 255, 255, 0.03);\n}\n\n:host([data-theme=\"dark\"]) .followup-area {\n  background: rgba(63, 185, 80, 0.1);\n}\n\n:host([data-theme=\"dark\"]) .panel-footer.done {\n  background: rgba(63, 185, 80, 0.12);\n}\n\n@media (prefers-color-scheme: dark) {\n  :host([data-theme=\"auto\"]) .close-btn:hover,\n  :host([data-theme=\"auto\"]) .toast-close:hover,\n  :host([data-theme=\"auto\"]) .hub-header:hover,\n  :host([data-theme=\"auto\"]) .hub-disable:hover,\n  :host([data-theme=\"auto\"]) .hub-back-btn:hover,\n  :host([data-theme=\"auto\"]) .hub-settings-btn:hover,\n  :host([data-theme=\"auto\"]) .followup-done:hover {\n    background: rgba(255, 255, 255, 0.08);\n  }\n\n  :host([data-theme=\"auto\"]) .btn-secondary {\n    background: rgba(255, 255, 255, 0.08);\n  }\n\n  :host([data-theme=\"auto\"]) .btn-secondary:hover {\n    background: rgba(255, 255, 255, 0.12);\n  }\n\n  :host([data-theme=\"auto\"]) .input-field {\n    border-color: rgba(255, 255, 255, 0.1);\n    background: rgba(255, 255, 255, 0.08);\n  }\n\n  :host([data-theme=\"auto\"]) .input-field:focus {\n    background: rgba(255, 255, 255, 0.12);\n  }\n\n  :host([data-theme=\"auto\"]) .followup-input {\n    border-color: rgba(255, 255, 255, 0.1);\n    background: rgba(255, 255, 255, 0.08);\n  }\n\n  :host([data-theme=\"auto\"]) .followup-input:focus {\n    background: rgba(255, 255, 255, 0.12);\n  }\n\n  :host([data-theme=\"auto\"]) .toggle-switch {\n    background: #30363d;\n  }\n\n  :host([data-theme=\"auto\"]) .toggle-switch.active {\n    background: var(--accent);\n  }\n\n  :host([data-theme=\"auto\"]) .skeleton-icon,\n  :host([data-theme=\"auto\"]) .skeleton-line {\n    background: linear-gradient(90deg, #21262d 25%, #30363d 50%, #21262d 75%);\n    background-size: 200% 100%;\n  }\n\n  :host([data-theme=\"auto\"]) .question-option {\n    border-color: rgba(255, 255, 255, 0.15);\n    background: rgba(255, 255, 255, 0.08);\n  }\n\n  :host([data-theme=\"auto\"]) .question-option:hover {\n    background: var(--accent-soft);\n  }\n\n  :host([data-theme=\"auto\"]) .user-request {\n    background: rgba(255, 255, 255, 0.03);\n  }\n\n  :host([data-theme=\"auto\"]) .hub-item:hover {\n    background: rgba(255, 255, 255, 0.04);\n  }\n\n  :host([data-theme=\"auto\"]) .selected-list,\n  :host([data-theme=\"auto\"]) .multi-mode-hint {\n    background: rgba(255, 255, 255, 0.03);\n  }\n\n  :host([data-theme=\"auto\"]) .followup-area {\n    background: rgba(63, 185, 80, 0.1);\n  }\n\n  :host([data-theme=\"auto\"]) .panel-footer.done {\n    background: rgba(63, 185, 80, 0.12);\n  }\n}\n\n*, *::before, *::after {\n  box-sizing: border-box;\n}\n\n/* Highlight overlay */\n.highlight {\n  position: absolute;\n  z-index: 2147483640;\n  border: 2px solid var(--accent);\n  background: rgba(99, 102, 241, 0.06);\n  pointer-events: none;\n  border-radius: 6px;\n  transition: all 0.1s ease-out;\n  box-shadow:\n    0 0 0 3px rgba(99, 102, 241, 0.08),\n    0 2px 8px rgba(99, 102, 241, 0.1);\n}\n\n.highlight.no-transition {\n  transition: none;\n}\n\n/* Glass Panel */\n.glass-panel {\n  position: absolute;\n  z-index: 2147483647;\n  background: var(--glass-bg);\n  backdrop-filter: blur(20px) saturate(180%);\n  -webkit-backdrop-filter: blur(20px) saturate(180%);\n  border: 1px solid var(--glass-border);\n  border-radius: var(--border-radius);\n  box-shadow: var(--glass-shadow);\n  pointer-events: auto;\n  width: 340px;\n  overflow: hidden;\n  animation: panelIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);\n  cursor: default;\n}\n\n.glass-panel *, .glass-panel *::before, .glass-panel *::after {\n  cursor: inherit;\n}\n\n.glass-panel button, .glass-panel input {\n  cursor: pointer;\n}\n\n.glass-panel input[type=\"text\"] {\n  cursor: text;\n}\n\n@keyframes panelIn {\n  from {\n    opacity: 0;\n    transform: translateY(8px) scale(0.96);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n  }\n}\n\n/* Panel Header */\n.panel-header {\n  padding: 14px 16px;\n  border-bottom: 1px solid var(--divider);\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  cursor: grab;\n  user-select: none;\n}\n\n.panel-header:active {\n  cursor: grabbing;\n}\n\n.component-tag {\n  font-family: 'SF Mono', 'Fira Code', monospace;\n  font-size: 12px;\n  font-weight: 500;\n  color: var(--accent);\n  background: var(--accent-soft);\n  padding: 4px 10px;\n  border-radius: 6px;\n  letter-spacing: -0.01em;\n}\n\n.file-path {\n  font-size: 11px;\n  color: var(--text-muted);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  flex: 1;\n}\n\n.close-btn {\n  width: 24px;\n  height: 24px;\n  border: none;\n  background: transparent;\n  color: var(--text-muted);\n  cursor: pointer;\n  border-radius: 6px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all 0.15s;\n  font-size: 18px;\n  line-height: 1;\n}\n\n.close-btn:hover {\n  background: rgba(0, 0, 0, 0.05);\n  color: var(--text-secondary);\n}\n\n/* User Request */\n.user-request {\n  padding: 12px 16px;\n  background: rgba(0, 0, 0, 0.02);\n  border-bottom: 1px solid var(--divider);\n}\n\n.user-request-label {\n  font-size: 10px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  color: var(--text-muted);\n  margin-bottom: 4px;\n}\n\n.user-request-text {\n  color: var(--text-primary);\n  font-weight: 500;\n  line-height: 1.4;\n  display: -webkit-box;\n  -webkit-line-clamp: 3;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  white-space: pre-wrap;\n  word-wrap: break-word;\n}\n\n/* Input Mode */\n.input-area {\n  padding: 12px 16px 16px;\n}\n\n.input-field {\n  width: 100%;\n  padding: 10px 14px;\n  border: 1px solid rgba(0, 0, 0, 0.08);\n  border-radius: var(--border-radius-sm);\n  font-size: 13px;\n  font-family: inherit;\n  background: rgba(255, 255, 255, 0.6);\n  color: var(--text-primary);\n  outline: none;\n  transition: all 0.15s;\n  min-height: 60px;\n  max-height: 150px;\n  resize: none;\n  line-height: 1.4;\n  overflow-y: auto;\n}\n\n.input-field::placeholder {\n  color: var(--text-muted);\n}\n\n.input-field:focus {\n  border-color: var(--accent);\n  box-shadow: 0 0 0 3px var(--accent-soft);\n  background: white;\n}\n\n.btn-row {\n  display: flex;\n  gap: 8px;\n  margin-top: 10px;\n}\n\n.btn {\n  flex: 1;\n  padding: 9px 14px;\n  border: none;\n  border-radius: var(--border-radius-sm);\n  font-size: 12px;\n  font-weight: 600;\n  font-family: inherit;\n  cursor: pointer;\n  transition: all 0.15s;\n}\n\n.btn-primary {\n  background: var(--accent);\n  color: white;\n}\n\n.btn-primary:hover {\n  background: #4f46e5;\n  transform: translateY(-1px);\n}\n\n.btn-secondary {\n  background: rgba(0, 0, 0, 0.04);\n  color: var(--text-secondary);\n}\n\n.btn-secondary:hover {\n  background: rgba(0, 0, 0, 0.08);\n}\n\n/* Activity Feed */\n.activity-feed {\n  max-height: 280px;\n  overflow-y: auto;\n  padding: 8px 0;\n}\n\n.activity-feed::-webkit-scrollbar {\n  width: 6px;\n}\n\n.activity-feed::-webkit-scrollbar-track {\n  background: transparent;\n}\n\n.activity-feed::-webkit-scrollbar-thumb {\n  background: rgba(0, 0, 0, 0.1);\n  border-radius: 3px;\n}\n\n.activity-item {\n  padding: 8px 16px;\n  display: flex;\n  gap: 10px;\n  align-items: flex-start;\n  animation: itemIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n@keyframes itemIn {\n  from {\n    opacity: 0;\n    transform: translateX(-8px);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n\n.activity-icon {\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  font-size: 10px;\n}\n\n.activity-icon.status { background: var(--accent-soft); color: var(--accent); }\n.activity-icon.thought { background: rgba(139, 92, 246, 0.1); color: #8b5cf6; }\n.activity-icon.action { background: rgba(14, 165, 233, 0.1); color: #0ea5e9; }\n.activity-icon.question { background: rgba(245, 158, 11, 0.1); color: #f59e0b; }\n.activity-icon.success { background: rgba(16, 185, 129, 0.1); color: var(--success); }\n.activity-icon.error { background: rgba(239, 68, 68, 0.1); color: var(--error); }\n\n.activity-content {\n  flex: 1;\n  min-width: 0;\n}\n\n.activity-text {\n  color: var(--text-primary);\n  word-wrap: break-word;\n}\n\n.activity-text.muted {\n  color: var(--text-secondary);\n}\n\n.activity-target {\n  font-family: 'SF Mono', 'Fira Code', monospace;\n  font-size: 11px;\n  color: var(--text-muted);\n  margin-top: 2px;\n}\n\n/* Question UI */\n.question-box {\n  background: rgba(245, 158, 11, 0.06);\n  border: 1px solid rgba(245, 158, 11, 0.15);\n  border-radius: var(--border-radius-sm);\n  padding: 12px;\n  margin: 8px 16px;\n  animation: questionIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n@keyframes questionIn {\n  from {\n    opacity: 0;\n    transform: scale(0.95);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n\n.question-text {\n  font-weight: 500;\n  color: var(--text-primary);\n  margin-bottom: 10px;\n}\n\n.question-options {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n}\n\n.question-option {\n  padding: 7px 14px;\n  border: 1px solid rgba(0, 0, 0, 0.1);\n  border-radius: 8px;\n  background: white;\n  font-size: 12px;\n  font-weight: 500;\n  font-family: inherit;\n  color: var(--text-primary);\n  cursor: pointer;\n  transition: all 0.15s;\n}\n\n.question-option:hover {\n  border-color: var(--accent);\n  background: var(--accent-soft);\n  color: var(--accent);\n}\n\n/* Skeleton loader */\n.skeleton-item {\n  padding: 8px 16px;\n  display: flex;\n  gap: 10px;\n  align-items: center;\n}\n\n.skeleton-icon {\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);\n  background-size: 200% 100%;\n  animation: shimmer 1.5s infinite;\n}\n\n.skeleton-line {\n  height: 14px;\n  border-radius: 4px;\n  background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);\n  background-size: 200% 100%;\n  animation: shimmer 1.5s infinite;\n  width: 60%;\n}\n\n@keyframes shimmer {\n  0% { background-position: 200% 0; }\n  100% { background-position: -200% 0; }\n}\n\n/* Status Footer */\n.panel-footer {\n  padding: 10px 16px;\n  border-top: 1px solid var(--divider);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.status-indicator {\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  background: var(--text-muted);\n}\n\n.status-indicator.pending {\n  background: var(--accent);\n  animation: pulse 1.5s ease-in-out infinite;\n}\n\n.status-indicator.fixing {\n  background: #0ea5e9;\n  animation: pulse 1s ease-in-out infinite;\n}\n\n.status-indicator.success { background: var(--success); }\n.status-indicator.failed { background: var(--error); }\n\n@keyframes pulse {\n  0%, 100% { opacity: 1; transform: scale(1); }\n  50% { opacity: 0.5; transform: scale(0.9); }\n}\n\n.status-text {\n  font-size: 12px;\n  color: var(--text-secondary);\n  flex: 1;\n}\n\n/* Done state */\n.panel-footer.done {\n  background: rgba(16, 185, 129, 0.06);\n}\n\n.panel-footer.done .status-text {\n  color: var(--success);\n  font-weight: 500;\n}\n\n/* Result Toast - shows after page reload */\n.result-toast {\n  position: fixed;\n  bottom: 24px;\n  right: 24px;\n  background: var(--glass-bg);\n  backdrop-filter: blur(20px) saturate(180%);\n  -webkit-backdrop-filter: blur(20px) saturate(180%);\n  border: 1px solid var(--glass-border);\n  border-radius: var(--border-radius);\n  box-shadow: var(--glass-shadow);\n  padding: 14px 18px;\n  pointer-events: auto;\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  animation: toastIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);\n  max-width: 320px;\n}\n\n@keyframes toastIn {\n  from {\n    opacity: 0;\n    transform: translateY(16px) scale(0.95);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n  }\n}\n\n.toast-icon {\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 16px;\n  flex-shrink: 0;\n}\n\n.toast-icon.success {\n  background: rgba(16, 185, 129, 0.15);\n  color: var(--success);\n}\n\n.toast-icon.failed {\n  background: rgba(239, 68, 68, 0.15);\n  color: var(--error);\n}\n\n.toast-content {\n  flex: 1;\n  min-width: 0;\n}\n\n.toast-title {\n  font-weight: 600;\n  color: var(--text-primary);\n  margin-bottom: 2px;\n}\n\n.toast-message {\n  font-size: 12px;\n  color: var(--text-secondary);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.toast-close {\n  width: 24px;\n  height: 24px;\n  border: none;\n  background: transparent;\n  color: var(--text-muted);\n  cursor: pointer;\n  border-radius: 6px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 16px;\n}\n\n.toast-close:hover {\n  background: rgba(0, 0, 0, 0.05);\n  color: var(--text-secondary);\n}\n\n/* Hub - Request History */\n.hub {\n  position: fixed;\n  bottom: 16px;\n  left: 16px;\n  background: var(--glass-bg);\n  backdrop-filter: blur(20px) saturate(180%);\n  -webkit-backdrop-filter: blur(20px) saturate(180%);\n  border: 1px solid var(--glass-border);\n  border-radius: 10px;\n  box-shadow: var(--glass-shadow);\n  pointer-events: auto;\n  min-width: 36px;\n  max-width: 200px;\n  overflow: hidden;\n  animation: hubIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);\n  cursor: default;\n}\n\n.hub *, .hub *::before, .hub *::after {\n  cursor: inherit;\n}\n\n.hub button {\n  cursor: pointer;\n}\n\n@keyframes hubIn {\n  from {\n    opacity: 0;\n    transform: translateY(8px) scale(0.96);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n  }\n}\n\n.hub.disabled.collapsed {\n  opacity: 0.5;\n}\n\n.hub-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 6px;\n  padding: 6px 8px;\n  cursor: pointer;\n  user-select: none;\n}\n\n.hub-header:hover {\n  background: rgba(0, 0, 0, 0.03);\n}\n\n.hub-header-left {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.hub-logo {\n  width: 20px;\n  height: 20px;\n  border-radius: 5px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 11px;\n  color: white;\n  flex-shrink: 0;\n}\n\n.hub-title {\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--text-primary);\n  flex: 1;\n}\n\n.hub-badge {\n  font-size: 9px;\n  font-weight: 600;\n  background: var(--accent);\n  color: white;\n  padding: 1px 5px;\n  border-radius: 8px;\n  min-width: 14px;\n  text-align: center;\n}\n\n.hub-toggle {\n  width: 16px;\n  height: 16px;\n  border: none;\n  background: transparent;\n  color: var(--text-muted);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 10px;\n  transition: transform 0.2s;\n}\n\n.hub-toggle.expanded {\n  transform: rotate(180deg);\n}\n\n.hub-disable {\n  width: 20px;\n  height: 20px;\n  border: none;\n  background: transparent;\n  color: var(--text-muted);\n  cursor: pointer;\n  border-radius: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all 0.15s;\n  flex-shrink: 0;\n}\n\n.hub-disable:hover {\n  background: rgba(0, 0, 0, 0.05);\n  color: var(--text-secondary);\n}\n\n.hub-disable.active {\n  color: var(--accent);\n}\n\n.hub-disable svg {\n  width: 14px;\n  height: 14px;\n}\n\n.hub-content {\n  border-top: 1px solid var(--divider);\n  max-height: 0;\n  overflow: hidden;\n  transition: max-height 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.hub-content.expanded {\n  max-height: 320px;\n}\n\n.hub-list {\n  max-height: 200px;\n  overflow-y: auto;\n  padding: 4px 0;\n}\n\n.hub-list::-webkit-scrollbar {\n  width: 6px;\n}\n\n.hub-list::-webkit-scrollbar-track {\n  background: transparent;\n}\n\n.hub-list::-webkit-scrollbar-thumb {\n  background: rgba(0, 0, 0, 0.1);\n  border-radius: 3px;\n}\n\n.hub-item {\n  padding: 5px 8px;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.hub-item:hover {\n  background: rgba(0, 0, 0, 0.02);\n}\n\n.hub-item-status {\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  flex-shrink: 0;\n}\n\n.hub-item-status.pending { background: var(--accent); animation: pulse 1.5s ease-in-out infinite; }\n.hub-item-status.fixing { background: #0ea5e9; animation: pulse 1s ease-in-out infinite; }\n.hub-item-status.success { background: var(--success); }\n.hub-item-status.failed { background: var(--error); }\n\n.hub-item-content {\n  flex: 1;\n  min-width: 0;\n}\n\n.hub-item-component {\n  font-size: 10px;\n  font-weight: 500;\n  color: var(--text-secondary);\n}\n\n.hub-item-note {\n  font-size: 11px;\n  color: var(--text-primary);\n  word-wrap: break-word;\n}\n\n.hub-item-undo {\n  width: 18px;\n  height: 18px;\n  border: none;\n  background: transparent;\n  color: var(--text-muted);\n  cursor: pointer;\n  border-radius: 3px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 10px;\n  opacity: 0;\n  transition: all 0.15s;\n  flex-shrink: 0;\n}\n\n.hub-item:hover .hub-item-undo {\n  opacity: 1;\n}\n\n.hub-item-undo:hover {\n  background: rgba(239, 68, 68, 0.1);\n  color: var(--error);\n}\n\n.hub-empty {\n  padding: 10px 8px;\n  text-align: center;\n  font-size: 10px;\n  color: var(--text-muted);\n}\n\n.hub-settings-btn {\n  width: 20px;\n  height: 20px;\n  border: none;\n  background: transparent;\n  color: var(--text-muted);\n  cursor: pointer;\n  border-radius: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all 0.15s;\n  flex-shrink: 0;\n}\n\n.hub-settings-btn:hover {\n  background: rgba(0, 0, 0, 0.05);\n  color: var(--text-secondary);\n}\n\n.hub-settings-btn svg {\n  width: 12px;\n  height: 12px;\n}\n\n/* Settings Page */\n.hub-settings-page {\n  padding: 8px 0;\n}\n\n.hub-settings-header {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 8px 8px;\n  border-bottom: 1px solid var(--divider);\n}\n\n.hub-back-btn {\n  width: 20px;\n  height: 20px;\n  border: none;\n  background: transparent;\n  color: var(--text-secondary);\n  cursor: pointer;\n  border-radius: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all 0.15s;\n}\n\n.hub-back-btn:hover {\n  background: rgba(0, 0, 0, 0.05);\n  color: var(--text-primary);\n}\n\n.hub-settings-title {\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--text-primary);\n}\n\n.hub-settings-list {\n  padding: 8px;\n}\n\n.hub-setting-row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n  padding: 6px 0;\n}\n\n.hub-setting-row:not(:last-child) {\n  border-bottom: 1px solid var(--divider);\n  padding-bottom: 10px;\n  margin-bottom: 4px;\n}\n\n.hub-setting-info {\n  flex: 1;\n}\n\n.hub-setting-label {\n  font-size: 11px;\n  font-weight: 500;\n  color: var(--text-primary);\n}\n\n.hub-setting-desc {\n  font-size: 9px;\n  color: var(--text-muted);\n  margin-top: 2px;\n}\n\n.hub-shortcuts-section {\n  margin-top: 12px;\n  padding: 12px;\n  padding-top: 12px;\n  border-top: 1px solid var(--divider);\n}\n\n.hub-shortcuts-title {\n  font-size: 10px;\n  font-weight: 600;\n  color: var(--text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  margin-bottom: 8px;\n}\n\n.hub-shortcuts-list {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.hub-shortcut-row {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.hub-shortcut-label {\n  font-size: 11px;\n  color: var(--text-secondary);\n}\n\n.hub-shortcut-keys {\n  display: flex;\n  gap: 4px;\n  align-items: center;\n}\n\n.hub-shortcut-keys kbd {\n  display: inline-block;\n  padding: 2px 6px;\n  font-size: 10px;\n  font-family: inherit;\n  font-weight: 500;\n  color: var(--text-secondary);\n  background: rgba(0, 0, 0, 0.06);\n  border: 1px solid rgba(0, 0, 0, 0.1);\n  border-radius: 4px;\n}\n\n:host([data-theme=\"dark\"]) .hub-shortcut-keys kbd {\n  background: rgba(255, 255, 255, 0.1);\n  border-color: rgba(255, 255, 255, 0.15);\n}\n\n@media (prefers-color-scheme: dark) {\n  :host([data-theme=\"auto\"]) .hub-shortcut-keys kbd {\n    background: rgba(255, 255, 255, 0.1);\n    border-color: rgba(255, 255, 255, 0.15);\n  }\n}\n\n.theme-selector {\n  display: flex;\n  background: rgba(0, 0, 0, 0.04);\n  border-radius: 6px;\n  padding: 2px;\n  gap: 2px;\n}\n\n:host([data-theme=\"dark\"]) .theme-selector {\n  background: rgba(255, 255, 255, 0.08);\n}\n\n@media (prefers-color-scheme: dark) {\n  :host([data-theme=\"auto\"]) .theme-selector {\n    background: rgba(255, 255, 255, 0.08);\n  }\n}\n\n.theme-btn {\n  padding: 4px 8px;\n  border: none;\n  background: transparent;\n  border-radius: 4px;\n  font-size: 12px;\n  cursor: pointer;\n  transition: all 0.15s;\n  color: var(--text-muted);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.theme-btn:hover {\n  color: var(--text-secondary);\n}\n\n.theme-btn.active {\n  background: var(--glass-bg);\n  color: var(--text-primary);\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n\n.theme-btn svg {\n  width: 14px;\n  height: 14px;\n}\n\n.hub-button-group {\n  display: flex;\n}\n\n/* Collapsed hub (minimal) */\n.hub.collapsed .hub-title,\n.hub.collapsed .hub-toggle {\n  display: none;\n}\n\n.hub.collapsed .hub-header {\n  padding: 5px;\n}\n\n.hub.collapsed .hub-header-left {\n  gap: 4px;\n}\n\n.toggle-switch {\n  position: relative;\n  width: 32px;\n  height: 18px;\n  background: #cbd5e1;\n  border-radius: 9px;\n  cursor: pointer;\n  transition: background 0.2s;\n  border: none;\n  padding: 0;\n}\n\n.toggle-switch.active {\n  background: var(--accent);\n}\n\n.toggle-switch::after {\n  content: '';\n  position: absolute;\n  top: 2px;\n  left: 2px;\n  width: 14px;\n  height: 14px;\n  background: white;\n  border-radius: 50%;\n  transition: transform 0.2s;\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);\n}\n\n.toggle-switch.active::after {\n  transform: translateX(14px);\n}\n\n/* Success action buttons */\n.success-actions {\n  display: flex;\n  gap: 6px;\n  margin-left: auto;\n}\n\n.action-btn {\n  padding: 4px 10px;\n  border: none;\n  border-radius: 6px;\n  font-size: 11px;\n  font-weight: 600;\n  font-family: inherit;\n  cursor: pointer;\n  transition: all 0.15s;\n}\n\n.action-btn-commit {\n  background: var(--success);\n  color: white;\n}\n\n.action-btn-commit:hover {\n  background: #059669;\n}\n\n.action-btn-undo {\n  background: rgba(239, 68, 68, 0.1);\n  color: var(--error);\n}\n\n.action-btn-undo:hover {\n  background: rgba(239, 68, 68, 0.2);\n}\n\n/* Follow-up input */\n.followup-area {\n  padding: 12px;\n  border-top: 1px solid var(--divider);\n  background: rgba(16, 185, 129, 0.04);\n}\n\n.followup-row {\n  display: flex;\n  gap: 8px;\n  align-items: flex-end;\n}\n\n.followup-input {\n  flex: 1;\n  padding: 8px 12px;\n  border: 1px solid rgba(0, 0, 0, 0.08);\n  border-radius: var(--border-radius-sm);\n  font-size: 12px;\n  font-family: inherit;\n  background: rgba(255, 255, 255, 0.8);\n  color: var(--text-primary);\n  outline: none;\n  transition: all 0.15s;\n  min-height: 36px;\n  max-height: 100px;\n  resize: none;\n  line-height: 1.4;\n  overflow-y: auto;\n}\n\n.followup-input::placeholder {\n  color: var(--text-muted);\n}\n\n.followup-input:focus {\n  border-color: var(--accent);\n  box-shadow: 0 0 0 2px var(--accent-soft);\n  background: white;\n}\n\n.followup-send {\n  flex-shrink: 0;\n  padding: 9px 16px;\n  border: 1px solid transparent;\n  border-radius: var(--border-radius-sm);\n  background: var(--accent);\n  color: white;\n  font-size: 12px;\n  font-weight: 600;\n  font-family: inherit;\n  cursor: pointer;\n  transition: all 0.15s;\n}\n\n.followup-send:hover {\n  background: #4f46e5;\n}\n\n.followup-send:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.followup-done {\n  flex-shrink: 0;\n  width: 32px;\n  height: 32px;\n  padding: 0;\n  border: 1px solid var(--divider);\n  border-radius: var(--border-radius-sm);\n  background: transparent;\n  color: var(--text-secondary);\n  font-size: 14px;\n  font-family: inherit;\n  cursor: pointer;\n  transition: all 0.15s;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.followup-done:hover {\n  background: rgba(0, 0, 0, 0.04);\n}\n\n/* Multi-select styles */\n.highlight.multi {\n  border-style: dashed;\n  border-width: 2px;\n  box-shadow:\n    0 0 0 2px rgba(99, 102, 241, 0.06),\n    0 2px 6px rgba(99, 102, 241, 0.08);\n}\n\n.highlight-badge {\n  position: absolute;\n  top: -10px;\n  left: -10px;\n  width: 20px;\n  height: 20px;\n  background: var(--accent);\n  color: white;\n  font-size: 11px;\n  font-weight: 600;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n}\n\n.multi-select-icon {\n  width: 24px;\n  height: 24px;\n  border: none;\n  background: transparent;\n  color: var(--text-muted);\n  cursor: pointer;\n  border-radius: 6px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all 0.15s;\n  font-size: 16px;\n  line-height: 1;\n}\n\n.multi-select-icon:hover {\n  background: var(--accent-soft);\n  color: var(--accent);\n}\n\n.multi-select-icon.active {\n  background: var(--accent);\n  color: white;\n}\n\n.selected-list {\n  padding: 8px 16px;\n  border-bottom: 1px solid var(--divider);\n  background: rgba(0, 0, 0, 0.02);\n}\n\n.selected-list-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 8px;\n}\n\n.selected-count {\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--text-secondary);\n}\n\n.selected-chips {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n}\n\n.selected-chip {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  padding: 4px 8px;\n  background: var(--accent-soft);\n  border-radius: 6px;\n  font-size: 11px;\n  color: var(--accent);\n  font-weight: 500;\n}\n\n.selected-chip-number {\n  width: 16px;\n  height: 16px;\n  background: var(--accent);\n  color: white;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 10px;\n  font-weight: 600;\n}\n\n.selected-chip-remove {\n  width: 16px;\n  height: 16px;\n  border: none;\n  background: transparent;\n  color: var(--accent);\n  cursor: pointer;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 14px;\n  line-height: 1;\n  opacity: 0.7;\n  transition: all 0.15s;\n  padding: 0;\n}\n\n.selected-chip-remove:hover {\n  opacity: 1;\n  background: rgba(99, 102, 241, 0.2);\n}\n\n.multi-mode-hint {\n  padding: 8px 16px;\n  background: var(--accent-soft);\n  border-bottom: 1px solid var(--divider);\n  font-size: 11px;\n  color: var(--accent);\n  text-align: center;\n}\n";
+export declare const STYLES = "\n:host {\n  all: initial;\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 2147483647;\n  pointer-events: none;\n  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n  font-size: 13px;\n  line-height: 1.5;\n  box-sizing: border-box;\n  --glass-bg: rgba(255, 255, 255, 0.88);\n  --glass-border: rgba(0, 0, 0, 0.25);\n  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);\n  --divider: rgba(0, 0, 0, 0.18);\n  --text-primary: #0f172a;\n  --text-secondary: #64748b;\n  --text-muted: #94a3b8;\n  --accent: #6366f1;\n  --accent-soft: rgba(99, 102, 241, 0.1);\n  --success: #10b981;\n  --error: #ef4444;\n  --border-radius: 16px;\n  --border-radius-sm: 10px;\n}\n\n:host([data-theme=\"dark\"]) {\n  --glass-bg: rgba(22, 27, 34, 0.95);\n  --glass-border: rgba(240, 246, 252, 0.1);\n  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.4);\n  --divider: rgba(240, 246, 252, 0.1);\n  --text-primary: #e6edf3;\n  --text-secondary: #8b949e;\n  --text-muted: #6e7681;\n  --accent: #3b82f6;\n  --accent-soft: rgba(59, 130, 246, 0.15);\n  --success: #3fb950;\n  --error: #f85149;\n}\n\n@media (prefers-color-scheme: dark) {\n  :host([data-theme=\"auto\"]) {\n    --glass-bg: rgba(22, 27, 34, 0.95);\n    --glass-border: rgba(240, 246, 252, 0.1);\n    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.4);\n    --divider: rgba(240, 246, 252, 0.1);\n    --text-primary: #e6edf3;\n    --text-secondary: #8b949e;\n    --text-muted: #6e7681;\n    --accent: #3b82f6;\n    --accent-soft: rgba(59, 130, 246, 0.15);\n    --success: #3fb950;\n    --error: #f85149;\n  }\n}\n\n/* Dark mode component overrides */\n:host([data-theme=\"dark\"]) .close-btn:hover,\n:host([data-theme=\"dark\"]) .toast-close:hover,\n:host([data-theme=\"dark\"]) .hub-header:hover,\n:host([data-theme=\"dark\"]) .hub-disable:hover,\n:host([data-theme=\"dark\"]) .hub-back-btn:hover,\n:host([data-theme=\"dark\"]) .hub-settings-btn:hover,\n:host([data-theme=\"dark\"]) .followup-done:hover {\n  background: rgba(255, 255, 255, 0.08);\n}\n\n:host([data-theme=\"dark\"]) .btn-secondary {\n  background: rgba(255, 255, 255, 0.08);\n}\n\n:host([data-theme=\"dark\"]) .btn-secondary:hover {\n  background: rgba(255, 255, 255, 0.12);\n}\n\n:host([data-theme=\"dark\"]) .input-field {\n  border-color: rgba(255, 255, 255, 0.1);\n  background: rgba(255, 255, 255, 0.08);\n}\n\n:host([data-theme=\"dark\"]) .input-field:focus {\n  background: rgba(255, 255, 255, 0.12);\n}\n\n:host([data-theme=\"dark\"]) .followup-input {\n  border-color: rgba(255, 255, 255, 0.1);\n  background: rgba(255, 255, 255, 0.08);\n}\n\n:host([data-theme=\"dark\"]) .followup-input:focus {\n  background: rgba(255, 255, 255, 0.12);\n}\n\n:host([data-theme=\"dark\"]) .toggle-switch {\n  background: #30363d;\n}\n\n:host([data-theme=\"dark\"]) .toggle-switch.active {\n  background: var(--accent);\n}\n\n:host([data-theme=\"dark\"]) .skeleton-icon,\n:host([data-theme=\"dark\"]) .skeleton-line {\n  background: linear-gradient(90deg, #21262d 25%, #30363d 50%, #21262d 75%);\n  background-size: 200% 100%;\n}\n\n:host([data-theme=\"dark\"]) .question-option {\n  border-color: rgba(255, 255, 255, 0.15);\n  background: rgba(255, 255, 255, 0.08);\n}\n\n:host([data-theme=\"dark\"]) .question-option:hover {\n  background: var(--accent-soft);\n}\n\n:host([data-theme=\"dark\"]) .user-request {\n  background: rgba(255, 255, 255, 0.03);\n}\n\n:host([data-theme=\"dark\"]) .hub-item:hover {\n  background: rgba(255, 255, 255, 0.04);\n}\n\n:host([data-theme=\"dark\"]) .selected-list,\n:host([data-theme=\"dark\"]) .multi-mode-hint {\n  background: rgba(255, 255, 255, 0.03);\n}\n\n:host([data-theme=\"dark\"]) .followup-area {\n  background: rgba(63, 185, 80, 0.1);\n}\n\n:host([data-theme=\"dark\"]) .panel-footer.done {\n  background: rgba(63, 185, 80, 0.12);\n}\n\n@media (prefers-color-scheme: dark) {\n  :host([data-theme=\"auto\"]) .close-btn:hover,\n  :host([data-theme=\"auto\"]) .toast-close:hover,\n  :host([data-theme=\"auto\"]) .hub-header:hover,\n  :host([data-theme=\"auto\"]) .hub-disable:hover,\n  :host([data-theme=\"auto\"]) .hub-back-btn:hover,\n  :host([data-theme=\"auto\"]) .hub-settings-btn:hover,\n  :host([data-theme=\"auto\"]) .followup-done:hover {\n    background: rgba(255, 255, 255, 0.08);\n  }\n\n  :host([data-theme=\"auto\"]) .btn-secondary {\n    background: rgba(255, 255, 255, 0.08);\n  }\n\n  :host([data-theme=\"auto\"]) .btn-secondary:hover {\n    background: rgba(255, 255, 255, 0.12);\n  }\n\n  :host([data-theme=\"auto\"]) .input-field {\n    border-color: rgba(255, 255, 255, 0.1);\n    background: rgba(255, 255, 255, 0.08);\n  }\n\n  :host([data-theme=\"auto\"]) .input-field:focus {\n    background: rgba(255, 255, 255, 0.12);\n  }\n\n  :host([data-theme=\"auto\"]) .followup-input {\n    border-color: rgba(255, 255, 255, 0.1);\n    background: rgba(255, 255, 255, 0.08);\n  }\n\n  :host([data-theme=\"auto\"]) .followup-input:focus {\n    background: rgba(255, 255, 255, 0.12);\n  }\n\n  :host([data-theme=\"auto\"]) .toggle-switch {\n    background: #30363d;\n  }\n\n  :host([data-theme=\"auto\"]) .toggle-switch.active {\n    background: var(--accent);\n  }\n\n  :host([data-theme=\"auto\"]) .skeleton-icon,\n  :host([data-theme=\"auto\"]) .skeleton-line {\n    background: linear-gradient(90deg, #21262d 25%, #30363d 50%, #21262d 75%);\n    background-size: 200% 100%;\n  }\n\n  :host([data-theme=\"auto\"]) .question-option {\n    border-color: rgba(255, 255, 255, 0.15);\n    background: rgba(255, 255, 255, 0.08);\n  }\n\n  :host([data-theme=\"auto\"]) .question-option:hover {\n    background: var(--accent-soft);\n  }\n\n  :host([data-theme=\"auto\"]) .user-request {\n    background: rgba(255, 255, 255, 0.03);\n  }\n\n  :host([data-theme=\"auto\"]) .hub-item:hover {\n    background: rgba(255, 255, 255, 0.04);\n  }\n\n  :host([data-theme=\"auto\"]) .selected-list,\n  :host([data-theme=\"auto\"]) .multi-mode-hint {\n    background: rgba(255, 255, 255, 0.03);\n  }\n\n  :host([data-theme=\"auto\"]) .followup-area {\n    background: rgba(63, 185, 80, 0.1);\n  }\n\n  :host([data-theme=\"auto\"]) .panel-footer.done {\n    background: rgba(63, 185, 80, 0.12);\n  }\n}\n\n*, *::before, *::after {\n  box-sizing: border-box;\n}\n\n/* Highlight overlay */\n.highlight {\n  position: absolute;\n  z-index: 2147483640;\n  border: 2px solid var(--accent);\n  background: rgba(99, 102, 241, 0.06);\n  pointer-events: none;\n  border-radius: 6px;\n  transition: all 0.1s ease-out;\n  box-shadow:\n    0 0 0 3px rgba(99, 102, 241, 0.08),\n    0 2px 8px rgba(99, 102, 241, 0.1);\n}\n\n.highlight.no-transition {\n  transition: none;\n}\n\n/* Glass Panel */\n.glass-panel {\n  position: absolute;\n  z-index: 2147483647;\n  background: var(--glass-bg);\n  backdrop-filter: blur(20px) saturate(180%);\n  -webkit-backdrop-filter: blur(20px) saturate(180%);\n  border: 1px solid var(--glass-border);\n  border-radius: var(--border-radius);\n  box-shadow: var(--glass-shadow);\n  pointer-events: auto;\n  width: 340px;\n  overflow: hidden;\n  animation: panelIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);\n  cursor: default;\n}\n\n.glass-panel *, .glass-panel *::before, .glass-panel *::after {\n  cursor: inherit;\n}\n\n.glass-panel button, .glass-panel input {\n  cursor: pointer;\n}\n\n.glass-panel input[type=\"text\"] {\n  cursor: text;\n}\n\n@keyframes panelIn {\n  from {\n    opacity: 0;\n    transform: translateY(8px) scale(0.96);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n  }\n}\n\n/* Panel Header */\n.panel-header {\n  padding: 14px 16px;\n  border-bottom: 1px solid var(--divider);\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  cursor: grab;\n  user-select: none;\n}\n\n.panel-header:active {\n  cursor: grabbing;\n}\n\n.component-tag {\n  font-family: 'SF Mono', 'Fira Code', monospace;\n  font-size: 12px;\n  font-weight: 500;\n  color: var(--accent);\n  background: var(--accent-soft);\n  padding: 4px 10px;\n  border-radius: 6px;\n  letter-spacing: -0.01em;\n}\n\n.file-path {\n  font-size: 11px;\n  color: var(--text-muted);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  flex: 1;\n}\n\n.close-btn {\n  width: 24px;\n  height: 24px;\n  border: none;\n  background: transparent;\n  color: var(--text-muted);\n  cursor: pointer;\n  border-radius: 6px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all 0.15s;\n  font-size: 18px;\n  line-height: 1;\n}\n\n.close-btn:hover {\n  background: rgba(0, 0, 0, 0.05);\n  color: var(--text-secondary);\n}\n\n/* User Request */\n.user-request {\n  padding: 12px 16px;\n  background: rgba(0, 0, 0, 0.02);\n  border-bottom: 1px solid var(--divider);\n}\n\n.user-request-label {\n  font-size: 10px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  color: var(--text-muted);\n  margin-bottom: 4px;\n}\n\n.user-request-text {\n  color: var(--text-primary);\n  font-weight: 500;\n  line-height: 1.4;\n  display: -webkit-box;\n  -webkit-line-clamp: 3;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  white-space: pre-wrap;\n  word-wrap: break-word;\n}\n\n/* Input Mode */\n.input-area {\n  padding: 12px 16px 16px;\n}\n\n.input-field {\n  width: 100%;\n  padding: 10px 14px;\n  border: 1px solid rgba(0, 0, 0, 0.08);\n  border-radius: var(--border-radius-sm);\n  font-size: 13px;\n  font-family: inherit;\n  background: rgba(255, 255, 255, 0.6);\n  color: var(--text-primary);\n  outline: none;\n  transition: all 0.15s;\n  min-height: 60px;\n  max-height: 150px;\n  resize: none;\n  line-height: 1.4;\n  overflow-y: auto;\n}\n\n.input-field::placeholder {\n  color: var(--text-muted);\n}\n\n.input-field:focus {\n  border-color: var(--accent);\n  box-shadow: 0 0 0 3px var(--accent-soft);\n  background: white;\n}\n\n.btn-row {\n  display: flex;\n  gap: 8px;\n  margin-top: 10px;\n}\n\n.btn {\n  flex: 1;\n  padding: 9px 14px;\n  border: none;\n  border-radius: var(--border-radius-sm);\n  font-size: 12px;\n  font-weight: 600;\n  font-family: inherit;\n  cursor: pointer;\n  transition: all 0.15s;\n}\n\n.btn-primary {\n  background: var(--accent);\n  color: white;\n}\n\n.btn-primary:hover {\n  background: #4f46e5;\n  transform: translateY(-1px);\n}\n\n.btn-secondary {\n  background: rgba(0, 0, 0, 0.04);\n  color: var(--text-secondary);\n}\n\n.btn-secondary:hover {\n  background: rgba(0, 0, 0, 0.08);\n}\n\n/* Activity Feed */\n.activity-feed {\n  max-height: 280px;\n  overflow-y: auto;\n  padding: 8px 0;\n}\n\n.activity-feed::-webkit-scrollbar {\n  width: 6px;\n}\n\n.activity-feed::-webkit-scrollbar-track {\n  background: transparent;\n}\n\n.activity-feed::-webkit-scrollbar-thumb {\n  background: rgba(0, 0, 0, 0.1);\n  border-radius: 3px;\n}\n\n.activity-item {\n  padding: 8px 16px;\n  display: flex;\n  gap: 10px;\n  align-items: flex-start;\n  animation: itemIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n@keyframes itemIn {\n  from {\n    opacity: 0;\n    transform: translateX(-8px);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n\n.activity-icon {\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  font-size: 10px;\n}\n\n.activity-icon.status { background: var(--accent-soft); color: var(--accent); }\n.activity-icon.thought { background: rgba(139, 92, 246, 0.1); color: #8b5cf6; }\n.activity-icon.action { background: rgba(14, 165, 233, 0.1); color: #0ea5e9; }\n.activity-icon.question { background: var(--accent-soft); color: var(--accent); }\n.activity-icon.success { background: rgba(16, 185, 129, 0.1); color: var(--success); }\n.activity-icon.error { background: rgba(239, 68, 68, 0.1); color: var(--error); }\n\n.activity-content {\n  flex: 1;\n  min-width: 0;\n}\n\n.activity-text {\n  color: var(--text-primary);\n  word-wrap: break-word;\n}\n\n.activity-text.muted {\n  color: var(--text-secondary);\n}\n\n.activity-target {\n  font-family: 'SF Mono', 'Fira Code', monospace;\n  font-size: 11px;\n  color: var(--text-muted);\n  margin-top: 2px;\n}\n\n/* Question UI */\n.question-box {\n  background: rgba(99, 102, 241, 0.06);\n  border: 1px solid rgba(99, 102, 241, 0.15);\n  border-radius: var(--border-radius-sm);\n  padding: 12px;\n  margin: 8px 16px;\n  animation: questionIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n@keyframes questionIn {\n  from {\n    opacity: 0;\n    transform: scale(0.95);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n\n.question-text {\n  font-weight: 500;\n  color: var(--text-primary);\n  margin-bottom: 10px;\n}\n\n.question-options {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n}\n\n.question-option {\n  padding: 7px 14px;\n  border: 1px solid rgba(0, 0, 0, 0.1);\n  border-radius: 8px;\n  background: white;\n  font-size: 12px;\n  font-weight: 500;\n  font-family: inherit;\n  color: var(--text-primary);\n  cursor: pointer;\n  transition: all 0.15s;\n}\n\n.question-option:hover {\n  border-color: var(--accent);\n  background: var(--accent-soft);\n  color: var(--accent);\n}\n\n/* Skeleton loader */\n.skeleton-item {\n  padding: 8px 16px;\n  display: flex;\n  gap: 10px;\n  align-items: center;\n}\n\n.skeleton-icon {\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);\n  background-size: 200% 100%;\n  animation: shimmer 1.5s infinite;\n}\n\n.skeleton-line {\n  height: 14px;\n  border-radius: 4px;\n  background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);\n  background-size: 200% 100%;\n  animation: shimmer 1.5s infinite;\n  width: 60%;\n}\n\n@keyframes shimmer {\n  0% { background-position: 200% 0; }\n  100% { background-position: -200% 0; }\n}\n\n/* Status Footer */\n.panel-footer {\n  padding: 10px 16px;\n  border-top: 1px solid var(--divider);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.status-indicator {\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  background: var(--text-muted);\n}\n\n.status-indicator.pending {\n  background: var(--accent);\n  animation: pulse 1.5s ease-in-out infinite;\n}\n\n.status-indicator.fixing {\n  background: #0ea5e9;\n  animation: pulse 1s ease-in-out infinite;\n}\n\n.status-indicator.success { background: var(--success); }\n.status-indicator.failed { background: var(--error); }\n\n@keyframes pulse {\n  0%, 100% { opacity: 1; transform: scale(1); }\n  50% { opacity: 0.5; transform: scale(0.9); }\n}\n\n.status-text {\n  font-size: 12px;\n  color: var(--text-secondary);\n  flex: 1;\n}\n\n/* Done state */\n.panel-footer.done {\n  background: rgba(16, 185, 129, 0.06);\n}\n\n.panel-footer.done .status-text {\n  color: var(--success);\n  font-weight: 500;\n}\n\n/* Result Toast - shows after page reload */\n.result-toast {\n  position: fixed;\n  bottom: 24px;\n  right: 24px;\n  background: var(--glass-bg);\n  backdrop-filter: blur(20px) saturate(180%);\n  -webkit-backdrop-filter: blur(20px) saturate(180%);\n  border: 1px solid var(--glass-border);\n  border-radius: var(--border-radius);\n  box-shadow: var(--glass-shadow);\n  padding: 14px 18px;\n  pointer-events: auto;\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  animation: toastIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);\n  max-width: 320px;\n}\n\n@keyframes toastIn {\n  from {\n    opacity: 0;\n    transform: translateY(16px) scale(0.95);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n  }\n}\n\n.toast-icon {\n  width: 32px;\n  height: 32px;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 16px;\n  flex-shrink: 0;\n}\n\n.toast-icon.success {\n  background: rgba(16, 185, 129, 0.15);\n  color: var(--success);\n}\n\n.toast-icon.failed {\n  background: rgba(239, 68, 68, 0.15);\n  color: var(--error);\n}\n\n.toast-content {\n  flex: 1;\n  min-width: 0;\n}\n\n.toast-title {\n  font-weight: 600;\n  color: var(--text-primary);\n  margin-bottom: 2px;\n}\n\n.toast-message {\n  font-size: 12px;\n  color: var(--text-secondary);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.toast-close {\n  width: 24px;\n  height: 24px;\n  border: none;\n  background: transparent;\n  color: var(--text-muted);\n  cursor: pointer;\n  border-radius: 6px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 16px;\n}\n\n.toast-close:hover {\n  background: rgba(0, 0, 0, 0.05);\n  color: var(--text-secondary);\n}\n\n/* Hub - Request History */\n.hub {\n  position: fixed;\n  bottom: 16px;\n  left: 16px;\n  background: var(--glass-bg);\n  backdrop-filter: blur(20px) saturate(180%);\n  -webkit-backdrop-filter: blur(20px) saturate(180%);\n  border: 1px solid var(--glass-border);\n  border-radius: 10px;\n  box-shadow: var(--glass-shadow);\n  pointer-events: auto;\n  min-width: 200px;\n  max-width: 200px;\n  overflow: hidden;\n  animation: hubIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);\n  cursor: default;\n}\n\n.hub *, .hub *::before, .hub *::after {\n  cursor: inherit;\n}\n\n.hub button {\n  cursor: pointer;\n}\n\n@keyframes hubIn {\n  from {\n    opacity: 0;\n    transform: translateY(8px) scale(0.96);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n  }\n}\n\n.hub.disabled.collapsed {\n  opacity: 0.5;\n}\n\n.hub-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 6px;\n  padding: 6px 8px;\n  cursor: pointer;\n  user-select: none;\n}\n\n.hub-header:hover {\n  background: rgba(0, 0, 0, 0.03);\n}\n\n.hub-header-left {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.hub-logo {\n  width: 20px;\n  height: 20px;\n  border-radius: 5px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 11px;\n  color: white;\n  flex-shrink: 0;\n}\n\n.hub-title {\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--text-primary);\n  flex: 1;\n}\n\n.hub-badge {\n  font-size: 9px;\n  font-weight: 600;\n  background: var(--accent);\n  color: white;\n  padding: 1px 5px;\n  border-radius: 8px;\n  min-width: 14px;\n  text-align: center;\n}\n\n.hub-toggle {\n  width: 16px;\n  height: 16px;\n  border: none;\n  background: transparent;\n  color: var(--text-muted);\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 10px;\n  transition: transform 0.2s;\n}\n\n.hub-toggle.expanded {\n  transform: rotate(180deg);\n}\n\n.hub-disable {\n  width: 20px;\n  height: 20px;\n  border: none;\n  background: transparent;\n  color: var(--text-muted);\n  cursor: pointer;\n  border-radius: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all 0.15s;\n  flex-shrink: 0;\n}\n\n.hub-disable:hover {\n  background: rgba(0, 0, 0, 0.05);\n  color: var(--text-secondary);\n}\n\n.hub-disable.active {\n  color: var(--accent);\n}\n\n.hub-disable svg {\n  width: 14px;\n  height: 14px;\n}\n\n.hub-content {\n  border-top: 1px solid var(--divider);\n  max-height: 0;\n  overflow: hidden;\n  transition: max-height 0.25s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.hub-content.expanded {\n  max-height: 320px;\n}\n\n.hub-list {\n  max-height: 200px;\n  overflow-y: auto;\n  padding: 4px 0;\n}\n\n.hub-list::-webkit-scrollbar {\n  width: 6px;\n}\n\n.hub-list::-webkit-scrollbar-track {\n  background: transparent;\n}\n\n.hub-list::-webkit-scrollbar-thumb {\n  background: rgba(0, 0, 0, 0.1);\n  border-radius: 3px;\n}\n\n.hub-item {\n  padding: 5px 8px;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.hub-item:hover {\n  background: rgba(0, 0, 0, 0.02);\n}\n\n.hub-item-status {\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  flex-shrink: 0;\n}\n\n.hub-item-status.pending { background: var(--accent); animation: pulse 1.5s ease-in-out infinite; }\n.hub-item-status.fixing { background: #0ea5e9; animation: pulse 1s ease-in-out infinite; }\n.hub-item-status.success { background: var(--success); }\n.hub-item-status.failed { background: var(--error); }\n\n.hub-item-content {\n  flex: 1;\n  min-width: 0;\n}\n\n.hub-item-component {\n  font-size: 10px;\n  font-weight: 500;\n  color: var(--text-secondary);\n}\n\n.hub-item-note {\n  font-size: 11px;\n  color: var(--text-primary);\n  word-wrap: break-word;\n}\n\n.hub-item-undo {\n  width: 18px;\n  height: 18px;\n  border: none;\n  background: transparent;\n  color: var(--text-muted);\n  cursor: pointer;\n  border-radius: 3px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 10px;\n  opacity: 0;\n  transition: all 0.15s;\n  flex-shrink: 0;\n}\n\n.hub-item:hover .hub-item-undo {\n  opacity: 1;\n}\n\n.hub-item-undo:hover {\n  background: rgba(239, 68, 68, 0.1);\n  color: var(--error);\n}\n\n.hub-empty {\n  padding: 10px 8px;\n  text-align: center;\n  font-size: 10px;\n  color: var(--text-muted);\n}\n\n.hub-settings-btn {\n  width: 20px;\n  height: 20px;\n  border: none;\n  background: transparent;\n  color: var(--text-muted);\n  cursor: pointer;\n  border-radius: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all 0.15s;\n  flex-shrink: 0;\n}\n\n.hub-settings-btn:hover {\n  background: rgba(0, 0, 0, 0.05);\n  color: var(--text-secondary);\n}\n\n.hub-settings-btn svg {\n  width: 12px;\n  height: 12px;\n}\n\n/* Settings Page */\n.hub-settings-page {\n  padding: 8px 0;\n}\n\n.hub-settings-header {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 8px 8px;\n  border-bottom: 1px solid var(--divider);\n}\n\n.hub-back-btn {\n  width: 20px;\n  height: 20px;\n  border: none;\n  background: transparent;\n  color: var(--text-secondary);\n  cursor: pointer;\n  border-radius: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all 0.15s;\n}\n\n.hub-back-btn:hover {\n  background: rgba(0, 0, 0, 0.05);\n  color: var(--text-primary);\n}\n\n.hub-settings-title {\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--text-primary);\n}\n\n.hub-settings-list {\n  padding: 8px;\n}\n\n.hub-setting-row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n  padding: 6px 0;\n}\n\n.hub-setting-row:not(:last-child) {\n  border-bottom: 1px solid var(--divider);\n  padding-bottom: 10px;\n  margin-bottom: 4px;\n}\n\n.hub-setting-info {\n  flex: 1;\n}\n\n.hub-setting-label {\n  font-size: 11px;\n  font-weight: 500;\n  color: var(--text-primary);\n}\n\n.hub-setting-desc {\n  font-size: 9px;\n  color: var(--text-muted);\n  margin-top: 2px;\n}\n\n.hub-shortcuts-section {\n  margin-top: 12px;\n  padding: 12px;\n  padding-top: 12px;\n  border-top: 1px solid var(--divider);\n}\n\n.hub-shortcuts-title {\n  font-size: 10px;\n  font-weight: 600;\n  color: var(--text-muted);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  margin-bottom: 8px;\n}\n\n.hub-shortcuts-list {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.hub-shortcut-row {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.hub-shortcut-label {\n  font-size: 11px;\n  color: var(--text-secondary);\n}\n\n.hub-shortcut-keys {\n  display: flex;\n  gap: 4px;\n  align-items: center;\n}\n\n.hub-shortcut-keys kbd {\n  display: inline-block;\n  padding: 2px 6px;\n  font-size: 10px;\n  font-family: inherit;\n  font-weight: 500;\n  color: var(--text-secondary);\n  background: rgba(0, 0, 0, 0.06);\n  border: 1px solid rgba(0, 0, 0, 0.1);\n  border-radius: 4px;\n}\n\n:host([data-theme=\"dark\"]) .hub-shortcut-keys kbd {\n  background: rgba(255, 255, 255, 0.1);\n  border-color: rgba(255, 255, 255, 0.15);\n}\n\n@media (prefers-color-scheme: dark) {\n  :host([data-theme=\"auto\"]) .hub-shortcut-keys kbd {\n    background: rgba(255, 255, 255, 0.1);\n    border-color: rgba(255, 255, 255, 0.15);\n  }\n}\n\n.theme-selector {\n  display: flex;\n  background: rgba(0, 0, 0, 0.04);\n  border-radius: 6px;\n  padding: 2px;\n  gap: 2px;\n}\n\n:host([data-theme=\"dark\"]) .theme-selector {\n  background: rgba(255, 255, 255, 0.08);\n}\n\n@media (prefers-color-scheme: dark) {\n  :host([data-theme=\"auto\"]) .theme-selector {\n    background: rgba(255, 255, 255, 0.08);\n  }\n}\n\n.theme-btn {\n  padding: 4px 8px;\n  border: none;\n  background: transparent;\n  border-radius: 4px;\n  font-size: 12px;\n  cursor: pointer;\n  transition: all 0.15s;\n  color: var(--text-muted);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.theme-btn:hover {\n  color: var(--text-secondary);\n}\n\n.theme-btn.active {\n  background: var(--glass-bg);\n  color: var(--text-primary);\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n\n.theme-btn svg {\n  width: 14px;\n  height: 14px;\n}\n\n.hub-button-group {\n  display: flex;\n}\n\n/* Collapsed hub (minimal) */\n.hub.collapsed .hub-title,\n.hub.collapsed .hub-toggle {\n  display: none;\n}\n\n.hub.collapsed .hub-header {\n  padding: 5px;\n}\n\n.hub.collapsed .hub-header-left {\n  gap: 4px;\n}\n\n.toggle-switch {\n  position: relative;\n  width: 32px;\n  height: 18px;\n  background: #cbd5e1;\n  border-radius: 9px;\n  cursor: pointer;\n  transition: background 0.2s;\n  border: none;\n  padding: 0;\n}\n\n.toggle-switch.active {\n  background: var(--accent);\n}\n\n.toggle-switch::after {\n  content: '';\n  position: absolute;\n  top: 2px;\n  left: 2px;\n  width: 14px;\n  height: 14px;\n  background: white;\n  border-radius: 50%;\n  transition: transform 0.2s;\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);\n}\n\n.toggle-switch.active::after {\n  transform: translateX(14px);\n}\n\n/* Success action buttons */\n.success-actions {\n  display: flex;\n  gap: 6px;\n  margin-left: auto;\n}\n\n.action-btn {\n  padding: 4px 10px;\n  border: none;\n  border-radius: 6px;\n  font-size: 11px;\n  font-weight: 600;\n  font-family: inherit;\n  cursor: pointer;\n  transition: all 0.15s;\n}\n\n.action-btn-commit {\n  background: var(--success);\n  color: white;\n}\n\n.action-btn-commit:hover {\n  background: #059669;\n}\n\n.action-btn-undo {\n  background: rgba(239, 68, 68, 0.1);\n  color: var(--error);\n}\n\n.action-btn-undo:hover {\n  background: rgba(239, 68, 68, 0.2);\n}\n\n/* Follow-up input */\n.followup-area {\n  padding: 12px;\n  border-top: 1px solid var(--divider);\n  background: rgba(16, 185, 129, 0.04);\n}\n\n.followup-row {\n  display: flex;\n  gap: 8px;\n  align-items: flex-end;\n}\n\n.followup-input {\n  flex: 1;\n  padding: 8px 12px;\n  border: 1px solid rgba(0, 0, 0, 0.08);\n  border-radius: var(--border-radius-sm);\n  font-size: 12px;\n  font-family: inherit;\n  background: rgba(255, 255, 255, 0.8);\n  color: var(--text-primary);\n  outline: none;\n  transition: all 0.15s;\n  min-height: 36px;\n  max-height: 100px;\n  resize: none;\n  line-height: 1.4;\n  overflow-y: auto;\n}\n\n.followup-input::placeholder {\n  color: var(--text-muted);\n}\n\n.followup-input:focus {\n  border-color: var(--accent);\n  box-shadow: 0 0 0 2px var(--accent-soft);\n  background: white;\n}\n\n.followup-send {\n  flex-shrink: 0;\n  padding: 9px 16px;\n  border: 1px solid transparent;\n  border-radius: var(--border-radius-sm);\n  background: var(--accent);\n  color: white;\n  font-size: 12px;\n  font-weight: 600;\n  font-family: inherit;\n  cursor: pointer;\n  transition: all 0.15s;\n}\n\n.followup-send:hover {\n  background: #4f46e5;\n}\n\n.followup-send:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.followup-done {\n  flex-shrink: 0;\n  width: 32px;\n  height: 32px;\n  padding: 0;\n  border: 1px solid var(--divider);\n  border-radius: var(--border-radius-sm);\n  background: transparent;\n  color: var(--text-secondary);\n  font-size: 14px;\n  font-family: inherit;\n  cursor: pointer;\n  transition: all 0.15s;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.followup-done:hover {\n  background: rgba(0, 0, 0, 0.04);\n}\n\n/* Multi-select styles */\n.highlight.multi {\n  border-style: dashed;\n  border-width: 2px;\n  box-shadow:\n    0 0 0 2px rgba(99, 102, 241, 0.06),\n    0 2px 6px rgba(99, 102, 241, 0.08);\n}\n\n.highlight-badge {\n  position: absolute;\n  top: -10px;\n  left: -10px;\n  width: 20px;\n  height: 20px;\n  background: var(--accent);\n  color: white;\n  font-size: 11px;\n  font-weight: 600;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n}\n\n.multi-select-icon {\n  width: 24px;\n  height: 24px;\n  border: none;\n  background: transparent;\n  color: var(--text-muted);\n  cursor: pointer;\n  border-radius: 6px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all 0.15s;\n  font-size: 16px;\n  line-height: 1;\n}\n\n.multi-select-icon:hover {\n  background: var(--accent-soft);\n  color: var(--accent);\n}\n\n.multi-select-icon.active {\n  background: var(--accent);\n  color: white;\n}\n\n.selected-list {\n  padding: 8px 16px;\n  border-bottom: 1px solid var(--divider);\n  background: rgba(0, 0, 0, 0.02);\n}\n\n.selected-list-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 8px;\n}\n\n.selected-count {\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--text-secondary);\n}\n\n.selected-chips {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n}\n\n.selected-chip {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  padding: 4px 8px;\n  background: var(--accent-soft);\n  border-radius: 6px;\n  font-size: 11px;\n  color: var(--accent);\n  font-weight: 500;\n}\n\n.selected-chip-number {\n  width: 16px;\n  height: 16px;\n  background: var(--accent);\n  color: white;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 10px;\n  font-weight: 600;\n}\n\n.selected-chip-remove {\n  width: 16px;\n  height: 16px;\n  border: none;\n  background: transparent;\n  color: var(--accent);\n  cursor: pointer;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 14px;\n  line-height: 1;\n  opacity: 0.7;\n  transition: all 0.15s;\n  padding: 0;\n}\n\n.selected-chip-remove:hover {\n  opacity: 1;\n  background: rgba(99, 102, 241, 0.2);\n}\n\n.multi-mode-hint {\n  padding: 8px 16px;\n  background: var(--accent-soft);\n  border-bottom: 1px solid var(--divider);\n  font-size: 11px;\n  color: var(--accent);\n  text-align: center;\n}\n";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eyeglass/inspector",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "description": "Browser inspector component for Eyeglass",
   "type": "module",
   "main": "dist/index.js",