Add Nav-I dashboard section with restore-as conflict resolution

- Create Nav-I top-level section in dashboard navigation
- Move Deleted Contacts from Knowledge subnav to Nav-I
- Add Nav-I landing page with card grid (deleted count, API keys stub)
- Add /nav-i/api-keys placeholder page
- Add restore-as endpoint for Home/Work conflict resolution
- Conflict modal in deleted contacts template for label rename on restore

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

templates/navi/api_keys.html

@@ -0,0 +1,8 @@
+{% extends "base.html" %}
+{% block content %}
+<h3 style="color:var(--orange);margin-bottom:16px;">API Keys</h3>
+<div class="panel">
+    <p class="text-dim">Per-user API key management is coming soon.</p>
+    <p class="text-dim" style="margin-top:8px;font-size:11px;">This will allow generating keys for programmatic access to the Navi contacts API.</p>
+</div>
+{% endblock %}

templates/navi/deleted_contacts.html

@@ -0,0 +1,116 @@
+{% extends "base.html" %}
+{% block content %}
+<h3 style="color:var(--orange);margin-bottom:16px;">Deleted Contacts</h3>
+{% if not contacts %}
+<p class="text-dim">No deleted contacts.</p>
+{% else %}
+<table>
+    <tr><th>Label</th><th>Name</th><th>Category</th><th>Phone</th><th>Deleted At</th><th>Actions</th></tr>
+    {% for c in contacts %}
+    <tr id="row-{{ c.id }}">
+        <td>{{ c.label }}</td>
+        <td>{{ c.name or '' }}</td>
+        <td class="text-dim">{{ c.category or '' }}</td>
+        <td class="text-dim text-xs">{{ c.phone or '' }}</td>
+        <td class="text-dim text-xs">{{ c.deleted_at or '' }}</td>
+        <td>
+            <button class="btn" onclick="restoreContact({{ c.id }}, '{{ c.label }}')">Restore</button>
+            <button class="btn" style="margin-left:4px;color:#ff4444;" onclick="purgeContact({{ c.id }})">Purge</button>
+        </td>
+    </tr>
+    {% endfor %}
+</table>
+{% endif %}
+
+<!-- Conflict resolution modal -->
+<div id="conflict-modal" style="display:none;position:fixed;inset:0;z-index:50;background:rgba(0,0,0,0.6);align-items:center;justify-content:center;">
+    <div style="background:var(--bg-secondary);border:1px solid var(--border-light);padding:24px;max-width:400px;width:90%;">
+        <h4 style="color:var(--orange);margin-bottom:12px;">Label Conflict</h4>
+        <p class="text-dim" style="margin-bottom:16px;">An active contact with the label "<span id="conflict-label" style="color:var(--text-primary);"></span>" already exists. Choose a new label to restore this contact:</p>
+        <input id="conflict-new-label" type="text" placeholder="New label..." style="width:100%;padding:6px 10px;background:var(--bg-tertiary);border:1px solid var(--border-light);color:var(--text-primary);font-family:var(--font-mono);font-size:13px;margin-bottom:16px;">
+        <div style="display:flex;gap:8px;justify-content:flex-end;">
+            <button class="btn" onclick="closeConflictModal()">Cancel</button>
+            <button class="btn" id="conflict-submit" onclick="submitRestoreAs()" style="border-color:var(--green);color:var(--green);">Restore As</button>
+        </div>
+    </div>
+</div>
+{% endblock %}
+{% block scripts %}
+<script>
+var pendingRestoreId = null;
+
+async function restoreContact(id, label) {
+    try {
+        var resp = await fetch('/api/contacts/' + id + '/restore', {method: 'POST'});
+        if (resp.ok) {
+            location.reload();
+        } else if (resp.status === 409) {
+            // Home/Work conflict — show modal
+            pendingRestoreId = id;
+            document.getElementById('conflict-label').textContent = label;
+            document.getElementById('conflict-new-label').value = '';
+            var modal = document.getElementById('conflict-modal');
+            modal.style.display = 'flex';
+            document.getElementById('conflict-new-label').focus();
+        } else {
+            var data = await resp.json();
+            alert(data.error || 'Restore failed');
+        }
+    } catch(e) {
+        alert('Error: ' + e.message);
+    }
+}
+
+function closeConflictModal() {
+    document.getElementById('conflict-modal').style.display = 'none';
+    pendingRestoreId = null;
+}
+
+async function submitRestoreAs() {
+    var newLabel = document.getElementById('conflict-new-label').value.trim();
+    if (!newLabel) {
+        document.getElementById('conflict-new-label').style.borderColor = 'var(--red)';
+        return;
+    }
+    try {
+        var resp = await fetch('/api/contacts/' + pendingRestoreId + '/restore-as', {
+            method: 'POST',
+            headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify({label: newLabel})
+        });
+        if (resp.ok) {
+            location.reload();
+        } else {
+            var data = await resp.json();
+            alert(data.error || 'Restore failed');
+        }
+    } catch(e) {
+        alert('Error: ' + e.message);
+    }
+}
+
+async function purgeContact(id) {
+    if (!confirm('Permanently delete this contact? This cannot be undone.')) return;
+    try {
+        var resp = await fetch('/api/contacts/' + id + '/purge', {method: 'DELETE'});
+        if (resp.ok) {
+            location.reload();
+        } else {
+            var data = await resp.json();
+            alert(data.error || 'Purge failed');
+        }
+    } catch(e) {
+        alert('Error: ' + e.message);
+    }
+}
+
+// Close modal on Escape key
+document.addEventListener('keydown', function(e) {
+    if (e.key === 'Escape') closeConflictModal();
+});
+// Close modal on backdrop click
+document.getElementById('conflict-modal').addEventListener('click', function(e) {
+    if (e.target === this) closeConflictModal();
+});
+</script>
+{% endblock %}

templates/navi/landing.html

@@ -0,0 +1,22 @@
+{% extends "base.html" %}
+{% block content %}
+<h3 style="color:var(--green);margin-bottom:16px;">Nav-I</h3>
+<p class="text-dim" style="margin-bottom:24px;">Navi frontend management — contacts, API keys, and configuration.</p>
+
+<div class="stat-grid">
+    <a href="/deleted-contacts" style="text-decoration:none;">
+        <div class="stat-card" style="cursor:pointer;transition:border-color 0.15s;">
+            <div class="label">Deleted Contacts</div>
+            <div class="value">{{ deleted_count }}</div>
+            <div class="sublabel">awaiting restore or purge</div>
+        </div>
+    </a>
+    <a href="/nav-i/api-keys" style="text-decoration:none;">
+        <div class="stat-card" style="cursor:pointer;transition:border-color 0.15s;">
+            <div class="label">API Keys</div>
+            <div class="value" style="font-size:14px;color:var(--text-dim);margin-top:12px;">Coming soon</div>
+            <div class="sublabel">per-user key management</div>
+        </div>
+    </a>
+</div>
+{% endblock %}