YzPzCode: Instructions file for Claude Code

CLAUDE.md

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

Project Overview

YzPzCode is a Tauri v2 desktop application that provides a unified interface for multiple AI coding CLI tools and SaaS tool CLIs. It combines a React 19 frontend with a Rust backend to create a native, cross-platform development environment with an in-app browser, visual design inspector, AI-powered designer, and multi-workspace management, plus Writing, Presentation and Sheets studios.

Tech Stack:

• Frontend: React 19 + TypeScript, Vite 6, Tailwind CSS v4, Zustand 5, CodeMirror 6, xterm.js 6, framer-motion, @iconify/react
• Backend: Tauri v2, Rust, portable-pty, Tokio, discord-rich-presence
• Development: Node.js 18+, Rust (latest stable)

Development Commands

# Navigate to app directory first
cd app

# Development
npm install              # Install dependencies
npm run tauri dev       # Run development server (opens on port 8745)

# Building
npm run build           # Build frontend only
npm run tauri build     # Build production installers

# Type Checking
npx tsc --noEmit        # Frontend type checking
cd src-tauri && cargo check  # Backend type checking

# Rust-specific
cd src-tauri
cargo test              # Run tests
cargo clippy            # Lint
cargo fmt               # Format code

Architecture

Frontend-Backend Communication

The app uses Tauri's IPC (Inter-Process Communication) for all frontend-backend communication:

• Frontend calls Tauri commands via @tauri-apps/api/core
• Backend defines commands in src-tauri/src/commands/ with #[tauri::command]
• Real-time events: app.emit("event-name", payload) from Rust, listen<T>("event-name", callback) from frontend
• No direct REST APIs - all communication through Tauri IPC

State Management

• Zustand (app/src/stores/appStore.ts): Centralized state with persist middleware
• Updater Store (app/src/stores/updaterStore.ts): Auto-update state (checking, downloading, progress)
• Key state slices include:
  • Workspace management (currentWorkspace, workspaceList, openWorkspaces, multi-workspace tabs)
  • Terminal sessions (sessions, activeSessionId, per-workspace session tracking)
  • CLI statuses (cliStatuses, toolCliStatuses) — both AI agents and tool CLIs
  • Authentication states (authInfos, toolAuthInfos)
  • UI settings (theme, accent color, UI density, animations, custom cursor, terminal, editor)
  • File editor (openFiles, activeFilePath, dirty state tracking, workspace file isolation)
  • Browser state (URL, tabs, zoom, inspect/pickStyle/apply modes, style clipboard, UI references)
  • IDE detection (ideStatuses, selectedIdes)
  • Version updates (autoCheck, autoDownload, channel, updateAvailable)