From 770b2a537c4e1f613923caea98f2ff6108e8e622 Mon Sep 17 00:00:00 2001
From: Greg Priday <greg@siteorigin.com>
Date: Mon, 16 Mar 2026 22:15:52 +1100
Subject: [PATCH 1/2] feat(dev-preview): convert restart button to icon-only in
 ConsoleDrawer

- Replace shadcn Button with plain button element for icon-only styling
- Remove visible "Restart" text label, keeping only RotateCw icon
- Apply compact toolbar-consistent styles (p-1.5, rounded, hover:bg-overlay-medium)
- Move animate-spin from icon to button element matching DevPreviewToolbar pattern
- Remove unused Button import from @/components/ui/button
---
 src/components/DevPreview/ConsoleDrawer.tsx | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/src/components/DevPreview/ConsoleDrawer.tsx b/src/components/DevPreview/ConsoleDrawer.tsx
index 2596ecbff..25493f1ed 100644
--- a/src/components/DevPreview/ConsoleDrawer.tsx
+++ b/src/components/DevPreview/ConsoleDrawer.tsx
@@ -1,7 +1,7 @@
 import { useState, useCallback, useEffect } from "react";
 import { ChevronUp, RotateCw } from "lucide-react";
 import { cn } from "@/lib/utils";
-import { Button } from "@/components/ui/button";
+
 import { Tooltip, TooltipContent, TooltipTrigger, TooltipProvider } from "@/components/ui/tooltip";
 import { XtermAdapter } from "../Terminal/XtermAdapter";
 import { terminalInstanceService } from "../../services/TerminalInstanceService";
@@ -120,21 +120,19 @@ export function ConsoleDrawer({
             <Tooltip>
               <TooltipTrigger asChild>
                 <span className="inline-flex">
-                  <Button
+                  <button
                     type="button"
                     onClick={onHardRestart}
                     disabled={hardRestartDisabled}
                     className={cn(
-                      "flex min-h-8 shrink-0 items-center gap-2 px-3 py-1.5 text-[10px] font-semibold uppercase tracking-wide text-canopy-text/80 transition-colors",
-                      "hover:bg-overlay-medium focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-status-info disabled:cursor-not-allowed disabled:opacity-40",
-                      isRestarting && "text-server-starting"
+                      "p-1.5 rounded hover:bg-overlay-medium disabled:opacity-30 disabled:cursor-not-allowed transition-colors",
+                      isRestarting && "animate-spin"
                     )}
                     aria-label={restartTooltip}
                     aria-busy={isRestarting}
                   >
-                    <RotateCw className={cn("h-3.5 w-3.5", isRestarting && "animate-spin")} />
-                    <span>Restart</span>
-                  </Button>
+                    <RotateCw className="h-3.5 w-3.5" />
+                  </button>
                 </span>
               </TooltipTrigger>
               <TooltipContent side="bottom">{restartTooltip}</TooltipContent>

From cbd299c76144903f6de25ec45d749a5b358d7e44 Mon Sep 17 00:00:00 2001
From: Greg Priday <greg@siteorigin.com>
Date: Mon, 16 Mar 2026 22:25:31 +1100
Subject: [PATCH 2/2] test(dev-preview): add icon-only assertion for restart
 button

- Verify restart button has no visible text content
- Confirm SVG icon is present inside the button element
---
 .../DevPreview/__tests__/ConsoleDrawer.test.tsx    | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/src/components/DevPreview/__tests__/ConsoleDrawer.test.tsx b/src/components/DevPreview/__tests__/ConsoleDrawer.test.tsx
index c3b9b29ad..5bb2ee989 100644
--- a/src/components/DevPreview/__tests__/ConsoleDrawer.test.tsx
+++ b/src/components/DevPreview/__tests__/ConsoleDrawer.test.tsx
@@ -180,6 +180,20 @@ describe("ConsoleDrawer", () => {
       expect(screen.getByRole("button", { name: "Hard restart dev preview" })).toBeTruthy();
     });
 
+    it("renders restart button as icon-only with no visible text", () => {
+      render(
+        <ConsoleDrawer
+          terminalId={mockTerminalId}
+          defaultOpen={false}
+          onHardRestart={vi.fn()}
+          status="running"
+        />
+      );
+      const restartButton = screen.getByRole("button", { name: "Hard restart dev preview" });
+      expect(restartButton.textContent).toBe("");
+      expect(restartButton.querySelector("svg")).toBeTruthy();
+    });
+
     it("calls onHardRestart when restart button is clicked", () => {
       const onHardRestart = vi.fn();
       render(