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>

1 files changed, 29 insertions, 6 deletions

diff --git a/makima/frontend/src/components/files/FileDetail.tsx b/makima/frontend/src/components/files/FileDetail.tsx
index a030c57..e1fe85f 100644
--- a/makima/frontend/src/components/files/FileDetail.tsx
+++ b/makima/frontend/src/components/files/FileDetail.tsx
@@ -37,6 +37,10 @@ interface FileDetailProps {
   onSelectVersion?: (version: number) => void;
   onRestoreVersion?: (version: number) => void;
   onClearVersionSelection?: () => void;
+  // Contract context props (for when file is viewed within a contract)
+  contractId?: string;
+  contractName?: string;
+  onContractClick?: () => void;
 }
 
 export function FileDetail({
@@ -65,6 +69,9 @@ export function FileDetail({
   onSelectVersion,
   onRestoreVersion,
   onClearVersionSelection,
+  contractId,
+  contractName,
+  onContractClick,
 }: FileDetailProps) {
   const [isEditing, setIsEditing] = useState(false);
   const [name, setName] = useState(file.name);
@@ -134,13 +141,29 @@ export function FileDetail({
     <div className="panel h-full flex flex-col">
       {/* Header */}
       <div className="p-4 border-b border-dashed border-[rgba(117,170,252,0.35)]">
+        {/* Breadcrumb navigation */}
         <div className="flex items-center justify-between mb-3">
-          <button
-            onClick={onBack}
-            className="font-mono text-xs text-[#75aafc] hover:text-[#9bc3ff] transition-colors"
-          >
-            &larr; Back to list
-          </button>
+          <div className="flex items-center gap-2">
+            {contractId && contractName ? (
+              <>
+                <button
+                  onClick={onContractClick || onBack}
+                  className="font-mono text-xs text-[#75aafc] hover:text-[#9bc3ff] transition-colors"
+                >
+                  &larr; {contractName}
+                </button>
+                <span className="font-mono text-xs text-[#556677]">/</span>
+                <span className="font-mono text-xs text-[#9bc3ff]">Files</span>
+              </>
+            ) : (
+              <button
+                onClick={onBack}
+                className="font-mono text-xs text-[#75aafc] hover:text-[#9bc3ff] transition-colors"
+              >
+                &larr; Back to list
+              </button>
+            )}
+          </div>
           <div className="flex items-center gap-2">
             {isEditing ? (
               <>