← Files Codex Security CloudARCHIVED FILE

.internal/defense-factory-ui/src/workbench/commit-finding-content.tsx

22.7 KB · Oct 2, 2026 · 00:26 UTC

↓ Download file

import type { components } from "@oai/aardvark-client/components";
import { SegmentedControl } from "@oai/ds/ui/segmented-control";
import { User } from "@oai/ds/icons/user";
import { Avatar } from "@oai/ds/ui/avatar";
import type { ReactNode } from "react";
import { FormattedMessage, useIntl } from "react-intl";

import { ExternalLink } from "../link";
import { DateTime, Report, repositoryLabel } from "../ui";
import { CLOSED_FINDING_STATUSES, shortHash } from "./findings-utils";
import {
  FindingMetadataRow,
  FindingSeverityBadge,
  FindingStatusBadge,
} from "./finding-detail-layout";
import { WorkbenchState } from "./layout";
import { STATUS_MESSAGES } from "./messages";
import { workbenchStyles } from "./styles";

type CommitFinding = components["schemas"]["ScanFindingResponse"];

export function isFindingPatchPending(finding: CommitFinding) {
  return (
    finding.manual_patch_request_status === "queued" ||
    finding.manual_patch_request_status === "running" ||
    finding.proposed_patch?.status === "in_progress"
  );
}

export function CommitFindingArchiveBanner({
  finding,
}: {
  finding: CommitFinding;
}) {
  const intl = useIntl();
  if (!CLOSED_FINDING_STATUSES.includes(finding.status)) return null;

  const email = finding.resolution_set_by_email?.trim();
  const reason = finding.resolution_reason?.trim();
  const automatic = !email && reason?.startsWith("Auto-closed by Aardvark");
  const statusLabel = intl.formatMessage(STATUS_MESSAGES[finding.status]);

  return (
    <WorkbenchState variant="inline">
      {automatic ? (
        <FormattedMessage
          id="codex.security.findings.detail.closed.automatic"
          defaultMessage="This finding was automatically closed because the issue is no longer detected."
          description="Banner shown when Security automatically closes a finding that is no longer detected."
        />
      ) : email ? (
        <FormattedMessage
          id="codex.security.findings.detail.closed.by_user"
          defaultMessage="Closed by {email}. Reason: {statusLabel}.{reason}"
          description="Banner identifying who closed a Security finding, why it was closed, and optional extra context."
          values={{
            email,
            statusLabel,
            reason: reason ? ` ${reason}` : "",
          }}
        />
      ) : (
        <FormattedMessage
          id="codex.security.findings.detail.closed"
          defaultMessage="Closed. Reason: {statusLabel}.{reason}"
          description="Banner explaining why a Security finding is closed when no user email is available."
          values={{
            statusLabel,
            reason: reason ? ` ${reason}` : "",
          }}
        />
      )}
    </WorkbenchState>
  );
}

export function CommitFindingMetadata({ finding }: { finding: CommitFinding }) {
  const analysis = finding.commit_analysis;
  const hash = analysis?.commit_hash ?? "";
  const repositoryHref = githubRepositoryUrl(finding.repo_url);
  const commitHref =
    repositoryHref && hash
      ? `${repositoryHref}/commit/${encodeURIComponent(hash)}`
      : null;
  const author = stripSurroundingQuotes(
    analysis?.author ?? analysis?.author_email ?? "",
  );
  const committedAt =
    analysis?.committer_date ?? analysis?.author_date ?? finding.created_at;

  return (
    <dl className="df-finding-metadata">
      <FindingMetadataRow
        label={
          <FormattedMessage
            id="codex.security.findings.detail.severity.label"
            defaultMessage="Severity"
            description="Severity metadata label on a commit-scan finding."
          />
        }
      >
        <FindingSeverityBadge severity={finding.criticality} />
      </FindingMetadataRow>
      <FindingMetadataRow
        label={
          <FormattedMessage
            id="defenseFactory.finding.metadata.status"
            defaultMessage="Status"
            description="The finding triage status, not a linked issue status."
          />
        }
      >
        <FindingStatusBadge status={finding.status} />
      </FindingMetadataRow>
      <FindingMetadataRow
        label={
          <FormattedMessage
            id="defenseFactory.finding.metadata.owner"
            defaultMessage="Owner"
            description="Person assigned to this finding."
          />
        }
      >
        <div className="flex items-center gap-2">
          <Avatar size={24} color="secondary" variant="solid" Icon={User} />
          <span className="min-w-0">
            {finding.assignee?.name || finding.assignee?.email || (
              <FormattedMessage
                id="defenseFactory.finding.metadata.unassigned"
                defaultMessage="Unassigned"
                description="No person is currently assigned to this finding."
              />
            )}
          </span>
        </div>
      </FindingMetadataRow>
      <FindingMetadataRow
        label={
          <FormattedMessage
            id="codex.security.findings.detail.commit.label"
            defaultMessage="Commit"
            description="Commit metadata label on a commit-scan finding."
          />
        }
      >
        <div className="flex flex-wrap items-baseline gap-x-2 gap-y-1">
          {commitHref ? (
            <ExternalLink
              href={commitHref}
              className={`${workbenchStyles.link} font-mono text-sm`}
            >
              {shortHash(hash)}
            </ExternalLink>
          ) : (
            <span className="font-mono text-sm">{hash || "—"}</span>
          )}
          <span className="text-token-text-tertiary text-xs leading-5">
            <DateTime value={committedAt} />
          </span>
        </div>
        {author ? (
          <p className="text-token-text-tertiary text-xs leading-5 break-words">
            <FormattedMessage
              id="codex.security.findings.detail.commit.author"
              defaultMessage="by {author}"
              description="Author shown beneath the commit on a Security finding."
              values={{ author }}
            />
          </p>
        ) : null}
      </FindingMetadataRow>
      <FindingMetadataRow
        label={
          <FormattedMessage
            id="codex.security.findings.detail.repository.label"
            defaultMessage="Repository"
            description="Repository metadata label on a commit-scan finding."
          />
        }
      >
        {repositoryHref ? (
          <ExternalLink href={repositoryHref} className={workbenchStyles.link}>
            {repositoryLabel(finding.repo_url)}
          </ExternalLink>
        ) : (
          repositoryLabel(finding.repo_url)
        )}
      </FindingMetadataRow>
      <FindingMetadataRow
        label={
          <FormattedMessage
            id="defenseFactory.finding.metadata.detected"
            defaultMessage="Detected"
            description="When this finding was created."
          />
        }
      >
        <DateTime value={finding.created_at} />
      </FindingMetadataRow>
    </dl>
  );
}

export function CommitFindingViewToggle({
  showPatch,
  onShowReport,
  onShowPatch,
  patchAvailable,
}: {
  showPatch: boolean;
  onShowReport: () => void;
  onShowPatch: () => void;
  patchAvailable: boolean;
}) {
  const intl = useIntl();
  return (
    <SegmentedControl
      value={showPatch ? "patch" : "report"}
      onChange={(id) => (id === "patch" ? onShowPatch() : onShowReport())}
      size="md"
      gutterSize="md"
      variant="ghost"
      pill
      className="df-finding-content-toggle w-fit"
      aria-label={intl.formatMessage({
        id: "defenseFactory.finding.view.label",
        defaultMessage: "Finding content",
        description:
          "Accessible label for choosing the finding report or patch.",
      })}
    >
      <SegmentedControl.Option value="report">
        {intl.formatMessage({
          id: "codex.security.findings.detail.report.label",
          defaultMessage: "Report",
          description:
            "Segmented control option for the Security finding report.",
        })}
      </SegmentedControl.Option>
      <SegmentedControl.Option value="patch" disabled={!patchAvailable}>
        {intl.formatMessage({
          id: "codex.security.findings.detail.patch.label",
          defaultMessage: "Patch",
          description:
            "Segmented control option for the proposed Security fix.",
        })}
      </SegmentedControl.Option>
    </SegmentedControl>
  );
}

export function CommitFindingReport({ finding }: { finding: CommitFinding }) {
  const analysis = finding.commit_analysis;
  const summary = [analysis?.bugs_found_or_fixed, analysis?.description]
    .filter((value, index, values): value is string =>
      Boolean(value && values.indexOf(value) === index),
    )
    .join("\n\n");
  const validationRubric = analysis?.validation_rubric
    ?.replace(/\\n/g, "\n")
    .trim();
  const validationReport = (
    analysis?.validation_report ?? analysis?.validation_str
  )?.trim();
  const validationArtifactUrl = analysis?.validation_artifact?.download_url;
  const relevantLines = analysis?.relevant_lines ?? [];

  return (
    <div className="space-y-8">
      <ContentSection
        title={
          <FormattedMessage
            id="codex.security.findings.detail.summary.label"
            defaultMessage="Summary"
            description="Heading for the summary of a Security finding."
          />
        }
      >
        {summary ? (
          <Report>{summary}</Report>
        ) : (
          <EmptyContent>
            <FormattedMessage
              id="codex.security.findings.detail.summary.empty"
              defaultMessage="No summary available for this finding yet."
              description="Fallback shown when a Security finding has no summary."
            />
          </EmptyContent>
        )}
      </ContentSection>

      {validationRubric || validationReport || validationArtifactUrl ? (
        <ContentSection
          title={
            <FormattedMessage
              id="codex.security.findings.detail.validation.label"
              defaultMessage="Validation"
              description="Heading for validation details on a Security finding."
            />
          }
        >
          <div className="space-y-4">
            {validationRubric ? <Report>{validationRubric}</Report> : null}
            {validationReport && validationReport !== validationRubric ? (
              <Report>{validationReport}</Report>
            ) : null}
            {validationArtifactUrl ? (
              <ExternalLink
                href={validationArtifactUrl}
                className={workbenchStyles.link}
              >
                <FormattedMessage
                  id="codex.security.findings.detail.validation.artifact.label"
                  defaultMessage="Validation artifact"
                  description="Link label for a Security finding validation artifact."
                />
              </ExternalLink>
            ) : null}
          </div>
        </ContentSection>
      ) : null}

      <ContentSection
        title={
          <FormattedMessage
            id="codex.security.findings.detail.evidence.label"
            defaultMessage="Evidence"
            description="Heading for vulnerable code evidence on a Security finding."
          />
        }
      >
        {relevantLines.length ? (
          <div className="space-y-6">
            {relevantLines.map((line, index) => (
              <div
                key={`${line.path}:${line.start_line_number}:${line.end_line_number}:${index}`}
                className="min-w-0 space-y-3"
              >
                <div className="text-token-text-secondary font-mono text-xs break-all">
                  {line.path}:L{formatLineRange(line)}
                </div>
                {line.content ? (
                  <pre className="bg-token-bg-secondary-surface max-w-full overflow-x-auto rounded-xl p-4 text-sm whitespace-pre">
                    {line.content}
                  </pre>
                ) : null}
                {line.comment ? <Report>{line.comment}</Report> : null}
              </div>
            ))}
          </div>
        ) : (
          <EmptyContent>
            <FormattedMessage
              id="codex.security.findings.detail.evidence.empty"
              defaultMessage="No evidence available."
              description="Fallback shown when a Security finding has no vulnerable code evidence."
            />
          </EmptyContent>
        )}
      </ContentSection>

      {analysis?.attack_path_analysis ? (
        <ContentSection
          title={
            <FormattedMessage
              id="codex.security.findings.detail.attack_path.label"
              defaultMessage="Attack-path analysis"
              description="Heading for attack-path analysis on a Security finding."
            />
          }
        >
          <AttackPathContent
            value={analysis.attack_path_analysis}
            fallbackAdjustmentReason={analysis.attack_path_adjustment_reason}
          />
        </ContentSection>
      ) : null}
    </div>
  );
}

export function CommitFindingPatch({
  finding,
  description,
  patch,
  pullRequestUrl,
}: {
  finding: CommitFinding;
  description: string;
  patch: string;
  pullRequestUrl: string | null;
}) {
  const pending = isFindingPatchPending(finding);
  const latestTask = finding.proposed_patch?.latest_task;
  const failure =
    latestTask?.patch_generation_success === false
      ? latestTask.patch_generation_failure_message ||
        latestTask.patch_generation_failure_reason
      : null;

  if (pending && !patch) {
    return (
      <WorkbenchState loading>
        <FormattedMessage
          id="codex.security.findings.detail.patch.generating"
          defaultMessage="Generating patch…"
          description="Status shown while Codex generates a patch for a Security finding."
        />
      </WorkbenchState>
    );
  }

  if (failure && !patch) {
    return (
      <WorkbenchState variant="inline">
        <FormattedMessage
          id="codex.security.findings.detail.patch.failed"
          defaultMessage="Patch generation failed: {failure}"
          description="Failure shown when a proposed Security patch could not be generated."
          values={{ failure }}
        />
      </WorkbenchState>
    );
  }

  if (!patch && !description) {
    return (
      <EmptyContent>
        <FormattedMessage
          id="codex.security.findings.detail.patch.empty"
          defaultMessage="Patch details are not available yet."
          description="Fallback shown when a Security patch has no details yet."
        />
      </EmptyContent>
    );
  }

  return (
    <div className="space-y-6">
      {description ? <Report>{description}</Report> : null}
      {patch ? (
        <pre className="bg-token-bg-secondary-surface max-w-full overflow-x-auto rounded-xl p-4 text-sm whitespace-pre">
          {patch}
        </pre>
      ) : null}
      {pullRequestUrl ? (
        <ExternalLink href={pullRequestUrl} className={workbenchStyles.link}>
          <FormattedMessage
            id="defenseFactory.plugin.viewPr"
            defaultMessage="View pull request"
            description="Open the existing fix pull request"
          />
        </ExternalLink>
      ) : null}
    </div>
  );
}

function ContentSection({
  title,
  children,
}: {
  title: ReactNode;
  children: ReactNode;
}) {
  return (
    <section className="df-finding-report-section">
      <h2>{title}</h2>
      <div className="df-finding-report-body">{children}</div>
    </section>
  );
}

function EmptyContent({ children }: { children: ReactNode }) {
  return <p className="text-token-text-secondary text-sm">{children}</p>;
}

function AttackPathContent({
  value,
  fallbackAdjustmentReason,
}: {
  value: components["schemas"]["AttackPathAnalysis"];
  fallbackAdjustmentReason?: string | null;
}) {
  const adjustmentReason =
    displayString(value.adjustment_reason) ||
    displayString(fallbackAdjustmentReason);
  const likelihood = levelAndReason(value.likelihood);
  const impact = levelAndReason(value.impact);
  const assumptions = uniqueStrings([
    ...(value.assumptions ?? []),
    ...(value.facts?.precondition?.requires ?? []),
  ]);
  const controls = uniqueStrings(value.controls ?? []);
  const blindspots = uniqueStrings(value.blindspots ?? []);
  const recommendations = uniqueStrings(value.recommendations ?? []);
  const diagram = formatAttackPathDiagram(value.attack_path);
  const narrative = displayString(value.narrative);
  const hasStructuredSummary =
    adjustmentReason ||
    likelihood ||
    impact ||
    assumptions.length ||
    controls.length ||
    blindspots.length ||
    recommendations.length ||
    diagram ||
    narrative;

  if (!hasStructuredSummary) {
    return (
      <pre className="max-w-full overflow-x-auto text-sm whitespace-pre-wrap">
        {JSON.stringify(value, null, 2)}
      </pre>
    );
  }

  return (
    <div className="space-y-4 text-sm leading-6">
      {adjustmentReason ? <p>{adjustmentReason}</p> : null}
      {diagram || narrative ? (
        <div className="space-y-2">
          <h3 className="text-token-text-tertiary font-medium">
            <FormattedMessage
              id="codex.security.findings.detail.attack_path.path.label"
              defaultMessage="Path"
              description="Heading for the attack path diagram and narrative."
            />
          </h3>
          {diagram ? (
            <pre className="bg-token-bg-tertiary overflow-x-auto rounded-xl p-3 text-xs leading-5 whitespace-pre-wrap">
              {diagram}
            </pre>
          ) : null}
          {narrative ? <Report>{narrative}</Report> : null}
        </div>
      ) : null}
      {likelihood || impact ? (
        <div className="grid gap-3 md:grid-cols-2">
          <InfoField
            label={
              <FormattedMessage
                id="codex.security.findings.detail.attack_path.likelihood.label"
                defaultMessage="Likelihood"
                description="Label for attack-path likelihood."
              />
            }
            value={likelihood}
          />
          <InfoField
            label={
              <FormattedMessage
                id="codex.security.findings.detail.attack_path.impact.label"
                defaultMessage="Impact"
                description="Label for attack-path impact."
              />
            }
            value={impact}
          />
        </div>
      ) : null}
      <InfoList
        title={
          <FormattedMessage
            id="codex.security.findings.detail.attack_path.assumptions.label"
            defaultMessage="Assumptions"
            description="Heading for attack-path assumptions."
          />
        }
        items={assumptions}
      />
      <InfoList
        title={
          <FormattedMessage
            id="codex.security.findings.detail.attack_path.controls.label"
            defaultMessage="Controls"
            description="Heading for attack-path controls."
          />
        }
        items={controls}
      />
      <InfoList
        title={
          <FormattedMessage
            id="codex.security.findings.detail.attack_path.blindspots.label"
            defaultMessage="Blindspots"
            description="Heading for attack-path blindspots."
          />
        }
        items={blindspots}
      />
      <InfoList
        title={
          <FormattedMessage
            id="codex.security.findings.detail.attack_path.recommendations.label"
            defaultMessage="Recommendations"
            description="Heading for remediation recommendations in attack-path analysis."
          />
        }
        items={recommendations}
      />
    </div>
  );
}

function InfoField({
  label,
  value,
}: {
  label: ReactNode;
  value: string | null;
}) {
  if (!value) return null;
  return (
    <div>
      <div className="text-token-text-tertiary font-medium">{label}</div>
      <div className="mt-1">{value}</div>
    </div>
  );
}

function InfoList({ title, items }: { title: ReactNode; items: string[] }) {
  if (!items.length) return null;
  return (
    <div className="space-y-2">
      <h3 className="text-token-text-tertiary font-medium">{title}</h3>
      <ul className="list-disc space-y-1 ps-5">
        {items.map((item) => (
          <li key={item}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

function levelAndReason(
  value:
    | components["schemas"]["LikelihoodInfo"]
    | components["schemas"]["ImpactInfo"]
    | null
    | undefined,
) {
  const level = displayString(value?.level);
  const reason = displayString(value?.why);
  if (!level && !reason) return null;
  const label = level
    ? level.charAt(0).toUpperCase() + level.slice(1)
    : "Unknown";
  return reason ? `${label} — ${reason}` : label;
}

function formatAttackPathDiagram(
  graph: components["schemas"]["AttackPathGraph"] | null | undefined,
) {
  if (!graph) return "";
  const nodes = graph.nodes ?? [];
  if (!nodes.length) return displayString(graph.ascii);

  const nodeById = new Map(nodes.map((node) => [node.id, node.label]));
  const edges = graph.edges ?? [];
  const nextById = new Map(edges.map((edge) => [edge.from_id, edge]));
  const orderedIds: string[] = [];
  const visited = new Set<string>();
  let currentId: string | undefined = graph.entry || nodes[0]?.id;

  while (currentId && !visited.has(currentId)) {
    visited.add(currentId);
    orderedIds.push(currentId);
    currentId = nextById.get(currentId)?.to_id;
  }

  if (!orderedIds.length) return displayString(graph.ascii);
  return orderedIds
    .flatMap((id, index) => {
      const nextId = orderedIds[index + 1];
      const label = nodeById.get(id) ?? id;
      if (!nextId) return [label];
      const edgeLabel = edges.find(
        (edge) => edge.from_id === id && edge.to_id === nextId,
      )?.label;
      return [label, edgeLabel ? ` --${edgeLabel}--> ` : " → "];
    })
    .join("");
}

function uniqueStrings(values: Array<string | null | undefined>) {
  return Array.from(
    new Set(
      values
        .map((value) => value?.trim())
        .filter((value): value is string => Boolean(value)),
    ),
  );
}

function displayString(value: unknown) {
  return typeof value === "string" ? value.trim() : "";
}

function formatLineRange(line: components["schemas"]["RelevantLine"]): string {
  return line.end_line_number > line.start_line_number
    ? `${line.start_line_number}-L${line.end_line_number}`
    : String(line.start_line_number);
}

function githubRepositoryUrl(value: string): string | null {
  try {
    const url = new URL(value.replace(/\.git$/, ""));
    if (url.origin !== "https://github.com" || url.username || url.password) {
      return null;
    }
    return `${url.origin}${url.pathname.replace(/\/+$/, "")}`;
  } catch {
    return null;
  }
}

function stripSurroundingQuotes(value: string) {
  const trimmed = value.trim();
  if (
    (trimmed.startsWith('"') && trimmed.endsWith('"')) ||
    (trimmed.startsWith("'") && trimmed.endsWith("'"))
  ) {
    return trimmed.slice(1, -1).trim();
  }
  return trimmed;
}

SHA-256: 106d5e0420388c54ff565725a6a5d39c856790317ee2592ec8e166c8cc7f929c