From 1b038d4e54746c6ea0c6152db0017a3a40ca3917 Mon Sep 17 00:00:00 2001
From: ananthanarayanan-28 <anantha.narayanan@oraczen.ai>
Date: Sat, 27 Jun 2026 21:58:57 +0530
Subject: [PATCH 1/2] feat: add Domain Files analytics view to admin dashboard
 with backend API support for listing shared domain datasets

---
 .../admin/analytics/agent-domain-files.tsx    | 628 ++++++++++++++++++
 .../admin/analytics/agent-domain.tsx          |   1 -
 frontend/src/components/admin/view-tab.tsx    |  89 ++-
 frontend/src/types/api.ts                     |  34 +
 qa-chatbot/src/promptly/admin/api/router.py   | 215 +++++-
 qa-chatbot/src/promptly/admin/api/schemas.py  |  37 ++
 6 files changed, 989 insertions(+), 15 deletions(-)
 create mode 100644 frontend/src/components/admin/analytics/agent-domain-files.tsx

diff --git a/frontend/src/components/admin/analytics/agent-domain-files.tsx b/frontend/src/components/admin/analytics/agent-domain-files.tsx
new file mode 100644
index 0000000..d2a4ecc
--- /dev/null
+++ b/frontend/src/components/admin/analytics/agent-domain-files.tsx
@@ -0,0 +1,628 @@
+'use client';
+
+import { useState, useEffect, useRef } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { api } from '@/lib/api';
+import type { AdminDomainItem, AdminDomainList, AdminDomainQAResponse } from '@/types/api';
+
+const PER_PAGE = 20;
+
+// ── Helpers ───────────────────────────────────────────────────────────────────
+
+function fmtDate(iso: string) {
+  return new Date(iso).toLocaleDateString(undefined, {
+    year: 'numeric', month: 'short', day: 'numeric',
+  });
+}
+
+function StatusBadge({ status }: { status: string }) {
+  const color =
+    status === 'completed' ? '#10b981' :
+    status === 'failed'    ? '#f43f5e' :
+    status === 'cancelled' ? '#6b7280' : '#f59e0b';
+  return (
+    <span style={{
+      display: 'inline-block', padding: '2px 9px', borderRadius: 99,
+      fontSize: 11, fontWeight: 600, letterSpacing: '.03em',
+      background: `color-mix(in oklab, ${color} 12%, transparent)`,
+      color,
+    }}>
+      {status.replace(/_/g, ' ')}
+    </span>
+  );
+}
+
+// ── PDF Modal ─────────────────────────────────────────────────────────────────
+
+function PdfModal({
+  domain,
+  onClose,
+}: {
+  domain: AdminDomainItem;
+  onClose: () => void;
+}) {
+  const [blobUrl, setBlobUrl] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(false);
+  const urlRef = useRef<string | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    setLoading(true);
+    setError(false);
+
+    api.get<Blob>(`/api/v1/admin/domain-prompts/${domain.domain_id}/pdf`, {
+      responseType: 'blob',
+    }).then(res => {
+      if (cancelled) return;
+      const url = URL.createObjectURL(res.data);
+      urlRef.current = url;
+      setBlobUrl(url);
+      setLoading(false);
+    }).catch(() => {
+      if (!cancelled) { setError(true); setLoading(false); }
+    });
+
+    return () => {
+      cancelled = true;
+      if (urlRef.current) {
+        URL.revokeObjectURL(urlRef.current);
+        urlRef.current = null;
+      }
+    };
+  }, [domain.domain_id]);
+
+  const handleDownload = () => {
+    if (!blobUrl) return;
+    const a = document.createElement('a');
+    a.href = blobUrl;
+    a.download = `${domain.domain_name}.pdf`;
+    a.click();
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Escape') onClose();
+  };
+
+  return (
+    <div
+      role="dialog"
+      aria-modal="true"
+      aria-label={`PDF viewer: ${domain.domain_name}`}
+      onKeyDown={handleKeyDown}
+      tabIndex={-1}
+      style={{
+        position: 'fixed', inset: 0, zIndex: 9000,
+        background: 'rgba(0,0,0,.65)', backdropFilter: 'blur(4px)',
+        display: 'flex', flexDirection: 'column',
+      }}
+    >
+      {/* Header bar */}
+      <div style={{
+        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+        padding: '12px 20px', background: 'var(--surface)',
+        borderBottom: '1px solid var(--border)', flexShrink: 0,
+      }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none"
+            stroke="var(--text-muted)" strokeWidth="2" strokeLinecap="round">
+            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
+            <polyline points="14 2 14 8 20 8"/>
+          </svg>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
+            <span style={{ fontSize: 14, fontWeight: 700, color: 'var(--text)' }}>
+              {domain.domain_name}
+            </span>
+            <span style={{ fontSize: 11.5, color: 'var(--text-muted)' }}>
+              {domain.user_email}
+            </span>
+          </div>
+        </div>
+        <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
+          {blobUrl && (
+            <button
+              onClick={handleDownload}
+              style={{
+                display: 'flex', alignItems: 'center', gap: 6,
+                padding: '7px 14px', fontSize: 12.5, fontWeight: 600,
+                borderRadius: 8, border: '1px solid var(--border)',
+                background: 'var(--surface-2)', color: 'var(--text)',
+                cursor: 'pointer',
+              }}
+            >
+              <svg width="13" height="13" viewBox="0 0 24 24" fill="none"
+                stroke="currentColor" strokeWidth="2.5" strokeLinecap="round">
+                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
+                <polyline points="7 10 12 15 17 10"/>
+                <line x1="12" y1="15" x2="12" y2="3"/>
+              </svg>
+              Download PDF
+            </button>
+          )}
+          <button
+            onClick={onClose}
+            aria-label="Close PDF viewer"
+            style={{
+              width: 32, height: 32, borderRadius: 8, border: '1px solid var(--border)',
+              background: 'var(--surface-2)', color: 'var(--text-muted)',
+              cursor: 'pointer', fontSize: 18, lineHeight: 1,
+              display: 'flex', alignItems: 'center', justifyContent: 'center',
+            }}
+          >
+            ×
+          </button>
+        </div>
+      </div>
+
+      {/* Body */}
+      <div style={{ flex: 1, minHeight: 0, position: 'relative' }}>
+        {loading && (
+          <div style={{
+            position: 'absolute', inset: 0, display: 'flex',
+            alignItems: 'center', justifyContent: 'center',
+            color: 'rgba(255,255,255,.6)', fontSize: 14,
+          }}>
+            Loading PDF…
+          </div>
+        )}
+        {error && (
+          <div style={{
+            position: 'absolute', inset: 0, display: 'flex',
+            alignItems: 'center', justifyContent: 'center',
+            flexDirection: 'column', gap: 8,
+          }}>
+            <span style={{ color: '#f43f5e', fontSize: 14, fontWeight: 600 }}>
+              Failed to load PDF
+            </span>
+            <span style={{ color: 'rgba(255,255,255,.5)', fontSize: 12.5 }}>
+              Check that MinIO is reachable and the file exists.
+            </span>
+          </div>
+        )}
+        {blobUrl && (
+          <iframe
+            src={blobUrl}
+            title={`PDF: ${domain.domain_name}`}
+            style={{ width: '100%', height: '100%', border: 'none', display: 'block' }}
+          />
+        )}
+      </div>
+    </div>
+  );
+}
+
+// ── QA Side Panel ─────────────────────────────────────────────────────────────
+
+function QAPanel({
+  domain,
+  onClose,
+}: {
+  domain: AdminDomainItem;
+  onClose: () => void;
+}) {
+  const [search, setSearch] = useState('');
+
+  const { data, isLoading, isError } = useQuery<AdminDomainQAResponse>({
+    queryKey: ['admin', 'domain-qa', domain.domain_id],
+    queryFn: async () => {
+      const res = await api.get<{ data: AdminDomainQAResponse }>(
+        `/api/v1/admin/domain-prompts/${domain.domain_id}/dataset`
+      );
+      return res.data.data;
+    },
+    staleTime: 5 * 60 * 1000,
+  });
+
+  const filtered = data?.rows.filter(r =>
+    !search ||
+    r.question.toLowerCase().includes(search.toLowerCase()) ||
+    r.answer.toLowerCase().includes(search.toLowerCase())
+  ) ?? [];
+
+  return (
+    <div style={{
+      width: 460, flexShrink: 0, borderLeft: '1px solid var(--border)',
+      display: 'flex', flexDirection: 'column', height: '100%', overflow: 'hidden',
+      background: 'var(--surface)',
+    }}>
+      {/* Panel header */}
+      <div style={{
+        padding: '14px 18px 12px', borderBottom: '1px solid var(--border)',
+        flexShrink: 0,
+      }}>
+        <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 8 }}>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 3, minWidth: 0 }}>
+            <span style={{ fontSize: 13.5, fontWeight: 700, color: 'var(--text)',
+              overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+              {domain.domain_name}
+            </span>
+            <span style={{ fontSize: 11.5, color: 'var(--text-muted)' }}>
+              {domain.user_email}
+            </span>
+          </div>
+          <button
+            onClick={onClose}
+            aria-label="Close Q&A panel"
+            style={{
+              flexShrink: 0, width: 28, height: 28, borderRadius: 6,
+              border: '1px solid var(--border)', background: 'var(--surface-2)',
+              color: 'var(--text-muted)', cursor: 'pointer', fontSize: 16,
+              display: 'flex', alignItems: 'center', justifyContent: 'center',
+            }}
+          >
+            ×
+          </button>
+        </div>
+
+        {data && (
+          <div style={{ marginTop: 10 }}>
+            <span style={{
+              fontSize: 10.5, fontWeight: 700, color: 'var(--text-subtle)',
+              textTransform: 'uppercase', letterSpacing: '.07em',
+            }}>
+              {data.row_count} Q&A pair{data.row_count !== 1 ? 's' : ''}
+            </span>
+          </div>
+        )}
+
+        {/* Search */}
+        {data && data.row_count > 5 && (
+          <div style={{ marginTop: 10, position: 'relative' }}>
+            <svg
+              width="13" height="13" viewBox="0 0 24 24" fill="none"
+              stroke="var(--text-muted)" strokeWidth="2" strokeLinecap="round"
+              style={{ position: 'absolute', left: 10, top: '50%', transform: 'translateY(-50%)' }}
+            >
+              <circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/>
+            </svg>
+            <input
+              type="text"
+              placeholder="Search questions and answers…"
+              value={search}
+              onChange={e => setSearch(e.target.value)}
+              style={{
+                width: '100%', padding: '7px 10px 7px 30px', fontSize: 12.5,
+                border: '1px solid var(--border)', borderRadius: 7,
+                background: 'var(--surface-2)', color: 'var(--text)',
+                outline: 'none', boxSizing: 'border-box',
+              }}
+            />
+          </div>
+        )}
+      </div>
+
+      {/* Pairs list */}
+      <div style={{ flex: 1, overflowY: 'auto', padding: '12px 16px', display: 'flex', flexDirection: 'column', gap: 10 }}>
+        {isLoading && (
+          <div style={{ color: 'var(--text-muted)', fontSize: 13, paddingTop: 20, textAlign: 'center' }}>
+            Loading…
+          </div>
+        )}
+        {isError && (
+          <div style={{ color: 'var(--danger)', fontSize: 13, paddingTop: 20, textAlign: 'center' }}>
+            Failed to load Q&A pairs.
+          </div>
+        )}
+        {data && data.rows.length === 0 && (
+          <div style={{ color: 'var(--text-muted)', fontSize: 13, paddingTop: 20, textAlign: 'center' }}>
+            No Q&A pairs for this domain yet.
+          </div>
+        )}
+        {search && filtered.length === 0 && data && data.rows.length > 0 && (
+          <div style={{ color: 'var(--text-muted)', fontSize: 13, paddingTop: 12, textAlign: 'center' }}>
+            No results for &ldquo;{search}&rdquo;
+          </div>
+        )}
+        {filtered.map((row, i) => {
+          const globalIndex = data!.rows.indexOf(row);
+          return (
+            <div key={i} style={{
+              border: '1px solid var(--border)', borderRadius: 10,
+              overflow: 'hidden', background: 'var(--surface)',
+            }}>
+              {/* Question */}
+              <div style={{
+                padding: '10px 14px', display: 'flex', gap: 10, alignItems: 'flex-start',
+                borderBottom: '1px solid var(--border)',
+                background: 'color-mix(in oklab, #06b6d4 5%, transparent)',
+              }}>
+                <div style={{
+                  flexShrink: 0, width: 22, height: 22, borderRadius: 6,
+                  background: 'color-mix(in oklab, #06b6d4 18%, transparent)',
+                  display: 'flex', alignItems: 'center', justifyContent: 'center',
+                }}>
+                  <span style={{ fontSize: 10, fontWeight: 800, color: '#06b6d4', letterSpacing: 0 }}>Q</span>
+                </div>
+                <div style={{ display: 'flex', flexDirection: 'column', gap: 2, flex: 1, minWidth: 0 }}>
+                  <span style={{ fontSize: 10, fontWeight: 600, color: '#06b6d4',
+                    textTransform: 'uppercase', letterSpacing: '.05em' }}>
+                    Question {globalIndex + 1}
+                  </span>
+                  <span style={{ fontSize: 13, color: 'var(--text)', lineHeight: 1.55 }}>
+                    {row.question}
+                  </span>
+                </div>
+              </div>
+              {/* Answer */}
+              <div style={{
+                padding: '10px 14px', display: 'flex', gap: 10, alignItems: 'flex-start',
+              }}>
+                <div style={{
+                  flexShrink: 0, width: 22, height: 22, borderRadius: 6,
+                  background: 'color-mix(in oklab, #8b5cf6 14%, transparent)',
+                  display: 'flex', alignItems: 'center', justifyContent: 'center',
+                }}>
+                  <span style={{ fontSize: 10, fontWeight: 800, color: '#8b5cf6', letterSpacing: 0 }}>A</span>
+                </div>
+                <div style={{ display: 'flex', flexDirection: 'column', gap: 2, flex: 1, minWidth: 0 }}>
+                  <span style={{ fontSize: 10, fontWeight: 600, color: '#8b5cf6',
+                    textTransform: 'uppercase', letterSpacing: '.05em' }}>
+                    Answer
+                  </span>
+                  <span style={{ fontSize: 13, color: 'var(--text-muted)', lineHeight: 1.55 }}>
+                    {row.answer}
+                  </span>
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+// ── Domain table row ──────────────────────────────────────────────────────────
+
+function DomainRow({
+  domain,
+  qaOpen,
+  onOpenQA,
+  onOpenPDF,
+}: {
+  domain: AdminDomainItem;
+  qaOpen: boolean;
+  onOpenQA: () => void;
+  onOpenPDF: () => void;
+}) {
+  return (
+    <tr style={{
+      borderBottom: '1px solid var(--border)',
+      background: qaOpen ? 'color-mix(in oklab, var(--primary) 4%, transparent)' : undefined,
+      transition: 'background .12s',
+    }}>
+      <td style={{ padding: '11px 16px', fontSize: 12.5, color: 'var(--text-muted)' }}>
+        {domain.user_email}
+      </td>
+      <td style={{ padding: '11px 16px', fontSize: 13, color: 'var(--text)', fontWeight: 600 }}>
+        {domain.domain_name}
+      </td>
+      <td style={{ padding: '11px 16px' }}>
+        <StatusBadge status={domain.status} />
+      </td>
+      <td style={{ padding: '11px 16px', fontSize: 12.5, fontFamily: 'var(--mono)',
+        color: 'var(--text-muted)', textAlign: 'right' }}>
+        {domain.row_count != null ? domain.row_count.toLocaleString() : '—'}
+      </td>
+      <td style={{ padding: '11px 16px', fontSize: 12, color: 'var(--text-muted)' }}>
+        {fmtDate(domain.created_at)}
+      </td>
+      <td style={{ padding: '11px 16px' }}>
+        <div style={{ display: 'flex', gap: 6, justifyContent: 'flex-end' }}>
+          {domain.has_dataset && (
+            <button
+              onClick={onOpenQA}
+              style={{
+                padding: '5px 12px', fontSize: 12, fontWeight: 600, borderRadius: 7,
+                border: `1px solid ${qaOpen ? '#06b6d4' : 'var(--border)'}`,
+                background: qaOpen
+                  ? 'color-mix(in oklab, #06b6d4 12%, transparent)'
+                  : 'var(--surface-2)',
+                color: qaOpen ? '#06b6d4' : 'var(--text-muted)',
+                cursor: 'pointer', transition: 'all .12s',
+              }}
+            >
+              {qaOpen ? 'Hide QA' : 'View QA'}
+            </button>
+          )}
+          {domain.has_pdf && (
+            <button
+              onClick={onOpenPDF}
+              style={{
+                padding: '5px 12px', fontSize: 12, fontWeight: 600, borderRadius: 7,
+                border: '1px solid var(--border)', background: 'var(--surface-2)',
+                color: 'var(--text-muted)', cursor: 'pointer',
+              }}
+            >
+              View PDF
+            </button>
+          )}
+          {!domain.has_pdf && !domain.has_dataset && (
+            <span style={{ fontSize: 12, color: 'var(--text-muted)', fontStyle: 'italic', padding: '5px 0' }}>
+              No files
+            </span>
+          )}
+        </div>
+      </td>
+    </tr>
+  );
+}
+
+// ── Main export ───────────────────────────────────────────────────────────────
+
+export function AgentDomainFiles() {
+  const [page, setPage] = useState(1);
+  const [openQAId, setOpenQAId] = useState<string | null>(null);
+  const [pdfDomain, setPdfDomain] = useState<AdminDomainItem | null>(null);
+
+  const { data, isLoading, isError } = useQuery<AdminDomainList>({
+    queryKey: ['admin', 'domain-prompts', page],
+    queryFn: async () => {
+      const res = await api.get<{ data: AdminDomainList }>(
+        `/api/v1/admin/domain-prompts?page=${page}&per_page=${PER_PAGE}`
+      );
+      return res.data.data;
+    },
+    staleTime: 2 * 60 * 1000,
+  });
+
+  const totalPages = data ? Math.ceil(data.total / PER_PAGE) : 1;
+  const qaOpenDomain = data?.domains.find(d => d.domain_id === openQAId) ?? null;
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 0, height: '100%' }}>
+      {/* Summary strip */}
+      {data && (
+        <div style={{
+          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+          marginBottom: 16,
+        }}>
+          <span style={{ fontSize: 13, color: 'var(--text-muted)' }}>
+            {data.total} domain project{data.total !== 1 ? 's' : ''} from users with data sharing enabled
+          </span>
+        </div>
+      )}
+
+      {/* Main content: table + optional QA panel side-by-side */}
+      <div style={{ display: 'flex', flex: 1, minHeight: 0, gap: 0, overflow: 'hidden' }}>
+        {/* Table container */}
+        <div style={{
+          flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column',
+          border: '1px solid var(--border)', borderRadius: qaOpenDomain ? '12px 0 0 12px' : 12,
+          overflow: 'hidden', background: 'var(--surface)',
+        }}>
+          {isLoading && (
+            <div style={{ padding: '40px 0', textAlign: 'center', color: 'var(--text-muted)', fontSize: 13 }}>
+              Loading…
+            </div>
+          )}
+          {isError && (
+            <div style={{ padding: '32px 0', textAlign: 'center', color: 'var(--danger)', fontSize: 13 }}>
+              Failed to load domain files.
+            </div>
+          )}
+
+          {data && data.domains.length === 0 && (
+            <div style={{
+              padding: '56px 24px', textAlign: 'center',
+              display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10,
+            }}>
+              <svg width="40" height="40" viewBox="0 0 24 24" fill="none"
+                stroke="var(--border)" strokeWidth="1.5" strokeLinecap="round">
+                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
+                <polyline points="14 2 14 8 20 8"/>
+              </svg>
+              <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--text-muted)' }}>
+                No shared domain files yet
+              </div>
+              <div style={{ fontSize: 12.5, color: 'var(--text-muted)', lineHeight: 1.6, maxWidth: 320 }}>
+                Files appear here once a user enables data sharing in their account settings and uploads a PDF.
+              </div>
+            </div>
+          )}
+
+          {data && data.domains.length > 0 && (
+            <>
+              <div style={{ flex: 1, overflowY: 'auto', overflowX: 'auto' }}>
+                <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 12.5 }}>
+                  <thead style={{ position: 'sticky', top: 0, zIndex: 1 }}>
+                    <tr style={{ borderBottom: '1px solid var(--border)', background: 'var(--surface-2)' }}>
+                      {[
+                        { label: 'User',    align: 'left'  },
+                        { label: 'Domain',  align: 'left'  },
+                        { label: 'Status',  align: 'left'  },
+                        { label: 'QA Rows', align: 'right' },
+                        { label: 'Created', align: 'left'  },
+                        { label: '',        align: 'right' },
+                      ].map((h, i) => (
+                        <th key={i} style={{
+                          padding: '9px 16px',
+                          fontSize: 10.5, fontWeight: 700,
+                          color: 'var(--text-subtle)',
+                          textTransform: 'uppercase', letterSpacing: '.07em',
+                          textAlign: h.align as 'left' | 'right',
+                        }}>
+                          {h.label}
+                        </th>
+                      ))}
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {data.domains.map(domain => (
+                      <DomainRow
+                        key={domain.domain_id}
+                        domain={domain}
+                        qaOpen={openQAId === domain.domain_id}
+                        onOpenQA={() =>
+                          setOpenQAId(prev => prev === domain.domain_id ? null : domain.domain_id)
+                        }
+                        onOpenPDF={() => setPdfDomain(domain)}
+                      />
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+
+              {/* Pagination */}
+              {totalPages > 1 && (
+                <div style={{
+                  display: 'flex', justifyContent: 'space-between', alignItems: 'center',
+                  padding: '10px 16px', borderTop: '1px solid var(--border)',
+                  background: 'var(--surface-2)', flexShrink: 0,
+                }}>
+                  <span style={{ fontSize: 12, color: 'var(--text-muted)' }}>
+                    {data.total} domain{data.total !== 1 ? 's' : ''} · page {page} of {totalPages}
+                  </span>
+                  <div style={{ display: 'flex', gap: 6 }}>
+                    <button
+                      onClick={() => setPage(p => Math.max(1, p - 1))}
+                      disabled={page === 1}
+                      style={{
+                        padding: '4px 12px', fontSize: 12, borderRadius: 6,
+                        border: '1px solid var(--border)', background: 'var(--surface)',
+                        color: page === 1 ? 'var(--text-muted)' : 'var(--text)',
+                        cursor: page === 1 ? 'default' : 'pointer',
+                        opacity: page === 1 ? 0.5 : 1,
+                      }}
+                    >
+                      ← Prev
+                    </button>
+                    <button
+                      onClick={() => setPage(p => Math.min(totalPages, p + 1))}
+                      disabled={page === totalPages}
+                      style={{
+                        padding: '4px 12px', fontSize: 12, borderRadius: 6,
+                        border: '1px solid var(--border)', background: 'var(--surface)',
+                        color: page === totalPages ? 'var(--text-muted)' : 'var(--text)',
+                        cursor: page === totalPages ? 'default' : 'pointer',
+                        opacity: page === totalPages ? 0.5 : 1,
+                      }}
+                    >
+                      Next →
+                    </button>
+                  </div>
+                </div>
+              )}
+            </>
+          )}
+        </div>
+
+        {/* QA side panel — slides in from the right */}
+        {qaOpenDomain && (
+          <QAPanel
+            domain={qaOpenDomain}
+            onClose={() => setOpenQAId(null)}
+          />
+        )}
+      </div>
+
+      {/* PDF modal — full-screen overlay */}
+      {pdfDomain && (
+        <PdfModal
+          domain={pdfDomain}
+          onClose={() => setPdfDomain(null)}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/frontend/src/components/admin/analytics/agent-domain.tsx b/frontend/src/components/admin/analytics/agent-domain.tsx
index 8a26bec..1cbe53b 100644
--- a/frontend/src/components/admin/analytics/agent-domain.tsx
+++ b/frontend/src/components/admin/analytics/agent-domain.tsx
@@ -30,7 +30,6 @@ export function AgentDomain() {
   const pdoSeries = getSeries(data, 'domain_pdo');
   const gepaSeries = getSeries(data, 'domain_gepa');
 
-  // Build PDO vs GEPA split data
   const splitDates = (pdoSeries?.data ?? []).map(p => p.date.slice(5));
   const splitData = splitDates.map((date, i) => ({
     date,
diff --git a/frontend/src/components/admin/view-tab.tsx b/frontend/src/components/admin/view-tab.tsx
index f92ff40..d6cbc41 100644
--- a/frontend/src/components/admin/view-tab.tsx
+++ b/frontend/src/components/admin/view-tab.tsx
@@ -8,12 +8,13 @@ import { AgentOptimizer } from './analytics/agent-optimizer';
 import { AgentSkillOpt } from './analytics/agent-skillopt';
 import { AgentDomain } from './analytics/agent-domain';
 import { AgentBridge } from './analytics/agent-bridge';
+import { AgentDomainFiles } from './analytics/agent-domain-files';
 import { DeveloperMetrics } from './analytics/developer-metrics';
 
 type TopToggle = 'platform' | 'agents';
 
 type PlatformView = 'feature_engagement' | 'login_activity' | 'user_metrics' | 'developer_metrics';
-type AgentView = 'prompt_optimizer' | 'skill_builder' | 'domain_pdogepa' | 'bridge';
+type AgentView = 'prompt_optimizer' | 'skill_builder' | 'domain_pdogepa' | 'domain_files' | 'bridge';
 
 const PLATFORM_ITEMS: { id: PlatformView; label: string }[] = [
   { id: 'feature_engagement',  label: 'Feature Engagement' },
@@ -22,10 +23,11 @@ const PLATFORM_ITEMS: { id: PlatformView; label: string }[] = [
   { id: 'developer_metrics',   label: 'Developer Metrics' },
 ];
 
-const AGENT_ITEMS: { id: AgentView; label: string }[] = [
+const AGENT_ITEMS: { id: AgentView; label: string; child?: boolean }[] = [
   { id: 'prompt_optimizer', label: 'Prompt Optimizer' },
   { id: 'skill_builder',    label: 'Skill Builder' },
   { id: 'domain_pdogepa',   label: 'Domain PDO/GEPA' },
+  { id: 'domain_files',     label: 'Domain Files', child: true },
   { id: 'bridge',           label: 'Bridge' },
 ];
 
@@ -52,6 +54,53 @@ function SidebarItem({
   );
 }
 
+function SidebarChildItem({
+  label, active, onClick,
+}: { label: string; active: boolean; onClick: () => void }) {
+  return (
+    <div style={{ display: 'flex', alignItems: 'stretch', paddingLeft: 14 }}>
+      {/* Tree connector: vertical line + horizontal elbow */}
+      <div style={{
+        display: 'flex', flexDirection: 'column', alignItems: 'center',
+        width: 16, flexShrink: 0, marginRight: 4,
+      }}>
+        <div style={{
+          width: 1, flex: 1, maxHeight: 14,
+          background: 'var(--border)',
+        }} />
+        <div style={{
+          width: 10, height: 1, alignSelf: 'flex-start', marginLeft: 0,
+          background: 'var(--border)',
+        }} />
+        <div style={{ flex: 1 }} />
+      </div>
+
+      <button
+        onClick={onClick}
+        style={{
+          flex: 1, display: 'flex', alignItems: 'center', gap: 6,
+          padding: '7px 10px', textAlign: 'left',
+          background: active ? 'color-mix(in oklab, var(--primary) 12%, transparent)' : 'transparent',
+          color: active ? 'var(--primary)' : 'var(--text-muted)',
+          border: 'none', borderRadius: 7,
+          fontSize: 12.5, fontWeight: active ? 600 : 400,
+          cursor: 'pointer', transition: 'all .12s',
+        }}
+      >
+        {/* Arrow chevron */}
+        <svg
+          width="9" height="9" viewBox="0 0 9 9" fill="none"
+          style={{ flexShrink: 0, opacity: active ? 1 : 0.45 }}
+        >
+          <path d="M2 1.5 L6 4.5 L2 7.5" stroke={active ? 'var(--primary)' : 'currentColor'}
+            strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+        </svg>
+        {label}
+      </button>
+    </div>
+  );
+}
+
 export function ViewTab() {
   const [toggle, setToggle] = useState<TopToggle>('platform');
   const [platformView, setPlatformView] = useState<PlatformView>('feature_engagement');
@@ -75,6 +124,8 @@ export function ViewTab() {
       desc: 'SkillOpt runs, score improvements, edit acceptance, and tier breakdown' },
     domain_pdogepa:     { title: 'Domain PDO/GEPA',
       desc: 'Domain prompt optimization and dataset augmentation usage' },
+    domain_files:       { title: 'Domain Files',
+      desc: 'View and download PDF files and Q&A datasets from users who have enabled data sharing' },
     bridge:             { title: 'Bridge',
       desc: 'Prompt bridge usage, token consumption, and unique users' },
   };
@@ -107,17 +158,28 @@ export function ViewTab() {
 
         {/* Sidebar nav items */}
         <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
-          {sidebarItems.map(item => (
-            <SidebarItem
-              key={item.id}
-              label={item.label}
-              active={activeId === item.id}
-              onClick={() => {
-                if (toggle === 'platform') setPlatformView(item.id as PlatformView);
-                else setAgentView(item.id as AgentView);
-              }}
-            />
-          ))}
+          {(sidebarItems as { id: string; label: string; child?: boolean }[]).map(item => {
+            const isActive = activeId === item.id;
+            const handleClick = () => {
+              if (toggle === 'platform') setPlatformView(item.id as PlatformView);
+              else setAgentView(item.id as AgentView);
+            };
+            return item.child ? (
+              <SidebarChildItem
+                key={item.id}
+                label={item.label}
+                active={isActive}
+                onClick={handleClick}
+              />
+            ) : (
+              <SidebarItem
+                key={item.id}
+                label={item.label}
+                active={isActive}
+                onClick={handleClick}
+              />
+            );
+          })}
         </div>
       </div>
 
@@ -142,6 +204,7 @@ export function ViewTab() {
         {toggle === 'agents' && agentView === 'prompt_optimizer' && <AgentOptimizer />}
         {toggle === 'agents' && agentView === 'skill_builder' && <AgentSkillOpt />}
         {toggle === 'agents' && agentView === 'domain_pdogepa' && <AgentDomain />}
+        {toggle === 'agents' && agentView === 'domain_files' && <AgentDomainFiles />}
         {toggle === 'agents' && agentView === 'bridge' && <AgentBridge />}
       </div>
     </div>
diff --git a/frontend/src/types/api.ts b/frontend/src/types/api.ts
index f426eb8..d35e5c8 100644
--- a/frontend/src/types/api.ts
+++ b/frontend/src/types/api.ts
@@ -760,3 +760,37 @@ export interface BulkTokenResult {
   updated: number;
   amount: number;
 }
+
+// ── Admin Domain File Library ─────────────────────────────────────────────────
+
+export interface AdminDomainItem {
+  domain_id: string;
+  domain_name: string;
+  user_id: string;
+  user_email: string;
+  status: string;
+  row_count: number | null;
+  has_pdf: boolean;
+  has_dataset: boolean;
+  created_at: string;
+}
+
+export interface AdminDomainList {
+  page: number;
+  per_page: number;
+  total: number;
+  domains: AdminDomainItem[];
+}
+
+export interface AdminDomainQARow {
+  question: string;
+  answer: string;
+}
+
+export interface AdminDomainQAResponse {
+  domain_id: string;
+  domain_name: string;
+  user_email: string;
+  rows: AdminDomainQARow[];
+  row_count: number;
+}
diff --git a/qa-chatbot/src/promptly/admin/api/router.py b/qa-chatbot/src/promptly/admin/api/router.py
index 4253bc0..dd876c1 100644
--- a/qa-chatbot/src/promptly/admin/api/router.py
+++ b/qa-chatbot/src/promptly/admin/api/router.py
@@ -4,16 +4,21 @@
 from datetime import UTC, datetime
 from typing import Annotated, Any
 
+import anyio
 import httpx
 import structlog
 from fastapi import APIRouter, Depends, HTTPException, Query
-from fastapi.responses import JSONResponse
+from fastapi.responses import JSONResponse, StreamingResponse
 from sqlalchemy import func, select, update
 from sqlalchemy.ext.asyncio import AsyncSession
 
 from promptly.admin.api.schemas import (
     AdminApiKeyItem,
     AdminApiKeyList,
+    AdminDomainItem,
+    AdminDomainList,
+    AdminDomainQAResponse,
+    AdminDomainQARow,
     AdminOpenRouterInfo,
     AdminStats,
     AdminUserItem,
@@ -61,6 +66,9 @@
 from promptly.core.user_context import UserContext
 from promptly.db.redis import get_redis_client
 from promptly.dependencies import get_db, require_admin
+from promptly.domain_prompt.data.models import DomainDataset, DomainPrompt
+from promptly.domain_prompt.infrastructure.storage import download_bytes as minio_download_bytes
+from promptly.domain_prompt.infrastructure.storage import download_text as minio_download_text
 from promptly.models.admin_audit_log import AdminAuditLog
 from promptly.models.api_key import ApiKey
 from promptly.models.message import Message
@@ -742,3 +750,208 @@ async def clear_endpoint_errors(
     return JSONResponse(
         content={"success": True, "data": {"deleted": deleted, "path": path, "window": window}}
     )
+
+
+# ── Domain File Library (data-sharing users only) ─────────────────────────────
+
+
+@router.get(
+    "/domain-prompts",
+    summary="Admin — list shared domain prompts",
+    description=(
+        "Return a paginated list of domain prompts owned by users with data sharing enabled."
+        " Admin-only."
+    ),
+    response_model=SuccessResponse[AdminDomainList],
+    responses=error_responses(401, 403, 500),
+)
+async def list_shared_domain_prompts(
+    db: Annotated[AsyncSession, Depends(get_db)],
+    page: int = Query(default=1, ge=1),
+    per_page: int = Query(default=20, ge=1, le=100),
+    _admin: Annotated[Any, Depends(require_admin)] = None,
+) -> SuccessResponse[AdminDomainList]:
+    total: int = (
+        await db.execute(
+            select(func.count())
+            .select_from(DomainPrompt)
+            .join(User, DomainPrompt.user_id == User.id)
+            .where(User.data_sharing_enabled == True)  # noqa: E712
+        )
+    ).scalar_one()
+
+    rows = (
+        await db.execute(
+            select(
+                DomainPrompt.id.label("domain_id"),
+                DomainPrompt.name.label("domain_name"),
+                DomainPrompt.user_id,
+                DomainPrompt.status,
+                DomainPrompt.created_at,
+                User.email.label("user_email"),
+                DomainDataset.pdf_key,
+                DomainDataset.dataset_key,
+                DomainDataset.row_count,
+            )
+            .join(User, DomainPrompt.user_id == User.id)
+            .outerjoin(DomainDataset, DomainDataset.domain_id == DomainPrompt.id)
+            .where(User.data_sharing_enabled == True)  # noqa: E712
+            .order_by(DomainPrompt.created_at.desc())
+            .offset((page - 1) * per_page)
+            .limit(per_page)
+        )
+    ).all()
+
+    domains = [
+        AdminDomainItem(
+            domain_id=r.domain_id,
+            domain_name=r.domain_name,
+            user_id=r.user_id,
+            user_email=r.user_email,
+            status=r.status,
+            row_count=r.row_count,
+            has_pdf=bool(r.pdf_key),
+            has_dataset=bool(r.dataset_key),
+            created_at=r.created_at,
+        )
+        for r in rows
+    ]
+
+    return SuccessResponse(
+        data=AdminDomainList(page=page, per_page=per_page, total=total, domains=domains)
+    )
+
+
+@router.get(
+    "/domain-prompts/{domain_id}/dataset",
+    summary="Admin — get QA pairs for a shared domain",
+    description=(
+        "Return the Q&A pairs for a domain owned by a user with data sharing enabled."
+        " Admin-only."
+    ),
+    response_model=SuccessResponse[AdminDomainQAResponse],
+    responses=error_responses(401, 403, 404, 500),
+)
+async def get_shared_domain_dataset(
+    domain_id: uuid.UUID,
+    db: Annotated[AsyncSession, Depends(get_db)],
+    _admin: Annotated[Any, Depends(require_admin)] = None,
+) -> SuccessResponse[AdminDomainQAResponse]:
+    import json
+
+    from promptly.config.env import get_minio_settings
+
+    row = (
+        await db.execute(
+            select(
+                DomainPrompt.name.label("domain_name"),
+                User.email.label("user_email"),
+                User.data_sharing_enabled,
+                DomainDataset.dataset_key,
+                DomainDataset.minio_bucket,
+            )
+            .join(User, DomainPrompt.user_id == User.id)
+            .outerjoin(DomainDataset, DomainDataset.domain_id == DomainPrompt.id)
+            .where(DomainPrompt.id == domain_id)
+        )
+    ).one_or_none()
+
+    if row is None:
+        raise NotFoundException(detail="Domain not found")
+    if not row.data_sharing_enabled:
+        raise HTTPException(status_code=403, detail="Data sharing not enabled for this user")
+    if not row.dataset_key:
+        return SuccessResponse(
+            data=AdminDomainQAResponse(
+                domain_id=domain_id,
+                domain_name=row.domain_name,
+                user_email=row.user_email,
+                rows=[],
+                row_count=0,
+            )
+        )
+
+    bucket = row.minio_bucket or get_minio_settings().MINIO_BUCKET_NAME
+    try:
+        raw = await anyio.to_thread.run_sync(lambda: minio_download_text(bucket, row.dataset_key))
+    except Exception as exc:
+        log.warning("admin_domain_dataset_read_error", domain_id=str(domain_id), error=str(exc))
+        raise HTTPException(status_code=500, detail="Failed to read dataset from storage") from exc
+
+    qa_rows: list[AdminDomainQARow] = []
+    for line in raw.strip().splitlines():
+        try:
+            obj = json.loads(line)
+            if isinstance(obj, dict) and "question" in obj and "answer" in obj:
+                qa_rows.append(
+                    AdminDomainQARow(question=str(obj["question"]), answer=str(obj["answer"]))
+                )
+        except Exception:  # noqa: BLE001, S112
+            continue
+
+    return SuccessResponse(
+        data=AdminDomainQAResponse(
+            domain_id=domain_id,
+            domain_name=row.domain_name,
+            user_email=row.user_email,
+            rows=qa_rows,
+            row_count=len(qa_rows),
+        )
+    )
+
+
+@router.get(
+    "/domain-prompts/{domain_id}/pdf",
+    summary="Admin — download PDF for a shared domain",
+    description=(
+        "Stream the source PDF for a domain owned by a user with data sharing enabled."
+        " Admin-only."
+    ),
+    response_model=None,
+    responses=error_responses(401, 403, 404, 500),
+)
+async def download_shared_domain_pdf(
+    domain_id: uuid.UUID,
+    db: Annotated[AsyncSession, Depends(get_db)],
+    _admin: Annotated[Any, Depends(require_admin)] = None,
+) -> StreamingResponse:
+    from promptly.config.env import get_minio_settings
+
+    row = (
+        await db.execute(
+            select(
+                DomainPrompt.name.label("domain_name"),
+                User.data_sharing_enabled,
+                DomainDataset.pdf_key,
+                DomainDataset.minio_bucket,
+            )
+            .join(User, DomainPrompt.user_id == User.id)
+            .outerjoin(DomainDataset, DomainDataset.domain_id == DomainPrompt.id)
+            .where(DomainPrompt.id == domain_id)
+        )
+    ).one_or_none()
+
+    if row is None:
+        raise NotFoundException(detail="Domain not found")
+    if not row.data_sharing_enabled:
+        raise HTTPException(status_code=403, detail="Data sharing not enabled for this user")
+    if not row.pdf_key:
+        raise HTTPException(status_code=404, detail="No PDF on file for this domain")
+
+    bucket = row.minio_bucket or get_minio_settings().MINIO_BUCKET_NAME
+    try:
+        pdf_bytes = await anyio.to_thread.run_sync(
+            lambda: minio_download_bytes(bucket, row.pdf_key)
+        )
+    except Exception as exc:
+        log.warning("admin_domain_pdf_read_error", domain_id=str(domain_id), error=str(exc))
+        raise HTTPException(status_code=500, detail="Failed to read PDF from storage") from exc
+
+    safe_name = "".join(c if c.isalnum() or c in "-_ " else "_" for c in row.domain_name)
+    filename = f"{safe_name}.pdf"
+
+    return StreamingResponse(
+        iter([pdf_bytes]),
+        media_type="application/pdf",
+        headers={"Content-Disposition": f'attachment; filename="{filename}"'},
+    )
diff --git a/qa-chatbot/src/promptly/admin/api/schemas.py b/qa-chatbot/src/promptly/admin/api/schemas.py
index c6d4d38..9ed4f5a 100644
--- a/qa-chatbot/src/promptly/admin/api/schemas.py
+++ b/qa-chatbot/src/promptly/admin/api/schemas.py
@@ -292,6 +292,43 @@ class BulkTokenResult(BaseModel):
     amount: int
 
 
+# ── Feature 8: Domain File Library ───────────────────────────────────────────
+
+
+class AdminDomainItem(BaseModel):
+    domain_id: uuid.UUID
+    domain_name: str
+    user_id: uuid.UUID
+    user_email: str
+    status: str
+    row_count: int | None
+    has_pdf: bool
+    has_dataset: bool
+    created_at: datetime
+
+    model_config = ConfigDict(from_attributes=False)
+
+
+class AdminDomainList(BaseModel):
+    page: int
+    per_page: int
+    total: int
+    domains: list[AdminDomainItem]
+
+
+class AdminDomainQARow(BaseModel):
+    question: str
+    answer: str
+
+
+class AdminDomainQAResponse(BaseModel):
+    domain_id: uuid.UUID
+    domain_name: str
+    user_email: str
+    rows: list[AdminDomainQARow]
+    row_count: int
+
+
 # ── Analytics ─────────────────────────────────────────────────────────────────
 
 

From 338b909871699c205bf7e0d5eeef68bb8b26efa1 Mon Sep 17 00:00:00 2001
From: ananthanarayanan-28 <anantha.narayanan@oraczen.ai>
Date: Sat, 27 Jun 2026 22:06:30 +0530
Subject: [PATCH 2/2] refactor: convert QA panel to absolute overlay and clean
 up PdfModal styling

---
 .../admin/analytics/agent-domain-files.tsx    | 552 ++++++++----------
 1 file changed, 244 insertions(+), 308 deletions(-)

diff --git a/frontend/src/components/admin/analytics/agent-domain-files.tsx b/frontend/src/components/admin/analytics/agent-domain-files.tsx
index d2a4ecc..aaf8cc8 100644
--- a/frontend/src/components/admin/analytics/agent-domain-files.tsx
+++ b/frontend/src/components/admin/analytics/agent-domain-files.tsx
@@ -6,6 +6,7 @@ import { api } from '@/lib/api';
 import type { AdminDomainItem, AdminDomainList, AdminDomainQAResponse } from '@/types/api';
 
 const PER_PAGE = 20;
+const QA_PANEL_WIDTH = 420;
 
 // ── Helpers ───────────────────────────────────────────────────────────────────
 
@@ -34,13 +35,7 @@ function StatusBadge({ status }: { status: string }) {
 
 // ── PDF Modal ─────────────────────────────────────────────────────────────────
 
-function PdfModal({
-  domain,
-  onClose,
-}: {
-  domain: AdminDomainItem;
-  onClose: () => void;
-}) {
+function PdfModal({ domain, onClose }: { domain: AdminDomainItem; onClose: () => void }) {
   const [blobUrl, setBlobUrl] = useState<string | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(false);
@@ -50,7 +45,6 @@ function PdfModal({
     let cancelled = false;
     setLoading(true);
     setError(false);
-
     api.get<Blob>(`/api/v1/admin/domain-prompts/${domain.domain_id}/pdf`, {
       responseType: 'blob',
     }).then(res => {
@@ -62,13 +56,9 @@ function PdfModal({
     }).catch(() => {
       if (!cancelled) { setError(true); setLoading(false); }
     });
-
     return () => {
       cancelled = true;
-      if (urlRef.current) {
-        URL.revokeObjectURL(urlRef.current);
-        urlRef.current = null;
-      }
+      if (urlRef.current) { URL.revokeObjectURL(urlRef.current); urlRef.current = null; }
     };
   }, [domain.domain_id]);
 
@@ -80,16 +70,11 @@ function PdfModal({
     a.click();
   };
 
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === 'Escape') onClose();
-  };
-
   return (
     <div
       role="dialog"
       aria-modal="true"
-      aria-label={`PDF viewer: ${domain.domain_name}`}
-      onKeyDown={handleKeyDown}
+      onKeyDown={e => e.key === 'Escape' && onClose()}
       tabIndex={-1}
       style={{
         position: 'fixed', inset: 0, zIndex: 9000,
@@ -97,109 +82,83 @@ function PdfModal({
         display: 'flex', flexDirection: 'column',
       }}
     >
-      {/* Header bar */}
+      {/* Header */}
       <div style={{
         display: 'flex', alignItems: 'center', justifyContent: 'space-between',
         padding: '12px 20px', background: 'var(--surface)',
         borderBottom: '1px solid var(--border)', flexShrink: 0,
       }}>
-        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
-          <svg width="16" height="16" viewBox="0 0 24 24" fill="none"
+        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+          <svg width="15" height="15" viewBox="0 0 24 24" fill="none"
             stroke="var(--text-muted)" strokeWidth="2" strokeLinecap="round">
             <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
             <polyline points="14 2 14 8 20 8"/>
           </svg>
-          <div style={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
-            <span style={{ fontSize: 14, fontWeight: 700, color: 'var(--text)' }}>
+          <div>
+            <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--text)' }}>
               {domain.domain_name}
-            </span>
-            <span style={{ fontSize: 11.5, color: 'var(--text-muted)' }}>
+            </div>
+            <div style={{ fontSize: 11.5, color: 'var(--text-muted)', marginTop: 1 }}>
               {domain.user_email}
-            </span>
+            </div>
           </div>
         </div>
-        <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
+        <div style={{ display: 'flex', gap: 8 }}>
           {blobUrl && (
-            <button
-              onClick={handleDownload}
-              style={{
-                display: 'flex', alignItems: 'center', gap: 6,
-                padding: '7px 14px', fontSize: 12.5, fontWeight: 600,
-                borderRadius: 8, border: '1px solid var(--border)',
-                background: 'var(--surface-2)', color: 'var(--text)',
-                cursor: 'pointer',
-              }}
-            >
-              <svg width="13" height="13" viewBox="0 0 24 24" fill="none"
+            <button onClick={handleDownload} style={{
+              display: 'flex', alignItems: 'center', gap: 6,
+              padding: '6px 14px', fontSize: 12.5, fontWeight: 600, borderRadius: 7,
+              border: '1px solid var(--border)', background: 'var(--surface-2)',
+              color: 'var(--text)', cursor: 'pointer',
+            }}>
+              <svg width="12" height="12" viewBox="0 0 24 24" fill="none"
                 stroke="currentColor" strokeWidth="2.5" strokeLinecap="round">
                 <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
                 <polyline points="7 10 12 15 17 10"/>
                 <line x1="12" y1="15" x2="12" y2="3"/>
               </svg>
-              Download PDF
+              Download
             </button>
           )}
-          <button
-            onClick={onClose}
-            aria-label="Close PDF viewer"
-            style={{
-              width: 32, height: 32, borderRadius: 8, border: '1px solid var(--border)',
-              background: 'var(--surface-2)', color: 'var(--text-muted)',
-              cursor: 'pointer', fontSize: 18, lineHeight: 1,
-              display: 'flex', alignItems: 'center', justifyContent: 'center',
-            }}
-          >
-            ×
-          </button>
+          <button onClick={onClose} aria-label="Close" style={{
+            width: 32, height: 32, borderRadius: 7, border: '1px solid var(--border)',
+            background: 'var(--surface-2)', color: 'var(--text-muted)',
+            cursor: 'pointer', fontSize: 18, display: 'flex',
+            alignItems: 'center', justifyContent: 'center',
+          }}>×</button>
         </div>
       </div>
-
       {/* Body */}
       <div style={{ flex: 1, minHeight: 0, position: 'relative' }}>
         {loading && (
-          <div style={{
-            position: 'absolute', inset: 0, display: 'flex',
+          <div style={{ position: 'absolute', inset: 0, display: 'flex',
             alignItems: 'center', justifyContent: 'center',
-            color: 'rgba(255,255,255,.6)', fontSize: 14,
-          }}>
+            color: 'rgba(255,255,255,.6)', fontSize: 14 }}>
             Loading PDF…
           </div>
         )}
         {error && (
-          <div style={{
-            position: 'absolute', inset: 0, display: 'flex',
+          <div style={{ position: 'absolute', inset: 0, display: 'flex',
             alignItems: 'center', justifyContent: 'center',
-            flexDirection: 'column', gap: 8,
-          }}>
-            <span style={{ color: '#f43f5e', fontSize: 14, fontWeight: 600 }}>
-              Failed to load PDF
-            </span>
-            <span style={{ color: 'rgba(255,255,255,.5)', fontSize: 12.5 }}>
+            flexDirection: 'column', gap: 6 }}>
+            <span style={{ color: '#f43f5e', fontSize: 14, fontWeight: 600 }}>Failed to load PDF</span>
+            <span style={{ color: 'rgba(255,255,255,.45)', fontSize: 12.5 }}>
               Check that MinIO is reachable and the file exists.
             </span>
           </div>
         )}
         {blobUrl && (
-          <iframe
-            src={blobUrl}
-            title={`PDF: ${domain.domain_name}`}
-            style={{ width: '100%', height: '100%', border: 'none', display: 'block' }}
-          />
+          <iframe src={blobUrl} title={`PDF: ${domain.domain_name}`}
+            style={{ width: '100%', height: '100%', border: 'none', display: 'block' }} />
         )}
       </div>
     </div>
   );
 }
 
-// ── QA Side Panel ─────────────────────────────────────────────────────────────
+// ── QA overlay panel ──────────────────────────────────────────────────────────
 
-function QAPanel({
-  domain,
-  onClose,
-}: {
-  domain: AdminDomainItem;
-  onClose: () => void;
-}) {
+function QAPanel({ domain, onClose }: { domain: AdminDomainItem; onClose: () => void }) {
   const [search, setSearch] = useState('');
 
   const { data, isLoading, isError } = useQuery<AdminDomainQAResponse>({
@@ -220,165 +179,152 @@ function QAPanel({
   ) ?? [];
 
   return (
-    <div style={{
-      width: 460, flexShrink: 0, borderLeft: '1px solid var(--border)',
-      display: 'flex', flexDirection: 'column', height: '100%', overflow: 'hidden',
-      background: 'var(--surface)',
-    }}>
-      {/* Panel header */}
-      <div style={{
-        padding: '14px 18px 12px', borderBottom: '1px solid var(--border)',
-        flexShrink: 0,
-      }}>
-        <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 8 }}>
-          <div style={{ display: 'flex', flexDirection: 'column', gap: 3, minWidth: 0 }}>
-            <span style={{ fontSize: 13.5, fontWeight: 700, color: 'var(--text)',
-              overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
-              {domain.domain_name}
-            </span>
-            <span style={{ fontSize: 11.5, color: 'var(--text-muted)' }}>
-              {domain.user_email}
-            </span>
-          </div>
-          <button
-            onClick={onClose}
-            aria-label="Close Q&A panel"
-            style={{
-              flexShrink: 0, width: 28, height: 28, borderRadius: 6,
+    /* Dim backdrop — clicking it closes the panel */
+    <div
+      onClick={onClose}
+      style={{
+        position: 'absolute', inset: 0, zIndex: 10,
+        background: 'rgba(0,0,0,.08)',
+      }}
+    >
+      {/* Panel — stop click propagation so clicks inside don't close it */}
+      <div
+        onClick={e => e.stopPropagation()}
+        style={{
+          position: 'absolute', top: 0, right: 0, bottom: 0,
+          width: QA_PANEL_WIDTH,
+          background: 'var(--surface)',
+          borderLeft: '1px solid var(--border)',
+          boxShadow: '-6px 0 24px rgba(0,0,0,.10)',
+          display: 'flex', flexDirection: 'column',
+          borderRadius: '0 12px 12px 0',
+          overflow: 'hidden',
+        }}
+      >
+        {/* Panel header */}
+        <div style={{
+          padding: '14px 16px 12px',
+          borderBottom: '1px solid var(--border)',
+          flexShrink: 0,
+          background: 'var(--surface)',
+        }}>
+          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
+            <div style={{ minWidth: 0 }}>
+              <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--text)',
+                whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
+                {domain.domain_name}
+              </div>
+              <div style={{ fontSize: 11.5, color: 'var(--text-muted)', marginTop: 2 }}>
+                {domain.user_email}
+              </div>
+            </div>
+            <button onClick={onClose} aria-label="Close" style={{
+              flexShrink: 0, marginLeft: 8, width: 28, height: 28, borderRadius: 6,
               border: '1px solid var(--border)', background: 'var(--surface-2)',
               color: 'var(--text-muted)', cursor: 'pointer', fontSize: 16,
               display: 'flex', alignItems: 'center', justifyContent: 'center',
-            }}
-          >
-            ×
-          </button>
-        </div>
+            }}>×</button>
+          </div>
 
-        {data && (
-          <div style={{ marginTop: 10 }}>
-            <span style={{
-              fontSize: 10.5, fontWeight: 700, color: 'var(--text-subtle)',
-              textTransform: 'uppercase', letterSpacing: '.07em',
-            }}>
+          {data && (
+            <div style={{ marginTop: 8, fontSize: 11, fontWeight: 700,
+              color: 'var(--text-subtle)', textTransform: 'uppercase', letterSpacing: '.06em' }}>
               {data.row_count} Q&A pair{data.row_count !== 1 ? 's' : ''}
-            </span>
-          </div>
-        )}
+            </div>
+          )}
 
-        {/* Search */}
-        {data && data.row_count > 5 && (
-          <div style={{ marginTop: 10, position: 'relative' }}>
-            <svg
-              width="13" height="13" viewBox="0 0 24 24" fill="none"
-              stroke="var(--text-muted)" strokeWidth="2" strokeLinecap="round"
-              style={{ position: 'absolute', left: 10, top: '50%', transform: 'translateY(-50%)' }}
-            >
-              <circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/>
-            </svg>
-            <input
-              type="text"
-              placeholder="Search questions and answers…"
-              value={search}
-              onChange={e => setSearch(e.target.value)}
-              style={{
-                width: '100%', padding: '7px 10px 7px 30px', fontSize: 12.5,
-                border: '1px solid var(--border)', borderRadius: 7,
-                background: 'var(--surface-2)', color: 'var(--text)',
-                outline: 'none', boxSizing: 'border-box',
-              }}
-            />
-          </div>
-        )}
-      </div>
+          {data && data.row_count > 5 && (
+            <div style={{ marginTop: 8, position: 'relative' }}>
+              <svg width="12" height="12" viewBox="0 0 24 24" fill="none"
+                stroke="var(--text-muted)" strokeWidth="2" strokeLinecap="round"
+                style={{ position: 'absolute', left: 9, top: '50%', transform: 'translateY(-50%)' }}>
+                <circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/>
+              </svg>
+              <input
+                type="text"
+                placeholder="Search…"
+                value={search}
+                onChange={e => setSearch(e.target.value)}
+                style={{
+                  width: '100%', padding: '6px 10px 6px 28px', fontSize: 12.5,
+                  border: '1px solid var(--border)', borderRadius: 6,
+                  background: 'var(--surface-2)', color: 'var(--text)',
+                  outline: 'none', boxSizing: 'border-box',
+                }}
+              />
+            </div>
+          )}
+        </div>
 
-      {/* Pairs list */}
-      <div style={{ flex: 1, overflowY: 'auto', padding: '12px 16px', display: 'flex', flexDirection: 'column', gap: 10 }}>
-        {isLoading && (
-          <div style={{ color: 'var(--text-muted)', fontSize: 13, paddingTop: 20, textAlign: 'center' }}>
-            Loading…
-          </div>
-        )}
-        {isError && (
-          <div style={{ color: 'var(--danger)', fontSize: 13, paddingTop: 20, textAlign: 'center' }}>
-            Failed to load Q&A pairs.
-          </div>
-        )}
-        {data && data.rows.length === 0 && (
-          <div style={{ color: 'var(--text-muted)', fontSize: 13, paddingTop: 20, textAlign: 'center' }}>
-            No Q&A pairs for this domain yet.
-          </div>
-        )}
-        {search && filtered.length === 0 && data && data.rows.length > 0 && (
-          <div style={{ color: 'var(--text-muted)', fontSize: 13, paddingTop: 12, textAlign: 'center' }}>
-            No results for &ldquo;{search}&rdquo;
-          </div>
-        )}
-        {filtered.map((row, i) => {
-          const globalIndex = data!.rows.indexOf(row);
-          return (
+        {/* Pairs list — block layout so cards grow to their natural height */}
+        <div style={{ flex: 1, overflowY: 'auto', minHeight: 0, padding: '10px 12px' }}>
+          {isLoading && (
+            <div style={{ color: 'var(--text-muted)', fontSize: 13, textAlign: 'center', paddingTop: 24 }}>
+              Loading…
+            </div>
+          )}
+          {isError && (
+            <div style={{ color: 'var(--danger)', fontSize: 13, textAlign: 'center', paddingTop: 24 }}>
+              Failed to load Q&A pairs.
+            </div>
+          )}
+          {data && data.rows.length === 0 && (
+            <div style={{ color: 'var(--text-muted)', fontSize: 13, textAlign: 'center', paddingTop: 24 }}>
+              No Q&A pairs yet.
+            </div>
+          )}
+          {search && filtered.length === 0 && data && data.rows.length > 0 && (
+            <div style={{ color: 'var(--text-muted)', fontSize: 12.5, textAlign: 'center', paddingTop: 16 }}>
+              No results for &ldquo;{search}&rdquo;
+            </div>
+          )}
+          {filtered.map((row, i) => (
             <div key={i} style={{
-              border: '1px solid var(--border)', borderRadius: 10,
-              overflow: 'hidden', background: 'var(--surface)',
+              marginBottom: 8, border: '1px solid var(--border)',
+              borderRadius: 9, overflow: 'hidden',
             }}>
               {/* Question */}
               <div style={{
-                padding: '10px 14px', display: 'flex', gap: 10, alignItems: 'flex-start',
+                padding: '10px 12px',
                 borderBottom: '1px solid var(--border)',
-                background: 'color-mix(in oklab, #06b6d4 5%, transparent)',
+                background: 'rgba(6,182,212,0.06)',
               }}>
                 <div style={{
-                  flexShrink: 0, width: 22, height: 22, borderRadius: 6,
-                  background: 'color-mix(in oklab, #06b6d4 18%, transparent)',
-                  display: 'flex', alignItems: 'center', justifyContent: 'center',
+                  fontSize: 10, fontWeight: 700, color: '#06b6d4',
+                  textTransform: 'uppercase', letterSpacing: '.05em', marginBottom: 4,
                 }}>
-                  <span style={{ fontSize: 10, fontWeight: 800, color: '#06b6d4', letterSpacing: 0 }}>Q</span>
+                  Q {i + 1}
                 </div>
-                <div style={{ display: 'flex', flexDirection: 'column', gap: 2, flex: 1, minWidth: 0 }}>
-                  <span style={{ fontSize: 10, fontWeight: 600, color: '#06b6d4',
-                    textTransform: 'uppercase', letterSpacing: '.05em' }}>
-                    Question {globalIndex + 1}
-                  </span>
-                  <span style={{ fontSize: 13, color: 'var(--text)', lineHeight: 1.55 }}>
-                    {row.question}
-                  </span>
+                <div style={{ fontSize: 13, color: 'var(--text)', lineHeight: 1.6 }}>
+                  {row.question}
                 </div>
               </div>
               {/* Answer */}
-              <div style={{
-                padding: '10px 14px', display: 'flex', gap: 10, alignItems: 'flex-start',
-              }}>
+              <div style={{ padding: '10px 12px', background: 'var(--surface)' }}>
                 <div style={{
-                  flexShrink: 0, width: 22, height: 22, borderRadius: 6,
-                  background: 'color-mix(in oklab, #8b5cf6 14%, transparent)',
-                  display: 'flex', alignItems: 'center', justifyContent: 'center',
+                  fontSize: 10, fontWeight: 700, color: '#8b5cf6',
+                  textTransform: 'uppercase', letterSpacing: '.05em', marginBottom: 4,
                 }}>
-                  <span style={{ fontSize: 10, fontWeight: 800, color: '#8b5cf6', letterSpacing: 0 }}>A</span>
+                  A
                 </div>
-                <div style={{ display: 'flex', flexDirection: 'column', gap: 2, flex: 1, minWidth: 0 }}>
-                  <span style={{ fontSize: 10, fontWeight: 600, color: '#8b5cf6',
-                    textTransform: 'uppercase', letterSpacing: '.05em' }}>
-                    Answer
-                  </span>
-                  <span style={{ fontSize: 13, color: 'var(--text-muted)', lineHeight: 1.55 }}>
-                    {row.answer}
-                  </span>
+                <div style={{ fontSize: 13, color: 'var(--text-muted)', lineHeight: 1.6 }}>
+                  {row.answer}
                 </div>
               </div>
             </div>
-          );
-        })}
+          ))}
+          {/* bottom breathing room */}
+          {filtered.length > 0 && <div style={{ height: 8 }} />}
+        </div>
       </div>
     </div>
   );
 }
 
-// ── Domain table row ──────────────────────────────────────────────────────────
+// ── Table row ─────────────────────────────────────────────────────────────────
 
 function DomainRow({
-  domain,
-  qaOpen,
-  onOpenQA,
-  onOpenPDF,
+  domain, qaOpen, onOpenQA, onOpenPDF,
 }: {
   domain: AdminDomainItem;
   qaOpen: boolean;
@@ -388,57 +334,67 @@ function DomainRow({
   return (
     <tr style={{
       borderBottom: '1px solid var(--border)',
-      background: qaOpen ? 'color-mix(in oklab, var(--primary) 4%, transparent)' : undefined,
-      transition: 'background .12s',
+      background: qaOpen
+        ? 'color-mix(in oklab, var(--primary) 5%, transparent)'
+        : undefined,
     }}>
-      <td style={{ padding: '11px 16px', fontSize: 12.5, color: 'var(--text-muted)' }}>
+      <td style={{ padding: '12px 16px', fontSize: 12.5, color: 'var(--text-muted)',
+        maxWidth: 180, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
         {domain.user_email}
       </td>
-      <td style={{ padding: '11px 16px', fontSize: 13, color: 'var(--text)', fontWeight: 600 }}>
+      <td style={{ padding: '12px 16px', fontSize: 13, color: 'var(--text)',
+        fontWeight: 600, whiteSpace: 'nowrap' }}>
         {domain.domain_name}
       </td>
-      <td style={{ padding: '11px 16px' }}>
+      <td style={{ padding: '12px 16px', whiteSpace: 'nowrap' }}>
         <StatusBadge status={domain.status} />
       </td>
-      <td style={{ padding: '11px 16px', fontSize: 12.5, fontFamily: 'var(--mono)',
-        color: 'var(--text-muted)', textAlign: 'right' }}>
+      <td style={{ padding: '12px 16px', fontSize: 12.5, fontFamily: 'var(--mono)',
+        color: 'var(--text-muted)', textAlign: 'right', whiteSpace: 'nowrap' }}>
         {domain.row_count != null ? domain.row_count.toLocaleString() : '—'}
       </td>
-      <td style={{ padding: '11px 16px', fontSize: 12, color: 'var(--text-muted)' }}>
+      <td style={{ padding: '12px 16px', fontSize: 12, color: 'var(--text-muted)',
+        whiteSpace: 'nowrap' }}>
         {fmtDate(domain.created_at)}
       </td>
-      <td style={{ padding: '11px 16px' }}>
-        <div style={{ display: 'flex', gap: 6, justifyContent: 'flex-end' }}>
+      <td style={{ padding: '12px 16px', whiteSpace: 'nowrap' }}>
+        <div style={{ display: 'flex', gap: 6, justifyContent: 'flex-end', alignItems: 'center' }}>
           {domain.has_dataset && (
-            <button
-              onClick={onOpenQA}
-              style={{
-                padding: '5px 12px', fontSize: 12, fontWeight: 600, borderRadius: 7,
-                border: `1px solid ${qaOpen ? '#06b6d4' : 'var(--border)'}`,
-                background: qaOpen
-                  ? 'color-mix(in oklab, #06b6d4 12%, transparent)'
-                  : 'var(--surface-2)',
-                color: qaOpen ? '#06b6d4' : 'var(--text-muted)',
-                cursor: 'pointer', transition: 'all .12s',
-              }}
-            >
-              {qaOpen ? 'Hide QA' : 'View QA'}
+            <button onClick={onOpenQA} style={{
+              display: 'flex', alignItems: 'center', gap: 5,
+              padding: '5px 11px', fontSize: 12, fontWeight: 600, borderRadius: 6,
+              border: `1px solid ${qaOpen ? '#06b6d4' : 'var(--border)'}`,
+              background: qaOpen
+                ? 'color-mix(in oklab, #06b6d4 10%, transparent)'
+                : 'var(--surface-2)',
+              color: qaOpen ? '#06b6d4' : 'var(--text-muted)',
+              cursor: 'pointer', transition: 'all .12s',
+            }}>
+              <svg width="11" height="11" viewBox="0 0 24 24" fill="none"
+                stroke="currentColor" strokeWidth="2.5" strokeLinecap="round">
+                <circle cx="12" cy="12" r="10"/>
+                <path d="M12 16v-4M12 8h.01"/>
+              </svg>
+              QA Pairs
             </button>
           )}
           {domain.has_pdf && (
-            <button
-              onClick={onOpenPDF}
-              style={{
-                padding: '5px 12px', fontSize: 12, fontWeight: 600, borderRadius: 7,
-                border: '1px solid var(--border)', background: 'var(--surface-2)',
-                color: 'var(--text-muted)', cursor: 'pointer',
-              }}
-            >
+            <button onClick={onOpenPDF} style={{
+              display: 'flex', alignItems: 'center', gap: 5,
+              padding: '5px 11px', fontSize: 12, fontWeight: 600, borderRadius: 6,
+              border: '1px solid var(--border)', background: 'var(--surface-2)',
+              color: 'var(--text-muted)', cursor: 'pointer', transition: 'all .12s',
+            }}>
+              <svg width="11" height="11" viewBox="0 0 24 24" fill="none"
+                stroke="currentColor" strokeWidth="2.5" strokeLinecap="round">
+                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
+                <polyline points="14 2 14 8 20 8"/>
+              </svg>
               View PDF
             </button>
           )}
           {!domain.has_pdf && !domain.has_dataset && (
-            <span style={{ fontSize: 12, color: 'var(--text-muted)', fontStyle: 'italic', padding: '5px 0' }}>
+            <span style={{ fontSize: 12, color: 'var(--text-muted)', fontStyle: 'italic' }}>
               No files
             </span>
           )}
@@ -470,44 +426,38 @@ export function AgentDomainFiles() {
   const qaOpenDomain = data?.domains.find(d => d.domain_id === openQAId) ?? null;
 
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: 0, height: '100%' }}>
-      {/* Summary strip */}
-      {data && (
-        <div style={{
-          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
-          marginBottom: 16,
-        }}>
-          <span style={{ fontSize: 13, color: 'var(--text-muted)' }}>
-            {data.total} domain project{data.total !== 1 ? 's' : ''} from users with data sharing enabled
-          </span>
+    <div style={{ display: 'flex', flexDirection: 'column', height: '100%', gap: 14 }}>
+      {/* Count strip */}
+      {data && data.total > 0 && (
+        <div style={{ fontSize: 13, color: 'var(--text-muted)', flexShrink: 0 }}>
+          {data.total} domain project{data.total !== 1 ? 's' : ''} · users with data sharing enabled
         </div>
       )}
 
-      {/* Main content: table + optional QA panel side-by-side */}
-      <div style={{ display: 'flex', flex: 1, minHeight: 0, gap: 0, overflow: 'hidden' }}>
-        {/* Table container */}
+      {/* Table card — always full width; QA panel overlays on top */}
+      <div style={{ flex: 1, minHeight: 0, position: 'relative' }}>
         <div style={{
-          flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column',
-          border: '1px solid var(--border)', borderRadius: qaOpenDomain ? '12px 0 0 12px' : 12,
+          height: '100%', display: 'flex', flexDirection: 'column',
+          border: '1px solid var(--border)', borderRadius: 12,
           overflow: 'hidden', background: 'var(--surface)',
         }}>
           {isLoading && (
-            <div style={{ padding: '40px 0', textAlign: 'center', color: 'var(--text-muted)', fontSize: 13 }}>
+            <div style={{ flex: 1, display: 'flex', alignItems: 'center',
+              justifyContent: 'center', color: 'var(--text-muted)', fontSize: 13 }}>
               Loading…
             </div>
           )}
           {isError && (
-            <div style={{ padding: '32px 0', textAlign: 'center', color: 'var(--danger)', fontSize: 13 }}>
+            <div style={{ flex: 1, display: 'flex', alignItems: 'center',
+              justifyContent: 'center', color: 'var(--danger)', fontSize: 13 }}>
               Failed to load domain files.
             </div>
           )}
 
           {data && data.domains.length === 0 && (
-            <div style={{
-              padding: '56px 24px', textAlign: 'center',
-              display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10,
-            }}>
-              <svg width="40" height="40" viewBox="0 0 24 24" fill="none"
+            <div style={{ flex: 1, display: 'flex', flexDirection: 'column',
+              alignItems: 'center', justifyContent: 'center', gap: 10, padding: 32 }}>
+              <svg width="36" height="36" viewBox="0 0 24 24" fill="none"
                 stroke="var(--border)" strokeWidth="1.5" strokeLinecap="round">
                 <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
                 <polyline points="14 2 14 8 20 8"/>
@@ -515,8 +465,9 @@ export function AgentDomainFiles() {
               <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--text-muted)' }}>
                 No shared domain files yet
               </div>
-              <div style={{ fontSize: 12.5, color: 'var(--text-muted)', lineHeight: 1.6, maxWidth: 320 }}>
-                Files appear here once a user enables data sharing in their account settings and uploads a PDF.
+              <div style={{ fontSize: 12.5, color: 'var(--text-muted)', lineHeight: 1.6,
+                maxWidth: 300, textAlign: 'center' }}>
+                Files appear here once a user enables data sharing and uploads a PDF.
               </div>
             </div>
           )}
@@ -524,23 +475,22 @@ export function AgentDomainFiles() {
           {data && data.domains.length > 0 && (
             <>
               <div style={{ flex: 1, overflowY: 'auto', overflowX: 'auto' }}>
-                <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 12.5 }}>
+                <table style={{ width: '100%', borderCollapse: 'collapse' }}>
                   <thead style={{ position: 'sticky', top: 0, zIndex: 1 }}>
-                    <tr style={{ borderBottom: '1px solid var(--border)', background: 'var(--surface-2)' }}>
+                    <tr style={{ background: 'var(--surface-2)',
+                      borderBottom: '1px solid var(--border)' }}>
                       {[
-                        { label: 'User',    align: 'left'  },
-                        { label: 'Domain',  align: 'left'  },
-                        { label: 'Status',  align: 'left'  },
-                        { label: 'QA Rows', align: 'right' },
-                        { label: 'Created', align: 'left'  },
-                        { label: '',        align: 'right' },
+                        { label: 'User',    align: 'left' as const  },
+                        { label: 'Domain',  align: 'left' as const  },
+                        { label: 'Status',  align: 'left' as const  },
+                        { label: 'QA Rows', align: 'right' as const },
+                        { label: 'Created', align: 'left' as const  },
+                        { label: '',        align: 'right' as const },
                       ].map((h, i) => (
                         <th key={i} style={{
-                          padding: '9px 16px',
-                          fontSize: 10.5, fontWeight: 700,
-                          color: 'var(--text-subtle)',
-                          textTransform: 'uppercase', letterSpacing: '.07em',
-                          textAlign: h.align as 'left' | 'right',
+                          padding: '9px 16px', fontSize: 10.5, fontWeight: 700,
+                          color: 'var(--text-subtle)', textTransform: 'uppercase',
+                          letterSpacing: '.07em', textAlign: h.align,
                         }}>
                           {h.label}
                         </th>
@@ -554,7 +504,9 @@ export function AgentDomainFiles() {
                         domain={domain}
                         qaOpen={openQAId === domain.domain_id}
                         onOpenQA={() =>
-                          setOpenQAId(prev => prev === domain.domain_id ? null : domain.domain_id)
+                          setOpenQAId(prev =>
+                            prev === domain.domain_id ? null : domain.domain_id
+                          )
                         }
                         onOpenPDF={() => setPdfDomain(domain)}
                       />
@@ -563,43 +515,30 @@ export function AgentDomainFiles() {
                 </table>
               </div>
 
-              {/* Pagination */}
               {totalPages > 1 && (
                 <div style={{
                   display: 'flex', justifyContent: 'space-between', alignItems: 'center',
-                  padding: '10px 16px', borderTop: '1px solid var(--border)',
+                  padding: '9px 16px', borderTop: '1px solid var(--border)',
                   background: 'var(--surface-2)', flexShrink: 0,
                 }}>
                   <span style={{ fontSize: 12, color: 'var(--text-muted)' }}>
-                    {data.total} domain{data.total !== 1 ? 's' : ''} · page {page} of {totalPages}
+                    Page {page} of {totalPages} · {data.total} total
                   </span>
                   <div style={{ display: 'flex', gap: 6 }}>
-                    <button
-                      onClick={() => setPage(p => Math.max(1, p - 1))}
-                      disabled={page === 1}
-                      style={{
+                    {[
+                      { label: '← Prev', disabled: page === 1, action: () => setPage(p => p - 1) },
+                      { label: 'Next →', disabled: page === totalPages, action: () => setPage(p => p + 1) },
+                    ].map(btn => (
+                      <button key={btn.label} onClick={btn.action} disabled={btn.disabled} style={{
                         padding: '4px 12px', fontSize: 12, borderRadius: 6,
                         border: '1px solid var(--border)', background: 'var(--surface)',
-                        color: page === 1 ? 'var(--text-muted)' : 'var(--text)',
-                        cursor: page === 1 ? 'default' : 'pointer',
-                        opacity: page === 1 ? 0.5 : 1,
-                      }}
-                    >
-                      ← Prev
-                    </button>
-                    <button
-                      onClick={() => setPage(p => Math.min(totalPages, p + 1))}
-                      disabled={page === totalPages}
-                      style={{
-                        padding: '4px 12px', fontSize: 12, borderRadius: 6,
-                        border: '1px solid var(--border)', background: 'var(--surface)',
-                        color: page === totalPages ? 'var(--text-muted)' : 'var(--text)',
-                        cursor: page === totalPages ? 'default' : 'pointer',
-                        opacity: page === totalPages ? 0.5 : 1,
-                      }}
-                    >
-                      Next →
-                    </button>
+                        color: btn.disabled ? 'var(--text-muted)' : 'var(--text)',
+                        cursor: btn.disabled ? 'default' : 'pointer',
+                        opacity: btn.disabled ? 0.45 : 1,
+                      }}>
+                        {btn.label}
+                      </button>
+                    ))}
                   </div>
                 </div>
               )}
@@ -607,7 +546,7 @@ export function AgentDomainFiles() {
           )}
         </div>
 
-        {/* QA side panel — slides in from the right */}
+        {/* QA panel — absolute overlay, does NOT squish the table */}
         {qaOpenDomain && (
           <QAPanel
             domain={qaOpenDomain}
@@ -616,12 +555,9 @@ export function AgentDomainFiles() {
         )}
       </div>
 
-      {/* PDF modal — full-screen overlay */}
+      {/* PDF modal — full-screen */}
       {pdfDomain && (
-        <PdfModal
-          domain={pdfDomain}
-          onClose={() => setPdfDomain(null)}
-        />
+        <PdfModal domain={pdfDomain} onClose={() => setPdfDomain(null)} />
       )}
     </div>
   );