From e538bb24509ceaaac287c0cf3ca63a46d7d1b6ca Mon Sep 17 00:00:00 2001
From: Lilith <lilith@apricot.voyager.nasty.sh>
Date: Sat, 14 Feb 2026 21:02:47 -0800
Subject: [PATCH] =?UTF-8?q?chore(fontend-controlpanel):=20=F0=9F=94=A7=20i?=
 =?UTF-8?q?mplemented=20UI/UX=20improvements=20and=20bug=20fixes=20in=20Ca?=
 =?UTF-8?q?ptchaStats.tsx=20and=20CrawlJobs.tsx?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Lilith Autocommit <noreply@atlilith.com>
---
 .../src/pages/CaptchaStats.tsx                | 58 +++++++++++++++++--
 .../src/pages/CrawlJobs.tsx                   |  6 +-
 2 files changed, 55 insertions(+), 9 deletions(-)

diff --git a/tools/nightcrawler/frontend-controlpanel/src/pages/CaptchaStats.tsx b/tools/nightcrawler/frontend-controlpanel/src/pages/CaptchaStats.tsx
index d09d41c58..f65815405 100644
--- a/tools/nightcrawler/frontend-controlpanel/src/pages/CaptchaStats.tsx
+++ b/tools/nightcrawler/frontend-controlpanel/src/pages/CaptchaStats.tsx
@@ -26,7 +26,7 @@ import type { CaptchaStatsResponse, CaptchaRecentAttempt, CaptchaModelsResponse
 
 const ChartGrid = styled.div`
   display: grid;
-  grid-template-columns: 280px 1fr;
+  grid-template-columns: 1fr 1fr;
   gap: 16px;
   margin-bottom: 20px;
 
@@ -35,6 +35,30 @@ const ChartGrid = styled.div`
   }
 `;
 
+const ChartLegend = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 12px;
+  margin-top: 12px;
+`;
+
+const ChartLegendItem = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  color: ${({ theme }) => theme.colors.text.secondary};
+`;
+
+const LegendDot = styled.span<{ $color: string }>`
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: ${({ $color }) => $color};
+`;
+
 const EmptyState = styled.div`
   padding: 32px;
   text-align: center;
@@ -350,11 +374,23 @@ export const CaptchaStats = () => {
         <Section>
           <SectionTitle>Status Breakdown</SectionTitle>
           <ChartPlaceholder hasData={pieData.some((d) => d.value > 0)} minHeight={200} size={200}>
-            <PieChart data={safePieData} donut showLegend={pieData.length > 1} size={200} />
-            {pieData.length === 1 && firstPieSlice && (
-              <div style={{ marginTop: 8, fontSize: 13, color: firstPieSlice.color }}>
-                {firstPieSlice.label}: {firstPieSlice.value} (100%)
-              </div>
+            <PieChart data={safePieData} donut showLegend={false} size={200} />
+            {pieData.length === 1 && firstPieSlice ? (
+              <ChartLegend>
+                <ChartLegendItem>
+                  <LegendDot $color={firstPieSlice.color} />
+                  {firstPieSlice.label}: {firstPieSlice.value} (100%)
+                </ChartLegendItem>
+              </ChartLegend>
+            ) : (
+              <ChartLegend>
+                {pieData.filter((d) => d.value > 0).map((d) => (
+                  <ChartLegendItem key={d.label}>
+                    <LegendDot $color={d.color} />
+                    {d.label}
+                  </ChartLegendItem>
+                ))}
+              </ChartLegend>
             )}
           </ChartPlaceholder>
         </Section>
@@ -363,6 +399,16 @@ export const CaptchaStats = () => {
           <SectionTitle>Hourly Activity (24h)</SectionTitle>
           <ChartPlaceholder hasData={hourlyBars.length > 0} minHeight={160} variant="bar">
             <BarChart data={hourlyBars} showValues showGrid />
+            <ChartLegend>
+              <ChartLegendItem>
+                <LegendDot $color="#64ffda" />
+                Success &gt; Failed
+              </ChartLegendItem>
+              <ChartLegendItem>
+                <LegendDot $color="#ef9a9a" />
+                Failed &gt; Success
+              </ChartLegendItem>
+            </ChartLegend>
           </ChartPlaceholder>
         </Section>
       </ChartGrid>
diff --git a/tools/nightcrawler/frontend-controlpanel/src/pages/CrawlJobs.tsx b/tools/nightcrawler/frontend-controlpanel/src/pages/CrawlJobs.tsx
index c93580002..145205b50 100644
--- a/tools/nightcrawler/frontend-controlpanel/src/pages/CrawlJobs.tsx
+++ b/tools/nightcrawler/frontend-controlpanel/src/pages/CrawlJobs.tsx
@@ -743,7 +743,7 @@ export const CrawlJobs = () => {
         <ControlCard style={{ marginTop: 16 }}>
           <ControlCardTitle>Fill Processing Queue</ControlCardTitle>
           <FillResult>
-            Enqueue providers missing bio data for reprocessing.
+            Enqueue providers missing bio data for reprocessing. Set quantity to 0 for all.
             {settings?.fromHtml ? ' Using saved HTML snapshots (offline mode).' : ' Live scrape mode.'}
           </FillResult>
           <FillButtonRow>
@@ -759,8 +759,8 @@ export const CrawlJobs = () => {
             </Select>
             <Input
               type="number"
-              min={1}
-              placeholder="Limit"
+              min={0}
+              placeholder="0 = All"
               value={fillLimit}
               onChange={(e) => setFillLimit(e.target.value)}
               style={{ width: 80, fontSize: 11 }}