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

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>
+  )
+}
+