mirror of
https://github.com/harivansh-afk/sandbox-agent.git
synced 2026-04-18 18:03:48 +00:00
chore(foundry): improve sandbox impl + status pill (#252)
* Improve Daytona sandbox provisioning and frontend UI Refactor git clone script in Daytona provider to use cleaner shell logic for GitHub token authentication and branch checkout. Add support for private repository clones with token-based auth. Improve Daytona provider error handling and git configuration setup. Frontend improvements include enhanced dev panel, workspace dashboard, sidebar navigation, and UI components for better task/session management. Update interest manager and backend client to support improved session state handling. Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com> * 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> --------- Co-authored-by: Claude Haiku 4.5 <noreply@anthropic.com>
This commit is contained in:
Nathan Flurry
GitHub
parent
5a1b32a271
commit
70d31f819c
82 changed files with 2625 additions and 4166 deletions
|
|
@ -1,23 +1,72 @@
|
|||
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 type { FoundryOrganization, TaskWorkbenchSnapshot, WorkbenchTask } from "@sandbox-agent/foundry-shared";
|
||||
import { interestManager } from "../lib/interest";
|
||||
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";
|
||||
lastRefresh: number | null;
|
||||
}
|
||||
|
||||
function topicLabel(topic: DebugInterestTopic): string {
|
||||
switch (topic.topicKey) {
|
||||
case "app":
|
||||
return "App";
|
||||
case "workspace":
|
||||
return "Workspace";
|
||||
case "task":
|
||||
return "Task";
|
||||
case "session":
|
||||
return "Session";
|
||||
case "sandboxProcesses":
|
||||
return "Sandbox";
|
||||
}
|
||||
}
|
||||
|
||||
/** 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);
|
||||
|
|
@ -28,17 +77,17 @@ 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;
|
||||
case "archived":
|
||||
return t.textMuted;
|
||||
case "error":
|
||||
|
|
@ -76,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());
|
||||
|
|
@ -88,37 +145,20 @@ export const DevPanel = memo(function DevPanel({ workspaceId, snapshot, organiza
|
|||
}, []);
|
||||
|
||||
const topics = useMemo((): TopicInfo[] => {
|
||||
const items: TopicInfo[] = [];
|
||||
return interestManager.listDebugTopics().map((topic) => ({
|
||||
label: topicLabel(topic),
|
||||
key: topic.cacheKey,
|
||||
params: topicParams(topic),
|
||||
listenerCount: topic.listenerCount,
|
||||
hasConnection: topic.status === "connected",
|
||||
status: topic.status,
|
||||
lastRefresh: topic.lastRefreshAt,
|
||||
}));
|
||||
}, [now]);
|
||||
|
||||
// Workbench subscription topic
|
||||
items.push({
|
||||
label: "Workbench",
|
||||
key: `ws:${workspaceId}`,
|
||||
listenerCount: 1,
|
||||
hasConnection: true,
|
||||
lastRefresh: now,
|
||||
});
|
||||
|
||||
// Per-task tab subscriptions
|
||||
for (const task of snapshot.tasks ?? []) {
|
||||
if (task.status === "archived") continue;
|
||||
for (const tab of task.tabs ?? []) {
|
||||
items.push({
|
||||
label: `Tab/${task.title?.slice(0, 16) || task.id.slice(0, 8)}/${tab.sessionName.slice(0, 10)}`,
|
||||
key: `${workspaceId}:${task.id}:${tab.id}`,
|
||||
listenerCount: 1,
|
||||
hasConnection: tab.status === "running",
|
||||
lastRefresh: tab.status === "running" ? now : null,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return items;
|
||||
}, [workspaceId, snapshot, 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",
|
||||
|
|
@ -199,7 +239,14 @@ export const DevPanel = memo(function DevPanel({ workspaceId, snapshot, organiza
|
|||
<span className={css({ fontSize: "10px", color: t.textPrimary, flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" })}>
|
||||
{topic.label}
|
||||
</span>
|
||||
<span className={`${mono} ${css({ color: t.textMuted })}`}>{topic.key.length > 24 ? `...${topic.key.slice(-20)}` : topic.key}</span>
|
||||
<span className={`${mono} ${css({ color: statusColor(topic.status, t) })}`}>{topic.status}</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>
|
||||
))}
|
||||
|
|
@ -210,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>
|
||||
)}
|
||||
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ import { Sidebar } from "./mock-layout/sidebar";
|
|||
import { TabStrip } from "./mock-layout/tab-strip";
|
||||
import { TerminalPane } from "./mock-layout/terminal-pane";
|
||||
import { TranscriptHeader } from "./mock-layout/transcript-header";
|
||||
import { PROMPT_TEXTAREA_MAX_HEIGHT, PROMPT_TEXTAREA_MIN_HEIGHT, SPanel, ScrollBody, Shell } from "./mock-layout/ui";
|
||||
import { PROMPT_TEXTAREA_MAX_HEIGHT, PROMPT_TEXTAREA_MIN_HEIGHT, SPanel, ScrollBody, Shell, SpinnerDot } from "./mock-layout/ui";
|
||||
import { DevPanel, useDevPanel } from "./dev-panel";
|
||||
import {
|
||||
buildDisplayMessages,
|
||||
|
|
@ -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;
|
||||
|
|
@ -88,6 +89,7 @@ function toLegacyTab(
|
|||
thinkingSinceMs: summary.thinkingSinceMs,
|
||||
unread: summary.unread,
|
||||
created: summary.created,
|
||||
errorMessage: summary.errorMessage ?? null,
|
||||
draft: sessionDetail?.draft ?? {
|
||||
text: "",
|
||||
attachments: [],
|
||||
|
|
@ -107,7 +109,9 @@ function toLegacyTask(
|
|||
id: summary.id,
|
||||
repoId: summary.repoId,
|
||||
title: detail?.title ?? summary.title,
|
||||
status: detail?.status ?? summary.status,
|
||||
status: detail?.runtimeStatus ?? detail?.status ?? summary.status,
|
||||
runtimeStatus: detail?.runtimeStatus,
|
||||
statusMessage: detail?.statusMessage ?? null,
|
||||
repoName: detail?.repoName ?? summary.repoName,
|
||||
updatedAtMs: detail?.updatedAtMs ?? summary.updatedAtMs,
|
||||
branch: detail?.branch ?? summary.branch,
|
||||
|
|
@ -117,9 +121,26 @@ function toLegacyTask(
|
|||
diffs: detail?.diffs ?? {},
|
||||
fileTree: detail?.fileTree ?? [],
|
||||
minutesUsed: detail?.minutesUsed ?? 0,
|
||||
activeSandboxId: detail?.activeSandboxId ?? null,
|
||||
};
|
||||
}
|
||||
|
||||
function sessionStateMessage(tab: Task["tabs"][number] | null | undefined): string | null {
|
||||
if (!tab) {
|
||||
return null;
|
||||
}
|
||||
if (tab.status === "pending_provision") {
|
||||
return "Provisioning sandbox...";
|
||||
}
|
||||
if (tab.status === "pending_session_create") {
|
||||
return "Creating session...";
|
||||
}
|
||||
if (tab.status === "error") {
|
||||
return tab.errorMessage ?? "Session failed to start.";
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function groupProjects(repos: Array<{ id: string; label: string }>, tasks: Task[]) {
|
||||
return repos
|
||||
.map((repo) => ({
|
||||
|
|
@ -152,6 +173,7 @@ interface WorkbenchActions {
|
|||
const TranscriptPanel = memo(function TranscriptPanel({
|
||||
taskWorkbenchClient,
|
||||
task,
|
||||
hasSandbox,
|
||||
activeTabId,
|
||||
lastAgentTabId,
|
||||
openDiffs,
|
||||
|
|
@ -169,6 +191,7 @@ const TranscriptPanel = memo(function TranscriptPanel({
|
|||
}: {
|
||||
taskWorkbenchClient: WorkbenchActions;
|
||||
task: Task;
|
||||
hasSandbox: boolean;
|
||||
activeTabId: string | null;
|
||||
lastAgentTabId: string | null;
|
||||
openDiffs: string[];
|
||||
|
|
@ -202,6 +225,16 @@ 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 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 &&
|
||||
!!activeAgentTab &&
|
||||
(activeAgentTab.status === "pending_provision" || activeAgentTab.status === "pending_session_create" || activeAgentTab.status === "error") &&
|
||||
activeMessages.length === 0;
|
||||
const draft = promptTab?.draft.text ?? "";
|
||||
const attachments = promptTab?.draft.attachments ?? [];
|
||||
|
||||
|
|
@ -542,6 +575,7 @@ const TranscriptPanel = memo(function TranscriptPanel({
|
|||
<SPanel>
|
||||
<TranscriptHeader
|
||||
task={task}
|
||||
hasSandbox={hasSandbox}
|
||||
activeTab={activeAgentTab}
|
||||
editingField={editingField}
|
||||
editValue={editValue}
|
||||
|
|
@ -619,26 +653,88 @@ const TranscriptPanel = memo(function TranscriptPanel({
|
|||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "12px",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<h2 style={{ margin: 0, fontSize: "20px", fontWeight: 600 }}>Create the first session</h2>
|
||||
<p style={{ margin: 0, opacity: 0.75 }}>Sessions are where you chat with the agent. Start one now to send the first prompt on this task.</p>
|
||||
<button
|
||||
type="button"
|
||||
onClick={addTab}
|
||||
style={{
|
||||
alignSelf: "center",
|
||||
border: 0,
|
||||
borderRadius: "999px",
|
||||
padding: "10px 18px",
|
||||
background: t.borderMedium,
|
||||
color: t.textPrimary,
|
||||
cursor: "pointer",
|
||||
fontWeight: 600,
|
||||
}}
|
||||
>
|
||||
New session
|
||||
</button>
|
||||
{taskProvisioning ? (
|
||||
<>
|
||||
<SpinnerDot size={16} />
|
||||
<h2 style={{ margin: 0, fontSize: "20px", fontWeight: 600 }}>{taskState.title}</h2>
|
||||
<p style={{ margin: 0, opacity: 0.75 }}>{taskProvisioningMessage}</p>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<h2 style={{ margin: 0, fontSize: "20px", fontWeight: 600 }}>Create the first session</h2>
|
||||
<p style={{ margin: 0, opacity: 0.75 }}>Sessions are where you chat with the agent. Start one now to send the first prompt on this task.</p>
|
||||
<button
|
||||
type="button"
|
||||
onClick={addTab}
|
||||
style={{
|
||||
alignSelf: "center",
|
||||
border: 0,
|
||||
borderRadius: "999px",
|
||||
padding: "10px 18px",
|
||||
background: t.borderMedium,
|
||||
color: t.textPrimary,
|
||||
cursor: "pointer",
|
||||
fontWeight: 600,
|
||||
}}
|
||||
>
|
||||
New session
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</ScrollBody>
|
||||
) : showPendingSessionState ? (
|
||||
<ScrollBody>
|
||||
<div
|
||||
style={{
|
||||
minHeight: "100%",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
padding: "32px",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
maxWidth: "420px",
|
||||
textAlign: "center",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "12px",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
{activeAgentTab?.status === "error" ? null : <SpinnerDot size={16} />}
|
||||
<h2 style={{ margin: 0, fontSize: "20px", fontWeight: 600 }}>
|
||||
{activeAgentTab?.status === "pending_provision"
|
||||
? "Provisioning sandbox"
|
||||
: activeAgentTab?.status === "pending_session_create"
|
||||
? "Creating session"
|
||||
: "Session unavailable"}
|
||||
</h2>
|
||||
<p style={{ margin: 0, opacity: 0.75 }}>{activeSessionMessage}</p>
|
||||
{activeAgentTab?.status === "error" ? (
|
||||
<button
|
||||
type="button"
|
||||
onClick={addTab}
|
||||
style={{
|
||||
alignSelf: "center",
|
||||
border: 0,
|
||||
borderRadius: "999px",
|
||||
padding: "10px 18px",
|
||||
background: t.borderMedium,
|
||||
color: t.textPrimary,
|
||||
cursor: "pointer",
|
||||
fontWeight: 600,
|
||||
}}
|
||||
>
|
||||
Retry session
|
||||
</button>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</ScrollBody>
|
||||
|
|
@ -658,7 +754,7 @@ const TranscriptPanel = memo(function TranscriptPanel({
|
|||
/>
|
||||
</ScrollBody>
|
||||
)}
|
||||
{!isTerminal && promptTab ? (
|
||||
{!isTerminal && promptTab && (promptTab.status === "ready" || promptTab.status === "running" || promptTab.status === "idle") ? (
|
||||
<PromptComposer
|
||||
draft={draft}
|
||||
textareaRef={textareaRef}
|
||||
|
|
@ -1036,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) {
|
||||
|
|
@ -1293,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({
|
||||
|
|
@ -1693,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}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
|
|
@ -1794,6 +1907,7 @@ export function MockLayout({ workspaceId, selectedTaskId, selectedSessionId }: M
|
|||
<TranscriptPanel
|
||||
taskWorkbenchClient={taskWorkbenchClient}
|
||||
task={activeTask}
|
||||
hasSandbox={hasSandbox}
|
||||
activeTabId={activeTabId}
|
||||
lastAgentTabId={lastAgentTabId}
|
||||
openDiffs={openDiffs}
|
||||
|
|
@ -1884,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>
|
||||
|
|
|
|||
|
|
@ -521,6 +521,10 @@ export const Sidebar = memo(function Sidebar({
|
|||
const isActive = task.id === activeId;
|
||||
const isDim = task.status === "archived";
|
||||
const isRunning = task.tabs.some((tab) => tab.status === "running");
|
||||
const isProvisioning =
|
||||
String(task.status).startsWith("init_") ||
|
||||
task.status === "new" ||
|
||||
task.tabs.some((tab) => tab.status === "pending_provision" || tab.status === "pending_session_create");
|
||||
const hasUnread = task.tabs.some((tab) => tab.unread);
|
||||
const isDraft = task.pullRequest == null || task.pullRequest.status === "draft";
|
||||
const totalAdded = task.fileChanges.reduce((sum, file) => sum + file.added, 0);
|
||||
|
|
@ -592,7 +596,7 @@ export const Sidebar = memo(function Sidebar({
|
|||
flexShrink: 0,
|
||||
})}
|
||||
>
|
||||
<TaskIndicator isRunning={isRunning} hasUnread={hasUnread} isDraft={isDraft} />
|
||||
<TaskIndicator isRunning={isRunning} isProvisioning={isProvisioning} hasUnread={hasUnread} isDraft={isDraft} />
|
||||
</div>
|
||||
<LabelSmall
|
||||
$style={{
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -118,10 +118,21 @@ export const UnreadDot = memo(function UnreadDot() {
|
|||
);
|
||||
});
|
||||
|
||||
export const TaskIndicator = memo(function TaskIndicator({ isRunning, hasUnread, isDraft }: { isRunning: boolean; hasUnread: boolean; isDraft: boolean }) {
|
||||
export const TaskIndicator = memo(function TaskIndicator({
|
||||
isRunning,
|
||||
isProvisioning,
|
||||
hasUnread,
|
||||
isDraft,
|
||||
}: {
|
||||
isRunning: boolean;
|
||||
isProvisioning: boolean;
|
||||
hasUnread: boolean;
|
||||
isDraft: boolean;
|
||||
}) {
|
||||
const t = useFoundryTokens();
|
||||
|
||||
if (isRunning) return <SpinnerDot size={8} />;
|
||||
if (isProvisioning) return <SpinnerDot size={8} />;
|
||||
if (hasUnread) return <UnreadDot />;
|
||||
if (isDraft) return <GitPullRequestDraft size={12} color={t.textSecondary} />;
|
||||
return <GitPullRequest size={12} color={t.statusSuccess} />;
|
||||
|
|
@ -173,8 +184,75 @@ 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") return <SpinnerDot size={8} />;
|
||||
if (tab.status === "running" || tab.status === "pending_provision" || tab.status === "pending_session_create") return <SpinnerDot size={8} />;
|
||||
if (tab.unread) return <UnreadDot />;
|
||||
return <AgentIcon agent={tab.agent} size={13} />;
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -99,7 +102,8 @@ const AGENT_OPTIONS: SelectItem[] = [
|
|||
|
||||
function statusKind(status: WorkbenchTaskStatus): StatusTagKind {
|
||||
if (status === "running") return "positive";
|
||||
if (status === "new") return "warning";
|
||||
if (status === "error") return "negative";
|
||||
if (status === "new" || String(status).startsWith("init_")) return "warning";
|
||||
return "neutral";
|
||||
}
|
||||
|
||||
|
|
@ -332,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("");
|
||||
|
|
@ -467,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({
|
||||
|
|
@ -497,7 +506,69 @@ export function WorkspaceDashboard({ workspaceId, selectedTaskId, selectedRepoId
|
|||
}
|
||||
: null,
|
||||
);
|
||||
const selectedSessionSummary = useMemo(() => sessionRows.find((session) => session.id === resolvedSessionId) ?? null, [resolvedSessionId, sessionRows]);
|
||||
const isPendingProvision = selectedSessionSummary?.status === "pending_provision";
|
||||
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) {
|
||||
|
|
@ -1265,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 ? (
|
||||
|
|
@ -1280,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
|
||||
|
|
@ -1363,19 +1449,50 @@ export function WorkspaceDashboard({ workspaceId, selectedTaskId, selectedRepoId
|
|||
>
|
||||
{resolvedSessionId && sessionState.status === "loading" ? <Skeleton rows={2} height="90px" /> : null}
|
||||
|
||||
{selectedSessionSummary && (isPendingProvision || isPendingSessionCreate) ? (
|
||||
<div
|
||||
className={css({
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: theme.sizing.scale300,
|
||||
padding: theme.sizing.scale500,
|
||||
border: `1px solid ${theme.colors.borderOpaque}`,
|
||||
backgroundColor: theme.colors.backgroundSecondary,
|
||||
marginBottom: theme.sizing.scale400,
|
||||
})}
|
||||
>
|
||||
<LabelSmall marginTop="0" marginBottom="0">
|
||||
{shouldUseTaskStateEmptyState ? taskStatusState.title : isPendingProvision ? "Provisioning sandbox..." : "Creating session..."}
|
||||
</LabelSmall>
|
||||
<Skeleton rows={1} height="32px" />
|
||||
<ParagraphSmall marginTop="0" marginBottom="0" color="contentSecondary">
|
||||
{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}`
|
||||
: !activeSandbox?.sandboxId
|
||||
? selectedForSession.statusMessage
|
||||
? `Sandbox unavailable: ${selectedForSession.statusMessage}`
|
||||
: "This task is still provisioning its sandbox."
|
||||
: staleSessionId
|
||||
? `Session ${staleSessionId} is unavailable. Start a new session to continue.`
|
||||
: resolvedSessionId
|
||||
? "No transcript events yet. Send a prompt to start this session."
|
||||
: "No active session for this task."}
|
||||
{shouldUseTaskStateEmptyState
|
||||
? taskStateSummary
|
||||
: isPendingProvision
|
||||
? (selectedForSession.statusMessage ?? "Provisioning sandbox...")
|
||||
: isPendingSessionCreate
|
||||
? "Creating session..."
|
||||
: isSessionError
|
||||
? (selectedSessionSummary?.errorMessage ?? "Session failed to start.")
|
||||
: !activeSandbox?.sandboxId
|
||||
? selectedForSession.statusMessage
|
||||
? `Sandbox unavailable: ${selectedForSession.statusMessage}`
|
||||
: "This task is still provisioning its sandbox."
|
||||
: staleSessionId
|
||||
? `Session ${staleSessionId} is unavailable. Start a new session to continue.`
|
||||
: resolvedSessionId
|
||||
? "No transcript events yet. Send a prompt to start this session."
|
||||
: "No active session for this task."}
|
||||
</EmptyState>
|
||||
) : null}
|
||||
|
||||
|
|
@ -1442,7 +1559,7 @@ export function WorkspaceDashboard({ workspaceId, selectedTaskId, selectedRepoId
|
|||
onChange={(event) => setDraft(event.target.value)}
|
||||
placeholder="Send a follow-up prompt to this session"
|
||||
rows={5}
|
||||
disabled={!activeSandbox?.sandboxId}
|
||||
disabled={!activeSandbox?.sandboxId || isPendingProvision || isPendingSessionCreate || isSessionError}
|
||||
overrides={textareaTestIdOverrides("task-session-prompt")}
|
||||
/>
|
||||
<div
|
||||
|
|
@ -1460,7 +1577,14 @@ export function WorkspaceDashboard({ workspaceId, selectedTaskId, selectedRepoId
|
|||
void sendPrompt.mutateAsync(prompt);
|
||||
}}
|
||||
disabled={
|
||||
sendPrompt.isPending || createSession.isPending || !selectedForSession || !activeSandbox?.sandboxId || draft.trim().length === 0
|
||||
sendPrompt.isPending ||
|
||||
createSession.isPending ||
|
||||
!selectedForSession ||
|
||||
!activeSandbox?.sandboxId ||
|
||||
isPendingProvision ||
|
||||
isPendingSessionCreate ||
|
||||
isSessionError ||
|
||||
draft.trim().length === 0
|
||||
}
|
||||
>
|
||||
<span
|
||||
|
|
@ -1562,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 />
|
||||
|
|
@ -1606,7 +1732,7 @@ export function WorkspaceDashboard({ workspaceId, selectedTaskId, selectedRepoId
|
|||
</div>
|
||||
</section>
|
||||
|
||||
{selectedForSession.runtimeStatus === "error" ? (
|
||||
{taskRuntimeStatus === "error" ? (
|
||||
<div
|
||||
className={css({
|
||||
padding: "12px",
|
||||
|
|
@ -1625,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}
|
||||
|
|
@ -1837,7 +1963,7 @@ export function WorkspaceDashboard({ workspaceId, selectedTaskId, selectedRepoId
|
|||
}}
|
||||
data-testid="task-create-submit"
|
||||
>
|
||||
Create Task
|
||||
{createTask.isPending ? "Creating..." : "Create Task"}
|
||||
</Button>
|
||||
</ModalFooter>
|
||||
</Modal>
|
||||
|
|
@ -1886,6 +2012,7 @@ export function WorkspaceDashboard({ workspaceId, selectedTaskId, selectedRepoId
|
|||
</ModalFooter>
|
||||
</Modal>
|
||||
</DashboardGrid>
|
||||
{showDevPanel ? <DevPanel workspaceId={workspaceId} snapshot={devPanelSnapshot} focusedTask={devPanelFocusedTask} /> : null}
|
||||
</AppShell>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue