ake/paperclip
1
0
Fork 0
mirror of https://github.com/alkimake/paperclip.git synced 2026-06-19 20:10:39 +09:00
Code Issues Projects Releases Packages Wiki Activity

[codex] Split PR #4692 UI/QoL updates (#4701)

Browse source 
## 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>
This commit is contained in:
Dotta 2026-04-28 17:18:58 -05:00 • committed by GitHub
parent 1991ec9d6f
commit 6b7f6ce4b8
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
48 changed files with 3388 additions and 260 deletions
Download patch file Download diff file Expand all files Collapse all files

121
ui/src/components/RoutineVariablesEditor.tsx
View file

@ -1,8 +1,15 @@
import { useEffect, useMemo, useState } from "react";
import { ChevronDown, ChevronRight } from "lucide-react";
import { ChevronDown, ChevronRight, HelpCircle } from "lucide-react";
import { syncRoutineVariablesWithTemplate, type RoutineVariable } from "@paperclipai/shared";
import { Badge } from "@/components/ui/badge";
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
import {
Dialog,
DialogContent,
DialogDescription,
DialogHeader,
DialogTitle,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
@ -65,8 +72,8 @@ export function RoutineVariablesEditor({
}
return (
<Collapsible open={open} onOpenChange={setOpen}>
<CollapsibleTrigger className="flex w-full items-center justify-between rounded-lg border border-border/70 px-3 py-2 text-left">
<Collapsible open={open} onOpenChange={setOpen} className="overflow-hidden rounded-lg border border-border/70">
<CollapsibleTrigger className="flex w-full items-center justify-between px-3 py-2 text-left">
<div>
<p className="text-sm font-medium">Variables</p>
<p className="text-xs text-muted-foreground">
@ -75,9 +82,9 @@ export function RoutineVariablesEditor({
</div>
{open ? <ChevronDown className="h-4 w-4 text-muted-foreground" /> : <ChevronRight className="h-4 w-4 text-muted-foreground" />}
</CollapsibleTrigger>
<CollapsibleContent className="space-y-3 pt-3">
<CollapsibleContent className="divide-y divide-border/70 border-t border-border/70">
{syncedVariables.map((variable) => (
<div key={variable.name} className="rounded-lg border border-border/70 p-4">
<div key={variable.name} className="p-4">
<div className="mb-3 flex flex-wrap items-center gap-2">
<Badge variant="outline" className="font-mono text-xs">
{`{{${variable.name}}}`}
@ -225,10 +232,108 @@ export function RoutineVariablesEditor({
);
}
type BuiltinVariableDoc = {
name: string;
example: string;
description: string;
};
const BUILTIN_VARIABLE_DOCS: BuiltinVariableDoc[] = [
{
name: "date",
example: "2026-04-28",
description: "Current date in YYYY-MM-DD format (UTC) at the time the routine runs.",
},
{
name: "timestamp",
example: "April 28, 2026 at 12:17 PM UTC",
description: "Human-readable date and time (UTC) at the time the routine runs.",
},
];
export function RoutineVariablesHint() {
const [helpOpen, setHelpOpen] = useState(false);
return (
<div className="rounded-lg border border-dashed border-border/70 px-3 py-2 text-xs text-muted-foreground">
Use `{"{{variable_name}}"}` placeholders in the instructions to prompt for inputs when the routine runs.
</div>
<>
<div className="flex items-center justify-between gap-2 rounded-lg border border-dashed border-border/70 px-3 py-2 text-xs text-muted-foreground">
<span>
Use `{"{{variable_name}}"}` placeholders in the instructions to prompt for inputs when the routine runs.
</span>
<button
type="button"
onClick={() => setHelpOpen(true)}
className="shrink-0 rounded-full p-0.5 text-muted-foreground transition-colors hover:bg-accent/50 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
aria-label="Show variable help"
>
<HelpCircle className="h-3.5 w-3.5" />
</button>
</div>
<Dialog open={helpOpen} onOpenChange={setHelpOpen}>
<DialogContent className="sm:max-w-xl">
<DialogHeader>
<DialogTitle>Routine variables</DialogTitle>
<DialogDescription>
How to prompt for inputs and which variables Paperclip fills in automatically.
</DialogDescription>
</DialogHeader>
<div className="space-y-5 text-sm">
<section className="space-y-2">
<h3 className="text-xs font-semibold uppercase tracking-[0.18em] text-muted-foreground">
Custom variables
</h3>
<p className="text-muted-foreground">
Type{" "}
<code className="rounded bg-muted px-1 py-0.5 font-mono text-xs text-foreground">
{"{{variable_name}}"}
</code>{" "}
anywhere in the title or instructions. Paperclip detects each placeholder, lists it
under <span className="font-medium text-foreground">Variables</span>, and prompts
for a value before each run.
</p>
<ul className="list-disc space-y-1 pl-5 text-muted-foreground">
<li>Names must start with a letter and may use letters, numbers, and underscores.</li>
<li>Pick a type (text, textarea, number, boolean, select), default value, and whether it is required.</li>
<li>The same name reused across the title and instructions is treated as one variable.</li>
</ul>
</section>
<section className="space-y-2">
<h3 className="text-xs font-semibold uppercase tracking-[0.18em] text-muted-foreground">
Built-in variables
</h3>
<p className="text-muted-foreground">
These are filled in automatically — no setup needed and they will not appear in the
Variables list.
</p>
<div className="overflow-hidden rounded-lg border border-border/70">
<table className="w-full text-left text-xs">
<thead className="bg-muted/40 text-muted-foreground">
<tr>
<th className="px-3 py-2 font-medium">Placeholder</th>
<th className="px-3 py-2 font-medium">Example</th>
<th className="px-3 py-2 font-medium">Description</th>
</tr>
</thead>
<tbody className="divide-y divide-border/70">
{BUILTIN_VARIABLE_DOCS.map((entry) => (
<tr key={entry.name} className="align-top">
<td className="px-3 py-2">
<Badge variant="outline" className="font-mono text-xs">{`{{${entry.name}}}`}</Badge>
</td>
<td className="px-3 py-2 font-mono text-muted-foreground">{entry.example}</td>
<td className="px-3 py-2 text-muted-foreground">{entry.description}</td>
</tr>
))}
</tbody>
</table>
</div>
</section>
</div>
</DialogContent>
</Dialog>
</>
);
}