@prmichaelsen/acp-visualizer 0.8.2 → 0.9.1

package/package.json

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

package/src/components/DependencyGraph.tsx

@@ -1,5 +1,6 @@
 import { useMemo } from 'react'
 import dagre from 'dagre'
+import { formatTaskName, formatMilestoneName } from '../lib/display'
 import type { ProgressData, Task, Status } from '../lib/types'
 
 interface DependencyGraphProps {
@@ -43,7 +44,7 @@ function buildGraph(data: ProgressData): { nodes: GraphNode[]; edges: GraphEdge[
   for (const milestone of data.milestones) {
     const tasks = data.tasks[milestone.id] || []
     for (const task of tasks) {
-      allTasks.push({ ...task, milestoneName: milestone.name })
+      allTasks.push({ ...task, milestoneName: formatMilestoneName(milestone) })
     }
   }
 
@@ -80,7 +81,7 @@ function buildGraph(data: ProgressData): { nodes: GraphNode[]; edges: GraphEdge[
     const node = g.node(String(task.id))
     return {
       id: String(task.id),
-      label: task.name,
+      label: formatTaskName(task),
       status: task.status,
       milestone: task.milestoneName,
       x: node.x,

package/src/components/Header.tsx

@@ -1,5 +1,7 @@
+import { Moon, Sun } from 'lucide-react'
 import { StatusBadge } from './StatusBadge'
 import { ProgressBar } from './ProgressBar'
+import { useTheme } from '../lib/useTheme'
 import type { ProgressData } from '../lib/types'
 
 interface HeaderProps {
@@ -7,16 +9,31 @@ interface HeaderProps {
 }
 
 export function Header({ data }: HeaderProps) {
+  const { theme, toggleTheme } = useTheme()
+
   if (!data) return null
 
   return (
-    <header className="h-14 border-b border-gray-800 flex items-center px-6 gap-4 shrink-0">
-      <h1 className="text-sm font-medium text-gray-200">{data.project.name}</h1>
-      <span className="text-xs text-gray-500 font-mono">v{data.project.version}</span>
+    <header className="h-14 border-b border-gray-200 dark:border-gray-800 flex items-center px-6 gap-4 shrink-0 bg-white dark:bg-gray-950">
+      <h1 className="text-sm font-medium text-gray-900 dark:text-gray-200">{data.project.name}</h1>
+      <span className="text-xs text-gray-500 dark:text-gray-500 font-mono">v{data.project.version}</span>
       <StatusBadge status={data.project.status} />
-      <div className="ml-auto flex items-center gap-3 w-48">
-        <ProgressBar value={data.progress.overall} size="sm" />
-        <span className="text-xs text-gray-400 font-mono">{data.progress.overall}%</span>
+      <div className="ml-auto flex items-center gap-4">
+        <div className="flex items-center gap-3 w-48">
+          <ProgressBar value={data.progress.overall} size="sm" />
+          <span className="text-xs text-gray-600 dark:text-gray-400 font-mono">{data.progress.overall}%</span>
+        </div>
+        <button
+          onClick={toggleTheme}
+          className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+          aria-label="Toggle theme"
+        >
+          {theme === 'dark' ? (
+            <Moon className="w-4 h-4 text-gray-400" />
+          ) : (
+            <Sun className="w-4 h-4 text-gray-600" />
+          )}
+        </button>
       </div>
     </header>
   )

package/src/components/MilestoneGantt.tsx

@@ -1,5 +1,6 @@
 import { useMemo } from 'react'
 import { StatusBadge } from './StatusBadge'
+import { formatMilestoneName } from '../lib/display'
 import type { Milestone, Task } from '../lib/types'
 
 interface MilestoneGanttProps {
@@ -118,17 +119,17 @@ export function MilestoneGantt({ milestones, tasks }: MilestoneGanttProps) {
                 : 'bg-gray-500/30 border-gray-500/40'
 
           return (
-            <div key={milestone.id} className="flex items-center h-12 px-3 hover:bg-gray-800/20">
+            <div key={milestone.id} className="flex items-center h-12 px-3 hover:bg-gray-200/20 dark:hover:bg-gray-800/20">
               {/* Label */}
               <div className="w-48 shrink-0 flex items-center gap-2">
-                <span className="text-xs text-gray-300 truncate">{milestone.name}</span>
+                <span className="text-xs text-gray-700 dark:text-gray-300 truncate">{formatMilestoneName(milestone)}</span>
               </div>
               {/* Bar area */}
               <div className="flex-1 relative h-6">
                 <div
                   className={`absolute top-1 h-4 rounded-sm border ${barColor} transition-all`}
                   style={{ left: `${barStart}%`, width: `${barWidth}%` }}
-                  title={`${milestone.name}: ${start ? formatDate(start) : '?'} → ${end ? formatDate(end) : '?'} (${milestone.progress}%)`}
+                  title={`${formatMilestoneName(milestone)}: ${start ? formatDate(start) : '?'} → ${end ? formatDate(end) : '?'} (${milestone.progress}%)`}
                 >
                   {/* Progress fill within bar */}
                   <div

package/src/components/MilestoneKanban.tsx

@@ -2,7 +2,9 @@ import { Link } from '@tanstack/react-router'
 import { StatusBadge } from './StatusBadge'
 import { PriorityBadge } from './PriorityBadge'
 import { ProgressBar } from './ProgressBar'
+import { PreviewButton } from './PreviewButton'
 import { TaskList } from './TaskList'
+import { formatMilestoneName } from '../lib/display'
 import type { Milestone, Task, Status } from '../lib/types'
 import { useState } from 'react'
 import { ChevronDown, ChevronRight } from 'lucide-react'
@@ -29,15 +31,18 @@ function KanbanCard({
   const [expanded, setExpanded] = useState(false)
 
   return (
-    <div className="bg-gray-900/50 border border-gray-800 rounded-lg p-3 hover:border-gray-700 transition-colors">
+    <div className="bg-gray-100 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-800 rounded-lg p-3 hover:border-gray-300 dark:hover:border-gray-700 transition-colors group">
       <div className="flex items-start justify-between gap-2 mb-2">
-        <Link
-          to="/milestones/$milestoneId"
-          params={{ milestoneId: milestone.id }}
-          className="text-sm font-medium leading-tight hover:text-blue-400 transition-colors"
-        >
-          {milestone.name}
-        </Link>
+        <div className="flex items-center gap-2 flex-1">
+          <Link
+            to="/milestones/$milestoneId"
+            params={{ milestoneId: milestone.id }}
+            className="text-sm font-medium leading-tight text-gray-900 dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400 transition-colors"
+          >
+            {formatMilestoneName(milestone)}
+          </Link>
+          <PreviewButton type="milestone" id={milestone.id} />
+        </div>
         <PriorityBadge priority={milestone.priority} />
       </div>
       <div className="flex items-center gap-2 mb-2">

package/src/components/MilestonePreview.tsx

@@ -0,0 +1,163 @@
+import { Link } from '@tanstack/react-router'
+import { useState, useEffect, useMemo } from 'react'
+import { ExternalLink } from 'lucide-react'
+import { useProgressData } from '../contexts/ProgressContext'
+import { DetailHeader } from './DetailHeader'
+import { ProgressBar } from './ProgressBar'
+import { StatusDot } from './StatusDot'
+import { PriorityBadge } from './PriorityBadge'
+import { MarkdownContent, buildLinkMap } from './MarkdownContent'
+import { getMarkdownContent, resolveMilestoneFile } from '../services/markdown.service'
+import { formatMilestoneName } from '../lib/display'
+import type { MarkdownResult, ResolveFileResult } from '../services/markdown.service'
+
+interface MilestonePreviewProps {
+  milestoneId: string
+}
+
+function getGitHubParams(): { owner: string; repo: string } | undefined {
+  if (typeof window === 'undefined') return undefined
+  const params = new URLSearchParams(window.location.search)
+  const repo = params.get('repo')
+  if (!repo) return undefined
+  const parts = repo.split('/')
+  if (parts.length < 2) return undefined
+  return { owner: parts[0], repo: parts[1] }
+}
+
+export function MilestonePreview({ milestoneId }: MilestonePreviewProps) {
+  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
+
+    setLoading(true)
+    setMarkdown(null)
+    setMarkdownError(null)
+    setMarkdownFilePath(null)
+
+    const github = getGitHubParams()
+
+    resolveMilestoneFile({ data: { milestoneId, github } })
+      .then((resolveResult: ResolveFileResult) => {
+        if (!resolveResult.ok) {
+          setMarkdownError(resolveResult.error)
+          setLoading(false)
+          return
+        }
+
+        setMarkdownFilePath(resolveResult.filePath)
+        return getMarkdownContent({ data: { filePath: resolveResult.filePath, github } })
+          .then((mdResult: MarkdownResult) => {
+            if (mdResult.ok) {
+              setMarkdown(mdResult.content)
+            } else {
+              setMarkdownError(mdResult.error)
+            }
+          })
+      })
+      .catch((err: Error) => {
+        setMarkdownError(err.message)
+      })
+      .finally(() => {
+        setLoading(false)
+      })
+  }, [milestoneId])
+
+  if (!data || !milestone) {
+    return (
+      <div className="text-center py-8">
+        <p className="text-gray-500 dark:text-gray-400 text-sm">Milestone not found: {milestoneId}</p>
+      </div>
+    )
+  }
+
+  const fields = [
+    ...(milestone.started ? [{ label: 'Started', value: milestone.started }] : []),
+    ...(milestone.completed ? [{ label: 'Completed', value: milestone.completed }] : []),
+    { label: 'Est', value: `${milestone.estimated_weeks} week${milestone.estimated_weeks === '1' ? '' : 's'}` },
+    { label: 'Tasks', value: `${milestone.tasks_completed}/${milestone.tasks_total}` },
+  ]
+
+  return (
+    <div>
+      <div className="flex items-start justify-between mb-4">
+        <h1 className="text-lg font-semibold text-gray-900 dark:text-gray-100">{formatMilestoneName(milestone)}</h1>
+        <Link
+          to="/milestones/$milestoneId"
+          params={{ milestoneId }}
+          className="p-1.5 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+          title="Open full view"
+        >
+          <ExternalLink className="w-4 h-4 text-gray-600 dark:text-gray-400" />
+        </Link>
+      </div>
+
+      <div className="flex items-center gap-3 mb-4">
+        <div className="flex-1 max-w-xs">
+          <ProgressBar value={milestone.progress} size="sm" />
+        </div>
+        <span className="text-xs text-gray-600 dark:text-gray-500">{milestone.progress}%</span>
+      </div>
+
+      <div className="flex items-center gap-2 mb-4">
+        <PriorityBadge priority={milestone.priority} />
+      </div>
+
+      <DetailHeader status={milestone.status} fields={fields} />
+
+      {milestone.notes && (
+        <p className="text-sm text-gray-600 dark:text-gray-400 mb-6">{milestone.notes}</p>
+      )}
+
+      {/* Markdown content */}
+      {loading ? (
+        <p className="text-sm text-gray-600 dark:text-gray-500">Loading document...</p>
+      ) : markdown ? (
+        <div className="prose-sm">
+          <MarkdownContent content={markdown} basePath={markdownFilePath ?? undefined} linkMap={linkMap} />
+        </div>
+      ) : markdownError ? (
+        <div className="bg-gray-100 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-800 rounded-xl p-4 text-sm text-gray-600 dark:text-gray-500">
+          No document found — {markdownError}
+        </div>
+      ) : null}
+
+      {/* Task list */}
+      {tasks.length > 0 && (
+        <div className="mt-8">
+          <h2 className="text-sm font-semibold text-gray-700 dark:text-gray-400 uppercase tracking-wider mb-3">
+            Tasks
+          </h2>
+          <div className="bg-gray-100 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-800 rounded-xl divide-y divide-gray-200 dark:divide-gray-800">
+            {tasks.map((task) => (
+              <Link
+                key={task.id}
+                to="/tasks/$taskId"
+                params={{ taskId: task.id }}
+                className="flex items-center gap-2 px-4 py-2.5 text-sm hover:bg-gray-200/50 dark:hover:bg-gray-800/50 transition-colors first:rounded-t-xl last:rounded-b-xl"
+              >
+                <StatusDot status={task.status} />
+                <span className={task.status === 'completed' ? 'text-gray-500 dark:text-gray-500' : 'text-gray-900 dark:text-gray-200'}>
+                  {task.name}
+                </span>
+                <PriorityBadge priority={task.priority} />
+                {task.estimated_hours && (
+                  <span className="text-xs text-gray-600 dark:text-gray-600 ml-auto">{task.estimated_hours}h</span>
+                )}
+              </Link>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/MilestoneTable.tsx

@@ -12,7 +12,9 @@ import { ChevronDown, ChevronRight, ArrowUpDown } from 'lucide-react'
 import { StatusBadge } from './StatusBadge'
 import { PriorityBadge } from './PriorityBadge'
 import { ProgressBar } from './ProgressBar'
+import { PreviewButton } from './PreviewButton'
 import { TaskList } from './TaskList'
+import { formatMilestoneName } from '../lib/display'
 import type { Milestone, Task } from '../lib/types'
 
 const columnHelper = createColumnHelper<Milestone>()
@@ -54,14 +56,17 @@ export function MilestoneTable({ milestones, tasks }: MilestoneTableProps) {
     columnHelper.accessor('name', {
       header: 'Milestone',
       cell: (info) => (
-        <Link
-          to="/milestones/$milestoneId"
-          params={{ milestoneId: info.row.original.id }}
-          className="text-sm font-medium text-gray-200 hover:text-blue-400 transition-colors"
-          onClick={(e) => e.stopPropagation()}
-        >
-          {info.getValue()}
-        </Link>
+        <div className="flex items-center gap-2 group">
+          <Link
+            to="/milestones/$milestoneId"
+            params={{ milestoneId: info.row.original.id }}
+            className="text-sm font-medium text-gray-900 dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400 transition-colors"
+            onClick={(e) => e.stopPropagation()}
+          >
+            {formatMilestoneName(info.row.original)}
+          </Link>
+          <PreviewButton type="milestone" id={info.row.original.id} />
+        </div>
       ),
     }),
     columnHelper.accessor('status', {

package/src/components/MilestoneTree.tsx

@@ -4,8 +4,10 @@ import { ChevronDown, ChevronRight } from 'lucide-react'
 import { StatusBadge } from './StatusBadge'
 import { PriorityBadge } from './PriorityBadge'
 import { ProgressBar } from './ProgressBar'
+import { PreviewButton } from './PreviewButton'
 import { TaskList } from './TaskList'
 import { useCollapse } from '../lib/useCollapse'
+import { formatMilestoneName } from '../lib/display'
 import type { Milestone, Task } from '../lib/types'
 
 interface MilestoneTreeProps {
@@ -27,30 +29,33 @@ function MilestoneTreeRow({
   const collapse = useCollapse(expanded)
 
   return (
-    <div className="border-b border-gray-800/50">
+    <div className="border-b border-gray-200 dark:border-gray-800/50 group">
       <button
         onClick={onToggle}
-        className="w-full flex items-center gap-3 px-4 py-3 hover:bg-gray-800/30 transition-colors text-left"
+        className="w-full flex items-center gap-3 px-4 py-3 hover:bg-gray-200/50 dark:hover:bg-gray-800/30 transition-colors text-left"
       >
         {expanded ? (
-          <ChevronDown className="w-4 h-4 text-gray-500 shrink-0" />
+          <ChevronDown className="w-4 h-4 text-gray-500 dark:text-gray-500 shrink-0" />
         ) : (
-          <ChevronRight className="w-4 h-4 text-gray-500 shrink-0" />
+          <ChevronRight className="w-4 h-4 text-gray-500 dark:text-gray-500 shrink-0" />
         )}
-        <Link
-          to="/milestones/$milestoneId"
-          params={{ milestoneId: milestone.id }}
-          className="flex-1 text-sm font-medium hover:text-blue-400 transition-colors"
-          onClick={(e) => e.stopPropagation()}
-        >
-          {milestone.name}
-        </Link>
+        <div className="flex items-center gap-2 flex-1">
+          <Link
+            to="/milestones/$milestoneId"
+            params={{ milestoneId: milestone.id }}
+            className="text-sm font-medium text-gray-900 dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400 transition-colors"
+            onClick={(e) => e.stopPropagation()}
+          >
+            {formatMilestoneName(milestone)}
+          </Link>
+          <PreviewButton type="milestone" id={milestone.id} />
+        </div>
         <StatusBadge status={milestone.status} />
         <PriorityBadge priority={milestone.priority} />
         <div className="w-20">
           <ProgressBar value={milestone.progress} size="sm" />
         </div>
-        <span className="text-xs text-gray-500 font-mono w-12 text-right">
+        <span className="text-xs text-gray-500 dark:text-gray-500 font-mono w-12 text-right">
           {milestone.tasks_completed}/{milestone.tasks_total}
         </span>
       </button>

package/src/components/PreviewButton.tsx

@@ -0,0 +1,33 @@
+import { PanelRight } from 'lucide-react'
+import { useSidePanel } from '../contexts/SidePanelContext'
+
+interface PreviewButtonProps {
+  type: 'milestone' | 'task'
+  id: string
+  className?: string
+}
+
+export function PreviewButton({ type, id, className = '' }: PreviewButtonProps) {
+  const { openMilestone, openTask } = useSidePanel()
+
+  const handleClick = (e: React.MouseEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    if (type === 'milestone') {
+      openMilestone(id)
+    } else {
+      openTask(id)
+    }
+  }
+
+  return (
+    <button
+      onClick={handleClick}
+      className={`p-1.5 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-800 transition-colors opacity-0 group-hover:opacity-100 ${className}`}
+      title={`Preview ${type}`}
+      aria-label={`Preview ${type}`}
+    >
+      <PanelRight className="w-3.5 h-3.5 text-gray-500 dark:text-gray-400" />
+    </button>
+  )
+}

package/src/components/SidePanel.tsx

@@ -0,0 +1,50 @@
+import { X } from 'lucide-react'
+import { useSidePanel } from '../contexts/SidePanelContext'
+import { MilestonePreview } from './MilestonePreview'
+import { TaskPreview } from './TaskPreview'
+
+export function SidePanel() {
+  const { content, isOpen, close } = useSidePanel()
+
+  // Don't render at all until first open
+  if (!content && !isOpen) {
+    return null
+  }
+
+  return (
+    <>
+      {/* Backdrop */}
+      <div
+        className={`fixed inset-0 bg-black/30 backdrop-blur-sm z-40 transition-opacity duration-300 ${
+          isOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'
+        }`}
+        onClick={close}
+      />
+
+      {/* Panel */}
+      <div
+        className={`fixed top-0 right-0 h-full w-full max-w-2xl bg-white dark:bg-gray-900 border-l border-gray-200 dark:border-gray-800 shadow-2xl z-50 transition-transform duration-300 overflow-auto translate-x-full ${
+          isOpen ? '!translate-x-0' : ''
+        }`}
+      >
+        {/* Header */}
+        <div className="sticky top-0 bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 px-6 py-4 flex items-center justify-between z-10">
+          <h2 className="text-sm font-semibold text-gray-900 dark:text-gray-100">Preview</h2>
+          <button
+            onClick={close}
+            className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+            aria-label="Close panel"
+          >
+            <X className="w-4 h-4 text-gray-600 dark:text-gray-400" />
+          </button>
+        </div>
+
+        {/* Content */}
+        <div className="p-6">
+          {content?.type === 'milestone' && <MilestonePreview milestoneId={content.id} />}
+          {content?.type === 'task' && <TaskPreview taskId={content.id} />}
+        </div>
+      </div>
+    </>
+  )
+}

package/src/components/Sidebar.tsx

@@ -25,9 +25,9 @@ export function Sidebar({ projects = [], currentProject = null, onProjectSelect,
   const location = useRouterState({ select: (s) => s.location })
 
   return (
-    <nav className="w-56 border-r border-gray-800 bg-gray-950 flex flex-col shrink-0">
-      <div className="p-4 border-b border-gray-800">
-        <span className="text-sm font-semibold text-gray-300 tracking-wide">
+    <nav className="w-56 border-r border-gray-200 dark:border-gray-800 bg-gray-100 dark:bg-gray-950 flex flex-col shrink-0">
+      <div className="p-4 border-b border-gray-200 dark:border-gray-800">
+        <span className="text-sm font-semibold text-gray-700 dark:text-gray-300 tracking-wide">
           ACP Visualizer
         </span>
       </div>
@@ -53,8 +53,8 @@ export function Sidebar({ projects = [], currentProject = null, onProjectSelect,
               to={item.to}
               className={`flex items-center gap-3 px-4 py-2 text-sm transition-colors ${
                 isActive
-                  ? 'text-gray-100 bg-gray-800/50'
-                  : 'text-gray-400 hover:text-gray-200 hover:bg-gray-800/30'
+                  ? 'text-gray-900 dark:text-gray-100 bg-gray-200 dark:bg-gray-800/50'
+                  : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 hover:bg-gray-200/50 dark:hover:bg-gray-800/30'
               }`}
             >
               <item.icon className="w-4 h-4" />
@@ -63,10 +63,10 @@ export function Sidebar({ projects = [], currentProject = null, onProjectSelect,
           )
         })}
       </div>
-      <div className="p-3 border-t border-gray-800 space-y-2">
+      <div className="p-3 border-t border-gray-200 dark:border-gray-800 space-y-2">
         <Link
           to="/search"
-          className="flex items-center gap-2 px-3 py-1.5 text-sm text-gray-500 bg-gray-900 border border-gray-800 rounded-md hover:text-gray-300 hover:border-gray-600 transition-colors"
+          className="flex items-center gap-2 px-3 py-1.5 text-sm text-gray-600 dark:text-gray-500 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-800 rounded-md hover:text-gray-900 dark:hover:text-gray-300 hover:border-gray-400 dark:hover:border-gray-600 transition-colors"
         >
           <Search className="w-4 h-4" />
           Search...

package/src/components/TaskList.tsx

@@ -1,14 +1,16 @@
 import { Link } from '@tanstack/react-router'
 import { StatusDot } from './StatusDot'
 import { PriorityBadge } from './PriorityBadge'
+import { PreviewButton } from './PreviewButton'
 import { ExtraFieldsBadge } from './ExtraFieldsBadge'
+import { formatTaskName } from '../lib/display'
 import type { Task } from '../lib/types'
 
 export function TaskList({ tasks }: { tasks: Task[] }) {
   if (tasks.length === 0) {
     return (
       <div className="pl-6 py-2">
-        <span className="text-xs text-gray-600">No tasks</span>
+        <span className="text-xs text-gray-600 dark:text-gray-600">No tasks</span>
       </div>
     )
   }
@@ -16,20 +18,21 @@ export function TaskList({ tasks }: { tasks: Task[] }) {
   return (
     <div className="pl-6 py-1 space-y-0.5">
       {tasks.map((task) => (
-        <div key={task.id} className="flex items-center gap-2 py-1 text-sm">
+        <div key={task.id} className="flex items-center gap-2 py-1 text-sm group">
           <StatusDot status={task.status} />
           <Link
             to="/tasks/$taskId"
             params={{ taskId: task.id }}
-            className={`hover:text-blue-400 transition-colors ${
-              task.status === 'completed' ? 'text-gray-500' : 'text-gray-200'
+            className={`hover:text-blue-500 dark:hover:text-blue-400 transition-colors ${
+              task.status === 'completed' ? 'text-gray-500 dark:text-gray-500' : 'text-gray-900 dark:text-gray-200'
             }`}
           >
-            {task.name}
+            {formatTaskName(task)}
           </Link>
+          <PreviewButton type="task" id={task.id} />
           <PriorityBadge priority={task.priority} />
           {task.notes && (
-            <span className="text-xs text-gray-600 ml-auto truncate max-w-[200px]">
+            <span className="text-xs text-gray-600 dark:text-gray-600 ml-auto truncate max-w-[200px]">
               {task.notes}
             </span>
           )}

package/src/components/TaskPreview.tsx

@@ -0,0 +1,148 @@
+import { Link } from '@tanstack/react-router'
+import { useState, useEffect, useMemo } from 'react'
+import { ExternalLink } from 'lucide-react'
+import { useProgressData } from '../contexts/ProgressContext'
+import { DetailHeader } from './DetailHeader'
+import { PriorityBadge } from './PriorityBadge'
+import { MarkdownContent, buildLinkMap } from './MarkdownContent'
+import { getMarkdownContent, resolveTaskFile } from '../services/markdown.service'
+import { formatTaskName, formatMilestoneName } from '../lib/display'
+import type { MarkdownResult } from '../services/markdown.service'
+
+interface TaskPreviewProps {
+  taskId: string
+}
+
+function getGitHubParams(): { owner: string; repo: string } | undefined {
+  if (typeof window === 'undefined') return undefined
+  const params = new URLSearchParams(window.location.search)
+  const repo = params.get('repo')
+  if (!repo) return undefined
+  const parts = repo.split('/')
+  if (parts.length < 2) return undefined
+  return { owner: parts[0], repo: parts[1] }
+}
+
+export function TaskPreview({ taskId }: TaskPreviewProps) {
+  const data = useProgressData()
+  const [markdown, setMarkdown] = useState<string | null>(null)
+  const [markdownError, setMarkdownError] = useState<string | null>(null)
+  const [loading, setLoading] = useState(true)
+
+  const { task, milestone } = useMemo(() => {
+    if (!data) return { task: null, milestone: null }
+
+    for (const ms of data.milestones) {
+      const msTaskList = data.tasks[ms.id] || []
+      const foundTask = msTaskList.find((t) => t.id === taskId)
+      if (foundTask) {
+        return { task: foundTask, milestone: ms }
+      }
+    }
+    return { task: null, milestone: null }
+  }, [data, taskId])
+
+  useEffect(() => {
+    if (!task) return
+
+    setLoading(true)
+    setMarkdown(null)
+    setMarkdownError(null)
+
+    const filePath = resolveTaskFile(task)
+    if (!filePath) {
+      setMarkdownError('No file path for this task')
+      setLoading(false)
+      return
+    }
+
+    const github = getGitHubParams()
+
+    getMarkdownContent({ data: { filePath, github } })
+      .then((result: MarkdownResult) => {
+        if (result.ok) {
+          setMarkdown(result.content)
+        } else {
+          setMarkdownError(result.error)
+        }
+      })
+      .catch((err: Error) => {
+        setMarkdownError(err.message)
+      })
+      .finally(() => {
+        setLoading(false)
+      })
+  }, [task])
+
+  const linkMap = useMemo(() => (data ? buildLinkMap(data) : {}), [data])
+  const taskFilePath = useMemo(() => resolveTaskFile(task), [task])
+
+  if (!data || !task || !milestone) {
+    return (
+      <div className="text-center py-8">
+        <p className="text-gray-500 dark:text-gray-400 text-sm">Task not found: {taskId}</p>
+      </div>
+    )
+  }
+
+  const hoursDisplay = task.actual_hours != null
+    ? `Est: ${task.estimated_hours}h | Actual: ${task.actual_hours}h`
+    : `${task.estimated_hours}h`
+
+  const fields = [
+    { label: 'Est', value: hoursDisplay },
+    ...(task.started ? [{ label: 'Started', value: task.started }] : []),
+    ...(task.completed_date ? [{ label: 'Completed', value: task.completed_date }] : []),
+    {
+      label: 'Milestone',
+      value: (
+        <Link
+          to="/milestones/$milestoneId"
+          params={{ milestoneId: milestone.id }}
+          className="text-blue-500 dark:text-blue-400 hover:underline"
+        >
+          {formatMilestoneName(milestone)}
+        </Link>
+      ),
+    },
+  ]
+
+  return (
+    <div>
+      <div className="flex items-start justify-between mb-4">
+        <h1 className="text-lg font-semibold text-gray-900 dark:text-gray-100">{formatTaskName(task)}</h1>
+        <Link
+          to="/tasks/$taskId"
+          params={{ taskId }}
+          className="p-1.5 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+          title="Open full view"
+        >
+          <ExternalLink className="w-4 h-4 text-gray-600 dark:text-gray-400" />
+        </Link>
+      </div>
+
+      <div className="flex items-center gap-2 mb-4">
+        <PriorityBadge priority={task.priority} />
+      </div>
+
+      <DetailHeader status={task.status} fields={fields} />
+
+      {task.notes && (
+        <p className="text-sm text-gray-600 dark:text-gray-400 mb-6">{task.notes}</p>
+      )}
+
+      {/* Markdown content */}
+      {loading ? (
+        <p className="text-sm text-gray-600 dark:text-gray-500">Loading document...</p>
+      ) : markdown ? (
+        <div className="prose-sm">
+          <MarkdownContent content={markdown} basePath={taskFilePath ?? undefined} linkMap={linkMap} />
+        </div>
+      ) : markdownError ? (
+        <div className="bg-gray-100 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-800 rounded-xl p-4 text-sm text-gray-600 dark:text-gray-500">
+          No document found — {markdownError}
+        </div>
+      ) : null}
+    </div>
+  )
+}

package/src/contexts/SidePanelContext.tsx

@@ -0,0 +1,50 @@
+import { createContext, useContext, useState, ReactNode } from 'react'
+
+type PanelContent =
+  | { type: 'milestone'; id: string }
+  | { type: 'task'; id: string }
+  | null
+
+interface SidePanelContextValue {
+  content: PanelContent
+  isOpen: boolean
+  openMilestone: (id: string) => void
+  openTask: (id: string) => void
+  close: () => void
+}
+
+const SidePanelContext = createContext<SidePanelContextValue | undefined>(undefined)
+
+export function SidePanelProvider({ children }: { children: ReactNode }) {
+  const [content, setContent] = useState<PanelContent>(null)
+  const [isOpen, setIsOpen] = useState(false)
+
+  const openMilestone = (id: string) => {
+    setContent({ type: 'milestone', id })
+    setIsOpen(true)
+  }
+
+  const openTask = (id: string) => {
+    setContent({ type: 'task', id })
+    setIsOpen(true)
+  }
+
+  const close = () => {
+    setIsOpen(false)
+    setTimeout(() => setContent(null), 300) // Wait for animation
+  }
+
+  return (
+    <SidePanelContext.Provider value={{ content, isOpen, openMilestone, openTask, close }}>
+      {children}
+    </SidePanelContext.Provider>
+  )
+}
+
+export function useSidePanel() {
+  const context = useContext(SidePanelContext)
+  if (!context) {
+    throw new Error('useSidePanel must be used within SidePanelProvider')
+  }
+  return context
+}

package/src/lib/display.ts

@@ -0,0 +1,51 @@
+import type { Milestone, Task } from './types'
+
+/**
+ * Extract milestone number from ID (e.g., "M1" -> "1", "milestone_1" -> "1")
+ */
+export function getMilestoneNumber(id: string): string {
+  // Handle M1, M2, M3... format
+  if (/^M\d+$/.test(id)) {
+    return id.substring(1)
+  }
+  // Handle milestone_1, milestone_2... format
+  if (/^milestone_\d+$/.test(id)) {
+    return id.replace('milestone_', '')
+  }
+  // Fallback: try to extract any number
+  const match = id.match(/\d+/)
+  return match ? match[0] : id
+}
+
+/**
+ * Extract task number from ID (e.g., "task_1" -> "1", "79" -> "79")
+ */
+export function getTaskNumber(id: string): string {
+  // Handle task_1, task_2... format
+  if (/^task_\d+$/.test(id)) {
+    return id.replace('task_', '')
+  }
+  // Handle numeric IDs
+  if (/^\d+$/.test(id)) {
+    return id
+  }
+  // Fallback: try to extract any number
+  const match = id.match(/\d+/)
+  return match ? match[0] : id
+}
+
+/**
+ * Format milestone display name with prefix (e.g., "M1 — Project Setup")
+ */
+export function formatMilestoneName(milestone: Milestone): string {
+  const num = getMilestoneNumber(milestone.id)
+  return `M${num} — ${milestone.name}`
+}
+
+/**
+ * Format task display name with prefix (e.g., "T1 — Install dependencies")
+ */
+export function formatTaskName(task: Task): string {
+  const num = getTaskNumber(task.id)
+  return `T${num} — ${task.name}`
+}

package/src/lib/useTheme.ts

@@ -0,0 +1,38 @@
+import { useState, useEffect } from 'react'
+
+type Theme = 'dark' | 'light'
+
+// Initialize theme immediately on load to prevent flash
+if (typeof window !== 'undefined') {
+  const stored = localStorage.getItem('theme')
+  const initialTheme = (stored === 'light' || stored === 'dark') ? stored : 'dark'
+  if (initialTheme === 'dark') {
+    document.documentElement.classList.add('dark')
+  } else {
+    document.documentElement.classList.remove('dark')
+  }
+}
+
+export function useTheme() {
+  const [theme, setTheme] = useState<Theme>(() => {
+    if (typeof window === 'undefined') return 'dark'
+    const stored = localStorage.getItem('theme')
+    return (stored === 'light' || stored === 'dark') ? stored : 'dark'
+  })
+
+  useEffect(() => {
+    const root = document.documentElement
+    if (theme === 'dark') {
+      root.classList.add('dark')
+    } else {
+      root.classList.remove('dark')
+    }
+    localStorage.setItem('theme', theme)
+  }, [theme])
+
+  const toggleTheme = () => {
+    setTheme(prev => prev === 'dark' ? 'light' : 'dark')
+  }
+
+  return { theme, toggleTheme }
+}

package/src/routes/__root.tsx

@@ -3,12 +3,14 @@ import { useState, useCallback, useEffect } from 'react'
 import { useAutoRefresh } from '../lib/useAutoRefresh'
 import { Sidebar } from '../components/Sidebar'
 import { Header } from '../components/Header'
+import { SidePanel } from '../components/SidePanel'
 import { getProgressData } from '../services/progress-database.service'
 import { listProjects, getProjectProgressPath } from '../services/projects.service'
 import { fetchGitHubProgress } from '../services/github.service'
 import type { ProgressData } from '../lib/types'
 import type { AcpProject } from '../services/projects.service'
 import { ProgressProvider } from '../contexts/ProgressContext'
+import { SidePanelProvider } from '../contexts/SidePanelContext'
 
 import appCss from '../styles.css?url'
 
@@ -63,8 +65,8 @@ function NotFound() {
   return (
     <div className="flex items-center justify-center h-full">
       <div className="text-center">
-        <h2 className="text-xl font-semibold text-gray-200 mb-2">Page Not Found</h2>
-        <p className="text-sm text-gray-400">
+        <h2 className="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-2">Page Not Found</h2>
+        <p className="text-sm text-gray-600 dark:text-gray-400">
           The page you're looking for doesn't exist.
         </p>
       </div>
@@ -154,7 +156,7 @@ function RootLayout() {
   return (
     <>
       <AutoRefresh />
-      <div className="flex h-screen bg-gray-950 text-gray-100">
+      <div className="flex h-screen bg-white dark:bg-gray-950 text-gray-900 dark:text-gray-100">
         <Sidebar
           projects={context.projects}
           currentProject={currentProject}
@@ -162,12 +164,15 @@ function RootLayout() {
           onGitHubLoad={handleGitHubLoad}
         />
         <ProgressProvider data={progressData}>
-          <div className="flex-1 flex flex-col overflow-hidden">
-            <Header data={progressData} />
-            <main className="flex-1 overflow-auto">
-              <Outlet />
-            </main>
-          </div>
+          <SidePanelProvider>
+            <div className="flex-1 flex flex-col overflow-hidden">
+              <Header data={progressData} />
+              <main className="flex-1 overflow-auto bg-gray-50 dark:bg-gray-900">
+                <Outlet />
+              </main>
+            </div>
+            <SidePanel />
+          </SidePanelProvider>
         </ProgressProvider>
       </div>
     </>

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

@@ -8,6 +8,7 @@ import { StatusDot } from '../components/StatusDot'
 import { PriorityBadge } from '../components/PriorityBadge'
 import { MarkdownContent, buildLinkMap } from '../components/MarkdownContent'
 import { getMarkdownContent, resolveMilestoneFile } from '../services/markdown.service'
+import { formatMilestoneName, formatTaskName } from '../lib/display'
 import type { MarkdownResult, ResolveFileResult } from '../services/markdown.service'
 
 export const Route = createFileRoute('/milestones/$milestoneId')({
@@ -93,11 +94,11 @@ function MilestoneDetailPage() {
       <Breadcrumb
         items={[
           { label: 'Milestones', href: '/milestones' },
-          { label: `${milestone.id.replace('milestone_', 'M')} — ${milestone.name}` },
+          { label: formatMilestoneName(milestone) },
         ]}
       />
 
-      <h1 className="text-xl font-semibold text-gray-100 mb-3">{milestone.name}</h1>
+      <h1 className="text-xl font-semibold text-gray-100 dark:text-gray-100 mb-3">{formatMilestoneName(milestone)}</h1>
 
       <div className="flex items-center gap-3 mb-4">
         <div className="flex-1 max-w-xs">
@@ -133,21 +134,21 @@ function MilestoneDetailPage() {
           <h2 className="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-3">
             Tasks
           </h2>
-          <div className="bg-gray-900/50 border border-gray-800 rounded-xl divide-y divide-gray-800">
+          <div className="bg-gray-100 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-800 rounded-xl divide-y divide-gray-200 dark:divide-gray-800">
             {tasks.map((task) => (
               <Link
                 key={task.id}
                 to="/tasks/$taskId"
                 params={{ taskId: task.id }}
-                className="flex items-center gap-2 px-4 py-2.5 text-sm hover:bg-gray-800/50 transition-colors first:rounded-t-xl last:rounded-b-xl"
+                className="flex items-center gap-2 px-4 py-2.5 text-sm hover:bg-gray-200/50 dark:hover:bg-gray-800/50 transition-colors first:rounded-t-xl last:rounded-b-xl"
               >
                 <StatusDot status={task.status} />
-                <span className={task.status === 'completed' ? 'text-gray-500' : 'text-gray-200'}>
-                  {task.name}
+                <span className={task.status === 'completed' ? 'text-gray-500 dark:text-gray-500' : 'text-gray-900 dark:text-gray-200'}>
+                  {formatTaskName(task)}
                 </span>
                 <PriorityBadge priority={task.priority} />
                 {task.estimated_hours && (
-                  <span className="text-xs text-gray-600 ml-auto">{task.estimated_hours}h</span>
+                  <span className="text-xs text-gray-600 dark:text-gray-600 ml-auto">{task.estimated_hours}h</span>
                 )}
               </Link>
             ))}

package/src/routes/search.tsx

@@ -5,6 +5,7 @@ import { StatusBadge } from '../components/StatusBadge'
 import { StatusDot } from '../components/StatusDot'
 import { buildSearchIndex } from '../lib/search'
 import { useProgressData } from '../contexts/ProgressContext'
+import { formatTaskName, formatMilestoneName } from '../lib/display'
 
 export const Route = createFileRoute('/search')({
   component: SearchPage,
@@ -45,21 +46,21 @@ function SearchPage() {
           {results.map((result, i) => (
             <div
               key={i}
-              className="bg-gray-900/50 border border-gray-800 rounded-lg px-4 py-3"
+              className="bg-gray-100 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-800 rounded-lg px-4 py-3"
             >
               <div className="flex items-center gap-3">
                 {result.item.type === 'task' && result.item.task ? (
                   <>
                     <StatusDot status={result.item.task.status} />
-                    <span className="text-sm">{result.item.task.name}</span>
-                    <span className="text-xs text-gray-600 ml-auto">
-                      {result.item.milestone.name}
+                    <span className="text-sm text-gray-900 dark:text-gray-200">{formatTaskName(result.item.task)}</span>
+                    <span className="text-xs text-gray-600 dark:text-gray-600 ml-auto">
+                      {formatMilestoneName(result.item.milestone)}
                     </span>
                   </>
                 ) : (
                   <>
-                    <span className="text-sm font-medium">
-                      {result.item.milestone.name}
+                    <span className="text-sm font-medium text-gray-900 dark:text-gray-200">
+                      {formatMilestoneName(result.item.milestone)}
                     </span>
                     <StatusBadge status={result.item.milestone.status} />
                   </>

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

@@ -7,6 +7,7 @@ import { PriorityBadge } from '../components/PriorityBadge'
 import { MarkdownContent, buildLinkMap } from '../components/MarkdownContent'
 import { getMarkdownContent } from '../services/markdown.service'
 import { resolveTaskFile } from '../services/markdown.service'
+import { formatTaskName, formatMilestoneName } from '../lib/display'
 import type { MarkdownResult } from '../services/markdown.service'
 
 export const Route = createFileRoute('/tasks/$taskId')({
@@ -109,9 +110,9 @@ function TaskDetailPage() {
         <Link
           to="/milestones/$milestoneId"
           params={{ milestoneId: milestone.id }}
-          className="text-blue-400 hover:underline"
+          className="text-blue-500 dark:text-blue-400 hover:underline"
         >
-          {milestone.id.replace('milestone_', 'M')} — {milestone.name}
+          {formatMilestoneName(milestone)}
         </Link>
       ),
     },
@@ -122,12 +123,12 @@ function TaskDetailPage() {
       <Breadcrumb
         items={[
           { label: 'Milestones', href: '/milestones' },
-          { label: `${milestone.id.replace('milestone_', 'M')} — ${milestone.name}`, href: `/milestones/${milestone.id}` },
-          { label: task.name },
+          { label: formatMilestoneName(milestone), href: `/milestones/${milestone.id}` },
+          { label: formatTaskName(task) },
         ]}
       />
 
-      <h1 className="text-xl font-semibold text-gray-100 mb-3">{task.name}</h1>
+      <h1 className="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-3">{formatTaskName(task)}</h1>
 
       <div className="flex items-center gap-2 mb-4">
         <PriorityBadge priority={task.priority} />
@@ -152,14 +153,14 @@ function TaskDetailPage() {
 
       {/* Prev / Next navigation */}
       {(siblings.prev || siblings.next) && (
-        <div className="mt-8 flex items-center justify-between border-t border-gray-800 pt-4">
+        <div className="mt-8 flex items-center justify-between border-t border-gray-200 dark:border-gray-800 pt-4">
           {siblings.prev ? (
             <Link
               to="/tasks/$taskId"
               params={{ taskId: siblings.prev.id }}
-              className="text-sm text-gray-400 hover:text-gray-200 transition-colors"
+              className="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 transition-colors"
             >
-              ← {siblings.prev.name}
+              ← {formatTaskName(siblings.prev)}
             </Link>
           ) : (
             <span />
@@ -168,9 +169,9 @@ function TaskDetailPage() {
             <Link
               to="/tasks/$taskId"
               params={{ taskId: siblings.next.id }}
-              className="text-sm text-gray-400 hover:text-gray-200 transition-colors"
+              className="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 transition-colors"
             >
-              {siblings.next.name} →
+              {formatTaskName(siblings.next)} →
             </Link>
           ) : (
             <span />

package/src/routes/tasks.index.tsx

@@ -2,6 +2,7 @@ import { createFileRoute, Link } from '@tanstack/react-router'
 import { StatusDot } from '../components/StatusDot'
 import { ExtraFieldsBadge } from '../components/ExtraFieldsBadge'
 import { useProgressData } from '../contexts/ProgressContext'
+import { formatTaskName, formatMilestoneName } from '../lib/display'
 import type { Task } from '../lib/types'
 
 export const Route = createFileRoute('/tasks/')({
@@ -14,7 +15,7 @@ function TasksPage() {
   if (!progressData) {
     return (
       <div className="p-6">
-        <p className="text-gray-600 text-sm">No data loaded</p>
+        <p className="text-gray-600 dark:text-gray-600 text-sm">No data loaded</p>
       </div>
     )
   }
@@ -23,7 +24,7 @@ function TasksPage() {
   for (const milestone of progressData.milestones) {
     const tasks = progressData.tasks[milestone.id] || []
     for (const task of tasks) {
-      allTasks.push({ ...task, milestoneName: milestone.name })
+      allTasks.push({ ...task, milestoneName: formatMilestoneName(milestone) })
     }
   }
 
@@ -32,24 +33,24 @@ function TasksPage() {
       <h2 className="text-lg font-semibold mb-4">
         All Tasks ({allTasks.length})
       </h2>
-      <div className="border border-gray-800 rounded-lg overflow-hidden">
+      <div className="border border-gray-200 dark:border-gray-800 rounded-lg overflow-hidden">
         {allTasks.map((task) => (
           <Link
             key={task.id}
             to="/tasks/$taskId"
             params={{ taskId: task.id }}
-            className="flex items-center gap-3 px-4 py-2.5 border-b border-gray-800/50 hover:bg-gray-800/30 transition-colors"
+            className="flex items-center gap-3 px-4 py-2.5 border-b border-gray-200 dark:border-gray-800/50 hover:bg-gray-200/50 dark:hover:bg-gray-800/30 transition-colors"
           >
             <StatusDot status={task.status} />
             <span
               className={`flex-1 text-sm ${
-                task.status === 'completed' ? 'text-gray-500' : 'text-gray-200'
+                task.status === 'completed' ? 'text-gray-500 dark:text-gray-500' : 'text-gray-900 dark:text-gray-200'
               }`}
             >
-              {task.name}
+              {formatTaskName(task)}
             </span>
-            <span className="text-xs text-gray-600">{task.milestoneName}</span>
-            <span className="text-xs text-gray-500 font-mono w-8 text-right">
+            <span className="text-xs text-gray-600 dark:text-gray-600">{task.milestoneName}</span>
+            <span className="text-xs text-gray-500 dark:text-gray-500 font-mono w-8 text-right">
               {task.estimated_hours}h
             </span>
             <ExtraFieldsBadge fields={task.extra} />

package/src/styles.css

@@ -2,12 +2,14 @@
 @plugin "@tailwindcss/typography";
 @import "highlight.js/styles/github-dark.css";
 
+@variant dark (&:where(.dark, .dark *));
+
 html {
-  @apply bg-gray-950;
+  @apply bg-white dark:bg-gray-950;
 }
 
 body {
-  @apply m-0 bg-gray-950 min-h-screen text-gray-100;
+  @apply m-0 bg-white dark:bg-gray-950 min-h-screen text-gray-900 dark:text-gray-100;
   font-family: "Inter", system-ui, -apple-system, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;