Scale With Jaryd
SCALE WITH JARYD
System Documentation//Authenticated

Press Oracle Implementation

Technical implementation details for the Press Oracle.

#PRESS ORACLE: IMPLEMENTATION NOTES (v1.0)

✅ IMPLEMENTATION STATUS

Core Functionality - COMPLETE

A. Scrollable "Terminal" History ✓

  • Implementation: InterrogationView component with overflow-y-auto and scrollbar-hide
  • User Messages: Right-aligned, italicized, white/30 opacity - "[The crash was necessary]"
  • Oracle Messages: Center-aligned, MASSIVE typography (text-5xl → text-7xl)
  • Auto-Scroll: bottomRef with scrollIntoView({ behavior: 'smooth' })
  • Manual Review: User can scroll up through entire interrogation history
  • Mask Fade: Gradient mask at top/bottom for "infinite terminal" feel

B. Typewriter Effect ✓

  • Speed: 15ms/char (fast enough to read, slow enough to feel "generated")
  • Markdown Handling: ReactMarkdown with custom components for p, strong, em
  • Stability: Container px-8 + paragraph px-4 prevents glyph clipping
  • State Management: isTypewriter boolean controls whether to animate or instant-render
  • History Preservation: Only latest message typewriters; old messages render instantly

C. "Coaching Mode" ✓

  • Educational Options: API provides pre-written wisdom responses
    • ❌ Bad: [I agree]
    • ✅ Good: [The crash was necessary for the rebuild]
  • Customize Answer Button: onOptionEdit triggers input pre-population
  • Training Evolution: Phase 1-5 progression from simple to complex systems analysis
  • Visual Hierarchy:
    • Main option: White text on dark bg, inverts to white bg/black text on hover
    • Customize button: Appears on hover, red accent color

D. Visual & Typography Standards ✓

  • Fonts:
    • Oracle: font-heading (configured in Tailwind)
    • UI elements: font-mono
  • Sizing:
    • Desktop: text-5xl → text-7xl
    • Mobile: Responsive scaling with md: and lg: breakpoints
  • Spacing:
    • Tracking: tracking-tighter for aggressive feel
    • Line height: leading-[1.1] for tight vertical rhythm
  • Padding (CRITICAL):
    • Container: max-w-5xl px-8
    • Text elements: px-4 (increased from px-2 for extra protection)
  • Input Field:
    • Bottom-fixed: ✓
    • Transparent: ✓
    • Border-only: ✓
    • Red glow on focus: focus:shadow-[0_4px_16px_rgba(220,38,38,0.3)] ✓

🏗️ COMPONENT ARCHITECTURE

1. PressOracle.tsx (Main Component)

typescript
- State: messages[], phase, isAnalyzing, inputText, telemetry
- Effects: Auto-initiate interrogation, focus management, voice recognition
- Handlers: handleSendMessage, processTurn
- Phases: IDLE → INTERROGATION → CONSENT_GATE → REPORT

2. InterrogationView (Chat History)

typescript
- Scrollable container: overflow-y-auto + scrollbar-hide
- Message mapping: filters 'system', renders User/Oracle differently
- Auto-scroll: bottomRef + useEffect on messages change
- Input area: Fixed at bottom with gradient fade-up

3. DivineTransmission (Oracle Message Renderer)

typescript
Props:
- text: Oracle message content
- options: Educational option buttons
- isTypewriter: Boolean (true for latest, false for history)
- onOptionSelect: Sends option as user response
- onOptionEdit: Pre-populates input with option text

Rendering:
- ReactMarkdown for formatting
- Custom components: p (massive headers), strong (gradient glow), em (red italic)
- Typewriter: setInterval char-by-char reveal at 15ms speed

4. OptionButton (Training Wheels)

typescript
- Hover: Inverts to white bg / black text
- Sub-action: "[ CUSTOMIZE ANSWER ]" on hover
- Motion: Framer Motion for spring animations
- Visual: Border glow on hover, opacity fade-in for customize button

🧠 API LOGIC (/api/brain/press-oracle/route.ts)

Phased Approach

The Oracle guides journalists through 5 narrative beats:

Phase 1: THE CRASH (Turns 1-6) - Reframing Tragedy

  • Goal: Teach that crash was the origin point, not a failure
  • Options evolve from "That's a headline" → "The crash was necessary for the rebuild"

Phase 2: THE REBUILD (Turns 7-11) - Validating the Shift

  • Goal: Link cybersecurity → psychology
  • Options: "He treated his mind like a compromised server"

Phase 3: JARYD.OS (Turns 12-19) - Defining the Category

  • Goal: Move from "Self-Help" to "Sovereignty Systems"
  • Options: "It's military telemetry for the soul"

Phase 4: THE META (Turns 20-26) - Meta-Awareness

  • Goal: Show power of Oracle by using it on them
  • Options: "The medium IS the message"

Phase 5: THE PLEDGE (Turns 27-32) - Commitment

  • Goal: Secure commitment to depth
  • Final option: "I will tell this story raw"

Dynamic Flow Control

  • Tangents Allowed: If user asks question, Oracle engages
  • Skip Logic: High-comprehension users can advance faster
  • Completion Trigger: After Turn 32 or when Oracle determines readiness

Response Format (ULTRA-MINIMAL)

"**Jaryd was 30.** Nightclub owner at 16.

OPTIONS: [The chaos was the training ground] [He was built for high-stakes environments] [I see the pattern forming]"

Format Rules:

  1. Strictly 1-2 sentences per turn
  2. Must fit in ONE viewport
  3. Options on separate line after "OPTIONS:"
  4. Options in [brackets] separated by spaces

🎯 SUCCESS METRICS - VALIDATION

✅ 1. Readability

  • No cut-off words at any screen size (px-8 container + px-4 text padding)
  • Typography scales responsively (5xl → 6xl → 7xl)
  • Line height prevents overlap (leading-[1.1])

✅ 2. Flow

  • Scrolling feels like terminal log review
  • Auto-scroll to latest message
  • Manual scroll preserves position
  • Smooth transitions between messages

✅ 3. Immersion

  • No visible scrollbars (scrollbar-hide utility)
  • Black/red forensic aesthetic maintained
  • No "web app" chrome visible
  • Cinematic typewriter delivery

✅ 4. Training

  • User learns narrative by selecting options
  • Options teach vocabulary ("psychological sovereignty")
  • "Customize Answer" allows personalization
  • Progression from simple → complex systems thinking

🔧 TECHNICAL SPECIFICATIONS

Dependencies

  • framer-motion: Animations and transitions
  • react-markdown: Markdown rendering for Oracle text
  • remark-gfm: GitHub-flavored markdown support
  • lucide-react: Icon library

Styling Approach

  • Tailwind CSS for utility-first styling
  • Custom gradients for red accent glows
  • Motion variants for entrance animations
  • Conditional styling based on state (isAnalyzing, isTypewriter)

Performance Considerations

  • Typewriter uses setInterval with cleanup
  • Markdown rendering only on display text (not full history re-render)
  • Auto-scroll debounced through React useEffect
  • Voice recognition cleanup on unmount

Browser Compatibility

  • Web Speech API (voice input) - Chrome/Edge only
  • Fallback: Manual text input always available
  • CSS Grid/Flexbox for layout
  • Modern CSS features (backdrop-blur, custom shadows)

📝 USAGE NOTES

For Press/Journalists:

  1. Click "INITIATE PRESS CLEARANCE" button
  2. Oracle begins interrogation automatically
  3. Read Oracle's transmission (typewriter effect)
  4. Select educational option OR customize answer
  5. Continue through ~12-33 turns (depends on comprehension)
  6. Receive forensic assessment report

For Developers:

  1. Oracle component is self-contained in components/press/PressOracle.tsx
  2. API route at /api/brain/press-oracle/route.ts
  3. Integrates with DeepSeek AI (falls back to mock logic if no API key)
  4. Can be embedded in any page via <PressOracle isOpen={bool} onClose={fn} />

For Content Creators:

To modify the narrative:

  1. Edit PRESS_ORACLE_SYSTEM_PROMPT in route.ts
  2. Update mock responses in mockPressOracleLogic()
  3. Maintain 1-2 sentence rule
  4. Options should be educational statements, not yes/no

🚀 FUTURE ENHANCEMENTS (Optional)

Voice-Tone Analysis

  • Integrate voice metrics into telemetry
  • Detect confidence, hesitation in vocal delivery
  • Cross-reference voice vs typing behavioral patterns

Transcript Highlights in Report

  • Already supported in API (transcript_highlights)
  • UI needs implementation in PressReportView
  • Show specific turn quotes with analysis

Custom Branding for White-Label

  • Color scheme variables
  • Customizable system prompts
  • Client-specific narrative progressions

Advanced Telemetry

  • Time-on-page per turn
  • Scroll patterns (hesitation points)
  • Option hover time before selection
  • Revision count on customized answers

⚡ CRITICAL REMINDERS

Typography Protection

Large fonts (7xl) + tight tracking = glyph overflow risk. Solution: Container px-8 + text px-4 minimum.

Typewriter Flickering

Markdown rendering char-by-char can create flicker. Solution: Fast speed (15ms) + stable container height (min-h-[1.2em]).

Mobile Considerations

  • Text scales down with md: and lg: breakpoints
  • Input field stays fixed at bottom
  • Options stack vertically on mobile

API Response Format

DeepSeek must return:

{
  "outcome": "CONTINUE" | "COMPLETE",
  "message": "Text\n\nOPTIONS: [opt1] [opt2] [opt3]",
  "report": { ... } // only if outcome === "COMPLETE"
}

"The user doesn't just read the story. They survive the interrogation."

Last Updated: 2025-12-18 Implementation Version: 1.0 Status: Production Ready