Feat/gignit markdown renderer #141

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open

ariane-emory wants to merge 17 commits into dev from feat/gignit--markdown-renderer

packages/opencode/src/cli/cmd/run.ts

-Original file line number
+Diff line change
@@ Expand Up / @@ -25,6 +25,7 @@ import { SkillTool } from "../../tool/skill" @@
     import { BashTool } from "../../tool/bash"
     import { TodoWriteTool } from "../../tool/todo"
     import { Locale } from "../../util/locale"
+    import { loadTheme } from "../theme-loader"
     type ToolProps<T extends Tool.Info> = {
       input: Tool.InferParameters<T>
@@ Expand Down Expand Up / @@ -375,6 +376,15 @@ export const RunCommand = cmd({ @@
         }
         async function execute(sdk: OpencodeClient) {
+          let theme
+          try {
+            const configResult = await sdk.config.get()
+            const themeName = configResult.data?.theme
+            theme = loadTheme(themeName)
+          } catch {
+            theme = loadTheme()
+          }
           function tool(part: ToolPart) {
             if (part.tool === "bash") return bash(props<typeof BashTool>(part))
             if (part.tool === "glob") return glob(props<typeof GlobTool>(part))
@@ Expand Down Expand Up / @@ -456,7 +466,7 @@ export const RunCommand = cmd({ @@
                     continue
                   }
                   UI.empty()
-                  UI.println(text)
+                  UI.println(UI.markdown(text, theme))
                   UI.empty()
                 }
@@ Expand Down @@

packages/opencode/src/cli/cmd/tui/routes/session/index.tsx

-Original file line number
+Diff line change
@@ Expand Up / @@ -13,6 +13,7 @@ import { @@
     } from "solid-js"
     import { Dynamic } from "solid-js/web"
     import path from "path"
     import { useRoute, useRouteData } from "@tui/context/route"
     import { useSync } from "@tui/context/sync"
     import { SplitBorder } from "@tui/component/border"
@@ Expand All / @@ -26,7 +27,9 @@ import { @@
       type ScrollAcceleration,
       TextAttributes,
       RGBA,
+      StyledText,
     } from "@opentui/core"
+    import { Index } from "solid-js"
     import { Prompt, type PromptRef } from "@tui/component/prompt"
     import type { AssistantMessage, Part, ToolPart, UserMessage, TextPart, ReasoningPart } from "@opencode-ai/sdk/v2"
     import { useLocal } from "@tui/context/local"
@@ Expand Down Expand Up / @@ -77,6 +80,7 @@ import { PermissionPrompt } from "./permission" @@
     import { QuestionPrompt } from "./question"
     import { DialogExportOptions } from "../../ui/dialog-export-options"
     import { formatTranscript } from "../../util/transcript"
+    import { renderMarkdownThemedStyled, parseMarkdownSegments } from "@/cli/markdown-renderer"
     import { UI } from "@/cli/ui.ts"
     addDefaultParsers(parsers.parsers)
@@ Expand Down Expand Up @@
       )
     }
+    // ============================================================================
+    // Markdown Rendering Components
+    // ============================================================================
+    const LANGS: Record<string, string> = {
+      js: "javascript",
+      ts: "typescript",
+      jsx: "typescript",
+      tsx: "typescript",
+      py: "python",
+      rb: "ruby",
+      sh: "shell",
+      bash: "shell",
+      zsh: "shell",
+      yml: "yaml",
+      md: "markdown",
+    }
     function TextPart(props: { last: boolean; part: TextPart; message: AssistantMessage }) {
       const ctx = use()
-      const { theme, syntax } = useTheme()
+      const tui = useTheme()
+      // Parse markdown into segments - use Index to prevent recreation
+      const segments = createMemo(() => parseMarkdownSegments(props.part.text?.trim() ?? ""))
       return (
-        <Show when={props.part.text.trim()}>
-          <box id={"text-" + props.part.id} paddingLeft={3} marginTop={1} flexShrink={0}>
-            <Switch>
-              <Match when={Flag.OPENCODE_EXPERIMENTAL_MARKDOWN}>
-                <markdown
-                  syntaxStyle={syntax()}
-                  streaming={true}
-                  content={props.part.text.trim()}
-                  conceal={ctx.conceal()}
-                />
-              </Match>
-              <Match when={!Flag.OPENCODE_EXPERIMENTAL_MARKDOWN}>
-                <code
-                  filetype="markdown"
-                  drawUnstyledText={false}
-                  streaming={true}
-                  syntaxStyle={syntax()}
-                  content={props.part.text.trim()}
-                  conceal={ctx.conceal()}
-                  fg={theme.text}
-                />
-              </Match>
-            </Switch>
+        <Show when={props.part.text?.trim()}>
+          <box id={"text-" + props.part.id} paddingLeft={3} marginTop={1} flexShrink={0} flexDirection="column">
+            <Index each={segments()}>
+              {(segment) => (
+                <Show
+                  when={segment().type === "code"}
+                  fallback={<Prose segment={segment() as any} theme={tui.theme} width={ctx.width - 3} />}
+                >
+                  <CodeBlock segment={segment() as any} syntax={tui.syntax()} />
+                </Show>
+              )}
+            </Index>
           </box>
         </Show>
       )
     }
+    // Render text segments with custom renderer (tables, inline formatting)
+    function Prose(props: { segment: { type: "text"; content: string }; theme: any; width: number }) {
+      let el: any
+      const styled = createMemo(() => {
+        if (!props.segment.content) return new StyledText([])
+        const result = renderMarkdownThemedStyled(props.segment.content, props.theme, { cols: props.width })
+        return new StyledText(
+          result.chunks.map((c) => ({
+            __isChunk: true as const,
+            text: c.text,
+            fg: c.fg ? RGBA.fromInts(c.fg.r, c.fg.g, c.fg.b, c.fg.a) : props.theme.text,
+            bg: c.bg ? RGBA.fromInts(c.bg.r, c.bg.g, c.bg.b, c.bg.a) : undefined,
+            attributes: c.attributes,
+          })),
+        )
+      })
+      createEffect(() => {
+        if (el) el.content = styled()
+      })
+      return <text ref={el} />
+    }
+    // Render code blocks with tree-sitter highlighting
+    function CodeBlock(props: { segment: { type: "code"; content: string; language: string }; syntax: any }) {
+      const ctx = use()
+      const lang = () => LANGS[props.segment.language] || props.segment.language
+      return (
+        <box paddingLeft={2}>
+          <code
+            filetype={lang()}
+            content={props.segment.content}
+            syntaxStyle={props.syntax}
+            drawUnstyledText={true}
+            streaming={false}
+            conceal={ctx.conceal()}
+          />
+        </box>
+      )
+    }
+    // Prose and Diff components kept for potential future use with stable rendering
+    function Diff(props: { content: string; theme: ReturnType<typeof useTheme>["theme"] }) {
+      let el: any
+      const styled = createMemo(() => {
+        const chunks = props.content.split("\n").map((line) => {
+          const t = line.trim()
+          const fg = t.startsWith("+")
+            ? props.theme.diffAdded
+            : t.startsWith("-")
+              ? props.theme.diffRemoved
+              : props.theme.markdownCodeBlock
+          return { __isChunk: true as const, text: "  " + line + "\n", fg }
+        })
+        return new StyledText(chunks)
+      })
+      createEffect(() => {
+        if (el) el.content = styled()
+      })
+      // Don't pass fg prop - chunks already have colors
+      return (
+        <box paddingLeft={2}>
+          <text ref={el} />
+        </box>
+      )
+    }
     // Pending messages moved to individual tool pending functions
     function ToolPart(props: { last: boolean; part: ToolPart; message: AssistantMessage }) {
@@ Expand Down @@

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feat/gignit markdown renderer #141

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!

Feat/gignit markdown renderer #141

Are you sure you want to change the base?

Uh oh!

Feat/gignit markdown renderer #141

Uh oh!

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!