feat: publish surgical code editing blog post and update current work

Release new blog post about surgical editing in AI agents with custom MDX components (TokenComparison, ToolCall). Update Currently Building card to show next post about planning with Haiku. Add AnimatedSection component and improve Mermaid dark mode styling.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

Author: Codestz

mdx-components.tsx

@@ -1,5 +1,13 @@
 import type { MDXComponents } from 'mdx/types';
-import { CodeSnippet, Terminal, Icon, Comparison, FileTree } from '@/components/mdx';
+import {
+  CodeSnippet,
+  Terminal,
+  Icon,
+  Comparison,
+  FileTree,
+  TokenComparison,
+  ToolCall,
+} from '@/components/mdx';
 import { Mermaid } from '@/components/mdx/Mermaid';
 
 /**
@@ -16,6 +24,8 @@ export const mdxComponents: MDXComponents = {
   Icon,
   Comparison,
   FileTree,
+  TokenComparison,
+  ToolCall,
   // Headings
   h1: ({ children }) => (
     <h1 className="mb-4 sm:mb-6 mt-6 sm:mt-8 font-heading text-3xl sm:text-4xl font-bold uppercase text-foreground">

public/images/blog/surgical-editing.png

@@ -1,5 +1,5 @@
 import { ArrowRight, ExternalLink, Github } from 'lucide-react';
-import { Section } from '@/components/sections';
+import { AnimatedSection } from '@/components/sections';
 import { Card, Button, Badge } from '@/components/ui';
 import { contentService } from '@/lib/services';
 import { ROUTES } from '@/lib/constants';
@@ -12,7 +12,8 @@ import { Metadata } from 'next';
  */
 export const metadata: Metadata = generatePageMetadata({
   title: 'Experience',
-  description: 'Professional experience and impactful projects across AI integration, microservices, and full-stack development',
+  description:
+    'Professional experience and impactful projects across AI integration, microservices, and full-stack development',
   path: '/experience',
 });
 
@@ -22,38 +23,23 @@ export default async function ExperiencePage() {
 
   return (
     <main>
-      <Section
+      <AnimatedSection
         title="Experience"
         description="Professional experience and impactful projects across AI integration, microservices, and full-stack development"
       >
         {projects.length > 0 ? (
           <div className="grid gap-4 sm:gap-5 md:gap-6 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
             {projects.map((project) => (
-              <Card
-                key={project.slug}
-                variant="elevated"
-                hoverable
-                as="article"
-              >
+              <Card key={project.slug} variant="elevated" hoverable as="article">
                 <Card.Header>
                   <div className="mb-2 flex flex-wrap gap-2">
-                    {project.current && (
-                      <Badge variant="success">
-                        Current
-                      </Badge>
-                    )}
-                    {project.featured && (
-                      <Badge variant="primary">
-                        Featured
-                      </Badge>
-                    )}
+                    {project.current && <Badge variant="success">Current</Badge>}
+                    {project.featured && <Badge variant="primary">Featured</Badge>}
                   </div>
                   <h2 className="mb-2 font-mono text-xl font-bold text-foreground">
                     {project.title}
                   </h2>
-                  <p className="mb-1 text-sm font-semibold text-primary">
-                    {project.company}
-                  </p>
+                  <p className="mb-1 text-sm font-semibold text-primary">{project.company}</p>
                   <p className="text-xs text-foreground/60">
                     {project.role} · {project.year}
                   </p>
@@ -118,7 +104,7 @@ export default async function ExperiencePage() {
             </p>
           </div>
         )}
-      </Section>
+      </AnimatedSection>
     </main>
   );
 }

src/app/experience/page.tsx

@@ -1,4 +1,4 @@
-import { Section, ExperimentsGrid } from '@/components/sections';
+import { ExperimentsGrid, AnimatedSection } from '@/components/sections';
 import { contentService } from '@/lib/services';
 import { generatePageMetadata } from '@/lib/utils';
 import { Metadata } from 'next';
@@ -9,7 +9,8 @@ import { Metadata } from 'next';
  */
 export const metadata: Metadata = generatePageMetadata({
   title: 'Experiments',
-  description: 'Exploring AI integration, performance optimization, and software architecture through tutorials and experiments',
+  description:
+    'Exploring AI integration, performance optimization, and software architecture through tutorials and experiments',
   path: '/experiments',
 });
 
@@ -19,20 +20,18 @@ export default async function ExperimentsPage() {
 
   return (
     <main>
-      <Section
+      <AnimatedSection
         title="Experiments"
         description="Exploring AI integration, performance optimization, and software architecture through tutorials and experiments"
       >
         {posts.length > 0 ? (
           <ExperimentsGrid posts={posts} />
         ) : (
           <div className="py-12 text-center">
-            <p className="mb-4 text-lg text-foreground/60">
-              No experiments yet. Check back soon!
-            </p>
+            <p className="mb-4 text-lg text-foreground/60">No experiments yet. Check back soon!</p>
           </div>
         )}
-      </Section>
+      </AnimatedSection>
     </main>
   );
 }

src/app/experiments/page.tsx

@@ -10,6 +10,7 @@ import {
 } from '@/components/sections';
 import { contentService } from '@/lib/services';
 import { generatePageMetadata } from '@/lib/utils';
+import { getCurrentWork } from '@/lib/utils/current-work.utils';
 
 /**
  * Static metadata for the home page
@@ -24,6 +25,9 @@ export default async function HomePage() {
   const postsResult = await contentService.getAllPosts();
   const posts = postsResult.success ? Array.from(postsResult.data) : [];
 
+  // Fetch current work data
+  const currentWork = await getCurrentWork();
+
   return (
     <main className="max-w-7xl mx-auto px-4 sm:px-6 md:px-12 pt-6 sm:pt-8">
       {/* Hero Section - Code Garden Branding */}
@@ -46,7 +50,7 @@ export default async function HomePage() {
 
         {/* Currently Building - 25% (1 of 4 columns) */}
         <div className="md:col-span-1 flex">
-          <CurrentlyBuildingCard className="w-full h-full" />
+          <CurrentlyBuildingCard currentWork={currentWork} className="w-full h-full" />
         </div>
       </AnimatedContentGrid>
 

src/app/page.tsx

@@ -5,13 +5,7 @@ import { Check, Copy } from 'lucide-react';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { dracula } from 'react-syntax-highlighter/dist/esm/styles/prism';
 import { cn } from '@/lib/utils';
-
-export interface CodeSnippetProps {
-  children: string;
-  language?: string;
-  title?: string;
-  showLineNumbers?: boolean;
-}
+import type { CodeSnippetProps } from './CodeSnippet.types';
 
 /**
  * CodeSnippet Component

src/components/mdx/CodeSnippet/CodeSnippet.tsx

@@ -161,14 +161,12 @@ export function Mermaid({ chart, className }: MermaidProps) {
             dangerouslySetInnerHTML={{ __html: svg }}
           />
         ) : (
-          <div className="text-center text-foreground/60 py-8 font-mono">
-            Rendering diagram...
-          </div>
+          <div className="text-center text-foreground/60 py-8 font-mono">Rendering diagram...</div>
         )}
       </div>
 
       {/* Instructions */}
-      <div className="absolute bottom-2 left-4 text-xs text-foreground/50 font-mono">
+      <div className="absolute bottom-2 left-4 text-xs text-zinc-500 dark:text-zinc-400 font-mono">
         💡 Drag to pan • Scroll to zoom • Click controls to zoom
       </div>
     </div>