Skip to content

feat: add restart sandbox button to toolbar #2843

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 18 commits into from
Sep 16, 2025
Merged

feat: add restart sandbox button to toolbar #2843

Changes from 2 commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
34bfd35
feat: add restart sandbox button to toolbar
drfarrell Sep 15, 2025
804a1ea
fix: use reload icon and add toast notification for sandbox restart
drfarrell Sep 15, 2025
a3f45d2
refactor: address CodeRabbit review comments for restart sandbox feature
drfarrell Sep 15, 2025
fa834eb
feat: add loading state and delay to sandbox restart
drfarrell Sep 15, 2025
0025f42
feat: add error state indication for restart sandbox button
drfarrell Sep 15, 2025
da4ab4d
refactor: optimize error detection for massive performance improvement
drfarrell Sep 15, 2025
f897610
fix: remove non-existent hasTimedOut property to fix build error
drfarrell Sep 15, 2025
4cb140a
feat: improve spinner visibility and add startup grace period
drfarrell Sep 15, 2025
ab76b25
fix: use useMemo for proper memoization of hasSandboxError
drfarrell Sep 15, 2025
45456c8
fix: clear amber error state when sandbox successfully connects
drfarrell Sep 15, 2025
5d7cc0e
feat: detect actual 502 errors using 30-second timeout
drfarrell Sep 15, 2025
ccf112f
fix: reduce timeout detection to 5 seconds for faster user feedback
drfarrell Sep 15, 2025
cb0293e
perf: ultra-lightweight error detection with minimal resource usage
drfarrell Sep 15, 2025
eaaa718
fix: detect 502 errors on initial project load
drfarrell Sep 15, 2025
ebc7297
Merge branch 'main' into restart-sandbox-in-toolbar
Kitenite Sep 16, 2025
dcfada1
refactor and clean up
Kitenite Sep 16, 2025
367678f
finish loop
Kitenite Sep 16, 2025
1638260
clean up
Kitenite Sep 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 58 additions & 0 deletions apps/web/client/src/app/project/[id]/_components/bottom-bar/terminal-area.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { useEditorEngine } from '@/components/store/editor';
import { Icons } from '@onlook/ui/icons';
import { toast } from '@onlook/ui/sonner';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@onlook/ui/tabs';
import { Tooltip, TooltipContent, TooltipTrigger } from '@onlook/ui/tooltip';
import { cn } from '@onlook/ui/utils';
Expand Down Expand Up @@ -53,6 +54,38 @@ export const TerminalArea = observer(({ children }: { children: React.ReactNode
{terminalHidden ? (
<motion.div layout className="flex items-center gap-1">
{children}
<Tooltip>
<TooltipTrigger asChild>
<button
onClick={async () => {
const activeBranch = branches.activeBranch;
if (activeBranch) {
const sandbox = branches.getSandboxById(activeBranch.id);
if (sandbox?.session) {
const success = await sandbox.session.restartDevServer();
if (success) {
toast.success('Sandbox restarted successfully', {
icon: <Icons.Cube className="h-4 w-4" />,
});
} else {
toast.error('Failed to restart sandbox');
}
}
}
}}
disabled={!branches.activeBranch}
className={cn(
"h-9 w-9 flex items-center justify-center rounded-md border border-transparent",
branches.activeBranch
? "hover:text-foreground-hover text-foreground-tertiary hover:bg-accent/50"
: "text-foreground-disabled cursor-not-allowed opacity-50"
)}
>
<Icons.Reload className="h-4 w-4" />
</button>
</TooltipTrigger>
<TooltipContent sideOffset={5} hideArrow>Restart Sandbox</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger asChild>
<button
Expand Down Expand Up @@ -81,6 +114,31 @@ export const TerminalArea = observer(({ children }: { children: React.ReactNode
</motion.span>
<div className="flex items-center gap-1">
<motion.div layout>{/* <RunButton /> */}</motion.div>
<Tooltip>
<TooltipTrigger asChild>
<button
onClick={async () => {
const activeBranch = branches.activeBranch;
if (activeBranch) {
const sandbox = branches.getSandboxById(activeBranch.id);
if (sandbox?.session) {
await sandbox.session.restartDevServer();
}
}
}}
Copy link
Contributor

@graphite-app graphite-app bot Sep 15, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The expanded view's restart button is missing the toast notifications that are present in the collapsed view implementation. To maintain consistent user feedback, please add the same success and error toast notifications:

const success = await sandbox.session.restartDevServer();
if (success) {
    toast.success('Sandbox restarted successfully', {
        icon: <Icons.Cube className="h-4 w-4" />,
    });
} else {
    toast.error('Failed to restart sandbox');
}

This ensures users receive appropriate feedback regardless of which button they use to restart the sandbox.

Suggested change
onClick={async () => {
const activeBranch = branches.activeBranch;
if (activeBranch) {
const sandbox = branches.getSandboxById(activeBranch.id);
if (sandbox?.session) {
await sandbox.session.restartDevServer();
}
}
}}
onClick={async () => {
const activeBranch = branches.activeBranch;
if (activeBranch) {
const sandbox = branches.getSandboxById(activeBranch.id);
if (sandbox?.session) {
const success = await sandbox.session.restartDevServer();
if (success) {
toast.success('Sandbox restarted successfully', {
icon: <Icons.Cube className="h-4 w-4" />,
});
} else {
toast.error('Failed to restart sandbox');
}
}
}
}}

Spotted by Diamond

Fix in Graphite

Is this helpful? React 👍 or 👎 to let us know.

disabled={!branches.activeBranch}
className={cn(
"h-9 w-9 flex items-center justify-center rounded-md border border-transparent",
branches.activeBranch
? "hover:text-foreground-hover text-foreground-tertiary hover:bg-accent/50"
: "text-foreground-disabled cursor-not-allowed opacity-50"
)}
>
<Icons.Reload className="h-4 w-4" />
</button>
</TooltipTrigger>
<TooltipContent sideOffset={5} hideArrow>Restart Sandbox</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger asChild>
<button
Expand Down