import React from "react" import { callAI } from "call-ai" import { useFireproof } from "use-fireproof" export default function App() { const { database, useDocument, useLiveQuery } = useFireproof("coded-bias-audit"); const { doc: newAudit, merge: mergeAudit, submit: submitAudit } = useDocument({ type: "audit", systemName: "", domain: "", centeredUsers: "", edgeCases: "", dataLogic: "", optimization: "", review: "", critique: "", createdAt: Date.now(), authorSlug: "visitor", authorName: "visitor", authorAvatar: null, }); const { docs: audits } = useLiveQuery("type", { key: "audit", descending: true }); const [selectedId, setSelectedId] = React.useState(null); const [isCritiquing, setIsCritiquing] = React.useState(false); const selected = audits.find(a => a._id === selectedId); async function requestCritique(audit) { setIsCritiquing(true); try { const prompt = `Acting as a scholarly interlocutor drawing on Virginia Eubanks's "Automating Inequality" and Ruha Benjamin's "Race After Technology" (New Jim Code), critique this discriminatory design audit. Surface under-examined power dynamics, draw parallels to documented cases, and propose 2-3 counter-design questions.\n\nSystem: ${audit.systemName} (${audit.domain})\nCentered users: ${audit.centeredUsers}\nEdge cases: ${audit.edgeCases}\nData logic: ${audit.dataLogic}\nOptimization: ${audit.optimization}\nReview: ${audit.review}`; const res = await callAI(prompt, { schema: { properties: { parallels: { type: "string", description: "Parallels to Eubanks/Benjamin cases" }, powerDynamics: { type: "string", description: "Under-examined power dynamics" }, counterQuestions: { type: "array", items: { type: "string" } }, } } }); const parsed = JSON.parse(res); await database.put({ ...audit, critique: parsed }); } finally { setIsCritiquing(false); } } const c = { page: "min-h-screen bg-[#1a1a1a] text-white font-mono", header: "border-b border-[#2a3550] bg-black px-5 py-6 sticky top-0 z-10", title: "text-2xl font-['Archivo_Black'] tracking-wide uppercase", tagline: "text-xs text-[#8a9ab8] mt-1", main: "max-w-2xl mx-auto px-4 py-6 space-y-6 pb-32", section: "border border-[#2a3550] bg-black rounded-sm p-5", sectionTitle: "text-xs uppercase tracking-[0.2em] text-[#8a9ab8] mb-4 font-['Archivo_Black']", input: "w-full bg-[#1a1a1a] border border-[#2a3550] rounded-sm px-3 py-3 text-white text-sm placeholder:text-[#5a6580] focus:outline-none focus:border-white min-h-[44px]", textarea: "w-full bg-[#1a1a1a] border border-[#2a3550] rounded-sm px-3 py-3 text-white text-sm placeholder:text-[#5a6580] focus:outline-none focus:border-white min-h-[88px]", btn: "w-full bg-white text-black px-4 py-3 rounded-sm uppercase tracking-wider text-xs font-['Archivo_Black'] min-h-[44px] disabled:opacity-40", btnGhost: "px-3 py-2 border border-[#2a3550] text-[#8a9ab8] rounded-sm uppercase tracking-wider text-[10px] hover:border-white hover:text-white", row: "border-b border-[#2a3550] py-4 last:border-b-0", avatar: "w-6 h-6 rounded-full border border-[#2a3550]", label: "text-[10px] uppercase tracking-[0.15em] text-[#8a9ab8] mb-1 block", badge: "inline-block text-[10px] uppercase tracking-wider px-2 py-1 border border-[#2a3550] text-[#8a9ab8]", }; return (

01 — Open New Audit

02 — Analytical Dimensions

{!selected ? (

Select an audit from the library below to examine its dimensions.

) : (

{selected.systemName}

{selected.domain}

{[ { key: "centeredUsers", label: "Whose use case was centered?" }, { key: "edgeCases", label: "Who was treated as edge case?" }, { key: "dataLogic", label: "What data was collected — and why?" }, { key: "optimization", label: "What outcomes was it optimized for?" }, { key: "review", label: "Who reviews its decisions?" }, ].map(field => (

{field.label}

database.put({ ...selected, [field.key]: e.target.value })}
                    placeholder="…"
                  />
                </div>
              ))}
              <button onClick={() => requestCritique(selected)} disabled={isCritiquing} className={c.btn}>
                {isCritiquing ? (
                  <svg className="animate-spin inline w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="9" strokeDasharray="40 20"/></svg>
                ) : "Request Scholarly Critique"}
              </button>
              {selected.critique && typeof selected.critique === "object" && (
                <div className="border border-white p-4 mt-4 space-y-3 bg-[#1a1a1a]">
                  <div className={c.label}>Critique — Eubanks / Benjamin lens</div>
                  <div>
                    <div className="text-[10px] uppercase text-[#8a9ab8] mb-1">Parallels</div>
                    <p className="text-sm">{selected.critique.parallels}</p>
                  </div>
                  <div>
                    <div className="text-[10px] uppercase text-[#8a9ab8] mb-1">Power Dynamics</div>
                    <p className="text-sm">{selected.critique.powerDynamics}</p>
                  </div>
                  <div>
                    <div className="text-[10px] uppercase text-[#8a9ab8] mb-1">Counter-Design Questions</div>
                    <ul className="text-sm list-disc pl-4 space-y-1">
                      {(selected.critique.counterQuestions || []).map((q, i) => <li key={i}>{q}</li>)}
                    </ul>
                  </div>
                </div>
              )}
            </div>
          )}
        </section>
        <section id="audit-library" className={c.section}>
          <h2 className={c.sectionTitle}>03 — Audit Library ({audits.length})</h2>
          {audits.length === 0 ? (
            <p className="text-sm text-[#5a6580]">No audits opened yet.</p>
          ) : (
            <ul>
              {audits.map(a => (
                <li key={a._id} className={c.row}>
                  <button onClick={() => setSelectedId(a._id)} className="w-full text-left">
                    <div className="flex items-center justify-between mb-2">
                      <span className="text-sm font-['Archivo_Black'] uppercase">{a.systemName || "Untitled"}</span>
                      {a.critique && <span className={c.badge}>critiqued</span>}
                    </div>
                    <div className="flex items-center gap-2 text-[10px] text-[#8a9ab8] uppercase tracking-wider">
                      {a.authorAvatar && <img src={a.authorAvatar} alt="" className={c.avatar} />}
                      <span>{a.authorName || "anon"}</span>
                      <span>·</span>
                      <span>{a.domain}</span>
                    </div>
                  </button>
                </li>
              ))}
            </ul>
          )}
        </section>
      </main>
    </div>
  );
}</article></body></html>

01 — Open New Audit

02 — Analytical Dimensions

03 — Audit Library (0)