K01 Security

What it does

K01 is two tools with one idea behind them: AI-generated code needs a second pair of eyes, and injecting auth middleware into a project should take minutes, not a morning.

The first tool is a desktop app. Point it at a Next.js project, click inject, and it handles everything — file copying, dependency merging, environment variables, conflict resolution, TypeScript verification. The whole pipeline, one button.

The second is a VSCode extension that watches every file Claude Code touches and scans the diff for common security issues. When it finds something, it pops up a non-blocking panel with a ready-to-copy prompt you can paste straight back into Claude. No hard blocks. No interruptions. No external services — all the analysis runs locally.

The koi connects both. It swims across a live dashboard, reacting to the health of each module. When everything's clean, it moves freely. When something's wrong, it drifts toward the problem. It's a status system you read at a glance instead of hunting through logs.

How we built it

The injector runs on Electron and React — Vite renderer, Zustand for state. The core is a seven-step pipeline: validate the project, detect conflicts, copy files, merge dependencies, sync environment variables, install packages, run TypeScript. Every step streams live output back to the UI over Electron's IPC bridge. For conflict resolution, we use AST parsing to wrap any existing middleware in a chain() helper rather than blowing it away.

The VSCode extension hooks into onDidSaveTextDocument and runs three scanners in parallel on every save. A rate-limit checker looks for unprotected route handlers. A secret scanner covers hardcoded keys, tokens, and connection strings across about a dozen formats. A SQL injection detector catches queries built with string concatenation or template literals. All local, all pattern-matching, no LLM calls.

When something's flagged, it shows up as a Webview Panel with a fix prompt templated to the specific file, line, variable name, and detected framework. Copy, paste, done.

The dashboard is a custom HTML5 Canvas animation using distance constraints, angle constraints, and curvature-responsive fins. The fish follows a slow Lissajous waypoint when everything's healthy, and pulls toward affected lily pads (each one a middleware module or scanner) when something needs attention.

Challenges we ran into

Conflict resolution in the injector was the hard one. Next.js only reads a single middleware.ts from the project root, so any existing middleware had to be merged cleanly and not overwritten. Getting the AST-based chain merge right across different code styles took a lot of iteration.

In the extension, false positive suppression was trickier than expected. Telling a hardcoded secret apart from an environment variable reference, or a safe parameterized query from an injectable one, takes enough context that naive regex doesn't cut it. We ended up building layered suppression — skipping env var patterns, obvious placeholders, constant declarations, and known-safe parameterized call sites.

The animation had its own learning curve. Getting the spine to feel organic without jitter meant careful tuning of the angle constraint — skip it and the chain collapses. And the whole time, keeping the zen aesthetic credible for a security tool was a constant tension. Too minimal and it feels like a toy. Too dense and the koi metaphor loses its point.

What we're proud of

The injection pipeline is atomic from the user's perspective. One button, seven steps, a working auth layer. The VSCode extension adds a full security review loop with zero configuration and no interruption to the development flow. And the koi dashboard turns what would otherwise be scattered logs into something ambient. It's system health you absorb rather than read.

Three tools, one metaphor, one experience.

What we learned

Designing developer tooling for a wide range of users is harder than it looks. Every decision about terminology, step ordering, and error messaging required thinking about who would be reading it and what they actually needed. We also learned that false positive rate matters more than recall in security tooling. A scanner that cries wolf gets disabled.

And we learned that a strong visual metaphor only holds if the system behind it is real. The koi works because the pipeline it represents actually runs.

What's next

For the injector: monorepo support, more auth providers beyond JWT, a configuration UI for route matchers and session settings.

For the extension: more vulnerability classes like path traversal, SSRF, and insecure deserialization, also a CI mode that can fail builds on high-severity findings and custom rules defined in settings.json.

The dashboard will grow with both. More lily pads, richer signals from the fish, and live feeds of blocked requests and token events rendered as ripples across the pond.

Built With

• api
• canvas
• electron
• javascript
• next.js
• node.js
• python
• ts
• vite