claude-code-templates 1.21.13 → 1.21.14

package/docs/js/trending.js

@@ -18,6 +18,7 @@ class TrendingPage {
             this.setupEventListeners();
             this.renderHeroStats();
             this.renderPopularItems();
+            this.renderTopCountries();
             this.renderChart();
             this.renderTrendingItems();
         } catch (error) {
@@ -115,14 +116,13 @@ class TrendingPage {
             return;
         }
 
-        // Define categories to show and their display info
+        // Define categories to show and their display info (excluding templates)
         const categories = [
             { key: 'agents', title: 'Agents', icon: 'M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Zm7-3.25a.75.75 0 0 0-1.5 0v2.5h-2.5a.75.75 0 0 0 0 1.5h2.5v2.5a.75.75 0 0 0 1.5 0v-2.5h2.5a.75.75 0 0 0 0-1.5h-2.5v-2.5Z' },
             { key: 'commands', title: 'Commands', icon: 'M8 4a4 4 0 1 1 0 8 4 4 0 0 1 0-8zM2.5 8a5.5 5.5 0 1 0 11 0 5.5 5.5 0 0 0-11 0z' },
             { key: 'mcps', title: 'MCPs', icon: 'M2.5 3A1.5 1.5 0 0 0 1 4.5v.793c0 .026.009.051.025.072L2.5 7a.5.5 0 0 1 0 .708L1.025 9.133a.149.149 0 0 0-.025.072V10.5A1.5 1.5 0 0 0 2.5 12h2.793a.149.149 0 0 0 .072-.025L7 10.5a.5.5 0 0 1 .708 0l1.625 1.475c.021.016.046.025.072.025H12.5A1.5 1.5 0 0 0 14 10.5v-.793a.149.149 0 0 0-.025-.072L12.5 8a.5.5 0 0 1 0-.708l1.475-1.625a.149.149 0 0 0 .025-.072V4.5A1.5 1.5 0 0 0 12.5 3H9.707a.149.149 0 0 0-.072.025L8 4.5a.5.5 0 0 1-.708 0L5.867 3.025A.149.149 0 0 0 5.793 3H2.5z' },
             { key: 'settings', title: 'Settings', icon: 'M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492zM5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0z' },
-            { key: 'hooks', title: 'Hooks', icon: 'M1.5 1.5A.5.5 0 0 0 1 2v4.8a2.5 2.5 0 0 0 2.5 2.5h9.793l-3.347 3.346a.5.5 0 0 0 .708.708l4.2-4.2a.5.5 0 0 0 0-.708l-4.2-4.2a.5.5 0 0 0-.708.708L13.293 8.3H3.5A1.5 1.5 0 0 1 2 6.8V2a.5.5 0 0 0-.5-.5z' },
-            { key: 'templates', title: 'Templates', icon: 'M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v12.5A1.75 1.75 0 0 1 14.25 16H1.75A1.75 1.75 0 0 1 0 14.25V1.75zm1.75-.25a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h12.5a.25.25 0 0 0 .25-.25V1.75a.25.25 0 0 0-.25-.25H1.75zM7.25 4a.75.75 0 0 1 1.5 0v4.25H12a.75.75 0 0 1 0 1.5H8.75V12a.75.75 0 0 1-1.5 0V9.75H4a.75.75 0 0 1 0-1.5h3.25V4z' }
+            { key: 'hooks', title: 'Hooks', icon: 'M1.5 1.5A.5.5 0 0 0 1 2v4.8a2.5 2.5 0 0 0 2.5 2.5h9.793l-3.347 3.346a.5.5 0 0 0 .708.708l4.2-4.2a.5.5 0 0 0 0-.708l-4.2-4.2a.5.5 0 0 0-.708.708L13.293 8.3H3.5A1.5 1.5 0 0 1 2 6.8V2a.5.5 0 0 0-.5-.5z' }
         ];
 
         container.innerHTML = '';
@@ -142,6 +142,31 @@ class TrendingPage {
         });
     }
 
+    renderTopCountries() {
+        const container = document.getElementById('top-countries-list');
+        if (!container || !this.data || !this.data.topCountries) {
+            return;
+        }
+
+        const topCountries = this.data.topCountries;
+
+        container.innerHTML = topCountries.map(country => `
+            <div class="country-item">
+                <div class="country-flag">${country.flag}</div>
+                <div class="country-info">
+                    <div class="country-name">${country.name}</div>
+                    <div class="country-stats">
+                        <span class="country-downloads">${country.downloads.toLocaleString()}</span>
+                        <span class="country-percentage">(${country.percentage}%)</span>
+                    </div>
+                    <div class="country-bar-container">
+                        <div class="country-bar" style="width: ${country.percentage}%"></div>
+                    </div>
+                </div>
+            </div>
+        `).join('');
+    }
+
     createPopularItemCard(category, item) {
         const itemElement = document.createElement('div');
         itemElement.className = 'popular-item';
@@ -187,18 +212,17 @@ class TrendingPage {
             return;
         }
 
-        // Chart colors matching terminal theme
+        // Chart colors matching terminal theme (excluding templates)
         const colors = {
             commands: '#10b981',    // emerald (green)
             agents: '#f59e0b',      // amber (yellow)
             mcps: '#3b82f6',        // blue
             settings: '#8b5cf6',    // violet
-            hooks: '#f97316',       // orange
-            templates: '#06b6d4'    // cyan
+            hooks: '#f97316'        // orange
         };
 
-        // Define the desired order for the legend (agents first - most popular)
-        const categoryOrder = ['agents', 'commands', 'mcps', 'settings', 'hooks', 'templates'];
+        // Define the desired order for the legend (agents first - most popular, excluding templates)
+        const categoryOrder = ['agents', 'commands', 'mcps', 'settings', 'hooks'];
 
         // Prepare datasets in the specified order
         const datasets = categoryOrder
@@ -594,45 +618,56 @@ document.addEventListener('DOMContentLoaded', () => {
 function showInstallModal(componentName) {
     const modal = document.getElementById('installModal');
     const commandText = document.getElementById('commandText');
-    
+
     // Determine the component type from the current filter or component name
     let componentType = 'command'; // default
-    
+    let componentCategory = '';
+
     // Get the current trending page instance to check the type
     if (window.trendingPageInstance) {
         componentType = window.trendingPageInstance.currentType || 'commands';
+
+        // Find the component in the data to get its category
+        const items = window.trendingPageInstance.data.trending[componentType] || [];
+        const item = items.find(i => (i.id || i.name) === componentName);
+        if (item && item.category) {
+            componentCategory = item.category;
+        }
     }
-    
+
     // Convert plural to singular for the command flag
     const typeMap = {
         'agents': 'agent',
-        'commands': 'command', 
+        'commands': 'command',
         'settings': 'setting',
         'hooks': 'hook',
         'mcps': 'mcp',
         'templates': 'template'
     };
-    
+
     const flagType = typeMap[componentType] || 'command';
-    
+
     // Clean the component name by removing prefixes
     let cleanName = componentName;
     const prefixesToRemove = ['agent-', 'command-', 'setting-', 'hook-', 'mcp-', 'template-'];
-    
+
     for (const prefix of prefixesToRemove) {
         if (cleanName.startsWith(prefix)) {
             cleanName = cleanName.substring(prefix.length);
             break;
         }
     }
-    
-    // Update the command with the correct flag and clean component name
-    const command = `npx claude-code-templates@latest --${flagType} ${cleanName} --yes`;
+
+    // Build the full component path: category/name
+    const componentPath = componentCategory ? `${componentCategory}/${cleanName}` : cleanName;
+
+    // Update the command with the correct flag and full component path
+    const command = `npx claude-code-templates@latest --${flagType} ${componentPath} --yes`;
     commandText.textContent = command;
-    
+
     // Show the modal
     modal.classList.add('show');
-    
+
     // Prevent body scrolling
     document.body.style.overflow = 'hidden';
 }

package/docs/plugin.html

@@ -0,0 +1,262 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Plugin Details - Claude Code Templates</title>
+    <!-- Favicon -->
+    <link rel="icon" type="image/x-icon" href="static/favicon/favicon.ico">
+    <link rel="icon" type="image/png" sizes="16x16" href="static/favicon/favicon-16x16.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="static/favicon/favicon-32x32.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="static/favicon/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="192x192" href="static/favicon/android-chrome-192x192.png">
+    <link rel="icon" type="image/png" sizes="512x512" href="static/favicon/android-chrome-512x512.png">
+
+    <meta name="description" content="Plugin details for Claude Code Templates">
+
+    <link rel="stylesheet" href="/css/styles.css">
+    <link rel="stylesheet" href="/css/plugin-page.css">
+    <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=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+</head>
+<body>
+    <header class="header">
+        <div class="container">
+            <div class="header-content">
+                <div class="terminal-header">
+                    <div class="ascii-title">
+                        <pre class="ascii-art"> ██████╗██╗      █████╗ ██╗   ██╗██████╗ ███████╗    ██████╗ ██████╗ ██████╗ ███████╗    ████████╗███████╗███╗   ███╗██████╗ ██╗      █████╗ ████████╗███████╗███████╗
+██╔════╝██║     ██╔══██╗██║   ██║██╔══██╗██╔════╝   ██╔════╝██╔═══██╗██╔══██╗██╔════╝    ╚══██╔══╝██╔════╝████╗ ████║██╔══██╗██║     ██╔══██╗╚══██╔══╝██╔════╝██╔════╝
+██║     ██║     ███████║██║   ██║██║  ██║█████╗     ██║     ██║   ██║██║  ██║█████╗         ██║   █████╗  ██╔████╔██║██████╔╝██║     ███████║   ██║   █████╗  ███████╗
+██║     ██║     ██╔══██║██║   ██║██║  ██║██╔══╝     ██║     ██║   ██║██║  ██║██╔══╝         ██║   ██╔══╝  ██║╚██╔╝██║██╔═══╝ ██║     ██╔══██║   ██║   ██╔══╝  ╚════██║
+╚██████╗███████╗██║  ██║╚██████╔╝██████╔╝███████╗   ╚██████╗╚██████╔╝██████╔╝███████╗       ██║   ███████╗██║ ╚═╝ ██║██║     ███████╗██║  ██║   ██║   ███████╗███████║
+ ╚═════╝╚══════╝╚═╝  ╚═╝ ╚═════╝ ╚═════╝ ╚══════╝    ╚═════╝ ╚═════╝ ╚═════╝ ╚══════╝       ╚═╝   ╚══════╝╚═╝     ╚═╝╚═╝     ╚══════╝╚═╝  ╚═╝   ╚═╝   ╚══════╝╚══════╝</pre>
+                    </div>
+                    <div class="terminal-subtitle">
+                        <span class="status-dot"></span>
+                        Ready-to-use configurations for your <strong>Claude Code</strong> projects
+                    </div>
+                </div>
+                <div class="header-actions">
+                    <a href="https://www.anthropic.com/claude-code?ref=aitmpl.com" target="_blank" class="header-btn anthropic-btn" title="Learn about Anthropic's Claude Code">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+                            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
+                        </svg>
+                        Claude Code
+                    </a>
+                    <a href="/blog/index.html" class="header-btn">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+                            <path d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z"/>
+                        </svg>
+                        Blog
+                    </a>
+                    <a href="https://github.com/davila7/claude-code-templates" target="_blank" class="header-btn">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+                            <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.30.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>
+                </div>
+            </div>
+        </div>
+    </header>
+
+    <main class="plugin-detail-page">
+        <!-- Back Navigation -->
+        <div class="back-navigation">
+            <div class="container">
+                <a href="/plugins" class="back-link">
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+                        <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.42-1.41L7.83 13H20v-2z"/>
+                    </svg>
+                    Back to Plugins
+                </a>
+            </div>
+        </div>
+
+        <div class="container">
+            <!-- Loading State -->
+            <div id="loading" class="loading-state">
+                <div class="loading-spinner"></div>
+                <p>Loading plugin details...</p>
+            </div>
+
+            <!-- Error State -->
+            <div id="error" class="error-state" style="display: none;">
+                <div class="error-icon">⚠️</div>
+                <h2>Plugin Not Found</h2>
+                <p>The plugin you're looking for doesn't exist or has been removed.</p>
+                <a href="/plugins" class="back-button">Browse All Plugins</a>
+            </div>
+
+            <!-- Plugin Content -->
+            <div id="pluginContent" class="plugin-content" style="display: none;">
+                <!-- Hero Section -->
+                <section class="plugin-hero">
+                    <div class="plugin-icon">
+                        <span class="component-icon">🧩</span>
+                    </div>
+                    <div class="plugin-header-info">
+                        <div class="plugin-meta">
+                            <span class="plugin-version" id="pluginVersion">v1.0.0</span>
+                            <span class="plugin-author" id="pluginAuthor">Author</span>
+                        </div>
+                        <h1 id="pluginName">Plugin Name</h1>
+                        <p class="plugin-description" id="pluginDescription">Plugin description goes here</p>
+                        <div class="plugin-keywords" id="pluginKeywords"></div>
+                    </div>
+                </section>
+
+                <!-- Installation Section -->
+                <section class="installation-section">
+                    <h2>Installation</h2>
+                    <div class="installation-steps">
+                        <div class="step">
+                            <div class="step-number">1</div>
+                            <div class="step-content">
+                                <h3>Add Marketplace</h3>
+                                <div class="command-box">
+                                    <code id="addMarketplaceCmd">/plugin marketplace add https://github.com/davila7/claude-code-templates</code>
+                                    <button class="copy-btn" onclick="copyCommand('addMarketplaceCmd', event)">
+                                        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+                                            <path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/>
+                                        </svg>
+                                        Copy
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="step">
+                            <div class="step-number">2</div>
+                            <div class="step-content">
+                                <h3>Install Plugin</h3>
+                                <div class="command-box">
+                                    <code id="installPluginCmd">/plugin install plugin-name</code>
+                                    <button class="copy-btn" onclick="copyCommand('installPluginCmd', event)">
+                                        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+                                            <path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/>
+                                        </svg>
+                                        Copy
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </section>
+
+                <!-- Components Section -->
+                <section class="components-section">
+                    <h2>Included Components</h2>
+                    <div class="components-grid">
+                        <!-- Commands -->
+                        <div class="component-category" id="commandsSection" style="display: none;">
+                            <div class="category-header">
+                                <span class="category-icon">⚡</span>
+                                <h3>Commands (<span id="commandsCount">0</span>)</h3>
+                            </div>
+                            <ul class="component-list" id="commandsList"></ul>
+                        </div>
+
+                        <!-- Agents -->
+                        <div class="component-category" id="agentsSection" style="display: none;">
+                            <div class="category-header">
+                                <span class="category-icon">🤖</span>
+                                <h3>Agents (<span id="agentsCount">0</span>)</h3>
+                            </div>
+                            <ul class="component-list" id="agentsList"></ul>
+                        </div>
+
+                        <!-- MCPs -->
+                        <div class="component-category" id="mcpsSection" style="display: none;">
+                            <div class="category-header">
+                                <span class="category-icon">🔌</span>
+                                <h3>MCP Servers (<span id="mcpsCount">0</span>)</h3>
+                            </div>
+                            <ul class="component-list" id="mcpsList"></ul>
+                        </div>
+                    </div>
+                </section>
+
+                <!-- Related Plugins -->
+                <section class="related-section">
+                    <h2>Related Plugins</h2>
+                    <div class="related-plugins" id="relatedPlugins"></div>
+                </section>
+            </div>
+        </div>
+    </main>
+
+    <footer class="footer">
+        <div class="container">
+            <div class="footer-content">
+                <div class="footer-left">
+                    <div class="footer-ascii">
+                        <pre class="footer-ascii-art"> █████╗ ██╗████████╗███╗   ███╗██████╗ ██╗
+██╔══██╗██║╚══██╔══╝████╗ ████║██╔══██╗██║
+███████║██║   ██║   ██╔████╔██║██████╔╝██║
+██╔══██║██║   ██║   ██║╚██╔╝██║██╔═══╝ ██║
+██║  ██║██║   ██║   ██║ ╚═╝ ██║██║     ███████╗
+╚═╝  ╚═╝╚═╝   ╚═╝   ╚═╝     ╚═╝╚═╝     ╚══════╝</pre>
+                        <p class="footer-tagline">Supercharge Anthropic's Claude Code</p>
+                    </div>
+                </div>
+
+                <div class="footer-right">
+                    <p class="footer-copyright">&copy; 2025 Claude Code Templates. Open source project.</p>
+                    <div class="footer-links">
+                        <a href="/trending.html" class="footer-link">
+                            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+                                <path d="M16,6L18.29,8.29L13.41,13.17L9.41,9.17L2,16.59L3.41,18L9.41,12L13.41,16L19.71,9.71L22,12V6H16Z"/>
+                            </svg>
+                            Trending
+                        </a>
+                        <a href="https://docs.aitmpl.com/" target="_blank" class="footer-link">
+                            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+                                <path d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z"/>
+                            </svg>
+                            Documentation
+                        </a>
+                        <a href="https://github.com/davila7/claude-code-templates" target="_blank" class="footer-link">
+                            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+                                <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.30 3.297-1.30.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>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </footer>
+
+    <!-- Install Command Modal -->
+    <div id="installModal" class="modal" style="display: none;">
+        <div class="modal-overlay" onclick="window.pluginPageManager.closeInstallModal()"></div>
+        <div class="modal-content">
+            <div class="modal-header">
+                <h3>Installation Command</h3>
+                <button class="modal-close" onclick="window.pluginPageManager.closeInstallModal()">
+                    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+                        <path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"/>
+                    </svg>
+                </button>
+            </div>
+            <div class="modal-body">
+                <p class="modal-description">Copy and run this command in your terminal to install this component:</p>
+                <div class="modal-command-box">
+                    <code id="modalCommand"></code>
+                    <button class="modal-copy-btn" onclick="window.pluginPageManager.copyModalCommand()">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+                            <path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/>
+                        </svg>
+                        Copy Command
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script src="/js/utils.js"></script>
+    <script src="/js/plugin-page.js"></script>
+</body>
+</html>

package/docs/sandbox-interface.html

@@ -4,6 +4,14 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Claude Code Studio - AI Development Interface</title>
+    <!-- Favicon -->
+    <link rel="icon" type="image/x-icon" href="static/favicon/favicon.ico">
+    <link rel="icon" type="image/png" sizes="16x16" href="static/favicon/favicon-16x16.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="static/favicon/favicon-32x32.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="static/favicon/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="192x192" href="static/favicon/android-chrome-192x192.png">
+    <link rel="icon" type="image/png" sizes="512x512" href="static/favicon/android-chrome-512x512.png">
+
     <meta name="description" content="Execute Claude Code locally or in cloud sandbox environments with real-time task management">
     
     <link rel="stylesheet" href="css/styles.css">

package/docs/static/favicon/about.txt

@@ -0,0 +1,6 @@
+This favicon was generated using the following font:
+
+- Font Title: Leckerli One
+- Font Author: undefined
+- Font Source: https://fonts.gstatic.com/s/leckerlione/v21/V8mCoQH8VCsNttEnxnGQ-1itLZxcBtItFw.ttf
+- Font License: undefined)

package/docs/static/favicon/site.webmanifest

@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}