mirror of
https://github.com/harivansh-afk/sandbox-agent.git
synced 2026-04-18 01:00:32 +00:00
Add header status pill showing task/session/sandbox state
Surface aggregate status (error, provisioning, running, ready, no sandbox) as a colored pill in the transcript panel header. Integrates task runtime status, session status, and sandbox availability via the sandboxProcesses interest topic so the pill accurately reflects unreachable sandboxes. Includes mock tasks demonstrating error, provisioning, and running states, unit tests for deriveHeaderStatus, and workspace-dashboard integration. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Nathan Flurry
parent
098b8113f3
commit
5bd85e4a28
77 changed files with 2329 additions and 4134 deletions
|
|
@ -1,20 +1,45 @@
|
|||
import { memo, useCallback, useEffect, useMemo, useState } from "react";
|
||||
import { memo, useEffect, useMemo, useState } from "react";
|
||||
import { useStyletron } from "baseui";
|
||||
import { useFoundryTokens } from "../app/theme";
|
||||
import { isMockFrontendClient } from "../lib/env";
|
||||
import { interestManager } from "../lib/interest";
|
||||
import type { FoundryOrganization, TaskWorkbenchSnapshot, WorkbenchTask } from "@sandbox-agent/foundry-shared";
|
||||
import type {
|
||||
FoundryOrganization,
|
||||
TaskStatus,
|
||||
TaskWorkbenchSnapshot,
|
||||
WorkbenchSandboxSummary,
|
||||
WorkbenchSessionSummary,
|
||||
WorkbenchTaskStatus,
|
||||
} from "@sandbox-agent/foundry-shared";
|
||||
import type { DebugInterestTopic } from "@sandbox-agent/foundry-client";
|
||||
import { describeTaskState } from "../features/tasks/status";
|
||||
|
||||
interface DevPanelProps {
|
||||
workspaceId: string;
|
||||
snapshot: TaskWorkbenchSnapshot;
|
||||
organization?: FoundryOrganization | null;
|
||||
focusedTask?: DevPanelFocusedTask | null;
|
||||
}
|
||||
|
||||
export interface DevPanelFocusedTask {
|
||||
id: string;
|
||||
repoId: string;
|
||||
title: string | null;
|
||||
status: WorkbenchTaskStatus;
|
||||
runtimeStatus?: TaskStatus | null;
|
||||
statusMessage?: string | null;
|
||||
branch?: string | null;
|
||||
activeSandboxId?: string | null;
|
||||
activeSessionId?: string | null;
|
||||
sandboxes?: WorkbenchSandboxSummary[];
|
||||
sessions?: WorkbenchSessionSummary[];
|
||||
}
|
||||
|
||||
interface TopicInfo {
|
||||
label: string;
|
||||
key: string;
|
||||
/** Parsed params portion of the cache key, or empty if none. */
|
||||
params: string;
|
||||
listenerCount: number;
|
||||
hasConnection: boolean;
|
||||
status: "loading" | "connected" | "error";
|
||||
|
|
@ -36,6 +61,12 @@ function topicLabel(topic: DebugInterestTopic): string {
|
|||
}
|
||||
}
|
||||
|
||||
/** Extract the params portion of a cache key (everything after the first `:`) */
|
||||
function topicParams(topic: DebugInterestTopic): string {
|
||||
const idx = topic.cacheKey.indexOf(":");
|
||||
return idx >= 0 ? topic.cacheKey.slice(idx + 1) : "";
|
||||
}
|
||||
|
||||
function timeAgo(ts: number | null): string {
|
||||
if (!ts) return "never";
|
||||
const seconds = Math.floor((Date.now() - ts) / 1000);
|
||||
|
|
@ -46,17 +77,14 @@ function timeAgo(ts: number | null): string {
|
|||
return `${Math.floor(minutes / 60)}h`;
|
||||
}
|
||||
|
||||
function taskStatusLabel(task: WorkbenchTask): string {
|
||||
if (task.status === "archived") return "archived";
|
||||
const hasRunning = task.tabs?.some((tab) => tab.status === "running");
|
||||
if (hasRunning) return "running";
|
||||
return task.status ?? "idle";
|
||||
}
|
||||
|
||||
function statusColor(status: string, t: ReturnType<typeof useFoundryTokens>): string {
|
||||
if (status === "new" || status.startsWith("init_") || status.startsWith("archive_") || status.startsWith("kill_") || status.startsWith("pending_")) {
|
||||
return t.statusWarning;
|
||||
}
|
||||
switch (status) {
|
||||
case "connected":
|
||||
case "running":
|
||||
case "ready":
|
||||
return t.statusSuccess;
|
||||
case "loading":
|
||||
return t.statusWarning;
|
||||
|
|
@ -97,7 +125,15 @@ function installStatusColor(status: string, t: ReturnType<typeof useFoundryToken
|
|||
}
|
||||
}
|
||||
|
||||
export const DevPanel = memo(function DevPanel({ workspaceId, snapshot, organization }: DevPanelProps) {
|
||||
/** Format elapsed thinking time as a compact string. */
|
||||
function thinkingLabel(sinceMs: number | null, now: number): string | null {
|
||||
if (!sinceMs) return null;
|
||||
const elapsed = Math.floor((now - sinceMs) / 1000);
|
||||
if (elapsed < 1) return "thinking";
|
||||
return `thinking ${elapsed}s`;
|
||||
}
|
||||
|
||||
export const DevPanel = memo(function DevPanel({ workspaceId, snapshot, organization, focusedTask }: DevPanelProps) {
|
||||
const [css] = useStyletron();
|
||||
const t = useFoundryTokens();
|
||||
const [now, setNow] = useState(Date.now());
|
||||
|
|
@ -112,6 +148,7 @@ export const DevPanel = memo(function DevPanel({ workspaceId, snapshot, organiza
|
|||
return interestManager.listDebugTopics().map((topic) => ({
|
||||
label: topicLabel(topic),
|
||||
key: topic.cacheKey,
|
||||
params: topicParams(topic),
|
||||
listenerCount: topic.listenerCount,
|
||||
hasConnection: topic.status === "connected",
|
||||
status: topic.status,
|
||||
|
|
@ -119,9 +156,9 @@ export const DevPanel = memo(function DevPanel({ workspaceId, snapshot, organiza
|
|||
}));
|
||||
}, [now]);
|
||||
|
||||
const tasks = snapshot.tasks ?? [];
|
||||
const repos = snapshot.repos ?? [];
|
||||
const projects = snapshot.projects ?? [];
|
||||
const focusedTaskStatus = focusedTask?.runtimeStatus ?? focusedTask?.status ?? null;
|
||||
const focusedTaskState = describeTaskState(focusedTaskStatus, focusedTask?.statusMessage ?? null);
|
||||
|
||||
const mono = css({
|
||||
fontFamily: "ui-monospace, SFMono-Regular, 'SF Mono', Consolas, monospace",
|
||||
|
|
@ -203,7 +240,13 @@ export const DevPanel = memo(function DevPanel({ workspaceId, snapshot, organiza
|
|||
{topic.label}
|
||||
</span>
|
||||
<span className={`${mono} ${css({ color: statusColor(topic.status, t) })}`}>{topic.status}</span>
|
||||
<span className={`${mono} ${css({ color: t.textMuted })}`}>{topic.key.length > 24 ? `...${topic.key.slice(-20)}` : topic.key}</span>
|
||||
{topic.params && (
|
||||
<span
|
||||
className={`${mono} ${css({ color: t.textMuted, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", maxWidth: "100px" })}`}
|
||||
>
|
||||
{topic.params}
|
||||
</span>
|
||||
)}
|
||||
<span className={`${mono} ${css({ color: t.textTertiary })}`}>{timeAgo(topic.lastRefresh)}</span>
|
||||
</div>
|
||||
))}
|
||||
|
|
@ -214,44 +257,150 @@ export const DevPanel = memo(function DevPanel({ workspaceId, snapshot, organiza
|
|||
<Section label="Snapshot" t={t} css={css}>
|
||||
<div className={css({ display: "flex", gap: "10px", fontSize: "10px" })}>
|
||||
<Stat label="repos" value={repos.length} t={t} css={css} />
|
||||
<Stat label="projects" value={projects.length} t={t} css={css} />
|
||||
<Stat label="tasks" value={tasks.length} t={t} css={css} />
|
||||
<Stat label="tasks" value={(snapshot.tasks ?? []).length} t={t} css={css} />
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
{/* Tasks */}
|
||||
{tasks.length > 0 && (
|
||||
<Section label="Tasks" t={t} css={css}>
|
||||
{tasks.slice(0, 10).map((task) => {
|
||||
const status = taskStatusLabel(task);
|
||||
return (
|
||||
<div
|
||||
key={task.id}
|
||||
<Section label="Focused Task" t={t} css={css}>
|
||||
{focusedTask ? (
|
||||
<div className={css({ display: "flex", flexDirection: "column", gap: "3px", fontSize: "10px" })}>
|
||||
<div className={css({ display: "flex", alignItems: "center", gap: "6px" })}>
|
||||
<span
|
||||
className={css({
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "6px",
|
||||
padding: "1px 0",
|
||||
fontSize: "10px",
|
||||
width: "5px",
|
||||
height: "5px",
|
||||
borderRadius: "50%",
|
||||
backgroundColor: statusColor(focusedTaskStatus ?? focusedTask.status, t),
|
||||
flexShrink: 0,
|
||||
})}
|
||||
>
|
||||
<span
|
||||
/>
|
||||
<span className={css({ color: t.textPrimary, flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" })}>
|
||||
{focusedTask.title || focusedTask.id.slice(0, 12)}
|
||||
</span>
|
||||
<span className={`${mono} ${css({ color: statusColor(focusedTaskStatus ?? focusedTask.status, t) })}`}>
|
||||
{focusedTaskStatus ?? focusedTask.status}
|
||||
</span>
|
||||
</div>
|
||||
<div className={`${mono} ${css({ color: t.textMuted })}`}>{focusedTaskState.detail}</div>
|
||||
<div className={`${mono} ${css({ color: t.textTertiary })}`}>task: {focusedTask.id}</div>
|
||||
<div className={`${mono} ${css({ color: t.textTertiary })}`}>repo: {focusedTask.repoId}</div>
|
||||
<div className={`${mono} ${css({ color: t.textTertiary })}`}>branch: {focusedTask.branch ?? "-"}</div>
|
||||
</div>
|
||||
) : (
|
||||
<span className={css({ fontSize: "10px", color: t.textMuted })}>No task focused</span>
|
||||
)}
|
||||
</Section>
|
||||
|
||||
{/* Session — only when a task is focused */}
|
||||
{focusedTask && (
|
||||
<Section label="Session" t={t} css={css}>
|
||||
{(focusedTask.sessions?.length ?? 0) > 0 ? (
|
||||
focusedTask.sessions!.map((session) => {
|
||||
const isActive = session.id === focusedTask.activeSessionId;
|
||||
const thinking = thinkingLabel(session.thinkingSinceMs, now);
|
||||
return (
|
||||
<div
|
||||
key={session.id}
|
||||
className={css({
|
||||
width: "5px",
|
||||
height: "5px",
|
||||
borderRadius: "50%",
|
||||
backgroundColor: statusColor(status, t),
|
||||
flexShrink: 0,
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "1px",
|
||||
padding: "2px 0",
|
||||
fontSize: "10px",
|
||||
})}
|
||||
/>
|
||||
<span className={css({ color: t.textPrimary, flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" })}>
|
||||
{task.title || task.id.slice(0, 12)}
|
||||
</span>
|
||||
<span className={`${mono} ${css({ color: statusColor(status, t) })}`}>{status}</span>
|
||||
<span className={`${mono} ${css({ color: t.textMuted })}`}>{task.tabs?.length ?? 0} tabs</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
>
|
||||
<div className={css({ display: "flex", alignItems: "center", gap: "6px" })}>
|
||||
<span
|
||||
className={css({
|
||||
width: "5px",
|
||||
height: "5px",
|
||||
borderRadius: "50%",
|
||||
backgroundColor: statusColor(session.status, t),
|
||||
flexShrink: 0,
|
||||
})}
|
||||
/>
|
||||
<span
|
||||
className={css({
|
||||
color: isActive ? t.textPrimary : t.textTertiary,
|
||||
flex: 1,
|
||||
overflow: "hidden",
|
||||
textOverflow: "ellipsis",
|
||||
whiteSpace: "nowrap",
|
||||
})}
|
||||
>
|
||||
{session.sessionName || session.id.slice(0, 12)}
|
||||
{isActive ? " *" : ""}
|
||||
</span>
|
||||
<span className={`${mono} ${css({ color: statusColor(session.status, t) })}`}>{session.status}</span>
|
||||
</div>
|
||||
<div className={css({ display: "flex", gap: "6px", paddingLeft: "11px" })}>
|
||||
<span className={`${mono} ${css({ color: t.textMuted })}`}>{session.agent}</span>
|
||||
<span className={`${mono} ${css({ color: t.textMuted })}`}>{session.model}</span>
|
||||
{!session.created && <span className={`${mono} ${css({ color: t.statusWarning })}`}>not created</span>}
|
||||
{session.unread && <span className={`${mono} ${css({ color: t.statusWarning })}`}>unread</span>}
|
||||
{thinking && <span className={`${mono} ${css({ color: t.statusWarning })}`}>{thinking}</span>}
|
||||
</div>
|
||||
{session.errorMessage && (
|
||||
<div className={`${mono} ${css({ color: t.statusError, paddingLeft: "11px", wordBreak: "break-word" })}`}>{session.errorMessage}</div>
|
||||
)}
|
||||
{session.sessionId && <div className={`${mono} ${css({ color: t.textTertiary, paddingLeft: "11px" })}`}>sid: {session.sessionId}</div>}
|
||||
</div>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<span className={css({ fontSize: "10px", color: t.textMuted })}>No sessions</span>
|
||||
)}
|
||||
</Section>
|
||||
)}
|
||||
|
||||
{/* Sandbox — only when a task is focused */}
|
||||
{focusedTask && (
|
||||
<Section label="Sandbox" t={t} css={css}>
|
||||
{(focusedTask.sandboxes?.length ?? 0) > 0 ? (
|
||||
focusedTask.sandboxes!.map((sandbox) => {
|
||||
const isActive = sandbox.sandboxId === focusedTask.activeSandboxId;
|
||||
return (
|
||||
<div
|
||||
key={sandbox.sandboxId}
|
||||
className={css({
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "1px",
|
||||
padding: "2px 0",
|
||||
fontSize: "10px",
|
||||
})}
|
||||
>
|
||||
<div className={css({ display: "flex", alignItems: "center", gap: "6px" })}>
|
||||
<span
|
||||
className={css({
|
||||
width: "5px",
|
||||
height: "5px",
|
||||
borderRadius: "50%",
|
||||
backgroundColor: isActive ? t.statusSuccess : t.textMuted,
|
||||
flexShrink: 0,
|
||||
})}
|
||||
/>
|
||||
<span
|
||||
className={css({
|
||||
color: isActive ? t.textPrimary : t.textTertiary,
|
||||
flex: 1,
|
||||
overflow: "hidden",
|
||||
textOverflow: "ellipsis",
|
||||
whiteSpace: "nowrap",
|
||||
})}
|
||||
>
|
||||
{sandbox.sandboxId.slice(0, 16)}
|
||||
{isActive ? " *" : ""}
|
||||
</span>
|
||||
<span className={`${mono} ${css({ color: t.textMuted })}`}>{sandbox.providerId}</span>
|
||||
</div>
|
||||
{sandbox.cwd && <div className={`${mono} ${css({ color: t.textTertiary, paddingLeft: "11px" })}`}>cwd: {sandbox.cwd}</div>}
|
||||
</div>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<span className={css({ fontSize: "10px", color: t.textMuted })}>No sandboxes</span>
|
||||
)}
|
||||
</Section>
|
||||
)}
|
||||
|
||||
|
|
|
|||
|
|
@ -40,6 +40,7 @@ import {
|
|||
import { activeMockOrganization, useMockAppSnapshot } from "../lib/mock-app";
|
||||
import { backendClient } from "../lib/backend";
|
||||
import { interestManager } from "../lib/interest";
|
||||
import { describeTaskState, isProvisioningTaskStatus } from "../features/tasks/status";
|
||||
|
||||
function firstAgentTabId(task: Task): string | null {
|
||||
return task.tabs[0]?.id ?? null;
|
||||
|
|
@ -124,10 +125,6 @@ function toLegacyTask(
|
|||
};
|
||||
}
|
||||
|
||||
function isProvisioningTaskStatus(status: string | null | undefined): boolean {
|
||||
return status === "new" || String(status ?? "").startsWith("init_");
|
||||
}
|
||||
|
||||
function sessionStateMessage(tab: Task["tabs"][number] | null | undefined): string | null {
|
||||
if (!tab) {
|
||||
return null;
|
||||
|
|
@ -176,6 +173,7 @@ interface WorkbenchActions {
|
|||
const TranscriptPanel = memo(function TranscriptPanel({
|
||||
taskWorkbenchClient,
|
||||
task,
|
||||
hasSandbox,
|
||||
activeTabId,
|
||||
lastAgentTabId,
|
||||
openDiffs,
|
||||
|
|
@ -193,6 +191,7 @@ const TranscriptPanel = memo(function TranscriptPanel({
|
|||
}: {
|
||||
taskWorkbenchClient: WorkbenchActions;
|
||||
task: Task;
|
||||
hasSandbox: boolean;
|
||||
activeTabId: string | null;
|
||||
lastAgentTabId: string | null;
|
||||
openDiffs: string[];
|
||||
|
|
@ -226,8 +225,10 @@ const TranscriptPanel = memo(function TranscriptPanel({
|
|||
const isTerminal = task.status === "archived";
|
||||
const historyEvents = useMemo(() => buildHistoryEvents(task.tabs), [task.tabs]);
|
||||
const activeMessages = useMemo(() => buildDisplayMessages(activeAgentTab), [activeAgentTab]);
|
||||
const taskProvisioning = isProvisioningTaskStatus(task.runtimeStatus ?? task.status);
|
||||
const taskProvisioningMessage = task.statusMessage ?? "Provisioning sandbox...";
|
||||
const taskRuntimeStatus = task.runtimeStatus ?? task.status;
|
||||
const taskState = describeTaskState(taskRuntimeStatus, task.statusMessage ?? null);
|
||||
const taskProvisioning = isProvisioningTaskStatus(taskRuntimeStatus);
|
||||
const taskProvisioningMessage = taskState.detail;
|
||||
const activeSessionMessage = sessionStateMessage(activeAgentTab);
|
||||
const showPendingSessionState =
|
||||
!activeDiff &&
|
||||
|
|
@ -574,6 +575,7 @@ const TranscriptPanel = memo(function TranscriptPanel({
|
|||
<SPanel>
|
||||
<TranscriptHeader
|
||||
task={task}
|
||||
hasSandbox={hasSandbox}
|
||||
activeTab={activeAgentTab}
|
||||
editingField={editingField}
|
||||
editValue={editValue}
|
||||
|
|
@ -657,7 +659,7 @@ const TranscriptPanel = memo(function TranscriptPanel({
|
|||
{taskProvisioning ? (
|
||||
<>
|
||||
<SpinnerDot size={16} />
|
||||
<h2 style={{ margin: 0, fontSize: "20px", fontWeight: 600 }}>Provisioning task</h2>
|
||||
<h2 style={{ margin: 0, fontSize: "20px", fontWeight: 600 }}>{taskState.title}</h2>
|
||||
<p style={{ margin: 0, opacity: 0.75 }}>{taskProvisioningMessage}</p>
|
||||
</>
|
||||
) : (
|
||||
|
|
@ -1130,6 +1132,22 @@ export function MockLayout({ workspaceId, selectedTaskId, selectedSessionId }: M
|
|||
}
|
||||
: null,
|
||||
);
|
||||
const activeSandbox = useMemo(() => {
|
||||
if (!taskState.data?.activeSandboxId) return null;
|
||||
return taskState.data.sandboxes?.find((s) => s.sandboxId === taskState.data!.activeSandboxId) ?? null;
|
||||
}, [taskState.data?.activeSandboxId, taskState.data?.sandboxes]);
|
||||
const sandboxState = useInterest(
|
||||
interestManager,
|
||||
"sandboxProcesses",
|
||||
activeSandbox
|
||||
? {
|
||||
workspaceId,
|
||||
providerId: activeSandbox.providerId,
|
||||
sandboxId: activeSandbox.sandboxId,
|
||||
}
|
||||
: null,
|
||||
);
|
||||
const hasSandbox = Boolean(activeSandbox) && sandboxState.status !== "error";
|
||||
const tasks = useMemo(() => {
|
||||
const sessionCache = new Map<string, { draft: Task["tabs"][number]["draft"]; transcript: Task["tabs"][number]["transcript"] }>();
|
||||
if (selectedTaskSummary && taskState.data) {
|
||||
|
|
@ -1387,7 +1405,7 @@ export function MockLayout({ workspaceId, selectedTaskId, selectedSessionId }: M
|
|||
const { taskId, tabId } = await taskWorkbenchClient.createTask({
|
||||
repoId,
|
||||
task: "New task",
|
||||
model: "gpt-4o",
|
||||
model: "gpt-5.3-codex",
|
||||
title: "New task",
|
||||
});
|
||||
await navigate({
|
||||
|
|
@ -1787,6 +1805,7 @@ export function MockLayout({ workspaceId, selectedTaskId, selectedSessionId }: M
|
|||
workspaceId={workspaceId}
|
||||
snapshot={{ workspaceId, repos: workspaceRepos, projects: rawProjects, tasks } as TaskWorkbenchSnapshot}
|
||||
organization={activeOrg}
|
||||
focusedTask={null}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
|
|
@ -1888,6 +1907,7 @@ export function MockLayout({ workspaceId, selectedTaskId, selectedSessionId }: M
|
|||
<TranscriptPanel
|
||||
taskWorkbenchClient={taskWorkbenchClient}
|
||||
task={activeTask}
|
||||
hasSandbox={hasSandbox}
|
||||
activeTabId={activeTabId}
|
||||
lastAgentTabId={lastAgentTabId}
|
||||
openDiffs={openDiffs}
|
||||
|
|
@ -1978,6 +1998,30 @@ export function MockLayout({ workspaceId, selectedTaskId, selectedSessionId }: M
|
|||
workspaceId={workspaceId}
|
||||
snapshot={{ workspaceId, repos: workspaceRepos, projects: rawProjects, tasks } as TaskWorkbenchSnapshot}
|
||||
organization={activeOrg}
|
||||
focusedTask={{
|
||||
id: activeTask.id,
|
||||
repoId: activeTask.repoId,
|
||||
title: activeTask.title,
|
||||
status: activeTask.status,
|
||||
runtimeStatus: activeTask.runtimeStatus ?? null,
|
||||
statusMessage: activeTask.statusMessage ?? null,
|
||||
branch: activeTask.branch ?? null,
|
||||
activeSandboxId: activeTask.activeSandboxId ?? null,
|
||||
activeSessionId: selectedSessionId ?? activeTask.tabs[0]?.id ?? null,
|
||||
sandboxes: [],
|
||||
sessions:
|
||||
activeTask.tabs?.map((tab) => ({
|
||||
id: tab.id,
|
||||
sessionId: tab.sessionId ?? null,
|
||||
sessionName: tab.sessionName ?? tab.id,
|
||||
agent: tab.agent,
|
||||
model: tab.model,
|
||||
status: tab.status,
|
||||
thinkingSinceMs: tab.thinkingSinceMs ?? null,
|
||||
unread: tab.unread ?? false,
|
||||
created: tab.created ?? false,
|
||||
})) ?? [],
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</Shell>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,16 @@
|
|||
import { memo } from "react";
|
||||
import { memo, useMemo } from "react";
|
||||
import { useStyletron } from "baseui";
|
||||
import { LabelSmall } from "baseui/typography";
|
||||
import { Clock, PanelLeft, PanelRight } from "lucide-react";
|
||||
|
||||
import { useFoundryTokens } from "../../app/theme";
|
||||
import { PanelHeaderBar } from "./ui";
|
||||
import { deriveHeaderStatus } from "../../features/tasks/status";
|
||||
import { HeaderStatusPill, PanelHeaderBar } from "./ui";
|
||||
import { type AgentTab, type Task } from "./view-model";
|
||||
|
||||
export const TranscriptHeader = memo(function TranscriptHeader({
|
||||
task,
|
||||
hasSandbox,
|
||||
activeTab,
|
||||
editingField,
|
||||
editValue,
|
||||
|
|
@ -26,6 +28,7 @@ export const TranscriptHeader = memo(function TranscriptHeader({
|
|||
onNavigateToUsage,
|
||||
}: {
|
||||
task: Task;
|
||||
hasSandbox: boolean;
|
||||
activeTab: AgentTab | null | undefined;
|
||||
editingField: "title" | "branch" | null;
|
||||
editValue: string;
|
||||
|
|
@ -46,6 +49,11 @@ export const TranscriptHeader = memo(function TranscriptHeader({
|
|||
const t = useFoundryTokens();
|
||||
const isDesktop = !!import.meta.env.VITE_DESKTOP;
|
||||
const needsTrafficLightInset = isDesktop && sidebarCollapsed;
|
||||
const taskStatus = task.runtimeStatus ?? task.status;
|
||||
const headerStatus = useMemo(
|
||||
() => deriveHeaderStatus(taskStatus, task.statusMessage ?? null, activeTab?.status ?? null, activeTab?.errorMessage ?? null, hasSandbox),
|
||||
[taskStatus, task.statusMessage, activeTab?.status, activeTab?.errorMessage, hasSandbox],
|
||||
);
|
||||
|
||||
return (
|
||||
<PanelHeaderBar $style={{ backgroundColor: t.surfaceSecondary, borderBottom: "none", paddingLeft: needsTrafficLightInset ? "74px" : "14px" }}>
|
||||
|
|
@ -161,6 +169,7 @@ export const TranscriptHeader = memo(function TranscriptHeader({
|
|||
</span>
|
||||
)
|
||||
) : null}
|
||||
<HeaderStatusPill status={headerStatus} />
|
||||
<div className={css({ flex: 1 })} />
|
||||
<div
|
||||
role="button"
|
||||
|
|
|
|||
|
|
@ -184,6 +184,73 @@ export const AgentIcon = memo(function AgentIcon({ agent, size = 14 }: { agent:
|
|||
}
|
||||
});
|
||||
|
||||
export type HeaderStatusVariant = "error" | "warning" | "success" | "neutral";
|
||||
|
||||
export interface HeaderStatusInfo {
|
||||
variant: HeaderStatusVariant;
|
||||
label: string;
|
||||
spinning: boolean;
|
||||
tooltip?: string;
|
||||
}
|
||||
|
||||
export const HeaderStatusPill = memo(function HeaderStatusPill({ status }: { status: HeaderStatusInfo }) {
|
||||
const [css] = useStyletron();
|
||||
const t = useFoundryTokens();
|
||||
|
||||
const colorMap: Record<HeaderStatusVariant, { bg: string; text: string; dot: string }> = {
|
||||
error: { bg: `${t.statusError}18`, text: t.statusError, dot: t.statusError },
|
||||
warning: { bg: `${t.statusWarning}18`, text: t.statusWarning, dot: t.statusWarning },
|
||||
success: { bg: `${t.statusSuccess}18`, text: t.statusSuccess, dot: t.statusSuccess },
|
||||
neutral: { bg: t.interactiveSubtle, text: t.textTertiary, dot: t.textTertiary },
|
||||
};
|
||||
const colors = colorMap[status.variant];
|
||||
|
||||
return (
|
||||
<div
|
||||
title={status.tooltip}
|
||||
className={css({
|
||||
display: "inline-flex",
|
||||
alignItems: "center",
|
||||
gap: "5px",
|
||||
padding: "2px 8px",
|
||||
borderRadius: "999px",
|
||||
backgroundColor: colors.bg,
|
||||
fontSize: "11px",
|
||||
fontWeight: 500,
|
||||
lineHeight: 1,
|
||||
color: colors.text,
|
||||
whiteSpace: "nowrap",
|
||||
flexShrink: 0,
|
||||
})}
|
||||
>
|
||||
{status.spinning ? (
|
||||
<div
|
||||
style={{
|
||||
width: 8,
|
||||
height: 8,
|
||||
borderRadius: "50%",
|
||||
border: `1.5px solid ${colors.dot}40`,
|
||||
borderTopColor: colors.dot,
|
||||
animation: "hf-spin 0.8s linear infinite",
|
||||
flexShrink: 0,
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<div
|
||||
style={{
|
||||
width: 6,
|
||||
height: 6,
|
||||
borderRadius: "50%",
|
||||
backgroundColor: colors.dot,
|
||||
flexShrink: 0,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
<span>{status.label}</span>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
export const TabAvatar = memo(function TabAvatar({ tab }: { tab: AgentTab }) {
|
||||
if (tab.status === "running" || tab.status === "pending_provision" || tab.status === "pending_session_create") return <SpinnerDot size={8} />;
|
||||
if (tab.unread) return <UnreadDot />;
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ function makeTab(transcript: WorkbenchAgentTab["transcript"]): WorkbenchAgentTab
|
|||
sessionId: "session-1",
|
||||
sessionName: "Session 1",
|
||||
agent: "Codex",
|
||||
model: "gpt-4o",
|
||||
model: "gpt-5.3-codex",
|
||||
status: "idle",
|
||||
thinkingSinceMs: null,
|
||||
unread: false,
|
||||
|
|
|
|||
|
|
@ -28,8 +28,12 @@ export const MODEL_GROUPS: ModelGroup[] = [
|
|||
{
|
||||
provider: "OpenAI",
|
||||
models: [
|
||||
{ id: "gpt-4o", label: "GPT-4o" },
|
||||
{ id: "o3", label: "o3" },
|
||||
{ id: "gpt-5.3-codex", label: "GPT-5.3 Codex" },
|
||||
{ id: "gpt-5.4", label: "GPT-5.4" },
|
||||
{ id: "gpt-5.2-codex", label: "GPT-5.2 Codex" },
|
||||
{ id: "gpt-5.1-codex-max", label: "GPT-5.1 Codex Max" },
|
||||
{ id: "gpt-5.2", label: "GPT-5.2" },
|
||||
{ id: "gpt-5.1-codex-mini", label: "GPT-5.1 Codex Mini" },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { useEffect, useMemo, useState, type ReactNode } from "react";
|
||||
import type { AgentType, RepoBranchRecord, RepoOverview, RepoStackAction, WorkbenchTaskStatus } from "@sandbox-agent/foundry-shared";
|
||||
import type { AgentType, RepoBranchRecord, RepoOverview, RepoStackAction, TaskWorkbenchSnapshot, WorkbenchTaskStatus } from "@sandbox-agent/foundry-shared";
|
||||
import { useInterest } from "@sandbox-agent/foundry-client";
|
||||
import { useMutation, useQuery } from "@tanstack/react-query";
|
||||
import { Link, useNavigate } from "@tanstack/react-router";
|
||||
|
|
@ -15,9 +15,12 @@ import { styled, useStyletron } from "baseui";
|
|||
import { HeadingSmall, HeadingXSmall, LabelSmall, LabelXSmall, MonoLabelSmall, ParagraphSmall } from "baseui/typography";
|
||||
import { Bot, CircleAlert, FolderGit2, GitBranch, MessageSquareText, SendHorizontal, Shuffle } from "lucide-react";
|
||||
import { formatDiffStat } from "../features/tasks/model";
|
||||
import { deriveHeaderStatus, describeTaskState } from "../features/tasks/status";
|
||||
import { HeaderStatusPill } from "./mock-layout/ui";
|
||||
import { buildTranscript, resolveSessionSelection } from "../features/sessions/model";
|
||||
import { backendClient } from "../lib/backend";
|
||||
import { interestManager } from "../lib/interest";
|
||||
import { DevPanel, useDevPanel } from "./dev-panel";
|
||||
|
||||
interface WorkspaceDashboardProps {
|
||||
workspaceId: string;
|
||||
|
|
@ -333,6 +336,7 @@ function MetaRow({ label, value, mono = false }: { label: string; value: string;
|
|||
export function WorkspaceDashboard({ workspaceId, selectedTaskId, selectedRepoId }: WorkspaceDashboardProps) {
|
||||
const [css, theme] = useStyletron();
|
||||
const navigate = useNavigate();
|
||||
const showDevPanel = useDevPanel();
|
||||
const repoOverviewMode = typeof selectedRepoId === "string" && selectedRepoId.length > 0;
|
||||
|
||||
const [draft, setDraft] = useState("");
|
||||
|
|
@ -468,6 +472,10 @@ export function WorkspaceDashboard({ workspaceId, selectedTaskId, selectedRepoId
|
|||
}, [selectedForSession?.id]);
|
||||
|
||||
const sessionRows = selectedForSession?.sessionsSummary ?? [];
|
||||
const taskRuntimeStatus = selectedForSession?.runtimeStatus ?? selectedForSession?.status ?? null;
|
||||
const taskStatusState = describeTaskState(taskRuntimeStatus, selectedForSession?.statusMessage ?? null);
|
||||
const taskStateSummary = `${taskStatusState.title}. ${taskStatusState.detail}`;
|
||||
const shouldUseTaskStateEmptyState = Boolean(selectedForSession && taskRuntimeStatus && taskRuntimeStatus !== "running" && taskRuntimeStatus !== "idle");
|
||||
const sessionSelection = useMemo(
|
||||
() =>
|
||||
resolveSessionSelection({
|
||||
|
|
@ -503,6 +511,64 @@ export function WorkspaceDashboard({ workspaceId, selectedTaskId, selectedRepoId
|
|||
const isPendingSessionCreate = selectedSessionSummary?.status === "pending_session_create";
|
||||
const isSessionError = selectedSessionSummary?.status === "error";
|
||||
const canStartSession = Boolean(selectedForSession && activeSandbox?.sandboxId);
|
||||
const devPanelFocusedTask = useMemo(() => {
|
||||
if (repoOverviewMode) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const task = selectedForSession ?? selectedSummary;
|
||||
if (!task) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return {
|
||||
id: task.id,
|
||||
repoId: task.repoId,
|
||||
title: task.title,
|
||||
status: task.status,
|
||||
runtimeStatus: selectedForSession?.runtimeStatus ?? null,
|
||||
statusMessage: selectedForSession?.statusMessage ?? null,
|
||||
branch: task.branch ?? null,
|
||||
activeSandboxId: selectedForSession?.activeSandboxId ?? null,
|
||||
activeSessionId: selectedForSession?.activeSessionId ?? null,
|
||||
sandboxes: selectedForSession?.sandboxes ?? [],
|
||||
sessions: selectedForSession?.sessionsSummary ?? [],
|
||||
};
|
||||
}, [repoOverviewMode, selectedForSession, selectedSummary]);
|
||||
const devPanelSnapshot = useMemo(
|
||||
(): TaskWorkbenchSnapshot => ({
|
||||
workspaceId,
|
||||
repos: repos.map((repo) => ({ id: repo.id, label: repo.label })),
|
||||
projects: [],
|
||||
tasks: rows.map((task) => ({
|
||||
id: task.id,
|
||||
repoId: task.repoId,
|
||||
title: task.title,
|
||||
status: task.status,
|
||||
runtimeStatus: selectedForSession?.id === task.id ? selectedForSession.runtimeStatus : undefined,
|
||||
statusMessage: selectedForSession?.id === task.id ? selectedForSession.statusMessage : null,
|
||||
repoName: task.repoName,
|
||||
updatedAtMs: task.updatedAtMs,
|
||||
branch: task.branch ?? null,
|
||||
pullRequest: task.pullRequest,
|
||||
tabs: task.sessionsSummary.map((session) => ({
|
||||
...session,
|
||||
draft: {
|
||||
text: "",
|
||||
attachments: [],
|
||||
updatedAtMs: null,
|
||||
},
|
||||
transcript: [],
|
||||
})),
|
||||
fileChanges: [],
|
||||
diffs: {},
|
||||
fileTree: [],
|
||||
minutesUsed: 0,
|
||||
activeSandboxId: selectedForSession?.id === task.id ? selectedForSession.activeSandboxId : null,
|
||||
})),
|
||||
}),
|
||||
[repos, rows, selectedForSession, workspaceId],
|
||||
);
|
||||
|
||||
const startSessionFromTask = async (): Promise<{ id: string; status: "running" | "idle" | "error" }> => {
|
||||
if (!selectedForSession || !activeSandbox?.sandboxId) {
|
||||
|
|
@ -1270,7 +1336,17 @@ export function WorkspaceDashboard({ workspaceId, selectedTaskId, selectedRepoId
|
|||
<HeadingXSmall marginTop="0" marginBottom="0">
|
||||
{selectedForSession ? (selectedForSession.title ?? "Determining title...") : "No task selected"}
|
||||
</HeadingXSmall>
|
||||
{selectedForSession ? <StatusPill kind={statusKind(selectedForSession.status)}>{selectedForSession.status}</StatusPill> : null}
|
||||
{selectedForSession ? (
|
||||
<HeaderStatusPill
|
||||
status={deriveHeaderStatus(
|
||||
taskRuntimeStatus ?? selectedForSession.status,
|
||||
selectedForSession.statusMessage ?? null,
|
||||
selectedSessionSummary?.status ?? null,
|
||||
selectedSessionSummary?.errorMessage ?? null,
|
||||
Boolean(activeSandbox?.sandboxId),
|
||||
)}
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
{selectedForSession && !resolvedSessionId ? (
|
||||
|
|
@ -1285,6 +1361,11 @@ export function WorkspaceDashboard({ workspaceId, selectedTaskId, selectedRepoId
|
|||
</Button>
|
||||
) : null}
|
||||
</div>
|
||||
{selectedForSession ? (
|
||||
<ParagraphSmall marginTop="0" marginBottom="0" color="contentSecondary" data-testid="task-runtime-state">
|
||||
{taskStateSummary}
|
||||
</ParagraphSmall>
|
||||
) : null}
|
||||
</PanelHeader>
|
||||
|
||||
<div
|
||||
|
|
@ -1381,19 +1462,22 @@ export function WorkspaceDashboard({ workspaceId, selectedTaskId, selectedRepoId
|
|||
})}
|
||||
>
|
||||
<LabelSmall marginTop="0" marginBottom="0">
|
||||
{isPendingProvision ? "Provisioning sandbox..." : "Creating session..."}
|
||||
{shouldUseTaskStateEmptyState ? taskStatusState.title : isPendingProvision ? "Provisioning sandbox..." : "Creating session..."}
|
||||
</LabelSmall>
|
||||
<Skeleton rows={1} height="32px" />
|
||||
<ParagraphSmall marginTop="0" marginBottom="0" color="contentSecondary">
|
||||
{selectedForSession?.statusMessage ?? (isPendingProvision ? "The task is still provisioning." : "The session is being created.")}
|
||||
{shouldUseTaskStateEmptyState
|
||||
? taskStateSummary
|
||||
: (selectedForSession?.statusMessage ??
|
||||
(isPendingProvision ? "The task is still provisioning." : "The session is being created."))}
|
||||
</ParagraphSmall>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{transcript.length === 0 && !(resolvedSessionId && sessionState.status === "loading") ? (
|
||||
<EmptyState testId="session-transcript-empty">
|
||||
{selectedForSession.runtimeStatus === "error" && selectedForSession.statusMessage
|
||||
? `Session failed: ${selectedForSession.statusMessage}`
|
||||
{shouldUseTaskStateEmptyState
|
||||
? taskStateSummary
|
||||
: isPendingProvision
|
||||
? (selectedForSession.statusMessage ?? "Provisioning sandbox...")
|
||||
: isPendingSessionCreate
|
||||
|
|
@ -1602,6 +1686,8 @@ export function WorkspaceDashboard({ workspaceId, selectedTaskId, selectedRepoId
|
|||
gap: theme.sizing.scale300,
|
||||
})}
|
||||
>
|
||||
<MetaRow label="State" value={taskRuntimeStatus ?? "-"} mono />
|
||||
<MetaRow label="State detail" value={taskStatusState.detail} />
|
||||
<MetaRow label="Task" value={selectedForSession.id} mono />
|
||||
<MetaRow label="Sandbox" value={selectedForSession.activeSandboxId ?? "-"} mono />
|
||||
<MetaRow label="Session" value={resolvedSessionId ?? "-"} mono />
|
||||
|
|
@ -1646,7 +1732,7 @@ export function WorkspaceDashboard({ workspaceId, selectedTaskId, selectedRepoId
|
|||
</div>
|
||||
</section>
|
||||
|
||||
{selectedForSession.runtimeStatus === "error" ? (
|
||||
{taskRuntimeStatus === "error" ? (
|
||||
<div
|
||||
className={css({
|
||||
padding: "12px",
|
||||
|
|
@ -1665,11 +1751,11 @@ export function WorkspaceDashboard({ workspaceId, selectedTaskId, selectedRepoId
|
|||
>
|
||||
<CircleAlert size={14} />
|
||||
<LabelSmall marginTop="0" marginBottom="0">
|
||||
Session reported an error state
|
||||
Task reported an error state
|
||||
</LabelSmall>
|
||||
</div>
|
||||
<ParagraphSmall marginTop="0" marginBottom="0" color="contentSecondary">
|
||||
{selectedForSession.statusMessage ? selectedForSession.statusMessage : "Open transcript in the center panel for details."}
|
||||
{taskStatusState.detail}
|
||||
</ParagraphSmall>
|
||||
</div>
|
||||
) : null}
|
||||
|
|
@ -1926,6 +2012,7 @@ export function WorkspaceDashboard({ workspaceId, selectedTaskId, selectedRepoId
|
|||
</ModalFooter>
|
||||
</Modal>
|
||||
</DashboardGrid>
|
||||
{showDevPanel ? <DevPanel workspaceId={workspaceId} snapshot={devPanelSnapshot} focusedTask={devPanelFocusedTask} /> : null}
|
||||
</AppShell>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ const base: TaskRecord = {
|
|||
branchName: "feature/one",
|
||||
title: "Feature one",
|
||||
task: "Ship one",
|
||||
providerId: "daytona",
|
||||
providerId: "local",
|
||||
status: "running",
|
||||
statusMessage: null,
|
||||
activeSandboxId: "sandbox-1",
|
||||
|
|
@ -18,9 +18,9 @@ const base: TaskRecord = {
|
|||
sandboxes: [
|
||||
{
|
||||
sandboxId: "sandbox-1",
|
||||
providerId: "daytona",
|
||||
providerId: "local",
|
||||
sandboxActorId: null,
|
||||
switchTarget: "daytona://sandbox-1",
|
||||
switchTarget: "sandbox://local/sandbox-1",
|
||||
cwd: null,
|
||||
createdAt: 10,
|
||||
updatedAt: 10,
|
||||
|
|
|
|||
133
foundry/packages/frontend/src/features/tasks/status.test.ts
Normal file
133
foundry/packages/frontend/src/features/tasks/status.test.ts
Normal file
|
|
@ -0,0 +1,133 @@
|
|||
import { describe, expect, it } from "vitest";
|
||||
import { TaskStatusSchema } from "@sandbox-agent/foundry-shared";
|
||||
import { defaultTaskStatusMessage, deriveHeaderStatus, describeTaskState, isProvisioningTaskStatus, resolveTaskStateDetail } from "./status";
|
||||
|
||||
describe("defaultTaskStatusMessage", () => {
|
||||
it("covers every backend task status", () => {
|
||||
for (const status of [...TaskStatusSchema.options, "new"] as const) {
|
||||
expect(defaultTaskStatusMessage(status)).toMatch(/\S/);
|
||||
}
|
||||
});
|
||||
|
||||
it("returns the expected copy for init_ensure_name", () => {
|
||||
expect(defaultTaskStatusMessage("init_ensure_name")).toBe("Determining title and branch.");
|
||||
});
|
||||
});
|
||||
|
||||
describe("resolveTaskStateDetail", () => {
|
||||
it("prefers the backend status message when present", () => {
|
||||
expect(resolveTaskStateDetail("init_ensure_name", "determining title and branch")).toBe("determining title and branch");
|
||||
});
|
||||
|
||||
it("falls back to the default copy when the backend message is empty", () => {
|
||||
expect(resolveTaskStateDetail("init_complete", " ")).toBe("Finalizing task initialization.");
|
||||
});
|
||||
});
|
||||
|
||||
describe("describeTaskState", () => {
|
||||
it("includes the raw backend status code in the title", () => {
|
||||
expect(describeTaskState("kill_destroy_sandbox", null)).toEqual({
|
||||
title: "Task state: kill_destroy_sandbox",
|
||||
detail: "Destroying sandbox resources.",
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe("isProvisioningTaskStatus", () => {
|
||||
it("treats all init states as provisioning", () => {
|
||||
expect(isProvisioningTaskStatus("init_bootstrap_db")).toBe(true);
|
||||
expect(isProvisioningTaskStatus("init_ensure_name")).toBe(true);
|
||||
expect(isProvisioningTaskStatus("init_complete")).toBe(true);
|
||||
});
|
||||
|
||||
it("does not treat steady-state or terminal states as provisioning", () => {
|
||||
expect(isProvisioningTaskStatus("running")).toBe(false);
|
||||
expect(isProvisioningTaskStatus("archived")).toBe(false);
|
||||
expect(isProvisioningTaskStatus("killed")).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe("deriveHeaderStatus", () => {
|
||||
it("returns error variant when session has error", () => {
|
||||
const result = deriveHeaderStatus("running", null, "error", "Sandbox crashed");
|
||||
expect(result.variant).toBe("error");
|
||||
expect(result.label).toBe("Session error");
|
||||
expect(result.tooltip).toBe("Sandbox crashed");
|
||||
expect(result.spinning).toBe(false);
|
||||
});
|
||||
|
||||
it("returns error variant when task has error", () => {
|
||||
const result = deriveHeaderStatus("error", "session:error", null, null);
|
||||
expect(result.variant).toBe("error");
|
||||
expect(result.label).toBe("Error");
|
||||
expect(result.spinning).toBe(false);
|
||||
});
|
||||
|
||||
it("returns warning variant with spinner for provisioning task", () => {
|
||||
const result = deriveHeaderStatus("init_enqueue_provision", null, null, null);
|
||||
expect(result.variant).toBe("warning");
|
||||
expect(result.label).toBe("Provisioning");
|
||||
expect(result.spinning).toBe(true);
|
||||
});
|
||||
|
||||
it("returns warning variant for pending_provision session", () => {
|
||||
const result = deriveHeaderStatus("running", null, "pending_provision", null);
|
||||
expect(result.variant).toBe("warning");
|
||||
expect(result.label).toBe("Provisioning");
|
||||
expect(result.spinning).toBe(true);
|
||||
});
|
||||
|
||||
it("returns warning variant for pending_session_create session", () => {
|
||||
const result = deriveHeaderStatus("running", null, "pending_session_create", null);
|
||||
expect(result.variant).toBe("warning");
|
||||
expect(result.label).toBe("Creating session");
|
||||
expect(result.spinning).toBe(true);
|
||||
});
|
||||
|
||||
it("returns success variant with spinner for running session", () => {
|
||||
const result = deriveHeaderStatus("running", null, "running", null);
|
||||
expect(result.variant).toBe("success");
|
||||
expect(result.label).toBe("Running");
|
||||
expect(result.spinning).toBe(true);
|
||||
});
|
||||
|
||||
it("returns success variant for idle/ready state", () => {
|
||||
const result = deriveHeaderStatus("idle", null, "idle", null);
|
||||
expect(result.variant).toBe("success");
|
||||
expect(result.label).toBe("Ready");
|
||||
expect(result.spinning).toBe(false);
|
||||
});
|
||||
|
||||
it("returns neutral variant for archived task", () => {
|
||||
const result = deriveHeaderStatus("archived", null, null, null);
|
||||
expect(result.variant).toBe("neutral");
|
||||
expect(result.label).toBe("Archived");
|
||||
});
|
||||
|
||||
it("session error takes priority over task error", () => {
|
||||
const result = deriveHeaderStatus("error", "session:error", "error", "Sandbox OOM");
|
||||
expect(result.variant).toBe("error");
|
||||
expect(result.label).toBe("Session error");
|
||||
expect(result.tooltip).toBe("Sandbox OOM");
|
||||
});
|
||||
|
||||
it("returns warning when no sandbox is available", () => {
|
||||
const result = deriveHeaderStatus("idle", null, "idle", null, false);
|
||||
expect(result.variant).toBe("warning");
|
||||
expect(result.label).toBe("No sandbox");
|
||||
expect(result.spinning).toBe(false);
|
||||
});
|
||||
|
||||
it("still shows provisioning when no sandbox but task is provisioning", () => {
|
||||
const result = deriveHeaderStatus("init_enqueue_provision", null, null, null, false);
|
||||
expect(result.variant).toBe("warning");
|
||||
expect(result.label).toBe("Provisioning");
|
||||
expect(result.spinning).toBe(true);
|
||||
});
|
||||
|
||||
it("shows error over no-sandbox when session has error", () => {
|
||||
const result = deriveHeaderStatus("idle", null, "error", "Connection lost", false);
|
||||
expect(result.variant).toBe("error");
|
||||
expect(result.label).toBe("Session error");
|
||||
});
|
||||
});
|
||||
179
foundry/packages/frontend/src/features/tasks/status.ts
Normal file
179
foundry/packages/frontend/src/features/tasks/status.ts
Normal file
|
|
@ -0,0 +1,179 @@
|
|||
import type { TaskStatus, WorkbenchSessionStatus } from "@sandbox-agent/foundry-shared";
|
||||
import type { HeaderStatusInfo } from "../../components/mock-layout/ui";
|
||||
|
||||
export type TaskDisplayStatus = TaskStatus | "new";
|
||||
|
||||
export interface TaskStateDescriptor {
|
||||
title: string;
|
||||
detail: string;
|
||||
}
|
||||
|
||||
export function isProvisioningTaskStatus(status: TaskDisplayStatus | null | undefined): boolean {
|
||||
return (
|
||||
status === "new" ||
|
||||
status === "init_bootstrap_db" ||
|
||||
status === "init_enqueue_provision" ||
|
||||
status === "init_ensure_name" ||
|
||||
status === "init_assert_name" ||
|
||||
status === "init_complete"
|
||||
);
|
||||
}
|
||||
|
||||
export function defaultTaskStatusMessage(status: TaskDisplayStatus | null | undefined): string {
|
||||
switch (status) {
|
||||
case "new":
|
||||
return "Task created. Waiting to initialize.";
|
||||
case "init_bootstrap_db":
|
||||
return "Creating task records.";
|
||||
case "init_enqueue_provision":
|
||||
return "Queueing sandbox provisioning.";
|
||||
case "init_ensure_name":
|
||||
return "Determining title and branch.";
|
||||
case "init_assert_name":
|
||||
return "Validating title and branch.";
|
||||
case "init_complete":
|
||||
return "Finalizing task initialization.";
|
||||
case "running":
|
||||
return "Agent session is actively running.";
|
||||
case "idle":
|
||||
return "Sandbox is ready for the next prompt.";
|
||||
case "archive_stop_status_sync":
|
||||
return "Stopping sandbox status sync before archiving.";
|
||||
case "archive_release_sandbox":
|
||||
return "Releasing sandbox resources.";
|
||||
case "archive_finalize":
|
||||
return "Finalizing archive.";
|
||||
case "archived":
|
||||
return "Task has been archived.";
|
||||
case "kill_destroy_sandbox":
|
||||
return "Destroying sandbox resources.";
|
||||
case "kill_finalize":
|
||||
return "Finalizing task termination.";
|
||||
case "killed":
|
||||
return "Task has been terminated.";
|
||||
case "error":
|
||||
return "Task entered an error state.";
|
||||
case null:
|
||||
case undefined:
|
||||
return "Task state unavailable.";
|
||||
}
|
||||
}
|
||||
|
||||
export function resolveTaskStateDetail(status: TaskDisplayStatus | null | undefined, statusMessage: string | null | undefined): string {
|
||||
const normalized = statusMessage?.trim();
|
||||
return normalized && normalized.length > 0 ? normalized : defaultTaskStatusMessage(status);
|
||||
}
|
||||
|
||||
export function describeTaskState(status: TaskDisplayStatus | null | undefined, statusMessage: string | null | undefined): TaskStateDescriptor {
|
||||
return {
|
||||
title: status ? `Task state: ${status}` : "Task state unavailable",
|
||||
detail: resolveTaskStateDetail(status, statusMessage),
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Derives the header status pill state from the combined task + active session + sandbox state.
|
||||
* Priority: session error > task error > no sandbox > provisioning > running > ready/idle > neutral.
|
||||
*/
|
||||
export function deriveHeaderStatus(
|
||||
taskStatus: TaskDisplayStatus | null | undefined,
|
||||
taskStatusMessage: string | null | undefined,
|
||||
sessionStatus: WorkbenchSessionStatus | null | undefined,
|
||||
sessionErrorMessage: string | null | undefined,
|
||||
hasSandbox?: boolean,
|
||||
): HeaderStatusInfo {
|
||||
// Session error takes priority
|
||||
if (sessionStatus === "error") {
|
||||
return {
|
||||
variant: "error",
|
||||
label: "Session error",
|
||||
spinning: false,
|
||||
tooltip: sessionErrorMessage ?? "Session failed to start.",
|
||||
};
|
||||
}
|
||||
|
||||
// Task error
|
||||
if (taskStatus === "error") {
|
||||
return {
|
||||
variant: "error",
|
||||
label: "Error",
|
||||
spinning: false,
|
||||
tooltip: taskStatusMessage ?? "Task entered an error state.",
|
||||
};
|
||||
}
|
||||
|
||||
// No sandbox available (not provisioning, not errored — just missing)
|
||||
if (hasSandbox === false && !isProvisioningTaskStatus(taskStatus)) {
|
||||
return {
|
||||
variant: "warning",
|
||||
label: "No sandbox",
|
||||
spinning: false,
|
||||
tooltip: taskStatusMessage ?? "Sandbox is not available for this task.",
|
||||
};
|
||||
}
|
||||
|
||||
// Task provisioning (init_* states)
|
||||
if (isProvisioningTaskStatus(taskStatus)) {
|
||||
return {
|
||||
variant: "warning",
|
||||
label: "Provisioning",
|
||||
spinning: true,
|
||||
tooltip: resolveTaskStateDetail(taskStatus, taskStatusMessage),
|
||||
};
|
||||
}
|
||||
|
||||
// Session pending states
|
||||
if (sessionStatus === "pending_provision") {
|
||||
return {
|
||||
variant: "warning",
|
||||
label: "Provisioning",
|
||||
spinning: true,
|
||||
tooltip: "Provisioning sandbox...",
|
||||
};
|
||||
}
|
||||
|
||||
if (sessionStatus === "pending_session_create") {
|
||||
return {
|
||||
variant: "warning",
|
||||
label: "Creating session",
|
||||
spinning: true,
|
||||
tooltip: "Creating agent session...",
|
||||
};
|
||||
}
|
||||
|
||||
// Running
|
||||
if (sessionStatus === "running") {
|
||||
return {
|
||||
variant: "success",
|
||||
label: "Running",
|
||||
spinning: true,
|
||||
tooltip: "Agent is actively running.",
|
||||
};
|
||||
}
|
||||
|
||||
// Ready / idle
|
||||
if (sessionStatus === "ready" || sessionStatus === "idle" || taskStatus === "idle" || taskStatus === "running") {
|
||||
return {
|
||||
variant: "success",
|
||||
label: "Ready",
|
||||
spinning: false,
|
||||
tooltip: "Sandbox is ready.",
|
||||
};
|
||||
}
|
||||
|
||||
// Terminal states
|
||||
if (taskStatus === "archived" || taskStatus === "killed") {
|
||||
return {
|
||||
variant: "neutral",
|
||||
label: taskStatus === "archived" ? "Archived" : "Terminated",
|
||||
spinning: false,
|
||||
};
|
||||
}
|
||||
|
||||
// Fallback
|
||||
return {
|
||||
variant: "neutral",
|
||||
label: taskStatus ?? "Unknown",
|
||||
spinning: false,
|
||||
};
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue