<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Arjun</title>
    <description>The latest articles on DEV Community by Arjun (@mrwick).</description>
    <link>https://dev.to/mrwick</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2176152%2Ff8baed8f-7715-4be7-b2e4-04202d69239f.jpg</url>
      <title>DEV Community: Arjun</title>
      <link>https://dev.to/mrwick</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/mrwick"/>
    <language>en</language>
    <item>
      <title>I reverse-engineered my motorcycle's Bluetooth protocol to put Google Maps on the dashboard</title>
      <dc:creator>Arjun</dc:creator>
      <pubDate>Thu, 18 Jun 2026 03:41:11 +0000</pubDate>
      <link>https://dev.to/mrwick/i-reverse-engineered-my-motorcycles-bluetooth-protocol-to-put-google-maps-on-the-dashboard-256j</link>
      <guid>https://dev.to/mrwick/i-reverse-engineered-my-motorcycles-bluetooth-protocol-to-put-google-maps-on-the-dashboard-256j</guid>
      <description>&lt;p&gt;My motorcycle has a Bluetooth instrument cluster. It pairs with the manufacturer's phone app and shows turn-by-turn navigation right on the dash, which sounds great until you actually use it. The nav is routed through a maps provider I don't love, the app is clunky, and there's no way to extend any of it.&lt;/p&gt;

&lt;p&gt;I kept thinking: it's just my bike talking to my phone over Bluetooth. How locked down can it really be? So one weekend I decided to find out, and a few weeks later I had Google Maps navigation running on the cluster through an app I wrote myself.&lt;/p&gt;

&lt;p&gt;Here's how that went.&lt;/p&gt;

&lt;h2&gt;
  
  
  There are no docs
&lt;/h2&gt;

&lt;p&gt;Of course there aren't. It's a proprietary protocol, and the only reference that exists is the manufacturer's own app, in compiled form. So step one was just watching.&lt;/p&gt;

&lt;p&gt;I started with a GATT walk on the live bike, which is the Bluetooth equivalent of knocking on every door to see what's there. The cluster exposes one vendor service with two characteristics: one the phone writes to, one the bike sends notifications back on. That's the entire conversation surface.&lt;/p&gt;

&lt;p&gt;Then I captured the actual bytes going across. Android can log every Bluetooth packet through its HCI snoop log, so I paired the phone with the bike, rode around, and pulled the capture. Now I had real traffic, and absolutely no idea what any of it meant.&lt;/p&gt;

&lt;h2&gt;
  
  
  Reading the app to read the protocol
&lt;/h2&gt;

&lt;p&gt;You can stare at hex forever and still guess wrong. The faster path was the app itself. I pulled the APK, ran it through JADX to decompile it, and got something close to readable source. Most of the class names weren't even obfuscated, which was a gift.&lt;/p&gt;

&lt;p&gt;From there it was cross-referencing: take a message I saw on the wire, find the code that builds it, and work out what each byte is. Frida helped a lot here. It lets you hook a running app and watch functions get called with their real arguments, so I could catch the exact moment the app turned "next turn is a left in 200m" into bytes and shipped them to the bike.&lt;/p&gt;

&lt;p&gt;Slowly the shape came out. Every message is exactly 30 bytes: a fixed header byte, an ASCII character for the message type, a body, a checksum, and a terminator. I confirmed the checksum the right way, by finding the function that computes it in the decompiled source, instead of reverse-guessing it from samples. The bike turned out to be response-driven too. It sends nothing until the phone writes to it first, which is why a passive listener captures total silence and had me convinced the thing was dead the first time I tried.&lt;/p&gt;

&lt;h2&gt;
  
  
  Being wrong, on the record
&lt;/h2&gt;

&lt;p&gt;The part I'm actually proud of isn't the protocol. It's how often I was wrong along the way and caught it.&lt;/p&gt;

&lt;p&gt;Early on, a Bluetooth analyzer confidently labeled the bike's characteristics as a known digital-key security spec. I almost wrote that down as fact. It was just the tool pattern-matching on a UUID and guessing. The real thing was a plain vendor service with nothing fancy about it.&lt;/p&gt;

&lt;p&gt;I also assumed for a while that the bike had its own SIM and was quietly phoning telemetry home to the manufacturer's cloud, which shaped a whole chunk of my thinking about where data came from. Then I actually checked the hardware and the spec sheet. No SIM. The bike talks to nothing but the paired phone. That one assumption had been steering me wrong for days.&lt;/p&gt;

&lt;p&gt;So I started keeping a running log of every claim: what I assumed, what turned out to be true, and what evidence corrected it. Reverse engineering is mostly the discipline of not believing yourself too early.&lt;/p&gt;

&lt;h2&gt;
  
  
  Then I built the app
&lt;/h2&gt;

&lt;p&gt;Once the protocol was understood, the fun part. REDLINE is an Android app in Kotlin and Jetpack Compose. It intercepts Google Maps turn-by-turn notifications, encodes each maneuver into the cluster's frame format, and writes it over Bluetooth, so the dash shows Google's directions instead of the stock app's. On top of that it reads the telemetry the bike emits and turns it into a live dashboard, records every ride with stats and a speed graph, exports trips, and renders a clock to the cluster when nav is idle.&lt;/p&gt;

&lt;p&gt;It's about 14k lines, 205 tests, and runs entirely on the phone with no account and no cloud. The same frame inspector I used to reverse the protocol ships inside the app, because the work isn't really finished.&lt;/p&gt;

&lt;h2&gt;
  
  
  What it taught me
&lt;/h2&gt;

&lt;p&gt;The protocol was never the hard part. The hard part was staying honest: treating the analyzer's label as a hypothesis, checking the hardware instead of trusting the spec in my head, writing down the wrong turns so I wouldn't repeat them. That habit has quietly made me better at regular software work too, where the bug is almost never where you first assume it is.&lt;/p&gt;

&lt;p&gt;If you want the full breakdown, the frame formats, the tooling, and the walked-back assumptions, it's all written up here: &lt;a href="https://www.arjunp.pro/projects/suzuki-connect-re.html" rel="noopener noreferrer"&gt;https://www.arjunp.pro/projects/suzuki-connect-re.html&lt;/a&gt;&lt;/p&gt;

</description>
      <category>reverseengineering</category>
      <category>android</category>
      <category>kotlin</category>
      <category>bluetooth</category>
    </item>
    <item>
      <title>Stop trusting ‘looks about right’: I gave my AI agent a way to verify its UI against Figma</title>
      <dc:creator>Arjun</dc:creator>
      <pubDate>Wed, 17 Jun 2026 16:47:51 +0000</pubDate>
      <link>https://dev.to/mrwick/stop-trusting-looks-about-right-i-gave-my-ai-agent-a-way-to-verify-its-ui-against-figma-3ppl</link>
      <guid>https://dev.to/mrwick/stop-trusting-looks-about-right-i-gave-my-ai-agent-a-way-to-verify-its-ui-against-figma-3ppl</guid>
      <description>&lt;p&gt;I do a lot of UI work, and like a lot of people lately I've been letting an AI agent take the first pass. Point it at a Figma file, let it write the components, come back to something that's 90% there. On a good day that's a huge time save.&lt;/p&gt;

&lt;p&gt;The problem is the other 10%, and where it hides.&lt;/p&gt;

&lt;p&gt;It's never an obvious break. It's the padding that's 12px instead of 16. A font weight that's 500 where the design says 600. A border radius that's a couple pixels off. A gradient that starts at the wrong stop. Each one tiny, but together they're the difference between "looks like the design" and "looks like someone who sort of saw the design once." And the only way I was catching any of it was opening the Figma frame and the browser side by side and squinting back and forth like it's a spot-the-difference puzzle.&lt;/p&gt;

&lt;p&gt;That got old fast. What bugged me most was that the agent had no idea it was wrong. It would read the design, write the code, and confidently tell me it matched. It couldn't check its own work. Every Figma tool I tried could feed it data about a node, but none of them could answer the actual question: does the thing you just built look like the thing the designer drew?&lt;/p&gt;

&lt;p&gt;So I stopped squinting and built the missing piece. It's a local tool called figma-connect, and the part I care about is one function: &lt;code&gt;verify_node&lt;/code&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  The actual idea
&lt;/h2&gt;

&lt;p&gt;&lt;code&gt;verify_node&lt;/code&gt; takes the code the agent wrote, renders it in a real browser, and compares it pixel for pixel against the live Figma node. Pass or fail, with the diff image attached. That's it. The agent finally has a mirror.&lt;/p&gt;

&lt;p&gt;There's a read side too (it can pull geometry, auto-layout, fills, type, tokens, components, the usual), but honestly the read part is table stakes. Plenty of tools do that. The verify part is the bit I hadn't seen anywhere, and it's the bit that changed how the agent behaves.&lt;/p&gt;

&lt;p&gt;The whole thing runs on my laptop. Browser Figma works, so there's no desktop app, no cloud API, and no design files leaving my machine.&lt;/p&gt;

&lt;h2&gt;
  
  
  How the check actually works
&lt;/h2&gt;

&lt;p&gt;Give it a node id and the candidate code. It mounts the code in headless Chromium with Playwright, exports the matching node from Figma, and diffs them. I run three different comparisons at once, because I tried each one alone first and each one lied to me in its own way.&lt;/p&gt;

&lt;p&gt;Raw pixel diffing catches the most: the 4px shift, the wrong radius, the moved gradient. But it's hysterical about a one-pixel global offset, screaming that everything's broken when the whole thing just nudged sideways. So I layered SSIM on top, which scores structural similarity and tracks closer to what a human would actually call "close." And then a text and accessibility pass with axe-core, because more than once I had a render that was pixel-perfect and had quietly dropped a label or lowercased a heading. Looking right and being right are not the same thing, and I learned that the annoying way.&lt;/p&gt;

&lt;p&gt;The output is a labeled EXPECTED / ACTUAL / DIFF image. I did that on purpose. A bare similarity score is something an agent will happily rationalize ("0.94, close enough!"). A picture of exactly what's wrong is not.&lt;/p&gt;

&lt;p&gt;The real win is that "looks about right" stopped being good enough. The agent now has a gate it has to pass before it can call something done.&lt;/p&gt;

&lt;h2&gt;
  
  
  The stuff that actually ate my week
&lt;/h2&gt;

&lt;p&gt;The render-and-diff idea took an afternoon. Making it trustworthy took way longer, because a verifier that fails for dumb reasons is worse than no verifier at all. The first time it cried wolf, I stopped trusting it, and that defeats the whole point.&lt;/p&gt;

&lt;p&gt;The first thing that got me was fonts. I kept getting failures on text that looked identical, and I burned an embarrassing amount of time before I realized I was screenshotting before the web fonts had loaded. The render was comparing a fallback font against the design's real font and flagging the difference. Gating the capture on &lt;code&gt;document.fonts.ready&lt;/code&gt; killed that entire class of false failures.&lt;/p&gt;

&lt;p&gt;Then there was the wait strategy. I was waiting on networkidle before capturing, which is fine until you hit a page with a long-poll or a streaming connection, and then it just never idles. The verification would hang forever. I ripped out the blanket wait and replaced it with explicit readiness signals.&lt;/p&gt;

&lt;p&gt;The one I'm still not fully done with is fidelity versus budget. The summary of a node that I hand to the agent can't carry every property at full precision, or it blows the context window. So I had to make calls about what to keep exact and what to approximate, and then be honest about it. The digest now carries explicit flags for gradients, shadows, strokes, opacity, and masks, so the agent knows when a value is the real thing and when it's a best guess.&lt;/p&gt;

&lt;h2&gt;
  
  
  Under the hood, briefly
&lt;/h2&gt;

&lt;p&gt;Small pnpm monorepo. A Figma plugin lives in the file (it's the only thing that can actually read the document). A local bridge daemon indexes the file into SQLite with full-text search, updates itself as the design changes, and exposes everything over MCP. A separate harness does the rendering and diffing. The agent talks to the daemon through a little stdio shim so the file stays indexed between sessions. Around 15k lines of TypeScript, 35 tools, all read-only except the verify step, bound to localhost only.&lt;/p&gt;

&lt;h2&gt;
  
  
  What it still can't do
&lt;/h2&gt;

&lt;p&gt;Being honest about the edges, because I hate posts that pretend their thing is finished.&lt;/p&gt;

&lt;p&gt;The search is lexical, not semantic, so it matches words that literally appear in a layer's name or text. A vibes-based query won't find a generically named group. The digest is budgeted, hence the fidelity flags. And it only reads, it never writes back to Figma, on purpose.&lt;/p&gt;

&lt;p&gt;If you've ever watched an AI spit out UI that's subtly, confidently wrong and had no way to catch it except your own eyes, this was my attempt at giving it the feedback loop it was missing.&lt;/p&gt;

&lt;p&gt;Full writeup with screenshots and the architecture: &lt;a href="https://www.arjunp.pro/projects/figma-connect.html" rel="noopener noreferrer"&gt;https://www.arjunp.pro/projects/figma-connect.html&lt;/a&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>ai</category>
      <category>typescript</category>
      <category>figma</category>
    </item>
  </channel>
</rss>
