design(preview): replace mock visual tools with wide address bar showing active dev URL

vibn-frontend/components/project/project-icon-rail.tsx

@@ -91,14 +91,24 @@ export function ProjectIconRail({ workspace, projectId }: Props) {
   );
 }
 
-import { Monitor, Smartphone, RotateCw, Wand2, Maximize2 } from "lucide-react";
+import { Monitor, Smartphone, RotateCw, ExternalLink } from "lucide-react";
 import { usePreviewToolbarStore } from "./preview-toolbar/preview-toolbar-state";
+import { useAnatomy } from "@/components/project/use-anatomy";
+import { useParams } from "next/navigation";
 
 function PreviewDeviceToggles() {
   const deviceMode = usePreviewToolbarStore((s) => s.deviceMode);
   const setDeviceMode = usePreviewToolbarStore((s) => s.setDeviceMode);
   const triggerRefresh = usePreviewToolbarStore((s) => s.triggerRefresh);
 
+  const params = useParams();
+  const projectId = params?.projectId as string;
+  const { anatomy } = useAnatomy(projectId);
+
+  const previews = anatomy?.hosting.previews ?? [];
+  const running = previews.find((p) => p.state === "running");
+  const displayUrl = running?.url ?? "";
+
   return (
     <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
       <div
@@ -200,16 +210,18 @@ function PreviewDeviceToggles() {
           padding: "4px 12px",
           borderRadius: 8,
           height: 34,
-          minWidth: 200,
+          flex: 1, // Let the URL bar grow to fill the header space
+          minWidth: 320,
           color: "#71717a",
           fontSize: "0.75rem",
         }}
       >
-        <span style={{ opacity: 0.5 }}>/</span>
+        <span style={{ opacity: 0.6 }}>🌐</span>
         <input
           type="text"
-          defaultValue=""
-          placeholder="Path (e.g. /dashboard)"
+          value={displayUrl}
+          readOnly
+          placeholder="No dev server running..."
           style={{
             background: "transparent",
             border: "none",
@@ -217,89 +229,20 @@ function PreviewDeviceToggles() {
             width: "100%",
             color: "#18181b",
             fontSize: "0.75rem",
+            textOverflow: "ellipsis",
           }}
         />
-      </div>
-
-      <div style={{ display: "flex", gap: 4, marginLeft: 4 }}>
-        <button
-          title="Visual Edit"
-          style={{
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            width: 32,
-            height: 32,
-            borderRadius: 8,
-            border: "1px solid transparent",
-            background: "transparent",
-            color: "#71717a",
-            cursor: "pointer",
-            transition: "all 0.15s",
-          }}
-          onMouseEnter={(e) => {
-            e.currentTarget.style.background = "#f4f4f5";
-            e.currentTarget.style.color = "#18181b";
-          }}
-          onMouseLeave={(e) => {
-            e.currentTarget.style.background = "transparent";
-            e.currentTarget.style.color = "#71717a";
-          }}
-        >
-          <Wand2 size={15} />
-        </button>
-        <button
-          title="Theme"
-          style={{
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            width: 32,
-            height: 32,
-            borderRadius: 8,
-            border: "1px solid transparent",
-            background: "transparent",
-            color: "#71717a",
-            cursor: "pointer",
-            transition: "all 0.15s",
-          }}
-          onMouseEnter={(e) => {
-            e.currentTarget.style.background = "#f4f4f5";
-            e.currentTarget.style.color = "#18181b";
-          }}
-          onMouseLeave={(e) => {
-            e.currentTarget.style.background = "transparent";
-            e.currentTarget.style.color = "#71717a";
-          }}
-        >
-          <Palette size={15} />
-        </button>
-        <button
-          title="Fullscreen / Pop-out"
-          style={{
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            width: 32,
-            height: 32,
-            borderRadius: 8,
-            border: "1px solid transparent",
-            background: "transparent",
-            color: "#71717a",
-            cursor: "pointer",
-            transition: "all 0.15s",
-          }}
-          onMouseEnter={(e) => {
-            e.currentTarget.style.background = "#f4f4f5";
-            e.currentTarget.style.color = "#18181b";
-          }}
-          onMouseLeave={(e) => {
-            e.currentTarget.style.background = "transparent";
-            e.currentTarget.style.color = "#71717a";
-          }}
-        >
-          <Maximize2 size={15} />
-        </button>
+        {displayUrl && (
+          <a
+            href={displayUrl}
+            target="_blank"
+            rel="noreferrer"
+            title="Open preview in new tab"
+            style={{ color: "#71717a", display: "flex", marginLeft: 4 }}
+          >
+            <ExternalLink size={14} />
+          </a>
+        )}
       </div>
     </div>
   );