feat(app): add markdown preview with enhanced markdown support

packages/app/src/pages/session/file-tabs.tsx

@@ -1,4 +1,4 @@
-import { createEffect, createMemo, createSignal, Match, on, onCleanup, Switch } from "solid-js"
+import { createEffect, createMemo, createSignal, Match, on, onCleanup, Show, Switch } from "solid-js"
 import { createStore } from "solid-js/store"
 import { Dynamic } from "solid-js/web"
 import { makeEventListener } from "@solid-primitives/event-listener"
@@ -11,7 +11,8 @@ import { DropdownMenu } from "@opencode-ai/ui/dropdown-menu"
 import { IconButton } from "@opencode-ai/ui/icon-button"
 import { Tabs } from "@opencode-ai/ui/tabs"
 import { ScrollView } from "@opencode-ai/ui/scroll-view"
-import { showToast } from "@/utils/toast"
+import { showToast } from "@opencode-ai/ui/toast"
+import { Markdown } from "@opencode-ai/ui/markdown"
 import { selectionFromLines, useFile, type FileSelection, type SelectedLineRange } from "@/context/file"
 import { useComments } from "@/context/comments"
 import { useLanguage } from "@/context/language"
@@ -193,6 +194,10 @@ export function FileTabContent(props: { tab: string }) {
   }
 
   const path = createMemo(() => file.pathFromTab(props.tab))
+  const isMarkdown = createMemo(() => /\.(md|markdown|mdx)$/i.test(path() ?? ""))
+  const [markdownMode, setMarkdownMode] = createSignal<"source" | "preview">("source")
+  let scrollViewport: HTMLDivElement | undefined
+  let pendingScrollY: number | null = null
   const state = createMemo(() => {
     const p = path()
     if (!p) return
@@ -396,53 +401,90 @@ export function FileTabContent(props: { tab: string }) {
 
   const renderFile = (source: string) => (
     <div class="relative overflow-hidden pb-40">
-      <Dynamic
-        component={fileComponent}
-        mode="text"
-        file={{
-          name: path() ?? "",
-          contents: source,
-          cacheKey: cacheKey(),
-        }}
-        enableLineSelection
-        enableHoverUtility
-        selectedLines={activeSelection()}
-        commentedLines={commentedLines()}
-        onRendered={() => {
-          scrollSync.queueRestore()
-        }}
-        annotations={commentsUi.annotations()}
-        renderAnnotation={commentsUi.renderAnnotation}
-        renderHoverUtility={commentsUi.renderHoverUtility}
-        onLineSelected={(range: SelectedLineRange | null) => {
-          commentsUi.onLineSelected(range)
-        }}
-        onLineNumberSelectionEnd={commentsUi.onLineNumberSelectionEnd}
-        onLineSelectionEnd={(range: SelectedLineRange | null) => {
-          commentsUi.onLineSelectionEnd(range)
-        }}
-        search={search}
-        class="select-text"
-        media={{
-          mode: "auto",
-          path: path(),
-          current: state()?.content,
-          onLoad: scrollSync.queueRestore,
-          onError: (args: { kind: "image" | "audio" | "svg" }) => {
-            if (args.kind !== "svg") return
-            showToast({
-              variant: "error",
-              title: language.t("toast.file.loadFailed.title"),
-            })
-          },
-        }}
-      />
-    </div>
+      <Show when={isMarkdown() && markdownMode() === "preview"} fallback={
+        <Dynamic
+          component={fileComponent}
+          mode="text"
+          file={{
+            name: path() ?? "",
+            contents: source,
+            cacheKey: cacheKey(),
+          }}
+          enableLineSelection
+          enableHoverUtility
+          selectedLines={activeSelection()}
+          commentedLines={commentedLines()}
+          onRendered={() => {
+            if (pendingScrollY != null) {
+              const y = pendingScrollY
+              pendingScrollY = null
+              requestAnimationFrame(() => {
+                if (scrollViewport) scrollViewport.scrollTop = y
+              })
+            } else {
+              scrollSync.queueRestore()
+            }
+          }}
+          annotations={commentsUi.annotations()}
+          renderAnnotation={commentsUi.renderAnnotation}
+          renderHoverUtility={commentsUi.renderHoverUtility}
+          onLineSelected={(range: SelectedLineRange | null) => {
+            commentsUi.onLineSelected(range)
+          }}
+          onLineNumberSelectionEnd={commentsUi.onLineNumberSelectionEnd}
+          onLineSelectionEnd={(range: SelectedLineRange | null) => {
+            commentsUi.onLineSelectionEnd(range)
+          }}
+          search={search}
+          class="select-text"
+          media={{
+            mode: "auto",
+            path: path(),
+            current: state()?.content,
+            onLoad: () => {
+              if (pendingScrollY != null) {
+                const y = pendingScrollY
+                pendingScrollY = null
+                requestAnimationFrame(() => {
+                  if (scrollViewport) scrollViewport.scrollTop = y
+                })
+              } else {
+                scrollSync.queueRestore()
+              }
+            },
+            onError: (args: { kind: "image" | "audio" | "svg" }) => {
+              if (args.kind !== "svg") return
+              showToast({
+                variant: "error",
+                title: language.t("toast.file.loadFailed.title"),
+              })
+            },
+          }}
+        />
+      }>
+        <div class="px-6 py-4 select-text" data-markdown-preview>
+          <Markdown text={source} />
+        </div>
+      </Show>
+      </div>
   )
 
+  const toggleMarkdownMode = (mode: "source" | "preview") => {
+    if (mode === markdownMode()) return
+    pendingScrollY = scrollViewport?.scrollTop ?? null
+    setMarkdownMode(mode)
+    if (mode === "preview" && pendingScrollY != null) {
+      const y = pendingScrollY
+      pendingScrollY = null
+      requestAnimationFrame(() => {
+        if (scrollViewport) scrollViewport.scrollTop = y
+      })
+    }
+  }
+
   return (
     <Tabs.Content value={props.tab} class="mt-3 relative h-full">
-      <ScrollView class="h-full" viewportRef={scrollSync.setViewport} onScroll={scrollSync.handleScroll as any}>
+      <ScrollView class="h-full" viewportRef={(el) => { scrollViewport = el; scrollSync.setViewport(el) }} onScroll={scrollSync.handleScroll as any}>
         <Switch>
           <Match when={state()?.loaded}>{renderFile(contents())}</Match>
           <Match when={state()?.loading}>
@@ -451,6 +493,32 @@ export function FileTabContent(props: { tab: string }) {
           <Match when={state()?.error}>{(err) => <div class="px-6 py-4 text-text-weak">{err()}</div>}</Match>
         </Switch>
       </ScrollView>
+      <Show when={isMarkdown() && state()?.loaded}>
+        <div class="absolute top-2 right-4 z-10 flex gap-0.5 rounded-md bg-background-base/80 backdrop-blur-sm border border-border-weak-base p-0.5 text-xs">
+          <button
+            type="button"
+            classList={{
+              "px-2 py-0.5 rounded-sm transition-colors": true,
+              "bg-background-stronger text-text-strong font-medium": markdownMode() === "source",
+              "text-text-weak hover:text-text-base": markdownMode() !== "source",
+            }}
+            onClick={() => toggleMarkdownMode("source")}
+          >
+            Code
+          </button>
+          <button
+            type="button"
+            classList={{
+              "px-2 py-0.5 rounded-sm transition-colors": true,
+              "bg-background-stronger text-text-strong font-medium": markdownMode() === "preview",
+              "text-text-weak hover:text-text-base": markdownMode() !== "preview",
+            }}
+            onClick={() => toggleMarkdownMode("preview")}
+          >
+            Preview
+          </button>
+        </div>
+      </Show>
     </Tabs.Content>
   )
 }

packages/ui/package.json

@@ -40,6 +40,7 @@
     "@types/bun": "catalog:",
     "@types/katex": "0.16.7",
     "@types/luxon": "catalog:",
+    "@types/mermaid": "9.2.0",
     "@typescript/native-preview": "catalog:",
     "tailwindcss": "catalog:",
     "typescript": "catalog:",
@@ -67,6 +68,7 @@
     "marked": "catalog:",
     "marked-katex-extension": "5.1.6",
     "marked-shiki": "catalog:",
+    "mermaid": "11.15.0",
     "morphdom": "2.7.8",
     "motion": "12.34.5",
     "motion-dom": "12.34.3",

packages/ui/src/components/markdown.css

@@ -264,3 +264,68 @@
   text-decoration: underline;
   text-underline-offset: 2px;
 }
+
+[data-component="markdown"] [data-component="mermaid"] {
+  margin: 16px 0;
+  overflow-x: auto;
+  padding: 24px;
+  border-radius: var(--radius-md);
+  border: 1px solid var(--border-weak-base);
+  background: var(--surface-inset-strong);
+  display: flex;
+  justify-content: center;
+}
+
+[data-component="markdown"] [data-component="mermaid"] svg {
+  max-width: 100%;
+  height: auto;
+}
+
+/* File preview markdown: proper heading hierarchy */
+[data-markdown-preview] [data-component="markdown"] {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin-top: 24px;
+    margin-bottom: 16px;
+    line-height: 1.25;
+  }
+
+  h1 {
+    font-size: 2em;
+    font-weight: 700;
+    padding-bottom: 0.3em;
+    border-bottom: 1px solid var(--border-weak-base);
+  }
+
+  h2 {
+    font-size: 1.5em;
+    font-weight: 600;
+    padding-bottom: 0.3em;
+    border-bottom: 1px solid var(--border-weak-base);
+  }
+
+  h3 {
+    font-size: 1.25em;
+    font-weight: 600;
+  }
+
+  h4 {
+    font-size: 1em;
+    font-weight: 600;
+  }
+
+  h5 {
+    font-size: 0.875em;
+    font-weight: 600;
+  }
+
+  h6 {
+    font-size: 0.85em;
+    font-weight: 600;
+    color: var(--text-weak);
+  }
+}