the universal sandbox runtime for agents and humans.
pocketenv.io
sandbox
openclaw
agent
claude-code
vercel-sandbox
deno-sandbox
cloudflare-sandbox
atproto
sprites
daytona
Add sandbox base and collapsible sidebar
Order actor sandboxes by creation time and include the base field in
API responses. Update UI to support a collapsible sidebar (72px when
collapsed): hide logo, center toggle, and adjust layout margins/classes.
Add a "Base" column to Projects and Sandbox views, format createdAt with
dayjs, and wire start/stop sandbox actions with loading state and query
invalidation. Add baseSandbox to the Sandbox type.
+106
-45
+2
-1
apps/api/src/xrpc/io/pocketenv/actor/getActorSandboxes.ts
+2
-1
apps/api/src/xrpc/io/pocketenv/actor/getActorSandboxes.ts
···
56
56
eq(schema.users.handle, params.did),
57
57
),
58
58
)
59
-
.orderBy(desc(schema.sandboxes.installs))
59
+
.orderBy(desc(schema.sandboxes.createdAt))
60
60
.limit(params.limit ?? 30)
61
61
.offset(params.offset ?? 0)
62
62
.execute()
···
89
89
sandboxes: sandboxes.map((sandbox) => ({
90
90
id: sandbox.id,
91
91
name: sandbox.name,
92
+
base: sandbox.base,
92
93
displayName: sandbox.displayName,
93
94
description: sandbox.description!,
94
95
logo: sandbox.logo!,
+2
-2
apps/web/src/layouts/Main.tsx
+2
-2
apps/web/src/layouts/Main.tsx
···
37
37
<div className="flex min-h-screen bg-base-100">
38
38
<Sidebar />
39
39
<div
40
-
className={`flex flex-col flex-1 bg-base-100 transition-all duration-300 ease-in-out ${
41
-
isCollapsed ? "sm:ml-16" : "sm:ml-64"
40
+
className={`flex flex-col flex-1 bg-base-100 ${
41
+
isCollapsed ? "sm:ml-[72px]" : "sm:ml-64"
42
42
}`}
43
43
>
44
44
<Navbar title={title} />
+54
-10
apps/web/src/pages/projects/Project/Project.tsx
+54
-10
apps/web/src/pages/projects/Project/Project.tsx
···
1
+
import { useNavigate } from "@tanstack/react-router";
1
2
import type { Sandbox } from "../../../types/sandbox";
2
3
import _ from "lodash";
4
+
import dayjs from "dayjs";
5
+
import { useState } from "react";
6
+
import {
7
+
useStartSandboxMutation,
8
+
useStopSandboxMutation,
9
+
} from "../../../hooks/useSandbox";
10
+
import { useQueryClient } from "@tanstack/react-query";
11
+
import { useAtomValue } from "jotai";
12
+
import { profileAtom } from "../../../atoms/profile";
3
13
4
14
export type ProjectProps = {
5
15
sandbox: Sandbox;
6
16
};
7
17
8
18
function Project({ sandbox }: ProjectProps) {
9
-
const onPlay = (e: React.MouseEvent) => {
19
+
const navigate = useNavigate();
20
+
const queryClient = useQueryClient();
21
+
const profile = useAtomValue(profileAtom);
22
+
const { mutateAsync: stopSandbox } = useStopSandboxMutation();
23
+
const { mutateAsync: startSandbox } = useStartSandboxMutation();
24
+
const [displayLoading, setDisplayLoading] = useState(false);
25
+
26
+
const onPlay = async (e: React.MouseEvent) => {
10
27
e.stopPropagation();
28
+
setDisplayLoading(true);
29
+
await startSandbox(sandbox.id);
30
+
queryClient.invalidateQueries({
31
+
queryKey: ["actorSandboxes", profile?.did],
32
+
});
33
+
setDisplayLoading(false);
11
34
};
12
35
13
-
const onStop = (e: React.MouseEvent) => {
36
+
const onStop = async (e: React.MouseEvent) => {
14
37
e.stopPropagation();
38
+
setDisplayLoading(true);
39
+
await stopSandbox(sandbox.id);
40
+
queryClient.invalidateQueries({
41
+
queryKey: ["actorSandboxes", profile?.did],
42
+
});
43
+
setDisplayLoading(false);
15
44
};
16
45
17
-
const onOpenProject = () => {};
46
+
const onOpenProject = () => {
47
+
navigate({
48
+
to: `/${sandbox.uri.split("at://")[1].replace("io.pocketenv.", "")}`,
49
+
});
50
+
};
51
+
52
+
const onOpenContextMenu = (e: React.MouseEvent) => {
53
+
e.stopPropagation();
54
+
};
18
55
19
56
return (
20
57
<tr className="cursor-pointer" onClick={onOpenProject}>
21
58
<td>{sandbox.name}</td>
59
+
<td>{sandbox.base}</td>
22
60
<td>
23
61
<span
24
62
className={`badge badge-soft ${sandbox?.status === "RUNNING" ? "badge-success" : ""} rounded-full ${sandbox.status === "RUNNING" ? "bg-green-400/10" : "bg-white/15 rounded"}`}
···
34
72
{sandbox?.memory} GiB RAM
35
73
</span>
36
74
</td>
37
-
<td>March 1, 2024</td>
75
+
<td>{dayjs(sandbox.createdAt).format("M/D/YYYY, h:mm:ss A")}</td>
38
76
<td>
39
-
{sandbox.status === "RUNNING" && (
77
+
{!displayLoading && sandbox.status === "RUNNING" && (
40
78
<button className="btn btn-circle btn-text btn-sm" onClick={onStop}>
41
-
<span className="icon-[tabler--player-stop] size-5"></span>
79
+
<span className="icon-[tabler--player-stop] size-5 hover:text-white"></span>
42
80
</button>
43
81
)}
44
-
{sandbox.status !== "RUNNING" && (
82
+
{!displayLoading && sandbox.status !== "RUNNING" && (
45
83
<button className="btn btn-circle btn-text btn-sm" onClick={onPlay}>
46
-
<span className="icon-[tabler--player-play] size-5"></span>
84
+
<span className="icon-[tabler--player-play] size-5 hover:text-white"></span>
47
85
</button>
48
86
)}
49
-
<button className="btn btn-circle btn-text btn-sm">
50
-
<span className="icon-[tabler--dots-vertical] size-5"></span>
87
+
{displayLoading && (
88
+
<span className="loading loading-spinner loading-sm btn-text mr-[10px]"></span>
89
+
)}
90
+
<button
91
+
className="btn btn-circle btn-text btn-sm"
92
+
onClick={onOpenContextMenu}
93
+
>
94
+
<span className="icon-[tabler--dots-vertical] size-5 hover:text-white"></span>
51
95
</button>
52
96
</td>
53
97
</tr>
+1
apps/web/src/pages/projects/Projects.tsx
+1
apps/web/src/pages/projects/Projects.tsx
···
16
16
<thead>
17
17
<tr>
18
18
<th className="normal-case text-[14px]">Name</th>
19
+
<th className="normal-case text-[14px]">Base</th>
19
20
<th className="normal-case text-[14px]">State</th>
20
21
<th className="normal-case text-[14px]">Resources</th>
21
22
<th className="normal-case text-[14px]">Created At</th>
+2
apps/web/src/pages/sandbox/Sandbox.tsx
+2
apps/web/src/pages/sandbox/Sandbox.tsx
···
99
99
<thead>
100
100
<tr>
101
101
<th>Status</th>
102
+
<th>Base</th>
102
103
<th>Started</th>
103
104
<th>Timeout</th>
104
105
<th>Resources</th>
···
113
114
{_.upperFirst(_.camelCase(data.sandbox.status))}
114
115
</span>
115
116
</td>
117
+
<td>{data.sandbox.baseSandbox}</td>
116
118
<td>
117
119
{data?.sandbox?.startedAt
118
120
? dayjs(data.sandbox.startedAt).fromNow()