Add file body and initial tool call system

1 files changed, 71 insertions, 20 deletions

diff --git a/makima/frontend/src/components/files/FileDetail.tsx b/makima/frontend/src/components/files/FileDetail.tsx
index 643f35e..ffc67dd 100644
--- a/makima/frontend/src/components/files/FileDetail.tsx
+++ b/makima/frontend/src/components/files/FileDetail.tsx
@@ -1,5 +1,6 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import type { FileDetail as FileDetailType } from "../../lib/api";
+import { BodyRenderer } from "./BodyRenderer";
 
 interface FileDetailProps {
   file: FileDetailType;
@@ -19,6 +20,13 @@ export function FileDetail({
   const [isEditing, setIsEditing] = useState(false);
   const [name, setName] = useState(file.name);
   const [description, setDescription] = useState(file.description || "");
+  const [transcriptExpanded, setTranscriptExpanded] = useState(false);
+
+  // Update local state when file changes
+  useEffect(() => {
+    setName(file.name);
+    setDescription(file.description || "");
+  }, [file.name, file.description]);
 
   const handleSave = () => {
     onSave(file.id, name, description);
@@ -116,27 +124,70 @@ export function FileDetail({
         )}
       </div>
 
-      {/* Transcript */}
-      <div className="flex-1 overflow-y-auto p-4 space-y-3">
-        {file.transcript.length === 0 ? (
-          <div className="text-center text-[#9bc3ff] text-sm font-mono opacity-60 py-8">
-            No transcript entries.
+      {/* Content */}
+      <div className="flex-1 overflow-y-auto p-4 space-y-6">
+        {/* Summary Section */}
+        {file.summary && (
+          <div className="border-l-2 border-[#9bc3ff] pl-4">
+            <h3 className="font-mono text-xs text-[#75aafc] uppercase mb-2">
+              Summary
+            </h3>
+            <p className="font-mono text-sm text-[#dbe7ff] leading-relaxed">
+              {file.summary}
+            </p>
           </div>
-        ) : (
-          file.transcript.map((entry) => (
-            <div key={entry.id} className="font-mono text-sm">
-              <div className="flex items-baseline gap-2 mb-1">
-                <span className="text-[#75aafc] text-xs">
-                  [{entry.start.toFixed(2)}s - {entry.end.toFixed(2)}s]
-                </span>
-                <span className="text-[#9bc3ff] text-xs font-bold">
-                  {entry.speaker}
-                </span>
-              </div>
-              <p className="m-0 text-[#dbe7ff] leading-relaxed">{entry.text}</p>
-            </div>
-          ))
         )}
+
+        {/* Body Content */}
+        <div>
+          <h3 className="font-mono text-xs text-[#75aafc] uppercase mb-3">
+            Content
+          </h3>
+          <BodyRenderer elements={file.body} />
+        </div>
+
+        {/* Collapsible Transcript Section */}
+        <div className="border-t border-dashed border-[rgba(117,170,252,0.35)] pt-4">
+          <button
+            onClick={() => setTranscriptExpanded(!transcriptExpanded)}
+            className="flex items-center gap-2 font-mono text-xs text-[#75aafc] hover:text-[#9bc3ff] transition-colors uppercase w-full text-left"
+          >
+            <span
+              className={`transition-transform ${
+                transcriptExpanded ? "rotate-90" : ""
+              }`}
+            >
+              &gt;
+            </span>
+            Transcript ({file.transcript.length} entries)
+          </button>
+
+          {transcriptExpanded && (
+            <div className="mt-4 space-y-3 pl-4">
+              {file.transcript.length === 0 ? (
+                <div className="text-[#9bc3ff] text-sm font-mono opacity-60">
+                  No transcript entries.
+                </div>
+              ) : (
+                file.transcript.map((entry) => (
+                  <div key={entry.id} className="font-mono text-sm">
+                    <div className="flex items-baseline gap-2 mb-1">
+                      <span className="text-[#75aafc] text-xs">
+                        [{entry.start.toFixed(2)}s - {entry.end.toFixed(2)}s]
+                      </span>
+                      <span className="text-[#9bc3ff] text-xs font-bold">
+                        {entry.speaker}
+                      </span>
+                    </div>
+                    <p className="m-0 text-[#dbe7ff] leading-relaxed">
+                      {entry.text}
+                    </p>
+                  </div>
+                ))
+              )}
+            </div>
+          )}
+        </div>
       </div>
     </div>
   );