feat(metrics): prepend issue fields as formatted labels

codegen.ts

@@ -19,6 +19,9 @@ const config: CodegenConfig = {
  'https://api.github.com/graphql': {
  headers: {
  Authorization: `Bearer ${process.env.GITHUB_TOKEN}`,
+ // Issue fields are exposed behind this feature flag header; without it
+ // the schema omits `issueFieldValues` and its union types.
+ 'GraphQL-Features': 'issue_fields',
  },
  // GitHub's live schema currently fails graphql-js's stricter
  // interface-deprecation-consistency validation (added in graphql v17).

src/renderer/App.css

@@ -35,6 +35,9 @@
  --gitify-icon-closed: var(--fgColor-closed);
  --gitify-icon-done: var(--fgColor-done);
  --gitify-icon-attention: var(--fgColor-attention);
+ --gitify-icon-severe: var(--fgColor-severe);
+ --gitify-icon-accent: var(--fgColor-accent);
+ --gitify-icon-sponsors: var(--fgColor-sponsors);
  --gitify-link: var(--fgColor-link);
 }
 
@@ -82,6 +85,9 @@
  --gitify-icon-closed: currentColor;
  --gitify-icon-done: currentColor;
  --gitify-icon-attention: currentColor;
+ --gitify-icon-severe: currentColor;
+ --gitify-icon-accent: currentColor;
+ --gitify-icon-sponsors: currentColor;
  --gitify-link: color-mix(in oklab, var(--fgColor-link), var(--fgColor-muted) 30%);
 }
 
@@ -93,6 +99,9 @@
  --gitify-icon-closed: color-mix(in oklab, var(--fgColor-closed), var(--fgColor-muted) 45%);
  --gitify-icon-done: color-mix(in oklab, var(--fgColor-done), var(--fgColor-muted) 45%);
  --gitify-icon-attention: color-mix(in oklab, var(--fgColor-attention), var(--fgColor-muted) 45%);
+ --gitify-icon-severe: color-mix(in oklab, var(--fgColor-severe), var(--fgColor-muted) 45%);
+ --gitify-icon-accent: color-mix(in oklab, var(--fgColor-accent), var(--fgColor-muted) 45%);
+ --gitify-icon-sponsors: color-mix(in oklab, var(--fgColor-sponsors), var(--fgColor-muted) 45%);
 }
 
 [data-theme='glass'] {
@@ -474,6 +483,9 @@
  --gitify-icon-closed: var(--fgColor-closed);
  --gitify-icon-done: var(--fgColor-done);
  --gitify-icon-attention: var(--fgColor-attention);
+ --gitify-icon-severe: var(--fgColor-severe);
+ --gitify-icon-accent: var(--fgColor-accent);
+ --gitify-icon-sponsors: var(--fgColor-sponsors);
  --gitify-link: var(--fgColor-link);
  }
 

src/renderer/components/metrics/LabelsPill.test.tsx

@@ -1,9 +1,11 @@
 import { renderWithProviders } from '../../__helpers__/test-utils';
 
+import { IconColor } from '../../types';
+
 import { LabelsPill, type LabelsPillProps } from './LabelsPill';
 
 describe('renderer/components/metrics/LabelsPill.tsx', () => {
- it('renders without labels', () => {
+ it('renders without labels or issue fields', () => {
  const props: LabelsPillProps = { labels: [] };
 
  const tree = renderWithProviders(<LabelsPill {...props} />);
@@ -23,4 +25,36 @@ describe('renderer/components/metrics/LabelsPill.tsx', () => {
 
  expect(tree.container).toMatchSnapshot();
  });
+
+ it('renders field tokens when there are no labels', () => {
+ const props: LabelsPillProps = {
+ labels: [],
+ issueFields: [{ name: 'Priority', value: 'High', color: IconColor.RED }],
+ };
+
+ const tree = renderWithProviders(<LabelsPill {...props} />);
+
+ expect(tree.getByText('Priority: High')).toBeInTheDocument();
+ expect(tree.container.innerHTML).toContain(IconColor.RED);
+ expect(tree.container.innerHTML).toContain('var(--gitify-icon-closed)');
+ });
+
+ it('renders field tokens prepended before labels', () => {
+ const props: LabelsPillProps = {
+ labels: [{ name: 'enhancement', color: 'a2eeef' }],
+ issueFields: [
+ { name: 'Priority', value: 'High', color: IconColor.RED },
+ { name: 'Effort', value: '5' },
+ ],
+ };
+
+ const tree = renderWithProviders(<LabelsPill {...props} />);
+ const textContent = tree.container.textContent!;
+
+ expect(textContent).toContain('Priority: High');
+ expect(textContent).toContain('Effort: 5');
+ expect(textContent).toContain('enhancement');
+ expect(textContent.indexOf('Priority: High')).toBeLessThan(textContent.indexOf('enhancement'));
+ expect(textContent.indexOf('Effort: 5')).toBeLessThan(textContent.indexOf('enhancement'));
+ });
 });

src/renderer/components/metrics/LabelsPill.tsx

@@ -1,42 +1,73 @@
-import type { FC } from 'react';
+import type { CSSProperties, FC } from 'react';
 
 import { TagIcon } from '@primer/octicons-react';
 import { IssueLabelToken, LabelGroup } from '@primer/react';
 
-import { type GitifyLabels, IconColor } from '../../types';
+import { type GitifyIssueField, type GitifyLabels, IconColor } from '../../types';
 
 import { MetricPill } from './MetricPill';
 
 export interface LabelsPillProps {
  labels: GitifyLabels[];
+ issueFields?: GitifyIssueField[];
 }
 
-export const LabelsPill: FC<LabelsPillProps> = ({ labels }) => {
- if (!labels?.length) {
+/**
+ * Resolve an {@link IconColor} token (a `text-gitify-icon-*` Tailwind class) to
+ * the Primer-backed CSS variable it maps to. Primer's label token styles set
+ * their own computed `color`, which would beat the utility class in the
+ * cascade, so the field colour is applied inline instead.
+ */
+export const iconColorCssVar = (color: IconColor): string =>
+ `var(--${color.replace('text-gitify-icon-', 'gitify-icon-')})`;
+
+export const LabelsPill: FC<LabelsPillProps> = ({ labels, issueFields }) => {
+ const fieldTokens = (issueFields ?? []).map((field) => ({
+ text: `${field.name}: ${field.value}`,
+ color: field.color,
+ }));
+
+ const labelsContent =
+ labels?.length || fieldTokens.length ? (
+ <LabelGroup>
+ {fieldTokens.map((field) => {
+ const style: CSSProperties | undefined = field.color
+ ? { color: iconColorCssVar(field.color) }
+ : undefined;
+
+ return (
+ <IssueLabelToken
+ className={field.color}
+ key={field.text}
+ size="small"
+ style={style}
+ text={field.text}
+ />
+ );
+ })}
+ {(labels ?? []).map((label) => {
+ return (
+ <IssueLabelToken
+ fillColor={label.color ? `#${label.color}` : undefined}
+ key={label.name}
+ size="small"
+ text={label.name}
+ />
+ );
+ })}
+ </LabelGroup>
+ ) : null;
+
+ if (!labelsContent) {
  return null;
  }
 
- const labelsContent = (
- <LabelGroup>
- {labels.map((label) => {
- return (
- <IssueLabelToken
- fillColor={label.color ? `#${label.color}` : undefined}
- key={label.name}
- size="small"
- text={label.name}
- />
- );
- })}
- </LabelGroup>
- );
-
  return (
  <MetricPill
  color={IconColor.GRAY}
  contents={labelsContent}
  icon={TagIcon}
- metric={labels.length}
+ metric={fieldTokens.length + (labels?.length ?? 0)}
  />
  );
 };

src/renderer/components/metrics/MetricGroup.test.tsx

@@ -70,4 +70,44 @@ describe('renderer/components/metrics/MetricGroup.tsx', () => {
 
  expect(tree.getByText('2/3')).toBeInTheDocument();
  });
+
+ it('should render issue field pills immediately before label pills', async () => {
+ const props: MetricGroupProps = {
+ notification: {
+ ...mockGitifyNotification,
+ subject: {
+ ...mockGitifyNotification.subject,
+ issueFields: [{ name: 'Priority', value: 'High', color: IconColor.RED }],
+ labels: [{ name: 'enhancement', color: '0e8a16' }],
+ },
+ },
+ };
+
+ const tree = renderWithProviders(<MetricGroup {...props} />, {
+ settings: { ...mockSettings, showPills: true },
+ });
+
+ const textContent = tree.container.textContent;
+ expect(textContent).toContain('Priority: High');
+ expect(textContent).toContain('enhancement');
+ expect(textContent.indexOf('Priority: High')).toBeLessThan(textContent.indexOf('enhancement'));
+ });
+
+ it('should not render field pills when showPills is disabled', async () => {
+ const props: MetricGroupProps = {
+ notification: {
+ ...mockGitifyNotification,
+ subject: {
+ ...mockGitifyNotification.subject,
+ issueFields: [{ name: 'Priority', value: 'High', color: IconColor.RED }],
+ },
+ },
+ };
+
+ const tree = renderWithProviders(<MetricGroup {...props} />, {
+ settings: { ...mockSettings, showPills: false },
+ });
+
+ expect(tree.queryByText('Priority: High')).not.toBeInTheDocument();
+ });
 });

src/renderer/components/metrics/MetricGroup.tsx

@@ -47,7 +47,10 @@ export const MetricGroup: FC<MetricGroupProps> = ({ notification }) => {
 
  <MilestonePill milestone={notification.subject.milestone!} />
 
- <LabelsPill labels={notification.subject.labels ?? []} />
+ <LabelsPill
+ labels={notification.subject.labels ?? []}
+ issueFields={notification.subject.issueFields ?? []}
+ />
  </div>
  );
 };

src/renderer/constants.ts

@@ -97,6 +97,7 @@ export const Constants = {
  GRAPHQL_ARGS: {
  FIRST_LABELS: 100,
  FIRST_CLOSING_ISSUES: 100,
+ FIRST_ISSUE_FIELD_VALUES: 100,
  LAST_COMMENTS: 1,
  LAST_THREADED_COMMENTS: 10,
  LAST_REPLIES: 10,

src/renderer/types.ts

@@ -263,6 +263,9 @@ export enum IconColor {
  PURPLE = 'text-gitify-icon-done',
  RED = 'text-gitify-icon-closed',
  YELLOW = 'text-gitify-icon-attention',
+ ORANGE = 'text-gitify-icon-severe',
+ BLUE = 'text-gitify-icon-accent',
+ PINK = 'text-gitify-icon-sponsors',
 }
 
 export enum Opacity {
@@ -406,6 +409,8 @@ export interface GitifySubject {
  stackDepth?: number;
  /** GitHub-native issue type (e.g. Bug, Feature, Task) */
  issueType?: GitifyIssueType;
+ /** GitHub issue fields (e.g. Priority, Effort) with values set */
+ issueFields?: GitifyIssueField[];
  /** Milestone state/title */
  milestone?: GitifyMilestone;
  /** Deep link to notification thread */
@@ -483,6 +488,16 @@ export interface GitifyIssueType {
  color: IconColor;
 }
 
+/** GitHub issue field value, normalized for display */
+export interface GitifyIssueField {
+ /** Field name, e.g. "Priority" */
+ name: string;
+ /** Display value, e.g. "High", "5", "2026-09-01" */
+ value: string;
+ /** Option color token when available */
+ color?: IconColor;
+}
+
 export type GitifyMilestone = MilestoneFieldsFragment;
 
 export type GitifyReactionGroup = ReactionGroupFieldsFragment;

src/renderer/utils/forges/github/__mocks__/response-mocks.ts

@@ -102,6 +102,7 @@ export function mockIssueResponseNode(mocks: {
  comments: { totalCount: 0, nodes: [] },
  milestone: null,
  issueType: null,
+ issueFieldValues: null,
  reactions: {
  totalCount: 0,
  },

src/renderer/utils/forges/github/capabilities.test.ts

@@ -7,6 +7,7 @@ import {
  githubCapabilities,
  getGitHubCapabilities,
  supportsAnsweredDiscussion,
+ supportsIssueFields,
  supportsStackedPullRequests,
 } from './capabilities';
 
@@ -96,18 +97,66 @@ describe('renderer/utils/forges/github/capabilities.ts', () => {
  });
  });
 
+ describe('supportsIssueFields', () => {
+ it('returns true for GitHub Cloud', () => {
+ expect(supportsIssueFields(mockGitHubCloudAccount)).toBe(true);
+ });
+
+ it('returns false for GitHub Enterprise Server < v3.23', () => {
+ expect(
+ supportsIssueFields({
+ ...mockGitHubEnterpriseServerAccount,
+ version: '3.22.0',
+ }),
+ ).toBe(false);
+ });
+
+ it('returns true for GitHub Enterprise Server >= v3.23', () => {
+ expect(
+ supportsIssueFields({
+ ...mockGitHubEnterpriseServerAccount,
+ version: '3.23.0',
+ }),
+ ).toBe(true);
+ });
+
+ it('returns false when the GHES version is unknown', () => {
+ expect(
+ supportsIssueFields({
+ ...mockGitHubEnterpriseServerAccount,
+ version: undefined,
+ }),
+ ).toBe(false);
+ });
+ });
+
  describe('getGitHubCapabilities', () => {
  it('enables all gated capabilities for GitHub Cloud', () => {
  expect(getGitHubCapabilities(mockGitHubCloudAccount)).toEqual({
  stackedPullRequests: true,
  answeredDiscussion: true,
+ issueFields: true,
  });
  });
 
  it('disables gated capabilities for GitHub Enterprise Server', () => {
  expect(getGitHubCapabilities(mockGitHubEnterpriseServerAccount)).toEqual({
  stackedPullRequests: false,
  answeredDiscussion: false,
+ issueFields: false,
+ });
+ });
+
+ it('enables issueFields for GitHub Enterprise Server >= v3.23', () => {
+ expect(
+ getGitHubCapabilities({
+ ...mockGitHubEnterpriseServerAccount,
+ version: '3.23.0',
+ }),
+ ).toEqual({
+ stackedPullRequests: false,
+ answeredDiscussion: true,
+ issueFields: true,
  });
  });
  });