4bnode 4.1.0 → 4.1.1

package/skeleton/.4bnode/assets/js/pages/RoutesPage.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef } from "react";
-import { LuCheck, LuCopy, LuPlug, LuShare2 } from "react-icons/lu";
-import { html, api, Icons, copyToClipboard } from "../lib.js";
+import { LuPlug } from "react-icons/lu";
+import { html, api, Icons } from "../lib.js";
 import { useApp } from "../context.js";
 
 export function RoutesPage() {
@@ -9,13 +9,6 @@ export function RoutesPage() {
   const [selectedRoute, setSelectedRoute] = useState(null);
   const [routeContents, setRouteContents] = useState({});
   const [loadingRoute, setLoadingRoute] = useState(null);
-  const [editingRoute, setEditingRoute] = useState(false);
-  const [editCode, setEditCode] = useState("");
-  const [savingRoute, setSavingRoute] = useState(false);
-  const [showShare, setShowShare] = useState(false);
-  const [shareData, setShareData] = useState(null);
-  const [shareLoading, setShareLoading] = useState(false);
-  const [shareCopied, setShareCopied] = useState(false);
   const [showAddMethod, setShowAddMethod] = useState(false);
   const [amRouteType, setAmRouteType] = useState(null);
   const [amMethods, setAmMethods] = useState([]);
@@ -38,9 +31,6 @@ export function RoutesPage() {
 
   async function selectRoute(filename) {
     setShowCreate(false);
-    setEditingRoute(false);
-    setShowShare(false);
-    setShareData(null);
     setSelectedRoute(filename);
     if (!routeContents[filename]) {
       setLoadingRoute(filename);
@@ -66,108 +56,6 @@ export function RoutesPage() {
     return endpoints;
   }
 
-  async function loadShareData(routeName) {
-    setShareLoading(true);
-    try {
-      const res = await api('/routes/' + routeName + '/share');
-      setShareData(res);
-    } catch (err) { toast(err.message, 'error'); }
-    setShareLoading(false);
-  }
-
-  function generateShareMarkdown() {
-    if (!shareData) return '';
-    const d = shareData;
-    const capName = d.name.charAt(0).toUpperCase() + d.name.slice(1);
-    const line = '\u2500'.repeat(35);
-    const lines = [];
-
-    d.endpoints.forEach((ep, idx) => {
-      if (idx > 0) { lines.push(''); lines.push(''); }
-      lines.push('\ud83d\udccc ' + capName + ' API');
-      lines.push('');
-      lines.push('Endpoint     : ' + ep.method + ' ' + ep.fullPath);
-      if (ep.bodyFields?.length > 0 || ['POST','PUT','PATCH'].includes(ep.method)) {
-        lines.push('Content-Type : application/json');
-      }
-      if (ep.params?.length > 0) {
-        lines.push('URL Params   : ' + ep.params.map(p => ':' + p).join(', '));
-      }
-      if (ep.queryFields?.length > 0) {
-        lines.push('Query Params : ' + ep.queryFields.map(f => f.name).join(', '));
-      }
-
-      if (ep.bodyFields?.length > 0) {
-        lines.push('');
-        lines.push(line);
-        lines.push(' Request Body');
-        lines.push(line);
-
-        // Calculate column widths
-        const fW = Math.max(5, ...ep.bodyFields.map(f => f.name.length)) + 2;
-        const tW = Math.max(4, ...ep.bodyFields.map(f => (f.type || 'String').length)) + 2;
-        const pad = (s, w) => s + ' '.repeat(Math.max(0, w - s.length));
-
-        lines.push(pad('Field', fW) + pad('Type', tW) + 'Required');
-        lines.push(line);
-        ep.bodyFields.forEach(f => {
-          lines.push(pad(f.name, fW) + pad(f.type || 'String', tW) + (f.required ? '\u2705 Yes' : 'No'));
-        });
-
-        lines.push('');
-        lines.push(line);
-        lines.push(' Example');
-        lines.push(line);
-        const body = {};
-        ep.bodyFields.forEach(f => {
-          if (f.type === 'Number') body[f.name] = 0;
-          else if (f.type === 'Boolean') body[f.name] = false;
-          else if (f.type === 'Date') body[f.name] = '2024-01-01';
-          else if (f.name.toLowerCase().includes('email')) body[f.name] = 'user@example.com';
-          else if (f.name.toLowerCase().includes('password')) body[f.name] = 'your_password';
-          else if (f.name.toLowerCase().includes('name')) body[f.name] = 'John';
-          else if (f.name.toLowerCase().includes('phone')) body[f.name] = '+1234567890';
-          else body[f.name] = '';
-        });
-        lines.push(JSON.stringify(body, null, 2));
-      }
-
-      // Response codes
-      lines.push('');
-      lines.push(line);
-      lines.push(' Responses');
-      lines.push(line);
-      if (ep.method === 'GET') {
-        lines.push('200  OK          \u2192 Returns data');
-        lines.push('404  Not Found   \u2192 Resource not found');
-      } else if (ep.method === 'POST') {
-        lines.push('201  Created     \u2192 Resource created successfully');
-        lines.push('400  Bad Request \u2192 Missing or invalid fields');
-        if (ep.bodyFields?.some(f => f.unique)) {
-          lines.push('409  Conflict    \u2192 Duplicate value for unique field');
-        }
-      } else if (ep.method === 'PUT' || ep.method === 'PATCH') {
-        lines.push('200  OK          \u2192 Resource updated successfully');
-        lines.push('400  Bad Request \u2192 Missing or invalid fields');
-        lines.push('404  Not Found   \u2192 Resource not found');
-      } else if (ep.method === 'DELETE') {
-        lines.push('200  OK          \u2192 Resource deleted successfully');
-        lines.push('404  Not Found   \u2192 Resource not found');
-      }
-      lines.push('401  Unauthorized \u2192 Authentication required');
-      lines.push('500  Server Error \u2192 Internal server error');
-    });
-
-    return lines.join('\n');
-  }
-
-  function copyShareMarkdown() {
-    copyToClipboard(generateShareMarkdown());
-    setShareCopied(true);
-    toast('Copied to clipboard', 'success');
-    setTimeout(() => setShareCopied(false), 2000);
-  }
-
   function getMethodsForFile(filename) {
     const content = routeContents[filename]?.content;
     if (!content) return [];
@@ -389,58 +277,6 @@ export function RoutesPage() {
                 >
                   ${showAddMethod ? "Cancel" : html`<span className="sidebar-icon">${Icons.plus}</span> Add`}
                 </button>
-                <button
-                  className="btn btn-sm btn-ghost"
-                  onClick=${() => {
-                    if (editingRoute) {
-                      setEditingRoute(false);
-                    } else {
-                      setEditCode(selContent || "");
-                      setEditingRoute(true);
-                    }
-                  }}
-                >
-                  ${editingRoute ? "Cancel" : "Edit"}
-                </button>
-                ${editingRoute &&
-                html`<button
-                  className="btn btn-sm btn-primary"
-                  disabled=${savingRoute}
-                  onClick=${async () => {
-                    setSavingRoute(true);
-                    try {
-                      await api("/routes/" + selectedRoute + "/content", {
-                        method: "PUT",
-                        body: { content: editCode },
-                      });
-                      toast("Route updated", "success");
-                      setRouteContents((prev) => ({
-                        ...prev,
-                        [selectedRoute]: { content: editCode },
-                      }));
-                      setEditingRoute(false);
-                    } catch (err) {
-                      toast(err.message, "error");
-                    }
-                    setSavingRoute(false);
-                  }}
-                >
-                  ${savingRoute
-                    ? html`<span className="spinner" />`
-                    : "Save"}
-                </button>`}
-                <button
-                  className=${`btn btn-sm ${showShare ? 'btn-primary' : 'btn-ghost'}`}
-                  onClick=${() => {
-                    const next = !showShare;
-                    setShowShare(next);
-                    setShareCopied(false);
-                    if (next && !shareData) loadShareData(selectedRoute);
-                  }}
-                  title="Share endpoint details"
-                >
-                  <${LuShare2} size=${14} />
-                </button>
                 <button
                   className="btn btn-danger btn-sm btn-icon"
                   onClick=${async () => {
@@ -452,7 +288,6 @@ export function RoutesPage() {
                       });
                       toast('Route "' + selName + '" deleted', "success");
                       setSelectedRoute(null);
-                      setEditingRoute(false);
                       setRouteContents((prev) => {
                         const n = { ...prev };
                         delete n[selectedRoute];
@@ -470,7 +305,6 @@ export function RoutesPage() {
             </div>
 
             ${selEndpoints.length > 0 &&
-            !editingRoute &&
             html`<div>
               <div
                 style=${{
@@ -510,7 +344,7 @@ export function RoutesPage() {
             const existingMethods = selEndpoints.map(ep => ep.method.toLowerCase());
             const amCanSubmit = amRouteType && (amRouteType !== "methods" || amMethods.length > 0) && (amRouteType !== "crud" || amMethods.length > 0) && (!amNeedsModel || amModelName) && (!amIsAuthType || amLoginField);
 
-            return showAddMethod && !editingRoute && html`<div className="card mb-4">
+            return showAddMethod && html`<div className="card mb-4">
             <div style=${{ fontSize: "15px", fontWeight: 600, marginBottom: "14px" }}>Add to ${selName}</div>
 
             <div className="form-group">
@@ -726,61 +560,6 @@ export function RoutesPage() {
           </div>`;
           })()}
 
-          ${showShare && !editingRoute && html`<div className="card mb-4" style=${{ overflow: 'hidden', padding: 0 }}>
-            <div style=${{ padding: '14px 16px', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-              <div>
-                <div style=${{ fontWeight: 600, fontSize: '14px' }}>Share with Frontend Team</div>
-                <div className="text-sm text-muted">Copy endpoint details to share with your team</div>
-              </div>
-              <button className="btn btn-sm btn-primary" onClick=${copyShareMarkdown} disabled=${!shareData}>
-                <${shareCopied ? LuCheck : LuCopy} size=${14} />
-                ${' '}${shareCopied ? 'Copied!' : 'Copy Markdown'}
-              </button>
-            </div>
-
-            ${shareLoading && html`<div style=${{ padding: '40px', textAlign: 'center' }}><span className="spinner" /></div>`}
-
-            ${!shareLoading && shareData && html`<div style=${{ padding: '16px' }}>
-              ${shareData.endpoints?.map((ep, idx) => html`<div key=${idx} style=${{ marginBottom: idx < shareData.endpoints.length - 1 ? '16px' : 0, border: '1px solid var(--border)', borderRadius: 'var(--radius)', overflow: 'hidden' }}>
-                <div style=${{ padding: '10px 14px', background: 'var(--bg-input)', display: 'flex', alignItems: 'center', gap: '10px' }}>
-                  <span className=${`route-method ${ep.method.toLowerCase()}`} style=${{ fontSize: '11px' }}>${ep.method}</span>
-                  <span style=${{ fontFamily: "'SF Mono', monospace", fontSize: '13px', fontWeight: 500, color: 'var(--text-primary)' }}>${ep.fullPath}</span>
-                </div>
-
-                ${(ep.params?.length > 0 || ep.queryFields?.length > 0 || ep.bodyFields?.length > 0) && html`<div style=${{ padding: '12px 14px' }}>
-
-                  ${ep.params?.length > 0 && html`<div style=${{ marginBottom: (ep.queryFields?.length > 0 || ep.bodyFields?.length > 0) ? '12px' : 0 }}>
-                    <div style=${{ fontSize: '11px', fontWeight: 600, color: 'var(--text-muted)', marginBottom: '6px', textTransform: 'uppercase', letterSpacing: '0.3px' }}>URL Params</div>
-                    ${ep.params.map(p => html`<div key=${p} style=${{ display: 'inline-flex', alignItems: 'center', gap: '6px', padding: '4px 10px', borderRadius: '6px', background: 'rgba(139,92,246,0.08)', marginRight: '6px', fontSize: '12px' }}>
-                      <span style=${{ fontFamily: "'SF Mono', monospace", color: 'var(--accent-light)', fontWeight: 500 }}>:${p}</span>
-                    </div>`)}
-                  </div>`}
-
-                  ${ep.queryFields?.length > 0 && html`<div style=${{ marginBottom: ep.bodyFields?.length > 0 ? '12px' : 0 }}>
-                    <div style=${{ fontSize: '11px', fontWeight: 600, color: 'var(--text-muted)', marginBottom: '6px', textTransform: 'uppercase', letterSpacing: '0.3px' }}>Query Params</div>
-                    ${ep.queryFields.map(f => html`<span key=${f.name} style=${{ display: 'inline-block', padding: '4px 10px', borderRadius: '6px', background: 'var(--bg-input)', fontFamily: "'SF Mono', monospace", fontSize: '12px', marginRight: '6px' }}>${f.name}</span>`)}
-                  </div>`}
-
-                  ${ep.bodyFields?.length > 0 && html`<div>
-                    <div style=${{ fontSize: '11px', fontWeight: 600, color: 'var(--text-muted)', marginBottom: '8px', textTransform: 'uppercase', letterSpacing: '0.3px' }}>Body Fields <span style=${{ fontWeight: 400, textTransform: 'none', letterSpacing: 0, fontStyle: 'italic' }}>application/json</span></div>
-                    <div style=${{ display: 'flex', flexDirection: 'column', gap: '4px', marginBottom: '10px' }}>
-                      ${ep.bodyFields.map(f => html`<div key=${f.name} style=${{ display: 'flex', alignItems: 'center', gap: '8px', padding: '6px 10px', borderRadius: '6px', background: 'var(--bg-input)' }}>
-                        <span style=${{ fontFamily: "'SF Mono', monospace", fontSize: '12px', fontWeight: 500, color: 'var(--text-primary)', minWidth: '100px' }}>${f.name}</span>
-                        <span style=${{ padding: '1px 7px', borderRadius: '4px', background: 'var(--accent-glow)', color: 'var(--accent-light)', fontSize: '10px', fontWeight: 500 }}>${f.type}</span>
-                        ${f.required && html`<span style=${{ padding: '1px 7px', borderRadius: '4px', background: 'rgba(52,211,153,0.12)', color: 'var(--success)', fontSize: '10px', fontWeight: 600 }}>required</span>`}
-                        ${f.unique && html`<span style=${{ padding: '1px 7px', borderRadius: '4px', background: 'rgba(251,191,36,0.12)', color: 'var(--warning)', fontSize: '10px', fontWeight: 600 }}>unique</span>`}
-                      </div>`)}
-                    </div>
-                    <div style=${{ padding: '10px 12px', background: 'var(--bg-input)', borderRadius: '6px' }}>
-                      <div style=${{ fontSize: '10px', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.3px', color: 'var(--text-muted)', marginBottom: '6px' }}>Example</div>
-                      <pre style=${{ margin: 0, fontFamily: "'SF Mono', monospace", fontSize: '12px', lineHeight: '1.5', color: 'var(--text-secondary)' }}>${JSON.stringify(Object.fromEntries(ep.bodyFields.map(f => [f.name, f.type === 'Number' ? 0 : f.type === 'Boolean' ? false : f.type === 'Date' ? '2024-01-01' : ''])), null, 2)}</pre>
-                    </div>
-                  </div>`}
-                </div>`}
-              </div>`)}
-            </div>`}
-          </div>`}
-
           <div
             className="card"
             style=${{ padding: 0, overflow: "hidden" }}
@@ -800,9 +579,7 @@ export function RoutesPage() {
                   fontWeight: 600,
                   color: "var(--text-secondary)",
                 }}
-                >${editingRoute
-                  ? "Edit Source Code"
-                  : "Source Code"}</span
+                >Source Code</span
               >
               <span className="field-count"
                 >${selContent
@@ -814,45 +591,7 @@ export function RoutesPage() {
             html`<div style=${{ padding: "30px", textAlign: "center" }}>
               <span className="spinner" />
             </div>`}
-            ${editingRoute &&
-            html`<textarea
-              value=${editCode}
-              onInput=${(e) => setEditCode(e.target.value)}
-              style=${{
-                width: "100%",
-                minHeight: "400px",
-                padding: "16px",
-                border: "none",
-                outline: "none",
-                fontFamily:
-                  "'SF Mono', 'Fira Code', 'Cascadia Code', monospace",
-                fontSize: "13px",
-                lineHeight: "1.6",
-                background: "var(--bg-card)",
-                color: "var(--text-primary)",
-                resize: "vertical",
-                tabSize: 2,
-              }}
-              spellcheck=${false}
-              onKeyDown=${(e) => {
-                if (e.key === "Tab") {
-                  e.preventDefault();
-                  const start = e.target.selectionStart;
-                  const end = e.target.selectionEnd;
-                  const newVal =
-                    editCode.substring(0, start) +
-                    "  " +
-                    editCode.substring(end);
-                  setEditCode(newVal);
-                  setTimeout(() => {
-                    e.target.selectionStart = e.target.selectionEnd =
-                      start + 2;
-                  }, 0);
-                }
-              }}
-            />`}
-            ${!editingRoute &&
-            selContent &&
+            ${selContent &&
             html`<div className="route-code-wrap">
               <div className="code-block">${selContent}</div>
             </div>`}

package/skeleton/.4bnode/assets/js/pages/SchemasPage.js

@@ -1,6 +1,5 @@
 import React, { useState, useEffect, useRef } from "react";
-import { motion, AnimatePresence } from "framer-motion";
-import { LuFileCode, LuLock, LuFileText, LuTable, LuDownload, LuEye, LuEyeOff, LuChevronLeft, LuChevronRight } from "react-icons/lu";
+import { LuFileCode, LuLock } from "react-icons/lu";
 import { html, api, Icons } from "../lib.js";
 import { useApp } from "../context.js";
 
@@ -225,105 +224,9 @@ export function SchemasPage() {
 }
 
 function SchemaDetailPanel({ model, reqCount, uniqCount, onEdit, onDelete }) {
-  const { toast, data } = useApp();
-  const [tab, setTab] = useState('fields');
-  // Data tab state
-  const [docs, setDocs] = useState([]);
-  const [dataTotal, setDataTotal] = useState(0);
-  const [dataPage, setDataPage] = useState(0);
-  const [dataLoading, setDataLoading] = useState(false);
-  const [visibleCols, setVisibleCols] = useState(null);
-  const [showColPicker, setShowColPicker] = useState(false);
-  const [showDownloadMenu, setShowDownloadMenu] = useState(false);
-  const [downloadingAll, setDownloadingAll] = useState(false);
-
-  // Close download menu on outside click
-  useEffect(() => {
-    if (!showDownloadMenu) return;
-    const close = () => setShowDownloadMenu(false);
-    setTimeout(() => document.addEventListener('click', close), 0);
-    return () => document.removeEventListener('click', close);
-  }, [showDownloadMenu]);
-
-  const allFields = ['_id', ...(model.fields?.map(f => f.name) || []), 'createdAt', 'updatedAt'];
-  const cols = visibleCols || allFields.slice(0, 6);
-  const pageSize = 20;
-
-  async function loadData(page) {
-    setDataLoading(true);
-    try {
-      const res = await api('/models/' + model.name + '/data?limit=' + pageSize + '&skip=' + (page * pageSize));
-      setDocs(res.docs || []);
-      setDataTotal(res.total || 0);
-      setDataPage(page);
-    } catch (err) { toast(err.message, 'error'); }
-    setDataLoading(false);
-  }
-
-  useEffect(() => {
-    if (tab === 'data' && docs.length === 0) loadData(0);
-  }, [tab]);
-
-  // Reset when model changes
-  useEffect(() => {
-    setDocs([]); setDataTotal(0); setDataPage(0); setVisibleCols(null); setShowDownloadMenu(false); setTab('fields');
-  }, [model.name]);
-
-  function buildCSV(data, columns) {
-    const header = columns.join(',');
-    const rows = data.map(d => columns.map(c => {
-      const val = d[c];
-      if (val === null || val === undefined) return '';
-      const str = typeof val === 'object' ? JSON.stringify(val) : String(val);
-      return str.includes(',') || str.includes('"') || str.includes('\n') ? '"' + str.replace(/"/g, '""') + '"' : str;
-    }).join(','));
-    return header + '\n' + rows.join('\n');
-  }
-
-  function triggerDownload(csv, filename) {
-    const blob = new Blob([csv], { type: 'text/csv' });
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement('a');
-    a.href = url; a.download = filename; a.click();
-    URL.revokeObjectURL(url);
-  }
-
-  function downloadCurrentPage() {
-    if (!docs.length) return;
-    const csv = buildCSV(docs, cols);
-    triggerDownload(csv, model.name + '_page' + (dataPage + 1) + '.csv');
-    toast('Current page downloaded (' + docs.length + ' rows)', 'success');
-    setShowDownloadMenu(false);
-  }
-
-  async function downloadAllData() {
-    setDownloadingAll(true);
-    setShowDownloadMenu(false);
-    try {
-      const res = await api('/models/' + model.name + '/data?limit=0');
-      const allDocs = res.docs || [];
-      if (allDocs.length === 0) {
-        toast('No data to download', 'error');
-        setDownloadingAll(false);
-        return;
-      }
-      const csv = buildCSV(allDocs, cols);
-      triggerDownload(csv, model.name + '_all.csv');
-      toast('All data downloaded (' + allDocs.length + ' rows)', 'success');
-    } catch (err) {
-      toast(err.message, 'error');
-    }
-    setDownloadingAll(false);
-  }
-
   const thStyle = { padding: '10px 16px', fontSize: '11px', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.5px', color: 'var(--text-muted)', textAlign: 'left', borderBottom: '1px solid var(--border)' };
   const tdStyle = { padding: '8px 16px', fontSize: '12px', borderBottom: '1px solid var(--border)' };
 
-  const tabs = [
-    { id: 'fields', label: 'Fields', icon: LuFileText },
-    { id: 'data', label: 'Data', icon: LuTable },
-  ];
-
   return html`<div>
     <div className="card mb-4">
       <div className="flex items-center justify-between mb-3">
@@ -350,122 +253,29 @@ function SchemaDetailPanel({ model, reqCount, uniqCount, onEdit, onDelete }) {
       </div>
     </div>
 
-    <div style=${{ display: 'inline-flex', gap: '2px', padding: '3px', background: 'var(--bg-input)', borderRadius: '8px', marginBottom: '16px' }}>
-      ${tabs.map(t => html`<button key=${t.id} onClick=${() => setTab(t.id)}
-        style=${{ padding: '6px 14px', borderRadius: '6px', border: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: '6px',
-          background: tab === t.id ? 'var(--bg-surface)' : 'transparent', color: tab === t.id ? 'var(--text-primary)' : 'var(--text-muted)',
-          fontSize: '13px', fontWeight: tab === t.id ? 600 : 400, fontFamily: 'inherit',
-          boxShadow: tab === t.id ? '0 1px 3px rgba(0,0,0,0.2)' : 'none', transition: 'all 0.15s' }}>
-        <${t.icon} size=${13} /> ${t.label}
-      </button>`)}
+    <div className="card" style=${{ padding: 0, overflow: 'hidden' }}>
+      <div style=${{ padding: '12px 16px', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+        <span style=${{ fontSize: '12px', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.5px', color: 'var(--text-muted)' }}>Schema Fields</span>
+      </div>
+      <table style=${{ width: '100%' }}>
+        <thead><tr>
+          <th style=${thStyle}>#</th><th style=${thStyle}>Name</th><th style=${thStyle}>Type</th><th style=${thStyle}>Properties</th>
+        </tr></thead>
+        <tbody>
+          ${model.fields?.map((f, i) => html`<tr key=${f.name} style=${{ borderBottom: '1px solid var(--border)' }}>
+            <td style=${{ ...tdStyle, color: 'var(--text-muted)' }}>${i + 1}</td>
+            <td style=${{ ...tdStyle, fontWeight: 500, fontSize: '13px', fontFamily: "'SF Mono', monospace" }}>${f.name}</td>
+            <td style=${tdStyle}><span style=${{ fontSize: '12px', padding: '2px 8px', borderRadius: '4px', background: 'var(--accent-glow)', color: 'var(--accent-light)' }}>${f.type || 'String'}</span></td>
+            <td style=${tdStyle}><div className="flex gap-1">
+              ${f.required && html`<span className="badge badge-success" style=${{ fontSize: '10px' }}>required</span>`}
+              ${f.unique && html`<span className="badge badge-warning" style=${{ fontSize: '10px' }}>unique</span>`}
+              ${f.index && html`<span className="badge badge-info" style=${{ fontSize: '10px' }}>indexed</span>`}
+              ${!f.required && !f.unique && !f.index && html`<span style=${{ fontSize: '12px', color: 'var(--text-muted)' }}>—</span>`}
+            </div></td>
+          </tr>`)}
+        </tbody>
+      </table>
     </div>
-
-    <${AnimatePresence} mode="wait">
-      <${motion.div} key=${tab} initial=${{ opacity: 0, y: 6 }} animate=${{ opacity: 1, y: 0 }} exit=${{ opacity: 0, y: -6 }} transition=${{ duration: 0.12 }}>
-
-      ${tab === 'fields' && html`<div className="card" style=${{ padding: 0, overflow: 'hidden' }}>
-        <div style=${{ padding: '12px 16px', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-          <span style=${{ fontSize: '12px', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.5px', color: 'var(--text-muted)' }}>Schema Fields</span>
-        </div>
-        <table style=${{ width: '100%' }}>
-          <thead><tr>
-            <th style=${thStyle}>#</th><th style=${thStyle}>Name</th><th style=${thStyle}>Type</th><th style=${thStyle}>Properties</th>
-          </tr></thead>
-          <tbody>
-            ${model.fields?.map((f, i) => html`<tr key=${f.name} style=${{ borderBottom: '1px solid var(--border)' }}>
-              <td style=${{ ...tdStyle, color: 'var(--text-muted)' }}>${i + 1}</td>
-              <td style=${{ ...tdStyle, fontWeight: 500, fontSize: '13px', fontFamily: "'SF Mono', monospace" }}>${f.name}</td>
-              <td style=${tdStyle}><span style=${{ fontSize: '12px', padding: '2px 8px', borderRadius: '4px', background: 'var(--accent-glow)', color: 'var(--accent-light)' }}>${f.type || 'String'}</span></td>
-              <td style=${tdStyle}><div className="flex gap-1">
-                ${f.required && html`<span className="badge badge-success" style=${{ fontSize: '10px' }}>required</span>`}
-                ${f.unique && html`<span className="badge badge-warning" style=${{ fontSize: '10px' }}>unique</span>`}
-                ${f.index && html`<span className="badge badge-info" style=${{ fontSize: '10px' }}>indexed</span>`}
-                ${!f.required && !f.unique && !f.index && html`<span style=${{ fontSize: '12px', color: 'var(--text-muted)' }}>—</span>`}
-              </div></td>
-            </tr>`)}
-          </tbody>
-        </table>
-      </div>`}
-
-      ${tab === 'data' && html`<div className="card" style=${{ padding: 0, overflow: 'hidden' }}>
-        <div style=${{ padding: '12px 16px', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'center', gap: '8px' }}>
-          <span style=${{ fontSize: '12px', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.5px', color: 'var(--text-muted)', flex: 1 }}>
-            Collection Data${dataTotal > 0 ? ' (' + dataTotal + ' documents)' : ''}
-          </span>
-          <button className="btn btn-sm btn-ghost" onClick=${() => setShowColPicker(!showColPicker)} title="Select columns">
-            <${showColPicker ? LuEyeOff : LuEye} size=${14} />
-          </button>
-          <div style=${{ position: 'relative' }}>
-            <button className="btn btn-sm btn-ghost" onClick=${() => setShowDownloadMenu(!showDownloadMenu)} disabled=${!docs.length && !dataTotal} title="Download CSV">
-              ${downloadingAll ? html`<span className="spinner" style=${{ width: '14px', height: '14px' }} />` : html`<${LuDownload} size=${14} />`}
-            </button>
-            ${showDownloadMenu && html`<div style=${{
-              position: 'absolute', top: '100%', right: 0, marginTop: '4px', zIndex: 10,
-              background: 'var(--bg-card)', border: '1px solid var(--border)', borderRadius: '8px',
-              boxShadow: '0 8px 24px rgba(0,0,0,0.3)', minWidth: '200px', overflow: 'hidden'
-            }}>
-              <button onClick=${downloadCurrentPage} disabled=${!docs.length}
-                style=${{ display: 'flex', alignItems: 'center', gap: '8px', width: '100%', padding: '10px 14px',
-                  background: 'transparent', border: 'none', color: !docs.length ? 'var(--text-muted)' : 'var(--text-secondary)',
-                  fontSize: '13px', cursor: !docs.length ? 'not-allowed' : 'pointer', fontFamily: 'inherit', textAlign: 'left' }}
-                onMouseEnter=${e => { if (docs.length) e.currentTarget.style.background = 'rgba(255,255,255,0.04)'; }}
-                onMouseLeave=${e => { e.currentTarget.style.background = 'transparent'; }}>
-                <${LuDownload} size=${13} /> Current page (${docs.length} rows)
-              </button>
-              <button onClick=${downloadAllData}
-                style=${{ display: 'flex', alignItems: 'center', gap: '8px', width: '100%', padding: '10px 14px',
-                  background: 'transparent', border: 'none', color: 'var(--text-secondary)',
-                  fontSize: '13px', cursor: 'pointer', fontFamily: 'inherit', textAlign: 'left',
-                  borderTop: '1px solid var(--border)' }}
-                onMouseEnter=${e => { e.currentTarget.style.background = 'rgba(255,255,255,0.04)'; }}
-                onMouseLeave=${e => { e.currentTarget.style.background = 'transparent'; }}>
-                <${LuDownload} size=${13} /> All data (${dataTotal} rows)
-              </button>
-            </div>`}
-          </div>
-          <button className="btn btn-sm btn-ghost" onClick=${() => loadData(dataPage)} title="Refresh">
-            <${LuTable} size=${14} />
-          </button>
-        </div>
-        ${showColPicker && html`<div style=${{ padding: '10px 16px', borderBottom: '1px solid var(--border)', display: 'flex', flexWrap: 'wrap', gap: '6px' }}>
-          ${allFields.map(f => html`<button key=${f}
-            onClick=${() => {
-              const next = cols.includes(f) ? cols.filter(c => c !== f) : [...cols, f];
-              if (next.length > 0) setVisibleCols(next);
-            }}
-            style=${{ padding: '3px 10px', fontSize: '11px', borderRadius: '4px', border: '1px solid var(--border)', cursor: 'pointer', fontFamily: 'monospace',
-              background: cols.includes(f) ? 'var(--accent-glow)' : 'transparent', color: cols.includes(f) ? 'var(--accent-light)' : 'var(--text-muted)' }}>
-            ${f}
-          </button>`)}
-        </div>`}
-        ${dataLoading && html`<div style=${{ padding: '40px', textAlign: 'center' }}><span className="spinner" /></div>`}
-        ${!dataLoading && docs.length === 0 && html`<div style=${{ padding: '40px', textAlign: 'center', color: 'var(--text-muted)', fontSize: '13px' }}>No documents found in this collection</div>`}
-        ${!dataLoading && docs.length > 0 && html`<div style=${{ overflowX: 'auto' }}>
-          <table style=${{ width: '100%', minWidth: cols.length * 140 + 'px' }}>
-            <thead><tr>${cols.map(c => html`<th key=${c} style=${thStyle}>${c}</th>`)}</tr></thead>
-            <tbody>
-              ${docs.map((doc, i) => html`<tr key=${i} style=${{ borderBottom: '1px solid var(--border)' }}>
-                ${cols.map(c => {
-                  const val = doc[c];
-                  let display = val === null || val === undefined ? '—' : typeof val === 'object' ? JSON.stringify(val) : String(val);
-                  if (display.length > 60) display = display.slice(0, 57) + '...';
-                  return html`<td key=${c} style=${{ ...tdStyle, fontFamily: c === '_id' ? 'monospace' : 'inherit', fontSize: '12px', maxWidth: '200px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>${display}</td>`;
-                })}
-              </tr>`)}
-            </tbody>
-          </table>
-        </div>`}
-        ${dataTotal > pageSize && html`<div style=${{ padding: '10px 16px', borderTop: '1px solid var(--border)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', fontSize: '12px', color: 'var(--text-muted)' }}>
-          <span>Page ${dataPage + 1} of ${Math.ceil(dataTotal / pageSize)}</span>
-          <div className="flex gap-2">
-            <button className="btn btn-sm btn-ghost" disabled=${dataPage === 0} onClick=${() => loadData(dataPage - 1)}><${LuChevronLeft} size=${14} /></button>
-            <button className="btn btn-sm btn-ghost" disabled=${(dataPage + 1) * pageSize >= dataTotal} onClick=${() => loadData(dataPage + 1)}><${LuChevronRight} size=${14} /></button>
-          </div>
-        </div>`}
-      </div>`}
-
-      <//>
-    <//>
   </div>`;
 }