diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 3efa336..c3c684d 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -23,7 +23,11 @@
 
 const currentLabel = computed(() => {
   const item = navItems.value.find((i) => i.to === route.path)
-  return item?.label ?? 'gntodo'
+  if (item) return item.label
+  // глубокие страницы: задача → страница задачи, проект → раздел проектов
+  if (route.path.startsWith('/tasks/')) return t('nav.task')
+  if (route.path.startsWith('/projects/')) return t('nav.projects')
+  return 'gntodo'
 })
 
 onMounted(async () => {
@@ -88,7 +92,7 @@
 
 <style>
 .app-content {
-  max-width: 760px;
+  max-width: 1200px;
   margin: 0 auto;
   padding: 1.5rem 1rem 3rem;
 }
diff --git a/frontend/src/components/TaskBadges.vue b/frontend/src/components/TaskBadges.vue
index 62a2984..4c749c8 100644
--- a/frontend/src/components/TaskBadges.vue
+++ b/frontend/src/components/TaskBadges.vue
@@ -12,14 +12,14 @@
   statusVariant,
 } from '../taskui'
 
-defineProps<{ task: Task }>()
+defineProps<{ task: Task; hideProject?: boolean }>()
 
 const { t } = useI18n()
 </script>
 
 <template>
   <GnBadge :variant="statusVariant(task.status)">{{ statusLabel(task.status) }}</GnBadge>
-  <GnBadge v-if="task.project" variant="neutral" icon="ph-folder">
+  <GnBadge v-if="task.project && !hideProject" variant="neutral" icon="ph-folder">
     {{ task.project.name }}
   </GnBadge>
   <GnBadge v-if="task.priority !== null" variant="warning">P{{ task.priority }}</GnBadge>
diff --git a/frontend/src/components/TaskCard.vue b/frontend/src/components/TaskCard.vue
new file mode 100644
index 0000000..1bc535a
--- /dev/null
+++ b/frontend/src/components/TaskCard.vue
@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import type { Task } from '../api'
+import { proposalItems, statusOptions } from '../taskui'
+import TaskBadges from './TaskBadges.vue'
+
+// Карточка задачи для списков (список, страница проекта): заголовок-ссылка
+// на страницу задачи, сниппет описания/предложения ИИ, бейджи, «⋯»-меню.
+// API-вызовы и подтверждение удаления — на родителе (эмитим события).
+
+const props = defineProps<{
+  task: Task
+  /** Показывать бейдж проекта (скрывать на странице проекта) */
+  showProject?: boolean
+}>()
+
+const emit = defineEmits<{
+  'status-change': [task: Task, status: string]
+  delete: [task: Task]
+}>()
+
+const { t } = useI18n()
+const router = useRouter()
+
+// Сниппет: описание задачи, а без него — пункты предложения ИИ
+const snippet = computed(() => {
+  const text =
+    props.task.description.trim() || proposalItems(props.task).join(' · ')
+  return text
+})
+
+function menu(task: Task) {
+  return [
+    ...statusOptions().map((o) => ({
+      label: o.label,
+      icon: o.value === task.status ? 'ph-check' : undefined,
+      onSelect: () => emit('status-change', task, o.value),
+    })),
+    { label: t('card.open'), icon: 'ph-arrow-square-out', onSelect: () => open(task.id) },
+    { label: t('common.delete'), icon: 'ph-trash', danger: true, onSelect: () => emit('delete', task) },
+  ]
+}
+
+function open(id: number) {
+  void router.push(`/tasks/${id}`)
+}
+</script>
+
+<template>
+  <GnCard class="task-card">
+    <div class="task-main">
+      <RouterLink class="title" :class="{ done: task.status === 'done' }" :to="`/tasks/${task.id}`">
+        {{ task.title }}
+      </RouterLink>
+      <GnDropdown class="task-menu" :items="menu(task)">
+        <template #trigger="{ toggle }">
+          <GnIconButton icon="ph-dots-three-outline" :label="t('common.edit')" @click="toggle" />
+        </template>
+      </GnDropdown>
+    </div>
+    <p v-if="snippet" class="snippet">{{ snippet }}</p>
+    <div class="task-meta">
+      <TaskBadges :task="task" :hide-project="!showProject" />
+    </div>
+  </GnCard>
+</template>
+
+<style scoped>
+.task-main {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+.title {
+  flex: 1;
+  min-width: 0;
+  font-weight: 600;
+  color: inherit;
+  text-decoration: none;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.title:hover {
+  color: var(--accent, #7aa2f7);
+}
+.title.done {
+  text-decoration: line-through;
+  color: var(--text-muted, #888);
+}
+.snippet {
+  margin: 0.25rem 0 0;
+  color: var(--text-muted, #a9b1d6);
+  font-size: 0.9em;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.task-menu {
+  flex: none;
+}
+.task-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.3rem;
+  align-items: center;
+  margin-top: 0.5rem;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/components/TaskForm.vue b/frontend/src/components/TaskForm.vue
new file mode 100644
index 0000000..ef04a1f
--- /dev/null
+++ b/frontend/src/components/TaskForm.vue
@@ -0,0 +1,395 @@
+<script setup lang="ts">
+import DOMPurify from 'dompurify'
+import { marked } from 'marked'
+import { computed, onMounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { api, type Attachment, type Project, type Tag, type Task } from '../api'
+import { deadlinePeriodOptions, recurKindOptions, weekdayShort } from '../taskui'
+import { useToast } from 'gnexus-ui-kit/vue'
+import QuickPrompt from './QuickPrompt.vue'
+
+// Полная форма задачи (вынесена из drawer'а стека): метаданные, дедлайн,
+// рекуррентность, вложения (Ctrl+V — картинка), создание проекта/тега на лету.
+// Сохранение делает сама (PATCH + опционально approve) и эмитит результат.
+
+const props = defineProps<{
+  task: Task
+  /** После сохранения утвердить задачу (флоу стека: правка = утверждение) */
+  approveAfterSave?: boolean
+  /** Надпись на кнопке подтверждения */
+  submitLabel?: string
+}>()
+
+const emit = defineEmits<{
+  saved: [task: Task]
+  cancel: []
+}>()
+
+const { t } = useI18n()
+const toast = useToast()
+
+const projects = ref<Project[]>([])
+const tags = ref<Tag[]>([])
+
+const form = ref({
+  title: '',
+  description: '',
+  project_id: '' as string | number,
+  tagSelection: {} as Record<number, boolean>,
+  priority: null as number | null,
+  estimated_minutes: null as number | null,
+  budget_money: null as number | null,
+  cost_estimate_money: null as number | null,
+  deadline_date: '' as string,
+  deadline_period: '' as string,
+  task_type: 'one_time',
+  recur_kind: '' as string,
+  recur_interval_days: 1 as number | null,
+  recurWeekday: {} as Record<string, boolean>,
+  recur_day_of_month: 1 as number | null,
+})
+
+// Дни недели для правила повторения (ISO: пн=1..вс=7) — имена через Intl
+const WEEKDAYS = computed(() =>
+  [1, 2, 3, 4, 5, 6, 7].map((n) => ({ value: String(n), label: weekdayShort(n) })),
+)
+const showPreview = ref(false)
+const attachments = ref<Attachment[]>([])
+const uploading = ref(false)
+
+const markdownPreview = computed(() =>
+  DOMPurify.sanitize(marked.parse(form.value.description, { async: false })),
+)
+
+onMounted(async () => {
+  const task = props.task
+  const selection: Record<number, boolean> = {}
+  task.tags.forEach((t) => (selection[t.id] = true))
+  form.value = {
+    title: task.title,
+    description: task.description,
+    project_id: task.project?.id ?? '',
+    tagSelection: selection,
+    priority: task.priority,
+    estimated_minutes: task.estimated_minutes,
+    budget_money: task.budget_money,
+    cost_estimate_money: task.cost_estimate_money,
+    deadline_date: task.deadline_date ?? '',
+    deadline_period: task.deadline_period ?? '',
+    task_type: task.task_type ?? 'one_time',
+    recur_kind: task.recur_kind ?? '',
+    recur_interval_days: task.recur_interval_days ?? 1,
+    recurWeekday: task.recur_weekdays
+      ? Object.fromEntries(task.recur_weekdays.split(',').map((d) => [d, true]))
+      : {},
+    recur_day_of_month: task.recur_day_of_month ?? 1,
+  }
+  try {
+    ;[projects.value, tags.value] = await Promise.all([api.listProjects(), api.listTags()])
+  } catch (e) {
+    toast.error({ title: t('common.error'), text: String(e) })
+  }
+  void loadAttachments(task.id)
+})
+
+async function loadAttachments(taskId: number) {
+  try {
+    attachments.value = await api.listAttachments(taskId)
+  } catch (e) {
+    toast.error({ title: t('common.error'), text: String(e) })
+  }
+}
+
+function selectedTagIds(): number[] {
+  return Object.entries(form.value.tagSelection)
+    .filter(([, on]) => on)
+    .map(([id]) => Number(id))
+}
+
+async function save() {
+  try {
+    const f = form.value
+    let task = await api.updateTask(props.task.id, {
+      title: f.title,
+      description: f.description,
+      project_id: f.project_id === '' ? null : Number(f.project_id),
+      tag_ids: selectedTagIds(),
+      priority: f.priority,
+      estimated_minutes: f.estimated_minutes,
+      budget_money: f.budget_money,
+      cost_estimate_money: f.cost_estimate_money,
+      deadline_date: f.deadline_date === '' ? null : f.deadline_date,
+      deadline_period: f.deadline_period === '' ? null : f.deadline_period,
+      task_type: f.task_type,
+      recur_kind: f.task_type === 'recurring' && f.recur_kind ? f.recur_kind : null,
+      recur_interval_days:
+        f.task_type === 'recurring' && f.recur_kind === 'interval' ? f.recur_interval_days : null,
+      recur_weekdays:
+        f.task_type === 'recurring' && f.recur_kind === 'weekdays'
+          ? Object.keys(f.recurWeekday)
+              .filter((d) => f.recurWeekday[d])
+              .sort()
+              .join(',') || null
+          : null,
+      recur_day_of_month:
+        f.task_type === 'recurring' && f.recur_kind === 'monthly' ? f.recur_day_of_month : null,
+    })
+    if (props.approveAfterSave) task = await api.approveTask(props.task.id)
+    toast.success({ title: props.approveAfterSave ? t('common.taskApproved') : t('common.saved') })
+    emit('saved', task)
+  } catch (e) {
+    toast.error({ title: t('common.error'), text: String(e) })
+  }
+}
+
+// Вставка изображений из буфера обмена прямо в редактор описания
+async function onPaste(event: ClipboardEvent) {
+  const files = Array.from(event.clipboardData?.files ?? []).filter((f) =>
+    f.type.startsWith('image/'),
+  )
+  if (!files.length) return
+  event.preventDefault()
+  uploading.value = true
+  try {
+    const saved = await api.uploadAttachments(props.task.id, files)
+    attachments.value.push(...saved)
+  } catch (e) {
+    toast.error({ title: t('common.error'), text: String(e) })
+  } finally {
+    uploading.value = false
+  }
+}
+
+async function removeAttachment(att: Attachment) {
+  try {
+    await api.deleteAttachment(att.id)
+    attachments.value = attachments.value.filter((a) => a.id !== att.id)
+  } catch (e) {
+    toast.error({ title: t('common.error'), text: String(e) })
+  }
+}
+
+// Создание проекта/тега на лету — модальное окно вместо window.prompt
+const promptOpen = ref(false)
+const promptTitle = ref('')
+let promptKind: 'project' | 'tag' = 'project'
+
+function openPrompt(kind: 'project' | 'tag') {
+  promptKind = kind
+  promptTitle.value = kind === 'project' ? t('stack.promptProject') : t('stack.promptTag')
+  promptOpen.value = true
+}
+
+async function onPromptConfirm(name: string) {
+  try {
+    if (promptKind === 'project') {
+      const p = await api.createProject(name)
+      projects.value.push(p)
+      form.value.project_id = p.id
+    } else {
+      const tag = await api.createTag(name)
+      tags.value.push(tag)
+      form.value.tagSelection[tag.id] = true
+    }
+  } catch (e) {
+    toast.error({ title: t('common.error'), text: String(e) })
+  }
+}
+
+const projectOptions = () => [
+  { value: '', label: t('common.noProject') },
+  ...projects.value.map((p) => ({ value: String(p.id), label: p.name })),
+]
+</script>
+
+<template>
+  <form class="edit-form" @submit.prevent="save">
+    <GnInput v-model="form.title" :label="t('stack.form.title')" required />
+    <GnTextarea v-model="form.description" :label="t('stack.form.description')" :rows="4" @paste="onPaste" />
+    <GnCheckbox v-model="showPreview" :label="t('stack.form.preview')" />
+    <div v-if="showPreview" class="md-preview" v-html="markdownPreview" />
+
+    <GnSelect
+      v-model="form.project_id"
+      :label="t('stack.form.project')"
+      icon="ph-folder"
+      :options="projectOptions()"
+    />
+    <div class="form-row-actions">
+      <GnButton type="button" variant="secondary" size="sm" icon="ph-plus" @click="openPrompt('project')">
+        {{ t('stack.newProject') }}
+      </GnButton>
+    </div>
+    <fieldset class="tags-fieldset">
+      <legend>{{ t('stack.form.tags') }}</legend>
+      <GnCheckbox v-for="tag in tags" :key="tag.id" v-model="form.tagSelection[tag.id]" :label="tag.name" />
+      <GnButton type="button" variant="secondary" size="sm" icon="ph-plus" @click="openPrompt('tag')">
+        {{ t('stack.newTag') }}
+      </GnButton>
+    </fieldset>
+    <GnInput v-model.number="form.priority" :label="t('stack.form.priority')" type="number" />
+    <GnInput
+      v-model.number="form.estimated_minutes"
+      :label="t('stack.form.estimate')"
+      type="number"
+      min="1"
+    />
+    <div class="budget-row">
+      <GnInput v-model.number="form.budget_money" :label="t('stack.form.budget')" type="number" min="0" />
+      <GnInput
+        v-model.number="form.cost_estimate_money"
+        :label="t('stack.form.cost')"
+        type="number"
+        min="0"
+      />
+    </div>
+    <fieldset class="tags-fieldset">
+      <legend>{{ t('stack.deadline.legend') }}</legend>
+      <GnInput v-model="form.deadline_date" :label="t('stack.deadline.date')" type="date" />
+      <GnSelect
+        v-model="form.deadline_period"
+        :label="t('stack.deadline.period')"
+        :options="[{ value: '', label: t('common.none') }, ...deadlinePeriodOptions()]"
+      />
+    </fieldset>
+    <fieldset class="tags-fieldset">
+      <legend>{{ t('stack.recur.legend') }}</legend>
+      <GnSelect
+        v-model="form.task_type"
+        :options="[
+          { value: 'one_time', label: t('stack.recur.oneTime') },
+          { value: 'recurring', label: t('stack.recur.recurring') },
+        ]"
+      />
+      <template v-if="form.task_type === 'recurring'">
+        <GnSelect
+          v-model="form.recur_kind"
+          :label="t('stack.recur.kind')"
+          :options="[{ value: '', label: t('common.choose') }, ...recurKindOptions()]"
+        />
+        <GnInput
+          v-if="form.recur_kind === 'interval'"
+          v-model.number="form.recur_interval_days"
+          :label="t('stack.recur.interval')"
+          type="number"
+          min="1"
+          max="365"
+        />
+        <template v-if="form.recur_kind === 'weekdays'">
+          <fieldset class="tags-fieldset weekdays-fieldset">
+            <legend>{{ t('stack.recur.weekdays') }}</legend>
+            <GnCheckbox
+              v-for="d in WEEKDAYS"
+              :key="d.value"
+              v-model="form.recurWeekday[d.value]"
+              :label="d.label"
+            />
+          </fieldset>
+        </template>
+        <GnInput
+          v-if="form.recur_kind === 'monthly'"
+          v-model.number="form.recur_day_of_month"
+          :label="t('stack.recur.monthlyDay')"
+          type="number"
+          min="1"
+          max="31"
+        />
+      </template>
+    </fieldset>
+
+    <!-- Вложения: вставленные Ctrl+V изображения -->
+    <div v-if="attachments.length || uploading" class="attachments">
+      <GnBadge v-if="uploading" variant="info">{{ t('stack.uploading') }}</GnBadge>
+      <div class="thumbs">
+        <div v-for="att in attachments" :key="att.id" class="thumb">
+          <img :src="api.attachmentUrl(att.id)" :alt="att.original_name" />
+          <GnIconButton
+            icon="ph-x"
+            :label="t('stack.deleteAttachment')"
+            size="sm"
+            @click="removeAttachment(att)"
+          />
+        </div>
+      </div>
+    </div>
+
+    <div class="form-actions">
+      <GnButton type="submit" variant="accent" icon="ph-check-circle">
+        {{ submitLabel ?? t('stack.approve') }}
+      </GnButton>
+      <GnButton type="button" variant="secondary" @click="emit('cancel')">
+        {{ t('common.cancel') }}
+      </GnButton>
+    </div>
+  </form>
+
+  <QuickPrompt v-model:open="promptOpen" :title="promptTitle" @confirm="onPromptConfirm" />
+</template>
+
+<style scoped>
+.edit-form {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+.form-row-actions {
+  margin-top: -0.5rem;
+}
+.tags-fieldset {
+  border: 1px solid var(--border, #333);
+  border-radius: 6px;
+  padding: 0.75rem;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  align-items: center;
+}
+.tags-fieldset legend {
+  padding: 0 0.5rem;
+  font-size: 0.85em;
+  color: var(--text-muted, #888);
+}
+.md-preview {
+  border: 1px solid var(--border, #333);
+  border-radius: 6px;
+  padding: 0.75rem;
+  overflow-x: auto;
+}
+.attachments {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.thumbs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+}
+.thumb {
+  position: relative;
+}
+.thumb img {
+  max-width: 120px;
+  max-height: 90px;
+  border-radius: 6px;
+  border: 1px solid var(--border, #333);
+  display: block;
+}
+.thumb .btn-icon {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+}
+.form-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+}
+.budget-row {
+  display: flex;
+  gap: 0.75rem;
+}
+.budget-row > * {
+  flex: 1;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/components/TaskTree.vue b/frontend/src/components/TaskTree.vue
new file mode 100644
index 0000000..f4bad49
--- /dev/null
+++ b/frontend/src/components/TaskTree.vue
@@ -0,0 +1,211 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import type { Task } from '../api'
+import { statusOptions } from '../taskui'
+import TaskBadges from './TaskBadges.vue'
+
+// Наглядное дерево задач (ТЗ 3.6): линии связей, сворачивание узлов,
+// прогресс поддерева. tasks — плоский список; корень выбирается rootId
+// (0 — верхний уровень, N — поддерево задачи N). Действия эмитятся родителю.
+
+const props = withDefaults(
+  defineProps<{
+    tasks: Task[]
+    /** 0 — корни верхнего уровня; N — дети задачи N */
+    rootId?: number
+  }>(),
+  { rootId: 0 },
+)
+
+const emit = defineEmits<{
+  'status-change': [task: Task, status: string]
+  'add-subtask': [task: Task]
+  delete: [task: Task]
+}>()
+
+const { t } = useI18n()
+
+interface FlatNode {
+  task: Task
+  depth: number
+  hasChildren: boolean
+  done: number
+  total: number
+}
+
+const expanded = ref<Record<number, boolean>>({})
+
+const byId = computed(() => {
+  const map = new Map<number, Task[]>()
+  props.tasks.forEach((t) => {
+    const key = t.parent_task_id ?? 0
+    const list = map.get(key) ?? []
+    list.push(t)
+    map.set(key, list)
+  })
+  return map
+})
+
+// Прогресс поддерева: выполнено / всего потомков (в пределах переданного набора)
+function subtreeProgress(id: number): { done: number; total: number } {
+  let done = 0
+  let total = 0
+  for (const child of byId.value.get(id) ?? []) {
+    total += 1
+    if (child.status === 'done') done += 1
+    const sub = subtreeProgress(child.id)
+    done += sub.done
+    total += sub.total
+  }
+  return { done, total }
+}
+
+// Плоское представление дерева с отступами (проще, чем рекурсивный компонент)
+const rows = computed<FlatNode[]>(() => {
+  const out: FlatNode[] = []
+  const visit = (parentId: number, depth: number) => {
+    const children = byId.value.get(parentId) ?? []
+    children.forEach((t) => {
+      const kids = byId.value.get(t.id) ?? []
+      const progress = subtreeProgress(t.id)
+      out.push({ task: t, depth, hasChildren: kids.length > 0, ...progress })
+      if (kids.length > 0 && (expanded.value[t.id] ?? true)) visit(t.id, depth + 1)
+    })
+  }
+  visit(props.rootId, 0)
+  return out
+})
+
+function toggle(task: Task) {
+  expanded.value[task.id] = !(expanded.value[task.id] ?? true)
+}
+
+// Меню «⋯»: смена статуса (отмечен текущий), подзадача, удаление
+function taskMenu(task: Task) {
+  return [
+    ...statusOptions().map((o) => ({
+      label: o.label,
+      icon: o.value === task.status ? 'ph-check' : undefined,
+      onSelect: () => emit('status-change', task, o.value),
+    })),
+    { label: t('tree.addSubtask'), icon: 'ph-plus', onSelect: () => emit('add-subtask', task) },
+    { label: t('common.delete'), icon: 'ph-trash', danger: true, onSelect: () => emit('delete', task) },
+  ]
+}
+</script>
+
+<template>
+  <div class="tree">
+    <div
+      v-for="row in rows"
+      :key="row.task.id"
+      class="node"
+      :class="{ 'is-child': row.depth > 0 }"
+      :style="{ marginLeft: row.depth * 20 + 'px' }"
+    >
+      <div class="node-main">
+        <GnIconButton
+          v-if="row.hasChildren"
+          class="caret"
+          :icon="expanded[row.task.id] ?? true ? 'ph-caret-down' : 'ph-caret-right'"
+          :label="expanded[row.task.id] ?? true ? t('tree.collapse') : t('tree.expand')"
+          size="sm"
+          @click="toggle(row.task)"
+        />
+        <span v-else class="leaf-space" />
+        <RouterLink class="title" :class="{ done: row.task.status === 'done' }" :to="`/tasks/${row.task.id}`">
+          {{ row.task.title }}
+        </RouterLink>
+        <GnBadge v-if="row.total > 0" variant="neutral" icon="ph-tree-structure">
+          {{ row.done }}/{{ row.total }}
+        </GnBadge>
+        <GnDropdown class="node-menu" :items="taskMenu(row.task)">
+          <template #trigger="{ toggle }">
+            <GnIconButton icon="ph-dots-three-outline" :label="t('common.edit')" @click="toggle" />
+          </template>
+        </GnDropdown>
+      </div>
+      <div class="node-meta">
+        <TaskBadges :task="row.task" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.tree {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+/* Линия связи: горизонтальный усик к каждому дочернему узлу */
+.node {
+  position: relative;
+  border: 1px solid var(--border, #2a2f47);
+  border-radius: 8px;
+  padding: 0.4rem 0.6rem;
+  background: var(--surface, transparent);
+}
+.node.is-child::before {
+  content: '';
+  position: absolute;
+  left: -20px;
+  top: 1.4rem;
+  width: 16px;
+  height: 2px;
+  background: var(--border, #2a2f47);
+}
+.node-main {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+.caret {
+  flex: none;
+}
+.leaf-space {
+  width: 28px;
+  flex: none;
+}
+.title {
+  flex: 1;
+  min-width: 0;
+  font-weight: 600;
+  color: inherit;
+  text-decoration: none;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.title:hover {
+  color: var(--accent, #7aa2f7);
+}
+.title.done {
+  text-decoration: line-through;
+  color: var(--text-muted, #888);
+}
+.node-menu {
+  flex: none;
+}
+.node-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.3rem;
+  align-items: center;
+  margin-top: 0.4rem;
+  padding-left: 2.4rem;
+}
+@media (max-width: 480px) {
+  .node {
+    margin-left: 0 !important;
+  }
+  /* на узком экране отступов нет — усик торчал бы за край */
+  .node.is-child::before {
+    display: none;
+  }
+  .node-meta {
+    padding-left: 0;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/locales/en.ts b/frontend/src/locales/en.ts
index 672f06d..8d49529 100644
--- a/frontend/src/locales/en.ts
+++ b/frontend/src/locales/en.ts
@@ -15,6 +15,7 @@
     preview: 'Preview',
     confirmTitle: 'Confirmation',
     delete: 'Delete',
+    open: 'Open',
     deleteConfirmTask: 'Delete task "{title}"? This cannot be undone.',
     deleteConfirmProject: 'Delete project "{name}"? Tasks will remain, but without a project.',
     saved: 'Saved',
@@ -31,6 +32,7 @@
     signIn: 'Sign in',
     account: 'Account',
     signOut: 'Sign out',
+    task: 'Task',
     stack: 'Inbox stack',
     tree: 'Task tree',
     list: 'Task list',
@@ -99,6 +101,36 @@
     collapse: 'Collapse',
     expand: 'Expand',
   },
+  task: {
+    notFoundTitle: 'Task not found',
+    notFoundText: 'The task may have been deleted or the link is stale.',
+    proposalTitle: 'AI proposal',
+    description: 'Description',
+    descriptionEmpty: 'No description yet — detail the task.',
+    fields: 'Details',
+    field: {
+      project: 'Project',
+      priority: 'Priority',
+      estimate: 'Time estimate',
+      money: 'Money',
+      deadline: 'Deadline',
+      recurrence: 'Recurrence',
+    },
+    subtasks: 'Subtasks',
+    noSubtasks: 'No subtasks',
+  },
+  projectPage: {
+    notFoundTitle: 'Project not found',
+    notFoundText: 'The project may have been deleted or the link is stale.',
+    note: 'Note',
+    progress: 'Project tasks: {done}/{total}',
+    newTask: 'New task',
+    taskCreated: 'Task created — it went to the stack for detailing',
+    promptTask: 'New project task:',
+    emptyTitle: 'No tasks',
+    emptyText: 'Create the first project task or relax the filters.',
+    tree: 'Project tree',
+  },
   list: {
     title: 'Task list',
     count: 'Found: {n}',
diff --git a/frontend/src/locales/ru.ts b/frontend/src/locales/ru.ts
index 466dbc2..3bdd8db 100644
--- a/frontend/src/locales/ru.ts
+++ b/frontend/src/locales/ru.ts
@@ -16,6 +16,7 @@
     preview: 'Предпросмотр',
     confirmTitle: 'Подтверждение',
     delete: 'Удалить',
+    open: 'Открыть',
     deleteConfirmTask: 'Удалить задачу «{title}»? Действие необратимо.',
     deleteConfirmProject: 'Удалить проект «{name}»? Задачи останутся, но без проекта.',
     saved: 'Сохранено',
@@ -32,6 +33,7 @@
     signIn: 'Войти',
     account: 'Аккаунт',
     signOut: 'Выйти',
+    task: 'Задача',
     stack: 'Стек входящих',
     tree: 'Дерево задач',
     list: 'Список задач',
@@ -100,6 +102,36 @@
     collapse: 'Свернуть',
     expand: 'Развернуть',
   },
+  task: {
+    notFoundTitle: 'Задача не найдена',
+    notFoundText: 'Возможно, задача удалена или ссылка устарела.',
+    proposalTitle: 'Предложение ИИ',
+    description: 'Описание',
+    descriptionEmpty: 'Описание пусто — детализируйте задачу.',
+    fields: 'Параметры',
+    field: {
+      project: 'Проект',
+      priority: 'Приоритет',
+      estimate: 'Оценка времени',
+      money: 'Деньги',
+      deadline: 'Дедлайн',
+      recurrence: 'Повторение',
+    },
+    subtasks: 'Подзадачи',
+    noSubtasks: 'Подзадач нет',
+  },
+  projectPage: {
+    notFoundTitle: 'Проект не найден',
+    notFoundText: 'Возможно, проект удалён или ссылка устарела.',
+    note: 'Заметка',
+    progress: 'Задачи проекта: {done}/{total}',
+    newTask: 'Новая задача',
+    taskCreated: 'Задача создана — попала в стек на детализацию',
+    promptTask: 'Новая задача проекта:',
+    emptyTitle: 'Задач нет',
+    emptyText: 'Создайте первую задачу проекта или ослабьте фильтры.',
+    tree: 'Дерево проекта',
+  },
   list: {
     title: 'Список задач',
     count: 'Найдено: {n}',
diff --git a/frontend/src/locales/uk.ts b/frontend/src/locales/uk.ts
index 5d78083..0ce127a 100644
--- a/frontend/src/locales/uk.ts
+++ b/frontend/src/locales/uk.ts
@@ -15,6 +15,7 @@
     preview: 'Попередній перегляд',
     confirmTitle: 'Підтвердження',
     delete: 'Видалити',
+    open: 'Відкрити',
     deleteConfirmTask: 'Видалити задачу «{title}»? Дію не можна скасувати.',
     deleteConfirmProject: 'Видалити проєкт «{name}»? Задачі залишаться, але без проєкту.',
     saved: 'Збережено',
@@ -31,6 +32,7 @@
     signIn: 'Увійти',
     account: 'Акаунт',
     signOut: 'Вийти',
+    task: 'Завдання',
     stack: 'Вхідний стек',
     tree: 'Дерево задач',
     list: 'Список задач',
@@ -99,6 +101,36 @@
     collapse: 'Згорнути',
     expand: 'Розгорнути',
   },
+  task: {
+    notFoundTitle: 'Задачу не знайдено',
+    notFoundText: 'Можливо, задачу видалено або посилання застаріло.',
+    proposalTitle: 'Пропозиція ШІ',
+    description: 'Опис',
+    descriptionEmpty: 'Опис порожній — деталізуйте задачу.',
+    fields: 'Параметри',
+    field: {
+      project: 'Проєкт',
+      priority: 'Пріоритет',
+      estimate: 'Оцінка часу',
+      money: 'Гроші',
+      deadline: 'Дедлайн',
+      recurrence: 'Повторення',
+    },
+    subtasks: 'Підзадачі',
+    noSubtasks: 'Підзадач немає',
+  },
+  projectPage: {
+    notFoundTitle: 'Проєкт не знайдено',
+    notFoundText: 'Можливо, проєкт видалено або посилання застаріло.',
+    note: 'Нотатка',
+    progress: 'Задачі проєкту: {done}/{total}',
+    newTask: 'Нова задача',
+    taskCreated: 'Задачу створено — потрапила у стек на деталізацію',
+    promptTask: 'Нова задача проєкту:',
+    emptyTitle: 'Задач немає',
+    emptyText: 'Створіть першу задачу проєкту або послабте фільтри.',
+    tree: 'Дерево проєкту',
+  },
   list: {
     title: 'Список задач',
     count: 'Знайдено: {n}',
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index e2990b6..cd4f0a4 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -9,9 +9,11 @@
 import i18n from './i18n'
 import ListView from './views/ListView.vue'
 import OptionsView from './views/OptionsView.vue'
+import ProjectView from './views/ProjectView.vue'
 import ProjectsView from './views/ProjectsView.vue'
 import SettingsView from './views/SettingsView.vue'
 import StackView from './views/StackView.vue'
+import TaskView from './views/TaskView.vue'
 import TreeView from './views/TreeView.vue'
 
 const router = createRouter({
@@ -22,6 +24,8 @@
     { path: '/tree', component: TreeView },
     { path: '/list', component: ListView },
     { path: '/projects', component: ProjectsView },
+    { path: '/projects/:id', component: ProjectView },
+    { path: '/tasks/:id', component: TaskView },
     { path: '/options', component: OptionsView },
     { path: '/settings', component: SettingsView },
   ],
diff --git a/frontend/src/taskui.ts b/frontend/src/taskui.ts
index 83fe028..752f3f9 100644
--- a/frontend/src/taskui.ts
+++ b/frontend/src/taskui.ts
@@ -168,4 +168,20 @@
     parts.push(t('taskui.money.estimate', { amount: formatMoney(task.cost_estimate_money) }))
   }
   return parts.join(' / ')
+}
+
+// Подписи чернового предложения LLM (стек, страница задачи)
+export function proposalItems(task: {
+  ai_proposal: import('./api').AiProposal | null
+}): string[] {
+  const p = task.ai_proposal
+  if (!p) return []
+  const items: string[] = []
+  p.tags.forEach((tag) => items.push(tag))
+  if (p.project)
+    items.push(p.new_project ? t('stack.proposalNewProject', { name: p.project }) : p.project)
+  if (p.priority !== null) items.push(t('stack.proposalPriority', { n: p.priority }))
+  if (p.estimated_minutes !== null && p.estimated_minutes !== undefined)
+    items.push(`≈ ${formatMinutes(p.estimated_minutes)}`)
+  return items
 }
\ No newline at end of file
diff --git a/frontend/src/views/ListView.vue b/frontend/src/views/ListView.vue
index e7cb7f7..1eeb8ca 100644
--- a/frontend/src/views/ListView.vue
+++ b/frontend/src/views/ListView.vue
@@ -3,7 +3,7 @@
 import { useI18n } from 'vue-i18n'
 import { api, type Project, type Tag, type Task } from '../api'
 import { statusOptions } from '../taskui'
-import TaskBadges from '../components/TaskBadges.vue'
+import TaskCard from '../components/TaskCard.vue'
 
 // Классический вид (ТЗ 3.6): список с фильтрами — проект, тег, статус.
 // Фильтры применяются сразу при смене значения.
@@ -77,23 +77,11 @@
   }
 }
 
-// Опции фильтра/смены статуса: «любой» + все статусы
+// Опции фильтра: «любой» + все статусы
 const statusOptionsWithAny = computed(() => [
   { value: '', label: t('common.anyStatus') },
   ...statusOptions(),
 ])
-
-// Меню «⋯» в карточке: смена статуса (отмечен текущий), удаление
-function taskMenu(task: Task) {
-  return [
-    ...statusOptions().map((o) => ({
-      label: o.label,
-      icon: o.value === task.status ? 'ph-check' : undefined,
-      onSelect: () => setStatus(task, o.value),
-    })),
-    { label: t('stack.deleteTask'), icon: 'ph-trash', danger: true, onSelect: () => askDelete(task) },
-  ]
-}
 </script>
 
 <template>
@@ -144,19 +132,14 @@
     />
 
     <div class="task-list">
-      <GnCard v-for="task in tasks" :key="task.id" class="task-card">
-        <div class="task-main">
-          <span class="title" :class="{ done: task.status === 'done' }">{{ task.title }}</span>
-          <GnDropdown class="task-menu" :items="taskMenu(task)">
-            <template #trigger="{ toggle }">
-              <GnIconButton icon="ph-dots-three-outline" :label="t('common.edit')" @click="toggle" />
-            </template>
-          </GnDropdown>
-        </div>
-        <div class="task-meta">
-          <TaskBadges :task="task" />
-        </div>
-      </GnCard>
+      <TaskCard
+        v-for="task in tasks"
+        :key="task.id"
+        :task="task"
+        show-project
+        @status-change="setStatus"
+        @delete="askDelete"
+      />
     </div>
 
     <GnConfirmDialog
@@ -192,31 +175,4 @@
   flex-direction: column;
   gap: 0.75rem;
 }
-.task-main {
-  display: flex;
-  gap: 0.5rem;
-  align-items: center;
-}
-.task-main .title {
-  flex: 1;
-  min-width: 0;
-  font-weight: 600;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.task-main .title.done {
-  text-decoration: line-through;
-  color: var(--text-muted, #888);
-}
-.task-menu {
-  flex: none;
-}
-.task-meta {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.3rem;
-  align-items: center;
-  margin-top: 0.5rem;
-}
 </style>
\ No newline at end of file
diff --git a/frontend/src/views/ProjectView.vue b/frontend/src/views/ProjectView.vue
new file mode 100644
index 0000000..6caf1cb
--- /dev/null
+++ b/frontend/src/views/ProjectView.vue
@@ -0,0 +1,351 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import { useToast } from 'gnexus-ui-kit/vue'
+import { api, ApiError, type Project, type Tag, type Task } from '../api'
+import { relevanceLabel, renderMarkdown, statusOptions } from '../taskui'
+import QuickPrompt from '../components/QuickPrompt.vue'
+import TaskCard from '../components/TaskCard.vue'
+import TaskTree from '../components/TaskTree.vue'
+
+defineOptions({ name: 'ProjectView' })
+
+// Страница проекта: заметка, прогресс, список задач с фильтрами и дерево подзадач.
+// Создание задачи здесь = createTask + PATCH project_id (TaskCreate не принимает
+// project_id) — задача попадёт в стек на детализацию.
+
+const route = useRoute()
+const router = useRouter()
+const { t } = useI18n()
+const toast = useToast()
+
+const projectId = computed(() => Number(route.params.id))
+const project = ref<Project | null>(null)
+const tasks = ref<Task[]>([])
+const tags = ref<Tag[]>([])
+const error = ref('')
+const loading = ref(false)
+const notFound = ref(false)
+
+// Фильтры списка: статус, тег
+const filters = ref({ status: '', tag_id: '' })
+
+const filteredTasks = computed(() =>
+  tasks.value.filter(
+    (task) =>
+      (!filters.value.status || task.status === filters.value.status) &&
+      (!filters.value.tag_id || task.tags.some((tag) => String(tag.id) === filters.value.tag_id)),
+  ),
+)
+
+// Прогресс по всем задачам проекта (фильтры не влияют)
+const doneCount = computed(() => tasks.value.filter((task) => task.status === 'done').length)
+
+const noteHtml = computed(() => (project.value ? renderMarkdown(project.value.note) : ''))
+
+async function load() {
+  loading.value = true
+  notFound.value = false
+  error.value = ''
+  try {
+    project.value = await api.getProject(projectId.value)
+    tasks.value = await api.listTasks({ project_id: projectId.value })
+    tags.value = await api.listTags()
+  } catch (e) {
+    if (e instanceof ApiError && e.status === 404) {
+      notFound.value = true
+    } else {
+      error.value = String(e)
+    }
+  } finally {
+    loading.value = false
+  }
+}
+
+onMounted(load)
+
+// Правка проекта — drawer, как в списке проектов
+const drawerOpen = ref(false)
+const editForm = ref({
+  name: '',
+  relevance_status: 'active',
+  priority: null as number | null,
+  note: '',
+})
+const showPreview = ref(false)
+
+const relevanceOptions = computed(() =>
+  ['active', 'paused', 'archived'].map((value) => ({ value, label: relevanceLabel(value) })),
+)
+
+const notePreview = computed(() => renderMarkdown(editForm.value.note))
+
+function startEdit() {
+  if (!project.value) return
+  editForm.value = {
+    name: project.value.name,
+    relevance_status: project.value.relevance_status,
+    priority: project.value.priority,
+    note: project.value.note,
+  }
+  showPreview.value = false
+  drawerOpen.value = true
+}
+
+function closeDrawer() {
+  drawerOpen.value = false
+}
+
+async function saveEdit() {
+  if (!project.value) return
+  try {
+    await api.updateProject(project.value.id, { ...editForm.value })
+    toast.success({ title: t('common.saved') })
+    closeDrawer()
+    await load()
+  } catch (e) {
+    toast.error({ title: t('common.error'), text: String(e) })
+  }
+}
+
+async function setStatus(_task: Task, status: string) {
+  error.value = ''
+  try {
+    await api.updateTask(_task.id, { status })
+    await load()
+  } catch (e) {
+    error.value = String(e)
+  }
+}
+
+// Удаление задачи — через подтверждение
+const deleteTarget = ref<Task | null>(null)
+const confirmOpen = ref(false)
+
+function askDelete(task: Task) {
+  deleteTarget.value = task
+  confirmOpen.value = true
+}
+
+async function remove() {
+  const task = deleteTarget.value
+  if (!task) return
+  confirmOpen.value = false
+  try {
+    await api.deleteTask(task.id)
+    toast.success({ title: t('common.taskDeleted') })
+    await load()
+  } catch (e) {
+    toast.error({ title: t('common.error'), text: String(e) })
+  }
+}
+
+// Новая задача проекта: два запроса (create + PATCH); попадёт в стек на детализацию
+const newTaskOpen = ref(false)
+
+async function createTaskForProject(title: string) {
+  newTaskOpen.value = false
+  try {
+    const created = await api.createTask(title)
+    await api.updateTask(created.id, { project_id: projectId.value })
+    toast.info({ title: t('projectPage.taskCreated') })
+    await load()
+  } catch (e) {
+    toast.error({ title: t('common.error'), text: String(e) })
+  }
+}
+
+const statusOptionsWithAny = computed(() => [
+  { value: '', label: t('common.anyStatus') },
+  ...statusOptions(),
+])
+</script>
+
+<template>
+  <section>
+    <GnSkeleton v-if="loading && !project" type="block" stack :count="2" class="page-skeleton" />
+
+    <GnEmptyState
+      v-if="!loading && notFound"
+      icon="ph-folder-simple"
+      :title="t('projectPage.notFoundTitle')"
+      :text="t('projectPage.notFoundText')"
+    >
+      <template #actions>
+        <GnButton variant="primary" icon="ph-folders" @click="router.push('/projects')">
+          {{ t('nav.projects') }}
+        </GnButton>
+      </template>
+    </GnEmptyState>
+
+    <template v-if="project">
+      <GnPageHeader kicker="gntodo" :title="project.name">
+        <template #meta>
+          <GnBadge variant="info">{{ relevanceLabel(project.relevance_status) }}</GnBadge>
+          <GnBadge v-if="project.priority !== null" variant="warning">P{{ project.priority }}</GnBadge>
+        </template>
+        <template #actions>
+          <GnButton variant="secondary" icon="ph-pencil-simple" @click="startEdit">
+            {{ t('projects.edit') }}
+          </GnButton>
+          <GnButton variant="primary" icon="ph-plus" @click="newTaskOpen = true">
+            {{ t('projectPage.newTask') }}
+          </GnButton>
+        </template>
+      </GnPageHeader>
+
+      <GnAlert v-if="error" variant="error">{{ error }}</GnAlert>
+
+      <!-- Заметка (Markdown: ссылки, контекст) -->
+      <GnCard v-if="project.note.trim()" class="note-card">
+        <template #title>{{ t('projectPage.note') }}</template>
+        <div class="md-view" v-html="noteHtml" />
+      </GnCard>
+
+      <!-- Прогресс: выполнено задач проекта -->
+      <GnProgress
+        class="progress"
+        :value="doneCount"
+        :max="Math.max(tasks.length, 1)"
+        :label="t('projectPage.progress', { done: doneCount, total: tasks.length })"
+      />
+
+      <!-- Список задач проекта -->
+      <GnToolbar class="filters">
+        <GnSelect
+          v-model="filters.status"
+          class="filter-select"
+          :options="statusOptionsWithAny"
+        />
+        <GnSelect
+          v-model="filters.tag_id"
+          class="filter-select"
+          icon="ph-tag"
+          :options="[
+            { value: '', label: t('common.any') },
+            ...tags.map((tg) => ({ value: String(tg.id), label: tg.name })),
+          ]"
+        />
+      </GnToolbar>
+
+      <GnEmptyState
+        v-if="filteredTasks.length === 0"
+        icon="ph-list-magnifying-glass"
+        :title="t('projectPage.emptyTitle')"
+        :text="t('projectPage.emptyText')"
+      />
+
+      <div class="task-list">
+        <TaskCard
+          v-for="task in filteredTasks"
+          :key="task.id"
+          :task="task"
+          @status-change="setStatus"
+          @delete="askDelete"
+        />
+      </div>
+
+      <!-- Дерево подзадач проекта (наглядное, с прогрессом) -->
+      <div class="tree-section">
+        <h3 class="tree-title">{{ t('projectPage.tree') }}</h3>
+        <TaskTree
+          :tasks="tasks"
+          @status-change="setStatus"
+          @add-subtask="newTaskOpen = true"
+          @delete="askDelete"
+        />
+      </div>
+    </template>
+
+    <QuickPrompt v-model:open="newTaskOpen" :title="t('projectPage.promptTask')" @confirm="createTaskForProject" />
+
+    <GnDrawer v-model:open="drawerOpen" :title="project?.name || t('projects.edit')" position="right" @close="closeDrawer">
+      <form class="edit-form" @submit.prevent="saveEdit">
+        <GnInput v-model="editForm.name" :label="t('projects.form.name')" required />
+        <GnSelect
+          v-model="editForm.relevance_status"
+          :label="t('projects.form.relevance')"
+          icon="ph-activity"
+          :options="relevanceOptions"
+        />
+        <GnInput v-model.number="editForm.priority" :label="t('projects.form.priority')" type="number" />
+        <GnTextarea v-model="editForm.note" :label="t('projects.form.note')" :rows="6" />
+        <GnCheckbox v-model="showPreview" :label="t('projects.form.preview')" />
+        <div v-if="showPreview" class="md-preview" v-html="notePreview" />
+        <div class="form-actions">
+          <GnButton type="submit" variant="accent" icon="ph-check">
+            {{ t('common.save') }}
+          </GnButton>
+          <GnButton type="button" variant="secondary" @click="closeDrawer">
+            {{ t('common.cancel') }}
+          </GnButton>
+        </div>
+      </form>
+    </GnDrawer>
+
+    <GnConfirmDialog
+      v-model:open="confirmOpen"
+      :title="t('common.confirmTitle')"
+      :message="t('common.deleteConfirmTask', { title: deleteTarget?.title ?? '' })"
+      :confirm-text="t('common.delete')"
+      :cancel-text="t('common.cancel')"
+      confirm-variant="danger"
+      @confirm="remove"
+    />
+  </section>
+</template>
+
+<style scoped>
+.page-skeleton {
+  margin-bottom: 1rem;
+}
+.note-card {
+  margin-bottom: 1.5rem;
+}
+.md-view {
+  overflow-x: auto;
+}
+.progress {
+  margin-bottom: 1.5rem;
+}
+.filters {
+  margin-bottom: 1rem;
+}
+.filters :deep(.form-group) {
+  width: auto;
+  margin-bottom: 0;
+}
+.filters :deep(.select-wrap) {
+  width: 14rem;
+  margin-top: 0;
+}
+.task-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+.tree-section {
+  margin-top: 2rem;
+}
+.tree-title {
+  margin: 0 0 0.75rem;
+  font-size: 1.1rem;
+}
+.edit-form {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+.form-actions {
+  display: flex;
+  gap: 0.75rem;
+  align-items: center;
+}
+.md-preview {
+  border: 1px solid var(--border, #333);
+  border-radius: 6px;
+  padding: 0.75rem;
+  overflow-x: auto;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/views/StackView.vue b/frontend/src/views/StackView.vue
index 551779b..a76e4eb 100644
--- a/frontend/src/views/StackView.vue
+++ b/frontend/src/views/StackView.vue
@@ -1,58 +1,26 @@
 <script setup lang="ts">
-import DOMPurify from 'dompurify'
-import { marked } from 'marked'
-import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { onMounted, onUnmounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { api, type Attachment, type Project, type Task } from '../api'
+import { api, type Task } from '../api'
 import { intlLocale } from '../i18n/locale'
-import { deadlinePeriodOptions, formatMinutes, recurKindOptions, weekdayShort } from '../taskui'
+import { proposalItems } from '../taskui'
 import { useToast } from 'gnexus-ui-kit/vue'
-import QuickPrompt from '../components/QuickPrompt.vue'
+import TaskForm from '../components/TaskForm.vue'
 
 // Стек входящих: сырые задачи, ожидающие детализации и утверждения.
-// LLM-предложение — черновик: «Да, всё верно» применяет его, иначе правим вручную.
+// LLM-предложение — черновик: «Да, всё верно» применяет его, иначе правим вручную
+// (детализация — TaskForm в drawer'е, сохранение там же утверждает).
 
 const { t } = useI18n()
 const toast = useToast()
 
 const stack = ref<Task[]>([])
-const projects = ref<Project[]>([])
-const tags = ref<{ id: number; name: string }[]>([])
 const quickTitle = ref('')
 const error = ref('')
 const loading = ref(false)
 
 const editing = ref<Task | null>(null)
 const drawerOpen = ref(false)
-const editForm = ref({
-  title: '',
-  description: '',
-  project_id: '' as string | number,
-  tagSelection: {} as Record<number, boolean>,
-  priority: null as number | null,
-  estimated_minutes: null as number | null,
-  budget_money: null as number | null,
-  cost_estimate_money: null as number | null,
-  deadline_date: '' as string,
-  deadline_period: '' as string,
-  task_type: 'one_time',
-  recur_kind: '' as string,
-  recur_interval_days: 1 as number | null,
-  recurWeekday: {} as Record<string, boolean>,
-  recur_day_of_month: 1 as number | null,
-})
-
-// Дни недели для правила повторения (ISO: пн=1..вс=7) — имена через Intl
-const WEEKDAYS = computed(() =>
-  [1, 2, 3, 4, 5, 6, 7].map((n) => ({ value: String(n), label: weekdayShort(n) })),
-)
-const showPreview = ref(false)
-const attachments = ref<Attachment[]>([])
-const uploading = ref(false)
-
-const markdownPreview = computed(() =>
-  DOMPurify.sanitize(marked.parse(editForm.value.description, { async: false })),
-)
 
 let pollTimer: number | undefined
 
@@ -67,15 +35,6 @@
   }
 }
 
-async function loadCatalog() {
-  try {
-    projects.value = await api.listProjects()
-    tags.value = await api.listTags()
-  } catch (e) {
-    error.value = String(e)
-  }
-}
-
 // Опрос: LLM детализирует задачу в фоне — предложение появится через секунды
 function startPolling() {
   pollTimer = window.setInterval(async () => {
@@ -85,7 +44,6 @@
 
 onMounted(async () => {
   await loadStack()
-  await loadCatalog()
   startPolling()
 })
 onUnmounted(() => window.clearInterval(pollTimer))
@@ -103,97 +61,20 @@
   }
 }
 
-function selectedTagIds(): number[] {
-  return Object.entries(editForm.value.tagSelection)
-    .filter(([, on]) => on)
-    .map(([id]) => Number(id))
-}
-
-// Редактирование — в боковой панели (GnDrawer), карточка остаётся компактной
+// Редактирование — в боковой панели (GnDrawer), форма сама сохраняет и утверждает
 function startEdit(task: Task) {
   editing.value = task
-  const selection: Record<number, boolean> = {}
-  task.tags.forEach((t) => (selection[t.id] = true))
-  editForm.value = {
-    title: task.title,
-    description: task.description,
-    project_id: task.project?.id ?? '',
-    tagSelection: selection,
-    priority: task.priority,
-    estimated_minutes: task.estimated_minutes,
-    budget_money: task.budget_money,
-    cost_estimate_money: task.cost_estimate_money,
-    deadline_date: task.deadline_date ?? '',
-    deadline_period: task.deadline_period ?? '',
-    task_type: task.task_type ?? 'one_time',
-    recur_kind: task.recur_kind ?? '',
-    recur_interval_days: task.recur_interval_days ?? 1,
-    recurWeekday: task.recur_weekdays
-      ? Object.fromEntries(task.recur_weekdays.split(',').map((d) => [d, true]))
-      : {},
-    recur_day_of_month: task.recur_day_of_month ?? 1,
-  }
-  showPreview.value = false
-  attachments.value = []
-  void loadAttachments(task.id)
   drawerOpen.value = true
 }
 
 function closeDrawer() {
   drawerOpen.value = false
   editing.value = null
-  attachments.value = []
 }
 
-async function loadAttachments(taskId: number) {
-  try {
-    attachments.value = await api.listAttachments(taskId)
-  } catch (e) {
-    toast.error({ title: t('common.error'), text: String(e) })
-  }
-}
-
-async function saveEdit() {
-  if (!editing.value) return
-  try {
-    await api.updateTask(editing.value.id, {
-      title: editForm.value.title,
-      description: editForm.value.description,
-      project_id: editForm.value.project_id === '' ? null : Number(editForm.value.project_id),
-      tag_ids: selectedTagIds(),
-      priority: editForm.value.priority,
-      estimated_minutes: editForm.value.estimated_minutes,
-      budget_money: editForm.value.budget_money,
-      cost_estimate_money: editForm.value.cost_estimate_money,
-      deadline_date: editForm.value.deadline_date === '' ? null : editForm.value.deadline_date,
-      deadline_period: editForm.value.deadline_period === '' ? null : editForm.value.deadline_period,
-      task_type: editForm.value.task_type,
-      recur_kind: editForm.value.task_type === 'recurring' && editForm.value.recur_kind
-        ? editForm.value.recur_kind
-        : null,
-      recur_interval_days:
-        editForm.value.task_type === 'recurring' && editForm.value.recur_kind === 'interval'
-          ? editForm.value.recur_interval_days
-          : null,
-      recur_weekdays:
-        editForm.value.task_type === 'recurring' && editForm.value.recur_kind === 'weekdays'
-          ? Object.keys(editForm.value.recurWeekday)
-              .filter((d) => editForm.value.recurWeekday[d])
-              .sort()
-              .join(',') || null
-          : null,
-      recur_day_of_month:
-        editForm.value.task_type === 'recurring' && editForm.value.recur_kind === 'monthly'
-          ? editForm.value.recur_day_of_month
-          : null,
-    })
-    await api.approveTask(editing.value.id)
-    toast.success({ title: t('common.taskApproved') })
-    closeDrawer()
-    await loadStack()
-  } catch (e) {
-    toast.error({ title: t('common.error'), text: String(e) })
-  }
+async function onSaved() {
+  closeDrawer()
+  await loadStack()
 }
 
 async function approve(task: Task) {
@@ -246,77 +127,9 @@
   ]
 }
 
-// Вставка изображений из буфера обмена прямо в редактор описания
-async function onPaste(event: ClipboardEvent) {
-  const files = Array.from(event.clipboardData?.files ?? []).filter((f) =>
-    f.type.startsWith('image/'),
-  )
-  if (!files.length || !editing.value) return
-  event.preventDefault()
-  uploading.value = true
-  try {
-    const saved = await api.uploadAttachments(editing.value.id, files)
-    attachments.value.push(...saved)
-  } catch (e) {
-    toast.error({ title: t('common.error'), text: String(e) })
-  } finally {
-    uploading.value = false
-  }
-}
-
-async function removeAttachment(att: Attachment) {
-  try {
-    await api.deleteAttachment(att.id)
-    attachments.value = attachments.value.filter((a) => a.id !== att.id)
-  } catch (e) {
-    toast.error({ title: t('common.error'), text: String(e) })
-  }
-}
-
-// Создание проекта/тега на лету — модальное окно вместо window.prompt
-const promptOpen = ref(false)
-const promptTitle = ref('')
-let promptKind: 'project' | 'tag' = 'project'
-
-function openPrompt(kind: 'project' | 'tag') {
-  promptKind = kind
-  promptTitle.value = kind === 'project' ? t('stack.promptProject') : t('stack.promptTag')
-  promptOpen.value = true
-}
-
-async function onPromptConfirm(name: string) {
-  try {
-    if (promptKind === 'project') {
-      const p = await api.createProject(name)
-      projects.value.push(p)
-      editForm.value.project_id = p.id
-    } else {
-      const tag = await api.createTag(name)
-      tags.value.push(tag)
-      editForm.value.tagSelection[tag.id] = true
-    }
-  } catch (e) {
-    toast.error({ title: t('common.error'), text: String(e) })
-  }
-}
-
-const projectOptions = () => [
-  { value: '', label: t('common.noProject') },
-  ...projects.value.map((p) => ({ value: String(p.id), label: p.name })),
-]
-
-// Подписи чернового предложения LLM
-function proposalItems(task: Task): string[] {
-  const p = task.ai_proposal
-  if (!p) return []
-  const items: string[] = []
-  p.tags.forEach((tag) => items.push(tag))
-  if (p.project)
-    items.push(p.new_project ? t('stack.proposalNewProject', { name: p.project }) : p.project)
-  if (p.priority !== null) items.push(t('stack.proposalPriority', { n: p.priority }))
-  if (p.estimated_minutes !== null && p.estimated_minutes !== undefined)
-    items.push(`≈ ${formatMinutes(p.estimated_minutes)}`)
-  return items
+// Сниппет карточки: описание (предложение ИИ и так показано бейджами ниже)
+function snippet(task: Task): string {
+  return task.description.trim()
 }
 </script>
 
@@ -326,13 +139,13 @@
       <template #meta>{{ t('stack.count', { n: stack.length }) }}</template>
     </GnPageHeader>
 
-    <!-- Быстрый ввод: одна строка, без метаданных -->
+    <!-- Быстрый ввод: многострочное поле (Enter — закинуть, Shift+Enter — перенос) -->
     <form class="quick-add" @submit.prevent="quickAdd">
-      <GnInput
+      <GnTextarea
         v-model="quickTitle"
-        icon="ph-plus"
+        :rows="1"
         :placeholder="t('stack.quickPlaceholder')"
-        autofocus
+        @keydown.enter.exact.prevent="quickAdd"
       />
       <GnButton type="submit" variant="primary" icon="ph-arrow-circle-down">
         {{ t('stack.quickAdd') }}
@@ -352,7 +165,11 @@
 
     <div class="task-list">
       <GnCard v-for="task in stack" :key="task.id" class="task-card">
-        <template #title>{{ task.title }}</template>
+        <template #title>
+          <RouterLink class="card-title" :to="`/tasks/${task.id}`">{{ task.title }}</RouterLink>
+        </template>
+
+        <p v-if="snippet(task)" class="snippet">{{ snippet(task) }}</p>
 
         <div class="task-meta">
           <GnBadge variant="info">{{ t('stack.inStack') }}</GnBadge>
@@ -394,150 +211,17 @@
 
     <!-- Редактирование метаданных и утверждение — боковая панель -->
     <GnDrawer v-model:open="drawerOpen" :title="t('stack.detailTitle')" position="right" @close="closeDrawer">
-      <form v-if="editing" class="edit-form" @submit.prevent="saveEdit">
-        <GnInput v-model="editForm.title" :label="t('stack.form.title')" required />
-        <GnTextarea
-          v-model="editForm.description"
-          :label="t('stack.form.description')"
-          :rows="4"
-          @paste="onPaste"
-        />
-        <GnCheckbox v-model="showPreview" :label="t('stack.form.preview')" />
-        <div v-if="showPreview" class="md-preview" v-html="markdownPreview" />
-
-        <GnSelect
-          v-model="editForm.project_id"
-          :label="t('stack.form.project')"
-          icon="ph-folder"
-          :options="projectOptions()"
-        />
-        <div class="form-row-actions">
-          <GnButton
-            type="button"
-            variant="secondary"
-            size="sm"
-            icon="ph-plus"
-            @click="openPrompt('project')"
-          >
-            {{ t('stack.newProject') }}
-          </GnButton>
-        </div>
-        <fieldset class="tags-fieldset">
-          <legend>{{ t('stack.form.tags') }}</legend>
-          <GnCheckbox
-            v-for="tag in tags"
-            :key="tag.id"
-            v-model="editForm.tagSelection[tag.id]"
-            :label="tag.name"
-          />
-          <GnButton type="button" variant="secondary" size="sm" icon="ph-plus" @click="openPrompt('tag')">
-            {{ t('stack.newTag') }}
-          </GnButton>
-        </fieldset>
-        <GnInput v-model.number="editForm.priority" :label="t('stack.form.priority')" type="number" />
-        <GnInput
-          v-model.number="editForm.estimated_minutes"
-          :label="t('stack.form.estimate')"
-          type="number"
-          min="1"
-        />
-        <div class="budget-row">
-          <GnInput
-            v-model.number="editForm.budget_money"
-            :label="t('stack.form.budget')"
-            type="number"
-            min="0"
-          />
-          <GnInput
-            v-model.number="editForm.cost_estimate_money"
-            :label="t('stack.form.cost')"
-            type="number"
-            min="0"
-          />
-        </div>
-        <fieldset class="tags-fieldset">
-          <legend>{{ t('stack.deadline.legend') }}</legend>
-          <GnInput v-model="editForm.deadline_date" :label="t('stack.deadline.date')" type="date" />
-          <GnSelect
-            v-model="editForm.deadline_period"
-            :label="t('stack.deadline.period')"
-            :options="[{ value: '', label: t('common.none') }, ...deadlinePeriodOptions()]"
-          />
-        </fieldset>
-        <fieldset class="tags-fieldset">
-          <legend>{{ t('stack.recur.legend') }}</legend>
-          <GnSelect
-            v-model="editForm.task_type"
-            :options="[
-              { value: 'one_time', label: t('stack.recur.oneTime') },
-              { value: 'recurring', label: t('stack.recur.recurring') },
-            ]"
-          />
-          <template v-if="editForm.task_type === 'recurring'">
-            <GnSelect
-              v-model="editForm.recur_kind"
-              :label="t('stack.recur.kind')"
-              :options="[{ value: '', label: t('common.choose') }, ...recurKindOptions()]"
-            />
-            <GnInput
-              v-if="editForm.recur_kind === 'interval'"
-              v-model.number="editForm.recur_interval_days"
-              :label="t('stack.recur.interval')"
-              type="number"
-              min="1"
-              max="365"
-            />
-            <template v-if="editForm.recur_kind === 'weekdays'">
-              <fieldset class="tags-fieldset weekdays-fieldset">
-                <legend>{{ t('stack.recur.weekdays') }}</legend>
-                <GnCheckbox
-                  v-for="d in WEEKDAYS"
-                  :key="d.value"
-                  v-model="editForm.recurWeekday[d.value]"
-                  :label="d.label"
-                />
-              </fieldset>
-            </template>
-            <GnInput
-              v-if="editForm.recur_kind === 'monthly'"
-              v-model.number="editForm.recur_day_of_month"
-              :label="t('stack.recur.monthlyDay')"
-              type="number"
-              min="1"
-              max="31"
-            />
-          </template>
-        </fieldset>
-
-        <!-- Вложения: вставленные Ctrl+V изображения -->
-        <div v-if="attachments.length || uploading" class="attachments">
-          <GnBadge v-if="uploading" variant="info">{{ t('stack.uploading') }}</GnBadge>
-          <div class="thumbs">
-            <div v-for="att in attachments" :key="att.id" class="thumb">
-              <img :src="api.attachmentUrl(att.id)" :alt="att.original_name" />
-              <GnIconButton
-                icon="ph-x"
-                :label="t('stack.deleteAttachment')"
-                size="sm"
-                @click="removeAttachment(att)"
-              />
-            </div>
-          </div>
-        </div>
-
-        <div class="form-actions">
-          <GnButton type="submit" variant="accent" icon="ph-check-circle">
-            {{ t('stack.approve') }}
-          </GnButton>
-          <GnButton type="button" variant="secondary" @click="closeDrawer">
-            {{ t('common.cancel') }}
-          </GnButton>
-        </div>
-      </form>
+      <TaskForm
+        v-if="editing"
+        :key="editing.id"
+        :task="editing"
+        :approve-after-save="true"
+        :submit-label="t('stack.approve')"
+        @saved="onSaved"
+        @cancel="closeDrawer"
+      />
     </GnDrawer>
 
-    <QuickPrompt v-model:open="promptOpen" :title="promptTitle" @confirm="onPromptConfirm" />
-
     <GnConfirmDialog
       v-model:open="confirmOpen"
       :title="t('common.confirmTitle')"
@@ -567,6 +251,7 @@
 .quick-add :deep(.input) {
   height: 3.75rem;
   font-size: 1.1rem;
+  line-height: 3.4rem;
 }
 .stack-skeleton {
   margin-bottom: 1rem;
@@ -576,6 +261,22 @@
   flex-direction: column;
   gap: 0.75rem;
 }
+.card-title {
+  color: inherit;
+  text-decoration: none;
+}
+.card-title:hover {
+  color: var(--accent, #7aa2f7);
+}
+.snippet {
+  margin: 0 0 0.75rem;
+  color: var(--text-muted, #a9b1d6);
+  font-size: 0.9em;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
 .task-meta {
   display: flex;
   gap: 0.75rem;
@@ -602,69 +303,4 @@
 .task-menu {
   margin-left: auto;
 }
-.edit-form {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-.form-row-actions {
-  margin-top: -0.5rem;
-}
-.tags-fieldset {
-  border: 1px solid var(--border, #333);
-  border-radius: 6px;
-  padding: 0.75rem;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.75rem;
-  align-items: center;
-}
-.tags-fieldset legend {
-  padding: 0 0.5rem;
-  font-size: 0.85em;
-  color: var(--text-muted, #888);
-}
-.md-preview {
-  border: 1px solid var(--border, #333);
-  border-radius: 6px;
-  padding: 0.75rem;
-  overflow-x: auto;
-}
-.attachments {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-.thumbs {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.75rem;
-}
-.thumb {
-  position: relative;
-}
-.thumb img {
-  max-width: 120px;
-  max-height: 90px;
-  border-radius: 6px;
-  border: 1px solid var(--border, #333);
-  display: block;
-}
-.thumb .gn-icon-button {
-  position: absolute;
-  top: 4px;
-  right: 4px;
-}
-.form-actions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.75rem;
-}
-.budget-row {
-  display: flex;
-  gap: 0.75rem;
-}
-.budget-row > * {
-  flex: 1;
-}
 </style>
\ No newline at end of file
diff --git a/frontend/src/views/TaskView.vue b/frontend/src/views/TaskView.vue
new file mode 100644
index 0000000..78f1bf1
--- /dev/null
+++ b/frontend/src/views/TaskView.vue
@@ -0,0 +1,368 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import { api, ApiError, type Attachment, type Task } from '../api'
+import {
+  deadlineLabel,
+  formatMinutes,
+  formatMoney,
+  proposalItems,
+  recurrenceLabel,
+  renderMarkdown,
+  statusOptions,
+  statusLabel,
+} from '../taskui'
+import { useToast } from 'gnexus-ui-kit/vue'
+import QuickPrompt from '../components/QuickPrompt.vue'
+import TaskBadges from '../components/TaskBadges.vue'
+import TaskForm from '../components/TaskForm.vue'
+import TaskTree from '../components/TaskTree.vue'
+
+defineOptions({ name: 'TaskView' })
+
+// Страница задачи: просмотр всей детализации (описание md, вложения, параметры,
+// предложение ИИ) и редактирование через TaskForm. Подзадачи — TaskTree.
+
+const route = useRoute()
+const router = useRouter()
+const { t } = useI18n()
+const toast = useToast()
+
+const taskId = computed(() => Number(route.params.id))
+const task = ref<Task | null>(null)
+// утверждённые задачи — для поддерева этой задачи
+const tasks = ref<Task[]>([])
+const attachments = ref<Attachment[]>([])
+const error = ref('')
+const loading = ref(false)
+const editing = ref(false)
+const notFound = ref(false)
+
+const descriptionHtml = computed(() =>
+  task.value ? renderMarkdown(task.value.description) : '',
+)
+
+async function load() {
+  loading.value = true
+  notFound.value = false
+  error.value = ''
+  try {
+    task.value = await api.getTask(taskId.value)
+    attachments.value = await api.listAttachments(taskId.value)
+    tasks.value = await api.listTasks({ detail_state: 'approved' })
+  } catch (e) {
+    if (e instanceof ApiError && e.status === 404) {
+      notFound.value = true
+    } else {
+      error.value = String(e)
+    }
+  } finally {
+    loading.value = false
+  }
+}
+
+onMounted(load)
+
+// Параметры — список «термин: значение» (GnDefinitionList)
+const fields = computed(() => {
+  const task0 = task.value
+  if (!task0) return []
+  const rows: { key: string; term: string; value: string }[] = []
+  if (task0.project)
+    rows.push({ key: 'project', term: t('task.field.project'), value: task0.project.name })
+  if (task0.priority !== null)
+    rows.push({ key: 'priority', term: t('task.field.priority'), value: `P${task0.priority}` })
+  if (task0.estimated_minutes)
+    rows.push({
+      key: 'estimate',
+      term: t('task.field.estimate'),
+      value: formatMinutes(task0.estimated_minutes),
+    })
+  if (task0.budget_money !== null || task0.cost_estimate_money !== null)
+    rows.push({
+      key: 'money',
+      term: t('task.field.money'),
+      value: [
+        task0.budget_money !== null
+          ? t('taskui.money.budget', { amount: formatMoney(task0.budget_money) })
+          : '',
+        task0.cost_estimate_money !== null
+          ? t('taskui.money.estimate', { amount: formatMoney(task0.cost_estimate_money) })
+          : '',
+      ]
+        .filter(Boolean)
+        .join(' · '),
+    })
+  const deadline = deadlineLabel(task0)
+  if (deadline) rows.push({ key: 'deadline', term: t('task.field.deadline'), value: deadline })
+  const recur = recurrenceLabel(task0)
+  if (recur) rows.push({ key: 'recurrence', term: t('task.field.recurrence'), value: recur })
+  return rows
+})
+
+// Смена статуса — дропдаун статусов (отмечен текущий); эмит TaskTree несёт задачу
+function statusMenu(task0: Task) {
+  return statusOptions().map((o) => ({
+    label: o.label,
+    icon: o.value === task0.status ? 'ph-check' : undefined,
+    onSelect: () => setStatus(task0, o.value),
+  }))
+}
+
+async function setStatus(_task: Task, status: string) {
+  error.value = ''
+  try {
+    await api.updateTask(_task.id, { status })
+    await load()
+  } catch (e) {
+    error.value = String(e)
+  }
+}
+
+async function approveProposal() {
+  try {
+    await api.approveTask(taskId.value, true)
+    toast.success({ title: t('common.taskApproved') })
+    await load()
+  } catch (e) {
+    toast.error({ title: t('common.error'), text: String(e) })
+  }
+}
+
+async function redetail() {
+  try {
+    await api.redetailTask(taskId.value)
+    await load()
+  } catch (e) {
+    toast.error({ title: t('common.error'), text: String(e) })
+  }
+}
+
+function onSaved(fresh: Task) {
+  editing.value = false
+  task.value = fresh
+}
+
+// Подзадачи: дерево строится из утверждённых задач (подзадача попадает сюда
+// после утверждения в стеке)
+const subtaskOpen = ref(false)
+
+async function createSubtask(title: string) {
+  subtaskOpen.value = false
+  try {
+    await api.createTask(title, '', taskId.value)
+    await load()
+  } catch (e) {
+    toast.error({ title: t('common.error'), text: String(e) })
+  }
+}
+
+// Удаление (страницы и подзадач в дереве) — через подтверждение
+const deleteTarget = ref<Task | null>(null)
+const confirmOpen = ref(false)
+
+function askDelete(target: Task) {
+  deleteTarget.value = target
+  confirmOpen.value = true
+}
+
+async function remove() {
+  const target = deleteTarget.value
+  if (!target) return
+  confirmOpen.value = false
+  try {
+    await api.deleteTask(target.id)
+    toast.success({ title: t('common.taskDeleted') })
+    if (target.id === taskId.value) await router.replace('/list')
+    else await load()
+  } catch (e) {
+    toast.error({ title: t('common.error'), text: String(e) })
+  }
+}
+</script>
+
+<template>
+  <section>
+    <GnSkeleton v-if="loading && !task" type="block" stack :count="2" class="task-skeleton" />
+
+    <GnEmptyState
+      v-if="!loading && notFound"
+      icon="ph-question"
+      :title="t('task.notFoundTitle')"
+      :text="t('task.notFoundText')"
+    >
+      <template #actions>
+        <GnButton variant="primary" icon="ph-list-bullets" @click="router.push('/list')">
+          {{ t('nav.list') }}
+        </GnButton>
+      </template>
+    </GnEmptyState>
+
+    <template v-if="task">
+      <GnPageHeader kicker="gntodo" :title="task.title">
+        <template #meta>
+          <TaskBadges :task="task" />
+        </template>
+      </GnPageHeader>
+
+      <GnAlert v-if="error" variant="error">{{ error }}</GnAlert>
+
+      <!-- Режим правки: полная форма вместо содержимого -->
+      <TaskForm
+        v-if="editing"
+        :key="task.id"
+        :task="task"
+        :submit-label="t('common.save')"
+        @saved="onSaved"
+        @cancel="editing = false"
+      />
+
+      <template v-else>
+        <!-- Действия: статус, правка, ИИ, удаление -->
+        <GnToolbar class="task-actions">
+          <GnDropdown :label="statusLabel(task.status)" icon="ph-circle-half" :items="statusMenu(task)" />
+          <GnButton variant="secondary" icon="ph-pencil-simple" @click="editing = true">
+            {{ t('common.edit') }}
+          </GnButton>
+          <GnButton variant="secondary" icon="ph-arrows-counter-clockwise" @click="redetail">
+            {{ t('stack.redetail') }}
+          </GnButton>
+          <GnButton variant="danger" icon="ph-trash" @click="askDelete(task)">
+            {{ t('common.delete') }}
+          </GnButton>
+        </GnToolbar>
+
+        <!-- Черновое предложение ИИ (сырая задача): принять или переспросить -->
+        <GnCard v-if="task.detail_state === 'raw'" class="proposal-card">
+          <template #title>{{ t('task.proposalTitle') }}</template>
+          <div v-if="task.ai_proposal" class="proposal">
+            <GnBadge v-for="(item, i) in proposalItems(task)" :key="i" variant="neutral">
+              {{ item }}
+            </GnBadge>
+          </div>
+          <p v-else class="muted">{{ t('stack.proposalPending') }}</p>
+          <div class="proposal-actions">
+            <GnButton
+              variant="accent"
+              icon="ph-check"
+              :disabled="!task.ai_proposal"
+              @click="approveProposal"
+            >
+              {{ t('stack.approveProposal') }}
+            </GnButton>
+          </div>
+        </GnCard>
+
+        <!-- Описание (Markdown) + вложения -->
+        <GnCard class="desc-card">
+          <template #title>{{ t('task.description') }}</template>
+          <div v-if="task.description.trim()" class="md-view" v-html="descriptionHtml" />
+          <p v-else class="muted">{{ t('task.descriptionEmpty') }}</p>
+          <div v-if="attachments.length" class="thumbs">
+            <a
+              v-for="att in attachments"
+              :key="att.id"
+              :href="api.attachmentUrl(att.id)"
+              target="_blank"
+              rel="noopener"
+            >
+              <img :src="api.attachmentUrl(att.id)" :alt="att.original_name" />
+            </a>
+          </div>
+        </GnCard>
+
+        <!-- Параметры -->
+        <GnCard v-if="fields.length" class="fields-card">
+          <template #title>{{ t('task.fields') }}</template>
+          <GnDefinitionList :items="fields" />
+        </GnCard>
+
+        <!-- Подзадачи -->
+        <div class="subtasks">
+          <div class="subtasks-header">
+            <h3 class="subtasks-title">{{ t('task.subtasks') }}</h3>
+            <GnButton variant="secondary" size="sm" icon="ph-plus" @click="subtaskOpen = true">
+              {{ t('tree.addSubtask') }}
+            </GnButton>
+          </div>
+          <p v-if="!tasks.some((c) => c.parent_task_id === (task?.id ?? 0))" class="muted">
+            {{ t('task.noSubtasks') }}
+          </p>
+          <TaskTree
+            :tasks="tasks"
+            :root-id="task.id"
+            @status-change="setStatus"
+            @add-subtask="subtaskOpen = true"
+            @delete="askDelete"
+          />
+        </div>
+      </template>
+    </template>
+
+    <QuickPrompt v-model:open="subtaskOpen" :title="t('tree.promptSubtask')" @confirm="createSubtask" />
+
+    <GnConfirmDialog
+      v-model:open="confirmOpen"
+      :title="t('common.confirmTitle')"
+      :message="t('common.deleteConfirmTask', { title: deleteTarget?.title ?? '' })"
+      :confirm-text="t('common.delete')"
+      :cancel-text="t('common.cancel')"
+      confirm-variant="danger"
+      @confirm="remove"
+    />
+  </section>
+</template>
+
+<style scoped>
+.task-skeleton {
+  margin-bottom: 1rem;
+}
+.task-actions {
+  margin-bottom: 1.5rem;
+}
+.proposal-card,
+.desc-card,
+.fields-card {
+  margin-bottom: 1.5rem;
+}
+.proposal {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.4rem;
+  align-items: center;
+}
+.proposal-actions {
+  margin-top: 0.75rem;
+}
+.muted {
+  color: var(--text-muted, #888);
+  font-size: 0.9em;
+}
+.md-view {
+  overflow-x: auto;
+}
+.thumbs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  margin-top: 1rem;
+}
+.thumbs img {
+  max-width: 160px;
+  max-height: 120px;
+  border-radius: 6px;
+  border: 1px solid var(--border, #333);
+  display: block;
+}
+.subtasks-header {
+  display: flex;
+  gap: 0.75rem;
+  align-items: center;
+  margin-bottom: 0.75rem;
+}
+.subtasks-title {
+  margin: 0;
+  font-size: 1.1rem;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/views/TreeView.vue b/frontend/src/views/TreeView.vue
index 68644f5..c9ca190 100644
--- a/frontend/src/views/TreeView.vue
+++ b/frontend/src/views/TreeView.vue
@@ -1,29 +1,22 @@
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { api, type Project, type Task } from '../api'
-import { statusOptions } from '../taskui'
 import QuickPrompt from '../components/QuickPrompt.vue'
-import TaskBadges from '../components/TaskBadges.vue'
+import TaskTree from '../components/TaskTree.vue'
 
 defineOptions({ name: 'TreeView' })
 
 // Дерево задач (основной вид, ТЗ 3.6): подзадачи — ветви произвольной вложенности.
-// Сырые задачи живут в стеке; дерево показывает утверждённые.
+// Сырые задачи живут в стеке; дерево показывает утверждённые. Наглядность
+// (шевроны, линии, прогресс поддерева) — в компоненте TaskTree.
 
 const { t } = useI18n()
 
-interface FlatNode {
-  task: Task
-  depth: number
-  hasChildren: boolean
-}
-
 const tasks = ref<Task[]>([])
 const projects = ref<Project[]>([])
 const error = ref('')
 const loading = ref(false)
-const expanded = ref<Record<number, boolean>>({})
 
 async function load() {
   loading.value = true
@@ -42,32 +35,6 @@
   projects.value = await api.listProjects()
 })
 
-// Плоское представление дерева с отступами (проще, чем рекурсивный компонент)
-const rows = computed<FlatNode[]>(() => {
-  const byId = new Map<number, Task[]>([])
-  tasks.value.forEach((t) => {
-    const key = t.parent_task_id ?? 0
-    const list = byId.get(key) ?? []
-    list.push(t)
-    byId.set(key, list)
-  })
-  const out: FlatNode[] = []
-  const visit = (parentId: number, depth: number) => {
-    const children = byId.get(parentId) ?? []
-    children.forEach((t) => {
-      const kids = byId.get(t.id) ?? []
-      out.push({ task: t, depth, hasChildren: kids.length > 0 })
-      if (kids.length > 0 && (expanded.value[t.id] ?? true)) visit(t.id, depth + 1)
-    })
-  }
-  visit(0, 0)
-  return out
-})
-
-function toggle(task: Task) {
-  expanded.value[task.id] = !(expanded.value[task.id] ?? true)
-}
-
 async function setStatus(task: Task, status: string) {
   error.value = ''
   try {
@@ -93,7 +60,6 @@
   try {
     await api.createTask(title, '', subtaskFor.value.id)
     // подзадача попадёт в стек; в дереве появится после утверждения
-    expanded.value[subtaskFor.value.id] = true
     await load()
   } catch (e) {
     error.value = String(e)
@@ -121,19 +87,6 @@
     error.value = String(e)
   }
 }
-
-// Меню «⋯» в строке: смена статуса (отмечен текущий), подзадача, удаление
-function taskMenu(task: Task) {
-  return [
-    ...statusOptions().map((o) => ({
-      label: o.label,
-      icon: o.value === task.status ? 'ph-check' : undefined,
-      onSelect: () => setStatus(task, o.value),
-    })),
-    { label: t('tree.addSubtask'), icon: 'ph-plus', onSelect: () => openSubtaskPrompt(task) },
-    { label: t('stack.deleteTask'), icon: 'ph-trash', danger: true, onSelect: () => askDelete(task) },
-  ]
-}
 </script>
 
 <template>
@@ -147,7 +100,7 @@
     <GnSkeleton v-if="loading" type="line" stack :count="6" class="tree-skeleton" />
 
     <GnEmptyState
-      v-if="!loading && rows.length === 0"
+      v-if="!loading && tasks.length === 0"
       icon="ph-tree-structure"
       :title="t('tree.emptyTitle')"
       :text="t('tree.emptyText')"
@@ -159,34 +112,12 @@
       </template>
     </GnEmptyState>
 
-    <div class="tree">
-      <div
-        v-for="row in rows"
-        :key="row.task.id"
-        class="node"
-        :style="{ marginLeft: row.depth * 24 + 'px' }"
-      >
-        <div class="node-main">
-          <GnIconButton
-            v-if="row.hasChildren"
-            :icon="expanded[row.task.id] ?? true ? 'ph-caret-down' : 'ph-caret-right'"
-            :label="expanded[row.task.id] ?? true ? t('tree.collapse') : t('tree.expand')"
-            size="sm"
-            @click="toggle(row.task)"
-          />
-          <span v-else class="leaf-space" />
-          <span class="title" :class="{ done: row.task.status === 'done' }">{{ row.task.title }}</span>
-          <GnDropdown class="node-menu" :items="taskMenu(row.task)">
-            <template #trigger="{ toggle }">
-              <GnIconButton icon="ph-dots-three-outline" :label="t('common.edit')" @click="toggle" />
-            </template>
-          </GnDropdown>
-        </div>
-        <div class="node-meta">
-          <TaskBadges :task="row.task" />
-        </div>
-      </div>
-    </div>
+    <TaskTree
+      :tasks="tasks"
+      @status-change="setStatus"
+      @add-subtask="openSubtaskPrompt"
+      @delete="askDelete"
+    />
 
     <QuickPrompt
       v-model:open="subtaskOpen"
@@ -207,60 +138,7 @@
 </template>
 
 <style scoped>
-.tree {
-  display: flex;
-  flex-direction: column;
-  gap: 0.4rem;
-}
 .tree-skeleton {
   margin-bottom: 1rem;
 }
-.node {
-  border: 1px solid var(--border, #333);
-  border-radius: 8px;
-  padding: 0.4rem 0.6rem;
-  background: var(--surface, transparent);
-}
-.node-main {
-  display: flex;
-  gap: 0.4rem;
-  align-items: center;
-}
-.node-meta {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.3rem;
-  align-items: center;
-  margin-top: 0.35rem;
-  /* выравнивание по заголовку (после каретки) */
-  padding-left: 2.4rem;
-}
-.leaf-space {
-  width: 2rem;
-  flex: none;
-}
-.node-main .title {
-  flex: 1;
-  min-width: 0;
-  font-weight: 500;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.node-main .title.done {
-  text-decoration: line-through;
-  color: var(--text-muted, #888);
-}
-.node-menu {
-  flex: none;
-}
-/* метаданные переносятся на свою строку, мобильной вёрстке ничего не грозит */
-@media (max-width: 480px) {
-  .node {
-    margin-left: 0 !important;
-  }
-  .node-meta {
-    padding-left: 0;
-  }
-}
 </style>
\ No newline at end of file