mirror of
https://github.com/alkimake/paperclip.git
synced 2026-06-18 03:30:39 +09:00
Add pause and resume actions to sidebar agents (#4616)
## Thinking Path > - Paperclip operators need fast control over the agents running their company. > - The sidebar is the persistent place operators scan agent state while navigating the board UI. > - Agent pause and resume already exist as control-plane actions, but sidebar users had to navigate away to use them. > - This pull request adds a compact per-agent action menu in the sidebar. > - It keeps edit, pause, and resume close to the visible agent list while preserving existing navigation behavior. > - The benefit is faster operator intervention when an agent needs to be paused or restarted. ## What Changed - Refactored sidebar agent rows into a small item component with a hover/focus action menu. - Added edit, pause, and resume actions using existing agent API calls and cache invalidation keys. - Added success/error toasts for pause and resume mutations. - Tracked pause/resume pending state per agent so one active mutation does not disable every sidebar row. - Disabled direct sidebar resume for budget-paused agents and labeled that state clearly. - Added jsdom coverage for active-agent pause, paused-agent resume, per-agent pending state, and budget-paused resume protection. - Added visual review artifacts for the default row and opened action menu: - [Sidebar row](docs/pr-screenshots/pr-4616/sidebar-agent-row.png) - [Sidebar action menu](docs/pr-screenshots/pr-4616/sidebar-agent-actions.png) ## Verification - `pnpm exec vitest run ui/src/components/SidebarAgents.test.tsx` - `pnpm --filter @paperclipai/server prepare:ui-dist` - Browser screenshot pass against a temporary local trusted instance at `http://127.0.0.1:3102` using Playwright. ## Risks - Low risk: UI-only addition using existing agent pause/resume endpoints. The main risk is layout crowding for very narrow sidebars, mitigated by the icon-only trigger and existing truncation. - Budget-paused agents now require a non-sidebar path to resume, which is intentional to avoid accidentally restarting agents stopped by budget enforcement. > For core feature work, check [`ROADMAP.md`](ROADMAP.md) first and discuss it in `#dev` before opening the PR. Feature PRs that overlap with planned core work may need to be redirected — check the roadmap first. See `CONTRIBUTING.md`. ## Model Used - OpenAI Codex coding agent based on GPT-5, tool-enabled local repository and shell/browser access, Paperclip heartbeat context. ## Checklist - [x] I have included a thinking path that traces from project context to this change - [x] I have specified the model used (with version and capability details) - [x] I have checked ROADMAP.md and confirmed this PR does not duplicate planned core work - [x] I have run tests locally and they pass - [x] I have added or updated tests where applicable - [x] If this change affects the UI, I have included before/after screenshots - [x] I have updated relevant documentation to reflect my changes - [x] I have considered and documented any risks above - [x] I will address all Greptile and reviewer comments before requesting merge --------- Co-authored-by: Paperclip <noreply@paperclip.ing>
This commit is contained in:
Dotta
GitHub
parent
f88f538e6d
commit
43b0f2ae58
4 changed files with 507 additions and 37 deletions
|
|
@ -1,10 +1,18 @@
|
|||
import { useMemo, useState } from "react";
|
||||
import { NavLink, useLocation } from "@/lib/router";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { ChevronRight, Plus } from "lucide-react";
|
||||
import { Link, NavLink, useLocation } from "@/lib/router";
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import {
|
||||
ChevronRight,
|
||||
MoreHorizontal,
|
||||
PauseCircle,
|
||||
Pencil,
|
||||
PlayCircle,
|
||||
Plus,
|
||||
} from "lucide-react";
|
||||
import { useCompany } from "../context/CompanyContext";
|
||||
import { useDialog } from "../context/DialogContext";
|
||||
import { useSidebar } from "../context/SidebarContext";
|
||||
import { useToastActions } from "../context/ToastContext";
|
||||
import { agentsApi } from "../api/agents";
|
||||
import { authApi } from "../api/auth";
|
||||
import { heartbeatsApi } from "../api/heartbeats";
|
||||
|
|
@ -14,17 +22,145 @@ import { cn, agentRouteRef, agentUrl } from "../lib/utils";
|
|||
import { useAgentOrder } from "../hooks/useAgentOrder";
|
||||
import { AgentIcon } from "./AgentIconPicker";
|
||||
import { BudgetSidebarMarker } from "./BudgetSidebarMarker";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Collapsible,
|
||||
CollapsibleContent,
|
||||
CollapsibleTrigger,
|
||||
} from "@/components/ui/collapsible";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import type { Agent } from "@paperclipai/shared";
|
||||
|
||||
function SidebarAgentItem({
|
||||
activeAgentId,
|
||||
activeTab,
|
||||
agent,
|
||||
disabled,
|
||||
isMobile,
|
||||
onPauseResume,
|
||||
runCount,
|
||||
setSidebarOpen,
|
||||
}: {
|
||||
activeAgentId: string | null;
|
||||
activeTab: string | null;
|
||||
agent: Agent;
|
||||
disabled: boolean;
|
||||
isMobile: boolean;
|
||||
onPauseResume: (agent: Agent, action: "pause" | "resume") => void;
|
||||
runCount: number;
|
||||
setSidebarOpen: (open: boolean) => void;
|
||||
}) {
|
||||
const routeRef = agentRouteRef(agent);
|
||||
const href = activeTab ? `${agentUrl(agent)}/${activeTab}` : agentUrl(agent);
|
||||
const editHref = `${agentUrl(agent)}/configuration`;
|
||||
const isActive = activeAgentId === routeRef;
|
||||
const isPaused = agent.status === "paused";
|
||||
const isBudgetPaused = isPaused && agent.pauseReason === "budget";
|
||||
const pauseResumeLabel = isPaused ? "Resume agent" : "Pause agent";
|
||||
const pauseResumeDisabled = disabled || agent.status === "pending_approval" || isBudgetPaused;
|
||||
const pauseResumeDisabledLabel = disabled
|
||||
? "Updating..."
|
||||
: isBudgetPaused
|
||||
? "Budget paused"
|
||||
: pauseResumeLabel;
|
||||
|
||||
return (
|
||||
<div className="group/agent relative flex items-center">
|
||||
<NavLink
|
||||
to={href}
|
||||
state={SIDEBAR_SCROLL_RESET_STATE}
|
||||
onClick={() => {
|
||||
if (isMobile) setSidebarOpen(false);
|
||||
}}
|
||||
className={cn(
|
||||
"flex min-w-0 flex-1 items-center gap-2.5 px-3 py-1.5 pr-8 text-[13px] font-medium transition-colors",
|
||||
isActive
|
||||
? "bg-accent text-foreground"
|
||||
: "text-foreground/80 hover:bg-accent/50 hover:text-foreground"
|
||||
)}
|
||||
>
|
||||
<AgentIcon icon={agent.icon} className="shrink-0 h-3.5 w-3.5 text-muted-foreground" />
|
||||
<span className="flex-1 truncate">{agent.name}</span>
|
||||
{(agent.pauseReason === "budget" || runCount > 0) && (
|
||||
<span className="ml-auto flex items-center gap-1.5 shrink-0">
|
||||
{agent.pauseReason === "budget" ? (
|
||||
<BudgetSidebarMarker title="Agent paused by budget" />
|
||||
) : null}
|
||||
{runCount > 0 ? (
|
||||
<span className="relative flex h-2 w-2">
|
||||
<span className="animate-pulse absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-75" />
|
||||
<span className="relative inline-flex rounded-full h-2 w-2 bg-blue-500" />
|
||||
</span>
|
||||
) : null}
|
||||
{runCount > 0 ? (
|
||||
<span className="text-[11px] font-medium text-blue-600 dark:text-blue-400">
|
||||
{runCount} live
|
||||
</span>
|
||||
) : null}
|
||||
</span>
|
||||
)}
|
||||
</NavLink>
|
||||
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon-xs"
|
||||
className={cn(
|
||||
"absolute right-1 top-1/2 h-6 w-6 -translate-y-1/2 transition-opacity data-[state=open]:pointer-events-auto data-[state=open]:opacity-100",
|
||||
isMobile
|
||||
? "opacity-100"
|
||||
: "pointer-events-none opacity-0 group-hover/agent:pointer-events-auto group-hover/agent:opacity-100 group-focus-within/agent:pointer-events-auto group-focus-within/agent:opacity-100",
|
||||
)}
|
||||
aria-label={`Open actions for ${agent.name}`}
|
||||
>
|
||||
<MoreHorizontal className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" className="w-44">
|
||||
<DropdownMenuItem asChild>
|
||||
<Link
|
||||
to={editHref}
|
||||
onClick={() => {
|
||||
if (isMobile) setSidebarOpen(false);
|
||||
}}
|
||||
>
|
||||
<Pencil className="size-4" />
|
||||
<span>Edit agent</span>
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem
|
||||
onClick={() => {
|
||||
if (pauseResumeDisabled) return;
|
||||
onPauseResume(agent, isPaused ? "resume" : "pause");
|
||||
}}
|
||||
disabled={pauseResumeDisabled}
|
||||
title={isBudgetPaused ? "Agent was paused by budget limits" : undefined}
|
||||
>
|
||||
{isPaused ? <PlayCircle className="size-4" /> : <PauseCircle className="size-4" />}
|
||||
<span>{pauseResumeDisabledLabel}</span>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function SidebarAgents() {
|
||||
const [open, setOpen] = useState(true);
|
||||
const [pendingAgentIds, setPendingAgentIds] = useState<Set<string>>(() => new Set());
|
||||
const queryClient = useQueryClient();
|
||||
const { selectedCompanyId } = useCompany();
|
||||
const { openNewAgent } = useDialog();
|
||||
const { isMobile, setSidebarOpen } = useSidebar();
|
||||
const { pushToast } = useToastActions();
|
||||
const location = useLocation();
|
||||
|
||||
const { data: agents } = useQuery({
|
||||
|
|
@ -69,6 +205,51 @@ export function SidebarAgents() {
|
|||
const activeAgentId = agentMatch?.[1] ?? null;
|
||||
const activeTab = agentMatch?.[2] ?? null;
|
||||
|
||||
const pauseResumeAgent = useMutation({
|
||||
mutationFn: ({ agent, action }: { agent: Agent; action: "pause" | "resume" }) =>
|
||||
action === "pause"
|
||||
? agentsApi.pause(agent.id, selectedCompanyId ?? undefined)
|
||||
: agentsApi.resume(agent.id, selectedCompanyId ?? undefined),
|
||||
onMutate: ({ agent }) => {
|
||||
setPendingAgentIds((current) => {
|
||||
const next = new Set(current);
|
||||
next.add(agent.id);
|
||||
return next;
|
||||
});
|
||||
},
|
||||
onSuccess: async (_agent, { agent, action }) => {
|
||||
if (selectedCompanyId) {
|
||||
await Promise.all([
|
||||
queryClient.invalidateQueries({ queryKey: queryKeys.agents.list(selectedCompanyId) }),
|
||||
queryClient.invalidateQueries({ queryKey: queryKeys.liveRuns(selectedCompanyId) }),
|
||||
queryClient.invalidateQueries({ queryKey: queryKeys.dashboard(selectedCompanyId) }),
|
||||
]);
|
||||
}
|
||||
await Promise.all([
|
||||
queryClient.invalidateQueries({ queryKey: queryKeys.agents.detail(agent.id) }),
|
||||
queryClient.invalidateQueries({ queryKey: queryKeys.agents.detail(agentRouteRef(agent)) }),
|
||||
]);
|
||||
pushToast({
|
||||
title: action === "pause" ? "Agent paused" : "Agent resumed",
|
||||
body: agent.name,
|
||||
tone: "success",
|
||||
});
|
||||
},
|
||||
onError: (error, { agent, action }) => {
|
||||
pushToast({
|
||||
title: action === "pause" ? "Could not pause agent" : "Could not resume agent",
|
||||
body: error instanceof Error ? error.message : agent.name,
|
||||
tone: "error",
|
||||
});
|
||||
},
|
||||
onSettled: (_data, _error, { agent }) => {
|
||||
setPendingAgentIds((current) => {
|
||||
const next = new Set(current);
|
||||
next.delete(agent.id);
|
||||
return next;
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<Collapsible open={open} onOpenChange={setOpen}>
|
||||
|
|
@ -103,41 +284,17 @@ export function SidebarAgents() {
|
|||
{orderedAgents.map((agent: Agent) => {
|
||||
const runCount = liveCountByAgent.get(agent.id) ?? 0;
|
||||
return (
|
||||
<NavLink
|
||||
<SidebarAgentItem
|
||||
key={agent.id}
|
||||
to={activeTab ? `${agentUrl(agent)}/${activeTab}` : agentUrl(agent)}
|
||||
state={SIDEBAR_SCROLL_RESET_STATE}
|
||||
onClick={() => {
|
||||
if (isMobile) setSidebarOpen(false);
|
||||
}}
|
||||
className={cn(
|
||||
"flex items-center gap-2.5 px-3 py-1.5 text-[13px] font-medium transition-colors",
|
||||
activeAgentId === agentRouteRef(agent)
|
||||
? "bg-accent text-foreground"
|
||||
: "text-foreground/80 hover:bg-accent/50 hover:text-foreground"
|
||||
)}
|
||||
>
|
||||
<AgentIcon icon={agent.icon} className="shrink-0 h-3.5 w-3.5 text-muted-foreground" />
|
||||
<span className="flex-1 truncate">{agent.name}</span>
|
||||
{(agent.pauseReason === "budget" || runCount > 0) && (
|
||||
<span className="ml-auto flex items-center gap-1.5 shrink-0">
|
||||
{agent.pauseReason === "budget" ? (
|
||||
<BudgetSidebarMarker title="Agent paused by budget" />
|
||||
) : null}
|
||||
{runCount > 0 ? (
|
||||
<span className="relative flex h-2 w-2">
|
||||
<span className="animate-pulse absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-75" />
|
||||
<span className="relative inline-flex rounded-full h-2 w-2 bg-blue-500" />
|
||||
</span>
|
||||
) : null}
|
||||
{runCount > 0 ? (
|
||||
<span className="text-[11px] font-medium text-blue-600 dark:text-blue-400">
|
||||
{runCount} live
|
||||
</span>
|
||||
) : null}
|
||||
</span>
|
||||
)}
|
||||
</NavLink>
|
||||
activeAgentId={activeAgentId}
|
||||
activeTab={activeTab}
|
||||
agent={agent}
|
||||
disabled={pendingAgentIds.has(agent.id)}
|
||||
isMobile={isMobile}
|
||||
onPauseResume={(targetAgent, action) => pauseResumeAgent.mutate({ agent: targetAgent, action })}
|
||||
runCount={runCount}
|
||||
setSidebarOpen={setSidebarOpen}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue