feat: in-app Orchestrator (Phase 2) — multi-agent conductor
Brings the deterministic Han-flow conductor into BooCode: launch any read-only flow from BooChat or BooCoder, watch each agent stream live in a Paseo-style run pane, get an evidence-disciplined report — on local Qwen, persisted and resumable. Read-only enforced hard via qwen --approval-mode plan (orchestrator tasks fail closed if qwen is unavailable; never fall to write-capable native). Backend (apps/coder): re-homed conductor defs, flow_runs/flow_steps schema, flow-runner + dispatcher onTaskTerminal hook, restart-resume, runs routes (launch/list/get/cancel), user-channel WS. Contracts: two flow_run_* frames. Web: orchestrator pane kind + OrchestratorPane, Workflow button + slash flows (BooChat/BooCoder parity), FlowLauncherDialog, "New Orchestrator" in the + and split menus, runs history + export. Plan: openspec/changes/orchestrator. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
import { useCallback, useEffect, useMemo, useRef, useState, type DragEvent, type KeyboardEvent } from 'react';
|
||||
import { Globe, ListPlus, Paperclip, Send, Square, SquareSlash } from 'lucide-react';
|
||||
import { Globe, ListPlus, Paperclip, Send, Square, SquareSlash, Workflow } from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
import { Button } from '@/components/ui/button';
|
||||
@@ -17,7 +17,7 @@ import { FileMentionPopover } from '@/components/FileMentionPopover';
|
||||
import { DropOverlay } from '@/components/DropOverlay';
|
||||
import { AgentPicker } from '@/components/AgentPicker';
|
||||
import { ContextMeter } from '@/components/ContextMeter';
|
||||
import { SlashCommandPicker, type SlashCommandGroup } from '@/components/SlashCommandPicker';
|
||||
import { SlashCommandPicker, type SlashCommandGroup, type SlashCommandItem } from '@/components/SlashCommandPicker';
|
||||
import { isSlashCommandToken, parseSlashInput, slashQuery } from '@/lib/slash-command';
|
||||
import { api } from '@/api/client';
|
||||
import type { Message } from '@/api/types';
|
||||
@@ -28,6 +28,23 @@ import { useViewport } from '@/hooks/useViewport';
|
||||
|
||||
const MAX_ATTACHMENTS = 10;
|
||||
|
||||
// Read-only analysis/review flows surfaced as slash commands in both panes.
|
||||
// Full 22-flow catalog is exposed via the Workflow button (FlowLauncherDialog, Phase 10).
|
||||
const FLOW_SLASH_ITEMS: SlashCommandItem[] = [
|
||||
{ name: 'research', description: 'options, prior art, trade-offs → recommendation' },
|
||||
{ name: 'investigate', description: 'root-cause a bug/failure from evidence' },
|
||||
{ name: 'code-review', description: 'per-dimension review → adversarially verify findings' },
|
||||
{ name: 'architectural-analysis',description: 'structure + behaviour + concurrency → architecture synthesis' },
|
||||
{ name: 'security-review', description: 'adversarial security analysis (exploit-path proof standard)' },
|
||||
{ name: 'gap-analysis', description: 'gaps between two artifacts (impl vs spec, etc.)' },
|
||||
{ name: 'data-review', description: 'schema / query / data-access audit' },
|
||||
{ name: 'devops-review', description: 'production-readiness / operability review' },
|
||||
{ name: 'issue-triage', description: 'assess + prioritise a reported issue' },
|
||||
{ name: 'project-discovery', description: 'discover a repo: stack, structure, tooling' },
|
||||
{ name: 'test-planning', description: 'behaviour-focused test plan' },
|
||||
];
|
||||
const FLOW_COMMAND_NAMES = new Set(FLOW_SLASH_ITEMS.map((c) => c.name));
|
||||
|
||||
interface Props {
|
||||
disabled?: boolean;
|
||||
projectId: string;
|
||||
@@ -108,14 +125,27 @@ export function ChatInput({ disabled, projectId, agentId, onAgentChange, session
|
||||
for (const s of skills) m.set(s.name, true);
|
||||
return m;
|
||||
}, [skills]);
|
||||
// Flat display source for the hint (and the picker's no-groups fallback):
|
||||
// caller-provided groups flattened, else the BooChat skills.
|
||||
// Effective slash groups: caller groups (CoderPane) or skills group (BooChat),
|
||||
// always with the Flows group appended — gives both panes the orchestrator flows
|
||||
// in their slash menus from one shared definition.
|
||||
const effectiveSlashGroups = useMemo<SlashCommandGroup[]>(() => {
|
||||
const flowGroup: SlashCommandGroup = {
|
||||
label: 'Flows',
|
||||
items: FLOW_SLASH_ITEMS,
|
||||
icon: <Workflow className="size-3 shrink-0" />,
|
||||
};
|
||||
if (slashGroups) return [...slashGroups, flowGroup];
|
||||
const skillItems = skills.map((s) => ({ name: s.name, description: s.description }));
|
||||
if (skillItems.length > 0) {
|
||||
return [{ label: 'Skills', items: skillItems }, flowGroup];
|
||||
}
|
||||
return [flowGroup];
|
||||
}, [slashGroups, skills]);
|
||||
|
||||
// Flat list used for the chip count and keyboard-nav across all groups.
|
||||
const slashItems = useMemo(
|
||||
() =>
|
||||
slashGroups
|
||||
? slashGroups.flatMap((g) => g.items)
|
||||
: skills.map((s) => ({ name: s.name, description: s.description })),
|
||||
[slashGroups, skills],
|
||||
() => effectiveSlashGroups.flatMap((g) => g.items),
|
||||
[effectiveSlashGroups],
|
||||
);
|
||||
const [fileIndex, setFileIndex] = useState<string[] | null>(null);
|
||||
const textareaRef = useRef<HTMLTextAreaElement | null>(null);
|
||||
@@ -203,6 +233,35 @@ export function ChatInput({ disabled, projectId, agentId, onAgentChange, session
|
||||
if (!text && attachments.length === 0) return;
|
||||
if (disabled || busy) return;
|
||||
|
||||
// Orchestrator flow slash commands: launch immediately via api.runs (band=small).
|
||||
// Runs before skill dispatch so flow names are never misrouted as skills.
|
||||
if (attachments.length === 0 && text.startsWith('/')) {
|
||||
const flowParsed = parseSlashInput(text);
|
||||
if (flowParsed && FLOW_COMMAND_NAMES.has(flowParsed.cmdName)) {
|
||||
setBusy(true);
|
||||
try {
|
||||
const { run_id } = await api.runs.launch({
|
||||
project_id: projectId,
|
||||
flow_name: flowParsed.cmdName,
|
||||
band: 'small',
|
||||
input: { question: flowParsed.args.length > 0 ? flowParsed.args : flowParsed.cmdName },
|
||||
});
|
||||
setValue('');
|
||||
setAttachments([]);
|
||||
setSlashState(null);
|
||||
sessionEvents.emit({
|
||||
type: 'open_orchestrator_pane',
|
||||
state: { run_id, flow_name: flowParsed.cmdName, band: 'small' },
|
||||
});
|
||||
} catch (err) {
|
||||
toast.error(err instanceof Error ? err.message : `/${flowParsed.cmdName} failed`);
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// Batch 9.6: slash-command dispatch. Only when no attachments and the
|
||||
// input parses to a known skill. Falls through to onSend for unknown
|
||||
// slash names (literal text) or when slash dispatch isn't wired.
|
||||
@@ -654,6 +713,18 @@ export function ChatInput({ disabled, projectId, agentId, onAgentChange, session
|
||||
<span className="max-md:hidden">{slashItems.length}</span>
|
||||
</button>
|
||||
)}
|
||||
{/* Orchestrator Workflow button — emits open_flow_launcher (Phase 10 dialog listens).
|
||||
Between SquareSlash and Globe; icon-only on mobile matching the slash chip. */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => sessionEvents.emit({ type: 'open_flow_launcher', project_id: projectId })}
|
||||
aria-label="Flow launcher"
|
||||
title="Open flow launcher"
|
||||
className="inline-flex items-center gap-1.5 rounded-full border border-border px-2.5 py-1 text-xs text-muted-foreground transition-colors hover:bg-muted hover:text-foreground max-md:min-h-[36px] max-md:min-w-[36px]"
|
||||
>
|
||||
<Workflow className="size-3.5" />
|
||||
<span className="max-md:hidden">Flows</span>
|
||||
</button>
|
||||
{sessionId && (
|
||||
<button
|
||||
type="button"
|
||||
@@ -737,11 +808,11 @@ export function ChatInput({ disabled, projectId, agentId, onAgentChange, session
|
||||
<SlashCommandPicker
|
||||
query={slashState.query}
|
||||
items={slashItems}
|
||||
groups={slashGroups}
|
||||
groups={effectiveSlashGroups}
|
||||
inputRef={textareaRef}
|
||||
onSelect={handleSlashSelect}
|
||||
onClose={() => setSlashState(null)}
|
||||
emptyLabel={slashGroups ? 'No commands available' : 'No skills available'}
|
||||
emptyLabel="No commands available"
|
||||
/>
|
||||
)}
|
||||
{/* Slash-commands chip menu (click-opened); anchored to the chip. */}
|
||||
@@ -749,14 +820,14 @@ export function ChatInput({ disabled, projectId, agentId, onAgentChange, session
|
||||
<SlashCommandPicker
|
||||
query=""
|
||||
items={slashItems}
|
||||
groups={slashGroups}
|
||||
groups={effectiveSlashGroups}
|
||||
inputRef={cmdChipRef}
|
||||
onSelect={(name) => {
|
||||
setCmdMenuOpen(false);
|
||||
handleSlashSelect(name);
|
||||
}}
|
||||
onClose={() => setCmdMenuOpen(false)}
|
||||
emptyLabel={slashGroups ? 'No commands available' : 'No skills available'}
|
||||
emptyLabel="No commands available"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -36,6 +36,7 @@ interface Props {
|
||||
// Mixed tabs: the "+" adds a tab of the chosen kind to THIS pane.
|
||||
onNewTab: (kind: WorkspaceTabKind) => void;
|
||||
onSplitPane: (kind: 'chat' | 'terminal' | 'coder') => void;
|
||||
onNewOrchestrator?: () => void;
|
||||
onReopenPane?: () => void;
|
||||
onShowHistory: () => void;
|
||||
onRename: (chatId: string, name: string) => Promise<void>;
|
||||
@@ -67,6 +68,7 @@ export function ChatTabBar({
|
||||
onCloseAll,
|
||||
onNewTab,
|
||||
onSplitPane,
|
||||
onNewOrchestrator,
|
||||
onReopenPane,
|
||||
onShowHistory,
|
||||
onRename,
|
||||
@@ -227,6 +229,7 @@ export function ChatTabBar({
|
||||
<PaneHeaderActions
|
||||
onNewTab={onNewTab}
|
||||
onSplitPane={onSplitPane}
|
||||
onNewOrchestrator={onNewOrchestrator}
|
||||
onReopenPane={onReopenPane}
|
||||
onShowHistory={onShowHistory}
|
||||
onRemovePane={onRemovePane}
|
||||
|
||||
266
apps/web/src/components/FlowLauncherDialog.tsx
Normal file
266
apps/web/src/components/FlowLauncherDialog.tsx
Normal file
@@ -0,0 +1,266 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { Zap } from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { api } from '@/api/client';
|
||||
import { sessionEvents } from '@/hooks/sessionEvents';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
type Band = 'small' | 'medium' | 'large';
|
||||
type Category = 'Analysis' | 'Discovery' | 'Planning' | 'Authoring' | 'Review';
|
||||
|
||||
interface FlowMeta {
|
||||
name: string;
|
||||
label: string;
|
||||
}
|
||||
|
||||
const CATEGORIES: Category[] = ['Analysis', 'Discovery', 'Planning', 'Authoring', 'Review'];
|
||||
|
||||
const FLOWS_BY_CATEGORY: Record<Category, FlowMeta[]> = {
|
||||
Analysis: [
|
||||
{ name: 'research', label: 'Research' },
|
||||
{ name: 'investigate', label: 'Investigate' },
|
||||
{ name: 'architectural-analysis', label: 'Architectural Analysis' },
|
||||
{ name: 'security-review', label: 'Security Review' },
|
||||
{ name: 'gap-analysis', label: 'Gap Analysis' },
|
||||
{ name: 'data-review', label: 'Data Review' },
|
||||
{ name: 'devops-review', label: 'DevOps Review' },
|
||||
{ name: 'issue-triage', label: 'Issue Triage' },
|
||||
],
|
||||
Discovery: [
|
||||
{ name: 'project-discovery', label: 'Project Discovery' },
|
||||
{ name: 'project-documentation', label: 'Project Documentation' },
|
||||
{ name: 'test-planning', label: 'Test Planning' },
|
||||
],
|
||||
Planning: [
|
||||
{ name: 'plan-a-feature', label: 'Plan a Feature' },
|
||||
{ name: 'plan-implementation', label: 'Plan Implementation' },
|
||||
{ name: 'plan-a-phased-build', label: 'Plan a Phased Build' },
|
||||
{ name: 'plan-work-items', label: 'Plan Work Items' },
|
||||
{ name: 'iterative-plan-review', label: 'Iterative Plan Review' },
|
||||
],
|
||||
Authoring: [
|
||||
{ name: 'adr', label: 'ADR' },
|
||||
{ name: 'coding-standard', label: 'Coding Standard' },
|
||||
{ name: 'runbook', label: 'Runbook' },
|
||||
{ name: 'tdd', label: 'TDD' },
|
||||
{ name: 'stakeholder-summary', label: 'Stakeholder Summary' },
|
||||
],
|
||||
Review: [
|
||||
{ name: 'code-review', label: 'Code Review' },
|
||||
],
|
||||
};
|
||||
|
||||
const BAND_LABELS: { value: Band; label: string }[] = [
|
||||
{ value: 'small', label: 'Small' },
|
||||
{ value: 'medium', label: 'Medium' },
|
||||
{ value: 'large', label: 'Large' },
|
||||
];
|
||||
|
||||
export function FlowLauncherDialog() {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [projectId, setProjectId] = useState<string>('');
|
||||
const [placement, setPlacement] = useState<'new' | 'split'>('new');
|
||||
const [category, setCategory] = useState<Category>('Analysis');
|
||||
const [flowName, setFlowName] = useState<string>(FLOWS_BY_CATEGORY.Analysis[0]?.name ?? 'research');
|
||||
const [band, setBand] = useState<Band>('small');
|
||||
const [focus, setFocus] = useState('');
|
||||
const [fast, setFast] = useState(false);
|
||||
const [launching, setLaunching] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
return sessionEvents.subscribe((ev) => {
|
||||
if (ev.type !== 'open_flow_launcher') return;
|
||||
setProjectId(ev.project_id);
|
||||
setPlacement(ev.placement ?? 'new');
|
||||
// Reset to defaults each time the dialog is opened.
|
||||
setCategory('Analysis');
|
||||
setFlowName(FLOWS_BY_CATEGORY.Analysis[0]?.name ?? 'research');
|
||||
setBand('small');
|
||||
setFocus('');
|
||||
setFast(false);
|
||||
setOpen(true);
|
||||
});
|
||||
}, []);
|
||||
|
||||
function handleCategoryChange(cat: Category) {
|
||||
setCategory(cat);
|
||||
setFlowName(FLOWS_BY_CATEGORY[cat][0]?.name ?? '');
|
||||
}
|
||||
|
||||
async function handleLaunch() {
|
||||
if (!flowName || !projectId) return;
|
||||
setLaunching(true);
|
||||
try {
|
||||
const { run_id } = await api.runs.launch({
|
||||
project_id: projectId,
|
||||
flow_name: flowName,
|
||||
band,
|
||||
input: { question: focus },
|
||||
});
|
||||
sessionEvents.emit({
|
||||
type: 'open_orchestrator_pane',
|
||||
state: { run_id, flow_name: flowName, band },
|
||||
placement,
|
||||
});
|
||||
setOpen(false);
|
||||
} catch (err) {
|
||||
toast.error(err instanceof Error ? err.message : 'Failed to launch flow');
|
||||
} finally {
|
||||
setLaunching(false);
|
||||
}
|
||||
}
|
||||
|
||||
const flows = FLOWS_BY_CATEGORY[category];
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={setOpen}>
|
||||
<DialogContent
|
||||
className="flex flex-col gap-0 p-0 max-h-[85vh] sm:max-w-md grid-rows-[auto_minmax(0,1fr)_auto] overflow-hidden"
|
||||
showCloseButton={false}
|
||||
>
|
||||
<DialogHeader className="px-4 pt-4 pb-3 border-b shrink-0">
|
||||
<DialogTitle className="text-sm font-medium">Launch a flow</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
{/* Scrollable body */}
|
||||
<div className="flex flex-col gap-4 overflow-y-auto overscroll-contain px-4 py-3">
|
||||
{/* Category tabs — horizontal-scroll strip on mobile */}
|
||||
<div className="flex gap-1 overflow-x-auto no-scrollbar pb-0.5 shrink-0">
|
||||
{CATEGORIES.map((cat) => (
|
||||
<button
|
||||
key={cat}
|
||||
type="button"
|
||||
onClick={() => handleCategoryChange(cat)}
|
||||
className={cn(
|
||||
'shrink-0 rounded-full border px-3 py-1 text-xs transition-colors whitespace-nowrap',
|
||||
cat === category
|
||||
? 'border-primary bg-primary text-primary-foreground'
|
||||
: 'border-border text-muted-foreground hover:bg-muted hover:text-foreground'
|
||||
)}
|
||||
>
|
||||
{cat}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Flow list */}
|
||||
<div className="flex flex-col gap-0.5">
|
||||
{flows.map((flow) => (
|
||||
<button
|
||||
key={flow.name}
|
||||
type="button"
|
||||
onClick={() => setFlowName(flow.name)}
|
||||
className={cn(
|
||||
'w-full rounded-lg px-3 py-2 text-left text-sm transition-colors',
|
||||
flow.name === flowName
|
||||
? 'bg-primary/10 text-primary font-medium'
|
||||
: 'text-foreground hover:bg-muted'
|
||||
)}
|
||||
>
|
||||
{flow.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Size selector */}
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<Label className="text-xs text-muted-foreground">Size</Label>
|
||||
<div className="flex gap-1.5">
|
||||
{BAND_LABELS.map(({ value, label }) => (
|
||||
<button
|
||||
key={value}
|
||||
type="button"
|
||||
onClick={() => setBand(value)}
|
||||
className={cn(
|
||||
'flex-1 rounded-lg border py-1 text-xs transition-colors',
|
||||
band === value
|
||||
? 'border-primary bg-primary/10 text-primary font-medium'
|
||||
: 'border-border text-muted-foreground hover:bg-muted hover:text-foreground'
|
||||
)}
|
||||
>
|
||||
{label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Focus/question field */}
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<Label htmlFor="flow-focus" className="text-xs text-muted-foreground">
|
||||
Focus / question
|
||||
</Label>
|
||||
<Input
|
||||
id="flow-focus"
|
||||
type="text"
|
||||
placeholder="What should the flow focus on?"
|
||||
value={focus}
|
||||
onChange={(e) => setFocus(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
void handleLaunch();
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Fast mode toggle */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex flex-col">
|
||||
<span className="text-xs font-medium text-foreground">Fast mode</span>
|
||||
<span className="text-xs text-muted-foreground">Fewer agents, quicker results</span>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
role="switch"
|
||||
aria-checked={fast}
|
||||
onClick={() => setFast((v) => !v)}
|
||||
className={cn(
|
||||
'relative inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
|
||||
fast ? 'bg-primary' : 'bg-input'
|
||||
)}
|
||||
>
|
||||
<span
|
||||
className={cn(
|
||||
'pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow-lg transition-transform',
|
||||
fast ? 'translate-x-4' : 'translate-x-0'
|
||||
)}
|
||||
/>
|
||||
<span className="sr-only">Fast mode</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DialogFooter className="shrink-0" showCloseButton>
|
||||
<Button
|
||||
onClick={() => void handleLaunch()}
|
||||
disabled={!flowName || launching}
|
||||
size="sm"
|
||||
>
|
||||
{launching ? (
|
||||
<>
|
||||
<Zap className="size-3.5 animate-pulse" />
|
||||
Launching…
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Zap className="size-3.5" />
|
||||
Launch
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
@@ -1,22 +1,62 @@
|
||||
import { Code, MessageSquare, Plus, Terminal } from 'lucide-react';
|
||||
import { useState } from 'react';
|
||||
import { Code, History, MessageSquare, Plus, Terminal, Workflow } from 'lucide-react';
|
||||
import { api } from '@/api/client';
|
||||
import type { FlowRunRow } from '@/api/types';
|
||||
import { sessionEvents } from '@/hooks/sessionEvents';
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from '@/components/ui/dropdown-menu';
|
||||
|
||||
interface Props {
|
||||
onAddPane: (kind: 'chat' | 'terminal' | 'coder') => void;
|
||||
disabled?: boolean;
|
||||
projectId?: string;
|
||||
}
|
||||
|
||||
function statusSymbol(status: FlowRunRow['status']): string {
|
||||
if (status === 'completed') return '✓';
|
||||
if (status === 'failed') return '✗';
|
||||
if (status === 'running') return '⟳';
|
||||
return '–';
|
||||
}
|
||||
|
||||
function relativeTime(iso: string): string {
|
||||
const diff = Date.now() - new Date(iso).getTime();
|
||||
const mins = Math.floor(diff / 60_000);
|
||||
if (mins < 60) return `${mins}m ago`;
|
||||
const hrs = Math.floor(mins / 60);
|
||||
if (hrs < 24) return `${hrs}h ago`;
|
||||
return `${Math.floor(hrs / 24)}d ago`;
|
||||
}
|
||||
|
||||
function humanize(slug: string): string {
|
||||
return slug.replace(/[-_]+/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase());
|
||||
}
|
||||
|
||||
// v1.8 row-2 right cluster: mirrors the desktop Workspace.tsx Split dropdown.
|
||||
// Terminal + Coder items pass through to addSplitPane which creates panes
|
||||
// of the appropriate kind.
|
||||
export function NewPaneMenu({ onAddPane, disabled }: Props) {
|
||||
// of the appropriate kind. Phase 11: optional projectId enables "Recent Flows"
|
||||
// section (runs history).
|
||||
export function NewPaneMenu({ onAddPane, disabled, projectId }: Props) {
|
||||
const [runs, setRuns] = useState<FlowRunRow[] | null>(null);
|
||||
const [loadingRuns, setLoadingRuns] = useState(false);
|
||||
|
||||
function handleOpenChange(open: boolean) {
|
||||
if (!open || !projectId || runs !== null) return;
|
||||
setLoadingRuns(true);
|
||||
api.runs.list(projectId)
|
||||
.then(({ runs: r }) => setRuns(r.slice(0, 8)))
|
||||
.catch(() => setRuns([]))
|
||||
.finally(() => setLoadingRuns(false));
|
||||
}
|
||||
|
||||
return (
|
||||
<DropdownMenu>
|
||||
<DropdownMenu onOpenChange={handleOpenChange}>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
@@ -37,6 +77,62 @@ export function NewPaneMenu({ onAddPane, disabled }: Props) {
|
||||
<DropdownMenuItem onSelect={() => onAddPane('coder')}>
|
||||
<Code size={14} /> New BooCode
|
||||
</DropdownMenuItem>
|
||||
{projectId && (
|
||||
<DropdownMenuItem
|
||||
onSelect={() =>
|
||||
sessionEvents.emit({
|
||||
type: 'open_flow_launcher',
|
||||
project_id: projectId,
|
||||
placement: 'new',
|
||||
})
|
||||
}
|
||||
>
|
||||
<Workflow size={14} /> New Orchestrator
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
|
||||
{projectId && (
|
||||
<>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuLabel className="flex items-center gap-1.5 text-xs">
|
||||
<History size={12} />
|
||||
Recent Flows
|
||||
</DropdownMenuLabel>
|
||||
{loadingRuns && (
|
||||
<DropdownMenuItem disabled>
|
||||
<span className="text-muted-foreground text-xs">Loading…</span>
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
{!loadingRuns && runs !== null && runs.length === 0 && (
|
||||
<DropdownMenuItem disabled>
|
||||
<span className="text-muted-foreground text-xs">No recent flows</span>
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
{!loadingRuns && runs !== null && runs.map((run) => (
|
||||
<DropdownMenuItem
|
||||
key={run.id}
|
||||
onSelect={() => {
|
||||
sessionEvents.emit({
|
||||
type: 'open_orchestrator_pane',
|
||||
state: { run_id: run.id, flow_name: run.flow_name, band: run.band },
|
||||
});
|
||||
}}
|
||||
className="flex flex-col items-start gap-0.5 max-w-[260px]"
|
||||
>
|
||||
<div className="flex items-center gap-1.5 w-full min-w-0">
|
||||
<Workflow size={12} className="shrink-0 text-muted-foreground" />
|
||||
<span className="font-medium truncate text-sm">{humanize(run.flow_name)}</span>
|
||||
<span className="text-muted-foreground text-xs shrink-0 capitalize ml-auto">{run.band}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5 w-full text-xs text-muted-foreground pl-[20px]">
|
||||
<span>{statusSymbol(run.status)}</span>
|
||||
<span className="truncate flex-1">{run.input.question}</span>
|
||||
<span className="shrink-0">{relativeTime(run.created_at)}</span>
|
||||
</div>
|
||||
</DropdownMenuItem>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
);
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Code, Columns2, History, MessageSquare, Plus, RotateCcw, Terminal, X } from 'lucide-react';
|
||||
import { Code, Columns2, History, MessageSquare, Plus, RotateCcw, Terminal, Workflow, X } from 'lucide-react';
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
@@ -16,6 +16,9 @@ interface Props {
|
||||
// (the second control) adds a new pane.
|
||||
onNewTab: (kind: 'chat' | 'terminal' | 'coder') => void;
|
||||
onSplitPane: (kind: 'chat' | 'terminal' | 'coder') => void;
|
||||
// When provided, shows a "New Orchestrator" item that opens the flow launcher.
|
||||
// Orchestrators are always split (run-bound; can't live as a tab in another pane).
|
||||
onNewOrchestrator?: () => void;
|
||||
onReopenPane?: () => void;
|
||||
onShowHistory: () => void;
|
||||
onRemovePane?: () => void;
|
||||
@@ -31,6 +34,7 @@ const BTN =
|
||||
export function PaneHeaderActions({
|
||||
onNewTab,
|
||||
onSplitPane,
|
||||
onNewOrchestrator,
|
||||
onReopenPane,
|
||||
onShowHistory,
|
||||
onRemovePane,
|
||||
@@ -62,6 +66,11 @@ export function PaneHeaderActions({
|
||||
<DropdownMenuItem onSelect={() => onNewTab('coder')}>
|
||||
<Code size={14} /> New BooCode
|
||||
</DropdownMenuItem>
|
||||
{onNewOrchestrator && (
|
||||
<DropdownMenuItem onSelect={onNewOrchestrator}>
|
||||
<Workflow size={14} /> New Orchestrator
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
|
||||
@@ -87,6 +96,11 @@ export function PaneHeaderActions({
|
||||
<DropdownMenuItem onSelect={() => onSplitPane('coder')}>
|
||||
<Code size={14} /> New BooCode
|
||||
</DropdownMenuItem>
|
||||
{onNewOrchestrator && (
|
||||
<DropdownMenuItem onSelect={onNewOrchestrator}>
|
||||
<Workflow size={14} /> New Orchestrator
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import { api } from '@/api/client';
|
||||
import type { Project, Session, WorkspacePane, WorkspaceTabKind } from '@/api/types';
|
||||
import { sessionEvents } from '@/hooks/sessionEvents';
|
||||
import { activePaneChatId, type UseWorkspacePanesResult } from '@/hooks/useWorkspacePanes';
|
||||
import type { UseSessionChatsResult } from '@/hooks/useSessionChats';
|
||||
import { useViewport } from '@/hooks/useViewport';
|
||||
@@ -11,6 +12,7 @@ import { TerminalPane } from '@/components/panes/TerminalPane';
|
||||
import { CoderPane } from '@/components/panes/CoderPane';
|
||||
import { MarkdownArtifactPane } from '@/components/MarkdownArtifactPane';
|
||||
import { HtmlArtifactPane } from '@/components/HtmlArtifactPane';
|
||||
import { OrchestratorPane } from '@/components/panes/OrchestratorPane';
|
||||
import { ChatTabBar, type TabDescriptor } from '@/components/ChatTabBar';
|
||||
import { SessionLandingPage } from '@/components/SessionLandingPage';
|
||||
import { cn } from '@/lib/utils';
|
||||
@@ -124,6 +126,14 @@ export function Workspace({
|
||||
if (maximized && settingsIdx < 0) setMaximized(false);
|
||||
}, [maximized, settingsIdx]);
|
||||
|
||||
function handleNewOrchestrator() {
|
||||
sessionEvents.emit({
|
||||
type: 'open_flow_launcher',
|
||||
project_id: projectId,
|
||||
placement: 'split',
|
||||
});
|
||||
}
|
||||
|
||||
// v1.10 booterm + mixed tabs: per-terminal-TAB label, keyed by the terminal
|
||||
// tab id (which keys its tmux session). Numbered across the workspace.
|
||||
const terminalLabels = useMemo(() => {
|
||||
@@ -169,6 +179,7 @@ export function Workspace({
|
||||
const isSettings = pane.kind === 'settings';
|
||||
const isTerminal = pane.kind === 'terminal';
|
||||
const isCoder = pane.kind === 'coder';
|
||||
const isOrchestrator = pane.kind === 'orchestrator';
|
||||
const isArtifact = pane.kind === 'markdown_artifact' || pane.kind === 'html_artifact';
|
||||
// v1.9: when maximized, hide every pane except the settings one.
|
||||
// display:none keeps the React tree mounted so streams / drafts
|
||||
@@ -181,8 +192,8 @@ export function Workspace({
|
||||
}
|
||||
return null;
|
||||
}
|
||||
// Terminal + coder panes own their tab strip (no chats, no ChatTabBar).
|
||||
const isChromeless = isSettings || isTerminal || isCoder || isArtifact;
|
||||
// Terminal + coder + orchestrator panes own their tab strip (no chats, no ChatTabBar).
|
||||
const isChromeless = isSettings || isTerminal || isCoder || isArtifact || isOrchestrator;
|
||||
return (
|
||||
<div
|
||||
key={pane.id}
|
||||
@@ -207,7 +218,7 @@ export function Workspace({
|
||||
(chat / coder / terminal / empty-landing). The "+" adds a tab
|
||||
of any kind; Split adds a pane. Settings/artifact panes own
|
||||
their own headers. Hidden on mobile (mobile uses pane panes). */}
|
||||
{!isMobile && !isSettings && !isArtifact && (
|
||||
{!isMobile && !isSettings && !isArtifact && !isOrchestrator && (
|
||||
<ChatTabBar
|
||||
pane={pane}
|
||||
tabs={paneTabs(pane)}
|
||||
@@ -219,6 +230,7 @@ export function Workspace({
|
||||
onCloseAll={() => closeAllTabs(idx)}
|
||||
onNewTab={(kind) => void createTab(idx, kind)}
|
||||
onSplitPane={(kind) => onAddPane(kind)}
|
||||
onNewOrchestrator={handleNewOrchestrator}
|
||||
onReopenPane={hasClosedPanes ? reopenPane : undefined}
|
||||
onShowHistory={() => openSessionHistory(idx)}
|
||||
onRename={renameChat}
|
||||
@@ -260,6 +272,11 @@ export function Workspace({
|
||||
chatPending={isPaneChatPending(pane.id)}
|
||||
projectPath={project?.path}
|
||||
/>
|
||||
) : pane.kind === 'orchestrator' && pane.orchestrator_state ? (
|
||||
<OrchestratorPane
|
||||
state={pane.orchestrator_state}
|
||||
onClose={() => removePane(idx)}
|
||||
/>
|
||||
) : pane.kind === 'markdown_artifact' && pane.markdown_artifact_state ? (
|
||||
<MarkdownArtifactPane
|
||||
chatId={pane.markdown_artifact_state.chat_id}
|
||||
|
||||
458
apps/web/src/components/panes/OrchestratorPane.tsx
Normal file
458
apps/web/src/components/panes/OrchestratorPane.tsx
Normal file
@@ -0,0 +1,458 @@
|
||||
// OrchestratorPane — run view for a flow run (Phase 8).
|
||||
//
|
||||
// Subscribes to the coder user channel (via useCoderUserEvents → sessionEvents)
|
||||
// for run-level frames (flow_run_started / flow_run_step_updated). Per-step
|
||||
// content streams ride the existing coder per-session WS frames (delta /
|
||||
// tool_call / message_complete), connected on demand when a step is expanded.
|
||||
//
|
||||
// Layout per D-7:
|
||||
// - Run header (flow name + band + status + stop button)
|
||||
// - Final report at top when completed
|
||||
// - Collapsed agent roster (one row per step, status dot + label)
|
||||
// - Expand-one-at-a-time detail well (step's live stream via CoderMessageList)
|
||||
// - Mobile: single column, inline expand
|
||||
|
||||
import { useCallback, useEffect, useRef, useState } from 'react';
|
||||
import { ChevronDown, ChevronRight, MoreHorizontal, Square, Workflow, X } from 'lucide-react';
|
||||
import { toast } from 'sonner';
|
||||
import { api } from '@/api/client';
|
||||
import type { FlowRunRow, FlowStepRow, OrchestratorState } from '@/api/types';
|
||||
import { sessionEvents } from '@/hooks/sessionEvents';
|
||||
import { chatInputsRegistry, sendToChat } from '@/lib/events';
|
||||
import { CoderMessageList } from '@/components/panes/CoderMessageList';
|
||||
import type { CoderTimelineWire } from '@/components/panes/CoderMessageList';
|
||||
import { mergeWireToolCall } from '@/lib/coder-tools';
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from '@/components/ui/dropdown-menu';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
// ---- step status dot (same visual language as AgentStatusDot in AgentComposerBar) --
|
||||
|
||||
function FlowStepStatusDot({ status }: { status: FlowStepRow['status'] }) {
|
||||
if (status === 'running') {
|
||||
return (
|
||||
<span
|
||||
aria-label="running"
|
||||
className="inline-block w-3 h-3 rounded-full border-2 border-emerald-500 border-t-transparent animate-spin shrink-0"
|
||||
/>
|
||||
);
|
||||
}
|
||||
const cls =
|
||||
status === 'completed'
|
||||
? 'bg-emerald-500'
|
||||
: status === 'failed'
|
||||
? 'bg-destructive'
|
||||
: status === 'cancelled'
|
||||
? 'bg-muted-foreground/20'
|
||||
: 'bg-muted-foreground/40'; // pending / skipped
|
||||
return <span aria-label={status} className={cn('inline-block w-1.5 h-1.5 rounded-full shrink-0', cls)} />;
|
||||
}
|
||||
|
||||
// ---- per-step stream hook ---------------------------------------------------
|
||||
// Connects to the synthetic session WS for the expanded step. Returns messages
|
||||
// suitable for CoderMessageList. Disconnects and clears when sessionId/chatId
|
||||
// are null (collapsed step). Reuses the same frame-handling logic as CoderPane.
|
||||
|
||||
type RawFrame = Record<string, unknown>;
|
||||
|
||||
function useStepStream(sessionId: string | null, chatId: string | null): CoderTimelineWire[] {
|
||||
const [messages, setMessages] = useState<CoderTimelineWire[]>([]);
|
||||
const chatIdRef = useRef(chatId);
|
||||
chatIdRef.current = chatId;
|
||||
|
||||
useEffect(() => {
|
||||
if (!sessionId || !chatId) {
|
||||
setMessages([]);
|
||||
return;
|
||||
}
|
||||
setMessages([]);
|
||||
|
||||
// Initial REST fetch for any already-persisted messages.
|
||||
api.coder.listMessages(sessionId, chatId).then((rows) => setMessages(rows)).catch(() => {});
|
||||
|
||||
// Live stream from the step's synthetic session.
|
||||
const proto = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
|
||||
const ws = new WebSocket(`${proto}//${window.location.host}/api/coder/ws/sessions/${sessionId}`);
|
||||
|
||||
ws.onmessage = (ev) => {
|
||||
try {
|
||||
const frame = JSON.parse(ev.data as string) as RawFrame;
|
||||
const scopedChatId = chatIdRef.current;
|
||||
|
||||
// Drop frames for other chats (except the snapshot which we filter below).
|
||||
if (scopedChatId && frame.chat_id && frame.chat_id !== scopedChatId && frame.type !== 'snapshot') return;
|
||||
|
||||
if (frame.type === 'snapshot' && Array.isArray(frame.messages)) {
|
||||
const rows = (frame.messages as Array<Record<string, unknown>>).filter(
|
||||
(m) => !scopedChatId || m.chat_id === scopedChatId,
|
||||
);
|
||||
setMessages(rows as unknown as CoderTimelineWire[]);
|
||||
} else if (frame.type === 'message_started') {
|
||||
const role = (frame.role ?? 'assistant') as string;
|
||||
setMessages((prev) => {
|
||||
if (prev.some((m) => m.id === frame.message_id)) return prev;
|
||||
return [
|
||||
...prev,
|
||||
{ id: frame.message_id as string, role, content: '', status: 'streaming' } as CoderTimelineWire,
|
||||
];
|
||||
});
|
||||
} else if (frame.type === 'delta') {
|
||||
setMessages((prev) =>
|
||||
prev.map((m) => {
|
||||
if (m.id !== frame.message_id || m.role === 'tool') return m;
|
||||
const msg = m as { content: string };
|
||||
return { ...m, content: msg.content + ((frame.content as string) ?? '') };
|
||||
}),
|
||||
);
|
||||
} else if (frame.type === 'reasoning_delta') {
|
||||
setMessages((prev) =>
|
||||
prev.map((m) => {
|
||||
if (m.id !== frame.message_id || m.role === 'tool') return m;
|
||||
const msg = m as { reasoning_text?: string };
|
||||
return { ...m, reasoning_text: (msg.reasoning_text ?? '') + ((frame.content as string) ?? '') };
|
||||
}),
|
||||
);
|
||||
} else if (frame.type === 'message_complete') {
|
||||
setMessages((prev) =>
|
||||
prev.map((m) =>
|
||||
m.id === frame.message_id && m.role !== 'tool'
|
||||
? {
|
||||
...m,
|
||||
status: ((frame.status as string) ?? 'complete') as 'complete' | 'failed' | 'cancelled',
|
||||
model: (frame.model as string | null | undefined) ?? null,
|
||||
}
|
||||
: m,
|
||||
),
|
||||
);
|
||||
} else if (frame.type === 'tool_call' && frame.tool_call) {
|
||||
const tc = frame.tool_call as { id: string; name: string; args?: Record<string, unknown> };
|
||||
if (tc.id) {
|
||||
setMessages((prev) =>
|
||||
prev.map((m) => {
|
||||
if (m.role !== 'assistant' || m.id !== frame.message_id) return m;
|
||||
const msg = m as { tool_calls?: import('@/lib/coder-tools').CoderToolCallWire[] };
|
||||
return { ...m, tool_calls: mergeWireToolCall(msg.tool_calls, { ...tc, args: tc.args ?? {} }) };
|
||||
}),
|
||||
);
|
||||
}
|
||||
} else if (frame.type === 'tool_result') {
|
||||
const result = {
|
||||
tool_call_id: frame.tool_call_id as string,
|
||||
output: frame.output,
|
||||
truncated: (frame.truncated as boolean) ?? false,
|
||||
...((frame.error as string | undefined) ? { error: frame.error as string } : {}),
|
||||
};
|
||||
setMessages((prev) => {
|
||||
const exists = prev.some((m) => m.id === frame.tool_message_id);
|
||||
if (exists) {
|
||||
return prev.map((m) =>
|
||||
m.role === 'tool' && m.id === frame.tool_message_id ? { ...m, tool_results: result } : m,
|
||||
);
|
||||
}
|
||||
return [
|
||||
...prev,
|
||||
{ id: frame.tool_message_id as string, role: 'tool' as const, tool_results: result },
|
||||
];
|
||||
});
|
||||
}
|
||||
} catch {
|
||||
// bad frame — ignore
|
||||
}
|
||||
};
|
||||
|
||||
return () => {
|
||||
try { ws.close(); } catch {}
|
||||
};
|
||||
}, [sessionId, chatId]);
|
||||
|
||||
return messages;
|
||||
}
|
||||
|
||||
// ---- helpers ---------------------------------------------------------------
|
||||
|
||||
function humanize(slug: string): string {
|
||||
return slug.replace(/[-_]+/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase());
|
||||
}
|
||||
|
||||
// ---- StepRow ---------------------------------------------------------------
|
||||
|
||||
function StepRow({
|
||||
step,
|
||||
isExpanded,
|
||||
onToggle,
|
||||
}: {
|
||||
step: FlowStepRow;
|
||||
isExpanded: boolean;
|
||||
onToggle: () => void;
|
||||
}) {
|
||||
// Only connect when expanded; null inputs cause the hook to return [] immediately.
|
||||
const streamMessages = useStepStream(
|
||||
isExpanded ? step.session_id : null,
|
||||
isExpanded ? step.chat_id : null,
|
||||
);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onToggle}
|
||||
className="w-full flex items-center gap-2.5 px-3 py-2.5 text-left hover:bg-muted/30 transition-colors"
|
||||
>
|
||||
<FlowStepStatusDot status={step.status} />
|
||||
<span className="text-sm flex-1 truncate">{humanize(step.step_id)}</span>
|
||||
{step.agent && (
|
||||
<span className="text-xs text-muted-foreground shrink-0 hidden sm:block">{step.agent}</span>
|
||||
)}
|
||||
{isExpanded
|
||||
? <ChevronDown size={12} className="shrink-0 text-muted-foreground" />
|
||||
: <ChevronRight size={12} className="shrink-0 text-muted-foreground" />}
|
||||
</button>
|
||||
|
||||
{isExpanded && (
|
||||
<div className="border-t border-border/50 bg-muted/10 max-h-[55vh] flex flex-col overflow-hidden">
|
||||
{streamMessages.length === 0 ? (
|
||||
<div className="flex items-center justify-center py-6 text-sm text-muted-foreground">
|
||||
{step.status === 'pending' ? 'Waiting to start…'
|
||||
: step.status === 'completed' || step.status === 'failed' ? 'Loading output…'
|
||||
: 'Connecting…'}
|
||||
</div>
|
||||
) : (
|
||||
<CoderMessageList messages={streamMessages} chatId={step.chat_id ?? undefined} />
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ---- OrchestratorPane ------------------------------------------------------
|
||||
|
||||
interface Props {
|
||||
state: OrchestratorState;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export function OrchestratorPane({ state, onClose }: Props) {
|
||||
const [run, setRun] = useState<FlowRunRow | null>(null);
|
||||
const [steps, setSteps] = useState<FlowStepRow[]>([]);
|
||||
const [expandedStepId, setExpandedStepId] = useState<string | null>(null);
|
||||
const [stopping, setStopping] = useState(false);
|
||||
|
||||
// Fetch current run state on mount (handles both new runs and reopen).
|
||||
useEffect(() => {
|
||||
setRun(null);
|
||||
setSteps([]);
|
||||
setExpandedStepId(null);
|
||||
api.runs.get(state.run_id)
|
||||
.then(({ run: r, steps: s }) => {
|
||||
setRun(r);
|
||||
setSteps(s);
|
||||
// Auto-expand first running step.
|
||||
const firstRunning = s.find((step) => step.status === 'running');
|
||||
if (firstRunning) setExpandedStepId(firstRunning.step_id);
|
||||
})
|
||||
.catch(() => {});
|
||||
}, [state.run_id]);
|
||||
|
||||
// Subscribe to live run-level frames from the coder user channel
|
||||
// (forwarded by useCoderUserEvents → sessionEvents).
|
||||
// Idempotent: flow_run_started only seeds the roster when empty (the API
|
||||
// fetch above is authoritative; the frame is a fallback for the race where
|
||||
// the pane opens before the GET resolves).
|
||||
useEffect(() => {
|
||||
return sessionEvents.subscribe((ev) => {
|
||||
if (ev.type === 'flow_run_started' && ev.run_id === state.run_id) {
|
||||
setSteps((prev) => {
|
||||
if (prev.length > 0) return prev;
|
||||
return ev.steps.map((s) => ({
|
||||
id: s.step_id,
|
||||
run_id: state.run_id,
|
||||
step_id: s.step_id,
|
||||
kind: s.kind,
|
||||
agent: s.agent,
|
||||
status: 'pending' as const,
|
||||
task_id: null,
|
||||
chat_id: s.chat_id,
|
||||
session_id: null,
|
||||
input: null,
|
||||
output: null,
|
||||
error: null,
|
||||
created_at: new Date().toISOString(),
|
||||
updated_at: new Date().toISOString(),
|
||||
}));
|
||||
});
|
||||
} else if (ev.type === 'flow_run_step_updated' && ev.run_id === state.run_id) {
|
||||
// Idempotent status update — no double-emit risk (useCoderUserEvents
|
||||
// owns the WS → sessionEvents bridge; we don't also emit locally).
|
||||
setSteps((prev) =>
|
||||
prev.map((s) => (s.step_id === ev.step_id ? { ...s, status: ev.status } : s)),
|
||||
);
|
||||
if (ev.run_status) {
|
||||
setRun((prev) =>
|
||||
prev ? { ...prev, status: ev.run_status!, report: ev.report ?? prev.report } : prev,
|
||||
);
|
||||
}
|
||||
// Auto-expand the step that just went running.
|
||||
if (ev.status === 'running') setExpandedStepId(ev.step_id);
|
||||
}
|
||||
});
|
||||
}, [state.run_id]);
|
||||
|
||||
const toggleExpand = useCallback((stepId: string) => {
|
||||
setExpandedStepId((prev) => (prev === stepId ? null : stepId));
|
||||
}, []);
|
||||
|
||||
const handleStop = useCallback(async () => {
|
||||
if (stopping) return;
|
||||
setStopping(true);
|
||||
try {
|
||||
await api.runs.cancel(state.run_id);
|
||||
} catch {
|
||||
// non-fatal
|
||||
} finally {
|
||||
setStopping(false);
|
||||
}
|
||||
}, [state.run_id, stopping]);
|
||||
|
||||
const runStatus = run?.status ?? 'running';
|
||||
const isRunning = runStatus === 'running';
|
||||
const agentSteps = steps.filter((s) => s.kind === 'agent');
|
||||
const hasReport = runStatus === 'completed' && !!run?.report;
|
||||
|
||||
function handleCopyReport() {
|
||||
if (!run?.report) return;
|
||||
navigator.clipboard.writeText(run.report).catch(() => toast.error('Clipboard write failed'));
|
||||
}
|
||||
|
||||
function handleSaveReport() {
|
||||
if (!run?.report) return;
|
||||
const blob = new Blob([run.report], { type: 'text/markdown' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = `${run.flow_name}-report.md`;
|
||||
a.click();
|
||||
URL.revokeObjectURL(url);
|
||||
}
|
||||
|
||||
function handleSendToChat() {
|
||||
if (!run?.report) return;
|
||||
const chats = chatInputsRegistry.list();
|
||||
const first = chats[0];
|
||||
if (!first) {
|
||||
toast.error('No open chat to send to');
|
||||
return;
|
||||
}
|
||||
sendToChat.emit({ chat_id: first.chatId, text: run.report });
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full min-h-0 overflow-hidden">
|
||||
{/* Header */}
|
||||
<div className="flex items-center gap-2 border-b border-border bg-muted/20 px-3 py-2 shrink-0">
|
||||
<Workflow size={14} className="text-muted-foreground shrink-0" />
|
||||
<span className="text-sm font-medium truncate">{humanize(state.flow_name)}</span>
|
||||
<span className="text-xs text-muted-foreground shrink-0 capitalize">{state.band}</span>
|
||||
<div className="ml-auto flex items-center gap-1.5 shrink-0">
|
||||
{isRunning ? (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => void handleStop()}
|
||||
disabled={stopping}
|
||||
className="inline-flex items-center gap-1 text-xs px-1.5 py-0.5 rounded border border-border text-muted-foreground hover:text-foreground hover:bg-muted disabled:opacity-50"
|
||||
title="Stop run"
|
||||
>
|
||||
<Square size={10} />
|
||||
Stop
|
||||
</button>
|
||||
) : (
|
||||
<span
|
||||
className={cn(
|
||||
'text-xs px-1.5 py-0.5 rounded',
|
||||
runStatus === 'completed'
|
||||
? 'text-emerald-600 bg-emerald-500/10'
|
||||
: runStatus === 'failed'
|
||||
? 'text-destructive bg-destructive/10'
|
||||
: 'text-muted-foreground bg-muted/40',
|
||||
)}
|
||||
>
|
||||
{runStatus}
|
||||
</span>
|
||||
)}
|
||||
{hasReport && (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex items-center justify-center p-1 rounded text-muted-foreground hover:bg-muted hover:text-foreground"
|
||||
aria-label="Export options"
|
||||
title="Export report"
|
||||
>
|
||||
<MoreHorizontal size={14} />
|
||||
</button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem onSelect={handleCopyReport}>
|
||||
Copy report
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onSelect={handleSaveReport}>
|
||||
Save to file
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onSelect={handleSendToChat}>
|
||||
Send to chat
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
className="inline-flex items-center justify-center p-1 rounded text-muted-foreground hover:bg-muted hover:text-foreground"
|
||||
aria-label="Close pane"
|
||||
title="Close pane"
|
||||
>
|
||||
<X size={12} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Body */}
|
||||
<div className="flex-1 min-h-0 overflow-y-auto">
|
||||
{/* Final report — at the top when completed */}
|
||||
{run?.report && (
|
||||
<div className="border-b border-border p-4">
|
||||
<div className="text-xs font-medium text-muted-foreground uppercase tracking-wide mb-2 pb-1 border-b border-border/50">
|
||||
Report
|
||||
</div>
|
||||
<div className="text-sm text-foreground whitespace-pre-wrap leading-relaxed">
|
||||
{run.report}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Empty state */}
|
||||
{agentSteps.length === 0 && !run?.report && (
|
||||
<div className="flex items-center justify-center h-24 text-sm text-muted-foreground">
|
||||
Starting run…
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Agent roster — collapsed by default, expand one at a time */}
|
||||
<div className="divide-y divide-border">
|
||||
{agentSteps.map((step) => (
|
||||
<StepRow
|
||||
key={step.step_id}
|
||||
step={step}
|
||||
isExpanded={expandedStepId === step.step_id}
|
||||
onToggle={() => toggleExpand(step.step_id)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user