Diffusion Model Article

CLAUDE.md

@@ -267,3 +267,9 @@ export default async function PostPage({ params }) {
 - Guidance on concise `CLAUDE.md` files — see community write-ups like the Apidog "Claude.md" overview for keeping this file focused and high-signal
 
 Keep this document up to date as the source of truth for how this blog is structured and extended.
+
+
+
+# Thoughts:
+
+All thoughs (even in sub-projects) should be in thoughts/shared/ (root), not in the sub projects.

app/blog/[slug]/page.tsx

@@ -67,6 +67,12 @@ export default async function BlogPostPage({ params }: { params: Promise<{ slug:
         );
         return <SaasZeroToOneHindsightContent />;
       }
+      case 'diffusion-deep-research': {
+        const { DiffusionDeepResearchContent } = await import(
+          '@/components/blog-posts/diffusion-deep-research'
+        );
+        return <DiffusionDeepResearchContent />;
+      }
       case 'context-engineering-claude-code': {
         const { ContextEngineeringClaudeCodeContent } = await import(
           '@/components/blog-posts/context-engineering-claude-code'

components/animations/diffusion/diffusion-loop-step.tsx

@@ -0,0 +1,85 @@
+'use client';
+
+import { cn } from '@/lib/utils';
+import { Terminal } from '@/components/custom';
+
+interface DiffusionLoopStepProps {
+  className?: string;
+}
+
+export function DiffusionLoopStep({ className }: DiffusionLoopStepProps) {
+  return (
+    <div
+      className={cn(
+        'prose prose-invert prose-base sm:prose-lg md:prose-xl max-w-none',
+        'prose-headings:text-primary prose-headings:font-bold prose-headings:mt-6 prose-headings:mb-3',
+        'prose-p:text-foreground prose-p:leading-relaxed prose-p:mb-4 prose-ul:text-foreground prose-li:my-1',
+        className,
+      )}
+    >
+      <p className="text-xs uppercase tracking-widest text-secondary">Diffusion Loop</p>
+      <h3>One iteration (practical walkthrough)</h3>
+
+      <h4>Step 1: Generate research questions</h4>
+      <p>
+        Tool: <code>think</code>. Identify draft gaps and propose diverse research questions tied to
+        those gaps.
+      </p>
+      <Terminal className="my-4">
+{`think:
+  reflection: |
+    Missing eval gates for Anthropic; need incidents 2024–2025;
+    compare red-team cadence across labs.`}
+      </Terminal>
+      <p>
+        Expected: 3–5 targeted questions, each mapped to a draft gap with scope/priority notes.
+      </p>
+
+      <h4>Step 2: ConductResearch (parallel)</h4>
+      <p>
+        Tool: <code>ConductResearch</code>. Delegate distinct questions to sub-agents with explicit
+        instructions and expected returns.
+      </p>
+      <Terminal className="my-4">
+{`ConductResearch:
+  research_topic: |
+    Find primary sources on Anthropic Constitutional AI eval gates (2023–2025).
+    Return: URLs, quotes, incident summaries.`}
+      </Terminal>
+      <p>
+        Expected: cited findings (URLs + quotes) per sub-agent, deduped URLs, short summaries.
+      </p>
+
+      <h4>Step 3: refine_draft_report</h4>
+      <p>
+        Tool: <code>refine_draft_report</code>. Fold new findings into the draft; keep structure
+        concise to conserve context.
+      </p>
+      <Terminal className="my-4">
+{`refine_draft_report:
+  research_brief: "<brief>"
+  findings: "<citations + quotes>"
+  draft_report: "<current draft>"`}
+      </Terminal>
+      <p>
+        Expected: draft updated with citations/quotes; bullets or short paragraphs retained for clarity and
+        context efficiency.
+      </p>
+
+      <h4>Step 4: Assess completeness</h4>
+      <p>
+        Heuristic: diverse new searches should stop yielding new facts. If not, loop again.
+      </p>
+      <Terminal className="my-4">
+{`Checklist:
+- New queries tried? (global + section-specific)
+- Any new sources or facts? If yes, continue loop
+- If no, call ResearchComplete`}
+      </Terminal>
+      <p>
+        Expected: a clear decision to continue or call <code>ResearchComplete</code>, with rationale noted.
+      </p>
+    </div>
+  );
+}
+

components/animations/diffusion/diffusion-overview.tsx

@@ -0,0 +1,163 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+import { motion, useInView } from 'framer-motion';
+import { cn } from '@/lib/utils';
+import { FileText, FilePenLine, Repeat2, FileCheck2, type LucideIcon } from 'lucide-react';
+
+interface DiffusionOverviewProps {
+  className?: string;
+}
+
+const diffusionLoopStages = [
+  'Identify Gaps → ask research questions',
+  'Conduct Research in parallel + citations',
+  'Refine Draft Report → assess completeness',
+];
+
+// Per-phase dwell times (ms): brief, initial draft, diffusion loop (slower), final report (faster)
+const phaseDurations = [3200, 3200, 8000, 2400];
+const loopStageDuration = 2500; // slower so all three loop stages are visible
+
+const phases: { label: string; icon: LucideIcon; text: string; isLoop?: boolean }[] = [
+  {
+    label: 'Brief Generation',
+    icon: FileText,
+    text: 'Expands the user query into a structured research brief with sources, constraints, and scope.',
+  },
+  {
+    label: 'Initial Draft',
+    icon: FilePenLine,
+    text: 'Creates a noisy draft from model knowledge only—no external facts yet, just structure and placeholders.',
+  },
+  {
+    label: 'Diffusion Loop',
+    icon: Repeat2,
+    text: diffusionLoopStages[0],
+    isLoop: true,
+  },
+  {
+    label: 'Final Report',
+    icon: FileCheck2,
+    text: 'Apply Insightfulness + Helpfulness rules, clean citations, and finalize into a benchmark-ready report.',
+  },
+];
+
+export function DiffusionOverview({ className }: DiffusionOverviewProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const isInView = useInView(ref, { margin: '-20% 0px -20% 0px', amount: 0.3 });
+  const [index, setIndex] = useState(0);
+  const [isPlaying, setIsPlaying] = useState(true);
+  const [charIndex, setCharIndex] = useState(0);
+  const [loopStep, setLoopStep] = useState(0);
+
+  // Phase advance with custom dwell times per phase
+  useEffect(() => {
+    if (!isInView || !isPlaying) return;
+    const duration = phaseDurations[index] ?? 3200;
+    const id = setTimeout(() => {
+      setIndex((prev) => (prev + 1) % phases.length);
+      setCharIndex(0);
+      setLoopStep(0);
+    }, duration);
+    return () => clearTimeout(id);
+  }, [isInView, isPlaying, index]);
+
+  // Loop sub-steps advance slower than phase change so all three are visible
+  useEffect(() => {
+    if (!isInView || !isPlaying) return;
+    // only run loop sub-steps when on diffusion loop phase
+    if (!phases[index]?.isLoop) {
+      setLoopStep(0);
+      return;
+    }
+    const id = setInterval(() => {
+      setLoopStep((prev) => {
+        const next = (prev + 1) % diffusionLoopStages.length;
+        setCharIndex(0);
+        return next;
+      });
+    }, loopStageDuration);
+    return () => clearInterval(id);
+  }, [isInView, isPlaying, index]);
+
+  useEffect(() => {
+    if (!isPlaying) return;
+    const active = phases[index];
+    const activeText = active.isLoop ? diffusionLoopStages[loopStep] : active.text;
+    const id = setInterval(() => {
+      setCharIndex((p) => (p >= activeText.length ? activeText.length : p + 3));
+    }, 35);
+    return () => clearInterval(id);
+  }, [index, loopStep, isPlaying]);
+
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        'w-full rounded-2xl border border-border/60 bg-muted/30 p-6 md:p-8 shadow-lg',
+        className,
+      )}
+    >
+      <div className="flex items-center justify-between mb-4">
+        <div>
+          <p className="text-xs uppercase tracking-widest text-secondary">Diffusion Overview</p>
+          <h3 className="text-lg font-semibold">4-phase pipeline</h3>
+        </div>
+        <button
+          type="button"
+          onClick={() => setIsPlaying((p) => !p)}
+          className="text-sm text-secondary hover:text-primary"
+        >
+          {isPlaying ? 'Pause' : 'Play'}
+        </button>
+      </div>
+
+      <div className="grid grid-cols-1 gap-3 md:grid-cols-4">
+        {phases.map(({ label, icon: Icon, text, isLoop }, i) => {
+          const active = i === index;
+          const content = isLoop ? diffusionLoopStages[loopStep] : text;
+          const streamed =
+            active && charIndex > 0
+              ? content.slice(0, charIndex)
+              : content.slice(0, 100) + (content.length > 100 ? '…' : '');
+          return (
+            <motion.div
+              key={label}
+              initial={{ opacity: 0.4, scale: 0.98 }}
+              animate={{ opacity: active ? 1 : 0.5, scale: active ? 1.02 : 0.98 }}
+              transition={{ duration: 0.4 }}
+              className={cn(
+                'rounded-xl border border-border/70 bg-background/70 p-4 text-sm h-full flex flex-col gap-2 min-h-[220px] max-h-[220px]',
+                active && 'border-primary/80 shadow-primary/30 shadow-lg',
+              )}
+            >
+              <div className="flex items-center gap-2 font-semibold">
+                <Icon className={cn('h-5 w-5', active ? 'text-primary' : 'text-muted-foreground')} />
+                <span>{label}</span>
+              </div>
+              <div
+                className={cn(
+                  'text-left text-muted-foreground leading-snug transition-colors min-h-[64px]',
+                  active && 'text-foreground',
+                )}
+              >
+                {streamed}
+                {active && charIndex < text.length && <span className="animate-pulse">▌</span>}
+              </div>
+            </motion.div>
+          );
+        })}
+      </div>
+
+      <motion.div
+        className="mt-6 h-2 rounded-full bg-border/60 overflow-hidden"
+        initial={{ width: '0%' }}
+        animate={{ width: `${((index + 1) / phases.length) * 100}%` }}
+        transition={{ duration: 0.6 }}
+      >
+        <span className="sr-only">progress</span>
+      </motion.div>
+    </div>
+  );
+}