Support Node.js 24 runtime for GitHub Actions

[ds92ko]

Hi, thanks for maintaining this project.

When using anc95/ChatGPT-CodeReview@main on GitHub Actions, the workflow succeeds, but GitHub prints the following warning:

Node 20 is being deprecated. This workflow is running with Node 24 by default. If you need to temporarily use Node 20, you can set the ACTIONS_ALLOW_USE_UNSECURE_NODE_VERSION=true environment variable. For more information see: https://github.blog/changelog/2025-09-19-deprecation-of-node-20-on-github-actions-runners/

I checked the current action.yml, and it appears to still target Node.js 20:

runs:
  using: 'node20'
  main: 'action/index.cjs'

Could you please consider updating this action to officially support the Node.js 24 runtime?

This would help remove the deprecation warning and improve compatibility with future GitHub Actions runner updates.

Environment

• GitHub Actions Runner: 2.335.1
• Action: anc95/ChatGPT-CodeReview@main

Thank you for your time and for maintaining this project!

[toppphlyte26-creator]

import React, { useState, useEffect, useRef, useCallback } from "react";
import { Search, Radar, ExternalLink, TrendingUp, ShieldAlert, Compass, Clock, ChevronRight, X, Zap } from "lucide-react";

// ---------------------------------------------------------------------------
// Gap Radar — live AI + web-search niche-finding prototype
// Design language: "analyst console" — deep navy field, teal signal accent,
// monospace data typography paired with a condensed grotesque display face.
// ---------------------------------------------------------------------------

const FONT_IMPORT = @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=JetBrains+Mono:wght@400;500;600&family=Inter:wght@400;500;600&display=swap');;

const TOKENS = {
bg: "#0A0F1C",
surface: "#121A2B",
surfaceRaised: "#172135",
border: "#26324A",
borderBright: "#37455F",
teal: "#5EEAD4",
tealDim: "#1F5F58",
amber: "#F5A623",
red: "#F0725A",
text: "#EDF1F7",
muted: "#8390A8",
faint: "#4E5A73",
};

function useScanTicker(active) {
const [tick, setTick] = useState(0);
useEffect(() => {
if (!active) return;
const id = setInterval(() => setTick((t) => t + 1), 650);
return () => clearInterval(id);
}, [active]);
return tick;
}

const SCAN_MESSAGES = [
"Pulling incumbent product scope\u2026",
"Cross-referencing funding & filing signals\u2026",
"Scanning demand & complaint signals\u2026",
"Scoring incumbent absence\u2026",
"Checking regulatory / complexity moat\u2026",
"Synthesizing cited brief\u2026",
];

function ScoreGauge({ score }) {
const clamped = Math.max(0, Math.min(100, score ?? 0));
const radius = 46;
const circumference = Math.PI * radius; // half circle
const offset = circumference * (1 - clamped / 100);
const color = clamped >= 70 ? TOKENS.teal : clamped >= 40 ? TOKENS.amber : TOKENS.red;
return (
<div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 6 }}>


<path
d="M 10 62 A 46 46 0 0 1 110 62"
fill="none"
stroke={color}
strokeWidth="9"
strokeLinecap="round"
strokeDasharray={circumference}
strokeDashoffset={offset}
style={{ transition: "stroke-dashoffset 900ms cubic-bezier(.16,1,.3,1), stroke 400ms" }}
/>

{clamped}


<div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.12em", color: TOKENS.muted, textTransform: "uppercase" }}>
Opportunity score


);
}

function SourceChip({ title, url }) {
return (
<a
href={url}
target="_blank"
rel="noreferrer"
style={{
display: "inline-flex",
alignItems: "center",
gap: 6,
padding: "6px 10px",
borderRadius: 7,
border: 1px solid ${TOKENS.border},
background: TOKENS.surface,
color: TOKENS.muted,
fontSize: 12,
fontFamily: "'JetBrains Mono', monospace",
textDecoration: "none",
maxWidth: 260,
overflow: "hidden",
whiteSpace: "nowrap",
textOverflow: "ellipsis",
}}
title={url}
>
<ExternalLink size={11} style={{ flexShrink: 0 }} />
<span style={{ overflow: "hidden", textOverflow: "ellipsis" }}>{title || url}

);
}

function SectionLabel({ icon: Icon, children }) {
return (
<div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 10 }}>

<span
style={{
fontFamily: "'JetBrains Mono', monospace",
fontSize: 11,
letterSpacing: "0.14em",
textTransform: "uppercase",
color: TOKENS.muted,
}}
>
{children}


);
}

function ReportCard({ report }) {
return (
<div
style={{
border: 1px solid ${TOKENS.border},
borderRadius: 14,
background: linear-gradient(180deg, ${TOKENS.surfaceRaised} 0%, ${TOKENS.surface} 100%),
padding: 28,
display: "flex",
flexDirection: "column",
gap: 24,
animation: "riseIn 500ms cubic-bezier(.16,1,.3,1)",
}}
>
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 24, flexWrap: "wrap" }}>
<div style={{ flex: 1, minWidth: 240 }}>
<div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: TOKENS.teal, letterSpacing: "0.1em", marginBottom: 8 }}>
NICHE BRIEF

<h2 style={{ fontFamily: "'Space Grotesk', sans-serif", fontSize: 26, fontWeight: 700, color: TOKENS.text, margin: 0, lineHeight: 1.25 }}>
{report.niche}

<p style={{ fontFamily: "'Inter', sans-serif", fontSize: 14.5, color: TOKENS.muted, marginTop: 12, lineHeight: 1.6, maxWidth: 560 }}>
{report.summary}

  {report.why_incumbents_miss_it && (
    <div>
      <SectionLabel icon={Compass}>Why Big Tech skips this</SectionLabel>
      <p style={{ fontFamily: "'Inter', sans-serif", fontSize: 14, color: TOKENS.text, lineHeight: 1.65, margin: 0 }}>
        {report.why_incumbents_miss_it}
      </p>
    </div>
  )}

  {report.market_size_note && (
    <div>
      <SectionLabel icon={TrendingUp}>Market size signal</SectionLabel>
      <p style={{ fontFamily: "'Inter', sans-serif", fontSize: 14, color: TOKENS.text, lineHeight: 1.65, margin: 0 }}>
        {report.market_size_note}
      </p>
    </div>
  )}

  {Array.isArray(report.first_mover_playbook) && report.first_mover_playbook.length > 0 && (
    <div>
      <SectionLabel icon={Zap}>First-mover playbook</SectionLabel>
      <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
        {report.first_mover_playbook.map((step, i) => (
          <div key={i} style={{ display: "flex", gap: 10, alignItems: "flex-start" }}>
            <span
              style={{
                fontFamily: "'JetBrains Mono', monospace",
                fontSize: 11,
                color: TOKENS.teal,
                background: TOKENS.tealDim,
                borderRadius: 5,
                padding: "2px 6px",
                marginTop: 2,
                flexShrink: 0,
              }}
            >
              {String(i + 1).padStart(2, "0")}
            </span>
            <span style={{ fontFamily: "'Inter', sans-serif", fontSize: 14, color: TOKENS.text, lineHeight: 1.6 }}>{step}</span>
          </div>
        ))}
      </div>
    </div>
  )}

  {Array.isArray(report.risk_flags) && report.risk_flags.length > 0 && (
    <div>
      <SectionLabel icon={ShieldAlert}>Risk flags</SectionLabel>
      <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
        {report.risk_flags.map((r, i) => (
          <div key={i} style={{ fontFamily: "'Inter', sans-serif", fontSize: 13.5, color: TOKENS.amber, lineHeight: 1.6 }}>
            \u25B8 {r}
          </div>
        ))}
      </div>
    </div>
  )}

  {Array.isArray(report.evidence) && report.evidence.length > 0 && (
    <div>
      <SectionLabel icon={Search}>Evidence & sources</SectionLabel>
      <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
        {report.evidence.map((e, i) => (
          <div key={i} style={{ display: "flex", flexDirection: "column", gap: 6 }}>
            <span style={{ fontFamily: "'Inter', sans-serif", fontSize: 13.5, color: TOKENS.text, lineHeight: 1.55 }}>{e.point}</span>
            {e.source_url && <SourceChip title={e.source_title} url={e.source_url} />}
          </div>
        ))}
      </div>
    </div>
  )}
</div>

);
}

function RecentChip({ label, onClick }) {
return (
<button
onClick={onClick}
style={{
background: TOKENS.surface,
border: 1px solid ${TOKENS.border},
color: TOKENS.muted,
borderRadius: 999,
padding: "6px 14px",
fontSize: 12.5,
fontFamily: "'Inter', sans-serif",
cursor: "pointer",
transition: "border-color 150ms, color 150ms",
}}
onMouseEnter={(e) => {
e.currentTarget.style.borderColor = TOKENS.teal;
e.currentTarget.style.color = TOKENS.text;
}}
onMouseLeave={(e) => {
e.currentTarget.style.borderColor = TOKENS.border;
e.currentTarget.style.color = TOKENS.muted;
}}
>
{label}

);
}

function extractJson(text) {
const cleaned = text.replace(/json/gi, "").replace(//g, "").trim();
const start = cleaned.indexOf("{");
const end = cleaned.lastIndexOf("}");
if (start === -1 || end === -1) throw new Error("No JSON object found in response");
return JSON.parse(cleaned.slice(start, end + 1));
}

export default function GapRadar() {
const [query, setQuery] = useState("");
const [loading, setLoading] = useState(false);
const [report, setReport] = useState(null);
const [error, setError] = useState(null);
const [recent, setRecent] = useState([]);
const inputRef = useRef(null);
const scanTick = useScanTicker(loading);

useEffect(() => {
(async () => {
try {
const res = await window.storage?.get?.("recent-scans", false);
if (res?.value) setRecent(JSON.parse(res.value));
} catch (e) {
// no prior history, fine
}
})();
}, []);

const saveRecent = useCallback(async (niche) => {
setRecent((prev) => {
const next = [niche, ...prev.filter((p) => p !== niche)].slice(0, 6);
window.storage?.set?.("recent-scans", JSON.stringify(next), false).catch(() => {});
return next;
});
}, []);

const runScan = useCallback(async (q) => {
const term = (q ?? query).trim();
if (!term || loading) return;
setLoading(true);
setError(null);
setReport(null);

const system = `You are the research engine inside "Gap Radar," a product that finds market niches large tech companies are structurally unlikely to serve well (too small, too regulated, too geographically/culturally specific, too manual, or would cannibalize an incumbent's existing product).

Given an industry, keyword, or rough idea from the user, use web_search to research current, real information, then respond with STRICT JSON ONLY — no markdown fences, no prose outside the JSON object — matching exactly this shape:

{
"niche": "string, a specific named niche derived from the query",
"summary": "2-3 sentence plain-language summary of the opportunity",
"opportunity_score": integer 0-100,
"why_incumbents_miss_it": "1-3 sentences on why large tech companies avoid this",
"market_size_note": "1-2 sentences citing any figures found",
"first_mover_playbook": ["step 1", "step 2", "step 3", "step 4"],
"risk_flags": ["risk 1", "risk 2"],
"evidence": [
{"point": "a specific factual claim from research", "source_title": "short source name", "source_url": "https://..."}
]
}

Ground every evidence point and the market_size_note in what you actually find via web_search — do not fabricate sources or statistics. Include 3-5 evidence items with real URLs from your searches. Keep total output concise.`;

try {
  const response = await fetch("https://api.anthropic.com/v1/messages", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({
      model: "claude-sonnet-4-6",
      max_tokens: 1000,
      system,
      messages: [{ role: "user", content: `Research this: ${term}` }],
      tools: [{ type: "web_search_20250305", name: "web_search" }],
    }),
  });

  if (!response.ok) {
    throw new Error(`Request failed (${response.status})`);
  }

  const data = await response.json();
  const textBlocks = (data.content || []).filter((b) => b.type === "text").map((b) => b.text);
  const fullText = textBlocks.join("\n");
  if (!fullText.trim()) throw new Error("Empty response from research engine");

  const parsed = extractJson(fullText);
  setReport(parsed);
  saveRecent(parsed.niche || term);
} catch (e) {
  console.error("Gap Radar scan error:", e);
  setError(e.message || "Something went wrong running the scan.");
} finally {
  setLoading(false);
}

}, [query, loading, saveRecent]);

return (
<div
style={{
minHeight: "100vh",
background: radial-gradient(ellipse 1200px 600px at 50% -10%, #14203A 0%, ${TOKENS.bg} 60%),
color: TOKENS.text,
fontFamily: "'Inter', sans-serif",
padding: "56px 20px 80px",
display: "flex",
flexDirection: "column",
alignItems: "center",
}}
>
<style>{${FONT_IMPORT} * { box-sizing: border-box; } ::selection { background: ${TOKENS.tealDim}; color: ${TOKENS.text}; } input::placeholder { color: ${TOKENS.faint}; } @keyframes riseIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes sweep { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.001ms !important; } }}</style>

  {/* Header */}
  <div style={{ width: "100%", maxWidth: 720, display: "flex", flexDirection: "column", alignItems: "center", marginBottom: 40 }}>
    <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 18 }}>
      <div
        style={{
          width: 34,
          height: 34,
          borderRadius: 9,
          border: `1px solid ${TOKENS.borderBright}`,
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          background: TOKENS.surface,
        }}
      >
        <Radar size={17} color={TOKENS.teal} style={{ animation: loading ? "sweep 2.2s linear infinite" : "none" }} />
      </div>
      <span style={{ fontFamily: "'Space Grotesk', sans-serif", fontSize: 19, fontWeight: 700, letterSpacing: "0.01em" }}>
        GAP RADAR
      </span>
    </div>
    <h1
      style={{
        fontFamily: "'Space Grotesk', sans-serif",
        fontSize: 34,
        fontWeight: 700,
        textAlign: "center",
        lineHeight: 1.2,
        margin: 0,
        maxWidth: 560,
      }}
    >
      Find what Silicon Valley isn't building
    </h1>
    <p style={{ color: TOKENS.muted, textAlign: "center", marginTop: 14, fontSize: 15, maxWidth: 480, lineHeight: 1.6 }}>
      Enter an industry, keyword, or rough idea. This runs a live, cited web-research pass — not a memory lookup.
    </p>
  </div>

  {/* Search bar */}
  <div style={{ width: "100%", maxWidth: 640 }}>
    <div
      style={{
        display: "flex",
        alignItems: "center",
        gap: 10,
        background: TOKENS.surface,
        border: `1px solid ${loading ? TOKENS.teal : TOKENS.border}`,
        borderRadius: 12,
        padding: "6px 8px 6px 16px",
        transition: "border-color 200ms",
      }}
    >
      <Search size={17} color={TOKENS.muted} style={{ flexShrink: 0 }} />
      <input
        ref={inputRef}
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        onKeyDown={(e) => e.key === "Enter" && runScan()}
        placeholder="e.g. compliance software for independent veterinary clinics"
        style={{
          flex: 1,
          background: "transparent",
          border: "none",
          outline: "none",
          color: TOKENS.text,
          fontSize: 15,
          fontFamily: "'Inter', sans-serif",
          padding: "10px 0",
        }}
      />
      {query && !loading && (
        <button
          onClick={() => setQuery("")}
          style={{ background: "none", border: "none", cursor: "pointer", padding: 6, color: TOKENS.faint }}
          aria-label="Clear"
        >
          <X size={15} />
        </button>
      )}
      <button
        onClick={() => runScan()}
        disabled={loading || !query.trim()}
        style={{
          display: "flex",
          alignItems: "center",
          gap: 7,
          background: loading || !query.trim() ? TOKENS.surfaceRaised : TOKENS.teal,
          color: loading || !query.trim() ? TOKENS.muted : "#062421",
          border: "none",
          borderRadius: 8,
          padding: "10px 16px",
          fontFamily: "'JetBrains Mono', monospace",
          fontSize: 12.5,
          fontWeight: 600,
          cursor: loading || !query.trim() ? "default" : "pointer",
          letterSpacing: "0.04em",
          whiteSpace: "nowrap",
          transition: "background 150ms, color 150ms",
        }}
      >
        {loading ? "SCANNING" : "SCAN"}
        {!loading && <ChevronRight size={14} />}
      </button>
    </div>

    {recent.length > 0 && !loading && (
      <div style={{ display: "flex", flexWrap: "wrap", gap: 8, marginTop: 16, alignItems: "center" }}>
        <span style={{ display: "flex", alignItems: "center", gap: 5, color: TOKENS.faint, fontSize: 12 }}>
          <Clock size={12} /> Recent:
        </span>
        {recent.map((r, i) => (
          <RecentChip key={i} label={r} onClick={() => { setQuery(r); runScan(r); }} />
        ))}
      </div>
    )}
  </div>

  {/* Scanning state */}
  {loading && (
    <div style={{ width: "100%", maxWidth: 640, marginTop: 40, display: "flex", flexDirection: "column", alignItems: "center", gap: 14 }}>
      <div style={{ display: "flex", gap: 6 }}>
        {[0, 1, 2].map((i) => (
          <div
            key={i}
            style={{
              width: 6,
              height: 6,
              borderRadius: "50%",
              background: TOKENS.teal,
              animation: `pulse 1.2s ease-in-out ${i * 0.2}s infinite`,
            }}
          />
        ))}
      </div>
      <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 12.5, color: TOKENS.muted, letterSpacing: "0.03em" }}>
        {SCAN_MESSAGES[scanTick % SCAN_MESSAGES.length]}
      </div>
    </div>
  )}

  {/* Error state */}
  {error && !loading && (
    <div
      style={{
        width: "100%",
        maxWidth: 640,
        marginTop: 32,
        border: `1px solid #4A2A26`,
        background: "#1E1210",
        borderRadius: 10,
        padding: "16px 18px",
        color: TOKENS.red,
        fontSize: 13.5,
        fontFamily: "'Inter', sans-serif",
      }}
    >
      Scan failed: {error}. Try a more specific query, or run it again.
    </div>
  )}

  {/* Report */}
  {report && !loading && (
    <div style={{ width: "100%", maxWidth: 720, marginTop: 40 }}>
      <ReportCard report={report} />
    </div>
  )}

  {/* Empty state */}
  {!report && !loading && !error && (
    <div style={{ width: "100%", maxWidth: 640, marginTop: 56, textAlign: "center" }}>
      <div style={{ display: "flex", justifyContent: "center", gap: 24, flexWrap: "wrap" }}>
        {["fintech for immigrant-owned small businesses", "field service tools for HVAC in rural markets", "medical billing for solo practitioners"].map(
          (ex, i) => (
            <button
              key={i}
              onClick={() => { setQuery(ex); runScan(ex); }}
              style={{
                background: "none",
                border: `1px dashed ${TOKENS.border}`,
                borderRadius: 10,
                color: TOKENS.faint,
                padding: "12px 16px",
                fontSize: 12.5,
                fontFamily: "'Inter', sans-serif",
                cursor: "pointer",
                maxWidth: 200,
              }}
            >
              {ex}
            </button>
          )
        )}
      </div>
    </div>
  )}
</div>

);
}