agentgui 1.0.541 → 1.0.543

package/CLAUDE.md

@@ -219,6 +219,91 @@ After update/install completes:
 3. UI version display updates to show new version
 4. Status reverts to "Installed" or "Up-to-date" accordingly
 
+## Base64 Image Rendering in File Read Events
+
+### Problem: Images Displaying as Raw Text
+
+When an agent reads an image file, the streaming event may not have `type='file_read'`. It can arrive with any type (or fall through to the default case in the renderer switch). Without the `renderGeneric` fallback, the image data displays as raw base64 text instead of an `<img>` element.
+
+### Event Structure for Image File Reads
+
+Two nested structures are used by different agent versions. Both must be handled:
+
+**Structure A** (nested under `source`):
+```json
+{
+  "type": "<anything>",
+  "path": "/path/to/image.png",
+  "content": {
+    "source": {
+      "type": "base64",
+      "data": "<base64-string>"
+    },
+    "media_type": "image/png"
+  }
+}
+```
+
+**Structure B** (flat inside `content`):
+```json
+{
+  "type": "<anything>",
+  "path": "/path/to/image.png",
+  "content": {
+    "type": "base64",
+    "data": "<base64-string>"
+  }
+}
+```
+
+**Structure C** (content is raw base64 string, no wrapping object):
+```json
+{
+  "type": "<anything>",
+  "path": "/path/to/image.png",
+  "content": "iVBORw0KGgo..."
+}
+```
+Structure C is detected by `detectBase64Image()` which checks magic-byte prefixes (PNG: `iVBORw0KGgo`, JPEG: `/9j/4AAQ`, WebP: `UklGRi`, GIF: `R0lGODlh`).
+
+### Two Rendering Paths in streaming-renderer.js
+
+**Path 1 – Direct dispatch** (`renderEvent` switch statement):
+- `case 'file_read'` routes directly to `renderFileRead(event)`.
+- Handles all three content structures above.
+
+**Path 2 – Generic fallback** (`renderGeneric`):
+- Called for any event type not matched by the switch (the `default` case).
+- First thing it does: check for `event.content?.source?.type === 'base64'` OR `event.content?.type === 'base64'` AND `event.path` present.
+- If true, delegates to `renderFileRead(event)` so the image renders correctly.
+- Without this fallback, any file-read event that arrives with an unrecognised type displays as raw key-value text.
+
+### MIME Type Resolution in renderFileRead
+
+Priority order inside `renderFileRead`:
+1. `event.media_type` field (explicit)
+2. Detected from magic bytes via `detectBase64Image()` → maps `jpeg` → `image/jpeg`, others → `image/<type>`
+3. Falls back to `application/octet-stream` (shows broken image)
+
+Always include `media_type` on the event when possible. If absent, magic-byte detection covers PNG/JPEG/WebP/GIF automatically.
+
+### Debugging Checklist When Images Show as Text
+
+1. `console.log(event)` the raw event object arriving at the renderer — verify `content` structure.
+2. Check `event.type` — if it is not `'file_read'`, the switch default fires `renderGeneric`.
+3. Confirm `renderGeneric` has the base64 fallback guard at the top (search for `content?.source?.type === 'base64'`).
+4. Confirm `renderFileRead` handles both `content.source.data` and `content.data` paths (both exist in the code).
+5. Verify `event.path` is set — the fallback in `renderGeneric` requires `event.path` to delegate correctly.
+6. If `media_type` is missing and content is not PNG/JPEG/WebP/GIF, add it to the event or extend `detectBase64Image` signatures.
+
+### Why Two Attempts Failed Before the Fix
+
+- Attempt 1: Modified only `renderFileRead` but the event had an unrecognised type so the switch never reached `renderFileRead`.
+- Attempt 2: Added fallback in `renderGeneric` but checked only `event.content?.source?.type === 'base64'` — missed Structure B where data sits directly on `event.content` (no `source` nesting).
+- Fix: `renderGeneric` now checks both structures before falling through to generic key-value rendering.
+
+---
+
 ## Tool Update Testing & Diagnostics
 
 A comprehensive diagnostic page is available at `http://localhost:3000/gm/tool-update-test.html` (`static/tool-update-test.html`) with 7 interactive test sections:

package/lib/tool-manager.js

@@ -9,6 +9,7 @@ const TOOLS = [
   { id: 'gm-oc', name: 'gm-oc', pkg: 'gm-oc', pluginId: 'gm-oc' },
   { id: 'gm-gc', name: 'gm-gc', pkg: 'gm-gc', pluginId: 'gm' },
   { id: 'gm-kilo', name: 'gm-kilo', pkg: 'gm-kilo', pluginId: 'gm-kilo' },
+  { id: 'codex', name: '@openai/codex', pkg: '@openai/codex', pluginId: 'codex' },
 ];
 
 const statusCache = new Map();
@@ -76,6 +77,17 @@ const getInstalledVersion = (pkg, pluginId = null) => {
         console.warn(`[tool-manager] Failed to parse ${kiloPath}:`, e.message);
       }
     }
+
+    // Check Codex CLI (stored at ~/.codex)
+    const codexPath = path.join(homeDir, '.codex', 'plugin.json');
+    if (fs.existsSync(codexPath)) {
+      try {
+        const pluginJson = JSON.parse(fs.readFileSync(codexPath, 'utf-8'));
+        if (pluginJson.version) return pluginJson.version;
+      } catch (e) {
+        console.warn(`[tool-manager] Failed to parse ${codexPath}:`, e.message);
+      }
+    }
   } catch (_) {}
   return null;
 };
@@ -129,6 +141,7 @@ const checkToolInstalled = (pluginId) => {
     if (fs.existsSync(path.join(homeDir, '.config', 'kilo', 'agents', pluginId + '.md'))) return true;
     if (fs.existsSync(path.join(homeDir, '.config', 'opencode', 'agents', 'gm.md'))) return true;
     if (fs.existsSync(path.join(homeDir, '.config', 'kilo', 'agents', 'gm.md'))) return true;
+    if (pluginId === 'codex' && fs.existsSync(path.join(homeDir, '.codex', 'plugin.json'))) return true;
   } catch (_) {}
   return false;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agentgui",
-  "version": "1.0.541",
+  "version": "1.0.543",
   "description": "Multi-agent ACP client with real-time communication",
   "type": "module",
   "main": "server.js",

package/static/index.html

@@ -864,9 +864,15 @@
       display: inline-block;
     }
 
+    .message-input-container {
+      position: relative;
+      flex: 1;
+      display: flex;
+    }
+
     .message-textarea {
       flex: 1;
-      padding: 0.625rem 0.875rem;
+      padding: 0.625rem 2.75rem 0.625rem 0.875rem;
       border: none;
       border-radius: 0.75rem;
       background-color: var(--color-bg-secondary);
@@ -1144,11 +1150,14 @@
     }
 
     .voice-mic-btn {
+      position: absolute;
+      top: 4px;
+      right: 4px;
       display: flex;
       align-items: center;
       justify-content: center;
-      width: 44px;
-      height: 44px;
+      width: 36px;
+      height: 36px;
       background: var(--color-bg-secondary);
       color: var(--color-text-secondary);
       border: 2px solid var(--color-border);
@@ -3187,21 +3196,23 @@
           <select class="agent-selector cli-selector" data-cli-selector title="Select CLI tool"></select>
           <select class="agent-selector sub-agent-selector" data-agent-selector title="Select sub-agent" style="display:none"></select>
           <select class="model-selector" data-model-selector title="Select model" data-empty="true"></select>
-          <textarea
-            class="message-textarea"
-            data-message-input
-            placeholder="Message AgentGUI... (Ctrl+Enter to send)"
-            aria-label="Message input"
-            rows="1"
-          ></textarea>
-          <button class="voice-mic-btn" id="chatMicBtn" title="Record voice input" aria-label="Voice input">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/>
-              <path d="M19 10v2a7 7 0 0 1-14 0v-2"/>
-              <line x1="12" y1="19" x2="12" y2="23"/>
-              <line x1="8" y1="23" x2="16" y2="23"/>
-            </svg>
-          </button>
+          <div class="message-input-container">
+            <textarea
+              class="message-textarea"
+              data-message-input
+              placeholder="Message AgentGUI... (Ctrl+Enter to send)"
+              aria-label="Message input"
+              rows="1"
+            ></textarea>
+            <button class="voice-mic-btn" id="chatMicBtn" title="Record voice input" aria-label="Voice input">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/>
+                <path d="M19 10v2a7 7 0 0 1-14 0v-2"/>
+                <line x1="12" y1="19" x2="12" y2="23"/>
+                <line x1="8" y1="23" x2="16" y2="23"/>
+              </svg>
+            </button>
+          </div>
           <button class="inject-btn" id="injectBtn" title="Inject instructions into running agent" aria-label="Inject instructions">
             <svg viewBox="0 0 24 24" fill="currentColor" width="18" height="18">
               <path d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"/>

package/static/js/streaming-renderer.js

@@ -1996,6 +1996,11 @@ class StreamingRenderer {
    * Render generic event with formatted key-value pairs
    */
   renderGeneric(event) {
+    // Check if this is actually a file read with base64 image content
+    if ((event.content?.source?.type === 'base64' || event.content?.type === 'base64') && event.path) {
+      return this.renderFileRead(event);
+    }
+
     const div = document.createElement('div');
     div.className = 'event-generic mb-3 p-3 bg-gray-100 dark:bg-gray-800 rounded text-sm';
     div.dataset.eventId = event.id || '';