the universal sandbox runtime for agents and humans.
pocketenv.io
sandbox
openclaw
agent
claude-code
vercel-sandbox
deno-sandbox
cloudflare-sandbox
atproto
sprites
daytona
Use react-hook-form and zod in add modals
Add @hookform/resolvers and zod-based validation to
AddFile/AddSecret/AddVariable/AddVolume
modals (useForm, zodResolver, register, handleSubmit, reset, show
errors). Refactor
useAddFile/useAddSecret/useAddVariable/useAddVolume hooks to accept a
payload object
(sandboxId, name/path, value/content) for mutationFn. Implement
DeleteSandboxModal
delete handler and update confirmation copy. Update dependencies (add
@hookform/resolvers).
+256
-89
+5
apps/web/bun.lock
+5
apps/web/bun.lock
···
6
6
"name": "pocketenv",
7
7
"dependencies": {
8
8
"@cloudflare/sandbox": "^0.7.4",
9
+
"@hookform/resolvers": "^5.2.2",
9
10
"@iconify/json": "^2.2.438",
10
11
"@iconify/tailwind4": "^1.2.1",
11
12
"@paralleldrive/cuid2": "^3.3.0",
···
174
175
175
176
"@floating-ui/utils": ["@floating-ui/utils@0.2.10", "", {}, "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ=="],
176
177
178
+
"@hookform/resolvers": ["@hookform/resolvers@5.2.2", "", { "dependencies": { "@standard-schema/utils": "^0.3.0" }, "peerDependencies": { "react-hook-form": "^7.55.0" } }, "sha512-A/IxlMLShx3KjV/HeTcTfaMxdwy690+L/ZADoeaTltLx+CVuzkeVIPuybK3jrRfw7YZnmdKsVVHAlEPIAEUNlA=="],
179
+
177
180
"@humanfs/core": ["@humanfs/core@0.19.1", "", {}, "sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA=="],
178
181
179
182
"@humanfs/node": ["@humanfs/node@0.16.7", "", { "dependencies": { "@humanfs/core": "^0.19.1", "@humanwhocodes/retry": "^0.4.0" } }, "sha512-/zUx+yOsIrG4Y43Eh2peDeKCxlRt/gET6aHfaKpuq267qXdYDFViVHfMaLyygZOnl0kGWxFIgsBy8QFuTLUXEQ=="],
···
259
262
"@rollup/rollup-win32-x64-msvc": ["@rollup/rollup-win32-x64-msvc@4.57.1", "", { "os": "win32", "cpu": "x64" }, "sha512-mxRFDdHIWRxg3UfIIAwCm6NzvxG0jDX/wBN6KsQFTvKFqqg9vTrWUE68qEjHt19A5wwx5X5aUi2zuZT7YR0jrA=="],
260
263
261
264
"@standard-schema/spec": ["@standard-schema/spec@1.1.0", "", {}, "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w=="],
265
+
266
+
"@standard-schema/utils": ["@standard-schema/utils@0.3.0", "", {}, "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g=="],
262
267
263
268
"@swc/core": ["@swc/core@1.15.11", "", { "dependencies": { "@swc/counter": "^0.1.3", "@swc/types": "^0.1.25" }, "optionalDependencies": { "@swc/core-darwin-arm64": "1.15.11", "@swc/core-darwin-x64": "1.15.11", "@swc/core-linux-arm-gnueabihf": "1.15.11", "@swc/core-linux-arm64-gnu": "1.15.11", "@swc/core-linux-arm64-musl": "1.15.11", "@swc/core-linux-x64-gnu": "1.15.11", "@swc/core-linux-x64-musl": "1.15.11", "@swc/core-win32-arm64-msvc": "1.15.11", "@swc/core-win32-ia32-msvc": "1.15.11", "@swc/core-win32-x64-msvc": "1.15.11" }, "peerDependencies": { "@swc/helpers": ">=0.5.17" }, "optionalPeers": ["@swc/helpers"] }, "sha512-iLmLTodbYxU39HhMPaMUooPwO/zqJWvsqkrXv1ZI38rMb048p6N7qtAtTp37sw9NzSrvH6oli8EdDygo09IZ/w=="],
264
269
+1
apps/web/package.json
+1
apps/web/package.json
+10
-6
apps/web/src/hooks/useFile.ts
+10
-6
apps/web/src/hooks/useFile.ts
···
1
1
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
2
2
import { addFile, deleteFile, getFiles } from "../api/file";
3
3
4
-
export const useAddFileMutation = (
5
-
sandboxId: string,
6
-
path: string,
7
-
content: string,
8
-
) => {
4
+
export const useAddFileMutation = () => {
9
5
const queryClient = useQueryClient();
10
6
return useMutation({
11
7
mutationKey: ["addFile"],
12
-
mutationFn: async () => addFile(sandboxId, path, content),
8
+
mutationFn: async ({
9
+
sandboxId,
10
+
path,
11
+
content,
12
+
}: {
13
+
sandboxId: string;
14
+
path: string;
15
+
content: string;
16
+
}) => addFile(sandboxId, path, content),
13
17
onSuccess: () => {
14
18
queryClient.invalidateQueries({ queryKey: ["files"] });
15
19
},
+10
-6
apps/web/src/hooks/useSecret.ts
+10
-6
apps/web/src/hooks/useSecret.ts
···
1
1
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
2
2
import { addSecret, deleteSecret, getSecrets } from "../api/secret";
3
3
4
-
export const useAddSecretMutation = (
5
-
sandboxId: string,
6
-
name: string,
7
-
value: string,
8
-
) => {
4
+
export const useAddSecretMutation = () => {
9
5
const queryClient = useQueryClient();
10
6
return useMutation({
11
7
mutationKey: ["addSecret"],
12
-
mutationFn: async () => addSecret(sandboxId, name, value),
8
+
mutationFn: async ({
9
+
sandboxId,
10
+
name,
11
+
value,
12
+
}: {
13
+
sandboxId: string;
14
+
name: string;
15
+
value: string;
16
+
}) => addSecret(sandboxId, name, value),
13
17
onSuccess: () => {
14
18
queryClient.invalidateQueries({ queryKey: ["secrets"] });
15
19
},
+10
-6
apps/web/src/hooks/useVariable.ts
+10
-6
apps/web/src/hooks/useVariable.ts
···
1
1
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
2
2
import { addVariable, deleteVariable, getVariables } from "../api/variable";
3
3
4
-
export const useAddVariableMutation = (
5
-
sandboxId: string,
6
-
name: string,
7
-
value: string,
8
-
) => {
4
+
export const useAddVariableMutation = () => {
9
5
const queryClient = useQueryClient();
10
6
return useMutation({
11
7
mutationKey: ["addVariable"],
12
-
mutationFn: async () => addVariable(sandboxId, name, value),
8
+
mutationFn: async ({
9
+
sandboxId,
10
+
name,
11
+
value,
12
+
}: {
13
+
sandboxId: string;
14
+
name: string;
15
+
value: string;
16
+
}) => addVariable(sandboxId, name, value),
13
17
onSuccess: () => {
14
18
queryClient.invalidateQueries({ queryKey: ["variables"] });
15
19
},
+10
-6
apps/web/src/hooks/useVolume.ts
+10
-6
apps/web/src/hooks/useVolume.ts
···
1
1
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
2
2
import { addVolume, deleteVolume, getVolumes } from "../api/volume";
3
3
4
-
export const useAddVolumeMutation = (
5
-
sandboxId: string,
6
-
name: string,
7
-
path: string,
8
-
) => {
4
+
export const useAddVolumeMutation = () => {
9
5
const queryClient = useQueryClient();
10
6
return useMutation({
11
-
mutationFn: async () => addVolume(sandboxId, name, path),
7
+
mutationFn: async ({
8
+
sandboxId,
9
+
name,
10
+
path,
11
+
}: {
12
+
sandboxId: string;
13
+
name: string;
14
+
path: string;
15
+
}) => addVolume(sandboxId, name, path),
12
16
onSuccess: () => {
13
17
queryClient.invalidateQueries({ queryKey: ["volumes"] });
14
18
},