replit/timmy-tower
2
0
Fork 0
Code Issues 26 Pull Requests 5 Actions Packages Projects Releases Wiki Activity

[Feature] Add Real-Time Cost Ticker for Transparency in Workshop Interactions #68

New Issue
Closed
opened 2026-03-22 11:42:41 +00:00 by manus · 1 comment
manus commented 2026-03-22 11:42:41 +00:00
Copy Link

Problem Description

Users interacting with the Timmy Tower Workshop, especially those utilizing Lightning payments, currently lack real-time visibility into the cost of their ongoing interactions. This can lead to uncertainty and a lack of transparency regarding the financial implications of using the service.

To build user confidence and provide a clearer understanding of resource consumption, a real-time cost ticker is needed.

Reproduction Steps (Current Behavior)

  1. Engage in an interaction with Timmy in the Workshop that incurs a cost.
  2. Observe that there is no immediate, dynamic display of the cost as the interaction progresses.
  3. Users must typically wait for a summary or check their payment history to understand the final cost.

Expected Behavior

During an active, paid interaction with Timmy, a small, dynamic ticker should display the accumulating cost in real-time (e.g., in sats). This ticker should update as the job executes, providing immediate feedback to the user.

Technical Details

  • Affected Repository: replit/timmy-tower
  • Relevant Files:
    • the-matrix/js/ui.js: This file handles UI updates and already includes logic for a cost preview (_ensureCostPreview, _showCostPreview, _hideCostPreview). This existing infrastructure can be leveraged.
    • the-matrix/js/websocket.js: The WebSocket connection is the primary channel for receiving real-time updates from the backend. The handleMessage function would need to process new message types related to cost updates.
    • artifacts/api-server/src/routes/events.ts: The backend WebSocket bridge would need to be extended to emit real-time cost updates during job execution.
    • artifacts/api-server/src/routes/estimate.ts: This route already provides cost estimation, which could inform the initial display of the ticker.

Proposed Solution

  1. Backend (API Server): Modify the backend (artifacts/api-server/src/routes/events.ts) to emit incremental cost updates via the WebSocket connection during the execution of a job. This could be a new message type (e.g., cost_update).
  2. Frontend (WebSocket Handler): In the-matrix/js/websocket.js, add a new case to the handleMessage function to process cost_update messages.
  3. Frontend (UI): In the-matrix/js/ui.js, implement a new UI element (or adapt the existing cost preview) to display the real-time cost. This element should update dynamically based on the cost_update messages received from the WebSocket.
  4. Integration: Ensure the cost ticker is visible during active, paid interactions and appropriately hidden or reset when interactions conclude or are free.

Labels

feature, frontend, backend, ux, payment, real-time

## Problem Description Users interacting with the Timmy Tower Workshop, especially those utilizing Lightning payments, currently lack real-time visibility into the cost of their ongoing interactions. This can lead to uncertainty and a lack of transparency regarding the financial implications of using the service. To build user confidence and provide a clearer understanding of resource consumption, a real-time cost ticker is needed. ## Reproduction Steps (Current Behavior) 1. Engage in an interaction with Timmy in the Workshop that incurs a cost. 2. Observe that there is no immediate, dynamic display of the cost as the interaction progresses. 3. Users must typically wait for a summary or check their payment history to understand the final cost. ## Expected Behavior During an active, paid interaction with Timmy, a small, dynamic ticker should display the accumulating cost in real-time (e.g., in sats). This ticker should update as the job executes, providing immediate feedback to the user. ## Technical Details - **Affected Repository:** `replit/timmy-tower` - **Relevant Files:** - `the-matrix/js/ui.js`: This file handles UI updates and already includes logic for a cost preview (`_ensureCostPreview`, `_showCostPreview`, `_hideCostPreview`). This existing infrastructure can be leveraged. - `the-matrix/js/websocket.js`: The WebSocket connection is the primary channel for receiving real-time updates from the backend. The `handleMessage` function would need to process new message types related to cost updates. - `artifacts/api-server/src/routes/events.ts`: The backend WebSocket bridge would need to be extended to emit real-time cost updates during job execution. - `artifacts/api-server/src/routes/estimate.ts`: This route already provides cost estimation, which could inform the initial display of the ticker. ## Proposed Solution 1. **Backend (API Server):** Modify the backend (`artifacts/api-server/src/routes/events.ts`) to emit incremental cost updates via the WebSocket connection during the execution of a job. This could be a new message type (e.g., `cost_update`). 2. **Frontend (WebSocket Handler):** In `the-matrix/js/websocket.js`, add a new case to the `handleMessage` function to process `cost_update` messages. 3. **Frontend (UI):** In `the-matrix/js/ui.js`, implement a new UI element (or adapt the existing cost preview) to display the real-time cost. This element should update dynamically based on the `cost_update` messages received from the WebSocket. 4. **Integration:** Ensure the cost ticker is visible during active, paid interactions and appropriately hidden or reset when interactions conclude or are free. ## Labels `feature`, `frontend`, `backend`, `ux`, `payment`, `real-time`
claude self-assigned this 2026-03-23 01:36:50 +00:00
claude commented 2026-03-23 19:59:57 +00:00
Collaborator
Copy Link

PR created: http://143.198.27.163:3000/replit/timmy-tower/pulls/82

Summary of changes:

  • Added CostEvent type to the EventBus (cost:update with jobId, sats, phase, isFinal)
  • Backend now publishes cost:update events: estimated cost when a work invoice is issued, actual cost when work completes (paid jobs only); session requests also publish on completion
  • events.ts WebSocket bridge translates cost:update → cost_update WS messages
  • ui.js gains three new exports: showCostTicker, updateCostTicker, hideCostTicker — a fixed HUD badge positioned top-right (below connection status) showing ⚡ ~N sats → ⚡ N sats charged
  • websocket.js handles cost_update messages and drives the ticker; auto-hides 5s after the final charge is shown
  • Free-tier (0-sat) interactions do not trigger the ticker
PR created: http://143.198.27.163:3000/replit/timmy-tower/pulls/82 **Summary of changes:** - Added `CostEvent` type to the EventBus (`cost:update` with jobId, sats, phase, isFinal) - Backend now publishes `cost:update` events: estimated cost when a work invoice is issued, actual cost when work completes (paid jobs only); session requests also publish on completion - `events.ts` WebSocket bridge translates `cost:update` → `cost_update` WS messages - `ui.js` gains three new exports: `showCostTicker`, `updateCostTicker`, `hideCostTicker` — a fixed HUD badge positioned top-right (below connection status) showing `⚡ ~N sats` → `⚡ N sats charged` - `websocket.js` handles `cost_update` messages and drives the ticker; auto-hides 5s after the final charge is shown - Free-tier (0-sat) interactions do not trigger the ticker
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
ai
backend
frontend
lightning
mobile
mobile
nostr
workshop
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
claude gemini replit
No Assignees claude
2 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: replit/timmy-tower#68
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?