DEV Community: rocketsquirreldev

[CryptoTradingBot] Analyzing 70 Live Trades of My Python Crypto Bot (v8.04 Post-Mortem)

rocketsquirreldev — Mon, 11 May 2026 13:22:13 +0000

I’ve been running version 8.04 of my Python-based crypto trading bot live for about a month. Instead of just looking at the final PnL, I built a dashboard to analyze the exact entry/exit logs of all 70 trades.

Here is what the raw data taught me about the gap between theoretical algorithms and live markets.

The Stats: A Tale of Two Months

Total Trades: 70
Win Rate: 48.6%
April (35 trades): 43% win rate, net negative.
May (35 trades): 54% win rate, net positive.

The bot clearly improved in May. In April, my logging showed two fatal flaws:

The Sideways Trap: The bot entered BTC 4 times in a single day during a chop zone, getting stopped out repeatedly. My 1-hour cooldown logic was simply too short.
Simultaneous Liquidations: The bot held LONG positions in LINK and ETH simultaneously. When the market dipped, both hit their stop-losses at the exact same minute, doubling my daily drawdown.

The Risk/Reward Illusion

This was the most humbling discovery. My algorithm is strictly coded to aim for a 3:1 Risk/Reward ratio.

However, the real-world data showed an average win of 0.80 and an average loss of 0.70. My actual R/R ratio was 1.14:1. Why?

Trailing Stops: My EXIT_PROFIT_SECURE trailing stop logic was too aggressive. It protected my capital by closing trades early during minor pullbacks, but it effectively prevented the bot from ever reaching the 3:1 target.

Asset Breakdown

$LINK (9W 9L): My most profitable pair. The "Volume Climax Filter" I added in v8.03 worked perfectly here, preventing FOMO entries at the top of pumps.
$ETH (7W 9L): The absolute worst performer. The stop-losses were large, and the take-profits were tiny.

Next Steps for v8.05

Data analysis gives you a clear roadmap. My next commits will include:

Stricter ETH Entry: Bumping the ADX threshold limit to 25 specifically for ETH.
Increased Cooldowns: Changing the post-loss cooldown for BTC from 1 hour to 2 hours.
Daily Circuit Breaker: If the total daily loss exceeds a specific threshold, halt all new entries for 24 hours to prevent cascading simultaneous stops.

Algo-trading is 10% writing trading logic and 90% debugging your own assumptions through data. Back to the code!

Visualizing Certificate Expiry in the Browser (x509Lab v1.5.0)

rocketsquirreldev — Fri, 08 May 2026 12:38:29 +0000

Hey everyone, I'm RocketSquirrel. I build x509Lab, a purely client-side web tool for visualizing and generating X.509 certificate chains.

If you work in DevOps, Backend, or IT Infra, you know the quiet terror of a production certificate expiring because someone forgot to track it.

When visualizing complex PKI trees (Root -> Multiple Intermediates -> Dozens of Leafs) in x509Lab, clicking into every single node to check its expiry date was becoming a chore. So for the v1.5.0 update, I built a visual warning system directly into the canvas nodes.

Visual Expiry Badges

Now, the moment you upload or generate a certificate, the node card displays a color-coded badge based on its remaining lifespan:

🟢 VALID (> 90 days): All good.
🟡 D-XX (31~90 days): Warning zone.
🟠 D-XX (< 30 days): Danger zone. A small orange dot also appears on the node header.
🔴 D-XX (<= 7 days) or EXPIRED: Critical. A bright red dot appears on the header.

This makes it incredibly easy to zoom out on your 5000x5000 canvas and instantly spot which certificates in your chain need to be replaced.

Bug Fix: Save/Load State Loss

I also fixed a frustrating state management bug. Previously, if you generated certificates inside the app, saved your workspace to a .json file, and loaded it later, the certificates would disappear (only the empty nodes remained). The serialization logic was missing the dynamically generated PEM strings. This is now fully patched—you can safely save your test PKI environments and restore them anytime.

As always, everything runs locally via the Web Crypto API. No backend, no data collection.

🔗 Try it here: https://x509lab.vercel.app

🔗 Instagram Link: https://www.instagram.com/reel/DYE_C6KqL3Z/?utm_source=ig_web_copy_link&igsh=MzRlODBiNWFlZA==

Next up on the roadmap: One-click templates for TLS Server, Code Signing, and S/MIME chains!

[DeskFlow]Added 11 New Devices to DeskFlow (Including Windows Laptops & UPS!)

rocketsquirreldev — Sun, 03 May 2026 12:27:39 +0000

Hey everyone, RocketSquirrel here. I am a solo developer working on DeskFlow, a web-based visual planner for desk setups and cable routing.

I usually code late at night after putting my kid to bed. Recently, I realized my equipment library was heavily biased towards Macbooks and just a few generic monitors. To make the tool actually useful for planning real-world setups, I just pushed a quick database update adding 11 highly requested items.

Here is what just dropped into the library:

Mice

Logitech MX Master 3S
Apple Magic Mouse
Razer DeathAdder V3

Speakers

Sonos Era 100
Audioengine A2+

Monitors

LG C3 OLED 42 inch (for the massive gaming/productivity hybrid setups)
ASUS ProArt PA279CRV 27 inch

Laptops

LG Gram 16 (2024)
ASUS Zenbook 14 OLED (Finally, some Windows love!)

Power & Stability

Anker Power Strip (USB)
APC UPS 700 (Because knowing where to hide your power strip is 90% of cable management)

It is a simple content update, but having mice and power strips on the canvas really makes the setup visualization feel complete.

You can check out the new items and try building your setup here: https://deskflow.vercel.app

If your daily driver equipment is missing from the list, drop a comment with the model name! I will prioritize adding them in the next batch.

Making a Canvas-Based Web App Mobile Friendly (DeskFlow v1.1.8)

rocketsquirreldev — Fri, 01 May 2026 12:58:28 +0000

I'm building DeskFlow, a visual desk setup and cable planner. Until now, it was strictly a desktop application.

If you opened it on a mobile browser, it was a disaster. The left equipment panel and the right shopping list panel squeezed the central canvas into oblivion. You couldn't tap, drag, or plan anything.

This weekend, I finally tackled mobile responsiveness in the v1.1.8 update. Here is a breakdown of the UX changes and the technical hurdles I ran into along the way.

The Mobile Redesign

Since you can't cram a 3-panel layout into a 375px wide screen, I set a strict breakpoint at 650px and completely decoupled the mobile layout.

The Canvas owns the screen: The canvas now takes up 100% of the viewport.
Equipment Library: Moved to a slide-out drawer accessible via a top-left hamburger menu (☰). Tapping an item drops it instantly onto the center of the canvas.
Shopping List: Moved to a bottom sheet accessible via a top-right cart icon.
Touch Gestures: Added 1-finger drag for canvas panning, and 2-finger pinch for zooming. Nodes can be tapped to select and dragged to move.

(Note: The desktop experience remains exactly the same with its original 3-panel layout).

Technical Challenges & Bug Fixes

Making a canvas work on mobile is never just about CSS. The touch events fought me every step of the way.

1. The Pinch-to-Zoom Jumping Bug

When I first implemented the 2-finger pinch-to-zoom, the canvas would violently jump off the screen.

The cause: When two fingers are moving on the screen, the browser fires touchmove events for both touches. My panning logic was trying to calculate the delta and move the canvas based on these touches simultaneously while the zoom logic was also trying to scale the view. They collided.
The fix: I had to explicitly disable the panning calculation the moment e.touches.length > 1 is detected. Pan logic only runs for single touches.

2. The Touch-Absorption Bug

On mobile, users couldn't tap or drag the equipment nodes at all.

The cause: In desktop mode, when "Pan Mode" is active, I place a transparent overlay layer on top of the canvas to catch mouse drags so they don't accidentally select elements underneath. On mobile, this layer was constantly absorbing all touchstart events, making the nodes underneath completely unresponsive.
The fix: I disabled this specific interaction layer on mobile devices, allowing the touch events to safely reach the nodes for tapping and dragging, while handling canvas panning directly on the background container.

Try it out

You can check out the mobile experience right from your phone without any installations. It's super handy if you are at a store and need to quickly check if a specific USB-C hub has the right ports for your layout.

🔗 Live App: https://deskflow.vercel.app

If you've built interactive canvas apps for mobile, I'd love to hear how you handled complex touch events!

[x509Lab]Generating & Parsing CSRs in the Browser (No OpenSSL required) - x509Lab v1.4.0

rocketsquirreldev — Wed, 29 Apr 2026 13:39:41 +0000

Hi everyone! I am an embedded developer by day, and an indie hacker by night. I'm building x509Lab, a purely client-side visual tool for managing certificate chains.

Today I’m releasing a pretty heavy feature update: CSR (Certificate Signing Request) Generation & Parsing.

The Pain Point

Usually, creating a CSR involves opening a terminal and typing something like this:
openssl req -new -key private.key -out request.csr

Then you have to remember which flags to pass for Subject Alternative Names (SANs) or specific Key Usages. To check if you did it right, you have to run openssl req -text -noout -in request.csr. It's tedious.

x509Lab now solves this visually in the browser.

Feature 1: Generate CSR

Click the 📄 CSR button in the top toolbar to open the new modal.

I’ve added comprehensive Subject fields:

CN (Common Name)
O (Organization)
OU (Org Unit)
C, ST, L (Location data)
SAN (DNS / IP)

But the real highlight is the Key Usage & Extended Key Usage (EKU) checkboxes.

Not just for web servers (Great for IoT/ECU)

Since my day job involves automotive software, I wanted to make sure this tool could handle IoT and vehicle ECU PKI scenarios.

By setting specific fields like OU = ChassisControl and selecting clientAuth and codeSigning in the EKU section, you can generate CSRs perfectly suited for vehicle OTA updates or V2X infrastructure testing.

Feature 2: Parse CSR

Generating is only half the battle. If you switch to the Parse CSR tab, you can paste any existing .csr PEM string or upload a file.

The app instantly decodes it and displays:

The full Subject DN
The Signature Algorithm
SAN list
Key Usage / EKU extensions

It completely replaces the need to run the -text OpenSSL command just to peek inside a CSR file.

100% Secure & Client-Side

Just like the rest of x509Lab, everything runs on the Web Crypto API. No data, private keys, or CSRs are ever transmitted to a backend server.

🔗 Try it live here: https://x509lab.vercel.app

Let me know if you run into any bugs or have feature requests!

[DeskFlow]Solving the 'Lost in Canvas' UX problem in my Flutter Web app (DeskFlow v1.1.7)

rocketsquirreldev — Thu, 23 Apr 2026 13:19:10 +0000

I am building DeskFlow, a visual planner for desk setups and cable management running on Flutter Web.

In my last update, I expanded the canvas size to a massive 5000x5000 pixels so users could comfortably plan huge multi-monitor setups. But fixing one UX problem created another: users (including myself) started getting lost in the void. If you panned too far away from your hardware nodes, finding them again involved a lot of frustrating scrolling.

To fix this, I released v1.1.7 today, focusing entirely on spatial navigation.

1. Canvas Minimap

I added a minimap overlay in the bottom-left corner.

It represents all your active hardware nodes as cyan blocks.
The white rectangle represents your current viewport.
Click-to-jump: You can click anywhere on the minimap to instantly pan the canvas to that exact location. No more aimless scrolling.

2. Fit to Content (The 'F' Key)

This is the feature I end up using the most. When you are zoomed in routing a specific USB-C cable and want to see the whole picture again, manually zooming out is tedious.

Now, you can just press the F key (or click the bottom-right bounding box icon). The app calculates the bounding box of all active nodes and automatically adjusts the zoom and pan to fit everything perfectly in the center of your screen.

The Workflow

The UX loop is now incredibly fluid:
Hit F to see the entire setup -> Click the Minimap to dive into a specific hub -> Route the cables -> Hit F to zoom back out.

If you are building a canvas-based app in Flutter or React, I highly recommend implementing a Fit-to-Content function early on. It saves so much user frustration.

Try out the new navigation directly in your browser:
🔗 https://deskflow-gold.vercel.app/

Let me know what you think of the UX flow!

[x509Lab]Sign new Leaf certificates with your existing Root CA directly in the browser (x509Lab v1.3.0)

rocketsquirreldev — Tue, 21 Apr 2026 13:36:46 +0000

Hey everyone. I'm building x509Lab, a purely client-side web tool for visualizing and generating certificate chains. I usually work on this late at night after putting my kid to sleep, so I try to focus on fixing real annoyances I face during my day job.

A huge pain point in the previous version was that whenever you hit the Generate button, the app would blindly generate brand new keys and certificates for the entire tree.

But what if you already have a Root CA and an Intermediate CA, and you just want to generate a new Leaf certificate signed by that existing Intermediate CA?

With the new v1.3.0 update, you can finally do exactly that.

How to use the selective signing feature

The workflow is designed to be as frictionless as possible.

First, build your tree on the canvas (e.g., Root -> Intermediate -> Leaf).
Second, upload your existing certificate PEM files to the Root and Intermediate nodes.
Third, you will notice a new [+ Add Key] button appears on nodes that have a certificate loaded. Click it to provide the matching Private Key.

Finally, hit Generate Certs.

The app will now recognize that the upper nodes already have their cryptographic material. It will skip generating them and only generate the new Leaf certificate, automatically signing it using the Intermediate CA's private key you provided.

Visual status in the generation modal

To prevent confusion when dealing with larger chains, the Generate modal now uses a simple color-coded status system:

🟢 Green: The node has both a certificate and a private key. It will be skipped during generation but used for signing downstream.
🟡 Yellow: The node has a certificate but is missing a private key. You need to add it if you want it to sign the nodes below it.
⚪ Default/Gray: No certificate exists. The app will generate a fresh one.

You can even add the missing private keys directly from inside the modal if you see a yellow warning, saving you a few clicks.

A quick note on security

I know that pasting a Private Key into a web browser sounds like a terrible idea for any security or infra engineer.

Please rest assured that x509Lab is a 100% client-side application. There is no backend server. Your private keys never leave your machine; they are only stored temporarily in your browser's memory to perform the Web Crypto API signing operations and are completely wiped the moment you close or refresh the tab.

🔗 You can try it out for free here: https://x509lab.vercel.app

If this helps you debug your mTLS setups or saves you from digging through OpenSSL man pages, let me know. Feedback and feature requests are always welcome in the comments.

[DeskFlow]Scaling Up: Making My React Canvas App 6x Larger (v1.1.6)

rocketsquirreldev — Sat, 18 Apr 2026 14:02:24 +0000

I am building DeskFlow, a browser-based visual planner for desk setups and cable management.

As the tool gained traction, users (and myself) hit a frustrating wall: the fixed 2000x2000px canvas was simply too small. If you were planning a dual-monitor setup with a laptop, a KVM switch, a NAS, and an audio interface, the nodes and cables quickly turned into a chaotic, overlapping mess.

In version 1.1.6, I focused entirely on expanding the workspace and improving spatial navigation. Here is what changed.

1. A 5000x5000px Workspace

I expanded the canvas area by 6.25x. Now, users can space out their hardware nodes comfortably. You can zoom out to view the entire home office layout, or zoom in to precisely route cables between specific ports.

Bug fix note: When I expanded the container, users couldn't drag nodes past the top-left quadrant. I realized my clamp logic for node dragging still had the 2000 boundaries hardcoded in three different utility functions. Always use constants, folks!

2. Graph Paper Grid

The old dot-grid background was functional but boring. I replaced it with a classic engineering "graph paper" style using a combination of linear gradients.

Minor grid: 40px intervals (thin, subtle lines).
Major grid: 200px intervals (slightly thicker lines every 5 blocks).

This makes it significantly easier to judge spatial relationships ("This 4-block area is my monitor arm, this area is under the desk"). The translucent white lines on the dark theme contrast perfectly with the cyan/pink cable paths.

3. Dedicated Pan Mode (Like Figma)

With a massive canvas, navigation is critical. Previously, you had to hold Space + Drag or use the middle mouse button to pan.

I introduced a dedicated Pan Mode toggle (bottom-left hand icon, or press H). When active, simple left-click dragging pans the entire viewport. If you use tools like Figma or Miro, this interaction model feels instantly familiar.

4. UI Boundaries

I added subtle, translucent cyan borders between the left hardware panel, the main canvas, and the right shopping list panel. It’s a tiny CSS tweak (border-right: 1px solid rgba(0, 255, 255, 0.1)), but it dramatically sharpens the separation of the workspace.

If you are planning to overhaul your desk setup or just want to play around with some visual hardware routing, try it out directly in your browser.

🔗 Try it here: https://deskflow-gold.vercel.app/

Next on the roadmap: custom node labels and a minimap for this giant new canvas!

[CryptoTradingBot] My Crypto Algo-Bot Hit a 41% Win Rate, But Still Lost Money. Here is Why.

rocketsquirreldev — Thu, 16 Apr 2026 14:16:45 +0000

Over the past 11 days, I deployed version 8.03 of my Python-based crypto auto-trading bot on Binance Futures. I had recently built a real-time web dashboard for it, so monitoring the trades was easier than ever.

The good news? My win rate jumped from a miserable 26.7% to 41.2%.
The bad news? I still ended up with a net loss of -2.42 USDT.

In algorithmic trading, numbers don't lie. I dug into the logs of the 34 executed trades to find out exactly where my strategy was leaking money. Here is the post-mortem data analysis.

Overall Performance (April 5 - April 16)

Total Trades: 34
Wins: 14 / Losses: 20
Win Rate: 41.2%
Gross Profit: +11.07 USDT / Gross Loss: -13.49 USDT
Average Win: +0.79 / Average Loss: -0.67

Finding the Culprit: Asset Breakdown

Looking at the PnL by asset class revealed the obvious weak link:

LINKUSDT: 5W 4L (+3.33 USDT) 🏆
XRPUSDT: 3W 3L (+0.09 USDT)
ETHUSDT: 5W 6L (-1.83 USDT)
BTCUSDT: 1W 3L (-1.26 USDT)
SOLUSDT: 0W 4L (-2.75 USDT) 🚨

Insight 1: The Solana Mismatch. Just like ADA in my previous bot version, SOL's volatility profile does not fit my 15-minute timeframe strategy. All 4 trades were LONG entries that reversed and hit the stop-loss within 15 mins to 2 hours. If I had simply excluded SOL, my net PnL would have been +0.33 USDT.

Digging Deeper: The Volume Climax Trap

I cross-referenced all losing trades with my technical indicators. A glaring pattern emerged regarding the Volume Oscillator (VOL_OSC).

I isolated all trades where the bot entered while VOL_OSC >= 30 (indicating an unusually high volume spike):

04-06 ETHUSDT BUY (VOL_OSC 42.4) -> -1.33
04-14 SOLUSDT BUY (VOL_OSC 58.2) -> -1.07
04-14 ETHUSDT BUY (VOL_OSC 53.0) -> -1.02
04-16 XRPUSDT BUY (VOL_OSC 51.5) -> -1.00

Insight 2: Do not chase the climax. 4 trades, 4 losses, costing me -4.42 USDT. When volume spikes abnormally high, the trend is usually reaching its climax before a sharp reversal. My bot was chasing the breakout right at the top. Filtering out these 4 trades alone would have pushed my net PnL to +2.00 USDT.

The Plan for v8.04

Data analysis turns failure into a roadmap. For the upcoming v8.04 update, I am implementing two simple, data-driven rules:

Drop SOLUSDT from the watchlist.
Implement a Climax Filter: Block all entries if VOL_OSC >= 30.

These two rules alone would have improved this week's performance by roughly +6 USDT.

Algo-trading isn't about intuition; it's about debugging your logic through raw data. Time to update the code and let v8.04 run. I'll share the results next time!

[DeskFlow]Improving UX in my Side Project: Adding Multi-select & Group Move to DeskFlow

rocketsquirreldev — Wed, 15 Apr 2026 13:22:51 +0000

As an indie developer building DeskFlow (a visual desk setup & cable planner), I've been using my own tool to plan my home office upgrade.

But I quickly realized a massive pain point: as my setup grew complex, moving things around became a chore. To move a monitor, a hub, and a laptop, I had to click and drag each item individually. It was tedious and counter-intuitive.

So, I spent my late-night coding session implementing a proper Multi-select and Group Move feature.

What's New?

Box Selection: Click and drag on an empty canvas to create a selection box (highlighted with an orange dotted border). Any hardware nodes within the box are selected.
Modifier Keys: Use Shift or Cmd/Ctrl + click to toggle selection on individual nodes.
Synchronized Movement: Once selected, dragging any node moves the entire group. Cables follow the movement in real-time, maintaining the structure.
Batch Action: Hit Delete to clear out multiple nodes at once.

Why this matters

In any visual tool, the "speed of thought" should not be hindered by the UI. By allowing users to rearrange clusters of devices in a single motion, planning a desk layout becomes much more fluid and playful.

If you're a fellow developer or gear enthusiast looking to map out your cable management or desk peripherals, give it a spin. No installation, no sign-up—just pure planning in your browser.

🔗 Link: https://deskflow-gold.vercel.app/

I'd love to hear your feedback on the UX or any features you'd like to see next!

[x509Lab]Generating Ed25519 Certificate Chains in the Browser (No Server Required)

rocketsquirreldev — Tue, 14 Apr 2026 12:25:41 +0000

I recently released an update to x509Lab (a completely browser-based visual certificate chain builder) to support Ed25519 key generation and signing.

If you deal with modern TLS, SSH, or code signing, you know Ed25519 is becoming the standard. It uses much smaller keys than RSA and offers faster signing than ECDSA.

Here is how I implemented it entirely on the client side using the Web Crypto API, without any backend server.

🔗 Try it live: https://x509lab.vercel.app

Visualizing and Generating Ed25519 Chains

The goal of x509Lab is to let you drag and drop Root CAs, Intermediate CAs, and Leaf nodes, connect them, and generate a valid PKI tree.

Now, when you click Generate Certs, you can select Ed25519 from the Key Algorithm dropdown. The app will instantly generate the keypairs, sign the certificates down the chain, and verify the trust loop—all in your browser.

The Technical Struggle: Web Crypto API & ASN.1 DER

Generating the keys using crypto.subtle.generateKey({ name: 'Ed25519' }) and signing them was the easy part. The real challenge was encoding the resulting certificates into a valid .pem format that OpenSSL would accept.

The Web Crypto API doesn't spit out X.509 certificates out of the box. You have to build the ASN.1 structure manually.

Here are a few technical hurdles I had to overcome:

Custom OID Implementation: I had to manually implement the DER encoding for the Ed25519 Object Identifier (1.3.101.112) based on RFC 8410.
The NULL Parameter Trap: When dealing with RSA, the signature algorithm sequence typically includes a NULL parameter. However, for Ed25519, including this NULL parameter violates the standard and breaks the certificate.
Raw Signatures: Unlike ECDSA, which requires converting the signature into a specific DER sequence, Ed25519 uses the raw 64-byte signature directly.

Auto-generating OpenSSL Commands

A visual tool is great, but eventually, you need to type commands into a terminal.

x509Lab analyzes your visual tree and generates the exact openssl CLI commands needed to recreate that setup. With this update, it now natively outputs the correct syntax for Ed25519:

openssl genpkey -algorithm Ed25519 -out root.key

If you're studying cryptography, setting up internal CAs, or just sick of remembering OpenSSL flags, give it a try. Let me know what you think in the comments!

[CryptoTradingBot]Building a Real-Time Dashboard for My Python Crypto Bot (Without Breaking It)

rocketsquirreldev — Fri, 10 Apr 2026 12:52:42 +0000

When I first deployed my Python crypto trading bot to an AWS EC2 instance, I thought Telegram notifications would be enough. Getting a ping for every entry, stop-loss, or take-profit felt sufficient.

But over time, the limitations became glaring. What's my current win rate? How is v8.03 performing compared to v8.02? What's the exact PnL curve looking like? Telegram gives you isolated moments; it doesn't give you the narrative. But to see the big picture, I had to RDP into my Windows EC2 server, open CSV files, and manually calculate stats. I needed a dashboard, but I had one strict rule: Do not touch the core trading logic.

Here is how I built a real-time web dashboard for my bot with minimal footprint.

The Architecture: Decoupled by Design

Injecting UI or heavy API logic directly into a live trading bot is a recipe for disaster. If the UI thread crashes, I don't want it bringing down the trading engine during a volatile market move.

I opted for a completely decoupled file-based architecture:

The Bot (Writer): Runs as usual. At the end of every candle evaluation, it simply writes its current state (balance, open positions, active settings) to a bot_state.json file.
The Flask API (Reader): A lightweight separate process that reads the .json and .csv trade logs and serves them via REST endpoints.
The Frontend: A Vanilla JS + Chart.js static HTML page that polls the API every 15 seconds.

Step 1: The Lightweight Flask API

I created a dashboard_api.py script. It exposes endpoints like:

/api/status: Bot version, strategy, ADX levels.
/api/balance: Current USDT balance.
/api/trades: Parses the CSV trade logs.
/api/stats: Calculates win rate and total PnL.

Inside the main bot script, I only added three lines of code inside the start() method to launch the Flask server as a daemon thread. The trading logic remained untouched.

Step 2: The Vanilla JS Frontend

I didn't want to over-engineer this with React or Vue. A single index.html file using Vanilla JS and Chart.js for the PnL curve was perfect.

It fetches data asynchronously every 15 seconds. The dashboard displays active parameters, a live PnL chart, currently open positions, a recent trade ledger, and a historical comparison of bot versions (e.g., v8.00 vs v8.01 vs v8.02).

Challenges & Troubleshooting

1. The Flask Threading Bottleneck
Initially, the dashboard kept hanging. The browser was trying to fetch 6 API endpoints simultaneously, but the default Flask development server runs on a single thread. Requests were timing out.
Fix: Simply setting threaded=True in the app.run() parameters solved the concurrency issue.

2. Legacy CSV Ghost Data
My total PnL suddenly showed +$3,700 USDT (which I definitely didn't make). The API was reading old v7.x CSV files sitting in the logs/ directory. Because the column structures had changed between versions, the parser was reading random timestamp strings as PnL floats.
Fix: Added a strict date filter and outlier rejection logic to ignore corrupted or legacy data rows.

3. The AWS + Windows Double Firewall
I opened port 8765 (API) and 3000 (HTML) in my AWS Security Group, restricted to my IP. But I still couldn't connect. I forgot that I was running a Windows EC2 instance, which has its own internal firewall.
Fix: Had to add an inbound rule via the command line:
netsh advfirewall firewall add rule name="Dashboard" dir=in action=allow protocol=TCP localport=8765

Conclusion

Building this dashboard was a game-changer. Staring at raw numbers in a terminal is one thing, but seeing a visual PnL curve and a comparative table of version win rates immediately highlights structural flaws in your strategy.

If you are building an algo-trading bot, spend a weekend building a visual dashboard. Data visualization is the first real step toward strategy optimization.