# CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

## Development Commands

```bash
# Install dependencies
pnpm install

# Development server with hot reload
pnpm dev

# Build for production
pnpm build

# Type checking
pnpm type-check

# Lint and fix code
pnpm lint

# Format code
pnpm format

# Run unit tests
pnpm test:unit
```

## Project Architecture

This is a **Multi-Agent Coordination Platform** (多智能体协同平台) built with Vue 3, TypeScript, and Vite. The application enables users to create and manage AI agents with specialized roles and coordinate them to complete complex tasks through visual workflows.

### Tech Stack
- **Vue 3** with Composition API and TypeScript
- **Vite** for build tooling and development
- **Element Plus** for UI components
- **Pinia** for state management
- **Tailwind CSS** for styling
- **Vue Router** for routing (minimal usage)
- **JSPlumb** for visual workflow connections
- **Axios** for API requests with custom interceptors

### Key Architecture Components

#### State Management (`src/stores/modules/agents.ts`)
Central store managing:
- Agent definitions with profiles and icons
- Task workflow data structures (`IRawStepTask`, `TaskProcess`)
- Search functionality and current task state
- Raw plan responses with UUID generation for tasks

#### Request Layer (`src/utils/request.ts`)
Custom Axios wrapper with:
- Proxy configuration for `/api` -> `http://localhost:8000`
- Response interceptors for error handling
- `useRequest` hook for reactive data fetching
- Integrated Element Plus notifications

#### Component Structure
- **Layout System** (`src/layout/`): Main application layout with Header and Main sections
- **Task Templates** (`src/layout/components/Main/TaskTemplate/`): Different task types including AgentRepo, TaskSyllabus, and TaskResult
- **Visual Workflow**: JSPlumb integration for drag-and-drop agent coordination flows

#### Icon System
- SVG icons stored in `src/assets/icons/`
- Custom `SvgIcon` component with vite-plugin-svg-icons
- Icon categories include specialist roles (doctor, engineer, researcher, etc.)

### Build Configuration

#### Vite (`vite.config.ts`)
- Element Plus auto-import and component resolution
- SVG icon caching with custom symbol IDs
- Proxy setup for API requests to backend
- Path aliases: `@/` maps to `src/`

#### Docker Deployment
- Multi-stage build: Node.js build + Caddy web server
- API proxy configured via Caddyfile
- Environment variable support for different deployment modes

### Data Models
Key interfaces for the agent coordination system:
- `Agent`: Name, Profile, Icon
- `IRawStepTask`: Individual task steps with agent selection and inputs
- `TaskProcess`: Action descriptions with important inputs
- `IRichText`: Template-based content formatting with style support

### Development Notes
- Uses pnpm as package manager (required by package.json)
- Node version constraint: ^20.19.0 or >=22.12.0
- Dark theme enabled by default in App.vue
- Auto-imports configured for Vue APIs
- No traditional Vue routes - uses component-based navigation