4bnode 4.0.0 → 4.0.3

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

@@ -0,0 +1,901 @@
+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 { html, api, Icons } from "../lib.js";
+import { useApp } from "../context.js";
+
+export function SchemasPage() {
+  const { data, toast, refresh, setPage, showConfirm } = useApp();
+  const [showCreate, setShowCreate] = useState(false);
+  const [editModel, setEditModel] = useState(null);
+  const [selectedModel, setSelectedModel] = useState(null);
+
+  // Auto-select first model
+  useEffect(() => {
+    if (
+      data.models?.length > 0 &&
+      !selectedModel &&
+      !showCreate &&
+      !editModel
+    ) {
+      setSelectedModel(data.models[0].name);
+    }
+  }, [data.models]);
+
+  if (!data.mongoConfigured) {
+    return html`<div className="locked-state">
+      <div className="locked-icon"><${LuLock} size=${24} /></div>
+      <h3>Database Required</h3>
+      <p>
+        You need to set up a database before creating schemas. Schemas
+        define the structure of your data.
+      </p>
+      <button
+        className="btn btn-primary"
+        onClick=${() => setPage("database")}
+      >
+        Set Up Database
+      </button>
+    </div>`;
+  }
+
+  const selected = data.models?.find((m) => m.name === selectedModel);
+  const reqCount =
+    selected?.fields?.filter((f) => f.required).length || 0;
+  const uniqCount = selected?.fields?.filter((f) => f.unique).length || 0;
+  const isEditing = showCreate || !!editModel;
+
+  // Empty state + no create open
+  if (data.models?.length === 0 && !showCreate) {
+    return html`<div>
+      <div className="flex items-center justify-between mb-4">
+        <div className="card-subtitle">0 models defined</div>
+        <button
+          className="btn btn-primary"
+          onClick=${() => {
+            setShowCreate(true);
+            setSelectedModel(null);
+            setEditModel(null);
+          }}
+        >
+          <span className="sidebar-icon">${Icons.plus}</span> New Schema
+        </button>
+      </div>
+      <div className="empty-state">
+        <div className="empty-icon"><${LuFileCode} size=${36} /></div>
+        <h3>No schemas yet</h3>
+        <p>
+          Create your first model schema to define your data structure
+        </p>
+        <button
+          className="btn btn-primary"
+          onClick=${() => setShowCreate(true)}
+        >
+          Create Schema
+        </button>
+      </div>
+    </div>`;
+  }
+
+  return html`<div>
+    <div className="flex items-center justify-between mb-4">
+      <div className="card-subtitle">
+        ${data.models?.length || 0}
+        model${data.models?.length !== 1 ? "s" : ""} defined
+      </div>
+      <button
+        className=${`btn ${isEditing ? "btn-ghost" : "btn-primary"}`}
+        onClick=${() => {
+          if (isEditing) {
+            setShowCreate(false);
+            setEditModel(null);
+            if (data.models?.length)
+              setSelectedModel(data.models[0].name);
+          } else {
+            setShowCreate(true);
+            setSelectedModel(null);
+            setEditModel(null);
+          }
+        }}
+      >
+        ${isEditing
+          ? "Cancel"
+          : html`<span className="sidebar-icon">${Icons.plus}</span> New
+              Schema`}
+      </button>
+    </div>
+
+    <div className="routes-layout">
+      <div className="card" style=${{ padding: 0, overflow: "hidden" }}>
+        <div
+          style=${{
+            padding: "14px 16px 10px",
+            borderBottom: "1px solid var(--border)",
+          }}
+        >
+          <span
+            style=${{
+              fontWeight: 600,
+              fontSize: "12px",
+              textTransform: "uppercase",
+              letterSpacing: "0.5px",
+              color: "var(--text-muted)",
+            }}
+            >Models</span
+          >
+        </div>
+        <div className="routes-list">
+          ${(data.models || []).map((m) => {
+            const isActive =
+              selectedModel === m.name && !showCreate && !editModel;
+            const isEditActive = editModel?.name === m.name;
+            return html`<div
+              key=${m.name}
+              className=${`route-item ${isActive || isEditActive ? "active" : ""}`}
+              onClick=${() => {
+                setShowCreate(false);
+                setEditModel(null);
+                setSelectedModel(m.name);
+              }}
+            >
+              <div
+                style=${{
+                  display: "flex",
+                  flexDirection: "column",
+                  gap: "4px",
+                  flex: 1,
+                  minWidth: 0,
+                }}
+              >
+                <span className="ri-name">${m.name}</span>
+                <span className="ri-file">src/models/${m.name}.js</span>
+              </div>
+              <span className="field-count"
+                >${m.fields?.length || 0}</span
+              >
+            </div>`;
+          })}
+          <div
+            className=${`route-item ${showCreate ? "active" : ""}`}
+            onClick=${() => {
+              setShowCreate(true);
+              setSelectedModel(null);
+              setEditModel(null);
+            }}
+            style=${{
+              borderTop: data.models?.length
+                ? "1px solid var(--border)"
+                : "none",
+            }}
+          >
+            <span
+              className="sidebar-icon"
+              style=${{ color: "var(--accent-light)" }}
+              >${Icons.plus}</span
+            >
+            <span
+              className="ri-name"
+              style=${{ color: "var(--accent-light)" }}
+              >New Schema</span
+            >
+          </div>
+        </div>
+      </div>
+
+      <div className="routes-detail">
+        ${showCreate &&
+        html`<${SchemaBuilderPanel}
+          onDone=${() => {
+            setShowCreate(false);
+            refresh();
+          }}
+        />`}
+        ${editModel &&
+        !showCreate &&
+        html`<${SchemaBuilderPanel}
+          model=${editModel}
+          onDone=${() => {
+            setEditModel(null);
+            refresh();
+          }}
+        />`}
+        ${!showCreate &&
+        !editModel &&
+        !selected &&
+        html`<div className="card">
+          <div className="empty-state" style=${{ padding: "40px" }}>
+            <p>Select a model to view its fields</p>
+          </div>
+        </div>`}
+        ${!showCreate &&
+        !editModel &&
+        selected &&
+        html`<${SchemaDetailPanel} model=${selected} reqCount=${reqCount} uniqCount=${uniqCount}
+          onEdit=${() => { setEditModel(selected); setSelectedModel(null); }}
+          onDelete=${async () => {
+            const ok = await showConfirm('Are you sure you want to delete the model "' + selected.name + '"? This will remove the schema file.', { danger: true, confirmLabel: 'Delete Model' });
+            if (!ok) return;
+            try { await api("/models/" + selected.name, { method: "DELETE" }); toast('Model "' + selected.name + '" deleted', "success"); setSelectedModel(null); refresh(); }
+            catch (err) { toast(err.message, "error"); }
+          }}
+        />`}
+      </div>
+    </div>
+  </div>`;
+}
+
+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">
+        <div>
+          <div style=${{ fontWeight: 600, fontSize: '16px', marginBottom: '2px' }}>${model.name}</div>
+          <div className="text-sm text-muted" style=${{ fontFamily: "'SF Mono', monospace" }}>src/models/${model.name}.js</div>
+        </div>
+        <div className="flex gap-2">
+          <button className="btn btn-ghost btn-sm" onClick=${onEdit}>
+            <span className="sidebar-icon">${Icons.edit}</span> Edit
+          </button>
+          <button className="btn btn-danger btn-sm btn-icon" onClick=${onDelete}>
+            <span className="sidebar-icon">${Icons.trash}</span>
+          </button>
+        </div>
+      </div>
+      <div className="flex gap-3">
+        ${[['Fields', model.fields?.length || 0, null], ['Required', reqCount, reqCount > 0 ? 'var(--success)' : null], ['Unique', uniqCount, uniqCount > 0 ? 'var(--warning)' : null]].map(([label, count, color]) =>
+          html`<div key=${label} style=${{ padding: '8px 14px', background: 'var(--bg-input)', borderRadius: 'var(--radius)', fontSize: '13px' }}>
+            <span style=${{ color: 'var(--text-muted)' }}>${label} </span>
+            <span style=${{ fontWeight: 600, color: color || 'var(--text-secondary)' }}>${count}</span>
+          </div>`
+        )}
+      </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>
+
+    <${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.required && !f.unique && 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>`;
+}
+
+function SchemaBuilderPanel({ model, onDone }) {
+  const { data, toast, refresh } = useApp();
+  const [name, setName] = useState(model?.name || "");
+  const [fields, setFields] = useState(
+    model?.fields?.map((f) => ({ ...f })) || [],
+  );
+  const [loading, setLoading] = useState(false);
+  const [saved, setSaved] = useState(false);
+  const [editIndex, setEditIndex] = useState(null);
+  const isEdit = !!model;
+
+  // Add/edit field form state
+  const [fname, setFname] = useState("");
+  const [ftype, setFtype] = useState("String");
+  const [freq, setFreq] = useState(false);
+  const [funiq, setFuniq] = useState(false);
+  const [fref, setFref] = useState("");
+  const nameRef = useRef(null);
+  const fieldNameRef = useRef(null);
+
+  const fieldTypes = [
+    "String",
+    "Number",
+    "Boolean",
+    "Date",
+    "ObjectId",
+    "Array",
+    "Mixed",
+    "Buffer",
+    "Map",
+  ];
+
+  // Get other model names for ObjectId ref
+  const otherModels = (data.models || [])
+    .map((m) => m.name)
+    .filter((n) => n !== name);
+
+  useEffect(() => {
+    if (!isEdit && nameRef.current) nameRef.current.focus();
+    else if (isEdit && fieldNameRef.current) fieldNameRef.current.focus();
+  }, []);
+
+  function resetFieldForm() {
+    setFname("");
+    setFtype("String");
+    setFreq(false);
+    setFuniq(false);
+    setFref("");
+    setEditIndex(null);
+  }
+
+  function addOrUpdateField() {
+    if (!fname.trim()) return;
+    const fieldData = {
+      name: fname.trim(),
+      type: ftype,
+      required: freq,
+      unique: funiq,
+    };
+    if (ftype === "ObjectId" && fref) fieldData.ref = fref;
+
+    if (editIndex !== null) {
+      setFields((prev) =>
+        prev.map((f, i) => (i === editIndex ? fieldData : f)),
+      );
+      setEditIndex(null);
+    } else {
+      setFields((prev) => [...prev, fieldData]);
+    }
+    resetFieldForm();
+    setSaved(false);
+    setTimeout(() => fieldNameRef.current?.focus(), 50);
+  }
+
+  function startEdit(index) {
+    const f = fields[index];
+    setFname(f.name);
+    setFtype(f.type || "String");
+    setFreq(!!f.required);
+    setFuniq(!!f.unique);
+    setFref(f.ref || "");
+    setEditIndex(index);
+    setTimeout(() => fieldNameRef.current?.focus(), 50);
+  }
+
+  function removeField(index) {
+    setFields((prev) => prev.filter((_, i) => i !== index));
+    if (editIndex === index) resetFieldForm();
+    setSaved(false);
+  }
+
+  async function handleSave() {
+    if (!name.trim()) {
+      toast("Model name is required", "error");
+      return;
+    }
+    if (fields.length === 0) {
+      toast("Add at least one field", "error");
+      return;
+    }
+    setLoading(true);
+    try {
+      if (isEdit) {
+        await api("/models/" + model.name, {
+          method: "PUT",
+          body: { fields },
+        });
+        toast('Model "' + model.name + '" updated', "success");
+      } else {
+        await api("/models", {
+          method: "POST",
+          body: { name: name.trim(), fields },
+        });
+        toast('Model "' + name.trim() + '" created', "success");
+      }
+      setSaved(true);
+      refresh();
+      onDone();
+    } catch (err) {
+      toast(err.message, "error");
+    }
+    setLoading(false);
+  }
+
+  const typeColors = {
+    String: "var(--accent-light)",
+    Number: "var(--success)",
+    Boolean: "var(--warning)",
+    Date: "#a78bfa",
+    ObjectId: "#f472b6",
+    Array: "#22d3ee",
+    Mixed: "var(--text-secondary)",
+    Buffer: "#fb923c",
+    Map: "#34d399",
+  };
+
+  return html`<div>
+    <div className="card mb-4">
+      <div
+        className="flex items-center justify-between"
+        style=${{ marginBottom: "16px" }}
+      >
+        <div style=${{ fontSize: "15px", fontWeight: 600 }}>
+          ${isEdit ? "Edit Schema: " + model.name : "Create New Schema"}
+        </div>
+        <button
+          className="btn btn-primary btn-sm"
+          onClick=${handleSave}
+          disabled=${loading || fields.length === 0 || !name.trim()}
+        >
+          ${loading ? html`<span className="spinner" />` : null}
+          ${saved ? "\u2713 Saved" : isEdit ? "Update" : "Save Schema"}
+        </button>
+      </div>
+
+      ${!isEdit &&
+      html`<div className="form-group">
+        <label className="form-label">Model Name</label>
+        <input
+          ref=${nameRef}
+          className="form-input"
+          value=${name}
+          onInput=${(e) => setName(e.target.value)}
+          placeholder="e.g. user, product, post"
+          style=${{ fontSize: "14px", padding: "11px 14px" }}
+        />
+      </div>`}
+
+      <div
+        style=${{
+          fontSize: "11px",
+          fontWeight: 600,
+          textTransform: "uppercase",
+          letterSpacing: "0.5px",
+          color:
+            editIndex !== null ? "var(--warning)" : "var(--text-muted)",
+          marginBottom: "10px",
+          marginTop: isEdit ? 0 : "8px",
+        }}
+      >
+        ${editIndex !== null ? "Edit Field" : "Add Field"}
+      </div>
+
+      <div
+        className="flex items-center gap-3 mb-3"
+        style=${{ flexWrap: "wrap" }}
+      >
+        <input
+          ref=${fieldNameRef}
+          className="form-input"
+          value=${fname}
+          onInput=${(e) => setFname(e.target.value)}
+          onKeyDown=${(e) => e.key === "Enter" && addOrUpdateField()}
+          placeholder="Field name"
+          style=${{
+            fontSize: "13px",
+            flex: "1 1 120px",
+            minWidth: "100px",
+          }}
+        />
+        <select
+          className="form-select"
+          value=${ftype}
+          onChange=${(e) => {
+            setFtype(e.target.value);
+            if (e.target.value !== "ObjectId") setFref("");
+          }}
+          style=${{ fontSize: "13px", width: "110px", flex: "0 0 110px" }}
+        >
+          ${fieldTypes.map(
+            (t) => html`<option key=${t} value=${t}>${t}</option>`,
+          )}
+        </select>
+        ${ftype === "ObjectId" &&
+        html`<select
+          className="form-select"
+          value=${fref}
+          onChange=${(e) => setFref(e.target.value)}
+          style=${{ fontSize: "13px", width: "110px", flex: "0 0 110px" }}
+        >
+          <option value="">Ref...</option>
+          ${otherModels.map(
+            (m) => html`<option key=${m} value=${m}>${m}</option>`,
+          )}
+        </select>`}
+        <div style=${{ display: 'flex', alignItems: 'center', gap: '16px', padding: '0 4px' }}>
+          <label
+            className="flex items-center gap-2"
+            style=${{
+              cursor: "pointer",
+              fontSize: "12px",
+              whiteSpace: "nowrap",
+              color: freq ? "var(--success)" : "var(--text-muted)",
+            }}
+          >
+            <div className="form-toggle">
+              <input
+                type="checkbox"
+                checked=${freq}
+                onChange=${(e) => setFreq(e.target.checked)}
+              />
+              <span className="slider" />
+            </div>
+            Required
+          </label>
+          <label
+            className="flex items-center gap-2"
+            style=${{
+              cursor: "pointer",
+              fontSize: "12px",
+              whiteSpace: "nowrap",
+              color: funiq ? "var(--warning)" : "var(--text-muted)",
+            }}
+          >
+            <div className="form-toggle">
+              <input
+                type="checkbox"
+                checked=${funiq}
+                onChange=${(e) => setFuniq(e.target.checked)}
+              />
+              <span className="slider" />
+            </div>
+            Unique
+          </label>
+        </div>
+        ${editIndex !== null &&
+        html`<button
+          className="btn btn-ghost btn-sm"
+          onClick=${resetFieldForm}
+          style=${{ padding: "5px 8px" }}
+        >
+          Cancel
+        </button>`}
+        <button
+          className="btn ${editIndex !== null
+            ? "btn-warning"
+            : "btn-primary"} btn-sm"
+          onClick=${addOrUpdateField}
+          disabled=${!fname.trim()}
+          style=${{ padding: "5px 10px", whiteSpace: "nowrap" }}
+        >
+          ${editIndex !== null
+            ? "Update"
+            : html`<span className="sidebar-icon">${Icons.plus}</span>
+                Add`}
+        </button>
+      </div>
+    </div>
+
+    ${fields.length > 0 &&
+    html`<div
+      className="card mb-4"
+      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)",
+          }}
+          >Fields</span
+        >
+        <span className="field-count">${fields.length}</span>
+      </div>
+      <div style=${{ maxHeight: "340px", overflowY: "auto" }}>
+        ${fields.map(
+          (f, i) =>
+            html`<div
+              key=${i}
+              className="flex items-center gap-3"
+              style=${{
+                padding: "8px 16px",
+                borderBottom: "1px solid rgba(255,255,255,0.03)",
+                background:
+                  editIndex === i ? "var(--warning-glow)" : "transparent",
+                transition: "background var(--transition)",
+              }}
+              onMouseEnter=${(e) => {
+                if (editIndex !== i)
+                  e.currentTarget.style.background =
+                    "rgba(255,255,255,0.02)";
+              }}
+              onMouseLeave=${(e) => {
+                if (editIndex !== i)
+                  e.currentTarget.style.background = "transparent";
+              }}
+            >
+              <span
+                style=${{
+                  fontSize: "11px",
+                  color: "var(--text-muted)",
+                  width: "20px",
+                  fontVariantNumeric: "tabular-nums",
+                }}
+                >${i + 1}</span
+              >
+              <span
+                style=${{
+                  fontWeight: 500,
+                  fontSize: "13px",
+                  flex: 1,
+                  fontFamily: "'SF Mono', 'Fira Code', monospace",
+                }}
+                >${f.name}</span
+              >
+              <span
+                style=${{
+                  fontSize: "11px",
+                  padding: "2px 8px",
+                  borderRadius: "4px",
+                  background: "rgba(255,255,255,0.04)",
+                  color: typeColors[f.type] || "var(--text-secondary)",
+                }}
+                >${f.type}${f.ref ? " \u2192 " + f.ref : ""}</span
+              >
+              ${f.required &&
+              html`<span
+                style=${{
+                  fontSize: "9px",
+                  padding: "2px 6px",
+                  borderRadius: "4px",
+                  background: "var(--success-glow)",
+                  color: "var(--success)",
+                  fontWeight: 600,
+                }}
+                >REQ</span
+              >`}
+              ${f.unique &&
+              html`<span
+                style=${{
+                  fontSize: "9px",
+                  padding: "2px 6px",
+                  borderRadius: "4px",
+                  background: "var(--warning-glow)",
+                  color: "var(--warning)",
+                  fontWeight: 600,
+                }}
+                >UNQ</span
+              >`}
+              <button
+                className="btn btn-ghost btn-sm btn-icon"
+                onClick=${() => startEdit(i)}
+                style=${{
+                  color: "var(--accent-light)",
+                  opacity: 0.6,
+                  padding: "4px",
+                }}
+              >
+                <span className="sidebar-icon">${Icons.edit}</span>
+              </button>
+              <button
+                className="btn btn-ghost btn-sm btn-icon"
+                onClick=${() => removeField(i)}
+                style=${{
+                  color: "var(--error)",
+                  opacity: 0.5,
+                  padding: "4px",
+                }}
+              >
+                <span className="sidebar-icon">${Icons.trash}</span>
+              </button>
+            </div>`,
+        )}
+      </div>
+    </div>`}
+    ${fields.length === 0 &&
+    html`<div
+      className="card mb-4"
+      style=${{
+        background: "var(--bg)",
+        padding: "30px",
+        textAlign: "center",
+      }}
+    >
+      <div style=${{ fontSize: "12px", color: "var(--text-muted)" }}>
+        Add fields above to define your schema
+      </div>
+    </div>`}
+  </div>`;
+}