create-interview-cockpit 0.26.1 → 0.28.0

package/template/client/src/components/PullRequestPanel.tsx

@@ -0,0 +1,1142 @@
+// ─── Pull Request panel — the GitHub Lab "PR page" ──────────────────────
+//
+// Shown in the GitHub Lab modal's right pane when the user picks the
+// "Pull Request" tab. Replicates the essentials of a real github.com
+// PR page:
+//
+//   • Header: title, author, base/compare summary.
+//   • Files changed: checkbox picker over workspace files.
+//   • Checks: per-job pass/fail badge from the most recent act run,
+//     plus a callout for any required checks that are missing or red.
+//   • CODEOWNERS evaluation: which rule wins for each changed file
+//     and which @handles get auto-requested as reviewers.
+//   • Review composer: radio (Approve / Request changes / Comment) +
+//     freeform body. Submitting drops a row into the review timeline.
+//   • Review timeline: every review with state badge + author + body.
+//   • Sidebar: reviewers list (Code-owner derived), branch protection
+//     settings (incl. required status checks picker), org roster, and
+//     the green/grey merge box that ties it all together.
+//
+// The panel is self-contained: it reads & writes the `pullRequest`,
+// `ghOrg`, and `branchProtection` slices of the workspace via the
+// `onChange` prop so persistence, save round-tripping, and undo all
+// flow through the same path as the rest of the lab.
+
+import { useMemo, useState } from "react";
+import {
+  Check,
+  CircleDot,
+  GitBranch,
+  GitPullRequest,
+  Info,
+  MessageSquare,
+  Plus,
+  Shield,
+  ShieldCheck,
+  Trash2,
+  Users,
+  X,
+} from "lucide-react";
+import type {
+  GithubActionsLabWorkspace,
+  GithubLabOrg,
+  GithubLabPullRequest,
+  GithubLabReview,
+  GithubLabRuleset,
+  GithubLabRulesetRules,
+  GithubLabTeam,
+} from "../types";
+import {
+  approvedLogins,
+  changesRequestedLogins,
+  evaluateCodeOwners,
+  evaluateMergeability,
+  findCodeOwnersPath,
+  latestReviewByAuthor,
+  parseCodeOwners,
+  type CheckStatus,
+  type MergeabilityResult,
+} from "../codeowners";
+
+interface PullRequestPanelProps {
+  workspace: GithubActionsLabWorkspace;
+  onChange: (
+    updater: (prev: GithubActionsLabWorkspace) => GithubActionsLabWorkspace,
+  ) => void;
+}
+
+const DEFAULT_ORG: GithubLabOrg = {
+  slug: "acme",
+  viewerLogin: "octocat",
+  users: ["octocat"],
+  teams: [],
+};
+
+const DEFAULT_PR: GithubLabPullRequest = {
+  changedFiles: [],
+  reviews: [],
+  title: "Draft pull request",
+};
+
+interface PullRequestPanelExtraProps {
+  /** Click-through to Settings → Rulesets when a rule needs editing. */
+  onOpenRulesets?: () => void;
+}
+
+export default function PullRequestPanel({
+  workspace,
+  onChange,
+  onOpenRulesets,
+}: PullRequestPanelProps & PullRequestPanelExtraProps) {
+  const org = workspace.ghOrg ?? DEFAULT_ORG;
+  const pr = workspace.pullRequest ?? DEFAULT_PR;
+  const baseBranch = workspace.defaultBranch ?? "main";
+  const defaultBranch = workspace.defaultBranch ?? "main";
+
+  const codeownersPath = useMemo(
+    () => findCodeOwnersPath(workspace.files),
+    [workspace.files],
+  );
+  const codeownersBody = codeownersPath ? workspace.files[codeownersPath] : "";
+  const parsed = useMemo(
+    () => parseCodeOwners(codeownersBody ?? ""),
+    [codeownersBody],
+  );
+  const evaluation = useMemo(
+    () => evaluateCodeOwners(parsed.rules, pr.changedFiles, org),
+    [parsed.rules, pr.changedFiles, org],
+  );
+  const merge = useMemo(
+    () =>
+      evaluateMergeability(
+        evaluation,
+        pr,
+        workspace.rulesets,
+        org,
+        baseBranch,
+        defaultBranch,
+      ),
+    [evaluation, pr, workspace.rulesets, org, baseBranch, defaultBranch],
+  );
+
+  // ── Mutators ────────────────────────────────────────────────────
+  const updatePR = (next: Partial<GithubLabPullRequest>) =>
+    onChange((prev) => ({
+      ...prev,
+      pullRequest: { ...DEFAULT_PR, ...prev.pullRequest, ...next },
+    }));
+
+  const updateOrg = (next: Partial<GithubLabOrg>) =>
+    onChange((prev) => ({
+      ...prev,
+      ghOrg: { ...DEFAULT_ORG, ...prev.ghOrg, ...next },
+    }));
+
+  const toggleChangedFile = (path: string) => {
+    const set = new Set(pr.changedFiles);
+    if (set.has(path)) set.delete(path);
+    else set.add(path);
+    updatePR({ changedFiles: [...set].sort() });
+  };
+
+  const submitReview = (review: Omit<GithubLabReview, "id" | "createdAt">) => {
+    const next: GithubLabReview = {
+      ...review,
+      id: `rev_${Date.now().toString(36)}_${Math.random()
+        .toString(36)
+        .slice(2, 6)}`,
+      createdAt: new Date().toISOString(),
+    };
+    updatePR({ reviews: [...(pr.reviews ?? []), next] });
+  };
+
+  const dismissReview = (id: string) => {
+    updatePR({ reviews: (pr.reviews ?? []).filter((r) => r.id !== id) });
+  };
+
+  // Files we offer in the picker — everything in the lab except .actrc
+  // (which isn't really PR-able). Sorted for stability.
+  const eligibleFiles = useMemo(
+    () =>
+      Object.keys(workspace.files)
+        .filter((p) => p !== ".actrc")
+        .sort(),
+    [workspace.files],
+  );
+
+  const approvedSet = useMemo(
+    () =>
+      new Set(
+        approvedLogins(pr.reviews, org.viewerLogin).map((a) => a.toLowerCase()),
+      ),
+    [pr.reviews, org.viewerLogin],
+  );
+  const changesRequestedSet = useMemo(
+    () =>
+      new Set(
+        changesRequestedLogins(pr.reviews, org.viewerLogin).map((a) =>
+          a.toLowerCase(),
+        ),
+      ),
+    [pr.reviews, org.viewerLogin],
+  );
+
+  return (
+    <div className="flex-1 min-h-0 grid grid-cols-[1fr_320px] gap-3 overflow-hidden text-xs text-slate-300">
+      {/* ── Main column ──────────────────────────────────────────── */}
+      <div className="min-h-0 overflow-auto p-3">
+        <header className="mb-3 flex items-start gap-2">
+          <GitPullRequest className="mt-0.5 h-4 w-4 text-emerald-300" />
+          <div className="flex-1">
+            <input
+              value={pr.title ?? ""}
+              onChange={(e) => updatePR({ title: e.target.value })}
+              placeholder="Pull request title"
+              className="w-full bg-transparent text-sm font-medium text-slate-100 outline-none border-b border-transparent focus:border-emerald-500/40"
+            />
+            <div className="mt-0.5 text-[11px] text-slate-500">
+              <span className="rounded bg-emerald-500/15 px-1.5 py-px text-emerald-300">
+                Open
+              </span>{" "}
+              by <span className="text-slate-300">@{org.viewerLogin}</span> ·
+              wants to merge {pr.changedFiles.length} file
+              {pr.changedFiles.length === 1 ? "" : "s"} into{" "}
+              <span className="text-slate-300">main</span>
+            </div>
+          </div>
+        </header>
+
+        {!codeownersPath && (
+          <div className="mb-3 rounded-lg border border-amber-500/30 bg-amber-500/10 p-2 text-amber-200">
+            No CODEOWNERS file found. Add one at <code>.github/CODEOWNERS</code>{" "}
+            (or <code>CODEOWNERS</code>, or <code>docs/CODEOWNERS</code>) to
+            start matching reviewers.
+          </div>
+        )}
+
+        {/* ── Files changed ── */}
+        <section className="mb-3 rounded-xl border border-slate-800/60 bg-slate-900/40 p-2">
+          <div className="mb-2 flex items-center justify-between">
+            <h3 className="text-[11px] font-semibold uppercase tracking-wider text-slate-400">
+              Files changed ({pr.changedFiles.length})
+            </h3>
+            <button
+              onClick={() =>
+                updatePR({
+                  changedFiles:
+                    pr.changedFiles.length === eligibleFiles.length
+                      ? []
+                      : [...eligibleFiles],
+                })
+              }
+              className="text-[10px] text-slate-500 hover:text-amber-200"
+            >
+              {pr.changedFiles.length === eligibleFiles.length
+                ? "Clear"
+                : "Select all"}
+            </button>
+          </div>
+          <div className="max-h-44 overflow-auto pr-1">
+            {eligibleFiles.map((path) => {
+              const checked = pr.changedFiles.includes(path);
+              return (
+                <label
+                  key={path}
+                  className="flex items-center gap-2 rounded px-1.5 py-1 hover:bg-slate-800/50 cursor-pointer"
+                >
+                  <input
+                    type="checkbox"
+                    checked={checked}
+                    onChange={() => toggleChangedFile(path)}
+                    className="accent-amber-500"
+                  />
+                  <span className="font-mono text-[11px] text-slate-300">
+                    {path}
+                  </span>
+                </label>
+              );
+            })}
+          </div>
+        </section>
+
+        {/* ── Checks (CI) ── */}
+        <ChecksSection pr={pr} checkStatuses={merge.checkStatuses} />
+
+        {/* ── CODEOWNERS evaluation ── */}
+        <section className="mb-3 rounded-xl border border-slate-800/60 bg-slate-900/40 p-2">
+          <h3 className="mb-2 text-[11px] font-semibold uppercase tracking-wider text-slate-400">
+            CODEOWNERS evaluation
+          </h3>
+          {pr.changedFiles.length === 0 ? (
+            <div className="px-1 py-3 text-slate-500">
+              Select files above to see which CODEOWNERS rule wins for each one
+              and who gets auto-requested as a reviewer.
+            </div>
+          ) : (
+            <ul className="space-y-1.5">
+              {evaluation.perFile.map((m) => (
+                <li
+                  key={m.path}
+                  className="rounded border border-slate-800/60 bg-slate-950/50 p-1.5"
+                >
+                  <div className="flex items-center justify-between gap-2">
+                    <span className="font-mono text-[11px] text-slate-200">
+                      {m.path}
+                    </span>
+                    {m.rule ? (
+                      <span className="rounded bg-emerald-500/10 px-1.5 py-px text-[10px] text-emerald-300">
+                        line {m.rule.line}
+                      </span>
+                    ) : (
+                      <span className="rounded bg-slate-700/40 px-1.5 py-px text-[10px] text-slate-400">
+                        no owner
+                      </span>
+                    )}
+                  </div>
+                  {m.rule && (
+                    <div className="mt-1 flex flex-wrap items-center gap-1 text-[10px]">
+                      <code className="text-slate-500">{m.rule.pattern}</code>
+                      <span className="text-slate-600">→</span>
+                      {m.owners.length === 0 ? (
+                        <span className="text-slate-500">
+                          ownership cleared
+                        </span>
+                      ) : (
+                        m.owners.map((o) => (
+                          <span
+                            key={o}
+                            className="rounded bg-amber-500/15 px-1.5 py-px text-amber-200"
+                          >
+                            @{o}
+                          </span>
+                        ))
+                      )}
+                    </div>
+                  )}
+                </li>
+              ))}
+            </ul>
+          )}
+        </section>
+
+        {/* ── Review composer ── */}
+        <ReviewComposer org={org} onSubmit={submitReview} />
+
+        {/* ── Review timeline ── */}
+        <ReviewTimeline reviews={pr.reviews ?? []} onDismiss={dismissReview} />
+      </div>
+
+      {/* ── Sidebar ─────────────────────────────────────────────── */}
+      <aside className="min-h-0 overflow-auto border-l border-slate-800/60 p-3">
+        <SidebarSection title="Reviewers">
+          {evaluation.requestedHandles.length === 0 ? (
+            <p className="text-slate-500">
+              No reviewers auto-requested yet — change some files first.
+            </p>
+          ) : (
+            <div className="space-y-1.5">
+              {evaluation.requestedHandles.map((handle) => {
+                const isTeam = handle.includes("/");
+                const logins = isTeam
+                  ? (org.teams.find(
+                      (t) =>
+                        `${org.slug}/${t.slug}`.toLowerCase() ===
+                        handle.toLowerCase(),
+                    )?.members ?? [])
+                  : [handle];
+                return (
+                  <div
+                    key={handle}
+                    className="rounded border border-slate-800/60 bg-slate-950/50 p-1.5"
+                  >
+                    <div className="flex items-center gap-1 text-[11px] text-amber-200">
+                      {isTeam ? (
+                        <Users className="h-3 w-3" />
+                      ) : (
+                        <span className="inline-block h-1.5 w-1.5 rounded-full bg-amber-400" />
+                      )}
+                      <span>@{handle}</span>
+                    </div>
+                    <div className="mt-1 space-y-0.5">
+                      {logins.map((login) => {
+                        const lc = login.toLowerCase();
+                        const approved = approvedSet.has(lc);
+                        const requested = changesRequestedSet.has(lc);
+                        return (
+                          <div
+                            key={login}
+                            className="flex items-center justify-between text-[11px]"
+                          >
+                            <span className="text-slate-300">{login}</span>
+                            {approved ? (
+                              <span className="inline-flex items-center gap-1 text-[10px] text-emerald-300">
+                                <Check className="h-3 w-3" /> Approved
+                              </span>
+                            ) : requested ? (
+                              <span className="inline-flex items-center gap-1 text-[10px] text-red-300">
+                                <X className="h-3 w-3" /> Changes requested
+                              </span>
+                            ) : (
+                              <span className="text-[10px] text-slate-500">
+                                Awaiting review
+                              </span>
+                            )}
+                          </div>
+                        );
+                      })}
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          )}
+        </SidebarSection>
+
+        {/* Active rulesets */}
+        <SidebarSection title={`Rulesets on ${baseBranch}`}>
+          <RulesetsSummary merge={merge} onOpenRulesets={onOpenRulesets} />
+        </SidebarSection>
+
+        {/* Roster */}
+        <SidebarSection title={`Org @${org.slug} — roster`}>
+          <OrgEditor org={org} onChange={updateOrg} />
+        </SidebarSection>
+
+        {/* Merge box */}
+        <div
+          className={`mt-3 rounded-lg border p-3 ${
+            merge.mergeable
+              ? "border-emerald-500/40 bg-emerald-500/10"
+              : "border-amber-500/30 bg-amber-500/10"
+          }`}
+        >
+          <div className="flex items-center gap-2 text-sm font-semibold">
+            {merge.mergeable ? (
+              <>
+                <Check className="h-4 w-4 text-emerald-300" />
+                <span className="text-emerald-200">
+                  This pull request can be merged
+                </span>
+              </>
+            ) : (
+              <>
+                <X className="h-4 w-4 text-amber-300" />
+                <span className="text-amber-200">Merging is blocked</span>
+              </>
+            )}
+          </div>
+          {merge.reasons.length > 0 && (
+            <ul className="mt-2 list-disc pl-5 text-[11px] text-amber-100/90">
+              {merge.reasons.map((r) => (
+                <li key={r}>{r}</li>
+              ))}
+            </ul>
+          )}
+          {merge.evaluateOnlyReasons.length > 0 && (
+            <div className="mt-2 rounded border border-amber-500/30 bg-slate-950/40 p-1.5">
+              <div className="mb-0.5 flex items-center gap-1 text-[10px] uppercase tracking-wider text-amber-200/80">
+                <Info className="h-2.5 w-2.5" />
+                Would block (evaluate mode)
+              </div>
+              <ul className="list-disc pl-4 text-[11px] text-amber-100/70">
+                {merge.evaluateOnlyReasons.map((r) => (
+                  <li key={r}>{r}</li>
+                ))}
+              </ul>
+            </div>
+          )}
+          <button
+            disabled={!merge.mergeable}
+            className={`mt-3 w-full rounded px-2 py-1.5 text-sm font-medium ${
+              merge.mergeable
+                ? "bg-emerald-600 text-white hover:bg-emerald-500"
+                : "bg-slate-800 text-slate-500 cursor-not-allowed"
+            }`}
+          >
+            Merge pull request
+          </button>
+        </div>
+      </aside>
+    </div>
+  );
+}
+
+// ─── Checks section ────────────────────────────────────────────────────
+//
+// Renders the latest act run as a GitHub-style checks list. The data
+// comes from `pr.lastCheckRun`, which the modal captures off the
+// streamed job snapshots when a run completes. `checkStatuses` is the
+// merge-time view (only the required ones), which we cross-reference
+// to badge a job as "Required" and to surface any missing-but-required
+// job names in the callout at the bottom.
+
+function ChecksSection({
+  pr,
+  checkStatuses,
+}: {
+  pr: GithubLabPullRequest;
+  checkStatuses: CheckStatus[];
+}) {
+  const run = pr.lastCheckRun;
+  const requiredByName = new Map(checkStatuses.map((c) => [c.name, c.status]));
+  return (
+    <section className="mb-3 rounded-xl border border-slate-800/60 bg-slate-900/40 p-2">
+      <h3 className="mb-2 flex items-center gap-1 text-[11px] font-semibold uppercase tracking-wider text-slate-400">
+        <ShieldCheck className="h-3 w-3" /> Checks
+      </h3>
+      {!run ? (
+        <p className="px-1 py-2 text-slate-500">
+          No CI run yet. Click <span className="text-amber-300">Run</span> from
+          the Console tab — the latest result will land here and grade any
+          required status checks.
+        </p>
+      ) : (
+        <ul className="space-y-1">
+          {run.jobs.map((j) => {
+            const isRequired = requiredByName.has(j.name);
+            return (
+              <li
+                key={j.name}
+                className="flex items-center justify-between rounded border border-slate-800/60 bg-slate-950/50 px-2 py-1"
+              >
+                <div className="flex items-center gap-2">
+                  <StatusDot status={j.status} />
+                  <span className="font-mono text-[11px] text-slate-200">
+                    {j.name}
+                  </span>
+                  {isRequired && (
+                    <span className="rounded bg-amber-500/15 px-1 py-px text-[9px] uppercase tracking-wider text-amber-200">
+                      Required
+                    </span>
+                  )}
+                </div>
+                <span className="text-[10px] text-slate-500">
+                  {labelForStatus(j.status)}
+                  {typeof j.durationMs === "number" &&
+                    ` · ${(j.durationMs / 1000).toFixed(1)}s`}
+                </span>
+              </li>
+            );
+          })}
+        </ul>
+      )}
+      {checkStatuses.some((c) => c.status === "missing") && (
+        <p className="mt-2 rounded border border-amber-500/30 bg-amber-500/10 px-2 py-1 text-[10px] text-amber-200">
+          Some required checks have not been observed yet:{" "}
+          {checkStatuses
+            .filter((c) => c.status === "missing")
+            .map((c) => c.name)
+            .join(", ")}
+          .
+        </p>
+      )}
+    </section>
+  );
+}
+
+function StatusDot({ status }: { status: string }) {
+  if (status === "success") {
+    return (
+      <span className="inline-flex h-3.5 w-3.5 items-center justify-center rounded-full bg-emerald-500/20 text-emerald-300">
+        <Check className="h-2.5 w-2.5" />
+      </span>
+    );
+  }
+  if (status === "failed" || status === "cancelled") {
+    return (
+      <span className="inline-flex h-3.5 w-3.5 items-center justify-center rounded-full bg-red-500/20 text-red-300">
+        <X className="h-2.5 w-2.5" />
+      </span>
+    );
+  }
+  if (status === "skipped") {
+    return (
+      <span className="inline-block h-3.5 w-3.5 rounded-full border border-dashed border-slate-600" />
+    );
+  }
+  return (
+    <span className="inline-flex h-3.5 w-3.5 items-center justify-center text-amber-300">
+      <CircleDot className="h-3 w-3 animate-pulse" />
+    </span>
+  );
+}
+
+function labelForStatus(s: string): string {
+  switch (s) {
+    case "success":
+      return "Passed";
+    case "failed":
+      return "Failed";
+    case "cancelled":
+      return "Cancelled";
+    case "skipped":
+      return "Skipped";
+    case "running":
+      return "In progress";
+    default:
+      return s;
+  }
+}
+
+// ─── Rulesets summary (read-only) ──────────────────────────────────────
+//
+// On real github.com the PR sidebar shows a tiny summary of which
+// rulesets gate the merge; editing happens in Settings → Rules. We
+// mirror that split: this component renders effective rules and links
+// out to Settings.
+
+function RulesetsSummary({
+  merge,
+  onOpenRulesets,
+}: {
+  merge: MergeabilityResult;
+  onOpenRulesets?: () => void;
+}) {
+  const { appliedRulesets, effectiveRules, informationalNotes } = merge;
+  return (
+    <>
+      {appliedRulesets.length === 0 ? (
+        <p className="text-[11px] text-slate-500">
+          No rulesets target this branch — anyone with write access can merge.
+        </p>
+      ) : (
+        <ul className="space-y-1">
+          {appliedRulesets.map((rs) => (
+            <li
+              key={rs.id}
+              className="rounded border border-slate-800/60 bg-slate-950/50 p-1.5"
+            >
+              <div className="flex items-center gap-1 text-[11px]">
+                <Shield className="h-3 w-3 text-amber-300" />
+                <span className="truncate text-slate-200">{rs.name}</span>
+                <RulesetEnforcementBadge enforcement={rs.enforcement} />
+              </div>
+              {rs.targetInclude.length > 0 && (
+                <div className="mt-0.5 flex items-center gap-1 text-[10px] text-slate-500">
+                  <GitBranch className="h-2.5 w-2.5" />
+                  {rs.targetInclude.join(", ")}
+                </div>
+              )}
+            </li>
+          ))}
+        </ul>
+      )}
+      <EffectiveRulesList rules={effectiveRules} />
+      {informationalNotes.length > 0 && (
+        <div className="mt-2 space-y-1">
+          {informationalNotes.map((n) => (
+            <p
+              key={n}
+              className="flex items-start gap-1 text-[10px] text-slate-500"
+            >
+              <Info className="mt-0.5 h-2.5 w-2.5 shrink-0" />
+              <span>{n}</span>
+            </p>
+          ))}
+        </div>
+      )}
+      {onOpenRulesets && (
+        <button
+          onClick={onOpenRulesets}
+          className="mt-2 w-full rounded border border-slate-700 px-2 py-1 text-[11px] text-slate-300 hover:border-amber-500/40 hover:text-amber-200"
+        >
+          Edit in Settings → Rulesets
+        </button>
+      )}
+    </>
+  );
+}
+
+function RulesetEnforcementBadge({
+  enforcement,
+}: {
+  enforcement: GithubLabRuleset["enforcement"];
+}) {
+  if (enforcement === "active") {
+    return (
+      <span className="rounded bg-emerald-500/15 px-1 py-px text-[9px] uppercase tracking-wider text-emerald-300">
+        Active
+      </span>
+    );
+  }
+  if (enforcement === "evaluate") {
+    return (
+      <span className="rounded bg-amber-500/15 px-1 py-px text-[9px] uppercase tracking-wider text-amber-200">
+        Evaluate
+      </span>
+    );
+  }
+  return (
+    <span className="rounded bg-slate-700/40 px-1 py-px text-[9px] uppercase tracking-wider text-slate-400">
+      Disabled
+    </span>
+  );
+}
+
+function EffectiveRulesList({ rules }: { rules: GithubLabRulesetRules }) {
+  const lines: string[] = [];
+  if (rules.pullRequest) {
+    lines.push(
+      `PR required → ${rules.pullRequest.requiredApprovingReviewCount} approval${
+        rules.pullRequest.requiredApprovingReviewCount === 1 ? "" : "s"
+      }${rules.pullRequest.requireCodeOwnerReview ? " + code owners" : ""}`,
+    );
+  }
+  if (rules.statusChecks && rules.statusChecks.checks.length > 0) {
+    lines.push(
+      `Status checks: ${rules.statusChecks.checks.join(", ")}${
+        rules.statusChecks.strict ? " (strict)" : ""
+      }`,
+    );
+  }
+  if (rules.requireDeployments) {
+    lines.push(
+      `Deploys required: ${rules.requireDeployments.environments.join(", ")}`,
+    );
+  }
+  if (lines.length === 0) return null;
+  return (
+    <div className="mt-2 rounded border border-slate-800/60 bg-slate-950/40 p-1.5">
+      <div className="mb-0.5 text-[9px] uppercase tracking-wider text-slate-500">
+        Effective rules
+      </div>
+      <ul className="space-y-0.5 text-[10px] text-slate-300">
+        {lines.map((l) => (
+          <li key={l}>{l}</li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+// ─── Review composer ───────────────────────────────────────────────────
+//
+// The composer mirrors the github.com "Finish your review" tray. We
+// force the author to be someone other than the viewer (you can't
+// review your own PR), which makes the "Reviewing as @other" workflow
+// explicit. Submitting builds an immutable review row that lands in
+// the timeline below.
+
+function ReviewComposer({
+  org,
+  onSubmit,
+}: {
+  org: GithubLabOrg;
+  onSubmit: (r: Omit<GithubLabReview, "id" | "createdAt">) => void;
+}) {
+  // Default to a non-viewer reviewer so users don't have to switch
+  // identities just to leave a review.
+  const defaultAuthor =
+    org.users.find((u) => u.toLowerCase() !== org.viewerLogin.toLowerCase()) ??
+    org.viewerLogin;
+  const [author, setAuthor] = useState(defaultAuthor);
+  const [state, setState] = useState<GithubLabReview["state"]>("approved");
+  const [body, setBody] = useState("");
+
+  const isViewer = author.toLowerCase() === org.viewerLogin.toLowerCase();
+
+  const submit = () => {
+    if (isViewer) return;
+    onSubmit({
+      author,
+      state,
+      ...(body.trim() ? { body: body.trim() } : {}),
+    });
+    setBody("");
+  };
+
+  return (
+    <section className="mb-3 rounded-xl border border-slate-800/60 bg-slate-900/40 p-2">
+      <h3 className="mb-2 flex items-center gap-1 text-[11px] font-semibold uppercase tracking-wider text-slate-400">
+        <MessageSquare className="h-3 w-3" /> Leave a review
+      </h3>
+      <div className="mb-2 flex items-center gap-2">
+        <span className="text-[10px] text-slate-500">Reviewing as</span>
+        <select
+          value={author}
+          onChange={(e) => setAuthor(e.target.value)}
+          className="rounded border border-slate-700 bg-slate-900 px-1 py-0.5 text-[11px]"
+        >
+          {org.users.map((u) => (
+            <option key={u} value={u}>
+              @{u}
+              {u.toLowerCase() === org.viewerLogin.toLowerCase()
+                ? " (you)"
+                : ""}
+            </option>
+          ))}
+        </select>
+      </div>
+      <textarea
+        value={body}
+        onChange={(e) => setBody(e.target.value)}
+        placeholder="Leave a comment (optional)"
+        rows={3}
+        className="w-full resize-y rounded border border-slate-800 bg-slate-950 p-1.5 text-[11px] text-slate-200 outline-none focus:border-amber-500/40"
+      />
+      <div className="mt-2 grid grid-cols-3 gap-1 text-[11px]">
+        {[
+          {
+            value: "commented" as const,
+            label: "Comment",
+            hint: "no approval, no block",
+          },
+          {
+            value: "approved" as const,
+            label: "Approve",
+            hint: "counts toward required reviews",
+          },
+          {
+            value: "changes_requested" as const,
+            label: "Request changes",
+            hint: "blocks merge",
+          },
+        ].map((opt) => (
+          <label
+            key={opt.value}
+            className={`flex flex-col items-start gap-0.5 rounded border p-1.5 cursor-pointer ${
+              state === opt.value
+                ? "border-amber-500/40 bg-amber-500/10"
+                : "border-slate-800 hover:bg-slate-800/40"
+            }`}
+          >
+            <span className="flex items-center gap-1">
+              <input
+                type="radio"
+                checked={state === opt.value}
+                onChange={() => setState(opt.value)}
+                className="accent-amber-500"
+              />
+              <span className="text-slate-200">{opt.label}</span>
+            </span>
+            <span className="text-[10px] text-slate-500">{opt.hint}</span>
+          </label>
+        ))}
+      </div>
+      <div className="mt-2 flex items-center justify-between">
+        {isViewer ? (
+          <span className="text-[10px] text-amber-300">
+            You can't review your own pull request — pick another reviewer
+            above.
+          </span>
+        ) : (
+          <span className="text-[10px] text-slate-500">
+            Submitting as <span className="text-slate-300">@{author}</span>
+          </span>
+        )}
+        <button
+          onClick={submit}
+          disabled={isViewer}
+          className="rounded bg-emerald-600 px-2 py-1 text-[11px] font-medium text-white hover:bg-emerald-500 disabled:bg-slate-800 disabled:text-slate-500 disabled:cursor-not-allowed"
+        >
+          Submit review
+        </button>
+      </div>
+    </section>
+  );
+}
+
+// ─── Review timeline ───────────────────────────────────────────────────
+//
+// Shows every review (newest first). A review is "Superseded" when the
+// same author has a newer review of a kind that overrides it (matches
+// `latestReviewByAuthor` semantics in the evaluator).
+
+function ReviewTimeline({
+  reviews,
+  onDismiss,
+}: {
+  reviews: GithubLabReview[];
+  onDismiss: (id: string) => void;
+}) {
+  if (reviews.length === 0) {
+    return null;
+  }
+  const latestByAuthor = latestReviewByAuthor(reviews);
+  const sorted = [...reviews].sort(
+    (a, b) => Date.parse(b.createdAt) - Date.parse(a.createdAt),
+  );
+  return (
+    <section className="mb-3 rounded-xl border border-slate-800/60 bg-slate-900/40 p-2">
+      <h3 className="mb-2 text-[11px] font-semibold uppercase tracking-wider text-slate-400">
+        Reviews ({reviews.length})
+      </h3>
+      <ul className="space-y-1.5">
+        {sorted.map((r) => {
+          const isStale =
+            latestByAuthor.get(r.author.toLowerCase())?.id !== r.id;
+          return (
+            <li
+              key={r.id}
+              className={`rounded border border-slate-800/60 bg-slate-950/50 p-1.5 ${
+                isStale ? "opacity-50" : ""
+              }`}
+            >
+              <div className="flex items-center justify-between gap-2">
+                <div className="flex items-center gap-1.5 text-[11px]">
+                  <span className="text-amber-200">@{r.author}</span>
+                  <ReviewStateBadge state={r.state} />
+                  {isStale && (
+                    <span className="rounded bg-slate-800 px-1 py-px text-[9px] text-slate-500">
+                      Superseded
+                    </span>
+                  )}
+                </div>
+                <div className="flex items-center gap-2">
+                  <span className="text-[10px] text-slate-600">
+                    {timeAgo(r.createdAt)}
+                  </span>
+                  <button
+                    onClick={() => onDismiss(r.id)}
+                    className="text-slate-600 hover:text-red-300"
+                    title="Delete this review"
+                  >
+                    <Trash2 className="h-3 w-3" />
+                  </button>
+                </div>
+              </div>
+              {r.body && (
+                <p className="mt-1 whitespace-pre-wrap text-[11px] text-slate-300">
+                  {r.body}
+                </p>
+              )}
+            </li>
+          );
+        })}
+      </ul>
+    </section>
+  );
+}
+
+function ReviewStateBadge({ state }: { state: GithubLabReview["state"] }) {
+  if (state === "approved") {
+    return (
+      <span className="inline-flex items-center gap-1 rounded bg-emerald-500/15 px-1.5 py-px text-[10px] text-emerald-300">
+        <Check className="h-2.5 w-2.5" /> Approved
+      </span>
+    );
+  }
+  if (state === "changes_requested") {
+    return (
+      <span className="inline-flex items-center gap-1 rounded bg-red-500/15 px-1.5 py-px text-[10px] text-red-300">
+        <X className="h-2.5 w-2.5" /> Requested changes
+      </span>
+    );
+  }
+  return (
+    <span className="inline-flex items-center gap-1 rounded bg-slate-700/40 px-1.5 py-px text-[10px] text-slate-300">
+      <MessageSquare className="h-2.5 w-2.5" /> Commented
+    </span>
+  );
+}
+
+function timeAgo(iso: string): string {
+  const diff = Date.now() - Date.parse(iso);
+  if (Number.isNaN(diff) || diff < 0) return iso;
+  const s = Math.floor(diff / 1000);
+  if (s < 60) return `${s}s ago`;
+  const m = Math.floor(s / 60);
+  if (m < 60) return `${m}m ago`;
+  const h = Math.floor(m / 60);
+  if (h < 24) return `${h}h ago`;
+  return `${Math.floor(h / 24)}d ago`;
+}
+
+// ─── Sidebar helpers ───────────────────────────────────────────────────
+
+function SidebarSection({
+  title,
+  children,
+}: {
+  title: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <section className="mb-3">
+      <h4 className="mb-1.5 text-[10px] font-semibold uppercase tracking-wider text-slate-500">
+        {title}
+      </h4>
+      <div className="rounded border border-slate-800/60 bg-slate-900/40 p-2 text-[11px] text-slate-300">
+        {children}
+      </div>
+    </section>
+  );
+}
+
+function OrgEditor({
+  org,
+  onChange,
+}: {
+  org: GithubLabOrg;
+  onChange: (next: Partial<GithubLabOrg>) => void;
+}) {
+  const [newUser, setNewUser] = useState("");
+  const [newTeamSlug, setNewTeamSlug] = useState("");
+
+  const addUser = () => {
+    const u = newUser.trim();
+    if (!u || org.users.some((x) => x.toLowerCase() === u.toLowerCase()))
+      return;
+    onChange({ users: [...org.users, u] });
+    setNewUser("");
+  };
+
+  const removeUser = (login: string) => {
+    onChange({
+      users: org.users.filter((u) => u.toLowerCase() !== login.toLowerCase()),
+      teams: org.teams.map((t) => ({
+        ...t,
+        members: t.members.filter(
+          (m) => m.toLowerCase() !== login.toLowerCase(),
+        ),
+      })),
+    });
+  };
+
+  const addTeam = () => {
+    const slug = newTeamSlug
+      .trim()
+      .toLowerCase()
+      .replace(/[^a-z0-9-]/g, "-");
+    if (!slug || org.teams.some((t) => t.slug === slug)) return;
+    onChange({ teams: [...org.teams, { slug, members: [] }] });
+    setNewTeamSlug("");
+  };
+
+  const removeTeam = (slug: string) => {
+    onChange({ teams: org.teams.filter((t) => t.slug !== slug) });
+  };
+
+  const toggleTeamMember = (team: GithubLabTeam, login: string) => {
+    const has = team.members.some(
+      (m) => m.toLowerCase() === login.toLowerCase(),
+    );
+    const members = has
+      ? team.members.filter((m) => m.toLowerCase() !== login.toLowerCase())
+      : [...team.members, login];
+    onChange({
+      teams: org.teams.map((t) =>
+        t.slug === team.slug ? { ...t, members } : t,
+      ),
+    });
+  };
+
+  return (
+    <div className="space-y-2">
+      <div>
+        <div className="mb-1 text-[10px] uppercase tracking-wider text-slate-500">
+          You are
+        </div>
+        <select
+          value={org.viewerLogin}
+          onChange={(e) => onChange({ viewerLogin: e.target.value })}
+          className="w-full rounded border border-slate-700 bg-slate-900 px-1 py-0.5"
+        >
+          {org.users.map((u) => (
+            <option key={u} value={u}>
+              @{u}
+            </option>
+          ))}
+        </select>
+      </div>
+
+      <div>
+        <div className="mb-1 text-[10px] uppercase tracking-wider text-slate-500">
+          Users
+        </div>
+        <div className="flex flex-wrap gap-1">
+          {org.users.map((u) => (
+            <span
+              key={u}
+              className="inline-flex items-center gap-1 rounded bg-slate-800 px-1.5 py-0.5 text-[10px]"
+            >
+              @{u}
+              <button
+                onClick={() => removeUser(u)}
+                className="text-slate-500 hover:text-red-300"
+                title={`Remove @${u}`}
+              >
+                <Trash2 className="h-2.5 w-2.5" />
+              </button>
+            </span>
+          ))}
+        </div>
+        <div className="mt-1 flex items-center gap-1">
+          <input
+            value={newUser}
+            onChange={(e) => setNewUser(e.target.value)}
+            onKeyDown={(e) => e.key === "Enter" && addUser()}
+            placeholder="login"
+            className="flex-1 rounded border border-slate-700 bg-slate-900 px-1 py-0.5 text-[11px]"
+          />
+          <button
+            onClick={addUser}
+            className="rounded bg-slate-800 px-1.5 py-0.5 text-slate-300 hover:bg-slate-700"
+          >
+            <Plus className="h-3 w-3" />
+          </button>
+        </div>
+      </div>
+
+      <div>
+        <div className="mb-1 text-[10px] uppercase tracking-wider text-slate-500">
+          Teams
+        </div>
+        {org.teams.map((t) => (
+          <div
+            key={t.slug}
+            className="mb-1 rounded border border-slate-800/60 bg-slate-950/50 p-1.5"
+          >
+            <div className="flex items-center justify-between">
+              <span className="text-amber-200">
+                @{org.slug}/{t.slug}
+              </span>
+              <button
+                onClick={() => removeTeam(t.slug)}
+                className="text-slate-500 hover:text-red-300"
+                title="Remove team"
+              >
+                <Trash2 className="h-3 w-3" />
+              </button>
+            </div>
+            <div className="mt-1 flex flex-wrap gap-0.5">
+              {org.users.map((u) => {
+                const isMember = t.members.some(
+                  (m) => m.toLowerCase() === u.toLowerCase(),
+                );
+                return (
+                  <button
+                    key={u}
+                    onClick={() => toggleTeamMember(t, u)}
+                    className={`rounded px-1 py-0.5 text-[10px] ${
+                      isMember
+                        ? "bg-amber-500/20 text-amber-200"
+                        : "bg-slate-800 text-slate-500 hover:bg-slate-700"
+                    }`}
+                  >
+                    {u}
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+        ))}
+        <div className="mt-1 flex items-center gap-1">
+          <input
+            value={newTeamSlug}
+            onChange={(e) => setNewTeamSlug(e.target.value)}
+            onKeyDown={(e) => e.key === "Enter" && addTeam()}
+            placeholder="team-slug"
+            className="flex-1 rounded border border-slate-700 bg-slate-900 px-1 py-0.5 text-[11px]"
+          />
+          <button
+            onClick={addTeam}
+            className="rounded bg-slate-800 px-1.5 py-0.5 text-slate-300 hover:bg-slate-700"
+          >
+            <Plus className="h-3 w-3" />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}