@leanspec/ui 0.2.8 → 0.2.9

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

@@ -1,18 +1,20 @@
 /**
  * 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 } from 'lucide-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';
 
@@ -69,6 +71,7 @@ function ContextSection({
   defaultExpanded = true,
   searchQuery,
   projectRoot,
+  onFileSelect,
 }: {
   title: string;
   description: string;
@@ -79,6 +82,7 @@ function ContextSection({
   defaultExpanded?: boolean;
   searchQuery?: string;
   projectRoot?: string;
+  onFileSelect?: (file: ContextFile) => void;
 }) {
   const totalTokens = files.reduce((sum, f) => sum + f.tokenCount, 0);
   
@@ -149,6 +153,7 @@ function ContextSection({
                 lastModified={file.lastModified}
                 searchQuery={searchQuery}
                 projectRoot={projectRoot}
+                onViewDetail={onFileSelect ? () => onFileSelect(file) : undefined}
               />
             ))}
           </div>
@@ -161,6 +166,7 @@ function ContextSection({
 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 () => {
@@ -211,6 +217,19 @@ export function ContextClient({ context }: ContextClientProps) {
     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">
@@ -323,6 +342,7 @@ export function ContextClient({ context }: ContextClientProps) {
             defaultExpanded={context.agentInstructions.length <= 2}
             searchQuery={searchQuery}
             projectRoot={context.projectRoot}
+            onFileSelect={setSelectedFile}
           />
 
           {/* Configuration */}
@@ -336,6 +356,7 @@ export function ContextClient({ context }: ContextClientProps) {
             defaultExpanded={true}
             searchQuery={searchQuery}
             projectRoot={context.projectRoot}
+            onFileSelect={setSelectedFile}
           />
 
           {/* Project Documentation */}
@@ -349,6 +370,7 @@ export function ContextClient({ context }: ContextClientProps) {
             defaultExpanded={false}
             searchQuery={searchQuery}
             projectRoot={context.projectRoot}
+            onFileSelect={setSelectedFile}
           />
         </div>
 

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

@@ -0,0 +1,24 @@
+// 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)
+export const toneClasses: Record<string, string> = {
+  planned: 'border-blue-500/80 bg-blue-950/60 text-blue-200',
+  'in-progress': 'border-orange-500/80 bg-orange-950/60 text-orange-200',
+  complete: 'border-green-500/80 bg-green-950/60 text-green-200',
+  archived: 'border-gray-500/80 bg-gray-900/60 text-gray-400',
+};
+
+// Background colors for minimap (aligned with StatusBadge component)
+export const toneBgColors: Record<string, string> = {
+  planned: '#1e3a8a',     // blue-900
+  'in-progress': '#7c2d12', // orange-900
+  complete: '#14532d',    // green-900
+  archived: '#1f2937',
+};