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>

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 && (
-          <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}

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',
-            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>
   )

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