@prmichaelsen/acp-visualizer 0.8.1 → 0.9.0

package/src/components/Sidebar.tsx

@@ -1,5 +1,5 @@
 import { Link, useRouterState } from '@tanstack/react-router'
-import { LayoutDashboard, Flag, CheckSquare, Clock, Search } from 'lucide-react'
+import { LayoutDashboard, Flag, CheckSquare, Clock, Search, PenTool, Puzzle, FileBarChart } from 'lucide-react'
 import { ProjectSelector } from './ProjectSelector'
 import { GitHubInput } from './GitHubInput'
 import type { AcpProject } from '../services/projects.service'
@@ -9,6 +9,9 @@ const navItems = [
   { to: '/milestones' as const, icon: Flag, label: 'Milestones' },
   { to: '/tasks' as const, icon: CheckSquare, label: 'Tasks' },
   { to: '/activity' as const, icon: Clock, label: 'Activity' },
+  { to: '/designs' as const, icon: PenTool, label: 'Designs' },
+  { to: '/patterns' as const, icon: Puzzle, label: 'Patterns' },
+  { to: '/reports' as const, icon: FileBarChart, label: 'Reports' },
 ]
 
 interface SidebarProps {
@@ -22,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>
@@ -50,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" />
@@ -60,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,5 +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'
 
@@ -7,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>
     )
   }
@@ -15,19 +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/types.ts

@@ -1,6 +1,9 @@
 /** Status values for milestones and tasks */
 export type Status = 'completed' | 'in_progress' | 'not_started' | 'wont_do'
 
+/** Priority values for milestones and tasks (ACP 6.0.0+) */
+export type Priority = 'critical' | 'high' | 'medium' | 'low'
+
 /** Unknown properties from agent-maintained YAML are preserved here */
 export type ExtraFields = Record<string, unknown>
 
@@ -29,6 +32,8 @@ export interface ProjectMetadata {
 export interface Milestone {
   id: string
   name: string
+  priority: Priority
+  file: string
   status: Status
   progress: number // 0-100
   started: string | null
@@ -43,10 +48,13 @@ export interface Milestone {
 export interface Task {
   id: string
   name: string
+  priority: Priority
   status: Status
   milestone_id: string
   file: string
   estimated_hours: string
+  actual_hours: number | null
+  started: string | null
   completed_date: string | null
   notes: string
   extra: ExtraFields

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/lib/yaml-loader.ts

@@ -8,6 +8,7 @@ import type {
   DocumentationStats,
   ProgressSummary,
   Status,
+  Priority,
   ExtraFields,
 } from './types'
 
@@ -51,6 +52,14 @@ function normalizeStatus(value: unknown): Status {
   return 'not_started'
 }
 
+function normalizePriority(value: unknown): Priority {
+  const s = String(value || 'medium').toLowerCase()
+  if (s === 'critical') return 'critical'
+  if (s === 'high') return 'high'
+  if (s === 'low') return 'low'
+  return 'medium'
+}
+
 function safeString(value: unknown, fallback = ''): string {
   if (value == null) return fallback
   return String(value)
@@ -127,7 +136,7 @@ function normalizeProject(raw: unknown): ProjectMetadata {
 }
 
 const MILESTONE_KEYS = [
-  'id', 'name', 'status', 'progress', 'started', 'completed',
+  'id', 'name', 'priority', 'file', 'status', 'progress', 'started', 'completed',
   'estimated_weeks', 'tasks_completed', 'tasks_total', 'notes',
 ]
 
@@ -137,6 +146,8 @@ function normalizeMilestone(raw: unknown, index: number): Milestone {
   return {
     id: safeString(known.id, `milestone_${index + 1}`),
     name: safeString(known.name, `Milestone ${index + 1}`),
+    priority: normalizePriority(known.priority),
+    file: safeString(known.file),
     status: normalizeStatus(known.status),
     progress: known.progress != null
       ? safeNumber(known.progress)
@@ -154,13 +165,25 @@ function normalizeMilestone(raw: unknown, index: number): Milestone {
 }
 
 function normalizeMilestones(raw: unknown): Milestone[] {
-  if (!Array.isArray(raw)) return []
-  return raw.map((item, i) => normalizeMilestone(item, i))
+  // v6 format: milestones is a map keyed by ID (e.g. { M1: {...}, M2: {...} })
+  if (raw && typeof raw === 'object' && !Array.isArray(raw)) {
+    const obj = raw as Record<string, unknown>
+    return Object.entries(obj).map(([key, value], i) => {
+      const m = normalizeMilestone(value, i)
+      // The map key IS the milestone ID — override whatever was parsed
+      return { ...m, id: key }
+    })
+  }
+  // Pre-v6 format: milestones is an array
+  if (Array.isArray(raw)) {
+    return raw.map((item, i) => normalizeMilestone(item, i))
+  }
+  return []
 }
 
 const TASK_KEYS = [
-  'id', 'name', 'status', 'milestone_id', 'file',
-  'estimated_hours', 'completed_date', 'notes',
+  'id', 'name', 'priority', 'status', 'milestone_id', 'file',
+  'estimated_hours', 'actual_hours', 'started', 'completed_date', 'notes',
 ]
 
 function normalizeTask(raw: unknown, milestoneId: string, index: number): Task {
@@ -169,10 +192,13 @@ function normalizeTask(raw: unknown, milestoneId: string, index: number): Task {
   return {
     id: safeString(known.id, `task_${index + 1}`),
     name: safeString(known.name, `Task ${index + 1}`),
+    priority: normalizePriority(known.priority),
     status: normalizeStatus(known.status),
     milestone_id: safeString(known.milestone_id, milestoneId),
     file: safeString(known.file),
     estimated_hours: safeString(known.estimated_hours, '0'),
+    actual_hours: known.actual_hours != null ? safeNumber(known.actual_hours) : null,
+    started: known.started ? safeString(known.started) : null,
     completed_date: known.completed_date ? safeString(known.completed_date) : null,
     notes: safeString(known.notes),
     extra,
@@ -388,20 +414,30 @@ export function parseProgressYaml(raw: string): ProgressData {
     if (looseTasks.length > 0) {
       const existing = allTasks['_unassigned'] || []
       allTasks['_unassigned'] = [...existing, ...looseTasks]
-      // Add a synthetic milestone for unassigned tasks if not already present
-      if (!seenIds.has('_unassigned')) {
-        seenIds.add('_unassigned')
+    }
+
+    // Create synthetic milestones for any task keys without a matching milestone.
+    // This handles `unassigned:` (or any other key) inside the `tasks:` object
+    // that doesn't correspond to a declared milestone.
+    for (const key of Object.keys(allTasks)) {
+      if (!seenIds.has(key)) {
+        seenIds.add(key)
+        const tasks = allTasks[key]
+        const isUnassigned = key === '_unassigned' || key.toLowerCase() === 'unassigned'
+        const displayName = isUnassigned ? 'Unassigned Tasks' : key
         allMilestones.push({
-          id: '_unassigned',
-          name: 'Unassigned Tasks',
+          id: key,
+          name: displayName,
+          priority: 'medium',
+          file: '',
           status: 'in_progress',
           progress: 0,
           started: null,
           completed: null,
           estimated_weeks: '0',
-          tasks_completed: looseTasks.filter((t) => t.status === 'completed').length,
-          tasks_total: looseTasks.length,
-          notes: 'Tasks not assigned to a specific milestone',
+          tasks_completed: tasks.filter((t) => t.status === 'completed').length,
+          tasks_total: tasks.length,
+          notes: isUnassigned ? 'Tasks not assigned to a specific milestone' : `Tasks under "${key}"`,
           extra: { synthetic: true },
         })
       }