[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_26":27,"_28":29,"_30":12,"_31":12,"_32":12,"_33":29,"_34":12,"_35":12,"_36":12,"_37":12,"_38":-5,"_39":40},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":12},"sharedTextdoc",{"_13":14,"_15":-7,"_16":17,"_18":19,"_20":21,"_22":23,"_24":12,"_25":12},"isAuthenticated",false,"sharedTextdocId","69de0526fb1c8191affc4f03cb9babb9","versionInt","title","Orthox-pfn-case-ui-mock-flow","type","code/react","content","import React, { useMemo, useState } from \"react\";\nimport { Card, CardContent, CardHeader, CardTitle, CardDescription } from \"@/components/ui/card\";\nimport { Button } from \"@/components/ui/button\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from \"@/components/ui/tabs\";\nimport { ScrollArea } from \"@/components/ui/scroll-area\";\nimport { Separator } from \"@/components/ui/separator\";\nimport { Progress } from \"@/components/ui/progress\";\nimport { Input } from \"@/components/ui/input\";\nimport { Avatar, AvatarFallback } from \"@/components/ui/avatar\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport {\n Activity,\n AlertTriangle,\n ArrowRight,\n BookOpen,\n CheckCircle2,\n ClipboardList,\n FileText,\n Film,\n FolderOpen,\n MessageSquare,\n Microscope,\n Phone,\n Pin,\n Search,\n Send,\n ShieldCheck,\n Stethoscope,\n Wand2,\n} from \"lucide-react\";\n\nconst timeline = [\n {\n id: \"intake\",\n label: \"Intake\",\n icon: Phone,\n progress: 12,\n summary: \"82F, low-energy fall, left hip pain, X-rays uploaded via WhatsApp.\",\n },\n {\n id: \"classification\",\n label: \"Classification\",\n icon: Microscope,\n progress: 28,\n summary: \"Vision extractor + AO classifier identify unstable 31-A2 pattern.\",\n },\n {\n id: \"planning\",\n label: \"Planning\",\n icon: ClipboardList,\n progress: 46,\n summary: \"Team consensus for short PFN after AI planning and evidence retrieval.\",\n },\n {\n id: \"op\",\n label: \"Intra-op\",\n icon: Activity,\n progress: 64,\n summary: \"Residual varus detected, corrected before final locking.\",\n },\n {\n id: \"postop\",\n label: \"Follow-up\",\n icon: Stethoscope,\n progress: 80,\n summary: \"Stable early postop and 6-week radiographic evolution.\",\n },\n {\n id: \"publishing\",\n label: \"Publishing\",\n icon: FileText,\n progress: 100,\n summary: \"Daily Fracture draft + JBJS-style package generated.\",\n },\n];\n\nconst caseState = {\n caseId: \"ORTHO-2026-00421\",\n patient: \"82F\",\n anatomy: \"Left proximal femur\",\n diagnosis: \"AO/OTA 31-A2 multifragmentary pertrochanteric fracture\",\n implant: \"Short PFN planned and implanted\",\n risks: [\"Osteoporotic bone\", \"Varus collapse\", \"Mechanical cut-out if position poor\"],\n participants: [\"Dr. Keller\", \"Dr. Meier\", \"Dr. Rossi\", \"AO Classifier\", \"Outcome Agent\", \"Publishing Agent\"],\n readiness: {\n phi: \"Confirmed\",\n consent: \"Confirmed\",\n disclosures: \"Pending\",\n },\n};\n\nconst threads = {\n intake: [\n {\n author: \"Dr. Keller\",\n role: \"Resident\",\n type: \"human\",\n text: \"New case. 82F, fall at home, painful left hip, unable to bear weight. Uploading AP pelvis and lateral hip X-rays now.\",\n time: \"08:12\",\n },\n {\n author: \"OpenClaw\",\n role: \"Channel Gateway\",\n type: \"agent\",\n text: \"Created ORTHO-2026-00421 and routed intake to ORTHO-X coordinator.\",\n time: \"08:12\",\n },\n ],\n classification: [\n {\n author: \"vision-extractor\",\n role: \"AI agent\",\n type: \"agent\",\n text: \"Visual findings support a left intertrochanteric fracture with posteromedial comminution and varus tendency. Confidence 0.90.\",\n time: \"08:14\",\n },\n {\n author: \"ao-classifier\",\n role: \"AI agent\",\n type: \"agent\",\n text: \"AO/OTA classification: 31-A2. Multifrag pertrochanteric fracture with instability features. Confidence 0.87.\",\n time: \"08:15\",\n },\n {\n author: \"Dr. Meier\",\n role: \"Attending\",\n type: \"human\",\n text: \"Agree with 31-A2. Unstable pattern.\",\n time: \"08:15\",\n },\n {\n author: \"Dr. Rossi\",\n role: \"Consultant\",\n type: \"human\",\n text: \"Yes. Would not treat this like a stable A1.\",\n time: \"08:16\",\n },\n ],\n planning: [\n {\n author: \"treatment-planner\",\n role: \"AI agent\",\n type: \"agent\",\n text: \"Primary strategy: cephalomedullary fixation with emphasis on reduction quality and avoiding varus.\",\n time: \"08:18\",\n },\n {\n author: \"implant-selector\",\n role: \"AI agent\",\n type: \"agent\",\n text: \"Preferred implant: short PFN-type cephalomedullary nail. Alternatives: long PFN if distal extension, DHS only in more stable patterns.\",\n time: \"08:19\",\n },\n {\n author: \"evidence-agent\",\n role: \"AI agent\",\n type: \"agent\",\n text: \"Comparable unstable A2 cases favor PFN fixation, but success depends heavily on reduction and cephalic element positioning.\",\n time: \"08:20\",\n },\n {\n author: \"Dr. Meier\",\n role: \"Attending\",\n type: \"human\",\n text: \"I’d use a short PFN unless fluoroscopy suggests more distal extension.\",\n time: \"08:21\",\n },\n {\n author: \"Dr. Rossi\",\n role: \"Consultant\",\n type: \"human\",\n text: \"Agree. Long nail only if the pattern extends more distally or canal factors demand it.\",\n time: \"08:21\",\n },\n ],\n op: [\n {\n author: \"Dr. Keller\",\n role: \"Resident\",\n type: \"human\",\n text: \"On table now. Reduction initially in slight varus. Uploading AP and lateral fluoroscopy.\",\n time: \"10:04\",\n },\n {\n author: \"outcome-agent\",\n role: \"AI agent\",\n type: \"agent\",\n text: \"Intra-op warning: persistent mild varus on AP. Improve reduction before final fixation. Cephalic trajectory acceptable but could be more central.\",\n time: \"10:05\",\n severity: \"warning\",\n },\n {\n author: \"Dr. Meier\",\n role: \"Attending\",\n type: \"human\",\n text: \"Please correct varus before locking.\",\n time: \"10:05\",\n },\n {\n author: \"outcome-agent\",\n role: \"AI agent\",\n type: \"agent\",\n text: \"Final intra-op assessment: reduction improved, alignment acceptable, cephalic fixation satisfactory.\",\n time: \"10:11\",\n severity: \"success\",\n },\n ],\n postop: [\n {\n author: \"outcome-agent\",\n role: \"AI agent\",\n type: \"agent\",\n text: \"Post-op day 1: acceptable alignment and hardware position. No obvious early failure signal.\",\n time: \"D1 09:20\",\n severity: \"success\",\n },\n {\n author: \"outcome-agent\",\n role: \"AI agent\",\n type: \"agent\",\n text: \"6-week follow-up: healing progression appropriate, implant stable, no radiographic cut-out or collapse signal.\",\n time: \"6W 14:10\",\n severity: \"success\",\n },\n {\n author: \"Dr. Rossi\",\n role: \"Consultant\",\n type: \"human\",\n text: \"This is evolving well.\",\n time: \"6W 14:12\",\n },\n ],\n editorial: [\n {\n author: \"Dr. Meier\",\n role: \"Attending\",\n type: \"human\",\n text: \"Good teaching case. Prepare this for The Daily Fracture and assess JBJS-style suitability.\",\n time: \"6W 14:20\",\n },\n {\n author: \"publishing-agent\",\n role: \"AI agent\",\n type: \"agent\",\n text: \"Dual-package recommended. PHI scrub and consent confirmed. Remaining blocker: disclosure statements pending.\",\n time: \"6W 14:21\",\n },\n {\n author: \"publishing-agent\",\n role: \"AI agent\",\n type: \"agent\",\n text: \"Daily Fracture draft complete: ‘Avoiding Varus in an Osteoporotic 31-A2 PFN Case’. JBJS-style abstract, manuscript, legends, and checklist generated.\",\n time: \"6W 14:25\",\n severity: \"success\",\n },\n ],\n};\n\nconst artifacts = [\n { name: \"daily_fracture_editorial.md\", type: \"Editorial draft\", status: \"Ready\" },\n { name: \"title_options.json\", type: \"Headline bundle\", status: \"Ready\" },\n { name: \"social_blurbs.json\", type: \"Distribution copy\", status: \"Ready\" },\n { name: \"jbjs_case_report.md\", type: \"Journal manuscript\", status: \"Needs review\" },\n { name: \"structured_abstract.txt\", type: \"Abstract\", status: \"Ready\" },\n { name: \"submission_checklist.json\", type: \"Submission QA\", status: \"Blocked by disclosures\" },\n];\n\nconst media = [\n { label: \"AP Pelvis X-ray\", stage: \"Intake\", note: \"Comminuted intertrochanteric pattern\" },\n { label: \"Lateral Hip X-ray\", stage: \"Intake\", note: \"Posteromedial comminution appreciated\" },\n { label: \"Intra-op AP Fluoro\", stage: \"Op\", note: \"Initial mild varus warning\" },\n { label: \"Final AP/Lateral Fluoro\", stage: \"Op\", note: \"Reduction corrected, hardware satisfactory\" },\n { label: \"6-week Follow-up X-rays\", stage: \"Follow-up\", note: \"Stable progression, no cut-out signal\" },\n];\n\nfunction ThreadMessage({ item }) {\n const isAgent = item.type === \"agent\";\n const severityStyle = item.severity === \"warning\"\n ? \"border-amber-200 bg-amber-50\"\n : item.severity === \"success\"\n ? \"border-emerald-200 bg-emerald-50\"\n : \"border-slate-200 bg-white\";\n\n return (\n \n

\n \n \n {item.author.slice(0, 2).toUpperCase()}\n \n \n

\n {item.author}\n {item.role}\n {item.time}\n

{item.text}

\n \n );\n}\n\nfunction MiniMediaCard({ item }) {\n return (\n

{item.label}

{item.stage}

\n \n

{item.note}

\n );\n}\n\nexport default function OrthoXPFNMockFlow() {\n const [selected, setSelected] = useState(\"planning\");\n const [search, setSearch] = useState(\"\");\n\n const filteredMessages = useMemo(() => {\n const items = threads[selected] || [];\n if (!search.trim()) return items;\n return items.filter((m) => `${m.author} ${m.text} ${m.role}`.toLowerCase().includes(search.toLowerCase()));\n }, [selected, search]);\n\n const stage = timeline.find((t) => t.id === selected) || timeline[0];\n\n return (\n

\n \n \n

\n ORTHO-X\n PFN case simulation\n

\n Live mock\n

\n \n \n

Case

{caseState.caseId}

\n \n

{caseState.patient} · {caseState.anatomy}

{caseState.diagnosis}

\n Workflow progress\n {stage.progress}%\n

\n \n

\n\n

Flow

\n {timeline.map((item, idx) => {\n const Icon = item.icon;\n const active = selected === item.id;\n return (\n setSelected(item.id)}\n className={`w-full rounded-2xl border p-3 text-left transition ${active ? \"border-slate-900 bg-slate-900 text-white shadow-sm\" : \"border-slate-200 bg-white hover:border-slate-300\"}`}\n >\n

\n \n

{item.label}

\n {idx < timeline.length - 1 ? : }\n

{item.summary}

\n \n );\n })}\n

\n\n

Participants

\n {caseState.participants.map((p) => (\n {p}\n ))}\n

\n \n \n\n

\n \n \n

\n Shared case workspace\n Humans and agents collaborate on the same patient object and thread history.\n

\n \n setSearch(e.target.value)}\n placeholder=\"Search this thread\"\n className=\"h-7 w-48 border-0 bg-transparent p-0 text-sm shadow-none focus-visible:ring-0\"\n />\n

\n \n \n \n \n {Object.keys(threads).map((key) => (\n {key}\n ))}\n \n\n {Object.keys(threads).map((key) => (\n \n

{key} thread

{(threads[key] || []).length} entries · shared across all surgeons and agents

\n \n

\n \n {filteredMessages.map((item, idx) => (\n \n ))}\n \n

\n \n \n ))}\n \n \n \n\n

\n \n \n Media timeline\n X-rays, fluoroscopy, and follow-up images stay attached to the case.\n \n \n {media.map((item) => (\n \n ))}\n \n \n\n \n \n Structured case state\n What agents write back into the shared patient object.\n \n \n

Consensus diagnosis

{caseState.diagnosis}

Implant decision

{caseState.implant}

Risk flags

\n {caseState.risks.map((risk) => (\n {risk}\n ))}\n

Compliance state

PHI scrub{caseState.readiness.phi}

Consent{caseState.readiness.consent}

Disclosures{caseState.readiness.disclosures}

\n \n \n

\n\n

\n \n \n Agent panel\n Specialist AI roles participating in the same case.\n \n \n {[\n [\"vision-extractor\", \"Reads imaging and produces structured fracture features\", Wand2],\n [\"ao-classifier\", \"Assigns AO/OTA code with confidence and rationale\", Microscope],\n [\"treatment-planner\", \"Translates classification into operative strategy\", ClipboardList],\n [\"implant-selector\", \"Compares PFN, long nail, DHS and records rationale\", Pin],\n [\"evidence-agent\", \"Adds similar-case patterns and literature grounding\", BookOpen],\n [\"outcome-agent\", \"Flags varus, hardware issues, and follow-up signals\", Activity],\n [\"publishing-agent\", \"Packages case into journal and editorial outputs\", FileText],\n ].map(([name, desc, Icon]) => (\n

{name}

\n Skill\n

{desc}

\n ))}\n \n \n\n \n \n

\n Publishing workspace\n Case-to-publication path for JBJS and The Daily Fracture.\n

\n \n

\n \n \n

\n \n

Submission gate

Journal package is draft-complete, but formal disclosure statements are still pending.

\n {artifacts.map((artifact) => (\n

{artifact.name}

{artifact.type}

\n {artifact.status}\n

\n ))}\n

\n \n

\n \n \n

\n \n \n\n \n \n Why this mock matters\n \n \n

This is not a generic chat workspace. It is a shared case engine with threads, structured state, agent outputs, media, and downstream publishing.

It visualizes the exact PFN simulation from intake to publication, including the pivotal intra-op varus correction and the editorial packaging step.

The core interaction model: WhatsApp intake → ORTHO-X coordinator → specialist agents → shared case threads → publication outputs.

\n \n \n

\n );\n}\n","access","public","isModerationBlocked","isAnonifyApiKeyDetected","dd",{"_41":42,"_43":44},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","manageRootRouteStylesheet","mobileWebHandoffEnabled","promoteCss","disableSSR","stripModulepreloadImports","paidCampaignAppRedirect","statsigGateEvaluationsPromise",["P",40],"traceId","7425868146683988129","traceTime",1787665738784]