### Project Setup and Dependency Installation

Source: https://github.com/ven0m0/gemini-web-wrapper/blob/main/CLAUDE.md

Installs project dependencies for both Python and frontend using uv and bun. Requires Python 3.10+, Node.js 18+, and a Google API key. Copies the environment example to .env and sets up Python and frontend dependencies.

```bash
git clone <repo-url> && cd gemini-web-wrapper
cp .env.example .env   # set at minimum: GOOGLE_API_KEY
uv sync                # Python deps from uv.lock
cd frontend && bun install && cd ..

```

--------------------------------

### Start Server Application

Source: https://github.com/ven0m0/gemini-web-wrapper/blob/main/DEPLOYMENT.md

Starts the Python-based server for the application. This is usually the final step in the local setup process.

```bash
python server.py
```

--------------------------------

### Clone and Setup Repository

Source: https://github.com/ven0m0/gemini-web-wrapper/blob/main/DEPLOYMENT.md

Clones the project repository and navigates into the project directory. This is the initial step for setting up the project locally.

```bash
git clone <your-repo>
cd <your-repo>
```

--------------------------------

### Clone and Setup Project (Bash)

Source: https://github.com/ven0m0/gemini-web-wrapper/blob/main/README.md

Clones the repository, navigates into the directory, and copies the example environment file. Users need to edit the .env file with their API keys.

```bash
git clone <your-repo>
cd <your-repo>
cp .env.example .env
# Edit .env with your API keys
```

--------------------------------

### Install Project Dependencies

Source: https://github.com/ven0m0/gemini-web-wrapper/blob/main/DEPLOYMENT.md

Installs both frontend (npm) and Python (pip) dependencies required for the application to run. This ensures all necessary packages are available.

```bash
# Install frontend dependencies
cd frontend && npm install && cd ..

# Install Python dependencies
pip install -r requirements.txt
```

--------------------------------

### Install and Build Project (Bash)

Source: https://github.com/ven0m0/gemini-web-wrapper/blob/main/README.md

Executes a single shell script to install dependencies and build the project. This is a convenient command for setting up the project.

```bash
./deploy.sh
```

--------------------------------

### Self-Hosting Gemini Web Wrapper

Source: https://github.com/ven0m0/gemini-web-wrapper/blob/main/frontend/README.md

Instructions for cloning the repository, installing dependencies, building the project, and deploying the 'dist/' folder to a hosting provider.

```bash
git clone https://github.com/WangCheng Yeh/Chat_github.git
cd Chat_github
npm install
npm run build
# Deploy dist/ folder to your hosting provider
```

--------------------------------

### Troubleshoot Python Dependencies

Source: https://github.com/ven0m0/gemini-web-wrapper/blob/main/DEPLOYMENT.md

Guides users on setting up and activating a Python virtual environment and installing requirements. This helps resolve issues with Python package conflicts.

```bash
# Use virtual environment
python3 -m venv venv
source venv/bin/activate  # or venv\Scripts\activate on Windows
pip install -r requirements.txt
```

--------------------------------

### Configure Environment Variables

Source: https://github.com/ven0m0/gemini-web-wrapper/blob/main/DEPLOYMENT.md

Copies the example environment file and instructs the user to edit it with their API keys. This step is crucial for the application's functionality.

```bash
cp .env.example .env
# Edit .env with your API keys
```

--------------------------------

### Install Vercel CLI

Source: https://github.com/ven0m0/gemini-web-wrapper/blob/main/DEPLOYMENT.md

Installs the Vercel Command Line Interface globally using npm. This tool is used for deploying applications to Vercel.

```bash
npm i -g vercel
```

--------------------------------

### Start Project Script (Bash)

Source: https://github.com/ven0m0/gemini-web-wrapper/blob/main/README.md

An alternative script to start the project, likely encompassing both frontend and backend development servers or a combined startup process.

```bash
./start.sh
```

--------------------------------

### Build Frontend Application

Source: https://github.com/ven0m0/gemini-web-wrapper/blob/main/DEPLOYMENT.md

Builds the frontend application, typically generating static assets for deployment. This command is executed after frontend dependencies are installed.

```bash
cd frontend && npm run build && cd ..

```

--------------------------------

### Local Development Commands for Gemini Web Wrapper

Source: https://github.com/ven0m0/gemini-web-wrapper/blob/main/frontend/README.md

Provides essential npm commands for managing the local development environment of the Gemini Web Wrapper project. These commands cover dependency installation, starting the development server, building for production, previewing the production build, and running code quality checks.

```bash
npm install          # Install dependencies
npm run dev         # Start development server
npm run build       # Build for production
npm run preview     # Preview production build
npm run lint        # Check code quality

```

--------------------------------

### Project Configuration File

Source: https://github.com/ven0m0/gemini-web-wrapper/blob/main/frontend/README.md

Example of the `.config` file required for running tests. It includes essential keys like GitHub token, OpenAI key, repository details, and model configuration.

```javascript
// .config
{
  "githubToken": "ghp_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
  "openaiKey": "sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
  "owner": "your-username",
  "repo": "test-repository",
  "branch": "main",
  "model": "gpt-4o-mini",
  "temperature": 0.3
}
```

--------------------------------

### Deploy to Vercel

Source: https://github.com/ven0m0/gemini-web-wrapper/blob/main/DEPLOYMENT.md

Deploys the project to Vercel for production. This command assumes the Vercel CLI is installed and configured.

```bash
vercel --prod
```

--------------------------------

### Deploy to Vercel (Bash)

Source: https://github.com/ven0m0/gemini-web-wrapper/blob/main/README.md

Installs the Vercel CLI globally and deploys the project to Vercel for production. This is the recommended deployment method.

```bash
npm i -g vercel
vercel --prod
```

--------------------------------

### Basic Chat Widget Implementation in React

Source: https://github.com/ven0m0/gemini-web-wrapper/blob/main/frontend/src/components/CHAT_WIDGET_GUIDE.md

Demonstrates the basic setup of the ChatWidget component in a React application. It shows how to import the component and pass essential props for initial configuration.

```tsx
import { ChatWidget } from './components/ChatWidget'

function App() {
  return (
    <ChatWidget
      position="bottom-right"
      theme="auto"
      primaryColor="#007acc"
      agentName="Support Agent"
      agentAvatar="🤖"
      welcomeMessage="Hello! How can I help you today?"
    />
  )
}
```

--------------------------------

### Create Heroku App

Source: https://github.com/ven0m0/gemini-web-wrapper/blob/main/DEPLOYMENT.md

Creates a new application on the Heroku platform. This command requires the Heroku CLI to be installed and logged in.

```bash
heroku create your-app-name
```

--------------------------------

### Example Workflow: Basic File Editing with AI

Source: https://github.com/ven0m0/gemini-web-wrapper/blob/main/frontend/README.md

Illustrates a typical workflow for editing files using the Gemini Web Wrapper, enhanced by AI capabilities. This sequence involves configuring tokens, opening a file, providing AI instructions for modifications, applying changes, reviewing them in the editor, and committing the updates to GitHub.

```bash
/config                              # Setup tokens
/open README.md                      # Load file
Add installation instructions        # AI instruction
/apply                              # Apply changes
/editor                             # Review in editor
/commit "docs: add installation"    # Save changes

```

--------------------------------

### Example Workflow: File Exploration Commands

Source: https://github.com/ven0m0/gemini-web-wrapper/blob/main/frontend/README.md

Showcases commands for navigating and viewing file contents within a GitHub repository using the Gemini Web Wrapper. This includes listing directory contents at different levels, displaying the content of specific files, and opening files for editing.

```bash
/ls                                  # List root directory
/ls src/                            # List src folder
/cat package.json                   # View file contents
/open src/App.tsx                   # Load for editing

```

--------------------------------

### Example Workflow: Creating New Files with AI

Source: https://github.com/ven0m0/gemini-web-wrapper/blob/main/frontend/README.md

Details the process of creating new files within a GitHub repository using the Gemini Web Wrapper and AI assistance. The workflow includes setting up authentication, browsing the repository, specifying a new file path, editing its content in the integrated editor, and committing the newly created file.

```bash
/config                              # Setup tokens
/ls                                  # Browse repository
/new src/components/Header.tsx       # Create new React component
/editor                             # Switch to editor for coding
/commit "feat: add header component" # Save to GitHub

```

--------------------------------

### Run Frontend Development Server (Bash)

Source: https://github.com/ven0m0/gemini-web-wrapper/blob/main/README.md

Starts the development server for the React TypeScript frontend. This command is used during development to see frontend changes in real-time.

```bash
cd frontend
npm run dev
```

--------------------------------

### WebSocket Server and Client Commands for File Transfer

Source: https://github.com/ven0m0/gemini-web-wrapper/blob/main/frontend/README.md

Demonstrates how to set up and use a WebSocket server for real-time communication and file transfer within the Gemini Web Wrapper project. It includes commands to start the server, connect a client, execute remote commands, and transfer files between devices. This enables collaborative or remote development workflows.

```bash
# 1. Create WebSocket server with file transfer support
/socket server 8080              # Show enhanced server template code

# 2. Save template as websocket-server.js and run:
# node websocket-server.js

# 3. Connect from PWA
/socket connect ws://localhost:8080

# 4. Execute commands remotely
/socket exec npm test            # Run tests
/socket exec ls -la              # List files
/socket send hello               # Send to stdin

# 5. Transfer files between devices
/upload myfile.pdf               # Send file to server
/download shared.json            # Get file from server

# 6. View real-time output in CLI
# STDOUT/STDERR streams and file transfer status appear automatically

```

--------------------------------

### Automated Test Suite Commands

Source: https://github.com/ven0m0/gemini-web-wrapper/blob/main/frontend/README.md

npm commands to run the automated test suite, start the WebSocket server for testing, perform type checking, and build the project for production.

```bash
npm test                # Run comprehensive test suite
npm run server          # Start WebSocket server for testing
npm run typecheck       # Verify TypeScript compilation
npm run build           # Test production build
```

--------------------------------

### Troubleshoot Build Failures

Source: https://github.com/ven0m0/gemini-web-wrapper/blob/main/DEPLOYMENT.md

Provides commands to clear npm cache, reinstall dependencies, and rebuild the frontend. This is a common solution for build-related issues.

```bash
# Clear cache and rebuild
rm -rf node_modules package-lock.json
npm install
cd frontend && npm install && npm run build
```

--------------------------------

### GitHub Integration API

Source: https://github.com/ven0m0/gemini-web-wrapper/blob/main/DEPLOYMENT.md

Endpoints for interacting with GitHub repositories, including file operations, directory listing, and branch management.

```APIDOC
## GitHub Integration API

### POST /github/file/read

#### Description
Reads the content of a file from a GitHub repository.

### POST /github/file/write

#### Description
Writes content to a file in a GitHub repository.

### POST /github/list

#### Description
Lists the contents of a directory in a GitHub repository.

### POST /github/branches

#### Description
Lists the branches of a GitHub repository.
```

--------------------------------

### GitHub Actions: Deploy PWA to GitHub Pages

Source: https://github.com/ven0m0/gemini-web-wrapper/blob/main/frontend/README.md

Automates the deployment of a Progressive Web Application (PWA) to GitHub Pages. It checks out the code, sets up Node.js, installs dependencies, builds the PWA, configures GitHub Pages, uploads the build artifact, and deploys the site. Requires `main` branch push events.

```yaml
name: Deploy PWA to GitHub Pages

on:
  push:
    branches: [ main ]

permissions:
  contents: read
  pages: write
  id-token: write

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '18'
          cache: 'npm'
          
      - name: Install dependencies
        run: npm ci
        
      - name: Build PWA
        run: npm run build
        
      - name: Setup Pages
        uses: actions/configure-pages@v3
        
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v2
        with:
          path: './dist'
          
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v2

```

--------------------------------

### Deploy to Heroku

Source: https://github.com/ven0m0/gemini-web-wrapper/blob/main/DEPLOYMENT.md

Deploys the current Git repository to the Heroku remote. This command is used after creating a Heroku app and setting up the remote.

```bash
git push heroku main
```

--------------------------------

### Test Case 4: Tool Mode UI Workflow

Source: https://github.com/ven0m0/gemini-web-wrapper/blob/main/frontend/README.md

This test case is intended to test the visual file transfer interface. It includes setup steps and execution of commands within the tool mode.

```bash
# Setup Phase
/clear

```

--------------------------------

### Advanced Chat Widget Customization in React

Source: https://github.com/ven0m0/gemini-web-wrapper/blob/main/frontend/src/components/CHAT_WIDGET_GUIDE.md

Illustrates advanced customization options for the ChatWidget, including positioning, branding, styling, feature toggles, and behavioral settings. This example showcases a wide range of props for fine-tuning the widget's appearance and functionality.

```tsx
<ChatWidget
  // Positioning
  position="bottom-left"
  offset={{ x: 30, y: 30 }}
  
  // Branding
  companyName="Your Company"
  companyLogo="/logo.png"
  agentName="Sarah"
  agentAvatar="👩‍💼"
  welcomeMessage="Welcome! I'm here to help with any questions."
  
  // Styling
  theme="dark"
  primaryColor="#8b5cf6"
  backgroundColor="#1a1a1a"
  textColor="#ffffff"
  borderRadius={16}
  fontSize="large"
  
  // Features
  showAvatar={true}
  showTimestamp={true}
  allowAttachments={true}
  soundEnabled={true}
  notificationsEnabled={true}
  autoOpen={false}
  
  // Behavior
  minimizeOnOutsideClick={true}
  persistentChat={true}
/>
```

--------------------------------

### Build Frontend for Production (Bash)

Source: https://github.com/ven0m0/gemini-web-wrapper/blob/main/README.md

Creates a production-ready build of the React TypeScript frontend. This command is used before deploying the frontend to a hosting service.

```bash
cd frontend
npm run build
```

--------------------------------

### Gemini WebAPI

Source: https://github.com/ven0m0/gemini-web-wrapper/blob/main/DEPLOYMENT.md

Specific endpoints for interacting with Gemini models, including chat with cookie support and conversation listing.

```APIDOC
## Gemini WebAPI

### POST /gemini/chat

#### Description
Engages in a chat conversation with Gemini, supporting cookie-based session management.

### GET /gemini/conversations

#### Description
Retrieves a list of past Gemini conversations.
```

--------------------------------

### Bash Commands for Building and Deploying

Source: https://github.com/ven0m0/gemini-web-wrapper/blob/main/frontend/README.md

Provides essential bash commands for building the project with the correct GitHub Pages base path and for pushing changes to the main branch to trigger deployment. It also includes a command to verify manifest paths.

```bash
# Build with GitHub Pages base path
npm run build

# Verify manifest paths in dist/
cat dist/manifest.webmanifest  # Should show /Chat_github/ paths

# Push to main branch — GitHub Actions will build and deploy dist/ to Pages
git push origin main
```

--------------------------------

### Profile Management API

Source: https://github.com/ven0m0/gemini-web-wrapper/blob/main/DEPLOYMENT.md

Endpoints for managing user profiles, including listing, creating, switching, and deleting profiles.

```APIDOC
## Profile Management API

### GET /profiles/list

#### Description
Lists all available user profiles.

### POST /profiles/create

#### Description
Creates a new user profile.

### POST /profiles/switch

#### Description
Switches the active user profile.

### DELETE /profiles/{name}

#### Description
Deletes a specific user profile by name.

#### Path Parameters
- **name** (string) - Required - The name of the profile to delete.
```

--------------------------------

### Add Python Package Dependency

Source: https://github.com/ven0m0/gemini-web-wrapper/blob/main/CLAUDE.md

Commands to add runtime or development dependencies to the Python project using 'uv'. It is crucial to avoid using 'pip install' directly.

```bash
uv add <package>          # Runtime dependency
uv add --dev <package>    # Dev/test-only dependency
# Never use pip install
```

--------------------------------

### Project Structure Overview

Source: https://github.com/ven0m0/gemini-web-wrapper/blob/main/README.md

Provides a high-level overview of the project's directory structure, highlighting key directories for frontend, backend, and core logic.

```tree
├── frontend/          # React TypeScript frontend
│   ├── src/
│   │   ├── components/ # UI components
│   │   ├── services/   # API services
│   │   └── store.ts    # State management
│   └── dist/          # Built frontend
├── llm_core/          # LLM provider abstractions
├── server.py          # FastAPI backend
├── requirements.txt   # Python dependencies
└── vercel.json        # Deployment config
```

--------------------------------

### Core Endpoints

Source: https://github.com/ven0m0/gemini-web-wrapper/blob/main/DEPLOYMENT.md

These are the primary endpoints for interacting with the AI Assistant's chat and code functionalities, including a health check.

```APIDOC
## Core Endpoints

### POST /chat

#### Description
Provides simple chat functionality.

### POST /code

#### Description
Offers code assistance capabilities.

### POST /chatbot

#### Description
Enables chat functionality with conversation history.

### POST /chatbot/stream

#### Description
Provides streaming chat responses for a more interactive experience.

### GET /health

#### Description
Checks the health status of the application.
```

--------------------------------

### Provider Pattern Implementation

Source: https://github.com/ven0m0/gemini-web-wrapper/blob/main/AGENTS.md

Explains the provider pattern used in `llm_core/interfaces.py` and `llm_core/factory.py`. Details how to add new providers by implementing the `LLMProvider` Protocol and registering them in the `ProviderFactory`.

```markdown
`LLMProvider` Protocol defined in `llm_core/interfaces.py`. Providers registered in `ProviderFactory` (`llm_core/factory.py`) via structural `match` dispatch. To add a provider: implement the Protocol, add a `case` branch in the factory, add required env vars.

```

--------------------------------

### POST /chatbot/stream

Source: https://context7.com/ven0m0/gemini-web-wrapper/llms.txt

Get real-time streaming responses for a more interactive chat experience. Returns Server-Sent Events (SSE) with incremental text chunks.

```APIDOC
## POST /chatbot/stream

### Description
Get real-time streaming responses for a more interactive chat experience. Returns Server-Sent Events (SSE) with incremental text chunks.

### Method
POST

### Endpoint
/chatbot/stream

### Parameters
#### Request Body
- **message** (string) - Required - The user's latest message.
- **history** (array) - Optional - An array of previous messages in the conversation. Each message should have a 'role' ('user' or 'model') and 'content' (string).
- **system** (string) - Optional - A system prompt to guide the AI's behavior.

### Request Example
```json
{
  "message": "Write a haiku about programming",
  "history": [],
  "system": "You are a creative poet"
}
```

### Response
#### Success Response (200)
- **text** (string) - Incremental text chunks of the AI-generated response, streamed as Server-Sent Events.

#### Response Example
```
Code flows like water
Bugs swim upstream to the source
Debug brings the catch
```
```

--------------------------------

### Build Frontend Application

Source: https://github.com/ven0m0/gemini-web-wrapper/blob/main/CLAUDE.md

Command to build the frontend application using Vite. This command should be run after making changes to frontend components or services.

```bash
cd frontend && bun run build to verify.
```

--------------------------------

### Configure Environment Variables (Bash)

Source: https://github.com/ven0m0/gemini-web-wrapper/blob/main/README.md

Lists essential environment variables for configuring the AI assistant, including API keys for Google Gemini and Anthropic Claude, model provider, model name, and port.

```bash
GOOGLE_API_KEY=your_google_api_key_here
ANTHROPIC_API_KEY=your_anthropic_api_key_here  # Optional
MODEL_PROVIDER=gemini  # or anthropic
MODEL_NAME=gemini-2.5-flash
PORT=9000
```

--------------------------------

### OpenAI Compatible Endpoints

Source: https://github.com/ven0m0/gemini-web-wrapper/blob/main/DEPLOYMENT.md

This endpoint mimics the OpenAI API for chat completions, allowing compatibility with tools and libraries expecting OpenAI's format.

```APIDOC
## OpenAI Compatible Endpoint

### POST /v1/chat/completions

#### Description
This endpoint is compatible with the OpenAI Chat Completions API, allowing seamless integration with existing OpenAI clients and workflows.

### Method
POST

### Endpoint
/v1/chat/completions

### Request Body
- **model** (string) - Required - The model to use for chat completion (e.g., `gpt-4o-mini`, `gemini-flash`).
- **messages** (array) - Required - A list of message objects representing the conversation history.
  - **role** (string) - Required - The role of the author of the message (`system`, `user`, or `assistant`).
  - **content** (string) - Required - The content of the message.
- **temperature** (number) - Optional - Controls randomness. Lower values make output more focused and deterministic.
- **max_tokens** (integer) - Optional - The maximum number of tokens to generate in the completion.

### Request Example
```json
{
  "model": "gpt-4o-mini",
  "messages": [
    {"role": "system", "content": "You are a helpful assistant."},
    {"role": "user", "content": "Who won the world series in 2020?"}
  ],
  "temperature": 0.7,
  "max_tokens": 150
}
```

### Response
#### Success Response (200)
- **id** (string) - Unique identifier for the completion.
- **object** (string) - Type of object, e.g., `chat.completion`.
- **created** (integer) - Unix timestamp of when the completion was created.
- **model** (string) - The model used for the completion.
- **choices** (array) - A list of completion choices.
  - **index** (integer) - Index of the choice.
  - **message** (object) - The message content.
    - **role** (string) - The role of the author (`assistant`).
    - **content** (string) - The generated message content.
  - **finish_reason** (string) - The reason the model stopped generating tokens (e.g., `stop`, `length`).
- **usage** (object) - Usage statistics for the completion.
  - **prompt_tokens** (integer) - Number of tokens in the prompt.
  - **completion_tokens** (integer) - Number of tokens in the completion.
  - **total_tokens** (integer) - Total tokens used.

#### Response Example
```json
{
  "id": "chatcmpl-12345",
  "object": "chat.completion",
  "created": 1700000000,
  "model": "gpt-4o-mini",
  "choices": [
    {
      "index": 0,
      "message": {
        "role": "assistant",
        "content": "The Los Angeles Dodgers won the World Series in 2020."
      },
      "finish_reason": "stop"
    }
  ],
  "usage": {
    "prompt_tokens": 20,
    "completion_tokens": 15,
    "total_tokens": 35
  }
}
```
```

--------------------------------

### Development Server Commands

Source: https://github.com/ven0m0/gemini-web-wrapper/blob/main/CLAUDE.md

Commands to run the backend and frontend development servers with hot-reloading. Also includes commands for building a production-ready frontend and running Docker Compose for the full stack or specific services.

```bash
# Backend — dev (hot-reload)
uv run uvicorn server:app --reload --host 0.0.0.0 --port 9000

# Frontend — dev (hot-reload, proxies API to backend)
cd frontend && bun run dev       # http://localhost:5173

# Full stack — production build
cd frontend && bun run build && cd ..
uv run uvicorn server:app --host 0.0.0.0 --port 9000
# Frontend served at http://localhost:9000/

# Docker
docker-compose up bifrost                # Bifrost gateway only
docker-compose --profile full-stack up  # Bifrost + app

```

--------------------------------

### POST /code

Source: https://context7.com/ven0m0/gemini-web-wrapper/llms.txt

Get AI-powered code modifications based on natural language instructions. The model acts as a coding assistant to apply changes to your source code.

```APIDOC
## POST /code

### Description
Get AI-powered code modifications based on natural language instructions. The model acts as a coding assistant to apply changes to your source code.

### Method
POST

### Endpoint
/code

### Parameters
#### Request Body
- **code** (string) - Required - The source code to be modified.
- **instruction** (string) - Required - The natural language instruction for code modification.

### Request Example
```json
{
  "code": "def add(a, b):\n    return a + b",
  "instruction": "Add type hints and a docstring"
}
```

### Response
#### Success Response (200)
- **text** (string) - The modified source code.

#### Response Example
```json
{
  "text": "def add(a: int, b: int) -> int:\n    \"\"\"Add two integers and return the sum.\n    \n    Args:\n        a: First integer\n        b: Second integer\n    \n    Returns:\n        Sum of a and b\n    \"\"\"\n    return a + b"
}
```
```

--------------------------------

### Test Case 3: File Exploration Workflow

Source: https://github.com/ven0m0/gemini-web-wrapper/blob/main/frontend/README.md

This test case focuses on validating directory browsing and file preview functionalities. It includes listing directory contents, previewing file content, and testing error handling for non-existent paths.

```bash
# Setup Phase
/clear

# Test Execution
/ls                                  # Expected: Root directory listing with icons
/ls src/                            # Expected: Source directory contents
/ls nonexistent/                    # Expected: Error message
/cat package.json                   # Expected: Shows package.json content (truncated if >50 lines)
/cat src/App.tsx                    # Expected: Shows App.tsx content
/cat missing-file.txt               # Expected: File not found error

# Validation
# Verify all listings show correct file types (📁 for dirs, 📄 for files)
# Verify file sizes are displayed in human-readable format
# Verify error handling for non-existent paths
# Status: ✅ PASS / ❌ FAIL

```

--------------------------------

### Run Backend Tests (Bash)

Source: https://github.com/ven0m0/gemini-web-wrapper/blob/main/README.md

Executes the backend tests using pytest. This is crucial for ensuring the backend functionality is working as expected.

```bash
python -m pytest
```

--------------------------------

### Frontend State Management with Zustand

Source: https://context7.com/ven0m0/gemini-web-wrapper/llms.txt

Manages frontend application state using Zustand. This example shows how to access and update state for mode, file editing, configuration, and AI status within a React component.

```typescript
import { useStore } from './store'

// Access and update state
const Component = () => {
  const { 
    mode, setMode,
    file, setFile,
    config, setConfig,
    ai, setAI
  } = useStore()

  // Switch between CLI, Editor, and Tool modes
  setMode('editor')

  // Update file state
  setFile({
    current: 'const x = 1;',
    original: 'const x = 1;',
    sha: 'abc123',
    dirty: false
  })

  // Configure GitHub and AI settings
  setConfig({
    githubToken: 'ghp_xxx',
    owner: 'username',
    repo: 'project',
    branch: 'main',
    model: 'gpt-4o-mini',
    temperature: 0.3
  })

  // Track AI state
  setAI({
    pending: true,
    lastInstruction: 'Add error handling'
  })

  return <div>Mode: {mode}, File dirty: {file.dirty}</div>
}
```

--------------------------------

### PWA Web App Manifest for GitHub Pages

Source: https://github.com/ven0m0/gemini-web-wrapper/blob/main/frontend/README.md

Configuration for the web app manifest file (`manifest.webmanifest`) to ensure correct paths for GitHub Pages, including name, short name, description, start URL, scope, display mode, colors, and icons.

```json
{
  "name": "Chat GitHub - Mobile AI Editor",
  "short_name": "Chat GitHub",
  "description": "AI-powered mobile code editor for GitHub",
  "start_url": "/Chat_github/",
  "scope": "/Chat_github/",
  "display": "standalone",
  "background_color": "#1a1a1a",
  "theme_color": "#0969da",
  "icons": [
    {
      "src": "/Chat_github/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/Chat_github/icon-512.png", 
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}
```