import React from "react" import { callAI } from "call-ai" import { useFireproof } from "use-fireproof" import { useViewer } from "use-vibes" export default function App() { const { viewer, can } = useViewer() const { useDocument, useLiveQuery, database } = useFireproof("case-dossier") const { doc: intake, merge: mergeIntake, submit: submitIntake } = useDocument({ type: "case", caseType: "Rezoning", parcelId: "", applicant: "", action: "", zoning: "", step: 0, createdAt: Date.now(), }) const { docs: cases } = useLiveQuery("type", { key: "case", descending: true }) const [selectedId, setSelectedId] = React.useState(null) const selectedCase = cases.find((x) => x._id === selectedId) const { docs: caseComments } = useLiveQuery("commentCaseId", { key: selectedId || "__none__" }) const [suggestingIntake, setSuggestingIntake] = React.useState(false) const [commentBody, setCommentBody] = React.useState("") const [draftingReport, setDraftingReport] = React.useState(false) const [findingPrecedents, setFindingPrecedents] = React.useState(false) const [reportDraft, setReportDraft] = React.useState(null) const [precedents, setPrecedents] = React.useState(null) const WORKFLOWS = { "Rezoning": ["Completeness Check", "Department Distribution", "Neighborhood Notification", "Comment Period", "Staff Report", "Planning Commission", "Council Action"], "Conditional Use Permit": ["Completeness Check", "Department Distribution", "Neighborhood Notification", "Comment Period", "Staff Report", "Planning Commission Decision"], "Subdivision Plat": ["Completeness Check", "Department Distribution", "Engineering Review", "Staff Report", "Planning Commission Decision"], "Variance": ["Completeness Check", "Neighborhood Notification", "Comment Period", "Staff Report", "Board of Adjustment"], "Environmental Impact Assessment": ["Completeness Check", "SEPA Threshold Determination", "EIS Scoping", "Draft EIS", "Public Comment on DEIS", "Final EIS", "Agency Decision"], "Comprehensive Plan Amendment": ["Completeness Check", "Consistency Analysis", "Department Distribution", "Neighborhood Notification", "Comment Period", "Staff Report", "Planning Commission", "Council Hearing", "Council Action"], } async function handleIntakeSuggest() { setSuggestingIntake(true) try { const r = await callAI("Generate an example development application intake for a municipal planning department.", { schema: { properties: { parcelId: { type: "string" }, applicant: { type: "string" }, action: { type: "string" }, zoning: { type: "string" } } }, }) const s = JSON.parse(r) mergeIntake(s) } finally { setSuggestingIntake(false) } } async function handleAdvance(cs) { const steps = WORKFLOWS[cs.caseType] || [] if (cs.step >= steps.length) return await database.put({ ...cs, step: cs.step + 1 }) } async function handleLogComment() { if (!selectedId || !commentBody.trim()) return await database.put({ type: "comment", commentCaseId: selectedId, body: commentBody.trim(), authorSlug: viewer?.userSlug || "anonymous", authorName: viewer?.displayName ?? viewer?.userSlug ?? "anonymous", authorAvatar: viewer?.avatarUrl ?? "", createdAt: Date.now(), }) setCommentBody("") } async function handleDraftReport() { if (!selectedCase) return setDraftingReport(true); setReportDraft(null) try { const r = await callAI(`Draft a planning staff report for a ${selectedCase.caseType} application. Parcel: ${selectedCase.parcelId}. Applicant: ${selectedCase.applicant}. Action: ${selectedCase.action}. Existing zoning/comp plan: ${selectedCase.zoning}. Return structured sections.`, { schema: { properties: { findings: { type: "string" }, consistencyAnalysis: { type: "string" }, conditions: { type: "array", items: { type: "string" } }, suggestedMotion: { type: "string" } } }, }) setReportDraft(JSON.parse(r)) } finally { setDraftingReport(false) } } async function handleFindPrecedents() { if (!selectedCase) return setFindingPrecedents(true); setPrecedents(null) const priorSummaries = cases.filter((x) => x._id !== selectedCase._id && x.caseType === selectedCase.caseType).slice(0, 10).map((x) => `${x.caseType} at ${x.parcelId}: ${x.action}`).join("; ") try { const r = await callAI(`Summarize how similar past ${selectedCase.caseType} cases have been decided and what discussion themes arose. Prior cases on file: ${priorSummaries || "none"}. Current case: ${selectedCase.action} at ${selectedCase.parcelId}.`, { schema: { properties: { comparable: { type: "array", items: { type: "object", properties: { summary: { type: "string" }, outcome: { type: "string" } } } }, discussionThemes: { type: "array", items: { type: "string" } } } }, }) setPrecedents(JSON.parse(r)) } finally { setFindingPrecedents(false) } } const Spinner = () => ( ) const c = { page: "min-h-screen bg-[#28282b] text-[#f5f5f0] font-mono", header: "sticky top-0 z-10 bg-[#0a0a0a] border-b border-[#3d4a5c] px-4 py-3 flex items-center justify-between", title: "text-lg font-black tracking-widest uppercase", tagline: "text-[10px] tracking-[0.2em] uppercase text-[#8b95a7]", main: "max-w-3xl mx-auto px-4 py-5 space-y-5 pb-24", section: "bg-[#0a0a0a] border border-[#3d4a5c] rounded-sm", sectionHead: "px-4 py-3 border-b border-[#3d4a5c] flex items-center justify-between", sectionTitle: "text-xs font-black tracking-[0.2em] uppercase", sectionBody: "p-4 space-y-3", btn: "min-h-[44px] px-4 py-2 bg-[#f5f5f0] text-[#0a0a0a] text-xs font-black tracking-widest uppercase rounded-sm hover:bg-white disabled:opacity-50", btnGhost: "min-h-[44px] px-3 py-2 border border-[#3d4a5c] text-[#f5f5f0] text-xs font-black tracking-widest uppercase rounded-sm hover:bg-[#1a1a1d] disabled:opacity-50", input: "w-full min-h-[44px] px-3 py-2 bg-[#1a1a1d] border border-[#3d4a5c] text-[#f5f5f0] text-sm rounded-sm focus:outline-none focus:border-[#f5f5f0]", label: "block text-[10px] tracking-[0.2em] uppercase text-[#8b95a7] mb-1", row: "p-3 border border-[#3d4a5c] rounded-sm bg-[#1a1a1d] hover:border-[#f5f5f0] cursor-pointer", pill: "inline-block px-2 py-0.5 text-[10px] tracking-widest uppercase border border-[#3d4a5c] rounded-sm", avatar: "w-7 h-7 rounded-full border border-[#3d4a5c]", muted: "text-xs text-[#8b95a7]", } return (

New Case Intake

{can("write") && ( )}

{can("write") ? (

Case Type

Parcel ID mergeIntake({ parcelId: e.target.value })} placeholder="e.g. 04-2310-001" />

Applicant mergeIntake({ applicant: e.target.value })} placeholder="Name or entity" />

Requested Action mergeIntake({ action: e.target.value })} placeholder="e.g. Rezone R-1 to MU-3" />

Existing Zoning / Comp Plan mergeIntake({ zoning: e.target.value })} placeholder="e.g. R-1, Low Density Residential" />

) : (

Read-only view — contact the planning department for write access.

)}

Active Caseload

{cases.length} case{cases.length === 1 ? "" : "s"}

{cases.length === 0 &&

No cases filed yet.

} {cases.map((cs) => { const steps = WORKFLOWS[cs.caseType] || [] const currentStep = steps[cs.step] || "Closed" return (

setSelectedId(cs._id === selectedId ? null : cs._id)} className={`${c.row} ${selectedId === cs._id ? "border-[#f5f5f0]" : ""}`}>

{cs.caseType} · {cs.parcelId || "—"} {currentStep}

{cs.applicant || "—"} · {cs.action || "—"}

) })}

Case Detail

{selectedCase && {selectedCase.parcelId}}

{!selectedCase &&

Select a case from the caseload to view workflow and comments.

} {selectedCase && ( <>

Type{selectedCase.caseType}

Applicant{selectedCase.applicant}

Action{selectedCase.action}

Existing{selectedCase.zoning}

Workflow Steps

{i + 1}. {step} {i === selectedCase.step && Current}

{can("write") && selectedCase.step < (WORKFLOWS[selectedCase.caseType] || []).length && ( )}

Comment Log

{caseComments.length === 0 &&

No comments logged.

}

{cm.authorAvatar && }

{cm.authorName}

{cm.body}

{can("write") && (

setCommentBody(e.target.value)} placeholder="Log a written comment received during the comment period" />
                      <button type="button" onClick={handleLogComment} className={c.btn}>Log Comment</button>
                    </div>
                  )}
                </div>
              </>
            )}
          </div>
        </section>

<section id="ai-tools" className={c.section}>
          <div className={c.sectionHead}>
            <h2 className={c.sectionTitle}>Drafting & Memory</h2>
          </div>
          <div className={c.sectionBody}>
            {!selectedCase && <p className={c.muted}>Select a case above to draft a staff report or pull comparable past decisions.</p>}
            {selectedCase && can("write") && (
              <div className="flex gap-2 flex-wrap">
                <button type="button" onClick={handleDraftReport} disabled={draftingReport} className={c.btn}>
                  {draftingReport ? <><Spinner /> Drafting…</> : "Draft Staff Report"}
                </button>
                <button type="button" onClick={handleFindPrecedents} disabled={findingPrecedents} className={c.btnGhost}>
                  {findingPrecedents ? <><Spinner /> Searching…</> : "Find Precedents"}
                </button>
              </div>
            )}
            {selectedCase && !can("write") && <p className={c.muted}>Read-only — staff report drafting requires write access.</p>}

{reportDraft && (
              <div className="mt-2 space-y-3 p-3 border border-[#3d4a5c] rounded-sm bg-[#1a1a1d]">
                <div>
                  <h4 className={c.label}>Findings of Fact</h4>
                  <p className="text-sm whitespace-pre-wrap">{reportDraft.findings}</p>
                </div>
                <div>
                  <h4 className={c.label}>Consistency Analysis</h4>
                  <p className="text-sm whitespace-pre-wrap">{reportDraft.consistencyAnalysis}</p>
                </div>
                <div>
                  <h4 className={c.label}>Recommended Conditions</h4>
                  <ul className="text-sm list-disc pl-5">
                    {(reportDraft.conditions || []).map((cd, i) => <li key={i}>{cd}</li>)}
                  </ul>
                </div>
                <div>
                  <h4 className={c.label}>Suggested Motion</h4>
                  <p className="text-sm whitespace-pre-wrap">{reportDraft.suggestedMotion}</p>
                </div>
              </div>
            )}

{precedents && (
              <div className="mt-2 space-y-3 p-3 border border-[#3d4a5c] rounded-sm bg-[#1a1a1d]">
                <div>
                  <h4 className={c.label}>Comparable Past Cases</h4>
                  <ul className="text-sm space-y-2">
                    {(precedents.comparable || []).map((p, i) => (
                      <li key={i}>
                        <div>{p.summary}</div>
                        <div className={c.muted}>Outcome: {p.outcome}</div>
                      </li>
                    ))}
                  </ul>
                </div>
                <div>
                  <h4 className={c.label}>Discussion Themes</h4>
                  <ul className="text-sm list-disc pl-5">
                    {(precedents.discussionThemes || []).map((t, i) => <li key={i}>{t}</li>)}
                  </ul>
                </div>
              </div>
            )}
          </div>
        </section>
      </main>
    </div>
  )
}</article></body></html>