@taskmark/ui 0.1.0 → 0.2.1

package/README.md

@@ -6,7 +6,7 @@ Install in a Taskmark board folder (or product root with `./taskmark/`) and open
 
 ```bash
 # from nested ./taskmark/ or a dedicated *-taskmark board root
-npm install @taskmark/ui --save-dev
+npm install @taskmark/ui --save
 npx taskmark serve
 ```
 
@@ -45,16 +45,28 @@ You do **not** need to clone `taskmark-frontend`.
 {
   "name": "my-project-taskmark",
   "private": true,
+  "type": "module",
   "scripts": {
-    "start": "taskmark serve"
+    "start": "taskmark serve --no-open",
+    "serve": "taskmark serve",
+    "build": "taskmark build --board . --out out"
   },
-  "devDependencies": {
-    "@taskmark/ui": "^0.1.0"
+  "dependencies": {
+    "@taskmark/ui": "^0.2.0"
   }
 }
 ```
 
-Then `npm install && npm start`.
+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`.
+
+### Static production build
+
+```bash
+npx taskmark build --board .
+# → <board>/out  (HTML + assets + taskmark-snapshot.json)
+```
+
+Favicon, webmanifest, and Open Graph assets ship in `public/` and are included in both standalone (`taskmark serve`) and static (`taskmark build`) outputs.
 
 ## Develop this package
 

package/app/board/actions.ts

@@ -0,0 +1,62 @@
+"use server"
+
+import { getActiveProjectCookie, getMasterFoldersCookie } from "@/lib/taskmark/cookies"
+import { resolveActiveProject } from "@/lib/taskmark/active-project"
+import type { WorkItemDetailResult } from "@/lib/taskmark/detail-types"
+import {
+  loadWorkItemDetailSync,
+  resolveWorkItemByIdSync,
+} from "@/lib/taskmark/detail-load"
+import { loadConfiguredWorkspace, loadWorkspace } from "@/lib/taskmark/workspace"
+
+export type ResolveWorkItemResult =
+  | { ok: true; ref: import("@/lib/taskmark/detail-types").WorkItemRef }
+  | { ok: false; itemId: string; message: string }
+
+/**
+ * Resolve a shareable work item id (E-/S-/T-/B-) to a WorkItemRef.
+ */
+export async function resolveWorkItemById(
+  itemId: string,
+  options?: { withinFilePath?: string | null }
+): Promise<ResolveWorkItemResult> {
+  const masters = await getMasterFoldersCookie()
+  const workspace = loadWorkspace(masters)
+  if (workspace.projects.length === 0) {
+    return {
+      ok: false,
+      itemId: typeof itemId === "string" ? itemId.trim() : "",
+      message: "No workspace configured",
+    }
+  }
+
+  const savedActiveId = await getActiveProjectCookie()
+  const active = resolveActiveProject(
+    workspace.projects,
+    workspace.autoconfig ? null : savedActiveId
+  )
+
+  return resolveWorkItemByIdSync(workspace.projects, itemId, {
+    withinFilePath: options?.withinFilePath,
+    activeBoardPath: active?.boardPath ?? null,
+  })
+}
+
+/**
+ * Load and parse a full work item detail from an absolute markdown path.
+ */
+export async function loadWorkItemDetail(
+  filePath: string,
+  hint?: "epic" | "story" | "item"
+): Promise<WorkItemDetailResult> {
+  const masters = await getMasterFoldersCookie()
+  const workspace = loadWorkspace(masters)
+  if (workspace.projects.length === 0) {
+    return {
+      ok: false,
+      filePath: filePath ?? "",
+      message: "No workspace configured",
+    }
+  }
+  return loadWorkItemDetailSync(workspace.projects, filePath, hint)
+}

package/{dist/standalone/dist/standalone/dist/standalone/dist/standalone/app → app}/board/page.tsx

@@ -1,3 +1,4 @@
+import { Suspense } from "react"
 import Link from "next/link"
 import { redirect } from "next/navigation"
 
@@ -6,6 +7,7 @@ import { EpicList } from "@/components/board/epic-list"
 import { ListViewSwitcher } from "@/components/board/list-view-switcher"
 import { OverallWorkItemsList } from "@/components/board/overall-work-items-list"
 import { ProjectStatusMetricsStrip } from "@/components/board/project-status-metrics-strip"
+import { StaticBoardApp } from "@/components/board/static-board-app"
 import { TaskList } from "@/components/board/task-list"
 import { WorkItemsList } from "@/components/board/work-items-list"
 import { WorkItemSheetProvider } from "@/components/board/work-item-sheet"
@@ -21,6 +23,7 @@ import {
   parseListViewMode,
   type ListViewMode,
 } from "@/lib/taskmark/list-view-mode"
+import { loadSnapshotFromPublic } from "@/lib/taskmark/load-snapshot-server"
 import { parseEpicsForProject } from "@/lib/taskmark/parse-epics"
 import {
   parseWorkItemsForEpic,
@@ -32,6 +35,7 @@ import {
   collectMetricLeaves,
   computeProjectStatusMetrics,
 } from "@/lib/taskmark/project-metrics"
+import { isStaticRuntime } from "@/lib/taskmark/static-mode"
 import { loadWorkspace } from "@/lib/taskmark/workspace"
 
 type BoardPageProps = {
@@ -54,6 +58,15 @@ function headingForView(view: ListViewMode): string {
 }
 
 export default async function BoardPage({ searchParams }: BoardPageProps) {
+  if (isStaticRuntime()) {
+    const snapshot = loadSnapshotFromPublic()
+    return (
+      <Suspense fallback={<div className="p-8 text-sm text-muted-foreground">Loading board…</div>}>
+        <StaticBoardApp snapshot={snapshot} />
+      </Suspense>
+    )
+  }
+
   const masters = await getMasterFoldersCookie()
   const workspace = loadWorkspace(masters)
   if (workspace.projects.length === 0) {

package/app/layout.tsx

@@ -0,0 +1,87 @@
+import type { Metadata, Viewport } from "next"
+import { Archivo_Black, Space_Grotesk } from "next/font/google"
+import { Toaster } from "@/components/ui/sonner"
+import { SITE } from "@/lib/site"
+import "./globals.css"
+
+const archivoBlack = Archivo_Black({
+  subsets: ["latin"],
+  weight: "400",
+  variable: "--font-head",
+  display: "swap",
+})
+
+const spaceGrotesk = Space_Grotesk({
+  subsets: ["latin"],
+  variable: "--font-sans",
+  display: "swap",
+})
+
+const siteDescription =
+  "Taskmark — product memory for agent work. Local markdown boards for Cursor with sizing, work logs, and velocity."
+
+export const viewport: Viewport = {
+  themeColor: "#111111",
+}
+
+export const metadata: Metadata = {
+  metadataBase: new URL(SITE.url),
+  applicationName: "Taskmark",
+  title: {
+    default: "Taskmark",
+    template: "%s · Taskmark",
+  },
+  description: siteDescription,
+  icons: {
+    icon: [
+      { url: "/favicon.ico", sizes: "any" },
+      { url: "/favicon.svg", type: "image/svg+xml" },
+      { url: "/favicon-96x96.png", sizes: "96x96", type: "image/png" },
+    ],
+    apple: [{ url: "/apple-touch-icon.png", sizes: "180x180" }],
+  },
+  manifest: "/site.webmanifest",
+  openGraph: {
+    type: "website",
+    locale: "en_US",
+    url: SITE.url,
+    siteName: "Taskmark",
+    title: "Taskmark",
+    description: siteDescription,
+    images: [
+      {
+        url: "/og/og-default.png",
+        width: 1200,
+        height: 630,
+        alt: "Taskmark — product memory for agent work",
+      },
+    ],
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: "Taskmark",
+    description: siteDescription,
+    images: ["/og/og-default.png"],
+  },
+  robots: {
+    index: true,
+    follow: true,
+  },
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body
+        className={`${archivoBlack.variable} ${spaceGrotesk.variable} font-sans antialiased`}
+      >
+        <Toaster />
+        {children}
+      </body>
+    </html>
+  )
+}

package/{dist/standalone/dist/standalone/dist/standalone/app → app}/page.tsx

@@ -1,9 +1,13 @@
 import { redirect } from "next/navigation"
 
 import { getMasterFoldersCookie } from "@/lib/taskmark/cookies"
+import { isStaticRuntime } from "@/lib/taskmark/static-mode"
 import { loadWorkspace } from "@/lib/taskmark/workspace"
 
 export default async function HomePage() {
+  if (isStaticRuntime()) {
+    redirect("/board")
+  }
   const masters = await getMasterFoldersCookie()
   const workspace = loadWorkspace(masters)
   if (workspace.projects.length > 0) {

package/{dist/standalone/dist/standalone/dist/standalone/dist/standalone/app → app}/setup/page.tsx

@@ -5,12 +5,17 @@ import { BrandLogo } from "@/components/brand-logo"
 import { SetupWizard } from "@/components/setup/setup-wizard"
 import { resolveAutoconfigWorkspace } from "@/lib/taskmark/autoconfig"
 import { getMasterFoldersCookie } from "@/lib/taskmark/cookies"
+import { isStaticRuntime } from "@/lib/taskmark/static-mode"
 
 type SetupPageProps = {
   searchParams?: Promise<{ mode?: string }>
 }
 
 export default async function SetupPage({ searchParams }: SetupPageProps) {
+  if (isStaticRuntime()) {
+    redirect("/board")
+  }
+
   const auto = resolveAutoconfigWorkspace()
   if (auto && auto.projects.length > 0) {
     // Zero-config bind — setup wizard is not needed.

package/bin/taskmark.js

@@ -14,11 +14,17 @@ const packageRoot = path.resolve(__dirname, "..")
 function printHelp() {
   console.log(`Usage:
   taskmark serve [options]
+  taskmark build [options]
+
+Commands:
+  serve              Start the prebuilt local UI server (default port ${DEFAULT_PORT})
+  build              Production static HTML export for Vercel / static hosting
 
 Options:
-  --port, -p <n>     Listen port (default ${DEFAULT_PORT}; env PORT / TASKMARK_PORT)
+  --port, -p <n>     Listen port for serve (default ${DEFAULT_PORT}; env PORT / TASKMARK_PORT)
   --board <path>     Board or product root (sets TASKMARK_BOARD)
-  --no-open          Do not open a browser
+  --out <dir>        Static output directory for build (default: <board>/out)
+  --no-open          Do not open a browser (serve)
   --help, -h         Show help
 
 Board resolution (same as the UI):
@@ -28,7 +34,8 @@ Board resolution (same as the UI):
      (product root with ./taskmark/, or dedicated *-taskmark root)
 
 Examples:
-  npm i -D @taskmark/ui && npx taskmark serve
+  npm i @taskmark/ui --save && npx taskmark serve
+  npx taskmark build --board .
   npx -p @taskmark/ui taskmark serve
   npx taskmark serve --port 9000
   TASKMARK_BOARD=/path/to/my-app/taskmark npx taskmark serve
@@ -40,6 +47,7 @@ function parseArgs(argv) {
     command: null,
     port: null,
     board: null,
+    out: null,
     open: true,
     help: false,
   }
@@ -59,10 +67,14 @@ function parseArgs(argv) {
       args.port = rest.shift()
     } else if (token === "--board") {
       args.board = rest.shift()
+    } else if (token === "--out") {
+      args.out = rest.shift()
     } else if (token.startsWith("--port=")) {
       args.port = token.slice("--port=".length)
     } else if (token.startsWith("--board=")) {
       args.board = token.slice("--board=".length)
+    } else if (token.startsWith("--out=")) {
+      args.out = token.slice("--out=".length)
     } else {
       console.error(`Unknown argument: ${token}`)
       args.help = true
@@ -196,9 +208,15 @@ Or install a published build that includes dist/standalone.`)
     process.exit(code ?? 0)
   })
 
+  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 (args.open) {
+    if (shouldOpen) {
       openBrowser(url)
     } else {
       console.log(`Ready: ${url}`)
@@ -216,17 +234,45 @@ async function main() {
     printHelp()
     process.exit(args.help || !args.command ? 0 : 1)
   }
-  if (args.command !== "serve") {
-    console.error(`Unknown command: ${args.command}`)
-    printHelp()
-    process.exit(1)
+  if (args.command === "serve") {
+    try {
+      await serve(args)
+    } catch (err) {
+      console.error(String(err?.message || err))
+      process.exit(1)
+    }
+    return
   }
-  try {
-    await serve(args)
-  } catch (err) {
-    console.error(String(err?.message || err))
-    process.exit(1)
+  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) {
+      childArgs.push("--out", path.resolve(callerCwd, args.out))
+    }
+    const child = spawn(process.execPath, childArgs, {
+      cwd: packageRoot,
+      env: {
+        ...process.env,
+        INIT_CWD: callerCwd,
+        TASKMARK_CWD: process.env.TASKMARK_CWD || callerCwd,
+      },
+      stdio: "inherit",
+    })
+    child.on("exit", (code) => process.exit(code ?? 1))
+    return
   }
+  console.error(`Unknown command: ${args.command}`)
+  printHelp()
+  process.exit(1)
 }
 
 main()

package/{dist/standalone/dist/standalone/components → components}/board/project-status-metrics-strip.tsx

@@ -8,8 +8,10 @@ import {
 
 import { MetricStatCard } from "@/components/board/metric-stat-card"
 import { ProjectContributorsPanel } from "@/components/board/project-contributors-panel"
-import type { ProjectStatusMetrics } from "@/lib/taskmark/project-metrics"
-import { formatSpeedPtsPerWeek } from "@/lib/taskmark/project-metrics"
+import {
+  formatSpeedPtsPerWeek,
+  type ProjectStatusMetrics,
+} from "@/lib/taskmark/project-metrics-shared"
 
 type ProjectStatusMetricsStripProps = {
   metrics: ProjectStatusMetrics

package/{dist/standalone/dist/standalone/app/board/page.tsx → components/board/static-board-app.tsx}

@@ -1,5 +1,8 @@
+"use client"
+
+import * as React from "react"
 import Link from "next/link"
-import { redirect } from "next/navigation"
+import { useSearchParams } from "next/navigation"
 
 import { AppBar } from "@/components/board/app-bar"
 import { EpicList } from "@/components/board/epic-list"
@@ -9,93 +12,55 @@ import { ProjectStatusMetricsStrip } from "@/components/board/project-status-met
 import { TaskList } from "@/components/board/task-list"
 import { WorkItemsList } from "@/components/board/work-items-list"
 import { WorkItemSheetProvider } from "@/components/board/work-item-sheet"
-import { resolveActiveProject } from "@/lib/taskmark/active-project"
-import {
-  getActiveProjectCookie,
-  getHideCompletedCookies,
-  getMasterFoldersCookie,
-} from "@/lib/taskmark/cookies"
 import {
   LIST_VIEW_LABELS,
   boardHref,
   parseListViewMode,
   type ListViewMode,
 } from "@/lib/taskmark/list-view-mode"
-import { parseEpicsForProject } from "@/lib/taskmark/parse-epics"
-import {
-  parseWorkItemsForEpic,
-  parseWorkItemsViewForProject,
-} from "@/lib/taskmark/parse-flat-lists"
-import { parseItemsForStory } from "@/lib/taskmark/parse-items"
+import { seedBoardSnapshot } from "@/lib/taskmark/snapshot-client"
 import {
-  collectCompletedLeafPointSamples,
-  collectMetricLeaves,
-  computeProjectStatusMetrics,
-} from "@/lib/taskmark/project-metrics"
-import { loadWorkspace } from "@/lib/taskmark/workspace"
-
-type BoardPageProps = {
-  searchParams: Promise<{
-    view?: string | string[]
-    epic?: string | string[]
-    story?: string | string[]
-    item?: string | string[]
-  }>
-}
-
-function paramValue(value: string | string[] | undefined): string | null {
-  if (typeof value === "string" && value.trim()) return value.trim()
-  return null
-}
+  storyKey,
+  type BoardSnapshot,
+} from "@/lib/taskmark/snapshot-types"
 
 function headingForView(view: ListViewMode): string {
   if (view === "overall") return "Epics"
   return LIST_VIEW_LABELS[view]
 }
 
-export default async function BoardPage({ searchParams }: BoardPageProps) {
-  const masters = await getMasterFoldersCookie()
-  const workspace = loadWorkspace(masters)
-  if (workspace.projects.length === 0) {
-    redirect("/setup")
-  }
-
-  const savedActiveId = await getActiveProjectCookie()
-  const hideCompletedPrefs = await getHideCompletedCookies()
-  const activeProject = resolveActiveProject(
-    workspace.projects,
-    // Autoconfig: prefer the bound board; ignore stale active-project cookies.
-    workspace.autoconfig ? null : savedActiveId
-  )
-  if (!activeProject) {
-    redirect("/setup")
-  }
+export function StaticBoardApp({ snapshot }: { snapshot: BoardSnapshot }) {
+  React.useMemo(() => {
+    seedBoardSnapshot(snapshot)
+    return null
+  }, [snapshot])
 
-  const params = await searchParams
-  const activeView = parseListViewMode(params.view)
+  const searchParams = useSearchParams()
+  const activeView = parseListViewMode(searchParams.get("view") ?? undefined)
   const selectedEpicId =
-    activeView === "overall" ? paramValue(params.epic) : null
+    activeView === "overall" ? searchParams.get("epic")?.trim() || null : null
   const selectedStoryId =
     activeView === "overall" && selectedEpicId
-      ? paramValue(params.story)
+      ? searchParams.get("story")?.trim() || null
       : null
-  const selectedItemId = paramValue(params.item)
+  const selectedItemId = searchParams.get("item")?.trim() || null
 
-  const list = parseEpicsForProject(activeProject)
+  const activeProject = snapshot.project
+  const list = snapshot.epics
   const epicCount = list.epics.length
   const errorCount = list.errors.length
+  const hideCompletedPrefs = snapshot.hideCompletedDefaults
+  const countableCompletions = snapshot.countableCompletions
+  const statusMetrics = snapshot.statusMetrics
+  const workItemsList = snapshot.workItemsView
 
   const selectedEpic = selectedEpicId
     ? list.epics.find((e) => e.id === selectedEpicId) ?? null
     : null
 
   const epicWorkItems =
-    activeView === "overall" && selectedEpicId != null
-      ? parseWorkItemsForEpic(
-          activeProject,
-          selectedEpicId,
-          selectedEpic?.title ?? null
-        )
+    selectedEpicId != null
+      ? snapshot.workItemsByEpic[selectedEpicId] ?? null
       : null
 
   const selectedStory =
@@ -106,32 +71,19 @@ export default async function BoardPage({ searchParams }: BoardPageProps) {
       : null
 
   const itemList =
-    activeView === "overall" &&
-    selectedEpicId != null &&
-    selectedStory != null
-      ? parseItemsForStory(activeProject, selectedEpicId, selectedStory.id)
+    selectedEpicId && selectedStory
+      ? snapshot.itemsByStory[storyKey(selectedEpicId, selectedStory.id)] ??
+        null
       : null
 
-  const workItemsList =
-    activeView === "overall" || activeView === "workitems"
-      ? parseWorkItemsViewForProject(activeProject)
-      : null
-
-  /** Match Current Speed exactly: completed task/bug leaf points only. */
-  const countableCompletions = collectCompletedLeafPointSamples(
-    collectMetricLeaves(activeProject)
-  )
-
-  const statusMetrics = computeProjectStatusMetrics(activeProject)
-
   return (
     <WorkItemSheetProvider>
       <div className="min-h-svh bg-[linear-gradient(180deg,_#fff_0%,_#f7f4ff_100%)]">
         <AppBar
-          projects={workspace.projects}
+          projects={snapshot.projects}
           activeProjectId={activeProject.id}
-          masterCount={workspace.masters.length}
-          autoconfig={workspace.autoconfig}
+          masterCount={1}
+          autoconfig={true}
         />
 
         <div className="mx-auto flex w-full max-w-5xl flex-col gap-6 px-4 py-8">
@@ -148,7 +100,7 @@ export default async function BoardPage({ searchParams }: BoardPageProps) {
                 {activeView === "overall" && errorCount > 0
                   ? ` · ${errorCount} parse issue${errorCount === 1 ? "" : "s"}`
                   : ""}
-                {activeView === "workitems" && workItemsList
+                {activeView === "workitems"
                   ? ` · ${workItemsList.rows.length} item${workItemsList.rows.length === 1 ? "" : "s"}`
                   : ""}
                 {activeView === "overall" && selectedEpic
@@ -164,9 +116,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}
@@ -203,16 +152,6 @@ export default async function BoardPage({ searchParams }: BoardPageProps) {
                       Clear selection
                     </Link>
                   </div>
-                  <p className="text-sm text-muted-foreground">
-                    {epicWorkItems.rows.length} work item
-                    {epicWorkItems.rows.length === 1 ? "" : "s"}
-                    {epicWorkItems.errors.length > 0
-                      ? ` · ${epicWorkItems.errors.length} issue${epicWorkItems.errors.length === 1 ? "" : "s"}`
-                      : ""}
-                    {!selectedStory
-                      ? " · select a story to view its sub tasks"
-                      : ""}
-                  </p>
                   <OverallWorkItemsList
                     list={epicWorkItems}
                     selectedStoryId={selectedStory?.id ?? null}
@@ -226,8 +165,7 @@ export default async function BoardPage({ searchParams }: BoardPageProps) {
                 <div className="flex flex-col gap-3">
                   <div className="flex items-baseline justify-between gap-3">
                     <h2 className="font-head text-2xl tracking-tight">
-                      Sub Tasks for{" "}
-                      {itemList.storyTitle ?? itemList.storyId}
+                      Sub Tasks for {itemList.storyTitle ?? itemList.storyId}
                     </h2>
                     <Link
                       href={boardHref({
@@ -240,13 +178,6 @@ export default async function BoardPage({ searchParams }: BoardPageProps) {
                       Clear story
                     </Link>
                   </div>
-                  <p className="text-sm text-muted-foreground">
-                    {itemList.items.length} sub task
-                    {itemList.items.length === 1 ? "" : "s"}
-                    {itemList.errors.length > 0
-                      ? ` · ${itemList.errors.length} issue${itemList.errors.length === 1 ? "" : "s"}`
-                      : ""}
-                  </p>
                   <TaskList
                     list={itemList}
                     countableCompletions={countableCompletions}
@@ -257,7 +188,7 @@ export default async function BoardPage({ searchParams }: BoardPageProps) {
             </>
           ) : null}
 
-          {activeView === "workitems" && workItemsList ? (
+          {activeView === "workitems" ? (
             <WorkItemsList
               list={workItemsList}
               countableCompletions={countableCompletions}