# 🖥️ GLMPilot Client

The `client` package contains the React SPA that powers the browser-based IDE interface.

## Key Responsibilities

1. **IDE Shell**: The main workspace interface (`IDEShell.tsx`) containing the file explorer, Monaco editor, and terminal panes.
2. **Code Editing**: Integrates `@monaco-editor/react` to provide a VS Code-like editing experience with syntax highlighting and autocompletion.
3. **Live Web Preview**: Supports real-time rendering of HTML/JS/CSS within an iframe or a new tab.
4. **State Management**: Uses `zustand` stores located in `src/stores/` to manage complex client-side state efficiently without extensive prop-drilling. Stores typically manage:
   - Editor state (open files, current contents)
   - Chat state (conversation history with ASI-1)
   - Settings (user preferences, environment choices)

## Tech Stack

- **Framework**: React 18 
- **Bundler**: Vite
- **Styling**: Tailwind CSS
- **Routing**: React Router
- **Global State**: Zustand
- **Editor**: Monaco Editor

## Development

Run `npm run dev` (or `npm run dev:client` from the root) to start the Vite development server.