@taskmark/ui 0.2.6 → 0.3.1

package/components/board/board-screen.tsx

@@ -0,0 +1,229 @@
+import { Suspense } from "react"
+import { redirect } from "next/navigation"
+
+import { AppBar } from "@/components/board/app-bar"
+import { ChangelogPanel } from "@/components/board/changelog-panel"
+import { ListViewSwitcher } from "@/components/board/list-view-switcher"
+import { OverallTreeList } from "@/components/board/overall-tree-list"
+import { PointsHeatmap } from "@/components/board/points-heatmap"
+import { ProjectStatusMetricsStrip } from "@/components/board/project-status-metrics-strip"
+import { StaticBoardApp } from "@/components/board/static-board-app"
+import { WorkItemsList } from "@/components/board/work-items-list"
+import { WorkItemSheetProvider } from "@/components/board/work-item-sheet"
+import { resolveActiveProject } from "@/lib/taskmark/active-project"
+import { buildBoardIndex } from "@/lib/taskmark/board-index"
+import {
+  getActiveProjectCookie,
+  getHideCompletedCookies,
+  getMasterFoldersCookie,
+} from "@/lib/taskmark/cookies"
+import {
+  LIST_VIEW_LABELS,
+  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 { loadBoardChangelogMarkdown } from "@/lib/taskmark/load-changelog"
+import { parseItemsForStory } from "@/lib/taskmark/parse-items"
+import { storyKey } from "@/lib/taskmark/snapshot-types"
+import {
+  collectCompletedLeafPointSamples,
+  collectMetricLeaves,
+  computeProjectStatusMetrics,
+} from "@/lib/taskmark/project-metrics"
+import { isStaticRuntime } from "@/lib/taskmark/static-mode"
+import { loadWorkspace } from "@/lib/taskmark/workspace"
+
+// Keep this import so `taskmark dev` can touch the token module and refresh RSC.
+void DEV_RELOAD_TOKEN
+
+type BoardScreenProps = {
+  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
+}
+
+function headingForView(view: ListViewMode): string {
+  if (view === "overall") return "Overall"
+  return LIST_VIEW_LABELS[view]
+}
+
+export async function BoardScreen({ searchParams }: BoardScreenProps) {
+  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 boardIndex = buildBoardIndex(activeProject.boardPath)
+  const changelogMarkdown = loadBoardChangelogMarkdown(activeProject.boardPath)
+  const hasChangelog = changelogMarkdown != null
+  const activeView = parseListViewMode(params.view, { hasChangelog })
+  const selectedEpicId =
+    activeView === "overall" ? paramValue(params.epic) : null
+  const selectedStoryId =
+    activeView === "overall" && selectedEpicId
+      ? paramValue(params.story)
+      : null
+  const list = parseEpicsForProject(activeProject, boardIndex)
+  const epicCount = list.epics.length
+  const errorCount = list.errors.length
+
+  const selectedEpic = selectedEpicId
+    ? list.epics.find((e) => e.id === selectedEpicId) ?? null
+    : null
+
+  const workItemsByEpic: Record<
+    string,
+    ReturnType<typeof parseWorkItemsForEpic>
+  > = {}
+  const itemsByStory: Record<string, ReturnType<typeof parseItemsForStory>> = {}
+  if (activeView === "overall") {
+    for (const epic of list.epics) {
+      const epicItems = parseWorkItemsForEpic(
+        activeProject,
+        epic.id,
+        epic.title,
+        boardIndex
+      )
+      workItemsByEpic[epic.id] = epicItems
+      for (const row of epicItems.rows) {
+        if (row.kind !== "story") continue
+        itemsByStory[storyKey(epic.id, row.id)] = parseItemsForStory(
+          activeProject,
+          epic.id,
+          row.id,
+          boardIndex
+        )
+      }
+    }
+  }
+
+  const workItemsList =
+    activeView === "workitems"
+      ? parseWorkItemsViewForProject(activeProject, boardIndex)
+      : null
+
+  const metricLeaves = collectMetricLeaves(activeProject, boardIndex)
+  /** Match Current Speed exactly: completed task/bug leaf points only. */
+  const countableCompletions =
+    collectCompletedLeafPointSamples(metricLeaves)
+  const statusMetrics = computeProjectStatusMetrics(
+    activeProject,
+    boardIndex,
+    metricLeaves
+  )
+
+  return (
+    <WorkItemSheetProvider>
+      <div className="tm-surface min-h-svh">
+        <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
+                  ? ` · expanded ${selectedEpic.id}`
+                  : activeView === "overall" && selectedEpicId
+                    ? ` · epic ${selectedEpicId} not in list`
+                    : ""}
+                {activeView === "overall" && selectedStoryId
+                  ? ` · story ${selectedStoryId}`
+                  : ""}
+              </p>
+            </div>
+            <ListViewSwitcher
+              activeView={activeView}
+              selectedEpicId={selectedEpicId}
+              selectedStoryId={selectedStoryId}
+              hasChangelog={hasChangelog}
+            />
+          </div>
+
+          <ProjectStatusMetricsStrip metrics={statusMetrics} />
+
+          {activeView === "overall" ? (
+            <>
+              <PointsHeatmap samples={countableCompletions} />
+              <OverallTreeList
+                list={list}
+                workItemsByEpic={workItemsByEpic}
+                itemsByStory={itemsByStory}
+                selectedEpicId={selectedEpicId}
+                selectedStoryId={selectedStoryId}
+                countableCompletions={countableCompletions}
+                initialHideCompleted={hideCompletedPrefs.epics}
+              />
+            </>
+          ) : null}
+
+          {activeView === "workitems" && workItemsList ? (
+            <WorkItemsList
+              list={workItemsList}
+              countableCompletions={countableCompletions}
+              initialHideCompleted={hideCompletedPrefs.workItems}
+            />
+          ) : null}
+
+          {activeView === "changelog" && changelogMarkdown ? (
+            <ChangelogPanel markdown={changelogMarkdown} />
+          ) : null}
+        </div>
+      </div>
+    </WorkItemSheetProvider>
+  )
+}

package/components/board/changelog-panel.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+import { MarkdownContent } from "@/components/board/markdown-content"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card"
+
+export function ChangelogPanel({ markdown }: { markdown: string }) {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="font-head text-xl">Changelog</CardTitle>
+        <CardDescription>
+          Board-root CHANGELOG.md (Keep a Changelog)
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <MarkdownContent text={markdown} />
+      </CardContent>
+    </Card>
+  )
+}

package/components/board/epic-list.tsx

@@ -26,6 +26,7 @@ import { ChildProgressBar } from "@/components/board/child-progress-bar"
 import { ListFiltersBar } from "@/components/board/list-filters-bar"
 import { ListPagination } from "@/components/board/list-pagination"
 import { SortableTableHead } from "@/components/board/sortable-table-head"
+import { statusRowClass } from "@/components/board/status-badge"
 import { TimeframeFilter } from "@/components/board/timeframe-filter"
 import { ViewWorkItemButton } from "@/components/board/work-item-sheet"
 import { AttributionAvatarGroup } from "@/components/board/attribution-avatars"
@@ -246,6 +247,7 @@ function ProjectEpicCard({
                           key={`${project.id}:${epic.id}:${epic.filePath}`}
                           data-state={selected ? "selected" : undefined}
                           className={cn(
+                            statusRowClass(epic.status),
                             selected && "bg-muted/60",
                             "hover:bg-muted/40"
                           )}
@@ -263,7 +265,7 @@ function ProjectEpicCard({
                           <TableCell className="font-mono text-xs">
                             <IdCreatedTooltip id={epic.id} created={epic.created}>
                               <Link
-                                href={`/board?epic=${encodeURIComponent(epic.id)}`}
+                                href={`/?epic=${encodeURIComponent(epic.id)}`}
                                 className="underline-offset-2 hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
                                 aria-current={selected ? "true" : undefined}
                               >
@@ -273,7 +275,7 @@ function ProjectEpicCard({
                           </TableCell>
                           <TableCell className="max-w-[18rem] whitespace-normal font-medium">
                             <Link
-                              href={`/board?epic=${encodeURIComponent(epic.id)}`}
+                              href={`/?epic=${encodeURIComponent(epic.id)}`}
                               className="underline-offset-2 hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
                             >
                               {epic.title}

package/components/board/list-view-switcher.tsx

@@ -6,8 +6,8 @@ import { useRouter, useSearchParams } from "next/navigation"
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
 import {
   LIST_VIEW_LABELS,
-  LIST_VIEW_MODES,
   boardHref,
+  listViewModes,
   type ListViewMode,
 } from "@/lib/taskmark/list-view-mode"
 
@@ -15,16 +15,19 @@ type ListViewSwitcherProps = {
   activeView: ListViewMode
   selectedEpicId?: string | null
   selectedStoryId?: string | null
+  hasChangelog?: boolean
 }
 
 function ListViewSwitcherInner({
   activeView,
   selectedEpicId = null,
   selectedStoryId = null,
+  hasChangelog = false,
 }: ListViewSwitcherProps) {
   const router = useRouter()
   const searchParams = useSearchParams()
   const itemId = searchParams.get("item")
+  const modes = listViewModes(hasChangelog)
 
   return (
     <Tabs
@@ -43,7 +46,7 @@ function ListViewSwitcherInner({
       }}
     >
       <TabsList aria-label="Board list view">
-        {LIST_VIEW_MODES.map((mode) => (
+        {modes.map((mode) => (
           <TabsTrigger key={mode} value={mode}>
             {LIST_VIEW_LABELS[mode]}
           </TabsTrigger>
@@ -54,12 +57,13 @@ function ListViewSwitcherInner({
 }
 
 export function ListViewSwitcher(props: ListViewSwitcherProps) {
+  const modes = listViewModes(props.hasChangelog ?? false)
   return (
     <React.Suspense
       fallback={
         <Tabs value={props.activeView}>
           <TabsList aria-label="Board list view">
-            {LIST_VIEW_MODES.map((mode) => (
+            {modes.map((mode) => (
               <TabsTrigger key={mode} value={mode} disabled>
                 {LIST_VIEW_LABELS[mode]}
               </TabsTrigger>

package/components/board/markdown-content.tsx

@@ -1,10 +1,22 @@
 "use client"
 
+import { isValidElement, type ReactNode } from "react"
 import ReactMarkdown from "react-markdown"
 import remarkGfm from "remark-gfm"
 
+import { MermaidDiagram } from "@/components/board/mermaid-diagram"
 import { cn } from "@/lib/utils"
 
+function mermaidSourceFromPreChildren(children: ReactNode): string | null {
+  const child = Array.isArray(children) ? children[0] : children
+  if (!isValidElement<{ className?: string; children?: ReactNode }>(child)) {
+    return null
+  }
+  const className = child.props.className ?? ""
+  if (!className.includes("language-mermaid")) return null
+  return String(child.props.children ?? "").replace(/\n$/, "")
+}
+
 type MarkdownContentProps = {
   text: string
   className?: string
@@ -71,7 +83,15 @@ export function MarkdownContent({
               ol: ({ children }) => <span>{children}</span>,
               li: ({ children }) => <span>{children} </span>,
             }
-          : undefined
+          : {
+              pre({ children }) {
+                const mermaidSource = mermaidSourceFromPreChildren(children)
+                if (mermaidSource !== null) {
+                  return <MermaidDiagram chart={mermaidSource} />
+                }
+                return <pre>{children}</pre>
+              },
+            }
       }
     >
       {trimmed}

package/components/board/mermaid-diagram.tsx

@@ -0,0 +1,88 @@
+"use client"
+
+import { useEffect, useId, useState } from "react"
+
+function pageIsDark(): boolean {
+  if (typeof document === "undefined") return false
+  return Boolean(
+    document.documentElement.classList.contains("dark") ||
+      document.body.classList.contains("dark")
+  )
+}
+
+export function MermaidDiagram({ chart }: { chart: string }) {
+  const reactId = useId().replace(/:/g, "")
+  const [dark, setDark] = useState(false)
+  const [svg, setSvg] = useState<string | null>(null)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    const syncDark = () => setDark(pageIsDark())
+    syncDark()
+    const observer = new MutationObserver(syncDark)
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class"],
+    })
+    observer.observe(document.body, {
+      attributes: true,
+      attributeFilter: ["class"],
+    })
+    return () => observer.disconnect()
+  }, [])
+
+  useEffect(() => {
+    let cancelled = false
+
+    async function renderChart() {
+      try {
+        const mermaid = (await import("mermaid")).default
+        mermaid.initialize({
+          startOnLoad: false,
+          securityLevel: "strict",
+          theme: dark ? "dark" : "neutral",
+        })
+        const { svg: rendered } = await mermaid.render(
+          `tm-mermaid-${reactId}-${dark ? "d" : "l"}`,
+          chart
+        )
+        if (!cancelled) {
+          setSvg(rendered)
+          setError(null)
+        }
+      } catch (cause) {
+        if (!cancelled) {
+          setSvg(null)
+          setError(
+            cause instanceof Error ? cause.message : "Could not render diagram"
+          )
+        }
+      }
+    }
+
+    void renderChart()
+    return () => {
+      cancelled = true
+    }
+  }, [chart, reactId, dark])
+
+  if (error) {
+    return (
+      <div className="my-2 rounded border-2 border-border bg-muted p-3">
+        <p className="text-xs text-destructive">{error}</p>
+        <pre className="mt-2 overflow-x-auto font-mono text-xs">{chart}</pre>
+      </div>
+    )
+  }
+
+  if (!svg) {
+    return <p className="text-sm text-muted-foreground">Rendering diagram…</p>
+  }
+
+  return (
+    <div
+      className="tm-mermaid my-2 max-w-full overflow-x-auto"
+      dangerouslySetInnerHTML={{ __html: svg }}
+    />
+  )
+}

package/components/board/metric-stat-card.tsx

@@ -26,15 +26,15 @@ export function MetricStatCard({
   return (
     <div
       className={cn(
-        "flex min-h-[7.5rem] flex-col justify-between gap-3 border-2 border-black bg-white p-4 shadow-none",
+        "flex min-h-[7.5rem] flex-col justify-between gap-3 border-2 border-black bg-card p-4 shadow-none",
         className
       )}
     >
       <div className="flex items-start justify-between gap-3">
-        <p className="text-sm font-medium text-neutral-800">{title}</p>
+        <p className="text-sm font-medium text-card-foreground">{title}</p>
         <div
           className={cn(
-            "flex size-9 shrink-0 items-center justify-center border-2 border-black text-black shadow-[3px_3px_0_0_#000]",
+            "flex size-9 shrink-0 items-center justify-center border-2 border-black text-black shadow-[3px_3px_0_0_var(--shadow-color)]",
             accentClassName
           )}
           aria-hidden
@@ -43,7 +43,7 @@ export function MetricStatCard({
         </div>
       </div>
       <div className="flex flex-col gap-1">
-        <p className="font-head text-3xl font-bold leading-none tracking-tight text-black tabular-nums sm:text-4xl">
+        <p className="font-head text-3xl font-bold leading-none tracking-tight text-card-foreground tabular-nums sm:text-4xl">
           {value}
         </p>
         {subtitle ? (