UI/UX refinements for Crawlith web dashboard

packages/web/src/api.ts

@@ -31,13 +31,20 @@ export interface OverviewData {
 }
 
 export interface Issue {
+  id?: string;
   url: string;
   issueType: string;
   severity: 'Critical' | 'Warning' | 'Info';
   impactScore: number;
   pageRank: number;
   pageRankScore: number;
   lastSeen: string;
+  type?: string;
+  internalLinksCount?: number;
+  description?: string;
+  whyItMatters?: string;
+  howToFix?: string;
+  clusterId?: string;
 }
 
 export interface IssuesResponse {

packages/web/src/components/CriticalPanel.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useContext } from 'react';
+import { useEffect, useState, useContext } from 'react';
 import { AlertTriangle, ExternalLink, Network, ChevronRight } from 'lucide-react';
 import { DashboardContext } from '../App';
 import * as API from '../api';

packages/web/src/components/GraphIntelligenceSection.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { PageRankTable } from './Graphs/PageRankTable';
 import { SimpleBarChart } from './Graphs/SimpleBarChart';
 import { DuplicateClusterChart } from './Graphs/DuplicateClusterChart';

packages/web/src/components/HealthSnapshot.tsx

@@ -1,7 +1,20 @@
-import { healthMetrics } from '../data';
+import { useContext } from 'react';
 import { Activity, Link, Ghost, Copy, Layers, TrendingUp } from 'lucide-react';
+import { DashboardContext } from '../App';
 
 export const HealthSnapshot = () => {
+  const { overview } = useContext(DashboardContext);
+
+  if (!overview) return <div className="animate-pulse bg-slate-100 h-32 rounded-xl mb-8 w-full"></div>;
+
+  const healthMetrics = {
+    score: overview.health.score,
+    brokenLinks: overview.totals.brokenLinks,
+    orphanPages: overview.totals.orphanPages,
+    duplicateClusters: overview.totals.duplicateClusters,
+    pagesCrawled: overview.totals.crawled,
+    efficiency: overview.crawl.efficiency,
+  };
   return (
     <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 gap-4 mb-8">
       <StatCard label="Health Score" value={healthMetrics.score} unit="/100" icon={Activity} color="text-green-600 dark:text-green-500" />

packages/web/src/components/Issues/IssueDrawer.tsx

@@ -1,9 +1,8 @@
-import React from 'react';
 import { X, ExternalLink, Link, AlertTriangle } from 'lucide-react';
-import { Issue } from '../../data';
+import * as API from '../../api';
 
 interface IssueDrawerProps {
-  issue: Issue | null;
+  issue: API.Issue | null;
   onClose: () => void;
   isOpen: boolean;
 }

packages/web/src/components/IssuesTable.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useContext } from 'react';
+import { useState, useEffect, useContext } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 import { AlertTriangle, AlertCircle, Info, ChevronRight, Search, ArrowUp, ArrowDown } from 'lucide-react';
 import { DashboardContext } from '../App';
@@ -50,10 +50,10 @@ export const IssuesTable = () => {
 
     // Client-side sort for current page (since API sort is limited in this scope)
     const sorted = [...issues].sort((a, b) => {
-      // @ts-expect-error - dynamic key access
-      if (a[key] < b[key]) return direction === 'asc' ? -1 : 1;
-      // @ts-expect-error - dynamic key access
-      if (a[key] > b[key]) return direction === 'asc' ? 1 : -1;
+      const aVal = a[key] as any;
+      const bVal = b[key] as any;
+      if (aVal < bVal) return direction === 'asc' ? -1 : 1;
+      if (aVal > bVal) return direction === 'asc' ? 1 : -1;
       return 0;
     });
     setIssues(sorted);

packages/web/src/components/WarningPanel.tsx

@@ -1,7 +1,29 @@
-import { criticalIssues } from '../data.js';
+import { useState, useEffect, useContext } from 'react';
 import { AlertTriangle, ArrowRight } from 'lucide-react';
+import { DashboardContext } from '../App';
+import * as API from '../api';
 
 export const WarningPanel = () => {
+  const { currentSnapshot } = useContext(DashboardContext);
+  const [criticalIssues, setCriticalIssues] = useState<API.Issue[]>([]);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    if (!currentSnapshot) return;
+    const fetch = async () => {
+      setLoading(true);
+      try {
+        const data = await API.fetchIssues(currentSnapshot, 'Critical', '', 1);
+        setCriticalIssues(data.results.slice(0, 5)); // show top 5
+      } catch (e) {
+        console.error(e);
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetch();
+  }, [currentSnapshot]);
+
   return (
     <div className="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-xl p-5 h-full">
       <div className="flex items-center gap-2 mb-4">
@@ -10,15 +32,17 @@ export const WarningPanel = () => {
         </div>
         <div>
           <h3 className="font-bold text-slate-900 dark:text-slate-100 text-sm">Critical Attention</h3>
-          <p className="text-xs text-slate-500 dark:text-slate-400">5 issues require immediate fix</p>
+          <p className="text-xs text-slate-500 dark:text-slate-400">
+            {loading ? 'Loading...' : `${criticalIssues.length} issues require immediate fix`}
+          </p>
         </div>
       </div>
 
       <div className="space-y-3">
-        {criticalIssues.map((issue) => (
-          <div key={issue.id} className="p-3 bg-slate-50 dark:bg-slate-800/50 rounded-lg border border-slate-100 dark:border-slate-700/50 hover:border-red-200 dark:hover:border-red-900/30 transition-colors group cursor-pointer">
+        {criticalIssues.map((issue, idx) => (
+          <div key={issue.id || idx} className="p-3 bg-slate-50 dark:bg-slate-800/50 rounded-lg border border-slate-100 dark:border-slate-700/50 hover:border-red-200 dark:hover:border-red-900/30 transition-colors group cursor-pointer">
             <div className="flex justify-between items-start mb-1">
-              <span className="text-xs font-semibold text-red-600 dark:text-red-400">{issue.type}</span>
+              <span className="text-xs font-semibold text-red-600 dark:text-red-400">{issue.issueType || issue.type}</span>
               <ArrowRight size={14} className="text-slate-400 group-hover:text-slate-600 dark:group-hover:text-slate-300 transition-colors" />
             </div>
             <div className="text-xs text-slate-600 dark:text-slate-400 font-mono truncate">