feat(pilot): banner AI-confirming, Nudge, Collapsed states

Completes ProposalBanner's state machine. AIConfirming (accent-blue)
surfaces the AI's [FIX_OUTCOME] proposal with one-click accept; Nudge
is the compact passive-prompt variant for post-apply chats; Collapsed
is the 28px expand-hint strip.

Adds onSilenceNudge prop so the parent can silence the nudge without
collapsing it (Task 11 wires this). Removes the last three stale
eslint-disable-next-line comments — all sub-components now use props.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-04-23 15:39:08 -04:00
parent 7fa1d6a32f
commit 217747f46e

View File

@@ -35,6 +35,8 @@ export interface ProposalBannerProps {
/** Collapsed variant shown as a thin single-line strip. */
collapsed?: boolean
onToggleCollapsed?: () => void
/** Silence the nudge without collapsing it (Task 11 wires this). */
onSilenceNudge?: () => void
}
export function ProposalBanner(props: ProposalBannerProps) {
@@ -245,12 +247,116 @@ function PartialBanner({ fix, onOutcome, onApply }: ProposalBannerProps) {
)
}
// Placeholder renderers — implemented in Task 9.
// eslint-disable-next-line @typescript-eslint/no-unused-vars
function AIConfirmingBanner(_: ProposalBannerProps) { return null }
// eslint-disable-next-line @typescript-eslint/no-unused-vars
function NudgeBanner(_: ProposalBannerProps) { return null }
// eslint-disable-next-line @typescript-eslint/no-unused-vars
function CollapsedBanner(_: ProposalBannerProps) { return null }
function AIConfirmingBanner({ fix, onAcceptAIProposal, onRejectAIProposal }: ProposalBannerProps) {
const proposal = fix.ai_outcome_proposal
if (!proposal) return null
const isSuccess = proposal.outcome === 'success'
const isFailure = proposal.outcome === 'failure'
const headlineVerb = isSuccess
? 'resolved the issue'
: isFailure
? "didn't work"
: 'was partially applied'
return (
<div className="relative border-t border-accent/30 bg-gradient-to-b from-accent-dim/40 to-accent-dim/20 px-5 py-3 animate-slide-up">
<div className="absolute left-0 top-0 bottom-0 w-[3px] bg-accent" />
<div className="flex items-start gap-3">
<div className="shrink-0 mt-0.5 w-7 h-7 rounded-md border border-accent/30 bg-accent-dim flex items-center justify-center text-accent">
<Sparkles size={15} />
</div>
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2 font-heading text-[10px] font-semibold uppercase tracking-[1.2px] text-accent">
<span>AI detected outcome</span>
<span className="px-2 py-[2px] rounded-full bg-accent/20 text-accent text-[10.5px] font-bold normal-case tracking-normal">
{isSuccess ? 'Success' : isFailure ? 'Failure' : 'Partial'}
</span>
</div>
<div className="mt-0.5 text-[14px] font-semibold text-heading leading-snug">
AI thinks the fix {headlineVerb} — confirm?
</div>
<div className="mt-1 text-[12.5px] text-muted-foreground leading-relaxed">
{proposal.reason || 'Based on the recent chat. One click either confirms or corrects.'}
</div>
</div>
<div className="flex items-center gap-2 shrink-0 pt-0.5">
<button
onClick={onRejectAIProposal}
className="px-3 py-[9px] rounded-lg text-muted-foreground text-[12.5px] hover:bg-white/[0.08] hover:text-primary"
>
Not yet
</button>
<button
onClick={onAcceptAIProposal}
className={cn(
'px-3 py-[9px] rounded-lg font-semibold text-[12.5px] inline-flex items-center gap-1.5 hover:brightness-110',
isSuccess
? 'bg-success text-[#0a1a12]'
: 'bg-danger text-[#180808]',
)}
>
<Check size={12} strokeWidth={2.5} />
Confirm{isSuccess ? ' · Resolve' : ''}
</button>
</div>
</div>
</div>
)
}
function NudgeBanner({ fix, onOutcome, onSilenceNudge }: ProposalBannerProps) {
return (
<div className="relative border-t border-warning/30 bg-warning-dim/60 px-5 py-2 flex items-center gap-3">
<div className="absolute left-0 top-0 bottom-0 w-[3px] bg-warning" />
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="text-warning shrink-0">
<circle cx="12" cy="12" r="10" />
<path d="M12 8v4" />
<path d="M12 16h.01" />
</svg>
<span className="flex-1 text-[12.5px] text-primary">
Did <strong className="text-heading">"{fix.title}"</strong> work?
</span>
<button
onClick={onSilenceNudge}
className="px-2.5 py-1 rounded text-[12px] text-muted-foreground hover:bg-white/[0.08] hover:text-primary"
>
Still checking
</button>
<button
onClick={() => {
const reason = window.prompt("Why didn't it work? (optional)")
onOutcome('applied_failed', reason?.trim() || undefined)
}}
className="px-2.5 py-1 rounded border border-danger/30 text-danger text-[12px] hover:bg-danger-dim"
>
No
</button>
<button
onClick={() => onOutcome('applied_success')}
className="px-2.5 py-1 rounded bg-success text-[#0a1a12] font-semibold text-[12px] hover:brightness-110"
>
Yes
</button>
</div>
)
}
function CollapsedBanner({ fix, onToggleCollapsed }: ProposalBannerProps) {
return (
<button
onClick={onToggleCollapsed}
className="relative w-full border-t border-warning/30 bg-warning-dim/40 px-5 py-2 flex items-center gap-2.5 hover:bg-warning-dim/60 transition-colors text-left"
>
<div className="absolute left-0 top-0 bottom-0 w-[3px] bg-warning" />
<Sparkles size={12} className="text-warning shrink-0" />
<span className="flex-1 text-[12px] font-medium text-heading truncate">{fix.title}</span>
<span className="px-1.5 py-[1px] rounded-full bg-warning/20 text-warning text-[10.5px] font-bold tabular-nums">
{fix.confidence_pct}%
</span>
<span className="text-muted-foreground text-[11px]"> expand</span>
</button>
)
}
export default ProposalBanner