feat(ui): redesign with modern styling and resource display

UI Improvements:
- Add gradient backgrounds to all components
- Add smooth hover/active animations with transforms
- Add subtle shadows and glow effects
- Add animated progress bar shimmer effect
- Add gradient logo with text fill

Button Redesign:
- Add gradient backgrounds and hover effects
- Add shadow on hover with lift animation
- Add btn-xs size for compact buttons
- Improve Kill All button styling

Session Cards:
- Show resource usage (memory, messages)
- Color-coded usage indicators (green/yellow/red)
- Add kill button per session
- Click to switch active session and load terminal

Process Management:
- Add Kill All Sessions button in panel header
- Add killAllSessions() and deleteSession() methods
- Add formatBytes() helper for display
- Add selectSession() to switch between sessions

Performance:
- Add requestAnimationFrame batching for terminal writes
- Smooth 60fps rendering with write batching

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
arkon
2026-01-18 21:36:37 +01:00
co-authored by Claude Opus 4.5
parent 4712af433c
commit 09877c66b2
3 changed files with 506 additions and 83 deletions
+8 -3
View File
@@ -242,9 +242,14 @@
<!-- Sessions Panel (collapsible) -->
<aside class="sessions-panel" id="sessionsPanel">
<div class="sessions-header" onclick="app.toggleSessions()">
<h3>Sessions <span class="session-count" id="sessionCount">0</span></h3>
<span class="toggle-icon" id="toggleIcon">▼</span>
<div class="sessions-header">
<div class="sessions-header-left" onclick="app.toggleSessions()">
<h3>Sessions <span class="session-count" id="sessionCount">0</span></h3>
<span class="toggle-icon" id="toggleIcon">▼</span>
</div>
<button class="btn btn-sm btn-danger kill-all-btn" onclick="event.stopPropagation(); app.killAllSessions()" title="Kill all sessions">
✕ Kill All
</button>
</div>
<div class="sessions-list" id="sessionsList"></div>
</aside>