style(desktop): gold→purple chrome on landed memory saves

Paint successful memory tool rows with a gradient title, tinted brain
glyph, and purple meta so a save reads prized rather than like a warning.
This commit is contained in:
Brooklyn Nicholson 2026-07-29 18:47:15 -05:00
parent c0364fa02e
commit 508e73a15a
2 changed files with 61 additions and 6 deletions

View file

@ -214,11 +214,14 @@ function ToolGlyph({
copy,
filePath,
icon,
legendary,
status
}: {
copy: ToolStatusCopy
filePath?: string
icon?: string
/** Landed memory write — keep the brain glyph, tint it gold→purple. */
legendary?: boolean
status?: ToolStatus
}) {
const node = status ? (
@ -226,10 +229,16 @@ function ToolGlyph({
) : filePath ? (
<FileTypeIcon className="text-(--ui-text-tertiary)" path={filePath} size="0.875rem" />
) : icon ? (
<ToolIcon className="text-(--ui-text-tertiary)" name={icon} size="0.875rem" />
<ToolIcon
className={legendary ? 'text-(--tool-memory-legendary-icon)' : 'text-(--ui-text-tertiary)'}
name={icon}
size="0.875rem"
/>
) : null
return node ? <span className={TOOL_HEADER_GLYPH_WRAP_CLASS}>{node}</span> : null
return node ? (
<span className={cn(TOOL_HEADER_GLYPH_WRAP_CLASS, legendary && 'tool-memory-legendary-glyph')}>{node}</span>
) : null
}
// Which status (if any) should pre-empt the tool's icon in the leading
@ -275,11 +284,13 @@ function LinkifiedText({ className, text }: { className?: string; text: string }
function ToolTitle({
isPending,
legendary,
status,
title,
titleAction
}: {
isPending: boolean
legendary?: boolean
status: ToolStatus
title: string
titleAction?: ToolTitleAction
@ -290,7 +301,8 @@ function ToolTitle({
SCAFFOLD_LABEL_CLASS,
isPending && 'text-(--conversation-scaffold-meta)',
status === 'error' && 'text-destructive',
status === 'warning' && 'text-amber-700 dark:text-amber-300'
status === 'warning' && 'text-amber-700 dark:text-amber-300',
legendary && !isPending && 'tool-memory-legendary-title text-transparent'
)}
>
{isPending && titleAction ? (
@ -466,6 +478,10 @@ function ToolEntry({ part }: ToolEntryProps) {
const showDiffStats = !isPending && Boolean(diffStats && (diffStats.added > 0 || diffStats.removed > 0))
// Landed memory write gets gold→purple chrome instead of the plain scaffold grey.
const memoryLegendary = !isPending && part.toolName === 'memory' && view.status === 'success'
const memoryMetaClass = memoryLegendary ? 'tool-memory-legendary-meta' : undefined
// The header trailing slot only carries the live duration timer while the
// tool is running. The copy control used to live here too, but an
// `opacity-0` (yet still clickable) button straddling the caret/duration made
@ -542,10 +558,19 @@ function ToolEntry({ part }: ToolEntryProps) {
copy={copy}
filePath={isFileEdit ? view.subtitle : undefined}
icon={view.icon}
legendary={memoryLegendary}
status={leadingStatus(isPending, view.status)}
/>
<ToolTitle isPending={isPending} status={view.status} title={view.title} titleAction={view.titleAction} />
{!isPending && view.countLabel && <span className={SCAFFOLD_META_CLASS}>{view.countLabel}</span>}
<ToolTitle
isPending={isPending}
legendary={memoryLegendary}
status={view.status}
title={view.title}
titleAction={view.titleAction}
/>
{!isPending && view.countLabel && (
<span className={cn(SCAFFOLD_META_CLASS, memoryMetaClass)}>{view.countLabel}</span>
)}
{showDiffStats && diffStats && (
<span className="flex shrink-0 items-center gap-1 font-mono text-[0.625rem] tabular-nums">
{diffStats.added > 0 && (
@ -557,7 +582,7 @@ function ToolEntry({ part }: ToolEntryProps) {
</span>
)}
{!isFileEdit && !isPending && view.durationLabel && (
<span className={SCAFFOLD_META_CLASS}>{view.durationLabel}</span>
<span className={cn(SCAFFOLD_META_CLASS, memoryMetaClass)}>{view.durationLabel}</span>
)}
</span>
</DisclosureRow>

View file

@ -188,6 +188,13 @@
--context-usage-subagents: color-mix(in srgb, var(--ui-blue) 70%, var(--ui-cyan));
--context-usage-memory: color-mix(in srgb, var(--ui-orange) 80%, var(--ui-yellow));
--context-usage-conversation: var(--ui-cyan);
/* Landed memory-write tool row — gold → purple, never amber warning. */
--tool-memory-legendary-from: color-mix(in srgb, var(--ui-yellow) 72%, #f5d08a);
--tool-memory-legendary-mid: color-mix(in srgb, var(--ui-orange) 55%, var(--ui-purple));
--tool-memory-legendary-to: color-mix(in srgb, var(--ui-purple) 82%, #c4b5fd);
--tool-memory-legendary-icon: color-mix(in srgb, var(--ui-yellow) 55%, var(--ui-purple));
--tool-memory-legendary-meta: color-mix(in srgb, var(--ui-purple) 58%, var(--ui-text-tertiary));
--tool-memory-legendary-glow: color-mix(in srgb, var(--ui-purple) 38%, transparent);
/* Diff add/remove, derived from the semantic palette so every diff surface
(tool cards, preview, review pane) tracks the theme's green/red. Only the
foregrounds need a dark override they mix toward the page instead of
@ -738,6 +745,29 @@
}
}
/* Landed `memory` tool row gold purple on the brain glyph + title.
Pair with `text-transparent` so the scaffold label color can't win. */
.tool-memory-legendary-title {
background-image: linear-gradient(
105deg,
var(--tool-memory-legendary-from) 0%,
var(--tool-memory-legendary-mid) 48%,
var(--tool-memory-legendary-to) 100%
);
-webkit-background-clip: text;
background-clip: text;
color: transparent !important;
font-weight: 600;
}
.tool-memory-legendary-glyph {
filter: drop-shadow(0 0 0.28rem var(--tool-memory-legendary-glow));
}
.tool-memory-legendary-meta {
color: var(--tool-memory-legendary-meta);
}
.quest-glow {
animation: quest-glow 1.8s ease-in-out infinite;
}