perplexity/Timmy-time-dashboard
Archived
1
0
Fork 0
forked from Rockachopa/Timmy-time-dashboard
Code Issues Pull Requests 1 Activity

feat(matrix-ui): add Fund Session modal with explanatory text about sats

Browse Source 
- Add Fund Session button to Matrix UI overlay (green plus icon)
- Create modal with three explanatory sections:
  * What are Sats? - explains satoshis as smallest Bitcoin unit
  * Why Fund Your Session? - explains how sats power Workshop AI agents
  * Approximate Costs - shows cost ranges for different interaction types
- Add input field for funding amount (min 100 sats)
- Style modal with green theme to match Lightning/sats concept
- Add proper keyboard support (Enter to submit, Escape to close)
- Mobile-responsive design

Fixes #753
This commit is contained in:
kimi
2026-03-21 18:21:00 -04:00
parent e99b09f700
commit 36de0b491d
2 changed files with 410 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
static/world/index.html
View File

@@ -20,11 +20,76 @@
<line x1="12" y1="8" x2="12.01" y2="8"></line>
</svg>
</button>
<button id="fund-btn" class="fund-button" aria-label="Fund Session" title="Fund Session">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 2v20M2 12h20"></path>
</svg>
</button>
<div id="speech-area">
<div class="bubble" id="speech-bubble"></div>
</div>
</div>
<!-- Fund Session Modal -->
<div id="fund-modal" class="fund-modal">
<div class="fund-modal-content">
<button id="fund-close" class="fund-close" aria-label="Close">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line>
</svg>
</button>
<h2>Fund Session</h2>
<section class="fund-info">
<h3>⚡ What are Sats?</h3>
<p><strong>Sats</strong> (satoshis) are the smallest unit of Bitcoin—like cents to a dollar. There are 100 million sats in 1 bitcoin. They enable tiny payments perfect for AI interactions.</p>
</section>
<section class="fund-info">
<h3>🛠️ Why Fund Your Session?</h3>
<p>Your sats power the Workshop AI agents. When you fund a session:</p>
<ul>
<li>Timmy and the agent swarm can process your requests</li>
<li>You get priority access to compute resources</li>
<li>Agents are compensated for their work</li>
</ul>
</section>
<section class="fund-info">
<h3>💰 Approximate Costs</h3>
<div class="cost-table">
<div class="cost-row">
<span>Simple chat message</span>
<span class="cost-value">~10-50 sats</span>
</div>
<div class="cost-row">
<span>Code generation task</span>
<span class="cost-value">~100-500 sats</span>
</div>
<div class="cost-row">
<span>Complex multi-agent job</span>
<span class="cost-value">~1,000-5,000 sats</span>
</div>
</div>
<p class="cost-note">Costs vary based on model and complexity. Unused sats remain in your balance.</p>
</section>
<div class="fund-actions">
<div class="fund-input-group">
<label for="fund-amount">Amount (sats)</label>
<input type="number" id="fund-amount" class="fund-input" placeholder="1000" min="100" step="100">
</div>
<button id="fund-submit" class="fund-submit-btn">Fund Session</button>
</div>
<div class="fund-footer">
<span>⚡ Lightning Network · No subscriptions · Pay as you go</span>
</div>
</div>
<div id="fund-backdrop" class="fund-backdrop"></div>
</div>
<!-- About Panel -->
<div id="about-panel" class="about-panel">
<div class="about-panel-content">
@@ -119,6 +184,50 @@
});
stateReader.connect();
// --- Fund Session Modal ---
const fundBtn = document.getElementById("fund-btn");
const fundModal = document.getElementById("fund-modal");
const fundClose = document.getElementById("fund-close");
const fundBackdrop = document.getElementById("fund-backdrop");
const fundSubmit = document.getElementById("fund-submit");
const fundAmount = document.getElementById("fund-amount");
function openFundModal() {
fundModal.classList.add("open");
document.body.style.overflow = "hidden";
// Focus the input when opening
setTimeout(() => fundAmount.focus(), 100);
}
function closeFundModal() {
fundModal.classList.remove("open");
document.body.style.overflow = "";
}
function handleFundSubmit() {
const amount = parseInt(fundAmount.value, 10);
if (!amount || amount < 100) {
alert("Please enter a valid amount (minimum 100 sats)");
return;
}
// TODO: Integrate with Lightning payment API
console.log("Funding session with", amount, "sats");
alert("Lightning payment integration coming soon! Amount: " + amount + " sats");
closeFundModal();
}
fundBtn.addEventListener("click", openFundModal);
fundClose.addEventListener("click", closeFundModal);
fundBackdrop.addEventListener("click", closeFundModal);
fundSubmit.addEventListener("click", handleFundSubmit);
// Allow Enter key to submit
fundAmount.addEventListener("keypress", (e) => {
if (e.key === "Enter") {
handleFundSubmit();
}
});
// --- About Panel ---
const infoBtn = document.getElementById("info-btn");
const aboutPanel = document.getElementById("about-panel");
@@ -141,8 +250,12 @@
// Close on Escape key
document.addEventListener("keydown", (e) => {
if (e.key === "Escape" && aboutPanel.classList.contains("open")) {
closeAboutPanel();
if (e.key === "Escape") {
if (fundModal.classList.contains("open")) {
closeFundModal();
} else if (aboutPanel.classList.contains("open")) {
closeAboutPanel();
}
}
});