const { useState } = React; // CAL // Opportunity Triage // Compliant co-pilot: scores a pasted job + drafts a tailored proposal. // You review and submit manually on the platform. Nothing is auto-sent. const PLATFORMS = [ { id: "upwork", label: "Upwork", url: "https://www.upwork.com/nx/find-work/" }, { id: "fiverr", label: "Fiverr", url: "https://www.fiverr.com/" }, { id: "contra", label: "Contra", url: "https://contra.com/" }, { id: "other", label: "Other", url: "" }, ]; const DEFAULT_OFFER = `I take AI-generated prototypes (Lovable, Bolt, v0, Replit, Cursor) to production, and modernize legacy WordPress sites into Next.js. Senior full-stack engineer: Next.js, React, Node, TypeScript, Cloudflare (Workers / D1 / R2), Postgres. I harden auth, fix database schemas, close security gaps, and ship reliable, deployable software. Founder of Cryptic Arts Laboratory. Packages: Audit ($300-500, fast turnaround) / Production Hardening Sprint ($1.5k-4k) / Full build or migration ($5k+).`; // ---- inline Heroicons (no emoji, per house style) ---- const Icon = { Bolt: (p) => ( ), Clipboard: (p) => ( ), Check: (p) => ( ), ArrowUpRight: (p) => ( ), Warning: (p) => ( ), Spinner: (p) => ( ), }; function scoreColor(s) { if (s >= 75) return "var(--good)"; if (s >= 50) return "var(--mid)"; return "var(--low)"; } function OpportunityTriage() { const [offer, setOffer] = useState(DEFAULT_OFFER); const [showOffer, setShowOffer] = useState(false); const [platform, setPlatform] = useState("upwork"); const [jobText, setJobText] = useState(""); const [loading, setLoading] = useState(false); const [error, setError] = useState(""); const [queue, setQueue] = useState([]); const [copiedId, setCopiedId] = useState(null); async function triage() { const text = jobText.trim(); if (!text || loading) return; setLoading(true); setError(""); const prompt = `You are triaging a freelance job posting for a senior full-stack engineer. Here is the engineer's offer: ${offer} Here is the job posting (from ${platform}): ${text} Assess fit and write a proposal. Respond ONLY with valid JSON, no markdown fences, no preamble, in exactly this shape: { "fitScore": , "fitReason": "", "stack": "", "budget": "", "timeline": "", "redFlags": ["", ...], "draft": "" }`; try { const res = await fetch("https://api.anthropic.com/v1/messages", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ model: "claude-sonnet-4-20250514", max_tokens: 1000, messages: [{ role: "user", content: prompt }], }), }); const data = await res.json(); const raw = (data.content || []) .filter((b) => b.type === "text") .map((b) => b.text) .join("\n") .replace(/```json|```/g, "") .trim(); let parsed; try { parsed = JSON.parse(raw); } catch { parsed = { fitScore: 0, fitReason: "Could not parse model output.", stack: "—", budget: "—", timeline: "—", redFlags: [], draft: raw }; } const item = { id: Date.now(), platform, platformUrl: PLATFORMS.find((p) => p.id === platform)?.url || "", snippet: text.slice(0, 140), ...parsed, }; setQueue((q) => [item, ...q].sort((a, b) => (b.fitScore || 0) - (a.fitScore || 0))); setJobText(""); } catch (e) { setError("Request failed. Check the connection and try again."); } finally { setLoading(false); } } async function copyDraft(item) { try { await navigator.clipboard.writeText(item.draft); setCopiedId(item.id); setTimeout(() => setCopiedId((c) => (c === item.id ? null : c)), 1600); } catch { setError("Copy failed — select the text manually."); } } return (
CRYPTIC ARTS LABORATORY

Opportunity Triage

Drafts only — you review & send
{/* Offer profile */}
{showOffer ? (