Add core modules, web frontend, CLI, keystore, and fieldkit

Core:
- paths.py: centralized ~/.soosef/ path constants
- config.py: JSON config loader with dataclass defaults
- exceptions.py: SoosefError hierarchy
- cli.py: unified Click CLI wrapping stegasoo + verisoo + native commands

Keystore:
- manager.py: unified key management (Ed25519 identity + channel keys)
- models.py: IdentityInfo, KeystoreStatus dataclasses
- export.py: encrypted key bundle export/import for USB transfer

Fieldkit:
- killswitch.py: ordered emergency data destruction (keys first)
- deadman.py: dead man's switch with check-in timer
- tamper.py: SHA-256 file integrity baseline + checking
- usb_monitor.py: pyudev USB whitelist enforcement
- geofence.py: haversine-based GPS boundary checking

Web frontend (Flask app factory + blueprints):
- app.py: create_app() factory with context processor
- blueprints: stego, attest, fieldkit, keys, admin
- templates: base.html (dark theme, unified nav), dashboard, all section pages
- static: CSS, favicon

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

frontends/web/app.py

@@ -0,0 +1,171 @@
+"""
+SooSeF Web Frontend
+
+Flask application factory that unifies Stegasoo (steganography) and Verisoo
+(provenance attestation) into a single web UI with fieldkit security features.
+
+Built on Stegasoo's production-grade web UI patterns:
+- Subprocess isolation for crash-safe stegasoo operations
+- Async jobs with progress polling for large images
+- Context processors for global template variables
+- File-based temp storage with auto-expiry
+
+BLUEPRINT STRUCTURE
+===================
+
+    /                   → index (dashboard)
+    /login, /logout     → auth (adapted from stegasoo)
+    /setup              → first-run wizard
+
+    /encode, /decode, /generate, /tools  → stego blueprint
+    /attest, /verify                     → attest blueprint
+    /fieldkit/*                          → fieldkit blueprint
+    /keys/*                              → keys blueprint
+    /admin/*                             → admin blueprint
+"""
+
+import os
+import secrets
+import sys
+from pathlib import Path
+
+from flask import Flask, redirect, render_template, url_for
+
+import soosef
+from soosef.config import SoosefConfig
+from soosef.paths import AUTH_DB, INSTANCE_DIR, SECRET_KEY_FILE, TEMP_DIR, ensure_dirs
+
+# Suppress numpy/scipy warnings in subprocesses
+os.environ["NUMPY_MADVISE_HUGEPAGE"] = "0"
+os.environ["OMP_NUM_THREADS"] = "1"
+
+# Maximum upload size (50 MB default)
+MAX_FILE_SIZE = 50 * 1024 * 1024
+
+
+def create_app(config: SoosefConfig | None = None) -> Flask:
+    """Application factory."""
+    config = config or SoosefConfig.load()
+    ensure_dirs()
+
+    app = Flask(
+        __name__,
+        instance_path=str(INSTANCE_DIR),
+        template_folder=str(Path(__file__).parent / "templates"),
+        static_folder=str(Path(__file__).parent / "static"),
+    )
+
+    app.config["MAX_CONTENT_LENGTH"] = config.max_upload_mb * 1024 * 1024
+    app.config["AUTH_ENABLED"] = config.auth_enabled
+    app.config["HTTPS_ENABLED"] = config.https_enabled
+    app.config["SOOSEF_CONFIG"] = config
+
+    # Persist secret key so sessions survive restarts
+    _load_secret_key(app)
+
+    # ── Register blueprints ───────────────────────────────────────
+
+    from frontends.web.blueprints.stego import bp as stego_bp
+    from frontends.web.blueprints.attest import bp as attest_bp
+    from frontends.web.blueprints.fieldkit import bp as fieldkit_bp
+    from frontends.web.blueprints.keys import bp as keys_bp
+    from frontends.web.blueprints.admin import bp as admin_bp
+
+    app.register_blueprint(stego_bp)
+    app.register_blueprint(attest_bp)
+    app.register_blueprint(fieldkit_bp)
+    app.register_blueprint(keys_bp)
+    app.register_blueprint(admin_bp)
+
+    # ── Context processor (injected into ALL templates) ───────────
+
+    @app.context_processor
+    def inject_globals():
+        from soosef.keystore import KeystoreManager
+
+        ks = KeystoreManager()
+        ks_status = ks.status()
+
+        # Check fieldkit alert level
+        fieldkit_status = "ok"
+        if config.deadman_enabled:
+            from soosef.fieldkit.deadman import DeadmanSwitch
+
+            dm = DeadmanSwitch()
+            if dm.should_fire():
+                fieldkit_status = "alarm"
+            elif dm.is_overdue():
+                fieldkit_status = "warn"
+
+        # Check stegasoo capabilities
+        try:
+            from stegasoo import has_dct_support, HAS_AUDIO_SUPPORT
+
+            has_dct = has_dct_support()
+            has_audio = HAS_AUDIO_SUPPORT
+        except ImportError:
+            has_dct = False
+            has_audio = False
+
+        # Check verisoo availability
+        try:
+            import verisoo  # noqa: F401
+
+            has_verisoo = True
+        except ImportError:
+            has_verisoo = False
+
+        return {
+            "version": soosef.__version__,
+            "has_dct": has_dct,
+            "has_audio": has_audio,
+            "has_verisoo": has_verisoo,
+            "has_fieldkit": config.killswitch_enabled or config.deadman_enabled,
+            "fieldkit_status": fieldkit_status,
+            "channel_configured": ks_status.has_channel_key,
+            "channel_fingerprint": ks_status.channel_fingerprint or "",
+            "identity_configured": ks_status.has_identity,
+            "identity_fingerprint": ks_status.identity_fingerprint or "",
+            "auth_enabled": app.config["AUTH_ENABLED"],
+            "is_authenticated": _is_authenticated(),
+            "is_admin": _is_admin(),
+            "username": _get_username(),
+        }
+
+    # ── Root routes ───────────────────────────────────────────────
+
+    @app.route("/")
+    def index():
+        return render_template("index.html")
+
+    return app
+
+
+def _load_secret_key(app: Flask) -> None:
+    """Load or generate persistent secret key for Flask sessions."""
+    SECRET_KEY_FILE.parent.mkdir(parents=True, exist_ok=True)
+    if SECRET_KEY_FILE.exists():
+        app.secret_key = SECRET_KEY_FILE.read_bytes()
+    else:
+        key = secrets.token_bytes(32)
+        SECRET_KEY_FILE.write_bytes(key)
+        SECRET_KEY_FILE.chmod(0o600)
+        app.secret_key = key
+
+
+def _is_authenticated() -> bool:
+    """Check if current request has an authenticated session."""
+    # TODO: Wire up auth.py from stegasoo
+    return True
+
+
+def _is_admin() -> bool:
+    """Check if current user is an admin."""
+    # TODO: Wire up auth.py from stegasoo
+    return True
+
+
+def _get_username() -> str:
+    """Get current user's username."""
+    # TODO: Wire up auth.py from stegasoo
+    return "admin"

frontends/web/blueprints/admin.py

@@ -0,0 +1,21 @@
+"""
+Admin blueprint — user management and system settings.
+
+Will be adapted from stegasoo's admin routes in frontends/web/app.py.
+"""
+
+from flask import Blueprint, render_template
+
+bp = Blueprint("admin", __name__, url_prefix="/admin")
+
+
+@bp.route("/users")
+def users():
+    """User management."""
+    return render_template("admin/users.html")
+
+
+@bp.route("/settings")
+def settings():
+    """System settings."""
+    return render_template("admin/settings.html")

frontends/web/blueprints/attest.py

@@ -0,0 +1,34 @@
+"""
+Attestation blueprint — attest and verify images via Verisoo.
+
+Wraps verisoo's attestation.create_attestation() and
+verification.verify_image() with a web UI.
+"""
+
+from flask import Blueprint, render_template
+
+bp = Blueprint("attest", __name__)
+
+
+@bp.route("/attest", methods=["GET", "POST"])
+def attest():
+    """Create a provenance attestation for an image."""
+    return render_template("attest/attest.html")
+
+
+@bp.route("/verify", methods=["GET", "POST"])
+def verify():
+    """Verify an image against attestation records."""
+    return render_template("attest/verify.html")
+
+
+@bp.route("/attest/record/<record_id>")
+def record(record_id):
+    """View a single attestation record."""
+    return render_template("attest/record.html", record_id=record_id)
+
+
+@bp.route("/attest/log")
+def log():
+    """List recent attestations."""
+    return render_template("attest/log.html")

frontends/web/blueprints/fieldkit.py

@@ -0,0 +1,49 @@
+"""
+Fieldkit blueprint — killswitch, dead man's switch, status dashboard.
+"""
+
+from flask import Blueprint, flash, redirect, render_template, request, url_for
+
+bp = Blueprint("fieldkit", __name__, url_prefix="/fieldkit")
+
+
+@bp.route("/")
+def status():
+    """Fieldkit status dashboard — all monitors and system health."""
+    from soosef.fieldkit.deadman import DeadmanSwitch
+
+    deadman = DeadmanSwitch()
+    return render_template(
+        "fieldkit/status.html",
+        deadman_status=deadman.status(),
+    )
+
+
+@bp.route("/killswitch", methods=["GET", "POST"])
+def killswitch():
+    """Killswitch arming and firing UI."""
+    if request.method == "POST":
+        action = request.form.get("action")
+        if action == "fire" and request.form.get("confirm") == "CONFIRM-PURGE":
+            from soosef.fieldkit.killswitch import PurgeScope, execute_purge
+
+            result = execute_purge(PurgeScope.ALL, reason="web_ui")
+            flash(
+                f"Purge executed: {len(result.steps_completed)} steps completed, "
+                f"{len(result.steps_failed)} failed",
+                "warning" if result.steps_failed else "success",
+            )
+            return redirect(url_for("fieldkit.status"))
+
+    return render_template("fieldkit/killswitch.html")
+
+
+@bp.route("/deadman/checkin", methods=["POST"])
+def deadman_checkin():
+    """Record a dead man's switch check-in."""
+    from soosef.fieldkit.deadman import DeadmanSwitch
+
+    deadman = DeadmanSwitch()
+    deadman.checkin()
+    flash("Check-in recorded.", "success")
+    return redirect(url_for("fieldkit.status"))

frontends/web/blueprints/keys.py

@@ -0,0 +1,38 @@
+"""
+Key management blueprint — unified view of all key material.
+"""
+
+from flask import Blueprint, flash, redirect, render_template, request, url_for
+
+bp = Blueprint("keys", __name__, url_prefix="/keys")
+
+
+@bp.route("/")
+def index():
+    """Key management dashboard."""
+    from soosef.keystore import KeystoreManager
+
+    ks = KeystoreManager()
+    return render_template("fieldkit/keys.html", keystore=ks.status())
+
+
+@bp.route("/channel/generate", methods=["POST"])
+def generate_channel():
+    """Generate a new channel key."""
+    from soosef.keystore import KeystoreManager
+
+    ks = KeystoreManager()
+    key = ks.generate_channel_key()
+    flash(f"Channel key generated: {key[:8]}...", "success")
+    return redirect(url_for("keys.index"))
+
+
+@bp.route("/identity/generate", methods=["POST"])
+def generate_identity():
+    """Generate a new Ed25519 identity."""
+    from soosef.keystore import KeystoreManager
+
+    ks = KeystoreManager()
+    info = ks.generate_identity()
+    flash(f"Identity generated: {info.fingerprint[:16]}...", "success")
+    return redirect(url_for("keys.index"))

frontends/web/blueprints/stego.py

@@ -0,0 +1,35 @@
+"""
+Steganography blueprint — encode, decode, generate, tools.
+
+Routes lifted from stegasoo's frontends/web/app.py. In Phase 1, these
+will be fully implemented by migrating the stegasoo route logic here.
+For now, they render placeholder templates.
+"""
+
+from flask import Blueprint, render_template
+
+bp = Blueprint("stego", __name__)
+
+
+@bp.route("/encode", methods=["GET", "POST"])
+def encode():
+    """Encode a message into a carrier image."""
+    return render_template("stego/encode.html")
+
+
+@bp.route("/decode", methods=["GET", "POST"])
+def decode():
+    """Decode a message from a stego image."""
+    return render_template("stego/decode.html")
+
+
+@bp.route("/generate")
+def generate():
+    """Generate credentials (passphrase, PIN, RSA keys)."""
+    return render_template("stego/generate.html")
+
+
+@bp.route("/tools")
+def tools():
+    """Image analysis and utility tools."""
+    return render_template("stego/tools.html")

frontends/web/static/favicon.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <rect width="32" height="32" rx="6" fill="#2a3a5e"/>
+  <text x="16" y="22" text-anchor="middle" font-family="system-ui" font-size="14" font-weight="bold" fill="#e5d058">SF</text>
+</svg>

frontends/web/static/style.css

@@ -0,0 +1,59 @@
+/* ============================================================================
+   SooSeF - Main Stylesheet
+   Adapted from Stegasoo's style.css — same dark theme, same patterns.
+   ============================================================================ */
+
+:root {
+    --gradient-start: #2a3a5e;
+    --gradient-end: #4a2860;
+    --bg-dark-1: #1a1a2e;
+    --bg-dark-2: #16213e;
+    --bg-dark-3: #0f3460;
+    --text-muted: rgba(255, 255, 255, 0.5);
+    --border-light: rgba(255, 255, 255, 0.1);
+    --overlay-dark: rgba(0, 0, 0, 0.3);
+    --overlay-light: rgba(255, 255, 255, 0.05);
+}
+
+/* Navbar */
+.navbar {
+    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
+    border-bottom: 1px solid var(--border-light);
+}
+
+.navbar-brand {
+    font-size: 1.1rem;
+    letter-spacing: 0.05em;
+}
+
+/* Nav icon + label pattern from stegasoo */
+.nav-icons .nav-link {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+    padding: 0.5rem 0.75rem;
+    font-size: 0.9rem;
+}
+
+.nav-icons .nav-link i {
+    font-size: 1.1rem;
+}
+
+/* Cards */
+.card {
+    transition: border-color 0.2s ease;
+}
+
+.card:hover {
+    border-color: rgba(255, 255, 255, 0.25) !important;
+}
+
+/* Footer */
+footer {
+    border-top: 1px solid var(--border-light);
+}
+
+/* Badge styling */
+.badge code {
+    font-family: 'SF Mono', 'Fira Code', monospace;
+}

frontends/web/templates/admin/settings.html

@@ -0,0 +1,9 @@
+{% extends "base.html" %}
+{% block title %}Settings — SooSeF Admin{% endblock %}
+{% block content %}
+<h2><i class="bi bi-sliders me-2"></i>System Settings</h2>
+<div class="alert alert-info">
+    <i class="bi bi-info-circle me-2"></i>
+    System settings will be migrated from stegasoo's admin panel.
+</div>
+{% endblock %}

frontends/web/templates/admin/users.html

@@ -0,0 +1,9 @@
+{% extends "base.html" %}
+{% block title %}Users — SooSeF Admin{% endblock %}
+{% block content %}
+<h2><i class="bi bi-people me-2"></i>User Management</h2>
+<div class="alert alert-info">
+    <i class="bi bi-info-circle me-2"></i>
+    Admin user management will be migrated from stegasoo's auth system.
+</div>
+{% endblock %}

frontends/web/templates/attest/attest.html

@@ -0,0 +1,11 @@
+{% extends "base.html" %}
+{% block title %}Attest — SooSeF{% endblock %}
+{% block content %}
+<h2><i class="bi bi-patch-check me-2"></i>Attest Image</h2>
+<p class="text-muted">Create a cryptographic provenance attestation — prove when, where, and by whom an image was captured.</p>
+<div class="alert alert-info">
+    <i class="bi bi-info-circle me-2"></i>
+    Verisoo attestation UI. Upload an image, optionally add metadata (location, caption),
+    and sign with your Ed25519 identity. The attestation is stored in the local append-only log.
+</div>
+{% endblock %}

frontends/web/templates/attest/log.html

@@ -0,0 +1,10 @@
+{% extends "base.html" %}
+{% block title %}Attestation Log — SooSeF{% endblock %}
+{% block content %}
+<h2><i class="bi bi-journal-text me-2"></i>Attestation Log</h2>
+<p class="text-muted">Recent attestations from the local append-only log.</p>
+<div class="alert alert-info">
+    <i class="bi bi-info-circle me-2"></i>
+    Lists attestation records with filters by attestor, date range, and verification status.
+</div>
+{% endblock %}

frontends/web/templates/attest/record.html

@@ -0,0 +1,11 @@
+{% extends "base.html" %}
+{% block title %}Attestation Record — SooSeF{% endblock %}
+{% block content %}
+<h2><i class="bi bi-file-earmark-check me-2"></i>Attestation Record</h2>
+<p class="text-muted">Record ID: <code>{{ record_id }}</code></p>
+<div class="alert alert-info">
+    <i class="bi bi-info-circle me-2"></i>
+    Attestation detail view — shows image hashes, signature, attestor fingerprint,
+    timestamp, and metadata.
+</div>
+{% endblock %}

frontends/web/templates/attest/verify.html

@@ -0,0 +1,12 @@
+{% extends "base.html" %}
+{% block title %}Verify — SooSeF{% endblock %}
+{% block content %}
+<h2><i class="bi bi-search me-2"></i>Verify Image</h2>
+<p class="text-muted">Check an image against attestation records using multi-algorithm hash matching.</p>
+<div class="alert alert-info">
+    <i class="bi bi-info-circle me-2"></i>
+    Verisoo verification UI. Upload an image to check against the attestation log.
+    Uses SHA-256 (exact) and perceptual hashes (pHash, dHash, aHash) for robustness
+    against compression and resizing.
+</div>
+{% endblock %}

frontends/web/templates/base.html

@@ -0,0 +1,156 @@
+<!DOCTYPE html>
+<html lang="en" data-bs-theme="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{% block title %}SooSeF{% endblock %}</title>
+    <link rel="icon" type="image/svg+xml" href="{{ url_for('static', filename='favicon.svg') }}">
+    <link href="{{ url_for('static', filename='vendor/css/bootstrap.min.css') }}" rel="stylesheet">
+    <link href="{{ url_for('static', filename='vendor/css/bootstrap-icons.min.css') }}" rel="stylesheet">
+    <link href="{{ url_for('static', filename='style.css') }}" rel="stylesheet">
+</head>
+<body>
+    <nav class="navbar navbar-expand-lg navbar-dark">
+        <div class="container-fluid">
+            <a class="navbar-brand" href="/" style="padding-left: 6px; margin-right: 8px;">
+                <strong>SooSeF</strong>
+            </a>
+
+            {# Channel + Identity indicators #}
+            <span class="d-flex align-items-center me-auto gap-2">
+                {% if channel_configured %}
+                <span class="badge bg-success bg-opacity-25 small" title="Channel: {{ channel_fingerprint }}">
+                    <i class="bi bi-shield-lock me-1" style="color: #6ee7b7;"></i><code style="font-size: 0.7rem; font-weight: 300; color: #c9a860;">{{ channel_fingerprint[:4] }}-{{ channel_fingerprint[-4:] }}</code>
+                </span>
+                {% endif %}
+                {% if identity_configured %}
+                <span class="badge bg-info bg-opacity-25 small" title="Identity: {{ identity_fingerprint }}">
+                    <i class="bi bi-fingerprint me-1"></i><code style="font-size: 0.7rem; font-weight: 300;">{{ identity_fingerprint[:8] }}</code>
+                </span>
+                {% endif %}
+            </span>
+
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="navbarNav">
+                <ul class="navbar-nav ms-auto nav-icons">
+                    <li class="nav-item">
+                        <a class="nav-link nav-expand" href="/"><i class="bi bi-house"></i><span>Home</span></a>
+                    </li>
+
+                    {% if not auth_enabled or is_authenticated %}
+                    {# ── Stegasoo ── #}
+                    <li class="nav-item">
+                        <a class="nav-link nav-expand" href="/encode"><i class="bi bi-lock"></i><span>Encode</span></a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link nav-expand" href="/decode"><i class="bi bi-unlock"></i><span>Decode</span></a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link nav-expand" href="/generate"><i class="bi bi-key"></i><span>Generate</span></a>
+                    </li>
+
+                    {# ── Verisoo ── #}
+                    {% if has_verisoo %}
+                    <li class="nav-item">
+                        <a class="nav-link nav-expand" href="/attest"><i class="bi bi-patch-check"></i><span>Attest</span></a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link nav-expand" href="/verify"><i class="bi bi-search"></i><span>Verify</span></a>
+                    </li>
+                    {% endif %}
+
+                    {# ── Fieldkit ── #}
+                    {% if has_fieldkit %}
+                    <li class="nav-item dropdown">
+                        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
+                            <i class="bi bi-shield-exclamation me-1"></i>
+                            Fieldkit
+                            {% if fieldkit_status == 'alarm' %}
+                            <span class="badge bg-danger rounded-pill ms-1">!</span>
+                            {% elif fieldkit_status == 'warn' %}
+                            <span class="badge bg-warning rounded-pill ms-1">!</span>
+                            {% endif %}
+                        </a>
+                        <ul class="dropdown-menu dropdown-menu-end dropdown-menu-dark">
+                            <li><a class="dropdown-item" href="/fieldkit"><i class="bi bi-speedometer2 me-2"></i>Status</a></li>
+                            <li><a class="dropdown-item" href="/fieldkit/killswitch"><i class="bi bi-exclamation-octagon me-2"></i>Killswitch</a></li>
+                            <li><hr class="dropdown-divider"></li>
+                            <li><a class="dropdown-item" href="/keys"><i class="bi bi-key me-2"></i>Keys</a></li>
+                        </ul>
+                    </li>
+                    {% endif %}
+                    {% endif %}
+
+                    <li class="nav-item">
+                        <a class="nav-link nav-expand" href="/tools"><i class="bi bi-tools"></i><span>Tools</span></a>
+                    </li>
+
+                    {# ── User menu ── #}
+                    {% if auth_enabled %}
+                        {% if is_authenticated %}
+                        <li class="nav-item dropdown">
+                            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
+                                <i class="bi bi-person-circle me-1"></i> {{ username }}
+                            </a>
+                            <ul class="dropdown-menu dropdown-menu-end dropdown-menu-dark">
+                                <li><a class="dropdown-item" href="/account"><i class="bi bi-gear me-2"></i>Account</a></li>
+                                {% if is_admin %}
+                                <li><a class="dropdown-item" href="/admin/users"><i class="bi bi-people me-2"></i>Users</a></li>
+                                <li><a class="dropdown-item" href="/admin/settings"><i class="bi bi-sliders me-2"></i>Settings</a></li>
+                                {% endif %}
+                                <li><hr class="dropdown-divider"></li>
+                                <li><a class="dropdown-item" href="/keys"><i class="bi bi-key me-2"></i>Keys</a></li>
+                                <li><a class="dropdown-item" href="/logout"><i class="bi bi-box-arrow-left me-2"></i>Logout</a></li>
+                            </ul>
+                        </li>
+                        {% else %}
+                        <li class="nav-item">
+                            <a class="nav-link" href="/login"><i class="bi bi-box-arrow-in-right me-1"></i> Login</a>
+                        </li>
+                        {% endif %}
+                    {% endif %}
+                </ul>
+            </div>
+        </div>
+    </nav>
+
+    <main class="container py-5">
+        {# Toast notifications #}
+        <div class="toast-container position-fixed end-0 p-3" style="z-index: 1100; top: 70px;">
+            {% with messages = get_flashed_messages(with_categories=true) %}
+                {% for category, message in messages %}
+                    <div class="toast show align-items-center text-bg-{{ 'danger' if category == 'error' else ('warning' if category == 'warning' else 'success') }} border-0 fade" role="alert" data-bs-autohide="true" data-bs-delay="10000">
+                        <div class="d-flex">
+                            <div class="toast-body">
+                                <i class="bi bi-{{ 'exclamation-triangle' if category == 'error' else ('exclamation-circle' if category == 'warning' else 'check-circle') }} me-2"></i>
+                                {{ message }}
+                            </div>
+                            <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
+                        </div>
+                    </div>
+                {% endfor %}
+            {% endwith %}
+        </div>
+
+        {% block content %}{% endblock %}
+    </main>
+
+    <footer class="py-4 mt-5">
+        <div class="container text-center text-muted">
+            <small>
+                SooSeF v{{ version }} — Soo Security Fieldkit
+                <span class="mx-2">|</span>
+                <span class="text-muted">Stegasoo + Verisoo</span>
+            </small>
+        </div>
+    </footer>
+
+    <script src="{{ url_for('static', filename='vendor/js/bootstrap.bundle.min.js') }}"></script>
+    <script>
+    document.querySelectorAll('.toast').forEach(el => new bootstrap.Toast(el));
+    </script>
+    {% block scripts %}{% endblock %}
+</body>
+</html>

frontends/web/templates/fieldkit/keys.html

@@ -0,0 +1,52 @@
+{% extends "base.html" %}
+{% block title %}Keys — SooSeF{% endblock %}
+{% block content %}
+<h2><i class="bi bi-key me-2"></i>Key Management</h2>
+<p class="text-muted">Manage Stegasoo channel keys and Verisoo Ed25519 identity.</p>
+
+<div class="row g-4">
+    {# Channel Key #}
+    <div class="col-md-6">
+        <div class="card bg-dark border-secondary">
+            <div class="card-body">
+                <h5 class="card-title"><i class="bi bi-shield-lock me-2 text-warning"></i>Channel Key</h5>
+                {% if keystore.has_channel_key %}
+                <p class="text-muted small">
+                    Fingerprint: <code>{{ keystore.channel_fingerprint }}</code><br>
+                    Used for Stegasoo deployment isolation.
+                </p>
+                {% else %}
+                <p class="text-muted small">No channel key configured.</p>
+                <form method="POST" action="{{ url_for('keys.generate_channel') }}">
+                    <button type="submit" class="btn btn-outline-warning btn-sm">
+                        <i class="bi bi-plus-circle me-1"></i>Generate Channel Key
+                    </button>
+                </form>
+                {% endif %}
+            </div>
+        </div>
+    </div>
+
+    {# Ed25519 Identity #}
+    <div class="col-md-6">
+        <div class="card bg-dark border-secondary">
+            <div class="card-body">
+                <h5 class="card-title"><i class="bi bi-fingerprint me-2 text-info"></i>Identity</h5>
+                {% if keystore.has_identity %}
+                <p class="text-muted small">
+                    Fingerprint: <code>{{ keystore.identity_fingerprint }}</code><br>
+                    Used for Verisoo attestation signing.
+                </p>
+                {% else %}
+                <p class="text-muted small">No identity configured.</p>
+                <form method="POST" action="{{ url_for('keys.generate_identity') }}">
+                    <button type="submit" class="btn btn-outline-info btn-sm">
+                        <i class="bi bi-plus-circle me-1"></i>Generate Identity
+                    </button>
+                </form>
+                {% endif %}
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}

frontends/web/templates/fieldkit/killswitch.html

@@ -0,0 +1,36 @@
+{% extends "base.html" %}
+{% block title %}Killswitch — SooSeF{% endblock %}
+{% block content %}
+<h2 class="text-danger"><i class="bi bi-exclamation-octagon me-2"></i>Emergency Killswitch</h2>
+<p class="text-muted">Destroy all key material and sensitive data. This action is irreversible.</p>
+
+<div class="card bg-dark border-danger mt-4">
+    <div class="card-body">
+        <h5 class="card-title text-danger">Destruction Order</h5>
+        <ol class="text-muted small">
+            <li>Ed25519 identity keys (signing identity)</li>
+            <li>Stegasoo channel key (deployment binding)</li>
+            <li>Flask session secret (invalidates all sessions)</li>
+            <li>Auth database (user accounts)</li>
+            <li>Attestation log + index (provenance records)</li>
+            <li>Temporary files (staged uploads)</li>
+            <li>Configuration</li>
+            <li>System logs (best-effort)</li>
+        </ol>
+
+        <hr class="border-danger">
+
+        <form method="POST" action="{{ url_for('fieldkit.killswitch') }}">
+            <input type="hidden" name="action" value="fire">
+            <div class="mb-3">
+                <label class="form-label text-danger fw-bold">Type CONFIRM-PURGE to proceed:</label>
+                <input type="text" name="confirm" class="form-control bg-dark border-danger text-danger"
+                       placeholder="CONFIRM-PURGE" autocomplete="off">
+            </div>
+            <button type="submit" class="btn btn-danger">
+                <i class="bi bi-exclamation-octagon me-1"></i>Execute Purge
+            </button>
+        </form>
+    </div>
+</div>
+{% endblock %}

frontends/web/templates/fieldkit/status.html

@@ -0,0 +1,58 @@
+{% extends "base.html" %}
+{% block title %}Fieldkit Status — SooSeF{% endblock %}
+{% block content %}
+<h2><i class="bi bi-speedometer2 me-2"></i>Fieldkit Status</h2>
+<p class="text-muted">Security monitors and system health.</p>
+
+<div class="row g-4">
+    {# Dead Man's Switch #}
+    <div class="col-md-6">
+        <div class="card bg-dark border-secondary">
+            <div class="card-body">
+                <h5 class="card-title">
+                    <i class="bi bi-clock-history me-2"></i>Dead Man's Switch
+                    {% if deadman_status.armed %}
+                        {% if deadman_status.overdue %}
+                        <span class="badge bg-danger ms-2">OVERDUE</span>
+                        {% else %}
+                        <span class="badge bg-success ms-2">Armed</span>
+                        {% endif %}
+                    {% else %}
+                    <span class="badge bg-secondary ms-2">Disarmed</span>
+                    {% endif %}
+                </h5>
+                {% if deadman_status.armed %}
+                <p class="text-muted small">
+                    Interval: {{ deadman_status.interval_hours }}h
+                    ({{ deadman_status.grace_hours }}h grace)<br>
+                    Last check-in: {{ deadman_status.last_checkin or 'Never' }}<br>
+                    {% if deadman_status.get('next_due') %}
+                    Next due: {{ deadman_status.next_due }}
+                    {% endif %}
+                </p>
+                <form method="POST" action="{{ url_for('fieldkit.deadman_checkin') }}">
+                    <button type="submit" class="btn btn-success btn-sm">
+                        <i class="bi bi-check-circle me-1"></i>Check In Now
+                    </button>
+                </form>
+                {% else %}
+                <p class="text-muted small">Not currently armed. Enable in config or via CLI.</p>
+                {% endif %}
+            </div>
+        </div>
+    </div>
+
+    {# Killswitch #}
+    <div class="col-md-6">
+        <div class="card bg-dark border-secondary">
+            <div class="card-body">
+                <h5 class="card-title"><i class="bi bi-exclamation-octagon me-2 text-danger"></i>Killswitch</h5>
+                <p class="text-muted small">Emergency data destruction. Destroys all keys, attestation logs, and auth data.</p>
+                <a href="{{ url_for('fieldkit.killswitch') }}" class="btn btn-outline-danger btn-sm">
+                    <i class="bi bi-exclamation-octagon me-1"></i>Killswitch Panel
+                </a>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}

frontends/web/templates/index.html

@@ -0,0 +1,117 @@
+{% extends "base.html" %}
+{% block title %}SooSeF — Soo Security Fieldkit{% endblock %}
+
+{% block content %}
+<div class="text-center mb-5">
+    <h1 class="display-5 fw-bold">Soo Security Fieldkit</h1>
+    <p class="lead text-muted">Offline-first security toolkit for field operations</p>
+</div>
+
+<div class="row g-4">
+    {# ── Stegasoo Card ── #}
+    <div class="col-md-6 col-lg-4">
+        <div class="card h-100 bg-dark border-secondary">
+            <div class="card-body">
+                <h5 class="card-title"><i class="bi bi-lock me-2 text-primary"></i>Encode</h5>
+                <p class="card-text text-muted">Hide encrypted messages in images or audio using Stegasoo's hybrid authentication.</p>
+                <a href="/encode" class="btn btn-outline-primary btn-sm">Encode Message</a>
+            </div>
+        </div>
+    </div>
+    <div class="col-md-6 col-lg-4">
+        <div class="card h-100 bg-dark border-secondary">
+            <div class="card-body">
+                <h5 class="card-title"><i class="bi bi-unlock me-2 text-success"></i>Decode</h5>
+                <p class="card-text text-muted">Extract hidden messages from stego images using your credentials.</p>
+                <a href="/decode" class="btn btn-outline-success btn-sm">Decode Message</a>
+            </div>
+        </div>
+    </div>
+    <div class="col-md-6 col-lg-4">
+        <div class="card h-100 bg-dark border-secondary">
+            <div class="card-body">
+                <h5 class="card-title"><i class="bi bi-key me-2 text-warning"></i>Generate</h5>
+                <p class="card-text text-muted">Generate secure passphrases, PINs, and RSA key pairs.</p>
+                <a href="/generate" class="btn btn-outline-warning btn-sm">Generate Credentials</a>
+            </div>
+        </div>
+    </div>
+
+    {# ── Verisoo Cards ── #}
+    {% if has_verisoo %}
+    <div class="col-md-6 col-lg-4">
+        <div class="card h-100 bg-dark border-secondary">
+            <div class="card-body">
+                <h5 class="card-title"><i class="bi bi-patch-check me-2 text-info"></i>Attest</h5>
+                <p class="card-text text-muted">Create a cryptographic provenance attestation for an image — prove when and where it was captured.</p>
+                <a href="/attest" class="btn btn-outline-info btn-sm">Attest Image</a>
+            </div>
+        </div>
+    </div>
+    <div class="col-md-6 col-lg-4">
+        <div class="card h-100 bg-dark border-secondary">
+            <div class="card-body">
+                <h5 class="card-title"><i class="bi bi-search me-2 text-info"></i>Verify</h5>
+                <p class="card-text text-muted">Verify an image against attestation records. Check provenance and detect modifications.</p>
+                <a href="/verify" class="btn btn-outline-info btn-sm">Verify Image</a>
+            </div>
+        </div>
+    </div>
+    {% endif %}
+
+    {# ── Fieldkit Card ── #}
+    {% if has_fieldkit %}
+    <div class="col-md-6 col-lg-4">
+        <div class="card h-100 bg-dark border-secondary">
+            <div class="card-body">
+                <h5 class="card-title">
+                    <i class="bi bi-shield-exclamation me-2 text-danger"></i>Fieldkit
+                    {% if fieldkit_status == 'alarm' %}
+                    <span class="badge bg-danger ms-2">ALARM</span>
+                    {% elif fieldkit_status == 'warn' %}
+                    <span class="badge bg-warning ms-2">OVERDUE</span>
+                    {% endif %}
+                </h5>
+                <p class="card-text text-muted">Killswitch, dead man's switch, tamper detection, and USB monitoring.</p>
+                <a href="/fieldkit" class="btn btn-outline-danger btn-sm">Fieldkit Status</a>
+            </div>
+        </div>
+    </div>
+    {% endif %}
+</div>
+
+{# ── System Status ── #}
+<div class="row mt-5">
+    <div class="col-12">
+        <div class="card bg-dark border-secondary">
+            <div class="card-body">
+                <h6 class="card-title text-muted"><i class="bi bi-info-circle me-2"></i>System Status</h6>
+                <div class="row g-3 mt-1">
+                    <div class="col-auto">
+                        <span class="badge bg-{{ 'success' if channel_configured else 'secondary' }}">
+                            <i class="bi bi-shield-lock me-1"></i>Channel: {{ 'Active' if channel_configured else 'Public' }}
+                        </span>
+                    </div>
+                    <div class="col-auto">
+                        <span class="badge bg-{{ 'success' if identity_configured else 'secondary' }}">
+                            <i class="bi bi-fingerprint me-1"></i>Identity: {{ 'Active' if identity_configured else 'None' }}
+                        </span>
+                    </div>
+                    <div class="col-auto">
+                        <span class="badge bg-{{ 'success' if has_dct else 'secondary' }}">
+                            <i class="bi bi-image me-1"></i>DCT: {{ 'Available' if has_dct else 'Unavailable' }}
+                        </span>
+                    </div>
+                    {% if has_verisoo %}
+                    <div class="col-auto">
+                        <span class="badge bg-success">
+                            <i class="bi bi-patch-check me-1"></i>Verisoo: Active
+                        </span>
+                    </div>
+                    {% endif %}
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}

frontends/web/templates/stego/decode.html

@@ -0,0 +1,10 @@
+{% extends "base.html" %}
+{% block title %}Decode — SooSeF{% endblock %}
+{% block content %}
+<h2><i class="bi bi-unlock me-2"></i>Decode Message</h2>
+<p class="text-muted">Extract a hidden message from a stego image.</p>
+<div class="alert alert-info">
+    <i class="bi bi-info-circle me-2"></i>
+    Stegasoo decode UI will be migrated here from stegasoo's frontends/web/.
+</div>
+{% endblock %}

frontends/web/templates/stego/encode.html

@@ -0,0 +1,11 @@
+{% extends "base.html" %}
+{% block title %}Encode — SooSeF{% endblock %}
+{% block content %}
+<h2><i class="bi bi-lock me-2"></i>Encode Message</h2>
+<p class="text-muted">Hide an encrypted message in an image or audio file.</p>
+<div class="alert alert-info">
+    <i class="bi bi-info-circle me-2"></i>
+    Stegasoo encode UI will be migrated here from stegasoo's frontends/web/.
+    Full hybrid auth (photo + passphrase + PIN) with async progress tracking.
+</div>
+{% endblock %}

frontends/web/templates/stego/generate.html

@@ -0,0 +1,10 @@
+{% extends "base.html" %}
+{% block title %}Generate — SooSeF{% endblock %}
+{% block content %}
+<h2><i class="bi bi-key me-2"></i>Generate Credentials</h2>
+<p class="text-muted">Generate secure passphrases, PINs, and RSA key pairs.</p>
+<div class="alert alert-info">
+    <i class="bi bi-info-circle me-2"></i>
+    Stegasoo credential generator UI will be migrated here.
+</div>
+{% endblock %}

frontends/web/templates/stego/tools.html

@@ -0,0 +1,10 @@
+{% extends "base.html" %}
+{% block title %}Tools — SooSeF{% endblock %}
+{% block content %}
+<h2><i class="bi bi-tools me-2"></i>Tools</h2>
+<p class="text-muted">Image analysis, capacity checking, EXIF stripping, and more.</p>
+<div class="alert alert-info">
+    <i class="bi bi-info-circle me-2"></i>
+    Stegasoo tools UI will be migrated here.
+</div>
+{% endblock %}