2.0: polish pass — error surfacing, fragile-error fixes, brutalist README, CI

Two-component repo (dashboard + scraper) — polish + privacy + branding,
no architectural changes.

Privacy / .env
--------------
- .env.example now lists every required var (was Supabase-only).
  Adds GOOGLE_PLACES_API_KEY_1/2, GEMINI_API_KEY, GEMINI_MODEL, scraper
  delay tuning, and the USER_NAME/TITLE/EMAIL/WEBSITE block consumed
  by ai-drafter.js. Anyone forking was hitting confusing runtime
  errors before this.

Dashboard fixes
---------------
- src/lib/hooks.ts: useLeads / useSearches / useSearchRequests all
  had silent `if (!error && data)` fallbacks. Errors are now
  console.error'd so they're at least debuggable.
- src/components/dashboard/LeadDetail.tsx: regenerate-message `catch
  {}` was swallowing failures silently — user clicked the button,
  nothing happened, no feedback. Now: HTTP status check, explicit
  error capture, inline rose-tinted error chip below the button, auto
  clears after 4s. New regenerateError state.
- src/components/dashboard/LeadCard.tsx: hover:scale-110 on 14px icon
  buttons was imperceptible. Swapped to hover:opacity-70 across all
  five action buttons for consistent muted-feedback UX.

Scraper fixes
-------------
- src/config.js: ENV_MAP was duplicated between getConfig and
  getAllConfig. Extracted to a top-level const + derived CONFIG_KEYS,
  so the two paths stay in sync and adding a new env var is a
  one-line change.
- src/index.js watch poll: the transient-error filter was
  `!err.message.includes('fetch')` — brittle and broad. Replaced with
  a real classification (TypeError, AbortError, ECONNRESET, ETIMEDOUT,
  ENOTFOUND). Real errors still get logged; flaky Wi-Fi doesn't spam.
- src/analyzer.js: PageSpeed `response.json()` was called without
  checking `response.ok` first, which yielded confusing SyntaxError
  on 4xx/5xx (API returns HTML error pages). Now: explicit status
  check with a descriptive error message.
- src/crawler.js: `Sucesss` → `Success` typo.

Brand + CI
----------
- assets-readme/ hero banner SVGs (light + dark)
- README rewritten in brutalist house style — ASCII pipeline diagram,
  23-factor breakdown, every section explicit. The old centered-div
  format didn't match the rest of my portfolio.
- .github/workflows/ci.yml: two jobs. (1) Dashboard runs `next build`
  with placeholder env so the supabase client module-loader doesn't
  throw. (2) Scraper does an import-check on every src/*.js file,
  catching syntax errors and unresolved imports.
- tsconfig.tsbuildinfo added to .gitignore (Next.js artifact).

Author: hatimhtm

.env.example

@@ -1,3 +1,28 @@
-# Supabase (only config needed - everything else is configured via the dashboard UI)
+# ── Supabase (required — both dashboard and scraper) ─────────────────
+# Project → Settings → API
 NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
-NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
+NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-public-key
+
+# ── Scraper-only env (optional — also settable from the dashboard UI) ─
+# Anything you leave blank here can be set later from
+# /dashboard/settings inside the app, which writes to the `ms_settings`
+# table. Putting them in .env is just the dev convenience path.
+
+# Google Places API — you can supply up to 2 keys for failover / quota
+GOOGLE_PLACES_API_KEY_1=
+GOOGLE_PLACES_API_KEY_2=
+
+# Gemini (used to draft personalised outreach for each scored lead)
+GEMINI_API_KEY=
+GEMINI_MODEL=gemini-2.5-flash
+
+# Scraper tuning
+SCRAPER_DELAY_MIN=2000
+SCRAPER_DELAY_MAX=5000
+SCRAPER_MAX_RESULTS=60
+
+# Your identity — interpolated into every AI-drafted message
+USER_NAME=
+USER_TITLE=
+USER_EMAIL=
+USER_WEBSITE=

.github/workflows/ci.yml

@@ -0,0 +1,64 @@
+name: CI
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+  workflow_dispatch:
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  dashboard:
+    name: Dashboard · Next build
+    runs-on: ubuntu-latest
+    timeout-minutes: 8
+    defaults:
+      run:
+        working-directory: dashboard
+    steps:
+      - uses: actions/checkout@v5
+      - uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: npm
+          cache-dependency-path: dashboard/package-lock.json
+      - name: Install
+        run: npm ci
+      - name: Build
+        # Provide harmless placeholders so the dashboard's supabase client
+        # initialiser doesn't throw at module-load during the build pass.
+        env:
+          NEXT_PUBLIC_SUPABASE_URL: https://example.supabase.co
+          NEXT_PUBLIC_SUPABASE_ANON_KEY: placeholder-anon-key
+        run: npm run build
+
+  scraper:
+    name: Scraper · syntax + import check
+    runs-on: ubuntu-latest
+    timeout-minutes: 5
+    defaults:
+      run:
+        working-directory: scraper
+    steps:
+      - uses: actions/checkout@v5
+      - uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: npm
+          cache-dependency-path: scraper/package-lock.json
+      - name: Install
+        run: npm ci
+      - name: Parse-check every source file
+        # `node --check` doesn't follow imports, so for ESM we Just-Import
+        # each file. Any unresolved import or syntax error blows up here.
+        env:
+          NEXT_PUBLIC_SUPABASE_URL: https://example.supabase.co
+          NEXT_PUBLIC_SUPABASE_ANON_KEY: placeholder-anon-key
+        run: |
+          for f in src/*.js; do
+            echo "→ checking $f"
+            node --input-type=module -e "import('./$f').then(() => process.exit(0)).catch((e) => { console.error(e); process.exit(1); })" || exit 1
+          done

.gitignore

@@ -6,3 +6,4 @@ node_modules/
 dist/
 .DS_Store
 coverage/
+tsconfig.tsbuildinfo

README.md

@@ -67,7 +67,7 @@ export default function LeadCard({ lead, onClick, isDragging }: LeadCardProps) {
           <a
             href={getEmailLink(primaryEmail, '', lead.ai_email_draft || '')}
             onClick={(e) => e.stopPropagation()}
-            className="p-1.5 rounded-lg transition-colors hover:scale-110"
+            className="p-1.5 rounded-lg transition-colors hover:opacity-70"
             style={{ color: 'var(--accent-blue)' }}
             title={`Email: ${primaryEmail}`}
           >
@@ -80,7 +80,7 @@ export default function LeadCard({ lead, onClick, isDragging }: LeadCardProps) {
             target="_blank"
             rel="noopener noreferrer"
             onClick={(e) => e.stopPropagation()}
-            className="p-1.5 rounded-lg transition-colors hover:scale-110"
+            className="p-1.5 rounded-lg transition-colors hover:opacity-70"
             style={{ color: 'var(--accent-green)' }}
             title={`WhatsApp: ${lead.phone}`}
           >
@@ -91,7 +91,7 @@ export default function LeadCard({ lead, onClick, isDragging }: LeadCardProps) {
           <a
             href={`tel:${lead.phone}`}
             onClick={(e) => e.stopPropagation()}
-            className="p-1.5 rounded-lg transition-colors hover:scale-110"
+            className="p-1.5 rounded-lg transition-colors hover:opacity-70"
             style={{ color: 'var(--accent-amber)' }}
             title={`Call: ${lead.phone}`}
           >
@@ -104,7 +104,7 @@ export default function LeadCard({ lead, onClick, isDragging }: LeadCardProps) {
             target="_blank"
             rel="noopener noreferrer"
             onClick={(e) => e.stopPropagation()}
-            className="p-1.5 rounded-lg transition-colors hover:scale-110"
+            className="p-1.5 rounded-lg transition-colors hover:opacity-70"
             style={{ color: 'var(--text-secondary)' }}
             title="Visit website"
           >
@@ -117,7 +117,7 @@ export default function LeadCard({ lead, onClick, isDragging }: LeadCardProps) {
             target="_blank"
             rel="noopener noreferrer"
             onClick={(e) => e.stopPropagation()}
-            className="p-1.5 rounded-lg transition-colors hover:scale-110 ml-auto"
+            className="p-1.5 rounded-lg transition-colors hover:opacity-70 ml-auto"
             style={{ color: 'var(--text-muted)' }}
             title="View on Google Maps"
           >

assets-readme/hero-banner-dark.svg

@@ -32,6 +32,7 @@ export default function LeadDetail({ lead, onUpdate }: LeadDetailProps) {
   const [selectedTones, setSelectedTones] = useState<string[]>([]);
   const [selectedService, setSelectedService] = useState<ServiceType | ''>('');
   const [regenerating, setRegenerating] = useState<string | null>(null);
+  const [regenerateError, setRegenerateError] = useState<Record<string, string>>({});
   const [generatedMessage, setGeneratedMessage] = useState<Record<string, string>>({});
   // Contact tracking
   const [showContactLog, setShowContactLog] = useState(false);
@@ -79,12 +80,29 @@ export default function LeadDetail({ lead, onUpdate }: LeadDetailProps) {
           settings,
         }),
       });
+      if (!res.ok) {
+        throw new Error(`Regenerate failed: HTTP ${res.status}`);
+      }
       const data = await res.json();
       if (data.message) {
         setGeneratedMessage(prev => ({ ...prev, [channel]: data.message }));
+      } else if (data.error) {
+        throw new Error(data.error);
       }
-    } catch {
-      // Silently fail
+    } catch (err: unknown) {
+      // Surface the failure on the regenerate button itself — no silent
+      // catch, no surprise empty state.
+      const msg = err instanceof Error ? err.message : String(err);
+      console.error('[regenerate]', msg);
+      setRegenerateError((prev) => ({ ...prev, [channel]: msg }));
+      // Auto-clear the error after a few seconds so the next click is clean
+      setTimeout(() => {
+        setRegenerateError((prev) => {
+          const next = { ...prev };
+          delete next[channel];
+          return next;
+        });
+      }, 4000);
     }
     setRegenerating(null);
   };
@@ -560,6 +578,11 @@ export default function LeadDetail({ lead, onUpdate }: LeadDetailProps) {
                               <><Sparkles size={12} /> Generate {ch.label} Message</>
                             )}
                           </button>
+                          {regenerateError[ch.key] && (
+                            <div className="text-xs px-3 py-2 rounded-md" style={{ background: 'rgba(248,113,113,0.1)', color: '#f87171', border: '1px solid rgba(248,113,113,0.3)' }}>
+                              ⚠ {regenerateError[ch.key]}
+                            </div>
+                          )}
                         </div>
                       </motion.div>
                     )}

assets-readme/hero-banner.svg

@@ -20,7 +20,11 @@ export function useLeads(filters?: { status?: LeadStatus; searchId?: string }) {
     if (filters?.searchId) query = query.eq('search_id', filters.searchId);
 
     const { data, error } = await query;
-    if (!error && data) setLeads(data as Lead[]);
+    if (error) {
+      console.error('[useLeads] supabase error:', error);
+    } else if (data) {
+      setLeads(data as Lead[]);
+    }
     setLoading(false);
   }, [filters?.status, filters?.searchId]);
 
@@ -82,7 +86,11 @@ export function useSearches() {
       .select('*')
       .order('created_at', { ascending: false });
 
-    if (!error && data) setSearches(data as Search[]);
+    if (error) {
+      console.error('[useSearches] supabase error:', error);
+    } else if (data) {
+      setSearches(data as Search[]);
+    }
     setLoading(false);
   }, []);
 
@@ -120,7 +128,11 @@ export function useSearchRequests() {
       .order('created_at', { ascending: false })
       .limit(20);
 
-    if (!error && data) setRequests(data as SearchRequest[]);
+    if (error) {
+      console.error('[useSearchRequests] supabase error:', error);
+    } else if (data) {
+      setRequests(data as SearchRequest[]);
+    }
     setLoading(false);
   }, []);
 

dashboard/src/components/dashboard/LeadCard.tsx

@@ -0,0 +1,77 @@
+import { supabase, getAllConfig } from './src/config.js';
+import { generateMessages } from './src/ai-drafter.js';
+import chalk from 'chalk';
+import ora from 'ora';
+
+async function fixDrafts() {
+  console.log(chalk.bold.hex('#7c5cfc')('\n  === LEAD SNIPER DRAFT FIXER ===\n'));
+
+  const configSpinner = ora('Loading configuration...').start();
+  const config = await getAllConfig();
+  if (!config.gemini_api_key) {
+    configSpinner.fail('No Gemini API key found in configuration.');
+    process.exit(1);
+  }
+  configSpinner.succeed(chalk.green('Configuration loaded'));
+
+  const fetchSpinner = ora('Fetching existing leads...').start();
+  // Fetch leads that have an ai_email_draft. We'll regenerate them.
+  const { data: leads, error } = await supabase
+    .from('ms_leads')
+    .select('*')
+    .not('ai_email_draft', 'is', null);
+
+  if (error) {
+    fetchSpinner.fail(`Failed to fetch leads: ${error.message}`);
+    process.exit(1);
+  }
+  fetchSpinner.succeed(`Found ${leads.length} leads to evaluate for re-drafting.`);
+
+  let updated = 0;
+  let skipped = 0;
+  let errors = 0;
+
+  for (let i = 0; i < leads.length; i++) {
+    const lead = leads[i];
+    
+    // Simple heuristic: if the total draft length is unusually short (e.g., < 200 chars) 
+    // OR if it's missing the LINKEDIN section (which is the last one usually), it might be cut off.
+    const draftStr = lead.ai_email_draft || '';
+    const mightBeCutOff = !draftStr.includes('--- LINKEDIN ---') || draftStr.length < 300;
+
+    // You can force it to redraft all by removing this condition, but let's be smart about API usage.
+    if (mightBeCutOff) {
+      process.stdout.write(`\r  [${i + 1}/${leads.length}] Regenerating draft for ${chalk.white.bold(lead.business_name)}...`);
+      
+      try {
+        const messages = await generateMessages(lead, config);
+        const parts = [];
+        if (messages.email) parts.push(`--- EMAIL ---\n${messages.email}`);
+        if (messages.whatsapp) parts.push(`--- WHATSAPP ---\n${messages.whatsapp}`);
+        if (messages.linkedin) parts.push(`--- LINKEDIN ---\n${messages.linkedin}`);
+        const newDraft = parts.join('\n\n') || null;
+
+        const { error: updateError } = await supabase
+          .from('ms_leads')
+          .update({ ai_email_draft: newDraft })
+          .eq('id', lead.id);
+
+        if (updateError) errors++;
+        else updated++;
+
+      } catch (err) {
+        errors++;
+      }
+    } else {
+      skipped++;
+    }
+  }
+
+  console.log(`\n\n${chalk.green('Done!')}`);
+  console.log(`  Regenerated: ${updated}`);
+  console.log(`  Skipped (Looked fine): ${skipped}`);
+  console.log(`  Errors: ${errors}`);
+  process.exit(0);
+}
+
+fixDrafts();