Merge pull request #3355 from cryppadotta/pap-1331-issue-thread-ux

feat: polish issue thread markdown and references

ui/src/components/CommentThread.tsx

@@ -369,7 +369,7 @@ function CommentCard({
           <CopyMarkdownButton text={comment.body} />
         </span>
       </div>
-      <MarkdownBody className="text-sm">{comment.body}</MarkdownBody>
+      <MarkdownBody className="text-sm" softBreaks>{comment.body}</MarkdownBody>
       {companyId && !isPending ? (
         <div className="mt-2 space-y-2">
           <PluginSlotOutlet

ui/src/components/IssueChatThread.tsx

@@ -424,7 +424,12 @@ function commentDateLabel(date: Date | string | undefined): string {
 function IssueChatTextPart({ text, recessed }: { text: string; recessed?: boolean }) {
   const { onImageClick } = useContext(IssueChatCtx);
   return (
-    <MarkdownBody className="text-sm leading-6" style={recessed ? { opacity: 0.55 } : undefined} onImageClick={onImageClick}>
+    <MarkdownBody
+      className="text-sm leading-6"
+      style={recessed ? { opacity: 0.55 } : undefined}
+      softBreaks
+      onImageClick={onImageClick}
+    >
       {text}
     </MarkdownBody>
   );

ui/src/components/IssueDocumentsSection.tsx

@@ -70,7 +70,7 @@ function saveFoldedDocumentKeys(issueId: string, keys: string[]) {
 }
 
 function renderBody(body: string, className?: string) {
-  return <MarkdownBody className={className}>{body}</MarkdownBody>;
+  return <MarkdownBody className={className} softBreaks={false}>{body}</MarkdownBody>;
 }
 
 function isPlanKey(key: string) {

ui/src/components/MarkdownBody.test.tsx

@@ -1,17 +1,60 @@
 // @vitest-environment node
 
-import { describe, expect, it } from "vitest";
+import type { ReactNode } from "react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { describe, expect, it, vi } from "vitest";
 import { renderToStaticMarkup } from "react-dom/server";
 import { buildAgentMentionHref, buildProjectMentionHref, buildSkillMentionHref } from "@paperclipai/shared";
 import { ThemeProvider } from "../context/ThemeContext";
 import { MarkdownBody } from "./MarkdownBody";
+import { queryKeys } from "../lib/queryKeys";
+
+const mockIssuesApi = vi.hoisted(() => ({
+  get: vi.fn(),
+}));
+
+vi.mock("@/lib/router", () => ({
+  Link: ({ children, to }: { children: ReactNode; to: string }) => <a href={to}>{children}</a>,
+}));
+
+vi.mock("../api/issues", () => ({
+  issuesApi: mockIssuesApi,
+}));
+
+function renderMarkdown(children: string, seededIssues: Array<{ identifier: string; status: string }> = []) {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+      },
+    },
+  });
+
+  for (const issue of seededIssues) {
+    queryClient.setQueryData(queryKeys.issues.detail(issue.identifier), {
+      id: issue.identifier,
+      identifier: issue.identifier,
+      status: issue.status,
+    });
+  }
+
+  return renderToStaticMarkup(
+    <QueryClientProvider client={queryClient}>
+      <ThemeProvider>
+        <MarkdownBody>{children}</MarkdownBody>
+      </ThemeProvider>
+    </QueryClientProvider>,
+  );
+}
 
 describe("MarkdownBody", () => {
   it("renders markdown images without a resolver", () => {
     const html = renderToStaticMarkup(
-      <ThemeProvider>
-        <MarkdownBody>{"![](/api/attachments/test/content)"}</MarkdownBody>
-      </ThemeProvider>,
+      <QueryClientProvider client={new QueryClient()}>
+        <ThemeProvider>
+          <MarkdownBody>{"![](/api/attachments/test/content)"}</MarkdownBody>
+        </ThemeProvider>
+      </QueryClientProvider>,
     );
 
     expect(html).toContain('<img src="/api/attachments/test/content" alt=""/>');
@@ -19,11 +62,13 @@ describe("MarkdownBody", () => {
 
   it("resolves relative image paths when a resolver is provided", () => {
     const html = renderToStaticMarkup(
-      <ThemeProvider>
-        <MarkdownBody resolveImageSrc={(src) => `/resolved/${src}`}>
-          {"![Org chart](images/org-chart.png)"}
-        </MarkdownBody>
-      </ThemeProvider>,
+      <QueryClientProvider client={new QueryClient()}>
+        <ThemeProvider>
+          <MarkdownBody resolveImageSrc={(src) => `/resolved/${src}`}>
+            {"![Org chart](images/org-chart.png)"}
+          </MarkdownBody>
+        </ThemeProvider>
+      </QueryClientProvider>,
     );
 
     expect(html).toContain('src="/resolved/images/org-chart.png"');
@@ -32,11 +77,13 @@ describe("MarkdownBody", () => {
 
   it("renders agent, project, and skill mentions as chips", () => {
     const html = renderToStaticMarkup(
-      <ThemeProvider>
-        <MarkdownBody>
-          {`[@CodexCoder](${buildAgentMentionHref("agent-123", "code")}) [@Paperclip App](${buildProjectMentionHref("project-456", "#336699")}) [/release-changelog](${buildSkillMentionHref("skill-789", "release-changelog")})`}
-        </MarkdownBody>
-      </ThemeProvider>,
+      <QueryClientProvider client={new QueryClient()}>
+        <ThemeProvider>
+          <MarkdownBody>
+            {`[@CodexCoder](${buildAgentMentionHref("agent-123", "code")}) [@Paperclip App](${buildProjectMentionHref("project-456", "#336699")}) [/release-changelog](${buildSkillMentionHref("skill-789", "release-changelog")})`}
+          </MarkdownBody>
+        </ThemeProvider>
+      </QueryClientProvider>,
     );
 
     expect(html).toContain('href="/agents/agent-123"');
@@ -48,4 +95,80 @@ describe("MarkdownBody", () => {
     expect(html).toContain('href="/skills/skill-789"');
     expect(html).toContain('data-mention-kind="skill"');
   });
+
+  it("uses soft-break styling by default", () => {
+    const html = renderMarkdown("First line\nSecond line");
+
+    expect(html).toContain("First line<br/>");
+    expect(html).toContain("Second line");
+  });
+
+  it("can opt out of soft-break styling", () => {
+    const html = renderToStaticMarkup(
+      <QueryClientProvider client={new QueryClient()}>
+        <ThemeProvider>
+          <MarkdownBody softBreaks={false}>
+            {"First line\nSecond line"}
+          </MarkdownBody>
+        </ThemeProvider>
+      </QueryClientProvider>,
+    );
+
+    expect(html).not.toContain("<br/>");
+  });
+
+  it("does not inject extra line-break nodes into nested lists", () => {
+    const html = renderMarkdown("1. Parent item\n   - child a\n   - child b\n\n2. Second item");
+
+    expect(html).not.toContain("[&amp;_p]:whitespace-pre-line");
+    expect(html).not.toContain("Parent item<br/>");
+    expect(html).toContain("<ol>");
+    expect(html).toContain("<ul>");
+  });
+
+  it("linkifies bare issue identifiers in markdown text", () => {
+    const html = renderMarkdown("Depends on PAP-1271 for the hover state.", [
+      { identifier: "PAP-1271", status: "done" },
+    ]);
+
+    expect(html).toContain('href="/issues/PAP-1271"');
+    expect(html).toContain("text-green-600");
+    expect(html).toContain(">PAP-1271<");
+  });
+
+  it("rewrites full issue URLs to internal issue links", () => {
+    const html = renderMarkdown("See http://localhost:3100/PAP/issues/PAP-1179.", [
+      { identifier: "PAP-1179", status: "blocked" },
+    ]);
+
+    expect(html).toContain('href="/issues/PAP-1179"');
+    expect(html).toContain("text-red-600");
+    expect(html).toContain(">http://localhost:3100/PAP/issues/PAP-1179<");
+  });
+
+  it("linkifies issue identifiers inside inline code spans", () => {
+    const html = renderMarkdown("Reference `PAP-1271` here.", [
+      { identifier: "PAP-1271", status: "done" },
+    ]);
+
+    expect(html).toContain('href="/issues/PAP-1271"');
+    expect(html).toContain("<code>PAP-1271</code>");
+    expect(html).toContain("text-green-600");
+  });
+
+  it("can opt out of issue reference linkification for offline previews", () => {
+    const html = renderToStaticMarkup(
+      <QueryClientProvider client={new QueryClient()}>
+        <ThemeProvider>
+          <MarkdownBody linkIssueReferences={false}>
+            {"Depends on PAP-1271 and [manual link](PAP-1271)."}
+          </MarkdownBody>
+        </ThemeProvider>
+      </QueryClientProvider>,
+    );
+
+    expect(html).not.toContain('href="/issues/PAP-1271"');
+    expect(html).toContain("Depends on PAP-1271");
+    expect(html).toContain('href="PAP-1271"');
+  });
 });

ui/src/components/MarkdownBody.tsx

@@ -1,14 +1,23 @@
 import { isValidElement, useEffect, useId, useState, type ReactNode } from "react";
-import Markdown, { type Components } from "react-markdown";
+import { useQuery } from "@tanstack/react-query";
+import Markdown, { type Components, type Options } from "react-markdown";
 import remarkGfm from "remark-gfm";
 import { cn } from "../lib/utils";
 import { useTheme } from "../context/ThemeContext";
 import { mentionChipInlineStyle, parseMentionChipHref } from "../lib/mention-chips";
+import { issuesApi } from "../api/issues";
+import { queryKeys } from "../lib/queryKeys";
+import { Link } from "@/lib/router";
+import { parseIssueReferenceFromHref, remarkLinkIssueReferences } from "../lib/issue-reference";
+import { remarkSoftBreaks } from "../lib/remark-soft-breaks";
+import { StatusIcon } from "./StatusIcon";
 
 interface MarkdownBodyProps {
   children: string;
   className?: string;
   style?: React.CSSProperties;
+  softBreaks?: boolean;
+  linkIssueReferences?: boolean;
   /** Optional resolver for relative image paths (e.g. within export packages) */
   resolveImageSrc?: (src: string) => string | null;
   /** Called when a user clicks an inline image */
@@ -17,6 +26,29 @@ interface MarkdownBodyProps {
 
 let mermaidLoaderPromise: Promise<typeof import("mermaid").default> | null = null;
 
+function MarkdownIssueLink({
+  issuePathId,
+  href,
+  children,
+}: {
+  issuePathId: string;
+  href: string;
+  children: ReactNode;
+}) {
+  const { data } = useQuery({
+    queryKey: queryKeys.issues.detail(issuePathId),
+    queryFn: () => issuesApi.get(issuePathId),
+    staleTime: 60_000,
+  });
+
+  return (
+    <Link to={href} className="inline-flex items-center gap-1.5 align-baseline">
+      {data ? <StatusIcon status={data.status} className="h-3.5 w-3.5" /> : null}
+      <span>{children}</span>
+    </Link>
+  );
+}
+
 function loadMermaid() {
   if (!mermaidLoaderPromise) {
     mermaidLoaderPromise = import("mermaid").then((module) => module.default);
@@ -94,8 +126,23 @@ function MermaidDiagramBlock({ source, darkMode }: { source: string; darkMode: b
   );
 }
 
-export function MarkdownBody({ children, className, style, resolveImageSrc, onImageClick }: MarkdownBodyProps) {
+export function MarkdownBody({
+  children,
+  className,
+  style,
+  softBreaks = true,
+  linkIssueReferences = true,
+  resolveImageSrc,
+  onImageClick,
+}: MarkdownBodyProps) {
   const { theme } = useTheme();
+  const remarkPlugins: NonNullable<Options["remarkPlugins"]> = [remarkGfm];
+  if (linkIssueReferences) {
+    remarkPlugins.push(remarkLinkIssueReferences);
+  }
+  if (softBreaks) {
+    remarkPlugins.push(remarkSoftBreaks);
+  }
   const components: Components = {
     pre: ({ node: _node, children: preChildren, ...preProps }) => {
       const mermaidSource = extractMermaidSource(preChildren);
@@ -105,6 +152,15 @@ export function MarkdownBody({ children, className, style, resolveImageSrc, onIm
       return <pre {...preProps}>{preChildren}</pre>;
     },
     a: ({ href, children: linkChildren }) => {
+      const issueRef = linkIssueReferences ? parseIssueReferenceFromHref(href) : null;
+      if (issueRef) {
+        return (
+          <MarkdownIssueLink issuePathId={issueRef.issuePathId} href={issueRef.href}>
+            {linkChildren}
+          </MarkdownIssueLink>
+        );
+      }
+
       const parsed = href ? parseMentionChipHref(href) : null;
       if (parsed) {
         const targetHref = parsed.kind === "project"
@@ -159,7 +215,7 @@ export function MarkdownBody({ children, className, style, resolveImageSrc, onIm
       )}
       style={style}
     >
-      <Markdown remarkPlugins={[remarkGfm]} components={components} urlTransform={(url) => url}>
+      <Markdown remarkPlugins={remarkPlugins} components={components} urlTransform={(url) => url}>
         {children}
       </Markdown>
     </div>