feat(dashboards): embed live dashboard panels in markdown

Author: TheodoreSpeaks

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/code-block.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react'
+import { useContext, useEffect, useState } from 'react'
 import {
   chipVariants,
   cn,
@@ -11,6 +11,9 @@ import {
 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 { DashboardEmbed } from '@/components/dashboards/dashboard-embed'
+import { DASHBOARD_EMBED_LANGUAGE } from '@/lib/dashboards/spec'
+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'
 import { detectLanguage } from './detect-language'
@@ -51,7 +54,8 @@ const CONTROL_CLASS =
  * whenever the cursor is outside it (and always in read-only), and as editable source while the
  * cursor is inside, re-rendering on blur (the Linear/GitHub model). The source `<pre>` stays mounted
  * (hidden behind the diagram) so ProseMirror keeps managing its contentDOM, and the node remains an
- * ordinary code block, so markdown round-trips unchanged.
+ * ordinary code block, so markdown round-trips unchanged. A ```dashboard fence renders live
+ * dashboard panels the same way.
  */
 function CodeBlockView({ node, updateAttributes, editor, getPos }: ReactNodeViewProps) {
   const [wrap, setWrap] = useState(false)
@@ -60,16 +64,19 @@ function CodeBlockView({ node, updateAttributes, editor, getPos }: ReactNodeView
   const [peekSource, setPeekSource] = useState(false)
   const { copied, copy } = useCopyToClipboard({ resetMs: 1500 })
   const editable = useEditorEditable(editor)
+  const isStreaming = useContext(MarkdownStreamingContext)
 
   const explicitLanguage = node.attrs.language as string | null
   const text = node.textContent
   const isMermaid = explicitLanguage === MERMAID || (!explicitLanguage && looksLikeMermaid(text))
+  const isDashboard = explicitLanguage === DASHBOARD_EMBED_LANGUAGE
+  const isRendered = isMermaid || isDashboard
 
   // 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
   // focusing into / blurring the block; read-only uses {@link peekSource} since there is no caret.
   useEffect(() => {
-    if (!isMermaid || !editable) {
+    if (!isRendered || !editable) {
       setEditingInline(false)
       return
     }
@@ -92,13 +99,13 @@ function CodeBlockView({ node, updateAttributes, editor, getPos }: ReactNodeView
       editor.off('focus', sync)
       editor.off('blur', sync)
     }
-  }, [editor, getPos, isMermaid, editable])
+  }, [editor, getPos, isRendered, editable])
 
   const showSource = editable ? editingInline : peekSource
-  const showDiagram = isMermaid && text.trim().length > 0 && !showSource
+  const showRendered = isRendered && text.trim().length > 0 && !showSource
 
-  // Skip language detection on the mermaid path — the picker/label never render there.
-  const language = explicitLanguage ?? (isMermaid ? null : detectLanguage(text)) ?? PLAIN
+  // Skip language detection on rendered blocks — the picker/label never render there.
+  const language = explicitLanguage ?? (isRendered ? null : detectLanguage(text)) ?? PLAIN
   const label =
     LANGUAGE_OPTIONS.find((option) => option.value === language)?.label ??
     explicitLanguage ??
@@ -133,18 +140,20 @@ function CodeBlockView({ node, updateAttributes, editor, getPos }: ReactNodeView
         )}
         contentEditable={false}
       >
-        {isMermaid && (
+        {isRendered && (
           <button
             type='button'
-            aria-label={showSource ? 'Show diagram' : 'Show source'}
+            aria-label={
+              showSource ? (isDashboard ? 'Show dashboard' : 'Show diagram') : 'Show source'
+            }
             onMouseDown={(event) => event.preventDefault()}
             onClick={toggleSource}
             className={CONTROL_CLASS}
           >
             {showSource ? <Eye /> : <Code />}
           </button>
         )}
-        {!isMermaid &&
+        {!isRendered &&
           (editable ? (
             // Editable: a language picker. Read-only: a static label — selecting a language calls
             // updateAttributes, which would mutate a doc that must not change.
@@ -180,7 +189,7 @@ function CodeBlockView({ node, updateAttributes, editor, getPos }: ReactNodeView
               {label}
             </span>
           ))}
-        {!isMermaid && editable && (
+        {!isRendered && editable && (
           <button
             type='button'
             aria-label='Toggle line wrap'
@@ -205,22 +214,28 @@ function CodeBlockView({ node, updateAttributes, editor, getPos }: ReactNodeView
           {copied ? <Check /> : <Duplicate />}
         </button>
       </div>
-      <pre className={cn('code-editor-theme pr-20', showDiagram && 'hidden')} data-wrap={wrap}>
+      <pre className={cn('code-editor-theme pr-20', showRendered && 'hidden')} data-wrap={wrap}>
         <NodeViewContent<'code'> as='code' />
       </pre>
-      {showDiagram && (
-        // Clicking the diagram selects the whole node (same selection ring as an image/code block)
-        // instead of dropping a caret inside — preventDefault stops ProseMirror placing the caret,
-        // which would otherwise flip to source. Editing is an explicit Show source / blur action.
+      {showRendered && (
+        // Select the whole node instead of placing a caret, which would flip the block to source.
         <div
           contentEditable={false}
+          className={cn(isDashboard && 'dashboard-embed')}
           onMouseDown={(event) => {
+            const target = event.target
+            if (!(target instanceof Element) || !event.currentTarget.contains(target)) return
+            if (target.closest('button, input')) return
             event.preventDefault()
             const pos = typeof getPos === 'function' ? getPos() : null
             if (typeof pos === 'number') editor.commands.setNodeSelection(pos)
           }}
         >
-          <MermaidDiagram definition={text} className='mermaid-diagram-frame' />
+          {isDashboard ? (
+            <DashboardEmbed source={text} isStreaming={isStreaming} />
+          ) : (
+            <MermaidDiagram definition={text} className='mermaid-diagram-frame' />
+          )}
         </div>
       )}
     </NodeViewWrapper>

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/markdown-streaming-context.ts

@@ -0,0 +1,4 @@
+import { createContext } from 'react'
+
+/** True while agent output is streaming into the editor, for node views that render its content. */
+export const MarkdownStreamingContext = createContext(false)

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/rich-markdown-editor.css

@@ -391,6 +391,12 @@
   margin: 1rem 0;
 }
 
+/* A dashboard results table sizes its own columns and sits flush in its panel. */
+.rich-markdown-nodes .dashboard-embed table {
+  table-layout: auto;
+  margin: 0;
+}
+
 .rich-markdown-nodes th > p,
 .rich-markdown-nodes td > p {
   margin: 0;

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/rich-markdown-editor.tsx

@@ -68,6 +68,7 @@ import {
 } from '@/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/markdown-fidelity'
 import { parseMarkdownToDoc } from '@/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/markdown-parse'
 import { isPlainTextPaste } from '@/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/markdown-paste'
+import { MarkdownStreamingContext } from '@/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/markdown-streaming-context'
 import { useEditorMentions } from '@/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/mention'
 import { EditorBubbleMenu } from '@/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/menus/bubble-menu'
 import { LinkHoverCard } from '@/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/menus/link-hover-card'
@@ -1446,10 +1447,12 @@ export function LoadedRichMarkdownEditor({
             workspaceId={workspaceId}
           />
         )}
-        <EditorContent
-          editor={editor}
-          className={cn(EDITOR_SURFACE_CLASS, showPlaceholder && 'hidden')}
-        />
+        <MarkdownStreamingContext value={isStreaming}>
+          <EditorContent
+            editor={editor}
+            className={cn(EDITOR_SURFACE_CLASS, showPlaceholder && 'hidden')}
+          />
+        </MarkdownStreamingContext>
       </div>
     </div>
   )

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/rich-markdown-field.tsx

@@ -27,6 +27,7 @@ import {
 } from '@/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/markdown-fidelity'
 import { parseMarkdownToDoc } from '@/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/markdown-parse'
 import { isPlainTextPaste } from '@/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/markdown-paste'
+import { MarkdownStreamingContext } from '@/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/markdown-streaming-context'
 import { useEditorMentions } from '@/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/mention'
 import { EditorBubbleMenu } from '@/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/menus/bubble-menu'
 import { LinkHoverCard } from '@/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/menus/link-hover-card'
@@ -444,15 +445,17 @@ function LoadedRichMarkdownField({
           }}
         />
       )}
-      <EditorContent
-        editor={editor}
-        className={cn(
-          'flex flex-1 flex-col',
-          isBare
-            ? proseClassName
-            : 'selection:bg-[var(--selection-bg)] selection:text-[var(--text-primary)] dark:selection:bg-[var(--selection-dark)] dark:selection:text-white'
-        )}
-      />
+      <MarkdownStreamingContext value={isStreaming}>
+        <EditorContent
+          editor={editor}
+          className={cn(
+            'flex flex-1 flex-col',
+            isBare
+              ? proseClassName
+              : 'selection:bg-[var(--selection-bg)] selection:text-[var(--text-primary)] dark:selection:bg-[var(--selection-dark)] dark:selection:text-white'
+          )}
+        />
+      </MarkdownStreamingContext>
     </div>
   )
 }

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/rich-markdown-editor/slash-command/commands.ts

@@ -1,5 +1,6 @@
 import type { ComponentType, SVGProps } from 'react'
 import {
+  ChartColumn,
   Code,
   Heading1,
   Heading2,
@@ -14,6 +15,26 @@ import {
   TextQuote,
 } from '@sim/emcn/icons'
 import type { Editor, Range } from '@tiptap/core'
+import { DASHBOARD_EMBED_LANGUAGE } from '@/lib/dashboards/spec'
+
+/** A time-series starter; the table id is left for the author to fill in. */
+const DASHBOARD_EMBED_STARTER = `title: Rows over time
+time: 7d
+source:
+  tableId: # table id
+blocks:
+  - chart: Rows per day
+    source:
+      groupBy: [createdAt]
+      bucket: day
+      aggregate:
+        rows: { op: count }
+    option:
+      xAxis: { type: time }
+      yAxis: { type: value }
+      series:
+        - { type: line, encode: { x: createdAt, y: rows } }
+`
 
 export interface SlashCommandContext {
   editor: Editor
@@ -121,6 +142,24 @@ export const SLASH_COMMANDS: readonly SlashCommandItem[] = [
     shortcut: '⌘⌥C',
     run: ({ editor, range }) => editor.chain().focus().deleteRange(range).toggleCodeBlock().run(),
   },
+  {
+    title: 'Chart',
+    group: 'Blocks',
+    icon: ChartColumn,
+    aliases: ['dashboard', 'graph', 'metric', 'live data'],
+    run: ({ editor, range }) =>
+      editor
+        .chain()
+        .focus()
+        .deleteRange(range)
+        .insertContent({
+          type: 'codeBlock',
+          attrs: { language: DASHBOARD_EMBED_LANGUAGE },
+          content: [{ type: 'text', text: DASHBOARD_EMBED_STARTER }],
+        })
+        .setTextSelection(range.from + 1)
+        .run(),
+  },
   {
     title: 'Table',
     group: 'Blocks',

apps/sim/components/charts/echarts-view.tsx

@@ -5,16 +5,23 @@ import { cn } from '@sim/emcn'
 import { getErrorMessage } from '@sim/utils/errors'
 import type { EChartsType } from 'echarts'
 import { useTheme } from 'next-themes'
+import { applyChartAnnotations, type ChartAnnotations } from '@/lib/charts/annotations'
 import { installBarRowHighlight } from '@/lib/charts/bar-row-highlight'
 import { chartSummaryExtension } from '@/lib/charts/summary'
-import { applyChartTooltipDefaults, readEmcnChartTheme } from '@/lib/charts/theme'
+import {
+  applyChartTooltipDefaults,
+  readChartTonePalette,
+  readEmcnChartTheme,
+} from '@/lib/charts/theme'
 
 interface EChartsViewProps {
   option: Record<string, unknown>
   label: string
   className?: string
   createController?: (chart: EChartsType) => EChartsController
   revision?: string
+  /** Highlights and thresholds, coloured from the theme at render time. */
+  annotations?: ChartAnnotations
 }
 
 export interface EChartsController {
@@ -33,21 +40,32 @@ export function EChartsView({
   className,
   createController,
   revision,
+  annotations,
 }: EChartsViewProps) {
   const containerRef = useRef<HTMLDivElement>(null)
   const chartRef = useRef<EChartsType | null>(null)
   const controllerRef = useRef<EChartsController | null>(null)
   const rowHighlightRef = useRef<(() => void) | null>(null)
   const { resolvedTheme } = useTheme()
   const [status, setStatus] = useState<{ theme: string | undefined; error?: string } | null>(null)
-  const optionKey = JSON.stringify(option)
+  const optionKey = JSON.stringify({ option, annotations })
   const applyOption = useEffectEvent((chart: EChartsType, nextOption: string) => {
     try {
       controllerRef.current?.dispose()
       controllerRef.current = null
       const controller = createController?.(chart)
       controllerRef.current = controller ?? null
-      const parsed = applyChartTooltipDefaults(JSON.parse(nextOption))
+      const next: { option: Record<string, unknown>; annotations?: ChartAnnotations } =
+        JSON.parse(nextOption)
+      const parsed = applyChartTooltipDefaults(
+        next.annotations
+          ? applyChartAnnotations(
+              next.option,
+              next.annotations,
+              readChartTonePalette(chart.getDom())
+            )
+          : next.option
+      )
       chart.setOption(controller ? controller.prepareOption(parsed) : parsed, { notMerge: true })
       controller?.afterUpdate()
       rowHighlightRef.current?.()

apps/sim/components/charts/time-series-chart.tsx

@@ -3,6 +3,7 @@
 import { useRef, useState } from 'react'
 import { cn, scrollFadeAttributes, scrollFadeXClass, useScrollEdges } from '@sim/emcn'
 import { EChartsView } from '@/components/charts/echarts-view'
+import type { ChartAnnotations } from '@/lib/charts/annotations'
 import {
   bindTimeSeriesInteractions,
   type ChartReadout,
@@ -13,9 +14,10 @@ import { dashboardTimeLabel } from '@/lib/dashboards/time'
 interface TimeSeriesChartProps extends Omit<TimeSeriesInteractionOptions, 'onReadout'> {
   label: string
   option: Record<string, unknown>
+  annotations?: ChartAnnotations
 }
 
-export function TimeSeriesChart({ label, option, ...config }: TimeSeriesChartProps) {
+export function TimeSeriesChart({ label, option, annotations, ...config }: TimeSeriesChartProps) {
   const valuesRef = useRef<HTMLDivElement>(null)
   const edges = useScrollEdges(valuesRef, { axis: 'x' })
   const [readout, setReadout] = useState<ChartReadout | null>(null)
@@ -58,6 +60,7 @@ export function TimeSeriesChart({ label, option, ...config }: TimeSeriesChartPro
       <EChartsView
         label={label}
         option={option}
+        annotations={annotations}
         className='h-[240px]'
         revision={JSON.stringify({
           ...config.range,