feat(canvas): /agent-home root option + secret-shape denial placeholder (internal#425 Phase 3)

Phase 3 of the Files API roots RFC. UI-side wiring for the new
/agent-home root. Backend dispatch is the Phase 2b PR (#TBD) — until
that lands, /agent-home returns the 501 stub from #1247, which the
existing error banner already surfaces gracefully.

Changes:

1. canvas/src/components/tabs/FilesTab/FilesToolbar.tsx — adds
   <option value="/agent-home">/agent-home</option> at the bottom
   of the root selector. Pre-Phase-2b the dropdown still works
   because the server-side 501 is just an error response — same
   error-banner path as a transient backend failure.

2. canvas/src/components/tabs/FilesTab.tsx — new
   defaultRootForRuntime() function pins the initial root per-
   runtime per Hongming Decisions §2 (internal#425):

     - openclaw → /agent-home (the user-facing interesting state)
     - everything else → /configs (legacy default)

   FilesTab now reads workspace runtime from props.data?.runtime
   and threads it through to PlatformOwnedFilesTab. Undefined-
   runtime callers (legacy tests, pre-load states) default to
   /configs — matches today's behaviour, no surprise.

3. canvas/src/components/tabs/FilesTab/FileEditor.tsx — new
   SECRET_SHAPE_DENIED_MARKER export + denial-placeholder render
   path. When fileContent === marker, the editor renders a
   role=region placeholder instead of the textarea, so the matched
   bytes never enter a controlled input (DOM value, clipboard,
   inspector). Marker constant matches the canonical
   '<denied: secret-shape>' string the Phase 2b backend will emit.

   Also: /agent-home is read-only via isReadOnlyRoot until Phase
   2b decides write semantics. Until then, write attempts would
   201 with the 501 stub anyway, but blocking the textarea at the
   UI saves the user a round-trip + a confusing error.

Tests (canvas/src/components/tabs/FilesTab/__tests__/agentHome.test.tsx):

  - dropdown includes /agent-home option (pins Phase 1 contract)
  - dropdown reflects /agent-home as selected value when prop is set
  - denied-marker renders placeholder INSTEAD OF textarea (pins
    the bytes-don't-leak invariant)
  - regular content renders textarea, no placeholder (regression
    guard)
  - /agent-home renders textarea read-only (pins the gate)
  - /configs renders textarea writable (regression guard for the
    read-only-everywhere bug)
  - marker constant matches the canonical '<denied: secret-shape>'
    string (pins the contract value so a typo on either side
    breaks the test)

vitest run on FilesTab + new tests: 47 tests passed, 3 files. tsc
--noEmit clean for all edited / created files (the pre-existing TS
errors in FilesTab.test.tsx are unchanged and unrelated).

Refs internal#425.

canvas/src/components/tabs/FilesTab.tsx

@@ -45,11 +45,54 @@ export function FilesTab({ workspaceId, data }: Props) {
   if (data && isExternalLikeRuntime(data.runtime)) {
     return <NotAvailablePanel runtime={data.runtime} />;
   }
-  return <PlatformOwnedFilesTab workspaceId={workspaceId} />;
+  return <PlatformOwnedFilesTab workspaceId={workspaceId} runtime={data?.runtime} />;
 }
 
-function PlatformOwnedFilesTab({ workspaceId }: { workspaceId: string }) {
-  const [root, setRoot] = useState("/configs");
+/** Picks the initial root for the FilesTab dropdown based on the
+ *  workspace's runtime. Decision: per-runtime default (Hongming
+ *  2026-05-15, internal#425 Decisions §2).
+ *
+ *  - openclaw → `/agent-home` (the agent's identity/state — the
+ *    user-facing interesting files for that runtime live in
+ *    `~/.openclaw/` inside the container, which `/agent-home` maps to
+ *    via the Phase 2b docker-exec backend).
+ *  - everything else (claude-code, hermes, external-like, undefined)
+ *    → `/configs` (the legacy default — managed config that flows
+ *    through the per-runtime indirection in
+ *    workspace-server/internal/handlers/template_files_eic.go).
+ *
+ *  When the runtime is undefined (legacy callers that don't thread
+ *  `data` through, or a workspace whose runtime field hasn't loaded
+ *  yet) the default is `/configs` — matches today's behaviour, no
+ *  surprise.
+ *
+ *  Note on `/agent-home` pre-Phase-2b: the backend short-circuits
+ *  with HTTP 501 and the canonical "implementation pending" body.
+ *  The tab renders empty + the error banner explains. This is by
+ *  design — lets us land the canvas UX before the backend ships,
+ *  per the RFC's phased rollout. The 501 is graceful: it doesn't
+ *  poison error toasts or generate "workspace not found" noise.
+ *
+ *  Adding a new runtime that should default to `/agent-home`: add it
+ *  to the agentHomeDefaultRuntimes set below. Adding a runtime that
+ *  should default to a different root: extend this function. */
+const agentHomeDefaultRuntimes = new Set(["openclaw"]);
+
+function defaultRootForRuntime(runtime: string | undefined): string {
+  if (runtime && agentHomeDefaultRuntimes.has(runtime)) {
+    return "/agent-home";
+  }
+  return "/configs";
+}
+
+function PlatformOwnedFilesTab({
+  workspaceId,
+  runtime,
+}: {
+  workspaceId: string;
+  runtime?: string;
+}) {
+  const [root, setRoot] = useState(() => defaultRootForRuntime(runtime));
   const [selectedFile, setSelectedFile] = useState<string | null>(null);
   const [fileContent, setFileContent] = useState("");
   const [editContent, setEditContent] = useState("");

canvas/src/components/tabs/FilesTab/FileEditor.tsx

@@ -3,6 +3,22 @@
 import { useRef } from "react";
 import { getIcon } from "./tree";
 
+// secretShapeMarker is the canonical body the workspace-server Files
+// API returns when a file's path OR content matched a credential
+// regex (internal#425 RFC, Phase 2b — backed by
+// workspace-server/internal/secrets.ScanBytes). The marker is a
+// fixed prefix so the canvas can detect it without parsing JSON and
+// without round-tripping the matched bytes through the editor (which
+// would defeat the purpose — clipboard, browser history, log
+// surfaces would all see them).
+//
+// Today (Phase 1 / before 2b ships) the backend returns 501 for the
+// only root that uses this path, so the marker is dead code until
+// 2b lands. Wiring it in now keeps the canvas + backend contracts
+// aligned in one PR rather than a follow-up. The constant is
+// importable so a future test can pin the exact string.
+export const SECRET_SHAPE_DENIED_MARKER = "<denied: secret-shape>";
+
 interface Props {
   selectedFile: string | null;
   fileContent: string;
@@ -31,6 +47,22 @@ export function FileEditor({
   const editorRef = useRef<HTMLTextAreaElement>(null);
   const isDirty = editContent !== fileContent;
 
+  // internal#425 Phase 3: detect the secret-shape denial marker and
+  // render a placeholder instead of the editor. The marker comes
+  // from workspace-server Phase 2b (secrets.ScanBytes) which refuses
+  // to surface the file's bytes. We deliberately don't expose
+  // the matched pattern's Name here — the canvas just shows the
+  // generic denial. The Files API log surface has the Pattern.Name
+  // for operators who need to debug a false positive.
+  const isSecretShapeDenied = fileContent === SECRET_SHAPE_DENIED_MARKER;
+
+  // /agent-home is read-only from the canvas (Phase 2b ships read +
+  // delete; Phase-2b-followup may add write). Edits to /configs are
+  // unchanged. Until 2b ships, /agent-home returns 501 so this
+  // read-only gate is also dead code, but wiring it in now keeps
+  // the UI honest the moment 2b lands without a follow-up canvas PR.
+  const isReadOnlyRoot = root !== "/configs";
+
   if (!selectedFile) {
     return (
       <div className="flex-1 flex items-center justify-center">
@@ -75,11 +107,42 @@ export function FileEditor({
       {/* Editor area */}
       {loadingFile ? (
         <div className="p-4 text-xs text-ink-mid">Loading...</div>
+      ) : isSecretShapeDenied ? (
+        // Files API refused to surface this file's bytes because its
+        // path or content matched a credential regex
+        // (workspace-server/internal/secrets, internal#425 Phase 2b).
+        // We render a placeholder INSTEAD OF the textarea so the
+        // matched bytes never enter the DOM. Clipboard / view-source
+        // / element-inspector all see the placeholder, not the
+        // credential.
+        <div
+          role="region"
+          aria-label="File content denied"
+          className="flex-1 flex items-center justify-center p-6 bg-surface"
+        >
+          <div className="max-w-md text-center space-y-2">
+            <div className="text-2xl opacity-40">🛡️</div>
+            <p className="text-[11px] font-mono text-warm">
+              {SECRET_SHAPE_DENIED_MARKER}
+            </p>
+            <p className="text-[10px] text-ink-mid leading-relaxed">
+              The platform refused to surface this file because its
+              path or content matched a credential-shape pattern.
+              The bytes never left the workspace container.
+            </p>
+            <p className="text-[10px] text-ink-mid leading-relaxed">
+              If this is a false positive (test fixture, docs example,
+              or content that happens to share a credential's shape),
+              rename the file or adjust the content via the workspace
+              terminal so the regex no longer matches, then refresh.
+            </p>
+          </div>
+        </div>
       ) : (
         <textarea
           ref={editorRef}
           value={editContent}
-          readOnly={root !== "/configs"}
+          readOnly={isReadOnlyRoot}
           onChange={(e) => setEditContent(e.target.value)}
           onKeyDown={(e) => {
             if ((e.metaKey || e.ctrlKey) && e.key === "s") {

canvas/src/components/tabs/FilesTab/FilesToolbar.tsx

@@ -38,6 +38,15 @@ export function FilesToolbar({
           <option value="/home">/home</option>
           <option value="/workspace">/workspace</option>
           <option value="/plugins">/plugins</option>
+          {/* internal#425 Phase 1+3: container-internal $HOME root.
+              Backend lands the docker-exec dispatch in Phase 2b. Until
+              then the stub returns 501 with a canonical
+              "implementation pending" message — the dropdown renders
+              the option so the canvas affordance is design-frozen
+              even before the backend ships.
+              Runtime-default selection logic in FilesTab.tsx picks
+              this as the initial value for openclaw workspaces. */}
+          <option value="/agent-home">/agent-home</option>
         </select>
         <span className="text-[10px] text-ink-mid">{fileCount} files</span>
       </div>

canvas/src/components/tabs/FilesTab/__tests__/agentHome.test.tsx

@@ -0,0 +1,181 @@
+// @vitest-environment jsdom
+/**
+ * Tests for the /agent-home root selector + per-runtime default-root
+ * + secret-shape denial placeholder (internal#425 Phase 3).
+ *
+ * Separate file so the diff is reviewable as a unit and the existing
+ * FilesToolbar / FileEditor / FilesTab tests don't have to grow
+ * agent-home-specific cases. Once Phase 2b lands, the read-only +
+ * 501-stub assertions here can be tightened (or moved into the main
+ * test file as the agent-home root becomes a first-class affordance).
+ */
+import React from "react";
+import { render, screen, cleanup } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import { FilesToolbar } from "../FilesToolbar";
+import {
+  FileEditor,
+  SECRET_SHAPE_DENIED_MARKER,
+} from "../FileEditor";
+
+afterEach(cleanup);
+
+describe("internal#425 Phase 3 — /agent-home root selector", () => {
+  it("dropdown includes /agent-home as an option", () => {
+    // Pins the affordance is in the DOM even pre-Phase-2b — the
+    // canvas design freezes today, the backend lands the dispatch
+    // later. Without this, a future refactor that drops the option
+    // would silently regress the RFC's Phase 1 contract (canvas
+    // visibility) without breaking any other test.
+    render(
+      <FilesToolbar
+        root="/configs"
+        setRoot={vi.fn()}
+        fileCount={0}
+        onNewFile={vi.fn()}
+        onUpload={vi.fn()}
+        onDownloadAll={vi.fn()}
+        onClearAll={vi.fn()}
+        onRefresh={vi.fn()}
+      />,
+    );
+    const select = screen.getByRole("combobox", {
+      name: /file root directory/i,
+    }) as HTMLSelectElement;
+    const values = Array.from(select.options).map((o) => o.value);
+    expect(values).toContain("/agent-home");
+  });
+
+  it("dropdown shows /agent-home as the SELECTED root when prop is /agent-home", () => {
+    render(
+      <FilesToolbar
+        root="/agent-home"
+        setRoot={vi.fn()}
+        fileCount={0}
+        onNewFile={vi.fn()}
+        onUpload={vi.fn()}
+        onDownloadAll={vi.fn()}
+        onClearAll={vi.fn()}
+        onRefresh={vi.fn()}
+      />,
+    );
+    const select = screen.getByRole("combobox", {
+      name: /file root directory/i,
+    }) as HTMLSelectElement;
+    expect(select.value).toBe("/agent-home");
+  });
+});
+
+describe("internal#425 Phase 3 — secret-shape denial placeholder", () => {
+  // Files API Phase 2b returns SECRET_SHAPE_DENIED_MARKER as the file
+  // body when the file's path or content matched a credential regex.
+  // The editor MUST render the marker as a placeholder, not pump it
+  // through the textarea — that would put the marker (and any future
+  // matched bytes if the backend contract changes) into the DOM
+  // value, clipboard, and inspector.
+
+  it("renders the denial placeholder INSTEAD of the textarea when fileContent is the marker", () => {
+    render(
+      <FileEditor
+        selectedFile="agent/.openclaw/secrets.env"
+        fileContent={SECRET_SHAPE_DENIED_MARKER}
+        editContent={SECRET_SHAPE_DENIED_MARKER}
+        setEditContent={vi.fn()}
+        loadingFile={false}
+        saving={false}
+        success={null}
+        root="/agent-home"
+        onSave={vi.fn()}
+        onDownload={vi.fn()}
+      />,
+    );
+    // Placeholder region present
+    expect(
+      screen.getByRole("region", { name: /file content denied/i }),
+    ).toBeTruthy();
+    // Marker text visible (so a debugging operator sees the canonical
+    // contract string without having to dig into the source).
+    expect(screen.getByText(SECRET_SHAPE_DENIED_MARKER)).toBeTruthy();
+    // Critically: NO textarea — the bytes never reach a controlled
+    // input. A regression that re-introduces the textarea path would
+    // make the matched marker (and any future content) selectable +
+    // copyable.
+    expect(screen.queryByRole("textbox")).toBeNull();
+  });
+
+  it("renders the textarea normally when fileContent is regular content", () => {
+    render(
+      <FileEditor
+        selectedFile="config.yaml"
+        fileContent="name: openclaw\n"
+        editContent="name: openclaw\n"
+        setEditContent={vi.fn()}
+        loadingFile={false}
+        saving={false}
+        success={null}
+        root="/configs"
+        onSave={vi.fn()}
+        onDownload={vi.fn()}
+      />,
+    );
+    expect(screen.getByRole("textbox")).toBeTruthy();
+    expect(screen.queryByRole("region", { name: /file content denied/i }))
+      .toBeNull();
+  });
+
+  it("/agent-home renders textarea READ-ONLY for non-denied content", () => {
+    // Phase 2b ships read + delete on /agent-home; write semantics
+    // are decided later. Until then, the canvas presents the editor
+    // as read-only so a user can't type into a buffer that the
+    // backend will refuse to PUT. Without this gate, the user would
+    // edit, hit Save, get a 501, and lose their context for why.
+    render(
+      <FileEditor
+        selectedFile=".openclaw/agent-card.json"
+        fileContent='{"name":"openclaw"}'
+        editContent='{"name":"openclaw"}'
+        setEditContent={vi.fn()}
+        loadingFile={false}
+        saving={false}
+        success={null}
+        root="/agent-home"
+        onSave={vi.fn()}
+        onDownload={vi.fn()}
+      />,
+    );
+    const textarea = screen.getByRole("textbox") as HTMLTextAreaElement;
+    expect(textarea.readOnly).toBe(true);
+  });
+
+  it("/configs renders textarea WRITABLE (regression guard for the read-only gate)", () => {
+    render(
+      <FileEditor
+        selectedFile="config.yaml"
+        fileContent="name: x\n"
+        editContent="name: x\n"
+        setEditContent={vi.fn()}
+        loadingFile={false}
+        saving={false}
+        success={null}
+        root="/configs"
+        onSave={vi.fn()}
+        onDownload={vi.fn()}
+      />,
+    );
+    const textarea = screen.getByRole("textbox") as HTMLTextAreaElement;
+    expect(textarea.readOnly).toBe(false);
+  });
+});
+
+describe("internal#425 Phase 3 — marker constant is the canonical string", () => {
+  // The marker string is part of the canvas <-> workspace-server
+  // contract. The workspace-server emits this exact body; the canvas
+  // detects it by exact-equality. A typo on either side would
+  // silently break detection — the canvas would render the literal
+  // string in the textarea instead of the placeholder. Pin the
+  // contract value here.
+  it("matches the contract value '<denied: secret-shape>'", () => {
+    expect(SECRET_SHAPE_DENIED_MARKER).toBe("<denied: secret-shape>");
+  });
+});