init: nexova - notes crud + sqlite + hf backup

.dockerignore

@@ -0,0 +1,4 @@
+node_modules
+.next
+data
+*.db

.gitignore

@@ -0,0 +1,4 @@
+node_modules
+.next
+data
+*.db

AGENTS.md

@@ -0,0 +1,5 @@
+<!-- BEGIN:nextjs-agent-rules -->
+# This is NOT the Next.js you know
+
+This version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in `node_modules/next/dist/docs/` before writing any code. Heed deprecation notices.
+<!-- END:nextjs-agent-rules -->

CLAUDE.md

@@ -0,0 +1 @@
+@AGENTS.md

Dockerfile

@@ -0,0 +1,34 @@
+FROM node:20-alpine AS base
+
+FROM base AS deps
+WORKDIR /app
+COPY package.json package-lock.json ./
+RUN npm ci --omit=dev
+
+FROM base AS build
+WORKDIR /app
+COPY package.json package-lock.json ./
+RUN npm ci
+COPY . .
+RUN npm run build
+
+FROM base AS runner
+WORKDIR /app
+ENV NODE_ENV=production
+ENV PORT=7860
+ENV HOSTNAME=0.0.0.0
+
+RUN addgroup -g 1001 -S app && adduser -S app -u 1001
+RUN mkdir -p /app/data && chown -R app:app /app
+
+COPY --from=deps /app/node_modules ./node_modules
+COPY --from=build /app/.next/standalone ./
+COPY --from=build /app/.next/static ./.next/static
+COPY --from=build /app/public ./public
+COPY scripts ./scripts
+RUN chmod +x scripts/*.sh
+
+USER app
+EXPOSE 7860
+
+CMD ["bash", "scripts/start.sh"]

README.md

@@ -0,0 +1,9 @@
+---
+title: Nexova
+emoji: ◆
+colorFrom: green
+colorTo: blue
+sdk: docker
+app_port: 7860
+pinned: false
+---

eslint.config.mjs

@@ -0,0 +1,18 @@
+import { defineConfig, globalIgnores } from "eslint/config";
+import nextVitals from "eslint-config-next/core-web-vitals";
+import nextTs from "eslint-config-next/typescript";
+
+const eslintConfig = defineConfig([
+  ...nextVitals,
+  ...nextTs,
+  // Override default ignores of eslint-config-next.
+  globalIgnores([
+    // Default ignores of eslint-config-next:
+    ".next/**",
+    "out/**",
+    "build/**",
+    "next-env.d.ts",
+  ]),
+]);
+
+export default eslintConfig;

next-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+import "./.next/types/routes.d.ts";
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

next.config.ts

@@ -0,0 +1,8 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  output: "standalone",
+  serverExternalPackages: ["sql.js"],
+};
+
+export default nextConfig;

package.json

@@ -0,0 +1,28 @@
+{
+  "name": "nexova",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "eslint"
+  },
+  "dependencies": {
+    "next": "16.2.6",
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
+    "sql.js": "^1.14.1",
+    "uuid": "^14.0.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "16.2.6",
+    "tailwindcss": "^4",
+    "typescript": "^5"
+  }
+}

postcss.config.mjs

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

scripts/backup.sh

@@ -0,0 +1,28 @@
+#!/bin/bash
+set -e
+
+REPO="${HF_DATASET:-jay-hank/Nexova-storage}"
+TOKEN="${HF_TOKEN}"
+DB_DIR="./data"
+DB_FILE="nexova.db"
+INTERVAL="${BACKUP_INTERVAL:-1800}"
+
+if [ -z "$TOKEN" ]; then
+  echo "[backup] HF_TOKEN not set, disabled"
+  exit 0
+fi
+
+echo "[backup] loop every ${INTERVAL}s → $REPO"
+
+while true; do
+  sleep "$INTERVAL"
+  if [ -f "$DB_DIR/$DB_FILE" ]; then
+    SIZE=$(stat -c%s "$DB_DIR/$DB_FILE" 2>/dev/null || echo 0)
+    echo "[backup] uploading $DB_FILE ($SIZE bytes)..."
+    curl -s -X POST "https://huggingface.co/api/datasets/$REPO/upload/main" \
+      -H "Authorization: Bearer $TOKEN" \
+      -F "file=@$DB_DIR/$DB_FILE;filename=$DB_FILE" \
+      -o /dev/null -w "HTTP %{http_code}\n"
+    echo "[backup] done at $(date -u +%FT%TZ)"
+  fi
+done

scripts/restore.sh

@@ -0,0 +1,27 @@
+#!/bin/bash
+set -e
+
+REPO="${HF_DATASET:-jay-hank/Nexova-storage}"
+TOKEN="${HF_TOKEN}"
+DB_DIR="./data"
+DB_FILE="nexova.db"
+
+mkdir -p "$DB_DIR"
+
+if [ -z "$TOKEN" ]; then
+  echo "[restore] HF_TOKEN not set, skip"
+  exit 0
+fi
+
+echo "[restore] downloading $DB_FILE from $REPO..."
+STATUS=$(curl -s -o "$DB_DIR/$DB_FILE" -w "%{http_code}" \
+  "https://huggingface.co/api/datasets/$REPO/raw/$DB_FILE" \
+  -H "Authorization: Bearer $TOKEN")
+
+if [ "$STATUS" = "200" ]; then
+  SIZE=$(stat -c%s "$DB_DIR/$DB_FILE" 2>/dev/null || echo 0)
+  echo "[restore] done ($SIZE bytes)"
+else
+  echo "[restore] no backup found (HTTP $STATUS), starting fresh"
+  rm -f "$DB_DIR/$DB_FILE"
+fi

scripts/start.sh

@@ -0,0 +1,12 @@
+#!/bin/bash
+set -e
+
+echo "=== Nexova Start ==="
+
+bash ./scripts/restore.sh
+
+echo "[start] launching backup daemon..."
+bash ./scripts/backup.sh &
+
+echo "[start] starting Next.js..."
+exec node server.js

src/app/api/backup/route.ts

@@ -0,0 +1,40 @@
+import { DB_PATH, DB_DIR } from "@/lib/db";
+import { existsSync, readdirSync, statSync } from "fs";
+import { join } from "path";
+import { execSync } from "child_process";
+
+export async function POST(req: Request) {
+  const { action } = await req.json().catch(() => ({ action: "backup" }));
+
+  if (action === "info") {
+    const files = existsSync(DB_DIR)
+      ? readdirSync(DB_DIR).map((f) => {
+          const s = statSync(join(DB_DIR, f));
+          return { name: f, size: `${(s.size / 1024).toFixed(1)}KB`, modified: s.mtime.toISOString() };
+        })
+      : [];
+    return Response.json({ ok: true, data: { dir: DB_DIR, files } });
+  }
+
+  if (action === "backup") {
+    if (!existsSync(DB_PATH)) {
+      return Response.json({ ok: false, error: "no database file" }, { status: 400 });
+    }
+    try {
+      const token = process.env.HF_TOKEN;
+      const repo = process.env.HF_DATASET ?? "jay-hank/Nexova-storage";
+      if (!token) return Response.json({ ok: false, error: "HF_TOKEN not set" }, { status: 500 });
+
+      const cmd = `curl -s -X PUT "https://huggingface.co/api/datasets/${repo}/upload" `
+        + `-H "Authorization: Bearer ${token}" `
+        + `-F "file=@${DB_PATH};filename=nexova.db"`;
+      const out = execSync(cmd, { timeout: 30000 }).toString();
+      return Response.json({ ok: true, message: "backup done", detail: out });
+    } catch (e: unknown) {
+      const msg = e instanceof Error ? e.message : String(e);
+      return Response.json({ ok: false, error: msg }, { status: 500 });
+    }
+  }
+
+  return Response.json({ ok: false, error: `unknown action: ${action}` }, { status: 400 });
+}

src/app/api/health/route.ts

@@ -0,0 +1,18 @@
+import { existsSync, statSync } from "fs";
+import { DB_PATH } from "@/lib/db";
+
+export async function GET() {
+  const dbExists = existsSync(DB_PATH);
+  const dbSize = dbExists ? statSync(DB_PATH).size : 0;
+  return Response.json({
+    ok: true,
+    data: {
+      status: "running",
+      db: dbExists ? "connected" : "missing",
+      dbSize: `${(dbSize / 1024).toFixed(1)}KB`,
+      uptime: process.uptime().toFixed(0) + "s",
+      memory: `${(process.memoryUsage.rss() / 1024 / 1024).toFixed(1)}MB`,
+      timestamp: new Date().toISOString(),
+    },
+  });
+}

src/app/api/notes/[id]/route.ts

@@ -0,0 +1,24 @@
+import { getNote, updateNote, deleteNote } from "@/lib/notes";
+import { NextRequest } from "next/server";
+
+export async function GET(_req: NextRequest, ctx: RouteContext<"/api/notes/[id]">) {
+  const { id } = await ctx.params;
+  const note = await getNote(id);
+  if (!note) return Response.json({ ok: false, error: "not found" }, { status: 404 });
+  return Response.json({ ok: true, data: note });
+}
+
+export async function PUT(req: NextRequest, ctx: RouteContext<"/api/notes/[id]">) {
+  const { id } = await ctx.params;
+  const body = await req.json();
+  const note = await updateNote(id, body);
+  if (!note) return Response.json({ ok: false, error: "not found" }, { status: 404 });
+  return Response.json({ ok: true, data: note });
+}
+
+export async function DELETE(_req: NextRequest, ctx: RouteContext<"/api/notes/[id]">) {
+  const { id } = await ctx.params;
+  const ok = await deleteNote(id);
+  if (!ok) return Response.json({ ok: false, error: "not found" }, { status: 404 });
+  return Response.json({ ok: true });
+}

src/app/api/notes/route.ts

@@ -0,0 +1,17 @@
+import { listNotes, createNote } from "@/lib/notes";
+import { NextRequest } from "next/server";
+
+export async function GET(req: NextRequest) {
+  const q = req.nextUrl.searchParams.get("q") ?? undefined;
+  const notes = await listNotes(q);
+  return Response.json({ ok: true, data: notes, count: notes.length });
+}
+
+export async function POST(req: NextRequest) {
+  const body = await req.json();
+  if (!body.title?.trim()) {
+    return Response.json({ ok: false, error: "title required" }, { status: 400 });
+  }
+  const note = await createNote(body);
+  return Response.json({ ok: true, data: note }, { status: 201 });
+}

src/app/api/stats/route.ts

@@ -0,0 +1,6 @@
+import { getStats } from "@/lib/notes";
+
+export async function GET() {
+  const stats = await getStats();
+  return Response.json({ ok: true, data: stats });
+}

src/app/globals.css

@@ -0,0 +1,10 @@
+@import "tailwindcss";
+
+:root {
+  --font-main: "Geist", sans-serif;
+}
+
+* {
+  scrollbar-width: thin;
+  scrollbar-color: #3f3f46 transparent;
+}

src/app/layout.tsx

@@ -0,0 +1,20 @@
+import type { Metadata } from "next";
+import { Geist } from "next/font/google";
+import "./globals.css";
+
+const font = Geist({ subsets: ["latin"], variable: "--font-main" });
+
+export const metadata: Metadata = {
+  title: "Nexova",
+  description: "Next.js + SQLite on HF Space",
+};
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en" className="dark">
+      <body className={`${font.variable} font-sans antialiased bg-zinc-950 text-zinc-100 min-h-screen`}>
+        {children}
+      </body>
+    </html>
+  );
+}

src/app/page.tsx

@@ -0,0 +1,134 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import NoteCard from "@/components/NoteCard";
+import NoteForm from "@/components/NoteForm";
+import StatsBar from "@/components/StatsBar";
+import DbInfo from "@/components/DbInfo";
+
+type Note = {
+  id: string;
+  title: string;
+  content: string;
+  color: string;
+  pinned: number;
+  created_at: string;
+  updated_at: string;
+};
+
+export default function Home() {
+  const [notes, setNotes] = useState<Note[]>([]);
+  const [search, setSearch] = useState("");
+  const [editing, setEditing] = useState<Note | null>(null);
+  const [showForm, setShowForm] = useState(false);
+  const [tab, setTab] = useState<"notes" | "db">("notes");
+
+  const load = useCallback(async () => {
+    const q = search ? `?q=${encodeURIComponent(search)}` : "";
+    const res = await fetch(`/api/notes${q}`);
+    const json = await res.json();
+    if (json.ok) setNotes(json.data);
+  }, [search]);
+
+  useEffect(() => {
+    load();
+  }, [load]);
+
+  const onSave = async (data: { title: string; content: string; color: string; pinned: boolean }) => {
+    const url = editing ? `/api/notes/${editing.id}` : "/api/notes";
+    const method = editing ? "PUT" : "POST";
+    await fetch(url, { method, headers: { "Content-Type": "application/json" }, body: JSON.stringify(data) });
+    setEditing(null);
+    setShowForm(false);
+    load();
+  };
+
+  const onDelete = async (id: string) => {
+    await fetch(`/api/notes/${id}`, { method: "DELETE" });
+    load();
+  };
+
+  const onPin = async (note: Note) => {
+    await fetch(`/api/notes/${note.id}`, {
+      method: "PUT",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ pinned: !note.pinned }),
+    });
+    load();
+  };
+
+  return (
+    <main className="max-w-5xl mx-auto px-4 py-8">
+      <header className="flex items-center justify-between mb-6">
+        <h1 className="text-3xl font-bold tracking-tight">
+          <span className="text-emerald-400">◆</span> Nexova
+        </h1>
+        <div className="flex gap-2">
+          <button
+            onClick={() => setTab("notes")}
+            className={`px-3 py-1.5 rounded-lg text-sm font-medium transition ${tab === "notes" ? "bg-emerald-600 text-white" : "bg-zinc-800 text-zinc-400 hover:text-white"}`}
+          >
+            Notes
+          </button>
+          <button
+            onClick={() => setTab("db")}
+            className={`px-3 py-1.5 rounded-lg text-sm font-medium transition ${tab === "db" ? "bg-emerald-600 text-white" : "bg-zinc-800 text-zinc-400 hover:text-white"}`}
+          >
+            Database
+          </button>
+        </div>
+      </header>
+
+      {tab === "notes" ? (
+        <>
+          <StatsBar />
+
+          <div className="flex gap-3 mb-6">
+            <input
+              type="text"
+              placeholder="Search notes..."
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              className="flex-1 bg-zinc-900 border border-zinc-800 rounded-lg px-4 py-2.5 text-sm focus:outline-none focus:border-emerald-500 transition"
+            />
+            <button
+              onClick={() => { setEditing(null); setShowForm(true); }}
+              className="bg-emerald-600 hover:bg-emerald-500 px-4 py-2.5 rounded-lg text-sm font-medium transition"
+            >
+              + New
+            </button>
+          </div>
+
+          {showForm && (
+            <NoteForm
+              initial={editing}
+              onSave={onSave}
+              onCancel={() => { setShowForm(false); setEditing(null); }}
+            />
+          )}
+
+          {notes.length === 0 ? (
+            <div className="text-center py-20 text-zinc-500">
+              <p className="text-4xl mb-3">📝</p>
+              <p>No notes yet. Create one!</p>
+            </div>
+          ) : (
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+              {notes.map((n) => (
+                <NoteCard
+                  key={n.id}
+                  note={n}
+                  onEdit={() => { setEditing(n); setShowForm(true); }}
+                  onDelete={() => onDelete(n.id)}
+                  onPin={() => onPin(n)}
+                />
+              ))}
+            </div>
+          )}
+        </>
+      ) : (
+        <DbInfo />
+      )}
+    </main>
+  );
+}

src/components/DbInfo.tsx

@@ -0,0 +1,87 @@
+"use client";
+
+import { useState, useEffect } from "react";
+
+type Health = { status: string; db: string; dbSize: string; uptime: string; memory: string; timestamp: string };
+type FileInfo = { name: string; size: string; modified: string };
+
+export default function DbInfo() {
+  const [health, setHealth] = useState<Health | null>(null);
+  const [files, setFiles] = useState<FileInfo[]>([]);
+  const [backing, setBacking] = useState(false);
+  const [msg, setMsg] = useState("");
+
+  const loadHealth = () => fetch("/api/health").then((r) => r.json()).then((j) => j.ok && setHealth(j.data));
+  const loadFiles = () =>
+    fetch("/api/backup", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ action: "info" }) })
+      .then((r) => r.json())
+      .then((j) => j.ok && setFiles(j.data.files));
+
+  useEffect(() => { loadHealth(); loadFiles(); }, []);
+
+  const backup = async () => {
+    setBacking(true);
+    setMsg("");
+    const res = await fetch("/api/backup", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ action: "backup" }) });
+    const j = await res.json();
+    setMsg(j.ok ? "✅ Backup success!" : `❌ ${j.error}`);
+    setBacking(false);
+    loadFiles();
+  };
+
+  return (
+    <div className="space-y-6">
+      <section className="bg-zinc-900 border border-zinc-800 rounded-xl p-5">
+        <h2 className="text-lg font-semibold mb-4">🏥 Health</h2>
+        {health ? (
+          <div className="grid grid-cols-2 sm:grid-cols-3 gap-3 text-sm">
+            {Object.entries(health).map(([k, v]) => (
+              <div key={k} className="bg-zinc-800/50 rounded-lg p-3">
+                <div className="text-[10px] text-zinc-500 uppercase tracking-wider">{k}</div>
+                <div className="text-emerald-400 font-mono mt-1">{v}</div>
+              </div>
+            ))}
+          </div>
+        ) : (
+          <p className="text-zinc-500 text-sm">Loading...</p>
+        )}
+      </section>
+
+      <section className="bg-zinc-900 border border-zinc-800 rounded-xl p-5">
+        <div className="flex items-center justify-between mb-4">
+          <h2 className="text-lg font-semibold">💾 Disk Files</h2>
+          <button
+            onClick={backup}
+            disabled={backing}
+            className="px-4 py-1.5 bg-blue-600 hover:bg-blue-500 disabled:opacity-50 rounded-lg text-sm font-medium transition"
+          >
+            {backing ? "Backing up..." : "Backup to HF"}
+          </button>
+        </div>
+        {msg && <p className="text-sm mb-3">{msg}</p>}
+        {files.length === 0 ? (
+          <p className="text-zinc-500 text-sm">No files in data/</p>
+        ) : (
+          <table className="w-full text-sm">
+            <thead>
+              <tr className="text-zinc-500 text-left text-xs">
+                <th className="pb-2">File</th>
+                <th className="pb-2">Size</th>
+                <th className="pb-2">Modified</th>
+              </tr>
+            </thead>
+            <tbody>
+              {files.map((f) => (
+                <tr key={f.name} className="border-t border-zinc-800">
+                  <td className="py-2 font-mono text-emerald-400">{f.name}</td>
+                  <td className="py-2">{f.size}</td>
+                  <td className="py-2 text-zinc-400">{new Date(f.modified).toLocaleString()}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        )}
+      </section>
+    </div>
+  );
+}

src/components/NoteCard.tsx

@@ -0,0 +1,83 @@
+"use client";
+
+type Note = {
+  id: string;
+  title: string;
+  content: string;
+  color: string;
+  pinned: number;
+  created_at: string;
+  updated_at: string;
+};
+
+const COLORS: Record<string, string> = {
+  "#fef08a": "bg-yellow-200/10 border-yellow-500/30",
+  "#86efac": "bg-emerald-200/10 border-emerald-500/30",
+  "#93c5fd": "bg-blue-200/10 border-blue-500/30",
+  "#f9a8d4": "bg-pink-200/10 border-pink-500/30",
+  "#c4b5fd": "bg-violet-200/10 border-violet-500/30",
+};
+
+export default function NoteCard({
+  note,
+  onEdit,
+  onDelete,
+  onPin,
+}: {
+  note: Note;
+  onEdit: () => void;
+  onDelete: () => void;
+  onPin: () => void;
+}) {
+  const cls = COLORS[note.color] ?? "bg-zinc-800/50 border-zinc-700";
+  const ago = timeAgo(note.updated_at);
+
+  return (
+    <div className={`border rounded-xl p-4 ${cls} transition hover:scale-[1.02] group`}>
+      <div className="flex items-start justify-between mb-2">
+        <h3 className="font-semibold text-sm leading-tight flex-1 mr-2">
+          {note.pinned ? "📌 " : ""}{note.title}
+        </h3>
+        <div className="flex gap-1 opacity-0 group-hover:opacity-100 transition">
+          <Btn onClick={onPin} title={note.pinned ? "Unpin" : "Pin"}>
+            {note.pinned ? "◇" : "◆"}
+          </Btn>
+          <Btn onClick={onEdit} title="Edit">✎</Btn>
+          <Btn onClick={onDelete} title="Delete">✕</Btn>
+        </div>
+      </div>
+      {note.content && (
+        <p className="text-xs text-zinc-400 leading-relaxed line-clamp-4 mb-3">{note.content}</p>
+      )}
+      <div className="flex items-center justify-between">
+        <span
+          className="w-3 h-3 rounded-full inline-block"
+          style={{ backgroundColor: note.color }}
+        />
+        <span className="text-[10px] text-zinc-500">{ago}</span>
+      </div>
+    </div>
+  );
+}
+
+function Btn({ onClick, title, children }: { onClick: () => void; title: string; children: React.ReactNode }) {
+  return (
+    <button
+      onClick={onClick}
+      title={title}
+      className="w-6 h-6 flex items-center justify-center rounded text-xs text-zinc-400 hover:text-white hover:bg-zinc-700 transition"
+    >
+      {children}
+    </button>
+  );
+}
+
+function timeAgo(iso: string): string {
+  const diff = Date.now() - new Date(iso).getTime();
+  const mins = Math.floor(diff / 60000);
+  if (mins < 1) return "just now";
+  if (mins < 60) return `${mins}m ago`;
+  const hrs = Math.floor(mins / 60);
+  if (hrs < 24) return `${hrs}h ago`;
+  return `${Math.floor(hrs / 24)}d ago`;
+}

src/components/NoteForm.tsx

@@ -0,0 +1,83 @@
+"use client";
+
+import { useState } from "react";
+
+const PALETTE = ["#fef08a", "#86efac", "#93c5fd", "#f9a8d4", "#c4b5fd"];
+
+type Note = {
+  id: string;
+  title: string;
+  content: string;
+  color: string;
+  pinned: number;
+};
+
+export default function NoteForm({
+  initial,
+  onSave,
+  onCancel,
+}: {
+  initial: Note | null;
+  onSave: (data: { title: string; content: string; color: string; pinned: boolean }) => void;
+  onCancel: () => void;
+}) {
+  const [title, setTitle] = useState(initial?.title ?? "");
+  const [content, setContent] = useState(initial?.content ?? "");
+  const [color, setColor] = useState(initial?.color ?? PALETTE[0]);
+  const [pinned, setPinned] = useState(!!initial?.pinned);
+
+  const submit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!title.trim()) return;
+    onSave({ title: title.trim(), content: content.trim(), color, pinned });
+  };
+
+  return (
+    <form onSubmit={submit} className="bg-zinc-900 border border-zinc-800 rounded-xl p-5 mb-6 space-y-4">
+      <input
+        autoFocus
+        placeholder="Title"
+        value={title}
+        onChange={(e) => setTitle(e.target.value)}
+        className="w-full bg-transparent text-lg font-semibold focus:outline-none placeholder:text-zinc-600"
+      />
+      <textarea
+        placeholder="Write something..."
+        value={content}
+        onChange={(e) => setContent(e.target.value)}
+        rows={4}
+        className="w-full bg-transparent text-sm text-zinc-300 focus:outline-none resize-none placeholder:text-zinc-600"
+      />
+      <div className="flex items-center justify-between">
+        <div className="flex gap-2 items-center">
+          {PALETTE.map((c) => (
+            <button
+              key={c}
+              type="button"
+              onClick={() => setColor(c)}
+              className={`w-6 h-6 rounded-full transition ${color === c ? "ring-2 ring-white scale-110" : "opacity-60 hover:opacity-100"}`}
+              style={{ backgroundColor: c }}
+            />
+          ))}
+          <label className="flex items-center gap-1.5 ml-3 text-xs text-zinc-400 cursor-pointer">
+            <input
+              type="checkbox"
+              checked={pinned}
+              onChange={(e) => setPinned(e.target.checked)}
+              className="accent-emerald-500"
+            />
+            Pin
+          </label>
+        </div>
+        <div className="flex gap-2">
+          <button type="button" onClick={onCancel} className="px-3 py-1.5 text-sm text-zinc-400 hover:text-white transition">
+            Cancel
+          </button>
+          <button type="submit" className="px-4 py-1.5 bg-emerald-600 hover:bg-emerald-500 rounded-lg text-sm font-medium transition">
+            {initial ? "Update" : "Create"}
+          </button>
+        </div>
+      </div>
+    </form>
+  );
+}

src/components/StatsBar.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import { useState, useEffect } from "react";
+
+type Stats = { total: number; pinned: number; latest: string | null; colors: { color: string; count: number }[] };
+
+export default function StatsBar() {
+  const [stats, setStats] = useState<Stats | null>(null);
+
+  useEffect(() => {
+    fetch("/api/stats").then((r) => r.json()).then((j) => j.ok && setStats(j.data));
+  }, []);
+
+  if (!stats) return null;
+
+  return (
+    <div className="flex gap-4 mb-6 text-xs text-zinc-500">
+      <span>📊 {stats.total} notes</span>
+      <span>📌 {stats.pinned} pinned</span>
+      {stats.latest && <span>🕐 Last: {new Date(stats.latest).toLocaleString()}</span>}
+      <div className="flex gap-1 ml-auto">
+        {stats.colors.map((c) => (
+          <span
+            key={String(c.color)}
+            className="w-3 h-3 rounded-full inline-block"
+            style={{ backgroundColor: String(c.color) }}
+            title={`${c.count}`}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}

src/lib/db.ts

@@ -0,0 +1,48 @@
+import initSqlJs from "sql.js";
+import { readFileSync, writeFileSync, existsSync, mkdirSync } from "fs";
+import { join } from "path";
+
+const DB_DIR = join(process.cwd(), "data");
+const DB_PATH = join(DB_DIR, "nexova.db");
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+let db: any = null;
+
+function ensureDir() {
+  if (!existsSync(DB_DIR)) mkdirSync(DB_DIR, { recursive: true });
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+async function getDb(): Promise<any> {
+  if (db) return db;
+
+  const SQL = await initSqlJs();
+  ensureDir();
+
+  db = existsSync(DB_PATH)
+    ? new SQL.Database(readFileSync(DB_PATH))
+    : new SQL.Database();
+
+  db.run(`
+    CREATE TABLE IF NOT EXISTS notes (
+      id TEXT PRIMARY KEY,
+      title TEXT NOT NULL,
+      content TEXT DEFAULT '',
+      color TEXT DEFAULT '#fef08a',
+      pinned INTEGER DEFAULT 0,
+      created_at TEXT DEFAULT (datetime('now')),
+      updated_at TEXT DEFAULT (datetime('now'))
+    )
+  `);
+
+  save();
+  return db;
+}
+
+function save() {
+  if (!db) return;
+  ensureDir();
+  writeFileSync(DB_PATH, Buffer.from(db.export()));
+}
+
+export { getDb, save, DB_PATH, DB_DIR };

src/lib/notes.ts

@@ -0,0 +1,99 @@
+import { getDb, save } from "./db";
+
+export type Note = {
+  id: string;
+  title: string;
+  content: string;
+  color: string;
+  pinned: number;
+  created_at: string;
+  updated_at: string;
+};
+
+type NoteInput = {
+  title: string;
+  content?: string;
+  color?: string;
+  pinned?: boolean;
+};
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function toNote(columns: string[], values: any[]): Note {
+  const obj: Record<string, unknown> = {};
+  columns.forEach((c: string, i: number) => (obj[c] = values[i]));
+  return obj as unknown as Note;
+}
+
+export async function listNotes(q?: string): Promise<Note[]> {
+  const db = await getDb();
+  const sql = q
+    ? `SELECT * FROM notes WHERE title LIKE ? OR content LIKE ? ORDER BY pinned DESC, updated_at DESC`
+    : `SELECT * FROM notes ORDER BY pinned DESC, updated_at DESC`;
+  const params = q ? [`%${q}%`, `%${q}%`] : [];
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const res = db.exec(sql, params) as any[];
+  if (!res.length) return [];
+  return res[0].values.map((v: unknown[]) => toNote(res[0].columns, v));
+}
+
+export async function getNote(id: string): Promise<Note | null> {
+  const db = await getDb();
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const res = db.exec(`SELECT * FROM notes WHERE id = ?`, [id]) as any[];
+  if (!res.length || !res[0].values.length) return null;
+  return toNote(res[0].columns, res[0].values[0]);
+}
+
+export async function createNote(input: NoteInput): Promise<Note> {
+  const db = await getDb();
+  const id = crypto.randomUUID();
+  const now = new Date().toISOString();
+  db.run(
+    `INSERT INTO notes (id, title, content, color, pinned, created_at, updated_at) VALUES (?, ?, ?, ?, ?, ?, ?)`,
+    [id, input.title, input.content ?? "", input.color ?? "#fef08a", input.pinned ? 1 : 0, now, now]
+  );
+  save();
+  return (await getNote(id))!;
+}
+
+export async function updateNote(id: string, input: Partial<NoteInput>): Promise<Note | null> {
+  const existing = await getNote(id);
+  if (!existing) return null;
+  const db = await getDb();
+  const now = new Date().toISOString();
+  db.run(
+    `UPDATE notes SET title=?, content=?, color=?, pinned=?, updated_at=? WHERE id=?`,
+    [
+      input.title ?? existing.title,
+      input.content ?? existing.content,
+      input.color ?? existing.color,
+      input.pinned !== undefined ? (input.pinned ? 1 : 0) : existing.pinned,
+      now,
+      id,
+    ]
+  );
+  save();
+  return getNote(id);
+}
+
+export async function deleteNote(id: string): Promise<boolean> {
+  const existing = await getNote(id);
+  if (!existing) return false;
+  const db = await getDb();
+  db.run(`DELETE FROM notes WHERE id = ?`, [id]);
+  save();
+  return true;
+}
+
+export async function getStats() {
+  const db = await getDb();
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const exec = (sql: string) => db.exec(sql) as any[];
+  const total = exec(`SELECT COUNT(*) FROM notes`)[0]?.values[0][0] ?? 0;
+  const pinned = exec(`SELECT COUNT(*) FROM notes WHERE pinned = 1`)[0]?.values[0][0] ?? 0;
+  const latest = exec(`SELECT updated_at FROM notes ORDER BY updated_at DESC LIMIT 1`)[0]?.values[0]?.[0] ?? null;
+  const cRes = exec(`SELECT color, COUNT(*) as cnt FROM notes GROUP BY color ORDER BY cnt DESC`);
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const colors = cRes.length ? cRes[0].values.map((v: any) => ({ color: v[0], count: v[1] })) : [];
+  return { total, pinned, latest, colors };
+}

src/types/sql.d.ts

@@ -0,0 +1 @@
+declare module "sql.js";

tsconfig.json

@@ -0,0 +1,34 @@
+{
+  "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": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts",
+    "**/*.mts"
+  ],
+  "exclude": ["node_modules"]
+}