sjs/vibetunnel
1
0
Fork 0
mirror of https://github.com/samsonjs/vibetunnel.git synced 2026-06-28 05:29:29 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Improve session card UI with asciinema players

Browse source 
- Add proper card layout with compact header and footer
- Auto-load asciinema players for all sessions
- Change aspect ratio to 640/480 for better terminal display
- Fix z-index issues with file browser overlays
- Center and fit players within card bounds
- Change kill button from 'x' to 'kill' with loading state
- Remove session list header and borders for more space

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Mario Zechner 2025-06-16 03:49:29 +02:00
parent fdd6c33289
commit 920b040b61
3 changed files with 25 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
web/src/client/components/file-browser.ts
View file

@ -84,7 +84,7 @@ export class FileBrowser extends LitElement {
}
return html`
<div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center">
<div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center" style="z-index: 9999;">
<div class="bg-vs-bg-secondary border border-vs-border font-mono text-sm w-96 h-96">
<div class="p-4 border-b border-vs-border">
<div class="text-vs-assistant text-sm mb-2">Select Directory</div>

13
web/src/client/components/session-list.ts
View file

@ -166,23 +166,20 @@ export class SessionList extends LitElement {
<div class="flex justify-between items-center px-3 py-2 border-b border-vs-border">
<div class="text-vs-text text-xs font-mono truncate pr-2 flex-1">${session.command}</div>
<button
class="bg-vs-warning text-vs-bg hover:bg-vs-highlight font-mono px-1 py-0.5 border-none text-xs disabled:opacity-50 flex-shrink-0 rounded"
class="bg-vs-warning text-vs-bg hover:bg-vs-highlight font-mono px-2 py-0.5 border-none text-xs disabled:opacity-50 flex-shrink-0 rounded"
@click=${(e: Event) => this.handleKillSession(e, session.id)}
?disabled=${this.killingSessionIds.has(session.id)}
>
${this.killingSessionIds.has(session.id) ? '...' : 'x'}
${this.killingSessionIds.has(session.id) ? 'killing...' : 'kill'}
</button>
</div>
<!-- Asciinema player (main content) -->
<div class="session-preview">
<div class="session-preview bg-black flex items-center justify-center" style="aspect-ratio: 640/480;">
${this.loadedSnapshots.has(session.id) ? html`
<div id="player-${session.id}" class="bg-black" style="height: 120px; overflow: hidden;"></div>
<div id="player-${session.id}" class="w-full h-full" style="overflow: hidden;"></div>
` : html`
<div
class="bg-black flex items-center justify-center text-vs-muted text-xs"
style="height: 120px;"
>
<div class="text-vs-muted text-xs">
${this.loadingSnapshots.has(session.id) ? 'Loading...' : 'Loading...'}
</div>
`}

27
web/src/input.css
View file

@ -4,15 +4,15 @@
/* Fix asciinema player dimensions */
.ap-player {
min-width: 640px !important;
min-height: 480px !important;
min-width: unset !important;
min-height: unset !important;
width: auto !important;
height: auto !important;
}
.asciinema-player-theme-asciinema {
min-width: 640px !important;
min-height: 480px !important;
min-width: unset !important;
min-height: unset !important;
width: auto !important;
height: auto !important;
}
@ -47,16 +47,27 @@
/* Force asciinema player to fit within session card bounds */
.session-preview .asciinema-player,
.session-preview .ap-player {
min-width: unset !important;
min-height: unset !important;
max-width: 100% !important;
max-height: 120px !important;
max-height: 100% !important;
width: 100% !important;
height: 120px !important;
height: 100% !important;
overflow: hidden !important;
z-index: 0 !important;
object-fit: contain !important;
}
.session-preview .asciinema-player .ap-screen,
.session-preview .ap-player .ap-screen {
transform-origin: top left !important;
transform-origin: center center !important;
max-width: 100% !important;
max-height: 120px !important;
max-height: 100% !important;
z-index: 1 !important;
object-fit: contain !important;
}
.session-preview .asciinema-player *,
.session-preview .ap-player * {
z-index: 1 !important;
}