all: fix formatting
diff --git a/loop/port_monitor.go b/loop/port_monitor.go
index c122e51..5dbe617 100644
--- a/loop/port_monitor.go
+++ b/loop/port_monitor.go
@@ -175,7 +175,7 @@
// Skip low ports and sketch's ports
if port.Port < 1024 || port.Pid == 1 {
- return
+ return
}
// TODO: Structure this so that UI can display it more nicely.
diff --git a/webui/src/web-components/demo/sketch-container-status.demo.html b/webui/src/web-components/demo/sketch-container-status.demo.html
index c653772..05e4f2c 100644
--- a/webui/src/web-components/demo/sketch-container-status.demo.html
+++ b/webui/src/web-components/demo/sketch-container-status.demo.html
@@ -30,8 +30,8 @@
{ proto: "tcp", port: 80, process: "nginx", pid: 200 },
{ proto: "tcp", port: 3000, process: "node", pid: 300 },
{ proto: "tcp", port: 8080, process: "python", pid: 400 },
- { proto: "tcp", port: 9000, process: "go", pid: 500 }
- ]
+ { proto: "tcp", port: 9000, process: "go", pid: 500 },
+ ],
};
});
</script>
diff --git a/webui/src/web-components/sketch-container-status.ts b/webui/src/web-components/sketch-container-status.ts
index 511c38f..74de616 100644
--- a/webui/src/web-components/sketch-container-status.ts
+++ b/webui/src/web-components/sketch-container-status.ts
@@ -246,7 +246,7 @@
return [];
}
return [...this.state.open_ports]
- .filter(port => port.port >= 1024)
+ .filter((port) => port.port >= 1024)
.sort((a, b) => a.port - b.port);
}
@@ -260,7 +260,7 @@
} else {
// Use localhost pattern: http://p{port}.localhost:{sketch_port}
// We need to extract the port from the current URL
- const currentPort = window.location.port || '80';
+ const currentPort = window.location.port || "80";
return `http://p${port}.localhost:${currentPort}`;
}
}
@@ -278,7 +278,7 @@
event.preventDefault();
event.stopPropagation();
const url = this.getPortUrl(port);
- window.open(url, '_blank');
+ window.open(url, "_blank");
}
/**
@@ -295,21 +295,23 @@
* Update port tracking and highlight newly opened ports
*/
public updatePortInfo(newPorts: Port[]): void {
- const currentPorts = newPorts.filter(port => port.port >= 1024);
- const previousPortNumbers = new Set(this.previousPorts.map(p => p.port));
+ const currentPorts = newPorts.filter((port) => port.port >= 1024);
+ const previousPortNumbers = new Set(this.previousPorts.map((p) => p.port));
// Find newly opened ports
- const newlyOpenedPorts = currentPorts.filter(port => !previousPortNumbers.has(port.port));
+ const newlyOpenedPorts = currentPorts.filter(
+ (port) => !previousPortNumbers.has(port.port),
+ );
if (newlyOpenedPorts.length > 0) {
// Add newly opened ports to highlighted set
- newlyOpenedPorts.forEach(port => {
+ newlyOpenedPorts.forEach((port) => {
this.highlightedPorts.add(port.port);
});
// Remove highlights after animation completes
setTimeout(() => {
- newlyOpenedPorts.forEach(port => {
+ newlyOpenedPorts.forEach((port) => {
this.highlightedPorts.delete(port.port);
});
this.requestUpdate();
@@ -608,25 +610,37 @@
const remainingPorts = ports.slice(2);
return html`
<div class="flex items-center gap-1 ml-2">
- ${displayPorts.map(port => html`
- <button
- class="text-xs bg-gray-100 hover:bg-gray-200 px-1.5 py-0.5 rounded border border-gray-300 cursor-pointer transition-colors flex items-center gap-1 ${this.highlightedPorts.has(port.port) ? 'pulse-custom' : ''}"
- @click=${(e: MouseEvent) => this.onPortClick(port.port, e)}
- title="Open ${port.process} on port ${port.port}"
- >
- <span>${port.process}(${port.port})</span>
- <span>🔗</span>
- </button>
- `)}
- ${remainingPorts.length > 0 ? html`
- <button
- class="text-xs bg-gray-100 hover:bg-gray-200 px-1.5 py-0.5 rounded border border-gray-300 cursor-pointer transition-colors ${remainingPorts.some(port => this.highlightedPorts.has(port.port)) ? 'pulse-custom' : ''}"
- @click=${(e: MouseEvent) => this._showMorePorts(e)}
- title="Show ${remainingPorts.length} more ports"
- >
- +${remainingPorts.length}
- </button>
- ` : html``}
+ ${displayPorts.map(
+ (port) => html`
+ <button
+ class="text-xs bg-gray-100 hover:bg-gray-200 px-1.5 py-0.5 rounded border border-gray-300 cursor-pointer transition-colors flex items-center gap-1 ${this.highlightedPorts.has(
+ port.port,
+ )
+ ? "pulse-custom"
+ : ""}"
+ @click=${(e: MouseEvent) => this.onPortClick(port.port, e)}
+ title="Open ${port.process} on port ${port.port}"
+ >
+ <span>${port.process}(${port.port})</span>
+ <span>🔗</span>
+ </button>
+ `,
+ )}
+ ${remainingPorts.length > 0
+ ? html`
+ <button
+ class="text-xs bg-gray-100 hover:bg-gray-200 px-1.5 py-0.5 rounded border border-gray-300 cursor-pointer transition-colors ${remainingPorts.some(
+ (port) => this.highlightedPorts.has(port.port),
+ )
+ ? "pulse-custom"
+ : ""}"
+ @click=${(e: MouseEvent) => this._showMorePorts(e)}
+ title="Show ${remainingPorts.length} more ports"
+ >
+ +${remainingPorts.length}
+ </button>
+ `
+ : html``}
</div>
`;
})()}
@@ -779,16 +793,18 @@
>
<h3 class="text-sm font-semibold mb-2">Open Ports</h3>
<div class="flex flex-col gap-1">
- ${this.getSortedPorts().map(port => html`
- <button
- class="text-xs bg-gray-100 hover:bg-gray-200 px-2 py-1 rounded border border-gray-300 cursor-pointer transition-colors flex items-center gap-2 justify-between"
- @click=${(e: MouseEvent) => this.onPortClick(port.port, e)}
- title="Open ${port.process} on port ${port.port}"
- >
- <span>${port.process}(${port.port})</span>
- <span>🔗</span>
- </button>
- `)}
+ ${this.getSortedPorts().map(
+ (port) => html`
+ <button
+ class="text-xs bg-gray-100 hover:bg-gray-200 px-2 py-1 rounded border border-gray-300 cursor-pointer transition-colors flex items-center gap-2 justify-between"
+ @click=${(e: MouseEvent) => this.onPortClick(port.port, e)}
+ title="Open ${port.process} on port ${port.port}"
+ >
+ <span>${port.process}(${port.port})</span>
+ <span>🔗</span>
+ </button>
+ `,
+ )}
</div>
</div>
</div>