From a279ec29efb863fefd1ca82e5b490f2e8784cf3c Mon Sep 17 00:00:00 2001
From: soryu <soryu@soryu.co>
Date: Sun, 25 Jan 2026 00:01:25 +0000
Subject: Move files tab and file pages to be accessible via contracts (#27)

* feat: remove Files from top-level navigation

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* feat: update file links to use contract-scoped routes

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* feat: add contract context to FileDetail component

- Add contractId, contractName, and onContractClick props to FileDetailProps
- Update breadcrumb navigation to show contract name with path separator
  when viewing file within a contract context
- Fall back to "Back to list" when no contract context is provided
- This enables the FileDetail component to be used within the
  /contracts/:contractId/files/:fileId route

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* feat: update routes to nest files under contracts

- Add react-router-dom for client-side routing
- Create ContractList component to list all contracts
- Create ContractDetail component with tabs (overview, files, tasks, repos)
- Create FileDetail component to view individual files
- Configure routes:
  - /contracts - list all contracts
  - /contracts/:id - view contract details with Files tab
  - /contracts/:contractId/files/:fileId - view file in contract context
- Remove standalone file routes (/files, /files/:id)

Files are now only accessible through their parent contract.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* Task completion checkpoint

* Task completion checkpoint

* Task completion checkpoint

* Task completion checkpoint

* Task completion checkpoint

* Task completion checkpoint

* Task completion checkpoint

* Task completion checkpoint

---------

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
---
 frontend/src/components/ContractList.tsx | 83 ++++++++++++++++++++++++++++++++
 1 file changed, 83 insertions(+)
 create mode 100644 frontend/src/components/ContractList.tsx

(limited to 'frontend/src/components/ContractList.tsx')

diff --git a/frontend/src/components/ContractList.tsx b/frontend/src/components/ContractList.tsx
new file mode 100644
index 0000000..77012db
--- /dev/null
+++ b/frontend/src/components/ContractList.tsx
@@ -0,0 +1,83 @@
+import React, { useEffect, useState } from 'react'
+import { Link } from 'react-router-dom'
+
+interface ContractSummary {
+  id: string
+  name: string
+  description?: string
+  contract_type: string
+  phase: string
+  status: string
+  file_count: number
+  task_count: number
+  repository_count: number
+  created_at: string
+}
+
+export function ContractList() {
+  const [contracts, setContracts] = useState<ContractSummary[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    async function fetchContracts() {
+      try {
+        setLoading(true)
+        const response = await fetch('/api/v1/contracts')
+        if (!response.ok) {
+          throw new Error(`Failed to fetch contracts: ${response.statusText}`)
+        }
+        const data = await response.json()
+        setContracts(data.contracts || [])
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'Unknown error')
+      } finally {
+        setLoading(false)
+      }
+    }
+
+    fetchContracts()
+  }, [])
+
+  if (loading) {
+    return (
+      <div className="contract-list-container">
+        <div className="loading">Loading contracts...</div>
+      </div>
+    )
+  }
+
+  if (error) {
+    return (
+      <div className="contract-list-container">
+        <div className="error">Error: {error}</div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="contract-list-container">
+      <h1>Contracts</h1>
+      {contracts.length === 0 ? (
+        <p>No contracts found</p>
+      ) : (
+        <ul className="contract-list">
+          {contracts.map((contract) => (
+            <li key={contract.id} className="contract-item">
+              <Link to={`/contracts/${contract.id}`}>
+                <h2>{contract.name}</h2>
+                {contract.description && <p>{contract.description}</p>}
+                <div className="contract-meta">
+                  <span>Phase: {contract.phase}</span>
+                  <span>Status: {contract.status}</span>
+                  <span>Files: {contract.file_count}</span>
+                  <span>Tasks: {contract.task_count}</span>
+                </div>
+              </Link>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  )
+}
-- 
cgit v1.2.3