updated componnet

- Simplified blog title from "Introducing Sim Studio v0.5" to "Introducing Sim v0.5"
- Removed language label header and copy button from code blocks for cleaner appearance

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

apps/sim/app/(landing)/studio/[slug]/back-link.tsx

@@ -0,0 +1,27 @@
+'use client'
+
+import { useState } from 'react'
+import { ArrowLeft, ChevronLeft } from 'lucide-react'
+import Link from 'next/link'
+
+export function BackLink() {
+  const [isHovered, setIsHovered] = useState(false)
+
+  return (
+    <Link
+      href='/studio'
+      className='group flex items-center gap-1 text-gray-600 text-sm hover:text-gray-900'
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+    >
+      <span className='group-hover:-translate-x-0.5 inline-flex transition-transform duration-200'>
+        {isHovered ? (
+          <ArrowLeft className='h-4 w-4' aria-hidden='true' />
+        ) : (
+          <ChevronLeft className='h-4 w-4' aria-hidden='true' />
+        )}
+      </span>
+      Back to Sim Studio
+    </Link>
+  )
+}

apps/sim/app/(landing)/studio/[slug]/page.tsx

@@ -5,7 +5,10 @@ import { Avatar, AvatarFallback, AvatarImage } from '@/components/emcn'
 import { FAQ } from '@/lib/blog/faq'
 import { getAllPostMeta, getPostBySlug, getRelatedPosts } from '@/lib/blog/registry'
 import { buildArticleJsonLd, buildBreadcrumbJsonLd, buildPostMetadata } from '@/lib/blog/seo'
+import { getBaseUrl } from '@/lib/core/utils/urls'
 import { soehne } from '@/app/_styles/fonts/soehne/soehne'
+import { BackLink } from '@/app/(landing)/studio/[slug]/back-link'
+import { ShareButton } from '@/app/(landing)/studio/[slug]/share-button'
 
 export async function generateStaticParams() {
   const posts = await getAllPostMeta()
@@ -48,9 +51,7 @@ export default async function Page({ params }: { params: Promise<{ slug: string
       />
       <header className='mx-auto max-w-[1450px] px-6 pt-8 sm:px-8 sm:pt-12 md:px-12 md:pt-16'>
         <div className='mb-6'>
-          <Link href='/studio' className='text-gray-600 text-sm hover:text-gray-900'>
-            ← Back to Sim Studio
-          </Link>
+          <BackLink />
         </div>
         <div className='flex flex-col gap-8 md:flex-row md:gap-12'>
           <div className='w-full flex-shrink-0 md:w-[450px]'>
@@ -75,28 +76,31 @@ export default async function Page({ params }: { params: Promise<{ slug: string
             >
               {post.title}
             </h1>
-            <div className='mt-4 flex items-center gap-3'>
-              {(post.authors || [post.author]).map((a, idx) => (
-                <div key={idx} className='flex items-center gap-2'>
-                  {a?.avatarUrl ? (
-                    <Avatar className='size-6'>
-                      <AvatarImage src={a.avatarUrl} alt={a.name} />
-                      <AvatarFallback>{a.name.slice(0, 2)}</AvatarFallback>
-                    </Avatar>
-                  ) : null}
-                  <Link
-                    href={a?.url || '#'}
-                    target='_blank'
-                    rel='noopener noreferrer author'
-                    className='text-[14px] text-gray-600 leading-[1.5] hover:text-gray-900 sm:text-[16px]'
-                    itemProp='author'
-                    itemScope
-                    itemType='https://schema.org/Person'
-                  >
-                    <span itemProp='name'>{a?.name}</span>
-                  </Link>
-                </div>
-              ))}
+            <div className='mt-4 flex items-center justify-between'>
+              <div className='flex items-center gap-3'>
+                {(post.authors || [post.author]).map((a, idx) => (
+                  <div key={idx} className='flex items-center gap-2'>
+                    {a?.avatarUrl ? (
+                      <Avatar className='size-6'>
+                        <AvatarImage src={a.avatarUrl} alt={a.name} />
+                        <AvatarFallback>{a.name.slice(0, 2)}</AvatarFallback>
+                      </Avatar>
+                    ) : null}
+                    <Link
+                      href={a?.url || '#'}
+                      target='_blank'
+                      rel='noopener noreferrer author'
+                      className='text-[14px] text-gray-600 leading-[1.5] hover:text-gray-900 sm:text-[16px]'
+                      itemProp='author'
+                      itemScope
+                      itemType='https://schema.org/Person'
+                    >
+                      <span itemProp='name'>{a?.name}</span>
+                    </Link>
+                  </div>
+                ))}
+              </div>
+              <ShareButton url={`${getBaseUrl()}/studio/${slug}`} title={post.title} />
             </div>
           </div>
         </div>

apps/sim/app/(landing)/studio/[slug]/share-button.tsx

@@ -0,0 +1,65 @@
+'use client'
+
+import { useState } from 'react'
+import { Share2 } from 'lucide-react'
+import { Popover, PopoverContent, PopoverItem, PopoverTrigger } from '@/components/emcn'
+
+interface ShareButtonProps {
+  url: string
+  title: string
+}
+
+export function ShareButton({ url, title }: ShareButtonProps) {
+  const [open, setOpen] = useState(false)
+  const [copied, setCopied] = useState(false)
+
+  const handleCopyLink = async () => {
+    try {
+      await navigator.clipboard.writeText(url)
+      setCopied(true)
+      setTimeout(() => {
+        setCopied(false)
+        setOpen(false)
+      }, 1000)
+    } catch {
+      setOpen(false)
+    }
+  }
+
+  const handleShareTwitter = () => {
+    const tweetUrl = `https://twitter.com/intent/tweet?url=${encodeURIComponent(url)}&text=${encodeURIComponent(title)}`
+    window.open(tweetUrl, '_blank', 'noopener,noreferrer')
+    setOpen(false)
+  }
+
+  const handleShareLinkedIn = () => {
+    const linkedInUrl = `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(url)}`
+    window.open(linkedInUrl, '_blank', 'noopener,noreferrer')
+    setOpen(false)
+  }
+
+  return (
+    <Popover
+      open={open}
+      onOpenChange={setOpen}
+      variant='secondary'
+      size='sm'
+      colorScheme='inverted'
+    >
+      <PopoverTrigger asChild>
+        <button
+          className='flex items-center gap-1.5 text-gray-600 text-sm hover:text-gray-900'
+          aria-label='Share this post'
+        >
+          <Share2 className='h-4 w-4' />
+          <span>Share</span>
+        </button>
+      </PopoverTrigger>
+      <PopoverContent align='end' minWidth={140}>
+        <PopoverItem onClick={handleCopyLink}>{copied ? 'Copied!' : 'Copy link'}</PopoverItem>
+        <PopoverItem onClick={handleShareTwitter}>Share on X</PopoverItem>
+        <PopoverItem onClick={handleShareLinkedIn}>Share on LinkedIn</PopoverItem>
+      </PopoverContent>
+    </Popover>
+  )
+}

apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/trace-spans/trace-spans.tsx

@@ -2,7 +2,8 @@
 
 import type React from 'react'
 import { memo, useCallback, useMemo, useRef, useState } from 'react'
-import { ArrowDown, ArrowUp, Check, Clipboard, Search, X } from 'lucide-react'
+import clsx from 'clsx'
+import { ArrowDown, ArrowUp, X } from 'lucide-react'
 import { createPortal } from 'react-dom'
 import {
   Button,
@@ -14,7 +15,6 @@ import {
   PopoverContent,
   PopoverDivider,
   PopoverItem,
-  Tooltip,
 } from '@/components/emcn'
 import { WorkflowIcon } from '@/components/icons'
 import { cn } from '@/lib/core/utils/cn'
@@ -27,6 +27,7 @@ import type { TraceSpan } from '@/stores/logs/filters/types'
 
 interface TraceSpansProps {
   traceSpans?: TraceSpan[]
+  totalDuration?: number
 }
 
 /**
@@ -100,20 +101,6 @@ function parseTime(value?: string | number | null): number {
   return Number.isFinite(ms) ? ms : 0
 }
 
-/**
- * Checks if a span or any of its descendants has an error
- */
-function hasErrorInTree(span: TraceSpan): boolean {
-  if (span.status === 'error') return true
-  if (span.children && span.children.length > 0) {
-    return span.children.some((child) => hasErrorInTree(child))
-  }
-  if (span.toolCalls && span.toolCalls.length > 0) {
-    return span.toolCalls.some((tc) => tc.error)
-  }
-  return false
-}
-
 /**
  * Normalizes and sorts trace spans recursively.
  * Merges children from both span.children and span.output.childTraceSpans,
@@ -236,7 +223,7 @@ function ProgressBar({
   }, [span, childSpans, workflowStartTime, totalDuration])
 
   return (
-    <div className='relative h-[5px] w-full overflow-hidden rounded-[18px] bg-[var(--divider)]'>
+    <div className='relative mb-[8px] h-[5px] w-full overflow-hidden rounded-[18px] bg-[var(--divider)]'>
       {segments.map((segment, index) => (
         <div
           key={index}
@@ -252,6 +239,143 @@ function ProgressBar({
   )
 }
 
+interface ExpandableRowHeaderProps {
+  name: string
+  duration: number
+  isError: boolean
+  isExpanded: boolean
+  hasChildren: boolean
+  showIcon: boolean
+  icon: React.ComponentType<{ className?: string }> | null
+  bgColor: string
+  onToggle: () => void
+}
+
+/**
+ * Reusable expandable row header with chevron, icon, name, and duration
+ */
+function ExpandableRowHeader({
+  name,
+  duration,
+  isError,
+  isExpanded,
+  hasChildren,
+  showIcon,
+  icon: Icon,
+  bgColor,
+  onToggle,
+}: ExpandableRowHeaderProps) {
+  return (
+    <div
+      className={clsx('group flex items-center justify-between', hasChildren && 'cursor-pointer')}
+      onClick={hasChildren ? onToggle : undefined}
+      onKeyDown={
+        hasChildren
+          ? (e) => {
+              if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault()
+                onToggle()
+              }
+            }
+          : undefined
+      }
+      role={hasChildren ? 'button' : undefined}
+      tabIndex={hasChildren ? 0 : undefined}
+      aria-expanded={hasChildren ? isExpanded : undefined}
+      aria-label={hasChildren ? (isExpanded ? 'Collapse' : 'Expand') : undefined}
+    >
+      <div className='flex items-center gap-[8px]'>
+        {hasChildren && (
+          <ChevronDown
+            className='h-[10px] w-[10px] flex-shrink-0 text-[var(--text-tertiary)] transition-transform duration-100 group-hover:text-[var(--text-primary)]'
+            style={{ transform: isExpanded ? 'rotate(0deg)' : 'rotate(-90deg)' }}
+          />
+        )}
+        {showIcon && (
+          <div
+            className='relative flex h-[14px] w-[14px] flex-shrink-0 items-center justify-center overflow-hidden rounded-[4px]'
+            style={{ background: bgColor }}
+          >
+            {Icon && <Icon className={clsx('text-white', '!h-[9px] !w-[9px]')} />}
+          </div>
+        )}
+        <span
+          className='font-medium text-[12px]'
+          style={{ color: isError ? 'var(--text-error)' : 'var(--text-secondary)' }}
+        >
+          {name}
+        </span>
+      </div>
+      <span className='font-medium text-[12px] text-[var(--text-tertiary)]'>
+        {formatDuration(duration, { precision: 2 })}
+      </span>
+    </div>
+  )
+}
+
+interface SpanContentProps {
+  span: TraceSpan
+  spanId: string
+  isError: boolean
+  workflowStartTime: number
+  totalDuration: number
+  expandedSections: Set<string>
+  onToggle: (section: string) => void
+}
+
+/**
+ * Reusable component for rendering span content (progress bar + input/output sections)
+ */
+function SpanContent({
+  span,
+  spanId,
+  isError,
+  workflowStartTime,
+  totalDuration,
+  expandedSections,
+  onToggle,
+}: SpanContentProps) {
+  const hasInput = Boolean(span.input)
+  const hasOutput = Boolean(span.output)
+
+  return (
+    <>
+      <ProgressBar
+        span={span}
+        childSpans={span.children}
+        workflowStartTime={workflowStartTime}
+        totalDuration={totalDuration}
+      />
+
+      {hasInput && (
+        <InputOutputSection
+          label='Input'
+          data={span.input}
+          isError={false}
+          spanId={spanId}
+          sectionType='input'
+          expandedSections={expandedSections}
+          onToggle={onToggle}
+        />
+      )}
+
+      {hasInput && hasOutput && <div className='border-[var(--border)] border-t border-dashed' />}
+
+      {hasOutput && (
+        <InputOutputSection
+          label={isError ? 'Error' : 'Output'}
+          data={span.output}
+          isError={isError}
+          spanId={spanId}
+          sectionType='output'
+          expandedSections={expandedSections}
+          onToggle={onToggle}
+        />
+      )}
+    </>
+  )
+}
+
 /**
  * Renders input/output section with collapsible content, context menu, and search
  */
@@ -275,14 +399,16 @@ function InputOutputSection({
   const sectionKey = `${spanId}-${sectionType}`
   const isExpanded = expandedSections.has(sectionKey)
   const contentRef = useRef<HTMLDivElement>(null)
+  const menuRef = useRef<HTMLDivElement>(null)
 
   // Context menu state
   const [isContextMenuOpen, setIsContextMenuOpen] = useState(false)
   const [contextMenuPosition, setContextMenuPosition] = useState({ x: 0, y: 0 })
-  const [copied, setCopied] = useState(false)
 
   // Code viewer features
   const {
+    wrapText,
+    toggleWrapText,
     isSearchActive,
     searchQuery,
     setSearchQuery,
@@ -314,8 +440,6 @@ function InputOutputSection({
 
   const handleCopy = useCallback(() => {
     navigator.clipboard.writeText(jsonString)
-    setCopied(true)
-    setTimeout(() => setCopied(false), 1500)
     closeContextMenu()
   }, [jsonString, closeContextMenu])
 
@@ -324,8 +448,13 @@ function InputOutputSection({
     closeContextMenu()
   }, [activateSearch, closeContextMenu])
 
+  const handleToggleWrap = useCallback(() => {
+    toggleWrapText()
+    closeContextMenu()
+  }, [toggleWrapText, closeContextMenu])
+
   return (
-    <div className='relative flex min-w-0 flex-col gap-[6px] overflow-hidden'>
+    <div className='relative flex min-w-0 flex-col gap-[8px] overflow-hidden'>
       <div
         className='group flex cursor-pointer items-center justify-between'
         onClick={() => onToggle(sectionKey)}
@@ -341,7 +470,7 @@ function InputOutputSection({
         aria-label={`${isExpanded ? 'Collapse' : 'Expand'} ${label.toLowerCase()}`}
       >
         <span
-          className={cn(
+          className={clsx(
             'font-medium text-[12px] transition-colors',
             isError
               ? 'text-[var(--text-error)]'
@@ -351,7 +480,9 @@ function InputOutputSection({
           {label}
         </span>
         <ChevronDown
-          className='h-[8px] w-[8px] text-[var(--text-tertiary)] transition-colors transition-transform group-hover:text-[var(--text-primary)]'
+          className={clsx(
+            'h-[10px] w-[10px] text-[var(--text-tertiary)] transition-colors transition-transform group-hover:text-[var(--text-primary)]'
+          )}
           style={{
             transform: isExpanded ? 'rotate(180deg)' : 'rotate(0deg)',
           }}
@@ -359,57 +490,16 @@ function InputOutputSection({
       </div>
       {isExpanded && (
         <>
-          <div ref={contentRef} onContextMenu={handleContextMenu} className='relative'>
+          <div ref={contentRef} onContextMenu={handleContextMenu}>
             <Code.Viewer
               code={jsonString}
               language='json'
-              className='!bg-[var(--surface-4)] dark:!bg-[var(--surface-3)] max-h-[300px] min-h-0 max-w-full rounded-[6px] border-0 [word-break:break-all]'
-              wrapText
+              className='!bg-[var(--surface-3)] max-h-[300px] min-h-0 max-w-full rounded-[6px] border-0 [word-break:break-all]'
+              wrapText={wrapText}
               searchQuery={isSearchActive ? searchQuery : undefined}
               currentMatchIndex={currentMatchIndex}
               onMatchCountChange={handleMatchCountChange}
             />
-            {/* Glass action buttons overlay */}
-            {!isSearchActive && (
-              <div className='absolute top-[7px] right-[6px] z-10 flex gap-[4px]'>
-                <Tooltip.Root>
-                  <Tooltip.Trigger asChild>
-                    <Button
-                      type='button'
-                      variant='default'
-                      onClick={(e) => {
-                        e.stopPropagation()
-                        handleCopy()
-                      }}
-                      className='h-[20px] w-[20px] cursor-pointer border border-[var(--border-1)] bg-transparent p-0 backdrop-blur-sm hover:bg-[var(--surface-3)]'
-                    >
-                      {copied ? (
-                        <Check className='h-[10px] w-[10px] text-[var(--text-success)]' />
-                      ) : (
-                        <Clipboard className='h-[10px] w-[10px]' />
-                      )}
-                    </Button>
-                  </Tooltip.Trigger>
-                  <Tooltip.Content side='top'>{copied ? 'Copied' : 'Copy'}</Tooltip.Content>
-                </Tooltip.Root>
-                <Tooltip.Root>
-                  <Tooltip.Trigger asChild>
-                    <Button
-                      type='button'
-                      variant='default'
-                      onClick={(e) => {
-                        e.stopPropagation()
-                        activateSearch()
-                      }}
-                      className='h-[20px] w-[20px] cursor-pointer border border-[var(--border-1)] bg-transparent p-0 backdrop-blur-sm hover:bg-[var(--surface-3)]'
-                    >
-                      <Search className='h-[10px] w-[10px]' />
-                    </Button>
-                  </Tooltip.Trigger>
-                  <Tooltip.Content side='top'>Search</Tooltip.Content>
-                </Tooltip.Root>
-              </div>
-            )}
           </div>
 
           {/* Search Overlay */}
@@ -482,10 +572,13 @@ function InputOutputSection({
                     height: '1px',
                   }}
                 />
-                <PopoverContent align='start' side='bottom' sideOffset={4}>
+                <PopoverContent ref={menuRef} align='start' side='bottom' sideOffset={4}>
                   <PopoverItem onClick={handleCopy}>Copy</PopoverItem>
                   <PopoverDivider />
                   <PopoverItem onClick={handleSearch}>Search</PopoverItem>
+                  <PopoverItem showCheck={wrapText} onClick={handleToggleWrap}>
+                    Wrap Text
+                  </PopoverItem>
                 </PopoverContent>
               </Popover>,
               document.body
@@ -496,229 +589,355 @@ function InputOutputSection({
   )
 }
 
-interface TraceSpanNodeProps {
+interface NestedBlockItemProps {
   span: TraceSpan
+  parentId: string
+  index: number
+  expandedSections: Set<string>
+  onToggle: (section: string) => void
   workflowStartTime: number
   totalDuration: number
-  depth: number
-  expandedNodes: Set<string>
-  expandedSections: Set<string>
-  onToggleNode: (nodeId: string) => void
-  onToggleSection: (section: string) => void
+  expandedChildren: Set<string>
+  onToggleChildren: (spanId: string) => void
 }
 
 /**
- * Recursive tree node component for rendering trace spans
+ * Recursive component for rendering nested blocks at any depth
  */
-const TraceSpanNode = memo(function TraceSpanNode({
+function NestedBlockItem({
   span,
+  parentId,
+  index,
+  expandedSections,
+  onToggle,
   workflowStartTime,
   totalDuration,
-  depth,
-  expandedNodes,
-  expandedSections,
-  onToggleNode,
-  onToggleSection,
-}: TraceSpanNodeProps): React.ReactNode {
+  expandedChildren,
+  onToggleChildren,
+}: NestedBlockItemProps): React.ReactNode {
+  const spanId = span.id || `${parentId}-nested-${index}`
+  const isError = span.status === 'error'
+  const { icon: SpanIcon, bgColor } = getBlockIconAndColor(span.type, span.name)
+  const hasChildren = Boolean(span.children && span.children.length > 0)
+  const isChildrenExpanded = expandedChildren.has(spanId)
+
+  return (
+    <div className='flex min-w-0 flex-col gap-[8px] overflow-hidden'>
+      <ExpandableRowHeader
+        name={span.name}
+        duration={span.duration || 0}
+        isError={isError}
+        isExpanded={isChildrenExpanded}
+        hasChildren={hasChildren}
+        showIcon={!isIterationType(span.type)}
+        icon={SpanIcon}
+        bgColor={bgColor}
+        onToggle={() => onToggleChildren(spanId)}
+      />
+
+      <SpanContent
+        span={span}
+        spanId={spanId}
+        isError={isError}
+        workflowStartTime={workflowStartTime}
+        totalDuration={totalDuration}
+        expandedSections={expandedSections}
+        onToggle={onToggle}
+      />
+
+      {/* Nested children */}
+      {hasChildren && isChildrenExpanded && (
+        <div className='mt-[2px] flex min-w-0 flex-col gap-[10px] overflow-hidden border-[var(--border)] border-l pl-[10px]'>
+          {span.children!.map((child, childIndex) => (
+            <NestedBlockItem
+              key={child.id || `${spanId}-child-${childIndex}`}
+              span={child}
+              parentId={spanId}
+              index={childIndex}
+              expandedSections={expandedSections}
+              onToggle={onToggle}
+              workflowStartTime={workflowStartTime}
+              totalDuration={totalDuration}
+              expandedChildren={expandedChildren}
+              onToggleChildren={onToggleChildren}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+interface TraceSpanItemProps {
+  span: TraceSpan
+  totalDuration: number
+  workflowStartTime: number
+  isFirstSpan?: boolean
+}
+
+/**
+ * Individual trace span card component.
+ * Memoized to prevent re-renders when sibling spans change.
+ */
+const TraceSpanItem = memo(function TraceSpanItem({
+  span,
+  totalDuration,
+  workflowStartTime,
+  isFirstSpan = false,
+}: TraceSpanItemProps): React.ReactNode {
+  const [expandedSections, setExpandedSections] = useState<Set<string>>(new Set())
+  const [expandedChildren, setExpandedChildren] = useState<Set<string>>(new Set())
+  const [isCardExpanded, setIsCardExpanded] = useState(false)
+  const toggleSet = useSetToggle()
+
   const spanId = span.id || `span-${span.name}-${span.startTime}`
   const spanStartTime = new Date(span.startTime).getTime()
   const spanEndTime = new Date(span.endTime).getTime()
   const duration = span.duration || spanEndTime - spanStartTime
 
-  const isDirectError = span.status === 'error'
-  const hasNestedError = hasErrorInTree(span)
-  const showErrorStyle = isDirectError || hasNestedError
+  const hasChildren = Boolean(span.children && span.children.length > 0)
+  const hasToolCalls = Boolean(span.toolCalls && span.toolCalls.length > 0)
+  const isError = span.status === 'error'
+
+  const inlineChildTypes = new Set([
+    'tool',
+    'model',
+    'loop-iteration',
+    'parallel-iteration',
+    'workflow',
+  ])
+
+  // For workflow-in-workflow blocks, all children should be rendered inline/nested
+  const isWorkflowBlock = span.type?.toLowerCase().includes('workflow')
+  const inlineChildren = isWorkflowBlock
+    ? span.children || []
+    : span.children?.filter((child) => inlineChildTypes.has(child.type?.toLowerCase() || '')) || []
+  const otherChildren = isWorkflowBlock
+    ? []
+    : span.children?.filter((child) => !inlineChildTypes.has(child.type?.toLowerCase() || '')) || []
+
+  const toolCallSpans = useMemo(() => {
+    if (!hasToolCalls) return []
+    return span.toolCalls!.map((toolCall, index) => {
+      const toolStartTime = toolCall.startTime
+        ? new Date(toolCall.startTime).getTime()
+        : spanStartTime
+      const toolEndTime = toolCall.endTime
+        ? new Date(toolCall.endTime).getTime()
+        : toolStartTime + (toolCall.duration || 0)
+
+      return {
+        id: `${spanId}-tool-${index}`,
+        name: toolCall.name,
+        type: 'tool',
+        duration: toolCall.duration || toolEndTime - toolStartTime,
+        startTime: new Date(toolStartTime).toISOString(),
+        endTime: new Date(toolEndTime).toISOString(),
+        status: toolCall.error ? ('error' as const) : ('success' as const),
+        input: toolCall.input,
+        output: toolCall.error
+          ? { error: toolCall.error, ...(toolCall.output || {}) }
+          : toolCall.output,
+      } as TraceSpan
+    })
+  }, [hasToolCalls, span.toolCalls, spanId, spanStartTime])
+
+  const handleSectionToggle = useCallback(
+    (section: string) => toggleSet(setExpandedSections, section),
+    [toggleSet]
+  )
+
+  const handleChildrenToggle = useCallback(
+    (childSpanId: string) => toggleSet(setExpandedChildren, childSpanId),
+    [toggleSet]
+  )
 
   const { icon: BlockIcon, bgColor } = getBlockIconAndColor(span.type, span.name)
 
-  // Root workflow execution is always expanded and has no toggle
-  const isRootWorkflow = depth === 0
+  // Check if this card has expandable inline content
+  const hasInlineContent =
+    (isWorkflowBlock && inlineChildren.length > 0) ||
+    (!isWorkflowBlock && (toolCallSpans.length > 0 || inlineChildren.length > 0))
 
-  // Build all children including tool calls
-  const allChildren = useMemo(() => {
-    const children: TraceSpan[] = []
-
-    // Add tool calls as child spans
-    if (span.toolCalls && span.toolCalls.length > 0) {
-      span.toolCalls.forEach((toolCall, index) => {
-        const toolStartTime = toolCall.startTime
-          ? new Date(toolCall.startTime).getTime()
-          : spanStartTime
-        const toolEndTime = toolCall.endTime
-          ? new Date(toolCall.endTime).getTime()
-          : toolStartTime + (toolCall.duration || 0)
-
-        children.push({
-          id: `${spanId}-tool-${index}`,
-          name: toolCall.name,
-          type: 'tool',
-          duration: toolCall.duration || toolEndTime - toolStartTime,
-          startTime: new Date(toolStartTime).toISOString(),
-          endTime: new Date(toolEndTime).toISOString(),
-          status: toolCall.error ? ('error' as const) : ('success' as const),
-          input: toolCall.input,
-          output: toolCall.error
-            ? { error: toolCall.error, ...(toolCall.output || {}) }
-            : toolCall.output,
-        } as TraceSpan)
-      })
-    }
-
-    // Add regular children
-    if (span.children && span.children.length > 0) {
-      children.push(...span.children)
-    }
-
-    // Sort by start time
-    return children.sort((a, b) => parseTime(a.startTime) - parseTime(b.startTime))
-  }, [span, spanId, spanStartTime])
-
-  const hasChildren = allChildren.length > 0
-  const isExpanded = isRootWorkflow || expandedNodes.has(spanId)
-  const isToggleable = !isRootWorkflow
-
-  const hasInput = Boolean(span.input)
-  const hasOutput = Boolean(span.output)
-
-  // For progress bar - show child segments for workflow/iteration types
-  const lowerType = span.type?.toLowerCase() || ''
-  const showChildrenInProgressBar =
-    isIterationType(lowerType) || lowerType === 'workflow' || lowerType === 'workflow_input'
+  const isExpandable = !isFirstSpan && hasInlineContent
 
   return (
-    <div className='flex min-w-0 flex-col'>
-      {/* Node Header Row */}
-      <div
-        className={cn(
-          'group flex items-center justify-between gap-[8px] py-[6px]',
-          isToggleable && 'cursor-pointer'
+    <>
+      <div className='flex min-w-0 flex-col gap-[8px] overflow-hidden rounded-[6px] bg-[var(--surface-1)] px-[10px] py-[8px]'>
+        <ExpandableRowHeader
+          name={span.name}
+          duration={duration}
+          isError={isError}
+          isExpanded={isCardExpanded}
+          hasChildren={isExpandable}
+          showIcon={!isFirstSpan}
+          icon={BlockIcon}
+          bgColor={bgColor}
+          onToggle={() => setIsCardExpanded((prev) => !prev)}
+        />
+
+        <SpanContent
+          span={span}
+          spanId={spanId}
+          isError={isError}
+          workflowStartTime={workflowStartTime}
+          totalDuration={totalDuration}
+          expandedSections={expandedSections}
+          onToggle={handleSectionToggle}
+        />
+
+        {/* For workflow blocks, keep children nested within the card (not as separate cards) */}
+        {!isFirstSpan && isWorkflowBlock && inlineChildren.length > 0 && isCardExpanded && (
+          <div className='mt-[2px] flex min-w-0 flex-col gap-[10px] overflow-hidden border-[var(--border)] border-l pl-[10px]'>
+            {inlineChildren.map((childSpan, index) => (
+              <NestedBlockItem
+                key={childSpan.id || `${spanId}-nested-${index}`}
+                span={childSpan}
+                parentId={spanId}
+                index={index}
+                expandedSections={expandedSections}
+                onToggle={handleSectionToggle}
+                workflowStartTime={workflowStartTime}
+                totalDuration={totalDuration}
+                expandedChildren={expandedChildren}
+                onToggleChildren={handleChildrenToggle}
+              />
+            ))}
+          </div>
         )}
-        onClick={isToggleable ? () => onToggleNode(spanId) : undefined}
-        onKeyDown={
-          isToggleable
-            ? (e) => {
-                if (e.key === 'Enter' || e.key === ' ') {
-                  e.preventDefault()
-                  onToggleNode(spanId)
-                }
-              }
-            : undefined
-        }
-        role={isToggleable ? 'button' : undefined}
-        tabIndex={isToggleable ? 0 : undefined}
-        aria-expanded={isToggleable ? isExpanded : undefined}
-        aria-label={isToggleable ? (isExpanded ? 'Collapse' : 'Expand') : undefined}
-      >
-        <div className='flex min-w-0 flex-1 items-center gap-[8px]'>
-          {!isIterationType(span.type) && (
-            <div
-              className='relative flex h-[14px] w-[14px] flex-shrink-0 items-center justify-center overflow-hidden rounded-[4px]'
-              style={{ background: bgColor }}
-            >
-              {BlockIcon && <BlockIcon className='h-[9px] w-[9px] text-white' />}
-            </div>
-          )}
-          <span
-            className='min-w-0 max-w-[180px] truncate font-medium text-[12px]'
-            style={{ color: showErrorStyle ? 'var(--text-error)' : 'var(--text-secondary)' }}
-          >
-            {span.name}
-          </span>
-          {isToggleable && (
-            <ChevronDown
-              className='h-[8px] w-[8px] flex-shrink-0 text-[var(--text-tertiary)] transition-colors transition-transform duration-100 group-hover:text-[var(--text-primary)]'
-              style={{
-                transform: `translateY(-0.25px) ${isExpanded ? 'rotate(0deg)' : 'rotate(-90deg)'}`,
-              }}
-            />
-          )}
-        </div>
-        <span className='flex-shrink-0 font-medium text-[12px] text-[var(--text-tertiary)]'>
-          {formatDuration(duration, { precision: 2 })}
-        </span>
-      </div>
 
-      {/* Expanded Content */}
-      {isExpanded && (
-        <div className='flex min-w-0 flex-col gap-[10px]'>
-          {/* Progress Bar */}
-          <ProgressBar
-            span={span}
-            childSpans={showChildrenInProgressBar ? span.children : undefined}
-            workflowStartTime={workflowStartTime}
-            totalDuration={totalDuration}
-          />
+        {/* For non-workflow blocks, render inline children/tool calls */}
+        {!isFirstSpan && !isWorkflowBlock && isCardExpanded && (
+          <div className='mt-[2px] flex min-w-0 flex-col gap-[10px] overflow-hidden border-[var(--border)] border-l pl-[10px]'>
+            {[...toolCallSpans, ...inlineChildren].map((childSpan, index) => {
+              const childId = childSpan.id || `${spanId}-inline-${index}`
+              const childIsError = childSpan.status === 'error'
+              const childLowerType = childSpan.type?.toLowerCase() || ''
+              const hasNestedChildren = Boolean(childSpan.children && childSpan.children.length > 0)
+              const isNestedExpanded = expandedChildren.has(childId)
+              const showChildrenInProgressBar =
+                isIterationType(childLowerType) || childLowerType === 'workflow'
+              const { icon: ChildIcon, bgColor: childBgColor } = getBlockIconAndColor(
+                childSpan.type,
+                childSpan.name
+              )
 
-          {/* Input/Output Sections */}
-          {(hasInput || hasOutput) && (
-            <div className='flex min-w-0 flex-col gap-[6px] overflow-hidden py-[2px]'>
-              {hasInput && (
-                <InputOutputSection
-                  label='Input'
-                  data={span.input}
-                  isError={false}
-                  spanId={spanId}
-                  sectionType='input'
-                  expandedSections={expandedSections}
-                  onToggle={onToggleSection}
-                />
-              )}
+              return (
+                <div
+                  key={`inline-${childId}`}
+                  className='flex min-w-0 flex-col gap-[8px] overflow-hidden'
+                >
+                  <ExpandableRowHeader
+                    name={childSpan.name}
+                    duration={childSpan.duration || 0}
+                    isError={childIsError}
+                    isExpanded={isNestedExpanded}
+                    hasChildren={hasNestedChildren}
+                    showIcon={!isIterationType(childSpan.type)}
+                    icon={ChildIcon}
+                    bgColor={childBgColor}
+                    onToggle={() => handleChildrenToggle(childId)}
+                  />
 
-              {hasInput && hasOutput && (
-                <div className='border-[var(--border)] border-t border-dashed' />
-              )}
-
-              {hasOutput && (
-                <InputOutputSection
-                  label={isDirectError ? 'Error' : 'Output'}
-                  data={span.output}
-                  isError={isDirectError}
-                  spanId={spanId}
-                  sectionType='output'
-                  expandedSections={expandedSections}
-                  onToggle={onToggleSection}
-                />
-              )}
-            </div>
-          )}
-
-          {/* Nested Children */}
-          {hasChildren && (
-            <div className='flex min-w-0 flex-col gap-[2px] border-[var(--border)] border-l pl-[10px]'>
-              {allChildren.map((child, index) => (
-                <div key={child.id || `${spanId}-child-${index}`} className='pl-[6px]'>
-                  <TraceSpanNode
-                    span={child}
+                  <ProgressBar
+                    span={childSpan}
+                    childSpans={showChildrenInProgressBar ? childSpan.children : undefined}
                     workflowStartTime={workflowStartTime}
                     totalDuration={totalDuration}
-                    depth={depth + 1}
-                    expandedNodes={expandedNodes}
-                    expandedSections={expandedSections}
-                    onToggleNode={onToggleNode}
-                    onToggleSection={onToggleSection}
                   />
+
+                  {childSpan.input && (
+                    <InputOutputSection
+                      label='Input'
+                      data={childSpan.input}
+                      isError={false}
+                      spanId={childId}
+                      sectionType='input'
+                      expandedSections={expandedSections}
+                      onToggle={handleSectionToggle}
+                    />
+                  )}
+
+                  {childSpan.input && childSpan.output && (
+                    <div className='border-[var(--border)] border-t border-dashed' />
+                  )}
+
+                  {childSpan.output && (
+                    <InputOutputSection
+                      label={childIsError ? 'Error' : 'Output'}
+                      data={childSpan.output}
+                      isError={childIsError}
+                      spanId={childId}
+                      sectionType='output'
+                      expandedSections={expandedSections}
+                      onToggle={handleSectionToggle}
+                    />
+                  )}
+
+                  {/* Nested children */}
+                  {showChildrenInProgressBar && hasNestedChildren && isNestedExpanded && (
+                    <div className='mt-[2px] flex min-w-0 flex-col gap-[10px] overflow-hidden border-[var(--border)] border-l pl-[10px]'>
+                      {childSpan.children!.map((nestedChild, nestedIndex) => (
+                        <NestedBlockItem
+                          key={nestedChild.id || `${childId}-nested-${nestedIndex}`}
+                          span={nestedChild}
+                          parentId={childId}
+                          index={nestedIndex}
+                          expandedSections={expandedSections}
+                          onToggle={handleSectionToggle}
+                          workflowStartTime={workflowStartTime}
+                          totalDuration={totalDuration}
+                          expandedChildren={expandedChildren}
+                          onToggleChildren={handleChildrenToggle}
+                        />
+                      ))}
+                    </div>
+                  )}
                 </div>
-              ))}
-            </div>
-          )}
-        </div>
-      )}
-    </div>
+              )
+            })}
+          </div>
+        )}
+      </div>
+
+      {/* For the first span (workflow execution), render all children as separate top-level cards */}
+      {isFirstSpan &&
+        hasChildren &&
+        span.children!.map((childSpan, index) => (
+          <TraceSpanItem
+            key={childSpan.id || `${spanId}-child-${index}`}
+            span={childSpan}
+            totalDuration={totalDuration}
+            workflowStartTime={workflowStartTime}
+            isFirstSpan={false}
+          />
+        ))}
+
+      {!isFirstSpan &&
+        otherChildren.map((childSpan, index) => (
+          <TraceSpanItem
+            key={childSpan.id || `${spanId}-other-${index}`}
+            span={childSpan}
+            totalDuration={totalDuration}
+            workflowStartTime={workflowStartTime}
+            isFirstSpan={false}
+          />
+        ))}
+    </>
   )
 })
 
 /**
- * Displays workflow execution trace spans with nested tree structure.
+ * Displays workflow execution trace spans with nested structure.
  * Memoized to prevent re-renders when parent LogDetails updates.
  */
-export const TraceSpans = memo(function TraceSpans({ traceSpans }: TraceSpansProps) {
-  const [expandedNodes, setExpandedNodes] = useState<Set<string>>(() => new Set())
-  const [expandedSections, setExpandedSections] = useState<Set<string>>(new Set())
-  const toggleSet = useSetToggle()
-
+export const TraceSpans = memo(function TraceSpans({
+  traceSpans,
+  totalDuration = 0,
+}: TraceSpansProps) {
   const { workflowStartTime, actualTotalDuration, normalizedSpans } = useMemo(() => {
     if (!traceSpans || traceSpans.length === 0) {
-      return { workflowStartTime: 0, actualTotalDuration: 0, normalizedSpans: [] }
+      return { workflowStartTime: 0, actualTotalDuration: totalDuration, normalizedSpans: [] }
     }
 
     let earliest = Number.POSITIVE_INFINITY
@@ -736,37 +955,26 @@ export const TraceSpans = memo(function TraceSpans({ traceSpans }: TraceSpansPro
       actualTotalDuration: latest - earliest,
       normalizedSpans: normalizeAndSortSpans(traceSpans),
     }
-  }, [traceSpans])
-
-  const handleToggleNode = useCallback(
-    (nodeId: string) => toggleSet(setExpandedNodes, nodeId),
-    [toggleSet]
-  )
-
-  const handleToggleSection = useCallback(
-    (section: string) => toggleSet(setExpandedSections, section),
-    [toggleSet]
-  )
+  }, [traceSpans, totalDuration])
 
   if (!traceSpans || traceSpans.length === 0) {
     return <div className='text-[12px] text-[var(--text-secondary)]'>No trace data available</div>
   }
 
   return (
-    <div className='flex w-full min-w-0 flex-col overflow-hidden'>
-      {normalizedSpans.map((span, index) => (
-        <TraceSpanNode
-          key={span.id || index}
-          span={span}
-          workflowStartTime={workflowStartTime}
-          totalDuration={actualTotalDuration}
-          depth={0}
-          expandedNodes={expandedNodes}
-          expandedSections={expandedSections}
-          onToggleNode={handleToggleNode}
-          onToggleSection={handleToggleSection}
-        />
-      ))}
+    <div className='flex w-full min-w-0 flex-col gap-[6px] overflow-hidden rounded-[6px] bg-[var(--surface-2)] px-[10px] py-[8px]'>
+      <span className='font-medium text-[12px] text-[var(--text-tertiary)]'>Trace Span</span>
+      <div className='flex min-w-0 flex-col gap-[8px] overflow-hidden'>
+        {normalizedSpans.map((span, index) => (
+          <TraceSpanItem
+            key={span.id || index}
+            span={span}
+            totalDuration={actualTotalDuration}
+            workflowStartTime={workflowStartTime}
+            isFirstSpan={index === 0}
+          />
+        ))}
+      </div>
     </div>
   )
 })

apps/sim/app/workspace/[workspaceId]/logs/components/log-details/log-details.tsx

@@ -1,23 +1,10 @@
 'use client'
 
-import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { ArrowDown, ArrowUp, Check, ChevronUp, Clipboard, Search, X } from 'lucide-react'
-import { createPortal } from 'react-dom'
-import {
-  Button,
-  Code,
-  Eye,
-  Input,
-  Popover,
-  PopoverAnchor,
-  PopoverContent,
-  PopoverDivider,
-  PopoverItem,
-  Tooltip,
-} from '@/components/emcn'
+import { memo, useEffect, useMemo, useRef, useState } from 'react'
+import { ChevronUp, X } from 'lucide-react'
+import { Button, Eye } from '@/components/emcn'
 import { ScrollArea } from '@/components/ui/scroll-area'
 import { BASE_EXECUTION_CHARGE } from '@/lib/billing/constants'
-import { cn } from '@/lib/core/utils/cn'
 import {
   ExecutionSnapshot,
   FileCards,
@@ -30,194 +17,11 @@ import {
   StatusBadge,
   TriggerBadge,
 } from '@/app/workspace/[workspaceId]/logs/utils'
-import { useCodeViewerFeatures } from '@/hooks/use-code-viewer'
 import { usePermissionConfig } from '@/hooks/use-permission-config'
 import { formatCost } from '@/providers/utils'
 import type { WorkflowLog } from '@/stores/logs/filters/types'
 import { useLogDetailsUIStore } from '@/stores/logs/store'
 
-/**
- * Workflow Output section with code viewer, copy, search, and context menu functionality
- */
-function WorkflowOutputSection({ output }: { output: Record<string, unknown> }) {
-  const contentRef = useRef<HTMLDivElement>(null)
-  const [copied, setCopied] = useState(false)
-
-  // Context menu state
-  const [isContextMenuOpen, setIsContextMenuOpen] = useState(false)
-  const [contextMenuPosition, setContextMenuPosition] = useState({ x: 0, y: 0 })
-
-  const {
-    isSearchActive,
-    searchQuery,
-    setSearchQuery,
-    matchCount,
-    currentMatchIndex,
-    activateSearch,
-    closeSearch,
-    goToNextMatch,
-    goToPreviousMatch,
-    handleMatchCountChange,
-    searchInputRef,
-  } = useCodeViewerFeatures({ contentRef })
-
-  const jsonString = useMemo(() => JSON.stringify(output, null, 2), [output])
-
-  const handleContextMenu = useCallback((e: React.MouseEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
-    setContextMenuPosition({ x: e.clientX, y: e.clientY })
-    setIsContextMenuOpen(true)
-  }, [])
-
-  const closeContextMenu = useCallback(() => {
-    setIsContextMenuOpen(false)
-  }, [])
-
-  const handleCopy = useCallback(() => {
-    navigator.clipboard.writeText(jsonString)
-    setCopied(true)
-    setTimeout(() => setCopied(false), 1500)
-    closeContextMenu()
-  }, [jsonString, closeContextMenu])
-
-  const handleSearch = useCallback(() => {
-    activateSearch()
-    closeContextMenu()
-  }, [activateSearch, closeContextMenu])
-
-  return (
-    <div className='relative flex min-w-0 flex-col overflow-hidden'>
-      <div ref={contentRef} onContextMenu={handleContextMenu} className='relative'>
-        <Code.Viewer
-          code={jsonString}
-          language='json'
-          className='!bg-[var(--surface-4)] dark:!bg-[var(--surface-3)] max-h-[300px] min-h-0 max-w-full rounded-[6px] border-0 [word-break:break-all]'
-          wrapText
-          searchQuery={isSearchActive ? searchQuery : undefined}
-          currentMatchIndex={currentMatchIndex}
-          onMatchCountChange={handleMatchCountChange}
-        />
-        {/* Glass action buttons overlay */}
-        {!isSearchActive && (
-          <div className='absolute top-[7px] right-[6px] z-10 flex gap-[4px]'>
-            <Tooltip.Root>
-              <Tooltip.Trigger asChild>
-                <Button
-                  type='button'
-                  variant='default'
-                  onClick={(e) => {
-                    e.stopPropagation()
-                    handleCopy()
-                  }}
-                  className='h-[20px] w-[20px] cursor-pointer border border-[var(--border-1)] bg-transparent p-0 backdrop-blur-sm hover:bg-[var(--surface-3)]'
-                >
-                  {copied ? (
-                    <Check className='h-[10px] w-[10px] text-[var(--text-success)]' />
-                  ) : (
-                    <Clipboard className='h-[10px] w-[10px]' />
-                  )}
-                </Button>
-              </Tooltip.Trigger>
-              <Tooltip.Content side='top'>{copied ? 'Copied' : 'Copy'}</Tooltip.Content>
-            </Tooltip.Root>
-            <Tooltip.Root>
-              <Tooltip.Trigger asChild>
-                <Button
-                  type='button'
-                  variant='default'
-                  onClick={(e) => {
-                    e.stopPropagation()
-                    activateSearch()
-                  }}
-                  className='h-[20px] w-[20px] cursor-pointer border border-[var(--border-1)] bg-transparent p-0 backdrop-blur-sm hover:bg-[var(--surface-3)]'
-                >
-                  <Search className='h-[10px] w-[10px]' />
-                </Button>
-              </Tooltip.Trigger>
-              <Tooltip.Content side='top'>Search</Tooltip.Content>
-            </Tooltip.Root>
-          </div>
-        )}
-      </div>
-
-      {/* Search Overlay */}
-      {isSearchActive && (
-        <div
-          className='absolute top-0 right-0 z-30 flex h-[34px] items-center gap-[6px] rounded-[4px] border border-[var(--border)] bg-[var(--surface-1)] px-[6px] shadow-sm'
-          onClick={(e) => e.stopPropagation()}
-        >
-          <Input
-            ref={searchInputRef}
-            type='text'
-            value={searchQuery}
-            onChange={(e) => setSearchQuery(e.target.value)}
-            placeholder='Search...'
-            className='mr-[2px] h-[23px] w-[94px] text-[12px]'
-          />
-          <span
-            className={cn(
-              'min-w-[45px] text-center text-[11px]',
-              matchCount > 0 ? 'text-[var(--text-secondary)]' : 'text-[var(--text-tertiary)]'
-            )}
-          >
-            {matchCount > 0 ? `${currentMatchIndex + 1}/${matchCount}` : '0/0'}
-          </span>
-          <Button
-            variant='ghost'
-            className='!p-1'
-            onClick={goToPreviousMatch}
-            disabled={matchCount === 0}
-            aria-label='Previous match'
-          >
-            <ArrowUp className='h-[12px] w-[12px]' />
-          </Button>
-          <Button
-            variant='ghost'
-            className='!p-1'
-            onClick={goToNextMatch}
-            disabled={matchCount === 0}
-            aria-label='Next match'
-          >
-            <ArrowDown className='h-[12px] w-[12px]' />
-          </Button>
-          <Button variant='ghost' className='!p-1' onClick={closeSearch} aria-label='Close search'>
-            <X className='h-[12px] w-[12px]' />
-          </Button>
-        </div>
-      )}
-
-      {/* Context Menu - rendered in portal to avoid transform/overflow clipping */}
-      {typeof document !== 'undefined' &&
-        createPortal(
-          <Popover
-            open={isContextMenuOpen}
-            onOpenChange={closeContextMenu}
-            variant='secondary'
-            size='sm'
-            colorScheme='inverted'
-          >
-            <PopoverAnchor
-              style={{
-                position: 'fixed',
-                left: `${contextMenuPosition.x}px`,
-                top: `${contextMenuPosition.y}px`,
-                width: '1px',
-                height: '1px',
-              }}
-            />
-            <PopoverContent align='start' side='bottom' sideOffset={4}>
-              <PopoverItem onClick={handleCopy}>Copy</PopoverItem>
-              <PopoverDivider />
-              <PopoverItem onClick={handleSearch}>Search</PopoverItem>
-            </PopoverContent>
-          </Popover>,
-          document.body
-        )}
-    </div>
-  )
-}
-
 interface LogDetailsProps {
   /** The log to display details for */
   log: WorkflowLog | null
@@ -274,18 +78,6 @@ export const LogDetails = memo(function LogDetails({
     return isWorkflowExecutionLog && log?.cost
   }, [log, isWorkflowExecutionLog])
 
-  // Extract and clean the workflow final output (remove childTraceSpans for cleaner display)
-  const workflowOutput = useMemo(() => {
-    const executionData = log?.executionData as
-      | { finalOutput?: Record<string, unknown> }
-      | undefined
-    if (!executionData?.finalOutput) return null
-    const { childTraceSpans, ...cleanOutput } = executionData.finalOutput as {
-      childTraceSpans?: unknown
-    } & Record<string, unknown>
-    return cleanOutput
-  }, [log?.executionData])
-
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
       if (e.key === 'Escape' && isOpen) {
@@ -295,12 +87,12 @@ export const LogDetails = memo(function LogDetails({
       if (isOpen) {
         if (e.key === 'ArrowUp' && hasPrev && onNavigatePrev) {
           e.preventDefault()
-          onNavigatePrev()
+          handleNavigate(onNavigatePrev)
         }
 
         if (e.key === 'ArrowDown' && hasNext && onNavigateNext) {
           e.preventDefault()
-          onNavigateNext()
+          handleNavigate(onNavigateNext)
         }
       }
     }
@@ -309,6 +101,10 @@ export const LogDetails = memo(function LogDetails({
     return () => window.removeEventListener('keydown', handleKeyDown)
   }, [isOpen, onClose, hasPrev, hasNext, onNavigatePrev, onNavigateNext])
 
+  const handleNavigate = (navigateFunction: () => void) => {
+    navigateFunction()
+  }
+
   const formattedTimestamp = useMemo(
     () => (log ? formatDate(log.createdAt) : null),
     [log?.createdAt]
@@ -346,7 +142,7 @@ export const LogDetails = memo(function LogDetails({
                 <Button
                   variant='ghost'
                   className='!p-[4px]'
-                  onClick={() => hasPrev && onNavigatePrev?.()}
+                  onClick={() => hasPrev && handleNavigate(onNavigatePrev!)}
                   disabled={!hasPrev}
                   aria-label='Previous log'
                 >
@@ -355,7 +151,7 @@ export const LogDetails = memo(function LogDetails({
                 <Button
                   variant='ghost'
                   className='!p-[4px]'
-                  onClick={() => hasNext && onNavigateNext?.()}
+                  onClick={() => hasNext && handleNavigate(onNavigateNext!)}
                   disabled={!hasNext}
                   aria-label='Next log'
                 >
@@ -408,7 +204,7 @@ export const LogDetails = memo(function LogDetails({
 
                 {/* Execution ID */}
                 {log.executionId && (
-                  <div className='flex flex-col gap-[6px] rounded-[6px] border border-[var(--border)] bg-[var(--surface-2)] px-[10px] py-[8px]'>
+                  <div className='flex flex-col gap-[6px] rounded-[6px] bg-[var(--surface-2)] px-[10px] py-[8px]'>
                     <span className='font-medium text-[12px] text-[var(--text-tertiary)]'>
                       Execution ID
                     </span>
@@ -419,7 +215,7 @@ export const LogDetails = memo(function LogDetails({
                 )}
 
                 {/* Details Section */}
-                <div className='-my-[4px] flex min-w-0 flex-col overflow-hidden'>
+                <div className='flex min-w-0 flex-col overflow-hidden'>
                   {/* Level */}
                   <div className='flex h-[48px] items-center justify-between border-[var(--border)] border-b p-[8px]'>
                     <span className='font-medium text-[12px] text-[var(--text-tertiary)]'>
@@ -471,35 +267,19 @@ export const LogDetails = memo(function LogDetails({
 
                 {/* Workflow State */}
                 {isWorkflowExecutionLog && log.executionId && !permissionConfig.hideTraceSpans && (
-                  <div className='-mt-[8px] flex flex-col gap-[6px] rounded-[6px] border border-[var(--border)] bg-[var(--surface-2)] px-[10px] py-[8px]'>
+                  <div className='flex flex-col gap-[6px] rounded-[6px] bg-[var(--surface-2)] px-[10px] py-[8px]'>
                     <span className='font-medium text-[12px] text-[var(--text-tertiary)]'>
                       Workflow State
                     </span>
-                    <Button
-                      variant='active'
+                    <button
                       onClick={() => setIsExecutionSnapshotOpen(true)}
-                      className='flex w-full items-center justify-between px-[10px] py-[6px]'
+                      className='flex items-center justify-between rounded-[6px] bg-[var(--surface-1)] px-[10px] py-[8px] transition-colors hover:bg-[var(--surface-4)]'
                     >
-                      <span className='font-medium text-[12px]'>View Snapshot</span>
-                      <Eye className='h-[14px] w-[14px]' />
-                    </Button>
-                  </div>
-                )}
-
-                {/* Workflow Output */}
-                {isWorkflowExecutionLog && workflowOutput && !permissionConfig.hideTraceSpans && (
-                  <div className='mt-[4px] flex flex-col gap-[6px] rounded-[6px] border border-[var(--border)] bg-[var(--surface-2)] px-[10px] py-[8px] dark:bg-transparent'>
-                    <span
-                      className={cn(
-                        'font-medium text-[12px]',
-                        workflowOutput.error
-                          ? 'text-[var(--text-error)]'
-                          : 'text-[var(--text-tertiary)]'
-                      )}
-                    >
-                      Workflow Output
-                    </span>
-                    <WorkflowOutputSection output={workflowOutput} />
+                      <span className='font-medium text-[12px] text-[var(--text-secondary)]'>
+                        View Snapshot
+                      </span>
+                      <Eye className='h-[14px] w-[14px] text-[var(--text-subtle)]' />
+                    </button>
                   </div>
                 )}
 
@@ -507,12 +287,10 @@ export const LogDetails = memo(function LogDetails({
                 {isWorkflowExecutionLog &&
                   log.executionData?.traceSpans &&
                   !permissionConfig.hideTraceSpans && (
-                    <div className='mt-[4px] flex flex-col gap-[6px] rounded-[6px] border border-[var(--border)] bg-[var(--surface-2)] px-[10px] py-[8px] dark:bg-transparent'>
-                      <span className='font-medium text-[12px] text-[var(--text-tertiary)]'>
-                        Trace Span
-                      </span>
-                      <TraceSpans traceSpans={log.executionData.traceSpans} />
-                    </div>
+                    <TraceSpans
+                      traceSpans={log.executionData.traceSpans}
+                      totalDuration={log.executionData.totalDuration}
+                    />
                   )}
 
                 {/* Files */}

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/action-bar.tsx

@@ -128,7 +128,7 @@ export const ActionBar = memo(
           'dark:border-transparent dark:bg-[var(--surface-4)]'
         )}
       >
-        {!isNoteBlock && (
+        {!isNoteBlock && !isSubflowBlock && (
           <Tooltip.Root>
             <Tooltip.Trigger asChild>
               <Button

apps/sim/content/blog/v0-5/components.tsx

@@ -0,0 +1 @@
+export { DiffControlsDemo } from './components/diff-controls-demo'

apps/sim/content/blog/v0-5/components/diff-controls-demo.tsx

@@ -0,0 +1,111 @@
+'use client'
+
+import { useState } from 'react'
+
+export function DiffControlsDemo() {
+  const [rejectHover, setRejectHover] = useState(false)
+  const [acceptHover, setAcceptHover] = useState(false)
+
+  return (
+    <div style={{ display: 'flex', justifyContent: 'center', margin: '24px 0' }}>
+      <div
+        style={{
+          position: 'relative',
+          display: 'flex',
+          height: '30px',
+          overflow: 'hidden',
+          borderRadius: '4px',
+          isolation: 'isolate',
+        }}
+      >
+        {/* Reject button */}
+        <button
+          onClick={() => {}}
+          onMouseEnter={() => setRejectHover(true)}
+          onMouseLeave={() => setRejectHover(false)}
+          title='Reject changes'
+          style={{
+            position: 'relative',
+            display: 'flex',
+            height: '100%',
+            alignItems: 'center',
+            border: '1px solid #e0e0e0',
+            backgroundColor: rejectHover ? '#f0f0f0' : '#f5f5f5',
+            paddingRight: '20px',
+            paddingLeft: '12px',
+            fontWeight: 500,
+            fontSize: '13px',
+            color: rejectHover ? '#2d2d2d' : '#404040',
+            clipPath: 'polygon(0 0, calc(100% + 10px) 0, 100% 100%, 0 100%)',
+            borderRadius: '4px 0 0 4px',
+            cursor: 'default',
+            transition: 'color 150ms, background-color 150ms, border-color 150ms',
+          }}
+        >
+          Reject
+        </button>
+        {/* Slanted divider - split gray/green */}
+        <div
+          style={{
+            pointerEvents: 'none',
+            position: 'absolute',
+            top: 0,
+            bottom: 0,
+            left: '66px',
+            width: '2px',
+            transform: 'skewX(-18.4deg)',
+            background: 'linear-gradient(to right, #e0e0e0 50%, #238458 50%)',
+            zIndex: 10,
+          }}
+        />
+        {/* Accept button */}
+        <button
+          onClick={() => {}}
+          onMouseEnter={() => setAcceptHover(true)}
+          onMouseLeave={() => setAcceptHover(false)}
+          title='Accept changes (⇧⌘⏎)'
+          style={{
+            position: 'relative',
+            display: 'flex',
+            height: '100%',
+            alignItems: 'center',
+            border: '1px solid rgba(0, 0, 0, 0.15)',
+            backgroundColor: '#32bd7e',
+            paddingRight: '12px',
+            paddingLeft: '20px',
+            fontWeight: 500,
+            fontSize: '13px',
+            color: '#ffffff',
+            clipPath: 'polygon(10px 0, 100% 0, 100% 100%, 0 100%)',
+            borderRadius: '0 4px 4px 0',
+            marginLeft: '-10px',
+            cursor: 'default',
+            filter: acceptHover ? 'brightness(1.1)' : undefined,
+            transition: 'background-color 150ms, border-color 150ms',
+          }}
+        >
+          Accept
+          <kbd
+            style={{
+              marginLeft: '8px',
+              borderRadius: '4px',
+              border: '1px solid rgba(255, 255, 255, 0.2)',
+              backgroundColor: 'rgba(255, 255, 255, 0.1)',
+              paddingLeft: '6px',
+              paddingRight: '6px',
+              paddingTop: '2px',
+              paddingBottom: '2px',
+              fontWeight: 500,
+              fontFamily:
+                'ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
+              fontSize: '10px',
+              color: '#ffffff',
+            }}
+          >
+            ⇧⌘<span style={{ display: 'inline-block', transform: 'translateY(-1px)' }}>⏎</span>
+          </kbd>
+        </button>
+      </div>
+    </div>
+  )
+}

apps/sim/content/blog/v0-5/index.mdx

@@ -0,0 +1,201 @@
+---
+slug: v0-5
+title: 'Introducing Sim v0.5'
+description: 'This new release brings a state of the art Copilot, seamless MCP server and tool deployment, 100+ integrations with 300+ tools, comprehensive execution logs, and realtime collaboration—built for teams shipping AI agents in production.'
+date: 2026-01-22
+updated: 2026-01-22
+authors:
+  - waleed
+readingTime: 8
+tags: [Release, Copilot, MCP, Observability, Collaboration, Integrations, Sim]
+ogImage: /studio/v0-5/cover.png
+ogAlt: 'Sim v0.5 release announcement'
+about: ['AI Agents', 'Workflow Automation', 'Developer Tools']
+timeRequired: PT8M
+canonical: https://sim.ai/studio/v0-5
+featured: true
+draft: false
+---
+
+**Sim v0.5** is the next evolution of our agent workflow platform—built for teams shipping AI agents to production.
+
+## Copilot
+
+![Sim Copilot](/studio/v0-5/copilot.jpg)
+
+Copilot is a context-aware assistant embedded in the Sim editor. Unlike general-purpose AI assistants, Copilot has direct access to your workspace: workflows, block configurations, execution logs, connected credentials, and documentation. It can also search the web to pull in external context when needed.
+
+Your workspace is indexed for hybrid retrieval. When you ask a question, Copilot queries this index to ground its responses in your actual workflow state. Ask "why did my workflow fail at 3am?" and it retrieves the relevant execution trace, identifies the error, and explains what happened.
+
+Copilot supports slash commands that trigger specialized capabilities:
+
+- `/deep-research` — performs multi-step web research on a topic, synthesizing results from multiple sources
+- `/api-docs` — fetches and parses API documentation from a URL, extracting endpoints, parameters, and authentication requirements
+- `/test` — runs your current workflow with sample inputs and reports results inline
+- `/build` — generates a complete workflow from a natural language description, wiring up blocks and configuring integrations
+
+Use `@` commands to pull specific context into your conversation. `@block` references a specific block's configuration and recent outputs. `@workflow` includes the full workflow structure. `@logs` pulls in recent execution traces. This lets you ask targeted questions like "why is `@Slack1` returning an error?" and Copilot has the exact context it needs to diagnose the issue.
+
+For complex tasks, Copilot uses subagents—breaking requests into discrete operations and executing them sequentially. Ask it to "add error handling to this workflow" and it will analyze your blocks, determine where failures could occur, add appropriate condition blocks, and wire up notification paths. Each change surfaces as a diff for your review before applying.
+
+<DiffControlsDemo />
+
+## MCP Deployment
+
+![MCP Deployment](/studio/v0-5/mcp.png)
+
+Deploy any workflow as an [MCP](https://modelcontextprotocol.io) server. Once deployed, the workflow becomes a callable tool for any MCP-compatible agent—[Claude Desktop](https://claude.ai/download), [Cursor](https://cursor.com), or your own applications.
+
+Sim generates a tool definition from your workflow: the name and description you specify, plus a JSON schema derived from your Start block's input format. The MCP server uses Streamable HTTP transport, so agents connect via a single URL. Authentication is handled via API key headers or public access, depending on your configuration.
+
+Consider a lead enrichment workflow: it queries Apollo for contact data, checks Salesforce for existing records, formats the output, and posts a summary to Slack. That's 8 blocks in Sim. Deploy it as MCP, and any agent can call `enrich_lead("jane@acme.com")` and receive structured data back. The agent treats it as a single tool call—it doesn't need to know about Apollo, Salesforce, or Slack.
+
+This pattern scales to research pipelines, data processing workflows, approval chains, and internal tooling. Anything you build in Sim becomes a tool any agent can invoke.
+
+## Logs & Dashboard
+
+![Logs & Dashboard](/studio/v0-5/dashboard.jpg)
+
+Every workflow execution generates a full trace. Each block records its start time, end time, inputs, outputs, and any errors. For LLM blocks, we capture prompt tokens, completion tokens, and cost by model.
+
+The dashboard aggregates this data into queryable views:
+
+- **Trace spans**: Hierarchical view of block executions with timing waterfall
+- **Cost attribution**: Token usage and spend broken down by model per execution
+- **Error context**: Full stack traces with the block, input values, and failure reason
+- **Filtering**: Query by time range, trigger type, workflow, or status
+- **Execution snapshots**: Each run captures the workflow state at execution time—restore to see exactly what was running
+
+This level of observability is necessary when workflows handle production traffic—sending customer emails, processing payments, or making API calls on behalf of users.
+
+## Realtime Collaboration
+
+![Realtime Collaboration](/studio/v0-5/collaboration.png)
+
+Multiple users can edit the same workflow simultaneously. Changes propagate in real time—you see teammates' cursors, block additions, and configuration updates as they happen.
+
+The editor now supports full undo/redo history (Cmd+Z / Cmd+Shift+Z), so you can step back through changes without losing work. Copy and paste works for individual blocks, groups of blocks, or entire subflows—select what you need, Cmd+C, and paste into the same workflow or a different one. This makes it easy to duplicate patterns, share components across workflows, or quickly prototype variations.
+
+This is particularly useful during development sessions where engineers, product managers, and domain experts need to iterate together. Everyone works on the same workflow state, and changes sync immediately across all connected clients.
+
+## Versioning
+
+![Versioning](/studio/v0-5/versioning.png)
+
+Every deployment creates a new version. The version history shows who deployed what and when, with a preview of the workflow state at that point in time. Roll back to any previous version with one click—the live deployment updates immediately.
+
+This matters when something breaks in production. You can instantly revert to the last known good version while you debug, rather than scrambling to fix forward. It also provides a clear audit trail: you can see exactly what changed between versions and who made the change.
+
+---
+
+## 100+ Integrations
+
+![Integrations](/studio/v0-5/integrations.png)
+
+v0.5 adds **100+ integrations** with **300+ actions**. These cover the specific operations you need—not just generic CRUD, but actions like "send Slack message to channel," "create Jira ticket with custom fields," "query Postgres with parameterized SQL," or "enrich contact via Apollo."
+
+- **CRMs & Sales**: Salesforce, HubSpot, Pipedrive, Apollo, Wealthbox
+- **Communication**: Slack, Discord, Microsoft Teams, Telegram, WhatsApp, Twilio
+- **Productivity**: Notion, Confluence, Google Workspace, Microsoft 365, Airtable, Asana, Trello
+- **Developer Tools**: GitHub, GitLab, Jira, Linear, Sentry, Datadog, Grafana
+- **Databases**: PostgreSQL, MySQL, MongoDB, [Supabase](https://supabase.com), DynamoDB, Elasticsearch, [Pinecone](https://pinecone.io), [Qdrant](https://qdrant.tech), Neo4j
+- **Finance**: Stripe, Kalshi, Polymarket
+- **Web & Search**: [Firecrawl](https://firecrawl.dev), [Exa](https://exa.ai), [Tavily](https://tavily.com), [Jina](https://jina.ai), [Serper](https://serper.dev)
+- **Cloud**: AWS (S3, RDS, SQS, Textract, Bedrock), [Browser Use](https://browser-use.com), [Stagehand](https://github.com/browserbase/stagehand)
+
+Each integration handles OAuth or API key authentication. Connect once, and the credentials are available across all workflows in your workspace.
+
+---
+
+## Triggers
+
+Workflows can be triggered through multiple mechanisms:
+
+**Webhooks**: Sim provisions a unique HTTPS endpoint for each workflow. Incoming POST requests are parsed and passed to the first block as input. Supports standard webhook patterns including signature verification for services that provide it.
+
+**Schedules**: Cron-based scheduling with timezone support. Use the visual scheduler or write expressions directly. Execution locks prevent overlapping runs.
+
+**Chat**: Deploy workflows as conversational interfaces. Messages stream to your workflow, responses stream back to the user. Supports multi-turn context.
+
+**API**: REST endpoint with your workflow's input schema. Call it from any system that can make HTTP requests.
+
+**Integration triggers**: Event-driven triggers for specific services—GitHub (PR opened, issue created, push), Stripe (payment succeeded, subscription updated), TypeForm (form submitted), RSS (new item), and more.
+
+**Forms**: Coming soon—build custom input forms that trigger workflows directly.
+
+---
+
+## Knowledge Base
+
+![Knowledge Base](/studio/v0-5/kb.png)
+
+Upload documents—PDFs, text files, markdown, HTML—and make them queryable by your agents. This is [RAG](https://en.wikipedia.org/wiki/Retrieval-augmented_generation) (Retrieval Augmented Generation) built directly into Sim.
+
+Documents are chunked, embedded, and indexed using hybrid search ([BM25](https://en.wikipedia.org/wiki/Okapi_BM25) + vector embeddings). Agent blocks can query the knowledge base as a tool, retrieving relevant passages based on semantic similarity and keyword matching. When documents are updated, they re-index automatically.
+
+Use cases:
+
+- **Customer support agents** that reference your help docs and troubleshooting guides to resolve tickets
+- **Sales assistants** that pull from product specs, pricing sheets, and competitive intel
+- **Internal Q&A bots** that answer questions about company policies, HR docs, or engineering runbooks
+- **Research workflows** that synthesize information from uploaded papers, reports, or data exports
+
+---
+
+## New Blocks
+
+### Human in the Loop
+
+Pause workflow execution pending human approval. The block sends a notification (email, Slack, or webhook) with approve/reject actions. Execution resumes only on approval—useful for high-stakes operations like customer-facing emails, financial transactions, or content publishing.
+
+### Agent Block
+
+The Agent block now supports three additional tool types:
+
+- **Workflows as tools**: Agents can invoke other Sim workflows, enabling hierarchical architectures where a coordinator agent delegates to specialized sub-workflows
+- **Knowledge base queries**: Agents search your indexed documents directly, retrieving relevant context for their responses
+- **Custom functions**: Execute JavaScript or Python code in isolated sandboxes with configurable timeout and memory limits
+
+### Subflows
+
+Group blocks into collapsible subflows. Use them for loops (iterate over arrays), parallel execution (run branches concurrently), or logical organization. Subflows can be nested and keep complex workflows manageable.
+
+### Router
+
+Conditional branching based on data or LLM classification. Define rules or let the router use an LLM to determine intent and select the appropriate path.
+
+The router now exposes its reasoning in execution logs—when debugging unexpected routing, you can see exactly why a particular branch was selected.
+
+---
+
+## Model Providers
+
+Sim supports 14 providers: [OpenAI](https://openai.com), [Anthropic](https://anthropic.com), [Google](https://ai.google.dev), [Azure OpenAI](https://azure.microsoft.com/en-us/products/ai-services/openai-service), [xAI](https://x.ai), [Mistral](https://mistral.ai), [Deepseek](https://deepseek.com), [Groq](https://groq.com), [Cerebras](https://cerebras.ai), [Ollama](https://ollama.com), and [OpenRouter](https://openrouter.ai).
+
+New in v0.5:
+
+- **[AWS Bedrock](https://aws.amazon.com/bedrock)**: Claude, Nova, Llama, Mistral, and Cohere models via your AWS account
+- **[Google Vertex AI](https://cloud.google.com/vertex-ai)**: Gemini models through Google Cloud
+- **[vLLM](https://github.com/vllm-project/vllm)**: Self-hosted models on your own infrastructure
+
+Model selection is per-block, so you can use faster/cheaper models for simple tasks and more capable models where needed.
+
+---
+
+## Developer Experience
+
+**Custom Tools**: Define your own integrations with custom HTTP endpoints, authentication (API key, OAuth, Bearer token), and request/response schemas. Custom tools appear in the block palette alongside built-in integrations.
+
+**Environment Variables**: Encrypted key-value storage for secrets and configuration. Variables are decrypted at runtime and can be referenced in any block configuration.
+
+**Import/Export**: Export workflows or entire workspaces as JSON. Imports preserve all blocks, connections, configurations, and variable references.
+
+**File Manager**: Upload files to your workspace for use in workflows—templates, seed data, static assets. Files are accessible via internal references or presigned URLs.
+
+---
+
+## Get Started
+
+Available now at [sim.ai](https://sim.ai). Check out the [docs](https://docs.sim.ai) to dive deeper.
+
+*Questions? [help@sim.ai](mailto:help@sim.ai) · [Discord](https://sim.ai/discord)*

apps/sim/lib/blog/code.tsx

@@ -1,7 +1,5 @@
 'use client'
 
-import { useState } from 'react'
-import { Check, Copy } from 'lucide-react'
 import { Code } from '@/components/emcn'
 
 interface CodeBlockProps {
@@ -10,30 +8,8 @@ interface CodeBlockProps {
 }
 
 export function CodeBlock({ code, language }: CodeBlockProps) {
-  const [copied, setCopied] = useState(false)
-
-  const handleCopy = () => {
-    navigator.clipboard.writeText(code)
-    setCopied(true)
-    setTimeout(() => setCopied(false), 2000)
-  }
-
   return (
     <div className='dark w-full overflow-hidden rounded-md border border-[#2a2a2a] bg-[#1F1F1F] text-sm'>
-      <div className='flex items-center justify-between border-[#2a2a2a] border-b px-4 py-1.5'>
-        <span className='text-[#A3A3A3] text-xs'>{language}</span>
-        <button
-          onClick={handleCopy}
-          className='text-[#A3A3A3] transition-colors hover:text-gray-300'
-          title='Copy code'
-        >
-          {copied ? (
-            <Check className='h-3 w-3' strokeWidth={2} />
-          ) : (
-            <Copy className='h-3 w-3' strokeWidth={2} />
-          )}
-        </button>
-      </div>
       <Code.Viewer
         code={code}
         showGutter

apps/sim/lib/blog/mdx.tsx

@@ -61,7 +61,7 @@ export const mdxComponents: MDXRemoteProps['components'] = {
       )}
     />
   ),
-  li: (props: any) => <li {...props} className={clsx('mb-2', props.className)} />,
+  li: (props: any) => <li {...props} className={clsx('mb-1', props.className)} />,
   strong: (props: any) => <strong {...props} className={clsx('font-semibold', props.className)} />,
   em: (props: any) => <em {...props} className={clsx('italic', props.className)} />,
   a: (props: any) => {

apps/sim/lib/blog/registry.ts

@@ -10,6 +10,8 @@ import type { BlogMeta, BlogPost, TagWithCount } from '@/lib/blog/schema'
 import { AuthorSchema, BlogFrontmatterSchema } from '@/lib/blog/schema'
 import { AUTHORS_DIR, BLOG_DIR, byDateDesc, ensureContentDirs, toIsoDate } from '@/lib/blog/utils'
 
+const postComponentsRegistry: Record<string, Record<string, React.ComponentType>> = {}
+
 let cachedMeta: BlogMeta[] | null = null
 let cachedAuthors: Record<string, any> | null = null
 
@@ -99,6 +101,21 @@ export async function getAllTags(): Promise<TagWithCount[]> {
     .sort((a, b) => b.count - a.count || a.tag.localeCompare(b.tag))
 }
 
+async function loadPostComponents(slug: string): Promise<Record<string, React.ComponentType>> {
+  if (postComponentsRegistry[slug]) {
+    return postComponentsRegistry[slug]
+  }
+
+  try {
+    const postComponents = await import(`@/content/blog/${slug}/components`)
+    postComponentsRegistry[slug] = postComponents
+    return postComponents
+  } catch {
+    postComponentsRegistry[slug] = {}
+    return {}
+  }
+}
+
 export async function getPostBySlug(slug: string): Promise<BlogPost> {
   const meta = await scanFrontmatters()
   const found = meta.find((m) => m.slug === slug)
@@ -107,9 +124,13 @@ export async function getPostBySlug(slug: string): Promise<BlogPost> {
   const raw = await fs.readFile(mdxPath, 'utf-8')
   const { content, data } = matter(raw)
   const fm = BlogFrontmatterSchema.parse(data)
+
+  const postComponents = await loadPostComponents(slug)
+  const mergedComponents = { ...mdxComponents, ...postComponents }
+
   const compiled = await compileMDX({
     source: content,
-    components: mdxComponents as any,
+    components: mergedComponents as any,
     options: {
       parseFrontmatter: false,
       mdxOptions: {