✨enhancement: auto focus always allow action from tool approval dialog and add req parameters

[urmauur]

Describe Your Changes

This pull request introduces several changes across multiple files to enhance tool approval functionality, improve UI consistency, and update localization strings. The most significant changes include adding support for tool parameters in the tool approval modal, refining button focus styles, and updating translations for tool-related text across multiple languages.

Enhancements to Tool Approval Functionality:

• Added support for displaying tool parameters in the tool approval modal by updating ToolApproval component and useToolApproval hook. Tool parameters are now passed to the modal and displayed if available. (web-app/src/containers/dialogs/ToolApproval.tsx: [1] [2] [3]; web-app/src/hooks/useToolApproval.ts: [4] [5] [6] [7]; web-app/src/lib/completion.ts: [8] [9]

UI Refinements:

• Updated button focus styles in button.tsx to improve accessibility and visual consistency, including changes to focus-visible and focus states. (web-app/src/components/ui/button.tsx: web-app/src/components/ui/button.tsxL8-R19)
• Adjusted the DialogContent and Textarea styles in ThreadContent.tsx to improve layout and responsiveness. (web-app/src/containers/ThreadContent.tsx: web-app/src/containers/ThreadContent.tsxL107-R113)

Localization Updates:

• Added translations for "Tool Parameters" in multiple languages, including German, English, Indonesian, Vietnamese, Simplified Chinese, and Traditional Chinese. (web-app/src/locales/*: [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11] [12]

Fixes Issues

• Closes feat: Add focus style in the tool approval modal #5826
• Closes feat: show tool parameters in approval dialog for better transparency #5842

Self Checklist

• Added relevant comments, esp in complex areas
• Updated docs (for bug fixes / features)
• Created issues for follow-up changes or refactoring needed

---

Important

Enhance tool approval by adding tool parameter support, refining UI elements, and updating localization strings across multiple languages.

• Tool Approval Enhancements:
  • Add support for displaying tool parameters in ToolApproval component and useToolApproval hook.
  • Update showApprovalModal in useToolApproval.ts to accept toolParameters.
  • Modify postMessageProcessing in completion.ts to handle tool parameters.
• UI Refinements:
  • Update button focus styles in button.tsx for better accessibility.
  • Adjust DialogContent and Textarea styles in ThreadContent.tsx for improved layout.
• Localization Updates:
  • Add translations for "Tool Parameters" in German, English, Indonesian, Vietnamese, Simplified Chinese, and Traditional Chinese.

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

[ellipsis-dev]

Caution

Changes requested ❌

Reviewed everything up to df4b645 in 2 minutes and 5 seconds. Click for details.

• Reviewed 312 lines of code in 17 files
• Skipped 0 files when reviewing.
• Skipped posting 7 draft comments. View those below.
• Modify your settings and rules to customize what types of comments Ellipsis leaves. And don't forget to react with 👍 or 👎 to teach Ellipsis.

1. web-app/src/components/ui/button.tsx:8

• Draft comment:
  Ensure the custom focus classes (like 'focus:accent-[0px]') work as intended with your Tailwind configuration. Double-check that they produce the desired visual focus effect.
• Reason this comment was not posted:
  Comment did not seem useful. Confidence is useful = 0% <= threshold 50% The comment is asking the PR author to double-check the behavior of custom focus classes, which violates the rule against asking for confirmation or double-checking. It does not provide a specific suggestion or point out a clear issue.

2. web-app/src/containers/ThreadContent.tsx:107

• Draft comment:
  The removal of the explicit height ('h-3/4') on DialogContent may affect layout on some screens. Confirm that the responsive design remains as intended.
• Reason this comment was not posted:
  Comment did not seem useful. Confidence is useful = 0% <= threshold 50% The comment is asking the PR author to confirm that the responsive design remains as intended after a change. This violates the rule against asking the author to confirm their intention or ensure behavior is intended.

3. web-app/src/containers/dialogs/ToolApproval.tsx:61

• Draft comment:
  The new block for displaying toolParameters is a useful enhancement. If the parameters JSON becomes large or complex, consider additional formatting or a collapsible UI for readability.
• Reason this comment was not posted:
  Comment did not seem useful. Confidence is useful = 20% <= threshold 50% The comment is purely informative, acknowledging the enhancement and suggesting a potential improvement for readability. However, it doesn't ask for a specific change or highlight a potential issue with the current implementation. It doesn't align with the rules for actionable feedback.

4. web-app/src/containers/dialogs/ToolApproval.tsx:96

• Draft comment:
  AutoFocus on the 'Always Allow' button addresses the UX concern. Verify that this focus behavior does not conflict with other focus management within the dialog.
• Reason this comment was not posted:
  Comment did not seem useful. Confidence is useful = 0% <= threshold 50% The comment is asking the PR author to verify that the focus behavior does not conflict with other focus management, which is against the rules. It does not provide a specific suggestion or point out a specific issue.

5. web-app/src/hooks/useToolApproval.ts:55

• Draft comment:
  The showApprovalModal function now accepts an optional toolParameters argument, which improves flexibility. The change looks correct.
• Reason this comment was not posted:
  Comment did not seem useful. Confidence is useful = 0% <= threshold 50% This comment is purely informative, stating that a function now accepts an optional argument and that the change looks correct. It doesn't provide any actionable feedback or suggestions for improvement.

6. web-app/src/locales/en/tool-approval.json:11

• Draft comment:
  The new 'parameters' translation key has been added consistently. Make sure similar updates are reflected in all locale files to maintain uniform UI language.
• Reason this comment was not posted:
  Comment did not seem useful. Confidence is useful = 0% <= threshold 50% This comment is purely informative and suggests ensuring consistency across locale files, which violates the rule against asking the PR author to ensure something is done. It doesn't provide a specific code suggestion or point out a specific issue.

7. web-app/src/components/ui/button.tsx:23

• Draft comment:
  Typo alert: In the default size variant, the class string contains "has-[>svg]:px-3". It looks like this might be a typo and perhaps should be "[&>svg]:px-3" to correctly target svg children?
• Reason this comment was not posted:
  Comment was not on a location in the diff, so it can't be submitted as a review comment.

Workflow ID: wflow_nVyeuumz6w7sWTL7

^{You can customize by changing your verbosity settings, reacting with 👍 or 👎, replying to comments, or adding code review rules.}

[louis-menlo]

LGTM

[ellipsis-dev]

Important

Looks good to me! 👍

Reviewed 2c8e2c1 in 58 seconds. Click for details.

• Reviewed 45 lines of code in 1 files
• Skipped 0 files when reviewing.
• Skipped posting 2 draft comments. View those below.
• Modify your settings and rules to customize what types of comments Ellipsis leaves. And don't forget to react with 👍 or 👎 to teach Ellipsis.

1. web-app/src/lib/completion.ts:332

• Draft comment:
  The showModal parameter signature is reformatted into multiple lines. This change is stylistic and improves readability. Ensure that this formatting aligns with the project's style guidelines.
• Reason this comment was not posted:
  Confidence changes required: 0% <= threshold 50% None

2. web-app/src/lib/completion.ts:387

• Draft comment:
  The code parses toolCall.function.arguments with a try-catch block earlier and stores the result in 'toolParameters', but then JSON.parse is called again when passing arguments to callTool. Consider reusing the parsed 'toolParameters' to avoid duplicate parsing and potential runtime errors if the JSON is malformed.
• Reason this comment was not posted:
  Comment was not on a location in the diff, so it can't be submitted as a review comment.

Workflow ID: wflow_wz2cpHSrrfA1UUdt

^{You can customize by changing your verbosity settings, reacting with 👍 or 👎, replying to comments, or adding code review rules.}

[ellipsis-dev]

Important

Looks good to me! 👍

Reviewed acd1e5d in 1 minute and 24 seconds. Click for details.

• Reviewed 246 lines of code in 1 files
• Skipped 0 files when reviewing.
• Skipped posting 4 draft comments. View those below.
• Modify your settings and rules to customize what types of comments Ellipsis leaves. And don't forget to react with 👍 or 👎 to teach Ellipsis.

1. web-app/src/components/ui/__tests__/button.test.tsx:5

• Draft comment:
  Optional: The import of '@testing-library/jest-dom' may be redundant if it's already included globally in your test setup.
• Reason this comment was not posted:
  Confidence changes required: 33% <= threshold 50% None

2. web-app/src/components/ui/__tests__/button.test.tsx:197

• Draft comment:
  Verify that the focus-visible class names ('focus-visible:border-primary', 'focus-visible:ring-2', 'focus-visible:ring-primary/60') match your updated design tokens.
• Reason this comment was not posted:
  Comment did not seem useful. Confidence is useful = 0% <= threshold 50% The comment is asking the PR author to verify something, which is against the rules. It doesn't provide a specific suggestion or point out a specific issue with the code. Therefore, it should be removed.

3. web-app/src/components/ui/__tests__/button.test.tsx:67

• Draft comment:
  Confirm that the expected class 'size-8' for the 'icon' variant is correct and intentional.
• Reason this comment was not posted:
  Confidence changes required: 33% <= threshold 50% None

4. web-app/src/components/ui/__tests__/button.test.tsx:111

• Draft comment:
  Consider also testing forwarded refs using React.createRef() to ensure the DOM node is correctly attached.
• Reason this comment was not posted:
  Confidence changes required: 33% <= threshold 50% None

Workflow ID: wflow_c8gkMeDk8QI69kSS

^{You can customize by changing your verbosity settings, reacting with 👍 or 👎, replying to comments, or adding code review rules.}

[github-actions]

Barecheck - Code coverage report

Total: 34.99%

Your code coverage diff: -0.02% ▾

Uncovered files and lines

File	Lines
web-app/src/containers/ThreadContent.tsx	2-4, 12-18, 27-29, 34-35, 37, 39-41, 43-45, 47-51, 53-56, 58-62, 64-71, 73, 75, 77-80, 83-85, 87-91, 93-114, 116-121, 123-129, 131-136, 138, 141-143, 152-153, 156-159, 161-165, 167-170, 172-174, 176-178, 180-185, 187-188, 190, 192-203, 205-217, 219-222, 224-229, 231-235, 237, 241-271, 273-281, 283-294, 297-304, 306-307, 310-315, 317-318, 321-324, 326-335, 337-340, 342-347, 349-359, 361-364, 366-374, 376-422, 424-429, 431-437, 439, 441-450, 452, 455-463, 465-466, 468-469
web-app/src/containers/dialogs/ToolApproval.tsx	1, 9-12, 14-16, 18-20, 22, 24-26, 28-30, 32-34, 36-41, 43-59, 61-71, 74-78, 80-84, 86-92, 94-102, 104
web-app/src/hooks/useToolApproval.ts	111-113
web-app/src/lib/completion.ts	130-138, 140, 142-143, 145-146, 148, 150, 153-159, 161-163, 165-169, 171-172, 175-183, 185, 187-202, 204-225, 241-247, 298, 301-306, 308-311, 327-332, 337-338, 340-362, 365-382, 384-409, 411-420, 422-436, 438-441