App.jsx import React, { useState } from "react" import { callAI } from "call-ai" import { ImgVibes } from "img-vibes" import { useFireproof } from "use-fireproof" const neobrutalistTheme = ` @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Space+Grotesk:wght@400;500;600;700&display=optional'); :root { --bg: oklch(0.96 0.01 90); --card-bg: oklch(1.00 0 0); --text: oklch(0.15 0.02 280); --border: oklch(0.15 0.02 280); --muted: oklch(0.50 0.02 280); --red: oklch(0.55 0.24 28); --yellow: oklch(0.85 0.18 85); --yellow-dark: oklch(0.75 0.16 85); --green: oklch(0.62 0.19 145); --blue: oklch(0.52 0.18 255); --shadow: 4px 4px 0px var(--border); --shadow-sm: 3px 3px 0px var(--border); --radius: 4px; --font-sans: 'Space Grotesk', sans-serif; --font-mono: 'JetBrains Mono', monospace; } body { background-color: var(--bg); color: var(--text); font-family: var(--font-sans); background-image: linear-gradient(to right, oklch(0.15 0.02 280 / 0.04) 1px, transparent 1px), linear-gradient(to bottom, oklch(0.15 0.02 280 / 0.04) 1px, transparent 1px); background-size: 60px 60px; background-attachment: fixed; } .font-mono { font-family: var(--font-mono); } /* Neobrutalist Interactions */ .neo-elevated { background: var(--card-bg); border: 3px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); } .neo-sm { background: var(--card-bg); border: 3px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); } .neo-hover:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0px var(--border); } .neo-hover:active { transform: translate(2px, 2px); box-shadow: none; transition: all 0.05s; } .neo-input:focus { transform: translate(-2px, -2px); box-shadow: var(--shadow-sm); } `; export default function App() { const c = { page: "min-h-screen p-4 md:p-8 flex flex-col items-center relative overflow-x-hidden text-[var(--text)]", ambient: "fixed inset-0 z-0 pointer-events-none", container: "w-full max-w-[920px] relative z-10 flex flex-col gap-8", header: "flex flex-col md:flex-row justify-between items-start md:items-center p-4 gap-4 neo-elevated w-full", logoGroup: "flex items-center gap-2", logoBlocks: "flex gap-1", logoBlock: "w-3 h-3 rounded-[2px] border-[2px] border-[var(--border)]", brand: "text-xl font-[700] uppercase tracking-[-0.02em]", navPill: "px-4 py-2 text-[0.7rem] font-[700] uppercase tracking-[0.05em] neo-sm", heroCard: "p-6 md:p-8 flex flex-col gap-6 relative neo-elevated w-full pt-10", heroAccentBar: "absolute top-0 left-0 right-[-3px] h-[6px] flex overflow-hidden border-b-[3px] border-[var(--border)]", heroAccentSeg: "flex-1", heroTitleWrap: "relative mb-2", heroTitle: "text-3xl md:text-5xl font-[700] uppercase tracking-[-0.02em] relative z-10", heroShadow: "text-3xl md:text-5xl font-[700] uppercase tracking-[-0.02em] absolute top-[5px] left-[5px] z-0 pointer-events-none text-[var(--red)] opacity-50", grid2: "grid grid-cols-1 md:grid-cols-2 gap-6", formCol: "flex flex-col gap-4", fieldGrp: "flex flex-col gap-1", label: "text-[0.65rem] uppercase tracking-[0.15em] font-[700] text-[var(--muted)]", input: "w-full p-3 text-[0.82rem] transition-all outline-none bg-[var(--bg)] border-[3px] border-[var(--border)] rounded-[var(--radius)] neo-input font-mono", select: "w-full p-3 text-[0.82rem] transition-all outline-none appearance-none cursor-pointer bg-[var(--bg)] border-[3px] border-[var(--border)] rounded-[var(--radius)] neo-input font-bold", row: "flex gap-3", checkboxGrp: "flex items-center gap-2 cursor-pointer group mt-2", checkbox: "w-[22px] h-[22px] border-[3px] border-[var(--border)] rounded-[var(--radius)] flex items-center justify-center transition-all bg-[var(--card-bg)] group-hover:bg-[var(--yellow)]", btnPrimary: "flex-1 px-4 py-3 text-[0.8rem] font-[700] uppercase tracking-[0.08em] transition-all text-center flex items-center justify-center gap-2 neo-sm neo-hover bg-[var(--red)] text-[var(--card-bg)] min-h-[44px]", btnSecondary: "flex-1 px-4 py-3 text-[0.8rem] font-[700] uppercase tracking-[0.08em] transition-all text-center flex items-center justify-center gap-2 neo-sm neo-hover bg-[var(--yellow)] min-h-[44px]", btnGhost: "px-4 py-2 text-[0.8rem] font-[700] uppercase tracking-[0.08em] transition-all bg-[var(--card-bg)] hover:shadow-[3px_3px_0px_var(--border)] border-[3px] border-transparent hover:border-[var(--border)] rounded-[var(--radius)]", btnAi: "p-2 min-w-[46px] flex items-center justify-center transition-all aspect-square neo-sm neo-hover bg-[var(--blue)] text-[var(--card-bg)]", tableCard: "overflow-x-auto neo-elevated w-full", table: "w-full text-left border-collapse min-w-[600px] bg-[var(--card-bg)]", th: "p-3 text-[0.6rem] uppercase tracking-[0.15em] font-[700] border-b-[2px] border-[var(--border)] text-[var(--muted)]", td: "p-3 text-[0.82rem] border-b-[1px] border-black/10 transition-colors group-hover:bg-[var(--yellow)] font-mono", badge: "inline-block px-2 py-1 rounded-[2px] text-[0.65rem] uppercase font-[700] tracking-wider border-[2px] border-[var(--border)]", triageBtn: "px-3 py-1.5 text-[0.7rem] font-[700] uppercase tracking-[0.08em] transition-all whitespace-nowrap neo-sm neo-hover bg-[var(--green)]" } const { useLiveQuery, database } = useFireproof("nda-triage"); const { docs } = useLiveQuery("type", { descending: true }); const ndaQueue = docs.filter(d => d.recordType === 'nda'); const pendingCount = ndaQueue.filter(d => d.status === 'pending').length; const [aiLoading, setAiLoading] = useState(false); const [ideaLoading, setIdeaLoading] = useState(false); const [doc, setDoc] = useState({ counterparty: "", type: "MUTUAL", risk: "", redline: false }) const hardcodedDocs = [ { _id: '1', counterparty: 'MegaCorp Inc', type: 'MUTUAL', risk: 'HIGH', status: 'pending', date: Date.now() - 3600000 }, { _id: '2', counterparty: 'Vendor LLC', type: 'ONE-WAY-OUT', risk: 'LOW', status: 'triaged', date: Date.now() - 86400000 } ] const handleSubmit = async (e) => { e.preventDefault() if (!doc.counterparty) return; await database.put({ ...doc, recordType: 'nda', status: 'pending', createdAt: Date.now() }) setDoc({ counterparty: "", type: "MUTUAL", risk: "", redline: false }) } return (

Legal Triage

{pendingCount} pending

Intake Dossier

Counterparty

setDoc({...doc, counterparty: e.target.value})} />

NDA Type

Risk Level

setDoc({...doc, redline: e.target.checked})} /> Requires Redlining

{ndaQueue.sort((a,b) => b.createdAt - a.createdAt).map(queueDoc => ( ))} {ndaQueue.length === 0 && ( )}

Arrival	Counterparty	Type	Risk	Action
{Math.round((Date.now() - queueDoc.createdAt) / 60000)}m	{queueDoc.counterparty}	{queueDoc.type}	{queueDoc.risk \|\| 'NONE'}	{queueDoc.status === 'pending' ? ( ) : ( Triaged )}
Queue is empty. File a document above.

) }