4bnode 4.0.0 → 4.0.2

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

@@ -0,0 +1,1656 @@
+import React, { useState, useEffect, useRef } from "react";
+import { LuCheck, LuCopy, LuPlug, LuShare2 } from "react-icons/lu";
+import { html, api, Icons } from "../lib.js";
+import { useApp } from "../context.js";
+
+export function RoutesPage() {
+  const { data, toast, refresh, showConfirm } = useApp();
+  const [showCreate, setShowCreate] = useState(false);
+  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([]);
+  const [amModelName, setAmModelName] = useState("");
+  const [amLoginField, setAmLoginField] = useState("");
+  const [amPasswordField, setAmPasswordField] = useState("");
+  const [amRegisterFields, setAmRegisterFields] = useState([]);
+  const [amSelectedFields, setAmSelectedFields] = useState([]);
+  const [amCustomFields, setAmCustomFields] = useState([]);
+  const [amNewFieldName, setAmNewFieldName] = useState("");
+  const [amNewFieldType, setAmNewFieldType] = useState("String");
+  const [amLoading, setAmLoading] = useState(false);
+
+  // Auto-select first route
+  useEffect(() => {
+    if (data.routes?.length > 0 && !selectedRoute && !showCreate) {
+      selectRoute(data.routes[0]);
+    }
+  }, [data.routes]);
+
+  async function selectRoute(filename) {
+    setShowCreate(false);
+    setEditingRoute(false);
+    setShowShare(false);
+    setShareData(null);
+    setSelectedRoute(filename);
+    if (!routeContents[filename]) {
+      setLoadingRoute(filename);
+      try {
+        const result = await api("/routes/" + filename + "/content");
+        setRouteContents((prev) => ({ ...prev, [filename]: result }));
+      } catch (err) {
+        toast(err.message, "error");
+      }
+      setLoadingRoute(null);
+    }
+  }
+
+  function parseEndpoints(content) {
+    if (!content) return [];
+    const endpoints = [];
+    const regex =
+      /router\.(get|post|put|patch|delete)\(\s*['"`](\/[^'"`]*?)['"`]/gi;
+    let m;
+    while ((m = regex.exec(content)) !== null) {
+      endpoints.push({ method: m[1].toUpperCase(), path: m[2] });
+    }
+    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() {
+    navigator.clipboard.writeText(generateShareMarkdown());
+    setShareCopied(true);
+    toast('Copied to clipboard', 'success');
+    setTimeout(() => setShareCopied(false), 2000);
+  }
+
+  function getMethodsForFile(filename) {
+    const content = routeContents[filename]?.content;
+    if (!content) return [];
+    const methods = [];
+    const regex = /router\.(get|post|put|patch|delete)\(/gi;
+    let m;
+    while ((m = regex.exec(content)) !== null) {
+      const method = m[1].toUpperCase();
+      if (!methods.includes(method)) methods.push(method);
+    }
+    return methods;
+  }
+
+  const selName = selectedRoute?.replace(".js", "") || "";
+  const selContent = routeContents[selectedRoute]?.content;
+  const selEndpoints = parseEndpoints(selContent);
+  const hasAuth = selContent?.includes("import auth") || false;
+  const hasModel = selContent?.match(
+    /import\s+(\w+)\s+from\s+'\.\.\/models/,
+  );
+
+  // When no routes yet, show empty + create in a simpler layout
+  if (data.routes?.length === 0 && !showCreate) {
+    return html`<div>
+      <div className="flex items-center justify-between mb-4">
+        <div>
+          <div className="card-title">API Routes</div>
+          <div className="card-subtitle">0 route files</div>
+        </div>
+        <button
+          className="btn btn-primary"
+          onClick=${() => setShowCreate(true)}
+        >
+          <span className="sidebar-icon">${Icons.plus}</span> New Route
+        </button>
+      </div>
+      <div className="empty-state">
+        <div className="empty-icon"><${LuPlug} size=${36} /></div>
+        <h3>No routes yet</h3>
+        <p>Create your first API endpoint to get started</p>
+        <button
+          className="btn btn-primary"
+          onClick=${() => setShowCreate(true)}
+        >
+          Create Route
+        </button>
+      </div>
+    </div>`;
+  }
+
+  return html`<div>
+    <div className="flex items-center justify-between mb-4">
+      <div>
+        <div className="card-title">API Routes</div>
+        <div className="card-subtitle">
+          ${data.routes?.length || 0} route
+          file${data.routes?.length !== 1 ? "s" : ""}
+        </div>
+      </div>
+      <button
+        className=${`btn ${showCreate ? "btn-ghost" : "btn-primary"}`}
+        onClick=${() => {
+          if (showCreate) {
+            setShowCreate(false);
+            if (data.routes?.length) selectRoute(data.routes[0]);
+          } else {
+            setShowCreate(true);
+            setSelectedRoute(null);
+          }
+        }}
+      >
+        ${showCreate
+          ? "Cancel"
+          : html`<span className="sidebar-icon">${Icons.plus}</span> New
+              Route`}
+      </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)",
+            }}
+            >Files</span
+          >
+        </div>
+        <div className="routes-list">
+          ${(data.routes || []).map((r) => {
+            const rName = r.replace(".js", "");
+            const methods = getMethodsForFile(r);
+            const isActive = selectedRoute === r && !showCreate;
+            return html`<div
+              key=${r}
+              className=${`route-item ${isActive ? "active" : ""}`}
+              onClick=${() => selectRoute(r)}
+            >
+              <div
+                style=${{
+                  display: "flex",
+                  flexDirection: "column",
+                  gap: "4px",
+                  flex: 1,
+                  minWidth: 0,
+                }}
+              >
+                <span className="ri-name">${rName}</span>
+                <span className="ri-file">src/routes/${r}</span>
+              </div>
+              <div className="flex gap-1" style=${{ flexWrap: "wrap" }}>
+                ${methods.length > 0
+                  ? methods.map(
+                      (m) =>
+                        html`<span
+                          key=${m}
+                          className=${`route-method ${m.toLowerCase()}`}
+                          >${m}</span
+                        >`,
+                    )
+                  : html`<span className="route-method multi">...</span>`}
+              </div>
+            </div>`;
+          })}
+          <div
+            className=${`route-item ${showCreate ? "active" : ""}`}
+            onClick=${() => {
+              setShowCreate(true);
+              setSelectedRoute(null);
+            }}
+            style=${{
+              borderTop: data.routes?.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 Route</span
+            >
+          </div>
+        </div>
+      </div>
+
+      <div className="routes-detail">
+        ${showCreate &&
+        html`<${CreateRoutePanel}
+          onCreated=${() => {
+            setShowCreate(false);
+            refresh();
+          }}
+        />`}
+        ${!showCreate &&
+        !selectedRoute &&
+        html`<div className="card">
+          <div className="empty-state" style=${{ padding: "40px" }}>
+            <p>Select a route to view details</p>
+          </div>
+        </div>`}
+        ${!showCreate &&
+        selectedRoute &&
+        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",
+                  }}
+                >
+                  ${selName}
+                </div>
+                <div
+                  className="text-sm text-muted"
+                  style=${{
+                    fontFamily: "'SF Mono', 'Fira Code', monospace",
+                  }}
+                >
+                  src/routes/${selectedRoute}
+                </div>
+              </div>
+              <div className="flex gap-2 items-center">
+                ${hasAuth &&
+                html`<span className="badge badge-warning">Auth</span>`}
+                ${hasModel &&
+                html`<span className="badge badge-info"
+                  >Model: ${hasModel[1]}</span
+                >`}
+                <button
+                  className=${`btn btn-sm ${showAddMethod ? 'btn-primary' : 'btn-ghost'}`}
+                  onClick=${() => {
+                    setShowAddMethod(!showAddMethod);
+                    setAmRouteType(null);
+                    setAmMethods([]);
+                    setAmModelName("");
+                    setAmLoginField("");
+                    setAmPasswordField("");
+                    setAmRegisterFields([]);
+                    setAmSelectedFields([]);
+                    setAmCustomFields([]);
+                  }}
+                >
+                  ${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 () => {
+                    const ok = await showConfirm('Delete route "' + selName + '"? This will remove the route file and its registration from index.js.', { danger: true, confirmLabel: 'Delete Route' });
+                    if (!ok) return;
+                    try {
+                      await api("/routes/" + selectedRoute, {
+                        method: "DELETE",
+                      });
+                      toast('Route "' + selName + '" deleted', "success");
+                      setSelectedRoute(null);
+                      setEditingRoute(false);
+                      setRouteContents((prev) => {
+                        const n = { ...prev };
+                        delete n[selectedRoute];
+                        return n;
+                      });
+                      refresh();
+                    } catch (err) {
+                      toast(err.message, "error");
+                    }
+                  }}
+                >
+                  <span className="sidebar-icon">${Icons.trash}</span>
+                </button>
+              </div>
+            </div>
+
+            ${selEndpoints.length > 0 &&
+            !editingRoute &&
+            html`<div>
+              <div
+                style=${{
+                  fontSize: "11px",
+                  fontWeight: 600,
+                  textTransform: "uppercase",
+                  letterSpacing: "0.5px",
+                  color: "var(--text-muted)",
+                  marginBottom: "8px",
+                }}
+              >
+                Endpoints
+              </div>
+              ${selEndpoints.map(
+                (ep, i) =>
+                  html`<div className="route-endpoint-row" key=${i}>
+                    <span
+                      className=${`route-method ${ep.method.toLowerCase()}`}
+                      >${ep.method}</span
+                    >
+                    <span className="route-endpoint-path"
+                      >/api/${selName}${ep.path === "/"
+                        ? ""
+                        : ep.path}</span
+                    >
+                  </div>`,
+              )}
+            </div>`}
+          </div>
+
+          ${(() => {
+            const amNeedsModel = amRouteType && amRouteType !== "methods" && amRouteType !== "plain";
+            const amIsAuthType = amRouteType === "login" || amRouteType === "register";
+            const amModelObj = data.models?.find(m => m.name === amModelName);
+            const amModelFields = amModelObj?.fields || [];
+            const amMethodColors = { get: "#22c55e", post: "#3b82f6", put: "#f59e0b", patch: "#a855f7", delete: "#ef4444" };
+            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">
+            <div style=${{ fontSize: "15px", fontWeight: 600, marginBottom: "14px" }}>Add to ${selName}</div>
+
+            <div className="form-group">
+              <label className="form-label">Type</label>
+              <div style=${{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: "6px" }}>
+                ${[
+                  { id: "methods", label: "Methods", desc: "GET, POST, PUT...", color: "var(--accent-light)" },
+                  { id: "crud", label: "CRUD", desc: "Model CRUD ops", color: "#3b82f6" },
+                  { id: "login", label: "Login", desc: "JWT login", color: "#22d3ee" },
+                  { id: "register", label: "Register", desc: "Sign up", color: "#34d399" },
+                ].map(t => {
+                  const active = amRouteType === t.id;
+                  return html`<button key=${t.id} style=${{
+                    padding: "8px 4px", borderRadius: "var(--radius)", cursor: "pointer", textAlign: "center",
+                    border: active ? "1.5px solid " + t.color : "1.5px solid var(--border)",
+                    background: active ? "rgba(255,255,255,0.04)" : "var(--bg-input)",
+                    opacity: active ? 1 : 0.5, transition: "all 0.15s",
+                  }} onClick=${() => { setAmRouteType(prev => prev === t.id ? null : t.id); if (t.id !== "methods" && t.id !== "crud") setAmMethods([]); }}>
+                    <div style=${{ fontSize: "11px", fontWeight: 700, color: active ? t.color : "var(--text-secondary)" }}>${t.label}</div>
+                    <div style=${{ fontSize: "9px", color: "var(--text-muted)", marginTop: "1px" }}>${t.desc}</div>
+                  </button>`;
+                })}
+              </div>
+            </div>
+
+            ${amRouteType === "methods" && html`<div className="form-group">
+              <label className="form-label">HTTP Methods</label>
+              <div className="flex gap-2">
+                ${["get", "post", "put", "patch", "delete"].map(m => html`<button key=${m}
+                  className=${`route-method ${m}`}
+                  style=${{
+                    cursor: existingMethods.includes(m) ? "not-allowed" : "pointer",
+                    border: amMethods.includes(m) ? "2px solid " + amMethodColors[m] : "2px solid transparent",
+                    padding: "6px 12px", fontSize: "11px",
+                    opacity: existingMethods.includes(m) ? 0.15 : amMethods.includes(m) ? 1 : 0.35,
+                    borderRadius: "6px", transition: "all 0.15s",
+                    textDecoration: existingMethods.includes(m) ? "line-through" : "none",
+                  }}
+                  disabled=${existingMethods.includes(m)}
+                  onClick=${() => !existingMethods.includes(m) && setAmMethods(prev => prev.includes(m) ? prev.filter(x => x !== m) : [...prev, m])}
+                >${m.toUpperCase()}</button>`)}
+              </div>
+            </div>`}
+
+            ${amRouteType === "crud" && html`<div className="form-group">
+              <label className="form-label">CRUD Methods <span style=${{ color: "var(--text-muted)", fontWeight: 400 }}>(select operations)</span></label>
+              <div className="flex gap-2">
+                ${["get", "post", "put", "patch", "delete"].map(m => {
+                  const labels = { get: "READ", post: "CREATE", put: "UPDATE", patch: "PATCH", delete: "DELETE" };
+                  return html`<button key=${m} className=${`route-method ${m}`} style=${{
+                    cursor: existingMethods.includes(m) ? "not-allowed" : "pointer",
+                    border: amMethods.includes(m) ? "2px solid " + amMethodColors[m] : "2px solid transparent",
+                    padding: "6px 12px", fontSize: "11px",
+                    opacity: existingMethods.includes(m) ? 0.15 : amMethods.includes(m) ? 1 : 0.35,
+                    borderRadius: "6px", transition: "all 0.15s",
+                    textDecoration: existingMethods.includes(m) ? "line-through" : "none",
+                  }} disabled=${existingMethods.includes(m)}
+                    onClick=${() => !existingMethods.includes(m) && setAmMethods(prev => prev.includes(m) ? prev.filter(x => x !== m) : [...prev, m])}
+                  >${labels[m]}</button>`;
+                })}
+              </div>
+            </div>`}
+
+            ${amNeedsModel && html`<div className="form-group">
+              <label className="form-label">Model</label>
+              <select className="form-select" value=${amModelName} onChange=${(e) => { setAmModelName(e.target.value); setAmLoginField(""); setAmPasswordField(""); setAmRegisterFields([]); }}>
+                <option value="">Select a model...</option>
+                ${(data.models || []).map(m => html`<option key=${m.name} value=${m.name}>${m.name}</option>`)}
+              </select>
+            </div>`}
+
+            ${amRouteType === "methods" && html`<div className="form-group">
+              <label className="form-label">Fields from Model <span style=${{ color: "var(--text-muted)", fontWeight: 400 }}>(optional)</span></label>
+              ${data.models?.length > 0 ? html`<select className="form-select" style=${{ marginBottom: "8px" }} value=${amModelName}
+                onChange=${(e) => { setAmModelName(e.target.value); setAmSelectedFields([]); }}>
+                <option value="">Select a model...</option>
+                ${data.models.map(m => html`<option key=${m.name} value=${m.name}>${m.name}</option>`)}
+              </select>
+              ${amModelName && amModelFields.length > 0 && html`<div className="flex gap-2" style=${{ flexWrap: "wrap" }}>
+                ${amModelFields.map(f => {
+                  const active = amSelectedFields.includes(f.name);
+                  return html`<button key=${f.name} style=${{
+                    padding: "5px 12px", borderRadius: "6px", fontSize: "12px", cursor: "pointer",
+                    border: active ? "1.5px solid var(--accent)" : "1.5px solid var(--border)",
+                    background: active ? "var(--accent-glow)" : "var(--bg-input)",
+                    color: active ? "var(--accent-light)" : "var(--text-secondary)",
+                    fontWeight: active ? 600 : 400, transition: "all 0.15s",
+                  }} onClick=${() => setAmSelectedFields(prev => active ? prev.filter(x => x !== f.name) : [...prev, f.name])}>
+                    ${f.name} <span style=${{ fontSize: "10px", color: "var(--text-muted)", marginLeft: "4px" }}>${f.type}</span>
+                  </button>`;
+                })}
+              </div>`}` : html`<div style=${{ fontSize: "11px", color: "var(--text-muted)" }}>No models found.</div>`}
+            </div>`}
+
+            ${amRouteType === "login" && amModelName && amModelFields.length > 0 && html`<div className="form-group">
+              <label className="form-label">Find user by</label>
+              <div className="flex gap-2" style=${{ flexWrap: "wrap" }}>
+                ${amModelFields.map(f => html`<button key=${f.name} style=${{
+                  padding: "5px 12px", borderRadius: "6px", fontSize: "12px", cursor: "pointer",
+                  border: amLoginField === f.name ? "1.5px solid var(--accent)" : "1.5px solid var(--border)",
+                  background: amLoginField === f.name ? "var(--accent-glow)" : "var(--bg-input)",
+                  color: amLoginField === f.name ? "var(--accent-light)" : "var(--text-secondary)",
+                  fontWeight: amLoginField === f.name ? 600 : 400, transition: "all 0.15s",
+                }} onClick=${() => setAmLoginField(f.name)}>${f.name}</button>`)}
+              </div>
+            </div>`}
+
+            ${amIsAuthType && amModelName && amModelFields.length > 0 && html`<div className="form-group">
+              <label className="form-label">Password field <span style=${{ color: "var(--text-muted)", fontWeight: 400 }}>(optional — enables bcrypt)</span></label>
+              <div className="flex gap-2" style=${{ flexWrap: "wrap" }}>
+                <button style=${{
+                  padding: "5px 12px", borderRadius: "6px", fontSize: "12px", cursor: "pointer",
+                  border: !amPasswordField ? "1.5px solid var(--accent)" : "1.5px solid var(--border)",
+                  background: !amPasswordField ? "var(--accent-glow)" : "var(--bg-input)",
+                  color: !amPasswordField ? "var(--accent-light)" : "var(--text-secondary)",
+                  fontWeight: !amPasswordField ? 600 : 400, transition: "all 0.15s",
+                }} onClick=${() => setAmPasswordField("")}>None</button>
+                ${amModelFields.map(f => html`<button key=${f.name} style=${{
+                  padding: "5px 12px", borderRadius: "6px", fontSize: "12px", cursor: "pointer",
+                  border: amPasswordField === f.name ? "1.5px solid var(--warning)" : "1.5px solid var(--border)",
+                  background: amPasswordField === f.name ? "var(--warning-glow)" : "var(--bg-input)",
+                  color: amPasswordField === f.name ? "var(--warning)" : "var(--text-secondary)",
+                  fontWeight: amPasswordField === f.name ? 600 : 400, transition: "all 0.15s",
+                }} onClick=${() => setAmPasswordField(f.name)}>${f.name}</button>`)}
+              </div>
+            </div>`}
+
+            ${amRouteType === "register" && amModelName && amModelFields.length > 0 && html`<div className="form-group">
+              <label className="form-label">Registration fields</label>
+              <div className="flex gap-2" style=${{ flexWrap: "wrap" }}>
+                ${amModelFields.map(f => {
+                  const active = amRegisterFields.includes(f.name);
+                  return html`<button key=${f.name} style=${{
+                    padding: "5px 12px", borderRadius: "6px", fontSize: "12px", cursor: "pointer",
+                    border: active ? "1.5px solid var(--success)" : "1.5px solid var(--border)",
+                    background: active ? "var(--success-glow)" : "var(--bg-input)",
+                    color: active ? "var(--success)" : "var(--text-secondary)",
+                    fontWeight: active ? 600 : 400, transition: "all 0.15s",
+                  }} onClick=${() => setAmRegisterFields(prev => active ? prev.filter(x => x !== f.name) : [...prev, f.name])}>${f.name}</button>`;
+                })}
+              </div>
+            </div>`}
+
+            ${amRouteType === "register" && amModelName && amModelFields.length > 0 && html`<div className="form-group">
+              <label className="form-label">Check duplicate by</label>
+              <div className="flex gap-2" style=${{ flexWrap: "wrap" }}>
+                ${amModelFields.map(f => html`<button key=${f.name} style=${{
+                  padding: "5px 12px", borderRadius: "6px", fontSize: "12px", cursor: "pointer",
+                  border: amLoginField === f.name ? "1.5px solid var(--accent)" : "1.5px solid var(--border)",
+                  background: amLoginField === f.name ? "var(--accent-glow)" : "var(--bg-input)",
+                  color: amLoginField === f.name ? "var(--accent-light)" : "var(--text-secondary)",
+                  fontWeight: amLoginField === f.name ? 600 : 400, transition: "all 0.15s",
+                }} onClick=${() => setAmLoginField(f.name)}>${f.name}</button>`)}
+              </div>
+            </div>`}
+
+            ${amRouteType === "methods" && html`<div className="form-group">
+              <label className="form-label">Custom Fields <span style=${{ color: "var(--text-muted)", fontWeight: 400 }}>(from client)</span></label>
+              ${amCustomFields.length > 0 && html`<div style=${{ display: "flex", flexWrap: "wrap", gap: "6px", marginBottom: "8px" }}>
+                ${amCustomFields.map((f, i) => html`<span key=${i} style=${{
+                  padding: "4px 10px", borderRadius: "6px", fontSize: "12px",
+                  background: "var(--bg-input)", border: "1.5px solid var(--border)",
+                  color: "var(--text-primary)", display: "flex", alignItems: "center", gap: "6px",
+                }}>
+                  ${f.name} <span style=${{ fontSize: "10px", color: f.type === "File" ? "var(--warning)" : "var(--text-muted)" }}>${f.type}</span>
+                  <span style=${{ cursor: "pointer", color: "var(--text-muted)", fontSize: "14px", lineHeight: 1 }}
+                    onClick=${() => setAmCustomFields(prev => prev.filter((_, idx) => idx !== i))}>×</span>
+                </span>`)}
+              </div>`}
+              <div className="flex gap-2" style=${{ alignItems: "center" }}>
+                <input className="form-input" value=${amNewFieldName}
+                  onInput=${(e) => setAmNewFieldName(e.target.value)} placeholder="Field name"
+                  style=${{ fontSize: "13px", padding: "8px 12px", flex: 1 }}
+                  onKeyDown=${(e) => { if (e.key === "Enter" && amNewFieldName.trim()) { setAmCustomFields(prev => [...prev, { name: amNewFieldName.trim(), type: amNewFieldType }]); setAmNewFieldName(""); }}} />
+                <select className="form-select" value=${amNewFieldType} onChange=${(e) => setAmNewFieldType(e.target.value)} style=${{ width: "auto", minWidth: "100px" }}>
+                  <option value="String">String</option><option value="Number">Number</option><option value="Boolean">Boolean</option>
+                  <option value="Date">Date</option><option value="Array">Array</option><option value="Object">Object</option><option value="File">File</option>
+                </select>
+                <button className="btn btn-sm" style=${{
+                  padding: "8px 14px", fontSize: "12px", background: "var(--bg-input)",
+                  border: "1.5px solid var(--border)", color: "var(--text-primary)",
+                  cursor: amNewFieldName.trim() ? "pointer" : "not-allowed",
+                  opacity: amNewFieldName.trim() ? 1 : 0.4, borderRadius: "6px",
+                }} disabled=${!amNewFieldName.trim()} onClick=${() => { if (amNewFieldName.trim()) { setAmCustomFields(prev => [...prev, { name: amNewFieldName.trim(), type: amNewFieldType }]); setAmNewFieldName(""); } }}>+ Add</button>
+              </div>
+            </div>`}
+
+            ${amCanSubmit && html`<button className="btn btn-primary" disabled=${amLoading}
+              onClick=${async () => {
+                setAmLoading(true);
+                try {
+                  const result = await api("/routes/" + selectedRoute + "/add-method", {
+                    method: "POST",
+                    body: {
+                      routeType: amRouteType,
+                      methods: (amRouteType === "methods" || amRouteType === "crud") ? amMethods : undefined,
+                      modelName: amModelName || undefined,
+                      loginField: amIsAuthType ? amLoginField : undefined,
+                      passwordField: amIsAuthType && amPasswordField ? amPasswordField : undefined,
+                      registerFields: amRouteType === "register" ? amRegisterFields : undefined,
+                      selectedFields: amRouteType === "methods" && amSelectedFields.length > 0 ? amSelectedFields : undefined,
+                      customFields: amRouteType === "methods" && amCustomFields.length > 0 ? amCustomFields : undefined,
+                    },
+                  });
+                  toast(result.message, "success");
+                  setRouteContents(prev => ({ ...prev, [selectedRoute]: { content: result.content } }));
+                  setShowAddMethod(false);
+                  refresh();
+                } catch (err) { toast(err.message, "error"); }
+                setAmLoading(false);
+              }}
+            >${amLoading ? html`<span className="spinner" />` : "Add to Route"}</button>`}
+          </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" }}
+          >
+            <div
+              style=${{
+                padding: "12px 16px",
+                borderBottom: "1px solid var(--border)",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+              }}
+            >
+              <span
+                style=${{
+                  fontSize: "12px",
+                  fontWeight: 600,
+                  color: "var(--text-secondary)",
+                }}
+                >${editingRoute
+                  ? "Edit Source Code"
+                  : "Source Code"}</span
+              >
+              <span className="field-count"
+                >${selContent
+                  ? selContent.split("\\n").length + " lines"
+                  : ""}</span
+              >
+            </div>
+            ${loadingRoute === selectedRoute &&
+            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 &&
+            html`<div className="route-code-wrap">
+              <div className="code-block">${selContent}</div>
+            </div>`}
+          </div>
+        </div>`}
+      </div>
+    </div>
+  </div>`;
+}
+
+function CreateRoutePanel({ onCreated }) {
+  const { data, toast } = useApp();
+  const [name, setName] = useState("");
+  const [routeType, setRouteType] = useState(null);
+  const [methods, setMethods] = useState([]);
+  const pathPrefix = "/api/";
+  const [modelName, setModelName] = useState("");
+  const [loginField, setLoginField] = useState("");
+  const [passwordField, setPasswordField] = useState("");
+  const [registerFields, setRegisterFields] = useState([]);
+  const [selectedFields, setSelectedFields] = useState([]);
+  const [customFields, setCustomFields] = useState([]);
+  const [newFieldName, setNewFieldName] = useState("");
+  const [newFieldType, setNewFieldType] = useState("String");
+  const [loading, setLoading] = useState(false);
+  const nameRef = useRef(null);
+
+  useEffect(() => {
+    nameRef.current?.focus();
+  }, []);
+
+  const typeOptions = [
+    {
+      id: "plain",
+      label: "Plain",
+      desc: "Empty route",
+      color: "#94a3b8",
+    },
+    {
+      id: "methods",
+      label: "Methods",
+      desc: "GET, POST, PUT...",
+      color: "var(--accent-light)",
+    },
+    {
+      id: "crud",
+      label: "CRUD",
+      desc: "Model CRUD ops",
+      color: "#3b82f6",
+    },
+    { id: "login", label: "Login", desc: "JWT login", color: "#22d3ee" },
+    {
+      id: "register",
+      label: "Register",
+      desc: "Sign up",
+      color: "#34d399",
+    },
+  ];
+
+  function selectType(id) {
+    setRouteType((prev) => (prev === id ? null : id));
+    if (id !== "methods" && id !== "crud") setMethods([]);
+  }
+
+  function toggleMethod(m) {
+    setMethods((prev) =>
+      prev.includes(m) ? prev.filter((x) => x !== m) : [...prev, m],
+    );
+  }
+
+  const needsModel =
+    routeType && routeType !== "methods" && routeType !== "plain";
+  const isAuthType = routeType === "login" || routeType === "register";
+
+  // Get fields from selected model
+  const selectedModelObj = data.models?.find((m) => m.name === modelName);
+  const modelFields = selectedModelObj?.fields || [];
+
+  // Auto-select fields when model changes
+  useEffect(() => {
+    if (modelFields.length > 0 && isAuthType) {
+      if (!loginField) {
+        const emailField =
+          modelFields.find((f) => f.name === "email") || modelFields[0];
+        setLoginField(emailField?.name || "");
+      }
+      if (!passwordField) {
+        const pwField = modelFields.find((f) => f.name === "password");
+        setPasswordField(pwField?.name || "");
+      }
+      if (routeType === "register" && registerFields.length === 0) {
+        setRegisterFields(modelFields.map((f) => f.name));
+      }
+    }
+  }, [modelName, routeType]);
+
+  async function handleCreate() {
+    if (!name.trim() || !routeType) return;
+    if (routeType === "methods" && methods.length === 0) {
+      toast("Select at least one method", "error");
+      return;
+    }
+    if (routeType === "crud" && methods.length === 0) {
+      toast("Select at least one CRUD method", "error");
+      return;
+    }
+    if (needsModel && !modelName) {
+      toast("Select a model", "error");
+      return;
+    }
+    if (isAuthType && !loginField) {
+      toast("Select a login field", "error");
+      return;
+    }
+    setLoading(true);
+    try {
+      const result = await api("/add-api", {
+        method: "POST",
+        body: {
+          name: name.trim(),
+          routeType,
+          pathPrefix,
+          methods:
+            routeType === "methods" || routeType === "crud"
+              ? methods
+              : undefined,
+          modelName: modelName || undefined,
+          loginField: isAuthType ? loginField : undefined,
+          passwordField:
+            isAuthType && passwordField ? passwordField : undefined,
+          registerFields:
+            routeType === "register" ? registerFields : undefined,
+          selectedFields:
+            routeType === "methods" && selectedFields.length > 0
+              ? selectedFields
+              : undefined,
+          customFields:
+            routeType === "methods" && customFields.length > 0
+              ? customFields
+              : undefined,
+        },
+      });
+      toast(result.message, "success");
+      onCreated();
+    } catch (err) {
+      toast(err.message, "error");
+    }
+    setLoading(false);
+  }
+
+  const methodColors = {
+    get: "#22c55e",
+    post: "#3b82f6",
+    put: "#f59e0b",
+    patch: "#a855f7",
+    delete: "#ef4444",
+  };
+  const canCreate =
+    name.trim() &&
+    routeType &&
+    (routeType !== "methods" || methods.length > 0) &&
+    (routeType !== "crud" || methods.length > 0) &&
+    (!needsModel || modelName) &&
+    (!isAuthType || loginField);
+
+  return html`<div>
+    <div className="card mb-4">
+      <div
+        className="flex items-center justify-between"
+        style=${{ marginBottom: "16px" }}
+      >
+        <div style=${{ fontSize: "15px", fontWeight: 600 }}>
+          Create New Route
+        </div>
+        <button
+          className="btn btn-primary btn-sm"
+          onClick=${handleCreate}
+          disabled=${loading || !canCreate}
+        >
+          ${loading
+            ? html`<span className="spinner" />`
+            : html`<span className="sidebar-icon">${Icons.plus}</span>`}
+          ${loading ? "Creating..." : "Create Route"}
+        </button>
+      </div>
+
+      <div className="form-group">
+        <label className="form-label">Route Name</label>
+        <input
+          ref=${nameRef}
+          className="form-input"
+          value=${name}
+          onInput=${(e) => setName(e.target.value)}
+          onKeyDown=${(e) =>
+            e.key === "Enter" && canCreate && handleCreate()}
+          placeholder="e.g. users, login, products"
+          style=${{ fontSize: "14px", padding: "11px 14px" }}
+        />
+      </div>
+
+      <div className="form-group">
+        <label className="form-label">Type</label>
+        <div
+          style=${{
+            display: "grid",
+            gridTemplateColumns: "repeat(5, 1fr)",
+            gap: "6px",
+          }}
+        >
+          ${typeOptions.map((t) => {
+            const active = routeType === t.id;
+            return html`<button
+              key=${t.id}
+              style=${{
+                padding: "8px 4px",
+                borderRadius: "var(--radius)",
+                cursor: "pointer",
+                textAlign: "center",
+                border: active
+                  ? "1.5px solid " + t.color
+                  : "1.5px solid var(--border)",
+                background: active
+                  ? "rgba(255,255,255,0.04)"
+                  : "var(--bg-input)",
+                opacity: active ? 1 : 0.5,
+                transition: "all 0.15s",
+              }}
+              onClick=${() => selectType(t.id)}
+            >
+              <div
+                style=${{
+                  fontSize: "11px",
+                  fontWeight: 700,
+                  color: active ? t.color : "var(--text-secondary)",
+                }}
+              >
+                ${t.label}
+              </div>
+              <div
+                style=${{
+                  fontSize: "9px",
+                  color: "var(--text-muted)",
+                  marginTop: "1px",
+                }}
+              >
+                ${t.desc}
+              </div>
+            </button>`;
+          })}
+        </div>
+      </div>
+
+      ${routeType === "methods" &&
+      html`<div className="form-group">
+        <label className="form-label">HTTP Methods</label>
+        <div className="flex gap-2">
+          ${["get", "post", "put", "patch", "delete"].map(
+            (m) =>
+              html`<button
+                key=${m}
+                className=${`route-method ${m}`}
+                style=${{
+                  cursor: "pointer",
+                  border: methods.includes(m)
+                    ? "2px solid " + methodColors[m]
+                    : "2px solid transparent",
+                  padding: "6px 12px",
+                  fontSize: "11px",
+                  opacity: methods.includes(m) ? 1 : 0.35,
+                  borderRadius: "6px",
+                  transition: "all 0.15s",
+                }}
+                onClick=${() => toggleMethod(m)}
+              >
+                ${m.toUpperCase()}
+              </button>`,
+          )}
+        </div>
+      </div>`}
+      ${routeType === "methods" &&
+      html`<div className="form-group">
+        <label className="form-label"
+          >Fields from Model
+          <span style=${{ color: "var(--text-muted)", fontWeight: 400 }}
+            >(optional — select fields to destructure from
+            request)</span
+          ></label
+        >
+        ${data.models?.length > 0
+          ? html`<select
+                className="form-select"
+                style=${{ marginBottom: "8px" }}
+                value=${modelName}
+                onChange=${(e) => {
+                  setModelName(e.target.value);
+                  setSelectedFields([]);
+                }}
+              >
+                <option value="">Select a model...</option>
+                ${data.models.map(
+                  (m) =>
+                    html`<option key=${m.name} value=${m.name}>
+                      ${m.name}
+                    </option>`,
+                )}
+              </select>
+              ${modelName &&
+              modelFields.length > 0 &&
+              html`<div
+                className="flex gap-2"
+                style=${{ flexWrap: "wrap" }}
+              >
+                ${modelFields.map((f) => {
+                  const active = selectedFields.includes(f.name);
+                  return html`<button
+                    key=${f.name}
+                    style=${{
+                      padding: "5px 12px",
+                      borderRadius: "6px",
+                      fontSize: "12px",
+                      cursor: "pointer",
+                      border: active
+                        ? "1.5px solid var(--accent)"
+                        : "1.5px solid var(--border)",
+                      background: active
+                        ? "var(--accent-glow)"
+                        : "var(--bg-input)",
+                      color: active
+                        ? "var(--accent-light)"
+                        : "var(--text-secondary)",
+                      fontWeight: active ? 600 : 400,
+                      transition: "all 0.15s",
+                    }}
+                    onClick=${() =>
+                      setSelectedFields((prev) =>
+                        active
+                          ? prev.filter((x) => x !== f.name)
+                          : [...prev, f.name],
+                      )}
+                  >
+                    ${f.name}
+                    <span
+                      style=${{
+                        fontSize: "10px",
+                        color: "var(--text-muted)",
+                        marginLeft: "4px",
+                      }}
+                      >${f.type}</span
+                    >
+                  </button>`;
+                })}
+              </div>`}`
+          : html`<div
+              style=${{
+                fontSize: "11px",
+                color: "var(--text-muted)",
+                marginTop: "4px",
+              }}
+            >
+              No models found. You can still add custom fields below.
+            </div>`}
+      </div>`}
+      ${routeType === "methods" &&
+      html`<div className="form-group">
+        <label className="form-label"
+          >Custom Fields
+          <span style=${{ color: "var(--text-muted)", fontWeight: 400 }}
+            >(add fields received from client)</span
+          ></label
+        >
+        ${customFields.length > 0 &&
+        html`<div
+          style=${{
+            display: "flex",
+            flexWrap: "wrap",
+            gap: "6px",
+            marginBottom: "8px",
+          }}
+        >
+          ${customFields.map(
+            (f, i) =>
+              html`<span
+                key=${i}
+                style=${{
+                  padding: "4px 10px",
+                  borderRadius: "6px",
+                  fontSize: "12px",
+                  background: "var(--bg-input)",
+                  border: "1.5px solid var(--border)",
+                  color: "var(--text-primary)",
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "6px",
+                }}
+              >
+                ${f.name}
+                <span
+                  style=${{
+                    fontSize: "10px",
+                    color:
+                      f.type === "File"
+                        ? "var(--warning)"
+                        : "var(--text-muted)",
+                  }}
+                  >${f.type}</span
+                >
+                <span
+                  style=${{
+                    cursor: "pointer",
+                    color: "var(--text-muted)",
+                    fontSize: "14px",
+                    lineHeight: 1,
+                    marginLeft: "2px",
+                  }}
+                  onClick=${() =>
+                    setCustomFields((prev) =>
+                      prev.filter((_, idx) => idx !== i),
+                    )}
+                  >×</span
+                >
+              </span>`,
+          )}
+        </div>`}
+        <div className="flex gap-2" style=${{ alignItems: "center" }}>
+          <input
+            className="form-input"
+            value=${newFieldName}
+            onInput=${(e) => setNewFieldName(e.target.value)}
+            placeholder="Field name"
+            style=${{
+              fontSize: "13px",
+              padding: "8px 12px",
+              flex: 1,
+            }}
+            onKeyDown=${(e) => {
+              if (e.key === "Enter" && newFieldName.trim()) {
+                setCustomFields((prev) => [
+                  ...prev,
+                  { name: newFieldName.trim(), type: newFieldType },
+                ]);
+                setNewFieldName("");
+              }
+            }}
+          />
+          <select
+            className="form-select"
+            value=${newFieldType}
+            onChange=${(e) => setNewFieldType(e.target.value)}
+            style=${{ width: "auto", minWidth: "100px" }}
+          >
+            <option value="String">String</option>
+            <option value="Number">Number</option>
+            <option value="Boolean">Boolean</option>
+            <option value="Date">Date</option>
+            <option value="Array">Array</option>
+            <option value="Object">Object</option>
+            <option value="File">File</option>
+          </select>
+          <button
+            className="btn btn-sm"
+            style=${{
+              padding: "8px 14px",
+              fontSize: "12px",
+              background: "var(--bg-input)",
+              border: "1.5px solid var(--border)",
+              color: "var(--text-primary)",
+              cursor: newFieldName.trim() ? "pointer" : "not-allowed",
+              opacity: newFieldName.trim() ? 1 : 0.4,
+              borderRadius: "6px",
+            }}
+            disabled=${!newFieldName.trim()}
+            onClick=${() => {
+              if (newFieldName.trim()) {
+                setCustomFields((prev) => [
+                  ...prev,
+                  { name: newFieldName.trim(), type: newFieldType },
+                ]);
+                setNewFieldName("");
+              }
+            }}
+          >
+            + Add
+          </button>
+        </div>
+      </div>`}
+      ${routeType === "crud" &&
+      html`<div className="form-group">
+        <label className="form-label"
+          >CRUD Methods
+          <span style=${{ color: "var(--text-muted)", fontWeight: 400 }}
+            >(select which operations to include)</span
+          ></label
+        >
+        <div className="flex gap-2">
+          ${["get", "post", "put", "patch", "delete"].map((m) => {
+            const labels = {
+              get: "READ",
+              post: "CREATE",
+              put: "UPDATE",
+              patch: "PATCH",
+              delete: "DELETE",
+            };
+            return html`<button
+              key=${m}
+              className=${`route-method ${m}`}
+              style=${{
+                cursor: "pointer",
+                border: methods.includes(m)
+                  ? "2px solid " + methodColors[m]
+                  : "2px solid transparent",
+                padding: "6px 12px",
+                fontSize: "11px",
+                opacity: methods.includes(m) ? 1 : 0.35,
+                borderRadius: "6px",
+                transition: "all 0.15s",
+              }}
+              onClick=${() => toggleMethod(m)}
+            >
+              ${labels[m]}
+            </button>`;
+          })}
+        </div>
+      </div>`}
+      ${needsModel &&
+      html`<div className="form-group">
+        <label className="form-label">Model</label>
+        <select
+          className="form-select"
+          value=${modelName}
+          onChange=${(e) => {
+            setModelName(e.target.value);
+            setLoginField("");
+            setPasswordField("");
+            setRegisterFields([]);
+          }}
+        >
+          <option value="">Select a model...</option>
+          ${(data.models || []).map(
+            (m) =>
+              html`<option key=${m.name} value=${m.name}>
+                ${m.name}
+              </option>`,
+          )}
+        </select>
+        ${!data.models?.length &&
+        html`<div
+          style=${{
+            fontSize: "11px",
+            color: "var(--warning)",
+            marginTop: "4px",
+          }}
+        >
+          No models found. Create a schema first.
+        </div>`}
+      </div>`}
+      ${routeType === "login" &&
+      modelName &&
+      modelFields.length > 0 &&
+      html`<div className="form-group">
+        <label className="form-label">Find user by</label>
+        <div className="flex gap-2" style=${{ flexWrap: "wrap" }}>
+          ${modelFields.map(
+            (f) =>
+              html`<button
+                key=${f.name}
+                style=${{
+                  padding: "5px 12px",
+                  borderRadius: "6px",
+                  fontSize: "12px",
+                  cursor: "pointer",
+                  border:
+                    loginField === f.name
+                      ? "1.5px solid var(--accent)"
+                      : "1.5px solid var(--border)",
+                  background:
+                    loginField === f.name
+                      ? "var(--accent-glow)"
+                      : "var(--bg-input)",
+                  color:
+                    loginField === f.name
+                      ? "var(--accent-light)"
+                      : "var(--text-secondary)",
+                  fontWeight: loginField === f.name ? 600 : 400,
+                  transition: "all 0.15s",
+                }}
+                onClick=${() => setLoginField(f.name)}
+              >
+                ${f.name}
+              </button>`,
+          )}
+        </div>
+      </div>`}
+      ${routeType === "login" &&
+      modelName &&
+      modelFields.length > 0 &&
+      html`<div className="form-group">
+        <label className="form-label"
+          >Password field
+          <span style=${{ color: "var(--text-muted)", fontWeight: 400 }}
+            >(optional — enables bcrypt)</span
+          ></label
+        >
+        <div className="flex gap-2" style=${{ flexWrap: "wrap" }}>
+          <button
+            style=${{
+              padding: "5px 12px",
+              borderRadius: "6px",
+              fontSize: "12px",
+              cursor: "pointer",
+              border: !passwordField
+                ? "1.5px solid var(--accent)"
+                : "1.5px solid var(--border)",
+              background: !passwordField
+                ? "var(--accent-glow)"
+                : "var(--bg-input)",
+              color: !passwordField
+                ? "var(--accent-light)"
+                : "var(--text-secondary)",
+              fontWeight: !passwordField ? 600 : 400,
+              transition: "all 0.15s",
+            }}
+            onClick=${() => setPasswordField("")}
+          >
+            None
+          </button>
+          ${modelFields.map(
+            (f) =>
+              html`<button
+                key=${f.name}
+                style=${{
+                  padding: "5px 12px",
+                  borderRadius: "6px",
+                  fontSize: "12px",
+                  cursor: "pointer",
+                  border:
+                    passwordField === f.name
+                      ? "1.5px solid var(--warning)"
+                      : "1.5px solid var(--border)",
+                  background:
+                    passwordField === f.name
+                      ? "var(--warning-glow)"
+                      : "var(--bg-input)",
+                  color:
+                    passwordField === f.name
+                      ? "var(--warning)"
+                      : "var(--text-secondary)",
+                  fontWeight: passwordField === f.name ? 600 : 400,
+                  transition: "all 0.15s",
+                }}
+                onClick=${() => setPasswordField(f.name)}
+              >
+                ${f.name}
+              </button>`,
+          )}
+        </div>
+      </div>`}
+      ${routeType === "register" &&
+      modelName &&
+      modelFields.length > 0 &&
+      html`<div className="form-group">
+        <label className="form-label">Registration fields</label>
+        <div className="flex gap-2" style=${{ flexWrap: "wrap" }}>
+          ${modelFields.map((f) => {
+            const active = registerFields.includes(f.name);
+            return html`<button
+              key=${f.name}
+              style=${{
+                padding: "5px 12px",
+                borderRadius: "6px",
+                fontSize: "12px",
+                cursor: "pointer",
+                border: active
+                  ? "1.5px solid var(--success)"
+                  : "1.5px solid var(--border)",
+                background: active
+                  ? "var(--success-glow)"
+                  : "var(--bg-input)",
+                color: active
+                  ? "var(--success)"
+                  : "var(--text-secondary)",
+                fontWeight: active ? 600 : 400,
+                transition: "all 0.15s",
+              }}
+              onClick=${() =>
+                setRegisterFields((prev) =>
+                  active
+                    ? prev.filter((x) => x !== f.name)
+                    : [...prev, f.name],
+                )}
+            >
+              ${f.name}
+            </button>`;
+          })}
+        </div>
+      </div>`}
+      ${routeType === "register" &&
+      modelName &&
+      modelFields.length > 0 &&
+      html`<div className="form-group">
+        <label className="form-label">Check duplicate by</label>
+        <div className="flex gap-2" style=${{ flexWrap: "wrap" }}>
+          ${modelFields.map(
+            (f) =>
+              html`<button
+                key=${f.name}
+                style=${{
+                  padding: "5px 12px",
+                  borderRadius: "6px",
+                  fontSize: "12px",
+                  cursor: "pointer",
+                  border:
+                    loginField === f.name
+                      ? "1.5px solid var(--accent)"
+                      : "1.5px solid var(--border)",
+                  background:
+                    loginField === f.name
+                      ? "var(--accent-glow)"
+                      : "var(--bg-input)",
+                  color:
+                    loginField === f.name
+                      ? "var(--accent-light)"
+                      : "var(--text-secondary)",
+                  fontWeight: loginField === f.name ? 600 : 400,
+                  transition: "all 0.15s",
+                }}
+                onClick=${() => setLoginField(f.name)}
+              >
+                ${f.name}
+              </button>`,
+          )}
+        </div>
+      </div>`}
+      ${routeType === "register" &&
+      modelName &&
+      modelFields.length > 0 &&
+      html`<div className="form-group">
+        <label className="form-label"
+          >Password field
+          <span style=${{ color: "var(--text-muted)", fontWeight: 400 }}
+            >(optional — saves as hashed)</span
+          ></label
+        >
+        <div className="flex gap-2" style=${{ flexWrap: "wrap" }}>
+          <button
+            style=${{
+              padding: "5px 12px",
+              borderRadius: "6px",
+              fontSize: "12px",
+              cursor: "pointer",
+              border: !passwordField
+                ? "1.5px solid var(--accent)"
+                : "1.5px solid var(--border)",
+              background: !passwordField
+                ? "var(--accent-glow)"
+                : "var(--bg-input)",
+              color: !passwordField
+                ? "var(--accent-light)"
+                : "var(--text-secondary)",
+              fontWeight: !passwordField ? 600 : 400,
+              transition: "all 0.15s",
+            }}
+            onClick=${() => setPasswordField("")}
+          >
+            None
+          </button>
+          ${registerFields.map(
+            (f) =>
+              html`<button
+                key=${f}
+                style=${{
+                  padding: "5px 12px",
+                  borderRadius: "6px",
+                  fontSize: "12px",
+                  cursor: "pointer",
+                  border:
+                    passwordField === f
+                      ? "1.5px solid var(--warning)"
+                      : "1.5px solid var(--border)",
+                  background:
+                    passwordField === f
+                      ? "var(--warning-glow)"
+                      : "var(--bg-input)",
+                  color:
+                    passwordField === f
+                      ? "var(--warning)"
+                      : "var(--text-secondary)",
+                  fontWeight: passwordField === f ? 600 : 400,
+                  transition: "all 0.15s",
+                }}
+                onClick=${() => setPasswordField(f)}
+              >
+                ${f}
+              </button>`,
+          )}
+        </div>
+      </div>`}
+
+    </div>
+  </div>`;
+}
+