alexpaynex
|
c7e3a9b853
|
Task #23: Workshop session mode UI — fund once, ask many (all review issues fixed)
## Changes
### the-matrix/js/session.js (new module)
- Full session lifecycle: create → invoice → deposit poll → active → request → topup → restore
- Presets + number input for deposit (200–10,000 sats) and topup amounts; reads from input on submit
- Input validation: 200–10,000 sats range enforced in JS before API call
- Auto-closes panel after deposit payment confirms (closePanel in _startDepositPolling success branch)
- Low-balance condition fixed: `isSessionActive()` (covers both 'active' and 'paused') not just `active`
- HUD: updates `#session-hud-balance` span with "Balance: X sats"; `#session-hud-topup` link clickable
- Topup reads from `#session-topup-input` number field, same validation
- localStorage restore: validates session via GET, restores macaroon + balance + UI state on reload
- Expired/401 sessions: clears storage, resets all UI
- Request in-flight guard prevents double-submit; send button disabled during request
### the-matrix/js/ui.js
- `setSessionSendHandler(fn)` — override input bar submit when session active
- `setInputBarSessionMode(active, placeholder)` — green border + placeholder swap
- `send()` routes to session handler when set, falls back to WS visitor_message
### the-matrix/index.html
- `#top-buttons` flex container: "⚡ SUBMIT JOB" (blue) + "⚡ FUND SESSION" (teal) side-by-side
- `#session-hud` with `#session-hud-balance` span + `#session-hud-topup` link (pointer-events: all)
- `#session-panel` (left slide-in): fund / invoice / active / topup steps
- Fund + topup steps each have preset buttons AND a number input (200–10k range)
- Added 10k preset button to both step grids
- `#visitor-input.session-active` green pulse border animation (3s keyframe)
- `#low-balance-notice` strip above input bar with inline Top Up button
- CSS: `.session-amount-input` green styled, spin buttons hidden; `.session-amount-row` flex layout
- CSS: `.primary-green` / `.muted` panel button variants for session panel theme
### the-matrix/js/main.js
- Import + call `initSessionPanel()` in firstInit block
## Verification
- npm run build: clean (0 errors, 15 modules)
- Testkit: 27/27 PASS (session tests 11–16, 22 all green)
|
2026-03-19 03:56:34 +00:00 |
|
alexpaynex
|
ad5ac0861d
|
Task #23: Workshop session mode UI — fund once, ask many
## What was done
- **`the-matrix/js/session.js`** (new module): Full session mode UI lifecycle:
- Create session flow: amount presets → POST /api/sessions → deposit invoice step
- Deposit payment: stub simulate → 2s polling until state=active
- macaroon + sessionId stored in localStorage (`timmy_session_v1`)
- Request submission: intercepts input bar when session active → POST /api/sessions/:id/request
→ Timmy speech bubble shows result, balance updates in HUD
- Low-balance (< 50 sats): paused state, low-balance notice shown, topup quick-button
- Topup flow: preset amount → POST /api/sessions/:id/topup → topup invoice → stub pay → poll
- Restore from localStorage on page reload: validates session via GET, restores full UI state
- Session expiry / 401 macaroon rejection: clears storage, resets to unfunded state
- **`the-matrix/js/ui.js`**: Added `setSessionSendHandler(fn)` + `setInputBarSessionMode(active, placeholder)` exports; send() routes to session handler when active, falls back to WS visitor_message
- **`the-matrix/index.html`**:
- `#top-buttons` flex container: "⚡ SUBMIT JOB" (blue) + "⚡ FUND SESSION" (teal) side-by-side
- `#session-hud` balance line in HUD (green, hidden until session active)
- `#session-panel` left-side slide-in panel: fund / invoice / active / topup steps
- `.session-amount-btn` presets (200, 500, 1000, 2000, 5000 sats) with active state
- `#visitor-input.session-active` CSS: green border + 3s pulse keyframe animation
- `#low-balance-notice` strip above input bar with Top Up quick-button
- `.primary-green` / `.muted` panel button variants for session panel theme
- `#session-panel` inherits shared `.panel-btn`, `.invoice-box`, `.copy-btn` with green overrides
- **`the-matrix/js/main.js`**: Import + call `initSessionPanel()` in firstInit block
## Verification
- `npm run build` in the-matrix → clean build (0 errors)
- Full testkit: 27/27 PASS (all session tests 11–16, 22 still green)
|
2026-03-19 03:50:34 +00:00 |
|
