914 lines
29 KiB
TypeScript
914 lines
29 KiB
TypeScript
/**
|
|
* Read-only project work-state panel: one row per agent, showing live/offline
|
|
* and idle/busy state from the backend read-model, plus the current input queue.
|
|
*/
|
|
|
|
import { Component, type ReactNode, useEffect, useRef, useState } from "react";
|
|
|
|
import type {
|
|
AgentTicketState,
|
|
AgentWorkState,
|
|
BackgroundCompletion,
|
|
ConversationPreviewStatus,
|
|
ConversationWorkSummary,
|
|
InboxItem,
|
|
LeafCell,
|
|
} from "@/domain";
|
|
import type { BackgroundTaskAttachment } from "@/ports";
|
|
import { useGateways } from "@/app/di";
|
|
import { leaves } from "@/features/layout/layout";
|
|
import { useLayout } from "@/features/layout/useLayout";
|
|
import type { LayoutViewModel } from "@/features/layout/useLayout";
|
|
import { Button, Panel, Spinner, cn } from "@/shared";
|
|
import { useProjectWorkState } from "./useProjectWorkState";
|
|
|
|
export interface ProjectWorkStatePanelProps {
|
|
projectId: string;
|
|
/** Opens the read-only transcript viewer for a conversation pair (LS7). */
|
|
onOpenConversation?: (conversationId: string) => void;
|
|
}
|
|
|
|
interface WorkStatePanelErrorBoundaryProps {
|
|
children: ReactNode;
|
|
}
|
|
|
|
interface WorkStatePanelErrorBoundaryState {
|
|
error: Error | null;
|
|
retryKey: number;
|
|
}
|
|
|
|
export class WorkStatePanelErrorBoundary extends Component<
|
|
WorkStatePanelErrorBoundaryProps,
|
|
WorkStatePanelErrorBoundaryState
|
|
> {
|
|
state: WorkStatePanelErrorBoundaryState = { error: null, retryKey: 0 };
|
|
|
|
static getDerivedStateFromError(error: Error): Partial<WorkStatePanelErrorBoundaryState> {
|
|
return { error };
|
|
}
|
|
|
|
private retry = () => {
|
|
this.setState(({ retryKey }) => ({ error: null, retryKey: retryKey + 1 }));
|
|
};
|
|
|
|
render() {
|
|
if (this.state.error) {
|
|
return (
|
|
<Panel title="Work">
|
|
<div
|
|
role="alert"
|
|
className="rounded-md border border-danger/40 bg-danger/10 px-3 py-2 text-sm text-danger"
|
|
>
|
|
<p className="font-medium">Work panel failed to render.</p>
|
|
<p className="mt-1 text-xs text-danger/80">
|
|
{this.state.error.message}
|
|
</p>
|
|
<Button
|
|
size="sm"
|
|
variant="ghost"
|
|
className="mt-2"
|
|
onClick={this.retry}
|
|
>
|
|
Retry
|
|
</Button>
|
|
</div>
|
|
</Panel>
|
|
);
|
|
}
|
|
|
|
return <div key={this.state.retryKey}>{this.props.children}</div>;
|
|
}
|
|
}
|
|
|
|
function shortTicket(ticket: string): string {
|
|
return ticket.length <= 8 ? ticket : ticket.slice(0, 8);
|
|
}
|
|
|
|
function formatStatus(status: AgentTicketState["status"]): string {
|
|
return status === "inProgress" ? "In progress" : "Queued";
|
|
}
|
|
|
|
function formatTaskStatus(status: BackgroundCompletion["status"]): string {
|
|
switch (status) {
|
|
case "running":
|
|
return "Running";
|
|
case "cancelling":
|
|
return "Cancelling";
|
|
case "completed":
|
|
return "Completed";
|
|
case "failed":
|
|
return "Failed";
|
|
case "cancelFailed":
|
|
return "Cancel failed";
|
|
case "cancelled":
|
|
return "Cancelled";
|
|
case "delivered":
|
|
return "Delivered";
|
|
case "pending":
|
|
return "Pending";
|
|
}
|
|
}
|
|
|
|
/** Terminal (finished) task states that carry a result summary (ticket #5). */
|
|
function isTerminalTaskStatus(status: BackgroundCompletion["status"]): boolean {
|
|
return (
|
|
status === "completed" ||
|
|
status === "failed" ||
|
|
status === "cancelFailed" ||
|
|
status === "cancelled"
|
|
);
|
|
}
|
|
|
|
function taskStatusClass(status: BackgroundCompletion["status"]): string {
|
|
if (status === "running" || status === "pending" || status === "cancelling") {
|
|
return "bg-warning/15 text-warning";
|
|
}
|
|
if (status === "completed" || status === "delivered") return "bg-success/10 text-success";
|
|
if (status === "failed" || status === "cancelFailed" || status === "cancelled") {
|
|
return "bg-danger/10 text-danger";
|
|
}
|
|
return "bg-raised text-muted";
|
|
}
|
|
|
|
function canCancelTask(status: BackgroundCompletion["status"]): boolean {
|
|
return status === "running" || status === "pending" || status === "cancelling";
|
|
}
|
|
|
|
function canRetryTask(status: BackgroundCompletion["status"]): boolean {
|
|
return status === "failed" || status === "cancelFailed" || status === "cancelled";
|
|
}
|
|
|
|
function agentStatusLabel(live: boolean, busy: boolean): string {
|
|
if (busy) return "Busy";
|
|
return live ? "Idle" : "Offline";
|
|
}
|
|
|
|
function agentStatusClass(live: boolean, busy: boolean): string {
|
|
if (busy) return "bg-warning/15 text-warning";
|
|
if (live) return "bg-success/10 text-success";
|
|
return "bg-raised text-muted";
|
|
}
|
|
|
|
function backgroundTaskSummary(tasks: BackgroundCompletion[]): string | null {
|
|
if (tasks.length === 0) return null;
|
|
const running = tasks.filter((task) => canCancelTask(task.status)).length;
|
|
const failed = tasks.filter((task) => canRetryTask(task.status)).length;
|
|
if (running > 0 && failed > 0) return `${tasks.length} background tasks (${running} active, ${failed} failed)`;
|
|
if (running > 0) return `${running} background task${running > 1 ? "s" : ""} active`;
|
|
if (failed > 0) return `${failed} background task${failed > 1 ? "s" : ""} need attention`;
|
|
return `${tasks.length} background task${tasks.length > 1 ? "s" : ""}`;
|
|
}
|
|
|
|
function compactIntent(text: string | null): string | null {
|
|
const normalized = text?.replace(/\s+/g, " ").trim();
|
|
if (!normalized) return null;
|
|
return normalized.length <= 44 ? normalized : `${normalized.slice(0, 41)}...`;
|
|
}
|
|
|
|
function compactIndicator({
|
|
tickets,
|
|
inboxDepth,
|
|
backgroundTasks,
|
|
}: {
|
|
tickets: AgentTicketState[];
|
|
inboxDepth: number;
|
|
backgroundTasks: BackgroundCompletion[];
|
|
}): string | null {
|
|
const queuedTickets = tickets.filter((ticket) => ticket.status === "queued").length;
|
|
if (queuedTickets > 0) return `+${queuedTickets}`;
|
|
if (inboxDepth > 0) return `${inboxDepth} inbox`;
|
|
if (backgroundTasks.length > 0) return `${backgroundTasks.length} bg`;
|
|
return null;
|
|
}
|
|
|
|
function requesterLabel(ticket: AgentTicketState): string {
|
|
if (ticket.source.kind === "human") return "Human";
|
|
const id = shortTicket(ticket.source.agentId);
|
|
return ticket.requesterLabel.trim()
|
|
? `${ticket.requesterLabel} (${id})`
|
|
: `Agent ${id}`;
|
|
}
|
|
|
|
function summaryLabel(status: ConversationPreviewStatus): string {
|
|
switch (status) {
|
|
case "ready":
|
|
return "Summary";
|
|
case "missing":
|
|
return "No summary";
|
|
case "partial":
|
|
return "Partial";
|
|
case "unavailable":
|
|
return "Unavailable";
|
|
}
|
|
}
|
|
|
|
function summaryText(summary: ConversationWorkSummary): string | null {
|
|
if (summary.objectivePreview) return `Goal: ${summary.objectivePreview}`;
|
|
if (summary.summaryPreview) return summary.summaryPreview;
|
|
const lastTurn = (summary.recentTurns ?? []).at(-1);
|
|
return lastTurn ? `Last: ${lastTurn.textPreview}` : null;
|
|
}
|
|
|
|
function goToCell(nodeId: string): void {
|
|
if (typeof document === "undefined") return;
|
|
const el = document.querySelector<HTMLElement>(`[data-node-id="${nodeId}"]`);
|
|
if (!el) return;
|
|
el.scrollIntoView?.({ block: "nearest", inline: "nearest" });
|
|
const previous = el.style.outline;
|
|
el.style.outline = "2px solid var(--color-primary, #5b9bd5)";
|
|
window.setTimeout(() => {
|
|
el.style.outline = previous;
|
|
}, 1200);
|
|
}
|
|
|
|
async function copyToClipboard(text: string): Promise<void> {
|
|
if (typeof navigator !== "undefined" && navigator.clipboard?.writeText) {
|
|
await navigator.clipboard.writeText(text);
|
|
return;
|
|
}
|
|
throw new Error("Clipboard unavailable");
|
|
}
|
|
|
|
function ConversationSummaryLine({
|
|
summary,
|
|
onOpenConversation,
|
|
}: {
|
|
summary: ConversationWorkSummary;
|
|
onOpenConversation?: (conversationId: string) => void;
|
|
}) {
|
|
const text = summaryText(summary);
|
|
const [expanded, setExpanded] = useState(false);
|
|
const [copied, setCopied] = useState(false);
|
|
if (!text) return null;
|
|
return (
|
|
<div className="mt-1 min-w-0 pl-1 text-xs text-muted">
|
|
<div className="flex min-w-0 items-start gap-2">
|
|
<span
|
|
className={cn(
|
|
"mt-0.5 shrink-0 rounded-full px-1.5 py-0.5 font-medium",
|
|
summary.status === "ready"
|
|
? "bg-success/10 text-success"
|
|
: "bg-raised text-muted",
|
|
)}
|
|
>
|
|
{summaryLabel(summary.status)}
|
|
</span>
|
|
{onOpenConversation ? (
|
|
<button
|
|
type="button"
|
|
aria-label={`open conversation ${summary.conversationId}`}
|
|
className="min-w-0 flex-1 break-words text-left hover:text-content hover:underline"
|
|
onClick={() => onOpenConversation(summary.conversationId)}
|
|
>
|
|
{text}
|
|
</button>
|
|
) : (
|
|
<span className="min-w-0 flex-1 break-words">{text}</span>
|
|
)}
|
|
<button
|
|
type="button"
|
|
className="shrink-0 rounded px-1 py-0.5 text-[11px] text-muted hover:bg-raised hover:text-content"
|
|
onClick={() => setExpanded((v) => !v)}
|
|
>
|
|
{expanded ? "Hide" : "View"}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className="shrink-0 rounded px-1 py-0.5 text-[11px] text-muted hover:bg-raised hover:text-content disabled:opacity-50"
|
|
disabled={!text}
|
|
onClick={() => {
|
|
void copyToClipboard(text).then(() => {
|
|
setCopied(true);
|
|
window.setTimeout(() => setCopied(false), 1000);
|
|
});
|
|
}}
|
|
>
|
|
{copied ? "Copied" : "Copy"}
|
|
</button>
|
|
</div>
|
|
{expanded && (
|
|
<div
|
|
aria-label={`conversation ${summary.conversationId} details`}
|
|
className="mt-1 space-y-1 border-l border-border pl-2"
|
|
>
|
|
{summary.objectivePreview && (
|
|
<p>
|
|
<span className="font-medium text-content">Goal:</span>{" "}
|
|
{summary.objectivePreview}
|
|
</p>
|
|
)}
|
|
{summary.summaryPreview && (
|
|
<p>
|
|
<span className="font-medium text-content">Summary:</span>{" "}
|
|
{summary.summaryPreview}
|
|
</p>
|
|
)}
|
|
{(summary.recentTurns ?? []).length > 0 && (
|
|
<ul className="space-y-0.5">
|
|
{(summary.recentTurns ?? []).map((turn) => (
|
|
<li key={`${turn.atMs}-${turn.role}-${turn.textPreview}`}>
|
|
<span className="font-medium text-content">{turn.role}:</span>{" "}
|
|
{turn.textPreview}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function TicketRow({
|
|
ticket,
|
|
summary,
|
|
onOpenConversation,
|
|
}: {
|
|
ticket: AgentTicketState;
|
|
summary?: ConversationWorkSummary;
|
|
onOpenConversation?: (conversationId: string) => void;
|
|
}) {
|
|
const truncated = ticket.taskLen > ticket.taskPreview.length;
|
|
return (
|
|
<li className="min-w-0 text-xs text-muted">
|
|
<div className="flex min-w-0 items-start gap-2">
|
|
<span
|
|
className={cn(
|
|
"mt-0.5 shrink-0 rounded-full px-1.5 py-0.5 font-medium",
|
|
ticket.status === "inProgress"
|
|
? "bg-warning/15 text-warning"
|
|
: "bg-raised text-muted",
|
|
)}
|
|
>
|
|
#{ticket.position + 1} {formatStatus(ticket.status)}
|
|
</span>
|
|
<span className="min-w-0 flex-1">
|
|
<span className="font-medium text-content">{requesterLabel(ticket)}</span>
|
|
<span className="text-muted"> · </span>
|
|
<span className="break-words">{ticket.taskPreview}</span>
|
|
{truncated && (
|
|
<span
|
|
aria-label={`${ticket.taskLen - ticket.taskPreview.length} more characters`}
|
|
className="text-muted"
|
|
>
|
|
{" "}
|
|
+{ticket.taskLen - ticket.taskPreview.length}
|
|
</span>
|
|
)}
|
|
</span>
|
|
<code
|
|
aria-label={`ticket ${shortTicket(ticket.ticketId)}`}
|
|
title={ticket.ticketId}
|
|
className="mt-0.5 shrink-0 rounded bg-raised px-1.5 py-0.5 text-[11px] text-muted"
|
|
>
|
|
{shortTicket(ticket.ticketId)}
|
|
</code>
|
|
</div>
|
|
{summary && (
|
|
<ConversationSummaryLine
|
|
summary={summary}
|
|
onOpenConversation={onOpenConversation}
|
|
/>
|
|
)}
|
|
</li>
|
|
);
|
|
}
|
|
|
|
function InboxRow({ item }: { item: InboxItem }) {
|
|
return (
|
|
<li className="min-w-0 text-xs text-muted">
|
|
<div className="flex min-w-0 items-start gap-2">
|
|
<span className="mt-0.5 shrink-0 rounded-full bg-raised px-1.5 py-0.5 font-medium text-muted">
|
|
{item.kind}
|
|
</span>
|
|
<span className="min-w-0 flex-1 break-words">{item.body}</span>
|
|
<code
|
|
title={item.id}
|
|
className="mt-0.5 shrink-0 rounded bg-raised px-1.5 py-0.5 text-[11px] text-muted"
|
|
>
|
|
{shortTicket(item.id)}
|
|
</code>
|
|
</div>
|
|
</li>
|
|
);
|
|
}
|
|
|
|
function BackgroundTaskRow({
|
|
task,
|
|
onRefresh,
|
|
}: {
|
|
task: BackgroundCompletion;
|
|
onRefresh: () => Promise<void>;
|
|
}) {
|
|
const { workState } = useGateways();
|
|
const [open, setOpen] = useState(false);
|
|
const [liveOpen, setLiveOpen] = useState(false);
|
|
const [liveOutput, setLiveOutput] = useState("");
|
|
const [actionBusy, setActionBusy] = useState(false);
|
|
const [liveBusy, setLiveBusy] = useState(false);
|
|
const [message, setMessage] = useState<string | null>(null);
|
|
const attachmentRef = useRef<BackgroundTaskAttachment | null>(null);
|
|
const attachSeqRef = useRef(0);
|
|
const hasOutput = Boolean(task.stdoutTail || task.stderrTail);
|
|
const canCancel = canCancelTask(task.status);
|
|
const canRetry = canRetryTask(task.status);
|
|
const canAttachLive = canCancel;
|
|
|
|
function detachLive(): void {
|
|
attachSeqRef.current += 1;
|
|
attachmentRef.current?.detach();
|
|
attachmentRef.current = null;
|
|
setLiveOpen(false);
|
|
}
|
|
|
|
useEffect(() => {
|
|
return () => {
|
|
attachSeqRef.current += 1;
|
|
attachmentRef.current?.detach();
|
|
attachmentRef.current = null;
|
|
};
|
|
}, [task.taskId]);
|
|
|
|
useEffect(() => {
|
|
if (!canAttachLive && attachmentRef.current) detachLive();
|
|
}, [canAttachLive]);
|
|
|
|
async function runAction(
|
|
action: (taskId: string) => Promise<void>,
|
|
): Promise<void> {
|
|
setActionBusy(true);
|
|
setMessage(null);
|
|
try {
|
|
await action(task.taskId);
|
|
await onRefresh();
|
|
} catch (e) {
|
|
setMessage(e instanceof Error ? e.message : String(e));
|
|
} finally {
|
|
setActionBusy(false);
|
|
}
|
|
}
|
|
|
|
async function toggleLive(): Promise<void> {
|
|
if (liveOpen || attachmentRef.current) {
|
|
detachLive();
|
|
return;
|
|
}
|
|
|
|
const seq = attachSeqRef.current + 1;
|
|
attachSeqRef.current = seq;
|
|
setLiveBusy(true);
|
|
setMessage(null);
|
|
setLiveOutput("");
|
|
try {
|
|
const decoder = new TextDecoder();
|
|
const attachment = await workState.attachBackgroundTask(task.taskId, (bytes) => {
|
|
setLiveOutput((prev) => prev + decoder.decode(bytes));
|
|
});
|
|
if (seq !== attachSeqRef.current) {
|
|
attachment.detach();
|
|
return;
|
|
}
|
|
attachmentRef.current = attachment;
|
|
setLiveOutput(decoder.decode(attachment.scrollback));
|
|
setLiveOpen(true);
|
|
} catch (e) {
|
|
setMessage(e instanceof Error ? e.message : String(e));
|
|
} finally {
|
|
if (seq === attachSeqRef.current) setLiveBusy(false);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<li className="min-w-0 text-xs text-muted">
|
|
<div className="flex min-w-0 items-start gap-2">
|
|
<span
|
|
className={cn(
|
|
"mt-0.5 shrink-0 rounded-full px-1.5 py-0.5 font-medium",
|
|
taskStatusClass(task.status),
|
|
)}
|
|
>
|
|
{formatTaskStatus(task.status)}
|
|
</span>
|
|
<span className="min-w-0 flex-1">
|
|
<span className="font-medium text-content">{task.kind}</span>
|
|
{task.exitCode !== null && (
|
|
<span className="text-muted"> · exit {task.exitCode}</span>
|
|
)}
|
|
</span>
|
|
<Button
|
|
size="sm"
|
|
variant="ghost"
|
|
disabled={!canCancel || actionBusy}
|
|
loading={actionBusy}
|
|
onClick={() =>
|
|
void runAction((id) => workState.cancelBackgroundTask(id))
|
|
}
|
|
>
|
|
Cancel
|
|
</Button>
|
|
<Button
|
|
size="sm"
|
|
variant="ghost"
|
|
disabled={!canAttachLive || liveBusy}
|
|
loading={liveBusy}
|
|
onClick={() => void toggleLive()}
|
|
>
|
|
{liveOpen ? "Detach" : "Live"}
|
|
</Button>
|
|
<Button
|
|
size="sm"
|
|
variant="ghost"
|
|
disabled={!hasOutput}
|
|
onClick={() => setOpen((v) => !v)}
|
|
>
|
|
Output
|
|
</Button>
|
|
<Button
|
|
size="sm"
|
|
variant="ghost"
|
|
disabled={!canRetry || actionBusy}
|
|
loading={actionBusy}
|
|
onClick={() =>
|
|
void runAction((id) => workState.retryBackgroundTask(id))
|
|
}
|
|
>
|
|
Retry
|
|
</Button>
|
|
<code
|
|
title={task.taskId}
|
|
className="mt-0.5 shrink-0 rounded bg-raised px-1.5 py-0.5 text-[11px] text-muted"
|
|
>
|
|
{shortTicket(task.taskId)}
|
|
</code>
|
|
</div>
|
|
{task.summary && isTerminalTaskStatus(task.status) && (
|
|
<p
|
|
aria-label={`task ${shortTicket(task.taskId)} summary`}
|
|
title={task.summary}
|
|
className="mt-1 truncate pl-1 text-[11px] text-muted"
|
|
>
|
|
{task.summary}
|
|
</p>
|
|
)}
|
|
{message && (
|
|
<p role="alert" className="mt-1 text-xs text-danger">
|
|
{message}
|
|
</p>
|
|
)}
|
|
{open && hasOutput && (
|
|
<pre
|
|
aria-label={`task ${shortTicket(task.taskId)} output`}
|
|
className="mt-1 max-h-40 overflow-auto whitespace-pre-wrap rounded border border-border bg-canvas p-2 text-[11px] text-muted"
|
|
>
|
|
{task.stdoutTail ? `stdout\n${task.stdoutTail}` : ""}
|
|
{task.stdoutTail && task.stderrTail ? "\n\n" : ""}
|
|
{task.stderrTail ? `stderr\n${task.stderrTail}` : ""}
|
|
</pre>
|
|
)}
|
|
{liveOpen && (
|
|
<pre
|
|
aria-label={`task ${shortTicket(task.taskId)} live output`}
|
|
className="mt-1 max-h-40 overflow-auto whitespace-pre-wrap rounded border border-border bg-canvas p-2 text-[11px] text-muted"
|
|
>
|
|
{liveOutput || "No live output yet."}
|
|
</pre>
|
|
)}
|
|
</li>
|
|
);
|
|
}
|
|
|
|
function AgentRow({
|
|
agent,
|
|
conversations,
|
|
visibleLeaves,
|
|
layout,
|
|
projectId,
|
|
onRefresh,
|
|
onOpenConversation,
|
|
}: {
|
|
agent: AgentWorkState;
|
|
conversations: Map<string, ConversationWorkSummary>;
|
|
visibleLeaves: LeafCell[];
|
|
layout: LayoutViewModel;
|
|
projectId: string;
|
|
onRefresh: () => Promise<void>;
|
|
onOpenConversation?: (conversationId: string) => void;
|
|
}) {
|
|
const { agent: agentGateway } = useGateways();
|
|
const [message, setMessage] = useState<string | null>(null);
|
|
const [actionBusy, setActionBusy] = useState(false);
|
|
const [detailsOpen, setDetailsOpen] = useState(false);
|
|
const [backgroundOpen, setBackgroundOpen] = useState(false);
|
|
const live = agent.live !== undefined;
|
|
const busyState = agent.busy ?? { state: "idle" };
|
|
const busy = busyState.state === "busy";
|
|
const tickets = [...(agent.tickets ?? [])].sort((a, b) => a.position - b.position);
|
|
const inbox = [...(agent.inbox ?? [])].sort((a, b) => a.createdAtMs - b.createdAtMs);
|
|
const backgroundTasks = [...(agent.backgroundTasks ?? [])].sort(
|
|
(a, b) => b.updatedAtMs - a.updatedAtMs || a.taskId.localeCompare(b.taskId),
|
|
);
|
|
const inboxDepth = Math.max(agent.inboxDepth ?? 0, inbox.length, tickets.length);
|
|
const visibleNodeIds = new Set(visibleLeaves.map((leaf) => leaf.id));
|
|
const liveVisible = live && visibleNodeIds.has(agent.live!.nodeId);
|
|
const attachTarget = visibleLeaves.find((leaf) => !leaf.session && !leaf.agent);
|
|
const currentTurn =
|
|
busy || tickets.some((ticket) => ticket.status === "inProgress");
|
|
const activeTicket = tickets.find((ticket) => ticket.status === "inProgress");
|
|
const statusLabel = agentStatusLabel(live, busy);
|
|
const taskSummary = backgroundTaskSummary(backgroundTasks);
|
|
const activityLine = compactIntent(
|
|
activeTicket?.taskPreview ??
|
|
(busyState.state === "busy" ? `Ticket ${shortTicket(busyState.ticket)}` : null),
|
|
);
|
|
const indicator = compactIndicator({ tickets, inboxDepth, backgroundTasks });
|
|
const hasActions = Boolean(agent.live);
|
|
const hasDetails =
|
|
hasActions ||
|
|
tickets.length > 0 ||
|
|
inbox.length > 0 ||
|
|
backgroundTasks.length > 0 ||
|
|
message ||
|
|
(agent.live && !liveVisible && !attachTarget);
|
|
|
|
async function refreshAfterAction(): Promise<void> {
|
|
await onRefresh();
|
|
}
|
|
|
|
async function attach(): Promise<void> {
|
|
if (!agent.live || !attachTarget || !agentGateway?.attachLiveAgent) return;
|
|
setActionBusy(true);
|
|
setMessage(null);
|
|
try {
|
|
const attached = await agentGateway.attachLiveAgent(
|
|
projectId,
|
|
agent.agentId,
|
|
attachTarget.id,
|
|
);
|
|
await layout.attachLiveAgentToCell(
|
|
attachTarget.id,
|
|
agent.agentId,
|
|
attached.sessionId,
|
|
);
|
|
await refreshAfterAction();
|
|
goToCell(attachTarget.id);
|
|
} catch (e) {
|
|
setMessage(e instanceof Error ? e.message : String(e));
|
|
} finally {
|
|
setActionBusy(false);
|
|
}
|
|
}
|
|
|
|
async function stop(): Promise<void> {
|
|
if (!agent.live || !agentGateway?.stopLiveAgent) return;
|
|
const warning = currentTurn
|
|
? " The current turn will be interrupted."
|
|
: "";
|
|
if (!window.confirm(`Stop ${agent.name}?${warning}`)) return;
|
|
setActionBusy(true);
|
|
setMessage(null);
|
|
try {
|
|
const stopped = await agentGateway.stopLiveAgent(projectId, agent.agentId);
|
|
if (visibleNodeIds.has(agent.live.nodeId)) {
|
|
const leaf = visibleLeaves.find((candidate) => candidate.id === agent.live?.nodeId);
|
|
if (!leaf?.session || leaf.session === stopped.sessionId) {
|
|
await layout.setSession(agent.live.nodeId, null);
|
|
}
|
|
}
|
|
await refreshAfterAction();
|
|
} catch (e) {
|
|
setMessage(e instanceof Error ? e.message : String(e));
|
|
} finally {
|
|
setActionBusy(false);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<li className="py-2 first:pt-0 last:pb-0">
|
|
<div className="flex min-w-0 items-center justify-between gap-2">
|
|
<span className="flex min-w-0 flex-1 items-baseline gap-2">
|
|
<span className="min-w-0 truncate text-sm font-semibold text-content">
|
|
{agent.name}
|
|
</span>
|
|
{activityLine && (
|
|
<span
|
|
className="min-w-0 truncate text-xs text-muted"
|
|
title={activeTicket?.taskPreview ?? activityLine}
|
|
>
|
|
{activityLine}
|
|
</span>
|
|
)}
|
|
</span>
|
|
<span className="flex shrink-0 items-center gap-1.5">
|
|
{indicator && (
|
|
<span className="rounded-full bg-raised px-1.5 py-0.5 text-[11px] font-medium text-muted">
|
|
{indicator}
|
|
</span>
|
|
)}
|
|
<span
|
|
className={cn(
|
|
"rounded-full px-2 py-0.5 text-xs font-medium",
|
|
agentStatusClass(live, busy),
|
|
)}
|
|
>
|
|
{statusLabel}
|
|
</span>
|
|
{hasDetails && (
|
|
<button
|
|
type="button"
|
|
className="rounded px-1.5 py-0.5 text-xs text-muted hover:bg-raised hover:text-content"
|
|
aria-expanded={detailsOpen}
|
|
aria-controls={`work-agent-details-${agent.agentId}`}
|
|
onClick={() => setDetailsOpen((value) => !value)}
|
|
>
|
|
{detailsOpen ? "Hide" : "Details"}
|
|
</button>
|
|
)}
|
|
</span>
|
|
</div>
|
|
|
|
{detailsOpen && (
|
|
<div
|
|
id={`work-agent-details-${agent.agentId}`}
|
|
className="mt-2 space-y-2 border-l border-border pl-3"
|
|
>
|
|
{agent.live && (
|
|
<div className="flex min-w-0 flex-wrap gap-1.5">
|
|
{agent.live && liveVisible && (
|
|
<Button
|
|
size="sm"
|
|
variant="ghost"
|
|
onClick={() => goToCell(agent.live!.nodeId)}
|
|
>
|
|
Open
|
|
</Button>
|
|
)}
|
|
{agent.live && !liveVisible && (
|
|
<Button
|
|
size="sm"
|
|
variant="ghost"
|
|
disabled={!attachTarget || !agentGateway?.attachLiveAgent}
|
|
loading={actionBusy}
|
|
title={
|
|
attachTarget
|
|
? undefined
|
|
: "No empty visible cell available"
|
|
}
|
|
onClick={() => void attach()}
|
|
>
|
|
Attach
|
|
</Button>
|
|
)}
|
|
{agent.live && (
|
|
<Button
|
|
size="sm"
|
|
variant="danger"
|
|
loading={actionBusy}
|
|
disabled={!agentGateway?.stopLiveAgent}
|
|
onClick={() => void stop()}
|
|
>
|
|
Stop
|
|
</Button>
|
|
)}
|
|
</div>
|
|
)}
|
|
{agent.live && !liveVisible && !attachTarget && (
|
|
<p className="text-xs text-muted">No empty visible cell.</p>
|
|
)}
|
|
{message && (
|
|
<p role="alert" className="text-xs text-danger">
|
|
{message}
|
|
</p>
|
|
)}
|
|
{tickets.length > 0 && (
|
|
<ul
|
|
aria-label={`${agent.name} tickets`}
|
|
className="flex flex-col gap-1"
|
|
>
|
|
{tickets.map((ticket) => (
|
|
<TicketRow
|
|
key={ticket.ticketId}
|
|
ticket={ticket}
|
|
summary={conversations.get(ticket.conversationId)}
|
|
onOpenConversation={onOpenConversation}
|
|
/>
|
|
))}
|
|
</ul>
|
|
)}
|
|
{inbox.length > 0 && (
|
|
<div>
|
|
<p className="text-[11px] font-semibold uppercase tracking-wide text-faint">
|
|
Inbox
|
|
</p>
|
|
<ul aria-label={`${agent.name} inbox`} className="mt-1 flex flex-col gap-1">
|
|
{inbox.map((item) => (
|
|
<InboxRow key={item.id} item={item} />
|
|
))}
|
|
</ul>
|
|
</div>
|
|
)}
|
|
{backgroundTasks.length > 0 && (
|
|
<div>
|
|
<button
|
|
type="button"
|
|
className="text-xs font-medium text-muted hover:text-content hover:underline"
|
|
aria-expanded={backgroundOpen}
|
|
aria-controls={`work-agent-background-${agent.agentId}`}
|
|
onClick={() => setBackgroundOpen((value) => !value)}
|
|
>
|
|
{backgroundOpen ? "Hide background tasks" : taskSummary}
|
|
</button>
|
|
{backgroundOpen && (
|
|
<ul
|
|
id={`work-agent-background-${agent.agentId}`}
|
|
aria-label={`${agent.name} background tasks`}
|
|
className="mt-1 flex flex-col gap-1"
|
|
>
|
|
{backgroundTasks.map((task) => (
|
|
<BackgroundTaskRow
|
|
key={task.taskId}
|
|
task={task}
|
|
onRefresh={refreshAfterAction}
|
|
/>
|
|
))}
|
|
</ul>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</li>
|
|
);
|
|
}
|
|
|
|
function ProjectWorkStatePanelContent({
|
|
projectId,
|
|
onOpenConversation,
|
|
}: ProjectWorkStatePanelProps) {
|
|
const vm = useProjectWorkState(projectId);
|
|
const layoutVm = useLayout(projectId);
|
|
const agents = vm.state?.agents ?? [];
|
|
const visibleLeaves = layoutVm.layout ? leaves(layoutVm.layout) : [];
|
|
const conversations = new Map(
|
|
(vm.state?.conversations ?? []).map((summary) => [
|
|
summary.conversationId,
|
|
summary,
|
|
]),
|
|
);
|
|
|
|
return (
|
|
<Panel
|
|
title="Work"
|
|
actions={
|
|
<Button
|
|
size="sm"
|
|
variant="ghost"
|
|
onClick={() => void vm.refresh()}
|
|
loading={vm.busy}
|
|
>
|
|
Refresh
|
|
</Button>
|
|
}
|
|
>
|
|
{vm.error && (
|
|
<p
|
|
role="alert"
|
|
className="mb-3 rounded-md border border-danger/40 bg-danger/10 px-3 py-2 text-sm text-danger"
|
|
>
|
|
{vm.error}
|
|
</p>
|
|
)}
|
|
{vm.busy && vm.state === null ? (
|
|
<div className="flex items-center gap-2 text-sm text-muted">
|
|
<Spinner size={14} />
|
|
<span>Loading work state…</span>
|
|
</div>
|
|
) : agents.length === 0 ? (
|
|
<p className="text-sm text-muted">No agent work state.</p>
|
|
) : (
|
|
<ul className="flex flex-col divide-y divide-border">
|
|
{agents.map((agent) => (
|
|
<AgentRow
|
|
key={agent.agentId}
|
|
agent={agent}
|
|
conversations={conversations}
|
|
visibleLeaves={visibleLeaves}
|
|
layout={layoutVm}
|
|
projectId={projectId}
|
|
onRefresh={vm.refresh}
|
|
onOpenConversation={onOpenConversation}
|
|
/>
|
|
))}
|
|
</ul>
|
|
)}
|
|
</Panel>
|
|
);
|
|
}
|
|
|
|
export function ProjectWorkStatePanel(props: ProjectWorkStatePanelProps) {
|
|
return (
|
|
<WorkStatePanelErrorBoundary>
|
|
<ProjectWorkStatePanelContent {...props} />
|
|
</WorkStatePanelErrorBoundary>
|
|
);
|
|
}
|