@taskmark/ui 0.2.6 → 0.3.1

package/README.md

@@ -19,6 +19,21 @@ cd my-app-taskmark && npx taskmark
 # or: npm i @taskmark/ui --save && npx taskmark serve
 ```
 
+> **`npx taskmark` only works where `@taskmark/ui` is installed.** `taskmark` is the
+> *bin* name, not a package name — an unrelated `taskmark` package exists on npm, and
+> npx will fetch that one instead. Use `npx @taskmark/ui` when running from a folder
+> with no local install, or install the CLI once (see below).
+
+### Install the CLI globally
+
+```bash
+npm install -g @taskmark/ui   # published release
+# from a clone of taskmark-frontend:
+npm run build && npm link      # local build on PATH as `taskmark`
+```
+
+Then `taskmark` works anywhere: setup / project picker outside a board, bound board inside one.
+
 `taskmark open` always forces the setup / picker, even when a board is nearby. Chosen master folders and the active project persist in cookies.
 
 ## Install and serve
@@ -67,7 +82,7 @@ Board resolution (bound mode only):
 | Layout | Where to install / run |
 |--------|------------------------|
 | Single-git | Product root (discovers `./taskmark/`) or the `taskmark/` folder |
-| Multi-git | Dedicated sibling `*-taskmark` repo root (`INDEX.md` at root) |
+| Multi-git | Dedicated sibling `*-taskmark` repo root (`epics/` at root) |
 
 You do **not** need to clone `taskmark-frontend`.
 

package/app/board/page.tsx

@@ -1,49 +1,7 @@
-import { Suspense } from "react"
-import Link from "next/link"
-import { redirect } from "next/navigation"
-
-import { AppBar } from "@/components/board/app-bar"
-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"
-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 { 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 {
-  parseWorkItemsForEpic,
-  parseWorkItemsViewForProject,
-} from "@/lib/taskmark/parse-flat-lists"
-import { parseItemsForStory } from "@/lib/taskmark/parse-items"
-import {
-  collectCompletedLeafPointSamples,
-  collectMetricLeaves,
-  computeProjectStatusMetrics,
-} from "@/lib/taskmark/project-metrics"
-import { isStaticRuntime } from "@/lib/taskmark/static-mode"
-import { loadWorkspace } from "@/lib/taskmark/workspace"
+import { BoardScreen } from "@/components/board/board-screen"
 
 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[]
@@ -53,234 +11,7 @@ type BoardPageProps = {
   }>
 }
 
-function paramValue(value: string | string[] | undefined): string | null {
-  if (typeof value === "string" && value.trim()) return value.trim()
-  return null
-}
-
-function headingForView(view: ListViewMode): string {
-  if (view === "overall") return "Epics"
-  return LIST_VIEW_LABELS[view]
-}
-
+/** Alias of `/` — kept so older links and bookmarks keep working. */
 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) {
-    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")
-  }
-
-  const params = await searchParams
-  const activeView = parseListViewMode(params.view)
-  const selectedEpicId =
-    activeView === "overall" ? paramValue(params.epic) : null
-  const selectedStoryId =
-    activeView === "overall" && selectedEpicId
-      ? paramValue(params.story)
-      : null
-  const selectedItemId = paramValue(params.item)
-
-  const list = parseEpicsForProject(activeProject)
-  const epicCount = list.epics.length
-  const errorCount = list.errors.length
-
-  const selectedEpic = selectedEpicId
-    ? list.epics.find((e) => e.id === selectedEpicId) ?? null
-    : null
-
-  const epicWorkItems =
-    activeView === "overall" && selectedEpicId != null
-      ? parseWorkItemsForEpic(
-          activeProject,
-          selectedEpicId,
-          selectedEpic?.title ?? null
-        )
-      : null
-
-  const selectedStory =
-    epicWorkItems && selectedStoryId
-      ? (epicWorkItems.rows.find(
-          (row) => row.kind === "story" && row.id === selectedStoryId
-        ) ?? null)
-      : null
-
-  const itemList =
-    activeView === "overall" &&
-    selectedEpicId != null &&
-    selectedStory != null
-      ? parseItemsForStory(activeProject, selectedEpicId, selectedStory.id)
-      : 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}
-          activeProjectId={activeProject.id}
-          autoconfig={workspace.autoconfig}
-        />
-
-        <div className="mx-auto flex w-full max-w-5xl flex-col gap-6 px-4 py-8">
-          <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
-            <div>
-              <h1 className="font-head text-3xl tracking-tight">
-                {headingForView(activeView)}
-              </h1>
-              <p className="mt-1 text-sm text-muted-foreground">
-                {activeProject.name}
-                {activeView === "overall"
-                  ? ` · ${epicCount} epic${epicCount === 1 ? "" : "s"}`
-                  : ""}
-                {activeView === "overall" && errorCount > 0
-                  ? ` · ${errorCount} parse issue${errorCount === 1 ? "" : "s"}`
-                  : ""}
-                {activeView === "workitems" && workItemsList
-                  ? ` · ${workItemsList.rows.length} item${workItemsList.rows.length === 1 ? "" : "s"}`
-                  : ""}
-                {activeView === "overall" && selectedEpic
-                  ? ` · selected ${selectedEpic.id}`
-                  : activeView === "overall" && selectedEpicId
-                    ? ` · epic ${selectedEpicId} not in list`
-                    : activeView === "overall"
-                      ? " · select an epic to view work items"
-                      : ""}
-                {activeView === "overall" && selectedStory
-                  ? ` · story ${selectedStory.id}`
-                  : activeView === "overall" && selectedStoryId
-                    ? ` · story ${selectedStoryId} not in list`
-                    : ""}
-              </p>
-            </div>
-            <ListViewSwitcher
-              activeView={activeView}
-              selectedEpicId={selectedEpicId}
-              selectedStoryId={selectedStory?.id ?? null}
-            />
-          </div>
-
-          <ProjectStatusMetricsStrip metrics={statusMetrics} />
-
-          {activeView === "overall" ? (
-            <>
-              <EpicList
-                lists={[list]}
-                selectedEpicId={selectedEpicId}
-                countableCompletions={countableCompletions}
-                initialHideCompleted={hideCompletedPrefs.epics}
-              />
-
-              {epicWorkItems ? (
-                <div className="flex flex-col gap-3">
-                  <div className="flex items-baseline justify-between gap-3">
-                    <h2 className="font-head text-2xl tracking-tight">
-                      Work items for{" "}
-                      {epicWorkItems.epicTitle ?? epicWorkItems.epicId}
-                    </h2>
-                    <Link
-                      href={boardHref({
-                        view: "overall",
-                        item: selectedItemId,
-                      })}
-                      className="text-sm text-muted-foreground underline-offset-2 hover:underline"
-                    >
-                      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}
-                    countableCompletions={countableCompletions}
-                    initialHideCompleted={hideCompletedPrefs.overallWorkItems}
-                  />
-                </div>
-              ) : null}
-
-              {itemList && selectedStory ? (
-                <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}
-                    </h2>
-                    <Link
-                      href={boardHref({
-                        view: "overall",
-                        epic: itemList.epicId,
-                        item: selectedItemId,
-                      })}
-                      className="text-sm text-muted-foreground underline-offset-2 hover:underline"
-                    >
-                      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}
-                    initialHideCompleted={hideCompletedPrefs.tasks}
-                  />
-                </div>
-              ) : null}
-            </>
-          ) : null}
-
-          {activeView === "workitems" && workItemsList ? (
-            <WorkItemsList
-              list={workItemsList}
-              countableCompletions={countableCompletions}
-              initialHideCompleted={hideCompletedPrefs.workItems}
-            />
-          ) : null}
-        </div>
-      </div>
-    </WorkItemSheetProvider>
-  )
+  return <BoardScreen searchParams={searchParams} />
 }

package/app/globals.css

@@ -94,6 +94,14 @@
   --shadow-lg: 9px 9px 0 0 var(--shadow-color);
   --shadow-xl: 14px 14px 0 1px var(--shadow-color);
   --shadow-2xl: 20px 20px 0 2px var(--shadow-color);
+  --surface-gradient: linear-gradient(180deg, #ffffff 0%, #f7f4ff 100%);
+  --surface-glow: radial-gradient(ellipse at top, #eadffe 0%, transparent 55%);
+}
+
+@layer base {
+  body {
+    @apply bg-background text-foreground;
+  }
 }
 
 /* Markdown body: reset outer margins without Tailwind arbitrary :first-child variants
@@ -105,6 +113,21 @@
   margin-bottom: 0;
 }
 
+.tm-mermaid svg {
+  max-width: 100%;
+  height: auto;
+}
+
+/* Page surfaces follow the theme tokens instead of a light-only gradient. */
+.tm-surface {
+  background-color: var(--background);
+  background-image: var(--surface-gradient);
+}
+
+.tm-surface-glow {
+  background-image: var(--surface-glow), var(--surface-gradient);
+}
+
 .dark {
   --background: #0f0f0f;
   --foreground: #fafafa;
@@ -134,6 +157,8 @@
   --chart-5: #7b6df5;
   --radius: 0.25rem;
   --border-w: 2px;
+  --surface-gradient: linear-gradient(180deg, #0f0f0f 0%, #171325 100%);
+  --surface-glow: radial-gradient(ellipse at top, #2f2542 0%, transparent 55%);
   --shadow-xs: 2px 2px 0 0 var(--shadow-color);
   --shadow-sm: 3px 3px 0 0 var(--shadow-color);
   --shadow: 5px 5px 0 0 var(--shadow-color);

package/app/layout.tsx

@@ -1,8 +1,11 @@
 import type { Metadata, Viewport } from "next"
 import { Archivo_Black, Space_Grotesk } from "next/font/google"
+import Script from "next/script"
 import { BoardDevReloader } from "@/components/board/board-dev-reloader"
+import { ThemeProvider } from "@/components/theme-provider"
 import { Toaster } from "@/components/ui/sonner"
 import { SITE } from "@/lib/site"
+import { THEME_INIT_SCRIPT } from "@/lib/theme-cookie"
 import "./globals.css"
 
 const archivoBlack = Archivo_Black({
@@ -19,7 +22,7 @@ const spaceGrotesk = Space_Grotesk({
 })
 
 const siteDescription =
-  "Taskmark — product memory for agent work. Local markdown boards for Cursor with sizing, work logs, and velocity."
+  "Taskmark — product memory for agent work. Local markdown boards for Cursor with static sizing and work logs."
 
 export const viewport: Viewport = {
   themeColor: "#111111",
@@ -76,13 +79,20 @@ export default function RootLayout({
   children: React.ReactNode
 }) {
   return (
-    <html lang="en">
+    <html lang="en" suppressHydrationWarning>
       <body
         className={`${archivoBlack.variable} ${spaceGrotesk.variable} font-sans antialiased`}
       >
-        <Toaster />
-        <BoardDevReloader />
-        {children}
+        <Script
+          id="taskmark-theme-init"
+          strategy="beforeInteractive"
+          dangerouslySetInnerHTML={{ __html: THEME_INIT_SCRIPT }}
+        />
+        <ThemeProvider>
+          <Toaster />
+          <BoardDevReloader />
+          {children}
+        </ThemeProvider>
       </body>
     </html>
   )

package/app/page.tsx

@@ -1,17 +1,17 @@
-import { redirect } from "next/navigation"
+import { BoardScreen } from "@/components/board/board-screen"
 
-import { getMasterFoldersCookie } from "@/lib/taskmark/cookies"
-import { isStaticRuntime } from "@/lib/taskmark/static-mode"
-import { loadWorkspace } from "@/lib/taskmark/workspace"
+export const dynamic = "force-dynamic"
 
-export default async function HomePage() {
-  if (isStaticRuntime()) {
-    redirect("/board")
-  }
-  const masters = await getMasterFoldersCookie()
-  const workspace = loadWorkspace(masters)
-  if (workspace.projects.length > 0) {
-    redirect("/board")
-  }
-  redirect("/setup")
+type HomePageProps = {
+  searchParams: Promise<{
+    view?: string | string[]
+    epic?: string | string[]
+    story?: string | string[]
+    item?: string | string[]
+  }>
+}
+
+/** The board is the default view; BoardScreen sends unbound setups to /setup. */
+export default async function HomePage({ searchParams }: HomePageProps) {
+  return <BoardScreen searchParams={searchParams} />
 }

package/app/setup/actions.ts

@@ -64,7 +64,7 @@ export async function saveMasterFolder(
     await setActiveProjectCookie(preferred.id)
   }
 
-  redirect("/board")
+  redirect("/")
 }
 
 export type PickMasterFolderState = {
@@ -89,7 +89,7 @@ export async function openAddProject(): Promise<void> {
     "@/lib/taskmark/autoconfig"
   )
   if (resolveAutoconfigWorkspace()?.projects.length) {
-    redirect("/board")
+    redirect("/")
   }
   redirect("/setup?mode=add")
 }
@@ -100,8 +100,8 @@ export async function selectActiveProject(formData: FormData): Promise<void> {
     return
   }
   await setActiveProjectCookie(projectId)
-  revalidatePath("/board")
-  redirect("/board")
+  revalidatePath("/")
+  redirect("/")
 }
 
 /** Optional: clear everything and start over (not shown in app bar by default). */

package/app/setup/page.tsx

@@ -12,15 +12,20 @@ type SetupPageProps = {
   searchParams?: Promise<{ mode?: string }>
 }
 
+// Depends on runtime env (workspace vs bound) and cookies — never prerender in
+// server mode, or a build-time redirect gets baked in and loops against `/`.
+// The static build rewrites this to force-static (see scripts/build-static.mjs).
+export const dynamic = "force-dynamic"
+
 export default async function SetupPage({ searchParams }: SetupPageProps) {
   if (isStaticRuntime()) {
-    redirect("/board")
+    redirect("/")
   }
 
   const auto = resolveAutoconfigWorkspace()
   if (auto && auto.projects.length > 0) {
     // Zero-config bind — setup wizard is not needed.
-    redirect("/board")
+    redirect("/")
   }
 
   const params = searchParams ? await searchParams : {}
@@ -34,7 +39,7 @@ export default async function SetupPage({ searchParams }: SetupPageProps) {
     <div className="relative flex min-h-svh flex-col items-center justify-center px-4 py-16">
       <div
         aria-hidden
-        className="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_at_top,_#eadffe_0%,_transparent_55%),_linear-gradient(180deg,_#fff_0%,_#f7f4ff_100%)]"
+        className="tm-surface-glow pointer-events-none absolute inset-0"
       />
       <div className="relative z-10 flex w-full max-w-xl flex-col items-center gap-8">
         <div className="flex flex-col items-center text-center">
@@ -59,7 +64,7 @@ export default async function SetupPage({ searchParams }: SetupPageProps) {
         />
         {adding ? (
           <p className="text-sm text-muted-foreground">
-            <Link href="/board" className="underline underline-offset-2">
+            <Link href="/" className="underline underline-offset-2">
               Cancel and return to board
             </Link>
           </p>

package/bin/lib/resolve-board.mjs

@@ -2,10 +2,7 @@ import fs from "node:fs"
 import path from "node:path"
 
 function hasBoardMarkers(boardPath) {
-  return (
-    fs.existsSync(path.join(boardPath, "INDEX.md")) ||
-    fs.existsSync(path.join(boardPath, "epics"))
-  )
+  return fs.existsSync(path.join(boardPath, "epics"))
 }
 
 function isDedicatedBoardRepoName(name) {

package/bin/taskmark.js

@@ -139,6 +139,19 @@ function resolveNextBin() {
   }
 }
 
+/**
+ * A `taskmark build` writes an `output: export` build. It has a server/ dir but
+ * serves prerendered HTML with the static runtime baked in, so `serve` must not
+ * reuse it.
+ */
+function isStaticExportBuild(dir) {
+  return fs.existsSync(path.join(dir, "export-detail.json"))
+}
+
+function hasServerBuild(dir) {
+  return fs.existsSync(path.join(dir, "server")) && !isStaticExportBuild(dir)
+}
+
 /**
  * Ensure packageRoot/.next points at a usable production build.
  * Published packages ship dist/prod-next (npm cannot pack nested node_modules
@@ -147,8 +160,8 @@ function resolveNextBin() {
 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"))
+  const hasLocalServer = hasServerBuild(nextDir)
+  const hasShippedServer = hasServerBuild(shipped)
 
   if (hasLocalServer) return nextDir
   if (!hasShippedServer) {

package/components/board/app-bar.tsx

@@ -2,6 +2,7 @@
 
 import { selectActiveProject, openAddProject } from "@/app/setup/actions"
 import { BrandLogo } from "@/components/brand-logo"
+import { ThemeToggle } from "@/components/theme-toggle"
 import { Button } from "@/components/ui/button"
 import { projectOptionLabel } from "@/lib/taskmark/project-label"
 import type { DiscoveredProject } from "@/lib/taskmark/types"
@@ -90,6 +91,8 @@ export function AppBar({
             </Button>
           </form>
         ) : null}
+
+        <ThemeToggle />
       </div>
     </header>
   )