eliott/paperclip
1
0
Fork 0
mirror of https://github.com/paperclipai/paperclip synced 2026-04-25 17:25:15 +02:00
Code Issues Packages Projects Releases Wiki Activity

Add first-class issue references (#4214)

Browse Source 
## Thinking Path

> - Paperclip orchestrates AI agents for zero-human companies.
> - Operators and agents coordinate through company-scoped issues,
comments, documents, and task relationships.
> - Issue text can mention other tickets, but those references were
previously plain markdown/text without durable relationship data.
> - That made it harder to understand related work, surface backlinks,
and keep cross-ticket context visible in the board.
> - This pull request adds first-class issue reference extraction,
storage, API responses, and UI surfaces.
> - The benefit is that issue references become queryable, navigable,
and visible without relying on ad hoc text scanning.

## What Changed

- Added shared issue-reference parsing utilities and exported
reference-related types/constants.
- Added an `issue_reference_mentions` table, idempotent migration DDL,
schema exports, and database documentation.
- Added server-side issue reference services, route integration,
activity summaries, and a backfill command for existing issue content.
- Added UI reference pills, related-work panels, markdown/editor mention
handling, and issue detail/property rendering updates.
- Added focused shared, server, and UI tests for parsing, persistence,
display, and related-work behavior.
- Rebased `PAP-735-first-class-task-references` cleanly onto
`public-gh/master`; no `pnpm-lock.yaml` changes are included.

## Verification

- `pnpm -r typecheck`
- `pnpm test:run packages/shared/src/issue-references.test.ts
server/src/__tests__/issue-references-service.test.ts
ui/src/components/IssueRelatedWorkPanel.test.tsx
ui/src/components/IssueProperties.test.tsx
ui/src/components/MarkdownBody.test.tsx`

## Risks

- Medium risk because this adds a new issue-reference persistence path
that touches shared parsing, database schema, server routes, and UI
rendering.
- Migration risk is mitigated by `CREATE TABLE IF NOT EXISTS`, guarded
foreign-key creation, and `CREATE INDEX IF NOT EXISTS` statements so
users who have applied an older local version of the numbered migration
can re-run safely.
- UI risk is limited by focused component coverage, but reviewers should
still manually inspect issue detail pages containing ticket references
before merge.

> 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-based coding agent, tool-using shell workflow with
repository inspection, git rebase/push, typecheck, and focused Vitest
verification.

## 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: dotta <dotta@example.com>
Co-authored-by: Paperclip <noreply@paperclip.ing>
This commit is contained in:
Dotta
2026-04-21 10:02:52 -05:00
committed by GitHub
parent 1954eb3048
commit ab9051b595
49 changed files with 16100 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
ui/src/components/ActivityRow.tsx
View File

@@ -1,5 +1,6 @@
import { Link } from "@/lib/router";
import { Identity } from "./Identity";
import { IssueReferenceActivitySummary } from "./IssueReferenceActivitySummary";
import { timeAgo } from "../lib/timeAgo";
import { cn } from "../lib/utils";
import { formatActivityVerb } from "../lib/activity-format";
@@ -50,19 +51,22 @@ export function ActivityRow({ event, agentMap, userProfileMap, entityNameMap, en
const actorAvatarUrl = userProfile?.image ?? null;
const inner = (
<div className="flex gap-3">
<p className="flex-1 min-w-0 truncate">
<Identity
name={actorName}
avatarUrl={actorAvatarUrl}
size="xs"
className="align-baseline"
/>
<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="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-baseline"
/>
<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>
<IssueReferenceActivitySummary event={event} />
</div>
);

121
ui/src/components/IssueProperties.test.tsx
View File

@@ -416,6 +416,126 @@ describe("IssueProperties", () => {
act(() => root.unmount());
});
it("shows related task references below sub-issues", async () => {
const root = renderProperties(container, {
issue: createIssue({
relatedWork: {
outbound: [
{
issue: {
id: "issue-22",
identifier: "PAP-22",
title: "Related task",
status: "todo",
priority: "medium",
assigneeAgentId: null,
assigneeUserId: null,
},
mentionCount: 1,
sources: [{ kind: "description", sourceRecordId: null, label: "description", matchedText: "PAP-22" }],
},
],
inbound: [],
},
}),
childIssues: [],
onUpdate: vi.fn(),
});
await flush();
expect(container.textContent).not.toContain("Task ids");
expect(container.textContent).toContain("Related Tasks");
expect(container.textContent).toContain("PAP-22");
act(() => root.unmount());
});
it("hides related task references already covered by blockers, blocking, and sub-issues", async () => {
const root = renderProperties(container, {
issue: createIssue({
blockedBy: [
{
id: "issue-22",
identifier: "PAP-22",
title: "Blocker",
status: "todo",
priority: "medium",
assigneeAgentId: null,
assigneeUserId: null,
},
],
blocks: [
{
id: "issue-33",
identifier: "PAP-33",
title: "Blocked issue",
status: "todo",
priority: "medium",
assigneeAgentId: null,
assigneeUserId: null,
},
],
relatedWork: {
outbound: [
{
issue: {
id: "issue-22",
identifier: "PAP-22",
title: "Blocker",
status: "todo",
priority: "medium",
assigneeAgentId: null,
assigneeUserId: null,
},
mentionCount: 1,
sources: [{ kind: "description", sourceRecordId: null, label: "description", matchedText: "PAP-22" }],
},
{
issue: {
id: "issue-33",
identifier: "PAP-33",
title: "Blocked issue",
status: "todo",
priority: "medium",
assigneeAgentId: null,
assigneeUserId: null,
},
mentionCount: 1,
sources: [{ kind: "description", sourceRecordId: null, label: "description", matchedText: "PAP-33" }],
},
{
issue: {
id: "child-44",
identifier: "PAP-44",
title: "Child issue",
status: "todo",
priority: "medium",
assigneeAgentId: null,
assigneeUserId: null,
},
mentionCount: 1,
sources: [{ kind: "description", sourceRecordId: null, label: "description", matchedText: "PAP-44" }],
},
],
inbound: [],
},
}),
childIssues: [
createIssue({
id: "child-44",
identifier: "PAP-44",
title: "Child issue",
}),
],
onUpdate: vi.fn(),
});
await flush();
expect(container.textContent).not.toContain("Related Tasks");
act(() => root.unmount());
});
it("shows an add-label button when labels already exist and opens the picker", async () => {
const root = renderProperties(container, {
issue: createIssue({
@@ -531,7 +651,6 @@ describe("IssueProperties", () => {
act(() => rerenderedRoot.unmount());
});
it("shows a run review action after reviewers are configured and starts execution explicitly when clicked", async () => {
const onUpdate = vi.fn();
const root = renderProperties(container, {

37
ui/src/components/IssueProperties.tsx
View File

@@ -26,6 +26,7 @@ import { buildExecutionPolicy, stageParticipantValues } from "../lib/issue-execu
import { StatusIcon } from "./StatusIcon";
import { PriorityIcon } from "./PriorityIcon";
import { Identity } from "./Identity";
import { IssueReferencePill } from "./IssueReferencePill";
import { formatDate, cn, projectUrl } from "../lib/utils";
import { timeAgo } from "../lib/timeAgo";
import { Separator } from "@/components/ui/separator";
@@ -295,6 +296,30 @@ export function IssueProperties({
if (isMainIssueWorkspace({ issue, project: issueProject })) return null;
return runningRuntimeServiceWithUrl(issue.currentExecutionWorkspace?.runtimeServices);
}, [issue, issueProject]);
const referencedIssueIdentifiers = issue.referencedIssueIdentifiers ?? [];
const relatedTasks = useMemo(() => {
const excluded = new Set<string>();
const addExcluded = (candidate: { id: string; identifier?: string | null }) => {
excluded.add(candidate.id);
if (candidate.identifier) excluded.add(candidate.identifier);
};
for (const blocker of issue.blockedBy ?? []) addExcluded(blocker);
for (const blocked of issue.blocks ?? []) addExcluded(blocked);
for (const child of childIssues) addExcluded(child);
const referencedIssues = issue.relatedWork?.outbound.map((item) => item.issue) ?? [];
if (referencedIssues.length > 0) {
return referencedIssues.filter((referenced) => {
const label = referenced.identifier ?? referenced.id;
return !excluded.has(referenced.id) && !excluded.has(label);
});
}
return referencedIssueIdentifiers
.filter((identifier) => !excluded.has(identifier))
.map((identifier) => ({ id: identifier, identifier, title: identifier }));
}, [childIssues, issue.blockedBy, issue.blocks, issue.relatedWork?.outbound, referencedIssueIdentifiers]);
const projectLink = (id: string | null) => {
if (!id) return null;
const project = projects?.find((p) => p.id === id) ?? null;
@@ -1113,12 +1138,22 @@ export function IssueProperties({
onClick={onAddSubIssue}
>
<Plus className="h-3 w-3" />
Add sub-issue
Add sub-issue
</button>
) : null}
</div>
</PropertyRow>
{relatedTasks.length > 0 ? (
<PropertyRow label="Related Tasks">
<div className="flex flex-wrap gap-1">
{relatedTasks.map((related) => (
<IssueReferencePill key={related.id} issue={related} />
))}
</div>
</PropertyRow>
) : null}
<PropertyPicker
inline={inline}
label="Reviewers"

73
ui/src/components/IssueReferenceActivitySummary.tsx Normal file
View File

@@ -0,0 +1,73 @@
import type { ActivityEvent } from "@paperclipai/shared";
import { Plus, Minus } from "lucide-react";
import { IssueReferencePill } from "./IssueReferencePill";
type ActivityIssueReference = {
id: string;
identifier?: string | null;
title?: string | null;
};
function readIssueReferences(details: Record<string, unknown> | null | undefined, key: string): ActivityIssueReference[] {
const value = details?.[key];
if (!Array.isArray(value)) return [];
return value.filter((item): item is ActivityIssueReference => !!item && typeof item === "object");
}
function Section({
label,
icon,
items,
strikethrough,
}: {
label: string;
icon: React.ReactNode;
items: ActivityIssueReference[];
strikethrough?: boolean;
}) {
if (items.length === 0) return null;
return (
<div className="flex flex-wrap items-center gap-1.5">
<span
aria-label={label}
className="inline-flex items-center gap-1 text-xs text-muted-foreground"
>
{icon}
<span className="sr-only">{label}</span>
</span>
{items.map((issue) => (
<IssueReferencePill
key={`${label}:${issue.id}`}
strikethrough={strikethrough}
issue={{
id: issue.id,
identifier: issue.identifier ?? null,
title: issue.title ?? issue.identifier ?? issue.id,
}}
/>
))}
</div>
);
}
export function IssueReferenceActivitySummary({ event }: { event: Pick<ActivityEvent, "details"> }) {
const added = readIssueReferences(event.details, "addedReferencedIssues");
const removed = readIssueReferences(event.details, "removedReferencedIssues");
if (added.length === 0 && removed.length === 0) return null;
return (
<div className="mt-2 space-y-1">
<Section
label="Added references"
icon={<Plus className="h-3 w-3 text-green-600 dark:text-green-400" aria-hidden="true" />}
items={added}
/>
<Section
label="Removed references"
icon={<Minus className="h-3 w-3 text-red-600 dark:text-red-400" aria-hidden="true" />}
items={removed}
strikethrough
/>
</div>
);
}

55
ui/src/components/IssueReferencePill.tsx Normal file
View File

@@ -0,0 +1,55 @@
import type { IssueRelationIssueSummary } from "@paperclipai/shared";
import { Link } from "@/lib/router";
import { cn } from "../lib/utils";
import { StatusIcon } from "./StatusIcon";
export function IssueReferencePill({
issue,
strikethrough,
className,
}: {
issue: Pick<IssueRelationIssueSummary, "id" | "identifier" | "title"> &
Partial<Pick<IssueRelationIssueSummary, "status">>;
strikethrough?: boolean;
className?: string;
}) {
const issueLabel = issue.identifier ?? issue.title;
const classNames = cn(
"paperclip-mention-chip paperclip-mention-chip--issue",
"inline-flex items-center gap-1 rounded-full border border-border px-2 py-0.5 text-xs no-underline",
issue.identifier && "hover:bg-accent/50 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring",
strikethrough && "opacity-60 line-through decoration-muted-foreground",
className,
);
const content = (
<>
{issue.status ? <StatusIcon status={issue.status} className="h-3 w-3 shrink-0" /> : null}
<span>{issue.identifier ?? issue.title}</span>
</>
);
if (!issue.identifier) {
return (
<span
data-mention-kind="issue"
className={classNames}
title={issue.title}
aria-label={`Issue: ${issue.title}`}
>
{content}
</span>
);
}
return (
<Link
to={`/issues/${issueLabel}`}
data-mention-kind="issue"
className={classNames}
title={issue.title}
aria-label={`Issue ${issueLabel}: ${issue.title}`}
>
{content}
</Link>
);
}

96
ui/src/components/IssueRelatedWorkPanel.test.tsx Normal file
View File

@@ -0,0 +1,96 @@
import type { ComponentProps } from "react";
import { renderToStaticMarkup } from "react-dom/server";
import { describe, expect, it, vi } from "vitest";
import { IssueRelatedWorkPanel } from "./IssueRelatedWorkPanel";
vi.mock("@/lib/router", () => ({
Link: ({ children, to, ...props }: ComponentProps<"a"> & { to: string }) => <a href={to} {...props}>{children}</a>,
}));
describe("IssueRelatedWorkPanel", () => {
it("renders outbound and inbound related work with source labels", () => {
const html = renderToStaticMarkup(
<IssueRelatedWorkPanel
relatedWork={{
outbound: [
{
issue: {
id: "issue-2",
identifier: "PAP-22",
title: "Downstream task",
status: "todo",
priority: "medium",
assigneeAgentId: null,
assigneeUserId: null,
},
mentionCount: 2,
sources: [
{ kind: "title", sourceRecordId: null, label: "title", matchedText: "PAP-22" },
{ kind: "document", sourceRecordId: "doc-1", label: "plan", matchedText: "/issues/PAP-22" },
],
},
],
inbound: [
{
issue: {
id: "issue-3",
identifier: "PAP-33",
title: "Upstream task",
status: "in_progress",
priority: "high",
assigneeAgentId: null,
assigneeUserId: null,
},
mentionCount: 1,
sources: [
{ kind: "comment", sourceRecordId: "comment-1", label: "comment", matchedText: "PAP-1" },
],
},
],
}}
/>,
);
expect(html).toContain("References");
expect(html).toContain("Referenced by");
expect(html).toContain("PAP-22");
expect(html).toContain("PAP-33");
expect(html).toContain('aria-label="Issue PAP-22: Downstream task"');
expect(html).toContain('aria-label="Issue PAP-33: Upstream task"');
expect(html).toContain("plan");
expect(html).toContain("comment");
});
it("collapses duplicate source labels into a single chip with a count", () => {
const html = renderToStaticMarkup(
<IssueRelatedWorkPanel
relatedWork={{
outbound: [],
inbound: [
{
issue: {
id: "issue-4",
identifier: "PAP-44",
title: "Chatty inbound",
status: "in_progress",
priority: "medium",
assigneeAgentId: null,
assigneeUserId: null,
},
mentionCount: 3,
sources: [
{ kind: "comment", sourceRecordId: "c1", label: "comment", matchedText: "PAP-44 first" },
{ kind: "comment", sourceRecordId: "c2", label: "comment", matchedText: "PAP-44 second" },
{ kind: "comment", sourceRecordId: "c3", label: "comment", matchedText: "PAP-44 third" },
],
},
],
}}
/>,
);
const commentMatches = html.match(/>comment</g) ?? [];
expect(commentMatches).toHaveLength(1);
expect(html).toContain("×3");
});
});

110
ui/src/components/IssueRelatedWorkPanel.tsx Normal file
View File

@@ -0,0 +1,110 @@
import type { IssueRelatedWorkItem, IssueRelatedWorkSummary } from "@paperclipai/shared";
import { IssueReferencePill } from "./IssueReferencePill";
type GroupedSource = {
label: string;
count: number;
sampleMatchedText: string | null;
};
function groupSourcesByLabel(sources: IssueRelatedWorkItem["sources"]): GroupedSource[] {
const groups = new Map<string, GroupedSource>();
for (const source of sources) {
const existing = groups.get(source.label);
if (existing) {
existing.count += 1;
} else {
groups.set(source.label, {
label: source.label,
count: 1,
sampleMatchedText: source.matchedText ?? null,
});
}
}
return Array.from(groups.values());
}
function Section({
title,
description,
items,
emptyLabel,
}: {
title: string;
description: string;
items: IssueRelatedWorkItem[];
emptyLabel: string;
}) {
return (
<section className="space-y-3 rounded-lg border border-border p-3">
<div className="space-y-1">
<h3 className="text-sm font-semibold">{title}</h3>
<p className="text-xs text-muted-foreground">{description}</p>
</div>
{items.length === 0 ? (
<p className="text-xs text-muted-foreground">{emptyLabel}</p>
) : (
<ul className="-mx-1 flex flex-col">
{items.map((item) => {
const groupedSources = groupSourcesByLabel(item.sources);
const showTitle = item.issue.identifier !== item.issue.title;
return (
<li
key={item.issue.id}
className="flex flex-wrap items-center gap-x-2 gap-y-1.5 rounded-md px-1 py-1.5 hover:bg-accent/40"
>
<IssueReferencePill issue={item.issue} />
{showTitle ? (
<span className="min-w-0 flex-1 truncate text-sm text-muted-foreground">
{item.issue.title}
</span>
) : null}
<div className="flex flex-wrap items-center gap-1.5">
{groupedSources.map((group) => (
<span
key={`${item.issue.id}:${group.label}`}
className="inline-flex items-center gap-1 rounded-full border border-border bg-muted/40 px-2 py-0.5 text-xs text-muted-foreground"
title={group.sampleMatchedText ?? undefined}
>
<span>{group.label}</span>
{group.count > 1 ? (
<span className="tabular-nums text-[10px] font-medium opacity-80">×{group.count}</span>
) : null}
</span>
))}
</div>
</li>
);
})}
</ul>
)}
</section>
);
}
export function IssueRelatedWorkPanel({
relatedWork,
}: {
relatedWork?: IssueRelatedWorkSummary | null;
}) {
const outbound = relatedWork?.outbound ?? [];
const inbound = relatedWork?.inbound ?? [];
return (
<div className="space-y-3">
<Section
title="References"
description="Other tasks this issue currently points at in its title, description, comments, or documents."
items={outbound}
emptyLabel="This issue does not reference any other tasks yet."
/>
<Section
title="Referenced by"
description="Other tasks that currently point at this issue."
items={inbound}
emptyLabel="No other tasks reference this issue yet."
/>
</div>
);
}

29
ui/src/components/MarkdownBody.test.tsx
View File

@@ -4,7 +4,13 @@ import type { ReactNode } from "react";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { describe, expect, it, vi } from "vitest";
import { renderToStaticMarkup } from "react-dom/server";
import { buildAgentMentionHref, buildProjectMentionHref, buildSkillMentionHref, buildUserMentionHref } from "@paperclipai/shared";
import {
buildAgentMentionHref,
buildIssueReferenceHref,
buildProjectMentionHref,
buildSkillMentionHref,
buildUserMentionHref,
} from "@paperclipai/shared";
import { ThemeProvider } from "../context/ThemeContext";
import { MarkdownBody } from "./MarkdownBody";
import { queryKeys } from "../lib/queryKeys";
@@ -14,7 +20,13 @@ const mockIssuesApi = vi.hoisted(() => ({
}));
vi.mock("@/lib/router", () => ({
Link: ({ children, to }: { children: ReactNode; to: string }) => <a href={to}>{children}</a>,
Link: ({
children,
to,
...props
}: { children: ReactNode; to: string } & React.ComponentProps<"a">) => (
<a href={to} {...props}>{children}</a>
),
}));
vi.mock("../api/issues", () => ({
@@ -144,6 +156,7 @@ describe("MarkdownBody", () => {
expect(html).toContain('href="/issues/PAP-1271"');
expect(html).toContain("text-green-600");
expect(html).toContain(">PAP-1271<");
expect(html).not.toContain("paperclip-mention-chip--issue");
});
it("rewrites full issue URLs to internal issue links", () => {
@@ -154,6 +167,7 @@ describe("MarkdownBody", () => {
expect(html).toContain('href="/issues/PAP-1179"');
expect(html).toContain("text-red-600");
expect(html).toContain(">http://localhost:3100/PAP/issues/PAP-1179<");
expect(html).not.toContain("paperclip-mention-chip--issue");
});
it("rewrites issue scheme links to internal issue links", () => {
@@ -217,4 +231,15 @@ describe("MarkdownBody", () => {
expect(html).toContain("<pre");
expect(html).toContain('style="max-width:100%;overflow-x:auto"');
});
it("renders internal issue links and bare identifiers as issue chips", () => {
const html = renderMarkdown(`See PAP-42 and [linked task](${buildIssueReferenceHref("PAP-77")}) for follow-up.`, [
{ identifier: "PAP-42", status: "done" },
{ identifier: "PAP-77", status: "blocked" },
]);
expect(html).toContain('href="/issues/PAP-42"');
expect(html).toContain('href="/issues/PAP-77"');
expect(html).toContain('data-mention-kind="issue"');
});
});

8
ui/src/components/MarkdownBody.tsx
View File

@@ -42,7 +42,11 @@ function MarkdownIssueLink({
});
return (
<Link to={href} className="inline-flex items-center gap-1.5 align-baseline">
<Link
to={href}
className="inline-flex items-center gap-1 align-baseline font-medium"
data-mention-kind="issue"
>
{data ? <StatusIcon status={data.status} className="h-3.5 w-3.5" /> : null}
<span>{children}</span>
</Link>
@@ -223,6 +227,8 @@ export function MarkdownBody({
if (parsed) {
const targetHref = parsed.kind === "project"
? `/projects/${parsed.projectId}`
: parsed.kind === "issue"
? `/issues/${parsed.identifier}`
: parsed.kind === "skill"
? `/skills/${parsed.skillId}`
: parsed.kind === "user"

2
ui/src/components/MarkdownEditor.tsx
View File

@@ -730,7 +730,7 @@ export const MarkdownEditor = forwardRef<MarkdownEditorRef, MarkdownEditorProps>
continue;
}
if (parsed.kind === "user") {
if (parsed.kind === "user" || parsed.kind === "issue") {
applyMentionChipDecoration(link, parsed);
continue;
}

5
ui/src/index.css
View File

@@ -763,6 +763,11 @@ a.paperclip-mention-chip[data-mention-kind="agent"]::before {
text-decoration: none;
}
.paperclip-markdown a.paperclip-mention-chip[data-mention-kind="issue"] {
border-color: color-mix(in oklab, var(--foreground) 14%, var(--border) 86%);
background: color-mix(in oklab, var(--accent) 42%, transparent);
}
.dark .paperclip-markdown a {
color: color-mix(in oklab, var(--foreground) 80%, #58a6ff 20%);
}

21
ui/src/lib/mention-chips.ts
View File

@@ -1,5 +1,11 @@
import type { CSSProperties } from "react";
import { parseAgentMentionHref, parseProjectMentionHref, parseSkillMentionHref, parseUserMentionHref } from "@paperclipai/shared";
import {
parseAgentMentionHref,
parseIssueReferenceHref,
parseProjectMentionHref,
parseSkillMentionHref,
parseUserMentionHref,
} from "@paperclipai/shared";
import { getAgentIcon } from "./agent-icons";
import { hexToRgb, pickTextColorForPillBg } from "./color-contrast";
@@ -9,6 +15,10 @@ export type ParsedMentionChip =
agentId: string;
icon: string | null;
}
| {
kind: "issue";
identifier: string;
}
| {
kind: "project";
projectId: string;
@@ -27,6 +37,14 @@ export type ParsedMentionChip =
const iconMaskCache = new Map<string, string>();
export function parseMentionChipHref(href: string): ParsedMentionChip | null {
const issue = parseIssueReferenceHref(href);
if (issue) {
return {
kind: "issue",
identifier: issue.identifier,
};
}
const agent = parseAgentMentionHref(href);
if (agent) {
return {
@@ -111,6 +129,7 @@ export function clearMentionChipDecoration(element: HTMLElement) {
element.classList.remove(
"paperclip-mention-chip",
"paperclip-mention-chip--agent",
"paperclip-mention-chip--issue",
"paperclip-mention-chip--project",
"paperclip-mention-chip--user",
"paperclip-mention-chip--skill",

16
ui/src/pages/DesignGuide.tsx
View File

@@ -123,6 +123,7 @@ import { FilterBar, type FilterValue } from "@/components/FilterBar";
import { InlineEditor } from "@/components/InlineEditor";
import { PageSkeleton } from "@/components/PageSkeleton";
import { Identity } from "@/components/Identity";
import { IssueReferencePill } from "@/components/IssueReferencePill";
/* ------------------------------------------------------------------ */
/* Section wrapper */
@@ -466,6 +467,21 @@ export function DesignGuide() {
))}
</div>
</SubSection>
<SubSection title="IssueReferencePill">
<p className="text-xs text-muted-foreground">
Used wherever a task is referenced — in markdown, the Related Work tab, and activity summaries.
Pass <code className="font-mono">status</code> to show the target issue&apos;s state at a glance.
Use <code className="font-mono">strikethrough</code> for &quot;removed&quot; contexts.
</p>
<div className="flex items-center gap-2 flex-wrap">
<IssueReferencePill issue={{ id: "demo-1", identifier: "PAP-123", title: "Identifier only — no status yet" }} />
<IssueReferencePill issue={{ id: "demo-2", identifier: "PAP-456", title: "With in_progress status", status: "in_progress" }} />
<IssueReferencePill issue={{ id: "demo-3", identifier: "PAP-789", title: "Done status", status: "done" }} />
<IssueReferencePill issue={{ id: "demo-4", identifier: "PAP-101", title: "Blocked status", status: "blocked" }} />
<IssueReferencePill strikethrough issue={{ id: "demo-5", identifier: "PAP-202", title: "Removed (strikethrough)", status: "todo" }} />
</div>
</SubSection>
</Section>
{/* ============================================================ */}

22
ui/src/pages/IssueDetail.tsx
View File

@@ -63,6 +63,8 @@ import { IssueChatThread, type IssueChatComposerHandle } from "../components/Iss
import { IssueContinuationHandoff } from "../components/IssueContinuationHandoff";
import { IssueDocumentsSection } from "../components/IssueDocumentsSection";
import { IssuesList } from "../components/IssuesList";
import { IssueReferenceActivitySummary } from "../components/IssueReferenceActivitySummary";
import { IssueRelatedWorkPanel } from "../components/IssueRelatedWorkPanel";
import { IssueProperties } from "../components/IssueProperties";
import { IssueRunLedger } from "../components/IssueRunLedger";
import { IssueWorkspaceCard } from "../components/IssueWorkspaceCard";
@@ -94,6 +96,7 @@ import {
Copy,
EyeOff,
Hexagon,
ListTree,
MessageSquare,
MoreHorizontal,
MoreVertical,
@@ -886,10 +889,13 @@ function IssueDetailActivityTab({
) : (
<div className="space-y-1.5">
{activity.slice(0, 20).map((evt) => (
<div key={evt.id} className="flex items-center gap-1.5 text-xs text-muted-foreground">
<ActorIdentity evt={evt} agentMap={agentMap} userProfileMap={userProfileMap} />
<span>{formatIssueActivityAction(evt.action, evt.details, { agentMap, userProfileMap, currentUserId })}</span>
<span className="ml-auto shrink-0">{relativeTime(evt.createdAt)}</span>
<div key={evt.id} className="space-y-1.5 rounded-lg border border-border/60 px-3 py-2 text-xs text-muted-foreground">
<div className="flex items-center gap-1.5">
<ActorIdentity evt={evt} agentMap={agentMap} userProfileMap={userProfileMap} />
<span>{formatIssueActivityAction(evt.action, evt.details, { agentMap, userProfileMap, currentUserId })}</span>
<span className="ml-auto shrink-0">{relativeTime(evt.createdAt)}</span>
</div>
<IssueReferenceActivitySummary event={evt} />
</div>
))}
</div>
@@ -2674,6 +2680,10 @@ export function IssueDetail() {
<ActivityIcon className="h-3.5 w-3.5" />
Activity
</TabsTrigger>
<TabsTrigger value="related-work" className="gap-1.5">
<ListTree className="h-3.5 w-3.5" />
Related work
</TabsTrigger>
{issuePluginTabItems.map((item) => (
<TabsTrigger key={item.value} value={item.value}>
{item.label}
@@ -2738,6 +2748,10 @@ export function IssueDetail() {
) : null}
</TabsContent>
<TabsContent value="related-work">
<IssueRelatedWorkPanel relatedWork={issue.relatedWork} />
</TabsContent>
{activePluginTab && (
<TabsContent value={activePluginTab.value}>
<PluginSlotMount