Separate Python and Rust into python/ and rust/ with per-stack Dockerfiles

rust/myfsio-engine/crates/myfsio-server/templates/404.html

@@ -0,0 +1,11 @@
+{% extends "base.html" %}
+{% block content %}
+<div class="text-center py-5">
+  <p class="text-uppercase text-muted small mb-2">HTTP 404</p>
+  <h1 class="display-6 mb-3">We can't find that page</h1>
+  <p class="text-muted mb-4">The requested console route isn't available in MyFSIO. Double-check the URL or head back to your buckets.</p>
+  <div class="d-flex flex-wrap justify-content-center gap-3">
+    <a class="btn btn-primary" href="{{ url_for(endpoint="ui.buckets_overview") }}">Return to buckets</a>
+  </div>
+</div>
+{% endblock %}

rust/myfsio-engine/crates/myfsio-server/templates/500.html

@@ -0,0 +1,11 @@
+{% extends "base.html" %}
+{% block content %}
+<div class="text-center py-5">
+  <p class="text-uppercase text-muted small mb-2">HTTP 500</p>
+  <h1 class="display-6 mb-3">Internal Server Error</h1>
+  <p class="text-muted mb-4">Something went wrong on our end. Please try again later or contact support.</p>
+  <div class="d-flex flex-wrap justify-content-center gap-3">
+    <a class="btn btn-primary" href="{{ url_for(endpoint="ui.buckets_overview") }}">Return to buckets</a>
+  </div>
+</div>
+{% endblock %}

rust/myfsio-engine/crates/myfsio-server/templates/_convert.py

@@ -0,0 +1,292 @@
+import os
+import re
+import sys
+
+TEMPLATE_DIR = os.path.dirname(os.path.abspath(__file__))
+
+TERNARY_RE = re.compile(
+    r"""(\{\{\s*)
+        (?:"([^"]*)"|'([^']*)')      # literal A
+        \s+if\s+
+        ([^{}]+?)                    # condition
+        \s+else\s+
+        (?:"([^"]*)"|'([^']*)')      # literal B
+        (\s*\}\})""",
+    re.VERBOSE,
+)
+
+TERNARY_SET_RE = re.compile(
+    r"""(\{%\s*set\s+([A-Za-z_][A-Za-z_0-9]*)\s*=\s*)
+        (?:"([^"]*)"|'([^']*)')
+        \s+if\s+
+        ([^{}]+?)
+        \s+else\s+
+        (?:"([^"]*)"|'([^']*)')
+        (\s*%\})""",
+    re.VERBOSE,
+)
+
+
+def convert_single_quoted_strings_in_expressions(text: str) -> str:
+    """Inside {{...}} or {%...%}, swap ' for " around tokens that look like strings."""
+    def fix(m):
+        body = m.group(2)
+        body_fixed = re.sub(r"'([^'\\\n]*)'", r'"\1"', body)
+        return m.group(1) + body_fixed + m.group(3)
+
+    return re.sub(
+        r"(\{[{%])([^{}]*?)([}%]\})",
+        fix,
+        text,
+        flags=re.DOTALL,
+    )
+
+
+def convert_inline_ternary(text: str) -> str:
+    def repl_expr(m):
+        a = m.group(2) if m.group(2) is not None else m.group(3)
+        cond = m.group(4)
+        b = m.group(5) if m.group(5) is not None else m.group(6)
+        return (
+            '{% if ' + cond + ' %}' + a + '{% else %}' + b + '{% endif %}'
+        )
+
+    def repl_set(m):
+        varname = m.group(2)
+        a = m.group(3) if m.group(3) is not None else m.group(4)
+        cond = m.group(5)
+        b = m.group(6) if m.group(6) is not None else m.group(7)
+        return (
+            '{% if ' + cond + ' %}{% set ' + varname + ' = "' + a + '" %}'
+            '{% else %}{% set ' + varname + ' = "' + b + '" %}{% endif %}'
+        )
+
+    prev = None
+    while prev != text:
+        prev = text
+        text = TERNARY_SET_RE.sub(repl_set, text)
+        text = TERNARY_RE.sub(repl_expr, text)
+    return text
+
+
+def convert_request_args(text: str) -> str:
+    text = re.sub(
+        r'request\.args\.get\(\s*"([^"]+)"\s*,\s*"([^"]*)"\s*\)',
+        r'request_args.\1 | default(value="\2")',
+        text,
+    )
+    text = re.sub(
+        r'request\.args\.get\(\s*"([^"]+)"\s*\)',
+        r'request_args.\1',
+        text,
+    )
+    text = text.replace('request.endpoint', 'current_endpoint')
+    return text
+
+
+def convert_items_keys(text: str) -> str:
+    text = re.sub(r'\.items\(\)', '', text)
+    text = re.sub(r'\.keys\(\)', '', text)
+    text = re.sub(r'\.values\(\)', '', text)
+    return text
+
+
+def convert_tojson(text: str) -> str:
+    text = re.sub(r'\|\s*tojson\b', '| json_encode | safe', text)
+    return text
+
+
+def convert_is_none(text: str) -> str:
+    text = re.sub(r'\bis\s+not\s+none\b', '!= null', text)
+    text = re.sub(r'\bis\s+none\b', '== null', text)
+    return text
+
+
+def convert_namespace(text: str) -> str:
+    def repl(m):
+        body = m.group(1)
+        assigns = [a.strip() for a in body.split(',')]
+        return '{# namespace shim #}'
+
+    text = re.sub(
+        r'\{%\s*set\s+ns\s*=\s*namespace\(([^)]*)\)\s*%\}',
+        repl,
+        text,
+    )
+    text = re.sub(r'\bns\.([A-Za-z_][A-Za-z_0-9]*)\s*=\s*', r'{% set_global \1 = ', text)
+    text = re.sub(r'\bns\.([A-Za-z_][A-Za-z_0-9]*)', r'\1', text)
+    return text
+
+
+def convert_url_for_positional(text: str) -> str:
+    """url_for("x", ...) -> url_for(endpoint="x", ...)"""
+    def repl(m):
+        prefix = m.group(1)
+        endpoint = m.group(2)
+        rest = m.group(3) or ''
+        rest = rest.strip()
+        if rest.startswith(','):
+            rest = rest[1:].strip()
+        if rest:
+            return f'{prefix}(endpoint="{endpoint}", {rest})'
+        return f'{prefix}(endpoint="{endpoint}")'
+
+    pattern = re.compile(r'(url_for)\(\s*"([^"]+)"\s*((?:,[^()]*)?)\)')
+    prev = None
+    while prev != text:
+        prev = text
+        text = pattern.sub(repl, text)
+    return text
+
+
+def convert_d_filter(text: str) -> str:
+    text = re.sub(r'\|\s*d\(\s*([^)]*?)\s*\)', lambda m: f'| default(value={m.group(1) or 0})', text)
+    return text
+
+
+def convert_replace_filter(text: str) -> str:
+    def repl(m):
+        a = m.group(1)
+        b = m.group(2)
+        return f'| replace(from="{a}", to="{b}")'
+    text = re.sub(r'\|\s*replace\(\s*"([^"]*)"\s*,\s*"([^"]*)"\s*\)', repl, text)
+    return text
+
+
+def convert_truncate_filter(text: str) -> str:
+    def repl(m):
+        n = m.group(1)
+        return f'| truncate(length={n})'
+    text = re.sub(r'\|\s*truncate\(\s*(\d+)\s*(?:,[^)]*)?\)', repl, text)
+    return text
+
+
+def convert_strip_method(text: str) -> str:
+    text = re.sub(r'(\b[A-Za-z_][A-Za-z_0-9.\[\]"]*)\s*\.\s*strip\(\s*\)', r'\1 | trim', text)
+    return text
+
+
+def convert_split_method(text: str) -> str:
+    def repl(m):
+        obj = m.group(1)
+        sep = m.group(2)
+        return f'{obj} | split(pat="{sep}")'
+    text = re.sub(r'(\b[A-Za-z_][A-Za-z_0-9.]*)\s*\.\s*split\(\s*"([^"]*)"\s*\)', repl, text)
+    return text
+
+
+def convert_python_slice(text: str) -> str:
+    def repl_colon(m):
+        obj = m.group(1)
+        start = m.group(2) or '0'
+        end = m.group(3)
+        if start.startswith('-') or (end and end.startswith('-')):
+            return m.group(0)
+        if end:
+            return f'{obj} | slice(start={start}, end={end})'
+        return f'{obj} | slice(start={start})'
+
+    def repl_neg_end(m):
+        obj = m.group(1)
+        n = m.group(2)
+        return f'{obj} | slice(start=-{n})'
+
+    text = re.sub(
+        r'(\b[A-Za-z_][A-Za-z_0-9.]*)\[\s*(-?\d*)\s*:\s*(-?\d*)\s*\]',
+        repl_colon,
+        text,
+    )
+    text = re.sub(
+        r'(\b[A-Za-z_][A-Za-z_0-9.]*)\|\s*slice\(start=-(\d+)\s*,\s*end=\s*\)',
+        repl_neg_end,
+        text,
+    )
+    return text
+
+
+def convert_inline_ternary_expr(text: str) -> str:
+    """Handle arbitrary ternary inside {{ ... }}: A if COND else B -> {% if COND %}A{% else %}B{% endif %}"""
+    out_lines = []
+    for line in text.split('\n'):
+        out_lines.append(_convert_line_ternary(line))
+    return '\n'.join(out_lines)
+
+
+def _convert_line_ternary(line: str) -> str:
+    if '{{' not in line or ' if ' not in line or ' else ' not in line:
+        return line
+    prev = None
+    while prev != line:
+        prev = line
+        m = re.search(r'\{\{\s*([^{}]+?)\s+if\s+([^{}]+?)\s+else\s+([^{}]+?)\s*\}\}', line)
+        if not m:
+            break
+        replacement = '{% if ' + m.group(2) + ' %}{{ ' + m.group(1) + ' }}{% else %}{{ ' + m.group(3) + ' }}{% endif %}'
+        line = line[:m.start()] + replacement + line[m.end():]
+    return line
+
+
+def convert_dict_get(text: str) -> str:
+    """Convert X.get("key", default) -> X.key | default(value=default) when simple."""
+    pattern = re.compile(
+        r'([A-Za-z_][A-Za-z_0-9]*(?:\.[A-Za-z_][A-Za-z_0-9]*)*)'
+        r'\.get\(\s*"([A-Za-z_][A-Za-z_0-9]*)"\s*(?:,\s*([^(){}]+?))?\s*\)'
+    )
+
+    def repl(m):
+        obj = m.group(1)
+        key = m.group(2)
+        default = (m.group(3) or '').strip()
+        if default:
+            return f'{obj}.{key} | default(value={default})'
+        return f'{obj}.{key}'
+
+    prev = None
+    while prev != text:
+        prev = text
+        text = pattern.sub(repl, text)
+    return text
+
+
+def convert_file(path: str) -> bool:
+    with open(path, 'r', encoding='utf-8') as f:
+        original = f.read()
+    text = original
+    text = convert_single_quoted_strings_in_expressions(text)
+    text = convert_inline_ternary(text)
+    text = convert_request_args(text)
+    text = convert_items_keys(text)
+    text = convert_tojson(text)
+    text = convert_is_none(text)
+    text = convert_namespace(text)
+    text = convert_dict_get(text)
+    text = convert_url_for_positional(text)
+    text = convert_d_filter(text)
+    text = convert_replace_filter(text)
+    text = convert_truncate_filter(text)
+    text = convert_strip_method(text)
+    text = convert_split_method(text)
+    text = convert_python_slice(text)
+    text = convert_inline_ternary_expr(text)
+    if text != original:
+        with open(path, 'w', encoding='utf-8', newline='\n') as f:
+            f.write(text)
+        return True
+    return False
+
+
+def main():
+    changed = []
+    for name in sorted(os.listdir(TEMPLATE_DIR)):
+        if not name.endswith('.html'):
+            continue
+        p = os.path.join(TEMPLATE_DIR, name)
+        if convert_file(p):
+            changed.append(name)
+    print('Changed:', len(changed))
+    for c in changed:
+        print(' -', c)
+
+
+if __name__ == '__main__':
+    main()

rust/myfsio-engine/crates/myfsio-server/templates/base.html

@@ -0,0 +1,443 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    {% if principal %}<meta name="csrf-token" content="{{ csrf_token() }}" />{% endif %}
+    <title>MyFSIO Console</title>
+    <link rel="icon" type="image/png" href="{{ url_for(endpoint="static", filename="images/MyFSIO.png") }}" />
+    <link rel="icon" type="image/x-icon" href="{{ url_for(endpoint="static", filename="images/MyFSIO.ico") }}" />
+    <link
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+      integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
+      crossorigin="anonymous"
+    />
+    <script>
+      (function () {
+        try {
+          const stored = localStorage.getItem('myfsio-theme');
+          const theme = stored === 'dark' ? 'dark' : 'light';
+          document.documentElement.dataset.bsTheme = theme;
+          document.documentElement.dataset.theme = theme;
+        } catch (err) {
+          document.documentElement.dataset.bsTheme = 'light';
+          document.documentElement.dataset.theme = 'light';
+        }
+        try {
+          if (localStorage.getItem('myfsio-sidebar-collapsed') === 'true') {
+            document.documentElement.classList.add('sidebar-will-collapse');
+          }
+        } catch (err) {}
+      })();
+    </script>
+    <link rel="stylesheet" href="{{ url_for(endpoint="static", filename="css/main.css") }}" />
+  </head>
+  <body>
+    <header class="mobile-header d-lg-none">
+      <button class="sidebar-toggle-btn" type="button" data-bs-toggle="offcanvas" data-bs-target="#mobileSidebar" aria-controls="mobileSidebar" aria-label="Toggle navigation">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 16 16">
+          <path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
+        </svg>
+      </button>
+      <a class="mobile-brand" href="{{ url_for(endpoint="ui.buckets_overview") }}">
+        <img src="{{ url_for(endpoint="static", filename="images/MyFSIO.png") }}" alt="MyFSIO logo" width="28" height="28" />
+        <span>MyFSIO</span>
+      </a>
+      <button class="theme-toggle-mobile" type="button" id="themeToggleMobile" aria-label="Toggle dark mode">
+        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="theme-icon-mobile" id="themeToggleSunMobile" viewBox="0 0 16 16">
+          <path d="M8 11.5a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7zm0 1.5a5 5 0 1 0 0-10 5 5 0 0 0 0 10zM8 0a.5.5 0 0 1 .5.5v1.555a.5.5 0 0 1-1 0V.5A.5.5 0 0 1 8 0zm0 12.945a.5.5 0 0 1 .5.5v2.055a.5.5 0 0 1-1 0v-2.055a.5.5 0 0 1 .5-.5zM2.343 2.343a.5.5 0 0 1 .707 0l1.1 1.1a.5.5 0 1 1-.708.707l-1.1-1.1a.5.5 0 0 1 0-.707zm9.507 9.507a.5.5 0 0 1 .707 0l1.1 1.1a.5.5 0 1 1-.707.708l-1.1-1.1a.5.5 0 0 1 0-.708zM0 8a.5.5 0 0 1 .5-.5h1.555a.5.5 0 0 1 0 1H.5A.5.5 0 0 1 0 8zm12.945 0a.5.5 0 0 1 .5-.5H15.5a.5.5 0 0 1 0 1h-2.055a.5.5 0 0 1-.5-.5zM2.343 13.657a.5.5 0 0 1 0-.707l1.1-1.1a.5.5 0 1 1 .708.707l-1.1 1.1a.5.5 0 0 1-.708 0zm9.507-9.507a.5.5 0 0 1 0-.707l1.1-1.1a.5.5 0 0 1 .707.708l-1.1 1.1a.5.5 0 0 1-.707 0z"/>
+        </svg>
+        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="theme-icon-mobile" id="themeToggleMoonMobile" viewBox="0 0 16 16">
+          <path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"/>
+          <path d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z"/>
+        </svg>
+      </button>
+    </header>
+
+    <div class="offcanvas offcanvas-start sidebar-offcanvas" tabindex="-1" id="mobileSidebar" aria-labelledby="mobileSidebarLabel">
+      <div class="offcanvas-header sidebar-header">
+        <a class="sidebar-brand" href="{{ url_for(endpoint="ui.buckets_overview") }}">
+          <img src="{{ url_for(endpoint="static", filename="images/MyFSIO.png") }}" alt="MyFSIO logo" class="sidebar-logo" width="36" height="36" />
+          <span class="sidebar-title">MyFSIO</span>
+        </a>
+        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+      </div>
+      <div class="offcanvas-body sidebar-body">
+        <nav class="sidebar-nav">
+          {% if principal %}
+          <div class="nav-section">
+            <span class="nav-section-title">Navigation</span>
+            <a href="{{ url_for(endpoint="ui.buckets_overview") }}" class="sidebar-link {% if current_endpoint == "ui.buckets_overview" or current_endpoint == "ui.bucket_detail" %}active{% endif %}">
+              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
+                <path d="M2.522 5H2a.5.5 0 0 0-.494.574l1.372 9.149A1.5 1.5 0 0 0 4.36 16h7.278a1.5 1.5 0 0 0 1.483-1.277l1.373-9.149A.5.5 0 0 0 14 5h-.522A5.5 5.5 0 0 0 2.522 5zm1.005 0a4.5 4.5 0 0 1 8.945 0H3.527z"/>
+              </svg>
+              <span>Buckets</span>
+            </a>
+            {% if can_manage_iam %}
+            <a href="{{ url_for(endpoint="ui.iam_dashboard") }}" class="sidebar-link {% if current_endpoint == "ui.iam_dashboard" %}active{% endif %}">
+              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
+                <path d="M15 14s1 0 1-1-1-4-5-4-5 3-5 4 1 1 1 1h8zm-7.978-1A.261.261 0 0 1 7 12.996c.001-.264.167-1.03.76-1.72C8.312 10.629 9.282 10 11 10c1.717 0 2.687.63 3.24 1.276.593.69.758 1.457.76 1.72l-.008.002a.274.274 0 0 1-.014.002H7.022zM11 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm3-2a3 3 0 1 1-6 0 3 3 0 0 1 6 0zM6.936 9.28a5.88 5.88 0 0 0-1.23-.247A7.35 7.35 0 0 0 5 9c-4 0-5 3-5 4 0 .667.333 1 1 1h4.216A2.238 2.238 0 0 1 5 13c0-1.01.377-2.042 1.09-2.904.243-.294.526-.569.846-.816zM4.92 10A5.493 5.493 0 0 0 4 13H1c0-.26.164-1.03.76-1.724.545-.636 1.492-1.256 3.16-1.275zM1.5 5.5a3 3 0 1 1 6 0 3 3 0 0 1-6 0zm3-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4z"/>
+              </svg>
+              <span>IAM</span>
+            </a>
+            <a href="{{ url_for(endpoint="ui.connections_dashboard") }}" class="sidebar-link {% if current_endpoint == "ui.connections_dashboard" %}active{% endif %}">
+              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
+                <path fill-rule="evenodd" d="M6 3.5A1.5 1.5 0 0 1 7.5 2h1A1.5 1.5 0 0 1 10 3.5v1A1.5 1.5 0 0 1 8.5 6v1H14a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-1 0V8h-5v.5a.5.5 0 0 1-1 0V8h-5v.5a.5.5 0 0 1-1 0v-1A.5.5 0 0 1 2 7h5.5V6A1.5 1.5 0 0 1 6 4.5v-1zM8.5 5a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1zM0 11.5A1.5 1.5 0 0 1 1.5 10h1A1.5 1.5 0 0 1 4 11.5v1A1.5 1.5 0 0 1 2.5 14h-1A1.5 1.5 0 0 1 0 12.5v-1zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1zm4.5.5A1.5 1.5 0 0 1 7.5 10h1a1.5 1.5 0 0 1 1.5 1.5v1A1.5 1.5 0 0 1 8.5 14h-1A1.5 1.5 0 0 1 6 12.5v-1zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1zm4.5.5a1.5 1.5 0 0 1 1.5-1.5h1a1.5 1.5 0 0 1 1.5 1.5v1a1.5 1.5 0 0 1-1.5 1.5h-1a1.5 1.5 0 0 1-1.5-1.5v-1zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1z"/>
+              </svg>
+              <span>Connections</span>
+            </a>
+            <a href="{{ url_for(endpoint="ui.metrics_dashboard") }}" class="sidebar-link {% if current_endpoint == "ui.metrics_dashboard" %}active{% endif %}">
+              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
+                <path d="M8 4a.5.5 0 0 1 .5.5V6a.5.5 0 0 1-1 0V4.5A.5.5 0 0 1 8 4zM3.732 5.732a.5.5 0 0 1 .707 0l.915.914a.5.5 0 1 1-.708.708l-.914-.915a.5.5 0 0 1 0-.707zM2 10a.5.5 0 0 1 .5-.5h1.586a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 10zm9.5 0a.5.5 0 0 1 .5-.5h1.5a.5.5 0 0 1 0 1H12a.5.5 0 0 1-.5-.5zm.754-4.246a.389.389 0 0 0-.527-.02L7.547 9.31a.91.91 0 1 0 1.302 1.258l3.434-4.297a.389.389 0 0 0-.029-.518z"/>
+                <path fill-rule="evenodd" d="M0 10a8 8 0 1 1 15.547 2.661c-.442 1.253-1.845 1.602-2.932 1.25C11.309 13.488 9.475 13 8 13c-1.474 0-3.31.488-4.615.911-1.087.352-2.49.003-2.932-1.25A7.988 7.988 0 0 1 0 10zm8-7a7 7 0 0 0-6.603 9.329c.203.575.923.876 1.68.63C4.397 12.533 6.358 12 8 12s3.604.532 4.923.96c.757.245 1.477-.056 1.68-.631A7 7 0 0 0 8 3z"/>
+              </svg>
+              <span>Metrics</span>
+            </a>
+            <a href="{{ url_for(endpoint="ui.sites_dashboard") }}" class="sidebar-link {% if current_endpoint == "ui.sites_dashboard" %}active{% endif %}">
+              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
+                <path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm7.5-6.923c-.67.204-1.335.82-1.887 1.855A7.97 7.97 0 0 0 5.145 4H7.5V1.077zM4.09 4a9.267 9.267 0 0 1 .64-1.539 6.7 6.7 0 0 1 .597-.933A7.025 7.025 0 0 0 2.255 4H4.09zm-.582 3.5c.03-.877.138-1.718.312-2.5H1.674a6.958 6.958 0 0 0-.656 2.5h2.49zM4.847 5a12.5 12.5 0 0 0-.338 2.5H7.5V5H4.847zM8.5 5v2.5h2.99a12.495 12.495 0 0 0-.337-2.5H8.5zM4.51 8.5a12.5 12.5 0 0 0 .337 2.5H7.5V8.5H4.51zm3.99 0V11h2.653c.187-.765.306-1.608.338-2.5H8.5zM5.145 12c.138.386.295.744.468 1.068.552 1.035 1.218 1.65 1.887 1.855V12H5.145zm.182 2.472a6.696 6.696 0 0 1-.597-.933A9.268 9.268 0 0 1 4.09 12H2.255a7.024 7.024 0 0 0 3.072 2.472zM3.82 11a13.652 13.652 0 0 1-.312-2.5h-2.49c.062.89.291 1.733.656 2.5H3.82zm6.853 3.472A7.024 7.024 0 0 0 13.745 12H11.91a9.27 9.27 0 0 1-.64 1.539 6.688 6.688 0 0 1-.597.933zM8.5 12v2.923c.67-.204 1.335-.82 1.887-1.855.173-.324.33-.682.468-1.068H8.5zm3.68-1h2.146c.365-.767.594-1.61.656-2.5h-2.49a13.65 13.65 0 0 1-.312 2.5zm2.802-3.5a6.959 6.959 0 0 0-.656-2.5H12.18c.174.782.282 1.623.312 2.5h2.49zM11.27 2.461c.247.464.462.98.64 1.539h1.835a7.024 7.024 0 0 0-3.072-2.472c.218.284.418.598.597.933zM10.855 4a7.966 7.966 0 0 0-.468-1.068C9.835 1.897 9.17 1.282 8.5 1.077V4h2.355z"/>
+              </svg>
+              <span>Sites</span>
+            </a>
+            {% endif %}
+            {% if website_hosting_nav %}
+            <a href="{{ url_for(endpoint="ui.website_domains_dashboard") }}" class="sidebar-link {% if current_endpoint == "ui.website_domains_dashboard" %}active{% endif %}">
+              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
+                <path d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.002 1.002 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z"/>
+                <path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243L6.586 4.672z"/>
+              </svg>
+              <span>Domains</span>
+            </a>
+            {% endif %}
+            {% if can_manage_iam %}
+            <a href="{{ url_for(endpoint="ui.system_dashboard") }}" class="sidebar-link {% if current_endpoint == "ui.system_dashboard" %}active{% endif %}">
+              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
+                <path d="M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872l-.1-.34zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z"/>
+              </svg>
+              <span>System</span>
+            </a>
+            {% endif %}
+          </div>
+          <div class="nav-section">
+            <span class="nav-section-title">Resources</span>
+            <a href="{{ url_for(endpoint="ui.docs_page") }}" class="sidebar-link {% if current_endpoint == "ui.docs_page" %}active{% endif %}">
+              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
+                <path d="M1 2.828c.885-.37 2.154-.769 3.388-.893 1.33-.134 2.458.063 3.112.752v9.746c-.935-.53-2.12-.603-3.213-.493-1.18.12-2.37.461-3.287.811V2.828zm7.5-.141c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.094-.111-2.278-.039-3.213.492V2.687zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783z"/>
+              </svg>
+              <span>Documentation</span>
+            </a>
+          </div>
+          {% endif %}
+        </nav>
+        {% if principal %}
+        <div class="sidebar-footer">
+          <div class="sidebar-user">
+            <div class="user-avatar">
+              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 16 16">
+                <path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
+                <path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"/>
+              </svg>
+            </div>
+            <div class="user-info">
+              <div class="user-name" title="{{ principal.display_name }}">{{ principal.display_name | truncate(length=16) }}</div>
+              <div class="user-key">{{ principal.access_key | truncate(length=12) }}</div>
+            </div>
+          </div>
+          <form method="post" action="{{ url_for(endpoint="ui.logout") }}" class="w-100">
+            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
+            <button class="sidebar-logout-btn" type="submit">
+              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 16 16">
+                <path fill-rule="evenodd" d="M10 12.5a.5.5 0 0 1-.5.5h-8a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 .5.5v2a.5.5 0 0 0 1 0v-2A1.5 1.5 0 0 0 9.5 2h-8A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h8a1.5 1.5 0 0 0 1.5-1.5v-2a.5.5 0 0 0-1 0v2z"/>
+                <path fill-rule="evenodd" d="M15.854 8.354a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708.708L14.293 7.5H5.5a.5.5 0 0 0 0 1h8.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3z"/>
+              </svg>
+              <span>Sign out</span>
+            </button>
+          </form>
+        </div>
+        {% endif %}
+      </div>
+    </div>
+
+    <aside class="sidebar d-none d-lg-flex" id="desktopSidebar">
+      <div class="sidebar-header">
+        <div class="sidebar-brand" id="sidebarBrand">
+          <img src="{{ url_for(endpoint="static", filename="images/MyFSIO.png") }}" alt="MyFSIO logo" class="sidebar-logo" width="36" height="36" />
+          <span class="sidebar-title">MyFSIO</span>
+        </div>
+        <button class="sidebar-collapse-btn" type="button" id="sidebarCollapseBtn" aria-label="Collapse sidebar">
+          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 16 16">
+            <path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>
+          </svg>
+        </button>
+      </div>
+      <div class="sidebar-body">
+        <nav class="sidebar-nav">
+          {% if principal %}
+          <div class="nav-section">
+            <span class="nav-section-title">Navigation</span>
+            <a href="{{ url_for(endpoint="ui.buckets_overview") }}" class="sidebar-link {% if current_endpoint == "ui.buckets_overview" or current_endpoint == "ui.bucket_detail" %}active{% endif %}" data-tooltip="Buckets">
+              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
+                <path d="M2.522 5H2a.5.5 0 0 0-.494.574l1.372 9.149A1.5 1.5 0 0 0 4.36 16h7.278a1.5 1.5 0 0 0 1.483-1.277l1.373-9.149A.5.5 0 0 0 14 5h-.522A5.5 5.5 0 0 0 2.522 5zm1.005 0a4.5 4.5 0 0 1 8.945 0H3.527z"/>
+              </svg>
+              <span class="sidebar-link-text">Buckets</span>
+            </a>
+            {% if can_manage_iam %}
+            <a href="{{ url_for(endpoint="ui.iam_dashboard") }}" class="sidebar-link {% if current_endpoint == "ui.iam_dashboard" %}active{% endif %}" data-tooltip="IAM">
+              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
+                <path d="M15 14s1 0 1-1-1-4-5-4-5 3-5 4 1 1 1 1h8zm-7.978-1A.261.261 0 0 1 7 12.996c.001-.264.167-1.03.76-1.72C8.312 10.629 9.282 10 11 10c1.717 0 2.687.63 3.24 1.276.593.69.758 1.457.76 1.72l-.008.002a.274.274 0 0 1-.014.002H7.022zM11 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm3-2a3 3 0 1 1-6 0 3 3 0 0 1 6 0zM6.936 9.28a5.88 5.88 0 0 0-1.23-.247A7.35 7.35 0 0 0 5 9c-4 0-5 3-5 4 0 .667.333 1 1 1h4.216A2.238 2.238 0 0 1 5 13c0-1.01.377-2.042 1.09-2.904.243-.294.526-.569.846-.816zM4.92 10A5.493 5.493 0 0 0 4 13H1c0-.26.164-1.03.76-1.724.545-.636 1.492-1.256 3.16-1.275zM1.5 5.5a3 3 0 1 1 6 0 3 3 0 0 1-6 0zm3-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4z"/>
+              </svg>
+              <span class="sidebar-link-text">IAM</span>
+            </a>
+            <a href="{{ url_for(endpoint="ui.connections_dashboard") }}" class="sidebar-link {% if current_endpoint == "ui.connections_dashboard" %}active{% endif %}" data-tooltip="Connections">
+              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
+                <path fill-rule="evenodd" d="M6 3.5A1.5 1.5 0 0 1 7.5 2h1A1.5 1.5 0 0 1 10 3.5v1A1.5 1.5 0 0 1 8.5 6v1H14a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-1 0V8h-5v.5a.5.5 0 0 1-1 0V8h-5v.5a.5.5 0 0 1-1 0v-1A.5.5 0 0 1 2 7h5.5V6A1.5 1.5 0 0 1 6 4.5v-1zM8.5 5a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1zM0 11.5A1.5 1.5 0 0 1 1.5 10h1A1.5 1.5 0 0 1 4 11.5v1A1.5 1.5 0 0 1 2.5 14h-1A1.5 1.5 0 0 1 0 12.5v-1zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1zm4.5.5A1.5 1.5 0 0 1 7.5 10h1a1.5 1.5 0 0 1 1.5 1.5v1A1.5 1.5 0 0 1 8.5 14h-1A1.5 1.5 0 0 1 6 12.5v-1zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1zm4.5.5a1.5 1.5 0 0 1 1.5-1.5h1a1.5 1.5 0 0 1 1.5 1.5v1a1.5 1.5 0 0 1-1.5 1.5h-1a1.5 1.5 0 0 1-1.5-1.5v-1zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1z"/>
+              </svg>
+              <span class="sidebar-link-text">Connections</span>
+            </a>
+            <a href="{{ url_for(endpoint="ui.metrics_dashboard") }}" class="sidebar-link {% if current_endpoint == "ui.metrics_dashboard" %}active{% endif %}" data-tooltip="Metrics">
+              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
+                <path d="M8 4a.5.5 0 0 1 .5.5V6a.5.5 0 0 1-1 0V4.5A.5.5 0 0 1 8 4zM3.732 5.732a.5.5 0 0 1 .707 0l.915.914a.5.5 0 1 1-.708.708l-.914-.915a.5.5 0 0 1 0-.707zM2 10a.5.5 0 0 1 .5-.5h1.586a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 10zm9.5 0a.5.5 0 0 1 .5-.5h1.5a.5.5 0 0 1 0 1H12a.5.5 0 0 1-.5-.5zm.754-4.246a.389.389 0 0 0-.527-.02L7.547 9.31a.91.91 0 1 0 1.302 1.258l3.434-4.297a.389.389 0 0 0-.029-.518z"/>
+                <path fill-rule="evenodd" d="M0 10a8 8 0 1 1 15.547 2.661c-.442 1.253-1.845 1.602-2.932 1.25C11.309 13.488 9.475 13 8 13c-1.474 0-3.31.488-4.615.911-1.087.352-2.49.003-2.932-1.25A7.988 7.988 0 0 1 0 10zm8-7a7 7 0 0 0-6.603 9.329c.203.575.923.876 1.68.63C4.397 12.533 6.358 12 8 12s3.604.532 4.923.96c.757.245 1.477-.056 1.68-.631A7 7 0 0 0 8 3z"/>
+              </svg>
+              <span class="sidebar-link-text">Metrics</span>
+            </a>
+            <a href="{{ url_for(endpoint="ui.sites_dashboard") }}" class="sidebar-link {% if current_endpoint == "ui.sites_dashboard" %}active{% endif %}" data-tooltip="Sites">
+              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
+                <path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm7.5-6.923c-.67.204-1.335.82-1.887 1.855A7.97 7.97 0 0 0 5.145 4H7.5V1.077zM4.09 4a9.267 9.267 0 0 1 .64-1.539 6.7 6.7 0 0 1 .597-.933A7.025 7.025 0 0 0 2.255 4H4.09zm-.582 3.5c.03-.877.138-1.718.312-2.5H1.674a6.958 6.958 0 0 0-.656 2.5h2.49zM4.847 5a12.5 12.5 0 0 0-.338 2.5H7.5V5H4.847zM8.5 5v2.5h2.99a12.495 12.495 0 0 0-.337-2.5H8.5zM4.51 8.5a12.5 12.5 0 0 0 .337 2.5H7.5V8.5H4.51zm3.99 0V11h2.653c.187-.765.306-1.608.338-2.5H8.5zM5.145 12c.138.386.295.744.468 1.068.552 1.035 1.218 1.65 1.887 1.855V12H5.145zm.182 2.472a6.696 6.696 0 0 1-.597-.933A9.268 9.268 0 0 1 4.09 12H2.255a7.024 7.024 0 0 0 3.072 2.472zM3.82 11a13.652 13.652 0 0 1-.312-2.5h-2.49c.062.89.291 1.733.656 2.5H3.82zm6.853 3.472A7.024 7.024 0 0 0 13.745 12H11.91a9.27 9.27 0 0 1-.64 1.539 6.688 6.688 0 0 1-.597.933zM8.5 12v2.923c.67-.204 1.335-.82 1.887-1.855.173-.324.33-.682.468-1.068H8.5zm3.68-1h2.146c.365-.767.594-1.61.656-2.5h-2.49a13.65 13.65 0 0 1-.312 2.5zm2.802-3.5a6.959 6.959 0 0 0-.656-2.5H12.18c.174.782.282 1.623.312 2.5h2.49zM11.27 2.461c.247.464.462.98.64 1.539h1.835a7.024 7.024 0 0 0-3.072-2.472c.218.284.418.598.597.933zM10.855 4a7.966 7.966 0 0 0-.468-1.068C9.835 1.897 9.17 1.282 8.5 1.077V4h2.355z"/>
+              </svg>
+              <span class="sidebar-link-text">Sites</span>
+            </a>
+            {% endif %}
+            {% if website_hosting_nav %}
+            <a href="{{ url_for(endpoint="ui.website_domains_dashboard") }}" class="sidebar-link {% if current_endpoint == "ui.website_domains_dashboard" %}active{% endif %}" data-tooltip="Domains">
+              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
+                <path d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.002 1.002 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z"/>
+                <path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243L6.586 4.672z"/>
+              </svg>
+              <span class="sidebar-link-text">Domains</span>
+            </a>
+            {% endif %}
+            {% if can_manage_iam %}
+            <a href="{{ url_for(endpoint="ui.system_dashboard") }}" class="sidebar-link {% if current_endpoint == "ui.system_dashboard" %}active{% endif %}" data-tooltip="System">
+              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
+                <path d="M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872l-.1-.34zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z"/>
+              </svg>
+              <span class="sidebar-link-text">System</span>
+            </a>
+            {% endif %}
+          </div>
+          <div class="nav-section">
+            <span class="nav-section-title">Resources</span>
+            <a href="{{ url_for(endpoint="ui.docs_page") }}" class="sidebar-link {% if current_endpoint == "ui.docs_page" %}active{% endif %}" data-tooltip="Documentation">
+              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
+                <path d="M1 2.828c.885-.37 2.154-.769 3.388-.893 1.33-.134 2.458.063 3.112.752v9.746c-.935-.53-2.12-.603-3.213-.493-1.18.12-2.37.461-3.287.811V2.828zm7.5-.141c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.094-.111-2.278-.039-3.213.492V2.687zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783z"/>
+              </svg>
+              <span class="sidebar-link-text">Documentation</span>
+            </a>
+          </div>
+          {% endif %}
+        </nav>
+      </div>
+      <div class="sidebar-footer">
+        <button class="theme-toggle-sidebar" type="button" id="themeToggle" aria-label="Toggle dark mode">
+          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="theme-icon" id="themeToggleSun" viewBox="0 0 16 16">
+            <path d="M8 11.5a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7zm0 1.5a5 5 0 1 0 0-10 5 5 0 0 0 0 10zM8 0a.5.5 0 0 1 .5.5v1.555a.5.5 0 0 1-1 0V.5A.5.5 0 0 1 8 0zm0 12.945a.5.5 0 0 1 .5.5v2.055a.5.5 0 0 1-1 0v-2.055a.5.5 0 0 1 .5-.5zM2.343 2.343a.5.5 0 0 1 .707 0l1.1 1.1a.5.5 0 1 1-.708.707l-1.1-1.1a.5.5 0 0 1 0-.707zm9.507 9.507a.5.5 0 0 1 .707 0l1.1 1.1a.5.5 0 1 1-.707.708l-1.1-1.1a.5.5 0 0 1 0-.708zM0 8a.5.5 0 0 1 .5-.5h1.555a.5.5 0 0 1 0 1H.5A.5.5 0 0 1 0 8zm12.945 0a.5.5 0 0 1 .5-.5H15.5a.5.5 0 0 1 0 1h-2.055a.5.5 0 0 1-.5-.5zM2.343 13.657a.5.5 0 0 1 0-.707l1.1-1.1a.5.5 0 1 1 .708.707l-1.1 1.1a.5.5 0 0 1-.708 0zm9.507-9.507a.5.5 0 0 1 0-.707l1.1-1.1a.5.5 0 0 1 .707.708l-1.1 1.1a.5.5 0 0 1-.707 0z"/>
+          </svg>
+          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="theme-icon" id="themeToggleMoon" viewBox="0 0 16 16">
+            <path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"/>
+            <path d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z"/>
+          </svg>
+          <span class="theme-toggle-text">Toggle theme</span>
+        </button>
+        {% if principal %}
+        <div class="sidebar-user" data-username="{{ principal.display_name }}">
+          <div class="user-avatar">
+            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 16 16">
+              <path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
+              <path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"/>
+            </svg>
+          </div>
+          <div class="user-info">
+            <div class="user-name" title="{{ principal.display_name }}">{{ principal.display_name | truncate(length=16) }}</div>
+            <div class="user-key">{{ principal.access_key | truncate(length=12) }}</div>
+          </div>
+        </div>
+        <form method="post" action="{{ url_for(endpoint="ui.logout") }}" class="w-100">
+          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
+          <button class="sidebar-logout-btn" type="submit">
+            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 16 16">
+              <path fill-rule="evenodd" d="M10 12.5a.5.5 0 0 1-.5.5h-8a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 .5.5v2a.5.5 0 0 0 1 0v-2A1.5 1.5 0 0 0 9.5 2h-8A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h8a1.5 1.5 0 0 0 1.5-1.5v-2a.5.5 0 0 0-1 0v2z"/>
+              <path fill-rule="evenodd" d="M15.854 8.354a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708.708L14.293 7.5H5.5a.5.5 0 0 0 0 1h8.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3z"/>
+            </svg>
+            <span class="logout-text">Sign out</span>
+          </button>
+        </form>
+        {% endif %}
+      </div>
+    </aside>
+
+    <div class="main-wrapper">
+      <main class="main-content">
+        {% block content %}{% endblock %}
+      </main>
+    </div>
+    <div class="toast-container position-fixed bottom-0 end-0 p-3">
+      <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
+        <div class="toast-header">
+          <strong class="me-auto" id="toastTitle">Notification</strong>
+          <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+        </div>
+        <div class="toast-body" id="toastMessage">
+          Hello, world! This is a toast message.
+        </div>
+      </div>
+    </div>
+    <script
+      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
+      integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
+      crossorigin="anonymous"
+    ></script>
+    <script>
+      window.myfsioCsrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';
+      window.getCsrfToken = () => window.myfsioCsrfToken;
+      (function () {
+        const originalFetch = window.fetch;
+        window.fetch = function (input, init) {
+          init = init || {};
+          const method = (init.method || 'GET').toUpperCase();
+          if (method !== 'GET' && method !== 'HEAD' && method !== 'OPTIONS') {
+            const headers = new Headers(init.headers || {});
+            if (window.myfsioCsrfToken) {
+              headers.set('X-CSRFToken', window.myfsioCsrfToken);
+            }
+            init.headers = headers;
+          }
+          return originalFetch.call(this, input, init);
+        };
+      })();
+    </script>
+    <script>
+      (function () {
+        const storageKey = 'myfsio-theme';
+        const toggle = document.getElementById('themeToggle');
+        const toggleMobile = document.getElementById('themeToggleMobile');
+        const sunIcon = document.getElementById('themeToggleSun');
+        const moonIcon = document.getElementById('themeToggleMoon');
+        const sunIconMobile = document.getElementById('themeToggleSunMobile');
+        const moonIconMobile = document.getElementById('themeToggleMoonMobile');
+
+        const applyTheme = (theme) => {
+          document.documentElement.dataset.bsTheme = theme;
+          document.documentElement.dataset.theme = theme;
+          try {
+            localStorage.setItem(storageKey, theme);
+          } catch (err) {
+            console.log("Error: local storage not available, cannot save theme preference.");
+          }
+          const isDark = theme === 'dark';
+          if (sunIcon && moonIcon) {
+            sunIcon.classList.toggle('d-none', !isDark);
+            moonIcon.classList.toggle('d-none', isDark);
+          }
+          if (sunIconMobile && moonIconMobile) {
+            sunIconMobile.classList.toggle('d-none', !isDark);
+            moonIconMobile.classList.toggle('d-none', isDark);
+          }
+          [toggle, toggleMobile].forEach(btn => {
+            if (btn) {
+              btn.setAttribute('aria-pressed', isDark ? 'true' : 'false');
+              btn.setAttribute('title', isDark ? 'Switch to light mode' : 'Switch to dark mode');
+              btn.setAttribute('aria-label', isDark ? 'Switch to light mode' : 'Switch to dark mode');
+            }
+          });
+        };
+
+        const current = document.documentElement.dataset.bsTheme || 'light';
+        applyTheme(current);
+
+        const handleToggle = () => {
+          const next = document.documentElement.dataset.bsTheme === 'dark' ? 'light' : 'dark';
+          applyTheme(next);
+        };
+
+        toggle?.addEventListener('click', handleToggle);
+        toggleMobile?.addEventListener('click', handleToggle);
+      })();
+    </script>
+    <script>
+      (function () {
+        const sidebar = document.getElementById('desktopSidebar');
+        const collapseBtn = document.getElementById('sidebarCollapseBtn');
+        const sidebarBrand = document.getElementById('sidebarBrand');
+        const storageKey = 'myfsio-sidebar-collapsed';
+
+        if (!sidebar || !collapseBtn) return;
+
+        const applyCollapsed = (collapsed) => {
+          sidebar.classList.toggle('sidebar-collapsed', collapsed);
+          document.body.classList.toggle('sidebar-is-collapsed', collapsed);
+          document.documentElement.classList.remove('sidebar-will-collapse');
+          try {
+            localStorage.setItem(storageKey, collapsed ? 'true' : 'false');
+          } catch (err) {}
+        };
+
+        try {
+          const stored = localStorage.getItem(storageKey);
+          applyCollapsed(stored === 'true');
+        } catch (err) {
+          document.documentElement.classList.remove('sidebar-will-collapse');
+        }
+
+        collapseBtn.addEventListener('click', () => {
+          const isCollapsed = sidebar.classList.contains('sidebar-collapsed');
+          applyCollapsed(!isCollapsed);
+        });
+
+        sidebarBrand?.addEventListener('click', (e) => {
+          const isCollapsed = sidebar.classList.contains('sidebar-collapsed');
+          if (isCollapsed) {
+            e.preventDefault();
+            applyCollapsed(false);
+          }
+        });
+      })();
+    </script>
+    <script>
+
+      window.showToast = function(message, title = 'Notification', type = 'info') {
+        const toastEl = document.getElementById('liveToast');
+        const toastTitle = document.getElementById('toastTitle');
+        const toastMessage = document.getElementById('toastMessage');
+        
+        toastTitle.textContent = title;
+        toastMessage.textContent = message;
+
+        toastEl.classList.remove('text-bg-primary', 'text-bg-success', 'text-bg-danger', 'text-bg-warning');
+        
+        if (type === 'success') toastEl.classList.add('text-bg-success');
+        if (type === 'error') toastEl.classList.add('text-bg-danger');
+        if (type === 'warning') toastEl.classList.add('text-bg-warning');
+        
+        const toast = new bootstrap.Toast(toastEl);
+        toast.show();
+      };
+    </script>
+    <script>
+      (function () {
+
+        {% if flashed_messages %}
+          {% for flash in flashed_messages %}
+            var type = "{{ flash.category }}";
+            if (type === "danger") type = "error";
+            window.showToast({{ flash.message | json_encode | safe }}, "Notification", type);
+          {% endfor %}
+        {% endif %}
+      })();
+    </script>
+    <script src="{{ url_for(endpoint="static", filename="js/ui-core.js") }}"></script>
+    {% block extra_scripts %}{% endblock %}
+
+  </body>
+</html>

rust/myfsio-engine/crates/myfsio-server/templates/buckets.html

@@ -0,0 +1,246 @@
+{% extends "base.html" %}
+{% block content %}
+<div class="d-flex justify-content-between align-items-center mb-4">
+  <div>
+    <h1 class="h3 mb-1 fw-bold">Buckets</h1>
+    <p class="text-muted mb-0">Manage your S3-compatible storage containers.</p>
+  </div>
+  <button class="btn btn-primary shadow-sm" data-bs-toggle="modal" data-bs-target="#createBucketModal">
+    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-lg me-1" viewBox="0 0 16 16">
+      <path fill-rule="evenodd" d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2Z"/>
+    </svg>
+    Create Bucket
+  </button>
+</div>
+
+<div class="d-flex justify-content-between align-items-center mb-3 gap-3">
+  <div class="position-relative flex-grow-1" style="max-width: 300px;">
+    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search position-absolute top-50 start-0 translate-middle-y ms-3 text-muted" viewBox="0 0 16 16">
+      <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
+    </svg>
+    <input type="search" class="form-control ps-5" id="bucket-search" placeholder="Filter buckets..." aria-label="Search buckets">
+  </div>
+  <div class="btn-group" role="group" aria-label="View toggle">
+    <input type="radio" class="btn-check" name="view-toggle" id="view-grid" autocomplete="off" checked>
+    <label class="btn btn-outline-secondary" for="view-grid" title="Grid view">
+      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-grid-fill" viewBox="0 0 16 16">
+        <path d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5v-3zm8 0A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5v-3zm-8 8A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5v-3zm8 0A1.5 1.5 0 0 1 10.5 9h3A1.5 1.5 0 0 1 15 10.5v3A1.5 1.5 0 0 1 13.5 15h-3A1.5 1.5 0 0 1 9 13.5v-3z"/>
+      </svg>
+    </label>
+
+    <input type="radio" class="btn-check" name="view-toggle" id="view-list" autocomplete="off">
+    <label class="btn btn-outline-secondary" for="view-list" title="List view">
+      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-list-ul" viewBox="0 0 16 16">
+        <path fill-rule="evenodd" d="M5 11.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm-3 1a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm0 4a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm0 4a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/>
+      </svg>
+    </label>
+  </div>
+</div>
+
+<div class="row g-3" id="buckets-container">
+  {% for bucket in buckets %}
+  <div class="col-md-6 col-xl-4 bucket-item">
+    <div class="card h-100 shadow-sm bucket-card" data-bucket-row data-href="{{ bucket.detail_url }}">
+      <div class="card-body">
+        <div class="d-flex justify-content-between align-items-start mb-2">
+          <div class="d-flex align-items-center gap-3">
+            <div class="bucket-icon">
+              <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" viewBox="0 0 16 16">
+                <path d="M2.522 5H2a.5.5 0 0 0-.494.574l1.372 9.149A1.5 1.5 0 0 0 4.36 16h7.278a1.5 1.5 0 0 0 1.483-1.277l1.373-9.149A.5.5 0 0 0 14 5h-.522A5.5 5.5 0 0 0 2.522 5zm1.005 0a4.5 4.5 0 0 1 8.945 0H3.527z"/>
+              </svg>
+            </div>
+            <div>
+              <h5 class="bucket-name text-break">{{ bucket.meta.name }}</h5>
+              <small class="text-muted">Created {{ bucket.meta.creation_date | format_datetime }}</small>
+            </div>
+          </div>
+          <span class="badge {{ bucket.access_badge }} bucket-access-badge">{{ bucket.access_label }}</span>
+        </div>
+        
+        <div class="bucket-stats">
+          <div class="bucket-stat">
+            <div class="bucket-stat-value">{{ bucket.summary.human_size }}</div>
+            <div class="bucket-stat-label">Storage</div>
+          </div>
+          <div class="bucket-stat">
+            <div class="bucket-stat-value">{{ bucket.summary.objects }}</div>
+            <div class="bucket-stat-label">Objects</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  {% else %}
+  <div class="col-12">
+    <div class="empty-state bg-panel rounded-3 border border-dashed">
+      <div class="empty-state-icon">
+        <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" fill="currentColor" viewBox="0 0 16 16">
+          <path d="M2.522 5H2a.5.5 0 0 0-.494.574l1.372 9.149A1.5 1.5 0 0 0 4.36 16h7.278a1.5 1.5 0 0 0 1.483-1.277l1.373-9.149A.5.5 0 0 0 14 5h-.522A5.5 5.5 0 0 0 2.522 5zm1.005 0a4.5 4.5 0 0 1 8.945 0H3.527z"/>
+        </svg>
+      </div>
+      <h5 class="mb-2">No buckets yet</h5>
+      <p class="text-muted mb-4">Create your first storage bucket to start organizing your files.</p>
+      <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createBucketModal">
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="me-1" viewBox="0 0 16 16">
+          <path fill-rule="evenodd" d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2Z"/>
+        </svg>
+        Create Bucket
+      </button>
+    </div>
+  </div>
+  {% endfor %}
+  <div class="col-12 d-none" id="bucket-no-results">
+    <div class="text-center py-5 text-muted">
+      <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="mb-3 opacity-50" viewBox="0 0 16 16">
+        <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
+      </svg>
+      <p class="mb-0 fw-medium">No buckets match your filter.</p>
+    </div>
+  </div>
+</div>
+
+<div class="modal fade" id="createBucketModal" tabindex="-1" aria-hidden="true">
+  <div class="modal-dialog modal-dialog-centered">
+    <div class="modal-content">
+      <div class="modal-header border-0">
+        <h1 class="modal-title fs-5">
+          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="text-primary" viewBox="0 0 16 16">
+            <path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/>
+            <path d="M7.646 1.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 2.707V11.5a.5.5 0 0 1-1 0V2.707L5.354 4.854a.5.5 0 1 1-.708-.708l3-3z"/>
+          </svg>
+          Create bucket
+        </h1>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+      <form method="post" action="{{ url_for(endpoint="ui.create_bucket") }}" id="createBucketForm">
+        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
+        <div class="modal-body pt-0">
+          <label class="form-label fw-medium">Bucket name</label>
+          <input class="form-control" type="text" name="bucket_name" pattern="[a-z0-9.-]{3,63}" placeholder="my-bucket-name" required autofocus />
+          <div class="form-text">Use 3-63 characters: lowercase letters, numbers, dots, or hyphens.</div>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
+          <button class="btn btn-primary" type="submit">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="me-1" viewBox="0 0 16 16">
+              <path fill-rule="evenodd" d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2Z"/>
+            </svg>
+            Create
+          </button>
+        </div>
+      </form>
+    </div>
+  </div>
+</div>
+{% endblock %}
+
+{% block extra_scripts %}
+{{ super() }}
+<script>
+  (function () {
+
+    const searchInput = document.getElementById('bucket-search');
+    const bucketItems = document.querySelectorAll('.bucket-item');
+    const noBucketsMsg = document.querySelector('.text-center.py-5');
+
+    if (searchInput) {
+      searchInput.addEventListener('input', (e) => {
+        const term = e.target.value.toLowerCase();
+        let visibleCount = 0;
+
+        bucketItems.forEach(item => {
+          const name = item.querySelector('.bucket-name').textContent.toLowerCase();
+          if (name.includes(term)) {
+            item.classList.remove('d-none');
+            visibleCount++;
+          } else {
+            item.classList.add('d-none');
+          }
+        });
+
+        var noResults = document.getElementById('bucket-no-results');
+        if (noResults) {
+          if (term && visibleCount === 0) {
+            noResults.classList.remove('d-none');
+          } else {
+            noResults.classList.add('d-none');
+          }
+        }
+      });
+    }
+
+    const viewGrid = document.getElementById('view-grid');
+    const viewList = document.getElementById('view-list');
+    const container = document.getElementById('buckets-container');
+    const items = document.querySelectorAll('.bucket-item');
+    const cards = document.querySelectorAll('.bucket-card');
+
+    function setView(view) {
+      if (view === 'list') {
+        items.forEach(item => {
+          item.classList.remove('col-md-6', 'col-xl-4');
+          item.classList.add('col-12');
+        });
+        cards.forEach(card => {
+          card.classList.remove('h-100');
+
+        });
+        localStorage.setItem('bucket-view-pref', 'list');
+      } else {
+        items.forEach(item => {
+          item.classList.remove('col-12');
+          item.classList.add('col-md-6', 'col-xl-4');
+        });
+        cards.forEach(card => {
+          card.classList.add('h-100');
+        });
+        localStorage.setItem('bucket-view-pref', 'grid');
+      }
+    }
+
+    if (viewGrid && viewList) {
+      viewGrid.addEventListener('change', () => setView('grid'));
+      viewList.addEventListener('change', () => setView('list'));
+
+      const pref = localStorage.getItem('bucket-view-pref');
+      if (pref === 'list') {
+        viewList.checked = true;
+        setView('list');
+      }
+    }
+
+    const rows = document.querySelectorAll('[data-bucket-row]');
+    rows.forEach((row) => {
+      row.addEventListener('click', (event) => {
+        if (event.target.closest('[data-ignore-row-click]')) {
+          return;
+        }
+        const href = row.dataset.href;
+        if (href) {
+          window.location.href = href;
+        }
+      });
+      row.style.cursor = 'pointer';
+    });
+
+    var createForm = document.getElementById('createBucketForm');
+    if (createForm) {
+      createForm.addEventListener('submit', function(e) {
+        e.preventDefault();
+        window.UICore.submitFormAjax(createForm, {
+          successMessage: 'Bucket created',
+          onSuccess: function(data) {
+            var modal = bootstrap.Modal.getInstance(document.getElementById('createBucketModal'));
+            if (modal) modal.hide();
+            if (data.bucket_name) {
+              window.location.href = '{{ url_for(endpoint="ui.bucket_detail", bucket_name="__BUCKET__") }}'.replace('__BUCKET__', data.bucket_name);
+            } else {
+              location.reload();
+            }
+          }
+        });
+      });
+    }
+  })();
+</script>
+{% endblock %}

rust/myfsio-engine/crates/myfsio-server/templates/connections.html

@@ -0,0 +1,303 @@
+{% extends "base.html" %}
+
+{% block title %}Connections - S3 Compatible Storage{% endblock %}
+
+{% block content %}
+<div class="page-header d-flex justify-content-between align-items-center mb-4">
+  <div>
+    <p class="text-uppercase text-muted small mb-1">Replication</p>
+    <h1 class="h3 mb-1 d-flex align-items-center gap-2">
+      <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="currentColor" class="text-primary" viewBox="0 0 16 16">
+        <path d="M4.406 3.342A5.53 5.53 0 0 1 8 2c2.69 0 4.923 2 5.166 4.579C14.758 6.804 16 8.137 16 9.773 16 11.569 14.502 13 12.687 13H3.781C1.708 13 0 11.366 0 9.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383z"/>
+        <path d="M10.232 8.768l.546-.353a.25.25 0 0 0 0-.418l-.546-.354a.25.25 0 0 1-.116-.21V6.25a.25.25 0 0 0-.25-.25h-.5a.25.25 0 0 0-.25.25v1.183a.25.25 0 0 1-.116.21l-.546.354a.25.25 0 0 0 0 .418l.546.353a.25.25 0 0 1 .116.21v1.183a.25.25 0 0 0 .25.25h.5a.25.25 0 0 0 .25-.25V8.978a.25.25 0 0 1 .116-.21z"/>
+      </svg>
+      Remote Connections
+    </h1>
+    <p class="text-muted mb-0 mt-1">Manage connections to other S3-compatible services for replication.</p>
+  </div>
+  <div class="d-none d-md-block">
+    <span class="badge bg-primary bg-opacity-10 text-primary fs-6 px-3 py-2">
+      {{ connections|length }} connection{% if connections|length != 1 %}s{% else %}{% endif %}
+    </span>
+  </div>
+</div>
+
+<div class="row g-4">
+    <div class="col-lg-4 col-md-5">
+        <div class="card shadow-sm border-0" style="border-radius: 1rem;">
+            <div class="card-header bg-transparent border-0 pt-4 pb-0 px-4">
+                <h5 class="fw-semibold d-flex align-items-center gap-2 mb-1">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="text-primary" viewBox="0 0 16 16">
+                        <path fill-rule="evenodd" d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2Z"/>
+                    </svg>
+                    Add New Connection
+                </h5>
+                <p class="text-muted small mb-0">Connect to an S3-compatible endpoint</p>
+            </div>
+            <div class="card-body px-4 pb-4">
+                <form method="POST" action="{{ url_for(endpoint="ui.create_connection") }}" id="createConnectionForm">
+                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
+                    <div class="mb-3">
+                        <label for="name" class="form-label fw-medium">Name</label>
+                        <input type="text" class="form-control" id="name" name="name" required placeholder="Production Backup">
+                    </div>
+                    <div class="mb-3">
+                        <label for="endpoint_url" class="form-label fw-medium">Endpoint URL</label>
+                        <input type="url" class="form-control" id="endpoint_url" name="endpoint_url" required placeholder="https://s3.us-east-1.amazonaws.com">
+                    </div>
+                    <div class="mb-3">
+                        <label for="region" class="form-label fw-medium">Region</label>
+                        <input type="text" class="form-control" id="region" name="region" value="us-east-1">
+                    </div>
+                    <div class="mb-3">
+                        <label for="access_key" class="form-label fw-medium">Access Key</label>
+                        <input type="text" class="form-control font-monospace" id="access_key" name="access_key" required>
+                    </div>
+                    <div class="mb-3">
+                        <label for="secret_key" class="form-label fw-medium">Secret Key</label>
+                        <div class="input-group">
+                            <input type="password" class="form-control font-monospace" id="secret_key" name="secret_key" required>
+                            <button class="btn btn-outline-secondary" type="button" onclick="ConnectionsManagement.togglePassword('secret_key')" title="Toggle visibility">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+                                    <path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"/>
+                                    <path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"/>
+                                </svg>
+                            </button>
+                        </div>
+                    </div>
+                    <div id="testResult" class="mb-3"></div>
+                    <div class="d-grid gap-2">
+                        <button type="button" class="btn btn-outline-secondary" id="testConnectionBtn">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="me-1" viewBox="0 0 16 16">
+                                <path d="M11.251.068a.5.5 0 0 1 .227.58L9.677 6.5H13a.5.5 0 0 1 .364.843l-8 8.5a.5.5 0 0 1-.842-.49L6.323 9.5H3a.5.5 0 0 1-.364-.843l8-8.5a.5.5 0 0 1 .615-.09z"/>
+                            </svg>
+                            Test Connection
+                        </button>
+                        <button type="submit" class="btn btn-primary">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="me-1" viewBox="0 0 16 16">
+                                <path fill-rule="evenodd" d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2Z"/>
+                            </svg>
+                            Add Connection
+                        </button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+    
+    <div class="col-lg-8 col-md-7">
+        <div class="card shadow-sm border-0" style="border-radius: 1rem;">
+            <div class="card-header bg-transparent border-0 pt-4 pb-0 px-4 d-flex justify-content-between align-items-center">
+                <div>
+                    <h5 class="fw-semibold d-flex align-items-center gap-2 mb-1">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="text-muted" viewBox="0 0 16 16">
+                            <path d="M0 1.5A1.5 1.5 0 0 1 1.5 0h2A1.5 1.5 0 0 1 5 1.5v2A1.5 1.5 0 0 1 3.5 5h-2A1.5 1.5 0 0 1 0 3.5v-2zM1.5 1a.5.5 0 0 0-.5.5v2a.5.5 0 0 0 .5.5h2a.5.5 0 0 0 .5-.5v-2a.5.5 0 0 0-.5-.5h-2zM0 8a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V8zm1 3v2a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2H1zm14-1V8a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v2h14zM2 8.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0 4a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5z"/>
+                        </svg>
+                        Existing Connections
+                    </h5>
+                    <p class="text-muted small mb-0">Configured remote endpoints</p>
+                </div>
+            </div>
+            <div class="card-body px-4 pb-4">
+                {% if connections %}
+                <div class="table-responsive">
+                    <table class="table table-hover align-middle mb-0">
+                        <thead class="table-light">
+                            <tr>
+                                <th scope="col" style="width: 50px;">Status</th>
+                                <th scope="col">Name</th>
+                                <th scope="col">Endpoint</th>
+                                <th scope="col">Region</th>
+                                <th scope="col">Access Key</th>
+                                <th scope="col" class="text-end">Actions</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {% for conn in connections %}
+                            <tr data-connection-id="{{ conn.id }}">
+                                <td class="text-center">
+                                    <span class="connection-status" data-status="checking" title="Checking...">
+                                        <span class="spinner-border spinner-border-sm text-muted" role="status" style="width: 12px; height: 12px;"></span>
+                                    </span>
+                                </td>
+                                <td>
+                                    <div class="d-flex align-items-center gap-2">
+                                        <div class="connection-icon">
+                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+                                                <path d="M4.406 3.342A5.53 5.53 0 0 1 8 2c2.69 0 4.923 2 5.166 4.579C14.758 6.804 16 8.137 16 9.773 16 11.569 14.502 13 12.687 13H3.781C1.708 13 0 11.366 0 9.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383z"/>
+                                            </svg>
+                                        </div>
+                                        <span class="fw-medium">{{ conn.name }}</span>
+                                    </div>
+                                </td>
+                                <td>
+                                    <span class="text-muted small text-truncate d-inline-block" style="max-width: 200px;" title="{{ conn.endpoint_url }}">{{ conn.endpoint_url }}</span>
+                                </td>
+                                <td><span class="badge bg-primary bg-opacity-10 text-primary">{{ conn.region }}</span></td>
+                                <td><code class="small">{{ conn.access_key | slice(start=0, end=8) }}...{{ conn.access_key | slice(start=-4) }}</code></td>
+                                <td class="text-end">
+                                    <div class="btn-group btn-group-sm" role="group">
+                                        <button type="button" class="btn btn-outline-secondary" 
+                                            data-bs-toggle="modal" 
+                                            data-bs-target="#editConnectionModal"
+                                            data-id="{{ conn.id }}"
+                                            data-name="{{ conn.name }}"
+                                            data-endpoint="{{ conn.endpoint_url }}"
+                                            data-region="{{ conn.region }}"
+                                            data-access="{{ conn.access_key }}"
+                                            title="Edit connection">
+                                            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 16 16">
+                                                <path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5z"/>
+                                            </svg>
+                                        </button>
+                                        <button type="button" class="btn btn-outline-danger" 
+                                            data-bs-toggle="modal" 
+                                            data-bs-target="#deleteConnectionModal"
+                                            data-id="{{ conn.id }}"
+                                            data-name="{{ conn.name }}"
+                                            title="Delete connection">
+                                            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 16 16">
+                                                <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/>
+                                                <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/>
+                                            </svg>
+                                        </button>
+                                    </div>
+                                </td>
+                            </tr>
+                            {% endfor %}
+                        </tbody>
+                    </table>
+                </div>
+                {% else %}
+                <div class="empty-state text-center py-5">
+                    <div class="empty-state-icon mx-auto mb-3">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" viewBox="0 0 16 16">
+                            <path d="M4.406 3.342A5.53 5.53 0 0 1 8 2c2.69 0 4.923 2 5.166 4.579C14.758 6.804 16 8.137 16 9.773 16 11.569 14.502 13 12.687 13H3.781C1.708 13 0 11.366 0 9.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383z"/>
+                        </svg>
+                    </div>
+                    <h5 class="fw-semibold mb-2">No connections yet</h5>
+                    <p class="text-muted mb-0">Add your first remote connection to enable bucket replication.</p>
+                </div>
+                {% endif %}
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="modal fade" id="editConnectionModal" tabindex="-1" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content">
+            <div class="modal-header border-0 pb-0">
+                <h5 class="modal-title fw-semibold">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="text-primary" viewBox="0 0 16 16">
+                        <path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z"/>
+                    </svg>
+                    Edit Connection
+                </h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <form method="POST" id="editConnectionForm">
+                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
+                <div class="modal-body">
+                    <div class="mb-3">
+                        <label for="edit_name" class="form-label fw-medium">Name</label>
+                        <input type="text" class="form-control" id="edit_name" name="name" required>
+                    </div>
+                    <div class="mb-3">
+                        <label for="edit_endpoint_url" class="form-label fw-medium">Endpoint URL</label>
+                        <input type="url" class="form-control" id="edit_endpoint_url" name="endpoint_url" required>
+                    </div>
+                    <div class="mb-3">
+                        <label for="edit_region" class="form-label fw-medium">Region</label>
+                        <input type="text" class="form-control" id="edit_region" name="region" required>
+                    </div>
+                    <div class="mb-3">
+                        <label for="edit_access_key" class="form-label fw-medium">Access Key</label>
+                        <input type="text" class="form-control font-monospace" id="edit_access_key" name="access_key" required>
+                    </div>
+                    <div class="mb-3">
+                        <label for="edit_secret_key" class="form-label fw-medium">Secret Key</label>
+                        <div class="input-group">
+                            <input type="password" class="form-control font-monospace" id="edit_secret_key" name="secret_key" required>
+                            <button class="btn btn-outline-secondary" type="button" onclick="ConnectionsManagement.togglePassword('edit_secret_key')">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+                                    <path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"/>
+                                    <path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"/>
+                                </svg>
+                            </button>
+                        </div>
+                    </div>
+                    <div id="editTestResult" class="mt-2"></div>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-outline-secondary" id="editTestConnectionBtn">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="me-1" viewBox="0 0 16 16">
+                            <path d="M11.251.068a.5.5 0 0 1 .227.58L9.677 6.5H13a.5.5 0 0 1 .364.843l-8 8.5a.5.5 0 0 1-.842-.49L6.323 9.5H3a.5.5 0 0 1-.364-.843l8-8.5a.5.5 0 0 1 .615-.09z"/>
+                        </svg>
+                        Test
+                    </button>
+                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
+                    <button type="submit" class="btn btn-primary">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="me-1" viewBox="0 0 16 16">
+                            <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"/>
+                        </svg>
+                        Save
+                    </button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
+
+<div class="modal fade" id="deleteConnectionModal" tabindex="-1" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content">
+            <div class="modal-header border-0 pb-0">
+                <h5 class="modal-title fw-semibold">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="text-danger" viewBox="0 0 16 16">
+                        <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/>
+                        <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/>
+                    </svg>
+                    Delete Connection
+                </h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body">
+                <p>Are you sure you want to delete <strong id="deleteConnectionName"></strong>?</p>
+                <div class="alert alert-warning d-flex align-items-start small" role="alert">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="flex-shrink-0 me-2 mt-0" viewBox="0 0 16 16">
+                        <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
+                    </svg>
+                    <div>This will stop any replication rules using this connection.</div>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
+                <form method="POST" id="deleteConnectionForm">
+                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
+                    <button type="submit" class="btn btn-danger">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="me-1" viewBox="0 0 16 16">
+                            <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/>
+                            <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/>
+                        </svg>
+                        Delete
+                    </button>
+                </form>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script src="{{ url_for(endpoint="static", filename="js/connections-management.js") }}"></script>
+<script>
+  ConnectionsManagement.init({
+    csrfToken: "{{ csrf_token() }}",
+    endpoints: {
+      test: "{{ url_for(endpoint="ui.test_connection") }}",
+      updateTemplate: "{{ url_for(endpoint="ui.update_connection", connection_id="CONNECTION_ID") }}",
+      deleteTemplate: "{{ url_for(endpoint="ui.delete_connection", connection_id="CONNECTION_ID") }}",
+      healthTemplate: "/ui/connections/CONNECTION_ID/health"
+    }
+  });
+</script>
+{% endblock %}

rust/myfsio-engine/crates/myfsio-server/templates/csrf_error.html

@@ -0,0 +1,14 @@
+{% extends "base.html" %}
+{% block content %}
+<div class="text-center py-5">
+  <p class="text-uppercase text-muted small mb-2">Security Check Failed</p>
+  <h1 class="display-6 mb-3">Session Expired or Invalid</h1>
+  <p class="text-muted mb-4">Your session may have expired or the form submission was invalid. Please refresh the page and try again.</p>
+  {% if reason %}
+  <p class="text-danger small">{{ reason }}</p>
+  {% endif %}
+  <div class="d-flex flex-wrap justify-content-center gap-3">
+    <a class="btn btn-primary" href="{{ url_for(endpoint="ui.buckets_overview") }}">Return to buckets</a>
+  </div>
+</div>
+{% endblock %}

rust/myfsio-engine/crates/myfsio-server/templates/iam.html

@@ -0,0 +1,632 @@
+{% extends "base.html" %}
+{% block content %}
+{% if iam_locked %}{% set iam_disabled = "disabled" %}{% else %}{% set iam_disabled = "" %}{% endif %}
+<div class="page-header d-flex justify-content-between align-items-center mb-4">
+  <div>
+    <p class="text-uppercase text-muted small mb-1">Identity & Access Management</p>
+    <h1 class="h3 mb-1 d-flex align-items-center gap-2">
+      <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="currentColor" class="text-primary" viewBox="0 0 16 16">
+        <path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z"/>
+      </svg>
+      IAM Configuration
+    </h1>
+    <p class="text-muted mb-0 mt-1">Create and manage users with fine-grained bucket permissions.</p>
+  </div>
+  <div class="d-flex gap-2">
+    {% if not iam_locked %}
+    <button class="btn btn-outline-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#configPreview" aria-expanded="false" aria-controls="configPreview">
+      View Config JSON
+    </button>
+    {% endif %}
+    <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createUserModal" {{ iam_disabled }}>
+      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person-plus me-1" viewBox="0 0 16 16">
+        <path d="M12.5 16a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Zm.5-5v1h1a.5.5 0 0 1 0 1h-1v1a.5.5 0 0 1-1 0v-1h-1a.5.5 0 0 1 0-1h1v-1a.5.5 0 0 1 1 0Zm-2-6a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM8 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z"/>
+        <path d="M8.256 14a4.474 4.474 0 0 1-.229-1.004H3c.001-.246.154-.986.832-1.664C4.484 10.68 5.711 10 8 10c.26 0 .507.009.74.025.226-.341.496-.65.804-.918C9.077 9.038 8.564 9 8 9c-5 0-6 3-6 4s1 1 1 1h5.256Z"/>
+      </svg>
+      Create User
+    </button>
+  </div>
+</div>
+
+{% if iam_locked %}
+<div class="alert alert-warning" role="alert">
+  <div class="fw-semibold mb-1">Administrator permissions required</div>
+  <p class="mb-0">You need the <code>iam:list_users</code> action to edit users or policies. {{ locked_reason or "Sign in with an admin identity to continue." }}</p>
+</div>
+{% endif %}
+
+{% if disclosed_secret %}
+<div class="alert alert-info border-0 shadow-sm mb-4" role="alert">
+  <div class="d-flex align-items-start gap-2 mb-2">
+    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-key flex-shrink-0 mt-1" viewBox="0 0 16 16">
+      <path d="M0 8a4 4 0 0 1 7.465-2H14a.5.5 0 0 1 .354.146l1.5 1.5a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0L13 9.207l-.646.647a.5.5 0 0 1-.708 0L11 9.207l-.646.647a.5.5 0 0 1-.708 0L9 9.207l-.646.647A.5.5 0 0 1 8 10h-.535A4 4 0 0 1 0 8zm4-3a3 3 0 1 0 2.712 4.285A.5.5 0 0 1 7.163 9h.63l.853-.854a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.793-.793-1-1h-6.63a.5.5 0 0 1-.451-.285A3 3 0 0 0 4 5z"/>
+      <path d="M4 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
+    </svg>
+    <div class="flex-grow-1">
+      <div class="fw-semibold">
+        {% if disclosed_secret.operation == "rotate" %}
+        Secret rotated for <code>{{ disclosed_secret.access_key }}</code>
+        {% else %}
+        New user created: <code>{{ disclosed_secret.access_key }}</code>
+        {% endif %}
+      </div>
+      <p class="mb-2 small">These credentials are only shown once. Copy them now and store them securely.</p>
+    </div>
+  </div>
+  <div class="input-group mb-2">
+    <span class="input-group-text"><strong>Access key</strong></span>
+    <input class="form-control font-monospace" type="text" value="{{ disclosed_secret.access_key }}" readonly id="disclosedAccessKeyValue" />
+    <button class="btn btn-outline-primary" type="button" data-access-key-copy>
+      <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="bi bi-clipboard" viewBox="0 0 16 16">
+        <path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/>
+        <path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/>
+      </svg>
+      Copy
+    </button>
+  </div>
+  <div class="input-group">
+    <span class="input-group-text"><strong>Secret key</strong></span>
+    <input class="form-control font-monospace" type="text" value="{{ disclosed_secret.secret_key }}" readonly id="disclosedSecretValue" />
+    <button class="btn btn-outline-primary" type="button" data-secret-copy>
+      <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="bi bi-clipboard" viewBox="0 0 16 16">
+        <path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/>
+        <path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/>
+      </svg>
+      Copy
+    </button>
+  </div>
+</div>
+{% endif %}
+
+{% if not iam_locked %}
+<div class="collapse mb-4" id="configPreview">
+  <div class="card shadow-sm">
+    <div class="card-header d-flex justify-content-between align-items-center flex-wrap gap-2">
+      <span class="fw-semibold">Configuration Preview</span>
+      <span class="badge text-bg-secondary">{{ config_summary.user_count }} users</span>
+    </div>
+    <div class="card-body">
+      <div class="position-relative">
+        <pre class="policy-preview mb-0" id="iamConfigPreview">{{ config_document }}</pre>
+        <button class="btn btn-outline-light btn-sm config-copy" type="button" data-copy-target="iamConfigPreview">Copy JSON</button>
+      </div>
+      <p class="text-muted small mt-2 mb-0">Secrets are masked above. IAM config is encrypted at rest.</p>
+    </div>
+  </div>
+</div>
+{% endif %}
+
+<div class="card shadow-sm border-0" style="border-radius: 1rem;">
+  <div class="card-header bg-transparent border-0 pt-4 pb-0 px-4 d-flex justify-content-between align-items-center">
+    <div>
+      <h5 class="fw-semibold d-flex align-items-center gap-2 mb-1">
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="text-muted" viewBox="0 0 16 16">
+          <path d="M15 14s1 0 1-1-1-4-5-4-5 3-5 4 1 1 1 1h8zm-7.978-1A.261.261 0 0 1 7 12.996c.001-.264.167-1.03.76-1.72C8.312 10.629 9.282 10 11 10c1.717 0 2.687.63 3.24 1.276.593.69.758 1.457.76 1.72l-.008.002a.274.274 0 0 1-.014.002H7.022zM11 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm3-2a3 3 0 1 1-6 0 3 3 0 0 1 6 0zM6.936 9.28a5.88 5.88 0 0 0-1.23-.247A7.35 7.35 0 0 0 5 9c-4 0-5 3-5 4 0 .667.333 1 1 1h4.216A2.238 2.238 0 0 1 5 13c0-1.01.377-2.042 1.09-2.904.243-.294.526-.569.846-.816zM4.92 10A5.493 5.493 0 0 0 4 13H1c0-.26.164-1.03.76-1.724.545-.636 1.492-1.256 3.16-1.275zM1.5 5.5a3 3 0 1 1 6 0 3 3 0 0 1-6 0zm3-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4z"/>
+        </svg>
+        Users
+      </h5>
+      <p class="text-muted small mb-0">{% if not iam_locked %}{{ users|length }}{% else %}{{ "?" }}{% endif %} user{% if not iam_locked and users|length != 1 %}s{% endif %} configured</p>
+    </div>
+    {% if iam_locked %}<span class="badge bg-warning bg-opacity-10 text-warning">View only</span>{% endif %}
+  </div>
+  {% if iam_locked %}
+  <div class="card-body px-4 pb-4">
+    <div class="alert alert-secondary d-flex align-items-center mb-0" role="alert">
+      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="flex-shrink-0 me-2" viewBox="0 0 16 16">
+        <path d="M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2z"/>
+      </svg>
+      <div>Sign in with an administrator account to list or edit IAM users.</div>
+    </div>
+  </div>
+  {% else %}
+  <div class="card-body px-4 pb-4">
+    {% if users %}
+    {% if users|length > 1 %}
+    <div class="mb-3">
+      <div class="search-input-wrapper">
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="search-icon" viewBox="0 0 16 16">
+          <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
+        </svg>
+        <input type="text" class="form-control" id="iam-user-search" placeholder="Filter users by name or access key..." autocomplete="off" />
+      </div>
+    </div>
+    {% endif %}
+    <div class="row g-3">
+      {% for user in users %}
+      {% set_global is_admin = false %}
+      {% set_global is_expired = false %}
+      {% set_global is_expiring_soon = false %}
+      {% for policy in user.policies %}
+        {% if "iam:*" in policy.actions or "*" in policy.actions %}
+          {% set_global is_admin = true %}
+        {% endif %}
+      {% endfor %}
+      {% if user.expires_at %}
+        {% set exp_str = user.expires_at %}
+        {% if exp_str <= now_iso %}
+          {% set_global is_expired = true %}
+        {% elif exp_str <= soon_iso %}
+          {% set_global is_expiring_soon = true %}
+        {% endif %}
+      {% endif %}
+      <div class="col-md-6 col-xl-4 iam-user-item" data-display-name="{{ user.display_name|lower }}" data-access-key-filter="{{ user.access_key|lower }}">
+        <div class="card h-100 iam-user-card{% if is_admin %} iam-admin-card{% else %}{% endif %}">
+          <div class="card-body">
+            <div class="d-flex align-items-start justify-content-between mb-3">
+              <div class="d-flex align-items-center gap-3 min-width-0 overflow-hidden">
+                <div class="user-avatar user-avatar-lg flex-shrink-0">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 16 16">
+                    <path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z"/>
+                  </svg>
+                </div>
+                <div class="min-width-0">
+                  <div class="d-flex align-items-center gap-2 mb-0">
+                    <h6 class="fw-semibold mb-0 text-truncate" title="{{ user.display_name }}">{{ user.display_name }}</h6>
+                    {% if is_admin %}
+                    <span class="iam-role-badge iam-role-admin" data-role-badge>Admin</span>
+                    {% else %}
+                    <span class="iam-role-badge iam-role-user" data-role-badge>User</span>
+                    {% endif %}
+                    {% if is_expired %}
+                    <span class="badge text-bg-danger" style="font-size: .65rem">Expired</span>
+                    {% elif is_expiring_soon %}
+                    <span class="badge text-bg-warning" style="font-size: .65rem">Expiring soon</span>
+                    {% endif %}
+                  </div>
+                  <div class="d-flex align-items-center gap-1">
+                    <code class="small text-muted text-truncate" title="{{ user.access_key }}">{{ user.access_key }}</code>
+                    <button type="button" class="iam-copy-key" title="Copy access key" data-copy-access-key="{{ user.access_key }}">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" viewBox="0 0 16 16">
+                        <path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/>
+                        <path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/>
+                      </svg>
+                    </button>
+                  </div>
+                </div>
+              </div>
+              <div class="dropdown flex-shrink-0">
+                <button class="btn btn-sm btn-icon" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+                    <path d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/>
+                  </svg>
+                </button>
+                <ul class="dropdown-menu dropdown-menu-end">
+                  <li>
+                    <button class="dropdown-item" type="button" data-edit-user="{{ user.access_key }}" data-display-name="{{ user.display_name }}">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="me-2" viewBox="0 0 16 16">
+                        <path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5z"/>
+                      </svg>
+                      Edit Name
+                    </button>
+                  </li>
+                  <li>
+                    <button class="dropdown-item" type="button" data-expiry-user="{{ user.access_key }}" data-expires-at="{{ user.expires_at or "" }}">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="me-2" viewBox="0 0 16 16">
+                        <path d="M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z"/>
+                        <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z"/>
+                      </svg>
+                      Set Expiry
+                    </button>
+                  </li>
+                  <li>
+                    <button class="dropdown-item" type="button" data-rotate-user="{{ user.access_key }}">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="me-2" viewBox="0 0 16 16">
+                        <path d="M11.534 7h3.932a.25.25 0 0 1 .192.41l-1.966 2.36a.25.25 0 0 1-.384 0l-1.966-2.36a.25.25 0 0 1 .192-.41zm-11 2h3.932a.25.25 0 0 0 .192-.41L2.692 6.23a.25.25 0 0 0-.384 0L.342 8.59A.25.25 0 0 0 .534 9z"/>
+                        <path fill-rule="evenodd" d="M8 3c-1.552 0-2.94.707-3.857 1.818a.5.5 0 1 1-.771-.636A6.002 6.002 0 0 1 13.917 7H12.9A5.002 5.002 0 0 0 8 3zM3.1 9a5.002 5.002 0 0 0 8.757 2.182.5.5 0 1 1 .771.636A6.002 6.002 0 0 1 2.083 9H3.1z"/>
+                      </svg>
+                      Rotate Secret
+                    </button>
+                  </li>
+                  <li><hr class="dropdown-divider"></li>
+                  <li>
+                    <button class="dropdown-item text-danger" type="button" data-delete-user="{{ user.access_key }}">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="me-2" viewBox="0 0 16 16">
+                        <path d="M5.5 5.5a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0v-6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0v-6a.5.5 0 0 1 .5-.5zm3 .5v6a.5.5 0 0 1-1 0v-6a.5.5 0 0 1 1 0z"/>
+                        <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/>
+                      </svg>
+                      Delete User
+                    </button>
+                  </li>
+                </ul>
+              </div>
+            </div>
+            <div class="mb-3">
+              <div class="small text-muted mb-2">Bucket Permissions</div>
+              <div class="d-flex flex-wrap gap-1" data-policy-badges>
+                {% for policy in user.policies %}
+                  {% if policy.bucket == "*" %}{% set bucket_label = "All Buckets" %}{% else %}{% set bucket_label = policy.bucket %}{% endif %}
+                  {% if "*" in policy.actions %}
+                    {% set perm_label = "Full Access" %}
+                  {% elif policy.actions|length >= 19 %}
+                    {% set perm_label = "Full Access" %}
+                  {% elif "list" in policy.actions and "read" in policy.actions and "write" in policy.actions and "delete" in policy.actions %}
+                    {% set perm_label = "Read + Write + Delete" %}
+                  {% elif "list" in policy.actions and "read" in policy.actions and "write" in policy.actions %}
+                    {% set perm_label = "Read + Write" %}
+                  {% elif "list" in policy.actions and "read" in policy.actions %}
+                    {% set perm_label = "Read Only" %}
+                  {% else %}
+                    {% set policy_actions_count = policy.actions | length %}
+                    {% set perm_label = "Custom (" ~ policy_actions_count ~ ")" %}
+                  {% endif %}
+                  <span class="iam-perm-badge">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" fill="currentColor" class="me-1" viewBox="0 0 16 16">
+                      <path d="M2.522 5H2a.5.5 0 0 0-.494.574l1.372 9.149A1.5 1.5 0 0 0 4.36 16h7.278a1.5 1.5 0 0 0 1.483-1.277l1.373-9.149A.5.5 0 0 0 14 5h-.522A5.5 5.5 0 0 0 2.522 5zm1.005 0a4.5 4.5 0 0 1 8.945 0H3.527z"/>
+                    </svg>
+                    {{ bucket_label }} · {{ perm_label }}
+                  </span>
+                {% else %}
+                  <span class="badge bg-secondary bg-opacity-10 text-secondary">No policies</span>
+                {% endfor %}
+              </div>
+            </div>
+            <button class="btn btn-outline-primary btn-sm w-100" type="button" data-policy-editor data-access-key="{{ user.access_key }}">
+              <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="me-1" viewBox="0 0 16 16">
+                <path d="M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492zM5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0z"/>
+                <path d="M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52l-.094-.319z"/>
+              </svg>
+              Manage Policies
+            </button>
+          </div>
+        </div>
+      </div>
+      {% endfor %}
+    </div>
+    <div class="iam-no-results d-none" id="iam-no-results">
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="mb-2" viewBox="0 0 16 16">
+        <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
+      </svg>
+      <p class="mb-0">No users match your filter.</p>
+    </div>
+    {% else %}
+    <div class="empty-state text-center py-5">
+      <div class="empty-state-icon mx-auto mb-3">
+        <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" viewBox="0 0 16 16">
+          <path d="M15 14s1 0 1-1-1-4-5-4-5 3-5 4 1 1 1 1h8zm-7.978-1A.261.261 0 0 1 7 12.996c.001-.264.167-1.03.76-1.72C8.312 10.629 9.282 10 11 10c1.717 0 2.687.63 3.24 1.276.593.69.758 1.457.76 1.72l-.008.002a.274.274 0 0 1-.014.002H7.022zM11 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm3-2a3 3 0 1 1-6 0 3 3 0 0 1 6 0zM6.936 9.28a5.88 5.88 0 0 0-1.23-.247A7.35 7.35 0 0 0 5 9c-4 0-5 3-5 4 0 .667.333 1 1 1h4.216A2.238 2.238 0 0 1 5 13c0-1.01.377-2.042 1.09-2.904.243-.294.526-.569.846-.816zM4.92 10A5.493 5.493 0 0 0 4 13H1c0-.26.164-1.03.76-1.724.545-.636 1.492-1.256 3.16-1.275zM1.5 5.5a3 3 0 1 1 6 0 3 3 0 0 1-6 0zm3-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4z"/>
+        </svg>
+      </div>
+      <h5 class="fw-semibold mb-2">No users yet</h5>
+      <p class="text-muted mb-3">Create your first IAM user to manage access to your storage.</p>
+      <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createUserModal">
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="me-1" viewBox="0 0 16 16">
+          <path fill-rule="evenodd" d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2Z"/>
+        </svg>
+        Create First User
+      </button>
+    </div>
+    {% endif %}
+  </div>
+  {% endif %}
+</div>
+
+<div class="modal fade" id="createUserModal" tabindex="-1" aria-hidden="true">
+  <div class="modal-dialog modal-dialog-centered">
+    <div class="modal-content">
+      <div class="modal-header border-0 pb-0">
+        <h1 class="modal-title fs-5 fw-semibold">
+          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="text-primary" viewBox="0 0 16 16">
+            <path d="M1 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H1zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
+            <path fill-rule="evenodd" d="M13.5 5a.5.5 0 0 1 .5.5V7h1.5a.5.5 0 0 1 0 1H14v1.5a.5.5 0 0 1-1 0V8h-1.5a.5.5 0 0 1 0-1H13V5.5a.5.5 0 0 1 .5-.5z"/>
+          </svg>
+          Create IAM User
+        </h1>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+      <form method="post" action="{{ url_for(endpoint="ui.create_iam_user") }}">
+        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
+        <div class="modal-body">
+          <div class="mb-3">
+            <label class="form-label fw-medium">Display Name</label>
+            <input class="form-control" type="text" name="display_name" placeholder="Analytics Team" required autofocus />
+          </div>
+          <div class="mb-3">
+            <label class="form-label fw-medium d-flex justify-content-between align-items-center">
+              Access Key <span class="text-muted fw-normal small">optional</span>
+            </label>
+            <div class="input-group">
+              <input class="form-control font-monospace" type="text" name="access_key" id="createUserAccessKey" placeholder="Leave blank to auto-generate" />
+              <button class="btn btn-outline-secondary" type="button" id="generateAccessKeyBtn" title="Generate secure access key">Generate</button>
+            </div>
+          </div>
+          <div class="mb-3">
+            <label class="form-label fw-medium d-flex justify-content-between align-items-center">
+              Secret Key <span class="text-muted fw-normal small">optional</span>
+            </label>
+            <div class="input-group">
+              <input class="form-control font-monospace" type="text" name="secret_key" id="createUserSecretKey" placeholder="Leave blank to auto-generate" />
+              <button class="btn btn-outline-secondary" type="button" id="generateSecretKeyBtn" title="Generate secure secret key">Generate</button>
+            </div>
+            <div class="form-text">If you set a custom secret key, copy it now. It will be encrypted and cannot be recovered.</div>
+          </div>
+          <div class="mb-3">
+            <label class="form-label fw-medium d-flex justify-content-between align-items-center">
+              Expiry <span class="text-muted fw-normal small">optional</span>
+            </label>
+            <input class="form-control" type="datetime-local" name="expires_at" id="createUserExpiry" />
+            <div class="form-text">Leave blank for no expiration. Expired users cannot authenticate.</div>
+          </div>
+          <div class="mb-3">
+            <label class="form-label fw-medium">Initial Policies (JSON)</label>
+            <textarea class="form-control font-monospace" name="policies" id="createUserPolicies" rows="6" spellcheck="false" placeholder='[
+  {"bucket": "*", "actions": ["list", "read"]}
+]'></textarea>
+            <div class="form-text">Leave blank to grant full control (for bootstrap admins only).</div>
+          </div>
+          <div class="d-flex flex-wrap gap-2">
+            <span class="text-muted small me-2 align-self-center">Quick templates:</span>
+            <button class="btn btn-outline-secondary btn-sm" type="button" data-create-policy-template="full">Full Control</button>
+            <button class="btn btn-outline-secondary btn-sm" type="button" data-create-policy-template="readonly">Read-Only</button>
+            <button class="btn btn-outline-secondary btn-sm" type="button" data-create-policy-template="writer">Read + Write</button>
+            <button class="btn btn-outline-secondary btn-sm" type="button" data-create-policy-template="operator">Operator</button>
+            <button class="btn btn-outline-secondary btn-sm" type="button" data-create-policy-template="bucketadmin">Bucket Admin</button>
+          </div>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
+          <button class="btn btn-primary" type="submit">
+            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="me-1" viewBox="0 0 16 16">
+              <path fill-rule="evenodd" d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2Z"/>
+            </svg>
+            Create User
+          </button>
+        </div>
+      </form>
+    </div>
+  </div>
+</div>
+
+<div class="modal fade" id="policyEditorModal" tabindex="-1" aria-hidden="true">
+  <div class="modal-dialog modal-lg modal-dialog-centered">
+    <div class="modal-content">
+      <div class="modal-header border-0 pb-0">
+        <h1 class="modal-title fs-5 fw-semibold">
+          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="text-primary" viewBox="0 0 16 16">
+            <path d="M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492zM5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0z"/>
+            <path d="M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52l-.094-.319zm-2.633.283c.246-.835 1.428-.835 1.674 0l.094.319a1.873 1.873 0 0 0 2.693 1.115l.291-.16c.764-.415 1.6.42 1.184 1.185l-.159.292a1.873 1.873 0 0 0 1.116 2.692l.318.094c.835.246.835 1.428 0 1.674l-.319.094a1.873 1.873 0 0 0-1.115 2.693l.16.291c.415.764-.42 1.6-1.185 1.184l-.291-.159a1.873 1.873 0 0 0-2.693 1.116l-.094.318c-.246.835-1.428.835-1.674 0l-.094-.319a1.873 1.873 0 0 0-2.692-1.115l-.292.16c-.764.415-1.6-.42-1.184-1.185l.159-.291A1.873 1.873 0 0 0 1.945 8.93l-.319-.094c-.835-.246-.835-1.428 0-1.674l.319-.094A1.873 1.873 0 0 0 3.06 4.377l-.16-.292c-.415-.764.42-1.6 1.185-1.184l.292.159a1.873 1.873 0 0 0 2.692-1.115l.094-.319z"/>
+          </svg>
+          Edit Policies
+        </h1>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+      <div class="modal-body">
+        <p class="text-muted small mb-3">Editing policies for <code id="policyEditorUserLabel"></code></p>
+        <form
+          id="policyEditorForm"
+          method="post"
+          data-action-template="{{ url_for(endpoint="ui.update_iam_policies", access_key="ACCESS_KEY_PLACEHOLDER") }}"
+          class="d-flex flex-column gap-3"
+        >
+          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
+          <input type="hidden" id="policyEditorUser" name="access_key" />
+          
+          <div>
+            <label class="form-label fw-medium">Inline Policies (JSON array)</label>
+            <textarea class="form-control font-monospace" id="policyEditorDocument" name="policies" rows="12" spellcheck="false"></textarea>
+            <div class="form-text">Use standard MyFSIO policy format. Validation happens server-side.</div>
+          </div>
+          <div class="d-flex flex-wrap gap-2">
+            <span class="text-muted small me-2 align-self-center">Quick templates:</span>
+            <button class="btn btn-outline-secondary btn-sm" type="button" data-policy-template="full">Full Control</button>
+            <button class="btn btn-outline-secondary btn-sm" type="button" data-policy-template="readonly">Read-Only</button>
+            <button class="btn btn-outline-secondary btn-sm" type="button" data-policy-template="writer">Read + Write</button>
+            <button class="btn btn-outline-secondary btn-sm" type="button" data-policy-template="operator">Operator</button>
+            <button class="btn btn-outline-secondary btn-sm" type="button" data-policy-template="bucketadmin">Bucket Admin</button>
+          </div>
+        </form>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
+        <button class="btn btn-primary" type="submit" form="policyEditorForm">
+          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="me-1" viewBox="0 0 16 16">
+            <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"/>
+          </svg>
+          Save Policies
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="modal fade" id="editUserModal" tabindex="-1" aria-hidden="true">
+  <div class="modal-dialog modal-dialog-centered">
+    <div class="modal-content">
+      <div class="modal-header border-0 pb-0">
+        <h1 class="modal-title fs-5 fw-semibold">
+          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="text-primary" viewBox="0 0 16 16">
+            <path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z"/>
+          </svg>
+          Edit User
+        </h1>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+      <form method="post" id="editUserForm">
+        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
+        <div class="modal-body">
+          <div class="mb-3">
+            <label class="form-label fw-medium">Display Name</label>
+            <input class="form-control" type="text" name="display_name" id="editUserDisplayName" required />
+          </div>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
+          <button class="btn btn-primary" type="submit">
+            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="me-1" viewBox="0 0 16 16">
+              <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"/>
+            </svg>
+            Save Changes
+          </button>
+        </div>
+      </form>
+    </div>
+  </div>
+</div>
+
+<div class="modal fade" id="deleteUserModal" tabindex="-1" aria-hidden="true">
+  <div class="modal-dialog modal-dialog-centered">
+    <div class="modal-content">
+      <div class="modal-header border-0 pb-0">
+        <h1 class="modal-title fs-5 fw-semibold">
+          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="text-danger" viewBox="0 0 16 16">
+            <path d="M11 5a3 3 0 1 1-6 0 3 3 0 0 1 6 0M8 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4m.256 7a4.5 4.5 0 0 1-.229-1.004H3c.001-.246.154-.986.832-1.664C4.484 10.68 5.711 10 8 10q.39 0 .74.025c.226-.341.496-.65.804-.918Q9.077 9.014 8 9c-5 0-6 3-6 4s1 1 1 1h5.256Z"/>
+            <path d="M12.5 16a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7m-.646-4.854.646.647.646-.647a.5.5 0 0 1 .708.708l-.647.646.647.646a.5.5 0 0 1-.708.708l-.646-.647-.646.647a.5.5 0 0 1-.708-.708l.647-.646-.647-.646a.5.5 0 0 1 .708-.708"/>
+          </svg>
+          Delete User
+        </h1>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+      <div class="modal-body">
+        <p>Are you sure you want to delete user <strong id="deleteUserLabel"></strong>?</p>
+        <div id="deleteSelfWarning" class="alert alert-danger d-flex align-items-start d-none">
+          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="flex-shrink-0 me-2 mt-1" viewBox="0 0 16 16">
+            <path d="M7.938 2.016A.13.13 0 0 1 8.002 2a.13.13 0 0 1 .063.016.146.146 0 0 1 .054.057l6.857 11.667c.036.06.035.124.002.183a.163.163 0 0 1-.054.06.116.116 0 0 1-.066.017H1.146a.115.115 0 0 1-.066-.017.163.163 0 0 1-.054-.06.176.176 0 0 1 .002-.183L7.884 2.073a.147.147 0 0 1 .054-.057zm1.044-.45a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566z"/>
+            <path d="M7.002 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 5.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995z"/>
+          </svg>
+          <div>
+            <strong>Warning:</strong> You are deleting your own account. You will be logged out immediately.
+          </div>
+        </div>
+        <p class="text-danger small mb-0">This action cannot be undone.</p>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
+        <form method="post" id="deleteUserForm">
+            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
+            <button class="btn btn-danger" type="submit">
+              <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="me-1" viewBox="0 0 16 16">
+                <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/>
+                <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/>
+              </svg>
+              Delete User
+            </button>
+        </form>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="modal fade" id="rotateSecretModal" tabindex="-1" aria-hidden="true">
+  <div class="modal-dialog modal-dialog-centered">
+    <div class="modal-content">
+      <div class="modal-header border-0 pb-0">
+        <h1 class="modal-title fs-5 fw-semibold">
+          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="text-warning" viewBox="0 0 16 16">
+            <path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z"/>
+            <path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z"/>
+          </svg>
+          Rotate Secret Key
+        </h1>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+      <div class="modal-body" id="rotateSecretConfirm">
+        <p>Rotate the secret key for <strong id="rotateUserLabel"></strong>?</p>
+        <div class="alert alert-warning d-flex align-items-start mb-0">
+          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="flex-shrink-0 me-2 mt-1" viewBox="0 0 16 16">
+            <path d="M7.938 2.016A.13.13 0 0 1 8.002 2a.13.13 0 0 1 .063.016.146.146 0 0 1 .054.057l6.857 11.667c.036.06.035.124.002.183a.163.163 0 0 1-.054.06.116.116 0 0 1-.066.017H1.146a.115.115 0 0 1-.066-.017.163.163 0 0 1-.054-.06.176.176 0 0 1 .002-.183L7.884 2.073a.147.147 0 0 1 .054-.057zm1.044-.45a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566z"/>
+            <path d="M7.002 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 5.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995z"/>
+          </svg>
+          <div>The old secret key will stop working immediately. Update any applications using it.</div>
+        </div>
+      </div>
+      <div class="modal-body d-none" id="rotateSecretResult">
+        <div class="alert alert-success d-flex align-items-center mb-3">
+          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="flex-shrink-0 me-2" viewBox="0 0 16 16">
+            <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
+          </svg>
+          <div>Secret rotated successfully!</div>
+        </div>
+        <label class="form-label fw-medium">New Secret Key</label>
+        <div class="input-group">
+          <input type="text" class="form-control font-monospace bg-body-tertiary" id="newSecretKey" readonly>
+          <button class="btn btn-outline-primary" type="button" id="copyNewSecret">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+              <path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/>
+              <path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/>
+            </svg>
+          </button>
+        </div>
+        <p class="form-text mb-0">Copy this now. It will not be shown again.</p>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal" id="rotateCancelBtn">Cancel</button>
+        <button type="button" class="btn btn-warning" id="confirmRotateBtn">
+          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="me-1" viewBox="0 0 16 16">
+            <path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z"/>
+            <path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z"/>
+          </svg>
+          Rotate Key
+        </button>
+        <button type="button" class="btn btn-primary d-none" data-bs-dismiss="modal" id="rotateDoneBtn">Done</button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="modal fade" id="expiryModal" tabindex="-1" aria-hidden="true">
+  <div class="modal-dialog modal-dialog-centered">
+    <div class="modal-content">
+      <div class="modal-header border-0 pb-0">
+        <h1 class="modal-title fs-5 fw-semibold">
+          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="text-primary" viewBox="0 0 16 16">
+            <path d="M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z"/>
+            <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z"/>
+          </svg>
+          Set Expiry
+        </h1>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+      <form method="post" id="expiryForm">
+        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
+        <div class="modal-body">
+          <p class="text-muted small mb-3">Set expiration for <code id="expiryUserLabel"></code></p>
+          <div class="mb-3">
+            <label class="form-label fw-medium">Expires at</label>
+            <input class="form-control" type="datetime-local" name="expires_at" id="expiryDateInput" />
+            <div class="form-text">Leave blank to remove expiration (never expires).</div>
+          </div>
+          <div class="d-flex flex-wrap gap-2">
+            <span class="text-muted small me-2 align-self-center">Quick presets:</span>
+            <button class="btn btn-outline-secondary btn-sm" type="button" data-expiry-preset="1h">1 hour</button>
+            <button class="btn btn-outline-secondary btn-sm" type="button" data-expiry-preset="24h">24 hours</button>
+            <button class="btn btn-outline-secondary btn-sm" type="button" data-expiry-preset="7d">7 days</button>
+            <button class="btn btn-outline-secondary btn-sm" type="button" data-expiry-preset="30d">30 days</button>
+            <button class="btn btn-outline-secondary btn-sm" type="button" data-expiry-preset="90d">90 days</button>
+            <button class="btn btn-outline-secondary btn-sm text-danger" type="button" data-expiry-preset="clear">Never</button>
+          </div>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
+          <button class="btn btn-primary" type="submit">
+            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="me-1" viewBox="0 0 16 16">
+              <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"/>
+            </svg>
+            Save Expiry
+          </button>
+        </div>
+      </form>
+    </div>
+  </div>
+</div>
+
+<script id="iamUsersJson" type="application/json">{{ users | json_encode | safe }}</script>
+{% endblock %}
+
+{% block extra_scripts %}
+{{ super() }}
+<script src="{{ url_for(endpoint="static", filename="js/iam-management.js") }}"></script>
+<script>
+  IAMManagement.init({
+    users: JSON.parse(document.getElementById('iamUsersJson').textContent || '[]'),
+    currentUserKey: {{ principal.access_key | json_encode | safe }},
+    iamLocked: {{ iam_locked | json_encode | safe }},
+    csrfToken: "{{ csrf_token() }}",
+    endpoints: {
+      createUser: "{{ url_for(endpoint="ui.create_iam_user") }}",
+      updateUser: "{{ url_for(endpoint="ui.update_iam_user", access_key="ACCESS_KEY") }}",
+      deleteUser: "{{ url_for(endpoint="ui.delete_iam_user", access_key="ACCESS_KEY") }}",
+      updatePolicies: "{{ url_for(endpoint="ui.update_iam_policies", access_key="ACCESS_KEY") }}",
+      rotateSecret: "{{ url_for(endpoint="ui.rotate_iam_secret", access_key="ACCESS_KEY") }}",
+      updateExpiry: "{{ url_for(endpoint="ui.update_iam_expiry", access_key="ACCESS_KEY") }}"
+    }
+  });
+</script>
+{% endblock %}

rust/myfsio-engine/crates/myfsio-server/templates/login.html

@@ -0,0 +1,99 @@
+{% extends "base.html" %}
+{% block content %}
+<div class="row align-items-center justify-content-center min-vh-75 g-5">
+  <div class="col-lg-5 d-none d-lg-block">
+    <div class="text-center mb-4">
+      <div class="position-relative d-inline-block mb-4">
+        <div class="login-hero-icon">
+          <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="currentColor" class="bi bi-cloud-arrow-up" viewBox="0 0 16 16">
+            <path fill-rule="evenodd" d="M7.646 5.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 6.707V10.5a.5.5 0 0 1-1 0V6.707L6.354 7.854a.5.5 0 1 1-.708-.708l2-2z"/>
+            <path d="M4.406 3.342A5.53 5.53 0 0 1 8 2c2.69 0 4.923 2 5.166 4.579C14.758 6.804 16 8.137 16 9.773 16 11.569 14.502 13 12.687 13H3.781C1.708 13 0 11.366 0 9.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383z"/>
+          </svg>
+        </div>
+      </div>
+      <h1 class="display-5 fw-bold mb-3">Welcome to <span class="text-gradient">MyFSIO</span></h1>
+      <p class="lead text-muted mb-4">A developer-friendly object storage solution for prototyping and local development.</p>
+      <div class="d-flex justify-content-center gap-4 text-muted">
+        <div class="text-center">
+          <div class="h4 fw-bold text-gradient mb-1">S3</div>
+          <small>Compatible</small>
+        </div>
+        <div class="vr"></div>
+        <div class="text-center">
+          <div class="h4 fw-bold text-gradient mb-1">Fast</div>
+          <small>Local Storage</small>
+        </div>
+        <div class="vr"></div>
+        <div class="text-center">
+          <div class="h4 fw-bold text-gradient mb-1">Secure</div>
+          <small>IAM Support</small>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="col-lg-5 col-md-8 col-sm-10">
+    <div class="card shadow-lg login-card position-relative">
+      <div class="card-body p-4 p-md-5">
+        <div class="text-center mb-4 d-lg-none">
+          <img src="{{ url_for(endpoint="static", filename="images/MyFSIO.png") }}" alt="MyFSIO" width="48" height="48" class="mb-3 rounded-3">
+          <h2 class="h4 fw-bold">MyFSIO</h2>
+        </div>
+        <h2 class="h4 mb-1 d-none d-lg-block">Sign in</h2>
+        <p class="text-muted mb-4 d-none d-lg-block">Enter your credentials to continue</p>
+        <form method="post" action="{{ url_for(endpoint="ui.login") }}">
+          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
+          <div class="mb-3">
+            <label class="form-label fw-medium">Access key</label>
+            <div class="input-group">
+              <span class="input-group-text bg-transparent">
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-key text-muted" viewBox="0 0 16 16">
+                  <path d="M0 8a4 4 0 0 1 7.465-2H14a.5.5 0 0 1 .354.146l1.5 1.5a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0L13 9.207l-.646.647a.5.5 0 0 1-.708 0L11 9.207l-.646.647a.5.5 0 0 1-.708 0L9 9.207l-.646.647A.5.5 0 0 1 8 10h-.535A4 4 0 0 1 0 8zm4-3a3 3 0 1 0 2.712 4.285A.5.5 0 0 1 7.163 9h.63l.853-.854a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.646-.647a.5.5 0 0 1 .708 0l.646.647.793-.793-1-1h-6.63a.5.5 0 0 1-.451-.285A3 3 0 0 0 4 5z"/>
+                  <path d="M4 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
+                </svg>
+              </span>
+              <input class="form-control" type="text" name="access_key" required autofocus placeholder="Enter your access key" />
+            </div>
+          </div>
+          <div class="mb-4">
+            <label class="form-label fw-medium">Secret key</label>
+            <div class="input-group">
+              <span class="input-group-text bg-transparent">
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-shield-lock text-muted" viewBox="0 0 16 16">
+                  <path d="M5.338 1.59a61.44 61.44 0 0 0-2.837.856.481.481 0 0 0-.328.39c-.554 4.157.726 7.19 2.253 9.188a10.725 10.725 0 0 0 2.287 2.233c.346.244.652.42.893.533.12.057.218.095.293.118a.55.55 0 0 0 .101.025.615.615 0 0 0 .1-.025c.076-.023.174-.061.294-.118.24-.113.547-.29.893-.533a10.726 10.726 0 0 0 2.287-2.233c1.527-1.997 2.807-5.031 2.253-9.188a.48.48 0 0 0-.328-.39c-.651-.213-1.75-.56-2.837-.855C9.552 1.29 8.531 1.067 8 1.067c-.53 0-1.552.223-2.662.524zM5.072.56C6.157.265 7.31 0 8 0s1.843.265 2.928.56c1.11.3 2.229.655 2.887.87a1.54 1.54 0 0 1 1.044 1.262c.596 4.477-.787 7.795-2.465 9.99a11.775 11.775 0 0 1-2.517 2.453 7.159 7.159 0 0 1-1.048.625c-.28.132-.581.24-.829.24s-.548-.108-.829-.24a7.158 7.158 0 0 1-1.048-.625 11.777 11.777 0 0 1-2.517-2.453C1.928 10.487.545 7.169 1.141 2.692A1.54 1.54 0 0 1 2.185 1.43 62.456 62.456 0 0 1 5.072.56z"/>
+                  <path d="M9.5 6.5a1.5 1.5 0 0 1-1 1.415l.385 1.99a.5.5 0 0 1-.491.595h-.788a.5.5 0 0 1-.49-.595l.384-1.99a1.5 1.5 0 1 1 2-1.415z"/>
+                </svg>
+              </span>
+              <input class="form-control" type="password" name="secret_key" required placeholder="Enter your secret key" />
+            </div>
+          </div>
+          <button class="btn btn-primary btn-lg w-100 fw-medium" type="submit">
+            Sign in
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-right ms-2" viewBox="0 0 16 16">
+              <path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/>
+            </svg>
+          </button>
+        </form>
+      </div>
+    </div>
+  </div>
+</div>
+
+<style>
+.min-vh-75 { min-height: 75vh; }
+.login-hero-icon {
+  width: 120px;
+  height: 120px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(139, 92, 246, 0.15) 100%);
+  border-radius: 50%;
+  color: #3b82f6;
+  margin: 0 auto;
+}
+[data-theme='dark'] .login-hero-icon {
+  background: linear-gradient(135deg, rgba(59, 130, 246, 0.25) 0%, rgba(139, 92, 246, 0.25) 100%);
+  color: #60a5fa;
+}
+</style>
+{% endblock %}

rust/myfsio-engine/crates/myfsio-server/templates/replication_wizard.html

@@ -0,0 +1,270 @@
+{% extends "base.html" %}
+
+{% block title %}Set Up Replication - S3 Compatible Storage{% endblock %}
+
+{% block content %}
+<div class="page-header d-flex justify-content-between align-items-center mb-4">
+    <div>
+        <nav aria-label="breadcrumb">
+            <ol class="breadcrumb mb-1">
+                <li class="breadcrumb-item"><a href="{{ url_for(endpoint="ui.sites_dashboard") }}">Sites</a></li>
+                <li class="breadcrumb-item active" aria-current="page">Replication Wizard</li>
+            </ol>
+        </nav>
+        <h1 class="h3 mb-1 d-flex align-items-center gap-2">
+            <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="currentColor" class="text-primary" viewBox="0 0 16 16">
+                <path d="M8 4a.5.5 0 0 1 .5.5V6a.5.5 0 0 1-1 0V4.5A.5.5 0 0 1 8 4zM3.732 5.732a.5.5 0 0 1 .707 0l.915.914a.5.5 0 1 1-.708.708l-.914-.915a.5.5 0 0 1 0-.707zM2 10a.5.5 0 0 1 .5-.5h1.586a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 10zm9.5 0a.5.5 0 0 1 .5-.5h1.5a.5.5 0 0 1 0 1H12a.5.5 0 0 1-.5-.5zm.754-4.246a.389.389 0 0 0-.527-.02L7.547 9.31a.91.91 0 1 0 1.302 1.258l3.434-4.297a.389.389 0 0 0-.029-.518z"/>
+                <path fill-rule="evenodd" d="M0 10a8 8 0 1 1 15.547 2.661c-.442 1.253-1.845 1.602-2.932 1.25C11.309 13.488 9.475 13 8 13c-1.474 0-3.31.488-4.615.911-1.087.352-2.49.003-2.932-1.25A7.988 7.988 0 0 1 0 10zm8-7a7 7 0 0 0-6.603 9.329c.203.575.923.876 1.68.63C4.397 12.533 6.358 12 8 12s3.604.532 4.923.96c.757.245 1.477-.056 1.68-.631A7 7 0 0 0 8 3z"/>
+            </svg>
+            Set Up Replication
+        </h1>
+        <p class="text-muted mb-0 mt-1">Configure bucket replication to <strong>{{ peer.display_name or peer.site_id }}</strong></p>
+    </div>
+</div>
+
+<div class="row g-4">
+    <div class="col-lg-4 col-md-5">
+        <div class="card shadow-sm border-0 mb-4" style="border-radius: 1rem;">
+            <div class="card-header bg-transparent border-0 pt-4 pb-0 px-4">
+                <h5 class="fw-semibold d-flex align-items-center gap-2 mb-1">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="text-primary" viewBox="0 0 16 16">
+                        <path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8m7.5-6.923c-.67.204-1.335.82-1.887 1.855A8 8 0 0 0 5.145 4H7.5zM4.09 4a9.3 9.3 0 0 1 .64-1.539 7 7 0 0 1 .597-.933A7.03 7.03 0 0 0 2.255 4zm-.582 3.5c.03-.877.138-1.718.312-2.5H1.674a7 7 0 0 0-.656 2.5zM4.847 5a12.5 12.5 0 0 0-.338 2.5H7.5V5zM8.5 5v2.5h2.99a12.5 12.5 0 0 0-.337-2.5zM4.51 8.5a12.5 12.5 0 0 0 .337 2.5H7.5V8.5zm3.99 0V11h2.653c.187-.765.306-1.608.338-2.5zM5.145 12q.208.58.468 1.068c.552 1.035 1.218 1.65 1.887 1.855V12zm.182 2.472a7 7 0 0 1-.597-.933A9.3 9.3 0 0 1 4.09 12H2.255a7 7 0 0 0 3.072 2.472M3.82 11a13.7 13.7 0 0 1-.312-2.5h-2.49a7 7 0 0 0 .656 2.5zM8.5 12v2.923c.67-.204 1.335-.82 1.887-1.855q.26-.487.468-1.068zm3.68-1h2.146c.365-.767.594-1.61.656-2.5h-2.49a13.7 13.7 0 0 1-.312 2.5m2.802-3.5a7 7 0 0 0-.656-2.5H12.18c.174.782.282 1.623.312 2.5zM11.27 2.461c.247.464.462.98.64 1.539h1.835a7 7 0 0 0-3.072-2.472c.218.284.418.598.597.933M10.855 4a8 8 0 0 0-.468-1.068C9.835 1.897 9.17 1.282 8.5 1.077V4z"/>
+                    </svg>
+                    Peer Site
+                </h5>
+            </div>
+            <div class="card-body px-4 pb-4">
+                <dl class="mb-0">
+                    <dt class="text-muted small">Site ID</dt>
+                    <dd class="mb-2">{{ peer.site_id }}</dd>
+                    <dt class="text-muted small">Endpoint</dt>
+                    <dd class="mb-2 text-truncate" title="{{ peer.endpoint }}">{{ peer.endpoint }}</dd>
+                    <dt class="text-muted small">Region</dt>
+                    <dd class="mb-2"><span class="badge bg-primary bg-opacity-10 text-primary">{{ peer.region }}</span></dd>
+                    <dt class="text-muted small">Connection</dt>
+                    <dd class="mb-0"><span class="badge bg-secondary bg-opacity-10 text-secondary">{{ connection.name }}</span></dd>
+                </dl>
+            </div>
+        </div>
+
+        <div class="card shadow-sm border-0" style="border-radius: 1rem;">
+            <div class="card-header bg-transparent border-0 pt-4 pb-0 px-4">
+                <h5 class="fw-semibold d-flex align-items-center gap-2 mb-1">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="text-muted" viewBox="0 0 16 16">
+                        <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
+                    </svg>
+                    Replication Modes
+                </h5>
+            </div>
+            <div class="card-body px-4 pb-4 small">
+                <p class="mb-2"><strong>New Only:</strong> Only replicate new objects uploaded after the rule is created.</p>
+                <p class="mb-2"><strong>All Objects:</strong> Replicate all existing objects plus new uploads.</p>
+                <p class="mb-0"><strong>Bidirectional:</strong> Two-way sync between sites. Changes on either side are synchronized.</p>
+            </div>
+        </div>
+    </div>
+
+    <div class="col-lg-8 col-md-7">
+        <div class="card shadow-sm border-0" style="border-radius: 1rem;">
+            <div class="card-header bg-transparent border-0 pt-4 pb-0 px-4">
+                <h5 class="fw-semibold d-flex align-items-center gap-2 mb-1">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="text-muted" viewBox="0 0 16 16">
+                        <path d="M2.522 5H2a.5.5 0 0 0-.494.574l1.372 9.149A1.5 1.5 0 0 0 4.36 16h7.278a1.5 1.5 0 0 0 1.483-1.277l1.373-9.149A.5.5 0 0 0 14 5h-.522A5.5 5.5 0 0 0 2.522 5zm1.005 0a4.5 4.5 0 0 1 8.945 0H3.527z"/>
+                    </svg>
+                    Select Buckets to Replicate
+                </h5>
+                <p class="text-muted small mb-0">Choose which buckets should be replicated to this peer site</p>
+            </div>
+            <div class="card-body px-4 pb-4">
+                {% if buckets %}
+                <form method="POST" action="{{ url_for(endpoint="ui.create_peer_replication_rules", site_id=peer.site_id) }}">
+                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
+
+                    <div class="mb-4">
+                        <label for="mode" class="form-label fw-medium">Replication Mode</label>
+                        <select class="form-select" id="mode" name="mode">
+                            <option value="new_only">New Objects Only</option>
+                            <option value="all">All Objects (includes existing)</option>
+                            <option value="bidirectional">Bidirectional Sync</option>
+                        </select>
+                    </div>
+
+                    <div id="bidirWarning" class="alert alert-warning d-none mb-4" role="alert">
+                        <h6 class="alert-heading fw-bold d-flex align-items-center gap-2">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
+                                <path fill-rule="evenodd" d="M1 11.5a.5.5 0 0 0 .5.5h11.793l-3.147 3.146a.5.5 0 0 0 .708.708l4-4a.5.5 0 0 0 0-.708l-4-4a.5.5 0 0 0-.708.708L13.293 11H1.5a.5.5 0 0 0-.5.5zm14-7a.5.5 0 0 1-.5.5H2.707l3.147 3.146a.5.5 0 1 1-.708.708l-4-4a.5.5 0 0 1 0-.708l4-4a.5.5 0 1 1 .708.708L2.707 4H14.5a.5.5 0 0 1 .5.5z"/>
+                            </svg>
+                            Bidirectional Sync Requires Configuration on Both Sites
+                        </h6>
+                        <p class="mb-2">For bidirectional sync to work properly, you must configure <strong>both</strong> sites. This wizard only configures one direction.</p>
+                        <hr class="my-2">
+                        <p class="mb-2 fw-semibold">After completing this wizard, you must also:</p>
+                        <ol class="mb-2 ps-3">
+                            <li>Go to <strong>{{ peer.display_name or peer.site_id }}</strong>'s admin UI</li>
+                            <li>Register <strong>this site</strong> as a peer (with a connection)</li>
+                            <li>Create matching bidirectional replication rules pointing back to this site</li>
+                            <li>Ensure <code>SITE_SYNC_ENABLED=true</code> is set on both sites</li>
+                        </ol>
+                        <div class="d-flex align-items-center gap-2 mt-3">
+                            <span class="badge bg-light text-dark border">Local Site ID: <strong>{% if local_site %}{{ local_site.site_id }}{% else %}{{ "Not configured" }}{% endif %}</strong></span>
+                            <span class="badge bg-light text-dark border">Local Endpoint: <strong>{% if local_site and local_site.endpoint %}{{ local_site.endpoint }}{% else %}{{ "Not configured" }}{% endif %}</strong></span>
+                        </div>
+                        {% if not local_site or not local_site.site_id or not local_site.endpoint %}
+                        <div class="alert alert-danger mt-3 mb-0 py-2">
+                            <small><strong>Warning:</strong> Your local site identity is not fully configured. The remote site won't be able to connect back. <a href="{{ url_for(endpoint="ui.sites_dashboard") }}">Configure it now</a>.</small>
+                        </div>
+                        {% endif %}
+                    </div>
+
+                    <div class="table-responsive">
+                        <table class="table table-hover align-middle mb-0">
+                            <thead class="table-light">
+                                <tr>
+                                    <th scope="col" style="width: 40px;">
+                                        <input type="checkbox" class="form-check-input" id="selectAll">
+                                    </th>
+                                    <th scope="col">Local Bucket</th>
+                                    <th scope="col">Target Bucket Name</th>
+                                    <th scope="col">Status</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {% for bucket in buckets %}
+                                <tr>
+                                    <td>
+                                        <input type="checkbox" class="form-check-input bucket-checkbox"
+                                            name="buckets" value="{{ bucket.name }}"
+                                            {% if bucket.has_rule %}disabled{% endif %}>
+                                    </td>
+                                    <td>
+                                        <div class="d-flex align-items-center gap-2">
+                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="text-muted" viewBox="0 0 16 16">
+                                                <path d="M2.522 5H2a.5.5 0 0 0-.494.574l1.372 9.149A1.5 1.5 0 0 0 4.36 16h7.278a1.5 1.5 0 0 0 1.483-1.277l1.373-9.149A.5.5 0 0 0 14 5h-.522A5.5 5.5 0 0 0 2.522 5zm1.005 0a4.5 4.5 0 0 1 8.945 0H3.527z"/>
+                                            </svg>
+                                            <span class="fw-medium">{{ bucket.name }}</span>
+                                        </div>
+                                    </td>
+                                    <td>
+                                        <input type="text" class="form-control form-control-sm"
+                                            name="target_{{ bucket.name }}"
+                                            value="{{ bucket.existing_target or bucket.name }}"
+                                            placeholder="{{ bucket.name }}"
+                                            {% if bucket.has_rule %}disabled{% endif %}>
+                                    </td>
+                                    <td>
+                                        {% if bucket.has_rule %}
+                                        <span class="badge bg-info bg-opacity-10 text-info">
+                                            Already configured ({{ bucket.existing_mode }})
+                                        </span>
+                                        {% else %}
+                                        <span class="badge bg-secondary bg-opacity-10 text-secondary">
+                                            Not configured
+                                        </span>
+                                        {% endif %}
+                                    </td>
+                                </tr>
+                                {% endfor %}
+                            </tbody>
+                        </table>
+                    </div>
+
+                    <div class="d-flex gap-2 mt-4 pt-3 border-top">
+                        <button type="submit" class="btn btn-primary" id="submitBtn" disabled>
+                            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="me-1" viewBox="0 0 16 16">
+                                <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"/>
+                            </svg>
+                            Create Replication Rules
+                        </button>
+                        <a href="{{ url_for(endpoint="ui.sites_dashboard") }}" class="btn btn-outline-secondary">
+                            Skip for Now
+                        </a>
+                    </div>
+                </form>
+                {% else %}
+                <div class="empty-state text-center py-5">
+                    <div class="empty-state-icon mx-auto mb-3">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" viewBox="0 0 16 16">
+                            <path d="M2.522 5H2a.5.5 0 0 0-.494.574l1.372 9.149A1.5 1.5 0 0 0 4.36 16h7.278a1.5 1.5 0 0 0 1.483-1.277l1.373-9.149A.5.5 0 0 0 14 5h-.522A5.5 5.5 0 0 0 2.522 5zm1.005 0a4.5 4.5 0 0 1 8.945 0H3.527z"/>
+                        </svg>
+                    </div>
+                    <h5 class="fw-semibold mb-2">No buckets yet</h5>
+                    <p class="text-muted mb-3">Create some buckets first, then come back to set up replication.</p>
+                    <a href="{{ url_for(endpoint="ui.buckets_overview") }}" class="btn btn-primary">
+                        Go to Buckets
+                    </a>
+                </div>
+                {% endif %}
+            </div>
+        </div>
+    </div>
+</div>
+
+<script>
+(function() {
+    const selectAllCheckbox = document.getElementById('selectAll');
+    const bucketCheckboxes = document.querySelectorAll('.bucket-checkbox:not(:disabled)');
+    const submitBtn = document.getElementById('submitBtn');
+    const modeSelect = document.getElementById('mode');
+    const bidirWarning = document.getElementById('bidirWarning');
+
+    function updateBidirWarning() {
+        if (modeSelect && bidirWarning) {
+            if (modeSelect.value === 'bidirectional') {
+                bidirWarning.classList.remove('d-none');
+            } else {
+                bidirWarning.classList.add('d-none');
+            }
+        }
+    }
+
+    if (modeSelect) {
+        modeSelect.addEventListener('change', updateBidirWarning);
+        updateBidirWarning();
+    }
+
+    function updateSubmitButton() {
+        const checkedCount = document.querySelectorAll('.bucket-checkbox:checked').length;
+        if (submitBtn) {
+            submitBtn.disabled = checkedCount === 0;
+            const text = checkedCount > 0
+                ? `Create ${checkedCount} Replication Rule${checkedCount > 1 ? 's' : ''}`
+                : 'Create Replication Rules';
+            submitBtn.innerHTML = `
+                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="me-1" viewBox="0 0 16 16">
+                    <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"/>
+                </svg>
+                ${text}
+            `;
+        }
+    }
+
+    function updateSelectAll() {
+        if (selectAllCheckbox && bucketCheckboxes.length > 0) {
+            const allChecked = Array.from(bucketCheckboxes).every(cb => cb.checked);
+            const someChecked = Array.from(bucketCheckboxes).some(cb => cb.checked);
+            selectAllCheckbox.checked = allChecked;
+            selectAllCheckbox.indeterminate = someChecked && !allChecked;
+        }
+    }
+
+    if (selectAllCheckbox) {
+        selectAllCheckbox.addEventListener('change', function() {
+            bucketCheckboxes.forEach(cb => {
+                cb.checked = this.checked;
+            });
+            updateSubmitButton();
+        });
+    }
+
+    bucketCheckboxes.forEach(cb => {
+        cb.addEventListener('change', function() {
+            updateSelectAll();
+            updateSubmitButton();
+        });
+    });
+
+    updateSelectAll();
+    updateSubmitButton();
+})();
+</script>
+{% endblock %}

rust/myfsio-engine/crates/myfsio-server/templates/sites.html

@@ -0,0 +1,891 @@
+{% extends "base.html" %}
+
+{% block title %}Sites - S3 Compatible Storage{% endblock %}
+
+{% block content %}
+<div class="page-header d-flex justify-content-between align-items-center mb-4">
+  <div>
+    <p class="text-uppercase text-muted small mb-1">Geo-Distribution</p>
+    <h1 class="h3 mb-1 d-flex align-items-center gap-2">
+      <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="currentColor" class="text-primary" viewBox="0 0 16 16">
+        <path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm7.5-6.923c-.67.204-1.335.82-1.887 1.855A7.97 7.97 0 0 0 5.145 4H7.5V1.077zM4.09 4a9.267 9.267 0 0 1 .64-1.539 6.7 6.7 0 0 1 .597-.933A7.025 7.025 0 0 0 2.255 4H4.09zm-.582 3.5c.03-.877.138-1.718.312-2.5H1.674a6.958 6.958 0 0 0-.656 2.5h2.49zM4.847 5a12.5 12.5 0 0 0-.338 2.5H7.5V5H4.847zM8.5 5v2.5h2.99a12.495 12.495 0 0 0-.337-2.5H8.5zM4.51 8.5a12.5 12.5 0 0 0 .337 2.5H7.5V8.5H4.51zm3.99 0V11h2.653c.187-.765.306-1.608.338-2.5H8.5zM5.145 12c.138.386.295.744.468 1.068.552 1.035 1.218 1.65 1.887 1.855V12H5.145zm.182 2.472a6.696 6.696 0 0 1-.597-.933A9.268 9.268 0 0 1 4.09 12H2.255a7.024 7.024 0 0 0 3.072 2.472zM3.82 11a13.652 13.652 0 0 1-.312-2.5h-2.49c.062.89.291 1.733.656 2.5H3.82zm6.853 3.472A7.024 7.024 0 0 0 13.745 12H11.91a9.27 9.27 0 0 1-.64 1.539 6.688 6.688 0 0 1-.597.933zM8.5 12v2.923c.67-.204 1.335-.82 1.887-1.855.173-.324.33-.682.468-1.068H8.5zm3.68-1h2.146c.365-.767.594-1.61.656-2.5h-2.49a13.65 13.65 0 0 1-.312 2.5zm2.802-3.5a6.959 6.959 0 0 0-.656-2.5H12.18c.174.782.282 1.623.312 2.5h2.49zM11.27 2.461c.247.464.462.98.64 1.539h1.835a7.024 7.024 0 0 0-3.072-2.472c.218.284.418.598.597.933zM10.855 4a7.966 7.966 0 0 0-.468-1.068C9.835 1.897 9.17 1.282 8.5 1.077V4h2.355z"/>
+      </svg>
+      Site Registry
+    </h1>
+    <p class="text-muted mb-0 mt-1">Configure this site's identity and manage peer sites for geo-distribution.</p>
+  </div>
+  <div class="d-none d-md-flex align-items-center gap-2">
+    {% if local_site and local_site.site_id %}
+    <span class="badge bg-secondary bg-opacity-10 text-secondary fs-6 px-3 py-2">
+      {{ local_site.site_id }}
+    </span>
+    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="text-muted" viewBox="0 0 16 16">
+      <path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/>
+    </svg>
+    {% endif %}
+    <span class="badge bg-primary bg-opacity-10 text-primary fs-6 px-3 py-2">
+      {{ peers|length }} peer{% if peers|length != 1 %}s{% else %}{% endif %}
+    </span>
+  </div>
+</div>
+
+<div class="row g-4">
+    <div class="col-lg-4 col-md-5">
+        <div class="card shadow-sm border-0 mb-4" style="border-radius: 1rem;">
+            <div class="card-header bg-transparent border-0 pt-4 pb-0 px-4">
+                <h5 class="fw-semibold d-flex align-items-center gap-2 mb-1">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="text-primary" viewBox="0 0 16 16">
+                        <path d="M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10zm0-7a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"/>
+                    </svg>
+                    Local Site Identity
+                </h5>
+                <p class="text-muted small mb-0">This site's configuration</p>
+            </div>
+            <div class="card-body px-4 pb-4">
+                <form method="POST" action="{{ url_for(endpoint="ui.update_local_site") }}" id="localSiteForm">
+                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
+                    <div class="mb-3">
+                        <label for="site_id" class="form-label fw-medium">Site ID</label>
+                        <input type="text" class="form-control" id="site_id" name="site_id" required
+                            value="{% if local_site %}{{ local_site.site_id }}{% else %}{{ config_site_id or "" }}{% endif %}"
+                            placeholder="us-west-1">
+                        <div class="form-text">Unique identifier for this site</div>
+                    </div>
+                    <div class="mb-3">
+                        <label for="endpoint" class="form-label fw-medium">Endpoint URL</label>
+                        <input type="url" class="form-control" id="endpoint" name="endpoint"
+                            value="{% if local_site %}{{ local_site.endpoint }}{% else %}{{ config_site_endpoint or "" }}{% endif %}"
+                            placeholder="https://s3.us-west-1.example.com">
+                        <div class="form-text">Public URL for this site</div>
+                    </div>
+                    <div class="mb-3">
+                        <label for="region" class="form-label fw-medium">Region</label>
+                        <input type="text" class="form-control" id="region" name="region"
+                            value="{% if local_site %}{{ local_site.region }}{% else %}{{ config_site_region }}{% endif %}">
+                    </div>
+                    <div class="row mb-3">
+                        <div class="col-6">
+                            <label for="priority" class="form-label fw-medium">Priority</label>
+                            <input type="number" class="form-control" id="priority" name="priority"
+                                value="{% if local_site %}{{ local_site.priority }}{% else %}{{ 100 }}{% endif %}" min="0">
+                            <div class="form-text">Lower = preferred</div>
+                        </div>
+                        <div class="col-6">
+                            <label for="display_name" class="form-label fw-medium">Display Name</label>
+                            <input type="text" class="form-control" id="display_name" name="display_name"
+                                value="{% if local_site %}{{ local_site.display_name }}{% else %}{{ "" }}{% endif %}"
+                                placeholder="US West Primary">
+                        </div>
+                    </div>
+                    <div class="d-grid">
+                        <button type="submit" class="btn btn-primary">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="me-1" viewBox="0 0 16 16">
+                                <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"/>
+                            </svg>
+                            Save Local Site
+                        </button>
+                    </div>
+                </form>
+            </div>
+        </div>
+
+        <div class="card shadow-sm border-0" style="border-radius: 1rem;">
+            <div class="card-header bg-transparent border-0 pt-3 pb-0 px-4">
+                <button class="btn btn-link text-decoration-none p-0 w-100 d-flex align-items-center justify-content-between"
+                    type="button" data-bs-toggle="collapse" data-bs-target="#addPeerCollapse"
+                    aria-expanded="false" aria-controls="addPeerCollapse">
+                    <span class="d-flex align-items-center gap-2">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="text-primary" viewBox="0 0 16 16">
+                            <path fill-rule="evenodd" d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2Z"/>
+                        </svg>
+                        <span class="fw-semibold h5 mb-0">Add Peer Site</span>
+                    </span>
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="text-muted add-peer-chevron" viewBox="0 0 16 16">
+                        <path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/>
+                    </svg>
+                </button>
+                <p class="text-muted small mb-0 mt-1">Register a remote site</p>
+            </div>
+            <div class="collapse" id="addPeerCollapse">
+                <div class="card-body px-4 pb-4">
+                    <form method="POST" action="{{ url_for(endpoint="ui.add_peer_site") }}" id="addPeerForm">
+                        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
+                        <div class="mb-3">
+                            <label for="peer_site_id" class="form-label fw-medium">Site ID</label>
+                            <input type="text" class="form-control" id="peer_site_id" name="site_id" required placeholder="us-east-1">
+                        </div>
+                        <div class="mb-3">
+                            <label for="peer_endpoint" class="form-label fw-medium">Endpoint URL</label>
+                            <input type="url" class="form-control" id="peer_endpoint" name="endpoint" required placeholder="https://s3.us-east-1.example.com">
+                        </div>
+                        <div class="mb-3">
+                            <label for="peer_region" class="form-label fw-medium">Region</label>
+                            <input type="text" class="form-control" id="peer_region" name="region" value="us-east-1">
+                        </div>
+                        <div class="row mb-3">
+                            <div class="col-6">
+                                <label for="peer_priority" class="form-label fw-medium">Priority</label>
+                                <input type="number" class="form-control" id="peer_priority" name="priority" value="100" min="0">
+                            </div>
+                            <div class="col-6">
+                                <label for="peer_display_name" class="form-label fw-medium">Display Name</label>
+                                <input type="text" class="form-control" id="peer_display_name" name="display_name" placeholder="US East DR">
+                            </div>
+                        </div>
+                        <div class="mb-3">
+                            <label for="peer_connection_id" class="form-label fw-medium">Connection</label>
+                            <select class="form-select" id="peer_connection_id" name="connection_id">
+                                <option value="">No connection</option>
+                                {% for conn in connections %}
+                                <option value="{{ conn.id }}">{{ conn.name }} ({{ conn.endpoint_url }})</option>
+                                {% endfor %}
+                            </select>
+                            <div class="form-text">Link to a remote connection for health checks</div>
+                        </div>
+                        <div class="d-grid">
+                            <button type="submit" class="btn btn-primary">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="me-1" viewBox="0 0 16 16">
+                                    <path fill-rule="evenodd" d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2Z"/>
+                                </svg>
+                                Add Peer Site
+                            </button>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="col-lg-8 col-md-7">
+        <div class="card shadow-sm border-0" style="border-radius: 1rem;">
+            <div class="card-header bg-transparent border-0 pt-4 pb-0 px-4 d-flex justify-content-between align-items-start">
+                <div>
+                    <h5 class="fw-semibold d-flex align-items-center gap-2 mb-1">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="text-muted" viewBox="0 0 16 16">
+                            <path fill-rule="evenodd" d="M6 3.5A1.5 1.5 0 0 1 7.5 2h1A1.5 1.5 0 0 1 10 3.5v1A1.5 1.5 0 0 1 8.5 6v1H14a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-1 0V8h-5v.5a.5.5 0 0 1-1 0V8h-5v.5a.5.5 0 0 1-1 0v-1A.5.5 0 0 1 2 7h5.5V6A1.5 1.5 0 0 1 6 4.5v-1zM8.5 5a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1zM0 11.5A1.5 1.5 0 0 1 1.5 10h1A1.5 1.5 0 0 1 4 11.5v1A1.5 1.5 0 0 1 2.5 14h-1A1.5 1.5 0 0 1 0 12.5v-1zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1zm4.5.5A1.5 1.5 0 0 1 7.5 10h1a1.5 1.5 0 0 1 1.5 1.5v1A1.5 1.5 0 0 1 8.5 14h-1A1.5 1.5 0 0 1 6 12.5v-1zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1zm4.5.5a1.5 1.5 0 0 1 1.5-1.5h1a1.5 1.5 0 0 1 1.5 1.5v1a1.5 1.5 0 0 1-1.5 1.5h-1a1.5 1.5 0 0 1-1.5-1.5v-1zm1.5-.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1z"/>
+                        </svg>
+                        Peer Sites
+                    </h5>
+                    <p class="text-muted small mb-0">Known remote sites in the cluster</p>
+                </div>
+                {% if peers %}
+                <button type="button" class="btn btn-outline-secondary btn-sm" id="btnCheckAllHealth" title="Check health of all peers">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="me-1" viewBox="0 0 16 16">
+                        <path d="M11.251.068a.5.5 0 0 1 .227.58L9.677 6.5H13a.5.5 0 0 1 .364.843l-8 8.5a.5.5 0 0 1-.842-.49L6.323 9.5H3a.5.5 0 0 1-.364-.843l8-8.5a.5.5 0 0 1 .615-.09z"/>
+                    </svg>
+                    Check All
+                </button>
+                {% endif %}
+            </div>
+            <div class="card-body px-4 pb-4">
+                {% if peers %}
+                <div class="table-responsive">
+                    <table class="table table-hover align-middle mb-0">
+                        <thead class="table-light">
+                            <tr>
+                                <th scope="col" style="width: 50px;">Health</th>
+                                <th scope="col">Site ID</th>
+                                <th scope="col">Endpoint</th>
+                                <th scope="col">Region</th>
+                                <th scope="col">Priority</th>
+                                <th scope="col">Sync Status</th>
+                                <th scope="col" class="text-end">Actions</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {% for item in peers_with_stats %}
+                            {% set peer = item.peer %}
+                            <tr data-site-id="{{ peer.site_id }}">
+                                <td class="text-center">
+                                    <span class="peer-health-status" data-site-id="{{ peer.site_id }}"
+                                        data-last-checked="{{ peer.last_health_check or "" }}"
+                                        title="{% if peer.is_healthy == true %}Healthy{% elif peer.is_healthy == false %}Unhealthy{% else %}Not checked{% endif %}{% if peer.last_health_check %} (checked {{ peer.last_health_check }}){% endif %}"
+                                        style="cursor: help;">
+                                        {% if peer.is_healthy == true %}
+                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="text-success" viewBox="0 0 16 16">
+                                            <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
+                                        </svg>
+                                        {% elif peer.is_healthy == false %}
+                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="text-danger" viewBox="0 0 16 16">
+                                            <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"/>
+                                        </svg>
+                                        {% else %}
+                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="text-muted" viewBox="0 0 16 16">
+                                            <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
+                                            <path d="M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286zm1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94z"/>
+                                        </svg>
+                                        {% endif %}
+                                    </span>
+                                </td>
+                                <td>
+                                    <div class="d-flex align-items-center gap-2">
+                                        <div class="peer-icon">
+                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+                                                <path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm7.5-6.923c-.67.204-1.335.82-1.887 1.855A7.97 7.97 0 0 0 5.145 4H7.5V1.077zM4.09 4a9.267 9.267 0 0 1 .64-1.539 6.7 6.7 0 0 1 .597-.933A7.025 7.025 0 0 0 2.255 4H4.09zm-.582 3.5c.03-.877.138-1.718.312-2.5H1.674a6.958 6.958 0 0 0-.656 2.5h2.49zM4.847 5a12.5 12.5 0 0 0-.338 2.5H7.5V5H4.847zM8.5 5v2.5h2.99a12.495 12.495 0 0 0-.337-2.5H8.5zM4.51 8.5a12.5 12.5 0 0 0 .337 2.5H7.5V8.5H4.51zm3.99 0V11h2.653c.187-.765.306-1.608.338-2.5H8.5z"/>
+                                            </svg>
+                                        </div>
+                                        <div>
+                                            <span class="fw-medium">{{ peer.display_name or peer.site_id }}</span>
+                                            {% if peer.display_name and peer.display_name != peer.site_id %}
+                                            <br><small class="text-muted">{{ peer.site_id }}</small>
+                                            {% endif %}
+                                        </div>
+                                    </div>
+                                </td>
+                                <td>
+                                    <span class="endpoint-display text-muted small" data-full-url="{{ peer.endpoint }}" title="{{ peer.endpoint }}" style="cursor: pointer;">
+                                        {% set parsed = peer.endpoint | split(pat="//") %}
+                                        {% if parsed|length > 1 %}{% set host_parts = parsed[1] | split(pat="/") %}{{ host_parts[0] }}{% else %}{{ peer.endpoint }}{% endif %}
+                                    </span>
+                                    <button type="button" class="btn btn-link btn-sm p-0 ms-1 btn-copy-endpoint" data-url="{{ peer.endpoint }}" title="Copy full URL">
+                                        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="text-muted" viewBox="0 0 16 16">
+                                            <path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/>
+                                            <path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/>
+                                        </svg>
+                                    </button>
+                                </td>
+                                <td><span class="text-muted small">{{ peer.region }}</span></td>
+                                <td><span class="text-muted small">{{ peer.priority }}</span></td>
+                                <td class="sync-stats-cell" data-site-id="{{ peer.site_id }}">
+                                    {% if item.has_connection %}
+                                    <div class="d-flex align-items-center gap-2">
+                                        <span class="badge bg-primary bg-opacity-10 text-primary">{{ item.buckets_syncing }} bucket{% if item.buckets_syncing != 1 %}s{% else %}{% endif %}</span>
+                                        {% if item.has_bidirectional %}
+                                        <span class="bidir-status-icon" data-site-id="{{ peer.site_id }}" title="Bidirectional sync - click to verify">
+                                            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="text-info" viewBox="0 0 16 16" style="cursor: pointer;">
+                                                <path fill-rule="evenodd" d="M1 11.5a.5.5 0 0 0 .5.5h11.793l-3.147 3.146a.5.5 0 0 0 .708.708l4-4a.5.5 0 0 0 0-.708l-4-4a.5.5 0 0 0-.708.708L13.293 11H1.5a.5.5 0 0 0-.5.5zm14-7a.5.5 0 0 1-.5.5H2.707l3.147 3.146a.5.5 0 1 1-.708.708l-4-4a.5.5 0 0 1 0-.708l4-4a.5.5 0 1 1 .708.708L2.707 4H14.5a.5.5 0 0 1 .5.5z"/>
+                                            </svg>
+                                        </span>
+                                        {% endif %}
+                                    </div>
+                                    <div class="sync-stats-detail d-none mt-2 small" id="stats-{{ peer.site_id }}">
+                                        <span class="spinner-border spinner-border-sm text-muted" style="width: 12px; height: 12px;"></span>
+                                    </div>
+                                    {% else %}
+                                    <a href="#" class="text-muted small link-no-connection"
+                                        data-site-id="{{ peer.site_id }}"
+                                        title="Click to link a connection">Link a connection</a>
+                                    {% endif %}
+                                </td>
+                                <td class="text-end">
+                                    <div class="d-flex align-items-center justify-content-end gap-1">
+                                        <button type="button" class="btn btn-outline-secondary btn-sm"
+                                            data-bs-toggle="modal"
+                                            data-bs-target="#editPeerModal"
+                                            data-site-id="{{ peer.site_id }}"
+                                            data-endpoint="{{ peer.endpoint }}"
+                                            data-region="{{ peer.region }}"
+                                            data-priority="{{ peer.priority }}"
+                                            data-display-name="{{ peer.display_name }}"
+                                            data-connection-id="{{ peer.connection_id or "" }}"
+                                            title="Edit peer">
+                                            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 16 16">
+                                                <path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5z"/>
+                                            </svg>
+                                        </button>
+                                        <div class="dropdown peer-actions-dropdown">
+                                            <button class="btn btn-outline-secondary btn-sm" type="button" data-bs-toggle="dropdown" aria-expanded="false" title="More actions">
+                                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 16 16">
+                                                    <path d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"/>
+                                                </svg>
+                                            </button>
+                                            <ul class="dropdown-menu dropdown-menu-end">
+                                                <li>
+                                                    <button type="button" class="dropdown-item btn-check-health" data-site-id="{{ peer.site_id }}">
+                                                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="me-2 text-warning" viewBox="0 0 16 16">
+                                                            <path d="M11.251.068a.5.5 0 0 1 .227.58L9.677 6.5H13a.5.5 0 0 1 .364.843l-8 8.5a.5.5 0 0 1-.842-.49L6.323 9.5H3a.5.5 0 0 1-.364-.843l8-8.5a.5.5 0 0 1 .615-.09z"/>
+                                                        </svg>
+                                                        Check Health
+                                                    </button>
+                                                </li>
+                                                <li>
+                                                    <button type="button" class="dropdown-item btn-check-bidir {% if not item.has_connection %}disabled{% endif %}"
+                                                        data-site-id="{{ peer.site_id }}"
+                                                        data-display-name="{{ peer.display_name or peer.site_id }}">
+                                                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="me-2 text-info" viewBox="0 0 16 16">
+                                                            <path fill-rule="evenodd" d="M1 11.5a.5.5 0 0 0 .5.5h11.793l-3.147 3.146a.5.5 0 0 0 .708.708l4-4a.5.5 0 0 0 0-.708l-4-4a.5.5 0 0 0-.708.708L13.293 11H1.5a.5.5 0 0 0-.5.5zm14-7a.5.5 0 0 1-.5.5H2.707l3.147 3.146a.5.5 0 1 1-.708.708l-4-4a.5.5 0 0 1 0-.708l4-4a.5.5 0 1 1 .708.708L2.707 4H14.5a.5.5 0 0 1 .5.5z"/>
+                                                        </svg>
+                                                        Bidirectional Status
+                                                    </button>
+                                                </li>
+                                                {% if item.has_connection and item.buckets_syncing > 0 %}
+                                                <li>
+                                                    <button type="button" class="dropdown-item btn-load-stats" data-site-id="{{ peer.site_id }}">
+                                                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="me-2 text-primary" viewBox="0 0 16 16">
+                                                            <path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z"/>
+                                                            <path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z"/>
+                                                        </svg>
+                                                        Load Sync Stats
+                                                    </button>
+                                                </li>
+                                                {% endif %}
+                                                <li>
+                                                    <a href="{{ url_for(endpoint="ui.replication_wizard", site_id=peer.site_id) }}"
+                                                        class="dropdown-item {% if not item.has_connection %}disabled{% endif %}">
+                                                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="me-2 text-primary" viewBox="0 0 16 16">
+                                                            <path d="M11.534 7h3.932a.25.25 0 0 1 .192.41l-1.966 2.36a.25.25 0 0 1-.384 0l-1.966-2.36a.25.25 0 0 1 .192-.41zm-11 2h3.932a.25.25 0 0 0 .192-.41L2.692 6.23a.25.25 0 0 0-.384 0L.342 8.59A.25.25 0 0 0 .534 9z"/>
+                                                            <path fill-rule="evenodd" d="M8 3c-1.552 0-2.94.707-3.857 1.818a.5.5 0 1 1-.771-.636A6.002 6.002 0 0 1 13.917 7H12.9A5.002 5.002 0 0 0 8 3zM3.1 9a5.002 5.002 0 0 0 8.757 2.182.5.5 0 1 1 .771.636A6.002 6.002 0 0 1 2.083 9H3.1z"/>
+                                                        </svg>
+                                                        Replication Wizard
+                                                    </a>
+                                                </li>
+                                                <li><hr class="dropdown-divider"></li>
+                                                <li>
+                                                    <button type="button" class="dropdown-item text-danger"
+                                                        data-bs-toggle="modal"
+                                                        data-bs-target="#deletePeerModal"
+                                                        data-site-id="{{ peer.site_id }}"
+                                                        data-display-name="{{ peer.display_name or peer.site_id }}">
+                                                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="me-2" viewBox="0 0 16 16">
+                                                            <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/>
+                                                            <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/>
+                                                        </svg>
+                                                        Delete Peer
+                                                    </button>
+                                                </li>
+                                            </ul>
+                                        </div>
+                                    </div>
+                                </td>
+                            </tr>
+                            {% endfor %}
+                        </tbody>
+                    </table>
+                </div>
+                {% else %}
+                <div class="empty-state text-center py-5">
+                    <div class="empty-state-icon mx-auto mb-3">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" viewBox="0 0 16 16">
+                            <path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm7.5-6.923c-.67.204-1.335.82-1.887 1.855A7.97 7.97 0 0 0 5.145 4H7.5V1.077zM4.09 4a9.267 9.267 0 0 1 .64-1.539 6.7 6.7 0 0 1 .597-.933A7.025 7.025 0 0 0 2.255 4H4.09zm-.582 3.5c.03-.877.138-1.718.312-2.5H1.674a6.958 6.958 0 0 0-.656 2.5h2.49zM4.847 5a12.5 12.5 0 0 0-.338 2.5H7.5V5H4.847zM8.5 5v2.5h2.99a12.495 12.495 0 0 0-.337-2.5H8.5zM4.51 8.5a12.5 12.5 0 0 0 .337 2.5H7.5V8.5H4.51zm3.99 0V11h2.653c.187-.765.306-1.608.338-2.5H8.5zM5.145 12c.138.386.295.744.468 1.068.552 1.035 1.218 1.65 1.887 1.855V12H5.145zm.182 2.472a6.696 6.696 0 0 1-.597-.933A9.268 9.268 0 0 1 4.09 12H2.255a7.024 7.024 0 0 0 3.072 2.472z"/>
+                        </svg>
+                    </div>
+                    <h5 class="fw-semibold mb-2">No peer sites yet</h5>
+                    <p class="text-muted mb-0">Add peer sites to enable geo-distribution and site-to-site replication.</p>
+                </div>
+                {% endif %}
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="modal fade" id="editPeerModal" tabindex="-1" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content">
+            <div class="modal-header border-0 pb-0">
+                <h5 class="modal-title fw-semibold">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="text-primary" viewBox="0 0 16 16">
+                        <path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z"/>
+                    </svg>
+                    Edit Peer Site
+                </h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <form method="POST" id="editPeerForm">
+                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
+                <div class="modal-body">
+                    <div class="mb-3">
+                        <label class="form-label fw-medium">Site ID</label>
+                        <input type="text" class="form-control" id="edit_site_id" readonly>
+                    </div>
+                    <div class="mb-3">
+                        <label for="edit_endpoint" class="form-label fw-medium">Endpoint URL</label>
+                        <input type="url" class="form-control" id="edit_endpoint" name="endpoint" required>
+                    </div>
+                    <div class="mb-3">
+                        <label for="edit_region" class="form-label fw-medium">Region</label>
+                        <input type="text" class="form-control" id="edit_region" name="region" required>
+                    </div>
+                    <div class="row mb-3">
+                        <div class="col-6">
+                            <label for="edit_priority" class="form-label fw-medium">Priority</label>
+                            <input type="number" class="form-control" id="edit_priority" name="priority" min="0">
+                        </div>
+                        <div class="col-6">
+                            <label for="edit_display_name" class="form-label fw-medium">Display Name</label>
+                            <input type="text" class="form-control" id="edit_display_name" name="display_name">
+                        </div>
+                    </div>
+                    <div class="mb-3">
+                        <label for="edit_connection_id" class="form-label fw-medium">Connection</label>
+                        <select class="form-select" id="edit_connection_id" name="connection_id">
+                            <option value="">No connection</option>
+                            {% for conn in connections %}
+                            <option value="{{ conn.id }}">{{ conn.name }} ({{ conn.endpoint_url }})</option>
+                            {% endfor %}
+                        </select>
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
+                    <button type="submit" class="btn btn-primary">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="me-1" viewBox="0 0 16 16">
+                            <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"/>
+                        </svg>
+                        Save
+                    </button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
+
+<div class="modal fade" id="deletePeerModal" tabindex="-1" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content">
+            <div class="modal-header border-0 pb-0">
+                <h5 class="modal-title fw-semibold">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="text-danger" viewBox="0 0 16 16">
+                        <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/>
+                        <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/>
+                    </svg>
+                    Delete Peer Site
+                </h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body">
+                <p>Are you sure you want to delete <strong id="deletePeerName"></strong>?</p>
+                <div class="alert alert-warning d-flex align-items-start small" role="alert">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="flex-shrink-0 me-2 mt-0" viewBox="0 0 16 16">
+                        <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
+                    </svg>
+                    <div>This will remove the peer from the site registry. Any site sync configurations may be affected.</div>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
+                <form method="POST" id="deletePeerForm">
+                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
+                    <button type="submit" class="btn btn-danger">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="me-1" viewBox="0 0 16 16">
+                            <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/>
+                            <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/>
+                        </svg>
+                        Delete
+                    </button>
+                </form>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="modal fade" id="bidirStatusModal" tabindex="-1" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered modal-lg">
+        <div class="modal-content">
+            <div class="modal-header border-0 pb-0">
+                <h5 class="modal-title fw-semibold">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="text-info me-2" viewBox="0 0 16 16">
+                        <path fill-rule="evenodd" d="M1 11.5a.5.5 0 0 0 .5.5h11.793l-3.147 3.146a.5.5 0 0 0 .708.708l4-4a.5.5 0 0 0 0-.708l-4-4a.5.5 0 0 0-.708.708L13.293 11H1.5a.5.5 0 0 0-.5.5zm14-7a.5.5 0 0 1-.5.5H2.707l3.147 3.146a.5.5 0 1 1-.708.708l-4-4a.5.5 0 0 1 0-.708l4-4a.5.5 0 1 1 .708.708L2.707 4H14.5a.5.5 0 0 1 .5.5z"/>
+                    </svg>
+                    Bidirectional Sync Status
+                </h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body">
+                <div id="bidirStatusContent">
+                    <div class="text-center py-4">
+                        <span class="spinner-border text-primary" role="status"></span>
+                        <p class="text-muted mt-2 mb-0">Checking configuration...</p>
+                    </div>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
+                <a href="#" id="bidirWizardLink" class="btn btn-primary d-none">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="me-1" viewBox="0 0 16 16">
+                        <path d="M9.828.722a.5.5 0 0 1 .354.146l4.95 4.95a.5.5 0 0 1 0 .707c-.48.48-1.072.588-1.503.588-.177 0-.335-.018-.46-.039l-3.134 3.134a5.927 5.927 0 0 1 .16 1.013c.046.702-.032 1.687-.72 2.375a.5.5 0 0 1-.707 0l-2.829-2.828-3.182 3.182c-.195.195-1.219.902-1.414.707-.195-.195.512-1.22.707-1.414l3.182-3.182-2.828-2.829a.5.5 0 0 1 0-.707c.688-.688 1.673-.767 2.375-.72a5.922 5.922 0 0 1 1.013.16l3.134-3.133a2.772 2.772 0 0 1-.04-.461c0-.43.108-1.022.589-1.503a.5.5 0 0 1 .353-.146z"/>
+                    </svg>
+                    Run Setup Wizard
+                </a>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script>
+(function() {
+    var escapeHtml = window.UICore ? window.UICore.escapeHtml : function(s) { return s; };
+
+    var editPeerModal = document.getElementById('editPeerModal');
+    if (editPeerModal) {
+        editPeerModal.addEventListener('show.bs.modal', function (event) {
+            var button = event.relatedTarget;
+            var siteId = button.getAttribute('data-site-id');
+            document.getElementById('edit_site_id').value = siteId;
+            document.getElementById('edit_endpoint').value = button.getAttribute('data-endpoint');
+            document.getElementById('edit_region').value = button.getAttribute('data-region');
+            document.getElementById('edit_priority').value = button.getAttribute('data-priority');
+            document.getElementById('edit_display_name').value = button.getAttribute('data-display-name');
+            document.getElementById('edit_connection_id').value = button.getAttribute('data-connection-id');
+            document.getElementById('editPeerForm').action = '/ui/sites/peers/' + encodeURIComponent(siteId) + '/update';
+        });
+    }
+
+    document.querySelectorAll('.link-no-connection').forEach(function(link) {
+        link.addEventListener('click', function(e) {
+            e.preventDefault();
+            var siteId = this.getAttribute('data-site-id');
+            var row = this.closest('tr[data-site-id]');
+            if (row) {
+                var btn = row.querySelector('.btn[data-bs-target="#editPeerModal"]');
+                if (btn) btn.click();
+            }
+        });
+    });
+
+    var deletePeerModal = document.getElementById('deletePeerModal');
+    if (deletePeerModal) {
+        deletePeerModal.addEventListener('show.bs.modal', function (event) {
+            var button = event.relatedTarget;
+            var siteId = button.getAttribute('data-site-id');
+            var displayName = button.getAttribute('data-display-name');
+            document.getElementById('deletePeerName').textContent = displayName;
+            document.getElementById('deletePeerForm').action = '/ui/sites/peers/' + encodeURIComponent(siteId) + '/delete';
+        });
+    }
+
+    function formatTimeAgo(date) {
+        var seconds = Math.floor((new Date() - date) / 1000);
+        if (seconds < 60) return 'just now';
+        var minutes = Math.floor(seconds / 60);
+        if (minutes < 60) return minutes + 'm ago';
+        var hours = Math.floor(minutes / 60);
+        if (hours < 24) return hours + 'h ago';
+        return Math.floor(hours / 24) + 'd ago';
+    }
+
+    function doHealthCheck(siteId) {
+        var row = document.querySelector('tr[data-site-id="' + CSS.escape(siteId) + '"]');
+        var statusSpan = row ? row.querySelector('.peer-health-status') : null;
+        if (!statusSpan) return Promise.resolve();
+
+        statusSpan.innerHTML = '<span class="spinner-border spinner-border-sm text-muted" role="status" style="width: 14px; height: 14px;"></span>';
+
+        return fetch('/ui/sites/peers/' + encodeURIComponent(siteId) + '/health')
+            .then(function(response) { return response.json(); })
+            .then(function(data) {
+                var now = new Date();
+                statusSpan.setAttribute('data-last-checked', now.toISOString());
+                if (data.is_healthy) {
+                    statusSpan.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="text-success" viewBox="0 0 16 16"><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/></svg>';
+                    statusSpan.title = 'Healthy (checked ' + formatTimeAgo(now) + ')';
+                    return { siteId: siteId, healthy: true };
+                } else {
+                    statusSpan.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="text-danger" viewBox="0 0 16 16"><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"/></svg>';
+                    statusSpan.title = 'Unhealthy' + (data.error ? ': ' + data.error : '') + ' (checked ' + formatTimeAgo(now) + ')';
+                    return { siteId: siteId, healthy: false, error: data.error };
+                }
+            })
+            .catch(function(err) {
+                statusSpan.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="text-muted" viewBox="0 0 16 16"><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/><path d="M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286zm1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94z"/></svg>';
+                statusSpan.title = 'Check failed';
+                return { siteId: siteId, healthy: null };
+            });
+    }
+
+    document.querySelectorAll('.btn-check-health').forEach(function(btn) {
+        btn.addEventListener('click', function() {
+            var siteId = this.getAttribute('data-site-id');
+            doHealthCheck(siteId).then(function(result) {
+                if (!result) return;
+                if (result.healthy === true) {
+                    if (window.showToast) window.showToast('Peer site is healthy', 'Health Check', 'success');
+                } else if (result.healthy === false) {
+                    if (window.showToast) window.showToast(result.error || 'Peer site is unhealthy', 'Health Check', 'error');
+                } else {
+                    if (window.showToast) window.showToast('Failed to check health', 'Health Check', 'error');
+                }
+            });
+        });
+    });
+
+    var checkAllBtn = document.getElementById('btnCheckAllHealth');
+    if (checkAllBtn) {
+        checkAllBtn.addEventListener('click', function() {
+            var btn = this;
+            var originalHtml = btn.innerHTML;
+            btn.disabled = true;
+            btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>Checking...';
+
+            var siteIds = [];
+            document.querySelectorAll('.peer-health-status').forEach(function(el) {
+                siteIds.push(el.getAttribute('data-site-id'));
+            });
+
+            var promises = siteIds.map(function(id) { return doHealthCheck(id); });
+            Promise.all(promises).then(function(results) {
+                var healthy = results.filter(function(r) { return r && r.healthy === true; }).length;
+                var unhealthy = results.filter(function(r) { return r && r.healthy === false; }).length;
+                var failed = results.filter(function(r) { return r && r.healthy === null; }).length;
+
+                var msg = healthy + ' healthy';
+                if (unhealthy > 0) msg += ', ' + unhealthy + ' unhealthy';
+                if (failed > 0) msg += ', ' + failed + ' failed';
+                if (window.showToast) window.showToast(msg, 'Health Check', unhealthy > 0 ? 'warning' : 'success');
+
+                btn.disabled = false;
+                btn.innerHTML = originalHtml;
+            });
+        });
+    }
+
+    document.querySelectorAll('.btn-load-stats').forEach(function(btn) {
+        btn.addEventListener('click', function() {
+            var siteId = this.getAttribute('data-site-id');
+            var detailDiv = document.getElementById('stats-' + siteId);
+            if (!detailDiv) return;
+
+            detailDiv.classList.remove('d-none');
+            detailDiv.innerHTML = '<span class="spinner-border spinner-border-sm text-muted" style="width: 12px; height: 12px;"></span> Loading...';
+
+            fetch('/ui/sites/peers/' + encodeURIComponent(siteId) + '/sync-stats')
+                .then(function(response) { return response.json(); })
+                .then(function(data) {
+                    if (data.error) {
+                        detailDiv.innerHTML = '<span class="text-danger">' + escapeHtml(data.error) + '</span>';
+                    } else {
+                        var lastSync = data.last_sync_at
+                            ? new Date(data.last_sync_at * 1000).toLocaleString()
+                            : 'Never';
+                        detailDiv.innerHTML =
+                            '<div class="d-flex flex-wrap gap-2 mb-1">' +
+                                '<span class="text-success"><strong>' + escapeHtml(String(data.objects_synced)) + '</strong> synced</span>' +
+                                '<span class="text-warning"><strong>' + escapeHtml(String(data.objects_pending)) + '</strong> pending</span>' +
+                                '<span class="text-danger"><strong>' + escapeHtml(String(data.objects_failed)) + '</strong> failed</span>' +
+                            '</div>' +
+                            '<div class="text-muted" style="font-size: 0.75rem;">Last sync: ' + escapeHtml(lastSync) + '</div>';
+                    }
+                })
+                .catch(function() {
+                    detailDiv.innerHTML = '<span class="text-danger">Failed to load stats</span>';
+                });
+        });
+    });
+
+    document.querySelectorAll('.bidir-status-icon').forEach(function(icon) {
+        icon.addEventListener('click', function() {
+            var siteId = this.getAttribute('data-site-id');
+            var row = this.closest('tr[data-site-id]');
+            var btn = row ? row.querySelector('.btn-check-bidir') : null;
+            if (btn) btn.click();
+        });
+    });
+
+    document.querySelectorAll('.btn-check-bidir').forEach(function(btn) {
+        btn.addEventListener('click', function() {
+            var siteId = this.getAttribute('data-site-id');
+            var displayName = this.getAttribute('data-display-name');
+            var modal = new bootstrap.Modal(document.getElementById('bidirStatusModal'));
+            var contentDiv = document.getElementById('bidirStatusContent');
+            var wizardLink = document.getElementById('bidirWizardLink');
+
+            contentDiv.innerHTML =
+                '<div class="text-center py-4">' +
+                    '<span class="spinner-border text-primary" role="status"></span>' +
+                    '<p class="text-muted mt-2 mb-0">Checking bidirectional configuration with ' + escapeHtml(displayName) + '...</p>' +
+                '</div>';
+            wizardLink.classList.add('d-none');
+            modal.show();
+
+            fetch('/ui/sites/peers/' + encodeURIComponent(siteId) + '/bidirectional-status')
+                .then(function(response) { return response.json(); })
+                .then(function(data) {
+                    var html = '';
+
+                    if (data.is_fully_configured) {
+                        html += '<div class="alert alert-success d-flex align-items-center mb-4" role="alert">' +
+                            '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="flex-shrink-0 me-2" viewBox="0 0 16 16">' +
+                                '<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>' +
+                            '</svg>' +
+                            '<div><strong>Bidirectional sync is fully configured!</strong><br><small>Both sites are set up to sync data in both directions.</small></div>' +
+                        '</div>';
+                    } else if (data.issues && data.issues.length > 0) {
+                        var errors = data.issues.filter(function(i) { return i.severity === 'error'; });
+                        var warnings = data.issues.filter(function(i) { return i.severity === 'warning'; });
+
+                        if (errors.length > 0) {
+                            html += '<div class="alert alert-danger mb-3" role="alert">' +
+                                '<h6 class="alert-heading fw-bold mb-2">' +
+                                    '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="me-1" viewBox="0 0 16 16"><path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"/></svg>' +
+                                    ' Configuration Errors</h6><ul class="mb-0 ps-3">';
+                            errors.forEach(function(issue) {
+                                html += '<li><strong>' + escapeHtml(issue.code) + ':</strong> ' + escapeHtml(issue.message) + '</li>';
+                            });
+                            html += '</ul></div>';
+                        }
+
+                        if (warnings.length > 0) {
+                            html += '<div class="alert alert-warning mb-3" role="alert">' +
+                                '<h6 class="alert-heading fw-bold mb-2">' +
+                                    '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="me-1" viewBox="0 0 16 16"><path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/></svg>' +
+                                    ' Warnings</h6><ul class="mb-0 ps-3">';
+                            warnings.forEach(function(issue) {
+                                html += '<li><strong>' + escapeHtml(issue.code) + ':</strong> ' + escapeHtml(issue.message) + '</li>';
+                            });
+                            html += '</ul></div>';
+                        }
+                    }
+
+                    html += '<div class="row g-3">';
+                    html += '<div class="col-md-6"><div class="card h-100"><div class="card-header bg-light py-2"><strong>This Site (Local)</strong></div>' +
+                        '<div class="card-body small">' +
+                            '<p class="mb-1"><strong>Site ID:</strong> ' + (data.local_site_id ? escapeHtml(data.local_site_id) : '<span class="text-danger">Not configured</span>') + '</p>' +
+                            '<p class="mb-1"><strong>Endpoint:</strong> ' + (data.local_endpoint ? escapeHtml(data.local_endpoint) : '<span class="text-danger">Not configured</span>') + '</p>' +
+                            '<p class="mb-1"><strong>Site Sync Worker:</strong> ' + (data.local_site_sync_enabled ? '<span class="text-success">Enabled</span>' : '<span class="text-warning">Disabled</span>') + '</p>' +
+                            '<p class="mb-0"><strong>Bidirectional Rules:</strong> ' + (data.local_bidirectional_rules ? data.local_bidirectional_rules.length : 0) + '</p>' +
+                        '</div></div></div>';
+
+                    if (data.remote_status) {
+                        var rs = data.remote_status;
+                        html += '<div class="col-md-6"><div class="card h-100"><div class="card-header bg-light py-2"><strong>Remote Site (' + escapeHtml(displayName) + ')</strong></div>' +
+                            '<div class="card-body small">';
+                        if (rs.admin_access_denied) {
+                            html += '<p class="text-warning mb-0">Admin access denied - cannot verify remote configuration</p>';
+                        } else if (rs.reachable === false) {
+                            html += '<p class="text-danger mb-0">Could not reach remote admin API</p>';
+                        } else {
+                            html += '<p class="mb-1"><strong>Has Peer Entry for Us:</strong> ' + (rs.has_peer_for_us ? '<span class="text-success">Yes</span>' : '<span class="text-danger">No</span>') + '</p>' +
+                                '<p class="mb-1"><strong>Connection Configured:</strong> ' + (rs.peer_connection_configured ? '<span class="text-success">Yes</span>' : '<span class="text-danger">No</span>') + '</p>';
+                        }
+                        html += '</div></div></div>';
+                    } else {
+                        html += '<div class="col-md-6"><div class="card h-100"><div class="card-header bg-light py-2"><strong>Remote Site (' + escapeHtml(displayName) + ')</strong></div>' +
+                            '<div class="card-body small"><p class="text-muted mb-0">Could not check remote status</p></div></div></div>';
+                    }
+                    html += '</div>';
+
+                    if (data.local_bidirectional_rules && data.local_bidirectional_rules.length > 0) {
+                        html += '<div class="mt-3"><h6 class="fw-semibold">Local Bidirectional Rules</h6>' +
+                            '<table class="table table-sm table-bordered mb-0"><thead class="table-light"><tr><th>Source Bucket</th><th>Target Bucket</th><th>Status</th></tr></thead><tbody>';
+                        data.local_bidirectional_rules.forEach(function(rule) {
+                            html += '<tr><td>' + escapeHtml(rule.bucket_name) + '</td><td>' + escapeHtml(rule.target_bucket) + '</td>' +
+                                '<td>' + (rule.enabled ? '<span class="badge bg-success">Enabled</span>' : '<span class="badge bg-secondary">Disabled</span>') + '</td></tr>';
+                        });
+                        html += '</tbody></table></div>';
+                    }
+
+                    if (!data.is_fully_configured) {
+                        html += '<div class="alert alert-info mt-3 mb-0" role="alert">' +
+                            '<h6 class="alert-heading fw-bold">How to Fix</h6>' +
+                            '<ol class="mb-0 ps-3">' +
+                                '<li>Ensure this site has a Site ID and Endpoint URL configured</li>' +
+                                '<li>On the remote site, register this site as a peer with a connection</li>' +
+                                '<li>Create bidirectional replication rules on both sites</li>' +
+                                '<li>Enable SITE_SYNC_ENABLED=true on both sites</li>' +
+                            '</ol></div>';
+                        var blockingErrors = ['NO_CONNECTION', 'CONNECTION_NOT_FOUND', 'REMOTE_UNREACHABLE', 'ENDPOINT_NOT_ALLOWED'];
+                        var hasBlockingError = data.issues && data.issues.some(function(i) { return blockingErrors.indexOf(i.code) !== -1; });
+                        if (!hasBlockingError) {
+                            wizardLink.href = '/ui/sites/peers/' + encodeURIComponent(siteId) + '/replication-wizard';
+                            wizardLink.classList.remove('d-none');
+                        }
+                    }
+
+                    contentDiv.innerHTML = html;
+                })
+                .catch(function(err) {
+                    contentDiv.innerHTML = '<div class="alert alert-danger" role="alert"><strong>Error:</strong> Failed to check bidirectional status. ' + escapeHtml(err.message || '') + '</div>';
+                });
+        });
+    });
+
+    document.querySelectorAll('.btn-copy-endpoint').forEach(function(btn) {
+        btn.addEventListener('click', function(e) {
+            e.stopPropagation();
+            var url = this.getAttribute('data-url');
+            if (window.UICore && window.UICore.copyToClipboard) {
+                window.UICore.copyToClipboard(url).then(function(ok) {
+                    if (ok && window.showToast) window.showToast('Endpoint URL copied', 'Copied', 'success');
+                });
+            }
+        });
+    });
+
+    var localSiteForm = document.getElementById('localSiteForm');
+    if (localSiteForm) {
+        localSiteForm.addEventListener('submit', function(e) {
+            e.preventDefault();
+            window.UICore.submitFormAjax(this, {
+                successMessage: 'Local site configuration updated',
+                onSuccess: function() {
+                    setTimeout(function() { location.reload(); }, 800);
+                }
+            });
+        });
+    }
+
+    var addPeerForm = document.getElementById('addPeerForm');
+    if (addPeerForm) {
+        addPeerForm.addEventListener('submit', function(e) {
+            e.preventDefault();
+            window.UICore.submitFormAjax(this, {
+                successMessage: 'Peer site added',
+                onSuccess: function(data) {
+                    if (data.redirect) {
+                        setTimeout(function() { window.location.href = data.redirect; }, 800);
+                    } else {
+                        setTimeout(function() { location.reload(); }, 800);
+                    }
+                }
+            });
+        });
+    }
+
+    var editPeerForm = document.getElementById('editPeerForm');
+    if (editPeerForm) {
+        editPeerForm.addEventListener('submit', function(e) {
+            e.preventDefault();
+            var modal = bootstrap.Modal.getInstance(document.getElementById('editPeerModal'));
+            window.UICore.submitFormAjax(this, {
+                successMessage: 'Peer site updated',
+                onSuccess: function() {
+                    if (modal) modal.hide();
+                    setTimeout(function() { location.reload(); }, 800);
+                }
+            });
+        });
+    }
+
+    var deletePeerForm = document.getElementById('deletePeerForm');
+    if (deletePeerForm) {
+        deletePeerForm.addEventListener('submit', function(e) {
+            e.preventDefault();
+            var modal = bootstrap.Modal.getInstance(document.getElementById('deletePeerModal'));
+            window.UICore.submitFormAjax(this, {
+                successMessage: 'Peer site deleted',
+                onSuccess: function() {
+                    if (modal) modal.hide();
+                    setTimeout(function() { location.reload(); }, 800);
+                }
+            });
+        });
+    }
+    document.querySelectorAll('.peer-actions-dropdown').forEach(function(dd) {
+        dd.addEventListener('shown.bs.dropdown', function() {
+            var toggle = dd.querySelector('[data-bs-toggle="dropdown"]');
+            var menu = dd.querySelector('.dropdown-menu');
+            if (!toggle || !menu) return;
+            var rect = toggle.getBoundingClientRect();
+            menu.style.top = rect.bottom + 'px';
+            menu.style.left = (rect.right - menu.offsetWidth) + 'px';
+        });
+    });
+})();
+</script>
+
+<style>
+.add-peer-chevron {
+    transition: transform 0.2s ease;
+}
+[aria-expanded="true"] .add-peer-chevron {
+    transform: rotate(180deg);
+}
+.endpoint-display:hover {
+    text-decoration: underline;
+}
+.peer-actions-dropdown .dropdown-menu {
+    position: fixed !important;
+    inset: auto !important;
+    transform: none !important;
+}
+</style>
+{% endblock %}

rust/myfsio-engine/crates/myfsio-server/templates/system.html

@@ -0,0 +1,762 @@
+{% extends "base.html" %}
+
+{% block title %}System - MyFSIO Console{% endblock %}
+
+{% block content %}
+<div class="page-header d-flex justify-content-between align-items-center mb-4">
+  <div>
+    <p class="text-uppercase text-muted small mb-1">Administration</p>
+    <h1 class="h3 mb-1 d-flex align-items-center gap-2">
+      <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="currentColor" class="text-primary" viewBox="0 0 16 16">
+        <path d="M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872l-.1-.34zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z"/>
+      </svg>
+      System
+    </h1>
+    <p class="text-muted mb-0 mt-1">Server information, feature flags, and maintenance tools.</p>
+  </div>
+  <div class="d-none d-md-block">
+    <span class="badge bg-primary bg-opacity-10 text-primary fs-6 px-3 py-2">v{{ app_version }}</span>
+  </div>
+</div>
+
+<div class="row g-4 mb-4">
+  <div class="col-lg-6">
+    <div class="card shadow-sm border-0" style="border-radius: 1rem;">
+      <div class="card-header bg-transparent border-0 pt-4 pb-0 px-4">
+        <h5 class="fw-semibold d-flex align-items-center gap-2 mb-1">
+          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="text-primary" viewBox="0 0 16 16">
+            <path d="M5 0a.5.5 0 0 1 .5.5V2h1V.5a.5.5 0 0 1 1 0V2h1V.5a.5.5 0 0 1 1 0V2h1V.5a.5.5 0 0 1 1 0V2A2.5 2.5 0 0 1 14 4.5h1.5a.5.5 0 0 1 0 1H14v1h1.5a.5.5 0 0 1 0 1H14v1h1.5a.5.5 0 0 1 0 1H14v1h1.5a.5.5 0 0 1 0 1H14a2.5 2.5 0 0 1-2.5 2.5v1.5a.5.5 0 0 1-1 0V14h-1v1.5a.5.5 0 0 1-1 0V14h-1v1.5a.5.5 0 0 1-1 0V14h-1v1.5a.5.5 0 0 1-1 0V14A2.5 2.5 0 0 1 2 11.5H.5a.5.5 0 0 1 0-1H2v-1H.5a.5.5 0 0 1 0-1H2v-1H.5a.5.5 0 0 1 0-1H2v-1H.5a.5.5 0 0 1 0-1H2A2.5 2.5 0 0 1 4.5 2V.5A.5.5 0 0 1 5 0zm-.5 3A1.5 1.5 0 0 0 3 4.5v7A1.5 1.5 0 0 0 4.5 13h7a1.5 1.5 0 0 0 1.5-1.5v-7A1.5 1.5 0 0 0 11.5 3h-7zM5 6.5A1.5 1.5 0 0 1 6.5 5h3A1.5 1.5 0 0 1 11 6.5v3A1.5 1.5 0 0 1 9.5 11h-3A1.5 1.5 0 0 1 5 9.5v-3zM6.5 6a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3z"/>
+          </svg>
+          Server Information
+        </h5>
+        <p class="text-muted small mb-0">Runtime environment and configuration</p>
+      </div>
+      <div class="card-body px-4 pb-4">
+        <table class="table table-sm mb-0">
+          <tbody>
+            <tr><td class="text-muted" style="width:40%">Version</td><td class="fw-medium">{{ app_version }}</td></tr>
+            <tr><td class="text-muted">Storage Root</td><td><code>{{ storage_root }}</code></td></tr>
+            <tr><td class="text-muted">Platform</td><td>{{ platform }}</td></tr>
+            <tr><td class="text-muted">Python</td><td>{{ python_version }}</td></tr>
+            <tr><td class="text-muted">Rust Extension</td><td>
+              {% if has_rust %}
+              <span class="badge bg-success bg-opacity-10 text-success">Loaded</span>
+              {% else %}
+              <span class="badge bg-secondary bg-opacity-10 text-secondary">Not loaded</span>
+              {% endif %}
+            </td></tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+
+  <div class="col-lg-6">
+    <div class="card shadow-sm border-0" style="border-radius: 1rem;">
+      <div class="card-header bg-transparent border-0 pt-4 pb-0 px-4">
+        <h5 class="fw-semibold d-flex align-items-center gap-2 mb-1">
+          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="text-primary" viewBox="0 0 16 16">
+            <path fill-rule="evenodd" d="M11.5 2a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zM9.05 3a2.5 2.5 0 0 1 4.9 0H16v1h-2.05a2.5 2.5 0 0 1-4.9 0H0V3h9.05zM4.5 7a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zM2.05 8a2.5 2.5 0 0 1 4.9 0H16v1H6.95a2.5 2.5 0 0 1-4.9 0H0V8h2.05zm9.45 4a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zm-2.45 1a2.5 2.5 0 0 1 4.9 0H16v1h-2.05a2.5 2.5 0 0 1-4.9 0H0v-1h9.05z"/>
+          </svg>
+          Feature Flags
+        </h5>
+        <p class="text-muted small mb-0">Features configured via environment variables</p>
+      </div>
+      <div class="card-body px-4 pb-4">
+        <table class="table table-sm mb-0">
+          <tbody>
+            {% for feat in features %}
+            <tr>
+              <td class="text-muted" style="width:55%">{{ feat.label }}</td>
+              <td class="text-end">
+                {% if feat.enabled %}
+                <span class="badge bg-success bg-opacity-10 text-success">Enabled</span>
+                {% else %}
+                <span class="badge bg-secondary bg-opacity-10 text-secondary">Disabled</span>
+                {% endif %}
+              </td>
+            </tr>
+            {% endfor %}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="row g-4 mb-4">
+  <div class="col-lg-6">
+    <div class="card shadow-sm border-0" style="border-radius: 1rem;">
+      <div class="card-header bg-transparent border-0 pt-4 pb-0 px-4">
+        <div class="d-flex justify-content-between align-items-start">
+          <div>
+            <h5 class="fw-semibold d-flex align-items-center gap-2 mb-1">
+              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="text-primary" viewBox="0 0 16 16">
+                <path d="M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1H2.5zm3 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5zM8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 5zm3 .5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 1 0z"/>
+              </svg>
+              Garbage Collection
+            </h5>
+            <p class="text-muted small mb-0">Clean up temporary files, orphaned uploads, and stale locks</p>
+          </div>
+          <div>
+            {% if gc_status.enabled %}
+            <span class="badge bg-success bg-opacity-10 text-success">Active</span>
+            {% else %}
+            <span class="badge bg-secondary bg-opacity-10 text-secondary">Disabled</span>
+            {% endif %}
+          </div>
+        </div>
+      </div>
+      <div class="card-body px-4 pb-4">
+        {% if gc_status.enabled %}
+        <div class="d-flex gap-2 mb-3">
+          <button class="btn btn-primary btn-sm d-inline-flex align-items-center" id="gcRunBtn" onclick="runGC(false)">
+            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="me-1 flex-shrink-0" viewBox="0 0 16 16">
+              <path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z"/>
+              <path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z"/>
+            </svg>
+            Run Now
+          </button>
+          <button class="btn btn-outline-secondary btn-sm" id="gcDryRunBtn" onclick="runGC(true)">
+            Dry Run
+          </button>
+        </div>
+
+        <div id="gcScanningBanner" class="mb-3 {% if not gc_status.scanning %}d-none{% endif %}">
+          <div class="alert alert-info mb-0 small d-flex align-items-center gap-2">
+            <div class="spinner-border spinner-border-sm text-info" role="status"></div>
+            <span>GC in progress<span id="gcScanElapsed"></span></span>
+          </div>
+        </div>
+
+        <div id="gcResult" class="mb-3 d-none">
+          <div class="alert mb-0 small" id="gcResultAlert">
+            <div class="d-flex justify-content-between align-items-start">
+              <div class="fw-semibold mb-1" id="gcResultTitle"></div>
+              <button type="button" class="btn-close btn-close-sm" style="font-size:0.65rem" onclick="document.getElementById('gcResult').classList.add('d-none')"></button>
+            </div>
+            <div id="gcResultBody"></div>
+          </div>
+        </div>
+
+        <div class="border rounded p-3 mb-3" style="background: var(--bs-tertiary-bg, #f8f9fa);">
+          <div class="d-flex align-items-center gap-2 mb-2">
+            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="text-muted" viewBox="0 0 16 16">
+              <path d="M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872l-.1-.34zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z"/>
+            </svg>
+            <span class="small fw-semibold text-muted">Configuration</span>
+          </div>
+          <div class="row small">
+            <div class="col-6 mb-1"><span class="text-muted">Interval:</span> {{ gc_status.interval_hours }}h</div>
+            <div class="col-6 mb-1"><span class="text-muted">Dry run:</span> {% if gc_status.dry_run %}Yes{% else %}No{% endif %}</div>
+            <div class="col-6 mb-1"><span class="text-muted">Temp max age:</span> {{ gc_status.temp_file_max_age_hours }}h</div>
+            <div class="col-6 mb-1"><span class="text-muted">Lock max age:</span> {{ gc_status.lock_file_max_age_hours }}h</div>
+            <div class="col-6"><span class="text-muted">Multipart max age:</span> {{ gc_status.multipart_max_age_days }}d</div>
+          </div>
+        </div>
+
+        <div id="gcHistoryContainer">
+        {% if gc_history %}
+        <h6 class="fw-semibold small text-muted mb-2 d-flex align-items-center gap-2">
+          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 16 16">
+            <path d="M8.515 1.019A7 7 0 0 0 8 1V0a8 8 0 0 1 .589.022l-.074.997zm2.004.45a7.003 7.003 0 0 0-.985-.299l.219-.976c.383.086.76.2 1.126.342l-.36.933zm1.37.71a7.01 7.01 0 0 0-.439-.27l.493-.87a8.025 8.025 0 0 1 .979.654l-.615.789a6.996 6.996 0 0 0-.418-.302zm1.834 1.79a6.99 6.99 0 0 0-.653-.796l.724-.69c.27.285.52.59.747.91l-.818.576zm.744 1.352a7.08 7.08 0 0 0-.214-.468l.893-.45a7.976 7.976 0 0 1 .45 1.088l-.95.313a7.023 7.023 0 0 0-.179-.483zm.53 2.507a6.991 6.991 0 0 0-.1-1.025l.985-.17c.067.386.106.778.116 1.17l-1 .025zm-.131 1.538c.033-.17.06-.339.081-.51l.993.123a7.957 7.957 0 0 1-.23 1.155l-.964-.267c.046-.165.086-.332.12-.501zm-.952 2.379c.184-.29.346-.594.486-.908l.914.405c-.16.36-.345.706-.555 1.038l-.845-.535zm-.964 1.205c.122-.122.239-.248.35-.378l.758.653a8.073 8.073 0 0 1-.401.432l-.707-.707z"/>
+            <path d="M8 1a7 7 0 1 0 4.95 11.95l.707.707A8.001 8.001 0 1 1 8 0v1z"/>
+            <path d="M7.5 3a.5.5 0 0 1 .5.5v5.21l3.248 1.856a.5.5 0 0 1-.496.868l-3.5-2A.5.5 0 0 1 7 8V3.5a.5.5 0 0 1 .5-.5z"/>
+          </svg>
+          Recent Executions
+        </h6>
+        <div class="table-responsive">
+          <table class="table table-sm small mb-0">
+            <thead class="table-light">
+              <tr>
+                <th>Time</th>
+                <th class="text-center">Cleaned</th>
+                <th class="text-center">Freed</th>
+                <th class="text-center">Mode</th>
+              </tr>
+            </thead>
+            <tbody>
+              {% for exec in gc_history %}
+              <tr>
+                <td class="text-nowrap">{{ exec.timestamp_display }}</td>
+                <td class="text-center">
+                  {% set r = exec.result %}
+                  {% set t1 = r.temp_files_deleted | default(value=0) %}
+                  {% set t2 = r.multipart_uploads_deleted | default(value=0) %}
+                  {% set t3 = r.lock_files_deleted | default(value=0) %}
+                  {% set t4 = r.orphaned_metadata_deleted | default(value=0) %}
+                  {% set t5 = r.orphaned_versions_deleted | default(value=0) %}
+                  {% set t6 = r.empty_dirs_removed | default(value=0) %}
+                  {{ t1 + t2 + t3 + t4 + t5 + t6 }}
+                </td>
+                <td class="text-center">{{ exec.bytes_freed_display }}</td>
+                <td class="text-center">
+                  {% if exec.dry_run %}
+                  <span class="badge bg-warning bg-opacity-10 text-warning">Dry run</span>
+                  {% else %}
+                  <span class="badge bg-primary bg-opacity-10 text-primary">Live</span>
+                  {% endif %}
+                </td>
+              </tr>
+              {% endfor %}
+            </tbody>
+          </table>
+        </div>
+        {% else %}
+        <div class="text-center py-2">
+          <p class="text-muted small mb-0">No executions recorded yet.</p>
+        </div>
+        {% endif %}
+        </div>
+
+        {% else %}
+        <div class="text-center py-4">
+          <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="currentColor" class="text-muted mb-2 opacity-50" viewBox="0 0 16 16">
+            <path d="M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1H2.5zm3 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5zM8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 5zm3 .5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 1 0z"/>
+          </svg>
+          <p class="text-muted mb-1">Garbage collection is not enabled.</p>
+          <p class="text-muted small mb-0">Set <code>GC_ENABLED=true</code> to enable automatic cleanup.</p>
+        </div>
+        {% endif %}
+      </div>
+    </div>
+  </div>
+
+  <div class="col-lg-6">
+    <div class="card shadow-sm border-0" style="border-radius: 1rem;">
+      <div class="card-header bg-transparent border-0 pt-4 pb-0 px-4">
+        <div class="d-flex justify-content-between align-items-start">
+          <div>
+            <h5 class="fw-semibold d-flex align-items-center gap-2 mb-1">
+              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="text-primary" viewBox="0 0 16 16">
+                <path d="M5.338 1.59a61.44 61.44 0 0 0-2.837.856.481.481 0 0 0-.328.39c-.554 4.157.726 7.19 2.253 9.188a10.725 10.725 0 0 0 2.287 2.233c.346.244.652.42.893.533.12.057.218.095.293.118a.55.55 0 0 0 .101.025.615.615 0 0 0 .1-.025c.076-.023.174-.061.294-.118.24-.113.547-.29.893-.533a10.726 10.726 0 0 0 2.287-2.233c1.527-1.997 2.807-5.031 2.253-9.188a.48.48 0 0 0-.328-.39c-.651-.213-1.75-.56-2.837-.855C9.552 1.29 8.531 1.067 8 1.067c-.53 0-1.552.223-2.662.524zM5.072.56C6.157.265 7.31 0 8 0s1.843.265 2.928.56c1.11.3 2.229.655 2.887.87a1.54 1.54 0 0 1 1.044 1.262c.596 4.477-.787 7.795-2.465 9.99a11.775 11.775 0 0 1-2.517 2.453 7.159 7.159 0 0 1-1.048.625c-.28.132-.581.24-.829.24s-.548-.108-.829-.24a7.158 7.158 0 0 1-1.048-.625 11.777 11.777 0 0 1-2.517-2.453C1.928 10.487.545 7.169 1.141 2.692A1.54 1.54 0 0 1 2.185 1.43 62.456 62.456 0 0 1 5.072.56z"/>
+                <path d="M10.854 5.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 7.793l2.646-2.647a.5.5 0 0 1 .708 0z"/>
+              </svg>
+              Integrity Scanner
+            </h5>
+            <p class="text-muted small mb-0">Detect and heal corrupted objects, orphaned files, and metadata drift</p>
+          </div>
+          <div>
+            {% if integrity_status.enabled %}
+            <span class="badge bg-success bg-opacity-10 text-success">Active</span>
+            {% else %}
+            <span class="badge bg-secondary bg-opacity-10 text-secondary">Disabled</span>
+            {% endif %}
+          </div>
+        </div>
+      </div>
+      <div class="card-body px-4 pb-4">
+        {% if integrity_status.enabled %}
+        <div class="d-flex gap-2 flex-wrap mb-3">
+          <button class="btn btn-primary btn-sm d-inline-flex align-items-center" id="integrityRunBtn" onclick="runIntegrity(false, false)" {% if integrity_status.scanning %}disabled{% endif %}>
+            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="me-1 flex-shrink-0" viewBox="0 0 16 16">
+              <path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z"/>
+              <path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z"/>
+            </svg>
+            Scan Now
+          </button>
+          <button class="btn btn-outline-warning btn-sm" id="integrityHealBtn" onclick="runIntegrity(false, true)" {% if integrity_status.scanning %}disabled{% endif %}>
+            Scan &amp; Heal
+          </button>
+          <button class="btn btn-outline-secondary btn-sm" id="integrityDryRunBtn" onclick="runIntegrity(true, false)" {% if integrity_status.scanning %}disabled{% endif %}>
+            Dry Run
+          </button>
+        </div>
+
+        <div id="integrityScanningBanner" class="mb-3 {% if not integrity_status.scanning %}d-none{% endif %}">
+          <div class="alert alert-info mb-0 small d-flex align-items-center gap-2">
+            <div class="spinner-border spinner-border-sm text-info" role="status"></div>
+            <span>Scan in progress<span id="integrityScanElapsed"></span></span>
+          </div>
+        </div>
+
+        <div id="integrityResult" class="mb-3 d-none">
+          <div class="alert mb-0 small" id="integrityResultAlert">
+            <div class="d-flex justify-content-between align-items-start">
+              <div class="fw-semibold mb-1" id="integrityResultTitle"></div>
+              <button type="button" class="btn-close btn-close-sm" style="font-size:0.65rem" onclick="document.getElementById('integrityResult').classList.add('d-none')"></button>
+            </div>
+            <div id="integrityResultBody"></div>
+          </div>
+        </div>
+
+        <div class="border rounded p-3 mb-3" style="background: var(--bs-tertiary-bg, #f8f9fa);">
+          <div class="d-flex align-items-center gap-2 mb-2">
+            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="text-muted" viewBox="0 0 16 16">
+              <path d="M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872l-.1-.34zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z"/>
+            </svg>
+            <span class="small fw-semibold text-muted">Configuration</span>
+          </div>
+          <div class="row small">
+            <div class="col-6 mb-1"><span class="text-muted">Interval:</span> {{ integrity_status.interval_hours }}h</div>
+            <div class="col-6 mb-1"><span class="text-muted">Dry run:</span> {% if integrity_status.dry_run %}Yes{% else %}No{% endif %}</div>
+            <div class="col-6"><span class="text-muted">Batch size:</span> {{ integrity_status.batch_size }}</div>
+            <div class="col-6"><span class="text-muted">Auto-heal:</span> {% if integrity_status.auto_heal %}Yes{% else %}No{% endif %}</div>
+          </div>
+        </div>
+
+        <div id="integrityHistoryContainer">
+        {% if integrity_history %}
+        <h6 class="fw-semibold small text-muted mb-2 d-flex align-items-center gap-2">
+          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 16 16">
+            <path d="M8.515 1.019A7 7 0 0 0 8 1V0a8 8 0 0 1 .589.022l-.074.997zm2.004.45a7.003 7.003 0 0 0-.985-.299l.219-.976c.383.086.76.2 1.126.342l-.36.933zm1.37.71a7.01 7.01 0 0 0-.439-.27l.493-.87a8.025 8.025 0 0 1 .979.654l-.615.789a6.996 6.996 0 0 0-.418-.302zm1.834 1.79a6.99 6.99 0 0 0-.653-.796l.724-.69c.27.285.52.59.747.91l-.818.576zm.744 1.352a7.08 7.08 0 0 0-.214-.468l.893-.45a7.976 7.976 0 0 1 .45 1.088l-.95.313a7.023 7.023 0 0 0-.179-.483zm.53 2.507a6.991 6.991 0 0 0-.1-1.025l.985-.17c.067.386.106.778.116 1.17l-1 .025zm-.131 1.538c.033-.17.06-.339.081-.51l.993.123a7.957 7.957 0 0 1-.23 1.155l-.964-.267c.046-.165.086-.332.12-.501zm-.952 2.379c.184-.29.346-.594.486-.908l.914.405c-.16.36-.345.706-.555 1.038l-.845-.535zm-.964 1.205c.122-.122.239-.248.35-.378l.758.653a8.073 8.073 0 0 1-.401.432l-.707-.707z"/>
+            <path d="M8 1a7 7 0 1 0 4.95 11.95l.707.707A8.001 8.001 0 1 1 8 0v1z"/>
+            <path d="M7.5 3a.5.5 0 0 1 .5.5v5.21l3.248 1.856a.5.5 0 0 1-.496.868l-3.5-2A.5.5 0 0 1 7 8V3.5a.5.5 0 0 1 .5-.5z"/>
+          </svg>
+          Recent Scans
+        </h6>
+        <div class="table-responsive">
+          <table class="table table-sm small mb-0">
+            <thead class="table-light">
+              <tr>
+                <th>Time</th>
+                <th class="text-center">Scanned</th>
+                <th class="text-center">Issues</th>
+                <th class="text-center">Healed</th>
+                <th class="text-center">Mode</th>
+              </tr>
+            </thead>
+            <tbody>
+              {% for exec in integrity_history %}
+              <tr>
+                <td class="text-nowrap">{{ exec.timestamp_display }}</td>
+                <td class="text-center">{{ exec.result.objects_scanned| default(value=0) }}</td>
+                <td class="text-center">
+                  {% set i1 = exec.result.corrupted_objects | default(value=0) %}
+                  {% set i2 = exec.result.orphaned_objects | default(value=0) %}
+                  {% set i3 = exec.result.phantom_metadata | default(value=0) %}
+                  {% set i4 = exec.result.stale_versions | default(value=0) %}
+                  {% set i5 = exec.result.etag_cache_inconsistencies | default(value=0) %}
+                  {% set i6 = exec.result.legacy_metadata_drifts | default(value=0) %}
+                  {% set total_issues = i1 + i2 + i3 + i4 + i5 + i6 %}
+                  {% if total_issues > 0 %}
+                  <span class="text-danger fw-medium">{{ total_issues }}</span>
+                  {% else %}
+                  <span class="text-success">0</span>
+                  {% endif %}
+                </td>
+                <td class="text-center">{{ exec.result.issues_healed| default(value=0) }}</td>
+                <td class="text-center">
+                  {% if exec.dry_run %}
+                  <span class="badge bg-warning bg-opacity-10 text-warning">Dry</span>
+                  {% elif exec.auto_heal %}
+                  <span class="badge bg-success bg-opacity-10 text-success">Heal</span>
+                  {% else %}
+                  <span class="badge bg-primary bg-opacity-10 text-primary">Scan</span>
+                  {% endif %}
+                </td>
+              </tr>
+              {% endfor %}
+            </tbody>
+          </table>
+        </div>
+        {% else %}
+        <div class="text-center py-2">
+          <p class="text-muted small mb-0">No scans recorded yet.</p>
+        </div>
+        {% endif %}
+        </div>
+
+        {% else %}
+        <div class="text-center py-4">
+          <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="currentColor" class="text-muted mb-2 opacity-50" viewBox="0 0 16 16">
+            <path d="M5.338 1.59a61.44 61.44 0 0 0-2.837.856.481.481 0 0 0-.328.39c-.554 4.157.726 7.19 2.253 9.188a10.725 10.725 0 0 0 2.287 2.233c.346.244.652.42.893.533.12.057.218.095.293.118a.55.55 0 0 0 .101.025.615.615 0 0 0 .1-.025c.076-.023.174-.061.294-.118.24-.113.547-.29.893-.533a10.726 10.726 0 0 0 2.287-2.233c1.527-1.997 2.807-5.031 2.253-9.188a.48.48 0 0 0-.328-.39c-.651-.213-1.75-.56-2.837-.855C9.552 1.29 8.531 1.067 8 1.067c-.53 0-1.552.223-2.662.524zM5.072.56C6.157.265 7.31 0 8 0s1.843.265 2.928.56c1.11.3 2.229.655 2.887.87a1.54 1.54 0 0 1 1.044 1.262c.596 4.477-.787 7.795-2.465 9.99a11.775 11.775 0 0 1-2.517 2.453 7.159 7.159 0 0 1-1.048.625c-.28.132-.581.24-.829.24s-.548-.108-.829-.24a7.158 7.158 0 0 1-1.048-.625 11.777 11.777 0 0 1-2.517-2.453C1.928 10.487.545 7.169 1.141 2.692A1.54 1.54 0 0 1 2.185 1.43 62.456 62.456 0 0 1 5.072.56z"/>
+            <path d="M10.854 5.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 7.793l2.646-2.647a.5.5 0 0 1 .708 0z"/>
+          </svg>
+          <p class="text-muted mb-1">Integrity scanner is not enabled.</p>
+          <p class="text-muted small mb-0">Set <code>INTEGRITY_ENABLED=true</code> to enable automatic scanning.</p>
+        </div>
+        {% endif %}
+      </div>
+    </div>
+  </div>
+</div>
+{% endblock %}
+
+{% block extra_scripts %}
+<script>
+(function () {
+  var csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';
+
+  function setLoading(btnId, loading, spinnerOnly) {
+    var btn = document.getElementById(btnId);
+    if (!btn) return;
+    btn.disabled = loading;
+    if (loading && !spinnerOnly) {
+      btn.dataset.originalHtml = btn.innerHTML;
+      btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1" role="status"></span>Running...';
+    } else if (!loading && btn.dataset.originalHtml) {
+      btn.innerHTML = btn.dataset.originalHtml;
+    }
+  }
+
+  function formatBytes(bytes) {
+    if (!bytes || bytes === 0) return '0 B';
+    var units = ['B', 'KB', 'MB', 'GB'];
+    var i = 0;
+    var b = bytes;
+    while (b >= 1024 && i < units.length - 1) { b /= 1024; i++; }
+    return (i === 0 ? b : b.toFixed(1)) + ' ' + units[i];
+  }
+
+  var _displayTimezone = {{ display_timezone| json_encode | safe }};
+
+  function formatTimestamp(ts) {
+    var d = new Date(ts * 1000);
+    try {
+      var opts = {year: 'numeric', month: 'short', day: '2-digit', hour: '2-digit', minute: '2-digit', hour12: false, timeZone: _displayTimezone, timeZoneName: 'short'};
+      return d.toLocaleString('en-US', opts);
+    } catch (e) {
+      var pad = function (n) { return n < 10 ? '0' + n : '' + n; };
+      return d.getUTCFullYear() + '-' + pad(d.getUTCMonth() + 1) + '-' + pad(d.getUTCDate()) +
+             ' ' + pad(d.getUTCHours()) + ':' + pad(d.getUTCMinutes()) + ' UTC';
+    }
+  }
+
+  var _gcHistoryIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 16 16">' +
+    '<path d="M8.515 1.019A7 7 0 0 0 8 1V0a8 8 0 0 1 .589.022l-.074.997zm2.004.45a7.003 7.003 0 0 0-.985-.299l.219-.976c.383.086.76.2 1.126.342l-.36.933zm1.37.71a7.01 7.01 0 0 0-.439-.27l.493-.87a8.025 8.025 0 0 1 .979.654l-.615.789a6.996 6.996 0 0 0-.418-.302zm1.834 1.79a6.99 6.99 0 0 0-.653-.796l.724-.69c.27.285.52.59.747.91l-.818.576zm.744 1.352a7.08 7.08 0 0 0-.214-.468l.893-.45a7.976 7.976 0 0 1 .45 1.088l-.95.313a7.023 7.023 0 0 0-.179-.483zm.53 2.507a6.991 6.991 0 0 0-.1-1.025l.985-.17c.067.386.106.778.116 1.17l-1 .025zm-.131 1.538c.033-.17.06-.339.081-.51l.993.123a7.957 7.957 0 0 1-.23 1.155l-.964-.267c.046-.165.086-.332.12-.501zm-.952 2.379c.184-.29.346-.594.486-.908l.914.405c-.16.36-.345.706-.555 1.038l-.845-.535zm-.964 1.205c.122-.122.239-.248.35-.378l.758.653a8.073 8.073 0 0 1-.401.432l-.707-.707z"/>' +
+    '<path d="M8 1a7 7 0 1 0 4.95 11.95l.707.707A8.001 8.001 0 1 1 8 0v1z"/>' +
+    '<path d="M7.5 3a.5.5 0 0 1 .5.5v5.21l3.248 1.856a.5.5 0 0 1-.496.868l-3.5-2A.5.5 0 0 1 7 8V3.5a.5.5 0 0 1 .5-.5z"/></svg>';
+
+  function _gcRefreshHistory() {
+    fetch('{{ url_for(endpoint="ui.system_gc_history") }}?limit=10', {
+      headers: {'X-CSRFToken': csrfToken}
+    })
+    .then(function (r) { return r.json(); })
+    .then(function (hist) {
+      var container = document.getElementById('gcHistoryContainer');
+      if (!container) return;
+      var execs = hist.executions || [];
+      if (execs.length === 0) {
+        container.innerHTML = '<div class="text-center py-2"><p class="text-muted small mb-0">No executions recorded yet.</p></div>';
+        return;
+      }
+      var html = '<h6 class="fw-semibold small text-muted mb-2 d-flex align-items-center gap-2">' +
+        _gcHistoryIcon + ' Recent Executions</h6>' +
+        '<div class="table-responsive"><table class="table table-sm small mb-0">' +
+        '<thead class="table-light"><tr><th>Time</th><th class="text-center">Cleaned</th>' +
+        '<th class="text-center">Freed</th><th class="text-center">Mode</th></tr></thead><tbody>';
+      execs.forEach(function (exec) {
+        var r = exec.result || {};
+        var cleaned = (r.temp_files_deleted || 0) + (r.multipart_uploads_deleted || 0) +
+          (r.lock_files_deleted || 0) + (r.orphaned_metadata_deleted || 0) +
+          (r.orphaned_versions_deleted || 0) + (r.empty_dirs_removed || 0);
+        var freed = (r.temp_bytes_freed || 0) + (r.multipart_bytes_freed || 0) +
+          (r.orphaned_version_bytes_freed || 0);
+        var mode = exec.dry_run
+          ? '<span class="badge bg-warning bg-opacity-10 text-warning">Dry run</span>'
+          : '<span class="badge bg-primary bg-opacity-10 text-primary">Live</span>';
+        html += '<tr><td class="text-nowrap">' + formatTimestamp(exec.timestamp) + '</td>' +
+          '<td class="text-center">' + cleaned + '</td>' +
+          '<td class="text-center">' + formatBytes(freed) + '</td>' +
+          '<td class="text-center">' + mode + '</td></tr>';
+      });
+      html += '</tbody></table></div>';
+      container.innerHTML = html;
+    })
+    .catch(function () {});
+  }
+
+  function _integrityRefreshHistory() {
+    fetch('{{ url_for(endpoint="ui.system_integrity_history") }}?limit=10', {
+      headers: {'X-CSRFToken': csrfToken}
+    })
+    .then(function (r) { return r.json(); })
+    .then(function (hist) {
+      var container = document.getElementById('integrityHistoryContainer');
+      if (!container) return;
+      var execs = hist.executions || [];
+      if (execs.length === 0) {
+        container.innerHTML = '<div class="text-center py-2"><p class="text-muted small mb-0">No scans recorded yet.</p></div>';
+        return;
+      }
+      var html = '<h6 class="fw-semibold small text-muted mb-2 d-flex align-items-center gap-2">' +
+        _gcHistoryIcon + ' Recent Scans</h6>' +
+        '<div class="table-responsive"><table class="table table-sm small mb-0">' +
+        '<thead class="table-light"><tr><th>Time</th><th class="text-center">Scanned</th>' +
+        '<th class="text-center">Issues</th><th class="text-center">Healed</th>' +
+        '<th class="text-center">Mode</th></tr></thead><tbody>';
+      execs.forEach(function (exec) {
+        var r = exec.result || {};
+        var issues = (r.corrupted_objects || 0) + (r.orphaned_objects || 0) +
+          (r.phantom_metadata || 0) + (r.stale_versions || 0) +
+          (r.etag_cache_inconsistencies || 0) + (r.legacy_metadata_drifts || 0);
+        var issueHtml = issues > 0
+          ? '<span class="text-danger fw-medium">' + issues + '</span>'
+          : '<span class="text-success">0</span>';
+        var mode = exec.dry_run
+          ? '<span class="badge bg-warning bg-opacity-10 text-warning">Dry</span>'
+          : (exec.auto_heal
+            ? '<span class="badge bg-success bg-opacity-10 text-success">Heal</span>'
+            : '<span class="badge bg-primary bg-opacity-10 text-primary">Scan</span>');
+        html += '<tr><td class="text-nowrap">' + formatTimestamp(exec.timestamp) + '</td>' +
+          '<td class="text-center">' + (r.objects_scanned || 0) + '</td>' +
+          '<td class="text-center">' + issueHtml + '</td>' +
+          '<td class="text-center">' + (r.issues_healed || 0) + '</td>' +
+          '<td class="text-center">' + mode + '</td></tr>';
+      });
+      html += '</tbody></table></div>';
+      container.innerHTML = html;
+    })
+    .catch(function () {});
+  }
+
+  var _gcPollTimer = null;
+  var _gcLastDryRun = false;
+
+  function _gcSetScanning(scanning) {
+    var banner = document.getElementById('gcScanningBanner');
+    var btns = ['gcRunBtn', 'gcDryRunBtn'];
+    if (scanning) {
+      banner.classList.remove('d-none');
+      btns.forEach(function (id) {
+        var el = document.getElementById(id);
+        if (el) el.disabled = true;
+      });
+    } else {
+      banner.classList.add('d-none');
+      document.getElementById('gcScanElapsed').textContent = '';
+      btns.forEach(function (id) {
+        var el = document.getElementById(id);
+        if (el) el.disabled = false;
+      });
+    }
+  }
+
+  function _gcShowResult(data, dryRun) {
+    var container = document.getElementById('gcResult');
+    var alert = document.getElementById('gcResultAlert');
+    var title = document.getElementById('gcResultTitle');
+    var body = document.getElementById('gcResultBody');
+    container.classList.remove('d-none');
+
+    var totalItems = (data.temp_files_deleted || 0) + (data.multipart_uploads_deleted || 0) +
+                      (data.lock_files_deleted || 0) + (data.orphaned_metadata_deleted || 0) +
+                      (data.orphaned_versions_deleted || 0) + (data.empty_dirs_removed || 0);
+    var totalFreed = (data.temp_bytes_freed || 0) + (data.multipart_bytes_freed || 0) +
+                     (data.orphaned_version_bytes_freed || 0);
+
+    alert.className = totalItems > 0 ? 'alert alert-success mb-0 small' : 'alert alert-info mb-0 small';
+    title.textContent = (dryRun ? '[Dry Run] ' : '') + 'Completed in ' + (data.execution_time_seconds || 0).toFixed(2) + 's';
+
+    var lines = [];
+    if (data.temp_files_deleted) lines.push('Temp files: ' + data.temp_files_deleted + ' (' + formatBytes(data.temp_bytes_freed) + ')');
+    if (data.multipart_uploads_deleted) lines.push('Multipart uploads: ' + data.multipart_uploads_deleted + ' (' + formatBytes(data.multipart_bytes_freed) + ')');
+    if (data.lock_files_deleted) lines.push('Lock files: ' + data.lock_files_deleted);
+    if (data.orphaned_metadata_deleted) lines.push('Orphaned metadata: ' + data.orphaned_metadata_deleted);
+    if (data.orphaned_versions_deleted) lines.push('Orphaned versions: ' + data.orphaned_versions_deleted + ' (' + formatBytes(data.orphaned_version_bytes_freed) + ')');
+    if (data.empty_dirs_removed) lines.push('Empty directories: ' + data.empty_dirs_removed);
+    if (totalItems === 0) lines.push('Nothing to clean up.');
+    if (totalFreed > 0) lines.push('Total freed: ' + formatBytes(totalFreed));
+    if (data.errors && data.errors.length > 0) lines.push('Errors: ' + data.errors.join(', '));
+
+    body.innerHTML = lines.join('<br>');
+  }
+
+  function _gcPoll() {
+    fetch('{{ url_for(endpoint="ui.system_gc_status") }}', {
+      headers: {'X-CSRFToken': csrfToken}
+    })
+    .then(function (r) { return r.json(); })
+    .then(function (status) {
+      if (status.scanning) {
+        var elapsed = status.scan_elapsed_seconds || 0;
+        document.getElementById('gcScanElapsed').textContent = ' (' + elapsed.toFixed(0) + 's)';
+        _gcPollTimer = setTimeout(_gcPoll, 2000);
+      } else {
+        _gcSetScanning(false);
+        _gcRefreshHistory();
+        fetch('{{ url_for(endpoint="ui.system_gc_history") }}?limit=1', {
+          headers: {'X-CSRFToken': csrfToken}
+        })
+        .then(function (r) { return r.json(); })
+        .then(function (hist) {
+          if (hist.executions && hist.executions.length > 0) {
+            var latest = hist.executions[0];
+            _gcShowResult(latest.result, latest.dry_run);
+          }
+        })
+        .catch(function () {});
+      }
+    })
+    .catch(function () {
+      _gcPollTimer = setTimeout(_gcPoll, 3000);
+    });
+  }
+
+  window.runGC = function (dryRun) {
+    _gcLastDryRun = dryRun;
+    document.getElementById('gcResult').classList.add('d-none');
+    _gcSetScanning(true);
+
+    fetch('{{ url_for(endpoint="ui.system_gc_run") }}', {
+      method: 'POST',
+      headers: {'Content-Type': 'application/json', 'X-CSRFToken': csrfToken},
+      body: JSON.stringify({dry_run: dryRun})
+    })
+    .then(function (r) { return r.json(); })
+    .then(function (data) {
+      if (data.error) {
+        _gcSetScanning(false);
+        var container = document.getElementById('gcResult');
+        var alert = document.getElementById('gcResultAlert');
+        var title = document.getElementById('gcResultTitle');
+        var body = document.getElementById('gcResultBody');
+        container.classList.remove('d-none');
+        alert.className = 'alert alert-danger mb-0 small';
+        title.textContent = 'Error';
+        body.textContent = data.error;
+        return;
+      }
+      _gcPollTimer = setTimeout(_gcPoll, 2000);
+    })
+    .catch(function (err) {
+      _gcSetScanning(false);
+      var container = document.getElementById('gcResult');
+      var alert = document.getElementById('gcResultAlert');
+      var title = document.getElementById('gcResultTitle');
+      var body = document.getElementById('gcResultBody');
+      container.classList.remove('d-none');
+      alert.className = 'alert alert-danger mb-0 small';
+      title.textContent = 'Error';
+      body.textContent = err.message;
+    });
+  };
+
+  {% if gc_status.scanning %}
+  _gcSetScanning(true);
+  _gcPollTimer = setTimeout(_gcPoll, 2000);
+  {% endif %}
+
+  var _integrityPollTimer = null;
+  var _integrityLastMode = {dryRun: false, autoHeal: false};
+
+  function _integritySetScanning(scanning) {
+    var banner = document.getElementById('integrityScanningBanner');
+    var btns = ['integrityRunBtn', 'integrityHealBtn', 'integrityDryRunBtn'];
+    if (scanning) {
+      banner.classList.remove('d-none');
+      btns.forEach(function (id) {
+        var el = document.getElementById(id);
+        if (el) el.disabled = true;
+      });
+    } else {
+      banner.classList.add('d-none');
+      document.getElementById('integrityScanElapsed').textContent = '';
+      btns.forEach(function (id) {
+        var el = document.getElementById(id);
+        if (el) el.disabled = false;
+      });
+    }
+  }
+
+  function _integrityShowResult(data, dryRun, autoHeal) {
+    var container = document.getElementById('integrityResult');
+    var alert = document.getElementById('integrityResultAlert');
+    var title = document.getElementById('integrityResultTitle');
+    var body = document.getElementById('integrityResultBody');
+    container.classList.remove('d-none');
+
+    var totalIssues = (data.corrupted_objects || 0) + (data.orphaned_objects || 0) +
+                       (data.phantom_metadata || 0) + (data.stale_versions || 0) +
+                       (data.etag_cache_inconsistencies || 0) + (data.legacy_metadata_drifts || 0);
+
+    var prefix = dryRun ? '[Dry Run] ' : (autoHeal ? '[Heal] ' : '');
+    alert.className = totalIssues > 0 ? 'alert alert-warning mb-0 small' : 'alert alert-success mb-0 small';
+    title.textContent = prefix + 'Completed in ' + (data.execution_time_seconds || 0).toFixed(2) + 's';
+
+    var lines = [];
+    lines.push('Scanned: ' + (data.objects_scanned || 0) + ' objects in ' + (data.buckets_scanned || 0) + ' buckets');
+    if (totalIssues === 0) {
+      lines.push('No issues found.');
+    } else {
+      if (data.corrupted_objects) lines.push('Corrupted objects: ' + data.corrupted_objects);
+      if (data.orphaned_objects) lines.push('Orphaned objects: ' + data.orphaned_objects);
+      if (data.phantom_metadata) lines.push('Phantom metadata: ' + data.phantom_metadata);
+      if (data.stale_versions) lines.push('Stale versions: ' + data.stale_versions);
+      if (data.etag_cache_inconsistencies) lines.push('ETag inconsistencies: ' + data.etag_cache_inconsistencies);
+      if (data.legacy_metadata_drifts) lines.push('Legacy metadata drifts: ' + data.legacy_metadata_drifts);
+      if (data.issues_healed) lines.push('Issues healed: ' + data.issues_healed);
+    }
+    if (data.errors && data.errors.length > 0) lines.push('Errors: ' + data.errors.join(', '));
+
+    body.innerHTML = lines.join('<br>');
+  }
+
+  function _integrityPoll() {
+    fetch('{{ url_for(endpoint="ui.system_integrity_status") }}', {
+      headers: {'X-CSRFToken': csrfToken}
+    })
+    .then(function (r) { return r.json(); })
+    .then(function (status) {
+      if (status.scanning) {
+        var elapsed = status.scan_elapsed_seconds || 0;
+        document.getElementById('integrityScanElapsed').textContent = ' (' + elapsed.toFixed(0) + 's)';
+        _integrityPollTimer = setTimeout(_integrityPoll, 2000);
+      } else {
+        _integritySetScanning(false);
+        _integrityRefreshHistory();
+        fetch('{{ url_for(endpoint="ui.system_integrity_history") }}?limit=1', {
+          headers: {'X-CSRFToken': csrfToken}
+        })
+        .then(function (r) { return r.json(); })
+        .then(function (hist) {
+          if (hist.executions && hist.executions.length > 0) {
+            var latest = hist.executions[0];
+            _integrityShowResult(latest.result, latest.dry_run, latest.auto_heal);
+          }
+        })
+        .catch(function () {});
+      }
+    })
+    .catch(function () {
+      _integrityPollTimer = setTimeout(_integrityPoll, 3000);
+    });
+  }
+
+  window.runIntegrity = function (dryRun, autoHeal) {
+    _integrityLastMode = {dryRun: dryRun, autoHeal: autoHeal};
+    document.getElementById('integrityResult').classList.add('d-none');
+    _integritySetScanning(true);
+
+    fetch('{{ url_for(endpoint="ui.system_integrity_run") }}', {
+      method: 'POST',
+      headers: {'Content-Type': 'application/json', 'X-CSRFToken': csrfToken},
+      body: JSON.stringify({dry_run: dryRun, auto_heal: autoHeal})
+    })
+    .then(function (r) { return r.json(); })
+    .then(function (data) {
+      if (data.error) {
+        _integritySetScanning(false);
+        var container = document.getElementById('integrityResult');
+        var alert = document.getElementById('integrityResultAlert');
+        var title = document.getElementById('integrityResultTitle');
+        var body = document.getElementById('integrityResultBody');
+        container.classList.remove('d-none');
+        alert.className = 'alert alert-danger mb-0 small';
+        title.textContent = 'Error';
+        body.textContent = data.error;
+        return;
+      }
+      _integrityPollTimer = setTimeout(_integrityPoll, 2000);
+    })
+    .catch(function (err) {
+      _integritySetScanning(false);
+      var container = document.getElementById('integrityResult');
+      var alert = document.getElementById('integrityResultAlert');
+      var title = document.getElementById('integrityResultTitle');
+      var body = document.getElementById('integrityResultBody');
+      container.classList.remove('d-none');
+      alert.className = 'alert alert-danger mb-0 small';
+      title.textContent = 'Error';
+      body.textContent = err.message;
+    });
+  };
+
+  {% if integrity_status.scanning %}
+  _integritySetScanning(true);
+  _integrityPollTimer = setTimeout(_integrityPoll, 2000);
+  {% endif %}
+})();
+</script>
+{% endblock %}

rust/myfsio-engine/crates/myfsio-server/templates/website_domains.html

@@ -0,0 +1,367 @@
+{% extends "base.html" %}
+
+{% block title %}Website Domains - MyFSIO Console{% endblock %}
+
+{% block content %}
+<div class="page-header d-flex justify-content-between align-items-center mb-4">
+  <div>
+    <p class="text-uppercase text-muted small mb-1">Website Hosting</p>
+    <h1 class="h3 mb-1 d-flex align-items-center gap-2">
+      <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="currentColor" class="text-primary" viewBox="0 0 16 16">
+        <path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm7.5-6.923c-.67.204-1.335.82-1.887 1.855A7.97 7.97 0 0 0 5.145 4H7.5V1.077zM4.09 4a9.267 9.267 0 0 1 .64-1.539 6.7 6.7 0 0 1 .597-.933A7.025 7.025 0 0 0 2.255 4H4.09zm-.582 3.5c.03-.877.138-1.718.312-2.5H1.674a6.958 6.958 0 0 0-.656 2.5h2.49zM4.847 5a12.5 12.5 0 0 0-.338 2.5H7.5V5H4.847zM8.5 5v2.5h2.99a12.495 12.495 0 0 0-.337-2.5H8.5zM4.51 8.5a12.5 12.5 0 0 0 .337 2.5H7.5V8.5H4.51zm3.99 0V11h2.653c.187-.765.306-1.608.338-2.5H8.5zM5.145 12c.138.386.295.744.468 1.068.552 1.035 1.218 1.65 1.887 1.855V12H5.145zm.182 2.472a6.696 6.696 0 0 1-.597-.933A9.268 9.268 0 0 1 4.09 12H2.255a7.024 7.024 0 0 0 3.072 2.472zM3.82 11a13.652 13.652 0 0 1-.312-2.5h-2.49c.062.89.291 1.733.656 2.5H3.82zm6.853 3.472A7.024 7.024 0 0 0 13.745 12H11.91a9.27 9.27 0 0 1-.64 1.539 6.688 6.688 0 0 1-.597.933zM8.5 12v2.923c.67-.204 1.335-.82 1.887-1.855.173-.324.33-.682.468-1.068H8.5zm3.68-1h2.146c.365-.767.594-1.61.656-2.5h-2.49a13.65 13.65 0 0 1-.312 2.5zm2.802-3.5a6.959 6.959 0 0 0-.656-2.5H12.18c.174.782.282 1.623.312 2.5h2.49zM11.27 2.461c.247.464.462.98.64 1.539h1.835a7.024 7.024 0 0 0-3.072-2.472c.218.284.418.598.597.933zM10.855 4a7.966 7.966 0 0 0-.468-1.068C9.835 1.897 9.17 1.282 8.5 1.077V4h2.355z"/>
+      </svg>
+      Domain Mappings
+    </h1>
+    <p class="text-muted mb-0 mt-1">Map custom domains to buckets for static website hosting.</p>
+  </div>
+  <div class="d-none d-md-block">
+    <span class="badge bg-primary bg-opacity-10 text-primary fs-6 px-3 py-2">
+      {{ mappings|length }} mapping{% if mappings|length != 1 %}s{% else %}{% endif %}
+    </span>
+  </div>
+</div>
+
+<div class="row g-4">
+  <div class="col-lg-4 col-md-5">
+    <div class="card shadow-sm border-0" style="border-radius: 1rem;">
+      <div class="card-header bg-transparent border-0 pt-4 pb-0 px-4">
+        <h5 class="fw-semibold d-flex align-items-center gap-2 mb-1">
+          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="text-primary" viewBox="0 0 16 16">
+            <path fill-rule="evenodd" d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2Z"/>
+          </svg>
+          Add Domain Mapping
+        </h5>
+        <p class="text-muted small mb-0">Point a custom domain to a bucket</p>
+      </div>
+      <div class="card-body px-4 pb-4">
+        <form method="POST" action="{{ url_for(endpoint="ui.create_website_domain") }}" id="createDomainForm">
+          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
+          <div class="mb-3">
+            <label for="domain" class="form-label fw-medium">Domain</label>
+            <input type="text" class="form-control" id="domain" name="domain" required
+                   placeholder="www.example.com"
+                   pattern="^[a-zA-Z0-9]([a-zA-Z0-9\-]*[a-zA-Z0-9])?(\.[a-zA-Z0-9]([a-zA-Z0-9\-]*[a-zA-Z0-9])?)*$"
+                   title="Enter a valid hostname (e.g. www.example.com). Do not include http:// or trailing slashes.">
+            <div class="form-text">Hostname only &mdash; no <code>http://</code> prefix or trailing slash.</div>
+            <div class="invalid-feedback">Enter a valid hostname like www.example.com</div>
+          </div>
+          <div id="domainPreview" class="alert alert-light border small py-2 px-3 mb-3 d-none">
+            <span class="text-muted">Will be accessible at:</span>
+            <code id="domainPreviewUrl" class="ms-1"></code>
+          </div>
+          <div class="mb-3">
+            <label for="bucket" class="form-label fw-medium">Bucket</label>
+            {% if buckets %}
+            <select class="form-select" id="bucket" name="bucket" required>
+              <option value="" selected disabled>Select a bucket</option>
+              {% for b in buckets %}
+              <option value="{{ b }}">{{ b }}</option>
+              {% endfor %}
+            </select>
+            {% else %}
+            <input type="text" class="form-control" id="bucket" name="bucket" required placeholder="my-site-bucket">
+            {% endif %}
+            <div class="form-text">The bucket must have website hosting enabled.</div>
+          </div>
+          <div class="d-grid">
+            <button type="submit" class="btn btn-primary" id="addMappingBtn">
+              <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="me-1" viewBox="0 0 16 16">
+                <path fill-rule="evenodd" d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2Z"/>
+              </svg>
+              Add Mapping
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+
+    <div class="card shadow-sm border-0 mt-4" style="border-radius: 1rem;">
+      <div class="card-body px-4 py-3">
+        <h6 class="fw-semibold mb-2 d-flex align-items-center gap-2">
+          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="text-muted" viewBox="0 0 16 16">
+            <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
+          </svg>
+          How it works
+        </h6>
+        <ol class="small text-muted mb-0 ps-3">
+          <li class="mb-1">Enable website hosting on a bucket (Properties tab)</li>
+          <li class="mb-1">Create a domain mapping here</li>
+          <li>Point your DNS (A/CNAME) to this server</li>
+        </ol>
+      </div>
+    </div>
+  </div>
+
+  <div class="col-lg-8 col-md-7">
+    <div class="card shadow-sm border-0" style="border-radius: 1rem;">
+      <div class="card-header bg-transparent border-0 pt-4 pb-0 px-4">
+        <div class="d-flex justify-content-between align-items-center mb-1">
+          <h5 class="fw-semibold d-flex align-items-center gap-2 mb-0">
+            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="text-muted" viewBox="0 0 16 16">
+              <path d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.002 1.002 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z"/>
+              <path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243L6.586 4.672z"/>
+            </svg>
+            Active Mappings
+          </h5>
+        </div>
+        <p class="text-muted small mb-0">Domains currently serving website content</p>
+        {% if mappings|length > 3 %}
+        <div class="mt-3">
+          <div class="search-input-wrapper">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="search-icon" viewBox="0 0 16 16">
+              <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
+            </svg>
+            <input type="text" class="form-control" id="domainSearch" placeholder="Filter by domain or bucket..." autocomplete="off" />
+          </div>
+        </div>
+        {% endif %}
+      </div>
+      <div class="card-body px-4 pb-4">
+        {% if mappings %}
+        <div class="table-responsive">
+          <table class="table table-hover align-middle mb-0" id="domainTable">
+            <thead class="table-light">
+              <tr>
+                <th scope="col">Domain</th>
+                <th scope="col">Bucket</th>
+                <th scope="col" class="text-end">Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              {% for m in mappings %}
+              <tr data-domain="{{ m.domain }}" data-bucket="{{ m.bucket }}">
+                <td>
+                  <div class="d-flex align-items-center gap-2">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="text-success flex-shrink-0" viewBox="0 0 16 16">
+                      <path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm7.5-6.923c-.67.204-1.335.82-1.887 1.855A7.97 7.97 0 0 0 5.145 4H7.5V1.077zM4.09 4a9.267 9.267 0 0 1 .64-1.539 6.7 6.7 0 0 1 .597-.933A7.025 7.025 0 0 0 2.255 4H4.09zm-.582 3.5c.03-.877.138-1.718.312-2.5H1.674a6.958 6.958 0 0 0-.656 2.5h2.49zM4.847 5a12.5 12.5 0 0 0-.338 2.5H7.5V5H4.847zM8.5 5v2.5h2.99a12.495 12.495 0 0 0-.337-2.5H8.5zM4.51 8.5a12.5 12.5 0 0 0 .337 2.5H7.5V8.5H4.51zm3.99 0V11h2.653c.187-.765.306-1.608.338-2.5H8.5zM5.145 12c.138.386.295.744.468 1.068.552 1.035 1.218 1.65 1.887 1.855V12H5.145zm.182 2.472a6.696 6.696 0 0 1-.597-.933A9.268 9.268 0 0 1 4.09 12H2.255a7.024 7.024 0 0 0 3.072 2.472zM3.82 11a13.652 13.652 0 0 1-.312-2.5h-2.49c.062.89.291 1.733.656 2.5H3.82zm6.853 3.472A7.024 7.024 0 0 0 13.745 12H11.91a9.27 9.27 0 0 1-.64 1.539 6.688 6.688 0 0 1-.597.933zM8.5 12v2.923c.67-.204 1.335-.82 1.887-1.855.173-.324.33-.682.468-1.068H8.5zm3.68-1h2.146c.365-.767.594-1.61.656-2.5h-2.49a13.65 13.65 0 0 1-.312 2.5zm2.802-3.5a6.959 6.959 0 0 0-.656-2.5H12.18c.174.782.282 1.623.312 2.5h2.49zM11.27 2.461c.247.464.462.98.64 1.539h1.835a7.024 7.024 0 0 0-3.072-2.472c.218.284.418.598.597.933zM10.855 4a7.966 7.966 0 0 0-.468-1.068C9.835 1.897 9.17 1.282 8.5 1.077V4h2.355z"/>
+                    </svg>
+                    <div>
+                      <code class="fw-medium">{{ m.domain }}</code>
+                      <div class="text-muted small">http://{{ m.domain }}</div>
+                    </div>
+                  </div>
+                </td>
+                <td><span class="badge bg-primary bg-opacity-10 text-primary">{{ m.bucket }}</span></td>
+                <td class="text-end">
+                  <div class="btn-group btn-group-sm" role="group">
+                    <button type="button" class="btn btn-outline-secondary"
+                            data-bs-toggle="modal"
+                            data-bs-target="#editDomainModal"
+                            data-domain="{{ m.domain }}"
+                            data-bucket="{{ m.bucket }}"
+                            title="Edit mapping">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 16 16">
+                        <path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5z"/>
+                      </svg>
+                    </button>
+                    <button type="button" class="btn btn-outline-danger"
+                            data-bs-toggle="modal"
+                            data-bs-target="#deleteDomainModal"
+                            data-domain="{{ m.domain }}"
+                            data-bucket="{{ m.bucket }}"
+                            title="Delete mapping">
+                      <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 16 16">
+                        <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/>
+                        <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/>
+                      </svg>
+                    </button>
+                  </div>
+                </td>
+              </tr>
+              {% endfor %}
+            </tbody>
+          </table>
+        </div>
+        <div id="noSearchResults" class="text-center py-4 d-none">
+          <p class="text-muted mb-0">No mappings match your search.</p>
+        </div>
+        {% else %}
+        <div class="empty-state text-center py-5">
+          <div class="empty-state-icon mx-auto mb-3">
+            <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" class="text-muted" viewBox="0 0 16 16">
+              <path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm7.5-6.923c-.67.204-1.335.82-1.887 1.855A7.97 7.97 0 0 0 5.145 4H7.5V1.077zM4.09 4a9.267 9.267 0 0 1 .64-1.539 6.7 6.7 0 0 1 .597-.933A7.025 7.025 0 0 0 2.255 4H4.09zm-.582 3.5c.03-.877.138-1.718.312-2.5H1.674a6.958 6.958 0 0 0-.656 2.5h2.49zM4.847 5a12.5 12.5 0 0 0-.338 2.5H7.5V5H4.847zM8.5 5v2.5h2.99a12.495 12.495 0 0 0-.337-2.5H8.5zM4.51 8.5a12.5 12.5 0 0 0 .337 2.5H7.5V8.5H4.51zm3.99 0V11h2.653c.187-.765.306-1.608.338-2.5H8.5zM5.145 12c.138.386.295.744.468 1.068.552 1.035 1.218 1.65 1.887 1.855V12H5.145zm.182 2.472a6.696 6.696 0 0 1-.597-.933A9.268 9.268 0 0 1 4.09 12H2.255a7.024 7.024 0 0 0 3.072 2.472zM3.82 11a13.652 13.652 0 0 1-.312-2.5h-2.49c.062.89.291 1.733.656 2.5H3.82zm6.853 3.472A7.024 7.024 0 0 0 13.745 12H11.91a9.27 9.27 0 0 1-.64 1.539 6.688 6.688 0 0 1-.597.933zM8.5 12v2.923c.67-.204 1.335-.82 1.887-1.855.173-.324.33-.682.468-1.068H8.5zm3.68-1h2.146c.365-.767.594-1.61.656-2.5h-2.49a13.65 13.65 0 0 1-.312 2.5zm2.802-3.5a6.959 6.959 0 0 0-.656-2.5H12.18c.174.782.282 1.623.312 2.5h2.49zM11.27 2.461c.247.464.462.98.64 1.539h1.835a7.024 7.024 0 0 0-3.072-2.472c.218.284.418.598.597.933zM10.855 4a7.966 7.966 0 0 0-.468-1.068C9.835 1.897 9.17 1.282 8.5 1.077V4h2.355z"/>
+            </svg>
+          </div>
+          <h5 class="fw-semibold mb-2">No domain mappings yet</h5>
+          <p class="text-muted mb-0">Add your first domain mapping to serve a bucket as a static website.</p>
+        </div>
+        {% endif %}
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="modal fade" id="editDomainModal" tabindex="-1" aria-hidden="true">
+  <div class="modal-dialog modal-dialog-centered">
+    <div class="modal-content">
+      <div class="modal-header border-0 pb-0">
+        <h5 class="modal-title fw-semibold">
+          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="text-primary" viewBox="0 0 16 16">
+            <path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z"/>
+          </svg>
+          Edit Domain Mapping
+        </h5>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+      <form method="POST" id="editDomainForm">
+        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
+        <div class="modal-body">
+          <div class="mb-3">
+            <label class="form-label fw-medium">Domain</label>
+            <input type="text" class="form-control bg-light" id="editDomainName" disabled>
+          </div>
+          <div class="mb-3">
+            <label for="editBucket" class="form-label fw-medium">Bucket</label>
+            {% if buckets %}
+            <select class="form-select" id="editBucket" name="bucket" required>
+              {% for b in buckets %}
+              <option value="{{ b }}">{{ b }}</option>
+              {% endfor %}
+            </select>
+            {% else %}
+            <input type="text" class="form-control" id="editBucket" name="bucket" required>
+            {% endif %}
+          </div>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
+          <button type="submit" class="btn btn-primary">
+            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="me-1" viewBox="0 0 16 16">
+              <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z"/>
+            </svg>
+            Save
+          </button>
+        </div>
+      </form>
+    </div>
+  </div>
+</div>
+
+<div class="modal fade" id="deleteDomainModal" tabindex="-1" aria-hidden="true">
+  <div class="modal-dialog modal-dialog-centered">
+    <div class="modal-content">
+      <form method="POST" id="deleteDomainForm">
+        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
+        <div class="modal-header border-0 pb-0">
+          <h5 class="modal-title fw-semibold">
+            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="text-danger" viewBox="0 0 16 16">
+              <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/>
+              <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/>
+            </svg>
+            Delete Domain Mapping
+          </h5>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+        <div class="modal-body">
+          <p>Are you sure you want to delete the mapping for <strong><code id="deleteDomainName"></code></strong>?</p>
+          <p class="text-muted small mb-0">Mapped to bucket: <code id="deleteBucketName"></code></p>
+          <div class="alert alert-warning d-flex align-items-start small mt-3 mb-0" role="alert">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="flex-shrink-0 me-2 mt-0" viewBox="0 0 16 16">
+              <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
+            </svg>
+            <div>This domain will stop serving website content immediately.</div>
+          </div>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
+          <button type="submit" class="btn btn-danger">
+            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="me-1" viewBox="0 0 16 16">
+              <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/>
+              <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/>
+            </svg>
+            Delete
+          </button>
+        </div>
+      </form>
+    </div>
+  </div>
+</div>
+{% endblock %}
+
+{% block extra_scripts %}
+<script>
+(function () {
+  function normalizeDomain(val) {
+    val = val.trim().toLowerCase();
+    if (val.indexOf('https://') === 0) val = val.substring(8);
+    else if (val.indexOf('http://') === 0) val = val.substring(7);
+    var slashIdx = val.indexOf('/');
+    if (slashIdx !== -1) val = val.substring(0, slashIdx);
+    var qIdx = val.indexOf('?');
+    if (qIdx !== -1) val = val.substring(0, qIdx);
+    var hIdx = val.indexOf('#');
+    if (hIdx !== -1) val = val.substring(0, hIdx);
+    var colonIdx = val.indexOf(':');
+    if (colonIdx !== -1) val = val.substring(0, colonIdx);
+    return val;
+  }
+
+  var domainInput = document.getElementById('domain');
+  var preview = document.getElementById('domainPreview');
+  var previewUrl = document.getElementById('domainPreviewUrl');
+  if (domainInput && preview) {
+    domainInput.addEventListener('input', function () {
+      var clean = normalizeDomain(this.value);
+      if (clean && /^[a-z0-9]([a-z0-9\-]*[a-z0-9])?(\.[a-z0-9]([a-z0-9\-]*[a-z0-9])?)*$/.test(clean)) {
+        previewUrl.textContent = 'http://' + clean;
+        preview.classList.remove('d-none');
+      } else {
+        preview.classList.add('d-none');
+      }
+    });
+
+    var createForm = document.getElementById('createDomainForm');
+    if (createForm) {
+      createForm.addEventListener('submit', function () {
+        domainInput.value = normalizeDomain(domainInput.value);
+      });
+    }
+  }
+
+  var editModal = document.getElementById('editDomainModal');
+  if (editModal) {
+    editModal.addEventListener('show.bs.modal', function (event) {
+      var btn = event.relatedTarget;
+      var domain = btn.getAttribute('data-domain');
+      var bucket = btn.getAttribute('data-bucket');
+      document.getElementById('editDomainName').value = domain;
+      var editBucket = document.getElementById('editBucket');
+      editBucket.value = bucket;
+      document.getElementById('editDomainForm').action = '{{ url_for(endpoint="ui.update_website_domain", domain="__DOMAIN__") }}'.replace('__DOMAIN__', encodeURIComponent(domain));
+    });
+  }
+
+  var deleteModal = document.getElementById('deleteDomainModal');
+  if (deleteModal) {
+    deleteModal.addEventListener('show.bs.modal', function (event) {
+      var btn = event.relatedTarget;
+      var domain = btn.getAttribute('data-domain');
+      var bucket = btn.getAttribute('data-bucket') || '';
+      document.getElementById('deleteDomainName').textContent = domain;
+      document.getElementById('deleteBucketName').textContent = bucket;
+      document.getElementById('deleteDomainForm').action = '{{ url_for(endpoint="ui.delete_website_domain", domain="__DOMAIN__") }}'.replace('__DOMAIN__', encodeURIComponent(domain));
+    });
+  }
+
+  var searchInput = document.getElementById('domainSearch');
+  if (searchInput) {
+    searchInput.addEventListener('input', function () {
+      var q = this.value.toLowerCase();
+      var rows = document.querySelectorAll('#domainTable tbody tr');
+      var visible = 0;
+      rows.forEach(function (row) {
+        var domain = (row.getAttribute('data-domain') || '').toLowerCase();
+        var bucket = (row.getAttribute('data-bucket') || '').toLowerCase();
+        var match = !q || domain.indexOf(q) !== -1 || bucket.indexOf(q) !== -1;
+        row.style.display = match ? '' : 'none';
+        if (match) visible++;
+      });
+      var noResults = document.getElementById('noSearchResults');
+      if (noResults) {
+        noResults.classList.toggle('d-none', visible > 0);
+      }
+    });
+  }
+})();
+</script>
+{% endblock %}