a73a986bbe
Krok 4 of the phase-4 plan done ahead of the local-embed-fallback step (Krok 2, deliberately deferred -- embed stays a plain SOLARIA call, per task instruction): one FastAPI process now serves both the /search API and the UI, no separate frontend build (plan §2 decision 4). - GET / renders a Jinja2 shell; app/static/app.js (vanilla, no build) and style.css are the whole client. Query -> /search, results grouped by envelope_id client-side (chunks sorted by dist, <details> fragments). - Colour thresholds per plan §7: dist<0.45 green, 0.45-0.55 yellow (still shown with a warning), >0.55 never rendered as an individual result; if a query ends up with nothing renderable, one "Brak odpowiedzi w KB" message replaces the list, carrying the best observed dist. - Paperless hits link out; gmail hits get a "kopiuj Message-ID" button (there's nothing to link to yet, plan §2 decision 3) plus header metadata. Cascade/flat toggle defaults to cascade. Footer shows sol_status, refreshed from /healthz on load and after each search. - /search gained additive summary/summary_tags fields (document_summary, haiku track) so the UI can show a document summary as each result group's header -- non-breaking, existing response shape untouched. - Tests: app/db.py + app/search.py unit tests (mocked DB/HTTP, no live deps) cover the new summary join; tests/test_frontend.py drives GET / and /static/* via TestClient without running the DB-requiring lifespan; tests/frontend/app.test.js (Node's built-in test runner, no framework) covers query-URL encoding, threshold colouring, and envelope grouping. - Verified live: docker build + container against kb-postgres@PIHA over LAN and Ollama@SOLARIA over Tailscale -- GET / (HTML), /static/app.js, /healthz, and /search (cascade + flat) all round-tripped correctly, including real summary/summary_tags data. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
158 lines
2.3 KiB
CSS
158 lines
2.3 KiB
CSS
:root {
|
|
color-scheme: light dark;
|
|
--green: #2e7d32;
|
|
--yellow: #b58900;
|
|
--red: #b3261e;
|
|
--border: #8884;
|
|
--muted: #767676;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
|
|
max-width: 48rem;
|
|
margin: 0 auto;
|
|
padding: 1.5rem 1rem 4rem;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
header h1 {
|
|
margin-bottom: 0.2rem;
|
|
}
|
|
|
|
.subtitle {
|
|
color: var(--muted);
|
|
margin-top: 0;
|
|
}
|
|
|
|
#search-form {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
align-items: center;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
#query {
|
|
flex: 1 1 20rem;
|
|
padding: 0.5rem 0.7rem;
|
|
font-size: 1rem;
|
|
border: 1px solid var(--border);
|
|
border-radius: 0.3rem;
|
|
}
|
|
|
|
button[type="submit"] {
|
|
padding: 0.5rem 1.1rem;
|
|
font-size: 1rem;
|
|
border: 1px solid var(--border);
|
|
border-radius: 0.3rem;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.mode-toggle {
|
|
font-size: 0.85rem;
|
|
color: var(--muted);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.3rem;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.error {
|
|
color: var(--red);
|
|
border: 1px solid var(--red);
|
|
border-radius: 0.3rem;
|
|
padding: 0.6rem 0.8rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.loading,
|
|
.no-answer {
|
|
color: var(--muted);
|
|
}
|
|
|
|
.result-group {
|
|
border: 1px solid var(--border);
|
|
border-radius: 0.4rem;
|
|
padding: 0.8rem 1rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.result-group h3 {
|
|
margin: 0 0 0.3rem;
|
|
}
|
|
|
|
.tags {
|
|
font-size: 0.8rem;
|
|
color: var(--muted);
|
|
margin-bottom: 0.4rem;
|
|
}
|
|
|
|
.source-meta {
|
|
font-size: 0.85rem;
|
|
color: var(--muted);
|
|
margin-bottom: 0.6rem;
|
|
display: flex;
|
|
gap: 0.6rem;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.source-meta button {
|
|
font-size: 0.8rem;
|
|
padding: 0.15rem 0.5rem;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.chunk {
|
|
margin: 0.3rem 0;
|
|
border-left: 4px solid var(--border);
|
|
padding-left: 0.6rem;
|
|
}
|
|
|
|
.chunk summary {
|
|
cursor: pointer;
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.chunk-text {
|
|
white-space: pre-wrap;
|
|
font-family: inherit;
|
|
font-size: 0.9rem;
|
|
margin: 0.4rem 0 0.2rem;
|
|
}
|
|
|
|
.dist-green {
|
|
border-left-color: var(--green);
|
|
}
|
|
|
|
.dist-yellow {
|
|
border-left-color: var(--yellow);
|
|
}
|
|
|
|
.dist-yellow summary {
|
|
color: var(--yellow);
|
|
}
|
|
|
|
footer {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
padding: 0.4rem 1rem;
|
|
font-size: 0.75rem;
|
|
color: var(--muted);
|
|
text-align: right;
|
|
}
|
|
|
|
.sol-up {
|
|
color: var(--green);
|
|
}
|
|
|
|
.sol-down {
|
|
color: var(--red);
|
|
}
|