salvacybersec/CodeNomad
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Simplify todo tool calls and tighten layout

Browse Source
This commit is contained in:
Shantur Rathore
2025-11-20 10:46:11 +00:00
parent c5fd5694ee
commit c4c2c92974
2 changed files with 3 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
packages/ui/src/components/tool-call.tsx
View File

@@ -994,27 +994,8 @@ export default function ToolCall(props: ToolCallProps) {
return <div class="tool-call-todo-empty">No plan items yet.</div>
}
const completionPercent = Math.round((counts.completed / counts.total) * 100)
return (
<div class="tool-call-todo-region">
<div class="tool-call-todo-summary">
<div class="tool-call-todo-metrics">
<span class="tool-call-todo-metric"><span class="tool-call-todo-metric-value">{counts.completed}</span> done</span>
<span class="tool-call-todo-metric"><span class="tool-call-todo-metric-value">{counts.in_progress}</span> in progress</span>
<span class="tool-call-todo-metric"><span class="tool-call-todo-metric-value">{counts.pending}</span> pending</span>
</div>
<div
class="tool-call-todo-progress"
role="progressbar"
aria-valuemin="0"
aria-valuemax={counts.total}
aria-valuenow={counts.completed}
aria-label="Plan progress"
>
<div class="tool-call-todo-progress-bar" style={{ width: `${completionPercent}%` }} />
</div>
</div>
<div class="tool-call-todos" role="list">
<For each={todos}>
{(todo) => {

43
packages/ui/src/styles/messaging/tool-call.css
View File

@@ -646,44 +646,7 @@
}
.tool-call-todo-region {
@apply flex flex-col gap-3;
}
.tool-call-todo-summary {
@apply flex flex-col gap-2;
background-color: var(--surface-base);
border: 1px solid var(--border-base);
border-radius: 10px;
padding: 10px 12px;
}
.tool-call-todo-metrics {
@apply flex flex-wrap items-center gap-3;
font-size: var(--font-size-xs);
color: var(--text-secondary);
}
.tool-call-todo-metric-value {
color: var(--text-primary);
font-weight: var(--font-weight-semibold);
margin-right: 4px;
}
.tool-call-todo-progress {
position: relative;
height: 8px;
border-radius: 9999px;
background-color: var(--surface-secondary);
overflow: hidden;
border: 1px solid var(--border-base);
}
.tool-call-todo-progress-bar {
position: absolute;
inset: 0;
height: 100%;
background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
transition: width 0.2s ease;
@apply flex flex-col;
}
.tool-call-todo-empty {
@@ -692,7 +655,7 @@
}
.tool-call-todos {
@apply my-2 flex flex-col gap-2;
@apply my-2 flex flex-col gap-0;
list-style: none;
padding: 4px 0;
}
@@ -700,7 +663,7 @@
.tool-call-todo-item {
@apply flex items-start gap-3;
border: 1px solid var(--border-base);
border-radius: 8px;
border-radius: 0;
padding: 10px 12px;
background-color: var(--surface-secondary);
}