Upload app.py with huggingface_hub

app.py

@@ -8,21 +8,18 @@ from concurrent.futures import ThreadPoolExecutor, as_completed
 # ── Config ─────────────────────────────────────────────────────────────────────
 HF_TOKEN   = os.environ.get("HF_TOKEN", "")
 HF_DATASET = "hf://datasets/styhero/styhero_dataset/data"
-BASE_DIR    = os.path.dirname(os.path.abspath(__file__))
-_LOCAL_M1   = os.path.join(BASE_DIR, "mobile1_index.parquet")
-_LOCAL_M2   = os.path.join(BASE_DIR, "mobile2_index.parquet")
-# Use local file if present (fast), otherwise read from HF dataset
-MOBILE1_IDX = _LOCAL_M1 if os.path.exists(_LOCAL_M1) else "hf://datasets/styhero/styhero_dataset/data/mobile1_index.parquet"
-MOBILE2_IDX = _LOCAL_M2 if os.path.exists(_LOCAL_M2) else "hf://datasets/styhero/styhero_dataset/data/mobile2_index.parquet"
-
+BASE_DIR   = os.path.dirname(os.path.abspath(__file__))
+_L1        = os.path.join(BASE_DIR, "mobile1_index.parquet")
+_L2        = os.path.join(BASE_DIR, "mobile2_index.parquet")
+MOBILE1_IDX = _L1 if os.path.exists(_L1) else "hf://datasets/styhero/styhero_dataset/data/mobile1_index.parquet"
+MOBILE2_IDX = _L2 if os.path.exists(_L2) else "hf://datasets/styhero/styhero_dataset/data/mobile2_index.parquet"
 
 # ── Helpers ────────────────────────────────────────────────────────────────────
 
-def fmt_ms(ms: float) -> str:
-    return f"{ms / 1000:.2f} s" if ms >= 1000 else f"{ms:.0f} ms"
-
+def fmt_ms(ms):
+    return f"{ms/1000:.2f}s" if ms >= 1000 else f"{ms:.0f}ms"
 
-def clean(val) -> str:
+def clean(val):
     if val is None or (isinstance(val, float) and pd.isna(val)):
         return ""
     s = str(val).strip()
@@ -30,29 +27,26 @@ def clean(val) -> str:
         return ""
     return ", ".join(p.strip() for p in s.split("!") if p.strip())
 
-
-def sanitize_df(df: pd.DataFrame) -> pd.DataFrame:
+def sanitize_df(df):
     df = df.copy()
     for col in ["name", "fname", "email", "id", "address", "circle"]:
         if col in df.columns:
             df[col] = df[col].apply(clean)
     return df
 
-
 def new_con():
     con = duckdb.connect()
     con.execute("INSTALL httpfs; LOAD httpfs;")
     con.execute("CREATE SECRET IF NOT EXISTS hf_secret (TYPE HUGGINGFACE, TOKEN ?)", [HF_TOKEN])
-    con.execute("SET threads = 4; SET enable_progress_bar = false;")
+    con.execute("SET threads=4; SET enable_progress_bar=false;")
     return con
 
-
 # ── Queries ────────────────────────────────────────────────────────────────────
 
-def _query_one(index_path: str, col: str, value: str):
+def _query_one(index_path, col, value):
     con = new_con()
-    t0 = time.perf_counter()
-    df = con.execute(f"""
+    t0  = time.perf_counter()
+    df  = con.execute(f"""
         SELECT mobile1, mobile2, row_group_id, row_start, row_end, filename
         FROM read_parquet('{index_path}')
         WHERE {col} = '{value}'
@@ -60,8 +54,7 @@ def _query_one(index_path: str, col: str, value: str):
     """).fetchdf()
     return df, (time.perf_counter() - t0) * 1000
 
-
-def query_both_parallel(target: str):
+def query_both_parallel(target):
     results = {}
     with ThreadPoolExecutor(max_workers=2) as ex:
         futures = {
@@ -73,23 +66,95 @@ def query_both_parallel(target: str):
             results[futures[f]] = (df, ms)
     return results
 
-
-def _fetch_one(filename: str, row_start: int, row_end: int, search_col: str, target: str):
-    con = new_con()
+def _fetch_one(filename, row_start, row_end, search_col, target):
+    con     = new_con()
     hf_path = f"{HF_DATASET}/{filename.split('/')[-1]}"
-    t0 = time.perf_counter()
-    df = con.execute(f"""
+    t0      = time.perf_counter()
+    df      = con.execute(f"""
         SELECT mobile1, mobile2, email, id, name, fname, address, circle
-        FROM read_parquet('{hf_path}', file_row_number = true)
+        FROM read_parquet('{hf_path}', file_row_number=true)
         WHERE file_row_number BETWEEN {row_start} AND {row_end}
           AND {search_col} = '{target}'
     """).fetchdf()
     return sanitize_df(df), (time.perf_counter() - t0) * 1000
 
+# ── SVG icons ──────────────────────────────────────────────────────────────────
 
-# ── Card renderer ──────────────────────────────────────────────────────────────
+def ico(path, color="#8b8bff", size=14):
+    return f'<svg width="{size}" height="{size}" viewBox="0 0 24 24" fill="none" stroke="{color}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex-shrink:0;margin-top:1px">{path}</svg>'
 
-def show_card(row: pd.Series, idx: int):
+ICO_PHONE   = ico('<rect x="5" y="2" width="14" height="20" rx="2"/><line x1="12" y1="18" x2="12.01" y2="18"/>')
+ICO_EMAIL   = ico('<rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/>')
+ICO_ID      = ico('<rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/>')
+ICO_PIN     = ico('<path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"/><circle cx="12" cy="10" r="3"/>')
+ICO_CIRCLE  = ico('<circle cx="12" cy="12" r="10"/><path d="M12 8v4l3 3"/>')
+ICO_PERSON  = ico('<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>')
+
+# ── Skeleton HTML ──────────────────────────────────────────────────────────────
+
+SKELETON_CSS = """
+<style>
+@keyframes shimmer {
+  0%   { background-position: -600px 0 }
+  100% { background-position:  600px 0 }
+}
+.sk {
+  border-radius: 6px;
+  background: linear-gradient(90deg,rgba(255,255,255,.05) 25%,rgba(255,255,255,.12) 50%,rgba(255,255,255,.05) 75%);
+  background-size: 1200px 100%;
+  animation: shimmer 1.5s infinite linear;
+}
+.sk-card {
+  background: rgba(255,255,255,.05);
+  border: 1px solid rgba(255,255,255,.1);
+  border-radius: 16px;
+  padding: 20px;
+  margin-bottom: 14px;
+}
+.sk-row { display:flex; gap:12px; align-items:center; margin-bottom:10px; }
+.sk-circle { width:36px;height:36px;border-radius:50%; flex-shrink:0; }
+.sk-line { height:14px; }
+.sk-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:14px; }
+.sk-field { display:flex; flex-direction:column; gap:5px; }
+.sk-label { height:9px; width:40%; }
+.sk-value { height:13px; width:75%; }
+</style>
+"""
+
+def skeleton_card():
+    return """
+<div class="sk-card">
+  <div class="sk-row">
+    <div class="sk sk-circle"></div>
+    <div style="flex:1;display:flex;flex-direction:column;gap:6px">
+      <div class="sk sk-line" style="width:55%"></div>
+      <div class="sk sk-line" style="width:35%;height:10px"></div>
+    </div>
+  </div>
+  <div class="sk-grid">
+    <div class="sk-field"><div class="sk sk-label"></div><div class="sk sk-value"></div></div>
+    <div class="sk-field"><div class="sk sk-label"></div><div class="sk sk-value"></div></div>
+    <div class="sk-field"><div class="sk sk-label"></div><div class="sk sk-value" style="width:85%"></div></div>
+    <div class="sk-field"><div class="sk sk-label"></div><div class="sk sk-value" style="width:60%"></div></div>
+    <div class="sk-field" style="grid-column:1/-1"><div class="sk sk-label"></div><div class="sk sk-value" style="width:90%"></div></div>
+  </div>
+</div>"""
+
+SKELETONS_HTML = SKELETON_CSS + "".join(skeleton_card() for _ in range(3))
+
+# ── Result card ────────────────────────────────────────────────────────────────
+
+def field_html(ico_svg, label, value, full=False):
+    if not value:
+        return ""
+    span = 'style="grid-column:1/-1"' if full else ""
+    return f"""
+<div class="c-field" {span}>
+  <div class="c-label">{ico_svg}<span>{label}</span></div>
+  <div class="c-value">{value}</div>
+</div>"""
+
+def show_card(row, idx):
     name    = clean(row.get("name"))    or "Unknown"
     fname   = clean(row.get("fname"))   or ""
     mobile1 = clean(row.get("mobile1")) or ""
@@ -101,7 +166,7 @@ def show_card(row: pd.Series, idx: int):
 
     copy_text = "\n".join(filter(None, [
         f"Name: {name}",
-        f"Father: {fname}"   if fname   else "",
+        f"Father: {fname}"    if fname   else "",
         f"Mobile1: {mobile1}" if mobile1 else "",
         f"Mobile2: {mobile2}" if mobile2 else "",
         f"Email: {email}"     if email   else "",
@@ -109,122 +174,198 @@ def show_card(row: pd.Series, idx: int):
         f"Address: {address}" if address else "",
         f"Circle: {circle}"   if circle  else "",
     ]))
+    copy_safe = copy_text.replace("\\","\\\\").replace("`","\\`").replace("${","\\${")
 
-    # Escape for JS string
-    copy_safe = copy_text.replace("\\", "\\\\").replace("`", "\\`").replace("${", "\\${")
-
-    card_html = f"""
-    <!DOCTYPE html>
-    <html>
-    <head>
-    <style>
-      * {{ box-sizing: border-box; margin: 0; padding: 0; }}
-      body {{ background: transparent; font-family: -apple-system, BlinkMacSystemFont, sans-serif; }}
-      .card {{
-        background: #1a1a2e;
-        border: 1px solid #2d2d44;
-        border-radius: 14px;
-        padding: 18px 18px 18px 18px;
-        position: relative;
-      }}
-      .copy-btn {{
-        position: absolute;
-        top: 14px;
-        right: 14px;
-        background: #3b3b6e;
-        color: #a0a0ff;
-        border: 1px solid #5050a0;
-        border-radius: 8px;
-        padding: 6px 14px;
-        font-size: 0.82rem;
-        cursor: pointer;
-        white-space: nowrap;
-        transition: background 0.15s;
-        -webkit-tap-highlight-color: transparent;
-      }}
-      .copy-btn:hover, .copy-btn:active {{ background: #5050a0; color: #fff; }}
-      .c-name {{
-        font-size: 1.1rem;
-        font-weight: 700;
-        color: #e2e2f0;
-        padding-right: 90px;
-      }}
-      .c-fname {{ font-size: 0.82rem; color: #777; margin: 3px 0 14px; }}
-      .c-grid {{
-        display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
-        gap: 10px 20px;
-      }}
-      .c-field {{ display: flex; flex-direction: column; }}
-      .c-label {{
-        font-size: 0.66rem;
-        text-transform: uppercase;
-        letter-spacing: 0.08em;
-        color: #555;
-        margin-bottom: 2px;
-      }}
-      .c-value {{ font-size: 0.9rem; color: #bbb; word-break: break-word; }}
-      .c-full {{ grid-column: 1 / -1; }}
-    </style>
-    </head>
-    <body>
-    <div class="card">
-      <button class="copy-btn" id="cb{idx}" onclick="
-        navigator.clipboard.writeText(`{copy_safe}`)
-          .then(() => {{ document.getElementById('cb{idx}').textContent='✓ Copied';
-                         setTimeout(()=>document.getElementById('cb{idx}').textContent='Copy',1500); }})
-          .catch(() => document.getElementById('cb{idx}').textContent='Failed');
-      ">Copy</button>
+    initials = (name[0] if name and name != "Unknown" else "?").upper()
 
+    card = f"""<!DOCTYPE html><html><head><meta charset="utf-8">
+<style>
+*{{box-sizing:border-box;margin:0;padding:0}}
+body{{background:transparent;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}}
+.card{{
+  background:rgba(255,255,255,.07);
+  backdrop-filter:blur(20px);
+  -webkit-backdrop-filter:blur(20px);
+  border:1px solid rgba(255,255,255,.13);
+  border-radius:16px;
+  padding:18px;
+  position:relative;
+}}
+.copy-btn{{
+  position:absolute;top:14px;right:14px;
+  background:rgba(124,111,255,.15);
+  color:#a0a0ff;
+  border:1px solid rgba(124,111,255,.3);
+  border-radius:8px;padding:5px 14px;
+  font-size:.76rem;font-weight:600;cursor:pointer;
+  transition:background .15s,color .15s;
+  -webkit-tap-highlight-color:transparent;
+}}
+.copy-btn:hover,.copy-btn:active{{background:linear-gradient(135deg,#7c6fff,#c084fc);color:#fff;border-color:transparent}}
+.header{{display:flex;align-items:center;gap:12px;padding-right:90px;margin-bottom:14px}}
+.avatar{{
+  width:40px;height:40px;border-radius:50%;flex-shrink:0;
+  background:linear-gradient(135deg,#7c6fff,#c084fc);
+  display:flex;align-items:center;justify-content:center;
+  font-size:1.1rem;font-weight:700;color:#fff;
+}}
+.c-name{{font-size:1.05rem;font-weight:700;color:#f0f0ff}}
+.c-fname{{font-size:.78rem;color:rgba(200,200,255,.45);margin-top:2px}}
+.c-grid{{
+  display:grid;
+  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
+  gap:10px 18px;
+}}
+.c-field{{display:flex;flex-direction:column;gap:3px}}
+.c-label{{
+  display:flex;align-items:center;gap:4px;
+  font-size:.62rem;text-transform:uppercase;letter-spacing:.09em;
+  color:rgba(200,200,255,.4);
+}}
+.c-value{{font-size:.87rem;color:rgba(240,240,255,.82);word-break:break-word}}
+</style></head><body>
+<div class="card">
+  <button class="copy-btn" id="cb{idx}" onclick="
+    navigator.clipboard.writeText(`{copy_safe}`)
+      .then(()=>{{document.getElementById('cb{idx}').textContent='✓ Copied';
+                  setTimeout(()=>document.getElementById('cb{idx}').textContent='Copy',1500)}})
+      .catch(()=>document.getElementById('cb{idx}').textContent='Failed')
+  ">Copy</button>
+
+  <div class="header">
+    <div class="avatar">{initials}</div>
+    <div>
       <div class="c-name">{name}</div>
-      <div class="c-fname">{"S/O: " + fname if fname else "&nbsp;"}</div>
-
-      <div class="c-grid">
-        {"" if not mobile1 else '<div class="c-field"><span class="c-label">Mobile 1</span><span class="c-value">' + mobile1 + '</span></div>'}
-        {"" if not mobile2 else '<div class="c-field"><span class="c-label">Mobile 2</span><span class="c-value">' + mobile2 + '</span></div>'}
-        {"" if not email   else '<div class="c-field"><span class="c-label">Email</span><span class="c-value">' + email + '</span></div>'}
-        {"" if not rid     else '<div class="c-field"><span class="c-label">ID</span><span class="c-value">' + rid + '</span></div>'}
-        {"" if not circle  else '<div class="c-field"><span class="c-label">Circle</span><span class="c-value">' + circle + '</span></div>'}
-        {"" if not address else '<div class="c-field c-full"><span class="c-label">Address</span><span class="c-value">' + address + '</span></div>'}
-      </div>
+      {"<div class='c-fname'>S/O: " + fname + "</div>" if fname else ""}
     </div>
-
-    <script>
-      // Auto-resize iframe to card height
-      const resize = () => {{
-        const h = document.querySelector('.card').getBoundingClientRect().height;
-        window.parent.document.querySelectorAll('iframe').forEach(f => {{
-          if (f.contentWindow === window) f.style.height = (h + 8) + 'px';
-        }});
-      }};
-      window.addEventListener('load', resize);
-      window.addEventListener('resize', resize);
-    </script>
-    </body>
-    </html>
-    """
-    st.components.v1.html(card_html, height=200, scrolling=False)
-
-
-# ── Page ───────────────────────────────────────────────────────────────────────
-st.set_page_config(page_title="Mobile Lookup", page_icon="📱", layout="centered")
+  </div>
+
+  <div class="c-grid">
+    {field_html(ICO_PHONE, "Mobile 1", mobile1)}
+    {field_html(ICO_PHONE, "Mobile 2", mobile2)}
+    {field_html(ICO_EMAIL, "Email", email)}
+    {field_html(ICO_ID,    "ID", rid)}
+    {field_html(ICO_CIRCLE,"Circle", circle)}
+    {field_html(ICO_PIN,   "Address", address, full=True)}
+  </div>
+</div>
+<script>
+const resize=()=>{{
+  const h=document.querySelector('.card').getBoundingClientRect().height;
+  window.parent.document.querySelectorAll('iframe').forEach(f=>{{
+    if(f.contentWindow===window) f.style.height=(h+6)+'px';
+  }});
+}};
+window.addEventListener('load',resize);
+window.addEventListener('resize',resize);
+</script>
+</body></html>"""
+
+    st.components.v1.html(card, height=220, scrolling=False)
+
+# ── Global CSS ─────────────────────────────────────────────────────────────────
+
+st.set_page_config(page_title="Mobile Lookup", layout="centered")
 
 st.markdown("""
 <style>
-  /* tighten top padding */
-  .block-container { padding-top: 2rem; padding-bottom: 2rem; }
-  /* hide streamlit menu / footer */
-  #MainMenu, footer { visibility: hidden; }
+/* Background */
+.stApp {
+  background: linear-gradient(140deg,#0f0c29 0%,#24243e 50%,#302b63 100%) !important;
+  background-attachment: fixed !important;
+}
+/* Hide default chrome */
+#MainMenu, footer, header { visibility: hidden; }
+.block-container { padding: 2rem 1.5rem 3rem !important; max-width: 720px !important; }
+
+/* Form glass panel */
+[data-testid="stForm"] {
+  background: rgba(255,255,255,.07) !important;
+  backdrop-filter: blur(20px) !important;
+  -webkit-backdrop-filter: blur(20px) !important;
+  border: 1px solid rgba(255,255,255,.13) !important;
+  border-radius: 16px !important;
+  padding: 1.25rem !important;
+  box-shadow: 0 8px 32px rgba(0,0,0,.35) !important;
+}
+
+/* Input */
+.stTextInput input {
+  background: rgba(255,255,255,.05) !important;
+  border: 1px solid rgba(255,255,255,.15) !important;
+  border-radius: 10px !important;
+  color: #f0f0ff !important;
+  font-size: 1rem !important;
+  padding: 0.6rem 1rem !important;
+}
+.stTextInput input:focus {
+  border-color: #7c6fff !important;
+  box-shadow: 0 0 0 2px rgba(124,111,255,.2) !important;
+}
+.stTextInput input::placeholder { color: rgba(200,200,255,.35) !important; }
+.stTextInput label { display: none !important; }
+
+/* Submit button */
+.stFormSubmitButton button {
+  background: linear-gradient(135deg,#7c6fff,#c084fc) !important;
+  color: #fff !important;
+  border: none !important;
+  border-radius: 10px !important;
+  font-weight: 600 !important;
+  font-size: .95rem !important;
+  padding: .55rem 0 !important;
+  width: 100% !important;
+  transition: opacity .15s !important;
+}
+.stFormSubmitButton button:hover { opacity: .85 !important; }
+
+/* Status messages */
+.stAlert {
+  background: rgba(255,255,255,.06) !important;
+  border-radius: 10px !important;
+  backdrop-filter: blur(12px) !important;
+}
+
+/* Caption */
+.stCaption { color: rgba(200,200,255,.4) !important; font-size: .78rem !important; }
+
+/* Spinner */
+.stSpinner > div { border-top-color: #7c6fff !important; }
 </style>
 """, unsafe_allow_html=True)
 
-st.markdown("## 📱 Mobile Lookup")
+# ── Header ──────────────────────────────────────────────────────────────────────
+
+st.markdown("""
+<div style="display:flex;align-items:center;gap:12px;margin-bottom:1.5rem">
+  <div style="
+    width:42px;height:42px;border-radius:12px;flex-shrink:0;
+    background:linear-gradient(135deg,#7c6fff,#c084fc);
+    display:flex;align-items:center;justify-content:center;
+  ">
+    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#fff"
+      stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <rect x="5" y="2" width="14" height="20" rx="2"/>
+      <line x1="12" y1="18" x2="12.01" y2="18"/>
+    </svg>
+  </div>
+  <div>
+    <div style="font-size:1.4rem;font-weight:800;
+      background:linear-gradient(90deg,#7c6fff,#c084fc);
+      -webkit-background-clip:text;-webkit-text-fill-color:transparent;
+      background-clip:text;line-height:1.2">Mobile Lookup</div>
+    <div style="font-size:.75rem;color:rgba(200,200,255,.4);margin-top:2px">
+      Search across HuggingFace parquet via DuckDB
+    </div>
+  </div>
+</div>
+""", unsafe_allow_html=True)
+
+# ── Search form ─────────────────────────────────────────────────────────────────
 
 with st.form("search_form"):
-    number = st.text_input(
-        "", placeholder="Enter mobile number — e.g. 919876543210",
-        label_visibility="collapsed"
-    )
+    number = st.text_input("", placeholder="Enter mobile number — e.g. 919876543210",
+                           label_visibility="collapsed")
     submitted = st.form_submit_button("Search", use_container_width=True, type="primary")
 
 if not submitted or not number.strip():
@@ -232,25 +373,36 @@ if not submitted or not number.strip():
 
 target = number.strip()
 
-# ── Index lookup ───────────────────────────────────────────────────────────────
-with st.spinner("Searching…"):
-    t0 = time.perf_counter()
-    idx_results = query_both_parallel(target)
-    idx_ms = (time.perf_counter() - t0) * 1000
+# ── Skeleton while loading ──────────────────────────────────────────────────────
+
+sk_placeholder = st.empty()
+sk_placeholder.markdown(SKELETONS_HTML, unsafe_allow_html=True)
+
+# ── Index lookup ────────────────────────────────────────────────────────────────
+
+t0          = time.perf_counter()
+idx_results = query_both_parallel(target)
+idx_ms      = (time.perf_counter() - t0) * 1000
 
 m1_df, m1_ms = idx_results["mobile1"]
 m2_df, m2_ms = idx_results["mobile2"]
 
 if m1_df.empty and m2_df.empty:
-    st.warning(f"No records found for **{target}**")
+    sk_placeholder.empty()
+    st.markdown("""
+    <div style="background:rgba(251,191,36,.08);border:1px solid rgba(251,191,36,.25);
+      border-radius:10px;padding:12px 16px;color:#fbbf24;font-size:.9rem">
+      No records found for <strong>{}</strong>
+    </div>""".format(target), unsafe_allow_html=True)
     st.stop()
 
-# ── Row-group fetch ────────────────────────────────────────────────────────────
+# ── Row-group fetch ─────────────────────────────────────────────────────────────
+
 fetch_tasks = []
 for src_col, src_df in [("mobile1", m1_df), ("mobile2", m2_df)]:
     if src_df.empty:
         continue
-    for _, rg in src_df[["filename", "row_group_id", "row_start", "row_end"]].drop_duplicates().iterrows():
+    for _, rg in src_df[["filename","row_group_id","row_start","row_end"]].drop_duplicates().iterrows():
         fetch_tasks.append({
             "filename":   str(rg["filename"]),
             "row_start":  int(rg["row_start"]),
@@ -258,33 +410,52 @@ for src_col, src_df in [("mobile1", m1_df), ("mobile2", m2_df)]:
             "search_col": src_col,
         })
 
-with st.spinner("Fetching records…"):
-    t0 = time.perf_counter()
-    all_dfs, errors = [], []
-    with ThreadPoolExecutor(max_workers=min(8, len(fetch_tasks))) as ex:
-        futures = {
-            ex.submit(_fetch_one, t["filename"], t["row_start"], t["row_end"], t["search_col"], target): t
-            for t in fetch_tasks
-        }
-        for f in as_completed(futures):
-            try:
-                df, _ = f.result()
-                if not df.empty:
-                    all_dfs.append(df)
-            except Exception as e:
-                errors.append(str(e))
-    fetch_ms = (time.perf_counter() - t0) * 1000
+all_dfs, errors = [], []
+with ThreadPoolExecutor(max_workers=min(8, len(fetch_tasks))) as ex:
+    futures = {
+        ex.submit(_fetch_one, t["filename"], t["row_start"], t["row_end"], t["search_col"], target): t
+        for t in fetch_tasks
+    }
+    for f in as_completed(futures):
+        try:
+            df, _ = f.result()
+            if not df.empty:
+                all_dfs.append(df)
+        except Exception as e:
+            errors.append(str(e))
+
+fetch_ms = (time.perf_counter() - t0) * 1000
+
+# Clear skeleton
+sk_placeholder.empty()
 
 for err in errors:
     st.error(err)
 
 if not all_dfs:
-    st.warning("No matching rows found.")
+    st.markdown("""
+    <div style="background:rgba(251,191,36,.08);border:1px solid rgba(251,191,36,.25);
+      border-radius:10px;padding:12px 16px;color:#fbbf24;font-size:.9rem">
+      No matching rows found in remote parquet.
+    </div>""", unsafe_allow_html=True)
     st.stop()
 
 combined = pd.concat(all_dfs, ignore_index=True).drop_duplicates()
 
-st.caption(f"**{len(combined)}** record(s) · {fmt_ms(idx_ms)} index · {fmt_ms(fetch_ms)} fetch")
+# ── Results ─────────────────────────────────────────────────────────────────────
+
+st.markdown(f"""
+<div style="display:flex;align-items:center;gap:8px;margin-bottom:.75rem">
+  <div style="
+    background:rgba(74,222,128,.12);border:1px solid rgba(74,222,128,.25);
+    border-radius:20px;padding:4px 14px;
+    color:#4ade80;font-size:.8rem;font-weight:600
+  ">{len(combined)} record(s)</div>
+  <div style="color:rgba(200,200,255,.35);font-size:.75rem">
+    {fmt_ms(idx_ms)} index · {fmt_ms(fetch_ms)} total
+  </div>
+</div>
+""", unsafe_allow_html=True)
 
 for i, (_, row) in enumerate(combined.iterrows()):
     show_card(row, i)