@prmichaelsen/acp-visualizer 0.8.2 → 0.9.0

package/package.json

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

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/MilestoneKanban.tsx

@@ -2,6 +2,7 @@ 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 type { Milestone, Task, Status } from '../lib/types'
 import { useState } from 'react'
@@ -29,15 +30,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"
+          >
+            {milestone.name}
+          </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,162 @@
+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 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">{milestone.name}</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,6 +12,7 @@ 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 type { Milestone, Task } from '../lib/types'
 
@@ -54,14 +55,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()}
+          >
+            {info.getValue()}
+          </Link>
+          <PreviewButton type="milestone" id={info.row.original.id} />
+        </div>
       ),
     }),
     columnHelper.accessor('status', {

package/src/components/MilestoneTree.tsx

@@ -4,6 +4,7 @@ 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 type { Milestone, Task } from '../lib/types'
@@ -27,30 +28,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()}
+          >
+            {milestone.name}
+          </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 { Eye } 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}`}
+    >
+      <Eye className="w-3.5 h-3.5 text-gray-500 dark:text-gray-400" />
+    </button>
+  )
+}

package/src/components/SidePanel.tsx

@@ -0,0 +1,45 @@
+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()
+
+  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 ${
+          isOpen ? 'translate-x-0' : 'translate-x-full'
+        }`}
+      >
+        {/* 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,6 +1,7 @@
 import { Link } from '@tanstack/react-router'
 import { StatusDot } from './StatusDot'
 import { PriorityBadge } from './PriorityBadge'
+import { PreviewButton } from './PreviewButton'
 import { ExtraFieldsBadge } from './ExtraFieldsBadge'
 import type { Task } from '../lib/types'
 
@@ -8,7 +9,7 @@ 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 +17,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}
           </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,147 @@
+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 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"
+        >
+          {milestone.id.replace('milestone_', 'M')} — {milestone.name}
+        </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">{task.name}</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/useTheme.ts

@@ -0,0 +1,27 @@
+import { useState, useEffect } from 'react'
+
+type Theme = 'dark' | 'light'
+
+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/styles.css

@@ -3,11 +3,11 @@
 @import "highlight.js/styles/github-dark.css";
 
 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;