) : null}
- {events.length ? (
+ {accessVerified && events.length ? (
Recent sanitized events
{events.slice(0, 5).map((event) => (
diff --git a/components/platform/integration-catalog.tsx b/components/platform/integration-catalog.tsx
index 266d446..e9001cf 100644
--- a/components/platform/integration-catalog.tsx
+++ b/components/platform/integration-catalog.tsx
@@ -1,19 +1,22 @@
"use client";
import {
- Bot,
Braces,
- BrainCircuit,
- CloudUpload,
DatabaseZap,
- GitBranch,
KeyRound,
- Network,
- Route,
Send,
Sparkles,
} from "lucide-react";
+import Image from "next/image";
import Link from "next/link";
+import {
+ SiAnthropic,
+ SiGithub,
+ SiMoonshotai,
+ SiOpenrouter,
+ SiVercel,
+} from "react-icons/si";
+import { TbBrandOpenai } from "react-icons/tb";
import { useMemo, useSyncExternalStore } from "react";
import { Button } from "@/components/ui/button";
@@ -22,15 +25,15 @@ import { StatusBadge, type PlatformStatus } from "./platform-ui";
const integrations = [
{ id: "free", name: "Free Auto", eyebrow: "Deterministic fallback", description: "Built-in planning and generation fallback. No provider key is required.", icon: Sparkles, href: "/", fixed: "built-in" },
- { id: "dropstab", name: "DropsTab API", eyebrow: "Market intelligence", description: "Session-only key for documented market, unlock, funding, and activity capabilities.", icon: DatabaseZap, href: "/?connections=1&provider=dropstab" },
- { id: "dropsbot", name: "Drops Bot + Telegram", eyebrow: "Monitoring and delivery", description: "Guided account, channel, bot, and provider verification. No delivery is assumed.", icon: Send, href: "/?connections=1&provider=dropsbot&flow=telegram-channel", fixed: "setup" },
- { id: "openai", name: "OpenAI", eyebrow: "Bring your key", description: "Use a session-only OpenAI API project key and a provider-returned model.", icon: BrainCircuit, href: "/?connections=1&provider=openai" },
- { id: "anthropic", name: "Anthropic", eyebrow: "Bring your key", description: "Use a session-only Anthropic API key for supported Claude models.", icon: Bot, href: "/?connections=1&provider=anthropic" },
- { id: "openrouter", name: "OpenRouter", eyebrow: "Account and BYOK", description: "PKCE member flow or session-only key with provider-returned model catalog.", icon: Route, href: "/?connections=1&provider=openrouter" },
- { id: "kimi", name: "Kimi", eyebrow: "Long context", description: "Use a session-only Moonshot API key and verified model identifier.", icon: Network, href: "/?connections=1&provider=kimi" },
+ { id: "dropstab", name: "DropsTab API", eyebrow: "Market intelligence", description: "Session-only key for documented market, unlock, funding, and activity capabilities.", icon: DatabaseZap, logo: "/brand/dropstab-mark.svg", href: "/?connections=1&provider=dropstab" },
+ { id: "dropsbot", name: "Drops Bot + Telegram", eyebrow: "Monitoring and delivery", description: "Guided account, channel, bot, and provider verification. No delivery is assumed.", icon: Send, logo: "/brand/drops-bot-avatar.png", href: "/?connections=1&provider=dropsbot&flow=telegram-channel", fixed: "setup" },
+ { id: "openai", name: "OpenAI", eyebrow: "Bring your key", description: "Use a session-only OpenAI API project key and a provider-returned model.", icon: TbBrandOpenai, href: "/?connections=1&provider=openai" },
+ { id: "anthropic", name: "Anthropic", eyebrow: "Bring your key", description: "Use a session-only Anthropic API key for supported Claude models.", icon: SiAnthropic, href: "/?connections=1&provider=anthropic" },
+ { id: "openrouter", name: "OpenRouter", eyebrow: "Account and BYOK", description: "PKCE member flow or session-only key with provider-returned model catalog.", icon: SiOpenrouter, href: "/?connections=1&provider=openrouter" },
+ { id: "kimi", name: "Kimi", eyebrow: "Long context", description: "Use a session-only Moonshot API key and verified model identifier.", icon: SiMoonshotai, href: "/?connections=1&provider=kimi" },
{ id: "custom", name: "Custom provider", eyebrow: "OpenAI-compatible", description: "Configure a public HTTPS chat-completions endpoint for this browser tab.", icon: Braces, href: "/?connections=1&provider=custom" },
- { id: "github", name: "GitHub App", eyebrow: "Repository delivery", description: "Project-scoped branch, commit, and pull request actions require configured credentials and approval.", icon: GitBranch, href: "/projects", fixed: "setup" },
- { id: "vercel", name: "Vercel deployment", eyebrow: "Preview and release", description: "A deployment is shown ready only after Vercel returns a confirmed provider receipt.", icon: CloudUpload, href: "/projects", fixed: "setup" },
+ { id: "github", name: "GitHub App", eyebrow: "Repository delivery", description: "Project-scoped branch, commit, and pull request actions require configured credentials and approval.", icon: SiGithub, href: "/projects", fixed: "setup" },
+ { id: "vercel", name: "Vercel deployment", eyebrow: "Preview and release", description: "A deployment is shown ready only after Vercel returns a confirmed provider receipt.", icon: SiVercel, href: "/projects", fixed: "setup" },
] as const;
function subscribeToSessionConnections(onStoreChange: () => void) {
@@ -66,7 +69,7 @@ export function IntegrationCatalog() {
const label = fixed === "built-in" ? "Built in" : sessionConfigured ? "Session configured" : "Setup required";
return (
- {label}
+ {"logo" in integration ? {label}
{integration.eyebrow}
{integration.name}
{integration.description}
diff --git a/components/platform/platform-shell.tsx b/components/platform/platform-shell.tsx
index d02b44d..0d141ab 100644
--- a/components/platform/platform-shell.tsx
+++ b/components/platform/platform-shell.tsx
@@ -1,11 +1,11 @@
-import Image from "next/image";
import Link from "next/link";
import type { ReactNode } from "react";
-import { ArrowRight, Plus, ShieldCheck } from "lucide-react";
+import { Plus, ShieldCheck } from "lucide-react";
import "@/app/styles/platform-tailwind.css";
import { Button } from "@/components/ui/button";
+import { DropsBrand } from "@/components/drops-brand";
const navigation = [
{ href: "/projects", label: "Projects" },
@@ -29,10 +29,7 @@ export function PlatformShell({
-
-
-
Drops Studio
+
@@ -67,14 +64,18 @@ export function PlatformShell({
{children}
-
-
-
-
Truthful by design Provider, build, integration, and deployment states appear only when Drops Studio has matching evidence.
+
+
+
+
Real crypto products powered by DropsTab intelligence and approved Drops Bot delivery.
+
-
- Explore the platform
-
+
+
Product
+
+
+
+
© {new Date().getFullYear()} Drops Studio Credentials stay in this browser session · explicit approval for external actions
diff --git a/components/preview-canvas.tsx b/components/preview-canvas.tsx
index 33719c4..be0f391 100644
--- a/components/preview-canvas.tsx
+++ b/components/preview-canvas.tsx
@@ -12,7 +12,6 @@ import {
Database,
Eye,
ExternalLink,
- FileCode2,
Folder,
Flame,
Link2,
@@ -288,11 +287,11 @@ export function PreviewCanvas({ preset, spec, values, market, dataMode, predicti
: "Plan growth loop";
return (
-
-
-
+
@@ -384,7 +383,7 @@ export function PreviewCanvas({ preset, spec, values, market, dataMode, predicti
AI Director
- {spec ? "Plan ready" : "Template mode"}
+ {spec ? "Plan ready" : "Ready"}
{spec
@@ -414,16 +413,10 @@ export function PreviewCanvas({ preset, spec, values, market, dataMode, predicti
onAction("EDIT PLAN")}>
-
- {dataMode === "live" ? "DropsTab receipt verified" : "Sample data is labelled"}
- Sandbox starts after Build
-
{preset.preview === "channel" ? (
) : null}
-
);
}
diff --git a/components/project-studio.tsx b/components/project-studio.tsx
index bb7929e..ae6b1a4 100644
--- a/components/project-studio.tsx
+++ b/components/project-studio.tsx
@@ -29,6 +29,7 @@ import {
Layers3,
LoaderCircle,
Monitor,
+ Minus,
MousePointer2,
Palette,
Play,
@@ -120,6 +121,9 @@ import {
ProjectV2SyncError,
saveProjectV2ToCloud,
} from "@/lib/project-v2-sync-client";
+import { canonicalProjectV2Json } from "@/lib/project-v2-hash";
+import { refreshLegacyProjectV2Migration } from "@/lib/project-v2-migration";
+import { refreshGeneratedProjectV2Template } from "@/lib/project-template-materializer";
import { validateEditableRuntimeHtml } from "@/lib/source-workspace";
import {
addWorkspaceFile,
@@ -521,6 +525,57 @@ type PendingSpecCommit = {
spec: GeneratedProjectSpec;
};
+const PROJECT_V2_BUILD_TASKS = ["typecheck", "lint", "test", "build"] as const;
+
+function projectV2BuildEvidence(projectV2?: ProjectV2): {
+ passed: number;
+ total: number;
+ verified: boolean;
+} {
+ if (!projectV2) return { passed: 0, total: 5, verified: false };
+ let passed = 0;
+ for (const taskId of PROJECT_V2_BUILD_TASKS) {
+ let latest: ProjectV2["runs"][number] | undefined;
+ for (let index = projectV2.runs.length - 1; index >= 0; index -= 1) {
+ const candidate = projectV2.runs[index];
+ if (
+ candidate.taskId === taskId
+ && candidate.projectRevision === projectV2.revision
+ ) {
+ latest = candidate;
+ break;
+ }
+ }
+ if (latest?.status === "succeeded") passed += 1;
+ }
+ if (
+ projectV2.preview?.status === "ready"
+ && projectV2.preview.projectRevision === projectV2.revision
+ && projectV2.preview.url
+ ) {
+ passed += 1;
+ }
+ return { passed, total: 5, verified: passed === 5 };
+}
+
+function currentProjectV2PreviewUrl(projectV2?: ProjectV2): string | null {
+ if (
+ !projectV2?.preview?.url
+ || projectV2.preview.status !== "ready"
+ || projectV2.preview.projectRevision !== projectV2.revision
+ ) {
+ return null;
+ }
+ try {
+ const url = new URL(projectV2.preview.url);
+ return url.protocol === "https:" && !url.username && !url.password
+ ? url.toString()
+ : null;
+ } catch {
+ return null;
+ }
+}
+
export function ProjectStudio() {
const params = useParams<{ id: string }>();
const iframeRef = useRef(null);
@@ -543,6 +598,7 @@ export function ProjectStudio() {
const [loaded, setLoaded] = useState(false);
const [tab, setTab] = useState("project");
const [device, setDevice] = useState("desktop");
+ const [canvasZoom, setCanvasZoom] = useState(100);
const [designMode, setDesignMode] = useState(false);
const [selectedBlock, setSelectedBlock] = useState(
null,
@@ -595,8 +651,46 @@ export function ProjectStudio() {
expectedUpdatedAt: string | null,
): Promise => {
const save = async () => {
+ let candidate = next;
+ if (
+ next.projectV2
+ && canonicalProjectV2Json(next.projectV2.productSpec)
+ !== canonicalProjectV2Json(next.spec)
+ ) {
+ try {
+ const refreshed = next.projectV2.manifest.framework.name === "legacy-html"
+ ? await refreshLegacyProjectV2Migration({
+ project: next.projectV2,
+ generatedProject: next,
+ })
+ : await refreshGeneratedProjectV2Template({
+ project: next.projectV2,
+ spec: next.spec,
+ });
+ candidate = { ...next, projectV2: refreshed };
+ const current = projectRef.current;
+ if (
+ current?.id === next.id
+ && current.updatedAt === next.updatedAt
+ && current.projectV2?.revision === next.projectV2.revision
+ && canonicalProjectV2Json(current.spec)
+ === canonicalProjectV2Json(next.spec)
+ ) {
+ projectRef.current = candidate;
+ committedProjectRef.current = candidate;
+ setProject(candidate);
+ setDirty(true);
+ }
+ } catch {
+ setProjectSyncStatus("error");
+ setToast(
+ "Generated Project V2 files could not be refreshed. Your previous revision is still safe.",
+ );
+ return false;
+ }
+ }
try {
- const result = await saveProjectSafely(next, { expectedUpdatedAt });
+ const result = await saveProjectSafely(candidate, { expectedUpdatedAt });
if (result.status === "conflict") {
setProjectSyncStatus("conflict");
setToast(
@@ -613,10 +707,10 @@ export function ProjectStudio() {
}
if (!cloudSyncAvailableRef.current) {
- if (next.projectV2 && projectV2SyncAvailableRef.current) {
+ if (candidate.projectV2 && projectV2SyncAvailableRef.current) {
try {
const v2Record = await saveProjectV2ToCloud(
- next.projectV2,
+ candidate.projectV2,
projectV2CloudRevisionRef.current ?? 0,
);
projectV2CloudRevisionRef.current = v2Record.storageRevision;
@@ -645,13 +739,13 @@ export function ProjectStudio() {
setProjectSyncStatus("saving");
try {
const record = await saveMemberProjectToCloud(
- next,
+ candidate,
cloudRevisionRef.current ?? 0,
);
cloudRevisionRef.current = record.revision;
- if (next.projectV2) {
+ if (candidate.projectV2) {
const v2Record = await saveProjectV2ToCloud(
- next.projectV2,
+ candidate.projectV2,
projectV2CloudRevisionRef.current ?? 0,
);
projectV2CloudRevisionRef.current = v2Record.storageRevision;
@@ -843,6 +937,24 @@ export function ProjectStudio() {
migrateGeneratedProjectToV2(projectV2Source),
);
}
+ if (
+ canonicalProjectV2Json(projectV2.productSpec)
+ !== canonicalProjectV2Json(spec)
+ ) {
+ try {
+ projectV2 = projectV2.manifest.framework.name === "legacy-html"
+ ? await refreshLegacyProjectV2Migration({
+ project: projectV2,
+ generatedProject: projectV2Source,
+ })
+ : await refreshGeneratedProjectV2Template({
+ project: projectV2,
+ spec,
+ });
+ } catch {
+ setToast("Project V2 source refresh will retry when you save");
+ }
+ }
const migrated: GeneratedProject = {
...found,
spec,
@@ -1196,6 +1308,10 @@ export function ProjectStudio() {
() => secureEditableRuntimeSrcDoc(runtimeHtml),
[runtimeHtml],
);
+ const runtimePreviewUrl = useMemo(
+ () => currentProjectV2PreviewUrl(project?.projectV2),
+ [project?.projectV2],
+ );
const trustedRuntimeSmoke =
(runtimeProject?.quality?.runtimeSmoke?.mode === "server-artifact"
|| runtimeProject?.quality?.runtimeSmoke?.mode === "server-inspection")
@@ -1214,9 +1330,12 @@ export function ProjectStudio() {
[hostDataProvider, runtimeProject, runtimeSmoke, trustedRuntimeSmoke],
);
const browserTelemetryReady = Boolean(
- runtimeSmoke?.mode === "browser"
+ runtimePreviewUrl
+ || (
+ runtimeSmoke?.mode === "browser"
&& runtimeSmoke.executed
- && runtimeSmoke.runtime,
+ && runtimeSmoke.runtime
+ ),
);
const activeProvider = useMemo(() => {
if (!project) return "free" as ProjectProvider;
@@ -1645,7 +1764,11 @@ export function ProjectStudio() {
};
projectRef.current = conversationDraft;
setProject(conversationDraft);
- if (activeProject.projectV2 && projectV2SyncAvailableRef.current) {
+ if (
+ activeProject.projectV2
+ && projectV2SyncAvailableRef.current
+ && activeProvider !== "free"
+ ) {
try {
await fetch("/api/access", {
credentials: "same-origin",
@@ -1662,10 +1785,9 @@ export function ProjectStudio() {
accept: "application/json",
"content-type": "application/json",
};
- const key =
- provider === "free" || provider === "gateway"
- ? null
- : window.sessionStorage.getItem(`drops-studio:${provider}`);
+ const key = provider === "gateway"
+ ? null
+ : window.sessionStorage.getItem(`drops-studio:${provider}`);
if (provider === "openrouter" && key) {
headers["x-openrouter-key"] = key;
} else if (key) {
@@ -1812,7 +1934,27 @@ export function ProjectStudio() {
provider === "free"
? null
: window.sessionStorage.getItem(`drops-studio:${provider}`);
- if (provider === "custom" && key) {
+ if (provider === "free") {
+ const deterministic = selectedBlock?.kind === "element"
+ ? createFreeElementDirectorProposal(
+ activeProject.spec,
+ instruction,
+ selectedBlock,
+ )
+ : createFreeDirectorProposal(
+ activeProject.spec,
+ instruction,
+ selectedBlock?.id,
+ );
+ proposal = {
+ ...deterministic,
+ label: "Free Director deterministic change set",
+ summary: [
+ ...deterministic.summary,
+ "Applying this proposal refreshes the generated Project V2 files; run Builder afterward for a verified Sandbox preview.",
+ ],
+ };
+ } else if (provider === "custom" && key) {
const endpoint = window.sessionStorage.getItem(
"drops-studio:custom-endpoint",
);
@@ -1933,10 +2075,7 @@ export function ProjectStudio() {
method: "POST",
headers,
body: JSON.stringify({
- provider:
- provider === "free" || provider === "gateway"
- ? undefined
- : provider,
+ provider: provider === "gateway" ? undefined : provider,
model,
guestId: window.sessionStorage.getItem("drops-studio:guest-id"),
prompt: `Revise the existing product without changing its category (${activeProject.spec.presetId}).\nUser change: ${instruction}\nSelected canvas item: ${JSON.stringify(selectedBlock ?? { kind: "product", label: "whole product" })}.\nIf the selected item kind is element, use its exact id in elementEdit and return only the requested focused style/copy change there while preserving the rest of the product.\nCurrent product: ${JSON.stringify({ name: activeProject.spec.name, tagline: activeProject.spec.tagline, description: activeProject.spec.description, tools: activeProject.spec.tools })}\nCurrent blueprint: ${JSON.stringify(activeProject.spec.blueprint)}\nCurrent design: ${JSON.stringify({ theme: activeProject.spec.theme, design: activeProject.spec.design, experience: activeProject.spec.experience, gameDirection: activeProject.spec.gameDirection, elements: activeProject.spec.elements })}`,
@@ -2188,6 +2327,13 @@ export function ProjectStudio() {
const currentProject =
commitPendingSpec() ?? projectRef.current ?? project;
if (!currentProject) return;
+ const sandboxPreviewUrl = currentProjectV2PreviewUrl(
+ currentProject.projectV2,
+ );
+ if (sandboxPreviewUrl) {
+ window.open(sandboxPreviewUrl, "_blank", "noopener,noreferrer");
+ return;
+ }
if (currentProject.publishedUrl && !dirty)
window.open(
currentProject.publishedUrl,
@@ -2950,6 +3096,11 @@ export function ProjectStudio() {
const legacyPublication = published && !managedPublication;
const quality =
qualityReport ?? evaluateProjectQuality(project.spec, project.html);
+ const builderEvidence = projectV2BuildEvidence(project.projectV2);
+ const hasProjectV2 = Boolean(project.projectV2);
+ const releaseEvidenceReady = hasProjectV2
+ ? builderEvidence.verified
+ : quality.readyToPublish;
const reality = getProductReality(project.spec.presetId);
const externalSetup = quality.launchStatus === "external-setup-required";
const researchOnly = quality.launchStatus === "research-only";
@@ -3035,10 +3186,18 @@ export function ProjectStudio() {
? "Research app published"
: "Web app published"
: dirty
- ? "Edits pending"
+ ? builderEvidence.verified
+ ? "Verified draft"
+ : hasProjectV2
+ ? "Build pending"
+ : "Edits pending"
: externalSetup
? "Needs connection"
- : "Draft"}
+ : hasProjectV2
+ ? builderEvidence.verified
+ ? "Verified draft"
+ : "Build pending"
+ : "Draft"}
@@ -3201,10 +3360,22 @@ export function ProjectStudio() {
Foundation
DropsTab × guided Drops Bot setup
-
+
4
Ship
- {quality.score}/100 quality
+
+ {builderEvidence.verified
+ ? `${builderEvidence.passed}/${builderEvidence.total} builder checks`
+ : hasProjectV2
+ ? `${builderEvidence.passed}/${builderEvidence.total} checks · run Builder`
+ : `${quality.score}/100 legacy publish quality`}
+
@@ -4231,7 +4402,11 @@ export function ProjectStudio() {
{
- window.location.href = "/?connections=1";
+ window.open(
+ "/?connections=1",
+ "_blank",
+ "noopener,noreferrer",
+ );
}}
>
{
- window.location.href = "/?connections=1";
+ window.open(
+ "/?connections=1&provider=dropstab",
+ "_blank",
+ "noopener,noreferrer",
+ );
}}
>
- {quality.score}/100
+ {hasProjectV2
+ ? `${builderEvidence.passed}/${builderEvidence.total}`
+ : `${quality.score}/100`}
- {quality.readyToPublish
+ {builderEvidence.verified
+ ? "Project V2 build verified"
+ : hasProjectV2
+ ? "Project V2 build pending"
+ : quality.readyToPublish
? releaseLabel
: "Build needs attention"}
- {externalSetup
+ {builderEvidence.verified
+ ? "Typecheck, lint, tests, production build and live Sandbox preview passed for this file revision. The legacy score below applies only to standalone /p publishing."
+ : hasProjectV2
+ ? `${builderEvidence.passed}/${builderEvidence.total} current-revision checks have verified evidence. Open Builder to run the remaining checks and start the live preview.`
+ : externalSetup
? "The web setup app can publish, but the external outcome is not live until it is connected and verified."
: "Deterministic checks run on every edit and before every publish."}
@@ -4505,6 +4696,29 @@ export function ProjectStudio() {
+
+ setCanvasZoom((value) => Math.max(60, value - 10))}
+ >
+
+ setCanvasZoom(100)}
+ >
+ {canvasZoom}%
+
+ setCanvasZoom((value) => Math.min(160, value + 10))}
+ >
+
+
setTab("quality")}
>
-
-
-
+
+
+
+
+
+