feat(cloud-agent): PR tracking for cloud-agent sessions

apps/mobile/src/components/agents/mobile-session-manager.ts

@@ -266,6 +266,7 @@ export function createMobileAgentSessionManager({
         isPreparingAsync: Boolean(rs && !rs.preparedAt),
         prompt: rs?.prompt ?? null,
         initialMessageId: rs?.initialMessageId ?? null,
+        associatedPr: sessionResult.associatedPr,
       };
     },
   });

apps/web/jest.config.ts

@@ -53,7 +53,7 @@ const config: Config = {
   ],
   modulePathIgnorePatterns: ['<rootDir>/../../.worktrees/'],
   transformIgnorePatterns: [
-    'node_modules/.pnpm/(?!(@octokit|universal-user-agent|before-after-hook|bottleneck|p-limit|yocto-queue))',
+    'node_modules/.pnpm/(?!(@octokit|universal-user-agent|universal-github-app-jwt|before-after-hook|bottleneck|p-limit|yocto-queue))',
   ],
 
   // Parallel execution configuration

apps/web/package.json

@@ -74,6 +74,7 @@
     "@radix-ui/react-collapsible": "^1.1.12",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-hover-card": "^1.1.15",
     "@radix-ui/react-label": "^2.1.8",
     "@radix-ui/react-popover": "^1.1.15",
     "@radix-ui/react-progress": "^1.1.8",

apps/web/src/components/cloud-agent-next/ChatSidebar.tsx

@@ -19,6 +19,7 @@ import {
 import { usePathname, useRouter } from 'next/navigation';
 import { isToday, isYesterday, startOfDay, differenceInCalendarDays, format } from 'date-fns';
 import type { StoredSession } from './types';
+import { SessionPrIndicator } from './SessionPrIndicator';
 import { isNewSession } from '@/lib/cloud-agent/session-type';
 import { cn } from '@/lib/utils';
 import {
@@ -199,6 +200,7 @@ function SessionRow({
         ) : (
           <>
             <span className="line-clamp-1 min-w-0 flex-1 leading-snug">{session.prompt}</span>
+            <SessionPrIndicator session={session} />
             <span className="relative shrink-0">
               {shouldReplaceTime ? (
                 <span

apps/web/src/components/cloud-agent-next/CloudAgentProvider.tsx

@@ -271,6 +271,7 @@ export function CloudAgentProvider({ children, organizationId }: CloudAgentProvi
           prompt: rs?.prompt ?? null,
           initialMessageId: rs?.initialMessageId ?? null,
           runtimeAgents: rs?.runtimeAgents,
+          associatedPr: sessionResult.associatedPr,
         };
       },
 

apps/web/src/components/cloud-agent-next/CloudChatPage.tsx

@@ -441,6 +441,8 @@ export default function CloudChatPage({ organizationId }: CloudChatPageProps) {
       kiloSessionId={sessionIdFromParams ?? undefined}
       organizationId={organizationId}
       repository={sessionConfig?.repository ?? ''}
+      branch={fetchedSessionData?.gitBranch ?? undefined}
+      gitUrl={fetchedSessionData?.gitUrl}
       model={sessionConfig?.model}
       modelDisplayName={modelDisplayName}
       totalCost={totalCost}

apps/web/src/components/cloud-agent-next/PrBadge.tsx

@@ -0,0 +1,110 @@
+'use client';
+
+import { forwardRef } from 'react';
+import {
+  CircleCheck,
+  CircleX,
+  GitMerge,
+  GitPullRequest,
+  GitPullRequestClosed,
+  type LucideIcon,
+} from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+
+import {
+  normalizePrBadgeState,
+  type AssociatedPr,
+  type PrBadgeState,
+  type ReviewDecision,
+} from './utils/github-pr-link';
+
+const STATE_CLASSES: Record<PrBadgeState, string> = {
+  open: 'bg-zinc-500/20 text-zinc-400 hover:bg-zinc-500/25',
+  merged: 'bg-purple-500/20 text-purple-400 hover:bg-purple-500/25',
+  closed: 'bg-zinc-500/20 text-zinc-400 hover:bg-zinc-500/25',
+};
+
+function resolveClasses(state: PrBadgeState, reviewDecision: ReviewDecision | null): string {
+  if (state === 'open') {
+    if (reviewDecision === 'approved')
+      return 'bg-emerald-500/20 text-emerald-400 hover:bg-emerald-500/25';
+    if (reviewDecision === 'changes_requested')
+      return 'bg-amber-500/20 text-amber-400 hover:bg-amber-500/25';
+  }
+  return STATE_CLASSES[state];
+}
+
+function resolveIcon(state: PrBadgeState, reviewDecision: ReviewDecision | null): LucideIcon {
+  if (state === 'merged') return GitMerge;
+  if (state === 'closed') return GitPullRequestClosed;
+  // open state: use review-decision icon when available
+  if (reviewDecision === 'approved') return CircleCheck;
+  if (reviewDecision === 'changes_requested') return CircleX;
+  return GitPullRequest;
+}
+
+const STATE_ARIA_LABELS: Record<PrBadgeState, string> = {
+  open: 'open pull request',
+  merged: 'merged pull request',
+  closed: 'closed pull request',
+};
+
+type PrBadgeProps = {
+  pr: AssociatedPr;
+} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'aria-label'>;
+
+/**
+ * Compact pill that summarizes the PR associated with a session row.
+ *
+ * Visual mapping:
+ *   - `open` + approved          → emerald + CircleCheck
+ *   - `open` + changes_requested → amber   + CircleX
+ *   - `open` + review_required   → zinc    + GitPullRequest
+ *   - `open` + no decision       → zinc    + GitPullRequest
+ *   - `merged`                   → purple  + GitMerge
+ *   - `closed`                   → zinc    + GitPullRequestClosed (icon distinguishes from open)
+ */
+export const PrBadge = forwardRef<HTMLButtonElement, PrBadgeProps>(function PrBadge(
+  { pr, className, ...rest },
+  ref
+) {
+  const state = normalizePrBadgeState(pr.state);
+  const Icon = resolveIcon(state, pr.reviewDecision ?? null);
+  const classes = resolveClasses(state, pr.reviewDecision ?? null);
+
+  return (
+    <button
+      ref={ref}
+      type="button"
+      aria-label={`${STATE_ARIA_LABELS[state]} #${pr.number}`}
+      {...rest}
+      className={cn(
+        'inline-flex shrink-0 items-center gap-1 rounded-md py-0.5 pr-1.5 pl-1 text-[11px] font-medium tabular-nums transition-colors focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-none',
+        classes,
+        className
+      )}
+    >
+      <Icon className="h-3 w-3" aria-hidden="true" />
+      <span>#{pr.number}</span>
+    </button>
+  );
+});
+
+/**
+ * Placeholder shown while the parent has no `associatedPr` field yet (e.g.
+ * during the first list query render). The fixed width avoids layout shift
+ * when the badge resolves.
+ *
+ * The 300ms animation delay matches the kilocode Agent Manager pattern: brief
+ * loads never flash a skeleton.
+ */
+export function PrBadgeSkeleton() {
+  return (
+    <span
+      aria-hidden="true"
+      className="bg-muted inline-block h-3.5 w-[52px] shrink-0 animate-pulse rounded-md"
+      style={{ animationDelay: '300ms' }}
+    />
+  );
+}

apps/web/src/components/cloud-agent-next/PrHoverCardContent.tsx

@@ -0,0 +1,138 @@
+'use client';
+
+import { useCallback } from 'react';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { formatDistanceToNow } from 'date-fns';
+import { ExternalLink, RefreshCw } from 'lucide-react';
+import { toast } from 'sonner';
+
+import { Button } from '@/components/ui/button';
+import { useTRPC } from '@/lib/trpc/utils';
+
+import { PrStateBadge } from './PrStateBadge';
+import {
+  normalizePrBadgeState,
+  truncatePrTitle,
+  type AssociatedPr,
+  type ReviewDecision,
+} from './utils/github-pr-link';
+
+type PrHoverCardContentProps = {
+  pr: AssociatedPr;
+  sessionId: string;
+  gitBranch: string | null;
+};
+
+/**
+ * Hide the Refresh button while the cache row is at most this old. Mirrors
+ * `REFRESH_THROTTLE_MS` in `apps/web/src/routers/cli-sessions-v2-router.ts`;
+ * the server short-circuits below the same threshold.
+ */
+const REFRESH_THROTTLE_MS = 60_000;
+
+const REVIEW_DECISION_LABELS: Record<ReviewDecision, string> = {
+  approved: 'Approved',
+  changes_requested: 'Changes requested',
+  review_required: 'Awaiting review',
+};
+
+const REVIEW_DECISION_CLASSES: Record<ReviewDecision, string> = {
+  approved: 'text-emerald-400',
+  changes_requested: 'text-amber-400',
+  review_required: 'text-muted-foreground',
+};
+
+function formatRelativeSync(lastSyncedAt: string): string {
+  const parsed = new Date(lastSyncedAt);
+  if (Number.isNaN(parsed.getTime())) return 'unknown';
+  return formatDistanceToNow(parsed, { addSuffix: true });
+}
+
+function isWithinRefreshThrottle(lastSyncedAt: string): boolean {
+  const parsed = Date.parse(lastSyncedAt);
+  if (!Number.isFinite(parsed)) return false;
+  return Date.now() - parsed < REFRESH_THROTTLE_MS;
+}
+
+export function PrHoverCardContent({ pr, sessionId, gitBranch }: PrHoverCardContentProps) {
+  const trpc = useTRPC();
+  const queryClient = useQueryClient();
+  const state = normalizePrBadgeState(pr.state);
+  const headShaShort = pr.headSha?.slice(0, 7) ?? null;
+  const truncatedTitle = truncatePrTitle(pr.title, 80);
+
+  const { mutate: refresh, isPending } = useMutation({
+    ...trpc.cliSessionsV2.refreshAssociatedPullRequest.mutationOptions(),
+    onSuccess: () => {
+      void queryClient.invalidateQueries(trpc.cliSessionsV2.list.pathFilter());
+      void queryClient.invalidateQueries(trpc.cliSessionsV2.search.pathFilter());
+    },
+    onError: error => {
+      toast.error(error?.message ?? 'Failed to refresh pull request status');
+    },
+  });
+
+  const handleRefresh = useCallback(() => {
+    if (isPending) return;
+    refresh({ sessionId });
+  }, [isPending, refresh, sessionId]);
+
+  return (
+    <div className="flex flex-col gap-3 text-sm">
+      <div className="flex items-start gap-2">
+        <PrStateBadge state={state} />
+        <span className="text-muted-foreground text-xs leading-5">PR #{pr.number}</span>
+      </div>
+
+      {truncatedTitle && (
+        <p className="text-foreground line-clamp-2 text-sm leading-snug">{truncatedTitle}</p>
+      )}
+
+      <div className="border-border/60 grid grid-cols-[max-content_1fr] gap-x-3 gap-y-1 border-t pt-3 text-xs">
+        {pr.reviewDecision && (
+          <>
+            <span className="text-muted-foreground">Review</span>
+            <span className={REVIEW_DECISION_CLASSES[pr.reviewDecision]}>
+              {REVIEW_DECISION_LABELS[pr.reviewDecision]}
+            </span>
+          </>
+        )}
+        {gitBranch && (
+          <>
+            <span className="text-muted-foreground">Branch</span>
+            <span className="truncate font-mono">{gitBranch}</span>
+          </>
+        )}
+        {headShaShort && (
+          <>
+            <span className="text-muted-foreground">Commit</span>
+            <span className="font-mono">{headShaShort}</span>
+          </>
+        )}
+        <span className="text-muted-foreground">Synced</span>
+        <span>{formatRelativeSync(pr.lastSyncedAt)}</span>
+      </div>
+
+      <div className="border-border/60 flex items-center gap-2 border-t pt-3">
+        {!isWithinRefreshThrottle(pr.lastSyncedAt) && (
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={handleRefresh}
+            disabled={isPending}
+            aria-label="Refresh pull request status"
+          >
+            <RefreshCw className={isPending ? 'animate-spin' : undefined} />
+            Refresh
+          </Button>
+        )}
+        <Button asChild variant="outline" size="sm" className="ml-auto">
+          <a href={pr.url} target="_blank" rel="noopener noreferrer">
+            <ExternalLink />
+            Open on GitHub
+          </a>
+        </Button>
+      </div>
+    </div>
+  );
+}

apps/web/src/components/cloud-agent-next/PrStateBadge.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+import type { PrBadgeState } from './utils/github-pr-link';
+
+const STYLES: Record<PrBadgeState, string> = {
+  open: 'bg-emerald-500/20 text-emerald-400',
+  merged: 'bg-purple-500/20 text-purple-400',
+  closed: 'bg-zinc-500/20 text-zinc-400',
+};
+
+const LABELS: Record<PrBadgeState, string> = {
+  open: 'open',
+  merged: 'merged',
+  closed: 'closed',
+};
+
+export function PrStateBadge({ state }: { state: PrBadgeState }) {
+  return (
+    <span
+      className={`inline-flex shrink-0 items-center gap-1 rounded px-2 py-0.5 text-xs font-medium ${STYLES[state]}`}
+    >
+      {LABELS[state]}
+    </span>
+  );
+}