Save frontend state (layout, sidebar, chat panel, preview refresh fix) before rollback

vibn-frontend/app/[workspace]/project/[projectId]/(home)/api/page.tsx

@@ -0,0 +1,158 @@
+"use client";
+
+import { Copy, Key } from "lucide-react";
+
+export default function ApiPage() {
+  return (
+    <div
+      style={{
+        padding: "32px 48px",
+        fontFamily: '"Outfit", "Inter", sans-serif',
+        color: "#18181b",
+        maxWidth: 900,
+      }}
+    >
+      <div style={{ marginBottom: 24 }}>
+        <h1
+          style={{ fontSize: "1.5rem", fontWeight: 600, margin: "0 0 4px 0" }}
+        >
+          API & Webhooks
+        </h1>
+        <p style={{ fontSize: "0.9rem", color: "#71717a", margin: 0 }}>
+          Connect external services to your application.
+        </p>
+      </div>
+
+      <div
+        style={{
+          background: "#fff",
+          border: "1px solid #e4e4e7",
+          borderRadius: 12,
+          padding: "24px",
+          marginBottom: 32,
+        }}
+      >
+        <h2 style={{ fontSize: "1rem", fontWeight: 600, margin: "0 0 16px 0" }}>
+          REST API Endpoint
+        </h2>
+        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+          <div
+            style={{
+              flex: 1,
+              background: "#fafafa",
+              border: "1px solid #e4e4e7",
+              borderRadius: 8,
+              padding: "10px 16px",
+              fontSize: "0.9rem",
+              color: "#71717a",
+              display: "flex",
+              alignItems: "center",
+              fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
+            }}
+          >
+            <span style={{ color: "#18181b" }}>
+              https://api.steadfast-camp-core-flow.vibn.app/v1
+            </span>
+          </div>
+          <button
+            style={{
+              width: 40,
+              height: 40,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              background: "#fff",
+              border: "1px solid #e4e4e7",
+              borderRadius: 8,
+              cursor: "pointer",
+            }}
+          >
+            <Copy size={16} color="#71717a" />
+          </button>
+        </div>
+      </div>
+
+      <div
+        style={{
+          background: "#fff",
+          border: "1px solid #e4e4e7",
+          borderRadius: 12,
+          padding: "24px",
+        }}
+      >
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+            marginBottom: 16,
+          }}
+        >
+          <h2 style={{ fontSize: "1rem", fontWeight: 600, margin: 0 }}>
+            API Keys
+          </h2>
+          <button
+            style={{
+              background: "#18181b",
+              color: "#fff",
+              border: "none",
+              borderRadius: 8,
+              padding: "8px 16px",
+              fontSize: "0.85rem",
+              fontWeight: 500,
+              cursor: "pointer",
+            }}
+          >
+            Generate Key
+          </button>
+        </div>
+
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            gap: 16,
+            padding: "16px 0",
+            borderBottom: "1px solid #e4e4e7",
+          }}
+        >
+          <div
+            style={{
+              width: 40,
+              height: 40,
+              background: "#fafafa",
+              border: "1px solid #e4e4e7",
+              borderRadius: 8,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+            }}
+          >
+            <Key size={16} color="#18181b" />
+          </div>
+          <div style={{ flex: 1 }}>
+            <div style={{ fontWeight: 600, marginBottom: 4 }}>
+              Production Key
+            </div>
+            <div style={{ fontSize: "0.85rem", color: "#71717a" }}>
+              Created 2 days ago
+            </div>
+          </div>
+          <div
+            style={{
+              fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
+              fontSize: "0.85rem",
+              color: "#71717a",
+              background: "#fafafa",
+              padding: "4px 8px",
+              borderRadius: 6,
+              border: "1px solid #e4e4e7",
+            }}
+          >
+            pk_live_*******************
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}