@easydocs/dashboard 0.2.0 → 0.4.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@easydocs/dashboard",
-  "version": "0.2.0",
+  "version": "0.4.2",
   "description": "EasyDocs docs dashboard — view and export AI-generated OpenAPI specs",
   "files": [
     "src",
@@ -11,11 +11,15 @@
     "tsconfig.json"
   ],
   "dependencies": {
+    "@codemirror/lang-json": "^6.0.2",
+    "@codemirror/theme-one-dark": "^6.1.3",
+    "@uiw/react-codemirror": "^4.25.9",
     "js-yaml": "^4.1.0",
     "next": "15.1.6",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "@easydocs/core": "0.2.0"
+    "zod": "^3.25.76",
+    "@easydocs/core": "0.4.2"
   },
   "devDependencies": {
     "@types/js-yaml": "^4.0.9",

package/src/components/Dashboard.tsx

@@ -139,7 +139,7 @@ export function Dashboard({ endpoints, projects, currentProject }: Props) {
       {/* Main */}
       <main className="flex-1 overflow-hidden">
         {selected ? (
-          <EndpointDetail endpoint={selected} />
+          <EndpointDetail key={selected.id} endpoint={selected} />
         ) : (
           <div className="flex items-center justify-center h-full text-zinc-500 text-sm">
             Select an endpoint to view its documentation.

package/src/components/EndpointDetail.tsx

@@ -1,8 +1,7 @@
 'use client'
 
-import { useState } from 'react'
+import { useState, useCallback } 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'
@@ -10,6 +9,10 @@ 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 [exampleOpen, setExampleOpen] = useState<Record<string, boolean>>({})
+  const toggleExample = useCallback((key: string) => {
+    setExampleOpen((prev) => ({ ...prev, [key]: !prev[key] }))
+  }, [])
 
   const activeSpec = endpoint.isManuallyEdited ? endpoint.manualSpec : endpoint.spec
 
@@ -28,12 +31,17 @@ export function EndpointDetail({ endpoint: initial }: { endpoint: Endpoint }) {
       )}
 
       <div className="flex items-center justify-between px-8 pt-6 pb-2">
-        <div className="flex items-center gap-3">
+        <div className="flex items-center gap-3 flex-wrap">
           <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>
           )}
+          {activeSpec.tags?.map((tag) => (
+            <span key={tag} className="text-xs text-zinc-400 bg-zinc-800 border border-zinc-700 px-2 py-0.5 rounded-full">
+              {tag}
+            </span>
+          ))}
         </div>
         <button
           onClick={() => setEditing((e) => !e)}
@@ -45,7 +53,7 @@ export function EndpointDetail({ endpoint: initial }: { endpoint: Endpoint }) {
 
       {editing ? (
         <div className="flex-1 overflow-hidden border-t border-zinc-800 mt-4">
-          <SpecEditor endpoint={endpoint} onSaved={setEndpoint} />
+          <SpecEditor endpoint={endpoint} onSaved={setEndpoint} onCancel={() => setEditing(false)} />
         </div>
       ) : (
         <div className="flex-1 overflow-y-auto px-8 pb-8 space-y-8">
@@ -68,16 +76,20 @@ export function EndpointDetail({ endpoint: initial }: { endpoint: Endpoint }) {
               </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 key={`${param.in}-${param.name}`} className={`px-4 py-3 flex gap-4 ${param.deprecated ? 'bg-yellow-500/5' : ''}`}>
                     <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>
+                        <code className={`text-sm font-mono ${param.deprecated ? 'line-through text-zinc-500' : '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>
+                          <span className="text-xs font-medium text-yellow-400 bg-yellow-500/10 border border-yellow-500/30 px-1.5 py-0.5 rounded">
+                            deprecated
+                          </span>
                         )}
                       </div>
                       {param.description && (
@@ -95,14 +107,27 @@ export function EndpointDetail({ endpoint: initial }: { endpoint: Endpoint }) {
             </section>
           )}
 
+          {activeSpec.security && activeSpec.security.length > 0 && (
+            <section>
+              <h3 className="text-xs font-semibold text-zinc-400 uppercase tracking-wider mb-3">
+                Security
+              </h3>
+              <div className="flex flex-wrap gap-2">
+                {activeSpec.security.flatMap((requirement) =>
+                  Object.keys(requirement).map((scheme) => (
+                    <SecurityBadge key={scheme} scheme={scheme} />
+                  ))
+                )}
+              </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>
+              <ContentFields content={activeSpec.requestBody.content} />
             </section>
           )}
 
@@ -112,19 +137,39 @@ export function EndpointDetail({ endpoint: initial }: { endpoint: Endpoint }) {
                 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} />
+                {Object.entries(activeSpec.responses).map(([status, response]) => {
+                  const mediaType = response.content ? Object.values(response.content)[0] : null
+                  const example = mediaType?.example
+                  const hasExample = example !== undefined
+                  const isOpen = exampleOpen[status] ?? false
+
+                  return (
+                    <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 flex-1">{response.description}</span>
+                        {hasExample && (
+                          <button
+                            onClick={() => toggleExample(status)}
+                            className="text-xs text-zinc-500 hover:text-zinc-300 transition-colors"
+                          >
+                            {isOpen ? 'Hide example' : 'Example'}
+                          </button>
+                        )}
                       </div>
-                    )}
-                  </div>
-                ))}
+                      {response.content && !isOpen && (
+                        <div className="p-4">
+                          <ContentFields content={response.content} />
+                        </div>
+                      )}
+                      {hasExample && isOpen && (
+                        <pre className="p-4 text-xs font-mono text-zinc-300 leading-5 overflow-x-auto">
+                          {JSON.stringify(example, null, 2)}
+                        </pre>
+                      )}
+                    </div>
+                  )
+                })}
               </div>
             </section>
           )}
@@ -134,6 +179,143 @@ export function EndpointDetail({ endpoint: initial }: { endpoint: Endpoint }) {
   )
 }
 
+type JsonSchema = {
+  type?: string
+  format?: string
+  description?: string
+  enum?: unknown[]
+  properties?: Record<string, JsonSchema>
+  required?: string[]
+  items?: JsonSchema
+}
+
+function ContentFields({ content }: { content: Record<string, { schema?: JsonSchema }> }) {
+  const mediaType = Object.values(content ?? {})[0]
+  const schema = mediaType?.schema
+  if (!schema) return null
+
+  if (schema.type === 'object' && schema.properties) {
+    return (
+      <PropertiesTable properties={schema.properties} required={schema.required ?? []} depth={0} />
+    )
+  }
+
+  if (schema.type === 'array' && schema.items) {
+    return (
+      <div>
+        <p className="text-xs text-zinc-500 mb-2 font-mono">array of object</p>
+        {schema.items.properties && (
+          <PropertiesTable
+            properties={schema.items.properties}
+            required={schema.items.required ?? []}
+            depth={0}
+          />
+        )}
+      </div>
+    )
+  }
+
+  return (
+    <div className="rounded-lg border border-zinc-800 px-4 py-3 text-xs text-zinc-400 font-mono">
+      {schema.type ?? 'unknown'}
+      {schema.format ? <span className="text-zinc-500">({schema.format})</span> : null}
+    </div>
+  )
+}
+
+function PropertiesTable({
+  properties,
+  required,
+  depth,
+}: {
+  properties: Record<string, JsonSchema>
+  required: string[]
+  depth: number
+}) {
+  return (
+    <div className={`rounded-lg border border-zinc-800 divide-y divide-zinc-800 ${depth > 0 ? 'mt-2' : ''}`}>
+      {Object.entries(properties).map(([name, schema]) => {
+        const isRequired = required.includes(name)
+        const isArrayOfObject = schema.type === 'array' && schema.items?.properties
+        const typeLabel = isArrayOfObject
+          ? 'array of object'
+          : schema.type === 'array'
+            ? `array[${schema.items?.type ?? 'unknown'}]`
+            : (schema.type ?? 'unknown')
+        const formatSuffix = schema.format ? `(${schema.format})` : ''
+        const hasNestedObject = schema.type === 'object' && schema.properties
+        const hasNestedArray = isArrayOfObject
+
+        return (
+          <div key={name} className="px-4 py-3">
+            <div className="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">{name}</code>
+                  {isRequired ? (
+                    <span className="text-xs text-red-400">required</span>
+                  ) : (
+                    <span className="text-xs text-zinc-600">optional</span>
+                  )}
+                  {schema.description && (
+                    <p className="text-sm text-zinc-500 mt-1 w-full">{schema.description}</p>
+                  )}
+                  {schema.enum && (
+                    <p className="text-xs text-zinc-500 mt-1 w-full">
+                      One of:{' '}
+                      {schema.enum.map((v, i) => (
+                        <code key={i} className="text-zinc-300 bg-zinc-800 px-1 rounded mx-0.5">
+                          {String(v)}
+                        </code>
+                      ))}
+                    </p>
+                  )}
+                </div>
+              </div>
+              <div className="text-xs text-zinc-400 font-mono self-start whitespace-nowrap">
+                {typeLabel}
+                {formatSuffix && <span className="text-zinc-500">{formatSuffix}</span>}
+              </div>
+            </div>
+            {hasNestedObject && (
+              <PropertiesTable
+                properties={schema.properties!}
+                required={schema.required ?? []}
+                depth={depth + 1}
+              />
+            )}
+            {hasNestedArray && (
+              <PropertiesTable
+                properties={schema.items!.properties!}
+                required={schema.items!.required ?? []}
+                depth={depth + 1}
+              />
+            )}
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+const SCHEME_META: Record<string, { label: string; detail: string }> = {
+  bearerAuth:   { label: 'Bearer',    detail: 'http, bearer' },
+  basicAuth:    { label: 'Basic',     detail: 'http, basic' },
+  apiKeyHeader: { label: 'API Key',   detail: 'apiKey, header' },
+  apiKeyQuery:  { label: 'API Key',   detail: 'apiKey, query' },
+  cookieAuth:   { label: 'Cookie',    detail: 'apiKey, cookie' },
+}
+
+function SecurityBadge({ scheme }: { scheme: string }) {
+  const meta = SCHEME_META[scheme] ?? { label: scheme, detail: 'unknown' }
+  return (
+    <span className="inline-flex items-center gap-1.5 rounded-md border border-zinc-700 bg-zinc-900 px-3 py-1.5 text-xs">
+      <span className="text-amber-400 font-medium">{meta.label}</span>
+      <span className="text-zinc-500">({meta.detail})</span>
+    </span>
+  )
+}
+
 function StatusBadge({ code }: { code: string }) {
   const n = parseInt(code, 10)
   const color =

package/src/components/SpecEditor.tsx

@@ -1,30 +1,51 @@
 'use client'
 
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
+import CodeMirror from '@uiw/react-codemirror'
+import { json } from '@codemirror/lang-json'
+import { oneDark } from '@codemirror/theme-one-dark'
 import type { Endpoint } from '@easydocs/core/schema'
 import type { Operation } from '@easydocs/core'
+import { OperationSchema } from '@/lib/operation-schema'
 
 interface Props {
   endpoint: Endpoint
   onSaved: (updated: Endpoint) => void
+  onCancel: () => void
 }
 
-export function SpecEditor({ endpoint, onSaved }: Props) {
+function validate(raw: string): string | null {
+  let parsed: unknown
+  try {
+    parsed = JSON.parse(raw)
+  } catch {
+    return 'Invalid JSON'
+  }
+  const result = OperationSchema.safeParse(parsed)
+  if (!result.success) {
+    const first = result.error.errors[0]
+    return `${first.path.join('.') || 'root'}: ${first.message}`
+  }
+  return null
+}
+
+export function SpecEditor({ endpoint, onSaved, onCancel }: 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 [validationError, setValidationError] = useState<string | null>(null)
+  const [saveError, setSaveError] = useState<string | null>(null)
   const [saving, setSaving] = useState(false)
 
+  useEffect(() => {
+    setValidationError(validate(value))
+  }, [value])
+
   async function handleSave() {
-    setError(null)
-    let parsed: Operation
-    try {
-      parsed = JSON.parse(value) as Operation
-    } catch {
-      setError('Invalid JSON')
-      return
-    }
+    const err = validate(value)
+    if (err) { setValidationError(err); return }
+    setSaveError(null)
     setSaving(true)
+    const parsed = JSON.parse(value) as Operation
     const res = await fetch(`/api/endpoints/${endpoint.id}/spec`, {
       method: 'PUT',
       headers: { 'Content-Type': 'application/json' },
@@ -34,31 +55,54 @@ export function SpecEditor({ endpoint, onSaved }: Props) {
     if (res.ok) {
       onSaved({ ...endpoint, manualSpec: parsed, isManuallyEdited: true, hasConflict: false })
     } else {
-      setError('Failed to save')
+      setSaveError('Failed to save')
     }
   }
 
+  const invalid = validationError !== null
+
   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>}
+        <div className="flex items-center gap-2">
+          {saveError && <span className="text-xs text-red-400">{saveError}</span>}
+          <button
+            onClick={onCancel}
+            className="text-xs px-3 py-1 rounded bg-zinc-800 text-zinc-400 hover:text-zinc-200 hover:bg-zinc-700 transition-colors"
+          >
+            Cancel
+          </button>
           <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"
+            disabled={saving || invalid}
+            className="text-xs px-3 py-1 rounded bg-zinc-700 text-zinc-100 hover:bg-zinc-600 disabled:opacity-40 disabled:cursor-not-allowed 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 className="flex-1 overflow-auto">
+        <CodeMirror
+          value={value}
+          height="100%"
+          extensions={[json()]}
+          theme={oneDark}
+          onChange={setValue}
+          basicSetup={{
+            lineNumbers: true,
+            foldGutter: true,
+            bracketMatching: true,
+            autocompletion: true,
+          }}
+          style={{ fontSize: '12px', height: '100%' }}
+        />
+      </div>
+      {validationError && (
+        <div className="px-4 py-2 border-t border-red-900/50 bg-red-950/30 text-xs text-red-400 font-mono">
+          {validationError}
+        </div>
+      )}
     </div>
   )
 }

package/src/lib/operation-schema.ts

@@ -0,0 +1,44 @@
+import { z } from 'zod'
+
+const SchemaObject = z.record(z.any()).optional()
+
+const MediaTypeSchema = z.object({
+  schema: SchemaObject,
+  example: z.any().optional(),
+  examples: z.record(z.any()).optional(),
+})
+
+const ParameterSchema = z.object({
+  name: z.string(),
+  in: z.enum(['query', 'header', 'path', 'cookie']),
+  description: z.string().optional(),
+  required: z.boolean().default(false),
+  deprecated: z.boolean().optional(),
+  schema: SchemaObject,
+  example: z.any().optional(),
+})
+
+const ResponseSchema = z.object({
+  description: z.string(),
+  headers: z.record(z.any()).optional(),
+  content: z.record(MediaTypeSchema).optional(),
+})
+
+export const OperationSchema = z.object({
+  tags: z.array(z.string()).optional(),
+  summary: z.string().optional(),
+  description: z.string().optional(),
+  operationId: z.string().optional(),
+  parameters: z.array(ParameterSchema).optional(),
+  requestBody: z
+    .object({
+      description: z.string().optional(),
+      required: z.boolean().optional(),
+      content: z.record(MediaTypeSchema),
+    })
+    .nullable()
+    .optional(),
+  responses: z.record(ResponseSchema).default({}),
+  deprecated: z.boolean().optional(),
+  security: z.array(z.record(z.array(z.string()))).optional(),
+})