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.tomlfile 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
-
Clone the repository or download the source code.
-
Ensure Node.js (version 16 or higher) and VS Code are installed.
-
Navigate to the project directory and install dependencies:
npm install -
Build the extension:
npm run compile -
Package the extension for VS Code:
npm run package -
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
- Open a project in VS Code.
- Use the Command Palette (
Ctrl+Shift+PorCmd+Shift+P) to access ContextHub Extension commands:ContextHub: Generate Context: Generates directory trees and file contents based on thech_config.tomlconfiguration.ContextHub: Aggregate Logs: Collects and filters logs from specified directories.ContextHub: Open Configuration: Opens thech_config.tomlfile for editing.
- View generated context in the
.context/context.txtfile 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+,):
| Setting | Type | Description |
|---|---|---|
contexthub.autoGenerateContext | Boolean | If true, automatically generates context on project open. Default: false. |
contexthub.showLogPanel | Boolean | If 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.txtand optionally displayed in a VS Code output panel. - Summaries: If
print_summaryis 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. ☕😉