prjct-cli 0.12.0 → 0.12.2

package/bin/serve.js

@@ -65,55 +65,39 @@ function writeState(state) {
 }
 
 /**
- * Get package.json version and hash of dependencies
+ * Get package.json version
  */
-function getPackageInfo(pkgPath) {
+function getPackageVersion(pkgPath) {
   try {
     const pkg = JSON.parse(fs.readFileSync(path.join(pkgPath, 'package.json'), 'utf8'))
-    const deps = JSON.stringify(pkg.dependencies || {}) + JSON.stringify(pkg.devDependencies || {})
-    // Simple hash of dependencies
-    let hash = 0
-    for (let i = 0; i < deps.length; i++) {
-      const char = deps.charCodeAt(i)
-      hash = ((hash << 5) - hash) + char
-      hash = hash & hash // Convert to 32bit integer
-    }
-    return { version: pkg.version, depsHash: hash.toString(16) }
+    return pkg.version || '0.0.0'
   } catch {
-    return { version: '0.0.0', depsHash: '0' }
+    return '0.0.0'
   }
 }
 
 /**
  * Check if dependencies need to be installed
+ * Simple logic: install only if node_modules missing OR version changed
  */
 function needsInstall(pkgDir, stateKey) {
   const nodeModules = path.join(pkgDir, 'node_modules')
 
-  // If node_modules doesn't exist, definitely need install
+  // If node_modules doesn't exist, need install
   if (!fs.existsSync(nodeModules)) {
     return { needed: true, reason: 'node_modules not found' }
   }
 
   const state = readState()
-  const pkgInfo = getPackageInfo(pkgDir)
-  const savedInfo = state[stateKey]
-
-  // If no saved state, need install to track
-  if (!savedInfo) {
-    return { needed: true, reason: 'first time tracking' }
-  }
+  const currentVersion = getPackageVersion(pkgDir)
+  const savedVersion = state[stateKey]?.version
 
   // If version changed, need install
-  if (savedInfo.version !== pkgInfo.version) {
-    return { needed: true, reason: `version changed: ${savedInfo.version} → ${pkgInfo.version}` }
-  }
-
-  // If dependencies hash changed, need install
-  if (savedInfo.depsHash !== pkgInfo.depsHash) {
-    return { needed: true, reason: 'dependencies changed' }
+  if (savedVersion && savedVersion !== currentVersion) {
+    return { needed: true, reason: `${savedVersion} → ${currentVersion}` }
   }
 
+  // node_modules exists and version unchanged = skip
   return { needed: false }
 }
 
@@ -122,10 +106,8 @@ function needsInstall(pkgDir, stateKey) {
  */
 function markInstalled(pkgDir, stateKey) {
   const state = readState()
-  const pkgInfo = getPackageInfo(pkgDir)
   state[stateKey] = {
-    version: pkgInfo.version,
-    depsHash: pkgInfo.depsHash,
+    version: getPackageVersion(pkgDir),
     installedAt: new Date().toISOString()
   }
   writeState(state)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "prjct-cli",
-  "version": "0.12.0",
+  "version": "0.12.2",
   "description": "Built for Claude - Ship fast, track progress, stay focused. Developer momentum tool for indie hackers.",
   "main": "core/index.ts",
   "bin": {

package/packages/web/app/page.tsx

@@ -1,6 +1,7 @@
 import { getProjects } from '@/lib/services/projects.server'
 import { getGlobalStats } from '@/lib/services/stats.server'
 import { DashboardContent } from '@/components/DashboardContent'
+import { MigrationGate } from '@/components/MigrationGate'
 
 export default async function Dashboard() {
   const [projects, stats] = await Promise.all([
@@ -8,5 +9,9 @@ export default async function Dashboard() {
     getGlobalStats()
   ])
 
-  return <DashboardContent projects={projects} stats={stats} />
+  return (
+    <MigrationGate>
+      <DashboardContent projects={projects} stats={stats} />
+    </MigrationGate>
+  )
 }

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

@@ -7,81 +7,132 @@ import {
   Settings,
   HelpCircle,
   Menu,
+  PanelLeft,
 } 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'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
 
 const navItems = [
   { href: '/', icon: LayoutDashboard, label: 'Dashboard' },
 ]
 
-function SidebarContent({ onNavigate }: { onNavigate?: () => void }) {
+function SidebarContent({
+  onNavigate,
+  isCollapsed = false,
+  onToggleCollapse
+}: {
+  onNavigate?: () => void
+  isCollapsed?: boolean
+  onToggleCollapse?: () => 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 className={cn(
+        "flex h-14 items-center border-b border-border",
+        isCollapsed ? "justify-center px-2" : "justify-between px-3"
+      )}>
+        {!isCollapsed && (
+          <Link href="/" onClick={onNavigate}>
+            <Logo size="xs" showText rounded />
+          </Link>
+        )}
+        {onToggleCollapse && (
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <button
+                onClick={onToggleCollapse}
+                className="h-8 w-8 rounded-md flex items-center justify-center text-muted-foreground hover:bg-accent hover:text-accent-foreground transition-colors"
+                aria-label={isCollapsed ? "Expand sidebar" : "Collapse sidebar"}
+              >
+                <PanelLeft className="h-4 w-4" />
+              </button>
+            </TooltipTrigger>
+            <TooltipContent side="right">
+              {isCollapsed ? "Expand" : "Collapse"}
+            </TooltipContent>
+          </Tooltip>
+        )}
       </div>
 
       {/* Nav */}
-      <nav className="flex-1 overflow-y-auto py-4 px-3">
+      <nav className={cn("flex-1 overflow-y-auto py-4", isCollapsed ? "px-2" : "px-3")}>
         <div className="space-y-1">
           {navItems.map(({ href, icon: Icon, label }) => {
             const isActive = pathname === href || (href !== '/' && pathname.startsWith(href))
-            return (
+            const linkContent = (
               <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]',
+                  'flex items-center rounded-md transition-colors min-h-[44px]',
+                  isCollapsed ? 'justify-center px-2' : 'gap-3 px-3',
+                  'py-2.5',
                   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>
+                {!isCollapsed && <span className="text-sm font-medium">{label}</span>}
               </Link>
             )
+
+            if (isCollapsed) {
+              return (
+                <Tooltip key={href}>
+                  <TooltipTrigger asChild>{linkContent}</TooltipTrigger>
+                  <TooltipContent side="right">{label}</TooltipContent>
+                </Tooltip>
+              )
+            }
+            return linkContent
           })}
         </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 className={cn("border-t border-border space-y-1", isCollapsed ? "p-2" : "p-3")}>
+        {[
+          { href: '/settings', icon: Settings, label: 'Settings' },
+          { href: '/help', icon: HelpCircle, label: 'Need help?' }
+        ].map(({ href, icon: Icon, label }) => {
+          const isActive = pathname === href
+          const linkContent = (
+            <Link
+              key={href}
+              href={href}
+              onClick={onNavigate}
+              className={cn(
+                'flex items-center rounded-md transition-colors min-h-[44px]',
+                isCollapsed ? 'justify-center px-2' : 'gap-3 px-3',
+                'py-2.5',
+                isActive
+                  ? 'bg-accent text-accent-foreground'
+                  : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground'
+              )}
+            >
+              <Icon className="h-5 w-5 shrink-0" />
+              {!isCollapsed && <span className="text-sm font-medium">{label}</span>}
+            </Link>
+          )
+
+          if (isCollapsed) {
+            return (
+              <Tooltip key={href}>
+                <TooltipTrigger asChild>{linkContent}</TooltipTrigger>
+                <TooltipContent side="right">{label}</TooltipContent>
+              </Tooltip>
+            )
+          }
+          return linkContent
+        })}
       </div>
     </>
   )
@@ -90,6 +141,7 @@ function SidebarContent({ onNavigate }: { onNavigate?: () => void }) {
 export function AppSidebar() {
   const [isOpen, setIsOpen] = useState(false)
   const [isMobile, setIsMobile] = useState(false)
+  const [isCollapsed, setIsCollapsed] = useState(false)
 
   // Detect mobile on mount and resize
   useEffect(() => {
@@ -120,10 +172,16 @@ export function AppSidebar() {
     )
   }
 
-  // Desktop: Static sidebar
+  // Desktop: Collapsible sidebar
   return (
-    <aside className="hidden md:flex h-full w-60 flex-col border-r border-border bg-card">
-      <SidebarContent />
+    <aside className={cn(
+      "hidden md:flex h-full flex-col border-r border-border bg-card transition-all duration-200",
+      isCollapsed ? "w-14" : "w-60"
+    )}>
+      <SidebarContent
+        isCollapsed={isCollapsed}
+        onToggleCollapse={() => setIsCollapsed(!isCollapsed)}
+      />
     </aside>
   )
 }

package/packages/web/components/MigrationGate/MigrationGate.tsx

@@ -0,0 +1,304 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { CheckCircle2, Circle, Loader2, Key, Package, ExternalLink } from 'lucide-react'
+import { cn } from '@/lib/utils'
+
+interface ProjectInfo {
+  id: string
+  name: string
+  needsMigration: boolean
+}
+
+interface MigrationResult {
+  file: string
+  success: boolean
+  error?: string
+}
+
+type Status = 'checking' | 'needs-key' | 'needs-migration' | 'migrating' | 'ready'
+
+interface MigrationGateProps {
+  children: React.ReactNode
+}
+
+export function MigrationGate({ children }: MigrationGateProps) {
+  const [status, setStatus] = useState<Status>('checking')
+  const [projects, setProjects] = useState<ProjectInfo[]>([])
+  const [apiKey, setApiKey] = useState('')
+  const [savingKey, setSavingKey] = useState(false)
+  const [migratingProject, setMigratingProject] = useState<string | null>(null)
+  const [migrationResults, setMigrationResults] = useState<Record<string, MigrationResult[]>>({})
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    checkStatus()
+  }, [])
+
+  async function checkStatus() {
+    try {
+      // 1. Check API key
+      const settingsRes = await fetch('/api/settings')
+      const settings = await settingsRes.json()
+
+      if (!settings.data?.hasApiKey) {
+        setStatus('needs-key')
+        return
+      }
+
+      // 2. Check projects needing migration
+      const migrateRes = await fetch('/api/migrate')
+      const migrate = await migrateRes.json()
+
+      if (migrate.data?.projects?.length > 0) {
+        setProjects(migrate.data.projects.map((p: { id: string; name: string }) => ({
+          ...p,
+          needsMigration: true
+        })))
+        setStatus('needs-migration')
+        return
+      }
+
+      setStatus('ready')
+    } catch (err) {
+      console.error('Error checking migration status:', err)
+      // On error, just show the dashboard
+      setStatus('ready')
+    }
+  }
+
+  async function saveApiKey() {
+    if (!apiKey.trim()) return
+
+    setSavingKey(true)
+    setError(null)
+
+    try {
+      const res = await fetch('/api/settings', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ openRouterApiKey: apiKey.trim() })
+      })
+
+      const data = await res.json()
+
+      if (data.success) {
+        setApiKey('')
+        await checkStatus() // Re-check, might need migration now
+      } else {
+        setError(data.error || 'Failed to save API key')
+      }
+    } catch (err) {
+      setError('Failed to save API key')
+    } finally {
+      setSavingKey(false)
+    }
+  }
+
+  async function migrateProject(projectId: string) {
+    setMigratingProject(projectId)
+    setError(null)
+
+    try {
+      const res = await fetch('/api/migrate', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ projectId })
+      })
+
+      const data = await res.json()
+
+      if (data.success && data.data?.success) {
+        // Mark project as migrated
+        setProjects(prev => prev.map(p =>
+          p.id === projectId ? { ...p, needsMigration: false } : p
+        ))
+        setMigrationResults(prev => ({
+          ...prev,
+          [projectId]: data.data.results
+        }))
+
+        // Check if all done
+        const remaining = projects.filter(p => p.id !== projectId && p.needsMigration)
+        if (remaining.length === 0) {
+          setTimeout(() => setStatus('ready'), 1000)
+        }
+      } else {
+        setError(data.error || data.data?.error || 'Migration failed')
+        setMigrationResults(prev => ({
+          ...prev,
+          [projectId]: data.data?.results || []
+        }))
+      }
+    } catch (err) {
+      setError('Migration request failed')
+    } finally {
+      setMigratingProject(null)
+    }
+  }
+
+  async function migrateAll() {
+    const toMigrate = projects.filter(p => p.needsMigration)
+    for (const project of toMigrate) {
+      await migrateProject(project.id)
+    }
+  }
+
+  // Ready - show dashboard
+  if (status === 'ready') {
+    return <>{children}</>
+  }
+
+  // Loading
+  if (status === 'checking') {
+    return (
+      <div className="flex items-center justify-center min-h-[60vh]">
+        <div className="text-center space-y-4">
+          <Loader2 className="h-8 w-8 animate-spin mx-auto text-muted-foreground" />
+          <p className="text-muted-foreground">Checking migration status...</p>
+        </div>
+      </div>
+    )
+  }
+
+  // Needs API Key
+  if (status === 'needs-key') {
+    return (
+      <div className="flex items-center justify-center min-h-[60vh] p-4">
+        <Card className="w-full max-w-md">
+          <CardHeader className="text-center">
+            <div className="mx-auto mb-4 h-12 w-12 rounded-full bg-primary/10 flex items-center justify-center">
+              <Key className="h-6 w-6 text-primary" />
+            </div>
+            <CardTitle>OpenRouter API Key Required</CardTitle>
+            <CardDescription>
+              prjct needs an OpenRouter API key to migrate your projects to the new JSON format.
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="space-y-2">
+              <Input
+                type="password"
+                placeholder="sk-or-v1-..."
+                value={apiKey}
+                onChange={(e) => setApiKey(e.target.value)}
+                onKeyDown={(e) => e.key === 'Enter' && saveApiKey()}
+              />
+              <a
+                href="https://openrouter.ai/keys"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-sm text-muted-foreground hover:text-primary flex items-center gap-1"
+              >
+                Get your key at openrouter.ai/keys
+                <ExternalLink className="h-3 w-3" />
+              </a>
+            </div>
+
+            {error && (
+              <p className="text-sm text-destructive">{error}</p>
+            )}
+
+            <Button
+              onClick={saveApiKey}
+              disabled={!apiKey.trim() || savingKey}
+              className="w-full"
+            >
+              {savingKey ? (
+                <>
+                  <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                  Saving...
+                </>
+              ) : (
+                'Save Key'
+              )}
+            </Button>
+          </CardContent>
+        </Card>
+      </div>
+    )
+  }
+
+  // Needs Migration
+  return (
+    <div className="flex items-center justify-center min-h-[60vh] p-4">
+      <Card className="w-full max-w-lg">
+        <CardHeader className="text-center">
+          <div className="mx-auto mb-4 h-12 w-12 rounded-full bg-primary/10 flex items-center justify-center">
+            <Package className="h-6 w-6 text-primary" />
+          </div>
+          <CardTitle>Migration Required</CardTitle>
+          <CardDescription>
+            The following projects need to be migrated to the new JSON format.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="border rounded-lg divide-y">
+            {projects.map((project) => {
+              const isMigrating = migratingProject === project.id
+              const results = migrationResults[project.id]
+              const isMigrated = !project.needsMigration
+
+              return (
+                <div key={project.id} className="p-3 flex items-center justify-between gap-3">
+                  <div className="flex items-center gap-3 min-w-0">
+                    {isMigrated ? (
+                      <CheckCircle2 className="h-5 w-5 text-green-500 shrink-0" />
+                    ) : isMigrating ? (
+                      <Loader2 className="h-5 w-5 animate-spin text-primary shrink-0" />
+                    ) : (
+                      <Circle className="h-5 w-5 text-muted-foreground shrink-0" />
+                    )}
+                    <span className={cn(
+                      "truncate",
+                      isMigrated && "text-muted-foreground"
+                    )}>
+                      {project.name}
+                    </span>
+                  </div>
+
+                  {isMigrated ? (
+                    <span className="text-sm text-green-600">Migrated</span>
+                  ) : (
+                    <Button
+                      size="sm"
+                      variant="outline"
+                      onClick={() => migrateProject(project.id)}
+                      disabled={!!migratingProject}
+                    >
+                      {isMigrating ? 'Migrating...' : 'Migrate'}
+                    </Button>
+                  )}
+                </div>
+              )
+            })}
+          </div>
+
+          {error && (
+            <p className="text-sm text-destructive">{error}</p>
+          )}
+
+          {projects.some(p => p.needsMigration) && (
+            <Button
+              onClick={migrateAll}
+              disabled={!!migratingProject}
+              className="w-full"
+            >
+              {migratingProject ? (
+                <>
+                  <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                  Migrating...
+                </>
+              ) : (
+                'Migrate All'
+              )}
+            </Button>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

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

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

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

@@ -3,13 +3,9 @@ import { generateText } from 'ai'
 import { promises as fs } from 'fs'
 import { join } from 'path'
 import { homedir } from 'os'
-import { exec } from 'child_process'
-import { promisify } from 'util'
 
-const execAsync = promisify(exec)
 const SETTINGS_PATH = join(homedir(), '.prjct-cli', 'settings.json')
 const GLOBAL_STORAGE = join(homedir(), '.prjct-cli', 'projects')
-const PRJCT_CLI_PATH = join(__dirname, '..', '..', '..', '..')
 
 // Complete JSON Schema definitions for new architecture
 // JSON is source of truth, MD is generated for Claude
@@ -473,25 +469,11 @@ DESCRIPTION EXTRACTION:
     deletedFiles = await deleteLegacyFiles(projectId)
   }
 
-  // Generate views from new JSON files
-  let viewsGenerated = false
-  if (allSuccess) {
-    try {
-      // Try to run the generate-views CLI command
-      await execAsync(`bun ${join(PRJCT_CLI_PATH, 'bin', 'generate-views.js')} --project=${projectId}`)
-      viewsGenerated = true
-      results.push({ file: 'views', success: true })
-    } catch (viewError) {
-      // Views generation failed but migration still succeeded
-      results.push({
-        file: 'views',
-        success: false,
-        error: viewError instanceof Error ? viewError.message : 'Failed to generate views'
-      })
-    }
-  }
+  // NOTE: View generation removed from migration to prevent Bun crashes
+  // Views are generated on-demand by the view-generator when needed
+  // The JSON files in data/ are the source of truth now
 
-  return { success: allSuccess, results, deletedFiles, viewsGenerated }
+  return { success: allSuccess, results, deletedFiles, viewsGenerated: false }
 }
 
 export type ProjectInfo = {

package/packages/web/server.ts

@@ -100,7 +100,20 @@ app.prepare().then(() => {
     // Handle session creation directly in server (bypasses API route isolation)
     if (url.pathname === '/api/claude/sessions' && req.method === 'POST') {
       let body = ''
-      req.on('data', chunk => { body += chunk })
+      let bodySize = 0
+      const MAX_BODY_SIZE = 1024 * 1024 // 1MB limit
+
+      req.on('data', chunk => {
+        bodySize += chunk.length
+        if (bodySize > MAX_BODY_SIZE) {
+          res.statusCode = 413
+          res.setHeader('Content-Type', 'application/json')
+          res.end(JSON.stringify({ success: false, error: 'Request body too large' }))
+          req.destroy()
+          return
+        }
+        body += chunk
+      })
       req.on('end', () => {
         try {
           const { sessionId, projectDir } = JSON.parse(body)
@@ -171,11 +184,18 @@ app.prepare().then(() => {
     })
   }, HEARTBEAT_INTERVAL)
 
-  // Cleanup on server close
+  // Cleanup on WSS close
   wss.on('close', () => {
     clearInterval(heartbeatInterval)
   })
 
+  // Cleanup on server close
+  server.on('close', () => {
+    clearInterval(heartbeatInterval)
+    // Kill all active sessions
+    sessions.forEach((_, sessionId) => killSession(sessionId))
+  })
+
   server.on('upgrade', (request, socket, head) => {
     const url = new URL(request.url || '', `http://${request.headers.host}`)