9web: multiplexer, HTTP view of the tree, live streams, richer page

One upstream 9P connection now serves any number of browser WebSocket
sessions and, with --serve, plain 9P clients over TCP or Unix (a 9pserve-
style frame remux: tags and fids remapped, Tflush forwarded, reconnect on
upstream loss). /fs/<path> maps HTTP onto the tree: GET file or directory
(JSON or HTML), Range, HEAD with 9P headers, PUT (create, truncate, append,
trailing slash makes a directory), DELETE, and ?follow=1 or text/event-stream
turning a blocking read into server-sent events with Tflush on disconnect.
The page gains a lazy tree, stat panel, create, rename, delete, upload and
follow mode. --probe embeds 9proc for self-introspection. New mux-test and
http-fs-test steps; e2e still passes.

Co-Authored-By: Claude Fable 5.1 <[email protected]>

1 files changed, 22 insertions, 0 deletions

diff --git a/web/static/style.css b/web/static/style.css
index a8605f5..965406b 100644
--- a/web/static/style.css
+++ b/web/static/style.css
@@ -66,6 +66,26 @@ textarea { display: block; width: 100%; min-height: 420px; resize: vertical; bor
 #binary { color: #777; padding: 16px 8px; }
 .actions { display: flex; align-items: center; gap: 12px; margin-top: 10px; font-size: 12px; }
 #edit-status { color: #777; }
+.layout { display: flex; align-items: flex-start; gap: 16px; }
+#sidebar { flex: 0 0 220px; border-right: 1px solid #e2e2e2; padding: 8px 10px 0 0; min-width: 0; }
+.tree-head { color: #999; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; padding: 4px; }
+#filetree, #filetree ul { list-style: none; margin: 0; padding: 0; }
+#filetree ul { margin-left: 12px; }
+#filetree li { line-height: 1.7; white-space: nowrap; }
+#filetree .node { cursor: pointer; font-family: monospace; overflow-wrap: anywhere; }
+#filetree .node.dir { font-weight: bold; }
+#filetree .node.current { background: #ccc; }
+#filetree .twist { display: inline-block; width: 12px; color: #999; }
+.layout main { flex: 1 1 auto; min-width: 0; }
+#stat-panel { margin-top: 18px; border-top: 1px solid #eee; padding-top: 8px; }
+#stat-panel h2 { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: #999; margin: 0 0 6px; }
+#stat { display: grid; grid-template-columns: max-content 1fr; gap: 2px 12px; font: 12px monospace; margin: 0; }
+#stat dt { color: #888; }
+#stat dd { margin: 0; overflow-wrap: anywhere; }
+#stream { display: block; width: 100%; min-height: 300px; max-height: 60vh; overflow: auto; border: 1px solid #ddd; border-top: 0; padding: 10px; margin: 0; font: 13px/1.5 monospace; background: #fbfbfb; white-space: pre-wrap; }
+#follow { margin-left: auto; font-size: 12px; }
+#follow.active { background: #ccc; color: #111; }
+#follow + #download { margin-left: 0; }
 footer { margin: 30px 8px 0; padding-top: 7px; border-top: 1px solid #ddd; text-align: right; color: #999; font-size: 11px; }
 a:focus-visible, button:focus-visible { outline: 2px solid #07539b; outline-offset: 2px; }
 [hidden] { display: none !important; }
@@ -84,4 +104,6 @@ a:focus-visible, button:focus-visible { outline: 2px solid #07539b; outline-offs
   .summary { align-items: start; }
   .file-heading { gap: 7px 12px; }
   textarea { min-height: 350px; }
+  .layout { flex-direction: column; }
+  #sidebar { flex: none; width: 100%; border-right: 0; border-bottom: 1px solid #e2e2e2; max-height: 180px; overflow: auto; padding: 0 0 6px; }
 }