feat(viewer): add timeline sort toggle

[RayShark]

Summary

• add NEWEST FIRST / OLDEST FIRST controls to the viewer timeline toolbar
• sort timeline observations by timestamp before pagination while preserving newest-first as the default
• cover toolbar rendering and both sort directions in viewer VM tests

Testing

• npm test -- test/viewer-session-id.test.ts
• env HOME=/tmp/agentmemory-test-home npm test
• npm run build
• git diff --check

Summary by CodeRabbit

• New Features
  • Added timeline sort order controls to the viewer interface, allowing users to toggle between "Newest First" and "Oldest First" sorting options for observations in the timeline view.

[vercel]

@RayShark is attempting to deploy a commit to the rohitg00's projects Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: db8c2df9-d8ad-408d-8dca-5ce7c84a32bf

📥 Commits

Reviewing files that changed from the base of the PR and between 6939d4a and 1062af1.

📒 Files selected for processing (2)

• src/viewer/index.html
• test/viewer-session-id.test.ts

---

📝 Walkthrough

Walkthrough

This PR adds a timeline sort-order control to the viewer UI. Users can toggle between "NEWEST FIRST" (descending) and "OLDEST FIRST" (ascending) sort directions via a two-button segmented control in the timeline toolbar. The sort order persists in application state and determines the observation rendering order before pagination.

Changes

Timeline sort order feature

Layer / File(s)	Summary
State initialization and toolbar UI src/viewer/index.html	Timeline state adds sortOrder field defaulting to 'desc'. Toolbar gains a segmented button group with two sort options emitting data-action="timeline-sort". CSS styles the button group layout, active button styling, and border removal between adjacent buttons.
Sort logic and behavior wiring src/viewer/index.html	Helper functions derive the active sort direction and return observations sorted by timestamp. Sort buttons' active class and aria-pressed attributes reflect the current sortOrder. Observation rendering applies the sort before pagination. setTimelineSortOrder() updates state, resets timeline page, syncs button UI, and re-renders observations. Click handler dispatches timeline-sort actions to setTimelineSortOrder().
Test helper and sort order validation test/viewer-session-id.test.ts	New expectTextOrder() helper asserts substring presence and ordering in HTML. Test suite verifies toolbar renders both sort direction labels and observations render in the selected sort order, including pagination reset and re-render when sort direction changes.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

🐰 A timeline now dances to its chosen tune,
Newest first or oldest—the viewer's boon!
With buttons so crisp and a sort-state so bright,
Observations flip from left to right! 🎪

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'feat(viewer): add timeline sort toggle' clearly and concisely describes the main change: adding sort controls to the timeline viewer UI.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint skipped: no ESLint configuration detected in root package.json. To enable, add eslint to devDependencies.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}