@mndrk/agx 2.4.4 → 2.4.5

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]/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)} />

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

@@ -113,6 +113,10 @@ function promptTarget(prompt: string): string {
   return firstLine.replace(/^execute\s+/i, "");
 }
 
+export function hasActivePromptRun(runs: PromptRun[]): boolean {
+  return runs.some((run) => run.status === "queued" || run.status === "running");
+}
+
 function stateDotClass(state: PromptJob["state"]): string {
   if (state === "active") return "bg-emerald-400";
   if (state === "paused") return "bg-amber-400";
@@ -1000,7 +1004,7 @@ function JobDetailView({
   }, [replaceSelection, runs, runsLoaded, selectedRunId]);
 
   const selectedRun = runs.find((r) => r.id === selectedRunId) ?? null;
-  const isRunning = job.lastOutcome === "running";
+  const hasActiveRun = hasActivePromptRun(runs);
   const scheduleLabel =
     (job.cronExpr && cronToHuman(job.cronExpr)) || job.cadence || job.cronExpr;
   const targetLabel = promptTarget(job.prompt);
@@ -1040,7 +1044,7 @@ function JobDetailView({
                 </button>
                 <button
                   onClick={onRunNow}
-                  disabled={isRunning}
+                  disabled={hasActiveRun}
                   title="Run now"
                   className="rounded-md border border-[var(--card-border)] p-1.5 text-[var(--muted-foreground)] transition-colors hover:border-[var(--foreground)] hover:text-[var(--foreground)] disabled:opacity-50"
                 >
@@ -1055,8 +1059,9 @@ function JobDetailView({
                 </button>
                 <button
                   onClick={onDelete}
-                  title="Delete"
-                  className="p-1.5 rounded-md border border-[var(--card-border)] text-[var(--muted-foreground)] hover:text-red-400 hover:border-red-400/30 transition-colors"
+                  disabled={hasActiveRun}
+                  title={hasActiveRun ? "Cancel the live run before deleting this task" : "Delete"}
+                  className="p-1.5 rounded-md border border-[var(--card-border)] text-[var(--muted-foreground)] transition-colors hover:text-red-400 hover:border-red-400/30 disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:border-[var(--card-border)] disabled:hover:text-[var(--muted-foreground)]"
                 >
                   <Trash2 size={12} />
                 </button>
@@ -1186,7 +1191,7 @@ function JobDetailView({
 
               <div className="border-t border-[var(--card-border)] px-6 py-4">
                 <div className="flex flex-wrap items-center gap-2">
-                  {isRunning ? (
+                  {hasActiveRun ? (
                     <button
                       onClick={onCancelRun}
                       className="inline-flex items-center gap-1.5 rounded-md border border-red-400/30 px-2.5 py-1 text-[10px] font-bold uppercase tracking-[0.05em] text-red-400 transition-colors hover:bg-red-500/10"
@@ -1194,6 +1199,11 @@ function JobDetailView({
                       Cancel run
                     </button>
                   ) : null}
+                  {hasActiveRun ? (
+                    <span className="text-[11px] text-amber-300">
+                      Delete is blocked while a run is queued or running. Cancel the live run first.
+                    </span>
+                  ) : null}
                   {job.condition ? (
                     <span className="rounded-md border border-blue-400/20 bg-blue-500/10 px-2 py-1 text-[10px] font-semibold uppercase tracking-wider text-blue-400">
                       gated
@@ -1356,13 +1366,16 @@ export default function PromptJobBoard({
   };
 
   const handleDelete = async (id: string) => {
-    const ok = await deleteJob(id);
-    if (ok) {
+    const result = await deleteJob(id);
+    if (result.ok) {
       if (selectedId === id) {
         pushSelection({ job: null, run: null });
       }
       showToast("Job deleted");
+      return;
     }
+
+    showToast(result.error ?? "Failed to delete scheduled task");
   };
 
   const handleCancelRun = async (id: string) => {
@@ -1676,7 +1689,7 @@ export default function PromptJobBoard({
       <ConfirmDialog
         isOpen={Boolean(deleteTarget)}
         title="Delete scheduled task?"
-        message="This permanently removes the task and all its run history. This cannot be undone."
+        message="This permanently removes the task and all of its run history. Delete is only allowed when no run is queued or running."
         preview={deleteTarget?.name}
         confirmLabel="Delete"
         variant="danger"

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

@@ -14,6 +14,7 @@ export interface Task {
   content: string;
   description?: string;
   title?: string;
+  identifier?: string | null;
   status?: TaskStatus;
   stage?: TaskStage;
   depends_on?: string[];
@@ -166,6 +167,11 @@ export default function TaskCard({
         <h3 className={`text-sm font-medium text-[var(--foreground)] leading-snug line-clamp-2 sm:line-clamp-3
           ${task.status === 'completed' ? 'text-[var(--muted-foreground)] line-through' : ''}
         `}>
+          {task.identifier ? (
+            <span className="mr-1.5 inline-block rounded bg-[var(--secondary)] px-1.5 py-0.5 align-middle font-mono text-[10px] font-semibold uppercase tracking-wide text-[var(--muted-foreground)]">
+              {task.identifier}
+            </span>
+          ) : null}
           {task.title || "Untitled Task"}
         </h3>
 
@@ -211,7 +217,7 @@ export default function TaskCard({
               </span>
             )
           )}
-          {task.id !== 'draft' && (
+          {task.id !== 'draft' && !task.identifier && (
             <span className="opacity-0 group-hover:opacity-100 transition-opacity font-mono text-[9px]">
               {task.id.slice(0, 5)}
             </span>