Log Navigator

VS Code extension for log navigation: segment highlighting, outline, and source jump.

Features

• Function segment highlighting (ENTER/EXIT)
• Log outline (functions + statements)
• Jump to source location from [path:function:line]

Log Segment Highlighting

This repo includes a simple editor highlighter for logs that contain segment markers like:

• ------ ENTER SomeFunction ------
• ------ EXIT SomeFunction (return) ------

Open a .glog file to see each function segment highlighted with a different color. Commands:

• Logger Highlight: Toggle
• Logger Highlight: Refresh
• Logger Highlight: Diagnose

Project Structure

├── extension/              # VSCode extension host code
│   ├── index.ts            # Extension entry point
│   └── views/              # (Optional) webview panel logic
├── webview/                # (Optional) React frontend
│   ├── App.tsx             # Main React component
│   ├── components/ui/      # shadcn/ui components
│   ├── lib/utils.ts        # Utility functions
│   ├── __tests__/          # React component tests
│   └── index.css           # Tailwind CSS styles
├── __tests__/              # Extension integration tests
│   └── extension/          # VSCode extension tests
├── .github/                # GitHub workflows & templates
│   ├── workflows/          # CI/CD workflows
│   └── ISSUE_TEMPLATE/     # Issue templates
├── .vscode/                # VSCode settings & launch config
├── index.html              # HTML entry point
├── vite.config.ts          # Vite configuration
├── vitest.config.ts        # Vitest test configuration
└── package.json            # Project configuration

Getting Started

Prerequisites

• Node.js >= 18
• pnpm (recommended) or npm

Installation

# Install dependencies
pnpm install

# Start development server
pnpm dev

Development

1. Press F5 to open a new VSCode window with the extension loaded
2. Run the command Hello World: Show from the Command Palette (Ctrl+Shift+P)
3. The webview will open with hot reload enabled

Build

# Build for production
pnpm build

Adding shadcn/ui Components

# Add a new component
pnpm dlx shadcn@latest add [component-name]

# Example: Add dialog component
pnpm dlx shadcn@latest add dialog

Available Components

Pre-installed shadcn/ui components:

• Button
• Card
• Input
• Label
• Badge
• Separator
• Textarea

Testing

This template includes comprehensive testing support:

Unit Tests (Vitest + Testing Library)

# Run all unit tests
pnpm test

# Run tests in watch mode
pnpm test:watch

# Run tests with coverage report
pnpm test:coverage

Extension Integration Tests

# Run VSCode extension tests
pnpm test:extension

E2E Tests (Playwright)

# Run E2E tests
pnpm test:e2e

# Run E2E tests with UI mode
pnpm test:e2e:ui

# View test report
pnpm test:e2e:report

Scripts

VSCode Theme Integration

The template uses VSCode theme variables for seamless integration:

• Background colors match editor theme
• Text colors adapt to light/dark mode
• Focus states use VSCode accent colors

License

MIT