CyberCoveLLC/Triple-C
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases 35 Wiki Activity

Turn the Files tab into a real file manager

Browse Source 
Rename, an in-app viewer for text and images, host-to-container drag and
drop, New folder, keyboard operation — plus the pre-existing bugs the new
surface would otherwise have been built on top of.

New Tauri commands (file_commands.rs, registered in lib.rs):

* rename_container_path — `mv -n -- <from> <parent>/<name>` through
  exec_oneshot_as, so the *exit code* is checked. exec_oneshot discards the
  status and interleaves stderr into stdout, which would have made a
  permission failure look like a success. `mv -n` on its own is not enough
  either: GNU coreutils makes its refusal to clobber silent and exits 0, so
  an explicit `test -e` on the destination is what turns a name clash into
  an error the user sees. `mv`'s own words are surfaced, since renames
  outside /workspace legitimately fail on permissions. The new name is
  validated in Rust (no `/`, no NUL, not "." / ".." / empty, ≤255 bytes) —
  it is user text going into argv, and a name with a separator would be a
  move rather than a rename.
* read_container_file — exact bytes via Docker's archive endpoint, returned
  as base64. Deliberately not exec_oneshot, which runs every chunk through
  String::from_utf8_lossy and merges stderr, so it would corrupt any
  non-UTF-8 file and could splice diagnostics into content. Base64 rather
  than Vec<u8> because Tauri serialises a byte vec as a JSON number array.
  Capped and truncation-reporting; the caller picks the cap (images get 5
  MiB against text's 1 MiB, being the kind that blows a text-sized budget)
  and Rust clamps it to 8 MiB regardless.
* create_container_directory — `mkdir` without -p, so a clash is an error
  rather than a silent success. Named for its siblings rather than the bare
  `create_directory` in the brief.

The tar-extraction half of download_container_file is now the shared
fetch_container_file() both commands use, and it abandons the transfer once
a capped read has what it needs.

Frontend:

* Single click selects, double click opens. Directory navigation moved onto
  double click too — a single click used to navigate, which made it
  impossible to select a directory in order to rename it. Rows are now
  focusable and the table is a real `grid`: Enter opens, F2 renames, arrows
  walk the rows. No outline suppression; the global :focus-visible ring is
  what shows focus.
* FileViewerModal (built on ui/Modal, the only correct dialog) renders text
  in a <pre> and images from a revocable blob: URL. tauri.conf.json's
  img-src had neither `data:` nor `blob:`, so an in-app image was blocked by
  CSP; `blob:` is added — revocable, and no megabytes of base64 in the DOM.
  The asset protocol stays disabled. Anything else gets a "Save to host"
  state instead of a broken preview, decided by extension and then by
  sniffing the bytes for NUL.
* Host drag-and-drop uses Tauri's native onDragDropEvent, mirroring
  TerminalView: HTML5 ondrop carries no paths and is blocked in the webview
  on Windows by dragDropEnabled, which the terminal needs. The listener is
  window-wide, so it routes by hit-testing the payload position (physical
  pixels, hence the devicePixelRatio divide) against the pane's rect — a
  hidden pane has a zero-size rect and never matches, which is what keeps
  this and the terminal's listener apart. enter/over/leave drive a drop
  highlight.
* Per-row Download is now "Save to host…"; directories no longer offer it.

Pre-existing bugs fixed:

* Uploaded files landed root:root with a 1970 mtime. tar::Header::new_gnu()
  zeroes uid/gid/mtime and Docker honours the header verbatim, so uploads
  were not writable by `claude`. All four single-file tar builds now go
  through build_single_file_tar() with the container user's ids, read from
  the container because entrypoint.sh remaps them to the host user on Unix
  and deliberately does not on Windows.
* Symlinked directories could not be opened: `find -printf '%y'` reports `l`.
  The listing now prints `%Y` as well, so is_directory dereferences and a
  new is_symlink carries what `%y` used to say. The row labels the link.
* upload_file_to_container had no size cap and did a synchronous fs::read on
  an async worker. Now 256 MiB (matching the terminal drop path) with the
  read and tar build in spawn_blocking, and the host mtime preserved.
* A directory passed to upload reached fs::read and produced an opaque "Is a
  directory". Rejected with an explanation instead — recursive upload is a
  larger feature than this panel needs.
* download_container_file wrote the *first tar entry*, so downloading a
  directory silently produced a garbage file. Non-regular entries are now an
  explicit error.

Tests: 46 new (33 frontend across FilesTab, useFileManager and filePreview;
12 Rust covering the find-output parser and the rename validator, neither of
which had any). 405 frontend / 297 Rust, both green.

No drag-out dependency was added — tauri-plugin-drag is not introduced and
OS drag-out is not attempted; that stays deferred, with "Save to host…" as
the way files leave the container.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01GBq2rGum6GX7xXgsas1fDc
This commit is contained in:
shadow-test
2026-08-23 08:30:48 -07:00
co-authored by Claude Opus 5
parent 75cace7dde
commit 15e05e2197
13 changed files with 1916 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/src/hooks/useFileManager.test.ts
+211
View File
@@ -0,0 +1,211 @@
import { describe, it, expect, vi, beforeEach } from "vitest";
import { act, renderHook, waitFor } from "@testing-library/react";
import { useFileManager } from "./useFileManager";
import type { FileEntry } from "../lib/types";
const listContainerFiles = vi.fn();
const downloadContainerFile = vi.fn();
const uploadFileToContainer = vi.fn();
const renameContainerPath = vi.fn();
const createContainerDirectory = vi.fn();
vi.mock("../lib/tauri-commands", () => ({
listContainerFiles: (p: string, path: string) => listContainerFiles(p, path),
downloadContainerFile: (p: string, c: string, h: string) => downloadContainerFile(p, c, h),
uploadFileToContainer: (p: string, h: string, d: string) => uploadFileToContainer(p, h, d),
renameContainerPath: (p: string, f: string, t: string) => renameContainerPath(p, f, t),
createContainerDirectory: (p: string, parent: string, n: string) =>
createContainerDirectory(p, parent, n),
readContainerFile: vi.fn(),
}));
const save = vi.fn();
const openDialog = vi.fn();
vi.mock("@tauri-apps/plugin-dialog", () => ({
save: (opts: unknown) => save(opts),
open: (opts: unknown) => openDialog(opts),
}));
const file = (name: string, extra: Partial<FileEntry> = {}): FileEntry => ({
name,
path: `/workspace/${name}`,
is_directory: false,
is_symlink: false,
size: 10,
modified: "2024-01-01 00:00:00",
permissions: "644",
...extra,
});
beforeEach(() => {
vi.clearAllMocks();
listContainerFiles.mockResolvedValue([file("a.txt")]);
});
describe("useFileManager navigation", () => {
it("lists a directory and remembers where it is", async () => {
const { result } = renderHook(() => useFileManager("p1"));
await act(async () => {
await result.current.navigate("/workspace/app");
});
expect(listContainerFiles).toHaveBeenCalledWith("p1", "/workspace/app");
expect(result.current.currentPath).toBe("/workspace/app");
expect(result.current.entries).toHaveLength(1);
});
it("surfaces a listing failure rather than showing a stale directory", async () => {
listContainerFiles.mockRejectedValueOnce("Permission denied");
const { result } = renderHook(() => useFileManager("p1"));
await act(async () => {
await result.current.navigate("/root");
});
expect(result.current.error).toContain("Permission denied");
expect(result.current.currentPath).toBe("/workspace");
});
it("goes up one level, and stops at the root", async () => {
const { result } = renderHook(() => useFileManager("p1"));
await act(async () => {
await result.current.navigate("/workspace/app/src");
});
await act(async () => {
result.current.goUp();
});
await waitFor(() => expect(result.current.currentPath).toBe("/workspace/app"));
await act(async () => {
await result.current.navigate("/");
});
listContainerFiles.mockClear();
await act(async () => {
result.current.goUp();
});
expect(listContainerFiles).not.toHaveBeenCalled();
});
});
describe("useFileManager uploads", () => {
it("uploads every dropped path into the current directory, then re-lists once", async () => {
const { result } = renderHook(() => useFileManager("p1"));
await act(async () => {
await result.current.navigate("/workspace/app");
});
listContainerFiles.mockClear();
await act(async () => {
await result.current.uploadPaths(["/host/a.png", "/host/b.png"]);
});
expect(uploadFileToContainer).toHaveBeenNthCalledWith(1, "p1", "/host/a.png", "/workspace/app");
expect(uploadFileToContainer).toHaveBeenNthCalledWith(2, "p1", "/host/b.png", "/workspace/app");
// One refresh for the batch, not one per file.
expect(listContainerFiles).toHaveBeenCalledTimes(1);
});
it("reports a failed upload but still lists whatever did land", async () => {
uploadFileToContainer.mockResolvedValueOnce(undefined);
uploadFileToContainer.mockRejectedValueOnce("File too large to upload (900 MB; limit 256 MB)");
const { result } = renderHook(() => useFileManager("p1"));
await act(async () => {
await result.current.uploadPaths(["/host/ok.txt", "/host/huge.bin"]);
});
expect(result.current.error).toContain("too large");
expect(listContainerFiles).toHaveBeenCalled();
});
it("does nothing when the file picker is cancelled", async () => {
openDialog.mockResolvedValue(null);
const { result } = renderHook(() => useFileManager("p1"));
await act(async () => {
await result.current.uploadFile();
});
expect(uploadFileToContainer).not.toHaveBeenCalled();
});
});
describe("useFileManager rename and mkdir", () => {
it("sends the bare new name, never a path, and re-lists on success", async () => {
renameContainerPath.mockResolvedValue("/workspace/renamed.txt");
const { result } = renderHook(() => useFileManager("p1"));
await act(async () => {
await result.current.navigate("/workspace");
});
listContainerFiles.mockClear();
let ok: boolean | undefined;
await act(async () => {
ok = await result.current.renameEntry(file("a.txt"), " renamed.txt ");
});
expect(ok).toBe(true);
expect(renameContainerPath).toHaveBeenCalledWith("p1", "/workspace/a.txt", "renamed.txt");
expect(listContainerFiles).toHaveBeenCalledTimes(1);
});
it("keeps the editor open and shows what the container said when a rename fails", async () => {
// Renames outside /workspace legitimately fail; the user needs mv's words.
renameContainerPath.mockRejectedValue("mv: cannot move '/etc/hosts': Permission denied");
const { result } = renderHook(() => useFileManager("p1"));
let ok: boolean | undefined;
await act(async () => {
ok = await result.current.renameEntry(file("hosts"), "hosts.bak");
});
expect(ok).toBe(false);
expect(result.current.error).toContain("Permission denied");
});
it("treats an unchanged name as a no-op rather than a round trip", async () => {
const { result } = renderHook(() => useFileManager("p1"));
await act(async () => {
await result.current.renameEntry(file("a.txt"), "a.txt");
});
expect(renameContainerPath).not.toHaveBeenCalled();
});
it("creates a folder under the current directory", async () => {
createContainerDirectory.mockResolvedValue("/workspace/app/new");
const { result } = renderHook(() => useFileManager("p1"));
await act(async () => {
await result.current.navigate("/workspace/app");
});
await act(async () => {
await result.current.createFolder(" new ");
});
expect(createContainerDirectory).toHaveBeenCalledWith("p1", "/workspace/app", "new");
});
it("surfaces a clash instead of silently doing nothing", async () => {
createContainerDirectory.mockRejectedValue("mkdir: cannot create directory 'src': File exists");
const { result } = renderHook(() => useFileManager("p1"));
let ok: boolean | undefined;
await act(async () => {
ok = await result.current.createFolder("src");
});
expect(ok).toBe(false);
expect(result.current.error).toContain("File exists");
});
});
describe("useFileManager save to host", () => {
it("writes to the path the user picked", async () => {
save.mockResolvedValue("/host/Downloads/a.txt");
const { result } = renderHook(() => useFileManager("p1"));
await act(async () => {
await result.current.downloadFile(file("a.txt"));
});
expect(downloadContainerFile).toHaveBeenCalledWith(
"p1",
"/workspace/a.txt",
"/host/Downloads/a.txt",
);
});
it("reports a refused download — a directory is no longer written as garbage", async () => {
save.mockResolvedValue("/host/Downloads/src");
downloadContainerFile.mockRejectedValue("/workspace/src is a folder — download its files individually");
const { result } = renderHook(() => useFileManager("p1"));
await act(async () => {
await result.current.downloadFile(file("src", { is_directory: true }));
});
expect(result.current.error).toContain("is a folder");
});
});
app/src/hooks/useFileManager.ts
+81 -4
View File
@@ -8,6 +8,8 @@ export function useFileManager(projectId: string) {
const [entries, setEntries] = useState<FileEntry[]>([]);
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
/** Transient "uploading 3 files…" style note, shown beside the breadcrumb. */
const [busy, setBusy] = useState<string | null>(null);
const navigate = useCallback(
async (path: string) => {
@@ -36,11 +38,13 @@ export function useFileManager(projectId: string) {
navigate(currentPath);
}, [currentPath, navigate]);
/** Copy an entry out to a host path the user picks. */
const downloadFile = useCallback(
async (entry: FileEntry) => {
try {
const hostPath = await save({ defaultPath: entry.name });
if (!hostPath) return;
setError(null);
await commands.downloadContainerFile(projectId, entry.path, hostPath);
} catch (e) {
setError(String(e));
@@ -49,26 +53,99 @@ export function useFileManager(projectId: string) {
[projectId],
);
/**
* Copy host files into the current directory. Shared by the Upload button and
* the native drag-drop listener, so a dropped file and a picked one take the
* same path — including the one refresh at the end rather than one per file.
*/
const uploadPaths = useCallback(
async (hostPaths: string[]) => {
if (hostPaths.length === 0) return;
setError(null);
setBusy(`Uploading ${hostPaths.length} item${hostPaths.length > 1 ? "s" : ""}…`);
const failures: string[] = [];
try {
for (const hostPath of hostPaths) {
try {
await commands.uploadFileToContainer(projectId, hostPath, currentPath);
} catch (e) {
failures.push(String(e));
}
}
} finally {
setBusy(null);
}
// Re-list first: `navigate` clears the error, so reporting before it
// would wipe the very message the user needs.
await navigate(currentPath);
if (failures.length > 0) setError(failures.join(" · "));
},
[projectId, currentPath, navigate],
);
const uploadFile = useCallback(async () => {
try {
const selected = await openDialog({ multiple: false, directory: false });
const selected = await openDialog({ multiple: true, directory: false });
if (!selected) return;
await commands.uploadFileToContainer(projectId, selected as string, currentPath);
await navigate(currentPath);
await uploadPaths(Array.isArray(selected) ? selected : [selected as string]);
} catch (e) {
setError(String(e));
}
}, [projectId, currentPath, navigate]);
}, [uploadPaths]);
/**
* Rename in place. `newName` is a bare name — Rust rejects anything with a
* `/` in it, so this can never turn into a move. Resolves true on success so
* the caller knows whether to leave edit mode.
*/
const renameEntry = useCallback(
async (entry: FileEntry, newName: string) => {
const trimmed = newName.trim();
if (!trimmed || trimmed === entry.name) return true;
try {
setError(null);
await commands.renameContainerPath(projectId, entry.path, trimmed);
await navigate(currentPath);
return true;
} catch (e) {
setError(String(e));
return false;
}
},
[projectId, currentPath, navigate],
);
const createFolder = useCallback(
async (name: string) => {
const trimmed = name.trim();
if (!trimmed) return true;
try {
setError(null);
await commands.createContainerDirectory(projectId, currentPath, trimmed);
await navigate(currentPath);
return true;
} catch (e) {
setError(String(e));
return false;
}
},
[projectId, currentPath, navigate],
);
return {
currentPath,
entries,
loading,
error,
busy,
setError,
navigate,
goUp,
refresh,
downloadFile,
uploadFile,
uploadPaths,
renameEntry,
createFolder,
};
}