Meeting Agenda Notes

blockproductivity

Linear and Notion style structured meeting document with attendee avatars, timeboxed agenda topics, rich discussion notes, interactive action items checklist, and key decisions log.

Installation

$pnpm dlx shadcn@latest add https://uipkge.dev/r/react/meeting-agenda-notes.json

$npx shadcn@latest add https://uipkge.dev/r/react/meeting-agenda-notes.json

$yarn dlx shadcn@latest add https://uipkge.dev/r/react/meeting-agenda-notes.json

$bunx shadcn@latest add https://uipkge.dev/r/react/meeting-agenda-notes.json

Named registry:npx shadcn@latest add @uipkge-react/meeting-agenda-notesInstalls to:components/blocks/

Variants

Loading interactive previews…

Props

Name	Type / Values	Default	Required
`className`	`string`	—	optional

Schema

Type aliases exported from this item's source. Use these to shape the data you pass in.

Attendee

interface Attendee {
  id: string
  name: string
  role: string
  initials: string
  isHost?: boolean
  status: 'online' | 'present' | 'away'
  colorClass: string
}

AgendaTopic

interface AgendaTopic {
  id: string
  number: number
  title: string
  duration: string
  timeRange: string
  lead: string
  leadInitials: string
  status: 'completed' | 'active' | 'upcoming'
  summary: string
  tags: string[]
}

NoteEntry

interface NoteEntry {
  id: string
  author: string
  authorInitials: string
  authorColor: string
  timestamp: string
  content: string
  tag: string
}

ActionItem

interface ActionItem {
  id: string
  title: string
  assignee: string
  assigneeInitials: string
  assigneeColor: string
  dueDate: string
  priority: 'Urgent' | 'High' | 'Medium' | 'Low'
  completed: boolean
}

KeyDecision

interface KeyDecision {
  id: string
  number: number
  title: string
  context: string
  status: 'Adopted' | 'Under Review'
  decidedBy: string
  time: string
}

npm dependencies

lucide-react

Includes

avatar badge button card checkbox separator

Files installed (1)

components/blocks/MeetingAgendaNotes.tsx47.7 kB

'use client'

import * as React from 'react'
import {
  Calendar,
  Check,
  CheckCircle2,
  Clock,
  Copy,
  ExternalLink,
  FileDown,
  FileSpreadsheet,
  FileText,
  GitPullRequest,
  ListOrdered,
  Lock,
  Plus,
  Radio,
  UserCheck,
  Video,
} from 'lucide-react'
import { cn } from '@/lib/utils'
import { Avatar, AvatarFallback } from '@/components/ui/avatar'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Checkbox } from '@/components/ui/checkbox'
import { Separator } from '@/components/ui/separator'

export interface MeetingAgendaNotesProps {
  className?: string
}

interface Attendee {
  id: string
  name: string
  role: string
  initials: string
  isHost?: boolean
  status: 'online' | 'present' | 'away'
  colorClass: string
}

interface AgendaTopic {
  id: string
  number: number
  title: string
  duration: string
  timeRange: string
  lead: string
  leadInitials: string
  status: 'completed' | 'active' | 'upcoming'
  summary: string
  tags: string[]
}

interface NoteEntry {
  id: string
  author: string
  authorInitials: string
  authorColor: string
  timestamp: string
  content: string
  tag: string
}

interface ActionItem {
  id: string
  title: string
  assignee: string
  assigneeInitials: string
  assigneeColor: string
  dueDate: string
  priority: 'Urgent' | 'High' | 'Medium' | 'Low'
  completed: boolean
}

interface KeyDecision {
  id: string
  number: number
  title: string
  context: string
  status: 'Adopted' | 'Under Review'
  decidedBy: string
  time: string
}

const INITIAL_ATTENDEES: Attendee[] = [
  {
    id: 'att-1',
    name: 'Elena Rostova',
    role: 'Principal Architect',
    initials: 'ER',
    isHost: true,
    status: 'online',
    colorClass: 'bg-success/15 text-success font-semibold',
  },
  {
    id: 'att-2',
    name: 'Marcus Vance',
    role: 'Staff Engineer',
    initials: 'MV',
    status: 'online',
    colorClass: 'bg-info/15 text-info font-semibold',
  },
  {
    id: 'att-3',
    name: 'Sarah Jenkins',
    role: 'Product Lead',
    initials: 'SJ',
    status: 'online',
    colorClass: 'bg-chart-1/15 text-chart-1 font-semibold',
  },
  {
    id: 'att-4',
    name: 'David Chen',
    role: 'Core Infra',
    initials: 'DC',
    status: 'online',
    colorClass: 'bg-warning/15 text-warning font-semibold',
  },
  {
    id: 'att-5',
    name: 'Sofia Rossi',
    role: 'Design Systems',
    initials: 'SR',
    status: 'online',
    colorClass: 'bg-destructive/15 text-destructive font-semibold',
  },
  {
    id: 'att-6',
    name: 'Alex Rivera',
    role: 'DevRel',
    initials: 'AR',
    status: 'online',
    colorClass: 'bg-chart-2/15 text-chart-2 font-semibold',
  },
]

const INITIAL_TOPICS: AgendaTopic[] = [
  {
    id: 'topic-1',
    number: 1,
    title: 'OKLCH Token Migration Status',
    duration: '15m',
    timeRange: '14:00 - 14:15',
    lead: 'Elena Rostova',
    leadInitials: 'ER',
    status: 'completed',
    summary:
      'Audit of 140+ CSS custom properties completed. Confirmed wide-gamut Display P3 color spaces with zero degradation in legacy sRGB browsers.',
    tags: ['Design System', 'Tailwind v4'],
  },
  {
    id: 'topic-2',
    number: 2,
    title: 'Dual-Framework AST Verification Pipeline',
    duration: '20m',
    timeRange: '14:15 - 14:35',
    lead: 'Marcus Vance',
    leadInitials: 'MV',
    status: 'active',
    summary:
      'Live AST comparisons between Vue SFC templates and React TSX JSX trees. Validating component prop parity, variant definitions, and event handlers automatically in CI.',
    tags: ['Compiler', 'CI/CD', 'Parity'],
  },
  {
    id: 'topic-3',
    number: 3,
    title: '100-Block Registry Expansion Strategy',
    duration: '15m',
    timeRange: '14:35 - 14:50',
    lead: 'Sarah Jenkins',
    leadInitials: 'SJ',
    status: 'upcoming',
    summary:
      'Prioritization matrix for upcoming vertical blocks: Healthcare appointment management, HRMS payroll ledger, and DevTools query workbench.',
    tags: ['Roadmap', 'Blocks'],
  },
  {
    id: 'topic-4',
    number: 4,
    title: 'Q&A & Retrospective',
    duration: '10m',
    timeRange: '14:50 - 15:00',
    lead: 'Open Floor',
    leadInitials: 'OF',
    status: 'upcoming',
    summary:
      'Consensus check on flat URL dependency format, open architectural blockers, and sprint task assignment review.',
    tags: ['Open Floor', 'Review'],
  },
]

const INITIAL_NOTES: NoteEntry[] = [
  {
    id: 'note-1',
    author: 'Marcus Vance',
    authorInitials: 'MV',
    authorColor: 'bg-info/15 text-info',
    timestamp: '14:22 PST',
    content:
      'The AST parity checker runs under 340ms locally with caching. We will add a strict blocking threshold in GitHub Actions.',
    tag: '#pipeline',
  },
  {
    id: 'note-2',
    author: 'Sofia Rossi',
    authorInitials: 'SR',
    authorColor: 'bg-destructive/15 text-destructive',
    timestamp: '14:31 PST',
    content:
      'All color tokens now satisfy WCAG AAA for text-foreground and AA for muted-foreground across dark surfaces.',
    tag: '#design-tokens',
  },
]

const INITIAL_TASKS: ActionItem[] = [
  {
    id: 'task-1',
    title: 'Publish OKLCH color token specification to documentation',
    assignee: 'Elena Rostova',
    assigneeInitials: 'ER',
    assigneeColor: 'bg-success/15 text-success',
    dueDate: 'Aug 24, 2026',
    priority: 'High',
    completed: true,
  },
  {
    id: 'task-2',
    title: 'Configure AST parity tests in GitHub Actions CI workflow',
    assignee: 'Marcus Vance',
    assigneeInitials: 'MV',
    assigneeColor: 'bg-info/15 text-info',
    dueDate: 'Aug 26, 2026',
    priority: 'Urgent',
    completed: false,
  },
  {
    id: 'task-3',
    title: 'Draft block wireframes for Healthcare & HRMS verticals',
    assignee: 'Sarah Jenkins',
    assigneeInitials: 'SJ',
    assigneeColor: 'bg-chart-1/15 text-chart-1',
    dueDate: 'Aug 28, 2026',
    priority: 'Medium',
    completed: false,
  },
  {
    id: 'task-4',
    title: 'Benchmark bundle size delta across 50+ imported primitives',
    assignee: 'David Chen',
    assigneeInitials: 'DC',
    assigneeColor: 'bg-warning/15 text-warning',
    dueDate: 'Sep 02, 2026',
    priority: 'Low',
    completed: false,
  },
]

const INITIAL_DECISIONS: KeyDecision[] = [
  {
    id: 'dec-1',
    number: 1,
    title: 'Adopt flat registryDependencies URLs across all 300+ items',
    context:
      'Declaring flat JSON URLs eliminates circular dependency warnings and simplifies downstream registry resolver graphs.',
    status: 'Adopted',
    decidedBy: 'Elena Rostova',
    time: '14:18 PST',
  },
  {
    id: 'dec-2',
    number: 2,
    title: 'Enforce strict 120-char line width & no-semicolons styleguide',
    context:
      'Standardizes AST transpilation outputs so generated Vue SFC and React TSX items maintain identical formatting invariants.',
    status: 'Adopted',
    decidedBy: 'Squad Consensus',
    time: '14:32 PST',
  },
  {
    id: 'dec-3',
    number: 3,
    title: 'Deprecate legacy /r/nuxt/ aliases by end of Q3',
    context:
      'Consumers will be directed to unified /r/vue/ endpoints while maintaining backwards-compatible 301 redirects.',
    status: 'Under Review',
    decidedBy: 'Sarah Jenkins',
    time: '14:45 PST',
  },
]

export function MeetingAgendaNotes({ className }: MeetingAgendaNotesProps) {
  const [copiedRoomLink, setCopiedRoomLink] = React.useState(false)
  const [copiedNotes, setCopiedNotes] = React.useState(false)
  const [copiedSnippet, setCopiedSnippet] = React.useState(false)

  const [attendees] = React.useState<Attendee[]>(INITIAL_ATTENDEES)
  const [agendaTopics] = React.useState<AgendaTopic[]>(INITIAL_TOPICS)
  const [liveNotes, setLiveNotes] = React.useState<NoteEntry[]>(INITIAL_NOTES)
  const [newNoteDraft, setNewNoteDraft] = React.useState('')
  const [newNoteTag, setNewNoteTag] = React.useState('#architecture')

  const [actionItems, setActionItems] = React.useState<ActionItem[]>(INITIAL_TASKS)
  const [newTaskTitle, setNewTaskTitle] = React.useState('')
  const [newTaskAssignee, setNewTaskAssignee] = React.useState('Alex Rivera')
  const [newTaskPriority, setNewTaskPriority] = React.useState<'Urgent' | 'High' | 'Medium' | 'Low'>('Medium')

  const [keyDecisions] = React.useState<KeyDecision[]>(INITIAL_DECISIONS)

  const completedTasksCount = actionItems.filter((t) => t.completed).length
  const totalTasksCount = actionItems.length
  const completionPercentage = totalTasksCount === 0 ? 0 : Math.round((completedTasksCount / totalTasksCount) * 100)

  const copyRoomLink = () => {
    navigator.clipboard?.writeText('https://zoom.us/j/4829017734')
    setCopiedRoomLink(true)
    setTimeout(() => setCopiedRoomLink(false), 2000)
  }

  const copyCodeSnippet = () => {
    const code = `export default defineRegistryItem({
  name: 'meeting-agenda-notes',
  type: 'registry:block',
  categories: ['productivity', 'collaboration'],
  framework: 'react',
  dependencies: ['lucide-react'],
  registryDependencies: [
    'https://uipkge.dev/r/avatar.json',
    'https://uipkge.dev/r/badge.json',
    'https://uipkge.dev/r/button.json',
    'https://uipkge.dev/r/card.json',
    'https://uipkge.dev/r/checkbox.json',
    'https://uipkge.dev/r/separator.json',
  ],
})`
    navigator.clipboard?.writeText(code)
    setCopiedSnippet(true)
    setTimeout(() => setCopiedSnippet(false), 2000)
  }

  const exportNotesMarkdown = () => {
    const md = `# Q3 Product Architecture & Monorepo Scaling Sync
**Date:** Friday, Aug 21, 2026 · 14:00 - 15:00 PST
**Meeting Room:** Zoom Room #482-901
**Attendees:** Elena Rostova (Host), Marcus Vance, Sarah Jenkins, David Chen, Sofia Rossi, Alex Rivera

---

## 📋 Timeboxed Agenda
- [x] **OKLCH Token Migration Status** (15m · 14:00 - 14:15) - Elena Rostova
- [x] **Dual-Framework AST Verification Pipeline** (20m · 14:15 - 14:35) - Marcus Vance [ACTIVE]
- [ ] **100-Block Registry Expansion Strategy** (15m · 14:35 - 14:50) - Sarah Jenkins
- [ ] **Q&A & Retrospective** (10m · 14:50 - 15:00) - Open Floor

---

## 💡 Key Architectural Decisions
1. **Adopt flat registryDependencies URLs across all 300+ items** [Adopted]
   - *Decided by:* Elena Rostova · 14:18 PST
   - *Context:* Eliminates circular dependency warnings in shadcn resolver.
2. **Enforce strict 120-char line width & no-semicolons styleguide** [Adopted]
   - *Decided by:* Squad Consensus · 14:32 PST
   - *Context:* Standardizes AST transpilation outputs across Vue & React.
3. **Deprecate legacy /r/nuxt/ aliases by end of Q3** [Under Review]
   - *Decided by:* Sarah Jenkins · 14:45 PST
   - *Context:* Directs consumers to unified /r/vue/ endpoints.

---

## ✅ Action Items
${actionItems
  .map(
    (task) =>
      `- [${task.completed ? 'x' : ' '}] **${task.title}** (Assignee: @${task.assignee}, Due: ${task.dueDate}, Priority: ${task.priority})`,
  )
  .join('\n')}
`
    navigator.clipboard?.writeText(md)
    setCopiedNotes(true)
    setTimeout(() => setCopiedNotes(false), 2000)
  }

  const toggleTask = (id: string, checked: boolean) => {
    setActionItems((prev) => prev.map((item) => (item.id === id ? { ...item, completed: checked } : item)))
  }

  const addTask = () => {
    if (!newTaskTitle.trim()) return
    const attendee = attendees.find((a) => a.name === newTaskAssignee) || attendees[0]
    setActionItems((prev) => [
      ...prev,
      {
        id: `task-${Date.now()}`,
        title: newTaskTitle.trim(),
        assignee: attendee.name,
        assigneeInitials: attendee.initials,
        assigneeColor: attendee.colorClass,
        dueDate: 'Aug 30, 2026',
        priority: newTaskPriority,
        completed: false,
      },
    ])
    setNewTaskTitle('')
  }

  const addNote = () => {
    if (!newNoteDraft.trim()) return
    setLiveNotes((prev) => [
      ...prev,
      {
        id: `note-${Date.now()}`,
        author: 'Elena Rostova',
        authorInitials: 'ER',
        authorColor: 'bg-success/15 text-success',
        timestamp: 'Just now',
        content: newNoteDraft.trim(),
        tag: newNoteTag,
      },
    ])
    setNewNoteDraft('')
  }

  return (
    <div data-slot="meeting-agenda-notes" className={cn('text-foreground w-full space-y-6', className)}>
      {/* Meeting Header Card */}
      <Card className="border-border bg-card shadow-xs">
        <CardContent className="space-y-5 p-4 sm:p-6">
          {/* Top Badges & Status Row */}
          <div className="flex flex-wrap items-center justify-between gap-3">
            <div className="flex flex-wrap items-center gap-2">
              <Badge variant="secondary" className="gap-1.5 px-2.5 py-1 text-xs font-medium">
                <span className="bg-destructive size-2 animate-pulse rounded-full" />
                <span className="font-mono tracking-tight tabular-nums">REC · 45:12</span>
              </Badge>
              <Badge variant="outline" className="text-muted-foreground text-xs">
                Architecture Sync
              </Badge>
              <Badge variant="outline" className="text-muted-foreground text-xs">
                Bi-Weekly Cadence
              </Badge>
            </div>

            {/* Meeting Actions */}
            <div className="flex flex-wrap items-center gap-2">
              <Button
                variant="outline"
                size="sm"
                className="h-8 gap-1.5 text-xs shadow-xs"
                onClick={exportNotesMarkdown}
              >
                {copiedNotes ? (
                  <Check className="text-success size-3.5" />
                ) : (
                  <FileDown className="text-muted-foreground size-3.5" />
                )}
                {copiedNotes ? 'Notes Copied!' : 'Export Notes Markdown'}
              </Button>
              <Button size="sm" className="h-8 gap-1.5 text-xs shadow-xs">
                <Video className="size-3.5" />
                Join Call
              </Button>
            </div>
          </div>

          {/* Meeting Title & Meta Info */}
          <div className="space-y-2">
            <h1 className="text-foreground text-xl font-bold tracking-tight sm:text-2xl">
              Q3 Product Architecture & Monorepo Scaling Sync
            </h1>

            <div className="text-muted-foreground flex flex-wrap items-center gap-x-5 gap-y-2 text-xs">
              {/* Date & Time */}
              <div className="flex items-center gap-1.5">
                <Calendar className="text-foreground/70 size-3.5" />
                <span className="text-foreground/90 font-medium">Friday, Aug 21, 2026</span>
                <span>·</span>
                <span className="font-mono tabular-nums">14:00 - 15:00 PST</span>
              </div>

              {/* Duration Badge */}
              <div className="flex items-center gap-1.5">
                <Clock className="text-foreground/70 size-3.5" />
                <Badge variant="secondary" className="px-2 py-0.5 font-mono text-xs tabular-nums">
                  60 mins · 45 mins elapsed
                </Badge>
              </div>

              {/* Meeting Room Link */}
              <div className="flex items-center gap-1.5">
                <Video className="text-foreground/70 size-3.5" />
                <button
                  type="button"
                  className="text-foreground hover:text-primary inline-flex min-h-6 cursor-pointer items-center gap-1 font-medium transition-colors"
                  onClick={copyRoomLink}
                >
                  <span>Zoom Room #482-901</span>
                  {copiedRoomLink ? (
                    <Check className="text-success size-3" />
                  ) : (
                    <Copy className="text-muted-foreground size-3" />
                  )}
                </button>
              </div>
            </div>
          </div>

          <Separator className="bg-border/60" />

          {/* Attendee Avatars Row */}
          <div className="flex flex-col justify-between gap-4 sm:flex-row sm:items-center">
            <div className="space-y-2">
              <div className="flex items-center gap-2">
                <span className="text-muted-foreground text-xs font-semibold tracking-wider uppercase">Attendees</span>
                <Badge variant="secondary" className="h-4.5 px-1.5 py-0 font-mono text-xs tabular-nums">
                  6 Present
                </Badge>
              </div>

              {/* Avatars with online status dots */}
              <div className="flex flex-wrap items-center gap-2.5">
                {attendees.map((attendee) => (
                  <div
                    key={attendee.id}
                    className="group border-border/80 bg-background/80 hover:border-border hover:bg-muted/40 relative flex items-center gap-2 rounded-full border py-1 pr-2.5 pl-1 shadow-xs transition-colors"
                  >
                    <div className="relative flex items-center justify-center">
                      <Avatar size="sm" className="size-6 text-xs">
                        <AvatarFallback className={attendee.colorClass}>{attendee.initials}</AvatarFallback>
                      </Avatar>
                      {/* Presence Status Dot */}
                      <span
                        className="border-background bg-success absolute -right-0.5 -bottom-0.5 size-2 rounded-full border-2"
                        title="Present in meeting"
                      />
                    </div>
                    <span className="text-foreground text-xs font-medium">{attendee.name}</span>
                    {attendee.isHost && (
                      <Badge variant="default" className="h-4 px-1 text-xs leading-none font-semibold uppercase">
                        Host
                      </Badge>
                    )}
                  </div>
                ))}
              </div>
            </div>

            {/* Quick Access Code / Status */}
            <div className="border-border/60 bg-muted/30 text-muted-foreground hidden items-center gap-3 rounded-lg border p-2.5 text-xs xl:flex">
              <Radio className="text-success size-4 animate-pulse" />
              <div>
                <div className="text-foreground font-medium">Live Transcription</div>
                <div className="text-muted-foreground font-mono">Whisper-v3 Active</div>
              </div>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* 2-Column Meeting Workspace */}
      <div className="grid grid-cols-1 gap-6 lg:grid-cols-12">
        {/* Left Panel: Timeboxed Agenda & Rich Notes (8 cols) */}
        <div className="space-y-6 lg:col-span-7 xl:col-span-8">
          {/* Section 1: 4 Timeboxed Agenda Topics */}
          <Card className="border-border bg-card shadow-xs">
            <CardHeader className="px-5 pt-5 pb-3 sm:px-6">
              <div className="flex flex-wrap items-center justify-between gap-2">
                <div className="flex items-center gap-2">
                  <div className="bg-primary/10 text-primary flex size-7 items-center justify-center rounded-md">
                    <ListOrdered className="size-4" />
                  </div>
                  <div>
                    <CardTitle className="text-base font-semibold">Timeboxed Agenda</CardTitle>
                    <CardDescription className="text-xs">
                      4 topics structured with real-time progress indicators
                    </CardDescription>
                  </div>
                </div>

                {/* Time Allocation Summary */}
                <Badge variant="outline" className="text-muted-foreground font-mono text-xs tabular-nums">
                  60m Total · 45m Elapsed (75%)
                </Badge>
              </div>

              {/* Elapsed Visual Bar */}
              <div className="bg-muted mt-3 h-1.5 w-full overflow-hidden rounded-full">
                <div className="bg-primary h-full w-3/4 rounded-full" />
              </div>
            </CardHeader>

            <CardContent className="space-y-3 p-5 pt-2 sm:p-6">
              {agendaTopics.map((topic) => (
                <div
                  key={topic.id}
                  className={cn(
                    'group relative rounded-lg border p-4 transition-colors duration-150',
                    topic.status === 'active'
                      ? 'border-primary/50 bg-primary/[0.03] shadow-xs'
                      : topic.status === 'completed'
                        ? 'border-border/80 bg-muted/20'
                        : 'border-border/60 bg-card hover:border-border',
                  )}
                >
                  <div className="flex flex-col justify-between gap-3 sm:flex-row sm:items-start">
                    {/* Topic Details */}
                    <div className="flex-1 space-y-1.5">
                      <div className="flex flex-wrap items-center gap-2">
                        <span className="bg-muted text-muted-foreground flex size-5 items-center justify-center rounded-full font-mono text-xs font-semibold">
                          {topic.number}
                        </span>

                        <h3 className="text-foreground text-sm font-semibold">{topic.title}</h3>

                        {/* Status Badges */}
                        {topic.status === 'completed' && (
                          <Badge variant="success" className="gap-1 text-xs">
                            <CheckCircle2 className="text-success size-3" />
                            Completed
                          </Badge>
                        )}
                        {topic.status === 'active' && (
                          <Badge variant="default" className="gap-1.5 text-xs font-medium">
                            <span className="bg-primary-foreground size-1.5 rounded-full" />
                            Current Topic
                          </Badge>
                        )}
                        {topic.status === 'upcoming' && (
                          <Badge variant="outline" className="text-muted-foreground gap-1 text-xs">
                            <Clock className="size-3" />
                            Upcoming
                          </Badge>
                        )}
                      </div>

                      <p className="text-muted-foreground text-xs leading-relaxed">{topic.summary}</p>

                      {/* Tags */}
                      <div className="flex flex-wrap items-center gap-1.5 pt-1">
                        {topic.tags.map((tag) => (
                          <Badge
                            key={tag}
                            variant="secondary"
                            className="text-muted-foreground px-1.5 py-0 text-xs font-normal"
                          >
                            {tag}
                          </Badge>
                        ))}
                      </div>
                    </div>

                    {/* Presenter & Timebox Metadata */}
                    <div className="border-border/50 flex shrink-0 items-center justify-between gap-1.5 border-t pt-2 sm:flex-col sm:items-end sm:border-t-0 sm:pt-0">
                      <div className="flex items-center gap-1.5">
                        <span className="text-muted-foreground font-mono text-xs tabular-nums">{topic.duration}</span>
                        <span className="text-muted-foreground font-mono text-xs tabular-nums">{topic.timeRange}</span>
                      </div>

                      <div className="flex items-center gap-1.5">
                        <Avatar size="xs" className="size-4.5 text-xs">
                          <AvatarFallback className="bg-muted text-muted-foreground text-xs font-semibold">
                            {topic.leadInitials}
                          </AvatarFallback>
                        </Avatar>
                        <span className="text-foreground/80 text-xs font-medium">{topic.lead}</span>
                      </div>
                    </div>
                  </div>
                </div>
              ))}
            </CardContent>
          </Card>

          {/* Section 2: Rich Discussion Notes Area */}
          <Card className="border-border bg-card shadow-xs">
            <CardHeader className="px-5 pt-5 pb-3 sm:px-6">
              <div className="flex flex-wrap items-center justify-between gap-2">
                <div className="flex items-center gap-2">
                  <div className="bg-primary/10 text-primary flex size-7 items-center justify-center rounded-md">
                    <FileText className="size-4" />
                  </div>
                  <div>
                    <CardTitle className="text-base font-semibold">Discussion Notes & Technical Blueprint</CardTitle>
                    <CardDescription className="text-xs">
                      Structured architectural takeaways and runtime benchmarks
                    </CardDescription>
                  </div>
                </div>

                <span className="text-muted-foreground font-mono text-xs tabular-nums">
                  Last edited 2m ago by Elena Rostova
                </span>
              </div>
            </CardHeader>

            <CardContent className="space-y-5 p-5 pt-2 sm:p-6">
              {/* Context Callout Box */}
              <div className="border-border bg-muted/40 space-y-1 rounded-lg border p-3.5">
                <div className="text-foreground flex items-center gap-1.5 text-xs font-semibold">
                  <FileText className="text-primary size-3.5" />
                  Core Monorepo Mandate
                </div>
                <p className="text-muted-foreground text-xs leading-relaxed">
                  Components are the product, not an npm library. Consumers run{' '}
                  <code className="bg-muted text-foreground rounded px-1.5 py-0.5 font-mono font-medium">
                    npx shadcn add &lt;url&gt;
                  </code>{' '}
                  and own the code directly. All block primitives must compose raw layouts without baking rigid data
                  arrays into primitives.
                </p>
              </div>

              {/* Structured Takeaways Section */}
              <div className="space-y-2.5">
                <h4 className="text-muted-foreground text-xs font-bold tracking-wider uppercase">
                  Architectural Takeaways
                </h4>

                <div className="space-y-2">
                  <div className="border-border/60 bg-card flex items-start gap-2.5 rounded-md border p-3 shadow-xs">
                    <div className="bg-success/10 text-success mt-0.5 flex size-5 shrink-0 items-center justify-center rounded-full">
                      <Check className="size-3" />
                    </div>
                    <div className="space-y-0.5 text-xs">
                      <span className="text-foreground font-semibold">Zero Runtime Overhead Delivery Model</span>
                      <p className="text-muted-foreground leading-relaxed">
                        Zero build-time vendor lock-in. Primitives handle focus rings, keyboard navigation, and
                        accessibility semantics while leaving styling tokens fully customizable by end consumers.
                      </p>
                    </div>
                  </div>

                  <div className="border-border/60 bg-card flex items-start gap-2.5 rounded-md border p-3 shadow-xs">
                    <div className="bg-info/10 text-info mt-0.5 flex size-5 shrink-0 items-center justify-center rounded-full">
                      <Check className="size-3" />
                    </div>
                    <div className="space-y-0.5 text-xs">
                      <span className="text-foreground font-semibold">Perceptually Uniform OKLCH Palette</span>
                      <p className="text-muted-foreground leading-relaxed">
                        Color spaces mapped directly to standard OKLCH coordinates via Tailwind CSS v4{' '}
                        <code className="bg-muted text-foreground rounded px-1.5 py-0.5 font-mono">@theme inline</code>{' '}
                        tokens, ensuring high-fidelity rendering across Apple P3 displays.
                      </p>
                    </div>
                  </div>

                  <div className="border-border/60 bg-card flex items-start gap-2.5 rounded-md border p-3 shadow-xs">
                    <div className="bg-primary/10 text-primary mt-0.5 flex size-5 shrink-0 items-center justify-center rounded-full">
                      <Check className="size-3" />
                    </div>
                    <div className="space-y-0.5 text-xs">
                      <span className="text-foreground font-semibold">Flat Registry Dependencies Graph</span>
                      <p className="text-muted-foreground leading-relaxed">
                        All{' '}
                        <code className="bg-muted text-foreground rounded px-1.5 py-0.5 font-mono">
                          registryDependencies
                        </code>{' '}
                        declare flat URLs (
                        <code className="bg-muted text-foreground rounded px-1 py-0.5 font-mono">
                          https://uipkge.dev/r/button.json
                        </code>
                        ), eliminating nested resolver locks in downstream CLIs.
                      </p>
                    </div>
                  </div>
                </div>
              </div>

              {/* Code Architecture Blueprint */}
              <div className="space-y-2">
                <div className="flex items-center justify-between">
                  <h4 className="text-muted-foreground text-xs font-bold tracking-wider uppercase">
                    Manifest Blueprint
                  </h4>
                  <button
                    type="button"
                    className="text-muted-foreground hover:text-foreground flex min-h-6 cursor-pointer items-center gap-1 text-xs transition-colors"
                    onClick={copyCodeSnippet}
                  >
                    {copiedSnippet ? <Check className="text-success size-3" /> : <Copy className="size-3" />}
                    <span className="font-mono text-xs">{copiedSnippet ? 'Copied' : 'Copy Manifest'}</span>
                  </button>
                </div>

                <div className="border-border/80 bg-muted/60 relative overflow-hidden rounded-lg border p-3 font-mono text-xs">
                  <pre className="text-foreground/90 overflow-x-auto leading-relaxed">
                    <code>
                      <span className="text-primary font-semibold">export default</span>{' '}
                      <span className="text-info">defineRegistryItem</span>(
                      {`{
  name: `}
                      <span className="text-success">'meeting-agenda-notes'</span>
                      {`,
  type: `}
                      <span className="text-success">'registry:block'</span>
                      {`,
  categories: [`}
                      <span className="text-success">'productivity'</span>
                      {`, `}
                      <span className="text-success">'collaboration'</span>
                      {`],
  dependencies: [`}
                      <span className="text-success">'lucide-react'</span>
                      {`],
  registryDependencies: [
    `}
                      <span className="text-warning">'https://uipkge.dev/r/avatar.json'</span>
                      {`,
    `}
                      <span className="text-warning">'https://uipkge.dev/r/badge.json'</span>
                      {`,
    `}
                      <span className="text-warning">'https://uipkge.dev/r/button.json'</span>
                      {`,
    `}
                      <span className="text-warning">'https://uipkge.dev/r/card.json'</span>
                      {`,
    `}
                      <span className="text-warning">'https://uipkge.dev/r/checkbox.json'</span>
                      {`,
    `}
                      <span className="text-warning">'https://uipkge.dev/r/separator.json'</span>
                      {`,
  ],
}`}
                      )
                    </code>
                  </pre>
                </div>
              </div>

              {/* Live Meeting Annotations & Comment Thread */}
              <div className="space-y-3 pt-2">
                <h4 className="text-muted-foreground text-xs font-bold tracking-wider uppercase">Live Annotations</h4>

                <div className="space-y-2.5">
                  {liveNotes.map((note) => (
                    <div
                      key={note.id}
                      className="border-border/60 bg-muted/20 flex items-start gap-2.5 rounded-lg border p-3"
                    >
                      <Avatar size="sm" className="size-6 shrink-0 text-xs">
                        <AvatarFallback className={note.authorColor}>{note.authorInitials}</AvatarFallback>
                      </Avatar>

                      <div className="flex-1 space-y-1">
                        <div className="flex items-center justify-between gap-2">
                          <div className="flex items-center gap-1.5">
                            <span className="text-foreground text-xs font-semibold">{note.author}</span>
                            <Badge variant="outline" className="text-muted-foreground px-1 py-0 font-mono text-xs">
                              {note.tag}
                            </Badge>
                          </div>
                          <span className="text-muted-foreground font-mono text-xs tabular-nums">{note.timestamp}</span>
                        </div>
                        <p className="text-foreground/90 text-xs leading-relaxed">{note.content}</p>
                      </div>
                    </div>
                  ))}
                </div>

                {/* Inline Note Composer */}
                <div className="flex flex-col items-stretch gap-2 pt-2 sm:flex-row sm:items-center">
                  <div className="relative flex-1">
                    <input
                      value={newNoteDraft}
                      onChange={(e) => setNewNoteDraft(e.target.value)}
                      type="text"
                      placeholder="Append architecture note or observation..."
                      className="border-input bg-background text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/40 h-8 w-full rounded-md border px-3 py-1 text-xs shadow-xs outline-none focus-visible:ring-2"
                      onKeyDown={(e) => {
                        if (e.key === 'Enter') addNote()
                      }}
                    />
                  </div>

                  <div className="flex items-center gap-1.5">
                    <select
                      value={newNoteTag}
                      onChange={(e) => setNewNoteTag(e.target.value)}
                      className="border-input bg-background text-foreground focus-visible:border-ring focus-visible:ring-ring/40 h-8 rounded-md border px-2 text-xs shadow-xs outline-none focus-visible:ring-2"
                    >
                      <option value="#architecture">#architecture</option>
                      <option value="#pipeline">#pipeline</option>
                      <option value="#decision">#decision</option>
                      <option value="#action">#action</option>
                    </select>

                    <Button
                      size="sm"
                      variant="secondary"
                      className="h-8 gap-1 text-xs shadow-xs"
                      disabled={!newNoteDraft.trim()}
                      onClick={addNote}
                    >
                      <Plus className="size-3.5" />
                      Post
                    </Button>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>

        {/* Right Sidebar: Action Items, Decisions, & Meta (4-5 cols) */}
        <div className="space-y-6 lg:col-span-5 xl:col-span-4">
          {/* Action Items Checklist Card */}
          <Card className="border-border bg-card shadow-xs">
            <CardHeader className="px-5 pt-5 pb-3">
              <div className="flex items-center justify-between gap-2">
                <div className="flex items-center gap-2">
                  <div className="bg-success/10 text-success flex size-7 items-center justify-center rounded-md">
                    <UserCheck className="size-4" />
                  </div>
                  <div>
                    <CardTitle className="text-base font-semibold">Action Items</CardTitle>
                    <CardDescription className="text-xs">Assigned deliverables & deadlines</CardDescription>
                  </div>
                </div>

                {/* Completion Counter Badge */}
                <Badge variant="secondary" className="font-mono text-xs tabular-nums">
                  {completedTasksCount}/{totalTasksCount} Done ({completionPercentage}%)
                </Badge>
              </div>

              {/* Progress bar */}
              <div className="bg-muted mt-3 h-1.5 w-full overflow-hidden rounded-full">
                <div
                  className="bg-success h-full rounded-full transition-[width] duration-300"
                  style={{ width: `${completionPercentage}%` }}
                />
              </div>
            </CardHeader>

            <CardContent className="space-y-4 p-5 pt-2">
              {/* Checklist items */}
              <div className="space-y-2.5">
                {actionItems.map((task) => (
                  <div
                    key={task.id}
                    className={cn(
                      'group flex items-start gap-3 rounded-lg border p-3 transition-colors',
                      task.completed
                        ? 'border-border/40 bg-muted/20 opacity-75'
                        : 'border-border/80 bg-card hover:border-border hover:bg-muted/10',
                    )}
                  >
                    {/* Checkbox */}
                    <div className="pt-0.5">
                      <Checkbox
                        id={task.id}
                        checked={task.completed}
                        onCheckedChange={(checked) => toggleTask(task.id, Boolean(checked))}
                      />
                    </div>

                    {/* Task content */}
                    <div className="flex-1 space-y-1.5">
                      <label
                        htmlFor={task.id}
                        className={cn(
                          'block cursor-pointer text-xs leading-relaxed font-medium transition-colors select-none',
                          task.completed ? 'text-muted-foreground line-through' : 'text-foreground',
                        )}
                      >
                        {task.title}
                      </label>

                      <div className="text-muted-foreground flex flex-wrap items-center justify-between gap-1.5 text-xs">
                        {/* Assignee */}
                        <div className="flex items-center gap-1.5">
                          <Avatar size="xs" className="size-4 text-xs">
                            <AvatarFallback className={cn('text-xs', task.assigneeColor)}>
                              {task.assigneeInitials}
                            </AvatarFallback>
                          </Avatar>
                          <span className="text-foreground/80 text-xs font-medium">{task.assignee}</span>
                        </div>

                        {/* Priority & Date */}
                        <div className="flex items-center gap-1.5">
                          <Badge
                            variant={
                              task.priority === 'Urgent' || task.priority === 'High'
                                ? 'destructive'
                                : task.priority === 'Medium'
                                  ? 'warning'
                                  : 'secondary'
                            }
                            className="h-4.5 px-1.5 text-xs font-semibold uppercase"
                          >
                            {task.priority}
                          </Badge>
                          <span className="text-muted-foreground font-mono text-xs tabular-nums">{task.dueDate}</span>
                        </div>
                      </div>
                    </div>
                  </div>
                ))}
              </div>

              {/* Quick Add Action Item */}
              <div className="border-border/80 bg-muted/20 space-y-2 rounded-lg border border-dashed p-3">
                <input
                  value={newTaskTitle}
                  onChange={(e) => setNewTaskTitle(e.target.value)}
                  type="text"
                  placeholder="New action item description..."
                  className="border-input bg-background text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring h-7 w-full rounded border px-2.5 text-xs shadow-xs outline-none focus-visible:ring-1"
                  onKeyDown={(e) => {
                    if (e.key === 'Enter') addTask()
                  }}
                />

                <div className="flex items-center justify-between gap-2">
                  <select
                    value={newTaskAssignee}
                    onChange={(e) => setNewTaskAssignee(e.target.value)}
                    className="border-input bg-background text-foreground h-7 rounded border px-2 text-xs shadow-xs outline-none"
                  >
                    {attendees.map((att) => (
                      <option key={att.id} value={att.name}>
                        {att.name}
                      </option>
                    ))}
                  </select>

                  <select
                    value={newTaskPriority}
                    onChange={(e) => setNewTaskPriority(e.target.value as 'Urgent' | 'High' | 'Medium' | 'Low')}
                    className="border-input bg-background text-foreground h-7 rounded border px-2 text-xs shadow-xs outline-none"
                  >
                    <option value="Urgent">Urgent</option>
                    <option value="High">High</option>
                    <option value="Medium">Medium</option>
                    <option value="Low">Low</option>
                  </select>

                  <Button
                    size="xs"
                    variant="default"
                    className="h-7 gap-1 text-xs"
                    disabled={!newTaskTitle.trim()}
                    onClick={addTask}
                  >
                    <Plus className="size-3" />
                    Add
                  </Button>
                </div>
              </div>
            </CardContent>
          </Card>

          {/* Key Decisions Log Card */}
          <Card className="border-border bg-card shadow-xs">
            <CardHeader className="px-5 pt-5 pb-3">
              <div className="flex items-center justify-between gap-2">
                <div className="flex items-center gap-2">
                  <div className="bg-primary/10 text-primary flex size-7 items-center justify-center rounded-md">
                    <CheckCircle2 className="size-4" />
                  </div>
                  <div>
                    <CardTitle className="text-base font-semibold">Key Decisions Log</CardTitle>
                    <CardDescription className="text-xs">Recorded architectural consensus</CardDescription>
                  </div>
                </div>

                <Badge variant="outline" className="text-muted-foreground font-mono text-xs tabular-nums">
                  {keyDecisions.length} Recorded
                </Badge>
              </div>
            </CardHeader>

            <CardContent className="space-y-3 p-5 pt-2">
              {keyDecisions.map((decision) => (
                <div key={decision.id} className="border-border/80 bg-card space-y-2 rounded-lg border p-3.5 shadow-xs">
                  <div className="flex items-start justify-between gap-2">
                    <div className="flex items-center gap-1.5">
                      <span className="text-muted-foreground font-mono text-xs font-bold">D-0{decision.number}</span>
                      <Badge
                        variant={decision.status === 'Adopted' ? 'success' : 'warning'}
                        className="h-4.5 px-1.5 text-xs font-semibold uppercase"
                      >
                        {decision.status}
                      </Badge>
                    </div>

                    <span className="text-muted-foreground font-mono text-xs tabular-nums">{decision.time}</span>
                  </div>

                  <h4 className="text-foreground text-xs leading-snug font-semibold">{decision.title}</h4>

                  <p className="text-muted-foreground text-xs leading-relaxed">{decision.context}</p>

                  <div className="text-muted-foreground border-border/40 flex items-center gap-1 border-t pt-1 text-xs">
                    <span>Decided by:</span>
                    <span className="text-foreground font-medium">{decision.decidedBy}</span>
                  </div>
                </div>
              ))}
            </CardContent>
          </Card>

          {/* Meeting Metadata & Shared Resources Card */}
          <Card className="border-border bg-card shadow-xs">
            <CardHeader className="px-5 pt-4 pb-2">
              <CardTitle className="text-muted-foreground text-xs font-bold tracking-wider uppercase">
                Session Resources & Security
              </CardTitle>
            </CardHeader>

            <CardContent className="space-y-3 p-5 pt-1">
              <div className="space-y-2 text-xs">
                <div className="text-muted-foreground flex items-center justify-between">
                  <span className="flex items-center gap-1.5">
                    <Lock className="text-foreground/70 size-3.5" />
                    Access Level
                  </span>
                  <span className="text-foreground font-medium">Internal (SSO Auth)</span>
                </div>

                <div className="text-muted-foreground flex items-center justify-between">
                  <span className="flex items-center gap-1.5">
                    <Calendar className="text-foreground/70 size-3.5" />
                    Next Sync
                  </span>
                  <span className="text-foreground font-mono font-medium tabular-nums">Aug 28 · 14:00 PST</span>
                </div>
              </div>

              <Separator className="bg-border/60" />

              {/* Linked Resources */}
              <div className="space-y-1.5">
                <span className="text-muted-foreground text-xs font-semibold">Attached Artifacts</span>

                <div className="space-y-1">
                  <a
                    href="#artifacts"
                    className="text-foreground hover:bg-muted group flex items-center justify-between rounded-md p-1.5 text-xs transition-colors"
                  >
                    <span className="flex items-center gap-2">
                      <FileSpreadsheet className="text-success size-3.5" />
                      <span>OKLCH Token Audit Matrix.xlsx</span>
                    </span>
                    <ExternalLink className="text-muted-foreground group-hover:text-foreground size-3 transition-colors" />
                  </a>

                  <a
                    href="#artifacts"
                    className="text-foreground hover:bg-muted group flex items-center justify-between rounded-md p-1.5 text-xs transition-colors"
                  >
                    <span className="flex items-center gap-2">
                      <GitPullRequest className="text-chart-2 size-3.5" />
                      <span>PR #412: Flat Dependency Resolution</span>
                    </span>
                    <ExternalLink className="text-muted-foreground group-hover:text-foreground size-3 transition-colors" />
                  </a>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  )
}

Raw manifest:https://uipkge.dev/r/react/meeting-agenda-notes.json

Change language