diff --git a/frontend/src/components/pilot/ProposalBanner.tsx b/frontend/src/components/pilot/ProposalBanner.tsx
new file mode 100644
index 00000000..7a760e79
--- /dev/null
+++ b/frontend/src/components/pilot/ProposalBanner.tsx
@@ -0,0 +1,118 @@
+/**
+ * ProposalBanner — chat-composer-anchored banner that carries the lifecycle
+ * of a suggested fix from Proposed → Verifying → terminal outcome.
+ *
+ * Replaces the task-lane SuggestedFix card (Phase 8). The banner renders
+ * above the chat composer in AssistantChatPage. Parent owns the fix record
+ * and the outcome mutations; this component renders + dispatches callbacks.
+ *
+ * Visual reference: docs/FlowAssist_Migration/mockups/06-slide-up-banner.html
+ * + 07-verify-states.html.
+ */
+import { Sparkles, Check, ChevronDown } from 'lucide-react'
+import type {
+  SessionSuggestedFix,
+  FixOutcome,
+} from '@/api/sessionSuggestedFixes'
+
+export type BannerMode =
+  | 'proposed'       // AI just proposed; engineer hasn't applied yet
+  | 'verifying'      // Engineer clicked Apply; awaiting outcome
+  | 'partial'        // Applied partially; awaiting finish or terminal outcome
+  | 'ai_confirming'  // AI emitted [FIX_OUTCOME]; engineer confirms
+  | 'nudge'          // Compact nudge shown after N post-apply messages
+
+export interface ProposalBannerProps {
+  fix: SessionSuggestedFix
+  mode: BannerMode
+  onApply: () => void
+  onDismiss: () => void
+  onOutcome: (outcome: FixOutcome, notes?: string) => void
+  onAcceptAIProposal: () => void
+  onRejectAIProposal: () => void
+  /** Collapsed variant shown as a thin single-line strip. */
+  collapsed?: boolean
+  onToggleCollapsed?: () => void
+}
+
+export function ProposalBanner(props: ProposalBannerProps) {
+  if (props.collapsed) return <CollapsedBanner {...props} />
+  switch (props.mode) {
+    case 'proposed':      return <ProposedBanner {...props} />
+    case 'verifying':     return <VerifyingBanner {...props} />
+    case 'partial':       return <PartialBanner {...props} />
+    case 'ai_confirming': return <AIConfirmingBanner {...props} />
+    case 'nudge':         return <NudgeBanner {...props} />
+  }
+}
+
+function ProposedBanner({ fix, onApply, onDismiss, onToggleCollapsed }: ProposalBannerProps) {
+  return (
+    <div className="relative border-t border-warning/30 bg-gradient-to-b from-warning-dim/40 to-warning-dim/20 px-5 py-3 animate-slide-up">
+      <div className="absolute left-0 top-0 bottom-0 w-[3px] bg-warning" />
+      <div className="flex items-start gap-3">
+        <div className="shrink-0 mt-0.5 w-7 h-7 rounded-md border border-warning/30 bg-warning-dim flex items-center justify-center text-warning">
+          <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-warning">
+            <span>Suggested Fix</span>
+            <span className="tabular-nums px-2 py-[2px] rounded-full bg-warning/20 text-warning text-[10.5px] font-bold">
+              {fix.confidence_pct}% confidence
+            </span>
+          </div>
+          <div className="mt-0.5 text-[14px] font-semibold text-heading leading-snug">
+            {fix.title}
+          </div>
+          <div className="mt-1 text-[12.5px] text-muted-foreground leading-relaxed">
+            {fix.description}
+          </div>
+          {fix.script_template_id && (
+            <div className="mt-1.5 inline-flex items-center gap-1.5 text-[11.5px] text-success">
+              <Check size={11} />
+              Matches an existing Script Library template — one-click apply
+            </div>
+          )}
+        </div>
+        <div className="flex items-center gap-2 shrink-0 pt-0.5">
+          {onToggleCollapsed && (
+            <button
+              onClick={onToggleCollapsed}
+              className="p-1.5 rounded text-muted-foreground hover:bg-white/[0.08] hover:text-primary"
+              aria-label="Collapse"
+            >
+              <ChevronDown size={14} />
+            </button>
+          )}
+          <button
+            onClick={onDismiss}
+            className="px-2.5 py-1.5 rounded text-[12.5px] text-muted-foreground hover:bg-white/[0.08] hover:text-primary"
+          >
+            Dismiss
+          </button>
+          <button
+            onClick={onApply}
+            className="px-3.5 py-[9px] rounded-lg bg-warning text-[#1a1200] font-semibold text-[12.5px] hover:brightness-110 inline-flex items-center gap-1.5"
+          >
+            Apply fix
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="9 18 15 12 9 6" /></svg>
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+// Placeholder renderers — implemented in Tasks 8 & 9.
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function VerifyingBanner(_: ProposalBannerProps) { return null }
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function PartialBanner(_: ProposalBannerProps) { return null }
+// 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 }
+
+export default ProposalBanner
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 607ee349..4f148cc0 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -86,7 +86,12 @@
   --animate-slide-in-bottom: slide-in-from-bottom 200ms ease-out both;
   --animate-scale-in: scale-in 150ms ease-out both;
   --animate-fade: fadeIn 300ms ease both;
+  --animate-slide-up: slide-up 320ms cubic-bezier(.22,.9,.28,1) both;
 
+  @keyframes slide-up {
+    from { transform: translateY(14px); opacity: 0; }
+    to   { transform: translateY(0);    opacity: 1; }
+  }
   @keyframes fade-in {
     from { opacity: 0; } to { opacity: 1; }
   }