From 7c1d2503dbfc9c06a78c0bb6a2a34e58e0eafad3 Mon Sep 17 00:00:00 2001
From: Dotta <bippadotta@protonmail.com>
Date: Wed, 7 Oct 2026 15:39:06 -0500
Subject: [PATCH] Improve GitHub bot management hierarchy

Separate behavior and access, retain drafts across tabs, and make current reviews and task conversations easier to scan. Add production Storybook journeys and regression coverage.

Co-Authored-By: Paperclip <noreply@paperclip.ing>
---
 doc/connections/GITHUB-REVIEW-BOT.md          |   23 +-
 .../2026-10-07-github-app-live-test-drive.md  |   32 +
 .../pages/apps/chat/ChatConversationList.tsx  |  110 ++
 ui/src/pages/apps/chat/ChatEndpointDetail.tsx |   60 +-
 .../apps/chat/GitHubBotConfiguration.tsx      | 1040 ++++++++++-------
 .../apps/chat/GitHubBotManagement.test.tsx    |  418 +++++++
 .../pages/apps/chat/GitHubBotManagement.tsx   |  721 +++++++-----
 .../pages/apps/chat/chat-ui-contract.test.ts  |    2 -
 .../github-bot-management/fixture-api.tsx     |  130 +++
 .../stories/github-bot-management/fixtures.ts |  200 ++++
 .../management.stories.tsx                    |  180 +++
 ui/storybook/stories/github-chat.stories.tsx  |    2 +-
 12 files changed, 2129 insertions(+), 789 deletions(-)
 create mode 100644 ui/src/pages/apps/chat/ChatConversationList.tsx
 create mode 100644 ui/src/pages/apps/chat/GitHubBotManagement.test.tsx
 create mode 100644 ui/storybook/stories/github-bot-management/fixture-api.tsx
 create mode 100644 ui/storybook/stories/github-bot-management/fixtures.ts
 create mode 100644 ui/storybook/stories/github-bot-management/management.stories.tsx

diff --git a/doc/connections/GITHUB-REVIEW-BOT.md b/doc/connections/GITHUB-REVIEW-BOT.md
index 146ba8f920c..894de711da9 100644
--- a/doc/connections/GITHUB-REVIEW-BOT.md
+++ b/doc/connections/GITHUB-REVIEW-BOT.md
@@ -33,8 +33,8 @@ required GitHub checks, read
 New connections default to authorized mentions, advisory reviews, linked-member
 access, guests off, and enabled bot GitHub tools. Existing instructions, explicit
 behavior, and narrower saved repository restrictions remain intact. Later
-repository additions require enablement in connection settings. Advanced review
-rules and prompts also live in settings.
+repository additions require enablement in Access. Advanced review rules and
+prompts live in Settings.
 
 Local instances receive public callbacks and signed events through an enrolled
 Paperclip Cloud connector, using outbound requests instead of a public tunnel.
@@ -57,6 +57,25 @@ Connection setup reports tool/runtime support and isolation separately; an actua
 task is still required to prove that the chosen provider can execute in the
 selected environment.
 
+## Manage a connected bot
+
+- **Settings:** edit instructions, choose when the bot runs, and set review output.
+  Event-specific instructions, filters, formal approvals, and repository overrides
+  are available in disclosures.
+- **Access:** choose enabled repositories, allowed people, each person’s automatic
+  events, and the bot’s GitHub tools. Repository switches save immediately. Other
+  changes use **Save changes**. A linked account alone does not grant selected-member
+  access. External contributors still require a sponsor and restricted permissions.
+- **Reviews:** see the latest review for each pull request. The result names the
+  reviewed commit; earlier reviews remain in history. A previous passing result
+  does not stand in for a pending review of a newer commit.
+- **Conversations:** follow the task title to Paperclip or the repository/thread
+  label to GitHub.
+
+Settings and Access share unsaved edits while you switch connection tabs. Save
+before reloading or leaving the connection. No permissions change merely by
+opening a tab or configuring an implicit linked member’s individual event settings.
+
 ## Who can start work
 
 Linked members may be allowed together or selected individually. Teammates
diff --git a/doc/plans/2026-10-07-github-app-live-test-drive.md b/doc/plans/2026-10-07-github-app-live-test-drive.md
index 008dc861753..454dee4663e 100644
--- a/doc/plans/2026-10-07-github-app-live-test-drive.md
+++ b/doc/plans/2026-10-07-github-app-live-test-drive.md
@@ -253,3 +253,35 @@ Qualification limits: personal-account setup, delayed organization approval and
 ### Cleanup completed
 
 Closed disposable issues 1, 2 and 4 and PR 3 without merging. Deleted only the test branch. Retained the App, original connection, bot, vault and test-drive data. The public relay/tunnel was stopped. The private test drive remains available on port 3110 for inspection. Fixes and qualification record were pushed to draft PR #15416; current-head CI/review remain outstanding.
+
+
+### Management page hierarchy qualification
+
+The connected bot now separates instructions, triggers, and review output in
+Settings from repository, people, and tool permissions in Access. Each linked
+person appears once. Advanced controls are disclosed. Settings and Access share
+one versioned draft across all connection tabs. Reviews show the latest assessment
+per repository/PR and preserve earlier commit evidence in history. Conversation
+titles link directly to tasks; provider labels link directly to their threads.
+
+Walkthrough: Connectors → search GitHub → Animal Bot → Settings → Access → Reviews
+→ Conversations. A harmless trailing newline was saved from Access after editing
+Settings, persisted after a reload, and then was removed through the UI. Redacted
+API snapshots confirm the full configuration returned exactly to its original
+value (revision 4 → 6). Repository and people permissions were not changed.
+
+The real instance was inspected at its desktop width, 820px, and 390px with the
+actual mobile shell. Review history expanded correctly and the ASCII animal
+rendered as a code block. Production Storybook fixtures verified a saved edit,
+a pending current commit with its previous passing score hidden, a recoverable
+configuration failure, and a mobile empty conversation state. These fixtures do
+not qualify any new provider execution. Screenshots and configuration comparisons
+are in the existing local E2E evidence directory.
+
+Focused UI checks cover draft retention, revision conflicts, isolated repository
+updates, override preservation/unique field IDs, implicit linked-member event
+configuration, mentions-only trigger preservation, latest-review ordering, pending
+head presentation, and GitHub thread labels. The affected management, setup,
+AgentMail, sidebar, and shared UI-contract group has 47 passing tests. Repository
+typecheck/build, Storybook build, and token gates pass. The earlier full-suite
+failure and outstanding current-head CI/review remain as recorded above.
diff --git a/ui/src/pages/apps/chat/ChatConversationList.tsx b/ui/src/pages/apps/chat/ChatConversationList.tsx
new file mode 100644
index 00000000000..68022b96450
--- /dev/null
+++ b/ui/src/pages/apps/chat/ChatConversationList.tsx
@@ -0,0 +1,110 @@
+import { MessageSquare } from "lucide-react";
+import type { ChatConversation, ChatProvider } from "@/api/chatEndpoints";
+import { EmptyState } from "@/components/EmptyState";
+import { StatusBadge } from "@/components/StatusBadge";
+import { Link } from "@/lib/router";
+import { formatDateTime } from "@/lib/utils";
+import { AppLogo } from "../AppLogo";
+
+export function conversationDestination(
+  row: ChatConversation,
+  provider: ChatProvider,
+) {
+  if (provider === "github" && row.externalUrl) {
+    try {
+      const url = new URL(row.externalUrl);
+      const parts = url.pathname.split("/");
+      if (
+        url.hostname === "github.com" &&
+        ["issues", "pull"].includes(parts[3]) &&
+        /^\d+$/.test(parts[4])
+      )
+        return `${parts[1]}/${parts[2]} #${parts[4]}`;
+    } catch {
+      /* Preserve the provider label when no thread URL is available. */
+    }
+  }
+  return row.externalLabel;
+}
+
+export function ChatConversationList({
+  rows,
+  provider,
+}: {
+  rows: ChatConversation[];
+  provider: ChatProvider;
+}) {
+  if (!rows.length)
+    return (
+      <EmptyState
+        icon={MessageSquare}
+        message="No conversations yet"
+        description={
+          provider === "agentmail"
+            ? "Send an email to this agent’s address to start one."
+            : "Mention the agent in an enabled destination to start one."
+        }
+      />
+    );
+  return (
+    <ul
+      aria-label="Conversations"
+      className="divide-y divide-border border-y border-border"
+    >
+      {rows.map((row) => (
+        <li key={row.id} className="flex items-start gap-3 py-4 text-sm">
+          <AppLogo
+            name={provider}
+            brandKey={provider}
+            compact
+            className="mt-0.5 size-5! shrink-0 rounded-sm bg-transparent"
+          />
+          <div className="min-w-0 flex-1 space-y-1">
+            <div className="break-words">
+              {row.issueIdentifier && (
+                <span className="mr-2 text-xs text-muted-foreground">
+                  {row.issueIdentifier}
+                </span>
+              )}
+              {row.issueId ? (
+                <Link
+                  className="break-words font-medium hover:underline"
+                  to={`/issues/${row.issueId}`}
+                >
+                  {row.issueTitle ?? row.issueIdentifier ?? "Paperclip task"}
+                </Link>
+              ) : (
+                <span className="font-medium">
+                  {row.issueTitle ?? "Waiting for task"}
+                </span>
+              )}
+            </div>
+            <div className="flex flex-wrap items-baseline gap-x-3 gap-y-1 text-xs text-muted-foreground">
+              {row.externalUrl ? (
+                <a
+                  href={row.externalUrl}
+                  target="_blank"
+                  rel="noreferrer"
+                  className="break-words hover:text-foreground hover:underline"
+                >
+                  {conversationDestination(row, provider)}
+                </a>
+              ) : (
+                <span className="break-all">{row.externalLabel}</span>
+              )}
+              {row.updatedAt && (
+                <time dateTime={row.updatedAt}>
+                  {formatDateTime(row.updatedAt)}
+                </time>
+              )}
+              {row.state === "completed" && <span>Completed</span>}
+            </div>
+          </div>
+          {row.state !== "active" && row.state !== "completed" && (
+            <StatusBadge status={row.state} />
+          )}
+        </li>
+      ))}
+    </ul>
+  );
+}
diff --git a/ui/src/pages/apps/chat/ChatEndpointDetail.tsx b/ui/src/pages/apps/chat/ChatEndpointDetail.tsx
index 3203d0207ec..20e35fdfb37 100644
--- a/ui/src/pages/apps/chat/ChatEndpointDetail.tsx
+++ b/ui/src/pages/apps/chat/ChatEndpointDetail.tsx
@@ -5,6 +5,8 @@ import { SlackAvatarSettings } from "./SlackAvatarStep";
 import { agentsApi } from "@/api/agents";
 import { agentAvatarUrl } from "@/lib/agent-avatar-url";
 import { resolveAgentAppearance } from "@paperclipai/shared";
+import { AgentAvatar } from "@/components/AgentAvatar";
+import { ChatConversationList } from "./ChatConversationList";
 import { GitHubBotManagement, GitHubReviews } from "./GitHubBotManagement";
 import { EmailEndpointSettings } from "./EmailEndpointSetup";
 import { EmailConnectionAccess } from "@/components/EmailConnectionAccess";
@@ -243,6 +245,11 @@ export function ChatEndpointDetail() {
         : false,
   });
   const endpoint = endpointQuery.data;
+  const avatarAgent = useQuery({
+    queryKey: queryKeys.agents.detail(endpoint?.assignedAgentId ?? ""),
+    queryFn: () => agentsApi.get(endpoint!.assignedAgentId),
+    enabled: endpoint?.provider === "github",
+  });
   const [copyStatus, setCopyStatus] = useState<string | null>(null);
 
   useEffect(() => {
@@ -291,12 +298,14 @@ export function ChatEndpointDetail() {
   return (
     <div className="max-w-5xl space-y-6 pb-12">
       <header className="flex flex-wrap items-start justify-between gap-4">
-        <div>
+        <div className="flex min-w-0 items-center gap-3">
+          {endpoint.provider === "github" && <AgentAvatar agent={avatarAgent.data ?? { id: endpoint.assignedAgentId, name: endpoint.assignedAgentName }} size={40} />}
+          <div className="min-w-0">
           <h1 className="text-xl font-bold">
-            {endpoint.assignedAgentName} in {providerNames[endpoint.provider]}
+            {endpoint.provider === "github" ? <Link to={`/agents/${endpoint.assignedAgentId}`} className="hover:underline">{endpoint.assignedAgentName}</Link> : `${endpoint.assignedAgentName} in ${providerNames[endpoint.provider]}`}
           </h1>
-          <p className="mt-1 text-sm text-muted-foreground">
-            {endpoint.providerAccountLabel ?? (endpoint.provider === "agentmail" ? endpoint.botExternalId ?? "Email connection" : "Chat connection")}
+          <p className="mt-1 flex flex-wrap items-center gap-2 text-sm text-muted-foreground">
+            {endpoint.provider === "github" ? <><AppLogo name="GitHub" brandKey="github" compact className="size-4! rounded-sm bg-transparent" />{endpoint.botLabel ?? endpoint.botUsername ?? "GitHub"}{endpoint.providerAccountLabel && <span>· {endpoint.providerAccountLabel}</span>}</> : endpoint.providerAccountLabel ?? (endpoint.provider === "agentmail" ? endpoint.botExternalId ?? "Email connection" : "Chat connection")}
           </p>
           {endpoint.provider === "imessage-photon" && endpoint.botExternalId && endpoint.photonAllocation !== "shared" && (
             <div className="mt-2 flex flex-wrap items-center gap-2 text-sm">
@@ -308,6 +317,7 @@ export function ChatEndpointDetail() {
               <span role="status" className="text-muted-foreground">{copyStatus}</span>
             </div>
           )}
+          </div>
         </div>
         <div className="flex items-center gap-2">
           {setupIncomplete ? (
@@ -325,14 +335,11 @@ export function ChatEndpointDetail() {
           {endpoint.status !== "active" && <StatusBadge status={endpoint.status} />}
         </div>
       </header>
-      {activeTab === "settings" && (
-        <>
-{endpoint.provider === "github" && <GitHubBotManagement endpoint={endpoint} view="settings" />}
-{endpoint.provider !== "github" && <Settings endpointId={endpoint.id} endpoint={endpoint} />}
-</>
-      )}
+      {endpoint.provider === "github" && <div hidden={activeTab !== "settings" && activeTab !== "access"}>
+        <GitHubBotManagement key={endpoint.id} endpoint={endpoint} view={activeTab === "access" ? "access" : "settings"} />
+      </div>}
+      {activeTab === "settings" && endpoint.provider !== "github" && <Settings endpointId={endpoint.id} endpoint={endpoint} />}
       {activeTab === "reviews" && endpoint.provider === "github" && <GitHubReviews endpointId={endpoint.id} />}
-{activeTab === "access" && endpoint.provider === "github" && <GitHubBotManagement endpoint={endpoint} view="access" />}
 {activeTab === "access" && endpoint.provider === "agentmail" && <EmailAccess endpoint={endpoint} />}
 {activeTab === "access" && endpoint.provider !== "github" && endpoint.provider !== "agentmail" && (
         <Access
@@ -769,43 +776,14 @@ function Conversations({
     queryFn: () => chatEndpointsApi.listConversations(endpointId),
     ...liveChatQueryOptions,
   });
-  const rows = query.data ?? [];
   return (
     <section className="space-y-4">
-      <div>
-        <h2 className="text-lg font-semibold">Conversations</h2>
-      </div>
       {query.isPending ? <p role="status" className="text-sm text-muted-foreground">Loading conversations…</p> : query.isError ? (
         <div className="space-y-3">
           <p role="alert" className="text-sm text-destructive">Conversations could not be loaded.</p>
           <Button variant="outline" onClick={() => void query.refetch()}>Try again</Button>
         </div>
-      ) : rows.length === 0 ? (
-        <p className="rounded-lg border border-dashed border-border p-4 text-sm text-muted-foreground">
-          {provider === "agentmail"
-            ? "No email conversations yet. Send an email to this agent’s address to start one."
-            : "No conversations yet. Address the agent in an enabled destination to start one."}
-        </p>
-      ) : (
-        <ul aria-label="Conversations" className="divide-y divide-border overflow-x-auto border-y border-border">
-          {rows.map((row) => (
-            <li key={row.id} className="flex min-w-xl items-center gap-3 px-2 py-3 text-sm transition-colors hover:bg-accent/50">
-              <AppLogo name={providerNames[provider]} brandKey={provider} compact className="size-5! rounded-sm bg-transparent" />
-              <div className="flex min-w-0 max-w-56 items-center gap-2">
-                <span className="truncate font-medium" title={row.externalLabel}>{row.externalLabel}</span>
-                {row.externalUrl && <a href={row.externalUrl} target="_blank" rel="noreferrer" className="inline-flex shrink-0 items-center gap-1 text-xs text-muted-foreground hover:text-foreground hover:underline">Open {providerNames[provider]}<ExternalLink className="size-3" /></a>}
-              </div>
-              <span aria-hidden="true" className="text-muted-foreground">·</span>
-              <div className="flex min-w-0 flex-1 items-center gap-2">
-                <span className="truncate" title={row.issueTitle ?? undefined}>{row.issueTitle ?? "Waiting for task"}</span>
-                {row.issueId && <Link to={`/issues/${row.issueId}`} className="inline-flex shrink-0 items-center gap-1 text-xs text-muted-foreground hover:text-foreground hover:underline">Open task<ExternalLink className="size-3" /></Link>}
-              </div>
-              <span className="hidden shrink-0 text-xs text-muted-foreground xl:inline">{row.issueIdentifier}</span>
-              {row.state !== "active" && <StatusBadge status={row.state} />}
-            </li>
-          ))}
-        </ul>
-      )}
+      ) : <ChatConversationList rows={query.data} provider={provider} />}
     </section>
   );
 }
diff --git a/ui/src/pages/apps/chat/GitHubBotConfiguration.tsx b/ui/src/pages/apps/chat/GitHubBotConfiguration.tsx
index eaf1558d8c6..f5ba5d0db25 100644
--- a/ui/src/pages/apps/chat/GitHubBotConfiguration.tsx
+++ b/ui/src/pages/apps/chat/GitHubBotConfiguration.tsx
@@ -1,5 +1,5 @@
 import { copyTextToClipboard } from "@/lib/clipboard";
-import { useRef, useState } from "react";
+import { useId, useRef, useState } from "react";
 import { useQuery } from "@tanstack/react-query";
 import {
   GITHUB_REVIEW_EVENTS,
@@ -11,6 +11,13 @@ import { accessApi } from "@/api/access";
 import { chatEndpointsApi } from "@/api/chatEndpoints";
 import { githubChatApi } from "@/api/githubChat";
 import { Button } from "@/components/ui/button";
+import { Copy, MoreHorizontal } from "lucide-react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
 import { Label } from "@/components/ui/label";
@@ -32,22 +39,27 @@ export function GitHubToggle({
   description,
   checked,
   onChange,
+  ariaLabel,
+  disabled,
 }: {
   label: string;
   description?: string;
   checked: boolean;
   onChange: (checked: boolean) => void;
+  ariaLabel?: string;
+  disabled?: boolean;
 }) {
   return (
     <div className="flex items-center justify-between gap-4 py-2">
-      <div>
-        <p className="text-sm font-medium">{label}</p>
+      <div className="min-w-0">
+        <p className="break-words text-sm font-medium">{label}</p>
         {description && (
           <p className="mt-1 text-xs text-muted-foreground">{description}</p>
         )}
       </div>
       <ToggleSwitch
-        aria-label={label}
+        aria-label={ariaLabel ?? label}
+        disabled={disabled}
         checked={checked}
         onCheckedChange={onChange}
       />
@@ -61,20 +73,92 @@ export function GitHubPolicyEditor({
   policy: GitHubReviewPolicy;
   onChange: (policy: GitHubReviewPolicy) => void;
 }) {
-  const [prompt, setPrompt] =
-    useState<(typeof GITHUB_REVIEW_EVENTS)[number]>("opened");
+  const id = useId();
+  const [prompt, setPrompt] = useState<
+    (typeof GITHUB_REVIEW_EVENTS)[number] | "issue_opened"
+  >("opened");
   const set = <K extends keyof GitHubReviewPolicy>(
     key: K,
     value: GitHubReviewPolicy[K],
   ) => onChange({ ...policy, [key]: value });
   return (
-    <div className="space-y-6">
-      <div className="space-y-2">
-        <Label htmlFor="github-invocation">
-          When should this agent work?
+    <div className="space-y-8">
+      <section
+        className="space-y-3"
+        aria-labelledby={`${id}-github-instructions-heading`}
+      >
+        <h2
+          id={`${id}-github-instructions-heading`}
+          className="text-base font-semibold"
+        >
+          Instructions
+        </h2>
+        <Label htmlFor={`${id}-github-instructions`} className="sr-only">
+          Agent instructions
+        </Label>
+        <Textarea
+          id={`${id}-github-instructions`}
+          className="min-h-32"
+          value={policy.instructions}
+          placeholder="What should this agent do on GitHub?"
+          onChange={(e) => set("instructions", e.target.value)}
+        />
+        <details className="text-sm">
+          <summary className="cursor-pointer text-muted-foreground hover:text-foreground">
+            Event-specific instructions
+          </summary>
+          <div className="grid gap-3 pt-3">
+            <Label htmlFor={`${id}-github-prompt-event`} className="sr-only">
+              Event
+            </Label>
+            <select
+              id={`${id}-github-prompt-event`}
+              className={githubSelectClass}
+              value={prompt}
+              onChange={(e) => setPrompt(e.target.value as typeof prompt)}
+            >
+              {GITHUB_REVIEW_EVENTS.map((event) => (
+                <option key={event} value={event}>
+                  {eventLabels[event]}
+                </option>
+              ))}
+              <option value="issue_opened">New issue</option>
+            </select>
+            <Textarea
+              aria-label={`${prompt === "issue_opened" ? "New issue" : eventLabels[prompt]} instructions`}
+              className="min-h-32"
+              value={
+                prompt === "issue_opened"
+                  ? (policy.issueOpenedInstructions ?? "")
+                  : policy.prompts[prompt]
+              }
+              onChange={(e) =>
+                prompt === "issue_opened"
+                  ? set("issueOpenedInstructions", e.target.value)
+                  : set("prompts", {
+                      ...policy.prompts,
+                      [prompt]: e.target.value,
+                    })
+              }
+            />
+          </div>
+        </details>
+      </section>
+      <section
+        className="space-y-3"
+        aria-labelledby={`${id}-github-triggers-heading`}
+      >
+        <h2
+          id={`${id}-github-triggers-heading`}
+          className="text-base font-semibold"
+        >
+          When to run
+        </h2>
+        <Label htmlFor={`${id}-github-invocation`} className="sr-only">
+          When to run
         </Label>
         <select
-          id="github-invocation"
+          id={`${id}-github-invocation`}
           className={githubSelectClass}
           value={policy.invocation}
           onChange={(e) =>
@@ -84,270 +168,242 @@ export function GitHubPolicyEditor({
             )
           }
         >
+          <option value="mentions_only">Mentions only</option>
           <option value="linked_authors">
-            Linked members’ enabled events and authorized mentions
+            Automatic events from linked members
           </option>
-          <option value="mentions_only">Authorized mentions only</option>
           <option value="allowed_authors">
-            Allowed authors’ enabled events and authorized mentions
+            Automatic events from allowed authors
           </option>
         </select>
         <p className="text-xs text-muted-foreground">
-          Newly added people have a separate automatic-event setting in Access.
+          People allowed in Access can always mention the bot. Automatic events
+          also need to be enabled for each person.
         </p>
-      </div>
-      <div>
-        <h3 className="text-sm font-medium">Automatic events</h3>
-        {GITHUB_REVIEW_EVENTS.slice(0, 4).map((event) => (
-          <GitHubToggle
-            key={event}
-            label={eventLabels[event]}
-            checked={policy.events.includes(event)}
-            onChange={(enabled) =>
-              set(
-                "events",
-                enabled
-                  ? [...new Set([...policy.events, event])]
-                  : policy.events.filter((value) => value !== event),
-              )
-            }
-          />
-        ))}
-        <GitHubToggle
-          label="New GitHub issues"
-          description="Start a task for an authorized author's new issue. Uses the same repository and person restrictions."
-          checked={policy.issueOpened === true}
-          onChange={(enabled) => set("issueOpened", enabled)}
-        />
-        {policy.issueOpened && (
-          <div className="space-y-2">
-            <Label htmlFor="github-issue-opened-instructions">New issue instructions</Label>
-            <Textarea
-              id="github-issue-opened-instructions"
-              value={policy.issueOpenedInstructions ?? ""}
-              onChange={(event) => set("issueOpenedInstructions", event.target.value)}
+        {policy.invocation !== "mentions_only" && (
+          <div
+            className="grid gap-x-8 sm:grid-cols-2"
+            aria-label="Automatic events"
+          >
+            {GITHUB_REVIEW_EVENTS.slice(0, 4).map((event) => (
+              <GitHubToggle
+                key={event}
+                label={eventLabels[event]}
+                checked={policy.events.includes(event)}
+                onChange={(enabled) =>
+                  set(
+                    "events",
+                    enabled
+                      ? [...new Set([...policy.events, event])]
+                      : policy.events.filter((value) => value !== event),
+                  )
+                }
+              />
+            ))}
+            <GitHubToggle
+              label="New issues"
+              checked={policy.issueOpened === true}
+              onChange={(enabled) => set("issueOpened", enabled)}
             />
           </div>
         )}
-        <GitHubToggle
-          label="Include draft PRs"
-          checked={policy.reviewDrafts}
-          onChange={(value) => set("reviewDrafts", value)}
-        />
-        <GitHubToggle
-          label="Include bot authors"
-          description="Also allow the bot account in Access with a sponsor and automatic events enabled."
-          checked={policy.reviewBotAuthors}
-          onChange={(value) => set("reviewBotAuthors", value)}
-        />
-      </div>
-      <details className="rounded-lg border border-border p-4">
-        <summary className="cursor-pointer text-sm font-medium">
-          Author, branch, label, and file filters
-        </summary>
-        <div className="mt-4 grid gap-4 sm:grid-cols-2">
-          {(
-            [
-              [
-                "includeAuthors",
-                "Included authors",
-                "Leave empty to include any authorized author. One username or glob per line.",
-              ],
-              [
-                "excludeAuthors",
-                "Excluded authors",
-                "One username or glob per line.",
-              ],
-              [
-                "targetBranches",
-                "Target branches",
-                "Leave empty for all branches. Supports * and **.",
-              ],
-              [
-                "excludedBranches",
-                "Excluded target branches",
-                "Never automatically review these branches. Supports * and **.",
-              ],
-              [
-                "requiredLabels",
-                "Required labels",
-                "All listed labels must be present.",
-              ],
-              [
-                "excludedLabels",
-                "Excluded labels",
-                "Any listed label prevents automatic review.",
-              ],
-              [
-                "ignoredPaths",
-                "Ignored file paths",
-                "Excluded from manual and automatic analysis. Supports * and **.",
-              ],
-            ] as const
-          ).map(([key, label, help]) => (
-            <div className="space-y-2" key={key}>
-              <Label htmlFor={`github-${key}`}>{label}</Label>
-              <Textarea
-                id={`github-${key}`}
-                value={policy[key].join("\n")}
-                onChange={(e) =>
-                  set(key, e.target.value.split("\n").filter(Boolean))
-                }
-              />
-              <p className="text-xs text-muted-foreground">{help}</p>
-            </div>
-          ))}
-        </div>
-        <p className="mt-3 text-xs text-muted-foreground">
-          Authorized manual requests bypass automatic scheduling filters.
-          Repository restrictions and ignored files still apply.
-        </p>
-      </details>
-      <div className="space-y-2">
-        <Label htmlFor="github-instructions">Review instructions</Label>
-        <Textarea
-          id="github-instructions"
-          value={policy.instructions}
-          onChange={(e) => set("instructions", e.target.value)}
-        />
-        <p className="text-xs text-muted-foreground">
-          Additional guidance for the assigned agent. Provider content cannot
-          change its permissions.
-        </p>
-      </div>
-      <div className="space-y-2">
-        <Label htmlFor="github-prompt-event">Event prompts</Label>
-        <select
-          id="github-prompt-event"
-          className={githubSelectClass}
-          value={prompt}
-          onChange={(e) => setPrompt(e.target.value as typeof prompt)}
+      </section>
+      <section
+        className="space-y-3"
+        aria-labelledby={`${id}-github-results-heading`}
+      >
+        <h2
+          id={`${id}-github-results-heading`}
+          className="text-base font-semibold"
         >
-          {GITHUB_REVIEW_EVENTS.map((event) => (
-            <option key={event} value={event}>
-              {eventLabels[event]}
-            </option>
-          ))}
-        </select>
-        <Textarea
-          aria-label={`${eventLabels[prompt]} prompt`}
-          value={policy.prompts[prompt]}
-          onChange={(e) =>
-            set("prompts", { ...policy.prompts, [prompt]: e.target.value })
-          }
-        />
-        <p className="text-xs text-muted-foreground">
-          Paperclip supplies repository, PR, base and head commits, sender, and
-          prior head as typed context. Saved revisions remain attached to review
-          activity.
-        </p>
-      </div>
-      <div className="grid gap-4 sm:grid-cols-2">
-        <div className="space-y-2">
-          <Label htmlFor="github-categories">Finding categories</Label>
-          <Input
-            id="github-categories"
-            value={policy.findingCategories.join(", ")}
-            onChange={(e) =>
-              set(
-                "findingCategories",
-                e.target.value
-                  .split(",")
-                  .map((value) => value.trim())
-                  .filter(Boolean),
-              )
-            }
+          Review results
+        </h2>
+        <div className="grid gap-x-8 sm:grid-cols-2">
+          <GitHubToggle
+            label="Post a review summary"
+            checked={policy.publishSummary}
+            onChange={(value) => set("publishSummary", value)}
+          />
+          <GitHubToggle
+            label="Post inline findings"
+            checked={policy.publishInline}
+            onChange={(value) => set("publishInline", value)}
           />
-          <p className="text-xs text-muted-foreground">
-            Comma-separated assessment categories.
-          </p>
         </div>
         <div className="space-y-2">
-          <Label htmlFor="github-severity">
-            Minimum inline comment severity
-          </Label>
+          <Label htmlFor={`${id}-github-rating`}>Passing score</Label>
           <select
-            id="github-severity"
+            id={`${id}-github-rating`}
             className={githubSelectClass}
-            value={policy.minimumCommentSeverity}
+            value={policy.ratingThreshold ?? "report"}
             onChange={(e) =>
               set(
-                "minimumCommentSeverity",
-                e.target.value as GitHubReviewPolicy["minimumCommentSeverity"],
+                "ratingThreshold",
+                e.target.value === "report"
+                  ? null
+                  : (Number(e.target.value) as 1 | 2 | 3 | 4 | 5),
               )
             }
           >
-            <option value="info">Info</option>
-            <option value="warning">Warning</option>
-            <option value="error">Error</option>
+            {[5, 4, 3, 2, 1].map((score) => (
+              <option key={score} value={score}>
+                Pass at {score}/5 or higher
+              </option>
+            ))}
+            <option value="report">Report only</option>
           </select>
           <p className="text-xs text-muted-foreground">
-            Hidden comments still count in the assessment.
+            The Paperclip Review check applies to the exact reviewed commit. An
+            incomplete review cannot pass.
           </p>
+          <a
+            className="text-xs text-muted-foreground underline hover:text-foreground"
+            href="https://docs.github.com/en/repositories/configuring-branches-and-merges-in-your-repository/managing-rulesets/creating-rulesets-for-a-repository"
+            target="_blank"
+            rel="noreferrer"
+          >
+            Require this check before merging in GitHub
+          </a>
         </div>
-      </div>
-      <div>
-        <h3 className="text-sm font-medium">Publication permissions</h3>
-        <GitHubToggle
-          label="Publish summary"
-          checked={policy.publishSummary}
-          onChange={(value) => set("publishSummary", value)}
-        />
-        <GitHubToggle
-          label="Publish inline findings"
-          checked={policy.publishInline}
-          onChange={(value) => set("publishInline", value)}
-        />
-        <GitHubToggle
-          label="Allow formal approvals"
-          description="A separate agent action; a 5/5 score never automatically approves."
-          checked={policy.allowApprove}
-          onChange={(value) => set("allowApprove", value)}
-        />
-        <GitHubToggle
-          label="Allow formal request changes"
-          checked={policy.allowRequestChanges}
-          onChange={(value) => set("allowRequestChanges", value)}
-        />
-      </div>
-      <div className="space-y-2">
-        <Label htmlFor="github-rating">Paperclip Review check</Label>
-        <select
-          id="github-rating"
-          className={githubSelectClass}
-          value={policy.ratingThreshold ?? "report"}
-          onChange={(e) =>
-            set(
-              "ratingThreshold",
-              e.target.value === "report"
-                ? null
-                : (Number(e.target.value) as 1 | 2 | 3 | 4 | 5),
-            )
-          }
-        >
-          {[5, 4, 3, 2, 1].map((score) => (
-            <option key={score} value={score}>
-              Require at least {score}/5
-            </option>
-          ))}
-          <option value="report">Report only</option>
-        </select>
-        <p className="text-xs text-muted-foreground">
-          Paperclip computes the result for the exact reviewed commit.
-          Incomplete reviews cannot pass. To require it before merging, select
-          “Paperclip Review” in your GitHub branch protection or ruleset
-          settings and choose this bot’s GitHub App as the expected source. Run
-          a review first so the check appears in GitHub’s selector.
-        </p>
-        <a
-          className="text-xs underline"
-          href="https://docs.github.com/en/repositories/configuring-branches-and-merges-in-your-repository/managing-rulesets/creating-rulesets-for-a-repository"
-          target="_blank"
-          rel="noreferrer"
-        >
-          Set up a required check on GitHub
-        </a>
-      </div>
+      </section>
+      <details className="text-sm">
+        <summary className="cursor-pointer font-medium">
+          Advanced review settings
+        </summary>
+        <div className="space-y-6 pt-4">
+          <div>
+            <GitHubToggle
+              label="Include draft PRs"
+              checked={policy.reviewDrafts}
+              onChange={(value) => set("reviewDrafts", value)}
+            />
+            <GitHubToggle
+              label="Include bot authors"
+              description="The bot account also needs a sponsor and automatic events enabled in Access."
+              checked={policy.reviewBotAuthors}
+              onChange={(value) => set("reviewBotAuthors", value)}
+            />
+          </div>
+          <div className="space-y-3">
+            <h3 className="text-sm font-medium">Filters</h3>
+            <div className="grid gap-4 sm:grid-cols-2">
+              {(
+                [
+                  [
+                    "includeAuthors",
+                    "Included authors",
+                    "Empty includes every authorized author. One username or glob per line.",
+                  ],
+                  [
+                    "excludeAuthors",
+                    "Excluded authors",
+                    "One username or glob per line.",
+                  ],
+                  [
+                    "targetBranches",
+                    "Target branches",
+                    "Empty includes all branches. Supports * and **.",
+                  ],
+                  [
+                    "excludedBranches",
+                    "Excluded branches",
+                    "Supports * and **.",
+                  ],
+                  [
+                    "requiredLabels",
+                    "Required labels",
+                    "All listed labels must be present.",
+                  ],
+                  [
+                    "excludedLabels",
+                    "Excluded labels",
+                    "Any listed label prevents automatic review.",
+                  ],
+                  [
+                    "ignoredPaths",
+                    "Ignored files",
+                    "Excluded from manual and automatic analysis. Supports * and **.",
+                  ],
+                ] as const
+              ).map(([key, label, help]) => (
+                <div className="space-y-2" key={key}>
+                  <Label htmlFor={`${id}-github-${key}`}>{label}</Label>
+                  <Textarea
+                    id={`${id}-github-${key}`}
+                    value={policy[key].join("\n")}
+                    onChange={(e) =>
+                      set(key, e.target.value.split("\n").filter(Boolean))
+                    }
+                  />
+                  <p className="text-xs text-muted-foreground">{help}</p>
+                </div>
+              ))}
+            </div>
+            <p className="text-xs text-muted-foreground">
+              Manual requests bypass automatic scheduling filters. Repository
+              restrictions and ignored files still apply.
+            </p>
+          </div>
+          <div className="grid gap-4 sm:grid-cols-2">
+            <div className="space-y-2">
+              <Label htmlFor={`${id}-github-categories`}>
+                Finding categories
+              </Label>
+              <Input
+                id={`${id}-github-categories`}
+                value={policy.findingCategories.join(", ")}
+                onChange={(e) =>
+                  set(
+                    "findingCategories",
+                    e.target.value
+                      .split(",")
+                      .map((v) => v.trim())
+                      .filter(Boolean),
+                  )
+                }
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor={`${id}-github-severity`}>
+                Minimum inline severity
+              </Label>
+              <select
+                id={`${id}-github-severity`}
+                className={githubSelectClass}
+                value={policy.minimumCommentSeverity}
+                onChange={(e) =>
+                  set(
+                    "minimumCommentSeverity",
+                    e.target
+                      .value as GitHubReviewPolicy["minimumCommentSeverity"],
+                  )
+                }
+              >
+                <option value="info">Info</option>
+                <option value="warning">Warning</option>
+                <option value="error">Error</option>
+              </select>
+              <p className="text-xs text-muted-foreground">
+                Hidden findings still count in the assessment.
+              </p>
+            </div>
+          </div>
+          <div>
+            <h3 className="text-sm font-medium">Formal review actions</h3>
+            <GitHubToggle
+              label="Allow approvals"
+              description="The agent must choose this action. A 5/5 score does not approve a PR."
+              checked={policy.allowApprove}
+              onChange={(value) => set("allowApprove", value)}
+            />
+            <GitHubToggle
+              label="Allow request changes"
+              checked={policy.allowRequestChanges}
+              onChange={(value) => set("allowRequestChanges", value)}
+            />
+          </div>
+        </div>
+      </details>
     </div>
   );
 }
@@ -373,7 +429,7 @@ export function GitHubAccessEditor({
     queryKey: ["github-linked-members", endpointId],
     queryFn: () => chatEndpointsApi.listPrincipals(endpointId),
   });
-  const [kind, setKind] = useState<"member" | "guest" | null>(null);
+  const [kind, setKind] = useState<"guest" | null>(null);
   const [login, setLogin] = useState("");
   const [sponsor, setSponsor] = useState(configuration.responsibleUserId);
   const [candidate, setCandidate] = useState<{
@@ -400,33 +456,66 @@ export function GitHubAccessEditor({
     (member) =>
       member.status === "active" && member.membershipRole !== "viewer",
   );
+  const linkedAccounts = (links.data ?? []).filter(
+    (link) => link.status === "linked",
+  );
+  const unlistedAccounts = linkedAccounts.filter(
+    (link) =>
+      !configuration.people.some(
+        (person) => person.githubUserId === link.githubUserId,
+      ),
+  );
+  const responsible = activeMembers.find(
+    (member) => member.principalId === configuration.responsibleUserId,
+  );
+  const unlink = async (principalId: string) => {
+    setBusy(true);
+    setError("");
+    try {
+      await chatEndpointsApi.revokeLink(endpointId, principalId);
+      await links.refetch();
+    } catch (e) {
+      setError(
+        e instanceof Error ? e.message : "Could not unlink this account.",
+      );
+    } finally {
+      setBusy(false);
+    }
+  };
   return (
-    <div className="space-y-5">
-      <div className="space-y-2">
-        <Label htmlFor="github-responsible">
-          Responsible user for automatic events
-        </Label>
-        <select
-          id="github-responsible"
-          className={githubSelectClass}
-          value={configuration.responsibleUserId}
-          onChange={(e) =>
-            onChange({ ...configuration, responsibleUserId: e.target.value })
-          }
-        >
-          {activeMembers.map((member) => (
-            <option key={member.principalId} value={member.principalId}>
-              {member.user?.name ?? member.user?.email ?? member.principalId}
-            </option>
-          ))}
-        </select>
-        <p className="text-xs text-muted-foreground">
-          Accountable for automatic tasks. The PR author and webhook sender
-          remain recorded separately.
-        </p>
+    <section className="space-y-4">
+      <div className="flex flex-wrap items-center justify-between gap-3">
+        <h2 className="text-base font-semibold">People</h2>
+        <div className="flex items-center gap-2">
+          <Link
+            ref={accountLink}
+            to={`/apps/chat/connect?provider=github&resume=${endpointId}&stage=identity`}
+            className="text-sm text-muted-foreground underline underline-offset-4"
+          >
+            Link your account
+          </Link>
+          <Button
+            variant="ghost"
+            size="sm"
+            aria-label="Copy account linking URL"
+            onClick={() => {
+              if (accountLink.current)
+                void copyTextToClipboard(accountLink.current.href).then(
+                  () => setLinkCopied(true),
+                  () =>
+                    setError(
+                      "Could not copy the link. Open account linking and copy the address.",
+                    ),
+                );
+            }}
+          >
+            <Copy className="size-4" />
+            {linkCopied ? "Copied" : "Invite teammate"}
+          </Button>
+        </div>
       </div>
       <div className="space-y-2">
-        <Label htmlFor="github-member-access">Company member access</Label>
+        <Label htmlFor="github-member-access">Who can mention the bot</Label>
         <select
           id="github-member-access"
           className={githubSelectClass}
@@ -439,199 +528,179 @@ export function GitHubAccessEditor({
           }
         >
           <option value="all_linked">All linked company members</option>
-          <option value="selected">Only selected linked members</option>
+          <option value="selected">Selected members only</option>
         </select>
         <p className="text-xs text-muted-foreground">
-          Members connect their own GitHub account.{" "}
-          <Link
-            className="underline"
-            ref={accountLink}
-            to={`/apps/chat/connect?provider=github&resume=${endpointId}&stage=identity`}
-          >
-            Open account linking
-          </Link>
-          <Button
-            variant="link"
-            size="sm"
-            onClick={() => {
-              if (accountLink.current)
-                void copyTextToClipboard(accountLink.current.href).then(
-                  () => setLinkCopied(true),
-                  () =>
-                    setError(
-                      "Could not copy the link. Open account linking and copy the address.",
-                    ),
-                );
-            }}
-          >
-            {linkCopied ? "Link copied" : "Copy link for teammates"}
-          </Button>
-          .
+          Automatic events also require the person’s permission below and an
+          enabled event in Settings.
         </p>
       </div>
-      <div className="space-y-3">
-        <h3 className="text-sm font-medium">Linked GitHub accounts</h3>
-        {links.isError && (
-          <p role="alert" className="text-sm text-destructive">
-            Could not load linked accounts.
-          </p>
-        )}
-        {(links.data ?? [])
-          .filter((link) => link.status === "linked")
-          .map((link) => (
-            <div
-              key={link.principalId}
-              className="flex items-center justify-between gap-3 rounded-lg border border-border p-3"
-            >
-              <p className="text-sm">
+      <div className="divide-y divide-border border-y border-border">
+        {configuration.people.map((person) => {
+          const identity = linkedAccounts.find(
+            (link) => link.githubUserId === person.githubUserId,
+          );
+          const linked = person.kind === "guest" || Boolean(identity);
+          return (
+            <div key={person.githubUserId} className="space-y-3 py-4">
+              <div className="flex items-start justify-between gap-3">
+                <div className="min-w-0">
+                  <p className="truncate text-sm font-medium">
+                    @{person.login}
+                  </p>
+                  <p className="text-xs text-muted-foreground">
+                    {person.kind === "guest"
+                      ? `External contributor · sponsored by ${activeMembers.find((member) => member.principalId === person.sponsorUserId)?.user?.name ?? person.sponsorUserId}`
+                      : (identity?.paperclipUserLabel ?? "Company member")}
+                  </p>
+                  {!linked && (
+                    <p className="mt-1 text-xs text-destructive">
+                      Link this member’s GitHub account to enable access.
+                    </p>
+                  )}
+                </div>
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    <Button
+                      size="icon"
+                      variant="ghost"
+                      aria-label={`Manage @${person.login}`}
+                    >
+                      <MoreHorizontal className="size-4" />
+                    </Button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="end">
+                    <DropdownMenuItem
+                      onClick={() =>
+                        onChange({
+                          ...configuration,
+                          people: configuration.people.filter(
+                            (p) => p.githubUserId !== person.githubUserId,
+                          ),
+                        })
+                      }
+                    >
+                      {person.kind === "member" &&
+                      configuration.memberAccess === "all_linked"
+                        ? "Reset individual event settings"
+                        : "Remove access"}
+                    </DropdownMenuItem>
+                    {identity && (
+                      <DropdownMenuItem
+                        disabled={busy}
+                        onClick={() => void unlink(identity.principalId)}
+                      >
+                        Unlink GitHub account
+                      </DropdownMenuItem>
+                    )}
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </div>
+              <GitHubToggle
+                label="Automatic events"
+                ariaLabel={`Automatic events for @${person.login}`}
+                checked={person.automaticReviews}
+                onChange={(value) =>
+                  onChange({
+                    ...configuration,
+                    people: configuration.people.map((p) =>
+                      p.githubUserId === person.githubUserId
+                        ? { ...p, automaticReviews: value }
+                        : p,
+                    ),
+                  })
+                }
+              />
+              {person.kind === "guest" && (
+                <p className="text-xs text-muted-foreground">
+                  Restricted guest permissions; no company membership or
+                  personal credentials.
+                </p>
+              )}
+            </div>
+          );
+        })}
+        {unlistedAccounts.map((link) => (
+          <div
+            key={link.id}
+            className="flex items-center justify-between gap-3 py-4"
+          >
+            <div className="min-w-0">
+              <p className="truncate text-sm font-medium">
                 @{link.githubLogin ?? link.externalLabel}
               </p>
+              <p className="text-xs text-muted-foreground">
+                {link.paperclipUserLabel ?? "Linked member"} ·{" "}
+                {configuration.memberAccess === "all_linked"
+                  ? "Mentions allowed"
+                  : "Access not enabled"}
+              </p>
+            </div>
+            <div className="flex shrink-0 items-center gap-2">
               <Button
                 variant="outline"
                 size="sm"
-                disabled={busy}
-                onClick={async () => {
-                  setBusy(true);
-                  setError("");
-                  try {
-                    await chatEndpointsApi.revokeLink(
-                      endpointId,
-                      link.principalId,
-                    );
-                    await links.refetch();
-                  } catch (e) {
-                    setError(
-                      e instanceof Error
-                        ? e.message
-                        : "Could not unlink this account.",
-                    );
-                  } finally {
-                    setBusy(false);
-                  }
-                }}
+                disabled={!link.githubUserId || !link.paperclipUserId}
+                onClick={() =>
+                  onChange({
+                    ...configuration,
+                    people: [
+                      ...configuration.people,
+                      {
+                        kind: "member",
+                        userId: link.paperclipUserId!,
+                        githubUserId: link.githubUserId!,
+                        login: link.githubLogin ?? link.externalLabel,
+                        automaticReviews: false,
+                      },
+                    ],
+                  })
+                }
               >
-                Unlink account
+                {configuration.memberAccess === "all_linked"
+                  ? "Configure events"
+                  : "Allow"}
               </Button>
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button
+                    size="icon"
+                    variant="ghost"
+                    aria-label={`Manage @${link.githubLogin ?? link.externalLabel}`}
+                  >
+                    <MoreHorizontal className="size-4" />
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end">
+                  <DropdownMenuItem
+                    disabled={busy}
+                    onClick={() => void unlink(link.principalId)}
+                  >
+                    Unlink GitHub account
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
             </div>
-          ))}
+          </div>
+        ))}
+        {links.isPending && (
+          <p role="status" className="py-4 text-sm text-muted-foreground">
+            Loading linked accounts…
+          </p>
+        )}
         {!links.isPending &&
           !links.isError &&
-          !(links.data ?? []).some((link) => link.status === "linked") && (
-            <p className="text-sm text-muted-foreground">
-              No accounts linked yet. Each teammate confirms their own GitHub
+          configuration.people.length === 0 &&
+          unlistedAccounts.length === 0 && (
+            <p className="py-4 text-sm text-muted-foreground">
+              No accounts linked yet. Invite a teammate to confirm their GitHub
               identity.
             </p>
           )}
       </div>
-      <div className="divide-y divide-border rounded-lg border border-border">
-        {configuration.people.length === 0 && (
-          <p className="p-4 text-sm text-muted-foreground">
-            No individual access entries. Unlinked people cannot invoke this
-            bot.
-          </p>
-        )}
-        {configuration.people.map((person) => (
-          <div key={person.githubUserId} className="space-y-2 p-4">
-            <div className="flex items-center justify-between gap-3">
-              <div>
-                <p className="text-sm font-medium">@{person.login}</p>
-                <p className="text-xs text-muted-foreground">
-                  {person.kind === "member"
-                    ? "Linked company member"
-                    : "External contributor · restricted guest permissions"}
-                </p>
-              </div>
-              <Button
-                variant="ghost"
-                size="sm"
-                onClick={() =>
-                  onChange({
-                    ...configuration,
-                    people: configuration.people.filter(
-                      (p) => p.githubUserId !== person.githubUserId,
-                    ),
-                  })
-                }
-              >
-                Remove
-              </Button>
-            </div>
-            <GitHubToggle
-              label={`Automatic events for @${person.login}`}
-              checked={person.automaticReviews}
-              onChange={(value) =>
-                onChange({
-                  ...configuration,
-                  people: configuration.people.map((p) =>
-                    p.githubUserId === person.githubUserId
-                      ? { ...p, automaticReviews: value }
-                      : p,
-                  ),
-                })
-              }
-            />
-            {person.kind === "guest" && (
-              <p className="text-xs text-muted-foreground">
-                Sponsor:{" "}
-                {activeMembers.find(
-                  (member) => member.principalId === person.sponsorUserId,
-                )?.user?.name ?? person.sponsorUserId}
-                . No company membership or personal credentials are granted.
-              </p>
-            )}
-          </div>
-        ))}
-      </div>
-      <div className="flex flex-wrap gap-2">
-        <Button variant="outline" onClick={() => setKind("member")}>
-          Add linked member
-        </Button>
-        <Button variant="outline" onClick={() => setKind("guest")}>
-          Allow external contributor
-        </Button>
-      </div>
-      {kind === "member" && (
-        <div className="space-y-3 rounded-lg border border-border p-4">
-          <p className="text-sm">
-            Adding a member switches access to the selected-member list.
-            Automatic PR reviews start off.
-          </p>
-          {(links.data ?? [])
-            .filter((link) => link.status === "linked" && link.paperclipUserId)
-            .map((link) => (
-              <Button
-                className="mr-2"
-                key={link.id}
-                variant="outline"
-                disabled={configuration.people.some(
-                  (p) =>
-                    p.kind === "member" && p.userId === link.paperclipUserId,
-                )}
-                onClick={() => {
-                  const id = link.githubUserId;
-                  if (!id) {
-                    setError(
-                      "Refresh linked identities before adding this member.",
-                    );
-                    return;
-                  }
-                  add({
-                    kind: "member",
-                    userId: link.paperclipUserId!,
-                    githubUserId: id,
-                    login: link.githubLogin ?? link.externalLabel,
-                    automaticReviews: false,
-                  });
-                }}
-              >
-                {link.paperclipUserLabel ?? link.externalLabel}
-              </Button>
-            ))}
-          <Button variant="ghost" onClick={() => setKind(null)}>
-            Cancel
-          </Button>
-        </div>
-      )}
+      <Button variant="ghost" size="sm" onClick={() => setKind("guest")}>
+        Allow external contributor
+      </Button>
       {kind === "guest" && (
         <div className="space-y-4 rounded-lg border border-border p-4">
           <p className="text-sm">
@@ -718,12 +787,75 @@ export function GitHubAccessEditor({
           </div>
         </div>
       )}
-      {(error || members.error || links.error) && (
+      <details className="text-sm">
+        <summary className="cursor-pointer text-muted-foreground">
+          Automatic task ownership
+        </summary>
+        <div className="mt-4 space-y-2">
+          {activeMembers.length === 1 && responsible ? (
+            <p>
+              Responsible member:{" "}
+              {responsible.user?.name ??
+                responsible.user?.email ??
+                responsible.principalId}
+            </p>
+          ) : (
+            <>
+              <Label htmlFor="github-responsible">Responsible member</Label>
+              <select
+                id="github-responsible"
+                className={githubSelectClass}
+                value={configuration.responsibleUserId}
+                onChange={(e) =>
+                  onChange({
+                    ...configuration,
+                    responsibleUserId: e.target.value,
+                  })
+                }
+              >
+                {!responsible && (
+                  <option value={configuration.responsibleUserId}>
+                    {configuration.responsibleUserId || "Select a member"}
+                  </option>
+                )}
+                {activeMembers.map((member) => (
+                  <option key={member.principalId} value={member.principalId}>
+                    {member.user?.name ??
+                      member.user?.email ??
+                      member.principalId}
+                  </option>
+                ))}
+              </select>
+            </>
+          )}
+          <p className="text-xs text-muted-foreground">
+            Accountable for automatic tasks. GitHub authors remain recorded
+            separately.
+          </p>
+        </div>
+      </details>
+      {error && (
         <p role="alert" className="text-sm text-destructive">
-          {error ||
-            "Could not load members or linked accounts. Refresh to try again."}
+          {error}
         </p>
       )}
-    </div>
+      {(members.error || links.error) && (
+        <div className="flex flex-wrap items-center gap-2">
+          <p role="alert" className="text-sm text-destructive">
+            Could not load members or linked accounts.
+          </p>
+          <Button
+            variant="link"
+            size="sm"
+            onClick={() => {
+              void members.refetch();
+              void links.refetch();
+            }}
+          >
+            Try again
+          </Button>
+        </div>
+      )}
+    </section>
   );
 }
diff --git a/ui/src/pages/apps/chat/GitHubBotManagement.test.tsx b/ui/src/pages/apps/chat/GitHubBotManagement.test.tsx
new file mode 100644
index 00000000000..a5d161b67ec
--- /dev/null
+++ b/ui/src/pages/apps/chat/GitHubBotManagement.test.tsx
@@ -0,0 +1,418 @@
+// @vitest-environment jsdom
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import {
+  defaultGitHubReviewPolicy,
+  type GitHubChatConfiguration,
+  type GitHubTaskReview,
+} from "@paperclipai/shared";
+import { ChatEndpointDetail } from "./ChatEndpointDetail";
+import { GitHubReviewList, groupGitHubReviews } from "./GitHubBotManagement";
+import { GitHubPolicyEditor } from "./GitHubBotConfiguration";
+import { conversationDestination } from "./ChatConversationList";
+import { queryKeys } from "@/lib/queryKeys";
+import { TooltipProvider } from "@/components/ui/tooltip";
+
+const mocks = vi.hoisted(() => ({
+  tab: "settings",
+  get: vi.fn(),
+  config: vi.fn(),
+  save: vi.fn(),
+  resources: vi.fn(),
+  updateResources: vi.fn(),
+  reviews: vi.fn(),
+  members: vi.fn(),
+  links: vi.fn(),
+  setBreadcrumbs: vi.fn(),
+}));
+vi.mock("@/api/githubChat", () => ({
+  githubChatApi: {
+    configuration: mocks.config,
+    save: mocks.save,
+    reviews: mocks.reviews,
+  },
+}));
+vi.mock("@/api/chatEndpoints", () => ({
+  chatEndpointsApi: {
+    get: mocks.get,
+    listResources: mocks.resources,
+    updateResources: mocks.updateResources,
+    listPrincipals: mocks.links,
+  },
+}));
+vi.mock("@/api/access", () => ({ accessApi: { listMembers: mocks.members } }));
+vi.mock("@/api/agents", () => ({ agentsApi: { get: vi.fn() } }));
+vi.mock("@/context/BreadcrumbContext", () => ({
+  useBreadcrumbs: () => ({ setBreadcrumbs: mocks.setBreadcrumbs }),
+}));
+vi.mock("@/context/ToastContext", () => ({
+  useToast: () => ({ pushToast: vi.fn() }),
+}));
+vi.mock("@/components/MarkdownBody", () => ({
+  MarkdownBody: ({ children }: { children: React.ReactNode }) => (
+    <div>{children}</div>
+  ),
+}));
+vi.mock("@/lib/router", () => ({
+  useParams: () => ({ endpointId: "bot", tab: mocks.tab }),
+  useNavigate: () => vi.fn(),
+  Link: ({
+    children,
+    to,
+    ...props
+  }: React.ComponentProps<"a"> & { to: string }) => (
+    <a href={to} {...props}>
+      {children}
+    </a>
+  ),
+  Navigate: () => null,
+}));
+const endpoint = {
+  id: "bot",
+  companyId: "company",
+  provider: "github",
+  assignedAgentId: "agent",
+  assignedAgentName: "Maya",
+  status: "active",
+  allowUnlinkedPeople: false,
+  setup: { step: "complete" },
+};
+const base: GitHubChatConfiguration = {
+  version: 1,
+  toolsEnabled: true,
+  responsibleUserId: "member",
+  memberAccess: "selected",
+  people: [
+    {
+      kind: "member",
+      userId: "member",
+      githubUserId: "42",
+      login: "maya",
+      automaticReviews: true,
+    },
+  ],
+  defaults: {
+    ...defaultGitHubReviewPolicy(),
+    instructions: "Keep existing instructions",
+    issueOpened: true,
+  },
+  repositories: {},
+};
+
+describe("GitHub bot management", () => {
+  let root: Root;
+  let container: HTMLDivElement;
+  let client: QueryClient;
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mocks.tab = "settings";
+    mocks.get.mockResolvedValue(endpoint);
+    mocks.config.mockResolvedValue({
+      revision: 4,
+      configuration: structuredClone(base),
+    });
+    mocks.resources.mockResolvedValue([
+      {
+        id: "repo",
+        type: "repository",
+        label: "acme/web",
+        enabled: true,
+        availability: "available",
+        metadata: { providerRepositoryId: "100" },
+      },
+    ]);
+    mocks.links.mockResolvedValue([
+      {
+        id: "link",
+        principalId: "identity",
+        status: "linked",
+        githubUserId: "42",
+        githubLogin: "maya",
+        paperclipUserId: "member",
+        paperclipUserLabel: "Maya",
+      },
+    ]);
+    mocks.members.mockResolvedValue({
+      members: [
+        {
+          principalId: "member",
+          status: "active",
+          membershipRole: "owner",
+          user: { name: "Maya" },
+        },
+      ],
+    });
+    mocks.reviews.mockResolvedValue([]);
+    mocks.save.mockImplementation(async (_id, revision, configuration) => ({
+      revision: revision + 1,
+      configuration,
+    }));
+    mocks.updateResources.mockResolvedValue([]);
+    client = new QueryClient({
+      defaultOptions: { queries: { retry: false, staleTime: Infinity } },
+    });
+    client.setQueryData(queryKeys.agents.detail("agent"), {
+      id: "agent",
+      name: "Maya",
+    });
+    container = document.createElement("div");
+    document.body.append(container);
+    root = createRoot(container);
+  });
+  afterEach(async () => {
+    await act(async () => root.unmount());
+    client.clear();
+    container.remove();
+  });
+  async function render(tab = mocks.tab) {
+    mocks.tab = tab;
+    await act(async () =>
+      root.render(
+        <QueryClientProvider client={client}>
+          <TooltipProvider>
+            <ChatEndpointDetail />
+          </TooltipProvider>
+        </QueryClientProvider>,
+      ),
+    );
+    await vi.waitFor(() =>
+      expect(
+        container.querySelector(
+          'textarea[placeholder="What should this agent do on GitHub?"]',
+        ) || container.querySelector("#github-member-access"),
+      ).not.toBeNull(),
+    );
+  }
+  async function click(name: string) {
+    const target = [...container.querySelectorAll("button")].find(
+      (b) =>
+        b.getAttribute("aria-label") === name || b.textContent?.trim() === name,
+    );
+    expect(target).toBeDefined();
+    await act(async () => target!.click());
+  }
+  async function input(
+    element: HTMLTextAreaElement | HTMLSelectElement,
+    value: string,
+  ) {
+    await act(async () => {
+      Object.getOwnPropertyDescriptor(
+        element instanceof HTMLTextAreaElement
+          ? HTMLTextAreaElement.prototype
+          : HTMLSelectElement.prototype,
+        "value",
+      )!.set!.call(element, value);
+      element.dispatchEvent(
+        new Event(element instanceof HTMLSelectElement ? "change" : "input", {
+          bubbles: true,
+        }),
+      );
+    });
+  }
+  it("keeps one draft across Settings, Access, and read-only tabs, then saves with the original revision", async () => {
+    await render();
+    await input(container.querySelector("textarea")!, "Edited instructions");
+    await render("access");
+    await vi.waitFor(() => expect(container.textContent).toContain("@maya"));
+    await click("Automatic events for @maya");
+    await render("reviews");
+    await render("settings");
+    expect(container.querySelector("textarea")?.value).toBe(
+      "Edited instructions",
+    );
+    expect(mocks.save).not.toHaveBeenCalled();
+    await click("Save changes");
+    await vi.waitFor(() => expect(mocks.save).toHaveBeenCalledTimes(1));
+    const [id, revision, saved] = mocks.save.mock.calls[0];
+    expect(id).toBe("bot");
+    expect(revision).toBe(4);
+    expect(saved).toEqual({
+      ...base,
+      defaults: { ...base.defaults, instructions: "Edited instructions" },
+      people: [{ ...base.people[0], automaticReviews: false }],
+    });
+    await vi.waitFor(() =>
+      expect(container.textContent).toContain("Changes saved."),
+    );
+    expect(
+      [...container.querySelectorAll("button")].some(
+        (b) => b.textContent === "Save changes",
+      ),
+    ).toBe(false);
+  });
+  it("retains a rejected draft and lets the user discard it", async () => {
+    mocks.save.mockRejectedValue(
+      new Error("Configuration changed. Reload before saving."),
+    );
+    await render();
+    await input(container.querySelector("textarea")!, "Unsaved");
+    await click("Save changes");
+    await vi.waitFor(() =>
+      expect(container.querySelector('[role="alert"]')?.textContent).toContain(
+        "Configuration changed",
+      ),
+    );
+    expect(container.querySelector("textarea")?.value).toBe("Unsaved");
+    await click("Discard changes");
+    expect(container.querySelector("textarea")?.value).toBe(
+      base.defaults.instructions,
+    );
+    expect(container.querySelector('[role="alert"]')).toBeNull();
+  });
+  it("saves repository restrictions separately without touching the behavior draft", async () => {
+    await render();
+    await input(container.querySelector("textarea")!, "Unsaved behavior");
+    await render("access");
+    await click("acme/web");
+    await vi.waitFor(() =>
+      expect(mocks.updateResources).toHaveBeenCalledWith("bot", [
+        { id: "repo", enabled: false },
+      ]),
+    );
+    expect(mocks.save).not.toHaveBeenCalled();
+    await render("settings");
+    expect(container.querySelector("textarea")?.value).toBe("Unsaved behavior");
+  });
+  it("creates repository overrides without overwriting defaults or duplicating field IDs", async () => {
+    await render();
+    await input(
+      container.querySelector<HTMLSelectElement>("#github-policy-repository")!,
+      "100",
+    );
+    await click("Use custom settings for this repository");
+    const areas = [
+      ...container.querySelectorAll<HTMLTextAreaElement>(
+        'textarea[placeholder="What should this agent do on GitHub?"]',
+      ),
+    ];
+    expect(areas).toHaveLength(2);
+    await input(areas[1], "Repository guidance");
+    const ids = [...container.querySelectorAll("[id]")].map((e) => e.id);
+    expect(new Set(ids).size).toBe(ids.length);
+    await click("Save changes");
+    await vi.waitFor(() => expect(mocks.save).toHaveBeenCalled());
+    const saved = mocks.save.mock.calls[0][2];
+    expect(saved.defaults).toEqual(base.defaults);
+    expect(saved.repositories["100"].instructions).toBe("Repository guidance");
+  });
+  it("configures implicit linked-member events without switching to a narrower selected-member list", async () => {
+    mocks.config.mockResolvedValue({
+      revision: 4,
+      configuration: { ...base, memberAccess: "all_linked", people: [] },
+    });
+    await render("access");
+    await vi.waitFor(() =>
+      expect(container.textContent).toContain("Configure events"),
+    );
+    await click("Configure events");
+    await click("Save changes");
+    await vi.waitFor(() => expect(mocks.save).toHaveBeenCalled());
+    expect(mocks.save.mock.calls[0][2].memberAccess).toBe("all_linked");
+    expect(mocks.save.mock.calls[0][2].people[0].automaticReviews).toBe(false);
+  });
+  it("keeps saved automatic triggers when changing to mentions-only", async () => {
+    const change = vi.fn();
+    await act(async () =>
+      root.render(
+        <GitHubPolicyEditor policy={base.defaults} onChange={change} />,
+      ),
+    );
+    await input(
+      container.querySelector<HTMLSelectElement>(
+        'select[id$="github-invocation"]',
+      )!,
+      "mentions_only",
+    );
+    expect(change.mock.calls[0][0]).toEqual({
+      ...base.defaults,
+      invocation: "mentions_only",
+    });
+  });
+});
+
+function review(
+  id: string,
+  repositoryId: string,
+  pullNumber: number,
+  createdAt: string,
+  updatedAt = createdAt,
+) {
+  return {
+    id,
+    repositoryId,
+    pullNumber,
+    createdAt,
+    updatedAt,
+    repository: "acme/web",
+    headSha: id,
+    issueId: "task",
+    event: { title: "Review focus handling" },
+    state: "queued",
+    assessment: null,
+    conclusion: null,
+  } as GitHubTaskReview;
+}
+describe("review history and thread labels", () => {
+  it("groups by repository and PR and orders by creation, not late updates to an older head", () => {
+    const old = review(
+      "old",
+      "repo",
+      1,
+      "2026-10-07T10:00:00Z",
+      "2026-10-07T14:00:00Z",
+    );
+    const current = review("current", "repo", 1, "2026-10-07T11:00:00Z");
+    const other = review("other", "another-repo", 1, "2026-10-07T12:00:00Z");
+    expect(groupGitHubReviews([old, current, other])).toEqual([
+      [other],
+      [current, old],
+    ]);
+  });
+  it("does not present a previous passing score as the pending current commit’s result", async () => {
+    const old = review("old", "repo", 1, "2026-10-07T10:00:00Z");
+    old.state = "completed";
+    old.conclusion = "success";
+    old.assessment = {
+      reviewedCommit: "old",
+      score: 5,
+      complete: true,
+      summary: "Previous result",
+      rationale: "Complete",
+      findings: [],
+      coverage: { reviewedPaths: [], omittedPaths: [], limitations: [] },
+    };
+    const current = review("current", "repo", 1, "2026-10-07T11:00:00Z");
+    const container = document.createElement("div");
+    const root = createRoot(container);
+    try {
+      await act(async () =>
+        root.render(<GitHubReviewList reviews={[old, current]} />),
+      );
+      const article = container.querySelector("article")!;
+      const latest = article.cloneNode(true) as HTMLElement;
+      latest.querySelectorAll("details").forEach((details) => details.remove());
+      expect(latest.textContent).not.toContain("5/5");
+      expect(latest.textContent).toContain("Queued");
+      const history = [...article.querySelectorAll("details")].find((e) =>
+        e.querySelector("summary")?.textContent?.includes("earlier review"),
+      );
+      expect(history?.textContent).toContain("5/5 · Passed");
+      expect(history?.open).toBe(false);
+    } finally {
+      await act(async () => root.unmount());
+    }
+  });
+  it("identifies GitHub thread numbers while preserving labels for other providers and invalid URLs", () => {
+    const row = {
+      externalLabel: "acme/web",
+      externalUrl: "https://github.com/acme/web/issues/42#issuecomment-1",
+    } as any;
+    expect(conversationDestination(row, "github")).toBe("acme/web #42");
+    expect(conversationDestination(row, "slack")).toBe("acme/web");
+    expect(
+      conversationDestination({ ...row, externalUrl: "invalid" }, "github"),
+    ).toBe("acme/web");
+  });
+});
diff --git a/ui/src/pages/apps/chat/GitHubBotManagement.tsx b/ui/src/pages/apps/chat/GitHubBotManagement.tsx
index eeaf005edca..ca46ea29c72 100644
--- a/ui/src/pages/apps/chat/GitHubBotManagement.tsx
+++ b/ui/src/pages/apps/chat/GitHubBotManagement.tsx
@@ -1,13 +1,33 @@
 import { useState } from "react";
-import { useQuery } from "@tanstack/react-query";
-import { ExternalLink, RefreshCw } from "lucide-react";
-import type { GitHubChatConfiguration } from "@paperclipai/shared";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+  ExternalLink,
+  GitPullRequest,
+  MoreHorizontal,
+  RefreshCw,
+} from "lucide-react";
+import type {
+  GitHubChatConfiguration,
+  GitHubTaskReview,
+} from "@paperclipai/shared";
 import {
   githubChatApi,
   type GitHubConfigurationRecord,
 } from "@/api/githubChat";
-import { chatEndpointsApi, type ChatEndpoint } from "@/api/chatEndpoints";
+import {
+  chatEndpointsApi,
+  type ChatEndpoint,
+  type ChatEndpointResource,
+} from "@/api/chatEndpoints";
 import { Button } from "@/components/ui/button";
+import { EmptyState } from "@/components/EmptyState";
+import { MarkdownBody } from "@/components/MarkdownBody";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 import { Link } from "@/lib/router";
 import { formatDateTime } from "@/lib/utils";
 import {
@@ -17,6 +37,81 @@ import {
   githubSelectClass,
 } from "./GitHubBotConfiguration";
 
+export function GitHubRepositoryAccess({
+  resources,
+  managementUrl,
+  pending,
+  onRefresh,
+  onChange,
+}: {
+  resources: ChatEndpointResource[];
+  managementUrl: string;
+  pending: boolean;
+  onRefresh: () => void;
+  onChange: (id: string, enabled: boolean) => void;
+}) {
+  return (
+    <section className="space-y-3">
+      <div className="flex items-center justify-between gap-3">
+        <h2 className="text-base font-semibold">Repositories</h2>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              variant="ghost"
+              size="icon"
+              aria-label="Manage repositories"
+            >
+              <MoreHorizontal className="size-4" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuItem asChild>
+              <a href={managementUrl} target="_blank" rel="noreferrer">
+                Manage on GitHub
+                <ExternalLink className="size-4" />
+              </a>
+            </DropdownMenuItem>
+            <DropdownMenuItem disabled={pending} onClick={onRefresh}>
+              <RefreshCw className="size-4" />
+              Refresh repositories
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+      <p className="text-xs text-muted-foreground">
+        Choose where the bot can receive messages and use tools. Repository
+        changes save immediately.
+      </p>
+      <div className="divide-y divide-border border-y border-border">
+        {resources.map((resource) => (
+          <div key={resource.id} className="py-3">
+            <GitHubToggle
+              label={resource.label ?? resource.providerResourceId}
+              checked={resource.enabled}
+              disabled={
+                pending ||
+                (resource.availability !== "available" && !resource.enabled)
+              }
+              description={
+                resource.availability === "available"
+                  ? undefined
+                  : "Unavailable on GitHub. Update the App’s installation access, then refresh."
+              }
+              onChange={(enabled) => onChange(resource.id, enabled)}
+            />
+          </div>
+        ))}
+        {resources.length === 0 && (
+          <p className="py-4 text-sm text-muted-foreground">
+            No repositories available. Add repository access on GitHub, then
+            refresh.
+          </p>
+        )}
+      </div>
+    </section>
+  );
+}
+
 export function GitHubBotManagement({
   endpoint,
   view,
@@ -24,6 +119,7 @@ export function GitHubBotManagement({
   endpoint: ChatEndpoint;
   view: "settings" | "access";
 }) {
+  const client = useQueryClient();
   const query = useQuery({
     queryKey: ["github-bot-configuration", endpoint.id],
     queryFn: () => githubChatApi.configuration(endpoint.id),
@@ -38,6 +134,11 @@ export function GitHubBotManagement({
   const [notice, setNotice] = useState("");
   const [error, setError] = useState("");
   const record = draft ?? query.data;
+  const dirty = Boolean(
+    draft &&
+      JSON.stringify(draft.configuration) !==
+        JSON.stringify(query.data?.configuration),
+  );
   const edit = (configuration: GitHubChatConfiguration) => {
     if (record) setDraft({ ...record, configuration });
     setNotice("");
@@ -68,179 +169,149 @@ export function GitHubBotManagement({
         </Button>
       </p>
     );
-  if (!record)
+  if (!record || resources.isPending)
     return (
-      <p className="text-sm text-muted-foreground">Loading configuration…</p>
+      <p role="status" className="text-sm text-muted-foreground">
+        Loading configuration…
+      </p>
     );
   const config = record.configuration;
+  const repositories = (resources.data ?? []).filter(
+    (resource) => resource.type === "repository",
+  );
   const override = repository ? config.repositories[repository] : undefined;
   return (
-    <section className="max-w-3xl space-y-6">
-      <div className="space-y-2">
-        <h2 className="text-lg font-semibold">
-          {view === "access"
-            ? "Who can start work"
-            : "Agent and review behavior"}
-        </h2>
-        <p className="text-sm text-muted-foreground">
-          {endpoint.assignedAgentName} is permanently assigned to this bot.
-          GitHub messages create or continue Paperclip tasks; reviews are
-          results of those runs.
-        </p>
-        <Link
-          className="text-sm underline"
-          to={`/apps/${endpoint.connectionId}`}
-        >
-          Bot’s GitHub tool connection
-        </Link>
-      </div>
-      {view === "access" ? (
-        <GitHubAccessEditor
-          endpointId={endpoint.id}
-          companyId={endpoint.companyId}
-          configuration={config}
-          onChange={edit}
-        />
-      ) : (
-        <>
-          <GitHubToggle
-            label="Agent can use this bot’s GitHub tools"
-            description="Uses the same GitHub App, limited to this bot’s enabled repositories and bound tasks. Tool policies still apply."
-            checked={config.toolsEnabled}
-            onChange={(toolsEnabled) => edit({ ...config, toolsEnabled })}
-          />
-          <div className="space-y-3">
-            <div className="flex flex-wrap items-center justify-between gap-3">
-              <h3 className="text-sm font-medium">Repository access</h3>
-              <div className="flex gap-2">
-                <Button
-                  variant="outline"
-                  size="sm"
-                  disabled={pending}
-                  onClick={() =>
-                    void act(async () => {
-                      await githubChatApi.refreshRepositories(endpoint.id);
-                      await resources.refetch();
-                      setNotice(
-                        "Repository access refreshed. New repositories stay disabled.",
-                      );
-                    })
-                  }
-                >
-                  <RefreshCw className="size-4" />
-                  Refresh
-                </Button>
-                <Button variant="outline" size="sm" asChild>
-                  <a
-                    href={
-                      endpoint.setup?.github?.managementUrl ??
-                      endpoint.setup?.github?.installationUrl ??
-                      "https://github.com/settings/installations"
-                    }
-                    target="_blank"
-                    rel="noreferrer"
-                  >
-                    Configure on GitHub
-                    <ExternalLink className="size-4" />
-                  </a>
-                </Button>
-              </div>
-            </div>
-            <p className="text-xs text-muted-foreground">
-              These repositories come from the bot App’s installation. Choose
-              where this bot can receive messages and use tools in Paperclip.
-            </p>
-            {resources.data
-              ?.filter((r) => r.type === "repository")
-              .map((resource) => (
-                <GitHubToggle
-                  key={resource.id}
-                  label={resource.label ?? resource.providerResourceId}
-                  description={
-                    resource.availability === "available"
-                      ? undefined
-                      : "Installation access is unavailable. Update access on GitHub and refresh."
-                  }
-                  checked={resource.enabled}
-                  onChange={(enabled) =>
-                    void act(async () => {
-                      await chatEndpointsApi.updateResources(endpoint.id, [
-                        { id: resource.id, enabled },
-                      ]);
-                      await resources.refetch();
-                    })
-                  }
-                />
-              ))}
-          </div>
-          <div className="space-y-2">
-            <label
-              htmlFor="github-policy-repository"
-              className="text-sm font-medium"
-            >
-              Review configuration
-            </label>
-            <select
-              id="github-policy-repository"
-              className={githubSelectClass}
-              value={repository}
-              onChange={(e) => setRepository(e.target.value)}
-            >
-              <option value="">Connection defaults</option>
-              {resources.data
-                ?.filter(
-                  (r) =>
-                    r.type === "repository" &&
-                    r.enabled &&
-                    r.metadata?.providerRepositoryId,
-                )
-                .map((r) => (
-                  <option
-                    key={r.id}
-                    value={String(r.metadata?.providerRepositoryId)}
-                  >
-                    {r.label ?? r.providerResourceId}
-                  </option>
-                ))}
-            </select>
-          </div>
-          {repository && (
-            <GitHubToggle
-              label="Override connection defaults"
-              description="This repository can have its own prompts, filters, and publication permissions."
-              checked={!!override}
-              onChange={(enabled) => {
-                const repositories = { ...config.repositories };
-                if (enabled) repositories[repository] = { ...config.defaults };
-                else delete repositories[repository];
-                edit({ ...config, repositories });
-              }}
+    <section className="max-w-3xl space-y-8">
+      <fieldset disabled={pending} className="min-w-0 space-y-8">
+        {view === "access" ? (
+          <>
+            <GitHubRepositoryAccess
+              resources={repositories}
+              pending={pending}
+              managementUrl={
+                endpoint.setup?.github?.managementUrl ??
+                endpoint.setup?.github?.installationUrl ??
+                "https://github.com/settings/installations"
+              }
+              onRefresh={() =>
+                void act(async () => {
+                  await githubChatApi.refreshRepositories(endpoint.id);
+                  await resources.refetch();
+                  setNotice(
+                    "Repository access refreshed. New repositories stay disabled.",
+                  );
+                })
+              }
+              onChange={(id, enabled) =>
+                void act(async () => {
+                  await chatEndpointsApi.updateResources(endpoint.id, [
+                    { id, enabled },
+                  ]);
+                  await resources.refetch();
+                })
+              }
             />
-          )}
-          {!repository || override ? (
+            <GitHubAccessEditor
+              endpointId={endpoint.id}
+              companyId={endpoint.companyId}
+              configuration={config}
+              onChange={edit}
+            />
+            <section className="space-y-3">
+              <h2 className="text-base font-semibold">Agent tools</h2>
+              <GitHubToggle
+                label="Use this bot’s GitHub tools"
+                description="Limited to enabled repositories and this bot’s tasks. Tool policies still apply."
+                checked={config.toolsEnabled}
+                onChange={(toolsEnabled) => edit({ ...config, toolsEnabled })}
+              />
+              {endpoint.connectionId && (
+                <Link
+                  className="text-xs text-muted-foreground underline underline-offset-4"
+                  to={`/apps/${endpoint.connectionId}`}
+                >
+                  Manage tool permissions
+                </Link>
+              )}
+            </section>
+          </>
+        ) : (
+          <>
             <GitHubPolicyEditor
-              policy={{ ...config.defaults, ...override }}
-              onChange={(policy) =>
-                edit(
-                  repository
-                    ? {
+              policy={config.defaults}
+              onChange={(defaults) => edit({ ...config, defaults })}
+            />
+            <details className="text-sm">
+              <summary className="cursor-pointer text-muted-foreground">
+                Repository overrides
+                {Object.keys(config.repositories).length > 0
+                  ? ` (${Object.keys(config.repositories).length})`
+                  : ""}
+              </summary>
+              <div className="mt-4 space-y-5">
+                <label
+                  htmlFor="github-policy-repository"
+                  className="block text-sm font-medium"
+                >
+                  Repository
+                </label>
+                <select
+                  id="github-policy-repository"
+                  className={githubSelectClass}
+                  value={repository}
+                  onChange={(e) => setRepository(e.target.value)}
+                >
+                  <option value="">Choose a repository</option>
+                  {repositories
+                    .filter(
+                      (r) => r.enabled && r.metadata?.providerRepositoryId,
+                    )
+                    .map((r) => (
+                      <option
+                        key={r.id}
+                        value={String(r.metadata?.providerRepositoryId)}
+                      >
+                        {r.label ?? r.providerResourceId}
+                      </option>
+                    ))}
+                </select>
+                {repository && (
+                  <GitHubToggle
+                    label="Use custom settings for this repository"
+                    checked={!!override}
+                    onChange={(enabled) => {
+                      const overrides = { ...config.repositories };
+                      if (enabled)
+                        overrides[repository] = { ...config.defaults };
+                      else delete overrides[repository];
+                      edit({ ...config, repositories: overrides });
+                    }}
+                  />
+                )}
+                {repository && override && (
+                  <GitHubPolicyEditor
+                    policy={{ ...config.defaults, ...override }}
+                    onChange={(policy) =>
+                      edit({
                         ...config,
                         repositories: {
                           ...config.repositories,
                           [repository]: policy,
                         },
-                      }
-                    : { ...config, defaults: policy },
-                )
-              }
-            />
-          ) : (
-            <p className="text-sm text-muted-foreground">
-              This repository follows the connection defaults.
-            </p>
-          )}
-        </>
-      )}
+                      })
+                    }
+                  />
+                )}
+                {repository && !override && (
+                  <p className="text-xs text-muted-foreground">
+                    Uses the settings above.
+                  </p>
+                )}
+              </div>
+            </details>
+          </>
+        )}
+      </fieldset>
       {error && (
         <p role="alert" className="text-sm text-destructive">
           {error}
@@ -251,40 +322,198 @@ export function GitHubBotManagement({
           {notice}
         </p>
       )}
-      <div className="flex items-center justify-between gap-3 border-t border-border pt-4">
-        <Button
-          variant="ghost"
-          disabled={!draft || pending}
-          onClick={() => {
-            setDraft(null);
-            setError("");
-          }}
-        >
-          Discard changes
-        </Button>
-        <Button
-          disabled={!draft || pending}
-          onClick={() =>
-            void act(async () => {
-              const saved = await githubChatApi.save(
-                endpoint.id,
-                record.revision,
-                config,
-              );
-              setDraft(saved);
-              await query.refetch();
+      {dirty && (
+        <div className="sticky bottom-(--tc-composer-bottom) z-10 flex items-center justify-between gap-3 border-t border-border bg-background py-4 md:bottom-0">
+          <Button
+            variant="ghost"
+            disabled={pending}
+            onClick={() => {
               setDraft(null);
-              setNotice("Configuration saved.");
-            })
-          }
-        >
-          {pending ? "Saving…" : "Save changes"}
-        </Button>
-      </div>
+              setError("");
+            }}
+          >
+            Discard changes
+          </Button>
+          <Button
+            disabled={pending}
+            onClick={() =>
+              void act(async () => {
+                const saved = await githubChatApi.save(
+                  endpoint.id,
+                  record.revision,
+                  config,
+                );
+                client.setQueryData(
+                  ["github-bot-configuration", endpoint.id],
+                  saved,
+                );
+                setDraft(null);
+                setNotice("Changes saved.");
+              })
+            }
+          >
+            {pending ? "Saving…" : "Save changes"}
+          </Button>
+        </div>
+      )}
     </section>
   );
 }
 
+export function groupGitHubReviews(reviews: GitHubTaskReview[]) {
+  const groups = new Map<string, GitHubTaskReview[]>();
+  for (const review of [...reviews].sort(
+    (a, b) => Date.parse(b.createdAt) - Date.parse(a.createdAt),
+  )) {
+    const key = `${review.repositoryId}:${review.pullNumber}`;
+    groups.set(key, [...(groups.get(key) ?? []), review]);
+  }
+  return [...groups.values()];
+}
+
+function ReviewResult({ review }: { review: GitHubTaskReview }) {
+  const completed = review.state === "completed" && review.assessment?.complete;
+  const conclusion = review.conclusion
+    ? {
+        success: "Passed",
+        failure: "Below threshold",
+        neutral: "Report only",
+        action_required: "Action required",
+      }[review.conclusion]
+    : "Awaiting check";
+  const state = {
+    queued: "Queued",
+    running: "Reviewing",
+    completed: "Incomplete",
+    incomplete: "Incomplete",
+    error: "Review failed",
+    superseded: "Superseded",
+    manual_required: "Action required",
+  }[review.state];
+  return (
+    <div className="space-y-4">
+      <div className="flex flex-wrap items-baseline justify-between gap-3">
+        <span className="text-sm font-medium">
+          {completed ? `${review.assessment!.score}/5 · ${conclusion}` : state}
+        </span>
+        <span className="text-xs text-muted-foreground">
+          Commit <code>{review.headSha.slice(0, 7)}</code> ·{" "}
+          {formatDateTime(review.updatedAt)}
+        </span>
+      </div>
+      <MarkdownBody className="text-sm">
+        {review.assessment?.summary ?? review.event.title}
+      </MarkdownBody>
+      <div className="flex flex-wrap items-center gap-4 text-xs text-muted-foreground">
+        <Link
+          className="underline underline-offset-4"
+          to={`/issues/${review.issueId}`}
+        >
+          Paperclip task
+        </Link>
+        {review.summaryUrl && (
+          <a
+            className="underline underline-offset-4"
+            href={review.summaryUrl}
+            target="_blank"
+            rel="noreferrer"
+          >
+            GitHub comment
+          </a>
+        )}
+        {review.checkUrl && (
+          <a
+            className="underline underline-offset-4"
+            href={review.checkUrl}
+            target="_blank"
+            rel="noreferrer"
+          >
+            Check
+          </a>
+        )}
+      </div>
+      <details className="text-sm">
+        <summary className="cursor-pointer text-muted-foreground">
+          Review details
+        </summary>
+        <div className="mt-3 space-y-2">
+          {review.runId && (
+            <Link
+              className="text-xs underline underline-offset-4"
+              to={`/issues/${review.issueId}?runId=${review.runId}`}
+            >
+              Agent run
+            </Link>
+          )}
+          {review.assessment && (
+            <>
+              <MarkdownBody>{review.assessment.rationale}</MarkdownBody>
+              <p className="text-xs text-muted-foreground">
+                {review.assessment.coverage.reviewedPaths.length} files reviewed
+                · {review.assessment.coverage.omittedPaths.length} omitted
+              </p>
+              {review.assessment.coverage.limitations.map((limit, index) => (
+                <p key={index} className="text-xs text-muted-foreground">
+                  {limit}
+                </p>
+              ))}
+            </>
+          )}
+        </div>
+      </details>
+    </div>
+  );
+}
+
+export function GitHubReviewList({ reviews }: { reviews: GitHubTaskReview[] }) {
+  if (!reviews.length)
+    return (
+      <EmptyState
+        icon={GitPullRequest}
+        message="No reviews yet"
+        description="Mention the bot on a pull request, or enable automatic events in Settings."
+      />
+    );
+  return (
+    <div className="divide-y divide-border border-y border-border">
+      {groupGitHubReviews(reviews).map(([latest, ...history]) => (
+        <article
+          key={`${latest.repositoryId}:${latest.pullNumber}`}
+          className="space-y-4 py-5"
+        >
+          <div className="space-y-1">
+            <a
+              className="text-sm font-semibold hover:underline"
+              href={`https://github.com/${latest.repository}/pull/${latest.pullNumber}`}
+              target="_blank"
+              rel="noreferrer"
+            >
+              {latest.event.title || `Pull request #${latest.pullNumber}`}
+            </a>
+            <p className="break-all text-xs text-muted-foreground">
+              {latest.repository} #{latest.pullNumber}
+            </p>
+          </div>
+          <ReviewResult review={latest} />
+          {history.length > 0 && (
+            <details className="text-sm">
+              <summary className="cursor-pointer text-muted-foreground">
+                {history.length} earlier{" "}
+                {history.length === 1 ? "review" : "reviews"}
+              </summary>
+              <div className="mt-4 space-y-6 border-l border-border pl-4">
+                {history.map((review) => (
+                  <ReviewResult key={review.id} review={review} />
+                ))}
+              </div>
+            </details>
+          )}
+        </article>
+      ))}
+    </div>
+  );
+}
+
 export function GitHubReviews({ endpointId }: { endpointId: string }) {
   const query = useQuery({
     queryKey: ["github-bot-reviews", endpointId],
@@ -293,109 +522,23 @@ export function GitHubReviews({ endpointId }: { endpointId: string }) {
   });
   return (
     <section className="space-y-4">
-      <div>
-        <h2 className="text-lg font-semibold">Reviews</h2>
-        <p className="mt-1 text-sm text-muted-foreground">
-          Review activity from the agent’s Paperclip tasks. Open a task for the
-          conversation and execution history.
-        </p>
-      </div>
-      {query.isError && (
+      <p className="text-sm text-muted-foreground">
+        Latest review for each pull request. Results apply to the commit shown.
+      </p>
+      {query.isError ? (
         <p role="alert" className="text-sm text-destructive">
           Reviews could not be loaded.{" "}
           <Button variant="link" onClick={() => void query.refetch()}>
             Try again
           </Button>
         </p>
-      )}
-      {query.isLoading && (
-        <p className="text-sm text-muted-foreground">Loading reviews…</p>
-      )}
-      {query.data?.length === 0 && (
-        <p className="text-sm text-muted-foreground">
-          No reviews yet. Mention the bot on an enabled repository’s PR, or
-          enable automatic review events in Settings.
+      ) : query.isPending ? (
+        <p role="status" className="text-sm text-muted-foreground">
+          Loading reviews…
         </p>
+      ) : (
+        <GitHubReviewList reviews={query.data} />
       )}
-      {query.data?.map((review) => (
-        <article
-          key={review.id}
-          className="space-y-3 rounded-lg border border-border p-4"
-        >
-          <div className="flex flex-wrap items-center justify-between gap-3">
-            <a
-              className="text-sm font-medium underline"
-              href={`https://github.com/${review.repository}/pull/${review.pullNumber}`}
-              target="_blank"
-              rel="noreferrer"
-            >
-              {review.repository} #{review.pullNumber}
-            </a>
-            <span className="text-sm">
-              {review.assessment?.complete
-                ? `${review.assessment.score}/5`
-                : review.state.replaceAll("_", " ")}{" "}
-              ·{" "}
-              {review.conclusion?.replaceAll("_", " ") ?? "Awaiting assessment"}
-            </span>
-          </div>
-          <p className="text-sm">
-            {review.assessment?.summary ?? review.event.title}
-          </p>
-          <div className="flex flex-wrap items-center gap-4 text-xs text-muted-foreground">
-            <code>{review.headSha.slice(0, 12)}</code>
-            <span>{formatDateTime(review.updatedAt)}</span>
-            <Link className="underline" to={`/issues/${review.issueId}`}>
-              Paperclip task
-            </Link>
-            {review.runId && (
-              <Link
-                className="underline"
-                to={`/issues/${review.issueId}?runId=${review.runId}`}
-              >
-                Run
-              </Link>
-            )}
-            {review.summaryUrl && (
-              <a
-                className="underline"
-                href={review.summaryUrl}
-                target="_blank"
-                rel="noreferrer"
-              >
-                Summary
-              </a>
-            )}
-            {review.checkUrl && (
-              <a
-                className="underline"
-                href={review.checkUrl}
-                target="_blank"
-                rel="noreferrer"
-              >
-                Check
-              </a>
-            )}
-          </div>
-          {review.assessment && (
-            <details className="text-sm">
-              <summary className="cursor-pointer">
-                Rationale and coverage
-              </summary>
-              <p className="mt-2">{review.assessment.rationale}</p>
-              <p className="mt-2 text-muted-foreground">
-                {review.assessment.coverage.reviewedPaths.length} files reviewed
-                · {review.assessment.coverage.omittedPaths.length} omitted
-              </p>
-              {review.assessment.coverage.limitations.map((limit, index) => (
-                <p key={index} className="mt-1 text-muted-foreground">
-                  {limit}
-                </p>
-              ))}
-            </details>
-          )}
-        </article>
-      ))}
     </section>
   );
 }
diff --git a/ui/src/pages/apps/chat/chat-ui-contract.test.ts b/ui/src/pages/apps/chat/chat-ui-contract.test.ts
index 07f701f513c..8418355635c 100644
--- a/ui/src/pages/apps/chat/chat-ui-contract.test.ts
+++ b/ui/src/pages/apps/chat/chat-ui-contract.test.ts
@@ -53,8 +53,6 @@ describe("chat connector UI contract", () => {
       expect(detail).toContain(`"${tab}"`);
     }
     expect(detail).not.toContain('"overview"');
-    expect(detail).toContain("Open {providerNames[provider]}");
-    expect(detail).toContain("Open task");
     expect(detail.toLowerCase()).not.toContain("detach");
   });
 
diff --git a/ui/storybook/stories/github-bot-management/fixture-api.tsx b/ui/storybook/stories/github-bot-management/fixture-api.tsx
new file mode 100644
index 00000000000..4ba1e6ede5a
--- /dev/null
+++ b/ui/storybook/stories/github-bot-management/fixture-api.tsx
@@ -0,0 +1,130 @@
+import { useLayoutEffect, useState, type ReactNode } from "react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { queryKeys } from "@/lib/queryKeys";
+import {
+  endpoint,
+  agent,
+  configuration,
+  resources,
+  reviews,
+  conversations,
+  links,
+  members,
+} from "./fixtures";
+
+export type FixtureState = "populated" | "empty" | "loading" | "error" | "long";
+/** Only fixture IDs are intercepted. All shell requests use Storybook's shared API fixtures. */
+export function FixtureApi({
+  state = "populated",
+  children,
+}: {
+  state?: FixtureState;
+  children: ReactNode;
+}) {
+  const [client] = useState(() => {
+    const client = new QueryClient({
+      defaultOptions: { queries: { retry: false, staleTime: Infinity } },
+    });
+    client.setQueryData(queryKeys.chatEndpoints.detail(endpoint.id), endpoint);
+    client.setQueryData(queryKeys.agents.detail(agent.id), agent);
+    client.setQueryData(["github-members", endpoint.companyId], members);
+    return client;
+  });
+  const [ready, setReady] = useState(false);
+  useLayoutEffect(() => {
+    const original = window.fetch;
+    let saved = { revision: 2, configuration: structuredClone(configuration) };
+    let repos = structuredClone(resources);
+    let identities = structuredClone(links);
+    const failedPaths = new Set<string>();
+    window.fetch = async (input, init) => {
+      const raw =
+        typeof input === "string"
+          ? input
+          : input instanceof URL
+            ? input.href
+            : input.url;
+      const path = new URL(raw, window.location.origin).pathname;
+      if (!path.includes(`/chat-endpoints/${endpoint.id}`))
+        return original(input, init);
+      if (state === "loading") return new Promise<Response>(() => {});
+      if (
+        state === "error" &&
+        (path.endsWith("/configuration") || path.endsWith("/resources")) &&
+        !failedPaths.has(path)
+      ) {
+        failedPaths.add(path);
+        return Response.json(
+          { error: "Could not reach GitHub. Try again." },
+          { status: 503 },
+        );
+      }
+      const body = init?.body ? JSON.parse(String(init.body)) : {};
+      if (path.endsWith("/configuration")) {
+        if (init?.method === "PUT")
+          saved = {
+            revision: saved.revision + 1,
+            configuration: body.configuration,
+          };
+        return Response.json(saved);
+      }
+      if (path.endsWith("/repositories/refresh")) return Response.json(repos);
+      if (path.endsWith("/resources")) {
+        if (init?.method === "PUT")
+          repos = repos.map((r) => ({
+            ...r,
+            enabled:
+              body.resources?.find(
+                (change: { id: string; enabled: boolean }) =>
+                  change.id === r.id,
+              )?.enabled ?? r.enabled,
+          }));
+        const rows =
+          state === "empty"
+            ? []
+            : state === "long"
+              ? repos.map((r) => ({
+                  ...r,
+                  label: `acme/platform-services-production-web-${r.id}-accessibility-improvements`,
+                }))
+              : repos;
+        return Response.json({ items: rows });
+      }
+      if (path.endsWith("/reviews"))
+        return Response.json(state === "empty" ? [] : reviews);
+      if (path.endsWith("/activity"))
+        return Response.json({ items: [], nextCursor: null });
+      if (path.endsWith("/conversations"))
+        return Response.json({
+          items:
+            state === "empty"
+              ? []
+              : state === "long"
+                ? conversations.map((r) => ({
+                    ...r,
+                    issueTitle: `${r.issueTitle} for every keyboard, screen reader, and narrow screen entry point`,
+                  }))
+                : conversations,
+        });
+      if (path.endsWith("/principals"))
+        return Response.json({ items: state === "empty" ? [] : identities });
+      if (path.endsWith("/link") && init?.method === "DELETE") {
+        identities = identities.filter(
+          (link) => !path.includes(link.principalId),
+        );
+        return Response.json({ success: true });
+      }
+      if (path.endsWith("/people/lookup"))
+        return Response.json({ githubUserId: "44", login: body.login });
+      return Response.json(endpoint);
+    };
+    setReady(true);
+    return () => {
+      window.fetch = original;
+      client.clear();
+    };
+  }, [client, state]);
+  return ready ? (
+    <QueryClientProvider client={client}>{children}</QueryClientProvider>
+  ) : null;
+}
diff --git a/ui/storybook/stories/github-bot-management/fixtures.ts b/ui/storybook/stories/github-bot-management/fixtures.ts
new file mode 100644
index 00000000000..4d7dfd08030
--- /dev/null
+++ b/ui/storybook/stories/github-bot-management/fixtures.ts
@@ -0,0 +1,200 @@
+import {
+  defaultGitHubReviewPolicy,
+  type GitHubChatConfiguration,
+  type GitHubTaskReview,
+} from "@paperclipai/shared";
+import type {
+  ChatEndpoint,
+  ChatEndpointResource,
+  ChatConversation,
+  ChatIdentityLink,
+} from "@/api/chatEndpoints";
+import { STORYBOOK_COMPANY_ID } from "../../fixtures/onboardingDraft";
+import { storybookAgents } from "../../fixtures/paperclipData";
+
+export const agent = { ...storybookAgents[0], name: "Maya" };
+export const endpoint: ChatEndpoint = {
+  id: "story-github-bot",
+  companyId: STORYBOOK_COMPANY_ID,
+  provider: "github",
+  status: "active",
+  assignedAgentId: agent.id,
+  assignedAgentName: agent.name,
+  connectionId: "story-github-tools",
+  botLabel: "Maya Reviews",
+  botUsername: "maya-reviews[bot]",
+  providerAccountLabel: "acme",
+  allowUnlinkedPeople: false,
+  setup: { step: "complete" },
+};
+export const configuration: GitHubChatConfiguration = {
+  version: 1,
+  toolsEnabled: true,
+  responsibleUserId: "user-board",
+  memberAccess: "selected",
+  people: [
+    {
+      kind: "member",
+      userId: "user-board",
+      githubUserId: "42",
+      login: "mayacoder",
+      automaticReviews: true,
+    },
+  ],
+  defaults: {
+    ...defaultGitHubReviewPolicy(),
+    invocation: "allowed_authors",
+    events: ["opened", "synchronize"],
+    issueOpened: true,
+    instructions:
+      "Review for correctness and security. Explain important findings clearly, and suggest a focused fix. For issues, help the author understand the next step.",
+  },
+  repositories: {},
+};
+export const resources: ChatEndpointResource[] = [
+  {
+    id: "web",
+    type: "repository",
+    providerResourceId: "acme/web",
+    label: "acme/web",
+    availability: "available",
+    enabled: true,
+    metadata: { providerRepositoryId: "100" },
+  },
+  {
+    id: "api",
+    type: "repository",
+    providerResourceId: "acme/api",
+    label: "acme/api",
+    availability: "available",
+    enabled: false,
+    metadata: { providerRepositoryId: "101" },
+  },
+];
+export const links: ChatIdentityLink[] = [
+  {
+    id: "maya",
+    principalId: "maya",
+    githubUserId: "42",
+    githubLogin: "mayacoder",
+    externalLabel: "mayacoder",
+    paperclipUserId: "user-board",
+    paperclipUserLabel: "Maya Chen",
+    status: "linked",
+  },
+  {
+    id: "vin",
+    principalId: "vin",
+    githubUserId: "43",
+    githubLogin: "vin-dev",
+    externalLabel: "vin-dev",
+    paperclipUserId: "vin-member",
+    paperclipUserLabel: "Vin Patel",
+    status: "linked",
+  },
+];
+export const members = {
+  members: [
+    {
+      principalId: "user-board",
+      status: "active",
+      membershipRole: "owner",
+      user: { name: "Maya Chen" },
+    },
+    {
+      principalId: "vin-member",
+      status: "active",
+      membershipRole: "operator",
+      user: { name: "Vin Patel" },
+    },
+  ],
+};
+export function review(
+  id: string,
+  headSha: string,
+  createdAt: string,
+): GitHubTaskReview {
+  return {
+    id,
+    companyId: endpoint.companyId,
+    endpointId: endpoint.id,
+    issueId: `task-${id}`,
+    runId: null,
+    repositoryId: "100",
+    repository: "acme/web",
+    pullNumber: 24,
+    headSha,
+    configurationRevision: 2,
+    event: {
+      event: "opened",
+      deliveryId: `delivery-${id}`,
+      repositoryId: "100",
+      repository: "acme/web",
+      pullNumber: 24,
+      title: "Fix keyboard focus in the account picker",
+      body: "",
+      baseSha: "0000000",
+      headSha,
+      baseBranch: "main",
+      author: { id: "42", login: "mayacoder", isBot: false },
+      sender: { id: "42", login: "mayacoder" },
+      draft: false,
+      labels: [],
+    },
+    state: "completed",
+    assessment: {
+      reviewedCommit: headSha,
+      score: 5,
+      complete: true,
+      summary:
+        "**5/5** — Focus returns to the trigger after dismissal. Keyboard navigation and the loading state are covered.\n\n```text\n /\\_/\\\n( o.o )\n > ^ <\n```",
+      rationale:
+        "The change preserves the picker’s existing access rules and handles dismissal without losing focus.",
+      coverage: {
+        reviewedPaths: ["ui/AccountPicker.tsx", "ui/AccountPicker.test.tsx"],
+        omittedPaths: [],
+        limitations: [],
+      },
+      findings: [],
+    },
+    conclusion: "success",
+    checkUrl: "https://github.com/acme/web/pull/24/checks",
+    summaryUrl: "https://github.com/acme/web/pull/24#issuecomment-123",
+    createdAt,
+    updatedAt: createdAt,
+  };
+}
+export const reviews = [
+  review(
+    "latest",
+    "b046e7e18bdda6208515088540aee438091ab120",
+    "2026-10-07T12:43:00Z",
+  ),
+  review(
+    "previous",
+    "c1525d7a904142590babb421971e7590d0a03b26",
+    "2026-10-07T12:33:00Z",
+  ),
+];
+export const conversations: ChatConversation[] = [
+  {
+    id: "pr",
+    externalLabel: "acme/web",
+    externalUrl: "https://github.com/acme/web/pull/24",
+    issueId: "task-latest",
+    issueIdentifier: "PAP-24",
+    issueTitle: "Fix keyboard focus in the account picker",
+    state: "completed",
+    updatedAt: "2026-10-07T12:43:00Z",
+  },
+  {
+    id: "issue",
+    externalLabel: "acme/web",
+    externalUrl: "https://github.com/acme/web/issues/25",
+    issueId: "task-issue",
+    issueIdentifier: "PAP-25",
+    issueTitle: "Investigate the sign-in error after an invitation",
+    state: "active",
+    updatedAt: "2026-10-07T12:50:00Z",
+  },
+];
diff --git a/ui/storybook/stories/github-bot-management/management.stories.tsx b/ui/storybook/stories/github-bot-management/management.stories.tsx
new file mode 100644
index 00000000000..6c8486d770c
--- /dev/null
+++ b/ui/storybook/stories/github-bot-management/management.stories.tsx
@@ -0,0 +1,180 @@
+import { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Routes, Route } from "@/lib/router";
+import { PluginLauncherProvider } from "@/plugins/launchers";
+import { Layout } from "@/components/Layout";
+import { ChatEndpointDetail } from "@/pages/apps/chat/ChatEndpointDetail";
+import {
+  GitHubPolicyEditor,
+  GitHubAccessEditor,
+} from "@/pages/apps/chat/GitHubBotConfiguration";
+import {
+  GitHubRepositoryAccess,
+  GitHubReviewList,
+} from "@/pages/apps/chat/GitHubBotManagement";
+import { ChatConversationList } from "@/pages/apps/chat/ChatConversationList";
+import {
+  endpoint,
+  configuration,
+  resources,
+  reviews,
+  conversations,
+} from "./fixtures";
+import { FixtureApi, type FixtureState } from "./fixture-api";
+
+const meta = {
+  title: "Connectors/GitHub bot management",
+  parameters: {
+    layout: "fullscreen",
+    initialEntries: [`/PAP/apps/chat/${endpoint.id}/settings`],
+    docs: {
+      description: {
+        component:
+          "Production pages and components. Start with **01 Journey / Settings**, then use the actual contextual sidebar to visit Access, Reviews, and Conversations. Try editing instructions, switch tabs, and save or discard the shared draft. **02 States** covers empty, loading, recoverable error, long content, and mobile. **03 Components** isolates the policy editor, people access, repository access, latest review/history, pending current commit, and conversations. Provider operations use isolated fixture APIs; these stories are not live GitHub evidence.",
+      },
+    },
+  },
+  args: { state: "populated" as FixtureState },
+  argTypes: {
+    state: {
+      control: "select",
+      options: ["populated", "empty", "loading", "error", "long"],
+    },
+  },
+  render: ({ state }) => (
+    <FixtureApi key={state} state={state}>
+      <PluginLauncherProvider>
+        <Routes>
+          <Route path="/:companyPrefix" element={<Layout />}>
+            <Route
+              path="apps/chat/:endpointId/:tab"
+              element={<ChatEndpointDetail />}
+            />
+          </Route>
+        </Routes>
+      </PluginLauncherProvider>
+    </FixtureApi>
+  ),
+} satisfies Meta<{ state: FixtureState }>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+const route = (tab: string) => ({
+  initialEntries: [`/PAP/apps/chat/${endpoint.id}/${tab}`],
+});
+export const SettingsJourney: Story = { name: "01 Journey / Settings" };
+export const AccessJourney: Story = {
+  name: "01 Journey / Access",
+  parameters: route("access"),
+};
+export const ReviewsJourney: Story = {
+  name: "01 Journey / Reviews",
+  parameters: route("reviews"),
+};
+export const ConversationsJourney: Story = {
+  name: "01 Journey / Conversations",
+  parameters: route("conversations"),
+};
+export const FirstUse: Story = {
+  name: "02 States / No conversations",
+  args: { state: "empty" },
+  parameters: route("conversations"),
+};
+export const NoReviews: Story = {
+  name: "02 States / No reviews",
+  args: { state: "empty" },
+  parameters: route("reviews"),
+};
+export const Loading: Story = {
+  name: "02 States / Loading settings",
+  args: { state: "loading" },
+};
+export const Error: Story = {
+  name: "02 States / Settings failure",
+  args: { state: "error" },
+};
+export const LongAccess: Story = {
+  name: "02 States / Long repository names",
+  args: { state: "long" },
+  parameters: route("access"),
+};
+export const Mobile: Story = {
+  name: "02 States / Mobile conversations",
+  args: { state: "long" },
+  parameters: {
+    ...route("conversations"),
+    viewport: { defaultViewport: "mobile1" },
+  },
+  globals: { viewport: { value: "mobile1", isRotated: false } },
+};
+function Policy() {
+  const [policy, setPolicy] = useState(configuration.defaults);
+  return <GitHubPolicyEditor policy={policy} onChange={setPolicy} />;
+}
+function People() {
+  const [config, setConfig] = useState(configuration);
+  return (
+    <FixtureApi>
+      <GitHubAccessEditor
+        endpointId={endpoint.id}
+        companyId={endpoint.companyId}
+        configuration={config}
+        onChange={setConfig}
+      />
+    </FixtureApi>
+  );
+}
+function Repositories() {
+  const [rows, setRows] = useState(resources);
+  return (
+    <GitHubRepositoryAccess
+      resources={rows}
+      managementUrl="https://github.com/settings/installations"
+      pending={false}
+      onRefresh={() => {}}
+      onChange={(id, enabled) =>
+        setRows(rows.map((r) => (r.id === id ? { ...r, enabled } : r)))
+      }
+    />
+  );
+}
+const component = (children: React.ReactNode) => (
+  <div className="max-w-3xl p-6">{children}</div>
+);
+export const InstructionsAndBehavior: Story = {
+  name: "03 Components / Instructions and behavior",
+  render: () => component(<Policy />),
+};
+export const PeopleAccess: Story = {
+  name: "03 Components / People access",
+  render: () => component(<People />),
+};
+export const RepositoryAccess: Story = {
+  name: "03 Components / Repository access",
+  render: () => component(<Repositories />),
+};
+export const ReviewHistory: Story = {
+  name: "03 Components / Latest review and history",
+  render: () => component(<GitHubReviewList reviews={reviews} />),
+};
+export const PendingReview: Story = {
+  name: "03 Components / Pending current commit",
+  render: () =>
+    component(
+      <GitHubReviewList
+        reviews={[
+          {
+            ...reviews[0],
+            state: "running",
+            assessment: null,
+            conclusion: null,
+          },
+          reviews[1],
+        ]}
+      />,
+    ),
+};
+export const ConversationRows: Story = {
+  name: "03 Components / Conversation rows",
+  render: () =>
+    component(<ChatConversationList rows={conversations} provider="github" />),
+};
diff --git a/ui/storybook/stories/github-chat.stories.tsx b/ui/storybook/stories/github-chat.stories.tsx
index 9aec936f5f2..5e6d09b6e25 100644
--- a/ui/storybook/stories/github-chat.stories.tsx
+++ b/ui/storybook/stories/github-chat.stories.tsx
@@ -3,7 +3,7 @@ import { expect, userEvent, within } from "storybook/test";
 import { GitHubChatPreview } from "../prototypes/github-chat/GitHubChatPreview";
 
 const meta = {
-  title: "Apps/GitHub chat & reviews",
+  title: "Historical/GitHub chat prototypes",
   component: GitHubChatPreview,
   parameters: {
     layout: "fullscreen",