feat: add job history tab with localStorage persistence (#31)
Some checks failed
CI / Typecheck & Lint (pull_request) Failing after 0s
Some checks failed
CI / Typecheck & Lint (pull_request) Failing after 0s
Add a bottom-sheet History panel that shows completed jobs in reverse chronological order with expandable results. - New history.js module: persists up to 50 jobs in localStorage (timmy_history_v1), renders rows with prompt/cost/relative-time, smooth expand/collapse animation, pull-to-refresh and refresh button - index.html: History panel HTML + CSS (bottom sheet slides up from bottom edge), "⏱ HISTORY" button added to top-buttons bar - payment.js: calls addHistoryEntry() when a Lightning job reaches complete or rejected state; tracks currentRequest across async flow - session.js: calls addHistoryEntry() after each session request completes, computing cost from balance delta - main.js: imports and calls initHistoryPanel() on first init Fixes #31 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Alexander Whitestone
@@ -599,6 +599,109 @@
|
||||
#activity-heatmap #heatmap-bar { display: none; }
|
||||
#heatmap-icon-btn { display: block; }
|
||||
}
|
||||
|
||||
/* ── History button ──────────────────────────────────────────────── */
|
||||
#open-history-btn {
|
||||
font-family: 'Courier New', monospace; font-size: 11px; font-weight: bold;
|
||||
color: #aabbdd; background: rgba(20, 16, 50, 0.85); border: 1px solid #2a2a44;
|
||||
padding: 7px 18px; cursor: pointer; letter-spacing: 2px;
|
||||
box-shadow: 0 0 14px #2244aa22;
|
||||
transition: background 0.15s, box-shadow 0.15s, color 0.15s;
|
||||
border-radius: 2px;
|
||||
min-height: 36px;
|
||||
}
|
||||
#open-history-btn:hover, #open-history-btn:active {
|
||||
background: rgba(35, 28, 80, 0.95);
|
||||
box-shadow: 0 0 20px #3355aa44;
|
||||
color: #ccddff;
|
||||
}
|
||||
|
||||
/* ── History panel (bottom sheet) ───────────────────────────────── */
|
||||
#history-panel {
|
||||
position: fixed; bottom: -100%; left: 0; right: 0;
|
||||
height: 70vh;
|
||||
background: rgba(5, 3, 12, 0.97);
|
||||
border-top: 1px solid #1a1a2e;
|
||||
z-index: 100;
|
||||
font-family: 'Courier New', monospace;
|
||||
transition: bottom 0.35s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
box-shadow: 0 -8px 32px rgba(40, 60, 120, 0.18);
|
||||
display: flex; flex-direction: column;
|
||||
}
|
||||
#history-panel.open { bottom: 60px; }
|
||||
|
||||
.hist-header {
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
padding: 14px 20px 10px;
|
||||
border-bottom: 1px solid #1a1a2e;
|
||||
font-size: 12px; letter-spacing: 3px; color: #5577aa;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.hist-header span { flex: 1; text-shadow: 0 0 8px #2244aa66; }
|
||||
#history-refresh-btn, #history-close {
|
||||
background: transparent; border: 1px solid #1a1a2e;
|
||||
color: #334466; font-family: 'Courier New', monospace;
|
||||
font-size: 11px; padding: 3px 10px; cursor: pointer;
|
||||
transition: color 0.2s, border-color 0.2s; letter-spacing: 1px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
#history-refresh-btn:hover { color: #5577aa; border-color: #334466; }
|
||||
#history-refresh-btn:disabled { opacity: 0.4; cursor: default; }
|
||||
#history-close { font-size: 14px; padding: 3px 8px; }
|
||||
#history-close:hover { color: #6688bb; border-color: #4466aa; }
|
||||
|
||||
#history-list {
|
||||
flex: 1; overflow-y: auto; padding: 12px 16px;
|
||||
overscroll-behavior: contain;
|
||||
}
|
||||
|
||||
.hist-empty {
|
||||
color: #334466; font-size: 11px; letter-spacing: 1px;
|
||||
line-height: 1.8; text-align: center;
|
||||
margin-top: 40px; padding: 0 20px;
|
||||
}
|
||||
|
||||
.hist-row {
|
||||
border: 1px solid #1a1a2e; border-radius: 2px;
|
||||
margin-bottom: 10px; overflow: hidden;
|
||||
background: #060310;
|
||||
}
|
||||
.hist-row.hist-rejected { border-color: #331111; }
|
||||
.hist-row-header {
|
||||
padding: 10px 12px; cursor: pointer;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
.hist-row-header:hover { background: rgba(30, 25, 60, 0.6); }
|
||||
.hist-prompt {
|
||||
color: #aabbdd; font-size: 12px; line-height: 1.5;
|
||||
display: -webkit-box; -webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical; overflow: hidden;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.hist-meta {
|
||||
display: flex; gap: 12px; align-items: center;
|
||||
}
|
||||
.hist-cost { font-size: 10px; color: #ffcc44; letter-spacing: 1px; }
|
||||
.hist-rejected .hist-cost { color: #994444; }
|
||||
.hist-time { font-size: 10px; color: #334466; letter-spacing: 0.5px; flex: 1; }
|
||||
.hist-chevron { font-size: 10px; color: #334466; transition: color 0.15s; }
|
||||
.hist-row-header:hover .hist-chevron { color: #5577aa; }
|
||||
|
||||
.hist-row-body {
|
||||
max-height: 0; overflow: hidden;
|
||||
transition: max-height 0.3s ease-out;
|
||||
}
|
||||
.hist-row.expanded .hist-row-body {
|
||||
max-height: 400px;
|
||||
border-top: 1px solid #1a1a2e;
|
||||
}
|
||||
.hist-result {
|
||||
color: #aabbdd; font-family: 'Courier New', monospace;
|
||||
font-size: 11px; line-height: 1.6;
|
||||
white-space: pre-wrap; word-break: break-word;
|
||||
padding: 12px; margin: 0;
|
||||
max-height: 400px; overflow-y: auto;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -640,6 +743,7 @@
|
||||
<div id="top-buttons">
|
||||
<button id="open-panel-btn">⚡ SUBMIT JOB</button>
|
||||
<button id="open-session-btn">⚡ FUND SESSION</button>
|
||||
<button id="open-history-btn">⏱ HISTORY</button>
|
||||
<a id="relay-admin-btn" href="/admin/relay">⚙ RELAY ADMIN</a>
|
||||
</div>
|
||||
|
||||
@@ -789,6 +893,16 @@
|
||||
<div id="session-error"></div>
|
||||
</div>
|
||||
|
||||
<!-- ── History panel (bottom sheet) ─────────────────────────────── -->
|
||||
<div id="history-panel">
|
||||
<div class="hist-header">
|
||||
<span>⏱ JOB HISTORY</span>
|
||||
<button id="history-refresh-btn">↺ REFRESH</button>
|
||||
<button id="history-close">✕</button>
|
||||
</div>
|
||||
<div id="history-list"></div>
|
||||
</div>
|
||||
|
||||
<!-- ── FPS crosshair ─────────────────────────────────────────────── -->
|
||||
<div id="crosshair"></div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user