Port Harbour

█▀█ █▀█ █▀█ ▀█▀   █ █ ▄▀▄ █▀█ █▀▄ █▀█ █ █ █▀█
█▀▀ █▄█ █▀▄  █    █▀█ █▀█ █▀▄ █▄█ █▄█ █▄█ █▀▄

Computer ports on a pixel-art harbour. Pun + pleonasm (port = harbour). Both intended. 🚢

⭐ Now on the VS Code Marketplace: Port Harbour.

Your listening sockets are fishing boats moored at the seawall. Your Docker containers light up windows in the red palazzo on the right. The cathedral keeps real time. The lighthouse rotates. The sun rises and sets with your system clock.

Sidebar: every port lined up next to its boat

_{Each LISTEN row is a boat at the seawall. Click one to inspect.}

Install

Install from the VS Code Marketplace, or search for Port Harbour in the VS Code Extensions view.

After installing, open it from the Port Harbour Activity Bar icon, the Port Harbour status bar item, or the command palette command Port Harbour: Open.

Run from source

Open this folder in VS Code.
Press F5.
In the new window: ⌘⇧P → Port Harbour: Open.

Click any audio toggle to wake up the sea, bells, and retro music (browsers gate Web Audio).

Things to look for

🌅 Day/night cycle (golden hour is the prettiest)
⛪ Someone waving from the cathedral window
🐱 Two cats. One has spots.
🐋 A whale. Dolphins. A sea serpent. Glowing jellyfish at night.
🛸 UFOs at 3 AM (rare)
🍾 A bottle drifting past with a love note
🌈 Konami code → CRT mode

No VS Code? There's a TUI

cd rust && cargo build --release
./target/release/portharbour

q quit · / filter · s sort · k kill PID · ? help.

Build

Needs Node 24+ and Rust.

cd rust && cargo build --release && cd ..
npm install && (cd webview-ui && npm install) && npm run build

Credits

Art inspired by Igor Grincu (LinkedIn). His harbours are hand-painted. Mine are drawn by code in a <canvas> at 30 FPS.

License

MIT.

zagrosi-code