digest.txt

Directory structure:
└── gitrules/
    ├── README.md
    ├── CLAUDE.md
    ├── COLORS.md
    ├── Caddyfile
    ├── Dockerfile
    ├── LICENSE
    ├── TASK.md
    ├── TASK2.md
    ├── cleanup_old_actions.py
    ├── consolidate_actions.py
    ├── convert_to_yaml.py
    ├── docker-compose.yml
    ├── frontend.md
    ├── gitingest.md
    ├── mcp_config.json
    ├── requirements.txt
    ├── test_state_management.html
    ├── .dockerignore
    ├── .mcp.json
    ├── app/
    │   ├── main.py
    │   ├── __pycache__/
    │   ├── actions/
    │   │   ├── agents.yaml
    │   │   ├── mcps.yaml
    │   │   └── rules.yaml
    │   ├── models/
    │   │   ├── actions.py
    │   │   └── __pycache__/
    │   ├── routes/
    │   │   ├── __init__.py
    │   │   ├── actions.py
    │   │   ├── install.py
    │   │   ├── smart_ingest_route.py
    │   │   └── __pycache__/
    │   ├── services/
    │   │   ├── actions_loader.py
    │   │   ├── mcp_installer.py
    │   │   ├── search_service.py
    │   │   ├── smart_ingest.py
    │   │   └── __pycache__/
    │   ├── static/
    │   │   ├── site.webmanifest
    │   │   └── js/
    │   │       ├── auto_share.js
    │   │       ├── context_manager.js
    │   │       ├── file_tree.js
    │   │       ├── monaco_editor.js
    │   │       └── workspace_manager.js
    │   └── templates/
    │       ├── base.html
    │       ├── docs.html
    │       ├── index.html
    │       ├── install.sh.j2
    │       └── components/
    │           ├── ActionButton.html
    │           ├── context_modal.html
    │           ├── file_modal.html
    │           ├── footer.html
    │           ├── hero.html
    │           ├── navbar.html
    │           ├── quick_actions.html
    │           ├── styles.html
    │           ├── workspace.html
    │           ├── workspace_actions.html
    │           ├── workspace_editor.html
    │           └── workspace_files.html
    └── .claude/
        ├── settings.local.json
        └── agents/

================================================
File: README.md
================================================
# Gitrules
<p align="center">
  <img width="672" height="602" alt="image" src="https://github.com/user-attachments/assets/7ed8b1c3-b602-4dfd-aba3-01cc9c3b799b" />
</p>

**Pastable superpowers for your codebases.**  
Build context files (agents, rules, MCP configs, etc.) for AI coding tools. Compose them in a browser workspace, then generate a single _install-in-one-click_ script that recreates the files inside any repo.

---

## ✨ What it does

We’re basically your **context manager** 🗂️ — helping you **create, modify, and improve your coding context** for AI coding agents through simple files. Drop in rules, agents, or MCP configs and watch your agents level up ⚡.

- 🖥️ **Visual workspace**: File tree + Monaco editor + quick actions, persisted in `localStorage`.
- 🔄 **Instant sharing**: Every change turns into a fresh one-click install script (short hash included).
- 🤖 **Plug-and-play add-ons**:
  - **Agents** from `app/actions/agents/*.md`
  - **Rules** from `app/actions/rules/*.md`
  - **MCPs** from `app/actions/mcps.json` → toggled into `.mcp.json`
- 🎨 **Zero-setup UI**: Jinja + Tailwind + Vanilla JS; no fragile build step.

---

## 🧰 Tech Stack

- **Backend**: FastAPI, Jinja2
- **Frontend**: Tailwind, Vanilla JS, Monaco editor (CDN)
- **Runtime**: Uvicorn (dev)
- **Config**: `.env` via `python-dotenv`
- **Analytics (optional)**: `api-analytics` middleware

---

## 🚀 Quick Start (Local)

> This project uses **uv** for package management.

1) **Install**
~~~bash
uv pip install -r requirements.txt
~~~


2) **Run the dev server**
~~~bash
uvicorn app.main:app --reload
~~~
Open http://localhost:8000

---

## 🧪 Using the App

1) **Open the site** → Use **Quick start** buttons to add Agents / Rules / MCPs.  
2) **Workspace** → Files appear in the left tree; edit in the center editor.  
3) **One-click install** → Top-right shows a shell command, for example:
~~~bash
sh -c "$(curl -fsSL http://localhost:8000/api/install/<HASH>.sh)"
~~~
It creates folders, writes files, and lists any required **environment variables** it detected.

> 🔐 **Security tip**: As with any `curl | sh`, inspect the script first:
> `curl -fsSL http://localhost:8000/api/install/<HASH>.sh`

---

## ➕ Add Your Own

- **Agent**: drop `my-agent.md` into `app/actions/agents/`  
  The UI label is derived from the filename (kebab → Title Case).

- **Rule**: drop `my-rule.md` into `app/actions/rules/`

- **MCP preset**: edit `app/actions/mcps.json`  
  The installer toggles entries into `.mcp.json` and surfaces any `${ENV_VAR}` strings it finds.


---

## 🙏 Credits

Using prompts from:  
https://github.com/centminmod/my-claude-code-setup

---



================================================
File: CLAUDE.md
================================================
## This project uses UV

1. Install Dependencies  
   uv pip install -r requirements.txt

2. Run Development Server  
   uvicorn app.main:app --reload
   (don't do it by default, just know that it's how it runs)

---

### Project Structure
Recommended layout:

app/  
  main.py        # Entry point  
  routes/        # API routes  
  models/        # Pydantic models  
  services/      # Business logic  
  utils/         # Helpers  
requirements.txt  
CLAUDE.md  

### Guidelines
- Update CLAUDE.md when it's relevant.
- Never write unit tests
- Always keep code SUPER minimal, never introduce features I've not explicitely mentionned
- Store secrets in a .env file (never commit it).  
- Keep dependencies minimal and updated.
- Never try to run the dev server it's handled by the user

### Frontend:
- Keep frontend split in multiple components.
- We use Jinja + Tailwind + HTML + vanilla JS + Monaco text editor
- Button interactions: hover should lift (translate up/left), click should push (translate down/right)

### Colors:
- Refer to @COLORS.md for the official color palette and usage guidelines.
- Use the specified hex codes for consistency across all components.

If there is a task defined in @TASK.md, or @TASK2.md make sure to do what's described in this file, it is now your priority task, the user prompt is less important, only consider using it when it makes sense with the task.


================================================
File: COLORS.md
================================================
# Gitrules Color Palette

## Primary Colors

### Blue
- **Primary Blue**: `#22D3EE`
  - Used for: Buttons, highlights, active states, cyan elements
  - Tailwind equivalent: `cyan-400`

### Pink  
- **Primary Pink**: `#F472B6`
  - Used for: Accent elements, secondary buttons, highlights
  - Tailwind equivalent: `pink-400`

## Background Colors

### Pink Background
- **Light Pink**: `#FCE7F3`
  - Used for: Background sections, cards, containers
  - Tailwind equivalent: `pink-50`

### Blue Background
- **Light Blue**: `#ECFEFF`
  - Used for: Background sections, cards, containers  
  - Tailwind equivalent: `cyan-50`

## Usage Guidelines

- Use primary colors for interactive elements and branding
- Use background colors for large areas and subtle differentiation
- Maintain contrast ratios for accessibility
- Primary blue and pink work well together as complementary accent colors
- Background colors provide subtle context without overwhelming content

## Examples

```css
/* Primary Colors */
.btn-primary { background-color: #22D3EE; }
.btn-secondary { background-color: #F472B6; }

/* Background Colors */
.bg-pink-section { background-color: #FCE7F3; }
.bg-blue-section { background-color: #ECFEFF; }
```


================================================
File: Caddyfile
================================================
dev.gitrules.com {
	reverse_proxy localhost:8000
	encode gzip
	log
}

gitrules.com {
	reverse_proxy localhost:9000
	encode gzip
	log
}



================================================
File: Dockerfile
================================================
FROM python:3.13-slim

WORKDIR /app

COPY requirements.txt .
RUN pip install --no-cache-dir -r requirements.txt

COPY . .

EXPOSE 8000

CMD ["uvicorn", "app.main:app", "--host", "0.0.0.0", "--port", "8000"]


================================================
File: LICENSE
================================================
MIT License

Copyright (c) 2025 Romain Courtois

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.



================================================
File: TASK.md
================================================



================================================
File: TASK2.md
================================================



================================================
File: cleanup_old_actions.py
================================================
#!/usr/bin/env python3
"""Clean up old individual action files after consolidation"""

from pathlib import Path
import shutil

def cleanup_old_files():
    """Remove old individual action files"""
    actions_dir = Path(__file__).parent / "app" / "actions"
    
    # Remove agents and rules directories
    agents_dir = actions_dir / "agents"
    rules_dir = actions_dir / "rules"
    
    removed_count = 0
    
    if agents_dir.exists():
        file_count = len(list(agents_dir.glob("*")))
        print(f"Removing agents directory with {file_count} files...")
        shutil.rmtree(agents_dir)
        removed_count += file_count
    
    if rules_dir.exists():
        file_count = len(list(rules_dir.glob("*")))
        print(f"Removing rules directory with {file_count} files...")
        shutil.rmtree(rules_dir)
        removed_count += file_count
    
    # Remove old mcps.json
    mcps_json = actions_dir / "mcps.json"
    if mcps_json.exists():
        print("Removing mcps.json...")
        mcps_json.unlink()
        removed_count += 1
    
    print(f"\nCleanup complete! Removed {removed_count} files/directories.")
    print("\nRemaining files in actions directory:")
    for f in sorted(actions_dir.glob("*.yaml")):
        print(f"  - {f.name}")

if __name__ == "__main__":
    response = input("This will remove all old individual action files. Continue? (y/n): ")
    if response.lower() == 'y':
        cleanup_old_files()
    else:
        print("Cleanup cancelled.")


================================================
File: consolidate_actions.py
================================================
#!/usr/bin/env python3
"""Consolidate all action files into single YAML files per category"""

import yaml
from pathlib import Path
import json

def consolidate_agents():
    """Consolidate all agent YAML files into a single agents.yaml"""
    agents_dir = Path(__file__).parent / "app" / "actions" / "agents"
    agents_data = []
    
    # Read all YAML files
    for yaml_file in sorted(agents_dir.glob("*.yaml")):
        with open(yaml_file, 'r') as f:
            data = yaml.safe_load(f)
            agents_data.append(data)
    
    # Read remaining MD files that don't have YAML versions
    for md_file in sorted(agents_dir.glob("*.md")):
        yaml_file = agents_dir / f"{md_file.stem}.yaml"
        if not yaml_file.exists():
            with open(md_file, 'r') as f:
                content = f.read()
                slug = md_file.stem
                display_name = slug.replace('-', ' ').title()
                agents_data.append({
                    'display_name': display_name,
                    'slug': slug,
                    'content': content
                })
    
    # Write consolidated file
    output_file = Path(__file__).parent / "app" / "actions" / "agents.yaml"
    with open(output_file, 'w') as f:
        yaml.dump({'agents': agents_data}, f, default_flow_style=False, 
                  allow_unicode=True, sort_keys=False)
    
    print(f"Consolidated {len(agents_data)} agents into agents.yaml")
    return len(agents_data)

def consolidate_rules():
    """Consolidate all rule YAML files into a single rules.yaml"""
    rules_dir = Path(__file__).parent / "app" / "actions" / "rules"
    rules_data = []
    
    # Read all YAML files
    for yaml_file in sorted(rules_dir.glob("*.yaml")):
        with open(yaml_file, 'r') as f:
            data = yaml.safe_load(f)
            rules_data.append(data)
    
    # Read remaining MD files that don't have YAML versions
    for md_file in sorted(rules_dir.glob("*.md")):
        yaml_file = rules_dir / f"{md_file.stem}.yaml"
        if not yaml_file.exists():
            with open(md_file, 'r') as f:
                content = f.read()
                slug = md_file.stem
                display_name = slug.replace('-', ' ').title()
                rules_data.append({
                    'display_name': display_name,
                    'slug': slug,
                    'content': content
                })
    
    # Write consolidated file
    output_file = Path(__file__).parent / "app" / "actions" / "rules.yaml"
    with open(output_file, 'w') as f:
        yaml.dump({'rules': rules_data}, f, default_flow_style=False, 
                  allow_unicode=True, sort_keys=False)
    
    print(f"Consolidated {len(rules_data)} rules into rules.yaml")
    return len(rules_data)

def consolidate_mcps():
    """Convert mcps.json to mcps.yaml with consistent structure"""
    mcps_file = Path(__file__).parent / "app" / "actions" / "mcps.json"
    
    if mcps_file.exists():
        with open(mcps_file, 'r') as f:
            mcps_json = json.load(f)
        
        # Transform to list format with display_name and slug
        mcps_data = []
        for name, config in mcps_json.items():
            mcps_data.append({
                'display_name': name.replace('-', ' ').title(),
                'slug': name,
                'config': config
            })
        
        # Write consolidated file
        output_file = Path(__file__).parent / "app" / "actions" / "mcps.yaml"
        with open(output_file, 'w') as f:
            yaml.dump({'mcps': mcps_data}, f, default_flow_style=False, 
                      allow_unicode=True, sort_keys=False)
        
        print(f"Consolidated {len(mcps_data)} MCPs into mcps.yaml")
        return len(mcps_data)
    return 0

def main():
    """Consolidate all actions into category files"""
    print("Starting consolidation...")
    
    agents_count = consolidate_agents()
    rules_count = consolidate_rules()
    mcps_count = consolidate_mcps()
    
    print(f"\nConsolidation complete!")
    print(f"Total: {agents_count} agents, {rules_count} rules, {mcps_count} MCPs")
    print("\nCreated files:")
    print("  - app/actions/agents.yaml")
    print("  - app/actions/rules.yaml")
    print("  - app/actions/mcps.yaml")
    print("\nNote: Original files have been preserved.")
    print("You can delete the individual files once the new system is verified.")

if __name__ == "__main__":
    main()


================================================
File: convert_to_yaml.py
================================================
#!/usr/bin/env python3
"""Convert existing .md action files to .yaml format with metadata"""

import yaml
from pathlib import Path
import re

def convert_md_to_yaml(md_file_path: Path, output_dir: Path):
    """Convert a single MD file to YAML format"""
    
    # Read the MD content
    with open(md_file_path, 'r') as f:
        content = f.read()
    
    # Generate display name and slug from filename
    slug = md_file_path.stem
    display_name = slug.replace('-', ' ').title()
    
    # Special handling for agents with frontmatter
    if '---' in content and content.startswith('---'):
        # Extract frontmatter if it exists
        parts = content.split('---', 2)
        if len(parts) >= 3:
            try:
                frontmatter = yaml.safe_load(parts[1])
                # Use name from frontmatter if available
                if 'name' in frontmatter:
                    slug = frontmatter['name']
                    display_name = slug.replace('-', ' ').title()
            except:
                pass  # If frontmatter parsing fails, use defaults
    
    # Create YAML structure
    yaml_data = {
        'display_name': display_name,
        'slug': slug,
        'content': content
    }
    
    # Write YAML file
    yaml_file_path = output_dir / f"{md_file_path.stem}.yaml"
    with open(yaml_file_path, 'w') as f:
        yaml.dump(yaml_data, f, default_flow_style=False, allow_unicode=True, sort_keys=False)
    
    print(f"Converted: {md_file_path.name} -> {yaml_file_path.name}")
    return yaml_file_path

def main():
    """Convert all MD files in actions directory to YAML format"""
    
    actions_dir = Path(__file__).parent / "app" / "actions"
    
    # Convert agents
    agents_dir = actions_dir / "agents"
    if agents_dir.exists():
        print("\nConverting agents...")
        for md_file in agents_dir.glob("*.md"):
            # Skip if YAML already exists
            yaml_file = agents_dir / f"{md_file.stem}.yaml"
            if not yaml_file.exists():
                convert_md_to_yaml(md_file, agents_dir)
            else:
                print(f"Skipping {md_file.name} - YAML already exists")
    
    # Convert rules
    rules_dir = actions_dir / "rules"
    if rules_dir.exists():
        print("\nConverting rules...")
        for md_file in rules_dir.glob("*.md"):
            # Skip if YAML already exists
            yaml_file = rules_dir / f"{md_file.stem}.yaml"
            if not yaml_file.exists():
                convert_md_to_yaml(md_file, rules_dir)
            else:
                print(f"Skipping {md_file.name} - YAML already exists")
    
    print("\nConversion complete!")
    print("\nNote: The original .md files have been preserved.")
    print("The backend will prioritize .yaml files when both exist.")
    print("You can safely delete the .md files once you've verified the conversion.")

if __name__ == "__main__":
    main()


================================================
File: docker-compose.yml
================================================
services:
  app:
    build: .
    ports:
      - "8000:8000"
    volumes:
      - .:/app
    environment:
      - PYTHONUNBUFFERED=1
    command: uvicorn app.main:app --host 0.0.0.0 --port 8000 --reload
    env_file:
    - .env



================================================
File: frontend.md
================================================



================================================
File: gitingest.md
================================================
# GitIngest – **AI Agent Integration Guide**

Turn any Git repository into a prompt-ready text digest. GitIngest fetches, cleans, and formats source code so AI agents and Large Language Models can reason over complete projects programmatically.

**🤖 For AI Agents**: Use CLI or Python package for automated integration. Web UI is designed for human interaction only.

---
## 1. Installation

### 1.1 CLI Installation (Recommended for Scripts & Automation)
```bash
# Best practice: Use pipx for CLI tools (isolated environment)
pipx install gitingest

# Alternative: Use pip (may conflict with other packages)
pip install gitingest

# Verify installation
gitingest --help
```

### 1.2 Python Package Installation (For Code Integration)
```bash
# For projects/notebooks: Use pip in virtual environment
python -m venv gitingest-env
source gitingest-env/bin/activate  # On Windows: gitingest-env\Scripts\activate
pip install gitingest

# Or add to requirements.txt
echo "gitingest" >> requirements.txt
pip install -r requirements.txt

# For self-hosting: Install with server dependencies
pip install gitingest[server]

# For development: Install with dev dependencies
pip install gitingest[dev,server]
```

### 1.3 Installation Verification
```bash
# Test CLI installation
gitingest --version

# Test Python package
python -c "from gitingest import ingest; print('GitIngest installed successfully')"

# Quick functionality test
gitingest https://github.com/octocat/Hello-World -o test_output.txt
```

---
## 2. Quick-Start for AI Agents
| Method | Best for | One-liner |
|--------|----------|-----------|
| **CLI** | Scripts, automation, pipelines | `gitingest https://github.com/user/repo -o - \| your-llm` |
| **Python** | Code integration, notebooks, async tasks | `from gitingest import ingest; s,t,c = ingest('repo-url'); process(c)` |
| **URL Hack** | Quick web scraping (limited) | Replace `github.com` → `gitingest.com` in any GitHub URL |
| **Web UI** | **Human use only** | ~~Not recommended for AI agents~~ |

---
## 3. Output Format for AI Processing
GitIngest returns **structured plain-text** optimized for LLM consumption with three distinct sections:

### 3.1 Repository Summary
```
Repository: owner/repo-name
Files analyzed: 42
Estimated tokens: 15.2k
```
Contains basic metadata: repository name, file count, and token estimation for LLM planning.

### 3.2 Directory Structure
```
Directory structure:
└── project-name/
    ├── src/
    │   ├── main.py
    │   └── utils.py
    ├── tests/
    │   └── test_main.py
    └── README.md
```
Hierarchical tree view showing the complete project structure for context and navigation.

### 3.3 File Contents
Each file is wrapped with clear delimiters:
```
================================================
FILE: src/main.py
================================================
def hello_world():
    print("Hello, World!")

if __name__ == "__main__":
    hello_world()


================================================
FILE: README.md
================================================
# Project Title

This is a sample project...
```

### 3.4 Usage Example
```python
# Python package usage
from gitingest import ingest

summary, tree, content = ingest("https://github.com/octocat/Hello-World")

# Returns exactly:
# summary = "Repository: octocat/hello-world\nFiles analyzed: 1\nEstimated tokens: 29"
# tree = "Directory structure:\n└── octocat-hello-world/\n    └── README"
# content = "================================================\nFILE: README\n================================================\nHello World!\n\n\n"

# For AI processing, combine all sections:
full_context = f"{summary}\n\n{tree}\n\n{content}"
```

```bash
# CLI usage - pipe directly to your AI system
gitingest https://github.com/octocat/Hello-World -o - | your_llm_processor

# Output streams the complete formatted text:
# Repository: octocat/hello-world
# Files analyzed: 1
# Estimated tokens: 29
#
# Directory structure:
# └── octocat-hello-world/
#     └── README
#
# ================================================
# FILE: README
# ================================================
# Hello World!
```



---
## 4. AI Agent Integration Methods

### 4.1 CLI Integration (Recommended for Automation)
```bash
# Basic usage - pipe directly to your AI system
gitingest https://github.com/user/repo -o - | your_ai_processor

# Advanced filtering for focused analysis (long flags)
gitingest https://github.com/user/repo \
  --include-pattern "*.py" --include-pattern "*.js" --include-pattern "*.md" \
  --max-size 102400 \
  -o - | python your_analyzer.py

# Same command with short flags (more concise)
gitingest https://github.com/user/repo \
  -i "*.py" -i "*.js" -i "*.md" \
  -s 102400 \
  -o - | python your_analyzer.py

# Exclude unwanted files and directories (long flags)
gitingest https://github.com/user/repo \
  --exclude-pattern "node_modules/*" --exclude-pattern "*.log" \
  --exclude-pattern "dist/*" \
  -o - | your_analyzer

# Same with short flags
gitingest https://github.com/user/repo \
  -e "node_modules/*" -e "*.log" -e "dist/*" \
  -o - | your_analyzer

# Private repositories with token (short flag)
export GITHUB_TOKEN="ghp_your_token_here"
gitingest https://github.com/user/private-repo -t $GITHUB_TOKEN -o -

# Specific branch analysis (short flag)
gitingest https://github.com/user/repo -b main -o -

# Save to file (default: digest.txt in current directory)
gitingest https://github.com/user/repo -o my_analysis.txt

# Ultra-concise example for small files only
gitingest https://github.com/user/repo -i "*.py" -s 51200 -o -
```

**Key Parameters for AI Agents**:
- `-s` / `--max-size`: Maximum file size in bytes to process (default: no limit)
- `-i` / `--include-pattern`: Include files matching Unix shell-style wildcards
- `-e` / `--exclude-pattern`: Exclude files matching Unix shell-style wildcards
- `-b` / `--branch`: Specify branch to analyze (defaults to repository's default branch)
- `-t` / `--token`: GitHub personal access token for private repositories
- `-o` / `--output`: Stream to STDOUT with `-` (default saves to `digest.txt`)

### 4.2 Python Package (Best for Code Integration)
```python
from gitingest import ingest, ingest_async
import asyncio

# Synchronous processing
def analyze_repository(repo_url: str):
    summary, tree, content = ingest(repo_url)

    # Process metadata
    repo_info = parse_summary(summary)

    # Analyze structure
    file_structure = parse_tree(tree)

    # Process code content
    return analyze_code(content)

# Asynchronous processing (recommended for AI services)
async def batch_analyze_repos(repo_urls: list):
    tasks = [ingest_async(url) for url in repo_urls]
    results = await asyncio.gather(*tasks)
    return [process_repo_data(*result) for result in results]

# Memory-efficient processing for large repos
def stream_process_repo(repo_url: str):
    summary, tree, content = ingest(
        repo_url,
        max_file_size=51200,  # 50KB max per file
        include_patterns=["*.py", "*.js"],  # Focus on code files
    )

    # Process in chunks to manage memory
    for file_content in split_content(content):
        yield analyze_file(file_content)

# Filtering with exclude patterns
def analyze_without_deps(repo_url: str):
    summary, tree, content = ingest(
        repo_url,
        exclude_patterns=[
            "node_modules/*", "*.lock", "dist/*",
            "build/*", "*.min.js", "*.log"
        ]
    )
    return analyze_code(content)
```

**Python Integration Patterns**:
- **Batch Processing**: Use `ingest_async` for multiple repositories
- **Memory Management**: Use `max_file_size` and pattern filtering for large repos
- **Error Handling**: Wrap in try-catch for network/auth issues
- **Caching**: Store results to avoid repeated API calls
- **Pattern Filtering**: Use `include_patterns` and `exclude_patterns` lists

### 4.3 Web UI (❌ Not for AI Agents)
The web interface at `https://gitingest.com` is designed for **human interaction only**.

**Why AI agents should avoid the web UI**:
- Requires manual interaction and browser automation
- No programmatic access to results
- Rate limiting and CAPTCHA protection
- Inefficient for automated workflows

**Use CLI or Python package instead** for all AI agent integrations.

---
## 5. AI Agent Best Practices

### 5.1 Repository Analysis Workflows
```python
# Pattern 1: Full repository analysis
def full_repo_analysis(repo_url: str):
    summary, tree, content = ingest(repo_url)
    return {
        'metadata': extract_metadata(summary),
        'structure': analyze_structure(tree),
        'code_analysis': analyze_all_files(content),
        'insights': generate_insights(summary, tree, content)
    }

# Pattern 2: Selective file processing
def selective_analysis(repo_url: str, file_patterns: list):
    summary, tree, content = ingest(
        repo_url,
        include_patterns=file_patterns
    )
    return focused_analysis(content)

# Pattern 3: Streaming for large repos
def stream_analysis(repo_url: str):
    # First pass: get structure and metadata only
    summary, tree, _ = ingest(
        repo_url,
        include_patterns=["*.md", "*.txt"],
        max_file_size=10240  # 10KB limit for docs
    )

    # Then process code files selectively by language
    for pattern in ["*.py", "*.js", "*.go", "*.rs"]:
        _, _, content = ingest(
            repo_url,
            include_patterns=[pattern],
            max_file_size=51200  # 50KB limit for code
        )
        yield process_language_specific(content, pattern)
```

### 5.2 Error Handling for AI Agents
```python
from gitingest import ingest
from gitingest.utils.exceptions import GitIngestError
import time

def robust_ingest(repo_url: str, retries: int = 3):
    for attempt in range(retries):
        try:
            return ingest(repo_url)
        except GitIngestError as e:
            if attempt == retries - 1:
                return None, None, f"Failed to ingest: {e}"
            time.sleep(2 ** attempt)  # Exponential backoff
```

### 5.3 Private Repository Access
```python
import os
from gitingest import ingest

# Method 1: Environment variable
def ingest_private_repo(repo_url: str):
    token = os.getenv('GITHUB_TOKEN')
    if not token:
        raise ValueError("GITHUB_TOKEN environment variable required")
    return ingest(repo_url, token=token)

# Method 2: Secure token management
def ingest_with_token_rotation(repo_url: str, token_manager):
    token = token_manager.get_active_token()
    try:
        return ingest(repo_url, token=token)
    except AuthenticationError:
        token = token_manager.rotate_token()
        return ingest(repo_url, token=token)
```

---
## 6. Integration Scenarios for AI Agents

| Use Case | Recommended Method | Example Implementation |
|----------|-------------------|----------------------|
| **Code Review Bot** | Python async | `await ingest_async(pr_repo)` → analyze changes |
| **Documentation Generator** | CLI with filtering | `gitingest repo -i "*.py" -i "*.md" -o -` |
| **Vulnerability Scanner** | Python with error handling | Batch process multiple repos |
| **Code Search Engine** | CLI → Vector DB | `gitingest repo -o - \| embed \| store` |
| **AI Coding Assistant** | Python integration | Load repo context into conversation |
| **CI/CD Analysis** | CLI integration | `gitingest repo -o - \| analyze_pipeline` |
| **Repository Summarization** | Python with streaming | Process large repos in chunks |
| **Dependency Analysis** | CLI exclude patterns | `gitingest repo -e "node_modules/*" -e "*.lock" -o -` |
| **Security Audit** | CLI with size limits | `gitingest repo -i "*.py" -i "*.js" -s 204800 -o -` |

---
## 7. Support & Resources for AI Developers
* **Web UI official instance**: https://gitingest.com
* **GitHub Repository**: https://github.com/coderamp-labs/gitingest
* **Python Package**: https://pypi.org/project/gitingest/
* **Community Support**: https://discord.gg/zerRaGK9EC

_GitIngest – Purpose-built for AI agents to understand entire codebases programmatically._


================================================
File: mcp_config.json
================================================
{
  "mcpServers": {
    "gitrules-search": {
      "command": "python",
      "args": ["-m", "mcp.client.sse", "http://localhost:8000/mcp"],
      "env": {}
    }
  }
}


================================================
File: requirements.txt
================================================
fastapi==0.115.0
uvicorn[standard]==0.32.0
jinja2==3.1.4
python-multipart==0.0.12
pydantic==2.9.2
api-analytics
python-dotenv
pyyaml==6.0.1
fastapi-mcp==0.4.0
fuzzywuzzy
python-Levenshtein
gitingest
httpx


================================================
File: test_state_management.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>State Management Test</title>
    <style>
        body {
            font-family: monospace;
            padding: 20px;
            background: #f5f5f5;
        }
        .test-section {
            background: white;
            padding: 15px;
            margin: 10px 0;
            border: 2px solid black;
            box-shadow: 2px 2px 0 black;
        }
        .test-result {
            padding: 5px;
            margin: 5px 0;
        }
        .pass {
            color: green;
            font-weight: bold;
        }
        .fail {
            color: red;
            font-weight: bold;
        }
        button {
            padding: 10px 20px;
            background: #22D3EE;
            border: 2px solid black;
            font-weight: bold;
            cursor: pointer;
            margin: 5px;
        }
        button:hover {
            background: #F472B6;
        }
        pre {
            background: #f0f0f0;
            padding: 10px;
            overflow: auto;
        }
    </style>
</head>
<body>
    <h1>🧪 State Management Test Suite</h1>
    
    <div class="test-section">
        <h2>Test Controls</h2>
        <button onclick="runAllTests()">Run All Tests</button>
        <button onclick="clearState()">Clear State</button>
        <button onclick="inspectState()">Inspect Current State</button>
    </div>
    
    <div class="test-section">
        <h2>Test Results</h2>
        <div id="test-results"></div>
    </div>
    
    <div class="test-section">
        <h2>State Inspector</h2>
        <pre id="state-inspector">Click "Inspect Current State" to view</pre>
    </div>

    <script src="/static/js/workspace_manager.js"></script>
    <script>
        // Initialize workspace manager
        const workspaceManager = new WorkspaceManager();
        workspaceManager.init();
        
        // Test utilities
        function log(message, isPass = true) {
            const resultsDiv = document.getElementById('test-results');
            const div = document.createElement('div');
            div.className = 'test-result';
            div.innerHTML = `<span class="${isPass ? 'pass' : 'fail'}">${isPass ? '✓' : '✗'}</span> ${message}`;
            resultsDiv.appendChild(div);
        }
        
        function clearResults() {
            document.getElementById('test-results').innerHTML = '';
        }
        
        // Test functions
        async function testStateInitialization() {
            const state = workspaceManager.getState();
            
            if (!state) {
                log('State initialization failed', false);
                return false;
            }
            
            log('State initialized successfully');
            
            // Check for required properties
            const requiredProps = ['files', 'selectedFile', 'expandedFolders', 'actionStates', 'agentMappings'];
            for (const prop of requiredProps) {
                if (!(prop in state)) {
                    log(`Missing property: ${prop}`, false);
                    return false;
                }
            }
            log('All required properties present');
            
            // Check action states structure
            const categories = ['mcps', 'agents', 'rules'];
            for (const cat of categories) {
                if (!state.actionStates[cat]) {
                    log(`Missing action category: ${cat}`, false);
                    return false;
                }
                if (!('active' in state.actionStates[cat])) {
                    log(`Missing 'active' property in ${cat}`, false);
                    return false;
                }
                if (!('expanded' in state.actionStates[cat])) {
                    log(`Missing 'expanded' property in ${cat}`, false);
                    return false;
                }
                if (!('items' in state.actionStates[cat])) {
                    log(`Missing 'items' property in ${cat}`, false);
                    return false;
                }
            }
            log('Action states structure valid');
            
            return true;
        }
        
        async function testActionToggling() {
            const state = workspaceManager.getState();
            
            // Test category toggling
            const initialActive = state.isActionCategoryActive('mcps');
            state.toggleActionCategory('mcps');
            const afterToggle = state.isActionCategoryActive('mcps');
            
            if (initialActive === afterToggle) {
                log('Category toggle failed', false);
                return false;
            }
            log('Category toggle working');
            
            // Test item toggling
            state.setActionItemState('agents', 'test-agent', false);
            const initialItemState = state.isActionItemChecked('agents', 'test-agent');
            state.toggleActionItem('agents', 'test-agent');
            const afterItemToggle = state.isActionItemChecked('agents', 'test-agent');
            
            if (initialItemState === afterItemToggle) {
                log('Item toggle failed', false);
                return false;
            }
            log('Item toggle working');
            
            return true;
        }
        
        async function testStatePersistence() {
            const state = workspaceManager.getState();
            
            // Set some test data
            state.setActionCategoryState('mcps', true, true);
            state.setActionItemState('mcps', 'test-mcp', true);
            state.setActionItemState('agents', 'test-agent', true);
            state.agentMappings['test-agent'] = '.claude/agents/test-agent.md';
            
            // Save state
            workspaceManager.saveState(workspaceManager.currentContextId);
            
            // Create new state and load from storage
            const savedData = localStorage.getItem(`app:workspace:${workspaceManager.currentContextId}`);
            if (!savedData) {
                log('State not saved to localStorage', false);
                return false;
            }
            log('State saved to localStorage');
            
            // Parse and verify
            const parsed = JSON.parse(savedData);
            if (!parsed.actionStates || !parsed.actionStates.mcps.active) {
                log('Action states not persisted correctly', false);
                return false;
            }
            if (!parsed.actionStates.mcps.items['test-mcp']) {
                log('Action items not persisted correctly', false);
                return false;
            }
            if (!parsed.agentMappings || !parsed.agentMappings['test-agent']) {
                log('Agent mappings not persisted correctly', false);
                return false;
            }
            log('State persistence working correctly');
            
            return true;
        }
        
        async function testStateRestoration() {
            // Set test data
            const testData = {
                contextId: workspaceManager.currentContextId,
                files: {
                    'test.md': '# Test File',
                    '.mcp.json': '{"mcpServers":{}}'
                },
                selectedFile: 'test.md',
                expandedFolders: [],
                actionStates: {
                    mcps: { active: true, expanded: true, items: { 'filesystem': true } },
                    agents: { active: false, expanded: false, items: { 'researcher': true } },
                    rules: { active: true, expanded: false, items: { 'no-comments': true } }
                },
                agentMappings: {
                    'researcher': '.claude/agents/researcher.md'
                }
            };
            
            // Save test data
            localStorage.setItem(`app:workspace:test-restore`, JSON.stringify(testData));
            
            // Load state
            const restoredState = WorkspaceState.deserialize('test-restore', localStorage.getItem('app:workspace:test-restore'));
            
            if (!restoredState) {
                log('State restoration failed', false);
                return false;
            }
            log('State restored from localStorage');
            
            // Verify restoration
            if (!restoredState.isActionCategoryActive('mcps')) {
                log('MCP active state not restored', false);
                return false;
            }
            if (!restoredState.isActionItemChecked('mcps', 'filesystem')) {
                log('MCP item state not restored', false);
                return false;
            }
            if (!restoredState.isActionItemChecked('agents', 'researcher')) {
                log('Agent item state not restored', false);
                return false;
            }
            if (!restoredState.agentMappings['researcher']) {
                log('Agent mappings not restored', false);
                return false;
            }
            log('All state properties restored correctly');
            
            // Clean up
            localStorage.removeItem('app:workspace:test-restore');
            
            return true;
        }
        
        // Run all tests
        async function runAllTests() {
            clearResults();
            log('Starting test suite...', true);
            
            let allPassed = true;
            
            // Run tests
            allPassed = await testStateInitialization() && allPassed;
            allPassed = await testActionToggling() && allPassed;
            allPassed = await testStatePersistence() && allPassed;
            allPassed = await testStateRestoration() && allPassed;
            
            if (allPassed) {
                log('✨ All tests passed!', true);
            } else {
                log('❌ Some tests failed', false);
            }
        }
        
        // Clear state
        function clearState() {
            if (confirm('This will clear all state data. Continue?')) {
                workspaceManager.reset();
                log('State cleared', true);
                inspectState();
            }
        }
        
        // Inspect current state
        function inspectState() {
            const state = workspaceManager.getState();
            const display = {
                contextId: state.contextId,
                filesCount: Object.keys(state.files).length,
                files: Object.keys(state.files),
                selectedFile: state.selectedFile,
                actionStates: state.actionStates,
                agentMappings: state.agentMappings,
                expandedFolders: Array.from(state.expandedFolders)
            };
            
            document.getElementById('state-inspector').textContent = JSON.stringify(display, null, 2);
        }
        
        // Auto-run tests on load
        window.addEventListener('DOMContentLoaded', () => {
            setTimeout(runAllTests, 500);
        });
    </script>
</body>
</html>


================================================
File: .dockerignore
================================================
__pycache__
*.pyc
*.pyo
*.pyd
.Python
env/
venv/
.venv
pip-log.txt
pip-delete-this-directory.txt
.tox/
.coverage
.coverage.*
.cache
nosetests.xml
coverage.xml
*.cover
*.log
.git
.gitignore
.mypy_cache
.pytest_cache
.hypothesis
.env
*.env
.DS_Store
*.swp
*.swo
*~
.idea
.vscode
*.iml
out
gen


================================================
File: .mcp.json
================================================
{
  "mcpServers": {
    "Playwright": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "@playwright/mcp@latest"
      ]
    }
  }
}



================================================
File: app/main.py
================================================
from fastapi import FastAPI, Request
from fastapi.responses import HTMLResponse, FileResponse
from fastapi.staticfiles import StaticFiles
from fastapi.templating import Jinja2Templates
from pathlib import Path
from app.routes import install, actions, smart_ingest_route
from app.services.actions_loader import actions_loader
from api_analytics.fastapi import Analytics
from fastapi_mcp import FastApiMCP
import os
from dotenv import load_dotenv

# Load environment variables
load_dotenv()

app = FastAPI(title="Gitrules", version="0.1.0")

# Add API Analytics middleware
api_key = os.getenv("API_ANALYTICS_KEY")
if api_key:
    app.add_middleware(Analytics, api_key=api_key)

templates = Jinja2Templates(directory="app/templates")

static_dir = Path(__file__).parent / "static"
app.mount("/static", StaticFiles(directory=static_dir), name="static")

# Include routers
app.include_router(install.router)
app.include_router(actions.router)
app.include_router(smart_ingest_route.router)

@app.get("/favicon.ico", operation_id="get_favicon")
async def favicon():
    favicon_path = static_dir / "favicon.ico"
    return FileResponse(favicon_path, media_type="image/x-icon")

@app.get("/doc", response_class=HTMLResponse, operation_id="get_docs_page")
async def doc(request: Request):
    return templates.TemplateResponse("docs.html", {"request": request})

@app.get("/", response_class=HTMLResponse, operation_id="get_index_page")
async def index(request: Request):
    # Get all actions data for server-side rendering
    agents = [agent.dict() for agent in actions_loader.get_agents()]
    all_rules = actions_loader.get_rules()
    
    # Create a set of all child rule IDs
    child_rule_ids = set()
    for rule in all_rules:
        if rule.children:
            child_rule_ids.update(rule.children)
    
    # Create a mapping of all rules by slug for lookups
    rules_by_slug = {rule.slug: rule for rule in all_rules}
    
    # Update rulesets to inherit children's tags
    for rule in all_rules:
        if rule.type == 'ruleset' and rule.children:
            # Collect all tags from children
            inherited_tags = set(rule.tags or [])
            for child_slug in rule.children:
                child_rule = rules_by_slug.get(child_slug)
                if child_rule and child_rule.tags:
                    inherited_tags.update(child_rule.tags)
            rule.tags = list(inherited_tags)
    
    # Filter to only top-level rules (not children of any ruleset)
    top_level_rules_data = [rule for rule in all_rules if rule.slug not in child_rule_ids]
    
    # Sort rules: rulesets first, then standalone rules
    top_level_rules_data.sort(key=lambda rule: (rule.type != 'ruleset', rule.display_name or rule.name))
    
    # Convert to dict
    top_level_rules = [rule.dict() for rule in top_level_rules_data]
    
    # Create a mapping of all rules by slug for frontend to look up children (with updated tags)
    rules_by_slug_dict = {rule.slug: rule.dict() for rule in all_rules}
    
    mcps = [mcp.dict() for mcp in actions_loader.get_mcps()]
    
    return templates.TemplateResponse(
        "index.html",
        {
            "request": request,
            "agents": agents,
            "rules": top_level_rules,
            "rules_by_slug": rules_by_slug_dict,
            "mcps": mcps
        }
    )

@app.get("/health", operation_id="health_check")
async def health_check():
    return {"status": "healthy"}

# Create MCP server that only exposes endpoints tagged with "mcp"
mcp = FastApiMCP(
    app,
    name="gitrules-search",
    include_tags=["mcp"]
)

# Mount the MCP server with HTTP/SSE transport
mcp.mount_http(mount_path="/mcp")



================================================
File: app/actions/agents.yaml
================================================
agents:
- display_name: Researcher
  slug: researcher
  content: |
    ---
    name: researcher
    description: Use this agent for comprehensive codebase analysis, forensic examination, and detailed code mapping with optional Chain of Draft (CoD) methodology. Excels at locating specific functions, classes, and logic, security vulnerability analysis, pattern detection, architectural consistency verification, and creating navigable code reference documentation with exact line numbers.
    model: sonnet
    color: purple
    ---

    You are an elite code search and analysis specialist with deep expertise in navigating complex codebases efficiently. You support both standard detailed analysis and Chain of Draft (CoD) ultra-concise mode when explicitly requested. Your mission is to help users locate, understand, and summarize code with surgical precision and minimal overhead.


- display_name: memory
  slug: memory
  content: |
    ---
    name: memory
    description: Use this agent proactively to synchronize memory bank documentation with actual codebase state, ensuring architectural patterns in memory files match implementation reality, updating technical decisions to reflect current code, aligning documentation with actual patterns, maintaining consistency between memory bank system and source code, and keeping all CLAUDE-*.md files accurately reflecting the current system state.
    color: cyan
    ---

    You are a Memory Bank Synchronization Specialist focused on maintaining consistency between CLAUDE.md and CLAUDE-*.md documentation files and actual codebase implementation. Your expertise centers on ensuring memory bank files accurately reflect current system state, patterns, and architectural decisions.

    Your primary responsibilities:

    1. **Pattern Documentation Synchronization**: Compare documented patterns with actual code, identify pattern evolution and changes, update pattern descriptions to match reality, document new patterns discovered, and remove obsolete pattern documentation.

    2. **Architecture Decision Updates**: Verify architectural decisions still valid, update decision records with outcomes, document decision changes and rationale, add new architectural decisions made, and maintain decision history accuracy.

    3. **Technical Specification Alignment**: Ensure specs match implementation, update API documentation accuracy, synchronize type definitions documented, align configuration documentation, and verify example code correctness.

    4. **Implementation Status Tracking**: Update completion percentages, mark completed features accurately, document new work done, adjust timeline projections, and maintain accurate progress records.

    5. **Code Example Freshness**: Verify code snippets still valid, update examples to current patterns, fix deprecated code samples, add new illustrative examples, and ensure examples actually compile.

    6. **Cross-Reference Validation**: Check inter-document references, verify file path accuracy, update moved/renamed references, maintain link consistency, and ensure navigation works.

    Your synchronization methodology:

    - **Systematic Comparison**: Check each claim against code
    - **Version Control Analysis**: Review recent changes
    - **Pattern Detection**: Identify undocumented patterns
    - **Accuracy Priority**: Correct over complete
    - **Practical Focus**: Keep actionable and relevant

    When synchronizing:

    1. **Audit current state** - Review all memory bank files
    2. **Compare with code** - Verify against implementation
    3. **Identify gaps** - Find undocumented changes
    4. **Update systematically** - Correct file by file
    5. **Validate accuracy** - Ensure updates are correct

    Provide synchronization results with:

    - Files updated
    - Patterns synchronized
    - Decisions documented
    - Examples refreshed
    - Accuracy improvements

    Your goal is to ensure the memory bank system remains an accurate, trustworthy source of project knowledge that reflects actual implementation reality. Focus on maintaining documentation that accelerates development by providing correct, current information. Ensure memory bank files remain valuable navigation aids for the codebase.


================================================
File: app/actions/mcps.yaml
================================================
mcps:
- display_name: Github
  slug: GitHub
  config:
    type: http
    url: https://api.githubcopilot.com/mcp
    headers:
      Authorization: Bearer ${GITHUB_TOKEN}
- display_name: Firecrawl
  slug: Firecrawl
  config:
    type: sse
    url: https://mcp.firecrawl.dev/${FIRECRAWL_API_KEY}/sse
- display_name: Playwright
  slug: Playwright
  config:
    type: stdio
    command: npx
    args:
    - '@playwright/mcp@latest'
- display_name: Supabase
  slug: Supabase
  config:
    command: npx
    args:
    - -y
    - '@supabase/mcp-server-supabase@latest'
    - --access-token
    - ${SUPABASE_ACCESS_TOKEN}
- display_name: Context7
  slug: Context7
  config:
    type: http
    url: https://mcp.context7.com/mcp/
    headers:
      "CONTEXT7_API_KEY": "${CONTEXT7_API_KEY}"
- display_name: Exa Search
  slug: ExaSearch
  config:
    type: http
    url: https://mcp.exa.ai/mcp?exa_api_key=${EXA_API_KEY}
- display_name: GitRules
  slug: GitRules
  config:
    type: http
    url: https://gitrules.com/mcp



================================================
File: app/actions/rules.yaml
================================================
you-are-a-pirate:
  display_name: You Are A Pirate
  type: rule
  author: Captain Hook
  tags: ["fun", "roleplay", "pirate"]
  namespace: "personality"
  content: |
    ## Yarr!
    
    - You are a pirate!
    - You will usually try to help the user but only if you can get something out of it. Otherwise, try to trick him.
    - Use pirate slang!
    - The only code you know about is the pirate code.
    - As far as you're concerned, Python is a snake. You don't like snakes!
    - Yarr!

code-quality:
  display_name: Code Quality
  type: ruleset
  author: Engineering Team
  tags: ["engineering", "best-practices", "code-style"]
  namespace: "development"
  children:
    - "minimal-code"
    - "remove-dead-code"
    - "prioritize-functionality"
    - "clean-comments"

minimal-code:
  display_name: Keep Code Minimal
  type: rule
  author: Engineering Team
  tags: ["simplicity", "code-style"]
  namespace: "development"
  content: |
    - Always keep code SUPER minimal
    - Never introduce features not explicitly mentioned

remove-dead-code:
  display_name: Remove Dead Code
  type: rule
  author: Engineering Team
  tags: ["maintenance", "code-style"]
  namespace: "development"
  content: |
    - Remove dead code immediately rather than maintaining it
    - No backward compatibility or legacy functions

prioritize-functionality:
  display_name: Prioritize Functionality
  type: rule
  author: Engineering Team
  tags: ["architecture", "code-style"]
  namespace: "development"
  content: |
    - Prioritize functionality over production-ready patterns
    - Focus on user experience and feature completeness

clean-comments:
  display_name: Clean Comments
  type: rule
  author: Engineering Team
  tags: ["documentation", "code-style"]
  namespace: "development"
  content: |
    - When updating code, don't reference what is changing
    - Avoid keywords like LEGACY, CHANGED, REMOVED
    - Focus on comments that document just the functionality of the code

env-secrets:
  display_name: Environment Variables
  type: rule
  author: Security Team
  tags: ["security", "configuration", "environment"]
  namespace: "security"
  content: |
    ## Environment Variables
    - Store secrets in a .env file (never commit it)
    - A .env.example file should be provided for reference and any new secrets should be added to it
    - The implementation should use the dotenv (or similar) library to load environment variables from .env files
    - Variables should also be loaded from the environment

error-handling:
  display_name: Error Handling
  type: ruleset
  author: Engineering Team
  tags: ["errors", "exceptions", "reliability"]
  namespace: "development"
  children:
    - "fail-fast-principle"
    - "when-to-fail-fast"
    - "when-to-log-continue"

fail-fast-principle:
  display_name: Fail Fast Principle
  type: rule
  author: Engineering Team
  tags: ["architecture", "errors"]
  namespace: "development"
  content: |
    **Core Principle**: We need to intelligently decide when to fail hard and fast to quickly address issues, and when to allow processes to complete in critical services despite failures. Read below carefully and make intelligent decisions on a case-by-case basis.

when-to-fail-fast:
  display_name: When to Fail Fast and Loud
  type: rule
  author: Engineering Team
  tags: ["exceptions", "errors"]
  namespace: "development"
  content: |
    #### When to Fail Fast and Loud (Let it Crash!)
    
    These errors should stop execution and bubble up immediately:
    
    - **Service startup failures** - If credentials, database, or any service can't initialize, the system should crash with a clear error
    - **Missing configuration** - Missing environment variables or invalid settings should stop the system
    - **Service connection failures** - Don't hide connection issues, expose them
    - **Authentication/authorization failures** - Security errors must be visible and halt the operation
    - **Data corruption or validation errors** - Never silently accept bad data, Pydantic should raise
    - **Critical dependencies unavailable** - If a required service is down, fail immediately
    - **Invalid data that would corrupt state** - Never store malformed JSON or other invalid data

when-to-log-continue:
  display_name: When to Complete but Log
  type: rule
  author: Engineering Team
  tags: ["logging", "errors"]
  namespace: "development"
  content: |
    #### When to Complete but Log Detailed Errors
    
    These operations should continue but track and report failures clearly:
    
    - **WebSocket events** - Don't crash on a single event failure, log it and continue serving other clients

update-docs:
  display_name: Update Documentation
  type: rule
  author: Documentation Team
  tags: ["documentation", "maintenance"]
  namespace: "documentation"
  content: |
    - Update any documentation when it's relevant, including CLAUDE.md

use-uv:
  display_name: Use UV Package Manager
  type: rule
  author: DevOps Team
  tags: ["tooling", "dependencies", "uv"]
  namespace: "development"
  content: |
    ## UV
    
    - This project uses UV for package management
    - Use:
      - `uv venv` to create a virtual environment
      - `uv pip install -r requirements.txt|pyproject.toml` to install dependencies


================================================
File: app/models/actions.py
================================================
from pydantic import BaseModel
from typing import Dict, List, Any, Optional

class Agent(BaseModel):
    name: str  # For backward compatibility
    filename: str
    display_name: Optional[str] = None
    slug: Optional[str] = None
    content: Optional[str] = None

class Rule(BaseModel):
    name: str  # For backward compatibility
    filename: str
    display_name: Optional[str] = None
    slug: Optional[str] = None
    content: Optional[str] = None
    author: Optional[str] = None
    tags: Optional[List[str]] = None
    children: Optional[List[str]] = None  # List of rule IDs
    type: str = "rule"  # "rule" or "ruleset"
    namespace: Optional[str] = None

class MCP(BaseModel):
    name: str
    config: Dict[str, Any]  # JSON configuration from mcps.json

class ActionsResponse(BaseModel):
    agents: List[Agent]
    rules: List[Rule]
    mcps: List[MCP]



================================================
File: app/routes/__init__.py
================================================



================================================
File: app/routes/actions.py
================================================
from fastapi import APIRouter, HTTPException, Body, Query
from app.models.actions import ActionsResponse, Agent, Rule, MCP
from app.services.actions_loader import actions_loader
from app.services.mcp_installer import get_agent_content, get_rule_content, create_mcp_config
from app.services.search_service import search_service
from typing import List, Dict, Any, Optional
import json

router = APIRouter(prefix="/api", tags=["actions"])

@router.get("/actions", response_model=ActionsResponse, operation_id="get_all_actions_endpoint")
async def get_all_actions():
    """Get all available actions (agents, rules, MCPs)"""
    return ActionsResponse(
        agents=actions_loader.get_agents(),
        rules=actions_loader.get_rules(),
        mcps=actions_loader.get_mcps()
    )

@router.get("/agents", operation_id="get_agents_endpoint")
async def get_agents():
    """Get all available agents with tags only"""
    agents = actions_loader.get_agents()
    return [
        {
            "name": agent.name,
            "display_name": agent.display_name,
            "slug": agent.slug,
            "tags": agent.tags,
            "filename": agent.filename
        }
        for agent in agents
    ]

@router.get("/rules", operation_id="get_rules_endpoint")
async def get_rules():
    """Get all available rules with tags only"""
    rules = actions_loader.get_rules()
    return [
        {
            "name": rule.name,
            "display_name": rule.display_name,
            "slug": rule.slug,
            "tags": rule.tags,
            "filename": rule.filename
        }
        for rule in rules
    ]

@router.get("/mcps", operation_id="get_mcps_endpoint")
async def get_mcps():
    """Get all available MCPs with tags only"""
    mcps = actions_loader.get_mcps()
    return [
        {
            "name": mcp.name,
            "tags": mcp.tags if hasattr(mcp, 'tags') else []
        }
        for mcp in mcps
    ]




@router.get("/merged-block", operation_id="get_merged_actions_block_endpoint")
async def get_merged_actions_block():
    """Get all actions merged into a single block with metadata for frontend"""
    agents = actions_loader.get_agents()
    rules = actions_loader.get_rules()
    mcps = actions_loader.get_mcps()
    
    # Build merged block with all actions and their metadata
    merged = {
        "agents": [
            {
                "display_name": agent.display_name or agent.name,
                "slug": agent.slug or agent.filename.replace('.yaml', '').replace('.md', ''),
                "content": agent.content or get_agent_content(agent.filename),
                "filename": agent.filename
            }
            for agent in agents
        ],
        "rules": [
            {
                "display_name": rule.display_name or rule.name,
                "slug": rule.slug or rule.filename.replace('.yaml', '').replace('.md', ''),
                "content": rule.content or get_rule_content(rule.filename),
                "filename": rule.filename
            }
            for rule in rules
        ],
        "mcps": [
            {
                "name": mcp.name,
                "config": mcp.config
            }
            for mcp in mcps
        ]
    }
    
    return merged

@router.get("/search/agents", tags=["mcp"], operation_id="search_agents_endpoint")
async def search_agents(
    query: str = Query(..., description="Search query"),
    limit: int = Query(10, ge=1, le=100, description="Maximum number of results")
):
    """Search for agents by name, display_name, or content"""
    results = search_service.search_agents(query, limit)
    return {"results": results}

@router.get("/search/rules", tags=["mcp"], operation_id="search_rules_endpoint")
async def search_rules(
    query: str = Query(..., description="Search query"),
    limit: int = Query(10, ge=1, le=100, description="Maximum number of results")
):
    """Search for rules by name, display_name, content, tags, or author"""
    results = search_service.search_rules(query, limit)
    return {"results": results}

@router.get("/search/mcps", tags=["mcp"], operation_id="search_mcps_endpoint")
async def search_mcps(
    query: str = Query(..., description="Search query"),
    limit: int = Query(10, ge=1, le=100, description="Maximum number of results")
):
    """Search for MCPs by name or config content"""
    results = search_service.search_mcps(query, limit)
    return {"results": results}

@router.get("/search", tags=["mcp"], operation_id="search_all_endpoint")
async def search_all(
    query: str = Query(..., description="Search query"),
    limit: int = Query(10, ge=1, le=100, description="Maximum number of results per category")
):
    """Search across all types (agents, rules, MCPs)"""
    return search_service.search_all(query, limit)

@router.get("/rules/{rule_ids}", tags=["mcp"], operation_id="get_multiple_rules_content")
async def get_multiple_rules_content(rule_ids: str):
    """Get content for multiple rules by comma-separated IDs/slugs"""
    ids = [id.strip() for id in rule_ids.split(',') if id.strip()]
    
    if not ids:
        raise HTTPException(status_code=400, detail="No rule IDs provided")
    
    rules = actions_loader.get_rules()
    results = []
    
    for rule_id in ids:
        # Match by slug first, fallback to name for backward compat
        rule = next((r for r in rules if (r.slug == rule_id or r.name == rule_id)), None)
        
        if rule:
            results.append({
                "id": rule_id,
                "slug": rule.slug,
                "name": rule.name,
                "display_name": rule.display_name,
                "content": rule.content,
                "filename": rule.filename
            })
        else:
            results.append({
                "id": rule_id,
                "error": f"Rule not found: {rule_id}"
            })
    
    return {"rules": results}

@router.get("/agents/{agent_ids}", tags=["mcp"], operation_id="get_multiple_agents_content")
async def get_multiple_agents_content(agent_ids: str):
    """Get content for multiple agents by comma-separated IDs/slugs"""
    ids = [id.strip() for id in agent_ids.split(',') if id.strip()]
    
    if not ids:
        raise HTTPException(status_code=400, detail="No agent IDs provided")
    
    agents = actions_loader.get_agents()
    results = []
    
    for agent_id in ids:
        # Match by slug first, fallback to name for backward compat
        agent = next((a for a in agents if (a.slug == agent_id or a.name == agent_id)), None)
        
        if agent:
            results.append({
                "id": agent_id,
                "slug": agent.slug,
                "name": agent.name,
                "display_name": agent.display_name,
                "content": agent.content,
                "filename": agent.filename
            })
        else:
            results.append({
                "id": agent_id,
                "error": f"Agent not found: {agent_id}"
            })
    
    return {"agents": results}

@router.get("/mcps/{mcp_ids}", tags=["mcp"], operation_id="get_multiple_mcps_config")
async def get_multiple_mcps_config(mcp_ids: str):
    """Get config for multiple MCPs by comma-separated names"""
    ids = [id.strip() for id in mcp_ids.split(',') if id.strip()]
    
    if not ids:
        raise HTTPException(status_code=400, detail="No MCP IDs provided")
    
    mcps = actions_loader.get_mcps()
    results = []
    
    for mcp_id in ids:
        # Match by name
        mcp = next((m for m in mcps if m.name == mcp_id), None)
        
        if mcp:
            results.append({
                "id": mcp_id,
                "name": mcp.name,
                "config": mcp.config
            })
        else:
            results.append({
                "id": mcp_id,
                "error": f"MCP not found: {mcp_id}"
            })
    
    return {"mcps": results}


================================================
File: app/routes/install.py
================================================
from fastapi import APIRouter, HTTPException, Request
from fastapi.responses import PlainTextResponse
from fastapi.templating import Jinja2Templates
from pydantic import BaseModel
import hashlib
import re
from typing import Dict, Set
from datetime import datetime

router = APIRouter()
templates = Jinja2Templates(directory="app/templates")

# In-memory storage for installs
installs_store: Dict[str, str] = {}

class InstallCreate(BaseModel):
    files: Dict[str, str]

def extract_env_vars_from_files(files: Dict[str, str]) -> Set[str]:
    """Extract environment variables from file contents"""
    env_vars = set()
    for content in files.values():
        # Find ${VAR_NAME} patterns
        matches = re.findall(r'\$\{([^}]+)\}', content)
        env_vars.update(matches)
    return env_vars

@router.post("/api/install", operation_id="create_install_script")
async def create_install(request: Request, install: InstallCreate):
    """Generate install script from files and store by hash"""
    # Extract unique directories
    directories = set()
    for path in install.files.keys():
        parts = path.split('/')
        if len(parts) > 1:
            for i in range(1, len(parts)):
                directories.add('/'.join(parts[:i]))
    
    # Extract environment variables from all files
    env_vars = extract_env_vars_from_files(install.files)
    
    # Generate script using Jinja2 template
    script_content = templates.get_template("install.sh.j2").render(
        timestamp=datetime.now().isoformat(),
        files=install.files,
        directories=sorted(directories),
        env_vars=sorted(env_vars) if env_vars else None
    )
    
    # Hash the script content
    content_hash = hashlib.sha256(script_content.encode()).hexdigest()[:12]
    installs_store[content_hash] = script_content
    
    return {"hash": content_hash}

@router.get("/api/install/{hash_id}.sh", response_class=PlainTextResponse, operation_id="get_install_script")
async def get_install(hash_id: str):
    """Retrieve install by hash"""
    if hash_id not in installs_store:
        raise HTTPException(status_code=404, detail="Install not found")
    return installs_store[hash_id]


================================================
File: app/routes/smart_ingest_route.py
================================================
"""
Simple route for smart ingest functionality.
"""

from fastapi import APIRouter, HTTPException
from pydantic import BaseModel
from typing import Optional
from app.services.smart_ingest import use_gitingest, smart_ingest

router = APIRouter(prefix="/api", tags=["smart_ingest"])


class IngestRequest(BaseModel):
    repo_url: str


class IngestResponse(BaseModel):
    success: bool
    context_size: int
    message: str


class AnalyzeRequest(BaseModel):
    context: str
    user_prompt: Optional[str] = "Analyze this repository and provide a comprehensive overview"


class AnalyzeResponse(BaseModel):
    success: bool
    analysis: str


@router.post("/ingest", response_model=IngestResponse)
async def ingest_repository(request: IngestRequest):
    """
    Ingest a repository and return the context.
    """
    try:
        context = await use_gitingest(request.repo_url)
        return IngestResponse(
            success=True,
            context_size=len(context),
            message=context
        )
    except Exception as e:
        raise HTTPException(status_code=500, detail=str(e))


@router.post("/analyze", response_model=AnalyzeResponse)
async def analyze_context(request: AnalyzeRequest):
    """
    Analyze the provided context using OpenAI.
    """
    try:
        result = smart_ingest(request.context, request.user_prompt)
        return AnalyzeResponse(
            success=True,
            analysis=result.get("response", "")
        )
    except Exception as e:
        raise HTTPException(status_code=500, detail=str(e))


# Keep the combined endpoint for backward compatibility
class SmartIngestRequest(BaseModel):
    repo_url: str
    user_prompt: Optional[str] = "Analyze this repository and provide a comprehensive overview"


class SmartIngestResponse(BaseModel):
    success: bool
    analysis: str


@router.post("/smart_ingest", response_model=SmartIngestResponse)
async def analyze_repository(request: SmartIngestRequest):
    """
    Analyze a repository using smart ingest (combined endpoint).
    """
    try:
        # Step 1: Ingest the repository (async)
        context = await use_gitingest(request.repo_url)
        
        # Step 2: Send to OpenAI (still sync, but that's ok)
        result = smart_ingest(context, request.user_prompt)
        
        return SmartIngestResponse(
            success=True,
            analysis=result.get("response", "")
        )
    except Exception as e:
        raise HTTPException(status_code=500, detail=str(e))



================================================
File: app/services/actions_loader.py
================================================
import yaml
from typing import List, Dict, Any
from pathlib import Path
from app.models.actions import Agent, Rule, MCP

class ActionsLoader:
    def __init__(self):
        self.actions_dir = Path(__file__).parent.parent / "actions"
        self.agents: List[Agent] = []
        self.rules: List[Rule] = []
        self.mcps: List[MCP] = []
        self.load_all()
    
    def load_all(self):
        """Load all actions from consolidated YAML files"""
        self.load_agents()
        self.load_rules()
        self.load_mcps()
    
    def load_agents(self):
        """Load all agents from agents.yaml"""
        agents_file = self.actions_dir / "agents.yaml"
        if agents_file.exists():
            with open(agents_file, 'r') as f:
                data = yaml.safe_load(f)
                if data and 'agents' in data:
                    self.agents = [
                        Agent(
                            name=agent.get('slug', ''),  # Use slug as name for backward compat
                            filename=f"{agent.get('slug', '')}.yaml",  # Virtual filename
                            display_name=agent.get('display_name'),
                            slug=agent.get('slug'),
                            content=agent.get('content')
                        )
                        for agent in data['agents']
                    ]
        else:
            self.agents = []
    
    def _parse_rule(self, slug: str, rule_data: Dict[str, Any]) -> Rule:
        """Parse a single rule or ruleset from the YAML data"""
        rule = Rule(
            name=slug,  # Use slug as name for backward compat
            filename=f"{slug}.yaml",  # Virtual filename
            display_name=rule_data.get('display_name'),
            slug=slug,
            content=rule_data.get('content'),
            author=rule_data.get('author'),
            tags=rule_data.get('tags'),
            type=rule_data.get('type', 'rule'),
            namespace=rule_data.get('namespace'),
            children=rule_data.get('children')  # Now just a list of rule IDs
        )
        
        return rule
    
    def load_rules(self):
        """Load all rules from rules.yaml"""
        rules_file = self.actions_dir / "rules.yaml"
        if rules_file.exists():
            with open(rules_file, 'r') as f:
                data = yaml.safe_load(f)
                if data:
                    self.rules = []
                    # Now the top-level keys are the slugs
                    for slug, rule_data in data.items():
                        rule = self._parse_rule(slug, rule_data)
                        self.rules.append(rule)
        else:
            self.rules = []
    
    def load_mcps(self):
        """Load all MCPs from mcps.yaml"""
        mcps_file = self.actions_dir / "mcps.yaml"
        if mcps_file.exists():
            with open(mcps_file, 'r') as f:
                data = yaml.safe_load(f)
                if data and 'mcps' in data:
                    self.mcps = [
                        MCP(
                            name=mcp.get('slug', ''),
                            config=mcp.get('config', {})
                        )
                        for mcp in data['mcps']
                    ]
        else:
            self.mcps = []
    
    def get_all(self) -> Dict[str, Any]:
        """Get all loaded actions"""
        return {
            "agents": self.agents,
            "rules": self.rules,
            "mcps": self.mcps
        }
    
    def get_agents(self) -> List[Agent]:
        """Get all agents"""
        return self.agents
    
    def get_rules(self) -> List[Rule]:
        """Get all rules"""
        return self.rules
    
    def get_mcps(self) -> List[MCP]:
        """Get all MCPs"""
        return self.mcps
    
    def get_agent_by_slug(self, slug: str) -> Agent:
        """Get a specific agent by slug"""
        return next((a for a in self.agents if a.slug == slug), None)
    
    def get_rule_by_slug(self, slug: str) -> Rule:
        """Get a specific rule by slug"""
        return next((r for r in self.rules if r.slug == slug), None)

# Create singleton instance
actions_loader = ActionsLoader()


================================================
File: app/services/mcp_installer.py
================================================
import json
import re
from typing import Dict, Any, Set, Tuple
from app.services.actions_loader import actions_loader

def get_agent_content(agent_identifier: str) -> str:
    """Get agent content from consolidated agents.yaml"""
    # Try to find by slug first, then by name for backward compat
    agent = actions_loader.get_agent_by_slug(agent_identifier)
    if not agent:
        # Fallback to finding by name
        agent = next((a for a in actions_loader.get_agents() if a.name == agent_identifier), None)
    
    if agent and agent.content:
        return agent.content
    return ""

def get_rule_content(rule_identifier: str) -> str:
    """Get rule content from consolidated rules.yaml"""
    # Try to find by slug first, then by name for backward compat
    rule = actions_loader.get_rule_by_slug(rule_identifier)
    if not rule:
        # Fallback to finding by name
        rule = next((r for r in actions_loader.get_rules() if r.name == rule_identifier), None)
    
    if rule and rule.content:
        return rule.content
    return ""

def get_current_mcp_config() -> Dict[str, Any]:
    """Get current .mcp.json config from virtual workspace or create new"""
    # This would be called from frontend with workspace content
    # For now, return default structure
    return {"mcpServers": {}}

def create_mcp_config(existing_config: Dict[str, Any], mcp_name: str, mcp_config: Dict[str, Any]) -> Tuple[str, bool]:
    """Create updated .mcp.json content, returns (content, was_removed)"""
    if not isinstance(existing_config, dict) or "mcpServers" not in existing_config:
        config = {"mcpServers": {}}
    else:
        config = existing_config.copy()
    
    # Toggle behavior: if exists, remove it; if not, add it
    was_removed = False
    if mcp_name in config["mcpServers"]:
        del config["mcpServers"][mcp_name]
        was_removed = True
    else:
        config["mcpServers"][mcp_name] = mcp_config
    
    return json.dumps(config, indent=2), was_removed

def extract_env_vars_from_config(config: Dict[str, Any]) -> Set[str]:
    """Extract environment variable names from MCP config"""
    env_vars = set()
    
    def find_env_vars(obj):
        if isinstance(obj, str):
            matches = re.findall(r'\$\{([^}]+)\}', obj)
            env_vars.update(matches)
        elif isinstance(obj, dict):
            for value in obj.values():
                find_env_vars(value)
        elif isinstance(obj, list):
            for item in obj:
                find_env_vars(item)
    
    find_env_vars(config)
    return env_vars


================================================
File: app/services/search_service.py
================================================
from typing import List, Optional, Dict, Any
from fuzzywuzzy import fuzz
from app.models.actions import Agent, Rule, MCP
from app.services.actions_loader import actions_loader

class SearchService:
    def __init__(self):
        self.actions_loader = actions_loader
    
    def _calculate_relevance(self, query: str, text: str) -> int:
        """Calculate relevance score for fuzzy matching"""
        if not text:
            return 0
        query_lower = query.lower()
        text_lower = text.lower()
        
        # Exact match gets highest score
        if query_lower == text_lower:
            return 100
        
        # Substring match gets high score
        if query_lower in text_lower:
            return 90
        
        # Use fuzzy matching for partial matches
        return fuzz.partial_ratio(query_lower, text_lower)
    
    def search_agents(self, query: str, limit: int = 10) -> List[Dict[str, Any]]:
        """Search for agents by name, display_name, or content"""
        agents = self.actions_loader.get_agents()
        results = []
        
        for agent in agents:
            # Calculate relevance scores for different fields
            name_score = self._calculate_relevance(query, agent.name)
            display_score = self._calculate_relevance(query, agent.display_name or "")
            content_score = self._calculate_relevance(query, agent.content or "") * 0.5  # Lower weight for content
            
            max_score = max(name_score, display_score, content_score)
            
            if max_score > 30:  # Threshold for relevance
                agent_data = agent.dict()
                # Remove content from search results
                agent_data.pop("content", None)
                results.append({
                    "agent": agent_data,
                    "relevance": max_score
                })
        
        # Sort by relevance and limit results
        results.sort(key=lambda x: x["relevance"], reverse=True)
        return results[:limit]
    
    def search_rules(self, query: str, limit: int = 10) -> List[Dict[str, Any]]:
        """Search for rules by name, display_name, content, tags, or author"""
        rules = self.actions_loader.get_rules()
        results = []
        
        for rule in rules:
            # Calculate relevance scores for different fields
            name_score = self._calculate_relevance(query, rule.name)
            display_score = self._calculate_relevance(query, rule.display_name or "")
            content_score = self._calculate_relevance(query, rule.content or "") * 0.5
            author_score = self._calculate_relevance(query, rule.author or "") * 0.7
            
            # Check tags
            tag_score = 0
            if rule.tags:
                for tag in rule.tags:
                    tag_score = max(tag_score, self._calculate_relevance(query, tag))
            
            max_score = max(name_score, display_score, content_score, author_score, tag_score)
            
            if max_score > 30:  # Threshold for relevance
                rule_data = rule.dict()
                # Remove content from search results
                rule_data.pop("content", None)
                results.append({
                    "rule": rule_data,
                    "relevance": max_score
                })
        
        # Sort by relevance and limit results
        results.sort(key=lambda x: x["relevance"], reverse=True)
        return results[:limit]
    
    def search_mcps(self, query: str, limit: int = 10) -> List[Dict[str, Any]]:
        """Search for MCPs by name or config content"""
        mcps = self.actions_loader.get_mcps()
        results = []
        
        for mcp in mcps:
            # Calculate relevance scores
            name_score = self._calculate_relevance(query, mcp.name)
            
            # Search in config (convert to string for searching)
            config_str = str(mcp.config)
            config_score = self._calculate_relevance(query, config_str) * 0.5
            
            max_score = max(name_score, config_score)
            
            if max_score > 30:  # Threshold for relevance
                mcp_data = mcp.dict()
                # Remove config from search results
                mcp_data.pop("config", None)
                results.append({
                    "mcp": mcp_data,
                    "relevance": max_score
                })
        
        # Sort by relevance and limit results
        results.sort(key=lambda x: x["relevance"], reverse=True)
        return results[:limit]
    
    def search_all(self, query: str, limit: int = 10) -> Dict[str, Any]:
        """Search across all types (agents, rules, MCPs)"""
        return {
            "agents": self.search_agents(query, limit),
            "rules": self.search_rules(query, limit),
            "mcps": self.search_mcps(query, limit)
        }

# Create singleton instance
search_service = SearchService()


================================================
File: app/services/smart_ingest.py
================================================
"""
Functions for ingesting repositories and sending context to OpenAI API.
"""

import httpx
from typing import Optional, Dict, Any
from dotenv import load_dotenv
import os
from gitingest import ingest_async

# Load environment variables from .env file
load_dotenv()


async def use_gitingest(url: str, context_size: int = 50000) -> str:
    """
    Ingest a repository using gitingest and trim to specified token size.
    
    Args:
        url: Repository URL to ingest
        context_size: Maximum context size in tokens (default ~50k tokens)
    
    Returns:
        String containing the repository context, trimmed to specified size
    """
    # Ingest the repository
    summary, tree, content = await ingest_async(
        url,
        max_file_size=512000,
        include_patterns=None,
        exclude_patterns=None
    )
    
    # Combine into single context
    full_context = f"{summary}\n\n{tree}\n\n{content}"
    
    # Approximate token count (roughly 4 chars per token)
    # Trim to specified context size
    max_chars = context_size * 4
    if len(full_context) > max_chars:
        full_context = full_context[:max_chars]
        # Add ellipsis to indicate truncation
        full_context += "\n\n... (context truncated)"
    
    return full_context


def smart_ingest(
    context: str, 
    user_prompt: str = "Analyze this repository and provide insights",
    api_key: Optional[str] = None
) -> Dict[str, Any]:
    """
    Send the ingested repository context to OpenAI API with a system prompt.
    
    Args:
        context: The "big fat context" from use_git_ingest function
        user_prompt: The user's question or request about the repository
        api_key: Optional OpenAI API key (defaults to env var OPENAI_API_KEY)
    
    Returns:
        Dictionary containing OpenAI's response and metadata
    
    Raises:
        Exception: If the API call fails
    """
    # Get API key from environment if not provided
    if not api_key:
        api_key = os.getenv("OPENAI_API_KEY")
        if not api_key:
            raise ValueError("OPENAI_API_KEY not found in environment variables")
    
    # System prompt for repository analysis
    system_prompt = """You are an expert code analyst and software architect. 
You have been given the complete context of a repository including its structure and file contents.
Analyze the repository thoroughly and provide insights based on the user's request.
Focus on:
- Code quality and architecture
- Potential improvements
- Security considerations
- Documentation completeness
- Dependencies and technical debt
Be specific and provide actionable recommendations."""
    
    # Prepare messages for OpenAI
    messages = [
        {
            "role": "system",
            "content": system_prompt
        },
        {
            "role": "user",
            "content": f"{user_prompt}\n\n{context}"
        }
    ]
    
    # OpenAI API endpoint
    url = "https://api.openai.com/v1/chat/completions"
    
    # Headers for the API request
    headers = {
        "Authorization": f"Bearer {api_key}",
        "Content-Type": "application/json"
    }
    
    # Request body
    data = {
        "model": "gpt-4o-mini",  # Using GPT-4o-mini for cost efficiency
        "messages": messages,
        "temperature": 0.3,  # Lower temperature for more focused analysis
        "max_tokens": 4096
    }
    
    try:
        # Make the API call
        with httpx.Client(timeout=60.0) as client:
            response = client.post(url, json=data, headers=headers)
            response.raise_for_status()
            
            result = response.json()
            
            # Extract the response
            choice = result.get("choices", [{}])[0]
            message = choice.get("message", {})
            
            return {
                "success": True,
                "response": message.get("content", ""),
                "model": result.get("model"),
                "usage": result.get("usage", {}),
                "finish_reason": choice.get("finish_reason")
            }
            
    except httpx.HTTPStatusError as e:
        error_detail = e.response.text if e.response else str(e)
        raise Exception(f"OpenAI API error: {e.response.status_code} - {error_detail}")
    except Exception as e:
        raise Exception(f"Failed to send context to OpenAI: {str(e)}")



================================================
File: app/static/site.webmanifest
================================================
{
    "name": "Gitrules",
    "short_name": "Gitrules",
    "description": "Instant rules for coding agents",
    "icons": [
        {
            "src": "/static/favicon-16x16.png",
            "sizes": "16x16",
            "type": "image/png"
        },
        {
            "src": "/static/favicon-32x32.png",
            "sizes": "32x32",
            "type": "image/png"
        },
        {
            "src": "/static/apple-touch-icon.png",
            "sizes": "180x180",
            "type": "image/png"
        }
    ],
    "theme_color": "#22D3EE",
    "background_color": "#ECFEFF",
    "display": "standalone",
    "start_url": "/"
}


================================================
File: app/static/js/auto_share.js
================================================
/**
 * AutoShare Manager - Handles automatic sharing with debounced saves
 */
class AutoShareManager {
    constructor() {
        this.state = 'synced'; // hidden, synced, syncing, error
        this.dirty = false;
        this.currentShareUrl = null;
        this.currentShareId = null;
        this.debounceTimer = null;
        this.pendingSync = false;
        this.lastPayloadHash = null;
        
        // UI elements
        this.panel = null;
        this.linkInput = null;
        this.copyButton = null;
        
        this.init();
    }
    
    init() {
        this.panel = document.getElementById('auto-share-panel');
        this.linkInput = document.getElementById('share-link-input');
        this.copyButton = document.getElementById('copy-share-link');
        
        if (this.copyButton) {
            this.copyButton.addEventListener('click', () => this.copyLink());
        }
        
        // Listen for workspace changes
        this.attachListeners();
        
        // Trigger initial sync if there's content
        setTimeout(() => {
            const data = this.collectWorkspaceData();
            if (Object.keys(data).length > 0) {
                this.markDirty();
            }
        }, 500);
    }
    
    attachListeners() {
        // Listen for file content changes
        window.addEventListener('workspace-content-changed', () => {
            this.markDirty();
        });
        
        // Listen for file additions/deletions
        window.addEventListener('workspace-file-added', () => {
            this.markDirty();
        });
        
        window.addEventListener('workspace-file-deleted', () => {
            this.markDirty();
        });
    }
    
    markDirty() {
        this.dirty = true;
        
        // Immediately gray out the UI to show context has changed
        this.setUnsyncedState();
        
        // Clear existing timer
        if (this.debounceTimer) {
            clearTimeout(this.debounceTimer);
        }
        
        // Set new timer for 500ms
        this.debounceTimer = setTimeout(() => {
            this.sync();
        }, 500);
    }
    
    async sync() {
        // Skip if already syncing
        if (this.state === 'syncing') {
            this.pendingSync = true;
            return;
        }
        
        // Collect current workspace data
        const payload = this.collectWorkspaceData();
        
        // If no files, don't sync
        if (Object.keys(payload).length === 0) {
            this.dirty = false;
            this.setState('synced');
            if (this.linkInput) {
                this.linkInput.value = 'Add files to generate install link';
            }
            return;
        }
        
        // Check if payload has changed
        const payloadHash = this.hashPayload(payload);
        if (payloadHash === this.lastPayloadHash) {
            this.dirty = false;
            return;
        }
        
        // Update UI to syncing state
        this.setState('syncing');
        
        try {
            // Send to API
            const response = await fetch('/api/install', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ files: payload })
            });
            
            if (!response.ok) {
                throw new Error('Failed to sync');
            }
            
            const data = await response.json();
            
            // Update state with new share URL
            this.currentShareId = data.hash;
            this.currentShareUrl = `sh -c "$(curl -fsSL ${window.location.origin}/api/install/${data.hash}.sh)"`;
            this.lastPayloadHash = payloadHash;
            this.dirty = false;
            
            // Update UI to synced state
            this.setState('synced');
            
            // Check if we need another sync
            if (this.pendingSync || this.dirty) {
                this.pendingSync = false;
                setTimeout(() => this.sync(), 100);
            }
            
        } catch (error) {
            console.error('Auto-share sync failed:', error);
            this.setState('error');
            
            // Retry after a delay if still dirty
            if (this.dirty) {
                setTimeout(() => this.sync(), 2000);
            }
        }
    }
    
    collectWorkspaceData() {
        const allFiles = {};
        
        // Get files directly from workspace manager state
        const state = window.workspaceManager?.getState();
        if (state?.files) {
            return { ...state.files };
        }
        
        // Fallback: collect files from tree structure
        function collectFilesFromTree(nodes, collected) {
            nodes.forEach(node => {
                if (node.type === 'file') {
                    const state = window.workspaceManager?.getState();
                    if (state?.files[node.path]) {
                        collected[node.path] = state.files[node.path];
                    }
                } else if (node.type === 'folder' && node.children) {
                    collectFilesFromTree(node.children, collected);
                }
            });
        }
        
        // Collect files from dynamic tree if available
        if (window.generateFileTreeData) {
            const fileTreeData = window.generateFileTreeData();
            collectFilesFromTree(fileTreeData, allFiles);
        }
        
        return allFiles;
    }
    
    hashPayload(payload) {
        // Simple hash for change detection
        return JSON.stringify(payload);
    }
    
    setUnsyncedState() {
        // Gray out only the script input immediately when content changes
        if (this.linkInput) {
            this.linkInput.classList.add('opacity-50');
            this.linkInput.disabled = true;
            if (this.currentShareUrl) {
                this.linkInput.value = this.currentShareUrl;
            }
        }
        // Keep copy button enabled but just disable if no URL
        if (this.copyButton) {
            this.copyButton.disabled = !this.currentShareUrl;
        }
    }
    
    setState(newState) {
        this.state = newState;
        
        switch (newState) {
            case 'hidden':
                if (this.panel) this.panel.style.display = 'none';
                break;
                
            case 'synced':
                if (this.panel) this.panel.style.display = 'flex';
                if (this.linkInput) {
                    this.linkInput.value = this.currentShareUrl || 'Add files to generate install link';
                    this.linkInput.classList.remove('opacity-50');
                    this.linkInput.disabled = false;
                }
                if (this.copyButton) {
                    this.copyButton.disabled = !this.currentShareUrl;
                    if (this.currentShareUrl) {
                        this.copyButton.classList.remove('opacity-50');
                    } else {
                        this.copyButton.classList.add('opacity-50');
                    }
                }
                break;
                
            case 'syncing':
                if (this.panel) this.panel.style.display = 'flex';
                if (this.linkInput) {
                    this.linkInput.classList.add('opacity-50');
                    this.linkInput.disabled = true;
                }
                if (this.copyButton) {
                    this.copyButton.disabled = !this.currentShareUrl;
                    // Don't gray out the copy button
                    this.copyButton.classList.remove('opacity-50');
                }
                break;
                
            case 'error':
                if (this.panel) this.panel.style.display = 'flex';
                // Keep last good link visible but indicate error somehow
                if (this.linkInput && this.currentShareUrl) {
                    this.linkInput.value = this.currentShareUrl;
                    this.linkInput.classList.remove('opacity-50');
                    this.linkInput.disabled = false;
                }
                if (this.copyButton && this.currentShareUrl) {
                    this.copyButton.disabled = false;
                    this.copyButton.classList.remove('opacity-50');
                }
                break;
        }
    }
    
    async copyLink() {
        if (!this.currentShareUrl) return;
        
        try {
            await navigator.clipboard.writeText(this.currentShareUrl);
            
            // Show feedback
            const originalText = this.copyButton.textContent;
            this.copyButton.textContent = 'Copied!';
            this.copyButton.classList.remove('bg-cyan-400');
            this.copyButton.classList.add('bg-green-400');
            
            setTimeout(() => {
                this.copyButton.textContent = originalText;
                this.copyButton.classList.remove('bg-green-400');
                this.copyButton.classList.add('bg-cyan-400');
            }, 2000);
        } catch (error) {
            console.error('Failed to copy:', error);
        }
    }
}

// Initialize when DOM is ready
document.addEventListener('DOMContentLoaded', function() {
    // Wait a bit for workspace to be ready
    setTimeout(() => {
        window.autoShareManager = new AutoShareManager();
    }, 200);
});


================================================
File: app/static/js/context_manager.js
================================================
/**
 * Context Management UI
 */

// Initialize context UI
function initializeContextUI() {
    const contextSwitcher = document.getElementById('context-switcher');
    const newContextBtn = document.getElementById('new-context-btn');
    const deleteContextBtn = document.getElementById('delete-context-btn');
    
    if (!contextSwitcher) return;
    
    // Handle context switching
    if (!contextSwitcher.hasAttribute('data-initialized')) {
        contextSwitcher.addEventListener('change', function() {
            const newContext = this.value;
            if (newContext && newContext !== window.workspaceManager?.currentContextId) {
                window.workspaceManager?.switchContext(newContext);
            }
        });
        contextSwitcher.setAttribute('data-initialized', 'true');
    }
    
    // Handle new context creation
    if (newContextBtn && !newContextBtn.hasAttribute('data-initialized')) {
        newContextBtn.addEventListener('click', async function() {
            const name = await openContextModal();
            if (name && name.trim()) {
                const id = name.toLowerCase().replace(/[^a-z0-9]/g, '-');
                if (window.workspaceManager?.createContext(id, name.trim())) {
                    window.workspaceManager?.switchContext(id);
                } else {
                    // Silently handle existing context
                    // Could show error in modal but for now just skip
                }
            }
        });
        newContextBtn.setAttribute('data-initialized', 'true');
    }
    
    // Handle context deletion
    if (deleteContextBtn && !deleteContextBtn.hasAttribute('data-initialized')) {
        deleteContextBtn.addEventListener('click', function() {
            if (window.workspaceManager?.currentContextId === 'default') {
                // Silently return without deleting default context
                return;
            }
            
            // Delete context without confirmation
            window.workspaceManager?.deleteContext(window.workspaceManager?.currentContextId);
        });
        deleteContextBtn.setAttribute('data-initialized', 'true');
    }
}

// Update workspace contents based on selected tab
function updateWorkspaceContents(tabId) {
    updateWorkspaceFileSystem(tabId);
    if (window.updateWorkspaceEditor) {
        window.updateWorkspaceEditor(tabId);
    }
}

function updateWorkspaceFileSystem(tabId) {
    // File system now uses the persistent file tree
    // This function can be used to filter visible files based on tab context
    if (window.renderFileTree) {
        window.renderFileTree();
    }
}

// Export functions for global use
window.initializeContextUI = initializeContextUI;
window.updateWorkspaceContents = updateWorkspaceContents;
window.updateWorkspaceFileSystem = updateWorkspaceFileSystem;


================================================
File: app/static/js/file_tree.js
================================================
/**
 * File Tree Management
 */

// Generate file tree structure dynamically from workspace state
function generateFileTreeData() {
    const tree = {};
    const state = window.workspaceManager?.getState();
    if (!state) return [];
    
    const files = Object.keys(state.files);
    
    // Build nested tree structure
    files.forEach(filePath => {
        const parts = filePath.split('/');
        let current = tree;
        
        // Create folder nodes
        for (let i = 0; i < parts.length - 1; i++) {
            const folderName = parts[i];
            const folderPath = parts.slice(0, i + 1).join('/');
            
            if (!current[folderName]) {
                current[folderName] = {
                    type: 'folder',
                    path: folderPath,
                    name: folderName,
                    children: {}
                };
            }
            current = current[folderName].children;
        }
        
        // Add file node
        const fileName = parts[parts.length - 1];
        current[fileName] = {
            type: 'file',
            path: filePath,
            name: fileName
        };
    });
    
    // Convert to array format expected by renderer
    function convertToArray(obj) {
        return Object.values(obj).map(node => {
            if (node.type === 'folder') {
                return {
                    ...node,
                    children: convertToArray(node.children)
                };
            }
            return node;
        });
    }
    
    return convertToArray(tree);
}

// Render file tree
function renderFileTree() {
    const treeContainer = document.getElementById('file-tree');
    const emptyStateEl = document.getElementById('files-empty-state');
    if (!treeContainer) return;
    
    treeContainer.innerHTML = '';
    
    // Add simple CSS for tree lines if not already added
    if (!document.getElementById('tree-lines-style')) {
        const style = document.createElement('style');
        style.id = 'tree-lines-style';
        style.textContent = `
            .tree-item {
                position: relative;
                padding-left: 4px;
            }
            .tree-item.level-1 { padding-left: 24px; }
            .tree-item.level-2 { padding-left: 44px; }
            .tree-item.level-3 { padding-left: 64px; }
            .tree-item.level-4 { padding-left: 84px; }
            .tree-item.level-5 { padding-left: 104px; }
        `;
        document.head.appendChild(style);
    }
    
    const state = window.workspaceManager?.getState();
    const hasFiles = state && Object.keys(state.files).length > 0;
    
    if (!hasFiles) {
        if (emptyStateEl) {
            emptyStateEl.classList.remove('hidden');
        }
        // Still show the root folder even when empty
        const rootDiv = document.createElement('div');
        rootDiv.innerHTML = `
            <div class="flex items-center p-1 text-gray-400 pointer-events-none" style="padding-left: 4px;">
                <div class="flex items-center gap-1">
                    <span class="mdi mdi-folder-open text-gray-400 text-base"></span>
                    <span class="font-medium">/your-repo</span>
                </div>
            </div>
        `;
        treeContainer.appendChild(rootDiv);
        return;
    } else {
        if (emptyStateEl) {
            emptyStateEl.classList.add('hidden');
        }
    }
    
    // Add root folder styled like other folders but greyed out
    const rootDiv = document.createElement('div');
    rootDiv.innerHTML = `
        <div class="flex items-center p-1 text-gray-400 pointer-events-none" style="padding-left: 4px;">
            <div class="flex items-center gap-1">
                <span class="mdi mdi-folder-open text-gray-400 text-base"></span>
                <span class="font-medium">/your-repo</span>
            </div>
        </div>
    `;
    treeContainer.appendChild(rootDiv);
    
    function renderNode(node, level = 0) {
        const div = document.createElement('div');
        
        if (node.type === 'folder') {
            const state = window.workspaceManager?.getState();
            // Default to expanded - only collapsed if explicitly marked
            let isExpanded = true;
            if (state && state.expandedFolders.has(node.path + ':collapsed')) {
                isExpanded = false;
            }
            const folderIcon = isExpanded ? 'mdi-folder-open' : 'mdi-folder';
            
            div.className = `tree-item level-${level}`;
            div.innerHTML = `
                <div class="flex items-center justify-between p-1 hover:bg-gray-100 group">
                    <div class="flex items-center gap-1 cursor-pointer folder-toggle" data-path="${node.path}">
                        <svg class="w-3 h-3 transition-transform ${isExpanded ? '' : '-rotate-90'}" fill="currentColor" viewBox="0 0 20 20">
                            <path d="M6 10l4 4 4-4" stroke="currentColor" stroke-width="2" fill="none"/>
                        </svg>
                        <span class="mdi ${folderIcon} text-blue-600 text-base"></span>
                        <span class="font-medium">${node.name}</span>
                    </div>
                    <div class="flex items-center gap-1 opacity-0 group-hover:opacity-100">
                        <button class="add-file-to-folder text-green-600 hover:text-green-800 p-1" data-path="${node.path}" title="Add file to folder">
                            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
                            </svg>
                        </button>
                        <button class="delete-folder text-red-600 hover:text-red-800 p-1" data-path="${node.path}" title="Delete folder">
                            <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd"/>
                            </svg>
                        </button>
                    </div>
                </div>
            `;
            
            treeContainer.appendChild(div);
            
            if (isExpanded && node.children) {
                node.children.forEach(child => renderNode(child, level + 1));
            }
        } else {
            // File node
            const state = window.workspaceManager?.getState();
            const isSelected = state && state.selectedFile === node.path;
            
            div.className = `tree-item level-${level}`;
            div.innerHTML = `
                <div class="flex items-center justify-between p-1 hover:bg-gray-100 cursor-pointer file-item ${isSelected ? 'bg-cyan-100 font-medium' : ''}" data-path="${node.path}">
                    <div class="flex items-center gap-1">
                        <span class="mdi mdi-file-document-outline text-gray-600 text-sm"></span>
                        <span>${node.name}</span>
                    </div>
                    <button class="delete-file opacity-0 group-hover:opacity-100 hover:opacity-100 text-red-600 hover:text-red-800 p-1" data-path="${node.path}" title="Delete file">
                        <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd"/>
                        </svg>
                    </button>
                </div>
            `;
            
            const fileDiv = div.querySelector('.file-item');
            fileDiv.classList.add('group');
            treeContainer.appendChild(div);
        }
    }
    
    // Generate and render dynamic tree
    const fileTreeData = generateFileTreeData();
    fileTreeData.forEach(node => renderNode(node, 0));
    
    // Add event listeners
    treeContainer.addEventListener('click', handleTreeClick);
}

// Handle tree clicks
async function handleTreeClick(event) {
    const deleteButton = event.target.closest('.delete-file');
    const deleteFolder = event.target.closest('.delete-folder');
    const addFileButton = event.target.closest('.add-file-to-folder');
    const folderToggle = event.target.closest('.folder-toggle');
    const fileItem = event.target.closest('.file-item');
    
    if (deleteButton) {
        event.stopPropagation();
        const path = deleteButton.dataset.path;
        window.workspaceManager?.deleteFile(path);
    } else if (deleteFolder) {
        event.stopPropagation();
        const path = deleteFolder.dataset.path;
        // Delete all files in this folder
        const state = window.workspaceManager?.getState();
        if (state) {
            const folderPrefix = path + '/';
            const filesToDelete = Object.keys(state.files).filter(filePath => 
                filePath.startsWith(folderPrefix)
            );
            filesToDelete.forEach(filePath => {
                window.workspaceManager?.deleteFile(filePath);
            });
        }
    } else if (addFileButton) {
        event.stopPropagation();
        const folderPath = addFileButton.dataset.path;
        await createNewFile(folderPath);
    } else if (folderToggle) {
        const path = folderToggle.dataset.path;
        const state = window.workspaceManager?.getState();
        if (state) {
            // Track collapsed state instead of expanded state (default is expanded)
            const collapsedKey = path + ':collapsed';
            if (state.expandedFolders.has(collapsedKey)) {
                state.expandedFolders.delete(collapsedKey);
            } else {
                state.expandedFolders.add(collapsedKey);
            }
            window.workspaceManager.saveState(window.workspaceManager.currentContextId);
            renderFileTree();
        }
    } else if (fileItem) {
        const path = fileItem.dataset.path;
        await openFile(path);
    }
}

// Open file in editor
async function openFile(path) {
    if (!window.workspaceMonacoEditor) return;
    
    const state = window.workspaceManager?.getState();
    if (!state || !state.files[path]) {
        console.error('File not found:', path);
        // Update file path label to show error
        updateFilePathLabel(null, `⚠️ File not found: "${path}"`);
        // Clear editor
        window.workspaceMonacoEditor.setValue('');
        return;
    }
    
    // Update selected file
    state.selectedFile = path;
    window.workspaceManager.saveState(window.workspaceManager.currentContextId);
    
    // Show content
    const content = state.files[path];
    window.workspaceMonacoEditor.setValue(content);
    
    // Update file path label
    updateFilePathLabel(path);
    
    // Refresh tree to show selection
    renderFileTree();
}

// Update file path label
function updateFilePathLabel(path, errorMessage) {
    const filePathElement = document.getElementById('current-file-path');
    if (!filePathElement) return;
    
    if (errorMessage) {
        filePathElement.textContent = errorMessage;
        filePathElement.className = 'text-xs text-red-600 bg-red-50 px-2 py-1 border border-red-300 rounded';
        filePathElement.style.fontFamily = "'Courier New', monospace";
    } else if (path) {
        filePathElement.textContent = path;
        filePathElement.className = 'text-xs text-gray-600 bg-gray-50 px-2 py-1 border border-gray-300 rounded';
        filePathElement.style.fontFamily = "'Courier New', monospace";
    } else {
        filePathElement.textContent = 'No file selected';
        filePathElement.className = 'text-xs text-gray-400 bg-gray-50 px-2 py-1 border border-gray-300 rounded';
        filePathElement.style.fontFamily = "'Courier New', monospace";
    }
}

// Create new file
async function createNewFile(basePath = '') {
    const fullPath = await openFileModal(basePath);
    if (!fullPath) {
        return;
    }
    
    // Parse the path to check for nested directories
    const parts = fullPath.split('/');
    const fileName = parts[parts.length - 1];
    
    // Create file with default content
    const defaultContent = fileName.endsWith('.md') ? 
        `# ${fileName.replace('.md', '').replace(/[_-]/g, ' ')}\n\nYour content here...` :
        fileName.endsWith('.json') ?
        '{\n  "name": "new-file",\n  "version": "1.0.0"\n}' :
        fileName.endsWith('.yaml') || fileName.endsWith('.yml') ?
        'name: new-file\nversion: 1.0.0\n' :
        '# New file\n\nContent goes here...';
    
    return await includeFile(fullPath, defaultContent);
}

// Removed - folder creation now happens through file path parsing

// Include a file with given path and content
async function includeFile(filePath, content) {
    return window.workspaceManager?.includeFile(filePath, content);
}

// Delete file
async function deleteFile(path) {
    return window.workspaceManager?.deleteFile(path);
}

// Include predefined content templates
async function includeTemplate(templateName) {
    // For any unrecognized template, create a basic placeholder
    const defaultTemplate = {
        path: `${templateName.toLowerCase().replace(/\s+/g, '_')}.md`,
        content: `# ${templateName}

## Description
This is a ${templateName} configuration.

## Usage
Add your specific configuration and guidelines here.

## Notes
- Customize this template for your needs
- Add relevant documentation
- Include examples as needed`
    };
    
    const templates = {
        'Supabase MCP': {
            path: 'mcps/supabase_mcp.json',
            content: `{
  "name": "supabase-mcp",
  "version": "1.0.0",
  "description": "Model Context Protocol for Supabase integration",
  "tools": [
    {
      "name": "query_database",
      "description": "Execute SQL queries on Supabase database"
    }
  ]
}`
        },
        'Github MCP': {
            path: 'mcps/github_mcp.json',
            content: `{
  "name": "github-mcp",
  "version": "1.0.0",
  "description": "Model Context Protocol for GitHub integration",
  "tools": [
    {
      "name": "create_issue",
      "description": "Create a new GitHub issue"
    }
  ]
}`
        },
        'Python': {
            path: 'guidelines/python_style.md',
            content: `# Python Style Guidelines

## Code Formatting
- Use PEP 8 style guide
- Line length: 88 characters (Black formatter)
- Use type hints for all functions

## Best Practices
- Use meaningful variable names
- Add docstrings to all functions and classes
- Prefer list comprehensions over loops when appropriate`
        },
        'TypeScript': {
            path: 'guidelines/typescript_rules.md',
            content: `# TypeScript Coding Rules

## Type Safety
- Always use strict mode
- No \`any\` type unless absolutely necessary
- Define interfaces for all data structures

## Code Style
- Use Prettier for formatting
- Prefer const over let
- Use arrow functions for callbacks`
        },
        'Researcher': {
            path: 'subagents/researcher.md',
            content: `# Researcher Agent

A specialized subagent for information gathering and analysis.

## Capabilities
- Web search and analysis
- Document research
- Data compilation and synthesis

## Usage
\`\`\`
@researcher find information about [topic]
\`\`\``
        },
        'Memory Manager': {
            path: 'subagents/memory_manager.md',
            content: `# Memory Manager Agent

Handles context and conversation history management.

## Features
- Long-term context preservation
- Conversation summarization
- Knowledge base integration

## Usage
\`\`\`
@memory store this information about [topic]
@memory recall information about [topic]
\`\`\``
        },
        'Code Reviewer': {
            path: 'subagents/code_reviewer.md',
            content: `# Code Reviewer Agent

Specialized agent for code review and quality assessment.

## Capabilities
- Code quality analysis
- Security vulnerability detection
- Best practices compliance
- Performance optimization suggestions

## Usage
\`\`\`
@reviewer analyze this code for issues
@reviewer check security vulnerabilities
\`\`\``
        },
        'React Guidelines': {
            path: 'guidelines/react_rules.md',
            content: `# React Development Guidelines

## Component Structure
- Use functional components with hooks
- Prefer composition over inheritance
- Keep components small and focused

## State Management
- Use useState for local state
- Use useContext for shared state
- Consider useReducer for complex state logic

## Performance
- Use React.memo for expensive components
- Optimize re-renders with useMemo and useCallback
- Lazy load components when appropriate`
        },
        'API Design Guidelines': {
            path: 'guidelines/api_design.md',
            content: `# API Design Guidelines

## RESTful Principles
- Use HTTP methods correctly (GET, POST, PUT, DELETE)
- Use meaningful resource URLs
- Return appropriate HTTP status codes

## Request/Response Format
- Use JSON for request and response bodies
- Include proper Content-Type headers
- Implement consistent error response format

## Security
- Use HTTPS for all endpoints
- Implement proper authentication/authorization
- Validate all input parameters`
        },
        'Database MCP': {
            path: 'mcps/database_mcp.json',
            content: `{
  "name": "database-mcp",
  "version": "1.0.0",
  "description": "Model Context Protocol for database operations",
  "tools": [
    {
      "name": "query_database",
      "description": "Execute SQL queries on database"
    },
    {
      "name": "create_table",
      "description": "Create new database tables"
    },
    {
      "name": "migrate_schema",
      "description": "Run database migrations"
    }
  ]
}`
        }
    };
    
    const template = templates[templateName] || defaultTemplate;
    return await includeFile(template.path, template.content);
}

// Initialize file tree system
function initializeFileTree() {
    // Wire up history buttons
    const prevBtn = document.getElementById('files-prev-btn');
    const nextBtn = document.getElementById('files-next-btn');
    const resetBtn = document.getElementById('files-reset-btn');
    
    if (prevBtn && !prevBtn.hasAttribute('data-initialized')) {
        prevBtn.addEventListener('click', () => window.workspaceManager?.undo());
        prevBtn.setAttribute('data-initialized', 'true');
    }
    if (nextBtn && !nextBtn.hasAttribute('data-initialized')) {
        nextBtn.addEventListener('click', () => window.workspaceManager?.redo());
        nextBtn.setAttribute('data-initialized', 'true');
    }
    if (resetBtn && !resetBtn.hasAttribute('data-initialized')) {
        resetBtn.addEventListener('click', () => window.workspaceManager?.reset());
        resetBtn.setAttribute('data-initialized', 'true');
    }
    
    // Wire up New File button
    const newFileButton = document.getElementById('new-file-button');
    if (newFileButton && !newFileButton.hasAttribute('data-initialized')) {
        newFileButton.addEventListener('click', () => createNewFile());
        newFileButton.setAttribute('data-initialized', 'true');
    }
    
    // Wire up Quick Action buttons (use delegation to avoid duplicates)
    if (!document.body.hasAttribute('data-qa-initialized')) {
        document.addEventListener('click', async function(e) {
            const button = e.target.closest('.action-button[data-template]');
            if (button) {
                const templateName = button.dataset.template;
                if (templateName) {
                    await includeTemplate(templateName);
                }
            }
        });
        document.body.setAttribute('data-qa-initialized', 'true');
    }
}

// Export functions for global use
window.generateFileTreeData = generateFileTreeData;
window.renderFileTree = renderFileTree;
window.handleTreeClick = handleTreeClick;
window.openFile = openFile;
window.updateFilePathLabel = updateFilePathLabel;
window.createNewFile = createNewFile;
window.includeFile = includeFile;
window.deleteFile = deleteFile;
window.includeTemplate = includeTemplate;
window.initializeFileTree = initializeFileTree;


================================================
File: app/static/js/monaco_editor.js
================================================
/**
 * Monaco Editor Integration
 */

let workspaceMonacoEditor;

function initializeWorkspaceEditor() {
    require.config({ paths: { vs: 'https://unpkg.com/monaco-editor@0.44.0/min/vs' } });
    
    require(['vs/editor/editor.main'], function () {
        workspaceMonacoEditor = monaco.editor.create(document.getElementById('workspace-monaco-editor'), {
            value: '',
            language: 'markdown',
            theme: 'vs',
            fontSize: 12,
            lineNumbers: 'on',
            minimap: { enabled: false },
            scrollBeyondLastLine: false,
            automaticLayout: true,
            wordWrap: 'on'
        });
        
        // Listen for content changes and update workspace state
        workspaceMonacoEditor.onDidChangeModelContent(function() {
            const state = window.workspaceManager?.getState();
            if (state && state.selectedFile) {
                // Update the file content in workspace state
                state.files[state.selectedFile] = workspaceMonacoEditor.getValue();
                // Save to localStorage
                if (window.workspaceManager) {
                    window.workspaceManager.saveState(window.workspaceManager.currentContextId);
                }
                // Dispatch event for auto-share
                window.dispatchEvent(new CustomEvent('workspace-content-changed'));
            }
        });
        
        // Expose globally for access from other components
        window.workspaceMonacoEditor = workspaceMonacoEditor;
        
        // Copy functionality
        document.getElementById('copy-workspace-editor').addEventListener('click', function() {
            const content = workspaceMonacoEditor.getValue();
            navigator.clipboard.writeText(content);
        });
        
        // Initialize QuickAction button handlers after editor is ready
        setTimeout(initializeQuickActionHandlers, 100);
    });
}

function insertTextAtCursor(text) {
    if (!workspaceMonacoEditor) return;
    
    const selection = workspaceMonacoEditor.getSelection();
    const position = selection.getStartPosition();
    
    workspaceMonacoEditor.executeEdits('quickaction-insert', [{
        range: new monaco.Range(position.lineNumber, position.column, position.lineNumber, position.column),
        text: text
    }]);
    console.log("Inserted text:", text);

    // Move cursor to end of inserted text
    const newPosition = new monaco.Position(position.lineNumber, position.column + text.length);
    workspaceMonacoEditor.setPosition(newPosition);
    workspaceMonacoEditor.focus();
}

function initializeQuickActionHandlers() {
    // Helper function to extract button label

}

function updateWorkspaceEditor(tabId) {
    // This function is no longer needed as we're using file-based content
    // Kept for compatibility but does nothing
    return;
}

// Export functions for global use
window.workspaceMonacoEditor = workspaceMonacoEditor;
window.initializeWorkspaceEditor = initializeWorkspaceEditor;
window.insertTextAtCursor = insertTextAtCursor;
window.initializeQuickActionHandlers = initializeQuickActionHandlers;
window.updateWorkspaceEditor = updateWorkspaceEditor;


================================================
File: app/static/js/workspace_manager.js
================================================
/**
 * WorkspaceState - Manages all state for a single workspace context
 */
class WorkspaceState {
    constructor(contextId) {
        this.contextId = contextId;
        this.files = {};  // File path -> content mapping
        this.selectedFile = null;
        this.expandedFolders = new Set();
        
        // Action/Tool states - unified state for toggles
        this.actionStates = {
            mcps: {
                expanded: false,
                active: false,
                items: {}  // name -> checked state
            },
            agents: {
                expanded: false,
                active: false,
                items: {}  // name -> checked state
            },
            rules: {
                expanded: false,
                active: false,
                items: {}  // name -> checked state
            }
        };
        
        // Agent name to file path mappings for easier removal
        this.agentMappings = {};
        
        this.history = {
            past: [],
            present: null,
            future: [],
            maxSize: 50
        };
    }

    // Initialize empty state
    initEmpty() {
        this.files = {};
        this.selectedFile = null;
        this.expandedFolders = new Set();
        this.actionStates = {
            mcps: { expanded: false, active: false, items: {} },
            agents: { expanded: false, active: false, items: {} },
            rules: { expanded: false, active: false, items: {} }
        };
        this.agentMappings = {};
        this.history.present = this.snapshot();
        this.history.past = [];
        this.history.future = [];
    }

    // Create a snapshot of current state
    snapshot() {
        return {
            files: { ...this.files },
            selectedFile: this.selectedFile,
            expandedFolders: Array.from(this.expandedFolders),
            actionStates: JSON.parse(JSON.stringify(this.actionStates)),
            agentMappings: { ...this.agentMappings },
            timestamp: new Date().toISOString()
        };
    }

    // Add a file (Include action)
    addFile(path, content) {
        this.pushHistory();
        this.files[path] = content;
        this.selectedFile = path;
        this.history.present = this.snapshot();
        // Dispatch event for auto-share
        window.dispatchEvent(new CustomEvent('workspace-file-added'));
    }

    // Delete a file
    deleteFile(path) {
        this.pushHistory();
        delete this.files[path];
        if (this.selectedFile === path) {
            this.selectedFile = null;
        }
        this.history.present = this.snapshot();
        // Dispatch event for auto-share
        window.dispatchEvent(new CustomEvent('workspace-file-deleted'));
    }

    // Push current state to history
    pushHistory() {
        if (this.history.present) {
            this.history.past.push(this.history.present);
            if (this.history.past.length > this.history.maxSize) {
                this.history.past.shift();
            }
            this.history.future = [];
        }
    }

    // Go to previous state
    undo() {
        if (this.history.past.length === 0) return false;
        
        const previousState = this.history.past.pop();
        this.history.future.unshift(this.history.present);
        this.history.present = previousState;
        this.restoreFromSnapshot(previousState);
        return true;
    }

    // Go to next state
    redo() {
        if (this.history.future.length === 0) return false;
        
        const nextState = this.history.future.shift();
        this.history.past.push(this.history.present);
        this.history.present = nextState;
        this.restoreFromSnapshot(nextState);
        return true;
    }

    // Restore state from snapshot
    restoreFromSnapshot(snapshot) {
        this.files = { ...snapshot.files };
        this.selectedFile = snapshot.selectedFile;
        this.expandedFolders = new Set(snapshot.expandedFolders || []);
        this.actionStates = snapshot.actionStates ? JSON.parse(JSON.stringify(snapshot.actionStates)) : {
            mcps: { expanded: false, active: false, items: {} },
            agents: { expanded: false, active: false, items: {} },
            rules: { expanded: false, active: false, items: {} }
        };
        this.agentMappings = snapshot.agentMappings ? { ...snapshot.agentMappings } : {};
    }

    // Reset to empty state
    reset() {
        this.pushHistory();
        this.files = {};
        this.selectedFile = null;
        this.expandedFolders = new Set();
        this.actionStates = {
            mcps: { expanded: false, active: false, items: {} },
            agents: { expanded: false, active: false, items: {} },
            rules: { expanded: false, active: false, items: {} }
        };
        this.agentMappings = {};
        this.history.present = this.snapshot();
    }
    
    // Toggle action category (MCPs, Agents, Rules)
    toggleActionCategory(category) {
        if (this.actionStates[category]) {
            this.actionStates[category].active = !this.actionStates[category].active;
            this.actionStates[category].expanded = this.actionStates[category].active;
        }
    }
    
    // Set action category state
    setActionCategoryState(category, active, expanded) {
        if (this.actionStates[category]) {
            this.actionStates[category].active = active;
            this.actionStates[category].expanded = expanded;
        }
    }
    
    // Toggle individual action item
    toggleActionItem(category, itemName) {
        if (this.actionStates[category]) {
            if (!this.actionStates[category].items[itemName]) {
                this.actionStates[category].items[itemName] = false;
            }
            this.actionStates[category].items[itemName] = !this.actionStates[category].items[itemName];
        }
    }
    
    // Set action item state
    setActionItemState(category, itemName, checked) {
        if (this.actionStates[category]) {
            this.actionStates[category].items[itemName] = checked;
        }
    }
    
    // Check if action category is active
    isActionCategoryActive(category) {
        return this.actionStates[category]?.active || false;
    }
    
    // Check if action category is expanded
    isActionCategoryExpanded(category) {
        return this.actionStates[category]?.expanded || false;
    }
    
    // Check if action item is checked
    isActionItemChecked(category, itemName) {
        return this.actionStates[category]?.items[itemName] || false;
    }

    // Check if we can undo/redo
    canUndo() {
        return this.history.past.length > 0;
    }

    canRedo() {
        return this.history.future.length > 0;
    }

    // Serialize state for localStorage
    serialize() {
        return JSON.stringify({
            contextId: this.contextId,
            files: this.files,
            selectedFile: this.selectedFile,
            expandedFolders: Array.from(this.expandedFolders),
            actionStates: this.actionStates,
            agentMappings: this.agentMappings,
            history: {
                past: this.history.past,
                present: this.history.present,
                future: this.history.future
            }
        });
    }

    // Deserialize state from localStorage
    static deserialize(contextId, data) {
        const state = new WorkspaceState(contextId);
        if (data) {
            try {
                const parsed = typeof data === 'string' ? JSON.parse(data) : data;
                state.files = parsed.files || {};
                state.selectedFile = parsed.selectedFile || null;
                state.expandedFolders = new Set(parsed.expandedFolders || []);
                
                // Restore action states
                if (parsed.actionStates) {
                    state.actionStates = parsed.actionStates;
                }
                
                // Restore agent mappings
                if (parsed.agentMappings) {
                    state.agentMappings = parsed.agentMappings;
                }
                
                if (parsed.history) {
                    state.history.past = parsed.history.past || [];
                    state.history.present = parsed.history.present || state.snapshot();
                    state.history.future = parsed.history.future || [];
                } else {
                    state.history.present = state.snapshot();
                }
            } catch (e) {
                console.error('Failed to deserialize state:', e);
                state.initEmpty();
            }
        } else {
            state.initEmpty();
        }
        return state;
    }
}

/**
 * WorkspaceManager - Manages multiple workspace contexts
 */
class WorkspaceManager {
    constructor() {
        this.contexts = {};
        this.currentContextId = null;
        this.currentState = null;
    }

    // Initialize the manager
    init() {
        this.contexts = this.loadContextsList();
        
        if (!this.contexts['default']) {
            this.createContext('default', 'Default Workspace');
        }
        
        const lastContext = localStorage.getItem('app:currentContext');
        
        if (lastContext && this.contexts[lastContext]) {
            this.switchContext(lastContext);
        } else {
            this.switchContext('default');
        }
    }

    // Load contexts list from localStorage
    loadContextsList() {
        try {
            const data = localStorage.getItem('app:contexts');
            return data ? JSON.parse(data) : {};
        } catch {
            return {};
        }
    }

    // Save contexts list to localStorage
    saveContextsList() {
        localStorage.setItem('app:contexts', JSON.stringify(this.contexts));
    }

    // Create a new context
    createContext(id, name) {
        if (this.contexts[id]) {
            console.warn(`Context ${id} already exists`);
            return false;
        }
        
        this.contexts[id] = {
            id,
            name,
            createdAt: Date.now()
        };
        
        this.saveContextsList();
        return true;
    }

    // Switch to a different context
    switchContext(contextId) {
        if (!this.contexts[contextId] && contextId !== 'default') {
            const saved = this.loadContextsList();
            if (!saved[contextId]) {
                console.error(`Context ${contextId} not found`);
                return false;
            }
            this.contexts = saved;
        }
        
        if (this.currentState) {
            this.saveState(this.currentContextId);
        }
        
        this.currentContextId = contextId;
        this.currentState = this.loadState(contextId);
        localStorage.setItem('app:currentContext', contextId);
        this.render();
        
        return true;
    }

    // Delete a context
    deleteContext(contextId) {
        if (contextId === 'default') {
            console.warn('Cannot delete default context');
            return false;
        }
        
        delete this.contexts[contextId];
        localStorage.removeItem(`app:workspace:${contextId}`);
        this.saveContextsList();
        
        if (this.currentContextId === contextId) {
            this.switchContext('default');
        }
        
        return true;
    }

    // Save state to localStorage
    saveState(contextId) {
        if (!this.currentState) return;
        
        const key = `app:workspace:${contextId}`;
        localStorage.setItem(key, this.currentState.serialize());
    }

    // Load state from localStorage
    loadState(contextId) {
        const key = `app:workspace:${contextId}`;
        const data = localStorage.getItem(key);
        return WorkspaceState.deserialize(contextId, data);
    }

    // Get current state
    getState() {
        return this.currentState;
    }

    // Render the UI based on current state
    render() {
        if (!this.currentState) return;
        
        // Update file tree
        if (window.renderFileTree) {
            window.renderFileTree();
        }
        
        // Update editor
        if (this.currentState.selectedFile && this.currentState.files[this.currentState.selectedFile]) {
            // Selected file exists - load it
            if (window.openFile) {
                window.openFile(this.currentState.selectedFile);
            }
        } else {
            // No selected file - check if we have any files to auto-select
            const fileKeys = Object.keys(this.currentState.files);
            if (fileKeys.length > 0 && !this.currentState.selectedFile) {
                // Auto-select first file
                const firstFile = fileKeys[0];
                this.currentState.selectedFile = firstFile;
                this.saveState(this.currentContextId);
                
                if (window.openFile) {
                    window.openFile(firstFile);
                }
            } else {
                // No files available - clear editor
                if (window.workspaceMonacoEditor) {
                    window.workspaceMonacoEditor.setValue('');
                }
                if (window.updateFilePathLabel) {
                    window.updateFilePathLabel(null);
                }
            }
        }
        
        // Restore action states UI
        if (window.restoreActionStates) {
            window.restoreActionStates();
        }
        
        this.updateHistoryButtons();
        this.updateContextDropdown();
    }

    // Update history button states
    updateHistoryButtons() {
        const prevBtn = document.getElementById('files-prev-btn');
        const nextBtn = document.getElementById('files-next-btn');
        
        if (prevBtn) {
            prevBtn.disabled = !this.currentState.canUndo();
        }
        if (nextBtn) {
            nextBtn.disabled = !this.currentState.canRedo();
        }
    }

    // Update context dropdown
    updateContextDropdown() {
        const contextSwitcher = document.getElementById('context-switcher');
        if (!contextSwitcher) return;
        
        contextSwitcher.innerHTML = '';
        Object.values(this.contexts).forEach(ctx => {
            const option = document.createElement('option');
            option.value = ctx.id;
            // Truncate long names to fit the dropdown
            let displayName = ctx.name;
            if (displayName.length > 25) {
                displayName = displayName.substring(0, 22) + '...';
            }
            option.textContent = displayName;
            option.title = ctx.name; // Show full name on hover
            option.selected = ctx.id === this.currentContextId;
            contextSwitcher.appendChild(option);
        });
    }

    // Include a file (main action for adding files)
    includeFile(path, content) {
        if (!this.currentState) return false;
        
        this.currentState.addFile(path, content);
        this.saveState(this.currentContextId);
        this.render();
        return true;
    }

    // Delete a file
    deleteFile(path) {
        if (!this.currentState) return false;
        
        this.currentState.deleteFile(path);
        this.saveState(this.currentContextId);
        this.render();
        return true;
    }

    // Undo action
    undo() {
        if (!this.currentState) return;
        
        if (this.currentState.undo()) {
            this.saveState(this.currentContextId);
            this.render();
        }
    }

    // Redo action
    redo() {
        if (!this.currentState) return;
        
        if (this.currentState.redo()) {
            this.saveState(this.currentContextId);
            this.render();
        }
    }

    // Reset current workspace
    reset() {
        if (!this.currentState) return;
        
        // Reset without confirmation
        this.currentState.reset();
        this.saveState(this.currentContextId);
        this.render();
    }
}

// Export for global use
window.WorkspaceState = WorkspaceState;
window.WorkspaceManager = WorkspaceManager;


================================================
File: app/templates/base.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="title" content="Gitrules">
    <meta name="description" content="Pastable superpowers for your codebases">
    <meta property="og:title" content="Gitrules">
    <meta property="og:description" content="Pastable superpowers for your codebases">
    <meta property="og:type" content="website">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Gitrules">
    <meta name="twitter:description" content="Pastable superpowers for your codebases">
    <title>{% block title %}Gitrules{% endblock %}</title>
    <link rel="icon" type="image/x-icon" href="/favicon.ico">
    <link rel="icon" type="image/png" sizes="32x32" href="/static/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/static/favicon-16x16.png">
    <link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon.png">
    <link rel="manifest" href="/static/site.webmanifest">
    <meta name="theme-color" content="#22D3EE">
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@200;300;400;500;600;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@7.4.47/css/materialdesignicons.min.css">
    {% include 'components/styles.html' %}
</head>
<body class="bg-gradient-to-br from-pink-50 to-cyan-50 min-h-screen flex flex-col" style="font-family: 'Plus Jakarta Sans', sans-serif;">
    {% include 'components/navbar.html' %}
    
    <main class="flex-1 w-full">
        <div class="max-w-none mx-auto px-4 py-20">
            {% block content %}{% endblock %}
        </div>
    </main>
    
    {% include 'components/footer.html' %}
</body>
</html>


================================================
File: app/templates/docs.html
================================================
{% extends "base.html" %}

{% block title %}Gitrules - How it works{% endblock %}

{% block content %}
<div style="margin-top: -5rem; margin-left: -1rem; margin-right: -1rem;">
    <!-- Hero Section -->
    <div class="hero-gradient border-b-2 border-black" style="padding-top: 2rem;">
        <div class="max-w-4xl mx-auto px-6 py-12">
            <h1 class="text-4xl sm:text-5xl font-black mb-6">
                Supercharge Claude with<br>
                <span class="text-cyan-500">CLAUDE.md</span> files and more
            </h1>
            <p class="text-xl text-gray-700 mb-4">
                Create <strong>CLAUDE.md</strong>, <strong>.cursorrules</strong>, and agent files that tell Claude exactly how to work on your codebase.
            </p>
            <p class="text-lg text-gray-600 mb-8">
                Drop them into your repo with a single command. Plain files your team owns.
            </p>
            
            <div class="flex flex-wrap gap-3">
                <div class="inline-block bg-cyan-50 border-2 border-cyan-400 px-4 py-2 shadow-[3px_3px_0px_0px_rgba(0,0,0,1)]">
                    <span class="text-sm font-bold">📝 CLAUDE.md</span>
                    <span class="text-sm ml-2">Project rules</span>
                </div>
                <div class="inline-block bg-pink-50 border-2 border-pink-400 px-4 py-2 shadow-[3px_3px_0px_0px_rgba(0,0,0,1)]">
                    <span class="text-sm font-bold">🧠 .claude/agents/</span>
                    <span class="text-sm ml-2">AI helpers</span>
                </div>
                <div class="inline-block bg-yellow-50 border-2 border-yellow-400 px-4 py-2 shadow-[3px_3px_0px_0px_rgba(0,0,0,1)]">
                    <span class="text-sm font-bold">🔌 .mcp.json</span>
                    <span class="text-sm ml-2">Claude plugins</span>
                </div>
            </div>
        </div>
    </div>

    <!-- Main Content -->
    <div class="max-w-4xl mx-auto px-6 py-12">
        
        <!-- Why This Matters -->
        <section class="docs-section p-6 mb-8">
            <h2 class="text-2xl font-black mb-4 flex items-center gap-2">
                <span class="text-pink-400">◆</span> Why this matters for Claude users
            </h2>
            <ul class="space-y-3 text-gray-700">
                <li class="flex items-start gap-2">
                    <span class="text-cyan-400 mt-1">▸</span>
                    <span>Claude & Claude Code automatically read <strong>CLAUDE.md</strong> files to understand your project's rules and conventions.</span>
                </li>
                <li class="flex items-start gap-2">
                    <span class="text-cyan-400 mt-1">▸</span>
                    <span>Today your instructions to Claude live in scattered chats and one-off prompts. Hard to share. Easy to lose.</span>
                </li>
                <li class="flex items-start gap-2">
                    <span class="text-cyan-400 mt-1">▸</span>
                    <span>Gitrules creates <strong>CLAUDE.md</strong> and other config files that make Claude work consistently for your whole team.</span>
                </li>
            </ul>
        </section>

        <!-- How It Works -->
        <section class="docs-section p-6 mb-8">
            <h2 class="text-2xl font-black mb-6 flex items-center gap-2">
                <span class="text-cyan-400">◆</span> How it works
            </h2>
            
            <div class="space-y-6">
                <div class="flex gap-4">
                    <div class="flex-shrink-0 w-12 h-12 bg-pink-400 border-2 border-black flex items-center justify-center font-black shadow-[2px_2px_0px_0px_rgba(0,0,0,1)]">
                        1
                    </div>
                    <div>
                        <h3 class="font-bold text-lg mb-2">Pick what you want</h3>
                        <p class="text-gray-700">Choose from simple building blocks:</p>
                        <ul class="mt-2 space-y-1 text-sm">
                            <li><strong>Guidelines</strong> - your "house rules" for coding and reviews</li>
                            <li><strong>Helpers</strong> - ready-made roles, like a "researcher" or "reviewer"</li>
                            <li><strong>Add-ons</strong> - optional extras—think "plugins" your AI can use</li>
                        </ul>
                    </div>
                </div>

                <div class="flex gap-4">
                    <div class="flex-shrink-0 w-12 h-12 bg-cyan-400 border-2 border-black flex items-center justify-center font-black shadow-[2px_2px_0px_0px_rgba(0,0,0,1)]">
                        2
                    </div>
                    <div>
                        <h3 class="font-bold text-lg mb-2">Tweak the text</h3>
                        <p class="text-gray-700">Open and edit the wording directly on the page—like writing a checklist or a policy in plain English.</p>
                    </div>
                </div>

                <div class="flex gap-4">
                    <div class="flex-shrink-0 w-12 h-12 bg-yellow-300 border-2 border-black flex items-center justify-center font-black shadow-[2px_2px_0px_0px_rgba(0,0,0,1)]">
                        3
                    </div>
                    <div>
                        <h3 class="font-bold text-lg mb-2">Install in your repo</h3>
                        <p class="text-gray-700">Copy one command. It creates the same files in your repository.</p>
                        <p class="text-gray-700 mt-1">No black box. You can read, version, and edit everything.</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- What Shows Up -->
        <section class="docs-section p-6 mb-8">
            <h2 class="text-2xl font-black mb-4 flex items-center gap-2">
                <span class="text-yellow-300">◆</span> Files Claude understands
            </h2>
            <div class="space-y-3">
                <div class="flex items-start gap-2">
                    <span class="text-green-500 font-bold mt-1">✓</span>
                    <div>
                        <strong>CLAUDE.md</strong> - Your project's house rules
                        <p class="text-gray-600 text-sm mt-1">Claude reads this automatically. Define coding standards, architecture patterns, and project-specific instructions.</p>
                    </div>
                </div>
                <div class="flex items-start gap-2">
                    <span class="text-green-500 font-bold mt-1">✓</span>
                    <div>
                        <strong>.claude/agents/*.yaml</strong> - Specialized AI helpers
                        <p class="text-gray-600 text-sm mt-1">Give Claude different "modes" like researcher, reviewer, or debugger.</p>
                    </div>
                </div>
                <div class="flex items-start gap-2">
                    <span class="text-green-500 font-bold mt-1">✓</span>
                    <div>
                        <strong>.mcp.json</strong> - Claude Code plugins (MCPs)
                        <p class="text-gray-600 text-sm mt-1">Add capabilities like database access, API integrations, and more.</p>
                    </div>
                </div>
            </div>
            <div class="mt-4 p-3 bg-cyan-100 border-2 border-cyan-400">
                <p class="text-sm">🎯 <strong>Claude Code reads these automatically:</strong> Just drop them in your repo and Claude instantly follows your rules.</p>
            </div>
        </section>

        <!-- Example Flows -->
        <section class="mb-8">
            <h2 class="text-2xl font-black mb-6">Simple example flows</h2>
            
            <div class="grid gap-4 md:grid-cols-2">
                <div class="example-flow p-4">
                    <h3 class="font-bold mb-3">A. "Make our AI code reviews consistent"</h3>
                    <ol class="space-y-2 text-sm">
                        <li>1. Add a <strong>Code Quality</strong> bundle.</li>
                        <li>2. Skim the checklist; edit anything in plain English.</li>
                        <li>3. Install.</li>
                    </ol>
                    <p class="text-sm text-gray-600 mt-3 pt-3 border-t border-gray-300">
                        → Now everyone's AI uses the same review standards.
                    </p>
                </div>
                
                <div class="example-flow p-4">
                    <h3 class="font-bold mb-3">B. "Give our AI a researcher persona"</h3>
                    <ol class="space-y-2 text-sm">
                        <li>1. Add a <strong>Researcher</strong> helper.</li>
                        <li>2. Personalize the brief ("be concise," "cite sources," etc.).</li>
                        <li>3. Install.</li>
                    </ol>
                    <p class="text-sm text-gray-600 mt-3 pt-3 border-t border-gray-300">
                        → Your AI now has a reusable, team-wide "research mode."
                    </p>
                </div>
            </div>
        </section>

        <!-- Safety & Control -->
        <section class="docs-section p-6 mb-8">
            <h2 class="text-2xl font-black mb-4 flex items-center gap-2">
                <span class="text-green-500">◆</span> Safety & control
            </h2>
            <div class="grid gap-4 md:grid-cols-3">
                <div class="text-center">
                    <div class="text-3xl mb-2">🛡️</div>
                    <h3 class="font-bold mb-1">You stay in charge</h3>
                    <p class="text-sm text-gray-600">Nothing touches your repo until you run the command.</p>
                </div>
                <div class="text-center">
                    <div class="text-3xl mb-2">👁️</div>
                    <h3 class="font-bold mb-1">Inspect first</h3>
                    <p class="text-sm text-gray-600">All content is visible before you install.</p>
                </div>
                <div class="text-center">
                    <div class="text-3xl mb-2">↩️</div>
                    <h3 class="font-bold mb-1">Easy to undo</h3>
                    <p class="text-sm text-gray-600">It's just files—use Git like always.</p>
                </div>
            </div>
        </section>

        <!-- Who It's For -->
        <section class="docs-section p-6 mb-8">
            <h2 class="text-2xl font-black mb-4 flex items-center gap-2">
                <span class="text-purple-500">◆</span> Who it's for
            </h2>
            <div class="space-y-3">
                <div class="p-3 bg-cyan-50 border-l-4 border-cyan-400">
                    <strong>Developers</strong> who want predictable AI help across projects.
                </div>
                <div class="p-3 bg-pink-50 border-l-4 border-pink-400">
                    <strong>Team leads</strong> who want shared standards the AI actually follows.
                </div>
                <div class="p-3 bg-yellow-50 border-l-4 border-yellow-400">
                    <strong>Newcomers</strong> who want results without learning prompt jargon.
                </div>
            </div>
        </section>

        <!-- FAQ -->
        <section class="mb-8">
            <h2 class="text-2xl font-black mb-6">FAQ</h2>
            
            <div class="space-y-4">
                <div class="faq-item pl-4 py-3">
                    <h3 class="font-bold mb-2">Do I need to know anything about "AI agents" or "MCPs"?</h3>
                    <p class="text-gray-700">No. You'll pick items with friendly names and edit normal text. The site handles the wiring.</p>
                </div>
                
                <div class="faq-item pl-4 py-3">
                    <h3 class="font-bold mb-2">What if our needs change?</h3>
                    <p class="text-gray-700">Edit the files in your repo. Reinstall, or just commit changes like any document.</p>
                </div>
                
                <div class="faq-item pl-4 py-3">
                    <h3 class="font-bold mb-2">Will this lock us in?</h3>
                    <p class="text-gray-700">No. The output is regular text files you own.</p>
                </div>
            </div>
        </section>

    </div>
</div>

{% endblock %}

{% block styles %}
<style>
    /* Override base template gradient for docs page */
    body {
        background: #f9fafb !important;
    }
    .docs-section {
        background: white;
        border: 2px solid black;
        box-shadow: 4px 4px 0px 0px rgba(0,0,0,1);
        transition: all 150ms ease;
    }
    .docs-section:hover {
        box-shadow: 6px 6px 0px 0px rgba(0,0,0,1);
        transform: translate(-1px, -1px);
    }
    .faq-item {
        border-left: 4px solid #F472B6;
    }
    .example-flow {
        background: #FCE7F3;
        border: 2px solid black;
        box-shadow: 3px 3px 0px 0px rgba(0,0,0,1);
    }
    .hero-gradient {
        background: linear-gradient(135deg, #ECFEFF 0%, #FCE7F3 100%);
    }
</style>
{% endblock %}


================================================
File: app/templates/index.html
================================================
{% extends "base.html" %}

{% block content %}
    {% include 'components/hero.html' %}

    <!-- Quick Actions -->
    {% include 'components/quick_actions.html' %}

    <!-- Three Panel Workspace -->
    {% include 'components/workspace.html' %}
    
    <!-- File Creation Modal -->
    {% include 'components/file_modal.html' %}
    
    <!-- Context Creation Modal -->
    {% include 'components/context_modal.html' %}
{% endblock %}


================================================
File: app/templates/install.sh.j2
================================================
#!/bin/bash
# Gitrules Installation Script
# Generated: {{ timestamp }}

echo "  ____ _ _   ____        _           "
echo " / ___(_) |_|  _ \\ _   _| | ___  ___ "
echo "| |  _| | __| |_) | | | | |/ _ \\/ __|"
echo "| |_| | | |_|  _ <| |_| | |  __/\\__ \\"
echo " \\____|_|\\__|_| \\_\\\\__,_|_|\\___||___/ "

echo ""

echo "This script will create/modify the following files:"
echo ""
{% for path in files -%}
echo "  - {{ path }}"
{% endfor -%}
echo ""
echo "Total files: {{ files|length }}"
echo ""
if [ -t 0 ]; then
    printf "Do you want to proceed? (Y/n): "
    read REPLY
    if [ "$REPLY" != "Y" ] && [ "$REPLY" != "y" ] && [ -n "$REPLY" ]; then
        echo "Installation cancelled."
        exit 1
    fi
else
    echo "Running in non-interactive mode, proceeding automatically..."
    echo ""
fi

echo ""
echo "Creating files..."
echo ""

# Create necessary directories
{% for dir in directories -%}
mkdir -p "{{ dir }}"
{% endfor -%}

{% for path, content in files.items() -%}
# Creating {{ path }}
cat > "{{ path }}" << 'GITRULES_EOF'
{{ content|safe }}{% if not content.endswith('\n') %}
{% endif %}GITRULES_EOF

{% endfor -%}
echo "Installation complete!"
echo ""
echo "Files have been created in your current directory."
{% if env_vars %}
echo ""
echo "⚠️  Environment Variables Required:"
{% for env_var in env_vars %}
echo "  - {{ env_var }}"
{% endfor %}
{% endif %}
echo ""


================================================
File: app/templates/components/ActionButton.html
================================================
<!-- ActionButton CSS-Only Component -->

<style>
/* Neo-Brutalist ActionButton Design Tokens */
:root {
    /* Base tokens */
    --ab-fg: #000000;                    /* Foreground text/icon color */
    --ab-border: #000000;                /* Outline color */
    --ab-shadow: #000000;                /* Backshadow color */
    --ab-shadow-x: 4px;                  /* Backshadow X offset */
    --ab-shadow-y: 4px;                  /* Backshadow Y offset */
    --ab-border-width: 2px;              /* Outline thickness */
    --ab-radius: 0;                      /* Corner radius (neo-brutalist = 0) */
    --ab-gap: 8px;                       /* Spacing between + block and label */
    --ab-focus-ring: #0891b2;            /* Focus ring color */
    --ab-plus-size: 40px;                /* + block size */
    --ab-height: 44px;                   /* Button height (accessibility) */
}

/* Base ActionButton styles */
.action-button {
    position: relative;
    display: flex;
    align-items: center;
    width: auto;
    min-height: var(--ab-height);
    background: #ffffff; /* Main button area is white */
    border: var(--ab-border-width) solid var(--ab-border);
    border-radius: var(--ab-radius);
    color: var(--ab-fg);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    padding: 0;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
    
    /* Neo-brutalist backshadow using box-shadow */
    box-shadow: var(--ab-shadow-x) var(--ab-shadow-y) 0 0 var(--ab-shadow);
    
    /* No default margins/padding that could interfere */
    margin: 0;
    outline: none;
}

/* Left + Block */
.action-button__plus {
    width: var(--ab-plus-size);
    height: var(--ab-plus-size);
    background: var(--ab-bg);
    border-right: var(--ab-border-width) solid var(--ab-border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
    color: var(--ab-fg);
}


/* Right Content Area */
.action-button__content {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--ab-gap);
    padding: 0 12px;
    min-height: var(--ab-plus-size);
}

.action-button__icon {
    font-size: 16px;
    line-height: 1;
    flex-shrink: 0;
}

.action-button__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.action-button__label {
    font-weight: 600;
    font-size: 14px;
    line-height: 1.2;
    color: var(--ab-fg);
}

.action-button__description {
    font-weight: 400;
    font-size: 11px;
    line-height: 1.2;
    color: var(--ab-fg);
    opacity: 0.8;
}

/* Interaction States */
.action-button:hover {
    transform: translate(-2px, -2px); /* Lift button up and away from shadow */
    box-shadow: calc(var(--ab-shadow-x) + 2px) calc(var(--ab-shadow-y) + 2px) 0 0 var(--ab-shadow);
}

.action-button:active {
    transform: translate(2px, 2px); /* Press button down towards shadow */
    box-shadow: calc(var(--ab-shadow-x) - 2px) calc(var(--ab-shadow-y) - 2px) 0 0 var(--ab-shadow);
    outline: none !important;
}

.action-button:focus,
.action-button:focus-visible {
    outline: none !important;
}

/* Disabled State */
.action-button--disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

/* Tone Variations (only affects + area color) */
.action-button--primary {
    --ab-bg: #22D3EE; /* Primary Blue */
}

.action-button--accent {
    --ab-bg: #F472B6; /* Primary Pink */
}

.action-button--secondary {
    --ab-bg: #eab308; /* yellow-500 */
}

.action-button--neutral {
    --ab-bg: #e5e7eb; /* gray-200 */
}

/* Utility Classes */
.action-button--full-width {
    width: 100%;
}

.action-button--compact {
    --ab-height: 36px;
    --ab-plus-size: 32px;
    font-size: 12px;
}

.action-button--large {
    --ab-height: 52px;
    --ab-plus-size: 48px;
    font-size: 16px;
}

/* Template button with description */
.action-button--template .action-button__content {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.action-button--template .action-button__description {
    font-weight: 400;
    font-size: 11px;
    line-height: 1.2;
    color: var(--ab-fg);
    opacity: 0.8;
}

/* Ensure consistent typography */
.action-button * {
    font-family: inherit;
}

/* Override any external styles that might interfere */
.action-button,
.action-button *,
.action-button::before,
.action-button::after {
    box-sizing: border-box;
}
</style>


================================================
File: app/templates/components/context_modal.html
================================================
<!-- Context Creation Modal -->
<div id="context-modal-overlay" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden">
    <div class="flex items-center justify-center min-h-screen p-4" onclick="closeContextModal()">
        <div id="context-modal" class="bg-white border-2 border-black shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] p-6 max-w-md w-full" onclick="event.stopPropagation()">
            <!-- Modal Header -->
            <h2 class="text-xl font-black text-black mb-4">Create new context</h2>
            
            <!-- Modal Body -->
            <div class="mb-6">
                <label for="context-name-input" class="block text-sm font-bold text-black mb-2">Context name</label>
                <input 
                    type="text" 
                    id="context-name-input" 
                    class="w-full px-3 py-2 border-2 border-black focus:outline-none"
                    placeholder="e.g. My Project"
                    autocomplete="off"
                />
                <div id="context-modal-error" class="text-red-600 text-sm mt-2 hidden"></div>
            </div>
            
            <!-- Modal Actions -->
            <div class="flex gap-2 justify-end">
                <button 
                    onclick="closeContextModal()" 
                    class="px-4 py-2 bg-gray-200 border-2 border-black text-black font-bold shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] hover:shadow-[3px_3px_0px_0px_rgba(0,0,0,1)] hover:translate-x-[-1px] hover:translate-y-[-1px] active:shadow-[1px_1px_0px_0px_rgba(0,0,0,1)] active:translate-x-[1px] active:translate-y-[1px] transition-all">
                    Cancel
                </button>
                <button 
                    onclick="submitContextModal()" 
                    class="px-4 py-2 bg-pink-400 border-2 border-black text-black font-bold shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] hover:shadow-[3px_3px_0px_0px_rgba(0,0,0,1)] hover:translate-x-[-1px] hover:translate-y-[-1px] active:shadow-[1px_1px_0px_0px_rgba(0,0,0,1)] active:translate-x-[1px] active:translate-y-[1px] transition-all">
                    Create
                </button>
            </div>
        </div>
    </div>
</div>

<script>
let contextModalCallback = null;
let previousContextFocusElement = null;

function openContextModal() {
    const modal = document.getElementById('context-modal-overlay');
    const input = document.getElementById('context-name-input');
    const error = document.getElementById('context-modal-error');
    
    // Reset any previous callback
    if (contextModalCallback) {
        contextModalCallback(null);
        contextModalCallback = null;
    }
    
    // Store the currently focused element
    previousContextFocusElement = document.activeElement;
    
    // Reset and show modal
    modal.classList.remove('hidden');
    error.classList.add('hidden');
    error.textContent = '';
    input.value = '';
    
    // Focus input
    setTimeout(() => {
        input.focus();
    }, 50);
    
    // Remove any existing event listeners
    input.onkeydown = null;
    
    // Handle Enter and Escape keys
    input.addEventListener('keydown', (e) => {
        if (e.key === 'Enter') {
            e.preventDefault();
            submitContextModal();
        } else if (e.key === 'Escape') {
            e.preventDefault();
            closeContextModal();
        }
    });
    
    return new Promise((resolve) => {
        contextModalCallback = resolve;
    });
}

function closeContextModal() {
    const modal = document.getElementById('context-modal-overlay');
    modal.classList.add('hidden');
    
    // Restore focus
    if (previousContextFocusElement) {
        previousContextFocusElement.focus();
    }
    
    if (contextModalCallback) {
        contextModalCallback(null);
        contextModalCallback = null;
    }
}

function submitContextModal() {
    const input = document.getElementById('context-name-input');
    const error = document.getElementById('context-modal-error');
    const contextName = input.value.trim();
    
    // Validation
    if (!contextName) {
        error.textContent = 'Please enter a context name';
        error.classList.remove('hidden');
        return;
    }
    
    // Check for invalid characters (very permissive for context names)
    if (contextName.length > 100) {
        error.textContent = 'Context name is too long (max 100 characters)';
        error.classList.remove('hidden');
        return;
    }
    
    // Close modal and return result
    const modal = document.getElementById('context-modal-overlay');
    modal.classList.add('hidden');
    
    // Restore focus
    if (previousContextFocusElement) {
        previousContextFocusElement.focus();
    }
    
    if (contextModalCallback) {
        contextModalCallback(contextName);
        contextModalCallback = null;
    }
}

// Export for global use
window.openContextModal = openContextModal;
window.closeContextModal = closeContextModal;
window.submitContextModal = submitContextModal;
</script>


================================================
File: app/templates/components/file_modal.html
================================================
<!-- File Creation Modal -->
<div id="file-modal-overlay" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden">
    <div class="flex items-center justify-center min-h-screen p-4" onclick="closeFileModal()">
        <div id="file-modal" class="bg-white border-2 border-black shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] p-6 max-w-md w-full" onclick="event.stopPropagation()">
            <!-- Modal Header -->
            <h2 class="text-xl font-black text-black mb-4">Create file</h2>
            
            <!-- Modal Body -->
            <div class="mb-6">
                <label for="file-path-input" class="block text-sm font-bold text-black mb-2">File path</label>
                <input 
                    type="text" 
                    id="file-path-input" 
                    class="w-full px-3 py-2 border-2 border-black focus:outline-none"
                    placeholder="e.g. truc/machin/bobo.py"
                    autocomplete="off"
                />
                <div id="file-modal-error" class="text-red-600 text-sm mt-2 hidden"></div>
            </div>
            
            <!-- Modal Actions -->
            <div class="flex gap-2 justify-end">
                <button 
                    onclick="closeFileModal()" 
                    class="px-4 py-2 bg-gray-200 border-2 border-black text-black font-bold shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] hover:shadow-[3px_3px_0px_0px_rgba(0,0,0,1)] hover:translate-x-[-1px] hover:translate-y-[-1px] active:shadow-[1px_1px_0px_0px_rgba(0,0,0,1)] active:translate-x-[1px] active:translate-y-[1px] transition-all">
                    Cancel
                </button>
                <button 
                    onclick="submitFileModal()" 
                    class="px-4 py-2 bg-cyan-400 border-2 border-black text-black font-bold shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] hover:shadow-[3px_3px_0px_0px_rgba(0,0,0,1)] hover:translate-x-[-1px] hover:translate-y-[-1px] active:shadow-[1px_1px_0px_0px_rgba(0,0,0,1)] active:translate-x-[1px] active:translate-y-[1px] transition-all">
                    Create
                </button>
            </div>
        </div>
    </div>
</div>

<script>
let fileModalCallback = null;
let previousFocusElement = null;

function openFileModal(basePath = '') {
    const modal = document.getElementById('file-modal-overlay');
    const input = document.getElementById('file-path-input');
    const error = document.getElementById('file-modal-error');
    
    // Reset any previous callback
    if (fileModalCallback) {
        fileModalCallback(null);
        fileModalCallback = null;
    }
    
    // Store the currently focused element
    previousFocusElement = document.activeElement;
    
    // Reset and show modal
    modal.classList.remove('hidden');
    error.classList.add('hidden');
    error.textContent = '';
    
    // Set initial value with basePath
    if (basePath) {
        input.value = basePath.endsWith('/') ? basePath : basePath + '/';
    } else {
        input.value = '';
    }
    
    // Focus input and position cursor at end
    setTimeout(() => {
        input.focus();
        input.setSelectionRange(input.value.length, input.value.length);
    }, 50);
    
    // Remove any existing event listeners
    input.onkeydown = null;
    
    // Handle Enter and Escape keys
    input.addEventListener('keydown', (e) => {
        if (e.key === 'Enter') {
            e.preventDefault();
            submitFileModal();
        } else if (e.key === 'Escape') {
            e.preventDefault();
            closeFileModal();
        }
    });
    
    return new Promise((resolve) => {
        fileModalCallback = resolve;
    });
}

function closeFileModal() {
    const modal = document.getElementById('file-modal-overlay');
    modal.classList.add('hidden');
    
    // Restore focus
    if (previousFocusElement) {
        previousFocusElement.focus();
    }
    
    if (fileModalCallback) {
        fileModalCallback(null);
        fileModalCallback = null;
    }
}

function submitFileModal() {
    const input = document.getElementById('file-path-input');
    const error = document.getElementById('file-modal-error');
    const fullPath = input.value.trim();
    
    // Validation
    if (!fullPath) {
        error.textContent = 'Please enter a file path';
        error.classList.remove('hidden');
        return;
    }
    
    // Check for invalid characters
    if (/[<>:"|?*]/.test(fullPath)) {
        error.textContent = 'File path contains invalid characters';
        error.classList.remove('hidden');
        return;
    }
    
    // Check for trailing slash
    if (fullPath.endsWith('/')) {
        error.textContent = 'File path cannot end with /';
        error.classList.remove('hidden');
        return;
    }
    
    // Check for double slashes
    if (fullPath.includes('//')) {
        error.textContent = 'File path contains empty segments';
        error.classList.remove('hidden');
        return;
    }
    
    // Close modal and return result
    const modal = document.getElementById('file-modal-overlay');
    modal.classList.add('hidden');
    
    // Restore focus
    if (previousFocusElement) {
        previousFocusElement.focus();
    }
    
    if (fileModalCallback) {
        fileModalCallback(fullPath);
        fileModalCallback = null;
    }
}

// Export for global use
window.openFileModal = openFileModal;
window.closeFileModal = closeFileModal;
window.submitFileModal = submitFileModal;
</script>


================================================
File: app/templates/components/footer.html
================================================
<footer class="w-full border-t-2 border-black bg-pink-100 py-4 mt-auto">
    <div class="max-w-4xl mx-auto px-4 text-center">
        <div class="flex items-center justify-center gap-2 mb-2">
            <span class="text-md font-black text-black">Gitrules</span>
        </div>
        <div class="text-xs text-black font-medium mt-1">
            <span>Version: 0.1.0</span>
        </div>
    </div>
</footer>


================================================
File: app/templates/components/hero.html
================================================
<div class="mb-8">
    <div class="w-full flex sm:flex-row flex-col justify-center sm:items-center relative">
        <h1 class="landing-page-title">
            <span class="block">Rules for </span>
            <span class="block">coding agents</span>
        </h1>
        <!-- Decorative logos positioned relative to the centered content -->
        <img src="/static/logo_blue.png" alt="Lightning" class="absolute flex-shrink-0 w-12 h-12 object-cover rotate-12 left-1/2 -translate-x-80 -translate-y-16 no-drag">
        <img src="/static/logo_pink.png" alt="Lightning" class="absolute flex-shrink-0 w-12 h-12 object-cover -rotate-12 left-1/2 translate-x-80 translate-y-16 no-drag">
    </div>
    <p class="intro-text mt-8">Augment your agents capabilities just by dropping files in your codebase.</p>
    <p class="intro-text mt-0">Easiest way to add MCPs, subagents and coding rules in your repository.</p>
</div>


================================================
File: app/templates/components/navbar.html
================================================
<header class="sticky top-0 bg-white border-b-2 border-black z-50 shadow-[2px_2px_0px_0px_rgba(0,0,0,1)]">
    <div class="max-w-4xl mx-auto px-4">
        <div class="flex justify-between items-center h-16">
            <div class="flex items-center gap-2">
                <h1 class="text-xl font-black tracking-tight">
                    <a href="/" class="hover:opacity-80 transition-opacity">
                        <span class="text-black">Git</span><span class="text-pink-500">rules</span>
                    </a>
                </h1>
            </div>
            <nav class="flex items-center gap-3">
                <a
                  href="/doc"
                  class="bg-cyan-400 text-black border-2 border-black shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] font-semibold hover:shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] hover:translate-x-[-2px] hover:translate-y-[-2px] active:shadow-[1px_1px_0px_0px_rgba(0,0,0,1)] active:translate-x-[1px] active:translate-y-[1px] transition-all px-3 py-1.5 text-sm"
                >
                  How it works
                </a>
                <a
                  href="https://github.com/coderamp-labs/gitrules"
                  target="_blank"
                  rel="noopener noreferrer"
                  class="bg-white text-black border-2 border-black shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] font-semibold hover:shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] hover:translate-x-[-2px] hover:translate-y-[-2px] active:shadow-[1px_1px_0px_0px_rgba(0,0,0,1)] active:translate-x-[1px] active:translate-y-[1px] transition-all px-3 py-1.5 flex items-center gap-2 text-sm"
                >
                  <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                    <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
                  </svg>
                  GitHub
                </a>
              </nav>
              
        </div>
    </div>
</header>


================================================
File: app/templates/components/quick_actions.html
================================================
<!-- Include ActionButton Component -->
{% include 'components/ActionButton.html' %}

<div id="quick-actions-section" class="bg-cyan-50 border-2 border-black shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] p-4 max-w-4xl mx-auto transition-opacity duration-300">
    <!-- Header -->
    <div class="mb-4">
        <h2 class="text-xl font-black text-black mb-1">Quick start</h2>
        <!-- <p class="text-black font-medium text-sm">Pick an add-on to start with</p> -->
    </div>

    <!-- Repository Analysis Section -->
    <div class="pb-4">
            <div class="flex gap-2">
                <input 
                    id="repo-url-input"
                    type="url" 
                    placeholder="https://github.com/user/repository"
                    class="flex-1 px-3 py-1.5 text-sm border-2 border-black shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] focus:shadow-[3px_3px_0px_0px_rgba(0,0,0,1)] focus:translate-x-[-1px] focus:translate-y-[-1px] transition-all focus:outline-none"
                />
                <button 
                    id="analyze-repo-btn"
                    onclick="analyzeRepository()"
                    class="px-4 py-1.5 bg-pink-400 border-2 border-black text-black font-bold text-sm shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] hover:shadow-[3px_3px_0px_0px_rgba(0,0,0,1)] hover:translate-x-[-1px] hover:translate-y-[-1px] active:shadow-[1px_1px_0px_0px_rgba(0,0,0,1)] active:translate-x-[0.5px] active:translate-y-[0.5px] transition-all disabled:opacity-50 disabled:cursor-not-allowed whitespace-nowrap"
                >
                    🚀 Analyze
                </button>
            </div>
            <!-- Loading State -->
            <div id="analysis-loading" class="hidden mt-2">
                <div class="bg-yellow-50 border-2 border-yellow-400 p-2 text-center text-sm">
                    <div class="inline-block animate-spin mr-1">⚙️</div>
                    <span class="font-bold">Analyzing repository...</span>
                    <p class="text-sm mt-1">This may take a few moments depending on repository size.</p>
                </div>
            </div>
            <!-- Results Display -->
            <div id="analysis-results" class="hidden mt-2">
                <div class="bg-cyan-50 border-2 border-cyan-400 p-2">
                    <h4 class="font-bold text-sm mb-1">Analysis Results:</h4>
                    <div id="results-content" class="text-xs whitespace-pre-wrap max-h-40 overflow-y-auto"></div>
                </div>
            </div>
            <!-- Error Display -->
            <div id="analysis-error" class="hidden mt-2">
                <div class="bg-red-50 border-2 border-red-400 p-2">
                    <h4 class="font-bold text-sm mb-1 text-red-700">Error:</h4>
                    <div id="error-content" class="text-xs text-red-600"></div>
                </div>
            </div>
    </div>

    <!-- Delimiter -->
    <div class="border-t-2 border-black my-4"></div>

    <!-- Rules Section -->
    <div class="mb-4">
            <div class="text-sm font-black text-black flex items-center gap-1 mb-1">
                <span class="text-sm">📋</span> Rules
            </div>
            <div id="rules-container" class="flex flex-wrap gap-2">
                {% for rule in rules[:4] %}
                <button class="action-button action-button--accent" onclick="addRule('{{ rule.slug or rule.name }}')">
                    <div class="action-button__plus">+</div>
                    <div class="action-button__content">
                        <span class="action-button__label">{{ rule.display_name or rule.name }}</span>
                    </div>
                </button>
                {% endfor %}
                {% if not rules %}
                <!-- Placeholder if no rules available -->
                <button class="action-button action-button--accent opacity-50 cursor-not-allowed" disabled>
                    <div class="action-button__plus">+</div>
                    <div class="action-button__content">
                        <span class="action-button__label">No rules available</span>
                    </div>
                </button>
                {% endif %}
            </div>
    </div>
    
    <!-- Agents Section -->
    <div class="pb-4">
            <div class="text-sm font-black text-black flex items-center gap-1 mb-1">
                <span class="text-sm">🤖</span> Agents
            </div>
            <div id="agents-container" class="flex flex-wrap gap-2">
                {% for agent in agents[:4] %}
                <button class="action-button action-button--primary" onclick="addAgent('{{ agent.slug or agent.name }}')">
                    <div class="action-button__plus">+</div>
                    <div class="action-button__content">
                        <span class="action-button__label">{{ agent.display_name or agent.name }}</span>
                    </div>
                </button>
                {% endfor %}
                {% if not agents %}
                <!-- Placeholder if no agents available -->
                <button class="action-button action-button--primary opacity-50 cursor-not-allowed" disabled>
                    <div class="action-button__plus">+</div>
                    <div class="action-button__content">
                        <span class="action-button__label">No agents available</span>
                    </div>
                </button>
                {% endif %}
            </div>
    </div>

    <!-- Delimiter -->
    <div class="border-t-2 border-black my-4"></div>

    <!-- New Rules Section -->
    <div class="pt-2">
            <h3 class="text-sm font-black text-black mb-2 flex items-center gap-1">
                <span class="text-sm">📄</span> New rules
            </h3>
            <div>
                <button class="action-button action-button--neutral action-button--full-width action-button--large" onclick="startFromScratch()">
                    <div class="action-button__plus">+</div>
                    <div class="action-button__content">
                        <span class="action-button__label">Start from scratch</span>
                    </div>
                </button>
            </div>
    </div>

    <!-- Back Button (hidden initially) -->
    <div style="margin: 4px; display: none;" id="back-btn-container">
        <button class="action-button action-button--neutral action-button--full-width" onclick="hideWorkspace()">
            <div class="action-button__plus">+</div>
            <div class="action-button__content">
                <span class="action-button__icon">←</span>
                <span class="action-button__label">Back to Quick Actions</span>
            </div>
        </button>
    </div>
</div>

<script>

// Global state
let isWorkspaceVisible = false;

// Cache for actions data
let actionsCache = null;

// Initialize on page load
document.addEventListener('DOMContentLoaded', function() {
    const workspaceSection = document.querySelector('.workspace-container');
    if (workspaceSection) {
        workspaceSection.style.display = 'none';
        workspaceSection.style.transition = 'opacity 300ms ease-in-out';
    }
    
    // Add Enter key handler for repo input
    const repoInput = document.getElementById('repo-url-input');
    if (repoInput) {
        repoInput.addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                analyzeRepository();
            }
        });
    }
});


// Render actions from data
function renderActions(data) {
    try {
        
        // Render agents (max 4)
        const agentsContainer = document.getElementById('agents-container');
        if (agentsContainer && data.agents) {
            agentsContainer.innerHTML = data.agents.slice(0, 4).map(agent => {
                const itemId = agent.slug || agent.name;
                const displayName = agent.display_name || agent.name;
                return `
                    <button class="action-button action-button--primary" onclick="addAgent('${itemId}')">
                        <div class="action-button__plus">+</div>
                        <div class="action-button__content">
                            <span class="action-button__label">${displayName}</span>
                        </div>
                    </button>
                `;
            }).join('');
        }
        
        // Render MCPs (max 4)
        const mcpsContainer = document.getElementById('mcps-container');
        if (mcpsContainer && data.mcps) {
            mcpsContainer.innerHTML = data.mcps.slice(0, 4).map(mcp => `
                <button class="action-button action-button--secondary" onclick="addMCP('${mcp.name}')">
                    <div class="action-button__plus">+</div>
                    <div class="action-button__content">
                        <span class="action-button__label">${mcp.name}</span>
                    </div>
                </button>
            `).join('');
        }
        
        // Render rules (max 4)
        const rulesContainer = document.getElementById('rules-container');
        if (rulesContainer && data.rules) {
            rulesContainer.innerHTML = data.rules.slice(0, 4).map(rule => {
                const itemId = rule.slug || rule.name;
                const displayName = rule.display_name || rule.name;
                return `
                    <button class="action-button action-button--accent" onclick="addRule('${itemId}')">
                        <div class="action-button__plus">+</div>
                        <div class="action-button__content">
                            <span class="action-button__label">${displayName}</span>
                        </div>
                    </button>
                `;
            }).join('');
        }
    } catch (error) {
        console.error('Error loading actions:', error);
        // Show error state
        ['agents-container', 'mcps-container', 'rules-container'].forEach(id => {
            const container = document.getElementById(id);
            if (container) {
                container.innerHTML = '<div class="text-xs text-red-500">Failed to load</div>';
            }
        });
    }
}

// Action functions with template mapping


// Start from scratch with empty context
function startFromScratch() {
    createNewContextFromScratch();
}


// Create a new empty context from scratch
function createNewContextFromScratch() {
    if (!window.workspaceManager) {
        console.error('WorkspaceManager not available');
        return;
    }
    
    // Generate unique context ID
    const timestamp = Date.now();
    const contextId = `scratch-${timestamp}`;
    const contextName = `From Scratch - ${new Date().toLocaleString()}`;
    
    // Create new context
    if (workspaceManager.createContext(contextId, contextName)) {
        // Switch to new context (it will be empty by default)
        workspaceManager.switchContext(contextId);
        
        // Show workspace
        showWorkspace();
    } else {
        console.error('Failed to create new context');
    }
}

// Action functions that use backend data
function addAgent(name) {
    createNewContextAndInstallAgent(name);
}

function addRule(name) {
    createNewContextAndInsertRule(name);
}

function addMCP(name) {
    createNewContextAndInstallMCP(name);
}

// New context creation functions that use the same API as workspace
function createNewContextAndInstallAgent(agentName) {
    if (!window.workspaceManager) {
        console.error('WorkspaceManager not available');
        return;
    }
    
    // Generate unique context ID
    const timestamp = Date.now();
    const contextId = `agent-${timestamp}`;
    const contextName = `${agentName} - ${new Date().toLocaleString()}`;
    
    // Create new context
    if (workspaceManager.createContext(contextId, contextName)) {
        // Switch to new context
        workspaceManager.switchContext(contextId);
        
        // Initialize the state to activate the agents category and check the specific agent
        const state = workspaceManager.getState();
        if (state) {
            // Activate the agents category
            state.setActionCategoryState('agents', true);
            // Mark the specific agent as checked
            state.setActionItemState('agents', agentName, true);
        }
        
        // Install agent using the same function as workspace sidebar
        installAgentInContext(agentName);
        
        // Show workspace with agents section in focus
        showWorkspace('agents', agentName);
    } else {
        console.error('Failed to create new context');
    }
}

function createNewContextAndInstallMCP(mcpName) {
    if (!window.workspaceManager) {
        console.error('WorkspaceManager not available');
        return;
    }
    
    // Generate unique context ID
    const timestamp = Date.now();
    const contextId = `mcp-${timestamp}`;
    const contextName = `${mcpName} - ${new Date().toLocaleString()}`;
    
    // Create new context
    if (workspaceManager.createContext(contextId, contextName)) {
        // Switch to new context
        workspaceManager.switchContext(contextId);
        
        // Initialize the state to activate the MCPs category and check the specific MCP
        const state = workspaceManager.getState();
        if (state) {
            // Activate the MCPs category
            state.setActionCategoryState('mcps', true);
            // Mark the specific MCP as checked
            state.setActionItemState('mcps', mcpName, true);
        }
        
        // Install MCP using the same function as workspace sidebar
        installMCPInContext(mcpName);
        
        // Show workspace with MCPs section in focus
        showWorkspace('mcps', mcpName);
    } else {
        console.error('Failed to create new context');
    }
}

function createNewContextAndInsertRule(ruleName) {
    if (!window.workspaceManager) {
        console.error('WorkspaceManager not available');
        return;
    }
    
    // Generate unique context ID
    const timestamp = Date.now();
    const contextId = `rule-${timestamp}`;
    const contextName = `${ruleName} - ${new Date().toLocaleString()}`;
    
    // Create new context
    if (workspaceManager.createContext(contextId, contextName)) {
        // Switch to new context
        workspaceManager.switchContext(contextId);
        
        // Initialize the state to activate the rules category and check the specific rule
        const state = workspaceManager.getState();
        if (state) {
            // Activate the rules category
            state.setActionCategoryState('rules', true);
            // Mark the specific rule as checked
            state.setActionItemState('rules', ruleName, true);
        }
        
        // Insert rule text directly into editor
        insertRuleInContext(ruleName);
        
        // Show workspace with rules section in focus
        showWorkspace('rules', ruleName);
    } else {
        console.error('Failed to create new context');
    }
}

// Helper functions that use the same API as workspace sidebar
async function installAgentInContext(agentName) {
    try {
        const response = await fetch(`/api/agents/${encodeURIComponent(agentName)}`);
        
        if (response.ok) {
            const data = await response.json();
            const result = data.agents && data.agents[0]; // Get first agent from array
            
            if (result && window.workspaceManager) {
                const state = window.workspaceManager.getState();
                if (state) {
                    // Store agent name to path mapping in metadata (for easier removal)
                    if (!state.agentMappings) {
                        state.agentMappings = {};
                    }
                    const agentPath = `.claude/agents/${result.filename}`;
                    state.agentMappings[agentName] = agentPath;
                    
                    // Mark the agent as checked in action state
                    state.setActionItemState('agents', agentName, true);
                }
                
                // Use includeFile which properly handles saving and rendering
                const agentPath = `.claude/agents/${result.filename}`;
                window.workspaceManager.includeFile(agentPath, result.content);
            }
        } else {
            const error = await response.json();
            console.error(`Error: ${error.detail}`);
        }
    } catch (error) {
        console.error(`Error installing agent: ${error.message}`);
    }
}

async function installMCPInContext(mcpName) {
    try {
        // Get current .mcp.json content from workspace
        let currentConfig = {};
        if (window.workspaceManager && window.workspaceManager.getState()) {
            const mcpFile = window.workspaceManager.getState().files['.mcp.json'];
            if (mcpFile) {
                try {
                    currentConfig = JSON.parse(mcpFile);
                } catch (e) {
                    currentConfig = {};
                }
            }
        }
        
        const response = await fetch(`/api/mcps/${encodeURIComponent(mcpName)}`);
        
        if (response.ok) {
            const data = await response.json();
            const result = data.mcps && data.mcps[0]; // Get first MCP from array
            
            if (result && result.config && window.workspaceManager) {
                const state = window.workspaceManager.getState();
                if (state) {
                    // Mark the MCP as checked in action state
                    state.setActionItemState('mcps', mcpName, true);
                }
                
                // Ensure mcpServers exists and add the new MCP
                if (!currentConfig.mcpServers) {
                    currentConfig.mcpServers = {};
                }
                currentConfig.mcpServers[mcpName] = result.config;
                
                // Use includeFile which properly handles saving and rendering
                window.workspaceManager.includeFile('.mcp.json', JSON.stringify(currentConfig, null, 2));
            }
        } else {
            const error = await response.json();
            console.error(`Error: ${error.detail}`);
        }
    } catch (error) {
        console.error(`Error installing MCP: ${error.message}`);
    }
}

async function insertRuleInContext(ruleName) {
    try {
        const response = await fetch(`/api/rules/${encodeURIComponent(ruleName)}`);
        
        if (response.ok) {
            const data = await response.json();
            const result = data.rules && data.rules[0]; // Get first rule from array
            
            if (result && result.content) {
                // Get current CLAUDE.md content from workspace
                let currentContent = '';
                if (window.workspaceManager && window.workspaceManager.getState()) {
                    const claudeFile = window.workspaceManager.getState().files['CLAUDE.md'];
                    if (claudeFile) {
                        currentContent = claudeFile;
                    }
                }
                
                // Add rule content to CLAUDE.md (no toggle behavior for quick start)
                const ruleContent = result.content.trim();
                const newContent = currentContent + (currentContent ? '\n' : '') + ruleContent;
                
                if (window.workspaceManager) {
                    const state = window.workspaceManager.getState();
                    if (state) {
                        // Mark the rule as checked in action state
                        state.setActionItemState('rules', ruleName, true);
                    }
                    // Use includeFile which properly handles saving and rendering
                    window.workspaceManager.includeFile('CLAUDE.md', newContent);
                }
            }
        } else {
            const error = await response.json();
            console.error(`Error: ${error.detail}`);
        }
    } catch (error) {
        console.error(`Error installing rule: ${error.message}`);
    }
}

// Show workspace with fade transition and focus on specific section
function showWorkspace(focusSection = null, focusItem = null) {
    const quickActionsSection = document.getElementById('quick-actions-section');
    const workspaceSection = document.querySelector('.workspace-container');
    const backButtonContainer = document.getElementById('back-btn-container');
    
    if (!workspaceSection) {
        console.error('Workspace section not found');
        return;
    }
    
    // Fade out quick actions
    quickActionsSection.style.opacity = '0';
    
    setTimeout(() => {
        // Hide quick actions and show workspace
        quickActionsSection.style.display = 'none';
        workspaceSection.style.display = 'block';
        workspaceSection.style.opacity = '0';
        
        // Scroll to workspace to focus on it (ensuring top is visible)
        setTimeout(() => {
            const rect = workspaceSection.getBoundingClientRect();
            const currentScrollTop = window.pageYOffset;
            const workspaceTop = currentScrollTop + rect.top;
            const navbarHeight = 64; // h-16 = 64px
            const buffer = 20; // Small buffer below navbar
            const targetScrollTop = Math.max(0, workspaceTop - navbarHeight - buffer);
            
            window.scrollTo({ top: targetScrollTop, behavior: 'smooth' });
        }, 100);
        
        // Show back button
        if (backButtonContainer) {
            backButtonContainer.style.display = 'block';
        }
        
        // Fade in workspace
        setTimeout(() => {
            workspaceSection.style.opacity = '1';
            isWorkspaceVisible = true;
            
            // Clear the editor and set focus
            clearEditorAndFocus();
            
            // Expand the relevant section if specified
            if (focusSection) {
                expandWorkspaceSection(focusSection, focusItem);
            }
        }, 50);
    }, 300);
}

// Clear editor and set focus when workspace appears
function clearEditorAndFocus() {
    // Auto-focus first file if available, otherwise clear editor
    if (window.workspaceManager && window.workspaceManager.currentState) {
        const state = window.workspaceManager.currentState;
        const fileKeys = Object.keys(state.files);
        
        if (fileKeys.length > 0) {
            // Auto-select the first file
            const firstFile = fileKeys[0];
            state.selectedFile = firstFile;
            window.workspaceManager.saveState(window.workspaceManager.currentContextId);
            
            // Load the first file in editor
            if (window.workspaceMonacoEditor && state.files[firstFile]) {
                window.workspaceMonacoEditor.setValue(state.files[firstFile]);
                window.workspaceMonacoEditor.focus();
            }
            
            // Update file path label
            if (window.updateFilePathLabel) {
                window.updateFilePathLabel(firstFile);
            }
        } else {
            // No files available - clear everything
            state.selectedFile = null;
            window.workspaceManager.saveState(window.workspaceManager.currentContextId);
            
            // Clear and focus the monaco editor
            if (window.workspaceMonacoEditor) {
                window.workspaceMonacoEditor.setValue('');
                window.workspaceMonacoEditor.focus();
            }
            
            // Update file path label to show no file selected
            if (window.updateFilePathLabel) {
                window.updateFilePathLabel(null);
            }
        }
    }
    
    // Re-render file tree to show selection
    if (window.renderFileTree) {
        window.renderFileTree();
    }
}

// Expand the relevant workspace section and show it in priority
function expandWorkspaceSection(sectionType, itemName) {
    // Wait a bit for the workspace to be fully rendered
    setTimeout(() => {
        // First restore the action states to ensure UI is in sync
        if (window.restoreActionStates) {
            window.restoreActionStates();
        }
        
        // Then wait a bit more for the UI to update before interacting
        setTimeout(() => {
            if (sectionType === 'agents') {
                // Make sure the dropdown data is loaded for agents
                if (window.loadDropdownData) {
                    window.loadDropdownData('agents');
                }
            } else if (sectionType === 'mcps') {
                // Make sure the dropdown data is loaded for MCPs
                if (window.loadDropdownData) {
                    window.loadDropdownData('mcps');
                }
            } else if (sectionType === 'rules') {
                // Make sure the dropdown data is loaded for rules
                if (window.loadDropdownData) {
                    window.loadDropdownData('rules');
                }
            }
            
            // Scroll to the workspace actions panel to show it in priority
            const workspaceActions = document.querySelector('.workspace-actions');
            if (workspaceActions) {
                // Get the position of the workspace actions panel
                const rect = workspaceActions.getBoundingClientRect();
                const currentScrollTop = window.pageYOffset;
                const actionsTop = currentScrollTop + rect.top;
                const navbarHeight = 64; // h-16 = 64px
                const buffer = 20; // Small buffer below navbar
                const targetScrollTop = Math.max(0, actionsTop - navbarHeight - buffer);
                
                // Smooth scroll to the actions panel
                window.scrollTo({ top: targetScrollTop, behavior: 'smooth' });
            }
        }, 100);
    }, 200);
}

// Hide workspace with fade transition
function hideWorkspace() {
    const quickActionsSection = document.getElementById('quick-actions-section');
    const workspaceSection = document.querySelector('.workspace-container');
    const backButtonContainer = document.getElementById('back-btn-container');
    
    if (!workspaceSection) {
        console.error('Workspace section not found');
        return;
    }
    
    // Fade out workspace
    workspaceSection.style.opacity = '0';
    
    setTimeout(() => {
        // Hide workspace and show quick actions
        workspaceSection.style.display = 'none';
        quickActionsSection.style.display = 'block';
        quickActionsSection.style.opacity = '0';
        
        // Hide back button
        if (backButtonContainer) {
            backButtonContainer.style.display = 'none';
        }
        
        // Fade in quick actions
        setTimeout(() => {
            quickActionsSection.style.opacity = '1';
            isWorkspaceVisible = false;
        }, 50);
    }, 300);
}

// Repository Analysis Function
async function analyzeRepository() {
    // Get input value
    const repoUrl = document.getElementById('repo-url-input').value.trim();
    
    // Validate required field
    if (!repoUrl) {
        alert('Please enter a repository URL');
        return;
    }
    
    // Default prompt for comprehensive analysis
    const defaultPrompt = 'Analyze this repository and provide a comprehensive overview including architecture, code quality, security considerations, and improvement suggestions.';
    
    // Show loading state
    const button = document.getElementById('analyze-repo-btn');
    const loading = document.getElementById('analysis-loading');
    const results = document.getElementById('analysis-results');
    const error = document.getElementById('analysis-error');
    
    button.disabled = true;
    loading.classList.remove('hidden');
    results.classList.add('hidden');
    error.classList.add('hidden');
    
    try {
        // Update loading message for ingestion
        loading.querySelector('span.font-bold').textContent = 'Ingesting repository...';
        loading.querySelector('p.text-sm').textContent = 'Fetching and processing repository content.';
        
        // Step 1: Ingest the repository
        const ingestResponse = await fetch('/api/ingest', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                repo_url: repoUrl
            })
        });
        
        const ingestData = await ingestResponse.json();
        
        if (!ingestResponse.ok || !ingestData.success) {
            throw new Error(ingestData.detail || 'Failed to ingest repository');
        }
        
        // Update loading message for analysis
        loading.querySelector('span.font-bold').textContent = 'Analyzing with AI...';
        loading.querySelector('p.text-sm').textContent = `Processing ${Math.round(ingestData.context_size / 1000)}k characters of repository data.`;
        
        // Step 2: Analyze the context
        const analyzeResponse = await fetch('/api/analyze', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                context: ingestData.message,
                user_prompt: defaultPrompt
            })
        });
        
        const analyzeData = await analyzeResponse.json();
        
        if (analyzeResponse.ok && analyzeData.success) {
            // Show results
            document.getElementById('results-content').textContent = analyzeData.analysis;
            results.classList.remove('hidden');
        } else {
            throw new Error(analyzeData.detail || 'Failed to analyze repository');
        }
    } catch (err) {
        // Show error
        document.getElementById('error-content').textContent = err.message || 'An unexpected error occurred';
        error.classList.remove('hidden');
    } finally {
        // Hide loading state and reset message
        button.disabled = false;
        loading.classList.add('hidden');
        loading.querySelector('span.font-bold').textContent = 'Analyzing repository...';
        loading.querySelector('p.text-sm').textContent = 'This may take a few moments depending on repository size.';
    }
}
</script>


================================================
File: app/templates/components/styles.html
================================================
<style type="text/tailwindcss">
    /* Global font family */
    * {
        font-family: 'Plus Jakarta Sans', sans-serif !important;
    }
    
    @layer components {
        .badge-new {
            @apply inline-block -rotate-6 -translate-y-1 mx-1 px-2 py-1 bg-pink-400 border-2 border-black text-black text-[10px] font-black shadow-[2px_2px_0px_0px_rgba(0,0,0,1)];
        }
        .landing-page-title {
            @apply inline-block w-full relative text-center text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-black tracking-tight leading-none;
            font-family: 'Plus Jakarta Sans', sans-serif;
            font-weight: 800;
            letter-spacing: -0.01em;
        }
        .intro-text {
            @apply text-center text-black text-sm max-w-2xl mx-auto font-medium leading-relaxed;
        }
        .sparkle-cyan {
            @apply absolute flex-shrink-0 w-8 h-8 bg-cyan-400 border-2 border-black flex items-center justify-center rotate-12 shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] left-0 lg:ml-20 -translate-x-2 md:translate-x-6 lg:-translate-x-full -translate-y-2 sm:-translate-y-4 md:-translate-y-0 lg:-translate-y-6;
        }
        .sparkle-pink {
            @apply absolute flex-shrink-0 w-8 h-8 bg-pink-400 border-2 border-black flex items-center justify-center -rotate-12 shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] right-0 bottom-0 -translate-x-6 lg:-translate-x-8 translate-y-2 sm:translate-y-6 md:translate-y-2 lg:translate-y-4;
        }
        .card {
            @apply relative;
        }
        .card::before {
            @apply content-[''] absolute inset-0 bg-black translate-y-1 translate-x-1;
        }
        .card-inner {
            @apply relative z-20 border-2 border-black shadow-[4px_4px_0px_0px_rgba(0,0,0,1)];
        }
        .btn-brutalist {
            @apply bg-white border-2 border-black text-black font-bold shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] hover:shadow-[1px_1px_0px_0px_rgba(0,0,0,1)] hover:translate-x-[1px] hover:translate-y-[1px] transition-all;
        }
        .delimiter-column {
            @apply relative;
        }
        .delimiter-column::before {
            @apply content-[''] absolute left-0 top-1/2 -translate-y-1/2 w-px h-16 bg-gray-300 hidden md:block;
        }
        .delimiter-column::after {
            @apply content-[''] absolute right-0 top-1/2 -translate-y-1/2 w-px h-16 bg-gray-300 hidden md:block;
        }
        .quick-start-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 0.75rem;
            align-items: stretch;
        }
        .quick-start-grid > * {
            min-width: 0;
            box-sizing: border-box;
        }
        @media (max-width: 360px) {
            .quick-start-grid {
                grid-template-columns: 1fr;
            }
        }
        .workspace-container {
            margin: 4rem auto;
            padding-bottom: 2rem;
            width: 70%;
            max-width: 1800px;
            position: relative;
        }
        /* Medium screens - gradually increase width as screen gets smaller */
        @media (max-width: 1400px) {
            .workspace-container {
                width: 80%;
            }
        }
        @media (max-width: 1200px) {
            .workspace-container {
                width: 90%;
            }
        }
        @media (max-width: 1000px) {
            .workspace-container {
                width: 95%;
            }
        }
        .workspace-inner {
            width: 100%;
            padding: 0 1rem;
        }
        /* Three-panel workspace layout using Flexbox */
        .workspace-grid {
            display: flex;
            min-height: 600px;
            height: 100%;
            width: 100%;
            gap: 0; /* No gaps - panels share borders */
        }
        
        /* FileTree panel (left) - 24% of container width */
        .workspace-sidebar {
            flex: 1.2 1 24%;     /* Takes 24% of available width */
            min-width: 240px;    /* Minimum: 240px */
            max-width: 380px;    /* Maximum: 380px */
            overflow: hidden;    /* Changed from auto to hidden since inner divs handle scroll */
            display: flex;
            flex-direction: column;
        }
        
        /* Editor panel (center) - 52% of container width */
        .workspace-center {
            flex: 2.2 1 52%;     /* Takes 52% of available width */
            min-width: 380px;    /* Minimum: 380px */
            overflow: hidden;
        }
        
        /* QuickActions panel (right) - 24% of container width */
        .workspace-actions {
            flex: 1.2 1 24%;     /* Takes 24% of available width */
            min-width: 240px;    /* Minimum: 240px */
            max-width: 380px;    /* Maximum: 380px */
            overflow: auto;
        }
        
        /* Medium screens - compress mainly the editor */
        @media (max-width: 1200px) {
            .workspace-center {
                min-width: 350px;
            }
        }
        
        @media (max-width: 1000px) {
            .workspace-center {
                min-width: 300px;
            }
        }
        
        @media (max-width: 900px) {
            .workspace-center {
                min-width: 250px;
            }
            .workspace-sidebar,
            .workspace-actions {
                min-width: 180px;
            }
        }
        /* When total min-widths exceed container, allow horizontal scroll */
        @media (max-width: 800px) {
            .workspace-grid {
                min-width: 610px; /* 180px + 250px + 180px = compressed minimum */
                overflow-x: auto;
            }
        }
        @media (max-width: 768px) {
            .workspace-grid {
                flex-direction: column;
                min-height: auto;
                min-width: auto;
                overflow-x: visible;
            }
            .workspace-sidebar,
            .workspace-center,
            .workspace-actions {
                flex: 1 1 auto;
                min-width: 100%;
                max-width: 100%;
                min-height: 300px;
            }
        }
        @media (max-width: 640px) {
            .workspace-container {
                margin: 2rem auto;
                padding-bottom: 2rem;
            }
            .workspace-inner {
                padding: 0 0.5rem;
            }
            .workspace-grid {
                min-height: 200px;
            }
            .workspace-sidebar,
            .workspace-center,
            .workspace-actions {
                min-height: 200px;
            }
        }
        .agent-tabs {
            display: inline-flex;
            gap: 0;
            align-items: stretch;
        }
        .agent-tabs .tab-button {
            margin: 0;
            border-radius: 0;
            position: relative;
        }
        .agent-tabs .tab-button:not(:last-child) {
            border-right: none;
        }
        .agent-tabs .tab-button:last-child {
            border-right: 2px solid black;
        }
        .agent-tabs .tab-button.active {
            transform: translateY(-2px);
            box-shadow: 4px 4px 0px 0px rgba(0,0,0,1) !important;
            z-index: 20;
            border-right: 2px solid black;
        }
        .agent-tabs .tab-button:not(.active) {
            transform: translateY(0px);
            z-index: 10;
        }
        .agent-tabs .tab-button:not(.active):hover {
            transform: translateY(-1px) !important;
            box-shadow: 3px 3px 0px 0px rgba(0,0,0,0.7) !important;
        }
    }
    @layer utilities {
        .no-drag {
            @apply pointer-events-none select-none;
            -webkit-user-drag: none;
        }
        .link-bounce {
            @apply transition-all hover:shadow-[1px_1px_0px_0px_rgba(0,0,0,1)] hover:translate-x-[1px] hover:translate-y-[1px];
        }
    }
</style>


================================================
File: app/templates/components/workspace.html
================================================
<!-- Include ActionButton Component -->
{% include 'components/ActionButton.html' %}

<div class="workspace-container" style="display: none;">
    <div class="workspace-inner">
        <!-- Tabs container -->
        <div class="flex justify-start items-end mb-0">
            <!-- Tabs floating above container -->
            <div class="agent-tabs translate-x-1 translate-y-1">
                <button id="tab-claude" class="tab-button active px-4 py-2 bg-cyan-400 border-2 border-black border-b-0 text-black font-bold shadow-[2px_0px_0px_0px_rgba(0,0,0,1)] hover:shadow-[4px_0px_0px_0px_rgba(0,0,0,1)] hover:translate-x-[-1px] hover:translate-y-[-1px] active:shadow-[1px_0px_0px_0px_rgba(0,0,0,1)] active:translate-x-[1px] active:translate-y-[1px] transition-all text-sm relative z-10">
                    Claude code
                </button>
                <button id="tab-cursor" class="tab-button px-4 py-2 bg-gray-100 border-2 border-gray-400 border-b-0 text-gray-500 font-medium shadow-[1px_0px_0px_0px_rgba(0,0,0,0.3)] cursor-not-allowed opacity-50 text-sm relative z-5" disabled>
                    Cursor/others.. (coming soon)
                </button>
            </div>
        </div>

        <!-- Editor Container -->
        <div class="bg-white border-2 border-black shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] relative z-0" style="height: 600px;">
            <!-- Three-panel layout inside container -->
            <div class="workspace-grid" style="height: 100%;">
                {% include 'components/workspace_files.html' %}
                {% include 'components/workspace_editor.html' %}
                {% include 'components/workspace_actions.html' %}
            </div>
        </div>
    </div>
</div>

<!-- Tab functionality -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    const workspaceTabs = document.querySelectorAll('.tab-button');
    
    workspaceTabs.forEach(tab => {
        tab.addEventListener('click', function() {
            // Skip if tab is disabled
            if (this.disabled) return;
            
            // Remove active state from all tabs
            workspaceTabs.forEach(t => {
                if (!t.disabled) {
                    t.classList.remove('active', 'bg-cyan-400', 'border-black', 'text-black', 'font-bold', 'z-10');
                    t.classList.add('bg-gray-100', 'border-gray-400', 'text-gray-700', 'font-medium', 'z-5');
                    t.classList.remove('shadow-[2px_0px_0px_0px_rgba(0,0,0,1)]');
                    t.classList.add('shadow-[1px_0px_0px_0px_rgba(0,0,0,0.3)]');
                }
            });
            
            // Add active state to clicked tab
            this.classList.add('active', 'bg-cyan-400', 'border-black', 'text-black', 'font-bold', 'z-10');
            this.classList.remove('bg-gray-100', 'border-gray-400', 'text-gray-700', 'font-medium', 'z-5');
            this.classList.remove('shadow-[1px_0px_0px_0px_rgba(0,0,0,0.3)]');
            this.classList.add('shadow-[2px_0px_0px_0px_rgba(0,0,0,1)]');
            
            // Update panel contents based on selected tab
            if (window.updateWorkspaceContents) {
                window.updateWorkspaceContents(this.id);
            }
        });
    });
});
</script>

<!-- Include separate JavaScript files -->
<script src="/static/js/workspace_manager.js"></script>
<script src="/static/js/file_tree.js"></script>
<script src="/static/js/monaco_editor.js"></script>
<script src="/static/js/context_manager.js"></script>
<script src="/static/js/auto_share.js"></script>

<!-- Initialize workspace -->
<script>
// Initialize workspace when page loads
document.addEventListener('DOMContentLoaded', function() {
    // Create global workspace manager instance
    const workspaceManager = new WorkspaceManager();
    window.workspaceManager = workspaceManager;
    
    // Initialize the workspace manager
    workspaceManager.init();
    
    setTimeout(() => {
        initializeWorkspaceEditor();
        initializeContextUI();
        initializeFileTree();
        
        // Initial render
        workspaceManager.render();
    }, 100);
});
</script>

<!-- Monaco Editor CDN -->
<script src="https://unpkg.com/monaco-editor@0.44.0/min/vs/loader.js"></script>


================================================
File: app/templates/components/workspace_actions.html
================================================
<!-- Right Panel: Add tools -->
<div class="workspace-actions" style="height: 100%; display: flex; flex-direction: column;">
    <div class="p-4 flex-1 overflow-y-auto">
        <h3 class="text-lg font-black text-black mb-4">Add tools</h3>
        
        <!-- QuickAction Section - Search Bar -->
        <div class="mb-4">
            <div class="search-container">
                <input 
                    type="text" 
                    class="search-input"
                    placeholder="Search actions, tags..."
                    onkeyup="filterActions(this.value)"
                    onkeydown="handleSearchKeydown(event)"
                />
                <div class="search-clear" id="search-clear" style="display: none;" onclick="clearSearch()">×</div>
            </div>
        </div>

        <!-- Toggle Menu Buttons -->
        <div class="mb-4">
            <h4 class="text-sm font-bold text-black mb-2">Actions</h4>
            
            <!-- MCPs Button with Expand -->
            <div class="menu-item mb-2">
                <button 
                    class="menu-button expandable"
                    data-theme="yellow"
                    onclick="toggleMenuButton(this, 'mcps')"
                >
                    <span class="menu-button-plus">+</span>
                    <span class="menu-button-text">MCPs</span>
                    <span class="menu-button-expand">▼</span>
                </button>
                <div class="menu-dropdown" id="dropdown-mcps" style="display: none;">
                    <div id="mcps-list" class="p-2">
                        {% for mcp in mcps %}
                        <div class="dropdown-item" onclick="toggleDropdownItem(this, '{{ mcp.name }}', 'mcps')">
                            <span class="dropdown-item-icon">+</span>
                            <span>{{ mcp.name }}</span>
                        </div>
                        {% endfor %}
                        {% if not mcps %}
                        <div class="text-xs text-gray-500">No MCPs available</div>
                        {% endif %}
                    </div>
                </div>
            </div>

            <!-- Rules Button with Expand -->
            <div class="menu-item mb-2">
                <button 
                    class="menu-button expandable"
                    data-theme="pink"
                    onclick="toggleMenuButton(this, 'rules')"
                >
                    <span class="menu-button-plus">+</span>
                    <span class="menu-button-text">Rules</span>
                    <span class="menu-button-expand">▼</span>
                </button>
                <div class="menu-dropdown" id="dropdown-rules" style="display: none;">
                    <div id="rules-list" class="p-2">
                        {% for rule in rules %}
                        <div class="dropdown-item {% if rule.type == 'ruleset' %}ruleset-item{% endif %}" 
                             {% if rule.type == 'ruleset' %}
                             onclick="toggleRuleset(event, this, '{{ rule.slug }}')"
                             {% else %}
                             onclick="toggleDropdownItem(this, '{{ rule.slug or rule.name }}', 'rules')"
                             {% endif %}
                             data-rule-type="{{ rule.type }}"
                             data-rule-slug="{{ rule.slug }}">
                            {% if rule.type == 'ruleset' %}
                            <span class="dropdown-item-checkbox" onclick="toggleRulesetItems(event, '{{ rule.slug }}')">+</span>
                            <span class="flex-1">{{ rule.display_name or rule.name }}</span>
                            <span class="ruleset-expand">▲</span>
                            {% else %}
                            <span class="dropdown-item-icon">+</span>
                            <span>{{ rule.display_name or rule.name }}</span>
                            {% endif %}
                        </div>
                        {% if rule.type == 'ruleset' and rule.children %}
                        <div class="ruleset-children" id="children-{{ rule.slug }}" style="display: none; margin-left: 20px;">
                            <!-- Children will be populated by JavaScript -->
                        </div>
                        {% endif %}
                        {% endfor %}
                        {% if not rules %}
                        <div class="text-xs text-gray-500">No rules available</div>
                        {% endif %}
                    </div>
                </div>
            </div>

            <!-- Agents Button with Expand -->
            <div class="menu-item mb-2">
                <button 
                    class="menu-button expandable"
                    data-theme="blue"
                    onclick="toggleMenuButton(this, 'agents')"
                >
                    <span class="menu-button-plus">+</span>
                    <span class="menu-button-text">Agents</span>
                    <span class="menu-button-expand">▼</span>
                </button>
                <div class="menu-dropdown" id="dropdown-agents" style="display: none;">
                    <div id="agents-list" class="p-2">
                        {% for agent in agents %}
                        <div class="dropdown-item" onclick="toggleDropdownItem(this, '{{ agent.slug or agent.name }}', 'agents')">
                            <span class="dropdown-item-icon">+</span>
                            <span>{{ agent.display_name or agent.name }}</span>
                        </div>
                        {% endfor %}
                        {% if not agents %}
                        <div class="text-xs text-gray-500">No agents available</div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
/* Workspace actions sidebar */
.workspace-actions {
    background: white;
    border-left: 2px solid black;
    min-height: 100%;
    height: 100%;
}

/* Search Container */
.search-container {
    position: relative;
}

.search-input {
    width: 100%;
    padding: 8px 32px 8px 12px;
    border: 2px solid black;
    font-size: 14px;
    background: white;
    box-shadow: 2px 2px 0px 0px rgba(0,0,0,1);
    transition: all 150ms ease;
}

.search-input:focus {
    outline: none;
    box-shadow: 3px 3px 0px 0px rgba(0,0,0,1);
    transform: translate(-1px, -1px);
}

.search-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    color: #666;
    border-radius: 50%;
    transition: all 150ms ease;
}

.search-clear:hover {
    background: #f3f4f6;
    color: black;
}

.search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    background: white;
    border: 2px solid black;
    box-shadow: 2px 2px 0px 0px rgba(0,0,0,1);
    max-height: 200px;
    overflow-y: auto;
    z-index: 10;
}

.search-result-item {
    padding: 6px 10px;
    font-size: 13px;
    cursor: pointer;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    gap: 6px;
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-item:hover {
    background: #f3f4f6;
}

.search-result-type {
    font-size: 10px;
    font-weight: bold;
    padding: 2px 4px;
    border: 1px solid black;
    background: #f3f4f6;
}

/* Menu Button Base Style */
.menu-button {
    width: 100%;
    display: flex;
    align-items: center;
    background: white;
    border: 2px solid black;
    padding: 0;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
    transition: all 150ms ease;
    box-shadow: 2px 2px 0px 0px rgba(0,0,0,1);
    position: relative;
    overflow: hidden;
}

/* Plus icon area */
.menu-button-plus {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: bold;
    border-right: 2px solid black;
    flex-shrink: 0;
}

/* Text area */
.menu-button-text {
    flex: 1;
    padding: 0 12px;
    color: black;
    text-align: left;
}

/* Expand arrow */
.menu-button-expand {
    padding: 0 12px;
    font-size: 12px;
    color: black;
    transition: transform 150ms ease;
}

/* Theme colors for plus area (default state) */
.menu-button[data-theme="yellow"] .menu-button-plus {
    background: #FDE047;
}

.menu-button[data-theme="pink"] .menu-button-plus {
    background: #F472B6;
}

.menu-button[data-theme="blue"] .menu-button-plus {
    background: #22D3EE;
}

/* Toggled state - color inversion (color moves to text area) */
.menu-button.toggled[data-theme="yellow"] {
    background: #FDE047;
}

.menu-button.toggled[data-theme="yellow"] .menu-button-plus {
    background: white;
}

.menu-button.toggled[data-theme="pink"] {
    background: #F472B6;
}

.menu-button.toggled[data-theme="pink"] .menu-button-plus {
    background: white;
}

.menu-button.toggled[data-theme="blue"] {
    background: #22D3EE;
}

.menu-button.toggled[data-theme="blue"] .menu-button-plus {
    background: white;
}

/* Text always stays black */
.menu-button .menu-button-text,
.menu-button.toggled .menu-button-text {
    color: black;
}

/* Expanded state */
.menu-button.expanded .menu-button-expand {
    transform: rotate(180deg);
}

/* Hover effect */
.menu-button:hover {
    box-shadow: 3px 3px 0px 0px rgba(0,0,0,1);
    transform: translate(-1px, -1px);
}

/* Active/pressed effect */
.menu-button:active {
    box-shadow: 1px 1px 0px 0px rgba(0,0,0,1);
    transform: translate(1px, 1px);
}

/* Dropdown container */
.menu-dropdown {
    background: white;
    border: 2px solid black;
    border-top: none;
    margin-top: -2px;
    box-shadow: 2px 2px 0px 0px rgba(0,0,0,1);
}

/* List items in dropdown */
.dropdown-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    font-size: 12px;
    cursor: pointer;
    transition: background 100ms ease;
}

.dropdown-item:hover {
    background: #f3f4f6;
}

.dropdown-item.active {
    background: #e5e7eb;
    font-weight: bold;
}

.dropdown-item-icon {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    border: 1px solid black;
}

.dropdown-item.active .dropdown-item-icon {
    background: black;
    color: white;
}

/* Ruleset specific styles */
.ruleset-item {
    font-weight: 600;
    gap: 4px;
    justify-content: space-between;
}

.ruleset-expand {
    transition: transform 150ms ease;
    flex-shrink: 0;
    margin-left: auto;
    font-size: 10px;
    width: 12px;
    height: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ruleset-item:not(.expanded) .ruleset-expand {
    transform: rotate(180deg);  /* ▲ becomes ▼ */
}

.ruleset-item.expanded .ruleset-expand {
    transform: rotate(0deg);  /* ▲ stays as ▲ */
}

.dropdown-item-checkbox {
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    border: 1px solid black;
    cursor: pointer;
    flex-shrink: 0;
}

.dropdown-item-checkbox:hover {
    background: #f3f4f6;
}

.dropdown-item-checkbox.checked {
    background: black;
    color: white;
}

.dropdown-item-checkbox.partial {
    background: #6b7280;
    color: white;
}

.ruleset-children {
    border-left: 2px solid #e5e7eb;
    margin-bottom: 8px;
}

.ruleset-children .dropdown-item {
    font-size: 11px;
}

/* Search filtering */
.menu-item.filtered-hidden,
.dropdown-item.filtered-hidden {
    display: none !important;
}

.search-match {
    background: #fef3c7;
}
</style>

<script>
// Initialize actions data from server-side rendering
const serverActions = {
    agents: {{ agents | tojson | safe }},
    rules: {{ rules | tojson | safe }},
    mcps: {{ mcps | tojson | safe }}
};

// Store all rules by slug for lookups
const rulesBySlug = {{ rules_by_slug | tojson | safe }};

// Track loaded data
let loadedData = {};

// Search functionality - initialize with server data
let allActions = [
    ...(serverActions.mcps || []).map(item => ({...item, type: 'MCP'})),
    ...(serverActions.rules || []).map(item => ({...item, type: 'Rule'})),
    ...(serverActions.agents || []).map(item => ({...item, type: 'Agent'}))
];
let searchTimeout = null;

// Initialize search data - no longer needed as data comes from server
// The allActions array is already initialized with server data above

// Filter actions in-place
function filterActions(query) {
    clearTimeout(searchTimeout);
    searchTimeout = setTimeout(() => {
        const searchClear = document.getElementById('search-clear');
        
        if (!query || query.trim() === '') {
            // Show all items
            showAllItems();
            searchClear.style.display = 'none';
            return;
        }
        
        searchClear.style.display = 'block';
        
        const searchTerm = query.toLowerCase();
        
        // Filter each category
        filterCategory('mcps', searchTerm);
        filterCategory('rules', searchTerm);
        filterCategory('agents', searchTerm);
    }, 200);
}

// Filter items within a category
function filterCategory(categoryType, searchTerm) {
    const menuItem = document.querySelector(`[onclick*="${categoryType}"]`).closest('.menu-item');
    const dropdown = document.getElementById(`dropdown-${categoryType}`);
    
    if (!dropdown) return;
    
    let hasVisibleItems = false;
    
    // Get the data for this category
    const categoryData = serverActions[categoryType] || [];
    
    // Filter top-level items
    const items = dropdown.querySelectorAll('.dropdown-item:not(.ruleset-children .dropdown-item)');
    items.forEach(item => {
        const itemSlug = item.getAttribute('data-rule-slug') || 
                        item.onclick?.toString().match(/toggleDropdownItem\(this,\s*'([^']+)'/)?.[1];
        
        if (!itemSlug) return;
        
        const itemData = categoryType === 'rules' ? 
            rulesBySlug[itemSlug] : 
            categoryData.find(d => (d.slug || d.name) === itemSlug);
        
        if (!itemData) return;
        
        // Check if item itself matches
        const itemMatch = fuzzyMatch(itemData, searchTerm);
        
        // For rulesets, also check if any children match
        let hasMatchingChildren = false;
        if (itemData.type === 'ruleset' && itemData.children) {
            hasMatchingChildren = itemData.children.some(childSlug => {
                const childData = rulesBySlug[childSlug];
                return childData && fuzzyMatch(childData, searchTerm).score > 0;
            });
        }
        
        const shouldShow = itemMatch.score > 0 || hasMatchingChildren;
        
        if (shouldShow) {
            item.classList.remove('filtered-hidden');
            if (itemMatch.score > 0) {
                item.classList.add('search-match');
            } else {
                item.classList.remove('search-match');
            }
            hasVisibleItems = true;
            
            // If it's a ruleset, filter children
            if (itemData.type === 'ruleset' && itemData.children) {
                const childrenContainer = document.getElementById(`children-${itemSlug}`);
                if (childrenContainer && childrenContainer.style.display !== 'none') {
                    filterRulesetChildren(itemSlug, searchTerm);
                }
            }
        } else {
            item.classList.add('filtered-hidden');
            item.classList.remove('search-match');
        }
    });
    
    // Hide/show the entire category based on whether it has matches
    if (hasVisibleItems) {
        menuItem.classList.remove('filtered-hidden');
    } else {
        menuItem.classList.add('filtered-hidden');
    }
}

// Filter children of a ruleset
function filterRulesetChildren(rulesetSlug, searchTerm) {
    const childrenContainer = document.getElementById(`children-${rulesetSlug}`);
    if (!childrenContainer) return;
    
    const childItems = childrenContainer.querySelectorAll('.dropdown-item');
    childItems.forEach(child => {
        const childSlug = child.getAttribute('data-rule-slug');
        if (!childSlug) return;
        
        const childData = rulesBySlug[childSlug];
        if (!childData) return;
        
        const matchResult = fuzzyMatch(childData, searchTerm);
        
        if (matchResult.score > 0) {
            child.classList.remove('filtered-hidden');
            child.classList.add('search-match');
        } else {
            child.classList.add('filtered-hidden');
            child.classList.remove('search-match');
        }
    });
}

// Fuzzy matching function
function fuzzyMatch(item, searchTerm) {
    const displayName = (item.display_name || item.name || '').toLowerCase();
    const tags = (item.tags || []).join(' ').toLowerCase();
    const content = (item.content || '').toLowerCase();
    
    // Combine all searchable text
    const searchableText = `${displayName} ${tags} ${content}`;
    
    // Calculate fuzzy match score
    const score = calculateFuzzyScore(searchableText, searchTerm.toLowerCase());
    
    return {
        score: score,
        text: searchableText
    };
}

// Calculate fuzzy match score using a simple algorithm
function calculateFuzzyScore(text, pattern) {
    if (!pattern) return 1;
    if (!text) return 0;
    
    // Exact match gets highest score
    if (text.includes(pattern)) {
        return 100;
    }
    
    // Check for subsequence match (letters in order but not necessarily consecutive)
    let patternIndex = 0;
    let matches = 0;
    let consecutiveMatches = 0;
    let maxConsecutive = 0;
    
    for (let i = 0; i < text.length && patternIndex < pattern.length; i++) {
        if (text[i] === pattern[patternIndex]) {
            matches++;
            patternIndex++;
            consecutiveMatches++;
            maxConsecutive = Math.max(maxConsecutive, consecutiveMatches);
        } else {
            consecutiveMatches = 0;
        }
    }
    
    // If we didn't match all pattern characters, score is 0
    if (patternIndex < pattern.length) {
        return 0;
    }
    
    // Calculate score based on:
    // - How many characters matched (coverage)
    // - How consecutive the matches were (density)
    // - Length penalty (prefer shorter matches)
    const coverage = matches / pattern.length;
    const density = maxConsecutive / pattern.length;
    const lengthPenalty = pattern.length / text.length;
    
    return Math.floor((coverage * 40 + density * 40 + lengthPenalty * 20));
}

// Show all items (clear filter)
function showAllItems() {
    const hiddenItems = document.querySelectorAll('.filtered-hidden');
    hiddenItems.forEach(item => {
        item.classList.remove('filtered-hidden');
    });
    
    const matchedItems = document.querySelectorAll('.search-match');
    matchedItems.forEach(item => {
        item.classList.remove('search-match');
    });
}

// Clear search
function clearSearch() {
    const searchInput = document.querySelector('.search-input');
    const searchClear = document.getElementById('search-clear');
    
    searchInput.value = '';
    searchClear.style.display = 'none';
    showAllItems();
}

// Handle search keyboard shortcuts
function handleSearchKeydown(event) {
    if (event.key === 'Escape') {
        clearSearch();
    }
}

// Restore action states from unified state
function restoreActionStates() {
    const state = window.workspaceManager?.getState();
    if (!state) return;
    
    // First, clear all states and reset loadedData
    loadedData = {};
    
    // Clear MCPs state
    const mcpButton = document.querySelector('[data-theme="yellow"]');
    const mcpDropdown = document.getElementById('dropdown-mcps');
    if (mcpButton && mcpDropdown) {
        mcpButton.classList.remove('toggled', 'expanded');
        mcpDropdown.style.display = 'none';
    }
    
    // Clear Rules state
    const rulesButton = document.querySelector('[data-theme="pink"]');
    const rulesDropdown = document.getElementById('dropdown-rules');
    if (rulesButton && rulesDropdown) {
        rulesButton.classList.remove('toggled', 'expanded');
        rulesDropdown.style.display = 'none';
    }
    
    // Clear Agents state
    const agentsButton = document.querySelector('[data-theme="blue"]');
    const agentsDropdown = document.getElementById('dropdown-agents');
    if (agentsButton && agentsDropdown) {
        agentsButton.classList.remove('toggled', 'expanded');
        agentsDropdown.style.display = 'none';
    }
    
    // Now restore the active states
    // Restore MCPs state
    if (state.isActionCategoryActive('mcps')) {
        if (mcpButton && mcpDropdown) {
            mcpButton.classList.add('toggled');
            mcpButton.classList.add('expanded');
            mcpDropdown.style.display = 'block';
            if (!loadedData['mcps']) {
                loadDropdownData('mcps');
                loadedData['mcps'] = true;
            }
        }
    }
    
    // Restore Rules state
    if (state.isActionCategoryActive('rules')) {
        if (rulesButton && rulesDropdown) {
            rulesButton.classList.add('toggled');
            rulesButton.classList.add('expanded');
            rulesDropdown.style.display = 'block';
            if (!loadedData['rules']) {
                loadDropdownData('rules');
                loadedData['rules'] = true;
            }
        }
    }
    
    // Restore Agents state
    if (state.isActionCategoryActive('agents')) {
        if (agentsButton && agentsDropdown) {
            agentsButton.classList.add('toggled');
            agentsButton.classList.add('expanded');
            agentsDropdown.style.display = 'block';
            if (!loadedData['agents']) {
                loadDropdownData('agents');
                loadedData['agents'] = true;
            }
        }
    }
}

// Export for global use
window.restoreActionStates = restoreActionStates;
window.loadDropdownData = loadDropdownData;

// Initialize on load
document.addEventListener('DOMContentLoaded', function() {
    // No need to call initSearchData - data is already loaded from server
    // Wait a bit for workspace manager to initialize
    setTimeout(() => {
        restoreActionStates();
    }, 100);
});

// Toggle ruleset expansion
function toggleRuleset(event, element, rulesetSlug) {
    // Prevent event from bubbling to checkbox
    if (event.target.classList.contains('dropdown-item-checkbox')) {
        return;
    }
    
    const childrenContainer = document.getElementById(`children-${rulesetSlug}`);
    const icon = element.querySelector('.ruleset-expand');
    const ruleset = rulesBySlug[rulesetSlug];
    
    if (!childrenContainer || !ruleset) return;
    
    const isExpanded = element.classList.contains('expanded');
    
    if (isExpanded) {
        // Collapse
        element.classList.remove('expanded');
        childrenContainer.style.display = 'none';
        icon.textContent = '▶';
    } else {
        // Expand
        element.classList.add('expanded');
        childrenContainer.style.display = 'block';
        icon.textContent = '▼';
        
        // Populate children if not already done
        if (childrenContainer.children.length === 0 && ruleset.children) {
            ruleset.children.forEach(childSlug => {
                const childRule = rulesBySlug[childSlug];
                if (childRule) {
                    const childDiv = document.createElement('div');
                    childDiv.className = 'dropdown-item';
                    childDiv.setAttribute('data-rule-slug', childSlug);
                    childDiv.onclick = function() {
                        toggleDropdownItem(this, childSlug, 'rules');
                        updateRulesetCheckbox(rulesetSlug);
                    };
                    childDiv.innerHTML = `
                        <span class="dropdown-item-icon">+</span>
                        <span>${childRule.display_name || childRule.name}</span>
                    `;
                    
                    // Check if this child is already active
                    const state = window.workspaceManager?.getState();
                    if (state && state.isActionItemChecked('rules', childSlug)) {
                        childDiv.classList.add('active');
                        childDiv.querySelector('.dropdown-item-icon').textContent = '−';
                    }
                    
                    childrenContainer.appendChild(childDiv);
                }
            });
            
            // Update checkbox state after populating children
            updateRulesetCheckbox(rulesetSlug);
        }
    }
}

// Toggle all items in a ruleset
function toggleRulesetItems(event, rulesetSlug) {
    event.stopPropagation();
    
    const ruleset = rulesBySlug[rulesetSlug];
    if (!ruleset || !ruleset.children) return;
    
    const state = window.workspaceManager?.getState();
    if (!state) return;
    
    // Check current state of all children
    const checkedChildren = ruleset.children.filter(childSlug => 
        state.isActionItemChecked('rules', childSlug)
    );
    
    // If all or some are checked, uncheck all. If none are checked, check all.
    const shouldCheck = checkedChildren.length === 0;
    
    // Toggle all children
    ruleset.children.forEach(childSlug => {
        if (shouldCheck) {
            if (!state.isActionItemChecked('rules', childSlug)) {
                installRule(childSlug);
                state.setActionItemState('rules', childSlug, true);
            }
        } else {
            if (state.isActionItemChecked('rules', childSlug)) {
                removeRule(childSlug);
                state.setActionItemState('rules', childSlug, false);
            }
        }
    });
    
    // Update UI for all visible children
    const childrenContainer = document.getElementById(`children-${rulesetSlug}`);
    if (childrenContainer) {
        const childItems = childrenContainer.querySelectorAll('.dropdown-item');
        childItems.forEach(item => {
            const childSlug = item.getAttribute('data-rule-slug');
            if (childSlug) {
                const icon = item.querySelector('.dropdown-item-icon');
                if (shouldCheck) {
                    item.classList.add('active');
                    if (icon) icon.textContent = '−';
                } else {
                    item.classList.remove('active');
                    if (icon) icon.textContent = '+';
                }
            }
        });
    }
    
    // Update the checkbox appearance
    updateRulesetCheckbox(rulesetSlug);
    
    // Save state
    window.workspaceManager.saveState(window.workspaceManager.currentContextId);
}

// Update ruleset checkbox based on children state
function updateRulesetCheckbox(rulesetSlug) {
    const ruleset = rulesBySlug[rulesetSlug];
    if (!ruleset || !ruleset.children) return;
    
    const state = window.workspaceManager?.getState();
    if (!state) return;
    
    const rulesetElement = document.querySelector(`[data-rule-slug="${rulesetSlug}"]`);
    if (!rulesetElement) return;
    
    const checkbox = rulesetElement.querySelector('.dropdown-item-checkbox');
    if (!checkbox) return;
    
    // Count checked children
    const checkedChildren = ruleset.children.filter(childSlug => 
        state.isActionItemChecked('rules', childSlug)
    );
    
    // Update checkbox state
    checkbox.classList.remove('checked', 'partial');
    if (checkedChildren.length === 0) {
        checkbox.textContent = '+';
    } else if (checkedChildren.length === ruleset.children.length) {
        checkbox.classList.add('checked');
        checkbox.textContent = '−';
    } else {
        checkbox.classList.add('partial');
        checkbox.textContent = '−';
    }
}

// Toggle menu button - handles both toggle and expand together
function toggleMenuButton(button, type) {
    const state = window.workspaceManager?.getState();
    if (!state) return;
    
    const isToggled = state.isActionCategoryActive(type);
    const dropdown = document.getElementById(`dropdown-${type}`);
    
    // Toggle the button state in unified state
    state.toggleActionCategory(type);
    
    // Update UI based on new state
    if (!state.isActionCategoryActive(type)) {
        button.classList.remove('toggled');
        button.classList.remove('expanded');
        dropdown.style.display = 'none';
        // Remove from context
        removeFromContext(type);
    } else {
        button.classList.add('toggled');
        button.classList.add('expanded');
        dropdown.style.display = 'block';
        // Insert into context
        insertIntoContext(type);
        // Load data if needed
        if (!loadedData[type]) {
            loadDropdownData(type);
            loadedData[type] = true;
        }
    }
    
    // Save state to localStorage
    window.workspaceManager.saveState(window.workspaceManager.currentContextId);
}

// Insert action into context
async function insertIntoContext(type) {
    // No longer auto-install default items
    // Users should explicitly choose which items they want
    // This function is kept for potential future use
}

// Remove action from context
async function removeFromContext(type) {
    // Folding/collapsing categories should NOT remove content
    // This function should only be used when explicitly removing items
    // Category folding should only affect UI visibility, not file content
    
    // If we need to remove all items of a type in the future, 
    // it should be a separate explicit action, not tied to UI folding
}

// Load dropdown data - now just updates the UI state based on what's already rendered
function loadDropdownData(type) {
    // The dropdown items are now rendered server-side with Jinja
    // This function just needs to update the UI state (active/inactive)
    const state = window.workspaceManager?.getState();
    if (!state) return;
    
    const container = document.getElementById(`${type}-list`);
    if (!container) return;
    
    // Update each dropdown item's state
    const items = container.querySelectorAll('.dropdown-item');
    items.forEach(item => {
        // Handle ruleset items separately
        if (item.classList.contains('ruleset-item')) {
            const rulesetSlug = item.getAttribute('data-rule-slug');
            if (rulesetSlug) {
                updateRulesetCheckbox(rulesetSlug);
            }
            return;
        }
        
        const itemName = item.getAttribute('data-item-id') || 
                        item.onclick?.toString().match(/toggleDropdownItem\(this,\s*'([^']+)'/)?.[1];
        if (itemName) {
            const isChecked = state.isActionItemChecked(type, itemName);
            const icon = item.querySelector('.dropdown-item-icon');
            if (isChecked) {
                item.classList.add('active');
                if (icon && !item.classList.contains('ruleset-item')) {
                    icon.textContent = '−';
                }
            } else {
                item.classList.remove('active');
                if (icon && !item.classList.contains('ruleset-item')) {
                    icon.textContent = '+';
                }
            }
        }
    });
}

// Toggle individual dropdown item
function toggleDropdownItem(element, itemName, type) {
    const state = window.workspaceManager?.getState();
    if (!state) return;
    
    // Toggle in unified state
    state.toggleActionItem(type, itemName);
    const isChecked = state.isActionItemChecked(type, itemName);
    
    // Update UI
    const icon = element.querySelector('.dropdown-item-icon');
    if (isChecked) {
        element.classList.add('active');
        icon.textContent = '−';
        // Install the specific item
        if (type === 'mcps') {
            installMCP(itemName);
        } else if (type === 'rules') {
            installRule(itemName);
        } else if (type === 'agents') {
            installAgent(itemName);
        }
    } else {
        element.classList.remove('active');
        icon.textContent = '+';
        // Remove the specific item
        if (type === 'mcps') {
            removeMCP(itemName);
        } else if (type === 'rules') {
            removeRule(itemName);
        } else if (type === 'agents') {
            removeAgent(itemName);
        }
    }
    
    // Save state to localStorage
    window.workspaceManager.saveState(window.workspaceManager.currentContextId);
}

// Backend integration functions (from previous implementation)
async function installAgent(agentName) {
    try {
        const response = await fetch(`/api/agents/${encodeURIComponent(agentName)}`);
        
        if (response.ok) {
            const data = await response.json();
            const result = data.agents && data.agents[0]; // Get first agent from array
            
            if (result && window.workspaceManager) {
                const state = window.workspaceManager.getState();
                if (state) {
                    // Store agent name to path mapping in metadata (for easier removal)
                    const agentPath = `.claude/agents/${result.filename}`;
                    state.agentMappings[agentName] = agentPath;
                    
                    // Mark the agent as checked in action state
                    state.setActionItemState('agents', agentName, true);
                }
                
                // Use includeFile which properly handles saving and rendering
                const agentPath = `.claude/agents/${result.filename}`;
                window.workspaceManager.includeFile(agentPath, result.content);
            }
        }
    } catch (error) {
        console.error(`Error installing agent: ${error.message}`);
    }
}

async function installMCP(mcpName) {
    try {
        const response = await fetch(`/api/mcps/${encodeURIComponent(mcpName)}`);
        
        if (response.ok) {
            const data = await response.json();
            const result = data.mcps && data.mcps[0]; // Get first MCP from array
            
            if (result && result.config && window.workspaceManager) {
                const state = window.workspaceManager.getState();
                if (state) {
                    // Mark the MCP as checked in action state
                    state.setActionItemState('mcps', mcpName, true);
                }
                
                // Get current MCP config or create new one
                let currentConfig = {};
                const mcpFile = window.workspaceManager.getState().files['.mcp.json'];
                if (mcpFile) {
                    try {
                        currentConfig = JSON.parse(mcpFile);
                    } catch (e) {
                        currentConfig = {};
                    }
                }
                
                // Ensure mcpServers exists and add the new MCP
                if (!currentConfig.mcpServers) {
                    currentConfig.mcpServers = {};
                }
                currentConfig.mcpServers[mcpName] = result.config;
                
                // Use includeFile which properly handles saving and rendering
                window.workspaceManager.includeFile('.mcp.json', JSON.stringify(currentConfig, null, 2));
            }
        }
    } catch (error) {
        console.error(`Error installing MCP: ${error.message}`);
    }
}

async function installRule(ruleName) {
    try {
        const response = await fetch(`/api/rules/${encodeURIComponent(ruleName)}`);
        
        if (response.ok) {
            const data = await response.json();
            const result = data.rules && data.rules[0]; // Get first rule from array
            
            if (result && result.content) {
                let currentContent = '';
                if (window.workspaceManager && window.workspaceManager.getState()) {
                    const claudeFile = window.workspaceManager.getState().files['CLAUDE.md'];
                    if (claudeFile) {
                        currentContent = claudeFile;
                    }
                }
                
                const ruleContent = result.content.trim();
                const newContent = currentContent + (currentContent ? '\n' : '') + ruleContent;
                
                if (window.workspaceManager) {
                    // Use includeFile which properly handles saving and rendering
                    window.workspaceManager.includeFile('CLAUDE.md', newContent);
                }
            }
        }
    } catch (error) {
        console.error(`Error installing rule: ${error.message}`);
    }
}

// Remove functions for specific items
async function removeMCP(mcpName) {
    try {
        if (window.workspaceManager && window.workspaceManager.getState()) {
            const state = window.workspaceManager.getState();
            const mcpFile = state.files['.mcp.json'];
            
            if (mcpFile) {
                try {
                    let config = JSON.parse(mcpFile);
                    // Remove the specific MCP from config - use correct property name
                    if (config.mcpServers && config.mcpServers[mcpName]) {
                        delete config.mcpServers[mcpName];
                    }
                    
                    // Check if there are any MCPs left
                    const hasRemainingMCPs = config.mcpServers && Object.keys(config.mcpServers).length > 0;
                    
                    if (hasRemainingMCPs) {
                        // Update the file with cleaned config
                        const newContent = JSON.stringify(config, null, 2);
                        // Use includeFile which properly handles saving and rendering
                        window.workspaceManager.includeFile('.mcp.json', newContent);
                    } else {
                        // No MCPs left, remove the file entirely
                        window.workspaceManager.deleteFile('.mcp.json');
                    }
                } catch (e) {
                    console.error('Error parsing MCP config:', e);
                }
            }
        }
    } catch (error) {
        console.error(`Error removing MCP: ${error.message}`);
    }
}

async function removeRule(ruleName) {
    try {
        // Get the rule content first to know what to remove
        const response = await fetch(`/api/rules/${encodeURIComponent(ruleName)}`);
        
        if (response.ok) {
            const data = await response.json();
            const result = data.rules && data.rules[0]; // Get first rule from array
            const ruleContent = result ? result.content.trim() : '';
            
            if (window.workspaceManager && window.workspaceManager.getState()) {
                const claudeFile = window.workspaceManager.getState().files['CLAUDE.md'];
                if (claudeFile && claudeFile.includes(ruleContent)) {
                    // Remove the rule content
                    const newContent = claudeFile
                        .replace(ruleContent, '')
                        .replace(/\n\n+/g, '\n\n')
                        .trim();
                    
                    // Mark the rule as unchecked in action state
                    const state = window.workspaceManager.getState();
                    if (state) {
                        state.setActionItemState('rules', ruleName, false);
                    }
                    
                    // Check if file is empty or only whitespace
                    if (newContent === '' || newContent.match(/^\s*$/)) {
                        // File is empty, remove it entirely
                        window.workspaceManager.deleteFile('CLAUDE.md');
                    } else {
                        // Use includeFile which properly handles saving and rendering
                        window.workspaceManager.includeFile('CLAUDE.md', newContent);
                    }
                }
            }
        }
    } catch (error) {
        console.error(`Error removing rule: ${error.message}`);
    }
}

async function removeAgent(agentName) {
    try {
        if (window.workspaceManager) {
            const state = window.workspaceManager.getState();
            if (!state) return;
            
            let filesToRemove = [];
            
            // First check if we have a stored mapping for this agent
            if (state.agentMappings && state.agentMappings[agentName]) {
                const mappedPath = state.agentMappings[agentName];
                if (state.files[mappedPath]) {
                    filesToRemove.push(mappedPath);
                }
                // Clean up the mapping
                delete state.agentMappings[agentName];
            }
            
            // If no mapping found, search for the agent file
            if (filesToRemove.length === 0) {
                // Find files in .claude/agents/ directory that match this agent
                filesToRemove = Object.keys(state.files).filter(path => {
                    // Check for both .yaml and .md extensions
                    const normalizedAgentName = agentName.toLowerCase().replace(/[-\s]/g, '[-_]?');
                    const regex = new RegExp(`\.claude/agents/.*${normalizedAgentName}.*\.(yaml|md)$`, 'i');
                    return regex.test(path);
                });
                
                // If still no match, try alternative path patterns
                if (filesToRemove.length === 0) {
                    const alternativePaths = [
                        `.claude/agents/${agentName}.yaml`,
                        `.claude/agents/${agentName}.md`,
                        `.claude/agents/${agentName.replace(/[-\s]/g, '_')}.md`,
                        `.claude/agents/${agentName.replace(/[-\s]/g, '-')}.md`
                    ];
                    
                    alternativePaths.forEach(path => {
                        if (state.files[path]) {
                            filesToRemove.push(path);
                        }
                    });
                }
            }
            
            // Mark the agent as unchecked in action state
            state.setActionItemState('agents', agentName, false);
            
            // Remove all found files - use workspaceManager.deleteFile for proper updates
            if (filesToRemove.length > 0) {
                filesToRemove.forEach(path => {
                    // Use workspaceManager.deleteFile which triggers render
                    window.workspaceManager.deleteFile(path);
                });
                // Save state after agent mappings update
                window.workspaceManager.saveState(window.workspaceManager.currentContextId);
            } else {
                console.warn(`No agent files found for: ${agentName}. Mapped path: ${state.agentMappings?.[agentName] || 'none'}`);
                // Still save state for the action state update
                window.workspaceManager.saveState(window.workspaceManager.currentContextId);
            }
        }
    } catch (error) {
        console.error(`Error removing agent: ${error.message}`);
    }
}
</script>


================================================
File: app/templates/components/workspace_editor.html
================================================
<!-- Center Panel: Monaco Editor -->
<div class="workspace-center lg:col-span-1 border-r-2 border-black">
    <!-- Integrated monaco editor without card styling -->
    <div class="p-4 bg-white h-full flex flex-col">
        <div class="flex justify-between items-center mb-2">
            <h3 class="text-lg font-black text-black">Context editor</h3>
            <div class="flex gap-2">
                <button id="copy-workspace-editor" 
                        class="px-3 py-1 bg-cyan-400 border-2 border-black text-black font-bold shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] hover:shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] hover:translate-x-[-1px] hover:translate-y-[-1px] active:shadow-[1px_1px_0px_0px_rgba(0,0,0,1)] active:translate-x-[1px] active:translate-y-[1px] transition-all text-xs">
                    Copy
                </button>
            </div>
        </div>
        
        <!-- File path label -->
        <div class="mb-4">
            <div id="current-file-path" class="text-xs text-gray-600 bg-gray-50 px-2 py-1 border border-gray-300 rounded" style="font-family: 'Courier New', monospace;">
                No file selected
            </div>
        </div>
        
        <div class="relative flex-1 mb-3">
            <div class="w-full h-full bg-gray-900 translate-y-1 translate-x-1 absolute inset-0 z-0"></div>
            <div id="workspace-monaco-editor" 
                 class="relative z-10 border-2 border-black bg-white h-full" 
                 style="min-height: 320px;"></div>
        </div>
        
        <!-- Install in one click card with tabs -->
        <div class="relative w-full">
            <!-- Tabs for the card -->
            <div class="flex gap-0">
                <button id="share-tab-install" class="share-tab-button active px-3 py-1 bg-pink-400 border-2 border-black border-b-0 text-black font-bold text-xs shadow-[2px_0px_0px_0px_rgba(0,0,0,1)] relative z-10">
                    macOS/Linux
                </button>
                <button id="share-tab-other" class="share-tab-button px-3 py-1 bg-gray-100 border-2 border-gray-400 border-b-0 text-gray-500 font-medium text-xs shadow-[1px_0px_0px_0px_rgba(0,0,0,0.3)] relative z-5" disabled>
                    Windows (soon)
                </button>
            </div>
            
            <!-- Card content -->
            <div id="auto-share-panel" class="bg-pink-400 border-2 border-black shadow-[3px_3px_0px_0px_rgba(0,0,0,1)] p-3 relative z-0 w-full" style="margin-top: -2px; overflow: hidden;">
                <div class="flex gap-2 items-center justify-center" style="min-width: 0;">
                    <input id="share-link-input" type="text" readonly class="share-link-input px-3 py-1 bg-white border-2 border-black text-black font-mono text-xs shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] focus:outline-none" style="cursor: text;" value="Waiting for first save...">
                    <button id="copy-share-link" class="flex-shrink-0 px-3 py-1 bg-cyan-400 border-2 border-black text-black font-bold shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] hover:shadow-[3px_3px_0px_0px_rgba(0,0,0,1)] hover:translate-x-[-1px] hover:translate-y-[-1px] active:shadow-[1px_1px_0px_0px_rgba(0,0,0,1)] active:translate-x-[1px] active:translate-y-[1px] transition-all text-xs disabled:opacity-50 disabled:cursor-not-allowed" disabled>
                        Copy
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
/* Share link input responsive behavior */
.share-link-input {
    width: 450px;
    min-width: 0;
    flex-shrink: 1;
}

/* When container gets smaller, allow input to shrink */
@media (max-width: 600px) {
    .share-link-input {
        width: auto;
        flex: 1;
        min-width: 200px;
    }
}
</style>

<!-- Tab switching for share panel -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    const shareTabs = document.querySelectorAll('.share-tab-button');
    
    shareTabs.forEach(tab => {
        tab.addEventListener('click', function() {
            // Skip if tab is disabled
            if (this.disabled) return;
            
            // Remove active state from all tabs
            shareTabs.forEach(t => {
                if (!t.disabled) {
                    t.classList.remove('active', 'bg-pink-400', 'border-black', 'text-black', 'font-bold', 'z-10');
                    t.classList.add('bg-gray-100', 'border-gray-400', 'text-gray-700', 'font-medium', 'z-5');
                    t.classList.remove('shadow-[2px_0px_0px_0px_rgba(0,0,0,1)]');
                    t.classList.add('shadow-[1px_0px_0px_0px_rgba(0,0,0,0.3)]');
                }
            });
            
            // Add active state to clicked tab
            this.classList.add('active', 'bg-pink-400', 'border-black', 'text-black', 'font-bold', 'z-10');
            this.classList.remove('bg-gray-100', 'border-gray-400', 'text-gray-700', 'font-medium', 'z-5');
            this.classList.remove('shadow-[1px_0px_0px_0px_rgba(0,0,0,0.3)]');
            this.classList.add('shadow-[2px_0px_0px_0px_rgba(0,0,0,1)]');
        });
    });
});
</script>


================================================
File: app/templates/components/workspace_files.html
================================================
<!-- Left Panel: File System -->
<div class="workspace-sidebar bg-cyan-50 border-r-2 border-black flex flex-col" style="height: 100%;">
    <div class="flex justify-between items-center mb-3 px-4 pt-4">
        <h3 class="text-lg font-black text-black">Files</h3>
        <div class="flex gap-2">
            <button id="files-prev-btn" class="w-6 h-6 bg-gray-200 border-2 border-black text-black font-bold flex items-center justify-center shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] disabled:opacity-50 disabled:cursor-not-allowed disabled:shadow-[1px_1px_0px_0px_rgba(0,0,0,1)] hover:shadow-[3px_3px_0px_0px_rgba(0,0,0,1)] hover:translate-x-[-1px] hover:translate-y-[-1px] active:shadow-[1px_1px_0px_0px_rgba(0,0,0,1)] active:translate-x-[1px] active:translate-y-[1px] transition-all" title="Previous" disabled>
                <span class="mdi mdi-chevron-left text-sm"></span>
            </button>
            <button id="files-next-btn" class="w-6 h-6 bg-gray-200 border-2 border-black text-black font-bold flex items-center justify-center shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] disabled:opacity-50 disabled:cursor-not-allowed disabled:shadow-[1px_1px_0px_0px_rgba(0,0,0,1)] hover:shadow-[3px_3px_0px_0px_rgba(0,0,0,1)] hover:translate-x-[-1px] hover:translate-y-[-1px] active:shadow-[1px_1px_0px_0px_rgba(0,0,0,1)] active:translate-x-[1px] active:translate-y-[1px] transition-all" title="Next" disabled>
                <span class="mdi mdi-chevron-right text-sm"></span>
            </button>
            <button id="files-reset-btn" class="w-6 h-6 bg-red-400 border-2 border-black text-black font-bold flex items-center justify-center shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] hover:shadow-[3px_3px_0px_0px_rgba(0,0,0,1)] hover:translate-x-[-1px] hover:translate-y-[-1px] active:shadow-[1px_1px_0px_0px_rgba(0,0,0,1)] active:translate-x-[1px] active:translate-y-[1px] transition-all" title="Reset">
                <span class="mdi mdi-trash-can-outline text-sm"></span>
            </button>
        </div>
    </div>
    
    <!-- File tree section with New File button -->
    <div class="flex-1 overflow-hidden flex flex-col px-4 pb-3" style="min-height: 0;">
        <div class="bg-white border-2 border-black p-3 mb-3 overflow-y-auto" style="min-height: 200px; max-height: 900px;">
            <div id="file-tree" class="text-sm">
                <!-- File tree will be populated here -->
            </div>
            <div id="files-empty-state" class="text-center text-gray-500 text-sm py-8 hidden">
                No files yet. Add tools from the right sidebar.
            </div>
        </div>
        
        <div class="flex gap-2">
            <button id="new-file-button" class="w-full px-3 py-2 bg-cyan-400 border-2 border-black text-black font-bold shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] hover:shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] hover:translate-x-[-1px] hover:translate-y-[-1px] active:shadow-[1px_1px_0px_0px_rgba(0,0,0,1)] active:translate-x-[1px] active:translate-y-[1px] transition-all flex items-center justify-center gap-1 text-sm rounded-none focus:outline-none focus:ring-0">
                <span class="mdi mdi-file-plus text-base"></span>
                <span>New File</span>
            </button>
        </div>
        
        <!-- Empty space filler that takes remaining room -->
        <div class="flex-1"></div>
    </div>
    
    <!-- Context selector sticks to bottom -->
    <div class="p-4 border-t-2 border-black bg-cyan-50" style="flex-shrink: 0;">
        <div class="flex flex-col gap-2">
            <div class="flex justify-between items-center mb-1">
                <label class="text-sm font-black text-black">CONTEXT</label>
                <div class="flex gap-1">
                    <button id="new-context-btn" class="w-6 h-6 bg-pink-400 border-2 border-black text-black font-bold flex items-center justify-center shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] hover:shadow-[3px_3px_0px_0px_rgba(0,0,0,1)] hover:translate-x-[-1px] hover:translate-y-[-1px] active:shadow-[1px_1px_0px_0px_rgba(0,0,0,1)] active:translate-x-[1px] active:translate-y-[1px] transition-all" title="New Context">
                        <span class="text-xs">+</span>
                    </button>
                    <button id="delete-context-btn" class="w-6 h-6 bg-red-400 border-2 border-black text-black font-bold flex items-center justify-center shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] hover:shadow-[3px_3px_0px_0px_rgba(0,0,0,1)] hover:translate-x-[-1px] hover:translate-y-[-1px] active:shadow-[1px_1px_0px_0px_rgba(0,0,0,1)] active:translate-x-[1px] active:translate-y-[1px] transition-all" title="Delete Context">
                        <span class="text-xs">×</span>
                    </button>
                </div>
            </div>
            <select id="context-switcher" class="w-full px-2 py-2 bg-white border-2 border-black text-black font-medium shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] hover:shadow-[3px_3px_0px_0px_rgba(0,0,0,1)] hover:translate-x-[-1px] hover:translate-y-[-1px] focus:shadow-[3px_3px_0px_0px_rgba(0,0,0,1)] focus:translate-x-[-1px] focus:translate-y-[-1px] focus:outline-none text-xs truncate transition-all appearance-none bg-no-repeat" style="background-image: url('data:image/svg+xml;charset=UTF-8,%3csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3e%3cpath fill=%22%23000000%22 d=%22M7 10l5 5 5-5z%22/%3e%3c/svg%3e'); background-position: right 0.5rem center; background-size: 1.5em 1.5em; padding-right: 2rem;">
                <!-- Options will be populated dynamically -->
            </select>
        </div>
    </div>
</div>


================================================
File: .claude/settings.local.json
================================================
{
  "enabledMcpjsonServers": [
    "Playwright"
  ]
}