feat: add message feedback (thumbs up/down) (#1594)

* feat: add message feedback (thumbs up/down) with modal for dislike details

Add per-message feedback system allowing users to rate routing quality.
Thumbs up/down column appears first in both Messages and Overview tables.
Dislike opens a compact modal with tags (Not expected tier, Poor answer
quality, Too slow, Buggy, Other) and optional text details. Feedback is
stored in agent_messages table via new migration.

* style: use filled thumb icons, teal active color, tighter feedback cell padding

- Thumb up active color: #1BC4BF (teal)
- Thumb down active: foreground color
- Inactive sibling fades to 20% opacity when other is active
- Reduced feedback cell padding-right to 0

* chore: add changeset for message feedback feature

* test: add FeedbackModal and FeedbackCell test coverage

* test: add feedback coverage for MessageLog, Overview, FeedbackModal, and FeedbackCell

* feat: hide feedback column in local mode

Feedback data in local mode stays in SQLite and doesn't flow to the
cloud backend, making thumbs up/down misleading. Detect local mode
via checkIsLocalMode() and filter out the feedback column, handlers,
and modal from both MessageLog and Overview pages.

* test: add coverage for feedback error rollback and API functions

Cover setMessageFeedback, clearMessageFeedback, getMessageDetails in
api.test.ts. Add error rollback tests for optimistic like/dislike/clear
in both MessageLog and Overview pages.

Author: SebConejo

.changeset/message-feedback.md

@@ -0,0 +1,5 @@
+---
+"manifest": minor
+---
+
+Add per-message feedback (thumbs up/down) to Messages and Overview pages

packages/backend/src/analytics/analytics.module.ts

@@ -13,6 +13,7 @@ import { AgentLifecycleService } from './services/agent-lifecycle.service';
 import { TimeseriesQueriesService } from './services/timeseries-queries.service';
 import { MessagesQueryService } from './services/messages-query.service';
 import { MessageDetailsService } from './services/message-details.service';
+import { MessageFeedbackService } from './services/message-feedback.service';
 import { AgentAnalyticsService } from './services/agent-analytics.service';
 import { OverviewController } from './controllers/overview.controller';
 import { TokensController } from './controllers/tokens.controller';
@@ -41,6 +42,7 @@ import { AgentAnalyticsController } from './controllers/agent-analytics.controll
     TimeseriesQueriesService,
     MessagesQueryService,
     MessageDetailsService,
+    MessageFeedbackService,
     AgentAnalyticsService,
   ],
 })

packages/backend/src/analytics/controllers/messages.controller.spec.ts

@@ -2,11 +2,14 @@ import { Test, TestingModule } from '@nestjs/testing';
 import { MessagesController } from './messages.controller';
 import { MessagesQueryService } from '../services/messages-query.service';
 import { MessageDetailsService } from '../services/message-details.service';
+import { MessageFeedbackService } from '../services/message-feedback.service';
 
 describe('MessagesController', () => {
   let controller: MessagesController;
   let mockGetMessages: jest.Mock;
   let mockGetDetails: jest.Mock;
+  let mockSetFeedback: jest.Mock;
+  let mockClearFeedback: jest.Mock;
 
   beforeEach(async () => {
     mockGetMessages = jest.fn().mockResolvedValue({
@@ -23,6 +26,9 @@ describe('MessagesController', () => {
       agent_logs: [],
     });
 
+    mockSetFeedback = jest.fn().mockResolvedValue(undefined);
+    mockClearFeedback = jest.fn().mockResolvedValue(undefined);
+
     const module: TestingModule = await Test.createTestingModule({
       controllers: [MessagesController],
       providers: [
@@ -34,6 +40,10 @@ describe('MessagesController', () => {
           provide: MessageDetailsService,
           useValue: { getDetails: mockGetDetails },
         },
+        {
+          provide: MessageFeedbackService,
+          useValue: { setFeedback: mockSetFeedback, clearFeedback: mockClearFeedback },
+        },
       ],
     }).compile();
 
@@ -128,4 +138,33 @@ describe('MessagesController', () => {
 
     expect(result).toEqual(expected);
   });
+
+  it('delegates setFeedback to feedback service', async () => {
+    const user = { id: 'u1' };
+    const body = { rating: 'dislike' as const, tags: ['Slow or buggy'], details: 'test' };
+    await controller.setFeedback('msg-1', body, user as never);
+
+    expect(mockSetFeedback).toHaveBeenCalledWith(
+      'msg-1',
+      'u1',
+      'dislike',
+      ['Slow or buggy'],
+      'test',
+    );
+  });
+
+  it('delegates setFeedback with rating only', async () => {
+    const user = { id: 'u1' };
+    const body = { rating: 'like' as const };
+    await controller.setFeedback('msg-1', body, user as never);
+
+    expect(mockSetFeedback).toHaveBeenCalledWith('msg-1', 'u1', 'like', undefined, undefined);
+  });
+
+  it('delegates clearFeedback to feedback service', async () => {
+    const user = { id: 'u1' };
+    await controller.clearFeedback('msg-1', user as never);
+
+    expect(mockClearFeedback).toHaveBeenCalledWith('msg-1', 'u1');
+  });
 });

packages/backend/src/analytics/controllers/messages.controller.ts

@@ -1,7 +1,19 @@
-import { Controller, Get, Param, Query } from '@nestjs/common';
+import {
+  Controller,
+  Get,
+  Patch,
+  Delete,
+  Param,
+  Query,
+  Body,
+  HttpCode,
+  HttpStatus,
+} from '@nestjs/common';
 import { MessagesQueryDto } from '../dto/messages-query.dto';
+import { MessageFeedbackDto } from '../dto/message-feedback.dto';
 import { MessagesQueryService } from '../services/messages-query.service';
 import { MessageDetailsService } from '../services/message-details.service';
+import { MessageFeedbackService } from '../services/message-feedback.service';
 import { CurrentUser } from '../../auth/current-user.decorator';
 import { AuthUser } from '../../auth/auth.instance';
 
@@ -10,6 +22,7 @@ export class MessagesController {
   constructor(
     private readonly messagesQuery: MessagesQueryService,
     private readonly messageDetails: MessageDetailsService,
+    private readonly messageFeedback: MessageFeedbackService,
   ) {}
 
   @Get('messages')
@@ -31,4 +44,20 @@ export class MessagesController {
   async getMessageDetails(@Param('id') id: string, @CurrentUser() user: AuthUser) {
     return this.messageDetails.getDetails(id, user.id);
   }
+
+  @Patch('messages/:id/feedback')
+  @HttpCode(HttpStatus.NO_CONTENT)
+  async setFeedback(
+    @Param('id') id: string,
+    @Body() body: MessageFeedbackDto,
+    @CurrentUser() user: AuthUser,
+  ) {
+    await this.messageFeedback.setFeedback(id, user.id, body.rating, body.tags, body.details);
+  }
+
+  @Delete('messages/:id/feedback')
+  @HttpCode(HttpStatus.NO_CONTENT)
+  async clearFeedback(@Param('id') id: string, @CurrentUser() user: AuthUser) {
+    await this.messageFeedback.clearFeedback(id, user.id);
+  }
 }

packages/backend/src/analytics/dto/message-feedback.dto.spec.ts

@@ -0,0 +1,70 @@
+import 'reflect-metadata';
+import { validate } from 'class-validator';
+import { plainToInstance } from 'class-transformer';
+import { MessageFeedbackDto } from './message-feedback.dto';
+
+describe('MessageFeedbackDto', () => {
+  it('accepts valid like rating', async () => {
+    const dto = plainToInstance(MessageFeedbackDto, { rating: 'like' });
+    const errors = await validate(dto);
+    expect(errors).toHaveLength(0);
+  });
+
+  it('accepts valid dislike rating with tags and details', async () => {
+    const dto = plainToInstance(MessageFeedbackDto, {
+      rating: 'dislike',
+      tags: ['Too slow', 'Buggy'],
+      details: 'Response was too slow',
+    });
+    const errors = await validate(dto);
+    expect(errors).toHaveLength(0);
+  });
+
+  it('rejects missing rating', async () => {
+    const dto = plainToInstance(MessageFeedbackDto, {});
+    const errors = await validate(dto);
+    expect(errors.length).toBeGreaterThan(0);
+  });
+
+  it('rejects invalid rating value', async () => {
+    const dto = plainToInstance(MessageFeedbackDto, { rating: 'neutral' });
+    const errors = await validate(dto);
+    expect(errors.length).toBeGreaterThan(0);
+  });
+
+  it('allows omitting tags and details', async () => {
+    const dto = plainToInstance(MessageFeedbackDto, { rating: 'dislike' });
+    const errors = await validate(dto);
+    expect(errors).toHaveLength(0);
+  });
+
+  it('rejects non-array tags', async () => {
+    const dto = plainToInstance(MessageFeedbackDto, { rating: 'dislike', tags: 'not-an-array' });
+    const errors = await validate(dto);
+    expect(errors.length).toBeGreaterThan(0);
+  });
+
+  it('rejects non-string tag values', async () => {
+    const dto = plainToInstance(MessageFeedbackDto, { rating: 'dislike', tags: [123] });
+    const errors = await validate(dto);
+    expect(errors.length).toBeGreaterThan(0);
+  });
+
+  it('rejects details exceeding 2000 characters', async () => {
+    const dto = plainToInstance(MessageFeedbackDto, {
+      rating: 'dislike',
+      details: 'x'.repeat(2001),
+    });
+    const errors = await validate(dto);
+    expect(errors.length).toBeGreaterThan(0);
+  });
+
+  it('accepts details at exactly 2000 characters', async () => {
+    const dto = plainToInstance(MessageFeedbackDto, {
+      rating: 'dislike',
+      details: 'x'.repeat(2000),
+    });
+    const errors = await validate(dto);
+    expect(errors).toHaveLength(0);
+  });
+});

packages/backend/src/analytics/dto/message-feedback.dto.ts

@@ -0,0 +1,26 @@
+import { IsIn, IsOptional, IsString, IsArray, MaxLength } from 'class-validator';
+
+export const FEEDBACK_RATINGS = ['like', 'dislike'] as const;
+
+export const FEEDBACK_TAGS = [
+  'Not expected tier',
+  'Poor answer quality',
+  'Too slow',
+  'Buggy',
+  'Other',
+] as const;
+
+export class MessageFeedbackDto {
+  @IsIn(FEEDBACK_RATINGS)
+  rating!: 'like' | 'dislike';
+
+  @IsOptional()
+  @IsArray()
+  @IsString({ each: true })
+  tags?: string[];
+
+  @IsOptional()
+  @IsString()
+  @MaxLength(2000)
+  details?: string;
+}

packages/backend/src/analytics/services/message-details.service.spec.ts

@@ -55,6 +55,9 @@ describe('MessageDetailsService', () => {
     fallback_index: null,
     session_key: 'sess-001',
     user_id: 'u1',
+    feedback_rating: null,
+    feedback_tags: null,
+    feedback_details: null,
   };
 
   beforeEach(async () => {
@@ -232,9 +235,28 @@ describe('MessageDetailsService', () => {
       fallback_from_model: null,
       fallback_index: null,
       session_key: 'sess-001',
+      feedback_rating: null,
+      feedback_tags: null,
+      feedback_details: null,
     });
   });
 
+  it('splits feedback_tags into an array when present', async () => {
+    const msgWithFeedback = {
+      ...baseMessage,
+      feedback_rating: 'dislike',
+      feedback_tags: 'Too slow,Buggy',
+      feedback_details: 'Response was slow',
+    };
+    msgQb.getOne.mockResolvedValue(msgWithFeedback);
+
+    const result = await service.getDetails('msg-1', 'u1');
+
+    expect(result.message.feedback_rating).toBe('dislike');
+    expect(result.message.feedback_tags).toEqual(['Too slow', 'Buggy']);
+    expect(result.message.feedback_details).toBe('Response was slow');
+  });
+
   it('returns error message details for failed messages', async () => {
     const errorMsg = {
       ...baseMessage,

packages/backend/src/analytics/services/message-details.service.ts

@@ -33,6 +33,9 @@ export interface MessageDetailResponse {
     fallback_from_model: string | null;
     fallback_index: number | null;
     session_key: string | null;
+    feedback_rating: string | null;
+    feedback_tags: string[] | null;
+    feedback_details: string | null;
   };
   llm_calls: {
     id: string;
@@ -149,6 +152,9 @@ export class MessageDetailsService {
         fallback_from_model: message.fallback_from_model,
         fallback_index: message.fallback_index,
         session_key: message.session_key,
+        feedback_rating: message.feedback_rating,
+        feedback_tags: message.feedback_tags ? message.feedback_tags.split(',') : null,
+        feedback_details: message.feedback_details,
       },
       llm_calls: llmCalls.map((lc) => ({
         id: lc.id,