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 context menu and refine project row UI
Add a reusable ContextMenu component and export. Integrate it into
the project table row, refactor the action buttons into a centered
flex layout and adjust button/loading/terminal visuals and behavior.
Update Navbar FAQs link to external docs and remove the Snapshots link
from the sidebar. Constrain the Projects table container height and make
the Sandbox page full-height with vertical overflow hidden.
+152
-60
+30
-35
apps/web/src/pages/projects/Project/Project.tsx
+30
-35
apps/web/src/pages/projects/Project/Project.tsx
···
11
11
import { useAtomValue } from "jotai";
12
12
import { profileAtom } from "../../../atoms/profile";
13
13
import TerminalModal from "./TerminalModal";
14
+
import ContextMenu from "../../../components/contextmenu";
14
15
15
16
export type ProjectProps = {
16
17
sandbox: Sandbox;
···
57
58
});
58
59
};
59
60
60
-
const onOpenContextMenu = (e: React.MouseEvent) => {
61
-
e.stopPropagation();
62
-
};
63
-
64
61
return (
65
62
<tr className="cursor-pointer" onClick={onOpenProject}>
66
63
<td>{sandbox.name}</td>
···
81
78
</span>
82
79
</td>
83
80
<td>{dayjs(sandbox.createdAt).format("M/D/YYYY, h:mm:ss A")}</td>
84
-
<td>
85
-
{!displayLoading && sandbox.status === "RUNNING" && (
81
+
<td className="align-middle">
82
+
<div className="flex items-center justify-center p-1">
83
+
{!displayLoading && sandbox.status === "RUNNING" && (
84
+
<button
85
+
className="btn btn-circle btn-text btn-sm bg-transparent outline-0"
86
+
onClick={onStop}
87
+
>
88
+
<span className="icon-[tabler--player-stop] size-5 hover:text-white"></span>
89
+
</button>
90
+
)}
91
+
{!displayLoading && sandbox.status !== "RUNNING" && (
92
+
<button
93
+
className="btn btn-circle btn-text btn-sm bg-transparent outline-0"
94
+
onClick={onPlay}
95
+
>
96
+
<span className="icon-[tabler--player-play] size-5 hover:text-white"></span>
97
+
</button>
98
+
)}
99
+
{displayLoading && (
100
+
<span className="loading loading-spinner loading-sm btn-text mr-[10px]"></span>
101
+
)}
86
102
<button
87
-
className="btn btn-circle btn-text btn-sm bg-transparent outline-0"
88
-
onClick={onStop}
103
+
className={`btn btn-circle btn-text btn-sm bg-transparent outline-0 ${sandbox.status !== "RUNNING" ? "opacity-50" : ""}`}
104
+
onClick={onOpenTerminal}
89
105
>
90
-
<span className="icon-[tabler--player-stop] size-5 hover:text-white"></span>
91
-
</button>
92
-
)}
93
-
{!displayLoading && sandbox.status !== "RUNNING" && (
94
-
<button
95
-
className="btn btn-circle btn-text btn-sm bg-transparent outline-0"
96
-
onClick={onPlay}
97
-
>
98
-
<span className="icon-[tabler--player-play] size-5 hover:text-white"></span>
106
+
<span
107
+
className={`icon-[mingcute--terminal-fill] size-5 ${sandbox.status !== "RUNNING" ? "" : "hover:text-white"}`}
108
+
></span>
99
109
</button>
100
-
)}
101
-
{displayLoading && (
102
-
<span className="loading loading-spinner loading-sm btn-text mr-[10px]"></span>
103
-
)}
104
-
<button
105
-
className={`btn btn-circle btn-text btn-sm bg-transparent outline-0 ${sandbox.status !== "RUNNING" ? "opacity-50" : ""}`}
106
-
onClick={onOpenTerminal}
107
-
>
108
-
<span
109
-
className={`icon-[mingcute--terminal-fill] size-5 ${sandbox.status !== "RUNNING" ? "" : "hover:text-white"}`}
110
-
></span>
111
-
</button>
112
-
<button
113
-
className="btn btn-circle btn-text btn-sm bg-transparent outline-0"
114
-
onClick={onOpenContextMenu}
115
-
>
116
-
<span className="icon-[tabler--dots-vertical] size-5 hover:text-white"></span>
117
-
</button>
110
+
<ContextMenu />
111
+
</div>
112
+
118
113
<TerminalModal
119
114
title={sandbox.name}
120
115
isOpen={modalOpen}
+4
-1
apps/web/src/pages/projects/Projects.tsx
+4
-1
apps/web/src/pages/projects/Projects.tsx
+1
-1
apps/web/src/pages/sandbox/Sandbox.tsx
+1
-1
apps/web/src/pages/sandbox/Sandbox.tsx