@taskmark/ui 0.2.4 → 0.2.6

package/bin/taskmark.js

@@ -3,46 +3,65 @@ 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 [options]              smart default: local board if found, else setup
+  taskmark open [options]
   taskmark serve [options]
+  taskmark dev [options]
   taskmark build [options]
   taskmark preview [options]
 
 Commands:
-  serve              Start the prebuilt local UI server (default port ${DEFAULT_PORT})
+  (default)          Bind to a board in/near cwd when one exists; otherwise open
+                     the standalone setup / project picker (same as global use)
+  open               Always start in workspace mode (setup / project picker)
+  serve              Start the prebuilt UI bound to one resolved board (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 (default ${DEFAULT_PORT}; env PORT / TASKMARK_PORT)
   --board <path>     Board or product root (sets TASKMARK_BOARD)
+  --workspace, -w    Force multi-project / setup mode (skip local board binding)
   --out <dir>        Static output directory for build/preview (default: <board>/out)
-  --no-open          Do not open a browser (serve / preview)
+  --no-open          Do not open a browser (default / open / serve / preview / dev)
   --help, -h         Show help
 
-Board resolution (same as the UI):
+Modes:
+  Bound      One board from --board / env / cwd / sibling *-taskmark; no project picker.
+  Workspace  Setup wizard + app-bar project picker (cookies). Used when no local
+             board is found, or with open / --workspace.
+
+Board resolution for bound mode (same as the UI):
   1. --board / TASKMARK_BOARD
   2. TASKMARK_MASTER
   3. TASKMARK_CWD → npm INIT_CWD → process.cwd()
      (product root with ./taskmark/, or dedicated *-taskmark root)
+  4. Sibling <parent>-taskmark next to a product repo (multi-git)
 
 Examples:
+  npx @taskmark/ui                 # global: setup / pick projects
+  cd my-app-taskmark && npx taskmark   # local board in this folder
   npm i @taskmark/ui --save && npx taskmark serve
+  npx taskmark open                # force setup even inside a board folder
+  npx taskmark dev --board .
   npx taskmark build --board .
   npm run preview
-  npx taskmark preview --port 9000
-  npx -p @taskmark/ui taskmark serve
-  TASKMARK_BOARD=/path/to/my-app/taskmark npx taskmark serve
+  TASKMARK_BOARD=/path/to/board npx taskmark serve
 `)
 }
 
@@ -53,20 +72,24 @@ function parseArgs(argv) {
     board: null,
     out: null,
     open: true,
+    workspace: false,
     help: false,
   }
   const rest = [...argv]
-  if (rest.length === 0 || rest[0] === "--help" || rest[0] === "-h") {
-    args.help = true
+  if (rest.length === 0) {
+    args.command = "auto"
     return args
   }
-  args.command = rest.shift()
+  // Bare `taskmark` with only flags → smart default (local board or setup).
+  args.command = rest[0].startsWith("-") ? "auto" : rest.shift()
   while (rest.length) {
     const token = rest.shift()
     if (token === "--help" || token === "-h") {
       args.help = true
     } else if (token === "--no-open") {
       args.open = false
+    } else if (token === "--workspace" || token === "-w") {
+      args.workspace = true
     } else if (token === "--port" || token === "-p") {
       args.port = rest.shift()
     } else if (token === "--board") {
@@ -97,15 +120,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)."
+    )
   }
-  return null
+}
+
+/**
+ * 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 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) {
@@ -155,8 +236,48 @@ function waitForServer(port, timeoutMs = 60_000) {
   })
 }
 
-async function serve(args) {
-  const resolved = resolveServeBoard(args.board)
+function callerCwd() {
+  return process.env.INIT_CWD || process.cwd()
+}
+
+function isWorkspaceRun(args) {
+  return args.command === "open" || args.workspace === true
+}
+
+/**
+ * Decide bound vs workspace for the default (`auto`) command.
+ * Returns a serve-compatible args object with workspace forced when unbound.
+ */
+function resolveAutoArgs(args) {
+  if (args.workspace) {
+    return { ...args, command: "open", workspace: true }
+  }
+  if (args.board) {
+    return { ...args, command: "serve", workspace: false }
+  }
+  const resolved = resolveServeBoard(null)
+  if (resolved) {
+    return { ...args, command: "serve", workspace: false }
+  }
+  return { ...args, command: "open", workspace: true }
+}
+
+/**
+ * Workspace mode must out-rank an inherited board bind, so blank those vars for
+ * the child (the UI reads empty as unset) instead of only adding the flag.
+ */
+function workspaceEnv() {
+  return {
+    TASKMARK_WORKSPACE: "1",
+    TASKMARK_WORKSPACE_ROOT: callerCwd(),
+    TASKMARK_BOARD: "",
+    TASKMARK_MASTER: "",
+    TASKMARK_CWD: "",
+  }
+}
+
+function resolveBoardOrExit(boardArg, command) {
+  const resolved = resolveServeBoard(boardArg)
   if (!resolved) {
     console.error(`No Taskmark board found.
 
@@ -164,52 +285,157 @@ Looked for:
   - --board / TASKMARK_BOARD
   - TASKMARK_MASTER
   - cwd layouts: nested ./taskmark/ or dedicated *-taskmark root
+  - sibling <parent>-taskmark beside a product repo
 
 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})
+
+To pick a project in the browser instead: npx taskmark`)
     process.exit(1)
   }
+  return resolved
+}
 
-  const serverJs = findStandaloneServer()
-  if (!serverJs) {
-    console.error(`Prebuilt server not found.
-
-From the taskmark package source, run:
-  npm run build
-
-Or install a published build that includes dist/standalone.`)
-    process.exit(1)
+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 workspace = isWorkspaceRun(args)
+  const resolved = workspace ? null : resolveBoardOrExit(args.board, "serve")
   const port = resolvePort(args.port)
   const url = `http://localhost:${port}`
-  const standaloneDir = path.dirname(serverJs)
+  const nextBin = resolveNextBin()
+
+  try {
+    ensureProdNext()
+  } catch (err) {
+    console.error(String(err?.message || err))
+    process.exit(1)
+  }
 
   console.log(`Taskmark UI`)
-  console.log(`  board:  ${resolved.boardPath} (${resolved.source})`)
+  if (workspace) {
+    console.log(`  mode:   workspace (choose projects in the browser)`)
+    console.log(`  from:   ${callerCwd()}`)
+  } else {
+    console.log(`  board:  ${resolved.boardPath} (${resolved.source})`)
+  }
   console.log(`  listen: ${url}`)
 
-  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, "start", "-H", "0.0.0.0", "-p", String(port)],
+    {
+      cwd: packageRoot,
+      env: {
+        ...process.env,
+        PORT: String(port),
+        HOSTNAME: "0.0.0.0",
+        ...(workspace
+          ? workspaceEnv()
+          : { TASKMARK_BOARD: resolved.boardPath }),
+        NODE_ENV: "production",
+      },
+      stdio: "inherit",
+    }
+  )
 
-  const shutdown = (signal) => {
-    if (!child.killed) child.kill(signal)
+  const shutdown = attachChildLifecycle(child)
+
+  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)
   }
-  process.on("SIGINT", () => shutdown("SIGINT"))
-  process.on("SIGTERM", () => shutdown("SIGTERM"))
+}
 
-  child.on("exit", (code, signal) => {
-    if (signal) process.exit(1)
-    process.exit(code ?? 0)
+async function dev(args) {
+  const workspace = isWorkspaceRun(args)
+  const resolved = workspace ? null : resolveBoardOrExit(args.board, "dev")
+  const port = resolvePort(args.port)
+  const url = `http://localhost:${port}`
+  const nextBin = resolveNextBin()
+
+  console.log(`Taskmark UI (dev)`)
+  if (workspace) {
+    console.log(`  mode:   workspace (choose projects in the browser)`)
+    console.log(`  from:   ${callerCwd()}`)
+  } else {
+    console.log(`  board:  ${resolved.boardPath} (${resolved.source})`)
+  }
+  console.log(`  listen: ${url}`)
+  console.log(
+    workspace
+      ? `  watch:  off (no single board bound)`
+      : `  watch:  **/*.md under board`
+  )
+
+  const child = spawn(
+    process.execPath,
+    [nextBin, "dev", "--webpack", "-H", "0.0.0.0", "-p", String(port)],
+    {
+      cwd: packageRoot,
+      env: {
+        ...process.env,
+        PORT: String(port),
+        ...(workspace
+          ? workspaceEnv()
+          : {
+              TASKMARK_BOARD: resolved.boardPath,
+              TASKMARK_CWD: resolved.boardPath,
+            }),
+        NODE_ENV: "development",
+      },
+      stdio: "inherit",
+    }
+  )
+
+  let debounce = null
+  const stopWatch = workspace
+    ? () => {}
+    : 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)
+      })
+
+  const shutdown = attachChildLifecycle(child, () => {
+    stopWatch()
+    if (debounce) clearTimeout(debounce)
   })
 
   const hosted =
@@ -219,7 +445,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 {
@@ -241,19 +467,7 @@ async function preview(args) {
   }
 
   const boardArg = resolveCallerPath(args.board)
-  const resolved = resolveServeBoard(boardArg)
-  if (!resolved) {
-    console.error(`No Taskmark board found.
-
-Looked for:
-  - --board / TASKMARK_BOARD
-  - TASKMARK_MASTER
-  - 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 preview`)
-    process.exit(1)
-  }
+  const resolved = resolveBoardOrExit(boardArg, "preview")
 
   const outDir = args.out
     ? resolveCallerPath(args.out)
@@ -299,7 +513,30 @@ async function main() {
     printHelp()
     process.exit(args.help || !args.command ? 0 : 1)
   }
-  if (args.command === "serve") {
+  const workspaceCommands = new Set(["auto", "open", "serve", "dev"])
+  if (args.workspace && !workspaceCommands.has(args.command)) {
+    console.error(`--workspace applies to the default command, open, serve, and dev.
+
+Use: npx taskmark  (or: npx taskmark open)`)
+    process.exit(1)
+  }
+  if ((isWorkspaceRun(args) || (args.command === "auto" && args.workspace)) && args.board) {
+    console.error(`--board and workspace mode are mutually exclusive.
+
+Bind one board:      npx taskmark serve --board ${args.board}
+Pick projects in UI: npx taskmark open`)
+    process.exit(1)
+  }
+  if (args.command === "auto") {
+    try {
+      await serve(resolveAutoArgs(args))
+    } catch (err) {
+      console.error(String(err?.message || err))
+      process.exit(1)
+    }
+    return
+  }
+  if (args.command === "open" || args.command === "serve") {
     try {
       await serve(args)
     } catch (err) {
@@ -308,6 +545,15 @@ 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)
@@ -319,14 +565,11 @@ async function main() {
   }
   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>