@mndrk/agx 2.4.10 → 2.4.11

package/cloud-runtime/standalone/apps/local/components/prs/review/PrReviewView.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import type {
+  GithubPr,
+  GithubPrFile,
+  GithubPrComment,
+} from "@/lib/github-types";
+import { ReviewLayout } from "./ReviewLayout";
+
+interface DetailResponse {
+  pr: GithubPr;
+  files: GithubPrFile[];
+  comments: GithubPrComment[];
+}
+
+interface Props {
+  prId: string;
+  rightPane?: React.ReactNode;
+}
+
+export function PrReviewView({ prId, rightPane }: Props) {
+  const [data, setData] = useState<DetailResponse | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    setData(null);
+    setError(null);
+    (async () => {
+      try {
+        const res = await fetch(`/api/github/prs/${encodeURIComponent(prId)}`);
+        if (!res.ok) throw new Error(`HTTP ${res.status}`);
+        const body = (await res.json()) as DetailResponse;
+        if (!cancelled) setData(body);
+      } catch (err) {
+        if (!cancelled)
+          setError(err instanceof Error ? err.message : String(err));
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [prId]);
+
+  if (error) {
+    return (
+      <div className="flex h-full items-center justify-center p-6 text-sm text-red-400">
+        Failed to load PR: {error}
+      </div>
+    );
+  }
+  if (!data) {
+    return (
+      <div className="flex h-full items-center justify-center p-6 text-sm text-neutral-500">
+        Loading…
+      </div>
+    );
+  }
+  return (
+    <ReviewLayout
+      pr={data.pr}
+      files={data.files}
+      comments={data.comments}
+      rightPane={rightPane}
+    />
+  );
+}

package/cloud-runtime/standalone/apps/local/components/prs/review/ReviewLayout.tsx

@@ -0,0 +1,148 @@
+// apps/local/components/prs/review/ReviewLayout.tsx
+"use client";
+
+import React, { useEffect, useMemo, useState } from "react";
+import type {
+  GithubPr,
+  GithubPrFile,
+  GithubPrComment,
+} from "@/lib/github-types";
+import { TopBar } from "./TopBar";
+import { FilesPane } from "./FilesPane";
+import { DiffPane } from "./DiffPane";
+import { CommitRail } from "./CommitRail";
+import { StatusBar } from "./StatusBar";
+import { ResizeHandle } from "@/components/ui/ResizeHandle";
+import {
+  loadPrReviewFilesPaneWidth,
+  loadPrReviewRightPaneWidth,
+  persistPrReviewFilesPaneWidth,
+  persistPrReviewRightPaneWidth,
+} from "@/state/windowState";
+import styles from "./review.module.css";
+
+interface Props {
+  pr: GithubPr;
+  files: GithubPrFile[];
+  comments: GithubPrComment[];
+  rightPane?: React.ReactNode;
+  header?: React.ReactNode;
+  statusBar?: React.ReactNode;
+}
+
+export function ReviewLayout({
+  pr,
+  files,
+  comments,
+  rightPane,
+  header,
+  statusBar,
+}: Props) {
+  const [selected, setSelected] = useState<string | null>(
+    files[0]?.path ?? null,
+  );
+  const [filesWidth, setFilesWidth] = useState(300);
+  const [rightWidth, setRightWidth] = useState(380);
+
+  useEffect(() => {
+    setFilesWidth(loadPrReviewFilesPaneWidth() || 300);
+    setRightWidth(loadPrReviewRightPaneWidth() || 380);
+  }, []);
+
+  const selectedFile =
+    files.find((f) => f.path === selected) ?? files[0] ?? null;
+
+  const totals = useMemo(
+    () =>
+      files.reduce(
+        (acc, f) => ({
+          a: acc.a + f.additions,
+          d: acc.d + f.deletions,
+        }),
+        { a: 0, d: 0 },
+      ),
+    [files],
+  );
+
+  const right = rightPane ?? (
+    <CommitRail
+      pr={pr}
+      fileCount={files.length}
+      totalAdditions={totals.a}
+      totalDeletions={totals.d}
+    />
+  );
+
+  return (
+    <div className={styles.root}>
+      <div className={styles.reviewBody}>
+        <div className={styles.leftCol}>
+          {header ?? <TopBar pr={pr} />}
+          <div className={styles.midRow}>
+            <div style={{ width: filesWidth, flex: "0 0 auto", minWidth: 0, display: "flex" }}>
+              <FilesPane
+                files={files}
+                selected={selected}
+                onSelect={setSelected}
+              />
+            </div>
+            <ResizeHandle
+              ariaLabel="Resize files pane"
+              onResize={(delta) =>
+                setFilesWidth((w) => {
+                  const next = Math.max(200, Math.min(560, w + delta));
+                  persistPrReviewFilesPaneWidth(next);
+                  return next;
+                })
+              }
+            />
+            <div style={{ flex: 1, minWidth: 0, display: "flex" }}>
+              {selectedFile ? (
+                <DiffPane file={selectedFile} comments={comments} />
+              ) : (
+                <main
+                  style={{
+                    flex: 1,
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    color: "var(--fg-mute)",
+                    fontFamily: "var(--font-mono)",
+                    fontSize: 12,
+                  }}
+                >
+                  No files in this PR.
+                </main>
+              )}
+            </div>
+          </div>
+          {statusBar ?? (
+            <StatusBar
+              pr={pr}
+              fileCount={files.length}
+              totalAdditions={totals.a}
+              totalDeletions={totals.d}
+              threadCount={comments.length}
+            />
+          )}
+        </div>
+        <ResizeHandle
+          ariaLabel="Resize right pane"
+          onResize={(delta) =>
+            setRightWidth((w) => {
+              const next = Math.max(260, Math.min(720, w - delta));
+              persistPrReviewRightPaneWidth(next);
+              return next;
+            })
+          }
+        />
+        <div
+          className={styles.rightPane}
+          style={{ width: rightWidth, borderLeft: "1px solid var(--card-border)" }}
+        >
+          {right}
+        </div>
+      </div>
+    </div>
+  );
+}

package/cloud-runtime/standalone/apps/local/components/prs/review/StatusBar.tsx

@@ -0,0 +1,53 @@
+// apps/local/components/prs/review/StatusBar.tsx
+"use client";
+
+import React from "react";
+import type { GithubPr } from "@/lib/github-types";
+
+interface Props {
+  pr: GithubPr;
+  fileCount: number;
+  totalAdditions: number;
+  totalDeletions: number;
+  threadCount: number;
+}
+
+export function StatusBar({
+  pr,
+  fileCount,
+  totalAdditions,
+  totalDeletions,
+  threadCount,
+}: Props) {
+  return (
+    <footer
+      style={{
+        height: 26,
+        flex: "0 0 auto",
+        display: "flex",
+        alignItems: "center",
+        padding: "0 14px",
+        gap: 14,
+        borderTop: "1px solid var(--line)",
+        background: "var(--bg-raised)",
+        fontFamily: "var(--font-mono)",
+        fontSize: 10,
+        color: "var(--fg-mute)",
+      }}
+    >
+      <span style={{ color: "var(--accent)" }}>● {pr.state}</span>
+      <span>
+        {pr.headRef} → {pr.baseRef}
+      </span>
+      <span style={{ color: "var(--fg-ghost)" }}>·</span>
+      <span>
+        {fileCount} files · +{totalAdditions} −{totalDeletions}
+      </span>
+      <span style={{ color: "var(--fg-ghost)" }}>·</span>
+      <span>
+        {threadCount} thread{threadCount === 1 ? "" : "s"}
+      </span>
+      <span style={{ marginLeft: "auto" }}>{pr.repoId}</span>
+    </footer>
+  );
+}

package/cloud-runtime/standalone/apps/local/components/prs/review/TopBar.tsx

@@ -0,0 +1,137 @@
+// apps/local/components/prs/review/TopBar.tsx
+"use client";
+
+import React from "react";
+import type { GithubPr } from "@/lib/github-types";
+import styles from "./review.module.css";
+
+interface Props {
+  pr: GithubPr;
+}
+
+export function TopBar({ pr }: Props) {
+  return (
+    <header
+      style={{
+        height: 44,
+        flex: "0 0 auto",
+        display: "flex",
+        alignItems: "center",
+        borderBottom: "1px solid var(--line)",
+        background: "var(--bg-raised)",
+        fontFamily: "var(--font-mono)",
+        fontSize: 11,
+      }}
+    >
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          gap: 8,
+          padding: "0 14px",
+          color: "var(--fg)",
+          fontWeight: 700,
+          borderRight: "1px solid var(--line)",
+          height: "100%",
+        }}
+      >
+        <span
+          style={{
+            fontFamily: "var(--font-sans)",
+            letterSpacing: "-0.02em",
+            fontSize: 14,
+          }}
+        >
+          AGX
+        </span>
+        <span style={{ color: "var(--fg-mute)", fontSize: 10, marginLeft: 4 }}>
+          review
+        </span>
+      </div>
+
+      <PillCell label="Repository" value={pr.repoId} caret />
+      <PillCell label="Branch" value={pr.headRef} caret accent />
+      <PillCell label="Base" value={`← ${pr.baseRef}`} caret />
+      <PillCell label="PR" value={`#${pr.number}`} />
+
+      <div
+        style={{
+          marginLeft: "auto",
+          display: "flex",
+          alignItems: "center",
+          gap: 12,
+          padding: "0 14px",
+        }}
+      >
+        <a
+          href={pr.url}
+          target="_blank"
+          rel="noreferrer"
+          className={`${styles.btn} ${styles.btnGhost}`}
+        >
+          ↗ open on github
+        </a>
+      </div>
+    </header>
+  );
+}
+
+function PillCell({
+  label,
+  value,
+  caret,
+  accent,
+}: {
+  label: string;
+  value: string;
+  caret?: boolean;
+  accent?: boolean;
+}) {
+  return (
+    <div
+      style={{
+        height: "100%",
+        borderRight: "1px solid var(--line)",
+        padding: "0 16px",
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        minWidth: 180,
+      }}
+    >
+      <div
+        style={{
+          color: "var(--fg-mute)",
+          fontSize: 9,
+          letterSpacing: "0.16em",
+          textTransform: "uppercase",
+          marginBottom: 2,
+          fontFamily: "var(--font-mono)",
+        }}
+      >
+        {label}
+      </div>
+      <div
+        style={{
+          color: accent ? "var(--accent)" : "var(--fg)",
+          fontFamily: "var(--font-mono)",
+          fontSize: 12,
+          display: "flex",
+          alignItems: "center",
+          gap: 6,
+          maxWidth: 240,
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap",
+        }}
+      >
+        <span style={{ overflow: "hidden", textOverflow: "ellipsis" }}>
+          {value}
+        </span>
+        {caret && (
+          <span style={{ color: "var(--fg-ghost)", fontSize: 10 }}>⌄</span>
+        )}
+      </div>
+    </div>
+  );
+}

package/cloud-runtime/standalone/apps/local/components/prs/review/review.module.css

@@ -0,0 +1,112 @@
+.root {
+  --bg: var(--background);
+  --bg-raised: var(--column-header-bg, var(--card-bg));
+  --bg-card: var(--card-bg);
+  --bg-inset: var(--background);
+  --line: var(--card-border);
+  --line-strong: var(--card-hover-border, var(--card-border));
+  --fg: var(--foreground);
+  --fg-dim: var(--muted-foreground);
+  --fg-mute: var(--muted-foreground);
+  --fg-ghost: var(--card-border);
+  --accent: var(--primary);
+  --accent-ink: var(--primary-foreground);
+  --warm: var(--warning, #ce9178);
+  --cool: var(--info, #569cd6);
+  --danger: var(--destructive, #f44747);
+  --add: var(--success, #6a9955);
+  --add-bg: var(--success-muted, rgba(106, 153, 85, 0.10));
+  --add-gut: rgba(106, 153, 85, 0.22);
+  --del: var(--destructive, #f44747);
+  --del-bg: var(--destructive-muted, rgba(244, 71, 71, 0.10));
+  --del-gut: rgba(244, 71, 71, 0.24);
+  --font-sans: var(--font-inter-tight), ui-sans-serif, system-ui, sans-serif;
+  --font-mono: var(--font-jetbrains-mono), ui-monospace, Menlo, monospace;
+
+  background: var(--bg);
+  color: var(--fg);
+  font-family: var(--font-sans);
+  -webkit-font-smoothing: antialiased;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.mono { font-family: var(--font-mono); }
+
+.kbd {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 16px;
+  height: 16px;
+  padding: 0 4px;
+  border: 1px solid var(--line-strong);
+  border-radius: 3px;
+  background: var(--bg-inset);
+  color: var(--fg-mute);
+  font-family: var(--font-mono);
+  font-size: 9px;
+}
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  padding: 5px 10px;
+  border-radius: 4px;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  font-weight: 600;
+  cursor: pointer;
+  text-decoration: none;
+  border: 1px solid transparent;
+  white-space: nowrap;
+}
+
+.btnPrimary { background: var(--accent); color: var(--accent-ink); }
+
+.btnGhost {
+  border-color: var(--line-strong);
+  color: var(--fg-dim);
+  background: transparent;
+}
+.btnGhost:hover { background: var(--bg-raised); color: var(--fg); }
+
+.slim::-webkit-scrollbar { width: 6px; height: 6px; }
+.slim::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 3px; }
+.slim::-webkit-scrollbar-track { background: transparent; }
+
+@keyframes blip {
+  0%, 100% { opacity: .3; transform: scale(.9); }
+  50% { opacity: 1; transform: scale(1.1); }
+}
+.blip { animation: blip 1.6s ease-in-out infinite; }
+
+.reviewBody {
+  flex: 1;
+  display: flex;
+  min-height: 0;
+}
+
+.leftCol {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+}
+
+.midRow {
+  flex: 1;
+  display: flex;
+  min-height: 0;
+}
+
+.rightPane {
+  flex: 0 0 auto;
+  min-width: 0;
+  display: flex;
+  min-height: 0;
+}

package/cloud-runtime/standalone/apps/local/components/tracker/LinkedPrsSection.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useCallback, useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
 import { Plus, X } from "lucide-react";
 import type { GithubPr, TrackerTargetType } from "@/lib/github-types";
 
@@ -45,6 +46,7 @@ function reviewDecisionChip(decision: GithubPr["reviewDecision"]): { label: stri
 }
 
 export function LinkedPrsSection({ targetType, targetId, projectSlug }: Props) {
+  const router = useRouter();
   const [prs, setPrs] = useState<GithubPr[]>([]);
   const [loaded, setLoaded] = useState(false);
   const [formOpen, setFormOpen] = useState(false);
@@ -79,10 +81,9 @@ export function LinkedPrsSection({ targetType, targetId, projectSlug }: Props) {
 
   const handleRowClick = useCallback(
     (pr: GithubPr) => {
-      const href = `/projects/${encodeURIComponent(projectSlug)}/prs?pr=${encodeURIComponent(pr.id)}`;
-      window.location.href = href;
+      router.push(`/projects/${projectSlug}/prs/${encodeURIComponent(pr.id)}`);
     },
-    [projectSlug],
+    [router, projectSlug],
   );
 
   const handleSubmit = useCallback(