feat(web): add agent output terminal tabs for orchestrator sessions (#522)
All checks were successful
ci/woodpecker/push/web Pipeline was successful
All checks were successful
ci/woodpecker/push/web Pipeline was successful
Co-authored-by: Jason Woltje <jason@diversecanvas.com> Co-committed-by: Jason Woltje <jason@diversecanvas.com>
This commit was merged in pull request #522.
This commit is contained in:
368
apps/web/src/components/terminal/AgentTerminal.test.tsx
Normal file
368
apps/web/src/components/terminal/AgentTerminal.test.tsx
Normal file
@@ -0,0 +1,368 @@
|
||||
/**
|
||||
* @file AgentTerminal.test.tsx
|
||||
* @description Unit tests for the AgentTerminal component
|
||||
*
|
||||
* Tests cover:
|
||||
* - Output rendering
|
||||
* - Status display (status indicator + badge)
|
||||
* - ANSI stripping
|
||||
* - Agent header information (type, duration, jobId)
|
||||
* - Auto-scroll behavior
|
||||
* - Copy-to-clipboard
|
||||
* - Error message display
|
||||
* - Empty state rendering
|
||||
*/
|
||||
|
||||
import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
|
||||
import { render, screen, fireEvent, act } from "@testing-library/react";
|
||||
import type { ReactElement } from "react";
|
||||
import { AgentTerminal } from "./AgentTerminal";
|
||||
import type { AgentSession } from "@/hooks/useAgentStream";
|
||||
|
||||
// ==========================================
|
||||
// Mock navigator.clipboard
|
||||
// ==========================================
|
||||
|
||||
const mockWriteText = vi.fn(() => Promise.resolve());
|
||||
Object.defineProperty(navigator, "clipboard", {
|
||||
value: { writeText: mockWriteText },
|
||||
writable: true,
|
||||
configurable: true,
|
||||
});
|
||||
|
||||
// ==========================================
|
||||
// Factory helpers
|
||||
// ==========================================
|
||||
|
||||
function makeAgent(overrides: Partial<AgentSession> = {}): AgentSession {
|
||||
return {
|
||||
agentId: "test-agent-1",
|
||||
agentType: "worker",
|
||||
status: "running",
|
||||
outputLines: [],
|
||||
startedAt: Date.now() - 5000, // 5s ago
|
||||
...overrides,
|
||||
};
|
||||
}
|
||||
|
||||
// ==========================================
|
||||
// Tests
|
||||
// ==========================================
|
||||
|
||||
describe("AgentTerminal", () => {
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
vi.useFakeTimers({ shouldAdvanceTime: false });
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
vi.useRealTimers();
|
||||
});
|
||||
|
||||
// ==========================================
|
||||
// Rendering
|
||||
// ==========================================
|
||||
|
||||
describe("rendering", () => {
|
||||
it("renders the agent terminal container", () => {
|
||||
render((<AgentTerminal agent={makeAgent()} />) as ReactElement);
|
||||
expect(screen.getByTestId("agent-terminal")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("has region role with agent type label", () => {
|
||||
render((<AgentTerminal agent={makeAgent({ agentType: "planner" })} />) as ReactElement);
|
||||
expect(screen.getByRole("region", { name: "Agent output: planner" })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("sets data-agent-id attribute", () => {
|
||||
render((<AgentTerminal agent={makeAgent({ agentId: "my-agent-123" })} />) as ReactElement);
|
||||
const container = screen.getByTestId("agent-terminal");
|
||||
expect(container).toHaveAttribute("data-agent-id", "my-agent-123");
|
||||
});
|
||||
|
||||
it("applies className prop to the outer container", () => {
|
||||
render((<AgentTerminal agent={makeAgent()} className="custom-cls" />) as ReactElement);
|
||||
expect(screen.getByTestId("agent-terminal")).toHaveClass("custom-cls");
|
||||
});
|
||||
});
|
||||
|
||||
// ==========================================
|
||||
// Header
|
||||
// ==========================================
|
||||
|
||||
describe("header", () => {
|
||||
it("renders the agent type label", () => {
|
||||
render((<AgentTerminal agent={makeAgent({ agentType: "coordinator" })} />) as ReactElement);
|
||||
expect(screen.getByTestId("agent-type-label")).toHaveTextContent("coordinator");
|
||||
});
|
||||
|
||||
it("includes jobId in the label when provided", () => {
|
||||
render(
|
||||
(
|
||||
<AgentTerminal agent={makeAgent({ agentType: "worker", jobId: "job-42" })} />
|
||||
) as ReactElement
|
||||
);
|
||||
expect(screen.getByTestId("agent-type-label")).toHaveTextContent("worker · job-42");
|
||||
});
|
||||
|
||||
it("does not show jobId separator when jobId is absent", () => {
|
||||
render((<AgentTerminal agent={makeAgent({ agentType: "worker" })} />) as ReactElement);
|
||||
expect(screen.getByTestId("agent-type-label")).not.toHaveTextContent("·");
|
||||
});
|
||||
|
||||
it("renders the duration element", () => {
|
||||
render((<AgentTerminal agent={makeAgent()} />) as ReactElement);
|
||||
expect(screen.getByTestId("agent-duration")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("shows seconds for short-running agents", () => {
|
||||
const agent = makeAgent({ startedAt: Date.now() - 8000 });
|
||||
render((<AgentTerminal agent={agent} />) as ReactElement);
|
||||
expect(screen.getByTestId("agent-duration")).toHaveTextContent("s");
|
||||
});
|
||||
|
||||
it("shows minutes for long-running agents", () => {
|
||||
const agent = makeAgent({ startedAt: Date.now() - 125000 }); // 2m 5s
|
||||
render((<AgentTerminal agent={agent} />) as ReactElement);
|
||||
expect(screen.getByTestId("agent-duration")).toHaveTextContent("m");
|
||||
});
|
||||
});
|
||||
|
||||
// ==========================================
|
||||
// Status indicator
|
||||
// ==========================================
|
||||
|
||||
describe("status indicator", () => {
|
||||
it("shows a running indicator for running status", () => {
|
||||
render((<AgentTerminal agent={makeAgent({ status: "running" })} />) as ReactElement);
|
||||
const indicator = screen.getByTestId("status-indicator");
|
||||
expect(indicator).toHaveAttribute("data-status", "running");
|
||||
});
|
||||
|
||||
it("shows a spawning indicator for spawning status", () => {
|
||||
render((<AgentTerminal agent={makeAgent({ status: "spawning" })} />) as ReactElement);
|
||||
const indicator = screen.getByTestId("status-indicator");
|
||||
expect(indicator).toHaveAttribute("data-status", "spawning");
|
||||
});
|
||||
|
||||
it("shows completed indicator for completed status", () => {
|
||||
render(
|
||||
(
|
||||
<AgentTerminal agent={makeAgent({ status: "completed", endedAt: Date.now() })} />
|
||||
) as ReactElement
|
||||
);
|
||||
const indicator = screen.getByTestId("status-indicator");
|
||||
expect(indicator).toHaveAttribute("data-status", "completed");
|
||||
});
|
||||
|
||||
it("shows error indicator for error status", () => {
|
||||
render(
|
||||
(
|
||||
<AgentTerminal agent={makeAgent({ status: "error", endedAt: Date.now() })} />
|
||||
) as ReactElement
|
||||
);
|
||||
const indicator = screen.getByTestId("status-indicator");
|
||||
expect(indicator).toHaveAttribute("data-status", "error");
|
||||
});
|
||||
});
|
||||
|
||||
// ==========================================
|
||||
// Status badge
|
||||
// ==========================================
|
||||
|
||||
describe("status badge", () => {
|
||||
it("renders the status badge", () => {
|
||||
render((<AgentTerminal agent={makeAgent({ status: "running" })} />) as ReactElement);
|
||||
expect(screen.getByTestId("status-badge")).toHaveTextContent("running");
|
||||
});
|
||||
|
||||
it("shows 'spawning' badge for spawning status", () => {
|
||||
render((<AgentTerminal agent={makeAgent({ status: "spawning" })} />) as ReactElement);
|
||||
expect(screen.getByTestId("status-badge")).toHaveTextContent("spawning");
|
||||
});
|
||||
|
||||
it("shows 'completed' badge for completed status", () => {
|
||||
render(
|
||||
(
|
||||
<AgentTerminal agent={makeAgent({ status: "completed", endedAt: Date.now() })} />
|
||||
) as ReactElement
|
||||
);
|
||||
expect(screen.getByTestId("status-badge")).toHaveTextContent("completed");
|
||||
});
|
||||
|
||||
it("shows 'error' badge for error status", () => {
|
||||
render(
|
||||
(
|
||||
<AgentTerminal agent={makeAgent({ status: "error", endedAt: Date.now() })} />
|
||||
) as ReactElement
|
||||
);
|
||||
expect(screen.getByTestId("status-badge")).toHaveTextContent("error");
|
||||
});
|
||||
});
|
||||
|
||||
// ==========================================
|
||||
// Output rendering
|
||||
// ==========================================
|
||||
|
||||
describe("output area", () => {
|
||||
it("renders the output pre element", () => {
|
||||
render((<AgentTerminal agent={makeAgent()} />) as ReactElement);
|
||||
expect(screen.getByTestId("agent-output")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("shows 'Waiting for output...' when outputLines is empty and status is running", () => {
|
||||
render(
|
||||
(
|
||||
<AgentTerminal agent={makeAgent({ status: "running", outputLines: [] })} />
|
||||
) as ReactElement
|
||||
);
|
||||
expect(screen.getByTestId("agent-output")).toHaveTextContent("Waiting for output...");
|
||||
});
|
||||
|
||||
it("shows 'Spawning agent...' when status is spawning and no output", () => {
|
||||
render(
|
||||
(
|
||||
<AgentTerminal agent={makeAgent({ status: "spawning", outputLines: [] })} />
|
||||
) as ReactElement
|
||||
);
|
||||
expect(screen.getByTestId("agent-output")).toHaveTextContent("Spawning agent...");
|
||||
});
|
||||
|
||||
it("renders output lines as text content", () => {
|
||||
const agent = makeAgent({
|
||||
outputLines: ["Hello world\n", "Second line\n"],
|
||||
});
|
||||
render((<AgentTerminal agent={agent} />) as ReactElement);
|
||||
const output = screen.getByTestId("agent-output");
|
||||
expect(output).toHaveTextContent("Hello world");
|
||||
expect(output).toHaveTextContent("Second line");
|
||||
});
|
||||
|
||||
it("strips ANSI escape codes from output", () => {
|
||||
const agent = makeAgent({
|
||||
outputLines: ["\x1b[32mGreen text\x1b[0m\n"],
|
||||
});
|
||||
render((<AgentTerminal agent={agent} />) as ReactElement);
|
||||
const output = screen.getByTestId("agent-output");
|
||||
expect(output).toHaveTextContent("Green text");
|
||||
expect(output.textContent).not.toContain("\x1b");
|
||||
});
|
||||
|
||||
it("has aria-live=polite for screen reader announcements", () => {
|
||||
render((<AgentTerminal agent={makeAgent()} />) as ReactElement);
|
||||
expect(screen.getByTestId("agent-output")).toHaveAttribute("aria-live", "polite");
|
||||
});
|
||||
});
|
||||
|
||||
// ==========================================
|
||||
// Error message
|
||||
// ==========================================
|
||||
|
||||
describe("error message", () => {
|
||||
it("shows error message when status is error and errorMessage is set", () => {
|
||||
const agent = makeAgent({
|
||||
status: "error",
|
||||
endedAt: Date.now(),
|
||||
errorMessage: "Process crashed",
|
||||
});
|
||||
render((<AgentTerminal agent={agent} />) as ReactElement);
|
||||
expect(screen.getByTestId("agent-error-message")).toHaveTextContent("Process crashed");
|
||||
});
|
||||
|
||||
it("renders alert role for error message", () => {
|
||||
const agent = makeAgent({
|
||||
status: "error",
|
||||
endedAt: Date.now(),
|
||||
errorMessage: "OOM killed",
|
||||
});
|
||||
render((<AgentTerminal agent={agent} />) as ReactElement);
|
||||
expect(screen.getByRole("alert")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("does not show error message when status is running", () => {
|
||||
render((<AgentTerminal agent={makeAgent({ status: "running" })} />) as ReactElement);
|
||||
expect(screen.queryByTestId("agent-error-message")).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("does not show error message when status is error but errorMessage is absent", () => {
|
||||
const agent = makeAgent({ status: "error", endedAt: Date.now() });
|
||||
render((<AgentTerminal agent={agent} />) as ReactElement);
|
||||
expect(screen.queryByTestId("agent-error-message")).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
// ==========================================
|
||||
// Copy to clipboard
|
||||
// ==========================================
|
||||
|
||||
describe("copy to clipboard", () => {
|
||||
it("renders the copy button", () => {
|
||||
render((<AgentTerminal agent={makeAgent()} />) as ReactElement);
|
||||
expect(screen.getByTestId("copy-button")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("copy button has aria-label='Copy agent output'", () => {
|
||||
render((<AgentTerminal agent={makeAgent()} />) as ReactElement);
|
||||
expect(screen.getByRole("button", { name: "Copy agent output" })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("calls clipboard.writeText with stripped output on click", async () => {
|
||||
const agent = makeAgent({
|
||||
outputLines: ["\x1b[32mLine 1\x1b[0m\n", "Line 2\n"],
|
||||
});
|
||||
render((<AgentTerminal agent={agent} />) as ReactElement);
|
||||
|
||||
await act(async () => {
|
||||
fireEvent.click(screen.getByTestId("copy-button"));
|
||||
await Promise.resolve();
|
||||
});
|
||||
|
||||
expect(mockWriteText).toHaveBeenCalledWith("Line 1\nLine 2\n");
|
||||
});
|
||||
|
||||
it("shows 'copied' text briefly after clicking copy", async () => {
|
||||
render((<AgentTerminal agent={makeAgent()} />) as ReactElement);
|
||||
|
||||
await act(async () => {
|
||||
fireEvent.click(screen.getByTestId("copy-button"));
|
||||
await Promise.resolve();
|
||||
});
|
||||
|
||||
expect(screen.getByTestId("copy-button")).toHaveTextContent("copied");
|
||||
});
|
||||
|
||||
it("reverts copy button text after timeout", async () => {
|
||||
render((<AgentTerminal agent={makeAgent()} />) as ReactElement);
|
||||
|
||||
await act(async () => {
|
||||
fireEvent.click(screen.getByTestId("copy-button"));
|
||||
await Promise.resolve();
|
||||
});
|
||||
|
||||
act(() => {
|
||||
vi.advanceTimersByTime(2500);
|
||||
});
|
||||
|
||||
expect(screen.getByTestId("copy-button")).toHaveTextContent("copy");
|
||||
});
|
||||
});
|
||||
|
||||
// ==========================================
|
||||
// Auto-scroll
|
||||
// ==========================================
|
||||
|
||||
describe("auto-scroll", () => {
|
||||
it("does not throw when outputLines changes", () => {
|
||||
const agent = makeAgent({ outputLines: ["Line 1\n"] });
|
||||
const { rerender } = render((<AgentTerminal agent={agent} />) as ReactElement);
|
||||
|
||||
expect(() => {
|
||||
rerender(
|
||||
(
|
||||
<AgentTerminal agent={{ ...agent, outputLines: ["Line 1\n", "Line 2\n"] }} />
|
||||
) as ReactElement
|
||||
);
|
||||
}).not.toThrow();
|
||||
});
|
||||
});
|
||||
});
|
||||
381
apps/web/src/components/terminal/AgentTerminal.tsx
Normal file
381
apps/web/src/components/terminal/AgentTerminal.tsx
Normal file
@@ -0,0 +1,381 @@
|
||||
"use client";
|
||||
|
||||
/**
|
||||
* AgentTerminal component
|
||||
*
|
||||
* Read-only terminal view for displaying orchestrator agent output.
|
||||
* Uses a <pre> element with monospace font rather than xterm.js because
|
||||
* this is read-only agent stdout/stderr, not an interactive PTY.
|
||||
*
|
||||
* Features:
|
||||
* - Displays accumulated output lines with basic ANSI color rendering
|
||||
* - Status badge (spinning/checkmark/X) indicating agent lifecycle
|
||||
* - Header bar with agent type, status, and elapsed duration
|
||||
* - Auto-scrolls to bottom as new output arrives
|
||||
* - Copy-to-clipboard button for full output
|
||||
*/
|
||||
|
||||
import { useEffect, useRef, useState, useCallback } from "react";
|
||||
import type { ReactElement, CSSProperties } from "react";
|
||||
import type { AgentSession, AgentStatus } from "@/hooks/useAgentStream";
|
||||
|
||||
// ==========================================
|
||||
// Types
|
||||
// ==========================================
|
||||
|
||||
export interface AgentTerminalProps {
|
||||
/** The agent session to display */
|
||||
agent: AgentSession;
|
||||
/** Optional CSS class name for the outer container */
|
||||
className?: string;
|
||||
/** Optional inline style for the outer container */
|
||||
style?: CSSProperties;
|
||||
}
|
||||
|
||||
// ==========================================
|
||||
// ANSI color strip helper
|
||||
// ==========================================
|
||||
|
||||
// Simple ANSI escape sequence stripper — produces readable plain text for <pre>.
|
||||
// We strip rather than parse for security and simplicity in read-only display.
|
||||
// eslint-disable-next-line no-control-regex
|
||||
const ANSI_PATTERN = /\x1b\[[0-9;]*[mGKHF]/g;
|
||||
|
||||
function stripAnsi(text: string): string {
|
||||
return text.replace(ANSI_PATTERN, "");
|
||||
}
|
||||
|
||||
// ==========================================
|
||||
// Duration helper
|
||||
// ==========================================
|
||||
|
||||
function formatDuration(startedAt: number, endedAt?: number): string {
|
||||
const elapsed = Math.floor(((endedAt ?? Date.now()) - startedAt) / 1000);
|
||||
if (elapsed < 60) return `${elapsed.toString()}s`;
|
||||
const minutes = Math.floor(elapsed / 60);
|
||||
const seconds = elapsed % 60;
|
||||
return `${minutes.toString()}m ${seconds.toString()}s`;
|
||||
}
|
||||
|
||||
// ==========================================
|
||||
// Status indicator
|
||||
// ==========================================
|
||||
|
||||
interface StatusIndicatorProps {
|
||||
status: AgentStatus;
|
||||
}
|
||||
|
||||
function StatusIndicator({ status }: StatusIndicatorProps): ReactElement {
|
||||
const baseStyle: CSSProperties = {
|
||||
display: "inline-block",
|
||||
width: 8,
|
||||
height: 8,
|
||||
borderRadius: "50%",
|
||||
flexShrink: 0,
|
||||
};
|
||||
|
||||
if (status === "running" || status === "spawning") {
|
||||
return (
|
||||
<span
|
||||
data-testid="status-indicator"
|
||||
data-status={status}
|
||||
style={{
|
||||
...baseStyle,
|
||||
background: "var(--success)",
|
||||
animation: "agentPulse 1.5s ease-in-out infinite",
|
||||
}}
|
||||
aria-label="Running"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
if (status === "completed") {
|
||||
return (
|
||||
<span
|
||||
data-testid="status-indicator"
|
||||
data-status={status}
|
||||
style={{
|
||||
...baseStyle,
|
||||
background: "var(--muted)",
|
||||
}}
|
||||
aria-label="Completed"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
// error
|
||||
return (
|
||||
<span
|
||||
data-testid="status-indicator"
|
||||
data-status={status}
|
||||
style={{
|
||||
...baseStyle,
|
||||
background: "var(--danger)",
|
||||
}}
|
||||
aria-label="Error"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
// ==========================================
|
||||
// Status badge
|
||||
// ==========================================
|
||||
|
||||
interface StatusBadgeProps {
|
||||
status: AgentStatus;
|
||||
}
|
||||
|
||||
function StatusBadge({ status }: StatusBadgeProps): ReactElement {
|
||||
const colorMap: Record<AgentStatus, string> = {
|
||||
spawning: "var(--warn)",
|
||||
running: "var(--success)",
|
||||
completed: "var(--muted)",
|
||||
error: "var(--danger)",
|
||||
};
|
||||
|
||||
const labelMap: Record<AgentStatus, string> = {
|
||||
spawning: "spawning",
|
||||
running: "running",
|
||||
completed: "completed",
|
||||
error: "error",
|
||||
};
|
||||
|
||||
return (
|
||||
<span
|
||||
data-testid="status-badge"
|
||||
style={{
|
||||
fontSize: "0.65rem",
|
||||
fontFamily: "var(--mono)",
|
||||
color: colorMap[status],
|
||||
border: `1px solid ${colorMap[status]}`,
|
||||
borderRadius: 3,
|
||||
padding: "1px 5px",
|
||||
lineHeight: 1.6,
|
||||
letterSpacing: "0.03em",
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
{labelMap[status]}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
// ==========================================
|
||||
// Component
|
||||
// ==========================================
|
||||
|
||||
/**
|
||||
* AgentTerminal renders accumulated agent output in a scrollable pre block.
|
||||
* It is intentionally read-only — no keyboard input is accepted.
|
||||
*/
|
||||
export function AgentTerminal({ agent, className = "", style }: AgentTerminalProps): ReactElement {
|
||||
const outputRef = useRef<HTMLPreElement>(null);
|
||||
const [copied, setCopied] = useState(false);
|
||||
const [tick, setTick] = useState(0);
|
||||
|
||||
// ==========================================
|
||||
// Duration ticker — only runs while active
|
||||
// ==========================================
|
||||
|
||||
useEffect(() => {
|
||||
if (agent.status === "running" || agent.status === "spawning") {
|
||||
const id = setInterval(() => {
|
||||
setTick((t) => t + 1);
|
||||
}, 1000);
|
||||
return (): void => {
|
||||
clearInterval(id);
|
||||
};
|
||||
}
|
||||
return undefined;
|
||||
}, [agent.status]);
|
||||
|
||||
// Consume tick to avoid unused-var lint
|
||||
void tick;
|
||||
|
||||
// ==========================================
|
||||
// Auto-scroll to bottom on new output
|
||||
// ==========================================
|
||||
|
||||
useEffect(() => {
|
||||
const el = outputRef.current;
|
||||
if (el) {
|
||||
el.scrollTop = el.scrollHeight;
|
||||
}
|
||||
}, [agent.outputLines]);
|
||||
|
||||
// ==========================================
|
||||
// Copy to clipboard
|
||||
// ==========================================
|
||||
|
||||
const handleCopy = useCallback((): void => {
|
||||
const text = agent.outputLines.map(stripAnsi).join("");
|
||||
void navigator.clipboard.writeText(text).then(() => {
|
||||
setCopied(true);
|
||||
setTimeout(() => {
|
||||
setCopied(false);
|
||||
}, 2000);
|
||||
});
|
||||
}, [agent.outputLines]);
|
||||
|
||||
// ==========================================
|
||||
// Styles
|
||||
// ==========================================
|
||||
|
||||
const containerStyle: CSSProperties = {
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
height: "100%",
|
||||
background: "var(--bg-deep)",
|
||||
overflow: "hidden",
|
||||
...style,
|
||||
};
|
||||
|
||||
const headerStyle: CSSProperties = {
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: 8,
|
||||
padding: "6px 12px",
|
||||
borderBottom: "1px solid var(--border)",
|
||||
flexShrink: 0,
|
||||
background: "var(--bg-deep)",
|
||||
};
|
||||
|
||||
const titleStyle: CSSProperties = {
|
||||
fontSize: "0.75rem",
|
||||
fontFamily: "var(--mono)",
|
||||
color: "var(--text)",
|
||||
flex: 1,
|
||||
overflow: "hidden",
|
||||
textOverflow: "ellipsis",
|
||||
whiteSpace: "nowrap",
|
||||
};
|
||||
|
||||
const durationStyle: CSSProperties = {
|
||||
fontSize: "0.65rem",
|
||||
fontFamily: "var(--mono)",
|
||||
color: "var(--muted)",
|
||||
flexShrink: 0,
|
||||
};
|
||||
|
||||
const outputStyle: CSSProperties = {
|
||||
flex: 1,
|
||||
overflow: "auto",
|
||||
margin: 0,
|
||||
padding: "8px 12px",
|
||||
fontFamily: "var(--mono)",
|
||||
fontSize: "0.75rem",
|
||||
lineHeight: 1.5,
|
||||
color: "var(--text)",
|
||||
background: "var(--bg-deep)",
|
||||
whiteSpace: "pre-wrap",
|
||||
wordBreak: "break-all",
|
||||
};
|
||||
|
||||
const copyButtonStyle: CSSProperties = {
|
||||
background: "transparent",
|
||||
border: "1px solid var(--border)",
|
||||
borderRadius: 3,
|
||||
color: copied ? "var(--success)" : "var(--muted)",
|
||||
cursor: "pointer",
|
||||
fontSize: "0.65rem",
|
||||
fontFamily: "var(--mono)",
|
||||
padding: "2px 6px",
|
||||
flexShrink: 0,
|
||||
};
|
||||
|
||||
const duration = formatDuration(agent.startedAt, agent.endedAt);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={className}
|
||||
style={containerStyle}
|
||||
role="region"
|
||||
aria-label={`Agent output: ${agent.agentType}`}
|
||||
data-testid="agent-terminal"
|
||||
data-agent-id={agent.agentId}
|
||||
>
|
||||
{/* Header */}
|
||||
<div style={headerStyle} data-testid="agent-terminal-header">
|
||||
<StatusIndicator status={agent.status} />
|
||||
|
||||
<span style={titleStyle} data-testid="agent-type-label">
|
||||
{agent.agentType}
|
||||
{agent.jobId !== undefined ? ` · ${agent.jobId}` : ""}
|
||||
</span>
|
||||
|
||||
<StatusBadge status={agent.status} />
|
||||
|
||||
<span style={durationStyle} data-testid="agent-duration">
|
||||
{duration}
|
||||
</span>
|
||||
|
||||
{/* Copy button */}
|
||||
<button
|
||||
aria-label="Copy agent output"
|
||||
style={copyButtonStyle}
|
||||
onClick={handleCopy}
|
||||
data-testid="copy-button"
|
||||
onMouseEnter={(e): void => {
|
||||
if (!copied) {
|
||||
(e.currentTarget as HTMLButtonElement).style.color = "var(--text)";
|
||||
(e.currentTarget as HTMLButtonElement).style.borderColor = "var(--text-2)";
|
||||
}
|
||||
}}
|
||||
onMouseLeave={(e): void => {
|
||||
if (!copied) {
|
||||
(e.currentTarget as HTMLButtonElement).style.color = "var(--muted)";
|
||||
(e.currentTarget as HTMLButtonElement).style.borderColor = "var(--border)";
|
||||
}
|
||||
}}
|
||||
>
|
||||
{copied ? "copied" : "copy"}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Output area */}
|
||||
<pre
|
||||
ref={outputRef}
|
||||
style={outputStyle}
|
||||
data-testid="agent-output"
|
||||
aria-label="Agent output log"
|
||||
aria-live="polite"
|
||||
aria-atomic="false"
|
||||
>
|
||||
{agent.outputLines.length === 0 ? (
|
||||
<span style={{ color: "var(--muted)" }}>
|
||||
{agent.status === "spawning" ? "Spawning agent..." : "Waiting for output..."}
|
||||
</span>
|
||||
) : (
|
||||
agent.outputLines.map(stripAnsi).join("")
|
||||
)}
|
||||
</pre>
|
||||
|
||||
{/* Error message overlay */}
|
||||
{agent.status === "error" && agent.errorMessage !== undefined && (
|
||||
<div
|
||||
style={{
|
||||
padding: "4px 12px",
|
||||
fontSize: "0.7rem",
|
||||
fontFamily: "var(--mono)",
|
||||
color: "var(--danger)",
|
||||
background: "var(--bg-deep)",
|
||||
borderTop: "1px solid var(--border)",
|
||||
flexShrink: 0,
|
||||
}}
|
||||
data-testid="agent-error-message"
|
||||
role="alert"
|
||||
>
|
||||
Error: {agent.errorMessage}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Pulse animation keyframes — injected inline via style tag for zero deps */}
|
||||
<style>{`
|
||||
@keyframes agentPulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.4; }
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -33,6 +33,20 @@ vi.mock("./XTerminal", () => ({
|
||||
),
|
||||
}));
|
||||
|
||||
// Mock AgentTerminal to avoid complexity in panel tests
|
||||
vi.mock("./AgentTerminal", () => ({
|
||||
AgentTerminal: vi.fn(
|
||||
({ agent }: { agent: { agentId: string; agentType: string; status: string } }) => (
|
||||
<div
|
||||
data-testid="mock-agent-terminal"
|
||||
data-agent-id={agent.agentId}
|
||||
data-agent-type={agent.agentType}
|
||||
data-status={agent.status}
|
||||
/>
|
||||
)
|
||||
),
|
||||
}));
|
||||
|
||||
// Mock useTerminalSessions
|
||||
const mockCreateSession = vi.fn();
|
||||
const mockCloseSession = vi.fn();
|
||||
@@ -72,6 +86,29 @@ vi.mock("@/hooks/useTerminalSessions", () => ({
|
||||
})),
|
||||
}));
|
||||
|
||||
// Mock useAgentStream
|
||||
const mockDismissAgent = vi.fn();
|
||||
let mockAgents = new Map<
|
||||
string,
|
||||
{
|
||||
agentId: string;
|
||||
agentType: string;
|
||||
status: "spawning" | "running" | "completed" | "error";
|
||||
outputLines: string[];
|
||||
startedAt: number;
|
||||
}
|
||||
>();
|
||||
let mockAgentStreamConnected = false;
|
||||
|
||||
vi.mock("@/hooks/useAgentStream", () => ({
|
||||
useAgentStream: vi.fn(() => ({
|
||||
agents: mockAgents,
|
||||
isConnected: mockAgentStreamConnected,
|
||||
connectionError: null,
|
||||
dismissAgent: mockDismissAgent,
|
||||
})),
|
||||
}));
|
||||
|
||||
import { TerminalPanel } from "./TerminalPanel";
|
||||
|
||||
// ==========================================
|
||||
@@ -100,6 +137,8 @@ describe("TerminalPanel", () => {
|
||||
mockIsConnected = false;
|
||||
mockConnectionError = null;
|
||||
mockRegisterOutputCallback.mockReturnValue(vi.fn());
|
||||
mockAgents = new Map();
|
||||
mockAgentStreamConnected = false;
|
||||
});
|
||||
|
||||
// ==========================================
|
||||
@@ -425,4 +464,118 @@ describe("TerminalPanel", () => {
|
||||
expect(mockCreateSession).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
// ==========================================
|
||||
// Agent tab integration
|
||||
// ==========================================
|
||||
|
||||
describe("agent tab integration", () => {
|
||||
function setOneAgent(status: "spawning" | "running" | "completed" | "error" = "running"): void {
|
||||
mockAgents = new Map([
|
||||
[
|
||||
"agent-1",
|
||||
{
|
||||
agentId: "agent-1",
|
||||
agentType: "worker",
|
||||
status,
|
||||
outputLines: ["Hello from agent\n"],
|
||||
startedAt: Date.now() - 3000,
|
||||
},
|
||||
],
|
||||
]);
|
||||
}
|
||||
|
||||
it("renders an agent tab when an agent is active", () => {
|
||||
setOneAgent("running");
|
||||
render((<TerminalPanel open={true} onClose={onClose} token="test-token" />) as ReactElement);
|
||||
expect(screen.getAllByTestId("agent-tab")).toHaveLength(1);
|
||||
});
|
||||
|
||||
it("renders no agent tabs when agents map is empty", () => {
|
||||
mockAgents = new Map();
|
||||
render((<TerminalPanel open={true} onClose={onClose} token="test-token" />) as ReactElement);
|
||||
expect(screen.queryByTestId("agent-tab")).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("agent tab button has the agent type as label", () => {
|
||||
setOneAgent("running");
|
||||
render((<TerminalPanel open={true} onClose={onClose} token="test-token" />) as ReactElement);
|
||||
expect(screen.getByRole("tab", { name: "Agent: worker" })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("agent tab has role=tab", () => {
|
||||
setOneAgent("running");
|
||||
render((<TerminalPanel open={true} onClose={onClose} token="test-token" />) as ReactElement);
|
||||
expect(screen.getByRole("tab", { name: "Agent: worker" })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("shows dismiss button for completed agents", () => {
|
||||
setOneAgent("completed");
|
||||
render((<TerminalPanel open={true} onClose={onClose} token="test-token" />) as ReactElement);
|
||||
expect(screen.getByRole("button", { name: "Dismiss worker agent" })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("shows dismiss button for error agents", () => {
|
||||
setOneAgent("error");
|
||||
render((<TerminalPanel open={true} onClose={onClose} token="test-token" />) as ReactElement);
|
||||
expect(screen.getByRole("button", { name: "Dismiss worker agent" })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("does not show dismiss button for running agents", () => {
|
||||
setOneAgent("running");
|
||||
render((<TerminalPanel open={true} onClose={onClose} token="test-token" />) as ReactElement);
|
||||
expect(
|
||||
screen.queryByRole("button", { name: "Dismiss worker agent" })
|
||||
).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("does not show dismiss button for spawning agents", () => {
|
||||
setOneAgent("spawning");
|
||||
render((<TerminalPanel open={true} onClose={onClose} token="test-token" />) as ReactElement);
|
||||
expect(
|
||||
screen.queryByRole("button", { name: "Dismiss worker agent" })
|
||||
).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("calls dismissAgent when dismiss button is clicked", () => {
|
||||
setOneAgent("completed");
|
||||
render((<TerminalPanel open={true} onClose={onClose} token="test-token" />) as ReactElement);
|
||||
fireEvent.click(screen.getByRole("button", { name: "Dismiss worker agent" }));
|
||||
expect(mockDismissAgent).toHaveBeenCalledWith("agent-1");
|
||||
});
|
||||
|
||||
it("renders AgentTerminal when agent tab is active", () => {
|
||||
setOneAgent("running");
|
||||
render((<TerminalPanel open={true} onClose={onClose} token="test-token" />) as ReactElement);
|
||||
// Click the agent tab to make it active
|
||||
fireEvent.click(screen.getByRole("tab", { name: "Agent: worker" }));
|
||||
// AgentTerminal should be rendered (mock shows mock-agent-terminal)
|
||||
expect(screen.getByTestId("mock-agent-terminal")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("shows a divider between terminal and agent tabs", () => {
|
||||
setTwoSessions();
|
||||
setOneAgent("running");
|
||||
render((<TerminalPanel open={true} onClose={onClose} token="test-token" />) as ReactElement);
|
||||
// The divider div is aria-hidden; check it's present in the DOM
|
||||
const tablist = screen.getByRole("tablist");
|
||||
const divider = tablist.querySelector('[aria-hidden="true"][style*="width: 1"]');
|
||||
expect(divider).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("agent tabs show correct data-agent-status", () => {
|
||||
setOneAgent("running");
|
||||
render((<TerminalPanel open={true} onClose={onClose} token="test-token" />) as ReactElement);
|
||||
const tab = screen.getByTestId("agent-tab");
|
||||
expect(tab).toHaveAttribute("data-agent-status", "running");
|
||||
});
|
||||
|
||||
it("empty state not shown when agents exist but no terminal sessions", () => {
|
||||
mockSessions = new Map();
|
||||
setOneAgent("running");
|
||||
mockIsConnected = false;
|
||||
render((<TerminalPanel open={true} onClose={onClose} token="test-token" />) as ReactElement);
|
||||
expect(screen.queryByText("Connecting...")).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -7,18 +7,25 @@
|
||||
* rendering one XTerminal per session and keeping all instances mounted (for
|
||||
* scrollback preservation) while switching visibility with display:none.
|
||||
*
|
||||
* Also renders read-only agent output tabs from the orchestrator SSE stream
|
||||
* via useAgentStream. Agent tabs are automatically added when agents are active
|
||||
* and can be dismissed when completed or errored.
|
||||
*
|
||||
* Features:
|
||||
* - "+" button to open a new tab
|
||||
* - Per-tab close button
|
||||
* - Double-click tab label for inline rename
|
||||
* - Auto-creates the first session on connect
|
||||
* - "+" button to open a new terminal tab
|
||||
* - Per-tab close button (terminal) / dismiss button (agent)
|
||||
* - Double-click tab label for inline rename (terminal tabs only)
|
||||
* - Auto-creates the first terminal session on connect
|
||||
* - Connection error state
|
||||
* - Agent tabs: read-only, auto-appear, dismissable
|
||||
*/
|
||||
|
||||
import { useState, useEffect, useRef, useCallback } from "react";
|
||||
import type { ReactElement, CSSProperties, KeyboardEvent } from "react";
|
||||
import { XTerminal } from "./XTerminal";
|
||||
import { AgentTerminal } from "./AgentTerminal";
|
||||
import { useTerminalSessions } from "@/hooks/useTerminalSessions";
|
||||
import { useAgentStream } from "@/hooks/useAgentStream";
|
||||
|
||||
// ==========================================
|
||||
// Types
|
||||
@@ -59,6 +66,42 @@ export function TerminalPanel({
|
||||
registerOutputCallback,
|
||||
} = useTerminalSessions({ token });
|
||||
|
||||
// ==========================================
|
||||
// Agent stream
|
||||
// ==========================================
|
||||
|
||||
const { agents, dismissAgent } = useAgentStream();
|
||||
|
||||
// ==========================================
|
||||
// Active tab state (terminal session OR agent)
|
||||
// "terminal:<sessionId>" or "agent:<agentId>"
|
||||
// ==========================================
|
||||
|
||||
type TabId = string; // prefix-qualified: "terminal:<id>" or "agent:<id>"
|
||||
|
||||
const [activeTabId, setActiveTabId] = useState<TabId | null>(null);
|
||||
|
||||
// Sync activeTabId with the terminal session activeSessionId when no agent tab is selected
|
||||
useEffect(() => {
|
||||
setActiveTabId((prev) => {
|
||||
// If an agent tab is active, don't clobber it
|
||||
if (prev?.startsWith("agent:")) return prev;
|
||||
// Reflect active terminal session
|
||||
if (activeSessionId !== null) return `terminal:${activeSessionId}`;
|
||||
return prev;
|
||||
});
|
||||
}, [activeSessionId]);
|
||||
|
||||
// If the active agent tab is dismissed, fall back to the terminal session
|
||||
useEffect(() => {
|
||||
if (activeTabId?.startsWith("agent:")) {
|
||||
const agentId = activeTabId.slice("agent:".length);
|
||||
if (!agents.has(agentId)) {
|
||||
setActiveTabId(activeSessionId !== null ? `terminal:${activeSessionId}` : null);
|
||||
}
|
||||
}
|
||||
}, [agents, activeTabId, activeSessionId]);
|
||||
|
||||
// ==========================================
|
||||
// Inline rename state
|
||||
// ==========================================
|
||||
@@ -187,6 +230,16 @@ export function TerminalPanel({
|
||||
position: "relative",
|
||||
};
|
||||
|
||||
// ==========================================
|
||||
// Agent status dot color
|
||||
// ==========================================
|
||||
|
||||
const agentDotColor = (status: string): string => {
|
||||
if (status === "running" || status === "spawning") return "var(--success)";
|
||||
if (status === "error") return "var(--danger)";
|
||||
return "var(--muted)";
|
||||
};
|
||||
|
||||
// ==========================================
|
||||
// Render
|
||||
// ==========================================
|
||||
@@ -203,8 +256,10 @@ export function TerminalPanel({
|
||||
<div style={headerStyle}>
|
||||
{/* Tab bar */}
|
||||
<div style={tabBarStyle} role="tablist" aria-label="Terminal tabs">
|
||||
{/* ---- Terminal session tabs ---- */}
|
||||
{[...sessions.entries()].map(([sessionId, sessionInfo]) => {
|
||||
const isActive = sessionId === activeSessionId;
|
||||
const tabKey = `terminal:${sessionId}`;
|
||||
const isActive = tabKey === activeTabId;
|
||||
const isEditing = sessionId === editingTabId;
|
||||
|
||||
const tabStyle: CSSProperties = {
|
||||
@@ -223,7 +278,7 @@ export function TerminalPanel({
|
||||
};
|
||||
|
||||
return (
|
||||
<div key={sessionId} style={tabStyle}>
|
||||
<div key={tabKey} style={tabStyle}>
|
||||
{isEditing ? (
|
||||
<input
|
||||
ref={editInputRef}
|
||||
@@ -262,6 +317,7 @@ export function TerminalPanel({
|
||||
padding: 0,
|
||||
}}
|
||||
onClick={(): void => {
|
||||
setActiveTabId(tabKey);
|
||||
setActiveSession(sessionId);
|
||||
}}
|
||||
onDoubleClick={(): void => {
|
||||
@@ -364,6 +420,146 @@ export function TerminalPanel({
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
{/* ---- Agent section divider (only when agents exist) ---- */}
|
||||
{agents.size > 0 && (
|
||||
<div
|
||||
aria-hidden="true"
|
||||
style={{
|
||||
width: 1,
|
||||
height: 16,
|
||||
background: "var(--border)",
|
||||
marginLeft: 6,
|
||||
marginRight: 4,
|
||||
flexShrink: 0,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* ---- Agent tabs ---- */}
|
||||
{[...agents.entries()].map(([agentId, agentSession]) => {
|
||||
const tabKey = `agent:${agentId}`;
|
||||
const isActive = tabKey === activeTabId;
|
||||
|
||||
const canDismiss =
|
||||
agentSession.status === "completed" || agentSession.status === "error";
|
||||
|
||||
const agentTabStyle: CSSProperties = {
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: 4,
|
||||
padding: "3px 6px 3px 8px",
|
||||
borderRadius: 4,
|
||||
fontSize: "0.75rem",
|
||||
fontFamily: "var(--mono)",
|
||||
color: isActive ? "var(--text)" : "var(--muted)",
|
||||
background: isActive ? "var(--surface)" : "transparent",
|
||||
border: "none",
|
||||
outline: "none",
|
||||
flexShrink: 0,
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
key={tabKey}
|
||||
style={agentTabStyle}
|
||||
data-testid="agent-tab"
|
||||
data-agent-id={agentId}
|
||||
data-agent-status={agentSession.status}
|
||||
>
|
||||
{/* Status dot */}
|
||||
<span
|
||||
aria-hidden="true"
|
||||
style={{
|
||||
display: "inline-block",
|
||||
width: 6,
|
||||
height: 6,
|
||||
borderRadius: "50%",
|
||||
background: agentDotColor(agentSession.status),
|
||||
flexShrink: 0,
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Agent tab button — read-only, no rename */}
|
||||
<button
|
||||
role="tab"
|
||||
aria-selected={isActive}
|
||||
style={{
|
||||
background: "transparent",
|
||||
border: "none",
|
||||
outline: "none",
|
||||
fontFamily: "var(--mono)",
|
||||
fontSize: "0.75rem",
|
||||
color: isActive ? "var(--text)" : "var(--muted)",
|
||||
cursor: "pointer",
|
||||
padding: 0,
|
||||
maxWidth: 100,
|
||||
overflow: "hidden",
|
||||
textOverflow: "ellipsis",
|
||||
whiteSpace: "nowrap",
|
||||
}}
|
||||
onClick={(): void => {
|
||||
setActiveTabId(tabKey);
|
||||
}}
|
||||
onMouseEnter={(e): void => {
|
||||
if (!isActive) {
|
||||
(e.currentTarget as HTMLButtonElement).style.color = "var(--text-2)";
|
||||
}
|
||||
}}
|
||||
onMouseLeave={(e): void => {
|
||||
if (!isActive) {
|
||||
(e.currentTarget as HTMLButtonElement).style.color = "var(--muted)";
|
||||
}
|
||||
}}
|
||||
aria-label={`Agent: ${agentSession.agentType}`}
|
||||
>
|
||||
{agentSession.agentType}
|
||||
</button>
|
||||
|
||||
{/* Dismiss button — only for completed/error agents */}
|
||||
{canDismiss && (
|
||||
<button
|
||||
aria-label={`Dismiss ${agentSession.agentType} agent`}
|
||||
style={{
|
||||
width: 16,
|
||||
height: 16,
|
||||
borderRadius: 3,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
color: "var(--muted)",
|
||||
cursor: "pointer",
|
||||
background: "transparent",
|
||||
border: "none",
|
||||
outline: "none",
|
||||
padding: 0,
|
||||
flexShrink: 0,
|
||||
}}
|
||||
onClick={(): void => {
|
||||
dismissAgent(agentId);
|
||||
}}
|
||||
onMouseEnter={(e): void => {
|
||||
(e.currentTarget as HTMLButtonElement).style.background = "var(--surface)";
|
||||
(e.currentTarget as HTMLButtonElement).style.color = "var(--text)";
|
||||
}}
|
||||
onMouseLeave={(e): void => {
|
||||
(e.currentTarget as HTMLButtonElement).style.background = "transparent";
|
||||
(e.currentTarget as HTMLButtonElement).style.color = "var(--muted)";
|
||||
}}
|
||||
>
|
||||
<svg width="8" height="8" viewBox="0 0 8 8" fill="none" aria-hidden="true">
|
||||
<path
|
||||
d="M1 1L7 7M7 1L1 7"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Action buttons */}
|
||||
@@ -428,8 +624,10 @@ export function TerminalPanel({
|
||||
|
||||
{/* Terminal body — keep all XTerminal instances mounted for scrollback */}
|
||||
<div style={bodyStyle}>
|
||||
{/* ---- Terminal session panels ---- */}
|
||||
{[...sessions.entries()].map(([sessionId, sessionInfo]) => {
|
||||
const isActive = sessionId === activeSessionId;
|
||||
const tabKey = `terminal:${sessionId}`;
|
||||
const isActive = tabKey === activeTabId;
|
||||
const termStyle: CSSProperties = {
|
||||
display: isActive ? "flex" : "none",
|
||||
flex: 1,
|
||||
@@ -438,7 +636,7 @@ export function TerminalPanel({
|
||||
};
|
||||
|
||||
return (
|
||||
<div key={sessionId} style={termStyle}>
|
||||
<div key={tabKey} style={termStyle}>
|
||||
<XTerminal
|
||||
sessionId={sessionId}
|
||||
sendInput={sendInput}
|
||||
@@ -458,8 +656,26 @@ export function TerminalPanel({
|
||||
);
|
||||
})}
|
||||
|
||||
{/* Empty state */}
|
||||
{sessions.size === 0 && (
|
||||
{/* ---- Agent session panels ---- */}
|
||||
{[...agents.entries()].map(([agentId, agentSession]) => {
|
||||
const tabKey = `agent:${agentId}`;
|
||||
const isActive = tabKey === activeTabId;
|
||||
const agentPanelStyle: CSSProperties = {
|
||||
display: isActive ? "flex" : "none",
|
||||
flex: 1,
|
||||
flexDirection: "column",
|
||||
minHeight: 0,
|
||||
};
|
||||
|
||||
return (
|
||||
<div key={tabKey} style={agentPanelStyle}>
|
||||
<AgentTerminal agent={agentSession} style={{ flex: 1, minHeight: 0 }} />
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
{/* Empty state — show only when no terminal sessions AND no agent sessions */}
|
||||
{sessions.size === 0 && agents.size === 0 && (
|
||||
<div
|
||||
style={{
|
||||
flex: 1,
|
||||
|
||||
@@ -2,3 +2,5 @@ export type { TerminalPanelProps } from "./TerminalPanel";
|
||||
export { TerminalPanel } from "./TerminalPanel";
|
||||
export type { XTerminalProps } from "./XTerminal";
|
||||
export { XTerminal } from "./XTerminal";
|
||||
export type { AgentTerminalProps } from "./AgentTerminal";
|
||||
export { AgentTerminal } from "./AgentTerminal";
|
||||
|
||||
Reference in New Issue
Block a user