diff --git a/packages/ui/src/components/tool-call.tsx b/packages/ui/src/components/tool-call.tsx
index f03c1695..3d6b9127 100644
--- a/packages/ui/src/components/tool-call.tsx
+++ b/packages/ui/src/components/tool-call.tsx
@@ -583,6 +583,55 @@ function ToolCallDetails(props: {
)
+ const renderOutputActions = (options: {
+ language?: () => string | null | undefined
+ copyText?: () => string | null | undefined
+ actions?: () => JSXElement
+ wrapToggle?: () => boolean | undefined
+ }) => (
+
+
+ {(language) => {language()}}
+
+
+
+
+ {(actions) => {actions()}}
+
+
+
+ {(copyText) => (
+
+ )}
+
+
+
+
+
+
+
+ )
+
const renderToolOutputBody = () => {
const body = renderToolBody()
const error = renderError()
@@ -596,19 +645,14 @@ function ToolCallDetails(props: {
if (chrome.wrapToggle) {
return (
)
diff --git a/packages/ui/src/styles/messaging/tool-call.css b/packages/ui/src/styles/messaging/tool-call.css
index edfc20bd..5f871b9f 100644
--- a/packages/ui/src/styles/messaging/tool-call.css
+++ b/packages/ui/src/styles/messaging/tool-call.css
@@ -386,6 +386,47 @@
color: var(--text-primary);
}
+.tool-call-output-actions {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: var(--space-xs);
+ min-height: 1.6rem;
+ padding-inline-start: var(--space-sm);
+ padding-inline-end: var(--space-sm);
+ background-color: var(--surface-secondary);
+ border-bottom: 1px solid var(--tool-call-body-border-color, var(--border-base));
+}
+
+.tool-call-output-language {
+ flex: 0 1 auto;
+ min-width: 0;
+ font-family: var(--message-part-header-font-family);
+ font-size: var(--message-part-header-type-font-size);
+ font-weight: var(--message-part-header-type-font-weight);
+ line-height: var(--message-part-header-title-line-height);
+ color: var(--text-primary);
+ text-transform: uppercase;
+ letter-spacing: 0.04em;
+}
+
+.tool-call-output-action-buttons {
+ display: inline-flex;
+ align-items: center;
+ justify-content: flex-end;
+ gap: var(--space-xs);
+ flex: 0 0 auto;
+}
+
+.tool-call-output-copy,
+.tool-call-output-wrap {
+ margin-inline-end: 0;
+}
+
+.tool-call-output-wrap.active {
+ color: var(--text-primary);
+}
+
.tool-call-io-body {
background-color: var(--surface-code);
}