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

feat(pilot): banner Verifying + Partial states

Browse Source 
Verifying: amber pulse animation, confidence pill becomes 'Applied Xm ago',
three actions (overflow for Mark partial, Didn't work, It worked). window.prompt
used for the partial notes + failure reason inputs — good-enough v1 pending
an inline composer.

Partial: cyan-toned to signal 'parked, outcome unknown', shows saved notes
inline, Finish it / Didn't work / It worked actions.

Adds pulse-amber to @theme animations alongside slide-up.

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

150
frontend/src/components/pilot/ProposalBanner.tsx
View File

@@ -9,7 +9,9 @@
* Visual reference: docs/FlowAssist_Migration/mockups/06-slide-up-banner.html
* + 07-verify-states.html.
*/
import { Sparkles, Check, ChevronDown } from 'lucide-react'
import { useState } from 'react'
import { Sparkles, Check, ChevronDown, X, MoreHorizontal, Info } from 'lucide-react'
import { cn } from '@/lib/utils'
import type {
SessionSuggestedFix,
FixOutcome,
@@ -103,11 +105,147 @@ function ProposedBanner({ fix, onApply, onDismiss, onToggleCollapsed }: Proposal
)
}
// 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 }
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>
)
}
// 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

6
frontend/src/index.css
View File

@@ -87,11 +87,17 @@
--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;
--animate-pulse-amber: pulse-amber 1.6s infinite;
@keyframes slide-up {
from { transform: translateY(14px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
@keyframes pulse-amber {
0% { box-shadow: 0 0 0 0 rgba(251,191,36,0.45); }
70% { box-shadow: 0 0 0 10px rgba(251,191,36,0); }
100% { box-shadow: 0 0 0 0 rgba(251,191,36,0); }
}
@keyframes fade-in {
from { opacity: 0; } to { opacity: 1; }
}