🦉 Owl Node

A VS Code/Cursor extension featuring an API Dashboard sidebar, status bar integration, and local database caching powered by LowDB.

✨ Features

🎯 Sidebar Dashboard

• Custom Owl Icon in the activity bar
• Fetch Data from Kite api
• Data Table displaying users and posts
• Create Post form to send POST requests
• Cache Management with LowDB integration

📊 Status Bar Integration

• 2 Status Bar Items showing most recent fetched data
• Toggle Visibility via Command Palette or context menu
• Click to View details of fetched items

🎮 Command Palette (⌘+Shift+P)

🗄️ Local Database (LowDB)

• In-memory caching for web extension compatibility
• Persist fetched data between API calls
• Timestamp tracking for last fetch times
• Clear cache functionality

📸 Preview

┌─────────────────────────────┐
│  🦉  Owl Node               │
│      API Dashboard          │
├─────────────────────────────┤
│  🔄 FETCH DATA  💾 Cached   │
│  [Users] [Posts]            │
│  [Load Cache] [Clear]       │
│  📅 Last fetched - 12:30    │
├─────────────────────────────┤
│  📊 DATA TABLE              │
│  ID │ Name      │ Details   │
│  ───┼───────────┼────────── │
│  1  │ Leanne    │ leanne@...│
│  2  │ Ervin     │ ervin@... │
├─────────────────────────────┤
│  ➕ CREATE POST             │
│  Title: [_______________]   │
│  Body:  [_______________]   │
│  [Send POST Request]        │
└─────────────────────────────┘

Status Bar: [👤 Leanne Graham] [👤 Ervin Howell]

🚀 Getting Started

Installation

1. Clone the repository
2. Install dependencies:

   bun install
   

3. Compile the extension:

   bun run compile-web
   

4. Press F5 to launch Extension Development Host

Usage

1. Click the 🦉 Owl icon in the activity bar (left sidebar)
2. Click Users or Posts to fetch data from JSONPlaceholder API
3. View fetched data in the table
4. Use Load Cache to retrieve previously fetched data
5. Create new posts using the form at the bottom
6. Check the status bar (bottom right) for recent items

📁 Project Structure

owl-node/
├── resources/
│   └── owl-icon.svg          # Activity bar icon
├── src/
│   └── web/
│       ├── extension.ts      # Extension entry point
│       ├── SidebarProvider.ts # Webview sidebar
│       └── database.ts       # LowDB integration
├── .vscode/
│   ├── launch.json           # Debug configuration
│   └── tasks.json            # Build tasks
├── package.json              # Extension manifest
└── README.md

🛠️ Development

Scripts

Debug

1. Open the project in VS Code/Cursor
2. Press F5 to launch Extension Development Host
3. The extension will be active in the new window

📦 Publishing

Prerequisites

1. Install vsce:

   bun add -g @vscode/vsce
   

2. Create a Personal Access Token with Marketplace (Manage) scope

3. Create a publisher at VS Code Marketplace

Update package.json

Replace these placeholders before publishing:

• YOUR_PUBLISHER_ID - Your marketplace publisher ID
• YOUR_USERNAME - Your GitHub username
• Add a 128x128 PNG icon at resources/owl-icon-128.png

Publish Commands

# Login with your PAT token
vsce login YOUR_PUBLISHER_ID

# Package (creates .vsix file)
vsce package

# Publish to marketplace
vsce publish

# Bump version and publish
vsce publish patch  # 0.0.1 → 0.0.2
vsce publish minor  # 0.0.1 → 0.1.0
vsce publish major  # 0.0.1 → 1.0.0

Install Locally (Testing)

# Package the extension
vsce package

# In VS Code/Cursor:
# Extensions → ... → Install from VSIX → select owl-node-0.0.1.vsix

🔧 Configuration

This extension currently has no configurable settings.

📋 API Reference

The extension uses JSONPlaceholder - a free fake REST API:

🐛 Known Issues

• Cache is in-memory only (clears on extension reload)
• Web extension context limits some Node.js features

📝 Release Notes

0.0.1 (2024-12-01)

• Initial release
• Sidebar dashboard with owl mascot
• Fetch users and posts from JSONPlaceholder
• Status bar integration with recent items
• LowDB in-memory caching
• Context menu with quick actions
• Create post functionality

🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Submit a pull request

📄 License

MIT

Enjoy! 🦉