This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
npm run dev # Start development server at http://localhost:3000
npm run build # Build for production
npm run lint # Run ESLint
npm run lint:fix # Fix ESLint issues
npm run type-check # TypeScript type checking
npm run test # Run tests with Vitest
npm run test:coverage # Run tests with coverageCI runs semgrep ci (diff-aware against the PR baseline). For local one-shot
scans you have two options depending on whether you've signed up for Semgrep
Pro:
With Pro entitlement — runs the same engine as CI, including taint analysis
and the curated Pro rule pack. Requires pipx install semgrep and a one-time
semgrep login.
semgrep --pro \
--config p/default \
--config p/owasp-top-ten \
--config p/javascript \
--config p/typescript \
--config p/react \
--config p/nextjs \
--config p/jwtWithout Pro (community fallback) — drop --pro. You get the same rule
packs but only the OSS engine; some advanced cross-file taint findings won't
surface. Useful for forks and external contributors.
semgrep \
--config p/default \
--config p/owasp-top-ten \
--config p/javascript \
--config p/typescript \
--config p/react \
--config p/nextjs \
--config p/jwtUse the ontokit-web.sh script to manage the development server:
./ontokit-web.sh start # Start the dev server (runs in background)
./ontokit-web.sh stop # Stop the running server
./ontokit-web.sh restart # Restart the server
./ontokit-web.sh status # Check if server is runningImportant usage notes:
- Always use this script instead of
npm run devdirectly for background server management - The script handles port conflicts interactively (kill blocking process, use random port, or quit)
- Non-interactive mode is auto-detected when stdin is not a terminal — the script automatically enables
--forcemode, killing any blocking process without prompting - You can also explicitly use
--force/-fto force-kill blocking processes:./ontokit-web.sh restart --force
- To clear Next.js cache before starting:
rm -rf .next && ./ontokit-web.sh start - Log file:
.ontokit-web.log - PID file:
.ontokit-web.pid - Environment variable
PORTcan override default port 3000
OntoKit Web is a Next.js 15 frontend for collaborative OWL ontology editing. It connects to a FastAPI backend (ontokit-api) for ontology operations.
Authentication Flow: Uses NextAuth.js v5 with Zitadel OIDC provider. The auth.ts file at root handles token refresh and session management. Access tokens are passed to API calls via session.accessToken.
API Client Pattern: All backend communication goes through lib/api/client.ts which provides:
- Type-safe API methods (
api.get,api.post, etc.) - Domain-specific APIs:
ontologyApi,classApi,projectOntologyApi - Automatic query parameter handling and error wrapping via
ApiError
Ontology Editor Architecture (app/projects/[id]/editor/page.tsx):
- Three-panel layout: Class tree (left), Detail panel (right), Source/Health tabs (bottom)
- Tree state managed by
useOntologyTreehook with lazy loading - Source view uses Monaco editor with custom Turtle language support
- Web Worker (
lib/editor/indexWorker.ts) handles IRI indexing for linting without blocking UI
Monaco Editor Integration (components/editor/TurtleEditor.tsx):
- Custom Turtle syntax highlighting in
lib/editor/languages/turtle.ts - Hover provider shows full IRI resolution
- Ctrl+Click navigation: internal ontology IRIs navigate to tree, external vocabulary IRIs open in browser
- Distinguishes internal vs external namespaces by checking against
commonPrefixes
lib/api/- Backend API clients (projects, revisions, lint, pullRequests)lib/editor/- Monaco editor support (languages, Web Worker indexing)lib/ontology/types.ts- OWL entity type definitions (OWLClass, OWLProperty, etc.)components/editor/- Ontology editor components (ClassTree, ClassDetailPanel, TurtleEditor)components/pr/- Pull request workflow componentscomponents/revision/- Branch and revision history components
- React Query (
@tanstack/react-query) for server state - Zustand for client-side state
- URL state for selected class (
classIriquery param)
Required for development:
NEXT_PUBLIC_API_URL- Backend API URL (default: http://localhost:8000)ZITADEL_ISSUER,ZITADEL_CLIENT_ID,ZITADEL_CLIENT_SECRET- Auth providerNEXTAUTH_URL,NEXTAUTH_SECRET- NextAuth.js configuration
lib/utils.ts provides:
cn()- Tailwind class merginggetLocalName(iri)- Extract local name from IRI (after # or last /)getPreferredLabel(labels, lang)- Get label in preferred language