feat: restructure into XFlow monorepo with Nuxt 4, Modular Onion Monolith, Android client, and Desktop CLI

apps/web/app/pages/admin.vue

@@ -0,0 +1,3 @@
+<template>
+  <NuxtPage />
+</template>

apps/web/app/pages/admin/groups.vue

@@ -0,0 +1,3 @@
+<template>
+  <NuxtPage />
+</template>

apps/web/app/pages/admin/groups/[id].vue

@@ -0,0 +1,246 @@
+<template>
+  <div class="min-h-screen bg-slate-950 p-6">
+    <div class="max-w-4xl mx-auto" v-if="group">
+      <div class="flex items-center gap-4 mb-8 text-sm">
+        <NuxtLink to="/admin/groups" class="text-slate-500 hover:text-white transition">Группы</NuxtLink>
+        <span class="text-slate-700">/</span>
+        <span class="text-slate-300">{{ group.name }}</span>
+      </div>
+
+      <div class="bg-slate-900 border border-slate-800 rounded-3xl p-8 mb-8">
+        <div class="flex items-center justify-between mb-6">
+          <h1 class="text-3xl font-bold text-white">{{ group.name }}</h1>
+          <button @click="deleteGroup" class="px-4 py-2 bg-red-900/20 text-red-400 hover:bg-red-900/40 rounded-lg text-sm transition">Удалить группу</button>
+        </div>
+        <p class="text-slate-400">{{ group.description || 'Нет описания' }}</p>
+      </div>
+
+      <!-- Members Section -->
+      <div class="bg-slate-900 border border-slate-800 rounded-3xl overflow-hidden mb-8">
+        <div class="p-6 border-b border-slate-800 flex items-center justify-between">
+          <h2 class="text-xl font-bold text-white">Участники ({{ members.length }})</h2>
+          <button @click="showAddMemberModal = true" class="px-4 py-2 bg-blue-600 hover:bg-blue-500 text-white rounded-lg text-sm font-bold transition">+ Добавить</button>
+        </div>
+        <div class="divide-y divide-slate-800">
+          <div v-for="m in members" :key="m.id" class="p-4 flex items-center justify-between hover:bg-slate-800/30 transition">
+            <div class="flex items-center gap-3">
+              <div class="w-10 h-10 bg-slate-800 rounded-full flex items-center justify-center font-bold text-slate-400">
+                {{ m.user.username.charAt(0).toUpperCase() }}
+              </div>
+              <div>
+                <div class="text-slate-200 font-medium">{{ m.user.username }}</div>
+                <div class="text-xs text-slate-500">
+                  <select 
+                    v-if="group.ownerId === auth.user.value?.id || auth.user.value?.role === 'admin'"
+                    :value="m.role"
+                    @change="(e) => updateMemberRole(m.userId, e.target.value)"
+                    class="bg-transparent border-none p-0 focus:ring-0 text-blue-400 cursor-pointer outline-none"
+                    :disabled="m.userId === group.ownerId"
+                  >
+                    <option value="admin">Админ</option>
+                    <option value="editor">Редактор</option>
+                    <option value="viewer">Зритель</option>
+                  </select>
+                  <span v-else>{{ m.role }}</span>
+                </div>
+              </div>
+            </div>
+            <button v-if="m.role !== 'admin'" @click="removeMember(m.userId)" class="text-slate-600 hover:text-red-400 transition text-xl">&times;</button>
+          </div>
+        </div>
+      </div>
+
+      <!-- Canvases Section -->
+      <div class="bg-slate-900 border border-slate-800 rounded-3xl overflow-hidden">
+        <div class="p-6 border-b border-slate-800 flex items-center justify-between">
+          <h2 class="text-xl font-bold text-white">Карты группы ({{ group.canvases?.length || 0 }})</h2>
+          <NuxtLink to="/canvases" class="px-4 py-2 bg-slate-800 hover:bg-slate-700 text-slate-300 rounded-lg text-sm font-bold transition">Управлять в Проектах</NuxtLink>
+        </div>
+        <div class="divide-y divide-slate-800">
+          <div v-for="c in group.canvases" :key="c.id" class="p-4 flex items-center justify-between hover:bg-slate-800/30 transition">
+            <div class="flex items-center gap-3">
+              <div class="w-10 h-10 bg-blue-900/20 rounded-lg flex items-center justify-center text-xl">🗺️</div>
+              <div>
+                <div class="text-slate-200 font-medium">{{ c.name }}</div>
+                <div class="text-[10px] text-slate-500 uppercase tracking-wider">Обновлена: {{ new Date(c.updatedAt).toLocaleDateString() }}</div>
+              </div>
+            </div>
+            <button @click="unassignCanvas(c.id)" class="text-slate-600 hover:text-red-400 transition text-sm font-bold">Отвязать</button>
+          </div>
+          <div v-if="!group.canvases?.length" class="p-8 text-center text-slate-500 italic">
+            В этой группе пока нет карт.
+          </div>
+        </div>
+      </div>
+      <!-- Add Member Modal -->
+      <div v-if="showAddMemberModal" class="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50 p-4" @click.self="showAddMemberModal = false">
+        <div class="bg-slate-900 border border-slate-700 rounded-3xl p-8 w-full max-w-md shadow-2xl">
+          <h2 class="text-2xl font-bold text-white mb-6 flex items-center gap-2">
+            <span>👤</span> Добавить участника
+          </h2>
+          
+          <div class="space-y-4">
+            <div>
+              <label class="text-xs font-bold text-slate-500 uppercase tracking-wider block mb-2">Поиск пользователя</label>
+              <div class="relative">
+                <input 
+                  v-model="searchQuery" 
+                  @input="searchUsers"
+                  placeholder="Введите имя или email..."
+                  class="w-full px-4 py-3 bg-slate-800 border border-slate-700 rounded-xl text-white outline-none focus:border-blue-500 transition"
+                />
+                <div v-if="searching" class="absolute right-4 top-3.5">
+                  <div class="animate-spin h-5 w-5 border-2 border-blue-500 border-t-transparent rounded-full"></div>
+                </div>
+              </div>
+            </div>
+
+            <!-- Search Results -->
+            <div v-if="searchResults.length > 0" class="max-h-60 overflow-y-auto bg-slate-800/50 rounded-xl border border-slate-700 divide-y divide-slate-700">
+              <div v-for="u in searchResults" :key="u.id" class="p-3 flex items-center justify-between hover:bg-slate-700/50 transition">
+                <div class="flex flex-col">
+                  <span class="text-sm font-medium text-white">{{ u.username }}</span>
+                  <span class="text-[10px] text-slate-500">{{ u.email }}</span>
+                </div>
+                <button 
+                  @click="addMember(u.id)"
+                  class="px-3 py-1 bg-blue-600 hover:bg-blue-500 text-white text-xs font-bold rounded-lg transition"
+                >
+                  Выбрать
+                </button>
+              </div>
+            </div>
+            <div v-else-if="searchQuery.length >= 2" class="text-center py-4 text-slate-500 text-sm">
+              Пользователи не найдены
+            </div>
+          </div>
+
+          <div class="mt-8">
+            <button @click="showAddMemberModal = false" class="w-full py-3 bg-slate-800 hover:bg-slate-700 text-slate-300 rounded-xl font-bold transition">
+              Закрыть
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+definePageMeta({
+  middleware: ['auth', 'admin']
+})
+
+const route = useRoute()
+const auth = useAuth()
+const group = ref(null)
+const members = ref([])
+const showAddMemberModal = ref(false)
+const searchQuery = ref('')
+const searchResults = ref([])
+const searching = ref(false)
+
+const searchUsers = async () => {
+  if (searchQuery.value.length < 2) {
+    searchResults.value = []
+    return
+  }
+  searching.value = true
+  try {
+    const data = await $fetch('/api/users/search', {
+      params: { q: searchQuery.value },
+      headers: { Authorization: `Bearer ${auth.token.value}` }
+    })
+    searchResults.value = data.users || []
+  } catch (e) {
+    console.error('Search failed', e)
+  } finally {
+    searching.value = false
+  }
+}
+
+const addMember = async (userId) => {
+  try {
+    await $fetch(`/api/groups/${route.params.id}/add-member`, {
+      method: 'POST',
+      body: { userId, role: 'member' },
+      headers: { Authorization: `Bearer ${auth.token.value}` }
+    })
+    showAddMemberModal.value = false
+    searchQuery.value = ''
+    searchResults.value = []
+    await fetchGroup()
+  } catch (e) {
+    alert(e.data?.message || 'Ошибка при добавлении')
+  }
+}
+
+const updateMemberRole = async (userId, role) => {
+  try {
+    await $fetch(`/api/groups/${route.params.id}/members`, {
+      method: 'PATCH',
+      body: { userId, role },
+      headers: { Authorization: `Bearer ${auth.token.value}` }
+    })
+    await fetchGroup()
+  } catch (e) {
+    alert('Ошибка при смене роли')
+  }
+}
+
+const removeMember = async (userId) => {
+  if (!confirm('Удалить участника из группы?')) return
+  try {
+    await $fetch(`/api/groups/${route.params.id}/members`, {
+      method: 'DELETE',
+      body: { userId },
+      headers: { Authorization: `Bearer ${auth.token.value}` }
+    })
+    await fetchGroup()
+  } catch (e) {
+    alert('Ошибка при удалении')
+  }
+}
+
+const unassignCanvas = async (canvasId) => {
+  if (!confirm('Отвязать карту от группы? Она станет личной картой владельца.')) return
+  try {
+    await $fetch(`/api/canvases/${canvasId}`, {
+      method: 'PATCH',
+      body: { groupId: null },
+      headers: { Authorization: `Bearer ${auth.token.value}` }
+    })
+    await fetchGroup()
+  } catch (e) {
+    alert('Ошибка при отвязке карты')
+  }
+}
+
+const fetchGroup = async () => {
+  try {
+    const data = await $fetch(`/api/groups/${route.params.id}`, {
+      headers: { Authorization: `Bearer ${auth.token.value}` }
+    })
+    group.value = data.group
+    members.value = data.group.members || []
+  } catch (e) {
+    console.error('Failed to fetch group', e)
+    navigateTo('/admin/groups')
+  }
+}
+
+const deleteGroup = async () => {
+  if (!confirm('Вы уверены, что хотите удалить эту группу?')) return
+  try {
+    await $fetch(`/api/groups/${route.params.id}`, {
+      method: 'DELETE',
+      headers: { Authorization: `Bearer ${auth.token.value}` }
+    })
+    navigateTo('/admin/groups')
+  } catch (e) {
+    alert('Ошибка при удалении')
+  }
+}
+
+onMounted(fetchGroup)
+</script>

apps/web/app/pages/admin/groups/index.vue

@@ -0,0 +1,173 @@
+<template>
+  <div class="min-h-screen bg-slate-950 p-6">
+    <div class="max-w-7xl mx-auto">
+      <div class="flex items-center justify-between mb-8">
+        <div>
+          <h1 class="text-3xl font-bold text-slate-100">Управление Группами</h1>
+          <p class="text-slate-400 mt-1">Создание и управление командами, участниками и правами</p>
+        </div>
+        <button 
+          @click="showCreateModal = true"
+          class="px-4 py-2 bg-blue-600 hover:bg-blue-500 text-white rounded-lg font-medium transition flex items-center gap-2 shadow-lg shadow-blue-900/20"
+        >
+          <span class="text-xl">+</span> Новая Группа
+        </button>
+      </div>
+
+      <!-- Loading State -->
+      <div v-if="loading" class="flex items-center justify-center h-64">
+        <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500"></div>
+      </div>
+
+      <!-- Groups Grid -->
+      <div v-else-if="groups.length > 0" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        <div 
+          v-for="group in groups" 
+          :key="group.id"
+          class="bg-slate-900 border border-slate-800 rounded-2xl p-6 hover:border-slate-700 transition group"
+        >
+          <div class="flex items-start justify-between mb-4">
+            <div class="w-12 h-12 bg-blue-900/30 rounded-xl flex items-center justify-center text-blue-400 text-xl font-bold">
+              {{ group.name.charAt(0) }}
+            </div>
+            <div class="flex gap-2">
+              <span v-if="!group.isPublic" class="px-2 py-1 bg-amber-900/30 text-amber-400 text-[10px] uppercase font-bold rounded-md border border-amber-900/50">Private</span>
+              <span class="px-2 py-1 bg-slate-800 text-slate-400 text-[10px] uppercase font-bold rounded-md">{{ group.memberCount }} members</span>
+            </div>
+          </div>
+          
+          <h3 class="text-xl font-semibold text-slate-100 mb-2">{{ group.name }}</h3>
+          <p class="text-slate-400 text-sm mb-6 line-clamp-2 h-10">{{ group.description || 'Нет описания' }}</p>
+          
+          <div class="flex items-center justify-between pt-4 border-t border-slate-800">
+            <div class="flex -space-x-2">
+              <div v-for="i in Math.min(group.memberCount, 3)" :key="i" class="w-8 h-8 rounded-full border-2 border-slate-900 bg-slate-800 flex items-center justify-center text-[10px] text-slate-400 font-bold">
+                U{{ i }}
+              </div>
+              <div v-if="group.memberCount > 3" class="w-8 h-8 rounded-full border-2 border-slate-900 bg-slate-700 flex items-center justify-center text-[10px] text-slate-300 font-bold">
+                +{{ group.memberCount - 3 }}
+              </div>
+            </div>
+            <button @click="openGroupSettings(group)" class="px-4 py-1.5 bg-slate-800 hover:bg-slate-700 text-blue-400 rounded-lg text-sm font-medium transition">Управлять</button>
+          </div>
+        </div>
+      </div>
+
+      <!-- Empty State -->
+      <div v-else class="bg-slate-900 border border-slate-800 border-dashed rounded-3xl p-12 text-center">
+        <div class="text-6xl mb-4">👥</div>
+        <h3 class="text-xl font-bold text-slate-200">Групп пока нет</h3>
+        <p class="text-slate-500 mt-2 max-w-sm mx-auto">Создайте свою первую команду, чтобы работать над проектами совместно.</p>
+        <button @click="showCreateModal = true" class="mt-6 px-6 py-2 bg-blue-600 hover:bg-blue-500 text-white rounded-xl font-bold transition">Создать группу</button>
+      </div>
+
+      <!-- Create Group Modal -->
+      <div v-if="showCreateModal" class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-950/80 backdrop-blur-sm" @click.self="showCreateModal = false">
+        <div class="bg-slate-900 border border-slate-800 rounded-2xl w-full max-w-md p-6 shadow-2xl">
+          <h2 class="text-2xl font-bold text-slate-100 mb-4 text-center">Новая Группа</h2>
+          
+          <div class="space-y-4">
+            <div>
+              <label class="block text-xs font-bold text-slate-500 uppercase mb-1">Название группы</label>
+              <input 
+                v-model="newGroup.name"
+                type="text" 
+                class="w-full bg-slate-800 border border-slate-700 rounded-lg px-4 py-2.5 text-slate-100 focus:border-blue-500 outline-none transition"
+                placeholder="Например: Отдел разработки"
+              />
+            </div>
+            <div>
+              <label class="block text-xs font-bold text-slate-500 uppercase mb-1">Описание</label>
+              <textarea 
+                v-model="newGroup.description"
+                rows="3"
+                class="w-full bg-slate-800 border border-slate-700 rounded-lg px-4 py-2.5 text-slate-100 focus:border-blue-500 outline-none transition resize-none"
+                placeholder="Чем занимается эта группа?"
+              ></textarea>
+            </div>
+            <div class="flex items-center gap-3 py-2 bg-slate-800/50 p-3 rounded-lg border border-slate-700/50">
+              <input type="checkbox" v-model="newGroup.isPublic" id="isPublic" class="w-5 h-5 rounded border-slate-700 bg-slate-800 text-blue-600 focus:ring-blue-500 cursor-pointer">
+              <label for="isPublic" class="text-slate-300 select-none cursor-pointer text-sm">Сделать группу публичной (доступной всем)</label>
+            </div>
+          </div>
+
+          <div class="flex gap-3 mt-8">
+            <button 
+              @click="showCreateModal = false"
+              class="flex-1 px-4 py-3 bg-slate-800 hover:bg-slate-700 text-slate-300 rounded-xl font-bold transition"
+            >
+              Отмена
+            </button>
+            <button 
+              @click="createGroup"
+              class="flex-1 px-4 py-3 bg-blue-600 hover:bg-blue-500 text-white rounded-xl font-bold transition shadow-lg shadow-blue-900/40"
+              :disabled="creating"
+            >
+              {{ creating ? 'Создание...' : 'Создать' }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+definePageMeta({
+  middleware: ['auth', 'admin']
+})
+
+const auth = useAuth()
+const groups = ref([])
+const showCreateModal = ref(false)
+const loading = ref(false)
+const creating = ref(false)
+
+const newGroup = reactive({
+  name: '',
+  description: '',
+  isPublic: true
+})
+
+const fetchGroups = async () => {
+  loading.value = true
+  try {
+    const data = await $fetch('/api/groups', {
+      headers: { Authorization: `Bearer ${auth.token.value}` }
+    })
+    groups.value = data.groups || []
+  } catch (e) {
+    console.error('[Groups Page] Failed to fetch groups', e)
+  } finally {
+    loading.value = false
+  }
+}
+
+const createGroup = async () => {
+  if (!newGroup.name.trim()) return
+  creating.value = true
+  try {
+    await $fetch('/api/groups', {
+      method: 'POST',
+      body: newGroup,
+      headers: { Authorization: `Bearer ${auth.token.value}` }
+    })
+    showCreateModal.value = false
+    newGroup.name = ''
+    newGroup.description = ''
+    await fetchGroups()
+  } catch (e) {
+    alert('Ошибка при создании группы: ' + (e.data?.message || e.message))
+  } finally {
+    creating.value = false
+  }
+}
+
+const openGroupSettings = (group) => {
+  navigateTo(`/admin/groups/${group.id}`)
+}
+
+onMounted(() => {
+  fetchGroups()
+})
+</script>

apps/web/app/pages/admin/index.vue

@@ -0,0 +1,153 @@
+<template>
+  <div class="min-h-screen bg-slate-950 p-6">
+    <div class="max-w-7xl mx-auto">
+      <div class="flex items-center justify-between mb-6">
+        <h1 class="text-2xl font-bold text-slate-100">XFlow Admin Panel</h1>
+        <div class="flex items-center gap-2 text-sm text-slate-400">
+          <span class="w-2 h-2 rounded-full bg-emerald-500"></span>
+          Online
+        </div>
+      </div>
+
+      <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">
+        <div class="bg-slate-900 border border-slate-700 rounded-xl p-4">
+          <div class="text-3xl font-bold text-blue-400">{{ stats.users }}</div>
+          <div class="text-sm text-slate-400 mt-1">Registered Users</div>
+        </div>
+        <div class="bg-slate-900 border border-slate-700 rounded-xl p-4">
+          <div class="text-3xl font-bold text-emerald-400">{{ stats.canvases }}</div>
+          <div class="text-sm text-slate-400 mt-1">Canvases</div>
+        </div>
+        <div class="bg-slate-900 border border-slate-700 rounded-xl p-4">
+          <div class="text-3xl font-bold text-yellow-400">{{ stats.nodes }}</div>
+          <div class="text-sm text-slate-400 mt-1">Total Nodes</div>
+        </div>
+        <div class="bg-slate-900 border border-slate-700 rounded-xl p-4">
+          <div class="text-3xl font-bold text-purple-400">{{ stats.pushes }}</div>
+          <div class="text-sm text-slate-400 mt-1">Push Subscribers</div>
+        </div>
+      </div>
+
+      <!-- Quick Actions -->
+      <div class="flex gap-4 mb-6">
+        <NuxtLink 
+          to="/admin/groups" 
+          class="px-4 py-2 bg-blue-600 hover:bg-blue-500 text-white rounded-lg font-medium transition flex items-center gap-2"
+        >
+          👥 Manage Groups & Teams
+        </NuxtLink>
+        <button 
+          @click="refreshData"
+          class="px-4 py-2 bg-slate-800 hover:bg-slate-700 text-slate-300 rounded-lg font-medium transition"
+        >
+          🔄 Refresh Data
+        </button>
+      </div>
+
+      <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        <!-- Users -->
+        <div class="lg:col-span-2 bg-slate-900 border border-slate-700 rounded-xl overflow-hidden">
+          <div class="p-4 border-b border-slate-700 flex items-center justify-between">
+            <h2 class="text-lg font-semibold text-slate-200">Users</h2>
+            <button @click="refreshData" class="text-sm text-blue-400 hover:text-blue-300">Refresh</button>
+          </div>
+          <div class="overflow-x-auto">
+            <table class="w-full text-sm">
+              <thead class="bg-slate-800 text-slate-400">
+                <tr>
+                  <th class="text-left p-3">Email</th>
+                  <th class="text-left p-3">Username</th>
+                  <th class="text-left p-3">Role</th>
+                  <th class="text-left p-3">ID</th>
+                </tr>
+              </thead>
+              <tbody class="text-slate-300">
+                <tr v-for="user in users" :key="user.id" class="border-t border-slate-800">
+                  <td class="p-3">{{ user.email }}</td>
+                  <td class="p-3">{{ user.username }}</td>
+                  <td class="p-3">
+                    <span :class="roleBadge(user.role)">{{ user.role }}</span>
+                  </td>
+                  <td class="p-3 text-xs text-slate-500 font-mono">{{ user.id }}</td>
+                </tr>
+                <tr v-if="users.length === 0">
+                  <td colspan="4" class="p-6 text-center text-slate-500">No users found</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+
+        <!-- Canvases -->
+        <div class="bg-slate-900 border border-slate-700 rounded-xl overflow-hidden">
+          <div class="p-4 border-b border-slate-700">
+            <h2 class="text-lg font-semibold text-slate-200">Canvases</h2>
+          </div>
+          <div class="divide-y divide-slate-800">
+            <div v-for="canvas in canvases" :key="canvas.id" class="p-3">
+              <div class="flex items-center justify-between">
+                <NuxtLink :to="`/canvas/${canvas.id}`" class="text-blue-400 hover:text-blue-300 font-medium">
+                  {{ canvas.name }}
+                </NuxtLink>
+                <span class="text-xs text-slate-500">{{ canvas.nodeCount }} nodes</span>
+              </div>
+              <div class="text-xs text-slate-500 mt-1">{{ formatDate(canvas.updatedAt) }}</div>
+            </div>
+            <div v-if="canvases.length === 0" class="p-6 text-center text-slate-500">
+              No canvases yet
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+definePageMeta({
+  middleware: ['auth', 'admin']
+})
+
+const users = ref([])
+const canvases = ref([])
+const stats = reactive({ users: 0, canvases: 0, nodes: 0, pushes: 0 })
+
+const auth = useAuth()
+
+const refreshData = async () => {
+  if (!auth.token.value) return
+  
+  try {
+    const data = await $fetch('/api/admin/stats', {
+      headers: { Authorization: `Bearer ${auth.token.value}` }
+    })
+    users.value = data.users || []
+    canvases.value = data.canvases || []
+    stats.users = data.stats?.users || 0
+    stats.canvases = data.stats?.canvases || 0
+    stats.nodes = data.stats?.nodes || 0
+    stats.pushes = data.stats?.pushes || 0
+  } catch (e) {
+    console.error('Failed to load admin data', e)
+  }
+}
+
+const roleBadge = (role) => {
+  return role === 'admin'
+    ? 'px-2 py-0.5 bg-red-900/50 text-red-300 rounded text-xs'
+    : 'px-2 py-0.5 bg-slate-700 text-slate-300 rounded text-xs'
+}
+
+const formatDate = (date) => {
+  if (!date) return 'N/A'
+  return new Date(date).toLocaleDateString('ru-RU')
+}
+
+onMounted(async () => {
+  // Ждем инициализации пользователя если нужно
+  if (!auth.user.value) {
+    await auth.initAuth()
+  }
+  refreshData()
+})
+</script>

apps/web/app/pages/canvas/[id].vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="h-screen w-full">
+    <ClientOnly>
+      <FlowEditor :canvas-id="canvasId" />
+    </ClientOnly>
+  </div>
+</template>
+
+<script setup>
+definePageMeta({
+  middleware: 'auth'
+})
+
+const route = useRoute()
+const canvasId = computed(() => route.params.id || 'demo')
+</script>

apps/web/app/pages/canvas/index.vue

@@ -0,0 +1,95 @@
+<template>
+  <div class="min-h-screen bg-slate-950">
+    <div class="max-w-6xl mx-auto p-6">
+      <h1 class="text-3xl font-bold text-slate-100 mb-6">Канвасы</h1>
+      
+      <!-- Canvas Grid -->
+      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        <div v-for="canvas in canvases" :key="canvas.id" 
+          class="bg-slate-900 border border-slate-700 rounded-xl p-6 hover:border-blue-500 transition-colors">
+          
+          <div class="flex items-start justify-between mb-4">
+            <div>
+              <h3 class="text-lg font-semibold text-slate-100">{{ canvas.name }}</h3>
+              <p class="text-sm text-slate-400">{{ canvas.description }}</p>
+            </div>
+            <div class="text-xs text-slate-500">
+              {{ new Date(canvas.updatedAt).toLocaleDateString('ru-RU') }}
+            </div>
+          </div>
+          
+          <div class="flex items-center justify-between">
+            <div class="flex items-center gap-2">
+              <span class="px-2 py-1 bg-slate-800 text-slate-300 rounded text-xs">
+                {{ canvas.isPublic ? 'Публичный' : 'Личный' }}
+              </span>
+              <span class="px-2 py-1 bg-slate-800 text-slate-300 rounded text-xs">
+                {{ canvas.nodes?.length || 0 }} узлов
+              </span>
+            </div>
+            
+            <NuxtLink :to="`/canvas/${canvas.id}`" 
+              class="px-3 py-1 bg-blue-600 hover:bg-blue-500 text-white rounded text-sm transition-colors">
+              Открыть
+            </NuxtLink>
+          </div>
+        </div>
+        
+        <!-- Create New Canvas -->
+        <div class="bg-slate-900 border border-slate-700 rounded-xl p-6 border-dashed hover:border-blue-500 transition-colors">
+          <div class="flex flex-col items-center justify-center h-full min-h-[200px]">
+            <div class="text-4xl mb-4">+</div>
+            <h3 class="text-lg font-semibold text-slate-100 mb-2">Создать канвас</h3>
+            <p class="text-sm text-slate-400 text-center mb-4">
+              Создайте новую ментальную карту
+            </p>
+            <button @click="createNewCanvas" 
+              class="px-4 py-2 bg-blue-600 hover:bg-blue-500 text-white rounded text-sm transition-colors">
+              Создать
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useAuth } from '~/composables/useAuth'
+
+const auth = useAuth()
+const router = useRouter()
+
+// Mock canvases data - replace with actual API call
+const canvases = ref([
+  {
+    id: 'xflow-project',
+    name: 'Обзор Проекта XFlow',
+    description: 'Основная ментальная карта проекта',
+    isPublic: true,
+    updatedAt: new Date().toISOString(),
+    nodes: 11
+  },
+  {
+    id: 'demo',
+    name: 'Демо канвас',
+    description: 'Пример ментальной карты',
+    isPublic: true,
+    updatedAt: new Date().toISOString(),
+    nodes: 5
+  }
+])
+
+const createNewCanvas = () => {
+  // Redirect to flow editor with new canvas
+  router.push('/canvas/new-canvas')
+}
+
+// Redirect to specific canvas if ID is provided
+onMounted(() => {
+  if (auth.isAuthenticated.value) {
+    // Load user's canvases
+    console.log('Loading canvases for user:', auth.user.value?.email)
+  }
+})
+</script>

apps/web/app/pages/canvases.vue

@@ -0,0 +1,440 @@
+<template>
+  <div class="min-h-screen bg-slate-950">
+    <div class="max-w-7xl mx-auto px-4 py-8">
+      <!-- Debug Info for Prod -->
+      <div v-if="auth.user.value" class="mb-4 p-2 bg-slate-800 border border-slate-700 rounded text-[10px] font-mono text-slate-500 flex justify-between items-center">
+        <span>Logged in as: <b class="text-blue-400">{{ auth.user.value.email }}</b></span>
+        <span>Internal ID: <b class="text-emerald-400">{{ auth.user.value.id }}</b></span>
+      </div>
+      
+      <div class="flex items-center justify-between mb-8">
+        <h1 class="text-2xl font-bold text-slate-100">Мои Карты</h1>
+        <div class="flex items-center gap-3">
+          <button @click="triggerImport" class="px-4 py-2 bg-slate-700 hover:bg-slate-600 text-white rounded-lg font-medium transition">
+            Импорт .canvas
+          </button>
+          <input ref="importInput" type="file" accept=".canvas,.json" class="hidden" @change="handleImport" />
+          <button @click="openCreateModal" class="px-4 py-2 bg-blue-600 hover:bg-blue-500 text-white rounded-lg font-bold shadow-lg shadow-blue-900/20 transition flex items-center gap-2">
+            <span>➕</span> Создать
+          </button>
+        </div>
+      </div>
+
+      <!-- Tabs -->
+      <div class="flex gap-1 mb-6 bg-slate-900 rounded-lg p-1 w-fit">
+        <button @click="activeTab = 'personal'" :class="tabClass('personal')" class="px-4 py-2 rounded text-sm font-medium transition">
+          Личные
+        </button>
+        <button @click="activeTab = 'team'" :class="tabClass('team')" class="px-4 py-2 rounded text-sm font-medium transition">
+          Командные
+        </button>
+        <button @click="activeTab = 'public'" :class="tabClass('public')" class="px-4 py-2 rounded text-sm font-medium transition">
+          Публичные
+        </button>
+      </div>
+
+      <!-- Canvas Grid -->
+      <div v-if="filteredCanvases.length > 0" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+        <div v-for="canvas in filteredCanvases" :key="canvas.id" 
+          class="bg-slate-900 border border-slate-700 rounded-xl p-4 hover:border-slate-600 transition cursor-pointer group"
+          @click="openCanvas(canvas.id)">
+          <div class="flex items-start justify-between mb-3">
+            <div>
+              <h3 class="font-semibold text-slate-200 group-hover:text-blue-400 transition">{{ canvas.name }}</h3>
+              <p class="text-xs text-slate-500 mt-1">{{ canvas.nodeCount }} nodes • {{ formatDate(canvas.updatedAt) }}</p>
+            </div>
+            <div class="flex items-center gap-1">
+              <span v-if="canvas.isPublic" class="text-xs px-2 py-1 bg-emerald-900/50 text-emerald-300 rounded">Публичная</span>
+              <span v-else-if="canvas.groupId" class="text-xs px-2 py-1 bg-blue-900/50 text-blue-300 rounded">Общая</span>
+              <span v-else class="text-xs px-2 py-1 bg-slate-700 text-slate-400 rounded">Приватная</span>
+            </div>
+          </div>
+          
+          <div class="text-xs text-slate-400">
+            <span v-if="canvas.ownerId === currentUserId">Ваша карта</span>
+            <span v-else>Поделился {{ getOwnerName(canvas.ownerId) }}</span>
+            <span v-if="canvas.groupId" class="ml-2">• {{ getGroupName(canvas.groupId) }}</span>
+          </div>
+
+          <div class="mt-3 pt-3 border-t border-slate-800 flex justify-between items-center">
+            <div class="flex gap-3">
+              <button @click.stop="duplicateCanvas(canvas.id)" class="text-xs text-slate-400 hover:text-blue-400 transition flex items-center gap-1">
+                <span>📑</span> Дублировать
+              </button>
+              <button @click.stop="exportCanvas(canvas.id)" class="text-xs text-slate-400 hover:text-emerald-400 transition flex items-center gap-1">
+                <span>💾</span> Экспорт
+              </button>
+            </div>
+            
+            <div class="flex items-center gap-1">
+              <button v-if="canDeleteCanvas(canvas)" @click.stop="openSettings(canvas)" 
+                class="p-1.5 text-slate-500 hover:text-blue-400 hover:bg-blue-400/10 rounded transition-colors"
+                title="Настройки доступа">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                </svg>
+              </button>
+              <button v-if="canDeleteCanvas(canvas)" @click.stop="deleteCanvas(canvas.id)" 
+                class="p-1.5 text-slate-500 hover:text-red-400 hover:bg-red-400/10 rounded transition-colors"
+                title="Удалить карту">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                </svg>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div v-else class="text-center py-12">
+        <div class="text-slate-500 mb-4">Карты не найдены</div>
+        <button @click="showCreateModal = true" class="px-4 py-2 bg-blue-600 hover:bg-blue-500 text-white rounded-lg font-medium transition">
+          Создать первую карту
+        </button>
+      </div>
+    </div>
+
+    <!-- Create Modal -->
+    <div v-if="showCreateModal" class="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50 p-4" @click.self="showCreateModal = false">
+      <div class="bg-slate-900 border border-slate-700 rounded-2xl p-6 w-full max-w-md shadow-2xl">
+        <h2 class="text-xl font-bold text-slate-100 mb-6 flex items-center gap-2">
+          <span>✨</span> Новая Карта
+        </h2>
+        <form @submit.prevent="createCanvas" class="space-y-6">
+          <div>
+            <label class="text-xs font-bold text-slate-500 uppercase tracking-wider block mb-2">Название Карты</label>
+            <input v-model="newCanvas.name" required class="w-full px-4 py-3 bg-slate-800 border border-slate-700 rounded-xl text-white focus:border-blue-500 outline-none transition" placeholder="Моя Awesome Карта" />
+          </div>
+          <div>
+            <label class="text-xs font-bold text-slate-500 uppercase tracking-wider block mb-2">Видимость</label>
+            <select v-model="newCanvas.visibility" class="w-full px-4 py-3 bg-slate-800 border border-slate-700 rounded-xl text-white focus:border-blue-500 outline-none transition appearance-none">
+              <option value="private">Приватная (только вы)</option>
+              <option value="public">Публичная (любой может просматривать)</option>
+            </select>
+          </div>
+          <div v-if="userGroups.length > 0">
+            <label class="text-xs font-bold text-slate-500 uppercase tracking-wider block mb-2">Поделиться с Группой (опционально)</label>
+            <select v-model="newCanvas.groupId" class="w-full px-4 py-3 bg-slate-800 border border-slate-700 rounded-xl text-white focus:border-blue-500 outline-none transition appearance-none">
+              <option value="">Без группы</option>
+              <option v-for="group in userGroups" :key="group.id" :value="group.id">{{ group.name }}</option>
+            </select>
+          </div>
+          <div class="flex gap-3 pt-4">
+            <button type="submit" class="flex-1 py-3 bg-blue-600 hover:bg-blue-500 text-white rounded-xl font-bold transition shadow-lg shadow-blue-900/20">
+              Создать
+            </button>
+            <button type="button" @click="showCreateModal = false" class="flex-1 py-3 bg-slate-800 hover:bg-slate-700 text-slate-300 rounded-xl font-bold transition">
+              Отмена
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+
+    <!-- Settings Modal -->
+    <div v-if="showSettingsModal" class="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50 p-4" @click.self="closeSettings">
+      <div class="bg-slate-900 border border-slate-700 rounded-2xl p-6 w-full max-w-md shadow-2xl">
+        <h2 class="text-xl font-bold text-slate-100 mb-6 flex items-center gap-2">
+          <span>⚙️</span> Настройки доступа
+        </h2>
+        
+        <form @submit.prevent="saveSettings" class="space-y-6">
+          <div>
+            <label class="text-xs font-bold text-slate-500 uppercase tracking-wider block mb-2">Название Карты</label>
+            <input 
+              v-model="editCanvas.name" 
+              required 
+              class="w-full px-4 py-3 bg-slate-800 border border-slate-700 rounded-xl text-white focus:border-blue-500 outline-none transition" 
+            />
+          </div>
+
+          <div>
+            <label class="text-xs font-bold text-slate-500 uppercase tracking-wider block mb-2">Уровень доступа</label>
+            <div class="grid grid-cols-2 gap-3">
+              <button 
+                type="button"
+                @click="editCanvas.isPublic = false"
+                :class="!editCanvas.isPublic ? 'bg-blue-600 border-blue-500 text-white' : 'bg-slate-800 border-slate-700 text-slate-400'"
+                class="px-4 py-2 border rounded-xl text-sm font-medium transition"
+              >
+                Приватная
+              </button>
+              <button 
+                type="button"
+                @click="editCanvas.isPublic = true"
+                :class="editCanvas.isPublic ? 'bg-emerald-600 border-emerald-500 text-white' : 'bg-slate-800 border-slate-700 text-slate-400'"
+                class="px-4 py-2 border rounded-xl text-sm font-medium transition"
+              >
+                Публичная
+              </button>
+            </div>
+            <p class="text-[10px] text-slate-500 mt-2">
+              {{ editCanvas.isPublic ? 'Любой пользователь сможет просматривать эту карту.' : 'Карта доступна только вам и членам выбранной группы.' }}
+            </p>
+          </div>
+
+          <div v-if="userGroups.length > 0">
+            <label class="text-xs font-bold text-slate-500 uppercase tracking-wider block mb-2">Принадлежность Группе</label>
+            <select v-model="editCanvas.groupId" class="w-full px-4 py-3 bg-slate-800 border border-slate-700 rounded-xl text-white focus:border-blue-500 outline-none transition appearance-none">
+              <option :value="null">Без группы (Личная)</option>
+              <option v-for="group in userGroups" :key="group.id" :value="group.id">{{ group.name }}</option>
+            </select>
+          </div>
+
+          <div class="flex gap-3 pt-4">
+            <button type="submit" class="flex-1 py-3 bg-blue-600 hover:bg-blue-500 text-white rounded-xl font-bold transition shadow-lg shadow-blue-900/20" :disabled="saving">
+              {{ saving ? 'Сохранение...' : 'Сохранить' }}
+            </button>
+            <button type="button" @click="closeSettings" class="flex-1 py-3 bg-slate-800 hover:bg-slate-700 text-slate-300 rounded-xl font-bold transition">
+              Отмена
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+definePageMeta({
+  middleware: 'auth'
+})
+
+const auth = useAuth()
+const user = computed(() => auth.user.value)
+const authFetch = async (url, opts = {}) => {
+  try {
+    return await $fetch(url, {
+      ...opts,
+      headers: { Authorization: `Bearer ${auth.token.value}`, ...opts.headers }
+    })
+  } catch (error) {
+    if (error.response?.status === 401) {
+      auth.logout()
+    }
+    throw error
+  }
+}
+
+const canvases = ref([])
+const userGroups = ref([])
+const showCreateModal = ref(false)
+const importInput = ref(null)
+const activeTab = ref('personal')
+
+const newCanvas = reactive({
+  name: '',
+  visibility: 'private',
+  groupId: ''
+})
+
+const openCreateModal = () => {
+  newCanvas.name = ''
+  newCanvas.visibility = 'private'
+  newCanvas.groupId = ''
+  showSettingsModal.value = false
+  showCreateModal.value = true
+}
+
+const showSettingsModal = ref(false)
+const saving = ref(false)
+const editCanvas = reactive({
+  id: '',
+  name: '',
+  isPublic: false,
+  groupId: null
+})
+
+const openSettings = (canvas) => {
+  editCanvas.id = canvas.id
+  editCanvas.name = canvas.name
+  editCanvas.isPublic = canvas.isPublic
+  editCanvas.groupId = canvas.groupId
+  showSettingsModal.value = true
+}
+
+const closeSettings = () => {
+  showSettingsModal.value = false
+}
+
+const saveSettings = async () => {
+  saving.value = true
+  try {
+    await authFetch(`/api/canvases/${editCanvas.id}`, {
+      method: 'PATCH',
+      body: {
+        name: editCanvas.name,
+        isPublic: editCanvas.isPublic,
+        groupId: editCanvas.groupId
+      }
+    })
+    await loadData()
+    closeSettings()
+  } catch (error) {
+    alert('Ошибка при сохранении: ' + (error.data?.message || error.message))
+  } finally {
+    saving.value = false
+  }
+}
+
+const currentUserId = computed(() => user.value?.id || '')
+
+// Load data
+const loadData = async () => {
+  try {
+    const [canvasesRes, groupsRes] = await Promise.all([
+      authFetch('/api/canvas'),
+      authFetch('/api/user/groups')
+    ])
+    canvases.value = canvasesRes.canvases || []
+    userGroups.value = groupsRes.groups || []
+  } catch (error) {
+    console.error('Failed to load data:', error)
+  }
+}
+
+// Filter canvases based on active tab
+const filteredCanvases = computed(() => {
+  const userId = currentUserId.value
+  if (!userId) return []
+
+  switch (activeTab.value) {
+    case 'personal':
+      return canvases.value.filter(c => c.ownerId === userId && (!c.groupId || c.groupId === ''))
+    case 'team':
+      return canvases.value.filter(c => c.groupId && c.groupId !== '')
+    case 'public':
+      return canvases.value.filter(c => c.isPublic)
+    default:
+      return canvases.value
+  }
+})
+
+// Tab styling
+const tabClass = (tab) => {
+  return activeTab.value === tab
+    ? 'bg-slate-800 text-slate-200'
+    : 'text-slate-400 hover:text-slate-300'
+}
+
+// Canvas actions
+const openCanvas = (id) => {
+  navigateTo(`/canvas/${id}`)
+}
+
+const createCanvas = async () => {
+  try {
+    const payload = {
+      name: newCanvas.name,
+      isPublic: newCanvas.visibility === 'public',
+      groupId: newCanvas.groupId || undefined
+    }
+    const result = await authFetch('/api/canvas', { method: 'POST', body: payload })
+    showCreateModal.value = false
+    newCanvas.name = ''
+    newCanvas.visibility = 'private'
+    newCanvas.groupId = ''
+    await loadData()
+    navigateTo(`/canvas/${result.canvas.id}`)
+  } catch (error) {
+    console.error('Failed to create canvas:', error)
+  }
+}
+
+const duplicateCanvas = async (id) => {
+  try {
+    const result = await authFetch(`/api/canvas/${id}/duplicate`, { method: 'POST' })
+    await loadData()
+  } catch (error) {
+    console.error('Failed to duplicate canvas:', error)
+  }
+}
+
+const triggerImport = () => {
+  importInput.value?.click()
+}
+
+const handleImport = async (event) => {
+  const file = event.target.files?.[0]
+  if (!file) return
+
+  try {
+    const text = await file.text()
+    const data = JSON.parse(text)
+    const name = file.name.replace(/\.canvas$|\.json$/, '')
+    const payload = {
+      name,
+      nodes: data.nodes || [],
+      edges: data.edges || [],
+      isPublic: false
+    }
+    const result = await authFetch('/api/canvas', { method: 'POST', body: payload })
+    await loadData()
+    navigateTo(`/canvas/${result.canvas.id}`)
+  } catch (error) {
+    console.error('Failed to import canvas:', error)
+    alert('Ошибка импорта: проверьте формат файла')
+  } finally {
+    event.target.value = ''
+  }
+}
+
+const exportCanvas = async (id) => {
+  try {
+    const canvas = await authFetch(`/api/canvas/${id}`)
+    const blob = new Blob([JSON.stringify(canvas, null, 2)], { type: 'application/json' })
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement('a')
+    a.href = url
+    a.download = `${canvas.name || 'canvas'}.canvas`
+    a.click()
+    URL.revokeObjectURL(url)
+  } catch (error) {
+    console.error('Failed to export canvas:', error)
+  }
+}
+
+const canDeleteCanvas = (canvas) => {
+  return canvas.ownerId === currentUserId.value
+}
+
+const deleteCanvas = async (id) => {
+  if (!confirm('Вы уверены, что хотите удалить эту карту?')) return
+  try {
+    await authFetch(`/api/canvas/${id}`, { method: 'DELETE' })
+    await loadData()
+  } catch (error) {
+    console.error('Failed to delete canvas:', error)
+  }
+}
+
+// Helper functions
+const formatDate = (date) => {
+  return new Date(date).toLocaleDateString('ru-RU', { 
+    month: 'short', 
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit'
+  })
+}
+
+const getOwnerName = (ownerId) => {
+  return ownerId === currentUserId.value ? 'вы' : `Пользователь ${ownerId}`
+}
+
+const getGroupName = (groupId) => {
+  const group = userGroups.value.find(g => g.id === groupId)
+  return group?.name || 'Unknown Group'
+}
+
+onMounted(() => {
+  if (auth.isAuthenticated.value) {
+    loadData()
+  }
+})
+
+watch(() => auth.isAuthenticated.value, (isAuth) => {
+  if (isAuth) loadData()
+})
+</script>

apps/web/app/pages/flow.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="h-screen w-full">
+    <ClientOnly>
+      <FlowEditor canvas-id="demo" />
+    </ClientOnly>
+  </div>
+</template>
+
+<script setup>
+definePageMeta({
+  middleware: 'auth'
+})
+</script>

apps/web/app/pages/index.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="min-h-[calc(100vh-4rem)] flex flex-col items-center justify-center p-4 md:p-8">
+    <div v-if="!isAuthenticated" class="text-center max-w-md px-4">
+      <h1 class="text-5xl md:text-6xl font-black text-blue-500 mb-6 tracking-tight">XFlow</h1>
+      <p class="text-slate-400 text-lg mb-10 leading-relaxed">Визуальное управление задачами в формате Obsidian Canvas.</p>
+      <NuxtLink
+        to="/login"
+        class="w-full md:w-auto inline-block px-10 py-4 bg-blue-600 hover:bg-blue-500 text-white rounded-2xl font-bold text-lg shadow-xl shadow-blue-900/40 transition-all transform active:scale-95"
+      >
+        Начать работу
+      </NuxtLink>
+    </div>
+
+    <div v-else class="w-full max-w-6xl">
+      <div class="flex items-center justify-between mb-8 px-2">
+        <h1 class="text-3xl md:text-4xl font-bold text-white">Дашборд</h1>
+        <div class="md:hidden w-10 h-10 bg-slate-800 rounded-full flex items-center justify-center text-xl">✨</div>
+      </div>
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+        <NuxtLink
+          to="/canvases"
+          class="p-6 bg-slate-800 border border-slate-700 rounded-lg hover:border-blue-500 transition group"
+        >
+          <div class="text-3xl mb-2">🗺️</div>
+          <h3 class="font-semibold group-hover:text-blue-400 transition">Проекты</h3>
+          <p class="text-sm text-slate-400">{{ homeStats.canvases }} канвасов доступно</p>
+        </NuxtLink>
+
+        <div class="p-6 bg-slate-800 border border-slate-700 rounded-lg">
+          <div class="text-3xl mb-2">✅</div>
+          <h3 class="font-semibold">Задачи</h3>
+          <p class="text-sm text-slate-400">{{ homeStats.tasks.completed }} / {{ homeStats.tasks.total }} выполнено</p>
+        </div>
+
+        <div class="p-6 bg-slate-800 border border-slate-700 rounded-lg">
+          <div class="text-3xl mb-2">🏆</div>
+          <h3 class="font-semibold">Ачивки</h3>
+          <p class="text-sm text-slate-400">{{ homeStats.achievements }} разблокировано</p>
+        </div>
+      </div>
+    </div>
+    <ClientOnly>
+      <InstallPWA />
+    </ClientOnly>
+  </div>
+</template>
+
+<script setup>
+const { isAuthenticated, token } = useAuth()
+const homeStats = ref({
+  canvases: 0,
+  tasks: { total: 0, completed: 0 },
+  achievements: 0
+})
+const loadingStats = ref(true)
+
+const fetchHomeStats = async () => {
+  if (!isAuthenticated.value) return
+  try {
+    const data = await $fetch('/api/user/stats', {
+      headers: { Authorization: `Bearer ${token.value}` }
+    })
+    homeStats.value = data.stats
+  } catch (e) {
+    console.error('Failed to load home stats', e)
+  } finally {
+    loadingStats.value = false
+  }
+}
+
+onMounted(() => {
+  fetchHomeStats()
+})
+</script>

apps/web/app/pages/login.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="min-h-screen flex items-center justify-center p-4">
+    <!-- Splash / Loader while checking Firebase session -->
+    <div v-if="isInitializing" class="text-center animate-pulse">
+      <div class="text-6xl mb-4">🚀</div>
+      <div class="text-slate-400 font-medium">Проверка авторизации...</div>
+    </div>
+
+    <!-- Login UI -->
+    <div v-else class="w-full max-w-sm bg-slate-800 border border-slate-700 rounded-xl p-6 shadow-xl text-center">
+      <div class="mb-6">
+        <div class="text-5xl mb-4">🚀</div>
+        <h1 class="text-2xl font-bold mb-2">XFlow</h1>
+        <p class="text-slate-400 text-sm">Визуальный менеджер задач</p>
+      </div>
+
+      <button
+        @click="signInWithGoogle"
+        :disabled="loading"
+        class="w-full py-3 bg-white hover:bg-gray-100 text-slate-900 rounded-lg font-medium transition flex items-center justify-center gap-3 disabled:opacity-50"
+      >
+        <svg class="w-5 h-5" viewBox="0 0 24 24">
+          <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z"/>
+          <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
+          <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
+          <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
+        </svg>
+        {{ loading ? 'Вход...' : 'Войти через Google' }}
+      </button>
+
+      <p class="mt-4 text-xs text-slate-500">
+        Авторизация через Firebase Google Sign-In
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+definePageMeta({
+  layout: 'default'
+})
+
+const { googleSignIn, initAuth, isAuthenticated, isInitializing } = useAuth()
+const loading = ref(false)
+
+const signInWithGoogle = async () => {
+  try {
+    loading.value = true
+    await googleSignIn()
+  } catch (error) {
+    console.error('Google sign-in failed:', error)
+    alert('Ошибка входа через Google: ' + (error.message || 'Неизвестная ошибка'))
+  } finally {
+    loading.value = false
+  }
+}
+
+onMounted(() => {
+  if (isAuthenticated.value) {
+    navigateTo('/')
+  }
+})
+
+watch(isAuthenticated, (val) => {
+  if (val) navigateTo('/')
+})
+</script>

apps/web/app/pages/profile.vue

@@ -0,0 +1,356 @@
+<template>
+  <div class="min-h-screen bg-slate-950">
+    <div class="max-w-4xl mx-auto p-6">
+      <!-- Profile Header -->
+      <div class="bg-slate-900 border border-slate-700 rounded-xl p-6 mb-6">
+        <div class="flex items-start gap-4">
+          <img :src="profile.avatar" :alt="profile.displayName" 
+            class="w-20 h-20 rounded-full bg-slate-800" />
+          <div class="flex-1">
+            <h1 class="text-2xl font-bold text-slate-100">{{ profile.displayName }}</h1>
+            <p class="text-slate-400 mt-1">{{ profile.bio }}</p>
+            <div class="flex items-center gap-4 mt-3 text-sm text-slate-500">
+              <span>Joined {{ formatDate(profile.joinedAt) }}</span>
+              <span>•</span>
+              <span>{{ profile.canvasCount }} canvases</span>
+              <span>•</span>
+              <span>{{ profile.followerCount }} followers</span>
+              <span>•</span>
+              <span>{{ profile.followingCount }} following</span>
+            </div>
+          </div>
+          <button v-if="!isOwnProfile" @click="toggleFollow" 
+            :class="followButtonClass" 
+            class="px-4 py-2 rounded-lg font-medium transition">
+            {{ isFollowing ? 'Following' : 'Follow' }}
+          </button>
+        </div>
+      </div>
+
+      <!-- Tabs -->
+      <div class="flex gap-1 mb-6 bg-slate-900 rounded-lg p-1 w-fit">
+        <button @click="activeTab = 'canvases'" :class="tabClass('canvases')" class="px-4 py-2 rounded text-sm font-medium transition">
+          Canvases
+        </button>
+        <button @click="activeTab = 'activity'" :class="tabClass('activity')" class="px-4 py-2 rounded text-sm font-medium transition">
+          Activity
+        </button>
+        <button v-if="isOwnProfile" @click="activeTab = 'groups'" :class="tabClass('groups')" class="px-4 py-2 rounded text-sm font-medium transition">
+          Groups
+        </button>
+      </div>
+
+      <!-- Canvases Tab -->
+      <div v-if="activeTab === 'canvases'" class="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div v-for="canvas in userCanvases" :key="canvas.id" 
+          class="bg-slate-900 border border-slate-700 rounded-xl p-4 hover:border-slate-600 transition cursor-pointer"
+          @click="openCanvas(canvas.id)">
+          <div class="flex items-start justify-between mb-3">
+            <div>
+              <h3 class="font-semibold text-slate-200 hover:text-blue-400 transition">{{ canvas.name }}</h3>
+              <p class="text-xs text-slate-500 mt-1">{{ canvas.nodeCount }} nodes • {{ formatDate(canvas.updatedAt) }}</p>
+            </div>
+            <div class="flex items-center gap-1">
+              <span v-if="canvas.isPublic" class="text-xs px-2 py-1 bg-emerald-900/50 text-emerald-300 rounded">Public</span>
+              <span v-else-if="canvas.groupId" class="text-xs px-2 py-1 bg-blue-900/50 text-blue-300 rounded">Shared</span>
+              <span v-else class="text-xs px-2 py-1 bg-slate-700 text-slate-400 rounded">Private</span>
+            </div>
+          </div>
+          <div class="text-xs text-slate-400">
+            {{ formatDate(canvas.updatedAt) }}
+          </div>
+        </div>
+      </div>
+
+      <!-- Activity Tab -->
+      <div v-if="activeTab === 'activity'" class="space-y-3">
+        <div v-for="activity in userActivities" :key="activity.id" 
+          class="bg-slate-900 border border-slate-700 rounded-xl p-4">
+          <div class="flex items-center gap-3">
+            <div class="w-2 h-2 bg-blue-500 rounded-full"></div>
+            <div class="flex-1">
+              <p class="text-sm text-slate-300">
+                <span class="font-medium">{{ formatActivity(activity.action) }}</span>
+                <span v-if="activity.targetType === 'canvas'" class="text-blue-400"> canvas</span>
+                <span v-if="activity.targetType === 'group'" class="text-emerald-400"> group</span>
+                <span v-if="activity.targetType === 'user'" class="text-purple-400"> user</span>
+              </p>
+              <p class="text-xs text-slate-500 mt-1">{{ formatDate(activity.timestamp) }}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Groups Tab -->
+      <div v-if="activeTab === 'groups' && isOwnProfile" class="space-y-6">
+
+        <!-- My Groups -->
+        <div>
+          <div class="flex items-center justify-between mb-3">
+            <h2 class="text-sm font-semibold text-slate-400 uppercase tracking-wider">Мои группы</h2>
+            <button @click="showCreateGroup = true" class="px-3 py-1 bg-blue-600 hover:bg-blue-500 text-white rounded text-xs font-medium">
+              + Создать группу
+            </button>
+          </div>
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
+            <div v-for="group in userGroups" :key="group.id"
+              class="bg-slate-900 border border-slate-700 rounded-xl p-4">
+              <div class="flex items-start justify-between mb-2">
+                <div class="flex-1 min-w-0">
+                  <h3 class="font-semibold text-slate-200 truncate">{{ group.name }}</h3>
+                  <p class="text-xs text-slate-500 mt-0.5">{{ group.description }}</p>
+                </div>
+                <span :class="group.membershipRole === 'admin' ? 'bg-purple-900/50 text-purple-300' : 'bg-blue-900/50 text-blue-300'"
+                  class="text-xs px-2 py-1 rounded ml-2 shrink-0">{{ group.membershipRole }}</span>
+              </div>
+              <div class="flex items-center justify-between mt-3">
+                <span class="text-xs text-slate-500">{{ group.isPublic ? '🌐 Публичная' : '🔒 Приватная' }}</span>
+                <button v-if="group.ownerId !== currentUserId" @click="leaveGroup(group.id)"
+                  class="text-xs text-red-400 hover:text-red-300 transition">Выйти</button>
+                <button v-else @click="deleteGroup(group.id)"
+                  class="text-xs text-red-400 hover:text-red-300 transition">Удалить</button>
+              </div>
+            </div>
+            <div v-if="userGroups.length === 0" class="text-slate-500 text-sm col-span-2 py-4 text-center">
+              Вы не состоите ни в одной группе
+            </div>
+          </div>
+        </div>
+
+        <!-- All Public Groups -->
+        <div>
+          <h2 class="text-sm font-semibold text-slate-400 uppercase tracking-wider mb-3">Все публичные группы</h2>
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
+            <div v-for="group in availableGroups" :key="group.id"
+              class="bg-slate-900 border border-slate-700 rounded-xl p-4 flex items-center justify-between">
+              <div class="flex-1 min-w-0">
+                <h3 class="font-semibold text-slate-200 truncate">{{ group.name }}</h3>
+                <p class="text-xs text-slate-500 mt-0.5">{{ group.description }}</p>
+              </div>
+              <button v-if="!isMember(group.id)" @click="joinGroup(group.id)"
+                class="ml-3 px-3 py-1 bg-emerald-600 hover:bg-emerald-500 text-white rounded text-xs shrink-0">Вступить</button>
+              <span v-else class="ml-3 text-xs text-slate-500 shrink-0">✓ Участник</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Create Group Modal -->
+      <div v-if="showCreateGroup" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50" @click.self="showCreateGroup = false">
+        <div class="bg-slate-900 border border-slate-700 rounded-xl p-6 w-full max-w-md">
+          <h2 class="text-lg font-semibold text-slate-200 mb-4">Создать группу</h2>
+          <form @submit.prevent="createGroup" class="space-y-4">
+            <div>
+              <label class="text-sm text-slate-400 block mb-1">Название *</label>
+              <input v-model="newGroup.name" required class="w-full px-3 py-2 bg-slate-800 border border-slate-600 rounded-lg text-white" placeholder="Название группы" />
+            </div>
+            <div>
+              <label class="text-sm text-slate-400 block mb-1">Описание</label>
+              <input v-model="newGroup.description" class="w-full px-3 py-2 bg-slate-800 border border-slate-600 rounded-lg text-white" placeholder="Краткое описание" />
+            </div>
+            <div class="flex items-center gap-2">
+              <input type="checkbox" v-model="newGroup.isPublic" id="isPublic" class="rounded" />
+              <label for="isPublic" class="text-sm text-slate-300">Публичная (другие могут вступить)</label>
+            </div>
+            <div class="flex gap-3 pt-2">
+              <button type="submit" class="flex-1 py-2 bg-blue-600 hover:bg-blue-500 text-white rounded-lg font-medium">Создать</button>
+              <button type="button" @click="showCreateGroup = false" class="flex-1 py-2 bg-slate-700 hover:bg-slate-600 text-white rounded-lg">Отмена</button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+definePageMeta({
+  middleware: 'auth'
+})
+
+const auth = useAuth()
+const route = useRoute()
+const authFetch = async (url, opts = {}) => {
+  try {
+    return await $fetch(url, {
+      ...opts,
+      headers: { Authorization: `Bearer ${auth.token.value}`, ...opts.headers }
+    })
+  } catch (error) {
+    if (error.response?.status === 401) {
+      auth.logout()
+    }
+    throw error
+  }
+}
+
+const profileId = computed(() => route.params.id || auth.user.value?.id)
+const currentUserId = computed(() => auth.user.value?.id || '')
+const isOwnProfile = computed(() => profileId.value === currentUserId.value)
+
+const profile = ref({
+  userId: profileId.value,
+  displayName: 'Loading...',
+  bio: '',
+  avatar: `https://api.dicebear.com/7.x/avataaars/svg?seed=${profileId.value}`,
+  joinedAt: new Date().toISOString(),
+  canvasCount: 0,
+  followerCount: 0,
+  followingCount: 0
+})
+
+const userCanvases = ref([])
+const userActivities = ref([])
+const userGroups = ref([])
+const allGroups = ref([])
+const isFollowing = ref(false)
+const activeTab = ref('canvases')
+const showCreateGroup = ref(false)
+const newGroup = reactive({ name: '', description: '', isPublic: true })
+
+const availableGroups = computed(() => allGroups.value.filter(g => g.isPublic))
+const isMember = (groupId) => userGroups.value.some(g => g.id === groupId)
+
+// Load profile data
+const loadProfile = async () => {
+  try {
+    const [profileData, canvasesData, activitiesData] = await Promise.all([
+      authFetch(`/api/users/${profileId.value}/profile`),
+      authFetch(`/api/users/${profileId.value}/canvases`),
+      authFetch(`/api/users/${profileId.value}/activity`)
+    ])
+    
+    profile.value = profileData.profile
+    userCanvases.value = canvasesData.canvases
+    userActivities.value = activitiesData.activities
+
+    // Redirect to pretty URL if using UID but username exists
+    if (profile.value.user?.username && route.params.id === profile.value.userId) {
+      navigateTo(`/profile/${profile.value.user.username}`, { replace: true })
+    }
+    
+    if (isOwnProfile.value) {
+      const [groupsData, allGroupsData] = await Promise.all([
+        authFetch('/api/user/groups'),
+        authFetch('/api/groups')
+      ])
+      userGroups.value = groupsData.groups
+      allGroups.value = allGroupsData.groups
+    }
+
+    if (!isOwnProfile.value) {
+      try {
+        const followData = await authFetch(`/api/users/${profileId.value}/follow-status`)
+        isFollowing.value = followData.isFollowing
+      } catch {}
+    }
+  } catch (error) {
+    console.error('Failed to load profile:', error)
+  }
+}
+
+// Actions
+const openCanvas = (id) => {
+  navigateTo(`/canvas/${id}`)
+}
+
+const toggleFollow = async () => {
+  try {
+    const method = isFollowing.value ? 'DELETE' : 'POST'
+    await authFetch(`/api/users/${profileId.value}/follow`, { method })
+    isFollowing.value = !isFollowing.value
+    profile.value.followerCount += isFollowing.value ? 1 : -1
+  } catch (error) {
+    console.error('Failed to toggle follow:', error)
+  }
+}
+
+const createGroup = async () => {
+  try {
+    const res = await authFetch('/api/groups', { method: 'POST', body: { ...newGroup } })
+    userGroups.value.push({ ...res.group, membershipRole: 'admin' })
+    allGroups.value.push(res.group)
+    showCreateGroup.value = false
+    newGroup.name = ''
+    newGroup.description = ''
+    newGroup.isPublic = true
+  } catch (e) {
+    console.error('Failed to create group:', e)
+  }
+}
+
+const joinGroup = async (groupId) => {
+  try {
+    await authFetch(`/api/groups/${groupId}/join`, { method: 'POST' })
+    const group = allGroups.value.find(g => g.id === groupId)
+    if (group) userGroups.value.push({ ...group, membershipRole: 'member' })
+  } catch (e) {
+    console.error('Failed to join group:', e)
+  }
+}
+
+const leaveGroup = async (groupId) => {
+  if (!confirm('Выйти из группы?')) return
+  try {
+    await authFetch(`/api/groups/${groupId}/leave`, { method: 'POST' })
+    userGroups.value = userGroups.value.filter(g => g.id !== groupId)
+  } catch (e) {
+    console.error('Failed to leave group:', e)
+  }
+}
+
+const deleteGroup = async (groupId) => {
+  if (!confirm('Удалить группу? Это действие необратимо.')) return
+  try {
+    await authFetch(`/api/groups/${groupId}`, { method: 'DELETE' })
+    userGroups.value = userGroups.value.filter(g => g.id !== groupId)
+    allGroups.value = allGroups.value.filter(g => g.id !== groupId)
+  } catch (e) {
+    console.error('Failed to delete group:', e)
+  }
+}
+
+// Helper functions
+const formatDate = (date) => {
+  return new Date(date).toLocaleDateString('ru-RU', { 
+    month: 'short', 
+    day: 'numeric',
+    year: 'numeric'
+  })
+}
+
+const formatActivity = (action) => {
+  const actions = {
+    created_canvas: 'created',
+    updated_canvas: 'updated',
+    joined_group: 'joined',
+    left_group: 'left',
+    followed_user: 'followed',
+    unfollowed_user: 'unfollowed'
+  }
+  return actions[action] || action
+}
+
+const tabClass = (tab) => {
+  return activeTab.value === tab
+    ? 'bg-slate-800 text-slate-200'
+    : 'text-slate-400 hover:text-slate-300'
+}
+
+const followButtonClass = computed(() => {
+  return isFollowing.value
+    ? 'bg-slate-700 hover:bg-slate-600 text-white'
+    : 'bg-blue-600 hover:bg-blue-500 text-white'
+})
+
+onMounted(() => {
+  if (auth.isAuthenticated.value) {
+    loadProfile()
+  }
+})
+
+watch(() => auth.isAuthenticated.value, (isAuth) => {
+  if (isAuth) loadProfile()
+})
+watch(profileId, loadProfile)
+</script>

apps/web/app/pages/profile/[id].vue

@@ -0,0 +1,104 @@
+<template>
+  <div class="min-h-screen bg-slate-950">
+    <div class="max-w-4xl mx-auto p-6">
+      <!-- Profile Header -->
+      <div class="bg-slate-900 border border-slate-700 rounded-xl p-6 mb-6">
+        <div class="flex items-start gap-4">
+          <img :src="profile.avatar" :alt="profile.displayName" 
+            class="w-20 h-20 rounded-full bg-slate-800" />
+          <div class="flex-1">
+            <h1 class="text-2xl font-bold text-slate-100">{{ profile.displayName }}</h1>
+            <p class="text-slate-400">{{ profile.email }}</p>
+            <p class="text-sm text-slate-500 mt-2">{{ profile.bio }}</p>
+          </div>
+          <div class="text-right">
+            <div class="text-sm text-slate-500">Участник с</div>
+            <div class="text-slate-300">{{ new Date(profile.createdAt).toLocaleDateString('ru-RU') }}</div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Stats -->
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
+        <div class="bg-slate-900 border border-slate-700 rounded-xl p-4">
+          <div class="text-2xl font-bold text-blue-400">{{ stats.canvases }}</div>
+          <div class="text-sm text-slate-400">Канвасов</div>
+        </div>
+        <div class="bg-slate-900 border border-slate-700 rounded-xl p-4">
+          <div class="text-2xl font-bold text-green-400">{{ stats.nodes }}</div>
+          <div class="text-sm text-slate-400">Узлов создано</div>
+        </div>
+        <div class="bg-slate-900 border border-slate-700 rounded-xl p-4">
+          <div class="text-2xl font-bold text-purple-400">{{ stats.groups }}</div>
+          <div class="text-sm text-slate-400">Групп</div>
+        </div>
+      </div>
+
+      <!-- Recent Canvases -->
+      <div class="bg-slate-900 border border-slate-700 rounded-xl p-6">
+        <h2 class="text-xl font-semibold text-slate-100 mb-4">Последние канвасы</h2>
+        <div class="space-y-3">
+          <div v-for="canvas in recentCanvases" :key="canvas.id" 
+            class="flex items-center justify-between p-3 bg-slate-800 rounded-lg">
+            <div>
+              <h3 class="font-medium text-slate-100">{{ canvas.name }}</h3>
+              <p class="text-sm text-slate-400">{{ canvas.description }}</p>
+            </div>
+            <NuxtLink :to="`/canvas/${canvas.id}`" 
+              class="px-3 py-1 bg-blue-600 hover:bg-blue-500 text-white rounded text-sm transition-colors">
+              Открыть
+            </NuxtLink>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useAuth } from '~/composables/useAuth'
+
+const route = useRoute()
+const auth = useAuth()
+
+const userId = route.params.id
+
+// Mock profile data - replace with actual API call
+const profile = ref({
+  id: userId,
+  displayName: 'Пользователь XFlow',
+  email: 'user@example.com',
+  bio: 'Люблю создавать ментальные карты и организовывать идеи',
+  avatar: 'https://via.placeholder.com/80',
+  createdAt: new Date('2024-01-01').toISOString()
+})
+
+const stats = ref({
+  canvases: 12,
+  nodes: 156,
+  groups: 3
+})
+
+const recentCanvases = ref([
+  {
+    id: 'xflow-project',
+    name: 'Обзор Проекта XFlow',
+    description: 'Основная ментальная карта проекта'
+  },
+  {
+    id: 'demo',
+    name: 'Демо канвас',
+    description: 'Пример ментальной карты'
+  },
+  {
+    id: 'ideas',
+    name: 'Идеи 2024',
+    description: 'Сбор идей и мыслей'
+  }
+])
+
+onMounted(() => {
+  // Load profile data
+  console.log('Loading profile for user:', userId)
+})
+</script>

apps/web/app/pages/settings.vue

@@ -0,0 +1,208 @@
+<template>
+  <div class="max-w-xl mx-auto p-6">
+    <h1 class="text-2xl font-bold mb-6">Настройки</h1>
+
+    <div class="space-y-6">
+      <!-- Profile Settings -->
+      <div class="bg-slate-800 border border-slate-700 rounded-xl p-6">
+        <h2 class="text-lg font-semibold mb-4 flex items-center gap-2">
+          <span>👤</span> Личный профиль
+        </h2>
+        <div class="space-y-4">
+          <div class="flex items-center gap-4 mb-4">
+            <img :src="profileForm.avatar" class="w-16 h-16 rounded-full bg-slate-700 object-cover border-2 border-blue-500/30" />
+            <div class="flex-1">
+              <label class="text-xs text-slate-500 uppercase font-bold">Ссылка на аватар</label>
+              <input v-model="profileForm.avatar" class="w-full mt-1 bg-slate-900 border border-slate-700 rounded px-3 py-1.5 text-sm text-slate-200 outline-none focus:border-blue-500" />
+            </div>
+          </div>
+          
+          <div class="grid grid-cols-1 gap-4">
+            <div>
+              <label class="text-xs text-slate-500 uppercase font-bold">Имя (Display Name)</label>
+              <input v-model="profileForm.displayName" class="w-full mt-1 bg-slate-900 border border-slate-700 rounded px-3 py-1.5 text-sm text-slate-200 outline-none focus:border-blue-500" />
+            </div>
+          </div>
+
+          <div>
+            <label class="text-xs text-slate-500 uppercase font-bold">О себе (Bio)</label>
+            <textarea v-model="profileForm.bio" rows="3" class="w-full mt-1 bg-slate-900 border border-slate-700 rounded px-3 py-1.5 text-sm text-slate-200 outline-none focus:border-blue-500 resize-none"></textarea>
+          </div>
+
+          <button 
+            @click="saveProfile" 
+            :disabled="saving"
+            class="w-full py-2 bg-blue-600 hover:bg-blue-500 text-white rounded-lg font-medium transition disabled:opacity-50"
+          >
+            {{ saving ? 'Сохранение...' : 'Сохранить изменения' }}
+          </button>
+          <p v-if="saveMessage" :class="saveMessage.type === 'error' ? 'text-red-400' : 'text-emerald-400'" class="text-center text-xs mt-2">
+            {{ saveMessage.text }}
+          </p>
+        </div>
+      </div>
+
+      <!-- My Groups -->
+      <div class="bg-slate-800 border border-slate-700 rounded-xl p-6">
+        <h2 class="text-lg font-semibold mb-4 flex items-center gap-2">
+          <span>👥</span> Мои Группы
+        </h2>
+        <div v-if="userGroups.length === 0" class="text-slate-500 text-sm py-4">
+          Вы не состоите ни в одной группе.
+        </div>
+        <div v-else class="space-y-3">
+          <div v-for="g in userGroups" :key="g.id" class="flex items-center justify-between p-3 bg-slate-900/50 rounded-lg border border-slate-700">
+            <div>
+              <div class="font-medium text-slate-200">{{ g.name }}</div>
+              <div class="text-xs text-slate-500">{{ g.description }}</div>
+            </div>
+            <span :class="g.membershipRole === 'admin' ? 'text-purple-400 bg-purple-900/20' : 'text-blue-400 bg-blue-900/20'" class="text-[10px] uppercase font-bold px-2 py-0.5 rounded border border-current/20">
+              {{ g.membershipRole }}
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Push Notifications -->
+      <div class="bg-slate-800 border border-slate-700 rounded-xl p-6">
+        <h2 class="text-lg font-semibold mb-4 flex items-center gap-2">
+          <span>🔔</span> Push-уведомления
+        </h2>
+        <div class="space-y-3">
+          <div class="flex items-center justify-between">
+            <span class="text-slate-300">Статус поддержки</span>
+            <span :class="isSupported ? 'text-emerald-400' : 'text-red-400'">
+              {{ isSupported ? 'Доступно' : 'Недоступно' }}
+            </span>
+          </div>
+          <div class="flex items-center justify-between">
+            <span class="text-slate-300">Разрешение</span>
+            <span :class="permissionGranted ? 'text-emerald-400' : 'text-yellow-400'">
+              {{ permissionGranted ? 'Разрешено' : 'Не запрошено' }}
+            </span>
+          </div>
+          <button
+            v-if="isSupported && !permissionGranted"
+            @click="enablePush"
+            class="w-full py-2 bg-blue-600 hover:bg-blue-500 text-white rounded-lg font-medium transition"
+          >
+            Включить уведомления
+          </button>
+          <button
+            v-if="isSupported && permissionGranted && !subscription"
+            @click="subscribe"
+            class="w-full py-2 bg-emerald-600 hover:bg-emerald-500 text-white rounded-lg font-medium transition"
+          >
+            Подписаться на пуши
+          </button>
+          <div v-if="subscription" class="text-sm text-emerald-400">
+            ✅ Подписка активна
+          </div>
+        </div>
+      </div>
+
+      <!-- Achievements -->
+      <div class="bg-slate-800 border border-slate-700 rounded-xl p-6">
+        <h2 class="text-lg font-semibold mb-4 flex items-center gap-2">
+          <span>🏆</span> Ачивки
+        </h2>
+        <div v-if="achievements.length === 0" class="text-slate-400 text-sm">
+          Пока нет разблокированных ачивок. Завершите задачи в Canvas!
+        </div>
+        <div v-else class="space-y-2">
+          <div
+            v-for="ach in achievements"
+            :key="ach.id"
+            class="flex items-center gap-3 p-3 bg-slate-700 rounded-lg"
+          >
+            <span class="text-xl">{{ ach.icon || '🏆' }}</span>
+            <div>
+              <div class="font-medium">{{ ach.title }}</div>
+              <div class="text-xs text-slate-400">{{ ach.description }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+definePageMeta({
+  middleware: 'auth'
+})
+
+const { user } = useAuth()
+const { isSupported, subscription, requestPermission, subscribe: pushSubscribe } = usePush()
+const { achievements, loadAchievements } = useAchievements()
+
+const permissionGranted = ref(false)
+const saving = ref(false)
+const saveMessage = ref(null)
+const userGroups = ref([])
+
+const profileForm = reactive({
+  displayName: '',
+  username: '',
+  bio: '',
+  avatar: ''
+})
+
+const loadProfile = async () => {
+  try {
+    const data = await $fetch(`/api/users/${user.value.id}/profile`, {
+      headers: { Authorization: `Bearer ${useAuth().token.value}` }
+    })
+const groupsData = await $fetch('/api/user/groups', {
+      headers: { Authorization: `Bearer ${useAuth().token.value}` }
+    })
+    userGroups.value = groupsData.groups || []
+    
+    profileForm.displayName = data.profile.displayName || ''
+    profileForm.username = data.profile.user.username || ''
+    profileForm.bio = data.profile.bio || ''
+    profileForm.avatar = data.profile.avatar || ''
+  } catch (e) {
+    console.error('Failed to load profile', e)
+  }
+}
+
+const saveProfile = async () => {
+  saving.value = true
+  saveMessage.value = null
+  try {
+    await $fetch('/api/user/profile', {
+      method: 'PUT',
+      body: profileForm,
+      headers: { Authorization: `Bearer ${useAuth().token.value}` }
+    })
+    saveMessage.value = { type: 'success', text: 'Профиль обновлен успешно!' }
+    // Update local user data if needed
+    user.value.username = profileForm.username
+  } catch (e) {
+    saveMessage.value = { type: 'error', text: e.data?.message || 'Ошибка при сохранении' }
+  } finally {
+    saving.value = false
+  }
+}
+
+const enablePush = async () => {
+  const granted = await requestPermission()
+  permissionGranted.value = granted
+  if (granted) {
+    await pushSubscribe()
+  }
+}
+
+const subscribe = async () => {
+  await pushSubscribe()
+}
+
+onMounted(async () => {
+  permissionGranted.value = Notification.permission === 'granted'
+  await Promise.all([
+    loadAchievements(),
+    loadProfile()
+  ])
+})
+</script>

apps/web/app/pages/tasks.vue

@@ -0,0 +1,311 @@
+<template>
+  <div class="min-h-screen bg-slate-900 text-slate-200">
+    <div class="max-w-7xl mx-auto px-4 py-8">
+      <div class="flex items-center justify-between mb-8">
+        <h1 class="text-3xl font-bold text-white flex items-center gap-3">
+          <span class="text-blue-500">📋</span> Мои Задачи
+        </h1>
+        <div class="flex items-center gap-3">
+          <button @click="showCreateModal = true" class="px-4 py-2 bg-blue-600 hover:bg-blue-500 text-white rounded-lg font-medium shadow-lg shadow-blue-900/20 transition flex items-center gap-2">
+            <span>➕</span> Новая задача
+          </button>
+        </div>
+      </div>
+
+      <!-- Create Task Modal -->
+      <div v-if="showCreateModal" class="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50 p-4" @click.self="showCreateModal = false">
+        <div class="bg-slate-800 border border-slate-700 rounded-2xl p-6 w-full max-w-md shadow-2xl">
+          <h2 class="text-xl font-bold text-white mb-6">Создать новую задачу</h2>
+          <form @submit.prevent="createTask" class="space-y-4">
+            <div>
+              <label class="text-xs text-slate-500 uppercase font-bold">Название задачи</label>
+              <input v-model="newTask.title" required class="w-full mt-1 bg-slate-900 border border-slate-700 rounded-lg px-4 py-2.5 text-slate-200 outline-none focus:border-blue-500" placeholder="Что нужно сделать?" />
+            </div>
+            
+            <div>
+              <label class="text-xs text-slate-500 uppercase font-bold">Проект (Канвас)</label>
+              <select v-model="newTask.canvasId" required class="w-full mt-1 bg-slate-900 border border-slate-700 rounded-lg px-4 py-2.5 text-slate-200 outline-none focus:border-blue-500">
+                <option value="" disabled>Выберите проект...</option>
+                <option v-for="c in availableCanvases" :key="c.id" :value="c.id">{{ c.name }}</option>
+              </select>
+            </div>
+
+            <div class="grid grid-cols-2 gap-4">
+              <div>
+                <label class="text-xs text-slate-500 uppercase font-bold">Приоритет</label>
+                <select v-model="newTask.priority" class="w-full mt-1 bg-slate-900 border border-slate-700 rounded-lg px-4 py-2.5 text-slate-200 outline-none focus:border-blue-500">
+                  <option value="low">Низкий</option>
+                  <option value="medium">Средний</option>
+                  <option value="high">Высокий</option>
+                </select>
+              </div>
+              <div>
+                <label class="text-xs text-slate-500 uppercase font-bold">Статус</label>
+                <select v-model="newTask.state" class="w-full mt-1 bg-slate-900 border border-slate-700 rounded-lg px-4 py-2.5 text-slate-200 outline-none focus:border-blue-500">
+                  <option v-for="col in columns" :key="col.id" :value="col.id">{{ col.title }}</option>
+                </select>
+              </div>
+            </div>
+
+            <div class="flex gap-3 pt-4">
+              <button type="submit" :disabled="creating" class="flex-1 py-3 bg-blue-600 hover:bg-blue-500 text-white rounded-xl font-bold transition disabled:opacity-50">
+                {{ creating ? 'Создание...' : 'Создать задачу' }}
+              </button>
+              <button type="button" @click="showCreateModal = false" class="px-6 py-3 bg-slate-700 hover:bg-slate-600 text-white rounded-xl font-bold transition">Отмена</button>
+            </div>
+          </form>
+        </div>
+      </div>
+
+      <div v-if="loading" class="flex items-center justify-center h-64">
+        <div class="w-12 h-12 border-4 border-blue-500 border-t-transparent rounded-full animate-spin"></div>
+      </div>
+
+      <div v-else-if="tasks.length === 0" class="flex flex-col items-center justify-center h-64 bg-slate-800 rounded-xl border border-slate-700">
+        <span class="text-4xl mb-4">📭</span>
+        <h3 class="text-xl font-medium text-white mb-2">У вас пока нет задач</h3>
+        <p class="text-slate-400">Вам не назначено ни одной задачи в проектах.</p>
+      </div>
+
+      <div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+        <!-- Kanban Columns -->
+        <div v-for="col in columns" :key="col.id" class="bg-slate-800 rounded-xl border border-slate-700 flex flex-col max-h-[80vh]">
+          <div class="p-4 border-b border-slate-700 flex items-center justify-between sticky top-0 bg-slate-800 rounded-t-xl z-10">
+            <h3 class="font-bold text-white flex items-center gap-2">
+              <span :class="col.color">{{ col.icon }}</span> {{ col.title }}
+            </h3>
+            <span class="bg-slate-700 text-slate-300 text-xs px-2 py-1 rounded-full font-medium">
+              {{ getTasksForColumn(col.id).length }}
+            </span>
+          </div>
+
+          <div class="p-4 flex-1 overflow-y-auto space-y-4 custom-scrollbar min-h-[200px]">
+            <ClientOnly>
+              <draggable 
+                v-model="columnsData[col.id]" 
+                group="tasks" 
+                item-key="id"
+                class="space-y-4 min-h-[200px]"
+                @change="(evt) => onTaskMove(evt, col.id)"
+              >
+                <template #item="{ element: task }">
+                  <div 
+                    class="bg-slate-900 border border-slate-600 rounded-lg p-4 shadow-sm hover:border-blue-500 transition-colors cursor-pointer group"
+                    @click="openTask(task)"
+                  >
+                    <div class="flex items-start justify-between mb-2">
+                      <div class="text-xs font-medium px-2 py-0.5 rounded" :class="getPriorityClass(task)">
+                        {{ getPriorityLabel(task) }}
+                      </div>
+                      <div class="text-[10px] text-slate-500 font-mono">{{ task.id.split('-')[1] || task.id }}</div>
+                    </div>
+                    
+                    <h4 class="font-medium text-white mb-2 line-clamp-2">{{ getTaskTitle(task) }}</h4>
+                    
+                    <div class="flex items-center justify-between mt-4">
+                      <div class="text-xs text-slate-400 flex items-center gap-1">
+                        <span>🗺️</span>
+                        <span class="truncate max-w-[120px]">{{ task.canvasName }}</span>
+                      </div>
+                      <div v-if="task.alarm || task.data?.alarm" class="text-xs text-orange-400 flex items-center gap-1" :title="new Date(task.alarm || task.data?.alarm).toLocaleString('ru-RU')">
+                        <span>⏰</span>
+                        <span>{{ formatShortDate(task.alarm || task.data?.alarm) }}</span>
+                      </div>
+                    </div>
+                  </div>
+                </template>
+              </draggable>
+            </ClientOnly>
+            
+            <div v-if="columnsData[col.id].length === 0" class="text-center py-6 border-2 border-dashed border-slate-700 rounded-lg pointer-events-none">
+              <span class="text-slate-500 text-sm">Нет задач</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, computed, reactive } from 'vue'
+import draggable from 'vuedraggable'
+
+const auth = useAuth()
+const loading = ref(true)
+const tasks = ref([])
+const columnsData = reactive({
+  todo: [],
+  in_progress: [],
+  review: [],
+  blocked: [],
+  completed: []
+})
+
+const showCreateModal = ref(false)
+const creating = ref(false)
+const availableCanvases = ref([])
+const newTask = reactive({
+  title: '',
+  canvasId: '',
+  priority: 'medium',
+  state: 'todo'
+})
+
+const columns = [
+  { id: 'todo', title: 'К выполнению', icon: '📋', color: 'text-slate-400' },
+  { id: 'in_progress', title: 'В работе', icon: '⏳', color: 'text-blue-400' },
+  { id: 'review', title: 'На проверке', icon: '👀', color: 'text-purple-400' },
+  { id: 'blocked', title: 'Заблокировано', icon: '⛔', color: 'text-red-400' },
+  { id: 'completed', title: 'Завершено', icon: '✅', color: 'text-emerald-400' }
+]
+
+// Fetch all tasks for current user
+const fetchTasks = async () => {
+  try {
+    const data = await $fetch('/api/tasks', {
+      headers: { Authorization: `Bearer ${auth.token.value}` }
+    })
+    tasks.value = data.tasks || []
+    
+    // Split tasks into columns
+    columns.forEach(col => {
+      columnsData[col.id] = tasks.value.filter(t => {
+        const taskState = t.state || t.data?.state || 'todo'
+        return taskState === col.id
+      })
+    })
+  } catch (e) {
+    console.error('Failed to load tasks', e)
+  } finally {
+    loading.value = false
+  }
+}
+
+const fetchCanvases = async () => {
+  try {
+    const data = await $fetch('/api/canvas', {
+      headers: { Authorization: `Bearer ${auth.token.value}` }
+    })
+    availableCanvases.value = data.canvases || []
+    if (availableCanvases.value.length > 0) {
+      newTask.canvasId = availableCanvases.value[0].id
+    }
+  } catch (e) {
+    console.error('Failed to load canvases', e)
+  }
+}
+
+const createTask = async () => {
+  creating.value = true
+  try {
+    await $fetch('/api/tasks/create', {
+      method: 'POST',
+      body: newTask,
+      headers: { Authorization: `Bearer ${auth.token.value}` }
+    })
+    showCreateModal.value = false
+    newTask.title = ''
+    await fetchTasks() // Refresh list
+  } catch (e) {
+    alert('Ошибка при создании задачи: ' + (e.data?.message || e.message))
+  } finally {
+    creating.value = false
+  }
+}
+
+const onTaskMove = async (evt, newStatus) => {
+  if (evt.added) {
+    const task = evt.added.element
+    console.log(`Moving task ${task.id} to ${newStatus}`)
+    
+    try {
+      await $fetch('/api/tasks/update-status', {
+        method: 'POST',
+        body: {
+          taskId: task.id,
+          canvasId: task.canvasId,
+          newState: newStatus
+        },
+        headers: { Authorization: `Bearer ${auth.token.value}` }
+      })
+    } catch (e) {
+      console.error('Failed to update task status', e)
+      // Rollback on error? (In a production app, we should)
+      alert('Не удалось обновить статус задачи на сервере')
+    }
+  }
+}
+
+const getTasksForColumn = (state) => {
+  return tasks.value.filter(t => {
+    const taskState = t.state || t.data?.state || 'todo'
+    return taskState === state
+  })
+}
+
+const getTaskTitle = (task) => {
+  if (task.label) return task.label
+  const text = task.text || task.data?.text
+  if (text) {
+    const lines = text.split('\n')
+    const firstLine = lines.find(l => l.trim().startsWith('# ')) || lines.find(l => l.trim())
+    return firstLine ? firstLine.replace('# ', '').trim().slice(0, 50) : 'Без названия'
+  }
+  return 'Задача'
+}
+
+const getPriorityClass = (task) => {
+  const priority = task.priority || task.data?.priority
+  if (priority === 'high') return 'bg-red-900/50 text-red-300'
+  if (priority === 'low') return 'bg-slate-700 text-slate-300'
+  return 'bg-blue-900/50 text-blue-300' // medium
+}
+
+const getPriorityLabel = (task) => {
+  const priority = task.priority || task.data?.priority
+  if (priority === 'high') return 'Высокий'
+  if (priority === 'low') return 'Низкий'
+  return 'Средний'
+}
+
+const formatShortDate = (dateStr) => {
+  try {
+    const d = new Date(dateStr)
+    return d.toLocaleDateString('ru-RU', { day: 'numeric', month: 'short' })
+  } catch {
+    return dateStr
+  }
+}
+
+const openTask = (task) => {
+  navigateTo(`/canvas/${task.canvasId}`)
+}
+
+onMounted(async () => {
+  if (!auth.user.value) {
+    await auth.init()
+  }
+  await Promise.all([
+    fetchTasks(),
+    fetchCanvases()
+  ])
+})
+</script>
+
+<style scoped>
+.custom-scrollbar {
+  scrollbar-width: thin;
+  scrollbar-color: #475569 transparent;
+}
+.custom-scrollbar::-webkit-scrollbar {
+  width: 4px;
+}
+.custom-scrollbar::-webkit-scrollbar-track {
+  background: transparent;
+}
+.custom-scrollbar::-webkit-scrollbar-thumb {
+  background-color: #475569;
+  border-radius: 4px;
+}
+</style>