# Project Specification: LiteRequest (Modern REST API Client)

**Role:** You are an expert Full-Stack Developer specializing in Rust, Vue.js, and UI/UX Design.
**Goal:** Generate a production-ready, visually stunning REST API Client using **Tauri 2.0** and **Vue 3**.

## 1. Tech Stack Requirements

* **Core Framework:** Tauri 2.0 (Rust)
* **Frontend:**
    * **Framework:** Vue 3 (Composition API, `<script setup>`, TypeScript).
    * **Styling:** Tailwind CSS (v3 or v4).
    * **Icons:** `lucide-vue-next` (for modern, clean SVG icons).
    * **State Management:** Pinia (for managing request history and reactive state).
    * **Editor:** `codemirror` (or `vue-codemirror`) with JSON language support and a dark theme (e.g., One Dark).
* **Backend (Rust):**
    * `reqwest` (Async, with `json` features).
    * `serde` & `serde_json`.
    * `tokio` (for async runtime).

## 2. UI/UX Design Guidelines (Modern & Aesthetic)

The application must look like a professional developer tool (similar to linear.app or Raycast).

* **Theme:** **Dark Mode** by default. Use a neutral color palette (e.g., Tailwind's `slate` or `zinc`).
    * *Background:* `bg-slate-950`
    * *Panels/Cards:* `bg-slate-900`
    * *Borders:* `border-slate-800`
    * *Accents:* Use a primary color (e.g., `indigo-500` or `emerald-500`) for active states and primary buttons.
* **Typography:** Clean sans-serif font (Inter or system font). Small, legible text sizes for data.
* **Visual Details:**
    * Use **rounded corners** (e.g., `rounded-lg`) for inputs and buttons.
    * Use **subtle transitions** (`transition-all duration-200`) for hover states.
    * Inputs should have no default borders but a subtle ring on focus.
    * Scrollbars should be slim and styled to match the dark theme.

## 3. Layout Structure (Two-Column)

### A. Sidebar (Left - 250px Fixed Width)
* **Style:** Darker background (`bg-slate-950`), border-r (`border-slate-800`).
* **Content:**
    * **Header:** App Title ("LiteRequest") with a modern logo/icon.
    * **Navigation:** Tabs for "History" and "Collections".
    * **History List:** A scrollable list of recent requests.
        * Each item shows the HTTP Method badge (small, colored) and the URL path.
        * *Hover Effect:* Lighten background on hover.

### B. Main Workspace (Right - Flexible Width)
* **Style:** Lighter background (`bg-slate-900`).
* **Top Bar (Address Bar):**
    * A cohesive container holding the Method Selector and URL Input.
    * **Send Button:** A prominent, high-contrast button (e.g., `bg-indigo-600 hover:bg-indigo-500`) with a "Send" icon.
* **Request Config (Tabs):**
    * Tabs for: **Params**, **Headers**, **Body**.
    * **Key-Value Inputs:** For Params/Headers, use a dynamic grid where users can add/remove rows.
    * **JSON Editor:** A full-height CodeMirror instance for the Body.
* **Response Area (Bottom or Split Pane):**
    * **Meta Bar:** Status Code (Green for 2xx, Red for 4xx/5xx), Duration (ms), Size (KB).
    * **Output:** Read-only CodeMirror editor with syntax highlighting for the JSON response.

## 4. Functional Requirements

### 4.1 Request Logic (Rust Backend)
Create a Tauri Command `execute_request` that handles the heavy lifting:
* **Inputs:** `method` (GET/POST/etc), `url`, `headers` (Map), `body` (String/JSON), `query_params` (Map).
* **Logic:**
    * Construct the request using `reqwest::Client`.
    * Handle timeouts (default 30s).
    * Capture precise timing (start/end).
* **Outputs:** A struct containing `status`, `headers`, `body` (text), and `time_elapsed`.

### 4.2 Frontend Logic
* **Method Color Coding:**
    * GET: Blue/Sky
    * POST: Green/Emerald
    * PUT: Orange/Amber
    * DELETE: Red/Rose
* **Persisted History:**
    * Automatically save successful requests to `localStorage` via Pinia.
    * Allow users to click a history item to repopulate the Main Workspace inputs.
* **Formatting:**
    * Automatically "Pretty Print" (indent) JSON responses in the viewer.

## 5. Implementation Roadmap for Generation

Please provide the code in the following logical chunks:

1.  **Rust Backend:** `Cargo.toml` dependencies and the `main.rs` with the `execute_request` command.
2.  **Frontend Setup:** `package.json`, `tailwind.config.js`, and `main.ts`.
3.  **State Store:** `stores/requestStore.ts` (Pinia setup for managing request state and history).
4.  **UI Components (The "Modern" Look):**
    * `MethodBadge.vue` (Reusable component for colored badges).
    * `KeyValueEditor.vue` (For editing Headers/Params).
    * `RequestPanel.vue` (The main input area).
    * `ResponsePanel.vue` (The results display).
5.  **Main Layout:** `App.vue` bringing it all together.

---
**Instruction to AI:** Generate the code based on these modern design principles and functional requirements. Start with Part 1: Rust Backend.