tksadik92/wrenn-releases
1
0
Fork 0
forked from wrenn/wrenn
Code Pull Requests Activity

Polish terminal tab: merge status bar into tab strip, normalize sizing

Browse Source 
- Merge separate status bar into unified tab bar (one row of chrome instead of two)
- Bump font/button/icon sizes to match rest of capsule page
- VS Code-style tab separators with intelligent hiding around active tab
- Hide tab bar when no sessions exist (empty state has its own CTA)
- Fix xterm background gaps by painting viewport/screen backgrounds
- Increase terminal font from 13px to 14px
This commit is contained in:
Rafeed M. Bhuiyan
2026-04-11 05:10:46 +06:00
parent 4b2ff279f7
commit acc721526d
1 changed files with 92 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

157
frontend/src/lib/components/TerminalTab.svelte
View File

@ -148,8 +148,8 @@
cursorStyle: 'bar', cursorStyle: 'bar',
cursorInactiveStyle: 'outline', cursorInactiveStyle: 'outline',
fontFamily: "'JetBrains Mono Variable', 'JetBrains Mono', monospace", fontFamily: "'JetBrains Mono Variable', 'JetBrains Mono', monospace",
fontSize: 13, fontSize: 14,
lineHeight: 1.4, lineHeight: 1.35,
letterSpacing: 0, letterSpacing: 0,
theme: TERM_THEME, theme: TERM_THEME,
allowProposedApi: true, allowProposedApi: true,
@ -360,6 +360,11 @@
padding: 12px 4px 12px 16px; padding: 12px 4px 12px 16px;
height: 100%; height: 100%;
} }
/* Paint xterm's own background to cover any fractional-pixel gaps */
.terminal-container :global(.xterm-viewport),
.terminal-container :global(.xterm-screen) {
background-color: #0a0c0b !important;
}
.terminal-container :global(.xterm-viewport) { .terminal-container :global(.xterm-viewport) {
scrollbar-width: thin; scrollbar-width: thin;
scrollbar-color: rgba(94, 140, 88, 0.18) transparent; scrollbar-color: rgba(94, 140, 88, 0.18) transparent;
@ -383,27 +388,50 @@
.tab-scroll::-webkit-scrollbar { .tab-scroll::-webkit-scrollbar {
display: none; display: none;
} }
.term-tab {
position: relative;
}
.term-tab::after {
content: '';
position: absolute;
right: 0;
top: 25%;
bottom: 25%;
width: 1px;
background: var(--color-border);
}
.term-tab:last-child::after {
display: none;
}
.term-tab-active::after {
display: none;
}
/* Hide separator on tab right before active tab */
.term-tab:has(+ .term-tab-active)::after {
display: none;
}
</style> </style>
<div class="flex flex-1 flex-col min-h-0"> <div class="flex flex-1 flex-col min-h-0">
{#if !isRunning} {#if !isRunning}
<div class="flex flex-1 items-center justify-center"> <div class="flex flex-1 items-center justify-center">
<div class="flex flex-col items-center gap-4 text-center"> <div class="flex flex-col items-center gap-5 text-center">
<div class="flex h-14 w-14 items-center justify-center rounded-[var(--radius-card)] border border-[var(--color-border-mid)] bg-[var(--color-bg-2)]" style="animation: iconFloat 3s ease-in-out infinite"> <div class="flex h-16 w-16 items-center justify-center rounded-[var(--radius-card)] border border-[var(--color-border-mid)] bg-[var(--color-bg-2)]" style="animation: iconFloat 3s ease-in-out infinite">
<svg class="text-[var(--color-text-muted)]" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> <svg class="text-[var(--color-text-muted)]" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<polyline points="4 17 10 11 4 5" /><line x1="12" y1="19" x2="20" y2="19" /> <polyline points="4 17 10 11 4 5" /><line x1="12" y1="19" x2="20" y2="19" />
</svg> </svg>
</div> </div>
<div class="flex flex-col gap-1"> <div class="flex flex-col gap-1.5">
<span class="text-ui font-medium text-[var(--color-text-secondary)]">Terminal unavailable</span> <span class="text-body font-medium text-[var(--color-text-secondary)]">Terminal unavailable</span>
<span class="text-meta text-[var(--color-text-muted)]">Start the capsule to connect</span> <span class="text-ui text-[var(--color-text-muted)]">Start the capsule to connect</span>
</div> </div>
</div> </div>
</div> </div>
{:else} {:else}
<!-- Session tab bar --> <!-- Unified session bar: tabs + status integrated into one row (hidden when no sessions) -->
<div class="flex items-center border-b border-[var(--color-border)] bg-[var(--color-bg-1)]"> <div class="flex items-stretch bg-[var(--color-bg-1)]" style:display={sessions.length === 0 ? 'none' : 'flex'}>
<div class="tab-scroll flex flex-1 items-center overflow-x-auto"> <!-- Tabs -->
<div class="tab-scroll flex items-stretch overflow-x-auto">
{#each sessions as session (session.id)} {#each sessions as session (session.id)}
<!-- svelte-ignore a11y_no_static_element_interactions --> <!-- svelte-ignore a11y_no_static_element_interactions -->
<div <div
@ -412,30 +440,34 @@
role="tab" role="tab"
tabindex="0" tabindex="0"
aria-selected={session.id === activeSessionId} aria-selected={session.id === activeSessionId}
class="group relative flex shrink-0 cursor-pointer items-center gap-2 border-r border-[var(--color-border)] px-3.5 py-2 text-label transition-colors class="term-tab group flex shrink-0 cursor-pointer items-center gap-2.5 px-5 py-2.5 text-meta transition-colors
{session.id === activeSessionId {session.id === activeSessionId
? 'bg-[var(--color-bg-0)] text-[var(--color-text-primary)]' ? 'term-tab-active bg-[var(--color-bg-0)] text-[var(--color-text-primary)]'
: 'bg-[var(--color-bg-1)] text-[var(--color-text-tertiary)] hover:bg-[var(--color-bg-2)] hover:text-[var(--color-text-secondary)]'}" : 'bg-[var(--color-bg-1)] text-[var(--color-text-tertiary)] hover:bg-[var(--color-bg-2)] hover:text-[var(--color-text-secondary)] border-b border-b-[var(--color-border)]'}"
> >
{#if session.id === activeSessionId} {#if session.state === 'connected'}
<span class="absolute inset-x-0 bottom-0 h-px bg-[var(--color-accent)]"></span> <span class="relative flex h-[7px] w-[7px] shrink-0">
<span class="animate-status-ping absolute inline-flex h-full w-full rounded-full bg-[var(--color-accent)]"></span>
<span class="relative inline-flex h-[7px] w-[7px] rounded-full bg-[var(--color-accent)]"></span>
</span>
{:else if session.state === 'connecting'}
<svg class="animate-spin shrink-0 text-[var(--color-text-tertiary)]" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M21 12a9 9 0 1 1-6.219-8.56" /></svg>
{:else if session.state === 'error'}
<span class="h-[7px] w-[7px] shrink-0 rounded-full bg-[var(--color-red)]"></span>
{:else}
<span class="h-[7px] w-[7px] shrink-0 rounded-full bg-[var(--color-text-muted)]"></span>
{/if} {/if}
<span class="h-[6px] w-[6px] shrink-0 rounded-full {statusDot(session.state)}"></span>
<span class="font-mono"> <span class="font-mono">
bash bash{#if session.ptyPid}<span class="text-[var(--color-text-muted)]">:{session.ptyPid}</span>{/if}
{#if session.ptyPid}
<span class="text-[var(--color-text-muted)]">:{session.ptyPid}</span>
{/if}
</span> </span>
<button <button
onclick={(e) => { e.stopPropagation(); closeSession(session.id); }} onclick={(e) => { e.stopPropagation(); closeSession(session.id); }}
class="ml-0.5 flex h-4 w-4 items-center justify-center rounded-[2px] text-[var(--color-text-muted)] opacity-0 transition-all group-hover:opacity-100 hover:bg-[var(--color-bg-4)] hover:text-[var(--color-text-secondary)]" class="ml-0.5 flex h-5 w-5 items-center justify-center rounded-[3px] text-[var(--color-text-muted)] opacity-0 transition-all group-hover:opacity-100 hover:bg-[var(--color-bg-4)] hover:text-[var(--color-text-secondary)]"
title="Close session" title="Close session"
> >
<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"> <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
<line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" /> <line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" />
</svg> </svg>
</button> </button>
@ -443,74 +475,49 @@
{/each} {/each}
</div> </div>
<!-- New tab button -->
<button <button
onclick={createSession} onclick={createSession}
class="flex shrink-0 items-center gap-1.5 px-3 py-2 text-label font-medium text-[var(--color-text-muted)] transition-colors hover:bg-[var(--color-bg-2)] hover:text-[var(--color-text-secondary)]" class="flex shrink-0 items-center justify-center aspect-square self-stretch border-b border-[var(--color-border)] text-[var(--color-text-tertiary)] transition-colors hover:bg-[var(--color-bg-2)] hover:text-[var(--color-text-primary)]"
title="New terminal session" title="New terminal session"
> >
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /> <line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" />
</svg> </svg>
</button> </button>
</div>
<!-- Status bar for active session --> <!-- Spacer fills remaining width with bg-1, has bottom border like inactive area -->
<div class="flex-1 border-b border-[var(--color-border)] bg-[var(--color-bg-1)]"></div>
<!-- Right-side status info (reconnect button, pty tag) -->
{#if activeSession} {#if activeSession}
<div class="flex items-center justify-between border-b border-[var(--color-border)] bg-[var(--color-bg-1)] px-4 py-1.5"> <div class="flex items-center gap-3 border-b border-[var(--color-border)] bg-[var(--color-bg-1)] pr-4">
<div class="flex items-center gap-2.5"> {#if activeSession.state === 'error' && activeSession.errorMessage}
{#if activeSession.state === 'connected'} <span class="text-meta text-[var(--color-red)]/70">{activeSession.errorMessage}</span>
<span class="flex items-center gap-1.5 rounded-[3px] border border-[var(--color-accent)]/25 bg-[var(--color-accent-glow-mid)] px-2 py-0.5 text-badge font-semibold uppercase tracking-[0.05em] text-[var(--color-accent-mid)]">
<span class="relative flex h-[5px] w-[5px] shrink-0">
<span class="animate-status-ping absolute inline-flex h-full w-full rounded-full bg-[var(--color-accent)]"></span>
<span class="relative inline-flex h-[5px] w-[5px] rounded-full bg-[var(--color-accent)]"></span>
</span>
Live
</span>
{:else if activeSession.state === 'connecting'}
<span class="flex items-center gap-1.5 rounded-[3px] border border-[var(--color-border)] bg-[var(--color-bg-2)] px-2 py-0.5 text-badge font-semibold uppercase tracking-[0.05em] text-[var(--color-text-tertiary)]">
<svg class="animate-spin" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M21 12a9 9 0 1 1-6.219-8.56" /></svg>
Connecting
</span>
{:else if activeSession.state === 'error'}
<span class="flex items-center gap-1.5 rounded-[3px] border border-[var(--color-red)]/25 bg-[var(--color-red)]/8 px-2 py-0.5 text-badge font-semibold uppercase tracking-[0.05em] text-[var(--color-red)]">
Error
</span>
{#if activeSession.errorMessage}
<span class="text-meta text-[var(--color-red)]/80">{activeSession.errorMessage}</span>
{/if}
{:else if activeSession.state === 'disconnected'}
<span class="flex items-center gap-1.5 rounded-[3px] border border-[var(--color-border)] bg-[var(--color-bg-2)] px-2 py-0.5 text-badge font-semibold uppercase tracking-[0.05em] text-[var(--color-text-muted)]">
Disconnected
</span>
{/if} {/if}
{#if activeSession.ptyTag} {#if (activeSession.state === 'disconnected' || activeSession.state === 'error') && activeSession.ptyTag}
<span class="h-3 w-px bg-[var(--color-border)]"></span>
<span class="font-mono text-badge text-[var(--color-text-muted)]">{activeSession.ptyTag}</span>
{/if}
</div>
<div class="flex items-center gap-2">
{#if activeSession.state === 'disconnected' || activeSession.state === 'error'}
{#if activeSession.ptyTag}
<button <button
onclick={() => activeSession && reconnectSession(activeSession.id)} onclick={() => activeSession && reconnectSession(activeSession.id)}
class="flex items-center gap-1.5 rounded-[var(--radius-button)] border border-[var(--color-border)] bg-[var(--color-bg-3)] px-2.5 py-1 text-badge font-semibold uppercase tracking-[0.05em] text-[var(--color-text-secondary)] transition-colors hover:bg-[var(--color-bg-4)] hover:text-[var(--color-text-primary)]" class="flex items-center gap-1.5 rounded-[var(--radius-button)] border border-[var(--color-border)] bg-[var(--color-bg-3)] px-3 py-1 text-meta font-medium text-[var(--color-text-secondary)] transition-colors hover:bg-[var(--color-bg-4)] hover:text-[var(--color-text-primary)]"
> >
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="1 4 1 10 7 10" /><polyline points="23 20 23 14 17 14" /> <polyline points="1 4 1 10 7 10" /><polyline points="23 20 23 14 17 14" />
<path d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15" /> <path d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15" />
</svg> </svg>
Reconnect Reconnect
</button> </button>
{/if} {/if}
{#if activeSession.ptyTag}
<span class="font-mono text-label text-[var(--color-text-muted)]">{activeSession.ptyTag}</span>
{/if} {/if}
</div> </div>
</div>
{/if} {/if}
</div>
<!-- Terminal surfaces --> <!-- Terminal surfaces -->
<div class="relative flex-1 min-h-0" bind:this={containerRef}> <div class="relative flex-1 min-h-0 bg-[var(--color-bg-0)]" bind:this={containerRef}>
{#each sessions as session (session.id)} {#each sessions as session (session.id)}
<div <div
data-session-id={session.id} data-session-id={session.id}
@ -521,21 +528,21 @@
{#if sessions.length === 0} {#if sessions.length === 0}
<div class="flex h-full items-center justify-center"> <div class="flex h-full items-center justify-center">
<div class="flex flex-col items-center gap-4 text-center"> <div class="flex flex-col items-center gap-5 text-center">
<div class="flex h-14 w-14 items-center justify-center rounded-[var(--radius-card)] border border-[var(--color-border-mid)] bg-[var(--color-bg-2)]" style="animation: iconFloat 3s ease-in-out infinite"> <div class="flex h-16 w-16 items-center justify-center rounded-[var(--radius-card)] border border-[var(--color-border-mid)] bg-[var(--color-bg-2)]" style="animation: iconFloat 3s ease-in-out infinite">
<svg class="text-[var(--color-text-muted)]" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> <svg class="text-[var(--color-text-muted)]" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<polyline points="4 17 10 11 4 5" /><line x1="12" y1="19" x2="20" y2="19" /> <polyline points="4 17 10 11 4 5" /><line x1="12" y1="19" x2="20" y2="19" />
</svg> </svg>
</div> </div>
<div class="flex flex-col gap-1"> <div class="flex flex-col gap-1.5">
<span class="text-ui font-medium text-[var(--color-text-secondary)]">No active sessions</span> <span class="text-body font-medium text-[var(--color-text-secondary)]">No active sessions</span>
<span class="text-meta text-[var(--color-text-muted)]">All terminal sessions have been closed</span> <span class="text-ui text-[var(--color-text-muted)]">All terminal sessions have been closed</span>
</div> </div>
<button <button
onclick={createSession} onclick={createSession}
class="mt-1 flex items-center gap-2 rounded-[var(--radius-button)] border border-[var(--color-accent)]/30 bg-[var(--color-accent-glow-mid)] px-4 py-2 text-meta font-semibold text-[var(--color-accent-bright)] transition-all duration-150 hover:border-[var(--color-accent)]/50 hover:bg-[var(--color-accent)]/15 hover:-translate-y-px active:translate-y-0" class="mt-1 flex items-center gap-2 rounded-[var(--radius-button)] border border-[var(--color-accent)]/30 bg-[var(--color-accent-glow-mid)] px-5 py-2.5 text-ui font-semibold text-[var(--color-accent-bright)] transition-all duration-150 hover:border-[var(--color-accent)]/50 hover:bg-[var(--color-accent)]/15 hover:-translate-y-px active:translate-y-0"
> >
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /> <line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" />
</svg> </svg>
New session New session