diff --git a/web/src/components/ToolCard/PermissionFooter.tsx b/web/src/components/ToolCard/PermissionFooter.tsx
index ac20b3fb..16ebe2e3 100644
--- a/web/src/components/ToolCard/PermissionFooter.tsx
+++ b/web/src/components/ToolCard/PermissionFooter.tsx
@@ -200,15 +200,14 @@ export function PermissionFooter(props: {
}
if (!isPending) {
- const tone = permission.status === 'approved'
- ? 'text-emerald-600'
- : permission.status === 'denied' || permission.status === 'canceled'
- ? 'text-red-600'
- : 'text-[var(--app-hint)]'
+ // Keep the thread minimal: approval is already reflected by tool state/icon.
+ // Only surface a short message when the permission was denied/canceled and we have a reason.
+ if (permission.status !== 'denied' && permission.status !== 'canceled') return null
+ if (!permission.reason) return null
return (
-
- {summary}
+
+ {permission.reason}
)
}
diff --git a/web/src/components/ToolCard/ToolCard.tsx b/web/src/components/ToolCard/ToolCard.tsx
index 9b73904c..83f88300 100644
--- a/web/src/components/ToolCard/ToolCard.tsx
+++ b/web/src/components/ToolCard/ToolCard.tsx
@@ -315,13 +315,6 @@ function StatusIcon(props: { state: ToolCallBlock['tool']['state'] }) {
)
}
-function accentBorderClass(state: ToolCallBlock['tool']['state']): string {
- if (state === 'completed') return 'border-l-4 border-l-emerald-500'
- if (state === 'error') return 'border-l-4 border-l-red-500'
- if (state === 'pending') return 'border-l-4 border-l-amber-500'
- return 'border-l-4 border-l-blue-500'
-}
-
function statusColorClass(state: ToolCallBlock['tool']['state']): string {
if (state === 'completed') return 'text-emerald-600'
if (state === 'error') return 'text-red-600'
@@ -356,11 +349,15 @@ export function ToolCard(props: {
const toolTitle = presentation.title
const subtitle = presentation.subtitle ?? props.block.tool.description
const taskSummary = renderTaskSummary(props.block)
- const accent = accentBorderClass(props.block.tool.state)
const runningFrom = props.block.tool.startedAt ?? props.block.tool.createdAt
const showDialog = presentation.minimal || toolName === 'Task'
const showInline = !presentation.minimal && toolName !== 'Task'
- const hasBody = showInline || taskSummary !== null || Boolean(props.block.tool.permission)
+ const permission = props.block.tool.permission
+ const showsPermissionFooter = Boolean(permission && (
+ permission.status === 'pending'
+ || ((permission.status === 'denied' || permission.status === 'canceled') && Boolean(permission.reason))
+ ))
+ const hasBody = showInline || taskSummary !== null || showsPermissionFooter
const stateColor = statusColorClass(props.block.tool.state)
const header = (
@@ -394,7 +391,7 @@ export function ToolCard(props: {
)
return (
-
+
{showDialog ? (