From 8cb7a9450baa90db087660ecd81a7f670000b96b Mon Sep 17 00:00:00 2001
From: mawkone <mark@getacquired.com>
Date: Fri, 15 May 2026 16:31:31 -0700
Subject: [PATCH] feat(ui): add manual reload button to preview device toggles

---
 .../[projectId]/(home)/preview/page.tsx       |  9 +++--
 .../preview-toolbar/preview-toolbar-state.ts  | 12 ++++---
 .../components/project/project-icon-rail.tsx  | 36 ++++++++++++++++++-
 3 files changed, 49 insertions(+), 8 deletions(-)

diff --git a/vibn-frontend/app/[workspace]/project/[projectId]/(home)/preview/page.tsx b/vibn-frontend/app/[workspace]/project/[projectId]/(home)/preview/page.tsx
index 06d1f13..c5e8806 100644
--- a/vibn-frontend/app/[workspace]/project/[projectId]/(home)/preview/page.tsx
+++ b/vibn-frontend/app/[workspace]/project/[projectId]/(home)/preview/page.tsx
@@ -26,7 +26,7 @@ export default function PreviewTab() {
 
   const previews = anatomy?.hosting.previews ?? [];
   // Find the port 3000 preview if it exists, otherwise fall back to null
-  const primaryPreview = previews.find(p => p.port === 3000);
+  const primaryPreview = previews.find((p) => p.port === 3000);
 
   const [iframeSrc, setIframeSrc] = useState<string | null>(null);
   const iframeDomRef = useRef<HTMLIFrameElement | null>(null);
@@ -34,6 +34,7 @@ export default function PreviewTab() {
   const origin = typeof window !== "undefined" ? window.location.origin : "";
 
   const deviceMode = usePreviewToolbarStore((s) => s.deviceMode);
+  const refreshKey = usePreviewToolbarStore((s) => s.refreshKey);
 
   useLayoutEffect(() => {
     setIframeSrc(primaryPreview?.url ?? null);
@@ -72,7 +73,7 @@ export default function PreviewTab() {
             </div>
           ) : iframeSrc ? (
             <iframe
-              key={iframeSrc}
+              key={`${iframeSrc}-${refreshKey}`}
               src={iframeSrc}
               title="Preview"
               ref={(el) => {
@@ -91,7 +92,9 @@ export default function PreviewTab() {
           ) : (
             <div style={loaderWrap}>
               <p style={emptyText}>Preview not running on port 3000.</p>
-              <p style={{...emptyText, fontSize: '0.75rem', marginTop: 8}}>Ask the AI to start the dev server.</p>
+              <p style={{ ...emptyText, fontSize: "0.75rem", marginTop: 8 }}>
+                Ask the AI to start the dev server.
+              </p>
             </div>
           )}
 
diff --git a/vibn-frontend/components/project/preview-toolbar/preview-toolbar-state.ts b/vibn-frontend/components/project/preview-toolbar/preview-toolbar-state.ts
index b3d81b9..8983660 100644
--- a/vibn-frontend/components/project/preview-toolbar/preview-toolbar-state.ts
+++ b/vibn-frontend/components/project/preview-toolbar/preview-toolbar-state.ts
@@ -1,11 +1,15 @@
-import { create } from 'zustand';
+import { create } from "zustand";
 
 interface PreviewToolbarState {
-  deviceMode: 'desktop' | 'mobile';
-  setDeviceMode: (mode: 'desktop' | 'mobile') => void;
+  deviceMode: "desktop" | "mobile";
+  setDeviceMode: (mode: "desktop" | "mobile") => void;
+  refreshKey: number;
+  triggerRefresh: () => void;
 }
 
 export const usePreviewToolbarStore = create<PreviewToolbarState>((set) => ({
-  deviceMode: 'desktop',
+  deviceMode: "desktop",
   setDeviceMode: (mode) => set({ deviceMode: mode }),
+  refreshKey: 0,
+  triggerRefresh: () => set((state) => ({ refreshKey: state.refreshKey + 1 })),
 }));
diff --git a/vibn-frontend/components/project/project-icon-rail.tsx b/vibn-frontend/components/project/project-icon-rail.tsx
index 69331df..64f79aa 100644
--- a/vibn-frontend/components/project/project-icon-rail.tsx
+++ b/vibn-frontend/components/project/project-icon-rail.tsx
@@ -91,12 +91,13 @@ export function ProjectIconRail({ workspace, projectId }: Props) {
   );
 }
 
-import { Monitor, Smartphone } from "lucide-react";
+import { Monitor, Smartphone, RotateCw } from "lucide-react";
 import { usePreviewToolbarStore } from "./preview-toolbar/preview-toolbar-state";
 
 function PreviewDeviceToggles() {
   const deviceMode = usePreviewToolbarStore((s) => s.deviceMode);
   const setDeviceMode = usePreviewToolbarStore((s) => s.setDeviceMode);
+  const triggerRefresh = usePreviewToolbarStore((s) => s.triggerRefresh);
 
   return (
     <div
@@ -109,6 +110,39 @@ function PreviewDeviceToggles() {
         border: "1px solid #e8e4dc",
       }}
     >
+      <button
+        onClick={triggerRefresh}
+        title="Reload Preview"
+        style={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          width: 28,
+          height: 26,
+          borderRadius: 6,
+          border: "none",
+          cursor: "pointer",
+          transition: "all 0.15s",
+          background: "transparent",
+          color: "#8c8580",
+          marginRight: 4,
+        }}
+        onMouseEnter={(e) => (e.currentTarget.style.color = "#1a1a1a")}
+        onMouseLeave={(e) => (e.currentTarget.style.color = "#8c8580")}
+      >
+        <RotateCw size={14} />
+      </button>
+
+      <div
+        style={{
+          width: 1,
+          height: 16,
+          background: "#d9d2c5",
+          alignSelf: "center",
+          marginRight: 4,
+        }}
+      />
+
       <button
         onClick={() => setDeviceMode("desktop")}
         style={{