From ca205d5a92fe6ca0d995737c371422a23679b6ab Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Fri, 4 Apr 2025 13:09:31 +0000
Subject: [PATCH 01/10] Add edit functionality to KnowledgeSuggestionDetailPage

Co-Authored-By: noritaka.ikeda@route06.co.jp <noritaka.ikeda@route06.co.jp>
---
 .../updateKnowledgeSuggestionContent.ts       |  45 +++++++
 .../EditableContent.module.css                | 115 ++++++++++++++++++
 .../EditableContent/EditableContent.tsx       |  98 +++++++++++++++
 .../KnowledgeSuggestionDetailPage.tsx         |  17 ++-
 4 files changed, 271 insertions(+), 4 deletions(-)
 create mode 100644 frontend/apps/app/features/projects/actions/updateKnowledgeSuggestionContent.ts
 create mode 100644 frontend/apps/app/features/projects/components/EditableContent/EditableContent.module.css
 create mode 100644 frontend/apps/app/features/projects/components/EditableContent/EditableContent.tsx

diff --git a/frontend/apps/app/features/projects/actions/updateKnowledgeSuggestionContent.ts b/frontend/apps/app/features/projects/actions/updateKnowledgeSuggestionContent.ts
new file mode 100644
index 0000000000..af24cb8c84
--- /dev/null
+++ b/frontend/apps/app/features/projects/actions/updateKnowledgeSuggestionContent.ts
@@ -0,0 +1,45 @@
+'use server'
+
+import { createClient } from '@/libs/db/server'
+import * as v from 'valibot'
+
+const formDataSchema = v.object({
+  suggestionId: v.pipe(
+    v.string(),
+    v.transform((value) => Number(value)),
+  ),
+  content: v.string(),
+})
+
+export const updateKnowledgeSuggestionContent = async (formData: FormData) => {
+  const formDataObject = {
+    suggestionId: formData.get('suggestionId'),
+    content: formData.get('content'),
+  }
+
+  const parsedData = v.safeParse(formDataSchema, formDataObject)
+
+  if (!parsedData.success) {
+    throw new Error(`Invalid form data: ${JSON.stringify(parsedData.issues)}`)
+  }
+
+  const { suggestionId, content } = parsedData.output
+
+  try {
+    const supabase = await createClient()
+
+    const { error: updateError } = await supabase
+      .from('KnowledgeSuggestion')
+      .update({ content, updatedAt: new Date().toISOString() })
+      .eq('id', suggestionId)
+
+    if (updateError) {
+      throw new Error('Failed to update knowledge suggestion content')
+    }
+
+    return { success: true }
+  } catch (error) {
+    console.error('Error updating knowledge suggestion content:', error)
+    throw error
+  }
+}
diff --git a/frontend/apps/app/features/projects/components/EditableContent/EditableContent.module.css b/frontend/apps/app/features/projects/components/EditableContent/EditableContent.module.css
new file mode 100644
index 0000000000..448da206d5
--- /dev/null
+++ b/frontend/apps/app/features/projects/components/EditableContent/EditableContent.module.css
@@ -0,0 +1,115 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.sectionTitle {
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin: 0;
+  color: var(--color-primary);
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.editButton {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.5rem 1rem;
+  background-color: var(--color-background-tertiary);
+  color: var(--color-primary);
+  border: 1px solid var(--color-border);
+  border-radius: 0.375rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.editButton:hover {
+  background-color: var(--color-background-tertiary-hover);
+  transform: translateY(-1px);
+}
+
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.contentTextarea {
+  padding: 1.25rem;
+  background-color: var(--color-background-code);
+  border-radius: 0.5rem;
+  font-family: monospace;
+  font-size: 0.875rem;
+  line-height: 1.6;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  resize: vertical;
+  min-height: 200px;
+  width: 100%;
+}
+
+.actionButtons {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.75rem;
+  margin-top: 1rem;
+}
+
+.cancelButton {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.5rem 1rem;
+  background-color: var(--color-background-tertiary);
+  color: var(--color-text-primary);
+  border: 1px solid var(--color-border);
+  border-radius: 0.375rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.cancelButton:hover {
+  background-color: var(--color-background-tertiary-hover);
+}
+
+.saveButton {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.5rem 1rem;
+  background-color: var(--color-primary);
+  color: white;
+  border: none;
+  border-radius: 0.375rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.saveButton:hover {
+  background-color: var(--color-primary-dark);
+  transform: translateY(-1px);
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
+}
+
+.saveButton:disabled,
+.cancelButton:disabled {
+  opacity: 0.7;
+  cursor: not-allowed;
+  transform: none;
+  box-shadow: none;
+}
diff --git a/frontend/apps/app/features/projects/components/EditableContent/EditableContent.tsx b/frontend/apps/app/features/projects/components/EditableContent/EditableContent.tsx
new file mode 100644
index 0000000000..641c31ed90
--- /dev/null
+++ b/frontend/apps/app/features/projects/components/EditableContent/EditableContent.tsx
@@ -0,0 +1,98 @@
+'use client'
+
+import React, { useState } from 'react'
+import { updateKnowledgeSuggestionContent } from '../../actions/updateKnowledgeSuggestionContent'
+import styles from './EditableContent.module.css'
+
+type EditableContentProps = {
+  content: string
+  suggestionId: number
+  className?: string
+}
+
+export const EditableContent = ({
+  content,
+  suggestionId,
+  className,
+}: EditableContentProps) => {
+  const [isEditing, setIsEditing] = useState(false)
+  const [editedContent, setEditedContent] = useState(content)
+  const [isSaving, setIsSaving] = useState(false)
+  const [savedContent, setSavedContent] = useState(content)
+
+  const handleEditClick = () => {
+    setIsEditing(true)
+  }
+
+  const handleCancelClick = () => {
+    setEditedContent(savedContent)
+    setIsEditing(false)
+  }
+
+  const handleSave = async (formData: FormData) => {
+    try {
+      setIsSaving(true)
+      await updateKnowledgeSuggestionContent(formData)
+      setSavedContent(editedContent)
+      setIsEditing(false)
+    } catch (error) {
+      console.error('Error saving content:', error)
+    } finally {
+      setIsSaving(false)
+    }
+  }
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.header}>
+        <div className={styles.sectionTitle}>Content</div>
+        {!isEditing && (
+          <button
+            type="button"
+            onClick={handleEditClick}
+            className={styles.editButton}
+            aria-label="Edit content"
+          >
+            Edit
+          </button>
+        )}
+      </div>
+      
+      {isEditing ? (
+        <form onSubmit={async (e) => {
+          e.preventDefault();
+          const formData = new FormData(e.currentTarget);
+          await handleSave(formData);
+        }} className={styles.form}>
+          <input type="hidden" name="suggestionId" value={suggestionId} />
+          <textarea
+            name="content"
+            value={editedContent}
+            onChange={(e) => setEditedContent(e.target.value)}
+            className={`${styles.contentTextarea} ${className || ''}`}
+            rows={10}
+          />
+          <div className={styles.actionButtons}>
+            <button
+              type="button"
+              onClick={handleCancelClick}
+              className={styles.cancelButton}
+              disabled={isSaving}
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              className={styles.saveButton}
+              disabled={isSaving}
+            >
+              {isSaving ? 'Saving...' : 'Save'}
+            </button>
+          </div>
+        </form>
+      ) : (
+        <pre className={className}>{savedContent}</pre>
+      )}
+    </div>
+  )
+}
diff --git a/frontend/apps/app/features/projects/pages/KnowledgeSuggestionDetailPage/KnowledgeSuggestionDetailPage.tsx b/frontend/apps/app/features/projects/pages/KnowledgeSuggestionDetailPage/KnowledgeSuggestionDetailPage.tsx
index e876f77a5c..df2be5c39c 100644
--- a/frontend/apps/app/features/projects/pages/KnowledgeSuggestionDetailPage/KnowledgeSuggestionDetailPage.tsx
+++ b/frontend/apps/app/features/projects/pages/KnowledgeSuggestionDetailPage/KnowledgeSuggestionDetailPage.tsx
@@ -6,6 +6,7 @@ import { notFound } from 'next/navigation'
 import type { FC, ReactNode } from 'react'
 import { UserFeedbackClient } from '../../../../components/UserFeedbackClient'
 import { approveKnowledgeSuggestion } from '../../actions/approveKnowledgeSuggestion'
+import { EditableContent } from '../../components/EditableContent/EditableContent'
 import { getOriginalDocumentContent } from '../../utils/getOriginalDocumentContent'
 import styles from './KnowledgeSuggestionDetailPage.module.css'
 
@@ -102,10 +103,17 @@ export const KnowledgeSuggestionDetailPage: FC<Props> = async ({
         </div>
 
         <div className={styles.contentSection}>
-          <h2 className={styles.sectionTitle}>Content</h2>
-          {suggestion.approvedAt ? (
-            <pre className={styles.codeContent}>{suggestion.content}</pre>
-          ) : (
+          <div className={styles.header}>
+            <h2 className={styles.sectionTitle}>Content</h2>
+          </div>
+          
+          <EditableContent
+            content={suggestion.content}
+            suggestionId={suggestion.id}
+            className={styles.codeContent}
+          />
+          
+          {!suggestion.approvedAt && (
             <DiffDisplay
               originalContent={
                 await getOriginalDocumentContent(
@@ -117,6 +125,7 @@ export const KnowledgeSuggestionDetailPage: FC<Props> = async ({
               newContent={suggestion.content}
             />
           )}
+          
           {/* Client-side user feedback component */}
           <div className={styles.feedbackSection}>
             <UserFeedbackClient traceId={suggestion.traceId} />

From d22a2842b6c9fb3c24939d7f60702565cef59981 Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Fri, 4 Apr 2025 13:13:10 +0000
Subject: [PATCH 02/10] Fix form submission to use standard Next.js server
 action pattern

Co-Authored-By: noritaka.ikeda@route06.co.jp <noritaka.ikeda@route06.co.jp>
---
 .../projects/components/EditableContent/EditableContent.tsx | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/frontend/apps/app/features/projects/components/EditableContent/EditableContent.tsx b/frontend/apps/app/features/projects/components/EditableContent/EditableContent.tsx
index 641c31ed90..38faa034cf 100644
--- a/frontend/apps/app/features/projects/components/EditableContent/EditableContent.tsx
+++ b/frontend/apps/app/features/projects/components/EditableContent/EditableContent.tsx
@@ -59,11 +59,7 @@ export const EditableContent = ({
       </div>
       
       {isEditing ? (
-        <form onSubmit={async (e) => {
-          e.preventDefault();
-          const formData = new FormData(e.currentTarget);
-          await handleSave(formData);
-        }} className={styles.form}>
+        <form action={handleSave} className={styles.form}>
           <input type="hidden" name="suggestionId" value={suggestionId} />
           <textarea
             name="content"

From e6a9edabe8b78c135812d2a3ca9bf5debe6e0850 Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Fri, 4 Apr 2025 13:16:02 +0000
Subject: [PATCH 03/10] Fix trailing whitespace issues

Co-Authored-By: noritaka.ikeda@route06.co.jp <noritaka.ikeda@route06.co.jp>
---
 .../KnowledgeSuggestionDetailPage.tsx                       | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/apps/app/features/projects/pages/KnowledgeSuggestionDetailPage/KnowledgeSuggestionDetailPage.tsx b/frontend/apps/app/features/projects/pages/KnowledgeSuggestionDetailPage/KnowledgeSuggestionDetailPage.tsx
index df2be5c39c..4c05615ebf 100644
--- a/frontend/apps/app/features/projects/pages/KnowledgeSuggestionDetailPage/KnowledgeSuggestionDetailPage.tsx
+++ b/frontend/apps/app/features/projects/pages/KnowledgeSuggestionDetailPage/KnowledgeSuggestionDetailPage.tsx
@@ -106,13 +106,13 @@ export const KnowledgeSuggestionDetailPage: FC<Props> = async ({
           <div className={styles.header}>
             <h2 className={styles.sectionTitle}>Content</h2>
           </div>
-          
+
           <EditableContent
             content={suggestion.content}
             suggestionId={suggestion.id}
             className={styles.codeContent}
           />
-          
+
           {!suggestion.approvedAt && (
             <DiffDisplay
               originalContent={
@@ -125,7 +125,7 @@ export const KnowledgeSuggestionDetailPage: FC<Props> = async ({
               newContent={suggestion.content}
             />
           )}
-          
+
           {/* Client-side user feedback component */}
           <div className={styles.feedbackSection}>
             <UserFeedbackClient traceId={suggestion.traceId} />

From e353ef5bb92d04ad41a3b285039d8691c8afd40c Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Fri, 4 Apr 2025 13:16:37 +0000
Subject: [PATCH 04/10] Fix trailing whitespace in EditableContent.tsx

Co-Authored-By: noritaka.ikeda@route06.co.jp <noritaka.ikeda@route06.co.jp>
---
 .../projects/components/EditableContent/EditableContent.tsx     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/apps/app/features/projects/components/EditableContent/EditableContent.tsx b/frontend/apps/app/features/projects/components/EditableContent/EditableContent.tsx
index 38faa034cf..e76396e43f 100644
--- a/frontend/apps/app/features/projects/components/EditableContent/EditableContent.tsx
+++ b/frontend/apps/app/features/projects/components/EditableContent/EditableContent.tsx
@@ -57,7 +57,7 @@ export const EditableContent = ({
           </button>
         )}
       </div>
-      
+
       {isEditing ? (
         <form action={handleSave} className={styles.form}>
           <input type="hidden" name="suggestionId" value={suggestionId} />

From 55ddb37f4fae3fdad59a6f3c4b4e160da67ef5a7 Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Mon, 7 Apr 2025 05:41:23 +0000
Subject: [PATCH 05/10] Refactor EditableContent to use Render Hooks Pattern
 and fix display logic

Co-Authored-By: noritaka.ikeda@route06.co.jp <noritaka.ikeda@route06.co.jp>
---
 .../EditableContent/EditableContent.tsx       | 44 +++++++++++++++----
 .../KnowledgeSuggestionDetailPage.tsx         | 34 ++++++++------
 2 files changed, 56 insertions(+), 22 deletions(-)

diff --git a/frontend/apps/app/features/projects/components/EditableContent/EditableContent.tsx b/frontend/apps/app/features/projects/components/EditableContent/EditableContent.tsx
index e76396e43f..f01536249d 100644
--- a/frontend/apps/app/features/projects/components/EditableContent/EditableContent.tsx
+++ b/frontend/apps/app/features/projects/components/EditableContent/EditableContent.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import React, { useState } from 'react'
+import React, { ReactNode, useState } from 'react'
 import { updateKnowledgeSuggestionContent } from '../../actions/updateKnowledgeSuggestionContent'
 import styles from './EditableContent.module.css'
 
@@ -8,17 +8,14 @@ type EditableContentProps = {
   content: string
   suggestionId: number
   className?: string
+  children: (isEditing: boolean, content: string) => ReactNode
 }
 
-export const EditableContent = ({
-  content,
-  suggestionId,
-  className,
-}: EditableContentProps) => {
+export const useEditableContent = (initialContent: string) => {
   const [isEditing, setIsEditing] = useState(false)
-  const [editedContent, setEditedContent] = useState(content)
+  const [editedContent, setEditedContent] = useState(initialContent)
   const [isSaving, setIsSaving] = useState(false)
-  const [savedContent, setSavedContent] = useState(content)
+  const [savedContent, setSavedContent] = useState(initialContent)
 
   const handleEditClick = () => {
     setIsEditing(true)
@@ -42,6 +39,35 @@ export const EditableContent = ({
     }
   }
 
+  return {
+    isEditing,
+    editedContent,
+    isSaving,
+    savedContent,
+    handleEditClick,
+    handleCancelClick,
+    handleSave,
+    setEditedContent,
+  }
+}
+
+export const EditableContent = ({
+  content,
+  suggestionId,
+  className,
+  children,
+}: EditableContentProps) => {
+  const {
+    isEditing,
+    editedContent,
+    isSaving,
+    savedContent,
+    handleEditClick,
+    handleCancelClick,
+    handleSave,
+    setEditedContent,
+  } = useEditableContent(content)
+
   return (
     <div className={styles.container}>
       <div className={styles.header}>
@@ -87,7 +113,7 @@ export const EditableContent = ({
           </div>
         </form>
       ) : (
-        <pre className={className}>{savedContent}</pre>
+        children(isEditing, savedContent)
       )}
     </div>
   )
diff --git a/frontend/apps/app/features/projects/pages/KnowledgeSuggestionDetailPage/KnowledgeSuggestionDetailPage.tsx b/frontend/apps/app/features/projects/pages/KnowledgeSuggestionDetailPage/KnowledgeSuggestionDetailPage.tsx
index 4c05615ebf..cb755b301d 100644
--- a/frontend/apps/app/features/projects/pages/KnowledgeSuggestionDetailPage/KnowledgeSuggestionDetailPage.tsx
+++ b/frontend/apps/app/features/projects/pages/KnowledgeSuggestionDetailPage/KnowledgeSuggestionDetailPage.tsx
@@ -59,6 +59,14 @@ export const KnowledgeSuggestionDetailPage: FC<Props> = async ({
 }) => {
   const suggestion = await getKnowledgeSuggestionDetail(projectId, suggestionId)
   const repository = suggestion.project.repositoryMappings[0]?.repository
+  
+  const originalContent = !suggestion.approvedAt
+    ? await getOriginalDocumentContent(
+        projectId,
+        suggestion.branchName,
+        suggestion.path,
+      )
+    : null
 
   return (
     <div className={styles.container}>
@@ -111,20 +119,20 @@ export const KnowledgeSuggestionDetailPage: FC<Props> = async ({
             content={suggestion.content}
             suggestionId={suggestion.id}
             className={styles.codeContent}
-          />
-
-          {!suggestion.approvedAt && (
-            <DiffDisplay
-              originalContent={
-                await getOriginalDocumentContent(
-                  projectId,
-                  suggestion.branchName,
-                  suggestion.path,
-                )
+          >
+            {(isEditing, content) => {
+              if (isEditing) {
+                return null
               }
-              newContent={suggestion.content}
-            />
-          )}
+              
+              return !suggestion.approvedAt ? (
+                <DiffDisplay
+                  originalContent={originalContent}
+                  newContent={content}
+                />
+              ) : null
+            }}
+          </EditableContent>
 
           {/* Client-side user feedback component */}
           <div className={styles.feedbackSection}>

From 101c153af01fc271134b3f82931b614a039b6dae Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Mon, 7 Apr 2025 05:44:13 +0000
Subject: [PATCH 06/10] Fix whitespace issues to resolve lint errors

Co-Authored-By: noritaka.ikeda@route06.co.jp <noritaka.ikeda@route06.co.jp>
---
 .../projects/components/EditableContent/EditableContent.tsx   | 2 +-
 .../KnowledgeSuggestionDetailPage.tsx                         | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/apps/app/features/projects/components/EditableContent/EditableContent.tsx b/frontend/apps/app/features/projects/components/EditableContent/EditableContent.tsx
index f01536249d..1d3d336230 100644
--- a/frontend/apps/app/features/projects/components/EditableContent/EditableContent.tsx
+++ b/frontend/apps/app/features/projects/components/EditableContent/EditableContent.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import React, { ReactNode, useState } from 'react'
+import React, { type ReactNode, useState } from 'react'
 import { updateKnowledgeSuggestionContent } from '../../actions/updateKnowledgeSuggestionContent'
 import styles from './EditableContent.module.css'
 
diff --git a/frontend/apps/app/features/projects/pages/KnowledgeSuggestionDetailPage/KnowledgeSuggestionDetailPage.tsx b/frontend/apps/app/features/projects/pages/KnowledgeSuggestionDetailPage/KnowledgeSuggestionDetailPage.tsx
index cb755b301d..7f5ffdf586 100644
--- a/frontend/apps/app/features/projects/pages/KnowledgeSuggestionDetailPage/KnowledgeSuggestionDetailPage.tsx
+++ b/frontend/apps/app/features/projects/pages/KnowledgeSuggestionDetailPage/KnowledgeSuggestionDetailPage.tsx
@@ -59,7 +59,7 @@ export const KnowledgeSuggestionDetailPage: FC<Props> = async ({
 }) => {
   const suggestion = await getKnowledgeSuggestionDetail(projectId, suggestionId)
   const repository = suggestion.project.repositoryMappings[0]?.repository
-  
+
   const originalContent = !suggestion.approvedAt
     ? await getOriginalDocumentContent(
         projectId,
@@ -124,7 +124,7 @@ export const KnowledgeSuggestionDetailPage: FC<Props> = async ({
               if (isEditing) {
                 return null
               }
-              
+
               return !suggestion.approvedAt ? (
                 <DiffDisplay
                   originalContent={originalContent}

From 18dbdcc804c130db4db6b8387d64db78e4bcf559 Mon Sep 17 00:00:00 2001
From: IkedaNoritaka <50833174+NoritakaIkeda@users.noreply.github.com>
Date: Mon, 7 Apr 2025 15:03:11 +0900
Subject: [PATCH 07/10] Revert "Fix whitespace issues to resolve lint errors"

This reverts commit 101c153af01fc271134b3f82931b614a039b6dae.
---
 .../projects/components/EditableContent/EditableContent.tsx   | 2 +-
 .../KnowledgeSuggestionDetailPage.tsx                         | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/apps/app/features/projects/components/EditableContent/EditableContent.tsx b/frontend/apps/app/features/projects/components/EditableContent/EditableContent.tsx
index 1d3d336230..f01536249d 100644
--- a/frontend/apps/app/features/projects/components/EditableContent/EditableContent.tsx
+++ b/frontend/apps/app/features/projects/components/EditableContent/EditableContent.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import React, { type ReactNode, useState } from 'react'
+import React, { ReactNode, useState } from 'react'
 import { updateKnowledgeSuggestionContent } from '../../actions/updateKnowledgeSuggestionContent'
 import styles from './EditableContent.module.css'
 
diff --git a/frontend/apps/app/features/projects/pages/KnowledgeSuggestionDetailPage/KnowledgeSuggestionDetailPage.tsx b/frontend/apps/app/features/projects/pages/KnowledgeSuggestionDetailPage/KnowledgeSuggestionDetailPage.tsx
index 7f5ffdf586..cb755b301d 100644
--- a/frontend/apps/app/features/projects/pages/KnowledgeSuggestionDetailPage/KnowledgeSuggestionDetailPage.tsx
+++ b/frontend/apps/app/features/projects/pages/KnowledgeSuggestionDetailPage/KnowledgeSuggestionDetailPage.tsx
@@ -59,7 +59,7 @@ export const KnowledgeSuggestionDetailPage: FC<Props> = async ({
 }) => {
   const suggestion = await getKnowledgeSuggestionDetail(projectId, suggestionId)
   const repository = suggestion.project.repositoryMappings[0]?.repository
-
+  
   const originalContent = !suggestion.approvedAt
     ? await getOriginalDocumentContent(
         projectId,
@@ -124,7 +124,7 @@ export const KnowledgeSuggestionDetailPage: FC<Props> = async ({
               if (isEditing) {
                 return null
               }
-
+              
               return !suggestion.approvedAt ? (
                 <DiffDisplay
                   originalContent={originalContent}

From 108560071cc86cd8ecbc91419444e87f73432603 Mon Sep 17 00:00:00 2001
From: IkedaNoritaka <50833174+NoritakaIkeda@users.noreply.github.com>
Date: Mon, 7 Apr 2025 15:03:16 +0900
Subject: [PATCH 08/10] Revert "Refactor EditableContent to use Render Hooks
 Pattern and fix display logic"

This reverts commit 55ddb37f4fae3fdad59a6f3c4b4e160da67ef5a7.
---
 .../EditableContent/EditableContent.tsx       | 44 ++++---------------
 .../KnowledgeSuggestionDetailPage.tsx         | 34 ++++++--------
 2 files changed, 22 insertions(+), 56 deletions(-)

diff --git a/frontend/apps/app/features/projects/components/EditableContent/EditableContent.tsx b/frontend/apps/app/features/projects/components/EditableContent/EditableContent.tsx
index f01536249d..e76396e43f 100644
--- a/frontend/apps/app/features/projects/components/EditableContent/EditableContent.tsx
+++ b/frontend/apps/app/features/projects/components/EditableContent/EditableContent.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import React, { ReactNode, useState } from 'react'
+import React, { useState } from 'react'
 import { updateKnowledgeSuggestionContent } from '../../actions/updateKnowledgeSuggestionContent'
 import styles from './EditableContent.module.css'
 
@@ -8,14 +8,17 @@ type EditableContentProps = {
   content: string
   suggestionId: number
   className?: string
-  children: (isEditing: boolean, content: string) => ReactNode
 }
 
-export const useEditableContent = (initialContent: string) => {
+export const EditableContent = ({
+  content,
+  suggestionId,
+  className,
+}: EditableContentProps) => {
   const [isEditing, setIsEditing] = useState(false)
-  const [editedContent, setEditedContent] = useState(initialContent)
+  const [editedContent, setEditedContent] = useState(content)
   const [isSaving, setIsSaving] = useState(false)
-  const [savedContent, setSavedContent] = useState(initialContent)
+  const [savedContent, setSavedContent] = useState(content)
 
   const handleEditClick = () => {
     setIsEditing(true)
@@ -39,35 +42,6 @@ export const useEditableContent = (initialContent: string) => {
     }
   }
 
-  return {
-    isEditing,
-    editedContent,
-    isSaving,
-    savedContent,
-    handleEditClick,
-    handleCancelClick,
-    handleSave,
-    setEditedContent,
-  }
-}
-
-export const EditableContent = ({
-  content,
-  suggestionId,
-  className,
-  children,
-}: EditableContentProps) => {
-  const {
-    isEditing,
-    editedContent,
-    isSaving,
-    savedContent,
-    handleEditClick,
-    handleCancelClick,
-    handleSave,
-    setEditedContent,
-  } = useEditableContent(content)
-
   return (
     <div className={styles.container}>
       <div className={styles.header}>
@@ -113,7 +87,7 @@ export const EditableContent = ({
           </div>
         </form>
       ) : (
-        children(isEditing, savedContent)
+        <pre className={className}>{savedContent}</pre>
       )}
     </div>
   )
diff --git a/frontend/apps/app/features/projects/pages/KnowledgeSuggestionDetailPage/KnowledgeSuggestionDetailPage.tsx b/frontend/apps/app/features/projects/pages/KnowledgeSuggestionDetailPage/KnowledgeSuggestionDetailPage.tsx
index cb755b301d..4c05615ebf 100644
--- a/frontend/apps/app/features/projects/pages/KnowledgeSuggestionDetailPage/KnowledgeSuggestionDetailPage.tsx
+++ b/frontend/apps/app/features/projects/pages/KnowledgeSuggestionDetailPage/KnowledgeSuggestionDetailPage.tsx
@@ -59,14 +59,6 @@ export const KnowledgeSuggestionDetailPage: FC<Props> = async ({
 }) => {
   const suggestion = await getKnowledgeSuggestionDetail(projectId, suggestionId)
   const repository = suggestion.project.repositoryMappings[0]?.repository
-  
-  const originalContent = !suggestion.approvedAt
-    ? await getOriginalDocumentContent(
-        projectId,
-        suggestion.branchName,
-        suggestion.path,
-      )
-    : null
 
   return (
     <div className={styles.container}>
@@ -119,20 +111,20 @@ export const KnowledgeSuggestionDetailPage: FC<Props> = async ({
             content={suggestion.content}
             suggestionId={suggestion.id}
             className={styles.codeContent}
-          >
-            {(isEditing, content) => {
-              if (isEditing) {
-                return null
+          />
+
+          {!suggestion.approvedAt && (
+            <DiffDisplay
+              originalContent={
+                await getOriginalDocumentContent(
+                  projectId,
+                  suggestion.branchName,
+                  suggestion.path,
+                )
               }
-              
-              return !suggestion.approvedAt ? (
-                <DiffDisplay
-                  originalContent={originalContent}
-                  newContent={content}
-                />
-              ) : null
-            }}
-          </EditableContent>
+              newContent={suggestion.content}
+            />
+          )}
 
           {/* Client-side user feedback component */}
           <div className={styles.feedbackSection}>

From b0074097fc95f643edf63848326ea59c5531973d Mon Sep 17 00:00:00 2001
From: IkedaNoritaka <50833174+NoritakaIkeda@users.noreply.github.com>
Date: Mon, 7 Apr 2025 15:58:38 +0900
Subject: [PATCH 09/10] =?UTF-8?q?=F0=9F=94=A7=20Add=20a=20placeholder=20to?=
 =?UTF-8?q?=20the=20EditableContent=20component=20and=20update=20the=20dis?=
 =?UTF-8?q?play=20logic=20in=20the=20KnowledgeSuggestionDetailPage.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../EditableContent/EditableContent.tsx       |  6 +++--
 .../KnowledgeSuggestionDetailPage.tsx         | 27 ++++++++++---------
 2 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/frontend/apps/app/features/projects/components/EditableContent/EditableContent.tsx b/frontend/apps/app/features/projects/components/EditableContent/EditableContent.tsx
index e76396e43f..0dda0fc9f1 100644
--- a/frontend/apps/app/features/projects/components/EditableContent/EditableContent.tsx
+++ b/frontend/apps/app/features/projects/components/EditableContent/EditableContent.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import React, { useState } from 'react'
+import React, { type ReactNode, useState } from 'react'
 import { updateKnowledgeSuggestionContent } from '../../actions/updateKnowledgeSuggestionContent'
 import styles from './EditableContent.module.css'
 
@@ -8,12 +8,14 @@ type EditableContentProps = {
   content: string
   suggestionId: number
   className?: string
+  placeholder?: ReactNode
 }
 
 export const EditableContent = ({
   content,
   suggestionId,
   className,
+  placeholder,
 }: EditableContentProps) => {
   const [isEditing, setIsEditing] = useState(false)
   const [editedContent, setEditedContent] = useState(content)
@@ -87,7 +89,7 @@ export const EditableContent = ({
           </div>
         </form>
       ) : (
-        <pre className={className}>{savedContent}</pre>
+        placeholder
       )}
     </div>
   )
diff --git a/frontend/apps/app/features/projects/pages/KnowledgeSuggestionDetailPage/KnowledgeSuggestionDetailPage.tsx b/frontend/apps/app/features/projects/pages/KnowledgeSuggestionDetailPage/KnowledgeSuggestionDetailPage.tsx
index 4c05615ebf..46c6337357 100644
--- a/frontend/apps/app/features/projects/pages/KnowledgeSuggestionDetailPage/KnowledgeSuggestionDetailPage.tsx
+++ b/frontend/apps/app/features/projects/pages/KnowledgeSuggestionDetailPage/KnowledgeSuggestionDetailPage.tsx
@@ -111,21 +111,22 @@ export const KnowledgeSuggestionDetailPage: FC<Props> = async ({
             content={suggestion.content}
             suggestionId={suggestion.id}
             className={styles.codeContent}
+            placeholder={
+              !suggestion.approvedAt ? (
+                <DiffDisplay
+                  originalContent={
+                    await getOriginalDocumentContent(
+                      projectId,
+                      suggestion.branchName,
+                      suggestion.path,
+                    )
+                  }
+                  newContent={suggestion.content}
+                />
+              ) : null
+            }
           />
 
-          {!suggestion.approvedAt && (
-            <DiffDisplay
-              originalContent={
-                await getOriginalDocumentContent(
-                  projectId,
-                  suggestion.branchName,
-                  suggestion.path,
-                )
-              }
-              newContent={suggestion.content}
-            />
-          )}
-
           {/* Client-side user feedback component */}
           <div className={styles.feedbackSection}>
             <UserFeedbackClient traceId={suggestion.traceId} />

From 1d40569b548f0ff3449f146ac6d0860174383299 Mon Sep 17 00:00:00 2001
From: IkedaNoritaka <50833174+NoritakaIkeda@users.noreply.github.com>
Date: Mon, 7 Apr 2025 15:59:05 +0900
Subject: [PATCH 10/10] =?UTF-8?q?=F0=9F=94=A7=20Implement=20DiffDisplay=20?=
 =?UTF-8?q?component=20and=20integrate=20it=20into=20EditableContent=20and?=
 =?UTF-8?q?=20KnowledgeSuggestionDetailPage?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../DiffDisplay/DiffDisplay.module.css        | 22 ++++++
 .../components/DiffDisplay/DiffDisplay.tsx    | 62 ++++++++++++++++
 .../EditableContent.module.css                |  6 ++
 .../EditableContent/EditableContent.tsx       | 16 +++-
 .../KnowledgeSuggestionDetailPage.tsx         | 73 +++----------------
 5 files changed, 113 insertions(+), 66 deletions(-)
 create mode 100644 frontend/apps/app/features/projects/components/DiffDisplay/DiffDisplay.module.css
 create mode 100644 frontend/apps/app/features/projects/components/DiffDisplay/DiffDisplay.tsx

diff --git a/frontend/apps/app/features/projects/components/DiffDisplay/DiffDisplay.module.css b/frontend/apps/app/features/projects/components/DiffDisplay/DiffDisplay.module.css
new file mode 100644
index 0000000000..48fd8b9818
--- /dev/null
+++ b/frontend/apps/app/features/projects/components/DiffDisplay/DiffDisplay.module.css
@@ -0,0 +1,22 @@
+.diffContent {
+  font-family: monospace;
+  white-space: pre-wrap;
+  overflow-x: auto;
+  padding: 1rem;
+  border-radius: 4px;
+  background-color: var(--color-background-secondary);
+}
+
+.diffAdded {
+  background-color: rgba(0, 255, 0, 0.1);
+  color: var(--color-success);
+}
+
+.diffRemoved {
+  background-color: rgba(255, 0, 0, 0.1);
+  color: var(--color-error);
+}
+
+.diffUnchanged {
+  color: var(--color-text-primary);
+}
diff --git a/frontend/apps/app/features/projects/components/DiffDisplay/DiffDisplay.tsx b/frontend/apps/app/features/projects/components/DiffDisplay/DiffDisplay.tsx
new file mode 100644
index 0000000000..347e316030
--- /dev/null
+++ b/frontend/apps/app/features/projects/components/DiffDisplay/DiffDisplay.tsx
@@ -0,0 +1,62 @@
+import * as diffLib from 'diff'
+import type { FC } from 'react'
+import styles from './DiffDisplay.module.css'
+
+interface DiffDisplayProps {
+  originalContent: string | null
+  newContent: string
+}
+
+export const DiffDisplay: FC<DiffDisplayProps> = ({
+  originalContent,
+  newContent,
+}) => {
+  if (!originalContent) {
+    return (
+      <div className={styles.diffContent}>
+        {newContent.split('\n').map((line, index) => (
+          <div
+            key={`added-${line}-${
+              // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
+              index
+            }`}
+            className={styles.diffAdded}
+          >
+            + {line}
+          </div>
+        ))}
+      </div>
+    )
+  }
+
+  const diff = diffLib.diffTrimmedLines(originalContent, newContent)
+
+  return (
+    <div className={styles.diffContent}>
+      {diff.map((part, index) => {
+        const className = part.added
+          ? styles.diffAdded
+          : part.removed
+            ? styles.diffRemoved
+            : styles.diffUnchanged
+
+        const prefix = part.added ? '+ ' : part.removed ? '- ' : '  '
+
+        return part.value.split('\n').map((line, lineIndex) => {
+          if (lineIndex === part.value.split('\n').length - 1 && line === '') {
+            return null
+          }
+          return (
+            <div
+              key={`${part.added ? 'added' : part.removed ? 'removed' : 'unchanged'}-${index}-${lineIndex}`}
+              className={className}
+            >
+              {prefix}
+              {line}
+            </div>
+          )
+        })
+      })}
+    </div>
+  )
+}
diff --git a/frontend/apps/app/features/projects/components/EditableContent/EditableContent.module.css b/frontend/apps/app/features/projects/components/EditableContent/EditableContent.module.css
index 448da206d5..6a25ac1855 100644
--- a/frontend/apps/app/features/projects/components/EditableContent/EditableContent.module.css
+++ b/frontend/apps/app/features/projects/components/EditableContent/EditableContent.module.css
@@ -113,3 +113,9 @@
   transform: none;
   box-shadow: none;
 }
+
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
diff --git a/frontend/apps/app/features/projects/components/EditableContent/EditableContent.tsx b/frontend/apps/app/features/projects/components/EditableContent/EditableContent.tsx
index 0dda0fc9f1..e0e66bab0d 100644
--- a/frontend/apps/app/features/projects/components/EditableContent/EditableContent.tsx
+++ b/frontend/apps/app/features/projects/components/EditableContent/EditableContent.tsx
@@ -2,20 +2,23 @@
 
 import React, { type ReactNode, useState } from 'react'
 import { updateKnowledgeSuggestionContent } from '../../actions/updateKnowledgeSuggestionContent'
+import { DiffDisplay } from '../DiffDisplay/DiffDisplay'
 import styles from './EditableContent.module.css'
 
 type EditableContentProps = {
   content: string
   suggestionId: number
   className?: string
-  placeholder?: ReactNode
+  originalContent: string | null
+  isApproved: boolean
 }
 
 export const EditableContent = ({
   content,
   suggestionId,
   className,
-  placeholder,
+  originalContent,
+  isApproved,
 }: EditableContentProps) => {
   const [isEditing, setIsEditing] = useState(false)
   const [editedContent, setEditedContent] = useState(content)
@@ -88,8 +91,15 @@ export const EditableContent = ({
             </button>
           </div>
         </form>
+      ) : isApproved ? (
+        <div className={styles.content}>{editedContent}</div>
       ) : (
-        placeholder
+        <div className={styles.content}>
+          <DiffDisplay
+            originalContent={originalContent}
+            newContent={editedContent}
+          />
+        </div>
       )}
     </div>
   )
diff --git a/frontend/apps/app/features/projects/pages/KnowledgeSuggestionDetailPage/KnowledgeSuggestionDetailPage.tsx b/frontend/apps/app/features/projects/pages/KnowledgeSuggestionDetailPage/KnowledgeSuggestionDetailPage.tsx
index 46c6337357..048912e20e 100644
--- a/frontend/apps/app/features/projects/pages/KnowledgeSuggestionDetailPage/KnowledgeSuggestionDetailPage.tsx
+++ b/frontend/apps/app/features/projects/pages/KnowledgeSuggestionDetailPage/KnowledgeSuggestionDetailPage.tsx
@@ -6,6 +6,7 @@ import { notFound } from 'next/navigation'
 import type { FC, ReactNode } from 'react'
 import { UserFeedbackClient } from '../../../../components/UserFeedbackClient'
 import { approveKnowledgeSuggestion } from '../../actions/approveKnowledgeSuggestion'
+import { DiffDisplay } from '../../components/DiffDisplay/DiffDisplay'
 import { EditableContent } from '../../components/EditableContent/EditableContent'
 import { getOriginalDocumentContent } from '../../utils/getOriginalDocumentContent'
 import styles from './KnowledgeSuggestionDetailPage.module.css'
@@ -111,20 +112,16 @@ export const KnowledgeSuggestionDetailPage: FC<Props> = async ({
             content={suggestion.content}
             suggestionId={suggestion.id}
             className={styles.codeContent}
-            placeholder={
-              !suggestion.approvedAt ? (
-                <DiffDisplay
-                  originalContent={
-                    await getOriginalDocumentContent(
-                      projectId,
-                      suggestion.branchName,
-                      suggestion.path,
-                    )
-                  }
-                  newContent={suggestion.content}
-                />
-              ) : null
+            originalContent={
+              !suggestion.approvedAt
+                ? await getOriginalDocumentContent(
+                    projectId,
+                    suggestion.branchName,
+                    suggestion.path,
+                  )
+                : null
             }
+            isApproved={!!suggestion.approvedAt}
           />
 
           {/* Client-side user feedback component */}
@@ -162,53 +159,3 @@ export const KnowledgeSuggestionDetailPage: FC<Props> = async ({
     </div>
   )
 }
-
-interface DiffDisplayProps {
-  originalContent: string | null
-  newContent: string
-}
-
-const DiffDisplay: FC<DiffDisplayProps> = ({ originalContent, newContent }) => {
-  if (!originalContent) {
-    return (
-      <div className={styles.diffContent}>
-        {newContent.split('\n').map((line) => (
-          <div key={`added-${line}`} className={styles.diffAdded}>
-            + {line}
-          </div>
-        ))}
-      </div>
-    )
-  }
-
-  const diff = diffLib.diffTrimmedLines(originalContent, newContent)
-
-  return (
-    <div className={styles.diffContent}>
-      {diff.map((part, index) => {
-        const className = part.added
-          ? styles.diffAdded
-          : part.removed
-            ? styles.diffRemoved
-            : styles.diffUnchanged
-
-        const prefix = part.added ? '+ ' : part.removed ? '- ' : '  '
-
-        return part.value.split('\n').map((line, lineIndex) => {
-          if (lineIndex === part.value.split('\n').length - 1 && line === '') {
-            return null
-          }
-          return (
-            <div
-              key={`${part.added ? 'added' : part.removed ? 'removed' : 'unchanged'}-${line}-${index}-${lineIndex}`}
-              className={className}
-            >
-              {prefix}
-              {line}
-            </div>
-          )
-        })
-      })}
-    </div>
-  )
-}