feat: syntax highlighting terminal output with Shiki #3021
Conversation
Refactored CommandExecution.tsx to: - Implement CodeBlock component for terminal display - Use Shiki for syntax highlighting of shell commands and terminal output Signed-off-by: Eric Wheeler <[email protected]>
dosubot
bot
added
the
size:M
![ellipsis-dev[bot]](https://avatars.githubusercontent.com/in/64358?s=60&v=4){kind=small}
| <CodeBlock source={command} language="shell" /> | ||
| {output.length > 0 && ( | ||
| <div style={{ width: "100%" }}> | ||
| <div |
There was a problem hiding this comment.
Consider using a semantic <button> element instead of a <div> with onClick for better accessibility and keyboard interactions.
| {output.length > 0 && ( | ||
| <div style={{ width: "100%" }}> | ||
| <div | ||
| onClick={onToggleExpand} |
There was a problem hiding this comment.
Use ARIA attributes on interactive elements (e.g., aria-expanded) to improve accessibility.
Avoids rendering problems and performance regressions: - Compresses output using BaseTerminal.compressTerminalOutput - Eliminates need for Virtuoso by limiting output size Ensures command output shown in UI matches the compressed format provided to the model: - Applies same BaseTerminal.compressTerminalOutput processing - Uses configured terminalOutputLineLimit for consistency Signed-off-by: Eric Wheeler <[email protected]>
|
|
@samhvw8 , Ultimately the goal is to prevent large outputs from slowing down the system, correct? Would b342ee4 be an acceptable compromise, because I am having a lot of trouble getting virtuoso to do what needs to happen to render properly in the user interface with Shiki and proper height scaling. It is also an improvement because it presents to the user exactly what the model will receive after compression/truncation, which certainly seems appropriate. |
- Replace virtuoso mock with CodeBlock mock to fix shiki import error - Update CodeBlock mock to properly handle source prop - Add proper empty output test case verification - Keep original test values and structure Signed-off-by: Eric Wheeler <[email protected]>
dosubot
bot
added
size:L
Can you make a screencasts to test this ? |
My command output limit is set to 100 lines:
|
|
Thank you! |
Look good to me🙆 |
* feat: syntax highlighting terminal output with Shiki Refactored CommandExecution.tsx to: - Implement CodeBlock component for terminal display - Use Shiki for syntax highlighting of shell commands and terminal output Signed-off-by: Eric Wheeler <[email protected]> * ui: present same compressed command output that the model will receive Avoids rendering problems and performance regressions: - Compresses output using BaseTerminal.compressTerminalOutput - Eliminates need for Virtuoso by limiting output size Ensures command output shown in UI matches the compressed format provided to the model: - Applies same BaseTerminal.compressTerminalOutput processing - Uses configured terminalOutputLineLimit for consistency Signed-off-by: Eric Wheeler <[email protected]> * test: update CommandExecution tests to use CodeBlock mock - Replace virtuoso mock with CodeBlock mock to fix shiki import error - Update CodeBlock mock to properly handle source prop - Add proper empty output test case verification - Keep original test values and structure Signed-off-by: Eric Wheeler <[email protected]> --------- Signed-off-by: Eric Wheeler <[email protected]> Co-authored-by: Eric Wheeler <[email protected]>
…eInc#3023) Revert "feat: syntax highlighting terminal output with Shiki (RooCodeInc#3021)" This reverts commit 8b072ad.
…oCodeInc#3021) * add github action for creating linear tickets for unconnected PRs * changset * only load fetch if not present * omit fetch * add error handling * fix gql query * only run for opened PRs * break out into actions * fix folders * checkout first * remove the actions * add sync * remove sync
3 participants
Refactored CommandExecution.tsx to:
Important
Refactor
CommandExecution.tsxto useCodeBlockfor Shiki syntax highlighting and improve output display.CommandExecution.tsxto useCodeBlockfor syntax highlighting ofcommandandoutput.VirtuosoandChevronDownimports, replacing withCodeBlockanduseTranslation.CODE_BLOCK_BG_COLORand inline styles for borders and padding.This description was created by
for b4fd9ee. You can customize this summary. It will automatically update as commits are pushed.