OK I finally put all the pieces together into a coherent whole but its still an MVP https://tomlarkworthy.github.io/lopecode/webpage.html a self-hosted, self-sustainable, recursively exportable, offline-first, file-first, hermetic, web-based programming substrate based on the Observable runtime (and the source code is an Observable notebook) I am seeking ideas on what to do next with it next? What would make it desirable to use for a project? There is an AI in it but I don't have a UI for it. Or maybe I figure out how to do content editable cells, or maybe port some bigger demos (e.g. 3d stuff, maybe VR?)

So many cool ideas in here, I like the tab/panes system too I would love to know more about why you decided to build this!

Several reasons that added. I love observable and used it for several years. I think the mixed source with reactive runtime is genuinely an advancement. However, I keep hitting limitations with the iframe sandboxing and application users want something more recognizable or feel insecure piping data to a 3rd party domain. So I want a self hosted version that can be 3rd party self hosted. When the app is cloned you get a perfect copy that will always be like that, so it avoids things breaking over time problem. And it's a single file so it's easy to run, everyone has a browser. The goal is a substrate for forever software by avoiding tying it to servers or domains or native tooling.

I’ve been using the observable notebook VSCode extension for local dev, but you’re right it doesn’t lend itself especially well to self hosting. It is nice to have everything fit into 1 file. Do you find yourself wanting to pull in dependencies, whether from npm or just splitting the project into smaller files?

Observable runtime has "modules" with private "scopes". To get an npm dependancy to work offline, I save the ESM to a static file in a dedicated notebook (a.k.a. a module) so then I can import that where needed. The Golden Layout is a good example, its what gives it the frames and thats a npm JS ecosystem dependancy. https://observablehq.com/@tomlarkworthy/golden-layout-2-6-0 I go slightly further to reduce file size by gziping the ESM module and using native gzip decompression stream to dynamically construct the URL to import

unzip = async (attachment) =>
  await new Response(
    (await attachment.stream()).pipeThrough(new DecompressionStream("gzip"))
  ).blob()

So the design is modular, it can do modules, its just shoved all in a single file bundled but unpacked dynamically. I do wonder if I should have the concept of a dynamic import from another file though, for a website you might want to share the page index. It would be possible to do: read the other file, find the dependancy in it, and unzip it like we do internally. The file structure is a structured HTML doc, which is easy to parse with DOMParser and lookup dependancies with document.querySelector