app.py

import gradio as gr
import json
import os
from pathlib import Path

# Load slash commands data
def load_commands():
    """Load slash commands from JSON file"""
    json_path = Path("slash-commands.json")
    if json_path.exists():
        with open(json_path, 'r') as f:
            return json.load(f)
    return []

def load_command_content(path):
    """Load the content of a specific command file"""
    file_path = Path(path)
    if file_path.exists():
        with open(file_path, 'r') as f:
            content = f.read()
            # Remove YAML frontmatter if present
            if content.startswith('---'):
                parts = content.split('---', 2)
                if len(parts) >= 3:
                    return parts[2].strip()
            return content
    return "Content not found"

def search_commands(search_term, commands_data):
    """Filter commands based on search term"""
    if not search_term:
        return commands_data

    search_term = search_term.lower()
    filtered = [
        cmd for cmd in commands_data
        if search_term in cmd['name'].lower()
    ]
    return filtered

def create_command_card(command):
    """Create an HTML card for a command"""
    name = command['name']
    path = command['path']
    content = load_command_content(path)

    # Extract description from content if available
    description = ""
    lines = content.split('\n')
    if lines:
        # Try to find first non-empty line as description
        for line in lines[:5]:
            if line.strip() and not line.startswith('#'):
                description = line.strip()
                break

    # Escape content for JavaScript - replace backticks and backslashes
    escaped_content = content.replace('\\', '\\\\').replace('`', '\\`').replace('$', '\\$')

    card_html = f"""
    <div style="border: 1px solid #ddd; border-radius: 8px; padding: 16px; margin: 10px 0; background: white;">
        <div style="display: flex; justify-content: space-between; align-items: start;">
            <div style="flex: 1;">
                <h3 style="margin: 0 0 8px 0; color: #2563eb;">/{name}</h3>
                <p style="margin: 0 0 12px 0; color: #666; font-size: 14px;">{description[:200]}...</p>
            </div>
        </div>
        <details>
            <summary style="cursor: pointer; color: #2563eb; font-weight: 500; margin-bottom: 12px;">
                View Full Command
            </summary>
            <div style="background: #f8f9fa; padding: 12px; border-radius: 4px; margin-top: 8px;">
                <pre style="margin: 0; white-space: pre-wrap; font-size: 13px; line-height: 1.5;">{content}</pre>
            </div>
        </details>
        <button onclick="navigator.clipboard.writeText(`{escaped_content}`); this.innerText='Copied!'; setTimeout(() => this.innerText='Copy to Clipboard', 2000)"
                style="background: #2563eb; color: white; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer; margin-top: 8px;">
            Copy to Clipboard
        </button>
    </div>
    """
    return card_html

def display_commands(search_term):
    """Main function to display filtered commands"""
    commands_data = load_commands()
    filtered_commands = search_commands(search_term, commands_data)

    if not filtered_commands:
        return "<p style='text-align: center; color: #666; padding: 40px;'>No commands found matching your search.</p>"

    html_output = f"<div style='max-width: 900px; margin: 0 auto;'>"
    html_output += f"<p style='color: #666; margin-bottom: 20px;'>Showing {len(filtered_commands)} command(s)</p>"

    for command in filtered_commands:
        html_output += create_command_card(command)

    html_output += "</div>"
    return html_output

# Create Gradio interface
with gr.Blocks(
    title="Claude Code Slash Commands",
    theme=gr.themes.Soft(),
    css="""
        .gradio-container {
            max-width: 1200px !important;
        }
    """
) as demo:

    gr.Markdown("""
    # Claude Code Slash Commands Collection

    Browse and search through a comprehensive collection of slash commands for Claude Code CLI.
    Use the search box to filter commands by name, then expand any command to view its full content and copy it to your clipboard.

    **Source:** [github.com/danielrosehill/Claude-Slash-Commands](https://github.com/danielrosehill/Claude-Slash-Commands)
    """)

    with gr.Row():
        search_box = gr.Textbox(
            label="Search Commands",
            placeholder="Type to filter commands (e.g., 'git', 'python', 'setup')...",
            scale=4
        )
        search_btn = gr.Button("Search", scale=1, variant="primary")

    commands_display = gr.HTML(value=display_commands(""))

    # Update display when searching
    search_box.change(
        fn=display_commands,
        inputs=[search_box],
        outputs=[commands_display]
    )

    search_btn.click(
        fn=display_commands,
        inputs=[search_box],
        outputs=[commands_display]
    )

    gr.Markdown("""
    ---

    ### About

    This Space displays slash commands for Claude Code, Anthropic's official CLI tool.
    Each command is a reusable prompt template that can be used to automate common tasks.

    **How to use:**
    1. Search for a command using keywords
    2. Click to expand and view the full command content
    3. Click "Copy to Clipboard" to copy the command
    4. Add it to your `.claude/commands/` directory

    **Repository:** [danielrosehill/Claude-Slash-Commands](https://github.com/danielrosehill/Claude-Slash-Commands)
    """)

if __name__ == "__main__":
    demo.launch()