prjct-cli 0.13.2 → 0.15.0

package/packages/web/lib/generate-week-report.ts

@@ -0,0 +1,285 @@
+import type { StatsResult } from './services/stats.server'
+
+export interface ShippedItem {
+  name: string
+  date: string
+  version?: string
+  type?: string
+}
+
+export interface WeekData {
+  year: number
+  week: number
+  startDate: Date
+  endDate: Date
+  shipped: ShippedItem[]
+  tasksCompleted: number
+  bugsFixed: number
+  syncs: number
+  activeDays: number
+}
+
+/**
+ * Get ISO week number for a date
+ */
+export function getWeekNumber(date: Date): number {
+  const d = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()))
+  const dayNum = d.getUTCDay() || 7
+  d.setUTCDate(d.getUTCDate() + 4 - dayNum)
+  const yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1))
+  return Math.ceil((((d.getTime() - yearStart.getTime()) / 86400000) + 1) / 7)
+}
+
+/**
+ * Get current year and week
+ */
+export function getCurrentYearWeek(): { year: number; week: number } {
+  const now = new Date()
+  return {
+    year: now.getFullYear(),
+    week: getWeekNumber(now)
+  }
+}
+
+/**
+ * Get start and end dates for a given ISO week
+ */
+export function getWeekDateRange(year: number, week: number): { start: Date; end: Date } {
+  // Find January 4th of the year (always in week 1)
+  const jan4 = new Date(year, 0, 4)
+  const dayOfWeek = jan4.getDay() || 7
+
+  // Find Monday of week 1
+  const week1Monday = new Date(jan4)
+  week1Monday.setDate(jan4.getDate() - dayOfWeek + 1)
+
+  // Calculate target week's Monday
+  const targetMonday = new Date(week1Monday)
+  targetMonday.setDate(week1Monday.getDate() + (week - 1) * 7)
+
+  // Calculate Sunday
+  const targetSunday = new Date(targetMonday)
+  targetSunday.setDate(targetMonday.getDate() + 6)
+
+  return { start: targetMonday, end: targetSunday }
+}
+
+/**
+ * Format date range as string
+ */
+export function formatDateRange(start: Date, end: Date): string {
+  const startMonth = start.toLocaleDateString('en-US', { month: 'short' })
+  const endMonth = end.toLocaleDateString('en-US', { month: 'short' })
+
+  if (startMonth === endMonth) {
+    return `${startMonth} ${start.getDate()}-${end.getDate()}`
+  }
+  return `${startMonth} ${start.getDate()} - ${endMonth} ${end.getDate()}`
+}
+
+/**
+ * Check if a date falls within a week
+ */
+function isDateInWeek(dateStr: string, weekStart: Date, weekEnd: Date): boolean {
+  const date = new Date(dateStr)
+  return date >= weekStart && date <= weekEnd
+}
+
+/**
+ * Filter stats data by week
+ */
+export function filterDataByWeek(
+  stats: StatsResult,
+  year: number,
+  week: number
+): WeekData {
+  const { start, end } = getWeekDateRange(year, week)
+
+  // 1. Shipped features from legacyStats.shipped (parsed from shipped.md)
+  const shipped: ShippedItem[] = (stats.legacyStats?.shipped ?? [])
+    .filter(item => {
+      if (!item.date) return false
+      return isDateInWeek(item.date, start, end)
+    })
+    .map(item => ({
+      name: item.name,
+      date: item.date!,
+      version: item.version,
+      type: item.type
+    }))
+
+  // 2. Timeline events from legacyStats.timeline (parsed from context.jsonl)
+  const timeline = stats.legacyStats?.timeline ?? []
+  const weekEvents = timeline.filter(e => {
+    if (!e.ts) return false
+    return isDateInWeek(e.ts, start, end)
+  })
+
+  // Count tasks completed
+  const tasksCompleted = weekEvents.filter(e =>
+    e.type === 'task_complete' ||
+    e.type === 'task_completed' ||
+    e.type === 'session_completed'
+  ).length
+
+  // Count bugs fixed
+  const bugsFixed = weekEvents.filter(e =>
+    e.type === 'bug_fix' ||
+    e.type === 'bug_reported'
+  ).length
+
+  // Count syncs
+  const syncs = weekEvents.filter(e => e.type === 'sync').length
+
+  // 3. Also aggregate from sessions
+  const sessions = stats.legacyStats?.sessions ?? []
+  let sessionTasksCompleted = 0
+  let sessionFeatures = 0
+  const activeDaysSet = new Set<string>()
+
+  for (const session of sessions) {
+    if (session.date && isDateInWeek(session.date, start, end)) {
+      activeDaysSet.add(session.date)
+      sessionTasksCompleted += session.tasksCompleted || 0
+      sessionFeatures += session.featuresShipped || 0
+    }
+  }
+
+  // Add active days from timeline
+  for (const e of weekEvents) {
+    if (e.ts) {
+      activeDaysSet.add(e.ts.split('T')[0])
+    }
+  }
+
+  return {
+    year,
+    week,
+    startDate: start,
+    endDate: end,
+    shipped,
+    tasksCompleted: tasksCompleted + sessionTasksCompleted,
+    bugsFixed,
+    syncs,
+    activeDays: activeDaysSet.size
+  }
+}
+
+/**
+ * Generate plain text report for WhatsApp/email - client friendly
+ */
+export function generateReportText(
+  weekData: WeekData | WeekData[],
+  projectName: string
+): string {
+  const weeks = Array.isArray(weekData) ? weekData : [weekData]
+
+  if (weeks.length === 0) {
+    return 'No weeks selected'
+  }
+
+  const lines: string[] = []
+
+  // Header - clean and professional
+  lines.push(`*${projectName}*`)
+
+  // Date range - human readable
+  if (weeks.length === 1) {
+    const w = weeks[0]
+    lines.push(`Weekly Report: ${formatDateRange(w.startDate, w.endDate)}`)
+  } else {
+    const firstWeek = weeks[0]
+    const lastWeek = weeks[weeks.length - 1]
+    lines.push(`Report: ${formatDateRange(firstWeek.startDate, lastWeek.endDate)}`)
+  }
+  lines.push('')
+
+  // Aggregate data
+  const allShipped = weeks.flatMap(w => w.shipped)
+  // Deduplicate by name, keeping first occurrence (with version info)
+  const uniqueShipsMap = new Map<string, ShippedItem>()
+  for (const ship of allShipped) {
+    if (!uniqueShipsMap.has(ship.name)) {
+      uniqueShipsMap.set(ship.name, ship)
+    }
+  }
+  // Sort by date descending (most recent first)
+  const uniqueShips = Array.from(uniqueShipsMap.values())
+    .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
+
+  // Group by date
+  const shipsByDate = new Map<string, ShippedItem[]>()
+  for (const ship of uniqueShips) {
+    if (!shipsByDate.has(ship.date)) {
+      shipsByDate.set(ship.date, [])
+    }
+    shipsByDate.get(ship.date)!.push(ship)
+  }
+
+  // What we delivered - grouped by date
+  if (uniqueShips.length > 0) {
+    lines.push('*Shipped:*')
+    for (const [date, ships] of shipsByDate.entries()) {
+      const dateStr = new Date(date).toLocaleDateString('en-US', {
+        weekday: 'short',
+        day: 'numeric',
+        month: 'short'
+      })
+      lines.push(`_${dateStr}_`)
+      for (const ship of ships) {
+        const versionStr = ship.version ? ` (${ship.version})` : ''
+        lines.push(`• ${ship.name}${versionStr}`)
+      }
+    }
+    lines.push('')
+  }
+
+  // Aggregate progress metrics
+  const totalTasks = weeks.reduce((sum, w) => sum + w.tasksCompleted, 0)
+  const totalBugs = weeks.reduce((sum, w) => sum + w.bugsFixed, 0)
+  const totalDays = weeks.reduce((sum, w) => sum + w.activeDays, 0)
+
+  // Progress section
+  if (totalTasks > 0 || totalBugs > 0 || totalDays > 0) {
+    lines.push('*Progress:*')
+    if (totalTasks > 0) {
+      lines.push(`• ${totalTasks} task${totalTasks !== 1 ? 's' : ''} completed`)
+    }
+    if (totalBugs > 0) {
+      lines.push(`• ${totalBugs} bug${totalBugs !== 1 ? 's' : ''} fixed`)
+    }
+    if (totalDays > 0) {
+      lines.push(`• ${totalDays} active day${totalDays !== 1 ? 's' : ''}`)
+    }
+    lines.push('')
+  }
+
+  // If nothing happened, be honest
+  if (uniqueShips.length === 0 && totalTasks === 0 && totalBugs === 0) {
+    lines.push('_In progress, no deliveries this week._')
+    lines.push('')
+  }
+
+  // Optional: Next steps placeholder
+  lines.push('*Next:*')
+  lines.push('• [To be defined]')
+
+  return lines.join('\n')
+}
+
+/**
+ * Get activity level for a week (for calendar indicator)
+ */
+export function getWeekActivityLevel(
+  stats: StatsResult,
+  year: number,
+  week: number
+): 'none' | 'low' | 'medium' | 'high' {
+  const data = filterDataByWeek(stats, year, week)
+  const total = data.shipped.length + data.tasksCompleted + data.bugsFixed + data.syncs
+
+  if (total === 0) return 'none'
+  if (total <= 3) return 'low'
+  if (total <= 10) return 'medium'
+  return 'high'
+}

package/packages/web/lib/parse-prjct-files.ts

@@ -463,68 +463,69 @@ export function parseShipped(content: string): ShippedFeature[] {
   const features: ShippedFeature[] = []
   if (!content) return features
 
-  // Split by version headers: ## v1.2.3 - Name or ## 2025-01-01
-  const sections = content.split(/^##\s+/m).filter(s => s.trim())
-
-  for (const section of sections) {
-    const lines = section.split('\n')
-    const headerLine = lines[0]
-
-    // Parse header: v1.2.3 - Feature Name or date
-    const versionMatch = headerLine.match(/^(v[\d.]+)\s*[-–]\s*(.+)$/i)
-    const dateMatch = headerLine.match(/^(\d{4}-\d{2}-\d{2})/)
-
-    if (!versionMatch && !dateMatch) continue
-
-    const feature: ShippedFeature = {
-      date: dateMatch ? dateMatch[1] : new Date().toISOString().split('T')[0],
-      name: versionMatch ? versionMatch[2].trim() : '',
-      version: versionMatch ? versionMatch[1] : undefined
+  // Try ISO date format first: ## 2025-01-01
+  const isoDateSections = content.split(/^##\s+(\d{4}-\d{2}-\d{2})/m)
+
+  if (isoDateSections.length > 1) {
+    // Process pairs: [before, date1, content1, date2, content2, ...]
+    for (let i = 1; i < isoDateSections.length; i += 2) {
+      const sectionDate = isoDateSections[i]
+      const sectionContent = isoDateSections[i + 1] || ''
+      parseShippedSection(sectionContent, sectionDate, features)
     }
-
-    // Parse feature metadata
-    for (const line of lines.slice(1)) {
-      const typeMatch = line.match(/Type\*?\*?:\s*(\w+)/i)
-      const agentMatch = line.match(/Agent\*?\*?:\s*(\w+)/i)
-      const timeMatch = line.match(/Time\*?\*?:\s*([^\n]+)/i)
-      const commitMatch = line.match(/Commit\*?\*?:\s*(\w+)/i)
-      const impactMatch = line.match(/Impact\*?\*?:\s*(\w+)/i)
-      const filesMatch = line.match(/Files changed\*?\*?:\s*(\d+)/i)
-      const addedMatch = line.match(/\+(\d+)/i)
-      const removedMatch = line.match(/-(\d+)/i)
-
-      if (typeMatch) feature.type = typeMatch[1]
-      if (agentMatch) feature.agent = agentMatch[1]
-      if (timeMatch) feature.time = timeMatch[1].trim()
-      if (commitMatch) feature.commit = commitMatch[1]
-      if (impactMatch) feature.impact = impactMatch[1]
-      if (filesMatch) feature.filesChanged = parseInt(filesMatch[1])
-      if (addedMatch) feature.linesAdded = parseInt(addedMatch[1])
-      if (removedMatch) feature.linesRemoved = parseInt(removedMatch[1])
-
-      // Root cause and solution for fixes
-      if (line.includes('Root Cause')) {
-        feature.rootCause = line.replace(/.*Root Cause\*?\*?:\s*/i, '').trim()
-      }
-      if (line.includes('Solution')) {
-        feature.solution = line.replace(/.*Solution\*?\*?:\s*/i, '').trim()
+  } else {
+    // Try month format: ## November 2025 or ## December 2024
+    const monthDateSections = content.split(/^##\s+(\w+\s+\d{4})/m)
+
+    if (monthDateSections.length > 1) {
+      for (let i = 1; i < monthDateSections.length; i += 2) {
+        const sectionDate = monthDateSections[i]
+        const sectionContent = monthDateSections[i + 1] || ''
+        parseShippedSection(sectionContent, sectionDate, features)
       }
+    } else {
+      // No date headers - parse entire content with inline dates
+      parseShippedSection(content, '', features)
     }
+  }
 
-    // If we found name from features list
-    if (!feature.name) {
-      const featureLineMatch = section.match(/\*\*([^*]+)\*\*/m)
-      if (featureLineMatch) {
-        feature.name = featureLineMatch[1].trim()
-      }
-    }
+  return features.slice(0, 30) // Last 30
+}
 
-    if (feature.name) {
-      features.push(feature)
-    }
+function parseShippedSection(sectionContent: string, sectionDate: string, features: ShippedFeature[]) {
+  // Parse bullet points: - **Name** (version) or - **Name** - 2025-01-01
+  const bulletRegex = /^-\s+\*\*(.+?)\*\*(?:\s*\(([^)]+)\))?(?:\s*-\s*(\d{4}-\d{2}-\d{2}))?/gm
+  let match
+  while ((match = bulletRegex.exec(sectionContent)) !== null) {
+    const name = match[1].trim()
+    const versionOrNote = match[2]?.trim()
+    const inlineDate = match[3]
+
+    // Extract version if it starts with 'v'
+    const version = versionOrNote?.match(/^v[\d.]+/) ? versionOrNote : undefined
+
+    features.push({
+      date: inlineDate || sectionDate || new Date().toISOString().split('T')[0],
+      name,
+      version
+    })
   }
 
-  return features.slice(0, 20) // Last 20
+  // Also check for ### Feature Name headers (alternative format)
+  const headerRegex = /^###\s+(.+?)(?:\s+(v[\d.]+))?\s*$/gm
+  while ((match = headerRegex.exec(sectionContent)) !== null) {
+    const name = match[1].trim()
+    const version = match[2]
+
+    // Avoid duplicates if same feature in both formats
+    if (!features.some(f => f.date === sectionDate && f.name === name)) {
+      features.push({
+        date: sectionDate || new Date().toISOString().split('T')[0],
+        name,
+        version
+      })
+    }
+  }
 }
 
 // Parse ideas.md - Full idea structure

package/packages/web/lib/project-colors.ts

@@ -0,0 +1,58 @@
+/**
+ * Project Colors - Consistent color generation based on projectId
+ *
+ * Uses a hash of the projectId to generate a consistent color
+ * that matches between UI elements and browser tab titles.
+ */
+
+// Color palette - visually distinct colors that work well in both
+// Tailwind classes and as emojis
+export const PROJECT_COLORS = [
+  { name: 'red', emoji: '🔴', bg: 'bg-red-500', text: 'text-red-500' },
+  { name: 'orange', emoji: '🟠', bg: 'bg-orange-500', text: 'text-orange-500' },
+  { name: 'yellow', emoji: '🟡', bg: 'bg-yellow-500', text: 'text-yellow-500' },
+  { name: 'green', emoji: '🟢', bg: 'bg-green-500', text: 'text-green-500' },
+  { name: 'blue', emoji: '🔵', bg: 'bg-blue-500', text: 'text-blue-500' },
+  { name: 'purple', emoji: '🟣', bg: 'bg-purple-500', text: 'text-purple-500' },
+  { name: 'brown', emoji: '🟤', bg: 'bg-amber-700', text: 'text-amber-700' },
+] as const
+
+export type ProjectColor = typeof PROJECT_COLORS[number]
+
+/**
+ * Simple hash function for strings
+ */
+function hashString(str: string): number {
+  let hash = 0
+  for (let i = 0; i < str.length; i++) {
+    const char = str.charCodeAt(i)
+    hash = ((hash << 5) - hash) + char
+    hash = hash & hash // Convert to 32bit integer
+  }
+  return Math.abs(hash)
+}
+
+/**
+ * Get a consistent color for a project based on its ID
+ */
+export function getProjectColor(projectId: string): ProjectColor {
+  const hash = hashString(projectId)
+  const index = hash % PROJECT_COLORS.length
+  return PROJECT_COLORS[index]
+}
+
+/**
+ * Get just the emoji for a project (for use in titles)
+ * Returns a neutral symbol instead of colored circles
+ */
+export function getProjectEmoji(projectId: string): string {
+  return '▸'
+}
+
+/**
+ * Get the Tailwind background class for a project
+ * Returns neutral color - projects no longer have color-coded backgrounds
+ */
+export function getProjectBgClass(projectId: string): string {
+  return 'bg-muted'
+}

package/packages/web/lib/projects.ts

@@ -7,6 +7,7 @@ import { join, dirname } from 'path'
 import { homedir } from 'os'
 import { exec } from 'child_process'
 import { promisify } from 'util'
+import { listSessions } from './pty'
 
 const execAsync = promisify(exec)
 
@@ -154,11 +155,16 @@ export async function getProjects() {
       let hasActiveSession = false
       let lastActivity: string | null = null
 
-      // Try current session first
+      // Check for real PTY sessions (actual Claude sessions in memory)
+      try {
+        const activeSessions = listSessions()
+        hasActiveSession = activeSessions.some(s => s.projectDir === repoPath)
+      } catch {}
+
+      // Try current session for lastActivity only
       try {
         const sessionPath = join(storagePath, 'sessions', 'current.json')
         const sessionData = JSON.parse(await fs.readFile(sessionPath, 'utf-8'))
-        hasActiveSession = sessionData.status === 'active'
         lastActivity = sessionData.startedAt || sessionData.updatedAt
       } catch {}
 
@@ -188,9 +194,10 @@ export async function getProjects() {
         }
       }
 
-      // Count ideas and next tasks
+      // Count ideas, next tasks, and shipped items
       let ideasCount = 0
       let nextTasksCount = 0
+      let shippedCount = 0
       try {
         const ideasContent = await fs.readFile(join(storagePath, 'planning', 'ideas.md'), 'utf-8')
         ideasCount = (ideasContent.match(/^- /gm) || []).length
@@ -199,6 +206,13 @@ export async function getProjects() {
         const nextContent = await fs.readFile(join(storagePath, 'core', 'next.md'), 'utf-8')
         nextTasksCount = (nextContent.match(/^- /gm) || []).length
       } catch {}
+      try {
+        const shippedContent = await fs.readFile(join(storagePath, 'progress', 'shipped.md'), 'utf-8')
+        // Count shipped items: either "- **Name**" or "### Name" format
+        const bulletItems = (shippedContent.match(/^- \*\*/gm) || []).length
+        const headingItems = (shippedContent.match(/^### /gm) || []).length
+        shippedCount = bulletItems + headingItems
+      } catch {}
 
       // Find favicon/icon in project repo
       let iconPath: string | null = null
@@ -237,6 +251,7 @@ export async function getProjects() {
         lastActivity,
         ideasCount,
         nextTasksCount,
+        shippedCount,
         techStack,
         iconPath
       })
@@ -318,6 +333,23 @@ export async function getProject(projectId: string) {
       currentTask = await fs.readFile(nowPath, 'utf-8')
     } catch {}
 
+    // Count shipped and queue items (DRY - same logic as getProjects)
+    let shippedCount = 0
+    let nextTasksCount = 0
+    try {
+      const shippedContent = await fs.readFile(join(storagePath, 'progress', 'shipped.md'), 'utf-8')
+      const bulletItems = (shippedContent.match(/^- \*\*/gm) || []).length
+      const headingItems = (shippedContent.match(/^### /gm) || []).length
+      shippedCount = bulletItems + headingItems
+    } catch {}
+    try {
+      const nextContent = await fs.readFile(join(storagePath, 'core', 'next.md'), 'utf-8')
+      nextTasksCount = (nextContent.match(/^- /gm) || []).length
+    } catch {}
+
+    const total = shippedCount + nextTasksCount
+    const completionRate = total > 0 ? Math.round((shippedCount / total) * 100) : 0
+
     // Fallback: Extract stats from claudeMd Quick Reference table if not from project.json
     if (!version) {
       const versionMatch = claudeMd.match(/\*\*Version\*\*\s*\|\s*([^\n|]+)/)
@@ -380,7 +412,11 @@ export async function getProject(projectId: string) {
       filesCount,
       commitsCount,
       techStack,
-      iconPath
+      iconPath,
+      // Counts (DRY - same source as dashboard)
+      shippedCount,
+      nextTasksCount,
+      completionRate
     }
   } catch {
     return null
@@ -424,11 +460,28 @@ export async function getProjectStatus(projectId: string) {
   const projectPath = join(GLOBAL_STORAGE, projectId)
 
   let session = null
+  let repoPath: string | null = null
   try {
     const sessionPath = join(projectPath, 'sessions', 'current.json')
     session = JSON.parse(await fs.readFile(sessionPath, 'utf-8'))
   } catch {}
 
+  // Get repoPath from project.json for PTY session check
+  try {
+    const projectJsonPath = join(projectPath, 'project.json')
+    const projectJson = JSON.parse(await fs.readFile(projectJsonPath, 'utf-8'))
+    repoPath = projectJson.repoPath || null
+  } catch {}
+
+  // Check for real PTY sessions
+  let hasActiveSession = false
+  if (repoPath) {
+    try {
+      const activeSessions = listSessions()
+      hasActiveSession = activeSessions.some(s => s.projectDir === repoPath)
+    } catch {}
+  }
+
   let ideas: string[] = []
   try {
     const ideasPath = join(projectPath, 'planning', 'ideas.md')
@@ -446,7 +499,7 @@ export async function getProjectStatus(projectId: string) {
   return {
     projectId,
     session,
-    hasActiveSession: session?.status === 'active',
+    hasActiveSession,
     ideas,
     nextTasks
   }

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

@@ -19,6 +19,11 @@ export interface ProjectJson {
   commitCount: number
   createdAt: string
   lastSync: string
+  version?: string | null
+  // Counts - DRY: single source of truth for dashboard/detail
+  shippedCount: number
+  nextTasksCount: number
+  completionRate: number
 }
 
 /**
@@ -38,7 +43,12 @@ export const getProject = cache(async (projectId: string): Promise<ProjectJson |
         fileCount: project.filesCount ? parseInt(project.filesCount) : 0,
         commitCount: project.commitsCount ? parseInt(project.commitsCount) : 0,
         createdAt: new Date().toISOString(),
-        lastSync: new Date().toISOString()
+        lastSync: new Date().toISOString(),
+        version: project.version || null,
+        // DRY: Pass through counts from lib/projects.ts (single source of truth)
+        shippedCount: project.shippedCount ?? 0,
+        nextTasksCount: project.nextTasksCount ?? 0,
+        completionRate: project.completionRate ?? 0
       }
     }
   } catch {

package/packages/web/next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/dev/types/routes.d.ts";
+import "./.next/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

package/packages/web/package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "dev": "NODE_ENV=development PORT=9471 bun server.ts",
     "build": "bun next build",
-    "start": "NODE_ENV=production PORT=9472 bun server.ts",
+    "start": "NODE_ENV=production PORT=9472 node --import tsx server.ts",
     "lint": "eslint"
   },
   "dependencies": {
@@ -13,6 +13,7 @@
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-scroll-area": "^1.2.10",
+    "@radix-ui/react-select": "^2.2.6",
     "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-tabs": "^1.1.13",
     "@radix-ui/react-tooltip": "^1.2.8",
@@ -31,15 +32,18 @@
     "react": "19.2.0",
     "react-dom": "19.2.0",
     "react-markdown": "^10.1.0",
+    "react-resizable-panels": "^3.0.6",
     "recharts": "^3.5.1",
     "remark-gfm": "^4.0.1",
     "tailwind-merge": "^3.4.0",
+    "vaul": "^1.1.2",
     "ws": "^8.18.3",
     "zod": "^4.1.13"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4",
     "@types/bun": "latest",
+    "tsx": "^4.21.0",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",