From 217747f46ecdc00b3d2b9183d769749f0fc1b915 Mon Sep 17 00:00:00 2001
From: Michael Chihlas <michael@resolutionflow.com>
Date: Thu, 23 Apr 2026 15:39:08 -0400
Subject: [PATCH] feat(pilot): banner AI-confirming, Nudge, Collapsed states
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 .../src/components/pilot/ProposalBanner.tsx   | 120 +++++++++++++++++-
 1 file changed, 113 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/pilot/ProposalBanner.tsx b/frontend/src/components/pilot/ProposalBanner.tsx
index 264213fa..491ae6f8 100644
--- a/frontend/src/components/pilot/ProposalBanner.tsx
+++ b/frontend/src/components/pilot/ProposalBanner.tsx
@@ -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