mirror of
https://github.com/alkimake/paperclip.git
synced 2026-06-17 03:10:38 +09:00
Polish operator UI task controls (#5427)
## Thinking Path > - Paperclip orchestrates AI agents for zero-human companies > - Operators spend most of their day scanning skills, routines, inbox groups, and activity cards > - Several small UI rough edges made those surfaces harder to scan or easier to crash on real API payloads > - These fixes are grouped together because they are low-risk operator quality-of-life improvements rather than separate control-plane contracts > - This pull request polishes skills metadata, routine run-now access, grouped issue creation defaults, monitor activity rendering, and activity row identity layout > - The benefit is a smoother board workflow with fewer small interruptions while keeping the change set compact ## What Changed - Improves company skill source display and the used-by agent list. - Truncates long skill source paths and adds a copy affordance. - Adds a row-level run-now button to the routines table. - Adds grouped issue creation defaults for inbox issue groups and aligns grouped add buttons to the right. - Fixes `IssueMonitorActivityCard` when `monitorNextCheckAt` arrives as an ISO string. - Polishes activity row actor avatar/name layout by using the shared avatar primitive. ## Verification - `pnpm run preflight:workspace-links && pnpm exec vitest run ui/src/pages/Routines.test.tsx ui/src/components/IssuesList.test.tsx ui/src/lib/inbox.test.ts ui/src/components/IssueMonitorActivityCard.test.tsx` — 91 passed. - The routines test emitted the pre-existing Radix warning about missing `DialogTitle`/description in dialog content; tests still passed. - Pairwise merge checks against the other two PR branches reported no textual conflicts. ## Risks - Low: changes are UI-focused and covered by targeted component/lib tests. - Low-to-medium: activity row layout changes could affect dense feed scanability; the implementation uses the shared avatar component and keeps truncation behavior. > 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, GPT-5 model family (`gpt-5`), tool-enabled Paperclip heartbeat environment. Context window and internal reasoning mode are not exposed by the runtime. ## 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
772fc92619
commit
6f30003421
12 changed files with 431 additions and 47 deletions
|
|
@ -1,5 +1,6 @@
|
|||
import { Link } from "@/lib/router";
|
||||
import { Identity } from "./Identity";
|
||||
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
||||
import { deriveInitials } from "./Identity";
|
||||
import { IssueReferenceActivitySummary } from "./IssueReferenceActivitySummary";
|
||||
import { timeAgo } from "../lib/timeAgo";
|
||||
import { cn } from "../lib/utils";
|
||||
|
|
@ -52,19 +53,20 @@ export function ActivityRow({ event, agentMap, userProfileMap, entityNameMap, en
|
|||
|
||||
const inner = (
|
||||
<div className="space-y-2">
|
||||
<div className="flex gap-3">
|
||||
<p className="flex-1 min-w-0 truncate">
|
||||
<Identity
|
||||
name={actorName}
|
||||
avatarUrl={actorAvatarUrl}
|
||||
size="xs"
|
||||
className="align-middle"
|
||||
/>
|
||||
<span className="text-muted-foreground ml-1">{verb} </span>
|
||||
{name && <span className="font-medium">{name}</span>}
|
||||
{entityTitle && <span className="text-muted-foreground ml-1">— {entityTitle}</span>}
|
||||
</p>
|
||||
<span className="text-xs text-muted-foreground shrink-0 pt-0.5">{timeAgo(event.createdAt)}</span>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex min-w-0 flex-1 items-center gap-2">
|
||||
<Avatar size="xs">
|
||||
{actorAvatarUrl && <AvatarImage src={actorAvatarUrl} alt={actorName} />}
|
||||
<AvatarFallback>{deriveInitials(actorName)}</AvatarFallback>
|
||||
</Avatar>
|
||||
<p className="min-w-0 flex-1 truncate">
|
||||
<span>{actorName}</span>
|
||||
<span className="text-muted-foreground"> {verb} </span>
|
||||
{name && <span className="font-medium">{name}</span>}
|
||||
{entityTitle && <span className="text-muted-foreground"> — {entityTitle}</span>}
|
||||
</p>
|
||||
</div>
|
||||
<span className="text-xs text-muted-foreground shrink-0">{timeAgo(event.createdAt)}</span>
|
||||
</div>
|
||||
<IssueReferenceActivitySummary event={event} />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ export interface IdentityProps {
|
|||
className?: string;
|
||||
}
|
||||
|
||||
function deriveInitials(name: string): string {
|
||||
export function deriveInitials(name: string): string {
|
||||
const parts = name.trim().split(/\s+/);
|
||||
if (parts.length >= 2) return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
|
||||
return name.slice(0, 2).toUpperCase();
|
||||
|
|
|
|||
|
|
@ -158,6 +158,44 @@ describe("IssueMonitorActivityCard", () => {
|
|||
act(() => root.unmount());
|
||||
});
|
||||
|
||||
it("renders without throwing when monitorNextCheckAt arrives as an ISO string", () => {
|
||||
const root = createRoot(container);
|
||||
|
||||
act(() => {
|
||||
root.render(
|
||||
<IssueMonitorActivityCard
|
||||
issue={createIssue({
|
||||
monitorNextCheckAt: "2026-04-11T12:30:00.000Z" as unknown as Date,
|
||||
executionPolicy: {
|
||||
mode: "normal",
|
||||
commentRequired: true,
|
||||
stages: [],
|
||||
},
|
||||
executionState: {
|
||||
status: "idle",
|
||||
currentStageId: null,
|
||||
currentStageIndex: null,
|
||||
currentStageType: null,
|
||||
currentParticipant: null,
|
||||
returnAssignee: null,
|
||||
reviewRequest: null,
|
||||
completedStageIds: [],
|
||||
lastDecisionId: null,
|
||||
lastDecisionOutcome: null,
|
||||
monitor: null,
|
||||
},
|
||||
})}
|
||||
/>,
|
||||
);
|
||||
});
|
||||
|
||||
expect(container.textContent).toContain("Monitor scheduled");
|
||||
expect(container.textContent).toContain("Next check");
|
||||
expect(container.textContent).toContain("in 30m");
|
||||
|
||||
act(() => root.unmount());
|
||||
});
|
||||
|
||||
it("renders nothing when the issue has no scheduled monitor", () => {
|
||||
const root = createRoot(container);
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import { formatDateTime } from "@/lib/utils";
|
|||
|
||||
function resolveScheduledMonitor(issue: Issue) {
|
||||
const nextCheckAt =
|
||||
issue.monitorNextCheckAt?.toISOString() ??
|
||||
issue.monitorNextCheckAt ??
|
||||
issue.executionPolicy?.monitor?.nextCheckAt ??
|
||||
issue.executionState?.monitor?.nextCheckAt ??
|
||||
null;
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import { act } from "react";
|
|||
import { createRoot } from "react-dom/client";
|
||||
import type { AnchorHTMLAttributes, ReactNode } from "react";
|
||||
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
||||
import type { Issue } from "@paperclipai/shared";
|
||||
import type { Issue, Project } from "@paperclipai/shared";
|
||||
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
|
||||
import { IssuesList } from "./IssuesList";
|
||||
import { TooltipProvider } from "@/components/ui/tooltip";
|
||||
|
|
@ -400,6 +400,70 @@ describe("IssuesList", () => {
|
|||
});
|
||||
});
|
||||
|
||||
it("uses workspace group defaults when creating an issue from a grouped section", async () => {
|
||||
localStorage.setItem(
|
||||
"paperclip:test-issues:company-1",
|
||||
JSON.stringify({ groupBy: "workspace", sortField: "updated", sortDir: "desc" }),
|
||||
);
|
||||
mockInstanceSettingsApi.getExperimental.mockResolvedValue({ enableIsolatedWorkspaces: true });
|
||||
mockExecutionWorkspacesApi.listSummaries.mockResolvedValue([
|
||||
{
|
||||
id: "execution-workspace-1",
|
||||
name: "Feature Branch",
|
||||
mode: "isolated_workspace",
|
||||
projectWorkspaceId: "project-workspace-1",
|
||||
},
|
||||
]);
|
||||
|
||||
const issue = createIssue({
|
||||
id: "issue-workspace",
|
||||
projectId: "project-1",
|
||||
projectWorkspaceId: "project-workspace-1",
|
||||
executionWorkspaceId: "execution-workspace-1",
|
||||
});
|
||||
const project = {
|
||||
id: "project-1",
|
||||
name: "Paperclip App",
|
||||
color: null,
|
||||
workspaces: [{ id: "project-workspace-1", name: "Primary workspace" }],
|
||||
primaryWorkspace: { id: "project-workspace-1" },
|
||||
executionWorkspacePolicy: { defaultProjectWorkspaceId: "project-workspace-1" },
|
||||
} as Project;
|
||||
|
||||
const { root } = renderWithQueryClient(
|
||||
<IssuesList
|
||||
issues={[issue]}
|
||||
agents={[]}
|
||||
projects={[project]}
|
||||
viewStateKey="paperclip:test-issues"
|
||||
onUpdateIssue={() => undefined}
|
||||
/>,
|
||||
container,
|
||||
);
|
||||
|
||||
await waitForAssertion(() => {
|
||||
const button = container.querySelector<HTMLButtonElement>('button[aria-label="New issue in Feature Branch"]');
|
||||
expect(button).not.toBeNull();
|
||||
});
|
||||
|
||||
await act(async () => {
|
||||
const button = container.querySelector<HTMLButtonElement>('button[aria-label="New issue in Feature Branch"]');
|
||||
button?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
|
||||
await Promise.resolve();
|
||||
});
|
||||
|
||||
expect(dialogState.openNewIssue).toHaveBeenCalledWith({
|
||||
executionWorkspaceId: "execution-workspace-1",
|
||||
executionWorkspaceMode: "reuse_existing",
|
||||
projectId: "project-1",
|
||||
projectWorkspaceId: "project-workspace-1",
|
||||
});
|
||||
|
||||
act(() => {
|
||||
root.unmount();
|
||||
});
|
||||
});
|
||||
|
||||
it("renders the opt-in sub-issue progress summary with workflow next-up linking", async () => {
|
||||
const doneIssue = createIssue({
|
||||
id: "issue-done",
|
||||
|
|
|
|||
|
|
@ -740,10 +740,10 @@ export function IssuesList({
|
|||
}, [projects]);
|
||||
|
||||
const projectWorkspaceById = useMemo(() => {
|
||||
const map = new Map<string, { name: string }>();
|
||||
const map = new Map<string, { name: string; projectId: string }>();
|
||||
for (const project of projects ?? []) {
|
||||
for (const workspace of project.workspaces ?? []) {
|
||||
map.set(workspace.id, { name: workspace.name || project.name });
|
||||
map.set(workspace.id, { name: workspace.name || project.name, projectId: project.id });
|
||||
}
|
||||
}
|
||||
return map;
|
||||
|
|
@ -770,16 +770,21 @@ export function IssuesList({
|
|||
name: string;
|
||||
mode: "shared_workspace" | "isolated_workspace" | "operator_branch" | "adapter_managed" | "cloud_sandbox";
|
||||
projectWorkspaceId: string | null;
|
||||
projectId: string | null;
|
||||
}>();
|
||||
for (const workspace of executionWorkspaces) {
|
||||
const projectWorkspace = workspace.projectWorkspaceId
|
||||
? projectWorkspaceById.get(workspace.projectWorkspaceId) ?? null
|
||||
: null;
|
||||
map.set(workspace.id, {
|
||||
name: workspace.name,
|
||||
mode: workspace.mode,
|
||||
projectWorkspaceId: workspace.projectWorkspaceId ?? null,
|
||||
projectId: projectWorkspace?.projectId ?? null,
|
||||
});
|
||||
}
|
||||
return map;
|
||||
}, [executionWorkspaces]);
|
||||
}, [executionWorkspaces, projectWorkspaceById]);
|
||||
const issueFilterWorkspaceContext = useMemo(() => ({
|
||||
executionWorkspaceById,
|
||||
defaultProjectWorkspaceIdByProjectId,
|
||||
|
|
@ -1179,7 +1184,8 @@ export function IssuesList({
|
|||
};
|
||||
}, [canLoadMoreIssues, hasMoreIssues, hasMoreRenderedRows, loadMoreIssueRows]);
|
||||
|
||||
const newIssueDefaults = useCallback((groupKey?: string) => {
|
||||
const newIssueDefaults = useCallback((group?: { key: string; items: Issue[] }) => {
|
||||
const groupKey = group?.key;
|
||||
const defaults: Record<string, unknown> = { ...(baseCreateIssueDefaults ?? {}) };
|
||||
if (projectId && defaults.projectId === undefined) defaults.projectId = projectId;
|
||||
if (groupKey) {
|
||||
|
|
@ -1190,6 +1196,27 @@ export function IssuesList({
|
|||
else defaults.assigneeAgentId = groupKey;
|
||||
}
|
||||
else if (viewState.groupBy === "project" && groupKey !== "__no_project") defaults.projectId = groupKey;
|
||||
else if (viewState.groupBy === "workspace" && groupKey !== "__no_workspace") {
|
||||
const representativeIssue = group?.items.find((issue) => issue.executionWorkspaceId === groupKey) ?? null;
|
||||
const executionWorkspace = executionWorkspaceById.get(groupKey);
|
||||
if (executionWorkspace) {
|
||||
defaults.executionWorkspaceId = groupKey;
|
||||
defaults.executionWorkspaceMode = "reuse_existing";
|
||||
if (executionWorkspace.projectWorkspaceId) defaults.projectWorkspaceId = executionWorkspace.projectWorkspaceId;
|
||||
const groupedProjectId = executionWorkspace.projectId
|
||||
?? (executionWorkspace.projectWorkspaceId
|
||||
? projectWorkspaceById.get(executionWorkspace.projectWorkspaceId)?.projectId
|
||||
: null)
|
||||
?? (representativeIssue?.executionWorkspaceId === groupKey ? representativeIssue.projectId : null);
|
||||
if (groupedProjectId) defaults.projectId = groupedProjectId;
|
||||
} else {
|
||||
const projectWorkspace = projectWorkspaceById.get(groupKey);
|
||||
if (projectWorkspace) {
|
||||
defaults.projectWorkspaceId = groupKey;
|
||||
defaults.projectId = projectWorkspace.projectId;
|
||||
}
|
||||
}
|
||||
}
|
||||
else if (viewState.groupBy === "parent" && groupKey !== "__no_parent") {
|
||||
const parentIssue = issueById.get(groupKey);
|
||||
if (parentIssue) Object.assign(defaults, buildSubIssueDefaultsForViewer(parentIssue, currentUserId));
|
||||
|
|
@ -1197,12 +1224,20 @@ export function IssuesList({
|
|||
}
|
||||
}
|
||||
return defaults;
|
||||
}, [baseCreateIssueDefaults, currentUserId, issueById, projectId, viewState.groupBy]);
|
||||
}, [
|
||||
baseCreateIssueDefaults,
|
||||
currentUserId,
|
||||
executionWorkspaceById,
|
||||
issueById,
|
||||
projectId,
|
||||
projectWorkspaceById,
|
||||
viewState.groupBy,
|
||||
]);
|
||||
|
||||
const createActionLabel = createIssueLabel ? `Create ${createIssueLabel}` : "Create Issue";
|
||||
const createButtonLabel = createIssueLabel ? `New ${createIssueLabel}` : "New Issue";
|
||||
const openCreateIssueDialog = useCallback((groupKey?: string) => {
|
||||
openNewIssue(newIssueDefaults(groupKey));
|
||||
const openCreateIssueDialog = useCallback((group?: { key: string; items: Issue[] }) => {
|
||||
openNewIssue(newIssueDefaults(group));
|
||||
}, [newIssueDefaults, openNewIssue]);
|
||||
|
||||
const filterToWorkspace = useCallback((workspaceId: string) => {
|
||||
|
|
@ -1453,8 +1488,10 @@ export function IssuesList({
|
|||
<Button
|
||||
variant="ghost"
|
||||
size="icon-xs"
|
||||
className="text-muted-foreground"
|
||||
onClick={() => openCreateIssueDialog(group.key)}
|
||||
className="-mr-2 text-muted-foreground"
|
||||
title={`New issue in ${group.label}`}
|
||||
aria-label={`New issue in ${group.label}`}
|
||||
onClick={() => openCreateIssueDialog(group)}
|
||||
>
|
||||
<Plus className="h-3 w-3" />
|
||||
</Button>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue