aws-inventory-manager 0.17.12__py3-none-any.whl

src/web/templates/components/navbar.html

@@ -0,0 +1,31 @@
+<!-- Minimal top bar - branding is in sidebar -->
+<nav class="bg-white border-b border-gray-100 shadow-sm sticky top-0 z-40">
+    <div class="mx-auto px-4 sm:px-6 lg:px-8">
+        <div class="flex h-14 items-center justify-end">
+            <div class="flex items-center space-x-4">
+                <!-- Quick Actions -->
+                <button class="p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-50 rounded-lg transition-colors">
+                    <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
+                    </svg>
+                </button>
+                <button class="p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-50 rounded-lg transition-colors">
+                    <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/>
+                    </svg>
+                </button>
+
+                <!-- User/Status -->
+                <div class="flex items-center space-x-3 pl-3 border-l border-gray-200">
+                    <div class="flex items-center space-x-2">
+                        <span class="flex h-2 w-2 rounded-full bg-emerald-400 animate-pulse"></span>
+                        <span class="text-sm font-medium text-gray-600">Connected</span>
+                    </div>
+                    <div class="w-8 h-8 rounded-full bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center text-white text-sm font-bold shadow-md">
+                        U
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</nav>

src/web/templates/components/sidebar.html

@@ -0,0 +1,104 @@
+<aside class="w-64 bg-white border-r border-gray-100 min-h-screen shadow-sm">
+    <!-- Logo/Brand Section -->
+    <div class="px-4 py-5 border-b border-gray-100">
+        <div class="flex items-center space-x-3">
+            <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center shadow-lg shadow-indigo-200">
+                <svg class="w-6 h-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2"/>
+                </svg>
+            </div>
+            <div>
+                <h1 class="text-sm font-bold text-gray-900">AWS Inventory</h1>
+                <span class="text-xs font-medium text-indigo-600 bg-indigo-50 px-2 py-0.5 rounded-full">Local</span>
+            </div>
+        </div>
+    </div>
+
+    <nav class="mt-4 px-3 space-y-1">
+        <a href="/"
+           class="group flex items-center px-3 py-2.5 text-sm font-semibold rounded-xl transition-all duration-200 {% if request.url.path == '/' %}bg-gradient-to-r from-indigo-50 to-purple-50 text-indigo-700 shadow-sm{% else %}text-gray-600 hover:bg-gray-50 hover:text-gray-900{% endif %}">
+            <div class="mr-3 p-1.5 rounded-lg {% if request.url.path == '/' %}bg-gradient-to-br from-indigo-500 to-purple-600 text-white shadow-md{% else %}bg-gray-100 text-gray-500 group-hover:bg-gray-200{% endif %}">
+                <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
+                </svg>
+            </div>
+            Dashboard
+        </a>
+
+        <a href="/snapshots"
+           class="group flex items-center px-3 py-2.5 text-sm font-semibold rounded-xl transition-all duration-200 {% if '/snapshots' in request.url.path %}bg-gradient-to-r from-indigo-50 to-purple-50 text-indigo-700 shadow-sm{% else %}text-gray-600 hover:bg-gray-50 hover:text-gray-900{% endif %}">
+            <div class="mr-3 p-1.5 rounded-lg {% if '/snapshots' in request.url.path %}bg-gradient-to-br from-indigo-500 to-purple-600 text-white shadow-md{% else %}bg-gray-100 text-gray-500 group-hover:bg-gray-200{% endif %}">
+                <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"/>
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"/>
+                </svg>
+            </div>
+            Snapshots
+        </a>
+
+        <a href="/resources"
+           class="group flex items-center px-3 py-2.5 text-sm font-semibold rounded-xl transition-all duration-200 {% if '/resources' in request.url.path %}bg-gradient-to-r from-indigo-50 to-purple-50 text-indigo-700 shadow-sm{% else %}text-gray-600 hover:bg-gray-50 hover:text-gray-900{% endif %}">
+            <div class="mr-3 p-1.5 rounded-lg {% if '/resources' in request.url.path %}bg-gradient-to-br from-indigo-500 to-purple-600 text-white shadow-md{% else %}bg-gray-100 text-gray-500 group-hover:bg-gray-200{% endif %}">
+                <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/>
+                </svg>
+            </div>
+            Resources
+        </a>
+
+        <a href="/groups"
+           class="group flex items-center px-3 py-2.5 text-sm font-semibold rounded-xl transition-all duration-200 {% if '/groups' in request.url.path %}bg-gradient-to-r from-indigo-50 to-purple-50 text-indigo-700 shadow-sm{% else %}text-gray-600 hover:bg-gray-50 hover:text-gray-900{% endif %}">
+            <div class="mr-3 p-1.5 rounded-lg {% if '/groups' in request.url.path %}bg-gradient-to-br from-indigo-500 to-purple-600 text-white shadow-md{% else %}bg-gray-100 text-gray-500 group-hover:bg-gray-200{% endif %}">
+                <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>
+                </svg>
+            </div>
+            Groups
+        </a>
+
+        <a href="/diff"
+           class="group flex items-center px-3 py-2.5 text-sm font-semibold rounded-xl transition-all duration-200 {% if '/diff' in request.url.path %}bg-gradient-to-r from-indigo-50 to-purple-50 text-indigo-700 shadow-sm{% else %}text-gray-600 hover:bg-gray-50 hover:text-gray-900{% endif %}">
+            <div class="mr-3 p-1.5 rounded-lg {% if '/diff' in request.url.path %}bg-gradient-to-br from-indigo-500 to-purple-600 text-white shadow-md{% else %}bg-gray-100 text-gray-500 group-hover:bg-gray-200{% endif %}">
+                <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
+                </svg>
+            </div>
+            Compare
+        </a>
+
+        <a href="/queries"
+           class="group flex items-center px-3 py-2.5 text-sm font-semibold rounded-xl transition-all duration-200 {% if '/queries' in request.url.path %}bg-gradient-to-r from-indigo-50 to-purple-50 text-indigo-700 shadow-sm{% else %}text-gray-600 hover:bg-gray-50 hover:text-gray-900{% endif %}">
+            <div class="mr-3 p-1.5 rounded-lg {% if '/queries' in request.url.path %}bg-gradient-to-br from-indigo-500 to-purple-600 text-white shadow-md{% else %}bg-gray-100 text-gray-500 group-hover:bg-gray-200{% endif %}">
+                <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
+                </svg>
+            </div>
+            SQL Queries
+        </a>
+
+        <!-- Operations Section -->
+        <div class="mt-6 pt-4 border-t border-gray-100">
+            <p class="px-3 text-xs font-bold text-gray-400 uppercase tracking-widest mb-2">Operations</p>
+        </div>
+
+        <a href="/cleanup"
+           class="group flex items-center px-3 py-2.5 text-sm font-semibold rounded-xl transition-all duration-200 {% if '/cleanup' in request.url.path %}bg-gradient-to-r from-rose-50 to-orange-50 text-rose-700 shadow-sm{% else %}text-gray-600 hover:bg-gray-50 hover:text-gray-900{% endif %}">
+            <div class="mr-3 p-1.5 rounded-lg {% if '/cleanup' in request.url.path %}bg-gradient-to-br from-rose-500 to-orange-500 text-white shadow-md{% else %}bg-gray-100 text-gray-500 group-hover:bg-gray-200{% endif %}">
+                <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
+                </svg>
+            </div>
+            Cleanup
+        </a>
+
+        <a href="/audit"
+           class="group flex items-center px-3 py-2.5 text-sm font-semibold rounded-xl transition-all duration-200 {% if '/audit' in request.url.path %}bg-gradient-to-r from-indigo-50 to-purple-50 text-indigo-700 shadow-sm{% else %}text-gray-600 hover:bg-gray-50 hover:text-gray-900{% endif %}">
+            <div class="mr-3 p-1.5 rounded-lg {% if '/audit' in request.url.path %}bg-gradient-to-br from-indigo-500 to-purple-600 text-white shadow-md{% else %}bg-gray-100 text-gray-500 group-hover:bg-gray-200{% endif %}">
+                <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
+                </svg>
+            </div>
+            Audit Logs
+        </a>
+    </nav>
+</aside>

src/web/templates/pages/audit_logs.html

@@ -0,0 +1,86 @@
+{% extends "base.html" %}
+
+{% block title %}Audit Logs - AWS Inventory Browser{% endblock %}
+
+{% block content %}
+<div class="space-y-6">
+    <div class="md:flex md:items-center md:justify-between">
+        <div class="min-w-0 flex-1">
+            <h1 class="text-2xl font-bold leading-7 text-gray-900 sm:truncate sm:text-3xl">Audit Logs</h1>
+            <p class="mt-1 text-sm text-gray-500">History of cleanup operations and their results</p>
+        </div>
+    </div>
+
+    <!-- Operations List -->
+    <div class="bg-white shadow rounded-lg overflow-hidden">
+        {% if operations %}
+        <table class="min-w-full divide-y divide-gray-200">
+            <thead class="bg-gray-50">
+                <tr>
+                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Operation</th>
+                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Baseline</th>
+                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Timestamp</th>
+                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Results</th>
+                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
+                </tr>
+            </thead>
+            <tbody class="bg-white divide-y divide-gray-200">
+                {% for op in operations %}
+                <tr class="hover:bg-gray-50">
+                    <td class="px-6 py-4 whitespace-nowrap">
+                        <div class="text-sm font-medium text-gray-900">{{ op.operation_id[:12] }}...</div>
+                        <div class="text-xs text-gray-500">{{ op.mode | default('cleanup') }}</div>
+                    </td>
+                    <td class="px-6 py-4 whitespace-nowrap">
+                        <a href="/snapshots/{{ op.baseline_snapshot }}" class="text-sm text-blue-600 hover:text-blue-500">
+                            {{ op.baseline_snapshot }}
+                        </a>
+                    </td>
+                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                        {{ op.timestamp }}
+                    </td>
+                    <td class="px-6 py-4 whitespace-nowrap">
+                        <div class="flex items-center space-x-2">
+                            <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800">
+                                {{ op.succeeded_count | default(0) }} succeeded
+                            </span>
+                            {% if op.failed_count %}
+                            <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-red-100 text-red-800">
+                                {{ op.failed_count }} failed
+                            </span>
+                            {% endif %}
+                            {% if op.skipped_count %}
+                            <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-800">
+                                {{ op.skipped_count }} skipped
+                            </span>
+                            {% endif %}
+                        </div>
+                    </td>
+                    <td class="px-6 py-4 whitespace-nowrap">
+                        {% set status_colors = {'completed': 'green', 'failed': 'red', 'partial': 'amber', 'running': 'blue'} %}
+                        {% set color = status_colors.get(op.status, 'gray') %}
+                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-{{ color }}-100 text-{{ color }}-800">
+                            {{ op.status }}
+                        </span>
+                    </td>
+                </tr>
+                {% endfor %}
+            </tbody>
+        </table>
+        {% else %}
+        <div class="p-12 text-center">
+            <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
+            </svg>
+            <h3 class="mt-2 text-sm font-medium text-gray-900">No audit logs</h3>
+            <p class="mt-1 text-sm text-gray-500">Cleanup operations will appear here after they are executed.</p>
+            <div class="mt-6">
+                <a href="/cleanup" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700">
+                    Go to Cleanup
+                </a>
+            </div>
+        </div>
+        {% endif %}
+    </div>
+</div>
+{% endblock %}

src/web/templates/pages/cleanup.html

@@ -0,0 +1,279 @@
+{% extends "base.html" %}
+
+{% block title %}Cleanup Operations - AWS Inventory Browser{% endblock %}
+
+{% block content %}
+<div class="space-y-6" x-data="{
+    snapshot: '',
+    dryRun: true,
+    loading: false,
+    previewResults: null,
+    error: null,
+    showConfirmModal: false,
+    confirmText: ''
+}">
+    <div class="md:flex md:items-center md:justify-between">
+        <div class="min-w-0 flex-1">
+            <h1 class="text-2xl font-bold leading-7 text-gray-900 sm:truncate sm:text-3xl">Cleanup Operations</h1>
+            <p class="mt-1 text-sm text-gray-500">Remove resources that were created after a baseline snapshot</p>
+        </div>
+    </div>
+
+    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        <!-- Configuration Panel -->
+        <div class="lg:col-span-1 space-y-4">
+            <div class="bg-white shadow rounded-lg p-6">
+                <h3 class="text-lg font-medium text-gray-900 mb-4">Configuration</h3>
+
+                <div class="space-y-4">
+                    <div>
+                        <label for="snapshot" class="block text-sm font-medium text-gray-700">Baseline Snapshot</label>
+                        <select id="snapshot" x-model="snapshot"
+                                class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm">
+                            <option value="">Select a snapshot...</option>
+                            {% for s in snapshots %}
+                            <option value="{{ s.name }}">{{ s.name }} ({{ s.resource_count | format_number }} resources)</option>
+                            {% endfor %}
+                        </select>
+                        <p class="mt-1 text-xs text-gray-500">Resources created after this snapshot will be candidates for cleanup</p>
+                    </div>
+
+                    <div class="pt-4 border-t border-gray-200">
+                        <button @click="previewCleanup()"
+                                :disabled="!snapshot || loading"
+                                class="w-full inline-flex justify-center items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed">
+                            <svg class="-ml-1 mr-2 h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
+                            </svg>
+                            <span x-text="loading ? 'Loading...' : 'Preview Cleanup'"></span>
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Warning Card -->
+            <div class="bg-amber-50 border border-amber-200 rounded-lg p-4">
+                <div class="flex">
+                    <div class="flex-shrink-0">
+                        <svg class="h-5 w-5 text-amber-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
+                        </svg>
+                    </div>
+                    <div class="ml-3">
+                        <h3 class="text-sm font-medium text-amber-800">Caution</h3>
+                        <p class="mt-1 text-sm text-amber-700">
+                            Cleanup operations delete AWS resources. Always preview first and verify the resources before executing.
+                        </p>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Audit History -->
+            <div class="bg-white shadow rounded-lg">
+                <div class="px-4 py-3 border-b border-gray-200">
+                    <h3 class="text-sm font-medium text-gray-900">Recent Operations</h3>
+                </div>
+                <div id="audit-history"
+                     hx-get="/api/cleanup/operations?limit=5"
+                     hx-trigger="load"
+                     hx-swap="innerHTML"
+                     class="divide-y divide-gray-200 max-h-64 overflow-y-auto">
+                    <div class="p-4 text-center text-gray-500 text-sm">Loading...</div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Results Panel -->
+        <div class="lg:col-span-2">
+            <div x-show="!previewResults && !error" class="bg-white shadow rounded-lg p-8 text-center">
+                <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
+                </svg>
+                <h3 class="mt-2 text-sm font-medium text-gray-900">No Preview</h3>
+                <p class="mt-1 text-sm text-gray-500">Select a baseline snapshot and click Preview to see cleanup candidates</p>
+            </div>
+
+            <!-- Preview Results -->
+            <div x-show="previewResults" x-cloak class="space-y-4">
+                <!-- Summary Stats -->
+                <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
+                    <div class="bg-white shadow rounded-lg p-4">
+                        <p class="text-sm font-medium text-gray-500">Total Candidates</p>
+                        <p class="text-2xl font-bold text-gray-900" x-text="previewResults?.total || 0"></p>
+                    </div>
+                    <div class="bg-white shadow rounded-lg p-4">
+                        <p class="text-sm font-medium text-gray-500">Resource Types</p>
+                        <p class="text-2xl font-bold text-gray-900" x-text="Object.keys(previewResults?.by_type || {}).length"></p>
+                    </div>
+                    <div class="bg-white shadow rounded-lg p-4">
+                        <p class="text-sm font-medium text-gray-500">Regions</p>
+                        <p class="text-2xl font-bold text-gray-900" x-text="Object.keys(previewResults?.by_region || {}).length"></p>
+                    </div>
+                </div>
+
+                <!-- Resource List -->
+                <div class="bg-white shadow rounded-lg overflow-hidden">
+                    <div class="px-4 py-3 border-b border-gray-200 flex items-center justify-between">
+                        <h3 class="text-sm font-medium text-gray-900">Resources to Delete</h3>
+                        <button @click="showConfirmModal = true"
+                                :disabled="!previewResults?.resources?.length"
+                                class="inline-flex items-center px-3 py-1 border border-transparent text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700 disabled:opacity-50">
+                            <svg class="-ml-0.5 mr-1.5 h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
+                            </svg>
+                            Execute Cleanup
+                        </button>
+                    </div>
+                    <div class="overflow-x-auto max-h-96">
+                        <table class="min-w-full divide-y divide-gray-200">
+                            <thead class="bg-gray-50 sticky top-0">
+                                <tr>
+                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Resource</th>
+                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
+                                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Region</th>
+                                </tr>
+                            </thead>
+                            <tbody class="bg-white divide-y divide-gray-200">
+                                <template x-for="r in previewResults?.resources?.slice(0, 100)" :key="r.arn">
+                                    <tr class="hover:bg-gray-50">
+                                        <td class="px-6 py-3 whitespace-nowrap">
+                                            <div class="text-sm font-medium text-gray-900" x-text="r.name"></div>
+                                            <div class="text-xs text-gray-500 truncate max-w-xs" x-text="r.arn"></div>
+                                        </td>
+                                        <td class="px-6 py-3 whitespace-nowrap">
+                                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800" x-text="r.resource_type"></span>
+                                        </td>
+                                        <td class="px-6 py-3 whitespace-nowrap text-sm text-gray-500" x-text="r.region"></td>
+                                    </tr>
+                                </template>
+                            </tbody>
+                        </table>
+                    </div>
+                    <div x-show="previewResults?.resources?.length > 100" class="px-4 py-2 bg-gray-50 text-sm text-gray-500 text-center">
+                        Showing 100 of <span x-text="previewResults?.total"></span> resources
+                    </div>
+                </div>
+            </div>
+
+            <!-- Error -->
+            <div x-show="error" x-cloak class="bg-red-50 border border-red-200 rounded-lg p-4">
+                <p class="text-red-800" x-text="error"></p>
+            </div>
+        </div>
+    </div>
+
+    <!-- Confirm Modal -->
+    <div x-show="showConfirmModal" x-cloak class="fixed z-10 inset-0 overflow-y-auto">
+        <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+            <div class="fixed inset-0 bg-gray-500 bg-opacity-75" @click="showConfirmModal = false"></div>
+            <div class="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6">
+                <div class="sm:flex sm:items-start">
+                    <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
+                        <svg class="h-6 w-6 text-red-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
+                        </svg>
+                    </div>
+                    <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+                        <h3 class="text-lg font-medium text-gray-900">Confirm Cleanup Execution</h3>
+                        <div class="mt-2">
+                            <p class="text-sm text-gray-500">
+                                This will permanently delete <span class="font-bold text-red-600" x-text="previewResults?.total"></span> AWS resources.
+                                This action cannot be undone.
+                            </p>
+                            <p class="mt-3 text-sm text-gray-700">
+                                Type <span class="font-mono font-bold text-red-600">DELETE</span> to confirm:
+                            </p>
+                            <input type="text" x-model="confirmText"
+                                   class="mt-2 block w-full rounded-md border-gray-300 shadow-sm focus:border-red-500 focus:ring-red-500 sm:text-sm"
+                                   placeholder="Type DELETE to confirm">
+                        </div>
+                    </div>
+                </div>
+                <div class="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
+                    <button @click="executeCleanup()"
+                            :disabled="confirmText !== 'DELETE'"
+                            class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 disabled:opacity-50 sm:ml-3 sm:w-auto sm:text-sm">
+                        Execute Cleanup
+                    </button>
+                    <button @click="showConfirmModal = false; confirmText = ''"
+                            class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 sm:mt-0 sm:w-auto sm:text-sm">
+                        Cancel
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script>
+    // Handle audit history response
+    document.body.addEventListener('htmx:afterSwap', function(evt) {
+        if (evt.detail.target.id === 'audit-history') {
+            const data = JSON.parse(evt.detail.xhr.responseText);
+            renderAuditHistory(data.operations || [], evt.detail.target);
+        }
+    });
+
+    function renderAuditHistory(operations, target) {
+        if (operations.length === 0) {
+            target.innerHTML = '<div class="p-4 text-center text-gray-500 text-sm">No cleanup operations yet</div>';
+            return;
+        }
+
+        let html = '';
+        operations.forEach(op => {
+            const statusColor = op.status === 'completed' ? 'green' : op.status === 'failed' ? 'red' : 'amber';
+            html += `
+                <div class="px-4 py-3">
+                    <div class="flex items-center justify-between">
+                        <p class="text-sm font-medium text-gray-900">${op.baseline_snapshot}</p>
+                        <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-${statusColor}-100 text-${statusColor}-800">
+                            ${op.status}
+                        </span>
+                    </div>
+                    <p class="text-xs text-gray-500">${op.timestamp}</p>
+                    <p class="text-xs text-gray-600 mt-1">
+                        ${op.succeeded_count || 0} deleted, ${op.failed_count || 0} failed
+                    </p>
+                </div>
+            `;
+        });
+        target.innerHTML = html;
+    }
+
+    function previewCleanup() {
+        const data = Alpine.$data(document.querySelector('[x-data]'));
+        data.loading = true;
+        data.error = null;
+        data.previewResults = null;
+
+        fetch(`/api/cleanup/preview?snapshot=${data.snapshot}`)
+            .then(r => r.json())
+            .then(result => {
+                if (result.detail) {
+                    data.error = result.detail;
+                } else {
+                    data.previewResults = result;
+                }
+                data.loading = false;
+            })
+            .catch(err => {
+                data.error = err.message;
+                data.loading = false;
+            });
+    }
+
+    function executeCleanup() {
+        const data = Alpine.$data(document.querySelector('[x-data]'));
+
+        // Note: In a real implementation, this would execute the cleanup
+        // For now, just show a message and close the modal
+        alert('Cleanup execution is not available in the web UI for safety. Please use the CLI: awsinv cleanup execute --snapshot ' + data.snapshot);
+        data.showConfirmModal = false;
+        data.confirmText = '';
+    }
+</script>
+{% endblock %}