@prmichaelsen/acp-visualizer 0.1.8 → 0.5.0

package/src/components/MilestoneKanban.tsx

@@ -0,0 +1,117 @@
+import { StatusBadge } from './StatusBadge'
+import { ProgressBar } from './ProgressBar'
+import { TaskList } from './TaskList'
+import type { Milestone, Task, Status } from '../lib/types'
+import { useState } from 'react'
+import { ChevronDown, ChevronRight } from 'lucide-react'
+
+const columns: Array<{ status: Status; label: string; color: string }> = [
+  { status: 'not_started', label: 'Not Started', color: 'border-gray-600' },
+  { status: 'in_progress', label: 'In Progress', color: 'border-blue-500' },
+  { status: 'completed', label: 'Completed', color: 'border-green-500' },
+  { status: 'wont_do', label: "Won't Do", color: 'border-yellow-500' },
+]
+
+interface MilestoneKanbanProps {
+  milestones: Milestone[]
+  tasks: Record<string, Task[]>
+}
+
+function KanbanCard({
+  milestone,
+  tasks,
+}: {
+  milestone: Milestone
+  tasks: Task[]
+}) {
+  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="flex items-start justify-between gap-2 mb-2">
+        <h4 className="text-sm font-medium leading-tight">{milestone.name}</h4>
+      </div>
+      <div className="flex items-center gap-2 mb-2">
+        <div className="flex-1">
+          <ProgressBar value={milestone.progress} size="sm" />
+        </div>
+        <span className="text-xs text-gray-500 font-mono">
+          {milestone.tasks_completed}/{milestone.tasks_total}
+        </span>
+      </div>
+      {milestone.notes && (
+        <p className="text-xs text-gray-500 truncate mb-2">{milestone.notes}</p>
+      )}
+      {tasks.length > 0 && (
+        <button
+          onClick={() => setExpanded(!expanded)}
+          className="flex items-center gap-1 text-xs text-gray-500 hover:text-gray-300 transition-colors"
+        >
+          {expanded ? (
+            <ChevronDown className="w-3 h-3" />
+          ) : (
+            <ChevronRight className="w-3 h-3" />
+          )}
+          {tasks.length} task{tasks.length !== 1 ? 's' : ''}
+        </button>
+      )}
+      {expanded && (
+        <div className="mt-2 border-t border-gray-800 pt-2">
+          <TaskList tasks={tasks} />
+        </div>
+      )}
+    </div>
+  )
+}
+
+export function MilestoneKanban({ milestones, tasks }: MilestoneKanbanProps) {
+  if (milestones.length === 0) {
+    return <p className="text-gray-600 text-sm">No milestones</p>
+  }
+
+  // Only show columns that have items, except always show the core 3
+  const coreStatuses = new Set<Status>(['not_started', 'in_progress', 'completed'])
+  const activeColumns = columns.filter(
+    (col) =>
+      coreStatuses.has(col.status) ||
+      milestones.some((m) => m.status === col.status),
+  )
+  const gridCols =
+    activeColumns.length <= 3
+      ? 'grid-cols-3'
+      : 'grid-cols-4'
+
+  return (
+    <div className={`grid ${gridCols} gap-4 min-h-[300px]`}>
+      {activeColumns.map((col) => {
+        const items = milestones.filter((m) => m.status === col.status)
+        return (
+          <div key={col.status} className="flex flex-col">
+            <div
+              className={`flex items-center gap-2 pb-3 mb-3 border-b-2 ${col.color}`}
+            >
+              <h3 className="text-sm font-medium text-gray-300">{col.label}</h3>
+              <span className="text-xs text-gray-500 bg-gray-800 px-1.5 py-0.5 rounded-full">
+                {items.length}
+              </span>
+            </div>
+            <div className="space-y-2 flex-1">
+              {items.map((m) => (
+                <KanbanCard
+                  key={m.id}
+                  milestone={m}
+                  tasks={tasks[m.id] || []}
+                />
+              ))}
+              {items.length === 0 && (
+                <p className="text-xs text-gray-700 text-center py-4">
+                  No milestones
+                </p>
+              )}
+            </div>
+          </div>
+        )
+      })}
+    </div>
+  )
+}

package/src/components/ProjectSelector.tsx

@@ -0,0 +1,66 @@
+import { ChevronDown } from 'lucide-react'
+import { useState } from 'react'
+import type { AcpProject } from '../services/projects.service'
+
+interface ProjectSelectorProps {
+  projects: AcpProject[]
+  currentProject: string | null
+  onSelect: (projectId: string) => void
+}
+
+export function ProjectSelector({
+  projects,
+  currentProject,
+  onSelect,
+}: ProjectSelectorProps) {
+  const [open, setOpen] = useState(false)
+
+  const available = projects.filter((p) => p.hasProgress)
+  const current = available.find((p) => p.id === currentProject)
+
+  if (available.length <= 1) return null
+
+  return (
+    <div className="relative">
+      <button
+        onClick={() => setOpen(!open)}
+        className="w-full flex items-center justify-between px-3 py-1.5 text-xs text-gray-400 bg-gray-900 border border-gray-800 rounded-md hover:text-gray-300 hover:border-gray-600 transition-colors"
+      >
+        <span className="truncate">
+          {current?.id || 'Select project'}
+        </span>
+        <ChevronDown className={`w-3 h-3 shrink-0 transition-transform ${open ? 'rotate-180' : ''}`} />
+      </button>
+
+      {open && (
+        <>
+          <div
+            className="fixed inset-0 z-40"
+            onClick={() => setOpen(false)}
+          />
+          <div className="absolute left-0 right-0 top-full mt-1 z-50 bg-gray-900 border border-gray-700 rounded-lg shadow-xl overflow-hidden max-h-64 overflow-y-auto">
+            {available.map((p) => (
+              <button
+                key={p.id}
+                onClick={() => {
+                  onSelect(p.id)
+                  setOpen(false)
+                }}
+                className={`w-full text-left px-3 py-2 text-xs transition-colors ${
+                  p.id === currentProject
+                    ? 'bg-gray-800 text-gray-100'
+                    : 'text-gray-400 hover:bg-gray-800/50 hover:text-gray-200'
+                }`}
+              >
+                <div className="font-medium truncate">{p.id}</div>
+                {p.description && p.description !== 'No description' && (
+                  <div className="text-gray-600 truncate mt-0.5">{p.description}</div>
+                )}
+              </button>
+            ))}
+          </div>
+        </>
+      )}
+    </div>
+  )
+}

package/src/components/Sidebar.tsx

@@ -1,13 +1,24 @@
 import { Link, useRouterState } from '@tanstack/react-router'
-import { LayoutDashboard, Flag, CheckSquare, Search } from 'lucide-react'
+import { LayoutDashboard, Flag, CheckSquare, Clock, Search } from 'lucide-react'
+import { ProjectSelector } from './ProjectSelector'
+import { GitHubInput } from './GitHubInput'
+import type { AcpProject } from '../services/projects.service'
 
 const navItems = [
   { to: '/' as const, icon: LayoutDashboard, label: 'Overview' },
   { to: '/milestones' as const, icon: Flag, label: 'Milestones' },
   { to: '/tasks' as const, icon: CheckSquare, label: 'Tasks' },
+  { to: '/activity' as const, icon: Clock, label: 'Activity' },
 ]
 
-export function Sidebar() {
+interface SidebarProps {
+  projects?: AcpProject[]
+  currentProject?: string | null
+  onProjectSelect?: (projectId: string) => void
+  onGitHubLoad?: (owner: string, repo: string) => Promise<void>
+}
+
+export function Sidebar({ projects = [], currentProject = null, onProjectSelect, onGitHubLoad }: SidebarProps) {
   const location = useRouterState({ select: (s) => s.location })
 
   return (
@@ -17,6 +28,15 @@ export function Sidebar() {
           ACP Visualizer
         </span>
       </div>
+      {projects.length > 1 && onProjectSelect && (
+        <div className="px-3 pt-3">
+          <ProjectSelector
+            projects={projects}
+            currentProject={currentProject}
+            onSelect={onProjectSelect}
+          />
+        </div>
+      )}
       <div className="flex-1 py-2">
         {navItems.map((item) => {
           const isActive =
@@ -40,7 +60,7 @@ export function Sidebar() {
           )
         })}
       </div>
-      <div className="p-3 border-t border-gray-800">
+      <div className="p-3 border-t 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"
@@ -48,6 +68,9 @@ export function Sidebar() {
           <Search className="w-4 h-4" />
           Search...
         </Link>
+        {onGitHubLoad && (
+          <GitHubInput onLoad={onGitHubLoad} />
+        )}
       </div>
     </nav>
   )

package/src/components/StatusBadge.tsx

@@ -4,12 +4,14 @@ const statusStyles: Record<Status, string> = {
   completed: 'bg-green-500/15 text-green-400 border-green-500/20',
   in_progress: 'bg-blue-500/15 text-blue-400 border-blue-500/20',
   not_started: 'bg-gray-500/15 text-gray-500 border-gray-500/20',
+  wont_do: 'bg-yellow-500/15 text-yellow-500 border-yellow-500/20',
 }
 
 const statusLabels: Record<Status, string> = {
   completed: 'Completed',
   in_progress: 'In Progress',
   not_started: 'Not Started',
+  wont_do: "Won't Do",
 }
 
 export function StatusBadge({ status }: { status: Status }) {

package/src/components/StatusDot.tsx

@@ -4,6 +4,7 @@ const dotStyles: Record<Status, { symbol: string; color: string }> = {
   completed: { symbol: '✓', color: 'text-green-400' },
   in_progress: { symbol: '●', color: 'text-blue-400' },
   not_started: { symbol: '○', color: 'text-gray-500' },
+  wont_do: { symbol: '✕', color: 'text-yellow-500' },
 }
 
 export function StatusDot({ status }: { status: Status }) {

package/src/components/ViewToggle.tsx

@@ -1,31 +1,34 @@
+export type ViewMode = 'table' | 'tree' | 'kanban' | 'gantt' | 'graph'
+
 interface ViewToggleProps {
-  value: 'table' | 'tree'
-  onChange: (view: 'table' | 'tree') => void
+  value: ViewMode
+  onChange: (view: ViewMode) => void
 }
 
+const views: Array<{ id: ViewMode; label: string }> = [
+  { id: 'table', label: 'Table' },
+  { id: 'tree', label: 'Tree' },
+  { id: 'kanban', label: 'Kanban' },
+  { id: 'gantt', label: 'Gantt' },
+  { id: 'graph', label: 'Graph' },
+]
+
 export function ViewToggle({ value, onChange }: ViewToggleProps) {
   return (
     <div className="flex gap-1 bg-gray-900 border border-gray-800 rounded-lg p-0.5">
-      <button
-        onClick={() => onChange('table')}
-        className={`px-3 py-1 text-xs rounded-md transition-colors ${
-          value === 'table'
-            ? 'bg-gray-700 text-gray-100'
-            : 'text-gray-500 hover:text-gray-300'
-        }`}
-      >
-        Table
-      </button>
-      <button
-        onClick={() => onChange('tree')}
-        className={`px-3 py-1 text-xs rounded-md transition-colors ${
-          value === 'tree'
-            ? 'bg-gray-700 text-gray-100'
-            : 'text-gray-500 hover:text-gray-300'
-        }`}
-      >
-        Tree
-      </button>
+      {views.map((v) => (
+        <button
+          key={v.id}
+          onClick={() => onChange(v.id)}
+          className={`px-3 py-1 text-xs rounded-md transition-colors ${
+            value === v.id
+              ? 'bg-gray-700 text-gray-100'
+              : 'text-gray-500 hover:text-gray-300'
+          }`}
+        >
+          {v.label}
+        </button>
+      ))}
     </div>
   )
 }

package/src/contexts/ProgressContext.tsx

@@ -0,0 +1,22 @@
+import { createContext, useContext } from 'react'
+import type { ProgressData } from '../lib/types'
+
+const ProgressContext = createContext<ProgressData | null>(null)
+
+export function ProgressProvider({
+  data,
+  children,
+}: {
+  data: ProgressData | null
+  children: React.ReactNode
+}) {
+  return (
+    <ProgressContext.Provider value={data}>
+      {children}
+    </ProgressContext.Provider>
+  )
+}
+
+export function useProgressData(): ProgressData | null {
+  return useContext(ProgressContext)
+}

package/src/lib/types.ts

@@ -1,5 +1,5 @@
 /** Status values for milestones and tasks */
-export type Status = 'completed' | 'in_progress' | 'not_started'
+export type Status = 'completed' | 'in_progress' | 'not_started' | 'wont_do'
 
 /** Unknown properties from agent-maintained YAML are preserved here */
 export type ExtraFields = Record<string, unknown>

package/src/lib/yaml-loader-real.spec.ts

@@ -37,11 +37,64 @@ describe('parseProgressYaml with real files', () => {
     expect(totalTasks).toBeGreaterThan(0)
 
     for (const m of result.milestones) {
-      expect(['completed', 'in_progress', 'not_started']).toContain(m.status)
+      expect(['completed', 'in_progress', 'not_started', 'wont_do']).toContain(m.status)
     }
 
     console.log(
       `Parsed: ${result.milestones.length} milestones, ${totalTasks} tasks, ${result.recent_work.length} work entries`,
     )
   })
+
+  it('parses agentbase.me progress.yaml with inline milestones and standalone tasks', () => {
+    const path = '/home/prmichaelsen/.acp/projects/agentbase.me/agent/progress.yaml'
+    let raw: string
+    try {
+      raw = readFileSync(path, 'utf-8')
+    } catch {
+      console.log('Skipping — agentbase.me progress.yaml not found')
+      return
+    }
+
+    const result = parseProgressYaml(raw)
+
+    // Should find project metadata
+    expect(result.project.name).toBe('agentbase.me')
+
+    // Should find inline milestones (milestone_1_firebase_analytics, etc.)
+    expect(result.milestones.length).toBeGreaterThan(0)
+    const milestoneIds = result.milestones.map((m) => m.id)
+    expect(milestoneIds).toContain('M1')  // from milestone_1_firebase_analytics
+    expect(milestoneIds).toContain('M47') // from milestone_47_agent_memory_system
+
+    // Should find standard milestones too
+    expect(milestoneIds).toContain('M19') // from milestones: array
+    expect(milestoneIds).toContain('M21')
+
+    // Should find tasks from inline milestones
+    const m1Tasks = result.tasks['M1'] || []
+    expect(m1Tasks.length).toBeGreaterThan(0)
+    // Task 79 has wont_do status
+    const wontDoTask = m1Tasks.find((t) => String(t.id) === '79')
+    if (wontDoTask) {
+      expect(wontDoTask.status).toBe('wont_do')
+    }
+
+    // Should find standalone/unassigned tasks
+    const unassigned = result.tasks['_unassigned'] || []
+    expect(unassigned.length).toBeGreaterThan(0)
+    // Synthetic milestone should exist
+    expect(milestoneIds).toContain('_unassigned')
+
+    const totalTasks = Object.values(result.tasks).reduce(
+      (sum, ts) => sum + ts.length,
+      0,
+    )
+
+    // Should collect next_steps from next_immediate_steps too
+    expect(result.next_steps.length).toBeGreaterThan(0)
+
+    console.log(
+      `Parsed agentbase.me: ${result.milestones.length} milestones, ${totalTasks} tasks, ${unassigned.length} unassigned`,
+    )
+  })
 })

package/src/lib/yaml-loader.ts

@@ -47,6 +47,7 @@ function normalizeStatus(value: unknown): Status {
     .replace(/[\s-]/g, '_')
   if (s === 'completed' || s === 'done' || s === 'complete') return 'completed'
   if (s === 'in_progress' || s === 'active' || s === 'wip' || s === 'started') return 'in_progress'
+  if (s === 'wont_do' || s === 'won_t_do' || s === 'skipped' || s === 'cancelled' || s === 'canceled') return 'wont_do'
   return 'not_started'
 }
 
@@ -56,7 +57,9 @@ function safeString(value: unknown, fallback = ''): string {
 }
 
 function safeNumber(value: unknown, fallback = 0): number {
-  const n = Number(value)
+  // Strip trailing '%' (e.g. "100%" → "100") before parsing
+  const cleaned = typeof value === 'string' ? value.replace(/%$/, '') : value
+  const n = Number(cleaned)
   return Number.isFinite(n) ? n : fallback
 }
 
@@ -267,6 +270,84 @@ const EMPTY_PROGRESS_DATA: ProgressData = {
   progress: { planning: 0, implementation: 0, overall: 0 },
 }
 
+// --- Inline milestone extraction ---
+// Some progress.yaml files use top-level keys like `milestone_1_firebase_analytics:`
+// containing milestone metadata + inline `tasks:` arrays.
+
+const INLINE_MILESTONE_PATTERN = /^milestone_(\d+)_/
+
+function extractInlineMilestones(d: Record<string, unknown>): {
+  milestones: Milestone[]
+  tasks: Record<string, Task[]>
+} {
+  const milestones: Milestone[] = []
+  const tasks: Record<string, Task[]> = {}
+
+  for (const [key, value] of Object.entries(d)) {
+    const match = key.match(INLINE_MILESTONE_PATTERN)
+    if (!match) continue
+    const obj = asRecord(value)
+    // Extract milestone ID from the name field (e.g. "M1 - ...") or synthesize from key
+    const nameStr = safeString(obj.name)
+    const idFromName = nameStr.match(/^(M\d+)\b/)?.[1]
+    const milestoneId = idFromName || `M${match[1]}`
+
+    const milestone = normalizeMilestone(
+      { ...obj, id: milestoneId },
+      milestones.length,
+    )
+    milestones.push(milestone)
+
+    // Extract inline tasks if present
+    if (Array.isArray(obj.tasks)) {
+      tasks[milestoneId] = obj.tasks.map((t, i) =>
+        normalizeTask(t, milestoneId, i),
+      )
+    }
+  }
+
+  return { milestones, tasks }
+}
+
+// --- Standalone / unassigned task extraction ---
+
+function extractLooseTasks(
+  d: Record<string, unknown>,
+  keys: string[],
+): Task[] {
+  const result: Task[] = []
+  for (const key of keys) {
+    const arr = d[key]
+    if (Array.isArray(arr)) {
+      result.push(
+        ...arr.map((t, i) => normalizeTask(t, '_unassigned', result.length + i)),
+      )
+    }
+  }
+  return result
+}
+
+// --- next_steps from multiple sources ---
+
+function collectNextSteps(d: Record<string, unknown>): string[] {
+  const steps = normalizeStringArray(d.next_steps)
+  // next_immediate_steps may be a structured object with sub-keys or an array
+  const immediate = d.next_immediate_steps
+  if (immediate) {
+    if (Array.isArray(immediate)) {
+      steps.push(...immediate.map(String))
+    } else if (typeof immediate === 'object' && immediate !== null) {
+      // Structured object like { ready_to_implement: [...], security: [...] }
+      for (const arr of Object.values(immediate)) {
+        if (Array.isArray(arr)) {
+          steps.push(...arr.map(String))
+        }
+      }
+    }
+  }
+  return steps
+}
+
 export function parseProgressYaml(raw: string): ProgressData {
   try {
     // json: true allows duplicated keys (last wins) — common in agent-maintained YAML
@@ -276,14 +357,62 @@ export function parseProgressYaml(raw: string): ProgressData {
     }
     const d = doc as Record<string, unknown>
 
-    const milestones = normalizeMilestones(d.milestones)
+    // Standard milestones array
+    const standardMilestones = normalizeMilestones(d.milestones)
+
+    // Inline milestone_N_* top-level keys
+    const inline = extractInlineMilestones(d)
+
+    // Merge: inline milestones first (they tend to be older/lower-numbered),
+    // then standard milestones. Deduplicate by ID (standard wins).
+    const seenIds = new Set<string>()
+    const allMilestones: Milestone[] = []
+    for (const m of [...inline.milestones, ...standardMilestones]) {
+      if (!seenIds.has(m.id)) {
+        seenIds.add(m.id)
+        allMilestones.push(m)
+      }
+    }
+
+    // Standard tasks (from top-level `tasks:` key — last-wins with json: true)
+    const standardTasks = normalizeTasks(d.tasks, allMilestones)
+
+    // Merge inline tasks with standard tasks (standard wins on conflict)
+    const allTasks: Record<string, Task[]> = { ...inline.tasks }
+    for (const [key, tasks] of Object.entries(standardTasks)) {
+      allTasks[key] = tasks // standard overwrites inline for same key
+    }
+
+    // Standalone and unassigned tasks
+    const looseTasks = extractLooseTasks(d, ['standalone_tasks', 'unassigned_tasks'])
+    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')
+        allMilestones.push({
+          id: '_unassigned',
+          name: 'Unassigned Tasks',
+          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',
+          extra: { synthetic: true },
+        })
+      }
+    }
 
     return {
       project: normalizeProject(d.project),
-      milestones,
-      tasks: normalizeTasks(d.tasks, milestones),
+      milestones: allMilestones,
+      tasks: allTasks,
       recent_work: normalizeWorkEntries(d.recent_work),
-      next_steps: normalizeStringArray(d.next_steps),
+      next_steps: collectNextSteps(d),
       notes: normalizeStringArray(d.notes),
       current_blockers: normalizeStringArray(d.current_blockers),
       documentation: normalizeDocStats(d.documentation),