chore: change log

Author: k0ngk0ng

executors/browser/panel.html

@@ -36,15 +36,15 @@
       display: flex;
       align-items: center;
       gap: 8px;
-      padding: 8px 12px;
+      padding: 12px 16px;
       background: #16213e;
       border-radius: 8px;
       margin-bottom: 16px;
     }
 
     .status-dot {
-      width: 10px;
-      height: 10px;
+      width: 12px;
+      height: 12px;
       border-radius: 50%;
       background: #ff4757;
       transition: background 0.3s;
@@ -56,7 +56,7 @@
 
     .status-text {
       flex: 1;
-      font-size: 13px;
+      font-size: 14px;
     }
 
     .reconnect-btn {
@@ -105,45 +105,13 @@
 
     .info-value {
       color: #eee;
-      max-width: 200px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-
-    .log-container {
-      max-height: 300px;
-      overflow-y: auto;
-    }
-
-    .log-entry {
-      padding: 6px 8px;
-      margin-bottom: 4px;
-      background: #0f0f23;
-      border-radius: 4px;
-      font-family: 'Monaco', 'Menlo', monospace;
-      font-size: 11px;
-      word-break: break-all;
-    }
-
-    .log-entry.success {
-      border-left: 3px solid #2ed573;
     }
 
-    .log-entry.error {
-      border-left: 3px solid #ff4757;
-    }
-
-    .log-entry .time {
+    .hint {
       color: #666;
-      margin-right: 8px;
-    }
-
-    .empty-state {
+      font-size: 12px;
       text-align: center;
-      color: #666;
-      padding: 20px;
-      font-size: 13px;
+      margin-top: 20px;
     }
   </style>
 </head>
@@ -167,12 +135,15 @@ <h1>Wire Agent</h1>
   </div>
 
   <div class="section">
-    <div class="section-title">Activity Log</div>
-    <div class="log-container" id="logContainer">
-      <div class="empty-state">Waiting for commands...</div>
+    <div class="section-title">Executors</div>
+    <div class="info-row">
+      <span class="info-label">Tabs</span>
+      <span class="info-value" id="tabCount">0</span>
     </div>
   </div>
 
+  <p class="hint">Activity logs are in DevTools Console (F12)</p>
+
   <script src="panel.js"></script>
 </body>
 </html>

executors/browser/panel.js

@@ -3,10 +3,7 @@
 const statusDot = document.getElementById("statusDot");
 const statusText = document.getElementById("statusText");
 const reconnectBtn = document.getElementById("reconnectBtn");
-const logContainer = document.getElementById("logContainer");
-
-let logs = [];
-const MAX_LOGS = 50;
+const tabCountEl = document.getElementById("tabCount");
 
 // ============================================================
 // Status Updates
@@ -24,44 +21,11 @@ function updateStatus(connected) {
   }
 }
 
-// ============================================================
-// Logging
-// ============================================================
-
-function addLog(message, success = true) {
-  const now = new Date();
-  const time = now.toLocaleTimeString("en-US", { hour12: false });
-
-  logs.unshift({ time, message, success });
-  if (logs.length > MAX_LOGS) {
-    logs = logs.slice(0, MAX_LOGS);
-  }
-
-  renderLogs();
-}
-
-function renderLogs() {
-  if (logs.length === 0) {
-    logContainer.innerHTML = '<div class="empty-state">Waiting for commands...</div>';
-    return;
-  }
-
-  logContainer.innerHTML = logs
-    .map(
-      (log) => `
-      <div class="log-entry ${log.success ? "success" : "error"}">
-        <span class="time">${log.time}</span>
-        ${escapeHtml(log.message)}
-      </div>
-    `
-    )
-    .join("");
-}
-
-function escapeHtml(text) {
-  const div = document.createElement("div");
-  div.textContent = text;
-  return div.innerHTML;
+function updateTabCount() {
+  chrome.tabs.query({}, (tabs) => {
+    const count = tabs.filter(t => t.url && !t.url.startsWith("chrome://")).length;
+    tabCountEl.textContent = count;
+  });
 }
 
 // ============================================================
@@ -70,39 +34,40 @@ function escapeHtml(text) {
 
 reconnectBtn.addEventListener("click", () => {
   reconnectBtn.disabled = true;
-  chrome.runtime.sendMessage({ type: "RECONNECT" }, (response) => {
-    addLog("Reconnecting...");
-    setTimeout(() => {
-      chrome.runtime.sendMessage({ type: "GET_STATUS" }, (res) => {
-        updateStatus(res?.connected || false);
-      });
-    }, 1000);
+  chrome.runtime.sendMessage({ type: "RECONNECT" }, () => {
+    console.log("[WireAgent] Reconnecting...");
+    setTimeout(refreshStatus, 1000);
   });
 });
 
 // ============================================================
 // Message Listener
 // ============================================================
 
-chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
+chrome.runtime.onMessage.addListener((message) => {
   if (message.type === "CONNECTION_STATUS") {
     updateStatus(message.connected);
-    addLog(message.connected ? "Connected" : "Disconnected", message.connected);
+    console.log("[WireAgent]", message.connected ? "Connected" : "Disconnected");
   }
-
-  if (message.type === "COMMAND_EXECUTED") {
-    addLog(`${message.action}: ${message.result}`, message.success);
-  }
-
   return false;
 });
 
 // ============================================================
 // Initialize
 // ============================================================
 
-chrome.runtime.sendMessage({ type: "GET_STATUS" }, (response) => {
-  updateStatus(response?.connected || false);
-});
+function refreshStatus() {
+  chrome.runtime.sendMessage({ type: "GET_STATUS" }, (response) => {
+    updateStatus(response?.connected || false);
+  });
+}
+
+// Initial status check
+refreshStatus();
+updateTabCount();
+
+// Poll status every 3 seconds
+setInterval(refreshStatus, 3000);
+setInterval(updateTabCount, 5000);
 
-console.log("[WireAgent] Panel initialized");
+console.log("[WireAgent] Panel initialized - Activity logs will appear here");