enh: open terminal

2026-03-02 14:49:02 -06:00
parent 75683e5197
commit 4f6cb771f1
5 changed files with 622 additions and 547 deletions
@@ -36,12 +36,47 @@
 	import FileNavToolbar from './FileNav/FileNavToolbar.svelte';
 	import FilePreview from './FileNav/FilePreview.svelte';
 	import FileEntryRow from './FileNav/FileEntryRow.svelte';
+	import XTerminal from './XTerminal.svelte';

 	const i18n = getContext('i18n');

 	export let onAttach: ((blob: Blob, name: string, contentType: string) => void) | null = null;
 	export let overlay = false;

+	// ── Terminal panel state ────────────────────────────────────────────
+	let terminalExpanded = false;
+	let terminalHeight = 200; // px, default when expanded
+	let isDraggingHandle = false;
+	let containerEl: HTMLElement;
+	let terminalConnected = false;
+	let terminalConnecting = false;
+
+	const toggleTerminal = () => {
+		terminalExpanded = !terminalExpanded;
+	};
+
+	const onHandleMouseDown = (e: MouseEvent) => {
+		e.preventDefault();
+		isDraggingHandle = true;
+		const startY = e.clientY;
+		const startHeight = terminalHeight;
+
+		const onMouseMove = (ev: MouseEvent) => {
+			const delta = startY - ev.clientY;
+			const maxH = containerEl ? containerEl.clientHeight - 100 : 500;
+			terminalHeight = Math.max(80, Math.min(maxH, startHeight + delta));
+		};
+
+		const onMouseUp = () => {
+			isDraggingHandle = false;
+			window.removeEventListener('mousemove', onMouseMove);
+			window.removeEventListener('mouseup', onMouseUp);
+		};
+
+		window.addEventListener('mousemove', onMouseMove);
+		window.addEventListener('mouseup', onMouseUp);
+	};
+
 	// ── Directory state ──────────────────────────────────────────────────
 	let currentPath = savedPath;
 	let entries: FileEntry[] = [];
@@ -454,6 +489,7 @@
 	</div>
 {:else}
 	<div
+		bind:this={containerEl}
 		class="flex flex-col h-full min-h-0 relative"
 		on:dragover={handleDragOver}
 		on:dragleave={() => (isDragOver = false)}
@@ -754,5 +790,55 @@
 				{/if}
 			{/if}
 		</div>
+
+		<!-- Terminal bottom panel -->
+		<div class="shrink-0 border-t border-gray-100 dark:border-gray-800 bg-white dark:bg-gray-850">
+			{#if terminalExpanded}
+				<!-- Drag handle (at top of panel) -->
+				<!-- svelte-ignore a11y-no-static-element-interactions -->
+				<div
+					class="h-1 cursor-row-resize hover:bg-blue-400/30 transition group relative"
+					on:mousedown={onHandleMouseDown}
+				>
+					<div class="absolute inset-x-0 -top-1 -bottom-1" />
+				</div>
+			{/if}
+
+			<!-- Toggle header (full-width button) -->
+			<button
+				class="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800/50 transition"
+				on:click={toggleTerminal}
+			>
+				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-3.5">
+					<path fill-rule="evenodd" d="M3.25 3A2.25 2.25 0 0 0 1 5.25v9.5A2.25 2.25 0 0 0 3.25 17h13.5A2.25 2.25 0 0 0 19 14.75v-9.5A2.25 2.25 0 0 0 16.75 3H3.25Zm.943 8.752a.75.75 0 0 1 .055-1.06L6.128 9l-1.88-1.693a.75.75 0 1 1 1.004-1.114l2.5 2.25a.75.75 0 0 1 0 1.114l-2.5 2.25a.75.75 0 0 1-1.06-.055ZM9.75 10.25a.75.75 0 0 0 0 1.5h2.5a.75.75 0 0 0 0-1.5h-2.5Z" clip-rule="evenodd" />
+				</svg>
+				<span class="font-medium">{$i18n.t('Terminal')}</span>
+
+				{#if terminalExpanded}
+					<div
+						class="w-1.5 h-1.5 rounded-full transition-colors {terminalConnected
+							? 'bg-emerald-500'
+							: terminalConnecting
+								? 'bg-yellow-500 animate-pulse'
+								: 'bg-gray-400'}"
+					/>
+				{/if}
+
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					viewBox="0 0 20 20"
+					fill="currentColor"
+					class="size-3 ml-auto transition-transform {terminalExpanded ? 'rotate-180' : ''}"
+				>
+					<path fill-rule="evenodd" d="M9.47 6.47a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 1 1-1.06 1.06L10 8.06l-3.72 3.72a.75.75 0 0 1-1.06-1.06l4.25-4.25Z" clip-rule="evenodd" />
+				</svg>
+			</button>
+
+			{#if terminalExpanded}
+				<div style="height: {terminalHeight}px" class="min-h-0">
+					<XTerminal {overlay} bind:connected={terminalConnected} bind:connecting={terminalConnecting} />
+				</div>
+			{/if}
+		</div>
 	</div>
 {/if}
@@ -0,0 +1,261 @@
+<script lang="ts">
+	import { onMount, onDestroy, getContext } from 'svelte';
+	import { Terminal } from '@xterm/xterm';
+	import { FitAddon } from '@xterm/addon-fit';
+	import { WebLinksAddon } from '@xterm/addon-web-links';
+	import '@xterm/xterm/css/xterm.css';
+
+	import {
+		terminalServers,
+		settings,
+		selectedTerminalId,
+		user
+	} from '$lib/stores';
+	import { WEBUI_API_BASE_URL } from '$lib/constants';
+	import Tooltip from '$lib/components/common/Tooltip.svelte';
+
+	const i18n = getContext('i18n');
+
+	export let overlay = false;
+
+	let terminalEl: HTMLDivElement;
+	let term: Terminal | null = null;
+	let fitAddon: FitAddon | null = null;
+	let ws: WebSocket | null = null;
+	export let connected = false;
+	export let connecting = false;
+	let resizeObserver: ResizeObserver | null = null;
+
+	// Resolve the active terminal server's info for the WebSocket URL
+	const getTerminalInfo = (): { serverId: string; baseUrl: string } | null => {
+		// System terminal (admin-configured, has an `id`)
+		const systemTerminals = ($terminalServers ?? []).filter((t: any) => t.id);
+		const systemMatch = systemTerminals.find((t: any) => t.id === $selectedTerminalId);
+		if (systemMatch) {
+			// For system terminals, WS goes through the Open WebUI backend proxy
+			return { serverId: systemMatch.id, baseUrl: WEBUI_API_BASE_URL };
+		}
+
+		// Direct terminal (user-configured, matched by URL)
+		const directTerminals = ($settings?.terminalServers ?? []).filter((s: any) => s.url);
+		const directMatch = directTerminals.find((s: any) => s.url === $selectedTerminalId);
+		if (directMatch) {
+			// For direct terminals, construct WS URL from the server URL directly
+			return { serverId: '__direct__', baseUrl: directMatch.url };
+		}
+
+		return null;
+	};
+
+	const connect = async () => {
+		if (ws) disconnect();
+
+		const info = getTerminalInfo();
+		if (!info) return;
+
+		connecting = true;
+
+		const token = localStorage.getItem('token') ?? '';
+
+		try {
+			let sessionId: string;
+			let wsUrl: string;
+			let authToken: string;
+
+			if (info.serverId === '__direct__') {
+				// Direct connection to open-terminal
+				const base = info.baseUrl.replace(/\/$/, '');
+				const directTerminals = ($settings?.terminalServers ?? []).filter((s: any) => s.url);
+				const directMatch = directTerminals.find(
+					(s: any) => s.url === $selectedTerminalId
+				);
+				const apiKey = directMatch?.key ?? '';
+				authToken = apiKey;
+
+				// Create session
+				const res = await fetch(`${base}/api/terminals`, {
+					method: 'POST',
+					headers: { Authorization: `Bearer ${apiKey}` }
+				});
+				if (!res.ok) throw new Error(`Failed to create session: ${res.status}`);
+				const session = await res.json();
+				sessionId = session.id;
+
+				const wsBase = base.replace(/^https:/, 'wss:').replace(/^http:/, 'ws:');
+				wsUrl = `${wsBase}/api/terminals/${sessionId}`;
+			} else {
+				// System terminal — proxy through Open WebUI backend
+				const base = info.baseUrl.replace(/\/$/, '');
+				authToken = token;
+
+				// Create session via proxy
+				const res = await fetch(`${base}/terminals/${info.serverId}/api/terminals`, {
+					method: 'POST',
+					headers: { Authorization: `Bearer ${token}` }
+				});
+				if (!res.ok) throw new Error(`Failed to create session: ${res.status}`);
+				const session = await res.json();
+				sessionId = session.id;
+
+				const wsBase = base.replace(/^https:/, 'wss:').replace(/^http:/, 'ws:');
+				wsUrl = `${wsBase}/terminals/${info.serverId}/api/terminals/${sessionId}`;
+			}
+
+			ws = new WebSocket(wsUrl);
+			ws.binaryType = 'arraybuffer';
+
+			ws.onopen = () => {
+				// First-message auth (no token in URL)
+				if (ws) {
+					ws.send(JSON.stringify({ type: 'auth', token: authToken }));
+				}
+				connected = true;
+				connecting = false;
+				// Send initial resize
+				if (term && ws) {
+					ws.send(JSON.stringify({ type: 'resize', cols: term.cols, rows: term.rows }));
+				}
+			};
+
+			ws.onmessage = (event) => {
+				if (term) {
+					if (event.data instanceof ArrayBuffer) {
+						term.write(new Uint8Array(event.data));
+					} else {
+						term.write(event.data);
+					}
+				}
+			};
+
+			ws.onclose = () => {
+				connected = false;
+				connecting = false;
+				if (term) {
+					term.write('\r\n\x1b[90m[Connection closed]\x1b[0m\r\n');
+				}
+			};
+
+			ws.onerror = () => {
+				connected = false;
+				connecting = false;
+			};
+		} catch (err) {
+			connecting = false;
+			if (term) {
+				term.write(`\r\n\x1b[31m[Error: ${err}]\x1b[0m\r\n`);
+			}
+		}
+	};
+
+	const disconnect = () => {
+		if (ws) {
+			ws.close();
+			ws = null;
+		}
+		connected = false;
+		connecting = false;
+	};
+
+	const initTerminal = () => {
+		if (!terminalEl || term) return;
+
+		term = new Terminal({
+			cursorBlink: true,
+			fontSize: 13,
+			fontFamily: "'JetBrains Mono', 'Fira Code', 'Cascadia Code', Menlo, Monaco, 'Courier New', monospace",
+			theme: {
+				background: '#1a1b26',
+				foreground: '#c0caf5',
+				cursor: '#c0caf5',
+				cursorAccent: '#1a1b26',
+				selectionBackground: '#33467c',
+				selectionForeground: '#c0caf5',
+				black: '#15161e',
+				red: '#f7768e',
+				green: '#9ece6a',
+				yellow: '#e0af68',
+				blue: '#7aa2f7',
+				magenta: '#bb9af7',
+				cyan: '#7dcfff',
+				white: '#a9b1d6',
+				brightBlack: '#414868',
+				brightRed: '#f7768e',
+				brightGreen: '#9ece6a',
+				brightYellow: '#e0af68',
+				brightBlue: '#7aa2f7',
+				brightMagenta: '#bb9af7',
+				brightCyan: '#7dcfff',
+				brightWhite: '#c0caf5'
+			},
+			allowProposedApi: true,
+			scrollback: 5000
+		});
+
+		fitAddon = new FitAddon();
+		term.loadAddon(fitAddon);
+		term.loadAddon(new WebLinksAddon());
+
+		term.open(terminalEl);
+
+		// Fit after a frame so the container has dimensions
+		requestAnimationFrame(() => {
+			fitAddon?.fit();
+		});
+
+		// Forward keystrokes to WebSocket
+		term.onData((data) => {
+			if (ws && ws.readyState === WebSocket.OPEN) {
+				ws.send(new TextEncoder().encode(data));
+			}
+		});
+
+		// Forward binary data (e.g. paste with special chars)
+		term.onBinary((data) => {
+			if (ws && ws.readyState === WebSocket.OPEN) {
+				const buffer = new Uint8Array(data.length);
+				for (let i = 0; i < data.length; i++) {
+					buffer[i] = data.charCodeAt(i) & 0xff;
+				}
+				ws.send(buffer);
+			}
+		});
+
+		// Handle resize
+		term.onResize(({ cols, rows }) => {
+			if (ws && ws.readyState === WebSocket.OPEN) {
+				ws.send(JSON.stringify({ type: 'resize', cols, rows }));
+			}
+		});
+
+		// Watch container size changes
+		resizeObserver = new ResizeObserver(() => {
+			requestAnimationFrame(() => {
+				fitAddon?.fit();
+			});
+		});
+		resizeObserver.observe(terminalEl);
+
+		// Auto-connect
+		connect();
+	};
+
+	onMount(() => {
+		initTerminal();
+	});
+
+	onDestroy(() => {
+		disconnect();
+		resizeObserver?.disconnect();
+		term?.dispose();
+		term = null;
+		fitAddon = null;
+	});
+</script>
+
+<div class="h-full min-h-0 relative">
+	<div
+		bind:this={terminalEl}
+		class="absolute inset-0 p-1"
+		class:pointer-events-none={overlay}
+	/>
+</div>