DOCS-06: Feature Components - Part 2

Instance 6 Documentation - Pronghorn Core Feature Modules (Part 2 of 2)

This document catalogs Pronghorn's core feature component modules including deployment workflows, documentation generation, project management, requirements decomposition, repository operations, standards library, specifications, and artifacts management.

Overview
Deployment Components
Requirements Components
Repository Components
Standards Components
Specifications Components
Artifacts Components
Project Components
Tech Stack Components
Presentation Components
Super Admin Components

Overview

This documentation covers the second half of Pronghorn's feature components, focusing on operational modules that power deployment, data management, requirements engineering, code editing, and compliance workflows.

Total Component Count: 150+ components across 13 directories

Key Capabilities:

Deployment Management: Render.com integration for applications and databases
Requirements Decomposition: AI-powered hierarchical requirements breakdown
Repository Operations: Monaco-based code editor with diff view and staging
Standards Compliance: Hierarchical standards library with requirement linking
Specifications Generation: 13 AI agents for document generation
Artifacts Management: Multi-format document processing and knowledge base
Database Import: Wizard-based ETL for Excel, CSV, JSON with schema inference

Deployment Components

Location: src/components/deploy/

Overview

Deployment components manage application and database provisioning on Render.com, providing full lifecycle management from creation to deletion.

Component Inventory

Component	File	Purpose
DeploymentCard	DeploymentCard.tsx	Web service deployment management
DatabaseCard	DatabaseCard.tsx	PostgreSQL database lifecycle
DatabaseImportWizard	DatabaseImportWizard.tsx	6-step data import wizard
DatabaseDialog	DatabaseDialog.tsx	Database creation/edit form
ConnectionStringDialog	ConnectionStringDialog.tsx	Connection string display
DeploymentDialog	DeploymentDialog.tsx	Web service creation form

DatabaseCard (DatabaseCard.tsx)

Manages PostgreSQL database lifecycle on Render.com.

Props:

interface DatabaseCardProps {
  database: any;                // Database record from Supabase
  shareToken: string | null;    // Project share token
  onRefresh: () => void;         // Refresh callback
  onExplore?: () => void;        // Open database explorer
  showExploreOnly?: boolean;     // Simplified view for Manage tab
}

Database Statuses:

pending - Not yet created on Render
creating - Provisioning in progress
available - Ready for connections
suspended - Paused (can resume)
restarting - Restarting in progress
updating - Configuration change in progress
failed - Provisioning failed
deleted - Removed from Render

Actions (via render-database edge function):

Create - Provisions PostgreSQL instance on Render
Get Connection String - Fetches JDBC/Postgres connection URLs
Sync Status - Refreshes status from Render API
Suspend - Pauses database (free tier only)
Resume - Restarts suspended database
Restart - Hard restart
Delete - Permanently removes database
Edit Configuration - Update name, plan, region
Explore Database - Opens SQL query interface

Responsive Layout:

Mobile: Vertical stack, smaller icons, dropdown menu
Desktop: Horizontal layout with inline status badges

Usage:

<DatabaseCard
  database={db}
  shareToken={shareToken}
  onRefresh={() => refetch()}
  onExplore={() => navigate(`/project/${projectId}/database?db=${db.id}`)}
/>

DatabaseImportWizard (DatabaseImportWizard.tsx)

Comprehensive 6-step wizard for importing Excel, CSV, and JSON files into PostgreSQL databases.

Wizard Steps:

Upload - File drop zone (Excel, CSV, JSON)
Normalize - JSON structure flattening strategy (JSON files only)
Preview - Data cleaning and row selection
Schema - Table design with type inference
Review - SQL statement preview
Execute - Batch execution with progress tracking

Props:

interface DatabaseImportWizardProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  databaseId?: string;          // Render PostgreSQL database ID
  connectionId?: string;         // External connection ID
  projectId: string;
  shareToken: string | null;
  schema?: string;               // Default: 'public'
  existingTables?: string[];
  onImportComplete?: () => void;
}

File Type Support:

File Type	Extensions	Max Size	Features
Excel	.xlsx, .xls	50 MB	Multi-sheet, header row detection
CSV	.csv	50 MB	Auto-encoding detection
JSON	.json	50 MB	Nested object flattening, multi-table extraction

JSON Normalization Strategies:

Partial Normalization (default)
- Flattens 1-level deep arrays
- Preserves complex nested objects as JSONB
- Best for mixed data
Full Normalization
- Extracts all arrays into separate tables
- Creates foreign key relationships
- Best for relational data modeling
No Normalization
- Single table with JSONB columns
- Fastest import
- Best for schema-less documents
Custom
- User selects specific paths to extract as tables
- Manual control over structure

Schema Designer Features:

Auto Type Inference - Scans sample data (up to 1000 rows)
Column Configuration - Name, type, nullable, primary key, unique
Index Creation - Automatic index suggestions
Smart Table Matching - Compares import schema to existing tables
Conflict Resolution - Skip, cast, alter, or block on type mismatches

Supported Data Types:

text, varchar, int, bigint, smallint, numeric, decimal, real,
double precision, boolean, date, timestamp, timestamptz,
time, interval, uuid, json, jsonb, bytea, inet, cidr, macaddr,
point, line, lseg, box, path, polygon, circle

Import Modes:

Create New Table
- Generates CREATE TABLE statement
- Adds primary key, indexes, constraints
- Batch INSERT with optimal batch sizing
Import to Existing Table
- Column mapping interface
- Type casting with fallback to NULL
- Automatic column matching by name similarity
Smart Multi-Table Import (JSON only)
- Analyzes existing schema
- Matches import tables to existing tables
- Three resolution strategies:
  - New - Create table if no match
  - Insert - Append rows to existing table
  - Augment - ALTER TABLE to add missing columns
  - Skip - Ignore table entirely

Execution Features:

Transaction Rollback - Wrap all statements in BEGIN/COMMIT
Batch Execution - Optimized batch sizes (500-5000 rows)
Progress Tracking - Real-time batch/row counters
Error Reporting - Statement-level error messages with SQL
Migration Capture - DDL statements saved to migrations table
Retry Failed - Re-execute only failed statements
Pause/Resume - Manual execution control

Sub-Components:

Component	Purpose
FileUploader	Drag-drop file input
ExcelDataGrid	Spreadsheet-style data preview
JsonDataViewer	Multi-table JSON preview
JsonNormalizationSelector	Strategy picker with structure tree
SchemaCreator	Column designer with type inference
FieldMapper	Column mapping for existing tables
SqlReviewPanel	Syntax-highlighted SQL preview
ImportProgressTracker	Real-time execution monitor
DatabaseErdView	ERD visualization of import vs existing schema
ConflictResolutionPanel	Type mismatch resolver

Usage:

<DatabaseImportWizard
  open={showImport}
  onOpenChange={setShowImport}
  databaseId={databaseId}
  projectId={projectId}
  shareToken={shareToken}
  existingTables={existingTables}
  onImportComplete={() => {
    refetchSchema();
    toast.success("Import complete!");
  }}
/>

Related Utilities:

parseExcel.ts - Excel/CSV parsing
parseJson.ts - JSON flattening and normalization
typeInference.ts - Column type detection
sqlGenerator.ts - SQL statement generation
tableMatching.ts - Schema similarity scoring

Requirements Components

Location: src/components/requirements/

Overview

Requirements components provide AI-powered hierarchical requirements decomposition with traceability to standards and artifacts.

Component Inventory

Component	File	Purpose
RequirementsTree	RequirementsTree.tsx	Hierarchical requirement display
AIDecomposeDialog	AIDecomposeDialog.tsx	AI decomposition interface
RequirementStandardsBadges	RequirementStandardsBadges.tsx	Standards linkage display
SourceRequirementsUpload	SourceRequirementsUpload.tsx	Requirement file attachments

RequirementsTree (RequirementsTree.tsx)

Recursive tree component for hierarchical requirements management.

Requirement Types:

type RequirementType = "EPIC" | "FEATURE" | "STORY" | "ACCEPTANCE_CRITERIA";

Type Hierarchy:

EPIC
└── FEATURE
    └── STORY
        └── ACCEPTANCE_CRITERIA

Props:

interface RequirementsTreeProps {
  requirements: Requirement[];
  projectId: string;
  shareToken?: string | null;
  expandAll?: boolean;
  onNodeUpdate?: (id: string, updates: Partial<Requirement>) => void;
  onNodeDelete?: (id: string) => void;
  onNodeAdd?: (parentId: string | null, type: RequirementType) => void;
  onExpand?: () => void;
  onLinkStandard?: (id: string, title: string) => void;
}

Node Actions:

Edit - Inline editing with title + content textarea
AI Expand - Calls expand-requirement edge function
Link Standards - Opens standards selector dialog
Add Child - Creates next-level requirement
Delete - Removes node and descendants
Attach Files - Upload source documents (PDFs, Word, etc.)

Visual Indicators:

Color-coded types - Epic (purple), Feature (blue), Story (green), AC (orange)
Standards badges - Displays linked standards with tooltips
File count badge - Shows attached document count
Expand/collapse chevrons - Tree navigation

Responsive Design:

Mobile: Stacked badges, full-width actions
Desktop: Inline badges, hover-activated action buttons

Usage:

<RequirementsTree
  requirements={hierarchicalRequirements}
  projectId={projectId}
  shareToken={shareToken}
  expandAll={expandAll}
  onNodeUpdate={async (id, updates) => {
    await supabase.rpc("update_requirement_with_token", { ... });
    refetch();
  }}
  onNodeDelete={(id) => handleDelete(id)}
  onNodeAdd={(parentId, type) => createChild(parentId, type)}
  onExpand={() => refetch()}
  onLinkStandard={(id, title) => openStandardsDialog(id, title)}
/>

AIDecomposeDialog (AIDecomposeDialog.tsx)

AI-powered decomposition of unstructured text into hierarchical requirements.

Props:

interface AIDecomposeDialogProps {
  projectId: string;
  shareToken?: string | null;
  open: boolean;
  onClose: () => void;
  onRefresh?: () => void;
}

Features:

Text Input - Large textarea for pasting unstructured requirements
Project Context Selector - Attach existing project elements:
- Project metadata
- Artifacts (documents, images)
- Requirements (existing)
- Standards
- Tech stacks
- Canvas nodes
- Chat sessions
- Repository files
- Database schemas
AI Processing - Calls decompose-requirements edge function
Automatic Hierarchy - Creates EPICs → FEATUREs → STORYs → ACCEPTANCE_CRITERIA

Input Examples:

Users should be able to log in with email and password.
The system must validate email format and hash passwords
using bcrypt. Password reset via email should be supported.

Output:

EPIC: User Authentication
  FEATURE: Email/Password Login
    STORY: User enters credentials
      AC: Email format validated
      AC: Password hashed with bcrypt
    STORY: Login attempt processed
      AC: Valid credentials grant access
      AC: Invalid credentials show error
  FEATURE: Password Reset
    STORY: User requests reset
      AC: Email sent with reset link
    STORY: User sets new password
      AC: Old password invalidated

Usage:

<AIDecomposeDialog
  projectId={projectId}
  shareToken={shareToken}
  open={showDecompose}
  onClose={() => setShowDecompose(false)}
  onRefresh={() => refetch()}
/>

Repository Components

Location: src/components/repository/

Overview

Repository components provide Monaco-based code editing with version control staging, diff view, and file operations.

Component Inventory

Component	File	Purpose
CodeEditor	CodeEditor.tsx	Monaco editor with diff mode
FileTree	FileTree.tsx	Hierarchical file browser
StagingPanel	StagingPanel.tsx	Git-style change staging
CommitHistory	CommitHistory.tsx	Commit log viewer

CodeEditor (CodeEditor.tsx)

Monaco-powered code editor with diff view and save staging.

Props:

interface CodeEditorProps {
  fileId: string | null;
  filePath: string | null;
  repoId: string;
  shareToken?: string | null;
  isStaged?: boolean;
  isBinary?: boolean;
  // Buffer mode (managed by parent)
  bufferContent?: string;
  bufferOriginalContent?: string;
  onContentChange?: (content: string) => void;
  // Legacy mode (internal state)
  initialContent?: string;
  showDiff?: boolean;
  diffOldContent?: string;
  onShowDiffChange?: (show: boolean) => void;
  onClose: () => void;
  onSave?: () => void;
  onAutoSync?: () => void;
  onDirtyChange?: (isDirty: boolean) => void;
}

Features:

Language Detection - Auto-detects from file extension
Syntax Highlighting - Monaco's built-in tokenizer
Diff Mode - Side-by-side comparison with original
Image Preview - Displays PNG, JPG, SVG, etc.
Markdown Preview - Rendered markdown with GitHub-flavored syntax
Dirty Tracking - Detects unsaved changes
Auto-save to Staging - Saves to staged changes table
Binary File Detection - Shows "Binary file" message

Supported Languages:

javascript, typescript, jsx, tsx, python, go, rust, java, c, cpp,
csharp, php, ruby, swift, kotlin, sql, html, css, scss, sass, json,
xml, yaml, markdown, shell, dockerfile, plaintext

Image Extensions:

png, jpg, jpeg, gif, webp, bmp, ico, svg, avif, tiff, tif

Editor Modes:

Mode	Description	When Used
Edit Mode	Single editor pane	Default, no diff
Diff Mode	Side-by-side comparison	`showDiff={true}`
Preview Mode	Rendered markdown	Markdown files with toggle
Image Mode	Image display with zoom	Image files
Binary Mode	Disabled state	Executables, archives

Imperative Handle:

export interface CodeEditorHandle {
  save: () => Promise<boolean>;
  isDirty: () => boolean;
}

const editorRef = useRef<CodeEditorHandle>(null);

// Force save from parent
await editorRef.current?.save();

// Check dirty state
const hasChanges = editorRef.current?.isDirty();

Usage:

<CodeEditor
  fileId={selectedFile.id}
  filePath={selectedFile.path}
  repoId={repoId}
  shareToken={shareToken}
  showDiff={showDiff}
  onShowDiffChange={setShowDiff}
  onClose={() => setSelectedFile(null)}
  onSave={() => refetchFiles()}
  onDirtyChange={setIsDirty}
/>

Standards Components

Location: src/components/standards/

Overview

Standards components manage hierarchical compliance standards with requirement linkage.

Component Inventory

Component	File	Purpose
StandardsTree	StandardsTree.tsx	Hierarchical standards display
StandardDialog	StandardDialog.tsx	Create/edit standards
LinkStandardsDialog	LinkStandardsDialog.tsx	Link standards to requirements

StandardsTree (StandardsTree.tsx)

Recursive tree component for standards library display.

Standard Schema:

interface Standard {
  id: string;
  code: string;              // e.g., "NIST-800-53-AC-1"
  title: string;
  description?: string;
  content?: string;          // Full text of standard
  children?: Standard[];     // Sub-standards
  attachments?: StandardAttachment[];
}

interface StandardAttachment {
  id: string;
  type: "file" | "url" | "sharepoint" | "website";
  name: string;
  url: string;
  description?: string;
}

Props:

interface StandardsTreeProps {
  standards: Standard[];
  onStandardSelect?: (standard: Standard) => void;
  onLinkStandard?: (standard: Standard) => void;
  showLinkButton?: boolean;
}

Visual Features:

Code Badge - Monospace font, outline style
Hierarchical Indentation - 10px per level
Attachment Icons - File count with tooltip
Link Button - Attaches standard to requirement
Expand/Collapse - Chevron icons

Responsive Layout:

Mobile: Vertical stack, code on separate line
Desktop: Horizontal layout, inline code

Usage:

<StandardsTree
  standards={hierarchicalStandards}
  onStandardSelect={(std) => setSelectedStandard(std)}
  onLinkStandard={(std) => linkToRequirement(requirementId, std.id)}
  showLinkButton={true}
/>

Example Standards Hierarchy:

NIST 800-53
├── Access Control (AC)
│   ├── AC-1: Policy and Procedures
│   ├── AC-2: Account Management
│   └── AC-3: Access Enforcement
├── Awareness and Training (AT)
└── Audit and Accountability (AU)

Specifications Components

Location: src/components/specifications/

Overview

Specifications components manage AI-generated project documentation with versioning.

Component Inventory

Component	File	Purpose
SavedSpecificationsPanel	SavedSpecificationsPanel.tsx	Version history panel
AgentGrid	AgentGrid.tsx	13 agent selector cards
SpecMarkdownViewer	SpecMarkdownViewer.tsx	Rendered markdown display

SavedSpecificationsPanel (SavedSpecificationsPanel.tsx)

Displays version history of generated specifications with actions.

Props:

interface SavedSpecificationsPanelProps {
  specifications: SavedSpecification[];
  allVersions: Record<string, SavedSpecification[]>;
  selectedVersions: Record<string, SavedSpecification>;
  onView: (spec: SavedSpecification) => void;
  onDownload: (spec: SavedSpecification) => void;
  onSaveAsArtifact: (spec: SavedSpecification) => void;
  onDelete: (specId: string) => void;
  onSetAsLatest: (specId: string) => void;
  onReturnToLatest: (agentId: string) => void;
  onLoadVersions: (agentId: string) => void;
  isLoading?: boolean;
}

Specification Schema:

interface SavedSpecification {
  id: string;
  agent_id: string;              // e.g., "technical-specification"
  agent_title: string;           // e.g., "Technical Specification"
  version: number;               // Incremental version
  is_latest: boolean;            // Latest version flag
  generated_spec: string;        // Markdown content
  raw_data: any;                 // JSON metadata
  created_at: string;
  generated_by_user_id: string | null;
  generated_by_token: string | null;
}

Actions:

View - Opens markdown viewer
Download - Saves as .md file
Save as Artifact - Creates artifact record
Delete - Removes version
Set as Latest - Marks version as current
Return to Latest - Switches back to latest version

Version History Dropdown:

Shows all versions for an agent
Displays creation date
Highlights latest version
Quick version switching

13 Specification Agents:

Agent ID	Title	Focus
`overview`	Overview	High-level project summary
`technical-specification`	Technical Specification	Comprehensive technical doc
`executive-summary`	Executive Summary	Business stakeholder summary
`project-manager`	Project Manager	Timeline, sprints, deliverables
`cyber-specialist`	Cyber Specialist	Security, threats, compliance
`solution-architect`	Solution Architect	System design, integration
`lovable-specification`	Lovable Specification	Optimized for Lovable AI
`architecture-review-board`	Architecture Review Board	Critical analysis, gaps
`agent-instruction-builder`	Agent Instruction Builder	AI tool instructions
`azure-architect`	Azure Cloud Architect	Azure infrastructure
`aws-architect`	AWS Cloud Architect	AWS infrastructure
`gcp-architect`	Google Cloud Architect	GCP infrastructure
`procurement-builder`	Procurement Builder	RFP/procurement docs

Artifacts Components

Location: src/components/artifacts/

Overview

Artifacts components manage multi-format document processing and knowledge base operations.

Component Inventory

Component	File	Purpose
ArtifactUniversalUpload	ArtifactUniversalUpload.tsx	Multi-format file upload
ArtifactGallery	ArtifactGallery.tsx	Image grid viewer
TextFileEditor	TextFileEditor.tsx	Monaco text editor
ExcelDataGrid	ExcelDataGrid.tsx	Spreadsheet viewer
DocumentViewer	DocumentViewer.tsx	Word/PDF renderer

ArtifactUniversalUpload (ArtifactUniversalUpload.tsx)

Universal file upload with automatic categorization by file type.

Props:

interface ArtifactUniversalUploadProps {
  onImagesAdded: (files: File[]) => void;
  onExcelAdded: (file: File) => void;
  onTextFilesAdded: (files: File[]) => void;
  onDocxFilesAdded: (files: File[]) => void;
  onPdfFilesAdded: (files: File[]) => void;
  onPptxFilesAdded: (files: File[]) => void;
  counts: {
    images: number;
    excel: number;
    textFiles: number;
    docx: number;
    pdf: number;
    pptx: number;
  };
}

File Categories:

Category	Extensions	Icon	Handler
Images	.jpg, .jpeg, .png, .gif, .webp, .bmp, .svg	Image	`onImagesAdded`
Excel	.xlsx, .xls	FileSpreadsheet	`onExcelAdded`
Text Files	.txt, .md, .json, .xml, .csv, .yaml, .js, .ts, .py, .java, .html, .css, .sql, .log, .env	FileText	`onTextFilesAdded`
Word	.docx, .doc	FileText	`onDocxFilesAdded`
PDF	.pdf	FileIcon	`onPdfFilesAdded`
PowerPoint	.pptx, .ppt	Presentation	`onPptxFilesAdded`

Features:

Auto-categorization - Detects type from extension and MIME
Drag-and-drop - Full-screen drop zone
Multi-file - Batch uploads with progress
Recent upload indicator - Shows count by category for 3 seconds
File count badges - Displays totals per category

Usage:

<ArtifactUniversalUpload
  onImagesAdded={(files) => uploadImages(files)}
  onExcelAdded={(file) => processExcel(file)}
  onTextFilesAdded={(files) => processTextFiles(files)}
  onDocxFilesAdded={(files) => processWord(files)}
  onPdfFilesAdded={(files) => processPdf(files)}
  onPptxFilesAdded={(files) => processPowerPoint(files)}
  counts={{
    images: 12,
    excel: 3,
    textFiles: 45,
    docx: 8,
    pdf: 15,
    pptx: 4
  }}
/>

Project Components

Location: src/components/project/

Overview

Project components manage project settings, context selection, and metadata.

Component Inventory

Component	File	Purpose
ProjectSelector	ProjectSelector.tsx	Multi-resource context picker
ProjectCard	ProjectCard.tsx	Project summary card
ProjectDialog	ProjectDialog.tsx	Create/edit project form

ProjectSelector

Multi-resource context selector for AI agents (used in AIDecomposeDialog).

Selectable Resources:

Project metadata (name, description, objectives)
Artifacts (documents, images)
Requirements (hierarchical tree)
Standards (compliance library)
Tech stacks (languages, frameworks)
Canvas nodes (architecture components)
Chat sessions (conversation history)
Repository files (code)
Database schemas (tables, columns)

Returns:

interface ProjectSelectionResult {
  projectMetadata?: boolean;
  artifacts?: { id: string; title: string; content: string }[];
  requirements?: { id: string; title: string; content: string }[];
  standards?: { id: string; code: string; title: string }[];
  techStacks?: { id: string; name: string; description: string }[];
  canvasNodes?: { id: string; label: string; type: string }[];
  chatSessions?: { id: string; messages: any[] }[];
  files?: { id: string; path: string; content: string }[];
  databases?: { id: string; schema: any }[];
}

Tech Stack Components

Location: src/components/techstack/

Component Inventory

Component	File	Purpose
TechStackCard	TechStackCard.tsx	Technology card display
TechStackDialog	TechStackDialog.tsx	Create/edit tech stack

Tech Stack Schema:

interface TechStack {
  id: string;
  name: string;
  category: "language" | "framework" | "database" | "tool" | "platform" | "library";
  version?: string;
  description?: string;
  icon_url?: string;
  documentation_url?: string;
}

Presentation Components

Location: src/components/present/

Overview

Presentation components handle slide generation from project data.

Component Inventory

Component	File	Purpose
SlideCanvas	SlideCanvas.tsx	Slide editor
SlidePreview	SlidePreview.tsx	Thumbnail view
LayoutSelector	LayoutSelector.tsx	15 layout templates

Slide Layouts (from presentationLayouts.json):

title-cover
section-divider
title-content
two-column
image-left / image-right
stats-grid
chart-full
table
bullets
quote
architecture
comparison
timeline
icon-grid

Super Admin Components

Location: src/components/superadmin/

Overview

Super admin components provide system-wide management for user roles and global settings.

Component Inventory

Component	File	Purpose
UserManagement	UserManagement.tsx	User list with role editor
RoleAssignment	RoleAssignment.tsx	Role toggle component
SystemSettings	SystemSettings.tsx	Global configuration

User Roles:

user - Default role
admin - Project-level admin
superadmin - System-wide admin

Component Statistics

By Module

Module	Components	Total Lines	Key Features
deploy	8	~3500	Render.com integration, database lifecycle
requirements	6	~1200	AI decomposition, hierarchical tree
repository	12	~4000	Monaco editor, staging, diff view
standards	5	~800	Hierarchical library, requirement linking
specifications	7	~2000	13 AI agents, version history
artifacts	15	~3000	Multi-format processing, knowledge base
project	4	~600	Context selection, metadata
techstack	3	~400	Technology stack management
present	8	~2500	Slide generation, 15 layouts
superadmin	4	~500	User/role management

Total: ~18,500 lines across 72 components

Key Design Patterns

1. Wizard Pattern (DatabaseImportWizard)

Multi-step workflow with:

State Persistence - Preserves data across steps
Validation Gates - Blocks progression until valid
Navigation - Forward/back with step indicators
Conditional Steps - Skips normalize for non-JSON

2. Tree Pattern (RequirementsTree, StandardsTree)

Recursive rendering with:

Lazy Expansion - Collapses by default
Inline Editing - Click-to-edit mode
Action Menus - Context-specific buttons
Visual Hierarchy - Color coding and indentation

3. Monaco Integration (CodeEditor)

Editor features:

Language Auto-detection - From file extension
Diff Mode - Side-by-side comparison
Dirty Tracking - Unsaved change indicator
Imperative Handle - Parent-controlled save

4. Multi-format Processing (ArtifactUniversalUpload)

File handling:

Auto-categorization - Extension + MIME detection
Parallel Handlers - Separate callbacks per type
Progress Tracking - Real-time upload status
Error Recovery - Per-file error handling

FilesExpand file tree

DOCS-06-FeatureComponents-Part2.md

Latest commit

History

DOCS-06-FeatureComponents-Part2.md

File metadata and controls

DOCS-06: Feature Components - Part 2

Table of Contents

Overview

Deployment Components

Overview

Component Inventory

DatabaseCard (DatabaseCard.tsx)

DatabaseImportWizard (DatabaseImportWizard.tsx)

Requirements Components

Overview

Component Inventory

RequirementsTree (RequirementsTree.tsx)

AIDecomposeDialog (AIDecomposeDialog.tsx)

Repository Components

Overview

Component Inventory

CodeEditor (CodeEditor.tsx)

Standards Components

Overview

Component Inventory

StandardsTree (StandardsTree.tsx)

Specifications Components

Overview

Component Inventory

SavedSpecificationsPanel (SavedSpecificationsPanel.tsx)

Artifacts Components

Overview

Component Inventory

ArtifactUniversalUpload (ArtifactUniversalUpload.tsx)

Project Components

Overview

Component Inventory

ProjectSelector

Tech Stack Components

Component Inventory

Presentation Components

Overview

Component Inventory

Super Admin Components

Overview

Component Inventory

Component Statistics

By Module

Key Design Patterns

1. Wizard Pattern (DatabaseImportWizard)

2. Tree Pattern (RequirementsTree, StandardsTree)

3. Monaco Integration (CodeEditor)

4. Multi-format Processing (ArtifactUniversalUpload)

Related Documentation