From 55842d12a1be66cc901f47574c5caba33d38b250 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=B7=E7=94=B5=E8=8A=BD=E8=A1=A3?=
 <zhangyanghaha0407@outlook.com>
Date: Sun, 7 Jun 2026 18:08:48 -0400
Subject: [PATCH] Add hiring pipeline with four-stage board view

HiringPipeline component shows agents across stages: Pending Approval,
Approved, Active, and Rejected. Each stage column shows agent cards
with role, department, and approval timing. Stage assignment is derived
from the agent's lifecycle and associated hire approval state.
---
 .../src/renderer/src/pages/TeamPage.tsx       |  3 +
 .../src/pages/team/HiringPipeline.tsx         | 75 +++++++++++++++++++
 2 files changed, 78 insertions(+)
 create mode 100644 AgentCompany-New/src/renderer/src/pages/team/HiringPipeline.tsx

diff --git a/AgentCompany-New/src/renderer/src/pages/TeamPage.tsx b/AgentCompany-New/src/renderer/src/pages/TeamPage.tsx
index 583d8eb6..d43ed0e0 100644
--- a/AgentCompany-New/src/renderer/src/pages/TeamPage.tsx
+++ b/AgentCompany-New/src/renderer/src/pages/TeamPage.tsx
@@ -3,6 +3,7 @@ import { Avatar, Button, Field, Icon, IconButton } from "../shared/ui";
 import { TopbarActions } from "../shared/TopbarActions";
 import { Dialog } from "../shared/Dialog";
 import { OrgChartTree } from "./team/OrgChartTree";
+import { HiringPipeline } from "./team/HiringPipeline";
 import type { AgentRecord, EmployeeRecord, ProviderRecord } from "../../../shared/domain";
 import type { PageProps } from "./types";
 import { activeOrgId, money } from "./types";
@@ -112,6 +113,8 @@ export function TeamPage({ snapshot, actions }: PageProps) {
         <OrgChartTree boardChair={employees[0] ?? null} agents={agents} onSelectAgent={setEditAgentId} />
       </section>
 
+      <HiringPipeline agents={agents} approvals={snapshot.approvals.filter((a) => a.orgId === orgId)} />
+
       <div className="section-label" style={{ marginBottom: 10 }}>Roster</div>
       <div className="card" style={{ padding: 0, overflow: "hidden" }}>
         <div
diff --git a/AgentCompany-New/src/renderer/src/pages/team/HiringPipeline.tsx b/AgentCompany-New/src/renderer/src/pages/team/HiringPipeline.tsx
new file mode 100644
index 00000000..705dd4ab
--- /dev/null
+++ b/AgentCompany-New/src/renderer/src/pages/team/HiringPipeline.tsx
@@ -0,0 +1,75 @@
+import { Avatar, Pill } from "../../shared/ui";
+import type { AgentRecord, ApprovalRecord } from "../../../../shared/domain";
+import { formatRelative } from "../types";
+
+interface PipelineStage {
+  id: string;
+  label: string;
+  color: string;
+}
+
+const STAGES: PipelineStage[] = [
+  { id: "pending_approval", label: "Pending approval", color: "var(--amber)" },
+  { id: "approved", label: "Approved", color: "var(--green)" },
+  { id: "active", label: "Active", color: "var(--accent)" },
+  { id: "rejected", label: "Rejected", color: "var(--red)" },
+];
+
+interface PipelineEntry {
+  agent: AgentRecord;
+  stage: string;
+  approval: ApprovalRecord | null;
+}
+
+function resolveStage(agent: AgentRecord, approvals: ApprovalRecord[]): PipelineEntry {
+  const hireApproval = approvals.find(
+    (a) => a.sourceEntityType === "agent" && a.sourceEntityId === agent.id && a.kind === "agent_hire",
+  ) ?? null;
+
+  if (hireApproval?.state === "pending") return { agent, stage: "pending_approval", approval: hireApproval };
+  if (hireApproval?.state === "declined") return { agent, stage: "rejected", approval: hireApproval };
+  if (agent.lifecycle === "active") return { agent, stage: "active", approval: hireApproval };
+  return { agent, stage: "approved", approval: hireApproval };
+}
+
+export function HiringPipeline({ agents, approvals }: { agents: AgentRecord[]; approvals: ApprovalRecord[] }) {
+  const entries = agents.map((a) => resolveStage(a, approvals));
+
+  return (
+    <section style={{ marginBottom: 24 }}>
+      <div className="section-label" style={{ marginBottom: 12 }}>Hiring pipeline</div>
+      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, minmax(0, 1fr))", gap: 12 }}>
+        {STAGES.map((stage) => {
+          const stageEntries = entries.filter((e) => e.stage === stage.id);
+          return (
+            <div key={stage.id}>
+              <div className="row" style={{ gap: 6, marginBottom: 8 }}>
+                <span style={{ width: 8, height: 8, borderRadius: 2, background: stage.color }} />
+                <span style={{ fontSize: 12, fontWeight: 540 }}>{stage.label}</span>
+                <span className="num" style={{ fontSize: 12, color: "var(--text-3)" }}>{stageEntries.length}</span>
+              </div>
+              <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
+                {stageEntries.map((entry) => (
+                  <div key={entry.agent.id} className="card" style={{ padding: 10 }}>
+                    <div className="row" style={{ gap: 8 }}>
+                      <Avatar name={entry.agent.name} size="sm" bot />
+                      <div style={{ flex: 1, minWidth: 0 }}>
+                        <div style={{ fontSize: 12.5, fontWeight: 500, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{entry.agent.name}</div>
+                        <div style={{ fontSize: 11, color: "var(--text-3)" }}>{entry.agent.role} · {entry.agent.department}</div>
+                      </div>
+                    </div>
+                    {entry.approval && (
+                      <div style={{ marginTop: 6, fontSize: 11, color: "var(--text-3)" }}>
+                        {formatRelative(entry.approval.createdAt)}
+                      </div>
+                    )}
+                  </div>
+                ))}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </section>
+  );
+}