feat: Ansible source manager UI — replace raw JSON textarea

- Replace the raw JSON textarea in Settings → Ansible with a proper
  per-source card UI: add, inline-edit, remove, and git-sync each
  source independently via HTMX without a page reload
- Each source card shows type badge (git/local), URL or path, branch,
  and pull interval; git sources get a Sync button that triggers
  git pull and returns inline status
- Add source form uses a type-aware select that shows URL/branch/interval
  fields for git or path field for local, collapsed in a details accordion
- Add new settings routes: sources/add, sources/<idx>/remove,
  sources/<idx>/save, sources/<idx>/sync
- Update browse.html and run_detail.html to use CSS vars throughout
  (removed hardcoded hex colors); link empty state to Settings page

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

fabledscryer/templates/ansible/browse.html

@@ -3,23 +3,23 @@
 {% block content %}
 <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;">
     <h1 class="page-title" style="margin-bottom:0;">Browse Playbooks</h1>
-    <a href="/ansible/" style="color:#a0a0ff;font-size:0.9rem;">← Run History</a>
+    <a href="/ansible/" class="btn btn-ghost btn-sm">← Run History</a>
 </div>
 
 {% if view_contents is defined %}
 <div class="card">
     <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;">
         <h3 class="section-title">{{ view_path }}</h3>
-        <a href="/ansible/browse" style="color:#a0a0ff;font-size:0.85rem;">← Back to browse</a>
+        <a href="/ansible/browse" class="btn btn-ghost btn-sm">← Back to browse</a>
     </div>
-    <pre style="background:#0a0a1a;padding:1rem;border-radius:4px;overflow-x:auto;font-size:0.8rem;color:#c0c0c0;max-height:600px;overflow-y:auto;">{{ view_contents }}</pre>
+    <pre style="background:var(--bg);padding:1rem;border-radius:4px;overflow-x:auto;font-size:0.8rem;color:var(--text-muted);max-height:600px;overflow-y:auto;">{{ view_contents }}</pre>
 </div>
 {% endif %}
 
 {% if not source_data %}
 {% if view_contents is not defined %}
 <div class="card">
-    <p style="color:#606080;">No Ansible sources configured. Add sources under <code>ansible.sources</code> in <code>config.yaml</code>.</p>
+    <p style="color:var(--text-muted);">No Ansible sources configured. <a href="/settings/ansible/">Add sources in Settings → Ansible</a>.</p>
 </div>
 {% endif %}
 {% else %}
@@ -27,8 +27,8 @@
 <div class="card" style="margin-bottom:1.5rem;">
     <div style="display:flex;align-items:center;gap:0.75rem;margin-bottom:1rem;">
         <h3 class="section-title">{{ sd.source.name }}</h3>
-        <span style="color:#404060;font-size:0.8rem;background:#12122a;padding:0.2rem 0.5rem;border-radius:3px;">{{ sd.source.type }}</span>
-        <span style="color:#505070;font-size:0.8rem;">{{ sd.source.path }}</span>
+        <span style="color:var(--text-muted);font-size:0.8rem;background:var(--bg-elevated);padding:0.2rem 0.5rem;border-radius:3px;">{{ sd.source.type }}</span>
+        <span style="color:var(--text-dim);font-size:0.8rem;">{{ sd.source.path }}</span>
     </div>
 
     {% if not sd.playbooks %}