Fix issue closed state colors to match GitHub.com behavior with state reason support (#7629)

Copilot · alexr00 · web-flow · commit 8fd0a5c91d55 · 2025-08-20T17:17:10.000Z
* Initial plan

* Fix issue colors: use purple for closed issues instead of red

Co-authored-by: alexr00 &lt;38270282+alexr00@users.noreply.github.com&gt;

* Use the existing purple color

* Initial plan to implement state reason for closed issues

Co-authored-by: alexr00 &lt;38270282+alexr00@users.noreply.github.com&gt;

* Add stateReason support to distinguish closed issues by completion status

Co-authored-by: alexr00 &lt;38270282+alexr00@users.noreply.github.com&gt;

* Fix TypeScript error and linting issues with stateReason parameter

Co-authored-by: alexr00 &lt;38270282+alexr00@users.noreply.github.com&gt;

* Propagate state reason

---------

Co-authored-by: copilot-swe-agent[bot] &lt;198982749+Copilot@users.noreply.github.com&gt;
Co-authored-by: alexr00 &lt;38270282+alexr00@users.noreply.github.com&gt;
diff --git a/package.json b/package.json
@@ -3436,8 +3436,8 @@
 			{
 				"id": "issues.closed",
 				"defaults": {
-					"dark": "#cb2431",
-					"light": "#cb2431",
+					"dark": "pullRequests.merged",
+					"light": "pullRequests.merged",
 					"highContrast": "editor.foreground",
 					"highContrastLight": "editor.foreground"
 				},
@@ -3476,8 +3476,8 @@
 			{
 				"id": "pullRequests.closed",
 				"defaults": {
-					"dark": "issues.closed",
-					"light": "issues.closed",
+					"dark": "#cb2431",
+					"light": "#cb2431",
 					"highContrast": "editor.background",
 					"highContrastLight": "editor.background"
 				},
diff --git a/src/github/graphql.ts b/src/github/graphql.ts
@@ -638,6 +638,7 @@ export interface Issue {
 	number: number;
 	url: string;
 	state: 'OPEN' | 'CLOSED' | 'MERGED'; // TODO: don't allow merged in an issue
+	stateReason?: 'REOPENED' | 'NOT_PLANNED' | 'COMPLETED' | 'DUPLICATE';
 	body: string;
 	bodyHTML: string;
 	title: string;
diff --git a/src/github/interface.ts b/src/github/interface.ts
@@ -189,12 +189,15 @@ export interface Reaction {
 	reactors: readonly string[];
 }
 
+export type StateReason = 'REOPENED' | 'NOT_PLANNED' | 'COMPLETED' | 'DUPLICATE';
+
 export interface Issue {
 	id: number;
 	graphNodeId: string;
 	url: string;
 	number: number;
 	state: string;
+	stateReason?: StateReason;
 	body: string;
 	bodyHTML?: string;
 	title: string;
diff --git a/src/github/issueModel.ts b/src/github/issueModel.ts
@@ -23,7 +23,7 @@ import {
 	TimelineEventsResponse,
 	UpdateIssueResponse,
 } from './graphql';
-import { GithubItemStateEnum, IAccount, IIssueEditData, IMilestone, IProject, IProjectItem, Issue } from './interface';
+import { GithubItemStateEnum, IAccount, IIssueEditData, IMilestone, IProject, IProjectItem, Issue, StateReason } from './interface';
 import { convertRESTIssueToRawPullRequest, eventTime, parseCombinedTimelineEvents, parseGraphQlIssueComment, parseMilestone, parseSelectRestTimelineEvents, restPaginate } from './utils';
 
 export interface IssueChangeEvent {
@@ -52,6 +52,7 @@ export class IssueModel<TItem extends Issue = Issue> extends Disposable {
 	public titleHTML: string;
 	public html_url: string;
 	public state: GithubItemStateEnum = GithubItemStateEnum.Open;
+	public stateReason?: StateReason;
 	public author: IAccount;
 	public assignees?: IAccount[];
 	public createdAt: string;
@@ -175,6 +176,10 @@ export class IssueModel<TItem extends Issue = Issue> extends Disposable {
 			changes.state = true;
 			this.state = newState;
 		}
+		if ((this.stateReason !== issue.stateReason) && issue.stateReason) {
+			changes.state = true;
+			this.stateReason = issue.stateReason;
+		}
 		if (issue.assignees && (issue.assignees.length !== (this.assignees?.length ?? 0) || issue.assignees.some(assignee => this.assignees?.every(a => a.id !== assignee.id)))) {
 			changes.assignees = true;
 			this.assignees = issue.assignees;
diff --git a/src/github/issueOverview.ts b/src/github/issueOverview.ts
@@ -220,6 +220,7 @@ export class IssueOverviewPanel<TItem extends IssueModel = IssueModel> extends W
 			labels: labels,
 			author: issue.author,
 			state: issue.state,
+			stateReason: issue.stateReason,
 			events: timelineEvents,
 			continueOnGitHub: this.continueOnGitHub(),
 			canEdit,
diff --git a/src/github/markdownUtils.ts b/src/github/markdownUtils.ts
@@ -38,7 +38,9 @@ function getIconMarkdown(issue: IssueModel) {
 			return `<span style="color:#22863a;">$(issues)</span>`;
 		}
 		case GithubItemStateEnum.Closed: {
-			return `<span style="color:#cb2431;">$(issue-closed)</span>`;
+			// Use grey for issues closed as "not planned", purple for "completed"
+			const color = issue.stateReason !== 'COMPLETED' ? '#6a737d' : '#8957e5';
+			return `<span style="color:${color};">$(issue-closed)</span>`;
 		}
 	}
 }
diff --git a/src/github/queries.gql b/src/github/queries.gql
@@ -64,6 +64,7 @@ fragment IssueBase on Issue {
 	number
 	url
 	state
+	stateReason
 	body
 	bodyHTML
 	title
diff --git a/src/github/queriesExtra.gql b/src/github/queriesExtra.gql
@@ -64,6 +64,7 @@ fragment IssueBase on Issue {
 	number
 	url
 	state
+	stateReason
 	body
 	bodyHTML
 	title
diff --git a/src/github/queriesLimited.gql b/src/github/queriesLimited.gql
@@ -54,6 +54,7 @@ fragment IssueBase on Issue {
 	number
 	url
 	state
+	stateReason
 	body
 	bodyHTML
 	title
diff --git a/src/github/utils.ts b/src/github/utils.ts
@@ -942,6 +942,7 @@ export async function parseGraphQLIssue(issue: GraphQL.Issue, githubRepository:
 		url: issue.url,
 		number: issue.number,
 		state: issue.state,
+		stateReason: issue.stateReason,
 		body: issue.body,
 		bodyHTML: await transformHtmlUrlsToExtensionUrls(issue.bodyHTML, githubRepository),
 		title: issue.title,
diff --git a/src/github/views.ts b/src/github/views.ts
@@ -18,6 +18,7 @@ import {
 	PullRequestReviewRequirement,
 	Reaction,
 	ReviewState,
+	StateReason,
 } from './interface';
 
 export enum ReviewType {
@@ -42,6 +43,7 @@ export interface Issue {
 	bodyHTML?: string;
 	author: IAccount;
 	state: GithubItemStateEnum; // TODO: don't allow merged
+	stateReason?: StateReason;
 	events: TimelineEvent[];
 	labels: DisplayLabel[];
 	assignees: IAccount[];
diff --git a/webviews/components/header.tsx b/webviews/components/header.tsx
@@ -6,7 +6,7 @@
 import React, { useContext, useState } from 'react';
 import { copilotEventToStatus, CopilotPRStatus, mostRecentCopilotEvent } from '../../src/common/copilot';
 import { CopilotStartedEvent, TimelineEvent } from '../../src/common/timelineEvent';
-import { GithubItemStateEnum } from '../../src/github/interface';
+import { GithubItemStateEnum, StateReason } from '../../src/github/interface';
 import { CodingAgentContext, OverviewContext, PullRequest } from '../../src/github/views';
 import PullRequestContext from '../common/context';
 import { useStateProp } from '../common/hooks';
@@ -31,7 +31,8 @@ export function Header({
 	events,
 	owner,
 	repo,
-	busy
+	busy,
+	stateReason
 }: PullRequest) {
 	const [currentTitle, setCurrentTitle] = useStateProp(title);
 	const [inEditMode, setEditMode] = useState(false);
@@ -51,7 +52,7 @@ export function Header({
 				owner={owner}
 				repo={repo}
 			/>
-			<Subtitle state={state} head={head} base={base} author={author} isIssue={isIssue} isDraft={isDraft} codingAgentEvent={codingAgentEvent} />
+			<Subtitle state={state} stateReason={stateReason} head={head} base={base} author={author} isIssue={isIssue} isDraft={isDraft} codingAgentEvent={codingAgentEvent} />
 			<div className="header-actions">
 				<ButtonGroup
 					isCurrentlyCheckedOut={isCurrentlyCheckedOut}
@@ -210,8 +211,8 @@ function CancelCodingAgentButton({ canEdit, codingAgentEvent }: { canEdit: boole
 	/>;
 }
 
-function Subtitle({ state, isDraft, isIssue, author, base, head, codingAgentEvent }) {
-	const { text, color, icon } = getStatus(state, isDraft, isIssue);
+function Subtitle({ state, stateReason, isDraft, isIssue, author, base, head, codingAgentEvent }) {
+	const { text, color, icon } = getStatus(state, isDraft, isIssue, stateReason);
 	const copilotStatus = copilotEventToStatus(codingAgentEvent);
 	let copilotStatusIcon: JSX.Element | undefined;
 	if (copilotStatus === CopilotPRStatus.Started) {
@@ -316,7 +317,7 @@ const CheckoutButton = ({ isCurrentlyCheckedOut, isIssue, repositoryDefaultBranc
 	/>;
 };
 
-export function getStatus(state: GithubItemStateEnum, isDraft: boolean, isIssue: boolean) {
+export function getStatus(state: GithubItemStateEnum, isDraft: boolean, isIssue: boolean, stateReason: StateReason) {
 	const closed = isIssue ? issueClosedIcon : prClosedIcon;
 	const open = isIssue ? issueIcon : prOpenIcon;
 
@@ -325,7 +326,11 @@ export function getStatus(state: GithubItemStateEnum, isDraft: boolean, isIssue:
 	} else if (state === GithubItemStateEnum.Open) {
 		return isDraft ? { text: 'Draft', color: 'draft', icon: prDraftIcon } : { text: 'Open', color: 'open', icon: open };
 	} else {
-		return { text: 'Closed', color: 'closed', icon: closed };
+		let closedColor: string = 'closed';
+		if (isIssue) {
+			closedColor = stateReason !== 'COMPLETED' ? 'draft' : 'merged';
+		}
+		return { text: 'Closed', color: closedColor, icon: closed };
 	}
 }
 

Original file line number	Diff line number	Diff line change
`@@ -38,7 +38,9 @@ function getIconMarkdown(issue: IssueModel) {`
`38`	`38`	return `<span style="color:#22863a;">$(issues)</span>`;
`39`	`39`	`}`
`40`	`40`	`case GithubItemStateEnum.Closed: {`
`41`		- return `<span style="color:#cb2431;">$(issue-closed)</span>`;
	`41`	`+ // Use grey for issues closed as "not planned", purple for "completed"`
	`42`	`+ const color = issue.stateReason !== 'COMPLETED' ? '#6a737d' : '#8957e5';`
	`43`	+ return `<span style="color:${color};">$(issue-closed)</span>`;
`42`	`44`	`}`
`43`	`45`	`}`
`44`	`46`	`}`