camelmind 0.1.0 → 0.2.0

package/template/components/ApiReference/EndpointPage.tsx

@@ -0,0 +1,92 @@
+import type { ParsedOperation, ParsedSpec } from "@/lib/api-types"
+import { MethodBadge } from "./MethodBadge"
+import { ParamsTable } from "./ParamsTable"
+import { SchemaViewer } from "./SchemaViewer"
+import { ResponseDocs } from "./ResponseDocs"
+import { CodeSamples } from "./CodeSamples"
+import { ResponseExample } from "./ResponseExample"
+import { ResponseProvider } from "./ResponseContext"
+
+type Props = {
+  operation: ParsedOperation
+  spec: ParsedSpec
+}
+
+export function EndpointPage({ operation: op, spec }: Props) {
+  const defaultCode =
+    op.responses.find((r) => r.statusCode.startsWith("2") && r.schema)?.statusCode ?? null
+
+  return (
+    <ResponseProvider defaultCode={defaultCode}>
+      <div className="flex flex-col flex-1 overflow-hidden">
+
+        {/* Full-width header — title + method + path on their own row */}
+        <div className="px-8 pt-8 pb-5 border-b border-gray-100 dark:border-gray-800 shrink-0">
+          <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-50 mb-3">{op.summary}</h1>
+          <div className="flex items-center gap-3">
+            <MethodBadge method={op.method} />
+            <code className="text-sm font-mono text-gray-600 dark:text-gray-400">
+              {op.path}
+            </code>
+            {op.deprecated && (
+              <span className="text-xs font-medium text-amber-600 bg-amber-100 dark:bg-amber-900/30 dark:text-amber-400 px-2 py-0.5 rounded">
+                deprecated
+              </span>
+            )}
+          </div>
+        </div>
+
+        {/* Two-column body */}
+        <div className="flex flex-1 min-h-0 overflow-hidden">
+
+          {/* Left: description, params, request body, responses */}
+          <div className="flex-1 px-8 py-6 min-w-0 max-w-2xl overflow-y-auto">
+            {op.description && (
+              <div className="text-gray-600 dark:text-gray-400 mb-8 leading-relaxed whitespace-pre-line">
+                {op.description}
+              </div>
+            )}
+
+            <ParamsTable parameters={op.parameters} schemas={spec.schemas} group="path" />
+            <ParamsTable parameters={op.parameters} schemas={spec.schemas} group="query" />
+            <ParamsTable parameters={op.parameters} schemas={spec.schemas} group="header" />
+
+            {op.requestBody && (
+              <section className="mb-8">
+                <div className="flex items-center gap-2 mb-3">
+                  <h3 className="text-xs font-semibold uppercase tracking-widest text-gray-400 dark:text-gray-500">
+                    Request Body
+                  </h3>
+                  {op.requestBody.required && (
+                    <span className="text-[10px] font-medium text-red-500 uppercase tracking-wide">required</span>
+                  )}
+                </div>
+                {op.requestBody.description && (
+                  <p className="text-sm text-gray-600 dark:text-gray-400 mb-3">{op.requestBody.description}</p>
+                )}
+                <p className="text-xs font-mono text-gray-400 mb-3">{op.requestBody.contentType}</p>
+                <div className="rounded-lg border border-gray-200 dark:border-gray-800 px-4 py-2">
+                  <SchemaViewer schema={op.requestBody.schema} schemas={spec.schemas} />
+                </div>
+              </section>
+            )}
+
+            <ResponseDocs responses={op.responses} schemas={spec.schemas} />
+          </div>
+
+          {/* Right: code samples + interactive response example */}
+          <div className="hidden xl:flex flex-col w-[520px] shrink-0 overflow-y-auto">
+            <div className="p-6">
+              <p className="text-xs font-semibold uppercase tracking-widest text-gray-400 dark:text-gray-500 mb-3">
+                Request
+              </p>
+              <CodeSamples samples={op.codeSamples} />
+              <ResponseExample responses={op.responses} schemas={spec.schemas} />
+            </div>
+          </div>
+
+        </div>
+      </div>
+    </ResponseProvider>
+  )
+}

package/template/components/ApiReference/ExpandableCode.tsx

@@ -0,0 +1,132 @@
+"use client"
+
+import { useState, useEffect } from "react"
+
+const CopyIcon = () => (
+  <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+  </svg>
+)
+
+const CheckIcon = () => (
+  <svg className="w-4 h-4 text-green-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+  </svg>
+)
+
+const ExpandIcon = () => (
+  <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5v-4m0 4h-4m4 0l-5-5" />
+  </svg>
+)
+
+const CloseIcon = () => (
+  <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+  </svg>
+)
+
+type Props = {
+  code: string
+}
+
+export function ExpandableCode({ code }: Props) {
+  const [copied, setCopied]           = useState(false)
+  const [modalCopied, setModalCopied] = useState(false)
+  const [expanded, setExpanded]       = useState(false)
+
+  useEffect(() => {
+    if (!expanded) return
+    function onKey(e: KeyboardEvent) {
+      if (e.key === "Escape") setExpanded(false)
+    }
+    window.addEventListener("keydown", onKey)
+    return () => window.removeEventListener("keydown", onKey)
+  }, [expanded])
+
+  function copy(setFlag: (v: boolean) => void) {
+    navigator.clipboard.writeText(code).then(() => {
+      setFlag(true)
+      setTimeout(() => setFlag(false), 1500)
+    })
+  }
+
+  const lines = code.split("\n")
+
+  return (
+    <>
+      {/* Inline block */}
+      <div className="rounded-lg overflow-hidden border border-gray-700 bg-[#1a1d23]">
+        {/* Toolbar */}
+        <div className="flex items-center justify-end gap-0.5 px-2 py-1 border-b border-gray-700">
+          <button
+            onClick={() => copy(setCopied)}
+            className="p-1.5 text-gray-400 hover:text-gray-200 transition-colors"
+            title="Copy"
+          >
+            {copied ? <CheckIcon /> : <CopyIcon />}
+          </button>
+          <button
+            onClick={() => setExpanded(true)}
+            className="p-1.5 text-gray-400 hover:text-gray-200 transition-colors"
+            title="Expand"
+          >
+            <ExpandIcon />
+          </button>
+        </div>
+
+        <pre className="p-4 text-[13px] leading-relaxed text-gray-200 overflow-x-auto font-mono whitespace-pre">
+          <code>{code}</code>
+        </pre>
+      </div>
+
+      {/* Expanded modal */}
+      {expanded && (
+        <div
+          className="fixed inset-0 z-50 flex items-center justify-center p-6"
+          onClick={(e) => { if (e.target === e.currentTarget) setExpanded(false) }}
+        >
+          <div className="absolute inset-0 bg-black/70" />
+
+          <div className="relative w-full max-w-4xl max-h-[85vh] flex flex-col rounded-xl overflow-hidden border border-gray-700 bg-[#1a1d23] shadow-2xl">
+            {/* Modal header */}
+            <div className="flex items-center justify-end gap-0.5 px-3 py-2 border-b border-gray-700 shrink-0">
+              <button
+                onClick={() => copy(setModalCopied)}
+                className="p-1.5 text-gray-400 hover:text-gray-200 transition-colors"
+                title="Copy"
+              >
+                {modalCopied ? <CheckIcon /> : <CopyIcon />}
+              </button>
+              <button
+                onClick={() => setExpanded(false)}
+                className="p-1.5 text-gray-400 hover:text-gray-200 transition-colors"
+                title="Close"
+              >
+                <CloseIcon />
+              </button>
+            </div>
+
+            {/* Code with line numbers */}
+            <div className="overflow-auto flex-1">
+              <table className="w-full border-collapse">
+                <tbody>
+                  {lines.map((line, i) => (
+                    <tr key={i} className="hover:bg-white/5">
+                      <td className="select-none text-right text-gray-600 text-[13px] font-mono px-4 py-0 leading-6 w-10 shrink-0">
+                        {i + 1}
+                      </td>
+                      <td className="text-gray-200 text-[13px] font-mono pl-4 pr-8 py-0 leading-6 whitespace-pre">
+                        {line || " "}
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  )
+}

package/template/components/ApiReference/MethodBadge.tsx

@@ -0,0 +1,29 @@
+import type { HttpMethod } from "@/lib/api-types"
+
+const METHOD_STYLES: Record<string, string> = {
+  get:     "bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300",
+  post:    "bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300",
+  put:     "bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-300",
+  patch:   "bg-orange-100 text-orange-700 dark:bg-orange-900/40 dark:text-orange-300",
+  delete:  "bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300",
+  head:    "bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400",
+  options: "bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400",
+}
+
+type Props = {
+  method: HttpMethod
+  size?: "sm" | "md"
+}
+
+export function MethodBadge({ method, size = "md" }: Props) {
+  const styles = METHOD_STYLES[method] ?? METHOD_STYLES.get
+  const sizeClass = size === "sm"
+    ? "text-[10px] px-1.5 py-0.5 min-w-[38px]"
+    : "text-xs px-2 py-1 min-w-[46px]"
+
+  return (
+    <span className={`inline-flex items-center justify-center rounded font-mono font-bold uppercase tracking-wide shrink-0 ${sizeClass} ${styles}`}>
+      {method}
+    </span>
+  )
+}

package/template/components/ApiReference/ParamsTable.tsx

@@ -0,0 +1,70 @@
+import type { ParsedParameter, SchemaObject } from "@/lib/api-types"
+import { SchemaViewer } from "./SchemaViewer"
+
+type Props = {
+  parameters: ParsedParameter[]
+  schemas: Record<string, SchemaObject>
+  group: "path" | "query" | "header"
+}
+
+const GROUP_LABELS: Record<string, string> = {
+  path:   "Path Parameters",
+  query:  "Query Parameters",
+  header: "Header Parameters",
+}
+
+function TypeTag({ schema }: { schema: SchemaObject }) {
+  if (schema.enum) {
+    return (
+      <span className="text-xs font-mono text-gray-500">
+        {schema.type ?? "string"}{" "}
+        <span className="text-gray-400 text-[11px]">
+          ({schema.enum.map((v) => JSON.stringify(v)).join(" | ")})
+        </span>
+      </span>
+    )
+  }
+  if (schema.format) {
+    return <span className="text-xs font-mono text-gray-500">{schema.type} ({schema.format})</span>
+  }
+  return <span className="text-xs font-mono text-gray-500">{schema.type ?? "string"}</span>
+}
+
+export function ParamsTable({ parameters, schemas, group }: Props) {
+  const filtered = parameters.filter((p) => p.in === group)
+  if (!filtered.length) return null
+
+  return (
+    <section className="mb-8">
+      <h3 className="text-xs font-semibold uppercase tracking-widest text-gray-400 dark:text-gray-500 mb-3">
+        {GROUP_LABELS[group]}
+      </h3>
+      <div className="rounded-lg border border-gray-200 dark:border-gray-800 divide-y divide-gray-100 dark:divide-gray-800">
+        {filtered.map((param) => (
+          <div key={param.name} className="px-4 py-3">
+            <div className="flex items-center gap-2 flex-wrap mb-0.5">
+              <code className="text-sm font-mono font-medium text-gray-900 dark:text-gray-100">
+                {param.name}
+              </code>
+              <TypeTag schema={param.schema} />
+              {param.required && (
+                <span className="text-[10px] font-medium text-red-500 uppercase tracking-wide">required</span>
+              )}
+              {param.deprecated && (
+                <span className="text-[10px] font-medium text-amber-500 uppercase tracking-wide">deprecated</span>
+              )}
+            </div>
+            {param.description && (
+              <p className="text-sm text-gray-500 dark:text-gray-400">{param.description}</p>
+            )}
+            {param.schema.default !== undefined && (
+              <p className="text-xs text-gray-400 mt-0.5">
+                Default: <code className="font-mono">{JSON.stringify(param.schema.default)}</code>
+              </p>
+            )}
+          </div>
+        ))}
+      </div>
+    </section>
+  )
+}

package/template/components/ApiReference/ResponseContext.tsx

@@ -0,0 +1,32 @@
+"use client"
+
+import { createContext, useContext, useState } from "react"
+
+type ResponseContextValue = {
+  selectedCode: string | null
+  setSelectedCode: (code: string | null) => void
+}
+
+const ResponseContext = createContext<ResponseContextValue>({
+  selectedCode: null,
+  setSelectedCode: () => {},
+})
+
+export function ResponseProvider({
+  children,
+  defaultCode,
+}: {
+  children: React.ReactNode
+  defaultCode: string | null
+}) {
+  const [selectedCode, setSelectedCode] = useState<string | null>(defaultCode)
+  return (
+    <ResponseContext.Provider value={{ selectedCode, setSelectedCode }}>
+      {children}
+    </ResponseContext.Provider>
+  )
+}
+
+export function useResponseContext() {
+  return useContext(ResponseContext)
+}

package/template/components/ApiReference/ResponseDocs.tsx

@@ -0,0 +1,135 @@
+"use client"
+
+import type { ParsedResponse, SchemaObject } from "@/lib/api-types"
+import { SchemaViewer } from "./SchemaViewer"
+import { useResponseContext } from "./ResponseContext"
+
+function statusBadgeClass(code: string) {
+  const c = code[0]
+  if (c === "2") return "bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300"
+  if (c === "3") return "bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300"
+  return "bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300"
+}
+
+type Props = {
+  responses: ParsedResponse[]
+  schemas: Record<string, SchemaObject>
+}
+
+function SuccessRow({ response, schemas }: { response: ParsedResponse; schemas: Record<string, SchemaObject> }) {
+  const { selectedCode, setSelectedCode } = useResponseContext()
+  const isSelected = selectedCode === response.statusCode
+
+  return (
+    <div
+      className={`rounded-lg border px-4 py-3 mb-2 cursor-pointer transition-colors ${
+        isSelected
+          ? "border-green-200 dark:border-green-800 bg-green-50 dark:bg-green-900/10"
+          : "border-gray-200 dark:border-gray-800 hover:border-gray-300 dark:hover:border-gray-700"
+      }`}
+      onClick={() => setSelectedCode(response.statusCode)}
+    >
+      <div className="flex items-center gap-3 mb-2">
+        <span className={`text-xs font-mono font-bold px-2 py-0.5 rounded ${statusBadgeClass(response.statusCode)}`}>
+          {response.statusCode}
+        </span>
+        <span className="text-sm text-gray-700 dark:text-gray-300">{response.description}</span>
+      </div>
+      {response.schema && (
+        <div className="mt-2">
+          {response.contentType && (
+            <p className="text-xs font-mono text-gray-400 mb-2">{response.contentType}</p>
+          )}
+          <SchemaViewer schema={response.schema} schemas={schemas} />
+        </div>
+      )}
+    </div>
+  )
+}
+
+function ErrorRow({ response, schemas }: { response: ParsedResponse; schemas: Record<string, SchemaObject> }) {
+  const { selectedCode, setSelectedCode } = useResponseContext()
+  const isExpanded = selectedCode === response.statusCode
+
+  if (isExpanded) {
+    return (
+      <div className="border-b border-gray-100 dark:border-gray-800 last:border-0 bg-red-50/50 dark:bg-red-900/5">
+        {/* Expanded header */}
+        <div className="flex items-center gap-3 px-4 py-3">
+          <span className={`text-xs font-mono font-bold px-2 py-0.5 rounded ${statusBadgeClass(response.statusCode)}`}>
+            {response.statusCode}
+          </span>
+          <span className="text-sm text-gray-700 dark:text-gray-300 flex-1">{response.description}</span>
+          <button
+            onClick={() => setSelectedCode(null)}
+            className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors p-0.5"
+            aria-label="Close"
+          >
+            <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+
+        {/* Schema */}
+        {response.schema && (
+          <div className="px-4 pb-4">
+            {response.contentType && (
+              <p className="text-xs font-mono text-gray-400 mb-2">{response.contentType}</p>
+            )}
+            <SchemaViewer schema={response.schema} schemas={schemas} />
+          </div>
+        )}
+      </div>
+    )
+  }
+
+  return (
+    <button
+      onClick={() => setSelectedCode(response.statusCode)}
+      className="w-full flex items-center gap-3 px-4 py-3 text-left hover:bg-gray-50 dark:hover:bg-gray-900/40 transition-colors border-b border-gray-100 dark:border-gray-800 last:border-0"
+    >
+      <span className={`text-xs font-mono font-bold px-2 py-0.5 rounded ${statusBadgeClass(response.statusCode)}`}>
+        {response.statusCode}
+      </span>
+      <span className="text-sm text-gray-700 dark:text-gray-300">{response.description}</span>
+    </button>
+  )
+}
+
+export function ResponseDocs({ responses, schemas }: Props) {
+  if (!responses.length) return null
+
+  const successResponses = responses.filter((r) => r.statusCode.startsWith("2") || r.statusCode.startsWith("3"))
+  const errorResponses = responses.filter((r) => r.statusCode.startsWith("4") || r.statusCode.startsWith("5"))
+
+  return (
+    <section className="mb-8">
+      {successResponses.length > 0 && (
+        <>
+          <h3 className="text-xs font-semibold uppercase tracking-widest text-gray-400 dark:text-gray-500 mb-3">
+            Responses
+          </h3>
+          <div className="mb-6">
+            {successResponses.map((r) => (
+              <SuccessRow key={r.statusCode} response={r} schemas={schemas} />
+            ))}
+          </div>
+        </>
+      )}
+
+      {errorResponses.length > 0 && (
+        <>
+          <h3 className="text-xs font-semibold uppercase tracking-widest text-gray-400 dark:text-gray-500 mb-3">
+            Errors
+          </h3>
+          <div className="rounded-lg border border-gray-200 dark:border-gray-800 overflow-hidden">
+            {errorResponses.map((r) => (
+              <ErrorRow key={r.statusCode} response={r} schemas={schemas} />
+            ))}
+          </div>
+        </>
+      )}
+    </section>
+  )
+}

package/template/components/ApiReference/ResponseExample.tsx

@@ -0,0 +1,98 @@
+"use client"
+
+import { useState, useEffect, useRef } from "react"
+import type { ParsedResponse, SchemaObject } from "@/lib/api-types"
+import { buildExample } from "@/lib/api-utils"
+import { useResponseContext } from "./ResponseContext"
+import { ExpandableCode } from "./ExpandableCode"
+
+function statusBadgeClass(code: string) {
+  const c = code[0]
+  if (c === "2") return "bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300"
+  if (c === "3") return "bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300"
+  return "bg-red-100 text-red-700 dark:bg-red-900/40 dark:text-red-300"
+}
+
+type Props = {
+  responses: ParsedResponse[]
+  schemas: Record<string, SchemaObject>
+}
+
+export function ResponseExample({ responses, schemas }: Props) {
+  const { selectedCode, setSelectedCode } = useResponseContext()
+  const [dropdownOpen, setDropdownOpen] = useState(false)
+  const dropdownRef = useRef<HTMLDivElement>(null)
+
+  const responsesWithSchema = responses.filter((r) => r.schema)
+  const current =
+    (selectedCode ? responsesWithSchema.find((r) => r.statusCode === selectedCode) : null) ??
+    responsesWithSchema[0]
+
+  const json = current?.schema
+    ? JSON.stringify(buildExample(current.schema, schemas), null, 2)
+    : null
+
+  useEffect(() => {
+    if (!dropdownOpen) return
+    function onClickOutside(e: MouseEvent) {
+      if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
+        setDropdownOpen(false)
+      }
+    }
+    document.addEventListener("mousedown", onClickOutside)
+    return () => document.removeEventListener("mousedown", onClickOutside)
+  }, [dropdownOpen])
+
+  if (!current || !json) return null
+
+  return (
+    <div className="mt-6">
+      <p className="text-xs font-semibold uppercase tracking-widest text-gray-400 dark:text-gray-500 mb-3">
+        Response
+      </p>
+
+      {/* Status code selector */}
+      <div className="relative mb-3" ref={dropdownRef}>
+        <button
+          onClick={() => setDropdownOpen((o) => !o)}
+          className="flex items-center gap-2 px-3 py-2 w-full rounded-lg border border-gray-700 bg-[#1e2129] hover:bg-[#252830] transition-colors text-left"
+        >
+          <span className={`text-xs font-mono font-bold px-1.5 py-0.5 rounded ${statusBadgeClass(current.statusCode)}`}>
+            {current.statusCode}
+          </span>
+          <span className="text-sm text-gray-300 flex-1 truncate">{current.description}</span>
+          <svg
+            className={`w-4 h-4 text-gray-500 shrink-0 transition-transform ${dropdownOpen ? "rotate-180" : ""}`}
+            fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}
+          >
+            <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
+          </svg>
+        </button>
+
+        {dropdownOpen && (
+          <div className="absolute top-full left-0 right-0 mt-1 rounded-lg border border-gray-700 bg-[#1a1d23] shadow-xl z-10 overflow-hidden">
+            {responsesWithSchema.map((r) => (
+              <button
+                key={r.statusCode}
+                onClick={() => {
+                  setSelectedCode(r.statusCode)
+                  setDropdownOpen(false)
+                }}
+                className={`w-full flex items-center gap-2 px-3 py-2.5 text-left hover:bg-white/5 transition-colors ${
+                  r.statusCode === current.statusCode ? "bg-white/5" : ""
+                }`}
+              >
+                <span className={`text-xs font-mono font-bold px-1.5 py-0.5 rounded ${statusBadgeClass(r.statusCode)}`}>
+                  {r.statusCode}
+                </span>
+                <span className="text-sm text-gray-300 truncate">{r.description}</span>
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+
+      <ExpandableCode code={json} />
+    </div>
+  )
+}