1 files changed, 97 insertions, 0 deletions
diff --git a/frontend/src/components/FileDetail.tsx b/frontend/src/components/FileDetail.tsx
new file mode 100644
index 0000000..31228ef
--- /dev/null
+++ b/frontend/src/components/FileDetail.tsx
@@ -0,0 +1,97 @@
+import React, { useEffect, useState } from 'react'
+import { useParams, Link } from 'react-router-dom'
+
+interface File {
+  id: string
+  name: string
+  description?: string
+  body?: string
+  contract_id?: string
+  version: number
+  created_at: string
+}
+
+export function FileDetail() {
+  const { contractId, fileId } = useParams<{ contractId: string; fileId: string }>()
+  const [file, setFile] = useState<File | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    async function fetchFile() {
+      if (!fileId) return
+
+      try {
+        setLoading(true)
+        const response = await fetch(`/api/v1/files/${fileId}`)
+        if (!response.ok) {
+          throw new Error(`Failed to fetch file: ${response.statusText}`)
+        }
+        const data = await response.json()
+        setFile(data)
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'Unknown error')
+      } finally {
+        setLoading(false)
+      }
+    }
+
+    fetchFile()
+  }, [fileId])
+
+  if (loading) {
+    return (
+      <div className="file-detail-container">
+        <div className="loading">Loading file...</div>
+      </div>
+    )
+  }
+
+  if (error) {
+    return (
+      <div className="file-detail-container">
+        <div className="error">Error: {error}</div>
+        <Link to={`/contracts/${contractId}`} className="back-link">
+          Back to Contract
+        </Link>
+      </div>
+    )
+  }
+
+  if (!file) {
+    return (
+      <div className="file-detail-container">
+        <div className="not-found">File not found</div>
+        <Link to={`/contracts/${contractId}`} className="back-link">
+          Back to Contract
+        </Link>
+      </div>
+    )
+  }
+
+  return (
+    <div className="file-detail-container">
+      <div className="file-detail-header">
+        <Link to={`/contracts/${contractId}`} className="back-link">
+          Back to Contract
+        </Link>
+        <h1 className="file-title">{file.name}</h1>
+        {file.description && (
+          <p className="file-description">{file.description}</p>
+        )}
+        <div className="file-meta">
+          <span>Version: {file.version}</span>
+          <span>Created: {new Date(file.created_at).toLocaleString()}</span>
+        </div>
+      </div>
+
+      <div className="file-detail-body">
+        {file.body ? (
+          <pre className="file-content">{file.body}</pre>
+        ) : (
+          <p className="no-content">No content</p>
+        )}
+      </div>
+    </div>
+  )
+}