feat(web): render GitHub assignees on stories

apps/web/app/(app)/projects/[projectId]/stories/[number]/page.tsx

@@ -2,6 +2,7 @@ import { Eyebrow, PillTag, StatusDot } from "@facility/ui";
 import Link from "next/link";
 import { notFound } from "next/navigation";
 import { CiStatusLink } from "@/components/ci-status";
+import { AssigneeChip } from "@/components/issues/assignee-chip";
 import { Markdown } from "@/components/markdown";
 import { ErrorNotice, Offline } from "@/components/offline";
 import { LiveRefresh } from "@/components/shell/live-refresh";
@@ -165,6 +166,9 @@ export default async function StoryPage({
               {label}
             </span>
           ))}
+          {story.assignees.map((login) => (
+            <AssigneeChip key={login} login={login} />
+          ))}
           <a
             href={story.htmlUrl}
             target="_blank"

apps/web/app/(app)/projects/[projectId]/stories/page.tsx

@@ -35,9 +35,9 @@ export default async function ProjectStoriesPage({
   searchParams,
 }: {
   params: Promise<{ projectId: string }>;
-  searchParams: Promise<{ stage?: string; status?: string }>;
+  searchParams: Promise<{ stage?: string; status?: string; mine?: string }>;
 }) {
-  const [{ projectId }, { stage, status }] = await Promise.all([params, searchParams]);
+  const [{ projectId }, { stage, status, mine }] = await Promise.all([params, searchParams]);
   const [pipelineResult, me] = await Promise.all([api.pipeline(projectId), api.me()]);
 
   if (!pipelineResult.ok && pipelineResult.offline) return <Offline />;
@@ -50,13 +50,20 @@ export default async function ProjectStoriesPage({
   const activeStage =
     stage && stageKeys.has(stage as PipelineStageKey) ? (stage as PipelineStageKey) : null;
   const items = pipelineResult.ok ? pipelineStories(pipelineResult.data) : [];
+  const githubLogin = me.ok ? me.data.principal.githubLogin : undefined;
+  const mineLogin = mine === "1" ? githubLogin : undefined;
   const stageStates = new Set(items.map((story) => story.stageState));
   const activeStatus =
     activeStage && status && stageStates.has(status as PipelineStageState)
       ? (status as PipelineStageState)
       : null;
-  const counts = [...stages].reverse();
-  const activeOpenStoryCount = items.filter((story) => story.state === "open").length;
+  const counts = [...stages].reverse().map((candidate) => {
+    if (mineLogin === undefined) return candidate;
+    const stories = candidate.stories.filter((story) => story.assignees.includes(mineLogin));
+    return { ...candidate, count: stories.length, stories };
+  });
+  const mineFilteredItems = counts.flatMap((candidate) => candidate.stories);
+  const activeOpenStoryCount = mineFilteredItems.filter((story) => story.state === "open").length;
 
   const stageFiltered = activeStage
     ? counts.filter((candidate) => candidate.key === activeStage)
@@ -143,6 +150,26 @@ export default async function ProjectStoriesPage({
             </span>
           </>
         ) : null}
+        {githubLogin ? (
+          <div className="flex items-center gap-2">
+            <span className="h-4 w-px bg-(--line)" />
+            <Link
+              href={
+                mineLogin
+                  ? `/projects/${projectId}/stories${activeStage ? `?stage=${activeStage}` : ""}`
+                  : `/projects/${projectId}/stories?mine=1${activeStage ? `&stage=${activeStage}` : ""}`
+              }
+              className={cx(
+                "border px-3 py-1.5 text-[12px] font-medium transition-colors",
+                mineLogin
+                  ? "border-(--line-strong) text-(--ink)"
+                  : "border-(--line) text-(--mut) hover:text-(--ink)",
+              )}
+            >
+              mine
+            </Link>
+          </div>
+        ) : null}
       </div>
 
       {!pipelineResult.ok ? (

apps/web/components/issues/assignee-chip.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import Image from "next/image";
+import { useState } from "react";
+import { assigneeInitial, githubAvatarUrl } from "@/lib/pipeline";
+
+export function AssigneeChip({ login }: { login: string }) {
+  const [broken, setBroken] = useState(false);
+  return (
+    <span className="inline-flex items-center gap-1.5 font-mono text-[11px] text-(--dim)">
+      {broken ? (
+        <span className="grid size-4 place-items-center rounded-full border border-(--line) text-[9px] text-(--mut)">
+          {assigneeInitial(login)}
+        </span>
+      ) : (
+        <Image
+          src={githubAvatarUrl(login)}
+          alt=""
+          width={16}
+          height={16}
+          unoptimized
+          referrerPolicy="no-referrer"
+          onError={() => setBroken(true)}
+          className="size-4 rounded-full border border-(--line)"
+        />
+      )}
+      @{login}
+    </span>
+  );
+}

apps/web/components/issues/issue-row.tsx

@@ -5,8 +5,9 @@ import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { CiStatusLink } from "@/components/ci-status";
+import { AssigneeChip } from "@/components/issues/assignee-chip";
 import type { PipelineStory } from "@/lib/pipeline";
-import { storyHref } from "@/lib/pipeline";
+import { assigneeSummary, storyHref } from "@/lib/pipeline";
 
 function fmtAgo(iso: string | null) {
   if (!iso) return "—";
@@ -194,6 +195,20 @@ export function IssueRow({
             {label}
           </span>
         ))}
+        {assigneeSummary(story.assignees).shown.map((login) => (
+          <AssigneeChip key={login} login={login} />
+        ))}
+        {assigneeSummary(story.assignees).extra > 0 ? (
+          <span
+            className="font-mono text-[11px] text-(--dim)"
+            title={story.assignees
+              .slice(1)
+              .map((login) => `@${login}`)
+              .join(", ")}
+          >
+            +{assigneeSummary(story.assignees).extra}
+          </span>
+        ) : null}
         <span className="font-mono text-[10.5px] text-(--dim)">{fmtAgo(story.ghUpdatedAt)}</span>
         {action()}
       </div>

apps/web/lib/pipeline.ts

@@ -108,6 +108,20 @@ export function pipelineStories(pipeline: Pipeline): PipelineStory[] {
   return pipeline.stages.flatMap((stage) => stage.stories);
 }
 
+/** GitHub avatar for an assignee login; needs no sync column and no new table. */
+export function githubAvatarUrl(login: string) {
+  return `https://github.com/${login}.png?size=40`;
+}
+
+/** Initial-letter fallback for deployments where the browser cannot reach github.com. */
+export function assigneeInitial(login: string) {
+  return login.charAt(0).toUpperCase();
+}
+
+export function assigneeSummary(assignees: string[], maxShown = 1) {
+  return { shown: assignees.slice(0, maxShown), extra: Math.max(0, assignees.length - maxShown) };
+}
+
 /** Open, non-draft pull requests that are genuinely waiting on a human review. */
 export function reviewablePullRequests<Story extends Pick<PipelineStory, "repoId" | "prs">>(
   stories: Story[],

apps/web/test/pipeline-story.test.ts

@@ -1,7 +1,13 @@
 import { describe, expect, it } from "vitest";
 import { ciStatusLabel } from "@/components/ci-status";
 import type { PipelineStageKey, PipelineStory, Proposal, StoryDetail } from "@/lib/api";
-import { reviewablePullRequests, storyHref } from "@/lib/pipeline";
+import {
+  assigneeInitial,
+  assigneeSummary,
+  githubAvatarUrl,
+  reviewablePullRequests,
+  storyHref,
+} from "@/lib/pipeline";
 import { deriveStoryTimeline, proposalsForStory } from "@/lib/story";
 
 describe("story presentation contract", () => {
@@ -287,6 +293,21 @@ describe("story presentation contract", () => {
 
     expect(reviewablePullRequests([story]).map(({ pull }) => pull.number)).toEqual([22]);
   });
+
+  it("renders nothing for an unassigned story", () => {
+    expect(assigneeSummary([])).toEqual({ shown: [], extra: 0 });
+  });
+
+  it("shows the first assignee and collapses the rest as +N", () => {
+    expect(assigneeSummary(["ada"])).toEqual({ shown: ["ada"], extra: 0 });
+    expect(assigneeSummary(["ada", "grace", "linus"])).toEqual({ shown: ["ada"], extra: 2 });
+  });
+
+  it("builds the avatar URL from the login and falls back to the initial", () => {
+    expect(githubAvatarUrl("ada")).toBe("https://github.com/ada.png?size=40");
+    expect(assigneeInitial("ada")).toBe("A");
+    expect(assigneeInitial("grace")).toBe("G");
+  });
 });
 
 function pipelinePull(