Update app.py

app.py

@@ -496,6 +496,39 @@ def normalise_history(history: list) -> List[Tuple[str, str]]:
     return [(str(u or ""), str(a or "")) for u, a in history]
 
 
+def _source_chip(results: list) -> str:
+    """
+    Build a compact Markdown source-chip line from the top retrieved results.
+    Uses HTML inline (Gradio renders it inside bot messages) so we can style it properly.
+    Only shows unique filenames, ordered by relevance score, max 3.
+    """
+    seen: list = []
+    for _, src, score in results:
+        if src not in seen and score >= MIN_SIMILARITY:
+            seen.append(src)
+        if len(seen) == 3:
+            break
+    if not seen:
+        return ""
+
+    ext_icons = {".pdf": "📄", ".docx": "📝", ".doc": "📝", ".md": "📋", ".txt": "📃"}
+    chips = []
+    for name in seen:
+        ext  = os.path.splitext(name)[1].lower()
+        icon = ext_icons.get(ext, "📄")
+        chips.append(
+            f'<span class="src-chip"><span class="src-chip-icon">{icon}</span>'
+            f'<span class="src-chip-name">{name}</span></span>'
+        )
+
+    return (
+        '\n\n<div class="src-row">'
+        '<span class="src-label">Source</span>'
+        + "".join(chips)
+        + '</div>'
+    )
+
+
 def build_answer(query: str, history: list) -> str:
     """Full RAG pipeline: FAISS retrieve → sentence re-rank → FLAN-T5 generate."""
     results = kb_index.retrieve(query)
@@ -514,15 +547,17 @@ def build_answer(query: str, history: list) -> str:
             "Please try rephrasing your question."
         )
 
+    chip = _source_chip(results)
     answer = generate_answer(query, context)
 
     if answer:
-        return answer
+        return answer + chip
 
     # Extractive fallback — surface the top re-ranked sentences directly
     return (
         "Here's the most relevant information I found:\n\n"
         + "\n".join(f"- {s}" for s in context.split("\n") if s.strip())
+        + chip
     )
 
 
@@ -678,13 +713,23 @@ def list_kb_files_html() -> str:
           <span class="kb-file-icon">{icon}</span>
           <span class="kb-file-name" title="{safe}">{name}</span>
           <div class="kb-file-actions">
-            <button class="kb-action-btn" title="Delete"
-              onclick="kbAction('delete','{safe}')">🗑</button>
-            <button class="kb-action-btn" title="Replace"
+            <button class="kb-action-btn" title="Rename"
+              onclick="kbAction('rename','{safe}')">✎</button>
+            <button class="kb-action-btn" title="Replace file"
               onclick="kbAction('replace','{safe}')">↺</button>
+            <button class="kb-action-btn del" title="Delete"
+              onclick="kbAction('delete','{safe}')">🗑</button>
           </div>
+        </div>
+        <div class="kb-rename-row" id="rrow-{safe}">
+          <input class="kb-rename-input" placeholder="{safe}" id="rinput-{safe}"/>
+          <button class="kb-rename-save" onclick="kbSaveRename('{safe}')">Save</button>
+          <button class="kb-rename-cancel" onclick="kbCancelRename('{safe}')">✕</button>
         </div>"""
-    return items
+    count = len(paths)
+    return f'''<div style="padding:4px 8px 2px;font-size:.68rem;color:var(--muted2)">
+      {count} file{"s" if count != 1 else ""} indexed
+    </div>''' + items
 
 
 def rename_kb_file(old_name: str, new_name: str) -> Tuple[str, str]:
@@ -709,269 +754,406 @@ def rename_kb_file(old_name: str, new_name: str) -> Tuple[str, str]:
 # ── CSS ────────────────────────────────────────────────────────────────────────
 
 STYLE_HTML = """<style>
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+
 :root {
-  --sage:#6b8f71; --sage-l:#eaf2eb; --sage-d:#4f6e55;
-  --sand:#f5f0e8; --cream:#fdfaf5; --stone:#e4ddd3; --stone2:#d4cdc3;
-  --ink:#2d2d2d;  --muted:#7a7167; --muted2:#a09890;
-  --rose:#c0717a; --rose-l:#f8eded;
-  --r:12px; --sh:0 2px 12px rgba(0,0,0,.08);
+  /* Palette */
+  --sage:#6b8f71;   --sage-l:#eaf2eb;  --sage-d:#4f6e55;  --sage-xl:#f2f8f3;
+  --sand:#f5f0e8;   --cream:#fdfaf5;   --stone:#e4ddd3;   --stone2:#d0c8bd;
+  --ink:#2d2d2d;    --ink2:#4a4540;    --muted:#7a7167;   --muted2:#a09890;
+  --rose:#c0717a;   --rose-l:#f8eded;
+  /* Spacing & shape */
+  --r:13px; --r-sm:8px; --r-xs:5px;
+  /* Shadows */
+  --sh-sm: 0 1px 3px rgba(0,0,0,.07);
+  --sh:    0 2px 10px rgba(0,0,0,.08);
+  --sh-md: 0 4px 20px rgba(0,0,0,.10);
+  --sh-lg: 0 8px 32px rgba(0,0,0,.13);
 }
+
 *, *::before, *::after { box-sizing: border-box; }
+
 body, .gradio-container {
   background: var(--sand) !important;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
   color: var(--ink) !important;
+  -webkit-font-smoothing: antialiased;
 }
 .gradio-container { padding: 0 !important; max-width: 100% !important; }
 
-/* ── Header ─────────────────────────────────────────────────── */
+/* ── Header ─────────────────────────────────────────── */
 .app-hdr {
-  background: var(--cream); border-bottom: 1px solid var(--stone);
-  padding: 13px 20px; display: flex; align-items: center; gap: 12px;
-  position: sticky; top: 0; z-index: 10;
+  background: var(--cream);
+  border-bottom: 1px solid var(--stone);
+  padding: 0 24px;
+  height: 58px;
+  display: flex; align-items: center; gap: 13px;
+  position: sticky; top: 0; z-index: 20;
+  box-shadow: var(--sh-sm);
 }
 .app-hdr-icon {
-  width: 36px; height: 36px; background: var(--sage); border-radius: 9px;
-  display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0;
+  width: 36px; height: 36px;
+  background: linear-gradient(135deg, var(--sage) 0%, var(--sage-d) 100%);
+  border-radius: 10px;
+  display: flex; align-items: center; justify-content: center;
+  font-size: 1.1rem; flex-shrink: 0;
+  box-shadow: 0 2px 8px rgba(107,143,113,.35);
+}
+.app-hdr h1 {
+  margin: 0 0 1px; font-size: .97rem; font-weight: 650;
+  color: var(--ink); letter-spacing: -.01em;
+}
+.app-hdr p { margin: 0; font-size: .73rem; color: var(--muted); }
+/* Subtle version badge */
+.app-hdr-badge {
+  margin-left: auto;
+  background: var(--sage-xl); border: 1px solid var(--sage-l);
+  color: var(--sage-d); border-radius: 999px;
+  padding: 3px 10px; font-size: .68rem; font-weight: 600;
+  letter-spacing: .02em;
 }
-.app-hdr h1 { margin: 0 0 1px; font-size: 1rem; font-weight: 650; color: var(--ink); }
-.app-hdr p  { margin: 0; font-size: .74rem; color: var(--muted); }
 
-/* ── 3-column layout ─────────────────────────────────────────── */
+/* ── 3-column layout ─────────────────────────────────── */
 .app-body {
   display: grid;
-  grid-template-columns: 200px 1fr 220px;
-  gap: 0;
-  height: calc(100vh - 64px);
+  grid-template-columns: 210px 1fr 230px;
+  height: calc(100vh - 58px);
   overflow: hidden;
 }
-@media(max-width: 860px) {
+@media(max-width: 900px) {
   .app-body { grid-template-columns: 1fr; height: auto; overflow: visible; }
   .left-col, .right-col { display: none; }
 }
 
-/* ── Left: suggested questions ───────────────────────────────── */
+/* ── Left col ────────────────────────────────────────── */
 .left-col {
   border-right: 1px solid var(--stone); background: var(--cream);
   display: flex; flex-direction: column; overflow: hidden;
 }
 .left-col-hdr {
-  padding: 14px 14px 8px; font-size: .68rem; font-weight: 700;
-  letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
+  padding: 16px 14px 10px;
+  font-size: .63rem; font-weight: 700; letter-spacing: .08em;
+  text-transform: uppercase; color: var(--muted2);
   border-bottom: 1px solid var(--stone); flex-shrink: 0;
+  display: flex; align-items: center; gap: 6px;
+}
+.left-col-hdr::before {
+  content: "";
+  display: inline-block; width: 6px; height: 6px;
+  background: var(--sage); border-radius: 50%;
 }
-.left-col-body { overflow-y: auto; padding: 10px 10px; flex: 1; }
+.left-col-body { overflow-y: auto; padding: 12px 10px 16px; flex: 1; }
+
+/* Suggestion pills — staggered fade-in */
 .suggestion-pill {
-  display: block; width: 100%; text-align: left;
-  background: transparent; border: 1.5px solid var(--stone);
-  border-radius: 999px; padding: 7px 13px;
-  font-size: .77rem; color: var(--sage-d); cursor: pointer; margin-bottom: 7px;
-  transition: background .15s, border-color .15s, color .15s;
-  line-height: 1.4;
+  display: flex; align-items: flex-start; gap: 8px;
+  width: 100%; text-align: left;
+  background: var(--cream); border: 1.5px solid var(--stone);
+  border-radius: var(--r); padding: 9px 12px;
+  font-size: .77rem; color: var(--ink2); cursor: pointer;
+  margin-bottom: 8px; line-height: 1.45;
+  transition: background .16s, border-color .16s, color .16s, transform .16s, box-shadow .16s;
+  box-shadow: var(--sh-sm);
+  opacity: 0; animation: pillFadeIn .4s ease forwards;
+}
+.suggestion-pill:nth-child(1) { animation-delay: .05s; }
+.suggestion-pill:nth-child(2) { animation-delay: .12s; }
+.suggestion-pill:nth-child(3) { animation-delay: .19s; }
+.suggestion-pill:nth-child(4) { animation-delay: .26s; }
+.suggestion-pill:nth-child(5) { animation-delay: .33s; }
+.suggestion-pill::before {
+  content: "→"; color: var(--sage); font-size: .8rem;
+  flex-shrink: 0; margin-top: 1px; transition: transform .16s;
+}
+.suggestion-pill:hover {
+  background: var(--sage-xl); border-color: var(--sage);
+  color: var(--sage-d); transform: translateX(3px);
+  box-shadow: var(--sh);
+}
+.suggestion-pill:hover::before { transform: translateX(3px); }
+@keyframes pillFadeIn {
+  from { opacity: 0; transform: translateY(6px); }
+  to   { opacity: 1; transform: translateY(0);   }
 }
-.suggestion-pill:hover { background: var(--sage); border-color: var(--sage); color: #fff; }
 
-/* ── Centre: chat ────────────────────────────────────────────── */
+/* ── Centre col ──────────────────────────────────────── */
 .centre-col {
   display: flex; flex-direction: column; overflow: hidden;
   background: var(--sand);
 }
 
-/* Kill ALL Gradio chrome — chatbot label, panel borders, etc. */
-/* Svelte hashes change between Gradio versions; target structurally instead */
+/* Kill ALL Gradio chrome */
 [data-testid="chatbot"] > .label-wrap,
 [data-testid="chatbot"] > div > .label-wrap,
 [data-testid="chatbot"] label,
 [data-testid="chatbot"] .label-wrap,
-.chatbot-label,
-.label-wrap span,           /* hide text but let icon survive if any */
+.chatbot-label, .label-wrap span,
 .gr-chatbot-container .label-wrap,
-/* catch the actual rendered element seen in screenshot (☰ Chatbot) */
 .chatbot > .panel > .label,
 div[class*="label"] > span:only-child,
 .block > .label-wrap { display: none !important; }
-/* Belt-and-braces: hide via JS after render too (see script below) */
 .gr-chatbot, [data-testid="chatbot"] {
   flex: 1 !important; height: 100% !important;
   border: none !important; border-radius: 0 !important; background: transparent !important;
 }
 footer { display: none !important; }
 
-/* Bubbles */
+/* ── Chat bubbles ─────────────────────────────────────── */
+.message { animation: bubbleIn .22s ease; }
+@keyframes bubbleIn {
+  from { opacity: 0; transform: translateY(8px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
 .message.user > div {
-  background: var(--sage) !important; color: #fff !important;
+  background: linear-gradient(135deg, var(--sage) 0%, var(--sage-d) 100%) !important;
+  color: #fff !important;
   border-radius: var(--r) var(--r) 4px var(--r) !important;
-  padding: 9px 14px !important; max-width: 75% !important;
-  font-size: .88rem !important; line-height: 1.6 !important; box-shadow: var(--sh) !important;
+  padding: 10px 15px !important; max-width: 74% !important;
+  font-size: .875rem !important; line-height: 1.6 !important;
+  box-shadow: 0 3px 12px rgba(79,110,85,.30) !important;
 }
 .message.bot > div {
   background: var(--cream) !important; border: 1px solid var(--stone) !important;
   border-radius: var(--r) var(--r) var(--r) 4px !important;
-  padding: 11px 15px !important; max-width: 80% !important;
-  font-size: .88rem !important; line-height: 1.65 !important;
+  padding: 12px 16px !important; max-width: 80% !important;
+  font-size: .875rem !important; line-height: 1.68 !important;
   box-shadow: var(--sh) !important; color: var(--ink) !important;
 }
+/* Bot avatar dot */
+.message.bot::before {
+  content: "🤖";
+  display: block; font-size: .85rem; margin-bottom: 4px;
+  opacity: .7;
+}
 
-/* ── Merged input + toolbar box ──────────────────────────────── */
-/* Wrap the Gradio input area + our toolbar inside one rounded border */
+/* ── Input + toolbar card ────────────────────────────── */
 .chat-input-container {
   background: var(--cream) !important;
   border-top: 1px solid var(--stone) !important;
-  padding: 10px 12px 4px !important;
+  padding: 12px 14px 8px !important;
   flex-shrink: 0;
 }
-/* The inner row Gradio renders: give it a rounded bordered card look */
+/* Outer card border */
 .chat-input-container > .wrap,
 .chat-input-container > div:first-child {
   border: 1.5px solid var(--stone) !important;
-  border-radius: 12px 12px 0 0 !important;
-  overflow: hidden !important;
-  background: var(--sand) !important;
-  transition: border-color .18s, box-shadow .18s !important;
+  border-radius: var(--r) var(--r) var(--r-sm) var(--r-sm) !important;
+  overflow: hidden !important; background: var(--sand) !important;
+  transition: border-color .2s, box-shadow .2s !important;
 }
 .chat-input-container > .wrap:focus-within,
 .chat-input-container > div:first-child:focus-within {
   border-color: var(--sage) !important;
-  box-shadow: 0 0 0 3px rgba(107,143,113,.14) !important;
+  box-shadow: 0 0 0 3px rgba(107,143,113,.15) !important;
 }
 .chat-input-container textarea {
-  background: var(--sand) !important;
-  border: none !important;           /* border lives on parent now */
-  border-radius: 0 !important;
-  padding: 10px 13px !important;
-  font-size: .88rem !important; color: var(--ink) !important;
-  resize: none !important;
-}
-.chat-input-container textarea:focus {
-  outline: none !important;
-  box-shadow: none !important;       /* parent handles focus ring */
+  background: var(--sand) !important; border: none !important;
+  border-radius: 0 !important; padding: 11px 14px !important;
+  font-size: .875rem !important; color: var(--ink) !important;
+  resize: none !important; font-family: inherit !important;
+  line-height: 1.55 !important;
 }
+.chat-input-container textarea:focus { outline: none !important; box-shadow: none !important; }
 .chat-input-container textarea::placeholder { color: var(--muted2) !important; }
 .chat-input-container button[aria-label="Send"] {
-  background: var(--sage) !important; color: #fff !important; border: none !important;
-  border-radius: 9px !important; padding: 0 13px !important; height: 36px !important;
-  font-weight: 600 !important; transition: background .15s !important; margin: 0 6px 0 0 !important;
-  align-self: flex-end !important; margin-bottom: 6px !important;
+  background: linear-gradient(135deg, var(--sage) 0%, var(--sage-d) 100%) !important;
+  color: #fff !important; border: none !important;
+  border-radius: var(--r-sm) !important; padding: 0 15px !important; height: 36px !important;
+  font-weight: 600 !important; font-size: .82rem !important;
+  transition: opacity .15s, transform .1s !important;
+  margin: 0 7px 7px 0 !important; align-self: flex-end !important;
+  box-shadow: 0 2px 8px rgba(79,110,85,.28) !important;
+}
+.chat-input-container button[aria-label="Send"]:hover {
+  opacity: .88 !important; transform: translateY(-1px) !important;
 }
-.chat-input-container button[aria-label="Send"]:hover { background: var(--sage-d) !important; }
 
-/* ── Toolbar — sits flush below textarea, inside same border ─── */
+/* Toolbar — fused bottom of input card */
 .tb-bar {
   display: flex; align-items: center; gap: 2px;
-  padding: 4px 10px 6px;
-  /* no border-top — it's inside the same card */
-  background: var(--sand);
-  border-top: 1px solid var(--stone);
-  border-radius: 0 0 12px 12px;
-  /* merge with the parent card */
-  margin: 0 -1px -1px -1px;    /* bleed to parent border edges */
+  padding: 5px 10px 7px;
+  background: var(--sand); border-top: 1px solid var(--stone);
+  border-radius: 0 0 var(--r-sm) var(--r-sm);
+  margin: 0 -1px -1px -1px;
 }
 .tb-btn {
   width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
-  background: none; border: none; border-radius: 5px; cursor: pointer; color: var(--muted);
-  transition: background .13s, color .13s; position: relative; flex-shrink: 0;
+  background: none; border: none; border-radius: var(--r-xs);
+  cursor: pointer; color: var(--muted); transition: background .13s, color .13s;
+  position: relative; flex-shrink: 0;
 }
 .tb-btn:hover { background: var(--sage-l); color: var(--sage-d); }
 .tb-btn svg { width: 13px; height: 13px; pointer-events: none; }
-.tb-sep { width: 1px; height: 14px; background: var(--stone); margin: 0 2px; flex-shrink: 0; }
+.tb-sep { width: 1px; height: 13px; background: var(--stone2); margin: 0 3px; flex-shrink: 0; }
 .tb-btn::after {
-  content: attr(data-tip); position: absolute; bottom: calc(100% + 5px); left: 50%;
-  transform: translateX(-50%); background: rgba(30,30,30,.9); color: #fff;
-  font-size: .65rem; padding: 3px 7px; border-radius: 4px; white-space: nowrap;
+  content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 50%;
+  transform: translateX(-50%); background: var(--ink); color: #fff;
+  font-size: .63rem; padding: 3px 7px; border-radius: 4px; white-space: nowrap;
   pointer-events: none; opacity: 0; transition: opacity .12s; z-index: 99;
+  font-family: "Inter", sans-serif;
 }
 .tb-btn:hover::after { opacity: 1; }
 
-/* ── Right: file list ────────────────────────────────────────── */
+/* ── Right col ───────────────────────────────────────── */
 .right-col {
   border-left: 1px solid var(--stone); background: var(--cream);
   display: flex; flex-direction: column; overflow: hidden;
 }
 .right-col-hdr {
-  padding: 12px 14px 10px; border-bottom: 1px solid var(--stone);
+  padding: 14px 14px 12px; border-bottom: 1px solid var(--stone);
   flex-shrink: 0; display: flex; align-items: center; justify-content: space-between;
 }
 .right-col-title {
-  font-size: .68rem; font-weight: 700; letter-spacing: .06em;
-  text-transform: uppercase; color: var(--muted);
+  font-size: .63rem; font-weight: 700; letter-spacing: .08em;
+  text-transform: uppercase; color: var(--muted2);
+  display: flex; align-items: center; gap: 6px;
+}
+.right-col-title::before {
+  content: "";
+  display: inline-block; width: 6px; height: 6px;
+  background: var(--sage); border-radius: 50%;
 }
-/* + Add file button */
+/* File count badge */
+.kb-count-badge {
+  background: var(--sage-xl); color: var(--sage-d); border-radius: 999px;
+  padding: 1px 8px; font-size: .68rem; font-weight: 600;
+  border: 1px solid var(--sage-l);
+}
+
+/* + Add file */
 .add-file-btn-wrap { position: relative; display: inline-block; }
 .add-file-btn {
-  background: var(--sage-l); border: 1.5px solid var(--sage);
-  color: var(--sage-d); border-radius: 7px; padding: 4px 10px;
+  background: var(--sage-xl); border: 1.5px solid var(--sage-l);
+  color: var(--sage-d); border-radius: var(--r-sm); padding: 5px 11px;
   font-size: .74rem; font-weight: 600; cursor: pointer;
-  transition: background .15s, color .15s; white-space: nowrap;
-  display: flex; align-items: center; gap: 4px;
+  transition: all .15s; white-space: nowrap;
+  display: flex; align-items: center; gap: 5px;
+  box-shadow: var(--sh-sm);
+}
+.add-file-btn:hover {
+  background: var(--sage); color: #fff; border-color: var(--sage);
+  box-shadow: 0 2px 8px rgba(107,143,113,.3);
+  transform: translateY(-1px);
 }
-.add-file-btn:hover { background: var(--sage); color: #fff; }
-/* Tooltip for add-file */
 .add-file-tooltip {
-  display: none; position: absolute; top: calc(100% + 7px); right: 0;
-  background: var(--ink); color: #fff; border-radius: 8px; padding: 9px 12px;
-  font-size: .73rem; line-height: 1.6; white-space: nowrap; z-index: 50;
-  box-shadow: 0 4px 16px rgba(0,0,0,.18); min-width: 200px;
+  display: none; position: absolute; top: calc(100% + 8px); right: 0;
+  background: var(--ink); color: #fff; border-radius: var(--r-sm);
+  padding: 10px 13px; font-size: .72rem; line-height: 1.65;
+  white-space: nowrap; z-index: 50;
+  box-shadow: var(--sh-lg); min-width: 210px;
+  animation: tooltipIn .14s ease;
+}
+@keyframes tooltipIn {
+  from { opacity: 0; transform: translateY(-3px); }
+  to   { opacity: 1; transform: translateY(0); }
 }
 .add-file-tooltip::before {
   content: ""; position: absolute; top: -5px; right: 14px;
   border-left: 5px solid transparent; border-right: 5px solid transparent;
   border-bottom: 5px solid var(--ink);
 }
+.add-file-tooltip strong { display: block; margin-bottom: 4px; font-size: .76rem; }
+.add-file-tooltip .tt-row { display: flex; align-items: center; gap: 6px; opacity: .88; }
+.add-file-tooltip .tt-row::before { content: "•"; color: var(--sage-l); }
 .add-file-btn-wrap:hover .add-file-tooltip { display: block; }
 
-.right-col-body { overflow-y: auto; padding: 6px 8px; flex: 1; }
+.right-col-body { overflow-y: auto; padding: 6px 8px 16px; flex: 1; }
 
 /* File rows */
 .kb-file-row {
-  display: flex; align-items: center; gap: 7px;
-  padding: 7px 8px; border-radius: 8px; cursor: default;
-  transition: background .13s; position: relative;
+  display: flex; align-items: center; gap: 8px;
+  padding: 7px 9px; border-radius: var(--r-sm); cursor: default;
+  transition: background .13s;
 }
 .kb-file-row:hover { background: var(--sand); }
-.kb-file-icon { font-size: .85rem; flex-shrink: 0; }
+.kb-file-icon { font-size: .82rem; flex-shrink: 0; opacity: .8; }
 .kb-file-name {
-  flex: 1; font-size: .78rem; color: var(--ink);
+  flex: 1; font-size: .775rem; color: var(--ink2);
   overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
 }
 .kb-file-actions {
-  display: none; gap: 2px; align-items: center; flex-shrink: 0;
+  display: none; gap: 1px; align-items: center; flex-shrink: 0;
 }
 .kb-file-row:hover .kb-file-actions { display: flex; }
 .kb-action-btn {
-  background: none; border: none; cursor: pointer; font-size: .8rem;
-  padding: 2px 4px; border-radius: 4px; color: var(--muted);
-  transition: background .12s, color .12s;
+  background: none; border: none; cursor: pointer; font-size: .78rem;
+  padding: 3px 5px; border-radius: 4px; color: var(--muted);
+  transition: background .12s, color .12s; line-height: 1;
 }
 .kb-action-btn:hover { background: var(--stone); color: var(--ink); }
+.kb-action-btn.del:hover { background: var(--rose-l); color: var(--rose); }
 
-/* Rename inline input */
+/* Rename inline */
 .kb-rename-row {
-  display: none; padding: 6px 8px; gap: 6px; align-items: center;
+  display: none; padding: 5px 8px; gap: 5px; align-items: center;
 }
 .kb-rename-row.active { display: flex; }
 .kb-rename-input {
-  flex: 1; border: 1.5px solid var(--sage); border-radius: 6px;
-  padding: 4px 8px; font-size: .76rem; background: var(--sand);
-  color: var(--ink); outline: none;
+  flex: 1; border: 1.5px solid var(--sage); border-radius: var(--r-xs);
+  padding: 4px 8px; font-size: .75rem; background: var(--sand);
+  color: var(--ink); outline: none; font-family: inherit;
 }
 .kb-rename-save {
-  background: var(--sage); color: #fff; border: none; border-radius: 6px;
-  padding: 4px 9px; font-size: .73rem; font-weight: 600; cursor: pointer;
+  background: var(--sage); color: #fff; border: none; border-radius: var(--r-xs);
+  padding: 4px 9px; font-size: .72rem; font-weight: 600; cursor: pointer;
+  transition: background .13s;
 }
+.kb-rename-save:hover { background: var(--sage-d); }
 .kb-rename-cancel {
-  background: none; border: 1px solid var(--stone); border-radius: 6px;
-  padding: 4px 7px; font-size: .73rem; color: var(--muted); cursor: pointer;
+  background: none; border: 1px solid var(--stone); border-radius: var(--r-xs);
+  padding: 4px 7px; font-size: .72rem; color: var(--muted); cursor: pointer;
 }
 
-/* Status toast */
+/* ── Toast notification ───────────────────────────────── */
 .kb-toast {
-  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
-  background: var(--ink); color: #fff; border-radius: 8px;
-  padding: 8px 18px; font-size: .8rem; z-index: 999;
-  opacity: 0; pointer-events: none; transition: opacity .2s;
-  white-space: nowrap;
+  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%) translateY(6px);
+  background: var(--ink); color: #fff; border-radius: var(--r-sm);
+  padding: 9px 20px; font-size: .79rem; z-index: 9999;
+  opacity: 0; pointer-events: none;
+  transition: opacity .22s, transform .22s;
+  white-space: nowrap; box-shadow: var(--sh-md);
+  display: flex; align-items: center; gap: 8px;
+}
+.kb-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
+
+/* ── Source chip ────────────────────────────────────────── */
+.src-row {
+  display: flex; align-items: center; flex-wrap: wrap; gap: 5px;
+  margin-top: 10px; padding-top: 9px;
+  border-top: 1px solid var(--stone);
+}
+.src-label {
+  font-size: .67rem; font-weight: 700; letter-spacing: .07em;
+  text-transform: uppercase; color: var(--muted2);
+  margin-right: 2px; flex-shrink: 0;
+}
+.src-chip {
+  display: inline-flex; align-items: center; gap: 4px;
+  background: var(--sage-xl); border: 1px solid var(--sage-l);
+  border-radius: 999px; padding: 2px 10px 2px 7px;
+  transition: background .14s, border-color .14s;
+  animation: chipIn .22s ease;
 }
-.kb-toast.show { opacity: 1; }
+.src-chip:hover { background: var(--sage-l); border-color: var(--sage); }
+@keyframes chipIn {
+  from { opacity: 0; transform: translateY(4px) scale(.95); }
+  to   { opacity: 1; transform: translateY(0)   scale(1);   }
+}
+.src-chip-icon { font-size: .72rem; }
+.src-chip-name {
+  font-size: .72rem; font-weight: 500;
+  color: var(--sage-d); max-width: 140px;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+
+/* ── Scrollbar polish ─────────────────────────────────── */
+::-webkit-scrollbar { width: 5px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: var(--stone2); border-radius: 99px; }
+::-webkit-scrollbar-thumb:hover { background: var(--muted2); }
+
+/* ── Selection colour ─────────────────────────────────── */
+::selection { background: rgba(107,143,113,.22); }
 </style>
 
 <script>
@@ -1145,6 +1327,7 @@ with gr.Blocks(title=CONFIG["client"]["name"]) as demo:
         <h1>{CONFIG["client"]["name"]}</h1>
         <p>Search the knowledge base and get answers in plain language</p>
       </div>
+      <span class="app-hdr-badge">MVP · AI-powered</span>
     </div>""")
 
     # ── 3-column body ─────────────────────────────────────────────────
@@ -1181,11 +1364,11 @@ with gr.Blocks(title=CONFIG["client"]["name"]) as demo:
                   + Add file
                 </button>
                 <div class="add-file-tooltip">
-                  <strong>Upload documents</strong><br>
-                  Formats: .txt · .md · .pdf · .docx<br>
-                  Max size: 10 MB per file<br>
-                  Multiple files supported<br>
-                  Index rebuilds automatically
+                  <strong>Add to knowledge base</strong>
+                  <div class="tt-row">Formats: .txt · .md · .pdf · .docx</div>
+                  <div class="tt-row">Max size: 10 MB per file</div>
+                  <div class="tt-row">Multiple files at once supported</div>
+                  <div class="tt-row">Index rebuilds automatically</div>
                 </div>
               </div>
             </div>""")