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

fix(flowpilot): widen message bar, add close/abandon session support

Browse Source 
- Message bar now fixed-positioned above action bar with full-width
  layout (respects both app sidebar and session sidebar)
- Added abandon_session endpoint (POST /ai-sessions/{id}/abandon)
- Added "Close" button to FlowPilot action bar with confirmation dialog
- Session can now be closed without resolving or escalating

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Michael Chihlas
2026-03-21 18:20:34 -04:00
parent 74bc5a532d
commit 6ecb5a9bbd
8 changed files with 170 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
backend/app/api/endpoints/ai_sessions.py
View File

@@ -396,6 +396,34 @@ async def resume_session(
await db.commit()
# ── Abandon / Close ──
@router.post("/{session_id}/abandon", status_code=204)
@limiter.limit("15/minute")
async def abandon_session(
request: Request,
session_id: UUID,
current_user: Annotated[User, Depends(get_current_active_user)],
db: Annotated[AsyncSession, Depends(get_db)],
_: None = Depends(require_engineer_or_admin),
reason: str | None = None,
):
"""Close a session without resolving or escalating."""
try:
await flowpilot_engine.abandon_session(
session_id=session_id,
user_id=current_user.id,
reason=reason,
db=db,
)
except ValueError as e:
raise HTTPException(status_code=status.HTTP_400_BAD_REQUEST, detail=str(e))
except PermissionError as e:
raise HTTPException(status_code=status.HTTP_403_FORBIDDEN, detail=str(e))
await db.commit()
# ── Escalation Queue ──
@router.get("/escalation-queue", response_model=list[AISessionSummary])

23
backend/app/services/flowpilot_engine.py
View File

@@ -793,6 +793,29 @@ async def resume_session(
await db.flush()
async def abandon_session(
session_id: UUID,
user_id: UUID,
reason: Optional[str],
db: AsyncSession,
) -> None:
"""Close a session without resolving or escalating.
Used when the engineer no longer needs help, figured it out on their own,
or the session is no longer relevant.
"""
session = await _load_session(session_id, user_id, db)
if session.status not in ("active", "paused"):
raise ValueError(f"Cannot close session in status: {session.status}")
session.status = "abandoned"
session.resolved_at = datetime.now(timezone.utc)
if reason:
session.resolution_notes = reason
await db.flush()
async def rate_session(
session_id: UUID,
rating: int,

6
frontend/src/api/aiSessions.ts
View File

@@ -96,6 +96,12 @@ export const aiSessionsApi = {
await apiClient.post(`/ai-sessions/${sessionId}/resume`)
},
async abandonSession(sessionId: string, reason?: string): Promise<void> {
await apiClient.post(`/ai-sessions/${sessionId}/abandon`, null, {
params: reason ? { reason } : undefined,
})
},
async pickupSession(sessionId: string, data: PickupSessionRequest): Promise<StepResponseResponse> {
const response = await apiClient.post<StepResponseResponse>(
`/ai-sessions/${sessionId}/pickup`,

76
frontend/src/components/flowpilot/FlowPilotActionBar.tsx
View File

@@ -1,5 +1,5 @@
import { useState } from 'react'
import { CheckCircle2, ArrowUpRight, Pause } from 'lucide-react'
import { CheckCircle2, ArrowUpRight, Pause, X } from 'lucide-react'
import { EscalateModal } from './EscalateModal'
import type { ResolveSessionRequest, EscalateSessionRequest, SessionDocumentation } from '@/types/ai-session'
@@ -12,6 +12,7 @@ interface FlowPilotActionBarProps {
onResolve: (data: ResolveSessionRequest) => Promise<SessionDocumentation>
onEscalate: (data: EscalateSessionRequest) => Promise<SessionDocumentation>
onPause?: () => Promise<void>
onAbandon?: () => Promise<void>
}
export function FlowPilotActionBar({
@@ -23,9 +24,11 @@ export function FlowPilotActionBar({
onResolve,
onEscalate,
onPause,
onAbandon,
}: FlowPilotActionBarProps) {
const [showResolve, setShowResolve] = useState(false)
const [showEscalate, setShowEscalate] = useState(false)
const [showAbandon, setShowAbandon] = useState(false)
const [resolutionSummary, setResolutionSummary] = useState('')
const [submitting, setSubmitting] = useState(false)
@@ -51,6 +54,18 @@ export function FlowPilotActionBar({
}
}
const handleAbandon = async () => {
if (onAbandon) {
setSubmitting(true)
try {
await onAbandon()
setShowAbandon(false)
} finally {
setSubmitting(false)
}
}
}
return (
<>
{/* Bottom bar — fixed to viewport bottom, works regardless of height chain */}
@@ -76,16 +91,28 @@ export function FlowPilotActionBar({
Escalate
</button>
</div>
{onPause && (
<button
onClick={handlePause}
disabled={isProcessing || submitting}
className="flex items-center justify-center gap-2 rounded-lg bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] px-4 py-2 min-h-[44px] text-sm font-medium text-muted-foreground hover:text-foreground hover:border-[rgba(255,255,255,0.12)] disabled:opacity-40 disabled:pointer-events-none transition-colors sm:ml-auto"
>
<Pause size={16} />
Pause
</button>
)}
<div className="flex gap-2 sm:ml-auto">
{onPause && (
<button
onClick={handlePause}
disabled={isProcessing || submitting}
className="flex items-center justify-center gap-2 rounded-lg bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] px-4 py-2 min-h-[44px] text-sm font-medium text-muted-foreground hover:text-foreground hover:border-[rgba(255,255,255,0.12)] disabled:opacity-40 disabled:pointer-events-none transition-colors"
>
<Pause size={16} />
Pause
</button>
)}
{onAbandon && (
<button
onClick={() => setShowAbandon(true)}
disabled={isProcessing || submitting}
className="flex items-center justify-center gap-2 rounded-lg bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] px-4 py-2 min-h-[44px] text-sm font-medium text-muted-foreground hover:text-foreground hover:border-[rgba(255,255,255,0.12)] disabled:opacity-40 disabled:pointer-events-none transition-colors"
>
<X size={16} />
Close
</button>
)}
</div>
</div>
{/* Resolve modal */}
@@ -121,6 +148,33 @@ export function FlowPilotActionBar({
</div>
)}
{/* Close/Abandon confirmation */}
{showAbandon && (
<div className="fixed inset-0 z-50 flex items-end sm:items-center justify-center bg-black/60 backdrop-blur-sm">
<div className="glass-card-static w-full max-w-full sm:max-w-lg mx-0 sm:mx-4 p-4 sm:p-6 rounded-t-2xl sm:rounded-2xl">
<h3 className="font-heading text-lg font-semibold text-foreground mb-1">Close Session</h3>
<p className="text-sm text-muted-foreground mb-4">
Are you sure you want to close this session? The session history will be kept but it won't count as resolved.
</p>
<div className="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end">
<button
onClick={() => setShowAbandon(false)}
className="rounded-lg px-4 py-2 min-h-[44px] text-sm text-muted-foreground hover:text-foreground transition-colors"
>
Cancel
</button>
<button
onClick={handleAbandon}
disabled={submitting}
className="rounded-lg bg-rose-500/20 border border-rose-500/30 px-4 py-2 min-h-[44px] text-sm font-medium text-rose-400 hover:bg-rose-500/30 disabled:opacity-50 transition-colors"
>
{submitting ? 'Closing...' : 'Close Session'}
</button>
</div>
</div>
</div>
)}
{/* Escalate modal */}
<EscalateModal
open={showEscalate}

62
frontend/src/components/flowpilot/FlowPilotMessageBar.tsx
View File

@@ -41,43 +41,41 @@ export function FlowPilotMessageBar({ onRespond, disabled = false, isProcessing
return (
<div
className="fixed bottom-[60px] right-0 z-40 px-3 sm:px-4 lg:px-5 pb-2"
className="fixed bottom-[68px] right-0 lg:right-72 z-40 px-4 sm:px-6 lg:px-8 pb-2"
style={{ left: 'var(--sidebar-w, 0px)' }}
>
<div className="mx-auto max-w-2xl lg:pr-72">
<div
<div
className={cn(
'flex items-end gap-2 rounded-xl border p-3 transition-colors',
isDisabled
? 'border-border/50 opacity-50'
: 'border-border focus-within:border-[rgba(6,182,212,0.3)]'
)}
style={{ background: 'rgba(16, 17, 20, 0.95)', backdropFilter: 'blur(16px)' }}
>
<textarea
ref={textareaRef}
value={message}
onChange={handleInput}
onKeyDown={handleKeyDown}
placeholder={isProcessing ? 'FlowPilot is thinking...' : 'Type a message...'}
disabled={isDisabled}
rows={1}
className="flex-1 resize-none bg-transparent text-sm text-foreground placeholder:text-muted-foreground focus:outline-none disabled:cursor-not-allowed py-1.5 px-2"
/>
<button
onClick={handleSubmit}
disabled={isDisabled || !message.trim()}
aria-label="Send message"
className={cn(
'flex items-end gap-2 rounded-xl border p-2 transition-colors',
isDisabled
? 'border-border/50 opacity-50'
: 'border-border focus-within:border-[rgba(6,182,212,0.3)]'
'flex h-9 w-9 shrink-0 items-center justify-center rounded-lg transition-all',
message.trim() && !isDisabled
? 'bg-gradient-brand text-[#101114] hover:opacity-90 active:scale-[0.97]'
: 'bg-[rgba(255,255,255,0.04)] text-muted-foreground cursor-not-allowed'
)}
style={{ background: 'rgba(16, 17, 20, 0.95)', backdropFilter: 'blur(16px)' }}
>
<textarea
ref={textareaRef}
value={message}
onChange={handleInput}
onKeyDown={handleKeyDown}
placeholder={isProcessing ? 'FlowPilot is thinking...' : 'Type a message...'}
disabled={isDisabled}
rows={1}
className="flex-1 resize-none bg-transparent text-sm text-foreground placeholder:text-muted-foreground focus:outline-none disabled:cursor-not-allowed py-1.5 px-2"
/>
<button
onClick={handleSubmit}
disabled={isDisabled || !message.trim()}
aria-label="Send message"
className={cn(
'flex h-8 w-8 shrink-0 items-center justify-center rounded-lg transition-all',
message.trim() && !isDisabled
? 'bg-gradient-brand text-[#101114] hover:opacity-90 active:scale-[0.97]'
: 'bg-[rgba(255,255,255,0.04)] text-muted-foreground cursor-not-allowed'
)}
>
<Send size={14} />
</button>
</div>
<Send size={16} />
</button>
</div>
</div>
)

3
frontend/src/components/flowpilot/FlowPilotSession.tsx
View File

@@ -36,6 +36,7 @@ interface FlowPilotSessionProps {
onEscalate: (data: EscalateSessionRequest) => Promise<SessionDocumentation>
onPause?: () => Promise<void>
onResume?: () => Promise<void>
onAbandon?: () => Promise<void>
onRate: (rating: number) => void
onReloadSession?: () => Promise<void>
}
@@ -56,6 +57,7 @@ export function FlowPilotSession({
onEscalate,
onPause,
onResume,
onAbandon,
onRate,
onReloadSession,
}: FlowPilotSessionProps) {
@@ -321,6 +323,7 @@ export function FlowPilotSession({
onResolve={onResolve}
onEscalate={onEscalate}
onPause={onPause}
onAbandon={onAbandon}
/>
)}

14
frontend/src/hooks/useFlowPilotSession.ts
View File

@@ -29,6 +29,7 @@ export interface UseFlowPilotSession {
escalateSession: (data: EscalateSessionRequest) => Promise<SessionDocumentation>
pauseSession: () => Promise<void>
resumeOwnSession: () => Promise<void>
abandonSession: () => Promise<void>
rateSession: (rating: number, feedback?: string) => Promise<void>
loadSession: (sessionId: string) => Promise<void>
@@ -190,6 +191,18 @@ export function useFlowPilotSession(): UseFlowPilotSession {
}
}, [session])
const abandonSession = useCallback(async () => {
if (!session) return
try {
await aiSessionsApi.abandonSession(session.id)
setSession(prev => prev ? { ...prev, status: 'abandoned' } : null)
setCurrentStep(null)
toast.success('Session closed')
} catch {
toast.error('Failed to close session')
}
}, [session])
const rateSession = useCallback(async (rating: number, feedback?: string) => {
if (!session) return
try {
@@ -245,6 +258,7 @@ export function useFlowPilotSession(): UseFlowPilotSession {
escalateSession,
pauseSession,
resumeOwnSession,
abandonSession,
rateSession,
loadSession,
isActive,

1
frontend/src/pages/FlowPilotSessionPage.tsx
View File

@@ -230,6 +230,7 @@ export default function FlowPilotSessionPage() {
onEscalate={fp.escalateSession}
onPause={fp.pauseSession}
onResume={fp.resumeOwnSession}
onAbandon={fp.abandonSession}
onRate={fp.rateSession}
onReloadSession={() => fp.loadSession(fp.session!.id)}
/>