🛠️ Developer Workspace Tools (Model Selector & Directory Visualizer)

A professional developer workspace monorepo containing a Fastify + Prisma AI Model Selection backend service and a real-time WebSocket-based Live Directory Visualizer.

---

📖 Overview

This repository is a monorepo containing two decoupled development utilities designed to augment AI-assisted coding and workspace tracking:

1. AI Model Selector Backend: A Fastify API built in TypeScript that serves as a catalog manager, validation interface, and selector service. Model selectors allow products to query available AI models, reasoning effort states, and upgrade pathways.
2. Live Directory Visualizer: A full-stack tool consisting of a Python FastAPI watchdog service and a React frontend. It streams real-time file change notifications over WebSockets to render an interactive folder tree of active development workspaces.

---

💡 Problem Solved

As AI applications integrate into code editors, managing and querying model catalog availability (free vs. paid tiers, tokens, features, reasoning parameters) needs a centralized service to prevent frontend clutter.

At the same time, verifying how automated code generators (like agentic code scripts) modify directories requires a live visualizer. Command-line checks or standard IDE sidebars don't highlight real-time directory modifications with dynamic event streams.

Developer Workspace Tools solves this by:

• Centralizing model selector parameters and eligibility checking behind a database-backed API.
• Providing an instant, WebSocket-powered visual dashboard showing precisely what files are being created, modified, or deleted in your project directories in real-time.

---

✨ Features

1. AI Model Selector Backend

• Catalog Management: Fastify routing to query models grouped by availability tiers (e.g. flagship, standard, preview).
• Zod Data Guards: Structured input schema validation matching selector payloads.
• ORM & Seeding: Prisma PostgreSQL schema mapping, seed files, and automated table migrations.
• Entitlement Checking: Service contracts to determine if a user has access to premium reasoning levels.

2. Live Directory Visualizer

• Watchdog Event Loop: Low-overhead filesystem monitoring that listens to native OS file descriptors.
• WebSocket Streaming: Real-time event propagation showing active file mutations (Created, Deleted, Modified, Moved).
• Interactive React UI: Hierarchical tree components built on React and TypeScript that animate dynamically as files change.
• Pattern Exclusions: Custom regex settings to prevent performance lag by ignoring dependency logs (node_modules/, venv/).

---

🏗️ Architecture

The workspace is split into isolated services sharing validation schemas:

+-----------------------------------------------------------------------------------+
|                           Vs code extension workspace                             |
+----------------------------------------+------------------------------------------+
|  1. Model Selector Backend (Node/TS)   |  2. Live Directory Visualizer (Py/React) |
|                                        |                                          |
|  [Client] --> [Fastify Server]         |  [React Client] <== (WebSockets) ==>     |
|                      |                 |         ^                                |
|               [Prisma Client]          |         v                                |
|                      v                 |  [FastAPI Server] --> [Watchdog Engine]  |
|               [(PostgreSQL)]           |                              |           |
|                                        |                              v           |
|                                        |                      [(Target Folder)]   |
+----------------------------------------+------------------------------------------+

Detailed architecture diagrams are located in Architecture Guide.

---

🛠️ Tech Stack

AI Model Selector Backend

• Framework: Fastify (Node.js/TypeScript)
• Database ORM: Prisma client mapping to PostgreSQL
• Validation: Zod schema compiler
• Test Suite: Vitest

Live Directory Visualizer

• Backend Service: FastAPI (Python 3.8+), uvicorn, Watchdog event monitoring library
• Frontend Dashboard: React.js, TypeScript, lucide-react, react-use-websocket

---

🚀 Installation & Setup

1. Setting up Model Selector Backend

cd backend
npm install

# Configure environment database credentials in database/schema.prisma
npm run prisma:generate
npm run build
npm start

2. Setting up Live Directory Visualizer

Backend (Python):

cd live-directory-visualizer/backend
python -m venv venv
# On Windows
venv\Scripts\activate
# On macOS/Linux
source venv/bin/activate

pip install -r requirements.txt
python app.py

Frontend (React):

cd live-directory-visualizer/frontend
npm install
npm start

For detailed configurations, see the Setup Guide.

---

📖 Usage

Model Selector REST API:

• GET /api/catalog - Retrieve list of available AI models.
• POST /api/select - Record a user selection action.
• POST /api/validate-effort - Verify if the chosen model supports specific reasoning effort settings.

Directory Visualizer Dashboard:

1. Start both servers.
2. The browser dashboard opens at http://localhost:3000.
3. In a terminal, create or delete a file in the watched workspace directory:

   echo "test content" > demo.txt

4. Observe the file node instantly fade-in with a visual marker on the browser tree representation.

---

🔗 API Documentation

Model Selector Catalog Response Example

[
  {
    "id": "claude-3-5-sonnet",
    "displayName": "Claude 3.5 Sonnet",
    "tier": "flagship",
    "status": "available",
    "supportsEffort": true,
    "effortLevels": ["low", "medium", "high"]
  }
]

For complete API routes and feature parameters, see Features Guide.

---

📂 Folder Structure

Vs code extension developement/
├── backend/                 # Node.js TypeScript API
│   ├── src/                 # Fastify routes, controllers, and services
│   ├── package.json
│   └── tsconfig.json
├── database/                # Database migrations
│   ├── migrations/          # SQL scripts
│   ├── seeds/               # Seeding catalogs
│   └── schema.prisma        # Database entity model
├── docs/                    # Design, setup, and features docs
├── live-directory-visualizer/
│   ├── backend/             # Python FastAPI + Watchdog service
│   │   ├── app.py
│   │   ├── monitor/
│   │   └── requirements.txt
│   └── frontend/            # React.js TypeScript application
│       ├── src/             # Tree components & hooks
│       └── package.json
├── shared/
│   └── contracts/           # Shared API type declarations
├── LICENSE
├── CONTRIBUTING.md
├── CHANGELOG.md
└── .gitignore

---

🔎 Audit & Security Analysis

• Secrets & API Keys: Checked backend configurations and mock seed data. No live passwords or credentials found. The .env files are ignored in .gitignore, and only .env.example templates remain.
• Unnecessary Files: Verified and cleaned standard cache files (.pytest_cache/, .next/, node_modules/) from source control.

---

💡 Suggestions & Future Improvements

1. Monorepo Build Integration: Introduce Turborepo or Nx to coordinate dependencies, allowing a single npm run dev at the root to orchestrate the Fastify backend, FastAPI monitor, and React client.
2. Dockerization: Create a unified docker-compose.yml to spin up the local PostgreSQL database and Fastify service in a single command.

---

🏷️ Repository Settings Suggestions

• Suggested Repository Name: developer-workspace-intelligence-tools
• Suggested Description: Developer tools monorepo featuring a Fastify + Prisma AI Model Selection service and a real-time WebSocket filesystem monitor using Python Watchdog and React.
• Suggested Topics/Tags: developer-tools, monorepo, fastify, fastapi, prisma, react-typescript, websockets, watchdog-monitoring, system-design
• Project Maturity: Beta / Work-In-Progress Scaffold

---

✍️ Author

• Kalashree
• GitHub: @kalashree225
• Email: Kalashree225@gmail.com