shiny-drawing

byDarren Hopwood

PROJECT TITLE: InstructScope SUBTITLE: Powered by InstructBrain CORE VISION: Build a standalone, single-function B2B SaaS web application optimized specifically for widescreen laptop screens (1080p and up). The purpose of the app is "Pre-Construction Scope Auditing." Users (Senior Site Managers and Quantity Surveyors) will upload complex architectural drawing PDFs during a project's PCSA (Pre-Construction Services Agreement) phase. The app uses an advanced AI engine (InstructBrain) to visually analyze vector linework, hatching, and text callouts to allocate construction scope to separate trade packages, automatically exposing high-risk "grey areas" (scope gaps) before contracts are signed. BRANDING & AESTHETIC: - Brand Name: InstructScope - Subtitle: Powered by InstructBrain - Colors: Follow the official premium, tech-forward InstructSite Green aesthetic. Dark mode prioritized for professional, modern dashboard appeal, utilizing crisp borders and zero clutter. LAYOUT ARCHITECTURE (3-Panel Laptop Workspace): 1. HEADER: Displays "INSTRUCTSITE | InstructScope (Powered by InstructBrain)", current Project Name, Active Drawing Selector, and a prominent "Export Scope Pack" button. 2. LEFT PANEL (20% Width): Trade Package Matrix. A clean interactive list of subcontractors (e.g., Roofing, Cladding, Drylining, MEP, Fire Protection). Clicking a trade filters and highlights only their corresponding scope on the canvas. 3. CENTER CANVAS (60% Width): The High-Resolution Drawing Viewer. Supports smooth pan and mouse-wheel zoom for PDF blueprints. Overlays transparent, color-coded geometric highlights directly over drawing details based on trade allocation (e.g., blue for roofing, green for cladding). 4. BOTTOM PANEL (20% Height / Full Width below canvas): The AI "Grey Area" Audit Trail. A live feed of flagged scope risks, omissions, and interface conflicts with amber/red severity markers. CORE BACKEND & DATABASE STRUCTURE (PostgreSQL/Supabase Native): - 'projects': Id, name, client_name, contract_type (e.g., PCSA). - 'drawings': Id, project_id, drawing_number, drawing_title, storage_url, processed_status. - 'trade_packages': Id, project_id, trade_name, color_code (Hex for canvas overlays). - 'drawing_elements': Id, drawing_id, element_type, raw_content (parsed text/vector), bounding_box (JSON coordinates), suggested_trade_id, assigned_trade_id. - 'scope_gaps': Id, drawing_id, element_id, risk_level (Low/Med/High), gap_description, recommended_action, status (Open/Resolved). INTELLIGENT TRADE CLASH INTERFACES TO PROGRAM (InstructBrain Logic): The backend must run incoming parsed data through a specialized risk matrix targeting high-value Tier-1 contract omissions: - Roofing vs. Cladding: Interface seals, insulation behind parapets, VCL upstand continuity. - MEP vs. Drylining: Plywood backing/pattresses inside stud walls for heavy kit, acoustic/fire mastic penetration seals, access hatches. - Fire Protection vs. All Trades: Deflection head seals at concrete soffits, ductwork fire damper installation vs. wiring, touching up structural steel intumescent paint after secondary drilling. - MEP vs. Groundworks: Builder's Work in Connection (BWIC), concrete housekeeping plinths, core-drilling ownership for penetrations >150mm. OUTPUTS REQUIRED from 8080.ai Agents: - Frontend Dev: Responsive Next.js/React workspace optimized for widescreen, rendering mock interactive PDF overlays using the JSON bounding boxes. - Backend Dev: Python FastAPI or Node.js endpoints handling file uploads, DB writes, and mock processing loops for the trade matrix. - QA Agent: Automated visual testing for the canvas layout and responsive panel splits.