From 17c99f6e409e517631783aca1bc024be04420c42 Mon Sep 17 00:00:00 2001
From: Camiel van Schoonhoven <camiel.vanschoonhoven@shopify.com>
Date: Thu, 5 Nov 2026 11:53:47 -0700
Subject: [PATCH] feat(documents): edit a document in place and save it to the
 project

A document opened in the Tangent workarea or selected on the project page
is now a Monaco editor with Save and Discard, not a read-only viewer. Save
writes the body back to the resource's payload (Cmd/Ctrl+S too), keeping
any other payload keys. The draft lives in the component rather than the
query cache, so while nothing has been typed the editor follows a save made
elsewhere (e.g. by an agent), and once something has, that save is
announced with a choice to overwrite or discard into it.

The document workarea kind now stays mounted while inactive so an unsaved
draft survives a tab switch, and a successful update seeds the resource's
query cache so the editor does not flash the old body before the refetch.

On the project page the editor is keyed by the resource, so selecting
another document opens a fresh editor instead of carrying the previous
document's draft over, where Save would have written it into the wrong row.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../Project/DocumentEditor.test.tsx           | 242 ++++++++++++++++++
 src/components/Project/DocumentEditor.tsx     | 140 ++++++++++
 .../Project/ProjectResourcePreview.test.tsx   |  51 +++-
 .../Project/ProjectResourcePreview.tsx        |  27 +-
 .../Tangent/workarea/documentKind.test.tsx    |  62 +++--
 .../pages/Tangent/workarea/documentKind.tsx   |  47 +---
 src/services/projects/useProjectResources.ts  |   6 +-
 7 files changed, 489 insertions(+), 86 deletions(-)
 create mode 100644 src/components/Project/DocumentEditor.test.tsx
 create mode 100644 src/components/Project/DocumentEditor.tsx

diff --git a/src/components/Project/DocumentEditor.test.tsx b/src/components/Project/DocumentEditor.test.tsx
new file mode 100644
index 0000000000..b17c3f1a61
--- /dev/null
+++ b/src/components/Project/DocumentEditor.test.tsx
@@ -0,0 +1,242 @@
+import { act, fireEvent, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import type { ProjectResource } from "@/services/projects/types";
+import { useUpdateProjectResource } from "@/services/projects/useProjectResources";
+
+import { documentBody, DocumentEditor } from "./DocumentEditor";
+
+vi.mock("@/services/projects/useProjectResources", () => ({
+  useUpdateProjectResource: vi.fn(),
+}));
+
+vi.mock("@/components/shared/CodeViewer/CodeEditor", () => ({
+  default: ({
+    value,
+    language,
+    onChange,
+    options,
+  }: {
+    value: string;
+    language: string;
+    onChange: (value: string) => void;
+    options: { ariaLabel: string };
+  }) => (
+    <textarea
+      aria-label={options.ariaLabel}
+      data-language={language}
+      value={value}
+      onChange={(event) => onChange(event.target.value)}
+    />
+  ),
+}));
+
+type Mutate = ReturnType<typeof useUpdateProjectResource>["mutate"];
+
+const mutate = vi.fn<Mutate>();
+
+function givenUpdate({ isPending = false } = {}) {
+  vi.mocked(useUpdateProjectResource).mockReturnValue({
+    mutate,
+    isPending,
+  } as unknown as ReturnType<typeof useUpdateProjectResource>);
+}
+
+function resource(overrides: Partial<ProjectResource> = {}): ProjectResource {
+  return {
+    id: "resource-1",
+    projectId: "project-1",
+    entity: "document",
+    name: "notes.md",
+    entityId: null,
+    metadata: { type: "document" },
+    createdBy: "alice@example.com",
+    createdAt: new Date("2026-09-09T10:00:00Z"),
+    updatedAt: new Date("2026-09-09T10:00:00Z"),
+    payload: { content: "# Notes" },
+    ...overrides,
+  };
+}
+
+const editor = () => screen.getByRole("textbox", { name: "notes.md" });
+const saveButton = () => screen.getByRole("button", { name: /^Sav/ });
+const discardButton = () => screen.getByRole("button", { name: "Discard" });
+
+function renderEditor(initial = resource()) {
+  givenUpdate();
+  const view = render(
+    <DocumentEditor projectId="project-1" resource={initial} />,
+  );
+  return {
+    rerenderWith: (next: ProjectResource) =>
+      view.rerender(<DocumentEditor projectId="project-1" resource={next} />),
+  };
+}
+
+async function type(text: string) {
+  await userEvent.clear(editor());
+  if (text !== "") await userEvent.type(editor(), text);
+}
+
+function saveLands() {
+  const options = mutate.mock.calls.at(-1)?.[1];
+  if (!options?.onSuccess) throw new Error("save did not pass onSuccess");
+  const onSuccess = options.onSuccess as unknown as () => void;
+  act(() => onSuccess());
+}
+
+describe("documentBody", () => {
+  it("reads the content string", () => {
+    expect(documentBody({ payload: { content: "hi" } })).toBe("hi");
+  });
+
+  it("reads anything else as empty, so it can be written into", () => {
+    expect(documentBody({ payload: {} })).toBe("");
+    expect(documentBody({ payload: null })).toBe("");
+    expect(documentBody({ payload: { content: 3 } })).toBe("");
+  });
+});
+
+describe("DocumentEditor", () => {
+  afterEach(() => vi.resetAllMocks());
+
+  it("opens on the saved body with nothing to save", () => {
+    renderEditor();
+
+    expect(editor()).toHaveValue("# Notes");
+    expect(editor()).toHaveAttribute("data-language", "markdown");
+    expect(saveButton()).toBeDisabled();
+    expect(discardButton()).toBeDisabled();
+    expect(screen.queryByText("Unsaved changes")).toBeNull();
+  });
+
+  it("saves what was typed into the payload, keeping the rest of it", async () => {
+    renderEditor(resource({ payload: { content: "# Notes", author: "al" } }));
+
+    await type("# Revised");
+    expect(screen.getByText("Unsaved changes")).toBeInTheDocument();
+
+    await userEvent.click(saveButton());
+
+    expect(mutate).toHaveBeenCalledWith(
+      {
+        resourceId: "resource-1",
+        input: { payload: { author: "al", content: "# Revised" } },
+      },
+      expect.objectContaining({ onSuccess: expect.any(Function) }),
+    );
+  });
+
+  it("is clean again once the save lands", async () => {
+    const { rerenderWith } = renderEditor();
+
+    await type("# Revised");
+    await userEvent.click(saveButton());
+    rerenderWith(resource({ payload: { content: "# Revised" } }));
+    saveLands();
+
+    expect(editor()).toHaveValue("# Revised");
+    expect(saveButton()).toBeDisabled();
+    expect(screen.queryByText("Unsaved changes")).toBeNull();
+  });
+
+  it("keeps what was typed while the save was in flight", async () => {
+    const { rerenderWith } = renderEditor();
+
+    await type("# Revised");
+    await userEvent.click(saveButton());
+    await userEvent.type(editor(), " again");
+    rerenderWith(resource({ payload: { content: "# Revised" } }));
+    saveLands();
+
+    expect(editor()).toHaveValue("# Revised again");
+    expect(saveButton()).toBeEnabled();
+    expect(screen.queryByRole("alert")).toBeNull();
+  });
+
+  it("saves on Cmd+S and Ctrl+S", async () => {
+    renderEditor();
+
+    await type("# Revised");
+    fireEvent.keyDown(editor(), { key: "s", metaKey: true });
+    fireEvent.keyDown(editor(), { key: "s", ctrlKey: true });
+
+    expect(mutate).toHaveBeenCalledTimes(2);
+  });
+
+  it("ignores Cmd+S with nothing to save", () => {
+    renderEditor();
+
+    fireEvent.keyDown(editor(), { key: "s", metaKey: true });
+
+    expect(mutate).not.toHaveBeenCalled();
+  });
+
+  it("does not save twice while one save is pending", async () => {
+    givenUpdate({ isPending: true });
+    render(<DocumentEditor projectId="project-1" resource={resource()} />);
+
+    await type("# Revised");
+
+    expect(screen.getByRole("button", { name: "Saving…" })).toBeDisabled();
+    fireEvent.keyDown(editor(), { key: "s", metaKey: true });
+    expect(mutate).not.toHaveBeenCalled();
+  });
+
+  it("discards back to the saved body", async () => {
+    renderEditor();
+
+    await type("# Revised");
+    await userEvent.click(discardButton());
+
+    expect(editor()).toHaveValue("# Notes");
+    expect(saveButton()).toBeDisabled();
+  });
+
+  it("has nothing to save once the text is typed back to what was saved", async () => {
+    renderEditor();
+
+    await type("# Revised");
+    await type("# Notes");
+
+    expect(saveButton()).toBeDisabled();
+    expect(screen.queryByText("Unsaved changes")).toBeNull();
+  });
+
+  it("follows a save made elsewhere while nothing has been typed", () => {
+    const { rerenderWith } = renderEditor();
+
+    rerenderWith(resource({ payload: { content: "# From the agent" } }));
+
+    expect(editor()).toHaveValue("# From the agent");
+    expect(screen.queryByRole("alert")).toBeNull();
+  });
+
+  it("announces a save made elsewhere while typing, and discards into it", async () => {
+    const { rerenderWith } = renderEditor();
+
+    await type("# Mine");
+    rerenderWith(resource({ payload: { content: "# From the agent" } }));
+
+    expect(editor()).toHaveValue("# Mine");
+    expect(screen.getByRole("alert")).toHaveTextContent("changed elsewhere");
+    expect(saveButton()).toBeEnabled();
+
+    await userEvent.click(discardButton());
+
+    expect(editor()).toHaveValue("# From the agent");
+    expect(screen.queryByRole("alert")).toBeNull();
+  });
+
+  it("opens an empty document ready to be written into", async () => {
+    renderEditor(resource({ name: null, payload: {} }));
+
+    const empty = screen.getByRole("textbox", { name: "Untitled" });
+    expect(empty).toHaveValue("");
+
+    await userEvent.type(empty, "First line");
+
+    expect(saveButton()).toBeEnabled();
+  });
+});
diff --git a/src/components/Project/DocumentEditor.tsx b/src/components/Project/DocumentEditor.tsx
new file mode 100644
index 0000000000..482d9b3f77
--- /dev/null
+++ b/src/components/Project/DocumentEditor.tsx
@@ -0,0 +1,140 @@
+import { type KeyboardEvent, useState } from "react";
+
+import { languageFor } from "@/components/shared/CodeViewer";
+import CodeEditor from "@/components/shared/CodeViewer/CodeEditor";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import { Icon } from "@/components/ui/icon";
+import { BlockStack, InlineStack } from "@/components/ui/layout";
+import { Text } from "@/components/ui/typography";
+import { UNTITLED } from "@/services/projects/placeholderNames";
+import { resourceMeta } from "@/services/projects/resourceMeta";
+import type { ProjectResource } from "@/services/projects/types";
+import { useUpdateProjectResource } from "@/services/projects/useProjectResources";
+import { tracking } from "@/utils/tracking";
+
+const CONTENT_KEY = "content";
+
+export function documentBody(
+  resource: Pick<ProjectResource, "payload">,
+): string {
+  const body = resource.payload?.[CONTENT_KEY];
+  return typeof body === "string" ? body : "";
+}
+
+interface Edit {
+  startedFrom: string;
+  draft: string;
+}
+
+interface DocumentEditorProps {
+  projectId: string;
+  resource: ProjectResource;
+}
+
+export function DocumentEditor({ projectId, resource }: DocumentEditorProps) {
+  const saved = documentBody(resource);
+  const [edit, setEdit] = useState<Edit | null>(null);
+  const update = useUpdateProjectResource(projectId);
+
+  const content = edit?.draft ?? saved;
+  const isDirty = edit !== null && edit.draft !== saved;
+  const changedElsewhere = edit !== null && edit.startedFrom !== saved;
+  const canSave = isDirty && !update.isPending;
+  const name = resource.name ?? UNTITLED;
+
+  const handleChange = (value: string) => {
+    setEdit((current) => ({
+      startedFrom: current?.startedFrom ?? saved,
+      draft: value,
+    }));
+  };
+
+  const discard = () => setEdit(null);
+
+  const save = () => {
+    if (!canSave) return;
+    const draft = content;
+    update.mutate(
+      {
+        resourceId: resource.id,
+        input: { payload: { ...resource.payload, [CONTENT_KEY]: draft } },
+      },
+      {
+        onSuccess: () =>
+          setEdit((current) => {
+            if (!current || current.draft === draft) return null;
+            return { startedFrom: draft, draft: current.draft };
+          }),
+      },
+    );
+  };
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    if (!(event.metaKey || event.ctrlKey) || event.key !== "s") return;
+    event.preventDefault();
+    save();
+  };
+
+  return (
+    <BlockStack className="min-h-0 w-full flex-1">
+      <InlineStack
+        gap="2"
+        wrap="nowrap"
+        className="w-full shrink-0 border-b border-border px-3 py-1.5"
+      >
+        <Icon
+          name={resourceMeta("document").icon}
+          size="xs"
+          className="shrink-0 text-muted-foreground"
+        />
+        <Text size="sm" weight="medium" className="truncate">
+          {name}
+        </Text>
+        {isDirty && (
+          <Text size="xs" tone="subdued" className="shrink-0">
+            Unsaved changes
+          </Text>
+        )}
+        <InlineStack gap="1" wrap="nowrap" className="ml-auto shrink-0">
+          <Button
+            variant="ghost"
+            size="xs"
+            disabled={edit === null || update.isPending}
+            onClick={discard}
+            {...tracking("projects.discard_document_edits")}
+          >
+            Discard
+          </Button>
+          <Button
+            size="xs"
+            disabled={!canSave}
+            onClick={save}
+            {...tracking("projects.save_document")}
+          >
+            {update.isPending ? "Saving…" : "Save"}
+          </Button>
+        </InlineStack>
+      </InlineStack>
+
+      {changedElsewhere && (
+        <Alert className="rounded-none border-x-0 border-t-0">
+          <Icon name="CircleAlert" />
+          <AlertDescription>
+            This document was changed elsewhere since you started editing. Save
+            replaces that version with yours; Discard loads it.
+          </AlertDescription>
+        </Alert>
+      )}
+
+      <div className="min-h-0 w-full flex-1" onKeyDown={handleKeyDown}>
+        <CodeEditor
+          value={content}
+          language={languageFor(resource.name)}
+          onChange={handleChange}
+          options={{ ariaLabel: name }}
+        />
+      </div>
+    </BlockStack>
+  );
+}
diff --git a/src/components/Project/ProjectResourcePreview.test.tsx b/src/components/Project/ProjectResourcePreview.test.tsx
index 2604bd7dad..10dbdaa86c 100644
--- a/src/components/Project/ProjectResourcePreview.test.tsx
+++ b/src/components/Project/ProjectResourcePreview.test.tsx
@@ -58,6 +58,31 @@ vi.mock("./RunPipelineButton", () => ({
   ),
 }));
 
+vi.mock("./DocumentEditor", async () => {
+  const { useState } = await vi.importActual<typeof import("react")>("react");
+
+  function DocumentEditor({
+    projectId,
+    resource,
+  }: {
+    projectId: string;
+    resource: ProjectResource;
+  }) {
+    const [openedFor] = useState(resource.id);
+    return (
+      <div
+        data-testid="document-editor"
+        data-project={projectId}
+        data-opened-for={openedFor}
+      >
+        {String(resource.payload?.content)}
+      </div>
+    );
+  }
+
+  return { DocumentEditor };
+});
+
 vi.mock("@/components/shared/CodeViewer", async (importOriginal) => ({
   ...(await importOriginal<typeof import("@/components/shared/CodeViewer")>()),
   CodeViewer: ({
@@ -176,24 +201,26 @@ describe("ProjectResourcePreview", () => {
     expect(useProjectResource).not.toHaveBeenCalled();
   });
 
-  it("shows a document's own body", () => {
+  it("opens a document's own body in the editor", () => {
     renderPreview("resource-1");
 
-    expect(viewer()).toHaveTextContent("# Hello");
-    expect(viewer()).toHaveTextContent("readme.md");
+    const editor = screen.getByTestId("document-editor");
+    expect(editor).toHaveTextContent("# Hello");
+    expect(editor).toHaveAttribute("data-project", "project-1");
+    expect(screen.queryByTestId("code-viewer")).toBeNull();
   });
 
-  it("highlights a document by the language its name implies", () => {
-    renderPreview("resource-1");
+  it("opens a fresh editor for each document selected, so a draft never moves to another document", () => {
+    const { rerender } = renderPreview("resource-1");
 
-    expect(viewer()).toHaveAttribute("data-language", "markdown");
-  });
-
-  it("falls back to plain text for a name that says nothing", () => {
-    mockResource({ name: "Model card" });
-    renderPreview("resource-1");
+    mockResource({ id: "resource-2", payload: { content: "# Other" } });
+    rerender(
+      <ProjectResourcePreview projectId="project-1" resourceId="resource-2" />,
+    );
 
-    expect(viewer()).toHaveAttribute("data-language", "plaintext");
+    const editor = screen.getByTestId("document-editor");
+    expect(editor).toHaveTextContent("# Other");
+    expect(editor).toHaveAttribute("data-opened-for", "resource-2");
   });
 
   it("shows a pipeline as the yaml of its spec", () => {
diff --git a/src/components/Project/ProjectResourcePreview.tsx b/src/components/Project/ProjectResourcePreview.tsx
index abb4c21e9e..92a9f36f0c 100644
--- a/src/components/Project/ProjectResourcePreview.tsx
+++ b/src/components/Project/ProjectResourcePreview.tsx
@@ -2,7 +2,7 @@ import { Link } from "@tanstack/react-router";
 import * as yaml from "js-yaml";
 import type { ReactNode } from "react";
 
-import { CodeViewer, languageFor } from "@/components/shared/CodeViewer";
+import { CodeViewer } from "@/components/shared/CodeViewer";
 import { InfoBox } from "@/components/shared/InfoBox";
 import { Button } from "@/components/ui/button";
 import { EmptyState } from "@/components/ui/empty-state";
@@ -33,6 +33,7 @@ import { tracking } from "@/utils/tracking";
 import { componentSpecToText } from "@/utils/yaml";
 
 import { ColumnHeadingRow } from "./ColumnHeadingRow";
+import { DocumentEditor } from "./DocumentEditor";
 import { type PipelineValidity, pipelineValidity } from "./pipelineValidity";
 import { RunPipelineButton } from "./RunPipelineButton";
 
@@ -163,7 +164,7 @@ function SelectedResource({ projectId, resourceId }: SelectedResourceProps) {
     );
   }
 
-  return <PayloadPreview resource={resource} />;
+  return <PayloadPreview projectId={projectId} resource={resource} />;
 }
 
 /**
@@ -335,16 +336,26 @@ function ValidityBadge({ validity }: { validity: PipelineValidity }) {
   );
 }
 
-function PayloadPreview({ resource }: { resource: ProjectResource }) {
+function PayloadPreview({
+  projectId,
+  resource,
+}: {
+  projectId: string;
+  resource: ProjectResource;
+}) {
   const body = resource.payload?.[CONTENT_KEY];
 
   if (typeof body === "string") {
     return (
-      <Code
-        code={body}
-        language={languageFor(resource.name)}
-        filename={resource.name ?? UNTITLED}
-      />
+      <div
+        className={`flex w-full flex-col overflow-hidden rounded-lg border border-border ${PREVIEW_HEIGHT}`}
+      >
+        <DocumentEditor
+          key={resource.id}
+          projectId={projectId}
+          resource={resource}
+        />
+      </div>
     );
   }
 
diff --git a/src/routes/v2/pages/Tangent/workarea/documentKind.test.tsx b/src/routes/v2/pages/Tangent/workarea/documentKind.test.tsx
index 14bf1f8b9a..588fde5fab 100644
--- a/src/routes/v2/pages/Tangent/workarea/documentKind.test.tsx
+++ b/src/routes/v2/pages/Tangent/workarea/documentKind.test.tsx
@@ -3,6 +3,7 @@ import "./documentKind";
 import { render, screen } from "@testing-library/react";
 import { afterEach, describe, expect, it, vi } from "vitest";
 
+import type { ProjectResource } from "@/services/projects/types";
 import { useProjectResource } from "@/services/projects/useProjectResources";
 
 import { getWorkareaKind } from "./registry";
@@ -12,12 +13,18 @@ vi.mock("@/services/projects/useProjectResources", () => ({
   useProjectResource: vi.fn(),
 }));
 
-vi.mock("@/components/shared/CodeViewer", () => ({
-  CodeViewer: ({ code, language }: { code: string; language: string }) => (
-    <pre data-language={language}>{code}</pre>
+vi.mock("@/components/Project/DocumentEditor", () => ({
+  DocumentEditor: ({
+    projectId,
+    resource,
+  }: {
+    projectId: string;
+    resource: ProjectResource;
+  }) => (
+    <div data-testid="document-editor" data-project={projectId}>
+      {String(resource.payload?.content)}
+    </div>
   ),
-  languageFor: (name: string | null) =>
-    name?.endsWith(".md") ? "markdown" : "plaintext",
 }));
 
 const tab: WorkareaTab = {
@@ -26,11 +33,15 @@ const tab: WorkareaTab = {
   target: { type: "document", identity: "id/resource-7" },
 };
 
+function kind() {
+  const registered = getWorkareaKind("document");
+  if (!registered) throw new Error("document kind is not registered");
+  return registered;
+}
+
 function renderDocument() {
-  const kind = getWorkareaKind("document");
-  if (!kind) throw new Error("document kind is not registered");
   return render(
-    <>{kind.render(tab, { projectId: "project-1" } as WorkareaHostProps)}</>,
+    <>{kind().render(tab, { projectId: "project-1" } as WorkareaHostProps)}</>,
   );
 }
 
@@ -45,7 +56,7 @@ function given(value: Partial<ReturnType<typeof useProjectResource>>) {
 describe("documentKind", () => {
   afterEach(() => vi.resetAllMocks());
 
-  it("shows what the document says", () => {
+  it("opens the document in the editor", () => {
     given({
       data: {
         name: "Model card",
@@ -55,32 +66,18 @@ describe("documentKind", () => {
 
     renderDocument();
 
-    expect(screen.getByText("Trained on Q3")).toBeInTheDocument();
-    expect(useProjectResource).toHaveBeenCalledWith("project-1", "resource-7");
-  });
-
-  it("highlights by the name the author gave it", () => {
-    given({
-      data: { name: "notes.md", payload: { content: "# Heading" } } as never,
-    });
-
-    renderDocument();
-
-    expect(screen.getByText("# Heading")).toHaveAttribute(
-      "data-language",
-      "markdown",
+    expect(screen.getByTestId("document-editor")).toHaveTextContent(
+      "Trained on Q3",
     );
+    expect(screen.getByTestId("document-editor")).toHaveAttribute(
+      "data-project",
+      "project-1",
+    );
+    expect(useProjectResource).toHaveBeenCalledWith("project-1", "resource-7");
   });
 
-  /** Anyone may PATCH a payload, so an empty one has to read as something. */
-  it("says so rather than rendering nothing when there is no body", () => {
-    given({ data: { name: "Model card", payload: {} } as never });
-
-    renderDocument();
-
-    expect(
-      screen.getByText("This document has nothing written in it."),
-    ).toBeInTheDocument();
+  it("stays mounted in the background so an unsaved draft is not lost", () => {
+    expect(kind().keepMounted).toBe(true);
   });
 
   it("passes on why it could not be loaded", () => {
@@ -89,5 +86,6 @@ describe("documentKind", () => {
     renderDocument();
 
     expect(screen.getByText("Not found")).toBeInTheDocument();
+    expect(screen.queryByTestId("document-editor")).toBeNull();
   });
 });
diff --git a/src/routes/v2/pages/Tangent/workarea/documentKind.tsx b/src/routes/v2/pages/Tangent/workarea/documentKind.tsx
index b2147952b7..1f92e2c491 100644
--- a/src/routes/v2/pages/Tangent/workarea/documentKind.tsx
+++ b/src/routes/v2/pages/Tangent/workarea/documentKind.tsx
@@ -1,4 +1,4 @@
-import { CodeViewer, languageFor } from "@/components/shared/CodeViewer";
+import { DocumentEditor } from "@/components/Project/DocumentEditor";
 import { BlockStack } from "@/components/ui/layout";
 import { Spinner } from "@/components/ui/spinner";
 import { Text } from "@/components/ui/typography";
@@ -8,22 +8,6 @@ import { useProjectResource } from "@/services/projects/useProjectResources";
 import { registerWorkareaKind } from "./registry";
 import type { WorkareaTab } from "./types";
 
-const CONTENT_KEY = "content";
-
-function Centered({ children }: { children: string }) {
-  return (
-    <BlockStack
-      gap="1"
-      align="center"
-      className="min-h-0 flex-1 justify-center p-6 text-center"
-    >
-      <Text size="sm" tone="subdued">
-        {children}
-      </Text>
-    </BlockStack>
-  );
-}
-
 function DocumentWorkareaView({
   tab,
   projectId,
@@ -51,29 +35,26 @@ function DocumentWorkareaView({
   }
 
   if (error) {
-    return <Centered>{error.message}</Centered>;
-  }
-
-  const body = resource.payload?.[CONTENT_KEY];
-  if (typeof body !== "string") {
-    return <Centered>This document has nothing written in it.</Centered>;
+    return (
+      <BlockStack
+        gap="1"
+        align="center"
+        className="min-h-0 flex-1 justify-center p-6 text-center"
+      >
+        <Text size="sm" tone="subdued">
+          {error.message}
+        </Text>
+      </BlockStack>
+    );
   }
 
-  return (
-    <div className="min-h-0 flex-1 overflow-hidden">
-      <CodeViewer
-        code={body}
-        language={languageFor(resource.name)}
-        filename={resource.name ?? tab.title}
-      />
-    </div>
-  );
+  return <DocumentEditor projectId={projectId} resource={resource} />;
 }
 
 registerWorkareaKind({
   type: "document",
   icon: "FileText",
-  keepMounted: false,
+  keepMounted: true,
   // The row holds the title, and the tab is opened from the row that has it
   // already, so the fallback is only for a target typed in from elsewhere.
   resolveTitle: () => "Document",
diff --git a/src/services/projects/useProjectResources.ts b/src/services/projects/useProjectResources.ts
index 9e9d313623..0741e03317 100644
--- a/src/services/projects/useProjectResources.ts
+++ b/src/services/projects/useProjectResources.ts
@@ -130,7 +130,11 @@ export function useUpdateProjectResource(projectId: string) {
       resourceId: string;
       input: UpdateResourceInput;
     }) => updateProjectResource(projectId, resourceId, input),
-    onSuccess: () => {
+    onSuccess: (resource) => {
+      queryClient.setQueryData(
+        ProjectResourcesQueryKeys.Id(projectId, resource.id),
+        resource,
+      );
       invalidateProjectResources(queryClient, projectId);
     },
     onError: () => {