feat: ✨ improve annotation handling and markdown output

microsoft · Jan 15, 2025 · 5dfbc77 · 5dfbc77
1 parent b1a22b9
commit 5dfbc77
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 12 deletions.
diff --git a/packages/core/src/annotations.ts b/packages/core/src/annotations.ts
@@ -89,13 +89,29 @@ export function convertAnnotationsToItems(text: string) {
         (t, rx) =>
             t.replace(rx, (s, ...args) => {
                 const groups = args.at(-1)
-                const { file, line, severity, code, message } = groups
-                return `- ${SEV_EMOJI_MAP[severity?.toLowerCase()] ?? "info"} ${message} (\`${file}#L${line}\`)`
+                const { file, line, endLine, severity, code, message } = groups
+                const d: Diagnostic = {
+                    severity: SEV_MAP[severity?.toLowerCase()] ?? "info",
+                    filename: file,
+                    range: [
+                        [parseInt(line) - 1, 0], // Start of range, 0-based index
+                        [parseInt(endLine) - 1, Number.MAX_VALUE], // End of range, max value for columns
+                    ],
+                    code,
+                    message,
+                }
+                return convertAnnotationToItem(d)
             }),
         text
     )
 }
 
+export function convertAnnotationToItem(d: Diagnostic) {
+    const { severity, message, filename, code, range } = d
+    const line = range?.[0]?.[0]
+    return `- ${SEV_EMOJI_MAP[severity?.toLowerCase()] ?? "info"} ${message} ${filename ? `(\`${filename}${line ? `#L${line}` : ""}\`)` : ""}`
+}
+
 /**
  * Converts a `Diagnostic` to a GitHub Action command string.
  *

diff --git a/packages/web/src/App.tsx b/packages/web/src/App.tsx
@@ -61,6 +61,10 @@ import { markdownDiff } from "../../core/src/mddiff"
 import { VscodeMultiSelect as VscodeMultiSelectElement } from "@vscode-elements/elements"
 import { cleanedClone } from "../../core/src/clone"
 import { WebSocketClient } from "../../core/src/server/wsclient"
+import {
+    convertAnnotationsToMarkdown,
+    convertAnnotationToItem,
+} from "../../core/src/annotations"
 
 interface GenAIScriptViewOptions {
     apiKey?: string
@@ -720,9 +724,10 @@ function TraceTabPanel(props: { selected?: boolean }) {
 
 function OutputMarkdown() {
     const output = useOutput()
+    const md = convertAnnotationsToMarkdown(output)
     return (
         <VscodeScrollable>
-            <Markdown>{output}</Markdown>
+            <Markdown>{md}</Markdown>
         </VscodeScrollable>
     )
 }
@@ -742,15 +747,9 @@ function OutputTraceTabPanel(props: { selected?: boolean }) {
 function ProblemsTabPanel() {
     const result = useResult()
     const { annotations = [] } = result || {}
-
-    const renderAnnotation = (annotation: Diagnostic) => {
-        const { message, severity, filename, code, range } = annotation
-        return `> [!${severity}]
-> ${`${message} (${filename}#L${range?.[0]?.[0] || ""} ${code || ""})`.split("\n").join("\n> ")}
-`
-    }
-
-    const annotationsMarkdown = annotations.map(renderAnnotation).join("\n")
+    const annotationsMarkdown = annotations
+        .map(convertAnnotationToItem)
+        .join("\n")
 
     return (
         <>