Skip to content

vscode: add Logs sidebar panel for real-time debug visibility - #80

Merged
Allann merged 1 commit into
masterfrom
agents/add-debug-console-view
May 14, 2026
Merged

vscode: add Logs sidebar panel for real-time debug visibility#80
Allann merged 1 commit into
masterfrom
agents/add-debug-console-view

Conversation

@Allann

@Allann Allann commented May 14, 2026

Copy link
Copy Markdown
Collaborator

Problem

When the extension fails to connect (e.g. clicking "AI Dev: Disconnected" and the backend silently fails to start), there's nowhere to see why. All logs go to the Output Channel — a separate panel users rarely open — and backend stdout/stderr is piped but never read.

Changes

New: Logger class (src/Logger.ts)

Replaces the raw vscode.OutputChannel with a structured logger that:

  • Wraps the Output Channel (still writes there)
  • Maintains a circular buffer of 1000 LogEntry objects ({ timestamp, level, message })
  • Exposes info(), warn(), error(), and appendLine() (backward-compat alias — zero call-site changes)
  • Subscriber pattern (subscribe() / onCleared()) for streaming to the webview
  • getHistory() for sending buffered entries when the view first opens

New: LogsPanelProvider (src/panels/LogsPanelProvider.ts)

A WebviewViewProvider that:

  • Subscribes to Logger and streams entries to the webview in real time
  • Sends full history when the view opens or becomes visible
  • Handles { type: 'clear' } from the webview → calls logger.clearBuffer()
  • Always live — doesn't wait for a backend connection

New: Logs webview (src/webviews/logs/main.tsx)

React-based log viewer with:

  • Color-coded rows: default = info, yellow = warn, red = error
  • HH:MM:SS LEVEL message format
  • Auto-scroll to latest entry (pauses when user scrolls up)
  • Clear button

Extended: BackendProcessManager

  • Added stdout?: NodeJS.ReadableStream | null and stderr?: NodeJS.ReadableStream | null to ProcessLike
  • Added onOutput?: (line: string, source: 'stdout' | 'stderr') => void option
  • Uses readline.createInterface to capture process output line-by-line (previously silently discarded despite stdio: 'pipe')
  • Existing test mocks are unaffected (new fields are optional)

Updated: extension.ts

  • Swaps vscode.OutputChannelLogger
  • Registers aidev.logs webview view
  • Passes onOutput callback to BackendProcessManager (stderr → log.warn, stdout → log.info)

Config: package.json + esbuild.mjs

  • Registers aidev.logs as a fourth webview view in the ai-dev-studio activity bar container
  • Adds logs/main.tsx to the esbuild webview entry points

Testing

  • All 29 existing unit tests pass
  • Build succeeds (npm run build)

- Add Logger class wrapping OutputChannel with circular buffer (1000
  entries), info/warn/error levels, subscribe/unsubscribe, and
  clearBuffer. appendLine() is a backward-compat alias so existing
  call sites are unchanged.

- Add LogsPanelProvider: a WebviewViewProvider that subscribes to
  Logger and streams entries to the webview in real time. Always live
  — doesn't wait for backend connection.

- Add logs/main.tsx React webview: color-coded log rows (yellow=warn,
  red=error), HH:MM:SS timestamp, auto-scroll with scroll-position
  awareness, and a Clear button.

- Extend BackendProcessManager: add stdout?/stderr? to ProcessLike
  and an onOutput? callback option. Uses readline to capture backend
  process output line by line — previously silently discarded despite
  stdio: 'pipe'.

- Wire everything in extension.ts: swap raw OutputChannel for Logger,
  register aidev.logs webview view, pass onOutput to backend manager
  (stderr lines shown as warnings).

- Register aidev.logs in package.json contributes.views and add
  logs/main.tsx to esbuild entry points.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@Allann
Allann requested a review from auleewilliams May 14, 2026 06:07
@Allann
Allann merged commit 0afc385 into master May 14, 2026
1 check passed
@Allann
Allann deleted the agents/add-debug-console-view branch May 14, 2026 06:49
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants