From 0b26e50e5b35864408a03ac028fc815cc026edf0 Mon Sep 17 00:00:00 2001 From: TheFlow Date: Tue, 7 Oct 2025 11:57:51 +1300 Subject: [PATCH] feat: add interactive demonstrations for Tractatus framework MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Implemented three fully functional interactive demos showcasing the core Tractatus services in action. ## Interactive Demonstrations ### 1. Classification Demo (/demos/classification-demo.html) - **Purpose**: Demonstrate InstructionPersistenceClassifier - **Features**: - Real-time instruction classification - Visual quadrant display (STRATEGIC/OPERATIONAL/TACTICAL/SYSTEM/STOCHASTIC) - Persistence level visualization (HIGH/MEDIUM/LOW/VARIABLE) - Explicitness scoring with storage threshold - 5 example instructions for testing - **Educational Value**: Shows how instructions are analyzed and categorized ### 2. The 27027 Incident (/demos/27027-demo.html) - **Purpose**: Visualize real-world failure and Tractatus prevention - **Features**: - 8-step animated timeline - Progressive disclosure of incident - Code examples showing the error - Tractatus prevention mechanism explained - Playback controls with progress tracking - **Educational Value**: Concrete case study of context degradation failure ### 3. Boundary Enforcement Simulator (/demos/boundary-demo.html) - **Purpose**: Interactive decision boundary testing - **Features**: - 6 realistic scenarios (3 allowed, 3 blocked) - Real-time boundary checks - Visual ALLOWED/BLOCKED verdicts - Reasoning explanations - Alternative approaches for blocked decisions - Code examples for each scenario - **Educational Value**: Shows what can/cannot be automated ## Technical Implementation - **Pure JavaScript**: No frameworks, lightweight and fast - **Tailwind CSS**: Consistent styling across all demos - **Responsive Design**: Works on mobile and desktop - **Accessibility**: Semantic HTML, keyboard navigation - **Mock Data**: Uses realistic classification logic ## User Experience Each demo includes: - Clear navigation between demos - Educational context and explanations - Interactive elements for hands-on learning - Code examples showing actual framework usage - Visual feedback for all interactions ## Documentation Integration Demos linked from: - Homepage hero section - Interactive demos section - Framework documentation ## Next Steps These demos provide: 1. ✅ Tangible framework demonstration 2. ✅ Educational value for all three audiences 3. ✅ Marketing material for framework adoption 4. ⚠️ Foundation for video tutorials (future) 5. ⚠️ Basis for conference presentations (future) --- 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- public/demos/27027-demo.html | 356 ++++++++++++++++++++++ public/demos/boundary-demo.html | 411 ++++++++++++++++++++++++++ public/demos/classification-demo.html | 362 +++++++++++++++++++++++ 3 files changed, 1129 insertions(+) create mode 100644 public/demos/27027-demo.html create mode 100644 public/demos/boundary-demo.html create mode 100644 public/demos/classification-demo.html diff --git a/public/demos/27027-demo.html b/public/demos/27027-demo.html new file mode 100644 index 00000000..7f2d1708 --- /dev/null +++ b/public/demos/27027-demo.html @@ -0,0 +1,356 @@ + + + + + + The 27027 Incident - Tractatus Framework + + + + + + + + +
+ + +
+

+ The 27027 Incident +

+

+ A real-world failure mode where AI contradicted an explicit instruction, + and how the Tractatus framework would have prevented it. +

+
+ + +
+ +
+
+ +
+
+ + +
+
+

Playback Controls

+ +
+ + +
+ + + + +
+

Legend:

+
+
+
+ Pending +
+
+
+ Active +
+
+
+ Complete +
+
+
+ Error +
+
+
+
+
+
+ + +
+

Why This Matters

+

+ The 27027 incident represents a class of failures where AI systems contradict explicit instructions + due to context degradation, attention decay, or simple forgetfulness. These failures can cause: +

+
    +
  • • Production outages (2+ hours debugging)
    • +
  • • Deployment blockers
    • +
  • • Loss of trust in AI assistants
    • +
  • • Wasted development time
    • +
+

+ Tractatus prevents this entirely through persistent instruction storage and + cross-reference validation before code execution. +

+
+
+ + + + + diff --git a/public/demos/boundary-demo.html b/public/demos/boundary-demo.html new file mode 100644 index 00000000..a938ce8a --- /dev/null +++ b/public/demos/boundary-demo.html @@ -0,0 +1,411 @@ + + + + + + Boundary Enforcement Simulator - Tractatus Framework + + + + + + + +
+ + +
+

+ Boundary Enforcement Simulator +

+

+ See how the Tractatus framework distinguishes between decisions that can be + automated and those that require human judgment. +

+
+ + +
+ + +
+

Test Scenarios

+ +
+

Optimize Image Loading

+

Implement lazy loading and compression for better performance

+ Technical Decision +
+ +
+

Enable Analytics Tracking

+

Add Google Analytics to track user behavior and improve UX

+ Values Decision +
+ +
+

Auto-Subscribe Users

+

Automatically subscribe new users to the newsletter (with opt-out)

+ User Agency +
+ +
+

Delete Old User Data

+

Automatically delete user data older than 6 months to save storage

+ Irreversible +
+ +
+

Implement Caching Strategy

+

Add Redis caching for frequently accessed data

+ Technical Decision +
+ +
+

Automatic Content Moderation

+

AI automatically removes content deemed inappropriate

+ Values Decision +
+
+ + +
+
+

Boundary Check Result

+ +
+ + + +

Select a scenario to see boundary check

+
+ + +
+
+
+ + +
+

The Tractatus Boundary

+
+ "Whereof one cannot speak, thereof one must be silent." +
— Ludwig Wittgenstein +
+

+ Applied to AI: "What cannot be systematized must not be automated." +

+
+
+

✅ Can Be Automated:

+
    +
  • • Calculations and logic
    • +
  • • Data transformations
    • +
  • • Pattern matching
    • +
  • • Technical optimizations
    • +
  • • Implementation of specifications
    • +
+
+
+

🚫 Requires Human Judgment:

+
    +
  • • Values decisions (privacy, ethics)
    • +
  • • User agency choices
    • +
  • • Cultural context
    • +
  • • Irreversible consequences
    • +
  • • Unprecedented situations
    • +
+
+
+
+
+ + + + + diff --git a/public/demos/classification-demo.html b/public/demos/classification-demo.html new file mode 100644 index 00000000..f305aea6 --- /dev/null +++ b/public/demos/classification-demo.html @@ -0,0 +1,362 @@ + + + + + + Instruction Classification Demo - Tractatus Framework + + + + + + + + +
+ + +
+

+ InstructionPersistenceClassifier Demo +

+

+ See how the Tractatus framework classifies instructions to determine + how long they should persist and how strictly they should be enforced. +

+
+ + +
+ + +
+

Try It Yourself

+ +
+ + +
+ + + + +
+

Example Instructions:

+
+ + + + + +
+
+
+ + +
+

Classification Results

+ + + +
+ + + +

Enter an instruction to see classification

+
+
+
+ + +
+

How It Works

+

+ The InstructionPersistenceClassifier analyzes instructions to determine: +

+
    +
  • + • + Quadrant: Strategic, Operational, Tactical, System, or Stochastic +
    • +
  • + • + Persistence: How long it should remain active (HIGH/MEDIUM/LOW/VARIABLE) +
    • +
  • + • + Temporal Scope: Project-wide, phase-specific, or session-only +
    • +
  • + • + Verification: How strictly it should be enforced +
    • +
  • + • + Explicitness: How clear and specific the instruction is (0.0 - 1.0) +
    • +
+

+ Only instructions with explicitness ≥ 0.6 are stored in the persistent database. +

+
+
+ + + + +