Feature requests

[timothyfroehlich]

Good triage view

Full set of statuses from the spreadsheet
Issue filter by date reported, modified, etc.
Image uploads

Type in names for Owners

Names not showing for new accounts reporting issues
Report issue behave different if you're logged in
Report issue for public - name and email

Manage owners who don't have accounts yet.
Recent issues displayed while reporting an issue.

[traycerai]

Plan

Observations

The PinPoint application is a Next.js-based issue tracking system for pinball machines using Supabase and Drizzle ORM. Currently, it has basic issue management with limited statuses (new, in_progress, resolved), no date filtering, no image uploads, and limited owner management. The public reporting flow lacks name/email capture, and there's no triage view or recent issues display during reporting.

Approach

The implementation will be structured around extending the existing architecture without major refactoring. Each feature will build upon current patterns: extending database schema for new fields, enhancing existing components for UI improvements, and adding new server actions for business logic. The plan prioritizes database changes first, followed by backend services, then UI components, maintaining the existing separation of concerns.

Implementation Plan

1. Extended Issue Status System

Database Schema Changes (file:src/server/db/schema.ts)

Update the issues table status enum to include the full set of statuses from the spreadsheet. The current enum only has ["new", "in_progress", "resolved"] and needs expansion to support a complete workflow.

• Extend the status enum in the issues table definition (line 102) to include additional statuses such as: "open", "acknowledged", "assigned", "in_review", "blocked", "closed", "wont_fix", "duplicate" (adjust based on actual spreadsheet requirements)
• Update the tablesFilter array in file:drizzle.config.ts if needed
• Create a migration to update existing data

Type Definitions (file:src/lib/issues/status.ts)

• Update the IssueStatus type (line 3) to include all new status values
• Update isIssueStatus type guard (line 10) to validate new statuses
• Extend getIssueStatusLabel function (line 31) with labels for new statuses
• Add new color schemes in getIssueStatusStyles (line 56) for each status

Schema Validation (file:src/app/(app)/issues/schemas.ts)

• Update updateIssueStatusSchema (line 49) to include all new status values in the enum

UI Components

• Update file:src/app/(app)/m/[initials]/i/[issueNumber]/update-issue-status-form.tsx to display all status options
• Modify file:src/components/issues/IssueFilters.tsx to support filtering by specific statuses instead of just "Open/Closed" toggle
• Update file:src/components/issues/IssueRow.tsx to handle new status icons and colors

2. Date-Based Issue Filtering

Filter Schema Extension (file:src/lib/issues/queries.ts)

Extend the IssueFilters interface (line 7) to include date range filters:

• Add createdAfter?: Date | string
• Add createdBefore?: Date | string
• Add updatedAfter?: Date | string
• Add updatedBefore?: Date | string

Update the getIssues function (line 15) to apply date filters using Drizzle's gte, lte operators on issues.createdAt and issues.updatedAt columns.

UI Filter Component (file:src/components/issues/IssueFilters.tsx)

Add date picker inputs to the filter bar:

• Import date picker component from file:src/components/ui/ (or install a date picker library like react-day-picker if not present)
• Add "Date Reported" filter with from/to date inputs
• Add "Last Modified" filter with from/to date inputs
• Update updateFilter function (line 40) to handle date parameters
• Ensure date values are properly serialized in URL search params

Page Integration (file:src/app/(app)/issues/page.tsx)

• Extract date filter parameters from searchParams (line 39)
• Pass date filters to the issues query
• Update the filter display to show active date filters

3. Image Upload Functionality

Database Schema (file:src/server/db/schema.ts)

Create a new issueAttachments table:

• id: UUID primary key
• issueId: UUID foreign key to issues table with cascade delete
• fileName: text (original filename)
• fileSize: integer (bytes)
• mimeType: text (image/jpeg, image/png, etc.)
• storageUrl: text (Supabase storage URL or path)
• uploadedBy: UUID nullable foreign key to userProfiles
• createdAt: timestamp with timezone
• Add relations to issues and userProfiles
• Remember to update tablesFilter in file:drizzle.config.ts

Supabase Storage Setup

Create a storage bucket configuration:

• Set up a new storage bucket named "issue-attachments" in Supabase dashboard
• Configure RLS policies for the bucket to allow authenticated users to upload and public read access
• Set file size limits (e.g., 5MB per image)
• Restrict to image MIME types only

Upload Utility (Create file:src/lib/storage/uploads.ts)

Implement image upload functions:

• uploadIssueImage(file: File, issueId: string, userId: string | null): Upload to Supabase storage and create database record
• deleteIssueImage(attachmentId: string): Remove from storage and database
• getIssueImages(issueId: string): Fetch all attachments for an issue
• Handle file validation (size, type, dimensions)
• Generate unique filenames to prevent collisions

Server Actions (file:src/app/(app)/issues/actions.ts)

Add new server actions:

• uploadIssueImageAction: Handle form data with file upload
• deleteIssueImageAction: Remove attachment with permission checks
• Integrate with existing permission system using canUpdateIssue

UI Components

Create file:src/components/issues/ImageUpload.tsx:

• File input with drag-and-drop support
• Image preview before upload
• Progress indicator during upload
• Display uploaded images with delete option
• Thumbnail grid for multiple images

Update file:src/app/(app)/m/[initials]/report/create-issue-form.tsx:

• Add image upload section to the form
• Handle multiple file selection
• Show upload progress and errors

Update file:src/components/issues/AddCommentForm.tsx:

• Add optional image attachment to comments

Update issue detail page (file:src/app/(app)/m/[initials]/i/[issueNumber]/page.tsx):

• Display attached images in a gallery
• Allow lightbox/modal view for full-size images

4. Type-in Names for Owners

Database Schema (file:src/server/db/schema.ts)

Add support for non-user owners:

• Add ownerName text field to machines table (nullable)
• Keep existing ownerId field for user references
• Add check constraint: at least one of ownerId or ownerName must be set
• Add assignedToName text field to issues table (nullable) for similar functionality

Owner Selection Component (Update file:src/components/machines/OwnerSelect.tsx)

Transform into a combo box that supports both selection and free text:

• Replace simple Select with a Combobox component
• Show existing users in dropdown
• Allow typing custom names that aren't in the user list
• Store user ID if selected from list, otherwise store custom name
• Add visual distinction between user accounts and custom names

Assignee Picker (Update file:src/components/issues/AssigneePicker.tsx)

Enhance to support custom names:

• Add "Add custom name" option in the dropdown
• Show modal/inline input for entering custom assignee name
• Display custom names with different styling (e.g., no avatar, different icon)
• Update the component props to handle both assignedToId and assignedToName

Service Layer (file:src/services/issues.ts)

Update assignIssue function (around line 410):

• Accept either assignedToId or assignedToName
• Update timeline events to handle custom names
• Modify notification logic to skip email for custom names

5. Public Report Flow Enhancements

Database Schema (file:src/server/db/schema.ts)

Extend issues table:

• Add reporterName text field (nullable) for public reporters
• Add reporterEmail text field (nullable) for public reporters
• Keep existing reportedBy UUID field for authenticated users

Public Report Schema (file:src/app/report/schemas.ts)

Update publicIssueSchema (line 3):

• Add reporterName field: optional string, max 100 characters
• Add reporterEmail field: optional email validation
• Make at least one contact method recommended but not required

Public Report Page (file:src/app/report/page.tsx)

Add name and email fields:

• Add "Your Name" input field (optional)
• Add "Your Email" input field (optional) with email validation
• Add help text: "Optional: Provide your contact info if you'd like updates"
• Update form submission to include these fields

Public Report Action (file:src/app/report/actions.ts)

Update submitPublicIssueAction (line 28):

• Extract reporterName and reporterEmail from form data
• Pass to createIssue service function
• Store in database

Service Layer (file:src/services/issues.ts)

Update createIssue function:

• Accept reporterName and reporterEmail parameters
• Store in database when provided
• Update notification logic to use reporter email if provided

6. Authenticated vs Public Report Behavior

Authenticated Report Flow (file:src/app/(app)/m/[initials]/report/page.tsx)

Enhance the authenticated experience:

• Pre-fill reporter information from user profile
• Show user's previously reported issues for this machine
• Add "Watch this issue" checkbox (auto-enabled by default)
• Show priority field (currently only in authenticated form)
• Allow setting initial assignee if user has permissions

Public Report Flow (file:src/app/report/page.tsx)

Simplify for anonymous users:

• Remove priority field (default to "low")
• Add clear messaging about account benefits
• Show success page with issue tracking number
• Provide link to create account to track the issue

Conditional Logic

Create file:src/lib/issues/report-helpers.ts:

• getReportDefaults(user: User | null): Return different defaults based on auth status
• canSetPriority(user: User | null): Permission check
• shouldAutoWatch(user: User | null): Auto-watch logic

7. Recent Issues Display During Reporting

Query Function (file:src/lib/issues/queries.ts)

Add new query function:

• getRecentIssuesForMachine(machineInitials: string, limit: number = 5): Fetch recent issues for a specific machine
• Order by createdAt descending
• Include only open issues (status not "resolved" or "closed")
• Return minimal fields: title, issueNumber, status, createdAt

Authenticated Report Page (file:src/app/(app)/m/[initials]/report/page.tsx)

Add recent issues section:

• Fetch recent issues for the machine
• Display in a sidebar or below the form
• Show issue number, title, and status
• Add "This is the same issue" button to link/comment instead of creating duplicate
• Include link to view full issue details

Public Report Page (file:src/app/report/page.tsx)

Add similar recent issues display:

• Show after machine selection
• Update dynamically when machine changes (client-side component)
• Display with less detail than authenticated view
• Add message: "Check if your issue is already reported"

Component (Create file:src/components/issues/RecentIssuesList.tsx)

Reusable component for displaying recent issues:

• Accept machine initials and issue list as props
• Render compact issue cards
• Include status badges
• Add "Report anyway" and "View issue" actions

8. Triage View Implementation

New Page (Create file:src/app/(app)/issues/triage/page.tsx)

Create dedicated triage interface:

• Fetch all open issues with priority sorting
• Group by severity or priority
• Show critical/high priority issues at top
• Include bulk action capabilities
• Add keyboard shortcuts for quick triage

Triage Component (Create file:src/components/issues/TriageView.tsx)

Build specialized triage UI:

• Card-based layout with issue details
• Quick action buttons: Assign, Change Status, Set Priority
• Inline editing for common fields
• Drag-and-drop for priority reordering
• Filters for machine, severity, assignee
• Show issue age and last activity

Bulk Actions (Create file:src/app/(app)/issues/triage/actions.ts)

Implement batch operations:

• bulkAssignIssues(issueIds: string[], assigneeId: string)
• bulkUpdateStatus(issueIds: string[], status: IssueStatus)
• bulkUpdatePriority(issueIds: string[], priority: IssuePriority)
• Add transaction support for atomic updates

Navigation

Update main navigation to include triage view:

• Add "Triage" link in file:src/app/(app)/layout.tsx
• Show badge with count of untriaged issues
• Restrict access to members/admins only

9. Names Display for New Accounts

Issue Display (file:src/components/issues/IssueRow.tsx)

Update reporter name display (line 90):

• Check for reporterName field first
• Fall back to reportedByUser?.name
• Show "Anonymous" if neither exists
• Add tooltip showing email if available for public reports

Issue Detail Page (file:src/app/(app)/m/[initials]/i/[issueNumber]/page.tsx)

Enhance reporter information display:

• Show full reporter details (name, email if available)
• Distinguish between authenticated users and public reporters
• For authenticated users, link to their profile
• For public reporters, show contact info if provided

Timeline Events (file:src/lib/timeline/events.ts)

Update timeline event generation:

• Use reporterName or user name in "Issue created" events
• Handle null reporters gracefully
• Show appropriate attribution for all actions

Implementation Sequence

graph TD
    A[1. Database Schema Updates] --> B[2. Status System Extension]
    A --> C[3. Image Upload Infrastructure]
    A --> D[4. Owner Name Fields]
    
    B --> E[5. Date Filtering]
    C --> F[6. Image Upload UI]
    D --> G[7. Owner/Assignee UI]
    
    E --> H[8. Triage View]
    F --> I[9. Report Flow Updates]
    G --> I
    
    I --> J[10. Recent Issues Display]
    I --> K[11. Public vs Auth Behavior]
    
    H --> L[12. Testing & Polish]
    J --> L
    K --> L

Loading

Database Migration Strategy

1. Create migration file in file:drizzle/ directory
2. Add new columns as nullable first to avoid breaking existing data
3. Backfill data where appropriate
4. Add constraints after data migration
5. Update file:drizzle.config.ts tablesFilter for new tables
6. Run npm run db:push to apply changes
7. Update seed data in test files

Testing Considerations

Unit Tests

• Update file:src/lib/issues/status.test.ts for new statuses
• Add tests for date filtering in file:src/lib/issues/queries.test.ts
• Test image upload utilities
• Test owner name validation

Integration Tests

• Update file:src/test/integration/supabase/issues.test.ts for new fields
• Add tests for public report with name/email
• Test image upload and storage integration

E2E Tests

• Update file:e2e/smoke/issues-crud.spec.ts for new workflows
• Add triage view navigation tests
• Test public vs authenticated report flows
• Test image upload in issue creation

Configuration Files to Update

File	Changes
file:drizzle.config.ts	Add new tables to tablesFilter
file:src/server/db/schema.ts	All schema changes
file:package.json	Add image processing libraries if needed
file:.env.example	Add Supabase storage bucket config

Import In IDE

🤖 Prompt for AI Agents

## Observations

The PinPoint application is a Next.js-based issue tracking system for pinball machines using Supabase and Drizzle ORM. Currently, it has basic issue management with limited statuses (new, in_progress, resolved), no date filtering, no image uploads, and limited owner management. The public reporting flow lacks name/email capture, and there's no triage view or recent issues display during reporting.

## Approach

The implementation will be structured around extending the existing architecture without major refactoring. Each feature will build upon current patterns: extending database schema for new fields, enhancing existing components for UI improvements, and adding new server actions for business logic. The plan prioritizes database changes first, followed by backend services, then UI components, maintaining the existing separation of concerns.

## Implementation Plan

### 1. Extended Issue Status System

**Database Schema Changes** (`file:src/server/db/schema.ts`)

Update the `issues` table status enum to include the full set of statuses from the spreadsheet. The current enum only has `["new", "in_progress", "resolved"]` and needs expansion to support a complete workflow.

- Extend the status enum in the issues table definition (line 102) to include additional statuses such as: `"open"`, `"acknowledged"`, `"assigned"`, `"in_review"`, `"blocked"`, `"closed"`, `"wont_fix"`, `"duplicate"` (adjust based on actual spreadsheet requirements)
- Update the `tablesFilter` array in `file:drizzle.config.ts` if needed
- Create a migration to update existing data

**Type Definitions** (`file:src/lib/issues/status.ts`)

- Update the `IssueStatus` type (line 3) to include all new status values
- Update `isIssueStatus` type guard (line 10) to validate new statuses
- Extend `getIssueStatusLabel` function (line 31) with labels for new statuses
- Add new color schemes in `getIssueStatusStyles` (line 56) for each status

**Schema Validation** (`file:src/app/(app)/issues/schemas.ts`)

- Update `updateIssueStatusSchema` (line 49) to include all new status values in the enum

**UI Components**

- Update `file:src/app/(app)/m/[initials]/i/[issueNumber]/update-issue-status-form.tsx` to display all status options
- Modify `file:src/components/issues/IssueFilters.tsx` to support filtering by specific statuses instead of just "Open/Closed" toggle
- Update `file:src/components/issues/IssueRow.tsx` to handle new status icons and colors

### 2. Date-Based Issue Filtering

**Filter Schema Extension** (`file:src/lib/issues/queries.ts`)

Extend the `IssueFilters` interface (line 7) to include date range filters:
- Add `createdAfter?: Date | string`
- Add `createdBefore?: Date | string`
- Add `updatedAfter?: Date | string`
- Add `updatedBefore?: Date | string`

Update the `getIssues` function (line 15) to apply date filters using Drizzle's `gte`, `lte` operators on `issues.createdAt` and `issues.updatedAt` columns.

**UI Filter Component** (`file:src/components/issues/IssueFilters.tsx`)

Add date picker inputs to the filter bar:
- Import date picker component from `file:src/components/ui/` (or install a date picker library like `react-day-picker` if not present)
- Add "Date Reported" filter with from/to date inputs
- Add "Last Modified" filter with from/to date inputs
- Update `updateFilter` function (line 40) to handle date parameters
- Ensure date values are properly serialized in URL search params

**Page Integration** (`file:src/app/(app)/issues/page.tsx`)

- Extract date filter parameters from searchParams (line 39)
- Pass date filters to the issues query
- Update the filter display to show active date filters

### 3. Image Upload Functionality

**Database Schema** (`file:src/server/db/schema.ts`)

Create a new `issueAttachments` table:
- `id`: UUID primary key
- `issueId`: UUID foreign key to issues table with cascade delete
- `fileName`: text (original filename)
- `fileSize`: integer (bytes)
- `mimeType`: text (image/jpeg, image/png, etc.)
- `storageUrl`: text (Supabase storage URL or path)
- `uploadedBy`: UUID nullable foreign key to userProfiles
- `createdAt`: timestamp with timezone
- Add relations to issues and userProfiles
- Remember to update `tablesFilter` in `file:drizzle.config.ts`

**Supabase Storage Setup**

Create a storage bucket configuration:
- Set up a new storage bucket named "issue-attachments" in Supabase dashboard
- Configure RLS policies for the bucket to allow authenticated users to upload and public read access
- Set file size limits (e.g., 5MB per image)
- Restrict to image MIME types only

**Upload Utility** (Create `file:src/lib/storage/uploads.ts`)

Implement image upload functions:
- `uploadIssueImage(file: File, issueId: string, userId: string | null)`: Upload to Supabase storage and create database record
- `deleteIssueImage(attachmentId: string)`: Remove from storage and database
- `getIssueImages(issueId: string)`: Fetch all attachments for an issue
- Handle file validation (size, type, dimensions)
- Generate unique filenames to prevent collisions

**Server Actions** (`file:src/app/(app)/issues/actions.ts`)

Add new server actions:
- `uploadIssueImageAction`: Handle form data with file upload
- `deleteIssueImageAction`: Remove attachment with permission checks
- Integrate with existing permission system using `canUpdateIssue`

**UI Components**

Create `file:src/components/issues/ImageUpload.tsx`:
- File input with drag-and-drop support
- Image preview before upload
- Progress indicator during upload
- Display uploaded images with delete option
- Thumbnail grid for multiple images

Update `file:src/app/(app)/m/[initials]/report/create-issue-form.tsx`:
- Add image upload section to the form
- Handle multiple file selection
- Show upload progress and errors

Update `file:src/components/issues/AddCommentForm.tsx`:
- Add optional image attachment to comments

Update issue detail page (`file:src/app/(app)/m/[initials]/i/[issueNumber]/page.tsx`):
- Display attached images in a gallery
- Allow lightbox/modal view for full-size images

### 4. Type-in Names for Owners

**Database Schema** (`file:src/server/db/schema.ts`)

Add support for non-user owners:
- Add `ownerName` text field to `machines` table (nullable)
- Keep existing `ownerId` field for user references
- Add check constraint: at least one of `ownerId` or `ownerName` must be set
- Add `assignedToName` text field to `issues` table (nullable) for similar functionality

**Owner Selection Component** (Update `file:src/components/machines/OwnerSelect.tsx`)

Transform into a combo box that supports both selection and free text:
- Replace simple Select with a Combobox component
- Show existing users in dropdown
- Allow typing custom names that aren't in the user list
- Store user ID if selected from list, otherwise store custom name
- Add visual distinction between user accounts and custom names

**Assignee Picker** (Update `file:src/components/issues/AssigneePicker.tsx`)

Enhance to support custom names:
- Add "Add custom name" option in the dropdown
- Show modal/inline input for entering custom assignee name
- Display custom names with different styling (e.g., no avatar, different icon)
- Update the component props to handle both `assignedToId` and `assignedToName`

**Service Layer** (`file:src/services/issues.ts`)

Update `assignIssue` function (around line 410):
- Accept either `assignedToId` or `assignedToName`
- Update timeline events to handle custom names
- Modify notification logic to skip email for custom names

### 5. Public Report Flow Enhancements

**Database Schema** (`file:src/server/db/schema.ts`)

Extend issues table:
- Add `reporterName` text field (nullable) for public reporters
- Add `reporterEmail` text field (nullable) for public reporters
- Keep existing `reportedBy` UUID field for authenticated users

**Public Report Schema** (`file:src/app/report/schemas.ts`)

Update `publicIssueSchema` (line 3):
- Add `reporterName` field: optional string, max 100 characters
- Add `reporterEmail` field: optional email validation
- Make at least one contact method recommended but not required

**Public Report Page** (`file:src/app/report/page.tsx`)

Add name and email fields:
- Add "Your Name" input field (optional)
- Add "Your Email" input field (optional) with email validation
- Add help text: "Optional: Provide your contact info if you'd like updates"
- Update form submission to include these fields

**Public Report Action** (`file:src/app/report/actions.ts`)

Update `submitPublicIssueAction` (line 28):
- Extract `reporterName` and `reporterEmail` from form data
- Pass to `createIssue` service function
- Store in database

**Service Layer** (`file:src/services/issues.ts`)

Update `createIssue` function:
- Accept `reporterName` and `reporterEmail` parameters
- Store in database when provided
- Update notification logic to use reporter email if provided

### 6. Authenticated vs Public Report Behavior

**Authenticated Report Flow** (`file:src/app/(app)/m/[initials]/report/page.tsx`)

Enhance the authenticated experience:
- Pre-fill reporter information from user profile
- Show user's previously reported issues for this machine
- Add "Watch this issue" checkbox (auto-enabled by default)
- Show priority field (currently only in authenticated form)
- Allow setting initial assignee if user has permissions

**Public Report Flow** (`file:src/app/report/page.tsx`)

Simplify for anonymous users:
- Remove priority field (default to "low")
- Add clear messaging about account benefits
- Show success page with issue tracking number
- Provide link to create account to track the issue

**Conditional Logic**

Create `file:src/lib/issues/report-helpers.ts`:
- `getReportDefaults(user: User | null)`: Return different defaults based on auth status
- `canSetPriority(user: User | null)`: Permission check
- `shouldAutoWatch(user: User | null)`: Auto-watch logic

### 7. Recent Issues Display During Reporting

**Query Function** (`file:src/lib/issues/queries.ts`)

Add new query function:
- `getRecentIssuesForMachine(machineInitials: string, limit: number = 5)`: Fetch recent issues for a specific machine
- Order by `createdAt` descending
- Include only open issues (status not "resolved" or "closed")
- Return minimal fields: title, issueNumber, status, createdAt

**Authenticated Report Page** (`file:src/app/(app)/m/[initials]/report/page.tsx`)

Add recent issues section:
- Fetch recent issues for the machine
- Display in a sidebar or below the form
- Show issue number, title, and status
- Add "This is the same issue" button to link/comment instead of creating duplicate
- Include link to view full issue details

**Public Report Page** (`file:src/app/report/page.tsx`)

Add similar recent issues display:
- Show after machine selection
- Update dynamically when machine changes (client-side component)
- Display with less detail than authenticated view
- Add message: "Check if your issue is already reported"

**Component** (Create `file:src/components/issues/RecentIssuesList.tsx`)

Reusable component for displaying recent issues:
- Accept machine initials and issue list as props
- Render compact issue cards
- Include status badges
- Add "Report anyway" and "View issue" actions

### 8. Triage View Implementation

**New Page** (Create `file:src/app/(app)/issues/triage/page.tsx`)

Create dedicated triage interface:
- Fetch all open issues with priority sorting
- Group by severity or priority
- Show critical/high priority issues at top
- Include bulk action capabilities
- Add keyboard shortcuts for quick triage

**Triage Component** (Create `file:src/components/issues/TriageView.tsx`)

Build specialized triage UI:
- Card-based layout with issue details
- Quick action buttons: Assign, Change Status, Set Priority
- Inline editing for common fields
- Drag-and-drop for priority reordering
- Filters for machine, severity, assignee
- Show issue age and last activity

**Bulk Actions** (Create `file:src/app/(app)/issues/triage/actions.ts`)

Implement batch operations:
- `bulkAssignIssues(issueIds: string[], assigneeId: string)`
- `bulkUpdateStatus(issueIds: string[], status: IssueStatus)`
- `bulkUpdatePriority(issueIds: string[], priority: IssuePriority)`
- Add transaction support for atomic updates

**Navigation**

Update main navigation to include triage view:
- Add "Triage" link in `file:src/app/(app)/layout.tsx`
- Show badge with count of untriaged issues
- Restrict access to members/admins only

### 9. Names Display for New Accounts

**Issue Display** (`file:src/components/issues/IssueRow.tsx`)

Update reporter name display (line 90):
- Check for `reporterName` field first
- Fall back to `reportedByUser?.name`
- Show "Anonymous" if neither exists
- Add tooltip showing email if available for public reports

**Issue Detail Page** (`file:src/app/(app)/m/[initials]/i/[issueNumber]/page.tsx`)

Enhance reporter information display:
- Show full reporter details (name, email if available)
- Distinguish between authenticated users and public reporters
- For authenticated users, link to their profile
- For public reporters, show contact info if provided

**Timeline Events** (`file:src/lib/timeline/events.ts`)

Update timeline event generation:
- Use `reporterName` or user name in "Issue created" events
- Handle null reporters gracefully
- Show appropriate attribution for all actions

### Implementation Sequence

```mermaid
graph TD
    A[1. Database Schema Updates] --> B[2. Status System Extension]
    A --> C[3. Image Upload Infrastructure]
    A --> D[4. Owner Name Fields]
    
    B --> E[5. Date Filtering]
    C --> F[6. Image Upload UI]
    D --> G[7. Owner/Assignee UI]
    
    E --> H[8. Triage View]
    F --> I[9. Report Flow Updates]
    G --> I
    
    I --> J[10. Recent Issues Display]
    I --> K[11. Public vs Auth Behavior]
    
    H --> L[12. Testing & Polish]
    J --> L
    K --> L
```

### Database Migration Strategy

1. Create migration file in `file:drizzle/` directory
2. Add new columns as nullable first to avoid breaking existing data
3. Backfill data where appropriate
4. Add constraints after data migration
5. Update `file:drizzle.config.ts` tablesFilter for new tables
6. Run `npm run db:push` to apply changes
7. Update seed data in test files

### Testing Considerations

**Unit Tests**
- Update `file:src/lib/issues/status.test.ts` for new statuses
- Add tests for date filtering in `file:src/lib/issues/queries.test.ts`
- Test image upload utilities
- Test owner name validation

**Integration Tests**
- Update `file:src/test/integration/supabase/issues.test.ts` for new fields
- Add tests for public report with name/email
- Test image upload and storage integration

**E2E Tests**
- Update `file:e2e/smoke/issues-crud.spec.ts` for new workflows
- Add triage view navigation tests
- Test public vs authenticated report flows
- Test image upload in issue creation

### Configuration Files to Update

| File | Changes |
|------|---------|
| `file:drizzle.config.ts` | Add new tables to tablesFilter |
| `file:src/server/db/schema.ts` | All schema changes |
| `file:package.json` | Add image processing libraries if needed |
| `file:.env.example` | Add Supabase storage bucket config |

---

Execution Information

Branch: main
Commit: 5a6d2e3

---

💡 Tips

Supported Commands (Inside Comments)

• Use @traycerai generate to iterate on the previous version of the implementation plan.

Supported Commands (Inside Description)

• Add @traycerai ignore anywhere in the ticket description to prevent this ticket from being processed.
• Add @traycerai branch:<branch-name> anywhere in the ticket description to specify the target branch for the implementation plan.

Community

• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[timothyfroehlich]

9/10 features fully implemented. Only remaining gap is typeahead search on owner dropdown (tracked separately). —Claude