flying-lobster 1.6.2 → 1.6.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flying-lobster",
-  "version": "1.6.2",
+  "version": "1.6.3",
   "description": "Always-on-top chat window for OpenClaw gateways 🦞",
   "author": "Rootlab.ai",
   "license": "MIT",
@@ -31,15 +31,20 @@
       "assets/**/*"
     ],
     "mac": {
+      "icon": "assets/icon.icns",
       "category": "public.app-category.productivity",
       "target": [
         {
           "target": "dmg",
-          "arch": ["universal"]
+          "arch": [
+            "universal"
+          ]
         },
         {
           "target": "dir",
-          "arch": ["universal"]
+          "arch": [
+            "universal"
+          ]
         }
       ]
     },

package/src/main/index.js

@@ -36,6 +36,8 @@ const OPENCLAW_CSS = `
   .chat-compose__actions .btn { padding: 0 10px !important; }
   .chat-group-messages { max-width: 100% !important; }
   .chat-group { margin-right: 4px !important; margin-left: 4px !important; }
+  /* Hide tool call/result cards */
+  .chat-tool-card { display: none !important; }
 `;
 
 const OPENCLAW_JS = `
@@ -107,9 +109,17 @@ ipcMain.handle('delete-gateway', (_e, id) => {
   return gateways;
 });
 
-ipcMain.handle('get-active-gateway', () => store.get('activeGateway'));
+ipcMain.handle('get-active-gateway', () => {
+  const id = store.get('activeGateway');
+  console.log('[Main] get-active-gateway:', id);
+  return id;
+});
 
 ipcMain.handle('set-active-gateway', (_e, id) => {
+  console.log('[Main] set-active-gateway:', id);
+  const gateways = store.get('gateways');
+  const gw = gateways.find(g => g.id === id);
+  console.log('[Main] Gateway details:', gw?.name, gw?.url);
   store.set('activeGateway', id);
   return id;
 });
@@ -148,6 +158,19 @@ ipcMain.handle('get-theme', () => {
   return nativeTheme.shouldUseDarkColors ? 'dark' : 'light';
 });
 
+// Toggle between dark and light theme
+function toggleTheme() {
+  // Cycle: system -> dark -> light -> system
+  // Or simply toggle: dark <-> light
+  if (nativeTheme.themeSource === 'system') {
+    nativeTheme.themeSource = nativeTheme.shouldUseDarkColors ? 'light' : 'dark';
+  } else if (nativeTheme.themeSource === 'dark') {
+    nativeTheme.themeSource = 'light';
+  } else {
+    nativeTheme.themeSource = 'dark';
+  }
+}
+
 // Notify all windows when theme changes
 nativeTheme.on('updated', () => {
   const theme = nativeTheme.shouldUseDarkColors ? 'dark' : 'light';
@@ -193,11 +216,29 @@ function createWindow() {
 
   mainWindow.loadFile(path.join(__dirname, '..', 'renderer', 'index.html'));
 
+  // Open DevTools with Cmd+Option+I
+  mainWindow.webContents.on('before-input-event', (event, input) => {
+    if (input.meta && input.alt && input.key === 'i') {
+      mainWindow.webContents.openDevTools({ mode: 'detach' });
+    }
+  });
+
   // Inject CSS/JS into any webview that loads inside this window
   mainWindow.webContents.on('did-attach-webview', (event, wvWebContents) => {
+    console.log('[Main] Webview attached, URL:', wvWebContents.getURL());
+    
+    wvWebContents.on('did-start-loading', () => console.log('[Main] Webview did-start-loading'));
+    wvWebContents.on('did-stop-loading', () => console.log('[Main] Webview did-stop-loading'));
+    wvWebContents.on('did-fail-load', (e, code, desc) => console.log('[Main] Webview did-fail-load:', code, desc));
+    
     wvWebContents.on('dom-ready', () => {
-      wvWebContents.insertCSS(OPENCLAW_CSS).catch(e => console.error('Main insertCSS failed:', e));
-      wvWebContents.executeJavaScript(OPENCLAW_JS).catch(e => console.error('Main executeJS failed:', e));
+      const url = wvWebContents.getURL();
+      console.log('[Main] Webview dom-ready, URL:', url);
+      
+      // TEMPORARILY DISABLE INJECTION TO DEBUG
+      // wvWebContents.insertCSS(OPENCLAW_CSS).catch(e => console.error('Main insertCSS failed:', e));
+      // wvWebContents.executeJavaScript(OPENCLAW_JS).catch(e => console.error('Main executeJS failed:', e));
+      console.log('[Main] CSS/JS injection DISABLED for debugging');
     });
   });
 
@@ -223,6 +264,19 @@ function createWindow() {
     if (input.key === 'Escape') {
       mainWindow.hide();
     }
+    // Catch agent switching shortcuts even when webview has focus
+    if (input.type === 'keyDown' && input.shift && (input.meta || input.control)) {
+      if (input.key === 'ArrowRight') {
+        event.preventDefault();
+        cycleGateway('next');
+      } else if (input.key === 'ArrowLeft') {
+        event.preventDefault();
+        cycleGateway('prev');
+      } else if (input.key === 'k' || input.key === 'K') {
+        event.preventDefault();
+        toggleTheme();
+      }
+    }
   });
 
   mainWindow.on('closed', () => {
@@ -337,6 +391,10 @@ function registerHotkey() {
   
   if (!nextRegistered) console.error('Failed to register Cmd+Shift+Right');
   if (!prevRegistered) console.error('Failed to register Cmd+Shift+Left');
+  
+  // Theme toggle shortcut (Cmd+Shift+K)
+  const themeRegistered = globalShortcut.register('CommandOrControl+Shift+K', toggleTheme);
+  if (!themeRegistered) console.error('Failed to register Cmd+Shift+K for theme toggle');
 }
 
 if (process.platform === 'darwin') {

package/src/renderer/index.html

@@ -353,6 +353,9 @@
     }
 
     function loadGatewayUrl(url, token) {
+      console.log('[FL Debug] loadGatewayUrl called:', url, 'token:', token ? 'yes' : 'no');
+      console.log('[FL Debug] currentGatewayUrl:', currentGatewayUrl, 'currentWebview:', !!currentWebview);
+      
       if (!url) {
         destroyWebview();
         showOverlay('empty');
@@ -361,9 +364,13 @@
       }
 
       // Don't reload if same URL
-      if (currentGatewayUrl === url && currentWebview) return;
+      if (currentGatewayUrl === url && currentWebview) {
+        console.log('[FL Debug] Skipping reload - same URL');
+        return;
+      }
 
       destroyWebview();
+      console.log('[FL Debug] Showing loading overlay');
       showOverlay('loading');
       dot.className = 'status-dot loading';
 
@@ -375,11 +382,19 @@
       }
 
       const wv = document.createElement('webview');
+      console.log('[FL Debug] Loading URL:', loadUrl);
       wv.src = loadUrl;
       wv.style.cssText = 'position:absolute;inset:0;width:100%;height:100%;border:none;';
       wv.setAttribute('allowpopups', '');
       wv.setAttribute('partition', 'persist:gateway');
+      
+      wv.addEventListener('did-start-loading', () => console.log('[FL Debug] did-start-loading'));
+      wv.addEventListener('did-stop-loading', () => console.log('[FL Debug] did-stop-loading'));
+      wv.addEventListener('did-finish-load', () => console.log('[FL Debug] did-finish-load'));
+      wv.addEventListener('console-message', (e) => console.log('[FL Webview]', e.message));
+      
       wv.addEventListener('dom-ready', () => {
+        console.log('[FL Debug] dom-ready');
         showOverlay(null); // hide all
         dot.className = 'status-dot online';
         // Inject CSS at document level — CSS custom properties inherit into shadow DOM
@@ -505,6 +520,18 @@
       window.api.onGatewaysUpdated(loadGateways);
     }
 
+    // Listen for agent switch from main process (Cmd+Shift+Arrow shortcuts)
+    if (window.api && window.api.onSwitchGateway) {
+      window.api.onSwitchGateway(async (gatewayId) => {
+        const gw = gatewaysList.find(g => g.id === gatewayId);
+        if (gw) {
+          select.value = gw.id;
+          showAgentIndicator(gw.name);
+          loadGatewayUrl(gw.url, gw.token);
+        }
+      });
+    }
+
     // Add Gateway button (empty state)
     document.getElementById('add-gw-btn').addEventListener('click', () => {
       window.api.openSettings();

package/src/renderer/settings.html

@@ -130,50 +130,92 @@
     :root.light .btn-secondary { background: #c7c7cc; color: #1d1d1f; }
     :root.light .btn-secondary:hover { background: #aeaeb2; }
 
-    /* Hotkey section */
-    .hotkey-section { margin-top: 8px; }
-    .hotkey-row { display: flex; gap: 8px; align-items: center; }
-    .hotkey-row input { max-width: 260px; }
-
-    .toast {
-      position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%);
-      background: var(--success); color: #fff; padding: 8px 20px; border-radius: 6px;
-      font-size: 13px; opacity: 0; transition: opacity 0.3s; pointer-events: none;
-    }
-    .toast.show { opacity: 1; }
-    .toast.error { background: var(--danger); }
-
-    /* Keyboard shortcuts hint */
-    .shortcuts-hint {
-      margin-top: 24px;
-      padding: 12px;
+    /* Keyboard Shortcuts section */
+    .shortcuts-section { margin-top: 8px; }
+    .shortcuts-list {
+      display: flex;
+      flex-direction: column;
       background: var(--bg-secondary);
       border-radius: 8px;
-      font-size: 12px;
-      color: var(--text-secondary);
-      transition: background 0.2s, color 0.2s;
-    }
-    .shortcuts-hint h3 {
-      font-size: 12px;
-      text-transform: uppercase;
-      letter-spacing: 0.5px;
-      margin-bottom: 8px;
-      color: var(--text-muted);
+      overflow: hidden;
     }
-    .shortcuts-hint .shortcut {
+    .shortcut-item {
       display: flex;
+      align-items: center;
       justify-content: space-between;
-      padding: 4px 0;
+      padding: 12px 14px;
+      border-bottom: 1px solid var(--border-color);
+      transition: background 0.2s;
     }
-    .shortcuts-hint kbd {
+    .shortcut-item:last-child { border-bottom: none; }
+    .shortcut-item .label {
+      font-size: 13px;
+      font-weight: 500;
+      color: var(--text-primary);
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+    .shortcut-item .keys {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+    }
+    .shortcut-item kbd {
       background: var(--bg-input);
       border: 1px solid var(--border-color);
       border-radius: 4px;
-      padding: 2px 6px;
+      padding: 4px 8px;
       font-family: -apple-system, BlinkMacSystemFont, monospace;
-      font-size: 11px;
+      font-size: 12px;
       color: var(--text-primary);
+      min-width: 24px;
+      text-align: center;
+      transition: background 0.2s, border-color 0.2s, color 0.2s;
+    }
+    .shortcut-item.editable {
+      background: rgba(93,173,226,0.05);
+    }
+    :root.light .shortcut-item.editable {
+      background: rgba(0,113,227,0.05);
+    }
+    .shortcut-item .hotkey-input-wrapper {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+    .shortcut-item #hotkey-input {
+      width: 180px;
+      font-size: 12px;
+      padding: 6px 10px;
+      text-align: center;
+      font-family: -apple-system, BlinkMacSystemFont, monospace;
+    }
+    .shortcut-item .btn {
+      padding: 6px 12px;
+      font-size: 12px;
     }
+    .editable-badge {
+      font-size: 9px;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      color: var(--accent);
+      font-weight: 600;
+      background: rgba(93,173,226,0.15);
+      padding: 2px 6px;
+      border-radius: 4px;
+    }
+    :root.light .editable-badge {
+      background: rgba(0,113,227,0.1);
+    }
+
+    .toast {
+      position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%);
+      background: var(--success); color: #fff; padding: 8px 20px; border-radius: 6px;
+      font-size: 13px; opacity: 0; transition: opacity 0.3s; pointer-events: none;
+    }
+    .toast.show { opacity: 1; }
+    .toast.error { background: var(--danger); }
   </style>
 </head>
 <body>
@@ -186,7 +228,8 @@
     <h2>Gateways</h2>
     <div class="gw-list" id="gw-list"></div>
 
-    <div class="form" id="gw-form">
+    <button class="btn btn-secondary" id="gw-add-btn" style="margin-bottom: 16px;">+ Add Gateway</button>
+    <div class="form" id="gw-form" style="display: none;">
       <div class="form-row">
         <input id="gw-name" placeholder="Name (e.g. Rooty)" />
         <input id="gw-url" placeholder="URL (e.g. http://localhost:19002)" />
@@ -196,31 +239,35 @@
       </div>
       <div class="form-row">
         <button class="btn" id="gw-save">Add Gateway</button>
-        <button class="btn btn-secondary" id="gw-cancel" style="display:none">Cancel</button>
+        <button class="btn btn-secondary" id="gw-cancel">Cancel</button>
       </div>
     </div>
 
-    <h2>Hotkey</h2>
-    <div class="hotkey-section">
-      <div class="hotkey-row">
-        <input id="hotkey-input" placeholder="CommandOrControl+Shift+L" />
-        <button class="btn" id="hotkey-save">Save</button>
-      </div>
-    </div>
-
-    <div class="shortcuts-hint">
-      <h3>Keyboard Shortcuts</h3>
-      <div class="shortcut">
-        <span>Next agent</span>
-        <span><kbd>⌘</kbd> <kbd>⇧</kbd> <kbd>→</kbd></span>
-      </div>
-      <div class="shortcut">
-        <span>Previous agent</span>
-        <span><kbd>⌘</kbd> <kbd>⇧</kbd> <kbd>←</kbd></span>
-      </div>
-      <div class="shortcut">
-        <span>Hide window</span>
-        <span><kbd>Esc</kbd></span>
+    <h2>Keyboard Shortcuts</h2>
+    <div class="shortcuts-section">
+      <div class="shortcuts-list">
+        <div class="shortcut-item editable">
+          <span class="label">
+            Show/Hide Window
+            <span class="editable-badge">Editable</span>
+          </span>
+          <div class="hotkey-input-wrapper">
+            <input id="hotkey-input" placeholder="⌘⇧L" />
+            <button class="btn" id="hotkey-save">Save</button>
+          </div>
+        </div>
+        <div class="shortcut-item">
+          <span class="label">Next Agent</span>
+          <span class="keys"><kbd>⌘</kbd><kbd>⇧</kbd><kbd>→</kbd></span>
+        </div>
+        <div class="shortcut-item">
+          <span class="label">Previous Agent</span>
+          <span class="keys"><kbd>⌘</kbd><kbd>⇧</kbd><kbd>←</kbd></span>
+        </div>
+        <div class="shortcut-item">
+          <span class="label">Toggle Theme</span>
+          <span class="keys"><kbd>⌘</kbd><kbd>⇧</kbd><kbd>K</kbd></span>
+        </div>
       </div>
     </div>
   </div>

package/src/renderer/settings.js

@@ -58,6 +58,25 @@ function esc(s) {
   return d.innerHTML;
 }
 
+// ── Form visibility ───────────────────────────────────────────
+function showForm() {
+  $('#gw-form').style.display = '';
+  $('#gw-add-btn').style.display = 'none';
+  $('#gw-name').focus();
+}
+
+function hideForm() {
+  $('#gw-form').style.display = 'none';
+  $('#gw-add-btn').style.display = '';
+  editingId = null;
+  $('#gw-name').value = '';
+  $('#gw-url').value = '';
+  $('#gw-token').value = '';
+  $('#gw-save').textContent = 'Add Gateway';
+}
+
+$('#gw-add-btn').addEventListener('click', showForm);
+
 // ── Add / Edit ────────────────────────────────────────────────
 function startEdit(gw) {
   editingId = gw.id;
@@ -65,16 +84,11 @@ function startEdit(gw) {
   $('#gw-url').value = gw.url;
   $('#gw-token').value = gw.token || '';
   $('#gw-save').textContent = 'Update Gateway';
-  $('#gw-cancel').style.display = '';
+  showForm();
 }
 
 function cancelEdit() {
-  editingId = null;
-  $('#gw-name').value = '';
-  $('#gw-url').value = '';
-  $('#gw-token').value = '';
-  $('#gw-save').textContent = 'Add Gateway';
-  $('#gw-cancel').style.display = 'none';
+  hideForm();
 }
 
 $('#gw-save').addEventListener('click', async () => {
@@ -90,7 +104,7 @@ $('#gw-save').addEventListener('click', async () => {
     await window.api.addGateway({ name, url, token });
     toast('Gateway added');
   }
-  cancelEdit();
+  hideForm();
   renderGateways();
 });
 
@@ -103,11 +117,148 @@ async function deleteGateway(id) {
 }
 
 // ── Hotkey ────────────────────────────────────────────────────
+// Stores the Electron-format hotkey string
+let currentHotkeyElectron = '';
+
+// Map keys to display symbols (macOS style)
+const MODIFIER_SYMBOLS = {
+  meta: '⌘',     // Cmd
+  ctrl: '⌃',     // Control
+  alt: '⌥',      // Option
+  shift: '⇧',    // Shift
+};
+
+// Special key display names
+const KEY_DISPLAY = {
+  'ArrowUp': '↑',
+  'ArrowDown': '↓',
+  'ArrowLeft': '←',
+  'ArrowRight': '→',
+  'Escape': 'Esc',
+  'Backspace': '⌫',
+  'Delete': '⌦',
+  'Enter': '↵',
+  'Tab': '⇥',
+  'Space': '␣',
+  ' ': '␣',
+};
+
+// Convert keyboard event to display string and Electron format
+function parseHotkey(e) {
+  const modifiers = [];
+  const electronParts = [];
+  
+  // Order: Ctrl, Alt, Shift, Meta (standard order for display)
+  // But for macOS feel, we show: ⌃⌥⇧⌘
+  if (e.ctrlKey && !e.metaKey) {
+    modifiers.push(MODIFIER_SYMBOLS.ctrl);
+    electronParts.push('Control');
+  }
+  if (e.altKey) {
+    modifiers.push(MODIFIER_SYMBOLS.alt);
+    electronParts.push('Alt');
+  }
+  if (e.shiftKey) {
+    modifiers.push(MODIFIER_SYMBOLS.shift);
+    electronParts.push('Shift');
+  }
+  if (e.metaKey) {
+    modifiers.push(MODIFIER_SYMBOLS.meta);
+    electronParts.push('CommandOrControl');
+  }
+  
+  // Get the main key (ignore standalone modifier keys)
+  const key = e.key;
+  const code = e.code;
+  
+  // Skip if only modifier pressed
+  if (['Meta', 'Control', 'Alt', 'Shift'].includes(key)) {
+    return null;
+  }
+  
+  // Determine display and Electron key
+  let displayKey = KEY_DISPLAY[key] || KEY_DISPLAY[code] || key.toUpperCase();
+  let electronKey = key.length === 1 ? key.toUpperCase() : key;
+  
+  // Handle special cases for Electron
+  if (code.startsWith('Arrow')) {
+    electronKey = code.replace('Arrow', '');
+  } else if (key === ' ') {
+    electronKey = 'Space';
+  }
+  
+  // Must have at least one modifier for a global hotkey
+  if (modifiers.length === 0) {
+    return null;
+  }
+  
+  return {
+    display: modifiers.join('') + displayKey,
+    electron: [...electronParts, electronKey].join('+'),
+  };
+}
+
+// Convert Electron format back to display symbols
+function electronToDisplay(electronStr) {
+  if (!electronStr) return '';
+  
+  const parts = electronStr.split('+');
+  const display = [];
+  let mainKey = '';
+  
+  for (const part of parts) {
+    switch (part) {
+      case 'CommandOrControl':
+      case 'Command':
+      case 'Cmd':
+        display.push('⌘');
+        break;
+      case 'Control':
+      case 'Ctrl':
+        display.push('⌃');
+        break;
+      case 'Alt':
+      case 'Option':
+        display.push('⌥');
+        break;
+      case 'Shift':
+        display.push('⇧');
+        break;
+      default:
+        // Main key
+        mainKey = KEY_DISPLAY[part] || KEY_DISPLAY['Arrow' + part] || part;
+    }
+  }
+  
+  return display.join('') + mainKey;
+}
+
+// Hotkey input capture
+const hotkeyInput = $('#hotkey-input');
+
+hotkeyInput.addEventListener('focus', () => {
+  hotkeyInput.classList.add('capturing');
+});
+
+hotkeyInput.addEventListener('blur', () => {
+  hotkeyInput.classList.remove('capturing');
+});
+
+hotkeyInput.addEventListener('keydown', (e) => {
+  e.preventDefault();
+  e.stopPropagation();
+  
+  const result = parseHotkey(e);
+  if (result) {
+    hotkeyInput.value = result.display;
+    currentHotkeyElectron = result.electron;
+  }
+});
+
 $('#hotkey-save').addEventListener('click', async () => {
-  const hotkey = $('#hotkey-input').value.trim();
-  if (!hotkey) return toast('Enter a hotkey', true);
+  if (!currentHotkeyElectron) return toast('Press a hotkey combination first', true);
   try {
-    await window.api.updateSettings({ hotkey });
+    await window.api.updateSettings({ hotkey: currentHotkeyElectron });
     toast('Hotkey saved');
   } catch (e) {
     toast('Failed to save hotkey', true);
@@ -121,5 +272,9 @@ $('#close-btn').addEventListener('click', () => window.close());
 (async () => {
   renderGateways();
   const settings = await window.api.getSettings();
-  $('#hotkey-input').value = settings.hotkey || '';
+  // Load existing hotkey and display as symbols
+  if (settings.hotkey) {
+    currentHotkeyElectron = settings.hotkey;
+    $('#hotkey-input').value = electronToDisplay(settings.hotkey);
+  }
 })();