Collaborative Review Workspace

1"use client";
2 
3import * as React from "react";
4 
5import { cn } from "@/lib/utils";
6import { getStatusMeta, statusVars } from "@/lib/motiq";
7 
8import {
9  LivePresenceStack,
10  type PresenceUser,
11} from "@/components/motiq/live-presence-stack";
12import {
13  ApprovalWorkflow,
14  type ApprovalWorkflowData,
15  type ApprovalAction,
16  type ActionContext,
17  type ApprovalStatus,
18  type Decision,
19  type Reviewer,
20  type WorkflowStage,
21} from "@/components/motiq/approval-workflow";
22import {
23  CommentThread,
24  type Comment,
25  type CommentAuthor,
26  type CommentDraft,
27} from "@/components/motiq/comment-thread";
28import {
29  ActivityStream,
30  type ActivityEvent,
31  type ActivityActor,
32} from "@/components/motiq/activity-stream";
33 
34/* --------------------------------------------------------------------------
35 * CollaborativeReviewWorkspace — a composed review surface that wires four
36 * released collaboration components into one realistic screen: the presence of
37 * who's here, an app-owned approval workflow as the main column, the discussion
38 * thread under it, and an activity feed as the right rail.
39 *
40 * It owns a small in-memory demo state machine that connects the components'
41 * callbacks: approving a stage advances the workflow AND appends an activity
42 * event; posting a comment appears in the thread AND the activity; resolving the
43 * discussion updates the thread AND records it. Preset buttons load the review
44 * lifecycle states so you can see every phase without scripting.
45 *
46 * Presentation only — clearly fictional users, no real persistence or
47 * authorization. In a real app you would replace the demo state with your own
48 * data source and let these same callbacks drive real mutations. Clean-room
49 * original.
50 * ----------------------------------------------------------------------- */
51 
52const MIN = 60_000;
53const HOUR = 3_600_000;
54const DAY = 86_400_000;
55/** Fixed epoch anchoring the demo timeline for the first render (never Date.now
56 *  during render/init). Re-anchored to the real clock in a mount effect so the
57 *  relative timestamps read naturally. */
58const T0 = 1_800_000_000_000;
59 
60const VIEWER_ID = "you";
61 
62/* -- fictional cast ------------------------------------------------------ */
63 
64const PEOPLE = {
65  you: { id: "you", name: "You" },
66  mira: { id: "mira", name: "Mira Delacroix" },
67  devon: { id: "devon", name: "Devon Achebe" },
68  rosa: { id: "rosa", name: "Rosa Whitfield" },
69  kai: { id: "kai", name: "Kai Ferreira" },
70  june: { id: "june", name: "June Park" },
71// … truncated