mirror of
https://github.com/alkimake/paperclip.git
synced 2026-06-16 10:50:38 +09:00
[codex] improve issue and routine UI responsiveness (#3744)
## Thinking Path > - Paperclip orchestrates AI agents for zero-human companies > - Operators rely on issue, inbox, and routine views to understand what the company is doing in real time > - Those views need to stay fast and readable even when issue lists, markdown comments, and run metadata get large > - The current branch had a coherent set of UI and live-update improvements spread across issue search, issue detail rendering, routine affordances, and workspace lookups > - This pull request groups those board-facing changes into one standalone branch that can merge independently of the heartbeat/runtime work > - The benefit is a faster, clearer issue and routine workflow without changing the underlying task model ## What Changed - Show routine execution issues by default and rename the filter to `Hide routine runs` so the default state no longer looks like an active filter. - Show the routine name in the run dialog and tighten the issue properties pane with a workspace link, copy-on-click behavior, and an inline parent arrow. - Reduce issue detail rerenders, keep queued issue chat mounted, improve issues page search responsiveness, and speed up issues first paint. - Add inbox "other search results", refresh visible issue runs after status updates, and optimize workspace lookups through summary-mode execution workspace queries. - Improve markdown wrapping and scrolling behavior for long strings and self-comment code blocks. - Relax the markdown sanitizer assertion so the test still validates safety after the new wrap-friendly inline styles. ## Verification - `pnpm vitest run ui/src/components/IssuesList.test.tsx ui/src/lib/inbox.test.ts ui/src/pages/Issues.test.tsx ui/src/context/BreadcrumbContext.test.tsx ui/src/context/LiveUpdatesProvider.test.ts ui/src/components/MarkdownBody.test.tsx ui/src/api/execution-workspaces.test.ts server/src/__tests__/execution-workspaces-routes.test.ts` ## Risks - This touches several issue-facing UI surfaces at once, so regressions would most likely show up as stale rendering, search result mismatches, or small markdown presentation differences. - The workspace lookup optimization depends on the summary-mode route shape staying aligned between server and UI. ## Model Used - OpenAI Codex, GPT-5-based coding agent in the Codex CLI environment. Exact backend model deployment ID was not exposed in-session. Tool-assisted editing and shell execution were used. ## 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 run tests locally and they pass - [x] I have added or updated tests where applicable - [ ] 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
7463479fc8
commit
d4c3899ca4
34 changed files with 1035 additions and 241 deletions
|
|
@ -12,6 +12,7 @@ import type {
|
|||
} from "@paperclipai/shared";
|
||||
import {
|
||||
DEFAULT_INBOX_ISSUE_COLUMNS,
|
||||
buildGroupedInboxSections,
|
||||
buildInboxKeyboardNavEntries,
|
||||
buildInboxDismissedAtByKey,
|
||||
computeInboxBadgeData,
|
||||
|
|
@ -718,7 +719,7 @@ describe("inbox helpers", () => {
|
|||
labels: [],
|
||||
projects: [],
|
||||
workspaces: [],
|
||||
showRoutineExecutions: false,
|
||||
hideRoutineExecutions: true,
|
||||
},
|
||||
}).map((issue) => issue.id),
|
||||
).toEqual(["remote-match"]);
|
||||
|
|
@ -736,7 +737,7 @@ describe("inbox helpers", () => {
|
|||
labels: [],
|
||||
projects: [],
|
||||
workspaces: [],
|
||||
showRoutineExecutions: false,
|
||||
hideRoutineExecutions: true,
|
||||
},
|
||||
}),
|
||||
).toEqual([]);
|
||||
|
|
@ -754,12 +755,51 @@ describe("inbox helpers", () => {
|
|||
labels: [],
|
||||
projects: [],
|
||||
workspaces: [],
|
||||
showRoutineExecutions: false,
|
||||
hideRoutineExecutions: true,
|
||||
},
|
||||
}),
|
||||
).toEqual([]);
|
||||
});
|
||||
|
||||
it("keeps inbox search matches ahead of archived and other result sections", () => {
|
||||
const inboxIssue = makeIssue("inbox", false);
|
||||
inboxIssue.lastActivityAt = new Date("2026-03-11T04:00:00.000Z");
|
||||
|
||||
const archivedIssue = makeIssue("archived", false);
|
||||
archivedIssue.lastActivityAt = new Date("2026-03-11T03:00:00.000Z");
|
||||
|
||||
const otherIssue = makeIssue("other", false);
|
||||
otherIssue.lastActivityAt = new Date("2026-03-11T05:00:00.000Z");
|
||||
|
||||
const sections = [
|
||||
...buildGroupedInboxSections(
|
||||
getInboxWorkItems({ issues: [inboxIssue], approvals: [] }),
|
||||
"none",
|
||||
{},
|
||||
),
|
||||
...buildGroupedInboxSections(
|
||||
getInboxWorkItems({ issues: [archivedIssue], approvals: [] }),
|
||||
"none",
|
||||
{},
|
||||
{ keyPrefix: "archived-search:", searchSection: "archived" },
|
||||
),
|
||||
...buildGroupedInboxSections(
|
||||
getInboxWorkItems({ issues: [otherIssue], approvals: [] }),
|
||||
"none",
|
||||
{},
|
||||
{ keyPrefix: "other-search:", searchSection: "other" },
|
||||
),
|
||||
];
|
||||
|
||||
expect(sections.map((section) => section.searchSection)).toEqual(["none", "archived", "other"]);
|
||||
expect(
|
||||
sections.map((section) => {
|
||||
const [item] = section.displayItems;
|
||||
return item?.kind === "issue" ? item.issue.id : null;
|
||||
}),
|
||||
).toEqual(["inbox", "archived", "other"]);
|
||||
});
|
||||
|
||||
it("defaults the remembered inbox tab to mine and persists all", () => {
|
||||
localStorage.clear();
|
||||
expect(loadLastInboxTab()).toBe("mine");
|
||||
|
|
@ -779,7 +819,7 @@ describe("inbox helpers", () => {
|
|||
labels: ["label-1"],
|
||||
projects: ["project-1"],
|
||||
workspaces: ["workspace-1"],
|
||||
showRoutineExecutions: true,
|
||||
hideRoutineExecutions: false,
|
||||
},
|
||||
});
|
||||
saveInboxFilterPreferences("company-2", {
|
||||
|
|
@ -792,7 +832,7 @@ describe("inbox helpers", () => {
|
|||
labels: [],
|
||||
projects: [],
|
||||
workspaces: [],
|
||||
showRoutineExecutions: false,
|
||||
hideRoutineExecutions: true,
|
||||
},
|
||||
});
|
||||
|
||||
|
|
@ -806,7 +846,7 @@ describe("inbox helpers", () => {
|
|||
labels: ["label-1"],
|
||||
projects: ["project-1"],
|
||||
workspaces: ["workspace-1"],
|
||||
showRoutineExecutions: true,
|
||||
hideRoutineExecutions: false,
|
||||
},
|
||||
});
|
||||
expect(loadInboxFilterPreferences("company-2")).toEqual({
|
||||
|
|
@ -819,7 +859,7 @@ describe("inbox helpers", () => {
|
|||
labels: [],
|
||||
projects: [],
|
||||
workspaces: [],
|
||||
showRoutineExecutions: false,
|
||||
hideRoutineExecutions: true,
|
||||
},
|
||||
});
|
||||
});
|
||||
|
|
@ -835,7 +875,7 @@ describe("inbox helpers", () => {
|
|||
labels: null,
|
||||
projects: ["project-1"],
|
||||
workspaces: ["workspace-1", false],
|
||||
showRoutineExecutions: "yes",
|
||||
hideRoutineExecutions: "yes",
|
||||
},
|
||||
}));
|
||||
|
||||
|
|
@ -849,7 +889,7 @@ describe("inbox helpers", () => {
|
|||
labels: [],
|
||||
projects: ["project-1"],
|
||||
workspaces: ["workspace-1"],
|
||||
showRoutineExecutions: false,
|
||||
hideRoutineExecutions: false,
|
||||
},
|
||||
});
|
||||
});
|
||||
|
|
@ -1003,12 +1043,12 @@ describe("inbox helpers", () => {
|
|||
expect(getInboxKeyboardSelectionIndex(0, 3, "previous")).toBe(0);
|
||||
});
|
||||
|
||||
it("hides routine execution issues until the toggle is enabled", () => {
|
||||
it("hides routine execution issues when the hide toggle is enabled", () => {
|
||||
const manualIssue = { ...makeIssue("manual", true), originKind: "manual" as const };
|
||||
const routineIssue = { ...makeIssue("routine", true), originKind: "routine_execution" as const };
|
||||
|
||||
expect(filterInboxIssues([manualIssue, routineIssue], false)).toEqual([manualIssue]);
|
||||
expect(filterInboxIssues([manualIssue, routineIssue], true)).toEqual([manualIssue, routineIssue]);
|
||||
expect(filterInboxIssues([manualIssue, routineIssue], false)).toEqual([manualIssue, routineIssue]);
|
||||
expect(filterInboxIssues([manualIssue, routineIssue], true)).toEqual([manualIssue]);
|
||||
});
|
||||
|
||||
it("groups mixed inbox items by type while preserving item order within each group", () => {
|
||||
|
|
|
|||
|
|
@ -87,6 +87,16 @@ export interface InboxWorkItemGroup {
|
|||
items: InboxWorkItem[];
|
||||
}
|
||||
|
||||
export type InboxSearchSection = "none" | "archived" | "other";
|
||||
|
||||
export interface InboxGroupedSection {
|
||||
key: string;
|
||||
label: string | null;
|
||||
displayItems: InboxWorkItem[];
|
||||
childrenByIssueId: Map<string, Issue[]>;
|
||||
searchSection: InboxSearchSection;
|
||||
}
|
||||
|
||||
export interface InboxKeyboardGroupSection {
|
||||
key: string;
|
||||
displayItems: InboxWorkItem[];
|
||||
|
|
@ -142,7 +152,7 @@ function normalizeIssueFilterState(value: unknown): IssueFilterState {
|
|||
labels: normalizeStringArray(candidate.labels),
|
||||
projects: normalizeStringArray(candidate.projects),
|
||||
workspaces: normalizeStringArray(candidate.workspaces),
|
||||
showRoutineExecutions: candidate.showRoutineExecutions === true,
|
||||
hideRoutineExecutions: candidate.hideRoutineExecutions === true,
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -367,14 +377,14 @@ export function shouldResetInboxWorkspaceGrouping(
|
|||
|
||||
export function shouldIncludeRoutineExecutionIssue(
|
||||
issue: Pick<Issue, "originKind">,
|
||||
showRoutineExecutions: boolean,
|
||||
hideRoutineExecutions: boolean,
|
||||
): boolean {
|
||||
return showRoutineExecutions || issue.originKind !== "routine_execution";
|
||||
return !hideRoutineExecutions || issue.originKind !== "routine_execution";
|
||||
}
|
||||
|
||||
export function filterInboxIssues(issues: Issue[], showRoutineExecutions: boolean): Issue[] {
|
||||
if (showRoutineExecutions) return issues;
|
||||
return issues.filter((issue) => shouldIncludeRoutineExecutionIssue(issue, showRoutineExecutions));
|
||||
export function filterInboxIssues(issues: Issue[], hideRoutineExecutions: boolean): Issue[] {
|
||||
if (!hideRoutineExecutions) return issues;
|
||||
return issues.filter((issue) => shouldIncludeRoutineExecutionIssue(issue, hideRoutineExecutions));
|
||||
}
|
||||
|
||||
export function matchesInboxIssueSearch(
|
||||
|
|
@ -916,6 +926,31 @@ export function buildInboxNesting(items: InboxWorkItem[]): {
|
|||
return { displayItems, childrenByIssueId };
|
||||
}
|
||||
|
||||
export function buildGroupedInboxSections(
|
||||
items: InboxWorkItem[],
|
||||
groupBy: InboxWorkItemGroupBy,
|
||||
workspaceGrouping: InboxWorkspaceGroupingOptions,
|
||||
options?: { keyPrefix?: string; searchSection?: InboxSearchSection; nestingEnabled?: boolean },
|
||||
): InboxGroupedSection[] {
|
||||
const keyPrefix = options?.keyPrefix ?? "";
|
||||
const searchSection = options?.searchSection ?? "none";
|
||||
const nestingEnabled = options?.nestingEnabled ?? false;
|
||||
|
||||
return groupInboxWorkItems(items, groupBy, workspaceGrouping).map((group) => {
|
||||
const nestedGroup = nestingEnabled && group.items.some((item) => item.kind === "issue")
|
||||
? buildInboxNesting(group.items)
|
||||
: { displayItems: group.items, childrenByIssueId: new Map<string, Issue[]>() };
|
||||
|
||||
return {
|
||||
key: `${keyPrefix}${group.key}`,
|
||||
label: group.label,
|
||||
displayItems: nestedGroup.displayItems,
|
||||
childrenByIssueId: nestedGroup.childrenByIssueId,
|
||||
searchSection,
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
export function getInboxWorkItemKey(item: InboxWorkItem): string {
|
||||
if (item.kind === "issue") return `issue:${item.issue.id}`;
|
||||
if (item.kind === "approval") return `approval:${item.approval.id}`;
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ export type IssueFilterState = {
|
|||
labels: string[];
|
||||
projects: string[];
|
||||
workspaces: string[];
|
||||
showRoutineExecutions: boolean;
|
||||
hideRoutineExecutions: boolean;
|
||||
};
|
||||
|
||||
export const defaultIssueFilterState: IssueFilterState = {
|
||||
|
|
@ -17,7 +17,7 @@ export const defaultIssueFilterState: IssueFilterState = {
|
|||
labels: [],
|
||||
projects: [],
|
||||
workspaces: [],
|
||||
showRoutineExecutions: false,
|
||||
hideRoutineExecutions: false,
|
||||
};
|
||||
|
||||
export const issueStatusOrder = ["in_progress", "todo", "backlog", "in_review", "blocked", "done", "cancelled"];
|
||||
|
|
@ -58,7 +58,7 @@ export function applyIssueFilters(
|
|||
enableRoutineVisibilityFilter = false,
|
||||
): Issue[] {
|
||||
let result = issues;
|
||||
if (enableRoutineVisibilityFilter && !state.showRoutineExecutions) {
|
||||
if (enableRoutineVisibilityFilter && state.hideRoutineExecutions) {
|
||||
result = result.filter((issue) => issue.originKind !== "routine_execution");
|
||||
}
|
||||
if (state.statuses.length > 0) result = result.filter((issue) => state.statuses.includes(issue.status));
|
||||
|
|
@ -99,6 +99,6 @@ export function countActiveIssueFilters(
|
|||
if (state.labels.length > 0) count += 1;
|
||||
if (state.projects.length > 0) count += 1;
|
||||
if (state.workspaces.length > 0) count += 1;
|
||||
if (enableRoutineVisibilityFilter && state.showRoutineExecutions) count += 1;
|
||||
if (enableRoutineVisibilityFilter && state.hideRoutineExecutions) count += 1;
|
||||
return count;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -65,6 +65,8 @@ export const queryKeys = {
|
|||
executionWorkspaces: {
|
||||
list: (companyId: string, filters?: Record<string, string | boolean | undefined>) =>
|
||||
["execution-workspaces", companyId, filters ?? {}] as const,
|
||||
summaryList: (companyId: string, filters?: Record<string, string | boolean | undefined>) =>
|
||||
["execution-workspaces", companyId, "summary", filters ?? {}] as const,
|
||||
detail: (id: string) => ["execution-workspaces", "detail", id] as const,
|
||||
closeReadiness: (id: string) => ["execution-workspaces", "close-readiness", id] as const,
|
||||
workspaceOperations: (id: string) => ["execution-workspaces", "workspace-operations", id] as const,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue