ContextHub Extension

May 20, 2025 · View on GitHub

Overview

ContextHub Extension is a TypeScript-based Visual Studio Code extension designed to enhance the functionality of the ContextHub tool. It provides a seamless interface for generating project context, including directory trees and file contents, directly within the VS Code environment. The extension leverages ContextHub's core capabilities, offering a UI-driven experience with commands and settings for managing project context and log aggregation, all configured via a TOML file.

Features

  • Context Generation: Generates directory trees and file contents within VS Code, using ContextHub's configuration-driven approach.
  • Command Palette Integration: Access ContextHub functionality via VS Code commands, such as generating context or aggregating logs.
  • Configuration UI: View and edit the ch_config.toml file through a dedicated settings panel in VS Code.
  • Log Aggregation View: Displays aggregated logs from specified directories, with filtering options for log level, channels, and time range.
  • Clipboard Support: Copies generated context to the clipboard for easy sharing or pasting.
  • Customizable Output: Supports summaries and configurable output paths, aligned with ContextHub's core features.

Installation

  1. Clone the repository or download the source code.

  2. Ensure Node.js (version 16 or higher) and VS Code are installed.

  3. Navigate to the project directory and install dependencies:

    npm install
    
  4. Build the extension:

    npm run compile
    
  5. Package the extension for VS Code:

    npm run package
    
  6. Install the extension in VS Code:

    code --install-extension contexthub-extension.vsix
    

Alternatively, once published, install directly from the VS Code Marketplace (link to be added upon publication).

Usage

  1. Open a project in VS Code.
  2. Use the Command Palette (Ctrl+Shift+P or Cmd+Shift+P) to access ContextHub Extension commands:
    • ContextHub: Generate Context: Generates directory trees and file contents based on the ch_config.toml configuration.
    • ContextHub: Aggregate Logs: Collects and filters logs from specified directories.
    • ContextHub: Open Configuration: Opens the ch_config.toml file for editing.
  3. View generated context in the .context/context.txt file or aggregated logs in .context/channel_output.txt.

Configuration

The extension uses the same ch_config.toml file as ContextHub, located in the .context directory of the project root. Refer to the ContextHub for detailed configuration options, including sections for [general], [shared], [tree], [content], and [log_aggregator].

Extension-Specific Settings

The extension adds VS Code-specific settings accessible via the VS Code Settings UI (Ctrl+, or Cmd+,):

SettingTypeDescription
contexthub.autoGenerateContextBooleanIf true, automatically generates context on project open. Default: false.
contexthub.showLogPanelBooleanIf true, displays aggregated logs in a dedicated VS Code output panel. Default: true.

Example ch_config.toml

[general]
print_summary = true
copy_to_clipboard = true

[shared]
exclude_dirs = ["node_modules"]

[tree]
enabled = true
default_depth = 2

[content]
enabled = true
base_dir = "src"
recursive = true
suffixes = [".ts", ".tsx"]

[log_aggregator]
enabled = true
log_dirs = ["/home/user/.vscode-server/data/logs"]
log_level = "info"

Output

  • Context Output: Saved to .context/context.txt, accessible via the VS Code explorer.
  • Log Output: Saved to .context/channel_output.txt and optionally displayed in a VS Code output panel.
  • Summaries: If print_summary is enabled, summaries appear in the VS Code output channel.

Project Structure

ContextHub-Extension
├── src/                     # Source code
│   ├── extension.ts         # Extension entry point
│   ├── commands/            # VS Code command implementations
│   ├── config/              # Configuration utilities for TOML handling
│   ├── views/               # UI components for log and settings panels
│   └── utils/               # Shared utilities for context and log processing
├── dist/                    # Compiled JavaScript
├── package.json             # Extension metadata and dependencies
├── tsconfig.json            # TypeScript configuration
├── vscode.d.ts              # VS Code API type definitions
├── eslint.config.mjs        # ESLint configuration

License

This project is licensed under the MIT License. See the LICENSE file for details (if applicable).

Questions?

Feel free to ask your favorite LLM for help with this extension — it might know the ins and outs better than anyone! 😄 If you’re enjoying the extension, consider buying me a coffee — I’ll savor it more than your LLM ever could. ☕😉