feat: Add Next.js 15 glassmorphism frontend for DAARION MVP

apps/web/src/app/city/[slug]/page.tsx

@@ -0,0 +1,205 @@
+import Link from 'next/link'
+import { ArrowLeft, Users, MessageSquare, FileText, Clock, Send } from 'lucide-react'
+import { api, CityRoom } from '@/lib/api'
+import { formatDate } from '@/lib/utils'
+import { notFound } from 'next/navigation'
+
+// Force dynamic rendering - don't prerender at build time
+export const dynamic = 'force-dynamic'
+
+interface PageProps {
+  params: Promise<{ slug: string }>
+}
+
+async function getRoom(slug: string): Promise<CityRoom | null> {
+  try {
+    return await api.getCityRoom(slug)
+  } catch (error) {
+    console.error('Failed to fetch room:', error)
+    return null
+  }
+}
+
+export default async function RoomPage({ params }: PageProps) {
+  const { slug } = await params
+  const room = await getRoom(slug)
+
+  if (!room) {
+    notFound()
+  }
+
+  return (
+    <div className="min-h-screen">
+      {/* Header */}
+      <div className="px-4 py-6 border-b border-white/5">
+        <div className="max-w-6xl mx-auto">
+          <Link
+            href="/city"
+            className="inline-flex items-center gap-2 text-slate-400 hover:text-white transition-colors mb-4"
+          >
+            <ArrowLeft className="w-4 h-4" />
+            Назад до кімнат
+          </Link>
+
+          <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+            <div>
+              <h1 className="text-2xl sm:text-3xl font-bold text-white">
+                {room.name}
+              </h1>
+              <p className="text-slate-400 mt-1">
+                {room.description || 'Без опису'}
+              </p>
+            </div>
+
+            <div className="flex items-center gap-4">
+              <div className="flex items-center gap-2 text-sm">
+                <span className="w-2 h-2 rounded-full bg-emerald-400 animate-pulse" />
+                <span className="text-emerald-400">{room.members_online} онлайн</span>
+              </div>
+              {room.is_default && (
+                <span className="px-3 py-1 text-xs font-medium bg-cyan-500/20 text-cyan-400 rounded-full">
+                  Default Room
+                </span>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Main Content */}
+      <div className="max-w-6xl mx-auto px-4 py-6">
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+          {/* Chat Area */}
+          <div className="lg:col-span-2">
+            <div className="glass-panel h-[500px] sm:h-[600px] flex flex-col">
+              {/* Chat Header */}
+              <div className="px-6 py-4 border-b border-white/10">
+                <div className="flex items-center gap-2">
+                  <MessageSquare className="w-5 h-5 text-cyan-400" />
+                  <span className="font-medium text-white">Чат кімнати</span>
+                </div>
+              </div>
+
+              {/* Messages Placeholder */}
+              <div className="flex-1 flex items-center justify-center p-6">
+                <div className="text-center">
+                  <div className="w-16 h-16 mx-auto mb-4 rounded-full bg-slate-800/50 flex items-center justify-center">
+                    <MessageSquare className="w-8 h-8 text-slate-600" />
+                  </div>
+                  <h3 className="text-lg font-medium text-white mb-2">
+                    Чат скоро буде доступний
+                  </h3>
+                  <p className="text-sm text-slate-400 max-w-sm">
+                    Matrix/WebSocket інтеграція буде додана в наступному оновленні. 
+                    Поки що ви можете переглядати інформацію про кімнату.
+                  </p>
+                </div>
+              </div>
+
+              {/* Input Placeholder */}
+              <div className="px-4 py-4 border-t border-white/10">
+                <div className="flex gap-3">
+                  <input
+                    type="text"
+                    placeholder="Напишіть повідомлення..."
+                    disabled
+                    className="flex-1 px-4 py-3 bg-slate-800/50 border border-white/10 rounded-xl text-white placeholder-slate-500 focus:outline-none focus:border-cyan-500/50 disabled:opacity-50 disabled:cursor-not-allowed"
+                  />
+                  <button
+                    disabled
+                    className="px-4 py-3 bg-cyan-500/20 text-cyan-400 rounded-xl disabled:opacity-50 disabled:cursor-not-allowed"
+                  >
+                    <Send className="w-5 h-5" />
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Sidebar */}
+          <div className="space-y-6">
+            {/* Room Info */}
+            <div className="glass-panel p-6">
+              <h3 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
+                <FileText className="w-5 h-5 text-cyan-400" />
+                Інформація
+              </h3>
+              
+              <div className="space-y-4">
+                <InfoRow label="ID" value={room.id} />
+                <InfoRow label="Slug" value={room.slug} />
+                <InfoRow 
+                  label="Створено" 
+                  value={formatDate(room.created_at)} 
+                />
+                <InfoRow 
+                  label="Автор" 
+                  value={room.created_by || 'Система'} 
+                />
+              </div>
+            </div>
+
+            {/* Online Users */}
+            <div className="glass-panel p-6">
+              <h3 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
+                <Users className="w-5 h-5 text-cyan-400" />
+                Учасники онлайн
+              </h3>
+              
+              {room.members_online > 0 ? (
+                <div className="flex flex-wrap gap-2">
+                  {Array.from({ length: Math.min(room.members_online, 8) }).map((_, i) => (
+                    <div
+                      key={i}
+                      className="w-10 h-10 rounded-full bg-gradient-to-br from-cyan-500/30 to-blue-600/30 flex items-center justify-center text-sm font-medium text-cyan-400"
+                    >
+                      U{i + 1}
+                    </div>
+                  ))}
+                  {room.members_online > 8 && (
+                    <div className="w-10 h-10 rounded-full bg-slate-700/50 flex items-center justify-center text-sm text-slate-400">
+                      +{room.members_online - 8}
+                    </div>
+                  )}
+                </div>
+              ) : (
+                <p className="text-sm text-slate-400">
+                  Наразі ніхто не онлайн
+                </p>
+              )}
+            </div>
+
+            {/* Co-Memory Placeholder */}
+            <div className="glass-panel p-6">
+              <h3 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
+                <Clock className="w-5 h-5 text-cyan-400" />
+                Co-Memory / Files
+              </h3>
+              
+              <div className="text-center py-6">
+                <div className="w-12 h-12 mx-auto mb-3 rounded-full bg-slate-800/50 flex items-center justify-center">
+                  <FileText className="w-6 h-6 text-slate-600" />
+                </div>
+                <p className="text-sm text-slate-400">
+                  Спільна памʼять та файли будуть доступні скоро
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function InfoRow({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="flex justify-between items-center text-sm">
+      <span className="text-slate-400">{label}</span>
+      <span className="text-white font-mono text-xs bg-slate-800/50 px-2 py-1 rounded">
+        {value}
+      </span>
+    </div>
+  )
+}
+

apps/web/src/app/city/page.tsx

@@ -0,0 +1,148 @@
+import Link from 'next/link'
+import { Building2, Users, Star, MessageSquare, ArrowRight } from 'lucide-react'
+import { api, CityRoom } from '@/lib/api'
+import { cn } from '@/lib/utils'
+
+// Force dynamic rendering - don't prerender at build time
+export const dynamic = 'force-dynamic'
+
+async function getCityRooms(): Promise<CityRoom[]> {
+  try {
+    return await api.getCityRooms()
+  } catch (error) {
+    console.error('Failed to fetch city rooms:', error)
+    return []
+  }
+}
+
+export default async function CityPage() {
+  const rooms = await getCityRooms()
+
+  return (
+    <div className="min-h-screen px-4 py-8">
+      <div className="max-w-6xl mx-auto">
+        {/* Header */}
+        <div className="mb-8">
+          <div className="flex items-center gap-3 mb-4">
+            <div className="p-3 rounded-xl bg-gradient-to-br from-cyan-500/20 to-blue-600/20">
+              <Building2 className="w-8 h-8 text-cyan-400" />
+            </div>
+            <div>
+              <h1 className="text-3xl font-bold text-white">Кімнати Міста</h1>
+              <p className="text-slate-400">Оберіть кімнату для спілкування</p>
+            </div>
+          </div>
+        </div>
+
+        {/* Rooms Grid */}
+        {rooms.length === 0 ? (
+          <div className="glass-panel p-12 text-center">
+            <Building2 className="w-16 h-16 text-slate-600 mx-auto mb-4" />
+            <h2 className="text-xl font-semibold text-white mb-2">
+              Кімнати не знайдено
+            </h2>
+            <p className="text-slate-400">
+              API недоступний або кімнати ще не створені
+            </p>
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6">
+            {rooms.map((room) => (
+              <RoomCard key={room.id} room={room} />
+            ))}
+          </div>
+        )}
+
+        {/* Stats Section */}
+        {rooms.length > 0 && (
+          <div className="mt-12 grid grid-cols-2 sm:grid-cols-4 gap-4">
+            <StatCard
+              label="Кімнат"
+              value={rooms.length}
+              icon={Building2}
+            />
+            <StatCard
+              label="Онлайн"
+              value={rooms.reduce((sum, r) => sum + r.members_online, 0)}
+              icon={Users}
+            />
+            <StatCard
+              label="За замовч."
+              value={rooms.filter(r => r.is_default).length}
+              icon={Star}
+            />
+            <StatCard
+              label="Активних"
+              value={rooms.filter(r => r.members_online > 0).length}
+              icon={MessageSquare}
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+function RoomCard({ room }: { room: CityRoom }) {
+  const isActive = room.members_online > 0
+
+  return (
+    <Link
+      href={`/city/${room.slug}`}
+      className="glass-panel-hover p-5 group block"
+    >
+      <div className="flex items-start justify-between mb-3">
+        <h3 className="text-lg font-semibold text-white group-hover:text-cyan-400 transition-colors">
+          {room.name}
+        </h3>
+        <div className="flex items-center gap-2">
+          {room.is_default && (
+            <span className="px-2 py-0.5 text-xs font-medium bg-cyan-500/20 text-cyan-400 rounded-full">
+              Default
+            </span>
+          )}
+        </div>
+      </div>
+
+      <p className="text-sm text-slate-400 mb-4 line-clamp-2">
+        {room.description || 'Без опису'}
+      </p>
+
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-4 text-sm">
+          <span className={cn(
+            'flex items-center gap-1.5',
+            isActive ? 'text-emerald-400' : 'text-slate-500'
+          )}>
+            <span className={cn(
+              'w-2 h-2 rounded-full',
+              isActive ? 'bg-emerald-400 animate-pulse' : 'bg-slate-600'
+            )} />
+            {room.members_online} онлайн
+          </span>
+        </div>
+
+        <ArrowRight className="w-5 h-5 text-slate-500 group-hover:text-cyan-400 group-hover:translate-x-1 transition-all" />
+      </div>
+    </Link>
+  )
+}
+
+function StatCard({ 
+  label, 
+  value, 
+  icon: Icon 
+}: { 
+  label: string
+  value: number
+  icon: React.ComponentType<{ className?: string }>
+}) {
+  return (
+    <div className="glass-panel p-4 text-center">
+      <Icon className="w-5 h-5 text-cyan-400 mx-auto mb-2" />
+      <div className="text-2xl font-bold text-white">{value}</div>
+      <div className="text-xs text-slate-400">{label}</div>
+    </div>
+  )
+}
+

apps/web/src/app/globals.css

@@ -0,0 +1,113 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --foreground-rgb: 255, 255, 255;
+  --background-start-rgb: 15, 23, 42;
+  --background-end-rgb: 8, 47, 73;
+}
+
+body {
+  color: rgb(var(--foreground-rgb));
+  background: linear-gradient(
+    135deg,
+    rgb(var(--background-start-rgb)) 0%,
+    rgb(var(--background-end-rgb)) 50%,
+    rgb(15, 23, 42) 100%
+  );
+  min-height: 100vh;
+}
+
+/* Glassmorphism utilities */
+@layer components {
+  .glass-panel {
+    @apply bg-white/5 backdrop-blur-md border border-white/10 rounded-2xl;
+  }
+  
+  .glass-panel-hover {
+    @apply glass-panel transition-all duration-300 hover:bg-white/10 hover:border-white/20 hover:scale-[1.02];
+  }
+  
+  .glass-card {
+    @apply bg-slate-900/50 backdrop-blur-lg border border-slate-700/50 rounded-xl shadow-xl;
+  }
+  
+  .glow-accent {
+    box-shadow: 0 0 30px rgba(14, 165, 233, 0.15);
+  }
+  
+  .text-gradient {
+    @apply bg-gradient-to-r from-cyan-400 via-sky-500 to-blue-600 bg-clip-text text-transparent;
+  }
+}
+
+/* Ambient background effects */
+.ambient-bg {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+  z-index: -1;
+}
+
+.ambient-bg::before {
+  content: '';
+  position: absolute;
+  top: -50%;
+  left: -50%;
+  width: 200%;
+  height: 200%;
+  background: radial-gradient(
+    ellipse at 30% 20%,
+    rgba(14, 165, 233, 0.15) 0%,
+    transparent 50%
+  ),
+  radial-gradient(
+    ellipse at 70% 80%,
+    rgba(6, 182, 212, 0.1) 0%,
+    transparent 50%
+  );
+  animation: ambient-drift 20s ease-in-out infinite;
+}
+
+@keyframes ambient-drift {
+  0%, 100% {
+    transform: translate(0, 0) rotate(0deg);
+  }
+  33% {
+    transform: translate(2%, 2%) rotate(1deg);
+  }
+  66% {
+    transform: translate(-1%, 1%) rotate(-1deg);
+  }
+}
+
+/* Scrollbar styling */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: rgba(15, 23, 42, 0.5);
+}
+
+::-webkit-scrollbar-thumb {
+  background: rgba(100, 116, 139, 0.5);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(100, 116, 139, 0.7);
+}
+
+/* Mobile optimizations */
+@media (max-width: 640px) {
+  .glass-panel, .glass-card {
+    @apply rounded-xl;
+  }
+}
+

apps/web/src/app/layout.tsx

@@ -0,0 +1,48 @@
+import type { Metadata, Viewport } from 'next'
+import { Inter } from 'next/font/google'
+import './globals.css'
+import { Navigation } from '@/components/Navigation'
+
+const inter = Inter({ 
+  subsets: ['latin', 'cyrillic'],
+  display: 'swap',
+  variable: '--font-inter',
+})
+
+export const metadata: Metadata = {
+  title: 'DAARION - Місто Дарів',
+  description: 'Децентралізована платформа для мікро-спільнот з AI-агентами',
+  keywords: ['DAARION', 'DAO', 'AI', 'agents', 'community', 'decentralized'],
+  authors: [{ name: 'DAARION Team' }],
+}
+
+export const viewport: Viewport = {
+  width: 'device-width',
+  initialScale: 1,
+  maximumScale: 1,
+  themeColor: '#0c4a6e',
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="uk" className={inter.variable}>
+      <body className={`${inter.className} antialiased`}>
+        {/* Ambient background effect */}
+        <div className="ambient-bg" />
+        
+        {/* Navigation */}
+        <Navigation />
+        
+        {/* Main content */}
+        <main className="min-h-screen pt-16">
+          {children}
+        </main>
+      </body>
+    </html>
+  )
+}
+

apps/web/src/app/not-found.tsx

@@ -0,0 +1,38 @@
+'use client'
+
+import Link from 'next/link'
+import { Home, ArrowLeft } from 'lucide-react'
+
+export default function NotFound() {
+  return (
+    <div className="min-h-screen flex items-center justify-center px-4">
+      <div className="text-center">
+        <h1 className="text-8xl font-bold text-gradient mb-4">404</h1>
+        <h2 className="text-2xl font-semibold text-white mb-4">
+          Сторінку не знайдено
+        </h2>
+        <p className="text-slate-400 mb-8 max-w-md mx-auto">
+          Вибачте, але сторінка, яку ви шукаєте, не існує або була переміщена.
+        </p>
+        
+        <div className="flex flex-col sm:flex-row gap-4 justify-center">
+          <Link
+            href="/"
+            className="inline-flex items-center justify-center gap-2 px-6 py-3 bg-gradient-to-r from-cyan-500 to-blue-600 rounded-xl font-medium hover:from-cyan-400 hover:to-blue-500 transition-all"
+          >
+            <Home className="w-5 h-5" />
+            На головну
+          </Link>
+          <button
+            onClick={() => window.history.back()}
+            className="inline-flex items-center justify-center gap-2 px-6 py-3 glass-panel hover:bg-white/10 transition-all font-medium"
+          >
+            <ArrowLeft className="w-5 h-5" />
+            Назад
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
+

apps/web/src/app/page.tsx

@@ -0,0 +1,163 @@
+import Link from 'next/link'
+import { ArrowRight, Building2, Bot, Users, Zap, Shield, Globe } from 'lucide-react'
+import { StatusIndicator } from '@/components/StatusIndicator'
+
+const features = [
+  {
+    icon: Building2,
+    title: 'Віртуальне Місто',
+    description: 'Кімнати для спілкування, колаборації та спільних проєктів',
+  },
+  {
+    icon: Bot,
+    title: 'AI Агенти',
+    description: 'Персональні та командні агенти для автоматизації задач',
+  },
+  {
+    icon: Users,
+    title: 'MicroDAO',
+    description: 'Децентралізоване управління для малих спільнот',
+  },
+  {
+    icon: Shield,
+    title: 'Приватність',
+    description: 'Ваші дані залишаються під вашим контролем',
+  },
+]
+
+export default function HomePage() {
+  return (
+    <div className="min-h-screen">
+      {/* Hero Section */}
+      <section className="relative px-4 pt-12 pb-20 sm:pt-20 sm:pb-32">
+        <div className="max-w-6xl mx-auto">
+          {/* Status badge */}
+          <div className="flex justify-center mb-8">
+            <StatusIndicator />
+          </div>
+
+          {/* Main heading */}
+          <div className="text-center space-y-6 mb-12">
+            <h1 className="text-4xl sm:text-5xl md:text-6xl font-bold tracking-tight">
+              <span className="text-white">Ласкаво просимо до</span>
+              <br />
+              <span className="text-gradient">DAARION</span>
+            </h1>
+            
+            <p className="text-lg sm:text-xl text-slate-300 max-w-2xl mx-auto leading-relaxed">
+              Децентралізована платформа для мікро-спільнот, 
+              де AI-агенти допомагають будувати майбутнє разом
+            </p>
+
+            {/* CTA buttons */}
+            <div className="flex flex-col sm:flex-row gap-4 justify-center pt-4">
+              <Link
+                href="/city"
+                className="inline-flex items-center justify-center gap-2 px-8 py-4 text-lg font-semibold bg-gradient-to-r from-cyan-500 to-blue-600 rounded-2xl hover:from-cyan-400 hover:to-blue-500 transition-all duration-300 shadow-lg shadow-cyan-500/25 hover:shadow-cyan-500/40 hover:scale-105"
+              >
+                <Building2 className="w-5 h-5" />
+                Увійти в Місто
+                <ArrowRight className="w-5 h-5" />
+              </Link>
+              
+              <Link
+                href="/secondme"
+                className="inline-flex items-center justify-center gap-2 px-8 py-4 text-lg font-semibold glass-panel hover:bg-white/10 transition-all duration-300"
+              >
+                <Bot className="w-5 h-5" />
+                Мій Second Me
+              </Link>
+            </div>
+          </div>
+
+          {/* Feature cards */}
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6">
+            {features.map((feature, index) => {
+              const Icon = feature.icon
+              return (
+                <div
+                  key={index}
+                  className="glass-panel-hover p-6 group"
+                >
+                  <div className="mb-4 inline-flex p-3 rounded-xl bg-gradient-to-br from-cyan-500/20 to-blue-600/20 group-hover:from-cyan-500/30 group-hover:to-blue-600/30 transition-colors">
+                    <Icon className="w-6 h-6 text-cyan-400" />
+                  </div>
+                  <h3 className="text-lg font-semibold text-white mb-2">
+                    {feature.title}
+                  </h3>
+                  <p className="text-sm text-slate-400 leading-relaxed">
+                    {feature.description}
+                  </p>
+                </div>
+              )
+            })}
+          </div>
+        </div>
+      </section>
+
+      {/* Vision Section */}
+      <section className="px-4 py-16 sm:py-24">
+        <div className="max-w-4xl mx-auto">
+          <div className="glass-panel p-8 sm:p-12 glow-accent">
+            <div className="flex items-center gap-3 mb-6">
+              <Globe className="w-8 h-8 text-cyan-400" />
+              <h2 className="text-2xl sm:text-3xl font-bold text-white">
+                Місто Дарів
+              </h2>
+            </div>
+            
+            <div className="space-y-4 text-slate-300 leading-relaxed">
+              <p>
+                <strong className="text-white">DAARION</strong> — це експериментальна платформа 
+                для побудови децентралізованих мікро-спільнот нового покоління.
+              </p>
+              
+              <ul className="space-y-3 mt-6">
+                <li className="flex items-start gap-3">
+                  <Zap className="w-5 h-5 text-cyan-400 mt-0.5 flex-shrink-0" />
+                  <span>
+                    <strong className="text-white">AI-First:</strong> Кожен учасник має персонального 
+                    цифрового двійника (Second Me), який навчається та допомагає
+                  </span>
+                </li>
+                <li className="flex items-start gap-3">
+                  <Users className="w-5 h-5 text-cyan-400 mt-0.5 flex-shrink-0" />
+                  <span>
+                    <strong className="text-white">Малі спільноти:</strong> Оптимізовано для груп 
+                    5–50 людей з глибокою колаборацією
+                  </span>
+                </li>
+                <li className="flex items-start gap-3">
+                  <Shield className="w-5 h-5 text-cyan-400 mt-0.5 flex-shrink-0" />
+                  <span>
+                    <strong className="text-white">Децентралізація:</strong> MicroDAO для прозорого 
+                    управління та розподілу ресурсів
+                  </span>
+                </li>
+              </ul>
+            </div>
+
+            <div className="mt-8 pt-6 border-t border-white/10">
+              <Link
+                href="/city"
+                className="inline-flex items-center gap-2 text-cyan-400 hover:text-cyan-300 font-medium transition-colors"
+              >
+                Дослідити кімнати міста
+                <ArrowRight className="w-4 h-4" />
+              </Link>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Footer */}
+      <footer className="px-4 py-8 border-t border-white/5">
+        <div className="max-w-6xl mx-auto flex flex-col sm:flex-row items-center justify-between gap-4 text-sm text-slate-500">
+          <p>© 2024 DAARION. Місто Дарів.</p>
+          <p>MVP v1.0 — Phase 1-3</p>
+        </div>
+      </footer>
+    </div>
+  )
+}
+

apps/web/src/app/secondme/page.tsx

@@ -0,0 +1,192 @@
+import { User, Brain, MessageSquare, Target, Sparkles, Activity, Clock } from 'lucide-react'
+import { api, SecondMeProfile } from '@/lib/api'
+import { formatRelativeTime } from '@/lib/utils'
+
+// Force dynamic rendering - don't prerender at build time
+export const dynamic = 'force-dynamic'
+
+async function getProfile(): Promise<SecondMeProfile | null> {
+  try {
+    return await api.getSecondMeProfile()
+  } catch (error) {
+    console.error('Failed to fetch SecondMe profile:', error)
+    return null
+  }
+}
+
+export default async function SecondMePage() {
+  const profile = await getProfile()
+
+  return (
+    <div className="min-h-screen px-4 py-8">
+      <div className="max-w-4xl mx-auto">
+        {/* Header */}
+        <div className="mb-8">
+          <div className="flex items-center gap-3 mb-4">
+            <div className="p-3 rounded-xl bg-gradient-to-br from-violet-500/20 to-purple-600/20">
+              <User className="w-8 h-8 text-violet-400" />
+            </div>
+            <div>
+              <h1 className="text-3xl font-bold text-white">Second Me</h1>
+              <p className="text-slate-400">Ваш персональний цифровий двійник</p>
+            </div>
+          </div>
+        </div>
+
+        {/* Profile Card */}
+        <div className="glass-panel p-6 sm:p-8 mb-8 glow-accent">
+          <div className="flex flex-col sm:flex-row items-center sm:items-start gap-6">
+            {/* Avatar */}
+            <div className="relative">
+              <div className="w-24 h-24 sm:w-32 sm:h-32 rounded-full bg-gradient-to-br from-violet-500 to-purple-600 flex items-center justify-center">
+                <Sparkles className="w-12 h-12 sm:w-16 sm:h-16 text-white" />
+              </div>
+              <div className="absolute -bottom-1 -right-1 w-8 h-8 rounded-full bg-emerald-500 border-4 border-slate-900 flex items-center justify-center">
+                <Activity className="w-4 h-4 text-white" />
+              </div>
+            </div>
+
+            {/* Info */}
+            <div className="flex-1 text-center sm:text-left">
+              <h2 className="text-2xl font-bold text-white mb-2">
+                {profile?.user_id || 'Гість'}
+              </h2>
+              <p className="text-slate-400 mb-4">
+                Агент: <span className="text-violet-400 font-mono">{profile?.agent_id || 'N/A'}</span>
+              </p>
+              
+              <div className="flex flex-wrap gap-4 justify-center sm:justify-start">
+                <StatBadge
+                  icon={MessageSquare}
+                  label="Взаємодій"
+                  value={profile?.total_interactions ?? 0}
+                />
+                <StatBadge
+                  icon={Clock}
+                  label="Остання"
+                  value={profile?.last_interaction ? formatRelativeTime(profile.last_interaction) : 'Ніколи'}
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Feature Sections */}
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {/* Memory Section */}
+          <FeatureCard
+            icon={Brain}
+            title="Памʼять"
+            description="Ваш цифровий двійник запамʼятовує ваші вподобання, стиль спілкування та контекст розмов"
+            status="coming"
+          />
+
+          {/* Tasks Section */}
+          <FeatureCard
+            icon={Target}
+            title="Задачі"
+            description="Second Me допомагає відстежувати ваші задачі та нагадує про важливі справи"
+            status="coming"
+          />
+
+          {/* Agents Section */}
+          <FeatureCard
+            icon={Sparkles}
+            title="Агенти"
+            description="Координація з іншими AI-агентами системи для виконання складних завдань"
+            status="coming"
+          />
+        </div>
+
+        {/* Chat with Second Me */}
+        <div className="mt-8">
+          <div className="glass-panel p-6">
+            <h3 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
+              <MessageSquare className="w-5 h-5 text-violet-400" />
+              Поговорити з Second Me
+            </h3>
+
+            <div className="bg-slate-800/30 rounded-xl p-6 text-center">
+              <div className="w-16 h-16 mx-auto mb-4 rounded-full bg-violet-500/20 flex items-center justify-center">
+                <MessageSquare className="w-8 h-8 text-violet-400" />
+              </div>
+              <h4 className="text-white font-medium mb-2">
+                Чат скоро буде доступний
+              </h4>
+              <p className="text-sm text-slate-400 max-w-md mx-auto">
+                Функція спілкування з вашим цифровим двійником буде додана в наступному оновленні. 
+                Second Me зможе відповідати на питання, допомагати з задачами та навчатися від вас.
+              </p>
+            </div>
+
+            {/* Input placeholder */}
+            <div className="mt-4 flex gap-3">
+              <input
+                type="text"
+                placeholder="Напишіть повідомлення Second Me..."
+                disabled
+                className="flex-1 px-4 py-3 bg-slate-800/50 border border-white/10 rounded-xl text-white placeholder-slate-500 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed"
+              />
+              <button
+                disabled
+                className="px-6 py-3 bg-violet-500/20 text-violet-400 rounded-xl font-medium disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                Надіслати
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function StatBadge({ 
+  icon: Icon, 
+  label, 
+  value 
+}: { 
+  icon: React.ComponentType<{ className?: string }>
+  label: string
+  value: number | string
+}) {
+  return (
+    <div className="flex items-center gap-2 px-4 py-2 bg-slate-800/50 rounded-xl">
+      <Icon className="w-4 h-4 text-violet-400" />
+      <span className="text-sm text-slate-400">{label}:</span>
+      <span className="text-sm font-medium text-white">{value}</span>
+    </div>
+  )
+}
+
+function FeatureCard({
+  icon: Icon,
+  title,
+  description,
+  status,
+}: {
+  icon: React.ComponentType<{ className?: string }>
+  title: string
+  description: string
+  status: 'active' | 'coming'
+}) {
+  return (
+    <div className="glass-panel p-6 relative overflow-hidden">
+      {status === 'coming' && (
+        <div className="absolute top-3 right-3">
+          <span className="px-2 py-0.5 text-xs font-medium bg-amber-500/20 text-amber-400 rounded-full">
+            Скоро
+          </span>
+        </div>
+      )}
+      
+      <div className="mb-4 inline-flex p-3 rounded-xl bg-gradient-to-br from-violet-500/20 to-purple-600/20">
+        <Icon className="w-6 h-6 text-violet-400" />
+      </div>
+      
+      <h3 className="text-lg font-semibold text-white mb-2">{title}</h3>
+      <p className="text-sm text-slate-400 leading-relaxed">{description}</p>
+    </div>
+  )
+}
+