feat: Corpus Intelligence page + timeline background events
Adds /corpus.php — a data transparency page showing what powers the legal tools: 9 coverage categories with live doc counts, a full sources table pulled from the corpus DB, the AI stack (LLMs, Whisper, Qdrant, Azure AI Search, embeddings, chunking), and a pipeline flow diagram. Stats are live via a new /api/corpus-stats.php endpoint (queries dobetter_rag + bnl_admin). The reasoning sidebar is repurposed as a Corpus health panel on this page. Also ships the in-progress timeline background events toggle: API and UI wired together via include_background param. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -2013,6 +2013,414 @@ p {
|
||||
font-size: 0.92rem;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
CORPUS PAGE
|
||||
============================================================ */
|
||||
|
||||
/* Stats bar */
|
||||
.corpus-stats-bar {
|
||||
display: flex;
|
||||
gap: 0;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 36px;
|
||||
background: var(--panel);
|
||||
}
|
||||
|
||||
.corpus-stat {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 20px 16px;
|
||||
border-right: 1px solid var(--line);
|
||||
text-align: center;
|
||||
}
|
||||
.corpus-stat:last-child { border-right: 0; }
|
||||
|
||||
.corpus-stat__value {
|
||||
display: block;
|
||||
font-size: 2rem;
|
||||
font-weight: 800;
|
||||
color: var(--teal);
|
||||
line-height: 1;
|
||||
font-variant-numeric: tabular-nums;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.corpus-stat__value.is-loading {
|
||||
color: var(--line);
|
||||
background: linear-gradient(90deg, var(--line) 25%, #e8ecf2 50%, var(--line) 75%);
|
||||
background-size: 200% 100%;
|
||||
animation: shimmer 1.4s infinite;
|
||||
border-radius: 4px;
|
||||
min-width: 60px;
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% { background-position: 200% 0; }
|
||||
100% { background-position: -200% 0; }
|
||||
}
|
||||
|
||||
.corpus-stat__label {
|
||||
display: block;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
color: var(--muted);
|
||||
margin-top: 6px;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
/* Section headings */
|
||||
.corpus-section {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.corpus-section__title {
|
||||
font-size: 1.05rem;
|
||||
font-weight: 700;
|
||||
color: var(--ink);
|
||||
margin: 4px 0 18px;
|
||||
}
|
||||
|
||||
/* Category cards */
|
||||
.corpus-categories {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.category-card {
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 8px;
|
||||
padding: 18px;
|
||||
transition: border-color 0.15s, box-shadow 0.15s;
|
||||
}
|
||||
|
||||
.category-card:hover {
|
||||
border-color: var(--teal);
|
||||
box-shadow: 0 4px 16px rgba(15, 118, 110, 0.1);
|
||||
}
|
||||
|
||||
.category-card__top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.category-card__icon {
|
||||
font-size: 1.5rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.category-card__count {
|
||||
font-size: 0.72rem;
|
||||
font-weight: 800;
|
||||
background: var(--soft-teal);
|
||||
color: var(--teal-dark);
|
||||
border-radius: 999px;
|
||||
padding: 2px 10px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
min-width: 28px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.category-card__count.is-loading {
|
||||
color: transparent;
|
||||
background: linear-gradient(90deg, var(--line) 25%, #e8ecf2 50%, var(--line) 75%);
|
||||
background-size: 200% 100%;
|
||||
animation: shimmer 1.4s infinite;
|
||||
}
|
||||
|
||||
.category-card h4 {
|
||||
font-size: 0.88rem;
|
||||
font-weight: 700;
|
||||
color: var(--ink);
|
||||
margin: 0 0 6px;
|
||||
}
|
||||
|
||||
.category-card p {
|
||||
font-size: 0.80rem;
|
||||
color: var(--muted);
|
||||
line-height: 1.5;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Sources table */
|
||||
.corpus-table-wrap {
|
||||
overflow-x: auto;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.sources-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 0.84rem;
|
||||
background: var(--panel);
|
||||
}
|
||||
|
||||
.sources-table th {
|
||||
background: var(--bg);
|
||||
font-size: 0.70rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: var(--muted);
|
||||
padding: 10px 14px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid var(--line);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.sources-table td {
|
||||
padding: 10px 14px;
|
||||
border-bottom: 1px solid var(--line);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.sources-table tbody tr:last-child td { border-bottom: 0; }
|
||||
|
||||
.sources-table tbody tr:hover td {
|
||||
background: var(--soft-teal);
|
||||
}
|
||||
|
||||
.sources-table a {
|
||||
color: var(--teal);
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.sources-table a:hover { text-decoration: underline; }
|
||||
|
||||
.source-name { max-width: 260px; }
|
||||
|
||||
.source-badge {
|
||||
display: inline-block;
|
||||
font-size: 0.68rem;
|
||||
font-weight: 800;
|
||||
padding: 2px 8px;
|
||||
border-radius: 999px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.03em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.badge--teal { background: var(--soft-teal); color: var(--teal-dark); }
|
||||
.badge--amber { background: #fef3cd; color: var(--amber); }
|
||||
.badge--coral { background: var(--soft-coral); color: var(--coral); }
|
||||
.badge--muted { background: #eef0f5; color: var(--muted); }
|
||||
|
||||
.source-cat {
|
||||
font-size: 0.75rem;
|
||||
color: var(--muted);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.status-active { color: #15803d; font-size: 0.78rem; font-weight: 700; white-space: nowrap; }
|
||||
.status-inactive { color: var(--muted); font-size: 0.78rem; white-space: nowrap; }
|
||||
|
||||
.sources-skeleton td {
|
||||
color: var(--muted);
|
||||
font-style: italic;
|
||||
padding: 16px 14px;
|
||||
}
|
||||
|
||||
/* AI Stack */
|
||||
.stack-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.stack-card {
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--line);
|
||||
border-left: 3px solid var(--teal);
|
||||
border-radius: 0 8px 8px 0;
|
||||
padding: 18px 20px;
|
||||
}
|
||||
|
||||
.stack-card h3 {
|
||||
font-size: 0.70rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--muted);
|
||||
margin: 0 0 12px;
|
||||
}
|
||||
|
||||
.stack-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0 0 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 7px;
|
||||
font-size: 0.84rem;
|
||||
color: var(--ink);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.stack-badge {
|
||||
display: inline-block;
|
||||
font-size: 0.62rem;
|
||||
font-weight: 800;
|
||||
padding: 1px 6px;
|
||||
border-radius: 4px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
vertical-align: middle;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.stack-badge--azure { background: #dbeafe; color: #1d4ed8; }
|
||||
.stack-badge--gpu { background: #f3e8ff; color: #7c3aed; }
|
||||
.stack-badge--api { background: #fef3cd; color: var(--amber); }
|
||||
|
||||
.stack-star {
|
||||
font-size: 0.70rem;
|
||||
font-weight: 700;
|
||||
color: var(--amber);
|
||||
}
|
||||
|
||||
.stack-note {
|
||||
font-size: 0.75rem;
|
||||
color: var(--muted);
|
||||
margin: 8px 0 0;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.stack-note code {
|
||||
background: var(--bg);
|
||||
padding: 1px 5px;
|
||||
border-radius: 3px;
|
||||
font-size: 0.72rem;
|
||||
}
|
||||
|
||||
/* Pipeline flow */
|
||||
.pipeline-flow {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
flex-wrap: wrap;
|
||||
gap: 0;
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.pipeline-step {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 18px 14px;
|
||||
text-align: center;
|
||||
min-width: 90px;
|
||||
flex: 1;
|
||||
background: var(--panel);
|
||||
}
|
||||
|
||||
.pipeline-step--end {
|
||||
background: var(--soft-teal);
|
||||
}
|
||||
|
||||
.pipeline-step__icon {
|
||||
font-size: 1.4rem;
|
||||
margin-bottom: 6px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.pipeline-step span:not(.pipeline-step__icon) {
|
||||
font-size: 0.78rem;
|
||||
font-weight: 700;
|
||||
color: var(--ink);
|
||||
display: block;
|
||||
}
|
||||
|
||||
.pipeline-step small {
|
||||
font-size: 0.67rem;
|
||||
color: var(--muted);
|
||||
display: block;
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.pipeline-arrow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 2px;
|
||||
color: var(--muted);
|
||||
font-size: 1.1rem;
|
||||
background: var(--bg);
|
||||
border-left: 1px solid var(--line);
|
||||
border-right: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.pipeline-arrow::after {
|
||||
content: '›';
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* Corpus health sidebar */
|
||||
.corpus-health-dl {
|
||||
margin: 0;
|
||||
padding: 16px;
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: 6px 12px;
|
||||
font-size: 0.80rem;
|
||||
}
|
||||
|
||||
.corpus-health-dl dt {
|
||||
font-weight: 700;
|
||||
color: var(--muted);
|
||||
font-size: 0.70rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
padding-top: 2px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.corpus-health-dl dd {
|
||||
color: var(--ink);
|
||||
margin: 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.corpus-health-dl code {
|
||||
background: var(--bg);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 3px;
|
||||
font-size: 0.70rem;
|
||||
padding: 1px 5px;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 760px) {
|
||||
.corpus-stats-bar {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.corpus-stat {
|
||||
flex: 1 1 50%;
|
||||
border-right: 0;
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
.corpus-categories {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.pipeline-flow {
|
||||
flex-direction: column;
|
||||
}
|
||||
.pipeline-arrow {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Method trace — overrides for #traceList rendered in rich mode */
|
||||
.trace-list.is-rich {
|
||||
display: grid;
|
||||
|
||||
Reference in New Issue
Block a user