From f1b53c1533539aecbf16ad19fd9156deae091f92 Mon Sep 17 00:00:00 2001 From: Gabriel Schneider Date: Sun, 20 Sep 2026 03:53:17 -0300 Subject: 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/ 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 --- web/static/style.css | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) (limited to 'web/static/style.css') 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; } } -- cgit v1.3