@mndrk/agx 2.4.10 → 2.4.11

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

@@ -0,0 +1,149 @@
+// apps/local/components/prs/review/CommitRail.tsx
+"use client";
+
+import React from "react";
+import type { GithubPr } from "@/lib/github-types";
+import styles from "./review.module.css";
+
+interface Props {
+  pr: GithubPr;
+  fileCount: number;
+  totalAdditions: number;
+  totalDeletions: number;
+}
+
+export function CommitRail({
+  pr,
+  fileCount,
+  totalAdditions,
+  totalDeletions,
+}: Props) {
+  const stateLabel = pr.state === "merged"
+    ? "merged"
+    : pr.state === "closed"
+      ? "closed"
+      : pr.draft
+        ? "draft"
+        : "open";
+
+  return (
+    <aside
+      className={styles.commitSide}
+      style={{
+        flex: 1,
+        minWidth: 0,
+        background: "var(--bg-inset)",
+        display: "flex",
+        flexDirection: "column",
+        overflow: "hidden",
+      }}
+    >
+      <div
+        style={{
+          padding: "14px 16px 12px",
+          borderBottom: "1px solid var(--line)",
+        }}
+      >
+        <div
+          style={{
+            fontFamily: "var(--font-mono)",
+            fontSize: 10,
+            letterSpacing: "0.14em",
+            textTransform: "uppercase",
+            color: "var(--fg-mute)",
+            marginBottom: 10,
+          }}
+        >
+          Review · #{pr.number}
+        </div>
+        <div
+          style={{
+            fontFamily: "var(--font-sans)",
+            fontSize: 14,
+            fontWeight: 600,
+            letterSpacing: "-0.01em",
+            lineHeight: 1.35,
+            marginBottom: 10,
+          }}
+        >
+          {pr.title}
+        </div>
+        <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
+          <Row k="branch" v={pr.headRef} accent />
+          <Row k="base" v={pr.baseRef} />
+          <Row k="state" v={stateLabel} />
+          <Row k="files" v={`${fileCount} · +${totalAdditions} −${totalDeletions}`} />
+          {pr.ciStatus && <Row k="ci" v={pr.ciStatus} />}
+        </div>
+      </div>
+
+      <div
+        className={styles.slim}
+        style={{
+          padding: "14px 16px",
+          flex: 1,
+          overflow: "auto",
+        }}
+      >
+        <div
+          style={{
+            fontFamily: "var(--font-mono)",
+            fontSize: 10,
+            letterSpacing: "0.14em",
+            textTransform: "uppercase",
+            color: "var(--fg-mute)",
+            marginBottom: 10,
+          }}
+        >
+          Description
+        </div>
+        <div
+          style={{
+            fontFamily: "var(--font-sans)",
+            fontSize: 12,
+            lineHeight: 1.55,
+            color: "var(--fg-dim)",
+            whiteSpace: "pre-wrap",
+          }}
+        >
+          {pr.body || "(no description)"}
+        </div>
+      </div>
+    </aside>
+  );
+}
+
+function Row({
+  k,
+  v,
+  accent,
+}: {
+  k: string;
+  v: string;
+  accent?: boolean;
+}) {
+  return (
+    <div
+      style={{
+        display: "grid",
+        gridTemplateColumns: "70px 1fr",
+        alignItems: "center",
+        gap: 8,
+        fontFamily: "var(--font-mono)",
+        fontSize: 11,
+      }}
+    >
+      <span style={{ color: "var(--fg-mute)" }}>{k}</span>
+      <span
+        style={{
+          color: accent ? "var(--accent)" : "var(--fg)",
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap",
+        }}
+      >
+        {v}
+      </span>
+    </div>
+  );
+}

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

@@ -0,0 +1,294 @@
+// apps/local/components/prs/review/DiffPane.tsx
+"use client";
+
+import React, { useMemo } from "react";
+import type { GithubPrFile, GithubPrComment } from "@/lib/github-types";
+import { parseUnifiedDiff, type DiffHunk, type DiffLine } from "@/lib/diff-parser";
+import { AgentChip } from "./AgentChip";
+import styles from "./review.module.css";
+
+interface Props {
+  file: GithubPrFile;
+  comments: GithubPrComment[];
+}
+
+const STATUS_LETTER: Record<string, string> = {
+  added: "A",
+  modified: "M",
+  removed: "D",
+  renamed: "R",
+};
+
+export function DiffPane({ file, comments }: Props) {
+  const hunks = useMemo(() => parseUnifiedDiff(file.patch), [file.patch]);
+
+  const commentsByLine = useMemo(() => {
+    const m = new Map<number, GithubPrComment[]>();
+    for (const c of comments) {
+      if (c.path !== file.path || c.line == null) continue;
+      const arr = m.get(c.line) ?? [];
+      arr.push(c);
+      m.set(c.line, arr);
+    }
+    return m;
+  }, [comments, file.path]);
+
+  return (
+    <main
+      style={{
+        flex: 1,
+        display: "flex",
+        flexDirection: "column",
+        minWidth: 0,
+        overflow: "hidden",
+        background: "var(--bg)",
+      }}
+    >
+      <DiffHeader file={file} />
+      <SubToolbar threadCount={comments.filter((c) => c.path === file.path).length} />
+      <div
+        className={styles.slim}
+        style={{ flex: 1, overflow: "auto", background: "var(--bg)" }}
+      >
+        {hunks.length === 0 ? (
+          <div
+            style={{
+              padding: "32px 16px",
+              color: "var(--fg-mute)",
+              fontFamily: "var(--font-mono)",
+              fontSize: 12,
+              textAlign: "center",
+            }}
+          >
+            No diff available for this file.
+          </div>
+        ) : (
+          hunks.map((h, i) => (
+            <Hunk key={i} hunk={h} commentsByLine={commentsByLine} />
+          ))
+        )}
+      </div>
+    </main>
+  );
+}
+
+function DiffHeader({ file }: { file: GithubPrFile }) {
+  const letter = STATUS_LETTER[file.status] ?? "M";
+  return (
+    <div
+      style={{
+        flex: "0 0 auto",
+        display: "flex",
+        alignItems: "center",
+        gap: 14,
+        padding: "10px 16px",
+        borderBottom: "1px solid var(--line)",
+        background: "var(--bg-raised)",
+        fontFamily: "var(--font-mono)",
+        fontSize: 11,
+      }}
+    >
+      <span
+        style={{
+          padding: "2px 6px",
+          borderRadius: 3,
+          border: "1px solid var(--accent)",
+          color: "var(--accent)",
+          fontSize: 10,
+          letterSpacing: "0.12em",
+        }}
+      >
+        {letter}
+      </span>
+      <span style={{ color: "var(--fg)", fontSize: 13, fontWeight: 500 }}>
+        {file.path}
+      </span>
+      <span style={{ color: "var(--fg-mute)" }}>·</span>
+      <span style={{ color: "var(--add)" }}>+{file.additions}</span>
+      <span style={{ color: "var(--del)" }}>−{file.deletions}</span>
+    </div>
+  );
+}
+
+function SubToolbar({ threadCount }: { threadCount: number }) {
+  return (
+    <div
+      style={{
+        flex: "0 0 auto",
+        display: "flex",
+        alignItems: "center",
+        gap: 12,
+        padding: "6px 16px",
+        borderBottom: "1px solid var(--line)",
+        background: "var(--bg-card)",
+        fontFamily: "var(--font-mono)",
+        fontSize: 10,
+        color: "var(--fg-mute)",
+      }}
+    >
+      <span>view: unified</span>
+      <span style={{ marginLeft: "auto", display: "flex", gap: 14 }}>
+        {threadCount > 0 && (
+          <span style={{ color: "var(--warm)" }}>
+            ◆ {threadCount} thread{threadCount === 1 ? "" : "s"}
+          </span>
+        )}
+      </span>
+    </div>
+  );
+}
+
+function Hunk({
+  hunk,
+  commentsByLine,
+}: {
+  hunk: DiffHunk;
+  commentsByLine: Map<number, GithubPrComment[]>;
+}) {
+  return (
+    <div style={{ borderTop: "1px solid var(--line)" }}>
+      <div
+        style={{
+          padding: "6px 16px",
+          background: "var(--bg-inset)",
+          fontFamily: "var(--font-mono)",
+          fontSize: 11,
+          color: "var(--fg-mute)",
+          display: "flex",
+          alignItems: "center",
+          gap: 12,
+        }}
+      >
+        <span style={{ color: "var(--cool)" }}>{hunk.head}</span>
+        {hunk.section && (
+          <>
+            <span style={{ color: "var(--fg-ghost)" }}>·</span>
+            <span style={{ color: "var(--fg-dim)" }}>{hunk.section}</span>
+          </>
+        )}
+      </div>
+      {hunk.lines.map((l, i) => {
+        const threads = l.n != null ? commentsByLine.get(l.n) : undefined;
+        return (
+          <React.Fragment key={i}>
+            <DiffLineRow line={l} />
+            {threads?.map((t) => <InlineThread key={t.id} comment={t} />)}
+          </React.Fragment>
+        );
+      })}
+    </div>
+  );
+}
+
+function DiffLineRow({ line }: { line: DiffLine }) {
+  const isAdd = line.k === "add";
+  const isDel = line.k === "del";
+  const bg = isAdd ? "var(--add-bg)" : isDel ? "var(--del-bg)" : "transparent";
+  const gutBg = isAdd ? "var(--add-gut)" : isDel ? "var(--del-gut)" : "transparent";
+  const sigil = isAdd ? "+" : isDel ? "−" : " ";
+  const sigilColor = isAdd ? "var(--add)" : isDel ? "var(--del)" : "var(--fg-ghost)";
+  const txtColor = isAdd ? "var(--fg)" : "var(--fg-dim)";
+
+  return (
+    <div
+      style={{
+        display: "grid",
+        gridTemplateColumns: "44px 44px 16px 1fr",
+        minHeight: 20,
+        fontFamily: "var(--font-mono)",
+        fontSize: 12,
+        lineHeight: "20px",
+        background: bg,
+      }}
+    >
+      <span
+        style={{
+          textAlign: "right",
+          padding: "0 8px",
+          color: "var(--fg-mute)",
+          background: gutBg,
+          borderRight: "1px solid var(--line)",
+          fontSize: 10,
+        }}
+      >
+        {line.o ?? ""}
+      </span>
+      <span
+        style={{
+          textAlign: "right",
+          padding: "0 8px",
+          color: "var(--fg-mute)",
+          background: gutBg,
+          borderRight: "1px solid var(--line)",
+          fontSize: 10,
+        }}
+      >
+        {line.n ?? ""}
+      </span>
+      <span
+        style={{
+          textAlign: "center",
+          color: sigilColor,
+          fontWeight: 600,
+          background: gutBg,
+        }}
+      >
+        {sigil}
+      </span>
+      <span
+        style={{
+          padding: "0 12px",
+          whiteSpace: "pre",
+          color: txtColor,
+        }}
+      >
+        {line.t}
+      </span>
+    </div>
+  );
+}
+
+function InlineThread({ comment }: { comment: GithubPrComment }) {
+  const time = new Date(comment.createdAt).toLocaleString();
+  return (
+    <div
+      style={{
+        margin: "4px 0 4px 88px",
+        border: "1px solid var(--line-strong)",
+        borderRadius: 5,
+        background: "var(--bg-card)",
+      }}
+    >
+      <div
+        style={{
+          padding: "8px 12px",
+          borderBottom: "1px solid var(--line)",
+          display: "flex",
+          alignItems: "center",
+          gap: 8,
+          fontFamily: "var(--font-mono)",
+          fontSize: 10,
+          color: "var(--fg-mute)",
+        }}
+      >
+        <AgentChip name={comment.authorLogin} provider="claude" size={16} />
+        <span style={{ color: "var(--fg)", fontSize: 11 }}>
+          {comment.authorLogin}
+        </span>
+        <span style={{ marginLeft: "auto" }}>{time}</span>
+      </div>
+      <div
+        style={{
+          padding: "10px 12px",
+          fontFamily: "var(--font-sans)",
+          fontSize: 13,
+          lineHeight: 1.55,
+          color: "var(--fg-dim)",
+          whiteSpace: "pre-wrap",
+        }}
+      >
+        {comment.body}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,216 @@
+// apps/local/components/prs/review/FilesPane.tsx
+"use client";
+
+import React from "react";
+import type { GithubPrFile } from "@/lib/github-types";
+import styles from "./review.module.css";
+
+interface Props {
+  files: GithubPrFile[];
+  selected: string | null;
+  onSelect: (path: string) => void;
+}
+
+const STATUS_LETTER: Record<string, string> = {
+  added: "A",
+  modified: "M",
+  removed: "D",
+  renamed: "R",
+};
+
+const STATUS_COLOR: Record<string, string> = {
+  A: "var(--add)",
+  M: "var(--accent)",
+  D: "var(--del)",
+  R: "var(--cool)",
+};
+
+export function FilesPane({ files, selected, onSelect }: Props) {
+  const totals = files.reduce(
+    (acc, f) => ({ a: acc.a + f.additions, d: acc.d + f.deletions }),
+    { a: 0, d: 0 },
+  );
+
+  return (
+    <aside
+      className={styles.filesSide}
+      style={{
+        flex: 1,
+        borderRight: "1px solid var(--line)",
+        background: "var(--bg-inset)",
+        display: "flex",
+        flexDirection: "column",
+        minWidth: 0,
+        overflow: "hidden",
+      }}
+    >
+      <div
+        style={{
+          display: "flex",
+          alignItems: "stretch",
+          borderBottom: "1px solid var(--line)",
+          fontFamily: "var(--font-mono)",
+          fontSize: 10,
+        }}
+      >
+        <div
+          style={{
+            flex: 1,
+            padding: "10px 12px",
+            background: "var(--bg-card)",
+            color: "var(--fg)",
+            borderBottom: "2px solid var(--accent)",
+            letterSpacing: "0.1em",
+            textTransform: "uppercase",
+          }}
+        >
+          Changes <span style={{ color: "var(--fg-mute)", marginLeft: 4 }}>{files.length}</span>
+        </div>
+      </div>
+
+      <div
+        style={{
+          display: "grid",
+          gridTemplateColumns: "1fr 1fr",
+          borderBottom: "1px solid var(--line)",
+          fontFamily: "var(--font-mono)",
+          fontSize: 9,
+          letterSpacing: "0.1em",
+          textTransform: "uppercase",
+        }}
+      >
+        <SummaryCell k="changed" v={String(files.length)} sub={`+${totals.a} −${totals.d}`} border />
+        <SummaryCell k="lines" v={`+${totals.a}`} sub={`−${totals.d}`} />
+      </div>
+
+      <div className={styles.slim} style={{ flex: 1, overflow: "auto" }}>
+        {files.map((f) => (
+          <FileRow
+            key={f.path}
+            file={f}
+            active={selected === f.path}
+            onClick={() => onSelect(f.path)}
+          />
+        ))}
+      </div>
+    </aside>
+  );
+}
+
+function SummaryCell({
+  k,
+  v,
+  sub,
+  border,
+}: {
+  k: string;
+  v: string;
+  sub: string;
+  border?: boolean;
+}) {
+  return (
+    <div
+      style={{
+        padding: "8px 10px",
+        borderRight: border ? "1px solid var(--line)" : "none",
+        background: "var(--bg-card)",
+      }}
+    >
+      <div style={{ color: "var(--fg-mute)", marginBottom: 3 }}>{k}</div>
+      <div style={{ color: "var(--fg)", fontSize: 13, letterSpacing: 0, fontWeight: 600 }}>
+        {v}
+      </div>
+      <div style={{ color: "var(--fg-mute)", marginTop: 2, fontSize: 9, letterSpacing: 0, textTransform: "none" }}>
+        {sub}
+      </div>
+    </div>
+  );
+}
+
+function FileRow({
+  file,
+  active,
+  onClick,
+}: {
+  file: GithubPrFile;
+  active: boolean;
+  onClick: () => void;
+}) {
+  const lastSlash = file.path.lastIndexOf("/");
+  const dir = lastSlash >= 0 ? file.path.slice(0, lastSlash) : "";
+  const name = lastSlash >= 0 ? file.path.slice(lastSlash + 1) : file.path;
+  const letter = STATUS_LETTER[file.status] ?? "M";
+  const color = STATUS_COLOR[letter] ?? "var(--fg)";
+
+  return (
+    <div
+      role="button"
+      tabIndex={0}
+      onClick={onClick}
+      onKeyDown={(e) => {
+        if (e.key === "Enter" || e.key === " ") onClick();
+      }}
+      style={{
+        display: "grid",
+        gridTemplateColumns: "14px 1fr auto",
+        gap: 8,
+        padding: "7px 12px",
+        cursor: "pointer",
+        background: active ? "var(--bg-card)" : "transparent",
+        borderLeft: active ? "2px solid var(--accent)" : "2px solid transparent",
+        alignItems: "center",
+      }}
+    >
+      <span
+        style={{
+          fontFamily: "var(--font-mono)",
+          fontSize: 10,
+          fontWeight: 700,
+          color,
+          textAlign: "center",
+        }}
+      >
+        {letter}
+      </span>
+      <div style={{ minWidth: 0, display: "flex", flexDirection: "column" }}>
+        <span
+          style={{
+            color: active ? "var(--fg)" : "var(--fg-dim)",
+            fontFamily: "var(--font-mono)",
+            fontSize: 12,
+            whiteSpace: "nowrap",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+          }}
+        >
+          {name}
+        </span>
+        {dir && (
+          <span
+            style={{
+              color: "var(--fg-mute)",
+              fontFamily: "var(--font-mono)",
+              fontSize: 9,
+              whiteSpace: "nowrap",
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+            }}
+          >
+            {dir}/
+          </span>
+        )}
+      </div>
+      <span
+        style={{
+          fontFamily: "var(--font-mono)",
+          fontSize: 10,
+          display: "flex",
+          gap: 6,
+        }}
+      >
+        <span style={{ color: "var(--add)" }}>+{file.additions}</span>
+        <span style={{ color: "var(--del)" }}>−{file.deletions}</span>
+      </span>
+    </div>
+  );
+}