tractatus/.claude/session-archive/NEW_SESSION_STARTUP_PROMPT_2025-10-20.md

New Session Startup Prompt - Pressure Monitor UI Fix

INITIAL PROMPT FOR NEW SESSION

I need help debugging a critical UI visibility issue on the Tractatus Framework website.

**Context**: The Context Pressure Monitor demo on /architecture.html has a "Simulate Pressure Increase" button that exists in the DOM and is functional (confirmed via console logs and inspector), but is NOT VISIBLE to users. Only the "Reset to Normal" button is visible.

**What I know**:
- JavaScript initialization works perfectly (console logs confirm)
- Button exists in DOM with correct HTML and classes
- Event listeners attach successfully
- No JavaScript errors
- Multiple CSS layout fixes have failed (tried min-height, max-height, overflow-auto, removing all constraints)
- Issue exists on both local dev and production

**What I need**:
1. First, read the detailed handoff document: SESSION_HANDOFF_2025-10-20_PRESSURE_MONITOR_ISSUE.md
2. Open http://localhost:9000/architecture.html in a browser with dev tools
3. Scroll to "Framework in Action" section
4. Inspect the Context Pressure Monitor container and identify why the top button is hidden
5. Propose a fix based on actual browser computed styles

**Start by**: Reading the handoff document, then opening the local dev page to inspect.

---

Why This Approach Works

1. Clear Problem Statement

• User immediately understands the core issue
• Technical context provided upfront
• Sets expectation that diagnosis needs browser access

2. Explicit Instructions

• Step-by-step what to do first
• Points to handoff document for full context
• Requires browser inspection before coding

3. Prevents Repeated Failures

• Acknowledges multiple fixes have been attempted
• Makes clear that console logs/curl debugging hasn't worked
• Forces hands-on browser investigation

4. Scope Control

• Single, focused problem to solve
• Clear success criteria (button becomes visible)
• No ambiguity about what "done" looks like

---

Alternative Prompts (Depending on Strategy)

If User Wants to Start Fresh with Different Approach

I need to rebuild the Context Pressure Monitor demo on the Tractatus architecture page.

**Current Problem**: The existing implementation has a button visibility issue that couldn't be resolved through layout debugging.

**New Approach**: Instead of JavaScript-generated HTML, I want to:
1. Put the button HTML directly in architecture.html
2. Have JavaScript only update values, not render structure
3. Ensure buttons are in DOM before scripts load

**Start by**: Read SESSION_HANDOFF_2025-10-20_PRESSURE_MONITOR_ISSUE.md for context on what was tried, then propose a static HTML implementation that avoids the current rendering issues.

If User Wants Outside Help First

I need you to review a critical UI bug in the Tractatus Framework and determine if we need specialized CSS/browser expertise.

**Issue**: A button exists in the DOM but is invisible. Multiple layout fixes failed.

**Request**:
1. Read SESSION_HANDOFF_2025-10-20_PRESSURE_MONITOR_ISSUE.md
2. Analyze the attempted fixes and root cause hypotheses
3. Determine if this requires:
   - Specialized CSS debugging expertise
   - Browser compatibility testing
   - Alternative implementation approach
4. Recommend whether to continue debugging or rebuild differently

**Do NOT** attempt more CSS fixes without direct browser inspection access.

---

Key Points for New Session

What the New Session MUST DO

1. ✅ MUST READ: SESSION_HANDOFF_2025-10-20_PRESSURE_MONITOR_ISSUE.md
2. ✅ MUST HAVE: Browser access with dev tools for inspection
3. ✅ MUST CHECK: Computed styles, not just class names
4. ✅ MUST VERIFY: Actual rendered position and visibility

What the New Session MUST NOT DO

1. ❌ DO NOT try more Tailwind utility class variations
2. ❌ DO NOT add/remove overflow or height constraints blindly
3. ❌ DO NOT deploy without verifying locally in browser first
4. ❌ DO NOT assume console logs mean the UI is working

Success Criteria

• "Simulate Pressure Increase" button is visible on screen
• Button is clickable without scrolling
• Demo works on both local dev and production
• User confirms button visibility
• Remove debug logging after fix confirmed

---

Session Continuity Files

Must Read Before Starting

• SESSION_HANDOFF_2025-10-20_PRESSURE_MONITOR_ISSUE.md (This session's handoff)
• SESSION_HANDOFF_2025-10-19_PERFORMANCE_ACCESSIBILITY.md (Previous session context)

Key Technical Files

• public/architecture.html (Lines 373-383) - Container structure
• public/js/components/pressure-chart.js - Demo implementation with debug logs
• public/css/tractatus-theme.css - Check for gauge-fill-path or pressure-related styles

Testing URLs

• Local: http://localhost:9000/architecture.html (npm start should be running)
• Production: https://agenticgovernance.digital/architecture.html

---

Environment Setup Commands

# Verify local dev server running
curl -s http://localhost:9000/ -o /dev/null -w "%{http_code}\n"
# Should return 200

# If not running, start it:
npm start

# Check current git status
git status

# Check recent commits related to this issue
git log --oneline -10

# View current pressure chart container
curl -s http://localhost:9000/architecture.html | grep -A 10 'id="pressure-chart"'

---

Recommended Next Session Duration

Estimate: 30-60 minutes if browser inspection reveals clear issue Complexity: Medium (could be simple CSS fix or require rebuild) Dependencies: Requires browser access for inspection

---

Final Notes

This issue has consumed significant debugging cycles without resolution. The new session should take a fundamentally different approach - either hands-on browser inspection or complete reimplementation. Do not continue the same debugging pattern that has already failed multiple times.

The button works. It just doesn't render visibly. Something in the CSS cascade or browser rendering is preventing it from appearing.