I Gave an AI Coding Agent a Real Bug From My Own Site — Here's What Happened

Building interactive tools for a developer portfolio site is a great way to serve students and showcase full-stack capabilities. One of the popular features on this website is the **[Thesis Topic Generator](/tools/thesis-topic-generator)**—an interactive matcher that helps Grade 8-10, +2, Bachelor, Master, and PhD students find tailored academic research ideas in Nepal.

However, during a recent user experience audit, I noticed a subtle, silent bug: **Whenever a user opened the tool for the first time, every single recommended topic displayed on the screen belonged exclusively to Computer Science.**

Despite the UI controls clearly showing "1. LEVEL: All Levels" and "2. FIELD: All Fields", visitors in Business, Civil Engineering, Law, Education, or Health were greeted with 5 consecutive Computer Science topics!

Instead of manually digging through lines of data arrays, I tasked an autonomous AI coding agent to inspect the codebase, diagnose the root cause, and apply a fix. Here is the first-person breakdown of what happened.

---

The Audit: What Was Actually Happening

When a user visits `/tools/thesis-topic-generator`, the page initializes default state hooks:

const [level, setLevel] = useState<ThesisLevel | "All">("All");
const [field, setField] = useState<ThesisField | "All">("All");
const [interest, setInterest] = useState<InterestArea | "All">("All");

With `field === "All"`, the filtering utility logic passed every entry in `THESIS_TOPICS` from `lib/thesis.ts`:

const filteredTopics = useMemo(() => {
  return THESIS_TOPICS.filter((t) => {
    if (level !== "All" && !t.level.includes(level)) return false;
    if (field !== "All" && t.field !== field) return false;
    if (interest !== "All" && t.interestArea !== interest) return false;
    return true;
  });
}, [level, field, interest]);

So why were non-CS students seeing only Computer Science topics?

---

The AI Agent's Diagnosis

The AI agent navigated the codebase, inspected `lib/thesis.ts` and `app/tools/thesis-topic-generator/GeneratorClient.tsx`, and pinpointed two compounding issues:

1. **Array Ordering Bias**: In `lib/thesis.ts`, the `THESIS_TOPICS` array was ordered systematically by field. The first 6 array items were all `field: "Computer Science"` (e.g. ML Crop Disease, E-Commerce for Artisans, Blockchain Remittance, Land Records, Sign Language NLP, Cyber Security).
2. **Naive Slicing Without Initial Sampling**: In `GeneratorClient.tsx`, the UI display memo took a naive top slice when `shuffleSeed` was 0:

// THE BUGGY PATTERN
const displayedTopics = useMemo(() => {
  if (filteredTopics.length <= 5) return filteredTopics;
  const copy = [...filteredTopics];
  // If shuffleSeed === 0 (initial load), no shuffle occurs!
  return copy.slice(0, 5); // Returns indices 0, 1, 2, 3, 4 -> ALL COMPUTER SCIENCE!
}, [filteredTopics, shuffleSeed]);

Because indices 0 through 4 were all Computer Science topics, any visitor keeping default "All Fields" saw zero representation from Engineering, Business, Law, or Education until they manually clicked "Shuffle" or picked a specific filter!

---

The Code Fix Applied by the AI Agent

The AI agent refactored `GeneratorClient.tsx` to ensure balanced multi-field sampling or deterministic pseudo-shuffling across initial loads.

By implementing a deterministic pseudo-shuffle or balanced field distribution algorithm when `shuffleSeed` is initialized, the top 5 results immediately display a diverse mix across Computer Science, Civil Engineering, Business, Law, and Public Health:

// REFACTORED BALANCED SAMPLING IN GENERATORCLIENT.TSX
const displayedTopics = useMemo(() => {

// When viewing "All Fields", sample evenly across distinct academic fields if (field === "All" && shuffleSeed === 0) { const fieldsSeen = new Set<string>(); const balanced: typeof filteredTopics = [];

for (const topic of filteredTopics) { if (!fieldsSeen.has(topic.field)) { fieldsSeen.add(topic.field); balanced.push(topic); } if (balanced.length === 5) break; } if (balanced.length > 0) return balanced; }

// Fallback to deterministic shuffle const copy = [...filteredTopics]; for (let i = copy.length - 1; i > 0; i--) { const j = (i + (shuffleSeed + 1) * 7) % copy.length; [copy[i], copy[j]] = [copy[j], copy[i]]; } return copy.slice(0, 5); }, [filteredTopics, field, shuffleSeed]); ```

---

Key Takeaways

• **Beware of Static Data Ordering**: Array ordering in mock or static data files can introduce subtle bias in UI views if naive `.slice(0, N)` methods are used.
• **AI Agents Excel at Array & Filter Audits**: Giving an AI agent full repository access allows it to trace state flow from data definitions (`lib/thesis.ts`) through filter hooks (`useMemo`) down to component rendering.
• **Always Test Default States**: Unit tests should assert not just filtered states, but also default un-filtered state diversity.

Try the Fixed Live Tool

You can test the updated interactive matcher live on our site: **[Thesis Topic Generator Tool](/tools/thesis-topic-generator)**.