Michael Chihlas
bdb238a274
Replaces the task-lane SuggestedFix card with the ProposalBanner docked above the chat composer. Wires: - Resolve-while-verifying auto-marks applied_success (one-click resolve). - Escalate-while-verifying opens EscalateInterceptDialog to capture the real outcome (default: didn't work) before handoff. - 3+ post-apply engineer messages trigger the passive Nudge banner. - AI [FIX_OUTCOME] proposals surface in the AIConfirming state; one-click confirm applies the outcome. Banner state resets on session switch via resetSessionDerivedState. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
363 lines
16 KiB
TypeScript
363 lines
16 KiB
TypeScript
/**
|
||
* 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 { useState } from 'react'
|
||
import { Sparkles, Check, ChevronDown, X, MoreHorizontal, Info } from 'lucide-react'
|
||
import { cn } from '@/lib/utils'
|
||
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
|
||
/** Silence the nudge without collapsing it (Task 11 wires this). */
|
||
onSilenceNudge: () => 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>
|
||
)
|
||
}
|
||
|
||
function VerifyingBanner({ fix, onOutcome }: ProposalBannerProps) {
|
||
const [showOverflow, setShowOverflow] = useState(false)
|
||
const appliedLabel = fix.applied_at
|
||
? `Applied ${formatRelativeMinutes(fix.applied_at)}`
|
||
: 'Applied'
|
||
|
||
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="relative 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">
|
||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||
<circle cx="12" cy="12" r="10" />
|
||
<polyline points="12 6 12 12 16 14" />
|
||
</svg>
|
||
<span className="absolute inset-[-3px] rounded-lg animate-pulse-amber pointer-events-none" />
|
||
</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>Verifying</span>
|
||
<span className="px-2 py-[2px] rounded-full bg-warning/20 text-warning text-[10.5px] font-bold normal-case tracking-normal">
|
||
{appliedLabel}
|
||
</span>
|
||
</div>
|
||
<div className="mt-0.5 text-[14px] font-semibold text-heading leading-snug">
|
||
Did "{fix.title}" work?
|
||
</div>
|
||
<div className="mt-1 text-[12.5px] text-muted-foreground leading-relaxed">
|
||
Mark the outcome so the AI can either close the session with this as the resolution, or propose something else.
|
||
</div>
|
||
</div>
|
||
<div className="flex items-center gap-2 shrink-0 pt-0.5 relative">
|
||
<button
|
||
onClick={() => setShowOverflow((v) => !v)}
|
||
className="p-1.5 rounded text-muted-foreground hover:bg-white/[0.08] hover:text-primary"
|
||
aria-label="More options"
|
||
>
|
||
<MoreHorizontal size={14} />
|
||
</button>
|
||
{showOverflow && (
|
||
<div className={cn(
|
||
'absolute top-full right-0 mt-1 w-48 rounded-lg',
|
||
'border border-white/10 bg-card shadow-xl py-1 z-10',
|
||
)}>
|
||
<button
|
||
onClick={() => {
|
||
setShowOverflow(false)
|
||
const notes = window.prompt('What did you run / skip?')
|
||
if (notes && notes.trim()) onOutcome('applied_partial', notes.trim())
|
||
}}
|
||
className="w-full text-left px-3 py-2 text-[12.5px] hover:bg-elevated text-primary"
|
||
>
|
||
Mark partial…
|
||
</button>
|
||
</div>
|
||
)}
|
||
<button
|
||
onClick={() => {
|
||
const reason = window.prompt("Why didn't it work? (optional)")
|
||
onOutcome('applied_failed', reason?.trim() || undefined)
|
||
}}
|
||
className="px-3 py-[9px] rounded-lg border border-danger/30 text-danger text-[12.5px] font-medium hover:bg-danger-dim hover:border-danger inline-flex items-center gap-1.5"
|
||
>
|
||
<X size={12} strokeWidth={2.5} />
|
||
Didn't work
|
||
</button>
|
||
<button
|
||
onClick={() => onOutcome('applied_success')}
|
||
className="px-3 py-[9px] rounded-lg bg-success text-[#0a1a12] font-semibold text-[12.5px] hover:brightness-110 inline-flex items-center gap-1.5"
|
||
>
|
||
<Check size={12} strokeWidth={2.5} />
|
||
It worked
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
function formatRelativeMinutes(iso: string): string {
|
||
const then = new Date(iso).getTime()
|
||
const mins = Math.max(0, Math.round((Date.now() - then) / 60000))
|
||
if (mins === 0) return 'just now'
|
||
if (mins === 1) return '1m ago'
|
||
return `${mins}m ago`
|
||
}
|
||
|
||
function PartialBanner({ fix, onOutcome, onApply }: ProposalBannerProps) {
|
||
return (
|
||
<div className="relative border-t border-info/30 bg-gradient-to-b from-info-dim/40 to-info-dim/20 px-5 py-3 animate-slide-up">
|
||
<div className="absolute left-0 top-0 bottom-0 w-[3px] bg-info" />
|
||
<div className="flex items-start gap-3">
|
||
<div className="shrink-0 mt-0.5 w-7 h-7 rounded-md border border-info/30 bg-info-dim flex items-center justify-center text-info">
|
||
<Info 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-info">
|
||
<span>Partially applied</span>
|
||
<span className="px-2 py-[2px] rounded-full bg-info/20 text-info text-[10.5px] font-bold normal-case tracking-normal">
|
||
Parked
|
||
</span>
|
||
</div>
|
||
<div className="mt-0.5 text-[14px] font-semibold text-heading leading-snug">
|
||
{fix.title}
|
||
</div>
|
||
{fix.partial_notes && (
|
||
<div className="mt-1.5 flex items-center gap-2 px-2.5 py-1.5 rounded-md bg-info/[0.08] border border-info/30 text-[12px] italic text-primary">
|
||
<span className="not-italic font-bold text-info text-[10.5px] uppercase tracking-[0.6px]">Note</span>
|
||
<span>{fix.partial_notes}</span>
|
||
</div>
|
||
)}
|
||
</div>
|
||
<div className="flex items-center gap-2 shrink-0 pt-0.5">
|
||
<button
|
||
onClick={() => {
|
||
const reason = window.prompt("Why didn't it work? (optional)")
|
||
onOutcome('applied_failed', reason?.trim() || undefined)
|
||
}}
|
||
className="px-3 py-[9px] rounded-lg border border-danger/30 text-danger text-[12.5px] font-medium hover:bg-danger-dim hover:border-danger"
|
||
>
|
||
Didn't work
|
||
</button>
|
||
<button
|
||
onClick={onApply}
|
||
className="px-3 py-[9px] rounded-lg bg-card border border-white/10 text-primary text-[12.5px] font-medium hover:bg-elevated"
|
||
>
|
||
Finish it ›
|
||
</button>
|
||
<button
|
||
onClick={() => onOutcome('applied_success')}
|
||
className="px-3 py-[9px] rounded-lg bg-success text-[#0a1a12] font-semibold text-[12.5px] hover:brightness-110"
|
||
>
|
||
It worked
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
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
|