From e99b41fa9aba6ad8c71115b869ff97124bceeecc Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sat, 21 Feb 2026 02:57:04 +0000
Subject: [PATCH] feat: add frontend UI for agent file management

Co-authored-by: abhi1693 <5083532+abhi1693@users.noreply.github.com>
---
 .../src/app/agents/[agentId]/files/page.tsx   | 375 ++++++++++++++++++
 frontend/src/app/agents/[agentId]/page.tsx    |   8 +
 2 files changed, 383 insertions(+)
 create mode 100644 frontend/src/app/agents/[agentId]/files/page.tsx

diff --git a/frontend/src/app/agents/[agentId]/files/page.tsx b/frontend/src/app/agents/[agentId]/files/page.tsx
new file mode 100644
index 00000000..9edb4e90
--- /dev/null
+++ b/frontend/src/app/agents/[agentId]/files/page.tsx
@@ -0,0 +1,375 @@
+"use client";
+
+export const dynamic = "force-dynamic";
+
+import { useEffect, useState } from "react";
+import { useParams, useRouter } from "next/navigation";
+
+import { useAuth } from "@/auth/clerk";
+
+import { ApiError } from "@/api/mutator";
+import {
+  type getAgentApiV1AgentsAgentIdGetResponse,
+  useGetAgentApiV1AgentsAgentIdGet,
+} from "@/api/generated/agents/agents";
+import { DashboardPageLayout } from "@/components/templates/DashboardPageLayout";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { useOrganizationMembership } from "@/lib/use-organization-membership";
+import type { AgentRead } from "@/api/generated/model";
+
+export default function AgentFilesPage() {
+  const { isSignedIn } = useAuth();
+  const router = useRouter();
+  const params = useParams();
+  const agentIdParam = params?.agentId;
+  const agentId = Array.isArray(agentIdParam) ? agentIdParam[0] : agentIdParam;
+
+  const { isAdmin } = useOrganizationMembership(isSignedIn);
+
+  const [files, setFiles] = useState<Array<{ name: string; editable: boolean }>>([]);
+  const [selectedFile, setSelectedFile] = useState<string | null>(null);
+  const [fileContent, setFileContent] = useState("");
+  const [editDialogOpen, setEditDialogOpen] = useState(false);
+  const [importDialogOpen, setImportDialogOpen] = useState(false);
+  const [importFileName, setImportFileName] = useState("");
+  const [importFileContent, setImportFileContent] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  const agentQuery = useGetAgentApiV1AgentsAgentIdGet<
+    getAgentApiV1AgentsAgentIdGetResponse,
+    ApiError
+  >(agentId ?? "", {
+    query: {
+      enabled: Boolean(isSignedIn && isAdmin && agentId),
+      refetchOnMount: "always",
+      retry: false,
+    },
+  });
+
+  const agent: AgentRead | null =
+    agentQuery.data?.status === 200 ? agentQuery.data.data : null;
+
+  const loadFiles = async () => {
+    if (!agentId || !agent?.board_id) return;
+    setLoading(true);
+    setError(null);
+    try {
+      const response = await fetch(
+        `/api/v1/agent/boards/${agent.board_id}/agents/${agentId}/files`,
+        {
+          headers: {
+            "Content-Type": "application/json",
+          },
+        }
+      );
+      if (!response.ok) {
+        throw new Error(`Failed to load files: ${response.statusText}`);
+      }
+      const data = await response.json();
+      setFiles(data);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to load files");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleFileClick = async (fileName: string) => {
+    if (!agentId || !agent?.board_id) return;
+    setLoading(true);
+    setError(null);
+    try {
+      const response = await fetch(
+        `/api/v1/agent/boards/${agent.board_id}/agents/${agentId}/files/${fileName}`,
+        {
+          headers: {
+            "Content-Type": "application/json",
+          },
+        }
+      );
+      if (!response.ok) {
+        throw new Error(`Failed to load file: ${response.statusText}`);
+      }
+      const content = await response.text();
+      setSelectedFile(fileName);
+      setFileContent(content);
+      setEditDialogOpen(true);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to load file");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleSaveFile = async () => {
+    if (!agentId || !agent?.board_id || !selectedFile) return;
+    setLoading(true);
+    setError(null);
+    try {
+      const response = await fetch(
+        `/api/v1/agent/boards/${agent.board_id}/agents/${agentId}/files/${selectedFile}`,
+        {
+          method: "PUT",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            content: fileContent,
+            reason: "Updated via Mission Control UI",
+          }),
+        }
+      );
+      if (!response.ok) {
+        throw new Error(`Failed to save file: ${response.statusText}`);
+      }
+      setEditDialogOpen(false);
+      setSelectedFile(null);
+      setFileContent("");
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to save file");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleImportFile = async () => {
+    if (!agentId || !agent?.board_id || !importFileName) return;
+    setLoading(true);
+    setError(null);
+    try {
+      const response = await fetch(
+        `/api/v1/agent/boards/${agent.board_id}/agents/${agentId}/files/${importFileName}`,
+        {
+          method: "PUT",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            content: importFileContent,
+            reason: "Imported via Mission Control UI",
+          }),
+        }
+      );
+      if (!response.ok) {
+        throw new Error(`Failed to import file: ${response.statusText}`);
+      }
+      setImportDialogOpen(false);
+      setImportFileName("");
+      setImportFileContent("");
+      await loadFiles();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to import file");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // Load files when component mounts
+  useEffect(() => {
+    if (agent?.board_id) {
+      void loadFiles();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [agent?.board_id]);
+
+  return (
+    <DashboardPageLayout
+      signedOut={{
+        message: "Sign in to manage agent files.",
+        forceRedirectUrl: `/agents/${agentId}/files`,
+        signUpForceRedirectUrl: `/agents/${agentId}/files`,
+      }}
+      title={agent?.name ? `${agent.name} - Files` : "Agent Files"}
+      description="Manage and edit agent markdown files"
+      isAdmin={isAdmin}
+      adminOnlyMessage="Only organization owners and admins can manage agent files."
+    >
+      <div className="space-y-6">
+        <div className="flex items-center justify-between">
+          <div>
+            <h2 className="text-lg font-semibold text-slate-900">Agent Files</h2>
+            <p className="mt-1 text-sm text-slate-600">
+              View and edit agent configuration files
+            </p>
+          </div>
+          <div className="flex gap-3">
+            <Button onClick={() => setImportDialogOpen(true)}>
+              Import File
+            </Button>
+            <Button
+              variant="outline"
+              onClick={() => router.push(`/agents/${agentId}`)}
+            >
+              Back to Agent
+            </Button>
+          </div>
+        </div>
+
+        {error ? (
+          <div className="rounded-lg border border-slate-200 bg-red-50 p-3 text-sm text-red-600">
+            {error}
+          </div>
+        ) : null}
+
+        {loading && files.length === 0 ? (
+          <div className="flex items-center justify-center py-12 text-sm text-slate-600">
+            Loading files…
+          </div>
+        ) : (
+          <div className="rounded-xl border border-slate-200 bg-white shadow-sm">
+            <div className="divide-y divide-slate-200">
+              {files.length === 0 ? (
+                <div className="p-8 text-center">
+                  <p className="text-sm text-slate-600">No files found</p>
+                  <p className="mt-1 text-xs text-slate-500">
+                    Agent files will appear here once provisioned
+                  </p>
+                </div>
+              ) : (
+                files.map((file) => (
+                  <div
+                    key={file.name}
+                    className="flex items-center justify-between p-4 hover:bg-slate-50"
+                  >
+                    <div>
+                      <p className="font-medium text-slate-900">{file.name}</p>
+                      <p className="text-xs text-slate-500">
+                        {file.editable ? "Editable" : "Read-only"}
+                      </p>
+                    </div>
+                    <div className="flex gap-2">
+                      <Button
+                        size="sm"
+                        variant="outline"
+                        onClick={() => void handleFileClick(file.name)}
+                      >
+                        {file.editable ? "Edit" : "View"}
+                      </Button>
+                    </div>
+                  </div>
+                ))
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Edit/View Dialog */}
+      <Dialog open={editDialogOpen} onOpenChange={setEditDialogOpen}>
+        <DialogContent className="max-w-4xl">
+          <DialogHeader>
+            <DialogTitle>
+              {selectedFile &&
+              files.find((f) => f.name === selectedFile)?.editable
+                ? "Edit"
+                : "View"}{" "}
+              {selectedFile}
+            </DialogTitle>
+            <DialogDescription>
+              {selectedFile &&
+              files.find((f) => f.name === selectedFile)?.editable
+                ? "Make changes to the file content below"
+                : "This file is read-only"}
+            </DialogDescription>
+          </DialogHeader>
+          <div className="py-4">
+            <Textarea
+              value={fileContent}
+              onChange={(e) => setFileContent(e.target.value)}
+              className="min-h-[400px] font-mono text-sm"
+              disabled={
+                !selectedFile ||
+                !files.find((f) => f.name === selectedFile)?.editable
+              }
+            />
+          </div>
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => {
+                setEditDialogOpen(false);
+                setSelectedFile(null);
+                setFileContent("");
+              }}
+            >
+              Cancel
+            </Button>
+            {selectedFile &&
+            files.find((f) => f.name === selectedFile)?.editable ? (
+              <Button onClick={() => void handleSaveFile()} disabled={loading}>
+                {loading ? "Saving…" : "Save Changes"}
+              </Button>
+            ) : null}
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* Import Dialog */}
+      <Dialog open={importDialogOpen} onOpenChange={setImportDialogOpen}>
+        <DialogContent className="max-w-4xl">
+          <DialogHeader>
+            <DialogTitle>Import Agent File</DialogTitle>
+            <DialogDescription>
+              Upload an existing agent markdown file to Mission Control
+            </DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4 py-4">
+            <div className="space-y-2">
+              <label className="text-sm font-medium text-slate-900">
+                File name <span className="text-red-500">*</span>
+              </label>
+              <Input
+                value={importFileName}
+                onChange={(e) => setImportFileName(e.target.value)}
+                placeholder="e.g., IDENTITY.md, SOUL.md, BOOTSTRAP.md"
+              />
+              <p className="text-xs text-slate-500">
+                Use standard OpenClaw file names (IDENTITY.md, SOUL.md, etc.)
+              </p>
+            </div>
+            <div className="space-y-2">
+              <label className="text-sm font-medium text-slate-900">
+                File content <span className="text-red-500">*</span>
+              </label>
+              <Textarea
+                value={importFileContent}
+                onChange={(e) => setImportFileContent(e.target.value)}
+                className="min-h-[400px] font-mono text-sm"
+                placeholder="Paste your agent file content here..."
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => {
+                setImportDialogOpen(false);
+                setImportFileName("");
+                setImportFileContent("");
+              }}
+            >
+              Cancel
+            </Button>
+            <Button
+              onClick={() => void handleImportFile()}
+              disabled={loading || !importFileName || !importFileContent}
+            >
+              {loading ? "Importing…" : "Import File"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </DashboardPageLayout>
+  );
+}
diff --git a/frontend/src/app/agents/[agentId]/page.tsx b/frontend/src/app/agents/[agentId]/page.tsx
index 8e739a46..ce02504c 100644
--- a/frontend/src/app/agents/[agentId]/page.tsx
+++ b/frontend/src/app/agents/[agentId]/page.tsx
@@ -196,6 +196,14 @@ export default function AgentDetailPage() {
                     Edit
                   </Link>
                 ) : null}
+                {agent ? (
+                  <Link
+                    href={`/agents/${agent.id}/files`}
+                    className="inline-flex h-10 items-center justify-center rounded-xl border border-[color:var(--border)] px-4 text-sm font-semibold text-muted transition hover:border-[color:var(--accent)] hover:text-[color:var(--accent)]"
+                  >
+                    Files
+                  </Link>
+                ) : null}
                 {agent ? (
                   <Button variant="outline" onClick={() => setDeleteOpen(true)}>
                     Delete