prjct-cli 0.11.0 → 0.11.2

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

@@ -0,0 +1,150 @@
+'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/AppSidebar.tsx

@@ -0,0 +1,113 @@
+'use client'
+
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+import {
+  LayoutDashboard,
+  Settings,
+  HelpCircle,
+  PanelLeft
+} from 'lucide-react'
+import { Logo } from './Logo'
+import { cn } from '@/lib/utils'
+import { useState } from 'react'
+
+const navItems = [
+  { href: '/', icon: LayoutDashboard, label: 'Dashboard' },
+]
+
+export function AppSidebar() {
+  const pathname = usePathname()
+  const [isCollapsed, setIsCollapsed] = useState(false)
+
+  return (
+    <aside
+      className={cn(
+        'flex h-full flex-col border-r border-border bg-card transition-all duration-200',
+        isCollapsed ? 'w-14' : 'w-60'
+      )}
+    >
+      {/* Header */}
+      <div className={cn(
+        'flex h-14 items-center border-b border-border',
+        isCollapsed ? 'justify-center' : 'justify-between px-3'
+      )}>
+        {!isCollapsed && (
+          <Link href="/">
+            <Logo size="xs" showText rounded />
+          </Link>
+        )}
+        <button
+          onClick={() => setIsCollapsed(!isCollapsed)}
+          className="h-8 w-8 rounded-md flex items-center justify-center text-muted-foreground hover:bg-accent hover:text-accent-foreground transition-colors"
+        >
+          <PanelLeft className="h-4 w-4" />
+        </button>
+      </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))
+            return (
+              <Link
+                key={href}
+                href={href}
+                className={cn(
+                  'flex items-center gap-3 rounded-md px-3 py-2 transition-colors',
+                  isCollapsed && 'justify-center px-2',
+                  isActive
+                    ? 'bg-accent text-accent-foreground'
+                    : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground'
+                )}
+                title={isCollapsed ? label : undefined}
+              >
+                <Icon className="h-4 w-4 shrink-0" />
+                {!isCollapsed && <span>{label}</span>}
+              </Link>
+            )
+          })}
+        </div>
+      </nav>
+
+      {/* Footer */}
+      <div className={cn(
+        'border-t border-border p-3 space-y-1',
+        isCollapsed && 'px-2'
+      )}>
+        <Link
+          href="/settings"
+          className={cn(
+            'flex items-center gap-3 rounded-md px-3 py-2 transition-colors',
+            isCollapsed && 'justify-center px-2',
+            pathname === '/settings'
+              ? 'bg-accent text-accent-foreground'
+              : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground'
+          )}
+          title={isCollapsed ? 'Settings' : undefined}
+        >
+          <Settings className="h-4 w-4 shrink-0" />
+          {!isCollapsed && <span>Settings</span>}
+        </Link>
+        <Link
+          href="/help"
+          className={cn(
+            'flex items-center gap-3 rounded-md px-3 py-2 transition-colors',
+            isCollapsed && 'justify-center px-2',
+            pathname === '/help'
+              ? 'bg-accent text-accent-foreground'
+              : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground'
+          )}
+          title={isCollapsed ? 'Help' : undefined}
+        >
+          <HelpCircle className="h-4 w-4 shrink-0" />
+          {!isCollapsed && <span>Need help?</span>}
+        </Link>
+      </div>
+    </aside>
+  )
+}

package/packages/web/components/CommandButton.tsx

@@ -0,0 +1,39 @@
+'use client'
+
+import { LucideIcon } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/tooltip'
+
+interface CommandButtonProps {
+  cmd: string
+  icon: LucideIcon
+  tip: string
+  disabled?: boolean
+  onClick: () => void
+}
+
+export function CommandButton({ cmd, icon: Icon, tip, disabled, onClick }: CommandButtonProps) {
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={onClick}
+          disabled={disabled}
+          className="h-11 w-11"
+        >
+          <Icon className="w-5 h-5" />
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent side="right">
+        <p className="font-semibold">{tip}</p>
+        <p className="font-mono text-xs text-muted-foreground">{cmd}</p>
+      </TooltipContent>
+    </Tooltip>
+  )
+}

package/packages/web/components/ConnectionStatus.tsx

@@ -0,0 +1,29 @@
+import { Badge } from '@/components/ui/badge'
+import { RefreshCw } from 'lucide-react'
+
+interface ConnectionStatusProps {
+  isConnected: boolean
+  isReconnecting?: boolean
+  reconnectInfo?: { attempt: number; max: number } | null
+}
+
+export function ConnectionStatus({ isConnected, isReconnecting, reconnectInfo }: ConnectionStatusProps) {
+  if (isReconnecting && reconnectInfo) {
+    return (
+      <Badge variant="outline" className="text-yellow-500 border-yellow-500/50 animate-pulse">
+        <RefreshCw className="w-3 h-3 mr-1 animate-spin" />
+        Reconnecting ({reconnectInfo.attempt}/{reconnectInfo.max})
+      </Badge>
+    )
+  }
+
+  if (isConnected) {
+    return (
+      <Badge variant="outline" className="text-green-500 border-green-500/50">
+        Connected
+      </Badge>
+    )
+  }
+
+  return null
+}

package/packages/web/components/Logo.tsx

@@ -0,0 +1,65 @@
+import { cn } from '@/lib/utils'
+
+interface LogoProps {
+  showText?: boolean
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+  rounded?: boolean
+}
+
+export function Logo({ showText = true, size = 'md', rounded = false }: LogoProps) {
+  const logoSize = {
+    xs: 'size-7',
+    sm: 'size-10',
+    md: 'size-12',
+    lg: 'size-14',
+    xl: 'size-16',
+  }
+
+  const textSize = {
+    xs: 'text-sm',
+    sm: 'text-lg',
+    md: 'text-lg',
+    lg: 'text-2xl',
+    xl: 'text-3xl',
+  }
+
+  const containerTextSize = {
+    xs: 'text-sm',
+    sm: 'text-base',
+    md: 'text-xl',
+    lg: 'text-2xl',
+    xl: 'text-3xl',
+  }
+
+  const brandTextSize = {
+    xs: 'text-xs',
+    sm: 'text-sm',
+    md: 'text-lg',
+    lg: 'text-xl',
+    xl: 'text-2xl',
+  }
+
+  return (
+    <div
+      className={cn('flex items-center gap-2', containerTextSize[size])}
+      data-testid="prjct-logo"
+    >
+      <div className="relative isolate overflow-visible">
+        <div className={cn("fancy-border pointer-events-none", rounded && "rounded-full")}></div>
+        <div
+          className={cn(
+            'relative z-10 flex items-center justify-center border border-border bg-foreground text-background shadow-sm',
+            rounded ? 'rounded-full' : 'rounded-lg',
+            logoSize[size]
+          )}
+          data-testid="prjct-logo-icon"
+        >
+          <p className={cn('mb-0.5 inline-block font-bold leading-none', textSize[size])}>p/</p>
+        </div>
+      </div>
+      {showText && (
+        <span className={cn(brandTextSize[size], 'font-bold text-foreground')}>prjct</span>
+      )}
+    </div>
+  )
+}

package/packages/web/components/MarkdownContent.tsx

@@ -0,0 +1,123 @@
+'use client'
+
+import ReactMarkdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
+import { cn } from '@/lib/utils'
+
+interface MarkdownContentProps {
+  content: string
+  className?: string
+}
+
+export function MarkdownContent({ content, className }: MarkdownContentProps) {
+  if (!content || !content.trim()) {
+    return (
+      <p className="text-sm text-muted-foreground italic">No content</p>
+    )
+  }
+
+  return (
+    <div className={cn('prose prose-sm dark:prose-invert max-w-none', className)}>
+      <ReactMarkdown
+        remarkPlugins={[remarkGfm]}
+        components={{
+          // Headers
+          h1: ({ children }) => (
+            <h1 className="text-xl font-bold mt-4 mb-2 first:mt-0">{children}</h1>
+          ),
+          h2: ({ children }) => (
+            <h2 className="text-lg font-semibold mt-4 mb-2 border-b pb-1">{children}</h2>
+          ),
+          h3: ({ children }) => (
+            <h3 className="text-base font-medium mt-3 mb-1">{children}</h3>
+          ),
+          // Lists
+          ul: ({ children }) => (
+            <ul className="list-disc list-inside space-y-1 my-2">{children}</ul>
+          ),
+          ol: ({ children }) => (
+            <ol className="list-decimal list-inside space-y-1 my-2">{children}</ol>
+          ),
+          li: ({ children }) => (
+            <li className="text-sm">{children}</li>
+          ),
+          // Checkbox lists (GFM)
+          input: ({ checked, ...props }) => (
+            <input
+              type="checkbox"
+              checked={checked}
+              readOnly
+              className="mr-2 rounded"
+              {...props}
+            />
+          ),
+          // Paragraphs
+          p: ({ children }) => (
+            <p className="text-sm my-1.5 leading-relaxed">{children}</p>
+          ),
+          // Code
+          code: ({ className, children, ...props }) => {
+            const isInline = !className
+            if (isInline) {
+              return (
+                <code className="bg-muted px-1 py-0.5 rounded text-xs font-mono" {...props}>
+                  {children}
+                </code>
+              )
+            }
+            return (
+              <code className={cn('block bg-muted p-2 rounded text-xs font-mono overflow-x-auto', className)} {...props}>
+                {children}
+              </code>
+            )
+          },
+          pre: ({ children }) => (
+            <pre className="bg-muted p-3 rounded-md overflow-x-auto my-2 text-xs">
+              {children}
+            </pre>
+          ),
+          // Tables
+          table: ({ children }) => (
+            <div className="overflow-x-auto my-2">
+              <table className="min-w-full text-xs border-collapse">{children}</table>
+            </div>
+          ),
+          thead: ({ children }) => (
+            <thead className="bg-muted">{children}</thead>
+          ),
+          th: ({ children }) => (
+            <th className="px-2 py-1 text-left font-medium border-b">{children}</th>
+          ),
+          td: ({ children }) => (
+            <td className="px-2 py-1 border-b">{children}</td>
+          ),
+          // Blockquotes
+          blockquote: ({ children }) => (
+            <blockquote className="border-l-2 border-muted-foreground/30 pl-3 italic text-muted-foreground my-2">
+              {children}
+            </blockquote>
+          ),
+          // Horizontal rules
+          hr: () => (
+            <hr className="my-4 border-border" />
+          ),
+          // Strong/em
+          strong: ({ children }) => (
+            <strong className="font-semibold">{children}</strong>
+          ),
+          em: ({ children }) => (
+            <em className="italic">{children}</em>
+          ),
+          // Links
+          a: ({ href, children }) => (
+            <a href={href} className="text-primary hover:underline" target="_blank" rel="noopener noreferrer">
+              {children}
+            </a>
+          ),
+        }}
+      >
+        {content}
+      </ReactMarkdown>
+    </div>
+  )
+}

package/packages/web/components/ProjectAvatar.tsx

@@ -0,0 +1,54 @@
+'use client'
+
+import { cn } from '@/lib/utils'
+
+interface ProjectAvatarProps {
+  projectId: string
+  name: string
+  iconPath?: string | null
+  size?: 'sm' | 'md' | 'lg'
+  className?: string
+}
+
+const sizeClasses = {
+  sm: 'w-8 h-8 text-xs',
+  md: 'w-9 h-9 text-sm',
+  lg: 'w-10 h-10 text-sm'
+}
+
+export function ProjectAvatar({
+  projectId,
+  name,
+  iconPath,
+  size = 'md',
+  className
+}: ProjectAvatarProps) {
+  const initials = name.slice(0, 2).toUpperCase()
+
+  return (
+    <div
+      className={cn(
+        'rounded-lg bg-muted flex items-center justify-center overflow-hidden shrink-0',
+        sizeClasses[size],
+        className
+      )}
+    >
+      {iconPath ? (
+        <img
+          src={`/api/projects/${projectId}/icon`}
+          alt=""
+          className="w-full h-full object-cover"
+          onError={(e) => {
+            e.currentTarget.style.display = 'none'
+            if (e.currentTarget.nextElementSibling) {
+              (e.currentTarget.nextElementSibling as HTMLElement).classList.remove('hidden')
+            }
+          }}
+        />
+      ) : null}
+      <span className={cn('font-bold text-muted-foreground', iconPath ? 'hidden' : '')}>
+        {initials}
+      </span>
+    </div>
+  )
+}

package/packages/web/components/TechStackBadges.tsx

@@ -0,0 +1,20 @@
+import { Badge } from '@/components/ui/badge'
+
+interface TechStackBadgesProps {
+  techStack: string[]
+  max?: number
+}
+
+export function TechStackBadges({ techStack, max = 4 }: TechStackBadgesProps) {
+  if (!techStack || techStack.length === 0) return null
+
+  return (
+    <div className="flex gap-1">
+      {techStack.slice(0, max).map((tech) => (
+        <Badge key={tech} variant="secondary" className="text-[10px] px-1.5 py-0">
+          {tech}
+        </Badge>
+      ))}
+    </div>
+  )
+}

package/packages/web/components/TerminalTab.tsx

@@ -0,0 +1,84 @@
+'use client'
+
+import { useEffect, useRef, useCallback } from 'react'
+import { useClaudeTerminal } from '@/hooks/useClaudeTerminal'
+import { useTerminalTabs, type TerminalSession } from '@/context/TerminalTabsContext'
+
+interface TerminalTabProps {
+  session: TerminalSession
+  projectDir: string
+  isActive: boolean
+}
+
+export function TerminalTab({ session, projectDir, isActive }: TerminalTabProps) {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const hasInitializedRef = useRef(false)
+  const hasConnectedRef = useRef(false)
+  const { updateSession, registerSendInput, registerFocusTerminal } = useTerminalTabs()
+
+  const handleConnect = useCallback(() => {
+    updateSession(session.id, { isConnected: true, isLoading: false })
+  }, [session.id, updateSession])
+
+  const handleDisconnect = useCallback(() => {
+    updateSession(session.id, { isConnected: false, isLoading: false })
+  }, [session.id, updateSession])
+
+  const handleError = useCallback((error: string) => {
+    console.error(`[Terminal ${session.id}] Error:`, error)
+    updateSession(session.id, { isLoading: false })
+  }, [session.id, updateSession])
+
+  const {
+    initTerminal,
+    connect,
+    disconnect,
+    sendInput,
+    focusTerminal,
+  } = useClaudeTerminal({
+    sessionId: session.id,
+    projectDir,
+    onConnect: handleConnect,
+    onDisconnect: handleDisconnect,
+    onError: handleError,
+  })
+
+  // Initialize terminal AND connect - only once
+  useEffect(() => {
+    if (containerRef.current && !hasInitializedRef.current) {
+      hasInitializedRef.current = true
+
+      initTerminal(containerRef.current).then(() => {
+        if (!hasConnectedRef.current) {
+          hasConnectedRef.current = true
+          connect()
+        }
+      })
+    }
+  }, []) // Empty deps - run only on mount
+
+  // Register sendInput and focusTerminal for this session
+  useEffect(() => {
+    registerSendInput(session.id, sendInput)
+    registerFocusTerminal(session.id, focusTerminal)
+  }, [session.id, sendInput, focusTerminal, registerSendInput, registerFocusTerminal])
+
+  // Expose disconnect for external use
+  useEffect(() => {
+    // Store disconnect function on window for access from parent
+    const key = `terminal_disconnect_${session.id}`
+    ;(window as unknown as Record<string, () => void>)[key] = disconnect
+    return () => {
+      delete (window as unknown as Record<string, () => void>)[key]
+    }
+  }, [session.id, disconnect])
+
+  return (
+    <div
+      className="absolute inset-0 bg-[#0a0a0f] px-2 py-2"
+      style={{ display: isActive ? 'block' : 'none' }}
+    >
+      <div ref={containerRef} className="h-full w-full" />
+    </div>
+  )
+}