+
+ ${this.showWidthSelector
+ ? html`
+
+
+
Terminal Width
+ ${COMMON_TERMINAL_WIDTHS.map(
+ (width) => html`
+
+ `
+ )}
+
+
Custom (20-500)
+
+
+
+
+
+
+
+ `
+ : ''}
@@ -931,6 +1067,7 @@ export class SessionView extends LitElement {
.rows=${24}
.fontSize=${14}
.fitHorizontally=${false}
+ .maxCols=${this.terminalMaxCols}
class="w-full h-full"
>
diff --git a/web/src/client/components/terminal.ts b/web/src/client/components/terminal.ts
index 078327f5..83ef3ee0 100644
--- a/web/src/client/components/terminal.ts
+++ b/web/src/client/components/terminal.ts
@@ -1,4 +1,4 @@
-import { LitElement, html } from 'lit';
+import { LitElement, html, PropertyValues } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
import { Terminal as XtermTerminal, IBufferLine, IBufferCell } from '@xterm/headless';
import { UrlHighlighter } from '../utils/url-highlighter.js';
@@ -15,6 +15,7 @@ export class Terminal extends LitElement {
@property({ type: Number }) rows = 24;
@property({ type: Number }) fontSize = 14;
@property({ type: Boolean }) fitHorizontally = false;
+ @property({ type: Number }) maxCols = 0; // 0 means no limit
private originalFontSize: number = 14;
@@ -87,6 +88,33 @@ export class Terminal extends LitElement {
this.debugMode = new URLSearchParams(window.location.search).has('debug');
}
+ updated(changedProperties: PropertyValues) {
+ if (changedProperties.has('cols') || changedProperties.has('rows')) {
+ if (this.terminal) {
+ this.reinitializeTerminal();
+ }
+ }
+ if (changedProperties.has('fontSize')) {
+ // Store original font size when it changes (but not during horizontal fitting)
+ if (!this.fitHorizontally) {
+ this.originalFontSize = this.fontSize;
+ }
+ }
+ if (changedProperties.has('fitHorizontally')) {
+ if (!this.fitHorizontally) {
+ // Restore original font size when turning off horizontal fitting
+ this.fontSize = this.originalFontSize;
+ }
+ this.fitTerminal();
+ }
+ // If maxCols changed, trigger a resize
+ if (changedProperties.has('maxCols')) {
+ if (this.terminal && this.container) {
+ this.fitTerminal();
+ }
+ }
+ }
+
disconnectedCallback() {
this.cleanup();
super.disconnectedCallback();
@@ -110,27 +138,6 @@ export class Terminal extends LitElement {
}
}
- updated(changedProperties: Map
) {
- if (changedProperties.has('cols') || changedProperties.has('rows')) {
- if (this.terminal) {
- this.reinitializeTerminal();
- }
- }
- if (changedProperties.has('fontSize')) {
- // Store original font size when it changes (but not during horizontal fitting)
- if (!this.fitHorizontally) {
- this.originalFontSize = this.fontSize;
- }
- }
- if (changedProperties.has('fitHorizontally')) {
- if (!this.fitHorizontally) {
- // Restore original font size when turning off horizontal fitting
- this.fontSize = this.originalFontSize;
- }
- this.fitTerminal();
- }
- }
-
firstUpdated() {
// Store the initial font size as original
this.originalFontSize = this.fontSize;
@@ -303,7 +310,9 @@ export class Terminal extends LitElement {
const lineHeight = this.fontSize * 1.2;
const charWidth = this.measureCharacterWidth();
- this.cols = Math.max(20, Math.floor(containerWidth / charWidth)) - 1; // This -1 should not be needed, but it is...
+ const calculatedCols = Math.max(20, Math.floor(containerWidth / charWidth)) - 1; // This -1 should not be needed, but it is...
+ // Apply maxCols constraint if set (0 means no limit)
+ this.cols = this.maxCols > 0 ? Math.min(calculatedCols, this.maxCols) : calculatedCols;
this.rows = Math.max(6, Math.floor(containerHeight / lineHeight));
this.actualRows = this.rows;
diff --git a/web/src/client/utils/terminal-preferences.ts b/web/src/client/utils/terminal-preferences.ts
new file mode 100644
index 00000000..584b757d
--- /dev/null
+++ b/web/src/client/utils/terminal-preferences.ts
@@ -0,0 +1,102 @@
+/**
+ * Terminal preferences management
+ * Handles saving and loading terminal-related user preferences
+ */
+
+export interface TerminalPreferences {
+ maxCols: number; // 0 means no limit, positive numbers set max width
+ fontSize: number;
+ fitHorizontally: boolean;
+}
+
+// Common terminal widths
+export const COMMON_TERMINAL_WIDTHS = [
+ { value: 0, label: '∞', description: 'Unlimited (full width)' },
+ { value: 80, label: '80', description: 'Classic terminal' },
+ { value: 100, label: '100', description: 'Modern standard' },
+ { value: 120, label: '120', description: 'Wide terminal' },
+ { value: 132, label: '132', description: 'Mainframe width' },
+ { value: 160, label: '160', description: 'Ultra-wide' },
+] as const;
+
+const DEFAULT_PREFERENCES: TerminalPreferences = {
+ maxCols: 0, // No limit by default - take as much as possible
+ fontSize: 14,
+ fitHorizontally: false,
+};
+
+const STORAGE_KEY_TERMINAL_PREFS = 'vibetunnel_terminal_preferences';
+
+export class TerminalPreferencesManager {
+ private static instance: TerminalPreferencesManager;
+ private preferences: TerminalPreferences;
+
+ private constructor() {
+ this.preferences = this.loadPreferences();
+ }
+
+ static getInstance(): TerminalPreferencesManager {
+ if (!TerminalPreferencesManager.instance) {
+ TerminalPreferencesManager.instance = new TerminalPreferencesManager();
+ }
+ return TerminalPreferencesManager.instance;
+ }
+
+ private loadPreferences(): TerminalPreferences {
+ try {
+ const saved = localStorage.getItem(STORAGE_KEY_TERMINAL_PREFS);
+ if (saved) {
+ const parsed = JSON.parse(saved);
+ // Merge with defaults to handle new properties
+ return { ...DEFAULT_PREFERENCES, ...parsed };
+ }
+ } catch (error) {
+ console.warn('Failed to load terminal preferences:', error);
+ }
+ return { ...DEFAULT_PREFERENCES };
+ }
+
+ private savePreferences() {
+ try {
+ localStorage.setItem(STORAGE_KEY_TERMINAL_PREFS, JSON.stringify(this.preferences));
+ } catch (error) {
+ console.warn('Failed to save terminal preferences:', error);
+ }
+ }
+
+ getMaxCols(): number {
+ return this.preferences.maxCols;
+ }
+
+ setMaxCols(maxCols: number) {
+ this.preferences.maxCols = Math.max(0, maxCols); // Ensure non-negative
+ this.savePreferences();
+ }
+
+ getFontSize(): number {
+ return this.preferences.fontSize;
+ }
+
+ setFontSize(fontSize: number) {
+ this.preferences.fontSize = Math.max(8, Math.min(32, fontSize)); // Reasonable bounds
+ this.savePreferences();
+ }
+
+ getFitHorizontally(): boolean {
+ return this.preferences.fitHorizontally;
+ }
+
+ setFitHorizontally(fitHorizontally: boolean) {
+ this.preferences.fitHorizontally = fitHorizontally;
+ this.savePreferences();
+ }
+
+ getPreferences(): TerminalPreferences {
+ return { ...this.preferences };
+ }
+
+ resetToDefaults() {
+ this.preferences = { ...DEFAULT_PREFERENCES };
+ this.savePreferences();
+ }
+}