From e6b990a7f9f2cc24324b16be11b52ed78cbaed2f Mon Sep 17 00:00:00 2001
From: Grishma Dhakal <dhakalgrishma5@gmail.com>
Date: Sun, 26 Jul 2026 12:15:40 +0545
Subject: [PATCH 1/8] feat(sidebar): implement tree skeleton loaders and
 focus-management on project mutations

---
 .../components/sidebar/sidebar-skeleton.tsx   | 58 +++++++++++
 .../ui/components/sidebar/sidebar-tree.tsx    | 97 ++++++++++---------
 .../components/sidebar/workspace-sidebar.tsx  | 40 +++++++-
 3 files changed, 147 insertions(+), 48 deletions(-)
 create mode 100644 src/modules/workspace/ui/components/sidebar/sidebar-skeleton.tsx

diff --git a/src/modules/workspace/ui/components/sidebar/sidebar-skeleton.tsx b/src/modules/workspace/ui/components/sidebar/sidebar-skeleton.tsx
new file mode 100644
index 0000000..480d663
--- /dev/null
+++ b/src/modules/workspace/ui/components/sidebar/sidebar-skeleton.tsx
@@ -0,0 +1,58 @@
+import { Skeleton } from "~/components/ui/skeleton";
+
+// ─── Sidebar-level skeleton (shown while the projects list is loading) ─────────
+
+export function SidebarSkeleton() {
+    return (
+        <div className="space-y-1 p-2 py-3">
+            {[1, 2, 3].map((i) => (
+                <ProjectRowSkeleton key={i} />
+            ))}
+        </div>
+    );
+}
+
+/** A single project-row placeholder that mimics the TreeNodeTrigger shape. */
+function ProjectRowSkeleton() {
+    return (
+        <div className="mx-1 flex items-center gap-2 rounded-md px-3 py-2">
+            {/* Expander icon placeholder */}
+            <Skeleton className="h-3 w-3 shrink-0 rounded-sm" />
+            {/* Folder icon placeholder */}
+            <Skeleton className="h-4 w-4 shrink-0 rounded-sm" />
+            {/* Label */}
+            <Skeleton className="h-3.5 flex-1 rounded" />
+        </div>
+    );
+}
+
+// ─── Project-node skeleton (shown inside an expanded project while its  ─────────
+//     folders / endpoints are being fetched)                              ─────────
+
+export function ProjectTreeNodeSkeleton({ level }: { level: number }) {
+    const indent = level * 16 + 8;
+
+    return (
+        <div className="space-y-1">
+            {[1, 2, 3].map((i) => (
+                <TreeRowSkeleton key={i} indent={indent} />
+            ))}
+        </div>
+    );
+}
+
+function TreeRowSkeleton({ indent }: { indent: number }) {
+    return (
+        <div
+            className="mx-1 flex items-center gap-2 rounded-md px-3 py-2"
+            style={{ paddingLeft: indent }}
+        >
+            {/* Expander placeholder */}
+            <Skeleton className="h-3 w-3 shrink-0 rounded-sm" />
+            {/* File/folder icon placeholder */}
+            <Skeleton className="h-4 w-4 shrink-0 rounded-sm" />
+            {/* Label – vary widths for a natural look */}
+            <Skeleton className="h-3.5 rounded" style={{ width: `${40 + (indent % 30)}%` }} />
+        </div>
+    );
+}
diff --git a/src/modules/workspace/ui/components/sidebar/sidebar-tree.tsx b/src/modules/workspace/ui/components/sidebar/sidebar-tree.tsx
index 49c9bc8..980c0ee 100644
--- a/src/modules/workspace/ui/components/sidebar/sidebar-tree.tsx
+++ b/src/modules/workspace/ui/components/sidebar/sidebar-tree.tsx
@@ -23,6 +23,7 @@ import {
 } from "./types";
 import { useEndpoints } from "~/hooks/use-endpoints";
 import { useFolders } from "~/hooks/use-folders";
+import { ProjectTreeNodeSkeleton } from "./sidebar-skeleton";
 
 function commitRename<T extends string>(
     currentName: string,
@@ -280,8 +281,10 @@ export function ProjectTreeNode({
     onDeleteFolder: (id: string) => void;
     onDeleteEndpoint: (id: string) => void;
 }) {
-    const { data: rawFolders = [] } = useFolders(project.id);
-    const { data: rawEndpoints = [] } = useEndpoints(project.id);
+    const { data: rawFolders = [], isLoading: isLoadingFolders } = useFolders(project.id);
+    const { data: rawEndpoints = [], isLoading: isLoadingEndpoints } = useEndpoints(project.id);
+
+    const isLoading = isLoadingFolders || isLoadingEndpoints;
 
     const folderTree = buildFolderTree(rawFolders as FolderRow[]);
 
@@ -347,48 +350,54 @@ export function ProjectTreeNode({
             </TreeNodeTrigger>
 
             <TreeNodeContent hasChildren>
-                {rootEndpoints.map((endpoint) => (
-                    <EndpointTreeNode
-                        key={endpoint.id}
-                        endpoint={endpoint}
-                        level={level + 1}
-                        isSelected={selectedEndpointId === endpoint.id}
-                        isRenaming={renamingId === endpoint.id}
-                        onSelect={() => onSelectEndpoint(endpoint.id, project.id)}
-                        onRenameConfirm={(name) => {
-                            commitRename(
-                                endpoint.name,
-                                name,
-                                (nextName) => {
-                                    onRenameEndpoint(endpoint.id, nextName);
-                                },
-                                () => setRenamingId(null),
-                            );
-                        }}
-                        onRenameCancel={() => setRenamingId(null)}
-                        onRenameStart={() => setRenamingId(endpoint.id)}
-                        onDelete={() => onDeleteEndpoint(endpoint.id)}
-                    />
-                ))}
-                {tree.map((collection, index) => (
-                    <FolderTreeNode
-                        key={collection.id}
-                        collection={collection}
-                        level={level + 1}
-                        isLast={index === tree.length - 1}
-                        projectId={project.id}
-                        selectedEndpointId={selectedEndpointId}
-                        onSelectEndpoint={onSelectEndpoint}
-                        renamingId={renamingId}
-                        setRenamingId={setRenamingId}
-                        onRenameFolder={onRenameFolder}
-                        onRenameEndpoint={onRenameEndpoint}
-                        onOpenModal={onOpenModal}
-                        onDeleteFolder={onDeleteFolder}
-                        onDeleteEndpoint={onDeleteEndpoint}
-                        endpoints={rawEndpoints as Endpoint[]}
-                    />
-                ))}
+                {isLoading ? (
+                    <ProjectTreeNodeSkeleton level={level + 1} />
+                ) : (
+                    <>
+                        {rootEndpoints.map((endpoint) => (
+                            <EndpointTreeNode
+                                key={endpoint.id}
+                                endpoint={endpoint}
+                                level={level + 1}
+                                isSelected={selectedEndpointId === endpoint.id}
+                                isRenaming={renamingId === endpoint.id}
+                                onSelect={() => onSelectEndpoint(endpoint.id, project.id)}
+                                onRenameConfirm={(name) => {
+                                    commitRename(
+                                        endpoint.name,
+                                        name,
+                                        (nextName) => {
+                                            onRenameEndpoint(endpoint.id, nextName);
+                                        },
+                                        () => setRenamingId(null),
+                                    );
+                                }}
+                                onRenameCancel={() => setRenamingId(null)}
+                                onRenameStart={() => setRenamingId(endpoint.id)}
+                                onDelete={() => onDeleteEndpoint(endpoint.id)}
+                            />
+                        ))}
+                        {tree.map((collection, index) => (
+                            <FolderTreeNode
+                                key={collection.id}
+                                collection={collection}
+                                level={level + 1}
+                                isLast={index === tree.length - 1}
+                                projectId={project.id}
+                                selectedEndpointId={selectedEndpointId}
+                                onSelectEndpoint={onSelectEndpoint}
+                                renamingId={renamingId}
+                                setRenamingId={setRenamingId}
+                                onRenameFolder={onRenameFolder}
+                                onRenameEndpoint={onRenameEndpoint}
+                                onOpenModal={onOpenModal}
+                                onDeleteFolder={onDeleteFolder}
+                                onDeleteEndpoint={onDeleteEndpoint}
+                                endpoints={rawEndpoints as Endpoint[]}
+                            />
+                        ))}
+                    </>
+                )}
             </TreeNodeContent>
         </TreeNode>
     );
diff --git a/src/modules/workspace/ui/components/sidebar/workspace-sidebar.tsx b/src/modules/workspace/ui/components/sidebar/workspace-sidebar.tsx
index 1d4682c..c47b695 100644
--- a/src/modules/workspace/ui/components/sidebar/workspace-sidebar.tsx
+++ b/src/modules/workspace/ui/components/sidebar/workspace-sidebar.tsx
@@ -13,6 +13,7 @@ import {
 } from "./dialogs";
 import { ProjectSettingsDialog } from "./project-settings-dialog";
 import { ProjectTreeNode } from "./sidebar-tree";
+import { SidebarSkeleton } from "./sidebar-skeleton";
 import {
     useCreateProject,
     useDeleteProject,
@@ -43,7 +44,7 @@ export const Sidebar = forwardRef<
     { selectedEndpointId, onSelectEndpoint, selectedProjectId, onSelectProject },
     ref,
 ) {
-    const { data: projects = [] } = useProjects();
+    const { data: projects = [], isLoading: isLoadingProjects } = useProjects();
     const [renamingId, setRenamingId] = useState<string | null>(null);
     const [modal, setModal] = useState<ModalTarget | null>(null);
     const [confirmState, setConfirmState] = useState<{
@@ -97,7 +98,9 @@ export const Sidebar = forwardRef<
         <>
             <aside className="flex h-full w-full flex-col bg-background">
                 <div className="flex-1 overflow-y-auto">
-                    {projects.length === 0 ? (
+                    {isLoadingProjects ? (
+                        <SidebarSkeleton />
+                    ) : projects.length === 0 ? (
                         <div className="mt-10 flex flex-col items-center gap-2 px-4 text-center text-xs text-muted-foreground">
                             <p>No projects yet.</p>
                             <div className="flex items-center gap-2">
@@ -149,7 +152,27 @@ export const Sidebar = forwardRef<
                                             confirmDangerousAction(
                                                 "Delete project?",
                                                 "This will permanently remove the project and all its contents.",
-                                                () => deleteProject.mutate({ id }),
+                                                () => {
+                                                    deleteProject.mutate(
+                                                        { id },
+                                                        {
+                                                            onSuccess: () => {
+                                                                const remainingProjects =
+                                                                    projects.filter(
+                                                                        (p) => p.id !== id,
+                                                                    );
+                                                                if (
+                                                                    remainingProjects.length > 0 &&
+                                                                    remainingProjects[0]
+                                                                ) {
+                                                                    onSelectProject(
+                                                                        remainingProjects[0].id,
+                                                                    );
+                                                                }
+                                                            },
+                                                        },
+                                                    );
+                                                },
                                             )
                                         }
                                         onDeleteFolder={(id) =>
@@ -198,7 +221,16 @@ export const Sidebar = forwardRef<
                     if (!open) setModal(null);
                 }}
                 onCreate={(title, basePath) => {
-                    createProject.mutate({ title, basePath });
+                    createProject.mutate(
+                        { title, basePath },
+                        {
+                            onSuccess: (res) => {
+                                if (res && "id" in res) {
+                                    onSelectProject(res.id as string);
+                                }
+                            },
+                        },
+                    );
                     setModal(null);
                 }}
             />

From 5642af7d041d8869d0ded9f151cb9fa870d9c6b0 Mon Sep 17 00:00:00 2001
From: Grishma Dhakal <dhakalgrishma5@gmail.com>
Date: Sun, 26 Jul 2026 12:23:16 +0545
Subject: [PATCH 2/8] feat(workspace): implement schema preview skeleton loader
 & empty state

---
 .../ui/components/dashboard/schemaPreview.tsx | 101 +++++++++++++++++-
 .../workspace/ui/layouts/workspace-layout.tsx |  95 ++++++++++++----
 2 files changed, 175 insertions(+), 21 deletions(-)

diff --git a/src/modules/workspace/ui/components/dashboard/schemaPreview.tsx b/src/modules/workspace/ui/components/dashboard/schemaPreview.tsx
index 1024d1d..6275f1a 100644
--- a/src/modules/workspace/ui/components/dashboard/schemaPreview.tsx
+++ b/src/modules/workspace/ui/components/dashboard/schemaPreview.tsx
@@ -28,6 +28,7 @@ interface SchemaPreviewProps {
     fetchUrl: string;
     /** JWT bearer token to use when the endpoint requiresAuth */
     bearerToken?: string | null;
+    isLoadingSchema?: boolean;
 }
 
 function generateFetchSnippet(
@@ -85,7 +86,101 @@ function generateFetchSnippet(
     }
 }
 
-export function SchemaPreview({ endpoint, fetchUrl, bearerToken }: SchemaPreviewProps) {
+function MockCodeBlock() {
+    return (
+        <div className="rounded-lg border border-zinc-200 dark:border-zinc-800 bg-zinc-950 p-4 font-mono text-sm space-y-2">
+            <div className="flex items-center gap-2">
+                <div className="w-4 h-4 rounded bg-zinc-800 animate-pulse" />
+                <div className="w-24 h-4 rounded bg-zinc-800 animate-pulse" />
+            </div>
+            <div className="pl-6 space-y-2">
+                <div className="w-1/2 h-4 rounded bg-zinc-800 animate-pulse" />
+                <div className="w-3/4 h-4 rounded bg-zinc-800 animate-pulse" />
+                <div className="w-2/3 h-4 rounded bg-zinc-800 animate-pulse" />
+                <div className="w-1/3 h-4 rounded bg-zinc-800 animate-pulse" />
+            </div>
+            <div className="w-8 h-4 rounded bg-zinc-800 animate-pulse" />
+        </div>
+    );
+}
+
+export function SchemaPreviewSkeleton() {
+    return (
+        <div className="w-full mx-auto px-6 pb-6 h-full">
+            <Card className="border shadow-lg bg-muted/50">
+                <CardHeader className="flex flex-row items-center justify-between">
+                    <div className="flex items-center gap-2">
+                        <div className="w-5 h-5 rounded bg-zinc-300 dark:bg-zinc-700 animate-pulse" />
+                        <div className="w-36 h-6 rounded bg-zinc-300 dark:bg-zinc-700 animate-pulse" />
+                    </div>
+                    <div className="w-24 h-8 rounded bg-zinc-300 dark:bg-zinc-700 animate-pulse" />
+                </CardHeader>
+
+                <CardContent className="space-y-6">
+                    {/* Field summary table skeleton */}
+                    <div className="rounded-lg border border-zinc-200 dark:border-zinc-800 overflow-hidden">
+                        <div className="grid grid-cols-2 bg-zinc-200 dark:bg-zinc-900/50 px-4 py-2">
+                            <div className="w-12 h-3 rounded bg-zinc-300 dark:bg-zinc-700 animate-pulse" />
+                            <div className="w-12 h-3 rounded bg-zinc-300 dark:bg-zinc-700 animate-pulse" />
+                        </div>
+                        {[1, 2, 3].map((i) => (
+                            <div
+                                key={i}
+                                className="grid grid-cols-2 px-4 py-3 border-t border-zinc-150 dark:border-zinc-800/50"
+                            >
+                                <div className="w-24 h-4 rounded bg-zinc-200 dark:bg-zinc-800 animate-pulse" />
+                                <div className="w-16 h-4 rounded bg-zinc-200 dark:bg-zinc-800 animate-pulse" />
+                            </div>
+                        ))}
+                    </div>
+
+                    {/* Config summary skeleton */}
+                    <div className="flex gap-3">
+                        <div className="w-20 h-6 rounded bg-zinc-200 dark:bg-zinc-800 animate-pulse" />
+                        <div className="w-28 h-6 rounded bg-zinc-200 dark:bg-zinc-800 animate-pulse" />
+                        <div className="w-16 h-6 rounded bg-zinc-200 dark:bg-zinc-800 animate-pulse" />
+                    </div>
+
+                    {/* Live sample response skeleton */}
+                    <div className="space-y-3">
+                        <div className="flex items-center justify-between">
+                            <div className="w-28 h-4 rounded bg-zinc-200 dark:bg-zinc-800 animate-pulse" />
+                            <div className="w-28 h-8 rounded bg-zinc-200 dark:bg-zinc-800 animate-pulse" />
+                        </div>
+                        <MockCodeBlock />
+                    </div>
+
+                    {/* Component Generator Block skeleton */}
+                    <div className="pt-4 border-t border-zinc-200 dark:border-zinc-800 space-y-3">
+                        <div className="flex items-center justify-between">
+                            <div className="w-36 h-4 rounded bg-zinc-200 dark:bg-zinc-800 animate-pulse" />
+                            <div className="w-24 h-8 rounded bg-zinc-200 dark:bg-zinc-800 animate-pulse" />
+                        </div>
+                        <div className="w-3/4 h-3 rounded bg-zinc-200 dark:bg-zinc-800 animate-pulse" />
+                        <MockCodeBlock />
+                    </div>
+
+                    {/* API Fetch Code Snippets Block skeleton */}
+                    <div className="pt-4 border-t border-zinc-200 dark:border-zinc-800 space-y-3">
+                        <div className="flex items-center justify-between">
+                            <div className="w-32 h-4 rounded bg-zinc-200 dark:bg-zinc-800 animate-pulse" />
+                            <div className="w-48 h-8 rounded bg-zinc-200 dark:bg-zinc-800 animate-pulse" />
+                        </div>
+                        <div className="w-2/3 h-3 rounded bg-zinc-200 dark:bg-zinc-800 animate-pulse" />
+                        <MockCodeBlock />
+                    </div>
+                </CardContent>
+            </Card>
+        </div>
+    );
+}
+
+export function SchemaPreview({
+    endpoint,
+    fetchUrl,
+    bearerToken,
+    isLoadingSchema,
+}: SchemaPreviewProps) {
     const [liveData, setLiveData] = useState<unknown>(null);
     const [error, setError] = useState<string | null>(null);
     const [isLoading, setIsLoading] = useState(false);
@@ -190,6 +285,10 @@ export function SchemaPreview({ endpoint, fetchUrl, bearerToken }: SchemaPreview
         };
     }, [loadSample]);
 
+    if (isLoadingSchema) {
+        return <SchemaPreviewSkeleton />;
+    }
+
     if (!endpoint || fields.length === 0) return null;
 
     return (
diff --git a/src/modules/workspace/ui/layouts/workspace-layout.tsx b/src/modules/workspace/ui/layouts/workspace-layout.tsx
index e570a13..25bb15a 100644
--- a/src/modules/workspace/ui/layouts/workspace-layout.tsx
+++ b/src/modules/workspace/ui/layouts/workspace-layout.tsx
@@ -1,14 +1,17 @@
 "use client";
 import { useCallback, useEffect, useRef, useState } from "react";
-import { PanelLeftIcon, Plus, Upload } from "lucide-react";
+import { PanelLeftIcon, Plus, Upload, Code2 } from "lucide-react";
 import { cn } from "~/lib/utils";
 import { Sidebar, type SidebarHandle } from "../components/sidebar/workspace-sidebar";
 import { EndpointBar } from "../components/dashboard/endpointBar";
 import { SchemaPreview } from "../components/dashboard/schemaPreview";
 import { buildMockUrl, getMockOrigin } from "~/lib/mock-path";
-import { useEndpointById, useEndpoints } from "~/hooks/use-endpoints";
+import { useEndpointById, useEndpoints, useCreateEndpoint } from "~/hooks/use-endpoints";
 import { useProjectById } from "~/hooks/use-projects";
 import { ModeToggle } from "~/components/mode-toggle";
+import { CreateEndpointDialog } from "../components/sidebar/dialogs";
+import { Button } from "~/components/ui/button";
+import type { HttpMethod } from "../components/sidebar/types";
 
 export function ApiClientLayout({
     isCollapsed,
@@ -22,6 +25,8 @@ export function ApiClientLayout({
     const [selectedProjectId, setSelectedProjectId] = useState<string | null>(null);
     const [mockOrigin, setMockOrigin] = useState(getMockOrigin);
     const [bearerToken, setBearerToken] = useState<string | null>(null);
+    const [createEndpointOpen, setCreateEndpointOpen] = useState(false);
+    const createEndpoint = useCreateEndpoint();
 
     useEffect(() => {
         setMockOrigin(getMockOrigin());
@@ -33,8 +38,9 @@ export function ApiClientLayout({
     };
 
     const { data: project } = useProjectById(selectedProjectId);
-    const { data: endpoint } = useEndpointById(selectedEndpointId);
-    const { data: allEndpoints } = useEndpoints(selectedProjectId);
+    const { data: endpoint, isLoading: isLoadingEndpoint } = useEndpointById(selectedEndpointId);
+    const { data: allEndpoints, isLoading: isLoadingAllEndpoints } =
+        useEndpoints(selectedProjectId);
 
     const fetchUrl =
         endpoint && selectedProjectId
@@ -75,6 +81,27 @@ export function ApiClientLayout({
         void fetchBearerToken();
     }, [fetchBearerToken]);
 
+    const handleCreateEndpoint = (name: string, method: HttpMethod, path: string) => {
+        if (!selectedProjectId) return;
+        const normalizedPath = path === "/" ? `/${name.toLowerCase().replaceAll(" ", "-")}` : path;
+        createEndpoint.mutate(
+            {
+                name,
+                method,
+                path: normalizedPath.startsWith("/") ? normalizedPath : `/${normalizedPath}`,
+                projectId: selectedProjectId,
+            },
+            {
+                onSuccess: (res) => {
+                    setCreateEndpointOpen(false);
+                    if (res && "id" in res) {
+                        setSelectedEndpointId(res.id);
+                    }
+                },
+            },
+        );
+    };
+
     return (
         <div className="relative h-full w-full overflow-hidden">
             {/* Absolute sidebar */}
@@ -89,7 +116,7 @@ export function ApiClientLayout({
                     <button
                         onClick={onToggle}
                         className="p-1.5 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
-                        aria-label="Close sidebar"
+                        aria-label="Open sidebar"
                     >
                         <PanelLeftIcon className="h-4 w-4" />
                     </button>
@@ -147,24 +174,52 @@ export function ApiClientLayout({
                 )}
             >
                 <div className="h-10 shrink-0" />
-                {selectedProjectId && (
-                    <EndpointBar
-                        projectId={selectedProjectId}
-                        endpointId={selectedEndpointId}
-                        mockOrigin={mockOrigin}
-                        endpoint={endpoint}
-                        project={project}
-                    />
+                {selectedProjectId && !isLoadingAllEndpoints && allEndpoints?.length === 0 && (
+                    <div className="flex flex-col items-center justify-center flex-1 p-6 text-center">
+                        <div className="max-w-md space-y-4">
+                            <div className="flex justify-center">
+                                <div className="p-4 rounded-full bg-primary/10 text-primary">
+                                    <Code2 className="w-10 h-10" />
+                                </div>
+                            </div>
+                            <h3 className="text-xl font-bold">No endpoints created yet</h3>
+                            <p className="text-sm text-muted-foreground">
+                                Create an endpoint to get started. You can specify a path, HTTP
+                                method, and design your mock response schema.
+                            </p>
+                            <Button onClick={() => setCreateEndpointOpen(true)} className="gap-2">
+                                <Plus className="w-4 h-4" /> Create Endpoint
+                            </Button>
+                        </div>
+                    </div>
                 )}
-                {endpoint && fetchUrl && (
-                    <SchemaPreview
-                        key={selectedEndpointId}
-                        endpoint={endpoint}
-                        fetchUrl={fetchUrl}
-                        bearerToken={bearerToken}
-                    />
+                {selectedProjectId && allEndpoints && allEndpoints.length > 0 && (
+                    <>
+                        <EndpointBar
+                            projectId={selectedProjectId}
+                            endpointId={selectedEndpointId}
+                            mockOrigin={mockOrigin}
+                            endpoint={endpoint}
+                            project={project}
+                        />
+                        {selectedEndpointId && (
+                            <SchemaPreview
+                                key={selectedEndpointId}
+                                endpoint={endpoint}
+                                fetchUrl={fetchUrl}
+                                bearerToken={bearerToken}
+                                isLoadingSchema={isLoadingEndpoint}
+                            />
+                        )}
+                    </>
                 )}
             </div>
+
+            <CreateEndpointDialog
+                open={createEndpointOpen}
+                onOpenChange={setCreateEndpointOpen}
+                onCreate={handleCreateEndpoint}
+            />
         </div>
     );
 }

From c9d22c1d4f893471ac2d56f420fea9e0ceb681c4 Mon Sep 17 00:00:00 2001
From: Grishma Dhakal <dhakalgrishma5@gmail.com>
Date: Sun, 26 Jul 2026 12:38:08 +0545
Subject: [PATCH 3/8] fix: sidebar resizable and methods in component-templates

---
 src/lib/component-templates/codegen-utils.ts  |  24 ++-
 src/lib/component-templates/types.ts          |   1 +
 .../ui/components/dashboard/schemaPreview.tsx |   4 +-
 .../ui/components/sidebar/method-badge.tsx    |   5 +-
 .../ui/components/sidebar/sidebar-tree.tsx    |   3 +-
 .../workspace/ui/layouts/workspace-layout.tsx |  49 ++++-
 tests/component-templates.test.ts             | 196 ++++++++++++++++++
 7 files changed, 266 insertions(+), 16 deletions(-)

diff --git a/src/lib/component-templates/codegen-utils.ts b/src/lib/component-templates/codegen-utils.ts
index 6f3ca3a..d5e33e0 100644
--- a/src/lib/component-templates/codegen-utils.ts
+++ b/src/lib/component-templates/codegen-utils.ts
@@ -76,9 +76,15 @@ export function buildFetchHook(
     options?: TemplateOptions,
 ): string {
     const tokenVal = options?.bearerToken || "YOUR_TOKEN_HERE";
-    const fetchArgs = options?.requiresAuth
-        ? `"${endpointUrl}", {\n    headers: {\n      "Authorization": "Bearer ${tokenVal}"\n    }\n  }`
-        : `"${endpointUrl}"`;
+    const method = options?.method && options.method !== "GET" ? options.method : undefined;
+    const fetchOptions: string[] = [];
+    if (method) fetchOptions.push(`method: "${method}"`);
+    if (options?.requiresAuth)
+        fetchOptions.push(`headers: {\n      "Authorization": "Bearer ${tokenVal}"\n    }`);
+    const fetchArgs =
+        fetchOptions.length > 0
+            ? `"${endpointUrl}", {\n    ${fetchOptions.join(",\n    ")}\n  }`
+            : `"${endpointUrl}"`;
 
     return `function use${hookName}Data() {
   const [data, setData] = useState<${itemTypeName}[] | ${itemTypeName} | undefined>(undefined);
@@ -117,9 +123,15 @@ export function buildHtmlFetchScript(
     options?: TemplateOptions,
 ): string {
     const tokenVal = options?.bearerToken || "YOUR_TOKEN_HERE";
-    const fetchArgs = options?.requiresAuth
-        ? `"${endpointUrl}", {\n        headers: {\n          "Authorization": "Bearer ${tokenVal}"\n        }\n      }`
-        : `"${endpointUrl}"`;
+    const method = options?.method && options.method !== "GET" ? options.method : undefined;
+    const fetchOptions: string[] = [];
+    if (method) fetchOptions.push(`method: "${method}"`);
+    if (options?.requiresAuth)
+        fetchOptions.push(`headers: {\n          "Authorization": "Bearer ${tokenVal}"\n        }`);
+    const fetchArgs =
+        fetchOptions.length > 0
+            ? `"${endpointUrl}", {\n        ${fetchOptions.join(",\n        ")}\n      }`
+            : `"${endpointUrl}"`;
 
     return `  async function loadData() {
     const root = document.getElementById('root');
diff --git a/src/lib/component-templates/types.ts b/src/lib/component-templates/types.ts
index 49e6498..e213159 100644
--- a/src/lib/component-templates/types.ts
+++ b/src/lib/component-templates/types.ts
@@ -3,6 +3,7 @@ import type { SchemaField } from "~/lib/faker-options";
 export interface TemplateOptions {
     requiresAuth?: boolean;
     bearerToken?: string | null;
+    method?: string;
 }
 
 export interface ComponentTemplate {
diff --git a/src/modules/workspace/ui/components/dashboard/schemaPreview.tsx b/src/modules/workspace/ui/components/dashboard/schemaPreview.tsx
index 6275f1a..33a2fca 100644
--- a/src/modules/workspace/ui/components/dashboard/schemaPreview.tsx
+++ b/src/modules/workspace/ui/components/dashboard/schemaPreview.tsx
@@ -483,7 +483,7 @@ export function SchemaPreview({
                                         activeMatch.template,
                                         schemaFields,
                                         fetchUrl,
-                                        { requiresAuth, bearerToken },
+                                        { requiresAuth, bearerToken, method: endpoint.method },
                                     )}
                                     lang="tsx"
                                     maxHeight="350px"
@@ -494,7 +494,7 @@ export function SchemaPreview({
                                         activeMatch.template,
                                         schemaFields,
                                         fetchUrl,
-                                        { requiresAuth, bearerToken },
+                                        { requiresAuth, bearerToken, method: endpoint.method },
                                     )}
                                     lang="html"
                                     maxHeight="350px"
diff --git a/src/modules/workspace/ui/components/sidebar/method-badge.tsx b/src/modules/workspace/ui/components/sidebar/method-badge.tsx
index ab335c5..13569b0 100644
--- a/src/modules/workspace/ui/components/sidebar/method-badge.tsx
+++ b/src/modules/workspace/ui/components/sidebar/method-badge.tsx
@@ -11,12 +11,13 @@ export const METHOD_STYLES: Record<HttpMethod, string> = {
     DELETE: "text-rose-500",
 };
 
-export function MethodBadge({ method }: { method: HttpMethod }) {
+export function MethodBadge({ method, className }: { method: HttpMethod; className?: string }) {
     return (
         <span
             className={cn(
-                "w-11.5 shrink-0 text-[10px] font-bold leading-none tabular-nums",
+                "w-10 shrink-0 text-[10px] font-bold leading-none tabular-nums",
                 METHOD_STYLES[method],
+                className,
             )}
         >
             {method}
diff --git a/src/modules/workspace/ui/components/sidebar/sidebar-tree.tsx b/src/modules/workspace/ui/components/sidebar/sidebar-tree.tsx
index 980c0ee..956e4ad 100644
--- a/src/modules/workspace/ui/components/sidebar/sidebar-tree.tsx
+++ b/src/modules/workspace/ui/components/sidebar/sidebar-tree.tsx
@@ -72,7 +72,6 @@ export function EndpointTreeNode({
                 }}
             >
                 <TreeExpander hasChildren={false} />
-                <TreeIcon hasChildren={false} />
                 {isRenaming ? (
                     <InlineRename
                         defaultValue={endpoint.name}
@@ -100,7 +99,7 @@ export function EndpointTreeNode({
                         <Lock className="size-3" />
                     </span>
                 )}
-                <MethodBadge method={endpoint.method} />
+                <MethodBadge method={endpoint.method} className="w-auto mr-1.5 text-[9px]" />
                 <TreeNodeMenu
                     showNewFolder={false}
                     showNewFile={false}
diff --git a/src/modules/workspace/ui/layouts/workspace-layout.tsx b/src/modules/workspace/ui/layouts/workspace-layout.tsx
index 25bb15a..377649b 100644
--- a/src/modules/workspace/ui/layouts/workspace-layout.tsx
+++ b/src/modules/workspace/ui/layouts/workspace-layout.tsx
@@ -28,10 +28,40 @@ export function ApiClientLayout({
     const [createEndpointOpen, setCreateEndpointOpen] = useState(false);
     const createEndpoint = useCreateEndpoint();
 
+    const [sidebarWidth, setSidebarWidth] = useState(256);
+    const [isResizing, setIsResizing] = useState(false);
+
     useEffect(() => {
         setMockOrigin(getMockOrigin());
     }, []);
 
+    const handleMouseDown = useCallback((e: React.MouseEvent) => {
+        e.preventDefault();
+        setIsResizing(true);
+    }, []);
+
+    useEffect(() => {
+        if (!isResizing) return;
+
+        const handleMouseMove = (e: MouseEvent) => {
+            // Clamp sidebar width between 180px and 480px
+            const newWidth = Math.max(180, Math.min(480, e.clientX));
+            setSidebarWidth(newWidth);
+        };
+
+        const handleMouseUp = () => {
+            setIsResizing(false);
+        };
+
+        document.addEventListener("mousemove", handleMouseMove);
+        document.addEventListener("mouseup", handleMouseUp);
+
+        return () => {
+            document.removeEventListener("mousemove", handleMouseMove);
+            document.removeEventListener("mouseup", handleMouseUp);
+        };
+    }, [isResizing]);
+
     const handleSelectEndpoint = (endpointId: string, projectId: string) => {
         setSelectedEndpointId(endpointId);
         setSelectedProjectId(projectId);
@@ -107,10 +137,11 @@ export function ApiClientLayout({
             {/* Absolute sidebar */}
             <aside
                 className={cn(
-                    "absolute inset-y-0 left-0 z-20 w-64 flex flex-col bg-background border-r",
-                    "transition-transform duration-200 ease-in-out",
+                    "absolute inset-y-0 left-0 z-20 flex flex-col bg-background border-r",
+                    !isResizing && "transition-all duration-200 ease-in-out",
                     isCollapsed ? "-translate-x-full" : "translate-x-0",
                 )}
+                style={{ width: sidebarWidth }}
             >
                 <div className="flex items-center h-10 px-2 gap-1 border-b shrink-0">
                     <button
@@ -148,6 +179,15 @@ export function ApiClientLayout({
                         onSelectProject={setSelectedProjectId}
                     />
                 </div>
+
+                {/* Resize handle */}
+                <div
+                    onMouseDown={handleMouseDown}
+                    className={cn(
+                        "absolute top-0 -right-1 bottom-0 w-2 cursor-col-resize hover:bg-primary/30 active:bg-primary/50 transition-colors z-30",
+                        isResizing && "bg-primary/40",
+                    )}
+                />
             </aside>
 
             <div className="absolute inset-x-0 top-0 z-30 h-10 flex items-center pointer-events-none">
@@ -169,9 +209,10 @@ export function ApiClientLayout({
 
             <div
                 className={cn(
-                    "absolute inset-y-0 right-0 flex flex-col overflow-y-auto transition-all duration-200",
-                    isCollapsed ? "left-0" : "left-64",
+                    "absolute inset-y-0 right-0 flex flex-col overflow-y-auto",
+                    !isResizing && "transition-all duration-200",
                 )}
+                style={{ left: isCollapsed ? 0 : sidebarWidth }}
             >
                 <div className="h-10 shrink-0" />
                 {selectedProjectId && !isLoadingAllEndpoints && allEndpoints?.length === 0 && (
diff --git a/tests/component-templates.test.ts b/tests/component-templates.test.ts
index 67829f6..b9687b5 100644
--- a/tests/component-templates.test.ts
+++ b/tests/component-templates.test.ts
@@ -745,4 +745,200 @@ describe("Component Templates Library", () => {
             });
         });
     });
+
+    describe("HTTP Method Support (TemplateOptions.method)", () => {
+        const methodFields = [
+            { id: "1", fieldName: "id", dataType: "$faker.string.uuid" },
+            { id: "2", fieldName: "name", dataType: "$faker.person.fullName" },
+        ];
+        const URL = "http://localhost:3000/api/v1/items";
+
+        describe("buildFetchHook", () => {
+            it("generates plain fetch with no method when options are omitted", () => {
+                const code = buildFetchHook("Test", URL, "Item");
+                expect(code).toContain(`fetch("${URL}")`);
+                expect(code).not.toContain("method:");
+            });
+
+            it("generates plain fetch when method is GET", () => {
+                const code = buildFetchHook("Test", URL, "Item", { method: "GET" });
+                expect(code).toContain(`fetch("${URL}")`);
+                expect(code).not.toContain("method:");
+            });
+
+            it("includes method: POST in fetch options", () => {
+                const code = buildFetchHook("Test", URL, "Item", { method: "POST" });
+                expect(code).toContain('method: "POST"');
+                expect(code).toContain(`fetch("${URL}"`);
+            });
+
+            it("includes method: PATCH in fetch options", () => {
+                const code = buildFetchHook("Test", URL, "Item", { method: "PATCH" });
+                expect(code).toContain('method: "PATCH"');
+            });
+
+            it("includes method: PUT in fetch options", () => {
+                const code = buildFetchHook("Test", URL, "Item", { method: "PUT" });
+                expect(code).toContain('method: "PUT"');
+            });
+
+            it("includes method: DELETE in fetch options", () => {
+                const code = buildFetchHook("Test", URL, "Item", { method: "DELETE" });
+                expect(code).toContain('method: "DELETE"');
+            });
+
+            it("includes both method and Authorization header when combined", () => {
+                const code = buildFetchHook("Test", URL, "Item", {
+                    method: "POST",
+                    requiresAuth: true,
+                    bearerToken: "tok_123",
+                });
+                expect(code).toContain('method: "POST"');
+                expect(code).toContain("Authorization");
+                expect(code).toContain("Bearer tok_123");
+            });
+        });
+
+        describe("generateCode with method option", () => {
+            it("dynamicGridTemplate includes method: POST in generated React code", () => {
+                const code = generateCode(dynamicGridTemplate, methodFields, URL, {
+                    method: "POST",
+                });
+                expect(code).toContain('method: "POST"');
+                expect(code).toContain(`fetch("${URL}"`);
+            });
+
+            it("userCardTemplate includes method: DELETE in generated React code", () => {
+                const code = generateCode(userCardTemplate, methodFields, URL, {
+                    method: "DELETE",
+                });
+                expect(code).toContain('method: "DELETE"');
+            });
+
+            it("postCardTemplate includes method: PUT in generated React code", () => {
+                const code = generateCode(postCardTemplate, methodFields, URL, { method: "PUT" });
+                expect(code).toContain('method: "PUT"');
+            });
+
+            it("productCardTemplate includes method: PATCH in generated React code", () => {
+                const code = generateCode(productCardTemplate, methodFields, URL, {
+                    method: "PATCH",
+                });
+                expect(code).toContain('method: "PATCH"');
+            });
+
+            it("todoListTemplate includes method: POST in generated React code", () => {
+                const code = generateCode(todoListTemplate, methodFields, URL, { method: "POST" });
+                expect(code).toContain('method: "POST"');
+            });
+
+            it("transactionRowTemplate includes method: POST in generated React code", () => {
+                const code = generateCode(transactionRowTemplate, methodFields, URL, {
+                    method: "POST",
+                });
+                expect(code).toContain('method: "POST"');
+            });
+
+            it("commentItemTemplate includes method: PATCH in generated React code", () => {
+                const code = generateCode(commentItemTemplate, methodFields, URL, {
+                    method: "PATCH",
+                });
+                expect(code).toContain('method: "PATCH"');
+            });
+
+            it("GET method omits explicit method from generated React code", () => {
+                const code = generateCode(dynamicGridTemplate, methodFields, URL, {
+                    method: "GET",
+                });
+                expect(code).not.toContain("method:");
+                expect(code).toContain(`fetch("${URL}")`);
+            });
+
+            it("no method option omits explicit method from generated React code", () => {
+                const code = generateCode(dynamicGridTemplate, methodFields, URL);
+                expect(code).not.toContain("method:");
+            });
+
+            it("combines method with auth in generated React code", () => {
+                const code = generateCode(dynamicGridTemplate, methodFields, URL, {
+                    method: "POST",
+                    requiresAuth: true,
+                    bearerToken: "tok_method_auth",
+                });
+                expect(code).toContain('method: "POST"');
+                expect(code).toContain("Authorization");
+                expect(code).toContain("Bearer tok_method_auth");
+            });
+        });
+
+        describe("generateHtmlCode with method option", () => {
+            it("dynamicGridTemplate HTML includes method: POST", () => {
+                const html = generateHtmlCode(dynamicGridTemplate, methodFields, URL, {
+                    method: "POST",
+                });
+                expect(html).toContain('method: "POST"');
+                expect(html).toContain(`fetch("${URL}"`);
+            });
+
+            it("userCardTemplate HTML includes method: DELETE", () => {
+                const html = generateHtmlCode(userCardTemplate, methodFields, URL, {
+                    method: "DELETE",
+                });
+                expect(html).toContain('method: "DELETE"');
+            });
+
+            it("postCardTemplate HTML includes method: PUT", () => {
+                const html = generateHtmlCode(postCardTemplate, methodFields, URL, {
+                    method: "PUT",
+                });
+                expect(html).toContain('method: "PUT"');
+            });
+
+            it("productCardTemplate HTML includes method: PATCH", () => {
+                const html = generateHtmlCode(productCardTemplate, methodFields, URL, {
+                    method: "PATCH",
+                });
+                expect(html).toContain('method: "PATCH"');
+            });
+
+            it("todoListTemplate HTML includes method: POST", () => {
+                const html = generateHtmlCode(todoListTemplate, methodFields, URL, {
+                    method: "POST",
+                });
+                expect(html).toContain('method: "POST"');
+            });
+
+            it("transactionRowTemplate HTML includes method: POST", () => {
+                const html = generateHtmlCode(transactionRowTemplate, methodFields, URL, {
+                    method: "POST",
+                });
+                expect(html).toContain('method: "POST"');
+            });
+
+            it("commentItemTemplate HTML includes method: PATCH", () => {
+                const html = generateHtmlCode(commentItemTemplate, methodFields, URL, {
+                    method: "PATCH",
+                });
+                expect(html).toContain('method: "PATCH"');
+            });
+
+            it("GET method omits explicit method from HTML", () => {
+                const html = generateHtmlCode(dynamicGridTemplate, methodFields, URL, {
+                    method: "GET",
+                });
+                expect(html).not.toContain("method:");
+            });
+
+            it("HTML combines method with auth", () => {
+                const html = generateHtmlCode(dynamicGridTemplate, methodFields, URL, {
+                    method: "POST",
+                    requiresAuth: true,
+                    bearerToken: "tok_html_method",
+                });
+                expect(html).toContain('method: "POST"');
+                expect(html).toContain("Authorization");
+                expect(html).toContain("Bearer tok_html_method");
+            });
+        });
+    });
 });

From 446e6816127a1692668adb4569dc2f51b79ee714 Mon Sep 17 00:00:00 2001
From: Grishma Dhakal <dhakalgrishma5@gmail.com>
Date: Sun, 26 Jul 2026 13:12:41 +0545
Subject: [PATCH 4/8] refactor: split large module files into focused
 single-responsibility components

---
 .../ui/components/dashboard/schemaBuilder.tsx | 873 ------------------
 .../schemaBuilder/behavior-config.tsx         |  85 ++
 .../dashboard/schemaBuilder/field-label.tsx   |  26 +
 .../dashboard/schemaBuilder/index.ts          |   1 +
 .../schemaBuilder/raw-json-editor.tsx         | 203 ++++
 .../schemaBuilder/schema-builder.tsx          | 417 +++++++++
 .../schemaBuilder/schema-fields-editor.tsx    | 136 +++
 .../schemaPreview/generate-fetch-snippet.ts   |  58 ++
 .../dashboard/schemaPreview/index.ts          |   2 +
 .../schemaPreview/schema-preview-skeleton.tsx |  85 ++
 .../schema-preview.tsx}                       | 156 +---
 .../ui/components/sidebar/dialogs.tsx         | 315 -------
 .../dialogs/create-endpoint-dialog.tsx        | 119 +++
 .../sidebar/dialogs/create-folder-dialog.tsx  |  55 ++
 .../sidebar/dialogs/create-project-dialog.tsx |  73 ++
 .../sidebar/dialogs/import-project-dialog.tsx |  96 ++
 .../ui/components/sidebar/dialogs/index.ts    |   4 +
 .../components/sidebar/endpoint-tree-node.tsx |  77 ++
 .../components/sidebar/folder-tree-node.tsx   | 145 +++
 .../components/sidebar/project-tree-node.tsx  | 184 ++++
 .../ui/components/sidebar/sidebar-tree.tsx    | 407 +-------
 .../ui/components/sidebar/tree-utils.ts       |  14 +
 .../components/sidebar/use-sidebar-actions.ts |  83 ++
 .../components/sidebar/workspace-sidebar.tsx  |  82 +-
 24 files changed, 1895 insertions(+), 1801 deletions(-)
 delete mode 100644 src/modules/workspace/ui/components/dashboard/schemaBuilder.tsx
 create mode 100644 src/modules/workspace/ui/components/dashboard/schemaBuilder/behavior-config.tsx
 create mode 100644 src/modules/workspace/ui/components/dashboard/schemaBuilder/field-label.tsx
 create mode 100644 src/modules/workspace/ui/components/dashboard/schemaBuilder/index.ts
 create mode 100644 src/modules/workspace/ui/components/dashboard/schemaBuilder/raw-json-editor.tsx
 create mode 100644 src/modules/workspace/ui/components/dashboard/schemaBuilder/schema-builder.tsx
 create mode 100644 src/modules/workspace/ui/components/dashboard/schemaBuilder/schema-fields-editor.tsx
 create mode 100644 src/modules/workspace/ui/components/dashboard/schemaPreview/generate-fetch-snippet.ts
 create mode 100644 src/modules/workspace/ui/components/dashboard/schemaPreview/index.ts
 create mode 100644 src/modules/workspace/ui/components/dashboard/schemaPreview/schema-preview-skeleton.tsx
 rename src/modules/workspace/ui/components/dashboard/{schemaPreview.tsx => schemaPreview/schema-preview.tsx} (69%)
 delete mode 100644 src/modules/workspace/ui/components/sidebar/dialogs.tsx
 create mode 100644 src/modules/workspace/ui/components/sidebar/dialogs/create-endpoint-dialog.tsx
 create mode 100644 src/modules/workspace/ui/components/sidebar/dialogs/create-folder-dialog.tsx
 create mode 100644 src/modules/workspace/ui/components/sidebar/dialogs/create-project-dialog.tsx
 create mode 100644 src/modules/workspace/ui/components/sidebar/dialogs/import-project-dialog.tsx
 create mode 100644 src/modules/workspace/ui/components/sidebar/dialogs/index.ts
 create mode 100644 src/modules/workspace/ui/components/sidebar/endpoint-tree-node.tsx
 create mode 100644 src/modules/workspace/ui/components/sidebar/folder-tree-node.tsx
 create mode 100644 src/modules/workspace/ui/components/sidebar/project-tree-node.tsx
 create mode 100644 src/modules/workspace/ui/components/sidebar/tree-utils.ts
 create mode 100644 src/modules/workspace/ui/components/sidebar/use-sidebar-actions.ts

diff --git a/src/modules/workspace/ui/components/dashboard/schemaBuilder.tsx b/src/modules/workspace/ui/components/dashboard/schemaBuilder.tsx
deleted file mode 100644
index e64a0b6..0000000
--- a/src/modules/workspace/ui/components/dashboard/schemaBuilder.tsx
+++ /dev/null
@@ -1,873 +0,0 @@
-"use client";
-
-import React, { useEffect, useMemo, useState } from "react";
-import { toast } from "sonner";
-import { Trash2, Plus, MonitorPlay, Info, Shield, SlidersHorizontal } from "lucide-react";
-import { Input } from "~/components/ui/input";
-import { Button } from "~/components/ui/button";
-import { Label } from "~/components/ui/label";
-import { Badge } from "~/components/ui/badge";
-import { Separator } from "~/components/ui/separator";
-import { Slider } from "~/components/ui/slider";
-
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/components/ui/card";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "~/components/ui/tooltip";
-import { Tabs, TabsList, TabsTrigger, TabsContent } from "~/components/ui/tabs";
-import { EndpointAuthForm } from "./endpoint-auth-form";
-import {
-    Select,
-    SelectContent,
-    SelectGroup,
-    SelectItem,
-    SelectLabel,
-    SelectTrigger,
-    SelectValue,
-} from "~/components/ui/select";
-import { useUpdateEndpoint } from "~/hooks/use-endpoints";
-import { resolveResponseData } from "~/lib/schema-resolver";
-import type { HttpMethod } from "../sidebar/types";
-import {
-    FAKER_OPTIONS,
-    type SchemaField,
-    fieldsFromSchema,
-    buildSchema,
-} from "~/lib/faker-options";
-
-interface SchemaBuilderProps {
-    endpoint: {
-        id: string;
-        projectId?: string;
-        name: string;
-        method: HttpMethod;
-        path: string;
-        statusCode: number;
-        delayMs: number;
-        failureRate: number;
-        responseSchema: unknown;
-        responseCount: number;
-    };
-    projectId?: string;
-    initialTab?: "schema" | "auth";
-    onSuccess?: () => void;
-}
-
-function FieldLabel({ children, tooltip }: { children: React.ReactNode; tooltip: string }) {
-    return (
-        <div className="flex items-center gap-1.5">
-            <Label className="text-xs font-semibold text-foreground uppercase tracking-wide">
-                {children}
-            </Label>
-            <Tooltip>
-                <TooltipTrigger
-                    render={
-                        <span className="inline-flex cursor-pointer text-muted-foreground/60 hover:text-primary transition-colors">
-                            <Info className="h-3 w-3" />
-                        </span>
-                    }
-                />
-                <TooltipContent side="top" className="max-w-56 text-xs">
-                    {tooltip}
-                </TooltipContent>
-            </Tooltip>
-        </div>
-    );
-}
-
-export function SchemaBuilder({
-    endpoint,
-    projectId,
-    initialTab = "schema",
-    onSuccess,
-}: SchemaBuilderProps) {
-    const [activeTab, setActiveTab] = useState<"schema" | "auth">(initialTab);
-    const [resourceName, setResourceName] = useState(endpoint.name);
-    const [nameError, setNameError] = useState<string | null>(null);
-    const [schemaPath, setSchemaPath] = useState(endpoint.path);
-    const [pathError, setPathError] = useState<string | null>(null);
-    const [httpMethod, setHttpMethod] = useState<HttpMethod>(endpoint.method);
-    const [delayMs, setDelayMs] = useState(endpoint.delayMs);
-    const [failureRate, setFailureRate] = useState(endpoint.failureRate);
-    const [responseCount, setResponseCount] = useState(endpoint.responseCount);
-    const [fields, setFields] = useState<SchemaField[]>([
-        { id: crypto.randomUUID(), fieldName: "", dataType: "$faker.string.uuid" },
-    ]);
-    const [editorMode, setEditorMode] = useState<"flat" | "raw">("flat");
-    const [rawSchemaText, setRawSchemaText] = useState<string>("");
-    const [jsonError, setJsonError] = useState<string | null>(null);
-
-    const updateEndpoint = useUpdateEndpoint();
-
-    useEffect(() => {
-        setActiveTab(initialTab);
-    }, [initialTab]);
-
-    useEffect(() => {
-        setResourceName(endpoint.name);
-        setNameError(null);
-        setSchemaPath(endpoint.path);
-        setPathError(null);
-        setHttpMethod(endpoint.method);
-        setDelayMs(endpoint.delayMs);
-        setFailureRate(endpoint.failureRate);
-        setResponseCount(endpoint.responseCount);
-        setFields(fieldsFromSchema(endpoint.responseSchema));
-        setRawSchemaText(
-            endpoint.responseSchema
-                ? JSON.stringify(endpoint.responseSchema, null, 2)
-                : JSON.stringify({ id: "$faker.string.uuid" }, null, 2),
-        );
-        setJsonError(null);
-    }, [endpoint]);
-
-    const addField = () => {
-        setFields([
-            ...fields,
-            {
-                id: crypto.randomUUID(),
-                fieldName: "",
-                dataType: "$faker.string.uuid",
-            },
-        ]);
-    };
-
-    const removeField = (id: string) => {
-        if (fields.length === 1) return;
-        setFields(fields.filter((field) => field.id !== id));
-    };
-
-    const updateField = (id: string, key: keyof SchemaField, value: string) => {
-        const nextFields = fields.map((field) =>
-            field.id === id ? { ...field, [key]: value } : field,
-        );
-        setFields(nextFields);
-    };
-
-    const seed = projectId || endpoint.projectId || endpoint.id;
-
-    const previewData = useMemo(() => {
-        let formattedSchema: unknown;
-        if (editorMode === "raw") {
-            try {
-                formattedSchema = JSON.parse(rawSchemaText);
-            } catch {
-                formattedSchema = buildSchema(fields);
-            }
-        } else {
-            formattedSchema = buildSchema(fields);
-        }
-
-        return resolveResponseData(formattedSchema, responseCount, seed);
-    }, [fields, editorMode, rawSchemaText, responseCount, seed]);
-
-    const hasExistingSchema = useMemo(() => {
-        if (
-            !endpoint.responseSchema ||
-            typeof endpoint.responseSchema !== "object" ||
-            Array.isArray(endpoint.responseSchema)
-        ) {
-            return false;
-        }
-
-        return Object.keys(endpoint.responseSchema).length > 0;
-    }, [endpoint.responseSchema]);
-
-    const handleSubmit = () => {
-        let hasError = false;
-
-        if (!resourceName.trim()) {
-            setNameError("Resource name is required.");
-            hasError = true;
-        } else {
-            setNameError(null);
-        }
-
-        const trimmedPath = schemaPath.trim();
-        if (!trimmedPath) {
-            setPathError("Path is required.");
-            hasError = true;
-        } else if (!trimmedPath.startsWith("/")) {
-            setPathError("Path must start with /");
-            hasError = true;
-        } else {
-            setPathError(null);
-        }
-
-        if (hasError) return;
-
-        let formattedSchema: unknown;
-        if (editorMode === "raw") {
-            try {
-                formattedSchema = JSON.parse(rawSchemaText);
-            } catch (err: any) {
-                setJsonError(err.message || "Invalid JSON syntax");
-                toast.error("Please fix JSON syntax errors before saving.");
-                return;
-            }
-        } else {
-            formattedSchema = buildSchema(fields);
-        }
-
-        updateEndpoint.mutate(
-            {
-                id: endpoint.id,
-                name: resourceName,
-                path: trimmedPath,
-                method: httpMethod,
-                responseSchema: formattedSchema as Record<string, unknown>,
-                delayMs: delayMs,
-                failureRate: failureRate,
-                responseCount: responseCount,
-            },
-            {
-                onSuccess: () => {
-                    toast.success("Schema saved");
-                    if (onSuccess) onSuccess();
-                },
-                onError: (error) => {
-                    toast.error(error.message || "Failed to save schema");
-                },
-            },
-        );
-    };
-
-    return (
-        <TooltipProvider delay={150}>
-            <Tabs
-                value={activeTab}
-                onValueChange={(v) => setActiveTab(v as "schema" | "auth")}
-                orientation="horizontal"
-                className="w-full flex-1 flex flex-col gap-0"
-            >
-                <div className="w-full px-6 pt-5 pb-3 border-b bg-muted/30">
-                    <TabsList className="grid w-full grid-cols-2 h-10">
-                        <TabsTrigger
-                            value="schema"
-                            className="gap-2 text-xs font-semibold uppercase tracking-wider"
-                        >
-                            <SlidersHorizontal className="h-4 w-4" /> Schema &amp; Behavior
-                        </TabsTrigger>
-                        <TabsTrigger
-                            value="auth"
-                            className="gap-2 text-xs font-semibold uppercase tracking-wider"
-                        >
-                            <Shield className="h-4 w-4 text-emerald-500" /> Authentication
-                        </TabsTrigger>
-                    </TabsList>
-                </div>
-
-                <TabsContent value="schema" className="flex-1 flex flex-col">
-                    <Card className="gap-6 border-none py-6 px-4 shadow-none rounded-none h-full flex flex-col justify-between">
-                        <CardHeader className="gap-1 px-0">
-                            <CardTitle className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
-                                Configure resource
-                            </CardTitle>
-                            <CardDescription className="font-mono text-xs">
-                                Define the endpoint&apos;s identity, behavior, and response shape.
-                            </CardDescription>
-                        </CardHeader>
-
-                        <CardContent className="space-y-6 px-0">
-                            {/* Resource name */}
-                            <div className="space-y-1.5">
-                                <Label htmlFor="resource-name" className="text-sm font-semibold">
-                                    Resource name
-                                </Label>
-                                <Input
-                                    id="resource-name"
-                                    placeholder="users, comments, articles..."
-                                    value={resourceName}
-                                    onChange={(e) => {
-                                        setResourceName(e.target.value);
-                                        if (nameError) setNameError(null);
-                                    }}
-                                    aria-invalid={!!nameError}
-                                    className="h-11 border-0 bg-muted font-mono text-base shadow-none focus-visible:ring-2 focus-visible:ring-ring aria-invalid:ring-2 aria-invalid:ring-destructive/50"
-                                />
-                                {nameError && (
-                                    <p className="text-xs font-medium text-destructive">
-                                        {nameError}
-                                    </p>
-                                )}
-                            </div>
-
-                            {/* Schema path + HTTP method */}
-                            <div className="space-y-1.5">
-                                <Label className="text-sm font-semibold">Schema path</Label>
-                                <div className="flex items-stretch gap-2">
-                                    {/* Method pill-toggle */}
-                                    <div className="flex rounded-md bg-muted p-0.5 shrink-0">
-                                        {(
-                                            [
-                                                "GET",
-                                                "POST",
-                                                "PUT",
-                                                "PATCH",
-                                                "DELETE",
-                                            ] as HttpMethod[]
-                                        ).map((m) => (
-                                            <button
-                                                key={m}
-                                                type="button"
-                                                onClick={() => setHttpMethod(m)}
-                                                className={`px-2 py-1 rounded-sm text-[11px] font-bold tracking-wide transition-colors ${
-                                                    httpMethod === m
-                                                        ? m === "GET"
-                                                            ? "bg-emerald-500/20 text-emerald-400 shadow-xs"
-                                                            : m === "POST"
-                                                              ? "bg-blue-500/20 text-blue-400 shadow-xs"
-                                                              : m === "PUT"
-                                                                ? "bg-amber-500/20 text-amber-400 shadow-xs"
-                                                                : m === "PATCH"
-                                                                  ? "bg-purple-500/20 text-purple-400 shadow-xs"
-                                                                  : "bg-rose-500/20 text-rose-400 shadow-xs"
-                                                        : "text-muted-foreground hover:text-foreground"
-                                                }`}
-                                            >
-                                                {m}
-                                            </button>
-                                        ))}
-                                    </div>
-
-                                    {/* Path input */}
-                                    <div className="relative flex-1">
-                                        <Input
-                                            id="schema-path"
-                                            placeholder="/users/:id"
-                                            value={schemaPath}
-                                            onChange={(e) => {
-                                                setSchemaPath(e.target.value);
-                                                if (pathError) setPathError(null);
-                                            }}
-                                            aria-invalid={!!pathError}
-                                            className="h-11 border-0 bg-muted font-mono text-sm shadow-none focus-visible:ring-2 focus-visible:ring-ring aria-invalid:ring-2 aria-invalid:ring-destructive/50"
-                                        />
-                                    </div>
-                                </div>
-                                {pathError && (
-                                    <p className="text-xs font-medium text-destructive">
-                                        {pathError}
-                                    </p>
-                                )}
-                            </div>
-
-                            <Separator />
-
-                            {/* Behavior config */}
-                            <div className="grid grid-cols-2 gap-4 md:grid-cols-3">
-                                <div className="space-y-1.5">
-                                    <FieldLabel tooltip="Simulated network latency before this endpoint responds.">
-                                        Delay
-                                    </FieldLabel>
-                                    <div className="relative">
-                                        <Input
-                                            id="delay-ms"
-                                            type="number"
-                                            min={0}
-                                            value={delayMs}
-                                            onChange={(e) => setDelayMs(Number(e.target.value))}
-                                            className="h-10 border-0 bg-muted pr-10 font-mono shadow-none focus-visible:ring-2 focus-visible:ring-ring"
-                                        />
-                                        <span className="pointer-events-none absolute inset-y-0 right-3 flex items-center text-xs text-muted-foreground">
-                                            ms
-                                        </span>
-                                    </div>
-                                </div>
-
-                                <div className="space-y-1.5">
-                                    <FieldLabel tooltip="Probability that a request to this endpoint returns an error response.">
-                                        Failure rate
-                                    </FieldLabel>
-                                    <div className="flex h-10 items-center gap-3 rounded-md bg-muted px-3">
-                                        <Slider
-                                            value={[failureRate]}
-                                            min={0}
-                                            max={1}
-                                            step={0.1}
-                                            onValueChange={(value) =>
-                                                setFailureRate(
-                                                    Array.isArray(value) ? value[0]! : value,
-                                                )
-                                            }
-                                            className="flex-1"
-                                        />
-                                        <span className="w-7 shrink-0 text-right font-mono text-xs tabular-nums">
-                                            {failureRate.toFixed(1)}
-                                        </span>
-                                    </div>
-                                </div>
-
-                                <div className="col-span-2 space-y-1.5 md:col-span-1">
-                                    <FieldLabel tooltip="Number of mock items generated per response.">
-                                        Response count
-                                    </FieldLabel>
-                                    <Input
-                                        id="response-count"
-                                        type="number"
-                                        min={1}
-                                        value={responseCount}
-                                        onChange={(e) => setResponseCount(Number(e.target.value))}
-                                        placeholder="10"
-                                        className="h-10 border-0 bg-muted font-mono shadow-none focus-visible:ring-2 focus-visible:ring-ring"
-                                    />
-                                </div>
-                            </div>
-
-                            <Separator />
-
-                            {/* Schema fields editor with Flat vs Raw JSON tabs */}
-                            <div className="space-y-3">
-                                <div className="flex items-center justify-between">
-                                    <FieldLabel tooltip="Define the fields used to generate mock data.">
-                                        Fields schema
-                                    </FieldLabel>
-                                    <div className="flex items-center gap-2">
-                                        <div className="flex rounded-md bg-muted p-0.5 text-xs">
-                                            <button
-                                                type="button"
-                                                onClick={() => {
-                                                    if (editorMode === "raw") {
-                                                        try {
-                                                            const parsed =
-                                                                JSON.parse(rawSchemaText);
-                                                            setFields(fieldsFromSchema(parsed));
-                                                            setJsonError(null);
-                                                        } catch {
-                                                            // Keep current fields if invalid
-                                                        }
-                                                    }
-                                                    setEditorMode("flat");
-                                                }}
-                                                className={`px-2.5 py-1 rounded-sm font-medium transition-colors ${
-                                                    editorMode === "flat"
-                                                        ? "bg-background text-foreground shadow-xs font-semibold"
-                                                        : "text-muted-foreground hover:text-foreground"
-                                                }`}
-                                            >
-                                                Flat Columns
-                                            </button>
-                                            <button
-                                                type="button"
-                                                onClick={() => {
-                                                    if (editorMode === "flat") {
-                                                        const current = buildSchema(fields);
-                                                        setRawSchemaText(
-                                                            JSON.stringify(current, null, 2),
-                                                        );
-                                                    }
-                                                    setEditorMode("raw");
-                                                }}
-                                                className={`px-2.5 py-1 rounded-sm font-medium transition-colors ${
-                                                    editorMode === "raw"
-                                                        ? "bg-background text-foreground shadow-xs font-semibold"
-                                                        : "text-muted-foreground hover:text-foreground"
-                                                }`}
-                                            >
-                                                Nested Raw JSON
-                                            </button>
-                                        </div>
-                                        {editorMode === "flat" && (
-                                            <Badge
-                                                variant="secondary"
-                                                className="font-mono text-xs font-medium"
-                                            >
-                                                {fields.length}{" "}
-                                                {fields.length === 1 ? "field" : "fields"}
-                                            </Badge>
-                                        )}
-                                    </div>
-                                </div>
-
-                                {editorMode === "flat" ? (
-                                    <div className="space-y-2">
-                                        {fields.length > 0 && (
-                                            <div className="hidden grid-cols-[1fr_1fr_2.5rem] gap-3 px-1 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground sm:grid">
-                                                <div>Field name</div>
-                                                <div>Data type</div>
-                                                <div />
-                                            </div>
-                                        )}
-
-                                        <div className="space-y-2">
-                                            {fields.map((field) => (
-                                                <div
-                                                    key={field.id}
-                                                    className="grid grid-cols-[1fr_1fr_2.5rem] items-center gap-2 rounded-lg border border-transparent p-1 transition-colors hover:border-border sm:gap-3"
-                                                >
-                                                    <Input
-                                                        type="text"
-                                                        placeholder="e.g. user_id, created_at"
-                                                        value={field.fieldName}
-                                                        onChange={(e) =>
-                                                            updateField(
-                                                                field.id,
-                                                                "fieldName",
-                                                                e.target.value,
-                                                            )
-                                                        }
-                                                        className="h-10 border-0 bg-muted font-mono text-sm shadow-none focus-visible:ring-2 focus-visible:ring-ring"
-                                                    />
-
-                                                    <Select
-                                                        value={field.dataType}
-                                                        onValueChange={(value) => {
-                                                            if (value)
-                                                                updateField(
-                                                                    field.id,
-                                                                    "dataType",
-                                                                    value,
-                                                                );
-                                                        }}
-                                                    >
-                                                        <SelectTrigger className="h-10 w-full border-0 bg-muted font-mono text-sm shadow-none focus-visible:ring-2 focus-visible:ring-ring">
-                                                            <SelectValue placeholder="Select type" />
-                                                        </SelectTrigger>
-                                                        <SelectContent>
-                                                            {FAKER_OPTIONS.map((group) => (
-                                                                <SelectGroup key={group.label}>
-                                                                    <SelectLabel>
-                                                                        {group.label}
-                                                                    </SelectLabel>
-                                                                    {group.options.map((option) => (
-                                                                        <SelectItem
-                                                                            key={option.value}
-                                                                            value={option.value}
-                                                                        >
-                                                                            {option.label}
-                                                                        </SelectItem>
-                                                                    ))}
-                                                                </SelectGroup>
-                                                            ))}
-                                                        </SelectContent>
-                                                    </Select>
-
-                                                    <Tooltip>
-                                                        <TooltipTrigger
-                                                            render={
-                                                                <Button
-                                                                    type="button"
-                                                                    variant="ghost"
-                                                                    size="icon"
-                                                                    disabled={fields.length === 1}
-                                                                    onClick={() =>
-                                                                        removeField(field.id)
-                                                                    }
-                                                                    className="h-10 w-10 shrink-0 text-muted-foreground hover:bg-destructive/10 hover:text-destructive disabled:opacity-30"
-                                                                >
-                                                                    <Trash2 className="h-4 w-4" />
-                                                                </Button>
-                                                            }
-                                                        />
-                                                        <TooltipContent
-                                                            side="left"
-                                                            className="text-xs"
-                                                        >
-                                                            {fields.length === 1
-                                                                ? "At least one field is required"
-                                                                : "Remove field"}
-                                                        </TooltipContent>
-                                                    </Tooltip>
-                                                </div>
-                                            ))}
-                                        </div>
-
-                                        <div className="flex items-center justify-between mt-1">
-                                            <Button
-                                                type="button"
-                                                variant="secondary"
-                                                onClick={addField}
-                                                size="sm"
-                                                className="h-9 gap-1.5 border-dashed border-primary text-muted-foreground hover:text-primary hover:color-primary"
-                                            >
-                                                <Plus className="h-3.5 w-3.5" />
-                                                <FieldLabel tooltip="Add a new field to the schema.">
-                                                    Add field
-                                                </FieldLabel>
-                                            </Button>
-
-                                            <Button
-                                                type="button"
-                                                onClick={handleSubmit}
-                                                disabled={updateEndpoint.isPending}
-                                                size="sm"
-                                                className="h-9 gap-2 font-semibold text-primary-foreground"
-                                            >
-                                                {updateEndpoint.isPending
-                                                    ? "Saving..."
-                                                    : hasExistingSchema
-                                                      ? "Update schema"
-                                                      : "Generate schema"}
-                                            </Button>
-                                        </div>
-                                    </div>
-                                ) : (
-                                    <div className="space-y-2">
-                                        <div className="flex items-center justify-between">
-                                            <span className="text-[11px] font-mono text-muted-foreground">
-                                                JSON Editor (Tab / Enter auto-indent, &quot;
-                                                auto-pairs)
-                                            </span>
-                                            <Button
-                                                type="button"
-                                                variant="outline"
-                                                size="sm"
-                                                onClick={() => {
-                                                    try {
-                                                        const parsed = JSON.parse(rawSchemaText);
-                                                        const formatted = JSON.stringify(
-                                                            parsed,
-                                                            null,
-                                                            2,
-                                                        );
-                                                        setRawSchemaText(formatted);
-                                                        setJsonError(null);
-                                                        toast.success("JSON formatted");
-                                                    } catch {
-                                                        toast.error(
-                                                            "Cannot format: invalid JSON syntax",
-                                                        );
-                                                    }
-                                                }}
-                                                className="h-7 text-xs font-mono gap-1"
-                                            >
-                                                Format JSON
-                                            </Button>
-                                        </div>
-                                        <textarea
-                                            value={rawSchemaText}
-                                            onChange={(e) => {
-                                                const val = e.target.value;
-                                                setRawSchemaText(val);
-                                                try {
-                                                    const parsed = JSON.parse(val);
-                                                    setFields(fieldsFromSchema(parsed));
-                                                    setJsonError(null);
-                                                } catch (err: any) {
-                                                    setJsonError(
-                                                        err.message || "Invalid JSON syntax",
-                                                    );
-                                                }
-                                            }}
-                                            onKeyDown={(e) => {
-                                                const target = e.currentTarget;
-                                                const { selectionStart, selectionEnd, value } =
-                                                    target;
-
-                                                // 1. Convert single quote ' to double quote "
-                                                if (e.key === "'") {
-                                                    e.preventDefault();
-                                                    const before = value.substring(
-                                                        0,
-                                                        selectionStart,
-                                                    );
-                                                    const after = value.substring(selectionEnd);
-                                                    const nextVal = `${before}"${after}`;
-                                                    setRawSchemaText(nextVal);
-                                                    setTimeout(() => {
-                                                        target.selectionStart =
-                                                            target.selectionEnd =
-                                                                selectionStart + 1;
-                                                    }, 0);
-                                                    return;
-                                                }
-
-                                                // 2. Auto-pair double quotes " -> ""
-                                                if (e.key === '"') {
-                                                    if (
-                                                        selectionStart === selectionEnd &&
-                                                        value[selectionStart] === '"'
-                                                    ) {
-                                                        e.preventDefault();
-                                                        target.selectionStart =
-                                                            target.selectionEnd =
-                                                                selectionStart + 1;
-                                                        return;
-                                                    }
-                                                    e.preventDefault();
-                                                    const before = value.substring(
-                                                        0,
-                                                        selectionStart,
-                                                    );
-                                                    const selected = value.substring(
-                                                        selectionStart,
-                                                        selectionEnd,
-                                                    );
-                                                    const after = value.substring(selectionEnd);
-                                                    const nextVal = `${before}"${selected}"${after}`;
-                                                    setRawSchemaText(nextVal);
-                                                    setTimeout(() => {
-                                                        target.selectionStart = selectionStart + 1;
-                                                        target.selectionEnd =
-                                                            selectionStart + 1 + selected.length;
-                                                    }, 0);
-                                                    return;
-                                                }
-
-                                                // 3. Auto-pair braces { -> {} and brackets [ -> []
-                                                if (e.key === "{" || e.key === "[") {
-                                                    const closing = e.key === "{" ? "}" : "]";
-                                                    e.preventDefault();
-                                                    const before = value.substring(
-                                                        0,
-                                                        selectionStart,
-                                                    );
-                                                    const selected = value.substring(
-                                                        selectionStart,
-                                                        selectionEnd,
-                                                    );
-                                                    const after = value.substring(selectionEnd);
-                                                    const nextVal = `${before}${e.key}${selected}${closing}${after}`;
-                                                    setRawSchemaText(nextVal);
-                                                    setTimeout(() => {
-                                                        target.selectionStart = selectionStart + 1;
-                                                        target.selectionEnd =
-                                                            selectionStart + 1 + selected.length;
-                                                    }, 0);
-                                                    return;
-                                                }
-
-                                                // 4. Tab key -> Insert 2 spaces
-                                                if (e.key === "Tab") {
-                                                    e.preventDefault();
-                                                    const before = value.substring(
-                                                        0,
-                                                        selectionStart,
-                                                    );
-                                                    const after = value.substring(selectionEnd);
-                                                    const nextVal = `${before}  ${after}`;
-                                                    setRawSchemaText(nextVal);
-                                                    setTimeout(() => {
-                                                        target.selectionStart =
-                                                            target.selectionEnd =
-                                                                selectionStart + 2;
-                                                    }, 0);
-                                                    return;
-                                                }
-
-                                                // 5. Enter key -> Smart Auto-Indent matching previous line depth
-                                                if (e.key === "Enter") {
-                                                    e.preventDefault();
-                                                    const lineStart =
-                                                        value.lastIndexOf(
-                                                            "\n",
-                                                            selectionStart - 1,
-                                                        ) + 1;
-                                                    const currentLine = value.substring(
-                                                        lineStart,
-                                                        selectionStart,
-                                                    );
-                                                    const matchIndent = currentLine.match(/^(\s*)/);
-                                                    let indent = matchIndent
-                                                        ? (matchIndent[1] ?? "")
-                                                        : "";
-
-                                                    const charBeforeCursor =
-                                                        value[selectionStart - 1];
-                                                    const charAfterCursor = value[selectionEnd];
-
-                                                    if (
-                                                        charBeforeCursor === "{" ||
-                                                        charBeforeCursor === "["
-                                                    ) {
-                                                        indent += "  ";
-                                                    }
-
-                                                    if (
-                                                        (charBeforeCursor === "{" &&
-                                                            charAfterCursor === "}") ||
-                                                        (charBeforeCursor === "[" &&
-                                                            charAfterCursor === "]")
-                                                    ) {
-                                                        const outerIndent = (indent ?? "").slice(
-                                                            0,
-                                                            Math.max(0, (indent ?? "").length - 2),
-                                                        );
-                                                        const before = value.substring(
-                                                            0,
-                                                            selectionStart,
-                                                        );
-                                                        const after = value.substring(selectionEnd);
-                                                        const nextVal = `${before}\n${indent ?? ""}\n${outerIndent}${after}`;
-                                                        setRawSchemaText(nextVal);
-                                                        setTimeout(() => {
-                                                            target.selectionStart =
-                                                                target.selectionEnd =
-                                                                    selectionStart +
-                                                                    1 +
-                                                                    (indent ?? "").length;
-                                                        }, 0);
-                                                        return;
-                                                    }
-
-                                                    const before = value.substring(
-                                                        0,
-                                                        selectionStart,
-                                                    );
-                                                    const after = value.substring(selectionEnd);
-                                                    const nextVal = `${before}\n${indent ?? ""}${after}`;
-                                                    setRawSchemaText(nextVal);
-                                                    setTimeout(() => {
-                                                        target.selectionStart =
-                                                            target.selectionEnd =
-                                                                selectionStart +
-                                                                1 +
-                                                                (indent ?? "").length;
-                                                    }, 0);
-                                                    return;
-                                                }
-                                            }}
-                                            placeholder={`{\n  "id": "$faker.string.uuid",\n  "user": {\n    "name": "$faker.person.fullName"\n  }\n}`}
-                                            rows={10}
-                                            className="w-full rounded-md border border-input bg-zinc-950 text-zinc-100 p-3 font-mono text-xs shadow-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring leading-relaxed"
-                                        />
-                                        {jsonError && (
-                                            <p className="text-xs font-mono text-destructive">
-                                                JSON Error: {jsonError}
-                                            </p>
-                                        )}
-                                        <div className="flex justify-end pt-1">
-                                            <Button
-                                                type="button"
-                                                onClick={handleSubmit}
-                                                disabled={
-                                                    updateEndpoint.isPending ||
-                                                    (editorMode === "raw" && !!jsonError)
-                                                }
-                                                size="sm"
-                                                className="h-9 gap-2 font-semibold text-primary-foreground"
-                                            >
-                                                {updateEndpoint.isPending
-                                                    ? "Saving..."
-                                                    : hasExistingSchema
-                                                      ? "Update schema"
-                                                      : "Generate schema"}
-                                            </Button>
-                                        </div>
-                                    </div>
-                                )}
-                            </div>
-
-                            <Separator />
-
-                            {/* Live sample data preview */}
-                            <div className="overflow-hidden rounded-lg border border-border">
-                                <div className="flex items-center gap-1.5 border-b bg-muted/40 px-3 py-2">
-                                    <MonitorPlay className="h-3 w-3 text-primary" />
-                                    <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
-                                        Live preview
-                                    </span>
-                                </div>
-                                <pre className="bg-zinc-950 p-3 font-mono text-[11px] leading-relaxed text-zinc-100 overflow-x-auto">
-                                    {JSON.stringify(previewData, null, 2)}
-                                </pre>
-                            </div>
-                        </CardContent>
-                    </Card>
-                </TabsContent>
-
-                <TabsContent value="auth" className="flex-1 flex flex-col">
-                    <EndpointAuthForm endpointId={endpoint.id} onSuccess={onSuccess} />
-                </TabsContent>
-            </Tabs>
-        </TooltipProvider>
-    );
-}
diff --git a/src/modules/workspace/ui/components/dashboard/schemaBuilder/behavior-config.tsx b/src/modules/workspace/ui/components/dashboard/schemaBuilder/behavior-config.tsx
new file mode 100644
index 0000000..edc5e03
--- /dev/null
+++ b/src/modules/workspace/ui/components/dashboard/schemaBuilder/behavior-config.tsx
@@ -0,0 +1,85 @@
+import { Input } from "~/components/ui/input";
+import { Separator } from "~/components/ui/separator";
+import { Slider } from "~/components/ui/slider";
+import { FieldLabel } from "./field-label";
+
+interface BehaviorConfigProps {
+    delayMs: number;
+    onDelayMsChange: (value: number) => void;
+    failureRate: number;
+    onFailureRateChange: (value: number) => void;
+    responseCount: number;
+    onResponseCountChange: (value: number) => void;
+}
+
+export function BehaviorConfig({
+    delayMs,
+    onDelayMsChange,
+    failureRate,
+    onFailureRateChange,
+    responseCount,
+    onResponseCountChange,
+}: BehaviorConfigProps) {
+    return (
+        <>
+            <Separator />
+
+            <div className="grid grid-cols-2 gap-4 md:grid-cols-3">
+                <div className="space-y-1.5">
+                    <FieldLabel tooltip="Simulated network latency before this endpoint responds.">
+                        Delay
+                    </FieldLabel>
+                    <div className="relative">
+                        <Input
+                            id="delay-ms"
+                            type="number"
+                            min={0}
+                            value={delayMs}
+                            onChange={(e) => onDelayMsChange(Number(e.target.value))}
+                            className="h-10 border-0 bg-muted pr-10 font-mono shadow-none focus-visible:ring-2 focus-visible:ring-ring"
+                        />
+                        <span className="pointer-events-none absolute inset-y-0 right-3 flex items-center text-xs text-muted-foreground">
+                            ms
+                        </span>
+                    </div>
+                </div>
+
+                <div className="space-y-1.5">
+                    <FieldLabel tooltip="Probability that a request to this endpoint returns an error response.">
+                        Failure rate
+                    </FieldLabel>
+                    <div className="flex h-10 items-center gap-3 rounded-md bg-muted px-3">
+                        <Slider
+                            value={[failureRate]}
+                            min={0}
+                            max={1}
+                            step={0.1}
+                            onValueChange={(value) =>
+                                onFailureRateChange(Array.isArray(value) ? value[0]! : value)
+                            }
+                            className="flex-1"
+                        />
+                        <span className="w-7 shrink-0 text-right font-mono text-xs tabular-nums">
+                            {failureRate.toFixed(1)}
+                        </span>
+                    </div>
+                </div>
+
+                <div className="col-span-2 space-y-1.5 md:col-span-1">
+                    <FieldLabel tooltip="Number of mock items generated per response.">
+                        Response count
+                    </FieldLabel>
+                    <Input
+                        id="response-count"
+                        type="number"
+                        min={1}
+                        value={responseCount}
+                        onChange={(e) => onResponseCountChange(Number(e.target.value))}
+                        placeholder="10"
+                        className="h-10 border-0 bg-muted font-mono shadow-none focus-visible:ring-2 focus-visible:ring-ring"
+                    />
+                </div>
+            </div>
+        </>
+    );
+}
diff --git a/src/modules/workspace/ui/components/dashboard/schemaBuilder/field-label.tsx b/src/modules/workspace/ui/components/dashboard/schemaBuilder/field-label.tsx
new file mode 100644
index 0000000..a73d880
--- /dev/null
+++ b/src/modules/workspace/ui/components/dashboard/schemaBuilder/field-label.tsx
@@ -0,0 +1,26 @@
+import React from "react";
+import { Info } from "lucide-react";
+import { Label } from "~/components/ui/label";
+import { Tooltip, TooltipContent, TooltipTrigger } from "~/components/ui/tooltip";
+
+export function FieldLabel({ children, tooltip }: { children: React.ReactNode; tooltip: string }) {
+    return (
+        <div className="flex items-center gap-1.5">
+            <Label className="text-xs font-semibold text-foreground uppercase tracking-wide">
+                {children}
+            </Label>
+            <Tooltip>
+                <TooltipTrigger
+                    render={
+                        <span className="inline-flex cursor-pointer text-muted-foreground/60 hover:text-primary transition-colors">
+                            <Info className="h-3 w-3" />
+                        </span>
+                    }
+                />
+                <TooltipContent side="top" className="max-w-56 text-xs">
+                    {tooltip}
+                </TooltipContent>
+            </Tooltip>
+        </div>
+    );
+}
diff --git a/src/modules/workspace/ui/components/dashboard/schemaBuilder/index.ts b/src/modules/workspace/ui/components/dashboard/schemaBuilder/index.ts
new file mode 100644
index 0000000..f1424e0
--- /dev/null
+++ b/src/modules/workspace/ui/components/dashboard/schemaBuilder/index.ts
@@ -0,0 +1 @@
+export { SchemaBuilder } from "./schema-builder";
diff --git a/src/modules/workspace/ui/components/dashboard/schemaBuilder/raw-json-editor.tsx b/src/modules/workspace/ui/components/dashboard/schemaBuilder/raw-json-editor.tsx
new file mode 100644
index 0000000..9f81f6b
--- /dev/null
+++ b/src/modules/workspace/ui/components/dashboard/schemaBuilder/raw-json-editor.tsx
@@ -0,0 +1,203 @@
+import { toast } from "sonner";
+import { Button } from "~/components/ui/button";
+import { fieldsFromSchema } from "~/lib/faker-options";
+import type { SchemaField } from "~/lib/faker-options";
+
+interface RawJsonEditorProps {
+    value: string;
+    onChange: (value: string) => void;
+    error: string | null;
+    onErrorChange: (error: string | null) => void;
+    onFieldsSync: (fields: SchemaField[]) => void;
+    onSubmit: () => void;
+    isPending: boolean;
+    hasJsonError: boolean;
+    hasExistingSchema: boolean;
+}
+
+export function RawJsonEditor({
+    value,
+    onChange,
+    error,
+    onErrorChange,
+    onFieldsSync,
+    onSubmit,
+    isPending,
+    hasJsonError,
+    hasExistingSchema,
+}: RawJsonEditorProps) {
+    function handleChange(val: string) {
+        onChange(val);
+        try {
+            const parsed = JSON.parse(val);
+            onFieldsSync(fieldsFromSchema(parsed));
+            onErrorChange(null);
+        } catch (err: any) {
+            onErrorChange(err.message || "Invalid JSON syntax");
+        }
+    }
+
+    function handleFormat() {
+        try {
+            const parsed = JSON.parse(value);
+            const formatted = JSON.stringify(parsed, null, 2);
+            onChange(formatted);
+            onErrorChange(null);
+            toast.success("JSON formatted");
+        } catch {
+            toast.error("Cannot format: invalid JSON syntax");
+        }
+    }
+
+    function handleKeyDown(e: React.KeyboardEvent<HTMLTextAreaElement>) {
+        const target = e.currentTarget;
+        const { selectionStart, selectionEnd, value: val } = target;
+
+        // Convert single quote to double quote
+        if (e.key === "'") {
+            e.preventDefault();
+            const before = val.substring(0, selectionStart);
+            const after = val.substring(selectionEnd);
+            const nextVal = `${before}"${after}`;
+            onChange(nextVal);
+            setTimeout(() => {
+                target.selectionStart = target.selectionEnd = selectionStart + 1;
+            }, 0);
+            return;
+        }
+
+        // Auto-pair double quotes
+        if (e.key === '"') {
+            if (selectionStart === selectionEnd && val[selectionStart] === '"') {
+                e.preventDefault();
+                target.selectionStart = target.selectionEnd = selectionStart + 1;
+                return;
+            }
+            e.preventDefault();
+            const before = val.substring(0, selectionStart);
+            const selected = val.substring(selectionStart, selectionEnd);
+            const after = val.substring(selectionEnd);
+            const nextVal = `${before}"${selected}"${after}`;
+            onChange(nextVal);
+            setTimeout(() => {
+                target.selectionStart = selectionStart + 1;
+                target.selectionEnd = selectionStart + 1 + selected.length;
+            }, 0);
+            return;
+        }
+
+        // Auto-pair braces and brackets
+        if (e.key === "{" || e.key === "[") {
+            const closing = e.key === "{" ? "}" : "]";
+            e.preventDefault();
+            const before = val.substring(0, selectionStart);
+            const selected = val.substring(selectionStart, selectionEnd);
+            const after = val.substring(selectionEnd);
+            const nextVal = `${before}${e.key}${selected}${closing}${after}`;
+            onChange(nextVal);
+            setTimeout(() => {
+                target.selectionStart = selectionStart + 1;
+                target.selectionEnd = selectionStart + 1 + selected.length;
+            }, 0);
+            return;
+        }
+
+        // Tab key -> 2 spaces
+        if (e.key === "Tab") {
+            e.preventDefault();
+            const before = val.substring(0, selectionStart);
+            const after = val.substring(selectionEnd);
+            const nextVal = `${before}  ${after}`;
+            onChange(nextVal);
+            setTimeout(() => {
+                target.selectionStart = target.selectionEnd = selectionStart + 2;
+            }, 0);
+            return;
+        }
+
+        // Enter key -> smart auto-indent
+        if (e.key === "Enter") {
+            e.preventDefault();
+            const lineStart = val.lastIndexOf("\n", selectionStart - 1) + 1;
+            const currentLine = val.substring(lineStart, selectionStart);
+            const matchIndent = currentLine.match(/^(\s*)/);
+            let indent = matchIndent ? (matchIndent[1] ?? "") : "";
+
+            const charBeforeCursor = val[selectionStart - 1];
+            const charAfterCursor = val[selectionEnd];
+
+            if (charBeforeCursor === "{" || charBeforeCursor === "[") {
+                indent += "  ";
+            }
+
+            if (
+                (charBeforeCursor === "{" && charAfterCursor === "}") ||
+                (charBeforeCursor === "[" && charAfterCursor === "]")
+            ) {
+                const outerIndent = (indent ?? "").slice(0, Math.max(0, (indent ?? "").length - 2));
+                const before = val.substring(0, selectionStart);
+                const after = val.substring(selectionEnd);
+                const nextVal = `${before}\n${indent ?? ""}\n${outerIndent}${after}`;
+                onChange(nextVal);
+                setTimeout(() => {
+                    target.selectionStart = target.selectionEnd =
+                        selectionStart + 1 + (indent ?? "").length;
+                }, 0);
+                return;
+            }
+
+            const before = val.substring(0, selectionStart);
+            const after = val.substring(selectionEnd);
+            const nextVal = `${before}\n${indent ?? ""}${after}`;
+            onChange(nextVal);
+            setTimeout(() => {
+                target.selectionStart = target.selectionEnd =
+                    selectionStart + 1 + (indent ?? "").length;
+            }, 0);
+            return;
+        }
+    }
+
+    return (
+        <div className="space-y-2">
+            <div className="flex items-center justify-between">
+                <span className="text-[11px] font-mono text-muted-foreground">
+                    JSON Editor (Tab / Enter auto-indent, &quot; auto-pairs)
+                </span>
+                <Button
+                    type="button"
+                    variant="outline"
+                    size="sm"
+                    onClick={handleFormat}
+                    className="h-7 text-xs font-mono gap-1"
+                >
+                    Format JSON
+                </Button>
+            </div>
+            <textarea
+                value={value}
+                onChange={(e) => handleChange(e.target.value)}
+                onKeyDown={handleKeyDown}
+                placeholder={`{\n  "id": "$faker.string.uuid",\n  "user": {\n    "name": "$faker.person.fullName"\n  }\n}`}
+                rows={10}
+                className="w-full rounded-md border border-input bg-zinc-950 text-zinc-100 p-3 font-mono text-xs shadow-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring leading-relaxed"
+            />
+            {error && <p className="text-xs font-mono text-destructive">JSON Error: {error}</p>}
+            <div className="flex justify-end pt-1">
+                <Button
+                    type="button"
+                    onClick={onSubmit}
+                    disabled={isPending || hasJsonError}
+                    size="sm"
+                    className="h-9 gap-2 font-semibold text-primary-foreground"
+                >
+                    {isPending
+                        ? "Saving..."
+                        : hasExistingSchema
+                          ? "Update schema"
+                          : "Generate schema"}
+                </Button>
+            </div>
+        </div>
+    );
+}
diff --git a/src/modules/workspace/ui/components/dashboard/schemaBuilder/schema-builder.tsx b/src/modules/workspace/ui/components/dashboard/schemaBuilder/schema-builder.tsx
new file mode 100644
index 0000000..e004b4a
--- /dev/null
+++ b/src/modules/workspace/ui/components/dashboard/schemaBuilder/schema-builder.tsx
@@ -0,0 +1,417 @@
+"use client";
+
+import React, { useEffect, useMemo, useState } from "react";
+import { MonitorPlay, SlidersHorizontal, Shield } from "lucide-react";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/components/ui/card";
+import { Input } from "~/components/ui/input";
+import { Label } from "~/components/ui/label";
+import { Separator } from "~/components/ui/separator";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "~/components/ui/tabs";
+import { TooltipProvider } from "~/components/ui/tooltip";
+import { EndpointAuthForm } from "../endpoint-auth-form";
+import { useUpdateEndpoint } from "~/hooks/use-endpoints";
+import { resolveResponseData } from "~/lib/schema-resolver";
+import { buildSchema, fieldsFromSchema } from "~/lib/faker-options";
+import type { HttpMethod } from "../../sidebar/types";
+import type { SchemaField } from "~/lib/faker-options";
+import { BehaviorConfig } from "./behavior-config";
+import { SchemaFieldsEditor } from "./schema-fields-editor";
+import { RawJsonEditor } from "./raw-json-editor";
+
+interface SchemaBuilderProps {
+    endpoint: {
+        id: string;
+        projectId?: string;
+        name: string;
+        method: HttpMethod;
+        path: string;
+        statusCode: number;
+        delayMs: number;
+        failureRate: number;
+        responseSchema: unknown;
+        responseCount: number;
+    };
+    projectId?: string;
+    initialTab?: "schema" | "auth";
+    onSuccess?: () => void;
+}
+
+export function SchemaBuilder({
+    endpoint,
+    projectId,
+    initialTab = "schema",
+    onSuccess,
+}: SchemaBuilderProps) {
+    const [activeTab, setActiveTab] = useState<"schema" | "auth">(initialTab);
+    const [resourceName, setResourceName] = useState(endpoint.name);
+    const [nameError, setNameError] = useState<string | null>(null);
+    const [schemaPath, setSchemaPath] = useState(endpoint.path);
+    const [pathError, setPathError] = useState<string | null>(null);
+    const [httpMethod, setHttpMethod] = useState<HttpMethod>(endpoint.method);
+    const [delayMs, setDelayMs] = useState(endpoint.delayMs);
+    const [failureRate, setFailureRate] = useState(endpoint.failureRate);
+    const [responseCount, setResponseCount] = useState(endpoint.responseCount);
+    const [fields, setFields] = useState<SchemaField[]>([
+        { id: crypto.randomUUID(), fieldName: "", dataType: "$faker.string.uuid" },
+    ]);
+    const [editorMode, setEditorMode] = useState<"flat" | "raw">("flat");
+    const [rawSchemaText, setRawSchemaText] = useState<string>("");
+    const [jsonError, setJsonError] = useState<string | null>(null);
+
+    const updateEndpoint = useUpdateEndpoint();
+
+    useEffect(() => {
+        setActiveTab(initialTab);
+    }, [initialTab]);
+
+    useEffect(() => {
+        setResourceName(endpoint.name);
+        setNameError(null);
+        setSchemaPath(endpoint.path);
+        setPathError(null);
+        setHttpMethod(endpoint.method);
+        setDelayMs(endpoint.delayMs);
+        setFailureRate(endpoint.failureRate);
+        setResponseCount(endpoint.responseCount);
+        setFields(fieldsFromSchema(endpoint.responseSchema));
+        setRawSchemaText(
+            endpoint.responseSchema
+                ? JSON.stringify(endpoint.responseSchema, null, 2)
+                : JSON.stringify({ id: "$faker.string.uuid" }, null, 2),
+        );
+        setJsonError(null);
+    }, [endpoint]);
+
+    const addField = () => {
+        setFields([
+            ...fields,
+            { id: crypto.randomUUID(), fieldName: "", dataType: "$faker.string.uuid" },
+        ]);
+    };
+
+    const removeField = (id: string) => {
+        if (fields.length === 1) return;
+        setFields(fields.filter((field) => field.id !== id));
+    };
+
+    const updateField = (id: string, key: keyof SchemaField, value: string) => {
+        setFields(fields.map((field) => (field.id === id ? { ...field, [key]: value } : field)));
+    };
+
+    const seed = projectId || endpoint.projectId || endpoint.id;
+
+    const previewData = useMemo(() => {
+        let formattedSchema: unknown;
+        if (editorMode === "raw") {
+            try {
+                formattedSchema = JSON.parse(rawSchemaText);
+            } catch {
+                formattedSchema = buildSchema(fields);
+            }
+        } else {
+            formattedSchema = buildSchema(fields);
+        }
+        return resolveResponseData(formattedSchema, responseCount, seed);
+    }, [fields, editorMode, rawSchemaText, responseCount, seed]);
+
+    const hasExistingSchema = useMemo(() => {
+        if (
+            !endpoint.responseSchema ||
+            typeof endpoint.responseSchema !== "object" ||
+            Array.isArray(endpoint.responseSchema)
+        ) {
+            return false;
+        }
+        return Object.keys(endpoint.responseSchema).length > 0;
+    }, [endpoint.responseSchema]);
+
+    const handleSubmit = () => {
+        let hasError = false;
+
+        if (!resourceName.trim()) {
+            setNameError("Resource name is required.");
+            hasError = true;
+        } else {
+            setNameError(null);
+        }
+
+        const trimmedPath = schemaPath.trim();
+        if (!trimmedPath) {
+            setPathError("Path is required.");
+            hasError = true;
+        } else if (!trimmedPath.startsWith("/")) {
+            setPathError("Path must start with /");
+            hasError = true;
+        } else {
+            setPathError(null);
+        }
+
+        if (hasError) return;
+
+        let formattedSchema: unknown;
+        if (editorMode === "raw") {
+            try {
+                formattedSchema = JSON.parse(rawSchemaText);
+            } catch (err: any) {
+                setJsonError(err.message || "Invalid JSON syntax");
+                return;
+            }
+        } else {
+            formattedSchema = buildSchema(fields);
+        }
+
+        updateEndpoint.mutate(
+            {
+                id: endpoint.id,
+                name: resourceName,
+                path: trimmedPath,
+                method: httpMethod,
+                responseSchema: formattedSchema as Record<string, unknown>,
+                delayMs,
+                failureRate,
+                responseCount,
+            },
+            {
+                onSuccess: () => {
+                    if (onSuccess) onSuccess();
+                },
+            },
+        );
+    };
+
+    return (
+        <TooltipProvider delay={150}>
+            <Tabs
+                value={activeTab}
+                onValueChange={(v) => setActiveTab(v as "schema" | "auth")}
+                orientation="horizontal"
+                className="w-full flex-1 flex flex-col gap-0"
+            >
+                <div className="w-full px-6 pt-5 pb-3 border-b bg-muted/30">
+                    <TabsList className="grid w-full grid-cols-2 h-10">
+                        <TabsTrigger
+                            value="schema"
+                            className="gap-2 text-xs font-semibold uppercase tracking-wider"
+                        >
+                            <SlidersHorizontal className="h-4 w-4" /> Schema &amp; Behavior
+                        </TabsTrigger>
+                        <TabsTrigger
+                            value="auth"
+                            className="gap-2 text-xs font-semibold uppercase tracking-wider"
+                        >
+                            <Shield className="h-4 w-4 text-emerald-500" /> Authentication
+                        </TabsTrigger>
+                    </TabsList>
+                </div>
+
+                <TabsContent value="schema" className="flex-1 flex flex-col">
+                    <Card className="gap-6 border-none py-6 px-4 shadow-none rounded-none h-full flex flex-col justify-between">
+                        <CardHeader className="gap-1 px-0">
+                            <CardTitle className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+                                Configure resource
+                            </CardTitle>
+                            <CardDescription className="font-mono text-xs">
+                                Define the endpoint&apos;s identity, behavior, and response shape.
+                            </CardDescription>
+                        </CardHeader>
+
+                        <CardContent className="space-y-6 px-0">
+                            {/* Resource name */}
+                            <div className="space-y-1.5">
+                                <Label htmlFor="resource-name" className="text-sm font-semibold">
+                                    Resource name
+                                </Label>
+                                <Input
+                                    id="resource-name"
+                                    placeholder="users, comments, articles..."
+                                    value={resourceName}
+                                    onChange={(e) => {
+                                        setResourceName(e.target.value);
+                                        if (nameError) setNameError(null);
+                                    }}
+                                    aria-invalid={!!nameError}
+                                    className="h-11 border-0 bg-muted font-mono text-base shadow-none focus-visible:ring-2 focus-visible:ring-ring aria-invalid:ring-2 aria-invalid:ring-destructive/50"
+                                />
+                                {nameError && (
+                                    <p className="text-xs font-medium text-destructive">
+                                        {nameError}
+                                    </p>
+                                )}
+                            </div>
+
+                            {/* Schema path + HTTP method */}
+                            <div className="space-y-1.5">
+                                <Label className="text-sm font-semibold">Schema path</Label>
+                                <div className="flex items-stretch gap-2">
+                                    <div className="flex rounded-md bg-muted p-0.5 shrink-0">
+                                        {(
+                                            [
+                                                "GET",
+                                                "POST",
+                                                "PUT",
+                                                "PATCH",
+                                                "DELETE",
+                                            ] as HttpMethod[]
+                                        ).map((m) => (
+                                            <button
+                                                key={m}
+                                                type="button"
+                                                onClick={() => setHttpMethod(m)}
+                                                className={`px-2 py-1 rounded-sm text-[11px] font-bold tracking-wide transition-colors ${
+                                                    httpMethod === m
+                                                        ? m === "GET"
+                                                            ? "bg-emerald-500/20 text-emerald-400 shadow-xs"
+                                                            : m === "POST"
+                                                              ? "bg-blue-500/20 text-blue-400 shadow-xs"
+                                                              : m === "PUT"
+                                                                ? "bg-amber-500/20 text-amber-400 shadow-xs"
+                                                                : m === "PATCH"
+                                                                  ? "bg-purple-500/20 text-purple-400 shadow-xs"
+                                                                  : "bg-rose-500/20 text-rose-400 shadow-xs"
+                                                        : "text-muted-foreground hover:text-foreground"
+                                                }`}
+                                            >
+                                                {m}
+                                            </button>
+                                        ))}
+                                    </div>
+                                    <div className="relative flex-1">
+                                        <Input
+                                            id="schema-path"
+                                            placeholder="/users/:id"
+                                            value={schemaPath}
+                                            onChange={(e) => {
+                                                setSchemaPath(e.target.value);
+                                                if (pathError) setPathError(null);
+                                            }}
+                                            aria-invalid={!!pathError}
+                                            className="h-11 border-0 bg-muted font-mono text-sm shadow-none focus-visible:ring-2 focus-visible:ring-ring aria-invalid:ring-2 aria-invalid:ring-destructive/50"
+                                        />
+                                    </div>
+                                </div>
+                                {pathError && (
+                                    <p className="text-xs font-medium text-destructive">
+                                        {pathError}
+                                    </p>
+                                )}
+                            </div>
+
+                            <Separator />
+
+                            <BehaviorConfig
+                                delayMs={delayMs}
+                                onDelayMsChange={setDelayMs}
+                                failureRate={failureRate}
+                                onFailureRateChange={setFailureRate}
+                                responseCount={responseCount}
+                                onResponseCountChange={setResponseCount}
+                            />
+
+                            <Separator />
+
+                            {/* Schema fields editor */}
+                            <div className="space-y-3">
+                                <div className="flex items-center justify-between">
+                                    <div className="flex items-center gap-1.5">
+                                        <Label className="text-xs font-semibold text-foreground uppercase tracking-wide">
+                                            Fields schema
+                                        </Label>
+                                    </div>
+                                    <div className="flex items-center gap-2">
+                                        <div className="flex rounded-md bg-muted p-0.5 text-xs">
+                                            <button
+                                                type="button"
+                                                onClick={() => {
+                                                    if (editorMode === "raw") {
+                                                        try {
+                                                            const parsed =
+                                                                JSON.parse(rawSchemaText);
+                                                            setFields(fieldsFromSchema(parsed));
+                                                            setJsonError(null);
+                                                        } catch {
+                                                            // Keep current fields if invalid
+                                                        }
+                                                    }
+                                                    setEditorMode("flat");
+                                                }}
+                                                className={`px-2.5 py-1 rounded-sm font-medium transition-colors ${
+                                                    editorMode === "flat"
+                                                        ? "bg-background text-foreground shadow-xs font-semibold"
+                                                        : "text-muted-foreground hover:text-foreground"
+                                                }`}
+                                            >
+                                                Flat Columns
+                                            </button>
+                                            <button
+                                                type="button"
+                                                onClick={() => {
+                                                    if (editorMode === "flat") {
+                                                        const current = buildSchema(fields);
+                                                        setRawSchemaText(
+                                                            JSON.stringify(current, null, 2),
+                                                        );
+                                                    }
+                                                    setEditorMode("raw");
+                                                }}
+                                                className={`px-2.5 py-1 rounded-sm font-medium transition-colors ${
+                                                    editorMode === "raw"
+                                                        ? "bg-background text-foreground shadow-xs font-semibold"
+                                                        : "text-muted-foreground hover:text-foreground"
+                                                }`}
+                                            >
+                                                Nested Raw JSON
+                                            </button>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                {editorMode === "flat" ? (
+                                    <SchemaFieldsEditor
+                                        fields={fields}
+                                        onAddField={addField}
+                                        onRemoveField={removeField}
+                                        onUpdateField={updateField}
+                                        onSubmit={handleSubmit}
+                                        isPending={updateEndpoint.isPending}
+                                        hasExistingSchema={hasExistingSchema}
+                                    />
+                                ) : (
+                                    <RawJsonEditor
+                                        value={rawSchemaText}
+                                        onChange={setRawSchemaText}
+                                        error={jsonError}
+                                        onErrorChange={setJsonError}
+                                        onFieldsSync={setFields}
+                                        onSubmit={handleSubmit}
+                                        isPending={updateEndpoint.isPending}
+                                        hasJsonError={!!jsonError}
+                                        hasExistingSchema={hasExistingSchema}
+                                    />
+                                )}
+                            </div>
+
+                            <Separator />
+
+                            {/* Live sample data preview */}
+                            <div className="overflow-hidden rounded-lg border border-border">
+                                <div className="flex items-center gap-1.5 border-b bg-muted/40 px-3 py-2">
+                                    <MonitorPlay className="h-3 w-3 text-primary" />
+                                    <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+                                        Live preview
+                                    </span>
+                                </div>
+                                <pre className="bg-zinc-950 p-3 font-mono text-[11px] leading-relaxed text-zinc-100 overflow-x-auto">
+                                    {JSON.stringify(previewData, null, 2)}
+                                </pre>
+                            </div>
+                        </CardContent>
+                    </Card>
+                </TabsContent>
+
+                <TabsContent value="auth" className="flex-1 flex flex-col">
+                    <EndpointAuthForm endpointId={endpoint.id} onSuccess={onSuccess} />
+                </TabsContent>
+            </Tabs>
+        </TooltipProvider>
+    );
+}
diff --git a/src/modules/workspace/ui/components/dashboard/schemaBuilder/schema-fields-editor.tsx b/src/modules/workspace/ui/components/dashboard/schemaBuilder/schema-fields-editor.tsx
new file mode 100644
index 0000000..aca08ea
--- /dev/null
+++ b/src/modules/workspace/ui/components/dashboard/schemaBuilder/schema-fields-editor.tsx
@@ -0,0 +1,136 @@
+import { Trash2, Plus } from "lucide-react";
+import { Input } from "~/components/ui/input";
+import { Button } from "~/components/ui/button";
+import { Tooltip, TooltipContent, TooltipTrigger } from "~/components/ui/tooltip";
+import {
+    Select,
+    SelectContent,
+    SelectGroup,
+    SelectItem,
+    SelectLabel,
+    SelectTrigger,
+    SelectValue,
+} from "~/components/ui/select";
+import { FAKER_OPTIONS, type SchemaField } from "~/lib/faker-options";
+import { FieldLabel } from "./field-label";
+
+interface SchemaFieldsEditorProps {
+    fields: SchemaField[];
+    onAddField: () => void;
+    onRemoveField: (id: string) => void;
+    onUpdateField: (id: string, key: keyof SchemaField, value: string) => void;
+    onSubmit: () => void;
+    isPending: boolean;
+    hasExistingSchema: boolean;
+}
+
+export function SchemaFieldsEditor({
+    fields,
+    onAddField,
+    onRemoveField,
+    onUpdateField,
+    onSubmit,
+    isPending,
+    hasExistingSchema,
+}: SchemaFieldsEditorProps) {
+    return (
+        <div className="space-y-2">
+            {fields.length > 0 && (
+                <div className="hidden grid-cols-[1fr_1fr_2.5rem] gap-3 px-1 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground sm:grid">
+                    <div>Field name</div>
+                    <div>Data type</div>
+                    <div />
+                </div>
+            )}
+
+            <div className="space-y-2">
+                {fields.map((field) => (
+                    <div
+                        key={field.id}
+                        className="grid grid-cols-[1fr_1fr_2.5rem] items-center gap-2 rounded-lg border border-transparent p-1 transition-colors hover:border-border sm:gap-3"
+                    >
+                        <Input
+                            type="text"
+                            placeholder="e.g. user_id, created_at"
+                            value={field.fieldName}
+                            onChange={(e) => onUpdateField(field.id, "fieldName", e.target.value)}
+                            className="h-10 border-0 bg-muted font-mono text-sm shadow-none focus-visible:ring-2 focus-visible:ring-ring"
+                        />
+
+                        <Select
+                            value={field.dataType}
+                            onValueChange={(value) => {
+                                if (value) onUpdateField(field.id, "dataType", value);
+                            }}
+                        >
+                            <SelectTrigger className="h-10 w-full border-0 bg-muted font-mono text-sm shadow-none focus-visible:ring-2 focus-visible:ring-ring">
+                                <SelectValue placeholder="Select type" />
+                            </SelectTrigger>
+                            <SelectContent>
+                                {FAKER_OPTIONS.map((group) => (
+                                    <SelectGroup key={group.label}>
+                                        <SelectLabel>{group.label}</SelectLabel>
+                                        {group.options.map((option) => (
+                                            <SelectItem key={option.value} value={option.value}>
+                                                {option.label}
+                                            </SelectItem>
+                                        ))}
+                                    </SelectGroup>
+                                ))}
+                            </SelectContent>
+                        </Select>
+
+                        <Tooltip>
+                            <TooltipTrigger
+                                render={
+                                    <Button
+                                        type="button"
+                                        variant="ghost"
+                                        size="icon"
+                                        disabled={fields.length === 1}
+                                        onClick={() => onRemoveField(field.id)}
+                                        className="h-10 w-10 shrink-0 text-muted-foreground hover:bg-destructive/10 hover:text-destructive disabled:opacity-30"
+                                    >
+                                        <Trash2 className="h-4 w-4" />
+                                    </Button>
+                                }
+                            />
+                            <TooltipContent side="left" className="text-xs">
+                                {fields.length === 1
+                                    ? "At least one field is required"
+                                    : "Remove field"}
+                            </TooltipContent>
+                        </Tooltip>
+                    </div>
+                ))}
+            </div>
+
+            <div className="flex items-center justify-between mt-1">
+                <Button
+                    type="button"
+                    variant="secondary"
+                    onClick={onAddField}
+                    size="sm"
+                    className="h-9 gap-1.5 border-dashed border-primary text-muted-foreground hover:text-primary hover:color-primary"
+                >
+                    <Plus className="h-3.5 w-3.5" />
+                    <FieldLabel tooltip="Add a new field to the schema.">Add field</FieldLabel>
+                </Button>
+
+                <Button
+                    type="button"
+                    onClick={onSubmit}
+                    disabled={isPending}
+                    size="sm"
+                    className="h-9 gap-2 font-semibold text-primary-foreground"
+                >
+                    {isPending
+                        ? "Saving..."
+                        : hasExistingSchema
+                          ? "Update schema"
+                          : "Generate schema"}
+                </Button>
+            </div>
+        </div>
+    );
+}
diff --git a/src/modules/workspace/ui/components/dashboard/schemaPreview/generate-fetch-snippet.ts b/src/modules/workspace/ui/components/dashboard/schemaPreview/generate-fetch-snippet.ts
new file mode 100644
index 0000000..5a0e9b0
--- /dev/null
+++ b/src/modules/workspace/ui/components/dashboard/schemaPreview/generate-fetch-snippet.ts
@@ -0,0 +1,58 @@
+import type { HttpMethod } from "../../sidebar/types";
+
+type FetchTab = "curl" | "js" | "tsx" | "python" | "go" | "rust" | "php";
+
+export function generateFetchSnippet(
+    tab: FetchTab,
+    url: string,
+    method: HttpMethod,
+    requiresAuth: boolean,
+    token?: string | null,
+): string {
+    const tokenVal = token || "YOUR_TOKEN_HERE";
+
+    switch (tab) {
+        case "curl": {
+            const parts = [`curl -X ${method} "${url}"`];
+            parts.push('-H "Accept: application/json"');
+            if (requiresAuth) {
+                parts.push(`-H "Authorization: Bearer ${tokenVal}"`);
+            }
+            return parts.join(" \\\n  ");
+        }
+        case "js": {
+            const authHeaderJs = requiresAuth
+                ? `,\n    headers: {\n      "Authorization": "Bearer ${tokenVal}"\n    }`
+                : "";
+            return `fetch("${url}", {\n  method: "${method}"${authHeaderJs}\n})\n  .then((res) => res.json())\n  .then((data) => console.log(data))\n  .catch((err) => console.error(err));`;
+        }
+        case "tsx": {
+            const authHeaderTs = requiresAuth
+                ? `,\n      headers: {\n        "Authorization": "Bearer ${tokenVal}"\n      }`
+                : "";
+            return `async function fetchData<T = unknown>(): Promise<T> {\n  const response = await fetch("${url}", {\n    method: "${method}"${authHeaderTs}\n  });\n\n  if (!response.ok) {\n    throw new Error(\`HTTP error! status: \${response.status}\`);\n  }\n\n  return response.json() as Promise<T>;}`;
+        }
+        case "python": {
+            const headersObj = requiresAuth
+                ? `,\n    headers={\n        "Authorization": "Bearer ${tokenVal}"\n    }`
+                : "";
+            return `import requests\n\nresponse = requests.${method.toLowerCase()}(\n    "${url}"${headersObj}\n)\n\nprint(response.json())`;
+        }
+        case "go": {
+            const authGo = requiresAuth
+                ? `\n\treq.Header.Add("Authorization", "Bearer ${tokenVal}")`
+                : "";
+            return `package main\n\nimport (\n\t"fmt"\n\t"io"\n\t"net/http"\n)\n\nfunc main() {\n\tclient := &http.Client{}\n\treq, err := http.NewRequest("${method}", "${url}", nil)${authGo}\n\tif err != nil {\n\t\tpanic(err)\n\t}\n\n\tresp, err := client.Do(req)\n\tif err != nil {\n\t\tpanic(err)\n\t}\n\tdefer resp.Body.Close()\n\n\tbody, _ := io.ReadAll(resp.Body)\n\tfmt.Println(string(body))\n}`;
+        }
+        case "rust": {
+            const authCall = requiresAuth ? `\n        .bearer_auth("${tokenVal}")` : "";
+            return `use reqwest::Error;\n\n#[tokio::main]\nasync fn main() -> Result<(), Error> {\n    let client = reqwest::Client::new();\n    let response = client\n        .${method.toLowerCase()}("${url}")${authCall}\n        .header("Accept", "application/json")\n        .send()\n        .await?;\n\n    let body = response.text().await?;\n    println!("{}", body);\n    Ok(())\n}`;
+        }
+        case "php": {
+            const authPhp = requiresAuth
+                ? `\n  "header" => "Authorization: Bearer ${tokenVal}\\r\\n"`
+                : "";
+            return `<?php\n$opts = [\n  "http" => [\n    "method" => "${method}"${authPhp}\n  ]\n];\n$context = stream_context_create($opts);\n$result = file_get_contents("${url}", false, $context);\necho $result;\n?>`;
+        }
+    }
+}
diff --git a/src/modules/workspace/ui/components/dashboard/schemaPreview/index.ts b/src/modules/workspace/ui/components/dashboard/schemaPreview/index.ts
new file mode 100644
index 0000000..57b2024
--- /dev/null
+++ b/src/modules/workspace/ui/components/dashboard/schemaPreview/index.ts
@@ -0,0 +1,2 @@
+export { SchemaPreview } from "./schema-preview";
+export { SchemaPreviewSkeleton } from "./schema-preview-skeleton";
diff --git a/src/modules/workspace/ui/components/dashboard/schemaPreview/schema-preview-skeleton.tsx b/src/modules/workspace/ui/components/dashboard/schemaPreview/schema-preview-skeleton.tsx
new file mode 100644
index 0000000..f6fc9c3
--- /dev/null
+++ b/src/modules/workspace/ui/components/dashboard/schemaPreview/schema-preview-skeleton.tsx
@@ -0,0 +1,85 @@
+import { Card, CardContent, CardHeader } from "~/components/ui/card";
+
+function MockCodeBlock() {
+    return (
+        <div className="rounded-lg border border-zinc-200 dark:border-zinc-800 bg-zinc-950 p-4 font-mono text-sm space-y-2">
+            <div className="flex items-center gap-2">
+                <div className="w-4 h-4 rounded bg-zinc-800 animate-pulse" />
+                <div className="w-24 h-4 rounded bg-zinc-800 animate-pulse" />
+            </div>
+            <div className="pl-6 space-y-2">
+                <div className="w-1/2 h-4 rounded bg-zinc-800 animate-pulse" />
+                <div className="w-3/4 h-4 rounded bg-zinc-800 animate-pulse" />
+                <div className="w-2/3 h-4 rounded bg-zinc-800 animate-pulse" />
+                <div className="w-1/3 h-4 rounded bg-zinc-800 animate-pulse" />
+            </div>
+            <div className="w-8 h-4 rounded bg-zinc-800 animate-pulse" />
+        </div>
+    );
+}
+
+export function SchemaPreviewSkeleton() {
+    return (
+        <div className="w-full mx-auto px-6 pb-6 h-full">
+            <Card className="border shadow-lg bg-muted/50">
+                <CardHeader className="flex flex-row items-center justify-between">
+                    <div className="flex items-center gap-2">
+                        <div className="w-5 h-5 rounded bg-zinc-300 dark:bg-zinc-700 animate-pulse" />
+                        <div className="w-36 h-6 rounded bg-zinc-300 dark:bg-zinc-700 animate-pulse" />
+                    </div>
+                    <div className="w-24 h-8 rounded bg-zinc-300 dark:bg-zinc-700 animate-pulse" />
+                </CardHeader>
+
+                <CardContent className="space-y-6">
+                    <div className="rounded-lg border border-zinc-200 dark:border-zinc-800 overflow-hidden">
+                        <div className="grid grid-cols-2 bg-zinc-200 dark:bg-zinc-900/50 px-4 py-2">
+                            <div className="w-12 h-3 rounded bg-zinc-300 dark:bg-zinc-700 animate-pulse" />
+                            <div className="w-12 h-3 rounded bg-zinc-300 dark:bg-zinc-700 animate-pulse" />
+                        </div>
+                        {[1, 2, 3].map((i) => (
+                            <div
+                                key={i}
+                                className="grid grid-cols-2 px-4 py-3 border-t border-zinc-150 dark:border-zinc-800/50"
+                            >
+                                <div className="w-24 h-4 rounded bg-zinc-200 dark:bg-zinc-800 animate-pulse" />
+                                <div className="w-16 h-4 rounded bg-zinc-200 dark:bg-zinc-800 animate-pulse" />
+                            </div>
+                        ))}
+                    </div>
+
+                    <div className="flex gap-3">
+                        <div className="w-20 h-6 rounded bg-zinc-200 dark:bg-zinc-800 animate-pulse" />
+                        <div className="w-28 h-6 rounded bg-zinc-200 dark:bg-zinc-800 animate-pulse" />
+                        <div className="w-16 h-6 rounded bg-zinc-200 dark:bg-zinc-800 animate-pulse" />
+                    </div>
+
+                    <div className="space-y-3">
+                        <div className="flex items-center justify-between">
+                            <div className="w-28 h-4 rounded bg-zinc-200 dark:bg-zinc-800 animate-pulse" />
+                            <div className="w-28 h-8 rounded bg-zinc-200 dark:bg-zinc-800 animate-pulse" />
+                        </div>
+                        <MockCodeBlock />
+                    </div>
+
+                    <div className="pt-4 border-t border-zinc-200 dark:border-zinc-800 space-y-3">
+                        <div className="flex items-center justify-between">
+                            <div className="w-36 h-4 rounded bg-zinc-200 dark:bg-zinc-800 animate-pulse" />
+                            <div className="w-24 h-8 rounded bg-zinc-200 dark:bg-zinc-800 animate-pulse" />
+                        </div>
+                        <div className="w-3/4 h-3 rounded bg-zinc-200 dark:bg-zinc-800 animate-pulse" />
+                        <MockCodeBlock />
+                    </div>
+
+                    <div className="pt-4 border-t border-zinc-200 dark:border-zinc-800 space-y-3">
+                        <div className="flex items-center justify-between">
+                            <div className="w-32 h-4 rounded bg-zinc-200 dark:bg-zinc-800 animate-pulse" />
+                            <div className="w-48 h-8 rounded bg-zinc-200 dark:bg-zinc-800 animate-pulse" />
+                        </div>
+                        <div className="w-2/3 h-3 rounded bg-zinc-200 dark:bg-zinc-800 animate-pulse" />
+                        <MockCodeBlock />
+                    </div>
+                </CardContent>
+            </Card>
+        </div>
+    );
+}
diff --git a/src/modules/workspace/ui/components/dashboard/schemaPreview.tsx b/src/modules/workspace/ui/components/dashboard/schemaPreview/schema-preview.tsx
similarity index 69%
rename from src/modules/workspace/ui/components/dashboard/schemaPreview.tsx
rename to src/modules/workspace/ui/components/dashboard/schemaPreview/schema-preview.tsx
index 33a2fca..377cb87 100644
--- a/src/modules/workspace/ui/components/dashboard/schemaPreview.tsx
+++ b/src/modules/workspace/ui/components/dashboard/schemaPreview/schema-preview.tsx
@@ -5,9 +5,11 @@ import { Code2, RotateCw, ShieldAlert, LayoutTemplate, Copy, Check } from "lucid
 import { Card, CardContent, CardHeader } from "~/components/ui/card";
 import { CodeBlock } from "~/components/code-block";
 import { Button } from "~/components/ui/button";
-import type { HttpMethod } from "../sidebar/types";
+import type { HttpMethod } from "../../sidebar/types";
 import { fieldsFromSchema } from "~/lib/faker-options";
 import { getTopMatches, generateCode, generateHtmlCode } from "~/lib/component-templates";
+import { generateFetchSnippet } from "./generate-fetch-snippet";
+import { SchemaPreviewSkeleton } from "./schema-preview-skeleton";
 
 interface SchemaPreviewProps {
     endpoint:
@@ -26,155 +28,10 @@ interface SchemaPreviewProps {
         | null
         | undefined;
     fetchUrl: string;
-    /** JWT bearer token to use when the endpoint requiresAuth */
     bearerToken?: string | null;
     isLoadingSchema?: boolean;
 }
 
-function generateFetchSnippet(
-    tab: "curl" | "js" | "tsx" | "python" | "go" | "rust" | "php",
-    url: string,
-    method: HttpMethod,
-    requiresAuth: boolean,
-    token?: string | null,
-) {
-    const tokenVal = token || "YOUR_TOKEN_HERE";
-
-    switch (tab) {
-        case "curl": {
-            const parts = [`curl -X ${method} "${url}"`];
-            parts.push('-H "Accept: application/json"');
-            if (requiresAuth) {
-                parts.push(`-H "Authorization: Bearer ${tokenVal}"`);
-            }
-            return parts.join(" \\\n  ");
-        }
-        case "js": {
-            const authHeaderJs = requiresAuth
-                ? `,\n    headers: {\n      "Authorization": "Bearer ${tokenVal}"\n    }`
-                : "";
-            return `fetch("${url}", {\n  method: "${method}"${authHeaderJs}\n})\n  .then((res) => res.json())\n  .then((data) => console.log(data))\n  .catch((err) => console.error(err));`;
-        }
-        case "tsx": {
-            const authHeaderTs = requiresAuth
-                ? `,\n      headers: {\n        "Authorization": "Bearer ${tokenVal}"\n      }`
-                : "";
-            return `async function fetchData<T = unknown>(): Promise<T> {\n  const response = await fetch("${url}", {\n    method: "${method}"${authHeaderTs}\n  });\n\n  if (!response.ok) {\n    throw new Error(\`HTTP error! status: \${response.status}\`);\n  }\n\n  return response.json() as Promise<T>;\n}`;
-        }
-        case "python": {
-            const headersObj = requiresAuth
-                ? `,\n    headers={\n        "Authorization": "Bearer ${tokenVal}"\n    }`
-                : "";
-            return `import requests\n\nresponse = requests.${method.toLowerCase()}(\n    "${url}"${headersObj}\n)\n\nprint(response.json())`;
-        }
-        case "go": {
-            const authGo = requiresAuth
-                ? `\n\treq.Header.Add("Authorization", "Bearer ${tokenVal}")`
-                : "";
-            return `package main\n\nimport (\n\t"fmt"\n\t"io"\n\t"net/http"\n)\n\nfunc main() {\n\tclient := &http.Client{}\n\treq, err := http.NewRequest("${method}", "${url}", nil)${authGo}\n\tif err != nil {\n\t\tpanic(err)\n\t}\n\n\tresp, err := client.Do(req)\n\tif err != nil {\n\t\tpanic(err)\n\t}\n\tdefer resp.Body.Close()\n\n\tbody, _ := io.ReadAll(resp.Body)\n\tfmt.Println(string(body))\n}`;
-        }
-        case "rust": {
-            const authCall = requiresAuth ? `\n        .bearer_auth("${tokenVal}")` : "";
-            return `use reqwest::Error;\n\n#[tokio::main]\nasync fn main() -> Result<(), Error> {\n    let client = reqwest::Client::new();\n    let response = client\n        .${method.toLowerCase()}("${url}")${authCall}\n        .header("Accept", "application/json")\n        .send()\n        .await?;\n\n    let body = response.text().await?;\n    println!("{}", body);\n    Ok(())\n}`;
-        }
-        case "php": {
-            const authPhp = requiresAuth
-                ? `\n  "header" => "Authorization: Bearer ${tokenVal}\\r\\n"`
-                : "";
-            return `<?php\n$opts = [\n  "http" => [\n    "method" => "${method}"${authPhp}\n  ]\n];\n$context = stream_context_create($opts);\n$result = file_get_contents("${url}", false, $context);\necho $result;\n?>`;
-        }
-    }
-}
-
-function MockCodeBlock() {
-    return (
-        <div className="rounded-lg border border-zinc-200 dark:border-zinc-800 bg-zinc-950 p-4 font-mono text-sm space-y-2">
-            <div className="flex items-center gap-2">
-                <div className="w-4 h-4 rounded bg-zinc-800 animate-pulse" />
-                <div className="w-24 h-4 rounded bg-zinc-800 animate-pulse" />
-            </div>
-            <div className="pl-6 space-y-2">
-                <div className="w-1/2 h-4 rounded bg-zinc-800 animate-pulse" />
-                <div className="w-3/4 h-4 rounded bg-zinc-800 animate-pulse" />
-                <div className="w-2/3 h-4 rounded bg-zinc-800 animate-pulse" />
-                <div className="w-1/3 h-4 rounded bg-zinc-800 animate-pulse" />
-            </div>
-            <div className="w-8 h-4 rounded bg-zinc-800 animate-pulse" />
-        </div>
-    );
-}
-
-export function SchemaPreviewSkeleton() {
-    return (
-        <div className="w-full mx-auto px-6 pb-6 h-full">
-            <Card className="border shadow-lg bg-muted/50">
-                <CardHeader className="flex flex-row items-center justify-between">
-                    <div className="flex items-center gap-2">
-                        <div className="w-5 h-5 rounded bg-zinc-300 dark:bg-zinc-700 animate-pulse" />
-                        <div className="w-36 h-6 rounded bg-zinc-300 dark:bg-zinc-700 animate-pulse" />
-                    </div>
-                    <div className="w-24 h-8 rounded bg-zinc-300 dark:bg-zinc-700 animate-pulse" />
-                </CardHeader>
-
-                <CardContent className="space-y-6">
-                    {/* Field summary table skeleton */}
-                    <div className="rounded-lg border border-zinc-200 dark:border-zinc-800 overflow-hidden">
-                        <div className="grid grid-cols-2 bg-zinc-200 dark:bg-zinc-900/50 px-4 py-2">
-                            <div className="w-12 h-3 rounded bg-zinc-300 dark:bg-zinc-700 animate-pulse" />
-                            <div className="w-12 h-3 rounded bg-zinc-300 dark:bg-zinc-700 animate-pulse" />
-                        </div>
-                        {[1, 2, 3].map((i) => (
-                            <div
-                                key={i}
-                                className="grid grid-cols-2 px-4 py-3 border-t border-zinc-150 dark:border-zinc-800/50"
-                            >
-                                <div className="w-24 h-4 rounded bg-zinc-200 dark:bg-zinc-800 animate-pulse" />
-                                <div className="w-16 h-4 rounded bg-zinc-200 dark:bg-zinc-800 animate-pulse" />
-                            </div>
-                        ))}
-                    </div>
-
-                    {/* Config summary skeleton */}
-                    <div className="flex gap-3">
-                        <div className="w-20 h-6 rounded bg-zinc-200 dark:bg-zinc-800 animate-pulse" />
-                        <div className="w-28 h-6 rounded bg-zinc-200 dark:bg-zinc-800 animate-pulse" />
-                        <div className="w-16 h-6 rounded bg-zinc-200 dark:bg-zinc-800 animate-pulse" />
-                    </div>
-
-                    {/* Live sample response skeleton */}
-                    <div className="space-y-3">
-                        <div className="flex items-center justify-between">
-                            <div className="w-28 h-4 rounded bg-zinc-200 dark:bg-zinc-800 animate-pulse" />
-                            <div className="w-28 h-8 rounded bg-zinc-200 dark:bg-zinc-800 animate-pulse" />
-                        </div>
-                        <MockCodeBlock />
-                    </div>
-
-                    {/* Component Generator Block skeleton */}
-                    <div className="pt-4 border-t border-zinc-200 dark:border-zinc-800 space-y-3">
-                        <div className="flex items-center justify-between">
-                            <div className="w-36 h-4 rounded bg-zinc-200 dark:bg-zinc-800 animate-pulse" />
-                            <div className="w-24 h-8 rounded bg-zinc-200 dark:bg-zinc-800 animate-pulse" />
-                        </div>
-                        <div className="w-3/4 h-3 rounded bg-zinc-200 dark:bg-zinc-800 animate-pulse" />
-                        <MockCodeBlock />
-                    </div>
-
-                    {/* API Fetch Code Snippets Block skeleton */}
-                    <div className="pt-4 border-t border-zinc-200 dark:border-zinc-800 space-y-3">
-                        <div className="flex items-center justify-between">
-                            <div className="w-32 h-4 rounded bg-zinc-200 dark:bg-zinc-800 animate-pulse" />
-                            <div className="w-48 h-8 rounded bg-zinc-200 dark:bg-zinc-800 animate-pulse" />
-                        </div>
-                        <div className="w-2/3 h-3 rounded bg-zinc-200 dark:bg-zinc-800 animate-pulse" />
-                        <MockCodeBlock />
-                    </div>
-                </CardContent>
-            </Card>
-        </div>
-    );
-}
-
 export function SchemaPreview({
     endpoint,
     fetchUrl,
@@ -214,7 +71,6 @@ export function SchemaPreview({
         "curl" | "js" | "tsx" | "python" | "go" | "rust" | "php"
     >("curl");
 
-    // Keep active template selection in sync when matches change
     const activeMatch =
         topMatches.find((m) => m.template.id === selectedTemplateId) ?? topMatches[0];
 
@@ -315,7 +171,6 @@ export function SchemaPreview({
                 </CardHeader>
 
                 <CardContent className="space-y-6">
-                    {/* Auth notice banners */}
                     {requiresAuth && !bearerToken && (
                         <div className="flex items-start gap-3 rounded-lg border border-amber-500/30 bg-amber-500/5 px-4 py-3 text-sm text-amber-600 dark:text-amber-400">
                             <ShieldAlert className="mt-0.5 h-4 w-4 shrink-0" />
@@ -347,7 +202,6 @@ export function SchemaPreview({
                         </div>
                     )}
 
-                    {/* Field summary table */}
                     <div className="rounded-lg border border-zinc-200 dark:border-zinc-800 overflow-hidden">
                         <div className="grid grid-cols-2 bg-zinc-100 dark:bg-zinc-900 px-4 py-2 text-xs font-bold uppercase tracking-wider text-muted-foreground">
                             <span>Field</span>
@@ -374,7 +228,6 @@ export function SchemaPreview({
                         })}
                     </div>
 
-                    {/* Config summary */}
                     <div className="flex flex-wrap gap-3 text-xs font-mono">
                         <span className="px-2 py-1 rounded bg-zinc-100 dark:bg-zinc-900">
                             delay: {endpoint.delayMs}ms
@@ -387,7 +240,6 @@ export function SchemaPreview({
                         </span>
                     </div>
 
-                    {/* Live sample response */}
                     <div>
                         <div className="flex items-center justify-between mb-3">
                             <h3 className="text-sm font-bold font-mono text-muted-foreground">
@@ -434,7 +286,6 @@ export function SchemaPreview({
                         ) : null}
                     </div>
 
-                    {/* Component Generator Block */}
                     {topMatches.length > 0 && activeMatch && (
                         <div className="pt-4 border-t border-zinc-200 dark:border-zinc-800 space-y-3">
                             <div className="flex items-center justify-between">
@@ -503,7 +354,6 @@ export function SchemaPreview({
                         </div>
                     )}
 
-                    {/* API Fetch Code Snippets Block */}
                     <div className="pt-4 border-t border-zinc-200 dark:border-zinc-800 space-y-3">
                         <div className="flex items-center justify-between">
                             <h3 className="text-sm font-bold font-mono text-muted-foreground flex items-center gap-2">
diff --git a/src/modules/workspace/ui/components/sidebar/dialogs.tsx b/src/modules/workspace/ui/components/sidebar/dialogs.tsx
deleted file mode 100644
index ec88b49..0000000
--- a/src/modules/workspace/ui/components/sidebar/dialogs.tsx
+++ /dev/null
@@ -1,315 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import {
-    Dialog,
-    DialogContent,
-    DialogFooter,
-    DialogHeader,
-    DialogTitle,
-} from "~/components/ui/dialog";
-import { Input } from "~/components/ui/input";
-import { Button } from "~/components/ui/button";
-import {
-    Select,
-    SelectContent,
-    SelectItem,
-    SelectTrigger,
-    SelectValue,
-} from "~/components/ui/select";
-import { cn } from "~/lib/utils";
-import type { HttpMethod } from "./types";
-import { METHOD_STYLES } from "./method-badge";
-
-export function CreateProjectDialog({
-    open,
-    onOpenChange,
-    onCreate,
-}: {
-    open: boolean;
-    onOpenChange: (open: boolean) => void;
-    onCreate: (title: string, basePath: string) => void;
-}) {
-    const [title, setTitle] = useState("");
-    const [basePath, setBasePath] = useState("/");
-
-    function handleSubmit() {
-        if (!title.trim()) return;
-        onCreate(title.trim(), basePath.trim() || "/");
-        setTitle("");
-        setBasePath("/");
-    }
-
-    return (
-        <Dialog open={open} onOpenChange={onOpenChange}>
-            <DialogContent>
-                <DialogHeader>
-                    <DialogTitle>New project</DialogTitle>
-                </DialogHeader>
-
-                <div className="space-y-3">
-                    <div className="space-y-1.5">
-                        <label className="text-xs text-muted-foreground">Project name</label>
-                        <Input
-                            autoFocus
-                            placeholder="My API"
-                            value={title}
-                            onChange={(e) => setTitle(e.target.value)}
-                            onKeyDown={(e) => {
-                                if (e.key === "Enter") handleSubmit();
-                            }}
-                        />
-                    </div>
-                    <div className="space-y-1.5">
-                        <label className="text-xs text-muted-foreground">Base path</label>
-                        <Input
-                            placeholder="/"
-                            value={basePath}
-                            onChange={(e) => setBasePath(e.target.value)}
-                            className="font-mono text-sm"
-                        />
-                    </div>
-                </div>
-
-                <DialogFooter>
-                    <Button variant="ghost" onClick={() => onOpenChange(false)}>
-                        Cancel
-                    </Button>
-                    <Button onClick={handleSubmit} disabled={!title.trim()}>
-                        Create
-                    </Button>
-                </DialogFooter>
-            </DialogContent>
-        </Dialog>
-    );
-}
-
-export function CreateFolderDialog({
-    open,
-    onOpenChange,
-    onCreate,
-}: {
-    open: boolean;
-    onOpenChange: (open: boolean) => void;
-    onCreate: (name: string) => void;
-}) {
-    const [name, setName] = useState("");
-
-    function handleSubmit() {
-        if (!name.trim()) return;
-        onCreate(name.trim());
-        setName("");
-    }
-
-    return (
-        <Dialog open={open} onOpenChange={onOpenChange}>
-            <DialogContent>
-                <DialogHeader>
-                    <DialogTitle>New folder</DialogTitle>
-                </DialogHeader>
-                <Input
-                    autoFocus
-                    placeholder="Folder name"
-                    value={name}
-                    onChange={(e) => setName(e.target.value)}
-                    onKeyDown={(e) => {
-                        if (e.key === "Enter") handleSubmit();
-                    }}
-                />
-                <DialogFooter>
-                    <Button variant="ghost" onClick={() => onOpenChange(false)}>
-                        Cancel
-                    </Button>
-                    <Button onClick={handleSubmit} disabled={!name.trim()}>
-                        Create
-                    </Button>
-                </DialogFooter>
-            </DialogContent>
-        </Dialog>
-    );
-}
-
-export function CreateEndpointDialog({
-    open,
-    onOpenChange,
-    onCreate,
-}: {
-    open: boolean;
-    onOpenChange: (open: boolean) => void;
-    onCreate: (name: string, method: HttpMethod, path: string) => void;
-}) {
-    const [name, setName] = useState("");
-    const [method, setMethod] = useState<HttpMethod>("GET");
-    const [path, setPath] = useState("/");
-
-    function handleSubmit() {
-        if (!name.trim() || !path.trim()) return;
-        onCreate(name.trim(), method, path.trim());
-        setName("");
-        setMethod("GET");
-        setPath("/");
-    }
-
-    return (
-        <Dialog open={open} onOpenChange={onOpenChange}>
-            <DialogContent>
-                <DialogHeader>
-                    <DialogTitle>New endpoint</DialogTitle>
-                </DialogHeader>
-
-                <div className="space-y-3">
-                    <div className="space-y-1.5">
-                        <label className="text-xs text-muted-foreground">Name</label>
-                        <Input
-                            autoFocus
-                            placeholder="Get users"
-                            value={name}
-                            onChange={(e) => setName(e.target.value)}
-                            onKeyDown={(e) => {
-                                if (e.key === "Enter") handleSubmit();
-                            }}
-                        />
-                    </div>
-
-                    <div className="flex gap-2">
-                        <div className="space-y-1.5">
-                            <label className="text-xs text-muted-foreground">Method</label>
-                            <Select
-                                value={method}
-                                onValueChange={(v) => setMethod(v as HttpMethod)}
-                            >
-                                <SelectTrigger className="w-27.5">
-                                    <SelectValue />
-                                </SelectTrigger>
-                                <SelectContent>
-                                    {(
-                                        ["GET", "POST", "PUT", "PATCH", "DELETE"] as HttpMethod[]
-                                    ).map((m) => (
-                                        <SelectItem key={m} value={m}>
-                                            <span
-                                                className={cn(
-                                                    "font-bold text-xs",
-                                                    METHOD_STYLES[m],
-                                                )}
-                                            >
-                                                {m}
-                                            </span>
-                                        </SelectItem>
-                                    ))}
-                                </SelectContent>
-                            </Select>
-                        </div>
-
-                        <div className="flex-1 space-y-1.5">
-                            <label className="text-xs text-muted-foreground">Path</label>
-                            <Input
-                                placeholder="/users"
-                                value={path}
-                                onChange={(e) => setPath(e.target.value)}
-                                onKeyDown={(e) => {
-                                    if (e.key === "Enter") handleSubmit();
-                                }}
-                                className="font-mono text-sm"
-                            />
-                        </div>
-                    </div>
-                </div>
-
-                <DialogFooter>
-                    <Button variant="ghost" onClick={() => onOpenChange(false)}>
-                        Cancel
-                    </Button>
-                    <Button onClick={handleSubmit} disabled={!name.trim() || !path.trim()}>
-                        Create
-                    </Button>
-                </DialogFooter>
-            </DialogContent>
-        </Dialog>
-    );
-}
-
-export function ImportProjectDialog({
-    open,
-    onOpenChange,
-    onImport,
-    isImporting,
-}: {
-    open: boolean;
-    onOpenChange: (open: boolean) => void;
-    onImport: (data: unknown) => void;
-    isImporting: boolean;
-}) {
-    const [jsonContent, setJsonContent] = useState("");
-    const [error, setError] = useState<string | null>(null);
-
-    const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        const file = e.target.files?.[0];
-        if (!file) return;
-        const reader = new FileReader();
-        reader.addEventListener("load", (event) => {
-            const content = event.target?.result as string;
-            setJsonContent(content);
-            setError(null);
-        });
-        reader.readAsText(file);
-    };
-
-    const handleSubmit = () => {
-        try {
-            setError(null);
-            const parsed = JSON.parse(jsonContent);
-            onImport(parsed);
-        } catch {
-            setError("Invalid JSON format. Please select or paste a valid exported project JSON.");
-        }
-    };
-
-    return (
-        <Dialog open={open} onOpenChange={onOpenChange}>
-            <DialogContent className="max-w-md sm:max-w-lg">
-                <DialogHeader>
-                    <DialogTitle>Import Project</DialogTitle>
-                </DialogHeader>
-
-                <div className="space-y-4">
-                    <div className="space-y-1.5">
-                        <label className="text-xs text-muted-foreground">
-                            Select exported JSON file
-                        </label>
-                        <Input
-                            type="file"
-                            accept=".json,application/json"
-                            onChange={handleFileChange}
-                        />
-                    </div>
-
-                    <div className="space-y-1.5">
-                        <label className="text-xs text-muted-foreground">
-                            Or paste JSON content
-                        </label>
-                        <textarea
-                            className="w-full h-40 p-2 text-xs font-mono rounded-md border bg-background resize-none focus:outline-none focus:ring-1 focus:ring-ring"
-                            placeholder="Paste project export JSON here..."
-                            value={jsonContent}
-                            onChange={(e) => {
-                                setJsonContent(e.target.value);
-                                setError(null);
-                            }}
-                        />
-                    </div>
-
-                    {error && <p className="text-xs font-medium text-destructive">{error}</p>}
-                </div>
-
-                <DialogFooter>
-                    <Button variant="ghost" onClick={() => onOpenChange(false)}>
-                        Cancel
-                    </Button>
-                    <Button onClick={handleSubmit} disabled={!jsonContent.trim() || isImporting}>
-                        {isImporting ? "Importing..." : "Import Project"}
-                    </Button>
-                </DialogFooter>
-            </DialogContent>
-        </Dialog>
-    );
-}
diff --git a/src/modules/workspace/ui/components/sidebar/dialogs/create-endpoint-dialog.tsx b/src/modules/workspace/ui/components/sidebar/dialogs/create-endpoint-dialog.tsx
new file mode 100644
index 0000000..3ab318d
--- /dev/null
+++ b/src/modules/workspace/ui/components/sidebar/dialogs/create-endpoint-dialog.tsx
@@ -0,0 +1,119 @@
+import { useState } from "react";
+import {
+    Dialog,
+    DialogContent,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from "~/components/ui/dialog";
+import { Input } from "~/components/ui/input";
+import { Button } from "~/components/ui/button";
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from "~/components/ui/select";
+import { cn } from "~/lib/utils";
+import type { HttpMethod } from "../types";
+import { METHOD_STYLES } from "../method-badge";
+
+export function CreateEndpointDialog({
+    open,
+    onOpenChange,
+    onCreate,
+}: {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    onCreate: (name: string, method: HttpMethod, path: string) => void;
+}) {
+    const [name, setName] = useState("");
+    const [method, setMethod] = useState<HttpMethod>("GET");
+    const [path, setPath] = useState("/");
+
+    function handleSubmit() {
+        if (!name.trim() || !path.trim()) return;
+        onCreate(name.trim(), method, path.trim());
+        setName("");
+        setMethod("GET");
+        setPath("/");
+    }
+
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogContent>
+                <DialogHeader>
+                    <DialogTitle>New endpoint</DialogTitle>
+                </DialogHeader>
+
+                <div className="space-y-3">
+                    <div className="space-y-1.5">
+                        <label className="text-xs text-muted-foreground">Name</label>
+                        <Input
+                            autoFocus
+                            placeholder="Get users"
+                            value={name}
+                            onChange={(e) => setName(e.target.value)}
+                            onKeyDown={(e) => {
+                                if (e.key === "Enter") handleSubmit();
+                            }}
+                        />
+                    </div>
+
+                    <div className="flex gap-2">
+                        <div className="space-y-1.5">
+                            <label className="text-xs text-muted-foreground">Method</label>
+                            <Select
+                                value={method}
+                                onValueChange={(v) => setMethod(v as HttpMethod)}
+                            >
+                                <SelectTrigger className="w-27.5">
+                                    <SelectValue />
+                                </SelectTrigger>
+                                <SelectContent>
+                                    {(
+                                        ["GET", "POST", "PUT", "PATCH", "DELETE"] as HttpMethod[]
+                                    ).map((m) => (
+                                        <SelectItem key={m} value={m}>
+                                            <span
+                                                className={cn(
+                                                    "font-bold text-xs",
+                                                    METHOD_STYLES[m],
+                                                )}
+                                            >
+                                                {m}
+                                            </span>
+                                        </SelectItem>
+                                    ))}
+                                </SelectContent>
+                            </Select>
+                        </div>
+
+                        <div className="flex-1 space-y-1.5">
+                            <label className="text-xs text-muted-foreground">Path</label>
+                            <Input
+                                placeholder="/users"
+                                value={path}
+                                onChange={(e) => setPath(e.target.value)}
+                                onKeyDown={(e) => {
+                                    if (e.key === "Enter") handleSubmit();
+                                }}
+                                className="font-mono text-sm"
+                            />
+                        </div>
+                    </div>
+                </div>
+
+                <DialogFooter>
+                    <Button variant="ghost" onClick={() => onOpenChange(false)}>
+                        Cancel
+                    </Button>
+                    <Button onClick={handleSubmit} disabled={!name.trim() || !path.trim()}>
+                        Create
+                    </Button>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    );
+}
diff --git a/src/modules/workspace/ui/components/sidebar/dialogs/create-folder-dialog.tsx b/src/modules/workspace/ui/components/sidebar/dialogs/create-folder-dialog.tsx
new file mode 100644
index 0000000..ba7c509
--- /dev/null
+++ b/src/modules/workspace/ui/components/sidebar/dialogs/create-folder-dialog.tsx
@@ -0,0 +1,55 @@
+import { useState } from "react";
+import {
+    Dialog,
+    DialogContent,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from "~/components/ui/dialog";
+import { Input } from "~/components/ui/input";
+import { Button } from "~/components/ui/button";
+
+export function CreateFolderDialog({
+    open,
+    onOpenChange,
+    onCreate,
+}: {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    onCreate: (name: string) => void;
+}) {
+    const [name, setName] = useState("");
+
+    function handleSubmit() {
+        if (!name.trim()) return;
+        onCreate(name.trim());
+        setName("");
+    }
+
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogContent>
+                <DialogHeader>
+                    <DialogTitle>New folder</DialogTitle>
+                </DialogHeader>
+                <Input
+                    autoFocus
+                    placeholder="Folder name"
+                    value={name}
+                    onChange={(e) => setName(e.target.value)}
+                    onKeyDown={(e) => {
+                        if (e.key === "Enter") handleSubmit();
+                    }}
+                />
+                <DialogFooter>
+                    <Button variant="ghost" onClick={() => onOpenChange(false)}>
+                        Cancel
+                    </Button>
+                    <Button onClick={handleSubmit} disabled={!name.trim()}>
+                        Create
+                    </Button>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    );
+}
diff --git a/src/modules/workspace/ui/components/sidebar/dialogs/create-project-dialog.tsx b/src/modules/workspace/ui/components/sidebar/dialogs/create-project-dialog.tsx
new file mode 100644
index 0000000..b84e548
--- /dev/null
+++ b/src/modules/workspace/ui/components/sidebar/dialogs/create-project-dialog.tsx
@@ -0,0 +1,73 @@
+import { useState } from "react";
+import {
+    Dialog,
+    DialogContent,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from "~/components/ui/dialog";
+import { Input } from "~/components/ui/input";
+import { Button } from "~/components/ui/button";
+
+export function CreateProjectDialog({
+    open,
+    onOpenChange,
+    onCreate,
+}: {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    onCreate: (title: string, basePath: string) => void;
+}) {
+    const [title, setTitle] = useState("");
+    const [basePath, setBasePath] = useState("/");
+
+    function handleSubmit() {
+        if (!title.trim()) return;
+        onCreate(title.trim(), basePath.trim() || "/");
+        setTitle("");
+        setBasePath("/");
+    }
+
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogContent>
+                <DialogHeader>
+                    <DialogTitle>New project</DialogTitle>
+                </DialogHeader>
+
+                <div className="space-y-3">
+                    <div className="space-y-1.5">
+                        <label className="text-xs text-muted-foreground">Project name</label>
+                        <Input
+                            autoFocus
+                            placeholder="My API"
+                            value={title}
+                            onChange={(e) => setTitle(e.target.value)}
+                            onKeyDown={(e) => {
+                                if (e.key === "Enter") handleSubmit();
+                            }}
+                        />
+                    </div>
+                    <div className="space-y-1.5">
+                        <label className="text-xs text-muted-foreground">Base path</label>
+                        <Input
+                            placeholder="/"
+                            value={basePath}
+                            onChange={(e) => setBasePath(e.target.value)}
+                            className="font-mono text-sm"
+                        />
+                    </div>
+                </div>
+
+                <DialogFooter>
+                    <Button variant="ghost" onClick={() => onOpenChange(false)}>
+                        Cancel
+                    </Button>
+                    <Button onClick={handleSubmit} disabled={!title.trim()}>
+                        Create
+                    </Button>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    );
+}
diff --git a/src/modules/workspace/ui/components/sidebar/dialogs/import-project-dialog.tsx b/src/modules/workspace/ui/components/sidebar/dialogs/import-project-dialog.tsx
new file mode 100644
index 0000000..58a7398
--- /dev/null
+++ b/src/modules/workspace/ui/components/sidebar/dialogs/import-project-dialog.tsx
@@ -0,0 +1,96 @@
+import { useState } from "react";
+import {
+    Dialog,
+    DialogContent,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from "~/components/ui/dialog";
+import { Input } from "~/components/ui/input";
+import { Button } from "~/components/ui/button";
+
+export function ImportProjectDialog({
+    open,
+    onOpenChange,
+    onImport,
+    isImporting,
+}: {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    onImport: (data: unknown) => void;
+    isImporting: boolean;
+}) {
+    const [jsonContent, setJsonContent] = useState("");
+    const [error, setError] = useState<string | null>(null);
+
+    const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const file = e.target.files?.[0];
+        if (!file) return;
+        const reader = new FileReader();
+        reader.addEventListener("load", (event) => {
+            const content = event.target?.result as string;
+            setJsonContent(content);
+            setError(null);
+        });
+        reader.readAsText(file);
+    };
+
+    const handleSubmit = () => {
+        try {
+            setError(null);
+            const parsed = JSON.parse(jsonContent);
+            onImport(parsed);
+        } catch {
+            setError("Invalid JSON format. Please select or paste a valid exported project JSON.");
+        }
+    };
+
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogContent className="max-w-md sm:max-w-lg">
+                <DialogHeader>
+                    <DialogTitle>Import Project</DialogTitle>
+                </DialogHeader>
+
+                <div className="space-y-4">
+                    <div className="space-y-1.5">
+                        <label className="text-xs text-muted-foreground">
+                            Select exported JSON file
+                        </label>
+                        <Input
+                            type="file"
+                            accept=".json,application/json"
+                            onChange={handleFileChange}
+                        />
+                    </div>
+
+                    <div className="space-y-1.5">
+                        <label className="text-xs text-muted-foreground">
+                            Or paste JSON content
+                        </label>
+                        <textarea
+                            className="w-full h-40 p-2 text-xs font-mono rounded-md border bg-background resize-none focus:outline-none focus:ring-1 focus:ring-ring"
+                            placeholder="Paste project export JSON here..."
+                            value={jsonContent}
+                            onChange={(e) => {
+                                setJsonContent(e.target.value);
+                                setError(null);
+                            }}
+                        />
+                    </div>
+
+                    {error && <p className="text-xs font-medium text-destructive">{error}</p>}
+                </div>
+
+                <DialogFooter>
+                    <Button variant="ghost" onClick={() => onOpenChange(false)}>
+                        Cancel
+                    </Button>
+                    <Button onClick={handleSubmit} disabled={!jsonContent.trim() || isImporting}>
+                        {isImporting ? "Importing..." : "Import Project"}
+                    </Button>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    );
+}
diff --git a/src/modules/workspace/ui/components/sidebar/dialogs/index.ts b/src/modules/workspace/ui/components/sidebar/dialogs/index.ts
new file mode 100644
index 0000000..b38a49e
--- /dev/null
+++ b/src/modules/workspace/ui/components/sidebar/dialogs/index.ts
@@ -0,0 +1,4 @@
+export { CreateProjectDialog } from "./create-project-dialog";
+export { CreateFolderDialog } from "./create-folder-dialog";
+export { CreateEndpointDialog } from "./create-endpoint-dialog";
+export { ImportProjectDialog } from "./import-project-dialog";
diff --git a/src/modules/workspace/ui/components/sidebar/endpoint-tree-node.tsx b/src/modules/workspace/ui/components/sidebar/endpoint-tree-node.tsx
new file mode 100644
index 0000000..756ffe2
--- /dev/null
+++ b/src/modules/workspace/ui/components/sidebar/endpoint-tree-node.tsx
@@ -0,0 +1,77 @@
+import { KeyRound, Lock } from "lucide-react";
+import { TreeNode, TreeNodeTrigger, TreeExpander, TreeLabel } from "~/components/kibo-ui/tree";
+import { TreeNodeMenu } from "./tree-node-menu";
+import { InlineRename } from "./inline-rename";
+import { MethodBadge } from "./method-badge";
+import type { Endpoint } from "./types";
+
+export function EndpointTreeNode({
+    endpoint,
+    level,
+    isSelected,
+    isRenaming,
+    onSelect,
+    onRenameConfirm,
+    onRenameCancel,
+    onRenameStart,
+    onDelete,
+}: {
+    endpoint: Endpoint;
+    level: number;
+    isSelected: boolean;
+    isRenaming: boolean;
+    onSelect: () => void;
+    onRenameConfirm: (name: string) => void;
+    onRenameCancel: () => void;
+    onRenameStart: () => void;
+    onDelete: () => void;
+}) {
+    return (
+        <TreeNode nodeId={endpoint.id} level={level} isLast={false}>
+            <TreeNodeTrigger
+                className="group"
+                onClick={onSelect}
+                onDoubleClick={(e) => {
+                    e.stopPropagation();
+                    onRenameStart();
+                }}
+            >
+                <TreeExpander hasChildren={false} />
+                {isRenaming ? (
+                    <InlineRename
+                        defaultValue={endpoint.name}
+                        onConfirm={onRenameConfirm}
+                        onCancel={onRenameCancel}
+                    />
+                ) : (
+                    <TreeLabel className={isSelected ? "font-medium" : ""}>
+                        {endpoint.name}
+                    </TreeLabel>
+                )}
+                {endpoint.authConfig?.isLoginEndpoint && (
+                    <span
+                        className="inline-flex items-center justify-center rounded border border-amber-500/30 bg-amber-500/15 p-0.5 text-amber-600 dark:text-amber-400 shrink-0 mr-1.5"
+                        title="Login Endpoint (Returns JWT Token)"
+                    >
+                        <KeyRound className="size-3" />
+                    </span>
+                )}
+                {endpoint.authConfig?.requiresAuth && (
+                    <span
+                        className="inline-flex items-center justify-center rounded border border-emerald-500/30 bg-emerald-500/15 p-0.5 text-emerald-600 dark:text-emerald-400 shrink-0 mr-1.5"
+                        title="Requires Authentication (Bearer Token)"
+                    >
+                        <Lock className="size-3" />
+                    </span>
+                )}
+                <MethodBadge method={endpoint.method} className="w-auto mr-1.5 text-[9px]" />
+                <TreeNodeMenu
+                    showNewFolder={false}
+                    showNewFile={false}
+                    onRename={onRenameStart}
+                    onDelete={onDelete}
+                />
+            </TreeNodeTrigger>
+        </TreeNode>
+    );
+}
diff --git a/src/modules/workspace/ui/components/sidebar/folder-tree-node.tsx b/src/modules/workspace/ui/components/sidebar/folder-tree-node.tsx
new file mode 100644
index 0000000..be6f8dc
--- /dev/null
+++ b/src/modules/workspace/ui/components/sidebar/folder-tree-node.tsx
@@ -0,0 +1,145 @@
+import {
+    TreeNode,
+    TreeNodeTrigger,
+    TreeNodeContent,
+    TreeExpander,
+    TreeIcon,
+    TreeLabel,
+} from "~/components/kibo-ui/tree";
+import { TreeNodeMenu } from "./tree-node-menu";
+import { InlineRename } from "./inline-rename";
+import { EndpointTreeNode } from "./endpoint-tree-node";
+import { commitRename } from "./tree-utils";
+import type { Collection, Endpoint, ModalTarget } from "./types";
+
+export function FolderTreeNode({
+    collection,
+    level,
+    isLast,
+    projectId,
+    selectedEndpointId,
+    onSelectEndpoint,
+    renamingId,
+    setRenamingId,
+    onRenameFolder,
+    onRenameEndpoint,
+    onOpenModal,
+    onDeleteFolder,
+    onDeleteEndpoint,
+    endpoints,
+}: {
+    collection: Collection;
+    level: number;
+    isLast: boolean;
+    projectId: string;
+    selectedEndpointId: string | null;
+    onSelectEndpoint: (id: string, projectId: string) => void;
+    renamingId: string | null;
+    setRenamingId: (id: string | null) => void;
+    onRenameFolder: (id: string, name: string) => void;
+    onRenameEndpoint: (id: string, name: string) => void;
+    onOpenModal: (target: ModalTarget) => void;
+    onDeleteFolder: (id: string) => void;
+    onDeleteEndpoint: (id: string) => void;
+    endpoints: Endpoint[];
+}) {
+    const hasChildren =
+        (collection.children?.length ?? 0) > 0 || (collection.endpoints?.length ?? 0) > 0;
+
+    const folderEndpoints = endpoints.filter((endpoint) => endpoint.folderId === collection.id);
+
+    return (
+        <TreeNode nodeId={collection.id} level={level} isLast={isLast}>
+            <TreeNodeTrigger
+                className="group"
+                onDoubleClick={(e) => {
+                    e.stopPropagation();
+                    setRenamingId(collection.id);
+                }}
+            >
+                <TreeExpander hasChildren={hasChildren} />
+                <TreeIcon hasChildren={hasChildren} />
+                {renamingId === collection.id ? (
+                    <InlineRename
+                        defaultValue={collection.name}
+                        onConfirm={(name) => {
+                            commitRename(
+                                collection.name,
+                                name,
+                                (nextName) => {
+                                    onRenameFolder(collection.id, nextName);
+                                },
+                                () => setRenamingId(null),
+                            );
+                        }}
+                        onCancel={() => setRenamingId(null)}
+                    />
+                ) : (
+                    <TreeLabel>{collection.name}</TreeLabel>
+                )}
+                <TreeNodeMenu
+                    onNewFolder={() =>
+                        onOpenModal({ kind: "folder", projectId, parentId: collection.id })
+                    }
+                    onNewFile={() =>
+                        onOpenModal({
+                            kind: "endpoint",
+                            projectId,
+                            folderId: collection.id,
+                        })
+                    }
+                    onRename={() => setRenamingId(collection.id)}
+                    onDelete={() => onDeleteFolder(collection.id)}
+                />
+            </TreeNodeTrigger>
+
+            <TreeNodeContent hasChildren={hasChildren}>
+                {(collection.children ?? []).map((child, index) => (
+                    <FolderTreeNode
+                        key={child.id}
+                        collection={child}
+                        level={level + 1}
+                        isLast={
+                            index === (collection.children?.length ?? 0) - 1 &&
+                            (collection.endpoints?.length ?? 0) === 0
+                        }
+                        projectId={projectId}
+                        selectedEndpointId={selectedEndpointId}
+                        onSelectEndpoint={onSelectEndpoint}
+                        renamingId={renamingId}
+                        setRenamingId={setRenamingId}
+                        onRenameFolder={onRenameFolder}
+                        onRenameEndpoint={onRenameEndpoint}
+                        onOpenModal={onOpenModal}
+                        onDeleteFolder={onDeleteFolder}
+                        onDeleteEndpoint={onDeleteEndpoint}
+                        endpoints={endpoints}
+                    />
+                ))}
+                {folderEndpoints.map((endpoint) => (
+                    <EndpointTreeNode
+                        key={endpoint.id}
+                        endpoint={endpoint}
+                        level={level + 1}
+                        isSelected={selectedEndpointId === endpoint.id}
+                        isRenaming={renamingId === endpoint.id}
+                        onSelect={() => onSelectEndpoint(endpoint.id, projectId)}
+                        onRenameConfirm={(name) => {
+                            commitRename(
+                                endpoint.name,
+                                name,
+                                (nextName) => {
+                                    onRenameEndpoint(endpoint.id, nextName);
+                                },
+                                () => setRenamingId(null),
+                            );
+                        }}
+                        onRenameCancel={() => setRenamingId(null)}
+                        onRenameStart={() => setRenamingId(endpoint.id)}
+                        onDelete={() => onDeleteEndpoint(endpoint.id)}
+                    />
+                ))}
+            </TreeNodeContent>
+        </TreeNode>
+    );
+}
diff --git a/src/modules/workspace/ui/components/sidebar/project-tree-node.tsx b/src/modules/workspace/ui/components/sidebar/project-tree-node.tsx
new file mode 100644
index 0000000..83cbb5b
--- /dev/null
+++ b/src/modules/workspace/ui/components/sidebar/project-tree-node.tsx
@@ -0,0 +1,184 @@
+import { cn } from "~/lib/utils";
+import {
+    TreeNode,
+    TreeNodeTrigger,
+    TreeNodeContent,
+    TreeExpander,
+    TreeIcon,
+    TreeLabel,
+} from "~/components/kibo-ui/tree";
+import { TreeNodeMenu } from "./tree-node-menu";
+import { InlineRename } from "./inline-rename";
+import { EndpointTreeNode } from "./endpoint-tree-node";
+import { FolderTreeNode } from "./folder-tree-node";
+import { commitRename } from "./tree-utils";
+import {
+    buildFolderTree,
+    type FolderRow,
+    type Collection,
+    type Endpoint,
+    type ModalTarget,
+    type SidebarProject,
+} from "./types";
+import { useEndpoints } from "~/hooks/use-endpoints";
+import { useFolders } from "~/hooks/use-folders";
+import { ProjectTreeNodeSkeleton } from "./sidebar-skeleton";
+
+export function ProjectTreeNode({
+    project,
+    level,
+    isLast,
+    selectedEndpointId,
+    onSelectEndpoint,
+    selectedProjectId,
+    onSelectProject,
+    renamingId,
+    setRenamingId,
+    onRenameProject,
+    onRenameFolder,
+    onRenameEndpoint,
+    onOpenModal,
+    onExportProject,
+    onDeleteProject,
+    onDeleteFolder,
+    onDeleteEndpoint,
+}: {
+    project: SidebarProject;
+    level: number;
+    isLast: boolean;
+    selectedEndpointId: string | null;
+    onSelectEndpoint: (id: string, projectId: string) => void;
+    selectedProjectId: string | null;
+    onSelectProject: (id: string) => void;
+    renamingId: string | null;
+    setRenamingId: (id: string | null) => void;
+    onRenameProject: (id: string, name: string) => void;
+    onRenameFolder: (id: string, name: string) => void;
+    onRenameEndpoint: (id: string, name: string) => void;
+    onOpenModal: (target: ModalTarget) => void;
+    onExportProject?: (id: string) => void;
+    onDeleteProject: (id: string) => void;
+    onDeleteFolder: (id: string) => void;
+    onDeleteEndpoint: (id: string) => void;
+}) {
+    const { data: rawFolders = [], isLoading: isLoadingFolders } = useFolders(project.id);
+    const { data: rawEndpoints = [], isLoading: isLoadingEndpoints } = useEndpoints(project.id);
+
+    const isLoading = isLoadingFolders || isLoadingEndpoints;
+
+    const folderTree = buildFolderTree(rawFolders as FolderRow[]);
+
+    const attachEndpoints = (collections: Collection[]): Collection[] =>
+        collections.map((collection) => ({
+            ...collection,
+            endpoints: rawEndpoints.filter(
+                (endpoint) => endpoint.folderId === collection.id,
+            ) as Endpoint[],
+            children: attachEndpoints(collection.children ?? []),
+        }));
+
+    const tree = attachEndpoints(folderTree);
+    const rootEndpoints = rawEndpoints.filter((endpoint) => !endpoint.folderId) as Endpoint[];
+
+    return (
+        <TreeNode nodeId={project.id} level={level} isLast={isLast}>
+            <TreeNodeTrigger
+                className="group"
+                onClick={() => onSelectProject(project.id)}
+                onDoubleClick={(e) => {
+                    e.stopPropagation();
+                    setRenamingId(project.id);
+                }}
+            >
+                <TreeExpander hasChildren />
+                <TreeIcon hasChildren />
+                {renamingId === project.id ? (
+                    <InlineRename
+                        defaultValue={project.title}
+                        onConfirm={(name) => {
+                            commitRename(
+                                project.title,
+                                name,
+                                (nextName) => {
+                                    onRenameProject(project.id, nextName);
+                                },
+                                () => setRenamingId(null),
+                            );
+                        }}
+                        onCancel={() => setRenamingId(null)}
+                    />
+                ) : (
+                    <TreeLabel
+                        className={cn(
+                            "font-medium",
+                            selectedProjectId === project.id && "font-bold text-primary",
+                        )}
+                    >
+                        {project.title}
+                    </TreeLabel>
+                )}
+                <TreeNodeMenu
+                    onNewFolder={() => onOpenModal({ kind: "folder", projectId: project.id })}
+                    onNewFile={() => onOpenModal({ kind: "endpoint", projectId: project.id })}
+                    onSettings={() =>
+                        onOpenModal({ kind: "projectSettings", projectId: project.id })
+                    }
+                    onExport={onExportProject ? () => onExportProject(project.id) : undefined}
+                    onRename={() => setRenamingId(project.id)}
+                    onDelete={() => onDeleteProject(project.id)}
+                />
+            </TreeNodeTrigger>
+
+            <TreeNodeContent hasChildren>
+                {isLoading ? (
+                    <ProjectTreeNodeSkeleton level={level + 1} />
+                ) : (
+                    <>
+                        {rootEndpoints.map((endpoint) => (
+                            <EndpointTreeNode
+                                key={endpoint.id}
+                                endpoint={endpoint}
+                                level={level + 1}
+                                isSelected={selectedEndpointId === endpoint.id}
+                                isRenaming={renamingId === endpoint.id}
+                                onSelect={() => onSelectEndpoint(endpoint.id, project.id)}
+                                onRenameConfirm={(name) => {
+                                    commitRename(
+                                        endpoint.name,
+                                        name,
+                                        (nextName) => {
+                                            onRenameEndpoint(endpoint.id, nextName);
+                                        },
+                                        () => setRenamingId(null),
+                                    );
+                                }}
+                                onRenameCancel={() => setRenamingId(null)}
+                                onRenameStart={() => setRenamingId(endpoint.id)}
+                                onDelete={() => onDeleteEndpoint(endpoint.id)}
+                            />
+                        ))}
+                        {tree.map((collection, index) => (
+                            <FolderTreeNode
+                                key={collection.id}
+                                collection={collection}
+                                level={level + 1}
+                                isLast={index === tree.length - 1}
+                                projectId={project.id}
+                                selectedEndpointId={selectedEndpointId}
+                                onSelectEndpoint={onSelectEndpoint}
+                                renamingId={renamingId}
+                                setRenamingId={setRenamingId}
+                                onRenameFolder={onRenameFolder}
+                                onRenameEndpoint={onRenameEndpoint}
+                                onOpenModal={onOpenModal}
+                                onDeleteFolder={onDeleteFolder}
+                                onDeleteEndpoint={onDeleteEndpoint}
+                                endpoints={rawEndpoints as Endpoint[]}
+                            />
+                        ))}
+                    </>
+                )}
+            </TreeNodeContent>
+        </TreeNode>
+    );
+}
diff --git a/src/modules/workspace/ui/components/sidebar/sidebar-tree.tsx b/src/modules/workspace/ui/components/sidebar/sidebar-tree.tsx
index 956e4ad..776f12e 100644
--- a/src/modules/workspace/ui/components/sidebar/sidebar-tree.tsx
+++ b/src/modules/workspace/ui/components/sidebar/sidebar-tree.tsx
@@ -1,403 +1,4 @@
-"use client";
-
-import { KeyRound, Lock } from "lucide-react";
-import { cn } from "~/lib/utils";
-import {
-    TreeNode,
-    TreeNodeTrigger,
-    TreeNodeContent,
-    TreeExpander,
-    TreeIcon,
-    TreeLabel,
-} from "~/components/kibo-ui/tree";
-import { TreeNodeMenu } from "./tree-node-menu";
-import { InlineRename } from "./inline-rename";
-import { MethodBadge } from "./method-badge";
-import {
-    buildFolderTree,
-    type FolderRow,
-    type Collection,
-    type Endpoint,
-    type ModalTarget,
-    type SidebarProject,
-} from "./types";
-import { useEndpoints } from "~/hooks/use-endpoints";
-import { useFolders } from "~/hooks/use-folders";
-import { ProjectTreeNodeSkeleton } from "./sidebar-skeleton";
-
-function commitRename<T extends string>(
-    currentName: string,
-    nextName: string,
-    onRename: (name: T) => void,
-    onFinish: () => void,
-) {
-    const normalizedName = nextName.trim() || currentName;
-
-    if (normalizedName !== currentName) {
-        onRename(normalizedName as T);
-    }
-
-    onFinish();
-}
-
-export function EndpointTreeNode({
-    endpoint,
-    level,
-    isSelected,
-    isRenaming,
-    onSelect,
-    onRenameConfirm,
-    onRenameCancel,
-    onRenameStart,
-    onDelete,
-}: {
-    endpoint: Endpoint;
-    level: number;
-    isSelected: boolean;
-    isRenaming: boolean;
-    onSelect: () => void;
-    onRenameConfirm: (name: string) => void;
-    onRenameCancel: () => void;
-    onRenameStart: () => void;
-    onDelete: () => void;
-}) {
-    return (
-        <TreeNode nodeId={endpoint.id} level={level} isLast={false}>
-            <TreeNodeTrigger
-                className="group"
-                onClick={onSelect}
-                onDoubleClick={(e) => {
-                    e.stopPropagation();
-                    onRenameStart();
-                }}
-            >
-                <TreeExpander hasChildren={false} />
-                {isRenaming ? (
-                    <InlineRename
-                        defaultValue={endpoint.name}
-                        onConfirm={onRenameConfirm}
-                        onCancel={onRenameCancel}
-                    />
-                ) : (
-                    <TreeLabel className={isSelected ? "font-medium" : ""}>
-                        {endpoint.name}
-                    </TreeLabel>
-                )}
-                {endpoint.authConfig?.isLoginEndpoint && (
-                    <span
-                        className="inline-flex items-center justify-center rounded border border-amber-500/30 bg-amber-500/15 p-0.5 text-amber-600 dark:text-amber-400 shrink-0 mr-1.5"
-                        title="Login Endpoint (Returns JWT Token)"
-                    >
-                        <KeyRound className="size-3" />
-                    </span>
-                )}
-                {endpoint.authConfig?.requiresAuth && (
-                    <span
-                        className="inline-flex items-center justify-center rounded border border-emerald-500/30 bg-emerald-500/15 p-0.5 text-emerald-600 dark:text-emerald-400 shrink-0 mr-1.5"
-                        title="Requires Authentication (Bearer Token)"
-                    >
-                        <Lock className="size-3" />
-                    </span>
-                )}
-                <MethodBadge method={endpoint.method} className="w-auto mr-1.5 text-[9px]" />
-                <TreeNodeMenu
-                    showNewFolder={false}
-                    showNewFile={false}
-                    onRename={onRenameStart}
-                    onDelete={onDelete}
-                />
-            </TreeNodeTrigger>
-        </TreeNode>
-    );
-}
-
-export function FolderTreeNode({
-    collection,
-    level,
-    isLast,
-    projectId,
-    selectedEndpointId,
-    onSelectEndpoint,
-    renamingId,
-    setRenamingId,
-    onRenameFolder,
-    onRenameEndpoint,
-    onOpenModal,
-    onDeleteFolder,
-    onDeleteEndpoint,
-    endpoints,
-}: {
-    collection: Collection;
-    level: number;
-    isLast: boolean;
-    projectId: string;
-    selectedEndpointId: string | null;
-    onSelectEndpoint: (id: string, projectId: string) => void;
-    renamingId: string | null;
-    setRenamingId: (id: string | null) => void;
-    onRenameFolder: (id: string, name: string) => void;
-    onRenameEndpoint: (id: string, name: string) => void;
-    onOpenModal: (target: ModalTarget) => void;
-    onDeleteFolder: (id: string) => void;
-    onDeleteEndpoint: (id: string) => void;
-    endpoints: Endpoint[];
-}) {
-    const hasChildren =
-        (collection.children?.length ?? 0) > 0 || (collection.endpoints?.length ?? 0) > 0;
-
-    const folderEndpoints = endpoints.filter((endpoint) => endpoint.folderId === collection.id);
-
-    return (
-        <TreeNode nodeId={collection.id} level={level} isLast={isLast}>
-            <TreeNodeTrigger
-                className="group"
-                onDoubleClick={(e) => {
-                    e.stopPropagation();
-                    setRenamingId(collection.id);
-                }}
-            >
-                <TreeExpander hasChildren={hasChildren} />
-                <TreeIcon hasChildren={hasChildren} />
-                {renamingId === collection.id ? (
-                    <InlineRename
-                        defaultValue={collection.name}
-                        onConfirm={(name) => {
-                            commitRename(
-                                collection.name,
-                                name,
-                                (nextName) => {
-                                    onRenameFolder(collection.id, nextName);
-                                },
-                                () => setRenamingId(null),
-                            );
-                        }}
-                        onCancel={() => setRenamingId(null)}
-                    />
-                ) : (
-                    <TreeLabel>{collection.name}</TreeLabel>
-                )}
-                <TreeNodeMenu
-                    onNewFolder={() =>
-                        onOpenModal({ kind: "folder", projectId, parentId: collection.id })
-                    }
-                    onNewFile={() =>
-                        onOpenModal({
-                            kind: "endpoint",
-                            projectId,
-                            folderId: collection.id,
-                        })
-                    }
-                    onRename={() => setRenamingId(collection.id)}
-                    onDelete={() => onDeleteFolder(collection.id)}
-                />
-            </TreeNodeTrigger>
-
-            <TreeNodeContent hasChildren={hasChildren}>
-                {(collection.children ?? []).map((child, index) => (
-                    <FolderTreeNode
-                        key={child.id}
-                        collection={child}
-                        level={level + 1}
-                        isLast={
-                            index === (collection.children?.length ?? 0) - 1 &&
-                            (collection.endpoints?.length ?? 0) === 0
-                        }
-                        projectId={projectId}
-                        selectedEndpointId={selectedEndpointId}
-                        onSelectEndpoint={onSelectEndpoint}
-                        renamingId={renamingId}
-                        setRenamingId={setRenamingId}
-                        onRenameFolder={onRenameFolder}
-                        onRenameEndpoint={onRenameEndpoint}
-                        onOpenModal={onOpenModal}
-                        onDeleteFolder={onDeleteFolder}
-                        onDeleteEndpoint={onDeleteEndpoint}
-                        endpoints={endpoints}
-                    />
-                ))}
-                {folderEndpoints.map((endpoint) => (
-                    <EndpointTreeNode
-                        key={endpoint.id}
-                        endpoint={endpoint}
-                        level={level + 1}
-                        isSelected={selectedEndpointId === endpoint.id}
-                        isRenaming={renamingId === endpoint.id}
-                        onSelect={() => onSelectEndpoint(endpoint.id, projectId)}
-                        onRenameConfirm={(name) => {
-                            commitRename(
-                                endpoint.name,
-                                name,
-                                (nextName) => {
-                                    onRenameEndpoint(endpoint.id, nextName);
-                                },
-                                () => setRenamingId(null),
-                            );
-                        }}
-                        onRenameCancel={() => setRenamingId(null)}
-                        onRenameStart={() => setRenamingId(endpoint.id)}
-                        onDelete={() => onDeleteEndpoint(endpoint.id)}
-                    />
-                ))}
-            </TreeNodeContent>
-        </TreeNode>
-    );
-}
-
-export function ProjectTreeNode({
-    project,
-    level,
-    isLast,
-    selectedEndpointId,
-    onSelectEndpoint,
-    selectedProjectId,
-    onSelectProject,
-    renamingId,
-    setRenamingId,
-    onRenameProject,
-    onRenameFolder,
-    onRenameEndpoint,
-    onOpenModal,
-    onExportProject,
-    onDeleteProject,
-    onDeleteFolder,
-    onDeleteEndpoint,
-}: {
-    project: SidebarProject;
-    level: number;
-    isLast: boolean;
-    selectedEndpointId: string | null;
-    onSelectEndpoint: (id: string, projectId: string) => void;
-    selectedProjectId: string | null;
-    onSelectProject: (id: string) => void;
-    renamingId: string | null;
-    setRenamingId: (id: string | null) => void;
-    onRenameProject: (id: string, name: string) => void;
-    onRenameFolder: (id: string, name: string) => void;
-    onRenameEndpoint: (id: string, name: string) => void;
-    onOpenModal: (target: ModalTarget) => void;
-    onExportProject?: (id: string) => void;
-    onDeleteProject: (id: string) => void;
-    onDeleteFolder: (id: string) => void;
-    onDeleteEndpoint: (id: string) => void;
-}) {
-    const { data: rawFolders = [], isLoading: isLoadingFolders } = useFolders(project.id);
-    const { data: rawEndpoints = [], isLoading: isLoadingEndpoints } = useEndpoints(project.id);
-
-    const isLoading = isLoadingFolders || isLoadingEndpoints;
-
-    const folderTree = buildFolderTree(rawFolders as FolderRow[]);
-
-    const attachEndpoints = (collections: Collection[]): Collection[] =>
-        collections.map((collection) => ({
-            ...collection,
-            endpoints: rawEndpoints.filter(
-                (endpoint) => endpoint.folderId === collection.id,
-            ) as Endpoint[],
-            children: attachEndpoints(collection.children ?? []),
-        }));
-
-    const tree = attachEndpoints(folderTree);
-    const rootEndpoints = rawEndpoints.filter((endpoint) => !endpoint.folderId) as Endpoint[];
-
-    return (
-        <TreeNode nodeId={project.id} level={level} isLast={isLast}>
-            <TreeNodeTrigger
-                className="group"
-                onClick={() => onSelectProject(project.id)}
-                onDoubleClick={(e) => {
-                    e.stopPropagation();
-                    setRenamingId(project.id);
-                }}
-            >
-                <TreeExpander hasChildren />
-                <TreeIcon hasChildren />
-                {renamingId === project.id ? (
-                    <InlineRename
-                        defaultValue={project.title}
-                        onConfirm={(name) => {
-                            commitRename(
-                                project.title,
-                                name,
-                                (nextName) => {
-                                    onRenameProject(project.id, nextName);
-                                },
-                                () => setRenamingId(null),
-                            );
-                        }}
-                        onCancel={() => setRenamingId(null)}
-                    />
-                ) : (
-                    <TreeLabel
-                        className={cn(
-                            "font-medium",
-                            selectedProjectId === project.id && "font-bold text-primary",
-                        )}
-                    >
-                        {project.title}
-                    </TreeLabel>
-                )}
-                <TreeNodeMenu
-                    onNewFolder={() => onOpenModal({ kind: "folder", projectId: project.id })}
-                    onNewFile={() => onOpenModal({ kind: "endpoint", projectId: project.id })}
-                    onSettings={() =>
-                        onOpenModal({ kind: "projectSettings", projectId: project.id })
-                    }
-                    onExport={onExportProject ? () => onExportProject(project.id) : undefined}
-                    onRename={() => setRenamingId(project.id)}
-                    onDelete={() => onDeleteProject(project.id)}
-                />
-            </TreeNodeTrigger>
-
-            <TreeNodeContent hasChildren>
-                {isLoading ? (
-                    <ProjectTreeNodeSkeleton level={level + 1} />
-                ) : (
-                    <>
-                        {rootEndpoints.map((endpoint) => (
-                            <EndpointTreeNode
-                                key={endpoint.id}
-                                endpoint={endpoint}
-                                level={level + 1}
-                                isSelected={selectedEndpointId === endpoint.id}
-                                isRenaming={renamingId === endpoint.id}
-                                onSelect={() => onSelectEndpoint(endpoint.id, project.id)}
-                                onRenameConfirm={(name) => {
-                                    commitRename(
-                                        endpoint.name,
-                                        name,
-                                        (nextName) => {
-                                            onRenameEndpoint(endpoint.id, nextName);
-                                        },
-                                        () => setRenamingId(null),
-                                    );
-                                }}
-                                onRenameCancel={() => setRenamingId(null)}
-                                onRenameStart={() => setRenamingId(endpoint.id)}
-                                onDelete={() => onDeleteEndpoint(endpoint.id)}
-                            />
-                        ))}
-                        {tree.map((collection, index) => (
-                            <FolderTreeNode
-                                key={collection.id}
-                                collection={collection}
-                                level={level + 1}
-                                isLast={index === tree.length - 1}
-                                projectId={project.id}
-                                selectedEndpointId={selectedEndpointId}
-                                onSelectEndpoint={onSelectEndpoint}
-                                renamingId={renamingId}
-                                setRenamingId={setRenamingId}
-                                onRenameFolder={onRenameFolder}
-                                onRenameEndpoint={onRenameEndpoint}
-                                onOpenModal={onOpenModal}
-                                onDeleteFolder={onDeleteFolder}
-                                onDeleteEndpoint={onDeleteEndpoint}
-                                endpoints={rawEndpoints as Endpoint[]}
-                            />
-                        ))}
-                    </>
-                )}
-            </TreeNodeContent>
-        </TreeNode>
-    );
-}
+export { EndpointTreeNode } from "./endpoint-tree-node";
+export { FolderTreeNode } from "./folder-tree-node";
+export { ProjectTreeNode } from "./project-tree-node";
+export { commitRename } from "./tree-utils";
diff --git a/src/modules/workspace/ui/components/sidebar/tree-utils.ts b/src/modules/workspace/ui/components/sidebar/tree-utils.ts
new file mode 100644
index 0000000..08bf50d
--- /dev/null
+++ b/src/modules/workspace/ui/components/sidebar/tree-utils.ts
@@ -0,0 +1,14 @@
+export function commitRename<T extends string>(
+    currentName: string,
+    nextName: string,
+    onRename: (name: T) => void,
+    onFinish: () => void,
+) {
+    const normalizedName = nextName.trim() || currentName;
+
+    if (normalizedName !== currentName) {
+        onRename(normalizedName as T);
+    }
+
+    onFinish();
+}
diff --git a/src/modules/workspace/ui/components/sidebar/use-sidebar-actions.ts b/src/modules/workspace/ui/components/sidebar/use-sidebar-actions.ts
new file mode 100644
index 0000000..0147bdb
--- /dev/null
+++ b/src/modules/workspace/ui/components/sidebar/use-sidebar-actions.ts
@@ -0,0 +1,83 @@
+import { useState } from "react";
+import { toast } from "sonner";
+import {
+    useCreateProject,
+    useDeleteProject,
+    useImportProject,
+    useProjects,
+    useUpdateProject,
+} from "~/hooks/use-projects";
+import { useCreateFolder, useDeleteFolder, useRenameFolder } from "~/hooks/use-folders";
+import { useCreateEndpoint, useDeleteEndpoint, useUpdateEndpoint } from "~/hooks/use-endpoints";
+import { api } from "~/trpc/react";
+import type { ModalTarget } from "./types";
+
+export function useSidebarActions() {
+    const { data: projects = [], isLoading: isLoadingProjects } = useProjects();
+    const [renamingId, setRenamingId] = useState<string | null>(null);
+    const [modal, setModal] = useState<ModalTarget | null>(null);
+    const [confirmState, setConfirmState] = useState<{
+        open: boolean;
+        title: string;
+        description: string;
+        onConfirm: () => void;
+    } | null>(null);
+
+    const createFolder = useCreateFolder();
+    const deleteFolder = useDeleteFolder();
+    const updateFolder = useRenameFolder();
+    const createProject = useCreateProject();
+    const deleteProject = useDeleteProject();
+    const updateProject = useUpdateProject();
+    const importProject = useImportProject();
+    const createEndpoint = useCreateEndpoint();
+    const deleteEndpoint = useDeleteEndpoint();
+    const updateEndpoint = useUpdateEndpoint();
+    const trpcUtils = api.useUtils();
+
+    const confirmDangerousAction = (title: string, description: string, onConfirm: () => void) => {
+        setConfirmState({ open: true, title, description, onConfirm });
+    };
+
+    const handleExportProject = async (projectId: string) => {
+        try {
+            const data = await trpcUtils.project.exportProject.fetch({ id: projectId });
+            const jsonString = JSON.stringify(data, null, 2);
+            const blob = new Blob([jsonString], { type: "application/json" });
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement("a");
+            a.href = url;
+            a.download = `${data.project.title.toLowerCase().replace(/[^a-z0-9]/g, "-")}-export.json`;
+            document.body.appendChild(a);
+            a.click();
+            document.body.removeChild(a);
+            URL.revokeObjectURL(url);
+            toast.success("Project exported");
+        } catch (error) {
+            toast.error(error instanceof Error ? error.message : "Failed to export project");
+        }
+    };
+
+    return {
+        projects,
+        isLoadingProjects,
+        renamingId,
+        setRenamingId,
+        modal,
+        setModal,
+        confirmState,
+        setConfirmState,
+        confirmDangerousAction,
+        handleExportProject,
+        createFolder,
+        deleteFolder,
+        updateFolder,
+        createProject,
+        deleteProject,
+        updateProject,
+        importProject,
+        createEndpoint,
+        deleteEndpoint,
+        updateEndpoint,
+    };
+}
diff --git a/src/modules/workspace/ui/components/sidebar/workspace-sidebar.tsx b/src/modules/workspace/ui/components/sidebar/workspace-sidebar.tsx
index c47b695..e56c203 100644
--- a/src/modules/workspace/ui/components/sidebar/workspace-sidebar.tsx
+++ b/src/modules/workspace/ui/components/sidebar/workspace-sidebar.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { forwardRef, useImperativeHandle, useState } from "react";
+import { forwardRef, useImperativeHandle } from "react";
 import { Plus, Upload } from "lucide-react";
 import { Button } from "~/components/ui/button";
 import { ConfirmDialog } from "~/components/confirm-dialog";
@@ -14,18 +14,8 @@ import {
 import { ProjectSettingsDialog } from "./project-settings-dialog";
 import { ProjectTreeNode } from "./sidebar-tree";
 import { SidebarSkeleton } from "./sidebar-skeleton";
-import {
-    useCreateProject,
-    useDeleteProject,
-    useImportProject,
-    useProjects,
-    useUpdateProject,
-} from "~/hooks/use-projects";
-import { useCreateFolder, useDeleteFolder, useRenameFolder } from "~/hooks/use-folders";
-import { useCreateEndpoint, useDeleteEndpoint, useUpdateEndpoint } from "~/hooks/use-endpoints";
-import { api } from "~/trpc/react";
-import { toast } from "sonner";
-import type { ModalTarget, SidebarProject } from "./types";
+import type { SidebarProject } from "./types";
+import { useSidebarActions } from "./use-sidebar-actions";
 
 export interface SidebarHandle {
     openProjectModal: () => void;
@@ -44,56 +34,34 @@ export const Sidebar = forwardRef<
     { selectedEndpointId, onSelectEndpoint, selectedProjectId, onSelectProject },
     ref,
 ) {
-    const { data: projects = [], isLoading: isLoadingProjects } = useProjects();
-    const [renamingId, setRenamingId] = useState<string | null>(null);
-    const [modal, setModal] = useState<ModalTarget | null>(null);
-    const [confirmState, setConfirmState] = useState<{
-        open: boolean;
-        title: string;
-        description: string;
-        onConfirm: () => void;
-    } | null>(null);
-
-    const createFolder = useCreateFolder();
-    const deleteFolder = useDeleteFolder();
-    const updateFolder = useRenameFolder();
-    const createProject = useCreateProject();
-    const deleteProject = useDeleteProject();
-    const updateProject = useUpdateProject();
-    const importProject = useImportProject();
-    const createEndpoint = useCreateEndpoint();
-    const deleteEndpoint = useDeleteEndpoint();
-    const updateEndpoint = useUpdateEndpoint();
-    const trpcUtils = api.useUtils();
+    const {
+        projects,
+        isLoadingProjects,
+        renamingId,
+        setRenamingId,
+        modal,
+        setModal,
+        confirmState,
+        setConfirmState,
+        confirmDangerousAction,
+        handleExportProject,
+        createFolder,
+        deleteFolder,
+        updateFolder,
+        createProject,
+        deleteProject,
+        updateProject,
+        importProject,
+        createEndpoint,
+        deleteEndpoint,
+        updateEndpoint,
+    } = useSidebarActions();
 
     useImperativeHandle(ref, () => ({
         openProjectModal: () => setModal({ kind: "project" }),
         openImportModal: () => setModal({ kind: "importProject" }),
     }));
 
-    const confirmDangerousAction = (title: string, description: string, onConfirm: () => void) => {
-        setConfirmState({ open: true, title, description, onConfirm });
-    };
-
-    const handleExportProject = async (projectId: string) => {
-        try {
-            const data = await trpcUtils.project.exportProject.fetch({ id: projectId });
-            const jsonString = JSON.stringify(data, null, 2);
-            const blob = new Blob([jsonString], { type: "application/json" });
-            const url = URL.createObjectURL(blob);
-            const a = document.createElement("a");
-            a.href = url;
-            a.download = `${data.project.title.toLowerCase().replace(/[^a-z0-9]/g, "-")}-export.json`;
-            document.body.appendChild(a);
-            a.click();
-            document.body.removeChild(a);
-            URL.revokeObjectURL(url);
-            toast.success("Project exported");
-        } catch (error) {
-            toast.error(error instanceof Error ? error.message : "Failed to export project");
-        }
-    };
-
     return (
         <>
             <aside className="flex h-full w-full flex-col bg-background">

From 82fa8843dc82e87f0d260098957c8f5679fa08c7 Mon Sep 17 00:00:00 2001
From: Grishma Dhakal <dhakalgrishma5@gmail.com>
Date: Sun, 26 Jul 2026 13:40:57 +0545
Subject: [PATCH 5/8] refactor(dashboard): simplify UI styling and add json5
 for trailing comma support

---
 package.json                                  |   2 +
 pnpm-lock.yaml                                |  14 ++
 src/lib/component-templates/codegen-utils.ts  |   2 +-
 src/lib/mock-path.ts                          |   2 +-
 .../dashboard/endpoint-auth-form.tsx          | 181 ++++++++----------
 .../schemaBuilder/raw-json-editor.tsx         |   7 +-
 .../schemaBuilder/schema-builder.tsx          |  56 +++---
 .../schemaPreview/schema-preview.tsx          |  38 ++--
 8 files changed, 138 insertions(+), 164 deletions(-)

diff --git a/package.json b/package.json
index fb2f3a2..324b7ca 100644
--- a/package.json
+++ b/package.json
@@ -35,6 +35,7 @@
         "clsx": "^2.1.1",
         "drizzle-kit": "^0.31.10",
         "drizzle-orm": "^0.41.0",
+        "json5": "^2.2.3",
         "jsonwebtoken": "^9.0.3",
         "lucide-react": "^1.17.0",
         "motion": "^12.40.0",
@@ -56,6 +57,7 @@
     "devDependencies": {
         "@tailwindcss/postcss": "^4.0.15",
         "@types/better-sqlite3": "^7.6.13",
+        "@types/json5": "^2.2.0",
         "@types/jsonwebtoken": "^9.0.10",
         "@types/node": "^20.14.10",
         "@types/react": "^19.0.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 44b9ff4..fdb67cd 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -44,6 +44,9 @@ importers:
       drizzle-orm:
         specifier: ^0.41.0
         version: 0.41.0(@types/better-sqlite3@7.6.13)(better-sqlite3@12.11.1)
+      json5:
+        specifier: ^2.2.3
+        version: 2.2.3
       jsonwebtoken:
         specifier: ^9.0.3
         version: 9.0.3
@@ -102,6 +105,9 @@ importers:
       '@types/better-sqlite3':
         specifier: ^7.6.13
         version: 7.6.13
+      '@types/json5':
+        specifier: ^2.2.0
+        version: 2.2.0
       '@types/jsonwebtoken':
         specifier: ^9.0.10
         version: 9.0.10
@@ -1637,6 +1643,10 @@ packages:
   '@types/hast@3.0.4':
     resolution: {integrity: sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==}
 
+  '@types/json5@2.2.0':
+    resolution: {integrity: sha512-NrVug5woqbvNZ0WX+Gv4R+L4TGddtmFek2u8RtccAgFZWtS9QXF2xCXY22/M4nzkaKF0q9Fc6M/5rxLDhfwc/A==}
+    deprecated: This is a stub types definition. json5 provides its own type definitions, so you do not need this installed.
+
   '@types/jsonwebtoken@9.0.10':
     resolution: {integrity: sha512-asx5hIG9Qmf/1oStypjanR7iKTv0gXQ1Ov/jfrX6kS/EO0OFni8orbmGCn0672NHR3kXHwpAwR+B368ZGN/2rA==}
 
@@ -4705,6 +4715,10 @@ snapshots:
     dependencies:
       '@types/unist': 3.0.3
 
+  '@types/json5@2.2.0':
+    dependencies:
+      json5: 2.2.3
+
   '@types/jsonwebtoken@9.0.10':
     dependencies:
       '@types/ms': 2.1.0
diff --git a/src/lib/component-templates/codegen-utils.ts b/src/lib/component-templates/codegen-utils.ts
index d5e33e0..1b01cd4 100644
--- a/src/lib/component-templates/codegen-utils.ts
+++ b/src/lib/component-templates/codegen-utils.ts
@@ -115,7 +115,7 @@ ${fieldLines.map((l) => `  ${l}`).join("\n")}
 /**
  * Builds a vanilla-JS fetch + DOM-render script block for HTML templates.
  * `renderFn` is a JS expression (string) that maps a single item to an
- * HTML string — the caller provides the item-level template string.
+ * HTML string, the caller provides the item-level template string.
  */
 export function buildHtmlFetchScript(
     endpointUrl: string,
diff --git a/src/lib/mock-path.ts b/src/lib/mock-path.ts
index 35e4ce8..213529b 100644
--- a/src/lib/mock-path.ts
+++ b/src/lib/mock-path.ts
@@ -32,7 +32,7 @@ export function matchPath(pattern: string, incoming: string): boolean {
     return regex.test(incoming);
 }
 
-/** Mock route path segment after `/mock/{projectId}` — basePath + endpoint.path only. */
+/** Mock route path segment after `/mock/{projectId}`, basePath + endpoint.path only. */
 export function buildMockPath(basePath: string | undefined | null, endpointPath: string): string {
     return joinPath(basePath, endpointPath);
 }
diff --git a/src/modules/workspace/ui/components/dashboard/endpoint-auth-form.tsx b/src/modules/workspace/ui/components/dashboard/endpoint-auth-form.tsx
index 345f5ff..b6f99ba 100644
--- a/src/modules/workspace/ui/components/dashboard/endpoint-auth-form.tsx
+++ b/src/modules/workspace/ui/components/dashboard/endpoint-auth-form.tsx
@@ -5,9 +5,8 @@ import { useAuthConfig, useUpsertAuthConfig } from "~/hooks/use-auth-config";
 import { Button } from "~/components/ui/button";
 import { Input } from "~/components/ui/input";
 import { Label } from "~/components/ui/label";
-import { Badge } from "~/components/ui/badge";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/components/ui/card";
-import { Shield, ShieldAlert, ShieldCheck, KeyRound, Clock, CheckCircle2 } from "lucide-react";
+import { Separator } from "~/components/ui/separator";
 
 interface EndpointAuthFormProps {
     endpointId: string;
@@ -69,115 +68,87 @@ export function EndpointAuthForm({ endpointId, onSuccess }: EndpointAuthFormProp
     return (
         <Card className="border-none py-6 px-4 shadow-none gap-6 rounded-none h-full">
             <CardHeader className="gap-1 px-0">
-                <div className="flex items-center justify-between">
-                    <CardTitle className="text-xs font-semibold uppercase tracking-wider text-muted-foreground flex items-center gap-2">
-                        <Shield className="h-4 w-4 text-primary" />
-                        Endpoint Authentication Settings
-                    </CardTitle>
-                    {authType === "login" && (
-                        <Badge className="bg-amber-500/15 text-amber-600 dark:text-amber-400 border-amber-500/30 gap-1">
-                            <KeyRound className="h-3 w-3" /> LOGIN ENDPOINT
-                        </Badge>
-                    )}
-                    {authType === "protected" && (
-                        <Badge className="bg-emerald-500/15 text-emerald-600 dark:text-emerald-400 border-emerald-500/30 gap-1">
-                            <ShieldCheck className="h-3 w-3" /> REQUIRES AUTH
-                        </Badge>
-                    )}
-                    {authType === "none" && (
-                        <Badge variant="outline" className="text-muted-foreground gap-1">
-                            PUBLIC
-                        </Badge>
-                    )}
-                </div>
+                <CardTitle className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+                    Authentication
+                </CardTitle>
                 <CardDescription className="font-mono text-xs">
                     Configure JWT authentication behavior for this endpoint.
                 </CardDescription>
             </CardHeader>
 
             <CardContent className="space-y-6 px-0">
-                {/* Options Selection */}
+                {/* Auth type options */}
                 <div className="grid gap-3">
-                    {/* Option 1: None */}
                     <div
                         onClick={() => setAuthType("none")}
-                        className={`group relative flex cursor-pointer items-start gap-4 rounded-xl border p-4 transition-all ${
+                        className={`group relative flex cursor-pointer items-start gap-4 rounded-lg border p-4 transition-all ${
                             authType === "none"
-                                ? "border-primary bg-primary/5 ring-1 ring-primary"
-                                : "border-border bg-card hover:bg-muted/50"
+                                ? "border-primary/50 bg-muted/50"
+                                : "border-border hover:bg-muted/30"
                         }`}
                     >
-                        <div className="mt-0.5 rounded-lg border bg-background p-2 text-muted-foreground group-hover:text-foreground">
-                            <Shield className="h-5 w-5" />
-                        </div>
                         <div className="flex-1 space-y-1">
                             <div className="flex items-center justify-between">
                                 <Label className="cursor-pointer font-semibold text-sm">
-                                    None (Public Endpoint)
+                                    None (Public)
                                 </Label>
                                 {authType === "none" && (
-                                    <CheckCircle2 className="h-4 w-4 text-primary" />
+                                    <span className="text-xs text-primary font-medium">Active</span>
                                 )}
                             </div>
                             <p className="text-xs text-muted-foreground">
-                                Anyone can request mock data from this endpoint without providing
-                                credentials or tokens.
+                                Anyone can request mock data without providing credentials.
                             </p>
                         </div>
                     </div>
 
-                    {/* Option 2: Login Endpoint */}
                     <div
                         onClick={() => setAuthType("login")}
-                        className={`group relative flex cursor-pointer items-start gap-4 rounded-xl border p-4 transition-all ${
+                        className={`group relative flex cursor-pointer items-start gap-4 rounded-lg border p-4 transition-all ${
                             authType === "login"
-                                ? "border-amber-500 bg-amber-500/5 ring-1 ring-amber-500"
-                                : "border-border bg-card hover:bg-muted/50"
+                                ? "border-amber-500/50 bg-muted/50"
+                                : "border-border hover:bg-muted/30"
                         }`}
                     >
-                        <div className="mt-0.5 rounded-lg border border-amber-500/30 bg-amber-500/10 p-2 text-amber-600 dark:text-amber-400">
-                            <KeyRound className="h-5 w-5" />
-                        </div>
                         <div className="flex-1 space-y-1">
                             <div className="flex items-center justify-between">
-                                <Label className="cursor-pointer font-semibold text-sm text-foreground">
+                                <Label className="cursor-pointer font-semibold text-sm">
                                     Login Endpoint
                                 </Label>
                                 {authType === "login" && (
-                                    <CheckCircle2 className="h-4 w-4 text-amber-500" />
+                                    <span className="text-xs text-amber-600 dark:text-amber-400 font-medium">
+                                        Active
+                                    </span>
                                 )}
                             </div>
                             <p className="text-xs text-muted-foreground">
-                                Issues a signed JWT token along with mock data when invoked. Useful
-                                for mock authentication flows.
+                                Issues a signed JWT token along with mock data when invoked.
                             </p>
                         </div>
                     </div>
 
-                    {/* Option 3: Requires Auth */}
                     <div
                         onClick={() => setAuthType("protected")}
-                        className={`group relative flex cursor-pointer items-start gap-4 rounded-xl border p-4 transition-all ${
+                        className={`group relative flex cursor-pointer items-start gap-4 rounded-lg border p-4 transition-all ${
                             authType === "protected"
-                                ? "border-emerald-500 bg-emerald-500/5 ring-1 ring-emerald-500"
-                                : "border-border bg-card hover:bg-muted/50"
+                                ? "border-emerald-500/50 bg-muted/50"
+                                : "border-border hover:bg-muted/30"
                         }`}
                     >
-                        <div className="mt-0.5 rounded-lg border border-emerald-500/30 bg-emerald-500/10 p-2 text-emerald-600 dark:text-emerald-400">
-                            <ShieldAlert className="h-5 w-5" />
-                        </div>
                         <div className="flex-1 space-y-1">
                             <div className="flex items-center justify-between">
-                                <Label className="cursor-pointer font-semibold text-sm text-foreground">
+                                <Label className="cursor-pointer font-semibold text-sm">
                                     Requires Authentication
                                 </Label>
                                 {authType === "protected" && (
-                                    <CheckCircle2 className="h-4 w-4 text-emerald-500" />
+                                    <span className="text-xs text-emerald-600 dark:text-emerald-400 font-medium">
+                                        Active
+                                    </span>
                                 )}
                             </div>
                             <p className="text-xs text-muted-foreground">
                                 Protects mock data. Requires a valid{" "}
-                                <code className="rounded bg-muted px-1 py-0.5 font-mono text-[11px]">
+                                <code className="font-mono">
                                     Authorization: Bearer &lt;token&gt;
                                 </code>{" "}
                                 header.
@@ -186,60 +157,62 @@ export function EndpointAuthForm({ endpointId, onSuccess }: EndpointAuthFormProp
                     </div>
                 </div>
 
-                {/* Token Expiry Config (only shown for Login Endpoint) */}
+                {/* Token expiry config for login endpoint */}
                 {authType === "login" && (
-                    <div className="space-y-2 rounded-xl border border-amber-500/20 bg-amber-500/5 p-4 animate-in fade-in slide-in-from-top-2 duration-200">
-                        <div className="flex items-center gap-2">
-                            <Clock className="h-4 w-4 text-amber-600 dark:text-amber-400" />
+                    <>
+                        <Separator />
+                        <div className="space-y-2">
                             <Label
                                 htmlFor="token-expiry"
-                                className="text-xs font-semibold uppercase tracking-wide text-foreground"
+                                className="text-xs font-semibold uppercase tracking-wide text-muted-foreground"
                             >
-                                Token Expiry (seconds)
+                                Token Expiry
                             </Label>
-                        </div>
-                        <div className="flex items-center gap-3">
-                            <div className="relative flex-1">
-                                <Input
-                                    id="token-expiry"
-                                    type="number"
-                                    min={1}
-                                    value={tokenExpirySeconds}
-                                    onChange={(e) => setTokenExpirySeconds(Number(e.target.value))}
-                                    className="font-mono text-sm pr-12 bg-background"
-                                    placeholder="3600"
-                                />
-                                <span className="pointer-events-none absolute inset-y-0 right-3 flex items-center text-xs text-muted-foreground">
-                                    sec
-                                </span>
-                            </div>
-
-                            <div className="flex gap-1.5">
-                                <Button
-                                    type="button"
-                                    variant="outline"
-                                    size="sm"
-                                    onClick={() => setTokenExpirySeconds(3600)}
-                                    className="h-9 text-xs font-mono"
-                                >
-                                    1h (3600s)
-                                </Button>
-                                <Button
-                                    type="button"
-                                    variant="outline"
-                                    size="sm"
-                                    onClick={() => setTokenExpirySeconds(86400)}
-                                    className="h-9 text-xs font-mono"
-                                >
-                                    24h (86400s)
-                                </Button>
+                            <div className="flex items-center gap-3">
+                                <div className="relative flex-1">
+                                    <Input
+                                        id="token-expiry"
+                                        type="number"
+                                        min={1}
+                                        value={tokenExpirySeconds}
+                                        onChange={(e) =>
+                                            setTokenExpirySeconds(Number(e.target.value))
+                                        }
+                                        className="font-mono text-sm pr-10 bg-muted border-0 shadow-none"
+                                        placeholder="3600"
+                                    />
+                                    <span className="pointer-events-none absolute inset-y-0 right-3 flex items-center text-xs text-muted-foreground">
+                                        sec
+                                    </span>
+                                </div>
+
+                                <div className="flex gap-1.5">
+                                    <Button
+                                        type="button"
+                                        variant="outline"
+                                        size="sm"
+                                        onClick={() => setTokenExpirySeconds(3600)}
+                                        className="h-9 text-xs font-mono"
+                                    >
+                                        1h
+                                    </Button>
+                                    <Button
+                                        type="button"
+                                        variant="outline"
+                                        size="sm"
+                                        onClick={() => setTokenExpirySeconds(86400)}
+                                        className="h-9 text-xs font-mono"
+                                    >
+                                        24h
+                                    </Button>
+                                </div>
                             </div>
+                            <p className="text-[11px] text-muted-foreground">
+                                JWT tokens generated by this endpoint will expire after this
+                                duration. Default: 3600s (1 hour).
+                            </p>
                         </div>
-                        <p className="text-[11px] text-muted-foreground">
-                            JWT tokens generated by this endpoint will expire after this duration.
-                            Default: 3600s (1 hour).
-                        </p>
-                    </div>
+                    </>
                 )}
             </CardContent>
 
@@ -249,7 +222,7 @@ export function EndpointAuthForm({ endpointId, onSuccess }: EndpointAuthFormProp
                     disabled={upsertConfig.isPending}
                     className="h-10 gap-2 font-semibold text-primary-foreground"
                 >
-                    {upsertConfig.isPending ? "Saving..." : "Save Authentication Settings"}
+                    {upsertConfig.isPending ? "Saving..." : "Save"}
                 </Button>
             </div>
         </Card>
diff --git a/src/modules/workspace/ui/components/dashboard/schemaBuilder/raw-json-editor.tsx b/src/modules/workspace/ui/components/dashboard/schemaBuilder/raw-json-editor.tsx
index 9f81f6b..63133a7 100644
--- a/src/modules/workspace/ui/components/dashboard/schemaBuilder/raw-json-editor.tsx
+++ b/src/modules/workspace/ui/components/dashboard/schemaBuilder/raw-json-editor.tsx
@@ -1,3 +1,4 @@
+import JSON5 from "json5";
 import { toast } from "sonner";
 import { Button } from "~/components/ui/button";
 import { fieldsFromSchema } from "~/lib/faker-options";
@@ -29,7 +30,7 @@ export function RawJsonEditor({
     function handleChange(val: string) {
         onChange(val);
         try {
-            const parsed = JSON.parse(val);
+            const parsed = JSON5.parse(val);
             onFieldsSync(fieldsFromSchema(parsed));
             onErrorChange(null);
         } catch (err: any) {
@@ -39,7 +40,7 @@ export function RawJsonEditor({
 
     function handleFormat() {
         try {
-            const parsed = JSON.parse(value);
+            const parsed = JSON5.parse(value);
             const formatted = JSON.stringify(parsed, null, 2);
             onChange(formatted);
             onErrorChange(null);
@@ -162,7 +163,7 @@ export function RawJsonEditor({
         <div className="space-y-2">
             <div className="flex items-center justify-between">
                 <span className="text-[11px] font-mono text-muted-foreground">
-                    JSON Editor (Tab / Enter auto-indent, &quot; auto-pairs)
+                    JSON Editor (Tab / Enter auto-indent, &quot; auto-pairs, trailing commas OK)
                 </span>
                 <Button
                     type="button"
diff --git a/src/modules/workspace/ui/components/dashboard/schemaBuilder/schema-builder.tsx b/src/modules/workspace/ui/components/dashboard/schemaBuilder/schema-builder.tsx
index e004b4a..818c3a4 100644
--- a/src/modules/workspace/ui/components/dashboard/schemaBuilder/schema-builder.tsx
+++ b/src/modules/workspace/ui/components/dashboard/schemaBuilder/schema-builder.tsx
@@ -1,8 +1,9 @@
 "use client";
 
 import React, { useEffect, useMemo, useState } from "react";
-import { MonitorPlay, SlidersHorizontal, Shield } from "lucide-react";
+import { SlidersHorizontal, Shield } from "lucide-react";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/components/ui/card";
+import { CodeBlock } from "~/components/code-block";
 import { Input } from "~/components/ui/input";
 import { Label } from "~/components/ui/label";
 import { Separator } from "~/components/ui/separator";
@@ -187,19 +188,19 @@ export function SchemaBuilder({
                 orientation="horizontal"
                 className="w-full flex-1 flex flex-col gap-0"
             >
-                <div className="w-full px-6 pt-5 pb-3 border-b bg-muted/30">
-                    <TabsList className="grid w-full grid-cols-2 h-10">
+                <div className="w-full px-6 pt-5 pb-3 border-b">
+                    <TabsList className="flex w-full bg-zinc-200 dark:bg-zinc-800 p-0.5 rounded-lg h-9">
                         <TabsTrigger
                             value="schema"
-                            className="gap-2 text-xs font-semibold uppercase tracking-wider"
+                            className="flex-1 gap-2 text-xs font-semibold font-mono rounded-md data-[state=active]:bg-white data-[state=active]:dark:bg-zinc-900 data-[state=active]:shadow-xs"
                         >
-                            <SlidersHorizontal className="h-4 w-4" /> Schema &amp; Behavior
+                            <SlidersHorizontal className="h-3.5 w-3.5 text-blue-500" /> Schema
                         </TabsTrigger>
                         <TabsTrigger
                             value="auth"
-                            className="gap-2 text-xs font-semibold uppercase tracking-wider"
+                            className="flex-1 gap-2 text-xs font-semibold font-mono rounded-md data-[state=active]:bg-white data-[state=active]:dark:bg-zinc-900 data-[state=active]:shadow-xs"
                         >
-                            <Shield className="h-4 w-4 text-emerald-500" /> Authentication
+                            <Shield className="h-3.5 w-3.5 text-emerald-500" /> Authentication
                         </TabsTrigger>
                     </TabsList>
                 </div>
@@ -243,7 +244,7 @@ export function SchemaBuilder({
                             <div className="space-y-1.5">
                                 <Label className="text-sm font-semibold">Schema path</Label>
                                 <div className="flex items-stretch gap-2">
-                                    <div className="flex rounded-md bg-muted p-0.5 shrink-0">
+                                    <div className="flex bg-zinc-200 dark:bg-zinc-800 p-0.5 rounded-lg text-[11px] font-mono shrink-0">
                                         {(
                                             [
                                                 "GET",
@@ -257,17 +258,17 @@ export function SchemaBuilder({
                                                 key={m}
                                                 type="button"
                                                 onClick={() => setHttpMethod(m)}
-                                                className={`px-2 py-1 rounded-sm text-[11px] font-bold tracking-wide transition-colors ${
+                                                className={`px-2 py-1 rounded-md font-bold tracking-wide transition-colors ${
                                                     httpMethod === m
                                                         ? m === "GET"
-                                                            ? "bg-emerald-500/20 text-emerald-400 shadow-xs"
+                                                            ? "bg-emerald-100 dark:bg-emerald-900/50 text-emerald-700 dark:text-emerald-300 shadow-xs"
                                                             : m === "POST"
-                                                              ? "bg-blue-500/20 text-blue-400 shadow-xs"
+                                                              ? "bg-blue-100 dark:bg-blue-900/50 text-blue-700 dark:text-blue-300 shadow-xs"
                                                               : m === "PUT"
-                                                                ? "bg-amber-500/20 text-amber-400 shadow-xs"
+                                                                ? "bg-amber-100 dark:bg-amber-900/50 text-amber-700 dark:text-amber-300 shadow-xs"
                                                                 : m === "PATCH"
-                                                                  ? "bg-purple-500/20 text-purple-400 shadow-xs"
-                                                                  : "bg-rose-500/20 text-rose-400 shadow-xs"
+                                                                  ? "bg-purple-100 dark:bg-purple-900/50 text-purple-700 dark:text-purple-300 shadow-xs"
+                                                                  : "bg-rose-100 dark:bg-rose-900/50 text-rose-700 dark:text-rose-300 shadow-xs"
                                                         : "text-muted-foreground hover:text-foreground"
                                                 }`}
                                             >
@@ -318,7 +319,7 @@ export function SchemaBuilder({
                                         </Label>
                                     </div>
                                     <div className="flex items-center gap-2">
-                                        <div className="flex rounded-md bg-muted p-0.5 text-xs">
+                                        <div className="flex items-center bg-zinc-200 dark:bg-zinc-800 p-0.5 rounded-lg text-xs font-mono">
                                             <button
                                                 type="button"
                                                 onClick={() => {
@@ -334,9 +335,9 @@ export function SchemaBuilder({
                                                     }
                                                     setEditorMode("flat");
                                                 }}
-                                                className={`px-2.5 py-1 rounded-sm font-medium transition-colors ${
+                                                className={`px-2.5 py-1 rounded-md font-medium transition-colors ${
                                                     editorMode === "flat"
-                                                        ? "bg-background text-foreground shadow-xs font-semibold"
+                                                        ? "bg-white dark:bg-zinc-900 text-foreground shadow-xs"
                                                         : "text-muted-foreground hover:text-foreground"
                                                 }`}
                                             >
@@ -353,9 +354,9 @@ export function SchemaBuilder({
                                                     }
                                                     setEditorMode("raw");
                                                 }}
-                                                className={`px-2.5 py-1 rounded-sm font-medium transition-colors ${
+                                                className={`px-2.5 py-1 rounded-md font-medium transition-colors ${
                                                     editorMode === "raw"
-                                                        ? "bg-background text-foreground shadow-xs font-semibold"
+                                                        ? "bg-white dark:bg-zinc-900 text-foreground shadow-xs"
                                                         : "text-muted-foreground hover:text-foreground"
                                                 }`}
                                             >
@@ -393,17 +394,12 @@ export function SchemaBuilder({
                             <Separator />
 
                             {/* Live sample data preview */}
-                            <div className="overflow-hidden rounded-lg border border-border">
-                                <div className="flex items-center gap-1.5 border-b bg-muted/40 px-3 py-2">
-                                    <MonitorPlay className="h-3 w-3 text-primary" />
-                                    <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
-                                        Live preview
-                                    </span>
-                                </div>
-                                <pre className="bg-zinc-950 p-3 font-mono text-[11px] leading-relaxed text-zinc-100 overflow-x-auto">
-                                    {JSON.stringify(previewData, null, 2)}
-                                </pre>
-                            </div>
+                            <CodeBlock
+                                code={JSON.stringify(previewData, null, 2)}
+                                lang="json"
+                                maxHeight="200px"
+                                showCopyButton={false}
+                            />
                         </CardContent>
                     </Card>
                 </TabsContent>
diff --git a/src/modules/workspace/ui/components/dashboard/schemaPreview/schema-preview.tsx b/src/modules/workspace/ui/components/dashboard/schemaPreview/schema-preview.tsx
index 377cb87..1733d8d 100644
--- a/src/modules/workspace/ui/components/dashboard/schemaPreview/schema-preview.tsx
+++ b/src/modules/workspace/ui/components/dashboard/schemaPreview/schema-preview.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useCallback, useEffect, useRef, useState } from "react";
-import { Code2, RotateCw, ShieldAlert, LayoutTemplate, Copy, Check } from "lucide-react";
+import { Code2, RotateCw, LayoutTemplate, Copy, Check } from "lucide-react";
 import { Card, CardContent, CardHeader } from "~/components/ui/card";
 import { CodeBlock } from "~/components/code-block";
 import { Button } from "~/components/ui/button";
@@ -172,34 +172,22 @@ export function SchemaPreview({
 
                 <CardContent className="space-y-6">
                     {requiresAuth && !bearerToken && (
-                        <div className="flex items-start gap-3 rounded-lg border border-amber-500/30 bg-amber-500/5 px-4 py-3 text-sm text-amber-600 dark:text-amber-400">
-                            <ShieldAlert className="mt-0.5 h-4 w-4 shrink-0" />
-                            <span>
-                                This endpoint requires authentication. No login endpoint was found
-                                in this project — add one to auto-fetch a token for the preview.
-                            </span>
-                        </div>
+                        <p className="text-xs text-muted-foreground">
+                            This endpoint requires authentication. Add a login endpoint to
+                            auto-fetch a token for the preview.
+                        </p>
                     )}
                     {requiresAuth && !!bearerToken && (
-                        <div className="flex items-start gap-3 rounded-lg border border-emerald-500/30 bg-emerald-500/5 px-4 py-3 text-sm text-emerald-600 dark:text-emerald-400">
-                            <ShieldAlert className="mt-0.5 h-4 w-4 shrink-0" />
-                            <span>
-                                Protected endpoint — preview is fetched with a valid bearer token
-                                from your project&apos;s login endpoint.
-                            </span>
-                        </div>
+                        <p className="text-xs text-muted-foreground">
+                            Protected endpoint, preview is fetched with a valid bearer token from
+                            your project&apos;s login endpoint.
+                        </p>
                     )}
                     {isLoginEndpoint && (
-                        <div className="flex items-start gap-3 rounded-lg border border-amber-500/30 bg-amber-500/5 px-4 py-3 text-sm text-amber-600 dark:text-amber-400">
-                            <ShieldAlert className="mt-0.5 h-4 w-4 shrink-0" />
-                            <span>
-                                Login endpoint — response includes a signed JWT{" "}
-                                <code className="rounded bg-amber-100 px-1 py-0.5 font-mono text-[11px] dark:bg-amber-900/40">
-                                    token
-                                </code>{" "}
-                                field alongside the mock data.
-                            </span>
-                        </div>
+                        <p className="text-xs text-muted-foreground">
+                            Login endpoint, response includes a signed JWT{" "}
+                            <code className="font-mono">token</code> field alongside the mock data.
+                        </p>
                     )}
 
                     <div className="rounded-lg border border-zinc-200 dark:border-zinc-800 overflow-hidden">

From 9dfb49ecc79f7661fdcab604bb8d735d2e9cb8a4 Mon Sep 17 00:00:00 2001
From: Grishma Dhakal <dhakalgrishma5@gmail.com>
Date: Sun, 26 Jul 2026 13:50:36 +0545
Subject: [PATCH 6/8] chore: remove unnecessary comments across codebase

---
 src/components/ui/button.tsx                  |  1 +
 src/lib/component-templates/codegen-utils.ts  | 24 -------------------
 src/lib/component-templates/index.ts          | 10 --------
 src/lib/component-templates/types.ts          |  4 ----
 src/lib/faker-options.ts                      |  5 ----
 src/lib/mock-path.ts                          |  2 --
 src/lib/schema-resolver.ts                    |  1 -
 .../schemaBuilder/raw-json-editor.tsx         |  5 ----
 .../schemaBuilder/schema-builder.tsx          |  2 +-
 .../components/sidebar/sidebar-skeleton.tsx   | 12 ----------
 .../workspace/ui/layouts/workspace-layout.tsx |  5 ----
 src/server/api/trpc.ts                        |  1 -
 12 files changed, 2 insertions(+), 70 deletions(-)

diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index ef8c667..9563988 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -48,6 +48,7 @@ function Button({
     return (
         <ButtonPrimitive
             data-slot="button"
+            suppressHydrationWarning
             className={cn(buttonVariants({ variant, size, className }))}
             {...props}
         />
diff --git a/src/lib/component-templates/codegen-utils.ts b/src/lib/component-templates/codegen-utils.ts
index 1b01cd4..2ecc141 100644
--- a/src/lib/component-templates/codegen-utils.ts
+++ b/src/lib/component-templates/codegen-utils.ts
@@ -28,9 +28,6 @@ export function mapTsType(dt: string): string {
     return "string";
 }
 
-/**
- * Finds a field based on matching its faker dataType string.
- */
 export function findFieldByDataType(
     fields: SchemaField[],
     dataTypePatterns: string[],
@@ -41,9 +38,6 @@ export function findFieldByDataType(
     })?.fieldName;
 }
 
-/**
- * Finds all fields matching any of the given faker dataType patterns.
- */
 export function filterFieldsByDataType(
     fields: SchemaField[],
     dataTypePatterns: string[],
@@ -54,21 +48,12 @@ export function filterFieldsByDataType(
     });
 }
 
-/**
- * Finds the user's actual fieldName matching any of the given candidates
- * (case + separator insensitive). Returns null if none found so the
- * template can decide on a fallback.
- */
 export function findField(fields: SchemaField[], candidates: string[]): string | null {
     const normalizedCandidates = new Set(candidates.map(normalize));
     const match = fields.find((f) => normalizedCandidates.has(normalize(f.fieldName)));
     return match ? match.fieldName : null;
 }
 
-/**
- * Builds a fetch hook that handles both response shapes from the mock
- * endpoint: a single object (count === 1) or an array (count > 1).
- */
 export function buildFetchHook(
     hookName: string,
     endpointUrl: string,
@@ -112,11 +97,6 @@ ${fieldLines.map((l) => `  ${l}`).join("\n")}
 }`;
 }
 
-/**
- * Builds a vanilla-JS fetch + DOM-render script block for HTML templates.
- * `renderFn` is a JS expression (string) that maps a single item to an
- * HTML string, the caller provides the item-level template string.
- */
 export function buildHtmlFetchScript(
     endpointUrl: string,
     renderFn: string,
@@ -151,10 +131,6 @@ export function buildHtmlFetchScript(
   loadData();`;
 }
 
-/**
- * Returns a baseline CSS string used by all HTML templates:
- * custom properties for color, card grid, avatar, etc.
- */
 export function buildHtmlStyles(): string {
     return `  :root {
     --bg: #ffffff;
diff --git a/src/lib/component-templates/index.ts b/src/lib/component-templates/index.ts
index 64bf4b8..a396238 100644
--- a/src/lib/component-templates/index.ts
+++ b/src/lib/component-templates/index.ts
@@ -30,13 +30,6 @@ function fieldMatches(fieldNameNormalized: string, candidateNormalized: string):
     );
 }
 
-/**
- * Scores every template against the given schema fields and endpoint URL path.
- * Matches against field $faker dataTypes (and fieldNames as fallback).
- * requiredFields matches are weighted heavily (10x);
- * path segment matches add a strong boost (8x);
- * optionalFields matches add a smaller boost.
- */
 export function matchTemplates(fields: SchemaField[], endpointPath: string = ""): TemplateMatch[] {
     const normalizedFieldNames = fields.map((f) => normalize(f.fieldName));
     const normalizedDataTypes = fields.map((f) => normalize(f.dataType));
@@ -45,7 +38,6 @@ export function matchTemplates(fields: SchemaField[], endpointPath: string = "")
     const results: TemplateMatch[] = COMPONENT_TEMPLATES.map((template) => {
         const matchedFields: string[] = [];
 
-        // Endpoint path keyword bonus
         let pathScoreBoost = 0;
         const templateKeywords = [
             template.id,
@@ -95,12 +87,10 @@ export function matchTemplates(fields: SchemaField[], endpointPath: string = "")
         return { template, score, matchedFields };
     });
 
-    // If template has 0 score or only path match without any fields, ensure dynamic-grid is fallback
     const matched = results
         .filter((r) => r.score > 0)
         .toSorted((a: TemplateMatch, b: TemplateMatch) => b.score - a.score);
 
-    // If dynamicGrid is not present or score is low, guarantee dynamicGrid is included at the end
     const dynamicMatch = results.find((r) => r.template.id === "dynamic-grid");
     if (dynamicMatch && !matched.some((m: TemplateMatch) => m.template.id === "dynamic-grid")) {
         matched.push(dynamicMatch);
diff --git a/src/lib/component-templates/types.ts b/src/lib/component-templates/types.ts
index e213159..ef124c1 100644
--- a/src/lib/component-templates/types.ts
+++ b/src/lib/component-templates/types.ts
@@ -10,13 +10,9 @@ export interface ComponentTemplate {
     id: string;
     name: string;
     description: string;
-    /** fieldName candidates that strongly indicate this template (case/underscore-insensitive) */
     requiredFields: string[];
-    /** fieldName candidates that boost match confidence but aren't essential */
     optionalFields: string[];
-    /** generates the full .tsx source as a string, using the user's actual field names */
     code: (fields: SchemaField[], endpointUrl: string, options?: TemplateOptions) => string;
-    /** generates a standalone .html file (inline <style> + <script>) from the user's actual field names */
     htmlCode?: (fields: SchemaField[], endpointUrl: string, options?: TemplateOptions) => string;
 }
 
diff --git a/src/lib/faker-options.ts b/src/lib/faker-options.ts
index b152fe0..02f90df 100644
--- a/src/lib/faker-options.ts
+++ b/src/lib/faker-options.ts
@@ -234,7 +234,6 @@ export function fieldsFromSchema(schema: unknown, prefix = ""): SchemaField[] {
         return [];
     }
 
-    // Handle {$array: schema} wrapper format
     if ("$array" in schema && schema.$array) {
         return fieldsFromSchema((schema as { $array: unknown }).$array, prefix);
     }
@@ -244,13 +243,10 @@ export function fieldsFromSchema(schema: unknown, prefix = ""): SchemaField[] {
     for (const [key, val] of Object.entries(schema)) {
         const fullPath = prefix ? `${prefix}.${key}` : key;
         if (val && typeof val === "object" && !Array.isArray(val) && !("$array" in val)) {
-            // Nested object
             fields.push(...fieldsFromSchema(val, fullPath));
         } else if (val && typeof val === "object" && "$array" in val) {
-            // Nested array object
             fields.push(...fieldsFromSchema((val as { $array: unknown }).$array, fullPath));
         } else if (Array.isArray(val) && val.length > 0) {
-            // Primitive array
             fields.push(...fieldsFromSchema(val[0], fullPath));
         } else {
             fields.push({
@@ -286,7 +282,6 @@ export function buildSchema(schemaFields: SchemaField[]): Record<string, unknown
 
         for (let i = 0; i < parts.length - 1; i++) {
             const part = parts[i]!;
-            // If the key already exists but is not an object, overwrite it
             if (
                 typeof current[part] !== "object" ||
                 current[part] === null ||
diff --git a/src/lib/mock-path.ts b/src/lib/mock-path.ts
index 213529b..f9d71a0 100644
--- a/src/lib/mock-path.ts
+++ b/src/lib/mock-path.ts
@@ -10,7 +10,6 @@ export function joinPath(...segments: Array<string | undefined | null>) {
     return path ? `/${path}` : "/";
 }
 
-/** Normalize project basePath for prefix stripping (e.g. `/api/v1`). Empty when `/`. */
 export function normalizeBasePath(basePath: string | undefined | null): string {
     if (!basePath || basePath === "/") return "";
     const cleaned = cleanSegment(basePath);
@@ -32,7 +31,6 @@ export function matchPath(pattern: string, incoming: string): boolean {
     return regex.test(incoming);
 }
 
-/** Mock route path segment after `/mock/{projectId}`, basePath + endpoint.path only. */
 export function buildMockPath(basePath: string | undefined | null, endpointPath: string): string {
     return joinPath(basePath, endpointPath);
 }
diff --git a/src/lib/schema-resolver.ts b/src/lib/schema-resolver.ts
index 637ebad..c3306e0 100644
--- a/src/lib/schema-resolver.ts
+++ b/src/lib/schema-resolver.ts
@@ -34,7 +34,6 @@ export function resolveSchema(schema: unknown): unknown {
     return schema;
 }
 
-/** Mirrors server-side response generation in endpoint-data-store. */
 export function resolveResponseData(
     schema: unknown,
     count: number,
diff --git a/src/modules/workspace/ui/components/dashboard/schemaBuilder/raw-json-editor.tsx b/src/modules/workspace/ui/components/dashboard/schemaBuilder/raw-json-editor.tsx
index 63133a7..9aaccd0 100644
--- a/src/modules/workspace/ui/components/dashboard/schemaBuilder/raw-json-editor.tsx
+++ b/src/modules/workspace/ui/components/dashboard/schemaBuilder/raw-json-editor.tsx
@@ -54,7 +54,6 @@ export function RawJsonEditor({
         const target = e.currentTarget;
         const { selectionStart, selectionEnd, value: val } = target;
 
-        // Convert single quote to double quote
         if (e.key === "'") {
             e.preventDefault();
             const before = val.substring(0, selectionStart);
@@ -67,7 +66,6 @@ export function RawJsonEditor({
             return;
         }
 
-        // Auto-pair double quotes
         if (e.key === '"') {
             if (selectionStart === selectionEnd && val[selectionStart] === '"') {
                 e.preventDefault();
@@ -87,7 +85,6 @@ export function RawJsonEditor({
             return;
         }
 
-        // Auto-pair braces and brackets
         if (e.key === "{" || e.key === "[") {
             const closing = e.key === "{" ? "}" : "]";
             e.preventDefault();
@@ -103,7 +100,6 @@ export function RawJsonEditor({
             return;
         }
 
-        // Tab key -> 2 spaces
         if (e.key === "Tab") {
             e.preventDefault();
             const before = val.substring(0, selectionStart);
@@ -116,7 +112,6 @@ export function RawJsonEditor({
             return;
         }
 
-        // Enter key -> smart auto-indent
         if (e.key === "Enter") {
             e.preventDefault();
             const lineStart = val.lastIndexOf("\n", selectionStart - 1) + 1;
diff --git a/src/modules/workspace/ui/components/dashboard/schemaBuilder/schema-builder.tsx b/src/modules/workspace/ui/components/dashboard/schemaBuilder/schema-builder.tsx
index 818c3a4..5b1fc78 100644
--- a/src/modules/workspace/ui/components/dashboard/schemaBuilder/schema-builder.tsx
+++ b/src/modules/workspace/ui/components/dashboard/schemaBuilder/schema-builder.tsx
@@ -330,7 +330,7 @@ export function SchemaBuilder({
                                                             setFields(fieldsFromSchema(parsed));
                                                             setJsonError(null);
                                                         } catch {
-                                                            // Keep current fields if invalid
+                                                            // keep current fields
                                                         }
                                                     }
                                                     setEditorMode("flat");
diff --git a/src/modules/workspace/ui/components/sidebar/sidebar-skeleton.tsx b/src/modules/workspace/ui/components/sidebar/sidebar-skeleton.tsx
index 480d663..ee3d9ab 100644
--- a/src/modules/workspace/ui/components/sidebar/sidebar-skeleton.tsx
+++ b/src/modules/workspace/ui/components/sidebar/sidebar-skeleton.tsx
@@ -1,7 +1,5 @@
 import { Skeleton } from "~/components/ui/skeleton";
 
-// ─── Sidebar-level skeleton (shown while the projects list is loading) ─────────
-
 export function SidebarSkeleton() {
     return (
         <div className="space-y-1 p-2 py-3">
@@ -12,23 +10,16 @@ export function SidebarSkeleton() {
     );
 }
 
-/** A single project-row placeholder that mimics the TreeNodeTrigger shape. */
 function ProjectRowSkeleton() {
     return (
         <div className="mx-1 flex items-center gap-2 rounded-md px-3 py-2">
-            {/* Expander icon placeholder */}
             <Skeleton className="h-3 w-3 shrink-0 rounded-sm" />
-            {/* Folder icon placeholder */}
             <Skeleton className="h-4 w-4 shrink-0 rounded-sm" />
-            {/* Label */}
             <Skeleton className="h-3.5 flex-1 rounded" />
         </div>
     );
 }
 
-// ─── Project-node skeleton (shown inside an expanded project while its  ─────────
-//     folders / endpoints are being fetched)                              ─────────
-
 export function ProjectTreeNodeSkeleton({ level }: { level: number }) {
     const indent = level * 16 + 8;
 
@@ -47,11 +38,8 @@ function TreeRowSkeleton({ indent }: { indent: number }) {
             className="mx-1 flex items-center gap-2 rounded-md px-3 py-2"
             style={{ paddingLeft: indent }}
         >
-            {/* Expander placeholder */}
             <Skeleton className="h-3 w-3 shrink-0 rounded-sm" />
-            {/* File/folder icon placeholder */}
             <Skeleton className="h-4 w-4 shrink-0 rounded-sm" />
-            {/* Label – vary widths for a natural look */}
             <Skeleton className="h-3.5 rounded" style={{ width: `${40 + (indent % 30)}%` }} />
         </div>
     );
diff --git a/src/modules/workspace/ui/layouts/workspace-layout.tsx b/src/modules/workspace/ui/layouts/workspace-layout.tsx
index 377649b..47a50c7 100644
--- a/src/modules/workspace/ui/layouts/workspace-layout.tsx
+++ b/src/modules/workspace/ui/layouts/workspace-layout.tsx
@@ -44,7 +44,6 @@ export function ApiClientLayout({
         if (!isResizing) return;
 
         const handleMouseMove = (e: MouseEvent) => {
-            // Clamp sidebar width between 180px and 480px
             const newWidth = Math.max(180, Math.min(480, e.clientX));
             setSidebarWidth(newWidth);
         };
@@ -77,10 +76,8 @@ export function ApiClientLayout({
             ? buildMockUrl(mockOrigin, selectedProjectId, project?.basePath, endpoint.path)
             : "";
 
-    // Find the login endpoint for this project (if any)
     const loginEndpoint = allEndpoints?.find((e) => e.authConfig?.isLoginEndpoint);
 
-    // Auto-fetch a bearer token from the login endpoint whenever it changes
     const fetchBearerToken = useCallback(async () => {
         if (!loginEndpoint || !selectedProjectId) {
             setBearerToken(null);
@@ -134,7 +131,6 @@ export function ApiClientLayout({
 
     return (
         <div className="relative h-full w-full overflow-hidden">
-            {/* Absolute sidebar */}
             <aside
                 className={cn(
                     "absolute inset-y-0 left-0 z-20 flex flex-col bg-background border-r",
@@ -180,7 +176,6 @@ export function ApiClientLayout({
                     />
                 </div>
 
-                {/* Resize handle */}
                 <div
                     onMouseDown={handleMouseDown}
                     className={cn(
diff --git a/src/server/api/trpc.ts b/src/server/api/trpc.ts
index 455f9b0..26ba330 100644
--- a/src/server/api/trpc.ts
+++ b/src/server/api/trpc.ts
@@ -32,7 +32,6 @@ const timingMiddleware = t.middleware(async ({ next, path }) => {
     const start = Date.now();
 
     if (t._config.isDev) {
-        // artificial delay in dev
         const waitMs = Math.floor(Math.random() * 400) + 100;
         await new Promise((resolve) => setTimeout(resolve, waitMs));
     }

From 9b5bb8afbfe25d1331301fe9ce4c1486232532ce Mon Sep 17 00:00:00 2001
From: Grishma Dhakal <dhakalgrishma5@gmail.com>
Date: Sun, 26 Jul 2026 14:23:29 +0545
Subject: [PATCH 7/8] chore: update readme

---
 CONTRIBUTING.md | 77 -------------------------------------------
 README.md       | 88 ++++++++++++++++++++++++++++++++++++-------------
 2 files changed, 65 insertions(+), 100 deletions(-)
 delete mode 100644 CONTRIBUTING.md

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
deleted file mode 100644
index 01af99b..0000000
--- a/CONTRIBUTING.md
+++ /dev/null
@@ -1,77 +0,0 @@
-<samp>
-
-# contributing
-
-this is a way to contribute in project project so nothing too serious - just follow this so we don't break each other's work.
-
-## workflow
-
-**1. pull latest main first**
-
-```
-git pull origin main
-```
-
-**2. create a new branch for your changes**
-
-```
-git switch -c your-branch-name
-```
-
-**3. make your changes**
-
-**4. before committing — run this**
-
-```
-pnpm check
-```
-
-fix whatever it complains about, then run
-
-```
-pnpm check:fix
-```
-
-to auto-fix formatting and lint issues. **don't skip this** — there's a CI pipeline and it will fail if your code has lint or formatting errors.
-
-**5. commit and push**
-
-```
-git add .
-git commit -m "describe what you changed"
-git push origin your-branch-name
-```
-
-**6. open a pull request on github** to merge into `main`
-
-**7. ask a team member to review it**
-
-**8. once approved, merge it on github**
-
-**9. delete the branch, start fresh for the next change**
-
-## branch naming
-
-keep it simple and descriptive
-
-```
-feat/add-login
-fix/db-connection
-chore/update-readme
-```
-
-## commit messages
-
-use [conventional commits](https://www.conventionalcommits.org) format
-
-```
-type: short description
-```
-
-## the rule
-
-> never push directly to `main`
-
-always go through a branch + pull request. always.
-
-</samp>
diff --git a/README.md b/README.md
index 2faf267..55c27d2 100644
--- a/README.md
+++ b/README.md
@@ -1,25 +1,69 @@
-<samp>
-
 # voidend
 
-## setup
+Local-first, offline mock API tool for frontend developers. Define schema-driven endpoints, get realistic fake data instantly — no backend, no internet.
+
+## Table of Contents
+
+- [Quick Start](#quick-start)
+- [Build & Run](#build--run)
+- [Features](#features)
+- [Writing Schemas](#writing-schemas)
+- [Data Directory](#data-directory)
+- [Project Structure](#project-structure)
+- [Scripts](#scripts)
+- [Contributing](#contributing)
+
+## Quick Start
 
 ```
 git clone https://github.com/Gr1shma/voidend/
 cd voidend
 pnpm install
 pnpm db:push
+pnpm dev
 ```
 
-## dev
+## Build & Run
 
 ```
-pnpm dev
+pnpm build
+pnpm start
+```
+
+Or use `pnpm preview` to build and start in one step.
+
+## Features
+
+- Schema-driven mock endpoints with `$faker.*` powered fake data
+- Nested objects and repeated arrays via `$array` / `$count`
+- Network simulation — delays, failure rates
+- Mock JWT authentication (`/login`, `requiresAuth`)
+- Export/import projects as JSON
+- Everything runs locally in SQLite — no external services
+
+## Writing Schemas
+
+`responseSchema` is a JSON object. Strings starting with `$faker.` resolve to fake values via [faker.js](https://fakerjs.dev/).
+
+```json
+{
+    "id": "$faker.string.uuid",
+    "name": "$faker.person.fullName",
+    "tags": {
+        "$array": "$faker.lorem.word",
+        "$count": 3
+    }
+}
 ```
 
-## data directory
+- Static values (`"admin"`, `42`, `true`) pass through unchanged.
+- `$array` repeats its template `$count` times (default 3).
+- Use `responseCount` on the endpoint for top-level list responses — don't combine with a top-level `$array`.
+- Invalid faker paths silently resolve to `null`.
+
+Data is resolved once and cached to disk; editing the schema or count regenerates it.
 
-voidend stores its database and mock data in:
+## Data Directory
 
 | platform | path                                     |
 | -------- | ---------------------------------------- |
@@ -27,7 +71,7 @@ voidend stores its database and mock data in:
 | macOS    | `~/Library/Application Support/voidend/` |
 | windows  | `%APPDATA%\voidend\`                     |
 
-## structure
+## Project Structure
 
 ```
 src/
@@ -41,19 +85,17 @@ src/
 └── styles/     global css
 ```
 
-## scripts
-
-| command            | does                            |
-| ------------------ | ------------------------------- |
-| `pnpm dev`         | start dev server with turbopack |
-| `pnpm check`       | lint and format                 |
-| `pnpm check:fix`   | lint + autofix + format         |
-| `pnpm db:generate` | generate migrations             |
-| `pnpm db:migrate`  | apply migrations                |
-| `pnpm db:push`     | push schema changes to db       |
-| `pnpm db:studio`   | open drizzle studio             |
-| `pnpm typecheck`   | run typescript checks           |
-
-contributing? read [CONTRIBUTING.md](./CONTRIBUTING.md) first.
+## Scripts
 
-</samp>
+| command          | does                            |
+| ---------------- | ------------------------------- |
+| `pnpm dev`       | start dev server with turbopack |
+| `pnpm build`     | build for production            |
+| `pnpm start`     | start production server         |
+| `pnpm preview`   | build and start in one step     |
+| `pnpm check`     | lint and format                 |
+| `pnpm check:fix` | lint + autofix + format         |
+| `pnpm db:push`   | push schema changes to db       |
+| `pnpm db:studio` | open drizzle studio             |
+| `pnpm typecheck` | run typescript checks           |
+| `pnpm test`      | run tests                       |

From a38cb635f5e5145e8cdae881d33ddea681ee8126 Mon Sep 17 00:00:00 2001
From: Grishma Dhakal <dhakalgrishma5@gmail.com>
Date: Sun, 26 Jul 2026 14:28:55 +0545
Subject: [PATCH 8/8] fix: clear stale endpoint selection when switching
 projects and fix empty folder icon

---
 .../workspace/ui/components/sidebar/folder-tree-node.tsx     | 2 +-
 src/modules/workspace/ui/layouts/workspace-layout.tsx        | 5 ++++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/modules/workspace/ui/components/sidebar/folder-tree-node.tsx b/src/modules/workspace/ui/components/sidebar/folder-tree-node.tsx
index be6f8dc..a47bc53 100644
--- a/src/modules/workspace/ui/components/sidebar/folder-tree-node.tsx
+++ b/src/modules/workspace/ui/components/sidebar/folder-tree-node.tsx
@@ -58,7 +58,7 @@ export function FolderTreeNode({
                 }}
             >
                 <TreeExpander hasChildren={hasChildren} />
-                <TreeIcon hasChildren={hasChildren} />
+                <TreeIcon hasChildren />
                 {renamingId === collection.id ? (
                     <InlineRename
                         defaultValue={collection.name}
diff --git a/src/modules/workspace/ui/layouts/workspace-layout.tsx b/src/modules/workspace/ui/layouts/workspace-layout.tsx
index 47a50c7..2e7fec9 100644
--- a/src/modules/workspace/ui/layouts/workspace-layout.tsx
+++ b/src/modules/workspace/ui/layouts/workspace-layout.tsx
@@ -172,7 +172,10 @@ export function ApiClientLayout({
                         selectedEndpointId={selectedEndpointId}
                         onSelectEndpoint={handleSelectEndpoint}
                         selectedProjectId={selectedProjectId}
-                        onSelectProject={setSelectedProjectId}
+                        onSelectProject={(id) => {
+                            setSelectedProjectId(id);
+                            setSelectedEndpointId(null);
+                        }}
                     />
                 </div>