✨ feat(SessionDetailPage): Add output section and integrate new components

frontend/apps/app/components/Chat/Chat.tsx

@@ -23,9 +23,17 @@ interface Props {
   schemaData: Schema
   tableGroups?: Record<string, TableGroup>
   designSession: DesignSession
+  initialMessage?: string
+  onSendMessage: (message: string) => void
 }
 
-export const Chat: FC<Props> = ({ schemaData, tableGroups, designSession }) => {
+export const Chat: FC<Props> = ({
+  schemaData,
+  tableGroups,
+  designSession,
+  initialMessage,
+  onSendMessage,
+}) => {
   const [currentUserId, setCurrentUserId] = useState<string | null>(null)
   const { messages, addOrUpdateMessage } = useRealtimeMessages(
     designSession,
@@ -100,6 +108,7 @@ export const Chat: FC<Props> = ({ schemaData, tableGroups, designSession }) => {
       isGenerating: false, // Explicitly set to false for consistency
     }
     addOrUpdateMessage(userMessage)
+    onSendMessage(content)
 
     startTransition(() => {
       startAIResponse(content)
@@ -141,6 +150,7 @@ export const Chat: FC<Props> = ({ schemaData, tableGroups, designSession }) => {
         onSendMessage={handleSendMessage}
         isLoading={isLoading}
         schema={schemaData}
+        initialMessage={initialMessage}
       />
     </div>
   )

frontend/apps/app/components/ChatInput/ChatInput.tsx

@@ -112,6 +112,7 @@ export const ChatInput: FC<Props> = ({
     } else if (hasContent) {
       // If not loading and has content, send message
       onSendMessage(message)
+
       setMessage('')
       setTimeout(() => {
         const textarea = textareaRef.current
@@ -144,15 +145,28 @@ export const ChatInput: FC<Props> = ({
     setIsMentionSuggestorOpen(false)
   }, [])
 
-  // Adjust height on initial render
-  useEffect(() => {
+  const handleAdjustTextareaHeight = useCallback(() => {
     const textarea = textareaRef.current
     if (textarea) {
       textarea.style.height = 'auto'
       textarea.style.height = `${textarea.scrollHeight}px`
     }
   }, [])
 
+  useEffect(() => {
+    if (initialMessage) {
+      setMessage(initialMessage)
+      setTimeout(() => {
+        handleAdjustTextareaHeight()
+      }, 0)
+    }
+  }, [initialMessage, handleAdjustTextareaHeight])
+
+  // Adjust height on initial render
+  useEffect(() => {
+    handleAdjustTextareaHeight()
+  }, [handleAdjustTextareaHeight])
+
   return (
     <div className={styles.container}>
       <form

frontend/apps/app/components/SessionDetailPage/SessionDetailPage.module.css

@@ -16,19 +16,7 @@
   overflow: hidden;
 }
 
-.tabsRoot {
-  display: grid;
-  grid-template-rows: auto 1fr;
-  height: 100%;
-  min-height: 0;
-}
-
-.tabsContent {
+.outputSection {
   min-height: 0;
-}
-
-.erdSection {
-  position: relative;
-  overflow: hidden;
-  height: 100%;
+  padding: var(--spacing-2);
 }

frontend/apps/app/components/SessionDetailPage/SessionDetailPage.tsx

@@ -12,7 +12,7 @@ import {
 } from 'react'
 import * as v from 'valibot'
 import styles from './SessionDetailPage.module.css'
-import { Artifact } from './components/Artifact'
+import { Output } from './components/Output'
 import {
   fetchSchemaDataClient,
   setupBuildingSchemaRealtimeSubscription,
@@ -25,8 +25,22 @@ type Props = {
 export const SessionDetailPage: FC<Props> = ({ designSession }) => {
   const [schema, setSchema] = useState<Schema | null>(null)
   const [isLoadingSchema, startTransition] = useTransition()
+  const [quickFixMessage, setQuickFixMessage] = useState<string>('')
   const designSessionId = designSession.id
 
+  const handleQuickFix = useCallback((comment: string) => {
+    const fixMessage = `以下のQA Agentからの指摘を修正してください：
+
+"${comment}"
+
+この問題を解決するための具体的な修正案を提案してください。`
+    setQuickFixMessage(fixMessage)
+  }, [])
+
+  const handleMessageSent = useCallback(() => {
+    setQuickFixMessage('')
+  }, [])
+
   // Load initial schema data
   useEffect(() => {
     const loadInitialSchema = async () => {
@@ -116,9 +130,16 @@ export const SessionDetailPage: FC<Props> = ({ designSession }) => {
     <div className={styles.container}>
       <div className={styles.columns}>
         <div className={styles.chatSection}>
-          <Chat schemaData={schema} designSession={designSession} />
+          <Chat
+            schemaData={schema}
+            designSession={designSession}
+            initialMessage={quickFixMessage}
+            onSendMessage={handleMessageSent}
+          />
+        </div>
+        <div className={styles.outputSection}>
+          <Output onQuickFix={handleQuickFix} />
         </div>
-        <Artifact schema={schema} />
       </div>
     </div>
   )