rename ui to clan-app and move clan-app one layer up

2025-05-15 13:19:20 +02:00
parent 5753109b80
commit 57dcd47992
190 changed files with 128 additions and 192 deletions
--- a/pkgs/clan-app/.envrc
+++ b/pkgs/clan-app/.envrc
@@ -0,0 +1,7 @@
+# shellcheck shell=bash
+source_up
+
+watch_file flake-module.nix shell.nix webview-ui/flake-module.nix
+
+# Because we depend on nixpkgs sources, uploading to builders takes a long time
+use flake .#ui --builders ''
--- a/pkgs/clan-app/README.md
+++ b/pkgs/clan-app/README.md
@@ -0,0 +1,137 @@
+# Clan App
+
+A powerful application that allows users to create and manage their own Clans.
+
+## Getting Started
+
+Enter the `pkgs/ui` directory and allow [direnv] to load the `ui` devshell with `direnv allow`:
+
+```console
+❯ direnv allow
+direnv: loading ~/Development/lol/clan/git/clan/clan-core/pkgs/ui/.envrc
+direnv: loading ~/Development/lol/clan/git/clan/clan-core/.envrc
+direnv: using flake
+direnv: nix-direnv: Renewed cache
+switch to another dev-shell using: select-shell
+direnv: using flake .#ui --builders
+path '/home/brian/Development/lol/clan/git/clan/clan-core/pkgs/ui' does not contain a 'flake.nix', searching up
+direnv: ([/nix/store/rjnigckx9rmga58562hxw9kr5hynavcd-direnv-2.36.0/bin/direnv export zsh]) is taking a while to execute. Use CTRL-C to give up.
+path '/home/brian/Development/lol/clan/git/clan/clan-core/pkgs/ui' does not contain a 'flake.nix', searching up
+direnv: nix-direnv: Renewed cache
+switch to another dev-shell using: select-shell
+/home/brian/.config/direnv/lib/hm-nix-direnv.sh:3858: /home/brian/Development/lol/clan/git/clan/clan-core/pkgs/ui/clan-app/.local.env: No such file or directory
+direnv: export +AR +AS +CC +CLAN_CORE_PATH +CONFIG_SHELL +CXX +DETERMINISTIC_BUILD +GETTEXTDATADIRS +GETTEXTDATADIRS_FOR_BUILD +GETTEXTDATADIRS_FOR_TARGET +GIT_ROOT +GSETTINGS_SCHEMAS_PATH +HOST_PATH +IN_NIX_SHELL +LD +NIX_BINTOOLS +NIX_BINTOOLS_WRAPPER_TARGET_HOST_x86_64_unknown_linux_gnu +NIX_BUILD_CORES +NIX_CC +NIX_CC_WRAPPER_TARGET_HOST_x86_64_unknown_linux_gnu +NIX_CFLAGS_COMPILE +NIX_ENFORCE_NO_NATIVE +NIX_HARDENING_ENABLE +NIX_LDFLAGS +NIX_STORE +NM +NODE_PATH +OBJCOPY +OBJDUMP +PC_CONFIG_FILES +PKG_ROOT_CLAN_APP +PKG_ROOT_UI +PKG_ROOT_WEBVIEW_UI +PRJ_ROOT +PYTHONHASHSEED +PYTHONNOUSERSITE +PYTHONPATH +RANLIB +READELF +SIZE +SOURCE_DATE_EPOCH +STRINGS +STRIP +WEBVIEW_LIB_DIR +_PYTHON_HOST_PLATFORM +_PYTHON_SYSCONFIGDATA_NAME +__structuredAttrs +buildInputs +buildPhase +builder +cmakeFlags +configureFlags +depsBuildBuild +depsBuildBuildPropagated +depsBuildTarget +depsBuildTargetPropagated +depsHostHost +depsHostHostPropagated +depsTargetTarget +depsTargetTargetPropagated +doCheck +doInstallCheck +dontAddDisableDepTrack +mesonFlags +name +nativeBuildInputs +out +outputs +patches +phases +preferLocalBuild +propagatedBuildInputs +propagatedNativeBuildInputs +shell +shellHook +stdenv +strictDeps +system ~GDK_PIXBUF_MODULE_FILE ~GI_TYPELIB_PATH ~PATH ~XDG_DATA_DIRS
+```
+
+Once that has loaded, you can run the local dev environment by running `process-compose`.
+
+This will start a [process-compose] instance containing two processes:
+
+* `webview-ui` which is a background process running a [vite] server for `./webview-ui` in a hot-reload fashion
+* `clan-app` which is a [foreground process](https://f1bonacc1.github.io/process-compose/launcher/?h=foreground#foreground-processes),
+that is started on demand and provides the [webview] wrapper for the UI.
+
+Wait for the `webview-ui` process to enter the `Running` state, then navigate to the `clan-app` process and press `F7`.
+This will start the [webview] window and bring `clan-app`'s terminal into the foreground, allowing for interaction with
+the debugger if required.
+
+If you need to restart, simply enter `ctrl+c` and you will be dropped back into the `process-compose` terminal.
+From there you can start `clan-app` again with `F7`.
+
+> **Note**
+> If you are interacting with a breakpoint, do not continue/exit with `ctrl+c` as this will introduce a quirk
+> the next time you start `clan-app` where you will be unable to see the input you are typing in a debugging session.
+>
+> Instead, exit the debugger with `q+Enter`.
+
+Follow the instructions below to set up your development environment and start the application:
+
+
+## Start clan-app without process-compose
+
+
+1. **Navigate to the Webview UI Directory**
+
+   Go to the `clan-core/pkgs/clan-app/webview-ui/app` directory and start the web server by executing:
+
+   ```bash
+   npm install
+   vite
+   ```
+
+2. **Start the Clan App**
+
+   In the `clan-core/pkgs/clan-app` directory, execute the following command:
+
+   ```bash
+   ./bin/clan-app --debug --content-uri http://localhost:3000
+   ```
+
+This will start the application in debug mode and link it to the web server running at `http://localhost:3000`.
+
+### Debugging Style and Layout
+
+```bash
+# Enable the GTK debugger
+gsettings set org.gtk.Settings.Debug enable-inspector-keybinding true
+
+# Start the application with the debugger attached
+GTK_DEBUG=interactive ./bin/clan-app --debug
+```
+
+Appending `--debug` flag enables debug logging printed into the console.
+
+### Profiling
+
+To activate profiling you can run
+
+```bash
+CLAN_CLI_PERF=1 ./bin/clan-app
+```
+
+### Library Components
+
+> Note:
+>
+> we recognized bugs when starting some cli-commands through the integrated vs-code terminal.
+> If encountering issues make sure to run commands in a regular os-shell.
+
+lib-Adw has a demo application showing all widgets. You can run it by executing
+
+```bash
+adwaita-1-demo
+```
+
+GTK4 has a demo application showing all widgets. You can run it by executing
+
+```bash
+gtk4-widget-factory
+```
+
+To find available icons execute
+
+```bash
+gtk4-icon-browser
+```
+
+### Links
+
+Here are some important documentation links related to the Clan App:
+
+- [GTK4 PyGobject Reference](http://lazka.github.io/pgi-docs/index.html#Gtk-4.0): This link provides the PyGObject reference documentation for GTK4, the toolkit used for building the user interface of the clan app. It includes information about GTK4 widgets, signals, and other features.
+
+- [Adw Widget Gallery](https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/widget-gallery.html): This link showcases a widget gallery for Adw, allowing you to see the available widgets and their visual appearance. It can be helpful for designing the user interface of the clan app.
+
+- [GNOME Human Interface Guidelines](https://developer.gnome.org/hig/): This link provides the GNOME Human Interface Guidelines, which offer design and usability recommendations for creating GNOME applications. It covers topics such as layout, navigation, and interaction patterns.
+
+## Error handling
+
+> Error dialogs should be avoided where possible, since they are disruptive.
+>
+> For simple non-critical errors, toasts can be a good alternative.
+
+
+[direnv]: https://direnv.net/
+[process-compose]: https://f1bonacc1.github.io/process-compose/
+[vite]: https://vite.dev/
+[webview]: https://github.com/webview/webview
--- a/pkgs/clan-app/bin/clan-app
+++ b/pkgs/clan-app/bin/clan-app
@@ -0,0 +1,14 @@
+#!/usr/bin/env python3
+import sys
+from pathlib import Path
+
+module_path = Path(__file__).parent.parent.absolute()
+
+
+sys.path.insert(0, str(module_path))
+sys.path.insert(0, str(module_path.parent / "clan_cli"))
+
+from clan_app import main  # NOQA
+
+if __name__ == "__main__":
+    main()
--- a/pkgs/clan-app/clan-app.code-workspace
+++ b/pkgs/clan-app/clan-app.code-workspace
@@ -0,0 +1,53 @@
+{
+	"folders": [
+		{
+			"path": "."
+		},
+		{
+			"path": "../clan-cli/clan_cli"
+		},
+		{
+			"path": "../clan-cli/tests"
+		},
+		{
+			"path": "../../nixosModules"
+		},
+		{
+			"path": "../../lib/build-clan"
+		},
+		{
+			"path": "../webview-ui"
+		},
+		{
+			"path": "../webview-lib"
+		},
+		{
+			"path": "../clan-cli/clan_lib"
+		}
+	],
+	"settings": {
+		"python.linting.mypyEnabled": true,
+		"files.exclude": {
+			"**/__pycache__": true,
+			"**/.direnv": true,
+			"**/.hypothesis": true,
+			"**/.mypy_cache": true,
+			"**/.reports": true,
+			"**/.ruff_cache": true,
+			"**/.webui": true,
+			"**/result/**": true,
+			"/nix/store/**": true
+		},
+		"search.exclude": {
+			"**/__pycache__": true,
+			"**/.direnv": true,
+			"**/.hypothesis": true,
+			"**/.mypy_cache": true,
+			"**/.reports": true,
+			"**/.ruff_cache": true,
+			"**/result/": true,
+			"/nix/store/**": true
+		},
+		"files.autoSave": "off"
+	}
+}
--- a/pkgs/clan-app/clan_app/init.py
+++ b/pkgs/clan-app/clan_app/init.py
@@ -0,0 +1,28 @@
+import argparse
+import logging
+import sys
+
+from clan_cli.profiler import profile
+
+log = logging.getLogger(__name__)
+
+from clan_app.app import ClanAppOptions, app_run
+
+
+@profile
+def main(argv: list[str] = sys.argv) -> int:
+    parser = argparse.ArgumentParser(description="Clan App")
+    parser.add_argument(
+        "--content-uri", type=str, help="The URI of the content to display"
+    )
+    parser.add_argument("--debug", action="store_true", help="Enable debug mode")
+    args = parser.parse_args(argv[1:])
+
+    app_opts = ClanAppOptions(content_uri=args.content_uri, debug=args.debug)
+    try:
+        app_run(app_opts)
+    except KeyboardInterrupt:
+        log.info("Keyboard interrupt received, exiting...")
+        return 0
+
+    return 0
--- a/pkgs/clan-app/clan_app/main.py
+++ b/pkgs/clan-app/clan_app/main.py
@@ -0,0 +1,6 @@
+import sys
+
+from . import main
+
+if __name__ == "__main__":
+    sys.exit(main())
--- a/pkgs/clan-app/clan_app/api/init.py
+++ b/pkgs/clan-app/clan_app/api/init.py
--- a/pkgs/clan-app/clan_app/api/file_gtk.py
+++ b/pkgs/clan-app/clan_app/api/file_gtk.py
@@ -0,0 +1,200 @@
+# ruff: noqa: N801
+import gi
+
+gi.require_version("Gtk", "4.0")
+
+import logging
+import time
+from pathlib import Path
+from typing import Any
+
+from clan_lib.api import ApiError, ErrorDataClass, SuccessDataClass
+from clan_lib.api.directory import FileRequest
+from gi.repository import Gio, GLib, Gtk
+
+log = logging.getLogger(__name__)
+
+
+def remove_none(_list: list) -> list:
+    return [i for i in _list if i is not None]
+
+
+RESULT: dict[str, SuccessDataClass[list[str] | None] | ErrorDataClass] = {}
+
+
+def open_file(
+    file_request: FileRequest, *, op_key: str
+) -> SuccessDataClass[list[str] | None] | ErrorDataClass:
+    GLib.idle_add(gtk_open_file, file_request, op_key)
+
+    while RESULT.get(op_key) is None:
+        time.sleep(0.2)
+    response = RESULT[op_key]
+    del RESULT[op_key]
+    return response
+
+
+def gtk_open_file(file_request: FileRequest, op_key: str) -> bool:
+    def returns(data: SuccessDataClass | ErrorDataClass) -> None:
+        global RESULT
+        RESULT[op_key] = data
+
+    def on_file_select(file_dialog: Gtk.FileDialog, task: Gio.Task) -> None:
+        try:
+            gfile = file_dialog.open_finish(task)
+            if gfile:
+                selected_path = remove_none([gfile.get_path()])
+                returns(
+                    SuccessDataClass(
+                        op_key=op_key, data=selected_path, status="success"
+                    )
+                )
+        except Exception as e:
+            log.exception("Error opening file")
+            returns(
+                ErrorDataClass(
+                    op_key=op_key,
+                    status="error",
+                    errors=[
+                        ApiError(
+                            message=e.__class__.__name__,
+                            description=str(e),
+                            location=["open_file"],
+                        )
+                    ],
+                )
+            )
+
+    def on_file_select_multiple(file_dialog: Gtk.FileDialog, task: Gio.Task) -> None:
+        try:
+            gfiles: Any = file_dialog.open_multiple_finish(task)
+            if gfiles:
+                selected_paths = remove_none([gfile.get_path() for gfile in gfiles])
+                returns(
+                    SuccessDataClass(
+                        op_key=op_key, data=selected_paths, status="success"
+                    )
+                )
+            else:
+                returns(SuccessDataClass(op_key=op_key, data=None, status="success"))
+        except Exception as e:
+            log.exception("Error opening file")
+            returns(
+                ErrorDataClass(
+                    op_key=op_key,
+                    status="error",
+                    errors=[
+                        ApiError(
+                            message=e.__class__.__name__,
+                            description=str(e),
+                            location=["open_file"],
+                        )
+                    ],
+                )
+            )
+
+    def on_folder_select(file_dialog: Gtk.FileDialog, task: Gio.Task) -> None:
+        try:
+            gfile = file_dialog.select_folder_finish(task)
+            if gfile:
+                selected_path = remove_none([gfile.get_path()])
+                returns(
+                    SuccessDataClass(
+                        op_key=op_key, data=selected_path, status="success"
+                    )
+                )
+            else:
+                returns(SuccessDataClass(op_key=op_key, data=None, status="success"))
+        except Exception as e:
+            log.exception("Error opening file")
+            returns(
+                ErrorDataClass(
+                    op_key=op_key,
+                    status="error",
+                    errors=[
+                        ApiError(
+                            message=e.__class__.__name__,
+                            description=str(e),
+                            location=["open_file"],
+                        )
+                    ],
+                )
+            )
+
+    def on_save_finish(file_dialog: Gtk.FileDialog, task: Gio.Task) -> None:
+        try:
+            gfile = file_dialog.save_finish(task)
+            if gfile:
+                selected_path = remove_none([gfile.get_path()])
+                returns(
+                    SuccessDataClass(
+                        op_key=op_key, data=selected_path, status="success"
+                    )
+                )
+            else:
+                returns(SuccessDataClass(op_key=op_key, data=None, status="success"))
+        except Exception as e:
+            log.exception("Error opening file")
+            returns(
+                ErrorDataClass(
+                    op_key=op_key,
+                    status="error",
+                    errors=[
+                        ApiError(
+                            message=e.__class__.__name__,
+                            description=str(e),
+                            location=["open_file"],
+                        )
+                    ],
+                )
+            )
+
+    dialog = Gtk.FileDialog()
+
+    if file_request.title:
+        dialog.set_title(file_request.title)
+
+    if file_request.filters:
+        filters = Gio.ListStore.new(Gtk.FileFilter)
+        file_filters = Gtk.FileFilter()
+
+        if file_request.filters.title:
+            file_filters.set_name(file_request.filters.title)
+
+        if file_request.filters.mime_types:
+            for mime in file_request.filters.mime_types:
+                file_filters.add_mime_type(mime)
+                filters.append(file_filters)
+
+        if file_request.filters.patterns:
+            for pattern in file_request.filters.patterns:
+                file_filters.add_pattern(pattern)
+
+        if file_request.filters.suffixes:
+            for suffix in file_request.filters.suffixes:
+                file_filters.add_suffix(suffix)
+
+        filters.append(file_filters)
+        dialog.set_filters(filters)
+
+    if file_request.initial_file:
+        p = Path(file_request.initial_file).expanduser()
+        f = Gio.File.new_for_path(str(p))
+        dialog.set_initial_file(f)
+
+    if file_request.initial_folder:
+        p = Path(file_request.initial_folder).expanduser()
+        f = Gio.File.new_for_path(str(p))
+        dialog.set_initial_folder(f)
+
+    # if select_folder
+    if file_request.mode == "select_folder":
+        dialog.select_folder(callback=on_folder_select)
+    if file_request.mode == "open_multiple_files":
+        dialog.open_multiple(callback=on_file_select_multiple)
+    elif file_request.mode == "open_file":
+        dialog.open(callback=on_file_select)
+    elif file_request.mode == "save":
+        dialog.save(callback=on_save_finish)
+
+    return GLib.SOURCE_REMOVE
--- a/pkgs/clan-app/clan_app/app.py
+++ b/pkgs/clan-app/clan_app/app.py
@@ -0,0 +1,82 @@
+import logging
+
+from clan_cli.profiler import profile
+
+log = logging.getLogger(__name__)
+import os
+from dataclasses import dataclass
+from pathlib import Path
+
+from clan_cli.custom_logger import setup_logging
+from clan_lib.api import API, ErrorDataClass, SuccessDataClass
+
+from clan_app.api.file_gtk import open_file
+from clan_app.deps.webview.webview import Size, SizeHint, Webview
+
+
+@dataclass
+class ClanAppOptions:
+    content_uri: str
+    debug: bool
+
+
+@profile
+def app_run(app_opts: ClanAppOptions) -> int:
+    if app_opts.debug:
+        setup_logging(logging.DEBUG, root_log_name=__name__.split(".")[0])
+        setup_logging(logging.DEBUG, root_log_name="clan_cli")
+    else:
+        setup_logging(logging.INFO, root_log_name=__name__.split(".")[0])
+        setup_logging(logging.INFO, root_log_name="clan_cli")
+
+    log.debug("Debug mode enabled")
+
+    if app_opts.content_uri:
+        content_uri = app_opts.content_uri
+    else:
+        site_index: Path = Path(os.getenv("WEBUI_PATH", ".")).resolve() / "index.html"
+        content_uri = f"file://{site_index}"
+
+    webview = Webview(debug=app_opts.debug)
+    webview.title = "Clan App"
+    # This seems to call the gtk api correctly but and gtk also seems to our icon, but somehow the icon is not loaded.
+    webview.icon = "clan-white"
+
+    def cancel_task(
+        task_id: str, *, op_key: str
+    ) -> SuccessDataClass[None] | ErrorDataClass:
+        """Cancel a task by its op_key."""
+        log.debug(f"Cancelling task with op_key: {task_id}")
+        future = webview.threads.get(task_id)
+        if future:
+            future.stop_event.set()
+            log.debug(f"Task {task_id} cancelled.")
+        else:
+            log.warning(f"Task {task_id} not found.")
+        return SuccessDataClass(
+            op_key=op_key,
+            data=None,
+            status="success",
+        )
+
+    def list_tasks(
+        *,
+        op_key: str,
+    ) -> SuccessDataClass[list[str]] | ErrorDataClass:
+        """List all tasks."""
+        log.debug("Listing all tasks.")
+        tasks = list(webview.threads.keys())
+        return SuccessDataClass(
+            op_key=op_key,
+            data=tasks,
+            status="success",
+        )
+
+    API.overwrite_fn(list_tasks)
+    API.overwrite_fn(open_file)
+    API.overwrite_fn(cancel_task)
+    webview.bind_jsonschema_api(API)
+    webview.size = Size(1280, 1024, SizeHint.NONE)
+    webview.navigate(content_uri)
+    webview.run()
+    return 0
--- a/pkgs/clan-app/clan_app/assets/init.py
+++ b/pkgs/clan-app/clan_app/assets/init.py
@@ -0,0 +1,7 @@
+from pathlib import Path
+
+loc: Path = Path(__file__).parent
+
+
+def get_asset(name: str | Path) -> Path:
+    return loc / name
--- a/pkgs/clan-app/clan_app/assets/white-favicons/128x128/apps/clan-white.png
+++ b/pkgs/clan-app/clan_app/assets/white-favicons/128x128/apps/clan-white.png
--- a/pkgs/clan-app/clan_app/assets/white-favicons/16x16/apps/clan-white.png
+++ b/pkgs/clan-app/clan_app/assets/white-favicons/16x16/apps/clan-white.png
--- a/pkgs/clan-app/clan_app/assets/white-favicons/32x32/apps/clan-white.png
+++ b/pkgs/clan-app/clan_app/assets/white-favicons/32x32/apps/clan-white.png
--- a/pkgs/clan-app/clan_app/assets/white-favicons/48x48/apps/clan-white.png
+++ b/pkgs/clan-app/clan_app/assets/white-favicons/48x48/apps/clan-white.png
--- a/pkgs/clan-app/clan_app/assets/white-favicons/64x64/apps/clan-white.png
+++ b/pkgs/clan-app/clan_app/assets/white-favicons/64x64/apps/clan-white.png
--- a/pkgs/clan-app/clan_app/deps/init.py
+++ b/pkgs/clan-app/clan_app/deps/init.py
--- a/pkgs/clan-app/clan_app/deps/webview/init.py
+++ b/pkgs/clan-app/clan_app/deps/webview/init.py
--- a/pkgs/clan-app/clan_app/deps/webview/_webview_ffi.py
+++ b/pkgs/clan-app/clan_app/deps/webview/_webview_ffi.py
@@ -0,0 +1,118 @@
+import ctypes
+import ctypes.util
+import os
+import platform
+from ctypes import CFUNCTYPE, c_char_p, c_int, c_void_p
+from pathlib import Path
+
+
+def _encode_c_string(s: str) -> bytes:
+    return s.encode("utf-8")
+
+
+def _get_webview_version() -> str:
+    """Get webview version from environment variable or use default"""
+    return os.getenv("WEBVIEW_VERSION", "0.8.1")
+
+
+def _get_lib_names() -> list[str]:
+    """Get platform-specific library names."""
+    system = platform.system().lower()
+    machine = platform.machine().lower()
+
+    if system == "windows":
+        if machine == "amd64" or machine == "x86_64":
+            return ["webview.dll", "WebView2Loader.dll"]
+        if machine == "arm64":
+            msg = "arm64 is not supported on Windows"
+            raise RuntimeError(msg)
+        msg = f"Unsupported architecture: {machine}"
+        raise RuntimeError(msg)
+    if system == "darwin":
+        if machine == "arm64":
+            return ["libwebview.dylib"]
+        msg = "Not supported"
+        raise RuntimeError(msg)
+    # linux
+    return ["libwebview.so"]
+
+
+def _be_sure_libraries() -> list[Path] | None:
+    """Ensure libraries exist and return paths."""
+
+    lib_dir = os.environ.get("WEBVIEW_LIB_DIR")
+    if not lib_dir:
+        msg = "WEBVIEW_LIB_DIR environment variable is not set"
+        raise RuntimeError(msg)
+    lib_dir_p = Path(lib_dir)
+    lib_names = _get_lib_names()
+    lib_paths = [lib_dir_p / lib_name for lib_name in lib_names]
+
+    # Check if any library is missing
+    missing_libs = [path for path in lib_paths if not path.exists()]
+    if not missing_libs:
+        return lib_paths
+    return None
+
+
+class _WebviewLibrary:
+    def __init__(self) -> None:
+        lib_names = _get_lib_names()
+
+        library_path = ctypes.util.find_library(lib_names[0])
+        if not library_path:
+            library_paths = _be_sure_libraries()
+        if not library_paths:
+            msg = f"Failed to find required library: {lib_names}"
+            raise RuntimeError(msg)
+        try:
+            self.lib = ctypes.cdll.LoadLibrary(str(library_paths[0]))
+        except Exception as e:
+            print(f"Failed to load webview library: {e}")
+            raise
+
+        # Define FFI functions
+        self.webview_create = self.lib.webview_create
+        self.webview_create.argtypes = [c_int, c_void_p]
+        self.webview_create.restype = c_void_p
+
+        self.webview_destroy = self.lib.webview_destroy
+        self.webview_destroy.argtypes = [c_void_p]
+
+        self.webview_run = self.lib.webview_run
+        self.webview_run.argtypes = [c_void_p]
+
+        self.webview_terminate = self.lib.webview_terminate
+        self.webview_terminate.argtypes = [c_void_p]
+
+        self.webview_set_title = self.lib.webview_set_title
+        self.webview_set_title.argtypes = [c_void_p, c_char_p]
+
+        self.webview_set_icon = self.lib.webview_set_icon
+        self.webview_set_icon.argtypes = [c_void_p, c_char_p]
+
+        self.webview_set_size = self.lib.webview_set_size
+        self.webview_set_size.argtypes = [c_void_p, c_int, c_int, c_int]
+
+        self.webview_navigate = self.lib.webview_navigate
+        self.webview_navigate.argtypes = [c_void_p, c_char_p]
+
+        self.webview_init = self.lib.webview_init
+        self.webview_init.argtypes = [c_void_p, c_char_p]
+
+        self.webview_eval = self.lib.webview_eval
+        self.webview_eval.argtypes = [c_void_p, c_char_p]
+
+        self.webview_bind = self.lib.webview_bind
+        self.webview_bind.argtypes = [c_void_p, c_char_p, c_void_p, c_void_p]
+
+        self.webview_unbind = self.lib.webview_unbind
+        self.webview_unbind.argtypes = [c_void_p, c_char_p]
+
+        self.webview_return = self.lib.webview_return
+        self.webview_return.argtypes = [c_void_p, c_char_p, c_int, c_char_p]
+
+        self.CFUNCTYPE = CFUNCTYPE
+
+
+_webview_lib = _WebviewLibrary()
--- a/pkgs/clan-app/clan_app/deps/webview/webview.py
+++ b/pkgs/clan-app/clan_app/deps/webview/webview.py
@@ -0,0 +1,237 @@
+import ctypes
+import functools
+import json
+import logging
+import threading
+from collections.abc import Callable
+from dataclasses import dataclass
+from enum import IntEnum
+from typing import Any
+
+from clan_cli.async_run import set_should_cancel
+from clan_lib.api import (
+    ApiError,
+    ErrorDataClass,
+    MethodRegistry,
+    dataclass_to_dict,
+    from_dict,
+)
+
+from ._webview_ffi import _encode_c_string, _webview_lib
+
+log = logging.getLogger(__name__)
+
+
+class SizeHint(IntEnum):
+    NONE = 0
+    MIN = 1
+    MAX = 2
+    FIXED = 3
+
+
+class FuncStatus(IntEnum):
+    SUCCESS = 0
+    FAILURE = 1
+
+
+class Size:
+    def __init__(self, width: int, height: int, hint: SizeHint) -> None:
+        self.width = width
+        self.height = height
+        self.hint = hint
+
+
+@dataclass
+class WebThread:
+    thread: threading.Thread
+    stop_event: threading.Event
+
+
+class Webview:
+    def __init__(
+        self, debug: bool = False, size: Size | None = None, window: int | None = None
+    ) -> None:
+        self._handle = _webview_lib.webview_create(int(debug), window)
+        self._callbacks: dict[str, Callable[..., Any]] = {}
+        self.threads: dict[str, WebThread] = {}
+
+        if size:
+            self.size = size
+
+    def api_wrapper(
+        self,
+        api: MethodRegistry,
+        method_name: str,
+        wrap_method: Callable[..., Any],
+        op_key_bytes: bytes,
+        request_data: bytes,
+        arg: int,
+    ) -> None:
+        op_key = op_key_bytes.decode()
+        args = json.loads(request_data.decode())
+        log.debug(f"Calling {method_name}({args[0]})")
+
+        # Initialize dataclasses from the payload
+        reconciled_arguments = {}
+        for k, v in args[0].items():
+            # Some functions expect to be called with dataclass instances
+            # But the js api returns dictionaries.
+            # Introspect the function and create the expected dataclass from dict dynamically
+            # Depending on the introspected argument_type
+            arg_class = api.get_method_argtype(method_name, k)
+
+            # TODO: rename from_dict into something like construct_checked_value
+            # from_dict really takes Anything and returns an instance of the type/class
+            reconciled_arguments[k] = from_dict(arg_class, v)
+
+        reconciled_arguments["op_key"] = op_key
+        # TODO: We could remove the wrapper in the MethodRegistry
+        # and just call the method directly
+
+        def thread_task(stop_event: threading.Event) -> None:
+            try:
+                set_should_cancel(lambda: stop_event.is_set())
+                result = wrap_method(**reconciled_arguments)
+
+                serialized = json.dumps(
+                    dataclass_to_dict(result), indent=4, ensure_ascii=False
+                )
+
+                log.debug(f"Result for {method_name}: {serialized}")
+                self.return_(op_key, FuncStatus.SUCCESS, serialized)
+            except Exception as e:
+                log.exception(f"Error while handling result of {method_name}")
+                result = ErrorDataClass(
+                    op_key=op_key,
+                    status="error",
+                    errors=[
+                        ApiError(
+                            message="An internal error occured",
+                            description=str(e),
+                            location=["bind_jsonschema_api", method_name],
+                        )
+                    ],
+                )
+                serialized = json.dumps(
+                    dataclass_to_dict(result), indent=4, ensure_ascii=False
+                )
+                self.return_(op_key, FuncStatus.FAILURE, serialized)
+            finally:
+                del self.threads[op_key]
+
+        stop_event = threading.Event()
+        thread = threading.Thread(
+            target=thread_task, args=(stop_event,), name="WebviewThread"
+        )
+        thread.start()
+        self.threads[op_key] = WebThread(thread=thread, stop_event=stop_event)
+
+    def __enter__(self) -> "Webview":
+        return self
+
+    @property
+    def size(self) -> Size:
+        return self._size
+
+    @size.setter
+    def size(self, value: Size) -> None:
+        _webview_lib.webview_set_size(
+            self._handle, value.width, value.height, value.hint
+        )
+        self._size = value
+
+    @property
+    def title(self) -> str:
+        return self._title
+
+    @title.setter
+    def title(self, value: str) -> None:
+        _webview_lib.webview_set_title(self._handle, _encode_c_string(value))
+        self._title = value
+
+    @property
+    def icon(self) -> str:
+        return self._icon
+
+    @icon.setter
+    def icon(self, value: str) -> None:
+        _webview_lib.webview_set_icon(self._handle, _encode_c_string(value))
+        self._icon = value
+
+    def destroy(self) -> None:
+        for name in list(self._callbacks.keys()):
+            self.unbind(name)
+        _webview_lib.webview_terminate(self._handle)
+        _webview_lib.webview_destroy(self._handle)
+        self._handle = None
+
+    def navigate(self, url: str) -> None:
+        _webview_lib.webview_navigate(self._handle, _encode_c_string(url))
+
+    def run(self) -> None:
+        _webview_lib.webview_run(self._handle)
+        log.info("Shutting down webview...")
+        self.destroy()
+
+    def bind_jsonschema_api(self, api: MethodRegistry) -> None:
+        for name, method in api.functions.items():
+            wrapper = functools.partial(
+                self.api_wrapper,
+                api,
+                name,
+                method,
+            )
+            c_callback = _webview_lib.CFUNCTYPE(
+                None, ctypes.c_char_p, ctypes.c_char_p, ctypes.c_void_p
+            )(wrapper)
+
+            if name in self._callbacks:
+                msg = f"Callback {name} already exists. Skipping binding."
+                raise RuntimeError(msg)
+
+            self._callbacks[name] = c_callback
+            _webview_lib.webview_bind(
+                self._handle, _encode_c_string(name), c_callback, None
+            )
+
+    def bind(self, name: str, callback: Callable[..., Any]) -> None:
+        def wrapper(seq: bytes, req: bytes, arg: int) -> None:
+            args = json.loads(req.decode())
+            try:
+                result = callback(*args)
+                success = True
+            except Exception as e:
+                result = str(e)
+                success = False
+            self.return_(seq.decode(), 0 if success else 1, json.dumps(result))
+
+        c_callback = _webview_lib.CFUNCTYPE(
+            None, ctypes.c_char_p, ctypes.c_char_p, ctypes.c_void_p
+        )(wrapper)
+        self._callbacks[name] = c_callback
+        _webview_lib.webview_bind(
+            self._handle, _encode_c_string(name), c_callback, None
+        )
+
+    def unbind(self, name: str) -> None:
+        if name in self._callbacks:
+            _webview_lib.webview_unbind(self._handle, _encode_c_string(name))
+            del self._callbacks[name]
+
+    def return_(self, seq: str, status: int, result: str) -> None:
+        _webview_lib.webview_return(
+            self._handle, _encode_c_string(seq), status, _encode_c_string(result)
+        )
+
+    def eval(self, source: str) -> None:
+        _webview_lib.webview_eval(self._handle, _encode_c_string(source))
+
+    def init(self, source: str) -> None:
+        _webview_lib.webview_init(self._handle, _encode_c_string(source))
+
+
+if __name__ == "__main__":
+    wv = Webview()
+    wv.title = "Hello, World!"
+    wv.navigate("https://www.google.com")
+    wv.run()
--- a/pkgs/clan-app/default.nix
+++ b/pkgs/clan-app/default.nix
@@ -0,0 +1,161 @@
+{
+  runCommand,
+  copyDesktopItems,
+  clan-cli,
+  makeDesktopItem,
+  webview-ui,
+  webview-lib,
+  fontconfig,
+  pythonRuntime,
+  wrapGAppsHook4,
+  gobject-introspection,
+  gtk4,
+}:
+let
+  source = ./.;
+
+  desktop-file = makeDesktopItem {
+    name = "org.clan.app";
+    exec = "clan-app %u";
+    icon = "clan-white";
+    desktopName = "Clan App";
+    startupWMClass = "clan";
+    mimeTypes = [ "x-scheme-handler/clan" ];
+  };
+
+  runtimeDependencies = [
+    gobject-introspection
+    gtk4
+  ];
+
+  pyDeps = ps: [
+    ps.pygobject3
+    ps.pygobject-stubs
+  ];
+
+  # Dependencies required for running tests
+  pyTestDeps =
+    ps:
+    [
+      # Testing framework
+      ps.pytest
+      ps.pytest-cov # Generate coverage reports
+      ps.pytest-subprocess # fake the real subprocess behavior to make your tests more independent.
+      ps.pytest-xdist # Run tests in parallel on multiple cores
+      ps.pytest-timeout # Add timeouts to your tests
+    ]
+    ++ ps.pytest.propagatedBuildInputs;
+
+  clan-cli-module = [
+    (pythonRuntime.pkgs.toPythonModule (clan-cli.override { inherit pythonRuntime; }))
+  ];
+
+in
+pythonRuntime.pkgs.buildPythonApplication {
+  name = "clan-app";
+  src = source;
+  format = "pyproject";
+
+  dontWrapGApps = true;
+  preFixup = ''
+    makeWrapperArgs+=(
+      --set FONTCONFIG_FILE ${fontconfig.out}/etc/fonts/fonts.conf
+      --set WEBUI_PATH "$out/${pythonRuntime.sitePackages}/clan_app/.webui"
+      --set WEBVIEW_LIB_DIR "${webview-lib}/lib"
+      # This prevents problems with mixed glibc versions that might occur when the
+      # cli is called through a browser built against another glibc
+      --unset LD_LIBRARY_PATH
+      "''${gappsWrapperArgs[@]}"
+    )
+  '';
+
+  # Deps needed only at build time
+  nativeBuildInputs = [
+    (pythonRuntime.withPackages (ps: [ ps.setuptools ]))
+    copyDesktopItems
+    fontconfig
+
+    # gtk4 deps
+    wrapGAppsHook4
+  ] ++ runtimeDependencies;
+
+  # The necessity of setting buildInputs and propagatedBuildInputs to the
+  # same values for your Python package within Nix largely stems from ensuring
+  # that all necessary dependencies are consistently available both
+  # at build time and runtime,
+  propagatedBuildInputs = [
+    (pythonRuntime.withPackages (ps: clan-cli-module ++ (pyDeps ps)))
+  ] ++ runtimeDependencies;
+
+  # also re-expose dependencies so we test them in CI
+  passthru = {
+    tests = {
+      clan-app-pytest =
+        runCommand "clan-app-pytest"
+          {
+            buildInputs = runtimeDependencies ++ [
+              (pythonRuntime.withPackages (ps: clan-cli-module ++ (pyTestDeps ps) ++ (pyDeps ps)))
+              fontconfig
+            ];
+          }
+          ''
+            cp -r ${source} ./src
+            chmod +w -R ./src
+            cd ./src
+
+            export FONTCONFIG_FILE=${fontconfig.out}/etc/fonts/fonts.conf
+            export FONTCONFIG_PATH=${fontconfig.out}/etc/fonts
+
+            mkdir -p .home/.local/share/fonts
+            export HOME=.home
+
+            fc-cache --verbose
+            # > fc-cache succeeded
+
+            echo "Loaded the following fonts ..."
+            fc-list
+
+            echo "STARTING ..."
+            export WEBVIEW_LIB_DIR="${webview-lib}/lib"
+            export NIX_STATE_DIR=$TMPDIR/nix IN_NIX_SANDBOX=1
+            python -m pytest -s -m "not impure" ./tests
+            touch $out
+          '';
+    };
+  };
+
+  # Additional pass-through attributes
+  passthru.desktop-file = desktop-file;
+  passthru.devshellPyDeps = ps: (pyTestDeps ps) ++ (pyDeps ps);
+  passthru.runtimeDeps = runtimeDependencies;
+  passthru.pythonRuntime = pythonRuntime;
+
+  postInstall = ''
+    mkdir -p $out/${pythonRuntime.sitePackages}/clan_app/.webui
+    cp -r ${webview-ui}/lib/node_modules/@clan/webview-ui/dist/* $out/${pythonRuntime.sitePackages}/clan_app/.webui
+    mkdir -p $out/share/icons/hicolor
+    cp -r ./clan_app/assets/white-favicons/* $out/share/icons/hicolor
+  '';
+
+  # Don't leak python packages into a devshell.
+  # It can be very confusing if you `nix run` than load the cli from the devshell instead.
+  postFixup = ''
+    rm $out/nix-support/propagated-build-inputs
+  '';
+  checkPhase = ''
+    export FONTCONFIG_FILE=${fontconfig.out}/etc/fonts/fonts.conf
+    export FONTCONFIG_PATH=${fontconfig.out}/etc/fonts
+
+    mkdir -p .home/.local/share/fonts
+    export HOME=.home
+
+    fc-cache --verbose
+    # > fc-cache succeeded
+
+    echo "Loaded the following fonts ..."
+    fc-list
+
+    PYTHONPATH= $out/bin/clan-app --help
+  '';
+  desktopItems = [ desktop-file ];
+}
--- a/pkgs/clan-app/flake-module.nix
+++ b/pkgs/clan-app/flake-module.nix
@@ -0,0 +1,35 @@
+{
+  imports = [
+    ./webview-ui/flake-module.nix
+  ];
+
+  perSystem =
+    {
+      self',
+      pkgs,
+      config,
+      ...
+    }:
+    {
+      packages = {
+        webview-lib = pkgs.callPackage ./webview-lib { };
+      };
+
+      devShells.ui = pkgs.callPackage ./shell.nix {
+        inherit self';
+        inherit (self'.packages) clan-app webview-lib webview-ui;
+        inherit (config.packages) clan-ts-api;
+      };
+
+      devShells.clan-app = pkgs.callPackage ./shell.nix {
+        inherit (config.packages) clan-app webview-lib;
+        inherit self';
+      };
+      packages.clan-app = pkgs.callPackage ./default.nix {
+        inherit (config.packages) clan-cli webview-ui webview-lib;
+        pythonRuntime = pkgs.python3;
+      };
+
+      checks = config.packages.clan-app.tests;
+    };
+}
--- a/pkgs/clan-app/install-desktop.sh
+++ b/pkgs/clan-app/install-desktop.sh
@@ -0,0 +1,22 @@
+#!/usr/bin/env bash
+
+
+if ! command -v xdg-mime &> /dev/null; then
+  echo "Warning: 'xdg-mime' is not available. The desktop file cannot be installed."
+fi
+
+ALREADY_INSTALLED=$(nix profile list --json |  jq 'has("elements") and (.elements | has("clan-app"))')
+
+if [ "$ALREADY_INSTALLED" = "true" ]; then
+  echo "Upgrading installed clan-app"
+  nix profile upgrade clan-app
+else
+  nix profile install .#clan-app
+fi
+
+
+# install desktop file
+set -eou pipefail
+DESKTOP_FILE_NAME=org.clan.app.desktop
+
+xdg-mime default "$DESKTOP_FILE_NAME"  x-scheme-handler/clan
--- a/pkgs/clan-app/process-compose.yaml
+++ b/pkgs/clan-app/process-compose.yaml
@@ -0,0 +1,24 @@
+version: "0.5"
+
+env_cmds:
+  PRJ_ROOT: "git rev-parse --show-toplevel"
+
+processes:
+  webview-ui:
+    command: |
+      direnv allow
+      direnv exec . npm install
+      direnv exec . vite
+    ready_log_line: "VITE"
+    working_dir: "$PKG_ROOT_WEBVIEW_UI/app"
+
+  clan-app:
+    command: |
+      direnv allow
+      direnv exec . clan-app --debug --content-uri http://localhost:3000
+    depends_on:
+      webview-ui:
+        condition: "process_log_ready"
+    is_foreground: true
+    ready_log_line: "Debug mode enabled"
+    working_dir: "$PKG_ROOT_CLAN_APP"
--- a/pkgs/clan-app/pyproject.toml
+++ b/pkgs/clan-app/pyproject.toml
@@ -0,0 +1,38 @@
+[build-system]
+requires = ["setuptools"]
+build-backend = "setuptools.build_meta"
+
+
+[project]
+name = "clan-app"
+description = "clan app"
+dynamic = ["version"]
+scripts = { clan-app = "clan_app:main" }
+
+[project.urls]  
+Homepage = "https://clan.lol/"
+Documentation = "https://docs.clan.lol/"
+Repository = "https://git.clan.lol/clan/clan-core"
+
+[tool.setuptools.packages.find]
+exclude = ["result", "**/__pycache__"]
+
+[tool.setuptools.package-data]
+clan_app = ["**/assets/*"]
+
+[tool.pytest.ini_options]
+testpaths = "tests"
+faulthandler_timeout = 60
+log_level = "DEBUG"
+log_format = "%(levelname)s: %(message)s\n       %(pathname)s:%(lineno)d::%(funcName)s"
+addopts = "--cov . --cov-report term --cov-report html:.reports/html --no-cov-on-fail --durations 5 --color=yes --new-first" # Add --pdb for debugging
+norecursedirs = "tests/helpers"
+markers = ["impure"]
+
+[tool.mypy]
+python_version = "3.12"
+warn_redundant_casts = true
+disallow_untyped_calls = true
+disallow_untyped_defs = true
+no_implicit_optional = true
+
--- a/pkgs/clan-app/shell.nix
+++ b/pkgs/clan-app/shell.nix
@@ -0,0 +1,90 @@
+{
+  clan-app,
+  mkShell,
+  ruff,
+  webview-lib,
+  webview-ui,
+  clan-ts-api,
+  process-compose,
+  python3,
+  json2ts,
+  self',
+}:
+
+mkShell {
+  name = "ui";
+
+  inputsFrom = [
+    self'.devShells.default
+    webview-ui
+  ];
+
+  packages = [
+    # required for reload-python-api.sh script
+    python3
+    json2ts
+  ];
+
+  inherit (clan-app) propagatedBuildInputs;
+
+  nativeBuildInputs = clan-app.nativeBuildInputs ++ [
+    process-compose
+  ];
+
+  buildInputs = [
+    (clan-app.pythonRuntime.withPackages (
+      ps:
+      with ps;
+      [
+        mypy
+      ]
+      ++ (clan-app.devshellPyDeps ps)
+    ))
+    ruff
+  ] ++ clan-app.runtimeDeps;
+
+  shellHook = ''
+    export GIT_ROOT=$(git rev-parse --show-toplevel)
+
+    export CLAN_CORE_PATH="$GIT_ROOT"
+
+    export PKG_ROOT_UI="$GIT_ROOT/pkgs/ui"
+    export PKG_ROOT_CLAN_APP="$PKG_ROOT_UI"/clan-app
+    export PKG_ROOT_WEBVIEW_UI="$PKG_ROOT_UI"/webview-ui
+
+    export NODE_PATH="$PKG_ROOT_WEBVIEW_UI/app/node_modules"
+
+    # Add current package to PYTHONPATH
+    export PYTHONPATH="$PKG_ROOT_CLAN_APP''${PYTHONPATH:+:$PYTHONPATH:}"
+
+    # Add clan-app command to PATH
+    export PATH="$PKG_ROOT_CLAN_APP/bin":"$PATH"
+
+    # Add webview-ui scripts to PATH
+    scriptsPath="$PKG_ROOT/bin"
+    export PATH="$NODE_PATH/.bin:$scriptsPath:$PATH"
+
+    # Add clan-cli to the python path so that we can import it without building it in nix first
+    export PYTHONPATH="$GIT_ROOT/pkgs/clan-cli":"$PYTHONPATH"
+
+    export XDG_DATA_DIRS=$GSETTINGS_SCHEMAS_PATH:$XDG_DATA_DIRS
+
+    export WEBVIEW_LIB_DIR=${webview-lib}/lib
+    source $PKG_ROOT_CLAN_APP/.local.env
+
+    cp -r ${self'.packages.fonts} "$PKG_ROOT_WEBVIEW_UI/app/.fonts"
+    chmod -R +w "$PKG_ROOT_WEBVIEW_UI/app/.fonts"
+
+    # Define the yellow color code
+    YELLOW='\033[1;33m'
+    # Define the reset color code
+    NC='\033[0m'
+
+    mkdir -p "$PKG_ROOT_WEBVIEW_UI/app/api"
+    cp -r ${clan-ts-api}/* "$PKG_ROOT_WEBVIEW_UI/app/api"
+    chmod -R +w "$PKG_ROOT_WEBVIEW_UI/app/api"
+
+    # configure process-compose
+    export PC_CONFIG_FILES="$PKG_ROOT_UI/process-compose.yaml"
+  '';
+}
--- a/pkgs/clan-app/tests/command.py
+++ b/pkgs/clan-app/tests/command.py
@@ -0,0 +1,66 @@
+import contextlib
+import os
+import signal
+import subprocess
+from collections.abc import Iterator
+from pathlib import Path
+from typing import IO, Any
+
+import pytest
+
+_FILE = None | int | IO[Any]
+
+
+class Command:
+    def __init__(self) -> None:
+        self.processes: list[subprocess.Popen[str]] = []
+
+    def run(
+        self,
+        command: list[str],
+        extra_env: dict[str, str] | None = None,
+        stdin: _FILE = None,
+        stdout: _FILE = None,
+        stderr: _FILE = None,
+        workdir: Path | None = None,
+    ) -> subprocess.Popen[str]:
+        if extra_env is None:
+            extra_env = {}
+        env = os.environ.copy()
+        env.update(extra_env)
+        # We start a new session here so that we can than more reliably kill all children as well
+        p = subprocess.Popen(
+            command,
+            env=env,
+            start_new_session=True,
+            stdout=stdout,
+            stderr=stderr,
+            stdin=stdin,
+            text=True,
+            cwd=workdir,
+        )
+        self.processes.append(p)
+        return p
+
+    def terminate(self) -> None:
+        # Stop in reverse order in case there are dependencies.
+        # We just kill all processes as quickly as possible because we don't
+        # care about corrupted state and want to make tests fasts.
+        for p in reversed(self.processes):
+            with contextlib.suppress(OSError):
+                os.killpg(os.getpgid(p.pid), signal.SIGKILL)
+                p.wait()
+
+
+@pytest.fixture
+def command() -> Iterator[Command]:
+    """
+    Starts a background command. The process is automatically terminated in the end.
+    >>> p = command.run(["some", "daemon"])
+    >>> print(p.pid)
+    """
+    c = Command()
+    try:
+        yield c
+    finally:
+        c.terminate()
--- a/pkgs/clan-app/tests/conftest.py
+++ b/pkgs/clan-app/tests/conftest.py
@@ -0,0 +1,40 @@
+from __future__ import annotations
+
+import subprocess
+from pathlib import Path
+
+import pytest
+from clan_cli.custom_logger import setup_logging
+from clan_cli.nix import nix_shell
+
+pytest_plugins = [
+    "temporary_dir",
+    "root",
+    "command",
+    "wayland",
+]
+
+
+# Executed on pytest session start
+def pytest_sessionstart(session: pytest.Session) -> None:
+    # This function will be called once at the beginning of the test session
+    print("Starting pytest session")
+    # You can access the session config, items, testsfailed, etc.
+    print(f"Session config: {session.config}")
+
+    setup_logging(level="DEBUG")
+
+
+# fixture for git_repo
+@pytest.fixture
+def git_repo(tmp_path: Path) -> Path:
+    # initialize a git repository
+    cmd = nix_shell(["git"], ["git", "init"])
+    subprocess.run(cmd, cwd=tmp_path, check=True)
+    # set user.name and user.email
+    cmd = nix_shell(["git"], ["git", "config", "user.name", "test"])
+    subprocess.run(cmd, cwd=tmp_path, check=True)
+    cmd = nix_shell(["git"], ["git", "config", "user.email", "test@test.test"])
+    subprocess.run(cmd, cwd=tmp_path, check=True)
+    # return the path to the git repository
+    return tmp_path
--- a/pkgs/clan-app/tests/helpers/init.py
+++ b/pkgs/clan-app/tests/helpers/init.py
--- a/pkgs/clan-app/tests/helpers/cli.py
+++ b/pkgs/clan-app/tests/helpers/cli.py
@@ -0,0 +1,24 @@
+import logging
+import os
+import shlex
+
+from clan_app import main
+from clan_cli.custom_logger import get_callers
+
+log = logging.getLogger(__name__)
+
+
+def print_trace(msg: str) -> None:
+    trace_depth = int(os.environ.get("TRACE_DEPTH", "0"))
+    callers = get_callers(2, 2 + trace_depth)
+
+    if "run_no_stdout" in callers[0]:
+        callers = get_callers(3, 3 + trace_depth)
+    callers_str = "\n".join(f"{i + 1}: {caller}" for i, caller in enumerate(callers))
+    log.debug(f"{msg} \nCallers: \n{callers_str}")
+
+
+def run(args: list[str]) -> None:
+    cmd = shlex.join(["clan", *args])
+    print_trace(f"$ {cmd}")
+    main(args)
--- a/pkgs/clan-app/tests/root.py
+++ b/pkgs/clan-app/tests/root.py
@@ -0,0 +1,35 @@
+import os
+from pathlib import Path
+
+import pytest
+
+TEST_ROOT = Path(__file__).parent.resolve()
+PROJECT_ROOT = TEST_ROOT.parent
+if CLAN_CORE_ := os.environ.get("CLAN_CORE_PATH"):
+    CLAN_CORE = Path(CLAN_CORE_)
+else:
+    CLAN_CORE = PROJECT_ROOT.parent.parent
+
+
+@pytest.fixture(scope="session")
+def project_root() -> Path:
+    """
+    Root directory the clan-cli
+    """
+    return PROJECT_ROOT
+
+
+@pytest.fixture(scope="session")
+def test_root() -> Path:
+    """
+    Root directory of the tests
+    """
+    return TEST_ROOT
+
+
+@pytest.fixture(scope="session")
+def clan_core() -> Path:
+    """
+    Directory of the clan-core flake
+    """
+    return CLAN_CORE
--- a/pkgs/clan-app/tests/temporary_dir.py
+++ b/pkgs/clan-app/tests/temporary_dir.py
@@ -0,0 +1,28 @@
+import logging
+import os
+import tempfile
+from collections.abc import Iterator
+from pathlib import Path
+
+import pytest
+
+log = logging.getLogger(__name__)
+
+
+@pytest.fixture
+def temporary_home(monkeypatch: pytest.MonkeyPatch) -> Iterator[Path]:
+    env_dir = os.getenv("TEST_TEMPORARY_DIR")
+    if env_dir is not None:
+        path = Path(env_dir).resolve()
+        log.debug("Temp HOME directory: %s", str(path))
+        monkeypatch.setenv("HOME", str(path))
+        monkeypatch.chdir(str(path))
+        yield path
+    else:
+        with tempfile.TemporaryDirectory(prefix="pytest-") as _dirpath:
+            dirpath = Path(_dirpath)
+            monkeypatch.setenv("HOME", str(dirpath))
+            monkeypatch.setenv("XDG_CONFIG_HOME", str(dirpath / ".config"))
+            monkeypatch.chdir(str(dirpath))
+            log.debug("Temp HOME directory: %s", str(dirpath))
+            yield dirpath
--- a/pkgs/clan-app/tests/test_cli.py
+++ b/pkgs/clan-app/tests/test_cli.py
@@ -0,0 +1,7 @@
+import pytest
+from helpers import cli
+
+
+def test_help() -> None:
+    with pytest.raises(SystemExit):
+        cli.run(["clan-app", "--help"])
--- a/pkgs/clan-app/tests/test_join.py
+++ b/pkgs/clan-app/tests/test_join.py
@@ -0,0 +1,5 @@
+from wayland import GtkProc
+
+
+def test_open(app: GtkProc) -> None:
+    assert app.poll() is None
--- a/pkgs/clan-app/tests/wayland.py
+++ b/pkgs/clan-app/tests/wayland.py
@@ -0,0 +1,31 @@
+import sys
+from collections.abc import Generator
+from subprocess import Popen
+from typing import NewType
+
+import pytest
+
+
+@pytest.fixture(scope="session")
+def wayland_compositor() -> Generator[Popen, None, None]:
+    # Start the Wayland compositor (e.g., Weston)
+    # compositor = Popen(["weston", "--backend=headless-backend.so"])
+    compositor = Popen(["weston"])
+    yield compositor
+    # Cleanup: Terminate the compositor
+    compositor.terminate()
+
+
+GtkProc = NewType("GtkProc", Popen)
+
+
+@pytest.fixture
+def app() -> Generator[GtkProc, None, None]:
+    cmd = [sys.executable, "-m", "clan_app"]
+    print(f"Running: {cmd}")
+    rapp = Popen(
+        cmd, text=True, stdout=sys.stdout, stderr=sys.stderr, start_new_session=True
+    )
+    yield GtkProc(rapp)
+    # Cleanup: Terminate your application
+    rapp.terminate()
--- a/pkgs/clan-app/webview-lib/default.nix
+++ b/pkgs/clan-app/webview-lib/default.nix
@@ -0,0 +1,52 @@
+{ pkgs, ... }:
+
+pkgs.clangStdenv.mkDerivation {
+  pname = "webview";
+  version = "nightly";
+
+  # We add the function id to the promise to be able to cancel it through the UI
+  # We disallow remote connections from the UI on Linux
+  # TODO: Disallow remote connections on MacOS
+
+  src = pkgs.fetchFromGitHub {
+    owner = "clan-lol";
+    repo = "webview";
+    rev = "7d24f0192765b7e08f2d712fae90c046d08f318e";
+    hash = "sha256-yokVI9tFiEEU5M/S2xAeJOghqqiCvTelLo8WLKQZsSY=";
+  };
+
+  outputs = [
+    "out"
+    "dev"
+  ];
+
+  enableParallelBuilding = true;
+
+  cmakeFlags = [
+    "-DWEBVIEW_BUILD_TESTS=OFF"
+  ];
+
+  # Dependencies used during the build process, if any
+  nativeBuildInputs = with pkgs; [
+    gnumake
+    cmake
+    clang-tools
+    pkg-config
+  ];
+
+  buildInputs =
+    with pkgs;
+    [
+    ]
+    ++ pkgs.lib.optionals stdenv.isLinux [
+      webkitgtk_6_0
+      gtk4
+    ];
+
+  meta = with pkgs.lib; {
+    description = "Tiny cross-platform webview library for C/C++. Uses WebKit (GTK/Cocoa) and Edge WebView2 (Windows)";
+    homepage = "https://github.com/webview/webview";
+    license = licenses.mit;
+    platforms = platforms.linux ++ platforms.darwin;
+  };
+}
--- a/pkgs/clan-app/webview-ui/.envrc
+++ b/pkgs/clan-app/webview-ui/.envrc
@@ -0,0 +1,7 @@
+# shellcheck shell=bash
+source_up
+
+watch_file flake-module.nix default.nix
+
+# Because we depend on nixpkgs sources, uploading to builders takes a long time
+use flake .#webview-ui --builders ''
--- a/pkgs/clan-app/webview-ui/.gitignore
+++ b/pkgs/clan-app/webview-ui/.gitignore
@@ -0,0 +1,4 @@
+app/api
+app/.fonts
+
+.vite
--- a/pkgs/clan-app/webview-ui/.vscode/settings.json
+++ b/pkgs/clan-app/webview-ui/.vscode/settings.json
@@ -0,0 +1,7 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "tailwindCSS.experimental.classRegex": [
+    ["cx\\(([^)]*)\\)", "[\"'`]([^\"'`]*)[\"'`]"]
+  ],
+  "editor.wordWrap": "on"
+}
--- a/pkgs/clan-app/webview-ui/app/README.md
+++ b/pkgs/clan-app/webview-ui/app/README.md
@@ -0,0 +1,37 @@
+## Usage
+
+Those templates dependencies are maintained via [pnpm](https://pnpm.io) via
+`pnpm up -Lri`.
+
+This is the reason you see a `pnpm-lock.yaml`. That being said, any package
+manager will work. This file can be safely be removed once you clone a template.
+
+```bash
+$ npm install # or pnpm install or yarn install
+```
+
+### Learn more on the [Solid Website](https://solidjs.com) and come chat with us on our [Discord](https://discord.com/invite/solidjs)
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `npm run dev` or `npm start`
+
+Runs the app in the development mode.<br> Open
+[http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+The page will reload if you make edits.<br>
+
+### `npm run build`
+
+Builds the app for production to the `dist` folder.<br> It correctly bundles
+Solid in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.<br> Your app is
+ready to be deployed!
+
+## Deployment
+
+You can deploy the `dist` folder to any static host provider (netlify, surge,
+now, etc.)
--- a/pkgs/clan-app/webview-ui/app/app/api/API.json
+++ b/pkgs/clan-app/webview-ui/app/app/api/API.json
--- a/pkgs/clan-app/webview-ui/app/app/api/API.ts
+++ b/pkgs/clan-app/webview-ui/app/app/api/API.ts
--- a/pkgs/clan-app/webview-ui/app/app/api/Inventory.ts
+++ b/pkgs/clan-app/webview-ui/app/app/api/Inventory.ts
--- a/pkgs/clan-app/webview-ui/app/app/api/modules_schemas.json
+++ b/pkgs/clan-app/webview-ui/app/app/api/modules_schemas.json
--- a/pkgs/clan-app/webview-ui/app/app/api/schema.json
+++ b/pkgs/clan-app/webview-ui/app/app/api/schema.json
--- a/pkgs/clan-app/webview-ui/app/eslint.config.mjs
+++ b/pkgs/clan-app/webview-ui/app/eslint.config.mjs
@@ -0,0 +1,35 @@
+import eslint from "@eslint/js";
+import tseslint from "typescript-eslint";
+import tailwind from "eslint-plugin-tailwindcss";
+import pluginQuery from "@tanstack/eslint-plugin-query";
+
+const config = tseslint.config(
+  eslint.configs.recommended,
+  ...pluginQuery.configs["flat/recommended"],
+  ...tseslint.configs.strict,
+  ...tseslint.configs.stylistic,
+  ...tailwind.configs["flat/recommended"],
+  {
+    rules: {
+      "tailwindcss/no-contradicting-classname": [
+        "error",
+        {
+          callees: ["cx"],
+        },
+      ],
+      "tailwindcss/no-custom-classname": [
+        "error",
+        {
+          callees: ["cx"],
+          whitelist: ["material-icons"],
+        },
+      ],
+      // TODO: make this more strict by removing later
+      "no-unused-vars": "off",
+      "@typescript-eslint/no-unused-vars": "off",
+      "@typescript-eslint/no-non-null-assertion": "off",
+    },
+  },
+);
+
+export default config;
--- a/pkgs/clan-app/webview-ui/app/gtk.webview.js
+++ b/pkgs/clan-app/webview-ui/app/gtk.webview.js
@@ -0,0 +1,97 @@
+/**
+ * This script generates a custom index.html file for the webview UI.
+ * It reads the manifest.json file generated by Vite and uses it to generate the HTML file.
+ * It also processes the CSS files to rewrite the URLs in the CSS files to match the new location of the assets.
+ * The script is run after the Vite build is complete.
+ *
+ * This is necessary because the webview UI is loaded from the local file system and the URLs in the CSS files need to be rewritten to match the new location of the assets.
+ * The generated index.html file is then used as the entry point for the webview UI.
+ */
+import fs from "node:fs";
+import postcss from "postcss";
+import path from "node:path";
+import css_url from "postcss-url";
+
+const distPath = path.resolve("dist");
+const manifestPath = path.join(distPath, ".vite/manifest.json");
+const outputPath = path.join(distPath, "index.html");
+
+fs.readFile(manifestPath, { encoding: "utf8" }, (err, data) => {
+  if (err) {
+    return console.error("Failed to read manifest:", err);
+  }
+
+  const manifest = JSON.parse(data);
+  /** @type {{    file: string;    name: string;    src: string;    isEntry: bool;    css: string[];  } []} */
+  const assets = Object.values(manifest);
+
+  console.log(`Generate custom index.html from ${manifestPath} ...`);
+  // Start with a basic HTML structure
+  let htmlContent = `<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Webview UI</title>`;
+
+  // Add linked stylesheets
+  assets.forEach((asset) => {
+    // console.log(asset);
+    if (asset.src === "index.html") {
+      asset.css.forEach((cssEntry) => {
+        // css to be processed
+
+        const css = fs.readFileSync(`dist/${cssEntry}`, "utf8");
+
+        // process css
+        postcss()
+          .use(
+            css_url({
+              url: (asset, dir) => {
+                const res = path.basename(asset.url);
+                console.log(`Rewriting CSS url(): ${asset.url} to ${res}`);
+                return res;
+              },
+            }),
+          )
+          .process(css, {
+            from: `dist/${cssEntry}`,
+            to: `dist/${cssEntry}`,
+          })
+          .then((result) => {
+            fs.writeFileSync(`dist/${cssEntry}`, result.css, "utf8");
+          });
+
+        // Extend the HTML content with the linked stylesheet
+        console.log(`Relinking html css stylesheet: ${cssEntry}`);
+        htmlContent += `\n    <link rel="stylesheet" href="${cssEntry}">`;
+      });
+    }
+  });
+
+  htmlContent += `
+  </head>
+  <body>
+  <div id="app"></div>
+  `;
+  // Add scripts
+  assets.forEach((asset) => {
+    if (asset.file.endsWith(".js")) {
+      console.log(`Relinking js script: ${asset.file}`);
+      htmlContent += `\n    <script src="${asset.file}"></script>`;
+    }
+  });
+
+  htmlContent += `
+</body>
+</html>`;
+
+  // Write the HTML file
+  fs.writeFile(outputPath, htmlContent, (err) => {
+    if (err) {
+      console.error("Failed to write custom index.html:", err);
+    } else {
+      console.log("Custom index.html generated successfully!");
+    }
+  });
+});
--- a/pkgs/clan-app/webview-ui/app/icons/arrow-bottom.svg
+++ b/pkgs/clan-app/webview-ui/app/icons/arrow-bottom.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor"><path d="M21 4h5v30.75h5v5.125h-5V45h-5v-5.125h-5V34.75h5zM11 29.625v5.125h5v-5.125zm0 0V24.5H6v5.125zm25 0v5.125h-5v-5.125zm0 0V24.5h5v5.125z"/></svg>
--- a/pkgs/clan-app/webview-ui/app/icons/arrow-left.svg
+++ b/pkgs/clan-app/webview-ui/app/icons/arrow-left.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor"><path d="M43.9 21.338v4.987H13.975v4.988H8.988v-4.988H4v-4.988h4.988V16.35h4.987v4.987zm-24.937-9.975h-4.988v4.987h4.987zm0 0h4.987V6.375h-4.988zm0 24.937h-4.988v-4.987h4.987zm0 0h4.987v4.988h-4.988z"/></svg>
--- a/pkgs/clan-app/webview-ui/app/icons/arrow-right.svg
+++ b/pkgs/clan-app/webview-ui/app/icons/arrow-right.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor"><path d="M4 21.571v4.858h29.25v4.857h4.875v-4.857H43V21.57h-4.875v-4.857H33.25v4.857zm24.375-9.714h4.875v4.857h-4.875zm0 0H23.5V7h4.875zm0 24.286h4.875v-4.857h-4.875zm0 0H23.5V41h4.875z"/></svg>
--- a/pkgs/clan-app/webview-ui/app/icons/arrow-top.svg
+++ b/pkgs/clan-app/webview-ui/app/icons/arrow-top.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor"><path d="M20.857 45h5.286V14.25h5.286V9.125h-5.286V4h-5.286v5.125h-5.286v5.125h5.286zM10.286 19.375V14.25h5.285v5.125zm0 0V24.5H5v-5.125zm26.428 0V14.25H31.43v5.125zm0 0V24.5H42v-5.125z"/></svg>
--- a/pkgs/clan-app/webview-ui/app/icons/attention.svg
+++ b/pkgs/clan-app/webview-ui/app/icons/attention.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor"><path fill-rule="evenodd" d="M25.6 4h-4.1v8.2h4.1zm-8.2 12.3h12.3v4.1h4.1v8.2h-4.1v8.2H17.4v-8.2h-4.1v-8.2h4.1zm0 24.6h12.3V45H17.4zm28.7-18.45v4.1h-8.2v-4.1zm-36.9 4.1v-4.1H1v4.1zM33.8 12.2h4.1v4.1h-4.1zm4.1 0H42V8.1h-4.1zm-28.7 0h4.1v4.1H9.2zm0 0V8.1H5.1v4.1z" clip-rule="evenodd"/></svg>
--- a/pkgs/clan-app/webview-ui/app/icons/caret-down.svg
+++ b/pkgs/clan-app/webview-ui/app/icons/caret-down.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor"><path fill-rule="evenodd" d="M40.25 15H7v4.75h4.75v4.75h4.75v4.75h4.75V34H26v-4.75h4.75V24.5h4.75v-4.75h4.75z" clip-rule="evenodd"/></svg>
--- a/pkgs/clan-app/webview-ui/app/icons/caret-left.svg
+++ b/pkgs/clan-app/webview-ui/app/icons/caret-left.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor"><path fill-rule="evenodd" d="M32 40.25V7h-4.75v4.75H22.5v4.75h-4.75v4.75H13V26h4.75v4.75h4.75v4.75h4.75v4.75z" clip-rule="evenodd"/></svg>
--- a/pkgs/clan-app/webview-ui/app/icons/caret-right.svg
+++ b/pkgs/clan-app/webview-ui/app/icons/caret-right.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor"><path fill-rule="evenodd" d="M15 40.25V7h4.75v4.75h4.75v4.75h4.75v4.75H34V26h-4.75v4.75H24.5v4.75h-4.75v4.75z" clip-rule="evenodd"/></svg>
--- a/pkgs/clan-app/webview-ui/app/icons/caret-up.svg
+++ b/pkgs/clan-app/webview-ui/app/icons/caret-up.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor"><path fill-rule="evenodd" d="M40.25 34H7v-4.75h4.75V24.5h4.75v-4.75h4.75V15H26v4.75h4.75v4.75h4.75v4.75h4.75z" clip-rule="evenodd"/></svg>
--- a/pkgs/clan-app/webview-ui/app/icons/checkmark.svg
+++ b/pkgs/clan-app/webview-ui/app/icons/checkmark.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor"><path d="M36.888 11H41.3v4.413h-4.412zm-4.413 8.825v-4.412h4.413v4.412zm-4.413 4.413v-4.413h4.413v4.413zM23.65 28.65h4.413v-4.412H23.65zm-4.412 4.413h4.412V28.65h-4.412zm-4.413 0v4.412h4.413v-4.413zm-4.412-4.413h4.412v4.413h-4.412zm0 0H6v-4.412h4.413z"/></svg>
--- a/pkgs/clan-app/webview-ui/app/icons/clan-icon.svg
+++ b/pkgs/clan-app/webview-ui/app/icons/clan-icon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="72" height="89" fill="currentColor"><g clip-path="url(#a)"><path d="M57.709 20.105H68.62c1.157 0 2.099-.94 2.099-2.095V9.632a2.1 2.1 0 0 0-2.099-2.095h-3.439c-1.111 0-2.014-.9-2.014-2.01V2.095A2.1 2.1 0 0 0 61.07 0H30.02a2.1 2.1 0 0 0-2.098 2.095v3.432c0 1.11-.903 2.01-2.014 2.01H22.47c-1.157 0-2.098.94-2.098 2.095v3.432c0 1.11-.903 2.01-2.014 2.01h-3.439c-1.157 0-2.099.94-2.099 2.094 0 0-.503-1.272-.503 22.493 0 21.247.503 19.38.503 19.38 0 1.156.942 2.096 2.1 2.096h3.438c1.111 0 2.014.9 2.014 2.01v3.517c0 1.109.902 2.01 2.013 2.01h3.524c1.111 0 2.014.9 2.014 2.01v3.432a2.1 2.1 0 0 0 2.098 2.094h30.211c1.157 0 2.099-.94 2.099-2.094v-3.433c0-1.11.902-2.01 2.013-2.01h5.557c1.158 0 2.099-.94 2.099-2.094v-9.984a2.1 2.1 0 0 0-2.099-2.095h-13.03c-1.157 0-2.098.94-2.098 2.095v5.044c0 1.11-.902 2.01-2.014 2.01H37.488c-1.111 0-2.013-.9-2.013-2.01v-5.11a2.1 2.1 0 0 0-2.099-2.094h-5.119c-1.111 0-1.739.163-2.014-2.01-.085-.698-.13-1.553-.196-2.695-.163-2.878-.307-1.723-.307-10.369 0-12.085.314-15.563.503-17.24.19-1.677.903-2.01 2.014-2.01h5.12c1.156 0 2.098-.94 2.098-2.094v-3.433c0-1.109.902-2.01 2.013-2.01h16.116c1.111 0 2.014.901 2.014 2.01v3.433c0 1.155.94 2.094 2.098 2.094zM18.626 73.757h-2.478a.87.87 0 0 1-.87-.868v-2.473c0-.96-.777-1.743-1.745-1.743H6.838c-.96 0-1.745.777-1.745 1.743v2.473a.87.87 0 0 1-.87.868H1.746c-.961 0-1.746.776-1.746 1.742v6.682c0 .96.778 1.742 1.746 1.742h2.477c.484 0 .87.392.87.868v2.473c0 .96.778 1.743 1.745 1.743h6.695c.961 0 1.746-.777 1.746-1.743v-2.473c0-.483.392-.868.87-.868h2.477c.961 0 1.746-.776 1.746-1.742v-6.682c0-.96-.778-1.742-1.746-1.742"/></g><defs><clipPath id="a"><path d="M0 0h72v89H0z"/></clipPath></defs></svg>
--- a/pkgs/clan-app/webview-ui/app/icons/clan-logo.svg
+++ b/pkgs/clan-app/webview-ui/app/icons/clan-logo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="223" height="89" fill="currentColor"><g clip-path="url(#a)"><path d="M55.503 18.696h10.104a1.946 1.946 0 0 0 1.943-1.948v-7.79c0-1.075-.87-1.947-1.943-1.947h-3.186a1.863 1.863 0 0 1-1.866-1.87V1.947C60.555.872 59.685 0 58.612 0h-27.98a1.946 1.946 0 0 0-1.944 1.947v3.194c0 1.036-.832 1.87-1.865 1.87h-3.187a1.946 1.946 0 0 0-1.943 1.947v3.194c0 1.036-.832 1.87-1.866 1.87h-3.186a1.946 1.946 0 0 0-1.943 1.947s-.467 1.153-.467 23.253c0 19.763.467 21.913.467 21.913 0 1.075.87 1.948 1.943 1.948h3.186c1.034 0 1.866.833 1.866 1.87v3.271c0 1.036.831 1.87 1.865 1.87h3.265c1.033 0 1.865.833 1.865 1.87v3.193c0 1.075.87 1.948 1.943 1.948h27.981a1.946 1.946 0 0 0 1.943-1.948v-3.194c0-1.036.832-1.87 1.866-1.87h5.145a1.946 1.946 0 0 0 1.943-1.947v-9.285c0-1.075-.87-1.948-1.943-1.948H55.503a1.946 1.946 0 0 0-1.943 1.948v4.69c0 1.035-.832 1.869-1.866 1.869H37.55a1.863 1.863 0 0 1-1.866-1.87v-4.752c0-1.075-.87-1.947-1.943-1.947H29c-1.034 0-1.609.148-1.865-1.87-.078-.646-.125-1.44-.18-2.508-.147-2.68-.287-5.5-.287-13.539 0-11.24.288-16.81.466-18.369.18-1.558.832-1.87 1.866-1.87h4.741a1.946 1.946 0 0 0 1.943-1.947v-3.193c0-1.037.832-1.87 1.866-1.87h14.145c1.034 0 1.866.833 1.866 1.87v3.193c0 1.075.87 1.948 1.943 1.948M20.247 74.822h-2.293a.814.814 0 0 1-.808-.81v-2.298c0-.896-.723-1.62-1.617-1.62H9.327c-.894 0-1.617.724-1.617 1.62v2.298c0 .444-.365.81-.808.81H4.609c-.894 0-1.617.725-1.617 1.62v6.217c0 .896.723 1.62 1.617 1.62h2.293c.443 0 .808.366.808.81v2.299c0 .895.723 1.62 1.617 1.62h6.202c.894 0 1.617-.725 1.617-1.62v-2.299c0-.444.365-.81.808-.81h2.293c.894 0 1.617-.724 1.617-1.62v-6.216c0-.896-.723-1.62-1.617-1.62M221.135 35.04h-1.71a1.863 1.863 0 0 1-1.866-1.87v-3.272c0-1.036-.831-1.87-1.865-1.87h-3.265a1.863 1.863 0 0 1-1.865-1.87v-3.271c0-1.036-.832-1.87-1.865-1.87h-20.971a1.863 1.863 0 0 0-1.865 1.87v3.965c0 .514-.42.935-.933.935h-3.559c-.513 0-.84-.32-.933-.935l-.622-3.918c-.148-1.099-.676-1.777-1.788-1.777l-3.653-.14h-2.052a3.736 3.736 0 0 0-3.73 3.74V61.68a3.736 3.736 0 0 1-3.731 3.739h-8.394a1.863 1.863 0 0 1-1.866-1.87V36.714c0-11.825-7.461-18.813-22.556-18.813-13.718 0-20.325 5.04-21.203 14.443-.109 1.153.552 1.815 1.702 1.815l7.757.569c1.143.1 1.594-.554 1.811-1.652.77-3.74 4.174-5.827 9.933-5.827 7.081 0 10.042 3.358 10.042 9.076v3.014c0 1.036-.831 1.87-1.865 1.87l-.342-.024h-9.715c-15.421 0-22.984 5.983-22.984 17.956 0 3.802.778 7.058 2.254 9.738h-.59c-1.765-1.27-2.457-2.236-3.055-2.93-.256-.295-.653-.537-1.345-.537h-1.717l-5.993.008h-3.264a3.736 3.736 0 0 1-3.731-3.74V1.769C89.74.654 89.072 0 87.969 0H79.55c-1.034 0-1.865.732-1.865 1.768l-.024 54.304v13.554c0 4.13 3.343 7.479 7.462 7.479h50.84c8.448-.429 8.604-3.42 9.436-4.542.645 3.56 1.865 4.347 4.71 4.518 8.137.117 18.343.032 18.49.024h4.975c4.119 0 6.684-3.35 6.684-7.479l.777-27.264c0-1.036.832-1.87 1.866-1.87h2.021a1.56 1.56 0 0 0 1.554-1.558v-3.583c0-1.036.832-1.87 1.866-1.87h11.868a3.37 3.37 0 0 1 3.366 3.373v3.249c0 1.075.87 1.947 1.943 1.947h4.119c.513 0 .933.42.933.935v32.25c0 1.036.831 1.87 1.865 1.87h6.84a3.736 3.736 0 0 0 3.731-3.74V36.91c0-1.036-.832-1.87-1.866-1.87zM142.64 54.225c0 8.927-6.132 14.715-15.335 14.715-6.606 0-9.793-2.953-9.793-8.748 0-6.442 3.832-9.636 11.62-9.636h13.508v3.669"/></g><defs><clipPath id="a"><path d="M0 0h223v89H0z"/></clipPath></defs></svg>
--- a/pkgs/clan-app/webview-ui/app/icons/close.svg
+++ b/pkgs/clan-app/webview-ui/app/icons/close.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor"><path d="M5 6h5.286v5.286H5zm10.571 10.571h-5.285v-5.285h5.285zm5.286 5.286h-5.286v-5.286h5.286zm5.286 0h-5.286v5.286h-5.286v5.286h-5.285v5.285H5V43h5.286v-5.286h5.285V32.43h5.286v-5.286h5.286v5.286h5.286v5.285h5.285V43H42v-5.286h-5.286V32.43H31.43v-5.286h-5.286zm5.286-5.286v5.286h-5.286v-5.286zm5.285-5.285v5.285H31.43v-5.285zm0 0V6H42v5.286z"/></svg>
--- a/pkgs/clan-app/webview-ui/app/icons/download.svg
+++ b/pkgs/clan-app/webview-ui/app/icons/download.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor"><path d="M14.069 23.667v4.37h4.034v4.37h2.017v2.186h2.017v2.185h4.034v-2.185h2.017v-2.186h2.017v-4.37h4.034v-4.37h4.035V17.11h-4.035v2.185h-4.034v4.37h-4.034V4h-4.034v19.667h-4.034v-4.37h-4.035V17.11h-4.034v6.556z"/><path d="M38.274 34.593v4.37h-28.24v-4.37H6v8.74h36.308v-8.74z"/></svg>
--- a/pkgs/clan-app/webview-ui/app/icons/edit.svg
+++ b/pkgs/clan-app/webview-ui/app/icons/edit.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor"><path d="M35.8 4h-4.1v4.1h-4.1v4.1h-4.1v4.1h-4.1v4.1h-4.1v4.1h-4.1v4.1H7.1v4.1H3V45h12.3v-4.1h4.1v-4.1h4.1v-4.1h4.1v-4.1h4.1v-4.1h4.1v-4.1h4.1v-4.1H44v-4.1h-4.1V8.1h-4.1zm0 16.4h-4.1v4.1h-4.1v4.1h-4.1v4.1h-4.1v4.1h-4.1v-4.1h-4.1v-4.1h4.1v-4.1h4.1v-4.1h4.1v-4.1h4.1v-4.1h4.1v4.1h4.1zM11.2 32.7H7.1v8.2h8.2v-4.1h-4.1z"/></svg>
--- a/pkgs/clan-app/webview-ui/app/icons/expand.svg
+++ b/pkgs/clan-app/webview-ui/app/icons/expand.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor"><path d="M21.8 8.444h4.4v4.445h4.4v4.444H35V12.89h-4.4V8.444h-4.4V4h-4.4zm-4.4 4.445V8.444h4.4v4.445zm0 0v4.444H13V12.89zm8.8 26.667h-4.4V35.11h-4.4v-4.444H13v4.444h4.4v4.445h4.4V44h4.4zm4.4-4.445h-4.4v4.445h4.4zm0 0H35v-4.444h-4.4z"/></svg>
--- a/pkgs/clan-app/webview-ui/app/icons/eye-close.svg
+++ b/pkgs/clan-app/webview-ui/app/icons/eye-close.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor"><path d="M2 15h3.583v3.6H2zm7.167 7.2H5.583v-3.6h3.584zm7.166 3.6v-3.6H9.167v3.6H5.583v3.6h3.584v-3.6zm14.334 0H16.333v3.6H12.75V33h3.583v-3.6h14.334V33h3.583v-3.6h-3.583zm7.166-3.6h-7.166v3.6h7.166v3.6h3.584v-3.6h-3.584zm3.584-3.6v3.6h-3.584v-3.6zm0 0V15H45v3.6z"/></svg>
--- a/pkgs/clan-app/webview-ui/app/icons/eye-open.svg
+++ b/pkgs/clan-app/webview-ui/app/icons/eye-open.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor"><path fill-rule="evenodd" d="M16.667 11h14.666v22h-22V14.667h7.334zm14.666 3.667h7.334v3.666h3.666v7.334h-3.666 3.666v3.666h-3.666V33h-7.334V14.667m-14.666 22h14.666V33H16.667zm-11-18.334h3.666v7.334H2V22h3.667zM42.333 22H46v3.667h-3.667zM5.667 25.667h3.666v3.666H5.667zM28 19.833h-8v8h8z" clip-rule="evenodd"/></svg>
--- a/pkgs/clan-app/webview-ui/app/icons/filter.svg
+++ b/pkgs/clan-app/webview-ui/app/icons/filter.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor"><path fill-rule="evenodd" d="M8.7 9h11.1v5.625H42v3.75H19.8V24H8.7v-5.625H5v-3.75h3.7zm3.7 3.75v7.5h3.7v-7.5zM27.2 24h11.1v5.625H42v3.75h-3.7V39H27.2v-5.625H5v-3.75h22.2zm3.7 3.75v7.5h3.7v-7.5z" clip-rule="evenodd"/></svg>
--- a/pkgs/clan-app/webview-ui/app/icons/flash.svg
+++ b/pkgs/clan-app/webview-ui/app/icons/flash.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor"><path fill-rule="evenodd" d="M24 6.4h3.2v12.8H40v6.4h-3.2v3.2h-3.2V32h-3.2v3.2h-3.2v3.2H24v3.2h-3.2V28.8H8v-6.4h3.2v-3.2h3.2V16h3.2v-3.2h3.2V9.6H24z" clip-rule="evenodd"/></svg>
--- a/pkgs/clan-app/webview-ui/app/icons/folder.svg
+++ b/pkgs/clan-app/webview-ui/app/icons/folder.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor"><path d="M41 12.667v-1.89H20.222V7H5.112v32.111H7V41h34v-1.889h1.889V12.667z"/></svg>
--- a/pkgs/clan-app/webview-ui/app/icons/grid.svg
+++ b/pkgs/clan-app/webview-ui/app/icons/grid.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor"><path d="M4 4h39v39H4zm3.9 3.9v7.8h7.8V7.9zm11.7 0v7.8h7.8V7.9zm11.7 0v7.8h7.8V7.9zm7.8 11.7h-7.8v7.8h7.8zm0 11.7h-7.8v7.8h7.8zm-11.7 7.8v-7.8h-7.8v7.8zm-11.7 0v-7.8H7.9v7.8zM7.9 27.4h7.8v-7.8H7.9zm11.7-7.8v7.8h7.8v-7.8z"/></svg>
--- a/pkgs/clan-app/webview-ui/app/icons/info.svg
+++ b/pkgs/clan-app/webview-ui/app/icons/info.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor"><path fill-rule="evenodd" d="M8.35 4h.094L8.36 39.652h31.312V8.442H8.444V4h31.228v4.348H44v31.304h-4.328v4.328L8.35 44v-4.348H4V8.348h4.35zm13.428 13.326h4.444v-4.442h-4.444zm4.444 17.768h-4.444V21.768h4.444z" clip-rule="evenodd"/></svg>
--- a/pkgs/clan-app/webview-ui/app/icons/list.svg
+++ b/pkgs/clan-app/webview-ui/app/icons/list.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor"><path d="M4 5h39v38H4zm3.9 4.571v6.572h31.2V9.57zm31.2 11.143H7.9v6.572h31.2zm0 11.143H7.9v6.572h31.2z"/></svg>
--- a/pkgs/clan-app/webview-ui/app/icons/load.svg
+++ b/pkgs/clan-app/webview-ui/app/icons/load.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor"><path d="M26.165 2h-4.393v13.181h4.393zm0 30.756h-4.393v13.181h4.393zm19.772-10.984v4.393H32.756v-4.393zm-30.756 4.393v-4.393H2v4.393zm15.378-13.18h4.394v4.393h-4.394zm8.787-4.394h-4.393v4.393h4.393zm-21.968 4.393h-4.394v4.394h4.394zM8.591 8.591h4.393v4.393H8.591zm21.968 26.362h4.394v4.393h4.393v-4.393h-4.393v-4.394h-4.394zm-17.575 0v-4.394h4.394v4.394zv4.393H8.591v-4.393z"/></svg>
--- a/pkgs/clan-app/webview-ui/app/icons/more.svg
+++ b/pkgs/clan-app/webview-ui/app/icons/more.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor"><path d="M19 6h9v9h-9zM19 20h9v9h-9zM19 34h9v9h-9z"/></svg>
--- a/pkgs/clan-app/webview-ui/app/icons/paperclip.svg
+++ b/pkgs/clan-app/webview-ui/app/icons/paperclip.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor"><path d="M12.573 7.573v32.01H8V3h32.01v41.155H17.146v-32.01h13.718V35.01h-4.573V16.718h-4.573v22.864h13.719V7.572z"/></svg>
--- a/pkgs/clan-app/webview-ui/app/icons/plus.svg
+++ b/pkgs/clan-app/webview-ui/app/icons/plus.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor"><path d="M22.004 8h4.001v14.004H40.01v4.001H26.005V40.01h-4V26.005H8v-4h14.004z"/></svg>
--- a/pkgs/clan-app/webview-ui/app/icons/reload.svg
+++ b/pkgs/clan-app/webview-ui/app/icons/reload.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor"><path d="M33.106 6h-4.518v4.518h4.518v4.517H10.518v4.518H6v18.07h4.518v4.519H24.07v-4.518H10.518v-18.07h22.588v4.517h-4.518v4.517h4.518v-4.517h4.518v-4.518h4.517v-4.518h-4.517v-4.517h-4.518z"/></svg>
--- a/pkgs/clan-app/webview-ui/app/icons/report.svg
+++ b/pkgs/clan-app/webview-ui/app/icons/report.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor"><path fill-rule="evenodd" d="M10.8 5H7v38h34.2V5h-3.8v3.8h-3.8V5h-3.8v3.8H26V5h-3.8v3.8h-3.8V5h-3.8v3.8h-3.8zm3.8 3.8h3.8v3.8h-3.8zm7.6 0H26v3.8h-3.8zm7.6 0h3.8v3.8h-3.8zm3.8 7.6h-19v3.8h19zm0 7.6h-19v3.8h19zM26 35.4v-3.8h7.6v3.8z" clip-rule="evenodd"/></svg>
--- a/pkgs/clan-app/webview-ui/app/icons/search.svg
+++ b/pkgs/clan-app/webview-ui/app/icons/search.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor"><path fill-rule="evenodd" d="M14.2 4h16.4v4.1H14.2zm-4.1 8.2V8.1h4.1v4.1zm0 16.4H6V12.2h4.1zm4.1 4.1h-4.1v-4.1h4.1zm16.4 0v4.1H14.2v-4.1zm4.1-4.1h-4.1v4.1h4.1v4.1h4.1v4.1h4.1V45H47v-4.1h-4.1v-4.1h-4.1v-4.1h-4.1zm0-16.4h4.1v16.4h-4.1zm0 0V8.1h-4.1v4.1z" clip-rule="evenodd"/></svg>
--- a/pkgs/clan-app/webview-ui/app/icons/settings.svg
+++ b/pkgs/clan-app/webview-ui/app/icons/settings.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor"><path fill-rule="evenodd" d="M9.714 9.714h8.572V6.857h2.857V4h5.714v2.857h2.857v2.857h8.572v8.572h2.857v2.857H44v5.714h-2.857v2.857h-2.857v8.572h-8.572v2.857h-2.857V44h-5.714v-2.857h-2.857v-2.857H9.714v-8.572H6.857v-2.857H4v-5.714h2.857v-2.857h2.857zm8.572 5.715v2.857h-2.857v11.428h2.857v2.857h11.428v-2.857h2.857V18.286h-2.857v-2.857z" clip-rule="evenodd"/></svg>
--- a/pkgs/clan-app/webview-ui/app/icons/trash.svg
+++ b/pkgs/clan-app/webview-ui/app/icons/trash.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor"><path fill-rule="evenodd" d="M28 4H16v8H4v4h4v28h32V16h4v-4H32V4zm0 4h-8v4h8zM12 40V16h.001v24" clip-rule="evenodd"/></svg>
--- a/pkgs/clan-app/webview-ui/app/icons/update.svg
+++ b/pkgs/clan-app/webview-ui/app/icons/update.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor"><path d="M32.4 3h-4.2v4.2h4.2v4.2H7.2v4.2H3v10.5h4.2V15.6h25.2v4.2h-4.2V24h4.2v-4.2h4.2v-4.2h4.2v-4.2h-4.2V7.2h-4.2zm-21 37.8h4.2V45h4.2v-4.2h-4.2v-4.2h25.2v-4.2H45V21.9h-4.2v10.5H15.6v-4.2h4.2V24h-4.2v4.2h-4.2v4.2H7.2v4.2h4.2z"/></svg>
--- a/pkgs/clan-app/webview-ui/app/icons/warning.svg
+++ b/pkgs/clan-app/webview-ui/app/icons/warning.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor"><path fill-rule="evenodd" d="M42 6H5v37h37zm-20.555 8.222h4.111v12.334h-4.111zm0 16.445h4.111v4.11h-4.111z" clip-rule="evenodd"/></svg>
--- a/pkgs/clan-app/webview-ui/app/index.html
+++ b/pkgs/clan-app/webview-ui/app/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Solid App</title>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+  </head>
+
+  <body>
+    <div id="app"></div>
+
+    <script src="/src/index.tsx" type="module"></script>
+  </body>
+</html>
--- a/pkgs/clan-app/webview-ui/app/package-lock.json
+++ b/pkgs/clan-app/webview-ui/app/package-lock.json
--- a/pkgs/clan-app/webview-ui/app/package.json
+++ b/pkgs/clan-app/webview-ui/app/package.json
@@ -0,0 +1,56 @@
+{
+  "name": "@clan/webview-ui",
+  "version": "0.0.1",
+  "description": "",
+  "type": "module",
+  "scripts": {
+    "start": "vite",
+    "dev": "vite",
+    "build": "npm run check && npm run test && vite build && npm run convert-html",
+    "convert-html": "node gtk.webview.js",
+    "serve": "vite preview",
+    "check": "tsc --noEmit --skipLibCheck && eslint ./src",
+    "test": "vitest run --typecheck"
+  },
+  "license": "MIT",
+  "devDependencies": {
+    "@babel/plugin-syntax-import-attributes": "^7.27.1",
+    "@eslint/js": "^9.3.0",
+    "@tailwindcss/typography": "^0.5.13",
+    "@types/json-schema": "^7.0.15",
+    "@types/node": "^20.12.12",
+    "@types/three": "^0.176.0",
+    "@typescript-eslint/parser": "^7.10.0",
+    "autoprefixer": "^10.4.19",
+    "classnames": "^2.5.1",
+    "eslint": "^8.57.0",
+    "eslint-plugin-tailwindcss": "^3.17.0",
+    "jsdom": "^24.1.0",
+    "postcss": "^8.4.38",
+    "postcss-url": "^10.1.3",
+    "prettier": "^3.2.5",
+    "solid-devtools": "^0.29.2",
+    "tailwindcss": "^3.4.3",
+    "typescript": "^5.4.5",
+    "typescript-eslint": "^7.10.0",
+    "vite": "^5.0.11",
+    "vite-plugin-solid": "^2.8.2",
+    "vite-plugin-solid-svg": "^0.8.1",
+    "vitest": "^1.6.0"
+  },
+  "dependencies": {
+    "@floating-ui/dom": "^1.6.8",
+    "@modular-forms/solid": "^0.21.0",
+    "@solid-primitives/storage": "^3.7.1",
+    "@solidjs/router": "^0.14.2",
+    "@tanstack/eslint-plugin-query": "^5.51.12",
+    "@tanstack/solid-query": "^5.51.2",
+    "corvu": "^0.7.1",
+    "material-icons": "^1.13.12",
+    "nanoid": "^5.0.7",
+    "solid-js": "^1.8.11",
+    "solid-markdown": "^2.0.13",
+    "solid-toast": "^0.5.0",
+    "three": "^0.176.0"
+  }
+}
--- a/pkgs/clan-app/webview-ui/app/postcss.config.js
+++ b/pkgs/clan-app/webview-ui/app/postcss.config.js
@@ -0,0 +1,8 @@
+const config = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
+
+export default config;
--- a/pkgs/clan-app/webview-ui/app/prettier.config.js
+++ b/pkgs/clan-app/webview-ui/app/prettier.config.js
@@ -0,0 +1,9 @@
+/**
+ * @see https://prettier.io/docs/en/configuration.html
+ * @type {import("prettier").Config}
+ */
+const config = {
+  trailingComma: "all",
+};
+
+export default config;
--- a/pkgs/clan-app/webview-ui/app/src/App.tsx
+++ b/pkgs/clan-app/webview-ui/app/src/App.tsx
@@ -0,0 +1,41 @@
+import { createSignal } from "solid-js";
+import { makePersisted } from "@solid-primitives/storage";
+import { callApi } from "./api";
+
+const [activeURI, setActiveURI] = makePersisted(
+  createSignal<string | null>(null),
+  {
+    name: "activeURI",
+    storage: localStorage,
+  },
+);
+
+export { activeURI, setActiveURI };
+
+const [clanList, setClanList] = makePersisted(createSignal<string[]>([]), {
+  name: "clanList",
+  storage: localStorage,
+});
+
+export { clanList, setClanList };
+
+(async function () {
+  const curr = activeURI();
+  if (curr) {
+    const result = await callApi("show_clan_meta", {
+      flake: { identifier: curr },
+    });
+    console.log("refetched meta for ", curr);
+    if (result.status === "error") {
+      result.errors.forEach((error) => {
+        if (error.description === "clan directory does not exist") {
+          setActiveURI(null);
+          setClanList((clans) => clans.filter((clan) => clan !== curr));
+        }
+      });
+    }
+  }
+})();
+
+// ensure to null out activeURI on startup if the clan was deleted
+// => throws user back to the view for selecting a clan
--- a/pkgs/clan-app/webview-ui/app/src/Form/base/index.tsx
+++ b/pkgs/clan-app/webview-ui/app/src/Form/base/index.tsx
@@ -0,0 +1,127 @@
+import { createEffect, createMemo, createSignal, onCleanup } from "solid-js";
+import type {
+  ComputePositionConfig,
+  ComputePositionReturn,
+  ReferenceElement,
+} from "@floating-ui/dom";
+import { computePosition } from "@floating-ui/dom";
+
+export interface UseFloatingOptions<
+  R extends ReferenceElement,
+  F extends HTMLElement,
+> extends Partial<ComputePositionConfig> {
+  whileElementsMounted?: (
+    reference: R,
+    floating: F,
+    update: () => void,
+  ) => // eslint-disable-next-line @typescript-eslint/no-invalid-void-type
+  void | (() => void);
+}
+
+interface UseFloatingState extends Omit<ComputePositionReturn, "x" | "y"> {
+  x?: number | null;
+  y?: number | null;
+}
+
+export interface UseFloatingResult extends UseFloatingState {
+  update(): void;
+}
+
+export function useFloating<R extends ReferenceElement, F extends HTMLElement>(
+  reference: () => R | undefined | null,
+  floating: () => F | undefined | null,
+  options?: UseFloatingOptions<R, F>,
+): UseFloatingResult {
+  const placement = () => options?.placement ?? "bottom";
+  const strategy = () => options?.strategy ?? "absolute";
+
+  const [data, setData] = createSignal<UseFloatingState>({
+    x: null,
+    y: null,
+    placement: placement(),
+    strategy: strategy(),
+    middlewareData: {},
+  });
+
+  const [error, setError] = createSignal<{ value: unknown } | undefined>();
+
+  createEffect(() => {
+    const currentError = error();
+    if (currentError) {
+      throw currentError.value;
+    }
+  });
+
+  const version = createMemo(() => {
+    reference();
+    floating();
+    return {};
+  });
+
+  function update() {
+    const currentReference = reference();
+    const currentFloating = floating();
+
+    if (currentReference && currentFloating) {
+      const capturedVersion = version();
+      computePosition(currentReference, currentFloating, {
+        middleware: options?.middleware,
+        placement: placement(),
+        strategy: strategy(),
+      }).then(
+        (currentData) => {
+          // Check if it's still valid
+          if (capturedVersion === version()) {
+            setData(currentData);
+          }
+        },
+        (err) => {
+          setError(err);
+        },
+      );
+    }
+  }
+
+  createEffect(() => {
+    const currentReference = reference();
+    const currentFloating = floating();
+
+    placement();
+    strategy();
+
+    if (currentReference && currentFloating) {
+      if (options?.whileElementsMounted) {
+        const cleanup = options.whileElementsMounted(
+          currentReference,
+          currentFloating,
+          update,
+        );
+
+        if (cleanup) {
+          onCleanup(cleanup);
+        }
+      } else {
+        update();
+      }
+    }
+  });
+
+  return {
+    get x() {
+      return data().x;
+    },
+    get y() {
+      return data().y;
+    },
+    get placement() {
+      return data().placement;
+    },
+    get strategy() {
+      return data().strategy;
+    },
+    get middlewareData() {
+      return data().middlewareData;
+    },
+    update,
+  };
+}
--- a/pkgs/clan-app/webview-ui/app/src/Form/base/label.tsx
+++ b/pkgs/clan-app/webview-ui/app/src/Form/base/label.tsx
@@ -0,0 +1,15 @@
+import type { JSX } from "solid-js";
+interface LabelProps {
+  label: JSX.Element;
+  required?: boolean;
+}
+export const Label = (props: LabelProps) => (
+  <span
+    class=" block"
+    classList={{
+      "after:ml-0.5 after:text-primary after:content-['*']": props.required,
+    }}
+  >
+    {props.label}
+  </span>
+);
--- a/pkgs/clan-app/webview-ui/app/src/Form/fields/FormSection.tsx
+++ b/pkgs/clan-app/webview-ui/app/src/Form/fields/FormSection.tsx
@@ -0,0 +1,8 @@
+import { JSX } from "solid-js";
+
+interface FormSectionProps {
+  children: JSX.Element;
+}
+export const FormSection = (props: FormSectionProps) => {
+  return <div class="p-2">{props.children}</div>;
+};
--- a/pkgs/clan-app/webview-ui/app/src/Form/fields/Select.tsx
+++ b/pkgs/clan-app/webview-ui/app/src/Form/fields/Select.tsx
@@ -0,0 +1,274 @@
+import {
+  createUniqueId,
+  createSignal,
+  Show,
+  type JSX,
+  For,
+  createMemo,
+  Accessor,
+} from "solid-js";
+import { Portal } from "solid-js/web";
+import { useFloating } from "../base";
+import { autoUpdate, flip, hide, offset, shift, size } from "@floating-ui/dom";
+import { Button } from "@/src/components/button";
+import {
+  InputBase,
+  InputError,
+  InputLabel,
+  InputLabelProps,
+} from "@/src/components/inputBase";
+import { FieldLayout } from "./layout";
+import Icon from "@/src/components/icon";
+import { useContext } from "corvu/dialog";
+
+export interface Option {
+  value: string;
+  label: string;
+  disabled?: boolean;
+}
+
+interface SelectInputpProps {
+  value: string[] | string;
+  selectProps?: JSX.InputHTMLAttributes<HTMLSelectElement>;
+  options: Option[];
+  label: JSX.Element;
+  labelProps?: InputLabelProps;
+  helperText?: JSX.Element;
+  error?: string;
+  required?: boolean;
+  type?: string;
+  inlineLabel?: JSX.Element;
+  class?: string;
+  adornment?: {
+    position: "start" | "end";
+    content: JSX.Element;
+  };
+  disabled?: boolean;
+  placeholder?: string;
+  multiple?: boolean;
+  loading?: boolean;
+  portalRef?: Accessor<HTMLElement | null>;
+}
+
+export function SelectInput(props: SelectInputpProps) {
+  const dialogContext = (dialogContextId?: string) =>
+    useContext(dialogContextId);
+
+  const _id = createUniqueId();
+
+  const [reference, setReference] = createSignal<HTMLElement>();
+  const [floating, setFloating] = createSignal<HTMLElement>();
+
+  // `position` is a reactive object.
+  const position = useFloating(reference, floating, {
+    placement: "bottom-start",
+
+    // pass options. Ensure the cleanup function is returned.
+    whileElementsMounted: (reference, floating, update) =>
+      autoUpdate(reference, floating, update, {
+        animationFrame: true,
+      }),
+    middleware: [
+      size({
+        apply({ rects, elements }) {
+          Object.assign(elements.floating.style, {
+            minWidth: `${rects.reference.width}px`,
+          });
+        },
+      }),
+      offset({ mainAxis: 2 }),
+      shift(),
+      flip(),
+      hide({
+        strategy: "referenceHidden",
+      }),
+    ],
+  });
+
+  // Create values list
+  const getValues = createMemo(() => {
+    return Array.isArray(props.value)
+      ? (props.value as string[])
+      : typeof props.value === "string"
+        ? [props.value]
+        : [];
+  });
+
+  // const getSingleValue = createMemo(() => {
+  //   const values = getValues();
+  //   return values.length > 0 ? values[0] : "";
+  // });
+
+  const handleClickOption = (opt: Option) => {
+    if (!props.multiple) {
+      // @ts-expect-error: fieldName is not known ahead of time
+      props.selectProps.onInput({
+        currentTarget: {
+          value: opt.value,
+        },
+      });
+      return;
+    }
+    let currValues = getValues();
+
+    if (currValues.includes(opt.value)) {
+      currValues = currValues.filter((o) => o !== opt.value);
+    } else {
+      currValues.push(opt.value);
+    }
+    // @ts-expect-error: fieldName is not known ahead of time
+    props.selectProps.onInput({
+      currentTarget: {
+        options: currValues.map((value) => ({
+          value,
+          selected: true,
+          disabled: false,
+        })),
+      },
+    });
+  };
+
+  return (
+    <>
+      <FieldLayout
+        error={props.error && <InputError error={props.error} />}
+        label={
+          <InputLabel
+            description={""}
+            required={props.required}
+            {...props.labelProps}
+          >
+            {props.label}
+          </InputLabel>
+        }
+        field={
+          <InputBase
+            error={!!props.error}
+            disabled={props.disabled}
+            required={props.required}
+            class="!justify-start"
+            divRef={setReference}
+            inputElem={
+              <button
+                // TODO: Keyboard acessibililty
+                // Currently the popover only opens with onClick
+                // Options are not selectable with keyboard
+                tabIndex={-1}
+                disabled={props.disabled}
+                onClick={() => {
+                  const popover = document.getElementById(_id);
+                  if (popover) {
+                    popover.togglePopover(); // Show or hide the popover
+                  }
+                }}
+                type="button"
+                class="flex w-full items-center gap-2"
+                formnovalidate
+                // TODO: Use native popover once Webkit supports it within <form>
+                // popovertarget={_id}
+                // popovertargetaction="toggle"
+              >
+                <Show
+                  when={props.adornment && props.adornment.position === "start"}
+                >
+                  {props.adornment?.content}
+                </Show>
+                {props.inlineLabel}
+                <div class="flex cursor-default flex-row gap-2">
+                  <Show
+                    when={
+                      getValues() &&
+                      getValues.length !== 1 &&
+                      getValues()[0] !== ""
+                    }
+                    fallback={props.placeholder}
+                  >
+                    <For each={getValues()} fallback={"Select"}>
+                      {(item) => (
+                        <div class="rounded-xl bg-slate-800 px-4 py-1 text-sm text-white">
+                          {item}
+                          <Show when={props.multiple}>
+                            <button
+                              class=""
+                              type="button"
+                              onClick={(_e) => {
+                                // @ts-expect-error: fieldName is not known ahead of time
+                                props.selectProps.onInput({
+                                  currentTarget: {
+                                    options: getValues()
+                                      .filter((o) => o !== item)
+                                      .map((value) => ({
+                                        value,
+                                        selected: true,
+                                        disabled: false,
+                                      })),
+                                  },
+                                });
+                              }}
+                            >
+                              X
+                            </button>
+                          </Show>
+                        </div>
+                      )}
+                    </For>
+                  </Show>
+                </div>
+                <Show
+                  when={props.adornment && props.adornment.position === "end"}
+                >
+                  {props.adornment?.content}
+                </Show>
+                <Icon size={12} icon="CaretDown" class="ml-auto mr-2" />
+              </button>
+            }
+          />
+        }
+      />
+
+      <Portal
+        mount={
+          props.portalRef ? props.portalRef() || document.body : document.body
+        }
+      >
+        <div
+          id={_id}
+          popover
+          ref={setFloating}
+          style={{
+            margin: 0,
+            position: position.strategy,
+            top: `${position.y ?? 0}px`,
+            left: `${position.x ?? 0}px`,
+          }}
+          class="z-[1000] shadow"
+        >
+          <ul class="flex max-h-96 flex-col gap-1 overflow-x-hidden overflow-y-scroll">
+            <Show when={!props.loading} fallback={"Loading ...."}>
+              <For each={props.options}>
+                {(opt) => (
+                  <>
+                    <li>
+                      <Button
+                        variant="ghost"
+                        class="!justify-start"
+                        onClick={() => handleClickOption(opt)}
+                        disabled={opt.disabled}
+                        classList={{
+                          active:
+                            !opt.disabled && getValues().includes(opt.value),
+                        }}
+                      >
+                        {opt.label}
+                      </Button>
+                    </li>
+                  </>
+                )}
+              </For>
+            </Show>
+          </ul>
+        </div>
+      </Portal>
+    </>
+  );
+}
--- a/pkgs/clan-app/webview-ui/app/src/Form/fields/TextInput.tsx
+++ b/pkgs/clan-app/webview-ui/app/src/Form/fields/TextInput.tsx
@@ -0,0 +1,58 @@
+import { splitProps, type JSX } from "solid-js";
+import {
+  InputBase,
+  InputError,
+  InputLabel,
+  InputVariant,
+} from "@/src/components/inputBase";
+import { Typography } from "@/src/components/Typography";
+import { FieldLayout } from "./layout";
+
+interface TextInputProps {
+  // Common
+  error?: string;
+  required?: boolean;
+  disabled?: boolean;
+  // Passed to input
+  value: string;
+  inputProps?: JSX.InputHTMLAttributes<HTMLInputElement>;
+  placeholder?: string;
+  variant?: InputVariant;
+  // Passed to label
+  label: JSX.Element;
+  help?: string;
+  // Passed to layout
+  class?: string;
+}
+
+export function TextInput(props: TextInputProps) {
+  const [layoutProps, rest] = splitProps(props, ["class"]);
+  return (
+    <FieldLayout
+      label={
+        <InputLabel
+          class="col-span-2"
+          required={props.required}
+          error={!!props.error}
+          help={props.help}
+        >
+          {props.label}
+        </InputLabel>
+      }
+      field={
+        <InputBase
+          variant={props.variant}
+          error={!!props.error}
+          required={props.required}
+          disabled={props.disabled}
+          placeholder={props.placeholder}
+          class="col-span-10"
+          {...props.inputProps}
+          value={props.value}
+        />
+      }
+      error={props.error && <InputError error={props.error} />}
+      {...layoutProps}
+    />
+  );
+}
--- a/pkgs/clan-app/webview-ui/app/src/Form/fields/index.ts
+++ b/pkgs/clan-app/webview-ui/app/src/Form/fields/index.ts
@@ -0,0 +1,2 @@
+export * from "./FormSection";
+export * from "./TextInput";
--- a/pkgs/clan-app/webview-ui/app/src/Form/fields/layout.tsx
+++ b/pkgs/clan-app/webview-ui/app/src/Form/fields/layout.tsx
@@ -0,0 +1,26 @@
+import { JSX, splitProps } from "solid-js";
+import cx from "classnames";
+
+interface LayoutProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  field?: JSX.Element;
+  label?: JSX.Element;
+  error?: JSX.Element;
+}
+export const FieldLayout = (props: LayoutProps) => {
+  const [intern, divProps] = splitProps(props, [
+    "field",
+    "label",
+    "error",
+    "class",
+  ]);
+  return (
+    <div
+      class={cx("grid grid-cols-10 items-center", intern.class)}
+      {...divProps}
+    >
+      <div class="col-span-5 flex items-center">{props.label}</div>
+      <div class="col-span-5">{props.field}</div>
+      {props.error && <span class="col-span-full">{props.error}</span>}
+    </div>
+  );
+};
--- a/pkgs/clan-app/webview-ui/app/src/Form/fieldset/index.tsx
+++ b/pkgs/clan-app/webview-ui/app/src/Form/fieldset/index.tsx
@@ -0,0 +1,32 @@
+import { JSX } from "solid-js";
+
+import { Typography } from "@/src/components/Typography";
+
+interface FieldsetProps {
+  legend?: string;
+  children: JSX.Element;
+  class?: string;
+}
+
+export default function Fieldset(props: FieldsetProps) {
+  return (
+    <fieldset class="flex flex-col gap-y-2.5">
+      {props.legend && (
+        <div class="px-2">
+          <Typography
+            hierarchy="body"
+            tag="p"
+            size="s"
+            color="primary"
+            weight="medium"
+          >
+            {props.legend}
+          </Typography>
+        </div>
+      )}
+      <div class="flex flex-col gap-y-3 rounded-md border border-secondary-200 bg-secondary-50 p-5">
+        {props.children}
+      </div>
+    </fieldset>
+  );
+}
--- a/pkgs/clan-app/webview-ui/app/src/Form/form/index.tsx
+++ b/pkgs/clan-app/webview-ui/app/src/Form/form/index.tsx
@@ -0,0 +1,928 @@
+import {
+  createForm,
+  Field,
+  FieldArray,
+  FieldValues,
+  FormStore,
+  pattern,
+  ResponseData,
+  setValue,
+  getValues,
+  insert,
+  SubmitHandler,
+  reset,
+  remove,
+  move,
+} from "@modular-forms/solid";
+import { JSONSchema7, JSONSchema7Type } from "json-schema";
+import { TextInput } from "../fields/TextInput";
+import { createEffect, For, JSX, Match, Show, Switch } from "solid-js";
+import cx from "classnames";
+import { Label } from "../base/label";
+import { SelectInput } from "../fields/Select";
+import { Button } from "@/src/components/button";
+import Icon from "@/src/components/icon";
+
+function generateDefaults(schema: JSONSchema7): unknown {
+  switch (schema.type) {
+    case "string":
+      return ""; // Default value for string
+
+    case "number":
+    case "integer":
+      return 0; // Default value for number/integer
+
+    case "boolean":
+      return false; // Default value for boolean
+
+    case "array":
+      return []; // Default empty array if no items schema or items is true/false
+
+    case "object": {
+      const obj: Record<string, unknown> = {};
+      if (schema.properties) {
+        Object.entries(schema.properties).forEach(([key, propSchema]) => {
+          if (typeof propSchema === "boolean") {
+            obj[key] = false;
+          } else {
+            // if (schema.required  schema.required.includes(key))
+            obj[key] = generateDefaults(propSchema);
+          }
+        });
+      }
+      return obj;
+    }
+
+    default:
+      return null; // Default for unknown types or nulls
+  }
+}
+
+interface FormProps {
+  schema: JSONSchema7;
+  initialValues?: NonNullable<unknown>;
+  handleSubmit?: SubmitHandler<NonNullable<unknown>>;
+  initialPath?: string[];
+  components?: {
+    before?: JSX.Element;
+    after?: JSX.Element;
+  };
+  readonly?: boolean;
+  formProps?: JSX.InputHTMLAttributes<HTMLFormElement>;
+  errorContext?: string;
+  resetOnSubmit?: boolean;
+}
+export const DynForm = (props: FormProps) => {
+  const [formStore, { Field, Form: ModuleForm }] = createForm({
+    initialValues: props.initialValues,
+  });
+
+  const handleSubmit: SubmitHandler<NonNullable<unknown>> = async (
+    values,
+    event,
+  ) => {
+    console.log("Submitting form values", values, props.errorContext);
+    props.handleSubmit?.(values, event);
+    // setValue(formStore, "root", null);
+    if (props.resetOnSubmit) {
+      console.log("Resetting form", values, props.initialValues);
+      reset(formStore);
+    }
+  };
+
+  createEffect(() => {
+    console.log("FormStore", formStore);
+  });
+
+  return (
+    <>
+      {/* @ts-expect-error: This happened after solidjs upgrade. TOOD: fixme */}
+      <ModuleForm {...props.formProps} onSubmit={handleSubmit}>
+        {props.components?.before}
+        <SchemaFields
+          schema={props.schema}
+          Field={Field}
+          formStore={formStore}
+          path={props.initialPath || []}
+          readonly={!!props.readonly}
+          parent={props.schema}
+        />
+        {props.components?.after}
+      </ModuleForm>
+    </>
+  );
+};
+
+interface UnsupportedProps {
+  schema: JSONSchema7;
+  error?: string;
+}
+
+const Unsupported = (props: UnsupportedProps) => (
+  <div>
+    {props.error && <div class="font-bold text-error-700">{props.error}</div>}
+    <span>
+      Invalid or unsupported schema entry of type:{" "}
+      <b>{JSON.stringify(props.schema.type)}</b>
+    </span>
+    <pre>
+      <code>{JSON.stringify(props.schema, null, 2)}</code>
+    </pre>
+  </div>
+);
+
+interface SchemaFieldsProps<T extends FieldValues, R extends ResponseData> {
+  formStore: FormStore<T, R>;
+  Field: typeof Field<T, R, never>;
+  schema: JSONSchema7;
+  path: string[];
+  readonly: boolean;
+  parent: JSONSchema7;
+}
+export function SchemaFields<T extends FieldValues, R extends ResponseData>(
+  props: SchemaFieldsProps<T, R>,
+) {
+  return (
+    <Switch fallback={<Unsupported schema={props.schema} />}>
+      {/* Simple types */}
+      <Match when={props.schema.type === "boolean"}>bool</Match>
+
+      <Match when={props.schema.type === "integer"}>
+        <StringField {...props} schema={props.schema} />
+      </Match>
+      <Match when={props.schema.type === "number"}>
+        <StringField {...props} schema={props.schema} />
+      </Match>
+      <Match when={props.schema.type === "string"}>
+        <StringField {...props} schema={props.schema} />
+      </Match>
+      {/* Composed types */}
+      <Match when={props.schema.type === "array"}>
+        <ArrayFields {...props} schema={props.schema} />
+      </Match>
+      <Match when={props.schema.type === "object"}>
+        <ObjectFields {...props} schema={props.schema} />
+      </Match>
+      {/* Empty / Null */}
+      <Match when={props.schema.type === "null"}>
+        Dont know how to rendner InputType null
+        <Unsupported schema={props.schema} />
+      </Match>
+    </Switch>
+  );
+}
+
+export function StringField<T extends FieldValues, R extends ResponseData>(
+  props: SchemaFieldsProps<T, R>,
+) {
+  if (
+    props.schema.type !== "string" &&
+    props.schema.type !== "number" &&
+    props.schema.type !== "integer"
+  ) {
+    return (
+      <span class="text-error-700">
+        Error cannot render the following as String input.
+        <Unsupported schema={props.schema} />
+      </span>
+    );
+  }
+  const { Field } = props;
+
+  const validate = props.schema.pattern
+    ? pattern(
+        new RegExp(props.schema.pattern),
+        `String should follow pattern ${props.schema.pattern}`,
+      )
+    : undefined;
+
+  const commonProps = {
+    label: props.schema.title || props.path.join("."),
+    required:
+      props.parent.required &&
+      props.parent.required.some(
+        (r) => r === props.path[props.path.length - 1],
+      ),
+  };
+  const readonly = !!props.readonly;
+  return (
+    <Switch fallback={<Unsupported schema={props.schema} />}>
+      <Match
+        when={props.schema.type === "number" || props.schema.type === "integer"}
+      >
+        {(s) => (
+          <Field
+            // @ts-expect-error: We dont know dynamic names while type checking
+            name={props.path.join(".")}
+            validate={validate}
+          >
+            {(field, fieldProps) => (
+              <>
+                <TextInput
+                  inputProps={{
+                    ...fieldProps,
+                    inputmode: "numeric",
+                    pattern: "[0-9.]*",
+                    readonly,
+                  }}
+                  {...commonProps}
+                  value={(field.value as unknown as string) || ""}
+                  error={field.error}
+                  // required
+                  // altLabel="Leave empty to accept the default"
+                  // helperText="Configure how dude connects"
+                  // error="Something is wrong now"
+                />
+              </>
+            )}
+          </Field>
+        )}
+      </Match>
+      <Match when={props.schema.enum}>
+        {(_enumSchemas) => (
+          <Field
+            // @ts-expect-error: We dont know dynamic names while type checking
+            name={props.path.join(".")}
+          >
+            {(field, fieldProps) => (
+              <OnlyStringItems itemspec={props.schema}>
+                {(options) => (
+                  <SelectInput
+                    error={field.error}
+                    // altLabel={props.schema.title}
+                    label={props.path.join(".")}
+                    helperText={props.schema.description}
+                    value={field.value || []}
+                    options={options.map((o) => ({
+                      value: o,
+                      label: o,
+                    }))}
+                    selectProps={fieldProps}
+                    required={!!props.schema.minItems}
+                  />
+                )}
+              </OnlyStringItems>
+            )}
+          </Field>
+        )}
+      </Match>
+      <Match when={props.schema.writeOnly && props.schema}>
+        {(s) => (
+          <Field
+            // @ts-expect-error: We dont know dynamic names while type checking
+            name={props.path.join(".")}
+            validate={validate}
+          >
+            {(field, fieldProps) => (
+              <TextInput
+                inputProps={{ ...fieldProps, readonly }}
+                value={field.value as unknown as string}
+                // type="password"
+                error={field.error}
+                {...commonProps}
+                // required
+                // altLabel="Leave empty to accept the default"
+                // helperText="Configure how dude connects"
+                // error="Something is wrong now"
+              />
+            )}
+          </Field>
+        )}
+      </Match>
+      {/* TODO: when is it a normal string input? */}
+      <Match when={props.schema}>
+        {(s) => (
+          <Field
+            // @ts-expect-error: We dont know dynamic names while type checking
+            name={props.path.join(".")}
+            validate={validate}
+          >
+            {(field, fieldProps) => (
+              <TextInput
+                inputProps={{ ...fieldProps, readonly }}
+                value={field.value as unknown as string}
+                error={field.error}
+                {...commonProps}
+                // placeholder="foobar"
+                // inlineLabel={
+                //   <div class="label">
+                //     <span class=""></span>
+                //   </div>
+                // }
+                // required
+                // altLabel="Leave empty to accept the default"
+                // helperText="Configure how dude connects"
+                // error="Something is wrong now"
+              />
+            )}
+          </Field>
+        )}
+      </Match>
+    </Switch>
+  );
+}
+
+interface OptionSchemaProps {
+  itemSpec: JSONSchema7Type;
+}
+export function OptionSchema(props: OptionSchemaProps) {
+  return (
+    <Switch
+      fallback={<option class="text-error-700">Item spec unhandled</option>}
+    >
+      <Match when={typeof props.itemSpec === "string" && props.itemSpec}>
+        {(o) => <option>{o()}</option>}
+      </Match>
+    </Switch>
+  );
+}
+
+interface ValueDisplayProps<T extends FieldValues, R extends ResponseData>
+  extends SchemaFieldsProps<T, R> {
+  children: JSX.Element;
+  listFieldName: string;
+  idx: number;
+  of: number;
+}
+export function ListValueDisplay<T extends FieldValues, R extends ResponseData>(
+  props: ValueDisplayProps<T, R>,
+) {
+  const removeItem = (e: Event) => {
+    e.preventDefault();
+    remove(
+      props.formStore,
+      // @ts-expect-error: listFieldName is not known ahead of time
+      props.listFieldName,
+      { at: props.idx },
+    );
+  };
+  const moveItemBy = (dir: number) => (e: Event) => {
+    e.preventDefault();
+    move(
+      props.formStore,
+      // @ts-expect-error: listFieldName is not known ahead of time
+      props.listFieldName,
+      { from: props.idx, to: props.idx + dir },
+    );
+  };
+  const topMost = () => props.idx === props.of - 1;
+  const bottomMost = () => props.idx === 0;
+
+  return (
+    <div class="w-full border-b border-secondary-200 px-2 pb-4">
+      <div class="flex w-full items-center gap-2">
+        {props.children}
+        <div class="ml-4 min-w-fit">
+          <Button
+            variant="ghost"
+            size="s"
+            type="button"
+            onClick={moveItemBy(1)}
+            disabled={topMost()}
+            startIcon={<Icon icon="ArrowBottom" />}
+            class="h-12"
+          ></Button>
+          <Button
+            type="button"
+            variant="ghost"
+            size="s"
+            onClick={moveItemBy(-1)}
+            disabled={bottomMost()}
+            class="h-12"
+            startIcon={<Icon icon="ArrowTop" />}
+          ></Button>
+          <Button
+            type="button"
+            variant="ghost"
+            size="s"
+            class="h-12"
+            startIcon={<Icon icon="Trash" />}
+            onClick={removeItem}
+          ></Button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+const findDuplicates = (arr: unknown[]) => {
+  const seen = new Set();
+  const duplicates: number[] = [];
+
+  arr.forEach((obj, idx) => {
+    const serializedObj = JSON.stringify(obj);
+
+    if (seen.has(serializedObj)) {
+      duplicates.push(idx);
+    } else {
+      seen.add(serializedObj);
+    }
+  });
+
+  return duplicates;
+};
+
+interface OnlyStringItems {
+  children: (items: string[]) => JSX.Element;
+  itemspec: JSONSchema7;
+}
+const OnlyStringItems = (props: OnlyStringItems) => {
+  return (
+    <Show
+      when={
+        Array.isArray(props.itemspec.enum) &&
+        typeof props.itemspec.type === "string" &&
+        props.itemspec
+      }
+      fallback={
+        <Unsupported
+          schema={props.itemspec}
+          error="Unsupported array item type"
+        />
+      }
+    >
+      {props.children(props.itemspec.enum as string[])}
+    </Show>
+  );
+};
+
+export function ArrayFields<T extends FieldValues, R extends ResponseData>(
+  props: SchemaFieldsProps<T, R>,
+) {
+  if (props.schema.type !== "array") {
+    return (
+      <span class="text-error-700">
+        Error cannot render the following as array.
+        <Unsupported schema={props.schema} />
+      </span>
+    );
+  }
+  const { Field } = props;
+
+  const listFieldName = props.path.join(".");
+
+  return (
+    <>
+      <Switch fallback={<Unsupported schema={props.schema} />}>
+        <Match
+          when={
+            !Array.isArray(props.schema.items) &&
+            typeof props.schema.items === "object" &&
+            props.schema.items
+          }
+        >
+          {(itemsSchema) => (
+            <>
+              <Switch fallback={<Unsupported schema={props.schema} />}>
+                <Match when={itemsSchema().type === "array"}>
+                  <Unsupported
+                    schema={props.schema}
+                    error="Array of Array is not supported yet."
+                  />
+                </Match>
+                <Match
+                  when={itemsSchema().type === "string" && itemsSchema().enum}
+                >
+                  <Field
+                    // @ts-expect-error: listFieldName is not known ahead of time
+                    name={listFieldName}
+                    // @ts-expect-error: type is known due to schema
+                    type="string[]"
+                    validateOn="touched"
+                    revalidateOn="touched"
+                    validate={() => {
+                      let error = "";
+                      const values: unknown[] = getValues(
+                        props.formStore,
+                        // @ts-expect-error: listFieldName is not known ahead of time
+                        listFieldName,
+                        // @ts-expect-error: assumption based on the behavior of selectInput
+                      )?.strings?.selection;
+                      console.log("vali", { values });
+                      if (props.schema.uniqueItems) {
+                        const duplicates = findDuplicates(values);
+                        if (duplicates.length) {
+                          error = `Duplicate entries are not allowed. Please make sure each entry is unique.`;
+                        }
+                      }
+                      if (
+                        props.schema.maxItems &&
+                        values.length > props.schema.maxItems
+                      ) {
+                        error = `You can only select up to ${props.schema.maxItems} items`;
+                      }
+                      if (
+                        props.schema.minItems &&
+                        values.length < props.schema.minItems
+                      ) {
+                        error = `Please select at least ${props.schema.minItems} items.`;
+                      }
+                      return error;
+                    }}
+                  >
+                    {(field, fieldProps) => (
+                      <OnlyStringItems itemspec={itemsSchema()}>
+                        {(options) => (
+                          <SelectInput
+                            multiple
+                            error={field.error}
+                            // altLabel={props.schema.title}
+                            label={listFieldName}
+                            helperText={props.schema.description}
+                            value={field.value || ""}
+                            options={options.map((o) => ({
+                              value: o,
+                              label: o,
+                            }))}
+                            selectProps={fieldProps}
+                            required={!!props.schema.minItems}
+                          />
+                        )}
+                      </OnlyStringItems>
+                    )}
+                  </Field>
+                </Match>
+                <Match
+                  when={
+                    itemsSchema().type === "string" ||
+                    itemsSchema().type === "object"
+                  }
+                >
+                  {/* !Important: Register the parent field to gain access to array items*/}
+                  <FieldArray
+                    // @ts-expect-error: listFieldName is not known ahead of time
+                    name={listFieldName}
+                    of={props.formStore}
+                    validateOn="touched"
+                    revalidateOn="touched"
+                    validate={() => {
+                      let error = "";
+                      // @ts-expect-error: listFieldName is not known ahead of time
+                      const values: unknown[] = getValues(
+                        props.formStore,
+                        // @ts-expect-error: listFieldName is not known ahead of time
+                        listFieldName,
+                      );
+                      if (props.schema.uniqueItems) {
+                        const duplicates = findDuplicates(values);
+                        if (duplicates.length) {
+                          error = `Duplicate entries are not allowed. Please make sure each entry is unique.`;
+                        }
+                      }
+                      if (
+                        props.schema.maxItems &&
+                        values.length > props.schema.maxItems
+                      ) {
+                        error = `You can only add up to ${props.schema.maxItems} items`;
+                      }
+                      if (
+                        props.schema.minItems &&
+                        values.length < props.schema.minItems
+                      ) {
+                        error = `Please add at least ${props.schema.minItems} items.`;
+                      }
+
+                      return error;
+                    }}
+                  >
+                    {(fieldArray) => (
+                      <>
+                        {/* Render existing items */}
+                        <For
+                          each={fieldArray.items}
+                          fallback={
+                            // Empty list
+                            <span class="text-neutral-500">
+                              No {itemsSchema().title || "entries"} yet.
+                            </span>
+                          }
+                        >
+                          {(item, idx) => (
+                            <ListValueDisplay
+                              {...props}
+                              listFieldName={listFieldName}
+                              idx={idx()}
+                              of={fieldArray.items.length}
+                            >
+                              <Field
+                                // @ts-expect-error: field names are not know ahead of time
+                                name={`${listFieldName}.${idx()}`}
+                              >
+                                {(f, fp) => (
+                                  <>
+                                    <DynForm
+                                      formProps={{
+                                        class: cx("w-full"),
+                                      }}
+                                      resetOnSubmit={true}
+                                      schema={itemsSchema()}
+                                      initialValues={
+                                        itemsSchema().type === "object"
+                                          ? f.value
+                                          : { "": f.value }
+                                      }
+                                      readonly={true}
+                                    ></DynForm>
+                                  </>
+                                )}
+                              </Field>
+                            </ListValueDisplay>
+                          )}
+                        </For>
+                        <Show when={fieldArray.error}>
+                          <span class="font-bold text-error-700">
+                            {fieldArray.error}
+                          </span>
+                        </Show>
+
+                        {/* Add new item */}
+                        <DynForm
+                          formProps={{
+                            class: cx("px-2 w-full"),
+                          }}
+                          schema={{
+                            ...itemsSchema(),
+                            title: itemsSchema().title || "thing",
+                          }}
+                          initialPath={["root"]}
+                          // Reset the input field for list items
+                          resetOnSubmit={true}
+                          initialValues={{
+                            root: generateDefaults(itemsSchema()),
+                          }}
+                          // Button for adding new items
+                          components={{
+                            before: (
+                              <div class="flex w-full justify-end pb-2">
+                                <Button
+                                  variant="ghost"
+                                  type="submit"
+                                  endIcon={<Icon size={14} icon={"Plus"} />}
+                                  class="capitalize"
+                                >
+                                  Add {itemsSchema().title}
+                                </Button>
+                              </div>
+                            ),
+                          }}
+                          // Add the new item to the FieldArray
+                          handleSubmit={(values, event) => {
+                            // @ts-expect-error: listFieldName is not known ahead of time
+                            const prev: unknown[] = getValues(
+                              props.formStore,
+
+                              // @ts-expect-error: listFieldName is not known ahead of time
+                              listFieldName,
+                            );
+                            if (itemsSchema().type === "object") {
+                              const newIdx = prev.length;
+                              setValue(
+                                props.formStore,
+
+                                // @ts-expect-error: listFieldName is not known ahead of time
+                                `${listFieldName}.${newIdx}`,
+
+                                // @ts-expect-error: listFieldName is not known ahead of time
+                                values.root,
+                              );
+                            }
+
+                            // @ts-expect-error: listFieldName is not known ahead of time
+                            insert(props.formStore, listFieldName, {
+                              // @ts-expect-error: listFieldName is not known ahead of time
+                              value: values.root,
+                            });
+                          }}
+                        />
+                      </>
+                    )}
+                  </FieldArray>
+                </Match>
+              </Switch>
+            </>
+          )}
+        </Match>
+      </Switch>
+    </>
+  );
+}
+
+interface ObjectFieldPropertyLabelProps {
+  schema: JSONSchema7;
+  fallback: JSX.Element;
+}
+export function ObjectFieldPropertyLabel(props: ObjectFieldPropertyLabelProps) {
+  return (
+    <Switch fallback={props.fallback}>
+      {/* @ts-expect-error: $exportedModuleInfo should exist since we export it */}
+      <Match when={props.schema?.$exportedModuleInfo?.path}>
+        {(path) => path()[path().length - 1]}
+      </Match>
+    </Switch>
+  );
+}
+
+export function ObjectFields<T extends FieldValues, R extends ResponseData>(
+  props: SchemaFieldsProps<T, R>,
+) {
+  if (props.schema.type !== "object") {
+    return (
+      <span class="text-error-700">
+        Error cannot render the following as Object
+        <Unsupported schema={props.schema} />
+      </span>
+    );
+  }
+
+  const fieldName = props.path.join(".");
+  const { Field } = props;
+
+  return (
+    <Switch
+      fallback={
+        <Unsupported
+          schema={props.schema}
+          error="Dont know how to render objectFields"
+        />
+      }
+    >
+      <Match
+        when={!props.schema.additionalProperties && props.schema.properties}
+      >
+        {(properties) => (
+          <For each={Object.entries(properties())}>
+            {([propName, propSchema]) => (
+              <div
+                // eslint-disable-next-line tailwindcss/no-custom-classname
+                class={cx(
+                  "w-full grid grid-cols-1 gap-4 justify-items-start",
+                  `p-${props.path.length * 2}`,
+                )}
+              >
+                <Label
+                  label={propName}
+                  required={props.schema.required?.some((r) => r === propName)}
+                />
+
+                {typeof propSchema === "object" && (
+                  <SchemaFields
+                    {...props}
+                    schema={propSchema}
+                    path={[...props.path, propName]}
+                  />
+                )}
+                {typeof propSchema === "boolean" && (
+                  <span class="text-error-700">
+                    Schema: Object of Boolean not supported
+                  </span>
+                )}
+              </div>
+            )}
+          </For>
+        )}
+      </Match>
+      {/* Objects where people can define their own keys
+        - Trivial Key-value pairs. Where the value is a string a number or a list of strings (trivial select).
+        - Non-trivial Key-value pairs. Where the value is an object or a list
+      */}
+      <Match
+        when={
+          typeof props.schema.additionalProperties === "object" &&
+          props.schema.additionalProperties
+        }
+      >
+        {(additionalPropertiesSchema) => (
+          <Switch
+            fallback={
+              <Unsupported
+                schema={additionalPropertiesSchema()}
+                error="type of additionalProperties not supported yet"
+              />
+            }
+          >
+            {/* Non-trivival cases */}
+            <Match
+              when={
+                additionalPropertiesSchema().type === "object" &&
+                additionalPropertiesSchema()
+              }
+            >
+              {(itemSchema) => (
+                <Field
+                  // Important!: Register the object field to gain access to the dynamic object properties
+                  // @ts-expect-error: fieldName is not known ahead of time
+                  name={fieldName}
+                >
+                  {(objectField, fp) => (
+                    <>
+                      <For
+                        fallback={
+                          <>
+                            <label class="">
+                              No{" "}
+                              <ObjectFieldPropertyLabel
+                                schema={itemSchema()}
+                                fallback={"No entries"}
+                              />{" "}
+                              yet.
+                            </label>
+                          </>
+                        }
+                        each={Object.entries(objectField.value || {})}
+                      >
+                        {([key, relatedValue]) => (
+                          <Field
+                            // @ts-expect-error: fieldName is not known ahead of time
+                            name={`${fieldName}.${key}`}
+                          >
+                            {(f, fp) => (
+                              <div class="w-full border-l-4 border-gray-300 pl-4">
+                                <DynForm
+                                  formProps={{
+                                    class: cx("w-full"),
+                                  }}
+                                  schema={itemSchema()}
+                                  initialValues={f.value}
+                                  components={{
+                                    before: (
+                                      <div class="flex w-full">
+                                        <span class="text-xl font-semibold">
+                                          {key}
+                                        </span>
+                                        <Button
+                                          variant="ghost"
+                                          class="ml-auto"
+                                          size="s"
+                                          type="button"
+                                          onClick={(_e) => {
+                                            const copy = {
+                                              // @ts-expect-error: fieldName is not known ahead of time
+                                              ...objectField.value,
+                                            };
+                                            // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
+                                            delete copy[key];
+                                            setValue(
+                                              props.formStore,
+                                              // @ts-expect-error: fieldName is not known ahead of time
+                                              `${fieldName}`,
+                                              copy,
+                                            );
+                                          }}
+                                        >
+                                          <Icon icon="Trash" />
+                                        </Button>
+                                      </div>
+                                    ),
+                                  }}
+                                />
+                              </div>
+                            )}
+                          </Field>
+                        )}
+                      </For>
+                      {/* Replace this with a normal input ?*/}
+                      <DynForm
+                        formProps={{
+                          class: cx("w-full"),
+                        }}
+                        resetOnSubmit={true}
+                        initialValues={{ "": "" }}
+                        schema={{
+                          type: "string",
+                          title: `Entry title or key`,
+                        }}
+                        handleSubmit={(values, event) => {
+                          setValue(
+                            props.formStore,
+                            // @ts-expect-error: fieldName is not known ahead of time
+                            `${fieldName}`,
+                            // @ts-expect-error: fieldName is not known ahead of time
+                            { ...objectField.value, [values[""]]: {} },
+                          );
+                        }}
+                      />
+                    </>
+                  )}
+                </Field>
+              )}
+            </Match>
+            <Match
+              when={
+                additionalPropertiesSchema().type === "array" &&
+                additionalPropertiesSchema()
+              }
+            >
+              {(itemSchema) => (
+                <Unsupported
+                  schema={itemSchema()}
+                  error="dynamic arrays are not implemented yet"
+                />
+              )}
+            </Match>
+            {/* TODO: Trivial cases */}
+          </Switch>
+        )}
+      </Match>
+    </Switch>
+  );
+}
--- a/pkgs/clan-app/webview-ui/app/src/api/index.tsx
+++ b/pkgs/clan-app/webview-ui/app/src/api/index.tsx
@@ -0,0 +1,138 @@
+import schema from "@/api/API.json" with { type: "json" };
+import { API, Error } from "@/api/API";
+import { nanoid } from "nanoid";
+import { Schema as Inventory } from "@/api/Inventory";
+import { toast, Toast } from "solid-toast";
+import {
+  ErrorToastComponent,
+  CancelToastComponent,
+} from "@/src/components/toast";
+export type OperationNames = keyof API;
+export type OperationArgs<T extends OperationNames> = API[T]["arguments"];
+export type OperationResponse<T extends OperationNames> = API[T]["return"];
+
+export type ApiEnvelope<T> =
+  | {
+      status: "success";
+      data: T;
+      op_key: string;
+    }
+  | Error;
+
+export type Services = NonNullable<Inventory["services"]>;
+export type ServiceNames = keyof Services;
+export type ClanService<T extends ServiceNames> = Services[T];
+export type ClanServiceInstance<T extends ServiceNames> = NonNullable<
+  Services[T]
+>[string];
+
+export type SuccessQuery<T extends OperationNames> = Extract<
+  OperationResponse<T>,
+  { status: "success" }
+>;
+export type SuccessData<T extends OperationNames> = SuccessQuery<T>["data"];
+
+export type ErrorQuery<T extends OperationNames> = Extract<
+  OperationResponse<T>,
+  { status: "error" }
+>;
+export type ErrorData<T extends OperationNames> = ErrorQuery<T>["errors"];
+
+export type ClanOperations = Record<OperationNames, (str: string) => void>;
+
+export interface GtkResponse<T> {
+  result: T;
+  op_key: string;
+}
+const _callApi = <K extends OperationNames>(
+  method: K,
+  args: OperationArgs<K>,
+): { promise: Promise<OperationResponse<K>>; op_key: string } => {
+  const promise = (
+    window as unknown as Record<
+      OperationNames,
+      (
+        args: OperationArgs<OperationNames>,
+      ) => Promise<OperationResponse<OperationNames>>
+    >
+  )[method](args) as Promise<OperationResponse<K>>;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const op_key = (promise as any)._webviewMessageId as string;
+
+  return { promise, op_key };
+};
+
+const handleCancel = async <K extends OperationNames>(
+  ops_key: string,
+  orig_task: Promise<OperationResponse<K>>,
+) => {
+  console.log("Canceling operation: ", ops_key);
+  const { promise, op_key } = _callApi("cancel_task", { task_id: ops_key });
+  const resp = await promise;
+
+  if (resp.status === "error") {
+    toast.custom(
+      (t) => (
+        <ErrorToastComponent
+          t={t}
+          message={"Failed to cancel operation: " + ops_key}
+        />
+      ),
+      {
+        duration: 5000,
+      },
+    );
+  } else {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (orig_task as any).cancelled = true;
+  }
+  console.log("Cancel response: ", resp);
+};
+
+export const callApi = async <K extends OperationNames>(
+  method: K,
+  args: OperationArgs<K>,
+): Promise<OperationResponse<K>> => {
+  console.log("Calling API", method, args);
+  const { promise, op_key } = _callApi(method, args);
+
+  const toastId = toast.custom(
+    (
+      t, // t is the Toast object, t.id is the id of THIS toast instance
+    ) => (
+      <CancelToastComponent
+        t={t}
+        message={"Exectuting " + method}
+        onCancel={handleCancel.bind(null, op_key, promise)}
+      />
+    ),
+    {
+      duration: Infinity,
+    },
+  );
+
+  const response = await promise;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const cancelled = (promise as any).cancelled;
+  if (cancelled) {
+    console.log("Not printing toast because operation was cancelled");
+  }
+
+  if (response.status === "error" && !cancelled) {
+    toast.remove(toastId);
+    toast.custom(
+      (t) => (
+        <ErrorToastComponent
+          t={t}
+          message={"Error: " + response.errors[0].message}
+        />
+      ),
+      {
+        duration: Infinity,
+      },
+    );
+  } else {
+    toast.remove(toastId);
+  }
+  return response as OperationResponse<K>;
+};
--- a/pkgs/clan-app/webview-ui/app/src/api/inventory.ts
+++ b/pkgs/clan-app/webview-ui/app/src/api/inventory.ts
@@ -0,0 +1,19 @@
+import { QueryClient } from "@tanstack/solid-query";
+import { ApiEnvelope, callApi } from ".";
+import { Schema as Inventory } from "@/api/Inventory";
+
+export async function get_inventory(client: QueryClient, base_path: string) {
+  const data = await client.ensureQueryData({
+    queryKey: [base_path, "inventory"],
+    queryFn: () => {
+      console.log("Refreshing inventory");
+      return callApi("get_inventory", {
+        flake: { identifier: base_path },
+      }) as Promise<ApiEnvelope<Inventory>>;
+    },
+    revalidateIfStale: true,
+    staleTime: 60 * 1000,
+  });
+
+  return data;
+}
--- a/pkgs/clan-app/webview-ui/app/src/api/wifi.ts
+++ b/pkgs/clan-app/webview-ui/app/src/api/wifi.ts
@@ -0,0 +1,20 @@
+import { callApi } from ".";
+import { Schema as Inventory } from "@/api/Inventory";
+
+export const instance_name = (machine_name: string) =>
+  `${machine_name}_wifi_0` as const;
+
+export async function get_iwd_service(base_path: string, machine_name: string) {
+  const r = await callApi("get_inventory", {
+    flake: { identifier: base_path },
+  });
+  if (r.status == "error") {
+    return null;
+  }
+  // @FIXME: Clean this up once we implement the feature
+  // @ts-expect-error: This doesn't check currently
+  const inventory: Inventory = r.data;
+
+  const instance_key = instance_name(machine_name);
+  return inventory.services?.iwd?.[instance_key] || null;
+}
--- a/pkgs/clan-app/webview-ui/app/src/api_test.tsx
+++ b/pkgs/clan-app/webview-ui/app/src/api_test.tsx
@@ -0,0 +1,105 @@
+import {
+  createForm,
+  FieldValues,
+  getValues,
+  SubmitHandler,
+} from "@modular-forms/solid";
+import { TextInput } from "@/src/Form/fields/TextInput";
+import { Button } from "./components/button";
+import { callApi } from "./api";
+import { API } from "@/api/API";
+import { createSignal, Match, Switch } from "solid-js";
+import { Typography } from "./components/Typography";
+import { createQuery } from "@tanstack/solid-query";
+import { makePersisted } from "@solid-primitives/storage";
+
+interface APITesterForm extends FieldValues {
+  endpoint: string;
+  payload: string;
+}
+
+export const ApiTester = () => {
+  const [persistedTestData, setPersistedTestData] = makePersisted(
+    createSignal<APITesterForm>(),
+    {
+      name: "_test_data",
+      storage: localStorage,
+    },
+  );
+
+  const [formStore, { Form, Field }] = createForm<APITesterForm>({
+    initialValues: persistedTestData(),
+  });
+
+  const query = createQuery(() => ({
+    // eslint-disable-next-line @tanstack/query/exhaustive-deps
+    queryKey: [],
+    queryFn: async () => {
+      const values = getValues(formStore);
+      return await callApi(
+        values.endpoint as keyof API,
+        JSON.parse(values.payload || ""),
+      );
+    },
+    staleTime: Infinity,
+  }));
+
+  const handleSubmit: SubmitHandler<APITesterForm> = (values) => {
+    console.log(values);
+    setPersistedTestData(values);
+    query.refetch();
+
+    const v = getValues(formStore);
+    console.log(v);
+    // const result = callApi(
+    //   values.endpoint as keyof API,
+    //   JSON.parse(values.payload)
+    // );
+    // setResult(result);
+  };
+  return (
+    <div class="p-2">
+      <h1>API Tester</h1>
+      <Form onSubmit={handleSubmit}>
+        <div class="flex flex-col">
+          <Field name="endpoint">
+            {(field, fieldProps) => (
+              <TextInput
+                label={"endpoint"}
+                value={field.value || ""}
+                inputProps={fieldProps}
+              />
+            )}
+          </Field>
+          <Field name="payload">
+            {(field, fieldProps) => (
+              <TextInput
+                label={"payload"}
+                value={field.value || ""}
+                inputProps={fieldProps}
+              />
+            )}
+          </Field>
+          <Button class="m-2" disabled={query.isFetching}>
+            Send
+          </Button>
+        </div>
+      </Form>
+      <div>
+        <Typography hierarchy="title" size="default">
+          Result
+        </Typography>
+        <Switch>
+          <Match when={query.isFetching}>
+            <span>loading ...</span>
+          </Match>
+          <Match when={query.isFetched}>
+            <pre>
+              <code>{JSON.stringify(query.data, null, 2)}</code>
+            </pre>
+          </Match>
+        </Switch>
+      </div>
+    </div>
+  );
+};
--- a/Show More
+++ b/Show More
				`@@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor"><path d="M21 4h5v30.75h5v5.125h-5V45h-5v-5.125h-5V34.75h5zM11 29.625v5.125h5v-5.125zm0 0V24.5H6v5.125zm25 0v5.125h-5v-5.125zm0 0V24.5h5v5.125z"/></svg>`
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" width="72" height="89" fill="currentColor"><g clip-path="url(#a)"><path d="M57.709 20.105H68.62c1.157 0 2.099-.94 2.099-2.095V9.632a2.1 2.1 0 0 0-2.099-2.095h-3.439c-1.111 0-2.014-.9-2.014-2.01V2.095A2.1 2.1 0 0 0 61.07 0H30.02a2.1 2.1 0 0 0-2.098 2.095v3.432c0 1.11-.903 2.01-2.014 2.01H22.47c-1.157 0-2.098.94-2.098 2.095v3.432c0 1.11-.903 2.01-2.014 2.01h-3.439c-1.157 0-2.099.94-2.099 2.094 0 0-.503-1.272-.503 22.493 0 21.247.503 19.38.503 19.38 0 1.156.942 2.096 2.1 2.096h3.438c1.111 0 2.014.9 2.014 2.01v3.517c0 1.109.902 2.01 2.013 2.01h3.524c1.111 0 2.014.9 2.014 2.01v3.432a2.1 2.1 0 0 0 2.098 2.094h30.211c1.157 0 2.099-.94 2.099-2.094v-3.433c0-1.11.902-2.01 2.013-2.01h5.557c1.158 0 2.099-.94 2.099-2.094v-9.984a2.1 2.1 0 0 0-2.099-2.095h-13.03c-1.157 0-2.098.94-2.098 2.095v5.044c0 1.11-.902 2.01-2.014 2.01H37.488c-1.111 0-2.013-.9-2.013-2.01v-5.11a2.1 2.1 0 0 0-2.099-2.094h-5.119c-1.111 0-1.739.163-2.014-2.01-.085-.698-.13-1.553-.196-2.695-.163-2.878-.307-1.723-.307-10.369 0-12.085.314-15.563.503-17.24.19-1.677.903-2.01 2.014-2.01h5.12c1.156 0 2.098-.94 2.098-2.094v-3.433c0-1.109.902-2.01 2.013-2.01h16.116c1.111 0 2.014.901 2.014 2.01v3.433c0 1.155.94 2.094 2.098 2.094zM18.626 73.757h-2.478a.87.87 0 0 1-.87-.868v-2.473c0-.96-.777-1.743-1.745-1.743H6.838c-.96 0-1.745.777-1.745 1.743v2.473a.87.87 0 0 1-.87.868H1.746c-.961 0-1.746.776-1.746 1.742v6.682c0 .96.778 1.742 1.746 1.742h2.477c.484 0 .87.392.87.868v2.473c0 .96.778 1.743 1.745 1.743h6.695c.961 0 1.746-.777 1.746-1.743v-2.473c0-.483.392-.868.87-.868h2.477c.961 0 1.746-.776 1.746-1.742v-6.682c0-.96-.778-1.742-1.746-1.742"/></g><defs><clipPath id="a"><path d="M0 0h72v89H0z"/></clipPath></defs></svg>