Mini OS

The window manager: which windows are open, minimized or full screen, where each one sits, and which is on top. That is 20 numbers. Each click hands them, plus the click, to one network of 362 neurons, which returns the 20 new numbers.
One click, one run: the page chains that same network 40 times, once per click, so you get 40 clicks. Reset starts over. Buttons that would change nothing, like an arrow at the edge of the desktop or the window that is already in front, are switched off, so they don't use up a click.
The motion is plain CSS: the network decides where a window should be; the browser only animates it there.
Notes is a real text box: what you type is kept by the browser, not by the network, so it stays while windows move.
Try: click a window that is behind another to bring it forward, nudge it with the arrows, send it to the dock and back, open a photo, and watch the numbers in Monitor.

How it works (for the curious)

Where this comes from

A reduced, CSS edition of Cheng Lou's HandwiredOS, a desktop whose windows, dock and apps are run by one compiled program. CSS can't read where the pointer is, which key you pressed or what time it is, so this edition is driven by clicks only: every click is one event. You can't drag a window; the arrows move it one step on a coarse grid. Typing goes to a normal text box the network never sees.

One click, as ReLUs

Part	How
which control	37 controls, the click comes in as one number `ev`; `[ev = k]` for each k, three ReLUs each
only on screen	a window's buttons work when it is open and not minimized: `relu([ev = k] + open − minimized − 1)`
switched off	the screen network also says which arrows can still move (or restore a full-screen window) and which window is in front; the page shrinks those buttons' labels to nothing, so a click there does nothing and costs nothing
to the top	the window gets rank 2; every window above it moves down one: `rank − AND(top_w, [rank > rank_w])`
to the bottom	close and minimize: rank 0, everyone below moves up one
move	`x + AND(right, [x < max]) − AND(left, [x ≥ 1])`: clamped to the desktop
maximize	a toggle, `mx + AND(max, 1 − mx) − AND(max, mx)`; a move or a close also restores it
photos	a thumbnail opens its photo while the grid shows; back returns to the grid; closing Photos too

layer 1

175

layer 2

107

layer 3

output

hand-writtencarry (passes a value down a layer)

A second, smaller network (3 layers, 168 neurons) turns the final 20 numbers into what you see: each window's rectangle (full screen when maximized), whether it is on screen, which one is focused, which photo shows, the arrows that can still move. CSS then only places boxes at those numbers, with a transition.

The state

Per window	Values
open, minimized, maximized	0 or 1
x, y	grid cells: Notes 0…7 × 0…5, Photos 0…8 × 0…4, Monitor 0…8 × 0…5
rank	0, 1, 2: the stacking order, a permutation; 2 is on top
and once	the photo shown (0 is the grid) and the clicks used

Each of the 40 slots is its own group of 37 radio buttons, and every control on screen holds 40 labels, one per slot, of which only the next slot's is shown. A window's title bar and its inside are two labels for the same click. That's 1,600 labels in all.

Checked in numpy against a plain Python window manager: every event in every combination of window flags, stacking order and photo (285,000 cases), every event at every grid position, and 4,000 random sequences of 60 events, every value after every event. The browser test clicks 2 scripted and 6 random 40-click sequences in Chromium, Firefox and WebKit, on a wide screen and at phone width, compares the whole state after every click, and checks that switched-off buttons and the keyboard change nothing. Built by handwired/scripts/mini_os.py and build_os.py.