Skip to content

🎬 feat: Animate Background Tasks and Add Tool Navigation - #16959

Merged
berry-13 merged 11 commits into
devfrom
librechat/conversation-d3153c03-efd9c54a36e0dab1c197f248ae201e5
Oct 11, 2026
Merged

berry-13 merged 11 commits into
devfrom
librechat/conversation-d3153c03-efd9c54a36e0dab1c197f248ae201e5

Conversation

@berry-13

@berry-13 berry-13 commented Oct 10, 2026 •

Copy link
Copy Markdown
Collaborator

Pull Request

Summary

Background tasks currently open and collapse abruptly, running titles stay static, and task Stop controls do not match the composer. This adds panel and detail transitions, the shared running-text shimmer, solid Stop controls, and a larger animated expanded view.

Every tool and subagent row gains a localized “Take me to that tool” action. It navigates to a loaded call or parent message and explains when the destination is unavailable.

How it works

The panel reuses the composer popover transition, while sections and command details use the shared inert-aware Collapse. Task rows retain message, tool-call, and thread identities for navigation. Reduced-motion preferences disable motion.

Type of change

  • Feature
  • Tests / tooling / CI

Testing

Tested environments/configuration:

Chromium, actual workspace components with mocked task data, light/dark themes. Browser walkthrough covered panel opening/closing, detail and section reveals, expansion, navigation focus, Escape focus restoration, and reduced motion. Stops in the recording affect mock tasks only.

Automated tests:

  • Related lc test: 79 tests passed, exit 0.
  • lc lint: zero errors and warnings, exit 0.
  • Incremental app and client-package tsc --noEmit: exit 0.
  • Four regression tests failed before the implementation: absent shimmer, outlined Stop all, unmounted closed details, and missing navigation actions.

Screenshots / recordings

Before (origin/dev), real components with mock data:

before.webm

After, current workspace refinements with the same viewport and mock data: smaller rounded-md Stop controls, rounded-md navigation icons to the left of the far-right Stop controls, light/dark themes, and opening, closing, reveal and resize animations:

after.webm

Risk / compatibility

No API or configuration changes. Navigation only targets loaded messages; unloaded destinations show guidance. Collapsed details remain mounted but inert.

Checklist

  • I reviewed my own changes
  • Relevant tests have been added or updated
  • Existing relevant tests pass
  • The change does not introduce new warnings or errors

Copilot AI balanced review requested due to automatic review settings October 10, 2026 09:26

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

@chatgpt-codex-connector

chatgpt-codex-connector Bot commented Oct 10, 2026 •

Copy link
Copy Markdown

Codex Review Summary

This comment shows the latest Codex review activity on this pull request.

Review Status Commit Review trigger
📝 Code Review ✅ Completed 2026-10-11T10:45:26.724352Z d54193d New commits
🔒 Security Review ✅ Completed 2026-10-10T09:29:38.239199Z ab019b0 PR opened
ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review" or "@codex security review".

Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings.

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: ab019b06d7

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

className={cn(
'border-border-medium bg-surface-secondary text-text-primary rounded-theme-menu-panel z-[200] flex max-h-[min(36rem,calc(100vh-5rem))] max-w-[calc(100vw-2rem)] flex-col border shadow-lg focus:outline-none',
wide ? 'w-[36rem]' : 'w-80',
'animate-composer-popover border-border-medium bg-surface-secondary text-text-primary rounded-theme-menu-panel animate-composer-popover-resize z-[200] flex max-w-[calc(100vw-2rem)] flex-col border shadow-lg focus:outline-none motion-reduce:transition-none',

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Disable the custom transition under reduced motion

For users with prefers-reduced-motion: reduce, this utility does not disable the panel animation: .animate-composer-popover and .animate-composer-popover-resize are unlayered rules in style.css, while Tailwind emits motion-reduce:transition-none in its lower-priority utilities layer. The panel therefore still scales, fades, and resizes despite the preference; add an unlayered reduced-motion override for these custom classes or place the transition declarations in a layer where the utility can override them.

AGENTS.md reference: AGENTS.md:L142-L151

Useful? React with 👍 / 👎.

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The existing unlayered reduced-motion block in style.css already matches .animate-composer-popover and both its data-enter/data-leave states, sets transition-duration to 1ms, and sets transform to none. The resize class changes only transition-property, not duration. In Chromium with reducedMotion: reduce, the actual panel computed a 0.001s duration with an identity transform; the running shimmer also computed animation: none. The Tailwind utility is redundant here, but the claimed continued scale/fade/resize animation does not reproduce. Leaving this open for maintainer review.

Comment thread client/src/components/Chat/BackgroundTasks/Button.tsx Outdated

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: a67a6101b6

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Comment thread client/src/components/Chat/BackgroundTasks/Button.tsx
Comment thread client/src/components/Chat/BackgroundTasks/Card.tsx Outdated
Comment thread client/src/components/Chat/BackgroundTasks/Button.tsx
Comment thread client/src/components/Chat/BackgroundTasks/Card.tsx Outdated

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: dcec4c2b33

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Comment thread client/src/components/Chat/BackgroundTasks/Button.tsx
Comment thread client/src/components/Chat/BackgroundTasks/Card.tsx

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: b390b3a0a3

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Comment thread client/src/components/Chat/BackgroundTasks/Button.tsx Outdated
Comment thread client/src/components/Chat/BackgroundTasks/Card.tsx

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: e0c1a5f422

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Comment thread client/src/components/Chat/BackgroundTasks/Button.tsx

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: d2f41240a4

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Comment thread client/src/components/Chat/BackgroundTasks/Button.tsx Outdated
Comment thread client/src/components/Chat/BackgroundTasks/Button.tsx

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 16277cb22c

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Comment thread client/src/components/Chat/BackgroundTasks/Button.tsx
Comment thread client/src/components/Chat/BackgroundTasks/Button.tsx Outdated
@berry-13
berry-13 merged commit 100b127 into dev Oct 11, 2026
44 checks passed
@berry-13
berry-13 deleted the librechat/conversation-d3153c03-efd9c54a36e0dab1c197f248ae201e5 branch October 11, 2026 12:36
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants