Add file body and initial tool call system

1 files changed, 31 insertions, 10 deletions

diff --git a/makima/frontend/src/routes/files.tsx b/makima/frontend/src/routes/files.tsx
index 86a24b8..00c334d 100644
--- a/makima/frontend/src/routes/files.tsx
+++ b/makima/frontend/src/routes/files.tsx
@@ -3,8 +3,9 @@ import { useParams, useNavigate } from "react-router";
 import { Masthead } from "../components/Masthead";
 import { FileList } from "../components/files/FileList";
 import { FileDetail } from "../components/files/FileDetail";
+import { CliInput } from "../components/files/CliInput";
 import { useFiles } from "../hooks/useFiles";
-import type { FileDetail as FileDetailType } from "../lib/api";
+import type { FileDetail as FileDetailType, BodyElement } from "../lib/api";
 
 export default function FilesPage() {
   const { id } = useParams<{ id: string }>();
@@ -58,25 +59,45 @@ export default function FilesPage() {
     [editFile, fetchFile]
   );
 
+  const handleBodyUpdate = useCallback(
+    (body: BodyElement[], summary: string | null) => {
+      if (fileDetail) {
+        setFileDetail({
+          ...fileDetail,
+          body,
+          summary,
+        });
+      }
+    },
+    [fileDetail]
+  );
+
   return (
     <div className="relative z-10 h-screen flex flex-col overflow-hidden">
       <Masthead showTicker={false} showNav />
 
-      <main className="flex-1 p-4 md:p-6 min-h-0 overflow-hidden">
+      <main className="flex-1 p-4 md:p-6 min-h-0 overflow-hidden flex flex-col">
         {error && (
-          <div className="mb-4 p-3 border border-red-400/50 bg-red-400/10 text-red-400 font-mono text-sm">
+          <div className="mb-4 p-3 border border-red-400/50 bg-red-400/10 text-red-400 font-mono text-sm shrink-0">
             {error}
           </div>
         )}
 
         {id && fileDetail ? (
-          <FileDetail
-            file={fileDetail}
-            loading={detailLoading}
-            onBack={handleBack}
-            onSave={handleSave}
-            onDelete={handleDelete}
-          />
+          <div className="flex-1 flex flex-col min-h-0 overflow-hidden">
+            <div className="flex-1 min-h-0 overflow-hidden">
+              <FileDetail
+                file={fileDetail}
+                loading={detailLoading}
+                onBack={handleBack}
+                onSave={handleSave}
+                onDelete={handleDelete}
+              />
+            </div>
+            <div className="shrink-0">
+              <CliInput fileId={id} onUpdate={handleBodyUpdate} />
+            </div>
+          </div>
         ) : id && detailLoading ? (
           <div className="panel h-full flex items-center justify-center">
             <div className="font-mono text-[#9bc3ff] text-sm">Loading...</div>