feat: add agent delete command and bulk tab close operations

This commit is contained in:
Mohamed Boudra
2026-03-07 12:32:49 +07:00
parent 6b51088f39
commit 1d1c7058f1
21 changed files with 783 additions and 86 deletions
@@ -49,6 +49,7 @@ import {
ContextMenuTrigger,
useContextMenu,
} from '@/components/ui/context-menu'
import { SyncedLoader } from '@/components/synced-loader'
import { useToast } from '@/contexts/toast-context'
import { useCheckoutGitActionsStore } from '@/stores/checkout-git-actions-store'
import { buildSidebarShortcutModel } from '@/utils/sidebar-shortcuts'
@@ -56,6 +57,7 @@ import { hasVisibleOrderChanged, mergeWithRemainder } from '@/utils/sidebar-reor
import { decideLongPressMove } from '@/utils/sidebar-gesture-arbitration'
import { confirmDialog } from '@/utils/confirm-dialog'
import { projectIconPlaceholderLabelFromDisplayName } from '@/utils/project-display-name'
import { shouldRenderSyncedStatusLoader } from '@/utils/status-loader'
const PASEO_WORKTREE_PATH_MARKER = '/.paseo/worktrees'
@@ -144,11 +146,14 @@ function WorkspaceStatusIndicator({
}) {
const { theme } = useUnistyles()
const color = resolveStatusDotColor({ theme, bucket })
const shouldShowSyncedLoader = shouldRenderSyncedStatusLoader({ bucket })
return (
<View style={styles.workspaceStatusDot}>
{loading ? (
<ActivityIndicator size={8} color={theme.colors.foregroundMuted} />
) : shouldShowSyncedLoader ? (
<SyncedLoader size={11} color={theme.colors.palette.amber[500]} />
) : (
<View style={[styles.workspaceStatusDotFill, { backgroundColor: color }]} />
)}
@@ -1340,17 +1345,16 @@ const styles = StyleSheet.create((theme) => ({
position: 'relative',
},
workspaceStatusDot: {
width: 8,
height: 8,
width: 16,
height: 16,
borderRadius: theme.borderRadius.full,
flexShrink: 0,
alignItems: 'center',
justifyContent: 'center',
overflow: 'hidden',
},
workspaceStatusDotFill: {
width: 8,
height: 8,
width: 7,
height: 7,
borderRadius: theme.borderRadius.full,
},
workspaceArchivingOverlay: {
@@ -1371,6 +1375,7 @@ const styles = StyleSheet.create((theme) => ({
workspaceBranchText: {
color: theme.colors.foreground,
fontSize: theme.fontSize.sm,
lineHeight: 20,
opacity: 0.76,
flex: 1,
minWidth: 0,
@@ -0,0 +1,170 @@
import { View } from "react-native";
import Animated, {
Easing,
makeMutable,
type SharedValue,
useAnimatedStyle,
withRepeat,
withTiming,
} from "react-native-reanimated";
import { useEffect } from "react";
const SYNCED_LOADER_DURATION_MS = 950;
const SYNCED_LOADER_EPOCH_MS = 0;
const DOT_SEQUENCE = [0, 1, 3, 5, 4, 2] as const;
const DOT_COUNT = DOT_SEQUENCE.length;
const GRID_ROWS = 3;
const GRID_COLUMNS = 2;
const SNAKE_SEGMENT_OFFSETS = [0, -1, -2, -3, -4] as const;
const SNAKE_OPACITIES = [1, 0.72, 0.46, 0.22, 0] as const;
const sharedStepProgress = makeMutable(0);
let sharedLoopStarted = false;
function ensureSharedStepLoopStarted(): void {
if (sharedLoopStarted) {
return;
}
sharedLoopStarted = true;
const elapsedMs =
(Date.now() - SYNCED_LOADER_EPOCH_MS) % SYNCED_LOADER_DURATION_MS;
sharedStepProgress.value = (elapsedMs / SYNCED_LOADER_DURATION_MS) * DOT_COUNT;
sharedStepProgress.value = withTiming(
DOT_COUNT,
{
duration: Math.max(1, Math.round(SYNCED_LOADER_DURATION_MS - elapsedMs)),
easing: Easing.linear,
},
(finished) => {
if (!finished) {
sharedLoopStarted = false;
return;
}
sharedStepProgress.value = 0;
sharedStepProgress.value = withRepeat(
withTiming(DOT_COUNT, {
duration: SYNCED_LOADER_DURATION_MS,
easing: Easing.linear,
}),
-1,
false
);
}
);
}
export function SyncedLoader({
size = 10,
color,
}: {
size?: number;
color: string;
}) {
useEffect(() => {
ensureSharedStepLoopStarted();
}, []);
const animatedStyle = useAnimatedStyle(() => ({
opacity: 1,
}));
const gap = Math.max(1, Math.round(size * 0.12));
const dotSize = Math.max(2, Math.floor((size - gap * 2) / 3));
const gridWidth = dotSize * 2 + gap;
const gridHeight = dotSize * 3 + gap * 2;
return (
<View
style={{
width: size,
height: size,
alignItems: "center",
justifyContent: "center",
}}
>
<Animated.View
style={[
animatedStyle,
{
width: gridWidth,
height: gridHeight,
},
]}
>
{Array.from({ length: DOT_COUNT }).map((_, dotIndex) => {
const rowIndex = Math.floor(dotIndex / GRID_COLUMNS);
const columnIndex = dotIndex % GRID_COLUMNS;
const sequenceIndex = DOT_SEQUENCE.indexOf(
dotIndex as (typeof DOT_SEQUENCE)[number]
);
return (
<SpinnerDot
key={dotIndex}
color={color}
dotSize={dotSize}
sequenceIndex={sequenceIndex}
progress={sharedStepProgress}
style={{
position: "absolute",
left: columnIndex * (dotSize + gap),
top: rowIndex * (dotSize + gap),
}}
/>
);
})}
</Animated.View>
</View>
);
}
function SpinnerDot({
color,
dotSize,
sequenceIndex,
progress,
style,
}: {
color: string;
dotSize: number;
sequenceIndex: number;
progress: SharedValue<number>;
style: {
position: "absolute";
left: number;
top: number;
};
}) {
const animatedStyle = useAnimatedStyle(() => {
const headIndex = Math.floor(progress.value) % DOT_COUNT;
let opacity = 0;
for (let segmentIndex = 0; segmentIndex < SNAKE_SEGMENT_OFFSETS.length; segmentIndex += 1) {
const activeSequenceIndex =
(headIndex + SNAKE_SEGMENT_OFFSETS[segmentIndex] + DOT_COUNT) % DOT_COUNT;
if (sequenceIndex === activeSequenceIndex) {
opacity = SNAKE_OPACITIES[segmentIndex] ?? 0;
break;
}
}
return {
opacity,
};
});
return (
<Animated.View
style={[
animatedStyle,
{
width: dotSize,
height: dotSize,
borderRadius: dotSize / 2,
backgroundColor: color,
},
style,
]}
/>
);
}
@@ -0,0 +1,82 @@
import { describe, expect, it } from "vitest";
import {
buildBulkCloseConfirmationMessage,
classifyBulkClosableTabs,
} from "@/screens/workspace/workspace-bulk-close";
import type { WorkspaceTabDescriptor } from "@/screens/workspace/workspace-tabs-types";
function makeAgentTab(id: string): WorkspaceTabDescriptor {
return {
key: `agent_${id}`,
tabId: `agent_${id}`,
kind: "agent",
agentId: id,
provider: "codex",
label: `Agent ${id}`,
subtitle: "",
titleState: "ready",
};
}
function makeTerminalTab(id: string): WorkspaceTabDescriptor {
return {
key: `terminal_${id}`,
tabId: `terminal_${id}`,
kind: "terminal",
terminalId: id,
label: `Terminal ${id}`,
subtitle: "",
};
}
function makeFileTab(path: string): WorkspaceTabDescriptor {
return {
key: `file_${path}`,
tabId: `file_${path}`,
kind: "file",
filePath: path,
label: path.split("/").pop() ?? path,
subtitle: path,
};
}
describe("workspace bulk close helpers", () => {
it("classifies agent, terminal, and passive tabs for shared bulk close handling", () => {
const groups = classifyBulkClosableTabs([
makeAgentTab("a1"),
makeTerminalTab("t1"),
makeFileTab("/repo/README.md"),
]);
expect(groups).toEqual({
agentTabs: [{ tabId: "agent_a1", agentId: "a1" }],
terminalTabs: [{ tabId: "terminal_t1", terminalId: "t1" }],
otherTabs: [{ tabId: "file_/repo/README.md" }],
});
});
it("describes mixed destructive bulk close operations in the confirmation copy", () => {
const message = buildBulkCloseConfirmationMessage(
classifyBulkClosableTabs([
makeAgentTab("a1"),
makeAgentTab("a2"),
makeTerminalTab("t1"),
makeFileTab("/repo/README.md"),
])
);
expect(message).toBe(
"This will archive 2 agent(s), close 1 terminal(s), and close 1 tab(s). Any running process in a closed terminal will be stopped immediately."
);
});
it("keeps terminal-only confirmations explicit about stopping running processes", () => {
const message = buildBulkCloseConfirmationMessage(
classifyBulkClosableTabs([makeTerminalTab("t1")])
);
expect(message).toBe(
"This will close 1 terminal(s). Any running process in a closed terminal will be stopped immediately."
);
});
});
@@ -0,0 +1,52 @@
import type { WorkspaceTabDescriptor } from "@/screens/workspace/workspace-tabs-types";
export type BulkClosableTabGroups = {
agentTabs: Array<{ tabId: string; agentId: string }>;
terminalTabs: Array<{ tabId: string; terminalId: string }>;
otherTabs: Array<{ tabId: string }>;
};
export function classifyBulkClosableTabs(tabs: WorkspaceTabDescriptor[]): BulkClosableTabGroups {
const groups: BulkClosableTabGroups = {
agentTabs: [],
terminalTabs: [],
otherTabs: [],
};
for (const tab of tabs) {
if (tab.kind === "agent") {
groups.agentTabs.push({ tabId: tab.tabId, agentId: tab.agentId });
continue;
}
if (tab.kind === "terminal") {
groups.terminalTabs.push({ tabId: tab.tabId, terminalId: tab.terminalId });
continue;
}
groups.otherTabs.push({ tabId: tab.tabId });
}
return groups;
}
export function buildBulkCloseConfirmationMessage(input: BulkClosableTabGroups): string {
const { agentTabs, terminalTabs, otherTabs } = input;
if (agentTabs.length > 0 && terminalTabs.length > 0 && otherTabs.length > 0) {
return `This will archive ${agentTabs.length} agent(s), close ${terminalTabs.length} terminal(s), and close ${otherTabs.length} tab(s). Any running process in a closed terminal will be stopped immediately.`;
}
if (agentTabs.length > 0 && terminalTabs.length > 0) {
return `This will archive ${agentTabs.length} agent(s) and close ${terminalTabs.length} terminal(s). Any running process in a closed terminal will be stopped immediately.`;
}
if (terminalTabs.length > 0 && otherTabs.length > 0) {
return `This will close ${terminalTabs.length} terminal(s) and close ${otherTabs.length} tab(s). Any running process in a closed terminal will be stopped immediately.`;
}
if (agentTabs.length > 0 && otherTabs.length > 0) {
return `This will archive ${agentTabs.length} agent(s) and close ${otherTabs.length} tab(s).`;
}
if (terminalTabs.length > 0) {
return `This will close ${terminalTabs.length} terminal(s). Any running process in a closed terminal will be stopped immediately.`;
}
if (otherTabs.length > 0) {
return `This will close ${otherTabs.length} tab(s).`;
}
return `This will archive ${agentTabs.length} agent(s).`;
}
@@ -39,7 +39,9 @@ type WorkspaceDesktopTabsRowProps = {
onCloseTab: (tabId: string) => Promise<void> | void;
onCopyResumeCommand: (agentId: string) => Promise<void> | void;
onCopyAgentId: (agentId: string) => Promise<void> | void;
onCloseTabsToLeft: (tabId: string) => Promise<void> | void;
onCloseTabsToRight: (tabId: string) => Promise<void> | void;
onCloseOtherTabs: (tabId: string) => Promise<void> | void;
onSelectNewTabOption: (optionId: NewTabOptionId) => void;
newTabAgentOptionId: NewTabOptionId;
newTabTerminalOptionId: NewTabOptionId;
@@ -64,7 +66,9 @@ export function WorkspaceDesktopTabsRow({
onCloseTab,
onCopyResumeCommand,
onCopyAgentId,
onCloseTabsToLeft,
onCloseTabsToRight,
onCloseOtherTabs,
onSelectNewTabOption,
newTabAgentOptionId,
newTabTerminalOptionId,
@@ -129,7 +133,10 @@ export function WorkspaceDesktopTabsRow({
horizontal
scrollEnabled={layout.requiresHorizontalScrollFallback}
testID="workspace-tabs-scroll"
style={styles.tabsScroll}
style={[
styles.tabsScroll,
layout.requiresHorizontalScrollFallback ? styles.tabsScrollOverflow : styles.tabsScrollFitContent,
]}
contentContainerStyle={styles.tabsContent}
showsHorizontalScrollIndicator={false}
>
@@ -161,6 +168,9 @@ export function WorkspaceDesktopTabsRow({
const presentation = deriveWorkspaceTabPresentation({ tab, agent: tabAgent });
const contextMenuTestId = `workspace-tab-context-${tab.key}`;
const isFirstTab = index === 0;
const isLastTab = index === tabs.length - 1;
const isOnlyTab = tabs.length <= 1;
return (
<ContextMenu key={tab.key}>
@@ -290,15 +300,33 @@ export function WorkspaceDesktopTabsRow({
<ContextMenuSeparator />
<ContextMenuItem
testID={`${contextMenuTestId}-close-left`}
disabled={isFirstTab}
onSelect={() => {
void onCloseTabsToLeft(tab.tabId);
}}
>
Close to the left
</ContextMenuItem>
<ContextMenuItem
testID={`${contextMenuTestId}-close-right`}
disabled={tabs.findIndex((t) => t.key === tab.key) === tabs.length - 1}
disabled={isLastTab}
onSelect={() => {
void onCloseTabsToRight(tab.tabId);
}}
>
Close to the right
</ContextMenuItem>
<ContextMenuItem
testID={`${contextMenuTestId}-close-others`}
disabled={isOnlyTab}
onSelect={() => {
void onCloseOtherTabs(tab.tabId);
}}
>
Close other tabs
</ContextMenuItem>
<ContextMenuItem
testID={`${contextMenuTestId}-close`}
onSelect={() => {
@@ -375,9 +403,15 @@ const styles = StyleSheet.create((theme) => ({
alignItems: "center",
},
tabsScroll: {
flex: 1,
minWidth: 0,
},
tabsScrollFitContent: {
flexGrow: 0,
flexShrink: 1,
},
tabsScrollOverflow: {
flex: 1,
},
tabsContent: {
flexDirection: "row",
alignItems: "center",
@@ -83,6 +83,10 @@ import {
import {
deriveWorkspaceTabModel,
} from "@/screens/workspace/workspace-tab-model";
import {
buildBulkCloseConfirmationMessage,
classifyBulkClosableTabs,
} from "@/screens/workspace/workspace-bulk-close";
const TERMINALS_QUERY_STALE_TIME = 5_000;
const NEW_TAB_AGENT_OPTION_ID = "__new_tab_agent__";
@@ -954,46 +958,17 @@ function WorkspaceScreenContent({
[sessionAgents, toast]
);
const handleCloseTabsToRight = useCallback(
async (tabKey: string) => {
const startIndex = tabs.findIndex((tab) => tab.tabId === tabKey);
if (startIndex < 0) {
return;
}
const toClose = tabs.slice(startIndex + 1);
if (toClose.length === 0) {
const handleBulkCloseTabs = useCallback(
async (input: { tabsToClose: WorkspaceTabDescriptor[]; title: string; logLabel: string }) => {
const { tabsToClose, title, logLabel } = input;
if (tabsToClose.length === 0) {
return;
}
const agentTabs: Array<{ tabId: string; agentId: string }> = [];
const terminalTabs: Array<{ tabId: string; terminalId: string }> = [];
const otherTabs: Array<{ tabId: string }> = [];
for (const tab of toClose) {
if (tab.kind === "agent") {
agentTabs.push({ tabId: tab.tabId, agentId: tab.agentId });
} else if (tab.kind === "terminal") {
terminalTabs.push({ tabId: tab.tabId, terminalId: tab.terminalId });
} else {
otherTabs.push({ tabId: tab.tabId });
}
}
const groups = classifyBulkClosableTabs(tabsToClose);
const confirmed = await confirmDialog({
title: "Close tabs to the right?",
message:
agentTabs.length > 0 && terminalTabs.length > 0 && otherTabs.length > 0
? `This will archive ${agentTabs.length} agent(s), close ${terminalTabs.length} terminal(s), and close ${otherTabs.length} tab(s). Any running process in a closed terminal will be stopped immediately.`
: agentTabs.length > 0 && terminalTabs.length > 0
? `This will archive ${agentTabs.length} agent(s) and close ${terminalTabs.length} terminal(s). Any running process in a closed terminal will be stopped immediately.`
: terminalTabs.length > 0 && otherTabs.length > 0
? `This will close ${terminalTabs.length} terminal(s) and close ${otherTabs.length} tab(s). Any running process in a closed terminal will be stopped immediately.`
: agentTabs.length > 0 && otherTabs.length > 0
? `This will archive ${agentTabs.length} agent(s) and close ${otherTabs.length} tab(s).`
: terminalTabs.length > 0
? `This will close ${terminalTabs.length} terminal(s). Any running process in a closed terminal will be stopped immediately.`
: otherTabs.length > 0
? `This will close ${otherTabs.length} tab(s).`
: `This will archive ${agentTabs.length} agent(s).`,
title,
message: buildBulkCloseConfirmationMessage(groups),
confirmLabel: "Close",
cancelLabel: "Cancel",
destructive: true,
@@ -1002,7 +977,7 @@ function WorkspaceScreenContent({
return;
}
for (const { tabId, terminalId } of terminalTabs) {
for (const { tabId, terminalId } of groups.terminalTabs) {
try {
await killTerminalMutation.mutateAsync(terminalId);
queryClient.setQueryData<ListTerminalsPayload>(terminalsQueryKey, (current) => {
@@ -1020,11 +995,11 @@ function WorkspaceScreenContent({
tabId,
});
} catch (error) {
console.warn("[WorkspaceScreen] Failed to close terminal tab to the right", { terminalId, error });
console.warn(`[WorkspaceScreen] Failed to close terminal tab ${logLabel}`, { terminalId, error });
}
}
for (const { tabId, agentId } of agentTabs) {
for (const { tabId, agentId } of groups.agentTabs) {
if (!normalizedServerId) {
continue;
}
@@ -1036,11 +1011,11 @@ function WorkspaceScreenContent({
tabId,
});
} catch (error) {
console.warn("[WorkspaceScreen] Failed to archive agent tab to the right", { agentId, error });
console.warn(`[WorkspaceScreen] Failed to archive agent tab ${logLabel}`, { agentId, error });
}
}
for (const { tabId } of otherTabs) {
for (const { tabId } of groups.otherTabs) {
closeWorkspaceTab({
serverId: normalizedServerId,
workspaceId: normalizedWorkspaceId,
@@ -1048,7 +1023,7 @@ function WorkspaceScreenContent({
});
}
const closedKeys = new Set(toClose.map((tab) => tab.key));
const closedKeys = new Set(tabsToClose.map((tab) => tab.key));
setHoveredTabKey((current) => (current && closedKeys.has(current) ? null : current));
setHoveredCloseTabKey((current) => (current && closedKeys.has(current) ? null : current));
},
@@ -1059,11 +1034,52 @@ function WorkspaceScreenContent({
normalizedServerId,
normalizedWorkspaceId,
queryClient,
tabs,
terminalsQueryKey,
]
);
const handleCloseTabsToLeft = useCallback(
async (tabId: string) => {
const index = tabs.findIndex((tab) => tab.tabId === tabId);
if (index < 0) {
return;
}
await handleBulkCloseTabs({
tabsToClose: tabs.slice(0, index),
title: "Close tabs to the left?",
logLabel: "to the left",
});
},
[handleBulkCloseTabs, tabs]
);
const handleCloseTabsToRight = useCallback(
async (tabId: string) => {
const index = tabs.findIndex((tab) => tab.tabId === tabId);
if (index < 0) {
return;
}
await handleBulkCloseTabs({
tabsToClose: tabs.slice(index + 1),
title: "Close tabs to the right?",
logLabel: "to the right",
});
},
[handleBulkCloseTabs, tabs]
);
const handleCloseOtherTabs = useCallback(
async (tabId: string) => {
const tabsToClose = tabs.filter((tab) => tab.tabId !== tabId);
await handleBulkCloseTabs({
tabsToClose,
title: "Close other tabs?",
logLabel: "from close other tabs",
});
},
[handleBulkCloseTabs, tabs]
);
useEffect(() => {
if (!workspaceTabActionRequest) {
return;
@@ -1444,7 +1460,9 @@ function WorkspaceScreenContent({
onCloseTab={handleCloseTabById}
onCopyResumeCommand={handleCopyResumeCommand}
onCopyAgentId={handleCopyAgentId}
onCloseTabsToLeft={handleCloseTabsToLeft}
onCloseTabsToRight={handleCloseTabsToRight}
onCloseOtherTabs={handleCloseOtherTabs}
onSelectNewTabOption={handleSelectNewTabOption}
newTabAgentOptionId={NEW_TAB_AGENT_OPTION_ID}
newTabTerminalOptionId={NEW_TAB_TERMINAL_OPTION_ID}
@@ -4,6 +4,7 @@ import { Bot, Check, FileText, Pencil, Terminal } from "lucide-react-native";
import { StyleSheet, useUnistyles } from "react-native-unistyles";
import { ClaudeIcon } from "@/components/icons/claude-icon";
import { CodexIcon } from "@/components/icons/codex-icon";
import { SyncedLoader } from "@/components/synced-loader";
import type { Agent } from "@/stores/session-store";
import type { WorkspaceTabDescriptor } from "@/screens/workspace/workspace-tabs-types";
import {
@@ -11,6 +12,7 @@ import {
type SidebarStateBucket,
} from "@/utils/sidebar-agent-state";
import { getStatusDotColor } from "@/utils/status-dot-color";
import { shouldRenderSyncedStatusLoader } from "@/utils/status-loader";
export type WorkspaceTabPresentation = {
key: string;
@@ -69,8 +71,19 @@ export function WorkspaceTabIcon({
bucket: presentation.statusBucket,
showDoneAsInactive: false,
});
const shouldShowLoader = shouldRenderSyncedStatusLoader({
bucket: presentation.statusBucket,
});
if (presentation.kind === "agent") {
if (shouldShowLoader) {
return (
<View style={[styles.agentIconWrapper, { width: size, height: size }]}>
<SyncedLoader size={size - 1} color={theme.colors.palette.amber[500]} />
</View>
);
}
return (
<View style={[styles.agentIconWrapper, { width: size, height: size }]}>
{presentation.provider === "claude" ? (
@@ -0,0 +1,13 @@
import { describe, expect, it } from "vitest";
import { shouldRenderSyncedStatusLoader } from "./status-loader";
describe("shouldRenderSyncedStatusLoader", () => {
it("renders the synced loader only for running status", () => {
expect(shouldRenderSyncedStatusLoader({ bucket: "running" })).toBe(true);
expect(shouldRenderSyncedStatusLoader({ bucket: "needs_input" })).toBe(false);
expect(shouldRenderSyncedStatusLoader({ bucket: "failed" })).toBe(false);
expect(shouldRenderSyncedStatusLoader({ bucket: "attention" })).toBe(false);
expect(shouldRenderSyncedStatusLoader({ bucket: "done" })).toBe(false);
expect(shouldRenderSyncedStatusLoader({ bucket: null })).toBe(false);
});
});
+12
View File
@@ -0,0 +1,12 @@
export type StatusLoaderBucket =
| "needs_input"
| "failed"
| "running"
| "attention"
| "done";
export function shouldRenderSyncedStatusLoader(input: {
bucket: StatusLoaderBucket | null | undefined;
}): boolean {
return input.bucket === "running";
}