cloudfrontize 1.1.7 → 1.3.0

package/dist/ui/app.js

@@ -0,0 +1,399 @@
+'use strict';
+
+/**
+ * CloudFrontize Developer UI - Client Logic
+ */
+
+document.addEventListener('DOMContentLoaded', () => {
+    const requestFeed = document.getElementById('request-feed');
+    const portDisplay = document.getElementById('current-port');
+    
+    // Tab Switching
+    const tabBtns = document.querySelectorAll('.tab-btn');
+    const tabContents = document.querySelectorAll('.tab-content');
+
+    tabBtns.forEach(btn => {
+        btn.addEventListener('click', () => {
+            tabBtns.forEach(b => b.classList.remove('active'));
+            tabContents.forEach(c => c.classList.remove('active'));
+            
+            btn.classList.add('active');
+            document.getElementById(btn.dataset.tab).classList.add('active');
+        });
+    });
+
+    // Filtering Pulse
+    const filterBtns = document.querySelectorAll('.btn-filter');
+    filterBtns.forEach(btn => {
+        btn.addEventListener('click', () => {
+            filterBtns.forEach(b => b.classList.remove('active'));
+            btn.classList.add('active');
+            
+            const type = btn.dataset.type;
+            const cards = document.querySelectorAll('.request-card');
+            cards.forEach(card => {
+                if (!type || type === 'all') {
+                    card.style.display = 'block';
+                } else if (type === 'rewrite') {
+                    card.style.display = card.classList.contains('is-rewrite') ? 'block' : 'none';
+                } else if (type === 'violation') {
+                    card.style.display = card.classList.contains('has-violation') ? 'block' : 'none';
+                }
+            });
+        });
+    });
+
+    // Real-time Feed via SSE
+    const evtSource = new EventSource('/events');
+    
+    evtSource.onmessage = (event) => {
+        const data = JSON.parse(event.data);
+        if (data.type === 'init') {
+            portDisplay.textContent = data.port;
+            // Wipe all local state for a clean slate
+            requestFeed.innerHTML = '<div class="empty-state"><p>Waiting for requests...</p></div>';
+            loadHeaderState(data.headerState);
+            
+            // Reset "Dirty" state
+            markClean();
+            
+            // Reset filters to "All"
+            const allFilterBtn = document.querySelector('.btn-filter[data-type="all"]');
+            if (allFilterBtn) {
+                filterBtns.forEach(b => b.classList.remove('active'));
+                allFilterBtn.classList.add('active');
+            }
+        } else if (data.type === 'request') {
+            addRequestToFeed(data.request);
+        }
+    };
+
+    evtSource.onerror = () => {
+        console.error("SSE Connection lost.");
+    };
+
+    const sidebar = document.querySelector('.sidebar');
+    const applyBtn = document.getElementById('apply-headers');
+    let isDirty = false;
+
+    function markDirty() {
+        if (isDirty) return;
+        isDirty = true;
+        applyBtn.classList.add('dirty');
+        applyBtn.innerText = 'Save Changes';
+    }
+
+    function markClean() {
+        isDirty = false;
+        applyBtn.classList.remove('dirty');
+        applyBtn.innerText = 'Applied';
+    }
+
+    // Header Management
+    function createHeaderRow(key = '', value = '', isDelete = false) {
+        const row = document.createElement('div');
+        row.className = 'header-row' + (isDelete ? ' suppressed' : '');
+        row.innerHTML = `
+            <div class="row-main">
+                <input type="text" placeholder="Header Name" value="${key}" class="hdr-key">
+                <input type="text" placeholder="Value" value="${value}" class="hdr-val" ${isDelete ? 'disabled' : ''}>
+            </div>
+            <div class="row-actions">
+                <button class="btn-toggle-action ${isDelete ? '' : 'active'}" title="${isDelete ? 'Set: Override/Inject' : 'Suppress: Explicitly Delete'}">
+                    <span class="material-icons">${isDelete ? 'do_not_disturb_on' : 'verified'}</span>
+                </button>
+                <button class="btn-remove" title="Remove"><span class="material-icons">delete</span></button>
+            </div>
+        `;
+
+        const actionBtn = row.querySelector('.btn-toggle-action');
+        const valInput = row.querySelector('.hdr-val');
+        const keyInput = row.querySelector('.hdr-key');
+
+        const handleChange = () => markDirty();
+        keyInput.oninput = handleChange;
+        valInput.oninput = handleChange;
+
+        actionBtn.onclick = () => {
+            const nowActive = actionBtn.classList.toggle('active');
+            const isSuppressed = !nowActive;
+            
+            row.classList.toggle('suppressed', isSuppressed);
+            actionBtn.title = isSuppressed ? 'Set: Override/Inject' : 'Suppress: Explicitly Delete';
+            actionBtn.innerHTML = `<span class="material-icons">${isSuppressed ? 'do_not_disturb_on' : 'verified'}</span>`;
+            valInput.disabled = isSuppressed;
+            markDirty();
+        };
+
+        row.querySelector('.btn-remove').onclick = () => {
+            row.remove();
+            markDirty();
+        };
+        return row;
+    }
+
+    document.getElementById('add-req-header').onclick = () => {
+        document.getElementById('req-header-list').appendChild(createHeaderRow());
+        markDirty();
+    };
+
+    document.getElementById('add-res-header').onclick = () => {
+        document.getElementById('res-header-list').appendChild(createHeaderRow());
+        markDirty();
+    };
+
+    // Presets
+    document.querySelectorAll('.btn-preset').forEach(btn => {
+        btn.onclick = () => {
+            const listId = btn.dataset.type === 'request' ? 'req-header-list' : 'res-header-list';
+            const list = document.getElementById(listId);
+            list.appendChild(createHeaderRow(btn.dataset.header, btn.dataset.value));
+            markDirty();
+        };
+    });
+
+    document.getElementById('reset-headers').onclick = () => {
+         if (confirm('Reset all overrides to file defaults?')) {
+             loadHeaderState({}); // We would fetch defaults if we had them saved, but for now we clear
+             markDirty();
+         }
+    };
+
+    // Save State
+    applyBtn.onclick = async () => {
+        const state = { request: {}, response: {} };
+        let hasValidationError = false;
+
+        const collect = (listId, target) => {
+            document.querySelectorAll(`#${listId} .header-row`).forEach(row => {
+                const keyInput = row.querySelector('.hdr-key');
+                const valInput = row.querySelector('.hdr-val');
+                const k = keyInput.value.trim();
+                const v = valInput.value.trim();
+                const isSuppressed = row.classList.contains('suppressed');
+
+                if (!k) {
+                    // Any dangling row must have a name, or it's a validation error
+                    keyInput.classList.add('input-error');
+                    hasValidationError = true;
+                    return; 
+                }
+
+                keyInput.classList.remove('input-error');
+                target[k] = isSuppressed ? null : v;
+            });
+        };
+
+        collect('req-header-list', state.request);
+        collect('res-header-list', state.response);
+
+        if (hasValidationError) {
+            applyBtn.innerText = '🛑 Fix Header Names';
+            applyBtn.classList.add('error-pulse');
+            setTimeout(() => {
+                applyBtn.innerText = isDirty ? 'Save Changes' : 'Applied';
+                applyBtn.classList.remove('error-pulse');
+            }, 3000);
+            return;
+        }
+
+        try {
+            const res = await fetch('/headers', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(state)
+            });
+            if (res.ok) {
+                markClean();
+                applyBtn.innerText = '✅ Applied';
+                applyBtn.classList.add('success');
+                setTimeout(() => {
+                    applyBtn.innerText = 'Applied';
+                    applyBtn.classList.remove('success');
+                }, 2000);
+            }
+        } catch (err) {
+            alert('🛑 Failed to save headers.');
+        }
+    };
+
+    function loadHeaderState(state) {
+        const reqList = document.getElementById('req-header-list');
+        const resList = document.getElementById('res-header-list');
+        reqList.innerHTML = '';
+        resList.innerHTML = '';
+
+        Object.entries(state.request || {}).forEach(([k, v]) => reqList.appendChild(createHeaderRow(k, v, v === null)));
+        Object.entries(state.response || {}).forEach(([k, v]) => resList.appendChild(createHeaderRow(k, v, v === null)));
+    }
+
+    function addRequestToFeed(req) {
+        if (document.querySelector('.empty-state')) {
+            requestFeed.innerHTML = '';
+        }
+
+        const card = document.createElement('div');
+        card.className = 'request-card';
+        card.id = `req-${req.id}`;
+        if (req.violation) card.classList.add('has-violation');
+        if (req.steps && req.steps.length > 1) card.classList.add('is-rewrite');
+
+        const statusClass = req.status >= 500 ? 'status-error' : (req.status >= 400 ? 'status-warn' : 'status-ok');
+        
+        card.innerHTML = `
+            <div class="card-header">
+                <div style="display: flex; align-items: center; gap: 0.75rem">
+                    <span class="card-id">#${req.id.slice(0, 8)}</span>
+                    <span class="card-method">${req.method}</span>
+                    <span class="card-uri">${req.path}</span>
+                </div>
+                <div style="display: flex; align-items: center; gap: 1rem">
+                    <span class="card-status ${statusClass}">${req.status}</span>
+                    <span class="expand-icon">expand_more</span>
+                </div>
+            </div>
+            <div class="card-body-mini">
+                 <div class="rewrite-path">${req.steps.length > 1 ? `↳ ${req.steps[req.steps.length - 1].uri}` : ''}</div>
+                 <div class="performance-mini">${req.cpu.toFixed(2)}ms</div>
+            </div>
+            <div class="card-details" style="display: none;">
+                <div class="loading-spinner">Loading deep inspection data...</div>
+            </div>
+        `;
+
+        card.querySelector('.expand-icon').onclick = (e) => {
+            e.stopPropagation();
+            toggleRequestDetails(req.id, card);
+        };
+        requestFeed.prepend(card);
+        
+        if (requestFeed.children.length > 50) {
+            requestFeed.removeChild(requestFeed.lastChild);
+        }
+    }
+
+    async function toggleRequestDetails(id, card) {
+        const detailsEl = card.querySelector('.card-details');
+        const iconEl = card.querySelector('.expand-icon');
+        const isExpanded = detailsEl.style.display === 'block';
+
+        if (isExpanded) {
+            detailsEl.style.display = 'none';
+            card.classList.remove('expanded');
+            iconEl.innerText = 'expand_more';
+            return;
+        }
+
+        detailsEl.style.display = 'block';
+        card.classList.add('expanded');
+        iconEl.innerText = 'expand_less';
+
+        if (detailsEl.innerHTML.includes('Loading deep inspection data...')) {
+            try {
+                const res = await fetch(`/request/${id}`);
+                const data = await res.json();
+                renderDetails(detailsEl, data);
+            } catch (err) {
+                detailsEl.innerHTML = `<div class="error">Failed to load details: ${err.message}</div>`;
+            }
+        }
+    }
+
+    function renderDetails(el, data) {
+        el.innerHTML = `
+            <div class="detail-nav">
+                <div class="nav-item active" data-pane="trace">Trace</div>
+                <div class="nav-item" data-pane="headers">Headers</div>
+                <div class="nav-item" data-pane="body">Body</div>
+            </div>
+
+            <div class="detail-pane active" id="pane-trace-${data.id}">
+                <div class="detail-grid">
+                    <div class="detail-section">
+                        <h4>Pipeline Evolution</h4>
+                        <div class="shadow-rewrite">
+                            ${data.steps.map(s => `
+                                <div class="step">
+                                    <span>${s.uri}</span>
+                                    <span class="step-label">${s.label}</span>
+                                </div>
+                            `).join('')}
+                        </div>
+                        ${data.violation ? `
+                            <div class="fidelity-alert">
+                                <span>🛑</span>
+                                <div>
+                                    <strong>Fidelity Violation:</strong> ${data.violation}
+                                </div>
+                            </div>
+                        ` : ''}
+                    </div>
+                </div>
+            </div>
+
+            <div class="detail-pane" id="pane-headers-${data.id}">
+                <div class="header-lifecycle">
+                    <div class="lifecycle-col">
+                        <h5>Request lifecycle (Viewer → Origin)</h5>
+                        <div class="header-diff">
+                            ${renderHeaderDiff(data.headers.request.viewer, data.headers.request.origin)}
+                        </div>
+                    </div>
+                    <div class="lifecycle-col">
+                        <h5>Response lifecycle (Origin → Viewer)</h5>
+                        <div class="header-diff">
+                            ${renderHeaderDiff(data.headers.response.origin, data.headers.response.viewer)}
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="detail-pane" id="pane-body-${data.id}">
+                <div class="detail-section">
+                    <h4>Body Snippet (First 1KB)</h4>
+                    <pre class="body-snippet">${data.bodySnippet || '(No body content buffered)'}</pre>
+                </div>
+            </div>
+        `;
+
+        // Wire up internal tabs
+        el.querySelectorAll('.nav-item').forEach(nav => {
+            nav.onclick = (e) => {
+                e.stopPropagation();
+                el.querySelectorAll('.nav-item').forEach(n => n.classList.remove('active'));
+                el.querySelectorAll('.detail-pane').forEach(p => p.classList.remove('active'));
+                
+                nav.classList.add('active');
+                el.querySelector(`#pane-${nav.dataset.pane}-${data.id}`).classList.add('active');
+            };
+        });
+    }
+
+    function renderHeaderDiff(incoming, final) {
+        const allKeys = new Set([...Object.keys(incoming), ...Object.keys(final)]);
+        let html = '<table class="diff-table">';
+        
+        [...allKeys].sort().forEach(key => {
+            const val1 = incoming[key];
+            const val2 = final[key];
+            
+            let rowClass = '';
+            if (val1 === undefined) rowClass = 'h-added';
+            else if (val2 === undefined) rowClass = 'h-removed';
+            else if (JSON.stringify(val1) !== JSON.stringify(val2)) rowClass = 'h-modified';
+
+            html += `
+                <tr class="${rowClass}">
+                    <td class="h-key">${key}</td>
+                    <td class="h-val">${val2 !== undefined ? val2 : '<span class="deleted">REMOVED</span>'}</td>
+                </tr>
+            `;
+        });
+        
+        return html + '</table>';
+    }
+
+    document.getElementById('clear-feed').onclick = () => {
+        requestFeed.innerHTML = '<div class="empty-state"><p>Waiting for requests...</p></div>';
+    };
+});

package/dist/ui/favicons/browserconfig.xml

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square70x70logo src="/favicons/ms-icon-70x70.png"/>
+            <square150x150logo src="/favicons/ms-icon-150x150.png"/>
+            <square310x310logo src="/favicons/ms-icon-310x310.png"/>
+            <TileColor>#ffffff</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

package/dist/ui/favicons/manifest.json

@@ -0,0 +1,41 @@
+{
+  "name": "App",
+  "icons": [
+    {
+      "src": "/favicons/android-icon-36x36.png",
+      "sizes": "36x36",
+      "type": "image/png",
+      "density": "0.75"
+    },
+    {
+      "src": "/favicons/android-icon-48x48.png",
+      "sizes": "48x48",
+      "type": "image/png",
+      "density": "1.0"
+    },
+    {
+      "src": "/favicons/android-icon-72x72.png",
+      "sizes": "72x72",
+      "type": "image/png",
+      "density": "1.5"
+    },
+    {
+      "src": "/favicons/android-icon-96x96.png",
+      "sizes": "96x96",
+      "type": "image/png",
+      "density": "2.0"
+    },
+    {
+      "src": "/favicons/android-icon-144x144.png",
+      "sizes": "144x144",
+      "type": "image/png",
+      "density": "3.0"
+    },
+    {
+      "src": "/favicons/android-icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "density": "4.0"
+    }
+  ]
+}

package/dist/ui/index.html

@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>CloudFrontize Developer Dashboard</title>
+
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicons/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicons/favicon-16x16.png">
+    <link rel="shortcut icon" href="/favicons/favicon.ico">
+
+    <link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-icon-180x180.png">
+
+    <link rel="manifest" href="/favicons/manifest.json">
+    <meta name="theme-color" content="#1a1a1a"> <meta name="msapplication-config" content="/favicons/browserconfig.xml">
+    <meta name="msapplication-TileColor" content="#1a1a1a">
+
+    <link rel="stylesheet" href="style.css">
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+</head>
+<body class="dark-mode">
+    <header>
+        <div class="logo">
+            <span class="cloud">☁️</span>
+            <h1>CloudFrontize <span class="badge">PRO</span></h1>
+        </div>
+        <div class="status-bar">
+            <div class="status-item">
+                <span class="label">Server:</span>
+                <span class="value success">Running</span>
+            </div>
+            <div class="status-item">
+                <span class="label">Port:</span>
+                <span id="current-port" class="value">3000</span>
+            </div>
+        </div>
+    </header>
+
+    <main>
+        <aside class="sidebar">
+            <section class="controls">
+                <h2>Header Intelligence</h2>
+                <div class="control-group">
+                    <h3>Simulation Presets</h3>
+                    <div class="preset-grid">
+                        <button class="btn-preset" data-type="request" data-header="CloudFront-Is-Mobile-Viewer" data-value="true">Mobile</button>
+                        <button class="btn-preset" data-type="request" data-header="CloudFront-Viewer-Country" data-value="US">USA (US)</button>
+                        <button class="btn-preset" data-type="request" data-header="CloudFront-Viewer-Country" data-value="ES">Spain (ES)</button>
+                        <button class="btn-preset" data-type="response" data-header="X-Cache-Status" data-value="MISS">Cache MISS</button>
+                    </div>
+                </div>
+
+                <div class="control-group">
+                    <div class="tabs">
+                        <button class="tab-btn active" data-tab="request-overrides">Viewer Request</button>
+                        <button class="tab-btn" data-tab="response-overrides">Origin Response</button>
+                    </div>
+
+                    <div id="request-overrides" class="tab-content active">
+                        <div class="header-list" id="req-header-list">
+                            <!-- Dynamic Header Rows -->
+                        </div>
+                        <button class="btn-add" id="add-req-header">+ Add Header</button>
+                    </div>
+
+                    <div id="response-overrides" class="tab-content">
+                        <div class="header-list" id="res-header-list">
+                            <!-- Dynamic Header Rows -->
+                        </div>
+                        <button class="btn-add" id="add-res-header">+ Add Header</button>
+                    </div>
+                </div>
+
+                <div class="actions">
+                    <button class="btn-primary" id="apply-headers">Apply Changes</button>
+                    <button class="btn-secondary" id="reset-headers">Reset to File Defaults</button>
+                </div>
+            </section>
+        </aside>
+
+        <section class="content">
+            <div class="feed-header">
+                <h2>Request Pulse</h2>
+                <div class="filters">
+                    <button class="btn-filter active">All</button>
+                    <button class="btn-filter" data-type="rewrite">Rewrites</button>
+                    <button class="btn-filter" data-type="violation">Violations</button>
+                </div>
+                <button class="btn-clear" id="clear-feed">Clear</button>
+            </div>
+            <div class="request-feed" id="request-feed">
+                <!-- Real-time Request Cards -->
+                <div class="empty-state">
+                    <p>Waiting for requests...</p>
+                </div>
+            </div>
+        </section>
+    </main>
+
+    <script src="app.js"></script>
+</body>
+</html>