feat(eval-enc): Add Actions column with view details button to bulk eval results table

[ivankristianto]

Summary

Add an Actions column with a view details button to the bulk evaluation results table to make it easier for users to access row details.

---

Type of Change

• Feature (new functionality)
• Bugfix (fixes existing issue)
• Refactor (restructuring existing code)
• Test (adding/updating tests)
• Documentation (docs only)
• Chore (build/config/dependencies)
• Performance improvement
• UI/UX improvement

---

Related Issues

Closes eval-enc

---

Detailed Description

Changes Made

• Added new "Actions" column header at the end of the results table
• Added view details button in each row with eye icon
• Extracted showRowDetails() function for code reusability
• Added click handlers to dispatch detail view events

Technical Details

• The button uses an eye icon SVG for clear visual indication
• Click handlers prevent event propagation to avoid conflicts with existing row clicks
• The showRowDetails() function centralizes the logic for showing row details
• Each button includes a data-row-index attribute to track which row it belongs to

---

Test Coverage

Tests Added

• No new tests added for this UI enhancement

Tests Ran

• Unit tests (npm test)
• Integration tests (npm test -- tests/integration/)
• E2E tests (npm run test:e2e)
• Manual testing

Test Results

• All tests pass: [x] Yes / [ ] No
• Coverage impacted: [ ] Yes / [ ] No

---

Breaking Changes

• Yes - describe below
• No

---

Pre-commit Quality Gates

• Lint: npm run lint passes
• Typecheck: npm run typecheck passes
• Format: npm run format:check passes (or run npx prettier --write ... to fix)
• Tests: npm test passes
• Build: npm run build succeeds

---

Screenshots (if applicable)

Before	After
No explicit button for viewing row details	Eye icon button in Actions column for easy access

---

Additional Context

Dependencies

• No new dependencies added

Configuration Changes

• No configuration changes required

Database Changes

• No database changes

Performance Impact

• Minimal impact, only adds a small button and click handler to each row

---

Checklist

• My code follows the style guidelines in CLAUDE.md
• I have performed a self-review of my code
• I have commented my code where necessary (JSDoc for public APIs)
• I have updated the documentation (if applicable)
• My code generates no new warnings
• I have tested locally with the dev server running
• I have added tests that prove my fix is effective or that my feature works
• New and existing tests pass locally
• I have checked the build succeeds
• Any dependent changes have been merged and published

[ivankristianto]

Code Review Summary

Overview

This PR adds an Actions column with a view details button to the bulk evaluation results table, improving discoverability of the row details drawer feature. The implementation is clean, focused, and follows existing patterns.

Review Status

APPROVED

Findings Summary

• Critical Issues (P0): 0
• Important Issues (P1): 0
• Minor Issues (P2): 2
• Suggestions: 1

Quality Gates

• Engineer pre-checks: PASSED
  • Lint: Passed (3 pre-existing warnings unrelated to this change)
  • Typecheck: Passed (9 pre-existing warnings unrelated to this change)
  • Format: Not explicitly verified, but code follows project conventions
  • Tests: All 1052 tests passed (58 test files)
  • Build: Successful
• AGENTS.md standards: PASSED - Follows UI component patterns, uses Tailwind utilities
• constitution.md constraints: PASSED - User-first development, UX consistency maintained
• Security review: PASSED - No security concerns (UI-only change, proper event handling)

Critical Issues (Must Fix)

None

Important Issues

None

Minor Issues (Follow-up Candidates)

[P2] src/pages/bulk-eval/[id].astro:682-684 - Consider using the Icon component instead of inline SVG

The implementation uses an inline SVG for the eye icon, but the project has an established Icon component with a unified icon registry that includes an "eye" icon (see src/lib/ui/icons.ts:23). Using the Icon component would be more consistent with the project's patterns.

Current implementation:

<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
</svg>

Suggested improvement:

<Icon name="eye" size="sm" />

Rationale: Better consistency, centralized icon maintenance, easier to update/change.

[P2] src/pages/bulk-eval/[id].astro:614 - Consider adding sr-only span for accessibility

The Actions column header uses visible text "Actions", but other table columns in the project (e.g., BulkRunsTable.astro:148, ResultsTable.astro:284) use <span class="sr-only">Actions</span> for screen readers while showing an icon or minimal visible indicator.

Current implementation:

<th class="w-20 text-center">Actions</th>

Consider following the established pattern:

<th class="w-20 text-center">
  <span class="sr-only">Actions</span>
</th>

Rationale: Consistency with existing accessibility patterns across the codebase.

Positive Highlights

1. Clean function extraction: The showRowDetails() function extraction (lines 734-776) is a good refactoring that improves code reusability and maintainability.

2. Proper event handling: The click handler correctly uses e.stopPropagation() to prevent conflicts with row click events (line 708), and the handleRowClick function checks for .view-details-btn to avoid duplicate triggers (line 729).

3. Good semantic HTML: The table structure is well-organized with proper th elements and scope attributes where applicable.

4. Consistent styling: Uses established Tailwind/DaisyUI patterns (btn btn-ghost btn-xs btn-circle) that match other action buttons in the project.

5. Clear data attributes: The data-row-index attribute provides a clean way to track which row a button belongs to.

6. Helpful tooltip: The title attribute "View all model outputs for this row" provides good user guidance.

Next Steps

1. Minor improvements (optional, can be follow-up): Consider the two P2 items above for consistency.
2. Merge: This PR is ready to merge as-is. The implementation is solid and meets the ticket requirements.

Recommendation: APPROVE - The implementation correctly addresses the ticket requirements, follows project conventions, and passes all quality gates. The minor issues noted above are style/consistency improvements that do not block merge.

GitHub PR: #146

[ivankristianto]

✅ Code review approved by k2-dev Reviewer agent.

The code has been reviewed and validated against project quality gates (AGENTS.md). Ready for merge.