Build interactive context window slider as Promptulus landing page

[nate-layman]

Summary

Build an interactive context window balance widget as the first thing users see when they open Promptulus. This is the landing page that frames the entire experience before users pick a character.

What it teaches

Your AI has a page limit. The context window is finite. Four things compete for that space: intent, instructions, information, and conversation. You can't add more space, only reallocate it. Different tasks need different balances.

Widget spec

One horizontal bar, fixed width (100% of container), divided into four colored regions with three draggable divider handles between them.

┌──────────┬───────────────┬───────────────┬──────────────┐
│  INTENT  │  INSTRUCTIONS │  INFORMATION  │ CONVERSATION │
│  (teal)  │  (amber)      │  (indigo)     │  (coral)     │
└──────────┴───────────────┴───────────────┴──────────────┘
         ↑               ↑               ↑
       drag            drag            drag

Behavior

• Fixed-width bar = the "page limit." Total always sums to 100%.
• Three draggable handles between the four regions.
• Dragging a handle resizes its two adjacent regions — growing one shrinks the neighbor.
• Each region shows label + percentage when wide enough. Just percentage or character icon when narrow.
• Colors should match the four context window characters:
  • Intent (teal) → Telosa the Turtle
  • Instructions (amber) → Promptulus the Owl
  • Information (indigo) → Mnemos the Elephant
  • Conversation (coral) → Dialogos the Parrot

Preset buttons

Buttons below the bar that animate the dividers to common task-type balances:

Preset	Intent	Instructions	Information	Conversation
Compliance review	40%	20%	30%	10%
Draft a description	10%	25%	50%	15%
Iterative editing	10%	15%	20%	55%
New task scoping	50%	15%	20%	15%

Character link

When a user clicks a character icon in the Promptulus app, the corresponding region in the bar glows or brightens — showing "this is the part of the window I teach you to use well." This connects the abstract concept to the character they're about to interact with.

Where it lives

This is the Promptulus landing page — the first view before any character is selected. Flow:

1. User opens Promptulus
2. Sees the bar widget with the headline "Your AI has a page limit"
3. Plays with the slider, clicks presets to see how different tasks allocate the window differently
4. Clicks a character icon → that character's region highlights → transitions into the character's chat interface

Implementation notes

This is an R Shiny app. Options:

• Custom shiny::tags$div with vanilla JS pointer events for drag handling (best UX)
• htmlwidgets wrapper
• Fallback: three shiny::sliderInput values on a shared 0–100 scale (functional but less visual)

The JS drag approach is recommended. Could use vanilla JS with pointer events — no external library needed.

Context

• Related to Add intent engineering and conversation management characters; reframe as context window disciplines #9 (character expansion and landing page framing)
• Workshop: REACH 2026, Role 2 (Nate Layman), live demo for 24 research analytics participants
• The widget reinforces the "page limit" concept from the blog post "AI Has a Page Limit"
• Participants are research analytics professionals who think in terms of budgets and allocations — this maps directly to that mental model