Initial commit: CI Agent competitive-intelligence monitoring app

FastAPI + Celery + Next.js + Postgres/Redis app with company monitoring, source collection, LLM-based change analysis, enrichment, and account security (Turnstile, escalating lockout, email verification).
2026-08-05 10:48:20 -04:00
commit 1a4c80958f
365 changed files with 43541 additions and 0 deletions
@@ -0,0 +1,134 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { Check, Eye, EyeOff, Loader2, Save } from "lucide-react";
+import { useSetUserApiKey } from "@/hooks/use-auth";
+import type { UserApiKeyStatus } from "@/lib/types";
+
+/** One provider's own-key row: label, editable masked textbox with a
+ * hide/unhide toggle, credit/free-tier info, and a blue Update button - all
+ * with the same crossfade-icon transition language as the admin-only
+ * server-key box's Show/Hide toggle (api-key-row.tsx). Unlike that box,
+ * this one is per-user and editable: each user only ever sees/sets their
+ * own key here, never anyone else's.
+ *
+ * `liveCredits`, when passed, overrides the number shown for the numeric
+ * "N credits remaining" line - used for NinjaPear, which sources its
+ * balance from useSystemStatus()'s already-fetched ninjapear_credit_balance
+ * (the same number shown in System configuration below) rather than this
+ * component making its own separate, redundant live call. */
+export function UserApiKeyRow({
+  apiKey,
+  liveCredits,
+}: {
+  apiKey: UserApiKeyStatus;
+  liveCredits?: number | null;
+}) {
+  const [value, setValue] = useState(apiKey.value ?? "");
+  const [revealed, setRevealed] = useState(false);
+  const [justSaved, setJustSaved] = useState(false);
+  const savedTimeout = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const setKey = useSetUserApiKey();
+
+  useEffect(
+    () => () => {
+      if (savedTimeout.current) clearTimeout(savedTimeout.current);
+    },
+    [],
+  );
+
+  const dirty = value !== (apiKey.value ?? "");
+  const credits = liveCredits !== undefined ? liveCredits : apiKey.credits;
+
+  const handleUpdate = () => {
+    setKey.mutate(
+      { provider: apiKey.provider, payload: { key: value } },
+      {
+        onSuccess: (updated) => {
+          setValue(updated.value ?? "");
+          setJustSaved(true);
+          if (savedTimeout.current) clearTimeout(savedTimeout.current);
+          savedTimeout.current = setTimeout(() => setJustSaved(false), 1800);
+        },
+      },
+    );
+  };
+
+  return (
+    <div>
+      <div className="flex items-baseline justify-between gap-2">
+        <label className="block text-sm font-medium text-slate-700">{apiKey.label}</label>
+        {apiKey.free && (
+          <span className="inline-flex items-center rounded-full bg-green-50 px-2 py-0.5 text-[11px] font-medium text-green-700">
+            Free{apiKey.requires_government_id ? " · requires government ID approval" : ""}
+          </span>
+        )}
+      </div>
+      <div className="mt-1 flex items-center gap-2">
+        <input
+          type={revealed ? "text" : "password"}
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+          placeholder={apiKey.configured ? undefined : "Not set"}
+          className="focus-ring block w-full rounded-md border border-slate-300 px-3 py-2 font-mono text-sm text-slate-900 shadow-sm transition-colors duration-150 placeholder:font-sans placeholder:text-slate-400"
+        />
+        <button
+          type="button"
+          onClick={() => setRevealed((r) => !r)}
+          title={revealed ? "Hide key" : "Show key"}
+          className="focus-ring inline-flex shrink-0 items-center justify-center rounded-md border border-slate-300 p-2 text-slate-500 transition-colors duration-200 hover:border-brand-300 hover:bg-brand-50 hover:text-brand-700"
+        >
+          <span className="relative block h-4 w-4">
+            <Eye
+              className={`absolute inset-0 h-4 w-4 transition-opacity duration-200 ${revealed ? "opacity-0" : "opacity-100"}`}
+              aria-hidden
+            />
+            <EyeOff
+              className={`absolute inset-0 h-4 w-4 transition-opacity duration-200 ${revealed ? "opacity-100" : "opacity-0"}`}
+              aria-hidden
+            />
+          </span>
+        </button>
+        <button
+          type="button"
+          onClick={handleUpdate}
+          disabled={!dirty || setKey.isPending}
+          title="Update key"
+          className="focus-ring inline-flex shrink-0 items-center gap-1.5 rounded-md bg-brand-600 px-3 py-2 text-sm font-semibold text-white transition-colors duration-200 hover:bg-brand-700 disabled:cursor-not-allowed disabled:opacity-50"
+        >
+          <span className="relative block h-4 w-4">
+            <Save
+              className={`absolute inset-0 h-4 w-4 transition-opacity duration-200 ${
+                setKey.isPending || justSaved ? "opacity-0" : "opacity-100"
+              }`}
+              aria-hidden
+            />
+            <Loader2
+              className={`absolute inset-0 h-4 w-4 animate-spin transition-opacity duration-200 ${
+                setKey.isPending ? "opacity-100" : "opacity-0"
+              }`}
+              aria-hidden
+            />
+            <Check
+              className={`absolute inset-0 h-4 w-4 transition-opacity duration-200 ${
+                justSaved && !setKey.isPending ? "opacity-100" : "opacity-0"
+              }`}
+              aria-hidden
+            />
+          </span>
+          Update
+        </button>
+      </div>
+      <p className="mt-1 text-xs text-slate-500">
+        {apiKey.configured
+          ? credits !== null && credits !== undefined
+            ? `${credits} credits remaining. ${apiKey.credits_note ?? ""}`
+            : (apiKey.credits_note ?? "")
+          : (apiKey.credits_note ?? "")}
+      </p>
+      {setKey.isError && (
+        <p className="mt-1 text-xs text-red-600">Couldn&apos;t save that key. Try again.</p>
+      )}
+    </div>
+  );
+}