From e220712234a7aee743636681dd09250915d9a493 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sat, 14 Feb 2026 18:34:38 +0000
Subject: [PATCH] feat(feedback): add feedback detail page with comments and
 status management

Implements the feedback detail view as the next major feature for the
core feedback workflow. Adds a full detail page at /feedback/[id] with
voting, threaded comments (public + internal team notes), and status
management for team members.

Changes:
- Remove duplicate stub GET /api/feedback/[id].get.ts
- Enhance GET /api/feedback/[id]/index.get.ts with author and project info
- Add GET /api/feedback/[id]/comments.get.ts for listing comments
- Add POST /api/feedback/[id]/comments.post.ts for creating comments
- Add PATCH /api/feedback/[id]/status.patch.ts for status updates (team only)
- Create /pages/feedback/[id].vue detail page with sidebar layout
- Make feedback list items clickable links to detail page

https://claude.ai/code/session_01G5DkzVU6CaCuaYi8a87dkU
---
 pages/feedback/[id].vue                   | 593 ++++++++++++++++++++++
 pages/feedback/index.vue                  |  11 +-
 server/api/feedback/[id].get.ts           |  96 ----
 server/api/feedback/[id]/comments.get.ts  |  73 +++
 server/api/feedback/[id]/comments.post.ts | 150 ++++++
 server/api/feedback/[id]/index.get.ts     |  33 +-
 server/api/feedback/[id]/status.patch.ts  |  49 ++
 7 files changed, 903 insertions(+), 102 deletions(-)
 create mode 100644 pages/feedback/[id].vue
 delete mode 100644 server/api/feedback/[id].get.ts
 create mode 100644 server/api/feedback/[id]/comments.get.ts
 create mode 100644 server/api/feedback/[id]/comments.post.ts
 create mode 100644 server/api/feedback/[id]/status.patch.ts

diff --git a/pages/feedback/[id].vue b/pages/feedback/[id].vue
new file mode 100644
index 0000000..89cf240
--- /dev/null
+++ b/pages/feedback/[id].vue
@@ -0,0 +1,593 @@
+<template>
+  <NuxtLayout name="dashboard">
+    <div class="p-6 max-w-4xl mx-auto">
+      <!-- Loading State -->
+      <div v-if="isLoading">
+        <div class="mb-6">
+          <Skeleton class="h-5 w-32 mb-4" />
+          <Skeleton class="h-8 w-96 mb-2" />
+          <Skeleton class="h-4 w-48" />
+        </div>
+        <div class="bg-card rounded-lg border border-border p-6">
+          <Skeleton class="h-4 w-full mb-2" />
+          <Skeleton class="h-4 w-3/4 mb-2" />
+          <Skeleton class="h-4 w-1/2" />
+        </div>
+        <div class="mt-6 bg-card rounded-lg border border-border p-6">
+          <Skeleton class="h-6 w-32 mb-4" />
+          <Skeleton class="h-20 w-full mb-4" />
+          <Skeleton class="h-4 w-64" />
+        </div>
+      </div>
+
+      <!-- Error State -->
+      <div v-else-if="error" class="rounded-lg border bg-card p-8 text-center">
+        <Icon name="lucide:alert-circle" class="w-12 h-12 mx-auto text-destructive mb-4" />
+        <p class="text-lg font-medium mb-2">Failed to load feedback</p>
+        <p class="text-muted-foreground mb-4">{{ error }}</p>
+        <div class="flex items-center justify-center gap-3">
+          <Button variant="outline" @click="$router.back()">
+            <Icon name="lucide:arrow-left" class="w-4 h-4 mr-2" />
+            Go Back
+          </Button>
+          <Button @click="loadFeedback">
+            <Icon name="lucide:refresh-cw" class="w-4 h-4 mr-2" />
+            Retry
+          </Button>
+        </div>
+      </div>
+
+      <!-- Content -->
+      <div v-else-if="item">
+        <!-- Breadcrumb -->
+        <div class="mb-6">
+          <div class="flex items-center gap-2 text-sm text-muted-foreground mb-4">
+            <NuxtLink to="/feedback" class="hover:text-foreground transition-colors">Feedback</NuxtLink>
+            <Icon name="lucide:chevron-right" class="w-4 h-4" />
+            <span v-if="item.project" class="hover:text-foreground">{{ item.project.name }}</span>
+            <Icon v-if="item.project" name="lucide:chevron-right" class="w-4 h-4" />
+            <span class="text-foreground">{{ item.title }}</span>
+          </div>
+
+          <!-- Back button -->
+          <Button variant="ghost" size="sm" class="mb-4" @click="$router.back()">
+            <Icon name="lucide:arrow-left" class="w-4 h-4 mr-2" />
+            Back
+          </Button>
+        </div>
+
+        <!-- Main content area -->
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+          <!-- Left column: Feedback content + Comments -->
+          <div class="lg:col-span-2 space-y-6">
+            <!-- Feedback Header -->
+            <div class="bg-card rounded-lg border border-border p-6">
+              <div class="flex items-start gap-4">
+                <!-- Vote button -->
+                <div class="flex flex-col items-center">
+                  <button
+                    class="flex flex-col items-center p-2 rounded-lg border transition-colors"
+                    :class="item.hasVoted
+                      ? 'border-primary bg-primary/10 text-primary'
+                      : 'border-border hover:border-primary/50 text-muted-foreground hover:text-primary'"
+                    @click="toggleVote"
+                  >
+                    <Icon name="lucide:chevron-up" class="w-5 h-5" />
+                    <span class="text-sm font-semibold">{{ item.voteCount }}</span>
+                  </button>
+                </div>
+
+                <!-- Title + Body -->
+                <div class="flex-1 min-w-0">
+                  <h1 class="text-2xl font-bold text-foreground mb-2">{{ item.title }}</h1>
+                  <p v-if="item.body" class="text-muted-foreground whitespace-pre-wrap">{{ item.body }}</p>
+                </div>
+              </div>
+
+              <!-- Meta row -->
+              <div class="flex items-center flex-wrap gap-4 mt-6 pt-4 border-t border-border text-sm text-muted-foreground">
+                <div class="flex items-center gap-2">
+                  <Avatar class="h-6 w-6">
+                    <AvatarImage v-if="item.author?.image" :src="item.author.image" />
+                    <AvatarFallback class="text-xs">{{ authorInitials }}</AvatarFallback>
+                  </Avatar>
+                  <span>{{ item.authorName || item.author?.name || 'Anonymous' }}</span>
+                </div>
+                <div class="flex items-center gap-1">
+                  <Icon name="lucide:calendar" class="w-4 h-4" />
+                  <span>{{ formatDate(item.createdAt) }}</span>
+                </div>
+                <div class="flex items-center gap-1">
+                  <Icon name="lucide:message-circle" class="w-4 h-4" />
+                  <span>{{ item.commentCount }} {{ item.commentCount === 1 ? 'comment' : 'comments' }}</span>
+                </div>
+              </div>
+            </div>
+
+            <!-- Comments Section -->
+            <div class="bg-card rounded-lg border border-border">
+              <div class="p-6 border-b border-border">
+                <h2 class="text-lg font-semibold text-card-foreground">
+                  Comments
+                  <span class="text-sm font-normal text-muted-foreground ml-2">{{ comments.length }}</span>
+                </h2>
+              </div>
+
+              <!-- Comments Loading -->
+              <div v-if="isCommentsLoading" class="p-6">
+                <div v-for="n in 2" :key="n" class="mb-6 last:mb-0">
+                  <div class="flex items-start gap-3">
+                    <Skeleton class="h-8 w-8 rounded-full" />
+                    <div class="flex-1">
+                      <Skeleton class="h-4 w-32 mb-2" />
+                      <Skeleton class="h-4 w-full mb-1" />
+                      <Skeleton class="h-4 w-2/3" />
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <!-- Comments Error -->
+              <div v-else-if="commentsError" class="p-6 text-center">
+                <p class="text-sm text-muted-foreground mb-3">{{ commentsError }}</p>
+                <Button variant="outline" size="sm" @click="loadComments">
+                  <Icon name="lucide:refresh-cw" class="w-4 h-4 mr-2" />
+                  Retry
+                </Button>
+              </div>
+
+              <!-- Empty Comments -->
+              <div v-else-if="comments.length === 0" class="p-6 text-center">
+                <Icon name="lucide:message-circle" class="w-10 h-10 mx-auto text-muted-foreground mb-3" />
+                <p class="text-muted-foreground">No comments yet. Be the first to share your thoughts.</p>
+              </div>
+
+              <!-- Comments List -->
+              <div v-else class="divide-y divide-border">
+                <div
+                  v-for="comment in comments"
+                  :key="comment.id"
+                  class="p-6"
+                  :class="comment.isInternal ? 'bg-amber-50/50 dark:bg-amber-950/20' : ''"
+                >
+                  <div class="flex items-start gap-3">
+                    <Avatar class="h-8 w-8">
+                      <AvatarImage v-if="comment.author?.image" :src="comment.author.image" />
+                      <AvatarFallback class="text-xs">{{ commentAuthorInitials(comment) }}</AvatarFallback>
+                    </Avatar>
+                    <div class="flex-1 min-w-0">
+                      <div class="flex items-center gap-2 mb-1">
+                        <span class="text-sm font-medium text-foreground">
+                          {{ comment.authorName || comment.author?.name || 'Anonymous' }}
+                        </span>
+                        <Badge v-if="comment.isInternal" variant="outline" class="text-amber-600 dark:text-amber-400 border-amber-300 dark:border-amber-700">
+                          <Icon name="lucide:lock" class="w-3 h-3 mr-1" />
+                          Internal
+                        </Badge>
+                        <span class="text-xs text-muted-foreground">{{ formatDate(comment.createdAt) }}</span>
+                      </div>
+                      <p class="text-sm text-foreground whitespace-pre-wrap">{{ comment.body }}</p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <!-- Add Comment Form -->
+              <div class="p-6 border-t border-border">
+                <div class="space-y-3">
+                  <Textarea
+                    v-model="newComment"
+                    placeholder="Write a comment..."
+                    rows="3"
+                    :disabled="isSubmittingComment"
+                  />
+                  <div class="flex items-center justify-between">
+                    <div class="flex items-center gap-3">
+                      <label v-if="isTeamMember" class="flex items-center gap-2 text-sm text-muted-foreground cursor-pointer">
+                        <input v-model="isInternalComment" type="checkbox" class="rounded border-border" />
+                        <Icon name="lucide:lock" class="w-4 h-4" />
+                        Internal note
+                      </label>
+                    </div>
+                    <Button
+                      size="sm"
+                      :disabled="!newComment.trim() || isSubmittingComment"
+                      @click="submitComment"
+                    >
+                      <Icon v-if="isSubmittingComment" name="lucide:loader-2" class="w-4 h-4 mr-2 animate-spin" />
+                      Post Comment
+                    </Button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Right column: Sidebar -->
+          <div class="space-y-6">
+            <!-- Status -->
+            <div class="bg-card rounded-lg border border-border p-6">
+              <h3 class="text-sm font-medium text-muted-foreground mb-3">Status</h3>
+              <div v-if="isTeamMember">
+                <DropdownMenu>
+                  <DropdownMenuTrigger as-child>
+                    <Button variant="outline" class="w-full justify-between">
+                      <div class="flex items-center gap-2">
+                        <span class="w-2 h-2 rounded-full" :class="statusColor(item.status)" />
+                        {{ formatStatus(item.status) }}
+                      </div>
+                      <Icon name="lucide:chevron-down" class="w-4 h-4 ml-2" />
+                    </Button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="start" class="w-48">
+                    <DropdownMenuItem
+                      v-for="s in statuses"
+                      :key="s.value"
+                      :disabled="isUpdatingStatus"
+                      @click="updateStatus(s.value)"
+                    >
+                      <span class="w-2 h-2 rounded-full mr-2" :class="statusColor(s.value)" />
+                      {{ s.label }}
+                    </DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </div>
+              <div v-else>
+                <Badge :variant="statusBadgeVariant(item.status)" class="text-sm">
+                  <span class="w-2 h-2 rounded-full mr-2" :class="statusColor(item.status)" />
+                  {{ formatStatus(item.status) }}
+                </Badge>
+              </div>
+            </div>
+
+            <!-- Category -->
+            <div class="bg-card rounded-lg border border-border p-6">
+              <h3 class="text-sm font-medium text-muted-foreground mb-3">Category</h3>
+              <Badge v-if="item.category" variant="outline">
+                {{ item.category.name }}
+              </Badge>
+              <span v-else class="text-sm text-muted-foreground">Uncategorized</span>
+            </div>
+
+            <!-- Details -->
+            <div class="bg-card rounded-lg border border-border p-6">
+              <h3 class="text-sm font-medium text-muted-foreground mb-3">Details</h3>
+              <div class="space-y-3 text-sm">
+                <div class="flex items-center justify-between">
+                  <span class="text-muted-foreground">Votes</span>
+                  <span class="font-medium text-foreground">{{ item.voteCount }}</span>
+                </div>
+                <Separator />
+                <div class="flex items-center justify-between">
+                  <span class="text-muted-foreground">Comments</span>
+                  <span class="font-medium text-foreground">{{ item.commentCount }}</span>
+                </div>
+                <Separator />
+                <div class="flex items-center justify-between">
+                  <span class="text-muted-foreground">Created</span>
+                  <span class="font-medium text-foreground">{{ formatFullDate(item.createdAt) }}</span>
+                </div>
+                <Separator />
+                <div class="flex items-center justify-between">
+                  <span class="text-muted-foreground">Updated</span>
+                  <span class="font-medium text-foreground">{{ formatFullDate(item.updatedAt) }}</span>
+                </div>
+              </div>
+            </div>
+
+            <!-- Actions -->
+            <div v-if="item.isOwn || isTeamMember" class="bg-card rounded-lg border border-border p-6">
+              <h3 class="text-sm font-medium text-muted-foreground mb-3">Actions</h3>
+              <Button
+                variant="destructive"
+                size="sm"
+                class="w-full"
+                :disabled="isDeleting"
+                @click="showDeleteDialog = true"
+              >
+                <Icon name="lucide:trash-2" class="w-4 h-4 mr-2" />
+                Delete Feedback
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Delete Confirmation Dialog -->
+      <Dialog :open="showDeleteDialog" @update:open="showDeleteDialog = $event">
+        <DialogContent class="sm:max-w-[400px]">
+          <DialogHeader>
+            <DialogTitle>Delete Feedback</DialogTitle>
+            <DialogDescription>
+              Are you sure you want to delete "{{ item?.title }}"? This action cannot be undone.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button variant="outline" @click="showDeleteDialog = false">Cancel</Button>
+            <Button
+              variant="destructive"
+              :disabled="isDeleting"
+              @click="deleteFeedback"
+            >
+              <Icon v-if="isDeleting" name="lucide:loader-2" class="w-4 h-4 mr-2 animate-spin" />
+              Delete
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  </NuxtLayout>
+</template>
+
+<script>
+import { authClient } from '~/lib/auth-client'
+
+export default {
+  name: 'FeedbackDetailPage',
+
+  data() {
+    return {
+      item: null,
+      comments: [],
+
+      isLoading: true,
+      error: null,
+      isCommentsLoading: true,
+      commentsError: null,
+
+      newComment: '',
+      isInternalComment: false,
+      isSubmittingComment: false,
+
+      isUpdatingStatus: false,
+      isDeleting: false,
+      showDeleteDialog: false,
+
+      isTeamMember: false,
+
+      statuses: [
+        { value: 'open', label: 'Open' },
+        { value: 'in_progress', label: 'In Progress' },
+        { value: 'planned', label: 'Planned' },
+        { value: 'completed', label: 'Completed' },
+        { value: 'closed', label: 'Closed' },
+        { value: 'declined', label: 'Declined' },
+      ],
+    }
+  },
+
+  computed: {
+    feedbackId() {
+      return this.$route.params.id
+    },
+    authorInitials() {
+      const name = this.item?.authorName || this.item?.author?.name || '?'
+      return name
+        .split(' ')
+        .map((n) => n[0])
+        .join('')
+        .toUpperCase()
+        .slice(0, 2)
+    },
+  },
+
+  async mounted() {
+    await this.loadFeedback()
+  },
+
+  methods: {
+    async loadFeedback() {
+      this.isLoading = true
+      this.error = null
+
+      try {
+        const response = await $fetch(`/api/feedback/${this.feedbackId}`)
+        this.item = response?.data || null
+
+        if (!this.item) {
+          this.error = 'Feedback not found'
+          return
+        }
+
+        // Determine if user is a team member by checking session
+        await this.checkTeamMembership()
+
+        // Load comments after feedback is loaded
+        await this.loadComments()
+      } catch (err) {
+        console.error('Error loading feedback:', err)
+        if (err?.statusCode === 404) {
+          this.error = 'Feedback not found'
+        } else if (err?.statusCode === 403) {
+          this.error = 'You do not have access to this feedback'
+        } else {
+          this.error = err?.data?.error?.message || 'Failed to load feedback'
+        }
+      } finally {
+        this.isLoading = false
+      }
+    },
+
+    async checkTeamMembership() {
+      try {
+        const { data: session } = await authClient.useSession(useFetch)
+        if (session.value?.user && this.item?.project) {
+          // If the detail endpoint succeeded with auth, user has project access
+          this.isTeamMember = !!session.value.user
+        }
+      } catch {
+        this.isTeamMember = false
+      }
+    },
+
+    async loadComments() {
+      this.isCommentsLoading = true
+      this.commentsError = null
+
+      try {
+        const response = await $fetch(`/api/feedback/${this.feedbackId}/comments`)
+        this.comments = response?.data || []
+      } catch (err) {
+        console.error('Error loading comments:', err)
+        this.commentsError = 'Failed to load comments'
+      } finally {
+        this.isCommentsLoading = false
+      }
+    },
+
+    async toggleVote() {
+      if (!this.item) return
+
+      try {
+        const response = await $fetch(`/api/feedback/${this.feedbackId}/vote`, {
+          method: 'POST',
+        })
+        const data = response?.data
+        if (data) {
+          this.item.hasVoted = data.voted
+          this.item.voteCount = data.voteCount
+        }
+      } catch (err) {
+        console.error('Error toggling vote:', err)
+      }
+    },
+
+    async submitComment() {
+      if (!this.newComment.trim()) return
+
+      this.isSubmittingComment = true
+
+      try {
+        const response = await $fetch(`/api/feedback/${this.feedbackId}/comments`, {
+          method: 'POST',
+          body: {
+            body: this.newComment.trim(),
+            isInternal: this.isInternalComment,
+          },
+        })
+
+        const comment = response?.data
+        if (comment) {
+          this.comments.push(comment)
+          this.item.commentCount++
+        }
+
+        this.newComment = ''
+        this.isInternalComment = false
+      } catch (err) {
+        console.error('Error posting comment:', err)
+        alert(err?.data?.error?.message || 'Failed to post comment')
+      } finally {
+        this.isSubmittingComment = false
+      }
+    },
+
+    async updateStatus(newStatus) {
+      if (!this.item || this.item.status === newStatus) return
+
+      this.isUpdatingStatus = true
+
+      try {
+        const response = await $fetch(`/api/feedback/${this.feedbackId}/status`, {
+          method: 'PATCH',
+          body: { status: newStatus },
+        })
+
+        const updated = response?.data
+        if (updated) {
+          this.item.status = updated.status
+          this.item.updatedAt = updated.updatedAt
+        }
+      } catch (err) {
+        console.error('Error updating status:', err)
+        alert(err?.data?.error?.message || 'Failed to update status')
+      } finally {
+        this.isUpdatingStatus = false
+      }
+    },
+
+    async deleteFeedback() {
+      if (!this.item) return
+
+      this.isDeleting = true
+
+      try {
+        await $fetch(`/api/feedback/${this.feedbackId}`, { method: 'DELETE' })
+        this.showDeleteDialog = false
+        navigateTo('/feedback')
+      } catch (err) {
+        console.error('Error deleting feedback:', err)
+        alert(err?.data?.error?.message || 'Failed to delete feedback')
+      } finally {
+        this.isDeleting = false
+      }
+    },
+
+    commentAuthorInitials(comment) {
+      const name = comment.authorName || comment.author?.name || '?'
+      return name
+        .split(' ')
+        .map((n) => n[0])
+        .join('')
+        .toUpperCase()
+        .slice(0, 2)
+    },
+
+    formatDate(dateStr) {
+      const date = new Date(dateStr)
+      const now = new Date()
+      const diff = now.getTime() - date.getTime()
+      const days = Math.floor(diff / 86400000)
+      if (days === 0) return 'Today'
+      if (days === 1) return 'Yesterday'
+      if (days < 7) return `${days} days ago`
+      if (days < 30) return `${Math.floor(days / 7)} weeks ago`
+      return date.toLocaleDateString()
+    },
+
+    formatFullDate(dateStr) {
+      return new Date(dateStr).toLocaleDateString('en-US', {
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric',
+      })
+    },
+
+    formatStatus(status) {
+      const labels = {
+        open: 'Open',
+        in_progress: 'In Progress',
+        planned: 'Planned',
+        completed: 'Completed',
+        closed: 'Closed',
+        declined: 'Declined',
+      }
+      return labels[status] || status
+    },
+
+    statusColor(status) {
+      const colors = {
+        open: 'bg-blue-500',
+        in_progress: 'bg-yellow-500',
+        planned: 'bg-purple-500',
+        completed: 'bg-green-500',
+        closed: 'bg-gray-500',
+        declined: 'bg-red-500',
+      }
+      return colors[status] || 'bg-gray-500'
+    },
+
+    statusBadgeVariant(status) {
+      const variants = {
+        open: 'outline',
+        in_progress: 'secondary',
+        planned: 'default',
+        completed: 'default',
+        closed: 'secondary',
+        declined: 'destructive',
+      }
+      return variants[status] || 'outline'
+    },
+  },
+}
+</script>
diff --git a/pages/feedback/index.vue b/pages/feedback/index.vue
index a3a8c15..782c90c 100644
--- a/pages/feedback/index.vue
+++ b/pages/feedback/index.vue
@@ -192,11 +192,12 @@
             </h2>
           </div>
           <div class="divide-y divide-border">
-            <div
+            <NuxtLink
               v-for="item in feedbackItems"
               :key="item.id"
+              :to="`/feedback/${item.id}`"
               :data-testid="`feedback-item-${item.id}`"
-              class="p-6 hover:bg-muted transition-colors"
+              class="block p-6 hover:bg-muted transition-colors cursor-pointer"
             >
               <div class="flex items-start space-x-4">
                 <div class="flex flex-col items-center space-y-1">
@@ -208,7 +209,7 @@
                 <div class="flex-1 min-w-0">
                   <div class="flex items-start justify-between gap-4">
                     <div class="min-w-0">
-                      <h3 class="text-lg font-medium text-card-foreground mb-1">{{ item.title }}</h3>
+                      <h3 class="text-lg font-medium text-card-foreground mb-1 group-hover:text-primary">{{ item.title }}</h3>
                       <p v-if="item.body" class="text-muted-foreground mb-3 line-clamp-2">{{ item.body }}</p>
                       <div class="flex items-center flex-wrap gap-3 text-sm text-muted-foreground">
                         <div v-if="item.authorName" class="flex items-center gap-1">
@@ -236,7 +237,7 @@
                         :data-testid="`feedback-item-delete-${item.id}`"
                         class="p-1 text-muted-foreground hover:text-destructive transition-colors"
                         title="Delete feedback"
-                        @click="confirmDelete(item)"
+                        @click.prevent="confirmDelete(item)"
                       >
                         <Icon name="lucide:trash-2" class="w-4 h-4" />
                       </button>
@@ -244,7 +245,7 @@
                   </div>
                 </div>
               </div>
-            </div>
+            </NuxtLink>
           </div>
 
           <!-- Pagination -->
diff --git a/server/api/feedback/[id].get.ts b/server/api/feedback/[id].get.ts
deleted file mode 100644
index 112bc80..0000000
--- a/server/api/feedback/[id].get.ts
+++ /dev/null
@@ -1,96 +0,0 @@
-/**
- * Get Feedback Endpoint
- * Retrieves a single feedback item by ID
- *
- * @openapi
- * /api/feedback/{id}:
- *   get:
- *     tags: [Feedback]
- *     summary: Get feedback by ID
- *     description: Retrieves detailed information about a specific feedback item
- *     operationId: getFeedback
- *     parameters:
- *       - name: id
- *         in: path
- *         description: Feedback ID
- *         required: true
- *         schema:
- *           type: string
- *     responses:
- *       200:
- *         description: Feedback details
- *         content:
- *           application/json:
- *             schema:
- *               type: object
- *               properties:
- *                 success:
- *                   type: boolean
- *                   example: true
- *                 data:
- *                   allOf:
- *                     - $ref: '#/components/schemas/Feedback'
- *                     - type: object
- *                       properties:
- *                         author:
- *                           $ref: '#/components/schemas/User'
- *                         project:
- *                           $ref: '#/components/schemas/Project'
- *                         hasVoted:
- *                           type: boolean
- *                           description: Whether the current user has voted (if authenticated)
- *       404:
- *         description: Feedback not found
- *         content:
- *           application/json:
- *             schema:
- *               $ref: '#/components/schemas/Error'
- *       501:
- *         description: Not implemented
- *         content:
- *           application/json:
- *             schema:
- *               $ref: '#/components/schemas/Error'
- */
-
-import { createErrorResponse, createSuccessResponse, ErrorCode } from '~/server/utils/response'
-import { optionalAuth } from '~/server/utils/auth-middleware'
-import { requireRateLimit, rateLimits } from '~/server/utils/rate-limit'
-
-export default defineEventHandler(async (event) => {
-  // Optional authentication - public endpoint
-  const session = await optionalAuth(event)
-
-  // Rate limiting (relaxed for public read endpoint)
-  await requireRateLimit(event, rateLimits.relaxed)
-
-  // Get ID from route params
-  const id = getRouterParam(event, 'id')
-
-  if (!id) {
-    throw createError({
-      statusCode: 400,
-      statusMessage: 'Bad Request',
-      data: createErrorResponse(
-        ErrorCode.VALIDATION_ERROR,
-        'Feedback ID is required'
-      )
-    })
-  }
-
-  // TODO: Implement feedback retrieval
-  // 1. Query feedback by ID
-  // 2. Include author information
-  // 3. Include project information
-  // 4. If authenticated, check if user has voted
-  // 5. Return feedback with additional metadata
-
-  throw createError({
-    statusCode: 501,
-    statusMessage: 'Not Implemented',
-    data: createErrorResponse(
-      ErrorCode.NOT_IMPLEMENTED,
-      'Feedback retrieval is not yet implemented'
-    )
-  })
-})
diff --git a/server/api/feedback/[id]/comments.get.ts b/server/api/feedback/[id]/comments.get.ts
new file mode 100644
index 0000000..289a7f6
--- /dev/null
+++ b/server/api/feedback/[id]/comments.get.ts
@@ -0,0 +1,73 @@
+import { eq, and, asc, isNull } from 'drizzle-orm'
+import { createErrorResponse, createSuccessResponse, ErrorCode } from '~/server/utils/response'
+import { optionalAuth } from '~/server/utils/auth-middleware'
+import { requirePublicProject, requireProjectAccess } from '~/server/utils/project-access'
+import { db } from '~/server/database/drizzle'
+import { feedback, feedbackComment } from '~/server/database/schema/feedback'
+import { user } from '~/server/database/schema/auth'
+
+export default defineEventHandler(async (event) => {
+  const session = await optionalAuth(event)
+
+  const id = getRouterParam(event, 'id')
+  if (!id) {
+    throw createError({
+      statusCode: 400,
+      statusMessage: 'Bad Request',
+      data: createErrorResponse(ErrorCode.VALIDATION_ERROR, 'Feedback ID is required'),
+    })
+  }
+
+  // Verify feedback exists
+  const [fb] = await db.select().from(feedback).where(eq(feedback.id, id)).limit(1)
+  if (!fb) {
+    throw createError({
+      statusCode: 404,
+      statusMessage: 'Not Found',
+      data: createErrorResponse(ErrorCode.NOT_FOUND, 'Feedback not found'),
+    })
+  }
+
+  // Verify access to project
+  let isTeamMember = false
+  if (session?.user) {
+    try {
+      await requireProjectAccess(fb.projectId, session.user.id)
+      isTeamMember = true
+    } catch {
+      // If user doesn't have team access, check if project is public
+      await requirePublicProject(fb.projectId)
+    }
+  } else {
+    await requirePublicProject(fb.projectId)
+  }
+
+  // Build where clause - hide internal comments from non-team-members
+  const conditions = [eq(feedbackComment.feedbackId, id)]
+  if (!isTeamMember) {
+    conditions.push(eq(feedbackComment.isInternal, false))
+  }
+
+  // Fetch comments ordered by creation time
+  const comments = await db
+    .select({
+      comment: feedbackComment,
+      authorUser: {
+        id: user.id,
+        name: user.name,
+        email: user.email,
+        image: user.image,
+      },
+    })
+    .from(feedbackComment)
+    .leftJoin(user, eq(feedbackComment.authorUserId, user.id))
+    .where(and(...conditions))
+    .orderBy(asc(feedbackComment.createdAt))
+
+  const result = comments.map((row) => ({
+    ...row.comment,
+    author: row.comment.authorUserId ? row.authorUser : null,
+  }))
+
+  return createSuccessResponse(result)
+})
diff --git a/server/api/feedback/[id]/comments.post.ts b/server/api/feedback/[id]/comments.post.ts
new file mode 100644
index 0000000..513f268
--- /dev/null
+++ b/server/api/feedback/[id]/comments.post.ts
@@ -0,0 +1,150 @@
+import { z } from 'zod'
+import { eq, sql } from 'drizzle-orm'
+import { createErrorResponse, createSuccessResponse, ErrorCode } from '~/server/utils/response'
+import { optionalAuth } from '~/server/utils/auth-middleware'
+import { requirePublicProject, requireProjectAccess } from '~/server/utils/project-access'
+import { getOrCreateAnonSession } from '~/server/utils/anonymous-session'
+import { validateBody } from '~/server/utils/validation'
+import { db } from '~/server/database/drizzle'
+import { feedback, feedbackComment } from '~/server/database/schema/feedback'
+import { user } from '~/server/database/schema/auth'
+
+const createCommentSchema = z.object({
+  body: z.string().min(1, 'Comment body is required').max(5000, 'Comment too long'),
+  parentCommentId: z.string().optional().nullable(),
+  isInternal: z.boolean().optional().default(false),
+  authorName: z.string().min(1).max(100).optional(),
+  authorEmail: z.string().email().optional(),
+})
+
+export default defineEventHandler(async (event) => {
+  const session = await optionalAuth(event)
+  const body = await validateBody(event, createCommentSchema)
+
+  const id = getRouterParam(event, 'id')
+  if (!id) {
+    throw createError({
+      statusCode: 400,
+      statusMessage: 'Bad Request',
+      data: createErrorResponse(ErrorCode.VALIDATION_ERROR, 'Feedback ID is required'),
+    })
+  }
+
+  // Verify feedback exists and is not locked
+  const [fb] = await db.select().from(feedback).where(eq(feedback.id, id)).limit(1)
+  if (!fb) {
+    throw createError({
+      statusCode: 404,
+      statusMessage: 'Not Found',
+      data: createErrorResponse(ErrorCode.NOT_FOUND, 'Feedback not found'),
+    })
+  }
+
+  if (fb.isLocked) {
+    throw createError({
+      statusCode: 403,
+      statusMessage: 'Forbidden',
+      data: createErrorResponse(ErrorCode.FORBIDDEN, 'This feedback is locked and does not accept new comments'),
+    })
+  }
+
+  // Verify access - internal comments require team membership
+  let isTeamMember = false
+  if (session?.user) {
+    try {
+      await requireProjectAccess(fb.projectId, session.user.id)
+      isTeamMember = true
+    } catch {
+      await requirePublicProject(fb.projectId)
+    }
+  } else {
+    await requirePublicProject(fb.projectId)
+  }
+
+  // Internal comments require team membership
+  if (body.isInternal && !isTeamMember) {
+    throw createError({
+      statusCode: 403,
+      statusMessage: 'Forbidden',
+      data: createErrorResponse(ErrorCode.FORBIDDEN, 'Only team members can post internal comments'),
+    })
+  }
+
+  // Anonymous users must provide a name
+  if (!session?.user && !body.authorName) {
+    throw createError({
+      statusCode: 400,
+      statusMessage: 'Bad Request',
+      data: createErrorResponse(ErrorCode.VALIDATION_ERROR, 'Name is required for anonymous comments'),
+    })
+  }
+
+  // Validate parent comment if provided
+  if (body.parentCommentId) {
+    const [parent] = await db
+      .select()
+      .from(feedbackComment)
+      .where(eq(feedbackComment.id, body.parentCommentId))
+      .limit(1)
+    if (!parent || parent.feedbackId !== id) {
+      throw createError({
+        statusCode: 400,
+        statusMessage: 'Bad Request',
+        data: createErrorResponse(ErrorCode.VALIDATION_ERROR, 'Invalid parent comment'),
+      })
+    }
+  }
+
+  // For anonymous users, get or create an anonymous session
+  let anonSessionId: string | null = null
+  if (!session?.user) {
+    const anonSession = await getOrCreateAnonSession(event)
+    anonSessionId = anonSession.id
+  }
+
+  const now = new Date()
+  const [created] = await db
+    .insert(feedbackComment)
+    .values({
+      id: crypto.randomUUID(),
+      feedbackId: id,
+      parentCommentId: body.parentCommentId || null,
+      body: body.body,
+      authorUserId: session?.user?.id || null,
+      authorSessionId: anonSessionId,
+      authorName: session?.user ? session.user.name : body.authorName || null,
+      authorEmail: session?.user ? session.user.email : body.authorEmail || null,
+      isInternal: body.isInternal,
+      createdAt: now,
+      updatedAt: now,
+    })
+    .returning()
+
+  // Increment comment count on the feedback item
+  await db
+    .update(feedback)
+    .set({ commentCount: sql`${feedback.commentCount} + 1`, updatedAt: now })
+    .where(eq(feedback.id, id))
+
+  // Fetch author info for the response
+  let author = null
+  if (session?.user) {
+    const [authorUser] = await db
+      .select({
+        id: user.id,
+        name: user.name,
+        email: user.email,
+        image: user.image,
+      })
+      .from(user)
+      .where(eq(user.id, session.user.id))
+      .limit(1)
+    author = authorUser || null
+  }
+
+  setResponseStatus(event, 201)
+  return createSuccessResponse({
+    ...created,
+    author,
+  })
+})
diff --git a/server/api/feedback/[id]/index.get.ts b/server/api/feedback/[id]/index.get.ts
index 2be4de6..aed5cb2 100644
--- a/server/api/feedback/[id]/index.get.ts
+++ b/server/api/feedback/[id]/index.get.ts
@@ -4,7 +4,8 @@ import { optionalAuth } from '~/server/utils/auth-middleware'
 import { requirePublicProject, requireProjectAccess } from '~/server/utils/project-access'
 import { getAnonSession } from '~/server/utils/anonymous-session'
 import { db } from '~/server/database/drizzle'
-import { feedback, feedbackCategory, vote } from '~/server/database/schema/feedback'
+import { feedback, feedbackCategory, vote, project } from '~/server/database/schema/feedback'
+import { user } from '~/server/database/schema/auth'
 
 export default defineEventHandler(async (event) => {
   const session = await optionalAuth(event)
@@ -45,6 +46,34 @@ export default defineEventHandler(async (event) => {
     await requirePublicProject(item.feedback.projectId)
   }
 
+  // Get author info if feedback was created by a registered user
+  let author = null
+  if (item.feedback.authorUserId) {
+    const [authorUser] = await db
+      .select({
+        id: user.id,
+        name: user.name,
+        email: user.email,
+        image: user.image,
+      })
+      .from(user)
+      .where(eq(user.id, item.feedback.authorUserId))
+      .limit(1)
+    author = authorUser || null
+  }
+
+  // Get project info
+  const [proj] = await db
+    .select({
+      id: project.id,
+      name: project.name,
+      slug: project.slug,
+      isPublic: project.isPublic,
+    })
+    .from(project)
+    .where(eq(project.id, item.feedback.projectId))
+    .limit(1)
+
   // Check if viewer has voted
   let hasVoted = false
   if (session?.user) {
@@ -72,6 +101,8 @@ export default defineEventHandler(async (event) => {
   return createSuccessResponse({
     ...item.feedback,
     category: item.category,
+    author,
+    project: proj,
     hasVoted,
     isOwn,
   })
diff --git a/server/api/feedback/[id]/status.patch.ts b/server/api/feedback/[id]/status.patch.ts
new file mode 100644
index 0000000..108e252
--- /dev/null
+++ b/server/api/feedback/[id]/status.patch.ts
@@ -0,0 +1,49 @@
+import { z } from 'zod'
+import { eq } from 'drizzle-orm'
+import { createErrorResponse, createSuccessResponse, ErrorCode } from '~/server/utils/response'
+import { requireAuth } from '~/server/utils/auth-middleware'
+import { requireProjectAccess } from '~/server/utils/project-access'
+import { validateBody } from '~/server/utils/validation'
+import { db } from '~/server/database/drizzle'
+import { feedback } from '~/server/database/schema/feedback'
+
+const updateStatusSchema = z.object({
+  status: z.enum(['open', 'in_progress', 'planned', 'completed', 'closed', 'declined']),
+})
+
+export default defineEventHandler(async (event) => {
+  const session = await requireAuth(event)
+
+  const id = getRouterParam(event, 'id')
+  if (!id) {
+    throw createError({
+      statusCode: 400,
+      statusMessage: 'Bad Request',
+      data: createErrorResponse(ErrorCode.VALIDATION_ERROR, 'Feedback ID is required'),
+    })
+  }
+
+  const body = await validateBody(event, updateStatusSchema)
+
+  // Verify feedback exists
+  const [fb] = await db.select().from(feedback).where(eq(feedback.id, id)).limit(1)
+  if (!fb) {
+    throw createError({
+      statusCode: 404,
+      statusMessage: 'Not Found',
+      data: createErrorResponse(ErrorCode.NOT_FOUND, 'Feedback not found'),
+    })
+  }
+
+  // Only team members can change status
+  await requireProjectAccess(fb.projectId, session.user.id)
+
+  const now = new Date()
+  const [updated] = await db
+    .update(feedback)
+    .set({ status: body.status, updatedAt: now })
+    .where(eq(feedback.id, id))
+    .returning()
+
+  return createSuccessResponse(updated)
+})