@mndrk/agx 2.4.4 → 2.4.6

package/cloud-runtime/standalone/apps/local/app/projects/[slug]/prs/page.tsx

@@ -0,0 +1,299 @@
+"use client";
+
+import { use, useCallback, useEffect, useMemo, useState } from "react";
+import type { GithubPr, GithubRepo } from "@/lib/github-types";
+import { useProjectsWithAgents } from "@/hooks/useProjects";
+import { PrComposerPanel } from "@/components/prs/PrComposerPanel";
+
+type QuickFilter = "all" | "mine" | "awaiting_review";
+
+interface ApiResponse {
+  prs: GithubPr[];
+  repos: GithubRepo[];
+}
+
+const DEV_MODE = process.env.NODE_ENV !== "production";
+// Hardcoded default for the skeleton — real auth will supply this later.
+const DEFAULT_AUTHOR_LOGIN = "mendrika";
+
+function statePillClasses(pr: GithubPr): string {
+  if (pr.state === "merged")
+    return "bg-purple-500/15 text-purple-400 border-purple-500/30";
+  if (pr.state === "closed")
+    return "bg-red-500/15 text-red-400 border-red-500/30";
+  if (pr.draft)
+    return "bg-neutral-500/15 text-neutral-400 border-neutral-500/30";
+  return "bg-green-500/15 text-green-400 border-green-500/30";
+}
+
+function stateLabel(pr: GithubPr): string {
+  if (pr.state === "merged") return "Merged";
+  if (pr.state === "closed") return "Closed";
+  if (pr.draft) return "Draft";
+  return "Open";
+}
+
+function ciIcon(status: GithubPr["ciStatus"]): { symbol: string; color: string } {
+  if (status === "success") return { symbol: "✓", color: "text-green-500" };
+  if (status === "failure") return { symbol: "✗", color: "text-red-500" };
+  if (status === "pending") return { symbol: "●", color: "text-amber-500" };
+  return { symbol: "—", color: "text-neutral-500" };
+}
+
+function formatRelative(ts: number): string {
+  const diff = Date.now() - ts;
+  const min = Math.floor(diff / 60000);
+  if (min < 1) return "just now";
+  if (min < 60) return `${min}m ago`;
+  const hr = Math.floor(min / 60);
+  if (hr < 24) return `${hr}h ago`;
+  const d = Math.floor(hr / 24);
+  return `${d}d ago`;
+}
+
+export default function ProjectPrsPage({
+  params,
+}: {
+  params: Promise<{ slug: string }>;
+}) {
+  const { slug } = use(params);
+  const { projects } = useProjectsWithAgents();
+  const currentProjectId = useMemo(
+    () => projects.find((p) => p.slug === slug)?.id,
+    [projects, slug],
+  );
+
+  const [prs, setPrs] = useState<GithubPr[]>([]);
+  const [repos, setRepos] = useState<GithubRepo[]>([]);
+  const [quickFilter, setQuickFilter] = useState<QuickFilter>("all");
+  const [repoId, setRepoId] = useState<string>("");
+  const [loading, setLoading] = useState<boolean>(false);
+  const [error, setError] = useState<string | null>(null);
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const [seeding, setSeeding] = useState<boolean>(false);
+
+  const fetchPrs = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const qs = new URLSearchParams();
+      qs.set("quickFilter", quickFilter);
+      qs.set("authorLogin", DEFAULT_AUTHOR_LOGIN);
+      if (repoId) qs.set("repoId", repoId);
+      const res = await fetch(`/api/github/prs?${qs.toString()}`);
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+      const data = (await res.json()) as ApiResponse;
+      setPrs(data.prs);
+      setRepos(data.repos);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setLoading(false);
+    }
+  }, [quickFilter, repoId]);
+
+  useEffect(() => {
+    void fetchPrs();
+  }, [fetchPrs]);
+
+  const handleSeed = useCallback(async () => {
+    setSeeding(true);
+    try {
+      const res = await fetch("/api/github/prs/seed", { method: "POST" });
+      if (!res.ok) throw new Error(`Seed failed: HTTP ${res.status}`);
+      await fetchPrs();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setSeeding(false);
+    }
+  }, [fetchPrs]);
+
+  const selectedPr = useMemo(
+    () => prs.find((p) => p.id === selectedId) ?? null,
+    [prs, selectedId],
+  );
+
+  return (
+    <div className="flex h-full min-h-0 w-full flex-col bg-[var(--app-shell-pane,#0f1115)] text-neutral-200">
+      {/* Header */}
+      <div className="flex items-center justify-between border-b border-neutral-800 px-4 py-3">
+        <h1 className="text-lg font-semibold">Pull Requests</h1>
+        {DEV_MODE && (
+          <button
+            type="button"
+            onClick={handleSeed}
+            disabled={seeding}
+            className="rounded border border-neutral-700 bg-neutral-800 px-2.5 py-1 text-xs text-neutral-200 hover:bg-neutral-700 disabled:opacity-50"
+          >
+            {seeding ? "Seeding…" : "Seed demo data"}
+          </button>
+        )}
+      </div>
+
+      {/* Filter bar */}
+      <div className="flex items-center gap-2 border-b border-neutral-800 px-4 py-2">
+        <div className="flex items-center gap-1">
+          {(
+            [
+              ["all", "All"],
+              ["mine", "My PRs"],
+              ["awaiting_review", "Awaiting my review"],
+            ] as [QuickFilter, string][]
+          ).map(([val, label]) => (
+            <button
+              key={val}
+              type="button"
+              onClick={() => setQuickFilter(val)}
+              className={`rounded px-2.5 py-1 text-xs ${
+                quickFilter === val
+                  ? "bg-neutral-700 text-white"
+                  : "text-neutral-400 hover:bg-neutral-800"
+              }`}
+            >
+              {label}
+            </button>
+          ))}
+        </div>
+        <div className="ml-auto">
+          <select
+            value={repoId}
+            onChange={(e) => setRepoId(e.target.value)}
+            className="rounded border border-neutral-700 bg-neutral-900 px-2 py-1 text-xs text-neutral-200"
+          >
+            <option value="">All repos</option>
+            {repos.map((r) => (
+              <option key={r.id} value={r.id}>
+                {r.id}
+              </option>
+            ))}
+          </select>
+        </div>
+      </div>
+
+      {/* Body: list + detail */}
+      <div className="flex min-h-0 flex-1">
+        {/* List */}
+        <div className="flex min-w-0 flex-1 flex-col overflow-y-auto">
+          {loading && prs.length === 0 && (
+            <div className="px-4 py-6 text-sm text-neutral-500">Loading…</div>
+          )}
+          {error && (
+            <div className="px-4 py-6 text-sm text-red-400">Error: {error}</div>
+          )}
+          {!loading && !error && prs.length === 0 && (
+            <div className="px-4 py-6 text-sm text-neutral-500">
+              No pull requests.{" "}
+              {DEV_MODE && "Click \u201cSeed demo data\u201d to populate."}
+            </div>
+          )}
+          {prs.map((pr) => {
+            const repo = repos.find((r) => r.id === pr.repoId);
+            const ci = ciIcon(pr.ciStatus);
+            const isSelected = pr.id === selectedId;
+            return (
+              <button
+                type="button"
+                key={pr.id}
+                onClick={() => setSelectedId(pr.id)}
+                className={`flex flex-col gap-0.5 border-b border-neutral-800/60 px-4 py-2 text-left text-sm hover:bg-neutral-800/50 ${
+                  isSelected ? "bg-neutral-800/70" : ""
+                }`}
+              >
+                <div className="flex items-center gap-2">
+                  <span className="truncate font-mono text-xs text-neutral-500">
+                    {repo ? `${repo.owner}/${repo.name}` : pr.repoId}#{pr.number}
+                  </span>
+                  <span
+                    className={`rounded border px-1.5 py-0.5 text-[10px] uppercase tracking-wide ${statePillClasses(pr)}`}
+                  >
+                    {stateLabel(pr)}
+                  </span>
+                  <span className={`text-xs ${ci.color}`} title={`CI: ${pr.ciStatus ?? "none"}`}>
+                    {ci.symbol}
+                  </span>
+                </div>
+                <div className="truncate text-neutral-100">{pr.title}</div>
+                <div className="flex items-center gap-2 text-[11px] text-neutral-500">
+                  <span>@{pr.authorLogin}</span>
+                  <span>·</span>
+                  <span>{formatRelative(pr.updatedAt)}</span>
+                </div>
+              </button>
+            );
+          })}
+        </div>
+
+        {/* Detail panel */}
+        <div className="hidden w-[380px] shrink-0 flex-col border-l border-neutral-800 md:flex">
+          {selectedPr ? (
+            <>
+              <div className="flex shrink-0 flex-col gap-3 border-b border-neutral-800 p-4 text-sm">
+                <div className="flex items-center gap-2">
+                  <span className="font-mono text-xs text-neutral-500">
+                    {selectedPr.repoId}#{selectedPr.number}
+                  </span>
+                  <span
+                    className={`rounded border px-1.5 py-0.5 text-[10px] uppercase tracking-wide ${statePillClasses(selectedPr)}`}
+                  >
+                    {stateLabel(selectedPr)}
+                  </span>
+                  <span
+                    className={`text-xs ${ciIcon(selectedPr.ciStatus).color}`}
+                  >
+                    {ciIcon(selectedPr.ciStatus).symbol}
+                  </span>
+                </div>
+                <div className="text-base font-semibold text-neutral-100">
+                  {selectedPr.title}
+                </div>
+                <div className="whitespace-pre-wrap text-xs text-neutral-400">
+                  {selectedPr.body.length > 500
+                    ? selectedPr.body.slice(0, 500) + "…"
+                    : selectedPr.body || "(no description)"}
+                </div>
+                <div>
+                  <div className="text-[11px] uppercase tracking-wide text-neutral-500">
+                    Reviewers
+                  </div>
+                  {selectedPr.reviewers.length === 0 ? (
+                    <div className="text-xs text-neutral-500">None</div>
+                  ) : (
+                    <ul className="mt-1 flex flex-col gap-0.5">
+                      {selectedPr.reviewers.map((r) => (
+                        <li
+                          key={r.login}
+                          className="flex items-center justify-between text-xs"
+                        >
+                          <span>@{r.login}</span>
+                          <span className="text-neutral-500">{r.state}</span>
+                        </li>
+                      ))}
+                    </ul>
+                  )}
+                </div>
+                <a
+                  href={selectedPr.url}
+                  target="_blank"
+                  rel="noreferrer"
+                  className="inline-block self-start rounded border border-neutral-700 bg-neutral-800 px-2.5 py-1 text-xs hover:bg-neutral-700"
+                >
+                  Open on GitHub ↗
+                </a>
+              </div>
+              <PrComposerPanel
+                pr={selectedPr}
+                projectId={currentProjectId}
+                projectSlug={slug}
+              />
+            </>
+          ) : (
+            <div className="flex h-full items-center justify-center p-4 text-xs text-neutral-500">
+              Select a PR to see details.
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/cloud-runtime/standalone/apps/local/app/projects/[slug]/teams/[teamId]/page.tsx

@@ -66,7 +66,7 @@ export default function TeamDetailPage({
 
   // Add agent
   const [showAddAgent, setShowAddAgent] = useState(false);
-  const [addMode, setAddMode] = useState<"existing" | "preset">("existing");
+  const [addMode, setAddMode] = useState<"existing" | "preset" | "scratch">("existing");
   const [selectedPresetId, setSelectedPresetId] = useState<string | null>(null);
   const [selectedExistingId, setSelectedExistingId] = useState<string | null>(null);
   const [addingAgent, setAddingAgent] = useState(false);
@@ -444,9 +444,65 @@ export default function TeamDetailPage({
                 >
                   From Preset
                 </button>
+                <button
+                  onClick={() => setAddMode("scratch")}
+                  className={`text-xs font-medium px-3 py-1.5 rounded-lg transition-colors ${
+                    addMode === "scratch"
+                      ? "bg-[var(--primary)] text-white"
+                      : "bg-[var(--card-bg)] border border-[var(--border)] text-[var(--muted-foreground)]"
+                  }`}
+                >
+                  From Scratch
+                </button>
               </div>
 
-              {addMode === "existing" ? (
+              {addMode === "scratch" ? (
+                <AgentForm
+                  title="Create agent"
+                  initial={{ name: "", role: "", provider: "claude", model: "", identity: "", skills: [], skillBindings: [] }}
+                  submitLabel="Create & Add"
+                  onSubmit={async (data) => {
+                    if (!project) return;
+                    setAddingAgent(true);
+                    try {
+                      const createRes = await fetch("/api/participants", {
+                        method: "POST",
+                        headers: { "Content-Type": "application/json" },
+                        body: JSON.stringify({
+                          name: data.name,
+                          role: data.role || null,
+                          provider: data.provider,
+                          model: data.model || null,
+                          color: data.color,
+                          ...(data.identity ? { identity: data.identity } : {}),
+                          skills: data.skills ?? [],
+                          skillBindings: data.skillBindings ?? [],
+                        }),
+                      });
+                      if (!createRes.ok) throw new Error("Failed to create agent");
+                      const created = await createRes.json();
+                      const agentId = created.id ?? created.participant?.id;
+                      await fetch(`/api/projects/${project.id}/agents`, {
+                        method: "POST",
+                        headers: { "Content-Type": "application/json" },
+                        body: JSON.stringify({ agentId }),
+                      });
+                      await fetch(`/api/projects/${project.id}/teams/${teamId}/agents`, {
+                        method: "POST",
+                        headers: { "Content-Type": "application/json" },
+                        body: JSON.stringify({ agentId, roleKey: "member" }),
+                      });
+                      setShowAddAgent(false);
+                      await Promise.all([fetchTeam(), fetchParticipants()]);
+                    } catch {
+                      /* silent */
+                    } finally {
+                      setAddingAgent(false);
+                    }
+                  }}
+                  onCancel={() => setShowAddAgent(false)}
+                />
+              ) : addMode === "existing" ? (
                 <div className="space-y-3">
                   {existingAgentOptions.length === 0 ? (
                     <p className="text-xs text-[var(--muted-foreground)]">

package/cloud-runtime/standalone/apps/local/app/projects/[slug]/tracking/[tracker]/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { use } from "react";
+import { use, useEffect } from "react";
 import { useSearchParams } from "next/navigation";
 import { useProjects } from "@/hooks/useProjects";
 import TrackerBoard from "@/components/TrackerBoard";
@@ -8,6 +8,9 @@ import TrackerBoard from "@/components/TrackerBoard";
 /**
  * Tracker-specific board page.
  * Renders the tracker-agnostic TrackerBoard for any connected tracker type.
+ *
+ * For GitHub, the `?repo=owner/name` query param seeds the group filter
+ * and triggers a background sync (PRs + issues + task matching).
  */
 export default function ProjectTrackerPage({
   params,
@@ -19,6 +22,18 @@ export default function ProjectTrackerPage({
   const { projects } = useProjects();
   const project = projects.find((p) => p.slug === slug);
   const showSettings = searchParams.get("settings") === "true";
+  const repoId = tracker === "github" ? searchParams.get("repo") : null;
+
+  useEffect(() => {
+    if (tracker !== "github" || !repoId || !project?.id) return;
+    fetch("/api/github/repos/sync", {
+      method: "POST",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify({ projectId: project.id, repoId }),
+    }).catch(() => {
+      // Best-effort background sync; failure is surfaced via stale cache
+    });
+  }, [tracker, repoId, project?.id]);
 
   return (
     <TrackerBoard
@@ -26,6 +41,7 @@ export default function ProjectTrackerPage({
       projectId={project?.id}
       projectSlug={project?.slug ?? slug}
       initialShowSettings={showSettings}
+      initialGroupId={repoId ?? undefined}
     />
   );
 }

package/cloud-runtime/standalone/apps/local/app/projects/[slug]/tracking/connect/page.tsx

@@ -4,6 +4,7 @@ import { use, useState } from "react";
 import Link from "next/link";
 import { ArrowLeft, CheckCircle2, LogOut, Star } from "lucide-react";
 import TrackerSetup from "@/components/tracking/TrackerSetup";
+import { TaskIdentifierPrefix } from "@/components/tracking/TaskIdentifierPrefix";
 import { TrackerIcon } from "@/components/tracking/TrackerIcon";
 import { useProjects } from "@/hooks/useProjects";
 import { useTrackerConnection } from "@/hooks/useTrackerConnection";
@@ -12,6 +13,7 @@ import { useTrackerConnections } from "@/hooks/useTrackerConnections";
 const TRACKER_TYPES = [
   { type: "linear", label: "Linear" },
   { type: "jira", label: "Jira Cloud" },
+  { type: "github", label: "GitHub" },
 ] as const;
 
 function PickerSkeleton() {
@@ -109,18 +111,21 @@ export default function TrackingConnectPage({
                 {singleLoading ? (
                   <SetupSkeleton />
                 ) : (
-                  <TrackerSetup
-                    projectId={projectId}
-                    trackerType={selected}
-                    connected={singleConnected}
-                    loading={false}
-                    onConnect={connect}
-                    onConnectWithKey={connectWithKey}
-                    onDisconnect={() => { disconnect(); setSelected(null); }}
-                    clis={clis}
-                    mcpConfigured={mcpConfigured}
-                    onConfigureMcp={configureMcp}
-                  />
+                  <div className="space-y-4">
+                    <TrackerSetup
+                      projectId={projectId}
+                      trackerType={selected}
+                      connected={singleConnected}
+                      loading={false}
+                      onConnect={connect}
+                      onConnectWithKey={connectWithKey}
+                      onDisconnect={() => { disconnect(); setSelected(null); }}
+                      clis={clis}
+                      mcpConfigured={mcpConfigured}
+                      onConfigureMcp={configureMcp}
+                    />
+                    <TaskIdentifierPrefix projectId={projectId} trackerType={selected ?? undefined} />
+                  </div>
                 )}
               </div>
             </div>
@@ -140,19 +145,19 @@ export default function TrackingConnectPage({
               {TRACKER_TYPES.map((tracker) => {
                 const isAlreadyConnected = connectedTypes.has(tracker.type);
                 const isDefault = defaultTracker === tracker.type;
-                const canMakeDefault = isAlreadyConnected && connectedCount > 1 && !isDefault;
+                const canMakeDefault = isAlreadyConnected && connectedCount > 1 && !isDefault && tracker.type !== "github";
                 return (
                   <div
                     key={tracker.type}
                     className={
-                      "relative flex flex-col items-center gap-4 p-8 rounded-xl border transition-all duration-200 group " +
+                      "relative flex flex-col items-center gap-4 p-8 rounded-xl border transition-all duration-200 group cursor-pointer active:scale-[0.98] " +
                       (isAlreadyConnected
                         ? (isDefault
-                            ? "border-yellow-500/40 bg-yellow-500/5"
-                            : "border-green-500/20 bg-green-500/5")
-                        : "border-border hover:border-primary/50 hover:bg-accent/50 hover:shadow-md cursor-pointer active:scale-[0.98]")
+                            ? "border-yellow-500/40 bg-yellow-500/5 hover:border-yellow-500/60 hover:bg-yellow-500/10"
+                            : "border-green-500/20 bg-green-500/5 hover:border-green-500/40 hover:bg-green-500/10")
+                        : "border-border hover:border-primary/50 hover:bg-accent/50 hover:shadow-md")
                     }
-                    onClick={() => !isAlreadyConnected && setSelected(tracker.type)}
+                    onClick={() => setSelected(tracker.type)}
                   >
                     <div className="relative">
                       <TrackerIcon trackerType={tracker.type} className="h-16 w-16 transition-transform group-hover:scale-105" />

package/cloud-runtime/standalone/apps/local/components/GraphDetailSidebar.tsx

@@ -138,7 +138,7 @@ export default function GraphDetailSidebar({ graph, task, style, className, task
       {/* Task Properties */}
       <SidebarSection title="Task" collapsed={collapsed["task"]} onToggle={() => toggle("task")}>
         <div className="text-xs space-y-1.5">
-          <PropRow label="ID" value={task.slug || task.id.slice(0, 8)} mono />
+          <PropRow label="ID" value={task.identifier || task.slug || task.id.slice(0, 8)} mono />
           <PropRow label="Stage" value={task.stage || "N/A"} />
           <PropRow label="Status" value={task.status || "queued"} />
           <PropRow label="Created" value={formatTimestamp(task.created_at)} />