AI as an Exo-Suit: Human-AI Collaboration in Real-World Debugging

The Breakthrough: CSP-Compliant JavaScript

Here’s the original script (which CSP was blocking):

<script define:vars={{ id }}>
  // This uses define:vars, which gets evaluated at build time
  // CSP sees this as potentially unsafe
  const trigger = document.getElementById(`${id}-trigger`);
  const popup = document.getElementById(`${id}-popup`);
  // ... event handlers
</script>

The fix? Don’t use define:vars with string interpolation. Instead, use relative DOM queries that don’t require variable injection:

<script>
  // Find our instance relative to the script tag itself
  // No string interpolation needed
  const wrapper = document.currentScript?.parentElement;
  const trigger = wrapper?.querySelector('[data-popup-trigger]');
  const popup = wrapper?.querySelector('[data-popup]');

  if (!trigger || !popup) return;

  // Position the popup relative to the trigger
  function positionPopup() {
    const triggerRect = trigger.getBoundingClientRect();
    popup.style.top = (triggerRect.bottom + window.scrollY + 10) + 'px';
    popup.style.left = (triggerRect.left + triggerRect.width / 2) + 'px';
    popup.style.transform = 'translateX(-50%)';
  }

  // Position initially and on scroll/resize
  positionPopup();
  window.addEventListener('scroll', positionPopup);
  window.addEventListener('resize', positionPopup);

  // Hover behavior
  trigger.addEventListener('mouseenter', () => {
    popup.classList.add('visible');
  });

  trigger.addEventListener('mouseleave', () => {
    popup.classList.remove('visible');
  });

  // Click fallback for mobile
  trigger.addEventListener('click', () => {
    popup.classList.toggle('visible');
  });

  // Click outside to close
  document.addEventListener('click', (e) => {
    if (!trigger.contains(e.target) && !popup.contains(e.target)) {
      popup.classList.remove('visible');
    }
  });
</script>

Key changes:

1. Use document.currentScript to find the script tag itself
2. Query relative to that script to find trigger and popup
3. Use data attributes instead of IDs with string interpolation
4. No define:vars = no CSP violations

Boom. 💥 It worked.

What Made This Debugging Journey Work

Here’s what I realized: I could have debugged this alone. But it would have taken much longer, and I might have missed the CSP angle entirely. Here’s why the collaboration helped:

What the AI Brought:

• Speed: Rapid iteration and refactoring suggestions
• Breadth: Suggestions across HTML, CSS, and JavaScript
• Pattern Knowledge: Knowing how to avoid CSP violations with document.currentScript

What I Brought:

• Domain Knowledge: Understanding of the business need
• Direction: “Let’s test this specific hypothesis first”
• Intuition: Knowing when something felt wrong (even if I couldn’t articulate why)
• The Breakthrough: Actually spotting the CSP error in dev tools

Together:

• We eliminated red herrings quickly (not z-index, not the position calculation)
• We got to the root cause faster (I was able to resolve the issue in c. 30 min)
• We arrived at a solution that’s not just “working”—it’s right (CSP-compliant, secure, scalable)

The Lesson: Collaboration, Not Replacement

Here’s what blew my mind about this process:

The AI didn’t solve the problem. I didn’t solve the problem alone either.

We solved it together. Each iteration made us smarter about the problem space. Each failure taught us something. The AI suggested paths to explore; I validated whether they mattered. I spotted the breakthrough; the AI knew the pattern to fix it.

This is what “AI as an exo-suit” (AIaaES if you will, 😉) means:

• “Iron Man” isn’t less intelligent with the suit — he’s more capable.
• The suit doesn’t think for him; it amplifies his thinking.
• It handles logistics (refactoring), lets him focus on strategy (debugging approach).
• It suggests possibilities; he evaluates them.

That’s the dynamic that actually works in professional development.

The Real Takeaway

If you’re working with AI in development, remember:

1. You’re Still the Expert - Your domain knowledge, intuition, and judgment are irreplaceable
2. AI is Logistics - It handles refactoring, research, code generation, and rapid iteration
3. Collaboration Beats Both - A human + AI team is faster and smarter than either alone
4. Trust Your Tools - When something doesn’t work, check everything — including security policies you might have forgotten about
5. Document the Journey - The story of how you solved it is often more valuable than the solution itself

Want to Use This Component?

The full Popup.astro component is now live on my site. Here’s how to use it:

---
import Popup from '../components/Popup.astro';
---

<p>
  The concept of <Popup 
    term="Onda" 
    title="Onda — Spanish Slang" 
    description="Means vibe, energy, or mood."
    examples={[
      { phrase: "Buena onda", meaning: "good vibe" },
      { phrase: "Mala onda", meaning: "bad vibe" }
    ]}
  /> is deeply embedded in Latin culture.
</p>

It’s reusable, multiple instances work independently, and—most importantly—it respects your site’s security policies.

What’s Next?

I’m planning more content about the human-AI dynamic in modern development:

• Working effectively with AI code generation
• When to trust AI suggestions (and when to question them)
• Building systems that play to each tool’s strengths

For now, I’m just grateful for the partnership that made this debugging session productive, insightful, and—dare I say—fun.

Because that’s what a good exo-suit does. It makes you better at what you already do well.

Related Reading

• Using AI to Build Faster
• Astro CSP and Inline Handlers
• Fire That Puppy Up: AI Miscommunication
• Content Security Policy — MDN
• GitHub Copilot
• Cross-Site Scripting (XSS) — OWASP