prjct-cli 0.11.5 → 0.12.0

package/packages/web/app/project/[id]/stats/page.tsx

@@ -1,206 +1,247 @@
-'use client'
-
-import { use, useMemo } from 'react'
-import { useRouter } from 'next/navigation'
-import { useProject } from '@/hooks/useProjects'
-import { useProjectStats } from '@/hooks/useProjectStats'
-import { Button } from '@/components/ui/button'
-import { ArrowLeft } from 'lucide-react'
+import { notFound } from 'next/navigation'
+import {
+  getStats,
+  getInsightMessage,
+  calculateStreak,
+  calculateHealthScore,
+  getVelocityChange,
+  getWeeklyVelocityData,
+  type StatsResult
+} from '@/lib/services/stats.server'
+import { getProject } from '@/lib/services/projects.server'
 import type { TimelineEvent } from '@/lib/parse-prjct-files'
 
-import {
-  BentoGrid,
-  BentoCardSkeleton,
-  HeroSection,
-  NowCard,
-  VelocityCard,
-  StreakCard,
-  QueueCard,
-  ShipsCard,
-  IdeasCard,
-  AgentsCard,
-  RoadmapCard,
-  ActivityTimeline,
-} from '@/components/stats'
-
-// Calculate streak from timeline
-function calculateStreak(timeline: TimelineEvent[]): number {
-  if (!timeline.length) return 0
-  const dates = new Set(timeline.map(e => e.ts?.split('T')[0]).filter(Boolean))
-  let streak = 0
-  const today = new Date()
-  for (let i = 0; i < 30; i++) {
-    const date = new Date(today)
-    date.setDate(date.getDate() - i)
-    const dateStr = date.toISOString().split('T')[0]
-    if (dates.has(dateStr)) streak++
-    else if (i > 0) break
-  }
-  return streak
+import { BentoGrid } from '@/components/BentoGrid'
+import { HeroSection } from '@/components/HeroSection'
+import { NowCard } from '@/components/NowCard'
+import { VelocityCard } from '@/components/VelocityCard'
+import { StreakCard } from '@/components/StreakCard'
+import { QueueCard } from '@/components/QueueCard'
+import { ShipsCard } from '@/components/ShipsCard'
+import { IdeasCard } from '@/components/IdeasCard'
+import { AgentsCard } from '@/components/AgentsCard'
+import { RoadmapCard } from '@/components/RoadmapCard'
+import { ActivityTimeline } from '@/components/ActivityTimeline'
+
+// Types for normalized component data
+interface NormalizedCurrentTask {
+  task: string
+  startedAt?: string
+  agent?: string
+  estimatedDuration?: string
+  pausedAt?: string
+  pauseReason?: string
 }
 
-// Health score (0-100)
-function getHealthScore(stats: any): number {
-  if (!stats) return 0
-  const velocity = stats?.metrics?.velocity?.tasksPerDay || 0
-  const hasCurrentTask = !!stats?.currentTask
-  const queueSize = stats?.queue?.length || 0
-  const recentActivity = stats?.timeline?.slice(0, 7).length || 0
+interface NormalizedQueueItem {
+  task: string
+  priority?: 'low' | 'medium' | 'high' | 'critical' | number
+  estimatedDuration?: string
+}
 
-  let score = 0
-  score += Math.min(30, velocity * 15)
-  score += hasCurrentTask ? 20 : 0
-  score += queueSize > 0 && queueSize < 15 ? 20 : queueSize === 0 ? 5 : 10
-  score += Math.min(30, recentActivity * 5)
+interface NormalizedShip {
+  name: string
+  date: string
+  duration?: string
+}
 
-  return Math.min(100, Math.round(score))
+interface NormalizedIdea {
+  title: string
+  impact?: string
 }
 
-// Contextual insight message
-function getInsightMessage(stats: any, streak: number): string {
-  if (!stats) return ''
+interface NormalizedAgent {
+  name: string
+  description?: string
+  successRate?: number
+  tasksCompleted?: number
+  bestFor?: string[]
+}
 
-  const velocity = stats?.metrics?.velocity?.tasksPerDay || 0
-  const hasCurrentTask = !!stats?.currentTask
-  const queueSize = stats?.queue?.length || 0
-  const shipsCount = stats?.summary?.totalShipsEver || 0
+interface NormalizedRoadmap {
+  phases: Array<{
+    name: string
+    progress: number
+    features?: Array<{ name: string; status: string }>
+  }>
+  progress: number
+}
 
-  if (hasCurrentTask && streak > 3) return 'Killing it. Keep the momentum.'
-  if (hasCurrentTask) return 'Good focus. Ship when ready.'
-  if (queueSize === 0) return 'Queue empty. Time to plan the next feature.'
-  if (velocity > 2) return 'Fast pace. Watch for burnout.'
-  if (shipsCount === 0) return 'No ships yet. Start small, ship fast.'
-  if (streak === 0) return 'Get back in the flow. Start something.'
-  return 'Steady progress. Pick the next task.'
+// Data normalization functions
+function normalizeCurrentTask(stats: StatsResult): NormalizedCurrentTask | null {
+  if (stats.state?.currentTask) {
+    return {
+      task: stats.state.currentTask.description,
+      startedAt: stats.state.currentTask.startedAt,
+      // Simplified - removed legacy fields not in new schema
+    }
+  }
+  return stats.legacyStats?.currentTask ?? null
 }
 
-// Calculate velocity change (simulated)
-function getVelocityChange(velocity: number): number {
-  return velocity > 2 ? 15 : velocity > 1 ? 5 : velocity > 0 ? 0 : -10
+function normalizeQueue(stats: StatsResult): NormalizedQueueItem[] {
+  if (stats.queue?.tasks) {
+    return stats.queue.tasks
+      .filter(t => !t.completed)
+      .map(q => ({
+        task: q.description,
+        priority: q.priority,
+      }))
+  }
+  return stats.legacyStats?.queue ?? []
 }
 
-// Get weekly velocity data from timeline
-function getWeeklyVelocityData(timeline: TimelineEvent[]): number[] {
-  const today = new Date()
-  const counts: number[] = []
+function normalizeRoadmap(stats: StatsResult): NormalizedRoadmap | null {
+  const features = stats.roadmap?.features ?? []
+  if (features.length > 0) {
+    const completed = features.filter(f =>
+      f.status === 'shipped' || f.status === 'completed'
+    ).length
+
+    return {
+      phases: features.map(f => ({
+        name: f.name,
+        progress: f.status === 'shipped' || f.status === 'completed' ? 100 :
+                  f.status === 'active' ? 50 : 0,
+        features: f.tasks.map(t => ({
+          name: t.description,
+          status: t.completed ? 'completed' : 'pending'
+        }))
+      })),
+      progress: Math.round((completed / features.length) * 100)
+    }
+  }
+  return stats.legacyStats?.roadmap ?? null
+}
+
+function normalizeShipped(stats: StatsResult): NormalizedShip[] {
+  const items = stats.shipped?.items ?? []
+  return items.map(s => ({
+    name: s.name,
+    date: s.shippedAt,
+  }))
+}
 
-  for (let i = 6; i >= 0; i--) {
-    const date = new Date(today)
-    date.setDate(date.getDate() - i)
-    const dateStr = date.toISOString().split('T')[0]
+function normalizeIdeas(stats: StatsResult): NormalizedIdea[] {
+  const ideas = stats.ideas?.ideas ?? []
+  return ideas
+    .filter(i => i.status === 'pending')
+    .map(i => ({
+      title: i.text,
+      impact: i.priority.toUpperCase()
+    }))
+}
 
-    const count = timeline.filter(e => {
-      if (!e.ts) return false
-      return e.ts.startsWith(dateStr) && e.type === 'task_complete'
-    }).length
+function normalizeAgents(stats: StatsResult): NormalizedAgent[] {
+  return stats.agents.map(a => ({
+    name: a.name,
+    description: a.description,
+    successRate: a.successRate,
+    tasksCompleted: a.tasksCompleted,
+    bestFor: a.bestFor,
+  }))
+}
 
-    counts.push(count)
+function normalizeTimeline(stats: StatsResult): TimelineEvent[] {
+  if (stats.metrics?.recentActivity?.length) {
+    return stats.metrics.recentActivity.map((a: { timestamp: string; description: string; action?: string }) => ({
+      ts: a.timestamp,
+      type: a.action || 'task_completed',
+      task: a.description,
+    }))
   }
+  return stats.legacyStats?.timeline ?? []
+}
 
-  return counts
+function getVelocity(stats: StatsResult): number {
+  if (stats.metrics?.velocity?.tasksPerDay) {
+    return stats.metrics.velocity.tasksPerDay
+  }
+  return stats.legacyStats?.metrics?.velocity?.tasksPerDay ?? 0
 }
 
-function LoadingSkeleton() {
-  return (
-    <div className="p-8 space-y-8">
-      <div className="flex items-start gap-6">
-        <div className="h-20 w-20 rounded-full bg-muted animate-pulse" />
-        <div className="space-y-3">
-          <div className="h-16 w-32 bg-muted rounded animate-pulse" />
-          <div className="h-4 w-48 bg-muted rounded animate-pulse" />
-        </div>
-      </div>
-      <BentoGrid>
-        <BentoCardSkeleton size="2x2" />
-        <BentoCardSkeleton size="1x1" />
-        <BentoCardSkeleton size="2x2" />
-        <BentoCardSkeleton size="1x1" />
-        <BentoCardSkeleton size="1x2" />
-        <BentoCardSkeleton size="1x2" />
-        <BentoCardSkeleton size="1x1" />
-        <BentoCardSkeleton size="1x1" />
-      </BentoGrid>
-    </div>
-  )
+function getTotalShips(stats: StatsResult): number {
+  return stats.shipped?.items?.length ?? stats.legacyStats?.summary?.totalShipsEver ?? 0
 }
 
-export default function ProjectStatsPage({ params }: { params: Promise<{ id: string }> }) {
-  const { id: projectId } = use(params)
-  const router = useRouter()
+function getTasksCompleted(stats: StatsResult): number {
+  return stats.metrics?.currentSprint?.tasksCompleted ?? stats.legacyStats?.metrics?.tasksCompleted ?? 0
+}
 
-  const { data: project, isLoading: projectLoading } = useProject(projectId)
-  const { data, isLoading: statsLoading } = useProjectStats(projectId)
-  const stats = data?.stats
+interface PageProps {
+  params: Promise<{ id: string }>
+}
 
-  const streak = useMemo(() => calculateStreak(stats?.timeline || []), [stats?.timeline])
-  const healthScore = useMemo(() => getHealthScore(stats), [stats])
-  const insightMessage = useMemo(() => getInsightMessage(stats, streak), [stats, streak])
-  const velocity = stats?.metrics?.velocity?.tasksPerDay || 0
-  const velocityChange = useMemo(() => getVelocityChange(velocity), [velocity])
-  const weeklyVelocityData = useMemo(() => getWeeklyVelocityData(stats?.timeline || []), [stats?.timeline])
+export default async function ProjectStatsPage({ params }: PageProps) {
+  const { id: projectId } = await params
 
-  if (projectLoading || statsLoading) {
-    return <LoadingSkeleton />
-  }
+  // Fetch data directly on server - no API calls
+  const [project, stats] = await Promise.all([
+    getProject(projectId),
+    getStats(projectId)
+  ])
 
-  if (!project || !stats) {
-    return (
-      <div className="flex items-center justify-center h-full">
-        <div className="text-center space-y-4">
-          <p className="text-4xl text-muted-foreground">404</p>
-          <Button variant="ghost" onClick={() => router.back()}>
-            <ArrowLeft className="w-4 h-4 mr-2" />
-            Back
-          </Button>
-        </div>
-      </div>
-    )
+  if (!stats.hasData) {
+    notFound()
   }
 
+  // Compute derived values using service functions
+  const streak = calculateStreak(stats.metrics)
+  const healthScore = calculateHealthScore(stats)
+  const velocity = getVelocity(stats)
+  const velocityChange = getVelocityChange(velocity)
+  const insightMessage = getInsightMessage(stats, streak)
+  const weeklyVelocityData = getWeeklyVelocityData(stats.metrics)
+
+  // Normalize data for components
+  const currentTask = normalizeCurrentTask(stats)
+  const queue = normalizeQueue(stats)
+  const roadmap = normalizeRoadmap(stats)
+  const shipped = normalizeShipped(stats)
+  const ideas = normalizeIdeas(stats)
+  const agents = normalizeAgents(stats)
+  const timeline = normalizeTimeline(stats)
+  const totalShips = getTotalShips(stats)
+  const tasksCompleted = getTasksCompleted(stats)
+
   return (
-    <div className="flex h-full flex-col p-8 overflow-auto">
-      {/* Hero Section */}
-      <HeroSection
-        projectId={projectId}
-        projectName={project.name || projectId}
-        tasksCompleted={stats.metrics.tasksCompleted}
-        healthScore={healthScore}
-        velocity={velocity}
-        velocityChange={velocityChange}
-        insightMessage={insightMessage}
-        timeline={stats.timeline}
-      />
-
-      {/* Bento Grid */}
-      <BentoGrid className="mt-8">
-        {/* Row 1: NOW (2x2), VELOCITY (1x1), ROADMAP (2x2) */}
-        <NowCard currentTask={stats.currentTask} />
+    <div className="flex h-full flex-col p-4 md:p-8 overflow-auto">
+      {/* Mobile: Add padding for hamburger menu */}
+      <div className="pl-10 md:pl-0">
+        <HeroSection
+          projectId={projectId}
+          projectName={project?.name ?? projectId}
+          tasksCompleted={tasksCompleted}
+          healthScore={healthScore}
+          velocity={velocity}
+          velocityChange={velocityChange}
+          insightMessage={insightMessage}
+          timeline={timeline}
+        />
+      </div>
+
+      {/* Bento Grid - Server Components */}
+      <BentoGrid className="mt-6 md:mt-8">
+        <NowCard currentTask={currentTask} />
         <VelocityCard
           tasksPerDay={velocity}
           weeklyData={weeklyVelocityData}
           change={velocityChange}
         />
-        <RoadmapCard roadmap={stats.roadmap} />
-
-        {/* STREAK under VELOCITY */}
+        <RoadmapCard roadmap={roadmap} />
         <StreakCard streak={streak} />
-
-        {/* Row 2: QUEUE (1x2), SHIPS (1x2), IDEAS (1x1), AGENTS (1x1) */}
-        <QueueCard queue={stats.queue || []} />
-        <ShipsCard
-          ships={stats.shipped || []}
-          totalShips={stats.summary?.totalShipsEver || 0}
-        />
-        <IdeasCard ideas={stats.ideas?.pending || []} />
-        <AgentsCard agents={stats.agents || []} />
+        <QueueCard queue={queue} />
+        <ShipsCard ships={shipped} totalShips={totalShips} />
+        <IdeasCard ideas={ideas} />
+        <AgentsCard agents={agents} />
       </BentoGrid>
 
-      {/* Activity Timeline */}
-      <div className="mt-8">
-        <ActivityTimeline timeline={stats.timeline || []} />
+      {/* Activity Timeline - Client Component */}
+      <div className="mt-6 md:mt-8">
+        <ActivityTimeline timeline={timeline} />
       </div>
 
-      <div className="h-8" />
+      <div className="h-6 md:h-8" />
     </div>
   )
 }

package/packages/web/app/settings/page.tsx

@@ -1,12 +1,18 @@
 'use client'
 
-import { useQuery } from '@tanstack/react-query'
+import { useState } from 'react'
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
 import { useTheme } from 'next-themes'
-import { Settings as SettingsIcon, CheckCircle, XCircle, Terminal, Sun, Moon, Monitor } from 'lucide-react'
+import { Settings as SettingsIcon, CheckCircle, XCircle, Terminal, Sun, Moon, Monitor, Key, Eye, EyeOff, Loader2, Trash2, RefreshCw, Database } from 'lucide-react'
 import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
 
 export default function Settings() {
   const { theme, setTheme } = useTheme()
+  const queryClient = useQueryClient()
+  const [apiKey, setApiKey] = useState('')
+  const [showKey, setShowKey] = useState(false)
+
   const { data: claudeStatus } = useQuery({
     queryKey: ['claude-status'],
     queryFn: async () => {
@@ -16,6 +22,79 @@ export default function Settings() {
     }
   })
 
+  const { data: settings } = useQuery({
+    queryKey: ['settings'],
+    queryFn: async () => {
+      const res = await fetch('/api/settings')
+      const json = await res.json()
+      return json.data
+    }
+  })
+
+  const saveKeyMutation = useMutation({
+    mutationFn: async (key: string) => {
+      const res = await fetch('/api/settings', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ openRouterApiKey: key })
+      })
+      if (!res.ok) throw new Error('Failed to save')
+      return res.json()
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['settings'] })
+      setApiKey('')
+    }
+  })
+
+  const deleteKeyMutation = useMutation({
+    mutationFn: async () => {
+      const res = await fetch('/api/settings', { method: 'DELETE' })
+      if (!res.ok) throw new Error('Failed to delete')
+      return res.json()
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['settings'] })
+    }
+  })
+
+  const { data: projects } = useQuery({
+    queryKey: ['migrate-projects'],
+    queryFn: async () => {
+      const res = await fetch('/api/migrate')
+      const json = await res.json()
+      return json.data?.projects || [] as { id: string; name: string }[]
+    }
+  })
+
+  const [selectedProject, setSelectedProject] = useState<string>('')
+  const [migrationResults, setMigrationResults] = useState<{
+    success: boolean
+    results: Array<{ file: string; success: boolean; error?: string }>
+  } | null>(null)
+
+  const migrateMutation = useMutation({
+    mutationFn: async (projectId: string) => {
+      const res = await fetch('/api/migrate', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ projectId })
+      })
+      const json = await res.json()
+      if (!res.ok) throw new Error(json.error || 'Migration failed')
+      return json.data
+    },
+    onSuccess: (data) => {
+      setMigrationResults(data)
+    },
+    onError: (error) => {
+      setMigrationResults({
+        success: false,
+        results: [{ file: 'migration', success: false, error: error.message }]
+      })
+    }
+  })
+
   return (
     <div className="p-6 h-full overflow-auto">
       <header className="mb-6">
@@ -71,6 +150,147 @@ export default function Settings() {
           </div>
         </section>
 
+        {/* OpenRouter API Key */}
+        <section className="bg-card border border-border rounded-lg p-6">
+          <h2 className="text-lg font-semibold mb-4 flex items-center gap-2">
+            <Key className="w-5 h-5" />
+            OpenRouter API Key
+          </h2>
+
+          <p className="text-sm text-muted-foreground mb-4">
+            Required for AI-powered features like MD→JSON migration. Get your key at{' '}
+            <a
+              href="https://openrouter.ai/keys"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-primary underline"
+            >
+              openrouter.ai/keys
+            </a>
+          </p>
+
+          {settings?.hasApiKey ? (
+            <div className="space-y-3">
+              <div className="flex items-center gap-3 p-3 bg-muted/50 rounded-md">
+                <CheckCircle className="w-5 h-5 text-green-500 shrink-0" />
+                <span className="text-sm font-mono">{settings.maskedKey}</span>
+                <Button
+                  variant="ghost"
+                  size="icon-sm"
+                  onClick={() => deleteKeyMutation.mutate()}
+                  disabled={deleteKeyMutation.isPending}
+                  className="ml-auto text-muted-foreground hover:text-destructive"
+                >
+                  {deleteKeyMutation.isPending ? (
+                    <Loader2 className="w-4 h-4 animate-spin" />
+                  ) : (
+                    <Trash2 className="w-4 h-4" />
+                  )}
+                </Button>
+              </div>
+              <p className="text-xs text-muted-foreground mb-4">
+                API key is stored locally in ~/.prjct-cli/settings.json
+              </p>
+
+              {/* Data Migration Section - only shown when API key exists */}
+              <div className="pt-4 border-t border-border">
+                <h3 className="text-sm font-medium mb-3 flex items-center gap-2">
+                  <Database className="w-4 h-4" />
+                  Data Migration (MD → JSON)
+                </h3>
+                <p className="text-xs text-muted-foreground mb-3">
+                  Convert markdown files to structured JSON using AI. This enables better parsing and querying.
+                </p>
+
+                <div className="flex gap-2 mb-3">
+                  <select
+                    value={selectedProject}
+                    onChange={(e) => {
+                      setSelectedProject(e.target.value)
+                      setMigrationResults(null)
+                    }}
+                    className="flex-1 h-9 rounded-md border border-input bg-transparent px-3 text-sm"
+                  >
+                    <option value="">Select a project...</option>
+                    {(projects as { id: string; name: string }[] || []).map((p) => (
+                      <option key={p.id} value={p.id}>{p.name}</option>
+                    ))}
+                  </select>
+                  <Button
+                    onClick={() => selectedProject && migrateMutation.mutate(selectedProject)}
+                    disabled={!selectedProject || migrateMutation.isPending}
+                    size="sm"
+                  >
+                    {migrateMutation.isPending ? (
+                      <Loader2 className="w-4 h-4 animate-spin" />
+                    ) : (
+                      <>
+                        <RefreshCw className="w-4 h-4" />
+                        Sync
+                      </>
+                    )}
+                  </Button>
+                </div>
+
+                {migrationResults && (
+                  <div className={`p-3 rounded-md text-sm ${migrationResults.success ? 'bg-green-500/10 border border-green-500/20' : 'bg-red-500/10 border border-red-500/20'}`}>
+                    <p className={`font-medium mb-2 ${migrationResults.success ? 'text-green-500' : 'text-red-500'}`}>
+                      {migrationResults.success ? 'Migration complete!' : 'Migration had errors'}
+                    </p>
+                    <ul className="space-y-1 text-xs">
+                      {migrationResults.results.map((r, i) => (
+                        <li key={i} className="flex items-center gap-2">
+                          {r.success ? (
+                            <CheckCircle className="w-3 h-3 text-green-500" />
+                          ) : (
+                            <XCircle className="w-3 h-3 text-red-500" />
+                          )}
+                          <span>{r.file}</span>
+                          {r.error && <span className="text-muted-foreground">- {r.error}</span>}
+                        </li>
+                      ))}
+                    </ul>
+                  </div>
+                )}
+              </div>
+            </div>
+          ) : (
+            <div className="space-y-3">
+              <div className="flex gap-2">
+                <div className="relative flex-1">
+                  <Input
+                    type={showKey ? 'text' : 'password'}
+                    placeholder="sk-or-v1-..."
+                    value={apiKey}
+                    onChange={(e) => setApiKey(e.target.value)}
+                    className="pr-10 font-mono"
+                  />
+                  <button
+                    type="button"
+                    onClick={() => setShowKey(!showKey)}
+                    className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+                  >
+                    {showKey ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
+                  </button>
+                </div>
+                <Button
+                  onClick={() => saveKeyMutation.mutate(apiKey)}
+                  disabled={!apiKey || saveKeyMutation.isPending}
+                >
+                  {saveKeyMutation.isPending ? (
+                    <Loader2 className="w-4 h-4 animate-spin" />
+                  ) : (
+                    'Save'
+                  )}
+                </Button>
+              </div>
+              {saveKeyMutation.isError && (
+                <p className="text-sm text-destructive">Failed to save API key</p>
+              )}
+            </div>
+          )}
+        </section>
+
         {/* Claude Code Status */}
         <section className="bg-card border border-border rounded-lg p-6">
           <h2 className="text-lg font-semibold mb-4 flex items-center gap-2">

package/packages/web/components/ActivityTimeline/ActivityTimeline.constants.ts

@@ -0,0 +1,2 @@
+export const TIMELINE_COLLAPSED_LIMIT = 8
+export const TIMELINE_EXPANDED_LIMIT = 20