Cache previews in server RAM for much faster access (they are about 70kB each).

Brighter low free space colors.
Auth restricted endpoint is picky about the trailing slash, use it consistently.
2026-02-04 20:56:16 +00:00 · 2026-02-04 20:40:59 +00:00 · 2026-02-04 20:35:29 +00:00 · 2026-02-04 20:24:21 +00:00 · 2026-02-04 20:15:56 +00:00 · 2026-02-04 20:12:49 +00:00
41 changed files with 2475 additions and 740 deletions
@@ -1,156 +1,170 @@
-# Cista Web Storage
-
-<img src="https://git.zi.fi/Vasanko/cista-storage/raw/branch/main/docs/cista.webp" align=left width=250>
-
-Cista takes its name from the ancient *cistae*, metal containers used by Greeks and Egyptians to safeguard valuable items. This modern application provides a browser interface for secure and accessible file storage, echoing the trust and reliability of its historical namesake.
-
-This is a cutting-edge **file and document server** designed for speed, efficiency, and unparalleled ease of use. Experience **lightning-fast browsing**, thanks to the file list maintained directly in your browser and updated from server filesystem events, coupled with our highly optimized code. Fully **keyboard-navigable** and with a responsive layout, Cista flawlessly adapts to your devices, providing a seamless experience wherever you are. Our powerful **instant search** means you're always just a few keystrokes away from finding exactly what you need. Press **1/2/3** to switch ordering, navigate with all four arrow keys (+Shift to select). Or click your way around on **breadcrumbs that remember where you were**.
-
-**Built-in document and media previews** let you quickly view files without downloading them. Cista shows PDF and other documents, video and image thumbnails, with **HDR10 support** video previews and image formats, including HEIC and AVIF. It also has a player for music and video files.
-
-The Cista project started as an inevitable remake of [Droppy](https://github.com/droppyjs/droppy) which we used and loved despite its numerous bugs. Cista Storage stands out in handling even the most exotic filenames, ensuring a smooth experience where others falter.
-
-All of this is wrapped in an intuitive interface with automatic light and dark themes, making Cista Storage the ideal choice for anyone seeking a reliable, versatile, and quick file storage solution. Quickly setup your own Cista where your files are just a click away, safe, and always accessible.
-
-Experience Cista by visiting [Cista Demo](https://drop.zi.fi) for a test run and perhaps upload something...
-
-
-## Getting Started
-### Running the Server
-
-We recommend using [UV](https://docs.astral.sh/uv/getting-started/installation/) to directly run Cista:
-
-Create an account: (otherwise the server is public for all)
-```fish
-uvx cista --user yourname --privileged
-```
-
-Serve your files at http://localhost:8000:
-```fish
-uvx cista -l :8000 /path/to/files
-```
-
-Alternatively, you can install with `pip` or `uv pip`. This enables using the `cista` command directly without `uvx` or `uv run`.
-
-```fish
-pip install cista --break-system-packages
-```
-
-The server remembers its settings in the config folder (default `~/.local/share/cista/`), including the listen port and directory, for future runs without arguments.
-
-## Authentication
-
-Cista supports three authentication modes:
-
-### Built-in Authentication (default)
-
-User accounts are managed directly by Cista. Create users with the `--user` flag:
-
-```fish
-uvx cista --user admin --privileged  # Create admin user
-uvx cista --user guest               # Create regular user
-```
-
-Privileged users can manage other users and change settings via the Admin Settings menu.
-
-### Public Mode
-
-In public mode, anyone can read, send and even delete files without without logging in. Privileged users can still log in via the menu to access admin settings, from where the public mode can be toggled on or off.
-
-### Paskia SSO Authentication
-
-For centralized authentication, Cista can integrate with [Paskia](https://git.zi.fi/LeoVasanko/paskia) SSO server. Set the `PASKIA_BACKEND_URL` environment variable:
-
-```fish
-PASKIA_BACKEND_URL=http://localhost:4401 uvx cista
-```
-
-In Paskia mode:
- All `/auth/*` requests are proxied to the Paskia backend
- Users with `cista:login` permission can access files
- Users with `cista:admin` permission get privileged access (Admin Settings)
- Public mode works with Paskia: unauthenticated users can browse, while the menu has option to login
-
-### Internet Access
-
-Most admins find the [Caddy](https://caddyserver.com/) web server convenient for its auto TLS certificates and all. A proxy also allows running multiple web services or Cista instances on the same IP address but different (sub)domains.
-
-`/etc/caddy/Caddyfile`:
-
-```Caddyfile
-cista.example.com {
-    reverse_proxy :8000
-}
-```
-
-Nxing or other proxy may be similarly used, or alternatively you can place cert and key in cista config dir and run `cista -l cista.example.com`
-
-## System Deployment
-
-This setup allows easy addition of storages, each with its own domain, configuration, and files.
-
-Assuming a restricted user account `storage` for serving files and that UV is installed system-wide or on this account. Only UV is required: this does not use git or bun/npm.
-
-Create `/etc/systemd/system/cista@.service`:
-
-```ini
-[Unit]
-Description=Cista storage %i
-
-[Service]
-User=storage
-ExecStart=uvx cista -c /srv/cista/%i -l /srv/cista/%i/socket /media/storage/%i
-Restart=always
-
-[Install]
-WantedBy=multi-user.target
-```
-
-This setup supports multiple storages, each under `/media/storage/<domain>` for files and `/srv/cista/<domain>/` for configuration. UNIX sockets are used instead of numeric ports for convenience.
-
-```fish
-systemctl daemon-reload
-systemctl enable --now cista@foo.example.com
-systemctl enable --now cista@bar.example.com
-```
-
-Public exposure is easiest using the Caddy web server.
-
-`/etc/caddy/Caddyfile`:
-
-```Caddyfile
-foo.example.com, bar.example.com {
-    reverse_proxy unix//srv/cista/{host}/socket
-}
-```
-
-## Development setup
-
-For rapid development, we use the Vite development server for the Vue frontend, while running the backend on port 8000 that Vite proxies backend requests to. Each server live reloads whenever its code or configuration are modified.
-
-Make sure you have git, uv and bun (or npm) installed.
-
-Backend (Python) – setup and run:
-
-```fish
-git clone https://git.zi.fi/Vasanko/cista-storage.git
-cd cista-storage
-uv sync --dev
-uv run cista --dev -l :8000 /path/to/files
-```
-
-Frontend (Vue/Vite) – run the dev server in another terminal:
-
-```fish
-cd frontend
-bun install
-bun run dev
-```
-
-Building the package for release (frontend + Python wheel/sdist):
-
-```fish
-uv build
-```
-
-Vue is used to build files in `cista/wwwroot`, included prebuilt in the Python package. `uv build` runs the project build hooks to bundle the frontend and produce a NodeJS-independent Python package.
+# Cista Web Storage
+
+<img src="https://git.zi.fi/Vasanko/cista-storage/raw/branch/main/docs/cista.webp" align=left width=250>
+
+Cista takes its name from the ancient *cistae*, metal containers used by Greeks and Egyptians to safeguard valuable items. This modern application provides a browser interface for secure and accessible file storage, echoing the trust and reliability of its historical namesake.
+
+This is a cutting-edge **file and document server** designed for speed, efficiency, and unparalleled ease of use. Experience **lightning-fast browsing**, thanks to the file list maintained directly in your browser and updated from server filesystem events, coupled with our highly optimized code. Fully **keyboard-navigable** and with a responsive layout, Cista flawlessly adapts to your devices, providing a seamless experience wherever you are. Our powerful **instant search** means you're always just a few keystrokes away from finding exactly what you need. Press **1/2/3** to switch ordering, navigate with all four arrow keys (+Shift to select). Or click your way around on **breadcrumbs that remember where you were**.
+
+**Built-in document and media previews** let you quickly view files without downloading them. Cista shows PDF and other documents, video and image thumbnails, with **HDR10 support** video previews and image formats, including HEIC and AVIF. It also has a player for music and video files.
+
+The Cista project started as an inevitable remake of [Droppy](https://github.com/droppyjs/droppy) which was not being developed at the time. Now they have picked up pace too, feel free to try both and compare.
+
+All of this is wrapped in an intuitive interface with automatic light and dark themes, making Cista Storage the ideal choice for anyone seeking a reliable, versatile, and quick file storage solution. Quickly setup your own Cista where your files are just a click away, safe, and always accessible.
+
+Experience Cista by visiting [Cista Demo](https://drop.zi.fi) for a test run and perhaps upload something...
+
+
+## Getting Started
+### Running the Server
+
+We recommend using [UV](https://docs.astral.sh/uv/getting-started/installation/) to directly run Cista:
+
+Create an account: (otherwise the server is public for all)
+```fish
+uvx cista --user yourname --privileged
+```
+
+Serve your files at http://localhost:8000:
+```fish
+uvx cista -l :8000 /path/to/files
+```
+
+Alternatively, you can install with `pip` or `uv pip`. This enables using the `cista` command directly without `uvx` or `uv run`.
+
+```fish
+pip install cista --break-system-packages
+```
+
+The server remembers its settings in the config folder (default `~/.local/share/cista/`), including the listen port and directory, for future runs without arguments.
+
+## Authentication
+
+Cista supports two authenticatioon mode, each of which supporting ordinary and privileged users. Either one can be combined with the public mode.
+
+### Public Mode
+
+In public mode, anyone can read, send and even delete files without without logging in. Users entering the service won't be asked to authenticate. Privileged users can still log in via the menu to access admin settings, from where the public mode can be toggled on or off.
+
+### Built-in Password Authentication (default)
+
+User accounts are managed directly by Cista. Create users with the `--user` flag:
+
+```fish
+uvx cista --user admin --privileged  # Create admin user
+uvx cista --user guest               # Create regular user
+```
+
+Privileged users can manage other users and change settings via the Admin Settings menu.
+
+### Passkey Authentication and SSO
+
+For centralized authentication, Cista can integrate with [Paskia](https://git.zi.fi/LeoVasanko/paskia) SSO server. This allows user account and permission management at the corporate level, without bothering Cista with it.
+
+Set the `PASKIA_BACKEND_URL` environment variable:
+
+```fish
+PASKIA_BACKEND_URL=http://localhost:4401 uvx cista
+```
+
+Run the Paskia backend on the same machine (to use that default URL):
+```fish
+uvx paskia
+```
+
+In Paskia mode:
+- All `/auth/*` requests are proxied to the Paskia backend
+- Cista backend verifies access by `/auth/api/validate` endpoint and shows a login dialog if needed
+- Users with `cista:login` permission can access files
+- Users with `cista:admin` permission get privileged access (Admin Settings)
+
+### Internet Access
+
+Most admins find the [Caddy](https://caddyserver.com/) web server convenient for its auto TLS certificates and all. A proxy also allows running multiple web services or Cista instances on the same IP address but different (sub)domains.
+
+`/etc/caddy/Caddyfile`:
+
+```Caddyfile
+cista.example.com {
+    reverse_proxy :8000
+}
+```
+
+Nxing or other proxy may be similarly used, or alternatively you can place cert and key in cista config dir and run `cista -l cista.example.com`
+
+## System Deployment
+
+This setup allows easy addition of storages, each with its own domain, configuration, and files.
+
+Assuming a restricted user account `storage` for serving files and that UV is installed system-wide or on this account. Only UV is required: this does not use git or javascript runtimes.
+
+Create (edit) a systemd unit:
+
+```fish
+sudo systemctl edit --force --full cista@.service
+```
+
+Paste the following:
+
+```ini
+[Unit]
+Description=Cista storage %i
+
+[Service]
+User=storage
+ExecStart=uvx cista -c /srv/cista/%i -l /srv/cista/%i/socket /media/storage/%i
+Restart=always
+#Environment=PASKIA_BACKEND_URL=http://localhost:4401
+
+[Install]
+WantedBy=multi-user.target
+```
+
+This setup supports multiple storages, each under `/media/storage/<domain>` for files and `/srv/cista/<domain>/` for configuration. UNIX sockets are used instead of numeric ports for convenience.
+
+```fish
+systemctl daemon-reload
+systemctl enable --now cista@foo.example.com
+systemctl enable --now cista@bar.example.com
+```
+
+Public exposure is easiest using the Caddy web server.
+
+`/etc/caddy/Caddyfile`:
+
+```Caddyfile
+foo.example.com, bar.example.com {
+    reverse_proxy unix//srv/cista/{host}/socket
+}
+```
+
+## Development setup
+
+For rapid development, we use the Vite development server for the Vue frontend, while running the backend on port 8000 that Vite proxies backend requests to. Each server live reloads whenever its code or configuration are modified.
+
+Make sure you have git, uv and bun (or npm) installed.
+
+Backend (Python) – setup and run:
+
+```fish
+git clone https://git.zi.fi/Vasanko/cista-storage.git
+cd cista-storage
+uv sync --dev
+uv run cista --dev -l :8000 /path/to/files
+```
+
+Frontend (Vue/Vite) – run the dev server in another terminal:
+
+```fish
+cd frontend
+bun install
+bun run dev
+```
+
+Building the package for release (frontend + Python wheel/sdist):
+
+```fish
+uv build
+```
+
+Vue is used to build files in `cista/frontend-build`, included prebuilt in the Python package. `uv build` runs the project build hooks to bundle the frontend and produce a NodeJS-independent Python package.
@@ -25,14 +25,22 @@ def create_banner():
 """


-def create_startup_box(*, folder, url, unix=None, dev=False, paskia_url=None):
+def create_startup_box(
+    *, folder, url, unix=None, dev=False, paskia_url=None, public=False
+):
    """Create a framed startup box with server information."""
    title = f"Cista {cista.__version__}"
-    listen = f"{url} ({unix})" if unix else url
+    listen = unix if unix else url
    location = f"{folder} @ {listen}"
    lines = [title, location]
+    # Auth line: Paskia <url> or Password, with optional Public suffix
    if paskia_url:
-        lines.append(f"Paskia: {paskia_url}")
+        auth_line = f"Auth: Paskia {paskia_url}"
+    else:
+        auth_line = "Auth: Password"
+    if public:
+        auth_line += ", Public"
+    lines.append(auth_line)
    if dev:
        lines.append("dev mode")

@@ -57,7 +65,7 @@ Usage:
 Options:
  -c CONFDIR        Custom config directory
  -l LISTEN-ADDR    Listen on
-                       :8000 (localhost port, plain http)
+                       :8989 (localhost port, plain http)
                       <addr>:3000 (bind another address, port)
                       /path/to/unix.sock (unix socket)
                       example.com (run on 80 and 443 with LetsEncrypt)
@@ -80,7 +88,7 @@ Environment:
 first_time_help = """\
 No config file found! Get started with:
  cista --user yourname --privileged     # If you want user accounts
-  cista -l :8000 /path/to/files          # Run the server on localhost:8000
+  cista -l :8989 /path/to/files          # Run the server on localhost:8989

 See cista --help for other options!
 """
@@ -140,8 +148,8 @@ def _main():
    if listen:
        settings["listen"] = listen
    elif not exists:
-        settings["listen"] = ":8000"
-    operation = config.update_config(settings)
+        settings["listen"] = ":8989"
+    config.update_config(settings)
    # Prepare to serve
    url, opts = serve.parse_listen(config.config.listen)
    if not config.config.path.is_dir():
@@ -157,6 +165,7 @@ def _main():
        unix=opts.get("unix"),
        dev=dev,
        paskia_url=PASKIA_BACKEND_URL or None,
+        public=config.config.public,
    )
    sys.stderr.write(startup_box)
    # Run the server
@@ -186,7 +195,7 @@ def _user(args):
        # Defaults for new config when user is created
        operation = config.update_config(
            {
-                "listen": ":8000",
+                "listen": ":8989",
                "path": Path.home() / "Downloads",
                "public": False,
            }
@@ -215,7 +224,7 @@ def _user(args):

    if operation == "created":
        sys.stderr.write(
-            "Now you can run the server:\n  cista    # defaults set: -l :8000 ~/Downloads\n"
+            "Now you can run the server:\n  cista    # defaults set: -l :8989 ~/Downloads\n"
        )


@@ -1,5 +1,6 @@
 import asyncio
 import typing
+from pathlib import PurePosixPath
 from secrets import token_bytes

 import msgspec
@@ -53,6 +54,9 @@ async def upload(req, ws):
        if pos != req.end:
            d = f"{len(data)} bytes" if isinstance(data, bytes) else data
            raise ValueError(f"Expected {req.end - pos} more bytes, got {d}")
+        # Signal the watcher about the uploaded file and its parent directories
+        path = PurePosixPath(req.name)
+        watching.notify_change(path, *path.parents)
        # Report success
        res = StatusMsg(status="ack", req=req)
        await asend(ws, res)
@@ -87,6 +91,8 @@ async def control(req, ws):
    while True:
        cmd = msgspec.json.decode(await ws.recv(), type=ControlTypes)
        await asyncio.to_thread(cmd)
+        # Signal the watcher about affected paths
+        watching.notify_change(*cmd.affected_paths())
        await asend(ws, StatusMsg(status="ack", req=cmd))


@@ -157,6 +163,17 @@ def subscribe(uuid, ws):
        )


+@bp.get("config")
+async def get_config(request):
+    await auth.verify(request, privileged=True)
+    return json(
+        {
+            "name": config.config.name,
+            "public": config.config.public,
+        }
+    )
+
+
@bp.put("config/public")
 async def update_public(request):
    await auth.verify(request, privileged=True)
@@ -170,3 +187,20 @@ async def update_public(request):
        raise BadRequest(str(e)) from None
    config.update_config({"public": public})
    return json({"message": "Public access setting updated", "public": public})
+
+
+@bp.put("config/name")
+async def update_name(request):
+    await auth.verify(request, privileged=True)
+    try:
+        name = request.json["name"]
+        if not isinstance(name, str):
+            raise ValueError("name must be a string")
+    except KeyError:
+        raise BadRequest("Missing name field") from None
+    except ValueError as e:
+        raise BadRequest(str(e)) from None
+    config.update_config({"name": name})
+    # Return the effective name (fallback to path.name if empty)
+    effective_name = name or config.config.path.name
+    return json({"message": "Server name updated", "name": effective_name})
@@ -1,7 +1,6 @@
 import asyncio
 import datetime
 import mimetypes
-import threading
 from concurrent.futures import ThreadPoolExecutor
 from multiprocessing import cpu_count
 from pathlib import Path, PurePath, PurePosixPath
@@ -56,7 +55,6 @@ async def main_start(app):
 # Sanic sometimes fails to execute after_server_stop, so we do it before instead (potentially interrupting handlers)
@app.before_server_stop
 async def main_stop(app):
-    quit.set()
    watching.stop(app)
    app.ctx.threadexec.shutdown()
    app.ctx.zipexec.shutdown(cancel_futures=True)
@@ -174,9 +172,8 @@ def _load_wwwroot(www):

@app.before_server_start
 async def start(app):
-    await load_wwwroot(app)
-    if app.debug:
-        app.add_task(refresh_wwwroot(), name="refresh_wwwroot")
+    if not app.debug:
+        await load_wwwroot(app)


 async def load_wwwroot(app):
@@ -186,36 +183,14 @@ async def load_wwwroot(app):
    )


-quit = threading.Event()
-
-
-async def refresh_wwwroot():
-    try:
-        while not quit.is_set():
-            try:
-                wwwold = www
-                await load_wwwroot(app)
-                changes = ""
-                for name in sorted(www):
-                    attr = www[name]
-                    if wwwold.get(name) == attr:
-                        continue
-                    headers = attr[2]
-                    changes += f"{headers['last-modified']} {headers['etag']} /{name}\n"
-                for name in sorted(set(wwwold) - set(www)):
-                    changes += f"Deleted /{name}\n"
-                if changes:
-                    logger.info(f"Updated wwwroot:\n{changes}", end="", flush=True)
-            except Exception as e:
-                logger.error(f"Error loading wwwroot: {e!r}")
-            await asyncio.sleep(0.5)
-    except asyncio.CancelledError:
-        pass
-
-
@app.route("/<path:path>", methods=["GET", "HEAD"])
 async def wwwroot(req, path=""):
    """Frontend files only"""
+    if app.debug:
+        raise NotFound(
+            "Dev mode: frontend-build is not served on backend (you should connect vite)",
+            extra={"name": path},
+        )
    name = unquote(path)
    if name not in www:
        raise NotFound(f"File not found: /{path}", extra={"name": name})
@@ -269,7 +269,7 @@ async def verify(request, *, privileged=False):
    raise Unauthorized(
        f"Login required for {request.path}",
        "cookie",
-        context={"auth": {"iframe": "/auth/restricted"}},
+        context={"auth": {"iframe": "/auth/restricted/"}},
        quiet=True,
    )

@@ -278,7 +278,7 @@ async def verify(request, *, privileged=False):
 bp = Blueprint("auth", url_prefix="/auth")


-@bp.get("/restricted")
+@bp.get("/restricted/")
 async def login_page(request):
    """Login page that works both standalone and in paskia iframe."""
    s = session.get(request)
@@ -2,7 +2,10 @@ import asyncio
 import gc
 import io
 import mimetypes
+import threading
 import urllib.parse
+from collections import OrderedDict
+from dataclasses import dataclass
 from pathlib import PurePosixPath
 from time import perf_counter
 from urllib.parse import unquote
@@ -25,6 +28,48 @@ pillow_heif.register_heif_opener()
 bp = Blueprint("preview", url_prefix="/preview")


+@dataclass(slots=True)
+class CachedPreview:
+    """Cached preview with headers and body."""
+    headers: dict[str, str]
+    body: bytes
+
+
+class PreviewCache:
+    """Thread-safe LRU cache for preview responses."""
+
+    def __init__(self, capacity: int = 500):
+        self.capacity = capacity
+        self._cache: OrderedDict[str, CachedPreview] = OrderedDict()
+        self._lock = threading.Lock()
+
+    def get(self, key: str) -> CachedPreview | None:
+        """Get cached preview, moving it to end (most recently used)."""
+        with self._lock:
+            if key in self._cache:
+                self._cache.move_to_end(key)
+                return self._cache[key]
+        return None
+
+    def set(self, key: str, value: CachedPreview) -> None:
+        """Cache preview, evicting oldest if at capacity."""
+        with self._lock:
+            if key in self._cache:
+                self._cache.move_to_end(key)
+            else:
+                if len(self._cache) >= self.capacity:
+                    self._cache.popitem(last=False)
+                self._cache[key] = value
+
+    def __len__(self) -> int:
+        with self._lock:
+            return len(self._cache)
+
+
+# Global preview cache instance
+_preview_cache = PreviewCache(capacity=500)
+
+
@bp.on_request
 async def verify_preview(request):
    """Verify access to preview routes."""
@@ -55,6 +100,29 @@ async def preview(req, path):
    etag = config.derived_secret(
        "preview", rel, stat.st_mtime_ns, quality, maxsize, maxzoom
    ).hex()
+
+    if req.headers.if_none_match == etag:
+        # The client has it cached, respond 304 Not Modified
+        return empty(304, headers={"etag": etag})
+
+    # Check in-memory cache first (includes headers)
+    cached = _preview_cache.get(etag)
+    if cached is not None:
+        logger.debug(f"Preview cache hit: {rel}")
+        return raw(cached.body, headers=cached.headers)
+
+    if not filepath.is_file():
+        raise NotFound("File not found")
+
+    # Generate preview
+    img = await asyncio.get_event_loop().run_in_executor(
+        req.app.ctx.threadexec, dispatch, filepath, quality, maxsize, maxzoom
+    )
+    if not img:
+        # Preview generation failed, redirect to the file itself
+        return redirect(f"/files/{path}", status=303)
+
+    # Build headers and cache the full response
    savename = PurePosixPath(filepath.name).with_suffix(".avif")
    headers = {
        "etag": etag,
@@ -64,19 +132,8 @@ async def preview(req, path):
        "content-type": "image/avif",
        "content-disposition": f"inline; filename*=UTF-8''{urllib.parse.quote(savename.as_posix())}",
    }
-    if req.headers.if_none_match == etag:
-        # The client has it cached, respond 304 Not Modified
-        return empty(304, headers=headers)
+    _preview_cache.set(etag, CachedPreview(headers=headers, body=img))

-    if not filepath.is_file():
-        raise NotFound("File not found")
-
-    img = await asyncio.get_event_loop().run_in_executor(
-        req.app.ctx.threadexec, dispatch, filepath, quality, maxsize, maxzoom
-    )
-    if not img:
-        # Preview generation failed, redirect to the file itself
-        return redirect(f"/files/{path}", status=303)
    return raw(img, headers=headers)


@@ -89,9 +146,9 @@ def dispatch(path, quality, maxsize, maxzoom):
            return process_video(path, quality=quality, maxsize=maxsize)
        return process_image(path, quality=quality, maxsize=maxsize)
    except ValueError as e:
-        logger.warning(f"Cannot generate preview for {path.name}: {e}")
+        logger.warning(f"Cannot generate preview for {path}: {e}")
    except Exception as e:
-        logger.exception(f"Error generating preview for {path.name}: {e}")
+        logger.exception(f"Error generating preview for {path}: {e}")


 def process_image(path, *, maxsize, quality):
@@ -1,6 +1,7 @@
 from __future__ import annotations

 import shutil
+from pathlib import PurePosixPath
 from typing import Any

 import msgspec
@@ -16,6 +17,10 @@ class ControlBase(msgspec.Struct, tag_field="op", tag=str.lower):
    def __call__(self):
        raise NotImplementedError

+    def affected_paths(self) -> list[str]:
+        """Return list of paths affected by this operation for change notification."""
+        return []
+

 class MkDir(ControlBase):
    path: str
@@ -24,6 +29,9 @@ class MkDir(ControlBase):
        path = config.config.path / filename.sanitize(self.path)
        path.mkdir(parents=True, exist_ok=False)

+    def affected_paths(self) -> list[str]:
+        return [filename.sanitize(self.path)]
+

 class Rename(ControlBase):
    path: str
@@ -36,6 +44,11 @@ class Rename(ControlBase):
        path = config.config.path / filename.sanitize(self.path)
        path.rename(path.with_name(to))

+    def affected_paths(self) -> list[str]:
+        sanitized = filename.sanitize(self.path)
+        new_path = str(PurePosixPath(sanitized).with_name(filename.sanitize(self.to)))
+        return [sanitized, new_path]
+

 class Rm(ControlBase):
    sel: list[str]
@@ -49,6 +62,9 @@ class Rm(ControlBase):
            else:
                p.unlink()

+    def affected_paths(self) -> list[str]:
+        return [filename.sanitize(p) for p in self.sel]
+

 class Mv(ControlBase):
    sel: list[str]
@@ -63,6 +79,13 @@ class Mv(ControlBase):
        for p in sel:
            shutil.move(p, dst)

+    def affected_paths(self) -> list[str]:
+        dst = filename.sanitize(self.dst)
+        paths = [filename.sanitize(p) for p in self.sel]
+        # Include new locations in dst
+        paths.extend(f"{dst}/{PurePosixPath(p).name}" for p in self.sel)
+        return paths
+

 class Cp(ControlBase):
    sel: list[str]
@@ -86,6 +109,11 @@ class Cp(ControlBase):
            else:
                shutil.copy2(p, dst)

+    def affected_paths(self) -> list[str]:
+        dst = filename.sanitize(self.dst)
+        # Only destinations are new (sources unchanged)
+        return [f"{dst}/{PurePosixPath(filename.sanitize(p)).name}" for p in self.sel]
+

 ControlTypes = MkDir | Rename | Rm | Mv | Cp

@@ -118,6 +146,7 @@ class FileEntry(msgspec.Struct, array_like=True, frozen=True):
    key: str
    mtime: int
    size: int
+    allocated: int
    isfile: int

    def __str__(self):
@@ -149,5 +178,6 @@ class UpdateMessage(msgspec.Struct):
 class Space(msgspec.Struct):
    disk: int
    free: int
-    usage: int
+    used: int
    storage: int
+    allocated: int
@@ -2,6 +2,7 @@ import os
 import re
 from pathlib import Path

+from fastapi_vue.hostutil import parse_endpoint
 from sanic import Sanic

 from cista import config, server80
@@ -44,18 +45,28 @@ def check_cert(certdir, domain):


 def parse_listen(listen):
-    if listen.startswith("/"):
-        unix = Path(listen).resolve()
+    # Domain name (e.g. example.com) -> HTTPS with LetsEncrypt
+    if re.fullmatch(r"(\w+(-\w+)*\.)+\w{2,}", listen, re.UNICODE):
+        return f"https://{listen}", {"host": listen, "port": 443, "ssl": True}
+
+    # Use fastapi_vue's parse_endpoint for everything else
+    endpoints = parse_endpoint(listen, default_port=8989)
+    ep = endpoints[0]
+
+    if "uds" in ep:
+        unix = Path(ep["uds"]).resolve()
        if not unix.parent.exists():
            raise ValueError(
                f"Directory for unix socket does not exist: {unix.parent}/",
            )
        return "http://localhost", {"unix": unix.as_posix()}
-    if re.fullmatch(r"(\w+(-\w+)*\.)+\w{2,}", listen, re.UNICODE):
-        return f"https://{listen}", {"host": listen, "port": 443, "ssl": True}
-    try:
-        addr, _port = listen.split(":", 1)
-        port = int(_port)
-    except Exception:
-        raise ValueError(f"Invalid listen address: {listen}") from None
-    return f"http://localhost:{port}", {"host": addr, "port": port}
+
+    host, port = ep["host"], ep["port"]
+    # When binding all interfaces, use single_listener=False for Sanic
+    if len(endpoints) > 1:
+        return f"http://localhost:{port}", {
+            "host": host,
+            "port": port,
+            "single_listener": False,
+        }
+    return f"http://{host}:{port}", {"host": host, "port": port}
@@ -1,4 +1,5 @@
 import asyncio
+import queue
 import shutil
 import sys
 import threading
@@ -23,7 +24,7 @@ sortkey = natsort_keygen(alg=ns.LOCALE)
 class State:
    def __init__(self):
        self.lock = threading.RLock()
-        self._space = Space(0, 0, 0, 0)
+        self._space = Space(0, 0, 0, 0, 0)
        self.root: list[FileEntry] = []

    @property
@@ -116,6 +117,28 @@ state = State()
 rootpath: Path = None  # type: ignore
 quit = threading.Event()

+# Thread-safe queue for signaling path updates from websockets
+_update_queue: queue.Queue[PurePosixPath] = queue.Queue()
+
+
+def notify_change(*paths: PurePosixPath | str):
+    """Signal that paths have changed. Called from control/upload websockets."""
+    for path in paths:
+        if isinstance(path, str):
+            path = PurePosixPath(path)
+        # Convert absolute paths to relative (strip leading /)
+        if path.is_absolute():
+            path = (
+                PurePosixPath(*path.parts[1:])
+                if len(path.parts) > 1
+                else PurePosixPath()
+            )
+        # Skip root paths (empty, '.') to avoid full tree walks
+        if not path.parts or path.parts == (".",):
+            continue
+        _update_queue.put(path)
+
+
 ## Filesystem scanning


@@ -125,12 +148,15 @@ def walk(rel: PurePosixPath, stat: stat_result | None = None) -> list[FileEntry]
    try:
        st = stat or path.stat()
        isfile = int(not S_ISDIR(st.st_mode))
+        # st_blocks is in 512-byte units
+        allocated = st.st_blocks * 512 if isfile else 0
        entry = FileEntry(
            level=len(rel.parts),
            name=rel.name,
            key=fuid(st),
            mtime=int(st.st_mtime),
            size=st.st_size if isfile else 0,
+            allocated=allocated,
            isfile=isfile,
        )
        if isfile:
@@ -158,8 +184,9 @@ def walk(rel: PurePosixPath, stat: stat_result | None = None) -> list[FileEntry]
                level=entry.level,
                name=entry.name,
                key=entry.key,
-                size=entry.size + child.size,
                mtime=max(entry.mtime, child.mtime),
+                size=entry.size + child.size,
+                allocated=entry.allocated + child.allocated,
                isfile=entry.isfile,
            )
            ret.extend(sub)
@@ -204,7 +231,14 @@ def update_path(rootmod: list[FileEntry], relpath: PurePosixPath, loop):
 def update_space(loop):
    """Called periodically to update the disk usage."""
    du = shutil.disk_usage(rootpath)
-    space = Space(*du, storage=state.root[0].size)
+    root = state.root[0]
+    space = Space(
+        disk=du.total,
+        free=du.free,
+        used=du.used,
+        storage=root.size,
+        allocated=root.allocated,
+    )
    # Update only on difference above 1 MB
    tol = 10**6
    old = msgspec.structs.astuple(state.space)
@@ -326,127 +360,431 @@ def format_root(root):


 def broadcast(msg, loop):
-    return asyncio.run_coroutine_threadsafe(abroadcast(msg), loop).result()
+    fut = asyncio.run_coroutine_threadsafe(abroadcast(msg), loop)
+    return fut.result()


 async def abroadcast(msg):
+    client_count = 0
    try:
        for queue in pubsub.values():
            queue.put_nowait(msg)
+            client_count += 1
    except Exception:
        # Log because asyncio would silently eat the error
        logger.exception("Broadcast error")
+    return client_count


 ## Watcher thread


-def watcher_inotify(loop):
-    """Inotify watcher thread (Linux only)"""
-    import inotify.adapters
+class PathIndex:
+    """O(1) path lookup index for the flat FileEntry tree."""
+
+    def __init__(self, root: list[FileEntry]):
+        self.root = root
+        self._index: dict[PurePosixPath, tuple[int, int]] = {}
+        self._rebuild()
+
+    def _rebuild(self):
+        """Build path -> (start_idx, count) mapping in single O(n) pass."""
+        index: dict[PurePosixPath, tuple[int, int]] = {}
+        path_stack: list[tuple[PurePosixPath, int]] = []  # (path, start_idx)
+
+        for i, entry in enumerate(self.root):
+            # Pop completed paths from stack
+            while path_stack and entry.level <= len(path_stack[-1][0].parts):
+                completed_path, start_idx = path_stack.pop()
+                index[completed_path] = (start_idx, i - start_idx)
+
+            # Build current path
+            if entry.level == 0:
+                current_path = PurePosixPath()
+            else:
+                parent = path_stack[-1][0] if path_stack else PurePosixPath()
+                current_path = parent / entry.name
+
+            path_stack.append((current_path, i))
+
+        # Close remaining paths
+        for path, start_idx in path_stack:
+            index[path] = (start_idx, len(self.root) - start_idx)
+
+        self._index = index
+
+    def get(self, path: PurePosixPath) -> tuple[int | None, list[FileEntry]]:
+        """O(1) lookup: returns (start_idx, entries) or (None, [])."""
+        if path not in self._index:
+            return None, []
+        start, count = self._index[path]
+        return start, self.root[start : start + count]
+
+    def find_insert_pos(self, path: PurePosixPath, isfile: int) -> int:
+        """Find insertion position using index + binary search."""
+        if not path.parts:
+            return 0
+
+        parent = path.parent
+        name = path.name
+
+        # Find parent's range
+        if parent == PurePosixPath():
+            # Insert at root level - scan root's direct children
+            start, count = 0, len(self.root)
+            target_level = 1
+        elif parent in self._index:
+            start, count = self._index[parent]
+            start += 1  # Skip parent entry itself
+            count -= 1
+            target_level = len(parent.parts) + 1
+        else:
+            # Parent doesn't exist, shouldn't happen
+            return len(self.root)
+
+        # Binary search among direct children at target_level
+        # Collect children indices first
+        children = []
+        i = start
+        end = start + count
+        while i < end:
+            entry = self.root[i]
+            if entry.level == target_level:
+                children.append(i)
+            i += 1
+
+        if not children:
+            return start
+
+        # Binary search for insertion point
+        nsort = sortkey(name)
+        lo, hi = 0, len(children)
+        while lo < hi:
+            mid = (lo + hi) // 2
+            idx = children[mid]
+            entry = self.root[idx]
+            ename = entry.name
+            esort = sortkey(ename)
+            # Compare: isfile, then sort key, then case-sensitive
+            cmp = (
+                entry.isfile - isfile
+                or (esort > nsort) - (esort < nsort)
+                or (ename > name) - (ename < name)
+            )
+            if cmp < 0:
+                lo = mid + 1
+            else:
+                hi = mid
+
+        if lo < len(children):
+            return children[lo]
+        elif children:
+            # Insert after last child's subtree
+            last_idx = children[-1]
+            last_entry = self.root[last_idx]
+            if last_entry.isfile:
+                return last_idx + 1
+            # Find end of last child's subtree
+            last_path = parent / last_entry.name
+            if last_path in self._index:
+                s, c = self._index[last_path]
+                return s + c
+            return last_idx + 1
+        return start
+
+    def apply_update(
+        self, path: PurePosixPath, new_entries: list[FileEntry]
+    ) -> list[FileEntry]:
+        """Apply an update and return the new root. Rebuilds index."""
+        start, old_entries = self.get(path)
+
+        if old_entries == new_entries:
+            return self.root
+
+        new_root = self.root[:]
+
+        if start is not None:
+            del new_root[start : start + len(old_entries)]
+
+        if new_entries:
+            # Rebuild index on modified list to find insert pos
+            self.root = new_root
+            self._rebuild()
+            insert_pos = self.find_insert_pos(path, new_entries[0].isfile)
+            new_root[insert_pos:insert_pos] = new_entries
+
+        self.root = new_root
+        self._rebuild()
+
+        # Recalculate sizes for ancestor folders (including root)
+        self._recalculate_ancestors(path)
+
+        return new_root
+
+    def _recalculate_ancestors(self, path: PurePosixPath):
+        """Recalculate size/allocated for all ancestors of path, including root."""
+        # Build list of ancestors from deepest to root
+        ancestors = []
+        current = path.parent if path.parts else PurePosixPath()
+        while True:
+            ancestors.append(current)
+            if not current.parts:
+                break
+            current = current.parent
+
+        # Process from deepest ancestor to root
+        for ancestor_path in ancestors:
+            if ancestor_path not in self._index:
+                continue
+            start, count = self._index[ancestor_path]
+            if count == 0:
+                continue
+
+            ancestor = self.root[start]
+            if ancestor.isfile:
+                continue  # Files don't aggregate
+
+            # Sum size/allocated of direct children
+            total_size = 0
+            total_allocated = 0
+            i = start + 1
+            while i < start + count:
+                child = self.root[i]
+                if child.level == ancestor.level + 1:
+                    total_size += child.size
+                    total_allocated += child.allocated
+                    # Skip child's subtree
+                    child_path = ancestor_path / child.name
+                    if child_path in self._index:
+                        _, child_count = self._index[child_path]
+                        i += child_count
+                    else:
+                        i += 1
+                else:
+                    i += 1
+
+            # Update ancestor entry if changed
+            if ancestor.size != total_size or ancestor.allocated != total_allocated:
+                self.root[start] = FileEntry(
+                    level=ancestor.level,
+                    name=ancestor.name,
+                    key=ancestor.key,
+                    mtime=ancestor.mtime,
+                    size=total_size,
+                    allocated=total_allocated,
+                    isfile=ancestor.isfile,
+                )
+
+
+def collapse_paths(paths: set[PurePosixPath]) -> set[PurePosixPath]:
+    """Remove child paths if parent is in set."""
+    if not paths:
+        return paths
+    # Filter out root paths (empty or '.') which would cause full tree walks
+    paths = {p for p in paths if p.parts and p.parts != (".",)}
+    if not paths:
+        return set()
+    # Sort by depth (fewest parts first)
+    sorted_paths = sorted(paths, key=lambda p: len(p.parts))
+    result = set()
+    for path in sorted_paths:
+        # Check if any ancestor is already in result
+        is_child = False
+        for i in range(len(path.parts)):
+            ancestor = PurePosixPath(*path.parts[:i]) if i > 0 else PurePosixPath()
+            if ancestor in result:
+                is_child = True
+                break
+        if not is_child:
+            result.add(path)
+    return result
+
+
+# Debounce settings
+DEBOUNCE_DELAY = 0.01  # Wait 10ms after last event
+DEBOUNCE_MAX = 0.1  # But no more than 100ms total
+
+
+def watcher(loop):
+    """Unified watcher thread handling inotify, websocket signals, and periodic scans."""
+    use_inotify = sys.platform == "linux"
+    inotify_tree = None
+    modified_flags = frozenset()
+
+    if use_inotify:
+        import inotify.adapters
+
+        modified_flags = frozenset(
+            (
+                "IN_CREATE",
+                "IN_DELETE",
+                "IN_DELETE_SELF",
+                "IN_MODIFY",
+                "IN_MOVE_SELF",
+                "IN_MOVED_FROM",
+                "IN_MOVED_TO",
+            )
+        )

-    modified_flags = (
-        "IN_CREATE",
-        "IN_DELETE",
-        "IN_DELETE_SELF",
-        "IN_MODIFY",
-        "IN_MOVE_SELF",
-        "IN_MOVED_FROM",
-        "IN_MOVED_TO",
-    )
    while not quit.is_set():
-        i = inotify.adapters.InotifyTree(rootpath.as_posix())
+        if use_inotify:
+            import inotify.adapters
+
+            inotify_tree = inotify.adapters.InotifyTree(rootpath.as_posix())
+
        # Initialize the tree from filesystem
        update_root(loop)
+        path_index = PathIndex(state.root[:])
+
        trefresh = time.monotonic() + 300.0
        tspace = time.monotonic() + 5.0
-        # Watch for changes (frequent wakeups needed for quiting)
-        while not quit.is_set():
-            t = time.monotonic()
-            # The watching is not entirely reliable, so do a full refresh every 30 seconds
-            if t >= trefresh:
-                break
-            # Disk usage update
-            if t >= tspace:
-                tspace = time.monotonic() + 5.0
-                update_space(loop)
-            # Inotify events, update the tree
-            dirty = False
-            rootmod = state.root[:]
-            for event in i.event_gen(yield_nones=False, timeout_s=0.1):
-                assert event
-                if quit.is_set():
-                    return
-                interesting = any(f in modified_flags for f in event[1])
-                if interesting:
-                    # Update modified path
-                    path = PurePosixPath(event[2]) / event[3]
-                    try:
-                        rel_path = path.relative_to(rootpath)
-                        update_path(rootmod, rel_path, loop)
-                    except Exception as e:
-                        logger.error(
-                            f"Error processing inotify event for path {path}: {e}"
-                        )
-                        raise
-                    if not dirty:
-                        t = time.monotonic()
-                        dirty = True
-                # Wait a maximum of 0.2s to push the updates
-                if dirty and time.monotonic() >= t + 0.2:
-                    break
-            if dirty and state.root != rootmod:
-                try:
-                    update = format_update(state.root, rootmod)
-                    with state.lock:
-                        broadcast(update, loop)
-                        state.root = rootmod
-                except Exception:
-                    logger.exception(
-                        "format_update failed; falling back to full rescan"
+
+        # Pending changes: path -> {"ws": count, "inotify": count}
+        dirty_paths: dict[PurePosixPath, dict[str, int]] = {}
+        first_event_time: float | None = None
+        last_event_time: float | None = None
+
+        def add_dirty(path: PurePosixPath, source: str) -> bool:
+            """Add path to dirty set. Returns True if added, False if redundant."""
+            nonlocal first_event_time, last_event_time
+            # Check if already covered by an existing dirty path
+            for existing in dirty_paths:
+                if path == existing or (
+                    len(path.parts) > len(existing.parts)
+                    and path.parts[: len(existing.parts)] == existing.parts
+                ):
+                    # Count the event even if skipped
+                    dirty_paths[existing][source] = (
+                        dirty_paths[existing].get(source, 0) + 1
                    )
-                    # Fallback: full rescan and try diff again; last resort send full root
+                    return False
+            # Remove any paths that would be covered by this new one
+            covered = {
+                p
+                for p in dirty_paths
+                if len(p.parts) > len(path.parts)
+                and p.parts[: len(path.parts)] == path.parts
+            }
+            # Aggregate counts from covered paths
+            counts: dict[str, int] = {source: 1}
+            for p in covered:
+                for s, c in dirty_paths[p].items():
+                    counts[s] = counts.get(s, 0) + c
+                del dirty_paths[p]
+            dirty_paths[path] = counts
+            now = time.monotonic()
+            if first_event_time is None:
+                first_event_time = now
+            last_event_time = now
+            return True
+
+        while not quit.is_set():
+            now = time.monotonic()
+
+            # Full refresh every 300s
+            if now >= trefresh:
+                break
+
+            # Disk usage update every 5s
+            if now >= tspace:
+                tspace = now + 5.0
+                update_space(loop)
+
+            # Check if we should flush pending changes
+            should_flush = False
+            if dirty_paths:
+                time_since_last = now - last_event_time if last_event_time else 0
+                time_since_first = now - first_event_time if first_event_time else 0
+                if (
+                    time_since_last >= DEBOUNCE_DELAY
+                    or time_since_first >= DEBOUNCE_MAX
+                ):
+                    should_flush = True
+
+            if should_flush:
+                paths_to_process = dirty_paths.copy()
+                dirty_paths.clear()
+                first_event_time = None
+                last_event_time = None
+
+                # Collapse paths (remove children if parent present)
+                collapsed = collapse_paths(set(paths_to_process.keys()))
+
+                # Process each collapsed path
+                new_root = path_index.root
+                for path in collapsed:
+                    new_entries = walk(path)
+                    new_root = path_index.apply_update(path, new_entries)
+
+                # Broadcast if changed
+                if new_root != state.root:
                    try:
-                        fresh = walk(PurePosixPath())
+                        update_msg = format_update(state.root, new_root)
+                        with state.lock:
+                            broadcast(update_msg, loop)
+                            state.root = new_root
+                    except Exception:
+                        logger.exception("format_update failed; full rescan")
                        try:
-                            update = format_update(state.root, fresh)
+                            fresh = walk(PurePosixPath())
+                            path_index = PathIndex(fresh)
+                            update_msg = format_update(state.root, fresh)
                            with state.lock:
-                                broadcast(update, loop)
+                                broadcast(update_msg, loop)
                                state.root = fresh
                        except Exception:
-                            logger.exception(
-                                "Fallback diff failed; sending full root snapshot"
-                            )
+                            logger.exception("Fallback failed; sending full root")
                            with state.lock:
                                broadcast(format_root(fresh), loop)
                                state.root = fresh
-                    except Exception:
-                        logger.exception(
-                            "Full rescan failed; dropping this batch of updates"
-                        )

-        del i  # Free the inotify object
+            # Collect events from websocket signals (non-blocking)
+            try:
+                while True:
+                    path = _update_queue.get_nowait()
+                    add_dirty(path, "ws")
+            except queue.Empty:
+                pass

+            # Collect inotify events if available (short timeout for responsiveness)
+            if inotify_tree:
+                for event in inotify_tree.event_gen(yield_nones=False, timeout_s=0.05):
+                    if quit.is_set():
+                        return
+                    if not (modified_flags & set(event[1])):
+                        continue

-def watcher_poll(loop):
-    """Polling version of the watcher thread."""
-    while not quit.is_set():
-        t0 = time.perf_counter()
-        update_root(loop)
-        update_space(loop)
-        dur = time.perf_counter() - t0
-        if dur > 1.0:
-            logger.debug(f"Reading the full file list took {dur:.1f}s")
-        quit.wait(0.1 + 8 * dur)
+                    # Extract relative path
+                    path = PurePosixPath(event[2]) / event[3]
+                    try:
+                        rel_path = path.relative_to(rootpath)
+                    except ValueError:
+                        continue
+
+                    # Skip dotfiles
+                    if any(part.startswith(".") for part in rel_path.parts):
+                        continue
+
+                    add_dirty(rel_path, "inotify")
+
+                    # Don't block too long collecting events
+                    now = time.monotonic()
+                    if first_event_time and now - first_event_time >= DEBOUNCE_MAX:
+                        break
+            else:
+                # No inotify, just sleep briefly for responsiveness
+                time.sleep(0.05)
+
+        if inotify_tree:
+            del inotify_tree


 def start(app):
    global rootpath
    config.load_config()
    rootpath = config.config.path
-    use_inotify = sys.platform == "linux"
    app.ctx.watcher = threading.Thread(
-        target=watcher_inotify if use_inotify else watcher_poll,
+        target=watcher,
        args=[app.loop],
        # Descriptive name for system monitoring
        name=f"cista-watcher {rootpath}",
@@ -9,15 +9,14 @@
  <UserManagementModal />
  <AccessDeniedModal />
  <header>
-    <HeaderMain ref="headerMain" :path="path.pathList" :query="path.query">
-      <HeaderSelected :path="path.pathList" />
-    </HeaderMain>
+    <HeaderMain ref="headerMain" :path="path.pathList" :query="path.query" />
    <BreadCrumb :path="path.pathList" primary />
  </header>
  <main>
    <RouterView :path="path.pathList" :query="path.query" />
  </main>
-  <footer>
+  <footer v-if="store.selected.size || store.uprogress.total || store.dprogress.total">
+    <SelectionToolbar :path="path.pathList" />
    <TransferBar :status=store.uprogress @cancel=store.cancelUploads class=upload />
    <TransferBar :status=store.dprogress @cancel=store.cancelDownloads class=download />
  </footer>
@@ -37,6 +36,7 @@ import type { SortOrder } from './utils/docsort'
 import type SettingsModalVue from './components/SettingsModal.vue'
 import UserManagementModal from './components/UserManagementModal.vue'
 import AccessDeniedModal from './components/AccessDeniedModal.vue'
+import SelectionToolbar from './components/SelectionToolbar.vue'

 interface Path {
  path: string
@@ -104,7 +104,7 @@ const globalShortcutHandler = (event: KeyboardEvent) => {
  else if (keyup && event.key === 'Escape') {
    store.error = ''
    store.clearToast()
-    headerMain.value!.closeSearch(event)
+    headerMain.value!.clearSearch(event)
    store.focusBreadcrumb()
  }
  else if (!input && keyup && event.key === 'Backspace') {
@@ -189,4 +189,19 @@ export type { Path }
  background: #555;
  color: #fff;
 }
+footer {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background: rgba(0, 0, 0, 0.3);
+  backdrop-filter: blur(4px);
+  z-index: 50;
+}
+footer > * {
+  justify-content: center;
+}
 </style>
@@ -13,8 +13,8 @@
  --transition-time: 0.2s;
  /* The following are overridden by responsive layouts */
  --root-font-size: 1rem;
-  --header-font-size: 1rem;
-  --header-height: 4rem;
+  --header-font-size: clamp(0.7rem, 2.5vw, 1rem);
+  --header-height: clamp(2.8rem, 10vw, 4rem);
 }
@media (prefers-color-scheme: dark) {
  :root {
@@ -36,6 +36,7 @@
@media screen and (min-width: 1000px) {
  :root {
    --root-font-size: calc(8px + 8 * 100vw / 1000);
+    --header-font-size: 16px;
  }
 }
@media screen and (min-width: 2000px) {
@@ -43,44 +44,14 @@
    --root-font-size: 1.5rem;
  }
 }
-/* Low (landscape) screens: smaller header */
-@media screen and (max-height: 600px) {
-  :root {
-    --header-font-size: calc(10px + 10 * 100vh / 600);  /* 20px at 600px height */
-    --root-font-size: 0.8rem;
-    --header-height: 2rem;
-  }
-  header .breadcrumb > * {
-    padding-top: calc(8 + 8 * 100vh / 600) !important;
-    padding-bottom: calc(8 + 8 * 100vh / 600) !important;
-  }
-}
-@media screen and (max-height: 300px) {
-  :root {
-    --header-font-size: 15px;  /* Don't go smaller than this, no benefit */
-    --header-height: calc(1.75 * 16px);
-    --root-font-size: 0.6rem;
-  }
-  header .breadcrumb > * {
-    padding-top: 14px !important;
-    padding-bottom: 14px !important;
-  }
-}
@media screen and (orientation: landscape) and (min-width: 700px) {
  /* Breadcrumbs and buttons side by side */
-  :root {
-    --header-font-size: calc(8px + 8 * 100vh / 600);  /* 16px (1rem nominal) at 600px height */
-  }
  header {
    display: flex;
    justify-content: space-between;
  }
  header .headermain { order: 1; }
  header .breadcrumb { align-self: stretch; }
-  header .action-button {
-    width: 2em;
-    height: 2em;
-  }
 }
@media print {
  :root {
@@ -241,42 +212,13 @@ header nav.headermain {
 .spacer { flex-grow: 1 }
 .smallgap { flex-shrink: 1; width: 2em }

-[data-tooltip]:hover:after {
-  z-index: 101;
-  content: attr(data-tooltip);
-  position: absolute;
-  pointer-events: none;
-  font-size: 1rem;
-  text-align: center;
-  padding: .5rem 1rem;
-  border-radius: 3rem 0 3rem 0;
-  box-shadow: 0 0 1rem var(--accent-color);
-  transform: translate(calc(1rem + -50%), 150%);
-  background-color: var(--accent-color);
-  color: var(--primary-color);
-  white-space: pre;
-  animation: appearbriefly calc(10 * var(--transition-time)) linear forwards;
-}
-@keyframes appearbriefly {
-  from {
-    opacity: 0;
-  }
-  30% {
-    opacity: 0;
-  }
-  40% {
-    opacity: 1;
-  }
-  90% {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-}
+
 .error-message {
  padding: .5em;
  font-weight: bold;
  background: var(--accent-color);
  color: #000;
 }
+.ghost {
+  opacity: 0.5;
+}
@@ -14,9 +14,12 @@
      :class="{ current: !!isCurrent(0) }"
      :aria-current="isCurrent(0)"
      @click.prevent="navigate(0)"
-      title="/"
+      @mouseenter="homeTooltip?.startHover"
+      @mousemove="homeTooltip?.updatePosition"
+      @mouseleave="homeTooltip?.endHover"
    >
      <component :is="home" />
+      <CursorTooltip ref="homeTooltip" text="/">/</CursorTooltip>
    </a>
    <template v-for="(location, index) in longest" :key="index">
      <a :href="`/#/${longest.slice(0, index + 1).join('/')}/`"
@@ -24,8 +27,10 @@
        :aria-current="isCurrent(index + 1)"
        @click.prevent="navigate(index + 1)"
        :ref="el => setLinkRef(index + 1, el)"
-        :title="`/${longest.slice(0, index + 1).join('/')}`"
-      >{{ location }}</a>
+        @mouseenter="pathTooltips.get(index)?.startHover"
+        @mousemove="pathTooltips.get(index)?.updatePosition"
+        @mouseleave="pathTooltips.get(index)?.endHover"
+      >{{ location }}<CursorTooltip :ref="el => setPathTooltipRef(index, el)" :text="`/${longest.slice(0, index + 1).join('/')}`">{{ `/${longest.slice(0, index + 1).join('/')}` }}</CursorTooltip></a>
    </template>
  </nav>
 </template>
@@ -35,6 +40,7 @@ import { Home } from '@/assets/svg'
 import { nextTick, onBeforeUpdate, ref, watchEffect } from 'vue'
 import { useRouter } from 'vue-router'
 import { exists } from '@/utils/fileutil'
+import CursorTooltip from './CursorTooltip.vue'

 const home = Home
 const router = useRouter()
@@ -43,6 +49,13 @@ const links = [] as Array<HTMLElement>
 const setLinkRef = (index: number, el: any) => { if (el) links[index] = el }
 onBeforeUpdate(() => { links.length = 1 })  // 1 to keep home

+const homeTooltip = ref<InstanceType<typeof CursorTooltip> | null>(null)
+const pathTooltips = ref<Map<number, InstanceType<typeof CursorTooltip>>>(new Map())
+const setPathTooltipRef = (index: number, el: any) => {
+  if (el) pathTooltips.value.set(index, el)
+  else pathTooltips.value.delete(index)
+}
+
 const props = defineProps<{
  path: Array<string>
  primary?: boolean
@@ -1,6 +1,6 @@
 <template>
  <Teleport to="body">
-    <div v-if="visible" class="cursor-tooltip" :style="tooltipStyle">
+    <div v-if="visible" ref="tooltipEl" class="cursor-tooltip" :style="tooltipStyle">
      <slot></slot>
    </div>
  </Teleport>
@@ -10,12 +10,12 @@
 // Global activation state - shared across all instances
 let globalActive = false
 let globalDeactivateTimer: ReturnType<typeof setTimeout> | null = null
-// Track if we've seen real mouse movement (not touch-simulated)
-let hasRealMouse = false
+// Track recent touch to suppress touch-triggered mouse events
+let lastTouchTime = 0
 </script>

 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed, ref, onMounted, onUnmounted } from 'vue'

 const props = defineProps<{
  text: string
@@ -25,6 +25,9 @@ const props = defineProps<{
 const visible = ref(false)
 const mouseX = ref(0)
 const mouseY = ref(0)
+const tooltipWidth = ref(0)
+const tooltipHeight = ref(0)
+const tooltipEl = ref<HTMLElement | null>(null)
 let settleTimer: ReturnType<typeof setTimeout> | null = null
 let lastMoveX = 0
 let lastMoveY = 0
@@ -32,17 +35,51 @@ let lastMoveY = 0
 // Movement threshold (pixels) - cursor must settle within this radius
 const SETTLE_THRESHOLD = 8

-const tooltipStyle = computed(() => ({
-  left: `${mouseX.value}px`,
-  top: `${mouseY.value}px`,
-}))
+const tooltipStyle = computed(() => {
+  // Constrain to viewport
+  const pad = 8
+  let x = mouseX.value
+  let y = mouseY.value

-// Check if the device likely has a real mouse (fine pointer)
-const hasFinePointer = () => window.matchMedia('(pointer: fine)').matches
+  // Only constrain if we've measured the tooltip
+  if (tooltipWidth.value > 0 && tooltipHeight.value > 0) {
+    // Adjust horizontal position if tooltip would overflow right edge
+    if (x + tooltipWidth.value + pad > window.innerWidth) {
+      x = window.innerWidth - tooltipWidth.value - pad
+    }
+    // Adjust vertical position if tooltip would overflow bottom edge
+    if (y + tooltipHeight.value + pad > window.innerHeight) {
+      y = window.innerHeight - tooltipHeight.value - pad
+    }
+    // Don't go past left/top edges
+    x = Math.max(pad, x)
+    y = Math.max(pad, y)
+  }
+
+  return {
+    left: `${x}px`,
+    top: `${y}px`,
+  }
+})
+
+// Track touch events globally to suppress touch-simulated mouse events
+const onTouchStart = () => { lastTouchTime = Date.now() }
+onMounted(() => document.addEventListener('touchstart', onTouchStart, { passive: true }))
+onUnmounted(() => document.removeEventListener('touchstart', onTouchStart))
+
+// Check if event is likely from touch (touch happened within last 500ms)
+const isTouchEvent = () => Date.now() - lastTouchTime < 500

 const showTooltip = () => {
  visible.value = true
  globalActive = true
+  // Measure tooltip after it renders
+  requestAnimationFrame(() => {
+    if (tooltipEl.value) {
+      tooltipWidth.value = tooltipEl.value.offsetWidth
+      tooltipHeight.value = tooltipEl.value.offsetHeight
+    }
+  })
 }

 const scheduleTooltip = () => {
@@ -56,8 +93,8 @@ const scheduleTooltip = () => {
 }

 const startHover = (e: MouseEvent) => {
-  // Ignore touch events (no fine pointer and no confirmed real mouse)
-  if (!hasFinePointer() && !hasRealMouse) return
+  // Ignore touch-simulated mouse events
+  if (isTouchEvent()) return

  mouseX.value = e.clientX
  mouseY.value = e.clientY
@@ -66,9 +103,8 @@ const startHover = (e: MouseEvent) => {
 }

 const updatePosition = (e: MouseEvent) => {
-  // Detect real mouse via movement (touch events don't generate continuous mousemove)
-  if (e.movementX !== 0 || e.movementY !== 0) hasRealMouse = true
-  if (!hasFinePointer() && !hasRealMouse) return
+  // Ignore touch-simulated mouse events
+  if (isTouchEvent()) return

  mouseX.value = e.clientX
  mouseY.value = e.clientY
@@ -122,10 +158,11 @@ defineExpose({
  z-index: 10000;
  padding: .5rem 1rem;
  border-radius: 3rem 0 3rem 0;
-  box-shadow: 0 0 1rem var(--accent-color);
-  background-color: var(--accent-color);
-  color: var(--primary-color);
-  white-space: nowrap;
+  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.5);
+  background: rgba(0, 0, 0, 0.3);
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+  color: #fff;
  pointer-events: none;
  font-size: 1rem;
 }
@@ -0,0 +1,421 @@
+<template>
+  <div class="disk-space-container" ref="containerRef">
+    <div
+      ref="widgetRef"
+      class="disk-space-widget"
+      :class="{ expanded: isExpanded }"
+    >
+      <svg viewBox="0 0 150 150" class="pie-svg" preserveAspectRatio="xMidYMid meet">
+      <defs>
+        <filter id="pieShadow" x="-50%" y="-50%" width="200%" height="200%">
+          <feDropShadow dx="0" dy="4" stdDeviation="8" flood-color="rgba(0,0,0,0.4)" />
+        </filter>
+        <radialGradient id="storageGradient" cx="30%" cy="30%" r="70%">
+          <stop offset="0%" stop-color="#93e" />
+          <stop offset="100%" stop-color="#82d" />
+        </radialGradient>
+        <radialGradient id="otherGradient" cx="30%" cy="30%" r="70%">
+          <stop offset="0%" stop-color="#d9f" />
+          <stop offset="100%" stop-color="#c8e" />
+        </radialGradient>
+        <radialGradient id="highlightOverlay" cx="35%" cy="35%" r="65%">
+          <stop offset="0%" stop-color="rgba(255,255,255,0.15)" />
+          <stop offset="60%" stop-color="rgba(255,255,255,0)" />
+          <stop offset="100%" stop-color="rgba(0,0,0,0.08)" />
+        </radialGradient>
+      </defs>
+
+      <g :filter="isExpanded ? 'url(#pieShadow)' : 'none'">
+        <circle :r="midRadius" :cx="pieCx" :cy="pieCy" fill="transparent" stroke="url(#otherGradient)" :stroke-width="ringWidth" />
+        <circle :r="midRadius" :cx="pieCx" :cy="pieCy" fill="transparent" :stroke="freeColor" :stroke-width="ringWidth" :stroke-dasharray="pieFreeDash" :stroke-dashoffset="pieFreeOffsetVal" :transform="`rotate(-90 ${pieCx} ${pieCy})`" />
+        <circle :r="midRadius" :cx="pieCx" :cy="pieCy" fill="transparent" stroke="url(#storageGradient)" :stroke-width="ringWidth" :stroke-dasharray="pieStorageDash" :transform="`rotate(-90 ${pieCx} ${pieCy})`" />
+        <circle :r="midRadius" :cx="pieCx" :cy="pieCy" fill="transparent" stroke="url(#highlightOverlay)" :stroke-width="ringWidth" />
+        <circle :r="holeRadius" :cx="pieCx" :cy="pieCy" fill="rgba(0,0,0,0.5)" />
+        <text ref="centerLabelRef" :x="pieCx" :y="pieCy" dy="0.35em" class="pie-center-label" text-anchor="middle">GB</text>
+        <circle :r="pieRadius" :cx="pieCx" :cy="pieCy" fill="transparent" class="pie-hitarea" @click="handleClick" />
+      </g>
+
+      <g ref="labelsRef" class="pie-labels">
+        <text :x="storageInnerPos.x" :y="storageInnerPos.y" class="pie-label-inner" :text-anchor="getSizeAnchor(sectorInfo.storage.angle)" dominant-baseline="middle" :transform="`rotate(${getSizeRotation(sectorInfo.storage.angle)} ${storageInnerPos.x} ${storageInnerPos.y})`">{{ fmtSize(store.space.allocated, sectorInfo.storage.angle) }}</text>
+        <text :x="freeInnerPos.x" :y="freeInnerPos.y" class="pie-label-inner" :text-anchor="getSizeAnchor(sectorInfo.free.angle)" dominant-baseline="middle" :transform="`rotate(${getSizeRotation(sectorInfo.free.angle)} ${freeInnerPos.x} ${freeInnerPos.y})`">{{ fmtSize(store.space.free, sectorInfo.free.angle) }}</text>
+        <text :x="otherInnerPos.x" :y="otherInnerPos.y" class="pie-label-inner" :text-anchor="getSizeAnchor(sectorInfo.other.angle)" dominant-baseline="middle" :transform="`rotate(${getSizeRotation(sectorInfo.other.angle)} ${otherInnerPos.x} ${otherInnerPos.y})`">{{ fmtSize(store.space.used - store.space.allocated, sectorInfo.other.angle) }}</text>
+
+        <defs>
+          <path :id="storageLabelPath.id" :d="storageLabelPath.d" fill="none" />
+          <path :id="freeLabelPath.id" :d="freeLabelPath.d" fill="none" />
+          <path :id="otherLabelPath.id" :d="otherLabelPath.d" fill="none" />
+        </defs>
+
+        <text class="pie-label-sub" fill="#93e">
+          <textPath :href="'#' + storageLabelPath.id" startOffset="50%" text-anchor="middle" dominant-baseline="middle">{{ storageName }}</textPath>
+        </text>
+        <text class="pie-label-sub" :fill="freeColor">
+          <textPath :href="'#' + freeLabelPath.id" startOffset="50%" text-anchor="middle" dominant-baseline="middle">free</textPath>
+        </text>
+        <text class="pie-label-sub" fill="#d9f">
+          <textPath :href="'#' + otherLabelPath.id" startOffset="50%" text-anchor="middle" dominant-baseline="middle">other</textPath>
+        </text>
+      </g>
+    </svg>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { useMainStore } from '@/stores/main'
+
+const store = useMainStore()
+const containerRef = ref<HTMLDivElement | null>(null)
+const widgetRef = ref<HTMLDivElement | null>(null)
+const labelsRef = ref<SVGGElement | null>(null)
+const centerLabelRef = ref<SVGTextElement | null>(null)
+
+const isExpanded = ref(false)
+let animationFrame: number | null = null
+
+const BASE_SIZE = 48
+const EXPANDED_SCALE = 320 / 48
+const ANIM_DURATION = 200
+const containerPos = ref({ top: 0, left: 0, width: 0 })
+
+const formatGB = (bytes: number) => {
+  const gb = bytes / (1024 * 1024 * 1024)
+  return gb < 10 ? gb.toFixed(1) : `${Math.round(gb)}`
+}
+
+// Add dot suffix for ambiguous angles (within 15° of horizontal) on numbers that look same upside down
+const fmtSize = (bytes: number, angle: number) => {
+  const s = formatGB(bytes)
+  const a = Math.abs(angle % 180)
+  return (Math.min(a, 180 - a) < 15 && /^[0689]+$/.test(s)) ? `${s}.` : s
+}
+
+const truncateLabel = (name: string, maxLen = 10): string => {
+  if (name.length <= maxLen) return name
+  const parts = name.split(/[\s\-_.,;:!?()\[\]{}]+/)
+  if (parts[0] && parts[0].length <= maxLen) return parts[0]
+  return name.slice(0, maxLen - 1) + '…'
+}
+
+// Calculate max label length based on angular gap to neighbor labels
+const storageMaxLen = computed(() => {
+  const s = store.space
+  if (!s.disk) return 10
+  // Sector spans in degrees
+  const storageSpan = (s.allocated / s.disk) * 360
+  const freeSpan = (s.free / s.disk) * 360
+  const otherSpan = ((s.used - s.allocated) / s.disk) * 360
+  // Angular gap from storage label midpoint to neighbor label midpoints
+  const gapToFree = (storageSpan + freeSpan) / 2
+  const gapToOther = (storageSpan + otherSpan) / 2
+  const minGap = Math.min(gapToFree, gapToOther)
+  // Allow longer names when there's sufficient gap to both neighbors
+  if (minGap > 70) return 18
+  if (minGap > 55) return 14
+  return 10
+})
+
+const storageName = computed(() => {
+  const name = store.server.name || 'stored'
+  const maxLen = storageMaxLen.value
+  // Use full name if it fits within the available space
+  if (name.length <= maxLen) return name
+  return truncateLabel(name, 10)
+})
+
+const TAU = 2 * Math.PI
+
+const pieCx = 75
+const pieCy = 75
+const pieRadius = 55
+const holeRadius = pieRadius * 0.38
+const ringWidth = pieRadius - holeRadius
+const midRadius = (pieRadius + holeRadius) / 2
+const CIRC = TAU * midRadius
+
+const pieStorageDash = computed(() => {
+  const s = store.space
+  if (!s.disk) return `0 ${CIRC}`
+  return `${(s.allocated / s.disk) * CIRC} ${CIRC}`
+})
+
+const pieFreeDash = computed(() => {
+  const s = store.space
+  if (!s.disk) return `0 ${CIRC}`
+  return `${(s.free / s.disk) * CIRC} ${CIRC}`
+})
+
+const pieFreeOffsetVal = computed(() => {
+  const s = store.space
+  if (!s.disk) return 0
+  return -(s.allocated / s.disk) * CIRC
+})
+
+const freeColor = computed(() => {
+  const s = store.space
+  if (!s.disk) return '#6c6'
+  const freePct = s.free / s.disk
+  if (freePct > 0.25) return '#5b5'
+  if (freePct > 0.10) return '#ff0'
+  return '#f00'
+})
+
+const PIE_RADIUS = 55
+const LABEL_RADIUS = 62
+
+const getPoint = (angle: number, radius: number) => {
+  const rad = TAU * (angle - 90) / 360
+  return { x: pieCx + radius * Math.cos(rad), y: pieCy + radius * Math.sin(rad) }
+}
+
+const sectorInfo = computed(() => {
+  const s = store.space
+  if (!s.disk) return {
+    storage: { angle: 45, pct: 0.25 },
+    free: { angle: 180, pct: 0.5 },
+    other: { angle: 270, pct: 0.25 }
+  }
+
+  const storagePct = s.allocated / s.disk
+  const freePct = s.free / s.disk
+  const otherPct = (s.used - s.allocated) / s.disk
+
+  const storageAngle = storagePct * 180  // midpoint of storage sector
+  const freeStart = storagePct * 360
+  const freeAngle = freeStart + freePct * 180
+  const otherStart = (storagePct + freePct) * 360
+  const otherAngle = otherStart + otherPct * 180
+
+  return {
+    storage: { angle: storageAngle, pct: storagePct },
+    free: { angle: freeAngle, pct: freePct },
+    other: { angle: otherAngle, pct: otherPct }
+  }
+})
+
+const rawAngles = computed(() => ({
+  storage: sectorInfo.value.storage.angle,
+  free: sectorInfo.value.free.angle,
+  other: sectorInfo.value.other.angle
+}))
+
+const getSizeRotation = (angle: number) => angle < 180 ? angle - 90 : angle + 90
+const getSizeAnchor = (angle: number) => angle < 180 ? 'end' : 'start'
+
+const INNER_LABEL_RADIUS = PIE_RADIUS * 0.95
+const storageInnerPos = computed(() => getPoint(sectorInfo.value.storage.angle, INNER_LABEL_RADIUS))
+const freeInnerPos = computed(() => getPoint(sectorInfo.value.free.angle, INNER_LABEL_RADIUS))
+const otherInnerPos = computed(() => getPoint(sectorInfo.value.other.angle, INNER_LABEL_RADIUS))
+
+// Collision avoidance for curved name labels
+const labelLengths = computed(() => ({
+  storage: storageName.value.length,
+  free: 4,
+  other: 5
+}))
+
+const getGapForPair = (len1: number, len2: number) => {
+  return 35 + Math.max(0, len1 + len2 - 8) * 2.5
+}
+
+const adjustedLabelAngles = computed(() => {
+  const angles = rawAngles.value
+  const lens = labelLengths.value
+  const labels = [
+    { id: 'storage', angle: angles.storage, len: lens.storage },
+    { id: 'free', angle: angles.free, len: lens.free },
+    { id: 'other', angle: angles.other, len: lens.other }
+  ]
+  labels.sort((a, b) => a.angle - b.angle)
+
+  for (let iterations = 0; iterations < 15; iterations++) {
+    let moved = false
+    for (let i = 0; i < labels.length; i++) {
+      const current = labels[i]!
+      const next = labels[(i + 1) % labels.length]!
+      let angleDiff = next.angle - current.angle
+      if (angleDiff < 0) angleDiff += 360
+      const requiredGap = getGapForPair(current.len, next.len)
+      if (angleDiff < requiredGap) {
+        const push = (requiredGap - angleDiff) / 2
+        current.angle = (current.angle - push + 360) % 360
+        next.angle = (next.angle + push) % 360
+        moved = true
+      }
+    }
+    if (!moved) break
+  }
+
+  const result: Record<string, number> = {}
+  for (const l of labels) result[l.id] = l.angle
+  return result
+})
+
+// Arc path for curved text labels (CW for top half, CCW for bottom half)
+const createArcPath = (centerAngle: number, id: string, labelLen: number) => {
+  const radius = LABEL_RADIUS
+  // Scale arc span based on label length: ~6° per character, minimum 45°
+  const arcSpan = Math.max(45, labelLen * 6)
+  const isBottom = centerAngle > 90 && centerAngle <= 270
+  const startAngle = isBottom ? centerAngle + arcSpan / 2 : centerAngle - arcSpan / 2
+  const endAngle = isBottom ? centerAngle - arcSpan / 2 : centerAngle + arcSpan / 2
+  const start = getPoint(startAngle, radius)
+  const end = getPoint(endAngle, radius)
+  const sweep = isBottom ? 0 : 1
+  return {
+    id: `label-path-${id}`,
+    d: `M ${start.x} ${start.y} A ${radius} ${radius} 0 0 ${sweep} ${end.x} ${end.y}`
+  }
+}
+
+const storageLabelPath = computed(() => createArcPath(adjustedLabelAngles.value.storage!, 'storage', storageName.value.length))
+const freeLabelPath = computed(() => createArcPath(adjustedLabelAngles.value.free!, 'free', 4))
+const otherLabelPath = computed(() => createArcPath(adjustedLabelAngles.value.other!, 'other', 5))
+
+const handleClick = () => isExpanded.value ? collapse() : expand()
+
+const applyAnimState = (t: number, opacity: number) => {
+  const widget = widgetRef.value
+  const labels = labelsRef.value
+  const centerLabel = centerLabelRef.value
+  if (!widget) return
+
+  const scale = 1 + (EXPANDED_SCALE - 1) * t
+  // Move top-right corner of widget to top-right corner of viewport
+  const targetX = window.innerWidth - containerPos.value.left - containerPos.value.width
+  const targetY = -containerPos.value.top
+
+  widget.style.transform = `translate(${targetX * t}px, ${targetY * t}px) scale(${scale})`
+  if (labels) labels.style.opacity = String(opacity)
+  if (centerLabel) centerLabel.style.opacity = String(opacity)
+}
+
+const animate = (duration: number, expanding: boolean, onComplete?: () => void) => {
+  const startTime = performance.now()
+  const tick = (now: number) => {
+    const elapsed = now - startTime
+    const progress = Math.min(elapsed / duration, 1)
+    const eased = 1 - Math.pow(1 - progress, 3)  // easeOutCubic
+    const t = expanding ? eased : 1 - eased
+    applyAnimState(t, t)  // opacity follows position
+    if (progress < 1) {
+      animationFrame = requestAnimationFrame(tick)
+    } else {
+      animationFrame = null
+      onComplete?.()
+    }
+  }
+  animationFrame = requestAnimationFrame(tick)
+}
+
+const expand = () => {
+  if (animationFrame) cancelAnimationFrame(animationFrame)
+  if (containerRef.value) {
+    const rect = containerRef.value.getBoundingClientRect()
+    containerPos.value = { top: rect.top, left: rect.left, width: rect.width }
+  }
+  isExpanded.value = true
+  animate(ANIM_DURATION, true)
+}
+
+const collapse = () => {
+  if (animationFrame) cancelAnimationFrame(animationFrame)
+  if (containerRef.value) {
+    const rect = containerRef.value.getBoundingClientRect()
+    containerPos.value = { top: rect.top, left: rect.left, width: rect.width }
+  }
+  animate(ANIM_DURATION, false, () => {
+    isExpanded.value = false
+  })
+}
+
+const handleKeydown = (e: KeyboardEvent) => {
+  if (e.key === 'Escape' && isExpanded.value) collapse()
+}
+
+onMounted(() => {
+  document.addEventListener('keydown', handleKeydown)
+  // Initialize labels as hidden
+  if (labelsRef.value) labelsRef.value.style.opacity = '0'
+  if (centerLabelRef.value) centerLabelRef.value.style.opacity = '0'
+})
+
+onUnmounted(() => {
+  document.removeEventListener('keydown', handleKeydown)
+  if (animationFrame) cancelAnimationFrame(animationFrame)
+})
+</script>
+
+<style scoped>
+.disk-space-container {
+  position: relative;
+  width: 3em;
+  height: 3em;
+}
+
+.disk-space-widget {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+  will-change: transform;
+  filter: brightness(0.85);
+  transition: filter 0.2s ease;
+  transform-origin: top right;
+}
+
+.disk-space-widget:hover,
+.disk-space-widget:focus {
+  filter: brightness(1);
+}
+
+.disk-space-widget.expanded {
+  pointer-events: none;
+  filter: none;
+}
+
+.disk-space-widget.expanded:hover,
+.disk-space-widget.expanded:focus {
+  filter: none;
+}
+
+.pie-svg {
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+  pointer-events: none;
+}
+
+.pie-hitarea {
+  pointer-events: auto;
+  cursor: pointer;
+}
+
+.pie-label-inner {
+  fill: #eee;
+  font-size: 12px;
+  font-weight: 700;
+  stroke: #000;
+  stroke-width: 0.5px;
+  paint-order: stroke fill;
+}
+
+.pie-center-label {
+  fill: #eee;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.pie-label-sub {
+  font-size: 14px;
+  font-weight: 600;
+  font-variant: small-caps;
+  text-transform: lowercase;
+  stroke: #000;
+  stroke-width: 1px;
+  paint-order: stroke fill;
+}
+</style>
@@ -1,5 +1,5 @@
 <template>
-  <SvgButton name="download" data-tooltip="Download" @click="download" />
+  <SvgButton name="download" tooltip="Download" @click="download" />
 </template>

 <script setup lang="ts">
@@ -7,7 +7,6 @@ import { useMainStore } from '@/stores/main'
 import { apiFetch } from '@/repositories/Client'
 import type { SelectedItems } from '@/repositories/Document'
 import { zipName } from '@/utils/fileutil'
-import { reactive } from 'vue';

 const store = useMainStore()

@@ -131,39 +130,7 @@ const filesystemdl = async (sel: SelectedItems, handle: FileSystemDirectoryHandl
  statReset()
 }

-const download = async () => {
-  const sel = store.selectedFiles
-  console.log('Download', sel)
-  if (sel.keys.length === 0) {
-    console.warn('Attempted download but no files found. Missing selected keys:', sel.missing)
-    store.showToast('No existing files selected')
-    store.selected.clear()
-    return
-  }
-  // Plain old a href download if only one file (ignoring any folders)
-  const files = sel.recursive.filter(([rel, full, doc]) => !doc.dir)
-  if (files.length === 1) {
-    store.selected.clear()
-    store.showToast(`Downloading ${files[0]![0].split('/').pop()}`)
-    return linkdl(`/files/${files[0]![1]}`)
-  }
-  // Use FileSystem API if multiple files and the browser supports it
-  if ('showDirectoryPicker' in window) {
-    try {
-      // @ts-ignore
-      const handle = await window.showDirectoryPicker({
-        startIn: 'downloads',
-        mode: 'readwrite'
-      })
-      await filesystemdl(sel, handle)
-      store.selected.clear()
-      return
-    } catch (e) {
-      console.error('Download to folder aborted', e)
-    }
-  }
-  // Otherwise, zip and download
-  console.log("Falling back to zip download")
+const zipdl = (sel: SelectedItems) => {
  const items = sel.keys.map(k => sel.docs[k]!)
  const name = zipName(items)
  linkdl(`/zip/${Array.from(sel.keys).join('+')}/${name}.zip`)
@@ -171,6 +138,37 @@ const download = async () => {
  store.selected.clear()
 }

+const download = async (e: MouseEvent) => {
+  const sel = store.selectedFiles
+  if (sel.keys.length === 0) {
+    store.showToast('No existing files selected')
+    store.selected.clear()
+    return
+  }
+  // Single file: direct download
+  const files = sel.recursive.filter(([rel, full, doc]) => !doc.dir)
+  if (files.length === 1) {
+    store.selected.clear()
+    store.showToast(`Downloading ${files[0]![0].split('/').pop()}`)
+    return linkdl(`/files/${files[0]![1]}`)
+  }
+  // Alt+click: download to folder (hidden feature)
+  if (e.altKey && 'showDirectoryPicker' in window) {
+    try {
+      // @ts-ignore
+      const handle = await window.showDirectoryPicker({ startIn: 'downloads', mode: 'readwrite' })
+      await filesystemdl(sel, handle)
+      store.selected.clear()
+    } catch (e) {
+      console.error('Download to folder failed', e)
+      store.showToast('Download to folder failed')
+    }
+    return
+  }
+  // Default: ZIP download
+  zipdl(sel)
+}
+
 </script>

 <style scoped>
@@ -3,7 +3,7 @@
    <component :is="cog" :class="['cog', { stopped: store.dialog === 'accessdenied' || store.authInProgress }]"/>
    <p v-if="store.dialog === 'accessdenied'">Access Denied</p>
    <p v-else-if="!store.connected">No Connection</p>
-    <p v-else-if="store.document.length === 0">Waiting for File List</p>
+    <p v-else-if="store.documentCount === 0">Waiting for File List</p>
    <p v-else-if="store.query">No matches!</p>
    <p v-else-if="!exists(props.path)">Folder not found</p>
    <p v-else>Empty folder</p>
@@ -28,7 +28,7 @@

        <tr
          :id="`file-${doc.key}`"
-          :class="{ file: !doc.dir, folder: doc.dir, cursor: store.cursor === doc.key }"
+          :class="{ file: !doc.dir, folder: doc.dir, cursor: store.cursor === doc.key, ghost: doc.ghost }"
          @click="store.cursor = store.cursor === doc.key ? '' : doc.key"
          @contextmenu.prevent="contextMenu($event, doc)"
        >
@@ -124,6 +124,7 @@ defineExpose({
      dir: true,
      mtime: now,
      size: 0,
+      allocated: 0,
    })
    store.cursor = editing.value.key
  },
@@ -249,9 +250,10 @@ const mkdir = (doc: Doc, name: string) => {
      }
    }
  })
-  // We should get an update from watch but this is quicker
  doc.name = name
  doc.key = crypto.randomUUID()
+  store.addGhost(doc)
+  editing.value = null
 }
 const showFolderBreadcrumb = (i: number) => {
  const docs = props.documents
@@ -290,13 +292,96 @@ const allSelected = computed({

 const loc = computed(() => props.path.join('/'))

+const downloadFile = (doc: Doc) => {
+  const path = doc.loc ? `${doc.loc}/${doc.name}` : doc.name
+  if (doc.dir) {
+    // Download folder as ZIP
+    const a = document.createElement('a')
+    a.href = `/zip/${doc.key}/${doc.name}.zip`
+    a.download = ''
+    a.click()
+    store.showToast(`Downloading ${doc.name}.zip`)
+  } else {
+    // Download single file
+    const a = document.createElement('a')
+    a.href = `/files/${path}`
+    a.download = ''
+    a.click()
+    store.showToast(`Downloading ${doc.name}`)
+  }
+}
+
+const copyLink = async (doc: Doc) => {
+  const url = new URL(doc.url, window.location.origin).href
+  try {
+    await navigator.clipboard.writeText(url)
+    store.showToast('📋 Link copied!')
+  } catch {
+    store.showToast('Failed to copy link')
+  }
+}
+
+const copyImage = async (doc: Doc) => {
+  const path = doc.loc ? `${doc.loc}/${doc.name}` : doc.name
+  try {
+    store.showToast('Copying image...')
+    const res = await fetch(`/files/${path}`)
+    const blob = await res.blob()
+    // Convert to PNG if needed (clipboard only supports PNG)
+    if (blob.type !== 'image/png') {
+      const img = new Image()
+      img.src = URL.createObjectURL(blob)
+      await new Promise(r => img.onload = r)
+      const canvas = document.createElement('canvas')
+      canvas.width = img.naturalWidth
+      canvas.height = img.naturalHeight
+      canvas.getContext('2d')!.drawImage(img, 0, 0)
+      const pngBlob = await new Promise<Blob>(r => canvas.toBlob(b => r(b!), 'image/png'))
+      URL.revokeObjectURL(img.src)
+      await navigator.clipboard.write([new ClipboardItem({ 'image/png': pngBlob })])
+    } else {
+      await navigator.clipboard.write([new ClipboardItem({ 'image/png': blob })])
+    }
+    store.showToast('📋 Image copied!')
+  } catch (e) {
+    console.error('Copy image failed', e)
+    store.showToast('Failed to copy image')
+  }
+}
+
+const deleteFile = (doc: Doc) => {
+  const path = doc.loc ? `${doc.loc}/${doc.name}` : doc.name
+  store.hideDoc(path)
+  const control = connect(controlUrl, {
+    message(ev: MessageEvent) {
+      const res = JSON.parse(ev.data)
+      if ('error' in res) {
+        console.error('Delete failed', res.error)
+        store.unhideDoc(path)
+        store.showToast(res.error.message || 'Delete failed')
+      } else if (res.status === 'ack') {
+        store.showToast(`🗑️ Deleted ${doc.name}`)
+        control.close()
+      }
+    }
+  })
+  control.onopen = () => {
+    control.send(JSON.stringify({ op: 'rm', sel: [path] }))
+  }
+}
+
 const contextMenu = (ev: MouseEvent, doc: Doc) => {
  store.cursor = doc.key
-  ContextMenu.showContextMenu({
-    x: ev.x, y: ev.y, items: [
-      { label: 'Rename', onClick: () => { editing.value = doc } },
-    ],
-  })
+  const items = [
+    { label: '📥 Download', onClick: () => downloadFile(doc) },
+    { label: '🔗 Copy Link', onClick: () => copyLink(doc) },
+  ]
+  if (doc.img) items.push({ label: '📋 Copy Image', onClick: () => copyImage(doc) })
+  items.push(
+    { label: '✏️ Rename', onClick: () => { editing.value = doc } },
+    { label: '🗑️ Delete', onClick: () => deleteFile(doc) },
+  )
+  ContextMenu.showContextMenu({ x: ev.x, y: ev.y, items })
 }
 </script>

@@ -392,9 +477,6 @@ tbody tr.cursor {
 .sortcolumn:hover {
  cursor: pointer;
 }
-.sortcolumn:hover::after {
-  color: var(--accent-color);
-}
 .sortcolumn {
  padding-right: 1.5rem;
 }
@@ -1,22 +1,44 @@
 <template>
-  <td class="size right" :class=sizeClass>{{ doc.sizedisp }}</td>
+  <td
+    class="size right"
+    :class="sizeClass"
+    @mouseenter="doc.sparseIndicator && tooltip?.startHover($event)"
+    @mousemove="doc.sparseIndicator && tooltip?.updatePosition($event)"
+    @mouseleave="doc.sparseIndicator && tooltip?.endHover()"
+  >
+    <SparseIndicator :doc="doc" class="before-size" />{{ doc.sizedisp }}
+    <CursorTooltip v-if="doc.sparseIndicator" ref="tooltip" :text="tooltipText">{{ tooltipText }}</CursorTooltip>
+  </td>
 </template>

 <script setup lang="ts">
 import { Doc } from '@/repositories/Document'
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
+import { formatSize } from '@/utils'
+import SparseIndicator from './SparseIndicator.vue'
+import CursorTooltip from './CursorTooltip.vue'
+
+const props = defineProps<{
+    doc: Doc
+}>()
+
+const tooltip = ref<InstanceType<typeof CursorTooltip> | null>(null)

 const sizeClass = computed(() => {
  const unit = props.doc.sizedisp.split('\u202F').slice(-1)[0]!
  return +unit ? "bytes" : unit
 })

-const props = defineProps<{
-    doc: Doc
-}>()
+const tooltipText = computed(() => {
+  const { size, allocated } = props.doc
+  return `${formatSize(allocated)} allocated of ${formatSize(size)}`
+})
 </script>

 <style scoped>
+.before-size {
+  margin-right: 0.2em;
+}
 .size.empty { color: #555 }
 .size.bytes { color: #77a }
 .size.kB { color: #474 }
@@ -67,6 +67,7 @@ defineExpose({
      dir: true,
      mtime: now,
      size: 0,
+      allocated: 0,
    })
    store.cursor = editing.value.key
  },
@@ -203,9 +204,10 @@ const mkdir = (doc: Doc, name: string) => {
      }
    }
  })
-  // We should get an update from watch but this is quicker
  doc.name = name
  doc.key = crypto.randomUUID()
+  store.addGhost(doc)
+  editing.value = null
 }
 const showFolderBreadcrumb = (i: number) => {
  const docs = props.documents
@@ -213,18 +215,6 @@ const showFolderBreadcrumb = (i: number) => {
  return i === 0 ? docloc !== loc.value : docloc !== docs[i - 1]!.loc
 }

-
-const selectionIndeterminate = computed({
-  get: () => {
-    return (
-      props.documents.length > 0 &&
-      props.documents.some((doc: Doc) => store.selected.has(doc.key)) &&
-      !allSelected.value
-    )
-  },
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  set: (value: boolean) => {}
-})
 const allSelected = computed({
  get: () => {
    return (
@@ -246,13 +236,96 @@ const allSelected = computed({

 const loc = computed(() => props.path.join('/'))

+const downloadFile = (doc: Doc) => {
+  const path = doc.loc ? `${doc.loc}/${doc.name}` : doc.name
+  if (doc.dir) {
+    // Download folder as ZIP
+    const a = document.createElement('a')
+    a.href = `/zip/${doc.key}/${doc.name}.zip`
+    a.download = ''
+    a.click()
+    store.showToast(`Downloading ${doc.name}.zip`)
+  } else {
+    // Download single file
+    const a = document.createElement('a')
+    a.href = `/files/${path}`
+    a.download = ''
+    a.click()
+    store.showToast(`Downloading ${doc.name}`)
+  }
+}
+
+const copyLink = async (doc: Doc) => {
+  const url = new URL(doc.url, window.location.origin).href
+  try {
+    await navigator.clipboard.writeText(url)
+    store.showToast('📋 Link copied!')
+  } catch {
+    store.showToast('Failed to copy link')
+  }
+}
+
+const copyImage = async (doc: Doc) => {
+  const path = doc.loc ? `${doc.loc}/${doc.name}` : doc.name
+  try {
+    store.showToast('Copying image...')
+    const res = await fetch(`/files/${path}`)
+    const blob = await res.blob()
+    // Convert to PNG if needed (clipboard only supports PNG)
+    if (blob.type !== 'image/png') {
+      const img = new Image()
+      img.src = URL.createObjectURL(blob)
+      await new Promise(r => img.onload = r)
+      const canvas = document.createElement('canvas')
+      canvas.width = img.naturalWidth
+      canvas.height = img.naturalHeight
+      canvas.getContext('2d')!.drawImage(img, 0, 0)
+      const pngBlob = await new Promise<Blob>(r => canvas.toBlob(b => r(b!), 'image/png'))
+      URL.revokeObjectURL(img.src)
+      await navigator.clipboard.write([new ClipboardItem({ 'image/png': pngBlob })])
+    } else {
+      await navigator.clipboard.write([new ClipboardItem({ 'image/png': blob })])
+    }
+    store.showToast('📋 Image copied!')
+  } catch (e) {
+    console.error('Copy image failed', e)
+    store.showToast('Failed to copy image')
+  }
+}
+
+const deleteFile = (doc: Doc) => {
+  const path = doc.loc ? `${doc.loc}/${doc.name}` : doc.name
+  store.hideDoc(path)
+  const control = connect(controlUrl, {
+    message(ev: MessageEvent) {
+      const res = JSON.parse(ev.data)
+      if ('error' in res) {
+        console.error('Delete failed', res.error)
+        store.unhideDoc(path)
+        store.showToast(res.error.message || 'Delete failed')
+      } else if (res.status === 'ack') {
+        store.showToast(`🗑️ Deleted ${doc.name}`)
+        control.close()
+      }
+    }
+  })
+  control.onopen = () => {
+    control.send(JSON.stringify({ op: 'rm', sel: [path] }))
+  }
+}
+
 const contextMenu = (ev: MouseEvent, doc: Doc) => {
  store.cursor = doc.key
-  ContextMenu.showContextMenu({
-    x: ev.x, y: ev.y, items: [
-      { label: 'Rename', onClick: () => { editing.value = doc } },
-    ],
-  })
+  const items = [
+    { label: '📥 Download', onClick: () => downloadFile(doc) },
+    { label: '🔗 Copy Link', onClick: () => copyLink(doc) },
+  ]
+  if (doc.img) items.push({ label: '📋 Copy Image', onClick: () => copyImage(doc) })
+  items.push(
+    { label: '✏️ Rename', onClick: () => { editing.value = doc } },
+    { label: '🗑️ Delete', onClick: () => deleteFile(doc) },
+  )
+  ContextMenu.showContextMenu({ x: ev.x, y: ev.y, items })
 }
 </script>

@@ -1,6 +1,6 @@
 <template>
  <a :id="`file-${doc.key}`" :href=doc.url tabindex=-1
-    :class="{ file: !doc.dir, folder: doc.dir, cursor: store.cursor === doc.key }"
+    :class="{ file: !doc.dir, folder: doc.dir, cursor: store.cursor === doc.key, ghost: doc.ghost }"
    @contextmenu.stop
    @focus.stop="store.cursor = doc.key"
    @click=onclick
@@ -18,7 +18,7 @@
        </template>
        <template v-else>
          <SelectBox :doc=doc @click="store.cursor = doc.key"/>
-          <span>{{ doc.name }}</span>
+          <span>{{ doc.name }}<SparseIndicator :doc="doc" class="after-name" /></span>
          <div class=namespacer></div>
        </template>
      </figcaption>
@@ -26,6 +26,7 @@
    <CursorTooltip ref="tooltip" :text="tooltipText">
      <div class="tooltip-name">{{ doc.name }}</div>
      <div class="tooltip-details">{{ doc.modified }} — {{ doc.sizedisp }}</div>
+      <div v-if="doc.sparseIndicator" class="tooltip-sparse">{{ sparseText }}</div>
    </CursorTooltip>
  </a>
 </template>
@@ -34,8 +35,10 @@
 import { ref, computed } from 'vue'
 import { useMainStore } from '@/stores/main'
 import { Doc } from '@/repositories/Document'
+import { formatSize } from '@/utils'
 import MediaPreview from '@/components/MediaPreview.vue'
 import CursorTooltip from './CursorTooltip.vue'
+import SparseIndicator from './SparseIndicator.vue'

 const store = useMainStore()
 type EditingProp = {
@@ -52,6 +55,11 @@ const tooltip = ref<InstanceType<typeof CursorTooltip> | null>(null)

 const tooltipText = computed(() => props.doc.key)

+const sparseText = computed(() => {
+  const { size, allocated } = props.doc
+  return `${formatSize(allocated)} allocated of ${formatSize(size)}`
+})
+
 const onclick = (ev: Event) => {
  if (m.value!.play()) ev.preventDefault()
  store.cursor = props.doc.key
@@ -66,6 +74,13 @@ const onclick = (ev: Event) => {
 .tooltip-details {
  text-align: center;
 }
+.tooltip-sparse {
+  text-align: center;
+  opacity: 0.8;
+}
+.after-name {
+  margin-left: 0.3em;
+}
 figure {
  max-height: 15em;
  position: relative;
@@ -3,23 +3,24 @@
    <UploadButton :path="props.path" />
    <SvgButton
      name="create-folder"
-      data-tooltip="New folder"
-      @click="() => {  console.log('New', store.fileExplorer); store.fileExplorer!.newFolder(); console.log('Done')}"
+      tooltip="New folder"
+      @click="() => { store.fileExplorer!.newFolder() }"
    />
-    <slot></slot>
-    <div class="spacer smallgap"></div>
-    <template v-if="showSearchInput">
+    <div class="smallgap"></div>
+    <SvgButton name="eye" @click="store.prefs.gallery = !store.prefs.gallery" tooltip="Details/Gallery" />
+    <div class="search-group">
+      <SvgButton name="find" @click="focusSearch" tooltip="Search" />
      <input
        ref="search"
        type="search"
        :value="query"
        @input="updateSearch"
-        placeholder="Find files"
-        class="margin-input"
+        @keydown.escape="clearSearch"
      />
-    </template>
-    <SvgButton ref="searchButton" name="find" @click.prevent="toggleSearchInput" />
-    <SvgButton name="eye" @click="store.prefs.gallery = !store.prefs.gallery" />
+      <span v-if="!query" class="search-hint" @click="focusSearch">/</span>
+    </div>
+    <div class="spacer smallgap"></div>
+    <DiskSpace v-if="store.space.disk" />
    <SvgButton name="cog" @click="settingsMenu" />
  </nav>
 </template>
@@ -27,50 +28,66 @@
 <script setup lang="ts">
 import { useMainStore } from '@/stores/main'
 import { useSsoAuthStore } from '@/stores/ssoAuth'
-import { ref, nextTick, watchEffect } from 'vue'
+import { ref } from 'vue'
 import ContextMenu from '@imengyu/vue3-context-menu'
 import { showAuthIframe } from 'paskia'
 import { resumeWatching } from '@/repositories/WS'
 import router from '@/router';
+import DiskSpace from './DiskSpace.vue'

 const store = useMainStore()
 const ssoStore = useSsoAuthStore()
-const showSearchInput = ref<boolean>(false)
 const search = ref<HTMLInputElement | null>()
-const searchButton = ref<HTMLButtonElement | null>()

-  const props = defineProps<{
+const props = defineProps<{
  path: Array<string>
  query: string
 }>()

-const closeSearch = (ev: Event) => {
-  if (!showSearchInput.value) return  // Already closing
-  showSearchInput.value = false
+const clearSearch = (ev: Event) => {
+  const input = search.value
+  if (input) {
+    input.value = ''
+    updateSearch(ev)
+  }
  const breadcrumb = document.querySelector('.breadcrumb') as HTMLElement
  breadcrumb.focus()
-  updateSearch(ev)
 }
+
+const focusSearch = () => {
+  search.value?.focus()
+}
+
+// Track pending route update
+let pendingRouteUpdate: number | null = null
+
 const updateSearch = (ev: Event) => {
  const q = (ev.target as HTMLInputElement).value
-  let p = props.path.join('/')
-  p = p ? `/${p}` : ''
-  const url = q ? `${p}//${q}` : (p || '/')
-  const u = url.replaceAll('?', '%3F').replaceAll('#', '%23')
-  if (!props.query && q) router.push(u)
-  else router.replace(u)
-}
-const toggleSearchInput = (ev: Event) => {
-  showSearchInput.value = !showSearchInput.value
-  if (!showSearchInput.value) return closeSearch(ev)
-  nextTick(() => {
-    const input = search.value
-    if (input) input.focus()
+  const loc = props.path.join('/')
+
+  // Start search immediately via store (worker handles it async)
+  store.search(q, loc)
+
+  // Cancel any pending route update
+  if (pendingRouteUpdate !== null) {
+    cancelAnimationFrame(pendingRouteUpdate)
+  }
+
+  // Schedule route update - will be cancelled if user types again
+  pendingRouteUpdate = requestAnimationFrame(() => {
+    pendingRouteUpdate = null
+    let p = loc
+    p = p ? `/${p}` : ''
+    const url = q ? `${p}//${q}` : (p || '/')
+    const u = url.replaceAll('?', '%3F').replaceAll('#', '%23')
+    // Use replace to avoid building up history for each keystroke
+    router.replace(u)
  })
 }
-watchEffect(() => {
-  if (props.query) showSearchInput.value = true
-})
+
+const toggleSearchInput = () => {
+  search.value?.focus()
+}
 const settingsMenu = (e: Event) => {
  // show the context menu
  const items = []
@@ -98,7 +115,7 @@ const settingsMenu = (e: Event) => {
    // Show login option only in public mode (non-public modes trigger auth automatically)
    items.push({ label: '🔐 Login', onClick: async () => {
      try {
-        await showAuthIframe('/auth/restricted#theme=light')
+        await showAuthIframe('/auth/restricted/#theme=light')
        resumeWatching()
      } catch (e) {
        console.log('Login cancelled')
@@ -113,7 +130,7 @@ const settingsMenu = (e: Event) => {
 }
 defineExpose({
  toggleSearchInput,
-  closeSearch,
+  clearSearch,
 })
 </script>

@@ -124,13 +141,73 @@ defineExpose({
  display: flex;
  align-items: center;
  z-index: 10;
+  min-height: 3em;
 }
-input[type='search'] {
-  background: var(--input-background);
-  color: var(--input-color);
-  border: 0;
-  border-radius: 0.1em;
+.search-group {
+  position: relative;
+  display: flex;
+  align-items: center;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 1.5em;
+  padding: 0 0.3em;
+  transition: background 0.2s ease;
+  flex: 1 1 auto;
+  min-width: 2.5em;
+  max-width: 20em;
+}
+.search-group:hover,
+.search-group:focus-within {
+  background: rgba(255, 255, 255, 0.2);
+}
+.search-group:hover :deep(button.action-button),
+.search-group:focus-within :deep(button.action-button) {
+  transform: scale(1.1);
+}
+.search-group:hover :deep(button.action-button svg),
+.search-group:focus-within :deep(button.action-button svg) {
+  fill: #fff;
+}
+.search-group:focus-within .search-hint {
+  opacity: 0;
+  pointer-events: none;
+}
+.search-group :deep(.action-button) {
+  width: 2.2em;
+  height: 2.2em;
+  min-width: 1.5em;
+  min-height: 1.5em;
+  flex-shrink: 0;
+}
+.search-group input[type='search'] {
+  background: transparent;
+  color: var(--header-color);
+  border: none;
  outline: none;
-  max-width: 15ch;
+  padding: 0.2em 0.5em 0.2em 0;
+  font-size: inherit;
+  flex: 1 1 3em;
+  min-width: 0;
+  width: 100%;
+}
+.search-hint {
+  position: absolute;
+  right: 0.5em;
+  font-family: system-ui, sans-serif;
+  font-size: 1em;
+  font-weight: 700;
+  color: #333;
+  background: #ccc;
+  border: 1px solid #999;
+  border-radius: 0.3em;
+  padding: 0 0.45em;
+  line-height: 1.4;
+  cursor: pointer;
+  transition: opacity 0.15s ease;
+  display: none;
+}
+@media (hover: hover) and (pointer: fine) {
+  .search-hint {
+    display: block;
+  }
 }
 </style>
@@ -1,65 +0,0 @@
-<template>
-  <template v-if="store.selected.size">
-    <div class="smallgap"></div>
-    <p class="select-text">{{ store.selected.size }} selected ➤</p>
-    <DownloadButton />
-    <SvgButton name="copy" data-tooltip="Copy here" @click="op('cp', dst)" />
-    <SvgButton name="paste" data-tooltip="Move here" @click="op('mv', dst)" />
-    <SvgButton name="trash" data-tooltip="Delete ⚠️" @click="op('rm')" />
-    <button class="action-button unselect" data-tooltip="Unselect all" @click="store.selected.clear()">❌</button>
-  </template>
-</template>
-
-<script setup lang="ts">
-import {connect, controlUrl} from '@/repositories/WS'
-import { useMainStore } from '@/stores/main'
-import { computed } from 'vue'
-
-const store = useMainStore()
-const props = defineProps({
-  path: Array<string>
-})
-
-const dst = computed(() => props.path!.join('/'))
-const op = (op: string, dst?: string) => {
-  const sel = store.selectedFiles
-  const msg = {
-    op,
-    sel: sel.keys.map(key => {
-      const doc = sel.docs[key]!
-      return doc.loc ? `${doc.loc}/${doc.name}` : doc.name
-    })
-  }
-  // @ts-ignore
-  if (dst !== undefined) msg.dst = dst
-  const control = connect(controlUrl, {
-    message(ev: MessageEvent) {
-      const res = JSON.parse(ev.data)
-      if ('error' in res) {
-        console.error('Control socket error', msg, res.error)
-        store.error = res.error.message
-        return
-      } else if (res.status === 'ack') {
-        console.log('Control ack OK', res)
-        control.close()
-        store.selected.clear()
-        return
-      } else console.log('Unknown control response', msg, res)
-    }
-  })
-  control.onopen = () => {
-    control.send(JSON.stringify(msg))
-  }
-}
-
-</script>
-
-<style>
-.select-text {
-  color: var(--accent-color);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  margin: 0;
-}
-</style>
@@ -0,0 +1,211 @@
+<template>
+  <div class="selection-bar" v-if="store.selected.size">
+    <div class="select-info">
+      <template v-if="selectionDisplay.folders.length <= 5">
+        <span class="select-folders">
+          <template v-for="(folder, i) in selectionDisplay.folders" :key="folder.path">
+            <span v-if="i > 0" class="folder-sep">, </span>
+            <a :href="'/#/' + folder.path" class="folder-link" @click.prevent="navigateTo(folder.path)">{{ folder.name }}</a>
+          </template>
+        </span>
+      </template>
+      <template v-else>
+        <span class="select-count">{{ store.selected.size }} items from {{ selectionDisplay.numFolders }} folders</span>
+      </template>
+    </div>
+    <span class="select-size">{{ selectionDisplay.size }}</span>
+    <DownloadButton />
+    <SvgButton name="copy" tooltip="Copy here" @click="op('cp', dst)" />
+    <SvgButton name="paste" tooltip="Move here" @click="op('mv', dst)" />
+    <SvgButton name="trash" tooltip="Delete ⚠️" @click="op('rm')" />
+    <button
+      class="action-button unselect"
+      @click="store.selected.clear()"
+      @mouseenter="unselectTooltip?.startHover"
+      @mousemove="unselectTooltip?.updatePosition"
+      @mouseleave="unselectTooltip?.endHover"
+    >✖ selection</button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {connect, controlUrl} from '@/repositories/WS'
+import { useMainStore } from '@/stores/main'
+import { computed, ref } from 'vue'
+import { formatSize } from '@/utils'
+import CursorTooltip from './CursorTooltip.vue'
+import router from '@/router'
+
+const unselectTooltip = ref<InstanceType<typeof CursorTooltip> | null>(null)
+
+const store = useMainStore()
+const props = defineProps({
+  path: Array<string>
+})
+
+const dst = computed(() => props.path!.join('/'))
+
+const navigateTo = (path: string) => {
+  router.push('/' + path)
+}
+
+// Truncate long names to reasonable length
+const truncateName = (name: string, maxLen = 20): string => {
+  if (name.length <= maxLen) return name
+  return name.slice(0, maxLen - 1) + '…'
+}
+
+interface FolderInfo {
+  name: string
+  path: string
+  count: number
+}
+
+interface SelectionDisplay {
+  folders: FolderInfo[]
+  numFolders: number
+  size: string
+}
+
+const selectionDisplay = computed<SelectionDisplay>(() => {
+  const sel = store.selectedFiles
+
+  // Calculate total size
+  const totalSize = sel.keys.reduce((sum, key) => {
+    const doc = sel.docs[key]
+    return sum + (doc ? doc.size : 0)
+  }, 0)
+  const sizeStr = formatSize(totalSize)
+
+  // Group by folder location, storing file names
+  const folderGroups = new Map<string, string[]>()
+  for (const key of sel.keys) {
+    const doc = sel.docs[key]
+    if (!doc) continue
+    const loc = doc.loc || ''
+    if (!folderGroups.has(loc)) folderGroups.set(loc, [])
+    folderGroups.get(loc)!.push(doc.name)
+  }
+
+  const numFolders = folderGroups.size
+
+  const folders = Array.from(folderGroups.entries())
+    .sort((a, b) => a[0].localeCompare(b[0]))
+    .map(([loc, names]) => {
+      const count = names.length
+      // For single file, display truncated filename; for multiple, display folder name with count
+      let displayName: string
+      if (count === 1) {
+        displayName = truncateName(names[0]!)
+      } else {
+        const folderName = loc ? loc.split('/').pop()! : (store.server.name || 'Root')
+        displayName = `${truncateName(folderName)} (${count})`
+      }
+      return {
+        name: displayName,
+        path: loc,
+        count
+      }
+    })
+
+  return {
+    folders,
+    numFolders,
+    size: sizeStr
+  }
+})
+
+const op = (opName: string, dst?: string) => {
+  const sel = store.selectedFiles
+  const paths = sel.keys.map(key => {
+    const doc = sel.docs[key]!
+    return doc.loc ? `${doc.loc}/${doc.name}` : doc.name
+  })
+  const msg = {
+    op: opName,
+    sel: paths
+  }
+  // @ts-ignore
+  if (dst !== undefined) msg.dst = dst
+  // Hide items being deleted or moved (optimistic update)
+  if (opName === 'rm' || opName === 'mv') {
+    for (const path of paths) store.hideDoc(path)
+  }
+  const control = connect(controlUrl, {
+    message(ev: MessageEvent) {
+      const res = JSON.parse(ev.data)
+      if ('error' in res) {
+        console.error('Control socket error', msg, res.error)
+        store.error = res.error.message
+        // Restore hidden items on error
+        if (opName === 'rm' || opName === 'mv') {
+          for (const path of paths) store.unhideDoc(path)
+        }
+        return
+      } else if (res.status === 'ack') {
+        console.log('Control ack OK', res)
+        control.close()
+        store.selected.clear()
+        return
+      } else console.log('Unknown control response', msg, res)
+    }
+  })
+  control.onopen = () => {
+    control.send(JSON.stringify(msg))
+  }
+}
+
+</script>
+
+<style>
+.selection-bar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.3em 0.5em;
+  background: transparent;
+  color: var(--header-color);
+  font-size: var(--header-font-size);
+  gap: 0.3em;
+  flex-wrap: nowrap;
+  max-width: 100%;
+}
+.select-info {
+  color: var(--accent-color);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin: 0;
+  flex-shrink: 1;
+  min-width: 0;
+}
+.select-count {
+  font-weight: 500;
+}
+.select-folders {
+  display: inline;
+}
+.folder-link,
+.folder-link:link,
+.folder-link:visited,
+.folder-link:active {
+  color: var(--accent-color);
+  text-decoration: none;
+  cursor: pointer;
+}
+.folder-link:hover {
+  text-decoration: underline;
+  color: var(--accent-color);
+}
+.folder-sep {
+  color: var(--header-color);
+  opacity: 0.6;
+}
+.select-size {
+  color: var(--header-color);
+  opacity: 0.8;
+  font-family: 'Roboto Mono', monospace;
+  font-size: 0.9em;
+  margin-left: 0.5em;
+}
+</style>
@@ -0,0 +1,17 @@
+<template>
+  <span v-if="doc.sparseIndicator" class="sparse-indicator">{{ doc.sparseIndicator }}</span>
+</template>
+
+<script setup lang="ts">
+import { Doc } from '@/repositories/Document'
+
+defineProps<{
+  doc: Doc
+}>()
+</script>
+
+<style scoped>
+.sparse-indicator {
+  opacity: 0.7;
+}
+</style>
@@ -1,16 +1,28 @@
 <template>
-  <button class="action-button">
+  <button
+    class="action-button"
+    @mouseenter="tooltip?.startHover"
+    @mousemove="tooltip?.updatePosition"
+    @mouseleave="tooltip?.endHover"
+  >
    <component :is="icons[name]" />
    <slot></slot>
+    <CursorTooltip v-if="tooltipText" ref="tooltip" :text="tooltipText">{{ tooltipText }}</CursorTooltip>
  </button>
 </template>

 <script setup lang="ts">
 import { icons, type IconName } from '@/assets/svg'
+import { ref } from 'vue'
+import CursorTooltip from './CursorTooltip.vue'

-defineProps<{
+const props = defineProps<{
  name: IconName
+  tooltip?: string
 }>()
+
+const tooltip = ref<InstanceType<typeof CursorTooltip> | null>(null)
+const tooltipText = props.tooltip ?? ''
 </script>

 <style>
@@ -20,18 +32,29 @@ defineProps<{
  color: #ccc;
  cursor: pointer;
  transition: all 0.2s ease;
-  padding: 0.2em;
-  width: 3em;
-  height: 3em;
+  margin: 0 0.2em;
+  padding: 0;
+  width: 2.7em;
+  height: 2.7em;
+  min-width: 1.9em;
+  min-height: 1.9em;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 .action-button:hover,
 .action-button:focus {
  color: #fff;
  transform: scale(1.1);
 }
-svg {
+.action-button svg {
  fill: #ccc;
-  transform: fill 0.2s ease;
+  transition: fill 0.2s ease;
+  width: auto;
+  height: auto;
+  max-width: 100%;
+  max-height: 100%;
 }
 .action-button:hover svg,
 .action-button:focus svg {
@@ -53,15 +53,17 @@ const speeddisp = computed(() => speed.value ? speed.value.toFixed(speed.value <
 <style scoped>
 .transferprogress {
  --bar: var(--accent-color);
-  --nobar: var(--header-background);
+  --nobar: transparent;
  display: flex;
  flex-direction: column;
+  justify-content: center;
  color: var(--primary-color);
  width: 100%;
 }
 .statustext {
  display: flex;
  align-items: center;
+  justify-content: center;
  margin: 0 .5em;
  padding: 0.5rem 0;
 }
@@ -3,16 +3,20 @@
    <input ref="fileInput" @change="uploadHandler" type="file" multiple>
    <input ref="folderInput" @change="uploadHandler" type="file" webkitdirectory>
  </template>
-  <SvgButton name="add-file" data-tooltip="Upload files" @click="fileInput.click()" />
-  <SvgButton name="add-folder" data-tooltip="Upload folder" @click="folderInput.click()" />
+  <SvgButton name="add-file" tooltip="Upload files" @click="fileInput.click()" />
+  <SvgButton name="add-folder" tooltip="Upload folder" @click="folderInput.click()" />
 </template>

 <script setup lang="ts">
 import { connect, uploadUrl } from '@/repositories/WS';
 import { useMainStore } from '@/stores/main'
+import { getDocuments } from '@/stores/documentStore'
+import { Doc } from '@/repositories/Document'
 import { collator } from '@/utils';
 import { onMounted, onUnmounted, reactive, ref } from 'vue'
+import { useRouter } from 'vue-router'

+const router = useRouter()
 const fileInput = ref()
 const folderInput = ref()
 const store = useMainStore()
@@ -72,24 +76,53 @@ function uploadHandler(event: Event) {
 const uploadFiles = (infiles: File[]) => {
  const loc = props.path!.join('/')
  let files = []
+  let folderName = ''
  for (const file of infiles) {
+    const relPath = file.webkitRelativePath || file.name
+    if (!folderName && file.webkitRelativePath) folderName = relPath.split('/')[0] ?? ''
    files.push({
      file,
-      cloudName: loc + '/' + (file.webkitRelativePath || file.name),
+      cloudName: loc + '/' + relPath,
      cloudPos: 0,
    })
  }
  uploadCloudFiles(files)
+  if (folderName) router.push('/' + (loc ? loc + '/' : '') + folderName + '/')
 }
 const uploadCloudFiles = (files: CloudFile[]) => {
  const dotfiles = files.filter(f => f.cloudName.includes('/.'))
  if (dotfiles.length) {
    store.showToast("Won't upload dotfiles")
-    console.log("Dotfiles omitted", dotfiles)
    files = files.filter(f => !f.cloudName.includes('/.'))
  }
  if (!files.length) return
  files.sort((a, b) => collator.compare(a.cloudName, b.cloudName))
+  // Optimistic update: ghost folders and files
+  const now = Math.floor(Date.now() / 1000)
+  const docs = getDocuments()
+  const byPath = new Map(docs.map(d => [d.loc ? `${d.loc}/${d.name}` : d.name, d]))
+  // Also check existing ghosts
+  for (const g of store.ghosts) {
+    byPath.set(g.loc ? `${g.loc}/${g.name}` : g.name, g)
+  }
+  const added = new Set<string>()
+  for (const f of files) {
+    const lastSlash = f.cloudName.lastIndexOf('/')
+    const loc = lastSlash > 0 ? f.cloudName.slice(0, lastSlash) : ''
+    const name = f.cloudName.slice(lastSlash + 1)
+    // Ghost folders for intermediate directories
+    const parts = loc.split('/')
+    for (let i = 0; i < parts.length; i++) {
+      const folderPath = parts.slice(0, i + 1).join('/')
+      if (folderPath && !byPath.has(folderPath) && !added.has(folderPath)) {
+        store.addGhost(new Doc({ loc: parts.slice(0, i).join('/'), name: parts[i], key: crypto.randomUUID(), size: 0, allocated: 0, mtime: now, dir: true }))
+        added.add(folderPath)
+      }
+    }
+    // Ghost file or update existing (overwrite case doesn't need ghost, file already visible)
+    const existing = byPath.get(f.cloudName)
+    if (!existing) store.addGhost(new Doc({ loc, name, key: crypto.randomUUID(), size: f.file.size, allocated: 0, mtime: now, dir: false }))
+  }
  // @ts-ignore
  upqueue = [...upqueue, ...files]
  statsAdd(files)
@@ -3,6 +3,19 @@
    <div v-if="loading" class="loading">Loading...</div>
    <div v-else>
      <h3>Server Settings</h3>
+      <div class="form-row">
+        <label for="serverName">Server name</label>
+        <div class="input-with-hint">
+          <input
+            type="text"
+            id="serverName"
+            v-model="serverSettings.name"
+            @input="debouncedUpdateServerName"
+            :placeholder="store.server.name"
+          />
+          <small>Leave empty to use the share folder name</small>
+        </div>
+      </div>
      <div class="form-row">
        <label for="publicAccess">
          <input
@@ -62,7 +75,7 @@

 <script lang="ts" setup>
 import { ref, reactive, onMounted, watch } from 'vue'
-import { listUsers, createUser, updateUser, deleteUser, updatePublic } from '@/repositories/User'
+import { listUsers, createUser, updateUser, deleteUser, updatePublic, updateServerName, getServerConfig } from '@/repositories/User'
 import type { ISimpleError } from '@/repositories/Client'
 import { useMainStore } from '@/stores/main'

@@ -78,9 +91,12 @@ const users = ref<User[]>([])
 const success = ref('')
 const copyButtonText = ref('📋')
 const serverSettings = reactive({
-  public: false
+  public: false,
+  name: '',
 })

+let nameDebounceTimer: ReturnType<typeof setTimeout> | null = null
+
 const close = () => {
  store.dialog = ''
  success.value = ''
@@ -206,15 +222,48 @@ const updateServerSettings = async () => {
  }
 }

+const updateServerNameSetting = async () => {
+  try {
+    const result = await updateServerName(serverSettings.name)
+    // Update store with the effective name returned by the server
+    store.server.name = result.name
+  } catch (e) {
+    const httpError = e as ISimpleError
+    store.showToast(httpError.message || 'Failed to update server name')
+  }
+}
+
+const debouncedUpdateServerName = () => {
+  if (nameDebounceTimer) clearTimeout(nameDebounceTimer)
+  nameDebounceTimer = setTimeout(updateServerNameSetting, 400)
+}
+
+// Load server config from admin API
+const loadServerConfig = async () => {
+  try {
+    const config = await getServerConfig()
+    serverSettings.name = config.name
+    serverSettings.public = config.public
+  } catch (e) {
+    // Fallback to store values if API fails
+    serverSettings.public = store.server.public || false
+    serverSettings.name = ''
+  }
+}
+
 onMounted(() => {
  serverSettings.public = store.server.public || false
+  serverSettings.name = ''
  loading.value = false
 })

-// Load users when dialog opens (only in built-in auth mode)
+// Load users and config when dialog opens
 watch(() => store.dialog, (newVal) => {
-  if (newVal === 'usermgmt' && !store.server.paskia) {
-    loadUsers()
+  if (newVal === 'usermgmt') {
+    loadServerConfig()
+    if (!store.server.paskia) {
+      loadUsers()
+    }
  }
 })

@@ -225,4 +274,13 @@ watch(() => store.server.public, (newVal) => {

 <style scoped>
 /* Component-specific styles - most styling comes from ModalDialog.vue global styles */
+.input-with-hint {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+.input-with-hint small {
+  color: #666;
+  font-size: 0.75rem;
+}
 </style>
@@ -1,4 +1,4 @@
-import { formatSize, formatUnixDate, haystackFormat } from "@/utils"
+import { formatSize, formatUnixDate } from "@/utils"

 export type FUID = string

@@ -7,32 +7,45 @@ export type DocProps = {
  name: string
  key: FUID
  size: number
+  allocated: number
  mtime: number
  dir: boolean
+  ghost?: boolean
+  expires?: number  // Unix timestamp for ghost expiry
 }

 export class Doc {
  public loc: string = ""
  public key: FUID = ""
  public size: number = 0
+  public allocated: number = 0
  public mtime: number = 0
-  public haystack: string = ""
  public dir: boolean = false
+  public ghost: boolean = false
+  public expires: number = 0  // Unix timestamp for ghost expiry (0 = no expiry)
  /** @internal Use the name getter/setter instead */
  public _name: string = ""

  constructor(props: Partial<DocProps> = {}) {
    const { name, ...rest } = props
    Object.assign(this, rest)
-    if (name) this.name = name  // Use setter for validation
+    if (name) this._name = name  // Skip validation/haystack for bulk loading
  }
  get name() { return this._name }
  set name(name: string) {
    if (name.includes('/') || name.startsWith('.')) throw Error(`Invalid name: ${name}`)
    this._name = name
-    this.haystack = haystackFormat(name)
  }
  get sizedisp(): string { return formatSize(this.size) }
+  /** Returns a sparse allocation indicator symbol, or empty string if fully allocated */
+  get sparseIndicator(): string {
+    if (this.dir || this.size <= this.allocated) return ''
+    if (this.allocated === 0) return '⭕'  // exactly zero
+    const ratio = this.allocated / this.size
+    // Round to nearest 25%: ◔◑◕⬤
+    const rounded = Math.round(ratio * 4)  // 0,1,2,3,4
+    return ['◔', '◔', '◑', '◕', '⬤'][rounded]!  // 0 maps to ◔ since we handled exact 0 above
+  }
  get modified(): string { return formatUnixDate(this.mtime) }
  get url(): string {
    const p = this.loc ? `${this.loc}/${this.name}` : this.name
@@ -76,9 +89,10 @@ export type FileEntry = [
  number,  // level
  string,  // name
  FUID,
-  number, //mtime
-  number, // size
-  number, // isfile
+  number,  // mtime
+  number,  // size
+  number,  // allocated (actual disk usage)
+  number,  // isfile
 ]

 export type UpdateEntry = ['k', number] | ['d', number] | ['i', Array<FileEntry>]
@@ -55,3 +55,13 @@ export async function updatePublic(isPublic: boolean) {
  const data = await Client.put('/api/config/public', { public: isPublic })
  return data
 }
+
+export async function updateServerName(name: string) {
+  const data = await Client.put('/api/config/name', { name })
+  return data
+}
+
+export async function getServerConfig() {
+  const data = await Client.get('/api/config')
+  return data as { name: string, public: boolean }
+}
@@ -164,7 +164,8 @@ const handleWatchMessage = (event: MessageEvent) => {
      handleUpdateMessage(msg)
      break
    case !!msg.space:
-      console.log('Watch space', msg.space)
+      const store = useMainStore()
+      store.space = msg.space
      break
    case !!msg.error:
      handleError(msg)
@@ -0,0 +1,33 @@
+// Non-reactive document storage for the full file list
+// This avoids Vue reactivity overhead on large arrays
+
+import type { Doc } from '@/repositories/Document'
+import { shallowRef, triggerRef } from 'vue'
+
+// The main document list - shallowRef means only the reference is reactive, not the contents
+const documents = shallowRef<Doc[]>([])
+
+// Version counter for manual reactivity triggering
+let version = 0
+
+export function getDocuments(): Doc[] {
+  return documents.value
+}
+
+export function setDocuments(docs: Doc[]): void {
+  documents.value = docs
+  version++
+}
+
+export function getVersion(): number {
+  return version
+}
+
+// Trigger reactivity manually (e.g., after modifications)
+export function triggerUpdate(): void {
+  version++
+  triggerRef(documents)
+}
+
+// For computed dependencies that need to react to document changes
+export const documentRef = documents
@@ -5,25 +5,73 @@ import { collator } from '@/utils'
 import { watchConnect, resumeWatching } from '@/repositories/WS'
 import { sorted, type SortOrder } from '@/utils/docsort'
 import SearchWorker from '@/workers/searchWorker?worker'
+import { getDocuments, setDocuments, documentRef } from './documentStore'

 // Singleton search worker instance
 let searchWorker: Worker | null = null
 let searchId = 0
+let searchStore: ReturnType<typeof useMainStore> | null = null
+let loadingTimer: ReturnType<typeof setTimeout> | null = null
+let clearOldResultsTimer: ReturnType<typeof setTimeout> | null = null
+let lastResultUpdate = 0

 function getSearchWorker(): Worker {
  if (!searchWorker) {
    searchWorker = new SearchWorker()
+    // Set up message handler once
+    searchWorker.onmessage = (e) => {
+      if (!searchStore || e.data.id !== searchId) return  // Stale result
+
+      // Convert plain data back to Doc instances
+      const docs = e.data.docs.map((d: any) => new Doc(d))
+
+      // Cancel the clear-old-results timer since we have new results
+      if (clearOldResultsTimer) {
+        clearTimeout(clearOldResultsTimer)
+        clearOldResultsTimer = null
+      }
+
+      // Throttle rapid intermediate updates to reduce UI flicker
+      const now = performance.now()
+      if (!e.data.done && now - lastResultUpdate < 50) {
+        return  // Skip intermediate update if too recent
+      }
+      lastResultUpdate = now
+
+      searchStore.searchResults = docs
+
+      if (e.data.done) {
+        // Clear the loading timer and hide spinner
+        if (loadingTimer) {
+          clearTimeout(loadingTimer)
+          loadingTimer = null
+        }
+        searchStore.searchLoading = false
+      }
+    }
  }
  return searchWorker
 }

+// Ghost expiry time in seconds
+const GHOST_TTL = 30
+
+// Periodic cleanup interval
+let cleanupInterval: ReturnType<typeof setInterval> | null = null
+
 export const useMainStore = defineStore('main', {
  state: () => ({
-    document: [] as Doc[],
+    // Ghosts are temporary optimistic-update files/folders shown until server confirms
+    ghosts: [] as Doc[],
+    // Hidden paths for optimistic delete (path -> expiry timestamp)
+    hiddenPaths: new Map<string, number>(),
+    // Version counter to trigger reactivity when external document list changes
+    docVersion: 0,
    selected: new Set<FUID>([]),
    query: '' as string,
    searchResults: [] as Doc[],
    searchLoading: false,
+    _searchRouteTimer: null as ReturnType<typeof setTimeout> | null,
    fileExplorer: null as any,
    error: '' as string,  // Permanent status message (e.g., "Reconnecting...")
    toast: '' as string,  // Temporary toast (auto-dismisses)
@@ -44,6 +92,13 @@ export const useMainStore = defineStore('main', {
      username: '' as string,
      privileged: false as boolean,
      isLoggedIn: false as boolean,
+    },
+    space: {
+      disk: 0,
+      free: 0,
+      used: 0,
+      storage: 0,
+      allocated: 0,
    }
  }),
  persist: {
@@ -64,22 +119,79 @@ export const useMainStore = defineStore('main', {
    updateRoot(root: FileEntry[]) {
      const docs = []
      let loc = [] as string[]
-      for (const [level, name, key, mtime, size, isfile] of root) {
+      for (const [level, name, key, mtime, size, allocated, isfile] of root) {
        loc = loc.slice(0, level - 1)
        docs.push(new Doc({
          name,
          loc: level ? loc.join('/') : '/',
          key,
          size,
+          allocated,
          mtime,
          dir: !isfile,
        }))
        loc.push(name)
      }
-      this.document = docs
+      // Store in non-reactive external storage
+      setDocuments(docs)
+      // Clear ghosts that now exist in the real list
+      const realPaths = new Set(docs.map(d => d.loc ? `${d.loc}/${d.name}` : d.name))
+      this.ghosts = this.ghosts.filter(g => !realPaths.has(g.loc ? `${g.loc}/${g.name}` : g.name))
+      // Clear hidden paths that no longer exist (deletion confirmed)
+      for (const path of this.hiddenPaths.keys()) {
+        if (!realPaths.has(path)) this.hiddenPaths.delete(path)
+      }
+      // Start cleanup timer if not running
+      this.startCleanupTimer()
+      // Bump version to trigger reactive updates
+      this.docVersion++
      // Sync documents to search worker
      this.syncSearchWorker()
    },
+    /** Add a ghost file/folder for optimistic UI updates */
+    addGhost(doc: Doc) {
+      doc.ghost = true
+      doc.expires = Math.floor(Date.now() / 1000) + GHOST_TTL
+      this.ghosts.push(doc)
+    },
+    /** Clear all ghosts (e.g., on navigation or refresh) */
+    clearGhosts() {
+      this.ghosts = []
+    },
+    /** Hide a document path (optimistic delete) */
+    hideDoc(path: string) {
+      this.hiddenPaths.set(path, Math.floor(Date.now() / 1000) + GHOST_TTL)
+    },
+    /** Unhide a document path (delete failed, restore visibility) */
+    unhideDoc(path: string) {
+      this.hiddenPaths.delete(path)
+    },
+    /** Start the periodic cleanup timer */
+    startCleanupTimer() {
+      if (cleanupInterval) return
+      cleanupInterval = setInterval(() => this.cleanupExpired(), 5000)
+    },
+    /** Stop the cleanup timer */
+    stopCleanupTimer() {
+      if (cleanupInterval) {
+        clearInterval(cleanupInterval)
+        cleanupInterval = null
+      }
+    },
+    /** Remove expired ghosts and hidden paths */
+    cleanupExpired() {
+      const now = Math.floor(Date.now() / 1000)
+      const ghostsBefore = this.ghosts.length
+      const hiddenBefore = this.hiddenPaths.size
+      this.ghosts = this.ghosts.filter(g => g.expires > now)
+      for (const [path, expires] of this.hiddenPaths) {
+        if (expires <= now) this.hiddenPaths.delete(path)
+      }
+      // Stop timer if nothing to clean up
+      if (this.ghosts.length === 0 && this.hiddenPaths.size === 0) {
+        this.stopCleanupTimer()
+      }
+    },
    /** Show a temporary toast message that auto-dismisses */
    showToast(message: string, duration = 3000) {
      if (this.toastTimeout) {
@@ -103,7 +215,8 @@ export const useMainStore = defineStore('main', {
    syncSearchWorker() {
      const worker = getSearchWorker()
      // Send plain data to worker (no class instances)
-      const docData = this.document.map(doc => ({
+      const docs = getDocuments()
+      const docData = docs.map(doc => ({
        loc: doc.loc,
        name: doc.name,
        key: doc.key,
@@ -116,25 +229,44 @@ export const useMainStore = defineStore('main', {
    search(query: string, loc: string) {
      const worker = getSearchWorker()
      const id = ++searchId
+      searchStore = this  // Store reference for worker callback
+
+      // Update query immediately so watchers know we're handling this
+      this.query = query
+
+      // Cancel pending timers
+      if (loadingTimer) {
+        clearTimeout(loadingTimer)
+        loadingTimer = null
+      }
+      if (clearOldResultsTimer) {
+        clearTimeout(clearOldResultsTimer)
+        clearOldResultsTimer = null
+      }

      if (!query) {
+        // Clear results only when search is closed
        this.searchResults = []
        this.searchLoading = false
        return
      }

-      this.searchLoading = true
-
-      worker.onmessage = (e) => {
-        if (e.data.id !== searchId) return  // Stale result
-
-        // Convert plain data back to Doc instances
-        this.searchResults = e.data.docs.map((d: any) => new Doc(d))
-
-        if (e.data.done) {
-          this.searchLoading = false
+      // Keep old results briefly to avoid flicker on fast cached searches
+      // But clear them after 50ms if no new results have arrived
+      clearOldResultsTimer = setTimeout(() => {
+        if (searchId === id) {
+          this.searchResults = []
        }
-      }
+        clearOldResultsTimer = null
+      }, 50)
+
+      // Delay showing loading indicator to avoid flicker on fast searches
+      loadingTimer = setTimeout(() => {
+        if (searchId === id) {  // Still the current search
+          this.searchLoading = true
+        }
+        loadingTimer = null
+      }, 100)

      worker.postMessage({ type: 'search', query, loc, id })
    },
@@ -148,7 +280,11 @@ export const useMainStore = defineStore('main', {
    clearSensitiveData() {
      // Clear all sensitive state on logout or auth failure
      localStorage.removeItem('cista-files')
-      this.document = []
+      setDocuments([])
+      this.ghosts = []
+      this.hiddenPaths.clear()
+      this.stopCleanupTimer()
+      this.docVersion++
      this.selected.clear()
      this.user.username = ''
      this.user.privileged = false
@@ -174,12 +310,25 @@ export const useMainStore = defineStore('main', {
      resumeWatching()
    },
    toggleSort(name: SortOrder) {
-      if (this.query) this.prefs.sortFiltered = this.prefs.sortFiltered === name ? '' : name
-      else this.prefs.sortListing = this.prefs.sortListing === name ? '' : name
+      const current = this.query ? this.prefs.sortFiltered : this.prefs.sortListing
+      const newOrder = current === name ? '' : name
+      if (this.query) this.prefs.sortFiltered = newOrder
+      else this.prefs.sortListing = newOrder
+      this.showSortToast(newOrder)
    },
    sort(name: SortOrder | '') {
      if (this.query) this.prefs.sortFiltered = name
      else this.prefs.sortListing = name
+      this.showSortToast(name)
+    },
+    showSortToast(order: SortOrder | '') {
+      const labels: Record<string, string> = {
+        '': 'Folders first',
+        'name': 'Alphabetical order',
+        'modified': 'Newest first',
+        'size': 'Largest first',
+      }
+      this.showToast(labels[order] || order, 1200)
    },
    focusBreadcrumb() {
      (document.querySelector('.breadcrumb') as HTMLAnchorElement).focus()
@@ -194,8 +343,21 @@ export const useMainStore = defineStore('main', {
  getters: {
    sortOrder(): SortOrder { return this.query ? this.prefs.sortFiltered : this.prefs.sortListing },
    isUserLogged(): boolean { return this.user.isLoggedIn },
-    recentDocuments(): Doc[] { return sorted(this.document, 'modified') },
+    /** Get documents count (triggers on docVersion change) */
+    documentCount(): number {
+      // Access docVersion to make this reactive
+      void this.docVersion
+      return getDocuments().length
+    },
+    recentDocuments(): Doc[] {
+      // Access docVersion to make this reactive
+      void this.docVersion
+      return sorted(getDocuments(), 'modified')
+    },
    selectedFiles(): SelectedItems {
+      // Access docVersion to make this reactive
+      void this.docVersion
+      const docs = getDocuments()
      const selected = this.selected
      const found = new Set<FUID>()
      const ret: SelectedItems = {
@@ -204,7 +366,7 @@ export const useMainStore = defineStore('main', {
        keys: [],
        recursive: [],
      }
-      for (const doc of this.document) {
+      for (const doc of docs) {
        if (selected.has(doc.key)) {
          found.add(doc.key)
          ret.keys.push(doc.key)
@@ -225,7 +387,7 @@ export const useMainStore = defineStore('main', {
        const basepath = base.loc ? `${base.loc}/${base.name}` : base.name
        const nremove = base.loc.length
        add(base.name, basepath, base)
-        for (const doc of this.document) {
+        for (const doc of docs) {
          if (doc.loc === basepath || doc.loc.startsWith(basepath) && doc.loc[basepath.length] === '/') {
            const full = doc.loc ? `${doc.loc}/${doc.name}` : doc.name
            const rel = full.slice(nremove)
@@ -1,10 +1,13 @@
 import { useMainStore } from '@/stores/main'
+import { getDocuments } from '@/stores/documentStore'


 export const exists = (path: string[]) => {
  const store = useMainStore()
+  // Access docVersion to make this reactive
+  void store.docVersion
  const p = path.join('/')
-  return store.document.some(doc => (doc.loc ? `${doc.loc}/${doc.name}` : doc.name) === p)
+  return getDocuments().some(doc => (doc.loc ? `${doc.loc}/${doc.name}` : doc.name) === p)
 }

 /** Strip file extension intelligently (handles .tar.gz, name.with.dots.pdf, etc.) */
@@ -2,14 +2,14 @@
  <Gallery
    v-if="store.prefs.gallery"
    ref="fileExplorer"
-    :key="`gallery-${Router.currentRoute.value.path}`"
+    :key="`gallery-${folderPath}`"
    :path="props.path"
    :documents="documents"
  />
  <FileExplorer
    v-else
    ref="fileExplorer"
-    :key="`explorer-${Router.currentRoute.value.path}`"
+    :key="`explorer-${folderPath}`"
    :path="props.path"
    :documents="documents"
  />
@@ -20,7 +20,7 @@
 <script setup lang="ts">
 import { watchEffect, ref, computed, watch } from 'vue'
 import { useMainStore } from '@/stores/main'
-import Router from '@/router/index'
+import { getDocuments } from '@/stores/documentStore'
 import { collator } from '@/utils'
 import { sorted, sortedGrouped } from '@/utils/docsort'
 import FileExplorer from '@/components/FileExplorer.vue'
@@ -32,10 +32,15 @@ const props = defineProps<{
  query: string
 }>()

-// Trigger search when query changes
+// Folder path for component keys - only recreate component when folder changes, not search
+const folderPath = computed(() => props.path.join('/'))
+
+// Handle route-based search changes (back/forward navigation, direct URL)
+// Skip if store.query already matches (means we triggered this via typing)
 watch(
  () => [props.query, props.path.join('/')] as const,
  ([query, loc]) => {
+    if (store.query === query) return  // Already searching this query
    store.search(query, loc)
  },
  { immediate: true }
@@ -46,13 +51,22 @@ const documents = computed(() => {
  const query = props.query

  // List the current location (no search)
-  if (!query) return sorted(
-    store.document.filter(doc => doc.loc === loc),
-    store.prefs.sortListing,
-  )
+  if (!query) {
+    // Access docVersion to make this reactive to document changes
+    void store.docVersion
+    const hidden = store.hiddenPaths
+    const docs = getDocuments().filter(doc => doc.loc === loc && !hidden.has(doc.loc ? `${doc.loc}/${doc.name}` : doc.name))
+    // Overlay ghosts for this location (excluding hidden ones)
+    const ghosts = store.ghosts.filter(g => g.loc === loc && !hidden.has(g.loc ? `${g.loc}/${g.name}` : g.name))
+    // Merge: ghosts that don't conflict with real docs
+    const realNames = new Set(docs.map(d => d.name))
+    const merged = [...docs, ...ghosts.filter(g => !realNames.has(g.name))]
+    return sorted(merged, store.prefs.sortListing)
+  }

-  // Search results from worker
-  const docs = store.searchResults
+  // Search results from worker (also filter hidden)
+  const hidden = store.hiddenPaths
+  const docs = store.searchResults.filter(doc => !hidden.has(doc.loc ? `${doc.loc}/${doc.name}` : doc.name))

  // Custom sort override in effect? Use grouped sorting to keep folders together
  const order = store.prefs.sortFiltered
@@ -64,11 +78,10 @@ const documents = computed(() => {

 watchEffect(() => {
  store.fileExplorer = fileExplorer.value
-  store.query = props.query
 })

 // Only auto-switch gallery mode when entering a new folder or on initial file list load
-watch([() => props.path.join('/'), () => store.document.length], ([path, len], [oldPath, oldLen]) => {
+watch([() => props.path.join('/'), () => store.documentCount], ([path, len], [oldPath, oldLen]) => {
  // React to path change or initial document load (0 → non-zero)
  if (path === oldPath && oldLen !== undefined && oldLen > 0) return
  store.prefs.gallery = documents.value.some(d => d.previewable)
@@ -36,142 +36,190 @@ interface ResultMessage {
 }

 // Worker state
-let documents: WorkerDoc[] = []
 let recentDocuments: WorkerDoc[] = []  // Sorted by mtime descending
 let currentSearchId = 0

-// Haystack formatting (same as main thread utils)
-function haystackFormat(str: string): string {
-  const based = str.normalize('NFKD').replace(/[\u0300-\u036f]/g, '').toLowerCase()
-  return '^' + based + '$'
+// Search result cache - cleared when documents change
+interface CacheEntry {
+  query: string         // Normalized query string
+  results: WorkerDoc[]  // Matched results (up to limit)
+  complete: boolean     // True if search scanned all documents
+}
+const searchCache: CacheEntry[] = []
+const MAX_CACHE_SIZE = 10
+const RESULT_LIMIT = 100
+
+// Normalize string for search (remove diacritics, lowercase)
+// Haystack adds ^ and $ markers to allow matching start/end of name
+function normalizeHaystack(str: string): string {
+  return '^' + str.normalize('NFKD').replace(/[\u0300-\u036f]/g, '').toLowerCase() + '$'
 }

-// Needle formatting
-function needleFormat(query: string) {
-  const based = query.normalize('NFKD').replace(/[\u0300-\u036f]/g, '').toLowerCase()
-  return { based, words: based.split(/\s+/) }
+function normalizeQuery(str: string): string {
+  return str.normalize('NFKD').replace(/[\u0300-\u036f]/g, '').toLowerCase()
 }

-// Test if haystack includes needle
-function localeIncludes(haystack: string, filter: { based: string; words: string[] }): boolean {
-  const { based, words } = filter
-  return haystack.includes(based) || (words && words.every(word => haystack.includes(word)))
+// Test if document matches search query
+function matches(haystack: string, query: string, words: string[]): boolean {
+  return haystack.includes(query) || words.every(word => haystack.includes(word))
 }

 // Collator for sorting
-const collator = new Intl.Collator('en', { sensitivity: 'base', numeric: true, usage: 'search' })
+const collator = new Intl.Collator('en', { sensitivity: 'base', numeric: true })

-// Sort by mtime descending
-function sortByRecent(docs: WorkerDoc[]): WorkerDoc[] {
-  return [...docs].sort((a, b) => b.mtime - a.mtime)
+// Yield control to allow new messages to be processed
+const yieldControl = (): Promise<void> => new Promise(resolve => setTimeout(resolve, 0))
+
+// Find best cache entry to filter from
+// Returns entry if new query's results are guaranteed to be a subset of cached results
+// Only valid if the cached search was complete (scanned all documents)
+function findCacheSubset(query: string): CacheEntry | null {
+  // Look for a cached query that the new query starts with
+  // e.g., cached "foo" can be used for "foobar" or "foo bar"
+  // The longer the prefix, the better (fewer items to filter)
+  // IMPORTANT: Only use complete cache entries - incomplete ones may have
+  // missed results that would match the more specific query
+  let best: CacheEntry | null = null
+  for (const entry of searchCache) {
+    if (entry.complete && query.startsWith(entry.query)) {
+      if (!best || entry.query.length > best.query.length) {
+        best = entry
+      }
+    }
+  }
+  return best
 }

-// Yield control to check for new messages
-function yieldControl(): Promise<void> {
-  return new Promise(resolve => setTimeout(resolve, 0))
+// Add result to cache
+function addToCache(query: string, results: WorkerDoc[], complete: boolean) {
+  // Remove existing entry for same query if any
+  const idx = searchCache.findIndex(e => e.query === query)
+  if (idx !== -1) searchCache.splice(idx, 1)
+  // Add to front (most recent)
+  searchCache.unshift({ query, results, complete })
+  // Trim cache
+  if (searchCache.length > MAX_CACHE_SIZE) searchCache.pop()
+}
+
+// Clear cache (called when documents change)
+function clearCache() {
+  searchCache.length = 0
 }

 // Perform search with incremental results
-async function performSearch(query: string, loc: string, searchId: number) {
-  const needle = needleFormat(query)
-  const limit = 100
-  const batchSize = 1000
+async function performSearch(rawQuery: string, loc: string, searchId: number) {
+  const query = normalizeQuery(rawQuery)
+  const words = query.split(/\s+/)
  const results: WorkerDoc[] = []
+  let lastResultCount = 0

-  for (let i = 0; i < recentDocuments.length && results.length < limit; i += batchSize) {
-    // Check if search was superseded
-    if (currentSearchId !== searchId) return
+  // Check cache for exact match
+  const exactMatch = searchCache.find(e => e.query === query)
+  if (exactMatch) {
+    if (currentSearchId === searchId) {
+      postResults(exactMatch.results, rawQuery, loc, searchId, true)
+    }
+    return
+  }
+
+  // Check if we can filter from a cached superset
+  const cacheEntry = findCacheSubset(query)
+  if (cacheEntry) {
+    // Fast path: filter from cached results (only used for complete cache entries)
+    for (const doc of cacheEntry.results) {
+      if (matches(doc.haystack, query, words)) {
+        results.push(doc)
+      }
+    }
+    // Cache entry was complete, so filtered results are also complete
+    addToCache(query, results, true)
+
+    if (currentSearchId === searchId) {
+      postResults(results, rawQuery, loc, searchId, true)
+    }
+    return
+  }
+
+  // Slow path: scan all documents
+  const batchSize = 500
+  for (let i = 0; i < recentDocuments.length && results.length < RESULT_LIMIT; i += batchSize) {
+    if (currentSearchId !== searchId) return  // Superseded

    // Process batch
    const end = Math.min(i + batchSize, recentDocuments.length)
-    for (let j = i; j < end && results.length < limit; j++) {
+    for (let j = i; j < end && results.length < RESULT_LIMIT; j++) {
      const doc = recentDocuments[j]!
-      if (localeIncludes(doc.haystack, needle)) {
+      if (matches(doc.haystack, query, words)) {
        results.push(doc)
      }
    }

-    // Post incremental results if we found any in this batch
-    if (results.length > 0 && currentSearchId === searchId) {
-      const sortedResults = sortResults(results, query, loc)
-      postMessage({
-        type: 'results',
-        docs: sortedResults.map(stripHaystack),
-        id: searchId,
-        done: false
-      } as ResultMessage)
+    // Post incremental results if we found new matches
+    if (results.length > lastResultCount && currentSearchId === searchId) {
+      lastResultCount = results.length
+      postResults(results, rawQuery, loc, searchId, false)
    }

    // Yield control between batches
-    if (i + batchSize < recentDocuments.length && results.length < limit) {
+    if (i + batchSize < recentDocuments.length && results.length < RESULT_LIMIT) {
      await yieldControl()
    }
  }

-  // Post final results
+  // Cache and post final results
+  addToCache(query, results, results.length < RESULT_LIMIT)
  if (currentSearchId === searchId) {
-    const sortedResults = sortResults(results, query, loc)
-    postMessage({
-      type: 'results',
-      docs: sortedResults.map(stripHaystack),
-      id: searchId,
-      done: true
-    } as ResultMessage)
+    postResults(results, rawQuery, loc, searchId, true)
  }
 }

+// Post results to main thread
+function postResults(docs: WorkerDoc[], query: string, loc: string, id: number, done: boolean) {
+  const sorted = sortResults(docs, query, loc)
+  postMessage({
+    type: 'results',
+    docs: sorted.map(({ haystack, ...rest }) => rest),
+    id,
+    done
+  } as ResultMessage)
+}
+
 // Sort results by relevance
 function sortResults(docs: WorkerDoc[], query: string, loc: string): WorkerDoc[] {
  const locsub = loc + '/'
  return [...docs].sort((a, b) => (
    // Current folder first
-    // @ts-ignore
-    (b.loc === loc) - (a.loc === loc) ||
+    Number(b.loc === loc) - Number(a.loc === loc) ||
    // Then subfolders
-    // @ts-ignore
-    (b.loc.slice(0, locsub.length) === locsub) - (a.loc.slice(0, locsub.length) === locsub) ||
+    Number(b.loc.startsWith(locsub)) - Number(a.loc.startsWith(locsub)) ||
    // Then by location
    collator.compare(a.loc, b.loc) ||
-    // Files after folders
-    // @ts-ignore
-    (a.dir === false) - (b.dir === false) ||
+    // Folders before files
+    Number(b.dir) - Number(a.dir) ||
    // Exact name match first
-    // @ts-ignore
-    b.name.includes(query) - a.name.includes(query) ||
+    Number(b.name.includes(query)) - Number(a.name.includes(query)) ||
    // Finally by name
    collator.compare(a.name, b.name)
  ))
 }

-// Strip haystack before sending back to main thread
-function stripHaystack(doc: WorkerDoc): DocData {
-  const { haystack, ...rest } = doc
-  return rest
-}
-
 // Handle incoming messages
 self.onmessage = async (e: MessageEvent<IncomingMessage>) => {
  const msg = e.data

  if (msg.type === 'update') {
-    // Update document list with haystacks
-    documents = msg.documents.map(doc => ({
-      ...doc,
-      haystack: haystackFormat(doc.name)
-    }))
-    recentDocuments = sortByRecent(documents)
+    // Update document list with haystacks, sorted by mtime descending
+    recentDocuments = msg.documents
+      .map(doc => ({ ...doc, haystack: normalizeHaystack(doc.name) }))
+      .sort((a, b) => b.mtime - a.mtime)
+    clearCache()
  } else if (msg.type === 'search') {
    currentSearchId = msg.id
    if (msg.query) {
      await performSearch(msg.query, msg.loc, msg.id)
    } else {
-      // Empty query - no results needed (main thread handles folder listing)
-      postMessage({
-        type: 'results',
-        docs: [],
-        id: msg.id,
-        done: true
-      } as ResultMessage)
+      // Empty query - no results needed
+      postMessage({ type: 'results', docs: [], id: msg.id, done: true } as ResultMessage)
    }
  }
 }
@@ -6,10 +6,10 @@
 * - Builds to the Python module's frontend-build directory
 *
 * Environment variables (with defaults):
- *   FASTAPI_VUE_BACKEND_URL=http://localhost:5180 - Backend API URL for proxying
+ *   FASTAPI_VUE_BACKEND_URL=http://localhost:8999 - Backend API URL for proxying
 */

-const backendUrl = process.env.FASTAPI_VUE_BACKEND_URL || "http://localhost:5180"
+const backendUrl = process.env.FASTAPI_VUE_BACKEND_URL || "http://localhost:8999"

 export default function fastapiVue({ paths = ["/api"] } = {}) {
  // Build proxy configuration for each path
@@ -27,8 +27,8 @@ dependencies = [
    "argon2-cffi>=25.1.0",
    "av>=15.0.0",
    "blake3>=1.0.5",
-    "docopt>=0.6.2",
-    "fastapi-vue>=0.5.1",
+    "docopt-ng>=0.9.0",
+    "fastapi-vue>=0.5.2",
    "fastapi[standard]>=0.128.0",
    "html5tagger>=1.3.0",
    "httpx>=0.28.0",
@@ -2,11 +2,13 @@
 """Run Vite development server for frontend and Cista backend with auto-reload.

 Usage:
-    uv run scripts/devserver.py [frontend] [--backend backend]
+    uv run scripts/devserver.py [-l listen] [--backend backend] [cista_args...]

 Options:
-    frontend    Vite frontend endpoint (default: localhost:5173)
-    --backend   Cista backend endpoint (default: from config, or :8000)
+    -l, --listen  Vite frontend endpoint (default: localhost:8989)
+    --backend     Cista backend endpoint (default: from config, or :8999)
+
+Any additional arguments are passed to the cista command.

 Environment:
    JS_RUNTIME  Path or name of JS runtime to use (deno, npm/node or bun).
@@ -26,10 +28,12 @@ from devutil import ProcessGroup, logger, ready, setup_vite  # type: ignore
 from cista import config
 from cista.serve import parse_listen

-DEFAULT_BACKEND_PORT = 8000
+DEFAULT_BACKEND_PORT = 8999


-def setup_sanic_backend(listen: str | None) -> tuple[str, list[str]]:
+def setup_sanic_backend(
+    listen: str | None, extra_args: list[str]
+) -> tuple[str, list[str]]:
    """Parse backend listen address and build cista dev command.

    Returns (url, cmd).
@@ -40,11 +44,13 @@ def setup_sanic_backend(listen: str | None) -> tuple[str, list[str]]:
    port = opts.get("port", DEFAULT_BACKEND_PORT)
    host = opts.get("host", "localhost") or "localhost"

-    cmd = ["cista", "--dev", "-l", listen]
+    cmd = ["cista", "--dev", "-l", listen] + extra_args
    return f"http://{host}:{port}", cmd


-async def run_devserver(frontend: str | None, backend: str | None) -> None:
+async def run_devserver(
+    frontend: str | None, backend: str | None, extra_args: list[str]
+) -> None:
    reporoot = Path(__file__).parent.parent
    front = reporoot / "frontend"
    if not (front / "package.json").exists():
@@ -52,7 +58,7 @@ async def run_devserver(frontend: str | None, backend: str | None) -> None:
        raise SystemExit(1)

    frontend_url, npm_install, vite = setup_vite(frontend or "")
-    backend_url, sanic_cmd = setup_sanic_backend(backend)
+    backend_url, sanic_cmd = setup_sanic_backend(backend, extra_args)

    # Tell vite where to proxy API requests
    os.environ["FASTAPI_VUE_BACKEND_URL"] = backend_url
@@ -78,26 +84,27 @@ def main():
        epilog=HELP_EPILOG,
    )
    parser.add_argument(
-        "frontend",
-        nargs="?",
+        "-l",
+        "--listen",
        metavar="host:port",
-        help="Vite frontend endpoint (default: localhost:5173)",
+        help="Vite frontend endpoint (default: localhost:8989)",
    )
    parser.add_argument(
        "--backend",
-        "-l",
        metavar="host:port",
-        help="Cista backend endpoint (default: from config, or :8000)",
+        help="Cista backend endpoint (default: from config, or :8999)",
    )
-    args = parser.parse_args()
+    args, unknown = parser.parse_known_args()
    with contextlib.suppress(KeyboardInterrupt):
-        asyncio.run(run_devserver(args.frontend, args.backend))
+        asyncio.run(run_devserver(args.listen, args.backend, unknown))


 HELP_EPILOG = """
-  scripts/devserver.py                       # Default ports
-  scripts/devserver.py 3000                  # Vite on localhost:3000
-  scripts/devserver.py :3000 --backend 8080  # Vite on *:3000, backend on :8080
+  scripts/devserver.py                        # Default ports
+  scripts/devserver.py -l 3000                # Vite on localhost:3000
+  scripts/devserver.py -l :3000 --backend 8080  # Vite on *:3000, backend on :8080
+
+  Additional arguments are passed to the cista backend command.

  JS_RUNTIME environment variable can be used to select the JS runtime
 """
@@ -7,8 +7,8 @@ import httpx
 from buildutil import find_dev_tool, find_install_tool, logger
 from fastapi_vue.hostutil import parse_endpoint

-DEFAULT_VITE_PORT = 5173
-DEFAULT_BACKEND_PORT = 5180
+DEFAULT_VITE_PORT = 8989
+DEFAULT_BACKEND_PORT = 8999


 class ProcessGroup:
@@ -10,7 +10,9 @@ def decode(data: str):

 # Helper function to create a list of FileEntry objects
 def f(count, start=0):
-    return [FileEntry(i, str(i), str(i), 0, 0, 0) for i in range(start, start + count)]
+    return [
+        FileEntry(i, str(i), str(i), 0, 0, 0, 0) for i in range(start, start + count)
+    ]


 def test_identical_lists():
@@ -35,8 +37,8 @@ def test_insertions():


 def test_insertion_at_end():
-    old_list = [*f(3), FileEntry(1, "xxx", "xxx", 0, 0, 1)]
-    newfile = FileEntry(1, "yyy", "yyy", 0, 0, 1)
+    old_list = [*f(3), FileEntry(1, "xxx", "xxx", 0, 0, 0, 1)]
+    newfile = FileEntry(1, "yyy", "yyy", 0, 0, 0, 1)
    new_list = [*old_list, newfile]
    expected = [UpdKeep(4), UpdIns([newfile])]
    assert decode(format_update(old_list, new_list)) == expected
Author	SHA1	Message	Date
LeoVasanko	f40d9c1abd	Cache previews in server RAM for much faster access (they are about 70kB each).	2026-02-04 20:56:16 +00:00
LeoVasanko	3d8845cf99	Brighter low free space colors.	2026-02-04 20:40:59 +00:00
LeoVasanko	87e1443e7d	Auth restricted endpoint is picky about the trailing slash, use it consistently.	2026-02-04 20:35:29 +00:00
LeoVasanko	f45c57e901	Auth mode indication on startupbox	2026-02-04 20:24:21 +00:00
LeoVasanko	41686d1dd1	Correctly handle customized server name in admin settings dialog.	2026-02-04 20:15:56 +00:00
LeoVasanko	cc351bb992	Space usage widget show full name if possible, allow longer names.	2026-02-04 20:12:49 +00:00
LeoVasanko	c3abbe0a3b	Rename HeaderSelected to SelectionToolbar.	2026-02-04 20:01:05 +00:00
LeoVasanko	127caeedea	Improved selection toolbar UX.	2026-02-04 19:57:31 +00:00
LeoVasanko	113bc56351	README	2026-02-04 19:23:48 +00:00
LeoVasanko	c7727c72d9	Make devserver script take --listen argument for vite, while forwarding other args correctly to backend	2026-02-04 19:23:34 +00:00
LeoVasanko	85b3aa6b81	Consistent header and footer sizing.	2026-02-04 19:19:41 +00:00
LeoVasanko	62b44ddb43	Fix free/used disk space handling. Implement file disk usage tracking. Display indicators on FileExplorer for incomplete files (sparse allocation, upload in progress).	2026-02-04 18:54:54 +00:00
LeoVasanko	60a53ef3d3	Implement server name config to override the default of using share folder name.	2026-02-04 18:00:21 +00:00
LeoVasanko	acd38c2235	Punch a hole in the pie to make a donut.	2026-02-04 17:27:56 +00:00
LeoVasanko	2f38f15afa	Unused imports	2026-02-04 17:09:14 +00:00
LeoVasanko	0fc28e56bb	Don't allow header scale larger with the window above 1000px, while the rest of the app keeps scaling by root font size.	2026-02-04 17:08:32 +00:00
LeoVasanko	22b0e503e0	Revisited diskspace widget animations and styling.	2026-02-04 17:01:22 +00:00
LeoVasanko	e3a4ecdcc2	More consistent and properly scaling header layout and positioning. Search keyboard tooltip hidden for mobile users.	2026-02-04 16:13:03 +00:00
LeoVasanko	9f363e3f66	New much prettier disk space widget.	2026-02-04 15:14:06 +00:00
LeoVasanko	8270dd0cc2	Refactor to make full file list completely non-reactive because pinia persistence was causing long delays especially while searching when there were a lot of files. Implement better ghosts that do not alter the file list.	2026-02-04 02:03:22 +00:00
LeoVasanko	1af6cd82fe	Prebuild lookup structures to reduce UI lag on very large file lists.	2026-02-04 00:18:28 +00:00
LeoVasanko	0bc2a12cfa	Make devserver script pass extra args to cista CLI.	2026-02-04 00:01:02 +00:00
LeoVasanko	9e07a3f40d	Require new fastapi-vue for unix socket compatibility.	2026-02-01 07:10:21 +00:00
LeoVasanko	2867b1075d	Disk space pie chart.	2026-02-01 06:59:15 +00:00
LeoVasanko	4fc8e29cc1	Implement a larger set of file menu options.	2026-02-01 06:33:34 +00:00
LeoVasanko	55f9117b3e	Remove refresh wwwroot support and static files serving, only using vite to serve frontend in dev mode (avoid accidentally using stale builds).	2026-02-01 06:14:35 +00:00
LeoVasanko	2b6746c55e	Change default port to 8989 like Droppy. Using 8999 for backend in dev mode.	2026-02-01 06:09:56 +00:00
LeoVasanko	1ed3779933	Use fastapi-vue parse_endpoint instead of our own logic.	2026-02-01 06:00:30 +00:00
LeoVasanko	a95cf7be94	Better UI feedback on search order changes.	2026-02-01 05:48:15 +00:00
LeoVasanko	d18501f633	Fix a search caching issue.	2026-02-01 05:38:48 +00:00
LeoVasanko	ed697db871	New header/footer layout and styles. Use cursorTooltip in more places, make it prettier. Fix tooltip still sometimes activating with touch (now only with mouse).	2026-02-01 05:19:42 +00:00
LeoVasanko	856e8c4cc8	Remove download to folder, just download zip or single file. The folder download is still accessible by Alt+Click on the download button (in the few browsers that support it).	2026-02-01 03:47:14 +00:00
LeoVasanko	f8a6eacb06	Automatically navigate into newly uploaded folders.	2026-02-01 03:27:13 +00:00
LeoVasanko	e9a82e84ad	Implement ghost items reflecting pending changes from frontend (e.g. files being uploaded) until the server acknowledges them. This gives immediate UI feedback and is clearer in cases.	2026-02-01 03:23:43 +00:00
LeoVasanko	ccd05b53f4	Remove dead code.	2026-02-01 02:49:50 +00:00
LeoVasanko	032ad13b97	Unified watcher that may receive events from inotify and other sources. Added change notify messages from control and upload WebSockets. Cleanup debug printouts.	2026-02-01 02:44:52 +00:00
LeoVasanko	4eae75c84b	New inotify watcher with efficient algorithms.	2026-01-31 23:46:43 +00:00
LeoVasanko	252b31a293	Performance profile file change watching.	2026-01-31 22:53:17 +00:00
LeoVasanko	feff202161	Debouncing to avoid UI flicker while typing in search.	2026-01-31 22:42:16 +00:00
LeoVasanko	d15bfc86c4	Search optimizations and fixes. Prevent re-renders on hash change (redux). Clear previous search results at the start of a new search.	2026-01-31 22:37:47 +00:00
LeoVasanko	f94ccc01c6	Optimizing the search faster; don't trigger full re render by URL changes.	2026-01-31 22:17:05 +00:00
LeoVasanko	bc355d991d	Simplified startup box unix socket formatting.	2026-01-31 22:09:57 +00:00
LeoVasanko	e7ebad3c36	Upgrade to docopt-ng because docopt is no longer maintained.	2026-01-31 22:06:03 +00:00
LeoVasanko	036c4342de	Better error logging on preview generation errors.	2026-01-31 22:00:26 +00:00