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

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

backend/app/api/endpoints/ai_sessions.py

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

backend/app/services/flowpilot_engine.py

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

frontend/src/api/aiSessions.ts

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

frontend/src/components/flowpilot/FlowPilotActionBar.tsx

@@ -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 && (
+        <div className="flex gap-2 sm:ml-auto">
-          <button
+          {onPause && (
-            onClick={handlePause}
+            <button
-            disabled={isProcessing || submitting}
+              onClick={handlePause}
-            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"
+              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
+              <Pause size={16} />
-          </button>
+              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}

frontend/src/components/flowpilot/FlowPilotMessageBar.tsx

@@ -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',
+            'flex h-9 w-9 shrink-0 items-center justify-center rounded-lg transition-all',
-            isDisabled
+            message.trim() && !isDisabled
-              ? 'border-border/50 opacity-50'
+              ? 'bg-gradient-brand text-[#101114] hover:opacity-90 active:scale-[0.97]'
-              : 'border-border focus-within:border-[rgba(6,182,212,0.3)]'
+              : '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
+          <Send size={16} />
-            ref={textareaRef}
+        </button>
-            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>
       </div>
     </div>
   )

frontend/src/components/flowpilot/FlowPilotSession.tsx

@@ -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}
         />
       )}
 

frontend/src/hooks/useFlowPilotSession.ts

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

frontend/src/pages/FlowPilotSessionPage.tsx

@@ -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)}
         />