From b183cf0752d7967241f60e915e462a36ebb6f619 Mon Sep 17 00:00:00 2001
From: snakajima <satoshi.nakajima@gmail.com>
Date: Fri, 3 Apr 2026 05:41:39 +0900
Subject: [PATCH] markdown view

---
 package.json        |  2 +-
 src/vue/Preview.vue | 66 ++++++++++++++++++++++++++++++++++++++++++++-
 2 files changed, 66 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 910a358..c51ce2a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@gui-chat-plugin/text-response",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Text Response plugin for GUI Chat - Markdown rendering with role-based styling",
   "type": "module",
   "main": "./dist/index.cjs",
diff --git a/src/vue/Preview.vue b/src/vue/Preview.vue
index 2947a41..0fa5ee2 100644
--- a/src/vue/Preview.vue
+++ b/src/vue/Preview.vue
@@ -1,11 +1,12 @@
 <template>
   <div class="text-sm leading-snug" :class="textColorClass">
-    <p class="line-clamp-5 whitespace-pre-wrap">{{ previewText }}</p>
+    <div class="preview-markdown" v-html="renderedMarkdown" />
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed } from "vue";
+import { marked } from "marked";
 import type { ToolResultComplete } from "gui-chat-protocol/vue";
 import type { TextResponseData } from "../core/types";
 
@@ -26,4 +27,67 @@ const textColorClass = computed(() => {
       return "text-gray-700";
   }
 });
+
+const renderedMarkdown = computed(() =>
+  marked(previewText.value, { breaks: true, gfm: true }),
+);
 </script>
+
+<style scoped>
+.preview-markdown {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 5;
+  -webkit-box-orient: vertical;
+}
+
+.preview-markdown :deep(p) {
+  margin: 0;
+  display: inline;
+}
+
+.preview-markdown :deep(h1),
+.preview-markdown :deep(h2),
+.preview-markdown :deep(h3),
+.preview-markdown :deep(h4),
+.preview-markdown :deep(h5),
+.preview-markdown :deep(h6) {
+  font-size: inherit;
+  font-weight: bold;
+  display: inline;
+}
+
+.preview-markdown :deep(ul),
+.preview-markdown :deep(ol) {
+  display: inline;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.preview-markdown :deep(li) {
+  display: inline;
+}
+
+.preview-markdown :deep(li)::before {
+  content: "• ";
+}
+
+.preview-markdown :deep(strong) {
+  font-weight: bold;
+}
+
+.preview-markdown :deep(em) {
+  font-style: italic;
+}
+
+.preview-markdown :deep(code) {
+  font-family: monospace;
+  font-size: 0.9em;
+}
+
+.preview-markdown :deep(pre) {
+  display: inline;
+  white-space: pre-wrap;
+}
+</style>