prjct-cli 0.18.1 → 0.19.0

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

@@ -1,151 +0,0 @@
-'use client'
-
-import { useQuery } from '@tanstack/react-query'
-import { useTheme } from 'next-themes'
-import { Settings as SettingsIcon, CheckCircle, XCircle, Terminal, Sun, Moon, Monitor } from 'lucide-react'
-import { Button } from '@/components/ui/button'
-
-export default function Settings() {
-  const { theme, setTheme } = useTheme()
-
-  const { data: claudeStatus } = useQuery({
-    queryKey: ['claude-status'],
-    queryFn: async () => {
-      const res = await fetch('/api/claude/status')
-      const json = await res.json()
-      return json.data
-    }
-  })
-
-  return (
-    <div className="p-6 h-full overflow-auto">
-      <header className="mb-6">
-        <h1 className="text-2xl font-bold flex items-center gap-2">
-          <SettingsIcon className="w-6 h-6" />
-          Settings
-        </h1>
-      </header>
-
-      <div className="space-y-6 max-w-2xl">
-        {/* Appearance */}
-        <section className="bg-card border border-border rounded-lg p-6">
-          <h2 className="text-lg font-semibold mb-4 flex items-center gap-2">
-            <Sun className="w-5 h-5" />
-            Appearance
-          </h2>
-
-          <div className="space-y-4">
-            <div>
-              <p className="text-sm text-muted-foreground mb-3">
-                Choose how prjct looks to you. Select a single theme, or sync with your system settings.
-              </p>
-              <div className="flex gap-2">
-                <Button
-                  variant={theme === 'light' ? 'default' : 'outline'}
-                  size="sm"
-                  onClick={() => setTheme('light')}
-                  className="flex items-center gap-2"
-                >
-                  <Sun className="w-4 h-4" />
-                  Light
-                </Button>
-                <Button
-                  variant={theme === 'dark' ? 'default' : 'outline'}
-                  size="sm"
-                  onClick={() => setTheme('dark')}
-                  className="flex items-center gap-2"
-                >
-                  <Moon className="w-4 h-4" />
-                  Dark
-                </Button>
-                <Button
-                  variant={theme === 'system' ? 'default' : 'outline'}
-                  size="sm"
-                  onClick={() => setTheme('system')}
-                  className="flex items-center gap-2"
-                >
-                  <Monitor className="w-4 h-4" />
-                  System
-                </Button>
-              </div>
-            </div>
-          </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">
-            <Terminal className="w-5 h-5" />
-            Claude Code CLI
-          </h2>
-
-          <div className="flex items-center gap-3 mb-4">
-            {claudeStatus?.available ? (
-              <>
-                <CheckCircle className="w-5 h-5 text-green-500" />
-                <span className="text-green-500">Available</span>
-              </>
-            ) : (
-              <>
-                <XCircle className="w-5 h-5 text-red-500" />
-                <span className="text-red-500">Not Found</span>
-              </>
-            )}
-          </div>
-
-          {claudeStatus?.version && (
-            <p className="text-sm text-muted-foreground mb-4">
-              Version: {claudeStatus.version}
-            </p>
-          )}
-
-          <div className="bg-muted/50 rounded-md p-4 text-sm">
-            <p className="font-medium mb-2">How it works:</p>
-            <ul className="list-disc list-inside space-y-1 text-muted-foreground">
-              <li>prjct uses Claude Code CLI via PTY (pseudo-terminal)</li>
-              <li>Uses your existing Claude subscription (no API costs)</li>
-              <li>Full Claude Code experience in your browser</li>
-              <li>All tools work: Read, Write, Bash, etc.</li>
-            </ul>
-          </div>
-
-          {!claudeStatus?.available && (
-            <div className="mt-4 p-4 bg-yellow-500/10 border border-yellow-500/20 rounded-md">
-              <p className="text-sm text-yellow-500">
-                Install Claude Code CLI from{' '}
-                <a
-                  href="https://claude.ai/code"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="underline"
-                >
-                  claude.ai/code
-                </a>
-              </p>
-            </div>
-          )}
-        </section>
-
-        {/* About */}
-        <section className="bg-card border border-border rounded-lg p-6">
-          <h2 className="text-lg font-semibold mb-4">About prjct</h2>
-
-          <div className="space-y-2 text-sm text-muted-foreground">
-            <p>
-              <strong className="text-foreground">prjct</strong> is a developer momentum tool.
-            </p>
-            <p>
-              Track progress, ship features, stay focused. Built for Claude.
-            </p>
-          </div>
-
-          <div className="mt-4 pt-4 border-t border-border">
-            <p className="text-xs text-muted-foreground">
-              Version 0.1.0 • Made with prjct.app
-            </p>
-          </div>
-        </section>
-      </div>
-    </div>
-  )
-}

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

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

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

@@ -1,49 +0,0 @@
-'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
-      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

@@ -1,8 +0,0 @@
-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

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

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

@@ -1,9 +0,0 @@
-'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

@@ -1,23 +0,0 @@
-'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

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

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

@@ -1,93 +0,0 @@
-'use client'
-
-import { useState } from 'react'
-import { EmptyState } from '@/components/EmptyState'
-import { ExpandButton } from '@/components/ExpandButton'
-import { Bot, Star, TrendingUp, Wrench } from 'lucide-react'
-import { Badge } from '@/components/ui/badge'
-import { cn } from '@/lib/utils'
-import type { AgentsCardProps } from './AgentsCard.types'
-
-const COLLAPSED_LIMIT = 12
-
-export function AgentsCard({ agents, codeHref, className }: AgentsCardProps) {
-  const [expanded, setExpanded] = useState(false)
-  const displayAgents = expanded ? agents : agents.slice(0, COLLAPSED_LIMIT)
-  const hasMore = agents.length > COLLAPSED_LIMIT
-
-  return (
-    <div className={cn(
-      'relative overflow-hidden rounded-xl border bg-card p-4',
-      className
-    )}>
-      <div className="flex items-center justify-between mb-3">
-        <div className="flex items-center gap-2">
-          <Bot className="h-4 w-4 text-muted-foreground" />
-          <span className="text-xs font-bold uppercase tracking-[0.15em] text-muted-foreground">
-            Agents
-          </span>
-        </div>
-        <span className="text-xs font-medium text-muted-foreground tabular-nums">
-          {agents.length} available
-        </span>
-      </div>
-
-      {agents.length === 0 ? (
-        <EmptyState
-          icon={Bot}
-          title="No agents"
-          description="Run /p:sync to generate"
-          command="/p:sync"
-          href={codeHref}
-          compact
-        />
-      ) : (
-        <div className="space-y-2">
-          {displayAgents.map((agent) => {
-            const hasPerformance = agent.successRate !== undefined
-            const isTopPerformer = hasPerformance && agent.successRate! >= 80
-
-            return (
-              <div
-                key={agent.name}
-                className="flex items-center justify-between gap-2 py-1.5 px-2 rounded-lg -mx-2 hover:bg-muted/50"
-              >
-                <div className="flex items-center gap-2 min-w-0">
-                  {isTopPerformer ? (
-                    <Star className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
-                  ) : (
-                    <Wrench className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
-                  )}
-                  <span className="font-mono text-sm truncate">@{agent.name}</span>
-                </div>
-                <div className="flex items-center gap-2 shrink-0">
-                  {hasPerformance && (
-                    <span className="text-xs font-medium tabular-nums text-muted-foreground">
-                      {agent.successRate}%
-                    </span>
-                  )}
-                  {agent.improving && (
-                    <TrendingUp className="h-3 w-3 text-muted-foreground" />
-                  )}
-                  {agent.tasksCompleted !== undefined && agent.tasksCompleted > 0 && (
-                    <Badge variant="secondary" className="text-xs px-1.5 py-0 h-4">
-                      {agent.tasksCompleted} tasks
-                    </Badge>
-                  )}
-                </div>
-              </div>
-            )
-          })}
-          {hasMore && (
-            <ExpandButton
-              expanded={expanded}
-              totalCount={agents.length}
-              collapsedLimit={COLLAPSED_LIMIT}
-              onToggle={() => setExpanded(!expanded)}
-            />
-          )}
-        </div>
-      )}
-    </div>
-  )
-}

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

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

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

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

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

@@ -1,316 +0,0 @@
-'use client'
-
-import Link from 'next/link'
-import { usePathname } from 'next/navigation'
-import {
-  LayoutDashboard,
-  Settings,
-  HelpCircle,
-  Menu,
-  PanelLeft,
-  Terminal,
-} from 'lucide-react'
-import { useGlobalTerminal } from '@/context/GlobalTerminalContext'
-import { Badge } from '@/components/ui/badge'
-import { ProjectSelectorModal } from '@/components/ProjectSelectorModal'
-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,
-  isCollapsed = false,
-  onToggleCollapse,
-  onTerminalClick,
-  sessionCount
-}: {
-  onNavigate?: () => void
-  isCollapsed?: boolean
-  onToggleCollapse?: () => void
-  onTerminalClick?: () => void
-  sessionCount?: number
-}) {
-  const pathname = usePathname()
-
-  return (
-    <>
-      {/* Header */}
-      <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={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))
-            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
-          })}
-
-          {/* Terminal Button */}
-          {onTerminalClick && (
-            (() => {
-              const terminalButton = (
-                <button
-                  onClick={onTerminalClick}
-                  className={cn(
-                    'flex items-center rounded-md transition-colors min-h-[44px] w-full',
-                    isCollapsed ? 'justify-center px-2' : 'gap-3 px-3',
-                    'py-2.5',
-                    'text-muted-foreground hover:bg-accent hover:text-accent-foreground'
-                  )}
-                >
-                  <div className="relative">
-                    <Terminal className="h-5 w-5 shrink-0" />
-                    {sessionCount !== undefined && sessionCount > 0 && (
-                      <Badge
-                        className="absolute -top-2 -right-2 h-4 w-4 p-0 flex items-center justify-center text-[10px] bg-primary"
-                      >
-                        {sessionCount}
-                      </Badge>
-                    )}
-                  </div>
-                  {!isCollapsed && <span className="text-sm font-medium">Terminal</span>}
-                </button>
-              )
-
-              if (isCollapsed) {
-                return (
-                  <Tooltip key="terminal">
-                    <TooltipTrigger asChild>{terminalButton}</TooltipTrigger>
-                    <TooltipContent side="right">Terminal</TooltipContent>
-                  </Tooltip>
-                )
-              }
-              return terminalButton
-            })()
-          )}
-        </div>
-      </nav>
-
-      {/* Footer */}
-      <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>
-    </>
-  )
-}
-
-const SIDEBAR_COLLAPSED_KEY = 'prjct-sidebar-collapsed'
-
-export function AppSidebar() {
-  const [isOpen, setIsOpen] = useState(false)
-  const [isMobile, setIsMobile] = useState(false)
-  const [isCollapsed, setIsCollapsed] = useState(false)
-  const [showProjectSelector, setShowProjectSelector] = useState(false)
-  const pathname = usePathname()
-
-  // Terminal context
-  const {
-    toggleDock,
-    openDock,
-    getTotalSessionCount,
-    projectSessions,
-    createSessionForProject,
-  } = useGlobalTerminal()
-
-  const sessionCount = getTotalSessionCount()
-
-  // Handle terminal button click
-  const handleTerminalClick = () => {
-    // If we're on a project page, auto-detect project
-    const projectMatch = pathname?.match(/\/project\/([^/]+)/)
-
-    if (projectMatch) {
-      const projectId = projectMatch[1]
-      const existingProject = projectSessions.get(projectId)
-
-      if (existingProject) {
-        // Project already has sessions, just toggle dock
-        toggleDock()
-      } else {
-        // Need to show project selector to get project details
-        // For now, open dock (will be empty) - the user should create session from the dock
-        setShowProjectSelector(true)
-      }
-    } else if (sessionCount > 0) {
-      // Has sessions, toggle dock
-      toggleDock()
-    } else {
-      // No sessions and no project context - show project selector
-      setShowProjectSelector(true)
-    }
-  }
-
-  // Load collapsed state from localStorage on mount
-  useEffect(() => {
-    const stored = localStorage.getItem(SIDEBAR_COLLAPSED_KEY)
-    if (stored !== null) {
-      setIsCollapsed(stored === 'true')
-    }
-  }, [])
-
-  // Persist collapsed state to localStorage
-  const handleToggleCollapse = () => {
-    const newValue = !isCollapsed
-    setIsCollapsed(newValue)
-    localStorage.setItem(SIDEBAR_COLLAPSED_KEY, String(newValue))
-  }
-
-  // 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)}
-            onTerminalClick={handleTerminalClick}
-            sessionCount={sessionCount}
-          />
-        </SheetContent>
-      </Sheet>
-    )
-  }
-
-  // Desktop: Collapsible sidebar
-  return (
-    <>
-      <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={handleToggleCollapse}
-          onTerminalClick={handleTerminalClick}
-          sessionCount={sessionCount}
-        />
-      </aside>
-
-      {/* Project Selector Modal - will be implemented separately */}
-      {showProjectSelector && (
-        <ProjectSelectorModal
-          isOpen={showProjectSelector}
-          onClose={() => setShowProjectSelector(false)}
-          onSelectProject={(projectId, projectName, projectPath) => {
-            createSessionForProject(projectId, projectName, projectPath)
-            openDock()
-            setShowProjectSelector(false)
-          }}
-        />
-      )}
-    </>
-  )
-}
-
-// 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" />
-}