npm - kiro-mobile-bridge - Versions diffs - 1.0.8 → 1.0.11 - Mend

kiro-mobile-bridge 1.0.8 → 1.0.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (13) hide show

package/README.md +9 -5
package/package.json +1 -1
package/src/public/index.html +258 -11
package/src/routes/api.js +257 -76
package/src/server.js +33 -17
package/src/services/cdp.js +70 -16
package/src/services/click.js +325 -74
package/src/services/message.js +9 -1
package/src/services/snapshot.js +64 -25
package/src/utils/constants.js +116 -0
package/src/utils/hash.js +12 -0
package/src/utils/network.js +72 -2
package/src/utils/security.js +160 -0

package/README.md CHANGED Viewed

@@ -8,8 +8,11 @@ A mobile web interface for monitoring Kiro IDE agent sessions from your phone ov
 - 📱 Mobile-optimized web interface with tab navigation
 - 💬 **Chat Panel** - View and send messages to Kiro's agent
-- 📝 **Editor Panel** - Browse file explorer and open file
-- 🔄 Real-time updates via WebSocket
+- 📝 **Code Panel** - Browse file explorer and view files with syntax highlighting
+- 📋 **Tasks Panel** - View and navigate Kiro spec task files
+- 🔄 Real-time updates via WebSocket with adaptive polling
+- 🔍 Auto-discovers Kiro instances on ports 9000-9003, 9222, 9229
+- 🎨 Preserves original Kiro styling
 ## Prerequisites
@@ -65,7 +68,8 @@ Open the Network URL on your phone to monitor Kiro.
 1. Make sure your phone is on the **same WiFi network** as your computer
 2. Open the **Network URL** (e.g., `http://192.168.1.100:3000`) in your phone's browser
-3. The interface will automatically connect and show your Kiro chat
+3. The interface will automatically connect and show your Kiro session
+4. Use the tabs to switch between Chat, Code, and Tasks panels
 #### How It Works
@@ -84,9 +88,9 @@ Open the Network URL on your phone to monitor Kiro.
                                  └─────────────────┘
 ```
-1. **Discovery**: Server scans ports 9000-9003 for Kiro instances (adaptive: 10s → 30s when stable)
+1. **Discovery**: Server scans ports 9000-9003, 9222, 9229 for Kiro instances (adaptive: 10s → 30s when stable)
 2. **Connection**: Connects to Kiro via CDP WebSocket
-3. **Snapshots**: Captures chat HTML with adaptive polling (1s active → 3s idle), broadcasts changes
+3. **Snapshots**: Captures chat, editor, and tasks with adaptive polling (1s active → 3s idle)
 4. **Messages**: Injects text into Kiro's chat input via CDP
 ## Troubleshooting

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "kiro-mobile-bridge",
-  "version": "1.0.8",
+  "version": "1.0.11",
   "description": "A simple mobile web interface for monitoring Kiro IDE agent sessions from your phone over LAN",
   "type": "module",
   "main": "src/server.js",

package/src/public/index.html CHANGED Viewed

@@ -172,7 +172,7 @@
     .file-tree { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 4px 0; }
     .file-tree-folder-header { display: flex; align-items: center; gap: 6px; padding: 6px 10px; cursor: pointer; user-select: none; }
     .file-tree-folder-header:hover { background: rgba(255,255,255,0.08); }
-    .file-tree-folder-icon { color: #888; font-size: 14px; transition: transform 0.15s; }
+    .file-tree-folder-icon { color: #a78bfa; font-size: 14px; transition: transform 0.15s; }
     .file-tree-folder-icon.expanded { transform: rotate(90deg); }
     .file-tree-folder-name { font-size: 13px; color: #c5c5c5; }
     .file-tree-folder-contents { padding-left: 16px; display: none; }
@@ -212,6 +212,11 @@
     .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: #888; text-align: center; padding: 20px; }
     .empty-state .codicon { font-size: 48px; margin-bottom: 16px; opacity: 0.5; }
     .empty-state p { font-size: 14px; max-width: 280px; }
+    /* =============================================================================
+       Mobile Bridge Customizations - Hide Follow and Revert buttons in snackbar
+       ============================================================================= */
+    .kiro-snackbar-actions .kiro-button[data-variant="primary"] { display: none !important; }
   </style>
 </head>
 <body>
@@ -707,14 +712,14 @@
         }
         /* Hide tooltips, popovers, and overlay elements */
+        /* IMPORTANT: Do NOT hide model-related elements - use negative lookahead patterns */
         [role="tooltip"], [data-tooltip],
-        [class*="tooltip"]:not(button):not([role="button"]),
-        [class*="Tooltip"]:not(button):not([role="button"]),
-        [class*="popover"]:not(button):not([role="button"]),
-        [class*="Popover"]:not(button):not([role="button"]),
-        [class*="overlay"]:not(button):not([role="button"]):not([class*="dropdown"]),
-        [class*="Overlay"]:not(button):not([role="button"]):not([class*="dropdown"]),
-        [class*="modal"], [class*="Modal"] {
+        [class*="tooltip"]:not(button):not([role="button"]):not([class*="model"]):not([class*="Model"]),
+        [class*="Tooltip"]:not(button):not([role="button"]):not([class*="model"]):not([class*="Model"]),
+        [class*="popover"]:not(button):not([role="button"]):not([class*="model"]):not([class*="Model"]):not([role="listbox"]):not([role="menu"]),
+        [class*="Popover"]:not(button):not([role="button"]):not([class*="model"]):not([class*="Model"]):not([role="listbox"]):not([role="menu"]),
+        [class*="overlay"]:not(button):not([role="button"]):not([class*="dropdown"]):not([class*="model"]):not([class*="Model"]),
+        [class*="Overlay"]:not(button):not([role="button"]):not([class*="dropdown"]):not([class*="model"]):not([class*="Model"]) {
           display: none !important;
           visibility: hidden !important;
           opacity: 0 !important;
@@ -742,6 +747,7 @@
         /* Dropdown menu items */
         [class*="dropdown-item"], [class*="dropdownItem"], [class*="DropdownItem"],
         [class*="model-option"], [class*="modelOption"], [class*="ModelOption"],
+        .kiro-dropdown-item,
         [role="option"], [role="menuitem"] {
           display: flex !important;
           visibility: visible !important;
@@ -754,10 +760,33 @@
         }
         [class*="dropdown-item"]:hover, [class*="dropdownItem"]:hover,
+        .kiro-dropdown-item:hover,
         [role="option"]:hover, [role="menuitem"]:hover {
           background: rgba(255, 255, 255, 0.1) !important;
         }
+        /* Hide model descriptions in dropdown - keep only name and credit */
+        .kiro-dropdown-item [class*="description"],
+        .kiro-dropdown-item [class*="Description"],
+        .kiro-dropdown-item [class*="subtitle"],
+        .kiro-dropdown-item [class*="Subtitle"],
+        .kiro-dropdown-item > div:last-child:not(:first-child),
+        .kiro-dropdown-menu [class*="description"],
+        .kiro-dropdown-menu [class*="Description"],
+        [class*="dropdown-item"] [class*="description"],
+        [class*="dropdown-item"] [class*="Description"],
+        [role="option"] [class*="description"],
+        [role="option"] [class*="Description"] {
+          display: none !important;
+        }
+        /* Compact model dropdown items */
+        .kiro-dropdown-item,
+        .kiro-dropdown-menu > div {
+          padding: 8px 12px !important;
+          min-height: auto !important;
+        }
         /* Model selector button */
         [class*="model-selector"], [class*="modelSelector"], [class*="ModelSelector"],
         [class*="model-dropdown"], [class*="modelDropdown"], [class*="ModelDropdown"],
@@ -1017,6 +1046,7 @@
       removePlaceholderText();
       fixContextWindowCircles();
+      hideRevertButton();
       requestAnimationFrame(() => {
         requestAnimationFrame(() => {
@@ -1052,6 +1082,16 @@
       makeInteractive();
     }
+    function hideRevertButton() {
+      // Hide Revert button by finding buttons with "Revert" text in snackbar
+      panels.chat.content.querySelectorAll('.kiro-snackbar button, .kiro-snackbar-actions button').forEach(btn => {
+        const text = (btn.textContent || '').trim().toLowerCase();
+        if (text === 'revert') {
+          btn.style.display = 'none';
+        }
+      });
+    }
     function removePlaceholderText() {
       const content = panels.chat.content;
       content.querySelectorAll('[class*="placeholder"], [class*="Placeholder"]').forEach(el => {
@@ -1395,7 +1435,7 @@
         html += `<div class="file-tree-folder" data-path="${escapeHtml(folderPath)}">
           <div class="file-tree-folder-header" data-folder="${escapeHtml(folderPath)}">
             <span class="file-tree-folder-icon codicon codicon-chevron-right ${isExpanded ? 'expanded' : ''}"></span>
-            <span class="codicon codicon-folder${isExpanded ? '-opened' : ''}" style="color: #dcb67a;"></span>
+            <span class="codicon codicon-folder${isExpanded ? '-opened' : ''}" style="color: #a78bfa;"></span>
             <span class="file-tree-folder-name">${escapeHtml(folderName)}</span>
           </div>
           <div class="file-tree-folder-contents ${isExpanded ? 'expanded' : ''}">${renderTreeNode(node.folders[folderName], folderPath)}</div>
@@ -1561,10 +1601,67 @@
           e.preventDefault(); e.stopPropagation();
           const label = wrapper.querySelector('label');
           await sendClickToKiro({ tag: 'div', text: label ? label.textContent.trim() : 'toggle', role: 'switch', isToggle: true });
+          // Refresh snapshot after toggle to show updated state
+          // Use longer delay (800ms) to allow server polling to capture the change
+          // Then refresh again at 1500ms to ensure we have the latest state
+          setTimeout(() => fetchChatSnapshot(selectedCascadeId), 800);
+          setTimeout(() => fetchChatSnapshot(selectedCascadeId), 1500);
           return false;
         };
       });
+      // Notification banner buttons (View all, X) in snackbar and agent-outcome
+      // Note: Revert and Follow buttons are hidden
+      const notificationSelectors = [
+        '.kiro-snackbar button',
+        '.kiro-snackbar-actions button',
+        '.kiro-snackbar-header button',
+        '.agent-outcome-notification button',
+        '.agent-outcome button',
+        '[class*="notification"] button',
+        '[class*="outcome"] button'
+      ];
+      notificationSelectors.forEach(sel => {
+        try {
+          content.querySelectorAll(sel).forEach(btn => {
+            const btnText = (btn.textContent || '').trim().toLowerCase();
+            // Skip Follow and Revert buttons (hidden via CSS/JS)
+            if (btnText.includes('follow') || btnText === 'revert') return;
+            btn.style.cursor = 'pointer';
+            btn.onclick = async (e) => {
+              e.preventDefault(); e.stopPropagation();
+              // Identify the button - for icon buttons use aria-label or detect close icon
+              let buttonText = (btn.textContent || '').trim().substring(0, 50);
+              const ariaLabel = btn.getAttribute('aria-label') || '';
+              const isIconButton = btn.classList.contains('kiro-icon-button');
+              const hasCloseIcon = btn.querySelector('.codicon-close, .codicon-x, [class*="close"]');
+              // For X/close icon buttons with no text
+              if (!buttonText && (isIconButton || hasCloseIcon)) {
+                buttonText = ariaLabel || 'dismiss';
+              }
+              const clickInfo = {
+                tag: 'button',
+                text: buttonText,
+                ariaLabel: ariaLabel,
+                role: btn.getAttribute('role') || 'button',
+                className: btn.className || '',
+                isNotificationButton: true,
+                isIconButton: isIconButton || !buttonText
+              };
+              console.log('[Click] Notification button:', clickInfo.text || clickInfo.ariaLabel || 'icon-button');
+              await sendClickToKiro(clickInfo);
+              // Refresh after clicking notification buttons
+              setTimeout(() => fetchChatSnapshot(selectedCascadeId), 500);
+              return false;
+            };
+          });
+        } catch(e) {}
+      });
       // Tabs
       content.querySelectorAll('[role="tab"]').forEach(tab => {
         const closeBtn = tab.querySelector('[aria-label="close"], [class*="close"]');
@@ -1590,6 +1687,118 @@
         };
       });
+      // Model selector buttons and dropdown options
+      const modelNames = ['claude', 'sonnet', 'opus', 'haiku', 'auto', 'gpt', 'model', 'gemini', 'llama'];
+      const modelSelectorSelectors = [
+        '[class*="model-selector"]', '[class*="modelSelector"]', '[class*="ModelSelector"]',
+        '[class*="model-dropdown"]', '[class*="modelDropdown"]', '[class*="ModelDropdown"]',
+        '[aria-label*="model" i]', '[aria-label*="Model"]',
+        '[class*="select-model"]', '[class*="selectModel"]',
+        '[role="combobox"]'
+      ];
+      // Handle model selector buttons
+      modelSelectorSelectors.forEach(sel => {
+        try {
+          content.querySelectorAll(sel).forEach(el => {
+            if (el.onclick) return;
+            el.style.cursor = 'pointer';
+            el.onclick = async (e) => {
+              e.preventDefault(); e.stopPropagation();
+              const clickInfo = {
+                tag: el.tagName?.toLowerCase() || 'button',
+                text: (el.textContent || '').trim().substring(0, 100),
+                ariaLabel: el.getAttribute('aria-label') || '',
+                role: el.getAttribute('role') || 'button',
+                className: el.className || '',
+                isModelSelector: true
+              };
+              await sendClickToKiro(clickInfo);
+              // Refresh snapshot after clicking to show dropdown
+              setTimeout(() => fetchChatSnapshot(selectedCascadeId), 300);
+              return false;
+            };
+          });
+        } catch(e) {}
+      });
+      // Handle dropdown menu items (model options) - including Kiro-specific classes
+      const dropdownItemSelectors = [
+        '.kiro-dropdown-item',
+        '.kiro-dropdown-menu > div',
+        '[role="option"]', '[role="menuitem"]', '[role="listitem"]',
+        '[class*="dropdown-item"]', '[class*="dropdownItem"]', '[class*="DropdownItem"]',
+        '[class*="menu-item"]', '[class*="menuItem"]', '[class*="MenuItem"]'
+      ];
+      dropdownItemSelectors.forEach(sel => {
+        try {
+          content.querySelectorAll(sel).forEach(el => {
+            if (el.onclick) return;
+            // Skip if it's inside a tab
+            if (el.closest('[role="tab"]')) return;
+            const elText = (el.textContent || '').toLowerCase();
+            const isModelOption = modelNames.some(m => elText.includes(m));
+            // Only attach handler if it looks like a model option
+            if (!isModelOption) return;
+            el.style.cursor = 'pointer';
+            el.onclick = async (e) => {
+              e.preventDefault(); e.stopPropagation();
+              // Extract just the model name for cleaner matching
+              let modelText = (el.textContent || '').trim();
+              // Try to get just the first line (model name)
+              const firstLine = modelText.split('\n')[0].trim();
+              if (firstLine.length > 5 && firstLine.length < 50) {
+                modelText = firstLine;
+              }
+              const clickInfo = {
+                tag: el.tagName?.toLowerCase() || 'div',
+                text: modelText.substring(0, 50),
+                ariaLabel: el.getAttribute('aria-label') || '',
+                role: el.getAttribute('role') || 'option',
+                className: el.className || '',
+                isModelOption: true,
+                isModelSelector: false
+              };
+              await sendClickToKiro(clickInfo);
+              // Refresh snapshot after selecting option
+              setTimeout(() => fetchChatSnapshot(selectedCascadeId), 500);
+              return false;
+            };
+          });
+        } catch(e) {}
+      });
+      // Also detect model-related buttons by text content
+      content.querySelectorAll('button, [role="button"]').forEach(btn => {
+        if (btn.onclick) return;
+        const btnText = (btn.textContent || '').toLowerCase();
+        const isModelRelated = modelNames.some(m => btnText.includes(m));
+        if (isModelRelated) {
+          btn.style.cursor = 'pointer';
+          btn.onclick = async (e) => {
+            e.preventDefault(); e.stopPropagation();
+            const clickInfo = {
+              tag: 'button',
+              text: (btn.textContent || '').trim().substring(0, 100),
+              ariaLabel: btn.getAttribute('aria-label') || '',
+              role: btn.getAttribute('role') || 'button',
+              className: btn.className || '',
+              isModelSelector: true
+            };
+            await sendClickToKiro(clickInfo);
+            setTimeout(() => fetchChatSnapshot(selectedCascadeId), 300);
+            return false;
+          };
+        }
+      });
       // File links
       const fileExtensions = /\.(ts|tsx|js|jsx|py|java|html|css|json|md|yaml|yml|xml|sql|go|rs|c|cpp|h|cs|rb|php|sh|vue|svelte)$/i;
       content.querySelectorAll('a, code, span, [class*="file"], [class*="path"], [data-path]').forEach(el => {
@@ -1743,8 +1952,32 @@
     // =============================================================================
     // Kiro Communication
     // =============================================================================
+    // Rate limiting for message sending
+    let lastMessageTime = 0;
+    const MESSAGE_RATE_LIMIT_MS = 1000; // Minimum 1 second between messages
+    let pendingMessage = false;
     async function sendToKiro(message) {
       if (!message || !selectedCascadeId) return;
+      // Rate limiting check
+      const now = Date.now();
+      if (now - lastMessageTime < MESSAGE_RATE_LIMIT_MS) {
+        if (!pendingMessage) {
+          showToast('Please wait before sending another message', 1500);
+        }
+        return;
+      }
+      if (pendingMessage) {
+        showToast('Message already being sent', 1500);
+        return;
+      }
+      pendingMessage = true;
+      lastMessageTime = now;
       try {
         const r = await fetch(`/send/${selectedCascadeId}`, {
           method: 'POST',
@@ -1756,10 +1989,12 @@
         else showToast(result.error || 'Failed to send');
       } catch (e) {
         showToast('Failed to send');
+      } finally {
+        pendingMessage = false;
       }
     }
-    async function sendClickToKiro(clickInfo) {
+    async function sendClickToKiro(clickInfo, retryCount = 0) {
       if (!selectedCascadeId) return;
       const isNavigation = clickInfo.ariaLabel?.toLowerCase().includes('back') ||
@@ -1770,15 +2005,27 @@
       if (isNavigation) navigationPending = true;
       try {
-        await fetch(`/click/${selectedCascadeId}`, {
+        const response = await fetch(`/click/${selectedCascadeId}`, {
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
           body: JSON.stringify(clickInfo)
         });
+        const result = await response.json();
+        // Handle retry for model option clicks (dropdown was opened, need to click option)
+        if (result.needsRetry && clickInfo.isModelOption && retryCount < 2) {
+          console.log('[Click] Dropdown opened, retrying option click in 350ms...');
+          await new Promise(resolve => setTimeout(resolve, 350));
+          return sendClickToKiro(clickInfo, retryCount + 1);
+        }
         if (isNavigation) setTimeout(() => fetchChatSnapshot(selectedCascadeId), 300);
+        return result;
       } catch (e) {
         navigationPending = false;
+        return { success: false, error: e.message };
       }
     }