fix(web): show pull request state in context chips

apps/web/src/components/contextChipParts.test.tsx

@@ -1,7 +1,14 @@
 import type { ReactNode } from "react";
 import { renderToStaticMarkup } from "react-dom/server";
 import { describe, expect, it, vi } from "vite-plus/test";
-import { ComposerContextScope, ContextChipPopover } from "./contextChipParts";
+import { ComposerContextScope, ContextChipPopover, PullRequestChip } from "./contextChipParts";
+
+vi.mock("~/lib/openPullRequestLink", () => ({ usePullRequestPreviewTarget: () => null }));
+vi.mock("./ui/tooltip", () => ({
+  Tooltip: ({ children }: { children: ReactNode }) => children,
+  TooltipTrigger: ({ render }: { render: ReactNode }) => render,
+  TooltipPopup: ({ children }: { children: ReactNode }) => children,
+}));
 
 vi.mock("./ui/popover", () => ({
   Popover: ({ children }: { children: ReactNode }) => children,
@@ -27,3 +34,37 @@ describe("context detail popup ownership", () => {
     },
   );
 });
+
+describe("pull request context chip", () => {
+  it.each([
+    { state: "open", isDraft: false, label: "Open", icon: "lucide-git-pull-request-arrow" },
+    { state: "open", isDraft: true, label: "Draft", icon: "lucide-git-pull-request-draft" },
+    { state: "closed", isDraft: true, label: "Closed", icon: "lucide-git-pull-request-closed" },
+    { state: "merged", isDraft: true, label: "Merged", icon: "lucide-git-merge" },
+  ] as const)(
+    "shows $label state in icon and accessible name",
+    ({ state, isDraft, label, icon }) => {
+      const markup = renderToStaticMarkup(
+        <PullRequestChip
+          metadata={{
+            number: 42,
+            title: "Fix search",
+            url: "https://example.com/pull/42",
+            headBranch: "feature",
+            baseBranch: "main",
+            state,
+            isDraft,
+          }}
+          environmentId={null}
+          label="#42"
+          kindLabel="Pull request"
+          className=""
+          labelClassName=""
+          onOpen={() => undefined}
+        />,
+      );
+      expect(markup).toContain(`(${label})`);
+      expect(markup).toContain(icon);
+    },
+  );
+});

apps/web/src/components/contextChipParts.tsx

@@ -6,7 +6,7 @@ import { composerFloatingLayerProps } from "./chat/composerEventScope";
 export const ComposerContextScope = createContext(false);
 
 import { cn } from "~/lib/utils";
-import { PullRequestGlyph } from "~/components/pullRequest/pullRequestIcons";
+import { resolvePullRequestState } from "~/components/pullRequest/pullRequestPresentation";
 import { PierreEntryIcon } from "./chat/PierreEntryIcon";
 import {
   COMPOSER_INLINE_CHIP_ICON_CLASS_NAME,
@@ -122,6 +122,7 @@ export function PullRequestChip(props: {
   onOpen: (event: MouseEvent<HTMLElement>, url: string) => void;
 }) {
   const previewTarget = usePullRequestPreviewTarget(props.environmentId, props.metadata.url);
+  const state = resolvePullRequestState(props.metadata);
   const button = (
     <Button
       variant="chip"
@@ -131,12 +132,13 @@ export function PullRequestChip(props: {
         CONTEXT_INLINE_CHIP_INTERACTIVE_CLASS_NAME,
         "cursor-pointer",
       )}
-      aria-label={`Open ${props.kindLabel} ${props.label}: ${props.metadata.title}`}
+      aria-label={`Open ${props.kindLabel} ${props.label}: ${props.metadata.title} (${state.label})`}
       data-markdown-copy={props.copyMarkdown}
       onClick={(event) => props.onOpen(event, props.metadata.url)}
     >
-      <PullRequestGlyph.pullRequest
-        className={cn(COMPOSER_INLINE_CHIP_ICON_CLASS_NAME, "size-3.5")}
+      <state.Icon
+        aria-hidden="true"
+        className={cn(COMPOSER_INLINE_CHIP_ICON_CLASS_NAME, "size-3.5", state.toneClassName)}
       />
       <span className={props.labelClassName}>{props.label}</span>
     </Button>