refactor: move FlowPilot actions to header bar, fix dividers

- Moved Resolve/Escalate/Share Update buttons from fixed bottom bar into
  the session header. Desktop: inline buttons + overflow menu (Pause/Close).
  Mobile: single overflow menu with all actions.
- Removed FlowPilotActionBar from bottom — message input is now the only
  fixed element at bottom, giving more breathing room.
- Replaced jarring white dividers (var(--glass-border)) with subtle
  border-border (#2e3240) throughout FlowPilot session.
- Restyled status badge from button-looking element to dot + text indicator
  with semantic colors (green=resolved, amber=escalated).
- Reduced content padding from pb-32 to pb-24.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-03-23 12:41:28 +00:00
parent b118e158d4
commit 0ec59276c7
3 changed files with 259 additions and 33 deletions

View File

@@ -178,7 +178,7 @@ export function FlowPilotMessageBar({ onRespond, disabled = false, isProcessing
return (
<div
className="fixed bottom-[52px] sm:bottom-[56px] right-0 lg:right-72 z-40 px-3 sm:px-6 lg:px-8 pb-2"
className="fixed bottom-0 right-0 lg:right-72 z-40 px-3 sm:px-6 lg:px-8 pb-3"
style={{ left: 'var(--sidebar-w, 0px)' }}
onDragOver={handleDragOver}
onDragEnter={handleDragEnter}

View File

@@ -14,7 +14,6 @@ import type {
} from '@/types/ai-session'
import { ConfidenceIndicator } from './ConfidenceIndicator'
import { FlowPilotStepCard } from './FlowPilotStepCard'
import { FlowPilotActionBar } from './FlowPilotActionBar'
import { FlowPilotMessageBar } from './FlowPilotMessageBar'
import { SessionDocView } from './SessionDocView'
import { StatusUpdateModal } from './StatusUpdateModal'
@@ -170,7 +169,7 @@ export function FlowPilotSession({
return (
<div className="flex h-full flex-col">
{/* Mobile sidebar summary (collapsible) */}
<div className="lg:hidden border-b" style={{ borderColor: 'var(--glass-border)' }}>
<div className="lg:hidden border-b border-border">
<button
onClick={() => setShowMobileSidebar(!showMobileSidebar)}
className="flex w-full items-center justify-between px-3 py-2 sm:px-4"
@@ -230,8 +229,8 @@ export function FlowPilotSession({
{/* Main content area: conversation + sidebar */}
<div className="flex flex-1 min-h-0">
{/* Conversation column — pb-32 provides clearance for the fixed message bar + action bar */}
<div ref={scrollRef} className="flex-1 overflow-y-auto p-3 pb-32 sm:p-4 sm:pb-32 lg:p-6 lg:pb-32">
{/* Conversation column — pb-24 provides clearance for the fixed message bar */}
<div ref={scrollRef} className="flex-1 overflow-y-auto p-3 pb-24 sm:p-4 sm:pb-24 lg:p-6 lg:pb-24">
<div className="mx-auto max-w-2xl space-y-3">
{allSteps.map((step) => (
<FlowPilotStepCard
@@ -248,8 +247,7 @@ export function FlowPilotSession({
{/* Sidebar — desktop only */}
<div
className="hidden w-72 shrink-0 overflow-y-auto border-l p-4 lg:block"
style={{ borderColor: 'var(--glass-border)' }}
className="hidden w-72 shrink-0 overflow-y-auto border-l border-border p-4 lg:block"
>
<div className="space-y-4">
{/* Ticket context */}
@@ -337,7 +335,7 @@ export function FlowPilotSession({
</div>
</div>
{/* Message bar */}
{/* Message bar — now the only fixed bottom element */}
{session.status === 'active' && (
<FlowPilotMessageBar
onRespond={onRespond}
@@ -346,23 +344,6 @@ export function FlowPilotSession({
/>
)}
{/* Action bar */}
{session.status === 'active' && (
<FlowPilotActionBar
canResolve={canResolve}
canEscalate={canEscalate}
isProcessing={isProcessing}
hasPsaTicket={!!session.psa_ticket_id}
sessionId={session.id}
canShareUpdate={allSteps.length >= 2}
onResolve={onResolve}
onEscalate={onEscalate}
onPause={onPause}
onAbandon={onAbandon}
onGenerateStatusUpdate={onGenerateStatusUpdate}
/>
)}
{/* Paused banner */}
{session.status === 'paused' && onResume && (
<div