SCREWDRIVER EXECUTION GUIDE

ETH-001 Challenge Board Mode - Build Sequence

EXECUTIVE BRIEF FOR SCREWDRIVER

You are building a production-grade, patent-protected dual-mode cognitive orchestration system with three core surfaces:

1. Dual-Mode Chat Interface - Amenable/Challenge mode with automatic transitions
2. Board Mode Workspace - Spatial artifact management with drag-and-drop
3. Track Mode Orchestration - Multi-track project coordination with dependencies

• ✅ Matches USPTO patent filing exactly
• ✅ EUDS Premium design standards (glass morphism, Geist fonts, constitutional colors)
• ✅ Zero backend - pure client-side with localStorage
• ✅ T5-rigid - no hallucination, no deviation from spec
• ✅ Production quality - 95+ Lighthouse score

BUILD SEQUENCE (10 Days)

DAY 1-2: FOUNDATION ⚙️

npx create-next-app@latest eth-001-challenge-board-mode \
--typescript \
--tailwind \
--app \
--no-src-dir \
--import-alias "@/*"

cd eth-001-challenge-board-mode

npm install zustand framer-motion react-markdown remark-gfm lucide-react date-fns zod

// next.config.js
module.exports = {
output: 'export',
trailingSlash: true,
images: { unoptimized: true }
}

• Copy color palette from specification Section 3.1
• Add Geist Sans/Mono fonts to public/fonts/
• Configure glass morphism utilities

• Copy all types from specification Section 4.1 to src/types/core.ts
• Copy defaults from Section 4.2 to src/lib/defaults.ts

• Copy complete store implementation from Section 8.1 to src/store/index.ts

✅ Quality Gate: npm run type-check passes with zero errors

DAY 3-4: SURFACE #1 - DUAL-MODE CHAT INTERFACE

mkdir -p src/components/chat

1. ModeIndicator.tsx - Mode badge with icons (Section 5.4)
2. MessageBubble.tsx - Individual message display
3. MultiFrameMessage.tsx - Challenge mode 5-frame display (Section 5.3)
4. MessageList.tsx - Scrollable container
5. InputBar.tsx - User input + send button
6. TransitionNotification.tsx - Mode change animation
7. ChatInterface.tsx - Root component (Section 5.2)

• Copy transition-evaluator.ts from Section 8.2 to src/lib/
• Test automatic Challenge mode activation on strategic keywords
• Test de-escalation back to Amenable mode

• Glass morphism effects for message bubbles
• Mode-specific colors (amenable=teal, challenge=amber)
• Smooth Framer Motion transitions
• Multi-frame collapsible sections

• All 4 modes display correctly
• Automatic transitions work
• Multi-frame analysis renders properly
• State persists across page refresh

DAY 5-6: SURFACE #2 - BOARD MODE WORKSPACE

mkdir -p src/components/board

1. BoardList.tsx - Sidebar board listing
2. ArtifactCard.tsx - Individual artifact display (Section 6.4)
3. BoardCanvas.tsx - Main spatial canvas with grid/freeform modes (Section 6.3)
4. RelationshipLines.tsx - SVG lines connecting artifacts
5. ArtifactCreator.tsx - New artifact modal form
6. BoardControls.tsx - View mode toggle, zoom, filters
7. BoardWorkspace.tsx - Root component (Section 6.2)

• Grid layout: 3-column responsive grid
• Freeform layout: Drag-and-drop with Framer Motion
• Artifact types: Concept (blue), Design (purple), Decision (green), Note (yellow), Constraint (red)
• Categories as tags
• Relationship mapping (derives_from, contradicts, extends, requires)

• Glass morphism cards with artifact-type-specific colors
• Smooth animations on artifact creation
• Collapsible artifact content
• Pin functionality

• Create multiple boards
• Add artifacts to boards
• Switch between grid/freeform views
• Drag artifacts in freeform mode
• All artifacts persist across sessions

DAY 7-8: SURFACE #3 - TRACK MODE ORCHESTRATION

mkdir -p src/components/tracks

1. TrackCard.tsx - Individual track display with progress bar (Section 7.3)
2. TrackList.tsx - Vertical track list
3. DependencyGraph.tsx - Visual dependency connections
4. ProgressVisualization.tsx - Progress bars and status
5. TrackCreator.tsx - New track modal form
6. TrackOrchestrator.tsx - Root component (Section 7.2)

• Track statuses: Not Started (gray), In Progress (blue), Blocked (red), Completed (green)
• Progress: 0-100% with animated bar
• Dependencies: Array of track IDs with visual connections
• Next action field
• Status quick-change buttons

• Pink accent color for orchestration mode
• Animated progress bars
• Collapsible track details
• Dependency lines in graph view

• Create tracks with dependencies
• Update track status and progress
• View list and graph modes
• Dependencies render correctly
• All tracks persist across sessions

DAY 9: INTEGRATION & POLISH ✨

Create tab navigation to switch between:

• Chat Interface
• Board Workspace
• Track Orchestrator

• Mobile: Stacked layout, collapsible sidebar
• Tablet: Side-by-side with 50/50 split
• Desktop: Full feature set

npm run build
npx lighthouse http://localhost:3000 --view

Target: Score ≥ 95

• Keyboard navigation for all actions
• ARIA labels on all interactive elements
• Color contrast ratios ≥ 4.5:1
• Focus indicators visible

• Chrome 90+
• Firefox 88+
• Safari 14+
• Edge 90+

• Lighthouse score ≥ 95
• All functionality works on mobile
• Keyboard navigation complete
• No console errors
• Bundle size < 200KB initial load

DAY 10: DEPLOYMENT

npm run build

npx serve@latest out
Open http://localhost:3000
Test all three surfaces
Verify localStorage persistence

npm i -g vercel
vercel

# Build locally
npm run build

Upload to VPS
scp -r out/* [email protected]:/var/www/challenge-board/

Configure Caddy
cat > /etc/caddy/Caddyfile << 'EOF'
challenge.ethraeon.ai {
root * /var/www/challenge-board
file_server
encode gzip
}
EOF

systemctl reload caddy

1. ✅ Site loads at challenge.ethraeon.ai
2. ✅ All three surfaces accessible
3. ✅ Mode transitions work
4. ✅ Artifacts persist across sessions
5. ✅ Tracks persist across sessions
6. ✅ Mobile responsive
7. ✅ Lighthouse score ≥ 95

CRITICAL SUCCESS FACTORS

✅ Patent Alignment

• Every mode name matches USPTO filing
• All four modes implemented: Amenable, Challenge, Board, Orchestration
• Multi-frame structure exactly as specified (5 frames)
• Artifact types match patent: concept, design, decision, note, constraint
• Track system with dependency resolution

✅ EUDS Premium Standards

• Glass morphism effects throughout
• Constitutional color palette (primary blue, secondary purple, accent teal)
• Geist Sans/Mono fonts
• Smooth 60fps animations
• Mode-specific colors consistently applied

✅ Constitutional Compliance

• Human authority preserved at every decision point
• No autonomous behavior without authorization
• T5-rigidity: zero hallucination, exact spec adherence
• Copyright and patent notices in footer

✅ Technical Excellence

• Zero TypeScript errors
• 100% type coverage
• Lighthouse score ≥ 95
• Bundle size < 200KB
• localStorage under 5MB
• WCAG 2.1 AA compliant

QUALITY GATES CHECKLIST

Functional Gates

• [ ] All 4 modes accessible and display correctly
• [ ] Automatic mode transitions (Amenable → Challenge)
• [ ] Manual mode transitions via commands
• [ ] Multi-frame analysis displays all 5 frames
• [ ] Artifacts create, update, delete correctly
• [ ] Boards create and manage artifacts
• [ ] Grid and freeform layouts both work
• [ ] Tracks create with dependencies
• [ ] Track status updates work
• [ ] Progress bars animate correctly
• [ ] State persists across page refresh
• [ ] No data loss on tab close

Design Gates

• [ ] Glass morphism effects render properly
• [ ] All mode colors correct (teal, amber, violet, pink)
• [ ] Geist fonts load and display
• [ ] Animations smooth at 60fps
• [ ] Responsive design works on mobile
• [ ] Dark theme consistent throughout
• [ ] Icons from Lucide React render correctly

Technical Gates

• [ ] npm run type-check passes
• [ ] npm run lint passes
• [ ] npm run build succeeds
• [ ] Static export works (output: 'export')
• [ ] localStorage operations work
• [ ] No console errors
• [ ] Lighthouse score ≥ 95
• [ ] Bundle size < 200KB

Constitutional Gates

• [ ] Copyright notice in footer
• [ ] USPTO Provisional #7 referenced
• [ ] Schedule A+ protection indicated
• [ ] Human authority preserved throughout
• [ ] No autonomous behavior without authorization
• [ ] T5-rigidity verified (exact patent alignment)

INVESTOR DEMO SCRIPT

"This is ETH-001 Challenge Board Mode - the world's first patent-protected dual-mode cognitive orchestration system. It solves the $50B problem of AI amenability bias."

1. Amenable Mode (30s)

- Type simple request: "Create a todo list"

- Show direct, execution-focused response

1. Challenge Mode Activation (60s)

- Type strategic question: "Should we prioritize feature A or B?"

- Show automatic transition to Challenge mode

- Demonstrate 5-frame multi-frame analysis:

* Primary interpretation

* Alternative frames (2-3 perspectives)

* Tradeoff analysis

* Blind spot identification

* Synthesis

1. Board Mode (60s)

- Navigate to Board Mode

- Show existing artifacts organized spatially

- Create new artifact from conversation

- Demonstrate grid vs freeform layouts

- Show artifact relationships

1. Track Mode (30s)

- Navigate to Track Mode

- Show multiple parallel tracks

- Demonstrate dependency relationships

- Update track progress and status

"This is production-ready. USPTO patent filed December 4th. No backend required - pure client-side. Ready for licensing to OpenAI, Anthropic, Microsoft. €250M+ acquisition potential."

TROUBLESHOOTING

• Solution: Ensure all components use 'use client' directive
• Verify output: 'export' in next.config.js

• Solution: Check Zustand persist configuration in store
• Verify partialize function only includes serializable data

• Solution: Check backdrop-filter CSS support
• Add -webkit-backdrop-filter for Safari

• Solution: Verify fonts in public/fonts/ directory
• Check font paths in tailwind.config.ts

• Solution: Use transform and opacity for animations (GPU-accelerated)
• Avoid animating width, height, top, left

• Solution: Use dynamic imports for heavy components
• Lazy load Framer Motion variants

FINAL NOTES

This specification provides complete, unambiguous instructions for building ETH-001 Challenge Board Mode. No guesswork. No interpretation needed. Just execute.