@prmichaelsen/acp-visualizer 0.6.1 → 0.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prmichaelsen/acp-visualizer",
-  "version": "0.6.1",
+  "version": "0.7.0",
   "type": "module",
   "description": "Browser-based dashboard for visualizing ACP progress.yaml data",
   "bin": {

package/src/components/MarkdownContent.tsx

@@ -1,12 +1,73 @@
 import ReactMarkdown from 'react-markdown'
 import rehypeHighlight from 'rehype-highlight'
+import { Link } from '@tanstack/react-router'
+import type { ProgressData } from '../lib/types'
 
 interface MarkdownContentProps {
   content: string
   className?: string
+  basePath?: string
+  linkMap?: Record<string, string>
 }
 
-export function MarkdownContent({ content, className }: MarkdownContentProps) {
+/**
+ * Resolve a relative path against a base file path.
+ * e.g. resolvePath("agent/milestones/milestone-3.md", "../tasks/task-11.md")
+ *   → "agent/tasks/task-11.md"
+ */
+export function resolvePath(base: string, relative: string): string {
+  const dir = base.split('/').slice(0, -1)
+  const relParts = relative.split('/')
+  const result = [...dir]
+  for (const part of relParts) {
+    if (part === '..') result.pop()
+    else if (part !== '.') result.push(part)
+  }
+  return result.join('/')
+}
+
+/**
+ * Build a map from file paths to visualizer routes.
+ */
+export function buildLinkMap(data: ProgressData): Record<string, string> {
+  const map: Record<string, string> = {}
+  for (const ms of data.milestones) {
+    for (const task of data.tasks[ms.id] || []) {
+      if (task.file) {
+        map[task.file] = `/tasks/${task.id}`
+      }
+    }
+  }
+  return map
+}
+
+function createMarkdownLink(basePath: string, linkMap: Record<string, string>) {
+  return function MarkdownLink({
+    href,
+    children,
+    ...props
+  }: React.AnchorHTMLAttributes<HTMLAnchorElement>) {
+    if (href && !href.startsWith('http') && !href.startsWith('#')) {
+      const resolved = resolvePath(basePath, href)
+      const route = linkMap[resolved]
+      if (route) {
+        return <Link to={route}>{children}</Link>
+      }
+    }
+    return (
+      <a href={href} {...props}>
+        {children}
+      </a>
+    )
+  }
+}
+
+export function MarkdownContent({ content, className, basePath, linkMap }: MarkdownContentProps) {
+  const components =
+    basePath && linkMap
+      ? { a: createMarkdownLink(basePath, linkMap) }
+      : undefined
+
   return (
     <div
       className={`prose prose-invert prose-sm max-w-none
@@ -22,7 +83,7 @@ export function MarkdownContent({ content, className }: MarkdownContentProps) {
         prose-blockquote:border-gray-700 prose-blockquote:text-gray-400
         ${className ?? ''}`}
     >
-      <ReactMarkdown rehypePlugins={[rehypeHighlight]}>
+      <ReactMarkdown rehypePlugins={[rehypeHighlight]} components={components}>
         {content}
       </ReactMarkdown>
     </div>

package/src/routes/milestones.$milestoneId.tsx

@@ -1,11 +1,11 @@
 import { createFileRoute, Link } from '@tanstack/react-router'
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useMemo } from 'react'
 import { useProgressData } from '../contexts/ProgressContext'
 import { Breadcrumb } from '../components/Breadcrumb'
 import { DetailHeader } from '../components/DetailHeader'
 import { ProgressBar } from '../components/ProgressBar'
 import { StatusDot } from '../components/StatusDot'
-import { MarkdownContent } from '../components/MarkdownContent'
+import { MarkdownContent, buildLinkMap } from '../components/MarkdownContent'
 import { getMarkdownContent, resolveMilestoneFile } from '../services/markdown.service'
 import type { MarkdownResult, ResolveFileResult } from '../services/markdown.service'
 
@@ -29,10 +29,12 @@ function MilestoneDetailPage() {
   const data = useProgressData()
   const [markdown, setMarkdown] = useState<string | null>(null)
   const [markdownError, setMarkdownError] = useState<string | null>(null)
+  const [markdownFilePath, setMarkdownFilePath] = useState<string | null>(null)
   const [loading, setLoading] = useState(true)
 
   const milestone = data?.milestones.find((m) => m.id === milestoneId)
   const tasks = data?.tasks[milestoneId] || []
+  const linkMap = useMemo(() => (data ? buildLinkMap(data) : {}), [data])
 
   useEffect(() => {
     if (!milestoneId) return
@@ -40,6 +42,7 @@ function MilestoneDetailPage() {
     setLoading(true)
     setMarkdown(null)
     setMarkdownError(null)
+    setMarkdownFilePath(null)
 
     const github = getGitHubParams()
 
@@ -51,6 +54,7 @@ function MilestoneDetailPage() {
           return
         }
 
+        setMarkdownFilePath(resolveResult.filePath)
         return getMarkdownContent({ data: { filePath: resolveResult.filePath, github } })
           .then((mdResult: MarkdownResult) => {
             if (mdResult.ok) {
@@ -111,7 +115,7 @@ function MilestoneDetailPage() {
       {loading ? (
         <p className="text-sm text-gray-600">Loading document...</p>
       ) : markdown ? (
-        <MarkdownContent content={markdown} />
+        <MarkdownContent content={markdown} basePath={markdownFilePath ?? undefined} linkMap={linkMap} />
       ) : markdownError ? (
         <div className="bg-gray-900/50 border border-gray-800 rounded-xl p-4 text-sm text-gray-500">
           No document found — {markdownError}

package/src/routes/tasks.$taskId.tsx

@@ -3,7 +3,7 @@ import { useState, useEffect, useMemo } from 'react'
 import { useProgressData } from '../contexts/ProgressContext'
 import { Breadcrumb } from '../components/Breadcrumb'
 import { DetailHeader } from '../components/DetailHeader'
-import { MarkdownContent } from '../components/MarkdownContent'
+import { MarkdownContent, buildLinkMap } from '../components/MarkdownContent'
 import { getMarkdownContent } from '../services/markdown.service'
 import { resolveTaskFile } from '../services/markdown.service'
 import type { MarkdownResult } from '../services/markdown.service'
@@ -83,6 +83,9 @@ function TaskDetailPage() {
       })
   }, [task])
 
+  const linkMap = useMemo(() => (data ? buildLinkMap(data) : {}), [data])
+  const taskFilePath = useMemo(() => resolveTaskFile(task), [task])
+
   if (!data || !task || !milestone) {
     return (
       <div className="p-6">
@@ -130,7 +133,7 @@ function TaskDetailPage() {
       {loading ? (
         <p className="text-sm text-gray-600">Loading document...</p>
       ) : markdown ? (
-        <MarkdownContent content={markdown} />
+        <MarkdownContent content={markdown} basePath={taskFilePath ?? undefined} linkMap={linkMap} />
       ) : markdownError ? (
         <div className="bg-gray-900/50 border border-gray-800 rounded-xl p-4 text-sm text-gray-500">
           No document found — {markdownError}