fix(web,mobile): render Codex citations and artifact templates

[Yash-Singh1]

Artifact template skill UI:

What Changed

• Render Codex file citations as markdown links in assistant messages on web and mobile.
• Added shared citation-to-markdown helpers in packages/client-runtime and wired them into the chat feed render path.
• Passed the citation markdown plugin through the native markdown renderer so iOS uses the same transformation path as web.
• Kept copied assistant text aligned with the rendered citation format.

Why

Codex file citations were appearing as plain text in some client surfaces, which made them harder to read and prevented users from interacting with them as links.

This change normalizes citation rendering at the shared client layer so web and mobile stay consistent without duplicating citation-specific parsing logic in each app.

UI Changes

• Assistant messages that include Codex file citations now display them as markdown links in chat.
• Native selectable markdown on mobile now applies the same citation transformation before parsing.
• If helpful, include before/after screenshots for the updated chat rendering in the PR.

Checklist

• This PR is small and focused
• I explained what changed and why
• I included before/after screenshots for any UI changes
• I included a video for animation/interaction changes

---

Note

Medium Risk
Touches chat markdown parsing, sanitization, and composer draft mutation across web and mobile; behavior is heavily tested but directive edge cases could still affect message rendering.

Overview
Adds shared Codex markdown directive handling in client-runtime (remarkCodexDirectives, citation/template helpers) and wires it through web ChatMarkdown and mobile ThreadFeed.

Assistant messages now turn :codex-file-citation{…} into file link chips and ::artifact-template{…} into template cards (with optional Use template when a composer is available). Use template appends the kind-specific Codex skill prompt via appendCodexArtifactTemplateUsePrompt (no duplicate if already at the end of the draft) and focuses the composer. Copy and clipboard serialization use rendered text (links / Name (Document template)) instead of raw directive syntax; malformed, streaming-incomplete, escaped, or in-code directives stay literal.

Web sanitization allows artifact-template div data attributes; mobile splits markdown around template segments for native rendering.

^{Reviewed by Cursor Bugbot for commit 314bc9c. Bugbot is set up for automated code reviews on this repo. Configure here.}

Note

Render Codex file citations and artifact-template cards in web and mobile chat

• Adds a remarkCodexDirectives plugin in packages/client-runtime that parses :codex-file-citation and ::artifact-template directives into renderable AST nodes, leaving malformed or unrelated colon syntax as literal text
• Web ChatMarkdown renders citations as Markdown links and artifact templates as CodexArtifactTemplateCard components with an optional 'Use template' button; mobile ThreadFeed does the same by splitting markdown into template and non-template segments
• Clicking 'Use template' appends a kind-specific Codex prompt to the composer draft via appendCodexArtifactTemplateUsePrompt (skips insertion if the prompt is already present) and focuses the composer
• Copying an assistant message now renders directives into copy-friendly text (links for citations, Display Name (Presentation label) for templates) instead of raw directive syntax
• Behavioral Change: CHAT_MARKDOWN_SANITIZE_SCHEMA now allows extra div data attributes (CODEX_ARTIFACT_TEMPLATE_HAST_PROPERTIES) so artifact-template metadata survives sanitization; reviewers should verify no unintended attributes pass through

^{Macroscope summarized 314bc9c.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: f51bc45c-4572-425f-aacf-b003d4db402e

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

Warning

Your free Security trial is over. An organization admin can activate Security or dismiss this notice.

---

_{Comment @coderabbitai help to get the list of available commands.}

[github-actions]

Thread transfer impact

✅ Thread transfer remains within every enforced ceiling.

Provider	Metric	Main baseline	This PR	Impact	PR ceiling
Codex	Total thread wire	13.3 KiB	13.3 KiB	0 B (0.0%)	15.1 KiB	✅
Codex	Thread snapshot wire	6.9 KiB	6.9 KiB	−1 B (−0.0%)	7.3 KiB	✅
Codex	Live turn WebSocket wire	6.4 KiB	6.4 KiB	+1 B (+0.0%)	7.8 KiB	✅
Codex	Live turn WebSocket decoded	55.6 KiB	55.6 KiB	0 B (0.0%)	66.4 KiB	✅
Codex	Live turn messages	11	11	0 (0.0%)	21	✅
Claude	Total thread wire	13.3 KiB	13.3 KiB	+26 B (+0.2%)	15.1 KiB	✅
Claude	Thread snapshot wire	6.9 KiB	6.9 KiB	+3 B (+0.0%)	7.3 KiB	✅
Claude	Live turn WebSocket wire	6.4 KiB	6.4 KiB	+23 B (+0.3%)	7.8 KiB	✅
Claude	Live turn WebSocket decoded	56.4 KiB	56.4 KiB	+44 B (+0.1%)	66.4 KiB	✅
Claude	Live turn messages	10	11	+1 (+10.0%)	21	✅

Baseline: e09b88b · PR result: 314bc9c · Source CI: success

Scenario and decoded snapshot size

10 historical turns, 5 command tools per turn, 878.9 KiB retained MCP result per historical turn, and a 1.05 MiB retained result in the measured turn.

• Codex decoded thread snapshot: 109.4 KiB
• Claude decoded thread snapshot: 110.1 KiB

Updated in place by a trusted workflow. PR artifacts are strictly validated and never executed.

[macroscopeapp]

One blocking finding in apps/web/src/components/ChatMarkdown.tsx: enabling remark-directive for all chat markdown changes how ordinary text is rendered, because only codex-file-citation directives get a handler.

Secondary, non-blocking note: the mobile side normalizes citations for copy (copiedText in ThreadFeed.tsx), but the web assistant copy button (MessagesTimeline.tsx → resolveAssistantMessageCopyState → MessageCopyButton) still copies the raw message.text, so copied web output keeps the private :codex-file-citation{...} syntax that the rendered chip now hides. Worth aligning with the mobile behavior in a follow-up.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

Approvability

Verdict: Not approved

Macroscope's review found this PR not approvable — This PR adds new Codex citation rendering and an interactive artifact-template workflow across web and mobile, backed by a substantial shared Markdown parser and composer integration. The production-path behavior and new user-facing capability warrant human review.

No code changes detected at 314bc9c. Prior analysis still applies.

^{You can add or adjust custom eligibility rules. Learn more.}

[macroscopeapp]

Two residual gaps in the new remarkCodexFileCitations directive handling in apps/web/src/components/ChatMarkdown.tsx. Both are rendering regressions introduced by enabling remark-directive on all chat markdown; details inline.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

One finding: enabling remarkDirective for the whole chat pipeline changes the markdown grammar for all message text, which regresses two unrelated rendering paths. Details inline.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

One finding: the task-list marker offsets ChatMarkdown reports are now computed against the citation-transformed source, but the only consumer (FilePreviewPanel) applies them to the original file contents.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

Reviewed the web-side citation rendering change (ChatMarkdown.tsx, MessagesTimeline.logic.ts). The pre-parse rewrite now runs outside the render pipeline, so the earlier directive-grammar regressions (flow directives losing their paragraph wrapper, directive-like prose in links, over-indented list recovery) no longer apply, and task-list offsets stay on the original source when onTaskListChange is supplied. One leftover from the previous approach is noted inline; nothing blocking.

^{Posted via Macroscope — UI Consistency}

Dismissing prior approval to re-evaluate c5ce1fd

Dismissing prior approval to re-evaluate 92b91bc

[macroscopeapp]

Reviewed the web-side Codex directive rendering (ChatMarkdown, markdown-codex-directives, markdown-clipboard, ChatView/MessagesTimeline wiring) for shared-primitive use, Tailwind/CSS ownership, and interaction semantics. The artifact-template card correctly uses the Button primitive with semantic tokens and owner-local classes, the passive-vs-actionable card contract is respected at each ChatMarkdown call site, and every environment-scoped action still resolves scope explicitly. One regression risk on the streaming hot path is noted inline.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

One finding: the assistant message copy button now emits Codex directive source that no longer appears anywhere in the rendered message, and it disagrees with the highlight-and-copy path this PR wires up. Details inline.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

One finding on the Codex directive pipeline in ChatMarkdown. Details inline.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

Two behaviors that earlier revisions of this branch fixed have regressed in the current rewrite. Both are on the web surfaces this check covers.

^{Posted via Macroscope — UI Consistency}

[cursor]

Cursor Bugbot has reviewed your changes using high effort and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit 314bc9c. Configure here.}