icdev 0.0.3__py3-none-any.whl

tools/dashboard/templates/forge_studio_marketplace.html

@@ -0,0 +1,502 @@
+<!-- CUI // SP-CTI -->
+{% extends "base.html" %}
+{% block title %}Forge Studio — Component Marketplace{% endblock %}
+{% block content %}
+<style>
+/* ---- Layout ---- */
+.fsm-wrap { max-width: 1200px; margin: 0 auto; padding: 24px; }
+.fsm-header { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
+.fsm-header h1 { font-size: 24px; font-weight: 700; color: #e2e8f0; }
+.fsm-header .fsm-back { color: #94a3b8; text-decoration: none; font-size: 18px; }
+.fsm-header .fsm-back:hover { color: #e2e8f0; }
+.fsm-header-actions { margin-left: auto; display: flex; gap: 10px; }
+
+/* ---- Filter bar ---- */
+.fsm-filters { display: flex; gap: 12px; align-items: center; margin-bottom: 24px; background: #1e293b; padding: 14px 16px; border-radius: 10px; flex-wrap: wrap; }
+.fsm-filters select, .fsm-filters input {
+    background: #0f172a; color: #e2e8f0; border: 1px solid #334155; border-radius: 6px;
+    padding: 8px 12px; font-size: 13px; min-width: 140px;
+}
+.fsm-filters select:focus, .fsm-filters input:focus { border-color: #3b82f6; outline: none; }
+.fsm-filters input[type="text"] { flex: 1; min-width: 200px; }
+
+/* ---- Stats ---- */
+.fsm-stats { display: flex; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
+.fsm-stat { background: #1e293b; border: 1px solid #334155; border-radius: 10px; padding: 14px 20px; text-align: center; min-width: 110px; }
+.fsm-stat .val { font-size: 22px; font-weight: 700; color: #3b82f6; }
+.fsm-stat .lbl { font-size: 11px; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.5px; margin-top: 2px; }
+
+/* ---- Grid ---- */
+.fsm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 24px; }
+@media (max-width: 1024px) { .fsm-grid { grid-template-columns: repeat(2, 1fr); } }
+@media (max-width: 640px) { .fsm-grid { grid-template-columns: 1fr; } .fsm-filters { flex-direction: column; } .fsm-stats { flex-direction: column; align-items: stretch; } }
+
+/* ---- Card ---- */
+.fsm-card { background: #1e293b; border: 1px solid #334155; border-radius: 10px; padding: 20px; transition: all .15s; cursor: pointer; display: flex; flex-direction: column; }
+.fsm-card:hover { border-color: #3b82f6; transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,.2); }
+.fsm-card-top { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
+.fsm-card-name { font-size: 15px; font-weight: 600; color: #e2e8f0; flex: 1; }
+.fsm-card-desc { font-size: 13px; color: #94a3b8; line-height: 1.5; margin-bottom: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; flex: 1; }
+.fsm-card-footer { display: flex; align-items: center; gap: 10px; font-size: 11px; color: #64748b; flex-wrap: wrap; margin-top: auto; }
+.fsm-card-footer .author { color: #94a3b8; }
+
+/* ---- Badges ---- */
+.fsm-badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 10px; font-weight: 600; text-transform: uppercase; }
+.fsm-badge-component { background: rgba(59,130,246,.15); color: #3b82f6; }
+.fsm-badge-template { background: rgba(34,197,94,.15); color: #22c55e; }
+.fsm-badge-workflow { background: rgba(245,158,11,.15); color: #f59e0b; }
+.fsm-trust { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 10px; font-weight: 600; }
+.fsm-trust-high { background: rgba(34,197,94,.15); color: #22c55e; }
+.fsm-trust-med { background: rgba(245,158,11,.15); color: #f59e0b; }
+.fsm-trust-low { background: rgba(239,68,68,.15); color: #ef4444; }
+
+/* ---- Stars ---- */
+.fsm-stars { color: #facc15; font-size: 12px; letter-spacing: 1px; }
+.fsm-stars .empty { color: #334155; }
+
+/* ---- Buttons ---- */
+.fsm-btn-primary { background: #3b82f6; color: #fff; border: none; padding: 8px 20px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all .15s; }
+.fsm-btn-primary:hover { filter: brightness(1.15); }
+.fsm-btn-secondary { background: #1e293b; color: #e2e8f0; border: 1px solid #334155; padding: 8px 20px; border-radius: 6px; font-size: 13px; cursor: pointer; transition: all .15s; }
+.fsm-btn-secondary:hover { border-color: #3b82f6; }
+.fsm-btn-sm { padding: 5px 14px; font-size: 12px; }
+.fsm-btn-green { background: #22c55e; color: #fff; border: none; padding: 8px 20px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all .15s; }
+.fsm-btn-green:hover { filter: brightness(1.15); }
+
+/* ---- Download icon ---- */
+.fsm-dl-icon { display: inline-flex; align-items: center; gap: 3px; }
+
+/* ---- Empty state ---- */
+.fsm-empty { text-align: center; padding: 60px 20px; color: #94a3b8; }
+.fsm-empty h3 { font-size: 18px; margin-bottom: 8px; color: #e2e8f0; }
+
+/* ---- Modal / Dialog ---- */
+.fsm-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 1000; align-items: center; justify-content: center; }
+.fsm-overlay.open { display: flex; }
+.fsm-dialog { background: #1e293b; border: 1px solid #334155; border-radius: 12px; width: 640px; max-width: 95vw; max-height: 85vh; overflow-y: auto; padding: 28px; box-shadow: 0 8px 32px rgba(0,0,0,.5); }
+.fsm-dialog h2 { font-size: 18px; font-weight: 700; color: #e2e8f0; margin-bottom: 16px; }
+.fsm-dialog-footer { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
+
+/* ---- Form fields ---- */
+.fsm-field { margin-bottom: 14px; }
+.fsm-field label { display: block; font-size: 12px; color: #94a3b8; margin-bottom: 4px; font-weight: 500; }
+.fsm-field input, .fsm-field select, .fsm-field textarea {
+    width: 100%; background: #0f172a; color: #e2e8f0; border: 1px solid #334155; border-radius: 6px;
+    padding: 8px 12px; font-size: 13px; font-family: inherit;
+}
+.fsm-field input:focus, .fsm-field select:focus, .fsm-field textarea:focus { border-color: #3b82f6; outline: none; }
+.fsm-field textarea { min-height: 100px; resize: vertical; }
+.fsm-field-row { display: flex; gap: 12px; }
+.fsm-field-row .fsm-field { flex: 1; }
+
+/* ---- Detail modal specifics ---- */
+.fsm-detail-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
+.fsm-detail-header h2 { margin-bottom: 0; flex: 1; }
+.fsm-detail-meta { display: flex; gap: 16px; font-size: 12px; color: #94a3b8; margin-bottom: 16px; flex-wrap: wrap; }
+.fsm-detail-desc { font-size: 14px; color: #cbd5e1; line-height: 1.6; margin-bottom: 16px; }
+.fsm-detail-content { background: #0f172a; border: 1px solid #334155; border-radius: 8px; padding: 14px; font-size: 12px; font-family: 'Consolas', 'Monaco', monospace; color: #94a3b8; max-height: 260px; overflow: auto; margin-bottom: 16px; white-space: pre-wrap; word-break: break-all; }
+.fsm-rating-form { background: #0f172a; border: 1px solid #334155; border-radius: 8px; padding: 16px; margin-top: 16px; }
+.fsm-rating-form h4 { font-size: 13px; color: #e2e8f0; margin-bottom: 10px; }
+.fsm-rating-stars { display: flex; gap: 4px; margin-bottom: 10px; }
+.fsm-rating-stars span { font-size: 22px; color: #334155; cursor: pointer; transition: color .1s; }
+.fsm-rating-stars span.active { color: #facc15; }
+.fsm-rating-stars span:hover, .fsm-rating-stars span:hover ~ span { color: #facc15; }
+.fsm-rating-form textarea { width: 100%; min-height: 60px; background: #1e293b; border: 1px solid #334155; border-radius: 6px; color: #e2e8f0; padding: 8px; font-size: 13px; font-family: inherit; resize: vertical; }
+.fsm-rating-form textarea:focus { border-color: #3b82f6; outline: none; }
+
+/* ---- Toast ---- */
+.fsm-toast { position: fixed; bottom: 24px; right: 24px; background: #22c55e; color: #fff; padding: 12px 20px; border-radius: 8px; font-size: 13px; font-weight: 600; z-index: 2000; display: none; box-shadow: 0 4px 12px rgba(0,0,0,.3); }
+.fsm-toast.error { background: #ef4444; }
+</style>
+
+<div class="fsm-wrap">
+    <!-- Header -->
+    <div class="fsm-header">
+        <a href="/forge-studio" class="fsm-back">&larr; Forge Studio</a>
+        <h1>Component Marketplace</h1>
+        <div class="fsm-header-actions">
+            <button class="fsm-btn-secondary fsm-btn-sm" onclick="seedBuiltins()">Seed Built-in Items</button>
+            <button class="fsm-btn-primary fsm-btn-sm" onclick="openPublishDialog()">Publish Item</button>
+        </div>
+    </div>
+
+    <!-- Stats -->
+    <div class="fsm-stats">
+        <div class="fsm-stat"><div class="val" id="stat-total">-</div><div class="lbl">Items</div></div>
+        <div class="fsm-stat"><div class="val" id="stat-components">-</div><div class="lbl">Components</div></div>
+        <div class="fsm-stat"><div class="val" id="stat-templates">-</div><div class="lbl">Templates</div></div>
+        <div class="fsm-stat"><div class="val" id="stat-workflows">-</div><div class="lbl">Workflows</div></div>
+        <div class="fsm-stat"><div class="val" id="stat-downloads">-</div><div class="lbl">Downloads</div></div>
+    </div>
+
+    <!-- Filter bar -->
+    <div class="fsm-filters">
+        <select id="filter-type" onchange="loadItems()">
+            <option value="">All Types</option>
+            <option value="component">Component</option>
+            <option value="template">Template</option>
+            <option value="workflow">Workflow</option>
+        </select>
+        <select id="filter-category" onchange="loadItems()">
+            <option value="">All Categories</option>
+            <option value="CRUD">CRUD</option>
+            <option value="Dashboard">Dashboard</option>
+            <option value="Form">Form</option>
+            <option value="E-Commerce">E-Commerce</option>
+            <option value="Admin">Admin</option>
+            <option value="IoT">IoT</option>
+            <option value="Analytics">Analytics</option>
+            <option value="Utility">Utility</option>
+        </select>
+        <input type="text" id="filter-search" placeholder="Search marketplace..." onkeyup="debounceSearch()" />
+        <select id="filter-sort" onchange="loadItems()">
+            <option value="downloads">Most Downloads</option>
+            <option value="newest">Newest</option>
+            <option value="name">Name A-Z</option>
+        </select>
+    </div>
+
+    <!-- Grid -->
+    <div class="fsm-grid" id="item-grid"></div>
+    <div class="fsm-empty" id="empty-state" style="display: none;">
+        <h3>No marketplace items found</h3>
+        <p>Publish your first component, template, or workflow to get started.</p>
+    </div>
+</div>
+
+<!-- Item Detail Modal -->
+<div class="fsm-overlay" id="detail-overlay" onclick="if(event.target===this)closeDetail()">
+    <div class="fsm-dialog" id="detail-dialog"></div>
+</div>
+
+<!-- Publish Dialog -->
+<div class="fsm-overlay" id="publish-overlay" onclick="if(event.target===this)closePublishDialog()">
+    <div class="fsm-dialog">
+        <h2>Publish to Marketplace</h2>
+        <div class="fsm-field-row">
+            <div class="fsm-field">
+                <label>Type</label>
+                <select id="pub-type">
+                    <option value="component">Component</option>
+                    <option value="template">Template</option>
+                    <option value="workflow">Workflow</option>
+                </select>
+            </div>
+            <div class="fsm-field">
+                <label>Category</label>
+                <select id="pub-category">
+                    <option value="CRUD">CRUD</option>
+                    <option value="Dashboard">Dashboard</option>
+                    <option value="Form">Form</option>
+                    <option value="E-Commerce">E-Commerce</option>
+                    <option value="Admin">Admin</option>
+                    <option value="IoT">IoT</option>
+                    <option value="Analytics">Analytics</option>
+                    <option value="Utility">Utility</option>
+                </select>
+            </div>
+        </div>
+        <div class="fsm-field">
+            <label>Name</label>
+            <input type="text" id="pub-name" placeholder="e.g. Data Table Component" />
+        </div>
+        <div class="fsm-field">
+            <label>Description</label>
+            <textarea id="pub-description" rows="3" placeholder="Describe what this item does..."></textarea>
+        </div>
+        <div class="fsm-field">
+            <label>Tags (comma-separated)</label>
+            <input type="text" id="pub-tags" placeholder="e.g. table, data, sortable" />
+        </div>
+        <div class="fsm-field">
+            <label>Content (JSON)</label>
+            <textarea id="pub-content" rows="6" placeholder='{"components": [...], "config": {...}}'></textarea>
+        </div>
+        <div class="fsm-dialog-footer">
+            <button class="fsm-btn-secondary" onclick="closePublishDialog()">Cancel</button>
+            <button class="fsm-btn-green" onclick="publishItem()">Publish</button>
+        </div>
+    </div>
+</div>
+
+<!-- Toast -->
+<div class="fsm-toast" id="toast"></div>
+
+{% raw %}
+<script>
+const API = '/api/forge-studio/marketplace';
+let searchTimer = null;
+
+/* ---- Load items ---- */
+async function loadItems() {
+    const type = document.getElementById('filter-type').value;
+    const category = document.getElementById('filter-category').value;
+    const query = document.getElementById('filter-search').value.trim();
+    const sort = document.getElementById('filter-sort').value;
+
+    const params = new URLSearchParams();
+    if (type) params.set('type', type);
+    if (category) params.set('category', category);
+    if (query) params.set('query', query);
+    if (sort) params.set('sort', sort);
+
+    try {
+        const resp = await fetch(`${API}/browse?${params.toString()}`);
+        const data = await resp.json();
+        const items = data.items || data || [];
+        renderGrid(items);
+        updateStats(items);
+    } catch (err) {
+        console.error('Failed to load marketplace items:', err);
+        renderGrid([]);
+    }
+}
+
+function updateStats(items) {
+    document.getElementById('stat-total').textContent = items.length;
+    document.getElementById('stat-components').textContent = items.filter(i => i.type === 'component').length;
+    document.getElementById('stat-templates').textContent = items.filter(i => i.type === 'template').length;
+    document.getElementById('stat-workflows').textContent = items.filter(i => i.type === 'workflow').length;
+    const totalDl = items.reduce((s, i) => s + (i.download_count || 0), 0);
+    document.getElementById('stat-downloads').textContent = totalDl;
+}
+
+function renderGrid(items) {
+    const grid = document.getElementById('item-grid');
+    const empty = document.getElementById('empty-state');
+
+    if (!items.length) {
+        grid.innerHTML = '';
+        empty.style.display = 'block';
+        return;
+    }
+    empty.style.display = 'none';
+
+    grid.innerHTML = items.map(item => {
+        const typeCls = 'fsm-badge-' + (item.type || 'component');
+        const stars = renderStars(item.avg_rating || 0);
+        const trust = item.trust_score != null ? item.trust_score : 0;
+        const trustCls = trust > 0.7 ? 'fsm-trust-high' : trust >= 0.4 ? 'fsm-trust-med' : 'fsm-trust-low';
+        const desc = escHtml(item.description || 'No description');
+        const name = escHtml(item.name || 'Untitled');
+        const author = escHtml(item.author || 'Unknown');
+
+        return `<div class="fsm-card" onclick="openDetail('${item.id}')">
+            <div class="fsm-card-top">
+                <span class="fsm-badge ${typeCls}">${escHtml(item.type || 'component')}</span>
+                <span class="fsm-card-name">${name}</span>
+            </div>
+            <div class="fsm-card-desc">${desc}</div>
+            <div class="fsm-card-footer">
+                <span class="author">${author}</span>
+                <span class="fsm-stars">${stars}</span>
+                <span class="fsm-dl-icon">&darr; ${item.download_count || 0}</span>
+                <span class="fsm-trust ${trustCls}">${trust.toFixed(2)}</span>
+            </div>
+        </div>`;
+    }).join('');
+}
+
+function renderStars(rating) {
+    const full = Math.round(rating);
+    let s = '';
+    for (let i = 1; i <= 5; i++) {
+        s += i <= full ? '&#9733;' : '<span class="empty">&#9733;</span>';
+    }
+    return s;
+}
+
+/* ---- Detail modal ---- */
+async function openDetail(itemId) {
+    const overlay = document.getElementById('detail-overlay');
+    const dialog = document.getElementById('detail-dialog');
+    dialog.innerHTML = '<p style="color:#94a3b8;text-align:center;padding:40px;">Loading...</p>';
+    overlay.classList.add('open');
+
+    try {
+        const resp = await fetch(`${API}/${itemId}`);
+        const item = await resp.json();
+        renderDetail(item);
+    } catch (err) {
+        dialog.innerHTML = '<p style="color:#ef4444;text-align:center;padding:40px;">Failed to load item details.</p>';
+    }
+}
+
+function renderDetail(item) {
+    const dialog = document.getElementById('detail-dialog');
+    const typeCls = 'fsm-badge-' + (item.type || 'component');
+    const stars = renderStars(item.avg_rating || 0);
+    const trust = item.trust_score != null ? item.trust_score : 0;
+    const trustCls = trust > 0.7 ? 'fsm-trust-high' : trust >= 0.4 ? 'fsm-trust-med' : 'fsm-trust-low';
+    const contentJson = typeof item.content === 'object' ? JSON.stringify(item.content, null, 2) : (item.content || '{}');
+    const tags = (item.tags || []).map(t => `<span class="fsm-badge" style="background:#334155;color:#94a3b8;margin:2px">${escHtml(t)}</span>`).join(' ');
+
+    dialog.innerHTML = `
+        <div class="fsm-detail-header">
+            <span class="fsm-badge ${typeCls}">${escHtml(item.type || 'component')}</span>
+            <h2>${escHtml(item.name || 'Untitled')}</h2>
+        </div>
+        <div class="fsm-detail-meta">
+            <span>By <strong>${escHtml(item.author || 'Unknown')}</strong></span>
+            <span class="fsm-stars">${stars}</span>
+            <span>&darr; ${item.download_count || 0} downloads</span>
+            <span class="fsm-trust ${trustCls}">Trust: ${trust.toFixed(2)}</span>
+            <span>${escHtml(item.category || '')}</span>
+        </div>
+        ${tags ? '<div style="margin-bottom:12px">' + tags + '</div>' : ''}
+        <div class="fsm-detail-desc">${escHtml(item.description || 'No description')}</div>
+        <h4 style="font-size:13px;color:#94a3b8;margin-bottom:6px;">Content Preview</h4>
+        <div class="fsm-detail-content">${escHtml(contentJson)}</div>
+        <div style="display:flex;gap:10px;margin-bottom:8px;">
+            <button class="fsm-btn-green" onclick="installItem('${item.id}')">Install</button>
+            <button class="fsm-btn-secondary" onclick="closeDetail()">Close</button>
+        </div>
+        <div class="fsm-rating-form">
+            <h4>Rate this item</h4>
+            <div class="fsm-rating-stars" id="rating-stars">
+                <span onclick="setRating(1)" data-val="1">&#9733;</span>
+                <span onclick="setRating(2)" data-val="2">&#9733;</span>
+                <span onclick="setRating(3)" data-val="3">&#9733;</span>
+                <span onclick="setRating(4)" data-val="4">&#9733;</span>
+                <span onclick="setRating(5)" data-val="5">&#9733;</span>
+            </div>
+            <textarea id="rating-review" placeholder="Write a short review (optional)..."></textarea>
+            <div style="margin-top:8px;">
+                <button class="fsm-btn-primary fsm-btn-sm" onclick="submitRating('${item.id}')">Submit Rating</button>
+            </div>
+        </div>`;
+}
+
+let currentRating = 0;
+function setRating(val) {
+    currentRating = val;
+    const stars = document.querySelectorAll('#rating-stars span');
+    stars.forEach(s => {
+        const sv = parseInt(s.getAttribute('data-val'));
+        if (sv <= val) { s.classList.add('active'); } else { s.classList.remove('active'); }
+    });
+}
+
+async function submitRating(itemId) {
+    if (currentRating < 1) { showToast('Please select a rating', true); return; }
+    const review = document.getElementById('rating-review').value.trim();
+    try {
+        const resp = await fetch(`${API}/${itemId}/rate`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ rating: currentRating, review: review })
+        });
+        if (!resp.ok) throw new Error('Rating failed');
+        showToast('Rating submitted');
+        currentRating = 0;
+        openDetail(itemId);
+    } catch (err) {
+        showToast('Failed to submit rating', true);
+    }
+}
+
+function closeDetail() {
+    document.getElementById('detail-overlay').classList.remove('open');
+    currentRating = 0;
+}
+
+/* ---- Install ---- */
+async function installItem(itemId) {
+    const appId = prompt('Enter App ID to install into (leave blank for standalone):');
+    const params = new URLSearchParams();
+    if (appId) params.set('app_id', appId);
+    try {
+        const resp = await fetch(`${API}/${itemId}/install?${params.toString()}`, { method: 'POST' });
+        if (!resp.ok) throw new Error('Install failed');
+        showToast('Item installed successfully');
+        loadItems();
+    } catch (err) {
+        showToast('Failed to install item', true);
+    }
+}
+
+/* ---- Publish ---- */
+function openPublishDialog() {
+    document.getElementById('publish-overlay').classList.add('open');
+}
+function closePublishDialog() {
+    document.getElementById('publish-overlay').classList.remove('open');
+}
+
+async function publishItem() {
+    const name = document.getElementById('pub-name').value.trim();
+    const description = document.getElementById('pub-description').value.trim();
+    const type = document.getElementById('pub-type').value;
+    const category = document.getElementById('pub-category').value;
+    const tagsRaw = document.getElementById('pub-tags').value.trim();
+    const contentRaw = document.getElementById('pub-content').value.trim();
+
+    if (!name) { showToast('Name is required', true); return; }
+    if (!description) { showToast('Description is required', true); return; }
+
+    let content = {};
+    if (contentRaw) {
+        try { content = JSON.parse(contentRaw); }
+        catch (e) { showToast('Invalid JSON in content field', true); return; }
+    }
+
+    const tags = tagsRaw ? tagsRaw.split(',').map(t => t.trim()).filter(Boolean) : [];
+
+    try {
+        const resp = await fetch(`${API}/publish`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ name, description, type, category, tags, content })
+        });
+        if (!resp.ok) throw new Error('Publish failed');
+        showToast('Item published successfully');
+        closePublishDialog();
+        document.getElementById('pub-name').value = '';
+        document.getElementById('pub-description').value = '';
+        document.getElementById('pub-tags').value = '';
+        document.getElementById('pub-content').value = '';
+        loadItems();
+    } catch (err) {
+        showToast('Failed to publish item', true);
+    }
+}
+
+/* ---- Seed ---- */
+async function seedBuiltins() {
+    try {
+        const resp = await fetch(`${API}/seed`, { method: 'POST' });
+        if (!resp.ok) throw new Error('Seed failed');
+        const data = await resp.json();
+        showToast('Seeded ' + (data.count || 'built-in') + ' items');
+        loadItems();
+    } catch (err) {
+        showToast('Failed to seed items', true);
+    }
+}
+
+/* ---- Debounce search ---- */
+function debounceSearch() {
+    clearTimeout(searchTimer);
+    searchTimer = setTimeout(loadItems, 300);
+}
+
+/* ---- Util ---- */
+function escHtml(s) {
+    const d = document.createElement('div');
+    d.textContent = s;
+    return d.innerHTML;
+}
+
+function showToast(msg, isError) {
+    const t = document.getElementById('toast');
+    t.textContent = msg;
+    t.className = 'fsm-toast' + (isError ? ' error' : '');
+    t.style.display = 'block';
+    setTimeout(() => { t.style.display = 'none'; }, 3000);
+}
+
+/* ---- Init ---- */
+document.addEventListener('DOMContentLoaded', loadItems);
+</script>
+{% endraw %}
+{% endblock %}