@taskmark/ui 0.2.2 → 0.2.5

package/README.md

@@ -12,6 +12,15 @@ npx taskmark serve
 
 Opens [http://localhost:8275](http://localhost:8275) bound to **this** board.
 
+### Development (live board reload)
+
+```bash
+npx taskmark dev
+# or: npm run dev / yarn dev
+```
+
+Runs Next.js in development on port **8275** and refreshes the UI when board `.md` files change.
+
 Without a local install (once published):
 
 ```bash
@@ -49,21 +58,27 @@ You do **not** need to clone `taskmark-frontend`.
   "scripts": {
     "start": "taskmark serve --no-open",
     "serve": "taskmark serve",
-    "build": "taskmark build --board . --out out"
+    "dev": "taskmark dev",
+    "build": "taskmark build --board . --out out",
+    "preview": "taskmark preview"
   },
   "dependencies": {
-    "@taskmark/ui": "^0.2.0"
+    "@taskmark/ui": "^0.2.5"
   }
 }
 ```
 
-Then `npm install && npm run serve` (or `npm start`). For **Vercel**, use `npm run build` (static HTML in `out/`) — see the board-ui-stub `vercel.json`.
+Then `npm install && npm run serve` (or `npm start`). Use `npm run dev` while editing board markdown. For **Vercel**, use `npm run build` (static HTML in `out/`) — see the board-ui-stub `vercel.json`.
 
 ### Static production build
 
 ```bash
 npx taskmark build --board .
 # → <board>/out  (HTML + assets + taskmark-snapshot.json)
+
+npm run preview
+# or: npx taskmark preview
+# serves <board>/out locally (default port 8275)
 ```
 
 Favicon, webmanifest, and Open Graph assets ship in `public/` and are included in both standalone (`taskmark serve`) and static (`taskmark build`) outputs.
@@ -73,14 +88,15 @@ Favicon, webmanifest, and Open Graph assets ship in `public/` and are included i
 ```bash
 npm install
 npm run build    # next standalone + dist/ for the CLI
-npm run serve    # local bin against cwd/env board
-npm run dev      # Next dev server on :3000 (setup wizard unless auto-bound)
+npm run serve    # production standalone against cwd/env board
+npm run dev      # taskmark dev (Next + markdown live reload) on :8275
 ```
 
-Zero-config for `npm run dev`: `TASKMARK_BOARD` / `TASKMARK_MASTER` / cwd (see above). Cookie multi-master setup still works when unbound.
+Zero-config for `npm run dev` / `serve`: `TASKMARK_BOARD` / `TASKMARK_MASTER` / cwd (see above). Cookie multi-master setup still works when unbound.
 
 ## Stack
 
-- Next.js standalone server packaged for `taskmark serve`
+- Next.js production server packaged for `taskmark serve` (`next start` + slim `dist/prod-next`)
+- `taskmark dev` for live board markdown reload
 - Tailwind CSS v4
 - Local markdown boards only (no hosted sync)

package/app/api/taskmark-reload/route.ts

@@ -0,0 +1,103 @@
+import fs from "node:fs"
+import path from "node:path"
+
+import { cwdCandidates } from "@/lib/taskmark/autoconfig"
+import { resolveBoardAtPath } from "@/lib/taskmark/discover"
+
+export const dynamic = "force-dynamic"
+export const runtime = "nodejs"
+
+function resolveBoardRoot(): string | null {
+  const env = process.env.TASKMARK_BOARD?.trim()
+  if (env) {
+    const board = resolveBoardAtPath(path.resolve(env))
+    if (board) return board
+  }
+  for (const candidate of cwdCandidates()) {
+    const board = resolveBoardAtPath(candidate)
+    if (board) return board
+  }
+  return null
+}
+
+function walkMarkdownFiles(root: string, out: string[] = []): string[] {
+  let entries: fs.Dirent[]
+  try {
+    entries = fs.readdirSync(root, { withFileTypes: true })
+  } catch {
+    return out
+  }
+  for (const entry of entries) {
+    if (entry.name === "node_modules" || entry.name === ".git" || entry.name === "out") {
+      continue
+    }
+    const full = path.join(root, entry.name)
+    if (entry.isDirectory()) {
+      walkMarkdownFiles(full, out)
+    } else if (entry.isFile() && entry.name.endsWith(".md")) {
+      out.push(full)
+    }
+  }
+  return out
+}
+
+function latestMarkdownMtime(boardRoot: string): number {
+  let latest = 0
+  for (const file of walkMarkdownFiles(boardRoot)) {
+    try {
+      const mtime = fs.statSync(file).mtimeMs
+      if (mtime > latest) latest = mtime
+    } catch {
+      // ignore transient deletes
+    }
+  }
+  return latest
+}
+
+/**
+ * SSE stream that emits `reload` when any board `.md` mtime changes.
+ * Used only by `taskmark dev` / Next development mode.
+ */
+export async function GET() {
+  if (process.env.NODE_ENV !== "development") {
+    return new Response("Not available", { status: 404 })
+  }
+
+  const boardRoot = resolveBoardRoot()
+  if (!boardRoot) {
+    return new Response("No board", { status: 404 })
+  }
+
+  const encoder = new TextEncoder()
+  let last = latestMarkdownMtime(boardRoot)
+  let interval: ReturnType<typeof setInterval> | null = null
+
+  const stream = new ReadableStream({
+    start(controller) {
+      const send = (event: string, data: string) => {
+        controller.enqueue(encoder.encode(`event: ${event}\ndata: ${data}\n\n`))
+      }
+      send("hello", String(Date.now()))
+      interval = setInterval(() => {
+        const next = latestMarkdownMtime(boardRoot)
+        if (next > last) {
+          last = next
+          send("reload", String(Date.now()))
+        } else {
+          send("ping", String(Date.now()))
+        }
+      }, 750)
+    },
+    cancel() {
+      if (interval) clearInterval(interval)
+    },
+  })
+
+  return new Response(stream, {
+    headers: {
+      "Content-Type": "text/event-stream; charset=utf-8",
+      "Cache-Control": "no-cache, no-transform",
+      Connection: "keep-alive",
+    },
+  })
+}

package/app/board/page.tsx

@@ -23,6 +23,7 @@ import {
   parseListViewMode,
   type ListViewMode,
 } from "@/lib/taskmark/list-view-mode"
+import { DEV_RELOAD_TOKEN } from "@/lib/taskmark/dev-reload-token"
 import { loadSnapshotFromPublic } from "@/lib/taskmark/load-snapshot-server"
 import { parseEpicsForProject } from "@/lib/taskmark/parse-epics"
 import {
@@ -38,6 +39,11 @@ import {
 import { isStaticRuntime } from "@/lib/taskmark/static-mode"
 import { loadWorkspace } from "@/lib/taskmark/workspace"
 
+export const dynamic = "force-dynamic"
+
+// Keep this import so `taskmark dev` can touch the token module and refresh RSC.
+void DEV_RELOAD_TOKEN
+
 type BoardPageProps = {
   searchParams: Promise<{
     view?: string | string[]
@@ -143,7 +149,6 @@ export default async function BoardPage({ searchParams }: BoardPageProps) {
         <AppBar
           projects={workspace.projects}
           activeProjectId={activeProject.id}
-          masterCount={workspace.masters.length}
           autoconfig={workspace.autoconfig}
         />
 
@@ -177,9 +182,6 @@ export default async function BoardPage({ searchParams }: BoardPageProps) {
                     ? ` · story ${selectedStoryId} not in list`
                     : ""}
               </p>
-              <p className="mt-1 font-mono text-xs text-muted-foreground">
-                {activeProject.boardPath}
-              </p>
             </div>
             <ListViewSwitcher
               activeView={activeView}

package/app/globals.css

@@ -1,4 +1,11 @@
-@import "tailwindcss";
+@import "tailwindcss" source(none);
+
+/* Explicit sources only — staged builds live under a board and must not scan board markdown. */
+@source "../app";
+@source "../components";
+@source "../hooks";
+@source "../lib";
+@source "../bin";
 
 @custom-variant dark (&:is(.dark *));
 
@@ -89,6 +96,15 @@
   --shadow-2xl: 20px 20px 0 2px var(--shadow-color);
 }
 
+/* Markdown body: reset outer margins without Tailwind arbitrary :first-child variants
+   (those trigger Lightning CSS optimize warnings when scanned from board docs). */
+.tm-md > :first-child {
+  margin-top: 0;
+}
+.tm-md > :last-child {
+  margin-bottom: 0;
+}
+
 .dark {
   --background: #0f0f0f;
   --foreground: #fafafa;

package/app/layout.tsx

@@ -1,5 +1,6 @@
 import type { Metadata, Viewport } from "next"
 import { Archivo_Black, Space_Grotesk } from "next/font/google"
+import { BoardDevReloader } from "@/components/board/board-dev-reloader"
 import { Toaster } from "@/components/ui/sonner"
 import { SITE } from "@/lib/site"
 import "./globals.css"
@@ -80,6 +81,7 @@ export default function RootLayout({
         className={`${archivoBlack.variable} ${spaceGrotesk.variable} font-sans antialiased`}
       >
         <Toaster />
+        <BoardDevReloader />
         {children}
       </body>
     </html>

package/bin/lib/static-preview.mjs

@@ -0,0 +1,110 @@
+/**
+ * Minimal static file server for Next `output: 'export'` sites (board/out).
+ */
+import fs from "node:fs"
+import http from "node:http"
+import path from "node:path"
+import { fileURLToPath } from "node:url"
+
+const MIME = {
+  ".html": "text/html; charset=utf-8",
+  ".js": "text/javascript; charset=utf-8",
+  ".css": "text/css; charset=utf-8",
+  ".json": "application/json; charset=utf-8",
+  ".svg": "image/svg+xml",
+  ".png": "image/png",
+  ".jpg": "image/jpeg",
+  ".jpeg": "image/jpeg",
+  ".gif": "image/gif",
+  ".webp": "image/webp",
+  ".ico": "image/x-icon",
+  ".woff": "font/woff",
+  ".woff2": "font/woff2",
+  ".txt": "text/plain; charset=utf-8",
+  ".map": "application/json; charset=utf-8",
+  ".webmanifest": "application/manifest+json",
+}
+
+function safeJoin(root, urlPath) {
+  const decoded = decodeURIComponent((urlPath || "/").split("?")[0].split("#")[0])
+  const rel = decoded.replace(/^\/+/, "")
+  const full = path.resolve(root, rel)
+  const rootReal = path.resolve(root)
+  if (full !== rootReal && !full.startsWith(rootReal + path.sep)) {
+    return null
+  }
+  return full
+}
+
+function existingFile(...candidates) {
+  for (const candidate of candidates) {
+    try {
+      if (fs.statSync(candidate).isFile()) return candidate
+    } catch {
+      /* try next */
+    }
+  }
+  return null
+}
+
+function pickFile(root, urlPath) {
+  const base = safeJoin(root, urlPath)
+  if (!base) return { file: null, status: 403 }
+
+  let file = null
+  if (urlPath === "/" || urlPath === "" || urlPath?.startsWith("/?")) {
+    file = existingFile(path.join(root, "index.html"))
+  } else {
+    const candidates = [base]
+    if (!path.extname(base)) {
+      candidates.push(`${base}.html`, path.join(base, "index.html"))
+    }
+    file = existingFile(...candidates)
+  }
+
+  if (file) return { file, status: 200 }
+
+  const notFound = existingFile(path.join(root, "404.html"))
+  if (notFound) return { file: notFound, status: 404 }
+  return { file: null, status: 404 }
+}
+
+/**
+ * @param {{ root: string, port: number, host?: string }} opts
+ * @returns {Promise<import('node:http').Server>}
+ */
+export function startStaticServer({ root, port, host = "0.0.0.0" }) {
+  const server = http.createServer((req, res) => {
+    const { file, status } = pickFile(root, req.url || "/")
+    if (!file) {
+      res.writeHead(status, { "Content-Type": "text/plain; charset=utf-8" })
+      res.end("Not found")
+      return
+    }
+    const ext = path.extname(file).toLowerCase()
+    const type = MIME[ext] || "application/octet-stream"
+    res.writeHead(status, {
+      "Content-Type": type,
+      "Cache-Control":
+        ext === ".html" ? "no-cache" : "public, max-age=31536000, immutable",
+    })
+    fs.createReadStream(file).pipe(res)
+  })
+
+  return new Promise((resolve, reject) => {
+    server.once("error", reject)
+    server.listen(port, host, () => resolve(server))
+  })
+}
+
+if (process.argv[1] && path.resolve(process.argv[1]) === fileURLToPath(import.meta.url)) {
+  const root = process.argv[2]
+  const port = Number(process.argv[3] || 8275)
+  if (!root) {
+    console.error("Usage: static-preview.mjs <root> [port]")
+    process.exit(1)
+  }
+  startStaticServer({ root, port }).then(() => {
+    console.log(`Static preview: http://localhost:${port} → ${root}`)
+  })
+}

package/bin/lib/watch-board-markdown.mjs

@@ -0,0 +1,65 @@
+import fs from "node:fs"
+import path from "node:path"
+
+const IGNORE_DIRS = new Set([
+  "node_modules",
+  ".git",
+  "out",
+  ".next",
+  "dist",
+  ".taskmark-ui-build",
+])
+
+function shouldIgnoreDir(name) {
+  return IGNORE_DIRS.has(name) || name.startsWith(".")
+}
+
+function latestMarkdownMtime(boardRoot) {
+  let latest = 0
+  const walk = (dir) => {
+    let entries
+    try {
+      entries = fs.readdirSync(dir, { withFileTypes: true })
+    } catch {
+      return
+    }
+    for (const entry of entries) {
+      const full = path.join(dir, entry.name)
+      if (entry.isDirectory()) {
+        if (!shouldIgnoreDir(entry.name)) walk(full)
+      } else if (entry.isFile() && entry.name.endsWith(".md")) {
+        try {
+          latest = Math.max(latest, fs.statSync(full).mtimeMs)
+        } catch {
+          // ignore races
+        }
+      }
+    }
+  }
+  walk(boardRoot)
+  return latest
+}
+
+/**
+ * Poll a board directory for `.md` mtime changes.
+ * Uses polling (not recursive fs.watch) to avoid EMFILE on large boards.
+ * Returns a stop function.
+ */
+export function watchBoardMarkdown(boardRoot, onChange) {
+  let stopped = false
+  let lastStamp = latestMarkdownMtime(boardRoot)
+
+  const interval = setInterval(() => {
+    if (stopped) return
+    const next = latestMarkdownMtime(boardRoot)
+    if (next > lastStamp) {
+      lastStamp = next
+      onChange()
+    }
+  }, 750)
+
+  return () => {
+    stopped = true
+    clearInterval(interval)
+  }
+}