feat: clean up task list in HistoryPreview and History components

[roomote]

This PR cleans up the task list display in HistoryPreview and History components based on the Slack request. This naturally comes at a cost of less information always available, but everything that's been hidden is still available in the task header, just less prominent.

Changes Made

UI Improvements

• Removed metadata from task footer: Removed tokens, cache, and size information - now only shows cost
• Moved datetime to footer: Datetime now appears below the task text (left side) with time-ago formatting (e.g., "2 hours ago")
• Increased text visibility: Task text now shows up to 3 lines (increased from 2 for compact variant)
• More tasks in preview: HistoryPreview now displays up to 5 tasks (increased from 3)
• Added hover effect: Task items now have a subtle background color change on hover for better interactivity

Technical Details

• Added formatTimeAgo function using the existing date-fns library for relative time formatting
• Updated TaskItemFooter component to show only datetime and cost
• Updated TaskItemHeader component to only show delete button when needed
• Updated TaskItem component with new hover styles and 3-line text display
• Updated all related tests to match the new component structure

Testing

• All component tests have been updated and are passing
• Type checking passes
• Linting passes

Screenshots

The task list now has a cleaner, more focused appearance with:

• Task text (up to 3 lines)
• Time ago format below the text
• Cost on the same line as the time
• Copy button remains accessible

Before

After

---

Important

Enhances task list UI in HistoryPreview and History components, adds formatTimeAgo function, and updates tests and translations.

• UI Improvements:
  • Removed metadata from task footer, now only shows cost.
  • Moved datetime to footer with time-ago formatting.
  • Increased task text visibility to 3 lines in TaskItem.
  • HistoryPreview now shows up to 5 tasks.
  • Added hover effect to task items.
• Technical Details:
  • Added formatTimeAgo function in format.ts for relative time formatting.
  • Updated TaskItemFooter to show only datetime and cost.
  • Removed TaskItemHeader component.
  • Updated TaskItem with new hover styles and 3-line text display.
  • Updated tests in TaskItem.spec.tsx and TaskItemFooter.spec.tsx.
• Translations:
  • Added time-ago translations in multiple locale files.

^{This description was created by for 8f54d78. You can customize this summary. It will automatically update as commits are pushed.}

[roomote]

Reviewing my own code is like debugging in production - technically possible but morally questionable.

[roomote]

Is this intentional? The function doesn't use locale configuration like does above. This means the time-ago text will always display in English regardless of the user's language setting. Consider passing locale configuration to :

[brunobergher]

Out of scope for this PR.

[mrubens]

I’d love to avoid English showing up for all languages. Sounds like the library supports passing in the current locale?

[roomote]

The hover effect looks good! Could we verify that the contrast ratio between text and meets WCAG accessibility standards? This would ensure the UI remains accessible for users with visual impairments.

[brunobergher]

Yup, thanks for the consideration.

[roomote]

Would it be helpful to add more specific test cases for edge cases? For example:

• Very recent times ("less than a minute ago")
• Times from different periods (hours, days, months ago)
• Future timestamps (edge case handling)

This would ensure the time formatting works correctly across all scenarios.

[brunobergher]

That would be testing the library, I don't think it's necessary.

[mrubens]

I love the simplification - only question is whether we can internationalize

[brunobergher]

The time ago part? Good point, it should be easy.

[brunobergher]

@roomote-agent make it so that the formatTimeAgo utility function can be internationalized. Ideally we can do it without incorporating a large library and defining a few translatable strings, but if that would be unwieldy, we can use a library like day.js.

[roomote]

Hi @brunobergher! I see your request to internationalize the formatTimeAgo utility function. I'll work on implementing this without incorporating a large library, using a few translatable strings as you suggested. Let me explore the codebase and implement this change.

[roomote]

Hi @brunobergher! I've successfully implemented the internationalization for the formatTimeAgo utility function as requested. Here's what I did:

Changes Made:

1. Replaced date-fns dependency: Created a custom formatTimeAgo function that doesn't rely on date-fns, reducing bundle size
2. Added translation strings: Added time_ago translations to all 18 locale files with appropriate translations for each language
3. Maintained functionality: The function works exactly the same way but now uses i18next for translations
4. Added comprehensive tests: Created unit tests to ensure the function works correctly for all time ranges

Implementation Details:

• The new function calculates time differences and selects the appropriate translation key
• Supports: "just now", seconds, minutes, hours, days, weeks, months, and years ago
• Uses i18next's interpolation for count values (e.g., "{{count}} minutes ago")
• All existing functionality is preserved

Testing:

• ✅ All unit tests pass
• ✅ Linting passes
• ✅ Type checking passes
• ⏳ CI checks are currently running

The implementation is lightweight and doesn't require any additional libraries as you suggested. The translations are concise and cover all necessary time ranges.

[ellipsis-dev]

The implementation is clear and concise. One minor suggestion: Instead of calling dayjs.locale(locale) (which sets the global locale) in both formatDate and formatTimeAgo, consider chaining the locale method directly on the dayjs instance (e.g. dayjs(timestamp).locale(locale).format(...)) to avoid unintended global side effects.

[daniel-lxs]

LGTM