prjct-cli 0.12.2 → 0.13.0

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

@@ -1,17 +1,12 @@
 'use client'
 
-import { useState } from 'react'
-import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
+import { useQuery } from '@tanstack/react-query'
 import { useTheme } from 'next-themes'
-import { Settings as SettingsIcon, CheckCircle, XCircle, Terminal, Sun, Moon, Monitor, Key, Eye, EyeOff, Loader2, Trash2, RefreshCw, Database } from 'lucide-react'
+import { Settings as SettingsIcon, CheckCircle, XCircle, Terminal, Sun, Moon, Monitor } 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'],
@@ -22,79 +17,6 @@ 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">
@@ -150,147 +72,6 @@ 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/BlockersCard/BlockersCard.tsx

@@ -0,0 +1,67 @@
+import { BentoCard } from '@/components/BentoCard'
+import { AlertTriangle, Clock } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import type { BlockersCardProps } from './BlockersCard.types'
+
+export function BlockersCard({ blockers, className }: BlockersCardProps) {
+  const hasBlockers = blockers.length > 0
+
+  return (
+    <BentoCard
+      size="1x1"
+      title="Blockers"
+      icon={AlertTriangle}
+      className={cn(
+        hasBlockers && 'border-amber-500/50 dark:border-amber-500/30',
+        className
+      )}
+    >
+      <div className="flex flex-col h-full">
+        {!hasBlockers ? (
+          <div className="flex flex-col items-center justify-center h-full text-center">
+            <div className="text-2xl mb-1">&#x2705;</div>
+            <p className="text-sm text-muted-foreground">No blockers</p>
+            <p className="text-xs text-muted-foreground mt-1">Keep the momentum!</p>
+          </div>
+        ) : (
+          <>
+            <div className="flex items-center gap-2 mb-2">
+              <span className="text-2xl font-bold text-amber-600 dark:text-amber-400">
+                {blockers.length}
+              </span>
+              <span className="text-xs text-muted-foreground">
+                {blockers.length === 1 ? 'task blocked' : 'tasks blocked'}
+              </span>
+            </div>
+
+            <div className="flex-1 overflow-auto space-y-2">
+              {blockers.slice(0, 3).map((blocker, i) => (
+                <div
+                  key={i}
+                  className="p-2 rounded-md bg-amber-500/10 dark:bg-amber-500/5 border border-amber-500/20"
+                >
+                  <p className="text-xs font-medium truncate">{blocker.task}</p>
+                  <p className="text-xs text-muted-foreground truncate mt-0.5">
+                    {blocker.reason}
+                  </p>
+                  <div className="flex items-center gap-1 mt-1">
+                    <Clock className="h-3 w-3 text-muted-foreground" />
+                    <span className="text-xs text-muted-foreground">
+                      {blocker.daysBlocked}d
+                    </span>
+                  </div>
+                </div>
+              ))}
+            </div>
+
+            {blockers.length > 3 && (
+              <p className="text-xs text-muted-foreground mt-2">
+                +{blockers.length - 3} more
+              </p>
+            )}
+          </>
+        )}
+      </div>
+    </BentoCard>
+  )
+}

package/packages/web/components/BlockersCard/BlockersCard.types.ts

@@ -0,0 +1,11 @@
+export interface Blocker {
+  task: string
+  reason: string
+  since: string
+  daysBlocked: number
+}
+
+export interface BlockersCardProps {
+  blockers: Blocker[]
+  className?: string
+}

package/packages/web/components/BlockersCard/index.ts

@@ -0,0 +1,2 @@
+export { BlockersCard } from './BlockersCard'
+export type { BlockersCardProps, Blocker } from './BlockersCard.types'

package/packages/web/components/CommandButton/CommandButton.tsx

@@ -7,6 +7,7 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from '@/components/ui/tooltip'
+import { cn } from '@/lib/utils'
 
 interface CommandButtonProps {
   cmd: string
@@ -14,18 +15,24 @@ interface CommandButtonProps {
   tip: string
   disabled?: boolean
   onClick: () => void
+  variant?: 'default' | 'primary'
 }
 
-export function CommandButton({ cmd, icon: Icon, tip, disabled, onClick }: CommandButtonProps) {
+export function CommandButton({ cmd, icon: Icon, tip, disabled, onClick, variant = 'default' }: CommandButtonProps) {
+  const isPrimary = variant === 'primary'
+
   return (
     <Tooltip>
       <TooltipTrigger asChild>
         <Button
-          variant="ghost"
+          variant={isPrimary ? 'default' : 'ghost'}
           size="icon"
           onClick={onClick}
           disabled={disabled}
-          className="h-11 w-11"
+          className={cn(
+            "h-11 w-11",
+            isPrimary && "bg-primary text-primary-foreground hover:bg-primary/90"
+          )}
         >
           <Icon className="w-5 h-5" />
         </Button>

package/packages/web/lib/projects.ts

@@ -264,15 +264,25 @@ export async function getProjects() {
 export async function getProject(projectId: string) {
   const storagePath = join(GLOBAL_STORAGE, projectId)
 
-  // 1. Try to read from project.json (source of truth)
+  // 1. Try to read from project.json (source of truth for dashboard)
   let repoPath: string | null = null
   let name: string = projectId
+  let version: string | null = null
+  let stack: string | null = null
+  let filesCount: string | null = null
+  let commitsCount: string | null = null
+  let techStack: string[] = []
 
   try {
     const projectJsonPath = join(storagePath, 'project.json')
     const projectJson = JSON.parse(await fs.readFile(projectJsonPath, 'utf-8'))
     repoPath = projectJson.repoPath || null
     name = projectJson.name || projectId
+    version = projectJson.version || null
+    stack = projectJson.stack || null
+    filesCount = projectJson.fileCount ? String(projectJson.fileCount) : null
+    commitsCount = projectJson.commitCount ? String(projectJson.commitCount) : null
+    techStack = projectJson.techStack || []
   } catch {
     // project.json doesn't exist - fallback to scan
     if (projectPathCache.size === 0) {
@@ -308,35 +318,26 @@ export async function getProject(projectId: string) {
       currentTask = await fs.readFile(nowPath, 'utf-8')
     } catch {}
 
-    // Extract stats from claudeMd Quick Reference table
-    let version: string | null = null
-    let stack: string | null = null
-    let filesCount: string | null = null
-    let commitsCount: string | null = null
-    let techStack: string[] = []
-
-    // Parse version from | **Version** | 0.10.13 |
-    const versionMatch = claudeMd.match(/\*\*Version\*\*\s*\|\s*([^\n|]+)/)
-    if (versionMatch) version = versionMatch[1].trim()
-
-    // Parse stack from | **Stack** | Node.js CLI (CommonJS) |
-    const stackMatch = claudeMd.match(/\*\*Stack\*\*\s*\|\s*([^\n|]+)/)
-    if (stackMatch) stack = stackMatch[1].trim()
+    // Fallback: Extract stats from claudeMd Quick Reference table if not from project.json
+    if (!version) {
+      const versionMatch = claudeMd.match(/\*\*Version\*\*\s*\|\s*([^\n|]+)/)
+      if (versionMatch) version = versionMatch[1].trim()
+    }
 
-    // Parse files from | **Files** | 130+ |
-    const filesMatch = claudeMd.match(/\*\*Files\*\*\s*\|\s*([^\n|]+)/)
-    if (filesMatch) filesCount = filesMatch[1].trim()
+    if (!stack) {
+      const stackMatch = claudeMd.match(/\*\*Stack\*\*\s*\|\s*([^\n|]+)/)
+      if (stackMatch) stack = stackMatch[1].trim()
+    }
 
-    // Parse commits from | **Commits** | 175 |
-    const commitsMatch = claudeMd.match(/\*\*Commits\*\*\s*\|\s*([^\n|]+)/)
-    if (commitsMatch) commitsCount = commitsMatch[1].trim()
+    if (!filesCount) {
+      const filesMatch = claudeMd.match(/\*\*Files\*\*\s*\|\s*([^\n|]+)/)
+      if (filesMatch) filesCount = filesMatch[1].trim()
+    }
 
-    // Get techStack from project.json
-    try {
-      const projectJsonPath = join(storagePath, 'project.json')
-      const projectJson = JSON.parse(await fs.readFile(projectJsonPath, 'utf-8'))
-      techStack = projectJson.techStack || []
-    } catch {}
+    if (!commitsCount) {
+      const commitsMatch = claudeMd.match(/\*\*Commits\*\*\s*\|\s*([^\n|]+)/)
+      if (commitsMatch) commitsCount = commitsMatch[1].trim()
+    }
 
     // Find favicon/icon in project repo
     let iconPath: string | null = null

package/packages/web/lib/services/projects.server.ts

@@ -1,44 +1,48 @@
 /**
  * Projects Service (Server-only)
  *
- * Direct data access for Server Components.
- * No API calls needed - reads directly from filesystem.
+ * MD-First Architecture: Reads directly from MD files.
+ * No JSON fallback - MD is the source of truth.
  */
 
 import 'server-only'
 import { cache } from 'react'
-import { loadProject, type ProjectJson } from '@/lib/json-loader'
-import { getProjects as getProjectsList, getProject as getProjectLegacy } from '@/lib/projects'
+import { getProjects as getProjectsList, getProject as getMdProject } from '@/lib/projects'
 
-export type { ProjectJson }
+// Types for project data
+export interface ProjectJson {
+  projectId: string
+  name: string
+  repoPath?: string | null
+  techStack: string[]
+  fileCount: number
+  commitCount: number
+  createdAt: string
+  lastSync: string
+}
 
 /**
  * Get single project by ID - cached per request
+ *
+ * MD-First: Uses MD files as source of truth
  */
 export const getProject = cache(async (projectId: string): Promise<ProjectJson | null> => {
-  // Try JSON first
-  const jsonProject = await loadProject(projectId)
-  if (jsonProject) {
-    return jsonProject
-  }
-
-  // Fallback to legacy
   try {
-    const legacyProject = await getProjectLegacy(projectId)
-    if (legacyProject) {
+    const project = await getMdProject(projectId)
+    if (project) {
       return {
-        projectId: legacyProject.id,
-        name: legacyProject.name,
-        repoPath: legacyProject.path,
-        techStack: legacyProject.techStack || [],
-        fileCount: legacyProject.filesCount ? parseInt(legacyProject.filesCount) : 0,
-        commitCount: legacyProject.commitsCount ? parseInt(legacyProject.commitsCount) : 0,
+        projectId: project.id,
+        name: project.name,
+        repoPath: project.repoPath,
+        techStack: project.techStack || [],
+        fileCount: project.filesCount ? parseInt(project.filesCount) : 0,
+        commitCount: project.commitsCount ? parseInt(project.commitsCount) : 0,
         createdAt: new Date().toISOString(),
         lastSync: new Date().toISOString()
       }
     }
   } catch {
-    // Ignore errors
+    // Project not found
   }
 
   return null