# Casefile, Legal review desk > A lawyer's desk with an AI assistant: pull contracts with needles, mark up a clause, check the answer's sources, redact, and seal before it leaves. A whole screen for a Next.js app, at /review-desk. A shadcn/ui block from the [@bevel](https://bevel-ui.vercel.app/?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/bevel/review-desk). - Page, with a live preview: https://shadcn.exchange/r/bevel/review-desk - Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/bevel/review-desk-light-226917f22e6a56a0.png - Registry item: https://bevel-ui.vercel.app/r/review-desk.json - Categories: blocks - Listed: 2026-10-20, source last changed 2026-10-20 ## Install ```bash npx shadcn@latest add https://shadcn.exchange/r/bevel/review-desk.json ``` Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on. ## Dependencies - Registry items: `https://bevel-ui.vercel.app/r/bevel.json`, `https://bevel-ui.vercel.app/r/approval.json`, `https://bevel-ui.vercel.app/r/citation.json`, `https://bevel-ui.vercel.app/r/keysort-filter.json`, `https://bevel-ui.vercel.app/r/redaction.json`, `https://bevel-ui.vercel.app/r/redline.json`, `https://bevel-ui.vercel.app/r/stamp.json` ## Files ### `registry/bevel/blocks/review-desk/casefile/casefile-app.tsx` ```tsx "use client" import * as React from "react" import { demoMilestone } from "../shared/events" import { cn } from "@/lib/utils" import { KeysortFilter, KeysortFilterCard, KeysortFilterCount, KeysortFilterDeck, KeysortFilterNeedle, KeysortFilterNeedles, } from "@/components/ui/keysort-filter" import { Redline, RedlineChange, RedlineDocument, RedlineToolbar, type RedlineDecision } from "@/components/ui/redline" import { Citation, CitationContent, CitationLocation, CitationQuote, CitationSource, CitationStatus, CitationTrigger, } from "@/components/ui/citation" import { Redaction } from "@/components/ui/redaction" import { Approval, ApprovalActions, ApprovalDescription, ApprovalReject, ApprovalSeal, ApprovalSignature, ApprovalSignatures, ApprovalTitle, type ApprovalState, } from "@/components/ui/approval" import { Stamp, StampDetail } from "@/components/ui/stamp" import { Legend } from "../shared/environment" import { documentFace } from "../shared/fonts" import { changeIds, contracts, needles, type Contract } from "./contracts" const TODAY = "17 Oct 2026" type Review = { decisions: Record redacted: string[] opened: number[] approval: ApprovalState } const emptyReview: Review = { decisions: {}, redacted: [], opened: [], approval: "pending" } function progressOf(contract: Contract, review: Review) { const changes = changeIds(contract) const decided = changes.filter((id) => review.decisions[id]).length const redacted = contract.note.flags.filter((f) => review.redacted.includes(f.id)).length const opened = contract.sources.filter((s) => review.opened.includes(s.n)).length return { changes: { done: decided, total: changes.length }, redactions: { done: redacted, total: contract.note.flags.length }, sources: { done: opened, total: contract.sources.length }, ready: decided === changes.length && redacted === contract.note.flags.length && opened === contract.sources.length, } } /* The desk. Oak, lit from the upper left, with a grain that runs across it. */ const deskSurface: React.CSSProperties = { backgroundColor: "#3A2A1F", backgroundImage: [ "radial-gradient(ellipse 80% 60% at 12% 0%, rgb(255 226 180 / 0.11), transparent 70%)", "radial-gradient(ellipse 90% 70% at 100% 100%, rgb(0 0 0 / 0.32), transparent 70%)", "repeating-linear-gradient(178deg, rgb(255 255 255 / 0.022) 0 2px, transparent 2px 9px, rgb(0 0 0 / 0.05) 9px 11px, transparent 11px 23px)", "repeating-linear-gradient(181deg, transparent 0 41px, rgb(0 0 0 / 0.07) 41px 44px, transparent 44px 97px)", ].join(", "), } /* Paper lying on the desk: its shadow falls down and to the right, away from the light. */ const onDesk = "shadow-[0_1px_1px_rgb(0_0_0/0.35),6px_14px_28px_-8px_rgb(0_0_0/0.6)]" /* Words printed on the desk itself. */ const deskLegend = "font-normal italic tracking-normal text-[17px] [text-shadow:0_1px_0_rgb(0_0_0/0.5)]" /** Casefile: a legal review desk for one matter, with an AI assistant. */ export function CasefileApp() { const [pushed, setPushed] = React.useState(["signed", "renews"]) const [openId, setOpenId] = React.useState("msa") const [reviews, setReviews] = React.useState>({}) const contract = contracts.find((c) => c.id === openId) ?? contracts[0]! const review = reviews[contract.id] ?? emptyReview const update = React.useCallback( (id: string, patch: (r: Review) => Partial) => setReviews((all) => { const current = all[id] ?? emptyReview return { ...all, [id]: { ...current, ...patch(current) } } }), [] ) const sentCount = contracts.filter((c) => reviews[c.id]?.approval === "approved").length const open = (id: string) => { setOpenId(id) // On a phone the desk is below the drawer: take the reader to it. if (window.matchMedia("(max-width: 63.999rem)").matches) { document.getElementById("desk")?.scrollIntoView({ behavior: "smooth", block: "start" }) } } return (

Mira Castell has sent {sentCount} of {contracts.length}

) } /** The banker's lamp, seen from above: green glass shade on a brass arm. Its light falls on the open contract. */ function BankersLamp() { return (
{/* Brass base and stem. */} {/* The shade: a long half-cylinder of cased green glass. */} {/* Brass end caps. */}
) } /** The matter's file folder, its typed label on the tab. */ function FolderTab() { return (
{/* The tab, rising from the folder's edge. */}

Northwind v. Halberd, supply dispute

Matter 2026-0417, commercial litigation

{/* The folder's front edge, running on under the papers. */}
) } function Drawer({ pushed, onPushedChange, openId, onOpen, reviews, }: { pushed: string[] onPushedChange: (value: string[]) => void openId: string onOpen: (id: string) => void reviews: Record }) { return (
Drawer {/* A card file box: walnut sides, the cards standing in its well. */}
{needles.map((n) => ( {n.label} ))} {contracts.map((c) => { const isOpen = c.id === openId const state = reviews[c.id]?.approval return ( ) })}
) } type PanelProps = { contract: Contract review: Review update: (id: string, patch: (r: Review) => Partial) => void } function SentStamp({ className }: { className?: string }) { return ( Sent {TODAY} ) } /** The hero: the open contract, under the lamp. */ function Desk({ contract, review, update }: PanelProps) { const sent = review.approval === "approved" return (
On the desk {/* The banker's lamp: a warm pool on the page, a little green from its shade. */}
update(contract.id, () => ({ decisions }))} >

{contract.title}

{contract.parties}

Privileged
{contract.clause.number} {contract.clause.heading}. {" "} {contract.clause.body.map((s, i) => typeof s === "string" ? ( {s} ) : ( ) )} {sent ? (

Sent to {contract.note.to}. The clause is locked.

) : ( )} {sent && }
) } /** The cover note, tucked under the contract, with the assistant's flags on a sticky note. */ function CoverNote({ contract, review, update }: PanelProps) { const progress = progressOf(contract, review) const { note } = contract const sent = review.approval === "approved" const locked = review.approval !== "pending" const flag = (id: string) => note.flags.find((f) => f.id === id)! return (
To
{note.to}, {note.firm}
Re
{note.subject}
Encl.
Clause {contract.clause.number}, {progress.changes.done} of {progress.changes.total} edits decided
{note.body.map((paragraph, i) => (

{paragraph.map((seg, j) => { if (typeof seg === "string") return {seg} const f = flag(seg.redact) return review.redacted.includes(f.id) ? ( ) : ( Flagged as {f.reason}: {f.text} ) })}

))}

Kind regards,
Castell Rowe LLP

{sent && }
{/* The assistant's flags, on a sticky note stuck to the bottom of the page. */}
Redact before sending {note.flags.map((f) => ( ))}
) } /** The assistant's answer, printed as a memo, every claim stickered to its source. */ function Assistant({ contract, review, update }: PanelProps) { return (
Assistant

You asked: {contract.question}

{contract.answer.map((paragraph, i) => (

{paragraph.map((seg, j) => { if (typeof seg === "string") return {seg} const source = contract.sources.find((s) => s.n === seg.cite)! return ( { if (isOpen) update(contract.id, (r) => ({ opened: r.opened.includes(source.n) ? r.opened : [...r.opened, source.n] })) }} > {source.n} {source.source} {source.location} {source.quote} {source.statusText} ) })}

))}
    {contract.sources.map((s) => { const opened = review.opened.includes(s.n) return (
  1. {s.n}. {s.source}, {s.location} {opened ? (s.status === "unverified" ? "Not found" : "Checked") : "Unread"}
    2. ) })}
) } function Check({ done, total, label }: { done: number; total: number; label: string }) { const complete = done === total return (
  • {complete ? "✓" : ""} {label} {complete ? ", done" : `, ${done} of ${total}`} {!complete && ( {done}/{total} )}
    • ) } /** Before it leaves: the checklist slip and the seal press. */ function Outbox({ contract, review, update }: PanelProps) { const progress = progressOf(contract, review) const { note } = contract const sent = review.approval === "approved" const locked = review.approval !== "pending" return (
    Before it leaves
    { if (!progress.ready) return update(contract.id, () => ({ approval: "approved" })) demoMilestone("casefile", "seal") }} onReject={() => update(contract.id, () => ({ approval: "rejected" }))} > Send to {note.firm} The redacted note and clause {contract.clause.number} go to {note.to}. Sent email can't be recalled. {!locked && !progress.ready && (

    The seal is locked until the checklist is done.

    )} Send back {locked && ( )}
    ) } ``` ### `registry/bevel/blocks/review-desk/casefile/contracts.tsx` ```tsx /** * The contracts in the Northwind v. Halberd drawer. Everything here is * fictional: parties, people, numbers, cases. */ /** A run of clause text, or one of the assistant's proposed edits. */ export type ClauseSegment = string | { change: string; deletion?: string; insertion?: string } /** A run of answer text, or a pinned source by number. */ export type AnswerSegment = string | { cite: number } /** A run of the cover note, or a detail the assistant flagged for redaction. */ export type NoteSegment = string | { redact: string } export type Source = { n: number source: string location: string quote: string status: "verified" | "caution" | "unverified" statusText?: string /** A non-contract source gets a blue sticker. */ external?: boolean } export type Flag = { id: string; label: string; reason: string; text: string } export type Contract = { id: string title: string parties: string ref: string tags: string[] clause: { number: string; heading: string; body: ClauseSegment[] } question: string answer: AnswerSegment[][] sources: Source[] note: { to: string firm: string email: string subject: string body: NoteSegment[][] flags: Flag[] } } export const needles = [ { value: "nda", label: "NDA" }, { value: "signed", label: "Signed" }, { value: "eu", label: "EU law" }, { value: "renews", label: "Renews" }, { value: "dpa", label: "DPA" }, ] as const export const contracts: Contract[] = [ { id: "msa", title: "Master supply agreement", parties: "Northwind Freight B.V. and Halberd Components GmbH", ref: "NW-031", tags: ["signed", "eu", "renews"], clause: { number: "14.3", heading: "Limitation of liability", body: [ "Neither party's total liability under this Agreement shall exceed the fees paid in the ", { change: "cap", deletion: "three (3)", insertion: "twelve (12)" }, " months before the claim arose. This cap does not apply to ", { change: "carve", insertion: "breach of clause 9 (Confidentiality), " }, "fraud or wilful misconduct", { change: "notice", insertion: ", and no claim is barred for want of notice given within ninety (90) days" }, ".", ], }, question: "Can Northwind recover the full cost of the March shortfall, or does the cap bite?", answer: [ [ "Probably not in full. Liability is capped at three months' fees", { cite: 1 }, ", about €410,000 on the current run rate, against a claimed loss of €1.2m.", ], [ "The cap doesn't apply to wilful misconduct, and Halberd's own email shows it moved Northwind's allocated stock to another buyer", { cite: 2 }, ". The agreement renewed on 1 January", { cite: 3 }, ", so the current terms apply. I found a case striking down a similar cap", { cite: 4 }, ", but couldn't confirm it exists. Don't rely on it.", ], ], sources: [ { n: 1, source: "Master supply agreement", location: "p. 22, clause 14.3", quote: "Neither party's total liability under this Agreement shall exceed the fees paid in the three (3) months before the claim arose.", status: "verified", }, { n: 2, source: "Halberd internal email, 4 Mar 2026", location: "Disclosure bundle, tab 7", quote: "Move the Northwind allocation to Vantor for this run. We'll make it up in April.", status: "verified", external: true, }, { n: 3, source: "Master supply agreement", location: "p. 3, clause 2.2", quote: "This Agreement renews automatically for successive twelve-month terms unless either party gives ninety (90) days' notice.", status: "verified", }, { n: 4, source: "Brennan Freight v. Ostmark AG (2021)", location: "¶ 18, as cited", quote: "No matching passage found in any reporter Casefile can search.", status: "unverified", external: true, }, ], note: { to: "Ines Varga", firm: "Varga Lindqvist", email: "i.varga@vargalindqvist.example", subject: "Northwind / Halberd: proposed amendment to clause 14.3", body: [ ["Dear Ms Varga,"], [ "Further to our call, please find our proposed amendment to clause 14.3 of the supply agreement. ", { redact: "contact" }, " can confirm the shortfall figures on request.", ], [{ redact: "strategy" }, " We look forward to your client's response by 31 October."], ], flags: [ { id: "contact", label: "Client contact's name and mobile", reason: "personal data", text: "Our client's operations lead, Tomas Reyes (+31 6 1234 5678)," }, { id: "strategy", label: "Our view on the cap", reason: "privileged", text: "We think the cap is unlikely to survive the diversion of stock." }, ], }, }, { id: "nda", title: "Mutual NDA", parties: "Northwind Freight B.V. and Halberd Components GmbH", ref: "NW-012", tags: ["nda", "signed"], clause: { number: "5.1", heading: "Duration of confidentiality", body: [ "The obligations in this Agreement last for ", { change: "term", deletion: "two (2)", insertion: "five (5)" }, " years after each disclosure", { change: "secrets", insertion: ", and for trade secrets, for as long as the information remains a trade secret" }, ".", ], }, question: "Can we put Halberd's pricing sheet in front of the court?", answer: [ [ "Yes, with care. Either party may disclose Confidential Information when a court requires it", { cite: 1 }, ", provided it gives the other side prompt written notice first", { cite: 2 }, ".", ], [ "The sheet is marked confidential but undated", { cite: 3 }, ", so we should file it under seal and confirm which version Halberd sent.", ], ], sources: [ { n: 1, source: "Mutual NDA", location: "p. 4, clause 6.2", quote: "Nothing in this Agreement prevents disclosure required by law or by order of a competent court.", status: "verified", }, { n: 2, source: "Mutual NDA", location: "p. 4, clause 6.3", quote: "The disclosing party shall give prompt written notice before any such disclosure, where lawful.", status: "verified", }, { n: 3, source: "Halberd pricing sheet", location: "Disclosure bundle, tab 12, footer", quote: "Halberd Components. Confidential. Not for distribution.", status: "caution", statusText: "Undated", external: true, }, ], note: { to: "Ines Varga", firm: "Varga Lindqvist", email: "i.varga@vargalindqvist.example", subject: "Northwind / Halberd: notice under clause 6.3 of the NDA", body: [ ["Dear Ms Varga,"], [ "We give notice under clause 6.3 that our client intends to file Halberd's pricing sheet with the court, under seal. We also attach a proposed amendment to clause 5.1.", ], [{ redact: "author" }], ], flags: [ { id: "author", label: "Associate's direct line", reason: "personal data", text: "Drafted by Mira Castell, direct line +44 20 7946 0113." }, ], }, }, { id: "dpa", title: "Data processing addendum", parties: "Northwind Freight B.V. (controller) and Halberd Components GmbH (processor)", ref: "NW-033", tags: ["signed", "eu", "dpa"], clause: { number: "8.1", heading: "Breach notification", body: [ "The processor shall notify the controller of a personal data breach ", { change: "speed", deletion: "without undue delay", insertion: "within twenty-four (24) hours" }, " after becoming aware of it", { change: "annex", insertion: ", with the information listed in Annex 3" }, ".", ], }, question: "Did Halberd breach the DPA when the shipment manifests leaked?", answer: [ [ "Arguably. Halberd had to tell us without undue delay", { cite: 1 }, ", and its first notice came nine days after it found the leak", { cite: 2 }, ".", ], [ "We then had 72 hours to tell the regulator", { cite: 3 }, ", which a nine-day gap makes hard. That's why I suggest a fixed 24-hour window.", ], ], sources: [ { n: 1, source: "Data processing addendum", location: "p. 6, clause 8.1", quote: "The processor shall notify the controller of a personal data breach without undue delay after becoming aware of it.", status: "verified", }, { n: 2, source: "Halberd letter, 22 Aug 2026", location: "Disclosure bundle, tab 19, para. 2", quote: "Our team identified the exposure on 13 August and has since contained it.", status: "verified", external: true, }, { n: 3, source: "GDPR, Article 33(1)", location: "Regulation (EU) 2016/679", quote: "…not later than 72 hours after having become aware of it…", status: "verified", external: true, }, ], note: { to: "Ines Varga", firm: "Varga Lindqvist", email: "i.varga@vargalindqvist.example", subject: "Northwind / Halberd: breach notification under the DPA", body: [ ["Dear Ms Varga,"], [ "The leaked manifests included the home address of ", { redact: "driver" }, " Please confirm what was exposed and when, and see our proposed amendment to clause 8.1.", ], [{ redact: "regulator" }], ], flags: [ { id: "driver", label: "Driver's name", reason: "personal data", text: "one of our client's drivers, Pieter Aalders." }, { id: "regulator", label: "Internal note on the regulator", reason: "privileged", text: "Internal: we reported late to the regulator and may face a fine." }, ], }, }, { id: "whs", title: "Kessler warehousing", parties: "Northwind Freight B.V. and Kessler Logistics Ltd", ref: "NW-020", tags: ["signed", "renews"], clause: { number: "11.2", heading: "Termination for supply failure", body: [ "Northwind may end this Agreement on ", { change: "notice", deletion: "six (6) months'", insertion: "sixty (60) days'" }, " written notice if its principal supplier fails to deliver for ", { change: "weeks", deletion: "twelve (12)", insertion: "eight (8)" }, " consecutive weeks.", ], }, question: "If Halberd stock stops, can Northwind get out of the Kessler warehouse?", answer: [ [ "Yes, but slowly. Northwind can end it on six months' notice once supply has failed for twelve weeks", { cite: 1 }, ". Until then it pays for the space, empty or not", { cite: 2 }, ".", ], ], sources: [ { n: 1, source: "Kessler warehousing agreement", location: "p. 9, clause 11.2", quote: "Northwind may end this Agreement on six (6) months' written notice if its principal supplier fails to deliver for twelve (12) consecutive weeks.", status: "verified", }, { n: 2, source: "Kessler warehousing agreement", location: "Schedule 1, fees", quote: "Storage fees are payable monthly for the reserved area, whether or not used.", status: "verified", }, ], note: { to: "Owen Hartley", firm: "Kessler Logistics", email: "legal@kesslerlogistics.example", subject: "Proposed amendment to clause 11.2", body: [ ["Dear Mr Hartley,"], [ "Given the supply position, our client proposes the attached amendment to clause 11.2. ", { redact: "dispute" }, ], ], flags: [ { id: "dispute", label: "Reference to the Halberd claim", reason: "privileged", text: "This is driven by our claim against Halberd, which we expect to settle." }, ], }, }, { id: "ts", title: "Settlement term sheet, draft", parties: "Northwind Freight B.V. and Halberd Components GmbH", ref: "NW-041", tags: ["eu"], clause: { number: "3", heading: "Payment", body: [ "Halberd shall pay Northwind ", { change: "sum", deletion: "€600,000", insertion: "€850,000" }, " in full and final settlement, within ", { change: "days", deletion: "sixty (60)", insertion: "thirty (30)" }, " days of signature.", ], }, question: "Is €850,000 a defensible opening number?", answer: [ [ "It's within range. The cap limits a contract claim to about €410,000", { cite: 1 }, ", but the misconduct carve-out could lift it to the full €1.2m loss", { cite: 2 }, ". €850,000 prices in roughly even odds on the carve-out.", ], ], sources: [ { n: 1, source: "Master supply agreement", location: "p. 22, clause 14.3", quote: "…shall exceed the fees paid in the three (3) months before the claim arose.", status: "verified", }, { n: 2, source: "Loss schedule, v4", location: "Expert report, table 2", quote: "Total loss, March shortfall: €1,204,300.", status: "caution", statusText: "Draft", external: true, }, ], note: { to: "Ines Varga", firm: "Varga Lindqvist", email: "i.varga@vargalindqvist.example", subject: "Without prejudice: settlement terms", body: [ ["Dear Ms Varga,"], [ "Without prejudice save as to costs, we enclose revised settlement terms. ", { redact: "floor" }, ], ], flags: [ { id: "floor", label: "Client's walk-away figure", reason: "privileged", text: "Our client would accept €700,000 if pressed." }, ], }, }, { id: "orrin", title: "Orrin Metals NDA", parties: "Northwind Freight B.V. and Orrin Metals S.A.", ref: "NW-044", tags: ["nda", "renews"], clause: { number: "2.1", heading: "Permitted purpose", body: [ "Northwind may use the Information only to evaluate ", { change: "purpose", deletion: "a supply relationship", insertion: "a replacement supply relationship" }, " with Orrin", { change: "advisers", insertion: ", and may share it with its legal advisers" }, ".", ], }, question: "Can we show Orrin's quote to our expert as evidence of replacement cost?", answer: [ [ "Not yet. Use is limited to evaluating a supply relationship", { cite: 1 }, ", and only named recipients may see it", { cite: 2 }, ". The proposed edit adds legal advisers, which would cover the expert through us.", ], ], sources: [ { n: 1, source: "Orrin Metals NDA", location: "p. 1, clause 2.1", quote: "Northwind may use the Information only to evaluate a supply relationship with Orrin.", status: "verified", }, { n: 2, source: "Orrin Metals NDA", location: "p. 2, clause 3.4", quote: "Information may be shared only with the employees named in Schedule A.", status: "verified", }, ], note: { to: "Lucía Ferrer", firm: "Orrin Metals", email: "l.ferrer@orrinmetals.example", subject: "NDA: request to extend permitted purpose", body: [ ["Dear Ms Ferrer,"], [ "We act for Northwind and propose the attached change to clause 2.1, so we can review your quote with our client. ", { redact: "reason" }, ], ], flags: [ { id: "reason", label: "Why we really want it", reason: "privileged", text: "We intend to use it as evidence of replacement cost against Halberd." }, ], }, }, ] /** Every change id in a clause. */ export function changeIds(contract: Contract) { return contract.clause.body.flatMap((s) => (typeof s === "string" ? [] : [s.change])) } ``` ### `registry/bevel/blocks/review-desk/shared/environment.tsx` ```tsx import * as React from "react" import { cn } from "@/lib/utils" /** * Pieces of the physical environments the demos are set in. Each demo * mounts Bevel components on a surface; these are the surface's own parts. */ /** A legend engraved into the surface: names the control below it. */ export function Legend({ className, ...props }: React.ComponentProps<"p">) { return (

    ) } /** A slotted screw head, for panel corners. */ export function Screw({ className, angle = 30 }: { className?: string; angle?: number }) { return ( ) } /** Four screws, one in each corner of a positioned panel. */ const screwCorners = { "2": ["top-2 left-2", "top-2 right-2", "bottom-2 left-2", "bottom-2 right-2"], "3": ["top-3 left-3", "top-3 right-3", "bottom-3 left-3", "bottom-3 right-3"], "4": ["top-4 left-4", "top-4 right-4", "bottom-4 left-4", "bottom-4 right-4"], } as const export function Screws({ inset = "3" }: { inset?: keyof typeof screwCorners }) { return ( <> {screwCorners[inset].map((c, i) => ( ))} ) } /** A physical key: a raised plastic button that goes down when pressed. */ export function PanelKey({ className, tone = "plain", ...props }: React.ComponentProps<"button"> & { tone?: "plain" | "go" }) { return (