From b53e0a1a513178ec7ad9cffa84799cd54405e535 Mon Sep 17 00:00:00 2001
From: Julius Marminge <51714798+juliusmarminge@users.noreply.github.com>
Date: Fri, 13 Nov 2026 23:21:29 -0800
Subject: [PATCH] feat(web): add the Issues page and issue detail panel

The Issues page lists issues from every project's tracker, grouped per tracker account, with state, involvement and search filters. An issue opens in the right panel beside the list, where it can be edited, commented on, closed and reacted to. New issue files one from the repository's templates.

The reaction bar is shared with pull requests rather than copied.

Co-Authored-By: Claude Fable 5.2 <noreply@anthropic.com>
---
 .../src/environment/ServerEnvironment.ts      |   1 +
 apps/web/src/closedViewStore.ts               |  10 +
 apps/web/src/components/CommandPalette.tsx    |  19 +
 .../components/ReopenClosedViewShortcut.tsx   |  11 +-
 apps/web/src/components/RightPanelTabs.tsx    |   5 +
 .../components/issue/IssueCreateDialog.tsx    | 270 ++++++
 .../src/components/issue/IssueDetailGhost.tsx | 104 ++
 .../src/components/issue/IssueDetailPanel.tsx | 844 +++++++++++++++++
 apps/web/src/components/issue/IssueRow.tsx    | 117 +++
 apps/web/src/components/issue/IssuesPage.tsx  | 886 ++++++++++++++++++
 .../components/issue/issueListPreferences.ts  |  74 ++
 .../components/issue/issuePresentation.tsx    |  75 ++
 .../pullRequest/PullRequestGhosts.tsx         |   2 +-
 .../pullRequest/PullRequestListFilters.tsx    |   8 +-
 .../pullRequest/PullRequestReactions.tsx      |  85 +-
 .../pullRequest/PullRequestsPage.tsx          |   2 +
 .../src/components/sidebar/SidebarChrome.tsx  |  16 +-
 .../src/components/sidebar/mainAppLocation.ts |   4 +-
 apps/web/src/reopenClosedView.ts              |   3 +
 apps/web/src/rightPanelStore.ts               | 106 ++-
 apps/web/src/routeTree.gen.ts                 |  21 +
 apps/web/src/routes/_chat.issues.tsx          |  38 +
 apps/web/src/state/environments.ts            |   4 +
 apps/web/src/state/issues.ts                  |  67 ++
 docs/user/source-control.md                   |  19 +
 packages/client-runtime/package.json          |   4 +
 .../client-runtime/src/state/issues.test.ts   |  92 ++
 packages/client-runtime/src/state/issues.ts   | 175 ++++
 .../client-runtime/src/state/presentation.ts  |   8 +
 packages/contracts/src/environment.ts         |   1 +
 packages/contracts/src/issue.ts               |  27 +-
 31 files changed, 3037 insertions(+), 61 deletions(-)
 create mode 100644 apps/web/src/components/issue/IssueCreateDialog.tsx
 create mode 100644 apps/web/src/components/issue/IssueDetailGhost.tsx
 create mode 100644 apps/web/src/components/issue/IssueDetailPanel.tsx
 create mode 100644 apps/web/src/components/issue/IssueRow.tsx
 create mode 100644 apps/web/src/components/issue/IssuesPage.tsx
 create mode 100644 apps/web/src/components/issue/issueListPreferences.ts
 create mode 100644 apps/web/src/components/issue/issuePresentation.tsx
 create mode 100644 apps/web/src/routes/_chat.issues.tsx
 create mode 100644 apps/web/src/state/issues.ts
 create mode 100644 packages/client-runtime/src/state/issues.test.ts
 create mode 100644 packages/client-runtime/src/state/issues.ts

diff --git a/apps/server/src/environment/ServerEnvironment.ts b/apps/server/src/environment/ServerEnvironment.ts
index 813efbe53ea30..f59d6be362985 100644
--- a/apps/server/src/environment/ServerEnvironment.ts
+++ b/apps/server/src/environment/ServerEnvironment.ts
@@ -227,6 +227,7 @@ export const make = Effect.gen(function* () {
       fileAttachments: { maxUploadBytes: PROVIDER_SEND_TURN_MAX_FILE_BYTES },
       pullRequests: true,
       pullRequestChecks: true,
+      issues: true,
       linkedThreadRefreshes: true,
       sideChats: true,
       vcsBranchStatus: true,
diff --git a/apps/web/src/closedViewStore.ts b/apps/web/src/closedViewStore.ts
index b5db7bd741bef..2578922db3d11 100644
--- a/apps/web/src/closedViewStore.ts
+++ b/apps/web/src/closedViewStore.ts
@@ -95,6 +95,16 @@ const isClosedViewEntry = (entry: unknown): entry is ClosedViewEntry => {
         (surface.host === undefined || typeof surface.host === "string") &&
         (surface.url === undefined || typeof surface.url === "string")
       );
+    case "issue":
+      return (
+        typeof surface.projectId === "string" &&
+        typeof surface.tracker === "string" &&
+        typeof surface.scope === "string" &&
+        typeof surface.key === "string" &&
+        (surface.environmentId === undefined || typeof surface.environmentId === "string") &&
+        (surface.host === undefined || typeof surface.host === "string") &&
+        (surface.url === undefined || typeof surface.url === "string")
+      );
     default:
       return false;
   }
diff --git a/apps/web/src/components/CommandPalette.tsx b/apps/web/src/components/CommandPalette.tsx
index 0ea2cd7a2015d..d9435b5dee4d3 100644
--- a/apps/web/src/components/CommandPalette.tsx
+++ b/apps/web/src/components/CommandPalette.tsx
@@ -277,6 +277,8 @@ import { pickableProjectGroups } from "@t3tools/client-runtime/state/project-gro
 import { buildSidebarProjectPickerEntries } from "../sidebarProjectGrouping";
 import { PullRequestGlyph } from "~/components/pullRequest/pullRequestIcons";
 import { readPullRequestListPreferences } from "~/components/pullRequest/pullRequestListPreferences";
+import { readIssueListPreferences } from "~/components/issue/issueListPreferences";
+import { IssueGlyph } from "~/components/issue/issuePresentation";
 import { useThreadRouteTarget } from "../hooks/useThreadRouteTarget";
 import { threadRecentUse } from "@t3tools/shared/paletteSearch";
 
@@ -1653,6 +1655,23 @@ function OpenCommandPaletteDialog(props: {
     });
   }
 
+  if (
+    environments.some(
+      (environment) => environment.serverConfig?.environment.capabilities.issues === true,
+    )
+  ) {
+    actionItems.push({
+      kind: "action",
+      value: "action:issues",
+      searchTerms: ["issues", "issue", "bugs", "tracker", "github", "triage"],
+      title: "Open issues",
+      icon: <IssueGlyph.issue className={ITEM_ICON_CLASS} />,
+      run: async () => {
+        await navigate({ to: "/issues", search: readIssueListPreferences() });
+      },
+    });
+  }
+
   actionItems.push({
     kind: "action",
     value: "action:use-in-another-app",
diff --git a/apps/web/src/components/ReopenClosedViewShortcut.tsx b/apps/web/src/components/ReopenClosedViewShortcut.tsx
index dfb68fe27e80a..3895f272d20f5 100644
--- a/apps/web/src/components/ReopenClosedViewShortcut.tsx
+++ b/apps/web/src/components/ReopenClosedViewShortcut.tsx
@@ -23,6 +23,7 @@ import {
   reopenClosedView,
 } from "../reopenClosedView";
 import {
+  ISSUES_PANEL_REF,
   PULL_REQUESTS_PANEL_REF,
   selectActiveRightPanel,
   selectSelectedRightPanelSurface,
@@ -42,6 +43,7 @@ import {
   resolveThreadRouteTarget,
 } from "../threadRoutes";
 import { toastManager } from "./ui/toast";
+import { readIssueListPreferences } from "./issue/issueListPreferences";
 
 const PREVIEW_FORWARDED_COMMANDS = [
   "workspace.focusNext",
@@ -58,6 +60,8 @@ const PREVIEW_FORWARDED_COMMANDS = [
 
 const isGlobalPullRequests = (ref: ScopedThreadRef) =>
   scopedThreadKey(ref) === scopedThreadKey(PULL_REQUESTS_PANEL_REF);
+const isGlobalIssues = (ref: ScopedThreadRef) =>
+  scopedThreadKey(ref) === scopedThreadKey(ISSUES_PANEL_REF);
 
 export function ReopenClosedViewShortcut() {
   const navigate = useNavigate();
@@ -91,7 +95,7 @@ export function ReopenClosedViewShortcut() {
     const { drop, restore } = planNextReopen(useClosedViewStore.getState().entries, (entry) => {
       const ref = entry.threadRef;
       const panel = selectThreadRightPanelState(panelsByThread, ref);
-      if (isGlobalPullRequests(ref)) {
+      if (isGlobalPullRequests(ref) || isGlobalIssues(ref)) {
         return {
           environmentKnown: true,
           catalogReady: true,
@@ -119,7 +123,8 @@ export function ReopenClosedViewShortcut() {
 
     const ref = restore.threadRef;
     const globalPullRequests = isGlobalPullRequests(ref);
-    const thread = globalPullRequests ? null : readThreadShell(ref);
+    const globalIssues = isGlobalIssues(ref);
+    const thread = globalPullRequests || globalIssues ? null : readThreadShell(ref);
     const owner = thread ?? drafts.getDraftThreadByRef(ref);
     const project = owner ? readProject(scopeProjectRef(ref.environmentId, owner.projectId)) : null;
     if (!(await reopenClosedView(restore, { openPreview, workspaceAvailable: project !== null }))) {
@@ -136,6 +141,8 @@ export function ReopenClosedViewShortcut() {
         to: "/pull-requests",
         search: (previous) => pullRequestsSearchForRestore(previous, selected),
       });
+    } else if (globalIssues) {
+      await navigate({ to: "/issues", search: readIssueListPreferences() });
     } else {
       const draftId = thread === null ? drafts.getDraftIdByRef(ref) : null;
       if (draftId !== null)
diff --git a/apps/web/src/components/RightPanelTabs.tsx b/apps/web/src/components/RightPanelTabs.tsx
index 7976616286735..c210bf658fae7 100644
--- a/apps/web/src/components/RightPanelTabs.tsx
+++ b/apps/web/src/components/RightPanelTabs.tsx
@@ -36,6 +36,7 @@ import { restrictToFirstScrollableAncestor, restrictToHorizontalAxis } from "@dn
 import { horizontalListSortingStrategy, SortableContext, useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import {
+  CircleDotIcon,
   Smartphone,
   ChevronDown,
   ChevronLeft,
@@ -592,6 +593,8 @@ function surfaceTitle(
       return `#${surface.number}`;
     case "pull-requests":
       return "Pull requests";
+    case "issue":
+      return surface.key;
     case "device":
       return surface.title ?? surface.target?.name ?? "Device";
     case "side-chat":
@@ -684,6 +687,8 @@ function SurfaceIcon({
       );
     case "pull-requests":
       return <PullRequestGlyph.link className="size-3 shrink-0" />;
+    case "issue":
+      return <CircleDotIcon className="size-3 shrink-0" />;
     case "side-chat":
       return <SideChatTabIcon environmentId={environmentId} threadId={surface.threadId} />;
     case "device":
diff --git a/apps/web/src/components/issue/IssueCreateDialog.tsx b/apps/web/src/components/issue/IssueCreateDialog.tsx
new file mode 100644
index 0000000000000..e85775bbb5643
--- /dev/null
+++ b/apps/web/src/components/issue/IssueCreateDialog.tsx
@@ -0,0 +1,270 @@
+import { useAtomValue } from "@effect/atom-react";
+import { squashAtomCommandFailure } from "@t3tools/client-runtime/state/runtime";
+import type { EnvironmentId, IssueCreateResult, IssueScopeRef } from "@t3tools/contracts";
+import { useState } from "react";
+
+import { issueEnvironment } from "~/state/issues";
+import { useEnvironmentQuery } from "~/state/query";
+import { useAtomCommand } from "~/state/use-atom-command";
+
+import { Button } from "../ui/button";
+import {
+  Dialog,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogPanel,
+  DialogPopup,
+  DialogTitle,
+} from "../ui/dialog";
+import { Input } from "../ui/input";
+import { Label } from "../ui/label";
+import { Select, SelectItem, SelectPopup, SelectTrigger, SelectValue } from "../ui/select";
+import { Textarea } from "../ui/textarea";
+import { toastManager } from "../ui/toast";
+import { readableFailure } from "../pullRequest/pullRequestDetail.logic";
+
+export interface IssueCreateScope {
+  readonly environmentId: EnvironmentId;
+  readonly projectTitle: string;
+  readonly scope: IssueScopeRef;
+  readonly templates: boolean;
+}
+
+const BLANK = "__blank__";
+
+/**
+ * One text box with a draft in it, on any tracker: a chosen template fills the title, body,
+ * labels and assignees, and the writer takes it from there. Templates are read when the dialog
+ * opens, for the scope it opens on.
+ */
+export function IssueCreateDialog({
+  open,
+  scopes,
+  onOpenChange,
+  onCreated,
+}: {
+  open: boolean;
+  /** Every writable scope the page knows about; the first is preselected. */
+  scopes: ReadonlyArray<IssueCreateScope>;
+  onOpenChange: (open: boolean) => void;
+  onCreated: (scope: IssueCreateScope, result: IssueCreateResult) => void;
+}) {
+  const [scopeIndex, setScopeIndex] = useState(0);
+  const scope = scopes[Math.min(scopeIndex, scopes.length - 1)] ?? null;
+  const [templateKey, setTemplateKey] = useState<string>(BLANK);
+  const [title, setTitle] = useState("");
+  const [body, setBody] = useState("");
+  const [extras, setExtras] = useState<{
+    labels: ReadonlyArray<string>;
+    assignees: ReadonlyArray<string>;
+  }>({
+    labels: [],
+    assignees: [],
+  });
+  const [pending, setPending] = useState(false);
+  const create = useAtomCommand(issueEnvironment.create, { reportFailure: false });
+  const canWrite = useAtomValue(
+    issueEnvironment.create.permissionAtom(scope?.environmentId ?? null),
+  );
+  const templatesQuery = useEnvironmentQuery(
+    open && scope !== null && scope.templates
+      ? issueEnvironment.templates({ environmentId: scope.environmentId, input: scope.scope })
+      : null,
+  );
+  const templates = templatesQuery.data?.templates ?? [];
+  const blankAllowed = templatesQuery.data?.blankIssuesEnabled ?? true;
+
+  const reset = () => {
+    setTemplateKey(BLANK);
+    setTitle("");
+    setBody("");
+    setExtras({ labels: [], assignees: [] });
+  };
+
+  const chooseTemplate = (key: string | null) => {
+    const next = key ?? BLANK;
+    setTemplateKey(next);
+    const template = templates.find((entry) => entry.key === next);
+    if (!template) {
+      setExtras({ labels: [], assignees: [] });
+      return;
+    }
+    // A template is a starting point: it only overwrites what the writer has not typed yet.
+    if (title.trim().length === 0) setTitle(template.title);
+    if (body.trim().length === 0) setBody(template.body);
+    setExtras({ labels: template.labels, assignees: template.assignees });
+  };
+
+  const submit = async () => {
+    if (scope === null || pending) return;
+    const trimmedTitle = title.trim();
+    if (trimmedTitle.length === 0) return;
+    setPending(true);
+    const result = await create({
+      environmentId: scope.environmentId,
+      input: {
+        ...scope.scope,
+        title: trimmedTitle,
+        body,
+        labels: extras.labels,
+        assignees: extras.assignees,
+      },
+    });
+    setPending(false);
+    if (result._tag === "Failure") {
+      toastManager.add({
+        type: "error",
+        title: "The issue could not be created",
+        description: readableFailure(squashAtomCommandFailure(result), "The tracker refused it."),
+      });
+      return;
+    }
+    toastManager.add({ type: "success", title: `Created ${result.value.displayKey}` });
+    reset();
+    onCreated(scope, result.value);
+    onOpenChange(false);
+  };
+
+  const blocked =
+    scope === null
+      ? "No project here can file issues."
+      : !canWrite
+        ? "Creating issues needs the source-control write scope."
+        : !blankAllowed && templateKey === BLANK && templates.length > 0
+          ? "This tracker requires a template."
+          : null;
+
+  return (
+    <Dialog open={open} onOpenChange={(next) => (pending ? undefined : onOpenChange(next))}>
+      <DialogPopup className="max-w-2xl">
+        <DialogHeader>
+          <DialogTitle>New issue</DialogTitle>
+          <DialogDescription>File an issue on the project's tracker.</DialogDescription>
+        </DialogHeader>
+        <DialogPanel>
+          <div className="flex flex-wrap gap-3">
+            {scopes.length > 1 ? (
+              <div className="flex min-w-0 flex-1 flex-col gap-1">
+                <Label htmlFor="issue-create-scope">Project</Label>
+                <Select
+                  value={String(scopeIndex)}
+                  onValueChange={(value) => {
+                    if (value === null) return;
+                    setScopeIndex(Number(value));
+                    setTemplateKey(BLANK);
+                    setExtras({ labels: [], assignees: [] });
+                  }}
+                >
+                  <SelectTrigger id="issue-create-scope" size="sm" aria-label="Project">
+                    <SelectValue>
+                      {scope ? `${scope.projectTitle} · ${scope.scope.scope}` : ""}
+                    </SelectValue>
+                  </SelectTrigger>
+                  <SelectPopup>
+                    {scopes.map((entry, index) => (
+                      <SelectItem
+                        key={`${entry.environmentId}:${entry.scope.projectId}`}
+                        value={String(index)}
+                      >
+                        {entry.projectTitle} · {entry.scope.scope}
+                      </SelectItem>
+                    ))}
+                  </SelectPopup>
+                </Select>
+              </div>
+            ) : null}
+            {scope?.templates && (templates.length > 0 || templatesQuery.isPending) ? (
+              <div className="flex min-w-0 flex-1 flex-col gap-1">
+                <Label htmlFor="issue-create-template">Template</Label>
+                <Select
+                  value={templateKey}
+                  onValueChange={chooseTemplate}
+                  disabled={templatesQuery.isPending}
+                >
+                  <SelectTrigger id="issue-create-template" size="sm" aria-label="Template">
+                    <SelectValue>
+                      {templatesQuery.isPending
+                        ? "Loading templates…"
+                        : (templates.find((t) => t.key === templateKey)?.name ?? "Blank issue")}
+                    </SelectValue>
+                  </SelectTrigger>
+                  <SelectPopup>
+                    {blankAllowed ? <SelectItem value={BLANK}>Blank issue</SelectItem> : null}
+                    {templates.map((template) => (
+                      <SelectItem key={template.key} value={template.key}>
+                        <span className="flex min-w-0 flex-col">
+                          <span className="truncate">{template.name}</span>
+                          {template.about ? (
+                            <span className="truncate text-xs text-muted-foreground">
+                              {template.about}
+                            </span>
+                          ) : null}
+                        </span>
+                      </SelectItem>
+                    ))}
+                  </SelectPopup>
+                </Select>
+              </div>
+            ) : null}
+          </div>
+          <div className="flex flex-col gap-1">
+            <Label htmlFor="issue-create-title">Title</Label>
+            <Input
+              id="issue-create-title"
+              autoFocus
+              value={title}
+              disabled={pending}
+              onChange={(event) => setTitle(event.target.value)}
+              placeholder="A short summary"
+            />
+          </div>
+          <div className="flex flex-col gap-1">
+            <Label htmlFor="issue-create-body">Description</Label>
+            <Textarea
+              id="issue-create-body"
+              size="lg"
+              value={body}
+              disabled={pending}
+              onChange={(event) => setBody(event.target.value)}
+              placeholder="Markdown is supported"
+              onKeyDown={(event) => {
+                if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) {
+                  event.preventDefault();
+                  void submit();
+                }
+              }}
+            />
+          </div>
+          {extras.labels.length > 0 || extras.assignees.length > 0 ? (
+            <p className="text-xs text-muted-foreground">
+              {extras.labels.length > 0 ? `Labels: ${extras.labels.join(", ")}` : null}
+              {extras.labels.length > 0 && extras.assignees.length > 0 ? " · " : null}
+              {extras.assignees.length > 0 ? `Assignees: ${extras.assignees.join(", ")}` : null}
+            </p>
+          ) : null}
+          {blocked ? <p className="text-xs text-muted-foreground">{blocked}</p> : null}
+        </DialogPanel>
+        <DialogFooter>
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            disabled={pending}
+            onClick={() => onOpenChange(false)}
+          >
+            Cancel
+          </Button>
+          <Button
+            type="button"
+            size="sm"
+            disabled={pending || blocked !== null || title.trim().length === 0}
+            onClick={() => void submit()}
+          >
+            {pending ? "Creating…" : "Create issue"}
+          </Button>
+        </DialogFooter>
+      </DialogPopup>
+    </Dialog>
+  );
+}
diff --git a/apps/web/src/components/issue/IssueDetailGhost.tsx b/apps/web/src/components/issue/IssueDetailGhost.tsx
new file mode 100644
index 0000000000000..a0423147d60aa
--- /dev/null
+++ b/apps/web/src/components/issue/IssueDetailGhost.tsx
@@ -0,0 +1,104 @@
+import type { IssueListEntry } from "@t3tools/contracts";
+import { ExternalLinkIcon } from "lucide-react";
+
+import { cn } from "~/lib/utils";
+import { formatRelativeTimeLabel } from "~/timestampFormat";
+
+import { Button } from "../ui/button";
+import { PullRequestDetailTitleRow } from "../pullRequest/PullRequestDetailLayout";
+import { GhostBar } from "../pullRequest/PullRequestGhosts";
+import {
+  PullRequestActorLabel,
+  PullRequestLabelChip,
+  PullRequestMetaLine,
+} from "../pullRequest/pullRequestPresentation";
+import { IssueStateGlyph, issueTrackerPresentation } from "./issuePresentation";
+
+/** The issue panel while its detail loads, showing what the list row already knows. */
+export function IssueDetailGhost({ seed }: { seed?: IssueListEntry | null }) {
+  const tracker = seed ? issueTrackerPresentation(seed.tracker) : null;
+  return (
+    <div
+      role="status"
+      aria-label="Loading issue"
+      className={cn(
+        "scrollbar-gutter-both flex h-full min-h-0 flex-col gap-4 overflow-hidden px-4 pt-3 pb-4",
+        !seed && "motion-safe:animate-skeleton",
+      )}
+    >
+      {seed && tracker ? (
+        <>
+          <PullRequestDetailTitleRow className="gap-2">
+            <IssueStateGlyph state={seed.state} />
+            <span className="shrink-0 font-mono text-xs text-muted-foreground">
+              {seed.displayKey}
+            </span>
+            <span className="min-w-0 flex-1 truncate text-xs text-muted-foreground">
+              <tracker.Icon aria-hidden className="mr-1 inline size-3 align-[-2px]" />
+              {seed.scope}
+            </span>
+            <Button
+              size="icon-xs"
+              variant="ghost"
+              aria-label={`Open on ${tracker.providerName}`}
+              render={<a href={seed.url} target="_blank" rel="noopener noreferrer" />}
+            >
+              <ExternalLinkIcon aria-hidden className="size-3.5" />
+            </Button>
+          </PullRequestDetailTitleRow>
+          {/* Leaves room for the edit button, so the title wraps the same once loaded. */}
+          <h2 className="pr-7 text-base font-semibold leading-snug">{seed.title}</h2>
+          <PullRequestMetaLine className="text-xs text-muted-foreground">
+            <PullRequestActorLabel actor={seed.author} />
+            <span>opened {formatRelativeTimeLabel(seed.createdAt)}</span>
+            {seed.closedAt ? <span>closed {formatRelativeTimeLabel(seed.closedAt)}</span> : null}
+          </PullRequestMetaLine>
+          {/* Both rows hold the height of the picker button the loaded panel puts in them. */}
+          <div className="flex min-h-6 flex-wrap items-center gap-1.5">
+            {seed.labels.map((label) => (
+              <PullRequestLabelChip key={label.name} label={label} />
+            ))}
+          </div>
+          <div className="flex min-h-6 flex-wrap items-center gap-1.5 text-xs text-muted-foreground">
+            <span className="shrink-0">Assignees</span>
+            {seed.assignees.length === 0 ? <span>none</span> : null}
+            {seed.assignees.map((actor) => (
+              <PullRequestActorLabel key={actor.login} actor={actor} />
+            ))}
+          </div>
+        </>
+      ) : (
+        <>
+          <div className="flex h-7 items-center gap-2">
+            <GhostBar className="size-4 rounded-full" />
+            <GhostBar className="w-12" />
+            <GhostBar className="w-32" />
+          </div>
+          <GhostBar className="h-5 w-3/4" />
+          <GhostBar className="w-48" />
+          <GhostBar className="w-32" />
+        </>
+      )}
+      <div className={cn("flex flex-col gap-4", seed && "motion-safe:animate-skeleton")}>
+        <div className="flex flex-col gap-2.5 rounded-lg border border-border/60 p-3">
+          <GhostBar className="w-20" />
+          <GhostBar className="h-3.5 w-full" />
+          <GhostBar className="h-3.5 w-5/6" />
+          <GhostBar className="h-3.5 w-2/3" />
+          <GhostBar className="h-3.5 w-3/4" />
+        </div>
+        <GhostBar className="w-16" />
+        {[0, 1].map((row) => (
+          <div key={row} className="flex items-start gap-2">
+            <GhostBar className="size-5 shrink-0 rounded-full" />
+            <div className="flex-1 space-y-1.5">
+              <GhostBar className="w-1/3" />
+              <GhostBar className="w-full" />
+              <GhostBar className="w-3/4" />
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/src/components/issue/IssueDetailPanel.tsx b/apps/web/src/components/issue/IssueDetailPanel.tsx
new file mode 100644
index 0000000000000..b7ae136c020c3
--- /dev/null
+++ b/apps/web/src/components/issue/IssueDetailPanel.tsx
@@ -0,0 +1,844 @@
+import { useAtomValue } from "@effect/atom-react";
+import { prependIssueComments } from "@t3tools/client-runtime/state/issues";
+import { squashAtomCommandFailure } from "@t3tools/client-runtime/state/runtime";
+import type {
+  EnvironmentId,
+  IssueAssigneeCandidate,
+  IssueComment,
+  IssueDetail,
+  IssueEvent,
+  IssueLabelCandidate,
+  IssueLinkedPullRequest,
+  IssueListEntry,
+  IssueReaction,
+  IssueRef,
+  PullRequestRef,
+  ScopedThreadRef,
+} from "@t3tools/contracts";
+import {
+  CheckIcon,
+  ChevronDownIcon,
+  ExternalLinkIcon,
+  SendIcon,
+  TagIcon,
+  UserPlusIcon,
+} from "lucide-react";
+import { useState, type ReactNode } from "react";
+
+import { RefreshIcon } from "~/components/ui/refresh-icon";
+import { issueEnvironment } from "~/state/issues";
+import { useProjects } from "~/state/entities";
+import { useEnvironmentQuery } from "~/state/query";
+import { useAtomCommand } from "~/state/use-atom-command";
+import { formatRelativeTimeLabel } from "~/timestampFormat";
+
+import { Button, InlineButton } from "../ui/button";
+import { Input } from "../ui/input";
+import { Menu, MenuItem, MenuPopup, MenuTrigger } from "../ui/menu";
+import { Textarea } from "../ui/textarea";
+import { toastManager } from "../ui/toast";
+import { PullRequestCandidatePicker } from "../pullRequest/PullRequestCandidatePicker";
+import { PullRequestCommentBody } from "../pullRequest/PullRequestCommentBody";
+import { PullRequestDetailTitleRow } from "../pullRequest/PullRequestDetailLayout";
+import { PullRequestEditButton } from "../pullRequest/PullRequestEditButton";
+import { PullRequestMarkdownEditor } from "../pullRequest/PullRequestMarkdownEditor";
+import { readableFailure } from "../pullRequest/pullRequestDetail.logic";
+import { pullRequestLabelColor } from "../pullRequest/pullRequestList.logic";
+import {
+  PullRequestActorLabel,
+  PullRequestLabelChip,
+  PullRequestMetaLine,
+  PullRequestStateGlyph,
+} from "../pullRequest/pullRequestPresentation";
+import { IssueDetailGhost } from "./IssueDetailGhost";
+import { ReactionBar } from "../pullRequest/PullRequestReactions";
+import { PullRequestsUnavailableState } from "../pullRequest/PullRequestsUnavailableState";
+import {
+  issueCloseReasonLabel,
+  IssueStateGlyph,
+  issueTrackerPresentation,
+} from "./issuePresentation";
+
+/** Why a control is off, said once so each disabled affordance can point at it. */
+function writeBlockReason(detail: IssueDetail, canWrite: boolean): string | null {
+  if (!canWrite) return "Writing to this tracker needs the source-control write scope.";
+  if (!detail.writable)
+    return "This issue is outside every project's own scope, so it is read-only here.";
+  return null;
+}
+
+function IssueReactionBar({
+  reactions,
+  canReact,
+  subjectId,
+  environmentId,
+  reference,
+}: {
+  reactions: ReadonlyArray<IssueReaction>;
+  canReact: boolean;
+  subjectId?: string | undefined;
+  environmentId: EnvironmentId;
+  reference: IssueRef;
+}) {
+  const react = useAtomCommand(issueEnvironment.react, { reportFailure: false });
+  return (
+    <ReactionBar
+      reactions={reactions}
+      canReact={canReact}
+      onReact={async (content, reacted) => {
+        const result = await react({
+          environmentId,
+          input: {
+            ...reference,
+            ...(subjectId === undefined ? {} : { subjectId }),
+            content,
+            reacted,
+          },
+        });
+        return result._tag !== "Failure";
+      }}
+    />
+  );
+}
+
+function IssueLabelPicker({
+  environmentId,
+  reference,
+  detail,
+  allowed,
+  disabledReason,
+}: {
+  environmentId: EnvironmentId;
+  reference: IssueRef;
+  detail: IssueDetail;
+  allowed: boolean;
+  disabledReason: string;
+}) {
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  const [pending, setPending] = useState<string | null>(null);
+  const candidatesQuery = useEnvironmentQuery(
+    open ? issueEnvironment.candidates({ environmentId, input: reference }) : null,
+  );
+  const update = useAtomCommand(issueEnvironment.update, { reportFailure: false });
+  const applied = new Set(detail.labels.map((label) => label.name));
+  const needle = query.toLowerCase();
+  const candidates = (candidatesQuery.data?.labels ?? []).filter(
+    (label) =>
+      needle.length === 0 ||
+      label.name.toLowerCase().includes(needle) ||
+      (label.description ?? "").toLowerCase().includes(needle),
+  );
+  const toggle = async (candidate: IssueLabelCandidate) => {
+    if (pending !== null) return;
+    setPending(candidate.name);
+    const labels = applied.has(candidate.name)
+      ? detail.labels.filter((label) => label.name !== candidate.name).map((label) => label.name)
+      : [...applied, candidate.name];
+    const result = await update({ environmentId, input: { ...reference, labels } });
+    setPending(null);
+    if (result._tag === "Failure") {
+      toastManager.add({
+        type: "error",
+        title: "Could not change labels",
+        description: readableFailure(squashAtomCommandFailure(result), "The tracker refused it."),
+      });
+    }
+  };
+  return (
+    <PullRequestCandidatePicker
+      icon={<TagIcon className="size-3.5" />}
+      label="Change labels"
+      allowed={allowed}
+      disabledReason={disabledReason}
+      open={open}
+      onOpenChange={setOpen}
+      query={query}
+      onQueryChange={setQuery}
+      searchLabel="Search labels"
+      isPending={candidatesQuery.isPending && candidatesQuery.data === null}
+      error={candidatesQuery.data === null ? candidatesQuery.error : null}
+      candidates={candidates}
+      emptyLabel="This tracker has no labels."
+      noMatchLabel="No label matches that."
+      errorLabel="The labels could not be read."
+      truncated={candidatesQuery.data?.truncated === true}
+      truncatedLabel="More labels exist than are listed here."
+      candidateKey={(candidate) => candidate.name}
+      disabled={pending !== null}
+      onSelect={(candidate) => void toggle(candidate)}
+    >
+      {(candidate) => {
+        const dot = pullRequestLabelColor(candidate.color);
+        return (
+          <>
+            <span
+              aria-hidden
+              className="size-2 shrink-0 rounded-full bg-muted-foreground"
+              {...(dot ? { style: { backgroundColor: dot } } : {})}
+            />
+            <span className="min-w-0 flex-1 truncate">
+              {candidate.name}
+              {candidate.description ? (
+                <span className="text-muted-foreground"> · {candidate.description}</span>
+              ) : null}
+            </span>
+            {applied.has(candidate.name) ? (
+              <CheckIcon aria-label="Applied" className="size-3.5 shrink-0" />
+            ) : null}
+          </>
+        );
+      }}
+    </PullRequestCandidatePicker>
+  );
+}
+
+function IssueAssigneePicker({
+  environmentId,
+  reference,
+  detail,
+  allowed,
+  disabledReason,
+}: {
+  environmentId: EnvironmentId;
+  reference: IssueRef;
+  detail: IssueDetail;
+  allowed: boolean;
+  disabledReason: string;
+}) {
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  const [pending, setPending] = useState<string | null>(null);
+  const candidatesQuery = useEnvironmentQuery(
+    open ? issueEnvironment.candidates({ environmentId, input: reference }) : null,
+  );
+  const update = useAtomCommand(issueEnvironment.update, { reportFailure: false });
+  const assigned = new Set(detail.assignees.map((actor) => actor.login.toLowerCase()));
+  const needle = query.toLowerCase();
+  const candidates = (candidatesQuery.data?.assignees ?? []).filter(
+    (candidate) =>
+      needle.length === 0 ||
+      candidate.login.toLowerCase().includes(needle) ||
+      (candidate.name ?? "").toLowerCase().includes(needle),
+  );
+  const toggle = async (candidate: IssueAssigneeCandidate) => {
+    if (pending !== null) return;
+    setPending(candidate.id);
+    const login = candidate.login.toLowerCase();
+    const assignees = assigned.has(login)
+      ? detail.assignees.filter((actor) => actor.login.toLowerCase() !== login).map((a) => a.login)
+      : [...detail.assignees.map((actor) => actor.login), candidate.id];
+    const result = await update({ environmentId, input: { ...reference, assignees } });
+    setPending(null);
+    if (result._tag === "Failure") {
+      toastManager.add({
+        type: "error",
+        title: "Could not change assignees",
+        description: readableFailure(squashAtomCommandFailure(result), "The tracker refused it."),
+      });
+    }
+  };
+  return (
+    <PullRequestCandidatePicker
+      icon={<UserPlusIcon className="size-3.5" />}
+      label="Change assignees"
+      allowed={allowed}
+      disabledReason={disabledReason}
+      open={open}
+      onOpenChange={setOpen}
+      query={query}
+      onQueryChange={setQuery}
+      searchLabel="Search people"
+      isPending={candidatesQuery.isPending && candidatesQuery.data === null}
+      error={candidatesQuery.data === null ? candidatesQuery.error : null}
+      candidates={candidates}
+      emptyLabel="Nobody can be assigned here."
+      noMatchLabel="Nobody matches that."
+      errorLabel="The people could not be read."
+      truncated={candidatesQuery.data?.truncated === true}
+      truncatedLabel="More people exist than are listed here."
+      candidateKey={(candidate) => candidate.id}
+      disabled={pending !== null}
+      onSelect={(candidate) => void toggle(candidate)}
+    >
+      {(candidate) => (
+        <>
+          <PullRequestActorLabel actor={candidate} tooltip={false} className="min-w-0 flex-1" />
+          {assigned.has(candidate.login.toLowerCase()) ? (
+            <CheckIcon aria-label="Assigned" className="size-3.5 shrink-0" />
+          ) : null}
+        </>
+      )}
+    </PullRequestCandidatePicker>
+  );
+}
+
+function eventSentence(event: IssueEvent): string {
+  switch (event.kind) {
+    case "closed":
+      return event.detail
+        ? `closed this as ${issueCloseReasonLabel(event.detail).toLowerCase()}`
+        : "closed this";
+    case "reopened":
+      return "reopened this";
+    case "labeled":
+      return event.detail ? `added the ${event.detail} label` : "added a label";
+    case "unlabeled":
+      return event.detail ? `removed the ${event.detail} label` : "removed a label";
+    case "assigned":
+      return event.detail ? `assigned ${event.detail}` : "assigned someone";
+    case "unassigned":
+      return event.detail ? `unassigned ${event.detail}` : "unassigned someone";
+    case "renamed":
+      return event.detail ? `renamed this to “${event.detail}”` : "renamed this";
+    case "referenced":
+      return event.detail ? `referenced this from ${event.detail}` : "referenced this";
+    case "state-changed":
+      return event.detail ? `moved this to ${event.detail}` : "changed the state";
+  }
+}
+
+type TimelineItem =
+  | { kind: "comment"; at: string; comment: IssueComment }
+  | { kind: "event"; at: string; event: IssueEvent };
+
+function LinkedPullRequestRow({
+  link,
+  onSelect,
+}: {
+  link: IssueLinkedPullRequest;
+  onSelect: (() => void) | null;
+}) {
+  const body = (
+    <>
+      <PullRequestStateGlyph state={link.state} isDraft={link.isDraft} />
+      <span className="min-w-0 flex-1 truncate text-sm">{link.title}</span>
+      <span className="shrink-0 font-mono text-xs text-muted-foreground">
+        {link.repository}#{link.number}
+      </span>
+      {link.closesIssue ? (
+        <span className="shrink-0 text-2xs text-muted-foreground">closes</span>
+      ) : null}
+    </>
+  );
+  const className =
+    "flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left hover:bg-accent/60";
+  return onSelect ? (
+    <button type="button" className={className} onClick={onSelect}>
+      {body}
+    </button>
+  ) : (
+    <a href={link.url} target="_blank" rel="noopener noreferrer" className={className}>
+      {body}
+    </a>
+  );
+}
+
+export function IssueDetailPanel({
+  environmentId,
+  reference,
+  threadRef = null,
+  listEntry = null,
+  onSelectPullRequest,
+}: {
+  environmentId: EnvironmentId;
+  reference: IssueRef;
+  /** The list row this issue was opened from, shown until the detail arrives. */
+  listEntry?: IssueListEntry | null;
+  threadRef?: ScopedThreadRef | null;
+  /** Opens a linked change request beside this one; absent, the link goes to the host. */
+  onSelectPullRequest?: ((reference: PullRequestRef) => void) | undefined;
+}) {
+  const detailQuery = useEnvironmentQuery(
+    issueEnvironment.detail({ environmentId, input: reference }),
+  );
+  const detail = detailQuery.data;
+  const canWrite = useAtomValue(issueEnvironment.comment.permissionAtom(environmentId));
+  const projects = useProjects();
+  const cwd =
+    projects.find((p) => p.environmentId === environmentId && p.id === reference.projectId)
+      ?.workspaceRoot ?? "";
+
+  const [older, setOlder] = useState<{
+    readonly seed: string | null;
+    readonly comments: ReadonlyArray<IssueComment>;
+    readonly cursor: string | null;
+  } | null>(null);
+  const loadComments = useAtomCommand(issueEnvironment.comments, { reportFailure: false });
+  const [loadingOlder, setLoadingOlder] = useState(false);
+  const comment = useAtomCommand(issueEnvironment.comment, { reportFailure: false });
+  const update = useAtomCommand(issueEnvironment.update, { reportFailure: false });
+  const setState = useAtomCommand(issueEnvironment.setState, { reportFailure: false });
+  const [draft, setDraft] = useState("");
+  const [submitting, setSubmitting] = useState(false);
+  const [editing, setEditing] = useState<"title" | "body" | null>(null);
+  const [titleDraft, setTitleDraft] = useState("");
+  const [saving, setSaving] = useState(false);
+  const [changingState, setChangingState] = useState(false);
+
+  if (detail === null) {
+    if (detailQuery.error !== null && !detailQuery.isPending) {
+      return (
+        <PullRequestsUnavailableState
+          title="Could not load this issue"
+          error={detailQuery.error}
+          onRetry={detailQuery.refresh}
+        />
+      );
+    }
+    return <IssueDetailGhost seed={listEntry} />;
+  }
+
+  // Older pages are tied to the cursor the detail was read with; a refreshed detail starts over.
+  const olderComments = older?.seed === detail.commentsCursor ? older.comments : [];
+  const nextCursor = older?.seed === detail.commentsCursor ? older.cursor : detail.commentsCursor;
+  const comments = prependIssueComments(detail.comments, olderComments);
+  const timeline: ReadonlyArray<TimelineItem> = [
+    ...comments.map((c): TimelineItem => ({ kind: "comment", at: c.createdAt, comment: c })),
+    ...detail.events.map((e): TimelineItem => ({ kind: "event", at: e.createdAt, event: e })),
+  ].sort((a, b) => Date.parse(a.at) - Date.parse(b.at));
+
+  const blocked = writeBlockReason(detail, canWrite);
+  const may = (capability: boolean, permission: boolean) =>
+    blocked === null && capability && permission;
+  const canComment = may(detail.capabilities.comment, detail.viewerPermissions.comment);
+  const canEdit = may(detail.capabilities.edit, detail.viewerPermissions.edit);
+  const canLabel = may(detail.capabilities.labels, detail.viewerPermissions.labels);
+  const canAssign = may(detail.capabilities.assignees, detail.viewerPermissions.assignees);
+  const canReact = blocked === null && detail.capabilities.reactions;
+  const canSetState = may(detail.capabilities.states.length > 0, detail.viewerPermissions.setState);
+  const tracker = issueTrackerPresentation(detail.tracker);
+  const otherStates = detail.capabilities.states.filter(
+    (state) => state.category !== detail.state.category || state.name !== detail.state.name,
+  );
+  const closingStates = otherStates.filter((state) => state.category === "closed");
+  const openingStates = otherStates.filter((state) => state.category === "open");
+
+  const loadOlder = async () => {
+    if (nextCursor === null || loadingOlder) return;
+    setLoadingOlder(true);
+    const result = await loadComments({
+      environmentId,
+      input: { ...reference, cursor: nextCursor },
+    });
+    setLoadingOlder(false);
+    if (result._tag === "Failure") {
+      toastManager.add({ type: "error", title: "Older comments could not be read" });
+      return;
+    }
+    setOlder({
+      seed: detail.commentsCursor,
+      comments: prependIssueComments(olderComments, result.value.comments),
+      cursor: result.value.nextCursor,
+    });
+  };
+
+  const submitComment = async () => {
+    const body = draft.trim();
+    if (body.length === 0 || submitting) return;
+    setSubmitting(true);
+    const result = await comment({ environmentId, input: { ...reference, body: draft } });
+    setSubmitting(false);
+    if (result._tag === "Failure") {
+      toastManager.add({
+        type: "error",
+        title: "The comment could not be posted",
+        description: readableFailure(squashAtomCommandFailure(result), "The tracker refused it."),
+      });
+      return;
+    }
+    setDraft("");
+  };
+
+  const save = async (patch: { title?: string; body?: string }) => {
+    setSaving(true);
+    const result = await update({ environmentId, input: { ...reference, ...patch } });
+    setSaving(false);
+    if (result._tag === "Failure") {
+      toastManager.add({
+        type: "error",
+        title: "The issue could not be updated",
+        description: readableFailure(squashAtomCommandFailure(result), "The tracker refused it."),
+      });
+      return;
+    }
+    setEditing(null);
+  };
+
+  const moveTo = async (state: string, closeReason?: string) => {
+    if (changingState) return;
+    setChangingState(true);
+    const result = await setState({
+      environmentId,
+      input: { ...reference, state, ...(closeReason === undefined ? {} : { closeReason }) },
+    });
+    setChangingState(false);
+    if (result._tag === "Failure") {
+      toastManager.add({
+        type: "error",
+        title: "The state could not be changed",
+        description: readableFailure(squashAtomCommandFailure(result), "The tracker refused it."),
+      });
+    }
+  };
+
+  const stateControl: ReactNode = canSetState ? (
+    <span className="flex shrink-0 items-center gap-1">
+      {openingStates.length === 1 && closingStates.length === 0 ? (
+        <Button
+          size="xs"
+          variant="outline"
+          disabled={changingState}
+          onClick={() => void moveTo(openingStates[0]!.name)}
+        >
+          Reopen
+        </Button>
+      ) : null}
+      {closingStates.length === 1 &&
+      detail.capabilities.closeReasons.length === 0 &&
+      openingStates.length === 0 ? (
+        <Button
+          size="xs"
+          variant="outline"
+          disabled={changingState}
+          onClick={() => void moveTo(closingStates[0]!.name)}
+        >
+          Close
+        </Button>
+      ) : null}
+      {(closingStates.length > 0 && detail.capabilities.closeReasons.length > 0) ||
+      otherStates.length > 1 ? (
+        <Menu>
+          <MenuTrigger render={<Button size="xs" variant="outline" disabled={changingState} />}>
+            {detail.state.category === "open" ? "Close" : "Change state"}
+            <ChevronDownIcon aria-hidden className="size-3" />
+          </MenuTrigger>
+          <MenuPopup align="end">
+            {otherStates.flatMap((state) =>
+              state.category === "closed" && detail.capabilities.closeReasons.length > 0
+                ? detail.capabilities.closeReasons.map((reason) => (
+                    <MenuItem
+                      key={`${state.name}:${reason}`}
+                      onClick={() => void moveTo(state.name, reason)}
+                    >
+                      {state.name === "closed" ? "Close" : state.name} as{" "}
+                      {issueCloseReasonLabel(reason).toLowerCase()}
+                    </MenuItem>
+                  ))
+                : [
+                    <MenuItem key={state.name} onClick={() => void moveTo(state.name)}>
+                      {state.category === "open" && state.name === "open"
+                        ? "Reopen"
+                        : state.name === "closed"
+                          ? "Close"
+                          : `Move to ${state.name}`}
+                    </MenuItem>,
+                  ],
+            )}
+          </MenuPopup>
+        </Menu>
+      ) : null}
+    </span>
+  ) : null;
+
+  return (
+    <div className="flex h-full min-h-0 flex-col">
+      <div className="scrollbar-gutter-both min-h-0 flex-1 overflow-y-auto">
+        <div className="flex flex-col gap-4 px-4 pt-3 pb-4">
+          <PullRequestDetailTitleRow className="gap-2">
+            <IssueStateGlyph state={detail.state} />
+            <span className="shrink-0 font-mono text-xs text-muted-foreground">
+              {detail.displayKey}
+            </span>
+            <span className="min-w-0 flex-1 truncate text-xs text-muted-foreground">
+              <tracker.Icon aria-hidden className="mr-1 inline size-3 align-[-2px]" />
+              {detail.scope}
+            </span>
+            {stateControl}
+            <Button
+              size="icon-xs"
+              variant="ghost"
+              aria-label="Refresh issue"
+              disabled={detailQuery.isPending}
+              onClick={detailQuery.refresh}
+            >
+              <RefreshIcon size="sm" refreshing={detailQuery.isPending} />
+            </Button>
+            <Button
+              size="icon-xs"
+              variant="ghost"
+              aria-label={`Open on ${tracker.providerName}`}
+              render={<a href={detail.url} target="_blank" rel="noopener noreferrer" />}
+            >
+              <ExternalLinkIcon aria-hidden className="size-3.5" />
+            </Button>
+          </PullRequestDetailTitleRow>
+
+          {editing === "title" ? (
+            <form
+              className="flex items-center gap-2"
+              onSubmit={(event) => {
+                event.preventDefault();
+                const next = titleDraft.trim();
+                if (next.length > 0 && next !== detail.title) void save({ title: next });
+                else setEditing(null);
+              }}
+            >
+              <Input
+                autoFocus
+                aria-label="Issue title"
+                value={titleDraft}
+                disabled={saving}
+                onChange={(event) => setTitleDraft(event.target.value)}
+                onKeyDown={(event) => {
+                  if (event.key === "Escape") setEditing(null);
+                }}
+              />
+              <Button type="submit" size="sm" disabled={saving}>
+                Save
+              </Button>
+              <Button
+                type="button"
+                size="sm"
+                variant="outline"
+                disabled={saving}
+                onClick={() => setEditing(null)}
+              >
+                Cancel
+              </Button>
+            </form>
+          ) : (
+            <div className="group flex items-start gap-1">
+              <h2 className="min-w-0 flex-1 text-base font-semibold leading-snug">
+                {detail.title}
+              </h2>
+              {canEdit ? (
+                <PullRequestEditButton
+                  aria-label="Edit title"
+                  onClick={() => {
+                    setTitleDraft(detail.title);
+                    setEditing("title");
+                  }}
+                />
+              ) : null}
+            </div>
+          )}
+
+          <PullRequestMetaLine className="text-xs text-muted-foreground">
+            <PullRequestActorLabel actor={detail.author} />
+            <span>opened {formatRelativeTimeLabel(detail.createdAt)}</span>
+            {detail.closedAt ? (
+              <span>closed {formatRelativeTimeLabel(detail.closedAt)}</span>
+            ) : null}
+            {detail.writable ? null : <span>Read-only</span>}
+          </PullRequestMetaLine>
+
+          <div className="flex flex-wrap items-center gap-1.5">
+            {detail.labels.map((label) => (
+              <PullRequestLabelChip key={label.name} label={label} />
+            ))}
+            {detail.capabilities.labels ? (
+              <IssueLabelPicker
+                environmentId={environmentId}
+                reference={reference}
+                detail={detail}
+                allowed={canLabel}
+                disabledReason={blocked ?? "Changing labels needs triage access on this tracker."}
+              />
+            ) : null}
+          </div>
+          <div className="flex flex-wrap items-center gap-1.5 text-xs text-muted-foreground">
+            <span className="shrink-0">Assignees</span>
+            {detail.assignees.length === 0 ? <span>none</span> : null}
+            {detail.assignees.map((actor) => (
+              <PullRequestActorLabel key={actor.login} actor={actor} />
+            ))}
+            {detail.capabilities.assignees ? (
+              <IssueAssigneePicker
+                environmentId={environmentId}
+                reference={reference}
+                detail={detail}
+                allowed={canAssign}
+                disabledReason={
+                  blocked ?? "Changing assignees needs triage access on this tracker."
+                }
+              />
+            ) : null}
+          </div>
+
+          <section className="group flex flex-col gap-2 rounded-lg border border-border/60 p-3">
+            <div className="flex items-start gap-1">
+              <span className="min-w-0 flex-1 text-xs text-muted-foreground">Description</span>
+              {canEdit && editing !== "body" ? (
+                <PullRequestEditButton
+                  aria-label="Edit description"
+                  onClick={() => setEditing("body")}
+                />
+              ) : null}
+            </div>
+            {editing === "body" ? (
+              <PullRequestMarkdownEditor
+                value={detail.body}
+                cwd={cwd}
+                environmentId={environmentId}
+                threadRef={threadRef}
+                label="Description"
+                completionScope={null}
+                saving={saving}
+                allowEmpty
+                onSave={(next) => void save({ body: next })}
+                onCancel={() => setEditing(null)}
+              />
+            ) : detail.body.trim().length > 0 ? (
+              <PullRequestCommentBody
+                text={detail.body}
+                cwd={cwd}
+                environmentId={environmentId}
+                threadRef={threadRef}
+              />
+            ) : (
+              <p className="text-sm text-muted-foreground italic">No description.</p>
+            )}
+            {detail.reactions !== undefined ? (
+              <IssueReactionBar
+                reactions={detail.reactions}
+                canReact={canReact}
+                environmentId={environmentId}
+                reference={reference}
+              />
+            ) : null}
+          </section>
+
+          {detail.linkedPullRequests.length > 0 ? (
+            <section className="flex flex-col gap-1">
+              <h3 className="text-xs text-muted-foreground">Linked pull requests</h3>
+              {detail.linkedPullRequests.map((link) => (
+                <LinkedPullRequestRow
+                  key={`${link.repository}#${link.number}`}
+                  link={link}
+                  onSelect={
+                    onSelectPullRequest
+                      ? () =>
+                          onSelectPullRequest({
+                            projectId: reference.projectId,
+                            ...(reference.host === undefined ? {} : { host: reference.host }),
+                            repository: link.repository,
+                            number: link.number,
+                          })
+                      : null
+                  }
+                />
+              ))}
+            </section>
+          ) : null}
+
+          <section className="flex flex-col gap-3">
+            <h3 className="text-xs text-muted-foreground">
+              Activity
+              {detail.commentCount > 0
+                ? ` · ${detail.commentCount} ${detail.commentCount === 1 ? "comment" : "comments"}`
+                : ""}
+            </h3>
+            {nextCursor !== null ? (
+              <Button
+                size="sm"
+                variant="outline"
+                className="self-start"
+                disabled={loadingOlder}
+                onClick={() => void loadOlder()}
+              >
+                {loadingOlder ? "Loading…" : "Load older comments"}
+              </Button>
+            ) : null}
+            {timeline.length === 0 ? (
+              <p className="text-sm text-muted-foreground">Nothing has happened here yet.</p>
+            ) : null}
+            {timeline.map((item) =>
+              item.kind === "comment" ? (
+                <article
+                  key={`c:${item.comment.id}`}
+                  className="flex flex-col gap-2 rounded-lg border border-border/60 p-3"
+                >
+                  <PullRequestMetaLine className="text-xs text-muted-foreground">
+                    <PullRequestActorLabel actor={item.comment.author} />
+                    {item.comment.url ? (
+                      <InlineButton
+                        className="text-muted-foreground"
+                        render={
+                          <a href={item.comment.url} target="_blank" rel="noopener noreferrer" />
+                        }
+                      >
+                        {formatRelativeTimeLabel(item.comment.createdAt)}
+                      </InlineButton>
+                    ) : (
+                      <span>{formatRelativeTimeLabel(item.comment.createdAt)}</span>
+                    )}
+                  </PullRequestMetaLine>
+                  <PullRequestCommentBody
+                    text={item.comment.body}
+                    cwd={cwd}
+                    environmentId={environmentId}
+                    threadRef={threadRef}
+                  />
+                  {item.comment.reactions !== undefined ? (
+                    <IssueReactionBar
+                      reactions={item.comment.reactions}
+                      canReact={canReact}
+                      subjectId={item.comment.id}
+                      environmentId={environmentId}
+                      reference={reference}
+                    />
+                  ) : null}
+                </article>
+              ) : (
+                <PullRequestMetaLine
+                  key={`e:${item.event.id}`}
+                  className="px-1 text-xs text-muted-foreground"
+                >
+                  <PullRequestActorLabel actor={item.event.actor} />
+                  <span>{eventSentence(item.event)}</span>
+                  <span>{formatRelativeTimeLabel(item.event.createdAt)}</span>
+                </PullRequestMetaLine>
+              ),
+            )}
+          </section>
+        </div>
+      </div>
+
+      {detail.capabilities.comment ? (
+        <form
+          className="flex flex-col gap-2 border-t border-border/60 px-4 py-3"
+          onSubmit={(event) => {
+            event.preventDefault();
+            void submitComment();
+          }}
+        >
+          <Textarea
+            size="sm"
+            aria-label="Add a comment"
+            placeholder={canComment ? "Leave a comment" : (blocked ?? "You cannot comment here.")}
+            value={draft}
+            disabled={!canComment || submitting}
+            onChange={(event) => setDraft(event.target.value)}
+            onKeyDown={(event) => {
+              if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) {
+                event.preventDefault();
+                void submitComment();
+              }
+            }}
+          />
+          <div className="flex justify-end">
+            <Button
+              type="submit"
+              size="sm"
+              disabled={!canComment || submitting || draft.trim().length === 0}
+            >
+              <SendIcon aria-hidden className="size-3.5" />
+              {submitting ? "Posting…" : "Comment"}
+            </Button>
+          </div>
+        </form>
+      ) : null}
+    </div>
+  );
+}
diff --git a/apps/web/src/components/issue/IssueRow.tsx b/apps/web/src/components/issue/IssueRow.tsx
new file mode 100644
index 0000000000000..28c1b68517acc
--- /dev/null
+++ b/apps/web/src/components/issue/IssueRow.tsx
@@ -0,0 +1,117 @@
+import type { EnvironmentId, IssueListEntry } from "@t3tools/contracts";
+import { MessageSquareIcon } from "lucide-react";
+import { memo } from "react";
+
+import { cn } from "~/lib/utils";
+
+import {
+  PULL_REQUEST_ROW_CLASS,
+  PULL_REQUEST_ROW_NUMBER_CLASS,
+  PullRequestRowAuthor,
+  PullRequestRowLines,
+} from "../pullRequest/PullRequestListRow";
+import {
+  PullRequestLabelChip,
+  PullRequestActorAvatar,
+} from "../pullRequest/pullRequestPresentation";
+import { IssueStateGlyph, issueTrackerPresentation } from "./issuePresentation";
+
+export interface EnvironmentIssueEntry extends IssueListEntry {
+  readonly environmentId: EnvironmentId;
+}
+
+export type IssueRowTarget = Pick<
+  EnvironmentIssueEntry,
+  "environmentId" | "projectId" | "tracker" | "host" | "scope" | "key" | "url"
+>;
+
+/** The page row in the pull-request list's shape: state glyph, then key and title over meta. */
+function IssueRowImpl({
+  entry,
+  selected,
+  showScope,
+  showTracker,
+  environmentLabel,
+  onSelect,
+}: {
+  entry: EnvironmentIssueEntry;
+  selected: boolean;
+  /** Only when the list spans more than one scope, where the key alone is ambiguous. */
+  showScope: boolean;
+  /** Only when the list spans more than one tracker or host. */
+  showTracker: boolean;
+  /** Names the server this row was read from, where the list spans more than one. */
+  environmentLabel?: string | undefined;
+  onSelect: (entry: IssueRowTarget) => void;
+}) {
+  const tracker = issueTrackerPresentation(entry.tracker);
+  return (
+    <div
+      className={cn(
+        "flex items-center rounded-md [content-visibility:auto] [contain-intrinsic-block-size:56.5px]",
+        selected ? "bg-accent" : "hover:bg-accent/60",
+      )}
+    >
+      <button
+        type="button"
+        aria-current={selected ? "true" : undefined}
+        onClick={() => onSelect(entry)}
+        className={cn(PULL_REQUEST_ROW_CLASS, "@container/issue-row-meta px-3 py-2.5")}
+      >
+        <IssueStateGlyph state={entry.state} />
+        <PullRequestRowLines
+          number={<span className={PULL_REQUEST_ROW_NUMBER_CLASS}>{entry.displayKey}</span>}
+          title={entry.title}
+          status={
+            <>
+              {entry.assignees.length > 0 ? (
+                <span className="flex items-center -space-x-1">
+                  {entry.assignees.slice(0, 3).map((assignee) => (
+                    <PullRequestActorAvatar
+                      key={assignee.login}
+                      actor={assignee}
+                      className="ring-1 ring-background"
+                    />
+                  ))}
+                </span>
+              ) : null}
+              {entry.commentCount > 0 ? (
+                <span className="inline-flex items-center gap-0.5 tabular-nums">
+                  <MessageSquareIcon aria-hidden className="size-3" />
+                  {entry.commentCount}
+                </span>
+              ) : null}
+            </>
+          }
+          meta={
+            <>
+              <PullRequestRowAuthor actor={entry.author} />
+              {showTracker ? (
+                <span className="inline-flex shrink-0 items-center gap-1">
+                  <tracker.Icon aria-hidden className="size-3" />
+                  <span className="sr-only">{tracker.providerName}</span>
+                </span>
+              ) : null}
+              {showScope ? <span className="truncate">{entry.scope}</span> : null}
+              {environmentLabel ? <span className="truncate">{environmentLabel}</span> : null}
+              {entry.labels.length > 0 ? (
+                <span className="hidden min-w-0 items-center gap-1 @xl/issue-row-meta:flex">
+                  {entry.labels.slice(0, 3).map((label, index) => (
+                    <PullRequestLabelChip key={label.name} label={label}>
+                      {index === 2 && entry.labels.length > 3 ? (
+                        <span className="shrink-0">+{entry.labels.length - 3}</span>
+                      ) : null}
+                    </PullRequestLabelChip>
+                  ))}
+                </span>
+              ) : null}
+            </>
+          }
+          updatedAt={entry.updatedAt}
+        />
+      </button>
+    </div>
+  );
+}
+
+export const IssueRow = memo(IssueRowImpl);
diff --git a/apps/web/src/components/issue/IssuesPage.tsx b/apps/web/src/components/issue/IssuesPage.tsx
new file mode 100644
index 0000000000000..c988ab12adc56
--- /dev/null
+++ b/apps/web/src/components/issue/IssuesPage.tsx
@@ -0,0 +1,886 @@
+import { useAtomValue } from "@effect/atom-react";
+import {
+  issueEntryKey,
+  mergeIssueListErrors,
+  mergeIssueListPage,
+} from "@t3tools/client-runtime/state/issues";
+import { sourceControlClients } from "@t3tools/client-runtime/source-control-clients";
+import type {
+  EnvironmentId,
+  IssueInvolvement,
+  IssueListCursors,
+  IssueListEntry,
+  IssueListInput,
+  IssueListProjectError,
+  IssueListResult,
+  IssueListState,
+  IssueTrackerKind,
+  IssueTrackerSummary,
+  ProjectId,
+  SourceControlProviderKind,
+} from "@t3tools/contracts";
+import { useNavigate, useSearch } from "@tanstack/react-router";
+import {
+  AtSignIcon,
+  CircleCheckIcon,
+  LayersIcon,
+  PenLineIcon,
+  Plug2Icon,
+  PlusIcon,
+  UserCheckIcon,
+  UsersIcon,
+} from "lucide-react";
+import { Fragment, useEffect, useState, type ReactNode } from "react";
+
+import { RefreshIcon } from "~/components/ui/refresh-icon";
+import { IssueCreateDialog, type IssueCreateScope } from "~/components/issue/IssueCreateDialog";
+import { IssueDetailPanel } from "~/components/issue/IssueDetailPanel";
+import {
+  IssueRow,
+  type EnvironmentIssueEntry,
+  type IssueRowTarget,
+} from "~/components/issue/IssueRow";
+import {
+  issueListPreferences,
+  writeIssueListPreferences,
+  type IssueListPreferences,
+} from "~/components/issue/issueListPreferences";
+import { IssueGlyph, issueTrackerPresentation } from "~/components/issue/issuePresentation";
+import { PullRequestDetailPanel } from "~/components/pullRequest/PullRequestDetailPanel";
+import { PullRequestListGhost } from "~/components/pullRequest/PullRequestGhosts";
+import {
+  PullRequestFilterOptionIcon,
+  PullRequestSearchInput,
+  type PullRequestFilterOption,
+} from "~/components/pullRequest/PullRequestListFilters";
+import { PullRequestsUnavailableState } from "~/components/pullRequest/PullRequestsUnavailableState";
+import { RightPanelTabs } from "~/components/RightPanelTabs";
+import { WorkspaceBreadcrumb, WorkspaceBreadcrumbItem } from "~/components/WorkspaceBreadcrumb";
+import { WorkspacePageContainer } from "~/components/WorkspacePageContainer";
+import { WorkspacePageHeader } from "~/components/WorkspacePageHeader";
+import { PanelLayoutControls } from "~/components/chat/PanelLayoutControls";
+import { Button } from "~/components/ui/button";
+import {
+  Empty,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from "~/components/ui/empty";
+import { Menu, MenuPopup, MenuRadioGroup, MenuRadioItem, MenuTrigger } from "~/components/ui/menu";
+import { SidebarInset } from "~/components/ui/sidebar";
+import { Toggle, ToggleGroup } from "~/components/ui/toggle-group";
+import { isElectron } from "~/env";
+import { useLiveRefresh } from "~/hooks/useLiveRefresh";
+import { shortcutLabelForCommand } from "~/keybindings";
+import { isTerminalFocused } from "~/lib/terminalFocus";
+import { usePanelAnimationSettings, usePanelPresence } from "~/panelAnimations";
+import {
+  ISSUES_PANEL_REF,
+  selectActiveRightPanelSurface,
+  selectSelectedRightPanelSurface,
+  selectThreadRightPanelState,
+  useRightPanelStore,
+  type PullRequestSurface,
+  type RightPanelSurface,
+} from "~/rightPanelStore";
+import { useAtomCommand } from "~/state/use-atom-command";
+import { squashAtomCommandFailure } from "@t3tools/client-runtime/state/runtime";
+import type { EnvironmentProject } from "@t3tools/client-runtime/state/shell";
+import { useProjects } from "~/state/entities";
+import { useEnvironments, useIssuesSupported } from "~/state/environments";
+import { issueEnvironment, useIssueList, type IssueListTarget } from "~/state/issues";
+import { useDebouncedValue } from "~/state/queries";
+import { primaryServerKeybindingsAtom } from "~/state/server";
+
+export interface IssuesSearch extends IssueListPreferences {
+  readonly selectedEnvironmentId?: EnvironmentId;
+  readonly selectedProjectId?: ProjectId;
+  /** Part of the panel tab's identity, so a link reopens the tab a row press opened. */
+  readonly selectedHost?: string;
+  readonly tracker?: string;
+  readonly scope?: string;
+  readonly key?: string;
+}
+
+const STATE_TABS = [
+  { value: "open", label: "Open", Icon: IssueGlyph.issue },
+  { value: "closed", label: "Closed", Icon: CircleCheckIcon },
+  { value: "all", label: "All", Icon: LayersIcon },
+] as const satisfies ReadonlyArray<PullRequestFilterOption<IssueListState>>;
+
+const INVOLVEMENT_TABS = [
+  { value: "all", label: "Everyone", Icon: UsersIcon },
+  { value: "assigned", label: "Assigned to me", Icon: UserCheckIcon },
+  { value: "authored", label: "Opened by me", Icon: PenLineIcon },
+  { value: "mentioned", label: "Mentioning me", Icon: AtSignIcon },
+] as const satisfies ReadonlyArray<PullRequestFilterOption<IssueInvolvement>>;
+
+const PAGE_SIZE = 50;
+const EMPTY_SET: ReadonlySet<string> = new Set();
+const EMPTY_RECORD = {} as const;
+const EMPTY_MAP = new Map<string, string>();
+
+function getShortcutContext() {
+  return {
+    terminalFocus: isTerminalFocused(),
+    terminalOpen: false,
+    previewFocus: false,
+    previewOpen: false,
+    modelPickerOpen: false,
+    isWeb: !isElectron,
+    isDesktop: isElectron,
+  };
+}
+
+/** Rows from every environment that answered, with any continuation pages laid over them. */
+interface HeldPage {
+  readonly answer: IssueListResult;
+  readonly entries: ReadonlyArray<IssueListEntry>;
+  readonly errors: ReadonlyArray<IssueListProjectError>;
+  readonly nextCursors: IssueListCursors;
+  /** Why the last "Load more" failed, until a retry succeeds or a new first page arrives. */
+  readonly moreFailure: string | null;
+}
+
+function trackerKey(tracker: Pick<IssueTrackerSummary, "tracker" | "host">): string {
+  return `${tracker.tracker} ${tracker.host.toLowerCase()}`;
+}
+
+/** Continuations are laid over the first page they continue; a new first page forgets them. */
+function holdPages(
+  answers: ReadonlyArray<readonly [EnvironmentId, IssueListResult]>,
+  pages: ReadonlyMap<EnvironmentId, HeldPage>,
+): ReadonlyMap<EnvironmentId, HeldPage> {
+  const next = new Map<EnvironmentId, HeldPage>();
+  for (const [environmentId, answer] of answers) {
+    const previous = pages.get(environmentId);
+    next.set(
+      environmentId,
+      previous?.answer === answer
+        ? previous
+        : {
+            answer,
+            entries: answer.entries,
+            errors: answer.errors,
+            nextCursors: answer.nextCursors,
+            moreFailure: null,
+          },
+    );
+  }
+  return next;
+}
+
+function groupIssues(
+  held: ReadonlyMap<EnvironmentId, HeldPage>,
+  query: string,
+  projects: ReadonlyArray<EnvironmentProject>,
+) {
+  const byTracker = new Map<
+    string,
+    {
+      tracker: IssueTrackerSummary;
+      rows: EnvironmentIssueEntry[];
+      errors: Array<{ projectTitle: string; message: string; environmentId: EnvironmentId }>;
+      more: EnvironmentId[];
+    }
+  >();
+  const needle = query.toLowerCase();
+  for (const [environmentId, page] of held) {
+    for (const tracker of page.answer.trackers) {
+      const key = trackerKey(tracker);
+      if (!byTracker.has(key)) byTracker.set(key, { tracker, rows: [], errors: [], more: [] });
+      const group = byTracker.get(key)!;
+      if (!group.tracker.configured && tracker.configured) group.tracker = tracker;
+      if (Object.keys(page.nextCursors).some((c) => c.startsWith(`${tracker.host} `)))
+        group.more.push(environmentId);
+    }
+    for (const entry of page.entries) {
+      const key = trackerKey(entry);
+      const group = byTracker.get(key);
+      if (!group) continue;
+      // A tracker that cannot search is narrowed here instead.
+      if (
+        needle.length > 0 &&
+        group.tracker.capabilities?.search !== true &&
+        !entry.title.toLowerCase().includes(needle) &&
+        !entry.displayKey.toLowerCase().includes(needle)
+      )
+        continue;
+      group.rows.push({ ...entry, environmentId });
+    }
+    for (const error of page.errors) {
+      const project = projects.find(
+        (p) => p.environmentId === environmentId && p.id === error.projectId,
+      );
+      const kind = project?.repositoryIdentity?.provider as SourceControlProviderKind | undefined;
+      const host = kind
+        ? sourceControlClients.changeRequestHost(project?.repositoryIdentity, kind)
+        : null;
+      const group =
+        (host ? byTracker.get(`${kind} ${host.toLowerCase()}`) : undefined) ??
+        [...byTracker.values()][0];
+      group?.errors.push({ ...error, environmentId });
+    }
+  }
+  for (const group of byTracker.values()) {
+    group.rows.sort((a, b) => Date.parse(b.updatedAt) - Date.parse(a.updatedAt));
+  }
+  return [...byTracker.values()].sort((a, b) =>
+    trackerKey(a.tracker).localeCompare(trackerKey(b.tracker)),
+  );
+}
+
+function hostOptionsFor(groups: ReturnType<typeof groupIssues>) {
+  const hosts = new Map<string, IssueTrackerSummary>();
+  for (const group of groups) hosts.set(group.tracker.host, group.tracker);
+  return [
+    { value: "", label: "All trackers", Icon: Plug2Icon },
+    ...[...hosts.values()].map((tracker) => ({
+      value: tracker.host,
+      label:
+        hosts.size > 1 && issueTrackerPresentation(tracker.tracker).providerName === tracker.host
+          ? tracker.host
+          : `${issueTrackerPresentation(tracker.tracker).providerName} (${tracker.host})`,
+      Icon: issueTrackerPresentation(tracker.tracker).Icon,
+      ...(tracker.configured ? {} : { unavailable: tracker.detail ?? "Unavailable" }),
+    })),
+  ];
+}
+
+function createScopesFor(
+  held: ReadonlyMap<EnvironmentId, HeldPage>,
+  projects: ReadonlyArray<EnvironmentProject>,
+): IssueCreateScope[] {
+  const scopes: IssueCreateScope[] = [];
+  for (const [environmentId, page] of held) {
+    for (const project of projects) {
+      if (project.environmentId !== environmentId) continue;
+      const identity = project.repositoryIdentity;
+      const kind = identity?.provider as SourceControlProviderKind | undefined;
+      const scope = sourceControlClients.issueScope(identity);
+      if (!identity || !kind || scope === null) continue;
+      const host = sourceControlClients.changeRequestHost(identity, kind);
+      const tracker = page.answer.trackers.find(
+        (t) => String(t.tracker) === kind && t.host.toLowerCase() === host.toLowerCase(),
+      );
+      if (!tracker?.configured || tracker.capabilities?.create !== true) continue;
+      if (
+        scopes.some(
+          (s) => s.scope.scope.toLowerCase() === scope.toLowerCase() && s.scope.host === host,
+        )
+      )
+        continue;
+      scopes.push({
+        environmentId,
+        projectTitle: project.title,
+        templates: tracker.capabilities.templates,
+        scope: { projectId: project.id, tracker: tracker.tracker, host, scope },
+      });
+    }
+  }
+  return scopes;
+}
+
+export function IssuesPage() {
+  const navigate = useNavigate({ from: "/issues" });
+  const search = useSearch({ from: "/_chat/issues" });
+  const { environments } = useEnvironments();
+  const projects = useProjects();
+  const issuesSupported = useIssuesSupported();
+  const keybindings = useAtomValue(primaryServerKeybindingsAtom);
+
+  const capableEnvironments = environments.filter(
+    (environment) => environment.serverConfig?.environment.capabilities.issues === true,
+  );
+  const environmentLabels = new Map(environments.map((e) => [e.environmentId, e.label] as const));
+
+  const debouncedQuery = useDebouncedValue(search.q ?? "", 300);
+  const listInput: IssueListInput = {
+    state: search.status,
+    involvement: search.who,
+    limit: PAGE_SIZE,
+    ...(search.host ? { host: search.host } : {}),
+    ...(debouncedQuery ? { query: debouncedQuery } : {}),
+  };
+  const targets: ReadonlyArray<IssueListTarget> = capableEnvironments.map((e) => ({
+    environmentId: e.environmentId,
+    input: listInput,
+  }));
+  const list = useIssueList(targets);
+  useLiveRefresh(list.refresh, { key: JSON.stringify(targets) });
+
+  const [pages, setPages] = useState<ReadonlyMap<EnvironmentId, HeldPage>>(new Map());
+  const held = holdPages(list.answers, pages);
+  const loadPage = useAtomCommand(issueEnvironment.listPage, { reportFailure: false });
+  const [loadingMore, setLoadingMore] = useState<EnvironmentId | null>(null);
+  const loadMore = async (environmentId: EnvironmentId) => {
+    const page = held.get(environmentId);
+    if (!page || Object.keys(page.nextCursors).length === 0 || loadingMore !== null) return;
+    setLoadingMore(environmentId);
+    const result = await loadPage({
+      environmentId,
+      input: { ...listInput, cursors: page.nextCursors },
+    });
+    setLoadingMore(null);
+    const failure = result._tag === "Failure" ? squashAtomCommandFailure(result) : null;
+    setPages((current) => {
+      const next = new Map(current);
+      next.set(
+        environmentId,
+        result._tag === "Failure"
+          ? {
+              ...page,
+              moreFailure: failure instanceof Error ? failure.message : "The next page failed.",
+            }
+          : {
+              answer: page.answer,
+              entries: mergeIssueListPage(page.entries, result.value.entries),
+              errors: mergeIssueListErrors(page.errors, result.value.errors),
+              nextCursors: result.value.nextCursors,
+              moreFailure: null,
+            },
+      );
+      return next;
+    });
+  };
+
+  // Rows grouped per tracker account, so a tracker that cannot be read says so where its rows
+  // would be, and each tracker's rows carry on from their own cursors.
+  const groups = groupIssues(held, debouncedQuery, projects);
+
+  const hostOptions = hostOptionsFor(groups);
+
+  const updateSearch = (patch: { [Key in keyof IssuesSearch]?: IssuesSearch[Key] | undefined }) => {
+    const merged = { ...search, ...patch };
+    const next: IssuesSearch = {
+      who: merged.who ?? search.who,
+      status: merged.status ?? search.status,
+      ...(merged.host ? { host: merged.host } : {}),
+      q: merged.q || undefined,
+      ...(merged.selectedEnvironmentId
+        ? { selectedEnvironmentId: merged.selectedEnvironmentId }
+        : {}),
+      ...(merged.selectedProjectId ? { selectedProjectId: merged.selectedProjectId } : {}),
+      ...(merged.selectedHost ? { selectedHost: merged.selectedHost } : {}),
+      ...(merged.tracker ? { tracker: merged.tracker } : {}),
+      ...(merged.scope ? { scope: merged.scope } : {}),
+      ...(merged.key ? { key: merged.key } : {}),
+    };
+    writeIssueListPreferences(issueListPreferences(next));
+    void navigate({ search: next });
+  };
+  const clearedSelection = {
+    selectedEnvironmentId: undefined,
+    selectedProjectId: undefined,
+    selectedHost: undefined,
+    tracker: undefined,
+    scope: undefined,
+    key: undefined,
+  } as const;
+
+  // One shared panel for the page, with a fixed sentinel ref, as the pull-request page does.
+  const rightPanelRef = capableEnvironments.length === 0 ? null : ISSUES_PANEL_REF;
+  const rightPanelState = useRightPanelStore((state) =>
+    selectThreadRightPanelState(state.byThreadKey, rightPanelRef),
+  );
+  const selectedSurface = useRightPanelStore((state) =>
+    selectSelectedRightPanelSurface(state.byThreadKey, rightPanelRef),
+  );
+  const panelSurface =
+    selectedSurface?.kind === "issue" || selectedSurface?.kind === "pull-request"
+      ? selectedSurface
+      : null;
+  const { active: panelAnimationsActive, durationMs } = usePanelAnimationSettings();
+  const presenceValue = { activeSurface: panelSurface, surfaces: rightPanelState.surfaces };
+  const presence = usePanelPresence(
+    rightPanelState.isOpen && panelSurface !== null,
+    presenceValue,
+    panelAnimationsActive,
+    rightPanelRef?.threadId ?? null,
+    durationMs,
+  );
+  const renderedSurface = presence.value?.activeSurface ?? null;
+  const panelEnvironmentId =
+    (renderedSurface?.environmentId as EnvironmentId | undefined) ??
+    capableEnvironments[0]?.environmentId ??
+    null;
+
+  const panelListEntry =
+    renderedSurface?.kind === "issue"
+      ? (groups
+          .flatMap((group) => group.rows)
+          .find(
+            (row) =>
+              row.environmentId === panelEnvironmentId &&
+              issueEntryKey(row) ===
+                issueEntryKey({
+                  ...renderedSurface,
+                  host: renderedSurface.host ?? row.host,
+                  projectId: renderedSurface.projectId as ProjectId,
+                }),
+          ) ?? null)
+      : null;
+
+  const selectSurfaceInUrl = (surface: RightPanelSurface | null) =>
+    updateSearch(
+      surface?.kind === "issue"
+        ? {
+            selectedEnvironmentId: surface.environmentId as EnvironmentId | undefined,
+            selectedProjectId: surface.projectId as ProjectId,
+            selectedHost: surface.host,
+            tracker: surface.tracker,
+            scope: surface.scope,
+            key: surface.key,
+          }
+        : clearedSelection,
+    );
+
+  const selectEntry = (entry: IssueRowTarget) => {
+    if (rightPanelRef === null) return;
+    useRightPanelStore.getState().openIssue(rightPanelRef, entry);
+    updateSearch({
+      selectedEnvironmentId: entry.environmentId,
+      selectedProjectId: entry.projectId,
+      selectedHost: entry.host,
+      tracker: entry.tracker,
+      scope: entry.scope,
+      key: entry.key,
+    });
+  };
+
+  // A link into the page names an issue before any row was pressed.
+  // oxlint-disable-next-line t3code/no-unreasoned-state-sync -- opens the URL-linked issue in the right panel store
+  useEffect(() => {
+    if (
+      rightPanelRef === null ||
+      !search.tracker ||
+      !search.scope ||
+      !search.key ||
+      !search.selectedProjectId
+    )
+      return;
+    useRightPanelStore.getState().openIssue(rightPanelRef, {
+      ...(search.selectedEnvironmentId === undefined
+        ? {}
+        : { environmentId: search.selectedEnvironmentId }),
+      projectId: search.selectedProjectId,
+      ...(search.selectedHost === undefined ? {} : { host: search.selectedHost }),
+      tracker: search.tracker,
+      scope: search.scope,
+      key: search.key,
+    });
+  }, [
+    rightPanelRef,
+    search.tracker,
+    search.scope,
+    search.key,
+    search.selectedProjectId,
+    search.selectedHost,
+    search.selectedEnvironmentId,
+  ]);
+
+  const closeSurface = (surface: RightPanelSurface) => {
+    if (rightPanelRef === null) return;
+    useRightPanelStore.getState().closeSurface(rightPanelRef, surface.id);
+    selectSurfaceInUrl(
+      selectActiveRightPanelSurface(useRightPanelStore.getState().byThreadKey, rightPanelRef),
+    );
+  };
+  const toggleRightPanel = () => {
+    if (rightPanelRef === null) return;
+    if (rightPanelState.isOpen) {
+      useRightPanelStore.getState().close(rightPanelRef);
+      updateSearch(clearedSelection);
+      return;
+    }
+    if (panelSurface === null) return;
+    useRightPanelStore.getState().show(rightPanelRef);
+    selectSurfaceInUrl(panelSurface);
+  };
+
+  // Every writable scope the workspace has, for the composer.
+  const createScopes = createScopesFor(held, projects);
+  const [createOpen, setCreateOpen] = useState(false);
+
+  const showTracker = groups.length > 1;
+  const noneAnswered = list.answers.length === 0;
+
+  const listBody: ReactNode = !issuesSupported ? (
+    <PullRequestsUnavailableState
+      title="Issues unavailable"
+      error="Update this environment's T3 Code server to browse issues."
+    />
+  ) : noneAnswered && list.isPending ? (
+    <PullRequestListGhost />
+  ) : noneAnswered && list.error ? (
+    <PullRequestsUnavailableState
+      error={list.error}
+      onRetry={list.refresh}
+      refreshing={list.isPending}
+    />
+  ) : groups.length === 0 ? (
+    <Empty>
+      <EmptyMedia variant="icon">
+        <IssueGlyph.issue />
+      </EmptyMedia>
+      <EmptyHeader>
+        <EmptyTitle>No trackers to read</EmptyTitle>
+        <EmptyDescription>Add a project whose remote is on a supported tracker.</EmptyDescription>
+      </EmptyHeader>
+    </Empty>
+  ) : (
+    <div className="flex flex-col gap-6">
+      {groups.map((group) => {
+        const presentation = issueTrackerPresentation(group.tracker.tracker);
+        const showScope = new Set(group.rows.map((row) => row.scope.toLowerCase())).size > 1;
+        return (
+          <section key={trackerKey(group.tracker)} className="flex flex-col gap-1">
+            <h2 className="flex items-center gap-1.5 px-3 text-xs font-medium text-muted-foreground">
+              <presentation.Icon aria-hidden className="size-3.5" />
+              {presentation.providerName}
+              {presentation.providerName.toLowerCase() !== group.tracker.host ? (
+                <span className="font-normal">· {group.tracker.host}</span>
+              ) : null}
+              <span className="font-normal">
+                · {group.tracker.projectCount}{" "}
+                {group.tracker.projectCount === 1 ? "project" : "projects"}
+              </span>
+            </h2>
+            {!group.tracker.configured ? (
+              <p className="px-3 text-sm text-muted-foreground">
+                {group.tracker.detail ?? "This tracker cannot be read right now."}
+              </p>
+            ) : null}
+            {group.errors.map((error) => (
+              <p
+                key={`${error.environmentId}:${error.projectTitle}`}
+                className="px-3 text-xs text-destructive"
+              >
+                {error.projectTitle}: {error.message}
+              </p>
+            ))}
+            {group.tracker.configured && group.rows.length === 0 && group.errors.length === 0 ? (
+              <p className="px-3 text-sm text-muted-foreground">
+                {debouncedQuery ? "Nothing matches that." : "No issues under these filters."}
+              </p>
+            ) : null}
+            {group.rows.map((row) => {
+              const key = issueEntryKey(row);
+              const selected =
+                renderedSurface?.kind === "issue" &&
+                renderedSurface.environmentId === row.environmentId &&
+                issueEntryKey({
+                  ...renderedSurface,
+                  host: renderedSurface.host ?? "",
+                  projectId: renderedSurface.projectId as ProjectId,
+                }) === key;
+              return (
+                <IssueRow
+                  key={`${row.environmentId}:${key}`}
+                  entry={row}
+                  selected={selected}
+                  showScope={showScope}
+                  showTracker={showTracker}
+                  {...(capableEnvironments.length > 1 && environmentLabels.has(row.environmentId)
+                    ? { environmentLabel: environmentLabels.get(row.environmentId) }
+                    : {})}
+                  onSelect={selectEntry}
+                />
+              );
+            })}
+            {group.more.map((environmentId) => {
+              const moreFailure = held.get(environmentId)?.moreFailure ?? null;
+              return (
+                <Fragment key={environmentId}>
+                  {moreFailure === null ? null : (
+                    <p className="px-3 text-xs text-destructive">{moreFailure}</p>
+                  )}
+                  <Button
+                    size="sm"
+                    variant="ghost-muted"
+                    className="self-start"
+                    disabled={loadingMore !== null}
+                    onClick={() => void loadMore(environmentId)}
+                  >
+                    {loadingMore === environmentId
+                      ? "Loading…"
+                      : moreFailure === null
+                        ? "Load more"
+                        : "Retry"}
+                  </Button>
+                </Fragment>
+              );
+            })}
+          </section>
+        );
+      })}
+    </div>
+  );
+
+  return (
+    <SidebarInset className="h-dvh min-h-0 overflow-hidden overscroll-y-none">
+      <div className="relative flex min-h-0 flex-1">
+        <div className="@container/issue-list flex min-h-0 min-w-0 flex-1 flex-col overflow-x-hidden bg-background">
+          <WorkspacePageHeader
+            electron={isElectron}
+            reserveNativeControls={!rightPanelState.isOpen}
+            className="relative bg-background"
+          >
+            <WorkspaceBreadcrumb ariaLabel="Issues breadcrumb">
+              <WorkspaceBreadcrumbItem current>
+                <h1 className="truncate">Issues</h1>
+              </WorkspaceBreadcrumbItem>
+            </WorkspaceBreadcrumb>
+            <div className="min-w-0 flex-1" />
+            <div
+              className="flex items-center gap-1 [-webkit-app-region:no-drag]"
+              data-workspace-titlebar-controls
+            >
+              <PanelLayoutControls
+                showTerminalControl={false}
+                showThreadPanelControl={false}
+                terminalAvailable={false}
+                terminalOpen={false}
+                terminalShortcutLabel={null}
+                threadPanelOpen={false}
+                threadPanelPresentation="inline"
+                threadPanelShortcutLabel={null}
+                onToggleThreadPanel={() => undefined}
+                rightPanelAvailable={panelSurface !== null}
+                rightPanelOpen={rightPanelState.isOpen}
+                rightPanelShortcutLabel={shortcutLabelForCommand(keybindings, "rightPanel.toggle")}
+                rightPanelUnavailableLabel="Select an issue first"
+                onToggleTerminal={() => undefined}
+                onToggleRightPanel={toggleRightPanel}
+              />
+            </div>
+          </WorkspacePageHeader>
+
+          <div className="topbar-scroll-fade scrollbar-gutter-both min-h-0 flex-1 overflow-y-auto">
+            <WorkspacePageContainer width="expanded" className="min-h-full gap-4">
+              <div className="flex flex-wrap items-center gap-2">
+                <div className="min-w-0 basis-full @lg/issue-list:basis-0 @lg/issue-list:flex-1">
+                  <PullRequestSearchInput
+                    value={search.q ?? ""}
+                    label="Search issues"
+                    placeholder="Search issues"
+                    busy={
+                      (search.q ?? "") !== debouncedQuery ||
+                      (debouncedQuery.length > 0 && list.isPending)
+                    }
+                    onChange={(q) => updateSearch({ q: q || undefined })}
+                    onSubmit={(q) => updateSearch({ q: q || undefined })}
+                  />
+                </div>
+                <ToggleGroup
+                  size="segmented"
+                  variant="segmented"
+                  aria-label="Filter by state"
+                  value={[search.status]}
+                  onValueChange={(next) => {
+                    const status = STATE_TABS.find((tab) => tab.value === next[0])?.value;
+                    if (status) updateSearch({ status });
+                  }}
+                >
+                  {STATE_TABS.map((tab) => (
+                    <Toggle key={tab.value} value={tab.value}>
+                      {tab.label}
+                    </Toggle>
+                  ))}
+                </ToggleGroup>
+                <FilterMenu
+                  label="Filter by involvement"
+                  value={search.who}
+                  options={INVOLVEMENT_TABS}
+                  onChange={(who) => updateSearch({ who })}
+                />
+                {hostOptions.length > 2 ? (
+                  <FilterMenu
+                    label="Filter by tracker"
+                    value={search.host ?? ""}
+                    options={hostOptions}
+                    onChange={(host) => updateSearch({ host: host || undefined })}
+                  />
+                ) : null}
+                <Button
+                  size="icon"
+                  variant="outline"
+                  aria-label="Refresh issues"
+                  onClick={list.refresh}
+                  disabled={list.isPending}
+                >
+                  <RefreshIcon size="md" refreshing={list.isPending} />
+                </Button>
+                {createScopes.length > 0 ? (
+                  <Button size="default" onClick={() => setCreateOpen(true)}>
+                    <PlusIcon aria-hidden className="size-4" />
+                    New issue
+                  </Button>
+                ) : null}
+              </div>
+              {listBody}
+            </WorkspacePageContainer>
+          </div>
+        </div>
+
+        {presence.present &&
+        renderedSurface &&
+        panelEnvironmentId !== null &&
+        rightPanelRef !== null ? (
+          <RightPanelTabs
+            mode="inline"
+            open={rightPanelState.isOpen}
+            keybindings={keybindings}
+            getShortcutContext={getShortcutContext}
+            widthStorageKey="t3code:issue-panel-width"
+            defaultWidth={typeof window === "undefined" ? 640 : Math.floor(window.innerWidth / 2)}
+            surfaces={presence.value?.surfaces ?? []}
+            environmentId={panelEnvironmentId}
+            activeSurfaceId={renderedSurface.id}
+            pendingSurfaceIds={EMPTY_SET}
+            previewSessions={EMPTY_RECORD}
+            desktopByTabId={EMPTY_RECORD}
+            terminalLabelsById={EMPTY_MAP}
+            onActivate={(surface) => {
+              useRightPanelStore.getState().activateSurface(rightPanelRef, surface.id);
+              selectSurfaceInUrl(surface);
+            }}
+            onCloseSurface={closeSurface}
+            onCloseOtherSurfaces={(surface) => {
+              useRightPanelStore.getState().closeOtherSurfaces(rightPanelRef, surface.id);
+              selectSurfaceInUrl(surface);
+            }}
+            onCloseSurfacesToRight={(surface) => {
+              useRightPanelStore.getState().closeSurfacesToRight(rightPanelRef, surface.id);
+              selectSurfaceInUrl(
+                selectActiveRightPanelSurface(
+                  useRightPanelStore.getState().byThreadKey,
+                  rightPanelRef,
+                ),
+              );
+            }}
+            onCloseAllSurfaces={() => {
+              useRightPanelStore.getState().closeAllSurfaces(rightPanelRef);
+              selectSurfaceInUrl(null);
+            }}
+            onMoveSurface={(surfaceId, toIndex) =>
+              useRightPanelStore.getState().moveSurface(rightPanelRef, surfaceId, toIndex)
+            }
+            onCopyFilePath={() => undefined}
+            onAddBrowser={() => undefined}
+            onAddBrowserInProfile={() => undefined}
+            onAddTerminal={() => undefined}
+            onAddDiff={() => undefined}
+            onAddFiles={() => undefined}
+            onAddPullRequest={() => undefined}
+            onAddPullRequests={() => undefined}
+            onAddDevice={() => undefined}
+            browserAvailable={false}
+            terminalAvailable={false}
+            diffAvailable={false}
+            filesAvailable={false}
+            pullRequestAvailable={false}
+            pullRequestsAvailable={false}
+            deviceAvailable={false}
+          >
+            {renderedSurface.kind === "issue" ? (
+              <IssueDetailPanel
+                key={renderedSurface.id}
+                environmentId={panelEnvironmentId}
+                listEntry={panelListEntry}
+                reference={{
+                  projectId: renderedSurface.projectId as ProjectId,
+                  tracker: renderedSurface.tracker as IssueTrackerKind,
+                  ...(renderedSurface.host ? { host: renderedSurface.host } : {}),
+                  scope: renderedSurface.scope,
+                  key: renderedSurface.key,
+                }}
+                onSelectPullRequest={(reference) => {
+                  useRightPanelStore.getState().openPullRequest(rightPanelRef, {
+                    projectId: reference.projectId,
+                    repository: reference.repository,
+                    number: reference.number,
+                    ...(reference.host === undefined ? {} : { host: reference.host }),
+                    environmentId: panelEnvironmentId,
+                  });
+                }}
+              />
+            ) : (
+              <PullRequestDetailPanel
+                key={renderedSurface.id}
+                getShortcutContext={getShortcutContext}
+                shortcutsEnabled={panelSurface?.id === renderedSurface.id}
+                environmentId={panelEnvironmentId}
+                reference={{
+                  projectId: (renderedSurface as PullRequestSurface).projectId as ProjectId,
+                  repository: (renderedSurface as PullRequestSurface).repository,
+                  number: (renderedSurface as PullRequestSurface).number,
+                  ...((renderedSurface as PullRequestSurface).host
+                    ? { host: (renderedSurface as PullRequestSurface).host }
+                    : {}),
+                }}
+              />
+            )}
+          </RightPanelTabs>
+        ) : null}
+      </div>
+      <IssueCreateDialog
+        open={createOpen}
+        scopes={createScopes}
+        onOpenChange={setCreateOpen}
+        onCreated={(scope, result) => {
+          list.refresh();
+          selectEntry({
+            environmentId: scope.environmentId,
+            projectId: scope.scope.projectId,
+            tracker: scope.scope.tracker,
+            host: scope.scope.host ?? "",
+            scope: scope.scope.scope,
+            key: result.key,
+            url: result.url,
+          });
+        }}
+      />
+    </SidebarInset>
+  );
+}
+
+function FilterMenu<Value extends string>({
+  label,
+  value,
+  options,
+  onChange,
+}: {
+  label: string;
+  value: Value;
+  options: ReadonlyArray<PullRequestFilterOption<Value>>;
+  onChange: (value: Value) => void;
+}) {
+  const current = options.find((option) => option.value === value) ?? options[0];
+  if (!current) return null;
+  return (
+    <Menu>
+      <MenuTrigger aria-label={`${label}: ${current.label}`} render={<Button variant="outline" />}>
+        <PullRequestFilterOptionIcon option={current} />
+        <span className="truncate">{current.label}</span>
+      </MenuTrigger>
+      <MenuPopup align="start">
+        <MenuRadioGroup value={value} onValueChange={(next) => onChange(next as Value)}>
+          {options.map((option) => (
+            <MenuRadioItem
+              key={option.value}
+              value={option.value}
+              disabled={option.unavailable !== undefined}
+            >
+              <span className="flex min-w-0 items-center gap-2">
+                <PullRequestFilterOptionIcon option={option} />
+                <span className="min-w-0 flex-1 truncate">{option.label}</span>
+              </span>
+            </MenuRadioItem>
+          ))}
+        </MenuRadioGroup>
+      </MenuPopup>
+    </Menu>
+  );
+}
diff --git a/apps/web/src/components/issue/issueListPreferences.ts b/apps/web/src/components/issue/issueListPreferences.ts
new file mode 100644
index 0000000000000..ad7aed0fa3b81
--- /dev/null
+++ b/apps/web/src/components/issue/issueListPreferences.ts
@@ -0,0 +1,74 @@
+import * as Schema from "effect/Schema";
+
+import { IssueInvolvement, IssueListState } from "@t3tools/contracts";
+
+/**
+ * What the issues page remembers between visits; the selection in the URL is not part of it.
+ * `who` and `status` rather than `involvement` and `state`: the router merges every route's
+ * search into one type for `navigate`, and sharing the pull-request page's key names would widen
+ * its own literal unions with this page's values.
+ */
+export interface IssueListPreferences {
+  readonly who: IssueInvolvement;
+  readonly status: IssueListState;
+  readonly host?: string;
+  readonly q?: string | undefined;
+}
+
+const DEFAULT_ISSUE_LIST_PREFERENCES = {
+  who: "all",
+  status: "open",
+} as const satisfies IssueListPreferences;
+
+const STORAGE_KEY = "t3.issues.preferences";
+
+const BoundedPreference = Schema.String.check(Schema.isMaxLength(200));
+const IssueListPreferencesSchema = Schema.Struct({
+  who: IssueInvolvement,
+  status: IssueListState,
+  host: Schema.optional(BoundedPreference),
+  q: Schema.optional(BoundedPreference),
+});
+const decodePreferences = Schema.decodeUnknownOption(IssueListPreferencesSchema);
+
+type PreferenceStorage = Pick<Storage, "getItem" | "setItem">;
+
+function storage(): PreferenceStorage | undefined {
+  return typeof window === "undefined" ? undefined : window.localStorage;
+}
+
+/** Only list controls are remembered. The selected issue remains a URL and right-panel concern. */
+export function issueListPreferences(search: {
+  readonly who: IssueInvolvement;
+  readonly status: IssueListState;
+  readonly host?: string | undefined;
+  readonly q?: string | undefined;
+}): IssueListPreferences {
+  return {
+    who: search.who,
+    status: search.status,
+    ...(search.host ? { host: search.host } : {}),
+    ...(search.q ? { q: search.q } : {}),
+  };
+}
+
+export function readIssueListPreferences(): IssueListPreferences {
+  try {
+    const raw = storage()?.getItem(STORAGE_KEY);
+    if (!raw) return DEFAULT_ISSUE_LIST_PREFERENCES;
+    const decoded = decodePreferences(JSON.parse(raw));
+    return decoded._tag === "Some"
+      ? issueListPreferences(decoded.value)
+      : DEFAULT_ISSUE_LIST_PREFERENCES;
+  } catch {
+    return DEFAULT_ISSUE_LIST_PREFERENCES;
+  }
+}
+
+export function writeIssueListPreferences(preferences: IssueListPreferences): void {
+  try {
+    storage()?.setItem(STORAGE_KEY, JSON.stringify(issueListPreferences(preferences)));
+  } catch {
+    // Storage can be full or forbidden; the page still works with defaults.
+  }
+}
diff --git a/apps/web/src/components/issue/issuePresentation.tsx b/apps/web/src/components/issue/issuePresentation.tsx
new file mode 100644
index 0000000000000..130637e52195d
--- /dev/null
+++ b/apps/web/src/components/issue/issuePresentation.tsx
@@ -0,0 +1,75 @@
+import type { IssueState, IssueTrackerKind } from "@t3tools/contracts";
+import { sourceControlClients } from "@t3tools/client-runtime/source-control-clients";
+import { CircleCheckIcon, CircleDotIcon, CircleSlashIcon, TicketIcon } from "lucide-react";
+
+import { cn } from "~/lib/utils";
+import { getSourceControlPresentationForKind } from "~/sourceControlPresentation";
+
+import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
+import { PULL_REQUEST_STATE_PRESENTATION } from "../pullRequest/pullRequestIcons";
+
+export const IssueGlyph = { issue: CircleDotIcon } as const;
+
+/** A git host's tracker wears the host's own icon and name; a standalone tracker wears its kind. */
+export function issueTrackerPresentation(tracker: IssueTrackerKind | string) {
+  if (sourceControlClients.find(tracker) !== undefined) {
+    return getSourceControlPresentationForKind(tracker);
+  }
+  return { providerName: tracker, Icon: TicketIcon };
+}
+
+/**
+ * Open and completed borrow the ink the pull-request states use for open and merged, so green
+ * and violet mean the same thing on both pages; not planned wears a draft's grey, because work
+ * that stopped must not look like work that finished. The tracker's own state name is the label,
+ * so a workflow tracker's "In Review" reads as itself.
+ */
+function resolveIssueStatePresentation(state: IssueState) {
+  if (state.category === "open") {
+    return {
+      ...PULL_REQUEST_STATE_PRESENTATION.open,
+      label: state.name === "open" ? "Open" : state.name,
+      Icon: CircleDotIcon,
+    };
+  }
+  if (state.closeReason === "not-planned") {
+    return {
+      ...PULL_REQUEST_STATE_PRESENTATION.draft,
+      label: "Closed as not planned",
+      Icon: CircleSlashIcon,
+    };
+  }
+  return {
+    ...PULL_REQUEST_STATE_PRESENTATION.merged,
+    label:
+      state.name === "closed"
+        ? state.closeReason === "completed"
+          ? "Closed as completed"
+          : "Closed"
+        : state.name,
+    Icon: CircleCheckIcon,
+  };
+}
+
+export function IssueStateGlyph({ state, className }: { state: IssueState; className?: string }) {
+  const presentation = resolveIssueStatePresentation(state);
+  return (
+    <Tooltip>
+      {/* The list row is itself a button, so the trigger stays a span. */}
+      <TooltipTrigger render={<span className="inline-flex shrink-0" />}>
+        <presentation.Icon
+          role="img"
+          aria-label={presentation.label}
+          className={cn("size-4 shrink-0", presentation.toneClassName, className)}
+        />
+      </TooltipTrigger>
+      <TooltipPopup>{presentation.label}</TooltipPopup>
+    </Tooltip>
+  );
+}
+
+/** "completed" → "Completed"; a reason the tracker spells with a dash reads as words. */
+export function issueCloseReasonLabel(reason: string): string {
+  const words = reason.replace(/[-_]+/g, " ").trim();
+  return words.charAt(0).toUpperCase() + words.slice(1);
+}
diff --git a/apps/web/src/components/pullRequest/PullRequestGhosts.tsx b/apps/web/src/components/pullRequest/PullRequestGhosts.tsx
index c0f7b1959d9e0..d4ef9056cf351 100644
--- a/apps/web/src/components/pullRequest/PullRequestGhosts.tsx
+++ b/apps/web/src/components/pullRequest/PullRequestGhosts.tsx
@@ -37,7 +37,7 @@ import {
   resolvePullRequestState,
 } from "./pullRequestPresentation";
 
-function GhostBar({ className }: { className?: string | undefined }) {
+export function GhostBar({ className }: { className?: string | undefined }) {
   return <span aria-hidden className={cn("block h-3 rounded bg-muted-foreground/15", className)} />;
 }
 
diff --git a/apps/web/src/components/pullRequest/PullRequestListFilters.tsx b/apps/web/src/components/pullRequest/PullRequestListFilters.tsx
index 912e4c6d7ac4d..6590f046d9855 100644
--- a/apps/web/src/components/pullRequest/PullRequestListFilters.tsx
+++ b/apps/web/src/components/pullRequest/PullRequestListFilters.tsx
@@ -96,11 +96,15 @@ export function pullRequestHostLabel(
 export function PullRequestSearchInput({
   value,
   busy,
+  label,
+  placeholder,
   onChange,
   onSubmit,
 }: {
   value: string;
   busy?: boolean;
+  label: string;
+  placeholder: string;
   onChange: (value: string) => void;
   onSubmit: (value: string) => void;
 }) {
@@ -127,8 +131,8 @@ export function PullRequestSearchInput({
             onSubmit(event.currentTarget.value);
           }
         }}
-        placeholder="Search pull requests, or label:bug"
-        aria-label="Search pull requests"
+        placeholder={placeholder}
+        aria-label={label}
       />
     </InputGroup>
   );
diff --git a/apps/web/src/components/pullRequest/PullRequestReactions.tsx b/apps/web/src/components/pullRequest/PullRequestReactions.tsx
index 9d7f67f0f419e..8eb9279e508df 100644
--- a/apps/web/src/components/pullRequest/PullRequestReactions.tsx
+++ b/apps/web/src/components/pullRequest/PullRequestReactions.tsx
@@ -28,22 +28,16 @@ const PILL_CLASS =
 
 const EMPTY_PENDING: ReadonlyMap<PullRequestReactionContent, boolean> = new Map();
 
-export function PullRequestReactionBar({
+/** Reaction pills with a picker. `onReact` resolves to whether the host saved the change. */
+export function ReactionBar({
   reactions,
   canReact,
-  subjectId,
-  environmentId,
-  reference,
-  onRefresh,
+  onReact,
   className,
 }: {
   readonly reactions: ReadonlyArray<PullRequestReaction>;
   readonly canReact: boolean;
-  /** Omit to react to the pull request description. */
-  readonly subjectId?: string | undefined;
-  readonly environmentId: EnvironmentId;
-  readonly reference: PullRequestRef;
-  readonly onRefresh: () => void;
+  readonly onReact: (content: PullRequestReactionContent, reacted: boolean) => Promise<boolean>;
   readonly className?: string | undefined;
 }) {
   const [pickerOpen, setPickerOpen] = useState(false);
@@ -51,9 +45,6 @@ export function PullRequestReactionBar({
     readonly signature: string;
     readonly values: ReadonlyMap<PullRequestReactionContent, boolean>;
   }>({ signature: "", values: EMPTY_PENDING });
-  const setReaction = useAtomCommand(pullRequestEnvironment.setReaction, {
-    reportFailure: false,
-  });
 
   const signature = pullRequestReactionsSignature(reactions);
   const values = pending.signature === signature ? pending.values : EMPTY_PENDING;
@@ -61,25 +52,13 @@ export function PullRequestReactionBar({
 
   const toggle = async (content: PullRequestReactionContent, reacted: boolean) => {
     setPending({ signature, values: new Map([...values, [content, reacted]]) });
-    const result = await setReaction({
-      environmentId,
-      input: {
-        ...reference,
-        ...(subjectId === undefined ? {} : { subjectId }),
-        content,
-        reacted,
-      },
+    if (await onReact(content, reacted)) return;
+    setPending((current) => {
+      const next = new Map(current.values);
+      next.delete(content);
+      return { signature: current.signature, values: next };
     });
-    if (result._tag === "Failure") {
-      setPending((current) => {
-        const next = new Map(current.values);
-        next.delete(content);
-        return { signature: current.signature, values: next };
-      });
-      toastManager.add({ type: "error", title: "The reaction could not be saved" });
-      return;
-    }
-    onRefresh();
+    toastManager.add({ type: "error", title: "The reaction could not be saved" });
   };
 
   if (shown.length === 0 && !canReact) return null;
@@ -160,3 +139,47 @@ export function PullRequestReactionBar({
     </div>
   );
 }
+
+export function PullRequestReactionBar({
+  reactions,
+  canReact,
+  subjectId,
+  environmentId,
+  reference,
+  onRefresh,
+  className,
+}: {
+  readonly reactions: ReadonlyArray<PullRequestReaction>;
+  readonly canReact: boolean;
+  /** Omit to react to the pull request description. */
+  readonly subjectId?: string | undefined;
+  readonly environmentId: EnvironmentId;
+  readonly reference: PullRequestRef;
+  readonly onRefresh: () => void;
+  readonly className?: string | undefined;
+}) {
+  const setReaction = useAtomCommand(pullRequestEnvironment.setReaction, {
+    reportFailure: false,
+  });
+  return (
+    <ReactionBar
+      reactions={reactions}
+      canReact={canReact}
+      className={className}
+      onReact={async (content, reacted) => {
+        const result = await setReaction({
+          environmentId,
+          input: {
+            ...reference,
+            ...(subjectId === undefined ? {} : { subjectId }),
+            content,
+            reacted,
+          },
+        });
+        if (result._tag === "Failure") return false;
+        onRefresh();
+        return true;
+      }}
+    />
+  );
+}
diff --git a/apps/web/src/components/pullRequest/PullRequestsPage.tsx b/apps/web/src/components/pullRequest/PullRequestsPage.tsx
index 4fb9969218c22..340bd6e0154f8 100644
--- a/apps/web/src/components/pullRequest/PullRequestsPage.tsx
+++ b/apps/web/src/components/pullRequest/PullRequestsPage.tsx
@@ -1135,6 +1135,8 @@ export function PullRequestsPage() {
   const searchInput = (
     <PullRequestSearchInput
       value={search.q ?? ""}
+      label="Search pull requests"
+      placeholder="Search pull requests, or label:bug"
       busy={typedQuery.length > 0 && (!querySettled || showingCarried)}
       onChange={(query) => updateListScope({ q: query || undefined })}
       onSubmit={submitQuery}
diff --git a/apps/web/src/components/sidebar/SidebarChrome.tsx b/apps/web/src/components/sidebar/SidebarChrome.tsx
index dd41ddd2a0213..3f4b2a6aaf1e2 100644
--- a/apps/web/src/components/sidebar/SidebarChrome.tsx
+++ b/apps/web/src/components/sidebar/SidebarChrome.tsx
@@ -13,7 +13,7 @@ import {
 } from "../../navigationHistory";
 import { primaryServerKeybindingsAtom } from "../../state/server";
 import { cn } from "../../lib/utils";
-import { usePullRequestsSupported } from "../../state/environments";
+import { useIssuesSupported, usePullRequestsSupported } from "../../state/environments";
 import { T3Wordmark } from "../T3Wordmark";
 import {
   resolveEnvironmentIdentificationPillLabel,
@@ -33,6 +33,8 @@ import {
 } from "../ui/sidebar";
 import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
 import { readPullRequestListPreferences } from "../pullRequest/pullRequestListPreferences";
+import { readIssueListPreferences } from "../issue/issueListPreferences";
+import { IssueGlyph } from "../issue/issuePresentation";
 import { isSidebarUtilityPage, useNavigateToMainApp } from "./mainAppLocation";
 import { SidebarThreadUndoNotice } from "./SidebarThreadUndoNotice";
 import { SidebarProviderUpdatePill } from "./SidebarProviderUpdatePill";
@@ -226,6 +228,7 @@ const SidebarUtilityMenu = memo(function SidebarUtilityMenu() {
     select: (location) => isSidebarUtilityPage(location.pathname),
   });
   const pullRequestsSupported = usePullRequestsSupported();
+  const issuesSupported = useIssuesSupported();
   const closeMobileSidebar = () => {
     if (isMobile) {
       setOpenMobile(false);
@@ -238,6 +241,10 @@ const SidebarUtilityMenu = memo(function SidebarUtilityMenu() {
       search: readPullRequestListPreferences(),
     });
   };
+  const handleIssuesClick = () => {
+    closeMobileSidebar();
+    void navigate({ to: "/issues", search: readIssueListPreferences() });
+  };
   const handleSettingsClick = () => {
     closeMobileSidebar();
     void navigate({ to: "/settings" });
@@ -278,6 +285,13 @@ const SidebarUtilityMenu = memo(function SidebarUtilityMenu() {
               onClick={handlePullRequestsClick}
             />
           ) : null}
+          {issuesSupported ? (
+            <SidebarUtilityItem
+              icon={<IssueGlyph.issue />}
+              label="Issues"
+              onClick={handleIssuesClick}
+            />
+          ) : null}
           <SidebarUtilityItem
             icon={<ChartNoAxesColumnIcon />}
             label="Usage"
diff --git a/apps/web/src/components/sidebar/mainAppLocation.ts b/apps/web/src/components/sidebar/mainAppLocation.ts
index 7cc8db53a9189..feaec824d7fe9 100644
--- a/apps/web/src/components/sidebar/mainAppLocation.ts
+++ b/apps/web/src/components/sidebar/mainAppLocation.ts
@@ -10,7 +10,9 @@ export function isAppModalPage(pathname: string) {
 }
 
 export function isSidebarUtilityPage(pathname: string) {
-  return pathname.startsWith("/projects/") || pathname === "/pull-requests";
+  return (
+    pathname.startsWith("/projects/") || pathname === "/pull-requests" || pathname === "/issues"
+  );
 }
 
 // Pages the root route always renders without the app shell, so they are never
diff --git a/apps/web/src/reopenClosedView.ts b/apps/web/src/reopenClosedView.ts
index 4a16c40ff8f93..6ff5b9b8fc9d6 100644
--- a/apps/web/src/reopenClosedView.ts
+++ b/apps/web/src/reopenClosedView.ts
@@ -158,6 +158,9 @@ export async function reopenClosedView(
     case "pull-request":
       panels.openPullRequest(ref, surface);
       break;
+    case "issue":
+      panels.openIssue(ref, surface);
+      break;
     case "side-chat":
       panels.openSideChat(ref, surface.threadId);
       break;
diff --git a/apps/web/src/rightPanelStore.ts b/apps/web/src/rightPanelStore.ts
index 7de186174d348..eb4cf5a10f285 100644
--- a/apps/web/src/rightPanelStore.ts
+++ b/apps/web/src/rightPanelStore.ts
@@ -21,6 +21,7 @@ const RIGHT_PANEL_KINDS = [
   "terminal",
   "pull-request",
   "pull-requests",
+  "issue",
   "side-chat",
 ] as const;
 export type RightPanelKind = (typeof RIGHT_PANEL_KINDS)[number];
@@ -78,17 +79,43 @@ export type RightPanelSurface =
       detailTab?: PullRequestDetailTab;
     }
   | { id: "pull-requests"; kind: "pull-requests" }
+  /**
+   * An issue opened in the issues list's shared panel, or beside a thread. Like `pull-request`,
+   * the reference lives in the id so several issues can stay open as peer tabs.
+   */
+  | {
+      id: `issue:${string}`;
+      kind: "issue";
+      environmentId?: string;
+      projectId: string;
+      tracker: string;
+      host?: string;
+      scope: string;
+      key: string;
+      url?: string;
+    }
   | { id: `side-chat:${string}`; kind: "side-chat"; threadId: ThreadId };
 
 const RIGHT_PANEL_STORAGE_KEY = "t3code:right-panel-state:v2";
-const RIGHT_PANEL_STORAGE_VERSION = 14;
+const RIGHT_PANEL_STORAGE_VERSION = 15;
 
 export const PULL_REQUESTS_PANEL_REF = scopeThreadRef(
   EnvironmentId.make("pull-requests-panel"),
   ThreadId.make("pull-requests-panel"),
 );
 
-const isPullRequestsPanelKey = (threadKey: string) => threadKey.endsWith(":pull-requests-panel");
+/** The issues page's shared panel, with the same fixed sentinel ref as the pull-request list. */
+export const ISSUES_PANEL_REF = scopeThreadRef(
+  EnvironmentId.make("issues-panel"),
+  ThreadId.make("issues-panel"),
+);
+
+/**
+ * The pull-request and issues lists' shared panels are session
+ * state: reopening the app should show the list, not last session's tabs and detail fetches.
+ */
+const isPullRequestsPanelKey = (threadKey: string) =>
+  threadKey.endsWith(":pull-requests-panel") || threadKey.endsWith(":issues-panel");
 
 export interface ThreadRightPanelState {
   isOpen: boolean;
@@ -125,7 +152,7 @@ interface RightPanelStoreState {
   ) => boolean;
   open: (
     ref: ScopedThreadRef,
-    kind: Exclude<RightPanelKind, "file" | "terminal" | "pull-request" | "side-chat">,
+    kind: Exclude<RightPanelKind, "file" | "terminal" | "pull-request" | "issue" | "side-chat">,
   ) => void;
   openSideChat: (ref: ScopedThreadRef, threadId: ThreadId) => void;
   openDevice: (ref: ScopedThreadRef, target: DeviceTabTarget, automatic?: boolean) => void;
@@ -155,6 +182,7 @@ interface RightPanelStoreState {
       detailTab?: PullRequestDetailTab;
     },
   ) => void;
+  openIssue: (ref: ScopedThreadRef, target: IssueSurfaceTarget) => void;
   setPullRequestDetailTab: (
     ref: ScopedThreadRef,
     surfaceId: string,
@@ -191,7 +219,7 @@ interface RightPanelStoreState {
   toggleVisibility: (ref: ScopedThreadRef) => void;
   toggle: (
     ref: ScopedThreadRef,
-    kind: Exclude<RightPanelKind, "file" | "terminal" | "pull-request" | "side-chat">,
+    kind: Exclude<RightPanelKind, "file" | "terminal" | "pull-request" | "issue" | "side-chat">,
   ) => void;
   setThreadPanelOpen: (
     ref: ScopedThreadRef,
@@ -214,7 +242,10 @@ const DEFAULT_THREAD_PANEL_VISIBILITY: ThreadPanelVisibility = {
 };
 
 const singletonSurface = (
-  kind: Exclude<RightPanelKind, "file" | "preview" | "terminal" | "pull-request" | "side-chat">,
+  kind: Exclude<
+    RightPanelKind,
+    "file" | "preview" | "terminal" | "pull-request" | "issue" | "side-chat"
+  >,
 ): RightPanelSurface => {
   switch (kind) {
     case "diff":
@@ -277,6 +308,39 @@ export function pullRequestSurfaceId(target: {
   return `pull-request:${scope}${encodeURIComponent(target.projectId)}:${host}${encodeURIComponent(target.repository)}:${target.number}`;
 }
 
+export type IssueSurface = Extract<RightPanelSurface, { kind: "issue" }>;
+
+export interface IssueSurfaceTarget {
+  environmentId?: string;
+  projectId: string;
+  tracker: string;
+  host?: string;
+  scope: string;
+  key: string;
+  url?: string;
+}
+
+function issueSurfaceId(target: Omit<IssueSurfaceTarget, "url">): IssueSurface["id"] {
+  const environment =
+    target.environmentId === undefined ? "" : `${encodeURIComponent(target.environmentId)}:`;
+  const host = target.host === undefined ? "" : `${encodeURIComponent(target.host.toLowerCase())}:`;
+  return `issue:${environment}${encodeURIComponent(target.projectId)}:${target.tracker}:${host}${encodeURIComponent(target.scope.toLowerCase())}:${encodeURIComponent(target.key)}`;
+}
+
+function issueSurface(target: IssueSurfaceTarget): IssueSurface {
+  return {
+    id: issueSurfaceId(target),
+    kind: "issue",
+    ...(target.environmentId === undefined ? {} : { environmentId: target.environmentId }),
+    projectId: target.projectId,
+    tracker: target.tracker,
+    ...(typeof target.host === "string" ? { host: target.host.toLowerCase() } : {}),
+    scope: target.scope,
+    key: target.key,
+    ...(typeof target.url === "string" ? { url: target.url } : {}),
+  };
+}
+
 export function pullRequestSurface(target: {
   environmentId?: string;
   projectId: string;
@@ -543,6 +607,23 @@ export function migratePersistedRightPanelState(persistedState: unknown): {
                         }),
                       ];
                     }
+                    if (surface.kind === "issue") {
+                      if (
+                        typeof surface.projectId !== "string" ||
+                        typeof surface.tracker !== "string" ||
+                        typeof surface.scope !== "string" ||
+                        typeof surface.key !== "string"
+                      ) {
+                        return [];
+                      }
+                      const { environmentId, ...rest } = surface;
+                      return [
+                        issueSurface({
+                          ...rest,
+                          ...(typeof environmentId === "string" ? { environmentId } : {}),
+                        }),
+                      ];
+                    }
                     if (surface.kind !== "terminal") return [surface];
                     if (
                       !("resourceId" in surface) ||
@@ -778,6 +859,21 @@ export const useRightPanelStore = create<RightPanelStoreState>()(
             };
           }),
         ),
+      openIssue: (ref, target) =>
+        set((state) =>
+          userAction(state, scopedThreadKey(ref), (current) => {
+            const surface = issueSurface(target);
+            const next = upsertSurface(current, surface);
+            return target.url
+              ? {
+                  ...next,
+                  surfaces: next.surfaces.map((entry) =>
+                    entry.id === surface.id ? surface : entry,
+                  ),
+                }
+              : next;
+          }),
+        ),
       setPullRequestDetailTab: (ref, surfaceId, detailTab) =>
         set((state) => {
           const threadKey = scopedThreadKey(ref);
diff --git a/apps/web/src/routeTree.gen.ts b/apps/web/src/routeTree.gen.ts
index 1b93b3966b4ef..0392f92459406 100644
--- a/apps/web/src/routeTree.gen.ts
+++ b/apps/web/src/routeTree.gen.ts
@@ -22,6 +22,7 @@ import { Route as ChatUsageRouteImport } from './routes/_chat.usage'
 import { Route as ChatSettingsRouteImport } from './routes/_chat.settings'
 import { Route as ChatPullRequestsRouteImport } from './routes/_chat.pull-requests'
 import { Route as ChatNewRouteImport } from './routes/_chat.new'
+import { Route as ChatIssuesRouteImport } from './routes/_chat.issues'
 import { Route as ThreadsEnvironmentIdThreadIdRouteImport } from './routes/threads.$environmentId.$threadId'
 import { Route as ChatSettingsWorktreesRouteImport } from './routes/_chat.settings.worktrees'
 import { Route as ChatSettingsVoiceRouteImport } from './routes/_chat.settings.voice'
@@ -117,6 +118,11 @@ const ChatNewRoute = ChatNewRouteImport.update({
   path: '/new',
   getParentRoute: () => ChatRoute,
 } as any)
+const ChatIssuesRoute = ChatIssuesRouteImport.update({
+  id: '/issues',
+  path: '/issues',
+  getParentRoute: () => ChatRoute,
+} as any)
 const ThreadsEnvironmentIdThreadIdRoute =
   ThreadsEnvironmentIdThreadIdRouteImport.update({
     id: '/threads/$environmentId/$threadId',
@@ -282,6 +288,7 @@ export interface FileRoutesByFullPath {
   '/guest': typeof GuestRoute
   '/pair': typeof PairRoute
   '/welcome': typeof WelcomeRoute
+  '/issues': typeof ChatIssuesRoute
   '/new': typeof ChatNewRoute
   '/pull-requests': typeof ChatPullRequestsRoute
   '/settings': typeof ChatSettingsRouteWithChildren
@@ -325,6 +332,7 @@ export interface FileRoutesByTo {
   '/guest': typeof GuestRoute
   '/pair': typeof PairRoute
   '/welcome': typeof WelcomeRoute
+  '/issues': typeof ChatIssuesRoute
   '/new': typeof ChatNewRoute
   '/pull-requests': typeof ChatPullRequestsRoute
   '/settings': typeof ChatSettingsRouteWithChildren
@@ -371,6 +379,7 @@ export interface FileRoutesById {
   '/guest': typeof GuestRoute
   '/pair': typeof PairRoute
   '/welcome': typeof WelcomeRoute
+  '/_chat/issues': typeof ChatIssuesRoute
   '/_chat/new': typeof ChatNewRoute
   '/_chat/pull-requests': typeof ChatPullRequestsRoute
   '/_chat/settings': typeof ChatSettingsRouteWithChildren
@@ -418,6 +427,7 @@ export interface FileRouteTypes {
     | '/guest'
     | '/pair'
     | '/welcome'
+    | '/issues'
     | '/new'
     | '/pull-requests'
     | '/settings'
@@ -461,6 +471,7 @@ export interface FileRouteTypes {
     | '/guest'
     | '/pair'
     | '/welcome'
+    | '/issues'
     | '/new'
     | '/pull-requests'
     | '/settings'
@@ -506,6 +517,7 @@ export interface FileRouteTypes {
     | '/guest'
     | '/pair'
     | '/welcome'
+    | '/_chat/issues'
     | '/_chat/new'
     | '/_chat/pull-requests'
     | '/_chat/settings'
@@ -649,6 +661,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof ChatNewRouteImport
       parentRoute: typeof ChatRoute
     }
+    '/_chat/issues': {
+      id: '/_chat/issues'
+      path: '/issues'
+      fullPath: '/issues'
+      preLoaderRoute: typeof ChatIssuesRouteImport
+      parentRoute: typeof ChatRoute
+    }
     '/threads/$environmentId/$threadId': {
       id: '/threads/$environmentId/$threadId'
       path: '/threads/$environmentId/$threadId'
@@ -927,6 +946,7 @@ const ChatSettingsRouteWithChildren = ChatSettingsRoute._addFileChildren(
 )
 
 interface ChatRouteChildren {
+  ChatIssuesRoute: typeof ChatIssuesRoute
   ChatNewRoute: typeof ChatNewRoute
   ChatPullRequestsRoute: typeof ChatPullRequestsRoute
   ChatSettingsRoute: typeof ChatSettingsRouteWithChildren
@@ -937,6 +957,7 @@ interface ChatRouteChildren {
 }
 
 const ChatRouteChildren: ChatRouteChildren = {
+  ChatIssuesRoute: ChatIssuesRoute,
   ChatNewRoute: ChatNewRoute,
   ChatPullRequestsRoute: ChatPullRequestsRoute,
   ChatSettingsRoute: ChatSettingsRouteWithChildren,
diff --git a/apps/web/src/routes/_chat.issues.tsx b/apps/web/src/routes/_chat.issues.tsx
new file mode 100644
index 0000000000000..3089e259c7e2d
--- /dev/null
+++ b/apps/web/src/routes/_chat.issues.tsx
@@ -0,0 +1,38 @@
+import type { EnvironmentId, ProjectId } from "@t3tools/contracts";
+import { createFileRoute } from "@tanstack/react-router";
+
+import { IssuesPage, type IssuesSearch } from "../components/issue/IssuesPage";
+
+// The router reads a bare `key=42` as a number.
+const bounded = (value: unknown): string | undefined => {
+  const text = typeof value === "number" ? String(value) : value;
+  return typeof text === "string" && text.trim() ? text.trim().slice(0, 200) : undefined;
+};
+/** A search key that is either present as a string or absent, never present as undefined. */
+function present<K extends string, V extends string>(
+  key: K,
+  value: string | undefined,
+): { [P in K]?: V } {
+  return value === undefined ? {} : ({ [key]: value } as { [P in K]: V });
+}
+
+export const Route = createFileRoute("/_chat/issues")({
+  validateSearch: (raw: Record<string, unknown>): IssuesSearch => ({
+    who:
+      raw.who === "assigned" || raw.who === "authored" || raw.who === "mentioned" ? raw.who : "all",
+    status: raw.status === "closed" || raw.status === "all" ? raw.status : "open",
+    ...present("host", bounded(raw.host)),
+    // Always an own key: the router lays this over the parent route's unvalidated search.
+    q: bounded(raw.q),
+    ...present<"selectedEnvironmentId", EnvironmentId>(
+      "selectedEnvironmentId",
+      bounded(raw.selectedEnvironmentId),
+    ),
+    ...present<"selectedProjectId", ProjectId>("selectedProjectId", bounded(raw.selectedProjectId)),
+    ...present("selectedHost", bounded(raw.selectedHost)),
+    ...present("tracker", bounded(raw.tracker)),
+    ...present("scope", bounded(raw.scope)),
+    ...present("key", bounded(raw.key)),
+  }),
+  component: IssuesPage,
+});
diff --git a/apps/web/src/state/environments.ts b/apps/web/src/state/environments.ts
index 0b2cab287d223..4105c3532fc88 100644
--- a/apps/web/src/state/environments.ts
+++ b/apps/web/src/state/environments.ts
@@ -107,6 +107,10 @@ export function usePullRequestsSupported() {
   return useAtomValue(environmentSummaries.pullRequestsSupportedAtom);
 }
 
+export function useIssuesSupported() {
+  return useAtomValue(environmentSummaries.issuesSupportedAtom);
+}
+
 export function useEnvironmentMachines() {
   return useAtomValue(environmentSummaries.machineByIdAtom);
 }
diff --git a/apps/web/src/state/issues.ts b/apps/web/src/state/issues.ts
new file mode 100644
index 0000000000000..20ab98bca1597
--- /dev/null
+++ b/apps/web/src/state/issues.ts
@@ -0,0 +1,67 @@
+import { createIssueEnvironmentAtoms } from "@t3tools/client-runtime/state/issues";
+import type { EnvironmentId, IssueListInput, IssueListResult } from "@t3tools/contracts";
+import { useAtomValue } from "@effect/atom-react";
+import * as Option from "effect/Option";
+import { AsyncResult, Atom } from "effect/reactivity";
+
+import { connectionAtomRuntime } from "../connection/runtime";
+import { appAtomRegistry } from "../rpc/atomRegistry";
+import { formatEnvironmentQueryError } from "./query";
+
+export const issueEnvironment = createIssueEnvironmentAtoms(connectionAtomRuntime);
+
+export interface IssueListTarget {
+  readonly environmentId: EnvironmentId;
+  readonly input: IssueListInput;
+}
+
+export interface MergedIssueListView {
+  /** One answer per environment that has one, in target order. */
+  readonly answers: ReadonlyArray<readonly [EnvironmentId, IssueListResult]>;
+  /** The first environment that failed outright; the others may still have answered. */
+  readonly error: string | null;
+  readonly isPending: boolean;
+  readonly refresh: () => void;
+}
+
+/**
+ * The same listing read across every connected environment at once, as the pull-request page
+ * does: React cannot subscribe to a list of atoms whose length changes, so the fan-out lives in
+ * one derived atom keyed by the targets. An environment that fails contributes nothing rather
+ * than blanking the page.
+ */
+const mergedIssueListFamily = Atom.family((key: string) =>
+  Atom.make((get) => {
+    const targets = JSON.parse(key) as ReadonlyArray<IssueListTarget>;
+    const answers: Array<readonly [EnvironmentId, IssueListResult]> = [];
+    let error: string | null = null;
+    let isPending = false;
+    for (const target of targets) {
+      const result = get(issueEnvironment.list(target));
+      isPending ||= result.waiting;
+      if (result._tag === "Failure" && error === null) {
+        error = formatEnvironmentQueryError(result.cause);
+      }
+      const value = Option.getOrNull(AsyncResult.value(result));
+      if (value !== null) answers.push([target.environmentId, value]);
+    }
+    return { answers, error, isPending };
+  }).pipe(Atom.withLabel(`web-issues:list:${key}`)),
+);
+
+const EMPTY_ISSUE_LIST = Atom.make({
+  answers: [] as ReadonlyArray<readonly [EnvironmentId, IssueListResult]>,
+  error: null as string | null,
+  isPending: false,
+}).pipe(Atom.withLabel("web-issues:list:empty"));
+
+export function useIssueList(targets: ReadonlyArray<IssueListTarget>): MergedIssueListView {
+  const key = JSON.stringify(targets);
+  const view = useAtomValue(targets.length === 0 ? EMPTY_ISSUE_LIST : mergedIssueListFamily(key));
+  const refresh = () => {
+    for (const target of JSON.parse(key) as ReadonlyArray<IssueListTarget>) {
+      appAtomRegistry.refresh(issueEnvironment.list(target));
+    }
+  };
+  return { ...view, refresh };
+}
diff --git a/docs/user/source-control.md b/docs/user/source-control.md
index 41879e69a24cf..e7e78be82d293 100644
--- a/docs/user/source-control.md
+++ b/docs/user/source-control.md
@@ -350,6 +350,25 @@ conflicts, and a watched thread never auto-settles.
 Cross-repository links use a project on the same host. Azure DevOps reviews require a project checked
 out from the matching organization and repository.
 
+## Issues
+
+The Issues page lists the issues of every project whose remote is on a supported tracker
+(GitHub today), grouped per tracker account. Open it from the sidebar's utility row or with
+**Open issues** in the command palette. Filter by open or closed, by your involvement
+(assigned, opened by you, mentioning you), and by tracker; the search box asks the tracker
+itself where it can search. Press **Load more** at the end of a group to read further back.
+
+Select an issue to open it beside the list: description, comments, state changes, linked pull
+requests, labels, assignees, and reactions. Linked pull requests open in the same panel. You can
+comment, edit the title and description, change labels and assignees, react, and close or
+reopen (with a close reason where the tracker records one) when the tracker and your account
+allow it. An issue read through a project that does not own its repository is shown read-only.
+
+**New issue** files an issue on a project's tracker. Where the repository offers issue templates,
+pick one to start from its title, body, labels, and assignees.
+
+Writing to a tracker over a remote connection requires the `source-control:write` scope.
+
 ## GitHub stacks
 
 The Pull requests page shows each PR's position in its GitHub stack. Open the stack badge in a
diff --git a/packages/client-runtime/package.json b/packages/client-runtime/package.json
index 19989716bc3c6..7265c288e0653 100644
--- a/packages/client-runtime/package.json
+++ b/packages/client-runtime/package.json
@@ -271,6 +271,10 @@
       "types": "./src/state/providerInstanceDisplay.ts",
       "default": "./src/state/providerInstanceDisplay.ts"
     },
+    "./state/issues": {
+      "types": "./src/state/issues.ts",
+      "default": "./src/state/issues.ts"
+    },
     "./state/pull-requests": {
       "types": "./src/state/pullRequests.ts",
       "default": "./src/state/pullRequests.ts"
diff --git a/packages/client-runtime/src/state/issues.test.ts b/packages/client-runtime/src/state/issues.test.ts
new file mode 100644
index 0000000000000..700ced1973b09
--- /dev/null
+++ b/packages/client-runtime/src/state/issues.test.ts
@@ -0,0 +1,92 @@
+import type { IssueComment, IssueListEntry, IssueTrackerKind, ProjectId } from "@t3tools/contracts";
+import { describe, expect, it } from "vite-plus/test";
+
+import {
+  issueEntryKey,
+  mergeIssueListErrors,
+  mergeIssueListPage,
+  prependIssueComments,
+} from "./issues.ts";
+
+function entry(overrides: Partial<IssueListEntry> & { key: string }): IssueListEntry {
+  return {
+    tracker: "github" as IssueTrackerKind,
+    host: "github.com",
+    scope: "acme/app",
+    displayKey: `#${overrides.key}`,
+    title: `Issue ${overrides.key}`,
+    url: `https://github.com/acme/app/issues/${overrides.key}`,
+    author: null,
+    state: { category: "open", name: "open" },
+    createdAt: "2026-10-01T00:00:00.000Z",
+    updatedAt: "2026-10-01T00:00:00.000Z",
+    closedAt: null,
+    assignees: [],
+    labels: [],
+    commentCount: 0,
+    projectId: "project-1" as ProjectId,
+    projectTitle: "App",
+    ...overrides,
+  };
+}
+
+describe("mergeIssueListErrors", () => {
+  it("keeps earlier failures and lets a continuation's replace its project's", () => {
+    const api = "api" as ProjectId;
+    const web = "web" as ProjectId;
+    const held = [
+      { projectId: api, projectTitle: "api", message: "boom" },
+      { projectId: web, projectTitle: "web", message: "first" },
+    ];
+    const page = [{ projectId: web, projectTitle: "web", message: "rate limited" }];
+    expect(mergeIssueListErrors(held, page).map((error) => error.message)).toEqual([
+      "boom",
+      "rate limited",
+    ]);
+  });
+});
+
+describe("mergeIssueListPage", () => {
+  it("keeps rows from scopes the page did not continue and orders by update", () => {
+    const held = [
+      entry({ key: "1", updatedAt: "2026-10-03T00:00:00.000Z" }),
+      entry({ key: "9", scope: "acme/other", updatedAt: "2026-10-02T00:00:00.000Z" }),
+    ];
+    const page = [entry({ key: "2", updatedAt: "2026-10-04T00:00:00.000Z" })];
+    expect(mergeIssueListPage(held, page).map((row) => row.key)).toEqual(["2", "1", "9"]);
+  });
+
+  it("replaces a repeated row with the page's newer words", () => {
+    const held = [entry({ key: "1", title: "Old title" })];
+    const page = [
+      entry({ key: "1", title: "New title", state: { category: "closed", name: "closed" } }),
+    ];
+    const merged = mergeIssueListPage(held, page);
+    expect(merged).toHaveLength(1);
+    expect(merged[0]?.title).toBe("New title");
+    expect(merged[0]?.state.category).toBe("closed");
+  });
+
+  it("keys rows case-insensitively by host and scope, exactly by key", () => {
+    expect(issueEntryKey(entry({ key: "1", host: "GitHub.com", scope: "Acme/App" }))).toBe(
+      issueEntryKey(entry({ key: "1" })),
+    );
+    expect(issueEntryKey(entry({ key: "ENG-1" }))).not.toBe(issueEntryKey(entry({ key: "eng-1" })));
+  });
+});
+
+describe("prependIssueComments", () => {
+  const comment = (id: string): IssueComment => ({
+    id,
+    author: null,
+    body: id,
+    createdAt: "2026-10-01T00:00:00.000Z",
+    url: null,
+  });
+
+  it("puts older comments first and drops ones already shown", () => {
+    const current = [comment("c3"), comment("c4")];
+    const older = [comment("c1"), comment("c2"), comment("c3")];
+    expect(prependIssueComments(current, older).map((c) => c.id)).toEqual(["c1", "c2", "c3", "c4"]);
+  });
+});
diff --git a/packages/client-runtime/src/state/issues.ts b/packages/client-runtime/src/state/issues.ts
new file mode 100644
index 0000000000000..b91d707b9d29e
--- /dev/null
+++ b/packages/client-runtime/src/state/issues.ts
@@ -0,0 +1,175 @@
+import {
+  WS_METHODS,
+  type EnvironmentId,
+  type IssueComment,
+  type IssueListEntry,
+  type IssueListProjectError,
+  type IssueListResult,
+  type IssueRef,
+} from "@t3tools/contracts";
+import * as Effect from "effect/Effect";
+import { Atom, type AtomRegistry } from "effect/reactivity";
+
+import {
+  createAtomCommandScheduler,
+  createEnvironmentRpcCommand,
+  createEnvironmentRpcQueryAtomFamily,
+} from "./runtime.ts";
+import type { EnvironmentRegistry } from "../connection/registry.ts";
+
+/** One row's identity across list pages and detail reads; hosts compare case-insensitively. */
+export function issueEntryKey(
+  entry: Pick<IssueListEntry, "projectId" | "host" | "scope" | "key">,
+): string {
+  return `${entry.projectId}\u0000${entry.host.toLowerCase()}\u0000${entry.scope.toLowerCase()}\u0000${entry.key}`;
+}
+
+/**
+ * Lay a continuation page over the rows already held. A page only covers the scopes it was asked
+ * to continue, so rows from other scopes stay; a row the page repeats replaces the held one, so a
+ * title or state that moved between reads shows the newer words. Order stays newest-updated first,
+ * which is how every tracker hands them over.
+ */
+export function mergeIssueListPage(
+  held: ReadonlyArray<IssueListEntry>,
+  page: ReadonlyArray<IssueListEntry>,
+): ReadonlyArray<IssueListEntry> {
+  if (held.length === 0) return page;
+  if (page.length === 0) return held;
+  const byKey = new Map<string, IssueListEntry>();
+  for (const entry of held) byKey.set(issueEntryKey(entry), entry);
+  for (const entry of page) byKey.set(issueEntryKey(entry), entry);
+  return [...byKey.values()].sort((a, b) => Date.parse(b.updatedAt) - Date.parse(a.updatedAt));
+}
+
+/** A continuation's failures for a project replace the ones it reported before. */
+export function mergeIssueListErrors(
+  held: ReadonlyArray<IssueListProjectError>,
+  page: ReadonlyArray<IssueListProjectError>,
+): ReadonlyArray<IssueListProjectError> {
+  if (page.length === 0) return held;
+  const replaced = new Set(page.map((error) => error.projectId));
+  return [...held.filter((error) => !replaced.has(error.projectId)), ...page];
+}
+
+/** Older comments go in front: the detail carries the newest page and pages walk backwards. */
+export function prependIssueComments(
+  current: ReadonlyArray<IssueComment>,
+  older: ReadonlyArray<IssueComment>,
+): ReadonlyArray<IssueComment> {
+  if (older.length === 0) return current;
+  const seen = new Set(current.map((comment) => comment.id));
+  return [...older.filter((comment) => !seen.has(comment.id)), ...current];
+}
+
+/**
+ * Every read goes to a tracker API over the environment, so results are reused for a short while
+ * and refreshed explicitly. Mutations run serially per environment: changes to one issue are
+ * order-sensitive. Each confirmed write refreshes the detail it touched; the list is refreshed by
+ * the page, which knows which listings it is showing.
+ */
+export function createIssueEnvironmentAtoms<R, E>(
+  runtime: Atom.AtomRuntime<EnvironmentRegistry | R, E>,
+) {
+  const commandScheduler = createAtomCommandScheduler();
+  const serialPerEnvironment = {
+    mode: "serial",
+    key: ({ environmentId }: { readonly environmentId: string }) => environmentId,
+  } as const;
+  const detail = createEnvironmentRpcQueryAtomFamily(runtime, {
+    label: "environment-data:issues:detail",
+    tag: WS_METHODS.issuesDetail,
+    staleTimeMs: 30_000,
+  });
+  const detailRef = ({ projectId, tracker, host, scope, key }: IssueRef): IssueRef => ({
+    projectId,
+    tracker,
+    ...(host === undefined ? {} : { host }),
+    scope,
+    key,
+  });
+  const refreshDetail = (
+    { environmentId, input }: { readonly environmentId: EnvironmentId; readonly input: IssueRef },
+    registry: AtomRegistry.AtomRegistry,
+  ) => Effect.sync(() => registry.refresh(detail({ environmentId, input: detailRef(input) })));
+  return {
+    list: createEnvironmentRpcQueryAtomFamily(runtime, {
+      label: "environment-data:issues:list",
+      tag: WS_METHODS.issuesList,
+      staleTimeMs: 30_000,
+    }),
+    /**
+     * A continuation of the listing, run as a command rather than read as a query: a page is
+     * asked for once and laid over the rows held, and a refresh of the first page forgets it.
+     */
+    listPage: createEnvironmentRpcCommand(runtime, {
+      label: "environment-data:issues:list-page",
+      tag: WS_METHODS.issuesList,
+      scheduler: commandScheduler,
+      concurrency: {
+        mode: "singleFlight",
+        key: ({ environmentId, input }) => JSON.stringify([environmentId, input]),
+      },
+    }),
+    detail,
+    /** Older comments past the cursor the detail handed over; the panel prepends what arrives. */
+    comments: createEnvironmentRpcCommand(runtime, {
+      label: "environment-data:issues:comments",
+      tag: WS_METHODS.issuesComments,
+      scheduler: commandScheduler,
+      concurrency: {
+        mode: "singleFlight",
+        key: ({ environmentId, input }) =>
+          JSON.stringify([environmentId, input.projectId, input.scope, input.key, input.cursor]),
+      },
+    }),
+    /** Read when the composer opens: what a scope offers a new issue changes with a commit. */
+    templates: createEnvironmentRpcQueryAtomFamily(runtime, {
+      label: "environment-data:issues:templates",
+      tag: WS_METHODS.issuesTemplates,
+      staleTimeMs: 5 * 60_000,
+    }),
+    /** Read when a label or assignee picker opens, not with every issue. */
+    candidates: createEnvironmentRpcQueryAtomFamily(runtime, {
+      label: "environment-data:issues:candidates",
+      tag: WS_METHODS.issuesCandidates,
+      staleTimeMs: 60_000,
+    }),
+    create: createEnvironmentRpcCommand(runtime, {
+      label: "environment-data:issues:create",
+      tag: WS_METHODS.issuesCreate,
+      scheduler: commandScheduler,
+      concurrency: serialPerEnvironment,
+    }),
+    comment: createEnvironmentRpcCommand(runtime, {
+      label: "environment-data:issues:comment",
+      tag: WS_METHODS.issuesComment,
+      scheduler: commandScheduler,
+      concurrency: serialPerEnvironment,
+      onSuccess: refreshDetail,
+    }),
+    update: createEnvironmentRpcCommand(runtime, {
+      label: "environment-data:issues:update",
+      tag: WS_METHODS.issuesUpdate,
+      scheduler: commandScheduler,
+      concurrency: serialPerEnvironment,
+      onSuccess: refreshDetail,
+    }),
+    setState: createEnvironmentRpcCommand(runtime, {
+      label: "environment-data:issues:set-state",
+      tag: WS_METHODS.issuesSetState,
+      scheduler: commandScheduler,
+      concurrency: serialPerEnvironment,
+      onSuccess: refreshDetail,
+    }),
+    react: createEnvironmentRpcCommand(runtime, {
+      label: "environment-data:issues:react",
+      tag: WS_METHODS.issuesReact,
+      scheduler: commandScheduler,
+      concurrency: serialPerEnvironment,
+      onSuccess: refreshDetail,
+    }),
+  };
+}
+
+export type IssueListAnswer = IssueListResult;
diff --git a/packages/client-runtime/src/state/presentation.ts b/packages/client-runtime/src/state/presentation.ts
index f3ffb03b0bcfe..97f74a3a0ca91 100644
--- a/packages/client-runtime/src/state/presentation.ts
+++ b/packages/client-runtime/src/state/presentation.ts
@@ -318,6 +318,13 @@ export function createEnvironmentSummaryAtoms(input: {
         (get(input.presentationAtom(environmentId))?.serverConfig ?? null) !== null,
     ),
   );
+  const issuesSupportedAtom = Atom.make((get) =>
+    get(environmentIdsAtom).some(
+      (environmentId) =>
+        get(input.presentationAtom(environmentId))?.serverConfig?.environment.capabilities
+          .issues === true,
+    ),
+  );
   return {
     environmentIdsAtom,
     connectedEnvironmentIdsAtom,
@@ -325,5 +332,6 @@ export function createEnvironmentSummaryAtoms(input: {
     environmentsAtom,
     machineByIdAtom,
     pullRequestsSupportedAtom,
+    issuesSupportedAtom,
   };
 }
diff --git a/packages/contracts/src/environment.ts b/packages/contracts/src/environment.ts
index 603b6c6cc862d..7eab66fbaf07a 100644
--- a/packages/contracts/src/environment.ts
+++ b/packages/contracts/src/environment.ts
@@ -95,6 +95,7 @@ export const ExecutionEnvironmentCapabilities = Schema.Struct({
   ),
   pullRequests: Schema.optionalKey(Schema.Boolean),
   pullRequestChecks: Schema.optionalKey(Schema.Boolean),
+  issues: Schema.optionalKey(Schema.Boolean),
   /** Side chats: hidden `lineage.sideChat` forks. Older servers ignore the fork flag. */
   sideChats: Schema.optionalKey(Schema.Boolean),
   vcsBranchStatus: Schema.optionalKey(Schema.Boolean),
diff --git a/packages/contracts/src/issue.ts b/packages/contracts/src/issue.ts
index 936c573c66e06..988eb5a96f168 100644
--- a/packages/contracts/src/issue.ts
+++ b/packages/contracts/src/issue.ts
@@ -9,7 +9,13 @@ import {
   ProjectId,
   TrimmedNonEmptyString,
 } from "./baseSchemas.ts";
-import { PullRequestActor, PullRequestLabel, PullRequestState } from "./pullRequest.ts";
+import {
+  PullRequestActor,
+  PullRequestLabel,
+  PullRequestReaction,
+  PullRequestReactionContent,
+  PullRequestState,
+} from "./pullRequest.ts";
 
 /**
  * Which tracker an issue lives in. Git hosts reuse their `SourceControlProviderKind` spelling
@@ -53,25 +59,10 @@ export type IssueListState = typeof IssueListState.Type;
 export const IssueInvolvement = Schema.Literals(["all", "assigned", "authored", "mentioned"]);
 export type IssueInvolvement = typeof IssueInvolvement.Type;
 
-export const IssueReactionContent = Schema.Literals([
-  "thumbs-up",
-  "thumbs-down",
-  "laugh",
-  "hooray",
-  "confused",
-  "heart",
-  "rocket",
-  "eyes",
-]);
+export const IssueReactionContent = PullRequestReactionContent;
 export type IssueReactionContent = typeof IssueReactionContent.Type;
 
-export const IssueReaction = Schema.Struct({
-  content: IssueReactionContent,
-  count: PositiveInt,
-  /** Who reacted, as far as the tracker named them; the viewer is left out and shown as "You". */
-  actors: Schema.Array(TrimmedNonEmptyString),
-  viewerHasReacted: Schema.Boolean,
-});
+export const IssueReaction = PullRequestReaction;
 export type IssueReaction = typeof IssueReaction.Type;
 
 /**