[codex] Refine markdown issue reference rendering (#4382)

## Thinking Path

> - Paperclip orchestrates AI agents for zero-human companies
> - Task references are a core part of how operators understand issue
relationships across the UI
> - Those references appear both in markdown bodies and in sidebar
relationship panels
> - The rendering had drifted between surfaces, and inline markdown
pills were reading awkwardly inside prose and lists
> - This pull request unifies the underlying issue-reference treatment,
routes issue descriptions through `MarkdownBody`, and switches inline
markdown references to a cleaner text-link presentation
> - The benefit is more consistent issue-reference UX with better
readability in markdown-heavy views

## What Changed

- unified sidebar and markdown issue-reference rendering around the
shared issue-reference components
- routed resting issue descriptions through `MarkdownBody` so
description previews inherit the richer issue-reference treatment
- replaced inline markdown pill chrome with a cleaner inline reference
presentation for prose contexts
- added and updated UI tests for `MarkdownBody` and `InlineEditor`

## Verification

- `pnpm exec vitest run --project @paperclipai/ui
ui/src/components/MarkdownBody.test.tsx
ui/src/components/InlineEditor.test.tsx`

## Risks

- Moderate UI risk: issue-reference rendering now differs intentionally
between inline markdown and relationship sidebars, so regressions would
show up as styling or hover-preview mismatches

> For core feature work, check [`ROADMAP.md`](ROADMAP.md) first and
discuss it in `#dev` before opening the PR. Feature PRs that overlap
with planned core work may need to be redirected — check the roadmap
first. See `CONTRIBUTING.md`.

## Model Used

- OpenAI Codex GPT-5-based coding agent with tool use and code execution
in the Codex CLI environment

## Checklist

- [x] I have included a thinking path that traces from project context
to this change
- [x] I have specified the model used (with version and capability
details)
- [x] I have checked ROADMAP.md and confirmed this PR does not duplicate
planned core work
- [x] I have run tests locally and they pass
- [x] I have added or updated tests where applicable
- [ ] If this change affects the UI, I have included before/after
screenshots
- [ ] I have updated relevant documentation to reflect my changes
- [x] I have considered and documented any risks above
- [x] I will address all Greptile and reviewer comments before
requesting merge

---------

Co-authored-by: Paperclip <noreply@paperclip.ing>

ui/src/components/InlineEditor.test.tsx

@@ -1,6 +1,6 @@
 // @vitest-environment jsdom
 
-import { act, forwardRef, useImperativeHandle, useRef } from "react";
+import { act, forwardRef, useImperativeHandle, useRef, type ReactNode } from "react";
 import { createRoot } from "react-dom/client";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 
@@ -24,8 +24,22 @@ vi.mock("./MarkdownEditor", () => ({
   }),
 }));
 
+vi.mock("./MarkdownBody", () => ({
+  MarkdownBody: ({ children }: { children: ReactNode }) => (
+    <div data-testid="multiline-md-preview">{children}</div>
+  ),
+}));
+
 import { InlineEditor, queueContainedBlurCommit } from "./InlineEditor";
 
+/** Enter multiline edit mode by clicking the preview surface. */
+function enterMultilineEdit(container: HTMLDivElement) {
+  const preview = container.querySelector<HTMLDivElement>('[data-testid="multiline-md-preview"]');
+  if (preview) {
+    preview.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+  }
+}
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 (globalThis as any).IS_REACT_ACT_ENVIRONMENT = true;
 
@@ -139,6 +153,11 @@ describe("InlineEditor", () => {
       root.render(<InlineEditor value="hello" multiline nullable onSave={onSave} />);
     });
 
+    // Non-empty value renders MarkdownBody preview; click to enter edit mode.
+    act(() => {
+      enterMultilineEdit(container);
+    });
+
     const textarea = container.querySelector<HTMLTextAreaElement>('[data-testid="multiline-md-mock"]');
     expect(textarea).not.toBeNull();
 
@@ -165,6 +184,70 @@ describe("InlineEditor", () => {
     outside.remove();
   });
 
+  it("multiline defaults to MarkdownBody preview when value is non-empty, swaps to editor on click", () => {
+    const onSave = vi.fn().mockResolvedValue(undefined);
+    const root = createRoot(container);
+
+    act(() => {
+      root.render(<InlineEditor value="Hello world" multiline onSave={onSave} />);
+    });
+
+    expect(container.querySelector('[data-testid="multiline-md-preview"]')).not.toBeNull();
+    expect(container.querySelector('[data-testid="multiline-md-mock"]')).toBeNull();
+
+    act(() => {
+      enterMultilineEdit(container);
+    });
+
+    expect(container.querySelector('[data-testid="multiline-md-mock"]')).not.toBeNull();
+    expect(container.querySelector('[data-testid="multiline-md-preview"]')).toBeNull();
+
+    act(() => {
+      root.unmount();
+    });
+  });
+
+  it("marks multiline preview textboxes as multiline", () => {
+    const onSave = vi.fn().mockResolvedValue(undefined);
+    const root = createRoot(container);
+
+    act(() => {
+      root.render(<InlineEditor value="Hello world" multiline onSave={onSave} />);
+    });
+
+    const preview = container.querySelector<HTMLElement>('[role="textbox"]');
+    expect(preview).not.toBeNull();
+    expect(preview?.getAttribute("aria-multiline")).toBe("true");
+    expect(preview?.tabIndex).toBe(0);
+
+    act(() => {
+      root.unmount();
+    });
+  });
+
+  it("enters multiline edit mode from the keyboard preview surface", () => {
+    const onSave = vi.fn().mockResolvedValue(undefined);
+    const root = createRoot(container);
+
+    act(() => {
+      root.render(<InlineEditor value="Hello world" multiline onSave={onSave} />);
+    });
+
+    const preview = container.querySelector<HTMLElement>('[role="textbox"]');
+    expect(preview).not.toBeNull();
+
+    act(() => {
+      preview!.dispatchEvent(new KeyboardEvent("keydown", { bubbles: true, key: "Enter" }));
+    });
+
+    expect(container.querySelector('[data-testid="multiline-md-mock"]')).not.toBeNull();
+    expect(container.querySelector('[data-testid="multiline-md-preview"]')).toBeNull();
+
+    act(() => {
+      root.unmount();
+    });
+  });
+
   it("syncs a new multiline value while focused when the user has not edited locally", () => {
     const onSave = vi.fn().mockResolvedValue(undefined);
     const root = createRoot(container);
@@ -200,6 +283,11 @@ describe("InlineEditor", () => {
       root.render(<InlineEditor value="Original" multiline onSave={onSave} />);
     });
 
+    // Non-empty value renders MarkdownBody preview; click to enter edit mode.
+    act(() => {
+      enterMultilineEdit(container);
+    });
+
     const textarea = container.querySelector<HTMLTextAreaElement>('[data-testid="multiline-md-mock"]');
     expect(textarea).not.toBeNull();