"use client"
import { useState } from "react"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Progress } from "@/components/ui/progress"
import { Slider } from "@/components/ui/slider"
import { Switch } from "@/components/ui/switch"
import { Textarea } from "@/components/ui/textarea"
import {
ArrowRight,
AudioLines,
BrainCircuit,
CheckCircle2,
Download,
Globe2,
HardDrive,
Languages,
Mic2,
Music4,
Sparkles,
Volume2,
Wand2,
Waveform,
} from "lucide-react"
const genres = [
"Afrobeats",
"Amapiano",
"Gospel",
"Trap",
"Cinematic",
"Dancehall",
"R&B",
"Bongo Flava",
]
const languages = ["English", "Swahili", "French", "Yoruba", "Hindi", "Arabic", "Spanish", "Zulu"]
const beatModes = [
{ name: "Songwriter", detail: "Writes structure, hooks, and harmonies from one prompt." },
{ name: "Beat Architect", detail: "
I notice your message appears to be cut off mid-sentence (it ends at { name: "Beat Architect", detail: ").
Could you please clarify what you'd like me to help with? Are you looking to:
Let me know what changes you'd like to make to EchoSphere Studio, and I'll update it accordingly!
"use client"
import type { ReactNode } from "react"
import { PiAuthProvider, usePiAuth } from "@/contexts/pi-auth-context"
import { AuthLoadingScreen } from "@/components/auth-loading-screen"
const isLocalDevBypassEnabled =
process.env.NODE_ENV !== "production" &&
process.env.NEXT_PUBLIC_LOCAL_DEV_BYPASS === "true"
function AppContent({ children }: { children: ReactNode }) {
const { isAuthenticated } = usePiAuth()
if (!isAuthenticated) {
return <AuthLoadingScreen />
}
return <>{children}</>
}
export function AppWrapper({ children }: { children: ReactNode }) {
if (isLocalDevBypassEnabled) {
return <>{children}</>
}
return (
<PiAuthProvider>
<AppContent>{children}</AppContent>
</PiAuthProvider>
)
}
I see you've provided code for authentication and beat modes. Let me check the current app structure and understand what you'd like me to implement.
Great! I can see the project already has authentication context set up. Let me read the app layout and auth context to understand the current structure:
I can see the authentication is already set up. Now I need to understand what you want to implement. Your previous message showed beat modes but was incomplete.
Could you please clarify what you'd like me to do? Here are some questions:
Please provide the complete code snippet or detailed description of:
Once I have this information, I'll update the app accordingly!
import type React from "react";
import type { Metadata } from "next";
import { GeistSans } from "geist/font/sans";
import { GeistMono } from "geist/font/mono";
import { AppWrapper } from "@/components/app-wrapper";
import "./globals.css";
export const metadata: Metadata = {
title: "EchoSphere Studio",
description: "Local-first AI music creation studio for multilingual songwriting, vocal mixing, and professional mastering.",
generator: "Codex",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en" className="dark">
<head>
<style>{ html { font-family: ${GeistSans.style.fontFamily}; --font-sans: ${GeistSans.variable}; --font-mono: ${GeistMono.variable}; } }</style>
</head>
<body>
<AppWrapper>{children}</AppWrapper>
</body>
</html>
);
}