mirror of
https://github.com/paperclipai/paperclip.git
synced 2026-10-21 16:27:18 +02:00
## Thinking Path > - Paperclip is the open source app people use to manage AI agents for work. > - The agent configuration UI controls each agent and its allowed secrets. > - The environment variable editor already has a secret selector with search and folder navigation. > - The secret access editor used a basic list and made large secret stores hard to use. > - The secret access controls also occupied the main Configuration tab. > - This pull request reuses the rich selector and moves secret access to a dedicated Secrets tab. > - The benefit is one consistent secret selection workflow with clearer agent configuration navigation. ## Linked Issues or Issue Description **What existing behavior does this improve?** The agent detail configuration view and its secret access editor. **Subsystem affected** `ui/` — React and Vite board UI. **Current behavior** The secret access editor uses a basic select control. It does not provide the search and folder navigation available in the environment variable editor. The editor also appears inside the Configuration tab. **Proposed behavior** The secret access editor uses the shared secret picker. Users can search secrets and browse slash-delimited folders. Agent details provide a dedicated Secrets tab for this editor. **Reason and benefit** Large secret stores are slow to scan in a flat list. Reusing one selector reduces UI differences and makes scoped secret access easier to manage. **Breaking changes** None. The API and saved secret access data do not change. ## What Changed - Reused the environment variable secret picker in the agent secret access editor. - Preserved secret version selection and the create-secret action, including nested-popover focus handling. - Added a route-backed Secrets tab to agent details and removed secret access controls from Configuration. - Guarded unsaved configuration across tab, link, browser-history, and action-triggered navigation. - Rechecked dirty state when navigation-producing agent actions finish, covering edits made while a request is pending. - Added component, page, and Storybook coverage for the workflow. ## Verification - `pnpm --filter @paperclipai/ui exec vitest run src/components/AgentActionButtons.test.tsx src/components/AgentConfigForm.render.test.tsx src/components/AgentSecretAccessEditor.test.tsx src/components/environment-variables-editor/EnvironmentVariablesEditor.test.tsx src/pages/AgentDetail.progress.test.ts` — 82 tests passed. - `pnpm --filter @paperclipai/ui typecheck` - `pnpm check:token-gates` - All GitHub PR checks passed on `5209c5b787`, including build, canary, general and serialized tests, and all three e2e shards. - Greptile completed at 5/5 with zero unresolved review threads. ## Risks - Low risk. The API and persisted binding format are unchanged; this changes agent configuration navigation and secret selection UI. - Dirty-state guards now cover direct navigation, Back/Forward history, and navigation-producing agent actions, including pending-request races. - Tests cover tab separation, secret access updates, search, folder navigation, focus restoration, and navigation rejection. - No documentation change is required because commands, contracts, and setup steps do not change. > 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 with GPT-5. This runtime did not expose a more specific model ID or context window. The model used agentic reasoning, repository tools, and code execution. ## 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 searched GitHub for duplicate or related PRs and linked them above - [x] I have either (a) linked existing issues with `Fixes: #` / `Closes #` / `Refs #` OR (b) described the issue in-PR following the relevant issue template - [x] I have not referenced internal/instance-local Paperclip issues or links (only public GitHub `#NNN` / `github.com/paperclipai/paperclip` URLs) - [x] My branch name describes the change (e.g. `docs/...`, `fix/...`) and contains no internal Paperclip ticket id or instance-derived details - [x] I have run tests locally and they pass - [x] I have added or updated tests where applicable - [x] I have updated relevant documentation to reflect my changes - [x] I have considered and documented any risks above - [x] All Paperclip CI gates are green - [x] Greptile is 5/5 with no open P2s, recommendations, or follow-ups - [x] I will address all Greptile and reviewer comments before requesting merge --------- Co-authored-by: Paperclip <noreply@paperclip.ing>
175 lines
5.9 KiB
TypeScript
175 lines
5.9 KiB
TypeScript
import { QueryClient } from "@tanstack/react-query";
|
|
import { describe, expect, it, vi } from "vitest";
|
|
|
|
import { queryKeys } from "../lib/queryKeys";
|
|
import {
|
|
AGENT_DETAIL_TABS,
|
|
DISCARD_AGENT_CONFIG_CHANGES_MESSAGE,
|
|
agentConfigHistoryRestoreDelta,
|
|
buildHeartbeatProgressLogLine,
|
|
confirmAgentConfigNavigation,
|
|
heartbeatProgressLogLineKey,
|
|
parseAgentDetailView,
|
|
restoreAgentConfigHistoryEntry,
|
|
runDetailRefetchIntervalMs,
|
|
shouldPollRunShellLog,
|
|
syncAgentRouteAfterRename,
|
|
} from "./AgentDetail";
|
|
|
|
describe("agent detail tabs", () => {
|
|
it("exposes Secrets as its own route-backed tab", () => {
|
|
expect(AGENT_DETAIL_TABS.map((tab) => tab.label)).toContain("Secrets");
|
|
expect(parseAgentDetailView("secrets")).toBe("secrets");
|
|
});
|
|
|
|
it("requires confirmation before navigation can discard unsaved configuration", () => {
|
|
const confirm = vi.fn().mockReturnValue(false);
|
|
|
|
expect(confirmAgentConfigNavigation(true, confirm)).toBe(false);
|
|
expect(confirm).toHaveBeenCalledWith(DISCARD_AGENT_CONFIG_CHANGES_MESSAGE);
|
|
|
|
confirm.mockReturnValue(true);
|
|
expect(confirmAgentConfigNavigation(true, confirm)).toBe(true);
|
|
expect(confirmAgentConfigNavigation(false, confirm)).toBe(true);
|
|
expect(confirm).toHaveBeenCalledTimes(2);
|
|
});
|
|
|
|
it("restores the prior history entry when Back or Forward navigation is rejected", () => {
|
|
expect(agentConfigHistoryRestoreDelta(4, 2)).toBe(2);
|
|
expect(agentConfigHistoryRestoreDelta(2, 4)).toBe(-2);
|
|
expect(agentConfigHistoryRestoreDelta(2, 2)).toBeNull();
|
|
expect(agentConfigHistoryRestoreDelta(undefined, 1)).toBeNull();
|
|
});
|
|
|
|
it("restores the guarded URL when React Router history indexes are unavailable", () => {
|
|
const history = {
|
|
go: vi.fn(),
|
|
pushState: vi.fn(),
|
|
};
|
|
const currentState = { key: "agent-config" };
|
|
|
|
expect(restoreAgentConfigHistoryEntry(history, {
|
|
index: undefined,
|
|
state: currentState,
|
|
url: "https://paperclip.test/agents/eng/secrets",
|
|
}, undefined)).toBe(false);
|
|
expect(history.pushState).toHaveBeenCalledWith(
|
|
currentState,
|
|
"",
|
|
"https://paperclip.test/agents/eng/secrets",
|
|
);
|
|
expect(history.go).not.toHaveBeenCalled();
|
|
});
|
|
});
|
|
|
|
describe("buildHeartbeatProgressLogLine", () => {
|
|
it("renders progress messages with phase prefixes as system log lines", () => {
|
|
expect(
|
|
buildHeartbeatProgressLogLine(
|
|
{
|
|
message: "Syncing issue history",
|
|
phase: "workspace",
|
|
updatedAt: "2026-07-04T05:00:00.000Z",
|
|
},
|
|
"2026-07-04T04:59:00.000Z",
|
|
),
|
|
).toEqual({
|
|
ts: "2026-07-04T05:00:00.000Z",
|
|
stream: "system",
|
|
chunk: "[workspace] Syncing issue history",
|
|
});
|
|
});
|
|
|
|
it("renders progress messages without phases using the live event timestamp", () => {
|
|
expect(
|
|
buildHeartbeatProgressLogLine(
|
|
{ message: "Preparing workspace" },
|
|
"2026-07-04T05:01:00.000Z",
|
|
),
|
|
).toEqual({
|
|
ts: "2026-07-04T05:01:00.000Z",
|
|
stream: "system",
|
|
chunk: "Preparing workspace",
|
|
});
|
|
});
|
|
|
|
it("ignores empty progress messages", () => {
|
|
expect(
|
|
buildHeartbeatProgressLogLine(
|
|
{ message: " ", phase: "workspace" },
|
|
"2026-07-04T05:02:00.000Z",
|
|
),
|
|
).toBeNull();
|
|
});
|
|
});
|
|
|
|
describe("heartbeatProgressLogLineKey", () => {
|
|
it("uses the rendered log line fields as the replay key", () => {
|
|
const line = {
|
|
ts: "2026-07-04T05:03:00.000Z",
|
|
stream: "system" as const,
|
|
chunk: "[workspace] Syncing issue history",
|
|
};
|
|
|
|
expect(heartbeatProgressLogLineKey(line)).toBe(
|
|
"2026-07-04T05:03:00.000Z\u0000system\u0000[workspace] Syncing issue history",
|
|
);
|
|
});
|
|
});
|
|
|
|
describe("shouldPollRunShellLog", () => {
|
|
it("polls only after a queued run has started running", () => {
|
|
expect(shouldPollRunShellLog("queued")).toBe(false);
|
|
expect(shouldPollRunShellLog("running")).toBe(true);
|
|
expect(shouldPollRunShellLog("succeeded")).toBe(false);
|
|
});
|
|
});
|
|
|
|
describe("runDetailRefetchIntervalMs", () => {
|
|
it("polls run state only while the selected run remains queued", () => {
|
|
expect(runDetailRefetchIntervalMs("queued")).toBe(5_000);
|
|
expect(runDetailRefetchIntervalMs("running")).toBe(15_000);
|
|
expect(runDetailRefetchIntervalMs("succeeded")).toBe(false);
|
|
});
|
|
});
|
|
|
|
describe("syncAgentRouteAfterRename", () => {
|
|
it("replaces stale agent routes after a rename changes the URL key", () => {
|
|
const queryClient = new QueryClient();
|
|
const navigate = vi.fn();
|
|
queryClient.setQueryData(queryKeys.agents.detail("old-agent"), { id: "agent-1" });
|
|
queryClient.setQueryData(queryKeys.agents.detail("renamed-agent"), { id: "agent-1" });
|
|
|
|
const redirected = syncAgentRouteAfterRename(
|
|
queryClient,
|
|
navigate,
|
|
{ id: "agent-1", name: "Old Agent", urlKey: "old-agent" },
|
|
{ id: "agent-1", name: "Renamed Agent", urlKey: "renamed-agent" },
|
|
"configuration",
|
|
);
|
|
|
|
expect(redirected).toBe(true);
|
|
expect(navigate).toHaveBeenCalledWith("/agents/renamed-agent/configuration", { replace: true });
|
|
expect(queryClient.getQueryData(queryKeys.agents.detail("old-agent"))).toBeUndefined();
|
|
expect(queryClient.getQueryData(queryKeys.agents.detail("renamed-agent"))).toEqual({ id: "agent-1" });
|
|
});
|
|
|
|
it("does not redirect when the canonical route ref stays the same", () => {
|
|
const queryClient = new QueryClient();
|
|
const navigate = vi.fn();
|
|
queryClient.setQueryData(queryKeys.agents.detail("same-agent"), { id: "agent-1" });
|
|
|
|
const redirected = syncAgentRouteAfterRename(
|
|
queryClient,
|
|
navigate,
|
|
{ id: "agent-1", name: "Same Agent", urlKey: "same-agent" },
|
|
{ id: "agent-1", name: "Same Agent", urlKey: "same-agent" },
|
|
"configuration",
|
|
);
|
|
|
|
expect(redirected).toBe(false);
|
|
expect(navigate).not.toHaveBeenCalled();
|
|
expect(queryClient.getQueryData(queryKeys.agents.detail("same-agent"))).toEqual({ id: "agent-1" });
|
|
});
|
|
});
|