@prmichaelsen/acp-visualizer 0.9.0 → 0.9.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prmichaelsen/acp-visualizer",
-  "version": "0.9.0",
+  "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/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

@@ -4,6 +4,7 @@ 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'
@@ -38,7 +39,7 @@ function KanbanCard({
             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}
+            {formatMilestoneName(milestone)}
           </Link>
           <PreviewButton type="milestone" id={milestone.id} />
         </div>

package/src/components/MilestonePreview.tsx

@@ -8,6 +8,7 @@ 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 {
@@ -89,7 +90,7 @@ export function MilestonePreview({ milestoneId }: MilestonePreviewProps) {
   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>
+        <h1 className="text-lg font-semibold text-gray-900 dark:text-gray-100">{formatMilestoneName(milestone)}</h1>
         <Link
           to="/milestones/$milestoneId"
           params={{ milestoneId }}

package/src/components/MilestoneTable.tsx

@@ -14,6 +14,7 @@ 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>()
@@ -62,7 +63,7 @@ export function MilestoneTable({ milestones, tasks }: MilestoneTableProps) {
             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()}
+            {formatMilestoneName(info.row.original)}
           </Link>
           <PreviewButton type="milestone" id={info.row.original.id} />
         </div>

package/src/components/MilestoneTree.tsx

@@ -7,6 +7,7 @@ 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 {
@@ -45,7 +46,7 @@ function MilestoneTreeRow({
             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}
+            {formatMilestoneName(milestone)}
           </Link>
           <PreviewButton type="milestone" id={milestone.id} />
         </div>

package/src/components/PreviewButton.tsx

@@ -1,4 +1,4 @@
-import { Eye } from 'lucide-react'
+import { PanelRight } from 'lucide-react'
 import { useSidePanel } from '../contexts/SidePanelContext'
 
 interface PreviewButtonProps {
@@ -27,7 +27,7 @@ export function PreviewButton({ type, id, className = '' }: PreviewButtonProps)
       title={`Preview ${type}`}
       aria-label={`Preview ${type}`}
     >
-      <Eye className="w-3.5 h-3.5 text-gray-500 dark:text-gray-400" />
+      <PanelRight className="w-3.5 h-3.5 text-gray-500 dark:text-gray-400" />
     </button>
   )
 }

package/src/components/SidePanel.tsx

@@ -6,6 +6,11 @@ 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 */}
@@ -18,8 +23,8 @@ export function SidePanel() {
 
       {/* 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'
+        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 */}

package/src/components/TaskList.tsx

@@ -3,6 +3,7 @@ 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[] }) {
@@ -26,7 +27,7 @@ export function TaskList({ tasks }: { tasks: Task[] }) {
               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} />

package/src/components/TaskPreview.tsx

@@ -6,6 +6,7 @@ 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 {
@@ -100,7 +101,7 @@ export function TaskPreview({ taskId }: TaskPreviewProps) {
           params={{ milestoneId: milestone.id }}
           className="text-blue-500 dark:text-blue-400 hover:underline"
         >
-          {milestone.id.replace('milestone_', 'M')} — {milestone.name}
+          {formatMilestoneName(milestone)}
         </Link>
       ),
     },
@@ -109,7 +110,7 @@ export function TaskPreview({ taskId }: TaskPreviewProps) {
   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>
+        <h1 className="text-lg font-semibold text-gray-900 dark:text-gray-100">{formatTaskName(task)}</h1>
         <Link
           to="/tasks/$taskId"
           params={{ taskId }}

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

@@ -2,6 +2,17 @@ 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'

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,6 +2,8 @@
 @plugin "@tailwindcss/typography";
 @import "highlight.js/styles/github-dark.css";
 
+@variant dark (&:where(.dark, .dark *));
+
 html {
   @apply bg-white dark:bg-gray-950;
 }