sepehr/Keep
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat(ux): epic UX design improvements across agents, chat, notes, and i18n

Browse Source 
Comprehensive UI/UX updates including agent card redesign, chat container
improvements, note editor enhancements, memory echo notifications, and
updated translations for all 15 locales.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Sepehr Ramezani
2026-04-19 23:01:04 +02:00
parent c2a4c22e5f
commit 402e88b788
208 changed files with 493 additions and 318 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
keep-notes/components/agents/agent-run-log.tsx
View File

@@ -66,15 +66,15 @@ export function AgentRunLog({ agentId, agentName, onClose }: AgentRunLogProps) {
return (
<div className="fixed inset-0 bg-black/30 flex items-center justify-center z-50 p-4">
<div className="bg-white rounded-2xl shadow-xl max-w-md w-full max-h-[70vh] overflow-hidden flex flex-col">
<div className="bg-card rounded-2xl shadow-xl max-w-md w-full max-h-[70vh] overflow-hidden flex flex-col">
{/* Header */}
<div className="flex items-center justify-between px-5 py-4 border-b border-slate-100">
<div className="flex items-center justify-between px-5 py-4 border-b border-border">
<div>
<h3 className="font-semibold text-slate-800">{t('agents.runLog.title')}</h3>
<p className="text-xs text-slate-400">{agentName}</p>
<h3 className="font-semibold text-card-foreground">{t('agents.runLog.title')}</h3>
<p className="text-xs text-muted-foreground">{agentName}</p>
</div>
<button onClick={onClose} className="p-1 rounded-md hover:bg-slate-100">
<X className="w-5 h-5 text-slate-400" />
<button onClick={onClose} className="p-1 rounded-md hover:bg-accent">
<X className="w-5 h-5 text-muted-foreground" />
</button>
</div>
@@ -82,12 +82,12 @@ export function AgentRunLog({ agentId, agentName, onClose }: AgentRunLogProps) {
<div className="flex-1 overflow-y-auto p-4 space-y-2">
{loading && (
<div className="flex items-center justify-center py-8">
<Loader2 className="w-5 h-5 animate-spin text-slate-400" />
<Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
</div>
)}
{!loading && actions.length === 0 && (
<p className="text-center text-sm text-slate-400 py-8">
<p className="text-center text-sm text-muted-foreground py-8">
{t('agents.runLog.noHistory')}
</p>
)}
@@ -103,10 +103,10 @@ export function AgentRunLog({ agentId, agentName, onClose }: AgentRunLogProps) {
key={action.id}
className={`
p-3 rounded-lg border
${action.status === 'success' ? 'bg-green-50/50 border-green-100' : ''}
${action.status === 'failure' ? 'bg-red-50/50 border-red-100' : ''}
${action.status === 'running' ? 'bg-blue-50/50 border-blue-100' : ''}
${action.status === 'pending' ? 'bg-slate-50 border-slate-100' : ''}
${action.status === 'success' ? 'bg-green-50/50 dark:bg-green-950/50 border-green-100 dark:border-green-900' : ''}
${action.status === 'failure' ? 'bg-red-50/50 dark:bg-red-950/50 border-red-100 dark:border-red-900' : ''}
${action.status === 'running' ? 'bg-blue-50/50 dark:bg-blue-950/50 border-blue-100 dark:border-blue-900' : ''}
${action.status === 'pending' ? 'bg-muted border-border' : ''}
`}
>
<div className="flex items-start gap-3">
@@ -114,19 +114,19 @@ export function AgentRunLog({ agentId, agentName, onClose }: AgentRunLogProps) {
{action.status === 'success' && <CheckCircle2 className="w-4 h-4 text-green-500" />}
{action.status === 'failure' && <XCircle className="w-4 h-4 text-red-500" />}
{action.status === 'running' && <Loader2 className="w-4 h-4 text-blue-500 animate-spin" />}
{action.status === 'pending' && <Clock className="w-4 h-4 text-slate-400" />}
{action.status === 'pending' && <Clock className="w-4 h-4 text-muted-foreground" />}
</div>
<div className="flex-1 min-w-0">
<div className="flex items-center justify-between">
<span className="text-sm font-medium text-slate-700">
<span className="text-sm font-medium text-foreground">
{t(statusKeys[action.status] || action.status)}
</span>
<span className="text-xs text-slate-400">
<span className="text-xs text-muted-foreground">
{formatDistanceToNow(new Date(action.createdAt), { addSuffix: true, locale: dateLocale })}
</span>
</div>
{action.log && (
<p className="text-xs text-slate-500 mt-1 line-clamp-2">{action.log}</p>
<p className="text-xs text-muted-foreground mt-1 line-clamp-2">{action.log}</p>
)}
</div>
</div>
@@ -142,13 +142,13 @@ export function AgentRunLog({ agentId, agentName, onClose }: AgentRunLogProps) {
<div className="mt-2 space-y-2 pl-2">
{toolSteps.map((step, i) => (
<div key={i} className="text-xs border-l-2 border-primary/30 pl-2 py-1">
<span className="font-medium text-slate-600">{t('agents.runLog.step', { num: step.step })}</span>
<span className="font-medium text-muted-foreground">{t('agents.runLog.step', { num: step.step })}</span>
{step.toolCalls && step.toolCalls.length > 0 && (
<div className="mt-1 space-y-1">
{step.toolCalls.map((tc, j) => (
<div key={j} className="bg-slate-100 rounded px-2 py-1">
<div key={j} className="bg-muted rounded px-2 py-1">
<span className="font-mono text-primary">{tc.toolName}</span>
<span className="text-slate-400 ml-1">
<span className="text-muted-foreground ml-1">
{JSON.stringify(tc.args).substring(0, 80)}
</span>
</div>