Merge pull request #1 from cooperbench/faq_section

Faq section

Author: ProKil

src/components/FAQ.astro

@@ -0,0 +1,11 @@
+---
+export interface Props {
+    className?: string;
+}
+
+const { className = "" } = Astro.props;
+---
+
+<div class={`space-y-3 mb-8 not-prose ${className}`}>
+    <slot />
+</div>

src/components/FAQItem.astro

@@ -0,0 +1,45 @@
+---
+export interface Props {
+  question: string;
+  icon?: 'wrench' | 'chart' | 'sparkles';
+  defaultOpen?: boolean;
+}
+
+const { question, icon, defaultOpen = false } = Astro.props;
+
+const icons = {
+  wrench: `<svg class="w-5 h-5 text-stone-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M11.42 15.17L17.25 21A2.652 2.652 0 0021 17.25l-5.877-5.877M11.42 15.17l2.496-3.03c.317-.384.74-.626 1.208-.766M11.42 15.17l-4.655 5.653a2.548 2.548 0 11-3.586-3.586l6.837-5.63m5.108-.233c.55-.164 1.163-.188 1.743-.14a4.5 4.5 0 004.486-6.336l-3.276 3.277a3.004 3.004 0 01-2.25-2.25l3.276-3.276a4.5 4.5 0 00-6.336 4.486c.091 1.076-.071 2.264-.904 2.95l-.102.085m-1.745 1.437L5.909 7.5H4.5L2.25 3.75l1.5-1.5L7.5 4.5v1.409l4.26 4.26m-1.745 1.437l1.745-1.437m6.615 8.206L15.75 15.75M4.867 19.125h.008v.008h-.008v-.008z" /></svg>`,
+  chart: `<svg class="w-5 h-5 text-stone-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3.75 3v11.25A2.25 2.25 0 006 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0118 16.5h-2.25m-7.5 0h7.5m-7.5 0l-1 3m8.5-3l1 3m0 0l.5 1.5m-.5-1.5h-9.5m0 0l-.5 1.5m.75-9l3-3 2.148 2.148A12.061 12.061 0 0116.5 7.605" /></svg>`,
+  sparkles: `<svg class="w-5 h-5 text-stone-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456zM16.894 20.567L16.5 21.75l-.394-1.183a2.25 2.25 0 00-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 001.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 001.423 1.423l1.183.394-1.183.394a2.25 2.25 0 00-1.423 1.423z" /></svg>`
+};
+---
+
+<details class="group bg-stone-100 rounded-2xl overflow-hidden border border-stone-200" open={defaultOpen}>
+  <summary class="flex items-center gap-4 p-5 cursor-pointer hover:bg-stone-150 transition-colors">
+    <svg
+      class="w-4 h-4 text-stone-400 group-open:rotate-90 transition-transform flex-shrink-0"
+      fill="currentColor"
+      viewBox="0 0 20 20"
+    >
+      <path
+        fill-rule="evenodd"
+        d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
+        clip-rule="evenodd"
+      />
+    </svg>
+    {icon && <Fragment set:html={icons[icon]} />}
+    <span class="font-semibold text-stone-900">{question}</span>
+  </summary>
+  <div class="px-5 pb-5 pl-14 text-stone-600 [&>p]:mb-3 [&>p:last-child]:mb-0">
+    <slot />
+  </div>
+</details>
+
+<style>
+  summary {
+    list-style: none;
+  }
+  summary::-webkit-details-marker {
+    display: none;
+  }
+</style>

src/content/blog/curse-of-coordination.mdx

@@ -9,6 +9,9 @@ authors:
     image: "/static/images/hao_zhu.png"
 ---
 
+import FAQ from '../../components/FAQ.astro';
+import FAQItem from '../../components/FAQItem.astro';
+
 {/* TL;DR */}
 <div className="mb-10 not-prose py-6 px-6 bg-blue-50 rounded-xl">
     <p className="text-xs font-semibold text-blue-900 uppercase tracking-wider mb-3">
@@ -219,3 +222,20 @@ And that's what makes us hopeful. These emergent coordination behaviors give us
 Even better, CooperBench isn't just a dataset. It's a live environment. You can drop models in, pair them up, and let them learn to work together through trial and error. The same tasks that expose failures today can be the training ground that fixes them.
 
 The bottleneck for multi-agent systems isn't raw ability. It's social intelligence. But social intelligence can be taught. And now we have a place to teach it.
+
+## FAQ
+
+<FAQ>
+    <FAQItem question="Wouldn't better orchestration solve this?" icon="wrench">
+        <p>CooperBench is a general evaluation benchmark for evaluating agent cooperation when they each have an individual task.</p>
+        <p>We can definitely see how clever orchestration techniques can help agent perform better on CooperBench. If you are interested in submitting to our benchmark, let us know.</p>
+        <p>However, our bet is in the long run, agents' native ability to coordinate will be more important than any external scaffolding. Scaffolding requires human architects to design the right structures for each new domain. Native ability lets agents figure it out themselves.</p>
+        <p>We are happy to be proven wrong though!</p>
+    </FAQItem>
+
+    <FAQItem question="Can this actually be improved?" icon="sparkles">
+        <p>We think so. In successful traces, agents spontaneously developed coordination strategies: dividing roles, claiming resources, negotiating before acting. These behaviors emerged without prompting.</p>
+        <p>What's missing is reliability. Effective coordination requires <em>theory of mind</em>: tracking what your partner knows, believes, and intends. Current models struggle to maintain these partner models across extended interactions.</p>
+        <p>CooperBench provides hundreds of examples where coordination succeeds and fails. That's a training signal for the pragmatic and social reasoning that collaboration requires.</p>
+    </FAQItem>
+</FAQ>

src/layouts/BlogPostLayout.astro

@@ -55,7 +55,7 @@ const { frontmatter, headings } = Astro.props;
             <TableOfContents headings={headings} />
 
             <!-- Article Body -->
-            <div class="prose prose-lg max-w-none">
+            <div class="max-w-none blog-content">
                 <slot />
             </div>
 
@@ -126,6 +126,87 @@ const { frontmatter, headings } = Astro.props;
     </main>
 </BaseLayout>
 
+<style is:global>
+    .blog-content {
+        font-size: 1rem;
+        line-height: 1.8;
+        color: #4b5563;
+    }
+    
+    .blog-content h2 {
+        font-size: 1.75rem;
+        font-weight: 700;
+        color: #111827;
+        margin-top: 2.5rem;
+        margin-bottom: 1rem;
+        line-height: 1.3;
+        letter-spacing: -0.025em;
+    }
+    
+    .blog-content h3 {
+        font-size: 1.25rem;
+        font-weight: 600;
+        color: #1f2937;
+        margin-top: 2rem;
+        margin-bottom: 0.75rem;
+        line-height: 1.4;
+    }
+    
+    .blog-content h4 {
+        font-size: 1.0625rem;
+        font-weight: 600;
+        color: #374151;
+        margin-top: 1.5rem;
+        margin-bottom: 0.5rem;
+    }
+    
+    .blog-content p {
+        margin-bottom: 1.25rem;
+    }
+    
+    .blog-content strong {
+        color: #1f2937;
+        font-weight: 600;
+    }
+    
+    .blog-content em {
+        color: #374151;
+    }
+    
+    .blog-content figcaption {
+        font-size: 0.8125rem;
+        color: #6b7280;
+        margin-top: 0.75rem;
+    }
+    
+    .blog-content blockquote {
+        font-size: 0.9375rem;
+        border-left: 3px solid #d1d5db;
+        padding-left: 1rem;
+        color: #6b7280;
+        font-style: normal;
+    }
+    
+    .blog-content ul, .blog-content ol {
+        margin-top: 0.75rem;
+        margin-bottom: 1.25rem;
+    }
+    
+    .blog-content li {
+        margin-bottom: 0.375rem;
+    }
+    
+    .blog-content a {
+        color: #2563eb;
+        text-decoration: underline;
+        text-underline-offset: 2px;
+    }
+    
+    .blog-content a:hover {
+        color: #1d4ed8;
+    }
+</style>
+
 <script>
     const scrollBtn = document.querySelector(".scroll-to-top");
     if (scrollBtn) {