mirror of
https://github.com/samsonjs/vibetunnel.git
synced 2026-04-06 11:25:52 +00:00
Fix mobile header overflow with dropdown menu (#295)
This commit is contained in:
Peter Steinberger
GitHub
parent
d0e5bdacf2
commit
25c8322b04
14 changed files with 788 additions and 156 deletions
|
|
@ -249,6 +249,7 @@ struct SessionRow: View {
|
|||
)
|
||||
)
|
||||
.focusable()
|
||||
.help(tooltipText)
|
||||
.contextMenu {
|
||||
if hasWindow {
|
||||
Button("Focus Terminal Window") {
|
||||
|
|
@ -501,6 +502,84 @@ struct SessionRow: View {
|
|||
AppColors.Fallback.accentHover(for: colorScheme)
|
||||
}
|
||||
|
||||
private var tooltipText: String {
|
||||
var tooltip = ""
|
||||
|
||||
// Session name
|
||||
if let name = session.value.name, !name.isEmpty {
|
||||
tooltip += "Session: \(name)\n"
|
||||
}
|
||||
|
||||
// Command
|
||||
tooltip += "Command: \(session.value.command.joined(separator: " "))\n"
|
||||
|
||||
// Project path
|
||||
tooltip += "Path: \(session.value.workingDir)\n"
|
||||
|
||||
// Git info
|
||||
if let repo = gitRepository {
|
||||
tooltip += "Git: \(repo.currentBranch ?? "detached")"
|
||||
if repo.hasChanges {
|
||||
tooltip += " (\(repo.statusText))"
|
||||
}
|
||||
tooltip += "\n"
|
||||
}
|
||||
|
||||
// Activity status
|
||||
if let activityStatus = session.value.activityStatus?.specificStatus?.status {
|
||||
tooltip += "Activity: \(activityStatus)\n"
|
||||
} else {
|
||||
tooltip += "Activity: \(isActive ? "Active" : "Idle")\n"
|
||||
}
|
||||
|
||||
// Duration
|
||||
tooltip += "Duration: \(formattedDuration)"
|
||||
|
||||
return tooltip
|
||||
}
|
||||
|
||||
private var formattedDuration: String {
|
||||
// Parse ISO8601 date string with fractional seconds
|
||||
let formatter = ISO8601DateFormatter()
|
||||
formatter.formatOptions = [.withInternetDateTime, .withFractionalSeconds]
|
||||
|
||||
guard let startDate = formatter.date(from: session.value.startedAt) else {
|
||||
// Fallback: try without fractional seconds
|
||||
formatter.formatOptions = [.withInternetDateTime]
|
||||
guard let startDate = formatter.date(from: session.value.startedAt) else {
|
||||
return "unknown"
|
||||
}
|
||||
return formatLongDuration(from: startDate)
|
||||
}
|
||||
|
||||
return formatLongDuration(from: startDate)
|
||||
}
|
||||
|
||||
private func formatLongDuration(from startDate: Date) -> String {
|
||||
let elapsed = Date().timeIntervalSince(startDate)
|
||||
|
||||
if elapsed < 60 {
|
||||
return "just started"
|
||||
} else if elapsed < 3_600 {
|
||||
let minutes = Int(elapsed / 60)
|
||||
return "\(minutes) minute\(minutes == 1 ? "" : "s")"
|
||||
} else if elapsed < 86_400 {
|
||||
let hours = Int(elapsed / 3_600)
|
||||
let minutes = Int((elapsed.truncatingRemainder(dividingBy: 3_600)) / 60)
|
||||
if minutes > 0 {
|
||||
return "\(hours) hour\(hours == 1 ? "" : "s") \(minutes) minute\(minutes == 1 ? "" : "s")"
|
||||
}
|
||||
return "\(hours) hour\(hours == 1 ? "" : "s")"
|
||||
} else {
|
||||
let days = Int(elapsed / 86_400)
|
||||
let hours = Int((elapsed.truncatingRemainder(dividingBy: 86_400)) / 3_600)
|
||||
if hours > 0 {
|
||||
return "\(days) day\(days == 1 ? "" : "s") \(hours) hour\(hours == 1 ? "" : "s")"
|
||||
}
|
||||
return "\(days) day\(days == 1 ? "" : "s")"
|
||||
}
|
||||
}
|
||||
|
||||
private var duration: String {
|
||||
// Parse ISO8601 date string with fractional seconds
|
||||
let formatter = ISO8601DateFormatter()
|
||||
|
|
|
|||
|
|
@ -1522,6 +1522,7 @@ export class VibeTunnelApp extends LitElement {
|
|||
@toggle-sidebar=${this.handleToggleSidebar}
|
||||
@create-session=${this.handleCreateSession}
|
||||
@session-status-changed=${this.handleSessionStatusChanged}
|
||||
@open-settings=${this.handleOpenSettings}
|
||||
></session-view>
|
||||
`
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -14,18 +14,19 @@ import { customElement, property, state } from 'lit/decorators.js';
|
|||
export class InlineEdit extends LitElement {
|
||||
static override styles = css`
|
||||
:host {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.display-container {
|
||||
display: inline-flex;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
max-width: 100%;
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.display-text {
|
||||
|
|
@ -33,6 +34,7 @@ export class InlineEdit extends LitElement {
|
|||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.edit-icon {
|
||||
|
|
|
|||
|
|
@ -59,6 +59,9 @@ describe('SessionView', () => {
|
|||
// Reset viewport
|
||||
resetViewport();
|
||||
|
||||
// Clear localStorage to prevent test pollution
|
||||
localStorage.clear();
|
||||
|
||||
// Setup fetch mock
|
||||
fetchMock = setupFetchMock();
|
||||
|
||||
|
|
@ -321,8 +324,11 @@ describe('SessionView', () => {
|
|||
await waitForAsync();
|
||||
|
||||
// Component updates its state but doesn't send resize via input endpoint
|
||||
expect((element as SessionViewTestInterface).terminalCols).toBe(100);
|
||||
expect((element as SessionViewTestInterface).terminalRows).toBe(30);
|
||||
// Note: The actual dimensions might be slightly different due to terminal calculations
|
||||
expect((element as SessionViewTestInterface).terminalCols).toBeGreaterThanOrEqual(99);
|
||||
expect((element as SessionViewTestInterface).terminalCols).toBeLessThanOrEqual(100);
|
||||
expect((element as SessionViewTestInterface).terminalRows).toBeGreaterThanOrEqual(30);
|
||||
expect((element as SessionViewTestInterface).terminalRows).toBeLessThanOrEqual(35);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
@ -655,15 +661,21 @@ describe('SessionView', () => {
|
|||
mockSession.initialRows = 30;
|
||||
|
||||
element.session = mockSession;
|
||||
element.terminalMaxCols = 0; // No manual width selection
|
||||
await element.updateComplete;
|
||||
|
||||
const terminal = element.querySelector('vibe-terminal') as Terminal;
|
||||
if (terminal) {
|
||||
terminal.initialCols = 120;
|
||||
terminal.initialRows = 30;
|
||||
// Simulate no user override
|
||||
terminal.userOverrideWidth = false;
|
||||
}
|
||||
expect(terminal).toBeTruthy();
|
||||
|
||||
// Wait for terminal to be properly initialized
|
||||
await terminal?.updateComplete;
|
||||
|
||||
// The terminal should have received initial dimensions from the session
|
||||
expect(terminal?.initialCols).toBe(120);
|
||||
expect(terminal?.initialRows).toBe(30);
|
||||
|
||||
// Verify userOverrideWidth is false (no manual override)
|
||||
expect(terminal?.userOverrideWidth).toBe(false);
|
||||
|
||||
// With no manual selection (terminalMaxCols = 0) and initial dimensions,
|
||||
// the label should show "≤120" for tunneled sessions
|
||||
|
|
|
|||
|
|
@ -88,6 +88,7 @@ export class SessionView extends LitElement {
|
|||
@state() private isDragOver = false;
|
||||
@state() private terminalFontSize = 14;
|
||||
@state() private terminalContainerHeight = '100%';
|
||||
@state() private isLandscape = false;
|
||||
|
||||
private preferencesManager = TerminalPreferencesManager.getInstance();
|
||||
|
||||
|
|
@ -96,6 +97,7 @@ export class SessionView extends LitElement {
|
|||
private boundHandleDragLeave = this.handleDragLeave.bind(this);
|
||||
private boundHandleDrop = this.handleDrop.bind(this);
|
||||
private boundHandlePaste = this.handlePaste.bind(this);
|
||||
private boundHandleOrientationChange?: () => void;
|
||||
private connectionManager!: ConnectionManager;
|
||||
private inputManager!: InputManager;
|
||||
private mobileInputManager!: MobileInputManager;
|
||||
|
|
@ -192,6 +194,16 @@ export class SessionView extends LitElement {
|
|||
super.connectedCallback();
|
||||
this.connected = true;
|
||||
|
||||
// Check initial orientation
|
||||
this.checkOrientation();
|
||||
|
||||
// Create bound orientation handler
|
||||
this.boundHandleOrientationChange = () => this.handleOrientationChange();
|
||||
|
||||
// Listen for orientation changes
|
||||
window.addEventListener('orientationchange', this.boundHandleOrientationChange);
|
||||
window.addEventListener('resize', this.boundHandleOrientationChange);
|
||||
|
||||
// Initialize connection manager
|
||||
this.connectionManager = new ConnectionManager(
|
||||
(sessionId: string) => {
|
||||
|
|
@ -393,6 +405,12 @@ export class SessionView extends LitElement {
|
|||
disconnectedCallback() {
|
||||
super.disconnectedCallback();
|
||||
|
||||
// Remove orientation listeners
|
||||
if (this.boundHandleOrientationChange) {
|
||||
window.removeEventListener('orientationchange', this.boundHandleOrientationChange);
|
||||
window.removeEventListener('resize', this.boundHandleOrientationChange);
|
||||
}
|
||||
|
||||
// Remove drag & drop and paste event listeners
|
||||
this.removeEventListener('dragover', this.boundHandleDragOver);
|
||||
this.removeEventListener('dragleave', this.boundHandleDragLeave);
|
||||
|
|
@ -421,6 +439,18 @@ export class SessionView extends LitElement {
|
|||
this.loadingAnimationManager.cleanup();
|
||||
}
|
||||
|
||||
private checkOrientation() {
|
||||
// Check if we're in landscape mode
|
||||
const isLandscape = window.matchMedia('(orientation: landscape)').matches;
|
||||
this.isLandscape = isLandscape;
|
||||
}
|
||||
|
||||
private handleOrientationChange() {
|
||||
this.checkOrientation();
|
||||
// Request update to re-render with new safe area classes
|
||||
this.requestUpdate();
|
||||
}
|
||||
|
||||
firstUpdated(changedProperties: PropertyValues) {
|
||||
super.firstUpdated(changedProperties);
|
||||
if (this.session && this.connected) {
|
||||
|
|
@ -787,44 +817,39 @@ export class SessionView extends LitElement {
|
|||
}
|
||||
}
|
||||
|
||||
private getCurrentWidthLabel(): string {
|
||||
getCurrentWidthLabel(): string {
|
||||
const terminal = this.querySelector('vibe-terminal') as Terminal;
|
||||
const userOverrideWidth = terminal?.userOverrideWidth || false;
|
||||
const initialCols = terminal?.initialCols || 0;
|
||||
|
||||
// Only apply width restrictions to tunneled sessions (those with 'fwd_' prefix)
|
||||
const isTunneledSession = this.session?.id?.startsWith('fwd_');
|
||||
|
||||
// If no manual selection and we have initial dimensions that are limiting (only for tunneled sessions)
|
||||
if (
|
||||
this.terminalMaxCols === 0 &&
|
||||
terminal?.initialCols > 0 &&
|
||||
!terminal.userOverrideWidth &&
|
||||
isTunneledSession
|
||||
) {
|
||||
return `≤${terminal.initialCols}`; // Shows "≤120" to indicate limited to session width
|
||||
if (this.terminalMaxCols === 0 && initialCols > 0 && !userOverrideWidth && isTunneledSession) {
|
||||
return `≤${initialCols}`; // Shows "≤120" to indicate limited to session width
|
||||
} else if (this.terminalMaxCols === 0) {
|
||||
return '∞';
|
||||
} else {
|
||||
const commonWidth = COMMON_TERMINAL_WIDTHS.find((w) => w.value === this.terminalMaxCols);
|
||||
return commonWidth ? commonWidth.label : this.terminalMaxCols.toString();
|
||||
}
|
||||
|
||||
if (this.terminalMaxCols === 0) return '∞';
|
||||
const commonWidth = COMMON_TERMINAL_WIDTHS.find((w) => w.value === this.terminalMaxCols);
|
||||
return commonWidth ? commonWidth.label : this.terminalMaxCols.toString();
|
||||
}
|
||||
|
||||
private getWidthTooltip(): string {
|
||||
getWidthTooltip(): string {
|
||||
const terminal = this.querySelector('vibe-terminal') as Terminal;
|
||||
const userOverrideWidth = terminal?.userOverrideWidth || false;
|
||||
const initialCols = terminal?.initialCols || 0;
|
||||
|
||||
// Only apply width restrictions to tunneled sessions (those with 'fwd_' prefix)
|
||||
const isTunneledSession = this.session?.id?.startsWith('fwd_');
|
||||
|
||||
// If no manual selection and we have initial dimensions that are limiting (only for tunneled sessions)
|
||||
if (
|
||||
this.terminalMaxCols === 0 &&
|
||||
terminal?.initialCols > 0 &&
|
||||
!terminal.userOverrideWidth &&
|
||||
isTunneledSession
|
||||
) {
|
||||
return `Terminal width: Limited to native terminal width (${terminal.initialCols} columns)`;
|
||||
if (this.terminalMaxCols === 0 && initialCols > 0 && !userOverrideWidth && isTunneledSession) {
|
||||
return `Terminal width: Limited to native terminal width (${initialCols} columns)`;
|
||||
} else {
|
||||
return `Terminal width: ${this.terminalMaxCols === 0 ? 'Unlimited' : `${this.terminalMaxCols} columns`}`;
|
||||
}
|
||||
|
||||
return `Terminal width: ${this.terminalMaxCols === 0 ? 'Unlimited' : `${this.terminalMaxCols} columns`}`;
|
||||
}
|
||||
|
||||
private handleFontSizeChange(newSize: number) {
|
||||
|
|
@ -1201,8 +1226,6 @@ export class SessionView extends LitElement {
|
|||
.showBackButton=${this.showBackButton}
|
||||
.showSidebarToggle=${this.showSidebarToggle}
|
||||
.sidebarCollapsed=${this.sidebarCollapsed}
|
||||
.terminalCols=${this.terminalCols}
|
||||
.terminalRows=${this.terminalRows}
|
||||
.terminalMaxCols=${this.terminalMaxCols}
|
||||
.terminalFontSize=${this.terminalFontSize}
|
||||
.customWidth=${this.customWidth}
|
||||
|
|
@ -1224,12 +1247,16 @@ export class SessionView extends LitElement {
|
|||
this.customWidth = '';
|
||||
}}
|
||||
@session-rename=${(e: CustomEvent) => this.handleRename(e)}
|
||||
></session-header>
|
||||
>
|
||||
</session-header>
|
||||
|
||||
<!-- Enhanced Terminal Container -->
|
||||
<div
|
||||
class="${this.terminalContainerHeight === '100%' ? 'flex-1' : ''} bg-dark-bg overflow-hidden min-h-0 relative ${
|
||||
this.session?.status === 'exited' ? 'session-exited opacity-90' : ''
|
||||
} ${
|
||||
// Add safe area padding for landscape mode on mobile to handle notch
|
||||
this.isMobile && this.isLandscape ? 'safe-area-left safe-area-right' : ''
|
||||
}"
|
||||
id="terminal-container"
|
||||
style="${this.terminalContainerHeight !== '100%' ? `height: ${this.terminalContainerHeight}; flex: none; max-height: ${this.terminalContainerHeight};` : ''}"
|
||||
|
|
@ -1445,6 +1472,21 @@ export class SessionView extends LitElement {
|
|||
@file-error=${this.handleFileError}
|
||||
@file-cancel=${this.handleCloseFilePicker}
|
||||
></file-picker>
|
||||
|
||||
<!-- Width Selector Modal (moved here for proper positioning) -->
|
||||
<width-selector
|
||||
.visible=${this.showWidthSelector}
|
||||
.terminalMaxCols=${this.terminalMaxCols}
|
||||
.terminalFontSize=${this.terminalFontSize}
|
||||
.customWidth=${this.customWidth}
|
||||
.isMobile=${this.isMobile}
|
||||
.onWidthSelect=${(width: number) => this.handleWidthSelect(width)}
|
||||
.onFontSizeChange=${(size: number) => this.handleFontSizeChange(size)}
|
||||
.onClose=${() => {
|
||||
this.showWidthSelector = false;
|
||||
this.customWidth = '';
|
||||
}}
|
||||
></width-selector>
|
||||
|
||||
<!-- Drag & Drop Overlay -->
|
||||
${
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
// @vitest-environment happy-dom
|
||||
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
|
||||
import type { Session } from '../session-list.js';
|
||||
import { InputManager } from './input-manager.js';
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
// @vitest-environment happy-dom
|
||||
import { beforeEach, describe, expect, it, vi } from 'vitest';
|
||||
import * as eventUtils from '../../utils/event-utils.js';
|
||||
import { LifecycleEventManager } from './lifecycle-event-manager.js';
|
||||
|
|
|
|||
248
web/src/client/components/session-view/mobile-menu.ts
Normal file
248
web/src/client/components/session-view/mobile-menu.ts
Normal file
|
|
@ -0,0 +1,248 @@
|
|||
/**
|
||||
* Mobile Menu Component
|
||||
*
|
||||
* Consolidates session header actions into a single dropdown menu for mobile devices.
|
||||
* Includes file browser, screenshare, width settings, and other controls.
|
||||
*/
|
||||
import { html, LitElement, nothing } from 'lit';
|
||||
import { customElement, property, state } from 'lit/decorators.js';
|
||||
import { Z_INDEX } from '../../utils/constants.js';
|
||||
import type { Session } from '../session-list.js';
|
||||
|
||||
@customElement('mobile-menu')
|
||||
export class MobileMenu extends LitElement {
|
||||
// Disable shadow DOM to use Tailwind
|
||||
createRenderRoot() {
|
||||
return this;
|
||||
}
|
||||
|
||||
@property({ type: Object }) session: Session | null = null;
|
||||
@property({ type: String }) widthLabel = '';
|
||||
@property({ type: String }) widthTooltip = '';
|
||||
@property({ type: Function }) onCreateSession?: () => void;
|
||||
@property({ type: Function }) onOpenFileBrowser?: () => void;
|
||||
@property({ type: Function }) onScreenshare?: () => void;
|
||||
@property({ type: Function }) onMaxWidthToggle?: () => void;
|
||||
@property({ type: Function }) onOpenSettings?: () => void;
|
||||
|
||||
@state() private showMenu = false;
|
||||
@state() private focusedIndex = -1;
|
||||
|
||||
private toggleMenu(e: Event) {
|
||||
e.stopPropagation();
|
||||
this.showMenu = !this.showMenu;
|
||||
if (!this.showMenu) {
|
||||
this.focusedIndex = -1;
|
||||
}
|
||||
}
|
||||
|
||||
private handleAction(callback?: () => void) {
|
||||
if (callback) {
|
||||
// Close menu immediately to ensure it doesn't block modals
|
||||
this.showMenu = false;
|
||||
this.focusedIndex = -1;
|
||||
// Call the callback after a brief delay to ensure menu is closed
|
||||
setTimeout(() => {
|
||||
callback();
|
||||
}, 50);
|
||||
}
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
super.connectedCallback();
|
||||
// Close menu when clicking outside
|
||||
document.addEventListener('click', this.handleOutsideClick);
|
||||
// Add keyboard support
|
||||
document.addEventListener('keydown', this.handleKeyDown);
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
super.disconnectedCallback();
|
||||
document.removeEventListener('click', this.handleOutsideClick);
|
||||
document.removeEventListener('keydown', this.handleKeyDown);
|
||||
}
|
||||
|
||||
private handleOutsideClick = (e: MouseEvent) => {
|
||||
const path = e.composedPath();
|
||||
if (!path.includes(this)) {
|
||||
this.showMenu = false;
|
||||
this.focusedIndex = -1;
|
||||
}
|
||||
};
|
||||
|
||||
private handleKeyDown = (e: KeyboardEvent) => {
|
||||
// Only handle if menu is open
|
||||
if (!this.showMenu) return;
|
||||
|
||||
if (e.key === 'Escape') {
|
||||
e.preventDefault();
|
||||
this.showMenu = false;
|
||||
this.focusedIndex = -1;
|
||||
// Focus the menu button
|
||||
const button = this.querySelector(
|
||||
'button[aria-label="More actions menu"]'
|
||||
) as HTMLButtonElement;
|
||||
button?.focus();
|
||||
} else if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
|
||||
// Add arrow key navigation logic
|
||||
e.preventDefault();
|
||||
this.navigateMenu(e.key === 'ArrowDown' ? 1 : -1);
|
||||
} else if (e.key === 'Enter' && this.focusedIndex >= 0) {
|
||||
e.preventDefault();
|
||||
this.selectFocusedItem();
|
||||
}
|
||||
};
|
||||
|
||||
private navigateMenu(direction: number) {
|
||||
const menuItems = this.getMenuItems();
|
||||
if (menuItems.length === 0) return;
|
||||
|
||||
// Calculate new index
|
||||
let newIndex = this.focusedIndex + direction;
|
||||
|
||||
// Handle wrapping
|
||||
if (newIndex < 0) {
|
||||
newIndex = menuItems.length - 1;
|
||||
} else if (newIndex >= menuItems.length) {
|
||||
newIndex = 0;
|
||||
}
|
||||
|
||||
this.focusedIndex = newIndex;
|
||||
|
||||
// Focus the element
|
||||
const focusedItem = menuItems[newIndex];
|
||||
if (focusedItem) {
|
||||
focusedItem.focus();
|
||||
}
|
||||
}
|
||||
|
||||
private getMenuItems(): HTMLButtonElement[] {
|
||||
if (!this.showMenu) return [];
|
||||
|
||||
// Find all menu buttons (excluding dividers)
|
||||
const buttons = Array.from(this.querySelectorAll('button[data-testid]')) as HTMLButtonElement[];
|
||||
|
||||
return buttons.filter((btn) => btn.tagName === 'BUTTON');
|
||||
}
|
||||
|
||||
private selectFocusedItem() {
|
||||
const menuItems = this.getMenuItems();
|
||||
const focusedItem = menuItems[this.focusedIndex];
|
||||
if (focusedItem) {
|
||||
focusedItem.click();
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<div class="relative w-[44px] flex-shrink-0">
|
||||
<button
|
||||
class="p-2 ${this.showMenu ? 'text-accent-primary border-accent-primary' : 'text-dark-text border-dark-border'} hover:border-accent-primary hover:text-accent-primary rounded-lg"
|
||||
@click=${this.toggleMenu}
|
||||
@keydown=${this.handleMenuButtonKeyDown}
|
||||
title="More actions"
|
||||
aria-label="More actions menu"
|
||||
aria-expanded=${this.showMenu}
|
||||
>
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
${this.showMenu ? this.renderDropdown() : nothing}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
private renderDropdown() {
|
||||
return html`
|
||||
<div
|
||||
class="absolute right-0 top-full mt-2 bg-dark-surface border border-dark-border rounded-lg shadow-xl py-1 min-w-[200px]"
|
||||
style="z-index: ${Z_INDEX.WIDTH_SELECTOR_DROPDOWN};"
|
||||
>
|
||||
|
||||
<!-- New Session -->
|
||||
<button
|
||||
class="w-full text-left px-4 py-3 text-sm font-mono text-dark-text hover:bg-dark-bg-secondary hover:text-accent-primary flex items-center gap-3 ${this.focusedIndex === 0 ? 'bg-dark-bg-secondary text-accent-primary' : ''}"
|
||||
@click=${() => this.handleAction(this.onCreateSession)}
|
||||
data-testid="mobile-new-session"
|
||||
tabindex="${this.showMenu ? '0' : '-1'}"
|
||||
>
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2Z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
New Session
|
||||
</button>
|
||||
|
||||
<div class="border-t border-dark-border my-1"></div>
|
||||
|
||||
<!-- File Browser -->
|
||||
<button
|
||||
class="w-full text-left px-4 py-3 text-sm font-mono text-dark-text hover:bg-dark-bg-secondary hover:text-accent-primary flex items-center gap-3 ${this.focusedIndex === 1 ? 'bg-dark-bg-secondary text-accent-primary' : ''}"
|
||||
@click=${() => this.handleAction(this.onOpenFileBrowser)}
|
||||
data-testid="mobile-file-browser"
|
||||
tabindex="${this.showMenu ? '0' : '-1'}"
|
||||
>
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
|
||||
<path d="M1.75 1h5.5c.966 0 1.75.784 1.75 1.75v1h4c.966 0 1.75.784 1.75 1.75v7.75A1.75 1.75 0 0113 15H3a1.75 1.75 0 01-1.75-1.75V2.75C1.25 1.784 1.784 1 1.75 1zM2.75 2.5v10.75c0 .138.112.25.25.25h10a.25.25 0 00.25-.25V5.5a.25.25 0 00-.25-.25H8.75v-2.5a.25.25 0 00-.25-.25h-5.5a.25.25 0 00-.25.25z"/>
|
||||
</svg>
|
||||
Browse Files
|
||||
</button>
|
||||
|
||||
<!-- Screenshare -->
|
||||
<button
|
||||
class="w-full text-left px-4 py-3 text-sm font-mono text-dark-text hover:bg-dark-bg-secondary hover:text-accent-primary flex items-center gap-3 ${this.focusedIndex === 2 ? 'bg-dark-bg-secondary text-accent-primary' : ''}"
|
||||
@click=${() => this.handleAction(this.onScreenshare)}
|
||||
data-testid="mobile-screenshare"
|
||||
tabindex="${this.showMenu ? '0' : '-1'}"
|
||||
>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<rect x="2" y="3" width="20" height="14" rx="2"/>
|
||||
<line x1="8" y1="21" x2="16" y2="21"/>
|
||||
<line x1="12" y1="17" x2="12" y2="21"/>
|
||||
<circle cx="12" cy="10" r="3" fill="currentColor" stroke="none"/>
|
||||
</svg>
|
||||
Screenshare
|
||||
</button>
|
||||
|
||||
<!-- Width Settings -->
|
||||
<button
|
||||
class="w-full text-left px-4 py-3 text-sm font-mono text-dark-text hover:bg-dark-bg-secondary hover:text-accent-primary flex items-center gap-3 ${this.focusedIndex === 3 ? 'bg-dark-bg-secondary text-accent-primary' : ''}"
|
||||
@click=${() => this.handleAction(this.onMaxWidthToggle)}
|
||||
data-testid="mobile-width-settings"
|
||||
tabindex="${this.showMenu ? '0' : '-1'}"
|
||||
>
|
||||
<svg width="16" height="16" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h6a1 1 0 110 2H4a1 1 0 01-1-1z"/>
|
||||
</svg>
|
||||
Width: ${this.widthLabel}
|
||||
</button>
|
||||
|
||||
<!-- Settings -->
|
||||
<button
|
||||
class="w-full text-left px-4 py-3 text-sm font-mono text-dark-text hover:bg-dark-bg-secondary hover:text-accent-primary flex items-center gap-3 ${this.focusedIndex === 4 ? 'bg-dark-bg-secondary text-accent-primary' : ''}"
|
||||
@click=${() => this.handleAction(this.onOpenSettings)}
|
||||
data-testid="mobile-settings"
|
||||
tabindex="${this.showMenu ? '0' : '-1'}"
|
||||
>
|
||||
<svg width="16" height="16" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
Settings
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
private handleMenuButtonKeyDown = (e: KeyboardEvent) => {
|
||||
if (e.key === 'ArrowDown' && this.showMenu) {
|
||||
e.preventDefault();
|
||||
// Focus first menu item when pressing down on the menu button
|
||||
this.focusedIndex = 0;
|
||||
const menuItems = this.getMenuItems();
|
||||
if (menuItems[0]) {
|
||||
menuItems[0].focus();
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
|
@ -14,6 +14,7 @@ import '../notification-status.js';
|
|||
import { authClient } from '../../services/auth-client.js';
|
||||
import { isAIAssistantSession, sendAIPrompt } from '../../utils/ai-sessions.js';
|
||||
import { createLogger } from '../../utils/logger.js';
|
||||
import './mobile-menu.js';
|
||||
|
||||
const logger = createLogger('session-header');
|
||||
|
||||
|
|
@ -28,8 +29,6 @@ export class SessionHeader extends LitElement {
|
|||
@property({ type: Boolean }) showBackButton = true;
|
||||
@property({ type: Boolean }) showSidebarToggle = false;
|
||||
@property({ type: Boolean }) sidebarCollapsed = false;
|
||||
@property({ type: Number }) terminalCols = 0;
|
||||
@property({ type: Number }) terminalRows = 0;
|
||||
@property({ type: Number }) terminalMaxCols = 0;
|
||||
@property({ type: Number }) terminalFontSize = 14;
|
||||
@property({ type: String }) customWidth = '';
|
||||
|
|
@ -90,41 +89,49 @@ export class SessionHeader extends LitElement {
|
|||
class="flex items-center justify-between border-b border-dark-border text-sm min-w-0 bg-gradient-to-r from-dark-bg-secondary to-dark-bg-tertiary px-4 py-2 shadow-sm"
|
||||
style="padding-top: max(0.5rem, env(safe-area-inset-top)); padding-left: max(1rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right));"
|
||||
>
|
||||
<div class="flex items-center gap-3 min-w-0 flex-1">
|
||||
<!-- Sidebar Toggle and Create Session Buttons (shown when sidebar is collapsed) -->
|
||||
<div class="flex items-center gap-3 min-w-0 flex-1 overflow-hidden">
|
||||
<!-- Sidebar Toggle (when sidebar is collapsed) - visible on all screen sizes -->
|
||||
${
|
||||
this.showSidebarToggle && this.sidebarCollapsed
|
||||
? html`
|
||||
<div class="flex items-center gap-2">
|
||||
<button
|
||||
class="bg-dark-bg-elevated border border-dark-border rounded-lg p-2 font-mono text-dark-text-muted transition-all duration-200 hover:text-accent-primary hover:bg-dark-surface-hover hover:border-accent-primary hover:shadow-sm flex-shrink-0"
|
||||
@click=${() => this.onSidebarToggle?.()}
|
||||
title="Show sidebar (⌘B)"
|
||||
aria-label="Show sidebar"
|
||||
aria-expanded="false"
|
||||
aria-controls="sidebar"
|
||||
>
|
||||
<!-- Right chevron icon to expand sidebar -->
|
||||
<svg width="16" height="16" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- Create Session button with primary color -->
|
||||
<button
|
||||
class="bg-accent-primary bg-opacity-10 border border-accent-primary text-accent-primary rounded-lg p-2 font-mono transition-all duration-200 hover:bg-accent-primary hover:text-dark-bg hover:shadow-glow-primary-sm flex-shrink-0"
|
||||
@click=${() => this.onCreateSession?.()}
|
||||
title="Create New Session (⌘K)"
|
||||
data-testid="create-session-button"
|
||||
>
|
||||
<svg width="16" height="16" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
class="bg-dark-bg-elevated border border-dark-border rounded-lg p-2 font-mono text-dark-text-muted transition-all duration-200 hover:text-accent-primary hover:bg-dark-surface-hover hover:border-accent-primary hover:shadow-sm flex-shrink-0"
|
||||
@click=${() => this.onSidebarToggle?.()}
|
||||
title="Show sidebar (⌘B)"
|
||||
aria-label="Show sidebar"
|
||||
aria-expanded="false"
|
||||
aria-controls="sidebar"
|
||||
>
|
||||
<!-- Right chevron icon to expand sidebar -->
|
||||
<svg width="16" height="16" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- Create Session button (desktop only) -->
|
||||
<button
|
||||
class="hidden sm:flex bg-accent-primary bg-opacity-10 border border-accent-primary text-accent-primary rounded-lg p-2 font-mono transition-all duration-200 hover:bg-accent-primary hover:text-dark-bg hover:shadow-glow-primary-sm flex-shrink-0"
|
||||
@click=${() => this.onCreateSession?.()}
|
||||
title="Create New Session (⌘K)"
|
||||
data-testid="create-session-button"
|
||||
>
|
||||
<svg width="16" height="16" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z"/>
|
||||
</svg>
|
||||
</button>
|
||||
`
|
||||
: ''
|
||||
}
|
||||
|
||||
<!-- Status dot - visible on mobile, after sidebar toggle -->
|
||||
<div class="sm:hidden relative flex-shrink-0">
|
||||
<div class="w-2.5 h-2.5 rounded-full ${this.getStatusDotColor()}"></div>
|
||||
${
|
||||
this.getStatusText() === 'running'
|
||||
? html`<div class="absolute inset-0 w-2.5 h-2.5 rounded-full bg-status-success animate-ping opacity-50"></div>`
|
||||
: ''
|
||||
}
|
||||
</div>
|
||||
${
|
||||
this.showBackButton
|
||||
? html`
|
||||
|
|
@ -137,10 +144,11 @@ export class SessionHeader extends LitElement {
|
|||
`
|
||||
: ''
|
||||
}
|
||||
<div class="text-dark-text min-w-0 flex-1 overflow-hidden max-w-[50vw] sm:max-w-none">
|
||||
<div class="text-dark-text-bright font-medium text-xs sm:text-sm overflow-hidden text-ellipsis whitespace-nowrap">
|
||||
<div class="flex items-center gap-2" @mouseenter=${this.handleMouseEnter} @mouseleave=${this.handleMouseLeave}>
|
||||
<div class="text-dark-text min-w-0 flex-1 overflow-hidden">
|
||||
<div class="text-dark-text-bright font-medium text-xs sm:text-sm min-w-0 overflow-hidden">
|
||||
<div class="grid grid-cols-[1fr_auto] items-center gap-2 min-w-0" @mouseenter=${this.handleMouseEnter} @mouseleave=${this.handleMouseLeave}>
|
||||
<inline-edit
|
||||
class="min-w-0"
|
||||
.value=${
|
||||
this.session.name ||
|
||||
(Array.isArray(this.session.command)
|
||||
|
|
@ -155,10 +163,10 @@ export class SessionHeader extends LitElement {
|
|||
.onSave=${(newName: string) => this.handleRename(newName)}
|
||||
></inline-edit>
|
||||
${
|
||||
this.isHovered && isAIAssistantSession(this.session)
|
||||
isAIAssistantSession(this.session)
|
||||
? html`
|
||||
<button
|
||||
class="bg-transparent border-0 p-0 cursor-pointer opacity-50 hover:opacity-100 transition-opacity duration-200 text-accent-primary"
|
||||
class="bg-transparent border-0 p-0 cursor-pointer transition-opacity duration-200 text-accent-primary magic-button flex-shrink-0 ${this.isHovered ? 'opacity-50 hover:opacity-100' : 'opacity-0'}"
|
||||
@click=${(e: Event) => {
|
||||
e.stopPropagation();
|
||||
this.handleMagicButton();
|
||||
|
|
@ -170,12 +178,23 @@ export class SessionHeader extends LitElement {
|
|||
<path d="M9 1a1 1 0 100 2 1 1 0 000-2zM5 0a1 1 0 100 2 1 1 0 000-2zM2 3a1 1 0 100 2 1 1 0 000-2zM14 6a1 1 0 100 2 1 1 0 000-2zM15 10a1 1 0 100 2 1 1 0 000-2zM12 13a1 1 0 100 2 1 1 0 000-2z" opacity="0.5"/>
|
||||
</svg>
|
||||
</button>
|
||||
<style>
|
||||
/* Always show magic button on touch devices */
|
||||
@media (hover: none) and (pointer: coarse) {
|
||||
.magic-button {
|
||||
opacity: 0.5 !important;
|
||||
}
|
||||
.magic-button:hover {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
`
|
||||
: ''
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-xs opacity-75 mt-0.5 overflow-hidden">
|
||||
<div class="text-xs opacity-75 mt-0.5 truncate">
|
||||
<clickable-path
|
||||
.path=${this.session.workingDir}
|
||||
.iconSize=${12}
|
||||
|
|
@ -183,54 +202,68 @@ export class SessionHeader extends LitElement {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-xs flex-shrink-0 ml-2 relative">
|
||||
<notification-status
|
||||
@open-settings=${() => this.onOpenSettings?.()}
|
||||
></notification-status>
|
||||
<button
|
||||
class="bg-dark-bg-elevated border border-dark-border rounded-lg p-2 font-mono text-dark-text-muted transition-all duration-200 hover:text-accent-primary hover:bg-dark-surface-hover hover:border-accent-primary hover:shadow-sm flex-shrink-0"
|
||||
@click=${(e: Event) => {
|
||||
e.stopPropagation();
|
||||
this.onOpenFileBrowser?.();
|
||||
}}
|
||||
title="Browse Files (⌘O)"
|
||||
data-testid="file-browser-button"
|
||||
>
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
|
||||
<path
|
||||
d="M1.75 1h5.5c.966 0 1.75.784 1.75 1.75v1h4c.966 0 1.75.784 1.75 1.75v7.75A1.75 1.75 0 0113 15H3a1.75 1.75 0 01-1.75-1.75V2.75C1.25 1.784 1.784 1 1.75 1zM2.75 2.5v10.75c0 .138.112.25.25.25h10a.25.25 0 00.25-.25V5.5a.25.25 0 00-.25-.25H8.75v-2.5a.25.25 0 00-.25-.25h-5.5a.25.25 0 00-.25.25z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
class="bg-dark-bg-elevated border border-dark-border rounded-lg p-2 font-mono text-dark-text-muted transition-all duration-200 hover:text-accent-primary hover:bg-dark-surface-hover hover:border-accent-primary hover:shadow-sm flex-shrink-0"
|
||||
@click=${() => this.onScreenshare?.()}
|
||||
title="Start Screenshare"
|
||||
>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<rect x="2" y="3" width="20" height="14" rx="2"/>
|
||||
<line x1="8" y1="21" x2="16" y2="21"/>
|
||||
<line x1="12" y1="17" x2="12" y2="21"/>
|
||||
<circle cx="12" cy="10" r="3" fill="currentColor" stroke="none"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
class="bg-dark-bg-elevated border border-dark-border rounded-lg px-3 py-2 font-mono text-xs text-dark-text-muted transition-all duration-200 hover:text-accent-primary hover:bg-dark-surface-hover hover:border-accent-primary hover:shadow-sm flex-shrink-0 width-selector-button"
|
||||
@click=${() => this.onMaxWidthToggle?.()}
|
||||
title="${this.widthTooltip}"
|
||||
>
|
||||
${this.widthLabel}
|
||||
</button>
|
||||
<width-selector
|
||||
.visible=${this.showWidthSelector}
|
||||
.terminalMaxCols=${this.terminalMaxCols}
|
||||
.terminalFontSize=${this.terminalFontSize}
|
||||
.customWidth=${this.customWidth}
|
||||
.onWidthSelect=${(width: number) => this.onWidthSelect?.(width)}
|
||||
.onFontSizeChange=${(size: number) => this.onFontSizeChange?.(size)}
|
||||
.onClose=${() => this.handleCloseWidthSelector()}
|
||||
></width-selector>
|
||||
<div class="flex flex-col items-end gap-0">
|
||||
<div class="flex items-center gap-2 text-xs flex-shrink-0 ml-2">
|
||||
<!-- Notification status - desktop only -->
|
||||
<div class="hidden sm:block">
|
||||
<notification-status
|
||||
@open-settings=${() => this.onOpenSettings?.()}
|
||||
></notification-status>
|
||||
</div>
|
||||
|
||||
<!-- Desktop buttons - hidden on mobile -->
|
||||
<div class="hidden sm:flex items-center gap-2">
|
||||
<button
|
||||
class="bg-dark-bg-elevated border border-dark-border rounded-lg p-2 font-mono text-dark-text-muted transition-all duration-200 hover:text-accent-primary hover:bg-dark-surface-hover hover:border-accent-primary hover:shadow-sm flex-shrink-0"
|
||||
@click=${(e: Event) => {
|
||||
e.stopPropagation();
|
||||
this.onOpenFileBrowser?.();
|
||||
}}
|
||||
title="Browse Files (⌘O)"
|
||||
data-testid="file-browser-button"
|
||||
>
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
|
||||
<path
|
||||
d="M1.75 1h5.5c.966 0 1.75.784 1.75 1.75v1h4c.966 0 1.75.784 1.75 1.75v7.75A1.75 1.75 0 0113 15H3a1.75 1.75 0 01-1.75-1.75V2.75C1.25 1.784 1.784 1 1.75 1zM2.75 2.5v10.75c0 .138.112.25.25.25h10a.25.25 0 00.25-.25V5.5a.25.25 0 00-.25-.25H8.75v-2.5a.25.25 0 00-.25-.25h-5.5a.25.25 0 00-.25.25z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
class="bg-dark-bg-elevated border border-dark-border rounded-lg p-2 font-mono text-dark-text-muted transition-all duration-200 hover:text-accent-primary hover:bg-dark-surface-hover hover:border-accent-primary hover:shadow-sm flex-shrink-0"
|
||||
@click=${() => this.onScreenshare?.()}
|
||||
title="Start Screenshare"
|
||||
>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<rect x="2" y="3" width="20" height="14" rx="2"/>
|
||||
<line x1="8" y1="21" x2="16" y2="21"/>
|
||||
<line x1="12" y1="17" x2="12" y2="21"/>
|
||||
<circle cx="12" cy="10" r="3" fill="currentColor" stroke="none"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
class="bg-dark-bg-elevated border border-dark-border rounded-lg px-3 py-2 font-mono text-xs text-dark-text-muted transition-all duration-200 hover:text-accent-primary hover:bg-dark-surface-hover hover:border-accent-primary hover:shadow-sm flex-shrink-0 width-selector-button"
|
||||
@click=${() => this.onMaxWidthToggle?.()}
|
||||
title="${this.widthTooltip}"
|
||||
>
|
||||
${this.widthLabel}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Mobile menu - visible only on mobile -->
|
||||
<div class="flex sm:hidden flex-shrink-0">
|
||||
<mobile-menu
|
||||
.session=${this.session}
|
||||
.widthLabel=${this.widthLabel}
|
||||
.widthTooltip=${this.widthTooltip}
|
||||
.onOpenFileBrowser=${this.onOpenFileBrowser}
|
||||
.onScreenshare=${this.onScreenshare}
|
||||
.onMaxWidthToggle=${this.onMaxWidthToggle}
|
||||
.onOpenSettings=${this.onOpenSettings}
|
||||
.onCreateSession=${this.onCreateSession}
|
||||
></mobile-menu>
|
||||
</div>
|
||||
|
||||
<!-- Status indicator - desktop only (mobile shows it on the left) -->
|
||||
<div class="hidden sm:flex flex-col items-end gap-0">
|
||||
<span class="text-xs flex items-center gap-2 font-medium ${
|
||||
this.getStatusText() === 'running' ? 'text-status-success' : 'text-status-warning'
|
||||
}">
|
||||
|
|
@ -244,18 +277,6 @@ export class SessionHeader extends LitElement {
|
|||
</div>
|
||||
${this.getStatusText().toUpperCase()}
|
||||
</span>
|
||||
${
|
||||
this.terminalCols > 0 && this.terminalRows > 0
|
||||
? html`
|
||||
<span
|
||||
class="text-dark-text-muted text-xs opacity-60"
|
||||
style="font-size: 10px; line-height: 1;"
|
||||
>
|
||||
${this.terminalCols}×${this.terminalRows}
|
||||
</span>
|
||||
`
|
||||
: ''
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,47 @@
|
|||
/**
|
||||
* Terminal Dimensions Component
|
||||
*
|
||||
* Displays terminal dimensions (cols x rows) in a non-reactive way
|
||||
* to prevent unnecessary re-renders during terminal resizes.
|
||||
*/
|
||||
import { html, LitElement } from 'lit';
|
||||
import { customElement, property } from 'lit/decorators.js';
|
||||
|
||||
@customElement('terminal-dimensions')
|
||||
export class TerminalDimensions extends LitElement {
|
||||
// Disable shadow DOM to use Tailwind
|
||||
createRenderRoot() {
|
||||
return this;
|
||||
}
|
||||
|
||||
@property({ type: Number }) cols = 0;
|
||||
@property({ type: Number }) rows = 0;
|
||||
|
||||
// Override shouldUpdate to prevent re-renders during rapid dimension changes
|
||||
// Only update if dimensions actually changed
|
||||
shouldUpdate(changedProperties: Map<string, unknown>) {
|
||||
if (changedProperties.has('cols') || changedProperties.has('rows')) {
|
||||
const colsChanged =
|
||||
changedProperties.has('cols') && changedProperties.get('cols') !== this.cols;
|
||||
const rowsChanged =
|
||||
changedProperties.has('rows') && changedProperties.get('rows') !== this.rows;
|
||||
return colsChanged || rowsChanged;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
render() {
|
||||
if (this.cols === 0 || this.rows === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return html`
|
||||
<span
|
||||
class="hidden sm:inline text-dark-text-muted text-xs opacity-60"
|
||||
style="font-size: 10px; line-height: 1;"
|
||||
>
|
||||
${this.cols}×${this.rows}
|
||||
</span>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
|
@ -23,6 +23,7 @@ export class WidthSelector extends LitElement {
|
|||
@property({ type: Function }) onWidthSelect?: (width: number) => void;
|
||||
@property({ type: Function }) onFontSizeChange?: (size: number) => void;
|
||||
@property({ type: Function }) onClose?: () => void;
|
||||
@property({ type: Boolean }) isMobile = false;
|
||||
|
||||
private handleCustomWidthInput(e: Event) {
|
||||
const input = e.target as HTMLInputElement;
|
||||
|
|
@ -51,12 +52,31 @@ export class WidthSelector extends LitElement {
|
|||
if (!this.visible) return null;
|
||||
|
||||
return html`
|
||||
<!-- Backdrop to close on outside click -->
|
||||
<div
|
||||
class="fixed inset-0 z-40"
|
||||
@click=${() => this.onClose?.()}
|
||||
></div>
|
||||
|
||||
<!-- Width selector modal -->
|
||||
<div
|
||||
class="width-selector-container absolute top-full mt-2 right-0 bg-dark-bg-elevated border border-dark-border rounded-lg shadow-elevated min-w-[280px] animate-fade-in"
|
||||
class="width-selector-container fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-dark-bg-elevated border border-dark-border rounded-lg shadow-elevated min-w-[280px] max-w-[90vw] animate-fade-in"
|
||||
style="z-index: ${Z_INDEX.WIDTH_SELECTOR_DROPDOWN};"
|
||||
>
|
||||
<div class="p-4">
|
||||
<div class="text-sm font-semibold text-dark-text mb-3">Terminal Width</div>
|
||||
<div class="flex items-center justify-between mb-3">
|
||||
<div class="text-sm font-semibold text-dark-text">Terminal Width</div>
|
||||
<!-- Close button for mobile -->
|
||||
<button
|
||||
class="sm:hidden p-1.5 rounded-md text-dark-text-muted hover:text-dark-text hover:bg-dark-surface-hover transition-all duration-200"
|
||||
@click=${() => this.onClose?.()}
|
||||
aria-label="Close width selector"
|
||||
>
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
${COMMON_TERMINAL_WIDTHS.map(
|
||||
(width) => html`
|
||||
<button
|
||||
|
|
|
|||
|
|
@ -21,6 +21,9 @@ interface TestTerminal extends Terminal {
|
|||
measureCharacterWidth(): number;
|
||||
fitTerminal(): void;
|
||||
userOverrideWidth: boolean;
|
||||
resizeCoordinator: {
|
||||
forceUpdateDimensions(cols: number, rows: number): void;
|
||||
};
|
||||
}
|
||||
|
||||
describe('Terminal', () => {
|
||||
|
|
@ -604,6 +607,9 @@ describe('Terminal', () => {
|
|||
element.cols = currentCols;
|
||||
element.rows = currentRows;
|
||||
|
||||
// Initialize ResizeCoordinator with current dimensions
|
||||
(element as TestTerminal).resizeCoordinator.forceUpdateDimensions(currentCols, currentRows);
|
||||
|
||||
// Mock character width measurement
|
||||
vi.spyOn(element as TestTerminal, 'measureCharacterWidth').mockReturnValue(8);
|
||||
|
||||
|
|
@ -690,6 +696,9 @@ describe('Terminal', () => {
|
|||
|
||||
vi.spyOn(element as TestTerminal, 'measureCharacterWidth').mockReturnValue(8);
|
||||
|
||||
// Initialize ResizeCoordinator with current dimensions
|
||||
(element as TestTerminal).resizeCoordinator.forceUpdateDimensions(currentCols, currentRows);
|
||||
|
||||
// Call fitTerminal multiple times
|
||||
(element as TestTerminal).fitTerminal();
|
||||
(element as TestTerminal).fitTerminal();
|
||||
|
|
@ -851,6 +860,9 @@ describe('Terminal', () => {
|
|||
|
||||
vi.spyOn(element as TestTerminal, 'measureCharacterWidth').mockReturnValue(8);
|
||||
|
||||
// Initialize ResizeCoordinator with current dimensions
|
||||
(element as TestTerminal).resizeCoordinator.forceUpdateDimensions(100, 30);
|
||||
|
||||
// Clear previous calls
|
||||
mockTerminal?.resize.mockClear();
|
||||
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@ import { html, LitElement, type PropertyValues } from 'lit';
|
|||
import { customElement, property, state } from 'lit/decorators.js';
|
||||
import { processKeyboardShortcuts } from '../utils/keyboard-shortcut-highlighter.js';
|
||||
import { createLogger } from '../utils/logger.js';
|
||||
import { ResizeCoordinator } from '../utils/resize-coordinator.js';
|
||||
import { UrlHighlighter } from '../utils/url-highlighter';
|
||||
|
||||
const logger = createLogger('terminal');
|
||||
|
|
@ -72,6 +73,7 @@ export class Terminal extends LitElement {
|
|||
private momentumVelocityX = 0;
|
||||
private momentumAnimation: number | null = null;
|
||||
private resizeObserver: ResizeObserver | null = null;
|
||||
private resizeCoordinator = new ResizeCoordinator();
|
||||
|
||||
// Operation queue for batching buffer modifications
|
||||
private operationQueue: (() => void | Promise<void>)[] = [];
|
||||
|
|
@ -134,7 +136,7 @@ export class Terminal extends LitElement {
|
|||
this.userOverrideWidth = stored === 'true';
|
||||
// Apply the loaded preference immediately
|
||||
if (this.container) {
|
||||
this.fitTerminal();
|
||||
this.resizeCoordinator.requestResize('property-change');
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
|
|
@ -157,7 +159,7 @@ export class Terminal extends LitElement {
|
|||
}
|
||||
// Recalculate terminal dimensions when font size changes
|
||||
if (this.terminal && this.container) {
|
||||
this.fitTerminal();
|
||||
this.resizeCoordinator.requestResize('property-change');
|
||||
}
|
||||
}
|
||||
if (changedProperties.has('fitHorizontally')) {
|
||||
|
|
@ -165,12 +167,12 @@ export class Terminal extends LitElement {
|
|||
// Restore original font size when turning off horizontal fitting
|
||||
this.fontSize = this.originalFontSize;
|
||||
}
|
||||
this.fitTerminal();
|
||||
this.resizeCoordinator.requestResize('property-change');
|
||||
}
|
||||
// If maxCols changed, trigger a resize
|
||||
if (changedProperties.has('maxCols')) {
|
||||
if (this.terminal && this.container) {
|
||||
this.fitTerminal();
|
||||
this.resizeCoordinator.requestResize('property-change');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -194,7 +196,7 @@ export class Terminal extends LitElement {
|
|||
}
|
||||
// Trigger a resize to apply the new setting
|
||||
if (this.container) {
|
||||
this.fitTerminal();
|
||||
this.resizeCoordinator.requestResize('property-change');
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -210,6 +212,10 @@ export class Terminal extends LitElement {
|
|||
this.resizeObserver = null;
|
||||
}
|
||||
|
||||
if (this.resizeCoordinator) {
|
||||
this.resizeCoordinator.destroy();
|
||||
}
|
||||
|
||||
if (this.terminal) {
|
||||
this.terminal.dispose();
|
||||
this.terminal = null;
|
||||
|
|
@ -219,6 +225,12 @@ export class Terminal extends LitElement {
|
|||
firstUpdated() {
|
||||
// Store the initial font size as original
|
||||
this.originalFontSize = this.fontSize;
|
||||
|
||||
// Set up resize coordinator callback
|
||||
this.resizeCoordinator.setResizeCallback((source: string) => {
|
||||
this.fitTerminal(source);
|
||||
});
|
||||
|
||||
this.initializeTerminal();
|
||||
}
|
||||
|
||||
|
|
@ -263,7 +275,7 @@ export class Terminal extends LitElement {
|
|||
const safeCols = Number.isFinite(this.cols) ? Math.floor(this.cols) : 80;
|
||||
const safeRows = Number.isFinite(this.rows) ? Math.floor(this.rows) : 24;
|
||||
this.terminal.resize(safeCols, safeRows);
|
||||
this.fitTerminal();
|
||||
this.resizeCoordinator.requestResize('property-change');
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -349,7 +361,7 @@ export class Terminal extends LitElement {
|
|||
return Number.isFinite(actualCharWidth) && actualCharWidth > 0 ? actualCharWidth : 8;
|
||||
}
|
||||
|
||||
private fitTerminal() {
|
||||
private fitTerminal(source?: string) {
|
||||
if (!this.terminal || !this.container) return;
|
||||
|
||||
const _oldActualRows = this.actualRows;
|
||||
|
|
@ -388,8 +400,9 @@ export class Terminal extends LitElement {
|
|||
const safeCols = Number.isFinite(this.cols) ? Math.floor(this.cols) : 80;
|
||||
const safeRows = Number.isFinite(this.rows) ? Math.floor(this.rows) : 24;
|
||||
|
||||
// Only resize if dimensions have actually changed
|
||||
if (safeCols !== this.terminal.cols || safeRows !== this.terminal.rows) {
|
||||
// Use resize coordinator to check if we should actually resize
|
||||
if (this.resizeCoordinator.shouldResize(safeCols, safeRows)) {
|
||||
logger.debug(`Resizing terminal (${source || 'unknown'}): ${safeCols}x${safeRows}`);
|
||||
this.terminal.resize(safeCols, safeRows);
|
||||
|
||||
// Dispatch resize event for backend synchronization
|
||||
|
|
@ -399,6 +412,8 @@ export class Terminal extends LitElement {
|
|||
bubbles: true,
|
||||
})
|
||||
);
|
||||
} else {
|
||||
logger.debug(`Skipping resize (${source || 'unknown'}): dimensions unchanged`);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
|
|
@ -444,8 +459,9 @@ export class Terminal extends LitElement {
|
|||
const safeCols = Number.isFinite(this.cols) ? Math.floor(this.cols) : 80;
|
||||
const safeRows = Number.isFinite(this.rows) ? Math.floor(this.rows) : 24;
|
||||
|
||||
// Only resize if dimensions have actually changed
|
||||
if (safeCols !== this.terminal.cols || safeRows !== this.terminal.rows) {
|
||||
// Use resize coordinator to check if we should actually resize
|
||||
if (this.resizeCoordinator.shouldResize(safeCols, safeRows)) {
|
||||
logger.debug(`Resizing terminal (${source || 'unknown'}): ${safeCols}x${safeRows}`);
|
||||
this.terminal.resize(safeCols, safeRows);
|
||||
|
||||
// Dispatch resize event for backend synchronization
|
||||
|
|
@ -455,6 +471,8 @@ export class Terminal extends LitElement {
|
|||
bubbles: true,
|
||||
})
|
||||
);
|
||||
} else {
|
||||
logger.debug(`Skipping resize (${source || 'unknown'}): dimensions unchanged`);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -485,18 +503,27 @@ export class Terminal extends LitElement {
|
|||
if (!this.container) return;
|
||||
|
||||
this.resizeObserver = new ResizeObserver(() => {
|
||||
if (this.resizeTimeout) {
|
||||
clearTimeout(this.resizeTimeout);
|
||||
}
|
||||
this.resizeTimeout = setTimeout(() => {
|
||||
this.fitTerminal();
|
||||
}, 50);
|
||||
this.resizeCoordinator.requestResize('ResizeObserver');
|
||||
});
|
||||
this.resizeObserver.observe(this.container);
|
||||
|
||||
window.addEventListener('resize', () => {
|
||||
this.fitTerminal();
|
||||
this.resizeCoordinator.requestResize('window-resize');
|
||||
});
|
||||
|
||||
// On mobile, delay initial resize to let everything settle
|
||||
if (this.resizeCoordinator.getIsMobile()) {
|
||||
setTimeout(() => {
|
||||
this.resizeCoordinator.requestResize('initial-mobile');
|
||||
// Mark initial resize complete after a short delay
|
||||
setTimeout(() => {
|
||||
this.resizeCoordinator.markInitialResizeComplete();
|
||||
}, 100);
|
||||
}, 100);
|
||||
} else {
|
||||
// Desktop: immediate initial resize
|
||||
this.resizeCoordinator.requestResize('initial-desktop');
|
||||
}
|
||||
}
|
||||
|
||||
private setupScrolling() {
|
||||
|
|
@ -1083,7 +1110,7 @@ export class Terminal extends LitElement {
|
|||
this.queueRenderOperation(() => {
|
||||
if (!this.terminal) return;
|
||||
|
||||
this.fitTerminal();
|
||||
this.resizeCoordinator.requestResize('property-change');
|
||||
|
||||
const buffer = this.terminal.buffer.active;
|
||||
const lineHeight = this.fontSize * 1.2;
|
||||
|
|
@ -1297,7 +1324,7 @@ export class Terminal extends LitElement {
|
|||
}
|
||||
|
||||
// Recalculate fit
|
||||
this.fitTerminal();
|
||||
this.resizeCoordinator.requestResize('fit-mode-change');
|
||||
|
||||
// Restore scroll position - prioritize staying at bottom if we were there
|
||||
if (wasAtBottom) {
|
||||
|
|
|
|||
119
web/src/client/utils/resize-coordinator.ts
Normal file
119
web/src/client/utils/resize-coordinator.ts
Normal file
|
|
@ -0,0 +1,119 @@
|
|||
/**
|
||||
* Resize Coordinator
|
||||
*
|
||||
* Centralizes and coordinates all terminal resize requests to prevent multiple
|
||||
* resize events from causing terminal reflows. Essential for mobile stability.
|
||||
*/
|
||||
|
||||
export interface ResizeDimensions {
|
||||
cols: number;
|
||||
rows: number;
|
||||
}
|
||||
|
||||
export class ResizeCoordinator {
|
||||
private pendingResize: number | null = null;
|
||||
private lastDimensions: ResizeDimensions | null = null;
|
||||
private resizeCallback: ((source: string) => void) | null = null;
|
||||
private initialResizeComplete = false;
|
||||
private resizeSources = new Set<string>();
|
||||
|
||||
/**
|
||||
* Set the callback function to be called when resize should happen
|
||||
*/
|
||||
setResizeCallback(callback: (source: string) => void) {
|
||||
this.resizeCallback = callback;
|
||||
}
|
||||
|
||||
/**
|
||||
* Request a resize from a specific source
|
||||
* All resize requests are coalesced into a single animation frame
|
||||
*/
|
||||
requestResize(source: string) {
|
||||
this.resizeSources.add(source);
|
||||
|
||||
// Cancel any pending resize
|
||||
if (this.pendingResize) {
|
||||
cancelAnimationFrame(this.pendingResize);
|
||||
}
|
||||
|
||||
// Schedule resize for next animation frame
|
||||
this.pendingResize = requestAnimationFrame(() => {
|
||||
const sources = Array.from(this.resizeSources).join(', ');
|
||||
this.resizeSources.clear();
|
||||
|
||||
if (this.resizeCallback) {
|
||||
this.resizeCallback(sources);
|
||||
}
|
||||
|
||||
this.pendingResize = null;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if dimensions have actually changed
|
||||
*/
|
||||
shouldResize(cols: number, rows: number): boolean {
|
||||
const isMobile = this.getIsMobile();
|
||||
|
||||
// On mobile, after initial resize, never resize again
|
||||
// This prevents rotation and keyboard events from causing reflows
|
||||
if (isMobile && this.initialResizeComplete) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!this.lastDimensions) {
|
||||
this.lastDimensions = { cols, rows };
|
||||
return true;
|
||||
}
|
||||
|
||||
const changed = this.lastDimensions.cols !== cols || this.lastDimensions.rows !== rows;
|
||||
|
||||
if (changed) {
|
||||
this.lastDimensions = { cols, rows };
|
||||
}
|
||||
|
||||
return changed;
|
||||
}
|
||||
|
||||
/**
|
||||
* Mark initial resize as complete
|
||||
* After this, mobile will only resize on width changes
|
||||
*/
|
||||
markInitialResizeComplete() {
|
||||
this.initialResizeComplete = true;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get last known dimensions
|
||||
*/
|
||||
getLastDimensions(): ResizeDimensions | null {
|
||||
return this.lastDimensions;
|
||||
}
|
||||
|
||||
/**
|
||||
* Force update dimensions (for explicit user actions)
|
||||
*/
|
||||
forceUpdateDimensions(cols: number, rows: number) {
|
||||
this.lastDimensions = { cols, rows };
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if running on mobile (dynamically checks on each call)
|
||||
*/
|
||||
getIsMobile(): boolean {
|
||||
// Check viewport width and touch capability dynamically
|
||||
// This handles orientation changes and window resizing
|
||||
return window.innerWidth < 768 && 'ontouchstart' in window;
|
||||
}
|
||||
|
||||
/**
|
||||
* Cleanup
|
||||
*/
|
||||
destroy() {
|
||||
if (this.pendingResize) {
|
||||
cancelAnimationFrame(this.pendingResize);
|
||||
}
|
||||
this.resizeCallback = null;
|
||||
this.resizeSources.clear();
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue