@easydocs/dashboard 0.1.4

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 EasyDocs
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/next.config.ts

@@ -0,0 +1,7 @@
+import type { NextConfig } from 'next'
+
+const config: NextConfig = {
+  transpilePackages: ['@easydocs/core'],
+}
+
+export default config

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@easydocs/dashboard",
+  "version": "0.1.4",
+  "description": "EasyDocs docs dashboard — view and export AI-generated OpenAPI specs",
+  "files": [
+    "src",
+    "public",
+    "next.config.ts",
+    "tailwind.config.ts",
+    "postcss.config.mjs",
+    "tsconfig.json"
+  ],
+  "dependencies": {
+    "js-yaml": "^4.1.0",
+    "next": "15.1.6",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "@easydocs/core": "0.1.4"
+  },
+  "devDependencies": {
+    "@types/js-yaml": "^4.0.9",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "15.1.6",
+    "postcss": "^8",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5"
+  },
+  "scripts": {
+    "dev": "next dev --port 4999",
+    "build": "next build",
+    "start": "next start --port 4999",
+    "typecheck": "tsc --noEmit",
+    "lint": "next lint"
+  }
+}

package/postcss.config.mjs

@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    tailwindcss: {},
+  },
+}
+
+export default config

package/src/app/api/endpoints/[id]/spec/route.ts

@@ -0,0 +1,27 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { createDB, saveManualSpec, resolveConflict } from '@easydocs/core'
+import type { Operation } from '@easydocs/core'
+
+function getDb() {
+  return createDB(process.env.EASYDOCS_DB_URL)
+}
+
+// Save a manual spec edit
+export async function PUT(req: NextRequest, { params }: { params: Promise<{ id: string }> }) {
+  const { id } = await params
+  const body = await req.json() as { spec: Operation }
+  if (!body.spec) return NextResponse.json({ error: 'spec required' }, { status: 400 })
+  await saveManualSpec(getDb(), id, body.spec)
+  return NextResponse.json({ ok: true })
+}
+
+// Resolve a conflict: keep 'ai' or 'manual'
+export async function POST(req: NextRequest, { params }: { params: Promise<{ id: string }> }) {
+  const { id } = await params
+  const body = await req.json() as { keep: 'ai' | 'manual' }
+  if (body.keep !== 'ai' && body.keep !== 'manual') {
+    return NextResponse.json({ error: 'keep must be "ai" or "manual"' }, { status: 400 })
+  }
+  await resolveConflict(getDb(), id, body.keep)
+  return NextResponse.json({ ok: true })
+}

package/src/app/api/endpoints/route.ts

@@ -0,0 +1,17 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { fetchEndpoints } from '@/lib/db'
+import { createDB, deleteEndpointById } from '@easydocs/core'
+
+export async function GET(req: NextRequest) {
+  const project = req.nextUrl.searchParams.get('project') ?? undefined
+  const endpoints = await fetchEndpoints(project)
+  return NextResponse.json(endpoints)
+}
+
+export async function DELETE(req: Request) {
+  const { id } = await req.json()
+  if (!id) return NextResponse.json({ error: 'id required' }, { status: 400 })
+  const db = createDB(process.env.EASYDOCS_DB_URL)
+  await deleteEndpointById(db, id as string)
+  return NextResponse.json({ ok: true })
+}

package/src/app/api/export/route.ts

@@ -0,0 +1,27 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { fetchEndpoints, buildFullSpec } from '@/lib/db'
+import yaml from 'js-yaml'
+
+export async function GET(req: NextRequest) {
+  const format = req.nextUrl.searchParams.get('format') ?? 'json'
+  const project = req.nextUrl.searchParams.get('project') ?? undefined
+  const endpoints = await fetchEndpoints(project)
+  const spec = buildFullSpec(endpoints, project)
+  const filename = project ? `openapi-${project}` : 'openapi'
+
+  if (format === 'yaml') {
+    return new NextResponse(yaml.dump(spec), {
+      headers: {
+        'Content-Type': 'application/yaml',
+        'Content-Disposition': `attachment; filename="${filename}.yaml"`,
+      },
+    })
+  }
+
+  return new NextResponse(JSON.stringify(spec, null, 2), {
+    headers: {
+      'Content-Type': 'application/json',
+      'Content-Disposition': `attachment; filename="${filename}.json"`,
+    },
+  })
+}

package/src/app/api/projects/route.ts

@@ -0,0 +1,7 @@
+import { NextResponse } from 'next/server'
+import { fetchAllProjects } from '@/lib/db'
+
+export async function GET() {
+  const projects = await fetchAllProjects()
+  return NextResponse.json(projects)
+}

package/src/app/api/spec/route.ts

@@ -0,0 +1,8 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { fetchEndpoints, buildFullSpec } from '@/lib/db'
+
+export async function GET(req: NextRequest) {
+  const project = req.nextUrl.searchParams.get('project') ?? undefined
+  const endpoints = await fetchEndpoints(project)
+  return NextResponse.json(buildFullSpec(endpoints, project))
+}

package/src/app/globals.css

@@ -0,0 +1,13 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  height: 100%;
+  margin: 0;
+}

package/src/app/layout.tsx

@@ -0,0 +1,15 @@
+import type { Metadata } from 'next'
+import './globals.css'
+
+export const metadata: Metadata = {
+  title: 'EasyDocs',
+  description: 'Auto-generated API documentation',
+}
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en" className="dark">
+      <body className="antialiased">{children}</body>
+    </html>
+  )
+}

package/src/app/page.tsx

@@ -0,0 +1,18 @@
+import { fetchEndpoints, fetchAllProjects } from '@/lib/db'
+import { Dashboard } from '@/components/Dashboard'
+
+export const dynamic = 'force-dynamic'
+
+interface Props {
+  searchParams: Promise<{ project?: string }>
+}
+
+export default async function HomePage({ searchParams }: Props) {
+  const { project } = await searchParams
+  const [endpoints, projects] = await Promise.all([
+    fetchEndpoints(project),
+    fetchAllProjects(),
+  ])
+
+  return <Dashboard endpoints={endpoints} projects={projects} currentProject={project} />
+}

package/src/components/ConflictBanner.tsx

@@ -0,0 +1,60 @@
+'use client'
+
+import { useState } from 'react'
+import type { Endpoint } from '@easydocs/core/schema'
+
+interface Props {
+  endpoint: Endpoint
+  onResolved: (updated: Endpoint) => void
+}
+
+export function ConflictBanner({ endpoint, onResolved }: Props) {
+  const [resolving, setResolving] = useState(false)
+
+  async function resolve(keep: 'ai' | 'manual') {
+    setResolving(true)
+    const res = await fetch(`/api/endpoints/${endpoint.id}/spec`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ keep }),
+    })
+    setResolving(false)
+    if (res.ok) {
+      onResolved({
+        ...endpoint,
+        hasConflict: false,
+        isManuallyEdited: keep === 'manual',
+        manualSpec: keep === 'ai' ? null : endpoint.manualSpec,
+        spec: keep === 'manual' ? endpoint.manualSpec : endpoint.spec,
+      })
+    }
+  }
+
+  return (
+    <div className="mx-8 mt-6 rounded-lg border border-amber-500/40 bg-amber-500/10 px-4 py-3 flex items-center justify-between gap-4">
+      <div>
+        <p className="text-sm font-medium text-amber-400">Spec conflict</p>
+        <p className="text-xs text-amber-300/70 mt-0.5">
+          New traffic generated an AI spec that differs from your manual edits. Choose which version
+          to keep.
+        </p>
+      </div>
+      <div className="flex gap-2 flex-shrink-0">
+        <button
+          onClick={() => resolve('manual')}
+          disabled={resolving}
+          className="text-xs px-3 py-1.5 rounded bg-amber-500/20 text-amber-300 hover:bg-amber-500/30 disabled:opacity-50 transition-colors"
+        >
+          Keep mine
+        </button>
+        <button
+          onClick={() => resolve('ai')}
+          disabled={resolving}
+          className="text-xs px-3 py-1.5 rounded bg-zinc-700 text-zinc-300 hover:bg-zinc-600 disabled:opacity-50 transition-colors"
+        >
+          Use AI
+        </button>
+      </div>
+    </div>
+  )
+}

package/src/components/Dashboard.tsx

@@ -0,0 +1,151 @@
+'use client'
+
+import { useState, useMemo } from 'react'
+import { useRouter } from 'next/navigation'
+import { MethodBadge } from './MethodBadge'
+import { EndpointDetail } from './EndpointDetail'
+import type { Endpoint, Project } from '@easydocs/core/schema'
+
+interface Props {
+  endpoints: Endpoint[]
+  projects: Project[]
+  currentProject?: string
+}
+
+export function Dashboard({ endpoints, projects, currentProject }: Props) {
+  const router = useRouter()
+  const [selected, setSelected] = useState<Endpoint | null>(endpoints[0] ?? null)
+  const [search, setSearch] = useState('')
+
+  const filtered = useMemo(
+    () =>
+      endpoints.filter(
+        (e) =>
+          e.path.toLowerCase().includes(search.toLowerCase()) ||
+          e.method.toLowerCase().includes(search.toLowerCase()) ||
+          e.spec?.summary?.toLowerCase().includes(search.toLowerCase())
+      ),
+    [endpoints, search]
+  )
+
+  const grouped = useMemo(() => {
+    const groups: Record<string, Endpoint[]> = {}
+    for (const e of filtered) {
+      const tag = e.spec?.tags?.[0] ?? 'other'
+      if (!groups[tag]) groups[tag] = []
+      groups[tag].push(e)
+    }
+    return groups
+  }, [filtered])
+
+  function handleProjectChange(slug: string) {
+    router.push(slug === '__all' ? '/' : `/?project=${slug}`)
+  }
+
+  const exportBase = currentProject ? `/api/export?project=${currentProject}` : '/api/export'
+
+  return (
+    <div className="flex h-screen bg-zinc-950 text-zinc-100">
+      {/* Sidebar */}
+      <aside className="w-72 flex-shrink-0 border-r border-zinc-800 flex flex-col">
+        <div className="p-4 border-b border-zinc-800 space-y-3">
+          <div className="flex items-center justify-between">
+            <span className="text-sm font-semibold text-zinc-100">EasyDocs</span>
+            <span className="text-xs text-zinc-500">{endpoints.length} endpoints</span>
+          </div>
+
+          {projects.length > 1 && (
+            <select
+              value={currentProject ?? '__all'}
+              onChange={(e) => handleProjectChange(e.target.value)}
+              className="w-full rounded-md bg-zinc-900 border border-zinc-700 px-2 py-1.5 text-xs text-zinc-100 focus:outline-none focus:ring-1 focus:ring-zinc-500"
+            >
+              <option value="__all">All projects</option>
+              {projects.map((p) => (
+                <option key={p.id} value={p.slug}>
+                  {p.name}
+                </option>
+              ))}
+            </select>
+          )}
+
+          {projects.length === 1 && (
+            <div className="text-xs text-zinc-500">
+              Project: <span className="text-zinc-300">{projects[0].name}</span>
+            </div>
+          )}
+
+          <input
+            type="text"
+            placeholder="Search endpoints…"
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            className="w-full rounded-md bg-zinc-900 border border-zinc-700 px-3 py-1.5 text-sm text-zinc-100 placeholder-zinc-500 focus:outline-none focus:ring-1 focus:ring-zinc-500"
+          />
+        </div>
+
+        {endpoints.length === 0 ? (
+          <div className="flex-1 flex flex-col items-center justify-center p-6 text-center">
+            <p className="text-zinc-500 text-sm">No endpoints documented yet.</p>
+            <p className="text-zinc-600 text-xs mt-1">
+              Add EasyDocs middleware to your server and make some requests.
+            </p>
+          </div>
+        ) : (
+          <nav className="flex-1 overflow-y-auto p-2">
+            {Object.entries(grouped).map(([tag, items]) => (
+              <div key={tag} className="mb-4">
+                <div className="px-2 py-1 text-xs font-semibold text-zinc-500 uppercase tracking-wider">
+                  {tag}
+                </div>
+                {items.map((e) => (
+                  <button
+                    key={e.id}
+                    onClick={() => setSelected(e)}
+                    className={`w-full flex items-center gap-2 px-2 py-2 rounded-md text-left transition-colors ${
+                      selected?.id === e.id
+                        ? 'bg-zinc-800 text-zinc-100'
+                        : 'text-zinc-400 hover:bg-zinc-900 hover:text-zinc-200'
+                    }`}
+                  >
+                    <MethodBadge method={e.method} />
+                    <span className="text-xs font-mono truncate flex-1">{e.path}</span>
+                    {e.hasConflict && (
+                      <span className="w-1.5 h-1.5 rounded-full bg-amber-400 flex-shrink-0" />
+                    )}
+                  </button>
+                ))}
+              </div>
+            ))}
+          </nav>
+        )}
+
+        <div className="p-3 border-t border-zinc-800 flex gap-2">
+          <a
+            href={`${exportBase}&format=json`}
+            className="flex-1 text-center text-xs py-1.5 rounded-md bg-zinc-800 text-zinc-400 hover:text-zinc-200 hover:bg-zinc-700 transition-colors"
+          >
+            Export JSON
+          </a>
+          <a
+            href={`${exportBase}&format=yaml`}
+            className="flex-1 text-center text-xs py-1.5 rounded-md bg-zinc-800 text-zinc-400 hover:text-zinc-200 hover:bg-zinc-700 transition-colors"
+          >
+            Export YAML
+          </a>
+        </div>
+      </aside>
+
+      {/* Main */}
+      <main className="flex-1 overflow-hidden">
+        {selected ? (
+          <EndpointDetail endpoint={selected} />
+        ) : (
+          <div className="flex items-center justify-center h-full text-zinc-500 text-sm">
+            Select an endpoint to view its documentation.
+          </div>
+        )}
+      </main>
+    </div>
+  )
+}

package/src/components/EndpointDetail.tsx

@@ -0,0 +1,152 @@
+'use client'
+
+import { useState } from 'react'
+import { MethodBadge } from './MethodBadge'
+import { SchemaViewer } from './SchemaViewer'
+import { SpecEditor } from './SpecEditor'
+import { ConflictBanner } from './ConflictBanner'
+import type { Endpoint } from '@easydocs/core/schema'
+
+export function EndpointDetail({ endpoint: initial }: { endpoint: Endpoint }) {
+  const [endpoint, setEndpoint] = useState(initial)
+  const [editing, setEditing] = useState(false)
+
+  const activeSpec = endpoint.isManuallyEdited ? endpoint.manualSpec : endpoint.spec
+
+  if (!activeSpec) {
+    return (
+      <div className="flex items-center justify-center h-full text-zinc-500 text-sm">
+        No spec available for this endpoint.
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex flex-col h-full overflow-hidden">
+      {endpoint.hasConflict && (
+        <ConflictBanner endpoint={endpoint} onResolved={setEndpoint} />
+      )}
+
+      <div className="flex items-center justify-between px-8 pt-6 pb-2">
+        <div className="flex items-center gap-3">
+          <MethodBadge method={endpoint.method} />
+          <code className="text-lg font-mono text-zinc-100">{endpoint.path}</code>
+          {endpoint.isManuallyEdited && !endpoint.hasConflict && (
+            <span className="text-xs text-zinc-500 bg-zinc-800 px-1.5 py-0.5 rounded">edited</span>
+          )}
+        </div>
+        <button
+          onClick={() => setEditing((e) => !e)}
+          className="text-xs px-3 py-1.5 rounded bg-zinc-800 text-zinc-400 hover:text-zinc-200 hover:bg-zinc-700 transition-colors"
+        >
+          {editing ? 'View docs' : 'Edit spec'}
+        </button>
+      </div>
+
+      {editing ? (
+        <div className="flex-1 overflow-hidden border-t border-zinc-800 mt-4">
+          <SpecEditor endpoint={endpoint} onSaved={setEndpoint} />
+        </div>
+      ) : (
+        <div className="flex-1 overflow-y-auto px-8 pb-8 space-y-8">
+          {activeSpec.summary && (
+            <p className="text-zinc-300 text-sm">{activeSpec.summary}</p>
+          )}
+          {activeSpec.description && activeSpec.description !== activeSpec.summary && (
+            <p className="text-zinc-500 text-sm">{activeSpec.description}</p>
+          )}
+          {activeSpec.deprecated && (
+            <span className="inline-flex items-center rounded px-2 py-0.5 text-xs font-medium bg-yellow-500/15 text-yellow-400 ring-1 ring-yellow-500/30">
+              Deprecated
+            </span>
+          )}
+
+          {activeSpec.parameters && activeSpec.parameters.length > 0 && (
+            <section>
+              <h3 className="text-xs font-semibold text-zinc-400 uppercase tracking-wider mb-3">
+                Parameters
+              </h3>
+              <div className="rounded-lg border border-zinc-800 divide-y divide-zinc-800">
+                {activeSpec.parameters.map((param) => (
+                  <div key={`${param.in}-${param.name}`} className="px-4 py-3 flex gap-4">
+                    <div className="min-w-0 flex-1">
+                      <div className="flex items-center gap-2 flex-wrap">
+                        <code className="text-sm font-mono text-zinc-100">{param.name}</code>
+                        <span className="text-xs text-zinc-500 bg-zinc-800 px-1.5 py-0.5 rounded">
+                          {param.in}
+                        </span>
+                        {param.required && <span className="text-xs text-red-400">required</span>}
+                        {param.deprecated && (
+                          <span className="text-xs text-yellow-400">deprecated</span>
+                        )}
+                      </div>
+                      {param.description && (
+                        <p className="text-sm text-zinc-500 mt-1">{param.description}</p>
+                      )}
+                    </div>
+                    {param.schema && (
+                      <div className="text-xs text-zinc-400 font-mono self-start">
+                        {(param.schema as Record<string, unknown>).type as string}
+                      </div>
+                    )}
+                  </div>
+                ))}
+              </div>
+            </section>
+          )}
+
+          {activeSpec.requestBody && (
+            <section>
+              <h3 className="text-xs font-semibold text-zinc-400 uppercase tracking-wider mb-3">
+                Request Body
+              </h3>
+              <div className="rounded-lg border border-zinc-800 p-4 bg-zinc-900/50">
+                <SchemaViewer data={activeSpec.requestBody.content} />
+              </div>
+            </section>
+          )}
+
+          {Object.keys(activeSpec.responses ?? {}).length > 0 && (
+            <section>
+              <h3 className="text-xs font-semibold text-zinc-400 uppercase tracking-wider mb-3">
+                Responses
+              </h3>
+              <div className="space-y-3">
+                {Object.entries(activeSpec.responses).map(([status, response]) => (
+                  <div key={status} className="rounded-lg border border-zinc-800 overflow-hidden">
+                    <div className="flex items-center gap-3 px-4 py-2 bg-zinc-900/50 border-b border-zinc-800">
+                      <StatusBadge code={status} />
+                      <span className="text-sm text-zinc-400">{response.description}</span>
+                    </div>
+                    {response.content && (
+                      <div className="p-4">
+                        <SchemaViewer data={response.content} />
+                      </div>
+                    )}
+                  </div>
+                ))}
+              </div>
+            </section>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
+
+function StatusBadge({ code }: { code: string }) {
+  const n = parseInt(code, 10)
+  const color =
+    n < 300
+      ? 'bg-emerald-500/15 text-emerald-400 ring-emerald-500/30'
+      : n < 400
+        ? 'bg-blue-500/15 text-blue-400 ring-blue-500/30'
+        : n < 500
+          ? 'bg-amber-500/15 text-amber-400 ring-amber-500/30'
+          : 'bg-red-500/15 text-red-400 ring-red-500/30'
+  return (
+    <span className={`inline-flex items-center rounded px-1.5 py-0.5 text-xs font-semibold ring-1 ring-inset font-mono ${color}`}>
+      {code}
+    </span>
+  )
+}

package/src/components/MethodBadge.tsx

@@ -0,0 +1,17 @@
+const styles: Record<string, string> = {
+  GET: 'bg-emerald-500/15 text-emerald-400 ring-emerald-500/30',
+  POST: 'bg-blue-500/15 text-blue-400 ring-blue-500/30',
+  PUT: 'bg-amber-500/15 text-amber-400 ring-amber-500/30',
+  PATCH: 'bg-orange-500/15 text-orange-400 ring-orange-500/30',
+  DELETE: 'bg-red-500/15 text-red-400 ring-red-500/30',
+}
+
+export function MethodBadge({ method }: { method: string }) {
+  return (
+    <span
+      className={`inline-flex items-center rounded px-1.5 py-0.5 text-xs font-semibold ring-1 ring-inset font-mono min-w-[46px] justify-center ${styles[method] ?? 'bg-zinc-500/15 text-zinc-400 ring-zinc-500/30'}`}
+    >
+      {method}
+    </span>
+  )
+}

package/src/components/SchemaViewer.tsx

@@ -0,0 +1,62 @@
+'use client'
+
+function ValueNode({ value, depth = 0 }: { value: unknown; depth?: number }) {
+  if (value === null) return <span className="text-zinc-500">null</span>
+  if (value === undefined) return <span className="text-zinc-500">undefined</span>
+
+  if (typeof value === 'boolean')
+    return <span className="text-purple-400">{String(value)}</span>
+  if (typeof value === 'number')
+    return <span className="text-amber-400">{String(value)}</span>
+  if (typeof value === 'string')
+    return <span className="text-green-400">"{value}"</span>
+
+  if (Array.isArray(value)) {
+    if (value.length === 0) return <span className="text-zinc-400">[]</span>
+    return (
+      <span>
+        <span className="text-zinc-400">[</span>
+        <div className="ml-4">
+          {value.map((item, i) => (
+            <div key={i}>
+              <ValueNode value={item} depth={depth + 1} />
+              {i < value.length - 1 && <span className="text-zinc-600">,</span>}
+            </div>
+          ))}
+        </div>
+        <span className="text-zinc-400">]</span>
+      </span>
+    )
+  }
+
+  if (typeof value === 'object') {
+    const entries = Object.entries(value as Record<string, unknown>)
+    if (entries.length === 0) return <span className="text-zinc-400">{'{}'}</span>
+    return (
+      <span>
+        <span className="text-zinc-400">{'{'}</span>
+        <div className="ml-4">
+          {entries.map(([k, v], i) => (
+            <div key={k}>
+              <span className="text-sky-300">"{k}"</span>
+              <span className="text-zinc-400">: </span>
+              <ValueNode value={v} depth={depth + 1} />
+              {i < entries.length - 1 && <span className="text-zinc-600">,</span>}
+            </div>
+          ))}
+        </div>
+        <span className="text-zinc-400">{'}'}</span>
+      </span>
+    )
+  }
+
+  return <span className="text-zinc-300">{String(value)}</span>
+}
+
+export function SchemaViewer({ data }: { data: unknown }) {
+  return (
+    <pre className="text-xs leading-5 font-mono overflow-x-auto">
+      <ValueNode value={data} />
+    </pre>
+  )
+}

package/src/components/SpecEditor.tsx

@@ -0,0 +1,64 @@
+'use client'
+
+import { useState } from 'react'
+import type { Endpoint } from '@easydocs/core/schema'
+import type { Operation } from '@easydocs/core'
+
+interface Props {
+  endpoint: Endpoint
+  onSaved: (updated: Endpoint) => void
+}
+
+export function SpecEditor({ endpoint, onSaved }: Props) {
+  const activeSpec = endpoint.isManuallyEdited ? endpoint.manualSpec : endpoint.spec
+  const [value, setValue] = useState(() => JSON.stringify(activeSpec, null, 2))
+  const [error, setError] = useState<string | null>(null)
+  const [saving, setSaving] = useState(false)
+
+  async function handleSave() {
+    setError(null)
+    let parsed: Operation
+    try {
+      parsed = JSON.parse(value) as Operation
+    } catch {
+      setError('Invalid JSON')
+      return
+    }
+    setSaving(true)
+    const res = await fetch(`/api/endpoints/${endpoint.id}/spec`, {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ spec: parsed }),
+    })
+    setSaving(false)
+    if (res.ok) {
+      onSaved({ ...endpoint, manualSpec: parsed, isManuallyEdited: true, hasConflict: false })
+    } else {
+      setError('Failed to save')
+    }
+  }
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="flex items-center justify-between px-4 py-2 border-b border-zinc-800">
+        <span className="text-xs text-zinc-400">Edit spec (JSON)</span>
+        <div className="flex gap-2">
+          {error && <span className="text-xs text-red-400">{error}</span>}
+          <button
+            onClick={handleSave}
+            disabled={saving}
+            className="text-xs px-3 py-1 rounded bg-zinc-700 text-zinc-100 hover:bg-zinc-600 disabled:opacity-50 transition-colors"
+          >
+            {saving ? 'Saving…' : 'Save'}
+          </button>
+        </div>
+      </div>
+      <textarea
+        className="flex-1 resize-none bg-zinc-950 text-zinc-200 font-mono text-xs p-4 focus:outline-none"
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+        spellCheck={false}
+      />
+    </div>
+  )
+}

package/src/lib/db.ts

@@ -0,0 +1,68 @@
+import {
+  createDB,
+  getAllEndpoints,
+  getEndpointsByProject,
+  getAllProjects,
+  findOrCreateProject,
+} from '@easydocs/core'
+import type { Endpoint, Project } from '@easydocs/core/schema'
+
+let db: ReturnType<typeof createDB> | null = null
+
+function getDb() {
+  if (!db) db = createDB(process.env.EASYDOCS_DB_URL)
+  return db
+}
+
+export async function fetchAllProjects(): Promise<Project[]> {
+  return getAllProjects(getDb())
+}
+
+export async function fetchEndpoints(projectSlug?: string): Promise<Endpoint[]> {
+  const db = getDb()
+  if (!projectSlug) return getAllEndpoints(db)
+  const projectId = await findOrCreateProject(db, projectSlug)
+  return getEndpointsByProject(db, projectId)
+}
+
+const SECURITY_SCHEME_DEFS: Record<string, unknown> = {
+  bearerAuth: { type: 'http', scheme: 'bearer', bearerFormat: 'JWT' },
+  basicAuth: { type: 'http', scheme: 'basic' },
+  apiKeyHeader: { type: 'apiKey', in: 'header', name: 'X-API-Key' },
+  apiKeyQuery: { type: 'apiKey', in: 'query', name: 'api_key' },
+  cookieAuth: { type: 'apiKey', in: 'cookie', name: 'session' },
+}
+
+export function buildFullSpec(endpointList: Endpoint[], projectName?: string) {
+  const usedSchemes = new Set<string>()
+  const paths: Record<string, Record<string, unknown>> = {}
+
+  for (const e of endpointList) {
+    if (!e.path || !e.method) continue
+    const activeSpec = e.isManuallyEdited && e.manualSpec ? e.manualSpec : e.spec
+    if (!activeSpec) continue
+
+    if (!paths[e.path]) paths[e.path] = {}
+    paths[e.path][e.method.toLowerCase()] = activeSpec
+
+    if (activeSpec.security) {
+      for (const entry of activeSpec.security) {
+        for (const name of Object.keys(entry)) {
+          if (SECURITY_SCHEME_DEFS[name]) usedSchemes.add(name)
+        }
+      }
+    }
+  }
+
+  const securitySchemes =
+    usedSchemes.size > 0
+      ? Object.fromEntries([...usedSchemes].map((n) => [n, SECURITY_SCHEME_DEFS[n]]))
+      : undefined
+
+  return {
+    openapi: '3.0.3',
+    info: { title: projectName ?? 'API Documentation', version: '1.0.0' },
+    paths,
+    ...(securitySchemes ? { components: { securitySchemes } } : {}),
+  }
+}

package/tailwind.config.ts

@@ -0,0 +1,14 @@
+import type { Config } from 'tailwindcss'
+
+const config: Config = {
+  content: ['./src/**/*.{ts,tsx}'],
+  theme: {
+    extend: {
+      fontFamily: {
+        mono: ['ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'monospace'],
+      },
+    },
+  },
+}
+
+export default config

package/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [{ "name": "next" }],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}