@taskmark/ui 0.2.2 → 0.2.5

package/bin/taskmark.js

@@ -3,28 +3,36 @@ import { spawn } from "node:child_process"
 import fs from "node:fs"
 import http from "node:http"
 import path from "node:path"
+import { createRequire } from "node:module"
 import { fileURLToPath } from "node:url"
 
 import { resolveServeBoard } from "./lib/resolve-board.mjs"
+import { startStaticServer } from "./lib/static-preview.mjs"
+import { watchBoardMarkdown } from "./lib/watch-board-markdown.mjs"
 
 const DEFAULT_PORT = 8275
 const __dirname = path.dirname(fileURLToPath(import.meta.url))
 const packageRoot = path.resolve(__dirname, "..")
+const requireFromPackage = createRequire(path.join(packageRoot, "package.json"))
 
 function printHelp() {
   console.log(`Usage:
   taskmark serve [options]
+  taskmark dev [options]
   taskmark build [options]
+  taskmark preview [options]
 
 Commands:
   serve              Start the prebuilt local UI server (default port ${DEFAULT_PORT})
+  dev                Next.js development server with board markdown live reload
   build              Production static HTML export for Vercel / static hosting
+  preview            Serve an existing static export (default: <board>/out)
 
 Options:
-  --port, -p <n>     Listen port for serve (default ${DEFAULT_PORT}; env PORT / TASKMARK_PORT)
+  --port, -p <n>     Listen port (default ${DEFAULT_PORT}; env PORT / TASKMARK_PORT)
   --board <path>     Board or product root (sets TASKMARK_BOARD)
-  --out <dir>        Static output directory for build (default: <board>/out)
-  --no-open          Do not open a browser (serve)
+  --out <dir>        Static output directory for build/preview (default: <board>/out)
+  --no-open          Do not open a browser (serve / preview / dev)
   --help, -h         Show help
 
 Board resolution (same as the UI):
@@ -35,9 +43,11 @@ Board resolution (same as the UI):
 
 Examples:
   npm i @taskmark/ui --save && npx taskmark serve
+  npx taskmark dev --board .
   npx taskmark build --board .
+  npm run preview
+  npx taskmark preview --port 9000
   npx -p @taskmark/ui taskmark serve
-  npx taskmark serve --port 9000
   TASKMARK_BOARD=/path/to/my-app/taskmark npx taskmark serve
 `)
 }
@@ -93,15 +103,73 @@ function resolvePort(raw) {
   return n
 }
 
-function findStandaloneServer() {
-  const candidates = [
-    path.join(packageRoot, "dist", "standalone", "server.js"),
-    path.join(packageRoot, ".next", "standalone", "server.js"),
-  ]
-  for (const candidate of candidates) {
-    if (fs.existsSync(candidate)) return candidate
+function resolveNextBin() {
+  try {
+    return requireFromPackage.resolve("next/dist/bin/next")
+  } catch {
+    const fallback = path.join(
+      packageRoot,
+      "node_modules",
+      "next",
+      "dist",
+      "bin",
+      "next"
+    )
+    if (fs.existsSync(fallback)) return fallback
+    throw new Error(
+      "next binary not found. Reinstall @taskmark/ui (next is required for serve/dev)."
+    )
+  }
+}
+
+/**
+ * Ensure packageRoot/.next points at a usable production build.
+ * Published packages ship dist/prod-next (npm cannot pack nested node_modules
+ * used by Next standalone).
+ */
+function ensureProdNext() {
+  const nextDir = path.join(packageRoot, ".next")
+  const shipped = path.join(packageRoot, "dist", "prod-next")
+  const hasLocalServer = fs.existsSync(path.join(nextDir, "server"))
+  const hasShippedServer = fs.existsSync(path.join(shipped, "server"))
+
+  if (hasLocalServer) return nextDir
+  if (!hasShippedServer) {
+    throw new Error(`Prebuilt UI not found.
+
+Expected ${shipped} (or a local .next/server from npm run build).
+Reinstall @taskmark/ui or rebuild the package.`)
+  }
+
+  if (fs.existsSync(nextDir)) {
+    const st = fs.lstatSync(nextDir)
+    if (st.isSymbolicLink() || st.isDirectory()) {
+      fs.rmSync(nextDir, { recursive: true, force: true })
+    }
+  }
+
+  try {
+    const type = process.platform === "win32" ? "junction" : "dir"
+    fs.symlinkSync(shipped, nextDir, type)
+  } catch {
+    fs.cpSync(shipped, nextDir, { recursive: true })
   }
-  return null
+  return nextDir
+}
+
+function touchDevReloadToken() {
+  const tokenFile = path.join(
+    packageRoot,
+    "lib",
+    "taskmark",
+    "dev-reload-token.ts"
+  )
+  const stamp = String(Date.now())
+  fs.writeFileSync(
+    tokenFile,
+    `/**\n * Touched by \`taskmark dev\` when board markdown changes so Next Fast Refresh\n * re-runs server components that import this module.\n */\nexport const DEV_RELOAD_TOKEN = "${stamp}"\n`,
+    "utf8"
+  )
 }
 
 function openBrowser(url) {
@@ -151,8 +219,8 @@ function waitForServer(port, timeoutMs = 60_000) {
   })
 }
 
-async function serve(args) {
-  const resolved = resolveServeBoard(args.board)
+function resolveBoardOrExit(boardArg, command) {
+  const resolved = resolveServeBoard(boardArg)
   if (!resolved) {
     console.error(`No Taskmark board found.
 
@@ -162,50 +230,126 @@ Looked for:
   - cwd layouts: nested ./taskmark/ or dedicated *-taskmark root
 
 Fix: cd into a product repo (with ./taskmark/) or a board root, or set TASKMARK_BOARD.
-Then re-run: npx taskmark serve
-(or: npx -p @taskmark/ui taskmark serve)`)
+Then re-run: npx taskmark ${command}
+(or: npx -p @taskmark/ui taskmark ${command})`)
+    process.exit(1)
+  }
+  return resolved
+}
+
+function attachChildLifecycle(child, onShutdown) {
+  const shutdown = (signal) => {
+    onShutdown?.()
+    if (!child.killed) child.kill(signal)
+  }
+  process.on("SIGINT", () => shutdown("SIGINT"))
+  process.on("SIGTERM", () => shutdown("SIGTERM"))
+  child.on("exit", (code, signal) => {
+    onShutdown?.()
+    if (signal) process.exit(1)
+    process.exit(code ?? 0)
+  })
+  return shutdown
+}
+
+async function serve(args) {
+  const resolved = resolveBoardOrExit(args.board, "serve")
+  const port = resolvePort(args.port)
+  const url = `http://localhost:${port}`
+  const nextBin = resolveNextBin()
+
+  try {
+    ensureProdNext()
+  } catch (err) {
+    console.error(String(err?.message || err))
     process.exit(1)
   }
 
-  const serverJs = findStandaloneServer()
-  if (!serverJs) {
-    console.error(`Prebuilt server not found.
+  console.log(`Taskmark UI`)
+  console.log(`  board:  ${resolved.boardPath} (${resolved.source})`)
+  console.log(`  listen: ${url}`)
+
+  const child = spawn(
+    process.execPath,
+    [nextBin, "start", "-H", "0.0.0.0", "-p", String(port)],
+    {
+      cwd: packageRoot,
+      env: {
+        ...process.env,
+        PORT: String(port),
+        HOSTNAME: "0.0.0.0",
+        TASKMARK_BOARD: resolved.boardPath,
+        NODE_ENV: "production",
+      },
+      stdio: "inherit",
+    }
+  )
 
-From the taskmark package source, run:
-  npm run build
+  const shutdown = attachChildLifecycle(child)
 
-Or install a published build that includes dist/standalone.`)
+  const hosted =
+    Boolean(process.env.VERCEL) ||
+    Boolean(process.env.NOW_REGION) ||
+    process.env.CI === "true"
+  const shouldOpen = args.open && !hosted
+
+  try {
+    await waitForServer(port)
+    if (shouldOpen) {
+      openBrowser(url)
+    } else {
+      console.log(`Ready: ${url}`)
+    }
+  } catch (err) {
+    console.error(String(err?.message || err))
+    shutdown("SIGTERM")
     process.exit(1)
   }
+}
 
+async function dev(args) {
+  const resolved = resolveBoardOrExit(args.board, "dev")
   const port = resolvePort(args.port)
   const url = `http://localhost:${port}`
-  const standaloneDir = path.dirname(serverJs)
+  const nextBin = resolveNextBin()
 
-  console.log(`Taskmark UI`)
+  console.log(`Taskmark UI (dev)`)
   console.log(`  board:  ${resolved.boardPath} (${resolved.source})`)
   console.log(`  listen: ${url}`)
+  console.log(`  watch:  **/*.md under board`)
 
-  const child = spawn(process.execPath, [serverJs], {
-    cwd: standaloneDir,
-    env: {
-      ...process.env,
-      PORT: String(port),
-      HOSTNAME: "0.0.0.0",
-      TASKMARK_BOARD: resolved.boardPath,
-    },
-    stdio: "inherit",
-  })
+  const child = spawn(
+    process.execPath,
+    [nextBin, "dev", "--webpack", "-H", "0.0.0.0", "-p", String(port)],
+    {
+      cwd: packageRoot,
+      env: {
+        ...process.env,
+        PORT: String(port),
+        TASKMARK_BOARD: resolved.boardPath,
+        TASKMARK_CWD: resolved.boardPath,
+        NODE_ENV: "development",
+      },
+      stdio: "inherit",
+    }
+  )
 
-  const shutdown = (signal) => {
-    if (!child.killed) child.kill(signal)
-  }
-  process.on("SIGINT", () => shutdown("SIGINT"))
-  process.on("SIGTERM", () => shutdown("SIGTERM"))
+  let debounce = null
+  const stopWatch = watchBoardMarkdown(resolved.boardPath, () => {
+    if (debounce) clearTimeout(debounce)
+    debounce = setTimeout(() => {
+      try {
+        touchDevReloadToken()
+        console.log(`[taskmark] board markdown changed — refreshing`)
+      } catch (err) {
+        console.warn(`[taskmark] reload touch failed: ${err?.message || err}`)
+      }
+    }, 200)
+  })
 
-  child.on("exit", (code, signal) => {
-    if (signal) process.exit(1)
-    process.exit(code ?? 0)
+  const shutdown = attachChildLifecycle(child, () => {
+    stopWatch()
+    if (debounce) clearTimeout(debounce)
   })
 
   const hosted =
@@ -215,7 +359,7 @@ Or install a published build that includes dist/standalone.`)
   const shouldOpen = args.open && !hosted
 
   try {
-    await waitForServer(port)
+    await waitForServer(port, 120_000)
     if (shouldOpen) {
       openBrowser(url)
     } else {
@@ -228,6 +372,55 @@ Or install a published build that includes dist/standalone.`)
   }
 }
 
+async function preview(args) {
+  const callerCwd = process.env.INIT_CWD || process.cwd()
+
+  function resolveCallerPath(p) {
+    if (!p) return null
+    return path.isAbsolute(p) ? path.resolve(p) : path.resolve(callerCwd, p)
+  }
+
+  const boardArg = resolveCallerPath(args.board)
+  const resolved = resolveBoardOrExit(boardArg, "preview")
+
+  const outDir = args.out
+    ? resolveCallerPath(args.out)
+    : path.join(resolved.boardPath, "out")
+
+  if (!outDir || !fs.existsSync(outDir) || !fs.statSync(outDir).isDirectory()) {
+    console.error(`Static export not found: ${outDir || "(missing)"}
+
+Run a production build first:
+  npx taskmark build --board .
+  # or: npm run build
+
+Then: npm run preview`)
+    process.exit(1)
+  }
+
+  const port = resolvePort(args.port)
+  const url = `http://localhost:${port}`
+
+  console.log(`Taskmark static preview`)
+  console.log(`  board:  ${resolved.boardPath} (${resolved.source})`)
+  console.log(`  out:    ${outDir}`)
+  console.log(`  listen: ${url}`)
+
+  await startStaticServer({ root: outDir, port })
+
+  const hosted =
+    Boolean(process.env.VERCEL) ||
+    Boolean(process.env.NOW_REGION) ||
+    process.env.CI === "true"
+  const shouldOpen = args.open && !hosted
+
+  if (shouldOpen) {
+    openBrowser(url)
+  } else {
+    console.log(`Ready: ${url}`)
+  }
+}
+
 async function main() {
   const args = parseArgs(process.argv.slice(2))
   if (args.help || !args.command) {
@@ -243,16 +436,31 @@ async function main() {
     }
     return
   }
+  if (args.command === "dev") {
+    try {
+      await dev(args)
+    } catch (err) {
+      console.error(String(err?.message || err))
+      process.exit(1)
+    }
+    return
+  }
+  if (args.command === "preview") {
+    try {
+      await preview(args)
+    } catch (err) {
+      console.error(String(err?.message || err))
+      process.exit(1)
+    }
+    return
+  }
   if (args.command === "build") {
     const buildScript = path.join(packageRoot, "scripts", "build-static.mjs")
-    // Resolve relative paths against the caller's cwd (npm/yarn script dir),
-    // not packageRoot — the child runs with cwd = @taskmark/ui.
     const callerCwd = process.env.INIT_CWD || process.cwd()
     const childArgs = [buildScript]
     if (args.board) {
       childArgs.push("--board", path.resolve(callerCwd, args.board))
     } else {
-      // Prefer the invoke directory as the board when no --board flag.
       childArgs.push("--board", callerCwd)
     }
     if (args.out) {

package/components/board/app-bar.tsx

@@ -9,15 +9,13 @@ import type { DiscoveredProject } from "@/lib/taskmark/types"
 type AppBarProps = {
   projects: DiscoveredProject[]
   activeProjectId: string
-  masterCount: number
-  /** When true, workspace is env/cwd-bound — hide multi-master add. */
+  /** When true, workspace is env/cwd-bound — hide project switcher and add. */
   autoconfig?: boolean
 }
 
 export function AppBar({
   projects,
   activeProjectId,
-  masterCount,
   autoconfig = false,
 }: AppBarProps) {
   return (
@@ -49,42 +47,41 @@ export function AppBar({
               </span>
             </p>
             <p className="truncate text-xs text-muted-foreground transition-transform duration-200 group-hover:translate-y-1">
-              {projects.length} project{projects.length === 1 ? "" : "s"}
-              {masterCount > 0
-                ? ` · ${masterCount} workspace${masterCount === 1 ? "" : "s"}`
-                : ""}
+              Product memory for agent work
             </p>
           </div>
         </div>
 
-        <form
-          action={selectActiveProject}
-          className="flex min-w-0 flex-wrap items-center gap-2"
-        >
-          <label htmlFor="projectId" className="sr-only">
-            Active project
-          </label>
-          <select
-            id="projectId"
-            name="projectId"
-            defaultValue={activeProjectId}
-            onChange={(e) => {
-              e.currentTarget.form?.requestSubmit()
-            }}
-            className="max-w-[20rem] rounded border-2 border-border bg-input px-3 py-1.5 text-sm shadow-sm outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
+        {!autoconfig ? (
+          <form
+            action={selectActiveProject}
+            className="flex min-w-0 flex-wrap items-center gap-2"
           >
-            {projects.map((project) => (
-              <option key={project.id} value={project.id}>
-                {projectOptionLabel(project, projects)}
-              </option>
-            ))}
-          </select>
-          <noscript>
-            <Button type="submit" size="sm" variant="outline">
-              Switch project
-            </Button>
-          </noscript>
-        </form>
+            <label htmlFor="projectId" className="sr-only">
+              Active project
+            </label>
+            <select
+              id="projectId"
+              name="projectId"
+              defaultValue={activeProjectId}
+              onChange={(e) => {
+                e.currentTarget.form?.requestSubmit()
+              }}
+              className="max-w-[20rem] rounded border-2 border-border bg-input px-3 py-1.5 text-sm shadow-sm outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
+            >
+              {projects.map((project) => (
+                <option key={project.id} value={project.id}>
+                  {projectOptionLabel(project, projects)}
+                </option>
+              ))}
+            </select>
+            <noscript>
+              <Button type="submit" size="sm" variant="outline">
+                Switch project
+              </Button>
+            </noscript>
+          </form>
+        ) : null}
 
         {!autoconfig ? (
           <form action={openAddProject}>

package/components/board/board-dev-reloader.tsx

@@ -0,0 +1,49 @@
+"use client"
+
+import { useRouter } from "next/navigation"
+import { useEffect, useRef } from "react"
+
+/**
+ * In development, poll the board-reload SSE endpoint and soft-refresh RSC
+ * trees when markdown on disk changes.
+ */
+export function BoardDevReloader() {
+  const router = useRouter()
+  const lastAt = useRef(0)
+
+  useEffect(() => {
+    if (process.env.NODE_ENV !== "development") return
+
+    let closed = false
+    let source: EventSource | null = null
+    let retryTimer: ReturnType<typeof setTimeout> | null = null
+
+    const connect = () => {
+      if (closed) return
+      source = new EventSource("/api/taskmark-reload")
+      source.addEventListener("reload", (event) => {
+        const data = String((event as MessageEvent).data || "")
+        const at = Number.parseInt(data, 10)
+        if (Number.isFinite(at) && at <= lastAt.current) return
+        lastAt.current = Number.isFinite(at) ? at : Date.now()
+        router.refresh()
+      })
+      source.onerror = () => {
+        source?.close()
+        source = null
+        if (!closed) {
+          retryTimer = setTimeout(connect, 1500)
+        }
+      }
+    }
+
+    connect()
+    return () => {
+      closed = true
+      if (retryTimer) clearTimeout(retryTimer)
+      source?.close()
+    }
+  }, [router])
+
+  return null
+}

package/components/board/epic-list.tsx

@@ -33,6 +33,7 @@ import { usePaginatedRows } from "@/hooks/use-paginated-rows"
 import { usePersistedHideCompleted } from "@/hooks/use-persisted-hide-completed"
 import { useTableSort } from "@/hooks/use-table-sort"
 import { cn } from "@/lib/utils"
+import { displayFileName } from "@/lib/display-path"
 import type { EpicSummary, ProjectEpicList } from "@/lib/taskmark/epic-types"
 import { isGeneralEpic } from "@/lib/taskmark/general-epic"
 import {
@@ -145,9 +146,6 @@ function ProjectEpicCard({
     <Card>
       <CardHeader>
         <CardTitle className="font-head text-xl">{project.name}</CardTitle>
-        <CardDescription className="font-mono text-xs">
-          {project.boardPath}
-        </CardDescription>
         {hasSourceRows ? (
           <CardAction>
             <TimeframeFilter
@@ -173,7 +171,7 @@ function ProjectEpicCard({
             <ul className="mt-2 flex flex-col gap-1 font-mono text-xs text-muted-foreground">
               {errors.map((err) => (
                 <li key={err.filePath}>
-                  {err.filePath}: {err.message}
+                  {displayFileName(err.filePath)}: {err.message}
                 </li>
               ))}
             </ul>

package/components/board/markdown-content.tsx

@@ -13,8 +13,7 @@ type MarkdownContentProps = {
 }
 
 const proseClassName = cn(
-  "text-sm leading-relaxed text-foreground",
-  "[&>:first-child]:mt-0 [&>:last-child]:mb-0",
+  "tm-md text-sm leading-relaxed text-foreground",
   "[&_p]:my-2",
   "[&_h1]:mt-3 [&_h1]:mb-2 [&_h1]:font-head [&_h1]:text-lg [&_h1]:font-semibold",
   "[&_h2]:mt-3 [&_h2]:mb-2 [&_h2]:font-head [&_h2]:text-base [&_h2]:font-semibold",

package/components/board/overall-work-items-list.tsx

@@ -36,6 +36,7 @@ import { usePaginatedRows } from "@/hooks/use-paginated-rows"
 import { usePersistedHideCompleted } from "@/hooks/use-persisted-hide-completed"
 import { useTableSort } from "@/hooks/use-table-sort"
 import { cn } from "@/lib/utils"
+import { displayFileName } from "@/lib/display-path"
 import type { EpicWorkItemsList } from "@/lib/taskmark/flat-work-item-types"
 import {
   DEFAULT_TIMEFRAME_FILTER,
@@ -155,7 +156,7 @@ export function OverallWorkItemsList({
             <ul className="mt-2 flex flex-col gap-1 font-mono text-xs text-muted-foreground">
               {errors.map((err) => (
                 <li key={`${err.filePath}:${err.message}`}>
-                  {err.filePath}: {err.message}
+                  {displayFileName(err.filePath)}: {err.message}
                 </li>
               ))}
             </ul>

package/components/board/static-board-app.tsx

@@ -82,7 +82,6 @@ export function StaticBoardApp({ snapshot }: { snapshot: BoardSnapshot }) {
         <AppBar
           projects={snapshot.projects}
           activeProjectId={activeProject.id}
-          masterCount={1}
           autoconfig={true}
         />
 

package/components/board/story-list.tsx

@@ -34,6 +34,7 @@ import { usePaginatedRows } from "@/hooks/use-paginated-rows"
 import { usePersistedHideCompleted } from "@/hooks/use-persisted-hide-completed"
 import { useTableSort } from "@/hooks/use-table-sort"
 import { cn } from "@/lib/utils"
+import { displayFileName } from "@/lib/display-path"
 import type { EpicStoryList } from "@/lib/taskmark/story-types"
 import {
   DEFAULT_TIMEFRAME_FILTER,
@@ -158,7 +159,7 @@ export function StoryList({
             <ul className="mt-2 flex flex-col gap-1 font-mono text-xs text-muted-foreground">
               {errors.map((err) => (
                 <li key={`${err.filePath}:${err.message}`}>
-                  {err.filePath}: {err.message}
+                  {displayFileName(err.filePath)}: {err.message}
                 </li>
               ))}
             </ul>

package/components/board/task-list.tsx

@@ -33,6 +33,7 @@ import { usePaginatedRows } from "@/hooks/use-paginated-rows"
 import { usePersistedHideCompleted } from "@/hooks/use-persisted-hide-completed"
 import { useTableSort } from "@/hooks/use-table-sort"
 import type { StoryItemList } from "@/lib/taskmark/item-types"
+import { displayFileName } from "@/lib/display-path"
 import {
   DEFAULT_TIMEFRAME_FILTER,
   filterListRows,
@@ -154,7 +155,7 @@ export function TaskList({
             <ul className="mt-2 flex flex-col gap-1 font-mono text-xs text-muted-foreground">
               {errors.map((err) => (
                 <li key={`${err.filePath}:${err.message}`}>
-                  {err.filePath}: {err.message}
+                  {displayFileName(err.filePath)}: {err.message}
                 </li>
               ))}
             </ul>

package/components/board/work-item-sheet.tsx

@@ -39,6 +39,7 @@ import {
   loadWorkItemDetailFromSnapshot,
   resolveWorkItemByIdFromSnapshot,
 } from "@/lib/taskmark/snapshot-client"
+import { displayFileName } from "@/lib/display-path"
 
 const isStatic =
   process.env.NEXT_PUBLIC_TASKMARK_STATIC === "1" ||
@@ -574,7 +575,7 @@ function WorkItemSheetProviderInner({
                 <p className="mt-1 text-muted-foreground">{state.message}</p>
                 {state.filePath ? (
                   <p className="mt-2 break-all font-mono text-xs text-muted-foreground">
-                    {state.filePath}
+                    {displayFileName(state.filePath)}
                   </p>
                 ) : null}
               </div>
@@ -598,13 +599,25 @@ function WorkItemSheetProviderInner({
   )
 }
 
+/** Context while `useSearchParams` Suspense is pending — children must not render bare. */
+const SUSPENSE_FALLBACK_SHEET: WorkItemSheetContextValue = {
+  openDetail: () => {},
+  openDetailById: () => {},
+}
+
 export function WorkItemSheetProvider({
   children,
 }: {
   children: React.ReactNode
 }) {
   return (
-    <React.Suspense fallback={children}>
+    <React.Suspense
+      fallback={
+        <WorkItemSheetContext.Provider value={SUSPENSE_FALLBACK_SHEET}>
+          {children}
+        </WorkItemSheetContext.Provider>
+      }
+    >
       <WorkItemSheetProviderInner>{children}</WorkItemSheetProviderInner>
     </React.Suspense>
   )