@theia/ai-chat-ui 1.72.0-next.21 → 1.72.0-next.29

package/src/browser/chat-response-renderer/delegation-tool-renderer.tsx

@@ -26,7 +26,7 @@ import { ResponseNode } from '../chat-tree-view';
 import { SubChatWidgetFactory } from '../chat-tree-view/sub-chat-widget';
 import { withToolCallConfirmation } from './tool-confirmation';
 import { extractJsonStringField } from './toolcall-utils';
-import { CompositeTreeNode, ContextMenuRenderer } from '@theia/core/lib/browser';
+import { CompositeTreeNode, ContextMenuRenderer, OpenerService } from '@theia/core/lib/browser';
 import { ContributionProvider, DisposableCollection, nls } from '@theia/core';
 import * as React from '@theia/core/shared/react';
 
@@ -51,6 +51,9 @@ export class DelegationToolRenderer implements ChatResponsePartRenderer<ToolCall
     @inject(ContextMenuRenderer)
     protected contextMenuRenderer: ContextMenuRenderer;
 
+    @inject(OpenerService)
+    protected openerService: OpenerService;
+
     @inject(ContributionProvider) @named(ChatResponsePartRenderer)
     protected chatResponsePartRenderers: ContributionProvider<ChatResponsePartRenderer<ChatResponseContent>>;
 
@@ -100,12 +103,16 @@ export class DelegationToolRenderer implements ChatResponsePartRenderer<ToolCall
             subChatWidgetFactory={this.subChatWidgetFactory}
             contextMenuRenderer={this.contextMenuRenderer}
             chatResponsePartRenderers={this.chatResponsePartRenderers}
-            response={response}
-            confirmationMode={confirmationMode}
-            toolConfirmationManager={this.toolConfirmationManager}
-            toolRequest={toolRequest}
-            chatId={chatId}
-            requestCanceled={parentNode.response.isCanceled}
+            toolConfirmation={{
+                response,
+                confirmationMode,
+                toolConfirmationManager: this.toolConfirmationManager,
+                toolRequest,
+                chatId,
+                requestCanceled: parentNode.response.isCanceled,
+                contextMenuRenderer: this.contextMenuRenderer,
+                openerService: this.openerService
+            }}
         />;
     }
 }

package/src/browser/chat-response-renderer/markdown-part-renderer.tsx

@@ -30,6 +30,21 @@ import { MarkdownString } from '@theia/core/lib/common/markdown-rendering';
 import { OpenerService, open } from '@theia/core/lib/browser';
 import { URI } from '@theia/core';
 
+export interface MarkdownRenderProps {
+    text: string | MarkdownString;
+    openerService: OpenerService;
+    className?: string;
+}
+
+/**
+ * Renders the given markdown via {@link useMarkdownRendering} into a `<div>`.
+ * Shared component for use across chat response renderers.
+ */
+export const MarkdownRender: React.FC<MarkdownRenderProps> = ({ text, openerService, className }) => {
+    const ref = useMarkdownRendering(text, openerService);
+    return <div className={className} ref={ref}></div>;
+};
+
 @injectable()
 export class MarkdownPartRenderer implements ChatResponsePartRenderer<MarkdownChatResponseContent | InformationalChatResponseContent> {
     @inject(OpenerService) protected readonly openerService: OpenerService;
@@ -51,16 +66,10 @@ export class MarkdownPartRenderer implements ChatResponsePartRenderer<MarkdownCh
             return null;
         }
 
-        return <MarkdownRender response={response} openerService={this.openerService} />;
+        return <MarkdownRender text={response.content} openerService={this.openerService} />;
     }
 }
 
-const MarkdownRender = ({ response, openerService }: { response: MarkdownChatResponseContent | InformationalChatResponseContent; openerService: OpenerService }) => {
-    const ref = useMarkdownRendering(response.content, openerService);
-
-    return <div ref={ref}></div>;
-};
-
 export interface DeclaredEventsEventListenerObject extends EventListenerObject {
     handledEvents?: (keyof HTMLElementEventMap)[];
 }

package/src/browser/chat-response-renderer/tool-confirmation.spec.ts

@@ -14,12 +14,31 @@
 // SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
 // *****************************************************************************
 
+import { enableJSDOM } from '@theia/core/lib/browser/test/jsdom';
+
+let disableJSDOM = enableJSDOM();
+
 import { expect } from 'chai';
-import { ContextMenuRenderer } from '@theia/core/lib/browser';
+import { ContextMenuRenderer, OpenerService } from '@theia/core/lib/browser';
 import { ToolCallChatResponseContent } from '@theia/ai-chat/lib/common';
-import { ConfirmationScope, CountdownTimerProps, ToolConfirmationCallbacks, ToolConfirmationActionsProps, ToolConfirmationProps } from './tool-confirmation';
+import { ToolConfirmationMode as ToolConfirmationPreferenceMode } from '@theia/ai-chat/lib/common/chat-tool-preferences';
+import { ToolConfirmationManager } from '@theia/ai-chat/lib/browser/chat-tool-preference-bindings';
+import { flushSync } from '@theia/core/shared/react-dom';
+import { createRoot } from '@theia/core/shared/react-dom/client';
+import * as React from '@theia/core/shared/react';
+import {
+    ConfirmationScope,
+    CountdownTimerProps,
+    ToolConfirmationCallbacks,
+    ToolConfirmationActionsProps,
+    ToolConfirmationProps,
+    withToolCallConfirmation
+} from './tool-confirmation';
 
 const mockContextMenuRenderer = {} as ContextMenuRenderer;
+const mockOpenerService = {} as OpenerService;
+
+disableJSDOM();
 
 describe('Tool Confirmation Types', () => {
     describe('ConfirmationScope', () => {
@@ -109,15 +128,72 @@ describe('Tool Confirmation Types', () => {
         });
     });
 
+    describe('withToolCallConfirmation', () => {
+        before(() => {
+            disableJSDOM = enableJSDOM();
+        });
+
+        after(() => {
+            disableJSDOM();
+        });
+
+        it('should pass opener service through to the wrapped component', () => {
+            const Wrapped: React.FC<{ openerService: OpenerService }> = ({ openerService }) =>
+                React.createElement('span', undefined, openerService === mockOpenerService ? 'passed' : 'missing');
+            const WrappedWithConfirmation = withToolCallConfirmation(Wrapped);
+            const container = document.createElement('div');
+            const root = createRoot(container);
+            const response = {
+                kind: 'toolCall',
+                id: 'test',
+                name: 'test',
+                finished: true,
+                confirmed: Promise.resolve(true),
+                needsUserConfirmation: Promise.resolve(),
+                confirm: () => { },
+                deny: () => { }
+            } as ToolCallChatResponseContent;
+
+            flushSync(() => root.render(React.createElement(WrappedWithConfirmation, {
+                openerService: mockOpenerService,
+                toolConfirmation: {
+                    response,
+                    confirmationMode: ToolConfirmationPreferenceMode.CONFIRM,
+                    toolConfirmationManager: {} as ToolConfirmationManager,
+                    chatId: 'test-chat',
+                    requestCanceled: false,
+                    contextMenuRenderer: mockContextMenuRenderer,
+                    openerService: mockOpenerService
+                }
+            })));
+
+            expect(container.textContent).to.equal('passed');
+            root.unmount();
+        });
+    });
+
     describe('ToolConfirmationProps', () => {
         it('should pick toolRequest from ToolConfirmationCallbacks', () => {
             const props: ToolConfirmationProps = {
                 response: { kind: 'toolCall', id: 'test', name: 'test' } as ToolConfirmationProps['response'],
                 onAllow: () => { },
                 onDeny: () => { },
-                contextMenuRenderer: mockContextMenuRenderer
+                contextMenuRenderer: mockContextMenuRenderer,
+                openerService: mockOpenerService
             };
             expect(props.toolRequest).to.be.undefined;
         });
+
+        it('should accept response arguments with an opener service', () => {
+            const props: ToolConfirmationProps = {
+                response: { kind: 'toolCall', id: 'test', name: 'test', arguments: '{"foo":"bar"}' } as ToolConfirmationProps['response'],
+                onAllow: () => { },
+                onDeny: () => { },
+                contextMenuRenderer: mockContextMenuRenderer,
+                openerService: mockOpenerService
+            };
+            expect(props.response.arguments).to.equal('{"foo":"bar"}');
+            expect(props.openerService).to.equal(mockOpenerService);
+        });
     });
 });

package/src/browser/chat-response-renderer/tool-confirmation.tsx

@@ -16,13 +16,15 @@
 
 import * as React from '@theia/core/shared/react';
 import { nls } from '@theia/core/lib/common/nls';
-import { codicon, ContextMenuRenderer } from '@theia/core/lib/browser';
+import { codicon, ContextMenuRenderer, OpenerService } from '@theia/core/lib/browser';
 import { ToolCallChatResponseContent } from '@theia/ai-chat/lib/common';
 import { ToolRequest } from '@theia/ai-core';
 import { CommandMenu, ContextExpressionMatcher, MenuPath } from '@theia/core/lib/common/menu';
 import { GroupImpl } from '@theia/core/lib/browser/menu/composite-menu-node';
 import { ToolConfirmationMode as ToolConfirmationPreferenceMode } from '@theia/ai-chat/lib/common/chat-tool-preferences';
 import { ToolConfirmationManager } from '@theia/ai-chat/lib/browser/chat-tool-preference-bindings';
+import { MarkdownRender } from './markdown-part-renderer';
+import { condenseArguments, formatArgsForTooltip } from './toolcall-utils';
 
 export interface CountdownTimerProps {
     response: ToolCallChatResponseContent;
@@ -430,9 +432,10 @@ export interface ToolConfirmationProps extends Pick<ToolConfirmationCallbacks, '
     onAllow: (scope?: ConfirmationScope) => void;
     onDeny: (scope?: ConfirmationScope, reason?: string) => void;
     contextMenuRenderer: ContextMenuRenderer;
+    openerService: OpenerService;
 }
 
-export const ToolConfirmation: React.FC<ToolConfirmationProps> = ({ response, toolRequest, onAllow, onDeny, contextMenuRenderer }) => {
+export const ToolConfirmation: React.FC<ToolConfirmationProps> = ({ response, toolRequest, onAllow, onDeny, contextMenuRenderer, openerService }) => {
     const [state, setState] = React.useState<ToolConfirmationState>('waiting');
 
     const handleAllow = React.useCallback((scope: ConfirmationScope) => {
@@ -461,16 +464,30 @@ export const ToolConfirmation: React.FC<ToolConfirmationProps> = ({ response, to
         );
     }
 
+    const toolNameContent = (
+        <>
+            <span className="label">{nls.localizeByDefault('Tool')}:</span>
+            <span className="value">{response.name}</span>
+        </>
+    );
+
     return (
         <div className="theia-tool-confirmation">
             <div className="theia-tool-confirmation-header">
                 <span className={codicon('shield')}></span> {nls.localize('theia/ai/chat-ui/toolconfirmation/header', 'Confirm Tool Execution')}
             </div>
             <div className="theia-tool-confirmation-info">
-                <div className="theia-tool-confirmation-name">
-                    <span className="label">{nls.localizeByDefault('Tool')}:</span>
-                    <span className="value">{response.name}</span>
-                </div>
+                {toolRequest?.description ? (
+                    <details className="theia-tool-confirmation-name">
+                        <summary>{toolNameContent}</summary>
+                        <div className="theia-tool-confirmation-description">
+                            {toolRequest.description}
+                        </div>
+                    </details>
+                ) : (
+                    <div className="theia-tool-confirmation-name">{toolNameContent}</div>
+                )}
+                <ToolArgsDisplay args={response.arguments} openerService={openerService} />
             </div>
             <ToolConfirmationActions
                 toolName={response.name ?? 'unknown'}
@@ -484,6 +501,33 @@ export const ToolConfirmation: React.FC<ToolConfirmationProps> = ({ response, to
     );
 };
 
+interface ToolArgsDisplayProps {
+    args: string | undefined;
+    openerService: OpenerService;
+}
+
+const ToolArgsDisplay: React.FC<ToolArgsDisplayProps> = ({ args, openerService }) => {
+    const trimmedArgs = args?.trim();
+    if (!trimmedArgs || trimmedArgs === '{}') {
+        // eslint-disable-next-line no-null/no-null
+        return null;
+    }
+    const summaryLabel = condenseArguments(trimmedArgs) ?? '\u2026';
+    return (
+        <details className="theia-tool-confirmation-args">
+            <summary>
+                <span className="label">{nls.localizeByDefault('Arguments')}:</span>
+                <span className="theia-tool-confirmation-args-summary">{summaryLabel}</span>
+            </summary>
+            <MarkdownRender
+                text={formatArgsForTooltip(trimmedArgs)}
+                openerService={openerService}
+                className="theia-tool-confirmation-args-content"
+            />
+        </details>
+    );
+};
+
 export interface WithToolCallConfirmationProps {
     response: ToolCallChatResponseContent;
     confirmationMode: ToolConfirmationPreferenceMode;
@@ -494,12 +538,17 @@ export interface WithToolCallConfirmationProps {
     showArgsTooltip?: (response: ToolCallChatResponseContent, target: HTMLElement | undefined) => void;
     requestCanceled: boolean;
     contextMenuRenderer: ContextMenuRenderer;
+    openerService: OpenerService;
 }
 
 export function withToolCallConfirmation<P extends object>(
     WrappedComponent: React.ComponentType<P>
-): React.FC<P & WithToolCallConfirmationProps> {
-    const WithConfirmation: React.FC<P & WithToolCallConfirmationProps> = props => {
+): React.FC<P & { toolConfirmation: WithToolCallConfirmationProps }> {
+    const WithConfirmation: React.FC<P & { toolConfirmation: WithToolCallConfirmationProps }> = props => {
+        const {
+            toolConfirmation,
+            ...componentProps
+        } = props;
         const {
             response,
             confirmationMode,
@@ -510,8 +559,8 @@ export function withToolCallConfirmation<P extends object>(
             showArgsTooltip,
             requestCanceled,
             contextMenuRenderer,
-            ...componentProps
-        } = props;
+            openerService
+        } = toolConfirmation;
 
         const { confirmationState } = useToolConfirmationState(response, confirmationMode);
         const pendingRef = React.useRef<HTMLElement | undefined>(undefined);
@@ -572,6 +621,7 @@ export function withToolCallConfirmation<P extends object>(
                     onAllow={handleAllow}
                     onDeny={handleDeny}
                     contextMenuRenderer={contextMenuRenderer}
+                    openerService={openerService}
                 />
             );
         }

package/src/browser/chat-response-renderer/toolcall-part-renderer.tsx

@@ -24,7 +24,7 @@ import * as React from '@theia/core/shared/react';
 import { createConfirmationHandlers, ToolConfirmation, useToolConfirmationState } from './tool-confirmation';
 import { ToolConfirmationMode } from '@theia/ai-chat/lib/common/chat-tool-preferences';
 import { ResponseNode } from '../chat-tree-view';
-import { useMarkdownRendering } from './markdown-part-renderer';
+import { MarkdownRender } from './markdown-part-renderer';
 import { ToolCallResult, ToolInvocationRegistry, ToolRequest } from '@theia/ai-core';
 import { ToolConfirmationManager } from '@theia/ai-chat/lib/browser/chat-tool-preference-bindings';
 import { condenseArguments, formatArgsForTooltip } from './toolcall-utils';
@@ -67,6 +67,7 @@ export class ToolCallPartRenderer implements ChatResponsePartRenderer<ToolCallCh
             onAllow={handleAllow}
             onDeny={handleDeny}
             contextMenuRenderer={this.contextMenuRenderer}
+            openerService={this.openerService}
         />;
     }
 
@@ -84,7 +85,8 @@ export class ToolCallPartRenderer implements ChatResponsePartRenderer<ToolCallCh
             showArgsTooltip={this.showArgsTooltip.bind(this)}
             responseRenderer={this.renderResult.bind(this)}
             requestCanceled={parentNode.response.isCanceled}
-            contextMenuRenderer={this.contextMenuRenderer} />;
+            contextMenuRenderer={this.contextMenuRenderer}
+            openerService={this.openerService} />;
     }
 
     protected renderResult(response: ToolCallChatResponseContent): ReactNode {
@@ -185,6 +187,7 @@ interface ToolCallContentProps {
     responseRenderer: (response: ToolCallChatResponseContent) => ReactNode | undefined;
     requestCanceled: boolean;
     contextMenuRenderer: ContextMenuRenderer;
+    openerService: OpenerService;
 }
 
 /**
@@ -200,7 +203,8 @@ const ToolCallContent: React.FC<ToolCallContentProps> = ({
     getArgumentsLabel,
     requestCanceled,
     showArgsTooltip,
-    contextMenuRenderer
+    contextMenuRenderer,
+    openerService
 }) => {
     const { confirmationState, rejectionReason } = useToolConfirmationState(response, confirmationMode);
     const summaryRef = React.useRef<HTMLElement | undefined>(undefined);
@@ -290,14 +294,10 @@ const ToolCallContent: React.FC<ToolCallContentProps> = ({
                         onAllow={handleAllow}
                         onDeny={handleDeny}
                         contextMenuRenderer={contextMenuRenderer}
+                        openerService={openerService}
                     />
                 </span>
             )}
         </div>
     );
 };
-
-const MarkdownRender = ({ text, openerService }: { text: string; openerService: OpenerService }) => {
-    const ref = useMarkdownRendering(text, openerService);
-    return <div ref={ref}></div>;
-};

package/src/browser/style/index.css

@@ -50,6 +50,7 @@ div:last-child>.theia-ChatNode {
 
 .theia-ChatNodeHeader .theia-ChatContentInProgress {
   color: var(--theia-disabledForeground);
+  white-space: nowrap;
 }
 
 .theia-ChatNodeHeader .theia-ChatContentInProgress-Cancel {
@@ -82,6 +83,9 @@ div:last-child>.theia-ChatNode {
 .theia-ChatNodeHeader .theia-ChatContentInProgress::after {
   content: "";
   animation: dots 1s steps(1, end) infinite;
+  display: inline-block;
+  width: 3ch;
+  text-align: left;
 }
 
 .theia-ChatNode .codicon {
@@ -984,6 +988,7 @@ div:last-child>.theia-ChatNode {
   border-radius: 4px;
   background-color: var(--theia-editorWidget-background);
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.14);
+  cursor: default;
 }
 
 .theia-tool-confirmation-header {
@@ -1010,19 +1015,65 @@ div:last-child>.theia-ChatNode {
   margin-right: 6px;
 }
 
-.theia-tool-confirmation-args pre.value {
-  margin: 6px 0;
-  padding: 8px;
-  background-color: var(--theia-editor-background);
-  border-radius: 3px;
-  max-height: 150px;
+.theia-tool-confirmation-description {
+  margin: 6px 0 8px 0;
+  color: var(--theia-descriptionForeground);
+  font-weight: normal;
+  max-height: 200px;
+  overflow: auto;
+}
+
+details.theia-tool-confirmation-name>summary,
+details.theia-tool-confirmation-args>summary {
+  cursor: pointer;
+  user-select: none;
+}
+
+details.theia-tool-confirmation-name>summary::marker,
+details.theia-tool-confirmation-args>summary::marker {
+  color: var(--theia-button-background);
+}
+
+.theia-tool-confirmation-args-summary {
+  color: var(--theia-descriptionForeground);
+}
+
+.theia-tool-confirmation-args-content {
+  margin: var(--theia-ui-padding) 0;
+  padding: var(--theia-ui-padding) calc(var(--theia-ui-padding) * 2);
+  max-height: 200px;
   overflow: auto;
 }
 
+.theia-tool-confirmation-args-content p {
+  margin: var(--theia-ui-padding) 0;
+}
+
+.theia-tool-confirmation-args-content pre {
+  margin: var(--theia-ui-padding) 0;
+  padding: var(--theia-ui-padding) calc(var(--theia-ui-padding) * 2);
+  background-color: var(--theia-textCodeBlock-background);
+  border-radius: 3px;
+  white-space: pre-wrap;
+  word-break: break-word;
+  font-weight: normal;
+}
+
+.theia-tool-confirmation-args-content code {
+  word-break: break-word;
+  font-weight: normal;
+}
+
+.theia-tool-confirmation-args-content hr {
+  border-top: 1px solid var(--theia-editorHoverWidgetInternalBorder);
+  border-bottom: 0;
+  margin: var(--theia-ui-padding) 0;
+}
+
 .theia-tool-confirmation-actions {
   display: flex;
   justify-content: flex-end;
-  gap: 0;
+  gap: 8px;
 }
 
 .theia-tool-confirmation-split-button {
@@ -1080,69 +1131,24 @@ div:last-child>.theia-ChatNode {
 
 .theia-tool-confirmation-status {
   margin: 10px 0;
-  padding: 12px;
+  padding: 8px;
   border: 1px solid var(--theia-dropdown-border);
   border-radius: 4px;
   background-color: var(--theia-editorWidget-background);
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.14);
-}
-
-.theia-tool-confirmation-header {
-  font-weight: bold;
-  margin-bottom: 8px;
-  color: var(--theia-foreground);
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.theia-tool-confirmation-info {
-  margin-bottom: 12px;
-}
-
-.theia-tool-confirmation-name,
-.theia-tool-confirmation-args {
-  margin-bottom: 4px;
-}
-
-.theia-tool-confirmation-name .label,
-.theia-tool-confirmation-args .label {
-  font-weight: bold;
-  margin-right: 6px;
-}
-
-.theia-tool-confirmation-args pre.value {
-  margin: 6px 0;
-  padding: 8px;
-  background-color: var(--theia-editor-background);
-  border-radius: 3px;
-  max-height: 150px;
-  overflow: auto;
-}
-
-.theia-tool-confirmation-actions {
-  display: flex;
-  justify-content: flex-end;
-  gap: 8px;
-}
-
-.theia-tool-confirmation-status {
-  padding: 8px;
-  margin: 10px 0;
-  border-radius: 4px;
   display: flex;
   align-items: center;
   gap: 6px;
 }
 
-.theia-tool-confirmation-status.approved {
-  background-color: var(--theia-successBackground);
-  color: var(--theia-successForeground);
+.theia-tool-confirmation-status.allowed {
+  border-color: var(--theia-successBackground);
+  color: var(--theia-successBackground);
 }
 
 .theia-tool-confirmation-status.denied {
-  background-color: var(--theia-errorBackground);
-  color: var(--theia-errorForeground);
+  border-color: var(--theia-errorBackground);
+  color: var(--theia-errorBackground);
 }
 
 .theia-toolCall-denied,
@@ -1593,38 +1599,42 @@ div:last-child>.theia-ChatNode {
 }
 
 /* Scrollable hover for large tool call arguments */
-.theia-hover.toolcall-args-hover div.rendered-markdown {
+.theia-hover.toolcall-args-hover>div {
   max-height: 400px;
   max-width: 600px;
   overflow-y: auto;
   overflow-x: hidden;
 }
 
-/* Code blocks inside tool call hovers: constrain and scroll.
-   Monaco renders fenced code blocks as div[data-code] > span > div.monaco-tokenized-source,
-   not as <pre> elements, so we target both structures. */
-.theia-hover.toolcall-args-hover div.rendered-markdown pre,
-.theia-hover.toolcall-args-hover div.rendered-markdown div[data-code] {
+/* Code blocks inside tool call hovers: constrain and scroll. */
+.theia-hover.toolcall-args-hover pre {
   max-height: 200px;
   overflow: auto;
-  white-space: pre;
+  white-space: pre-wrap;
+  word-break: break-word;
   margin: var(--theia-ui-padding) 0;
   padding: var(--theia-ui-padding) calc(var(--theia-ui-padding) * 2);
   border-radius: 3px;
   background-color: var(--theia-textCodeBlock-background);
 }
 
+/* Reset code background inside pre to avoid double semi-transparent layers
+   (.theia-hover code in hover-service.css sets the same background) */
+.theia-hover.toolcall-args-hover pre code {
+  background-color: transparent;
+}
+
 /* Inline code styling */
-.theia-hover.toolcall-args-hover div.rendered-markdown code:not(pre code) {
+.theia-hover.toolcall-args-hover code:not(pre code) {
   padding: 1px var(--theia-ui-padding);
   border-radius: 3px;
   background-color: var(--theia-textCodeBlock-background);
   word-break: break-all;
-  font-family: var(--theia-monospace-font-family);
+  font-family: var(--theia-code-font-family);
 }
 
 /* Spacing between arg sections - uses internal border like hover-service.css */
-.theia-hover.toolcall-args-hover div.rendered-markdown hr {
+.theia-hover.toolcall-args-hover hr {
   border-top: 1px solid var(--theia-editorHoverWidgetInternalBorder);
   border-bottom: 0;
   margin: var(--theia-ui-padding) 0;