fix(web): the tile bar, the view panel and the formula panel are drawn

A user reported "I can't expand categories, and the Tile + View UIs don't
work". Driving the assembled site under Chromium separates three different
answers, and the useful finding is that two of the three were missing only
their last layer.

Category expand already worked, by keyboard: Shift-C, j, Enter folds
Command::ToggleCatExpand client-side and the items appear. What does not work
is the mouse, because categoryList builds plain <li>s with no listener — the
whole page's pointer model, filed as improvise-7ybz rather than guessed at.

The tile bar and the view panel had the cache, the keymap, the resolver and
the host round trip, and no DOM. Before this commit the browser held five
TileBarCache entries and both ViewListCache views; Shift-T entered TileSelect,
ArrowRight moved tile_cat_idx, and r/c/p really did move a category between
axes — with nothing on screen to aim them at. RenderModel had no field for
either and index.html had no element. The formula panel was the third of
Panel::ALL in the same state, and is fixed by the same mechanism rather than
left arbitrarily behind.

So RenderModel grows `tiles`, `views` and `formulas`. The two panels follow
the help overlay's rule — an empty list is what says a widget is closed, so
the page asks no question about the mode — and the tile bar is drawn always
with only its *selection* conditional, exactly as src/ui/tile_bar.rs makes it
conditional on AppMode::TileSelect.

The view panel's axis line would have been a second derivation, so
ViewContent::axis_summary moves to improvise_protocol::viewmodel as
view_axis_summary and the TUI's own panel now calls it: one home, both ends
(design-principles §5).

Tests: harness/tests/widgets.spec.js, proved by running it against the
unfixed bundle, where the four new assertions fail on zero elements and the
category one passes — the control that says the keyboard really is being
driven. Two draft assertions were wrong and both corrections are recorded:
Axis::short_label is three columns ("Quarter Pag"), and switching views
leaves the panel open as the TUI does.

Not fixed, filed: improvise-7ybz (no pointer affordance anywhere on the page),
improvise-wsaw (app.js has never read category_panel_open, so #categories is
drawn unconditionally and is now inconsistent with the two panels added here).

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

web/app.js

@@ -29,6 +29,9 @@ const COL_PX = 110;
 const el = {
   grid: document.getElementById("grid"),
   categories: document.getElementById("categories"),
+  formulas: document.getElementById("formulas"),
+  views: document.getElementById("views"),
+  tiles: document.getElementById("tiles"),
   mode: document.getElementById("mode"),
   hint: document.getElementById("hint"),
   help: document.getElementById("help"),
@@ -187,6 +190,9 @@ function repaint() {
   el.viewName.textContent = model.view_name;
   el.grid.replaceChildren(gridTable(model));
   el.categories.replaceChildren(categoryList(model));
+  paintTiles(model);
+  paintPanel(el.views, model.views, viewRow);
+  paintPanel(el.formulas, model.formulas, formulaRow);
 
   // What the frame costs, so the NEXT viewport announcement is honest.
   // Inline group ROWS are deliberately NOT counted — context/code/clients.md.
@@ -375,6 +381,55 @@ function edit(td, row, col, seed) {
   input.addEventListener("blur", () => close(false));
 }
 
+/** A side panel. An empty row list is what says it is closed — the page asks
+ *  no question about the mode, exactly as `paintHelp` does not. */
+function paintPanel(host, rows, build) {
+  host.hidden = rows.length === 0;
+  const list = document.createElement("ul");
+  for (const row of rows) list.appendChild(build(row));
+  host.replaceChildren(list);
+}
+
+function viewRow(row) {
+  const li = document.createElement("li");
+  li.classList.toggle("selected", row.selected);
+  li.classList.toggle("active", row.active);
+  // The active marker is the TUI's, and the axis line is the shared
+  // derivation's — the page spells neither the summary nor the axis letters.
+  const name = document.createElement("span");
+  name.className = "name";
+  name.textContent = (row.active ? "▶ " : "  ") + row.name;
+  li.append(name);
+  if (row.axes) {
+    const axes = document.createElement("span");
+    axes.className = "axes";
+    axes.textContent = row.axes;
+    li.append(axes);
+  }
+  return li;
+}
+
+function formulaRow(row) {
+  const li = document.createElement("li");
+  li.classList.toggle("selected", row.selected);
+  li.textContent = row.text;
+  return li;
+}
+
+/** The tile bar. `selected` is only ever true in tile-select mode, which is
+ *  decided in Rust; an empty tile list draws nothing at all. */
+function paintTiles(model) {
+  el.tiles.hidden = model.tiles.length === 0;
+  const tiles = model.tiles.map((tile) => {
+    const span = document.createElement("span");
+    span.className = "tile";
+    span.classList.toggle("selected", tile.selected);
+    span.textContent = `${tile.category} ${tile.axis}`;
+    return span;
+  });
+  el.tiles.replaceChildren(...tiles);
+}
+
 function categoryList(model) {
   const list = document.createElement("ul");
   for (const row of model.categories) {

web/index.html

@@ -74,8 +74,12 @@
       the server is for — not running one is what everything above is for.
     </p>
 
+    <div id="tiles" aria-label="Tiles"></div>
+
     <main>
       <aside id="categories" aria-label="Categories"></aside>
+      <aside id="formulas" aria-label="Formulas" hidden></aside>
+      <aside id="views" aria-label="Views" hidden></aside>
       <div id="grid" tabindex="0" aria-label="Grid"></div>
     </main>
 

web/style.css

@@ -72,18 +72,59 @@ main {
   border-right: 1px solid var(--line);
 }
 
-#categories ul {
+#formulas,
+#views {
+  width: 18rem;
+  flex: none;
+  overflow: auto;
+  padding: 0.5rem;
+  border-right: 1px solid var(--line);
+}
+
+#categories ul,
+#formulas ul,
+#views ul {
   margin: 0;
   padding: 0;
   list-style: none;
 }
 
+#views .axes {
+  margin-left: 0.5rem;
+  opacity: 0.6;
+  font-size: 0.85em;
+}
+
+#views .active .name {
+  color: var(--accent);
+}
+
+/* The tile bar. One line above the grid, as the TUI draws it. */
+#tiles {
+  display: flex;
+  gap: 0.25rem;
+  padding: 0.25rem 0.5rem;
+  border-bottom: 1px solid var(--line);
+  overflow-x: auto;
+  white-space: nowrap;
+}
+
+#tiles .tile {
+  padding: 0 0.4rem;
+  border: 1px solid var(--line);
+  border-radius: 3px;
+  font-size: 0.85em;
+}
+
 #categories .item {
   padding-left: 1.5rem;
   opacity: 0.85;
 }
 
 #categories .selected,
+#formulas .selected,
+#views .selected,
+#tiles .selected,
 td.selected {
   background: var(--selected);
   outline: 1px solid var(--accent);