feat: AI marker system prompt fixes, TaskLane activation, and FlowPilot updates
- Fix system prompt to ensure [QUESTIONS]/[ACTIONS] markers in AI responses - Add format reminder injection to user messages for marker compliance - Wire TaskLane activation in prefill and resume paths - Add ActionCardGroup component for structured question/action rendering - Update FlowPilot session and step card components - Update ai-session schemas and types for marker data Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
chihlasm
300
frontend/src/components/assistant/ActionCardGroup.tsx
Normal file
300
frontend/src/components/assistant/ActionCardGroup.tsx
Normal file
@@ -0,0 +1,300 @@
|
||||
import { useState } from 'react'
|
||||
import { Copy, Check, SkipForward, Terminal, ChevronDown, ChevronUp, Send, Clipboard, Loader2, AlertCircle } from 'lucide-react'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { toast } from '@/lib/toast'
|
||||
import type { ActionItem } from '@/types/ai-session'
|
||||
|
||||
type CardState = 'pending' | 'pasting' | 'typing' | 'skipped' | 'done'
|
||||
|
||||
interface CardResponse {
|
||||
label: string
|
||||
state: CardState
|
||||
value: string
|
||||
}
|
||||
|
||||
interface ActionCardGroupProps {
|
||||
actions: ActionItem[]
|
||||
onSubmit: (responses: CardResponse[]) => void
|
||||
disabled?: boolean
|
||||
stale?: boolean
|
||||
}
|
||||
|
||||
export function ActionCardGroup({ actions, onSubmit, disabled, stale }: ActionCardGroupProps) {
|
||||
const [responses, setResponses] = useState<CardResponse[]>(
|
||||
actions.map(a => ({ label: a.label, state: 'pending', value: '' }))
|
||||
)
|
||||
const [showRunAll, setShowRunAll] = useState(false)
|
||||
const [submitting, setSubmitting] = useState(false)
|
||||
const [submitted, setSubmitted] = useState(false)
|
||||
const [submitError, setSubmitError] = useState(false)
|
||||
const [expanded, setExpanded] = useState(false)
|
||||
|
||||
const anyPending = responses.some(r => r.state === 'pending')
|
||||
const isCollapsed = stale && anyPending && !expanded
|
||||
|
||||
const updateCard = (idx: number, updates: Partial<CardResponse>) => {
|
||||
setResponses(prev => prev.map((r, i) => i === idx ? { ...r, ...updates } : r))
|
||||
}
|
||||
|
||||
const allHandled = responses.every(r => r.state !== 'pending' && r.state !== 'pasting' && r.state !== 'typing')
|
||||
const anyInteracted = responses.some(r => r.state !== 'pending')
|
||||
|
||||
const handleSubmit = async () => {
|
||||
setSubmitting(true)
|
||||
setSubmitError(false)
|
||||
try {
|
||||
onSubmit(responses)
|
||||
setSubmitted(true)
|
||||
} catch {
|
||||
setSubmitError(true)
|
||||
} finally {
|
||||
setSubmitting(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleCopyCommand = (command: string) => {
|
||||
navigator.clipboard.writeText(command)
|
||||
toast.success('Copied to clipboard')
|
||||
}
|
||||
|
||||
// Build combined script for "Run All"
|
||||
const commandActions = actions.filter(a => a.command)
|
||||
const combinedScript = commandActions.map((a, i) => (
|
||||
`# ── ${i + 1}. ${a.label} ──\n${a.command}`
|
||||
)).join('\n\n')
|
||||
|
||||
const doneCount = responses.filter(r => r.state === 'done').length
|
||||
const skippedCount = responses.filter(r => r.state === 'skipped').length
|
||||
|
||||
// ── Collapsed state (stale cards from earlier in conversation) ──
|
||||
if (isCollapsed) {
|
||||
const pendingCount = responses.filter(r => r.state === 'pending').length
|
||||
return (
|
||||
<button
|
||||
onClick={() => setExpanded(true)}
|
||||
className="w-full rounded-lg border border-default/50 bg-elevated/20 p-2.5 flex items-center justify-between text-left hover:bg-elevated/40 transition-colors group"
|
||||
>
|
||||
<div className="flex items-center gap-2 text-[0.75rem] text-muted-foreground">
|
||||
<Terminal size={12} />
|
||||
<span>{pendingCount} diagnostic check{pendingCount !== 1 ? 's' : ''} — not completed</span>
|
||||
</div>
|
||||
<span className="text-[0.6875rem] text-accent-text opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
Expand
|
||||
</span>
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
// ── Submitted state ──
|
||||
if (submitted) {
|
||||
return (
|
||||
<div className="rounded-lg border border-success/20 bg-success-dim/20 p-3 space-y-1.5">
|
||||
<div className="flex items-center gap-2 text-[0.8125rem] font-medium text-success">
|
||||
<Check size={14} />
|
||||
<span>{doneCount} checked, {skippedCount} skipped</span>
|
||||
</div>
|
||||
<div className="space-y-0.5">
|
||||
{responses.map((r, i) => (
|
||||
<div key={i} className="flex items-center gap-2 text-[0.75rem] text-muted-foreground">
|
||||
{r.state === 'done' ? (
|
||||
<Check size={10} className="text-success shrink-0" />
|
||||
) : (
|
||||
<SkipForward size={10} className="text-muted-foreground shrink-0" />
|
||||
)}
|
||||
<span className={r.state === 'skipped' ? 'line-through opacity-60' : ''}>
|
||||
{r.label}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
{/* Run All button — only if multiple commands exist */}
|
||||
{commandActions.length > 1 && (
|
||||
<div>
|
||||
<button
|
||||
onClick={() => setShowRunAll(!showRunAll)}
|
||||
className="flex items-center gap-1.5 text-[0.75rem] font-medium text-accent-text hover:text-accent transition-colors"
|
||||
>
|
||||
<Terminal size={12} />
|
||||
<span>Run All ({commandActions.length} commands)</span>
|
||||
{showRunAll ? <ChevronUp size={12} /> : <ChevronDown size={12} />}
|
||||
</button>
|
||||
|
||||
{showRunAll && (
|
||||
<div className="mt-2 rounded-lg border border-default bg-code p-3">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
|
||||
Combined diagnostic script
|
||||
</span>
|
||||
<button
|
||||
onClick={() => handleCopyCommand(combinedScript)}
|
||||
className="flex items-center gap-1 text-[0.75rem] text-muted-foreground hover:text-heading transition-colors"
|
||||
>
|
||||
<Copy size={11} />
|
||||
<span>Copy</span>
|
||||
</button>
|
||||
</div>
|
||||
<pre className="text-[0.8125rem] font-mono text-heading whitespace-pre-wrap overflow-x-auto">
|
||||
{combinedScript}
|
||||
</pre>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Individual action cards */}
|
||||
{actions.map((action, idx) => {
|
||||
const response = responses[idx]
|
||||
const isExpanded = response.state === 'pasting' || response.state === 'typing'
|
||||
|
||||
return (
|
||||
<div
|
||||
key={idx}
|
||||
className={cn(
|
||||
'rounded-lg border p-3 transition-all',
|
||||
response.state === 'done' ? 'border-success/30 bg-success-dim/30' :
|
||||
response.state === 'skipped' ? 'border-default/50 bg-elevated/20 opacity-60' :
|
||||
'border-default bg-card hover:border-hover'
|
||||
)}
|
||||
>
|
||||
{/* Card header */}
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="text-[0.8125rem] font-medium text-heading">{action.label}</div>
|
||||
{action.description && (
|
||||
<div className="text-[0.75rem] text-muted-foreground mt-0.5">{action.description}</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Status badge for handled cards */}
|
||||
{response.state === 'done' && (
|
||||
<span className="shrink-0 text-[10px] font-semibold uppercase tracking-wider text-success">Done</span>
|
||||
)}
|
||||
{response.state === 'skipped' && (
|
||||
<span className="shrink-0 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">Skipped</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Command with copy button */}
|
||||
{action.command && response.state !== 'skipped' && (
|
||||
<div className="mt-2 flex items-center gap-2 rounded bg-code px-2.5 py-1.5">
|
||||
<code className="flex-1 text-[0.75rem] font-mono text-heading truncate">
|
||||
{action.command}
|
||||
</code>
|
||||
<button
|
||||
onClick={() => handleCopyCommand(action.command!)}
|
||||
className="shrink-0 text-muted-foreground hover:text-heading transition-colors"
|
||||
title="Copy command"
|
||||
>
|
||||
<Copy size={12} />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Action buttons — only for pending cards */}
|
||||
{response.state === 'pending' && !disabled && (
|
||||
<div className="mt-2 flex flex-col sm:flex-row items-stretch sm:items-center gap-2">
|
||||
<button
|
||||
onClick={() => updateCard(idx, { state: 'pasting' })}
|
||||
className="flex items-center justify-center gap-1 rounded-md border border-accent/40 bg-accent-dim/30 px-2.5 py-2 sm:py-1 text-[0.75rem] font-medium text-accent-text hover:bg-accent-dim/50 transition-colors min-h-[44px] sm:min-h-0"
|
||||
>
|
||||
<Clipboard size={11} />
|
||||
Paste Result
|
||||
</button>
|
||||
<button
|
||||
onClick={() => updateCard(idx, { state: 'typing' })}
|
||||
className="flex items-center justify-center gap-1 rounded-md border border-default bg-elevated/50 px-2.5 py-2 sm:py-1 text-[0.75rem] font-medium text-heading hover:bg-elevated transition-colors min-h-[44px] sm:min-h-0"
|
||||
>
|
||||
Type Answer
|
||||
</button>
|
||||
<button
|
||||
onClick={() => updateCard(idx, { state: 'skipped' })}
|
||||
className="flex items-center justify-center gap-1 rounded-md px-2.5 py-2 sm:py-1 text-[0.75rem] text-muted-foreground hover:text-heading transition-colors min-h-[44px] sm:min-h-0"
|
||||
>
|
||||
<SkipForward size={11} />
|
||||
Skip
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Expanded input area */}
|
||||
{isExpanded && (
|
||||
<div className="mt-2">
|
||||
<textarea
|
||||
autoFocus
|
||||
value={response.value}
|
||||
onChange={e => updateCard(idx, { value: e.target.value })}
|
||||
placeholder={response.state === 'pasting' ? 'Paste command output here...' : 'Type your answer...'}
|
||||
className="w-full rounded-md border border-default bg-input px-3 py-2 text-[0.8125rem] text-heading placeholder:text-muted-foreground font-mono resize-y min-h-[60px] max-h-[200px] overflow-y-auto focus:outline-none focus:border-accent focus:ring-1 focus:ring-accent/30"
|
||||
rows={3}
|
||||
/>
|
||||
<div className="mt-1.5 flex items-center gap-2">
|
||||
<button
|
||||
onClick={() => updateCard(idx, { state: 'done' })}
|
||||
disabled={!response.value.trim()}
|
||||
className="flex items-center gap-1 rounded-md bg-accent px-2.5 py-1 text-[0.75rem] font-medium text-white disabled:opacity-40 hover:bg-accent-hover transition-colors"
|
||||
>
|
||||
<Check size={11} />
|
||||
Done
|
||||
</button>
|
||||
<button
|
||||
onClick={() => updateCard(idx, { state: 'pending', value: '' })}
|
||||
className="text-[0.75rem] text-muted-foreground hover:text-heading transition-colors"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
|
||||
{/* Submit / Error / Loading */}
|
||||
{anyInteracted && (
|
||||
<div className="flex items-center gap-3">
|
||||
<button
|
||||
onClick={handleSubmit}
|
||||
disabled={!allHandled || disabled || submitting}
|
||||
className={cn(
|
||||
'flex items-center gap-1.5 rounded-lg px-4 py-2 text-[0.8125rem] font-medium transition-colors',
|
||||
allHandled && !submitting
|
||||
? 'bg-accent text-white hover:bg-accent-hover'
|
||||
: 'bg-elevated text-muted-foreground cursor-not-allowed'
|
||||
)}
|
||||
>
|
||||
{submitting ? (
|
||||
<>
|
||||
<Loader2 size={13} className="animate-spin" />
|
||||
Sending...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Send size={13} />
|
||||
Send Responses
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
|
||||
{submitError && (
|
||||
<div className="flex items-center gap-1.5 text-[0.75rem] text-danger">
|
||||
<AlertCircle size={12} />
|
||||
<span>Failed to send</span>
|
||||
<button
|
||||
onClick={handleSubmit}
|
||||
className="underline hover:no-underline"
|
||||
>
|
||||
Retry
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user