minor UI fixes

src/components/LorePanel.tsx

@@ -23,6 +23,7 @@ export function LorePanel() {
   const [query, setQuery] = useState("");
   const [hits, setHits] = useState<RagHit[]>([]);
   const [searching, setSearching] = useState(false);
+  const [confirmClear, setConfirmClear] = useState(false);
 
   async function loadSources() {
     try {
@@ -59,6 +60,7 @@ export function LorePanel() {
 
   async function clearAll() {
     await invoke("rag_clear", { source: null });
+    setConfirmClear(false);
     loadSources();
   }
 
@@ -105,12 +107,30 @@ export function LorePanel() {
         <div className="flex items-center justify-between">
           <h3 className="font-heading text-[var(--color-gold-bright)] text-sm">Indexed Sources</h3>
           {sources.length > 0 && (
-            <button
-              onClick={clearAll}
-              className="text-xs text-[var(--color-text-dim)] hover:text-[var(--color-danger)] cursor-pointer transition-colors"
-            >
-              clear all
-            </button>
+            confirmClear ? (
+              <div className="flex items-center gap-1">
+                <span className="text-[10px] text-[var(--color-danger)]">Clear all sources?</span>
+                <button
+                  onClick={clearAll}
+                  className="rounded bg-[var(--color-danger)] text-white px-2 py-0.5 text-[10px] font-semibold cursor-pointer"
+                >
+                  Yes
+                </button>
+                <button
+                  onClick={() => setConfirmClear(false)}
+                  className="rounded bg-[var(--color-bg-surface)] border border-[var(--color-border-subtle)] text-[var(--color-text-dim)] px-2 py-0.5 text-[10px] cursor-pointer"
+                >
+                  No
+                </button>
+              </div>
+            ) : (
+              <button
+                onClick={() => setConfirmClear(true)}
+                className="text-xs text-[var(--color-text-dim)] hover:text-[var(--color-danger)] cursor-pointer transition-colors"
+              >
+                clear all
+              </button>
+            )
           )}
         </div>
         {sources.length === 0 ? (
@@ -160,7 +180,13 @@ export function LorePanel() {
               <li key={i} className="rounded-lg bg-[var(--color-bg-surface)] border border-[var(--color-border-glass)] p-2">
                 <div className="flex items-center justify-between mb-1">
                   <span className="text-[10px] text-[var(--color-gold-bright)]">{h.source}</span>
-                  <span className="text-[10px] text-[var(--color-text-dim)]">score {h.score.toFixed(3)}</span>
+                  {/* ponytail: relevance bar instead of a raw cosine score a
+                      DM can't read. Clamp 0–1, gold fill. */}
+                  <div className="flex items-center gap-1.5">
+                    <div className="w-12 h-1 rounded-full bg-[var(--color-bg-deep)] overflow-hidden">
+                      <div className="h-full bg-[var(--color-gold-bright)]" style={{ width: `${Math.round(Math.max(0, Math.min(1, h.score)) * 100)}%` }} />
+                    </div>
+                  </div>
                 </div>
                 <p className="text-xs text-[var(--color-text-primary)] leading-relaxed whitespace-pre-wrap">{h.text}</p>
               </li>