chore: version packages

Author: Ark0N

CHANGELOG.md

@@ -1,5 +1,11 @@
 # aicodeman
 
+## 0.3.0
+
+### Minor Changes
+
+- QR code authentication for tunnel access, 7-phase codebase refactor (route extraction, type domain modules, frontend module split, config consolidation, managed timers, test infrastructure), overlay rendering fixes, and security hardening
+
 ## 0.2.9
 
 ### Patch Changes

CLAUDE.md

@@ -52,7 +52,7 @@ When user says "COM":
 4. **Sync CLAUDE.md version**: Update the `**Version**` line below to match the new version from `package.json`
 5. **Commit and deploy**: `git add -A && git commit -m "chore: version packages" && git push && npm run build && systemctl --user restart codeman-web`
 
-**Version**: 0.2.9 (must match `package.json`)
+**Version**: 0.3.0 (must match `package.json`)
 
 ## Project Overview
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "aicodeman",
-  "version": "0.2.9",
+  "version": "0.3.0",
   "description": "The missing control plane for AI coding agents - run 20 autonomous agents with real-time monitoring and session persistence",
   "type": "module",
   "main": "dist/index.js",

src/web/routes/session-routes.ts

@@ -41,10 +41,7 @@ import type { SessionPort, EventPort, ConfigPort, InfraPort, AuthPort } from '..
 import { MAX_CONCURRENT_SESSIONS } from '../../config/map-limits.js';
 import { RunSummaryTracker } from '../../run-summary.js';
 
-import {
-  MAX_INPUT_LENGTH,
-  MAX_SESSION_NAME_LENGTH,
-} from '../../config/terminal-limits.js';
+import { MAX_INPUT_LENGTH, MAX_SESSION_NAME_LENGTH } from '../../config/terminal-limits.js';
 
 // Pre-compiled regex for terminal buffer cleaning (avoids per-request compilation)
 // eslint-disable-next-line no-control-regex

test-bg-deep.mjs

@@ -0,0 +1,67 @@
+import { chromium } from 'playwright';
+
+const browser = await chromium.launch({ headless: true });
+const page = await browser.newPage({ viewport: { width: 1400, height: 900 } });
+
+await page.goto('http://localhost:3099', { waitUntil: 'domcontentloaded' });
+await page.waitForTimeout(6000);
+await page.locator('.session-tab').first().click();
+await page.waitForTimeout(4000);
+
+// Check ALL background colors in the xterm rendering stack
+const bgInfo = await page.evaluate(() => {
+  const term = window.app?.terminal;
+  if (!term) return { error: 'no terminal' };
+  
+  const el = term.element;
+  if (!el) return { error: 'no element' };
+  
+  const results = {};
+  
+  // Walk up from xterm-screen to find who provides the background
+  const screen = el.querySelector('.xterm-screen');
+  const viewport = el.querySelector('.xterm-viewport');
+  const rows = el.querySelector('.xterm-rows');
+  
+  const elements = {
+    '.xterm (term.element)': el,
+    '.xterm-viewport': viewport,
+    '.xterm-screen': screen,
+    '.xterm-rows': rows,
+  };
+  
+  // Also check parent elements
+  let parent = el.parentElement;
+  let depth = 0;
+  while (parent && depth < 5) {
+    elements[`parent-${depth} (${parent.tagName}.${parent.className?.split(' ')[0] || ''})`] = parent;
+    parent = parent.parentElement;
+    depth++;
+  }
+  
+  for (const [name, elem] of Object.entries(elements)) {
+    if (!elem) { results[name] = 'not found'; continue; }
+    const cs = getComputedStyle(elem);
+    results[name] = {
+      background: cs.background?.slice(0, 80),
+      backgroundColor: cs.backgroundColor,
+      inlineStyle: elem.style.backgroundColor || elem.style.background || '(none)',
+    };
+  }
+  
+  // Also check if xterm-viewport has inline style set by xterm.js
+  if (viewport) {
+    results['viewport-inline-full'] = viewport.style.cssText?.slice(0, 200);
+  }
+  
+  // Theme config
+  results.theme = term.options?.theme;
+  
+  // Overlay bg
+  results.overlayBg = window.app?._localEchoOverlay?._font?.backgroundColor;
+  
+  return results;
+});
+
+console.log(JSON.stringify(bgInfo, null, 2));
+await browser.close();

test-bg-mismatch.mjs

@@ -0,0 +1,85 @@
+import { chromium } from 'playwright';
+
+const browser = await chromium.launch({ headless: true });
+const page = await browser.newPage({ viewport: { width: 1400, height: 900 } });
+
+await page.goto('http://localhost:3099', { waitUntil: 'domcontentloaded' });
+await page.waitForTimeout(6000);
+await page.locator('.session-tab').first().click();
+await page.waitForTimeout(4000);
+
+// Sample the ACTUAL canvas pixel color at an empty area
+const colorInfo = await page.evaluate(() => {
+  const term = window.app?.terminal;
+  if (!term) return { error: 'no terminal' };
+  
+  // Find the WebGL canvas
+  const screen = term.element?.querySelector('.xterm-screen');
+  const canvases = screen?.querySelectorAll('canvas');
+  
+  const results = {};
+  
+  for (const canvas of canvases || []) {
+    const ctx = canvas.getContext('2d') || canvas.getContext('webgl') || canvas.getContext('webgl2');
+    const ctxType = ctx?.constructor?.name;
+    
+    if (ctx && (ctxType === 'CanvasRenderingContext2D')) {
+      // 2D context — can read pixels directly
+      try {
+        const pixel = ctx.getImageData(10, 10, 1, 1).data;
+        results['2d'] = {
+          r: pixel[0], g: pixel[1], b: pixel[2], a: pixel[3],
+          hex: '#' + [pixel[0], pixel[1], pixel[2]].map(v => v.toString(16).padStart(2, '0')).join(''),
+        };
+      } catch (e) {
+        results['2d'] = { error: e.message };
+      }
+    } else if (ctx) {
+      // WebGL context — use readPixels
+      try {
+        const gl = ctx;
+        const pixel = new Uint8Array(4);
+        // Read from an empty area (bottom-left corner, row 0 col 0)
+        gl.readPixels(10, canvas.height - 10, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, pixel);
+        results['webgl'] = {
+          r: pixel[0], g: pixel[1], b: pixel[2], a: pixel[3],
+          hex: '#' + [pixel[0], pixel[1], pixel[2]].map(v => v.toString(16).padStart(2, '0')).join(''),
+        };
+      } catch (e) {
+        results['webgl'] = { error: e.message };
+      }
+    }
+  }
+  
+  // Also check what the terminal theme says
+  results.theme = {
+    background: term.options?.theme?.background,
+    foreground: term.options?.theme?.foreground,
+  };
+  
+  // Check the overlay's configured background
+  const overlay = window.app?._localEchoOverlay;
+  results.overlayBg = overlay?._font?.backgroundColor;
+  
+  // Check xterm-rows computed style
+  const rows = term.element?.querySelector('.xterm-rows');
+  if (rows) {
+    results.rowsBg = getComputedStyle(rows).backgroundColor;
+  }
+  
+  // Check .xterm element bg
+  const xtermEl = term.element;
+  if (xtermEl) {
+    results.xtermBg = getComputedStyle(xtermEl).backgroundColor;
+  }
+  
+  // Canvas count and types
+  results.canvasCount = canvases?.length;
+  results.canvasClasses = Array.from(canvases || []).map(c => c.className);
+  
+  return results;
+});
+
+console.log(JSON.stringify(colorInfo, null, 2));
+await browser.close();
+console.log('Done');

test-dims.mjs

@@ -0,0 +1,48 @@
+import { chromium } from 'playwright';
+
+const browser = await chromium.launch({ headless: true });
+const page = await browser.newPage({ viewport: { width: 1400, height: 900 } });
+
+await page.goto('http://localhost:3099', { waitUntil: 'domcontentloaded' });
+await page.waitForTimeout(6000);
+
+const firstTab = page.locator('.session-tab').first();
+await firstTab.click();
+await page.waitForTimeout(5000);
+
+const info = await page.evaluate(() => {
+  const term = window.app?.terminal;
+  if (!term) return { error: 'no app.terminal' };
+  
+  const core = term._core;
+  const renderService = core?._renderService;
+  const dims = renderService?.dimensions;
+  
+  if (!dims) return { error: 'no dimensions', hasCore: !!core, hasRenderService: !!renderService };
+  
+  return {
+    css: {
+      cell: dims.css?.cell,
+      char: dims.css?.char,
+      canvas: dims.css?.canvas,
+    },
+    device: {
+      cell: dims.device?.cell,
+      char: dims.device?.char,
+      canvas: dims.device?.canvas,
+    },
+    topLevelKeys: Object.keys(dims),
+    cssKeys: dims.css ? Object.keys(dims.css) : [],
+    deviceKeys: dims.device ? Object.keys(dims.device) : [],
+    cssAllDetail: dims.css ? Object.fromEntries(
+      Object.entries(dims.css).map(([k, v]) => [k, v && typeof v === 'object' ? { ...v } : v])
+    ) : null,
+    deviceAllDetail: dims.device ? Object.fromEntries(
+      Object.entries(dims.device).map(([k, v]) => [k, v && typeof v === 'object' ? { ...v } : v])
+    ) : null,
+    dpr: window.devicePixelRatio,
+  };
+});
+
+console.log(JSON.stringify(info, null, 2));
+await browser.close();

test-line-artifact.mjs

@@ -0,0 +1,87 @@
+import { chromium } from 'playwright';
+
+const browser = await chromium.launch({ headless: true, deviceScaleFactor: 2 });
+const page = await browser.newPage({ viewport: { width: 1400, height: 900 } });
+
+await page.goto('http://localhost:3099', { waitUntil: 'domcontentloaded' });
+await page.waitForTimeout(6000);
+await page.locator('.session-tab').first().click();
+await page.waitForTimeout(4000);
+
+await page.evaluate(() => {
+  const settings = JSON.parse(localStorage.getItem('codeman-settings') || '{}');
+  settings.localEchoEnabled = true;
+  localStorage.setItem('codeman-settings', JSON.stringify(settings));
+  if (window.app?.updateLocalEchoState) window.app.updateLocalEchoState();
+});
+await page.waitForTimeout(500);
+
+// Force render and capture zoomed area of just the overlay
+const result = await page.evaluate(() => {
+  const overlay = window.app?._localEchoOverlay;
+  if (!overlay || !overlay._overlay) return { error: 'no overlay' };
+  
+  overlay._lastPromptPos = { row: 5, col: 0 };
+  overlay._pendingText = 'h';
+  overlay._lastRenderKey = '';
+  overlay._render();
+  
+  const container = overlay._overlay;
+  const lineDiv = container.querySelector('div');
+  const charSpan = container.querySelector('div > span');
+  
+  // Get precise rects
+  const lineDivRect = lineDiv?.getBoundingClientRect();
+  const charSpanRect = charSpan?.getBoundingClientRect();
+  const screenRect = document.querySelector('.xterm-screen')?.getBoundingClientRect();
+  
+  // Check what's right below the line div
+  const belowY = (lineDivRect?.bottom || 0) + 1;
+  const belowX = lineDivRect?.left || 0;
+  const elBelow = document.elementFromPoint(belowX, belowY);
+  
+  return {
+    dpr: window.devicePixelRatio,
+    lineDiv: {
+      rect: lineDivRect,
+      bg: lineDiv?.style.backgroundColor,
+      height: lineDiv?.style.height,
+    },
+    charSpan: {
+      rect: charSpanRect,
+      transform: charSpan?.style.transform,
+      // Check if span bottom exceeds lineDiv bottom
+      extendsBelow: charSpanRect && lineDivRect ? 
+        (charSpanRect.bottom - lineDivRect.bottom).toFixed(2) : 'N/A',
+    },
+    elBelow: elBelow ? {
+      tag: elBelow.tagName,
+      class: elBelow.className,
+    } : null,
+    // Check the exact background color of the canvas
+    canvasBg: document.querySelector('.xterm-screen')?.style.backgroundColor,
+    themeBg: window.app?.terminal?.options?.theme?.background,
+    overlayBg: lineDiv?.style.backgroundColor,
+  };
+});
+console.log(JSON.stringify(result, null, 2));
+
+// Take tight screenshot around the first char area
+const screenEl = page.locator('.xterm-screen').first();
+const screenBox = await screenEl.boundingBox();
+if (screenBox) {
+  // Crop to just the overlay area (row 5, first few columns)
+  const cellH = 19;
+  const promptRow = 5;
+  const cropY = screenBox.y + (promptRow - 1) * cellH;
+  const cropH = cellH * 3;
+  await page.screenshot({
+    path: '/tmp/first-char-zoomed.png',
+    clip: { x: screenBox.x, y: cropY, width: 200, height: cropH },
+  });
+  console.log('Zoomed screenshot saved');
+}
+
+await page.evaluate(() => { window.app?._localEchoOverlay?.clear(); });
+await browser.close();
+console.log('Done');