Pre(r)amble

This is part of a(n aspirationally) series of posts documenting some of the process of (building|cat herding an AI agent to build) an easily hosted Python teaching tool built with just front-end JS and a WASM port of MicroPython.

I have a (somewhat) up to date version of this tool running on the site. Things might occasionally be broken, things might not work the same way as they did before.

There’s a changelog in the authoring interface to give you a bit of an idea of what’s new or different.

Warning

If you’ve used this before, you might need to do a hard refresh to clear out any cached JS or CSS.

What we had before

See the last post for some of the details and screenshots.

  • Loading problem lists, not just individual problems
  • Persistent success indicators in problems and lists
  • Dependencies for feedback items

What’s happened since

The last week and a bit have mostly been about the user-facing side of Clipy.

Here are some screenshots of the latest version with some of the new things from this week.

File Tab Manager

The fairly primitive tabbed file manager that we had in the earlier versions of Clipy are gone, replaced with something that I hope is a bit friendlier on smaller screens. I had a couple of ideas kicking around in my head:

  • A sideways scrolling list of files, similar to Excel’s worksheets
  • Something more geared to vertical scrolling for more files

I hate Excel’s worksheet navigation with a fiery passion, so the choice was easy, it was just a question of how to manage it.

I settled on at most two files being visible at once with an “N more” button that would pop open a modal with other files in the workspace. main.py would always be visible, of course, with the last opened file also staying open, so you can swap between it and main.py easily.

Rounding things out was renaming for files in the workspace (and in authoring as well).

Record-Replay

A couple of years ago I ran across an interesting Python library called PySnooper which let you decorate some code and see variable state as you ran it. Sort of like print debugging, but there’s almost nothing to clean up, and you don’t need to know what you’re looking for first.

My first run at a WASM Python editor I made a little proof of concept for plugging something like PySnooper in for a basic program and, well, it was OK, but the whole environment was not much more than an interesting demo.

This time the WASM part was worked out first, and I’d almost forgotten about record-replay, but here we are. After the user runs their code (assuming it doesn’t crash) they get a replay of the run. They can scrub through or step through their execution, with any variables on each line showing the current state, giving an opportunity to understand things like variables in for loops, just what is happening to that variable you re-used, etc. Not going to lie, I’m pretty pleased that it seems to be working.

Documentation

I took the time to write up some documentation for the user and author during the week. Shame I need to go retake a bunch of screenshots now that the file manager looks different 😂

Check out the docs here.

(A)Introspection

I’m starting to hate Claude. For every time it’s breezed through adding a feature, it’s gotten stuck like a plus-sized Jack Russell in a rabbit hole many more times, chasing concepts that don’t apply to the project, trying to create Python test files for an environment that runs in the browser, and just general boneheadedness that I wouldn’t expect from any of my students, no matter how inexperienced.

I’ve been playing around with some other custom agent chat modes the last couple of weeks for planning and writing good spec documents, but haven’t gotten around to playing with them much. Too much nervousness around the unknown quality and breaking things more than they sometimes are already when we’re half-way through a feature. I need to find another side project to experiment with, or perhaps something small enough to do end to end with different methods.