vscode: add Logs sidebar panel for real-time debug visibility - #80
Merged
Conversation
- 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>
auleewilliams
approved these changes
May 14, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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:
Loggerclass (src/Logger.ts)Replaces the raw
vscode.OutputChannelwith a structured logger that:LogEntryobjects ({ timestamp, level, message })info(),warn(),error(), andappendLine()(backward-compat alias — zero call-site changes)subscribe()/onCleared()) for streaming to the webviewgetHistory()for sending buffered entries when the view first opensNew:
LogsPanelProvider(src/panels/LogsPanelProvider.ts)A
WebviewViewProviderthat:Loggerand streams entries to the webview in real time{ type: 'clear' }from the webview → callslogger.clearBuffer()New: Logs webview (
src/webviews/logs/main.tsx)React-based log viewer with:
HH:MM:SS LEVEL messageformatExtended:
BackendProcessManagerstdout?: NodeJS.ReadableStream | nullandstderr?: NodeJS.ReadableStream | nulltoProcessLikeonOutput?: (line: string, source: 'stdout' | 'stderr') => voidoptionreadline.createInterfaceto capture process output line-by-line (previously silently discarded despitestdio: 'pipe')Updated:
extension.tsvscode.OutputChannel→Loggeraidev.logswebview viewonOutputcallback toBackendProcessManager(stderr →log.warn, stdout →log.info)Config:
package.json+esbuild.mjsaidev.logsas a fourth webview view in theai-dev-studioactivity bar containerlogs/main.tsxto the esbuild webview entry pointsTesting
npm run build)