prjct-cli 0.11.4 → 0.12.0

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

package/packages/web/components/ActivityTimeline/ActivityTimeline.tsx

@@ -0,0 +1,50 @@
+'use client'
+
+import { Activity } from 'lucide-react'
+import { BentoCard } from '@/components/BentoCard'
+import { EmptyState } from '@/components/EmptyState'
+import { DateGroup } from '@/components/DateGroup'
+import { ExpandButton } from '@/components/ExpandButton'
+import { useExpandable, useGroupedEvents } from './hooks'
+import { TIMELINE_COLLAPSED_LIMIT, TIMELINE_EXPANDED_LIMIT } from './ActivityTimeline.constants'
+import type { ActivityTimelineProps } from './ActivityTimeline.types'
+
+export function ActivityTimeline({ timeline, className }: ActivityTimelineProps) {
+  const { expanded, toggle } = useExpandable(false)
+  const limit = expanded ? TIMELINE_EXPANDED_LIMIT : TIMELINE_COLLAPSED_LIMIT
+  const { grouped, hasMore } = useGroupedEvents(timeline, limit)
+
+  return (
+    <BentoCard
+      size="full"
+      title="Recent Activity"
+      icon={Activity}
+      count={timeline.length > 0 ? `${timeline.length} events` : undefined}
+      className={className}
+    >
+      {timeline.length === 0 ? (
+        <EmptyState
+          icon={Activity}
+          title="No recent activity"
+          description="Activity will appear as you work"
+          compact
+        />
+      ) : (
+        <div className="space-y-3 sm:space-y-4">
+          {Array.from(grouped.entries()).map(([dateKey, events]) => (
+            <DateGroup key={dateKey} dateKey={dateKey} events={events} />
+          ))}
+
+          {hasMore && (
+            <ExpandButton
+              expanded={expanded}
+              totalCount={timeline.length}
+              collapsedLimit={TIMELINE_COLLAPSED_LIMIT}
+              onToggle={toggle}
+            />
+          )}
+        </div>
+      )}
+    </BentoCard>
+  )
+}

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

@@ -0,0 +1,8 @@
+import type { TimelineEvent } from '@/lib/parse-prjct-files'
+
+export type { TimelineEvent }
+
+export interface ActivityTimelineProps {
+  timeline: TimelineEvent[]
+  className?: string
+}

package/packages/web/components/ActivityTimeline/hooks/index.ts

@@ -0,0 +1,2 @@
+export { useExpandable } from './useExpandable'
+export { useGroupedEvents } from './useGroupedEvents'

package/packages/web/components/ActivityTimeline/hooks/useExpandable.ts

@@ -0,0 +1,9 @@
+'use client'
+
+import { useState } from 'react'
+
+export function useExpandable(initialExpanded: boolean = false) {
+  const [expanded, setExpanded] = useState(initialExpanded)
+  const toggle = () => setExpanded(prev => !prev)
+  return { expanded, toggle }
+}

package/packages/web/components/ActivityTimeline/hooks/useGroupedEvents.ts

@@ -0,0 +1,23 @@
+'use client'
+
+import { useMemo } from 'react'
+import type { TimelineEvent } from '../ActivityTimeline.types'
+
+export function useGroupedEvents(events: TimelineEvent[], limit: number) {
+  return useMemo(() => {
+    const displayEvents = events.slice(0, limit)
+    const groups = new Map<string, TimelineEvent[]>()
+
+    displayEvents.forEach(event => {
+      if (!event.ts) return
+      const dateKey = event.ts.split('T')[0]
+      const existing = groups.get(dateKey) ?? []
+      groups.set(dateKey, [...existing, event])
+    })
+
+    return {
+      grouped: groups,
+      hasMore: events.length > limit,
+    }
+  }, [events, limit])
+}

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

@@ -0,0 +1,2 @@
+export { ActivityTimeline } from './ActivityTimeline'
+export type { ActivityTimelineProps } from './ActivityTimeline.types'

package/packages/web/components/AgentsCard/AgentsCard.tsx

@@ -0,0 +1,63 @@
+import { BentoCard } from '@/components/BentoCard'
+import { EmptyState } from '@/components/EmptyState'
+import { Bot, Star, TrendingUp } from 'lucide-react'
+import { Badge } from '@/components/ui/badge'
+import { cn } from '@/lib/utils'
+import type { AgentsCardProps } from './AgentsCard.types'
+
+export function AgentsCard({ agents, className }: AgentsCardProps) {
+  const displayAgents = agents.slice(0, 8)
+
+  return (
+    <BentoCard
+      size="1x1"
+      title="Agents"
+      icon={Bot}
+      count={agents.length}
+      className={className}
+    >
+      {agents.length === 0 ? (
+        <EmptyState
+          icon={Bot}
+          title="No agents"
+          description="Run /p:sync to generate"
+          compact
+        />
+      ) : (
+        <div className="flex flex-wrap gap-1.5">
+          {displayAgents.map((agent) => {
+            const hasPerformance = agent.successRate !== undefined
+            const isTopPerformer = hasPerformance && agent.successRate! >= 80
+
+            return (
+              <Badge
+                key={agent.name}
+                variant="secondary"
+                className={cn(
+                  "text-xs px-2 py-0.5 font-mono inline-flex items-center gap-1",
+                  isTopPerformer && "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border-emerald-500/20"
+                )}
+              >
+                {isTopPerformer && <Star className="h-2.5 w-2.5" />}
+                @{agent.name}
+                {hasPerformance && (
+                  <span className="text-[9px] opacity-70">
+                    {agent.successRate}%
+                  </span>
+                )}
+                {agent.improving && (
+                  <TrendingUp className="h-2.5 w-2.5 text-emerald-500" />
+                )}
+              </Badge>
+            )
+          })}
+          {agents.length > 8 && (
+            <Badge variant="outline" className="text-xs px-2 py-0.5">
+              +{agents.length - 8}
+            </Badge>
+          )}
+        </div>
+      )}
+    </BentoCard>
+  )
+}

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

@@ -0,0 +1,13 @@
+export interface Agent {
+  name: string
+  description?: string
+  successRate?: number
+  tasksCompleted?: number
+  improving?: boolean
+  bestFor?: string[]
+}
+
+export interface AgentsCardProps {
+  agents: Agent[]
+  className?: string
+}

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

@@ -0,0 +1,2 @@
+export { AgentsCard } from './AgentsCard'
+export type { AgentsCardProps } from './AgentsCard.types'

package/packages/web/components/AppSidebar/AppSidebar.tsx

@@ -0,0 +1,134 @@
+'use client'
+
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+import {
+  LayoutDashboard,
+  Settings,
+  HelpCircle,
+  Menu,
+} from 'lucide-react'
+import { Logo } from '@/components/Logo'
+import { cn } from '@/lib/utils'
+import { useState, useEffect } from 'react'
+import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet'
+
+const navItems = [
+  { href: '/', icon: LayoutDashboard, label: 'Dashboard' },
+]
+
+function SidebarContent({ onNavigate }: { onNavigate?: () => void }) {
+  const pathname = usePathname()
+
+  return (
+    <>
+      {/* Header */}
+      <div className="flex h-14 items-center justify-between px-3 border-b border-border">
+        <Link href="/" onClick={onNavigate}>
+          <Logo size="xs" showText rounded />
+        </Link>
+      </div>
+
+      {/* Nav */}
+      <nav className="flex-1 overflow-y-auto py-4 px-3">
+        <div className="space-y-1">
+          {navItems.map(({ href, icon: Icon, label }) => {
+            const isActive = pathname === href || (href !== '/' && pathname.startsWith(href))
+            return (
+              <Link
+                key={href}
+                href={href}
+                onClick={onNavigate}
+                className={cn(
+                  'flex items-center gap-3 rounded-md px-3 py-2.5 transition-colors min-h-[44px]',
+                  isActive
+                    ? 'bg-accent text-accent-foreground'
+                    : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground'
+                )}
+              >
+                <Icon className="h-5 w-5 shrink-0" />
+                <span className="text-sm font-medium">{label}</span>
+              </Link>
+            )
+          })}
+        </div>
+      </nav>
+
+      {/* Footer */}
+      <div className="border-t border-border p-3 space-y-1">
+        <Link
+          href="/settings"
+          onClick={onNavigate}
+          className={cn(
+            'flex items-center gap-3 rounded-md px-3 py-2.5 transition-colors min-h-[44px]',
+            pathname === '/settings'
+              ? 'bg-accent text-accent-foreground'
+              : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground'
+          )}
+        >
+          <Settings className="h-5 w-5 shrink-0" />
+          <span className="text-sm font-medium">Settings</span>
+        </Link>
+        <Link
+          href="/help"
+          onClick={onNavigate}
+          className={cn(
+            'flex items-center gap-3 rounded-md px-3 py-2.5 transition-colors min-h-[44px]',
+            pathname === '/help'
+              ? 'bg-accent text-accent-foreground'
+              : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground'
+          )}
+        >
+          <HelpCircle className="h-5 w-5 shrink-0" />
+          <span className="text-sm font-medium">Need help?</span>
+        </Link>
+      </div>
+    </>
+  )
+}
+
+export function AppSidebar() {
+  const [isOpen, setIsOpen] = useState(false)
+  const [isMobile, setIsMobile] = useState(false)
+
+  // Detect mobile on mount and resize
+  useEffect(() => {
+    const checkMobile = () => {
+      setIsMobile(window.innerWidth < 768)
+    }
+    checkMobile()
+    window.addEventListener('resize', checkMobile)
+    return () => window.removeEventListener('resize', checkMobile)
+  }, [])
+
+  // Mobile: Sheet/Drawer
+  if (isMobile) {
+    return (
+      <Sheet open={isOpen} onOpenChange={setIsOpen}>
+        <SheetTrigger asChild>
+          <button
+            className="fixed top-3 left-3 z-50 h-10 w-10 rounded-lg bg-card border border-border flex items-center justify-center text-muted-foreground hover:bg-accent hover:text-accent-foreground transition-colors shadow-sm"
+            aria-label="Open menu"
+          >
+            <Menu className="h-5 w-5" />
+          </button>
+        </SheetTrigger>
+        <SheetContent side="left" className="w-[280px] p-0 flex flex-col">
+          <SidebarContent onNavigate={() => setIsOpen(false)} />
+        </SheetContent>
+      </Sheet>
+    )
+  }
+
+  // Desktop: Static sidebar
+  return (
+    <aside className="hidden md:flex h-full w-60 flex-col border-r border-border bg-card">
+      <SidebarContent />
+    </aside>
+  )
+}
+
+// Mobile header spacer - use in pages that need top padding for the menu button
+export function MobileHeaderSpacer() {
+  return <div className="h-16 md:h-0" />
+}

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

@@ -0,0 +1 @@
+export { AppSidebar, MobileHeaderSpacer } from './AppSidebar'

package/packages/web/components/BackLink/BackLink.tsx

@@ -0,0 +1,18 @@
+import Link from 'next/link'
+import { ArrowLeft } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import type { BackLinkProps } from './BackLink.types'
+
+export function BackLink({ projectId, projectName, className }: BackLinkProps) {
+  return (
+    <div className={cn('relative flex', className)}>
+      <Link
+        href={`/project/${projectId}`}
+        className="flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors min-h-[44px]"
+      >
+        <ArrowLeft className="w-4 h-4" />
+        {projectName}
+      </Link>
+    </div>
+  )
+}

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

@@ -0,0 +1,5 @@
+export interface BackLinkProps {
+  projectId: string
+  projectName: string
+  className?: string
+}

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

@@ -0,0 +1,2 @@
+export { BackLink } from './BackLink'
+export type { BackLinkProps } from './BackLink.types'

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

@@ -0,0 +1,16 @@
+import type { AccentColor, BentoSize } from './BentoCard.types'
+
+export const BENTO_SIZE_CLASSES: Record<BentoSize, string> = {
+  '1x1': 'col-span-1 row-span-1',
+  '1x2': 'col-span-1 row-span-2',
+  '2x1': 'col-span-1 sm:col-span-2 row-span-1',
+  '2x2': 'col-span-1 sm:col-span-2 row-span-2',
+  'full': 'col-span-1 sm:col-span-2 lg:col-span-full',
+}
+
+export const ACCENT_STYLES: Record<AccentColor, string> = {
+  default: '',
+  success: 'border-emerald-500/20 bg-emerald-500/5',
+  warning: 'border-amber-500/20 bg-amber-500/5',
+  destructive: 'border-destructive/20 bg-destructive/5',
+}

package/packages/web/components/BentoCard/BentoCard.tsx

@@ -0,0 +1,47 @@
+import { cn } from '@/lib/utils'
+import { BENTO_SIZE_CLASSES, ACCENT_STYLES } from './BentoCard.constants'
+import type { BentoCardProps } from './BentoCard.types'
+
+export function BentoCard({
+  size = '1x1',
+  title,
+  count,
+  icon: Icon,
+  accentColor = 'default',
+  className,
+  headerClassName,
+  children,
+}: BentoCardProps) {
+  return (
+    <div
+      className={cn(
+        'relative overflow-hidden rounded-xl border bg-card transition-all duration-200',
+        'p-3 sm:p-4',
+        'hover:shadow-md hover:border-foreground/20',
+        'active:scale-[0.99]',
+        BENTO_SIZE_CLASSES[size],
+        ACCENT_STYLES[accentColor],
+        className
+      )}
+    >
+      {(title || count !== undefined || Icon) && (
+        <div className={cn('flex items-center justify-between mb-2 sm:mb-3', headerClassName)}>
+          <div className="flex items-center gap-2">
+            {Icon && <Icon className="h-4 w-4 sm:h-3.5 sm:w-3.5 text-muted-foreground" />}
+            {title && (
+              <span className="text-[11px] sm:text-[10px] font-bold uppercase tracking-[0.15em] text-muted-foreground">
+                {title}
+              </span>
+            )}
+          </div>
+          {count !== undefined && (
+            <span className="text-sm sm:text-xs font-medium text-muted-foreground tabular-nums">
+              {count}
+            </span>
+          )}
+        </div>
+      )}
+      {children}
+    </div>
+  )
+}