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 %}

fabledscryer/templates/ansible/run_detail.html

@@ -2,33 +2,33 @@
 {% block title %}Run {{ run.id[:8] }} — Fabled Scryer{% endblock %}
 {% block content %}
 <div style="display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem;">
-    <a href="/ansible/" style="color:#6060c0;font-size:0.9rem;">← Runs</a>
+    <a href="/ansible/" class="btn btn-ghost btn-sm">← Runs</a>
     <h1 class="page-title" style="margin-bottom:0;">Run Detail</h1>
 </div>
 
-{% set status_color = {"running": "#a0a000", "success": "#40a040", "failed": "#a04040", "interrupted": "#806040"}.get(run.status.value, "#808080") %}
+{% set status_color = {"running": "var(--yellow)", "success": "var(--green)", "failed": "var(--red)", "interrupted": "var(--orange)"}.get(run.status.value, "var(--text-muted)") %}
 <div class="card">
     <div style="display:grid;grid-template-columns:auto 1fr;gap:0.4rem 1rem;font-size:0.9rem;margin-bottom:1rem;">
-        <span style="color:#606080;">ID</span><span style="color:#a0a0c0;font-family:monospace;">{{ run.id }}</span>
-        <span style="color:#606080;">Playbook</span><span style="color:#e0e0e0;">{{ run.playbook_path }}</span>
-        <span style="color:#606080;">Inventory</span><span style="color:#e0e0e0;">{{ run.inventory_path }}</span>
-        <span style="color:#606080;">Source</span><span style="color:#e0e0e0;">{{ run.source_name }}</span>
-        <span style="color:#606080;">Status</span><span style="color:{{ status_color }};font-weight:bold;">{{ run.status.value.upper() }}</span>
-        <span style="color:#606080;">Started</span><span style="color:#a0a0c0;">{{ run.started_at.strftime("%Y-%m-%d %H:%M:%S UTC") }}</span>
+        <span style="color:var(--text-muted);">ID</span><span style="color:var(--text-dim);font-family:monospace;">{{ run.id }}</span>
+        <span style="color:var(--text-muted);">Playbook</span><span>{{ run.playbook_path }}</span>
+        <span style="color:var(--text-muted);">Inventory</span><span>{{ run.inventory_path }}</span>
+        <span style="color:var(--text-muted);">Source</span><span>{{ run.source_name }}</span>
+        <span style="color:var(--text-muted);">Status</span><span style="color:{{ status_color }};font-weight:bold;">{{ run.status.value.upper() }}</span>
+        <span style="color:var(--text-muted);">Started</span><span style="color:var(--text-dim);">{{ run.started_at.strftime("%Y-%m-%d %H:%M:%S UTC") }}</span>
         {% if run.finished_at %}
-        <span style="color:#606080;">Finished</span><span style="color:#a0a0c0;">{{ run.finished_at.strftime("%Y-%m-%d %H:%M:%S UTC") }}</span>
+        <span style="color:var(--text-muted);">Finished</span><span style="color:var(--text-dim);">{{ run.finished_at.strftime("%Y-%m-%d %H:%M:%S UTC") }}</span>
         {% endif %}
     </div>
 </div>
 
 <div class="card" style="padding:0;">
-    <div style="padding:0.75rem 1rem;background:#12122a;border-bottom:1px solid #2a2a4a;">
-        <span style="color:#a0a0c0;font-size:0.85rem;">Output</span>
+    <div style="padding:0.75rem 1rem;background:var(--bg-elevated);border-bottom:1px solid var(--border);">
+        <span style="color:var(--text-muted);font-size:0.85rem;">Output</span>
     </div>
     {% if run.status.value == "running" %}
     <pre id="live-output"
-         style="margin:0;padding:1rem;background:#080810;font-size:0.78rem;color:#a0c0a0;max-height:600px;overflow-y:auto;white-space:pre-wrap;">{{ run.output or "" }}</pre>
-    <div id="run-done-status" style="padding:0.5rem 1rem;font-size:0.85rem;color:#606080;">
+         style="margin:0;padding:1rem;background:var(--bg);font-size:0.78rem;color:var(--green);max-height:600px;overflow-y:auto;white-space:pre-wrap;">{{ run.output or "" }}</pre>
+    <div id="run-done-status" style="padding:0.5rem 1rem;font-size:0.85rem;color:var(--text-muted);">
         Streaming…
     </div>
     <script>
@@ -47,7 +47,7 @@
     })();
     </script>
     {% else %}
-    <pre style="margin:0;padding:1rem;background:#080810;font-size:0.78rem;color:#a0c0a0;max-height:600px;overflow-y:auto;white-space:pre-wrap;">{{ run.output or "(no output)" }}</pre>
+    <pre style="margin:0;padding:1rem;background:var(--bg);font-size:0.78rem;color:var(--text-muted);max-height:600px;overflow-y:auto;white-space:pre-wrap;">{{ run.output or "(no output)" }}</pre>
     {% endif %}
 </div>
 {% endblock %}