2026-04-10 22:26:21 -05:00
|
|
|
type MarkdownNode = {
|
|
|
|
|
type: string;
|
|
|
|
|
value?: string;
|
|
|
|
|
url?: string;
|
|
|
|
|
children?: MarkdownNode[];
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const BARE_ISSUE_IDENTIFIER_RE = /^[A-Z][A-Z0-9]+-\d+$/i;
|
[codex] Improve issue detail and issue-list UX (#3678)
## Thinking Path
> - Paperclip orchestrates AI agents for zero-human companies
> - A core part of that is the operator experience around reading issue
state, agent chat, and sub-task structure
> - The current branch had a long run of issue-detail and issue-list UX
fixes that all improve how humans follow and steer active work
> - Those changes mostly live in the UI/chat surface and should be
reviewed together instead of mixed with workspace/runtime work
> - This pull request packages the issue-detail, chat, markdown, and
sub-issue list improvements into one standalone change
> - The benefit is a cleaner, less jumpy, more reliable issue workflow
on desktop and mobile without coupling it to unrelated server/runtime
refactors
## What Changed
- Stabilized issue chat runtime wiring, optimistic comment handling,
queued-comment cancellation, and composer anchoring during live updates
- Fixed several issue-detail rendering and navigation regressions
including placeholder bleed, local polling scope, mobile inbox-to-issue
transitions, and visible refresh resets
- Improved markdown and rich-content handling with advisory image
normalization, editor fallback behavior, touch mention recovery, and
`issue:` quicklook links
- Refined sub-issue behavior with parent-derived defaults, current-user
inheritance fixes, empty-state cleanup, and a reusable issue-list
presentation for sub-issues
- Added targeted UI tests for the new issue-detail, chat scroll/message,
placeholder-data, markdown, and issue-list behaviors
## Verification
- `pnpm vitest run ui/src/components/IssueChatThread.test.tsx
ui/src/components/MarkdownEditor.test.tsx
ui/src/components/IssuesList.test.tsx
ui/src/context/LiveUpdatesProvider.test.tsx
ui/src/lib/issue-chat-messages.test.ts
ui/src/lib/issue-chat-scroll.test.ts
ui/src/lib/issue-detail-subissues.test.ts
ui/src/lib/query-placeholder-data.test.tsx
ui/src/hooks/usePaperclipIssueRuntime.test.tsx`
## Risks
- Medium: this branch touches the highest-traffic issue-detail UI paths,
so regressions would show up as chat/thread or sub-issue UX glitches
- The changes are UI-heavy and would benefit from reviewer screenshots
or a quick manual browser pass before merge
## Model Used
- OpenAI Codex coding agent (GPT-5-class runtime in Codex CLI; exact
deployed model ID is not exposed in this environment), reasoning
enabled, tool use and local code execution enabled
## 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
- [ ] 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>
2026-04-14 12:50:48 -05:00
|
|
|
const ISSUE_SCHEME_RE = /^issue:\/\/:?([^?#\s]+)(?:[?#].*)?$/i;
|
|
|
|
|
const ISSUE_REFERENCE_TOKEN_RE = /issue:\/\/:?[^\s<>()]+|https?:\/\/[^\s<>()]+|\b[A-Z][A-Z0-9]+-\d+\b/gi;
|
2026-04-10 22:26:21 -05:00
|
|
|
|
|
|
|
|
export function parseIssuePathIdFromPath(pathOrUrl: string | null | undefined): string | null {
|
|
|
|
|
if (!pathOrUrl) return null;
|
|
|
|
|
let pathname = pathOrUrl.trim();
|
|
|
|
|
if (!pathname) return null;
|
|
|
|
|
|
|
|
|
|
if (/^https?:\/\//i.test(pathname)) {
|
|
|
|
|
try {
|
|
|
|
|
pathname = new URL(pathname).pathname;
|
|
|
|
|
} catch {
|
|
|
|
|
return null;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const segments = pathname.split("/").filter(Boolean);
|
|
|
|
|
const issueIndex = segments.findIndex((segment) => segment === "issues");
|
|
|
|
|
if (issueIndex === -1 || issueIndex === segments.length - 1) return null;
|
|
|
|
|
return decodeURIComponent(segments[issueIndex + 1] ?? "");
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export function parseIssueReferenceFromHref(href: string | null | undefined) {
|
|
|
|
|
if (!href) return null;
|
[codex] Improve issue detail and issue-list UX (#3678)
## Thinking Path
> - Paperclip orchestrates AI agents for zero-human companies
> - A core part of that is the operator experience around reading issue
state, agent chat, and sub-task structure
> - The current branch had a long run of issue-detail and issue-list UX
fixes that all improve how humans follow and steer active work
> - Those changes mostly live in the UI/chat surface and should be
reviewed together instead of mixed with workspace/runtime work
> - This pull request packages the issue-detail, chat, markdown, and
sub-issue list improvements into one standalone change
> - The benefit is a cleaner, less jumpy, more reliable issue workflow
on desktop and mobile without coupling it to unrelated server/runtime
refactors
## What Changed
- Stabilized issue chat runtime wiring, optimistic comment handling,
queued-comment cancellation, and composer anchoring during live updates
- Fixed several issue-detail rendering and navigation regressions
including placeholder bleed, local polling scope, mobile inbox-to-issue
transitions, and visible refresh resets
- Improved markdown and rich-content handling with advisory image
normalization, editor fallback behavior, touch mention recovery, and
`issue:` quicklook links
- Refined sub-issue behavior with parent-derived defaults, current-user
inheritance fixes, empty-state cleanup, and a reusable issue-list
presentation for sub-issues
- Added targeted UI tests for the new issue-detail, chat scroll/message,
placeholder-data, markdown, and issue-list behaviors
## Verification
- `pnpm vitest run ui/src/components/IssueChatThread.test.tsx
ui/src/components/MarkdownEditor.test.tsx
ui/src/components/IssuesList.test.tsx
ui/src/context/LiveUpdatesProvider.test.tsx
ui/src/lib/issue-chat-messages.test.ts
ui/src/lib/issue-chat-scroll.test.ts
ui/src/lib/issue-detail-subissues.test.ts
ui/src/lib/query-placeholder-data.test.tsx
ui/src/hooks/usePaperclipIssueRuntime.test.tsx`
## Risks
- Medium: this branch touches the highest-traffic issue-detail UI paths,
so regressions would show up as chat/thread or sub-issue UX glitches
- The changes are UI-heavy and would benefit from reviewer screenshots
or a quick manual browser pass before merge
## Model Used
- OpenAI Codex coding agent (GPT-5-class runtime in Codex CLI; exact
deployed model ID is not exposed in this environment), reasoning
enabled, tool use and local code execution enabled
## 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
- [ ] 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>
2026-04-14 12:50:48 -05:00
|
|
|
const trimmed = href.trim();
|
|
|
|
|
const issueSchemeMatch = trimmed.match(ISSUE_SCHEME_RE);
|
|
|
|
|
if (issueSchemeMatch?.[1]) {
|
|
|
|
|
const issuePathId = decodeURIComponent(issueSchemeMatch[1]);
|
|
|
|
|
return {
|
|
|
|
|
issuePathId,
|
|
|
|
|
href: `/issues/${encodeURIComponent(issuePathId)}`,
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
|
2026-04-10 22:26:21 -05:00
|
|
|
const pathId = parseIssuePathIdFromPath(href);
|
|
|
|
|
if (pathId) {
|
|
|
|
|
return {
|
|
|
|
|
issuePathId: pathId,
|
|
|
|
|
href: `/issues/${encodeURIComponent(pathId)}`,
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (!BARE_ISSUE_IDENTIFIER_RE.test(trimmed)) return null;
|
|
|
|
|
const normalized = trimmed.toUpperCase();
|
|
|
|
|
return {
|
|
|
|
|
issuePathId: normalized,
|
|
|
|
|
href: `/issues/${encodeURIComponent(normalized)}`,
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function splitTrailingPunctuation(token: string) {
|
|
|
|
|
let core = token;
|
|
|
|
|
let trailing = "";
|
|
|
|
|
|
|
|
|
|
while (core.length > 0) {
|
|
|
|
|
const lastChar = core.at(-1);
|
|
|
|
|
if (!lastChar || !/[),.;!?]/.test(lastChar)) break;
|
|
|
|
|
if (lastChar === ")") {
|
|
|
|
|
const openCount = (core.match(/\(/g) ?? []).length;
|
|
|
|
|
const closeCount = (core.match(/\)/g) ?? []).length;
|
|
|
|
|
if (closeCount <= openCount) break;
|
|
|
|
|
}
|
|
|
|
|
trailing = `${lastChar}${trailing}`;
|
|
|
|
|
core = core.slice(0, -1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return { core, trailing };
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function createIssueLinkNode(value: string, href: string, childType: "text" | "inlineCode" = "text"): MarkdownNode {
|
|
|
|
|
return {
|
|
|
|
|
type: "link",
|
|
|
|
|
url: href,
|
|
|
|
|
children: [{ type: childType, value }],
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function linkifyIssueReferencesInText(value: string): MarkdownNode[] | null {
|
|
|
|
|
const nodes: MarkdownNode[] = [];
|
|
|
|
|
let cursor = 0;
|
|
|
|
|
let matched = false;
|
|
|
|
|
|
|
|
|
|
for (const match of value.matchAll(ISSUE_REFERENCE_TOKEN_RE)) {
|
|
|
|
|
const raw = match[0];
|
|
|
|
|
if (!raw) continue;
|
|
|
|
|
|
|
|
|
|
const start = match.index ?? 0;
|
|
|
|
|
const end = start + raw.length;
|
|
|
|
|
const { core, trailing } = splitTrailingPunctuation(raw);
|
|
|
|
|
const issueRef = parseIssueReferenceFromHref(core);
|
|
|
|
|
if (!issueRef) continue;
|
|
|
|
|
|
|
|
|
|
matched = true;
|
|
|
|
|
if (start > cursor) {
|
|
|
|
|
nodes.push({ type: "text", value: value.slice(cursor, start) });
|
|
|
|
|
}
|
|
|
|
|
nodes.push(createIssueLinkNode(core, issueRef.href));
|
|
|
|
|
if (trailing) {
|
|
|
|
|
nodes.push({ type: "text", value: trailing });
|
|
|
|
|
}
|
|
|
|
|
cursor = end;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (!matched) return null;
|
|
|
|
|
if (cursor < value.length) {
|
|
|
|
|
nodes.push({ type: "text", value: value.slice(cursor) });
|
|
|
|
|
}
|
|
|
|
|
return nodes;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function rewriteMarkdownTree(node: MarkdownNode) {
|
|
|
|
|
if (!Array.isArray(node.children) || node.children.length === 0) return;
|
|
|
|
|
if (node.type === "link" || node.type === "linkReference" || node.type === "code" || node.type === "definition" || node.type === "html") {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const nextChildren: MarkdownNode[] = [];
|
|
|
|
|
for (const child of node.children) {
|
|
|
|
|
if (child.type === "inlineCode" && typeof child.value === "string") {
|
|
|
|
|
const issueRef = parseIssueReferenceFromHref(child.value);
|
|
|
|
|
if (issueRef) {
|
|
|
|
|
nextChildren.push(createIssueLinkNode(child.value, issueRef.href, "inlineCode"));
|
|
|
|
|
continue;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (child.type === "text" && typeof child.value === "string") {
|
|
|
|
|
const linked = linkifyIssueReferencesInText(child.value);
|
|
|
|
|
if (linked) {
|
|
|
|
|
nextChildren.push(...linked);
|
|
|
|
|
continue;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
rewriteMarkdownTree(child);
|
|
|
|
|
nextChildren.push(child);
|
|
|
|
|
}
|
|
|
|
|
node.children = nextChildren;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export function remarkLinkIssueReferences() {
|
|
|
|
|
return (tree: MarkdownNode) => {
|
|
|
|
|
rewriteMarkdownTree(tree);
|
|
|
|
|
};
|
|
|
|
|
}
|