@eyeglass/inspector 0.1.2 → 0.1.3

package/dist/inspector.js

@@ -5,7 +5,32 @@ import { captureSnapshot } from './snapshot.js';
 const BRIDGE_URL = 'http://localhost:3300';
 const STORAGE_KEY = 'eyeglass_session';
 const HISTORY_KEY = 'eyeglass_history';
+const ENABLED_KEY = 'eyeglass_enabled';
+const AUTOCOMMIT_KEY = 'eyeglass_autocommit';
 const SESSION_TTL = 10000; // 10 seconds
+// Fun rotating phrases for the "fixing" status
+const WORKING_PHRASES = [
+    'Ruminating...',
+    'Percolating...',
+    'Divining...',
+    'Grokking...',
+    'Communing...',
+    'Concocting...',
+    'Synthesizing...',
+    'Distilling...',
+    'Incubating...',
+    'Forging...',
+    'Scrutinizing...',
+    'Triangulating...',
+    'Unraveling...',
+    'Traversing...',
+    'Sifting...',
+    'Marshaling...',
+    'Hydrating...',
+    'Harmonizing...',
+    'Indexing...',
+    'Entangling...',
+];
 // Eye cursor as base64-encoded SVG (16x16 eye icon, indigo color)
 const EYE_CURSOR = `url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiM2MzY2ZjEiIHN0cm9rZS13aWR0aD0iMi41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0xIDEyczQtOCAxMS04IDExIDggMTEgOC00IDgtMTEgOC0xMS04LTExLTh6Ii8+PGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iMyIgZmlsbD0iIzYzNjZmMSIvPjwvc3ZnPg==") 8 8, crosshair`;
 const STYLES = `
@@ -22,7 +47,7 @@ const STYLES = `
   font-size: 13px;
   line-height: 1.5;
   box-sizing: border-box;
-  --glass-bg: rgba(255, 255, 255, 0.72);
+  --glass-bg: rgba(255, 255, 255, 0.88);
   --glass-border: rgba(0, 0, 0, 0.25);
   --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
   --divider: rgba(0, 0, 0, 0.18);
@@ -371,6 +396,37 @@ const STYLES = `
   color: var(--accent);
 }
 
+/* Skeleton loader */
+.skeleton-item {
+  padding: 8px 16px;
+  display: flex;
+  gap: 10px;
+  align-items: center;
+}
+
+.skeleton-icon {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
+  background-size: 200% 100%;
+  animation: shimmer 1.5s infinite;
+}
+
+.skeleton-line {
+  height: 14px;
+  border-radius: 4px;
+  background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
+  background-size: 200% 100%;
+  animation: shimmer 1.5s infinite;
+  width: 60%;
+}
+
+@keyframes shimmer {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+
 /* Status Footer */
 .panel-footer {
   padding: 10px 16px;
@@ -549,7 +605,7 @@ const STYLES = `
   }
 }
 
-.hub.disabled {
+.hub.disabled.collapsed {
   opacity: 0.5;
 }
 
@@ -754,6 +810,107 @@ const STYLES = `
   color: var(--text-muted);
 }
 
+.hub-settings-btn {
+  width: 20px;
+  height: 20px;
+  border: none;
+  background: transparent;
+  color: var(--text-muted);
+  cursor: pointer;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.15s;
+  flex-shrink: 0;
+}
+
+.hub-settings-btn:hover {
+  background: rgba(0, 0, 0, 0.05);
+  color: var(--text-secondary);
+}
+
+.hub-settings-btn svg {
+  width: 12px;
+  height: 12px;
+}
+
+/* Settings Page */
+.hub-settings-page {
+  padding: 8px 0;
+}
+
+.hub-settings-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 8px 8px;
+  border-bottom: 1px solid var(--divider);
+}
+
+.hub-back-btn {
+  width: 20px;
+  height: 20px;
+  border: none;
+  background: transparent;
+  color: var(--text-secondary);
+  cursor: pointer;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.15s;
+}
+
+.hub-back-btn:hover {
+  background: rgba(0, 0, 0, 0.05);
+  color: var(--text-primary);
+}
+
+.hub-settings-title {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.hub-settings-list {
+  padding: 8px;
+}
+
+.hub-setting-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 6px 0;
+}
+
+.hub-setting-row:not(:last-child) {
+  border-bottom: 1px solid var(--divider);
+  padding-bottom: 10px;
+  margin-bottom: 4px;
+}
+
+.hub-setting-info {
+  flex: 1;
+}
+
+.hub-setting-label {
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--text-primary);
+}
+
+.hub-setting-desc {
+  font-size: 9px;
+  color: var(--text-muted);
+  margin-top: 2px;
+}
+
+.hub-button-group {
+  display: flex;
+}
+
 /* Collapsed hub (minimal) */
 .hub.collapsed .hub-title,
 .hub.collapsed .hub-toggle {
@@ -768,6 +925,156 @@ const STYLES = `
   gap: 4px;
 }
 
+.toggle-switch {
+  position: relative;
+  width: 32px;
+  height: 18px;
+  background: #cbd5e1;
+  border-radius: 9px;
+  cursor: pointer;
+  transition: background 0.2s;
+  border: none;
+  padding: 0;
+}
+
+.toggle-switch.active {
+  background: var(--accent);
+}
+
+.toggle-switch::after {
+  content: '';
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 14px;
+  height: 14px;
+  background: white;
+  border-radius: 50%;
+  transition: transform 0.2s;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+}
+
+.toggle-switch.active::after {
+  transform: translateX(14px);
+}
+
+/* Success action buttons */
+.success-actions {
+  display: flex;
+  gap: 6px;
+  margin-left: auto;
+}
+
+.action-btn {
+  padding: 4px 10px;
+  border: none;
+  border-radius: 6px;
+  font-size: 11px;
+  font-weight: 600;
+  font-family: inherit;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.action-btn-commit {
+  background: var(--success);
+  color: white;
+}
+
+.action-btn-commit:hover {
+  background: #059669;
+}
+
+.action-btn-undo {
+  background: rgba(239, 68, 68, 0.1);
+  color: var(--error);
+}
+
+.action-btn-undo:hover {
+  background: rgba(239, 68, 68, 0.2);
+}
+
+/* Follow-up input */
+.followup-area {
+  padding: 12px;
+  border-top: 1px solid var(--divider);
+  background: rgba(16, 185, 129, 0.04);
+}
+
+.followup-row {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.followup-input {
+  flex: 1;
+  padding: 8px 12px;
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  border-radius: var(--border-radius-sm);
+  font-size: 12px;
+  font-family: inherit;
+  background: rgba(255, 255, 255, 0.8);
+  color: var(--text-primary);
+  outline: none;
+  transition: all 0.15s;
+}
+
+.followup-input::placeholder {
+  color: var(--text-muted);
+}
+
+.followup-input:focus {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 2px var(--accent-soft);
+  background: white;
+}
+
+.followup-send {
+  flex-shrink: 0;
+  padding: 9px 16px;
+  border: 1px solid transparent;
+  border-radius: var(--border-radius-sm);
+  background: var(--accent);
+  color: white;
+  font-size: 12px;
+  font-weight: 600;
+  font-family: inherit;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.followup-send:hover {
+  background: #4f46e5;
+}
+
+.followup-send:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.followup-done {
+  flex-shrink: 0;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: 1px solid var(--divider);
+  border-radius: var(--border-radius-sm);
+  background: transparent;
+  color: var(--text-secondary);
+  font-size: 14px;
+  font-family: inherit;
+  cursor: pointer;
+  transition: all 0.15s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.followup-done:hover {
+  background: rgba(0, 0, 0, 0.04);
+}
+
 /* Multi-select styles */
 .highlight.multi {
   border-style: dashed;
@@ -919,7 +1226,9 @@ export class EyeglassInspector extends HTMLElement {
         this.activityEvents = [];
         this.currentStatus = 'idle';
         this.hubExpanded = false;
+        this.hubPage = 'main';
         this.inspectorEnabled = true;
+        this.autoCommitEnabled = true;
         this.history = [];
         this.isDragging = false;
         this.dragOffset = { x: 0, y: 0 };
@@ -934,6 +1243,9 @@ export class EyeglassInspector extends HTMLElement {
         this.cursorStyleElement = null;
         // Scroll handling
         this.scrollTimeout = null;
+        // Rotating status phrases
+        this.phraseIndex = 0;
+        this.phraseInterval = null;
         this.handlePanelDrag = (e) => {
             if (!this.isDragging || !this.panel)
                 return;
@@ -967,6 +1279,8 @@ export class EyeglassInspector extends HTMLElement {
         document.addEventListener('click', this.handleClick, true);
         document.addEventListener('keydown', this.handleKeyDown, true);
         window.addEventListener('scroll', this.handleScroll, true);
+        this.loadEnabledState();
+        this.loadAutoCommitState();
         this.loadHistory();
         this.renderHub();
         this.connectSSE();
@@ -1038,6 +1352,44 @@ export class EyeglassInspector extends HTMLElement {
             this.toast = null;
         }
     }
+    loadEnabledState() {
+        try {
+            const stored = localStorage.getItem(ENABLED_KEY);
+            if (stored !== null) {
+                this.inspectorEnabled = stored === 'true';
+            }
+        }
+        catch (e) {
+            // Ignore storage errors
+        }
+    }
+    saveEnabledState() {
+        try {
+            localStorage.setItem(ENABLED_KEY, String(this.inspectorEnabled));
+        }
+        catch (e) {
+            // Ignore storage errors
+        }
+    }
+    loadAutoCommitState() {
+        try {
+            const stored = localStorage.getItem(AUTOCOMMIT_KEY);
+            if (stored !== null) {
+                this.autoCommitEnabled = stored === 'true';
+            }
+        }
+        catch (e) {
+            // Ignore storage errors
+        }
+    }
+    saveAutoCommitState() {
+        try {
+            localStorage.setItem(AUTOCOMMIT_KEY, String(this.autoCommitEnabled));
+        }
+        catch (e) {
+            // Ignore storage errors
+        }
+    }
     loadHistory() {
         try {
             const stored = sessionStorage.getItem(HISTORY_KEY);
@@ -1087,6 +1439,16 @@ export class EyeglassInspector extends HTMLElement {
             this.hub.className = 'hub';
             this.shadow.appendChild(this.hub);
         }
+        if (this.hubPage === 'settings') {
+            this.renderHubSettingsPage();
+        }
+        else {
+            this.renderHubMainPage();
+        }
+    }
+    renderHubMainPage() {
+        if (!this.hub)
+            return;
         const collapsedClass = this.hubExpanded ? '' : 'collapsed';
         const disabledClass = this.inspectorEnabled ? '' : 'disabled';
         const expandedClass = this.hubExpanded ? 'expanded' : '';
@@ -1094,6 +1456,7 @@ export class EyeglassInspector extends HTMLElement {
         this.hub.className = `hub ${collapsedClass} ${disabledClass}`.trim();
         const eyeOpenSvg = `<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>`;
         const eyeClosedSvg = `<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>`;
+        const gearSvg = `<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>`;
         this.hub.innerHTML = `
       <div class="hub-header">
         <div class="hub-header-left">
@@ -1102,9 +1465,12 @@ export class EyeglassInspector extends HTMLElement {
           ${activeCount > 0 ? `<span class="hub-badge">${activeCount}</span>` : ''}
           <button class="hub-toggle ${expandedClass}" title="Toggle history">▼</button>
         </div>
+        <div class="hub-button-group">
+        <button class="hub-settings-btn" title="Settings">${gearSvg}</button>
         <button class="hub-disable ${this.inspectorEnabled ? 'active' : ''}" title="${this.inspectorEnabled ? 'Disable' : 'Enable'} inspector">
           ${this.inspectorEnabled ? eyeOpenSvg : eyeClosedSvg}
         </button>
+        </div>
       </div>
       <div class="hub-content ${expandedClass}">
         ${this.history.length > 0 ? `
@@ -1129,19 +1495,27 @@ export class EyeglassInspector extends HTMLElement {
     `;
         // Wire up event handlers
         const header = this.hub.querySelector('.hub-header');
-        const toggleBtn = this.hub.querySelector('.hub-toggle');
         const disableBtn = this.hub.querySelector('.hub-disable');
-        // Toggle expand/collapse on header click (except disable button)
+        const settingsBtn = this.hub.querySelector('.hub-settings-btn');
+        // Toggle expand/collapse on header click (except buttons)
         header.addEventListener('click', (e) => {
-            if (e.target === disableBtn)
+            if (e.target === disableBtn || e.target === settingsBtn || e.target.closest('.hub-settings-btn'))
                 return;
             this.hubExpanded = !this.hubExpanded;
             this.renderHub();
         });
+        // Open settings page
+        settingsBtn.addEventListener('click', (e) => {
+            e.stopPropagation();
+            this.hubPage = 'settings';
+            this.hubExpanded = true; // Ensure expanded when viewing settings
+            this.renderHub();
+        });
         // Toggle inspector enabled state
         disableBtn.addEventListener('click', (e) => {
             e.stopPropagation();
             this.inspectorEnabled = !this.inspectorEnabled;
+            this.saveEnabledState();
             if (!this.inspectorEnabled) {
                 this.unfreeze();
             }
@@ -1157,6 +1531,53 @@ export class EyeglassInspector extends HTMLElement {
             });
         });
     }
+    renderHubSettingsPage() {
+        if (!this.hub)
+            return;
+        this.hub.className = 'hub';
+        this.hub.innerHTML = `
+      <div class="hub-header">
+        <div class="hub-header-left">
+          <div class="hub-logo">👁</div>
+          <span class="hub-title">Eyeglass</span>
+        </div>
+      </div>
+      <div class="hub-content expanded">
+        <div class="hub-settings-page">
+          <div class="hub-settings-header">
+            <button class="hub-back-btn" title="Back">←</button>
+            <span class="hub-settings-title">Settings</span>
+          </div>
+          <div class="hub-settings-list">
+            <div class="hub-setting-row">
+              <div class="hub-setting-info">
+                <div class="hub-setting-label">Auto-commit</div>
+                <div class="hub-setting-desc">Automatically commit changes on success</div>
+              </div>
+              <button class="toggle-switch ${this.autoCommitEnabled ? 'active' : ''}" data-setting="autoCommit"></button>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+        // Wire up back button
+        const backBtn = this.hub.querySelector('.hub-back-btn');
+        backBtn.addEventListener('click', () => {
+            this.hubPage = 'main';
+            this.renderHub();
+        });
+        // Wire up toggle switches
+        this.hub.querySelectorAll('.toggle-switch').forEach(btn => {
+            btn.addEventListener('click', (e) => {
+                const setting = e.currentTarget.dataset.setting;
+                if (setting === 'autoCommit') {
+                    this.autoCommitEnabled = !this.autoCommitEnabled;
+                    this.saveAutoCommitState();
+                    this.renderHub();
+                }
+            });
+        });
+    }
     async requestUndo(interactionId) {
         const itemIndex = this.history.findIndex(h => h.interactionId === interactionId);
         if (itemIndex === -1)
@@ -1194,6 +1615,32 @@ export class EyeglassInspector extends HTMLElement {
             console.warn('Undo request failed:', err);
         }
     }
+    async requestCommit(interactionId) {
+        const itemIndex = this.history.findIndex(h => h.interactionId === interactionId);
+        try {
+            const response = await fetch(`${BRIDGE_URL}/commit`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ interactionId }),
+            });
+            if (response.ok) {
+                // Update status to show it's committed
+                if (itemIndex >= 0) {
+                    this.history[itemIndex].status = 'success';
+                    this.saveHistory();
+                    this.renderHub();
+                }
+                // Close the panel after commit
+                this.unfreeze();
+            }
+            else {
+                console.warn('Commit request failed');
+            }
+        }
+        catch (err) {
+            console.warn('Commit request failed:', err);
+        }
+    }
     disconnectedCallback() {
         document.removeEventListener('mousemove', this.handleMouseMove, true);
         document.removeEventListener('click', this.handleClick, true);
@@ -1236,9 +1683,18 @@ export class EyeglassInspector extends HTMLElement {
             this.currentStatus = event.status;
             // Persist session so we can show result after page reload
             this.saveSession(event.message);
-            if (event.status === 'success' || event.status === 'failed') {
+            // Manage phrase rotation based on status
+            if (event.status === 'fixing') {
+                this.startPhraseRotation();
+            }
+            else {
+                this.stopPhraseRotation();
+            }
+            if (event.status === 'failed') {
+                // Auto-close on failure after delay
                 setTimeout(() => this.unfreeze(), 4000);
             }
+            // Don't auto-close on success - show follow-up UI instead
         }
         this.renderPanel();
     }
@@ -1498,6 +1954,8 @@ export class EyeglassInspector extends HTMLElement {
         this.selectedSnapshots = [];
         this.submittedSnapshots = [];
         this.clearMultiSelectHighlights();
+        // Stop phrase rotation
+        this.stopPhraseRotation();
         this.hidePanel();
         this.hideHighlight();
         this.updateCursor();
@@ -1643,6 +2101,8 @@ export class EyeglassInspector extends HTMLElement {
             ? (this.panel.querySelector('.user-request-text')?.textContent || '')
             : '';
         const isDone = this.currentStatus === 'success' || this.currentStatus === 'failed';
+        const showActionButtons = this.currentStatus === 'success' && !this.autoCommitEnabled;
+        const showFollowUp = this.currentStatus === 'success';
         // Build header display based on submitted snapshots
         const snapshotCount = this.submittedSnapshots.length;
         const headerDisplay = snapshotCount > 1
@@ -1664,7 +2124,22 @@ export class EyeglassInspector extends HTMLElement {
       <div class="panel-footer ${isDone ? 'done' : ''}">
         <div class="status-indicator ${this.currentStatus}"></div>
         <span class="status-text">${this.getStatusText()}</span>
+        ${showActionButtons ? `
+          <div class="success-actions">
+            <button class="action-btn action-btn-undo" title="Discard changes">Undo</button>
+            <button class="action-btn action-btn-commit" title="Commit changes">Commit</button>
+          </div>
+        ` : ''}
       </div>
+      ${showFollowUp ? `
+        <div class="followup-area">
+          <div class="followup-row">
+            <input type="text" class="followup-input" placeholder="Anything else?" />
+            <button class="followup-send">Send</button>
+            <button class="followup-done">✕</button>
+          </div>
+        </div>
+      ` : ''}
     `;
         const closeBtn = this.panel.querySelector('.close-btn');
         closeBtn.addEventListener('click', () => this.unfreeze());
@@ -1681,6 +2156,36 @@ export class EyeglassInspector extends HTMLElement {
                 this.submitAnswer(questionId, answerId, answerLabel);
             });
         });
+        // Wire up action buttons (commit/undo) if present
+        const commitBtn = this.panel.querySelector('.action-btn-commit');
+        const undoBtn = this.panel.querySelector('.action-btn-undo');
+        if (commitBtn && this.interactionId) {
+            commitBtn.addEventListener('click', () => this.requestCommit(this.interactionId));
+        }
+        if (undoBtn && this.interactionId) {
+            undoBtn.addEventListener('click', () => this.requestUndo(this.interactionId));
+        }
+        // Wire up follow-up input if present
+        const followupInput = this.panel.querySelector('.followup-input');
+        const followupSend = this.panel.querySelector('.followup-send');
+        const followupDone = this.panel.querySelector('.followup-done');
+        if (followupInput && followupSend) {
+            followupSend.addEventListener('click', () => {
+                if (followupInput.value.trim()) {
+                    this.submitFollowUp(followupInput.value);
+                }
+            });
+            followupInput.addEventListener('keydown', (e) => {
+                if (e.key === 'Enter' && followupInput.value.trim()) {
+                    this.submitFollowUp(followupInput.value);
+                }
+            });
+            // Focus the follow-up input
+            requestAnimationFrame(() => followupInput.focus());
+        }
+        if (followupDone) {
+            followupDone.addEventListener('click', () => this.unfreeze());
+        }
         // Scroll to bottom of activity feed
         const feed = this.panel.querySelector('.activity-feed');
         if (feed) {
@@ -1688,12 +2193,17 @@ export class EyeglassInspector extends HTMLElement {
         }
     }
     renderActivityFeed() {
-        return this.activityEvents.map((event) => {
+        const items = this.activityEvents.map((event) => {
             switch (event.type) {
                 case 'status':
-                    // Skip pending/fixing - these are shown in the footer status bar
-                    if (event.status === 'pending' || event.status === 'fixing')
+                    // Skip pending - shown in footer. Show fixing only if it has a meaningful message
+                    if (event.status === 'pending')
                         return '';
+                    if (event.status === 'fixing') {
+                        // Skip generic/missing messages - we have rotating phrases in the footer
+                        if (!event.message || event.message === 'Agent is working...')
+                            return '';
+                    }
                     return this.renderStatusItem(event);
                 case 'thought':
                     return this.renderThoughtItem(event);
@@ -1704,7 +2214,17 @@ export class EyeglassInspector extends HTMLElement {
                 default:
                     return '';
             }
-        }).join('');
+        }).filter(Boolean);
+        // Show skeleton while waiting for first meaningful activity
+        if (items.length === 0 && (this.currentStatus === 'pending' || this.currentStatus === 'fixing')) {
+            return `
+        <div class="skeleton-item">
+          <div class="skeleton-icon"></div>
+          <div class="skeleton-line"></div>
+        </div>
+      `;
+        }
+        return items.join('');
     }
     renderStatusItem(event) {
         const iconClass = event.status === 'success' ? 'success' :
@@ -1791,12 +2311,35 @@ export class EyeglassInspector extends HTMLElement {
         switch (this.currentStatus) {
             case 'idle': return 'Ready';
             case 'pending': return 'Waiting for agent...';
-            case 'fixing': return 'Agent is working...';
+            case 'fixing': return WORKING_PHRASES[this.phraseIndex % WORKING_PHRASES.length];
             case 'success': return 'Done!';
             case 'failed': return 'Failed';
             default: return this.currentStatus;
         }
     }
+    startPhraseRotation() {
+        if (this.phraseInterval)
+            return;
+        this.phraseIndex = Math.floor(Math.random() * WORKING_PHRASES.length);
+        this.phraseInterval = window.setInterval(() => {
+            this.phraseIndex = (this.phraseIndex + 1) % WORKING_PHRASES.length;
+            this.updateFooterText();
+        }, 10000);
+    }
+    stopPhraseRotation() {
+        if (this.phraseInterval) {
+            window.clearInterval(this.phraseInterval);
+            this.phraseInterval = null;
+        }
+    }
+    updateFooterText() {
+        if (!this.panel)
+            return;
+        const statusText = this.panel.querySelector('.status-text');
+        if (statusText) {
+            statusText.textContent = this.getStatusText();
+        }
+    }
     hidePanel() {
         if (this.panel) {
             this.panel.remove();
@@ -1817,6 +2360,7 @@ export class EyeglassInspector extends HTMLElement {
         const payload = {
             interactionId: this.interactionId,
             userNote: userNote.trim(),
+            autoCommit: this.autoCommitEnabled,
             ...(snapshots.length === 1
                 ? { snapshot: snapshots[0] }
                 : { snapshots }),
@@ -1877,6 +2421,65 @@ export class EyeglassInspector extends HTMLElement {
             this.renderPanel();
         }
     }
+    async submitFollowUp(userNote) {
+        if (!userNote.trim())
+            return;
+        if (this.submittedSnapshots.length === 0)
+            return;
+        // Create new interaction ID for the follow-up
+        this.interactionId = `eyeglass-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
+        this._userNote = userNote.trim();
+        // Reuse the same snapshots from the previous request
+        const snapshots = this.submittedSnapshots;
+        const payload = {
+            interactionId: this.interactionId,
+            userNote: userNote.trim(),
+            autoCommit: this.autoCommitEnabled,
+            ...(snapshots.length === 1
+                ? { snapshot: snapshots[0] }
+                : { snapshots }),
+        };
+        // Build component name for history
+        const componentNames = snapshots.map(s => s.framework.componentName || s.tagName);
+        const historyComponentName = snapshots.length === 1
+            ? componentNames[0]
+            : `${componentNames.length} elements`;
+        // Add to history
+        this.addToHistory({
+            interactionId: this.interactionId,
+            userNote: userNote.trim(),
+            componentName: historyComponentName,
+            filePath: snapshots[0]?.framework.filePath,
+            status: 'pending',
+            timestamp: Date.now(),
+        });
+        // Reset activity state for new request
+        this.activityEvents = [];
+        this.currentStatus = 'pending';
+        this.renderPanel();
+        try {
+            const response = await fetch(`${BRIDGE_URL}/focus`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(payload),
+            });
+            if (!response.ok) {
+                throw new Error(`HTTP ${response.status}`);
+            }
+        }
+        catch (err) {
+            this.currentStatus = 'failed';
+            this.updateHistoryStatus(this.interactionId, 'failed');
+            this.activityEvents.push({
+                type: 'status',
+                interactionId: this.interactionId,
+                status: 'failed',
+                message: 'Failed to connect to bridge',
+                timestamp: Date.now(),
+            });
+            this.renderPanel();
+        }
+    }
     async submitAnswer(questionId, answerId, answerLabel) {
         if (!this.interactionId)
             return;