chihlasm/resolutionflow
1
0
Fork 0
Code Issues 23 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat(pilot): ProposalBanner scaffold + Proposed state

Browse Source 
New component that will replace the task-lane SuggestedFix card. Docks
above the chat composer with a 320ms slide-up animation. This commit
implements only the Proposed state (Tasks 8 & 9 fill Verifying, Partial,
AI-confirming, Nudge, Collapsed).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Michael Chihlas
2026-04-23 15:25:41 -04:00
parent cdd29b460e
commit ac67e48500
2 changed files with 123 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

118
frontend/src/components/pilot/ProposalBanner.tsx Normal file
View File

@@ -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

5
frontend/src/index.css
View File

@@ -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; }
}