Update app.py

app.py

@@ -646,334 +646,427 @@ def delete_kb_file(filename: str) -> Tuple[str, str]:
         return f"❌ Could not delete `{filename}`: {e}", list_kb_files()
 
 
+
 # -----------------------------
 # GRADIO UI
 # -----------------------------
 
-# Build the KB file table as an HTML string (called on load + after every change)
-def kb_panel_html(file_table_html: str, status_msg: str = "") -> str:
-    status_block = ""
-    if status_msg:
-        colour = "#065f46" if "✅" in status_msg else "#991b1b"
-        bg     = "#d1fae5" if "✅" in status_msg else "#fee2e2"
-        status_block = (
-            f"<div style='margin:8px 0;padding:8px 12px;background:{bg};color:{colour};"
-            f"border-radius:8px;font-size:.81rem;line-height:1.5'>{status_msg}</div>"
-        )
-    return f"""
-<div id="kb-backdrop" class="kb-backdrop" onclick="closeKB()"></div>
-<div id="kb-panel"   class="kb-panel-wrap">
-  <div class="kb-panel-head">
-    <span style="font-size:1rem;margin-right:8px">📁</span>
-    <h2>Knowledge Base</h2>
-    <button class="kb-close-btn" onclick="closeKB()">✕</button>
-  </div>
-  <div class="kb-panel-body">
-    <div class="kb-section-label">Files in index</div>
-    {file_table_html}
-    {status_block}
-  </div>
-</div>
-"""
-
-STYLE_HTML = """
-<style>
-:root{
-  --sage:#6b8f71;--sage-l:#eaf2eb;--sage-d:#4f6e55;
-  --sand:#f5f0e8;--cream:#fdfaf5;--stone:#e4ddd3;
-  --ink:#2d2d2d;--muted:#7a7167;
-  --rose:#c0717a;--rose-l:#f8eded;
-  --r:14px;--sh:0 2px 10px rgba(0,0,0,.07);
+def list_kb_files_html() -> str:
+    """Return a clean file list as HTML — filename only, no size, with hover actions menu."""
+    patterns = ["*.txt", "*.md", "*.pdf", "*.docx", "*.doc"]
+    paths: List[str] = []
+    for pat in patterns:
+        paths.extend(glob.glob(os.path.join(KB_DIR, pat)))
+    paths = sorted(paths)
+
+    if not paths:
+        return """
+        <div style="text-align:center;padding:32px 12px;color:#9e9790">
+          <div style="font-size:1.8rem;margin-bottom:8px;opacity:.5">📭</div>
+          <div style="font-size:.8rem;line-height:1.6">No files yet.<br>Click <strong>+ Add file</strong> above.</div>
+        </div>"""
+
+    ext_icons = {".pdf": "📄", ".docx": "📝", ".doc": "📝", ".md": "📋", ".txt": "📃"}
+    items = ""
+    for p in paths:
+        name = os.path.basename(p)
+        ext  = os.path.splitext(name)[1].lower()
+        icon = ext_icons.get(ext, "📄")
+        safe = name.replace("'", "\\'").replace('"', '&quot;')
+        items += f"""
+        <div class="kb-file-row" id="row-{safe}">
+          <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"
+              onclick="kbAction('replace','{safe}')">↺</button>
+          </div>
+        </div>"""
+    return items
+
+
+def rename_kb_file(old_name: str, new_name: str) -> Tuple[str, str]:
+    old_name = os.path.basename(old_name.strip())
+    new_name = os.path.basename(new_name.strip())
+    if not old_name or not new_name:
+        return "⚠️ Please provide both names.", list_kb_files_html()
+    if os.path.splitext(new_name)[1].lower() not in ALLOWED_EXTENSIONS:
+        return "⚠️ New name must have a supported extension.", list_kb_files_html()
+    src = os.path.join(KB_DIR, old_name)
+    dst = os.path.join(KB_DIR, new_name)
+    if not os.path.exists(src):
+        return f"⚠️ File not found: {old_name}", list_kb_files_html()
+    try:
+        os.rename(src, dst)
+        msg = kb_index.rebuild()
+        return f"✅ Renamed to `{new_name}`. {msg}", list_kb_files_html()
+    except Exception as e:
+        return f"❌ Could not rename: {e}", list_kb_files_html()
+
+
+# ── CSS ────────────────────────────────────────────────────────────────────────
+
+STYLE_HTML = """<style>
+: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);
 }
-*{box-sizing:border-box}
-body,.gradio-container{
-  background:var(--sand)!important;
-  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif!important;
-  color:var(--ink)!important;
+*, *::before, *::after { box-sizing: border-box; }
+body, .gradio-container {
+  background: var(--sand) !important;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
+  color: var(--ink) !important;
 }
-.gradio-container{max-width:900px!important;margin:0 auto!important;padding:0!important}
+.gradio-container { padding: 0 !important; max-width: 100% !important; }
 
-/* ── Header ─────────────────────────────────────────── */
-.app-header{
-  background:var(--cream);border-bottom:1px solid var(--stone);
-  padding:14px 20px;display:flex;align-items:center;gap:12px;
+/* ── 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;
 }
-.app-icon{
-  width:38px;height:38px;background:var(--sage);border-radius:10px;
-  display:flex;align-items:center;justify-content:center;font-size:1.15rem;flex-shrink:0;
+.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;
 }
-.app-title{margin:0 0 1px;font-size:1.1rem;font-weight:650;color:var(--ink);letter-spacing:-.01em}
-.app-sub{margin:0;font-size:.77rem;color:var(--muted)}
-.manage-kb-btn{
-  margin-left:auto;background:var(--cream);border:1.5px solid var(--stone);
-  border-radius:8px;padding:6px 13px;font-size:.78rem;font-weight:500;
-  color:var(--muted);cursor:pointer;display:flex;align-items:center;gap:5px;
-  transition:background .15s,border-color .15s,color .15s;white-space:nowrap;
+.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 ─────────────────────────────────────────── */
+.app-body {
+  display: grid;
+  grid-template-columns: 200px 1fr 220px;
+  gap: 0;
+  height: calc(100vh - 64px);
+  overflow: hidden;
 }
-.manage-kb-btn:hover{background:var(--sage-l);border-color:var(--sage);color:var(--sage-d)}
-
-/* ── Chat bubbles ───────────────────────────────────── */
-.message.user>div{
-  background:var(--sage)!important;color:#fff!important;
-  border-radius:var(--r) var(--r) 4px var(--r)!important;
-  padding:10px 15px!important;max-width:76%!important;
-  font-size:.9rem!important;line-height:1.6!important;box-shadow:var(--sh)!important;
+@media(max-width: 860px) {
+  .app-body { grid-template-columns: 1fr; height: auto; overflow: visible; }
+  .left-col, .right-col { display: none; }
 }
-.message.bot>div{
-  background:var(--cream)!important;border:1px solid var(--stone)!important;
-  border-radius:var(--r) var(--r) var(--r) 4px!important;
-  padding:12px 16px!important;max-width:80%!important;
-  font-size:.9rem!important;line-height:1.65!important;
-  box-shadow:var(--sh)!important;color:var(--ink)!important;
-}
-/* Hide default Gradio chatbot label */
-.label-wrap,.chatbot-label,label.svelte-1b6s6vi{display:none!important}
 
-/* ── "Try asking" + example pills ───────────────────── */
-.try-label{
-  font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
-  color:var(--muted);padding:10px 14px 4px;background:var(--cream);
-}
-.examples-table{
-  display:flex!important;flex-wrap:wrap!important;gap:6px!important;
-  padding:4px 14px 10px!important;background:var(--cream);
-  border-bottom:1px solid var(--stone)!important;
-}
-/* flatten table cells so pills flow naturally */
-.examples-table table,.examples-table tbody,
-.examples-table tr,.examples-table td{
-  display:contents!important;border:none!important;background:none!important;
+/* ── Left: suggested questions ───────────────────────────────── */
+.left-col {
+  border-right: 1px solid var(--stone); background: var(--cream);
+  display: flex; flex-direction: column; overflow: hidden;
 }
-.examples-table button,.example{
-  display:inline-flex!important;align-items:center!important;
-  width:auto!important;white-space:normal!important;
-  border-radius:999px!important;border:1.5px solid var(--stone)!important;
-  color:var(--sage-d)!important;background:var(--cream)!important;
-  padding:5px 13px!important;font-size:.78rem!important;font-weight:500!important;
-  line-height:1.4!important;cursor:pointer!important;
-  transition:all .15s!important;box-shadow:0 1px 2px rgba(0,0,0,.05)!important;
+.left-col-hdr {
+  padding: 14px 14px 8px; font-size: .68rem; font-weight: 700;
+  letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
+  border-bottom: 1px solid var(--stone); flex-shrink: 0;
 }
-.examples-table button:hover,.example:hover{
-  background:var(--sage)!important;color:#fff!important;border-color:var(--sage)!important;
+.left-col-body { overflow-y: auto; padding: 10px 10px; flex: 1; }
+.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;
 }
+.suggestion-pill:hover { background: var(--sage); border-color: var(--sage); color: #fff; }
 
-/* ── Input bar ───────────────────────────────────────── */
-.chat-input-container{
-  background:var(--cream)!important;border-top:1px solid var(--stone)!important;
-  padding:8px 12px!important;
+/* ── Centre: chat ────────────────────────────────────────────── */
+.centre-col {
+  display: flex; flex-direction: column; overflow: hidden;
+  background: var(--sand);
 }
-.chat-input-container textarea{
-  background:var(--sand)!important;border:1.5px solid var(--stone)!important;
-  border-radius:10px!important;padding:9px 13px!important;
-  font-size:.88rem!important;color:var(--ink)!important;
-  resize:none!important;transition:border-color .18s,box-shadow .18s!important;
+
+/* Kill Gradio chrome */
+.label-wrap, .chatbot-label, label.svelte-1b6s6vi,
+.gr-prose .label-wrap, [data-testid="chatbot"] > .label-wrap { display: none !important; }
+.gr-chatbot, [data-testid="chatbot"] {
+  flex: 1 !important; height: 100% !important;
+  border: none !important; border-radius: 0 !important; background: transparent !important;
 }
-.chat-input-container textarea:focus{
-  border-color:var(--sage)!important;outline:none!important;
-  box-shadow:0 0 0 3px rgba(107,143,113,.16)!important;
+footer { display: none !important; }
+
+/* Bubbles */
+.message.user > div {
+  background: var(--sage) !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;
 }
-.chat-input-container textarea::placeholder{color:var(--muted)!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;
+.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;
+  box-shadow: var(--sh) !important; color: var(--ink) !important;
 }
-.chat-input-container button[aria-label="Send"]:hover{background:var(--sage-d)!important}
 
-/* ── Compact toolbar ─────────────────────────────────── */
-.tb-bar{
-  display:flex;align-items:center;gap:2px;
-  padding:4px 12px 5px;background:var(--cream);border-top:1px solid var(--stone);
+/* Input bar */
+.chat-input-container {
+  background: var(--cream) !important; border-top: 1px solid var(--stone) !important;
+  padding: 8px 12px !important; flex-shrink: 0;
+}
+.chat-input-container textarea {
+  background: var(--sand) !important; border: 1.5px solid var(--stone) !important;
+  border-radius: 10px !important; padding: 9px 13px !important;
+  font-size: .88rem !important; color: var(--ink) !important;
+  resize: none !important; transition: border-color .18s, box-shadow .18s !important;
 }
-.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;
+.chat-input-container textarea:focus {
+  border-color: var(--sage) !important; outline: none !important;
+  box-shadow: 0 0 0 3px rgba(107,143,113,.16) !important;
 }
-.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-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;
-  pointer-events:none;opacity:0;transition:opacity .12s;z-index:99;
+.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;
 }
-.tb-btn:hover::after{opacity:1}
+.chat-input-container button[aria-label="Send"]:hover { background: var(--sage-d) !important; }
 
-/* ── KB slide-in panel ─���─────────────────────────────── */
-.kb-backdrop{
-  display:none;position:fixed;inset:0;
-  background:rgba(45,45,45,.35);z-index:1000;backdrop-filter:blur(1px);
+/* Compact toolbar */
+.tb-bar {
+  display: flex; align-items: center; gap: 2px;
+  padding: 4px 12px 5px; background: var(--cream); border-top: 1px solid var(--stone);
+  flex-shrink: 0;
 }
-.kb-backdrop.open{display:block}
-.kb-panel-wrap{
-  position:fixed;top:0;right:0;bottom:0;width:360px;max-width:94vw;
-  background:var(--cream);border-left:1px solid var(--stone);
-  box-shadow:-6px 0 28px rgba(0,0,0,.12);z-index:1001;
-  transform:translateX(110%);transition:transform .28s cubic-bezier(.4,0,.2,1);
-  display:flex;flex-direction:column;overflow:hidden;
+.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;
 }
-.kb-panel-wrap.open{transform:translateX(0)}
-.kb-panel-head{
-  display:flex;align-items:center;padding:14px 16px;
-  border-bottom:1px solid var(--stone);background:var(--sand);flex-shrink:0;gap:8px;
+.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-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;
+  pointer-events: none; opacity: 0; transition: opacity .12s; z-index: 99;
 }
-.kb-panel-head h2{margin:0;font-size:.92rem;font-weight:650;color:var(--ink);flex:1}
-.kb-close-btn{
-  background:none;border:none;cursor:pointer;color:var(--muted);
-  width:26px;height:26px;border-radius:5px;font-size:.9rem;
-  display:flex;align-items:center;justify-content:center;transition:background .13s;
+.tb-btn:hover::after { opacity: 1; }
+
+/* ── Right: file list ────────────────────────────────────────── */
+.right-col {
+  border-left: 1px solid var(--stone); background: var(--cream);
+  display: flex; flex-direction: column; overflow: hidden;
 }
-.kb-close-btn:hover{background:var(--stone)}
-.kb-panel-body{flex:1;overflow-y:auto;padding:14px 14px 24px}
-.kb-section-label{
-  font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
-  color:var(--muted);margin:0 0 8px;
+.right-col-hdr {
+  padding: 12px 14px 10px; border-bottom: 1px solid var(--stone);
+  flex-shrink: 0; display: flex; align-items: center; justify-content: space-between;
 }
-.kb-section-label+*{margin-top:0}
-.kb-divider{height:1px;background:var(--stone);margin:16px 0}
-
-/* File table */
-.kb-file-table{width:100%;border-collapse:collapse;font-size:.8rem}
-.kb-file-table th{
-  background:var(--sand);padding:6px 8px;text-align:left;
-  font-weight:600;font-size:.7rem;color:var(--muted);
-  border-bottom:1px solid var(--stone);
+.right-col-title {
+  font-size: .68rem; font-weight: 700; letter-spacing: .06em;
+  text-transform: uppercase; color: var(--muted);
 }
-.kb-file-table td{padding:7px 8px;border-bottom:1px solid var(--stone);color:var(--ink)}
-.kb-file-table tr:last-child td{border-bottom:none}
-.kb-del-btn{
-  background:none;border:none;cursor:pointer;color:var(--rose);
-  padding:2px 5px;border-radius:4px;font-size:.85rem;transition:background .13s;
+/* + Add file button */
+.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;
+  font-size: .74rem; font-weight: 600; cursor: pointer;
+  transition: background .15s, color .15s; white-space: nowrap;
+  display: flex; align-items: center; gap: 4px;
 }
-.kb-del-btn:hover{background:var(--rose-l)}
-
-/* Upload zone */
-.kb-upload-zone{
-  border:2px dashed var(--stone);border-radius:10px;background:var(--sand);
-  padding:20px;text-align:center;font-size:.8rem;color:var(--muted);
-  transition:border-color .18s,background .18s;cursor:pointer;margin:6px 0 10px;
+.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;
 }
-.kb-upload-zone:hover{border-color:var(--sage);background:var(--sage-l)}
-.gr-file-drop,[data-testid="file"]{
-  border:none!important;border-radius:10px!important;
-  background:transparent!important;margin:0!important;
+.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-btn-wrap:hover .add-file-tooltip { display: block; }
 
-/* KB action buttons */
-.kb-upload-btn>button,.kb-upload-btn button{
-  background:var(--sage)!important;color:#fff!important;border:none!important;
-  border-radius:8px!important;padding:8px 0!important;font-weight:600!important;
-  font-size:.83rem!important;width:100%!important;transition:background .15s!important;
-  cursor:pointer!important;
-}
-.kb-upload-btn>button:hover,.kb-upload-btn button:hover{background:var(--sage-d)!important}
-.kb-delete-btn>button,.kb-delete-btn button{
-  background:var(--rose-l)!important;color:var(--rose)!important;
-  border:1px solid #e8b4b8!important;border-radius:8px!important;
-  padding:7px 0!important;font-weight:600!important;font-size:.83rem!important;
-  width:100%!important;transition:all .15s!important;cursor:pointer!important;
+.right-col-body { overflow-y: auto; padding: 6px 8px; 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;
 }
-.kb-delete-btn>button:hover,.kb-delete-btn button:hover{
-  background:var(--rose)!important;color:#fff!important;
+.kb-file-row:hover { background: var(--sand); }
+.kb-file-icon { font-size: .85rem; flex-shrink: 0; }
+.kb-file-name {
+  flex: 1; font-size: .78rem; color: var(--ink);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
 }
-.kb-textbox input,.kb-textbox textarea{
-  border:1.5px solid var(--stone)!important;border-radius:8px!important;
-  padding:7px 11px!important;font-size:.82rem!important;
-  background:var(--sand)!important;color:var(--ink)!important;
-  transition:border-color .15s!important;
+.kb-file-actions {
+  display: none; gap: 2px; align-items: center; flex-shrink: 0;
 }
-.kb-textbox input:focus,.kb-textbox textarea:focus{
-  border-color:var(--sage)!important;outline:none!important;
-  box-shadow:0 0 0 3px rgba(107,143,113,.14)!important;
+.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;
 }
+.kb-action-btn:hover { background: var(--stone); color: var(--ink); }
 
-/* Status messages */
-.kb-status-ok{
-  background:#d1fae5;color:#065f46;border-radius:7px;
-  padding:6px 11px;font-size:.79rem;margin-top:6px;line-height:1.5;
+/* Rename inline input */
+.kb-rename-row {
+  display: none; padding: 6px 8px; gap: 6px; align-items: center;
 }
-.kb-status-err{
-  background:#fee2e2;color:#991b1b;border-radius:7px;
-  padding:6px 11px;font-size:.79rem;margin-top:6px;line-height:1.5;
+.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;
 }
-
-/* Empty state */
-.kb-empty{
-  text-align:center;padding:24px 12px;color:var(--muted);
+.kb-rename-save {
+  background: var(--sage); color: #fff; border: none; border-radius: 6px;
+  padding: 4px 9px; font-size: .73rem; font-weight: 600; cursor: pointer;
 }
-.kb-empty-icon{font-size:2rem;opacity:.45;margin-bottom:6px}
-.kb-empty-text{font-size:.8rem;line-height:1.5}
-
-@media(max-width:640px){
-  .gradio-container{padding:0!important}
-  .app-header{padding:10px 12px!important}
-  .kb-panel-wrap{width:100%;max-width:100vw}
-  .message.user>div,.message.bot>div{max-width:95%!important}
-  .examples-table{gap:5px!important;padding:3px 10px 8px!important}
+.kb-rename-cancel {
+  background: none; border: 1px solid var(--stone); border-radius: 6px;
+  padding: 4px 7px; font-size: .73rem; color: var(--muted); cursor: pointer;
 }
+
+/* Status toast */
+.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;
+}
+.kb-toast.show { opacity: 1; }
 </style>
 
 <script>
-function toggleKB(){
-  document.getElementById("kb-panel").classList.toggle("open");
-  document.getElementById("kb-backdrop").classList.toggle("open");
+/* ── KB action dispatcher ──────────────────────── */
+function kbAction(action, filename) {
+  if (action === 'delete') {
+    if (!confirm('Delete ' + filename + '?')) return;
+    setGradioInput('kb-hidden-delete', filename);
+    setTimeout(function(){ clickGradioBtn('kb-delete-trigger'); }, 80);
+  } else if (action === 'replace') {
+    document.getElementById('kb-file-attach').click();
+    // Store target for replacement note
+    window._kbReplaceTarget = filename;
+  } else if (action === 'rename') {
+    var row  = document.getElementById('row-' + filename);
+    var rrow = document.getElementById('rrow-' + filename);
+    if (row)  row.style.display  = 'none';
+    if (rrow) { rrow.classList.add('active'); rrow.querySelector('input').focus(); }
+  }
+}
+function kbCancelRename(filename) {
+  var row  = document.getElementById('row-'  + filename);
+  var rrow = document.getElementById('rrow-' + filename);
+  if (row)  row.style.display  = '';
+  if (rrow) rrow.classList.remove('active');
 }
-function closeKB(){
-  document.getElementById("kb-panel").classList.remove("open");
-  document.getElementById("kb-backdrop").classList.remove("open");
+function kbSaveRename(oldName) {
+  var rrow  = document.getElementById('rrow-' + oldName);
+  var input = rrow ? rrow.querySelector('input') : null;
+  if (!input || !input.value.trim()) return;
+  setGradioInput('kb-hidden-old-name', oldName);
+  setGradioInput('kb-hidden-new-name', input.value.trim());
+  setTimeout(function(){ clickGradioBtn('kb-rename-trigger'); }, 80);
 }
-function kbDeleteFile(name){
-  // Fill the hidden Gradio textbox and click the hidden delete button
-  var inputs = document.querySelectorAll("#kb-delete-input input, #kb-delete-input textarea");
-  inputs.forEach(function(el){
-    el.value = name;
-    el.dispatchEvent(new Event("input", {bubbles:true}));
-    el.dispatchEvent(new Event("change", {bubbles:true}));
-  });
-  setTimeout(function(){
-    var btn = document.querySelector("#kb-delete-btn button, #kb-delete-btn");
-    if(btn) btn.click();
-  }, 80);
+function setGradioInput(elemId, value) {
+  var el = document.querySelector('#' + elemId + ' input, #' + elemId + ' textarea');
+  if (!el) return;
+  el.value = value;
+  el.dispatchEvent(new Event('input',  { bubbles: true }));
+  el.dispatchEvent(new Event('change', { bubbles: true }));
 }
-</script>
-"""
+function clickGradioBtn(elemId) {
+  var btn = document.querySelector('#' + elemId + ' button, #' + elemId);
+  if (btn) btn.click();
+}
+function showToast(msg) {
+  var t = document.getElementById('kb-toast');
+  if (!t) return;
+  t.textContent = msg; t.classList.add('show');
+  setTimeout(function(){ t.classList.remove('show'); }, 2800);
+}
+/* ── Inject left & right columns into Gradio layout ── */
+(function injectColumns() {
+  function tryInject() {
+    var chatCol = document.querySelector('.centre-col-inner');
+    if (!chatCol) { setTimeout(tryInject, 400); return; }
+    var body = document.querySelector('.app-body');
+    if (body) return; // already done
+
+    /* Wrap everything in a 3-col grid */
+    var wrapper = document.createElement('div');
+    wrapper.className = 'app-body';
+
+    var left  = document.getElementById('left-col-mount');
+    var right = document.getElementById('right-col-mount');
+    var chat  = chatCol.parentElement;
+
+    if (left && right && chat) {
+      chat.parentElement.insertBefore(wrapper, chat);
+      wrapper.appendChild(left);
+      wrapper.appendChild(chat);
+      wrapper.appendChild(right);
+    }
+  }
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', function(){ setTimeout(tryInject, 600); });
+  } else {
+    setTimeout(tryInject, 600);
+  }
+})();
+/* toolbar helpers */
+function tbWrap(tag1, tag2) {
+  var t = document.querySelector('.chat-input-container textarea');
+  if (!t) return;
+  var s = t.selectionStart, e = t.selectionEnd, v = t.value;
+  if (s === e) return;
+  t.value = v.slice(0,s) + tag1 + v.slice(s,e) + tag2 + v.slice(e);
+  t.selectionStart = s; t.selectionEnd = e + tag1.length + tag2.length;
+  t.dispatchEvent(new Event('input',{bubbles:true}));
+}
+function tbBullet() {
+  var t = document.querySelector('.chat-input-container textarea');
+  if (!t) return;
+  var lines = t.value.split('\n'), idx = t.value.slice(0,t.selectionStart).split('\n').length-1;
+  lines[idx] = '- ' + lines[idx]; t.value = lines.join('\n');
+  t.dispatchEvent(new Event('input',{bubbles:true}));
+}
+function tbPaste() {
+  var t = document.querySelector('.chat-input-container textarea');
+  if (!t) return;
+  navigator.clipboard.readText().then(function(s){
+    var i = t.selectionStart;
+    t.value = t.value.slice(0,i) + s + t.value.slice(t.selectionEnd);
+    t.selectionStart = t.selectionEnd = i + s.length;
+    t.dispatchEvent(new Event('input',{bubbles:true}));
+  }).catch(function(){ t.focus(); });
+}
+</script>"""
 
 TOOLBAR_HTML = """
 <div class="tb-bar">
-  <button class="tb-btn" data-tip="Attach file to KB"
-    onclick="document.getElementById('kb-file-attach').click()">
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-      <path d="M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48"/>
-    </svg>
+  <button class="tb-btn" data-tip="Attach file" onclick="document.getElementById('kb-file-attach').click()">
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48"/></svg>
   </button>
-  <button class="tb-btn" data-tip="Paste from clipboard"
-    onclick="(function(){var t=document.querySelector('.chat-input-container textarea');if(!t)return;navigator.clipboard.readText().then(function(s){var i=t.selectionStart;t.value=t.value.slice(0,i)+s+t.value.slice(t.selectionEnd);t.selectionStart=t.selectionEnd=i+s.length;t.dispatchEvent(new Event('input',{bubbles:true}))}).catch(function(){t.focus()})})()">
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-      <rect x="8" y="2" width="8" height="4" rx="1"/>
-      <path d="M16 4h2a2 2 0 012 2v14a2 2 0 01-2 2H6a2 2 0 01-2-2V6a2 2 0 012-2h2"/>
-    </svg>
+  <button class="tb-btn" data-tip="Paste" onclick="tbPaste()">
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="8" y="2" width="8" height="4" rx="1"/><path d="M16 4h2a2 2 0 012 2v14a2 2 0 01-2 2H6a2 2 0 01-2-2V6a2 2 0 012-2h2"/></svg>
   </button>
   <div class="tb-sep"></div>
-  <button class="tb-btn" data-tip="Bold"
-    onclick="(function(){var t=document.querySelector('.chat-input-container textarea');if(!t)return;var s=t.selectionStart,e=t.selectionEnd;if(s===e)return;var v=t.value;t.value=v.slice(0,s)+'**'+v.slice(s,e)+'**'+v.slice(e);t.selectionStart=s;t.selectionEnd=e+4;t.dispatchEvent(new Event('input',{bubbles:true}))})()">
+  <button class="tb-btn" data-tip="Bold" onclick="tbWrap('**','**')">
     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M6 4h8a4 4 0 010 8H6zM6 12h9a4 4 0 010 8H6z"/></svg>
   </button>
-  <button class="tb-btn" data-tip="Italic"
-    onclick="(function(){var t=document.querySelector('.chat-input-container textarea');if(!t)return;var s=t.selectionStart,e=t.selectionEnd;if(s===e)return;var v=t.value;t.value=v.slice(0,s)+'*'+v.slice(s,e)+'*'+v.slice(e);t.selectionStart=s;t.selectionEnd=e+2;t.dispatchEvent(new Event('input',{bubbles:true}))})()">
+  <button class="tb-btn" data-tip="Italic" onclick="tbWrap('*','*')">
     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="19" y1="4" x2="10" y2="4"/><line x1="14" y1="20" x2="5" y2="20"/><line x1="15" y1="4" x2="9" y2="20"/></svg>
   </button>
-  <button class="tb-btn" data-tip="Bullet list"
-    onclick="(function(){var t=document.querySelector('.chat-input-container textarea');if(!t)return;var lines=t.value.split('\\n'),idx=t.value.slice(0,t.selectionStart).split('\\n').length-1;lines[idx]='- '+lines[idx];t.value=lines.join('\\n');t.dispatchEvent(new Event('input',{bubbles:true}))})()">
+  <button class="tb-btn" data-tip="Bullet list" onclick="tbBullet()">
     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="9" y1="6" x2="20" y2="6"/><line x1="9" y1="12" x2="20" y2="12"/><line x1="9" y1="18" x2="20" y2="18"/><circle cx="4" cy="6" r="1.5" fill="currentColor" stroke="none"/><circle cx="4" cy="12" r="1.5" fill="currentColor" stroke="none"/><circle cx="4" cy="18" r="1.5" fill="currentColor" stroke="none"/></svg>
   </button>
-  <button class="tb-btn" data-tip="Code"
-    onclick="(function(){var t=document.querySelector('.chat-input-container textarea');if(!t)return;var s=t.selectionStart,e=t.selectionEnd;if(s===e)return;var v=t.value;t.value=v.slice(0,s)+'`'+v.slice(s,e)+'`'+v.slice(e);t.selectionStart=s;t.selectionEnd=e+2;t.dispatchEvent(new Event('input',{bubbles:true}))})()">
+  <button class="tb-btn" data-tip="Code" onclick="tbWrap('`','`')">
     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>
   </button>
-</div>
-"""
+</div>"""
 
 examples = [
     q["query"] for q in CONFIG.get("quick_actions", []) if "query" in q
@@ -986,140 +1079,101 @@ examples = [
 with gr.Blocks(title=CONFIG["client"]["name"]) as demo:
 
     gr.HTML(STYLE_HTML)
+    gr.HTML('<div id="kb-toast" class="kb-toast"></div>')
 
-    # ── App header ────────────────────────────────────────────────────
+    # ── Sticky header ─────────────────────────────────────────────────
     gr.HTML(f"""
-    <div class="app-header">
-      <div class="app-icon">🤖</div>
+    <div class="app-hdr">
+      <div class="app-hdr-icon">🤖</div>
       <div>
-        <p class="app-title">{CONFIG["client"]["name"]}</p>
-        <p class="app-sub">Search the knowledge base and get answers in plain language</p>
-      </div>
-      <button class="manage-kb-btn" onclick="toggleKB()">
-        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
-          <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/>
-          <polyline points="14 2 14 8 20 8"/>
-        </svg>
-        Manage KB
-      </button>
-    </div>
-    """)
-
-    # ── KB slide panel — rendered as pure HTML, outside Gradio layout ─
-    kb_panel_block = gr.HTML(value=list_kb_files)   # hidden, just holds current table
-    gr.HTML("""
-    <div id="kb-backdrop" class="kb-backdrop" onclick="closeKB()"></div>
-    <div id="kb-panel"    class="kb-panel-wrap">
-      <div class="kb-panel-head">
-        <span>📁</span>
-        <h2>Knowledge Base</h2>
-        <button class="kb-close-btn" onclick="closeKB()">✕</button>
+        <h1>{CONFIG["client"]["name"]}</h1>
+        <p>Search the knowledge base and get answers in plain language</p>
       </div>
-      <div class="kb-panel-body" id="kb-panel-body">
-        <!-- File list injected by Gradio below -->
-      </div>
-    </div>
-    """)
+    </div>""")
+
+    # ── 3-column body ─────────────────────────────────────────────────
+    with gr.Row(elem_classes="app-body"):
+
+        # ── LEFT: suggested questions ──────────────────────────────────
+        with gr.Column(scale=1, elem_classes="left-col"):
+            gr.HTML("""<div class="left-col-hdr">✦ Try asking</div>
+            <div class="left-col-body">""" +
+            "".join(
+                f'<button class="suggestion-pill" '
+                f'onclick="(function(){{var t=document.querySelector(\'.chat-input-container textarea\');'
+                f'if(t){{t.value={repr(q)};t.dispatchEvent(new Event(\'input\',{{bubbles:true}}));}}}})()">'
+                f'{q}</button>'
+                for q in examples
+            ) + "</div>")
+
+        # ── CENTRE: chat ───────────────────────────────────────────────
+        with gr.Column(scale=3, elem_classes="centre-col"):
+            gr.ChatInterface(
+                fn=chat_respond,
+                cache_examples=False,
+            )
+            gr.HTML(TOOLBAR_HTML)
+
+        # ── RIGHT: file list ───────────────────────────────────────────
+        with gr.Column(scale=1, elem_classes="right-col"):
+            gr.HTML("""
+            <div class="right-col-hdr">
+              <span class="right-col-title">Knowledge Base</span>
+              <div class="add-file-btn-wrap">
+                <button class="add-file-btn"
+                  onclick="document.getElementById('kb-file-attach').click()">
+                  + 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
+                </div>
+              </div>
+            </div>""")
+
+            kb_file_list = gr.HTML(value=list_kb_files_html)
+
+            # Hidden upload status
+            upload_status = gr.Markdown(visible=False)
+
+    # ── Hidden Gradio widgets for backend actions ──────────────────────
+    # These are invisible — actions are triggered by JS above
+    with gr.Row(visible=False):
+        toolbar_upload = gr.File(
+            label="", file_count="multiple",
+            file_types=[".txt", ".md", ".pdf", ".docx", ".doc"],
+            elem_id="kb-file-attach",
+        )
+        toolbar_status = gr.Markdown()
 
-    # ── "Try asking" label rendered above ChatInterface ───────────────
-    gr.HTML('<div class="try-label">✦ Try asking</div>')
+        delete_input = gr.Textbox(elem_id="kb-hidden-delete", show_label=False)
+        delete_btn   = gr.Button("del", elem_id="kb-delete-trigger")
+        delete_status= gr.Markdown()
 
-    # ── Main chat ─────────────────────────────────────────────────────
-    gr.ChatInterface(
-        fn=chat_respond,
-        examples=examples,
-        cache_examples=False,
-    )
+        old_name_input = gr.Textbox(elem_id="kb-hidden-old-name", show_label=False)
+        new_name_input = gr.Textbox(elem_id="kb-hidden-new-name", show_label=False)
+        rename_btn     = gr.Button("ren", elem_id="kb-rename-trigger")
+        rename_status  = gr.Markdown()
 
-    # ── Compact toolbar ───────────────────────────────────────────────
-    gr.HTML(TOOLBAR_HTML)
-
-    # ── KB Manager widgets (visible in panel via CSS overlay) ─────────
-    # These are real Gradio widgets positioned inside the panel via JS injection.
-    with gr.Column(visible=True) as kb_widgets:
-        with gr.Group():
-            gr.HTML('<div class="kb-section-label" style="margin-top:0">Files in index</div>')
-            kb_file_list  = gr.HTML(value=list_kb_files)
-            gr.HTML('<div class="kb-divider"></div>')
-            gr.HTML('<div class="kb-section-label">Upload documents</div>')
-            gr.HTML('<p style="font-size:.74rem;color:var(--muted);margin:0 0 6px">.txt · .md · .pdf · .docx &nbsp;·&nbsp; max 10 MB</p>')
-            upload_input  = gr.File(
-                label="",
-                file_count="multiple",
-                file_types=[".txt", ".md", ".pdf", ".docx", ".doc"],
-                show_label=False,
-            )
-            upload_btn    = gr.Button("⬆ Upload & Index", elem_classes="kb-upload-btn")
-            upload_status = gr.Markdown()
-            gr.HTML('<div class="kb-divider"></div>')
-            gr.HTML('<div class="kb-section-label">Delete a file</div>')
-            delete_input  = gr.Textbox(
-                placeholder="Filename, e.g. guide.pdf",
-                show_label=False,
-                elem_id="kb-delete-input",
-                elem_classes="kb-textbox",
-            )
-            delete_btn    = gr.Button("🗑 Delete file", elem_classes="kb-delete-btn", elem_id="kb-delete-btn")
-            delete_status = gr.Markdown()
-
-    # ── Hidden file input for toolbar attach ─────────────────────────
-    toolbar_upload        = gr.File(
-        label="",
-        file_count="multiple",
-        file_types=[".txt", ".md", ".pdf", ".docx", ".doc"],
-        visible=False,
-        elem_id="kb-file-attach",
-    )
-    toolbar_upload_status = gr.Markdown(visible=False)
-
-    # ── JS: move KB widgets into the slide panel after render ─────────
-    gr.HTML("""
-    <script>
-    (function moveKBWidgets(){
-      var target = document.getElementById("kb-panel-body");
-      // Walk up from kb-delete-btn to find the Gradio column wrapper
-      function tryMove(){
-        var btn = document.getElementById("kb-delete-btn");
-        if(!btn || !target) { setTimeout(tryMove, 300); return; }
-        // Find the wrapping gradio column (go up ~6 levels)
-        var el = btn;
-        for(var i=0;i<8;i++){
-          if(!el.parentElement) break;
-          el = el.parentElement;
-          if(el.classList.contains("block") && el.parentElement &&
-             el.parentElement.classList.contains("block")){
-            target.appendChild(el.parentElement);
-            return;
-          }
-        }
-        // Fallback: move the direct block container
-        target.appendChild(el);
-      }
-      if(document.readyState === "loading"){
-        document.addEventListener("DOMContentLoaded", function(){ setTimeout(tryMove, 500); });
-      } else {
-        setTimeout(tryMove, 500);
-      }
-    })();
-    </script>
-    """)
-
-    # ── Event wiring ─────────────────────────────────────────────────
-    upload_btn.click(
-        upload_kb_files,
-        inputs=[upload_input],
-        outputs=[upload_status, kb_file_list],
-    )
-    delete_btn.click(
-        delete_kb_file,
-        inputs=[delete_input],
-        outputs=[delete_status, kb_file_list],
-    )
-    toolbar_upload.change(
-        upload_kb_files,
-        inputs=[toolbar_upload],
-        outputs=[toolbar_upload_status, kb_file_list],
-    )
+    # ── Event wiring ──────────────────────────────────────────────────
+    def handle_upload(files):
+        status, _ = upload_kb_files(files)
+        return status, list_kb_files_html()
+
+    def handle_delete(filename):
+        status, _ = delete_kb_file(filename)
+        return status, list_kb_files_html()
+
+    def handle_rename(old, new):
+        status, _ = rename_kb_file(old, new)
+        return status, list_kb_files_html()
+
+    toolbar_upload.change(handle_upload,  inputs=[toolbar_upload],                       outputs=[toolbar_status, kb_file_list])
+    delete_btn.click(     handle_delete,  inputs=[delete_input],                          outputs=[delete_status,  kb_file_list])
+    rename_btn.click(     handle_rename,  inputs=[old_name_input, new_name_input],        outputs=[rename_status,  kb_file_list])
 
 
 # -----------------------------