Add Copy as curl/Python/fetch/HTTPie + Preview tab for HTML/JSON/CSV/XML/Markdown

app.py

@@ -157,6 +157,69 @@ def ui():
         .send-btn:hover { background: #0056b3; }
         .send-btn:disabled { background: #86868b; cursor: not-allowed; }
 
+        /* Copy dropdown */
+        .copy-dropdown {
+            position: relative;
+        }
+        .copy-btn {
+            padding: 10px 16px;
+            background: #fff;
+            border: 1px solid #d2d2d7;
+            border-radius: 6px;
+            cursor: pointer;
+            font-weight: 500;
+            color: #1d1d1f;
+            transition: all 0.2s;
+        }
+        .copy-btn:hover { background: #f5f5f7; border-color: #007aff; }
+        .copy-menu {
+            display: none;
+            position: absolute;
+            top: 100%;
+            right: 0;
+            margin-top: 4px;
+            background: #fff;
+            border: 1px solid #d2d2d7;
+            border-radius: 8px;
+            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+            z-index: 100;
+            min-width: 160px;
+            overflow: hidden;
+        }
+        .copy-menu.show { display: block; }
+        .copy-option {
+            display: block;
+            width: 100%;
+            padding: 10px 14px;
+            text-align: left;
+            background: none;
+            border: none;
+            cursor: pointer;
+            font-size: 13px;
+            color: #1d1d1f;
+            transition: background 0.1s;
+        }
+        .copy-option:hover { background: #f5f5f7; }
+        .copy-option-label { font-weight: 500; }
+        .copy-option-desc { font-size: 11px; color: #86868b; }
+
+        /* Toast notification */
+        .toast {
+            position: fixed;
+            bottom: 20px;
+            left: 50%;
+            transform: translateX(-50%) translateY(100px);
+            background: #1d1d1f;
+            color: #fff;
+            padding: 12px 24px;
+            border-radius: 8px;
+            font-size: 13px;
+            opacity: 0;
+            transition: all 0.3s;
+            z-index: 1000;
+        }
+        .toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
+
         /* Main Layout */
         .main-layout {
             display: grid;
@@ -317,6 +380,56 @@ def ui():
         .json-number { color: #1c00cf; }
         .json-boolean { color: #aa0d91; }
         .json-null { color: #86868b; }
+
+        /* Preview */
+        .preview-container {
+            padding: 16px;
+            min-height: 200px;
+            max-height: 500px;
+            overflow: auto;
+        }
+        .preview-placeholder { color: #86868b; }
+        .preview-iframe {
+            width: 100%;
+            min-height: 400px;
+            border: 1px solid #d2d2d7;
+            border-radius: 6px;
+            background: #fff;
+        }
+        .preview-image {
+            max-width: 100%;
+            border-radius: 6px;
+            border: 1px solid #d2d2d7;
+        }
+        .preview-json {
+            background: #f5f5f7;
+            padding: 16px;
+            border-radius: 8px;
+            font-family: 'SF Mono', Menlo, monospace;
+            font-size: 13px;
+            line-height: 1.6;
+        }
+        .preview-json .key { color: #007aff; font-weight: 500; }
+        .preview-json .string { color: #c41a16; }
+        .preview-json .number { color: #1c00cf; }
+        .preview-json .boolean { color: #aa0d91; }
+        .preview-json .null { color: #86868b; font-style: italic; }
+        .preview-json .bracket { color: #1d1d1f; }
+        .preview-json details { margin-left: 20px; }
+        .preview-json summary { cursor: pointer; margin-left: -20px; }
+        .preview-json summary:hover { color: #007aff; }
+        .preview-text {
+            background: #f5f5f7;
+            padding: 16px;
+            border-radius: 8px;
+            font-family: 'SF Mono', Menlo, monospace;
+            font-size: 13px;
+            white-space: pre-wrap;
+        }
+        .preview-xml { color: #1d1d1f; }
+        .preview-xml .tag { color: #aa0d91; }
+        .preview-xml .attr { color: #007aff; }
+        .preview-xml .value { color: #c41a16; }
     </style>
 </head>
 <body>
@@ -339,7 +452,29 @@ def ui():
             </select>
             <input type="text" class="url-input" id="url" placeholder="/hello" value="/hello">
             <button class="send-btn" id="send">Send</button>
+            <div class="copy-dropdown">
+                <button class="copy-btn" id="copy-toggle">Copy as...</button>
+                <div class="copy-menu" id="copy-menu">
+                    <button class="copy-option" data-format="curl">
+                        <div class="copy-option-label">cURL</div>
+                        <div class="copy-option-desc">Command line</div>
+                    </button>
+                    <button class="copy-option" data-format="python">
+                        <div class="copy-option-label">Python requests</div>
+                        <div class="copy-option-desc">requests library</div>
+                    </button>
+                    <button class="copy-option" data-format="fetch">
+                        <div class="copy-option-label">JavaScript fetch</div>
+                        <div class="copy-option-desc">Browser/Node.js</div>
+                    </button>
+                    <button class="copy-option" data-format="httpie">
+                        <div class="copy-option-label">HTTPie</div>
+                        <div class="copy-option-desc">CLI for humans</div>
+                    </button>
+                </div>
+            </div>
         </div>
+        <div class="toast" id="toast">Copied to clipboard!</div>
 
         <div class="main-layout">
             <!-- Request Panel -->
@@ -368,12 +503,18 @@ def ui():
                 </div>
                 <div class="tabs" id="response-tabs">
                     <button class="tab active" data-tab="res-body">Body</button>
+                    <button class="tab" data-tab="res-preview">Preview</button>
                     <button class="tab" data-tab="res-headers">Headers</button>
                     <button class="tab" data-tab="res-raw">Raw</button>
                 </div>
                 <div class="tab-content active" id="res-body-tab">
                     <div class="response-content" id="response">Send a request to see the response</div>
                 </div>
+                <div class="tab-content" id="res-preview-tab">
+                    <div class="preview-container" id="preview-container">
+                        <div class="preview-placeholder">Send a request to see preview</div>
+                    </div>
+                </div>
                 <div class="tab-content" id="res-headers-tab">
                     <div class="panel-body">
                         <div class="headers-list" id="response-headers"></div>
@@ -520,6 +661,9 @@ def ui():
                 }
                 document.getElementById('response').innerHTML = display;
 
+                // Preview
+                renderPreview(text, res.headers.get('content-type') || '');
+
             } catch (err) {
                 document.getElementById('status').textContent = 'Error';
                 document.getElementById('status').className = 'status-value status-err';
@@ -535,6 +679,233 @@ def ui():
         document.getElementById('send').onclick = sendRequest;
         document.getElementById('url').onkeydown = (e) => { if (e.key === 'Enter') sendRequest(); };
         sendRequest();
+
+        // Preview rendering
+        function renderPreview(text, contentType) {
+            const container = document.getElementById('preview-container');
+            const ct = contentType.toLowerCase();
+
+            if (ct.includes('text/html')) {
+                // Render HTML in sandboxed iframe
+                const iframe = document.createElement('iframe');
+                iframe.className = 'preview-iframe';
+                iframe.sandbox = 'allow-same-origin';
+                iframe.srcdoc = text;
+                container.innerHTML = '';
+                container.appendChild(iframe);
+            } else if (ct.includes('image/')) {
+                // Show image (requires blob URL for binary)
+                const url = document.getElementById('url').value;
+                container.innerHTML = `<img class="preview-image" src="${url}" alt="Image preview">`;
+            } else if (ct.includes('application/json') || ct.includes('json')) {
+                // Interactive JSON tree
+                try {
+                    const json = JSON.parse(text);
+                    container.innerHTML = '<div class="preview-json">' + renderJSONTree(json) + '</div>';
+                } catch {
+                    container.innerHTML = '<div class="preview-text">' + text.replace(/</g, '&lt;') + '</div>';
+                }
+            } else if (ct.includes('xml')) {
+                // Syntax highlighted XML
+                const highlighted = text
+                    .replace(/</g, '&lt;').replace(/>/g, '&gt;')
+                    .replace(/&lt;(\\/?[\\w:-]+)/g, '&lt;<span class="tag">$1</span>')
+                    .replace(/(\\w+)=("[^"]*")/g, '<span class="attr">$1</span>=<span class="value">$2</span>');
+                container.innerHTML = '<pre class="preview-text preview-xml">' + highlighted + '</pre>';
+            } else if (ct.includes('csv')) {
+                // Render CSV as table
+                container.innerHTML = renderCSVTable(text);
+            } else if (ct.includes('markdown')) {
+                // Basic markdown rendering
+                container.innerHTML = '<div class="preview-text">' + renderBasicMarkdown(text) + '</div>';
+            } else {
+                // Plain text
+                container.innerHTML = '<pre class="preview-text">' + text.replace(/</g, '&lt;').replace(/>/g, '&gt;') + '</pre>';
+            }
+        }
+
+        function renderJSONTree(obj, level = 0) {
+            if (obj === null) return '<span class="null">null</span>';
+            if (typeof obj === 'boolean') return '<span class="boolean">' + obj + '</span>';
+            if (typeof obj === 'number') return '<span class="number">' + obj + '</span>';
+            if (typeof obj === 'string') return '<span class="string">"' + obj.replace(/</g, '&lt;') + '"</span>';
+
+            if (Array.isArray(obj)) {
+                if (obj.length === 0) return '<span class="bracket">[]</span>';
+                let html = '<span class="bracket">[</span>';
+                if (level < 2) {
+                    html += '<br>' + obj.map((v, i) =>
+                        '  '.repeat(level + 1) + renderJSONTree(v, level + 1) + (i < obj.length - 1 ? ',' : '')
+                    ).join('<br>') + '<br>' + '  '.repeat(level);
+                } else {
+                    html += obj.map((v, i) => renderJSONTree(v, level + 1) + (i < obj.length - 1 ? ', ' : '')).join('');
+                }
+                html += '<span class="bracket">]</span>';
+                return html;
+            }
+
+            if (typeof obj === 'object') {
+                const keys = Object.keys(obj);
+                if (keys.length === 0) return '<span class="bracket">{}</span>';
+                let html = '<span class="bracket">{</span>';
+                if (level < 2) {
+                    html += '<br>' + keys.map((k, i) =>
+                        '  '.repeat(level + 1) + '<span class="key">"' + k + '"</span>: ' + renderJSONTree(obj[k], level + 1) + (i < keys.length - 1 ? ',' : '')
+                    ).join('<br>') + '<br>' + '  '.repeat(level);
+                } else {
+                    html += keys.map((k, i) =>
+                        '<span class="key">"' + k + '"</span>: ' + renderJSONTree(obj[k], level + 1) + (i < keys.length - 1 ? ', ' : '')
+                    ).join('');
+                }
+                html += '<span class="bracket">}</span>';
+                return html;
+            }
+            return String(obj);
+        }
+
+        function renderCSVTable(csv) {
+            const lines = csv.trim().split('\\n');
+            if (lines.length === 0) return '<div class="preview-text">Empty CSV</div>';
+            let html = '<table style="width:100%;border-collapse:collapse;font-size:13px;">';
+            lines.forEach((line, i) => {
+                const cells = line.split(',');
+                const tag = i === 0 ? 'th' : 'td';
+                const style = 'padding:8px 12px;border:1px solid #d2d2d7;text-align:left;' + (i === 0 ? 'background:#f5f5f7;font-weight:600;' : '');
+                html += '<tr>' + cells.map(c => `<${tag} style="${style}">${c.trim()}</${tag}>`).join('') + '</tr>';
+            });
+            html += '</table>';
+            return html;
+        }
+
+        function renderBasicMarkdown(md) {
+            return md
+                .replace(/^### (.+)$/gm, '<h3 style="margin:12px 0 8px;font-size:16px;">$1</h3>')
+                .replace(/^## (.+)$/gm, '<h2 style="margin:16px 0 8px;font-size:18px;">$1</h2>')
+                .replace(/^# (.+)$/gm, '<h1 style="margin:20px 0 12px;font-size:22px;">$1</h1>')
+                .replace(/\\*\\*(.+?)\\*\\*/g, '<strong>$1</strong>')
+                .replace(/\\*(.+?)\\*/g, '<em>$1</em>')
+                .replace(/`([^`]+)`/g, '<code style="background:#e8e8e8;padding:2px 6px;border-radius:4px;">$1</code>')
+                .replace(/^- (.+)$/gm, '<li style="margin:4px 0;">$1</li>')
+                .replace(/\\n/g, '<br>');
+        }
+
+        // Copy as... functionality
+        const copyToggle = document.getElementById('copy-toggle');
+        const copyMenu = document.getElementById('copy-menu');
+        const toast = document.getElementById('toast');
+
+        copyToggle.onclick = (e) => {
+            e.stopPropagation();
+            copyMenu.classList.toggle('show');
+        };
+
+        document.addEventListener('click', () => copyMenu.classList.remove('show'));
+
+        function getBaseUrl() {
+            return window.location.origin;
+        }
+
+        function generateCode(format) {
+            const method = document.getElementById('method').value;
+            const url = document.getElementById('url').value;
+            const body = document.getElementById('body').value;
+            const headersText = document.getElementById('headers').value;
+            const fullUrl = getBaseUrl() + url;
+
+            const headers = {};
+            headersText.split('\\n').forEach(line => {
+                const [key, ...vals] = line.split(':');
+                if (key && vals.length) headers[key.trim()] = vals.join(':').trim();
+            });
+
+            const hasBody = ['POST', 'PUT', 'PATCH'].includes(method) && body;
+
+            switch (format) {
+                case 'curl': {
+                    let cmd = `curl -X ${method} "${fullUrl}"`;
+                    for (const [k, v] of Object.entries(headers)) {
+                        cmd += ` \\\\\\n  -H "${k}: ${v}"`;
+                    }
+                    if (hasBody) {
+                        cmd += ` \\\\\\n  -d '${body.replace(/'/g, "\\'")}'`;
+                    }
+                    return cmd;
+                }
+                case 'python': {
+                    let code = `import requests\\n\\n`;
+                    code += `url = "${fullUrl}"\\n`;
+                    if (Object.keys(headers).length) {
+                        code += `headers = ${JSON.stringify(headers, null, 4)}\\n`;
+                    }
+                    if (hasBody) {
+                        code += `data = ${body}\\n\\n`;
+                        code += `response = requests.${method.toLowerCase()}(url`;
+                        if (Object.keys(headers).length) code += `, headers=headers`;
+                        code += `, json=data)`;
+                    } else {
+                        code += `\\nresponse = requests.${method.toLowerCase()}(url`;
+                        if (Object.keys(headers).length) code += `, headers=headers`;
+                        code += `)`;
+                    }
+                    code += `\\nprint(response.status_code)\\nprint(response.json())`;
+                    return code;
+                }
+                case 'fetch': {
+                    let code = `fetch("${fullUrl}", {\\n`;
+                    code += `  method: "${method}",\\n`;
+                    if (Object.keys(headers).length) {
+                        code += `  headers: ${JSON.stringify(headers, null, 4).replace(/\\n/g, '\\n  ')},\\n`;
+                    }
+                    if (hasBody) {
+                        code += `  body: JSON.stringify(${body})\\n`;
+                    }
+                    code += `})\\n`;
+                    code += `.then(res => res.json())\\n`;
+                    code += `.then(data => console.log(data))\\n`;
+                    code += `.catch(err => console.error(err));`;
+                    return code;
+                }
+                case 'httpie': {
+                    let cmd = `http ${method} "${fullUrl}"`;
+                    for (const [k, v] of Object.entries(headers)) {
+                        cmd += ` "${k}:${v}"`;
+                    }
+                    if (hasBody) {
+                        try {
+                            const jsonBody = JSON.parse(body);
+                            for (const [k, v] of Object.entries(jsonBody)) {
+                                const val = typeof v === 'string' ? `="${v}"` : `:=${JSON.stringify(v)}`;
+                                cmd += ` ${k}${val}`;
+                            }
+                        } catch {
+                            cmd += ` --raw '${body}'`;
+                        }
+                    }
+                    return cmd;
+                }
+            }
+        }
+
+        function showToast(msg) {
+            toast.textContent = msg;
+            toast.classList.add('show');
+            setTimeout(() => toast.classList.remove('show'), 2000);
+        }
+
+        document.querySelectorAll('.copy-option').forEach(btn => {
+            btn.onclick = async (e) => {
+                e.stopPropagation();
+                const format = btn.dataset.format;
+                const code = generateCode(format);
+                try {
+                    await navigator.clipboard.writeText(code.replace(/\\\\n/g, '\\n'));
+                    showToast(`Copied as ${format.toUpperCase()}!`);
+                } catch {
+                    showToast('Failed to copy');
+                }
+                copyMenu.classList.remove('show');
+            };
+        });
     </script>
 </body>
 </html>