@prmichaelsen/acp-visualizer 0.1.0

package/src/lib/useCollapse.ts

@@ -0,0 +1,31 @@
+import { useRef, useState, useEffect } from 'react'
+
+export function useCollapse(open: boolean) {
+  const ref = useRef<HTMLDivElement>(null)
+  const [height, setHeight] = useState<number | undefined>(open ? undefined : 0)
+
+  useEffect(() => {
+    const el = ref.current
+    if (!el) return
+
+    if (open) {
+      setHeight(el.scrollHeight)
+      const id = setTimeout(() => setHeight(undefined), 300)
+      return () => clearTimeout(id)
+    } else {
+      setHeight(el.scrollHeight)
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => setHeight(0))
+      })
+    }
+  }, [open])
+
+  return {
+    ref,
+    style: {
+      height: height != null ? `${height}px` : ('auto' as const),
+      overflow: 'hidden' as const,
+      transition: 'height 300ms cubic-bezier(0.4, 0, 0.2, 1)',
+    },
+  }
+}

package/src/lib/useFilteredData.ts

@@ -0,0 +1,55 @@
+import { useMemo } from 'react'
+import { buildSearchIndex } from './search'
+import type { ProgressData, Status } from './types'
+
+interface FilterState {
+  status: Status | 'all'
+  search: string
+}
+
+export function useFilteredData(
+  data: ProgressData | null,
+  filters: FilterState,
+): ProgressData | null {
+  return useMemo(() => {
+    if (!data) return null
+
+    let milestones = data.milestones
+    let tasks = { ...data.tasks }
+
+    // Status filter
+    if (filters.status !== 'all') {
+      milestones = milestones.filter((m) => m.status === filters.status)
+      tasks = Object.fromEntries(
+        Object.entries(tasks).map(([id, ts]) => [
+          id,
+          ts.filter((t) => t.status === filters.status),
+        ]),
+      )
+    }
+
+    // Search filter
+    if (filters.search.trim()) {
+      const index = buildSearchIndex(data)
+      const results = index.search(filters.search)
+      const matchedMilestoneIds = new Set(
+        results.map((r) => r.item.milestone.id),
+      )
+      const matchedTaskIds = new Set(
+        results.filter((r) => r.item.task).map((r) => r.item.task!.id),
+      )
+
+      milestones = milestones.filter((m) => matchedMilestoneIds.has(m.id))
+      tasks = Object.fromEntries(
+        Object.entries(tasks).map(([id, ts]) => [
+          id,
+          ts.filter(
+            (t) => matchedTaskIds.has(t.id) || matchedMilestoneIds.has(id),
+          ),
+        ]),
+      )
+    }
+
+    return { ...data, milestones, tasks }
+  }, [data, filters.status, filters.search])
+}

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

@@ -0,0 +1,47 @@
+import { describe, it, expect } from 'vitest'
+import { readFileSync } from 'fs'
+import { resolve } from 'path'
+import { parseProgressYaml } from './yaml-loader'
+
+const PROJECT_ROOT = resolve(__dirname, '../../')
+
+describe('parseProgressYaml with real files', () => {
+  it('parses the local project progress.yaml', () => {
+    const raw = readFileSync(resolve(PROJECT_ROOT, 'agent/progress.yaml'), 'utf-8')
+    const result = parseProgressYaml(raw)
+
+    expect(result.project.name).toBe('agent-context-protocol-visualizer')
+    expect(result.milestones.length).toBeGreaterThan(0)
+    expect(result.milestones[0].id).toBeTruthy()
+  })
+
+  it('parses a large real-world progress.yaml (remember-core)', () => {
+    const path = '/home/prmichaelsen/.acp/projects/remember-core/agent/progress.yaml'
+    let raw: string
+    try {
+      raw = readFileSync(path, 'utf-8')
+    } catch {
+      console.log('Skipping — remember-core progress.yaml not found')
+      return
+    }
+
+    const result = parseProgressYaml(raw)
+
+    expect(result.project.name).toBe('remember-core')
+    expect(result.milestones.length).toBeGreaterThan(0)
+
+    const totalTasks = Object.values(result.tasks).reduce(
+      (sum, ts) => sum + ts.length,
+      0,
+    )
+    expect(totalTasks).toBeGreaterThan(0)
+
+    for (const m of result.milestones) {
+      expect(['completed', 'in_progress', 'not_started']).toContain(m.status)
+    }
+
+    console.log(
+      `Parsed: ${result.milestones.length} milestones, ${totalTasks} tasks, ${result.recent_work.length} work entries`,
+    )
+  })
+})

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

@@ -0,0 +1,201 @@
+import { describe, it, expect } from 'vitest'
+import { parseProgressYaml } from './yaml-loader'
+
+describe('parseProgressYaml', () => {
+  it('parses a complete progress.yaml', () => {
+    const yaml = `
+project:
+  name: test-project
+  version: 1.0.0
+  started: "2026-01-01"
+  status: in_progress
+  current_milestone: milestone_1
+  description: A test project
+
+milestones:
+  - id: milestone_1
+    name: First Milestone
+    status: in_progress
+    progress: 50
+    started: "2026-01-01"
+    tasks_completed: 1
+    tasks_total: 2
+
+tasks:
+  milestone_1:
+    - id: task_1
+      name: First Task
+      status: completed
+      file: agent/tasks/task-1.md
+      estimated_hours: "2"
+      completed_date: "2026-01-02"
+    - id: task_2
+      name: Second Task
+      status: not_started
+
+recent_work:
+  - date: "2026-01-02"
+    description: Did stuff
+    items:
+      - item 1
+      - item 2
+
+next_steps:
+  - Do next thing
+
+notes:
+  - A note
+
+current_blockers: []
+
+progress:
+  planning: 100
+  implementation: 50
+  overall: 60
+`
+    const result = parseProgressYaml(yaml)
+
+    expect(result.project.name).toBe('test-project')
+    expect(result.project.version).toBe('1.0.0')
+    expect(result.project.status).toBe('in_progress')
+    expect(result.milestones).toHaveLength(1)
+    expect(result.milestones[0].name).toBe('First Milestone')
+    expect(result.milestones[0].progress).toBe(50)
+    expect(result.tasks.milestone_1).toHaveLength(2)
+    expect(result.tasks.milestone_1[0].status).toBe('completed')
+    expect(result.tasks.milestone_1[1].status).toBe('not_started')
+    expect(result.recent_work).toHaveLength(1)
+    expect(result.recent_work[0].items).toEqual(['item 1', 'item 2'])
+    expect(result.next_steps).toEqual(['Do next thing'])
+    expect(result.progress.overall).toBe(60)
+  })
+
+  it('handles empty/minimal YAML', () => {
+    const result = parseProgressYaml('')
+    expect(result.project.name).toBe('Unknown')
+    expect(result.milestones).toEqual([])
+    expect(result.tasks).toEqual({})
+  })
+
+  it('handles totally invalid YAML', () => {
+    const result = parseProgressYaml('{{{{not yaml at all')
+    expect(result.project.name).toBe('Unknown')
+    expect(result.milestones).toEqual([])
+  })
+
+  it('handles missing sections gracefully', () => {
+    const yaml = `
+project:
+  name: minimal
+`
+    const result = parseProgressYaml(yaml)
+    expect(result.project.name).toBe('minimal')
+    expect(result.project.status).toBe('not_started')
+    expect(result.milestones).toEqual([])
+    expect(result.tasks).toEqual({})
+    expect(result.next_steps).toEqual([])
+    expect(result.notes).toEqual([])
+    expect(result.current_blockers).toEqual([])
+  })
+
+  it('fuzzy-matches status values', () => {
+    const yaml = `
+milestones:
+  - id: m1
+    name: Done One
+    status: done
+  - id: m2
+    name: Active One
+    status: active
+  - id: m3
+    name: WIP One
+    status: wip
+  - id: m4
+    name: In Progress One
+    status: "in progress"
+  - id: m5
+    name: Complete One
+    status: complete
+  - id: m6
+    name: Started One
+    status: started
+`
+    const result = parseProgressYaml(yaml)
+    expect(result.milestones[0].status).toBe('completed')
+    expect(result.milestones[1].status).toBe('in_progress')
+    expect(result.milestones[2].status).toBe('in_progress')
+    expect(result.milestones[3].status).toBe('in_progress')
+    expect(result.milestones[4].status).toBe('completed')
+    expect(result.milestones[5].status).toBe('in_progress')
+  })
+
+  it('preserves unknown properties in extra fields', () => {
+    const yaml = `
+project:
+  name: test
+  custom_field: hello
+  priority: high
+
+milestones:
+  - id: m1
+    name: Test
+    status: in_progress
+    risk_level: high
+    owner: alice
+`
+    const result = parseProgressYaml(yaml)
+    expect(result.project.extra).toEqual({ custom_field: 'hello', priority: 'high' })
+    expect(result.milestones[0].extra).toEqual({ risk_level: 'high', owner: 'alice' })
+  })
+
+  it('resolves key aliases', () => {
+    const yaml = `
+tasks:
+  m1:
+    - id: t1
+      title: Aliased Name
+      est_hours: "4"
+      done_date: "2026-01-05"
+      path: agent/tasks/t1.md
+`
+    const result = parseProgressYaml(yaml)
+    const task = result.tasks.m1[0]
+    expect(task.name).toBe('Aliased Name')
+    expect(task.estimated_hours).toBe('4')
+    expect(task.completed_date).toBe('2026-01-05')
+    expect(task.file).toBe('agent/tasks/t1.md')
+  })
+
+  it('coerces string-for-array', () => {
+    const yaml = `
+next_steps: "just one step"
+notes: "single note"
+`
+    const result = parseProgressYaml(yaml)
+    expect(result.next_steps).toEqual(['just one step'])
+    expect(result.notes).toEqual(['single note'])
+  })
+
+  it('generates IDs when missing', () => {
+    const yaml = `
+milestones:
+  - name: No ID Milestone
+    status: not_started
+`
+    const result = parseProgressYaml(yaml)
+    expect(result.milestones[0].id).toBe('milestone_1')
+  })
+
+  it('handles null values in dates', () => {
+    const yaml = `
+milestones:
+  - id: m1
+    name: Test
+    started: null
+    completed: null
+`
+    const result = parseProgressYaml(yaml)
+    expect(result.milestones[0].started).toBeNull()
+    expect(result.milestones[0].completed).toBeNull()
+  })
+})

package/src/lib/yaml-loader.ts

@@ -0,0 +1,265 @@
+import yaml from 'js-yaml'
+import type {
+  ProgressData,
+  ProjectMetadata,
+  Milestone,
+  Task,
+  WorkEntry,
+  DocumentationStats,
+  ProgressSummary,
+  Status,
+  ExtraFields,
+} from './types'
+
+// --- Key alias maps for agent drift ---
+
+const PROJECT_ALIASES: Record<string, string> = {
+  project_name: 'name',
+  title: 'name',
+}
+
+const MILESTONE_ALIASES: Record<string, string> = {
+  title: 'name',
+  est_weeks: 'estimated_weeks',
+  weeks: 'estimated_weeks',
+  tasks_done: 'tasks_completed',
+  total_tasks: 'tasks_total',
+}
+
+const TASK_ALIASES: Record<string, string> = {
+  title: 'name',
+  est_hours: 'estimated_hours',
+  hours: 'estimated_hours',
+  estimate: 'estimated_hours',
+  completed: 'completed_date',
+  done_date: 'completed_date',
+  filename: 'file',
+  path: 'file',
+  milestone: 'milestone_id',
+}
+
+// --- Core helpers ---
+
+function normalizeStatus(value: unknown): Status {
+  const s = String(value || 'not_started')
+    .toLowerCase()
+    .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'
+  return 'not_started'
+}
+
+function safeString(value: unknown, fallback = ''): string {
+  if (value == null) return fallback
+  return String(value)
+}
+
+function safeNumber(value: unknown, fallback = 0): number {
+  const n = Number(value)
+  return Number.isFinite(n) ? n : fallback
+}
+
+function normalizeStringArray(value: unknown): string[] {
+  if (!value) return []
+  if (typeof value === 'string') return [value]
+  if (!Array.isArray(value)) return []
+  return value.map(String)
+}
+
+function resolveAliases(
+  obj: Record<string, unknown>,
+  aliases: Record<string, string>,
+): Record<string, unknown> {
+  const resolved: Record<string, unknown> = {}
+  for (const [key, value] of Object.entries(obj)) {
+    const canonical = aliases[key] || key
+    // Don't overwrite if canonical already set
+    if (!(canonical in resolved)) {
+      resolved[canonical] = value
+    }
+  }
+  return resolved
+}
+
+function extractKnown(
+  obj: Record<string, unknown>,
+  knownKeys: string[],
+): { known: Record<string, unknown>; extra: ExtraFields } {
+  const known: Record<string, unknown> = {}
+  const extra: ExtraFields = {}
+  for (const [key, value] of Object.entries(obj)) {
+    if (knownKeys.includes(key)) {
+      known[key] = value
+    } else {
+      extra[key] = value
+    }
+  }
+  return { known, extra }
+}
+
+function asRecord(value: unknown): Record<string, unknown> {
+  if (value && typeof value === 'object' && !Array.isArray(value)) {
+    return value as Record<string, unknown>
+  }
+  return {}
+}
+
+// --- Entity normalizers ---
+
+const PROJECT_KEYS = ['name', 'version', 'started', 'status', 'current_milestone', 'description']
+
+function normalizeProject(raw: unknown): ProjectMetadata {
+  const obj = resolveAliases(asRecord(raw), PROJECT_ALIASES)
+  const { known, extra } = extractKnown(obj, PROJECT_KEYS)
+  return {
+    name: safeString(known.name, 'Untitled Project'),
+    version: safeString(known.version, '0.0.0'),
+    started: safeString(known.started),
+    status: normalizeStatus(known.status),
+    current_milestone: known.current_milestone ? safeString(known.current_milestone) : undefined,
+    description: safeString(known.description),
+    extra,
+  }
+}
+
+const MILESTONE_KEYS = [
+  'id', 'name', 'status', 'progress', 'started', 'completed',
+  'estimated_weeks', 'tasks_completed', 'tasks_total', 'notes',
+]
+
+function normalizeMilestone(raw: unknown, index: number): Milestone {
+  const obj = resolveAliases(asRecord(raw), MILESTONE_ALIASES)
+  const { known, extra } = extractKnown(obj, MILESTONE_KEYS)
+  return {
+    id: safeString(known.id, `milestone_${index + 1}`),
+    name: safeString(known.name, `Milestone ${index + 1}`),
+    status: normalizeStatus(known.status),
+    progress: safeNumber(known.progress),
+    started: known.started ? safeString(known.started) : null,
+    completed: known.completed ? safeString(known.completed) : null,
+    estimated_weeks: safeString(known.estimated_weeks, '0'),
+    tasks_completed: safeNumber(known.tasks_completed),
+    tasks_total: safeNumber(known.tasks_total),
+    notes: safeString(known.notes),
+    extra,
+  }
+}
+
+function normalizeMilestones(raw: unknown): Milestone[] {
+  if (!Array.isArray(raw)) return []
+  return raw.map((item, i) => normalizeMilestone(item, i))
+}
+
+const TASK_KEYS = [
+  'id', 'name', 'status', 'milestone_id', 'file',
+  'estimated_hours', 'completed_date', 'notes',
+]
+
+function normalizeTask(raw: unknown, milestoneId: string, index: number): Task {
+  const obj = resolveAliases(asRecord(raw), TASK_ALIASES)
+  const { known, extra } = extractKnown(obj, TASK_KEYS)
+  return {
+    id: safeString(known.id, `task_${index + 1}`),
+    name: safeString(known.name, `Task ${index + 1}`),
+    status: normalizeStatus(known.status),
+    milestone_id: safeString(known.milestone_id, milestoneId),
+    file: safeString(known.file),
+    estimated_hours: safeString(known.estimated_hours, '0'),
+    completed_date: known.completed_date ? safeString(known.completed_date) : null,
+    notes: safeString(known.notes),
+    extra,
+  }
+}
+
+function normalizeTasks(raw: unknown): Record<string, Task[]> {
+  const result: Record<string, Task[]> = {}
+  const obj = asRecord(raw)
+  for (const [milestoneId, tasks] of Object.entries(obj)) {
+    if (Array.isArray(tasks)) {
+      result[milestoneId] = tasks.map((t, i) => normalizeTask(t, milestoneId, i))
+    }
+  }
+  return result
+}
+
+function normalizeWorkEntry(raw: unknown): WorkEntry {
+  const obj = asRecord(raw)
+  const knownKeys = ['date', 'description', 'items']
+  const { known, extra } = extractKnown(obj, knownKeys)
+  return {
+    date: safeString(known.date),
+    description: safeString(known.description),
+    items: normalizeStringArray(known.items),
+    extra,
+  }
+}
+
+function normalizeWorkEntries(raw: unknown): WorkEntry[] {
+  if (!Array.isArray(raw)) return []
+  return raw.map(normalizeWorkEntry)
+}
+
+function normalizeDocStats(raw: unknown): DocumentationStats {
+  const obj = asRecord(raw)
+  return {
+    design_documents: safeNumber(obj.design_documents),
+    milestone_documents: safeNumber(obj.milestone_documents),
+    pattern_documents: safeNumber(obj.pattern_documents),
+    task_documents: safeNumber(obj.task_documents),
+  }
+}
+
+function normalizeProgress(raw: unknown): ProgressSummary {
+  const obj = asRecord(raw)
+  return {
+    planning: safeNumber(obj.planning),
+    implementation: safeNumber(obj.implementation),
+    overall: safeNumber(obj.overall),
+  }
+}
+
+// --- Main parser ---
+
+const EMPTY_PROGRESS_DATA: ProgressData = {
+  project: {
+    name: 'Unknown',
+    version: '0.0.0',
+    started: '',
+    status: 'not_started',
+    description: '',
+    extra: {},
+  },
+  milestones: [],
+  tasks: {},
+  recent_work: [],
+  next_steps: [],
+  notes: [],
+  current_blockers: [],
+  documentation: { design_documents: 0, milestone_documents: 0, pattern_documents: 0, task_documents: 0 },
+  progress: { planning: 0, implementation: 0, overall: 0 },
+}
+
+export function parseProgressYaml(raw: string): ProgressData {
+  try {
+    // json: true allows duplicated keys (last wins) — common in agent-maintained YAML
+    const doc = yaml.load(raw, { json: true })
+    if (!doc || typeof doc !== 'object') {
+      return { ...EMPTY_PROGRESS_DATA }
+    }
+    const d = doc as Record<string, unknown>
+
+    return {
+      project: normalizeProject(d.project),
+      milestones: normalizeMilestones(d.milestones),
+      tasks: normalizeTasks(d.tasks),
+      recent_work: normalizeWorkEntries(d.recent_work),
+      next_steps: normalizeStringArray(d.next_steps),
+      notes: normalizeStringArray(d.notes),
+      current_blockers: normalizeStringArray(d.current_blockers),
+      documentation: normalizeDocStats(d.documentation),
+      progress: normalizeProgress(d.progress),
+    }
+  } catch {
+    return { ...EMPTY_PROGRESS_DATA }
+  }
+}