diff --git a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/mermaid-diagram.tsx b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/mermaid-diagram.tsx
index 10019822f72..9e8c3c634c4 100644
--- a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/mermaid-diagram.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/mermaid-diagram.tsx
@@ -4,6 +4,10 @@ import { memo, useEffect, useState } from 'react'
 import { toError } from '@sim/utils/errors'
 import { generateShortId } from '@sim/utils/id'
 import { useTheme } from 'next-themes'
+import {
+  mermaidWorkflowCss,
+  readMermaidThemeVariables,
+} from '@/app/workspace/[workspaceId]/files/components/file-viewer/mermaid-theme'
 import { PreviewLoadingFrame } from './preview-shared'
 import { ZoomablePreview } from './zoomable-preview'
 
@@ -124,10 +128,23 @@ export const MermaidDiagram = memo(function MermaidDiagram({
         const { default: mermaid } = await import('mermaid')
         if (cancelled) return
 
+        const themeVariables = readMermaidThemeVariables(
+          document.documentElement,
+          mermaidTheme === 'dark'
+        )
         mermaid.initialize({
           startOnLoad: false,
           securityLevel: 'strict',
-          theme: mermaidTheme,
+          theme: 'base',
+          themeCSS: mermaidWorkflowCss(String(themeVariables.fontFamily)),
+          flowchart: {
+            curve: 'basis',
+            padding: 12,
+            nodeSpacing: 36,
+            rankSpacing: 56,
+            wrappingWidth: 180,
+          },
+          themeVariables,
         })
         mermaid.setParseErrorHandler?.(() => undefined)
 
diff --git a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/mermaid-theme.ts b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/mermaid-theme.ts
new file mode 100644
index 00000000000..e5f43e0802b
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/mermaid-theme.ts
@@ -0,0 +1,88 @@
+/**
+ * Mermaid `base` theme variables drawn from the app's tokens, so diagrams match the editor and
+ * charts instead of Mermaid's stock palette. Mermaid derives shades from these with its own colour
+ * library, so every token read here must resolve to a plain hex or rgb value.
+ */
+export function readMermaidThemeVariables(
+  element: Element,
+  darkMode: boolean
+): Record<string, string | boolean> {
+  const styles = getComputedStyle(element)
+  const token = (name: string) => {
+    const value = styles.getPropertyValue(name).trim()
+    if (!value) throw new Error(`Missing diagram theme token ${name}`)
+    return value
+  }
+  const background = token('--bg')
+  const node = token('--surface-2')
+  const muted = token('--surface-4')
+  const subtle = token('--surface-5')
+  const border = token('--border')
+  const text = token('--text-primary')
+  const body = token('--text-body')
+  const line = token('--text-icon')
+  return {
+    darkMode,
+    fontFamily: getComputedStyle(document.body).fontFamily,
+    fontSize: '14px',
+    background,
+    primaryColor: node,
+    primaryTextColor: text,
+    primaryBorderColor: border,
+    secondaryColor: muted,
+    secondaryTextColor: body,
+    secondaryBorderColor: border,
+    tertiaryColor: subtle,
+    tertiaryTextColor: body,
+    tertiaryBorderColor: border,
+    mainBkg: node,
+    nodeBorder: border,
+    textColor: body,
+    lineColor: token('--workflow-edge'),
+    clusterBkg: token('--surface-3'),
+    clusterBorder: border,
+    edgeLabelBackground: background,
+    noteBkgColor: muted,
+    noteTextColor: body,
+    noteBorderColor: border,
+    actorBkg: node,
+    actorBorder: border,
+    actorTextColor: text,
+    actorLineColor: line,
+    signalColor: line,
+    signalTextColor: body,
+    labelBoxBkgColor: subtle,
+    labelBoxBorderColor: border,
+    labelTextColor: body,
+    loopTextColor: body,
+    sequenceNumberColor: background,
+    pie1: body,
+    pie2: line,
+    pie3: token('--text-subtle'),
+    pie4: token('--text-muted'),
+    pieStrokeColor: background,
+    pieTitleTextColor: text,
+    pieSectionTextColor: background,
+    pieLegendTextColor: body,
+  }
+}
+
+/**
+ * Flowcharts drawn like workflow canvas blocks and edges: rounded cards with a 1.5px outline,
+ * 1.5px edges without arrowheads, and subgraphs as rounded subflow containers. Labels are pinned
+ * to the font Mermaid measured them with; otherwise they inherit the surrounding document's font
+ * and line height and overflow their boxes. Edge rules are scoped to flowchart classes so sequence
+ * and other diagrams keep their arrows.
+ */
+export function mermaidWorkflowCss(fontFamily: string): string {
+  return `
+  .label, .nodeLabel, .edgeLabel, .label p, .nodeLabel p, .edgeLabel p {
+    font-family: ${fontFamily}; font-size: 14px; line-height: 1.5; letter-spacing: normal;
+  }
+  .edgeLabel, .edgeLabel p { font-size: 12px; }
+  .node rect, .node polygon, .node circle, .node path { stroke-width: 1.5px; }
+  .node rect { rx: 10px; ry: 10px; }
+  .cluster rect { rx: 14px; ry: 14px; stroke-width: 1.5px; }
+  .flowchart-link { stroke-width: 1.5px; marker-end: none !important; }
+`
+}
diff --git a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/code-block.tsx b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/code-block.tsx
index 227331565a1..80b86ad0d98 100644
--- a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/code-block.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/code-block.tsx
@@ -12,6 +12,7 @@ import { Check, ChevronDown, Code, Duplicate, Eye, Wrap } from '@sim/emcn/icons'
 import type { ReactNodeViewProps } from '@tiptap/react'
 import { NodeViewContent, NodeViewWrapper, ReactNodeViewRenderer } from '@tiptap/react'
 import { DASHBOARD_EMBED_LANGUAGE } from '@/lib/dashboards/embed-language'
+import { DIFF_EMBED_LANGUAGE } from '@/lib/diff/embed-language'
 import { MarkdownStreamingContext } from '@/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/markdown-streaming-context'
 import { looksLikeMermaid, MermaidDiagram } from '../mermaid-diagram'
 import { MarkdownCodeBlock } from './code-block-schema'
@@ -22,6 +23,9 @@ import { useEditorEditable } from './use-editor-editable'
 const DashboardEmbed = lazy(() =>
   import('@/components/dashboards/dashboard-embed').then((m) => ({ default: m.DashboardEmbed }))
 )
+const DiffEmbed = lazy(() =>
+  import('@/components/diff/diff-embed').then((m) => ({ default: m.DiffEmbed }))
+)
 
 const PLAIN = 'plain'
 const MERMAID = 'mermaid'
@@ -74,7 +78,8 @@ function CodeBlockView({ node, updateAttributes, editor, getPos }: ReactNodeView
   const text = node.textContent
   const isMermaid = explicitLanguage === MERMAID || (!explicitLanguage && looksLikeMermaid(text))
   const isDashboard = explicitLanguage === DASHBOARD_EMBED_LANGUAGE
-  const isRendered = isMermaid || isDashboard
+  const isDiff = explicitLanguage === DIFF_EMBED_LANGUAGE
+  const isRendered = isMermaid || isDashboard || isDiff
 
   // Editable Mermaid shows source while the caret is focused inside the block and re-renders the
   // diagram on blur (the Linear/GitHub model). The Show source / Show diagram control drives this by
@@ -148,7 +153,13 @@ function CodeBlockView({ node, updateAttributes, editor, getPos }: ReactNodeView
           <button
             type='button'
             aria-label={
-              showSource ? (isDashboard ? 'Show dashboard' : 'Show diagram') : 'Show source'
+              showSource
+                ? isDashboard
+                  ? 'Show dashboard'
+                  : isDiff
+                    ? 'Show diff'
+                    : 'Show diagram'
+                : 'Show source'
             }
             onMouseDown={(event) => event.preventDefault()}
             onClick={toggleSource}
@@ -225,7 +236,7 @@ function CodeBlockView({ node, updateAttributes, editor, getPos }: ReactNodeView
         // Select the whole node instead of placing a caret, which would flip the block to source.
         <div
           contentEditable={false}
-          className={cn(isDashboard && 'dashboard-embed')}
+          className={cn(isDashboard && 'dashboard-embed', isDiff && 'diff-embed')}
           onMouseDown={(event) => {
             const target = event.target
             if (!(target instanceof Element) || !event.currentTarget.contains(target)) return
@@ -239,6 +250,10 @@ function CodeBlockView({ node, updateAttributes, editor, getPos }: ReactNodeView
             <Suspense fallback={null}>
               <DashboardEmbed source={text} isStreaming={isStreaming} />
             </Suspense>
+          ) : isDiff ? (
+            <Suspense fallback={null}>
+              <DiffEmbed source={text} isStreaming={isStreaming} />
+            </Suspense>
           ) : (
             <MermaidDiagram definition={text} className='mermaid-diagram-frame' />
           )}
diff --git a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/rich-markdown-editor.css b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/rich-markdown-editor.css
index 7fd223915c6..902baad1c02 100644
--- a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/rich-markdown-editor.css
+++ b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/rich-markdown-editor.css
@@ -276,19 +276,22 @@
   color: var(--brand-secondary);
 }
 
-.rich-markdown-prose pre,
-.rich-markdown-prose .mermaid-diagram-frame {
+.rich-markdown-prose pre {
   background: var(--surface-5);
   border-radius: 8px;
   padding: 1rem;
   overflow-x: auto;
 }
 
-/* A rendered Mermaid diagram wears the same frame as a code block (single source of truth above),
-   centered within it. */
+/* A rendered Mermaid diagram matches the workflow canvas surface. */
 .rich-markdown-prose .mermaid-diagram-frame {
   display: flex;
   justify-content: center;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 1rem;
+  overflow-x: auto;
 }
 
 /* Override ProseMirror's built-in `.ProseMirror pre { white-space: pre-wrap }` (the
@@ -309,8 +312,7 @@
   overflow-wrap: anywhere;
 }
 
-.dark .rich-markdown-prose pre,
-.dark .rich-markdown-prose .mermaid-diagram-frame {
+.dark .rich-markdown-prose pre {
   background: var(--code-bg);
 }
 
@@ -391,6 +393,13 @@
   margin: 1rem 0;
 }
 
+/* A diff's links are chips, so they keep their own colour instead of the prose link style. */
+.rich-markdown-prose .diff-embed a,
+.rich-markdown-prose .diff-embed a:hover {
+  color: revert-layer;
+  text-decoration: revert-layer;
+}
+
 /* A dashboard results table sizes its own columns and sits flush in its panel. */
 .rich-markdown-nodes .dashboard-embed table {
   table-layout: auto;
diff --git a/apps/sim/components/dashboards/dashboard-panel.tsx b/apps/sim/components/dashboards/dashboard-panel.tsx
index f75d4f924aa..ac808777880 100644
--- a/apps/sim/components/dashboards/dashboard-panel.tsx
+++ b/apps/sim/components/dashboards/dashboard-panel.tsx
@@ -57,7 +57,7 @@ interface ResultsTableProps {
 }
 function ResultsTable({ data, timeField, timeZone }: ResultsTableProps) {
   return (
-    <div className='h-full overflow-auto'>
+    <div className='max-h-[400px] overflow-auto'>
       <Table>
         <TableHeader>
           <TableRow>
@@ -195,7 +195,7 @@ export function DashboardPanel({
                 : barChartHeight !== null
                   ? 'relative'
                   : 'relative h-[240px]'
-              : 'relative h-[400px]')
+              : 'relative grid min-h-[120px]')
         )}
         style={!timeSeries && barChartHeight !== null ? { height: barChartHeight } : undefined}
       >
diff --git a/apps/sim/components/diff/diff-embed.tsx b/apps/sim/components/diff/diff-embed.tsx
new file mode 100644
index 00000000000..8509a0fb5d5
--- /dev/null
+++ b/apps/sim/components/diff/diff-embed.tsx
@@ -0,0 +1,284 @@
+'use client'
+
+import type { ComponentType, ReactNode } from 'react'
+import { cn } from '@sim/emcn'
+import { ArrowUpRight, Database, File } from '@sim/emcn/icons'
+import { getErrorMessage } from '@sim/utils/errors'
+import Link from 'next/link'
+import { useParams } from 'next/navigation'
+import { DiffView } from '@/components/diff/diff-view'
+import {
+  type DiffLine,
+  type DiffSource,
+  parseUnifiedDiff,
+  sameSource,
+  type UnifiedDiff,
+} from '@/lib/diff/unified'
+import { workspaceResourcePath } from '@/lib/resources'
+import { useDocumentQuery } from '@/hooks/queries/kb/knowledge'
+import { useWorkspaceFileRecord } from '@/hooks/queries/workspace-files'
+
+interface DiffEmbedProps {
+  /** The fence body: a unified diff, optionally naming its `sim:` sources in `---`/`+++`. */
+  source: string
+  /** True while an agent is still writing the document, so the fence may be incomplete. */
+  isStreaming: boolean
+}
+interface NoticeProps {
+  children: ReactNode
+  tone?: 'muted' | 'error'
+}
+/** A diff source resolved to what its card header shows. */
+interface ResolvedSource {
+  title: string
+  kindLabel: string
+  icon: ComponentType<{ className?: string }>
+  updated: string | null
+  href: string
+}
+interface CardHeading {
+  title: string
+  meta: string
+  icon?: ComponentType<{ className?: string }>
+  href?: string
+}
+interface ExcerptCardProps {
+  heading: CardHeading
+  diff: UnifiedDiff
+  side: 'old' | 'new'
+}
+interface InlineMarkdownProps {
+  text: string
+}
+interface ProseLineProps {
+  line: DiffLine
+}
+interface CodeDiffProps {
+  diff: UnifiedDiff
+  heading: CardHeading
+}
+
+const NOTICE_CLASS =
+  'rounded-lg bg-[var(--surface-5)] p-4 pr-16 text-caption dark:bg-[var(--surface-4)]'
+const MARK = 'rounded-[3px] px-1 text-[var(--text-primary)]'
+
+function Notice({ children, tone = 'muted' }: NoticeProps) {
+  return (
+    <div
+      role={tone === 'error' ? 'alert' : 'status'}
+      className={cn(
+        NOTICE_CLASS,
+        'whitespace-pre-wrap',
+        tone === 'error' ? 'text-[var(--text-error)]' : 'text-[var(--text-muted)]'
+      )}
+    >
+      {children}
+    </div>
+  )
+}
+
+function changeCounts(diff: UnifiedDiff): string {
+  let added = 0
+  let removed = 0
+  for (const hunk of diff.hunks)
+    for (const line of hunk.lines) {
+      if (line.type === 'add') added++
+      else if (line.type === 'del') removed++
+    }
+  return `+${added} −${removed}`
+}
+
+function formatDate(value: string | Date | null | undefined): string | null {
+  if (!value) return null
+  return new Intl.DateTimeFormat('en-US', {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+  }).format(new Date(value))
+}
+
+/**
+ * Resolves a `sim:` source for its card header. Every query is disabled unless the source is of
+ * its kind, so one hook serves both kinds and either side of a comparison.
+ */
+function useDiffSource(
+  workspaceId: string | null,
+  source: DiffSource | null
+): ResolvedSource | null {
+  const fileId = workspaceId && source?.kind === 'file' ? source.fileId : ''
+  const knowledgeBaseId =
+    workspaceId && source?.kind === 'knowledge' ? source.knowledgeBaseId : undefined
+  const documentId = workspaceId && source?.kind === 'knowledge' ? source.documentId : undefined
+  const fileRecord = useWorkspaceFileRecord(workspaceId ?? '', fileId)
+  const documentRecord = useDocumentQuery(knowledgeBaseId, documentId)
+  if (!workspaceId || !source) return null
+  if (source.kind === 'file')
+    return {
+      title: fileRecord.data?.name ?? 'File',
+      kindLabel: 'Workspace file',
+      icon: File,
+      updated: formatDate(fileRecord.data?.updatedAt),
+      href: workspaceResourcePath(workspaceId, 'file', source.fileId),
+    }
+  return {
+    title: documentRecord.data?.filename ?? 'Document',
+    kindLabel: 'Knowledge base',
+    icon: Database,
+    updated: formatDate(documentRecord.data?.uploadedAt),
+    href: `${workspaceResourcePath(workspaceId, 'knowledge', source.knowledgeBaseId)}/${encodeURIComponent(source.documentId)}`,
+  }
+}
+
+function heading(resolved: ResolvedSource | null, fallback: string, detail: string): CardHeading {
+  if (!resolved) return { title: fallback, meta: detail }
+  return {
+    title: resolved.title,
+    meta: [resolved.kindLabel, resolved.updated && `Updated ${resolved.updated}`, detail]
+      .filter(Boolean)
+      .join(' · '),
+    icon: resolved.icon,
+    href: resolved.href,
+  }
+}
+
+const INLINE_MARKDOWN = /(\*\*[^*]+\*\*|`[^`]+`)/
+
+/** Renders the inline `**bold**` and `` `code` `` that source excerpts carry, as written. */
+function InlineMarkdown({ text }: InlineMarkdownProps) {
+  return (
+    <>
+      {text.split(INLINE_MARKDOWN).map((part, index) =>
+        part.startsWith('**') && part.endsWith('**') && part.length > 4 ? (
+          <strong key={index} className='font-medium'>
+            {part.slice(2, -2)}
+          </strong>
+        ) : part.startsWith('`') && part.endsWith('`') && part.length > 2 ? (
+          <code
+            key={index}
+            className='rounded-[3px] bg-[var(--surface-5)] px-1 font-mono text-caption dark:bg-[var(--surface-4)]'
+          >
+            {part.slice(1, -1)}
+          </code>
+        ) : (
+          part
+        )
+      )}
+    </>
+  )
+}
+
+/** Markdown headings read as headings; everything else is a paragraph of the source. */
+function ProseLine({ line }: ProseLineProps) {
+  const headingMatch = /^#{1,6}\s+(.*)$/.exec(line.text)
+  const text = headingMatch ? headingMatch[1] : line.text
+  const weight = headingMatch && 'font-medium'
+  if (line.type === 'context')
+    return (
+      <p className={cn('text-[var(--text-muted)]', weight)}>
+        <InlineMarkdown text={text} />
+      </p>
+    )
+  return (
+    <p>
+      <mark className={cn(MARK, 'bg-[var(--badge-amber-bg)]', weight)}>
+        <InlineMarkdown text={text} />
+      </mark>
+    </p>
+  )
+}
+
+/** One side of a two-document comparison, in the shape of the page it quotes, its claim marked. */
+function ExcerptCard({ heading, diff, side }: ExcerptCardProps) {
+  const Icon = heading.icon
+  const skip = side === 'old' ? 'add' : side === 'new' ? 'del' : null
+  return (
+    <article className='flex min-w-0 flex-col gap-3 rounded-lg border border-[var(--border)] px-4 py-3'>
+      <header className='flex items-start gap-2 pr-14'>
+        {Icon && <Icon className='mt-0.5 size-[14px] shrink-0 text-[var(--text-icon)]' />}
+        <div className='flex min-w-0 flex-1 flex-col'>
+          <div className='flex min-w-0 items-center gap-1'>
+            <span className='truncate text-[var(--text-body)] text-small'>{heading.title}</span>
+            {heading.href && (
+              <Link href={heading.href} aria-label={`Open ${heading.title}`} className='shrink-0'>
+                <ArrowUpRight className='size-[12px] text-[var(--text-icon)]' />
+              </Link>
+            )}
+          </div>
+          <span className='text-[var(--text-muted)] text-caption'>{heading.meta}</span>
+        </div>
+      </header>
+      <div className='flex flex-col gap-2 text-small leading-relaxed'>
+        {diff.hunks.map((hunk, hunkIndex) => (
+          <div key={hunkIndex} className='flex flex-col gap-2'>
+            {hunkIndex > 0 && <p className='text-[var(--text-muted)] text-caption'>⋯</p>}
+            {hunk.lines
+              .filter((line) => line.type !== skip && line.text.trim() !== '')
+              .map((line, index) => (
+                <ProseLine key={index} line={line} />
+              ))}
+          </div>
+        ))}
+      </div>
+    </article>
+  )
+}
+
+function CodeDiff({ diff, heading }: CodeDiffProps) {
+  const Icon = heading.icon
+  return (
+    <div className='overflow-hidden rounded-lg border border-[var(--border)] font-season'>
+      <div className='flex items-center gap-2 border-[var(--border)] border-b bg-[var(--surface-2)] py-1.5 pr-[68px] pl-3 text-caption'>
+        {Icon && <Icon className='size-[14px] shrink-0 text-[var(--text-icon)]' />}
+        <span className='shrink-0 text-[var(--text-body)]'>{heading.title}</span>
+        {heading.href && (
+          <Link href={heading.href} aria-label={`Open ${heading.title}`} className='shrink-0'>
+            <ArrowUpRight className='size-[12px] text-[var(--text-icon)]' />
+          </Link>
+        )}
+        <span className='min-w-0 flex-1 truncate text-[var(--text-muted)]'>{heading.meta}</span>
+      </div>
+      <DiffView hunks={diff.hunks} />
+    </div>
+  )
+}
+
+function parse(
+  source: string
+): { diff: UnifiedDiff; error?: never } | { error: string; diff?: never } {
+  try {
+    return { diff: parseUnifiedDiff(source) }
+  } catch (error) {
+    return { error: getErrorMessage(error, 'Invalid diff') }
+  }
+}
+
+/**
+ * A ```diff fence: the change is written into the document, so it renders without any history.
+ * `sim:` sources in its header name the workspace files or knowledge documents it quotes, shown
+ * with a link in each card header. An edit renders line by line; two different documents render
+ * as side-by-side excerpts. A public share has no workspace session, so it shows no source names.
+ */
+export function DiffEmbed({ source, isStreaming }: DiffEmbedProps) {
+  const params = useParams()
+  const workspaceId = typeof params.workspaceId === 'string' ? params.workspaceId : null
+  const parsed = parse(source)
+  const diff = parsed.diff
+  const comparison = Boolean(
+    diff?.oldSource && diff.newSource && !sameSource(diff.oldSource, diff.newSource)
+  )
+  const oldSide = useDiffSource(workspaceId, diff?.oldSource ?? null)
+  const newSide = useDiffSource(workspaceId, comparison ? (diff?.newSource ?? null) : null)
+  if (isStreaming) return <Notice>The diff loads when Sim finishes writing.</Notice>
+  if (!diff) return <Notice tone='error'>{parsed.error}</Notice>
+
+  if (comparison)
+    return (
+      <div className='grid grid-cols-1 gap-3 font-season sm:grid-cols-2'>
+        <ExcerptCard diff={diff} side='old' heading={heading(oldSide, 'Before', '')} />
+        <ExcerptCard diff={diff} side='new' heading={heading(newSide, 'After', '')} />
+      </div>
+    )
+  return (
+    <CodeDiff diff={diff} heading={heading(oldSide, diff.path ?? 'Diff', changeCounts(diff))} />
+  )
+}
diff --git a/apps/sim/components/diff/diff-view.tsx b/apps/sim/components/diff/diff-view.tsx
new file mode 100644
index 00000000000..9f84d92e858
--- /dev/null
+++ b/apps/sim/components/diff/diff-view.tsx
@@ -0,0 +1,203 @@
+'use client'
+
+import { Fragment, useState } from 'react'
+import { cn } from '@sim/emcn'
+import { diffWordsWithSpace } from 'diff'
+import type { DiffHunk, DiffLine } from '@/lib/diff/unified'
+
+/** Unchanged lines kept visible on each side of a collapsed run. */
+const CONTEXT_EDGE = 3
+/** A run of unchanged lines collapses once it is longer than this. */
+const COLLAPSE_AFTER = CONTEXT_EDGE * 2 + 2
+/** Word-level comparison is skipped past this many characters, so huge lines stay cheap. */
+const WORD_DIFF_MAX_CHARS = 1000
+
+const ADD_ROW =
+  'bg-[color-mix(in_srgb,var(--badge-success-bg)_35%,transparent)] text-[var(--text-primary)]'
+const DEL_ROW =
+  'bg-[color-mix(in_srgb,var(--badge-error-bg)_35%,transparent)] text-[var(--text-primary)]'
+const CONTEXT_ROW = 'text-[var(--text-body)]'
+const ADD_WORD = 'rounded-sm bg-[color-mix(in_srgb,var(--badge-success-bg)_90%,transparent)]'
+const DEL_WORD = 'rounded-sm bg-[color-mix(in_srgb,var(--badge-error-bg)_90%,transparent)]'
+const GUTTER = 'select-none pl-3 text-right text-[var(--text-muted)] tabular-nums'
+const MARKER = 'select-none pl-3'
+const TEXT = 'whitespace-pre py-0.5 pr-3 pl-1'
+
+interface Segment {
+  text: string
+  changed: boolean
+}
+interface DiffViewProps {
+  hunks: DiffHunk[]
+}
+interface LineTextProps {
+  line: DiffLine
+  segments: Segment[] | undefined
+}
+interface CollapsedRunProps {
+  count: number
+  onExpand: () => void
+}
+
+/**
+ * Pairs each run of removed lines with the added lines that follow it, so a reworded line shows
+ * which words changed. Unpaired lines keep whole-line highlighting.
+ */
+function wordSegments(lines: DiffLine[]): Map<DiffLine, Segment[]> {
+  const segments = new Map<DiffLine, Segment[]>()
+  for (let index = 0; index < lines.length; ) {
+    if (lines[index].type !== 'del') {
+      index++
+      continue
+    }
+    const dels: DiffLine[] = []
+    while (lines[index]?.type === 'del') dels.push(lines[index++])
+    const adds: DiffLine[] = []
+    while (lines[index]?.type === 'add') adds.push(lines[index++])
+    for (let pair = 0; pair < Math.min(dels.length, adds.length); pair++) {
+      if (dels[pair].text.length + adds[pair].text.length > WORD_DIFF_MAX_CHARS) continue
+      const parts = diffWordsWithSpace(dels[pair].text, adds[pair].text)
+      segments.set(
+        dels[pair],
+        parts
+          .filter((part) => !part.added)
+          .map((part) => ({ text: part.value, changed: !!part.removed }))
+      )
+      segments.set(
+        adds[pair],
+        parts
+          .filter((part) => !part.removed)
+          .map((part) => ({ text: part.value, changed: !!part.added }))
+      )
+    }
+  }
+  return segments
+}
+
+function LineText({ line, segments }: LineTextProps) {
+  if (!segments) return <>{line.text || ' '}</>
+  const word = line.type === 'add' ? ADD_WORD : DEL_WORD
+  return (
+    <>
+      {segments.map((segment, index) => (
+        <span key={index} className={cn(segment.changed && word)}>
+          {segment.text}
+        </span>
+      ))}
+    </>
+  )
+}
+
+function CollapsedRun({ count, onExpand }: CollapsedRunProps) {
+  return (
+    <button
+      type='button'
+      onClick={onExpand}
+      className='sticky left-0 col-span-full w-full bg-[var(--surface-2)] py-1 text-center font-sans text-[var(--text-muted)] text-caption transition-colors hover:text-[var(--text-body)]'
+    >
+      ⋯ {count} unchanged {count === 1 ? 'line' : 'lines'}
+    </button>
+  )
+}
+
+/** Splits a hunk into visible lines and collapsed runs of unchanged lines. */
+function visibleItems(lines: DiffLine[], isExpanded: (start: number) => boolean) {
+  const items: Array<{ line: DiffLine } | { collapsed: number; key: number }> = []
+  for (let index = 0; index < lines.length; ) {
+    if (lines[index].type !== 'context') {
+      items.push({ line: lines[index++] })
+      continue
+    }
+    const start = index
+    while (lines[index]?.type === 'context') index++
+    const run = lines.slice(start, index)
+    const leading = start === 0
+    const trailing = index === lines.length
+    const keepBefore = leading ? 0 : CONTEXT_EDGE
+    const keepAfter = trailing ? 0 : CONTEXT_EDGE
+    if (
+      isExpanded(start) ||
+      run.length <= COLLAPSE_AFTER ||
+      run.length <= keepBefore + keepAfter + 1
+    ) {
+      for (const line of run) items.push({ line })
+      continue
+    }
+    for (const line of run.slice(0, keepBefore)) items.push({ line })
+    items.push({ collapsed: run.length - keepBefore - keepAfter, key: start })
+    for (const line of run.slice(run.length - keepAfter)) items.push({ line })
+  }
+  return items
+}
+
+function rowClass(line: DiffLine | undefined) {
+  return line?.type === 'add' ? ADD_ROW : line?.type === 'del' ? DEL_ROW : line && CONTEXT_ROW
+}
+
+function markerClass(line: DiffLine | undefined) {
+  return line?.type === 'add'
+    ? 'text-[var(--badge-success-text)]'
+    : line?.type === 'del'
+      ? 'text-[var(--badge-error-text)]'
+      : undefined
+}
+
+function marker(line: DiffLine | undefined) {
+  return line?.type === 'add' ? '+' : line?.type === 'del' ? '-' : ' '
+}
+
+/**
+ * A unified diff rendered with word-level highlights, collapsed unchanged runs, and line numbers
+ * when the hunk headers carry them.
+ */
+export function DiffView({ hunks }: DiffViewProps) {
+  /** Expanded runs, keyed `hunk:start` so each collapsed run opens on its own. */
+  const [expanded, setExpanded] = useState<ReadonlySet<string>>(() => new Set())
+  const numbered = hunks.some((hunk) =>
+    hunk.lines.some((line) => line.oldLine !== undefined || line.newLine !== undefined)
+  )
+  const columns = numbered ? 'grid-cols-[auto_auto_auto_1fr]' : 'grid-cols-[auto_1fr]'
+  return (
+    <div className='overflow-x-auto py-1'>
+      <div className={cn('grid w-max min-w-full font-mono text-caption leading-[1.6]', columns)}>
+        {hunks.map((hunk, hunkIndex) => {
+          const segments = wordSegments(hunk.lines)
+          const items = visibleItems(hunk.lines, (start) => expanded.has(`${hunkIndex}:${start}`))
+          return (
+            <Fragment key={hunkIndex}>
+              {(hunk.file || hunk.heading || hunkIndex > 0) && (
+                <div className='sticky left-0 col-span-full px-3 pt-2 pb-1 font-sans text-[var(--text-muted)] text-caption'>
+                  {hunk.file && <span className='text-[var(--text-body)]'>{hunk.file} </span>}
+                  {hunk.heading || (hunk.file ? '' : '⋯')}
+                </div>
+              )}
+              {items.map((item, index) =>
+                'line' in item ? (
+                  <div
+                    key={index}
+                    className={cn('col-span-full grid grid-cols-subgrid', rowClass(item.line))}
+                  >
+                    {numbered && <span className={GUTTER}>{item.line.oldLine ?? ''}</span>}
+                    {numbered && <span className={GUTTER}>{item.line.newLine ?? ''}</span>}
+                    <span className={cn(MARKER, markerClass(item.line))}>{marker(item.line)}</span>
+                    <span className={TEXT}>
+                      <LineText line={item.line} segments={segments.get(item.line)} />
+                    </span>
+                  </div>
+                ) : (
+                  <CollapsedRun
+                    key={`c${item.key}`}
+                    count={item.collapsed}
+                    onExpand={() =>
+                      setExpanded((current) => new Set(current).add(`${hunkIndex}:${item.key}`))
+                    }
+                  />
+                )
+              )}
+            </Fragment>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
diff --git a/apps/sim/lib/diff/embed-language.ts b/apps/sim/lib/diff/embed-language.ts
new file mode 100644
index 00000000000..1c1ee2651b6
--- /dev/null
+++ b/apps/sim/lib/diff/embed-language.ts
@@ -0,0 +1,2 @@
+/** The fence language that renders a unified diff in markdown; kept apart from the parser. */
+export const DIFF_EMBED_LANGUAGE = 'diff'
diff --git a/apps/sim/lib/diff/unified.test.ts b/apps/sim/lib/diff/unified.test.ts
new file mode 100644
index 00000000000..b41bb6f7c49
--- /dev/null
+++ b/apps/sim/lib/diff/unified.test.ts
@@ -0,0 +1,96 @@
+import { describe, expect, it } from 'vitest'
+import { parseUnifiedDiff } from '@/lib/diff/unified'
+
+const runbook = `--- sim:file/wf_runbook
++++ sim:file/wf_runbook
+@@ Re-authorizing @@
+ ## Re-authorizing
+-Tokens never expire, so rotation is not required.
++Tokens rotate every 12h; the refresh job handles it.`
+
+describe('parseUnifiedDiff', () => {
+  it('reads the source from sim: header paths and hunks without line numbers', () => {
+    const diff = parseUnifiedDiff(runbook)
+    expect(diff.oldSource).toEqual({ kind: 'file', fileId: 'wf_runbook' })
+    expect(diff.newSource).toEqual(diff.oldSource)
+    expect(diff.hunks).toEqual([
+      {
+        heading: 'Re-authorizing',
+        lines: [
+          { type: 'context', text: '## Re-authorizing' },
+          { type: 'del', text: 'Tokens never expire, so rotation is not required.' },
+          { type: 'add', text: 'Tokens rotate every 12h; the refresh job handles it.' },
+        ],
+      },
+    ])
+  })
+
+  it('numbers lines from git hunk headers and skips git metadata', () => {
+    const diff = parseUnifiedDiff(
+      'diff --git a/x.ts b/x.ts\nindex 1..2 100644\n--- a/x.ts\n+++ b/x.ts\n@@ -10,2 +10,2 @@ fn\n keep\n-old\n+new\n\\ No newline at end of file'
+    )
+    expect(diff.oldSource).toBeNull()
+    expect(diff.path).toBe('x.ts')
+    expect(diff.hunks[0].heading).toBe('fn')
+    expect(diff.hunks[0].lines).toEqual([
+      { type: 'context', text: 'keep', oldLine: 10, newLine: 10 },
+      { type: 'del', text: 'old', oldLine: 11, newLine: undefined },
+      { type: 'add', text: 'new', oldLine: undefined, newLine: 11 },
+    ])
+  })
+
+  it('reads knowledge document sources', () => {
+    expect(parseUnifiedDiff('--- sim:knowledge/kb_1/doc_2\n-a\n+b').newSource).toEqual({
+      kind: 'knowledge',
+      knowledgeBaseId: 'kb_1',
+      documentId: 'doc_2',
+    })
+  })
+
+  it('splits a multi-file git diff into hunks per file', () => {
+    const diff = parseUnifiedDiff(
+      'diff --git a/a.ts b/a.ts\n--- a/a.ts\n+++ b/a.ts\n@@ -1,1 +1,1 @@\n-one\n+uno\ndiff --git a/b.ts b/c.ts\nsimilarity index 90%\ncopy from b.ts\ncopy to c.ts\n--- a/b.ts\n+++ b/c.ts\n@@ -3,1 +3,1 @@\n-two\n+dos'
+    )
+    expect(diff.path).toBe('2 files')
+    expect(diff.hunks.map((hunk) => [hunk.file, hunk.lines.map((line) => line.text)])).toEqual([
+      ['a.ts', ['one', 'uno']],
+      ['c.ts', ['two', 'dos']],
+    ])
+  })
+
+  it('titles a renamed file by its new path', () => {
+    expect(parseUnifiedDiff('--- a/old.ts\n+++ b/new.ts\n@@ -1 +1 @@\n-a\n+b').path).toBe('new.ts')
+  })
+
+  it('reads a changed line starting with --- after the headers as a change', () => {
+    expect(
+      parseUnifiedDiff('--- a/x.md\n+++ b/x.md\n--- divider\n+=== divider').hunks[0].lines
+    ).toEqual([
+      { type: 'del', text: '-- divider' },
+      { type: 'add', text: '=== divider' },
+    ])
+  })
+
+  it('names each side of a two-document comparison', () => {
+    const diff = parseUnifiedDiff(
+      '--- sim:knowledge/kb/old\n+++ sim:knowledge/kb/new\n-Refunds are available within 14 days.\n+Annual plans can be refunded within 30 days.'
+    )
+    expect([diff.oldSource, diff.newSource]).toEqual([
+      { kind: 'knowledge', knowledgeBaseId: 'kb', documentId: 'old' },
+      { kind: 'knowledge', knowledgeBaseId: 'kb', documentId: 'new' },
+    ])
+  })
+
+  it.each([
+    ['a knowledge source without a document', '--- sim:knowledge/kb_1\n-x\n+y', 'sim:knowledge/'],
+    ['a line without a marker', '@@ x @@\n-a\nplain', 'Line 3'],
+    ['no changes', ' just context', 'at least one + or - line'],
+    [
+      'a sim: source mixed with file paths',
+      'diff --git a/x b/x\n--- sim:file/f1\n+++ sim:file/f1\n-a\n+b\ndiff --git a/y b/y\n--- a/y.ts\n+++ b/y.ts\n-c\n+d',
+      'cannot also include ordinary file paths',
+    ],
+  ])('rejects %s', (_, text, message) => {
+    expect(() => parseUnifiedDiff(text)).toThrow(message)
+  })
+})
diff --git a/apps/sim/lib/diff/unified.ts b/apps/sim/lib/diff/unified.ts
new file mode 100644
index 00000000000..7f43af6f983
--- /dev/null
+++ b/apps/sim/lib/diff/unified.ts
@@ -0,0 +1,143 @@
+/** A workspace resource a diff was taken from, named in its `---` / `+++` header lines. */
+export type DiffSource =
+  | { kind: 'file'; fileId: string }
+  | { kind: 'knowledge'; knowledgeBaseId: string; documentId: string }
+
+export interface DiffLine {
+  type: 'context' | 'add' | 'del'
+  text: string
+  /** Line numbers, present only when the hunk header carries them. */
+  oldLine?: number
+  newLine?: number
+}
+
+export interface DiffHunk {
+  /** Free text after the `@@ … @@` range, often the enclosing heading or function. */
+  heading: string
+  /** The file a hunk belongs to, set only when a git diff spans several files. */
+  file?: string
+  lines: DiffLine[]
+}
+
+export interface UnifiedDiff {
+  /** Where the original text lives (`---`). */
+  oldSource: DiffSource | null
+  /** Where the changed text lives (`+++`); the same resource as `oldSource` for an edit. */
+  newSource: DiffSource | null
+  /** The file path from a plain `+++ b/<path>` header, for diffs without a `sim:` source. */
+  path: string | null
+  hunks: DiffHunk[]
+}
+
+/** Git metadata that precedes `---`/`+++` in `git diff` output and carries nothing to render. */
+const GIT_HEADER =
+  /^(?:index |new file mode |deleted file mode |similarity |dissimilarity |rename |copy |old mode |new mode |Binary files )/
+const HUNK_HEADER = /^@@(?: -(\d+)(?:,\d+)? \+(\d+)(?:,\d+)? @@)?\s?(.*?)(?:\s*@@)?$/
+const SIM_SOURCE = /^sim:(file|knowledge)\/([^/\s]+)(?:\/([^/\s]+))?$/
+
+function parseSource(path: string): DiffSource | null {
+  const match = SIM_SOURCE.exec(path.trim().split(/\s/)[0] ?? '')
+  if (!match) return null
+  const [, kind, first, second] = match
+  if (kind === 'file') {
+    if (second) throw new Error(`A file source is sim:file/<fileId>, got ${path.trim()}`)
+    return { kind: 'file', fileId: first }
+  }
+  if (!second)
+    throw new Error(
+      `A knowledge source is sim:knowledge/<knowledgeBaseId>/<documentId>, got ${path}`
+    )
+  return { kind: 'knowledge', knowledgeBaseId: first, documentId: second }
+}
+
+export function sameSource(a: DiffSource, b: DiffSource): boolean {
+  return a.kind === 'file' && b.kind === 'file'
+    ? a.fileId === b.fileId
+    : a.kind === 'knowledge' &&
+        b.kind === 'knowledge' &&
+        a.knowledgeBaseId === b.knowledgeBaseId &&
+        a.documentId === b.documentId
+}
+
+/**
+ * Parses a unified diff. `---`/`+++` paths written as `sim:file/<id>` or
+ * `sim:knowledge/<kb>/<doc>` name the source; other paths (`a/src/x.ts`) render without a source.
+ * Hunk headers may omit line numbers (`@@ Heading @@`), and a diff with no `@@` is one hunk.
+ */
+export function parseUnifiedDiff(text: string): UnifiedDiff {
+  const rows = text.replace(/\r\n?/g, '\n').replace(/\n$/, '').split('\n')
+  let oldSource: DiffSource | null = null
+  let newSource: DiffSource | null = null
+  const hunks: DiffHunk[] = []
+  let hunk: DiffHunk | null = null
+  let oldLine: number | undefined
+  let newLine: number | undefined
+
+  let file: string | null = null
+  let namesPath = false
+  /** Each file takes one `---` and one `+++` header; a later line starting that way is a change. */
+  let seenOld = false
+  let seenNew = false
+  for (const [index, row] of rows.entries()) {
+    if (row.startsWith('diff --git ')) {
+      hunk = null
+      file = null
+      seenOld = false
+      seenNew = false
+      continue
+    }
+    const isOld = row.startsWith('--- ')
+    const isNew = row.startsWith('+++ ')
+    if (!hunk && ((isOld && !seenOld) || (isNew && !seenNew))) {
+      if (isOld) seenOld = true
+      else seenNew = true
+      const target = row.slice(4).trim()
+      const parsed = parseSource(target)
+      if (parsed) {
+        if (isOld) oldSource = parsed
+        else newSource = parsed
+      } else if (target !== '/dev/null') {
+        namesPath = true
+        if (isNew || !file) file = target.replace(/^[ab]\//, '').split('\t')[0]
+      }
+      continue
+    }
+    if (!hunk && GIT_HEADER.test(row)) continue
+    const header = HUNK_HEADER.exec(row)
+    if (row.startsWith('@@') && header) {
+      hunk = { heading: header[3] ?? '', file: file ?? undefined, lines: [] }
+      hunks.push(hunk)
+      oldLine = header[1] ? Number(header[1]) : undefined
+      newLine = header[2] ? Number(header[2]) : undefined
+      continue
+    }
+    if (row.startsWith('\\')) continue
+    if (!hunk) {
+      hunk = { heading: '', file: file ?? undefined, lines: [] }
+      hunks.push(hunk)
+    }
+    const marker = row[0]
+    if (marker !== ' ' && marker !== '+' && marker !== '-' && row !== '')
+      throw new Error(`Line ${index + 1}: diff lines start with a space, + or -`)
+    const type = marker === '+' ? 'add' : marker === '-' ? 'del' : 'context'
+    hunk.lines.push({
+      type,
+      text: row.slice(1),
+      oldLine: type === 'add' ? undefined : oldLine,
+      newLine: type === 'del' ? undefined : newLine,
+    })
+    if (type !== 'add' && oldLine !== undefined) oldLine++
+    if (type !== 'del' && newLine !== undefined) newLine++
+  }
+
+  if (!hunks.some((entry) => entry.lines.some((line) => line.type !== 'context')))
+    throw new Error('A diff needs at least one + or - line')
+  if (namesPath && (oldSource || newSource))
+    throw new Error('A diff with a sim: source cannot also include ordinary file paths')
+  oldSource ??= newSource
+  newSource ??= oldSource
+  const files = new Set(hunks.map((entry) => entry.file))
+  const path = files.size > 1 ? `${files.size} files` : (hunks[0]?.file ?? file)
+  if (files.size <= 1) for (const entry of hunks) entry.file = undefined
+  return { oldSource, newSource, path: oldSource ? null : path, hunks }
+}
diff --git a/scripts/check-tool-registry-boundary.baseline.json b/scripts/check-tool-registry-boundary.baseline.json
index b3b2fc3e2c9..8c4f7d9d4e2 100644
--- a/scripts/check-tool-registry-boundary.baseline.json
+++ b/scripts/check-tool-registry-boundary.baseline.json
@@ -311,16 +311,16 @@
       "gateways": {}
     },
     "app/workspace/[workspaceId]/logs/page.tsx": {
-      "modules": 1792,
+      "modules": 1831,
       "gateways": {
-        "apps/sim/app/workspace/[workspaceId]/logs/logs.tsx": 1776,
+        "apps/sim/app/workspace/[workspaceId]/logs/logs.tsx": 1815,
+        "apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/execution-snapshot/execution-snapshot.tsx": 558,
         "apps/sim/triggers/registry.ts": 528,
-        "apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/execution-snapshot/execution-snapshot.tsx": 519,
-        "apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-editor/index.ts": 467,
-        "apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/index.ts": 461,
-        "apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/sub-block.tsx": 399,
-        "apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/index.ts": 390,
-        "apps/sim/blocks/registry.ts": 357
+        "apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-editor/index.ts": 506,
+        "apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/index.ts": 500,
+        "apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/sub-block.tsx": 438,
+        "apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/index.ts": 429,
+        "apps/sim/blocks/registry.ts": 355
       }
     },
     "app/workspace/[workspaceId]/not-found.tsx": {