mirror of
https://github.com/alkimake/paperclip.git
synced 2026-06-14 10:00:38 +09:00
## Thinking Path > - Paperclip orchestrates AI agents through a company-scoped control plane. > - The affected surface is the board UI for issue threads, issue lists, routines, dialogs, navigation, and issue review indicators. > - Closed PR #4692 bundled backend, schema, docs, workflow, and UI/QoL work into one oversized change set. > - Greptile could not keep reviewing that broad PR because it exceeded the 100-file review limit and mixed unrelated concerns. > - This pull request extracts the UI/QoL slice into a fresh branch under the review limit while leaving workflow and lockfile churn out. > - The benefit is a focused review path for the board UI performance and workflow improvements without reopening the oversized PR. ## What Changed - Added long issue-thread virtualization, scroll-container binding, anchor preservation, latest-comment jump targeting, and related regression/perf fixtures. - Improved issue list scalability with scroll-based loading, server offset parameters, and pagination-focused UI tests. - Reduced new issue dialog typing churn and split dialog action subscriptions so broad layout/nav surfaces avoid unnecessary renders. - Added routine variables help and routine description mention options for users, agents, and projects. - Added productivity review badge/link UI and fixed the badge to use Paperclip's company-prefixed router link. - Kept the split PR below Greptile's review limit and excluded `.github/workflows/pr.yml` and `pnpm-lock.yaml`. ## Verification - `pnpm install --no-frozen-lockfile` in the clean worktree to install `@tanstack/react-virtual` locally without committing lockfile churn. - `pnpm --filter @paperclipai/ui exec vitest run --config vitest.config.ts src/components/IssueChatThread.test.tsx src/components/IssuesList.test.tsx src/components/NewIssueDialog.test.tsx src/pages/Routines.test.tsx src/pages/Issues.test.tsx` passed: 5 files, 83 tests. - `pnpm --filter @paperclipai/ui typecheck` passed. - `git diff --check origin/master..HEAD` passed. - Split-scope checks: 53 changed files; no `.github/workflows/pr.yml`; no `pnpm-lock.yaml`. - Screenshots were not captured in this heartbeat; the changes are primarily virtualization, routing, pagination, and editor behavior covered by focused regression tests. ## Risks - Moderate UI risk because issue-thread virtualization changes scroll behavior on long conversations; regression tests cover anchor jumps, latest-comment targeting, row metadata, and short-thread fallback. - Moderate integration risk because the issue-list offset parameter and productivity review field depend on matching API behavior. - Dependency risk: the UI package adds `@tanstack/react-virtual` while repository policy keeps `pnpm-lock.yaml` out of PRs, so CI must resolve dependency changes through the repo's normal lockfile policy. > 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, GPT-5 coding agent, tool-enabled local repository and GitHub workflow. Exact runtime context window was not exposed by the harness. ## 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 - [ ] 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>
204 lines
5 KiB
TypeScript
204 lines
5 KiB
TypeScript
import { createContext, useCallback, useContext, useMemo, useState, type ReactNode } from "react";
|
|
|
|
interface NewIssueDefaults {
|
|
status?: string;
|
|
priority?: string;
|
|
projectId?: string;
|
|
projectWorkspaceId?: string;
|
|
goalId?: string;
|
|
parentId?: string;
|
|
parentIdentifier?: string;
|
|
parentTitle?: string;
|
|
executionWorkspaceId?: string;
|
|
executionWorkspaceMode?: string;
|
|
parentExecutionWorkspaceLabel?: string;
|
|
assigneeAgentId?: string;
|
|
assigneeUserId?: string;
|
|
title?: string;
|
|
description?: string;
|
|
}
|
|
|
|
interface NewGoalDefaults {
|
|
parentId?: string;
|
|
}
|
|
|
|
interface OnboardingOptions {
|
|
initialStep?: 1 | 2 | 3 | 4;
|
|
companyId?: string;
|
|
}
|
|
|
|
interface DialogContextValue {
|
|
newIssueOpen: boolean;
|
|
newIssueDefaults: NewIssueDefaults;
|
|
openNewIssue: (defaults?: NewIssueDefaults) => void;
|
|
closeNewIssue: () => void;
|
|
newProjectOpen: boolean;
|
|
openNewProject: () => void;
|
|
closeNewProject: () => void;
|
|
newGoalOpen: boolean;
|
|
newGoalDefaults: NewGoalDefaults;
|
|
openNewGoal: (defaults?: NewGoalDefaults) => void;
|
|
closeNewGoal: () => void;
|
|
newAgentOpen: boolean;
|
|
openNewAgent: () => void;
|
|
closeNewAgent: () => void;
|
|
onboardingOpen: boolean;
|
|
onboardingOptions: OnboardingOptions;
|
|
openOnboarding: (options?: OnboardingOptions) => void;
|
|
closeOnboarding: () => void;
|
|
}
|
|
|
|
type DialogStateValue = Pick<
|
|
DialogContextValue,
|
|
| "newIssueOpen"
|
|
| "newIssueDefaults"
|
|
| "newProjectOpen"
|
|
| "newGoalOpen"
|
|
| "newGoalDefaults"
|
|
| "newAgentOpen"
|
|
| "onboardingOpen"
|
|
| "onboardingOptions"
|
|
>;
|
|
|
|
type DialogActionsValue = Omit<DialogContextValue, keyof DialogStateValue>;
|
|
|
|
const DialogStateContext = createContext<DialogStateValue | null>(null);
|
|
const DialogActionsContext = createContext<DialogActionsValue | null>(null);
|
|
|
|
export function DialogProvider({ children }: { children: ReactNode }) {
|
|
const [newIssueOpen, setNewIssueOpen] = useState(false);
|
|
const [newIssueDefaults, setNewIssueDefaults] = useState<NewIssueDefaults>({});
|
|
const [newProjectOpen, setNewProjectOpen] = useState(false);
|
|
const [newGoalOpen, setNewGoalOpen] = useState(false);
|
|
const [newGoalDefaults, setNewGoalDefaults] = useState<NewGoalDefaults>({});
|
|
const [newAgentOpen, setNewAgentOpen] = useState(false);
|
|
const [onboardingOpen, setOnboardingOpen] = useState(false);
|
|
const [onboardingOptions, setOnboardingOptions] = useState<OnboardingOptions>({});
|
|
|
|
const openNewIssue = useCallback((defaults: NewIssueDefaults = {}) => {
|
|
setNewIssueDefaults(defaults);
|
|
setNewIssueOpen(true);
|
|
}, []);
|
|
|
|
const closeNewIssue = useCallback(() => {
|
|
setNewIssueOpen(false);
|
|
setNewIssueDefaults({});
|
|
}, []);
|
|
|
|
const openNewProject = useCallback(() => {
|
|
setNewProjectOpen(true);
|
|
}, []);
|
|
|
|
const closeNewProject = useCallback(() => {
|
|
setNewProjectOpen(false);
|
|
}, []);
|
|
|
|
const openNewGoal = useCallback((defaults: NewGoalDefaults = {}) => {
|
|
setNewGoalDefaults(defaults);
|
|
setNewGoalOpen(true);
|
|
}, []);
|
|
|
|
const closeNewGoal = useCallback(() => {
|
|
setNewGoalOpen(false);
|
|
setNewGoalDefaults({});
|
|
}, []);
|
|
|
|
const openNewAgent = useCallback(() => {
|
|
setNewAgentOpen(true);
|
|
}, []);
|
|
|
|
const closeNewAgent = useCallback(() => {
|
|
setNewAgentOpen(false);
|
|
}, []);
|
|
|
|
const openOnboarding = useCallback((options: OnboardingOptions = {}) => {
|
|
setOnboardingOptions(options);
|
|
setOnboardingOpen(true);
|
|
}, []);
|
|
|
|
const closeOnboarding = useCallback(() => {
|
|
setOnboardingOpen(false);
|
|
setOnboardingOptions({});
|
|
}, []);
|
|
|
|
const stateValue = useMemo<DialogStateValue>(
|
|
() => ({
|
|
newIssueOpen,
|
|
newIssueDefaults,
|
|
newProjectOpen,
|
|
newGoalOpen,
|
|
newGoalDefaults,
|
|
newAgentOpen,
|
|
onboardingOpen,
|
|
onboardingOptions,
|
|
}),
|
|
[
|
|
newIssueOpen,
|
|
newIssueDefaults,
|
|
newProjectOpen,
|
|
newGoalOpen,
|
|
newGoalDefaults,
|
|
newAgentOpen,
|
|
onboardingOpen,
|
|
onboardingOptions,
|
|
],
|
|
);
|
|
|
|
const actionsValue = useMemo<DialogActionsValue>(
|
|
() => ({
|
|
openNewIssue,
|
|
closeNewIssue,
|
|
openNewProject,
|
|
closeNewProject,
|
|
openNewGoal,
|
|
closeNewGoal,
|
|
openNewAgent,
|
|
closeNewAgent,
|
|
openOnboarding,
|
|
closeOnboarding,
|
|
}),
|
|
[
|
|
openNewIssue,
|
|
closeNewIssue,
|
|
openNewProject,
|
|
closeNewProject,
|
|
openNewGoal,
|
|
closeNewGoal,
|
|
openNewAgent,
|
|
closeNewAgent,
|
|
openOnboarding,
|
|
closeOnboarding,
|
|
],
|
|
);
|
|
|
|
return (
|
|
<DialogActionsContext.Provider value={actionsValue}>
|
|
<DialogStateContext.Provider value={stateValue}>
|
|
{children}
|
|
</DialogStateContext.Provider>
|
|
</DialogActionsContext.Provider>
|
|
);
|
|
}
|
|
|
|
export function useDialogActions() {
|
|
const ctx = useContext(DialogActionsContext);
|
|
if (!ctx) {
|
|
throw new Error("useDialogActions must be used within DialogProvider");
|
|
}
|
|
return ctx;
|
|
}
|
|
|
|
export function useDialogState() {
|
|
const ctx = useContext(DialogStateContext);
|
|
if (!ctx) {
|
|
throw new Error("useDialogState must be used within DialogProvider");
|
|
}
|
|
return ctx;
|
|
}
|
|
|
|
export function useDialog() {
|
|
return {
|
|
...useDialogState(),
|
|
...useDialogActions(),
|
|
};
|
|
}
|