kilo-cms 0.1.0

package/README.md

@@ -0,0 +1,186 @@
+# Kilo CMS
+
+An installable, config-driven CMS engine for Next.js — an admin panel, RBAC, a generic
+field-type engine, and an API, mounted into your own app. Define your content schema via
+config, not by hand-editing a registry. Modeled on how [Filament](https://filamentphp.com/)
+installs into a Laravel app.
+
+> **Status**: pre-1.0, proven end-to-end against one real production app
+> ([`the-usual-dev`](https://github.com/revaldyas/the-usual-dev)'s `apps/site`), not yet used
+> by a second, independent project. API surface may still change.
+
+## What you get
+
+- A generic field-type engine (`text`, `richtext`, `image`, `relation`, `array`, `blocks`,
+  and more) driving CRUD, validation, list rendering, and filtering from a plain config object
+  — no schema-generation step, no code-gen.
+- Role-based access control, per content type and per field.
+- Media library, review/approval workflow, scheduled publishing, localization, webhooks, an
+  AI writing assistant, and a dashboard builder — all included, all config-driven.
+- Auth via [better-auth](https://www.better-auth.com/), mounted the same one-line way
+  `better-auth` itself mounts into a Next.js route (`export const { GET, POST } =
+  toNextJsHandler(auth)`).
+- A CLI (`npx kilo-cms`) for scaffolding new collections without hand-editing a central
+  registry.
+
+## Install
+
+```sh
+npm install kilo-cms
+```
+
+`next`, `react`, and `react-dom` are peer dependencies — Kilo CMS uses whatever versions your
+own project already has.
+
+Add `transpilePackages: ['kilo-cms']` to your `next.config.ts` — Kilo CMS ships raw TypeScript
+source (including its `'use client'` admin components), not a prebuilt dist, so Next's own
+compiler needs to process it directly.
+
+## Quickstart
+
+Define a collection — split into a **fields** file (client-safe, no database import) and a
+**table** file (server-only, the actual drizzle table):
+
+```ts
+// src/collections/projects/fields.ts
+import { defineCollectionFields } from 'kilo-cms/collections'
+
+export const projectsFields = defineCollectionFields({
+  kind: 'collection',
+  slug: 'projects',
+  label: 'Projects',
+  labelSingular: 'Project',
+  titleField: 'title',
+  defaultSort: { field: 'sortOrder', dir: 'asc' },
+  groups: [{ id: 'overview', label: 'Overview' }],
+  fields: [
+    { key: 'title', type: 'text', label: 'Title', group: 'overview', required: true, listColumn: true, listPrimary: true },
+  ],
+})
+```
+
+```ts
+// src/collections/projects/table.ts
+import 'server-only'
+import { pgTable, text } from 'drizzle-orm/pg-core'
+import { timestamps } from 'kilo-cms/schema'
+import { defineCollectionTable } from 'kilo-cms/collections/table'
+
+export const projects = defineCollectionTable('projects', pgTable('projects', {
+  id: text('id').primaryKey(),
+  title: text('title').notNull(),
+  ...timestamps,
+}))
+```
+
+Wire it up — one config file, and a place that creates your database connection (both plain
+data/setup, no magic):
+
+```ts
+// kilo.config.ts — the one file you edit to add/list collections
+import { projectsFields } from './src/collections/projects/fields'
+import './src/collections/projects/table' // side-effecting: registers the table
+
+export const collections = [projectsFields]
+export const locales = { codes: ['en'], default: 'en', labels: { en: 'English' } }
+export const currency = { locale: 'en-US', currency: 'USD' }
+```
+
+```ts
+// src/lib/db.ts — creates your db connection AND registers Kilo CMS with it
+import postgres from 'postgres'
+import { drizzle } from 'drizzle-orm/postgres-js'
+import { defineKiloConfig } from 'kilo-cms/config'
+import { createKiloAuth } from 'kilo-cms/auth'
+import { schema } from './schema' // your own merged schema — see below
+import { collections, currency, locales } from '../../kilo.config'
+
+const client = postgres(process.env.DATABASE_URL!)
+export const db = drizzle({ client, schema })
+
+defineKiloConfig({ db, collections, locales, currency })
+
+export const auth = createKiloAuth({
+  db,
+  secret: process.env.BETTER_AUTH_SECRET!,
+  baseURL: process.env.NEXT_PUBLIC_SITE_URL || 'http://localhost:3000',
+})
+```
+
+```ts
+// src/lib/schema.ts — merges Kilo CMS's own tables (auth, RBAC, media, settings, ...) with yours
+export * from 'kilo-cms/schema'
+export * from '../collections/projects/table'
+
+import { schema as kiloSchema } from 'kilo-cms/schema'
+import { projects } from '../collections/projects/table'
+export const schema = { ...kiloSchema, projects }
+```
+
+Registration is tied to `db.ts`'s own first import (not a `register()`-hook-only approach) —
+Next.js's build-time static generation spawns separate worker processes, and a hook like
+`instrumentation.ts` isn't guaranteed to fire in every one of them before a page module
+evaluates. Every admin page/route stub should start with `import '@/lib/db'` before its
+re-export, for the same reason:
+
+```ts
+// app/(admin)/admin/dashboard/page.tsx
+import '@/lib/db'
+export { default } from 'kilo-cms/admin/pages/dashboard'
+```
+
+```ts
+// app/api/admin/dashboard/route.ts
+import '@/lib/db'
+export { GET, PUT } from 'kilo-cms/routes/admin/dashboard'
+```
+
+## CLI
+
+Run from your own app's directory:
+
+```sh
+npx kilo-cms add-collection <slug>   # scaffold a new collection's fields.ts + table.ts
+npx kilo-cms sync                    # regenerate .kilo/types.gen.ts from src/collections/*
+npx kilo-cms migrate                 # apply Kilo CMS's own package-owned migrations
+```
+
+`add-collection` scaffolds the two files and prints the exact lines to paste into
+`kilo.config.ts` — deliberately not an auto-codemod (a script that edits your config file
+wrong is worse than a 10-second copy-paste).
+
+`migrate` applies Kilo CMS's own schema (auth, RBAC, media, settings, dev-tools, admin-ui,
+locales — see `src/schema/`) against your `DATABASE_URL`, tracked in its own
+`kilo_cms_migrations` table, independent of your own app's migration history for its content
+tables.
+
+## Package layout
+
+| Export | What it is |
+|---|---|
+| `kilo-cms/config` | `defineKiloConfig()` — the one call that wires db + collections + locale/currency together |
+| `kilo-cms/collections` | Client-safe: field types, `defineCollectionFields()`, the registry, value helpers |
+| `kilo-cms/collections/table` | Server-only: `defineCollectionTable()` |
+| `kilo-cms/collections/server` | Server-only: validation, workflow, filters, the query engine |
+| `kilo-cms/schema` | Kilo CMS's own drizzle tables (auth, RBAC, media, settings, dev-tools, admin-ui, locales) |
+| `kilo-cms/auth`, `kilo-cms/auth-client` | `createKiloAuth()` factory + the better-auth React client |
+| `kilo-cms/admin/*` | Admin UI pages and shared components |
+| `kilo-cms/routes/*` | Route Handler logic for the admin API, public API helpers, auth, cron |
+
+## Status / roadmap
+
+Built by extracting a working, in-production CMS out of the app it was originally embedded
+in — see [`the-usual-dev`'s `WORKLOG.md`](https://github.com/revaldyas/the-usual-dev) for the
+full history of that extraction. Not yet done:
+
+- Centralized auth middleware (every admin page currently does its own session check).
+- A single catch-all admin route instead of one thin file per page.
+- An interactive `kilo-cms init` (migrate + seed settings + create the first admin user in one
+  command).
+- A second, independent consumer project to prove the install story beyond the one app this
+  was extracted from.
+
+## License
+
+Proprietary — all rights reserved. Not yet licensed for redistribution; contact the author
+before using this outside of an explicitly authorized project.

package/drizzle.kilo.config.ts

@@ -0,0 +1,17 @@
+import 'dotenv/config'
+import { defineConfig } from 'drizzle-kit'
+
+// kilo-cms's OWN migrations — auth, RBAC, media, settings, dev-tools, admin-ui, locales (see
+// ./src/schema/index.ts). Applied via `npx kilo-cms migrate`, tracked in `kilo_cms_migrations`
+// (a separate history from whatever the host tracks its own content-table migrations under) so
+// bumping the kilo-cms package version and running its migrations never collides with the
+// host's own `drizzle-kit generate` for its content tables. Run this BEFORE the host's own
+// `db:generate`/`db:migrate` after bumping the kilo-cms dependency — see apps/site/
+// drizzle.app.config.ts's comment for why order matters.
+export default defineConfig({
+  schema: './src/schema/index.ts',
+  out: './migrations',
+  dialect: 'postgresql',
+  migrations: { table: 'kilo_cms_migrations' },
+  dbCredentials: { url: process.env.DATABASE_URL || '' },
+})

package/package.json

@@ -0,0 +1,97 @@
+{
+  "name": "kilo-cms",
+  "version": "0.1.0",
+  "description": "An installable, config-driven CMS engine for Next.js — admin panel, RBAC, a generic field-type engine, and an API, mounted into your own app. Define your content schema via config, not a hand-maintained registry.",
+  "keywords": [
+    "cms",
+    "nextjs",
+    "admin-panel",
+    "headless-cms",
+    "typescript",
+    "drizzle",
+    "better-auth"
+  ],
+  "homepage": "https://github.com/revaldyas/KiloCMS#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/revaldyas/KiloCMS.git"
+  },
+  "bugs": {
+    "url": "https://github.com/revaldyas/KiloCMS/issues"
+  },
+  "author": "revaldyas",
+  "license": "UNLICENSED",
+  "type": "module",
+  "exports": {
+    "./config": "./src/config.ts",
+    "./collections": "./src/collections/index.ts",
+    "./collections/server": "./src/collections/server.ts",
+    "./collections/table": "./src/collections/table.ts",
+    "./collections/query": "./src/collections/query.ts",
+    "./schema": "./src/schema/index.ts",
+    "./auth": "./src/auth.ts",
+    "./auth-client": "./src/auth-client.ts",
+    "./permissions": "./src/permissions.ts",
+    "./content-types": "./src/content-types.ts",
+    "./db": "./src/db.ts",
+    "./richtext": "./src/richtext.ts",
+    "./api-tokens": "./src/api-tokens.ts",
+    "./dashboard": "./src/dashboard.ts",
+    "./routes/admin/*": "./src/routes/admin/*/route.ts",
+    "./routes/*": "./src/routes/*.ts",
+    "./admin/*": "./src/admin/*.tsx",
+    "./admin.css": "./src/admin/admin.css",
+    "./globals.css": "./src/admin/globals.css"
+  },
+  "bin": {
+    "kilo-cms": "./src/cli/index.mjs"
+  },
+  "files": [
+    "src",
+    "drizzle.kilo.config.ts",
+    "README.md"
+  ],
+  "scripts": {
+    "db:generate": "drizzle-kit generate --config drizzle.kilo.config.ts",
+    "db:migrate": "drizzle-kit migrate --config drizzle.kilo.config.ts",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@aws-sdk/client-s3": "^3.1135.0",
+    "@better-auth/drizzle-adapter": "^1.5.0",
+    "@fontsource/dm-sans": "^5.3.0",
+    "@tiptap/core": "^3.31.3",
+    "@tiptap/extension-image": "^3.31.3",
+    "@tiptap/extension-link": "^3.31.3",
+    "@tiptap/extension-placeholder": "^3.31.3",
+    "@tiptap/extension-table": "^3.31.3",
+    "@tiptap/pm": "^3.31.3",
+    "@tiptap/react": "^3.31.3",
+    "@tiptap/starter-kit": "^3.31.3",
+    "@vercel/blob": "^2.8.0",
+    "better-auth": "^1.5.0",
+    "browser-image-compression": "^2.0.2",
+    "drizzle-orm": "^0.45.2",
+    "echarts": "^6.1.0",
+    "framer-motion": "^13.2.0",
+    "leaflet": "^1.9.4",
+    "nodemailer": "^10.0.9",
+    "react-easy-crop": "^6.2.3",
+    "react-leaflet": "^5.0.0",
+    "zod": "^4.0.0"
+  },
+  "peerDependencies": {
+    "next": "^16.2.6",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "devDependencies": {
+    "@types/leaflet": "^1.9.22",
+    "@types/node": "^22.15.0",
+    "@types/nodemailer": "^8.0.1",
+    "@types/react": "^19.1.0",
+    "@types/react-dom": "^19.1.0",
+    "drizzle-kit": "^0.31.0",
+    "typescript": "^5.8.0"
+  }
+}

package/src/admin/AiSettingsEditor.tsx

@@ -0,0 +1,48 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { EditorHeader } from './EditorHeader'
+import { EditorSkeleton } from './EditorSkeleton'
+import { TextField } from './Field'
+import { CmsSidebar } from './CmsSidebar'
+import { aiProviderLabels, aiProviders, type AiProvider } from '../ai-types'
+import { Button } from './Button'
+
+type AiAvailability = Record<AiProvider, boolean>
+const emptyKeys = (): Record<AiProvider, string> => ({ manus: '', deepseek: '', openai: '', anthropic: '' })
+
+export function AiSettingsEditor({ userName, canManageAi }: { userName: string; canManageAi: boolean }) {
+  const [aiAvailability, setAiAvailability] = useState<AiAvailability>({ manus: false, deepseek: false, openai: false, anthropic: false })
+  const [aiKeys, setAiKeys] = useState<Record<AiProvider, string>>(emptyKeys)
+  const [pendingClear, setPendingClear] = useState<AiProvider[]>([])
+  const [aiStatus, setAiStatus] = useState('Loading AI settings…')
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => { fetch('/api/admin/ai/settings').then(async (response) => { if (!response.ok) throw new Error(); return response.json() }).then((data) => { setAiAvailability(data.providers); setAiStatus('Keys are encrypted at rest.') }).catch(() => setAiStatus('Could not load AI settings')).finally(() => setLoading(false)) }, [])
+
+  async function save() {
+    if (!canManageAi) return
+    const keys = Object.fromEntries(aiProviders.map((provider) => [provider, aiKeys[provider].trim()]).filter(([, key]) => key)) as Partial<Record<AiProvider, string>>
+    if (!Object.keys(keys).length && !pendingClear.length) return
+    setAiStatus('Saving encrypted keys…')
+    try {
+      const response = await fetch('/api/admin/ai/settings', { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ keys, clear: pendingClear }) })
+      const data = await response.json()
+      if (!response.ok) throw new Error(data.error)
+      setAiAvailability(data.providers)
+      setAiKeys(emptyKeys())
+      setPendingClear([])
+      setAiStatus('Encrypted key settings saved.')
+    } catch (error) { setAiStatus(error instanceof Error ? error.message : 'Could not save AI settings') }
+  }
+
+  return <main className="cms-dashboard"><CmsSidebar active="settings" userName={userName} /><section className="cms-content">
+    <EditorHeader compact title="AI writing" backHref="/admin/dashboard" backLabel="Dashboard" />
+    {loading ? <EditorSkeleton sections={1} /> : <div className="cms-editor-layout"><div className="cms-editor-form">
+      <section className="cms-section">
+        <div className="cms-section-heading"><p className="section-label">AI writing</p><p>Keys are encrypted before being stored. Keys are never shown again or sent to the browser.</p></div>
+        {canManageAi ? <><div className="cms-ai-provider-grid">{aiProviders.map((provider) => { const removing = pendingClear.includes(provider); const configured = aiAvailability[provider] && !removing; return <div className={`cms-ai-provider ${configured ? 'is-configured' : ''}`} key={provider}><div><strong>{aiProviderLabels[provider]}</strong><span className={configured ? 'is-configured' : ''}>{removing ? 'Will be removed on save' : configured ? 'Key configured' : 'Not configured'}</span></div><TextField label={`${aiProviderLabels[provider]} API key`} type="password" autoComplete="new-password" value={aiKeys[provider]} onChange={(event) => { const value = event.target.value; setAiKeys((current) => ({ ...current, [provider]: value })); if (value) setPendingClear((items) => items.filter((item) => item !== provider)) }} placeholder={aiAvailability[provider] ? 'Paste a new key to replace' : 'Paste API key'} /><div className="cms-ai-provider-actions">{aiAvailability[provider] && (removing ? <Button variant="secondary" compact onClick={() => setPendingClear((items) => items.filter((item) => item !== provider))}>Keep key</Button> : <Button variant="negative" compact onClick={() => { setPendingClear((items) => [...items, provider]); setAiStatus('Removal will apply when you save settings.') }}>Remove key</Button>)}</div></div> })}</div><p className="cms-ai-status">{aiStatus}</p></> : <p className="cms-ai-status">Only administrators can manage API keys. Configured providers remain available to editors in the richtext assistant.</p>}
+      </section>
+    </div>{canManageAi && <aside className="cms-editor-sidebar"><p>{aiStatus}</p><Button variant="primary" type="button" onClick={() => void save()} icon="↗">Save AI settings</Button></aside>}</div>}
+  </section></main>
+}

package/src/admin/AiWritingAssistant.tsx

@@ -0,0 +1,159 @@
+'use client'
+
+import { useCallback, useEffect, useRef, useState } from 'react'
+import type { Editor } from '@tiptap/core'
+import { aiProviderLabels, aiProviders, type AiAction, type AiProvider } from '../ai-types'
+import { Portal } from './Portal'
+
+type Availability = Record<AiProvider, boolean>
+type AiRange = { from: number; to: number }
+type Anchor = { left: number; top: number }
+type Session = { action: AiAction; prompt: string; range: AiRange; selection: string; documentText: string; anchor: Anchor }
+type Props = { editor: Editor | null; open: boolean; onClose: () => void }
+
+const initialAvailability: Availability = { manus: false, deepseek: false, openai: false, anthropic: false }
+
+function AiIcon() {
+  return <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2.8 13.7 9l6.2 1.7-6.2 1.7-1.7 6.2-1.7-6.2-6.2-1.7L10.3 9 12 2.8Zm6.6 12.3.7 2.5 2.5.7-2.5.7-.7 2.5-.7-2.5-2.5-.7 2.5-.7.7-2.5Z" /></svg>
+}
+
+function buttonMouseDown(event: React.MouseEvent<HTMLButtonElement>) { event.preventDefault() }
+
+export function AiWritingAssistant({ editor, open, onClose }: Props) {
+  const [availability, setAvailability] = useState<Availability>(initialAvailability)
+  const [provider, setProvider] = useState<AiProvider>('manus')
+  const [selection, setSelection] = useState<Session | null>(null)
+  const [session, setSession] = useState<Session | null>(null)
+  const [prompt, setPrompt] = useState('')
+  const [result, setResult] = useState('')
+  const [status, setStatus] = useState('')
+  const [loading, setLoading] = useState(false)
+  const timer = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const wasOpen = useRef(false)
+
+  const capture = useCallback((): Omit<Session, 'action' | 'prompt'> | null => {
+    if (!editor) return null
+    const { from, to, empty } = editor.state.selection
+    const start = editor.view.coordsAtPos(from)
+    const end = editor.view.coordsAtPos(to)
+    const selectedText = empty ? '' : editor.state.doc.textBetween(from, to, '\n')
+    const isSelection = Boolean(selectedText.trim())
+    const top = isSelection && start.top > 64 ? start.top - 48 : end.bottom + 10
+    return {
+      range: { from, to }, selection: isSelection ? selectedText : '', documentText: editor.getText().slice(0, 16_000),
+      anchor: { left: Math.max(12, Math.min(start.left, window.innerWidth - 372)), top: Math.max(12, top) },
+    }
+  }, [editor])
+
+  useEffect(() => {
+    let cancelled = false
+    fetch('/api/admin/ai/settings').then(async (response) => {
+      const data = await response.json()
+      if (!response.ok) throw new Error(data.error)
+      return data
+    }).then((data) => {
+      if (cancelled) return
+      setAvailability(data.providers)
+      const first = aiProviders.find((item) => data.providers[item]) || 'manus'
+      setProvider((current) => data.providers[current] ? current : first)
+    }).catch(() => { if (!cancelled) setStatus('Could not load AI providers.') })
+    return () => { cancelled = true }
+  }, [])
+
+  useEffect(() => () => { if (timer.current) clearTimeout(timer.current) }, [])
+
+  useEffect(() => {
+    if (!editor) return
+    const updateSelection = () => {
+      if (session) return
+      const snapshot = capture()
+      if (!snapshot?.selection) { setSelection(null); return }
+      setSelection({ ...snapshot, action: 'improve', prompt: '' })
+    }
+    editor.on('selectionUpdate', updateSelection)
+    editor.on('focus', updateSelection)
+    window.addEventListener('resize', updateSelection)
+    window.addEventListener('scroll', updateSelection, true)
+    updateSelection()
+    return () => {
+      editor.off('selectionUpdate', updateSelection)
+      editor.off('focus', updateSelection)
+      window.removeEventListener('resize', updateSelection)
+      window.removeEventListener('scroll', updateSelection, true)
+    }
+  }, [capture, editor, session])
+
+  const dismiss = useCallback(() => {
+    if (timer.current) clearTimeout(timer.current)
+    setSession(null); setSelection(null); setPrompt(''); setResult(''); setStatus(''); setLoading(false)
+    onClose()
+  }, [onClose])
+
+  const poll = useCallback(async (taskId: string) => {
+    try {
+      const response = await fetch(`/api/admin/ai/write?taskId=${encodeURIComponent(taskId)}`)
+      const data = await response.json()
+      if (!response.ok) throw new Error(data.error)
+      if (data.state === 'pending') { setStatus('Manus is writing…'); timer.current = setTimeout(() => void poll(taskId), 2500); return }
+      if (data.state === 'error') throw new Error(data.error)
+      setResult(data.text); setStatus('Review the draft before applying it.'); setLoading(false)
+    } catch (error) { setStatus(error instanceof Error ? error.message : 'Could not retrieve the Manus result.'); setLoading(false) }
+  }, [])
+
+  const run = useCallback(async (next: Session) => {
+    if (!availability[provider]) { setStatus(`Add a ${aiProviderLabels[provider]} API key in Settings first.`); return }
+    if (next.action === 'prompt' && !next.prompt.trim()) { setStatus('Write an instruction first.'); return }
+    setLoading(true); setResult(''); setStatus(provider === 'manus' ? 'Starting Manus task…' : 'AI is writing…')
+    try {
+      const response = await fetch('/api/admin/ai/write', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ provider, action: next.action, prompt: next.prompt, selection: next.selection, documentText: next.documentText }) })
+      const data = await response.json()
+      if (!response.ok) throw new Error(data.error)
+      if (data.state === 'pending') { await poll(data.taskId); return }
+      if (data.state === 'error') throw new Error(data.error)
+      setResult(data.text); setStatus('Review the draft before applying it.'); setLoading(false)
+    } catch (error) { setStatus(error instanceof Error ? error.message : 'AI writing failed.'); setLoading(false) }
+  }, [availability, poll, provider])
+
+  const begin = useCallback((action: AiAction, preset = '') => {
+    const snapshot = capture()
+    if (!snapshot) return
+    const next: Session = { ...snapshot, action, prompt: preset }
+    setSelection(null); setSession(next); setPrompt(preset); setResult(''); setStatus('')
+    if (action !== 'prompt' || preset) void run(next)
+  }, [capture, run])
+
+  useEffect(() => {
+    if (open && !wasOpen.current) begin('prompt')
+    wasOpen.current = open
+  }, [begin, open])
+
+  function apply() {
+    if (!editor || !session || !result.trim()) return
+    if (session.selection && editor.state.doc.textBetween(session.range.from, session.range.to, '\n') !== session.selection) { setStatus('The selected content changed. Run AI again before applying this draft.'); return }
+    const nodes = result.trim().split(/\n{2,}/).filter(Boolean).map((paragraph) => ({ type: 'paragraph', content: [{ type: 'text', text: paragraph.replace(/\n/g, ' ') }] }))
+    editor.chain().focus().insertContentAt(session.range, nodes).run()
+    dismiss()
+  }
+
+  const configured = aiProviders.some((item) => availability[item])
+  const quickActions = selection && !session && !loading && !result
+  const panel = session && (open || loading || result || status || session.action === 'prompt')
+  if (!quickActions && !panel) return null
+
+  return <Portal>
+    {quickActions && <div className="cms-ai-inline-tools" style={{ left: selection.anchor.left, top: selection.anchor.top }} role="toolbar" aria-label="AI selection actions">
+      <button type="button" onMouseDown={buttonMouseDown} onClick={() => begin('prompt')}><AiIcon />AI</button>
+      <button type="button" onMouseDown={buttonMouseDown} onClick={() => begin('improve')}>Improve</button>
+      <button type="button" onMouseDown={buttonMouseDown} onClick={() => begin('prompt', 'Make this selected text shorter and more concise. Return only the replacement text.')}>Shorten</button>
+      <button type="button" onMouseDown={buttonMouseDown} onClick={() => begin('summarize')}>Summarize</button>
+    </div>}
+    {panel && <section className="cms-ai-inline-panel" style={{ left: session.anchor.left, top: session.anchor.top }} aria-label="AI writing assistant">
+      <header><span><AiIcon />AI</span><label>Provider<select value={provider} onChange={(event) => setProvider(event.target.value as AiProvider)}>{aiProviders.map((item) => <option value={item} key={item} disabled={!availability[item]}>{aiProviderLabels[item]}{availability[item] ? '' : ' — not configured'}</option>)}</select></label><button type="button" className="cms-ai-inline-close" onClick={dismiss} aria-label="Close AI">×</button></header>
+      {!configured && <p className="cms-ai-inline-status">No AI key is configured yet. Add one in Settings.</p>}
+      {!result && !loading && session.action === 'prompt' && <><div className="cms-ai-inline-actions">{session.selection ? <><button type="button" onClick={() => begin('improve')}>Improve</button><button type="button" onClick={() => begin('prompt', 'Make this selected text shorter and more concise. Return only the replacement text.')}>Shorten</button><button type="button" onClick={() => begin('summarize')}>Summarize</button></> : <button type="button" onClick={() => begin('continue')}>Continue writing</button>}</div><textarea autoFocus value={prompt} onChange={(event) => setPrompt(event.target.value)} onKeyDown={(event) => { if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') { event.preventDefault(); const next = { ...session, prompt }; setSession(next); void run(next) } }} placeholder={session.selection ? 'Tell AI how to edit the selection…' : 'Tell AI what to write at this cursor…'} maxLength={4000} /></>}
+      {result && <textarea className="cms-ai-inline-result" value={result} onChange={(event) => setResult(event.target.value)} aria-label="AI draft" />}
+      {status && <p className="cms-ai-inline-status">{status}</p>}
+      <footer>{result ? <><button type="button" onClick={dismiss}>Discard</button><button type="button" onClick={() => void run(session)}>Retry</button><button type="button" className="accept" onClick={apply}>Accept <span>↗</span></button></> : <button type="button" className="accept" disabled={!configured || loading} onClick={() => { const next = { ...session, prompt }; setSession(next); void run(next) }}>{loading ? 'Writing…' : session.action === 'prompt' ? 'Generate' : 'Working…'} <span>↗</span></button>}</footer>
+    </section>}
+  </Portal>
+}

package/src/admin/ApiTokensEditor.tsx

@@ -0,0 +1,69 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { EditorHeader } from './EditorHeader'
+import { TextField } from './Field'
+import { CmsSidebar } from './CmsSidebar'
+import { useToast } from './Toast'
+import { formatDateTime } from '../format'
+import { ListingSkeleton } from './ListingView'
+import { Button } from './Button'
+
+type TokenRow = { id: string; name: string; tokenPrefix: string; lastUsedAt: string | null; createdAt: string }
+
+export function ApiTokensEditor({ userName }: { userName: string }) {
+  const toast = useToast()
+  const [tokens, setTokens] = useState<TokenRow[]>([])
+  const [loading, setLoading] = useState(true)
+  const [name, setName] = useState('')
+  const [creating, setCreating] = useState(false)
+  const [newToken, setNewToken] = useState<string | null>(null)
+
+  function load() { setLoading(true); fetch('/api/admin/api-tokens').then((response) => response.ok ? response.json() : []).then(setTokens).finally(() => setLoading(false)) }
+  useEffect(() => { load() }, [])
+
+  async function create() {
+    if (!name.trim()) { toast.error('Give the token a name.'); return }
+    setCreating(true)
+    try {
+      const response = await fetch('/api/admin/api-tokens', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ name }) })
+      const data = await response.json()
+      if (!response.ok) throw new Error(data.error)
+      setNewToken(data.token)
+      setName('')
+      load()
+    } catch (error) { toast.error(error instanceof Error ? error.message : 'Could not create token') } finally { setCreating(false) }
+  }
+
+  async function revoke(token: TokenRow) {
+    if (!confirm(`Revoke token "${token.name}"? Anything using it will stop working immediately.`)) return
+    const response = await fetch(`/api/admin/api-tokens/${token.id}`, { method: 'DELETE' })
+    if (response.ok) { toast.success('Token revoked.'); load() } else toast.error('Could not revoke token.')
+  }
+
+  return <main className="cms-dashboard"><CmsSidebar active="settings" userName={userName} /><section className="cms-content">
+    <EditorHeader compact title="API tokens" backHref="/admin/dashboard" backLabel="Dashboard" />
+    <div className="cms-editor-layout"><div className="cms-editor-form">
+      <section className="cms-section">
+        <div className="cms-section-heading"><p className="section-label">Public content API</p><p>Read-only access to published Services, Projects, and Blog posts at <code>/api/v1/…</code>, authenticated with <code>Authorization: Bearer &lt;token&gt;</code>.</p></div>
+        {newToken && <div className="cms-ai-note" role="status"><strong>{newToken}</strong><p>Copy this now — it won&rsquo;t be shown again.</p><Button variant="ghost" compact onClick={() => setNewToken(null)}>Dismiss</Button></div>}
+        <div className="cms-two-columns">
+          <TextField label="Token name" value={name} onChange={(event) => setName(event.target.value)} placeholder="e.g. Marketing site" />
+        </div>
+        <Button variant="positive" type="button" disabled={creating} onClick={() => void create()} icon="↗">{creating ? 'Creating…' : 'Create token'}</Button>
+      </section>
+      <section className="cms-section">
+        <div className="cms-section-heading"><p className="section-label">Existing tokens</p></div>
+        {loading ? <ListingSkeleton view="table" columnCount={5} /> : <div className="cms-table-wrap"><table className="cms-table"><thead><tr><th>Name</th><th>Token</th><th>Last used</th><th>Created</th><th /></tr></thead><tbody>
+          {tokens.map((token) => <tr key={token.id}>
+            <td><strong>{token.name}</strong></td>
+            <td><span className="cms-table-id">{token.tokenPrefix}…</span></td>
+            <td>{token.lastUsedAt ? formatDateTime(token.lastUsedAt) : 'Never'}</td>
+            <td>{formatDateTime(token.createdAt)}</td>
+            <td><Button variant="negative" compact type="button" onClick={() => void revoke(token)}>Revoke</Button></td>
+          </tr>)}
+        </tbody></table>{!tokens.length && <p className="cms-empty-state">No API tokens yet.</p>}</div>}
+      </section>
+    </div></div>
+  </section></main>
+}