loop/webui: add prettier
diff --git a/loop/webui/src/web-components/sketch-terminal.ts b/loop/webui/src/web-components/sketch-terminal.ts
index 788521d..106f7e2 100644
--- a/loop/webui/src/web-components/sketch-terminal.ts
+++ b/loop/webui/src/web-components/sketch-terminal.ts
@@ -1,13 +1,13 @@
import { Terminal } from "@xterm/xterm";
import { FitAddon } from "@xterm/addon-fit";
-import {css, html, LitElement} from 'lit';
-import {customElement, property, state} from 'lit/decorators.js';
-import {DataManager, ConnectionStatus} from '../data';
-import {State, TimelineMessage} from '../types';
-import './sketch-container-status';
+import { css, html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { DataManager, ConnectionStatus } from "../data";
+import { State, TimelineMessage } from "../types";
+import "./sketch-container-status";
-@customElement('sketch-terminal')
+@customElement("sketch-terminal")
export class SketchTerminal extends LitElement {
// Terminal instance
private terminal: Terminal | null = null;
@@ -23,24 +23,24 @@
private processingTerminalInput: boolean = false;
static styles = css`
-/* Terminal View Styles */
-.terminal-view {
- width: 100%;
- background-color: #f5f5f5;
- border-radius: 8px;
- overflow: hidden;
- margin-bottom: 20px;
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
- padding: 15px;
- height: 70vh;
-}
+ /* Terminal View Styles */
+ .terminal-view {
+ width: 100%;
+ background-color: #f5f5f5;
+ border-radius: 8px;
+ overflow: hidden;
+ margin-bottom: 20px;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+ padding: 15px;
+ height: 70vh;
+ }
-.terminal-container {
- width: 100%;
- height: 100%;
- overflow: hidden;
-}
-`;
+ .terminal-container {
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+ }
+ `;
constructor() {
super();
@@ -84,30 +84,32 @@
private async loadXtermlCSS() {
try {
// Check if diff2html styles are already loaded
- const styleId = 'xterm-styles';
+ const styleId = "xterm-styles";
if (this.shadowRoot?.getElementById(styleId)) {
return; // Already loaded
}
// Fetch the diff2html CSS
- const response = await fetch('static/xterm.css');
+ const response = await fetch("static/xterm.css");
if (!response.ok) {
- console.error(`Failed to load xterm CSS: ${response.status} ${response.statusText}`);
+ console.error(
+ `Failed to load xterm CSS: ${response.status} ${response.statusText}`,
+ );
return;
}
const cssText = await response.text();
// Create a style element and append to shadow DOM
- const style = document.createElement('style');
+ const style = document.createElement("style");
style.id = styleId;
style.textContent = cssText;
this.renderRoot?.appendChild(style);
- console.log('xterm CSS loaded into shadow DOM');
+ console.log("xterm CSS loaded into shadow DOM");
} catch (error) {
- console.error('Error loading xterm CSS:', error);
+ console.error("Error loading xterm CSS:", error);
}
}
@@ -116,7 +118,9 @@
* @param terminalContainer The DOM element to contain the terminal
*/
public async initializeTerminal(): Promise<void> {
- const terminalContainer = this.renderRoot.querySelector("#terminalContainer") as HTMLElement;
+ const terminalContainer = this.renderRoot.querySelector(
+ "#terminalContainer",
+ ) as HTMLElement;
if (!terminalContainer) {
console.error("Terminal container not found");
@@ -177,7 +181,7 @@
try {
// Connect directly to the SSE endpoint for terminal 1
// Use relative URL based on current location
- const baseUrl = window.location.pathname.endsWith('/') ? '.' : '.';
+ const baseUrl = window.location.pathname.endsWith("/") ? "." : ".";
const eventsUrl = `${baseUrl}/terminal/events/${this.terminalId}`;
this.terminalEventSource = new EventSource(eventsUrl);
@@ -194,7 +198,7 @@
const decoded = atob(event.data);
this.terminal.write(decoded);
} catch (e) {
- console.error('Error decoding terminal data:', e);
+ console.error("Error decoding terminal data:", e);
// Fallback to raw data if decoding fails
this.terminal.write(event.data);
}
@@ -221,7 +225,9 @@
} catch (error) {
console.error("Failed to connect to terminal:", error);
if (this.terminal) {
- this.terminal.write(`\r\n\x1b[1;31mFailed to connect: ${error}\x1b[0m\r\n`);
+ this.terminal.write(
+ `\r\n\x1b[1;31mFailed to connect: ${error}\x1b[0m\r\n`,
+ );
}
}
}
@@ -262,7 +268,7 @@
this.processingTerminalInput = true;
// Concatenate all available inputs from the queue into a single request
- let combinedData = '';
+ let combinedData = "";
// Take all currently available items from the queue
while (this.terminalInputQueue.length > 0) {
@@ -271,17 +277,22 @@
try {
// Use relative URL based on current location
- const baseUrl = window.location.pathname.endsWith('/') ? '.' : '.';
- const response = await fetch(`${baseUrl}/terminal/input/${this.terminalId}`, {
- method: 'POST',
- body: combinedData,
- headers: {
- 'Content-Type': 'text/plain'
- }
- });
+ const baseUrl = window.location.pathname.endsWith("/") ? "." : ".";
+ const response = await fetch(
+ `${baseUrl}/terminal/input/${this.terminalId}`,
+ {
+ method: "POST",
+ body: combinedData,
+ headers: {
+ "Content-Type": "text/plain",
+ },
+ },
+ );
if (!response.ok) {
- console.error(`Failed to send terminal input: ${response.status} ${response.statusText}`);
+ console.error(
+ `Failed to send terminal input: ${response.status} ${response.statusText}`,
+ );
}
} catch (error) {
console.error("Error sending terminal input:", error);
@@ -303,32 +314,36 @@
try {
// Send resize message in a format the server can understand
// Use relative URL based on current location
- const baseUrl = window.location.pathname.endsWith('/') ? '.' : '.';
- const response = await fetch(`${baseUrl}/terminal/input/${this.terminalId}`, {
- method: 'POST',
- body: JSON.stringify({
- type: "resize",
- cols: this.terminal.cols || 80, // Default to 80 if undefined
- rows: this.terminal.rows || 24, // Default to 24 if undefined
- }),
- headers: {
- 'Content-Type': 'application/json'
- }
- });
+ const baseUrl = window.location.pathname.endsWith("/") ? "." : ".";
+ const response = await fetch(
+ `${baseUrl}/terminal/input/${this.terminalId}`,
+ {
+ method: "POST",
+ body: JSON.stringify({
+ type: "resize",
+ cols: this.terminal.cols || 80, // Default to 80 if undefined
+ rows: this.terminal.rows || 24, // Default to 24 if undefined
+ }),
+ headers: {
+ "Content-Type": "application/json",
+ },
+ },
+ );
if (!response.ok) {
- console.error(`Failed to send terminal resize: ${response.status} ${response.statusText}`);
+ console.error(
+ `Failed to send terminal resize: ${response.status} ${response.statusText}`,
+ );
}
} catch (error) {
console.error("Error sending terminal resize:", error);
}
}
-
render() {
return html`
<div id="terminalView" class="terminal-view">
- <div id="terminalContainer" class="terminal-container"></div>
+ <div id="terminalContainer" class="terminal-container"></div>
</div>
`;
}
@@ -338,4 +353,4 @@
interface HTMLElementTagNameMap {
"sketch-terminal": SketchTerminal;
}
-}
\ No newline at end of file
+}