feat: PWA support + mobile-responsive layout + QR code to open Atlas on phone

Made-with: Cursor

app/[workspace]/project/[projectId]/overview/page.tsx

@@ -7,6 +7,57 @@ import { AtlasChat } from "@/components/AtlasChat";
 import { OrchestratorChat } from "@/components/OrchestratorChat";
 import { Loader2 } from "lucide-react";
 
+function MobileQRButton({ projectId, workspace }: { projectId: string; workspace: string }) {
+  const [show, setShow] = useState(false);
+  const url = typeof window !== "undefined"
+    ? `${window.location.origin}/${workspace}/project/${projectId}/overview`
+    : "";
+  const qrSrc = `https://api.qrserver.com/v1/create-qr-code/?size=180x180&data=${encodeURIComponent(url)}&bgcolor=f6f4f0&color=1a1a1a&margin=2`;
+
+  return (
+    <div style={{ position: "relative" }}>
+      <button
+        onClick={() => setShow(s => !s)}
+        title="Open on your phone"
+        style={{
+          display: "flex", alignItems: "center", gap: 6,
+          padding: "6px 12px", borderRadius: 7,
+          background: "none", border: "1px solid #e0dcd4",
+          fontSize: "0.72rem", fontFamily: "Outfit, sans-serif",
+          color: "#8a8478", cursor: "pointer",
+          transition: "border-color 0.12s",
+        }}
+        onMouseEnter={e => (e.currentTarget.style.borderColor = "#b5b0a6")}
+        onMouseLeave={e => (e.currentTarget.style.borderColor = "#e0dcd4")}
+      >
+        📱 Open on phone
+      </button>
+      {show && (
+        <div style={{
+          position: "absolute", top: "calc(100% + 8px)", right: 0,
+          background: "#fff", borderRadius: 12,
+          border: "1px solid #e8e4dc",
+          boxShadow: "0 8px 24px #1a1a1a12",
+          padding: "16px", zIndex: 50,
+          display: "flex", flexDirection: "column", alignItems: "center", gap: 10,
+          minWidth: 220,
+        }}>
+          <img src={qrSrc} alt="QR code" width={180} height={180} style={{ borderRadius: 8 }} />
+          <p style={{ fontSize: "0.72rem", color: "#8a8478", textAlign: "center", margin: 0, fontFamily: "Outfit, sans-serif" }}>
+            Scan to open Atlas on your phone
+          </p>
+          <p style={{ fontSize: "0.65rem", color: "#b5b0a6", textAlign: "center", margin: 0, fontFamily: "IBM Plex Mono, monospace", wordBreak: "break-all" }}>
+            {url}
+          </p>
+          <button onClick={() => setShow(false)} style={{ fontSize: "0.68rem", color: "#a09a90", background: "none", border: "none", cursor: "pointer" }}>
+            Close
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}
+
 interface Project {
   id: string;
   productName: string;
@@ -16,6 +67,7 @@ interface Project {
 export default function ProjectOverviewPage() {
   const params = useParams();
   const projectId = params.projectId as string;
+  const workspace = params.workspace as string;
   const { status: authStatus } = useSession();
   const [project, setProject] = useState<Project | null>(null);
   const [loading, setLoading] = useState(true);
@@ -50,6 +102,15 @@ export default function ProjectOverviewPage() {
 
   return (
     <div style={{ height: "100%", display: "flex", flexDirection: "column" }}>
+      {/* Desktop-only: Open on phone button */}
+      <style>{`@media (max-width: 768px) { .vibn-phone-btn { display: none !important; } }`}</style>
+      <div className="vibn-phone-btn" style={{
+        position: "absolute", top: 14, right: 248,
+        zIndex: 20,
+      }}>
+        <MobileQRButton projectId={projectId} workspace={workspace} />
+      </div>
+
       {(!project.stage || project.stage === "discovery") ? (
         <AtlasChat
           projectId={projectId}