feat: add raw/rendered toggle for markdown and CSV artifacts

[baanish]

Summary

• Adds a Rendered / Raw toggle in the viewer toolbar for markdown and CSV artifacts
• Raw mode displays the source content in CodeMirror with syntax highlighting (markdown language for .md, plain text for CSV)
• Toggle resets to "Rendered" when switching artifacts; Print/PDF button hides in raw mode

Test plan

• Load a markdown sample fragment and verify the Rendered/Raw toggle appears
• Toggle to Raw — confirm raw markdown source is shown with syntax highlighting
• Toggle back to Rendered — confirm GFM rendering returns
• Load a CSV sample fragment and verify the toggle appears
• Toggle to Raw — confirm raw CSV text is shown
• Load a code/diff/JSON fragment and verify no toggle appears
• Switch between artifacts and confirm toggle resets to Rendered

🤖 Generated with Claude Code

Summary by CodeRabbit

New Features

• Added a "Rendered/Raw" toggle for markdown and CSV artifacts, allowing users to switch between formatted and raw code views.
• Print/PDF functionality for markdown is now available only in rendered view mode.

[coderabbitai]

Warning

Rate limit exceeded

@baanish has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 26 minutes and 20 seconds before requesting another review.

Your organization is not enrolled in usage-based pricing. Contact your admin to enable usage-based pricing to continue reviews beyond the rate limit, or try again in 26 minutes and 20 seconds.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 2ffa3bf6-1731-4452-b636-14e6d9636a82

📥 Commits

Reviewing files that changed from the base of the PR and between ca31a34 and 0ea343f.

⛔ Files ignored due to path filters (1)

• package-lock.json is excluded by !**/package-lock.json

📒 Files selected for processing (1)

• src/components/viewer-shell.tsx

📝 Walkthrough

Walkthrough

The viewer shell now supports toggling between rendered and raw view modes for markdown and CSV artifacts. When viewing these artifact types, users can switch between the rendered preview and raw code representation, with conditional toolbar actions that respect the active view mode.

Changes

Cohort / File(s)

Summary

View Mode Toggle src/components/viewer-shell.tsx

Added viewMode state tracking ("rendered" | "raw") that resets on artifact changes. Introduced hasRawToggle to conditionally display the toggle UI for markdown and CSV artifacts. Print/PDF button now appears only in rendered mode. Updated rendering logic to display CodeRenderer for markdown (language: "markdown") and CSV (language: "textile") when in raw mode, while preserving existing renderers for other artifact types.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

🐰 A toggle here, a view mode there,
Raw and rendered, quite the pair!
Markdown hops from view to view,
CSV dances—oh, what's new?
One shell to show them all with care! ✨

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and concisely summarizes the main change: adding a raw/rendered toggle feature for markdown and CSV artifacts, which matches the core functionality implemented in the changeset.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch claude/raw-rendered-toggle

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[cloudflare-workers-and-pages]

Deploying agent-render with    Cloudflare Pages

Latest commit:	0ea343f
Status:	✅  Deploy successful!
Preview URL:	https://ee687ab5.agent-render.pages.dev
Branch Preview URL:	https://claude-raw-rendered-toggle.agent-render.pages.dev

View logs

[kilo-code-bot]

Code Review Summary

Status: No Issues Found | Recommendation: Merge

Overview

Visual design refresh with new editorial aesthetic. No functional changes to core viewer shell or Rendered/Raw toggle logic from previous review. Changes include:

• New color tokens (warm ivory/dusk palette with sunset orange accent)
• Updated typography (Fraunces serif, IBM Plex Sans, IBM Plex Mono)
• Full-bleed editorial sections with bento grid layout
• Compressed radius (2px light mode, 0px dark mode)
• Updated copy/text throughout UI

Note: Fragment budget limit updated from 8000 to 8192 chars in docs only.

Files Reviewed (1 file)

• src/components/viewer-shell.tsx - restyled layout, no functional changes

---

_{Reviewed by minimax-m2.5-20260211 · 174,818 tokens}

[coderabbitai]

🧹 Nitpick comments (1)

src/components/viewer-shell.tsx (1)

557-558: Consider using a more semantic language token for CSV raw mode.

Using "textile" as the language token works (falls through to no highlighting), but "textile" is actually a markup language, making this choice misleading. A more self-documenting option would be an empty string or "text".

♻️ Suggested change

-                    <CodeRenderer artifact={{ ...csvArtifact, kind: "code", language: "textile" }} onReady={markRendererReady} />
+                    <CodeRenderer artifact={{ ...csvArtifact, kind: "code", language: "text" }} onReady={markRendererReady} />

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/components/viewer-shell.tsx` around lines 557 - 558, The CSV raw-mode
artifact currently passes language: "textile" which is misleading; update the
CodeRenderer invocation that builds the artifact (the expression creating
{...csvArtifact, kind: "code", language: "textile"}) to use a more semantic
token such as an empty string or "text" (keep the rest of the artifact and the
onReady handler markRendererReady unchanged) so CSV raw viewMode === "raw" is
self-documenting and doesn't imply textile markup.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@src/components/viewer-shell.tsx`:
- Around line 557-558: The CSV raw-mode artifact currently passes language:
"textile" which is misleading; update the CodeRenderer invocation that builds
the artifact (the expression creating {...csvArtifact, kind: "code", language:
"textile"}) to use a more semantic token such as an empty string or "text" (keep
the rest of the artifact and the onReady handler markRendererReady unchanged) so
CSV raw viewMode === "raw" is self-documenting and doesn't imply textile markup.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 0d694ac6-a4d3-4028-ac61-e5aacfcfb9b6

📥 Commits

Reviewing files that changed from the base of the PR and between 3d5ed45 and ca31a34.

📒 Files selected for processing (1)

• src/components/viewer-shell.tsx