@leanspec/ui 0.2.7 → 0.2.9-dev.20251205030455

package/.next/standalone/packages/ui/src/app/context/context-client.tsx

@@ -0,0 +1,393 @@
+/**
+ * Project Context Client Component
+ * Displays project-level context files (AGENTS.md, config, README, etc.)
+ * Uses sidebar + content layout similar to spec detail page
+ * Phases 2 & 4: Spec 131 - UI Project Context Visibility
+ */
+
+'use client';
+
+import * as React from 'react';
+import { BookOpen, Settings, FileText, Copy, Check, AlertCircle, Coins, Info, Search, X, ChevronRight, ChevronDown } from 'lucide-react';
+import { Card, CardHeader, CardTitle, CardDescription, CardContent } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Input } from '@/components/ui/input';
+import { ContextFileCard, countMatches } from '@/components/context-file-viewer';
+import { ContextFileDetail } from '@/components/context-file-detail';
+import type { ProjectContext, ContextFile } from '@/lib/specs/types';
+import { cn } from '@/lib/utils';
+
+interface ContextClientProps {
+  context: ProjectContext;
+}
+
+/**
+ * Get token threshold color
+ */
+function getTotalTokenColor(tokens: number): string {
+  if (tokens < 5000) return 'text-green-600 dark:text-green-400';
+  if (tokens < 10000) return 'text-blue-600 dark:text-blue-400';
+  if (tokens < 20000) return 'text-yellow-600 dark:text-yellow-400';
+  return 'text-red-600 dark:text-red-400';
+}
+
+/**
+ * Empty state component
+ */
+function EmptyState({ 
+  icon: Icon, 
+  title, 
+  description,
+  suggestion 
+}: { 
+  icon: React.ComponentType<{ className?: string }>;
+  title: string;
+  description: string;
+  suggestion?: string;
+}) {
+  return (
+    <div className="flex flex-col items-center justify-center py-8 text-center">
+      <Icon className="h-12 w-12 text-muted-foreground/50 mb-4" />
+      <h3 className="text-sm font-medium text-muted-foreground">{title}</h3>
+      <p className="text-xs text-muted-foreground/70 mt-1 max-w-xs">{description}</p>
+      {suggestion && (
+        <p className="text-xs text-primary mt-2">{suggestion}</p>
+      )}
+    </div>
+  );
+}
+
+/**
+ * Section with collapsible file cards
+ */
+function ContextSection({
+  title,
+  description,
+  icon: Icon,
+  files,
+  emptyMessage,
+  emptySuggestion,
+  defaultExpanded = true,
+  searchQuery,
+  projectRoot,
+  onFileSelect,
+}: {
+  title: string;
+  description: string;
+  icon: React.ComponentType<{ className?: string }>;
+  files: ContextFile[];
+  emptyMessage: string;
+  emptySuggestion?: string;
+  defaultExpanded?: boolean;
+  searchQuery?: string;
+  projectRoot?: string;
+  onFileSelect?: (file: ContextFile) => void;
+}) {
+  const totalTokens = files.reduce((sum, f) => sum + f.tokenCount, 0);
+  
+  // Filter files by search if query exists
+  const filteredFiles = React.useMemo(() => {
+    if (!searchQuery || searchQuery.length < 2) return files;
+    return files.filter(file => {
+      const matches = countMatches(file.content, searchQuery);
+      const nameMatch = file.name.toLowerCase().includes(searchQuery.toLowerCase());
+      return matches > 0 || nameMatch;
+    });
+  }, [files, searchQuery]);
+  
+  // Calculate total matches in this section
+  const totalMatches = React.useMemo(() => {
+    if (!searchQuery || searchQuery.length < 2) return 0;
+    return filteredFiles.reduce((sum, file) => sum + countMatches(file.content, searchQuery), 0);
+  }, [filteredFiles, searchQuery]);
+
+  return (
+    <Card>
+      <CardHeader className="pb-3">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <div className="p-2 rounded-lg bg-primary/10">
+              <Icon className="h-5 w-5 text-primary" />
+            </div>
+            <div>
+              <CardTitle className="text-lg">{title}</CardTitle>
+              <CardDescription>{description}</CardDescription>
+            </div>
+          </div>
+          {files.length > 0 && (
+            <div className="flex items-center gap-2">
+              {searchQuery && totalMatches > 0 && (
+                <Badge variant="secondary" className="text-xs bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200">
+                  {totalMatches} match{totalMatches !== 1 ? 'es' : ''}
+                </Badge>
+              )}
+              <Badge variant="secondary" className="text-xs">
+                {filteredFiles.length}{filteredFiles.length !== files.length ? `/${files.length}` : ''} file{files.length !== 1 ? 's' : ''}
+              </Badge>
+              <Badge variant="outline" className={cn('text-xs', getTotalTokenColor(totalTokens))}>
+                <Coins className="h-3 w-3 mr-1" />
+                {totalTokens.toLocaleString()} tokens
+              </Badge>
+            </div>
+          )}
+        </div>
+      </CardHeader>
+      <CardContent>
+        {filteredFiles.length === 0 ? (
+          <EmptyState
+            icon={AlertCircle}
+            title={searchQuery ? "No matches found" : emptyMessage}
+            description={searchQuery ? "Try a different search term" : "No files found in this category"}
+            suggestion={searchQuery ? undefined : emptySuggestion}
+          />
+        ) : (
+          <div className="space-y-3">
+            {filteredFiles.map((file) => (
+              <ContextFileCard
+                key={file.path}
+                name={file.name}
+                path={file.path}
+                content={file.content}
+                tokenCount={file.tokenCount}
+                lastModified={file.lastModified}
+                searchQuery={searchQuery}
+                projectRoot={projectRoot}
+                onViewDetail={onFileSelect ? () => onFileSelect(file) : undefined}
+              />
+            ))}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+
+export function ContextClient({ context }: ContextClientProps) {
+  const [copiedAll, setCopiedAll] = React.useState(false);
+  const [searchQuery, setSearchQuery] = React.useState('');
+  const [selectedFile, setSelectedFile] = React.useState<ContextFile | null>(null);
+
+  // Collect all content for "Copy All" feature
+  const handleCopyAll = async () => {
+    const allContent: string[] = [];
+    
+    // Agent instructions
+    for (const file of context.agentInstructions) {
+      allContent.push(`# ${file.path}\n\n${file.content}\n`);
+    }
+    
+    // Config
+    if (context.config.file) {
+      allContent.push(`# ${context.config.file.path}\n\n${context.config.file.content}\n`);
+    }
+    
+    // Project docs
+    for (const file of context.projectDocs) {
+      allContent.push(`# ${file.path}\n\n${file.content}\n`);
+    }
+    
+    try {
+      await navigator.clipboard.writeText(allContent.join('\n---\n\n'));
+      setCopiedAll(true);
+      setTimeout(() => setCopiedAll(false), 2000);
+    } catch (error) {
+      console.error('Failed to copy all content:', error);
+    }
+  };
+
+  const hasAnyContent = 
+    context.agentInstructions.length > 0 || 
+    context.config.file !== null || 
+    context.projectDocs.length > 0;
+    
+  // Calculate total matches across all files
+  const totalMatches = React.useMemo(() => {
+    if (!searchQuery || searchQuery.length < 2) return 0;
+    let total = 0;
+    for (const file of context.agentInstructions) {
+      total += countMatches(file.content, searchQuery);
+    }
+    if (context.config.file) {
+      total += countMatches(context.config.file.content, searchQuery);
+    }
+    for (const file of context.projectDocs) {
+      total += countMatches(file.content, searchQuery);
+    }
+    return total;
+  }, [context, searchQuery]);
+
+  // If a file is selected, show the detail view
+  if (selectedFile) {
+    return (
+      <div className="min-h-screen bg-background">
+        <ContextFileDetail
+          file={selectedFile}
+          projectRoot={context.projectRoot}
+          onBack={() => setSelectedFile(null)}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-background">
+      <div className="container mx-auto px-4 py-8 max-w-5xl">
+        {/* Header */}
+        <div className="mb-8">
+          <div className="flex items-start justify-between gap-4">
+            <div>
+              <h1 className="text-3xl sm:text-4xl font-bold tracking-tight flex items-center gap-3">
+                <BookOpen className="h-8 w-8 text-primary" />
+                Project Context
+              </h1>
+              <p className="text-muted-foreground mt-2">
+                View project-level context files that inform AI agents and development workflows
+              </p>
+            </div>
+            {hasAnyContent && (
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={handleCopyAll}
+                className="shrink-0"
+              >
+                {copiedAll ? (
+                  <>
+                    <Check className="h-4 w-4 mr-2 text-green-600" />
+                    Copied!
+                  </>
+                ) : (
+                  <>
+                    <Copy className="h-4 w-4 mr-2" />
+                    Copy All
+                  </>
+                )}
+              </Button>
+            )}
+          </div>
+
+          {/* Search and Summary */}
+          {hasAnyContent && (
+            <div className="mt-6 space-y-4">
+              {/* Search bar */}
+              <div className="relative">
+                <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                <Input
+                  type="text"
+                  placeholder="Search within context files..."
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                  className="pl-10 pr-10"
+                />
+                {searchQuery && (
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="absolute right-1 top-1/2 -translate-y-1/2 h-7 w-7 p-0"
+                    onClick={() => setSearchQuery('')}
+                  >
+                    <X className="h-4 w-4" />
+                  </Button>
+                )}
+              </div>
+              
+              {/* Search results info */}
+              {searchQuery && searchQuery.length >= 2 && (
+                <div className="flex items-center gap-2 text-sm">
+                  {totalMatches > 0 ? (
+                    <Badge variant="secondary" className="bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200">
+                      {totalMatches} match{totalMatches !== 1 ? 'es' : ''} found
+                    </Badge>
+                  ) : (
+                    <span className="text-muted-foreground">No matches found for &quot;{searchQuery}&quot;</span>
+                  )}
+                </div>
+              )}
+              
+              {/* Summary card */}
+              <Card className="bg-muted/30">
+                <CardContent className="py-4">
+                  <div className="flex flex-wrap items-center gap-4 sm:gap-8">
+                    <div className="flex items-center gap-2">
+                      <Coins className={cn('h-5 w-5', getTotalTokenColor(context.totalTokens))} />
+                      <span className="text-sm">
+                        <strong className={getTotalTokenColor(context.totalTokens)}>
+                          {context.totalTokens.toLocaleString()}
+                        </strong>
+                        {' '}total tokens
+                      </span>
+                    </div>
+                    <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                      <Info className="h-4 w-4" />
+                      Context budget for AI agents
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+            </div>
+          )}
+        </div>
+
+        {/* Content sections */}
+        <div className="space-y-6">
+          {/* Agent Instructions */}
+          <ContextSection
+            title="Agent Instructions"
+            description="System prompts and guidelines for AI agents"
+            icon={BookOpen}
+            files={context.agentInstructions}
+            emptyMessage="No agent instructions found"
+            emptySuggestion="Create an AGENTS.md file in your project root"
+            defaultExpanded={context.agentInstructions.length <= 2}
+            searchQuery={searchQuery}
+            projectRoot={context.projectRoot}
+            onFileSelect={setSelectedFile}
+          />
+
+          {/* Configuration */}
+          <ContextSection
+            title="Configuration"
+            description="LeanSpec project configuration and settings"
+            icon={Settings}
+            files={context.config.file ? [context.config.file] : []}
+            emptyMessage="No configuration found"
+            emptySuggestion="Run 'lean-spec init' to create a config file"
+            defaultExpanded={true}
+            searchQuery={searchQuery}
+            projectRoot={context.projectRoot}
+            onFileSelect={setSelectedFile}
+          />
+
+          {/* Project Documentation */}
+          <ContextSection
+            title="Project Documentation"
+            description="README, contributing guidelines, and changelog"
+            icon={FileText}
+            files={context.projectDocs}
+            emptyMessage="No project docs found"
+            emptySuggestion="Create a README.md file in your project root"
+            defaultExpanded={false}
+            searchQuery={searchQuery}
+            projectRoot={context.projectRoot}
+            onFileSelect={setSelectedFile}
+          />
+        </div>
+
+        {/* No content state */}
+        {!hasAnyContent && (
+          <Card className="mt-8">
+            <CardContent className="py-12">
+              <EmptyState
+                icon={BookOpen}
+                title="No project context found"
+                description="This project doesn't have any context files yet. Context files help AI agents understand your project better."
+                suggestion="Start by creating AGENTS.md or running 'lean-spec init'"
+              />
+            </CardContent>
+          </Card>
+        )}
+      </div>
+    </div>
+  );
+}

package/.next/standalone/packages/ui/src/app/context/page.tsx

@@ -0,0 +1,17 @@
+/**
+ * Project Context Page
+ * Displays project-level context files for AI agents and development workflows
+ * Spec 131 - UI Project Context Visibility
+ */
+
+import { getProjectContext } from '@/lib/db/service-queries';
+import { ContextClient } from './context-client';
+
+// Force dynamic rendering - this page needs runtime data
+export const dynamic = 'force-dynamic';
+
+export default async function ContextPage() {
+  const context = await getProjectContext();
+
+  return <ContextClient context={context} />;
+}

package/.next/standalone/packages/ui/src/app/dashboard-client.tsx

@@ -19,7 +19,6 @@ import {
 import { StatusBadge } from '@/components/status-badge';
 import { PriorityBadge } from '@/components/priority-badge';
 import { Badge } from '@/components/ui/badge';
-import { extractH1Title } from '@/lib/utils';
 
 interface Spec {
   id: string;
@@ -31,7 +30,6 @@ interface Spec {
   tags: string[] | null;
   createdAt: Date | null;
   updatedAt: Date | null;
-  contentMd?: string;
 }
 
 interface Stats {
@@ -43,6 +41,7 @@ interface Stats {
 interface DashboardClientProps {
   initialSpecs: Spec[];
   initialStats: Stats;
+  projectId?: string;
 }
 
 function formatRelativeTime(date: Date | null): string {
@@ -60,14 +59,16 @@ function formatRelativeTime(date: Date | null): string {
   return date.toLocaleDateString();
 }
 
-function SpecListItem({ spec }: { spec: Spec }) {
-  // Extract H1 title from content if available, fallback to title or name
-  const h1Title = spec.contentMd ? extractH1Title(spec.contentMd) : null;
-  const displayTitle = h1Title || spec.title || spec.specName;
+function SpecListItem({ spec, projectId }: { spec: Spec; projectId?: string }) {
+  // Use title from server-side extraction, fallback to name
+  const displayTitle = spec.title || spec.specName;
+  const specUrl = projectId 
+    ? `/projects/${projectId}/specs/${spec.specNumber}`
+    : `/specs/${spec.specNumber}`;
   
   return (
     <Link 
-      href={`/specs/${spec.specNumber}`}
+      href={specUrl}
       className="block p-3 rounded-lg hover:bg-accent transition-colors"
       title={spec.specName} /* Show name as tooltip */
     >
@@ -108,9 +109,11 @@ function SpecListItem({ spec }: { spec: Spec }) {
   );
 }
 
-function ActivityItem({ spec, action, time }: { spec: Spec; action: string; time: Date | null }) {
-  const h1Title = spec.contentMd ? extractH1Title(spec.contentMd) : null;
-  const displayTitle = h1Title || spec.title || spec.specName;
+function ActivityItem({ spec, action, time, projectId }: { spec: Spec; action: string; time: Date | null; projectId?: string }) {
+  const displayTitle = spec.title || spec.specName;
+  const specUrl = projectId 
+    ? `/projects/${projectId}/specs/${spec.specNumber}`
+    : `/specs/${spec.specNumber}`;
   
   return (
     <div className="flex items-start gap-3 py-2">
@@ -118,7 +121,7 @@ function ActivityItem({ spec, action, time }: { spec: Spec; action: string; time
       <div className="flex-1 min-w-0">
         <p className="text-sm">
           <Link 
-            href={`/specs/${spec.specNumber}`}
+            href={specUrl}
             className="font-medium hover:underline"
             title={spec.specName}
           >
@@ -135,52 +138,23 @@ function ActivityItem({ spec, action, time }: { spec: Spec; action: string; time
   );
 }
 
-export function DashboardClient({ initialSpecs, initialStats }: DashboardClientProps) {
+export function DashboardClient({ initialSpecs, initialStats, projectId }: DashboardClientProps) {
   const { mode, currentProject, isLoading: isProjectLoading } = useProject();
   const [specs, setSpecs] = useState<Spec[]>(initialSpecs);
   const [stats, setStats] = useState<Stats>(initialStats);
-  const [isLoadingData, setIsLoadingData] = useState(false);
+  
+  // Use the projectId prop directly - it comes from the URL via server component
+  // and is always reliable, unlike currentProject from context during transitions
+  const effectiveProjectId = projectId;
 
+  // Update state when initialSpecs/initialStats change (e.g., on navigation)
   useEffect(() => {
-    if (mode === 'multi-project') {
-      if (currentProject) {
-        fetchProjectData(currentProject.id);
-      } else {
-        setSpecs([]);
-        setStats({ totalSpecs: 0, completionRate: 0, specsByStatus: [] });
-      }
-    }
-  }, [mode, currentProject]);
-
-  const fetchProjectData = async (projectId: string) => {
-    setIsLoadingData(true);
-    try {
-      const [specsRes, statsRes] = await Promise.all([
-        fetch(`/api/projects/${projectId}/specs`),
-        fetch(`/api/projects/${projectId}/stats`)
-      ]);
-      
-      if (specsRes.ok && statsRes.ok) {
-        const specsData = await specsRes.json();
-        const statsData = await statsRes.json();
-        
-        const parsedSpecs = specsData.specs.map((s: any) => ({
-            ...s,
-            createdAt: s.createdAt ? new Date(s.createdAt) : null,
-            updatedAt: s.updatedAt ? new Date(s.updatedAt) : null,
-        }));
-
-        setSpecs(parsedSpecs);
-        setStats(statsData.stats);
-      }
-    } catch (e) {
-      console.error(e);
-    } finally {
-      setIsLoadingData(false);
-    }
-  };
+    setSpecs(initialSpecs);
+    setStats(initialStats);
+  }, [initialSpecs, initialStats]);
 
-  if (mode === 'multi-project' && !currentProject) {
+  // Show loading state only when in multi-project mode and no project selected
+  if (mode === 'multi-project' && !projectId && !currentProject) {
      if (isProjectLoading) {
          return <div className="flex items-center justify-center h-screen"><Loader2 className="animate-spin" /></div>;
      }
@@ -191,10 +165,6 @@ export function DashboardClient({ initialSpecs, initialStats }: DashboardClientP
          </div>
      );
   }
-
-  if (isLoadingData) {
-      return <div className="flex items-center justify-center h-screen"><Loader2 className="animate-spin" /></div>;
-  }
   
   // Get specs by status
   const inProgressSpecs = specs
@@ -324,7 +294,7 @@ export function DashboardClient({ initialSpecs, initialStats }: DashboardClientP
             </CardHeader>
             <CardContent className="space-y-1">
               {recentlyAdded.slice(0, 5).map(spec => (
-                <SpecListItem key={spec.id} spec={spec} />
+                <SpecListItem key={spec.id} spec={spec} projectId={effectiveProjectId} />
               ))}
             </CardContent>
           </Card>
@@ -340,7 +310,7 @@ export function DashboardClient({ initialSpecs, initialStats }: DashboardClientP
             <CardContent className="space-y-1">
               {plannedSpecs.length > 0 ? (
                 plannedSpecs.map(spec => (
-                  <SpecListItem key={spec.id} spec={spec} />
+                  <SpecListItem key={spec.id} spec={spec} projectId={effectiveProjectId} />
                 ))
               ) : (
                 <p className="text-sm text-muted-foreground py-4 text-center">
@@ -361,7 +331,7 @@ export function DashboardClient({ initialSpecs, initialStats }: DashboardClientP
             <CardContent className="space-y-1">
               {inProgressSpecs.length > 0 ? (
                 inProgressSpecs.map(spec => (
-                  <SpecListItem key={spec.id} spec={spec} />
+                  <SpecListItem key={spec.id} spec={spec} projectId={effectiveProjectId} />
                 ))
               ) : (
                 <p className="text-sm text-muted-foreground py-4 text-center">
@@ -385,6 +355,7 @@ export function DashboardClient({ initialSpecs, initialStats }: DashboardClientP
                   spec={spec}
                   action="updated"
                   time={spec.updatedAt}
+                  projectId={effectiveProjectId}
                 />
               ))}
             </div>

package/.next/standalone/packages/ui/src/app/dependencies/constants.ts

@@ -0,0 +1,25 @@
+// Node dimensions
+export const NODE_WIDTH = 180;
+export const NODE_HEIGHT = 60;
+export const COMPACT_NODE_WIDTH = 120;
+export const COMPACT_NODE_HEIGHT = 40;
+
+// Edge colors
+export const DEPENDS_ON_COLOR = '#f59e0b';
+
+// Status tone classes for node styling (aligned with StatusBadge component)
+// Using light/dark mode compatible colors
+export const toneClasses: Record<string, string> = {
+  planned: 'border-blue-500 bg-blue-100 text-blue-800 dark:bg-blue-950/60 dark:text-blue-200',
+  'in-progress': 'border-orange-500 bg-orange-100 text-orange-800 dark:bg-orange-950/60 dark:text-orange-200',
+  complete: 'border-green-500 bg-green-100 text-green-800 dark:bg-green-950/60 dark:text-green-200',
+  archived: 'border-gray-400 bg-gray-100 text-gray-600 dark:border-gray-500/80 dark:bg-gray-900/60 dark:text-gray-400',
+};
+
+// Background colors for minimap (aligned with StatusBadge component)
+export const toneBgColors: Record<string, string> = {
+  planned: '#3b82f6',     // blue-500 (works in both themes)
+  'in-progress': '#f97316', // orange-500
+  complete: '#22c55e',    // green-500
+  archived: '#6b7280',    // gray-500
+};