The Step Indicator

After building the graph editor, something kept nagging me. The graph is great for editing connections, but opening it every time you glance at your subtask list feels like too much.

What I needed day-to-day was a sense of “where am I right now?” — something that shows the flow without leaving the list.

But how do you show that?

A Hint from Git Log

If you’re a developer, you’ve probably seen the output of git log --graph. Lines and dots running alongside text, showing where branches split and merge.

The moment I saw it, I thought “that’s it.” Thin lines and dots on the left side of the subtask list — you’d see the flow just by scrolling.

The idea was good. Building it was a different story.

Lanes

When subtasks form a straight chain, one line is enough. But when paths diverge, lines need to branch. I called these lanes — similar to git branches.

Primary path goes in lane 0. Alternative paths get new lanes. When a lane ends, it goes back to a pool for reuse.

Sounds simple when I write it out. But the allocation order, merge-point collisions, reuse timing — these all tangled together and produced a lot of bugs. Fix one case, break another. Fix that, break something else. I’ll be honest: there were moments I considered scrapping the whole thing.

The Difference Curves Make

I started with straight lines for branches. It worked, but the sharp angles were unpleasant to look at. So I switched to SVG bezier curves.

Another problem appeared. Using the same curve for branching to an adjacent lane and a distant lane looked unnatural. Adjacent gets a gentle S-curve, distant gets a deep one. Adding this distinction made it much easier to read.

A small difference, but the eye comfort was surprisingly large.

The Trickiest Edge Case

An alternative path that stays in the same lane. This one gave me the most headaches. If a dashed line sits directly on top of a solid line, you can’t tell a branch exists.

After staring at it for a while, I found a solution: a temporary routing lane. Same-lane alternative connections briefly jump to a neighboring lane, then come back. It makes the split-and-merge visible.

I was genuinely happy when I figured that out. These small moments are what keep me building.

One Blue Dot

The heart of the step indicator is really just dot color. Blue means the task you should do now. Gray means done or in progress. Light gray means not yet started.

Calculating “where am I” turned out to be more complex than expected. At a branch, you need to figure out which path is current. Follow only the completed direction at finished nodes, mark only a started sibling as current. Getting this logic right took days.

But when that blue dot landed in exactly the right spot — that felt really good. Just scrolling the list and seeing “ah, I’ve made it this far.”

When the Screen Doesn’t Respond

If dots and lines freeze while waiting for a server response, it feels broken. You tap again, things get tangled.

I added optimistic updates. State changes reflect on screen immediately, and the server response quietly syncs in the background. The difference in perceived speed was so dramatic that I regretted not doing it from the start.

12 Pixels

Deciding lane width took longer than I’d like to admit. Started at 20 pixels, but even two or three lanes ate too much of the list item’s space.

Settled on 12. Narrow, but lines and dots stay clear. Four or five lanes still feel comfortable. Changing one number shifted the feel of the entire screen — that was fascinating.

A Small Map

I think of the step indicator as a small map. If the graph editor shows the full terrain, this shows your current position on the path you’re walking.

Whether I built it well — I don’t know yet. There are surely edge cases I haven’t seen. But if scrolling the list gives you a sense of “ah, I’ve made it this far,” then I think the first goal is met.

If you spot something odd, please let me know. I’ll fix it.

---

I hope that even complex work feels less daunting when you can see where you are.