Richard ZinkandClaude Opus 5.5
c850586a81
- Terminals and file managers as tabs of a chat; chat terminals keep running on the server (no idle timeout) and re-attach from any device - "Just chat" in New session and a built-in chat mode with a lean prompt and only web tools; custom modes with kind (coding/conversation), read-only and tool picker - Mode selector as a dropdown - The chat shows running compactions (automatic: tokens and share of the limit) and labels summaries - Docker image builds and serves the terminal client binaries again - Fix: atomic session updates; background title/usage writes no longer undo each other (auto compaction triggered one turn late) Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
501 lines
20 KiB
TypeScript
501 lines
20 KiB
TypeScript
import { Icon } from "./Icon";
|
||
import { lazy, Suspense, useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||
import { del, get, post, put } from "../api";
|
||
import { useFetch } from "../hooks";
|
||
import { fmtCompact, fmtDate, useT } from "../i18n";
|
||
import { Spinner } from "./Activity";
|
||
import { Diff } from "./Diff";
|
||
import { Markdown } from "./Markdown";
|
||
import { GitPanel, type GitStatus } from "./GitPanel";
|
||
import { FilePreview, previewKind, type PreviewKind } from "./FilePreview";
|
||
import { confirmDialog, promptDialog, toast } from "../dialogs";
|
||
import { navigate } from "../router";
|
||
|
||
const CodeEditor = lazy(() => import("./CodeEditor").then((m) => ({ default: m.CodeEditor })));
|
||
|
||
interface Entry {
|
||
name: string;
|
||
path: string;
|
||
is_dir: boolean;
|
||
size: number;
|
||
mtime?: number;
|
||
}
|
||
|
||
interface Listing {
|
||
path: string;
|
||
parent: string | null;
|
||
entries: Entry[];
|
||
repo: string | null;
|
||
}
|
||
|
||
interface OpenFile {
|
||
path: string;
|
||
content: string;
|
||
saved: string;
|
||
mtime?: number;
|
||
binary: boolean;
|
||
tooLarge?: boolean;
|
||
preview?: PreviewKind;
|
||
}
|
||
|
||
/** What the right pane shows. */
|
||
type Pane = { kind: "file"; file: OpenFile } | { kind: "diff"; title: string; diff: string } | { kind: "none" };
|
||
|
||
const IMAGE = /\.(png|jpe?g|gif|webp|bmp|svg)$/i;
|
||
const rawUrl = (p: string, download = false) => `/api/files/raw?path=${encodeURIComponent(p)}${download ? "&download=true" : ""}`;
|
||
const baseName = (p: string) => p.split("/").filter(Boolean).pop() ?? p;
|
||
const dirName = (p: string) => p.replace(/\/[^/]+\/?$/, "") || "/";
|
||
|
||
function icon(e: Entry) {
|
||
if (e.is_dir) return <Icon name="folder" className="ficon dir" />;
|
||
if (IMAGE.test(e.name)) return <Icon name="image" className="ficon" />;
|
||
if (/\.(wav|mp3|ogg|flac|m4a|xm|mod|s3m|it)$/i.test(e.name)) return <Icon name="music" className="ficon" />;
|
||
if (/\.(glb|gltf|stl|obj|step|stp|igs|iges)$/i.test(e.name)) return <Icon name="cube" className="ficon" />;
|
||
if (/\.(pdf|docx|pptx|xlsx|xls|ods)$/i.test(e.name)) return <Icon name="file-doc" className="ficon" />;
|
||
if (/\.(md|txt)$/i.test(e.name)) return <Icon name="file-text" className="ficon" />;
|
||
return <Icon name="file" className="ficon" />;
|
||
}
|
||
|
||
/** Embedded in a chat tab: own start folder, no page header, folder kept by the caller. */
|
||
export interface FilesEmbed {
|
||
startDir: string;
|
||
onDirChange?: (dir: string) => void;
|
||
}
|
||
|
||
export function Files({ onMenu, embed }: { onMenu?: () => void; embed?: FilesEmbed }) {
|
||
const t = useT();
|
||
const roots = useFetch<{ path: string; name: string }[]>("/fs/roots").data ?? [];
|
||
const [dir, setDir] = useState<string>(() => embed?.startDir ?? localStorage.getItem("codecraft.filesDir") ?? "");
|
||
const [listing, setListing] = useState<Listing>();
|
||
const [hidden, setHidden] = useState(false);
|
||
const [error, setError] = useState<string>();
|
||
const [pane, setPane] = useState<Pane>({ kind: "none" });
|
||
const [tab, setTab] = useState<"files" | "git">("files");
|
||
const [git, setGit] = useState<GitStatus>();
|
||
const [search, setSearch] = useState("");
|
||
const [hits, setHits] = useState<{ path: string; is_dir: boolean }[]>();
|
||
const [preview, setPreview] = useState(false);
|
||
const [dragOver, setDragOver] = useState(false);
|
||
const [mobileEditor, setMobileEditor] = useState(false);
|
||
const uploadRef = useRef<HTMLInputElement>(null);
|
||
|
||
const load = useCallback(
|
||
async (path: string) => {
|
||
try {
|
||
const l = await get<Listing>(`/files/list?path=${encodeURIComponent(path)}&hidden=${hidden}`);
|
||
setListing(l);
|
||
setDir(l.path);
|
||
if (embed) embed.onDirChange?.(l.path);
|
||
else localStorage.setItem("codecraft.filesDir", l.path);
|
||
setError(undefined);
|
||
} catch (e: any) {
|
||
setError(e.message);
|
||
if (roots[0] && path !== roots[0].path) void load(roots[0].path);
|
||
}
|
||
},
|
||
[hidden, roots],
|
||
);
|
||
|
||
useEffect(() => {
|
||
if (roots.length) void load(dir || roots[0].path);
|
||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||
}, [roots.length, hidden]);
|
||
|
||
const refreshGit = useCallback(async () => {
|
||
if (!listing?.repo) return setGit(undefined);
|
||
try {
|
||
setGit(await post<GitStatus>("/git", { path: listing.repo, action: "status" }));
|
||
} catch {
|
||
setGit(undefined);
|
||
}
|
||
}, [listing?.repo]);
|
||
useEffect(() => void refreshGit(), [refreshGit]);
|
||
|
||
// Git state per file name in the current directory.
|
||
const gitMarks = useMemo(() => {
|
||
const m = new Map<string, string>();
|
||
if (!git || !listing) return m;
|
||
for (const f of git.files) {
|
||
const abs = `${git.repo}/${f.path}`;
|
||
const code = f.index === "?" ? "U" : (f.index.trim() || f.worktree.trim());
|
||
// Mark the file itself and every parent folder inside the listing.
|
||
if (dirName(abs) === listing.path) m.set(abs, code);
|
||
for (const e of listing.entries) if (e.is_dir && abs.startsWith(e.path + "/")) m.set(e.path, "•");
|
||
}
|
||
return m;
|
||
}, [git, listing]);
|
||
|
||
const dirty = pane.kind === "file" && pane.file.content !== pane.file.saved;
|
||
|
||
const confirmDiscard = async () => !dirty || (await confirmDialog({ message: t("files.discardChanges"), danger: true, confirmLabel: t("files.discard") }));
|
||
|
||
const openFile = async (path: string) => {
|
||
if (!(await confirmDiscard())) return;
|
||
const kind = previewKind(path);
|
||
// Previewable files (except SVG, which can also be edited) are not loaded as text.
|
||
if (kind && !/\.svg$/i.test(path)) {
|
||
setPane({ kind: "file", file: { path, content: "", saved: "", binary: true, preview: kind } });
|
||
setMobileEditor(true);
|
||
return;
|
||
}
|
||
try {
|
||
const r = await get<{ content?: string; binary: boolean; mtime?: number; too_large?: boolean }>(`/files/read?path=${encodeURIComponent(path)}`);
|
||
setPane({ kind: "file", file: { path, content: r.content ?? "", saved: r.content ?? "", mtime: r.mtime, binary: r.binary, tooLarge: r.too_large } });
|
||
setPreview(/\.(md|svg)$/i.test(path));
|
||
setMobileEditor(true);
|
||
} catch (e: any) {
|
||
toast(e.message);
|
||
}
|
||
};
|
||
|
||
// "Edit file" links from other pages (e.g. automations) open the file directly.
|
||
useEffect(() => {
|
||
const target = embed ? null : sessionStorage.getItem("codecraft.openFile");
|
||
if (!target) return;
|
||
sessionStorage.removeItem("codecraft.openFile");
|
||
setDir(target.slice(0, target.lastIndexOf("/")) || "/");
|
||
void openFile(target);
|
||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||
}, []);
|
||
|
||
const save = useCallback(
|
||
async (force = false) => {
|
||
if (pane.kind !== "file") return;
|
||
const f = pane.file;
|
||
try {
|
||
const r = await put<{ mtime: number }>("/files/write", { path: f.path, content: f.content, expected_mtime: f.mtime, force });
|
||
setPane({ kind: "file", file: { ...f, saved: f.content, mtime: r.mtime } });
|
||
void refreshGit();
|
||
} catch (e: any) {
|
||
if (e.status === 409 && (await confirmDialog({ message: t("files.conflict"), danger: true, confirmLabel: t("files.overwrite") }))) return save(true);
|
||
toast(e.message);
|
||
}
|
||
},
|
||
[pane, refreshGit, t],
|
||
);
|
||
|
||
const act = async (fn: () => Promise<unknown>) => {
|
||
try {
|
||
await fn();
|
||
if (listing) await load(listing.path);
|
||
void refreshGit();
|
||
} catch (e: any) {
|
||
toast(e.message);
|
||
}
|
||
};
|
||
|
||
const newEntry = async (isDir: boolean) => {
|
||
const name = await promptDialog({ message: isDir ? t("files.newFolderName") : t("files.newFileName") });
|
||
if (!name || !listing) return;
|
||
const path = `${listing.path}/${name}`;
|
||
void act(async () => {
|
||
await post("/files/create", { path, dir: isDir });
|
||
if (!isDir) await openFile(path);
|
||
});
|
||
};
|
||
|
||
/** New chat with the folder as working directory (default model and mode). */
|
||
const chatHere = async (e: Entry) => {
|
||
try {
|
||
const s = await post<{ id: string }>("/sessions", { cwd: e.path });
|
||
navigate(`/s/${s.id}`);
|
||
} catch (err) {
|
||
toast(err);
|
||
}
|
||
};
|
||
|
||
const rename = async (e: Entry) => {
|
||
const name = await promptDialog({ message: t("files.renameTo"), defaultValue: e.name });
|
||
if (name && name !== e.name) void act(() => post("/files/move", { from: e.path, to: `${dirName(e.path)}/${name}` }));
|
||
};
|
||
|
||
const duplicate = async (e: Entry) => {
|
||
const name = await promptDialog({ message: t("files.copyTo"), defaultValue: `${e.name.replace(/(\.[^.]*)?$/, " copy$1")}` });
|
||
if (name) void act(() => post("/files/move", { from: e.path, to: `${dirName(e.path)}/${name}`, copy: true }));
|
||
};
|
||
|
||
const remove = async (e: Entry) => {
|
||
if (await confirmDialog({ message: t(e.is_dir ? "files.deleteFolderConfirm" : "files.deleteConfirm", { name: e.name }), danger: true, confirmLabel: t("common.delete") })) {
|
||
void act(() => del(`/files/delete?path=${encodeURIComponent(e.path)}`));
|
||
if (pane.kind === "file" && pane.file.path.startsWith(e.path)) setPane({ kind: "none" });
|
||
}
|
||
};
|
||
|
||
const upload = async (files: FileList | File[]) => {
|
||
if (!listing) return;
|
||
for (const f of [...files]) {
|
||
const res = await fetch(`/api/files/upload?path=${encodeURIComponent(`${listing.path}/${f.name}`)}`, { method: "PUT", body: f, credentials: "same-origin" });
|
||
if (!res.ok) toast(`${f.name}: HTTP ${res.status}${res.status === 413 ? " – too large for the reverse proxy" : ""}`);
|
||
}
|
||
await load(listing.path);
|
||
void refreshGit();
|
||
};
|
||
|
||
useEffect(() => {
|
||
if (!search.trim() || !listing) return setHits(undefined);
|
||
const h = setTimeout(() => {
|
||
get<{ path: string; is_dir: boolean }[]>(`/files/search?path=${encodeURIComponent(listing.path)}&q=${encodeURIComponent(search)}`).then(setHits).catch(() => setHits([]));
|
||
}, 250);
|
||
return () => clearTimeout(h);
|
||
}, [search, listing]);
|
||
|
||
// Warn before leaving with unsaved changes.
|
||
useEffect(() => {
|
||
const h = (e: BeforeUnloadEvent) => dirty && e.preventDefault();
|
||
window.addEventListener("beforeunload", h);
|
||
return () => window.removeEventListener("beforeunload", h);
|
||
}, [dirty]);
|
||
|
||
const root = roots.find((r) => listing?.path.startsWith(r.path));
|
||
const crumbs = listing && root ? [root.path, ...listing.path.slice(root.path.length).split("/").filter(Boolean)] : [];
|
||
|
||
const list = (
|
||
<div
|
||
className={`files-list ${dragOver ? "drag" : ""}`}
|
||
onDragOver={(e) => (e.preventDefault(), setDragOver(true))}
|
||
onDragLeave={() => setDragOver(false)}
|
||
onDrop={(e) => {
|
||
e.preventDefault();
|
||
setDragOver(false);
|
||
void upload(e.dataTransfer.files);
|
||
}}
|
||
>
|
||
<div className="files-toolbar">
|
||
{roots.length > 1 && (
|
||
<select value={root?.path ?? ""} onChange={(e) => { const v = e.target.value; void confirmDiscard().then((ok): unknown => ok && load(v)); }} aria-label={t("images.folder")}>
|
||
{roots.map((r) => (
|
||
<option key={r.path} value={r.path}>
|
||
{r.name}
|
||
</option>
|
||
))}
|
||
</select>
|
||
)}
|
||
<input className="files-search" placeholder={t("files.search")} value={search} onChange={(e) => setSearch(e.target.value)} />
|
||
<button className="small" title={t("files.newFile")} onClick={() => newEntry(false)}>
|
||
<Icon name="plus" className="tiny" /> <Icon name="file" />
|
||
</button>
|
||
<button className="small" title={t("files.newFolder")} onClick={() => newEntry(true)}>
|
||
<Icon name="plus" className="tiny" /> <Icon name="folder" />
|
||
</button>
|
||
<button className="small" title={t("files.upload")} onClick={() => uploadRef.current?.click()}>
|
||
<Icon name="upload" />
|
||
</button>
|
||
<input ref={uploadRef} type="file" multiple hidden onChange={(e) => e.target.files && upload(e.target.files)} />
|
||
<button className={`small ${hidden ? "active" : ""}`} title={t("files.showHidden")} onClick={() => setHidden(!hidden)}>
|
||
.*
|
||
</button>
|
||
</div>
|
||
<div className="crumbs">
|
||
<button
|
||
className="small ghost crumbs-up"
|
||
disabled={!listing?.parent}
|
||
onClick={() => listing?.parent && void confirmDiscard().then((ok): unknown => ok && load(listing.parent!))}
|
||
title={t("files.up")}
|
||
aria-label={t("files.up")}
|
||
>
|
||
<Icon name="folder-up" />
|
||
</button>
|
||
{crumbs.map((c, i) => {
|
||
const path = i === 0 ? c : `${crumbs[0]}/${crumbs.slice(1, i + 1).join("/")}`;
|
||
return (
|
||
<span key={path}>
|
||
{i > 0 && " / "}
|
||
<a href="#" onClick={(e) => (e.preventDefault(), load(path))}>
|
||
{i === 0 ? root?.name : c}
|
||
</a>
|
||
</span>
|
||
);
|
||
})}
|
||
</div>
|
||
{error && <div className="notice err">{error}</div>}
|
||
<div className="entries" role="list">
|
||
{hits ? (
|
||
hits.length === 0 ? (
|
||
<div className="empty">{t("files.noHits")}</div>
|
||
) : (
|
||
hits.map((h) => (
|
||
<button key={h.path} className="entry" onClick={() => (h.is_dir ? load(h.path) : openFile(h.path))}>
|
||
<Icon name={h.is_dir ? "folder" : "file"} className="ficon" />
|
||
<span className="name">{h.path.slice((listing?.path.length ?? 0) + 1)}</span>
|
||
</button>
|
||
))
|
||
)
|
||
) : (
|
||
<>
|
||
{listing?.parent && (
|
||
<button className="entry" onClick={() => load(listing.parent!)}>
|
||
<Icon name="folder-up" className="ficon" />
|
||
<span className="name">..</span>
|
||
</button>
|
||
)}
|
||
{listing?.entries.map((e) => {
|
||
const mark = gitMarks.get(e.path);
|
||
const active = pane.kind === "file" && pane.file.path === e.path;
|
||
return (
|
||
<div key={e.path} className={`entry ${active ? "active" : ""}`} role="listitem">
|
||
<button className="entry-main" onClick={() => (e.is_dir ? load(e.path) : openFile(e.path))}>
|
||
<span>{icon(e)}</span>
|
||
<span className="name">{e.name}</span>
|
||
{mark && <span className={`git-mark m-${mark === "•" ? "dot" : mark}`}>{mark === "•" ? <Icon name="dot" className="tiny" /> : mark}</span>}
|
||
{!e.is_dir && <span className="size">{fmtCompact(e.size)}B</span>}
|
||
</button>
|
||
<details className="entry-menu">
|
||
<summary aria-label={t("files.actions")}><Icon name="more" /></summary>
|
||
<div className="menu">
|
||
{e.is_dir && (
|
||
<button onClick={() => void chatHere(e)}>{t("files.chatHere")}</button>
|
||
)}
|
||
<button onClick={() => rename(e)}>{t("files.rename")}</button>
|
||
<button onClick={() => duplicate(e)}>{t("files.duplicate")}</button>
|
||
{!e.is_dir && (
|
||
<a className="button" href={rawUrl(e.path, true)}>
|
||
{t("files.download")}
|
||
</a>
|
||
)}
|
||
<button className="danger" onClick={() => remove(e)}>
|
||
{t("common.delete")}
|
||
</button>
|
||
</div>
|
||
</details>
|
||
</div>
|
||
);
|
||
})}
|
||
{listing?.entries.length === 0 && <div className="empty">{t("files.emptyFolder")}</div>}
|
||
</>
|
||
)}
|
||
</div>
|
||
<div className="drop-hint">{t("files.dropHint")}</div>
|
||
</div>
|
||
);
|
||
|
||
const right = (() => {
|
||
if (pane.kind === "diff") {
|
||
return (
|
||
<div className="editor-pane">
|
||
<div className="editor-bar">
|
||
<button className="ghost small mobile-only" onClick={() => setMobileEditor(false)}>
|
||
<Icon name="arrow-left" />
|
||
</button>
|
||
<b className="grow">{pane.title}</b>
|
||
</div>
|
||
<div className="pane-scroll">{pane.diff ? <Diff diff={pane.diff} /> : <div className="empty">{t("git.noDiff")}</div>}</div>
|
||
</div>
|
||
);
|
||
}
|
||
if (pane.kind === "none") return <div className="editor-pane empty">{t("files.selectFile")}</div>;
|
||
const f = pane.file;
|
||
const isImage = IMAGE.test(f.path);
|
||
const isMd = /\.md$/i.test(f.path);
|
||
return (
|
||
<div className="editor-pane">
|
||
<div className="editor-bar">
|
||
<button className="ghost small mobile-only" onClick={() => void confirmDiscard().then((ok): unknown => ok && setMobileEditor(false))}>
|
||
<Icon name="arrow-left" />
|
||
</button>
|
||
<b className="grow" title={f.path}>
|
||
{baseName(f.path)}
|
||
{dirty && <span className="dirty"> <Icon name="dot" className="tiny" /></span>}
|
||
</b>
|
||
{(isMd || isImage) && !f.preview && (
|
||
<button className="small" onClick={() => setPreview(!preview)}>
|
||
{preview ? t("files.edit") : t("files.preview")}
|
||
</button>
|
||
)}
|
||
<a className="button small" href={rawUrl(f.path, true)}>
|
||
<Icon name="download" />
|
||
</a>
|
||
{!f.binary && (
|
||
<button className="small primary" disabled={!dirty} onClick={() => save()}>
|
||
{t("common.save")}
|
||
</button>
|
||
)}
|
||
</div>
|
||
{f.preview ? (
|
||
<FilePreview path={f.path} kind={f.preview} />
|
||
) : isImage && preview ? (
|
||
<div className="pane-scroll image-preview">
|
||
<img src={rawUrl(f.path)} alt={baseName(f.path)} />
|
||
</div>
|
||
) : f.binary ? (
|
||
<div className="empty">{f.tooLarge ? t("files.tooLarge") : t("files.binary")}</div>
|
||
) : isMd && preview ? (
|
||
<div className="pane-scroll" style={{ padding: 16 }}>
|
||
<Markdown text={f.content} />
|
||
</div>
|
||
) : (
|
||
<Suspense fallback={<div className="empty"><Spinner /></div>}>
|
||
<CodeEditor
|
||
key={f.path}
|
||
value={f.content}
|
||
filename={baseName(f.path)}
|
||
onChange={(v) => setPane((p) => (p.kind === "file" ? { kind: "file", file: { ...p.file, content: v } } : p))}
|
||
onSave={() => void save()}
|
||
/>
|
||
</Suspense>
|
||
)}
|
||
</div>
|
||
);
|
||
})();
|
||
|
||
return (
|
||
<>
|
||
<div className={embed ? "files-embed-bar" : "topbar"}>
|
||
{!embed && (
|
||
<button className="ghost menu-btn" onClick={onMenu} aria-label={t("nav.menu")}>
|
||
<Icon name="menu" />
|
||
</button>
|
||
)}
|
||
<div className="grow">
|
||
{!embed && <h1>{t("nav.files")}</h1>}
|
||
<div className="path">{listing?.path}</div>
|
||
</div>
|
||
{listing?.repo && (
|
||
<div className="mode-tabs" role="tablist">
|
||
<button className={tab === "files" ? "active" : ""} onClick={() => setTab("files")}>
|
||
{t("files.tabFiles")}
|
||
</button>
|
||
<button className={tab === "git" ? "active" : ""} onClick={() => setTab("git")}>
|
||
Git{git && git.files.length > 0 ? ` (${git.files.length})` : ""}
|
||
</button>
|
||
</div>
|
||
)}
|
||
</div>
|
||
<div className={`files-layout ${mobileEditor ? "show-editor" : ""}`}>
|
||
<div className="files-side">
|
||
{tab === "git" && listing?.repo ? (
|
||
<GitPanel
|
||
repo={listing.repo}
|
||
status={git}
|
||
refresh={refreshGit}
|
||
showDiff={(title, diff) => (setPane({ kind: "diff", title, diff }), setMobileEditor(true))}
|
||
openFile={openFile}
|
||
/>
|
||
) : (
|
||
list
|
||
)}
|
||
{!listing?.repo && listing && (
|
||
<div className="git-init">
|
||
<button className="small" onClick={() => act(() => post("/git", { path: listing.path, action: "init" }))}>
|
||
{t("git.init")}
|
||
</button>
|
||
<button
|
||
className="small"
|
||
onClick={async () => {
|
||
const url = await promptDialog({ message: t("git.cloneUrl"), placeholder: "https://…/repo.git" });
|
||
if (!url) return;
|
||
const name = await promptDialog({ message: t("git.cloneFolder"), defaultValue: baseName(url).replace(/\.git$/, "") });
|
||
if (name) void act(() => post("/git", { path: `${listing.path}/${name}`, action: "clone", url }));
|
||
}}
|
||
>
|
||
{t("git.clone")}
|
||
</button>
|
||
</div>
|
||
)}
|
||
</div>
|
||
<div className="files-main">{right}</div>
|
||
</div>
|
||
{pane.kind === "file" && pane.file.mtime && <div className="files-status">{fmtDate(pane.file.mtime)}</div>}
|
||
</>
|
||
);
|
||
}
|