/* global React, Icons, Pill, Btn, Avatar, StatusBar */ /* Video reference frames — 14 frames (Frame A + Frame B for each of 7 videos). Each frame component renders the contents of a phone screen (everything below the StatusBar). The Stage wrapper handles the 9:16 backdrop. */ const { useState: useStateVF } = React; // ──────────────────────────────────────────────────────────────── // SHARED PIECES // ──────────────────────────────────────────────────────────────── // A monospaced uppercase eyebrow for inside the phone function Eyebrow({ children, tone = "ink-3", style = {} }) { return (
{children}
); } // Mock top app bar (V glyph + wordmark on left, optional actions on right) function MiniTopBar({ right, title }) { return (
VakeelOS
{right &&
{right}
}
); } const headerBtn = { width: 34, height: 34, borderRadius: 999, background: "transparent", border: "none", color: "var(--ink-2)", cursor: "pointer", display: "inline-flex", alignItems: "center", justifyContent: "center", position: "relative", }; // Bottom tab bar — simplified function MiniTabBar({ active = "today" }) { const tabs = [ { id: "today", label: "Today", icon: Icons.home }, { id: "cases", label: "Cases", icon: Icons.cases }, { id: "ai", label: "", icon: Icons.ai, ai: true }, { id: "causelist", label: "Causelist", icon: Icons.causelist }, { id: "more", label: "More", icon: Icons.more }, ]; return (
{tabs.map(t => { const T = t.icon; const isActive = t.id === active; if (t.ai) { return (
); } return (
{t.label}
); })}
); } // Used wherever a section header is needed inside a phone screen function SH({ children, right }) { return (

{children}

{right}
); } // ──────────────────────────────────────────────────────────────── // V01 · HERO // ──────────────────────────────────────────────────────────────── // V01 · Frame A — Cold open function V01A() { return (
VAKEELOS · TUE 12 MAY · 06:30 IST
Causelist ready
11 matters · 3 conflicts · 1 priority
); } // V01 · Frame B — Logo lockup function V01B() { return (
V
VakeelOS
Practice management
for the Indian bar
); } // ──────────────────────────────────────────────────────────────── // V02 · CAUSELIST // ──────────────────────────────────────────────────────────────── const CAUSELIST_TRACKED = [ { time: "10:30", item: "12", num: "W.P. 1234/2026", title: "Sharma vs State", court: "APHC · Court 5", judge: "Sri J. Reddy", purpose: "Arguments", tag: "blue" }, { time: "11:30", item: "04", num: "C.R.P. 882/2024", title: "Mehra Petroleum vs ROC", court: "APHC · Court 7", judge: "Smt. J. Iyer", purpose: "Counter", tag: "orange", conflict: true }, { time: "14:00", item: "21", num: "W.P. 5012/2025", title: "Patel & Sons vs Union", court: "TSHC · Court 3", judge: "Sri J. Murthy", purpose: "Hearing", tag: "blue" }, ]; function CauselistHeaderUI({ syncDot, dotColor = "var(--gold)", pulsing = true }) { return ( <> {/* Top app bar */}
Causelist
{/* Title block */}
{syncDot && } {pulsing ? "Syncing · 06:30 IST" : "Synced · 06:30 IST"}

Causelist

Tuesday, 12 May
{/* Date selector */}
{[ { label: "Mon", date: "11" }, { label: "Today", date: "12", active: true }, { label: "Wed", date: "13" }, { label: "Thu", date: "14" }, ].map(d => (
{d.label} {d.date}
))}
{[ { label: "APHC", count: 6 }, { label: "TSHC", count: 3 }, { label: "Both", count: 9, active: true }, ].map(c => (
{c.label} {c.count}
))} 11,243 entries
); } function CauselistRow({ e }) { return (
{e.time}
Item {e.item}
{e.num} · {e.court} {e.conflict && Conflict}
{e.title}
{e.judge}
{e.purpose}
); } // V02 · Frame A — Empty causelist, syncing function V02A() { return (
Tracked 0
your matters
{/* Skeleton placeholders */}
{[0,1,2].map(i => (
))}
waiting for causelist …
); } // V02 · Frame B — Synced state with toast function V02B() { return (
{/* Toast sliding in just under status bar */}
Causelist synced
3 matters added · 6 untracked matches
06:30
Tracked 3
your matters
{CAUSELIST_TRACKED.map((e, i) => )}
Matches by advocate name 3
Last synced 06:30 IST · pull to refresh
); } // ──────────────────────────────────────────────────────────────── // V03 · DRAFTER // ──────────────────────────────────────────────────────────────── // V03 · Frame A — Template selection bottom sheet function V03A() { const templates = [ "Legal Notice", "Bail Application", "Writ Petition", "Plaint", "Vakalatnama", "Written Statement", "Reply", "Custom…", ]; return (
{/* Dimmed background — case detail under scrim */}
} />
APHC · W.P. 1234/2026
Sharma vs State of A.P.
{/* Scrim */}
{/* Bottom sheet */}
Draft with VakeelBrain
Choose a template
{templates.map((t, i) => { const selected = i === 0; return (
{t}
); })}
Add custom instructions…
Cancel
Generate draft
); } // V03 · Frame B — Export ready function V03B() { return (
{/* Top bar */}
● Draft · saved
Legal Notice
Sharma vs State · 12 May · 412 words
{/* Body */}

Under instructions from and on behalf of our client, Sri P. Sharma, S/o Late B. Sharma, resident of Plot 24, Madhapur, Hyderabad, we hereby serve upon you this legal notice for redressal of grievances arising from the impugned notification dated 17 March 2026.

That, in light of the principles laid down in [AIR 1997 SC 734] and the procedural requirements under [Section 80 CPC], the said notification is liable to be set aside as ultra vires Article 14 and Article 226 of the Constitution of India.

You are hereby called upon to withdraw the impugned notification within thirty (30) days from receipt hereof, failing which our client shall be constrained to seek appropriate remedies before the Hon'ble High Court of Andhra Pradesh.

{/* File-ready toast */}
legal_notice_sharma.docx
Ready · 3 pages · 412 KB
Export
{/* Toolbar */}
Edit
Export .docx
); } // ──────────────────────────────────────────────────────────────── // V04 · DASHBOARD / TODAY // ──────────────────────────────────────────────────────────────── // V04 · Frame A — Morning greeting (minimal) function V04A() { return (
Tuesday, 12 May · 06:30 IST

Good morning, Vikky

{[ { tone: "ink", label: "4 hearings today" }, { tone: "orange", label: "2 invoices overdue" }, { tone: "red", label: "1 conflict flagged" }, ].map((r, i) => (
{r.label}
))}
); } // V04 · Frame B — Clean state — AI brief "all clear" function V04B() { return (
} />
Tuesday, 12 May

Good morning, Vikky

{/* VakeelBrain — all clear card */}
VakeelBrain
● Updated 06:30
All clear.
0 conflicts · 0 overdue · 4 hearings tracked · next at 10:30 before Sri J. Reddy
{["Brief me on the day", "Show calendar", "Tasks"].map((c, i) => (
{c}
))}
{/* Up next */}
in 4 hours}>Up next
Arguments
Sharma vs State of A.P.
Sri J. Reddy · single bench
APHC · Court 5 · Item 12
10:30
{/* Footer */}
auto-generated 06:30 IST · 0 manual steps
); } // ──────────────────────────────────────────────────────────────── // V05 · INVOICING // ──────────────────────────────────────────────────────────────── // V05 · Frame A — Time entries → Draft invoice function V05A() { const entries = [ { date: "12 May", matter: "Sharma vs State", dur: "2.5 h" }, { date: "10 May", matter: "Mehra Petroleum vs ROC", dur: "1.0 h" }, { date: "08 May", matter: "Iyer mediation", dur: "3.5 h" }, ]; return (
New invoice
For client
MC
Mehta & Co. Pvt Ltd
mehta@mehtaco.in · GST 36AAACR0...
Time entries · 3 selected Select all
{entries.map((e, i) => (
{e.matter}
{e.date}
{e.dur}
))}
7.0 hrs · sub-total
₹ 35,000
Edit
DRAFT INVOICE
); } // V05 · Frame B — Paid invoice with UPI QR function PaidQR() { // Generate a faux QR pattern const cells = 19; const seed = (x, y) => ((x * 31 + y * 17 + (x ^ y) * 7) % 11) > 5; const rows = []; for (let y = 0; y < cells; y++) { const row = []; for (let x = 0; x < cells; x++) { // corner anchors const corner = (x < 3 && y < 3) || (x > cells - 4 && y < 3) || (x < 3 && y > cells - 4); const innerCorner = (x === 1 && y === 1) || (x === cells - 2 && y === 1) || (x === 1 && y === cells - 2); const isOuter = (x === 0 || x === 2 || y === 0 || y === 2) && (x < 3 && y < 3); const isOuter2 = (x === cells - 3 || x === cells - 1 || y === 0 || y === 2) && (x > cells - 4 && y < 3); const isOuter3 = (x === 0 || x === 2 || y === cells - 3 || y === cells - 1) && (x < 3 && y > cells - 4); const filled = (corner && (isOuter || isOuter2 || isOuter3 || innerCorner)) || (!corner && seed(x, y)); row.push(filled); } rows.push(row); } return (
{rows.flatMap((row, y) => row.map((on, x) => (
)))}
); } function V05B() { const lines = [ { d: "Appearance · 12 May", amt: "25,000" }, { d: "Drafting — Writ Petition", amt: "12,000" }, { d: "Filing charges · disbursement", amt: "5,000" }, ]; return (
INV-0143
PAID
{/* Particle bursts */} {[ { l: "32%", t: 18, op: 0.9 }, { l: "48%", t: 12, op: 0.7 }, { l: "62%", t: 24, op: 0.55 }, { l: "78%", t: 16, op: 0.85 }, ].map((p, i) => (
))} {/* Letterhead */}
V
Vikky Cumbamangalam
AS-12345 · Bar Council of A.P.
BILL TOMehta & Co. Pvt Ltd MATTERAPHC W.P. 1234/2026
{lines.map((l, i) => ( {l.d} ₹ {l.amt} ))}
Total
₹ 42,000
Paid via UPI
vikky@vakeelos
Razorpay UPI · 12 May, 18:42
Settled · T+0
Receipt sent
mehta@mehtaco.in · just now
); } // ──────────────────────────────────────────────────────────────── // V06 · COURT ORDER VAULT // ──────────────────────────────────────────────────────────────── // V06 · Frame A — Fetching order function V06A() { return (
Sharma vs State
APHC0100012025
{/* Progress bar */}
Fetching from APHC portal 75%
order_dated_02_may_2026.pdf · 412 KB
{/* Blurred PDF preview */}
{/* Court header */}
{[...Array(11)].map((_, i) => (
))} {/* Court stamp */}
VakeelBrain ready · will brief on arrival
); } // V06 · Frame B — Analysis complete function V06B() { const bullets = [ { k: "Result", v: "Petition admitted" }, { k: "Interim relief", v: "Status quo granted" }, { k: "Directions", v: "Respondent to file counter in 4 weeks" }, { k: "Next date", v: "16 Jan 2025 · APHC Room 7" }, ]; return (
Sharma vs State
APHC0100012025
{/* Hearing-added toast */}
16
Next hearing added
16 Jan 2025 · APHC Room 7
just now
{/* Sharp PDF preview behind */}
{[...Array(7)].map((_, i) => (
))}
{/* Bottom sheet — VakeelBrain analysis */}
VakeelBrain Complete 40s
{bullets.map((b, i) => (
{b.k} {b.v}
))}
{["Save to vault", "Add hearing 16 Jan", "Brief me"].map((c, i) => (
{c}
))}
VakeelBrain · 0 manual steps
); } // ──────────────────────────────────────────────────────────────── // FRAME REGISTRY // ──────────────────────────────────────────────────────────────── const FRAMES = [ // backdrop: 'cinema' (deep black) | 'paper' (warm ivory) | 'theatre' (warm dark) // theme: 'light' | 'dark' — for the phone's chamber/theatre tokens // statusBar: 'light' (dark icons on ivory) | 'dark' (light icons on black) | 'hide' { id: "v01-a", video: "01", letter: "A", title: "Hero · Cold open", backdrop: "cinema", theme: "dark", statusBar: "dark", Comp: V01A }, { id: "v01-b", video: "01", letter: "B", title: "Hero · Logo lockup", backdrop: "cinema", theme: "dark", statusBar: "hide", Comp: V01B }, { id: "v02-a", video: "02", letter: "A", title: "Causelist · Syncing", backdrop: "paper", theme: "light", statusBar: "light", Comp: V02A }, { id: "v02-b", video: "02", letter: "B", title: "Causelist · Synced", backdrop: "paper", theme: "light", statusBar: "light", Comp: V02B }, { id: "v03-a", video: "03", letter: "A", title: "Drafter · Templates", backdrop: "paper", theme: "light", statusBar: "light", Comp: V03A }, { id: "v03-b", video: "03", letter: "B", title: "Drafter · Export ready",backdrop: "paper", theme: "light", statusBar: "light", Comp: V03B }, { id: "v04-a", video: "04", letter: "A", title: "Today · Morning", backdrop: "paper", theme: "light", statusBar: "light", Comp: V04A }, { id: "v04-b", video: "04", letter: "B", title: "Today · All clear", backdrop: "paper", theme: "light", statusBar: "light", Comp: V04B }, { id: "v05-a", video: "05", letter: "A", title: "Invoicing · Time entries", backdrop: "paper", theme: "light", statusBar: "light", Comp: V05A }, { id: "v05-b", video: "05", letter: "B", title: "Invoicing · Paid · UPI", backdrop: "paper", theme: "light", statusBar: "light", Comp: V05B }, { id: "v06-a", video: "06", letter: "A", title: "Order Vault · Fetching", backdrop: "paper", theme: "light", statusBar: "light", Comp: V06A }, { id: "v06-b", video: "06", letter: "B", title: "Order Vault · Briefed", backdrop: "paper", theme: "light", statusBar: "light", Comp: V06B }, { id: "v07-a", video: "07", letter: "A", title: "Workflow · 06:30 sync", backdrop: "paper", theme: "light", statusBar: "light", Comp: V02B }, { id: "v07-e", video: "07", letter: "E", title: "Workflow · Tuesday. Done.", backdrop: "cinema", theme: "dark", statusBar: "hide", Comp: V01B }, ]; Object.assign(window, { FRAMES });