prjct-cli 0.10.14 → 0.11.1

package/packages/web/components/TerminalTabs.tsx

@@ -0,0 +1,210 @@
+'use client'
+
+import { useCallback, useState, useRef, useEffect } from 'react'
+import { useTerminalTabs } from '@/context/TerminalTabsContext'
+import { TerminalTab } from './TerminalTab'
+import { Button } from '@/components/ui/button'
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog'
+import { X, Terminal as TerminalIcon, Plus, Loader2, AlertTriangle } from 'lucide-react'
+import { cn } from '@/lib/utils'
+
+interface TerminalTabsProps {
+  projectDir: string
+}
+
+export function TerminalTabs({ projectDir }: TerminalTabsProps) {
+  const {
+    sessions,
+    activeSessionId,
+    createSession,
+    closeSession,
+    setActiveSession,
+    updateSession
+  } = useTerminalTabs()
+
+  const [sessionToClose, setSessionToClose] = useState<string | null>(null)
+  const [editingSessionId, setEditingSessionId] = useState<string | null>(null)
+  const [editValue, setEditValue] = useState('')
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  const handleCloseTab = useCallback((sessionId: string, e: React.MouseEvent) => {
+    e.stopPropagation()
+    const session = sessions.find(s => s.id === sessionId)
+    if (session?.isConnected) {
+      setSessionToClose(sessionId)
+    } else {
+      closeSession(sessionId)
+    }
+  }, [sessions, closeSession])
+
+  const handleConfirmClose = useCallback(() => {
+    if (sessionToClose) {
+      // Call disconnect on the terminal
+      const disconnectFn = (window as unknown as Record<string, () => void>)[`terminal_disconnect_${sessionToClose}`]
+      if (disconnectFn) disconnectFn()
+      closeSession(sessionToClose)
+      setSessionToClose(null)
+    }
+  }, [sessionToClose, closeSession])
+
+  const startEditing = useCallback((sessionId: string, currentLabel: string) => {
+    setEditingSessionId(sessionId)
+    setEditValue(currentLabel)
+  }, [])
+
+  const finishEditing = useCallback(() => {
+    if (editingSessionId && editValue.trim()) {
+      updateSession(editingSessionId, { label: editValue.trim() })
+    }
+    setEditingSessionId(null)
+    setEditValue('')
+  }, [editingSessionId, editValue, updateSession])
+
+  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      finishEditing()
+    } else if (e.key === 'Escape') {
+      setEditingSessionId(null)
+      setEditValue('')
+    }
+  }, [finishEditing])
+
+  // Focus input when editing starts
+  useEffect(() => {
+    if (editingSessionId && inputRef.current) {
+      inputRef.current.focus()
+      inputRef.current.select()
+    }
+  }, [editingSessionId])
+
+  const hasNoSessions = sessions.length === 0
+
+  return (
+    <div className="flex flex-col h-full">
+      {/* Tab bar */}
+      <div className="flex items-center gap-1 px-2 py-1 bg-card border-b border-border min-h-[40px]">
+        {sessions.map(session => (
+          <div
+            key={session.id}
+            onClick={() => setActiveSession(session.id)}
+            onDoubleClick={() => startEditing(session.id, session.label)}
+            role="tab"
+            tabIndex={0}
+            onKeyDown={(e) => e.key === 'Enter' && setActiveSession(session.id)}
+            className={cn(
+              'flex items-center gap-2 px-3 py-1.5 rounded-md text-sm transition-colors cursor-pointer',
+              'hover:bg-muted',
+              session.id === activeSessionId
+                ? 'bg-muted text-foreground'
+                : 'text-muted-foreground'
+            )}
+          >
+            {session.isLoading ? (
+              <Loader2 className="w-3.5 h-3.5 animate-spin" />
+            ) : session.isConnected ? (
+              <span className="relative flex h-2 w-2">
+                <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75" />
+                <span className="relative inline-flex rounded-full h-2 w-2 bg-green-500" />
+              </span>
+            ) : (
+              <span className="h-2 w-2 rounded-full bg-muted-foreground/50" />
+            )}
+            {editingSessionId === session.id ? (
+              <input
+                ref={inputRef}
+                type="text"
+                value={editValue}
+                onChange={(e) => setEditValue(e.target.value)}
+                onBlur={finishEditing}
+                onKeyDown={handleKeyDown}
+                onClick={(e) => e.stopPropagation()}
+                className="w-[100px] bg-background border border-border rounded px-1 py-0.5 text-sm outline-none focus:ring-1 focus:ring-ring"
+              />
+            ) : (
+              <span className="truncate max-w-[100px]">{session.label}</span>
+            )}
+            <button
+              onClick={(e) => handleCloseTab(session.id, e)}
+              className="p-0.5 rounded hover:bg-background/50 text-muted-foreground hover:text-foreground"
+            >
+              <X className="w-3 h-3" />
+            </button>
+          </div>
+        ))}
+
+        {/* New tab button */}
+        <Button
+          variant="ghost"
+          size="icon"
+          className="h-7 w-7 ml-1"
+          onClick={createSession}
+        >
+          <Plus className="w-4 h-4" />
+        </Button>
+      </div>
+
+      {/* Terminal area */}
+      <div className="flex-1 relative">
+        {hasNoSessions ? (
+          <div className="absolute inset-0 flex items-center justify-center bg-background">
+            <div className="text-center">
+              <div className="w-16 h-16 rounded-full bg-muted flex items-center justify-center mx-auto mb-4">
+                <TerminalIcon className="w-8 h-8 text-muted-foreground" />
+              </div>
+              <h2 className="text-lg font-medium mb-2">No active sessions</h2>
+              <p className="text-muted-foreground text-sm mb-4">
+                Click + or press Start to create a new terminal
+              </p>
+              <Button onClick={createSession}>
+                <Plus className="w-4 h-4 mr-2" />
+                New Terminal
+              </Button>
+            </div>
+          </div>
+        ) : (
+          sessions.map(session => (
+            <TerminalTab
+              key={session.id}
+              session={session}
+              projectDir={projectDir}
+              isActive={session.id === activeSessionId}
+            />
+          ))
+        )}
+      </div>
+
+      {/* Close confirmation dialog */}
+      <AlertDialog open={!!sessionToClose} onOpenChange={(open: boolean) => !open && setSessionToClose(null)}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle className="flex items-center gap-2">
+              <AlertTriangle className="w-5 h-5 text-destructive" />
+              Close Terminal?
+            </AlertDialogTitle>
+            <AlertDialogDescription>
+              This terminal has an active session. Closing it will terminate the connection.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={handleConfirmClose}
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+            >
+              Close Terminal
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  )
+}

package/packages/web/components/charts/SessionsChart.tsx

@@ -0,0 +1,172 @@
+'use client'
+
+import * as React from 'react'
+import { Bar, BarChart, CartesianGrid, XAxis } from 'recharts'
+import { useQuery } from '@tanstack/react-query'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card'
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from '@/components/ui/chart'
+
+const chartConfig = {
+  views: {
+    label: 'Activity',
+  },
+  tasks: {
+    label: 'Tasks Completed',
+    color: 'var(--chart-1)',
+  },
+  ships: {
+    label: 'Features Shipped',
+    color: 'var(--chart-2)',
+  },
+} satisfies ChartConfig
+
+interface ChartDataPoint {
+  date: string
+  tasks: number
+  ships: number
+}
+
+interface SessionsHistoryResponse {
+  success: boolean
+  data: {
+    chartData: ChartDataPoint[]
+    totals: {
+      tasks: number
+      ships: number
+    }
+    dateRange: {
+      start: string
+      end: string
+    }
+  }
+}
+
+export function SessionsChart() {
+  const [activeChart, setActiveChart] =
+    React.useState<'tasks' | 'ships'>('tasks')
+
+  const { data: response, isLoading } = useQuery<SessionsHistoryResponse>({
+    queryKey: ['sessions-history'],
+    queryFn: async () => {
+      const res = await fetch('/api/sessions/history')
+      return res.json()
+    },
+  })
+
+  const chartData = response?.data?.chartData || []
+  const totals = response?.data?.totals || { tasks: 0, ships: 0 }
+
+  if (isLoading) {
+    return (
+      <Card>
+        <CardHeader className="flex flex-col items-stretch space-y-0 border-b p-0 sm:flex-row">
+          <div className="flex flex-1 flex-col justify-center gap-1 px-4 py-3 sm:px-5 sm:py-4">
+            <CardTitle>Session Activity</CardTitle>
+            <CardDescription>Loading...</CardDescription>
+          </div>
+        </CardHeader>
+        <CardContent className="px-2 sm:p-4">
+          <div className="h-[250px] flex items-center justify-center">
+            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary" />
+          </div>
+        </CardContent>
+      </Card>
+    )
+  }
+
+  return (
+    <Card>
+      <CardHeader className="flex flex-col items-stretch space-y-0 border-b p-0 sm:flex-row">
+        <div className="flex flex-1 flex-col justify-center gap-1 px-4 py-3 sm:px-5 sm:py-4">
+          <CardTitle>Session Activity</CardTitle>
+          <CardDescription>
+            Last 90 days across all projects
+          </CardDescription>
+        </div>
+        <div className="flex">
+          {(['tasks', 'ships'] as const).map((key) => {
+            return (
+              <button
+                key={key}
+                data-active={activeChart === key}
+                className="relative z-30 flex flex-1 flex-col justify-center gap-1 border-t px-4 py-3 text-left even:border-l data-[active=true]:bg-muted/50 sm:border-l sm:border-t-0 sm:px-6 sm:py-4"
+                onClick={() => setActiveChart(key)}
+              >
+                <span className="text-xs text-muted-foreground">
+                  {chartConfig[key].label}
+                </span>
+                <span className="text-lg font-bold leading-none sm:text-3xl">
+                  {totals[key].toLocaleString()}
+                </span>
+              </button>
+            )
+          })}
+        </div>
+      </CardHeader>
+      <CardContent className="px-2 sm:p-4">
+        {chartData.length === 0 ? (
+          <div className="h-[250px] flex items-center justify-center text-muted-foreground">
+            No session data yet
+          </div>
+        ) : (
+          <ChartContainer
+            config={chartConfig}
+            className="aspect-auto h-[250px] w-full"
+          >
+            <BarChart
+              accessibilityLayer
+              data={chartData}
+              margin={{
+                left: 12,
+                right: 12,
+              }}
+            >
+              <CartesianGrid vertical={false} />
+              <XAxis
+                dataKey="date"
+                tickLine={false}
+                axisLine={false}
+                tickMargin={8}
+                minTickGap={32}
+                tickFormatter={(value: string) => {
+                  const date = new Date(value)
+                  return date.toLocaleDateString('en-US', {
+                    month: 'short',
+                    day: 'numeric',
+                  })
+                }}
+              />
+              <ChartTooltip
+                content={
+                  <ChartTooltipContent
+                    className="w-[150px]"
+                    nameKey="views"
+                    labelFormatter={(value) => {
+                      return new Date(value).toLocaleDateString('en-US', {
+                        month: 'short',
+                        day: 'numeric',
+                        year: 'numeric',
+                      })
+                    }}
+                  />
+                }
+              />
+              <Bar dataKey={activeChart} fill={`var(--color-${activeChart})`} />
+            </BarChart>
+          </ChartContainer>
+        )}
+      </CardContent>
+    </Card>
+  )
+}

package/packages/web/components/providers.tsx

@@ -0,0 +1,45 @@
+'use client'
+
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { useState, type ReactNode } from 'react'
+import { ThemeProvider, type ThemeProviderProps } from 'next-themes'
+import { TerminalProvider } from '@/context/TerminalContext'
+
+function ThemeWrapper({ children, ...props }: ThemeProviderProps & { children: ReactNode }) {
+  return <ThemeProvider {...props}>{children}</ThemeProvider>
+}
+
+export function Providers({ children }: { children: ReactNode }) {
+  const [queryClient] = useState(() => new QueryClient({
+    defaultOptions: {
+      queries: {
+        // Data considered fresh for 2.5 seconds
+        staleTime: 2500,
+        // Garbage collect after 5 minutes
+        gcTime: 5 * 60 * 1000,
+        // Refetch on window focus for real-time feel
+        refetchOnWindowFocus: true,
+        // Refetch when reconnecting
+        refetchOnReconnect: true,
+        // Retry failed requests once
+        retry: 1,
+        retryDelay: 1000,
+      },
+    },
+  }))
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <ThemeWrapper
+        attribute="class"
+        defaultTheme="dark"
+        enableSystem
+        disableTransitionOnChange
+      >
+        <TerminalProvider>
+          {children}
+        </TerminalProvider>
+      </ThemeWrapper>
+    </QueryClientProvider>
+  )
+}

package/packages/web/components/ui/alert-dialog.tsx

@@ -0,0 +1,157 @@
+"use client"
+
+import * as React from "react"
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button"
+
+function AlertDialog({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
+}
+
+function AlertDialogTrigger({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+  return (
+    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+  )
+}
+
+function AlertDialogPortal({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+  return (
+    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
+  )
+}
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
+  return (
+    <AlertDialogPrimitive.Overlay
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Content
+        data-slot="alert-dialog-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          className
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  )
+}
+
+function AlertDialogHeader({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogFooter({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn("text-lg font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogAction({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
+  return (
+    <AlertDialogPrimitive.Action
+      className={cn(buttonVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogCancel({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
+  return (
+    <AlertDialogPrimitive.Cancel
+      className={cn(buttonVariants({ variant: "outline" }), className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+}

package/packages/web/components/ui/badge.tsx

@@ -0,0 +1,46 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive:
+          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "span"
+
+  return (
+    <Comp
+      data-slot="badge"
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+export { Badge, badgeVariants }

package/packages/web/components/ui/button.tsx

@@ -0,0 +1,60 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }