Skip to content

Web GUI: dark-mode fixes, composer KB picker, and robust agentic trail #25

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
lfnothias merged 4 commits into from
Jun 22, 2026
Merged

Web GUI: dark-mode fixes, composer KB picker, and robust agentic trail #25

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d5fcb49
Fix dark-mode contrast, add composer KB picker, harden auto-route
lfnothias Jun 22, 2026
8f210c9
Harden chat UI: markdown error boundary + complete agentic-trail steps
lfnothias Jun 22, 2026
2196f1f
Stream agentic-trail phases live (handle status frames)
lfnothias Jun 22, 2026
14597dd
Use the Perspicacité sun as the favicon
lfnothias Jun 22, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 8 additions & 8 deletions frontend/src/app/conversations/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -148,7 +148,7 @@ export default function ConversationsPage() {
type="button"
onClick={handleClearAll}
disabled={items.length === 0 && !listLoading}
className="rounded-[var(--radius-md)] border border-[var(--cnrs-blue)] px-4 py-2 text-sm font-medium text-[var(--cnrs-blue)] transition hover:bg-[var(--cnrs-blue)] hover:text-white disabled:cursor-not-allowed disabled:opacity-40"
className="rounded-[var(--radius-md)] border border-[var(--cnrs-blue)] px-4 py-2 text-sm font-medium text-[var(--text-body)] transition hover:bg-[var(--cnrs-blue)] hover:text-white disabled:cursor-not-allowed disabled:opacity-40"
>
Clear all
</button>
Expand Down Expand Up @@ -242,7 +242,7 @@ function ConvRow({
"flex w-full flex-col gap-1.5 rounded-[var(--radius-md)] px-3 py-2.5 text-left transition",
active
? "bg-[var(--cnrs-yellow)] text-[var(--cnrs-blue)]"
: "text-[var(--text-body)] hover:bg-[var(--cnrs-grey-light)]",
: "text-[var(--text-body)] hover:bg-[var(--surface-hover)]",
].join(" ")}
>
<span className="line-clamp-2 text-sm font-medium leading-snug">
Expand All @@ -266,7 +266,7 @@ function ConvRow({
className={[
"rounded-full px-1.5 py-0.5 font-mono",
active
? "bg-[var(--cnrs-blue)]/10 text-[var(--cnrs-blue)]"
? "bg-[var(--cnrs-blue)]/10 text-[var(--text-body)]"
: "bg-[var(--cnrs-grey-light)] text-[var(--text-muted)]",
].join(" ")}
>
Expand All @@ -275,7 +275,7 @@ function ConvRow({
)}
<span
className={
active ? "text-[var(--cnrs-blue)]/70" : "text-[var(--text-muted)]"
active ? "text-[var(--text-body)]/70" : "text-[var(--text-muted)]"
}
>
{relativeTime(conv.updated_at ?? conv.created_at)}
Expand Down Expand Up @@ -307,7 +307,7 @@ function EmptyState() {
style={{ background: "var(--cnrs-yellow)" }}
aria-hidden
/>
<h2 className="text-xl font-semibold text-[var(--cnrs-blue)]">
<h2 className="text-xl font-semibold text-[var(--text-body)]">
Select a conversation
</h2>
<p className="max-w-md text-sm text-[var(--text-muted)]">
Expand Down Expand Up @@ -354,11 +354,11 @@ function DetailPane({
<button
type="button"
onClick={onBack}
className="rounded-[var(--radius-sm)] px-2 py-1 text-xs text-[var(--cnrs-blue)] hover:bg-[var(--cnrs-grey-light)] md:hidden"
className="rounded-[var(--radius-sm)] px-2 py-1 text-xs text-[var(--text-body)] hover:bg-[var(--surface-hover)] md:hidden"
>
← Back
</button>
<h2 className="min-w-0 flex-1 truncate text-sm font-semibold text-[var(--cnrs-blue)]">
<h2 className="min-w-0 flex-1 truncate text-sm font-semibold text-[var(--text-body)]">
{detail?.title?.trim() || (loading ? "Loading…" : "Untitled")}
</h2>
{detail?.kb_name && (
Expand All @@ -368,7 +368,7 @@ function DetailPane({
)}
<a
href={convApi.exportUrl(id)}
className="rounded-[var(--radius-sm)] border border-[var(--border)] px-2.5 py-1 text-xs font-medium text-[var(--cnrs-blue)] transition hover:bg-[var(--cnrs-grey-light)]"
className="rounded-[var(--radius-sm)] border border-[var(--border)] px-2.5 py-1 text-xs font-medium text-[var(--text-body)] transition hover:bg-[var(--surface-hover)]"
>
Export JSON
</a>
Expand Down
Binary file modified frontend/src/app/favicon.ico
View file
Open in desktop
Binary file not shown.
8 changes: 8 additions & 0 deletions frontend/src/app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,8 @@
--border: #dfe4ec;
--text-body: #00284b;
--text-muted: #4a5b75;
--surface-hover: var(--cnrs-grey-light); /* light grey hover (unchanged in light mode) */
color-scheme: light;

/* Geometry */
--radius-sm: 8px;
Expand Down Expand Up @@ -77,6 +79,8 @@ html:not(.theme-light) {
--border: #1d3d5e;
--text-body: #ebf0f5;
--text-muted: #8296a5;
--surface-hover: #1b3f63; /* subtle elevated navy for button :hover (was a near-white flash) */
color-scheme: dark; /* themes native controls (select dropdowns, scrollbars) */
--shadow-card: 0 8px 30px rgba(0, 0, 0, 0.4);
--shadow-elev: 0 16px 48px rgba(0, 0, 0, 0.5);
/* In dark mode, "CNRS-blue accent text" disappears against the
Expand All @@ -95,6 +99,8 @@ html.theme-dark {
--border: #1d3d5e;
--text-body: #ebf0f5;
--text-muted: #8296a5;
--surface-hover: #1b3f63; /* subtle elevated navy for button :hover (was a near-white flash) */
color-scheme: dark; /* themes native controls (select dropdowns, scrollbars) */
--shadow-card: 0 8px 30px rgba(0, 0, 0, 0.4);
--shadow-elev: 0 16px 48px rgba(0, 0, 0, 0.5);
--accent-fg: #ffeb6e;
Expand All @@ -110,6 +116,8 @@ html.theme-light {
--border: #dfe4ec;
--text-body: #00284b;
--text-muted: #4a5b75;
--surface-hover: var(--cnrs-grey-light); /* light grey hover (unchanged in light mode) */
color-scheme: light;
--shadow-card: 0 8px 30px rgba(0, 40, 75, 0.08);
--shadow-elev: 0 16px 48px rgba(0, 40, 75, 0.12);
}
Expand Down
9 changes: 9 additions & 0 deletions frontend/src/app/icon.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion frontend/src/app/kb/[name]/expand/_components/CandidateList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export function CandidateList({ candidates }: { candidates: ExpandCandidate[] })
{c.score.toFixed(3)}
</span>
<div className="min-w-0 flex-1">
<p className="text-sm font-medium leading-snug text-[var(--cnrs-blue)]">
<p className="text-sm font-medium leading-snug text-[var(--text-body)]">
{c.title ?? c.doi ?? "(untitled)"}
</p>
{c.doi && (
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/app/kb/[name]/expand/_components/SampleLabeler.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export function SampleLabeler({
className="rounded-[var(--radius-lg)] border border-[var(--border)] bg-[var(--surface)] p-4 shadow-[var(--shadow-card)]"
>
<div className="flex items-start justify-between gap-3">
<h3 className="text-[15px] font-semibold leading-snug text-[var(--cnrs-blue)]">
<h3 className="text-[15px] font-semibold leading-snug text-[var(--text-body)]">
{s.title ?? s.doi ?? "(untitled)"}
</h3>
<span className="shrink-0 rounded-full bg-[var(--cnrs-grey-light)] px-2 py-0.5 font-mono text-[11px] text-[var(--cnrs-blue)]">
Expand All @@ -49,7 +49,7 @@ export function SampleLabeler({
"rounded-[var(--radius-md)] px-3 py-1.5 text-sm font-medium transition",
label === true
? "bg-[var(--cnrs-blue)] text-white"
: "border border-[var(--border)] text-[var(--cnrs-blue)] hover:bg-[var(--cnrs-grey-light)]",
: "border border-[var(--border)] text-[var(--text-body)] hover:bg-[var(--surface-hover)]",
].join(" ")}
>
Relevant
Expand Down
32 changes: 16 additions & 16 deletions frontend/src/app/kb/[name]/expand/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -145,7 +145,7 @@ export default function ExpandSimilarPage({
actions={
<Link
href={`/kb/${encodeURIComponent(name)}`}
className="rounded-[var(--radius-md)] border border-[var(--cnrs-blue)] px-3 py-1.5 text-sm font-medium text-[var(--cnrs-blue)] transition hover:bg-[var(--cnrs-blue)] hover:text-white"
className="rounded-[var(--radius-md)] border border-[var(--cnrs-blue)] px-3 py-1.5 text-sm font-medium text-[var(--text-body)] transition hover:bg-[var(--cnrs-blue)] hover:text-white"
>
← Back to KB
</Link>
Expand Down Expand Up @@ -277,7 +277,7 @@ function ConfigurePhase({
<div className="rounded-[var(--radius-lg)] border border-[var(--border)] bg-[var(--surface)] p-6 shadow-[var(--shadow-card)]">
<div className="grid grid-cols-1 gap-6 md:grid-cols-3">
<label className="flex flex-col gap-2">
<span className="text-sm font-medium text-[var(--cnrs-blue)]">
<span className="text-sm font-medium text-[var(--text-body)]">
Snowball direction
</span>
<select
Expand All @@ -300,7 +300,7 @@ function ConfigurePhase({
</label>

<label className="flex flex-col gap-2">
<span className="text-sm font-medium text-[var(--cnrs-blue)]">
<span className="text-sm font-medium text-[var(--text-body)]">
Max candidates per seed
</span>
<input
Expand All @@ -323,7 +323,7 @@ function ConfigurePhase({
</label>

<label className="flex flex-col gap-2">
<span className="text-sm font-medium text-[var(--cnrs-blue)]">
<span className="text-sm font-medium text-[var(--text-body)]">
Similarity scorer
</span>
<select
Expand Down Expand Up @@ -409,7 +409,7 @@ function CalibratePhase({
<button
type="button"
onClick={onBack}
className="rounded-[var(--radius-md)] border border-[var(--cnrs-blue)] px-4 py-2 text-sm font-medium text-[var(--cnrs-blue)] transition hover:bg-[var(--cnrs-blue)] hover:text-white"
className="rounded-[var(--radius-md)] border border-[var(--cnrs-blue)] px-4 py-2 text-sm font-medium text-[var(--text-body)] transition hover:bg-[var(--cnrs-blue)] hover:text-white"
>
← Adjust settings
</button>
Expand All @@ -421,7 +421,7 @@ function CalibratePhase({
return (
<div className="flex flex-col gap-6">
<div className="flex flex-wrap items-baseline justify-between gap-2">
<h2 className="text-sm font-semibold uppercase tracking-wider text-[var(--cnrs-blue)]">
<h2 className="text-sm font-semibold uppercase tracking-wider text-[var(--text-body)]">
Score distribution
</h2>
<p className="text-xs text-[var(--text-muted)]">
Expand All @@ -433,7 +433,7 @@ function CalibratePhase({
<ScoreHistogram buckets={report.histogram} />

<div>
<h2 className="mb-1 text-sm font-semibold uppercase tracking-wider text-[var(--cnrs-blue)]">
<h2 className="mb-1 text-sm font-semibold uppercase tracking-wider text-[var(--text-body)]">
Calibrate the cutoff
</h2>
<p className="mb-3 text-sm text-[var(--text-muted)]">
Expand All @@ -451,7 +451,7 @@ function CalibratePhase({
<button
type="button"
onClick={onBack}
className="rounded-[var(--radius-md)] border border-[var(--cnrs-blue)] px-4 py-2 text-sm font-medium text-[var(--cnrs-blue)] transition hover:bg-[var(--cnrs-blue)] hover:text-white"
className="rounded-[var(--radius-md)] border border-[var(--cnrs-blue)] px-4 py-2 text-sm font-medium text-[var(--text-body)] transition hover:bg-[var(--cnrs-blue)] hover:text-white"
>
← Back
</button>
Expand Down Expand Up @@ -495,11 +495,11 @@ function ReviewPhase({
<div className="flex items-center justify-between gap-3">
<label
htmlFor="cutoff-slider"
className="text-sm font-medium text-[var(--cnrs-blue)]"
className="text-sm font-medium text-[var(--text-body)]"
>
Cutoff
</label>
<span className="font-mono text-sm text-[var(--cnrs-blue)]">
<span className="font-mono text-sm text-[var(--text-body)]">
{cutoff.toFixed(3)}
</span>
</div>
Expand All @@ -515,15 +515,15 @@ function ReviewPhase({
/>
<p className="mt-2 text-sm text-[var(--text-muted)]">
Keeping{" "}
<span className="font-semibold text-[var(--cnrs-blue)]">
<span className="font-semibold text-[var(--text-body)]">
{kept.length}
</span>{" "}
of {total} candidate{total === 1 ? "" : "s"}.
</p>
</div>

<div>
<h2 className="mb-3 text-sm font-semibold uppercase tracking-wider text-[var(--cnrs-blue)]">
<h2 className="mb-3 text-sm font-semibold uppercase tracking-wider text-[var(--text-body)]">
Will be ingested
</h2>
<CandidateList candidates={kept} />
Expand All @@ -535,7 +535,7 @@ function ReviewPhase({
type="button"
onClick={onBack}
disabled={committing}
className="rounded-[var(--radius-md)] border border-[var(--cnrs-blue)] px-4 py-2 text-sm font-medium text-[var(--cnrs-blue)] transition hover:bg-[var(--cnrs-blue)] hover:text-white disabled:cursor-not-allowed disabled:opacity-50"
className="rounded-[var(--radius-md)] border border-[var(--cnrs-blue)] px-4 py-2 text-sm font-medium text-[var(--text-body)] transition hover:bg-[var(--cnrs-blue)] hover:text-white disabled:cursor-not-allowed disabled:opacity-50"
>
← Re-label samples
</button>
Expand Down Expand Up @@ -583,7 +583,7 @@ function ResultPhase({
return (
<div className="flex flex-col gap-6">
<div className="rounded-[var(--radius-lg)] border border-[var(--border)] bg-[var(--surface)] p-6 shadow-[var(--shadow-card)]">
<h2 className="text-lg font-semibold text-[var(--cnrs-blue)]">
<h2 className="text-lg font-semibold text-[var(--text-body)]">
Expansion complete
</h2>
<div className="mt-4 grid grid-cols-3 gap-3">
Expand All @@ -609,7 +609,7 @@ function ResultPhase({
<button
type="button"
onClick={onRestart}
className="rounded-[var(--radius-md)] border border-[var(--cnrs-blue)] px-4 py-2 text-sm font-medium text-[var(--cnrs-blue)] transition hover:bg-[var(--cnrs-blue)] hover:text-white"
className="rounded-[var(--radius-md)] border border-[var(--cnrs-blue)] px-4 py-2 text-sm font-medium text-[var(--text-body)] transition hover:bg-[var(--cnrs-blue)] hover:text-white"
>
Expand again
</button>
Expand All @@ -624,7 +624,7 @@ function ResultTile({ label, value }: { label: string; value: number }) {
<p className="font-mono text-[11px] uppercase tracking-wider text-[var(--text-muted)]">
{label}
</p>
<p className="mt-1 text-2xl font-semibold text-[var(--cnrs-blue)]">
<p className="mt-1 text-2xl font-semibold text-[var(--text-body)]">
{value}
</p>
</div>
Expand Down
Loading
Loading