Punch a hole in the pie to make a donut.

cista/__main__.py

@@ -57,7 +57,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 +80,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 +140,8 @@ def _main():
     if listen:
         settings["listen"] = listen
     elif not exists:
-        settings["listen"] = ":8000"
+        settings["listen"] = ":8989"
-    operation = config.update_config(settings)
+    config.update_config(settings)
     # Prepare to serve
     url, opts = serve.parse_listen(config.config.listen)
     if not config.config.path.is_dir():
@@ -186,7 +186,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 +215,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"
         )
 
 

cista/api.py

@@ -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))
 
 

cista/app.py

@@ -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 not app.debug:
-    if app.debug:
+        await load_wwwroot(app)
-        app.add_task(refresh_wwwroot(), name="refresh_wwwroot")
 
 
 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})

cista/protocol.py

@@ -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
 

cista/serve.py

@@ -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("/"):
+    # Domain name (e.g. example.com) -> HTTPS with LetsEncrypt
-        unix = Path(listen).resolve()
+    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}
+    host, port = ep["host"], ep["port"]
-    try:
+    # When binding all interfaces, use single_listener=False for Sanic
-        addr, _port = listen.split(":", 1)
+    if len(endpoints) > 1:
-        port = int(_port)
+        return f"http://localhost:{port}", {
-    except Exception:
+            "host": host,
-        raise ValueError(f"Invalid listen address: {listen}") from None
+            "port": port,
-    return f"http://localhost:{port}", {"host": addr, "port": port}
+            "single_listener": False,
+        }
+    return f"http://{host}:{port}", {"host": host, "port": port}

cista/watching.py

@@ -1,4 +1,5 @@
 import asyncio
+import queue
 import shutil
 import sys
 import threading
@@ -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
 
 
@@ -326,127 +349,373 @@ 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):
+class PathIndex:
-    """Inotify watcher thread (Linux only)"""
+    """O(1) path lookup index for the flat FileEntry tree."""
-    import inotify.adapters
+
+    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()
+        return new_root
+
+
+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():
+        # Pending changes: path -> {"ws": count, "inotify": count}
-            t = time.monotonic()
+        dirty_paths: dict[PurePosixPath, dict[str, int]] = {}
-            # The watching is not entirely reliable, so do a full refresh every 30 seconds
+        first_event_time: float | None = None
-            if t >= trefresh:
+        last_event_time: float | None = None
-                break
+
-            # Disk usage update
+        def add_dirty(path: PurePosixPath, source: str) -> bool:
-            if t >= tspace:
+            """Add path to dirty set. Returns True if added, False if redundant."""
-                tspace = time.monotonic() + 5.0
+            nonlocal first_event_time, last_event_time
-                update_space(loop)
+            # Check if already covered by an existing dirty path
-            # Inotify events, update the tree
+            for existing in dirty_paths:
-            dirty = False
+                if path == existing or (
-            rootmod = state.root[:]
+                    len(path.parts) > len(existing.parts)
-            for event in i.event_gen(yield_nones=False, timeout_s=0.1):
+                    and path.parts[: len(existing.parts)] == existing.parts
-                assert event
+                ):
-                if quit.is_set():
+                    # Count the event even if skipped
-                    return
+                    dirty_paths[existing][source] = (
-                interesting = any(f in modified_flags for f in event[1])
+                        dirty_paths[existing].get(source, 0) + 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"
                     )
-                    # 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(
+                            logger.exception("Fallback failed; sending full root")
-                                "Fallback diff failed; sending full root snapshot"
-                            )
                             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):
+                    # Extract relative path
-    """Polling version of the watcher thread."""
+                    path = PurePosixPath(event[2]) / event[3]
-    while not quit.is_set():
+                    try:
-        t0 = time.perf_counter()
+                        rel_path = path.relative_to(rootpath)
-        update_root(loop)
+                    except ValueError:
-        update_space(loop)
+                        continue
-        dur = time.perf_counter() - t0
+
-        if dur > 1.0:
+                    # Skip dotfiles
-            logger.debug(f"Reading the full file list took {dur:.1f}s")
+                    if any(part.startswith(".") for part in rel_path.parts):
-        quit.wait(0.1 + 8 * dur)
+                        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}",

frontend/src/App.vue

@@ -9,15 +9,14 @@
   <UserManagementModal />
   <AccessDeniedModal />
   <header>
-    <HeaderMain ref="headerMain" :path="path.pathList" :query="path.query">
+    <HeaderMain ref="headerMain" :path="path.pathList" :query="path.query" />
-      <HeaderSelected :path="path.pathList" />
-    </HeaderMain>
     <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">
+    <HeaderSelected :path="path.pathList" />
     <TransferBar :status=store.uprogress @cancel=store.cancelUploads class=upload />
     <TransferBar :status=store.dprogress @cancel=store.cancelDownloads class=download />
   </footer>
@@ -104,7 +103,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 +188,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>

frontend/src/assets/main.css

@@ -13,8 +13,8 @@
   --transition-time: 0.2s;
   /* The following are overridden by responsive layouts */
   --root-font-size: 1rem;
-  --header-font-size: 1rem;
+  --header-font-size: clamp(0.7rem, 2.5vw, 1rem);
-  --header-height: 4rem;
+  --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;
+}

frontend/src/components/BreadCrumb.vue

@@ -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('/')}`"
+        @mouseenter="pathTooltips.get(index)?.startHover"
-      >{{ location }}</a>
+        @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

frontend/src/components/CursorTooltip.vue

@@ -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)
+// Track recent touch to suppress touch-triggered mouse events
-let hasRealMouse = false
+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(() => ({
+const tooltipStyle = computed(() => {
-  left: `${mouseX.value}px`,
+  // Constrain to viewport
-  top: `${mouseY.value}px`,
+  const pad = 8
-}))
+  let x = mouseX.value
+  let y = mouseY.value
 
-// Check if the device likely has a real mouse (fine pointer)
+  // Only constrain if we've measured the tooltip
-const hasFinePointer = () => window.matchMedia('(pointer: fine)').matches
+  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)
+  // Ignore touch-simulated mouse events
-  if (!hasFinePointer() && !hasRealMouse) return
+  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)
+  // Ignore touch-simulated mouse events
-  if (e.movementX !== 0 || e.movementY !== 0) hasRealMouse = true
+  if (isTouchEvent()) return
-  if (!hasFinePointer() && !hasRealMouse) 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);
+  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.5);
-  background-color: var(--accent-color);
+  background: rgba(0, 0, 0, 0.3);
-  color: var(--primary-color);
+  backdrop-filter: blur(4px);
-  white-space: nowrap;
+  -webkit-backdrop-filter: blur(4px);
+  color: #fff;
   pointer-events: none;
   font-size: 1rem;
 }

frontend/src/components/DiskSpace.vue

@@ -0,0 +1,396 @@
+<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.storage, 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.usage - store.space.storage, 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) + '…'
+}
+
+const storageName = computed(() => truncateLabel(store.server.name || 'stored'))
+
+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.storage / 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.storage / 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 '#db3'
+  return '#d44'
+})
+
+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.storage / s.disk
+  const freePct = s.free / s.disk
+  const otherPct = (s.usage - s.storage) / 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) => {
+  const radius = LABEL_RADIUS
+  const arcSpan = 60
+  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'))
+const freeLabelPath = computed(() => createArcPath(adjustedLabelAngles.value.free!, 'free'))
+const otherLabelPath = computed(() => createArcPath(adjustedLabelAngles.value.other!, 'other'))
+
+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>

frontend/src/components/DownloadButton.vue

@@ -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 zipdl = (sel: SelectedItems) => {
-  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 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>

frontend/src/components/EmptyFolder.vue

@@ -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>

frontend/src/components/FileExplorer.vue

@@ -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)"
         >
@@ -249,9 +249,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 +291,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({
+  const items = [
-    x: ev.x, y: ev.y, items: [
+    { label: '📥 Download', onClick: () => downloadFile(doc) },
-      { label: 'Rename', onClick: () => { editing.value = 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 +476,6 @@ tbody tr.cursor {
 .sortcolumn:hover {
   cursor: pointer;
 }
-.sortcolumn:hover::after {
-  color: var(--accent-color);
-}
 .sortcolumn {
   padding-right: 1.5rem;
 }

frontend/src/components/Gallery.vue

@@ -203,9 +203,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 +214,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 +235,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({
+  const items = [
-    x: ev.x, y: ev.y, items: [
+    { label: '📥 Download', onClick: () => downloadFile(doc) },
-      { label: 'Rename', onClick: () => { editing.value = 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>
 

frontend/src/components/GalleryFigure.vue

@@ -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

frontend/src/components/HeaderMain.vue

@@ -3,23 +3,24 @@
     <UploadButton :path="props.path" />
     <SvgButton
       name="create-folder"
-      data-tooltip="New folder"
+      tooltip="New folder"
-      @click="() => {  console.log('New', store.fileExplorer); store.fileExplorer!.newFolder(); console.log('Done')}"
+      @click="() => { store.fileExplorer!.newFolder() }"
     />
-    <slot></slot>
+    <div class="smallgap"></div>
-    <div class="spacer smallgap"></div>
+    <SvgButton name="eye" @click="store.prefs.gallery = !store.prefs.gallery" tooltip="Details/Gallery" />
-    <template v-if="showSearchInput">
+    <div class="search-group">
+      <SvgButton name="find" @click="focusSearch" tooltip="Search" />
       <input
         ref="search"
         type="search"
         :value="query"
         @input="updateSearch"
-        placeholder="Find files"
+        @keydown.escape="clearSearch"
-        class="margin-input"
       />
-    </template>
+      <span v-if="!query" class="search-hint" @click="focusSearch">/</span>
-    <SvgButton ref="searchButton" name="find" @click.prevent="toggleSearchInput" />
+    </div>
-    <SvgButton name="eye" @click="store.prefs.gallery = !store.prefs.gallery" />
+    <div class="spacer smallgap"></div>
+    <DiskSpace v-if="store.space.disk" />
     <SvgButton name="cog" @click="settingsMenu" />
   </nav>
 </template>
@@ -27,58 +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) => {
+const clearSearch = (ev: Event) => {
-  if (!showSearchInput.value) return  // Already closing
+  const input = search.value
-  showSearchInput.value = false
+  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('/')
+  const loc = props.path.join('/')
-  p = p ? `/${p}` : ''
-  const url = q ? `${p}//${q}` : (p || '/')
-  const u = url.replaceAll('?', '%3F').replaceAll('#', '%23')
 
   // Start search immediately via store (worker handles it async)
-  store.search(q, props.path.join('/'))
+  store.search(q, loc)
 
-  // Update route in next frame to keep typing responsive
+  // Cancel any pending route update
-  requestAnimationFrame(() => {
+  if (pendingRouteUpdate !== null) {
-    if (!props.query && q) router.push(u)
+    cancelAnimationFrame(pendingRouteUpdate)
-    else router.replace(u)
+  }
+
+  // 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)
   })
 }
-const toggleSearchInput = (ev: Event) => {
+
-  showSearchInput.value = !showSearchInput.value
+const toggleSearchInput = () => {
-  if (!showSearchInput.value) return closeSearch(ev)
+  search.value?.focus()
-  nextTick(() => {
-    const input = search.value
-    if (input) input.focus()
-  })
 }
-watchEffect(() => {
-  if (props.query) showSearchInput.value = true
-})
 const settingsMenu = (e: Event) => {
   // show the context menu
   const items = []
@@ -121,7 +130,7 @@ const settingsMenu = (e: Event) => {
 }
 defineExpose({
   toggleSearchInput,
-  closeSearch,
+  clearSearch,
 })
 </script>
 
@@ -133,12 +142,71 @@ defineExpose({
   align-items: center;
   z-index: 10;
 }
-input[type='search'] {
+.search-group {
-  background: var(--input-background);
+  position: relative;
-  color: var(--input-color);
+  display: flex;
-  border: 0;
+  align-items: center;
-  border-radius: 0.1em;
+  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>

frontend/src/components/HeaderSelected.vue

@@ -1,19 +1,27 @@
 <template>
-  <template v-if="store.selected.size">
+  <div class="selection-bar" v-if="store.selected.size">
-    <div class="smallgap"></div>
+    <p class="select-text">{{ store.selected.size }} selected</p>
-    <p class="select-text">{{ store.selected.size }} selected ➤</p>
     <DownloadButton />
-    <SvgButton name="copy" data-tooltip="Copy here" @click="op('cp', dst)" />
+    <SvgButton name="copy" tooltip="Copy here" @click="op('cp', dst)" />
-    <SvgButton name="paste" data-tooltip="Move here" @click="op('mv', dst)" />
+    <SvgButton name="paste" tooltip="Move here" @click="op('mv', dst)" />
-    <SvgButton name="trash" data-tooltip="Delete ⚠️" @click="op('rm')" />
+    <SvgButton name="trash" tooltip="Delete ⚠️" @click="op('rm')" />
-    <button class="action-button unselect" data-tooltip="Unselect all" @click="store.selected.clear()">❌</button>
+    <button
-  </template>
+      class="action-button unselect"
+      @click="store.selected.clear()"
+      @mouseenter="unselectTooltip?.startHover"
+      @mousemove="unselectTooltip?.updatePosition"
+      @mouseleave="unselectTooltip?.endHover"
+    >❌<CursorTooltip ref="unselectTooltip" text="Unselect all">Unselect all</CursorTooltip></button>
+  </div>
 </template>
 
 <script setup lang="ts">
 import {connect, controlUrl} from '@/repositories/WS'
 import { useMainStore } from '@/stores/main'
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
+import CursorTooltip from './CursorTooltip.vue'
+
+const unselectTooltip = ref<InstanceType<typeof CursorTooltip> | null>(null)
 
 const store = useMainStore()
 const props = defineProps({
@@ -21,23 +29,32 @@ const props = defineProps({
 })
 
 const dst = computed(() => props.path!.join('/'))
-const op = (op: string, dst?: string) => {
+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,
+    op: opName,
-    sel: sel.keys.map(key => {
+    sel: paths
-      const doc = sel.docs[key]!
-      return doc.loc ? `${doc.loc}/${doc.name}` : doc.name
-    })
   }
   // @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)
@@ -55,11 +72,20 @@ const op = (op: string, dst?: string) => {
 </script>
 
 <style>
+.selection-bar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.3em 0.5em;
+  background: transparent;
+  color: var(--header-color);
+}
 .select-text {
   color: var(--accent-color);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   margin: 0;
+  padding-right: 0.5em;
 }
 </style>

frontend/src/components/SvgButton.vue

@@ -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;
+  margin: 0 0.2em;
-  width: 3em;
+  padding: 0;
-  height: 3em;
+  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 {

frontend/src/components/TransferBar.vue

@@ -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;
 }

frontend/src/components/UploadButton.vue

@@ -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-file" tooltip="Upload files" @click="fileInput.click()" />
-  <SvgButton name="add-folder" data-tooltip="Upload folder" @click="folderInput.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, 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, mtime: now, dir: false }))
+  }
   // @ts-ignore
   upqueue = [...upqueue, ...files]
   statsAdd(files)

frontend/src/repositories/Document.ts

@@ -9,6 +9,8 @@ export type DocProps = {
   size: number
   mtime: number
   dir: boolean
+  ghost?: boolean
+  expires?: number  // Unix timestamp for ghost expiry
 }
 
 export class Doc {
@@ -17,6 +19,8 @@ export class Doc {
   public size: number = 0
   public mtime: number = 0
   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 = ""
 

frontend/src/repositories/WS.ts

@@ -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)

frontend/src/stores/documentStore.ts

@@ -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

frontend/src/stores/main.ts

@@ -5,11 +5,15 @@ 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) {
@@ -18,14 +22,30 @@ function getSearchWorker(): Worker {
     searchWorker.onmessage = (e) => {
       if (!searchStore || e.data.id !== searchId) return  // Stale result
 
-      // Convert plain data back to Doc instances (constructor is now lightweight)
+      // Convert plain data back to Doc instances
-      const docs = []
+      const docs = e.data.docs.map((d: any) => new Doc(d))
-      for (const d of e.data.docs) {
+
-        docs.push(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
       }
     }
@@ -33,9 +53,20 @@ function getSearchWorker(): Worker {
   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[],
@@ -61,6 +92,12 @@ export const useMainStore = defineStore('main', {
       username: '' as string,
       privileged: false as boolean,
       isLoggedIn: false as boolean,
+    },
+    space: {
+      disk: 0,
+      free: 0,
+      usage: 0,
+      storage: 0,
     }
   }),
   persist: {
@@ -93,10 +130,66 @@ export const useMainStore = defineStore('main', {
         }))
         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) {
@@ -120,7 +213,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,
@@ -135,13 +229,43 @@ export const useMainStore = defineStore('main', {
       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
+      // 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 })
     },
     login(username: string, privileged: boolean) {
@@ -154,7 +278,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
@@ -180,12 +308,25 @@ export const useMainStore = defineStore('main', {
       resumeWatching()
     },
     toggleSort(name: SortOrder) {
-      if (this.query) this.prefs.sortFiltered = this.prefs.sortFiltered === name ? '' : name
+      const current = this.query ? this.prefs.sortFiltered : this.prefs.sortListing
-      else this.prefs.sortListing = this.prefs.sortListing === name ? '' : name
+      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()
@@ -200,8 +341,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 = {
@@ -210,7 +364,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)
@@ -231,7 +385,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)

frontend/src/utils/fileutil.ts

@@ -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.) */

frontend/src/views/ExplorerView.vue

@@ -20,6 +20,7 @@
 <script setup lang="ts">
 import { watchEffect, ref, computed, watch } from 'vue'
 import { useMainStore } from '@/stores/main'
+import { getDocuments } from '@/stores/documentStore'
 import { collator } from '@/utils'
 import { sorted, sortedGrouped } from '@/utils/docsort'
 import FileExplorer from '@/components/FileExplorer.vue'
@@ -33,17 +34,14 @@ const props = defineProps<{
 
 // Folder path for component keys - only recreate component when folder changes, not search
 const folderPath = computed(() => props.path.join('/'))
-// Trigger search when query changes (from route, e.g., page load or back button)
+
-// Note: Direct typing triggers search immediately via HeaderMain, this is for route-based changes
+// 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]) => {
-    // Only trigger if results don't match current query (avoid duplicate searches)
+    if (store.query === query) return  // Already searching this query
-    if (query && store.searchResults.length === 0) {
+    store.search(query, loc)
-      store.search(query, loc)
-    } else if (!query) {
-      store.search('', loc)  // Clear search results
-    }
   },
   { immediate: true }
 )
@@ -53,13 +51,22 @@ const documents = computed(() => {
   const query = props.query
 
   // List the current location (no search)
-  if (!query) return sorted(
+  if (!query) {
-    store.document.filter(doc => doc.loc === loc),
+    // Access docVersion to make this reactive to document changes
-    store.prefs.sortListing,
+    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
+  // Search results from worker (also filter hidden)
-  const docs = store.searchResults
+  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
@@ -71,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)

frontend/src/workers/searchWorker.ts

@@ -36,58 +36,120 @@ interface ResultMessage {
 }
 
 // Worker state
-let documents: WorkerDoc[] = []
 let recentDocuments: WorkerDoc[] = []  // Sorted by mtime descending
 let currentSearchId = 0
 
-// Haystack formatting (same as main thread utils)
+// Search result cache - cleared when documents change
-function haystackFormat(str: string): string {
+interface CacheEntry {
-  const based = str.normalize('NFKD').replace(/[\u0300-\u036f]/g, '').toLowerCase()
+  query: string         // Normalized query string
-  return '^' + based + '$'
+  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 normalizeQuery(str: string): string {
-function needleFormat(query: string) {
+  return str.normalize('NFKD').replace(/[\u0300-\u036f]/g, '').toLowerCase()
-  const based = query.normalize('NFKD').replace(/[\u0300-\u036f]/g, '').toLowerCase()
-  return { based, words: based.split(/\s+/) }
 }
 
-// Test if haystack includes needle
+// Test if document matches search query
-function localeIncludes(haystack: string, filter: { based: string; words: string[] }): boolean {
+function matches(haystack: string, query: string, words: string[]): boolean {
-  const { based, words } = filter
+  return haystack.includes(query) || words.every(word => haystack.includes(word))
-  return haystack.includes(based) || (words && 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
+// Yield control to allow new messages to be processed
-function sortByRecent(docs: WorkerDoc[]): WorkerDoc[] {
+const yieldControl = (): Promise<void> => new Promise(resolve => setTimeout(resolve, 0))
-  return [...docs].sort((a, b) => b.mtime - a.mtime)
+
+// 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
+// Add result to cache
-function yieldControl(): Promise<void> {
+function addToCache(query: string, results: WorkerDoc[], complete: boolean) {
-  return new Promise(resolve => setTimeout(resolve, 0))
+  // 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) {
+async function performSearch(rawQuery: string, loc: string, searchId: number) {
-  const needle = needleFormat(query)
+  const query = normalizeQuery(rawQuery)
-  const limit = 100
+  const words = query.split(/\s+/)
-  const batchSize = 500  // Smaller batches for faster incremental feedback
   const results: WorkerDoc[] = []
   let lastResultCount = 0
 
-  for (let i = 0; i < recentDocuments.length && results.length < limit; i += batchSize) {
+  // Check cache for exact match
-    // Check if search was superseded
+  const exactMatch = searchCache.find(e => e.query === query)
-    if (currentSearchId !== searchId) return
+  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)
       }
     }
@@ -95,85 +157,69 @@ async function performSearch(query: string, loc: string, searchId: number) {
     // Post incremental results if we found new matches
     if (results.length > lastResultCount && currentSearchId === searchId) {
       lastResultCount = results.length
-      const sortedResults = sortResults(results, query, loc)
+      postResults(results, rawQuery, loc, searchId, false)
-      postMessage({
-        type: 'results',
-        docs: sortedResults.map(stripHaystack),
-        id: searchId,
-        done: false
-      } as ResultMessage)
     }
 
-    // Yield control between batches to allow new search requests to interrupt
+    // 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)
+    postResults(results, rawQuery, loc, searchId, true)
-    postMessage({
-      type: 'results',
-      docs: sortedResults.map(stripHaystack),
-      id: searchId,
-      done: true
-    } as ResultMessage)
   }
 }
 
+// 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
+    Number(b.loc === loc) - Number(a.loc === loc) ||
-    (b.loc === loc) - (a.loc === loc) ||
     // Then subfolders
-    // @ts-ignore
+    Number(b.loc.startsWith(locsub)) - Number(a.loc.startsWith(locsub)) ||
-    (b.loc.slice(0, locsub.length) === locsub) - (a.loc.slice(0, locsub.length) === locsub) ||
     // Then by location
     collator.compare(a.loc, b.loc) ||
-    // Files after folders
+    // Folders before files
-    // @ts-ignore
+    Number(b.dir) - Number(a.dir) ||
-    (a.dir === false) - (b.dir === false) ||
     // Exact name match first
-    // @ts-ignore
+    Number(b.name.includes(query)) - Number(a.name.includes(query)) ||
-    b.name.includes(query) - 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
+    // Update document list with haystacks, sorted by mtime descending
-    documents = msg.documents.map(doc => ({
+    recentDocuments = msg.documents
-      ...doc,
+      .map(doc => ({ ...doc, haystack: normalizeHaystack(doc.name) }))
-      haystack: haystackFormat(doc.name)
+      .sort((a, b) => b.mtime - a.mtime)
-    }))
+    clearCache()
-    recentDocuments = sortByRecent(documents)
   } 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)
+      // Empty query - no results needed
-      postMessage({
+      postMessage({ type: 'results', docs: [], id: msg.id, done: true } as ResultMessage)
-        type: 'results',
-        docs: [],
-        id: msg.id,
-        done: true
-      } as ResultMessage)
     }
   }
 }

frontend/vite-plugin-fastapi.js

@@ -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

pyproject.toml

@@ -28,7 +28,7 @@ dependencies = [
     "av>=15.0.0",
     "blake3>=1.0.5",
     "docopt-ng>=0.9.0",
-    "fastapi-vue>=0.5.1",
+    "fastapi-vue>=0.5.2",
     "fastapi[standard]>=0.128.0",
     "html5tagger>=1.3.0",
     "httpx>=0.28.0",

scripts/devserver.py

@@ -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 [frontend] [--backend backend] [cista_args...]
 
 Options:
-    frontend    Vite frontend endpoint (default: localhost:5173)
+    frontend    Vite frontend endpoint (default: localhost:8989)
-    --backend   Cista backend endpoint (default: from config, or :8000)
+    --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,10 @@ 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 +42,11 @@ 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 +54,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
@@ -81,17 +83,17 @@ def main():
         "frontend",
         nargs="?",
         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.frontend, args.backend, unknown))
 
 
 HELP_EPILOG = """
@@ -99,6 +101,8 @@ HELP_EPILOG = """
   scripts/devserver.py 3000                  # Vite on localhost:3000
   scripts/devserver.py :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
 """
 

scripts/fastapi-vue/devutil.py

@@ -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_VITE_PORT = 8989
-DEFAULT_BACKEND_PORT = 5180
+DEFAULT_BACKEND_PORT = 8999
 
 
 class ProcessGroup: