♻️(app): Remove artifact read operations and switch to analyzedRequirements

Complete Phase 6.4 of the artifact-to-analyzedRequirements migration:

**Deleted:**
- useRealtimeArtifact hook (Supabase Realtime subscription)

**Modified:**
- SessionDetailPage: Remove artifact fetch from database
- SessionDetailPageClient: Remove useRealtimeArtifact, fix initial tab selection for analyzedRequirements
- Output: Remove artifact/artifactError props
- Header: Generate markdown from analyzedRequirements instead of artifactDoc
- ArtifactContainer: Simplify to only accept analyzedRequirements
- Header.stories: Update to use AnalyzedRequirements format
- PublicSessionDetailPage: Remove artifact fetch code

**Key improvements:**
- Initial tab now correctly shows ARTIFACT when only analyzedRequirements exist
- Removes all Supabase Realtime dependencies for requirements
- Fully transitions to SSE + checkpointer architecture

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

Author: sasamuku

frontend/apps/app/components/PublicSessionDetailPage/PublicSessionDetailPage.tsx

@@ -1,4 +1,3 @@
-import { type Artifact, artifactSchema } from '@liam-hq/artifact'
 import { schemaSchema } from '@liam-hq/schema'
 import { notFound } from 'next/navigation'
 import type { ReactElement } from 'react'
@@ -89,22 +88,6 @@ export const PublicSessionDetailPage = async ({
       currentVersionId: latestVersion.id,
     })) ?? initialSchema
 
-  const { data: artifactData, error } = await supabase
-    .from('artifacts') // Explicitly specify columns as anon user has grants on individual columns, not all columns
-    .select('id, design_session_id, artifact, created_at, updated_at')
-    .eq('design_session_id', designSessionId)
-    .maybeSingle()
-
-  if (error) {
-    // Degrade gracefully: continue without artifact
-    // Optionally log error server-side if desired
-  }
-  let initialArtifact: Artifact | null = null
-  const parsedArtifact = safeParse(artifactSchema, artifactData?.artifact)
-  if (parsedArtifact.success) {
-    initialArtifact = parsedArtifact.output
-  }
-
   return (
     <PublicLayout>
       <ViewModeProvider mode="public">
@@ -135,7 +118,6 @@ export const PublicSessionDetailPage = async ({
             }))}
           isDeepModelingEnabled={false}
           initialIsPublic={true}
-          initialArtifact={initialArtifact}
           senderName="Guest"
         />
       </ViewModeProvider>

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

@@ -5,11 +5,7 @@ import {
   getCheckpointErrors,
   getMessages,
 } from '@liam-hq/agent'
-import {
-  type AnalyzedRequirements,
-  type Artifact,
-  artifactSchema,
-} from '@liam-hq/artifact'
+import type { AnalyzedRequirements } from '@liam-hq/artifact'
 import type { Schema } from '@liam-hq/schema'
 import { schemaSchema } from '@liam-hq/schema'
 import { err, ok, type Result } from 'neverthrow'
@@ -41,7 +37,6 @@ async function loadSessionData(designSessionId: string): Promise<
       messages: StoredMessage[]
       buildingSchema: NonNullable<Awaited<ReturnType<typeof getBuildingSchema>>>
       initialSchema: Schema
-      initialArtifact: Artifact | null
       initialAnalyzedRequirements: AnalyzedRequirements | null
       workflowError: string | null
       senderName: string
@@ -96,28 +91,10 @@ async function loadSessionData(designSessionId: string): Promise<
     return err(new Error('Invalid schema format'))
   }
 
-  const { data: artifactData, error } = await supabase
-    .from('artifacts')
-    // Explicitly specify columns as anon user has grants on individual columns, not all columns
-    .select('id, design_session_id, artifact, created_at, updated_at')
-    .eq('design_session_id', designSessionId)
-    .maybeSingle()
-
-  if (error) {
-    return err(new Error(`Error fetching artifact: ${error.message}`))
-  }
-
-  let initialArtifact: Artifact | null = null
-  const parsedArtifact = safeParse(artifactSchema, artifactData?.artifact)
-  if (parsedArtifact.success) {
-    initialArtifact = parsedArtifact.output
-  }
-
   return ok({
     messages,
     buildingSchema,
     initialSchema,
-    initialArtifact,
     initialAnalyzedRequirements,
     workflowError,
     senderName,
@@ -139,7 +116,6 @@ export const SessionDetailPage: FC<Props> = async ({
     buildingSchema,
     initialSchema,
     workflowError,
-    initialArtifact,
     initialAnalyzedRequirements,
     senderName,
   } = result.value
@@ -167,7 +143,6 @@ export const SessionDetailPage: FC<Props> = async ({
         initialDisplayedSchema={initialSchema}
         initialPrevSchema={initialPrevSchema}
         initialVersions={versions}
-        initialArtifact={initialArtifact}
         isDeepModelingEnabled={isDeepModelingEnabled}
         initialIsPublic={initialIsPublic}
         initialWorkflowError={workflowError}

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

@@ -4,13 +4,12 @@ import {
   mapStoredMessagesToChatMessages,
   type StoredMessage,
 } from '@langchain/core/messages'
-import type { AnalyzedRequirements, Artifact } from '@liam-hq/artifact'
+import type { AnalyzedRequirements } from '@liam-hq/artifact'
 import type { Schema } from '@liam-hq/schema'
 import clsx from 'clsx'
 import { type FC, useCallback, useEffect, useRef, useState } from 'react'
 import { Chat } from './components/Chat'
 import { Output } from './components/Output'
-import { useRealtimeArtifact } from './components/Output/components/Artifact/hooks/useRealtimeArtifact'
 import { OUTPUT_TABS, type OutputTabValue } from './components/Output/constants'
 import { useRealtimeVersionsWithSchema } from './hooks/useRealtimeVersionsWithSchema'
 import { useStream } from './hooks/useStream'
@@ -31,29 +30,24 @@ type Props = {
   isDeepModelingEnabled: boolean
   initialIsPublic: boolean
   initialWorkflowError?: string | null
-  initialArtifact: Artifact | null
   senderName: string
 }
 
 // Determine the initial active tab based on available data
 const determineInitialTab = (
-  artifact: Artifact | null,
   versions: Version[],
+  analyzedRequirements: AnalyzedRequirements | null,
 ): OutputTabValue | undefined => {
-  const hasArtifact = artifact !== null
   const hasVersions = versions.length > 0
+  const hasAnalyzedRequirements = analyzedRequirements !== null
 
-  if (!hasArtifact && !hasVersions) {
-    return undefined
-  }
-
-  // Prioritize ERD tab when versions exist
+  // Show ERD tab when versions exist
   if (hasVersions) {
     return OUTPUT_TABS.ERD
   }
 
-  // Show artifact tab when only artifact exists
-  if (hasArtifact) {
+  // Show Artifact tab when only analyzedRequirements exist
+  if (hasAnalyzedRequirements) {
     return OUTPUT_TABS.ARTIFACT
   }
 
@@ -71,11 +65,10 @@ export const SessionDetailPageClient: FC<Props> = ({
   isDeepModelingEnabled,
   initialIsPublic,
   initialWorkflowError,
-  initialArtifact,
   senderName,
 }) => {
   const [activeTab, setActiveTab] = useState<OutputTabValue | undefined>(
-    determineInitialTab(initialArtifact, initialVersions),
+    determineInitialTab(initialVersions, initialAnalyzedRequirements),
   )
   const [hasReceivedAnalyzedRequirements, setHasReceivedAnalyzedRequirements] =
     useState(false)
@@ -106,17 +99,8 @@ export const SessionDetailPageClient: FC<Props> = ({
     [setSelectedVersion],
   )
 
-  const handleArtifactChange = useCallback((newArtifact: unknown) => {
-    if (newArtifact !== null) {
-      setActiveTab(OUTPUT_TABS.ARTIFACT)
-    }
-  }, [])
-
-  const { artifact, error: artifactError } = useRealtimeArtifact({
-    designSessionId,
-    initialArtifact,
-    onChangeArtifact: handleArtifactChange,
-  })
+  // Phase 6.4: useRealtimeArtifact and handleArtifactChange removed
+  // Now using only analyzedRequirements
 
   const chatMessages = mapStoredMessagesToChatMessages(initialMessages)
   const { isStreaming, messages, analyzedRequirements, start, replay, error } =
@@ -138,11 +122,9 @@ export const SessionDetailPageClient: FC<Props> = ({
     }
   }, [analyzedRequirements, hasReceivedAnalyzedRequirements])
 
+  // Phase 6.4: artifact removed from condition
   const shouldShowOutputSection =
-    (artifact !== null ||
-      selectedVersion !== null ||
-      analyzedRequirements !== null) &&
-    activeTab
+    (selectedVersion !== null || analyzedRequirements !== null) && activeTab
 
   // Combine streaming error with workflow errors
   const combinedError = error || initialWorkflowError
@@ -221,8 +203,6 @@ export const SessionDetailPageClient: FC<Props> = ({
               activeTab={activeTab}
               onTabChange={setActiveTab}
               initialIsPublic={initialIsPublic}
-              artifact={artifact}
-              artifactError={artifactError}
               analyzedRequirements={analyzedRequirements}
             />
           </div>

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

@@ -1,12 +1,11 @@
 'use client'
 
-import type { AnalyzedRequirements, Artifact } from '@liam-hq/artifact'
+import type { AnalyzedRequirements } from '@liam-hq/artifact'
 import type { Schema } from '@liam-hq/schema'
 import { TabsContent, TabsRoot } from '@liam-hq/ui'
 import { type ComponentProps, type FC, useCallback, useState } from 'react'
 import type { ReviewComment } from '../../types'
 import { ArtifactContainer } from './components/Artifact/ArtifactContainer'
-import { formatArtifactToMarkdown } from './components/Artifact/utils'
 import { ERD } from './components/ERD'
 import { Header } from './components/Header'
 import type { VersionDropdown } from './components/Header/VersionDropdown'
@@ -26,8 +25,6 @@ type Props = ComponentProps<typeof VersionDropdown> & {
   initialIsPublic: boolean
   activeTab: OutputTabValue
   onTabChange: (value: OutputTabValue) => void
-  artifact: Artifact | null
-  artifactError: Error | null
   analyzedRequirements?: AnalyzedRequirements | null
 }
 
@@ -39,8 +36,6 @@ export const Output: FC<Props> = ({
   activeTab,
   onTabChange,
   initialIsPublic = false,
-  artifact,
-  artifactError,
   analyzedRequirements,
   ...propsForVersionDropdown
 }) => {
@@ -71,9 +66,6 @@ export const Output: FC<Props> = ({
       }
     : handleChangeValue
 
-  // Convert artifact data to markdown format
-  const artifactDoc = artifact ? formatArtifactToMarkdown(artifact) : undefined
-
   return (
     <TabsRoot
       value={tabValue}
@@ -83,7 +75,7 @@ export const Output: FC<Props> = ({
       <Header
         schema={schema}
         tabValue={tabValue}
-        artifactDoc={artifactDoc}
+        analyzedRequirements={analyzedRequirements}
         designSessionId={designSessionId}
         initialIsPublic={initialIsPublic}
         {...propsForVersionDropdown}
@@ -99,11 +91,7 @@ export const Output: FC<Props> = ({
         />
       </TabsContent>
       <TabsContent value={OUTPUT_TABS.ARTIFACT} className={styles.tabsContent}>
-        <ArtifactContainer
-          artifact={artifact}
-          error={artifactError}
-          analyzedRequirements={analyzedRequirements}
-        />
+        <ArtifactContainer analyzedRequirements={analyzedRequirements} />
       </TabsContent>
     </TabsRoot>
   )

frontend/apps/app/components/SessionDetailPage/components/Output/components/Artifact/ArtifactContainer.tsx

@@ -1,33 +1,21 @@
 'use client'
 
-import type {
-  AnalyzedRequirements,
-  Artifact as ArtifactType,
-} from '@liam-hq/artifact'
+import type { AnalyzedRequirements } from '@liam-hq/artifact'
 import type { FC } from 'react'
 import { Artifact } from './Artifact'
 import { formatArtifactToMarkdown } from './utils'
 
 type Props = {
-  artifact: ArtifactType | null
-  error: Error | null
   analyzedRequirements?: AnalyzedRequirements | null
 }
 
-export const ArtifactContainer: FC<Props> = ({
-  artifact,
-  error,
-  analyzedRequirements,
-}) => {
-  const displayData =
-    analyzedRequirements !== null && analyzedRequirements !== undefined
-      ? { requirement: analyzedRequirements }
-      : artifact
-
-  if (!displayData) {
+export const ArtifactContainer: FC<Props> = ({ analyzedRequirements }) => {
+  if (!analyzedRequirements) {
     return <div>No artifact available yet</div>
   }
 
-  const markdownContent = formatArtifactToMarkdown(displayData)
-  return <Artifact doc={markdownContent} error={error} />
+  const markdownContent = formatArtifactToMarkdown({
+    requirement: analyzedRequirements,
+  })
+  return <Artifact doc={markdownContent} error={null} />
 }