Add web server with REST API and React frontend

[buffpesos]

Summary

This PR adds a complete web server implementation with a REST API backend and React-based frontend UI for QMD. The web server provides HTTP endpoints for searching, browsing documents, managing collections, and viewing index status, while serving a modern single-page application built with React, TypeScript, and Tailwind CSS.

Key Changes

Backend (src/web.ts)

• New web server module with Bun.serve() HTTP server on configurable port
• REST API endpoints for:
  • Search: /api/search (FTS), /api/vsearch (vector), /api/query (hybrid)
  • Documents: /api/doc/:path with optional line range parameters
  • Listing: /api/ls for browsing collections and files
  • Collections: CRUD operations (GET, DELETE, PATCH)
  • Contexts: Management endpoints for collection and global contexts
  • Status: /api/status for index health and statistics
• Static file serving from frontend/dist/ with proper MIME type handling
• CORS support with development-friendly origin handling
• Error handling with consistent JSON error responses

Frontend (React + TypeScript)

• Complete React application with routing, state management, and UI components
• Pages:
  • SearchPage: Multi-tier search (keyword, semantic, deep/hybrid)
  • BrowsePage: Collection and file browsing with context management
  • DocumentPage: Full document viewing with syntax highlighting
  • StatusPage: Index health and statistics dashboard
• Components:
  • SearchBar: Search interface with tier selection
  • ResultCard: Unified result display for all search types
  • Layout: Navigation sidebar with routing
  • UI primitives: Card, Button, Input, Badge, Dialog, Tabs, Separator, Skeleton
• API client (lib/api.ts) with TypeScript types matching backend responses
• Styling: Tailwind CSS with dark theme, responsive design
• Dependencies: React Router for navigation, TanStack Query for data fetching, Lucide icons, React Markdown with syntax highlighting

Configuration

• Vite build configuration with React plugin and Tailwind CSS integration
• TypeScript configuration with path aliases and strict mode
• Package.json with dev/build scripts and all necessary dependencies

CLI Integration

• Updated qmd.ts help text to document new qmd web command

Notable Implementation Details

• API endpoints directly call existing store.ts and collections.ts functions
• Hybrid query endpoint supports optional collection filtering and minimum score thresholds
• File listing supports pattern-based search with byte limits
• Context management supports both global (*) and collection-specific contexts
• Frontend uses React Query for automatic caching and refetching
• Responsive UI with loading states and error boundaries
• Document viewer includes metadata (modified date, file size, doc ID) and syntax-highlighted code blocks

https://claude.ai/code/session_01BGAQy6TdWrvieh7MR6WaF5