@handled-ai/design-system 0.14.0 → 0.14.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,11 +1,20 @@
1
1
  import * as React from 'react';
2
2
  import { TimelineEvent } from './timeline-activity.js';
3
3
 
4
+ type PanelMode = 'default' | 'wide' | 'fullscreen';
4
5
  declare function EntityPanel({ isOpen, onClose, children, }: {
5
6
  isOpen: boolean;
6
7
  onClose: (open: boolean) => void;
7
8
  children?: React.ReactNode;
8
9
  }): React.JSX.Element;
10
+ declare function useEntityPanel(): {
11
+ isFullscreen: boolean;
12
+ setIsFullscreen: (v: boolean) => void;
13
+ panelMode: PanelMode;
14
+ setPanelMode: (mode: PanelMode) => void;
15
+ cyclePanelMode: () => void;
16
+ onClose: () => void;
17
+ };
9
18
  declare function EntityPanelHeader({ icon, title, badgeLabel, subtitle: _subtitle, headerAction, }: {
10
19
  icon?: React.ReactNode;
11
20
  title: string;
@@ -66,4 +75,4 @@ declare function EntityDetails({ onClose: _onClose }: {
66
75
  onClose?: () => void;
67
76
  }): React.JSX.Element;
68
77
 
69
- export { type ActivityItem, ConnectedApps, EntityActivityItem, EntityDetails, type EntityMetadataField, EntityMetadataGrid, EntityPanel, type EntityPanelBrandIcons, EntityPanelHeader, EntityPanelTabs, EntitySection, PotentialContacts, RecentActivity, SystemActivity };
78
+ export { type ActivityItem, ConnectedApps, EntityActivityItem, EntityDetails, type EntityMetadataField, EntityMetadataGrid, EntityPanel, type EntityPanelBrandIcons, EntityPanelHeader, EntityPanelTabs, EntitySection, type PanelMode, PotentialContacts, RecentActivity, SystemActivity, useEntityPanel };
@@ -30,23 +30,47 @@ function EntityPanel({
30
30
  onClose,
31
31
  children
32
32
  }) {
33
- const [isFullscreen, setIsFullscreen] = React.useState(false);
33
+ const [panelMode, setPanelMode] = React.useState("default");
34
+ const isFullscreen = panelMode === "fullscreen";
35
+ const setIsFullscreen = React.useCallback(
36
+ (val) => setPanelMode(val ? "fullscreen" : "default"),
37
+ []
38
+ );
39
+ const cyclePanelMode = React.useCallback(() => {
40
+ setPanelMode(
41
+ (prev) => prev === "default" ? "wide" : prev === "wide" ? "fullscreen" : "default"
42
+ );
43
+ }, []);
34
44
  React.useEffect(() => {
35
- if (!isOpen) setIsFullscreen(false);
45
+ if (!isOpen) setPanelMode("default");
36
46
  }, [isOpen]);
37
47
  const handleClose = React.useCallback(() => {
38
- setIsFullscreen(false);
48
+ setPanelMode("default");
39
49
  onClose(false);
40
50
  }, [onClose]);
41
- const panelContent = /* @__PURE__ */ jsx(EntityPanelContext.Provider, { value: { isFullscreen, setIsFullscreen, onClose: handleClose }, children });
51
+ const panelContent = /* @__PURE__ */ jsx(
52
+ EntityPanelContext.Provider,
53
+ {
54
+ value: {
55
+ isFullscreen,
56
+ setIsFullscreen,
57
+ panelMode,
58
+ setPanelMode,
59
+ cyclePanelMode,
60
+ onClose: handleClose
61
+ },
62
+ children
63
+ }
64
+ );
42
65
  if (isFullscreen && isOpen) {
43
66
  return /* @__PURE__ */ jsx("div", { className: "fixed inset-0 z-50 flex flex-col overflow-hidden bg-background", children: /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto px-5 py-5", children: panelContent }) });
44
67
  }
68
+ const widthClass = panelMode === "wide" ? "sm:w-[800px] sm:max-w-[900px]" : "sm:w-[500px] sm:max-w-[600px]";
45
69
  return /* @__PURE__ */ jsx(Sheet, { open: isOpen, onOpenChange: onClose, children: /* @__PURE__ */ jsxs(
46
70
  SheetContent,
47
71
  {
48
72
  side: "right",
49
- className: "w-full sm:w-[500px] sm:max-w-[600px] overflow-hidden p-0 bg-background border-l border-border flex flex-col",
73
+ className: `w-full ${widthClass} overflow-hidden p-0 bg-background border-l border-border flex flex-col`,
50
74
  showCloseButton: false,
51
75
  children: [
52
76
  /* @__PURE__ */ jsx(SheetHeader, { className: "sr-only p-0", children: /* @__PURE__ */ jsx(SheetTitle, { children: "Entity panel" }) }),
@@ -59,6 +83,11 @@ const EntityPanelContext = React.createContext({
59
83
  isFullscreen: false,
60
84
  setIsFullscreen: () => {
61
85
  },
86
+ panelMode: "default",
87
+ setPanelMode: () => {
88
+ },
89
+ cyclePanelMode: () => {
90
+ },
62
91
  onClose: () => {
63
92
  }
64
93
  });
@@ -72,7 +101,8 @@ function EntityPanelHeader({
72
101
  subtitle: _subtitle,
73
102
  headerAction
74
103
  }) {
75
- const { isFullscreen, setIsFullscreen, onClose } = useEntityPanel();
104
+ const { panelMode, cyclePanelMode, onClose } = useEntityPanel();
105
+ const sizeButtonTitle = panelMode === "default" ? "Wide" : panelMode === "wide" ? "Fullscreen" : "Exit fullscreen";
76
106
  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-4", children: [
77
107
  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [
78
108
  icon != null ? icon : /* @__PURE__ */ jsx(CalendarDays, { className: "w-5 h-5 text-muted-foreground shrink-0" }),
@@ -101,10 +131,10 @@ function EntityPanelHeader({
101
131
  "button",
102
132
  {
103
133
  type: "button",
104
- onClick: () => setIsFullscreen(!isFullscreen),
134
+ onClick: cyclePanelMode,
105
135
  className: "p-1.5 rounded-md hover:bg-secondary transition-colors",
106
- title: isFullscreen ? "Exit fullscreen" : "Fullscreen",
107
- children: isFullscreen ? /* @__PURE__ */ jsx(Minimize2, { className: "w-4 h-4" }) : /* @__PURE__ */ jsx(Maximize2, { className: "w-4 h-4" })
136
+ title: sizeButtonTitle,
137
+ children: panelMode === "fullscreen" ? /* @__PURE__ */ jsx(Minimize2, { className: "w-4 h-4" }) : /* @__PURE__ */ jsx(Maximize2, { className: "w-4 h-4" })
108
138
  }
109
139
  ),
110
140
  /* @__PURE__ */ jsx(
@@ -579,6 +609,7 @@ export {
579
609
  EntitySection,
580
610
  PotentialContacts,
581
611
  RecentActivity,
582
- SystemActivity
612
+ SystemActivity,
613
+ useEntityPanel
583
614
  };
584
615
  //# sourceMappingURL=entity-panel.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/components/entity-panel.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { Sheet, SheetContent, SheetHeader, SheetTitle } from \"./sheet\"\nimport { Badge } from \"./badge\"\nimport { Button } from \"./button\"\nimport { Input } from \"./input\"\nimport {\n Plus,\n ExternalLink,\n Mail,\n FileText,\n MessageCircle,\n Briefcase,\n Building2,\n Users,\n X,\n ChevronDown,\n ChevronUp,\n Link as LinkIcon,\n Maximize2,\n Minimize2,\n CalendarDays,\n} from \"lucide-react\"\nimport { TimelineActivity, type TimelineEvent } from \"./timeline-activity\"\n\n// ---------------------------------------------------------------------------\n// EntityPanel – supports both Sheet (side panel) and fullscreen modes\n// ---------------------------------------------------------------------------\n\nexport function EntityPanel({\n isOpen,\n onClose,\n children,\n}: {\n isOpen: boolean\n onClose: (open: boolean) => void\n children?: React.ReactNode\n}) {\n const [isFullscreen, setIsFullscreen] = React.useState(false)\n\n React.useEffect(() => {\n if (!isOpen) setIsFullscreen(false)\n }, [isOpen])\n\n const handleClose = React.useCallback(() => {\n setIsFullscreen(false)\n onClose(false)\n }, [onClose])\n\n const panelContent = (\n <EntityPanelContext.Provider value={{ isFullscreen, setIsFullscreen, onClose: handleClose }}>\n {children}\n </EntityPanelContext.Provider>\n )\n\n if (isFullscreen && isOpen) {\n return (\n <div className=\"fixed inset-0 z-50 flex flex-col overflow-hidden bg-background\">\n <div className=\"flex-1 overflow-y-auto px-5 py-5\">{panelContent}</div>\n </div>\n )\n }\n\n return (\n <Sheet open={isOpen} onOpenChange={onClose}>\n <SheetContent\n side=\"right\"\n className=\"w-full sm:w-[500px] sm:max-w-[600px] overflow-hidden p-0 bg-background border-l border-border flex flex-col\"\n showCloseButton={false}\n >\n <SheetHeader className=\"sr-only p-0\">\n <SheetTitle>Entity panel</SheetTitle>\n </SheetHeader>\n <div className=\"flex-1 overflow-y-auto px-5 py-5\">{panelContent}</div>\n </SheetContent>\n </Sheet>\n )\n}\n\nconst EntityPanelContext = React.createContext<{\n isFullscreen: boolean\n setIsFullscreen: (v: boolean) => void\n onClose: () => void\n}>({\n isFullscreen: false,\n setIsFullscreen: () => {},\n onClose: () => {},\n})\n\nfunction useEntityPanel() {\n return React.useContext(EntityPanelContext)\n}\n\n// ---------------------------------------------------------------------------\n// EntityPanelHeader – MeetingDetail-inspired header bar\n// ---------------------------------------------------------------------------\n\nexport function EntityPanelHeader({\n icon,\n title,\n badgeLabel,\n subtitle: _subtitle,\n headerAction,\n}: {\n icon?: React.ReactNode\n title: string\n badgeLabel?: string\n subtitle?: string\n headerAction?: React.ReactNode\n}) {\n const { isFullscreen, setIsFullscreen, onClose } = useEntityPanel()\n\n return (\n <div className=\"flex items-center justify-between mb-4\">\n <div className=\"flex items-center gap-2 min-w-0\">\n {icon ?? <CalendarDays className=\"w-5 h-5 text-muted-foreground shrink-0\" />}\n <h2 className=\"text-[16px] font-semibold text-foreground truncate\">{title}</h2>\n {badgeLabel && (\n <Badge\n variant=\"outline\"\n className=\"text-blue-600 border-blue-300 dark:border-blue-700 dark:text-blue-400 shadow-none px-2 py-0.5 text-[11px] font-medium shrink-0\"\n >\n {badgeLabel}\n </Badge>\n )}\n </div>\n <div className=\"flex items-center gap-1 shrink-0 ml-4 text-muted-foreground\">\n {headerAction}\n <button\n type=\"button\"\n className=\"p-1.5 rounded-md hover:bg-secondary transition-colors\"\n title=\"Copy Link\"\n >\n <LinkIcon className=\"w-4 h-4\" />\n </button>\n <button\n type=\"button\"\n onClick={() => setIsFullscreen(!isFullscreen)}\n className=\"p-1.5 rounded-md hover:bg-secondary transition-colors\"\n title={isFullscreen ? \"Exit fullscreen\" : \"Fullscreen\"}\n >\n {isFullscreen ? (\n <Minimize2 className=\"w-4 h-4\" />\n ) : (\n <Maximize2 className=\"w-4 h-4\" />\n )}\n </button>\n <button\n type=\"button\"\n onClick={onClose}\n className=\"p-1.5 rounded-md hover:bg-secondary transition-colors\"\n title=\"Close\"\n >\n <X className=\"w-4 h-4\" />\n </button>\n </div>\n </div>\n )\n}\n\n// ---------------------------------------------------------------------------\n// EntityPanelTabs – Overview/Details tab bar\n// ---------------------------------------------------------------------------\n\nexport function EntityPanelTabs({\n tabs,\n activeTab,\n onTabChange,\n}: {\n tabs: { id: string; label: string }[]\n activeTab: string\n onTabChange: (id: string) => void\n}) {\n return (\n <div className=\"flex items-center gap-5 border-b border-border mb-4\">\n {tabs.map((tab) => (\n <button\n key={tab.id}\n type=\"button\"\n onClick={() => onTabChange(tab.id)}\n className={`pb-2.5 text-[13px] font-medium border-b-2 transition-colors ${\n activeTab === tab.id\n ? \"border-primary text-foreground\"\n : \"border-transparent text-muted-foreground hover:text-foreground\"\n }`}\n >\n {tab.label}\n </button>\n ))}\n </div>\n )\n}\n\n// ---------------------------------------------------------------------------\n// EntityMetadataGrid – key/value metadata rows with icons\n// ---------------------------------------------------------------------------\n\nexport interface EntityMetadataField {\n icon: React.ComponentType<{ className?: string }>\n label: string\n value: React.ReactNode\n}\n\nexport function EntityMetadataGrid({ fields }: { fields: EntityMetadataField[] }) {\n return (\n <div className=\"grid grid-cols-1 md:grid-cols-[140px_1fr] gap-y-2.5 gap-x-4 mb-6 text-sm\">\n {fields.map((field, idx) => (\n <React.Fragment key={idx}>\n <div className=\"flex items-center gap-1.5 text-muted-foreground text-[13px]\">\n <field.icon className=\"w-3.5 h-3.5 shrink-0\" />\n <span>{field.label}</span>\n </div>\n <div className=\"text-foreground\">{field.value}</div>\n </React.Fragment>\n ))}\n </div>\n )\n}\n\n// ---------------------------------------------------------------------------\n// EntitySection – clean section with title (MeetingDetail-style)\n// ---------------------------------------------------------------------------\n\nexport function EntitySection({\n title,\n children,\n action,\n}: {\n title: string\n children: React.ReactNode\n action?: React.ReactNode\n}) {\n return (\n <section className=\"mb-6\">\n <div className=\"flex items-center justify-between mb-2.5\">\n <h3 className=\"text-[13px] font-semibold text-foreground\">{title}</h3>\n {action}\n </div>\n {children}\n </section>\n )\n}\n\n// ---------------------------------------------------------------------------\n// EntityActivityItem – clean activity row (MeetingDetail-style)\n// ---------------------------------------------------------------------------\n\nexport function EntityActivityItem({\n icon,\n title,\n description,\n date,\n}: {\n icon?: React.ReactNode\n title: React.ReactNode\n description?: React.ReactNode\n date?: string\n}) {\n return (\n <div className=\"flex gap-3 text-[13px]\">\n <div className=\"mt-0.5 text-muted-foreground shrink-0\">\n {icon ?? <CalendarDays className=\"w-4 h-4\" />}\n </div>\n <div>\n <p className=\"text-foreground leading-relaxed\">{title}</p>\n {description && <p className=\"text-[11px] text-muted-foreground/70 mt-0.5\">{description}</p>}\n {date && <p className=\"text-[11px] text-muted-foreground/70 mt-0.5\">{date}</p>}\n </div>\n </div>\n )\n}\n\n// ---------------------------------------------------------------------------\n// SystemActivity – standalone section for bottom of entity panel\n// ---------------------------------------------------------------------------\n\nexport function SystemActivity() {\n return (\n <EntitySection title=\"System Activity\">\n <div className=\"space-y-4\">\n <EntityActivityItem\n title={<><span className=\"font-medium\">System</span> enriched the lead</>}\n date=\"Today at 10:15 AM\"\n />\n <EntityActivityItem\n icon={<Mail className=\"w-4 h-4\" />}\n title={<><span className=\"font-medium\">Jackie Lee</span> submitted website form</>}\n date=\"Yesterday at 3:22 PM\"\n />\n </div>\n </EntitySection>\n )\n}\n\n// ---------------------------------------------------------------------------\n// PotentialContacts – unchanged from original\n// ---------------------------------------------------------------------------\n\nexport interface EntityPanelBrandIcons {\n linkedin?: string\n gmail?: string\n slack?: string\n gdoc?: string\n}\n\nfunction EntityPanelBrandIcon({\n src,\n alt,\n className,\n fallback,\n}: {\n src?: string\n alt: string\n className: string\n fallback: React.ReactNode\n}) {\n if (!src) {\n return <>{fallback}</>\n }\n\n return <img src={src} alt={alt} className={className} />\n}\n\nexport function PotentialContacts({\n icons,\n}: {\n icons?: Pick<EntityPanelBrandIcons, \"linkedin\" | \"gmail\">\n}) {\n return (\n <div className=\"space-y-2.5 mb-6\">\n <div className=\"flex items-center justify-between\">\n <h3 className=\"text-[13px] font-semibold text-foreground\">Potential Contacts</h3>\n <span className=\"text-xs text-muted-foreground\">3 identified</span>\n </div>\n <div className=\"space-y-0\">\n <div className=\"flex items-center justify-between gap-3 group py-2 border-b border-border/30 hover:bg-muted/20 -mx-2 px-2 rounded-sm transition-colors\">\n <div className=\"flex items-center gap-2.5 min-w-0\">\n <Badge variant=\"outline\" className=\"bg-indigo-50 text-indigo-700 border-indigo-200 dark:bg-indigo-900/30 dark:text-indigo-300 dark:border-indigo-800 shadow-none px-2 py-0 text-[11px] font-medium shrink-0\">Primary</Badge>\n <span className=\"font-medium text-sm text-foreground truncate\">Jackie Lee</span>\n <span className=\"text-muted-foreground text-sm shrink-0\">&middot;</span>\n <span className=\"text-muted-foreground text-sm truncate\">VP Finance</span>\n </div>\n <div className=\"flex items-center gap-1 shrink-0\">\n <button className=\"h-7 w-7 flex items-center justify-center hover:bg-muted rounded-md transition-colors\">\n <EntityPanelBrandIcon\n src={icons?.linkedin}\n alt=\"LinkedIn\"\n className=\"w-3.5 h-3.5 object-contain\"\n fallback={<LinkIcon className=\"w-3.5 h-3.5 text-muted-foreground\" />}\n />\n </button>\n <button className=\"h-7 w-7 flex items-center justify-center hover:bg-muted rounded-md transition-colors\">\n <EntityPanelBrandIcon\n src={icons?.gmail}\n alt=\"Gmail\"\n className=\"w-3.5 h-3.5 object-contain\"\n fallback={<Mail className=\"w-3.5 h-3.5 text-muted-foreground\" />}\n />\n </button>\n <Button size=\"sm\" className=\"bg-foreground text-background hover:bg-foreground/90 h-6 text-[11px] font-medium shadow-none ml-1\">\n <Plus className=\"w-3 h-3 mr-1\" /> Add to SF\n </Button>\n </div>\n </div>\n\n <div className=\"flex items-center justify-between gap-3 group py-2 border-b border-border/30 hover:bg-muted/20 -mx-2 px-2 rounded-sm transition-colors\">\n <div className=\"flex items-center gap-2.5 min-w-0\">\n <Badge variant=\"outline\" className=\"bg-green-50 text-green-700 border-green-200 dark:bg-green-900/30 dark:text-green-300 dark:border-green-800 shadow-none px-2 py-0 text-[11px] font-medium shrink-0\">78%</Badge>\n <span className=\"font-medium text-sm text-foreground truncate\">Marcus Webb</span>\n <span className=\"text-muted-foreground text-sm shrink-0\">&middot;</span>\n <span className=\"text-muted-foreground text-sm truncate\">CEO</span>\n </div>\n <div className=\"flex items-center gap-1 shrink-0\">\n <button className=\"h-7 w-7 flex items-center justify-center hover:bg-muted rounded-md transition-colors\">\n <EntityPanelBrandIcon\n src={icons?.linkedin}\n alt=\"LinkedIn\"\n className=\"w-3.5 h-3.5 object-contain\"\n fallback={<LinkIcon className=\"w-3.5 h-3.5 text-muted-foreground\" />}\n />\n </button>\n <Button size=\"sm\" className=\"bg-foreground text-background hover:bg-foreground/90 h-6 text-[11px] font-medium shadow-none ml-1\">\n <Plus className=\"w-3 h-3 mr-1\" /> Add to SF\n </Button>\n </div>\n </div>\n\n <div className=\"flex items-center justify-between gap-3 group py-2 border-b border-border/30 last:border-0 hover:bg-muted/20 -mx-2 px-2 rounded-sm transition-colors\">\n <div className=\"flex items-center gap-2.5 min-w-0\">\n <Badge variant=\"outline\" className=\"bg-amber-50 text-amber-700 border-amber-200 dark:bg-amber-900/30 dark:text-amber-300 dark:border-amber-800 shadow-none px-2 py-0 text-[11px] font-medium shrink-0\">65%</Badge>\n <span className=\"font-medium text-sm text-foreground truncate\">Priya Shah</span>\n <span className=\"text-muted-foreground text-sm shrink-0\">&middot;</span>\n <span className=\"text-muted-foreground text-sm truncate\">Head of Ops</span>\n </div>\n <div className=\"flex items-center gap-1 shrink-0\">\n <button className=\"h-7 w-7 flex items-center justify-center hover:bg-muted rounded-md transition-colors\">\n <EntityPanelBrandIcon\n src={icons?.linkedin}\n alt=\"LinkedIn\"\n className=\"w-3.5 h-3.5 object-contain\"\n fallback={<LinkIcon className=\"w-3.5 h-3.5 text-muted-foreground\" />}\n />\n </button>\n <button className=\"h-7 w-7 flex items-center justify-center hover:bg-muted rounded-md transition-colors\">\n <EntityPanelBrandIcon\n src={icons?.gmail}\n alt=\"Gmail\"\n className=\"w-3.5 h-3.5 object-contain\"\n fallback={<Mail className=\"w-3.5 h-3.5 text-muted-foreground\" />}\n />\n </button>\n <Button size=\"sm\" className=\"bg-foreground text-background hover:bg-foreground/90 h-6 text-[11px] font-medium shadow-none ml-1\">\n <Plus className=\"w-3 h-3 mr-1\" /> Add to SF\n </Button>\n </div>\n </div>\n </div>\n </div>\n )\n}\n\n// ---------------------------------------------------------------------------\n// RecentActivity\n// ---------------------------------------------------------------------------\n\nexport type ActivityItem = TimelineEvent\n\nexport function RecentActivity({\n title = \"Recent Activity\",\n count = \"10 total events\",\n filters = [],\n items = [],\n}: {\n title?: string\n count?: string\n filters?: string[]\n items?: TimelineEvent[]\n}) {\n return (\n <div id=\"entity-recent-activity\" className=\"space-y-3 mb-6 scroll-m-20\">\n <div className=\"flex items-center justify-between\">\n <h3 className=\"text-[13px] font-semibold text-foreground\">{title}</h3>\n {count && <span className=\"text-xs text-muted-foreground\">{count}</span>}\n </div>\n\n {filters.length > 0 && (\n <div className=\"flex flex-wrap items-center gap-1.5\">\n {filters.map((filter) => (\n <Button\n key={filter}\n variant=\"outline\"\n size=\"sm\"\n className=\"h-7 text-xs rounded-md shadow-none font-medium border-border text-muted-foreground hover:text-foreground\"\n >\n {filter}\n </Button>\n ))}\n </div>\n )}\n\n <div className=\"relative\">\n <Input\n placeholder=\"Search activity...\"\n className=\"h-9 text-sm bg-background border-border shadow-none\"\n />\n </div>\n\n <div>\n <TimelineActivity events={items} />\n </div>\n </div>\n )\n}\n\n// ---------------------------------------------------------------------------\n// ConnectedApps\n// ---------------------------------------------------------------------------\n\nexport function ConnectedApps({\n icons,\n}: {\n icons?: Pick<EntityPanelBrandIcons, \"slack\" | \"gdoc\">\n}) {\n return (\n <div className=\"space-y-2.5 mb-6\">\n <div className=\"flex items-center justify-between\">\n <h3 className=\"text-[13px] font-semibold text-foreground\">Connected Apps</h3>\n <span className=\"text-xs text-muted-foreground\">3 connected</span>\n </div>\n\n <div className=\"space-y-0\">\n <div className=\"flex items-center justify-between gap-3 group py-2 border-b border-border/30 hover:bg-muted/20 -mx-2 px-2 rounded-sm transition-colors\">\n <div className=\"flex items-center gap-3 min-w-0\">\n <div className=\"w-8 h-8 rounded-md border border-border/60 bg-muted/30 flex items-center justify-center shrink-0\">\n <EntityPanelBrandIcon\n src={icons?.slack}\n alt=\"Slack\"\n className=\"w-4 h-4 object-contain\"\n fallback={<MessageCircle className=\"w-4 h-4 text-muted-foreground\" />}\n />\n </div>\n <div className=\"min-w-0\">\n <p className=\"font-medium text-sm text-foreground leading-snug truncate\">#lunchclub-acmeco</p>\n <p className=\"text-xs text-muted-foreground/60\">Slack Channel</p>\n </div>\n </div>\n <div className=\"flex items-center gap-1.5 shrink-0\">\n <ExternalLink className=\"w-3 h-3 text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity\" />\n <span className=\"text-xs text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer hover:text-foreground\">Open</span>\n </div>\n </div>\n\n <div className=\"flex items-center justify-between gap-3 group py-2 border-b border-border/30 hover:bg-muted/20 -mx-2 px-2 rounded-sm transition-colors\">\n <div className=\"flex items-center gap-3 min-w-0\">\n <div className=\"w-8 h-8 rounded-md border border-border/60 bg-muted/30 flex items-center justify-center shrink-0\">\n <EntityPanelBrandIcon\n src={icons?.gdoc}\n alt=\"Google Docs\"\n className=\"w-4 h-4 object-contain\"\n fallback={<FileText className=\"w-4 h-4 text-muted-foreground\" />}\n />\n </div>\n <div className=\"min-w-0\">\n <p className=\"font-medium text-sm text-foreground leading-snug truncate\">Account Strategy Document</p>\n <p className=\"text-xs text-muted-foreground/60\">Google Document</p>\n </div>\n </div>\n <div className=\"flex items-center gap-1.5 shrink-0\">\n <ExternalLink className=\"w-3 h-3 text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity\" />\n <span className=\"text-xs text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer hover:text-foreground\">Open</span>\n </div>\n </div>\n\n <div className=\"flex items-center justify-between gap-3 group py-2 border-b border-border/30 last:border-0 hover:bg-muted/20 -mx-2 px-2 rounded-sm transition-colors\">\n <div className=\"flex items-center gap-3 min-w-0\">\n <div className=\"w-8 h-8 rounded-md border border-border/60 bg-muted/30 flex items-center justify-center shrink-0\">\n <FileText className=\"w-4 h-4 text-foreground\" />\n </div>\n <div className=\"min-w-0\">\n <p className=\"font-medium text-sm text-foreground leading-snug truncate\">Customer Success Playbook</p>\n <p className=\"text-xs text-muted-foreground/60\">Notion Page</p>\n </div>\n </div>\n <div className=\"flex items-center gap-1.5 shrink-0\">\n <ExternalLink className=\"w-3 h-3 text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity\" />\n <span className=\"text-xs text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer hover:text-foreground\">Open</span>\n </div>\n </div>\n </div>\n </div>\n )\n}\n\n// ---------------------------------------------------------------------------\n// EntityDetails – updated with MeetingDetail-inspired metadata grid + tabs\n// ---------------------------------------------------------------------------\n\nexport function EntityDetails({ onClose: _onClose }: { onClose?: () => void }) {\n const [activeTab, setActiveTab] = React.useState<\"overview\" | \"details\">(\"overview\")\n const [showMore, setShowMore] = React.useState(false)\n\n const leadFields: EntityMetadataField[] = [\n { icon: Users, label: \"Lead Name\", value: <span className=\"font-medium\">Jackie Lee</span> },\n { icon: Briefcase, label: \"Title\", value: <span className=\"font-medium\">VP Finance</span> },\n { icon: Building2, label: \"Company\", value: <span className=\"font-medium\">CloudKitchen</span> },\n { icon: Mail, label: \"Lead Source\", value: <span className=\"font-medium\">Inbound — Website form</span> },\n {\n icon: ({ className }) => (\n <div className={className}>\n <div className=\"w-3 h-3 rounded-full border-[2px] border-amber-500\" />\n </div>\n ),\n label: \"Lead Status\",\n value: (\n <Badge variant=\"outline\" className=\"text-amber-700 border-amber-200 bg-amber-50 dark:bg-amber-950 dark:text-amber-300 dark:border-amber-800 shadow-none font-medium px-2 py-0 text-[11px]\">\n New — Not Contacted\n </Badge>\n ),\n },\n { icon: Users, label: \"Lead Owner\", value: <span className=\"font-medium\">Sarah Johnson (SDR)</span> },\n {\n icon: Building2,\n label: \"Industry\",\n value: (\n <Badge variant=\"outline\" className=\"text-blue-700 border-blue-200 bg-blue-50 dark:bg-blue-950 dark:text-blue-300 dark:border-blue-800 shadow-none font-medium px-2 py-0 text-[11px]\">\n Food Tech / Logistics\n </Badge>\n ),\n },\n { icon: Users, label: \"Company Size\", value: <span className=\"font-medium\">200-500 employees</span> },\n ]\n\n const visibleFields = showMore ? leadFields : leadFields.slice(0, 6)\n\n return (\n <div className=\"space-y-0\">\n {/* Header */}\n <EntityPanelHeader\n icon={\n <div className=\"w-10 h-10 rounded-lg bg-muted flex items-center justify-center text-sm font-medium text-muted-foreground shrink-0\">\n CK\n </div>\n }\n title=\"CloudKitchen\"\n badgeLabel=\"Lead\"\n subtitle=\"Last enriched: Today at 10:15 AM\"\n />\n\n {/* Tabs */}\n <EntityPanelTabs\n tabs={[\n { id: \"overview\", label: \"Overview\" },\n { id: \"details\", label: \"Details\" },\n ]}\n activeTab={activeTab}\n onTabChange={(id) => setActiveTab(id as \"overview\" | \"details\")}\n />\n\n {activeTab === \"overview\" ? (\n <div className=\"space-y-0\">\n {/* Metadata Grid */}\n <EntityMetadataGrid fields={visibleFields} />\n\n {leadFields.length > 6 && (\n <button\n onClick={() => setShowMore(!showMore)}\n className=\"flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors mb-6\"\n >\n {showMore ? \"See less\" : \"See more\"}\n {showMore ? <ChevronUp className=\"w-3 h-3\" /> : <ChevronDown className=\"w-3 h-3\" />}\n </button>\n )}\n\n {/* Enrichment as sections */}\n <EntitySection title=\"Company Signals\">\n <ul className=\"space-y-2\">\n <li className=\"flex items-start gap-2 text-sm text-muted-foreground\">\n <span className=\"text-muted-foreground/50 mt-1 shrink-0\">&bull;</span>\n <span>\n Recent funding: $45M Series B, 3 months ago\n <span className=\"inline-flex items-center justify-center w-4 h-4 ml-1.5 align-text-top text-[9px] font-medium text-muted-foreground bg-muted/30 border border-border/50 rounded-full\">1</span>\n </span>\n </li>\n <li className=\"flex items-start gap-2 text-sm text-muted-foreground\">\n <span className=\"text-muted-foreground/50 mt-1 shrink-0\">&bull;</span>\n <span>\n Hiring: 3 finance/treasury roles in last 30 days\n <span className=\"inline-flex items-center justify-center w-4 h-4 ml-1.5 align-text-top text-[9px] font-medium text-muted-foreground bg-muted/30 border border-border/50 rounded-full\">2</span>\n </span>\n </li>\n <li className=\"flex items-start gap-2 text-sm text-muted-foreground\">\n <span className=\"text-muted-foreground/50 mt-1 shrink-0\">&bull;</span>\n <span>\n Market expansion: 8 &rarr; 15 US markets planned\n <span className=\"inline-flex items-center justify-center w-4 h-4 ml-1.5 align-text-top text-[9px] font-medium text-muted-foreground bg-muted/30 border border-border/50 rounded-full\">3</span>\n </span>\n </li>\n </ul>\n </EntitySection>\n\n <EntitySection title=\"Contact Signals (Jackie Lee)\">\n <ul className=\"space-y-2\">\n <li className=\"flex items-start gap-2 text-sm text-muted-foreground\">\n <span className=\"text-muted-foreground/50 mt-1 shrink-0\">&bull;</span>\n <span>\n Started role: 12 days ago\n <span className=\"inline-flex items-center justify-center w-4 h-4 ml-1.5 align-text-top text-[9px] font-medium text-muted-foreground bg-muted/30 border border-border/50 rounded-full\">4</span>\n </span>\n </li>\n <li className=\"flex items-start gap-2 text-sm text-muted-foreground\">\n <span className=\"text-muted-foreground/50 mt-1 shrink-0\">&bull;</span>\n <span>\n Previous: Deel — operations/finance\n <span className=\"inline-flex items-center justify-center w-4 h-4 ml-1.5 align-text-top text-[9px] font-medium text-muted-foreground bg-muted/30 border border-border/50 rounded-full\">4</span>\n </span>\n </li>\n <li className=\"flex items-start gap-2 text-sm text-muted-foreground\">\n <span className=\"text-muted-foreground/50 mt-1 shrink-0\">&bull;</span>\n <span>\n LinkedIn connections to existing customers: 2 detected\n <span className=\"inline-flex items-center justify-center w-4 h-4 ml-1.5 align-text-top text-[9px] font-medium text-muted-foreground bg-muted/30 border border-border/50 rounded-full\">4</span>\n </span>\n </li>\n </ul>\n </EntitySection>\n\n <SourcesToggle />\n </div>\n ) : (\n <div className=\"space-y-0\">\n <EntitySection title=\"Estimated Tech Stack\">\n <div className=\"space-y-2\">\n <div className=\"flex items-start gap-2 text-sm\">\n <span className=\"text-muted-foreground/50 mt-1 shrink-0\">&bull;</span>\n <span className=\"text-muted-foreground min-w-[100px] shrink-0\">Banking:</span>\n <span className=\"text-muted-foreground/50 italic\">Unknown</span>\n </div>\n <div className=\"flex items-start gap-2 text-sm\">\n <span className=\"text-muted-foreground/50 mt-1 shrink-0\">&bull;</span>\n <span className=\"text-muted-foreground min-w-[100px] shrink-0\">Corporate Cards:</span>\n <span className=\"text-foreground font-medium\">\n Brex <span className=\"text-muted-foreground font-normal\">(from job posting requirements)</span>\n <span className=\"inline-flex items-center justify-center w-4 h-4 ml-1.5 align-text-top text-[9px] font-medium text-muted-foreground bg-muted/30 border border-border/50 rounded-full\">2</span>\n </span>\n </div>\n <div className=\"flex items-start gap-2 text-sm\">\n <span className=\"text-muted-foreground/50 mt-1 shrink-0\">&bull;</span>\n <span className=\"text-muted-foreground min-w-[100px] shrink-0\">Payroll:</span>\n <span className=\"text-foreground font-medium\">\n Gusto <span className=\"text-muted-foreground font-normal\">(from LinkedIn integrations)</span>\n <span className=\"inline-flex items-center justify-center w-4 h-4 ml-1.5 align-text-top text-[9px] font-medium text-muted-foreground bg-muted/30 border border-border/50 rounded-full\">5</span>\n </span>\n </div>\n </div>\n </EntitySection>\n </div>\n )}\n </div>\n )\n}\n\n// ---------------------------------------------------------------------------\n// SourcesToggle – collapsible sources list\n// ---------------------------------------------------------------------------\n\nfunction SourcesToggle() {\n const [expanded, setExpanded] = React.useState(false)\n\n const sources = [\n { name: \"Crunchbase\", type: \"Funding data\", lastPull: \"2h ago\" },\n { name: \"LinkedIn\", type: \"People & company\", lastPull: \"12h ago\" },\n { name: \"LinkedIn Jobs\", type: \"Hiring signals\", lastPull: \"1d ago\" },\n { name: \"PR Newswire\", type: \"News & press\", lastPull: \"6h ago\" },\n { name: \"Clearbit\", type: \"Tech stack & firmographics\", lastPull: \"2h ago\" },\n ]\n\n return (\n <div className=\"mb-6\">\n <button\n onClick={() => setExpanded(!expanded)}\n className=\"flex items-center gap-1.5 text-xs font-semibold text-muted-foreground hover:text-foreground transition-colors\"\n >\n Sources\n <ChevronDown className={`w-3.5 h-3.5 transition-transform duration-200 ${expanded ? \"rotate-180\" : \"\"}`} />\n </button>\n\n {expanded && (\n <div className=\"pt-3 space-y-2 animate-in fade-in slide-in-from-top-1 duration-200\">\n {sources.map((src, idx) => (\n <div key={idx} className=\"flex items-center justify-between text-xs text-muted-foreground py-1\">\n <div className=\"flex items-center gap-2\">\n <span className=\"inline-flex items-center justify-center w-4 h-4 text-[9px] font-medium text-muted-foreground/50 border border-border rounded-full\">\n {idx + 1}\n </span>\n <span className=\"font-medium text-foreground\">{src.name}</span>\n <span className=\"text-muted-foreground/60\">&middot;</span>\n <span>{src.type}</span>\n </div>\n <span className=\"text-muted-foreground/50\">{src.lastPull}</span>\n </div>\n ))}\n </div>\n )}\n </div>\n )\n}\n"],"mappings":"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","names":[]}
1
+ {"version":3,"sources":["../../src/components/entity-panel.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { Sheet, SheetContent, SheetHeader, SheetTitle } from \"./sheet\"\nimport { Badge } from \"./badge\"\nimport { Button } from \"./button\"\nimport { Input } from \"./input\"\nimport {\n Plus,\n ExternalLink,\n Mail,\n FileText,\n MessageCircle,\n Briefcase,\n Building2,\n Users,\n X,\n ChevronDown,\n ChevronUp,\n Link as LinkIcon,\n Maximize2,\n Minimize2,\n CalendarDays,\n} from \"lucide-react\"\nimport { TimelineActivity, type TimelineEvent } from \"./timeline-activity\"\n\n// ---------------------------------------------------------------------------\n// EntityPanel -- supports Sheet (side panel), wide, and fullscreen modes\n// ---------------------------------------------------------------------------\n\nexport type PanelMode = 'default' | 'wide' | 'fullscreen'\n\nexport function EntityPanel({\n isOpen,\n onClose,\n children,\n}: {\n isOpen: boolean\n onClose: (open: boolean) => void\n children?: React.ReactNode\n}) {\n const [panelMode, setPanelMode] = React.useState<PanelMode>('default')\n\n // Backward-compatible derived values\n const isFullscreen = panelMode === 'fullscreen'\n const setIsFullscreen = React.useCallback(\n (val: boolean) => setPanelMode(val ? 'fullscreen' : 'default'),\n [],\n )\n\n const cyclePanelMode = React.useCallback(() => {\n setPanelMode((prev) =>\n prev === 'default' ? 'wide' : prev === 'wide' ? 'fullscreen' : 'default',\n )\n }, [])\n\n React.useEffect(() => {\n if (!isOpen) setPanelMode('default')\n }, [isOpen])\n\n const handleClose = React.useCallback(() => {\n setPanelMode('default')\n onClose(false)\n }, [onClose])\n\n const panelContent = (\n <EntityPanelContext.Provider\n value={{\n isFullscreen,\n setIsFullscreen,\n panelMode,\n setPanelMode,\n cyclePanelMode,\n onClose: handleClose,\n }}\n >\n {children}\n </EntityPanelContext.Provider>\n )\n\n if (isFullscreen && isOpen) {\n return (\n <div className=\"fixed inset-0 z-50 flex flex-col overflow-hidden bg-background\">\n <div className=\"flex-1 overflow-y-auto px-5 py-5\">{panelContent}</div>\n </div>\n )\n }\n\n const widthClass =\n panelMode === 'wide'\n ? 'sm:w-[800px] sm:max-w-[900px]'\n : 'sm:w-[500px] sm:max-w-[600px]'\n\n return (\n <Sheet open={isOpen} onOpenChange={onClose}>\n <SheetContent\n side=\"right\"\n className={`w-full ${widthClass} overflow-hidden p-0 bg-background border-l border-border flex flex-col`}\n showCloseButton={false}\n >\n <SheetHeader className=\"sr-only p-0\">\n <SheetTitle>Entity panel</SheetTitle>\n </SheetHeader>\n <div className=\"flex-1 overflow-y-auto px-5 py-5\">{panelContent}</div>\n </SheetContent>\n </Sheet>\n )\n}\n\nconst EntityPanelContext = React.createContext<{\n isFullscreen: boolean\n setIsFullscreen: (v: boolean) => void\n panelMode: PanelMode\n setPanelMode: (mode: PanelMode) => void\n cyclePanelMode: () => void\n onClose: () => void\n}>({\n isFullscreen: false,\n setIsFullscreen: () => {},\n panelMode: 'default',\n setPanelMode: () => {},\n cyclePanelMode: () => {},\n onClose: () => {},\n})\n\nexport function useEntityPanel() {\n return React.useContext(EntityPanelContext)\n}\n\n// ---------------------------------------------------------------------------\n// EntityPanelHeader – MeetingDetail-inspired header bar\n// ---------------------------------------------------------------------------\n\nexport function EntityPanelHeader({\n icon,\n title,\n badgeLabel,\n subtitle: _subtitle,\n headerAction,\n}: {\n icon?: React.ReactNode\n title: string\n badgeLabel?: string\n subtitle?: string\n headerAction?: React.ReactNode\n}) {\n const { panelMode, cyclePanelMode, onClose } = useEntityPanel()\n\n const sizeButtonTitle =\n panelMode === 'default' ? 'Wide' : panelMode === 'wide' ? 'Fullscreen' : 'Exit fullscreen'\n\n return (\n <div className=\"flex items-center justify-between mb-4\">\n <div className=\"flex items-center gap-2 min-w-0\">\n {icon ?? <CalendarDays className=\"w-5 h-5 text-muted-foreground shrink-0\" />}\n <h2 className=\"text-[16px] font-semibold text-foreground truncate\">{title}</h2>\n {badgeLabel && (\n <Badge\n variant=\"outline\"\n className=\"text-blue-600 border-blue-300 dark:border-blue-700 dark:text-blue-400 shadow-none px-2 py-0.5 text-[11px] font-medium shrink-0\"\n >\n {badgeLabel}\n </Badge>\n )}\n </div>\n <div className=\"flex items-center gap-1 shrink-0 ml-4 text-muted-foreground\">\n {headerAction}\n <button\n type=\"button\"\n className=\"p-1.5 rounded-md hover:bg-secondary transition-colors\"\n title=\"Copy Link\"\n >\n <LinkIcon className=\"w-4 h-4\" />\n </button>\n <button\n type=\"button\"\n onClick={cyclePanelMode}\n className=\"p-1.5 rounded-md hover:bg-secondary transition-colors\"\n title={sizeButtonTitle}\n >\n {panelMode === 'fullscreen' ? (\n <Minimize2 className=\"w-4 h-4\" />\n ) : (\n <Maximize2 className=\"w-4 h-4\" />\n )}\n </button>\n <button\n type=\"button\"\n onClick={onClose}\n className=\"p-1.5 rounded-md hover:bg-secondary transition-colors\"\n title=\"Close\"\n >\n <X className=\"w-4 h-4\" />\n </button>\n </div>\n </div>\n )\n}\n\n// ---------------------------------------------------------------------------\n// EntityPanelTabs – Overview/Details tab bar\n// ---------------------------------------------------------------------------\n\nexport function EntityPanelTabs({\n tabs,\n activeTab,\n onTabChange,\n}: {\n tabs: { id: string; label: string }[]\n activeTab: string\n onTabChange: (id: string) => void\n}) {\n return (\n <div className=\"flex items-center gap-5 border-b border-border mb-4\">\n {tabs.map((tab) => (\n <button\n key={tab.id}\n type=\"button\"\n onClick={() => onTabChange(tab.id)}\n className={`pb-2.5 text-[13px] font-medium border-b-2 transition-colors ${\n activeTab === tab.id\n ? \"border-primary text-foreground\"\n : \"border-transparent text-muted-foreground hover:text-foreground\"\n }`}\n >\n {tab.label}\n </button>\n ))}\n </div>\n )\n}\n\n// ---------------------------------------------------------------------------\n// EntityMetadataGrid – key/value metadata rows with icons\n// ---------------------------------------------------------------------------\n\nexport interface EntityMetadataField {\n icon: React.ComponentType<{ className?: string }>\n label: string\n value: React.ReactNode\n}\n\nexport function EntityMetadataGrid({ fields }: { fields: EntityMetadataField[] }) {\n return (\n <div className=\"grid grid-cols-1 md:grid-cols-[140px_1fr] gap-y-2.5 gap-x-4 mb-6 text-sm\">\n {fields.map((field, idx) => (\n <React.Fragment key={idx}>\n <div className=\"flex items-center gap-1.5 text-muted-foreground text-[13px]\">\n <field.icon className=\"w-3.5 h-3.5 shrink-0\" />\n <span>{field.label}</span>\n </div>\n <div className=\"text-foreground\">{field.value}</div>\n </React.Fragment>\n ))}\n </div>\n )\n}\n\n// ---------------------------------------------------------------------------\n// EntitySection – clean section with title (MeetingDetail-style)\n// ---------------------------------------------------------------------------\n\nexport function EntitySection({\n title,\n children,\n action,\n}: {\n title: string\n children: React.ReactNode\n action?: React.ReactNode\n}) {\n return (\n <section className=\"mb-6\">\n <div className=\"flex items-center justify-between mb-2.5\">\n <h3 className=\"text-[13px] font-semibold text-foreground\">{title}</h3>\n {action}\n </div>\n {children}\n </section>\n )\n}\n\n// ---------------------------------------------------------------------------\n// EntityActivityItem – clean activity row (MeetingDetail-style)\n// ---------------------------------------------------------------------------\n\nexport function EntityActivityItem({\n icon,\n title,\n description,\n date,\n}: {\n icon?: React.ReactNode\n title: React.ReactNode\n description?: React.ReactNode\n date?: string\n}) {\n return (\n <div className=\"flex gap-3 text-[13px]\">\n <div className=\"mt-0.5 text-muted-foreground shrink-0\">\n {icon ?? <CalendarDays className=\"w-4 h-4\" />}\n </div>\n <div>\n <p className=\"text-foreground leading-relaxed\">{title}</p>\n {description && <p className=\"text-[11px] text-muted-foreground/70 mt-0.5\">{description}</p>}\n {date && <p className=\"text-[11px] text-muted-foreground/70 mt-0.5\">{date}</p>}\n </div>\n </div>\n )\n}\n\n// ---------------------------------------------------------------------------\n// SystemActivity – standalone section for bottom of entity panel\n// ---------------------------------------------------------------------------\n\nexport function SystemActivity() {\n return (\n <EntitySection title=\"System Activity\">\n <div className=\"space-y-4\">\n <EntityActivityItem\n title={<><span className=\"font-medium\">System</span> enriched the lead</>}\n date=\"Today at 10:15 AM\"\n />\n <EntityActivityItem\n icon={<Mail className=\"w-4 h-4\" />}\n title={<><span className=\"font-medium\">Jackie Lee</span> submitted website form</>}\n date=\"Yesterday at 3:22 PM\"\n />\n </div>\n </EntitySection>\n )\n}\n\n// ---------------------------------------------------------------------------\n// PotentialContacts – unchanged from original\n// ---------------------------------------------------------------------------\n\nexport interface EntityPanelBrandIcons {\n linkedin?: string\n gmail?: string\n slack?: string\n gdoc?: string\n}\n\nfunction EntityPanelBrandIcon({\n src,\n alt,\n className,\n fallback,\n}: {\n src?: string\n alt: string\n className: string\n fallback: React.ReactNode\n}) {\n if (!src) {\n return <>{fallback}</>\n }\n\n return <img src={src} alt={alt} className={className} />\n}\n\nexport function PotentialContacts({\n icons,\n}: {\n icons?: Pick<EntityPanelBrandIcons, \"linkedin\" | \"gmail\">\n}) {\n return (\n <div className=\"space-y-2.5 mb-6\">\n <div className=\"flex items-center justify-between\">\n <h3 className=\"text-[13px] font-semibold text-foreground\">Potential Contacts</h3>\n <span className=\"text-xs text-muted-foreground\">3 identified</span>\n </div>\n <div className=\"space-y-0\">\n <div className=\"flex items-center justify-between gap-3 group py-2 border-b border-border/30 hover:bg-muted/20 -mx-2 px-2 rounded-sm transition-colors\">\n <div className=\"flex items-center gap-2.5 min-w-0\">\n <Badge variant=\"outline\" className=\"bg-indigo-50 text-indigo-700 border-indigo-200 dark:bg-indigo-900/30 dark:text-indigo-300 dark:border-indigo-800 shadow-none px-2 py-0 text-[11px] font-medium shrink-0\">Primary</Badge>\n <span className=\"font-medium text-sm text-foreground truncate\">Jackie Lee</span>\n <span className=\"text-muted-foreground text-sm shrink-0\">&middot;</span>\n <span className=\"text-muted-foreground text-sm truncate\">VP Finance</span>\n </div>\n <div className=\"flex items-center gap-1 shrink-0\">\n <button className=\"h-7 w-7 flex items-center justify-center hover:bg-muted rounded-md transition-colors\">\n <EntityPanelBrandIcon\n src={icons?.linkedin}\n alt=\"LinkedIn\"\n className=\"w-3.5 h-3.5 object-contain\"\n fallback={<LinkIcon className=\"w-3.5 h-3.5 text-muted-foreground\" />}\n />\n </button>\n <button className=\"h-7 w-7 flex items-center justify-center hover:bg-muted rounded-md transition-colors\">\n <EntityPanelBrandIcon\n src={icons?.gmail}\n alt=\"Gmail\"\n className=\"w-3.5 h-3.5 object-contain\"\n fallback={<Mail className=\"w-3.5 h-3.5 text-muted-foreground\" />}\n />\n </button>\n <Button size=\"sm\" className=\"bg-foreground text-background hover:bg-foreground/90 h-6 text-[11px] font-medium shadow-none ml-1\">\n <Plus className=\"w-3 h-3 mr-1\" /> Add to SF\n </Button>\n </div>\n </div>\n\n <div className=\"flex items-center justify-between gap-3 group py-2 border-b border-border/30 hover:bg-muted/20 -mx-2 px-2 rounded-sm transition-colors\">\n <div className=\"flex items-center gap-2.5 min-w-0\">\n <Badge variant=\"outline\" className=\"bg-green-50 text-green-700 border-green-200 dark:bg-green-900/30 dark:text-green-300 dark:border-green-800 shadow-none px-2 py-0 text-[11px] font-medium shrink-0\">78%</Badge>\n <span className=\"font-medium text-sm text-foreground truncate\">Marcus Webb</span>\n <span className=\"text-muted-foreground text-sm shrink-0\">&middot;</span>\n <span className=\"text-muted-foreground text-sm truncate\">CEO</span>\n </div>\n <div className=\"flex items-center gap-1 shrink-0\">\n <button className=\"h-7 w-7 flex items-center justify-center hover:bg-muted rounded-md transition-colors\">\n <EntityPanelBrandIcon\n src={icons?.linkedin}\n alt=\"LinkedIn\"\n className=\"w-3.5 h-3.5 object-contain\"\n fallback={<LinkIcon className=\"w-3.5 h-3.5 text-muted-foreground\" />}\n />\n </button>\n <Button size=\"sm\" className=\"bg-foreground text-background hover:bg-foreground/90 h-6 text-[11px] font-medium shadow-none ml-1\">\n <Plus className=\"w-3 h-3 mr-1\" /> Add to SF\n </Button>\n </div>\n </div>\n\n <div className=\"flex items-center justify-between gap-3 group py-2 border-b border-border/30 last:border-0 hover:bg-muted/20 -mx-2 px-2 rounded-sm transition-colors\">\n <div className=\"flex items-center gap-2.5 min-w-0\">\n <Badge variant=\"outline\" className=\"bg-amber-50 text-amber-700 border-amber-200 dark:bg-amber-900/30 dark:text-amber-300 dark:border-amber-800 shadow-none px-2 py-0 text-[11px] font-medium shrink-0\">65%</Badge>\n <span className=\"font-medium text-sm text-foreground truncate\">Priya Shah</span>\n <span className=\"text-muted-foreground text-sm shrink-0\">&middot;</span>\n <span className=\"text-muted-foreground text-sm truncate\">Head of Ops</span>\n </div>\n <div className=\"flex items-center gap-1 shrink-0\">\n <button className=\"h-7 w-7 flex items-center justify-center hover:bg-muted rounded-md transition-colors\">\n <EntityPanelBrandIcon\n src={icons?.linkedin}\n alt=\"LinkedIn\"\n className=\"w-3.5 h-3.5 object-contain\"\n fallback={<LinkIcon className=\"w-3.5 h-3.5 text-muted-foreground\" />}\n />\n </button>\n <button className=\"h-7 w-7 flex items-center justify-center hover:bg-muted rounded-md transition-colors\">\n <EntityPanelBrandIcon\n src={icons?.gmail}\n alt=\"Gmail\"\n className=\"w-3.5 h-3.5 object-contain\"\n fallback={<Mail className=\"w-3.5 h-3.5 text-muted-foreground\" />}\n />\n </button>\n <Button size=\"sm\" className=\"bg-foreground text-background hover:bg-foreground/90 h-6 text-[11px] font-medium shadow-none ml-1\">\n <Plus className=\"w-3 h-3 mr-1\" /> Add to SF\n </Button>\n </div>\n </div>\n </div>\n </div>\n )\n}\n\n// ---------------------------------------------------------------------------\n// RecentActivity\n// ---------------------------------------------------------------------------\n\nexport type ActivityItem = TimelineEvent\n\nexport function RecentActivity({\n title = \"Recent Activity\",\n count = \"10 total events\",\n filters = [],\n items = [],\n}: {\n title?: string\n count?: string\n filters?: string[]\n items?: TimelineEvent[]\n}) {\n return (\n <div id=\"entity-recent-activity\" className=\"space-y-3 mb-6 scroll-m-20\">\n <div className=\"flex items-center justify-between\">\n <h3 className=\"text-[13px] font-semibold text-foreground\">{title}</h3>\n {count && <span className=\"text-xs text-muted-foreground\">{count}</span>}\n </div>\n\n {filters.length > 0 && (\n <div className=\"flex flex-wrap items-center gap-1.5\">\n {filters.map((filter) => (\n <Button\n key={filter}\n variant=\"outline\"\n size=\"sm\"\n className=\"h-7 text-xs rounded-md shadow-none font-medium border-border text-muted-foreground hover:text-foreground\"\n >\n {filter}\n </Button>\n ))}\n </div>\n )}\n\n <div className=\"relative\">\n <Input\n placeholder=\"Search activity...\"\n className=\"h-9 text-sm bg-background border-border shadow-none\"\n />\n </div>\n\n <div>\n <TimelineActivity events={items} />\n </div>\n </div>\n )\n}\n\n// ---------------------------------------------------------------------------\n// ConnectedApps\n// ---------------------------------------------------------------------------\n\nexport function ConnectedApps({\n icons,\n}: {\n icons?: Pick<EntityPanelBrandIcons, \"slack\" | \"gdoc\">\n}) {\n return (\n <div className=\"space-y-2.5 mb-6\">\n <div className=\"flex items-center justify-between\">\n <h3 className=\"text-[13px] font-semibold text-foreground\">Connected Apps</h3>\n <span className=\"text-xs text-muted-foreground\">3 connected</span>\n </div>\n\n <div className=\"space-y-0\">\n <div className=\"flex items-center justify-between gap-3 group py-2 border-b border-border/30 hover:bg-muted/20 -mx-2 px-2 rounded-sm transition-colors\">\n <div className=\"flex items-center gap-3 min-w-0\">\n <div className=\"w-8 h-8 rounded-md border border-border/60 bg-muted/30 flex items-center justify-center shrink-0\">\n <EntityPanelBrandIcon\n src={icons?.slack}\n alt=\"Slack\"\n className=\"w-4 h-4 object-contain\"\n fallback={<MessageCircle className=\"w-4 h-4 text-muted-foreground\" />}\n />\n </div>\n <div className=\"min-w-0\">\n <p className=\"font-medium text-sm text-foreground leading-snug truncate\">#lunchclub-acmeco</p>\n <p className=\"text-xs text-muted-foreground/60\">Slack Channel</p>\n </div>\n </div>\n <div className=\"flex items-center gap-1.5 shrink-0\">\n <ExternalLink className=\"w-3 h-3 text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity\" />\n <span className=\"text-xs text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer hover:text-foreground\">Open</span>\n </div>\n </div>\n\n <div className=\"flex items-center justify-between gap-3 group py-2 border-b border-border/30 hover:bg-muted/20 -mx-2 px-2 rounded-sm transition-colors\">\n <div className=\"flex items-center gap-3 min-w-0\">\n <div className=\"w-8 h-8 rounded-md border border-border/60 bg-muted/30 flex items-center justify-center shrink-0\">\n <EntityPanelBrandIcon\n src={icons?.gdoc}\n alt=\"Google Docs\"\n className=\"w-4 h-4 object-contain\"\n fallback={<FileText className=\"w-4 h-4 text-muted-foreground\" />}\n />\n </div>\n <div className=\"min-w-0\">\n <p className=\"font-medium text-sm text-foreground leading-snug truncate\">Account Strategy Document</p>\n <p className=\"text-xs text-muted-foreground/60\">Google Document</p>\n </div>\n </div>\n <div className=\"flex items-center gap-1.5 shrink-0\">\n <ExternalLink className=\"w-3 h-3 text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity\" />\n <span className=\"text-xs text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer hover:text-foreground\">Open</span>\n </div>\n </div>\n\n <div className=\"flex items-center justify-between gap-3 group py-2 border-b border-border/30 last:border-0 hover:bg-muted/20 -mx-2 px-2 rounded-sm transition-colors\">\n <div className=\"flex items-center gap-3 min-w-0\">\n <div className=\"w-8 h-8 rounded-md border border-border/60 bg-muted/30 flex items-center justify-center shrink-0\">\n <FileText className=\"w-4 h-4 text-foreground\" />\n </div>\n <div className=\"min-w-0\">\n <p className=\"font-medium text-sm text-foreground leading-snug truncate\">Customer Success Playbook</p>\n <p className=\"text-xs text-muted-foreground/60\">Notion Page</p>\n </div>\n </div>\n <div className=\"flex items-center gap-1.5 shrink-0\">\n <ExternalLink className=\"w-3 h-3 text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity\" />\n <span className=\"text-xs text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer hover:text-foreground\">Open</span>\n </div>\n </div>\n </div>\n </div>\n )\n}\n\n// ---------------------------------------------------------------------------\n// EntityDetails – updated with MeetingDetail-inspired metadata grid + tabs\n// ---------------------------------------------------------------------------\n\nexport function EntityDetails({ onClose: _onClose }: { onClose?: () => void }) {\n const [activeTab, setActiveTab] = React.useState<\"overview\" | \"details\">(\"overview\")\n const [showMore, setShowMore] = React.useState(false)\n\n const leadFields: EntityMetadataField[] = [\n { icon: Users, label: \"Lead Name\", value: <span className=\"font-medium\">Jackie Lee</span> },\n { icon: Briefcase, label: \"Title\", value: <span className=\"font-medium\">VP Finance</span> },\n { icon: Building2, label: \"Company\", value: <span className=\"font-medium\">CloudKitchen</span> },\n { icon: Mail, label: \"Lead Source\", value: <span className=\"font-medium\">Inbound — Website form</span> },\n {\n icon: ({ className }) => (\n <div className={className}>\n <div className=\"w-3 h-3 rounded-full border-[2px] border-amber-500\" />\n </div>\n ),\n label: \"Lead Status\",\n value: (\n <Badge variant=\"outline\" className=\"text-amber-700 border-amber-200 bg-amber-50 dark:bg-amber-950 dark:text-amber-300 dark:border-amber-800 shadow-none font-medium px-2 py-0 text-[11px]\">\n New — Not Contacted\n </Badge>\n ),\n },\n { icon: Users, label: \"Lead Owner\", value: <span className=\"font-medium\">Sarah Johnson (SDR)</span> },\n {\n icon: Building2,\n label: \"Industry\",\n value: (\n <Badge variant=\"outline\" className=\"text-blue-700 border-blue-200 bg-blue-50 dark:bg-blue-950 dark:text-blue-300 dark:border-blue-800 shadow-none font-medium px-2 py-0 text-[11px]\">\n Food Tech / Logistics\n </Badge>\n ),\n },\n { icon: Users, label: \"Company Size\", value: <span className=\"font-medium\">200-500 employees</span> },\n ]\n\n const visibleFields = showMore ? leadFields : leadFields.slice(0, 6)\n\n return (\n <div className=\"space-y-0\">\n {/* Header */}\n <EntityPanelHeader\n icon={\n <div className=\"w-10 h-10 rounded-lg bg-muted flex items-center justify-center text-sm font-medium text-muted-foreground shrink-0\">\n CK\n </div>\n }\n title=\"CloudKitchen\"\n badgeLabel=\"Lead\"\n subtitle=\"Last enriched: Today at 10:15 AM\"\n />\n\n {/* Tabs */}\n <EntityPanelTabs\n tabs={[\n { id: \"overview\", label: \"Overview\" },\n { id: \"details\", label: \"Details\" },\n ]}\n activeTab={activeTab}\n onTabChange={(id) => setActiveTab(id as \"overview\" | \"details\")}\n />\n\n {activeTab === \"overview\" ? (\n <div className=\"space-y-0\">\n {/* Metadata Grid */}\n <EntityMetadataGrid fields={visibleFields} />\n\n {leadFields.length > 6 && (\n <button\n onClick={() => setShowMore(!showMore)}\n className=\"flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors mb-6\"\n >\n {showMore ? \"See less\" : \"See more\"}\n {showMore ? <ChevronUp className=\"w-3 h-3\" /> : <ChevronDown className=\"w-3 h-3\" />}\n </button>\n )}\n\n {/* Enrichment as sections */}\n <EntitySection title=\"Company Signals\">\n <ul className=\"space-y-2\">\n <li className=\"flex items-start gap-2 text-sm text-muted-foreground\">\n <span className=\"text-muted-foreground/50 mt-1 shrink-0\">&bull;</span>\n <span>\n Recent funding: $45M Series B, 3 months ago\n <span className=\"inline-flex items-center justify-center w-4 h-4 ml-1.5 align-text-top text-[9px] font-medium text-muted-foreground bg-muted/30 border border-border/50 rounded-full\">1</span>\n </span>\n </li>\n <li className=\"flex items-start gap-2 text-sm text-muted-foreground\">\n <span className=\"text-muted-foreground/50 mt-1 shrink-0\">&bull;</span>\n <span>\n Hiring: 3 finance/treasury roles in last 30 days\n <span className=\"inline-flex items-center justify-center w-4 h-4 ml-1.5 align-text-top text-[9px] font-medium text-muted-foreground bg-muted/30 border border-border/50 rounded-full\">2</span>\n </span>\n </li>\n <li className=\"flex items-start gap-2 text-sm text-muted-foreground\">\n <span className=\"text-muted-foreground/50 mt-1 shrink-0\">&bull;</span>\n <span>\n Market expansion: 8 &rarr; 15 US markets planned\n <span className=\"inline-flex items-center justify-center w-4 h-4 ml-1.5 align-text-top text-[9px] font-medium text-muted-foreground bg-muted/30 border border-border/50 rounded-full\">3</span>\n </span>\n </li>\n </ul>\n </EntitySection>\n\n <EntitySection title=\"Contact Signals (Jackie Lee)\">\n <ul className=\"space-y-2\">\n <li className=\"flex items-start gap-2 text-sm text-muted-foreground\">\n <span className=\"text-muted-foreground/50 mt-1 shrink-0\">&bull;</span>\n <span>\n Started role: 12 days ago\n <span className=\"inline-flex items-center justify-center w-4 h-4 ml-1.5 align-text-top text-[9px] font-medium text-muted-foreground bg-muted/30 border border-border/50 rounded-full\">4</span>\n </span>\n </li>\n <li className=\"flex items-start gap-2 text-sm text-muted-foreground\">\n <span className=\"text-muted-foreground/50 mt-1 shrink-0\">&bull;</span>\n <span>\n Previous: Deel — operations/finance\n <span className=\"inline-flex items-center justify-center w-4 h-4 ml-1.5 align-text-top text-[9px] font-medium text-muted-foreground bg-muted/30 border border-border/50 rounded-full\">4</span>\n </span>\n </li>\n <li className=\"flex items-start gap-2 text-sm text-muted-foreground\">\n <span className=\"text-muted-foreground/50 mt-1 shrink-0\">&bull;</span>\n <span>\n LinkedIn connections to existing customers: 2 detected\n <span className=\"inline-flex items-center justify-center w-4 h-4 ml-1.5 align-text-top text-[9px] font-medium text-muted-foreground bg-muted/30 border border-border/50 rounded-full\">4</span>\n </span>\n </li>\n </ul>\n </EntitySection>\n\n <SourcesToggle />\n </div>\n ) : (\n <div className=\"space-y-0\">\n <EntitySection title=\"Estimated Tech Stack\">\n <div className=\"space-y-2\">\n <div className=\"flex items-start gap-2 text-sm\">\n <span className=\"text-muted-foreground/50 mt-1 shrink-0\">&bull;</span>\n <span className=\"text-muted-foreground min-w-[100px] shrink-0\">Banking:</span>\n <span className=\"text-muted-foreground/50 italic\">Unknown</span>\n </div>\n <div className=\"flex items-start gap-2 text-sm\">\n <span className=\"text-muted-foreground/50 mt-1 shrink-0\">&bull;</span>\n <span className=\"text-muted-foreground min-w-[100px] shrink-0\">Corporate Cards:</span>\n <span className=\"text-foreground font-medium\">\n Brex <span className=\"text-muted-foreground font-normal\">(from job posting requirements)</span>\n <span className=\"inline-flex items-center justify-center w-4 h-4 ml-1.5 align-text-top text-[9px] font-medium text-muted-foreground bg-muted/30 border border-border/50 rounded-full\">2</span>\n </span>\n </div>\n <div className=\"flex items-start gap-2 text-sm\">\n <span className=\"text-muted-foreground/50 mt-1 shrink-0\">&bull;</span>\n <span className=\"text-muted-foreground min-w-[100px] shrink-0\">Payroll:</span>\n <span className=\"text-foreground font-medium\">\n Gusto <span className=\"text-muted-foreground font-normal\">(from LinkedIn integrations)</span>\n <span className=\"inline-flex items-center justify-center w-4 h-4 ml-1.5 align-text-top text-[9px] font-medium text-muted-foreground bg-muted/30 border border-border/50 rounded-full\">5</span>\n </span>\n </div>\n </div>\n </EntitySection>\n </div>\n )}\n </div>\n )\n}\n\n// ---------------------------------------------------------------------------\n// SourcesToggle – collapsible sources list\n// ---------------------------------------------------------------------------\n\nfunction SourcesToggle() {\n const [expanded, setExpanded] = React.useState(false)\n\n const sources = [\n { name: \"Crunchbase\", type: \"Funding data\", lastPull: \"2h ago\" },\n { name: \"LinkedIn\", type: \"People & company\", lastPull: \"12h ago\" },\n { name: \"LinkedIn Jobs\", type: \"Hiring signals\", lastPull: \"1d ago\" },\n { name: \"PR Newswire\", type: \"News & press\", lastPull: \"6h ago\" },\n { name: \"Clearbit\", type: \"Tech stack & firmographics\", lastPull: \"2h ago\" },\n ]\n\n return (\n <div className=\"mb-6\">\n <button\n onClick={() => setExpanded(!expanded)}\n className=\"flex items-center gap-1.5 text-xs font-semibold text-muted-foreground hover:text-foreground transition-colors\"\n >\n Sources\n <ChevronDown className={`w-3.5 h-3.5 transition-transform duration-200 ${expanded ? \"rotate-180\" : \"\"}`} />\n </button>\n\n {expanded && (\n <div className=\"pt-3 space-y-2 animate-in fade-in slide-in-from-top-1 duration-200\">\n {sources.map((src, idx) => (\n <div key={idx} className=\"flex items-center justify-between text-xs text-muted-foreground py-1\">\n <div className=\"flex items-center gap-2\">\n <span className=\"inline-flex items-center justify-center w-4 h-4 text-[9px] font-medium text-muted-foreground/50 border border-border rounded-full\">\n {idx + 1}\n </span>\n <span className=\"font-medium text-foreground\">{src.name}</span>\n <span className=\"text-muted-foreground/60\">&middot;</span>\n <span>{src.type}</span>\n </div>\n <span className=\"text-muted-foreground/50\">{src.lastPull}</span>\n </div>\n ))}\n </div>\n )}\n </div>\n )\n}\n"],"mappings":"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","names":[]}
@@ -19,11 +19,12 @@ interface VirtualizedDataTableProps<TData> {
19
19
  onColumnFiltersChange?: OnChangeFn<ColumnFiltersState>;
20
20
  columnVisibility?: VisibilityState;
21
21
  onColumnVisibilityChange?: OnChangeFn<VisibilityState>;
22
+ isLoading?: boolean;
22
23
  emptyIcon?: React.ReactNode;
23
24
  emptyMessage?: string;
24
25
  emptyDescription?: string;
25
26
  className?: string;
26
27
  }
27
- declare function VirtualizedDataTable<TData>({ columns, data, height, estimateRowHeight, overscan, onRowClick, getRowId, onReachBottom, reachBottomThreshold, hasMore, isFetchingMore, sorting, onSortingChange, columnFilters, onColumnFiltersChange, columnVisibility, onColumnVisibilityChange, emptyIcon, emptyMessage, emptyDescription, className, }: VirtualizedDataTableProps<TData>): React.JSX.Element;
28
+ declare function VirtualizedDataTable<TData>({ columns, data, height, estimateRowHeight, overscan, onRowClick, getRowId, onReachBottom, reachBottomThreshold, hasMore, isFetchingMore, sorting, onSortingChange, columnFilters, onColumnFiltersChange, columnVisibility, onColumnVisibilityChange, isLoading, emptyIcon, emptyMessage, emptyDescription, className, }: VirtualizedDataTableProps<TData>): React.JSX.Element;
28
29
 
29
30
  export { VirtualizedDataTable, type VirtualizedDataTableProps };
@@ -48,6 +48,7 @@ function VirtualizedDataTable({
48
48
  onColumnFiltersChange,
49
49
  columnVisibility,
50
50
  onColumnVisibilityChange,
51
+ isLoading,
51
52
  emptyIcon,
52
53
  emptyMessage = "No rows found",
53
54
  emptyDescription = "Try adjusting your filters",
@@ -219,7 +220,10 @@ function VirtualizedDataTable({
219
220
  );
220
221
  })
221
222
  }
222
- ) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center gap-1 text-muted-foreground py-20", children: [
223
+ ) : isLoading ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center gap-2 text-muted-foreground py-20", children: [
224
+ /* @__PURE__ */ jsx(Loader2, { className: "h-7 w-7 animate-spin opacity-60" }),
225
+ /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: "Loading..." })
226
+ ] }) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center gap-1 text-muted-foreground py-20", children: [
223
227
  emptyIcon != null ? emptyIcon : /* @__PURE__ */ jsx(SearchX, { className: "h-7 w-7 opacity-40" }),
224
228
  /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: emptyMessage }),
225
229
  /* @__PURE__ */ jsx("p", { className: "text-xs", children: emptyDescription })
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/components/virtualized-data-table.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { useVirtualizer } from \"@tanstack/react-virtual\"\nimport {\n useReactTable,\n getCoreRowModel,\n flexRender,\n type ColumnDef,\n type SortingState,\n type ColumnFiltersState,\n type VisibilityState,\n type OnChangeFn,\n} from \"@tanstack/react-table\"\nimport { ArrowDown, ArrowUp, ArrowUpDown, SearchX, Loader2 } from \"lucide-react\"\n\nimport { cn } from \"../lib/utils\"\n\nexport interface VirtualizedDataTableProps<TData> {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n columns: ColumnDef<TData, any>[]\n data: TData[]\n\n // Virtualization\n height?: number | string\n estimateRowHeight?: number\n overscan?: number\n\n // Row interaction\n onRowClick?: (row: TData) => void\n getRowId?: (original: TData, index: number) => string\n\n // Infinite scroll\n onReachBottom?: () => void\n reachBottomThreshold?: number\n hasMore?: boolean\n isFetchingMore?: boolean\n\n // Server-driven state (controlled) — omit for internal state\n sorting?: SortingState\n onSortingChange?: OnChangeFn<SortingState>\n columnFilters?: ColumnFiltersState\n onColumnFiltersChange?: OnChangeFn<ColumnFiltersState>\n columnVisibility?: VisibilityState\n onColumnVisibilityChange?: OnChangeFn<VisibilityState>\n\n // Empty state\n emptyIcon?: React.ReactNode\n emptyMessage?: string\n emptyDescription?: string\n\n // Styling\n className?: string\n}\n\nexport function VirtualizedDataTable<TData>({\n columns,\n data,\n height = 600,\n estimateRowHeight = 48,\n overscan = 8,\n onRowClick,\n getRowId,\n onReachBottom,\n reachBottomThreshold = 5,\n hasMore = true,\n isFetchingMore,\n sorting,\n onSortingChange,\n columnFilters,\n onColumnFiltersChange,\n columnVisibility,\n onColumnVisibilityChange,\n emptyIcon,\n emptyMessage = \"No rows found\",\n emptyDescription = \"Try adjusting your filters\",\n className,\n}: VirtualizedDataTableProps<TData>) {\n // Controlled/uncontrolled state for sorting\n const [internalSorting, setInternalSorting] = React.useState<SortingState>([])\n const resolvedSorting = sorting ?? internalSorting\n const resolvedOnSortingChange = onSortingChange ?? setInternalSorting\n\n // Controlled/uncontrolled state for column filters\n const [internalColumnFilters, setInternalColumnFilters] =\n React.useState<ColumnFiltersState>([])\n const resolvedColumnFilters = columnFilters ?? internalColumnFilters\n const resolvedOnColumnFiltersChange =\n onColumnFiltersChange ?? setInternalColumnFilters\n\n // Controlled/uncontrolled state for column visibility\n const [internalColumnVisibility, setInternalColumnVisibility] =\n React.useState<VisibilityState>({})\n const resolvedColumnVisibility = columnVisibility ?? internalColumnVisibility\n const resolvedOnColumnVisibilityChange =\n onColumnVisibilityChange ?? setInternalColumnVisibility\n\n // TanStack Table setup\n const table = useReactTable({\n data,\n columns,\n ...(getRowId ? { getRowId } : {}),\n state: {\n sorting: resolvedSorting,\n columnFilters: resolvedColumnFilters,\n columnVisibility: resolvedColumnVisibility,\n },\n onSortingChange: resolvedOnSortingChange,\n onColumnFiltersChange: resolvedOnColumnFiltersChange,\n onColumnVisibilityChange: resolvedOnColumnVisibilityChange,\n manualSorting: true,\n manualFiltering: true,\n manualPagination: true,\n getCoreRowModel: getCoreRowModel(),\n })\n\n // Virtualizer setup\n const scrollContainerRef = React.useRef<HTMLDivElement>(null)\n const rows = table.getRowModel().rows\n\n const virtualizer = useVirtualizer({\n count: rows.length,\n getScrollElement: () => scrollContainerRef.current,\n estimateSize: () => estimateRowHeight,\n overscan,\n measureElement: (element) => element.getBoundingClientRect().height,\n })\n\n // Infinite scroll detection\n const lastTriggeredDataLengthRef = React.useRef<number>(0)\n\n // Derive a stable primitive for the last visible virtual-item index so the\n // effect below doesn't re-run on every render (getVirtualItems() returns a\n // new array reference each call).\n const virtualItems = virtualizer.getVirtualItems()\n const lastVirtualItemIndex =\n virtualItems.length > 0\n ? virtualItems[virtualItems.length - 1].index\n : -1\n\n React.useEffect(() => {\n if (!onReachBottom || isFetchingMore || hasMore === false) return\n if (lastVirtualItemIndex < 0) return\n if (lastVirtualItemIndex < rows.length - reachBottomThreshold) return\n\n // Prevent re-firing until data.length changes (i.e. new page loaded).\n if (lastTriggeredDataLengthRef.current === data.length) return\n lastTriggeredDataLengthRef.current = data.length\n\n onReachBottom()\n }, [\n lastVirtualItemIndex,\n rows.length,\n data.length,\n onReachBottom,\n isFetchingMore,\n hasMore,\n reachBottomThreshold,\n ])\n\n return (\n <div className={cn(\n \"w-full\",\n typeof height === \"string\" && height.trim().endsWith(\"%\") && \"h-full\",\n className,\n )}>\n <div\n ref={scrollContainerRef}\n className=\"relative overflow-auto\"\n style={{\n height: typeof height === \"number\" ? `${height}px` : height,\n contain: \"strict\",\n }}\n role=\"table\"\n aria-rowcount={data.length}\n aria-colcount={table.getVisibleLeafColumns().length}\n >\n {/* Sticky header */}\n <div className=\"sticky top-0 z-10 bg-background\" role=\"rowgroup\">\n {table.getHeaderGroups().map((headerGroup) => (\n <div\n key={headerGroup.id}\n className=\"flex w-max min-w-full border-b border-border/50\"\n role=\"row\"\n >\n {headerGroup.headers.map((header, colIdx) => (\n <div\n key={header.id}\n className=\"h-9 px-3 flex items-center text-xs font-medium text-muted-foreground whitespace-nowrap\"\n style={{\n width: header.getSize(),\n minWidth: header.getSize(),\n }}\n role=\"columnheader\"\n aria-colindex={colIdx + 1}\n aria-sort={\n header.column.getIsSorted() === \"asc\"\n ? \"ascending\"\n : header.column.getIsSorted() === \"desc\"\n ? \"descending\"\n : header.column.getCanSort()\n ? \"none\"\n : undefined\n }\n >\n {header.isPlaceholder ? null : header.column.getCanSort() ? (\n <button\n type=\"button\"\n className=\"inline-flex items-center gap-1 hover:text-foreground transition-colors\"\n onClick={header.column.getToggleSortingHandler()}\n >\n {flexRender(\n header.column.columnDef.header,\n header.getContext(),\n )}\n {header.column.getIsSorted() === \"asc\" ? (\n <ArrowUp className=\"w-3 h-3\" />\n ) : header.column.getIsSorted() === \"desc\" ? (\n <ArrowDown className=\"w-3 h-3\" />\n ) : (\n <ArrowUpDown className=\"w-3 h-3 opacity-40\" />\n )}\n </button>\n ) : (\n flexRender(\n header.column.columnDef.header,\n header.getContext(),\n )\n )}\n </div>\n ))}\n </div>\n ))}\n </div>\n\n {/* Virtualized body or empty state */}\n {rows.length > 0 ? (\n <div\n role=\"rowgroup\"\n style={{\n height: virtualizer.getTotalSize(),\n width: \"100%\",\n position: \"relative\",\n }}\n >\n {virtualizer.getVirtualItems().map((virtualRow) => {\n const row = rows[virtualRow.index]\n return (\n <div\n key={row.id}\n data-index={virtualRow.index}\n ref={virtualizer.measureElement}\n className={cn(\n \"absolute left-0 w-max min-w-full flex group transition-colors\",\n onRowClick && \"cursor-pointer\",\n )}\n style={{\n transform: `translateY(${virtualRow.start}px)`,\n }}\n role=\"row\"\n aria-rowindex={virtualRow.index + 2}\n onClick={() => onRowClick?.(row.original)}\n tabIndex={onRowClick ? 0 : undefined}\n onKeyDown={\n onRowClick\n ? (e: React.KeyboardEvent) => {\n if (e.key === \"Enter\" || e.key === \" \") {\n e.preventDefault()\n onRowClick(row.original)\n }\n }\n : undefined\n }\n >\n {row.getVisibleCells().map((cell, colIdx) => (\n <div\n key={cell.id}\n className=\"px-3 py-3 flex items-center whitespace-nowrap group-hover:bg-muted/50\"\n style={{\n width: cell.column.getSize(),\n minWidth: cell.column.getSize(),\n }}\n role=\"cell\"\n aria-colindex={colIdx + 1}\n >\n {flexRender(\n cell.column.columnDef.cell,\n cell.getContext(),\n )}\n </div>\n ))}\n </div>\n )\n })}\n </div>\n ) : (\n <div className=\"flex flex-col items-center justify-center gap-1 text-muted-foreground py-20\">\n {emptyIcon ?? <SearchX className=\"h-7 w-7 opacity-40\" />}\n <p className=\"text-sm font-medium\">{emptyMessage}</p>\n <p className=\"text-xs\">{emptyDescription}</p>\n </div>\n )}\n\n {/* Loading indicator */}\n {isFetchingMore && (\n <div className=\"flex items-center justify-center py-4\">\n <Loader2 className=\"h-5 w-5 animate-spin text-muted-foreground\" />\n </div>\n )}\n </div>\n </div>\n )\n}\n"],"mappings":"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","names":[]}
1
+ {"version":3,"sources":["../../src/components/virtualized-data-table.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { useVirtualizer } from \"@tanstack/react-virtual\"\nimport {\n useReactTable,\n getCoreRowModel,\n flexRender,\n type ColumnDef,\n type SortingState,\n type ColumnFiltersState,\n type VisibilityState,\n type OnChangeFn,\n} from \"@tanstack/react-table\"\nimport { ArrowDown, ArrowUp, ArrowUpDown, SearchX, Loader2 } from \"lucide-react\"\n\nimport { cn } from \"../lib/utils\"\n\nexport interface VirtualizedDataTableProps<TData> {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n columns: ColumnDef<TData, any>[]\n data: TData[]\n\n // Virtualization\n height?: number | string\n estimateRowHeight?: number\n overscan?: number\n\n // Row interaction\n onRowClick?: (row: TData) => void\n getRowId?: (original: TData, index: number) => string\n\n // Infinite scroll\n onReachBottom?: () => void\n reachBottomThreshold?: number\n hasMore?: boolean\n isFetchingMore?: boolean\n\n // Server-driven state (controlled) — omit for internal state\n sorting?: SortingState\n onSortingChange?: OnChangeFn<SortingState>\n columnFilters?: ColumnFiltersState\n onColumnFiltersChange?: OnChangeFn<ColumnFiltersState>\n columnVisibility?: VisibilityState\n onColumnVisibilityChange?: OnChangeFn<VisibilityState>\n\n // Loading / Empty state\n isLoading?: boolean\n emptyIcon?: React.ReactNode\n emptyMessage?: string\n emptyDescription?: string\n\n // Styling\n className?: string\n}\n\nexport function VirtualizedDataTable<TData>({\n columns,\n data,\n height = 600,\n estimateRowHeight = 48,\n overscan = 8,\n onRowClick,\n getRowId,\n onReachBottom,\n reachBottomThreshold = 5,\n hasMore = true,\n isFetchingMore,\n sorting,\n onSortingChange,\n columnFilters,\n onColumnFiltersChange,\n columnVisibility,\n onColumnVisibilityChange,\n isLoading,\n emptyIcon,\n emptyMessage = \"No rows found\",\n emptyDescription = \"Try adjusting your filters\",\n className,\n}: VirtualizedDataTableProps<TData>) {\n // Controlled/uncontrolled state for sorting\n const [internalSorting, setInternalSorting] = React.useState<SortingState>([])\n const resolvedSorting = sorting ?? internalSorting\n const resolvedOnSortingChange = onSortingChange ?? setInternalSorting\n\n // Controlled/uncontrolled state for column filters\n const [internalColumnFilters, setInternalColumnFilters] =\n React.useState<ColumnFiltersState>([])\n const resolvedColumnFilters = columnFilters ?? internalColumnFilters\n const resolvedOnColumnFiltersChange =\n onColumnFiltersChange ?? setInternalColumnFilters\n\n // Controlled/uncontrolled state for column visibility\n const [internalColumnVisibility, setInternalColumnVisibility] =\n React.useState<VisibilityState>({})\n const resolvedColumnVisibility = columnVisibility ?? internalColumnVisibility\n const resolvedOnColumnVisibilityChange =\n onColumnVisibilityChange ?? setInternalColumnVisibility\n\n // TanStack Table setup\n const table = useReactTable({\n data,\n columns,\n ...(getRowId ? { getRowId } : {}),\n state: {\n sorting: resolvedSorting,\n columnFilters: resolvedColumnFilters,\n columnVisibility: resolvedColumnVisibility,\n },\n onSortingChange: resolvedOnSortingChange,\n onColumnFiltersChange: resolvedOnColumnFiltersChange,\n onColumnVisibilityChange: resolvedOnColumnVisibilityChange,\n manualSorting: true,\n manualFiltering: true,\n manualPagination: true,\n getCoreRowModel: getCoreRowModel(),\n })\n\n // Virtualizer setup\n const scrollContainerRef = React.useRef<HTMLDivElement>(null)\n const rows = table.getRowModel().rows\n\n const virtualizer = useVirtualizer({\n count: rows.length,\n getScrollElement: () => scrollContainerRef.current,\n estimateSize: () => estimateRowHeight,\n overscan,\n measureElement: (element) => element.getBoundingClientRect().height,\n })\n\n // Infinite scroll detection\n const lastTriggeredDataLengthRef = React.useRef<number>(0)\n\n // Derive a stable primitive for the last visible virtual-item index so the\n // effect below doesn't re-run on every render (getVirtualItems() returns a\n // new array reference each call).\n const virtualItems = virtualizer.getVirtualItems()\n const lastVirtualItemIndex =\n virtualItems.length > 0\n ? virtualItems[virtualItems.length - 1].index\n : -1\n\n React.useEffect(() => {\n if (!onReachBottom || isFetchingMore || hasMore === false) return\n if (lastVirtualItemIndex < 0) return\n if (lastVirtualItemIndex < rows.length - reachBottomThreshold) return\n\n // Prevent re-firing until data.length changes (i.e. new page loaded).\n if (lastTriggeredDataLengthRef.current === data.length) return\n lastTriggeredDataLengthRef.current = data.length\n\n onReachBottom()\n }, [\n lastVirtualItemIndex,\n rows.length,\n data.length,\n onReachBottom,\n isFetchingMore,\n hasMore,\n reachBottomThreshold,\n ])\n\n return (\n <div className={cn(\n \"w-full\",\n typeof height === \"string\" && height.trim().endsWith(\"%\") && \"h-full\",\n className,\n )}>\n <div\n ref={scrollContainerRef}\n className=\"relative overflow-auto\"\n style={{\n height: typeof height === \"number\" ? `${height}px` : height,\n contain: \"strict\",\n }}\n role=\"table\"\n aria-rowcount={data.length}\n aria-colcount={table.getVisibleLeafColumns().length}\n >\n {/* Sticky header */}\n <div className=\"sticky top-0 z-10 bg-background\" role=\"rowgroup\">\n {table.getHeaderGroups().map((headerGroup) => (\n <div\n key={headerGroup.id}\n className=\"flex w-max min-w-full border-b border-border/50\"\n role=\"row\"\n >\n {headerGroup.headers.map((header, colIdx) => (\n <div\n key={header.id}\n className=\"h-9 px-3 flex items-center text-xs font-medium text-muted-foreground whitespace-nowrap\"\n style={{\n width: header.getSize(),\n minWidth: header.getSize(),\n }}\n role=\"columnheader\"\n aria-colindex={colIdx + 1}\n aria-sort={\n header.column.getIsSorted() === \"asc\"\n ? \"ascending\"\n : header.column.getIsSorted() === \"desc\"\n ? \"descending\"\n : header.column.getCanSort()\n ? \"none\"\n : undefined\n }\n >\n {header.isPlaceholder ? null : header.column.getCanSort() ? (\n <button\n type=\"button\"\n className=\"inline-flex items-center gap-1 hover:text-foreground transition-colors\"\n onClick={header.column.getToggleSortingHandler()}\n >\n {flexRender(\n header.column.columnDef.header,\n header.getContext(),\n )}\n {header.column.getIsSorted() === \"asc\" ? (\n <ArrowUp className=\"w-3 h-3\" />\n ) : header.column.getIsSorted() === \"desc\" ? (\n <ArrowDown className=\"w-3 h-3\" />\n ) : (\n <ArrowUpDown className=\"w-3 h-3 opacity-40\" />\n )}\n </button>\n ) : (\n flexRender(\n header.column.columnDef.header,\n header.getContext(),\n )\n )}\n </div>\n ))}\n </div>\n ))}\n </div>\n\n {/* Virtualized body or empty state */}\n {rows.length > 0 ? (\n <div\n role=\"rowgroup\"\n style={{\n height: virtualizer.getTotalSize(),\n width: \"100%\",\n position: \"relative\",\n }}\n >\n {virtualizer.getVirtualItems().map((virtualRow) => {\n const row = rows[virtualRow.index]\n return (\n <div\n key={row.id}\n data-index={virtualRow.index}\n ref={virtualizer.measureElement}\n className={cn(\n \"absolute left-0 w-max min-w-full flex group transition-colors\",\n onRowClick && \"cursor-pointer\",\n )}\n style={{\n transform: `translateY(${virtualRow.start}px)`,\n }}\n role=\"row\"\n aria-rowindex={virtualRow.index + 2}\n onClick={() => onRowClick?.(row.original)}\n tabIndex={onRowClick ? 0 : undefined}\n onKeyDown={\n onRowClick\n ? (e: React.KeyboardEvent) => {\n if (e.key === \"Enter\" || e.key === \" \") {\n e.preventDefault()\n onRowClick(row.original)\n }\n }\n : undefined\n }\n >\n {row.getVisibleCells().map((cell, colIdx) => (\n <div\n key={cell.id}\n className=\"px-3 py-3 flex items-center whitespace-nowrap group-hover:bg-muted/50\"\n style={{\n width: cell.column.getSize(),\n minWidth: cell.column.getSize(),\n }}\n role=\"cell\"\n aria-colindex={colIdx + 1}\n >\n {flexRender(\n cell.column.columnDef.cell,\n cell.getContext(),\n )}\n </div>\n ))}\n </div>\n )\n })}\n </div>\n ) : isLoading ? (\n <div className=\"flex flex-col items-center justify-center gap-2 text-muted-foreground py-20\">\n <Loader2 className=\"h-7 w-7 animate-spin opacity-60\" />\n <p className=\"text-sm font-medium\">Loading...</p>\n </div>\n ) : (\n <div className=\"flex flex-col items-center justify-center gap-1 text-muted-foreground py-20\">\n {emptyIcon ?? <SearchX className=\"h-7 w-7 opacity-40\" />}\n <p className=\"text-sm font-medium\">{emptyMessage}</p>\n <p className=\"text-xs\">{emptyDescription}</p>\n </div>\n )}\n\n {/* Loading indicator */}\n {isFetchingMore && (\n <div className=\"flex items-center justify-center py-4\">\n <Loader2 className=\"h-5 w-5 animate-spin text-muted-foreground\" />\n </div>\n )}\n </div>\n </div>\n )\n}\n"],"mappings":"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","names":[]}
package/dist/index.d.ts CHANGED
@@ -22,7 +22,7 @@ export { Citation, DetailViewHeader, DetailViewSummary, DetailViewThread, Source
22
22
  export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger } from './components/dialog.js';
23
23
  export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from './components/dropdown-menu.js';
24
24
  export { EmptyState, EmptyStateProps } from './components/empty-state.js';
25
- export { ActivityItem, ConnectedApps, EntityActivityItem, EntityDetails, EntityMetadataField, EntityMetadataGrid, EntityPanel, EntityPanelBrandIcons, EntityPanelHeader, EntityPanelTabs, EntitySection, PotentialContacts, RecentActivity, SystemActivity } from './components/entity-panel.js';
25
+ export { ActivityItem, ConnectedApps, EntityActivityItem, EntityDetails, EntityMetadataField, EntityMetadataGrid, EntityPanel, EntityPanelBrandIcons, EntityPanelHeader, EntityPanelTabs, EntitySection, PanelMode, PotentialContacts, RecentActivity, SystemActivity, useEntityPanel } from './components/entity-panel.js';
26
26
  export { FilterChip, FilterChipProps } from './components/filter-chip.js';
27
27
  export { InboxGroupHeader, InboxRow, InboxRowProps } from './components/inbox-row.js';
28
28
  export { AssigneeFilter, InboxFilterCategory, InboxToolbar, InboxToolbarProps } from './components/inbox-toolbar.js';
@@ -124,6 +124,8 @@ interface InboxViewConfig {
124
124
  };
125
125
  /** Render extra content at the end of the detail view, below the suggested actions section. */
126
126
  renderDetailExtra?: (item: QueueItem) => React.ReactNode;
127
+ /** Render content between the signal brief text and the signal score bar (e.g. "Signals on Case" chips). */
128
+ renderBeforeScore?: (item: QueueItem) => React.ReactNode;
127
129
  /** Render content between the signal score section and the activity timeline (e.g. OpportunityPanel). */
128
130
  renderAfterScore?: (item: QueueItem) => React.ReactNode;
129
131
  /** Formatted string for "Last activity X ago" in the collapsed timeline header. If omitted, falls back to the first event's time. */
@@ -42,6 +42,8 @@ interface DetailViewProps {
42
42
  hideApproveButton?: boolean;
43
43
  signalBriefCopy?: InboxViewConfig["signalBriefCopy"];
44
44
  renderDetailExtra?: (item: QueueItem) => React.ReactNode;
45
+ /** Render content between the signal brief text and the signal score bar (e.g. "Signals on Case" chips). */
46
+ renderBeforeScore?: (item: QueueItem) => React.ReactNode;
45
47
  /** Render content between the signal score section and the activity timeline. */
46
48
  renderAfterScore?: (item: QueueItem) => React.ReactNode;
47
49
  lastActivityTime?: string;
@@ -52,7 +54,7 @@ interface DetailViewProps {
52
54
  opportunityPreview?: OpportunityPreview;
53
55
  onRequestApproval?: () => Promise<void>;
54
56
  }
55
- declare function DetailView({ item, sections, getSignalScore, buildSuggestedActions, buildSourceItems, getTimelineEvents, accountContacts, emailSignature, iconMap, onOpenEntityPanel, onOpenRecentActivity, onSuggestedActionFeedback: _onSuggestedActionFeedback, onSignalApprove, getSignalApprovalState, signalLabels, hideApproveButton, signalBriefCopy, renderDetailExtra, renderAfterScore, lastActivityTime, renderMetadataExtra, onScoreFeedback, approveButtonIconUrl, opportunityPreview, onRequestApproval, }: DetailViewProps): React.JSX.Element;
56
- declare function PrototypeInboxView({ items, filterCategories, detailSections, accountContacts, buildAccountContacts, emailSignature, buildSuggestedActions: buildSuggestedActionsProp, buildSourceItems: buildSourceItemsProp, getSignalScore: getSignalScoreProp, getTimelineEvents, iconMap, hideToolbarActions, hideHoverActions, onSuggestedActionFeedback, onScoreFeedback, headerActions, onOpenEntityPanel, onOpenRecentActivity, onItemSelect, defaultViewMode, buildEntityChips, quickFilterTabs, hideAccountsButton, accountDetailsLabel, onSignalApprove, getSignalApprovalState, signalLabels, hideApproveButton, signalBriefCopy, renderDetailExtra, renderAfterScore, lastActivityTime, sortOptions, activeSortId, onSortChange, }: PrototypeInboxViewProps): React.JSX.Element;
57
+ declare function DetailView({ item, sections, getSignalScore, buildSuggestedActions, buildSourceItems, getTimelineEvents, accountContacts, emailSignature, iconMap, onOpenEntityPanel, onOpenRecentActivity, onSuggestedActionFeedback: _onSuggestedActionFeedback, onSignalApprove, getSignalApprovalState, signalLabels, hideApproveButton, signalBriefCopy, renderDetailExtra, renderBeforeScore, renderAfterScore, lastActivityTime, renderMetadataExtra, onScoreFeedback, approveButtonIconUrl, opportunityPreview, onRequestApproval, }: DetailViewProps): React.JSX.Element;
58
+ declare function PrototypeInboxView({ items, filterCategories, detailSections, accountContacts, buildAccountContacts, emailSignature, buildSuggestedActions: buildSuggestedActionsProp, buildSourceItems: buildSourceItemsProp, getSignalScore: getSignalScoreProp, getTimelineEvents, iconMap, hideToolbarActions, hideHoverActions, onSuggestedActionFeedback, onScoreFeedback, headerActions, onOpenEntityPanel, onOpenRecentActivity, onItemSelect, defaultViewMode, buildEntityChips, quickFilterTabs, hideAccountsButton, accountDetailsLabel, onSignalApprove, getSignalApprovalState, signalLabels, hideApproveButton, signalBriefCopy, renderDetailExtra, renderBeforeScore, renderAfterScore, lastActivityTime, sortOptions, activeSortId, onSortChange, }: PrototypeInboxViewProps): React.JSX.Element;
57
59
 
58
60
  export { DetailView, type DetailViewProps, PrototypeInboxView, type PrototypeInboxViewProps };
@@ -107,6 +107,7 @@ function DetailView({
107
107
  hideApproveButton,
108
108
  signalBriefCopy,
109
109
  renderDetailExtra,
110
+ renderBeforeScore,
110
111
  renderAfterScore,
111
112
  lastActivityTime,
112
113
  renderMetadataExtra,
@@ -249,6 +250,7 @@ function DetailView({
249
250
  /* @__PURE__ */ jsx(Sparkles, { className: "h-4 w-4 mt-0.5 shrink-0 text-primary" }),
250
251
  /* @__PURE__ */ jsx("span", { children: signalData.signalBrief })
251
252
  ] }) : /* @__PURE__ */ jsx("p", { className: "text-sm text-foreground/90 leading-relaxed mb-4", children: signalData.whyNow }),
253
+ renderBeforeScore == null ? void 0 : renderBeforeScore(item),
252
254
  /* @__PURE__ */ jsx(
253
255
  ScoreFeedback.Root,
254
256
  {
@@ -393,6 +395,7 @@ function PrototypeInboxView({
393
395
  hideApproveButton,
394
396
  signalBriefCopy,
395
397
  renderDetailExtra,
398
+ renderBeforeScore,
396
399
  renderAfterScore,
397
400
  lastActivityTime,
398
401
  sortOptions,
@@ -585,6 +588,7 @@ function PrototypeInboxView({
585
588
  hideApproveButton,
586
589
  signalBriefCopy,
587
590
  renderDetailExtra,
591
+ renderBeforeScore,
588
592
  renderAfterScore,
589
593
  lastActivityTime,
590
594
  onScoreFeedback
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/prototype/prototype-inbox-view.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport {\n ArrowLeft,\n ArrowUpDown,\n ChevronDown,\n ChevronRight,\n Filter,\n FileText,\n Clock,\n CheckSquare,\n Eye,\n Plus,\n\n Building,\n LayoutList,\n Columns2,\n Square,\n Tag,\n Sparkles,\n} from \"lucide-react\"\n\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuRadioGroup,\n DropdownMenuRadioItem,\n DropdownMenuTrigger,\n} from \"../components/dropdown-menu\"\nimport { Button } from \"../components/button\"\nimport { Badge } from \"../components/badge\"\nimport { Input } from \"../components/input\"\nimport { ViewModeToggle } from \"../components/view-mode-toggle\"\nimport {\n InboxToolbar,\n type AssigneeFilter,\n type InboxFilterCategory,\n} from \"../components/inbox-toolbar\"\nimport { GroupedListView, type GroupedListGroup } from \"../components/item-list\"\nimport { SignalApproval, type ApprovalState, type OpportunityPreview } from \"../components/signal-feedback-inline\"\nimport { ScoreFeedback } from \"../components/score-feedback\"\nimport { ScoreBreakdown } from \"../components/score-breakdown\"\nimport { Citation, type SourceDef } from \"../components/detail-view\"\nimport {\n SuggestedActions,\n type SuggestedAction,\n type SuggestedContact,\n} from \"../components/suggested-actions\"\nimport { TimelineActivity, type TimelineEvent } from \"../components/timeline-activity\"\nimport type {\n QueueItem,\n InboxViewConfig,\n InboxDetailSections,\n SignalScoreData,\n} from \"./prototype-config\"\n\n// ---------------------------------------------------------------------------\n// Dot color utility — maps statusColor to a Tailwind background class.\n// Centralised here so the list row and split-view card stay in sync and\n// future color additions are a single-edit change.\n// ---------------------------------------------------------------------------\n\nfunction dotColorClass(statusColor: string): string {\n if (statusColor === \"red\") return \"bg-[#f43f5e]\"\n if (statusColor === \"yellow\" || statusColor === \"amber\" || statusColor === \"orange\") return \"bg-[#eab308]\"\n if (statusColor === \"green\") return \"bg-[#22c55e]\"\n return \"bg-[#9ca3af]\"\n}\n\n// ---------------------------------------------------------------------------\n// Props\n// ---------------------------------------------------------------------------\n\nexport interface PrototypeInboxViewProps extends InboxViewConfig {\n /** Extra ReactNode rendered at the end of the header bar (e.g. exit button). */\n headerActions?: React.ReactNode\n onOpenEntityPanel?: () => void\n onOpenRecentActivity?: () => void\n onNavigateToInbox?: () => void\n onItemSelect?: (item: QueueItem) => void\n defaultViewMode?: \"list\" | \"split\"\n}\n\n// ---------------------------------------------------------------------------\n// Default detail sections\n// ---------------------------------------------------------------------------\n\nconst DEFAULT_DETAIL_SECTIONS: InboxDetailSections = {\n signalBrief: true,\n suggestedActions: true,\n timeline: true,\n}\n\nconst DEFAULT_SIGNAL_SCORE: SignalScoreData = {\n score: 65,\n factors: [\n { key: \"trigger\", label: \"Trigger strength\", score: 70, why: \"Moderate signal detected based on account activity\" },\n { key: \"fit\", label: \"Company fit\", score: 65, why: \"Reasonable fit based on company profile\" },\n { key: \"timing\", label: \"Timing\", score: 58, why: \"Within general evaluation window\" },\n ],\n whyNow: \"Moderate signals detected that warrant review and potential outreach.\",\n evidence: [\n \"Activity patterns suggest potential opportunity\",\n \"Company profile aligns with target segment\",\n ],\n confidence: 72,\n}\n\n// ---------------------------------------------------------------------------\n// Detail View\n// ---------------------------------------------------------------------------\n\nexport interface DetailViewProps {\n item: QueueItem\n sections: InboxDetailSections\n getSignalScore: (company: string, item?: QueueItem) => SignalScoreData\n buildSuggestedActions: (item: QueueItem) => SuggestedAction[]\n buildSourceItems: (item: QueueItem) => SourceDef[]\n getTimelineEvents?: (item: QueueItem) => TimelineEvent[]\n accountContacts: SuggestedContact[]\n emailSignature: string | React.ReactNode\n iconMap: Record<string, string>\n onOpenEntityPanel?: () => void\n onOpenRecentActivity?: () => void\n onSuggestedActionFeedback?: (actionId: number | string, feedback: string, actionTitle?: string) => void\n onSignalApprove?: (item: QueueItem) => void | Promise<boolean>\n getSignalApprovalState?: (item: QueueItem) => ApprovalState | undefined\n signalLabels?: InboxViewConfig[\"signalLabels\"]\n hideApproveButton?: boolean\n signalBriefCopy?: InboxViewConfig[\"signalBriefCopy\"]\n renderDetailExtra?: (item: QueueItem) => React.ReactNode\n /** Render content between the signal score section and the activity timeline. */\n renderAfterScore?: (item: QueueItem) => React.ReactNode\n lastActivityTime?: string\n /** Render extra metadata chips (e.g. assignee) inside the chips row below the title. */\n renderMetadataExtra?: (item: QueueItem) => React.ReactNode\n onScoreFeedback?: (type: \"up\" | \"down\", pills: string[], detail: string) => void\n approveButtonIconUrl?: string\n opportunityPreview?: OpportunityPreview\n onRequestApproval?: () => Promise<void>\n}\n\nexport function DetailView({\n item,\n sections,\n getSignalScore,\n buildSuggestedActions,\n buildSourceItems,\n getTimelineEvents,\n accountContacts,\n emailSignature,\n iconMap,\n onOpenEntityPanel,\n onOpenRecentActivity,\n onSuggestedActionFeedback: _onSuggestedActionFeedback,\n onSignalApprove,\n getSignalApprovalState,\n signalLabels,\n hideApproveButton,\n signalBriefCopy,\n renderDetailExtra,\n renderAfterScore,\n lastActivityTime,\n renderMetadataExtra,\n onScoreFeedback,\n approveButtonIconUrl,\n opportunityPreview,\n onRequestApproval,\n}: DetailViewProps) {\n const [evidenceExpanded, setEvidenceExpanded] = React.useState(false)\n const [showTimeline, setShowTimeline] = React.useState(false)\n const [extraActions, setExtraActions] = React.useState<SuggestedAction[]>([])\n\n React.useEffect(() => {\n setShowTimeline(false)\n setEvidenceExpanded(false)\n setExtraActions([])\n }, [item.id])\n\n const signalData = React.useMemo(\n () => getSignalScore(item.company, item),\n [getSignalScore, item.company, item],\n )\n\n const suggestedActions = React.useMemo(\n () => [...buildSuggestedActions(item), ...extraActions],\n [buildSuggestedActions, item, extraActions],\n )\n const sourceItems = React.useMemo(() => buildSourceItems(item), [buildSourceItems, item])\n const timelineEvents = React.useMemo(\n () => getTimelineEvents?.(item) ?? [],\n [getTimelineEvents, item],\n )\n\n const handleDuplicate = React.useCallback(\n (id: number | string) => {\n const base = suggestedActions.find((a) => a.id === id)\n if (!base || base.type !== \"email\") return\n const clone: SuggestedAction = {\n ...base,\n id: `${base.id}-dup-${Date.now()}`,\n emailMeta: base.emailMeta ? { ...base.emailMeta, to: undefined } : undefined,\n }\n setExtraActions((prev) => [...prev, clone])\n },\n [suggestedActions],\n )\n\n return (\n <SignalApproval.Root\n key={item.id}\n companyName={item.company}\n labels={signalLabels}\n hideApproveButton={hideApproveButton}\n approveButtonIconUrl={approveButtonIconUrl}\n opportunityPreview={opportunityPreview}\n onRequestApproval={onRequestApproval}\n initialApprovalState={getSignalApprovalState?.(item)}\n onApprove={() => onSignalApprove?.(item)}\n onApproveFeedback={(reasons, detail) => {\n signalData.onApproveFeedback?.(reasons, detail)\n console.log(\"Approval feedback:\", { taskId: item.id, company: item.company, reasons, detail })\n }}\n onDismiss={(reasons, detail, subReason) => {\n signalData.onDismissFeedback?.(reasons, detail, subReason)\n }}\n >\n <div className=\"mx-auto w-full max-w-3xl p-6 pb-12 md:p-8\">\n <div className=\"pb-8\">\n {/* Header */}\n <div className=\"mb-4 flex items-center gap-2\">\n <button\n type=\"button\"\n className=\"flex items-center gap-1.5 text-xs font-medium text-muted-foreground transition-colors hover:text-foreground\"\n >\n <ArrowLeft className=\"h-3.5 w-3.5\" />\n Back\n </button>\n <span className=\"text-muted-foreground/40\">&middot;</span>\n <span className=\"text-xs text-muted-foreground\">{item.company}</span>\n </div>\n\n <h1 className=\"mb-3 text-2xl font-bold tracking-tight text-foreground\">{item.title}</h1>\n\n <div className=\"mb-6 flex flex-wrap items-center gap-2\">\n {(item.statusColor === \"red\" || item.statusColor === \"orange\") && (\n <div className={`inline-flex items-center gap-1 rounded-md px-2.5 py-1 text-xs font-semibold ${\n item.statusColor === \"red\"\n ? \"bg-red-50 text-red-700\"\n : \"bg-orange-50 text-orange-700\"\n }`}>\n <span className=\"text-[10px] font-bold\">!</span> {item.tag1.charAt(0).toUpperCase() + item.tag1.slice(1)}\n </div>\n )}\n <div className=\"inline-flex items-center gap-1 rounded-md bg-muted px-2.5 py-1 text-xs font-medium text-muted-foreground\">\n {item.tag1}\n </div>\n {signalData.timeChipLabel && (\n <Badge variant=\"outline\" title={signalData.timeChipDetail ?? undefined}>\n {signalData.timeChipLabel}\n </Badge>\n )}\n <button\n type=\"button\"\n onClick={onOpenEntityPanel}\n className=\"ml-1 inline-flex items-center gap-1.5 rounded-md border border-border/60 bg-muted/30 px-2 py-1 transition-colors hover:bg-muted/50\"\n >\n <div className=\"flex h-4 w-4 items-center justify-center rounded bg-muted-foreground/10 text-[9px] font-semibold text-muted-foreground\">\n {item.company.substring(0, 1)}\n </div>\n <span className=\"text-xs font-medium text-foreground\">{item.company}</span>\n <ChevronRight className=\"h-3 w-3 text-muted-foreground/50\" />\n </button>\n {renderMetadataExtra?.(item)}\n </div>\n\n {/* Signal Brief */}\n {sections.signalBrief && (() => {\n const pct = signalData.score\n const scoreColor = pct >= 70 ? \"text-emerald-600\" : pct >= 40 ? \"text-amber-600\" : \"text-red-600\"\n const barColor = pct >= 70 ? \"bg-emerald-500\" : pct >= 40 ? \"bg-amber-500\" : \"bg-red-500\"\n const scoreLabel = pct >= 70 ? \"HIGH\" : pct >= 40 ? \"MEDIUM\" : \"LOW\"\n\n const evidenceWithCitations: React.ReactNode[] =\n sourceItems.length >= 4\n ? [\n <>\n There are <span className=\"font-medium text-foreground\">3 unusual signals</span> including a large balance\n outflow and reduced login frequency\n <Citation number={1} source={sourceItems[0]} />\n <Citation number={2} source={sourceItems[1]} />\n <Citation number={3} source={sourceItems[2]} />\n </>,\n <>\n Scott mentioned in <span className=\"font-medium text-foreground\">#treasury-questions</span> that they are actively\n looking for treasury management options\n <Citation number={4} source={sourceItems[2]} />\n </>,\n <>\n You have a recent email thread regarding optimization options that hasn&apos;t been replied to\n <Citation number={5} source={sourceItems[3]} />\n </>,\n ]\n : signalData.evidence.map((ev, i) => (\n <span key={i}>{ev}</span>\n ))\n\n const briefHeading = signalBriefCopy?.heading ?? \"Signal brief\"\n const introOpt = signalBriefCopy?.intro\n const briefIntro =\n introOpt === null\n ? null\n : typeof introOpt === \"function\"\n ? introOpt(item)\n : introOpt ?? `Signals indicate a potential opportunity for ${item.company}.`\n return (\n <div className=\"mb-8\">\n {briefHeading ? (\n <h3 className=\"text-xs font-bold text-muted-foreground uppercase tracking-wider mb-3\">{briefHeading}</h3>\n ) : null}\n {briefIntro ? (\n <p className=\"text-sm text-muted-foreground leading-relaxed mb-2\">\n {briefIntro}\n </p>\n ) : null}\n {signalData.signalBrief ? (\n <div className=\"flex items-start gap-2 text-sm text-foreground/90 leading-relaxed mb-4\">\n <Sparkles className=\"h-4 w-4 mt-0.5 shrink-0 text-primary\" />\n <span>{signalData.signalBrief}</span>\n </div>\n ) : (\n <p className=\"text-sm text-foreground/90 leading-relaxed mb-4\">\n {signalData.whyNow}\n </p>\n )}\n\n <ScoreFeedback.Root\n onSubmitFeedback={(type, pills, detail) => (signalData.onScoreFeedback ?? onScoreFeedback)?.(type, pills, detail)}\n initialFeedback={signalData.initialScoreFeedback}\n >\n <div className=\"mb-5 rounded-md border border-border bg-muted/20 p-3\">\n <div className=\"flex items-center justify-between mb-1.5\">\n <span className=\"text-[10px] font-bold text-muted-foreground uppercase tracking-wider\">Signal Score</span>\n <div className=\"flex items-center gap-2\">\n <span className=\"text-sm font-bold text-foreground\">{signalData.score}/100</span>\n <span className={`text-[10px] font-bold uppercase ${scoreColor}`}>{scoreLabel}</span>\n <ScoreFeedback.Trigger />\n </div>\n </div>\n <ScoreFeedback.Panel />\n <div className=\"h-1.5 bg-muted rounded-full overflow-hidden mb-2\">\n <div\n className={`h-full rounded-full transition-all duration-500 ${barColor}`}\n style={{ width: `${signalData.score}%` }}\n />\n </div>\n <button\n type=\"button\"\n onClick={() => setEvidenceExpanded((prev) => !prev)}\n className=\"flex items-center gap-1 text-[11px] font-medium text-muted-foreground hover:text-foreground transition-colors\"\n >\n <ChevronDown className={`h-3 w-3 transition-transform duration-200 ${evidenceExpanded ? \"rotate-180\" : \"\"}`} />\n View more\n </button>\n\n {evidenceExpanded && (\n <div className=\"mt-3 space-y-3\">\n <ul className=\"space-y-2\">\n {evidenceWithCitations.map((ev, index) => (\n <li key={index} className=\"flex items-start gap-2 text-sm\">\n <div className=\"w-1.5 h-1.5 bg-primary rounded-full mt-2 flex-shrink-0\" />\n <span className=\"text-muted-foreground leading-relaxed\">{ev}</span>\n </li>\n ))}\n </ul>\n <ScoreBreakdown\n factors={signalData.factors}\n onFactorFeedback={signalData.onFactorFeedback ?? ((key, type, detail) =>\n console.log(\"Signal factor feedback:\", { company: item.company, factor: key, type, detail })\n )}\n initialFeedback={signalData.initialFactorFeedback}\n />\n <SignalApproval.Actions />\n </div>\n )}\n </div>\n </ScoreFeedback.Root>\n\n {!evidenceExpanded && <SignalApproval.Actions />}\n </div>\n )\n })()}\n\n {/* After-score content slot (e.g. OpportunityPanel) */}\n {renderAfterScore?.(item)}\n\n {/* Activity Timeline */}\n {sections.timeline && timelineEvents.length > 0 && (\n <div className=\"mb-8\">\n <button\n type=\"button\"\n onClick={() => setShowTimeline((prev) => !prev)}\n className=\"group/timeline flex w-full items-center justify-between gap-2 py-2 rounded-md transition-colors hover:bg-muted/40 -mx-2 px-2 cursor-pointer\"\n >\n <div className=\"flex items-center gap-2\">\n <h3 className=\"text-xs font-bold text-muted-foreground uppercase tracking-wider group-hover/timeline:text-foreground transition-colors\">Activity timeline</h3>\n {!showTimeline && (lastActivityTime || (timelineEvents.length > 0 && timelineEvents[0].time)) && (\n <span className=\"text-[11px] text-muted-foreground/60\">\n &middot; Last activity {lastActivityTime ?? timelineEvents[0]?.time ?? ''}\n </span>\n )}\n </div>\n <div className=\"flex items-center gap-1.5\">\n <span className=\"text-[11px] font-medium text-muted-foreground\">{timelineEvents.length} events</span>\n <ChevronDown className={`h-3.5 w-3.5 text-muted-foreground transition-transform duration-200 ${showTimeline ? \"rotate-180\" : \"\"}`} />\n </div>\n </button>\n {showTimeline && (\n <div className=\"mt-3\">\n <TimelineActivity events={timelineEvents} />\n </div>\n )}\n </div>\n )}\n </div>\n\n {/* Suggested Actions */}\n {sections.suggestedActions && (\n <SignalApproval.Gate>\n <SuggestedActions\n actions={suggestedActions}\n accountContacts={accountContacts}\n signature={emailSignature}\n iconMap={iconMap}\n onDismiss={(id) => console.log(\"Dismiss action:\", id)}\n onSend={(id) => console.log(\"Send action:\", id)}\n onSaveDraft={(id) => console.log(\"Save draft:\", id)}\n onDuplicate={handleDuplicate}\n onOpenAccountDetails={onOpenEntityPanel}\n onOpenRecentActivity={onOpenRecentActivity}\n onMarkComplete={(id) => console.log(\"Mark complete:\", id)}\n onDispatchAgent={(id) => console.log(\"Dispatch agent:\", id)}\n />\n </SignalApproval.Gate>\n )}\n {renderDetailExtra?.(item)}\n </div>\n </SignalApproval.Root>\n )\n}\n\n// ---------------------------------------------------------------------------\n// Main Component\n// ---------------------------------------------------------------------------\n\nexport function PrototypeInboxView({\n items,\n filterCategories,\n detailSections,\n accountContacts = [],\n buildAccountContacts,\n emailSignature = \"\",\n buildSuggestedActions: buildSuggestedActionsProp,\n buildSourceItems: buildSourceItemsProp,\n getSignalScore: getSignalScoreProp,\n getTimelineEvents,\n iconMap = {},\n hideToolbarActions,\n hideHoverActions,\n onSuggestedActionFeedback,\n onScoreFeedback,\n headerActions,\n onOpenEntityPanel,\n onOpenRecentActivity,\n onItemSelect,\n defaultViewMode,\n buildEntityChips,\n quickFilterTabs,\n hideAccountsButton,\n accountDetailsLabel,\n onSignalApprove,\n getSignalApprovalState,\n signalLabels,\n hideApproveButton,\n signalBriefCopy,\n renderDetailExtra,\n renderAfterScore,\n lastActivityTime,\n sortOptions,\n activeSortId,\n onSortChange,\n}: PrototypeInboxViewProps) {\n const [inboxViewMode, setInboxViewMode] = React.useState<\"inbox\" | \"list\" | \"detail\">(\n defaultViewMode === \"list\" ? \"list\" : defaultViewMode === \"split\" ? \"inbox\" : \"inbox\"\n )\n const [previousViewMode, setPreviousViewMode] = React.useState<\"inbox\" | \"list\">(\"inbox\")\n const [selectedTask, setSelectedTask] = React.useState(items[0])\n const [inboxAssignee, setInboxAssignee] = React.useState<AssigneeFilter>(\"me\")\n const [inboxFilters, setInboxFilters] = React.useState<Record<string, string>>({})\n const [activeQuickFilter, setActiveQuickFilter] = React.useState<string>(\"all\")\n const [splitViewSearch, setSplitViewSearch] = React.useState(\"\")\n\n const sections = React.useMemo(\n () => ({ ...DEFAULT_DETAIL_SECTIONS, ...detailSections }),\n [detailSections],\n )\n\n const resolvedFilterCategories: InboxFilterCategory[] = React.useMemo(\n () =>\n filterCategories ?? [\n {\n id: \"category\",\n label: \"Category\",\n icon: <Tag className=\"h-3.5 w-3.5 text-muted-foreground\" />,\n options: [...new Set(items.map((i) => i.tag1))],\n },\n {\n id: \"account\",\n label: \"Account\",\n icon: <Building className=\"h-3.5 w-3.5 text-muted-foreground\" />,\n options: [...new Set(items.map((i) => i.company))],\n },\n ],\n [filterCategories, items],\n )\n\n const buildSuggestedActions = React.useMemo(\n () => buildSuggestedActionsProp ?? (() => []),\n [buildSuggestedActionsProp],\n )\n\n const buildSourceItems = React.useMemo(\n () => buildSourceItemsProp ?? (() => []),\n [buildSourceItemsProp],\n )\n\n const getSignalScore = React.useMemo(\n () => getSignalScoreProp ?? (() => DEFAULT_SIGNAL_SCORE),\n [getSignalScoreProp],\n )\n\n // Build a map from filter category id → QueueItem field for targeted filtering.\n // Known category ids are mapped explicitly; unknown categories fall back to a\n // broad search across display fields so consumer-defined filters still work.\n const filterFieldMap = React.useMemo<\n Record<string, (item: QueueItem, value: string) => boolean>\n >(() => {\n const map: Record<string, (item: QueueItem, value: string) => boolean> = {}\n for (const cat of resolvedFilterCategories) {\n switch (cat.id) {\n case \"category\":\n case \"signalType\":\n map[cat.id] = (item, v) => item.tag1.toLowerCase() === v.toLowerCase()\n break\n case \"account\":\n map[cat.id] = (item, v) => item.company.toLowerCase() === v.toLowerCase()\n break\n default:\n // Fallback: check all display fields\n map[cat.id] = (item, v) => {\n const lv = v.toLowerCase()\n return (\n item.tag1.toLowerCase() === lv ||\n item.company.toLowerCase() === lv ||\n item.title.toLowerCase().includes(lv) ||\n item.details.toLowerCase().includes(lv)\n )\n }\n }\n }\n return map\n }, [resolvedFilterCategories])\n\n // Filter items for list view based on toolbar filters\n const filteredItems = React.useMemo(() => {\n const activeFilters = Object.entries(inboxFilters).filter(\n ([, value]) => value && value !== \"all\"\n )\n if (activeFilters.length === 0) return items\n return items.filter((item) =>\n activeFilters.every(([key, value]) => {\n const matcher = filterFieldMap[key]\n return matcher ? matcher(item, value) : true\n })\n )\n }, [items, inboxFilters, filterFieldMap])\n\n // Resolve quick filter tabs once — used by both the split view filter and\n // the tab bar render. Each tab's `matchValue` (falling back to `label`) is\n // compared against `item.tag1` so consumer labels can differ from data values.\n type QuickFilterTab = { id: string; label: string; matchValue?: string; count?: number }\n const resolvedQuickFilterTabs = React.useMemo<QuickFilterTab[]>(() => {\n if (quickFilterTabs) return quickFilterTabs\n // Derive default tabs from the actual item tag1 values\n const uniqueTags = [...new Set(items.map((i) => i.tag1))]\n return uniqueTags.map((tag) => ({\n id: tag.toLowerCase().replace(/\\s+/g, \"-\"),\n label: tag,\n }))\n }, [quickFilterTabs, items])\n\n // Compute per-tab counts once so they can be displayed in the tab bar\n const quickFilterTabCounts = React.useMemo(() => {\n const counts: Record<string, number> = {}\n for (const tab of resolvedQuickFilterTabs) {\n const match = (tab.matchValue ?? tab.label).toLowerCase()\n counts[tab.id] = items.filter((i) => i.tag1.toLowerCase() === match).length\n }\n return counts\n }, [resolvedQuickFilterTabs, items])\n\n // Filter items for split view based on quick filter tabs and search\n const splitViewItems = React.useMemo(() => {\n let filtered = items\n // Apply quick filter tab\n if (activeQuickFilter !== \"all\") {\n const activeTab = resolvedQuickFilterTabs.find((t) => t.id === activeQuickFilter)\n if (activeTab) {\n const match = (activeTab.matchValue ?? activeTab.label).toLowerCase()\n filtered = filtered.filter(\n (item) => item.tag1.toLowerCase() === match\n )\n }\n }\n // Apply search input\n if (splitViewSearch.trim()) {\n const q = splitViewSearch.trim().toLowerCase()\n filtered = filtered.filter(\n (item) =>\n item.tag1.toLowerCase().includes(q) ||\n item.company.toLowerCase().includes(q) ||\n item.title.toLowerCase().includes(q)\n )\n }\n return filtered\n }, [items, activeQuickFilter, resolvedQuickFilterTabs, splitViewSearch])\n\n // Grouped items for list view — one group per severity tier so items\n // are labelled correctly (e.g. \"Urgent\", \"High\", \"Active\").\n const inboxGroups = React.useMemo<GroupedListGroup<QueueItem>[]>(() => {\n const urgent = filteredItems.filter((i) => i.statusColor === \"red\")\n const high = filteredItems.filter((i) => i.statusColor === \"orange\")\n const active = filteredItems.filter((i) => i.statusColor !== \"red\" && i.statusColor !== \"orange\")\n return [\n { key: \"urgent\", label: \"Urgent\", items: urgent },\n { key: \"high\", label: \"High\", items: high },\n { key: \"active\", label: \"Active\", items: active },\n ].filter((g) => g.items.length > 0)\n }, [filteredItems])\n\n const renderInboxRow = React.useCallback(\n (item: QueueItem) => (\n <>\n <span className={`h-2 w-2 shrink-0 rounded-full ${dotColorClass(item.statusColor)}`} />\n <span className=\"w-[80px] shrink-0 font-mono text-xs text-muted-foreground/80\">{item.id}</span>\n <span className=\"shrink-0 rounded-md border border-border bg-muted px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground whitespace-nowrap\">{item.tag1}</span>\n <span className=\"min-w-0 flex-1 truncate text-sm font-semibold text-foreground\">{item.title}</span>\n <span className=\"w-[120px] shrink-0 truncate text-xs font-medium text-foreground\">{item.company}</span>\n <span className=\"w-[80px] shrink-0 text-right text-xs text-muted-foreground\">{item.time}</span>\n </>\n ),\n [],\n )\n\n const handleInboxItemSelect = React.useCallback(\n (item: QueueItem) => {\n setSelectedTask(item)\n if (onItemSelect) {\n onItemSelect(item)\n } else if (inboxViewMode === \"list\") {\n setPreviousViewMode(\"list\")\n setInboxViewMode(\"detail\")\n }\n },\n [inboxViewMode, onItemSelect],\n )\n\n const handleBackFromDetail = React.useCallback(() => {\n setInboxViewMode(previousViewMode)\n }, [previousViewMode])\n\n const handleViewModeChange = React.useCallback((id: string) => {\n const mode = id as \"inbox\" | \"list\" | \"detail\"\n if (mode !== \"detail\") {\n setPreviousViewMode(mode)\n }\n setInboxViewMode(mode)\n }, [])\n\n React.useEffect(() => {\n const mql = window.matchMedia(\"(max-width: 768px)\")\n function handleChange(e: MediaQueryListEvent | MediaQueryList) {\n if (e.matches && inboxViewMode === \"inbox\") {\n setPreviousViewMode(\"inbox\")\n setInboxViewMode(\"detail\")\n }\n }\n handleChange(mql)\n mql.addEventListener(\"change\", handleChange)\n return () => mql.removeEventListener(\"change\", handleChange)\n }, [inboxViewMode])\n\n const detailViewProps: DetailViewProps = {\n item: selectedTask,\n sections,\n getSignalScore,\n buildSuggestedActions,\n buildSourceItems,\n getTimelineEvents,\n accountContacts: buildAccountContacts?.(selectedTask) ?? accountContacts,\n emailSignature,\n iconMap,\n onOpenEntityPanel,\n onOpenRecentActivity,\n onSuggestedActionFeedback,\n onSignalApprove,\n getSignalApprovalState,\n signalLabels,\n hideApproveButton,\n signalBriefCopy,\n renderDetailExtra,\n renderAfterScore,\n lastActivityTime,\n onScoreFeedback,\n }\n\n return (\n <div className=\"flex h-full w-full flex-col\">\n {/* Toolbar */}\n <div className=\"flex items-center justify-between border-b border-border bg-background px-4 py-3 shrink-0\">\n <div className=\"flex items-center gap-3\">\n {inboxViewMode === \"detail\" ? (\n <button\n type=\"button\"\n onClick={handleBackFromDetail}\n className=\"flex items-center gap-2 text-sm font-medium text-muted-foreground hover:text-foreground transition-colors\"\n >\n <ArrowLeft className=\"h-4 w-4\" />\n Back\n </button>\n ) : null}\n <h2 className=\"text-lg font-semibold text-foreground\">Inbox</h2>\n <Badge variant=\"secondary\" className=\"bg-muted text-muted-foreground hover:bg-muted font-medium text-[11px] px-2 py-0.5 rounded-md\">\n {items.length}\n </Badge>\n </div>\n <div className=\"flex items-center gap-3\">\n <ViewModeToggle\n modes={[\n { id: \"inbox\", icon: <Columns2 className=\"h-3.5 w-3.5\" />, label: \"Split View\" },\n { id: \"list\", icon: <LayoutList className=\"h-3.5 w-3.5\" />, label: \"List View\" },\n { id: \"detail\", icon: <Square className=\"h-3.5 w-3.5\" />, label: \"Detail View\" },\n ]}\n activeMode={inboxViewMode}\n onModeChange={handleViewModeChange}\n />\n {headerActions}\n </div>\n </div>\n\n {/* View modes */}\n {inboxViewMode === \"detail\" ? (\n <div className=\"flex h-full flex-1 flex-col overflow-hidden bg-background\">\n <div className=\"flex-1 overflow-y-auto\">\n <DetailView {...detailViewProps} />\n </div>\n </div>\n ) : inboxViewMode === \"list\" ? (\n <div className=\"flex-1 overflow-y-auto bg-background\">\n <InboxToolbar\n assignee={inboxAssignee}\n onAssigneeChange={setInboxAssignee}\n filterCategories={resolvedFilterCategories}\n selectedFilters={inboxFilters}\n onFilterChange={(catId, val) =>\n setInboxFilters((prev) => ({ ...prev, [catId]: val }))\n }\n onClearFilters={() => setInboxFilters({})}\n />\n <GroupedListView<QueueItem>\n groups={inboxGroups}\n renderRow={renderInboxRow}\n getItemKey={(item) => item.id}\n selectedKey={selectedTask.id}\n onItemClick={handleInboxItemSelect}\n emptyMessage=\"No inbox items\"\n />\n </div>\n ) : (\n /* Split view */\n <div className=\"flex h-full min-h-0 w-full flex-1\">\n <div className=\"flex h-full min-w-[380px] w-[380px] flex-col border-r border-border bg-background shadow-sm z-10\">\n <div className=\"flex flex-col gap-4 border-b border-border p-4 shrink-0\">\n {!hideToolbarActions && (\n <div className=\"flex items-center justify-between\">\n <div className=\"flex items-center gap-1\">\n <Button variant=\"outline\" size=\"icon\" className=\"h-8 w-8 text-muted-foreground\"><Eye className=\"w-4 h-4\" /></Button>\n <Button variant=\"outline\" size=\"icon\" className=\"h-8 w-8 text-muted-foreground\"><FileText className=\"w-4 h-4\" /></Button>\n <Button variant=\"outline\" size=\"icon\" className=\"h-8 w-8 text-muted-foreground\"><Clock className=\"w-4 h-4\" /></Button>\n <Button variant=\"outline\" size=\"icon\" className=\"h-8 w-8 text-muted-foreground\"><CheckSquare className=\"w-4 h-4\" /></Button>\n </div>\n <Button size=\"sm\" className=\"h-8 px-4 bg-foreground text-background hover:bg-foreground/90 text-xs font-semibold gap-1.5 rounded-md\">\n <Plus className=\"w-4 h-4\" /> Add Task\n </Button>\n </div>\n )}\n <div className=\"flex items-center gap-2\">\n <div className=\"relative flex-1\">\n <Filter className=\"absolute left-2.5 top-1.5 w-4 h-4 text-muted-foreground\" />\n <Input\n className=\"h-8 pl-8 text-xs bg-background border-border rounded-md shadow-none\"\n placeholder=\"Filter by category...\"\n value={splitViewSearch}\n onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSplitViewSearch(e.target.value)}\n />\n </div>\n {sortOptions && sortOptions.length > 0 && (\n <DropdownMenu>\n <DropdownMenuTrigger asChild>\n <Button variant=\"outline\" size=\"sm\" className=\"h-8 text-xs font-medium rounded-md shadow-none gap-1.5\">\n <ArrowUpDown className=\"w-3.5 h-3.5\" />\n {sortOptions.find(o => o.id === activeSortId)?.label ?? 'Sort'}\n <ChevronDown className=\"w-3 h-3\" />\n </Button>\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"end\">\n <DropdownMenuRadioGroup value={activeSortId ?? ''} onValueChange={(val) => onSortChange?.(val)}>\n {sortOptions.map(option => (\n <DropdownMenuRadioItem key={option.id} value={option.id}>\n {option.label}\n </DropdownMenuRadioItem>\n ))}\n </DropdownMenuRadioGroup>\n </DropdownMenuContent>\n </DropdownMenu>\n )}\n {!hideAccountsButton && (\n <Button variant=\"outline\" size=\"sm\" className=\"h-8 text-xs font-medium rounded-md shadow-none\">\n <Building className=\"w-3.5 h-3.5 mr-1.5\" /> {accountDetailsLabel ?? \"Accounts\"}\n </Button>\n )}\n </div>\n <div className=\"flex items-center gap-1.5 overflow-x-auto pb-1 mt-1 scrollbar-hide\">\n <Button\n size=\"sm\"\n variant={activeQuickFilter === \"all\" ? \"default\" : \"outline\"}\n className={`h-7 rounded-full px-3.5 text-[11px] font-semibold shadow-none ${\n activeQuickFilter === \"all\"\n ? \"bg-foreground text-background hover:bg-foreground/90\"\n : \"bg-transparent border-border text-muted-foreground hover:text-foreground\"\n }`}\n onClick={() => setActiveQuickFilter(\"all\")}\n >\n All\n </Button>\n {resolvedQuickFilterTabs.map((tab) => {\n const count = tab.count ?? quickFilterTabCounts[tab.id]\n return (\n <Button\n key={tab.id}\n size=\"sm\"\n variant={activeQuickFilter === tab.id ? \"default\" : \"outline\"}\n className={`h-7 rounded-full px-3.5 text-[11px] font-medium shadow-none ${\n activeQuickFilter === tab.id\n ? \"bg-foreground text-background hover:bg-foreground/90\"\n : \"bg-transparent border-border text-muted-foreground hover:text-foreground\"\n }`}\n onClick={() => setActiveQuickFilter(tab.id)}\n >\n {tab.label}{count != null && count > 0 ? ` (${count})` : \"\"}\n </Button>\n )\n })}\n </div>\n </div>\n\n <div className=\"flex-1 overflow-y-auto\">\n {splitViewItems.map((item) => (\n <div\n key={item.id}\n onClick={() => { setSelectedTask(item); onItemSelect?.(item) }}\n className={`cursor-pointer border-b border-border p-4 transition-colors group relative border-l-2 ${\n selectedTask.id === item.id\n ? \"bg-muted/30 border-l-brand-purple\"\n : \"bg-transparent border-l-transparent hover:bg-muted/10\"\n }`}\n >\n <div className=\"mb-1.5 flex items-center gap-2\">\n <span className=\"min-w-0 truncate text-[13px] font-semibold text-foreground leading-tight\">{item.title}</span>\n {selectedTask.id !== item.id && item.tag1 && (\n <span className=\"shrink-0 rounded-md border border-border bg-muted/60 px-2 py-0.5 text-[10px] font-medium text-muted-foreground\">\n {item.tag1}\n </span>\n )}\n <span className=\"ml-auto shrink-0 text-[10px] font-medium text-muted-foreground/80\">{item.time}</span>\n </div>\n <div className=\"flex items-start gap-2 mt-2\">\n <span className={`w-1.5 h-1.5 rounded-full shrink-0 mt-1.5 ${dotColorClass(item.statusColor)}`} />\n <span className=\"text-xs text-muted-foreground leading-tight\">{item.details}</span>\n </div>\n {buildEntityChips && (() => {\n const chips = buildEntityChips(item)\n if (!chips.length) return null\n return (\n <div className=\"flex items-center gap-1.5 mt-2 flex-wrap\">\n {chips.map((chip) => (\n <button\n key={chip.id}\n type=\"button\"\n onClick={(e) => { e.stopPropagation(); chip.onClick?.() }}\n className=\"inline-flex items-center gap-1 rounded-md border border-border/60 bg-muted/30 px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground transition-colors hover:bg-muted/50 hover:text-foreground\"\n >\n <span className=\"flex h-3.5 w-3.5 items-center justify-center rounded bg-muted-foreground/10 text-[8px] font-semibold\">{chip.avatarLetter}</span>\n {chip.label}\n </button>\n ))}\n </div>\n )\n })()}\n {!hideHoverActions && (\n <div className={`absolute right-4 bottom-4 flex items-center gap-1.5 bg-background shadow-sm rounded-md px-1 py-0.5 border border-border ${\n selectedTask.id === item.id ? \"opacity-100\" : \"opacity-0 group-hover:opacity-100 transition-opacity\"\n }`}>\n <Button variant=\"ghost\" size=\"icon\" className=\"h-6 w-6 rounded text-muted-foreground hover:text-foreground\"><CheckSquare className=\"w-3.5 h-3.5\" /></Button>\n <Button variant=\"ghost\" size=\"icon\" className=\"h-6 w-6 rounded text-muted-foreground hover:text-foreground\"><Clock className=\"w-3.5 h-3.5\" /></Button>\n </div>\n )}\n </div>\n ))}\n <div className=\"p-4\">\n <Button variant=\"outline\" size=\"sm\" className=\"h-8 text-xs font-semibold rounded-md shadow-none\">See more</Button>\n </div>\n </div>\n </div>\n\n <div className=\"flex h-full flex-1 flex-col overflow-hidden bg-background\">\n <div className=\"flex-1 overflow-y-auto\">\n <DetailView {...detailViewProps} />\n </div>\n </div>\n </div>\n )}\n </div>\n )\n}\n"],"mappings":"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","names":["_a","_b"]}
1
+ {"version":3,"sources":["../../src/prototype/prototype-inbox-view.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport {\n ArrowLeft,\n ArrowUpDown,\n ChevronDown,\n ChevronRight,\n Filter,\n FileText,\n Clock,\n CheckSquare,\n Eye,\n Plus,\n\n Building,\n LayoutList,\n Columns2,\n Square,\n Tag,\n Sparkles,\n} from \"lucide-react\"\n\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuRadioGroup,\n DropdownMenuRadioItem,\n DropdownMenuTrigger,\n} from \"../components/dropdown-menu\"\nimport { Button } from \"../components/button\"\nimport { Badge } from \"../components/badge\"\nimport { Input } from \"../components/input\"\nimport { ViewModeToggle } from \"../components/view-mode-toggle\"\nimport {\n InboxToolbar,\n type AssigneeFilter,\n type InboxFilterCategory,\n} from \"../components/inbox-toolbar\"\nimport { GroupedListView, type GroupedListGroup } from \"../components/item-list\"\nimport { SignalApproval, type ApprovalState, type OpportunityPreview } from \"../components/signal-feedback-inline\"\nimport { ScoreFeedback } from \"../components/score-feedback\"\nimport { ScoreBreakdown } from \"../components/score-breakdown\"\nimport { Citation, type SourceDef } from \"../components/detail-view\"\nimport {\n SuggestedActions,\n type SuggestedAction,\n type SuggestedContact,\n} from \"../components/suggested-actions\"\nimport { TimelineActivity, type TimelineEvent } from \"../components/timeline-activity\"\nimport type {\n QueueItem,\n InboxViewConfig,\n InboxDetailSections,\n SignalScoreData,\n} from \"./prototype-config\"\n\n// ---------------------------------------------------------------------------\n// Dot color utility — maps statusColor to a Tailwind background class.\n// Centralised here so the list row and split-view card stay in sync and\n// future color additions are a single-edit change.\n// ---------------------------------------------------------------------------\n\nfunction dotColorClass(statusColor: string): string {\n if (statusColor === \"red\") return \"bg-[#f43f5e]\"\n if (statusColor === \"yellow\" || statusColor === \"amber\" || statusColor === \"orange\") return \"bg-[#eab308]\"\n if (statusColor === \"green\") return \"bg-[#22c55e]\"\n return \"bg-[#9ca3af]\"\n}\n\n// ---------------------------------------------------------------------------\n// Props\n// ---------------------------------------------------------------------------\n\nexport interface PrototypeInboxViewProps extends InboxViewConfig {\n /** Extra ReactNode rendered at the end of the header bar (e.g. exit button). */\n headerActions?: React.ReactNode\n onOpenEntityPanel?: () => void\n onOpenRecentActivity?: () => void\n onNavigateToInbox?: () => void\n onItemSelect?: (item: QueueItem) => void\n defaultViewMode?: \"list\" | \"split\"\n}\n\n// ---------------------------------------------------------------------------\n// Default detail sections\n// ---------------------------------------------------------------------------\n\nconst DEFAULT_DETAIL_SECTIONS: InboxDetailSections = {\n signalBrief: true,\n suggestedActions: true,\n timeline: true,\n}\n\nconst DEFAULT_SIGNAL_SCORE: SignalScoreData = {\n score: 65,\n factors: [\n { key: \"trigger\", label: \"Trigger strength\", score: 70, why: \"Moderate signal detected based on account activity\" },\n { key: \"fit\", label: \"Company fit\", score: 65, why: \"Reasonable fit based on company profile\" },\n { key: \"timing\", label: \"Timing\", score: 58, why: \"Within general evaluation window\" },\n ],\n whyNow: \"Moderate signals detected that warrant review and potential outreach.\",\n evidence: [\n \"Activity patterns suggest potential opportunity\",\n \"Company profile aligns with target segment\",\n ],\n confidence: 72,\n}\n\n// ---------------------------------------------------------------------------\n// Detail View\n// ---------------------------------------------------------------------------\n\nexport interface DetailViewProps {\n item: QueueItem\n sections: InboxDetailSections\n getSignalScore: (company: string, item?: QueueItem) => SignalScoreData\n buildSuggestedActions: (item: QueueItem) => SuggestedAction[]\n buildSourceItems: (item: QueueItem) => SourceDef[]\n getTimelineEvents?: (item: QueueItem) => TimelineEvent[]\n accountContacts: SuggestedContact[]\n emailSignature: string | React.ReactNode\n iconMap: Record<string, string>\n onOpenEntityPanel?: () => void\n onOpenRecentActivity?: () => void\n onSuggestedActionFeedback?: (actionId: number | string, feedback: string, actionTitle?: string) => void\n onSignalApprove?: (item: QueueItem) => void | Promise<boolean>\n getSignalApprovalState?: (item: QueueItem) => ApprovalState | undefined\n signalLabels?: InboxViewConfig[\"signalLabels\"]\n hideApproveButton?: boolean\n signalBriefCopy?: InboxViewConfig[\"signalBriefCopy\"]\n renderDetailExtra?: (item: QueueItem) => React.ReactNode\n /** Render content between the signal brief text and the signal score bar (e.g. \"Signals on Case\" chips). */\n renderBeforeScore?: (item: QueueItem) => React.ReactNode\n /** Render content between the signal score section and the activity timeline. */\n renderAfterScore?: (item: QueueItem) => React.ReactNode\n lastActivityTime?: string\n /** Render extra metadata chips (e.g. assignee) inside the chips row below the title. */\n renderMetadataExtra?: (item: QueueItem) => React.ReactNode\n onScoreFeedback?: (type: \"up\" | \"down\", pills: string[], detail: string) => void\n approveButtonIconUrl?: string\n opportunityPreview?: OpportunityPreview\n onRequestApproval?: () => Promise<void>\n}\n\nexport function DetailView({\n item,\n sections,\n getSignalScore,\n buildSuggestedActions,\n buildSourceItems,\n getTimelineEvents,\n accountContacts,\n emailSignature,\n iconMap,\n onOpenEntityPanel,\n onOpenRecentActivity,\n onSuggestedActionFeedback: _onSuggestedActionFeedback,\n onSignalApprove,\n getSignalApprovalState,\n signalLabels,\n hideApproveButton,\n signalBriefCopy,\n renderDetailExtra,\n renderBeforeScore,\n renderAfterScore,\n lastActivityTime,\n renderMetadataExtra,\n onScoreFeedback,\n approveButtonIconUrl,\n opportunityPreview,\n onRequestApproval,\n}: DetailViewProps) {\n const [evidenceExpanded, setEvidenceExpanded] = React.useState(false)\n const [showTimeline, setShowTimeline] = React.useState(false)\n const [extraActions, setExtraActions] = React.useState<SuggestedAction[]>([])\n\n React.useEffect(() => {\n setShowTimeline(false)\n setEvidenceExpanded(false)\n setExtraActions([])\n }, [item.id])\n\n const signalData = React.useMemo(\n () => getSignalScore(item.company, item),\n [getSignalScore, item.company, item],\n )\n\n const suggestedActions = React.useMemo(\n () => [...buildSuggestedActions(item), ...extraActions],\n [buildSuggestedActions, item, extraActions],\n )\n const sourceItems = React.useMemo(() => buildSourceItems(item), [buildSourceItems, item])\n const timelineEvents = React.useMemo(\n () => getTimelineEvents?.(item) ?? [],\n [getTimelineEvents, item],\n )\n\n const handleDuplicate = React.useCallback(\n (id: number | string) => {\n const base = suggestedActions.find((a) => a.id === id)\n if (!base || base.type !== \"email\") return\n const clone: SuggestedAction = {\n ...base,\n id: `${base.id}-dup-${Date.now()}`,\n emailMeta: base.emailMeta ? { ...base.emailMeta, to: undefined } : undefined,\n }\n setExtraActions((prev) => [...prev, clone])\n },\n [suggestedActions],\n )\n\n return (\n <SignalApproval.Root\n key={item.id}\n companyName={item.company}\n labels={signalLabels}\n hideApproveButton={hideApproveButton}\n approveButtonIconUrl={approveButtonIconUrl}\n opportunityPreview={opportunityPreview}\n onRequestApproval={onRequestApproval}\n initialApprovalState={getSignalApprovalState?.(item)}\n onApprove={() => onSignalApprove?.(item)}\n onApproveFeedback={(reasons, detail) => {\n signalData.onApproveFeedback?.(reasons, detail)\n console.log(\"Approval feedback:\", { taskId: item.id, company: item.company, reasons, detail })\n }}\n onDismiss={(reasons, detail, subReason) => {\n signalData.onDismissFeedback?.(reasons, detail, subReason)\n }}\n >\n <div className=\"mx-auto w-full max-w-3xl p-6 pb-12 md:p-8\">\n <div className=\"pb-8\">\n {/* Header */}\n <div className=\"mb-4 flex items-center gap-2\">\n <button\n type=\"button\"\n className=\"flex items-center gap-1.5 text-xs font-medium text-muted-foreground transition-colors hover:text-foreground\"\n >\n <ArrowLeft className=\"h-3.5 w-3.5\" />\n Back\n </button>\n <span className=\"text-muted-foreground/40\">&middot;</span>\n <span className=\"text-xs text-muted-foreground\">{item.company}</span>\n </div>\n\n <h1 className=\"mb-3 text-2xl font-bold tracking-tight text-foreground\">{item.title}</h1>\n\n <div className=\"mb-6 flex flex-wrap items-center gap-2\">\n {(item.statusColor === \"red\" || item.statusColor === \"orange\") && (\n <div className={`inline-flex items-center gap-1 rounded-md px-2.5 py-1 text-xs font-semibold ${\n item.statusColor === \"red\"\n ? \"bg-red-50 text-red-700\"\n : \"bg-orange-50 text-orange-700\"\n }`}>\n <span className=\"text-[10px] font-bold\">!</span> {item.tag1.charAt(0).toUpperCase() + item.tag1.slice(1)}\n </div>\n )}\n <div className=\"inline-flex items-center gap-1 rounded-md bg-muted px-2.5 py-1 text-xs font-medium text-muted-foreground\">\n {item.tag1}\n </div>\n {signalData.timeChipLabel && (\n <Badge variant=\"outline\" title={signalData.timeChipDetail ?? undefined}>\n {signalData.timeChipLabel}\n </Badge>\n )}\n <button\n type=\"button\"\n onClick={onOpenEntityPanel}\n className=\"ml-1 inline-flex items-center gap-1.5 rounded-md border border-border/60 bg-muted/30 px-2 py-1 transition-colors hover:bg-muted/50\"\n >\n <div className=\"flex h-4 w-4 items-center justify-center rounded bg-muted-foreground/10 text-[9px] font-semibold text-muted-foreground\">\n {item.company.substring(0, 1)}\n </div>\n <span className=\"text-xs font-medium text-foreground\">{item.company}</span>\n <ChevronRight className=\"h-3 w-3 text-muted-foreground/50\" />\n </button>\n {renderMetadataExtra?.(item)}\n </div>\n\n {/* Signal Brief */}\n {sections.signalBrief && (() => {\n const pct = signalData.score\n const scoreColor = pct >= 70 ? \"text-emerald-600\" : pct >= 40 ? \"text-amber-600\" : \"text-red-600\"\n const barColor = pct >= 70 ? \"bg-emerald-500\" : pct >= 40 ? \"bg-amber-500\" : \"bg-red-500\"\n const scoreLabel = pct >= 70 ? \"HIGH\" : pct >= 40 ? \"MEDIUM\" : \"LOW\"\n\n const evidenceWithCitations: React.ReactNode[] =\n sourceItems.length >= 4\n ? [\n <>\n There are <span className=\"font-medium text-foreground\">3 unusual signals</span> including a large balance\n outflow and reduced login frequency\n <Citation number={1} source={sourceItems[0]} />\n <Citation number={2} source={sourceItems[1]} />\n <Citation number={3} source={sourceItems[2]} />\n </>,\n <>\n Scott mentioned in <span className=\"font-medium text-foreground\">#treasury-questions</span> that they are actively\n looking for treasury management options\n <Citation number={4} source={sourceItems[2]} />\n </>,\n <>\n You have a recent email thread regarding optimization options that hasn&apos;t been replied to\n <Citation number={5} source={sourceItems[3]} />\n </>,\n ]\n : signalData.evidence.map((ev, i) => (\n <span key={i}>{ev}</span>\n ))\n\n const briefHeading = signalBriefCopy?.heading ?? \"Signal brief\"\n const introOpt = signalBriefCopy?.intro\n const briefIntro =\n introOpt === null\n ? null\n : typeof introOpt === \"function\"\n ? introOpt(item)\n : introOpt ?? `Signals indicate a potential opportunity for ${item.company}.`\n return (\n <div className=\"mb-8\">\n {briefHeading ? (\n <h3 className=\"text-xs font-bold text-muted-foreground uppercase tracking-wider mb-3\">{briefHeading}</h3>\n ) : null}\n {briefIntro ? (\n <p className=\"text-sm text-muted-foreground leading-relaxed mb-2\">\n {briefIntro}\n </p>\n ) : null}\n {signalData.signalBrief ? (\n <div className=\"flex items-start gap-2 text-sm text-foreground/90 leading-relaxed mb-4\">\n <Sparkles className=\"h-4 w-4 mt-0.5 shrink-0 text-primary\" />\n <span>{signalData.signalBrief}</span>\n </div>\n ) : (\n <p className=\"text-sm text-foreground/90 leading-relaxed mb-4\">\n {signalData.whyNow}\n </p>\n )}\n\n {/* Before-score content slot (e.g. \"Signals on Case\" chips) */}\n {renderBeforeScore?.(item)}\n\n <ScoreFeedback.Root\n onSubmitFeedback={(type, pills, detail) => (signalData.onScoreFeedback ?? onScoreFeedback)?.(type, pills, detail)}\n initialFeedback={signalData.initialScoreFeedback}\n >\n <div className=\"mb-5 rounded-md border border-border bg-muted/20 p-3\">\n <div className=\"flex items-center justify-between mb-1.5\">\n <span className=\"text-[10px] font-bold text-muted-foreground uppercase tracking-wider\">Signal Score</span>\n <div className=\"flex items-center gap-2\">\n <span className=\"text-sm font-bold text-foreground\">{signalData.score}/100</span>\n <span className={`text-[10px] font-bold uppercase ${scoreColor}`}>{scoreLabel}</span>\n <ScoreFeedback.Trigger />\n </div>\n </div>\n <ScoreFeedback.Panel />\n <div className=\"h-1.5 bg-muted rounded-full overflow-hidden mb-2\">\n <div\n className={`h-full rounded-full transition-all duration-500 ${barColor}`}\n style={{ width: `${signalData.score}%` }}\n />\n </div>\n <button\n type=\"button\"\n onClick={() => setEvidenceExpanded((prev) => !prev)}\n className=\"flex items-center gap-1 text-[11px] font-medium text-muted-foreground hover:text-foreground transition-colors\"\n >\n <ChevronDown className={`h-3 w-3 transition-transform duration-200 ${evidenceExpanded ? \"rotate-180\" : \"\"}`} />\n View more\n </button>\n\n {evidenceExpanded && (\n <div className=\"mt-3 space-y-3\">\n <ul className=\"space-y-2\">\n {evidenceWithCitations.map((ev, index) => (\n <li key={index} className=\"flex items-start gap-2 text-sm\">\n <div className=\"w-1.5 h-1.5 bg-primary rounded-full mt-2 flex-shrink-0\" />\n <span className=\"text-muted-foreground leading-relaxed\">{ev}</span>\n </li>\n ))}\n </ul>\n <ScoreBreakdown\n factors={signalData.factors}\n onFactorFeedback={signalData.onFactorFeedback ?? ((key, type, detail) =>\n console.log(\"Signal factor feedback:\", { company: item.company, factor: key, type, detail })\n )}\n initialFeedback={signalData.initialFactorFeedback}\n />\n <SignalApproval.Actions />\n </div>\n )}\n </div>\n </ScoreFeedback.Root>\n\n {!evidenceExpanded && <SignalApproval.Actions />}\n </div>\n )\n })()}\n\n {/* After-score content slot (e.g. OpportunityPanel) */}\n {renderAfterScore?.(item)}\n\n {/* Activity Timeline */}\n {sections.timeline && timelineEvents.length > 0 && (\n <div className=\"mb-8\">\n <button\n type=\"button\"\n onClick={() => setShowTimeline((prev) => !prev)}\n className=\"group/timeline flex w-full items-center justify-between gap-2 py-2 rounded-md transition-colors hover:bg-muted/40 -mx-2 px-2 cursor-pointer\"\n >\n <div className=\"flex items-center gap-2\">\n <h3 className=\"text-xs font-bold text-muted-foreground uppercase tracking-wider group-hover/timeline:text-foreground transition-colors\">Activity timeline</h3>\n {!showTimeline && (lastActivityTime || (timelineEvents.length > 0 && timelineEvents[0].time)) && (\n <span className=\"text-[11px] text-muted-foreground/60\">\n &middot; Last activity {lastActivityTime ?? timelineEvents[0]?.time ?? ''}\n </span>\n )}\n </div>\n <div className=\"flex items-center gap-1.5\">\n <span className=\"text-[11px] font-medium text-muted-foreground\">{timelineEvents.length} events</span>\n <ChevronDown className={`h-3.5 w-3.5 text-muted-foreground transition-transform duration-200 ${showTimeline ? \"rotate-180\" : \"\"}`} />\n </div>\n </button>\n {showTimeline && (\n <div className=\"mt-3\">\n <TimelineActivity events={timelineEvents} />\n </div>\n )}\n </div>\n )}\n </div>\n\n {/* Suggested Actions */}\n {sections.suggestedActions && (\n <SignalApproval.Gate>\n <SuggestedActions\n actions={suggestedActions}\n accountContacts={accountContacts}\n signature={emailSignature}\n iconMap={iconMap}\n onDismiss={(id) => console.log(\"Dismiss action:\", id)}\n onSend={(id) => console.log(\"Send action:\", id)}\n onSaveDraft={(id) => console.log(\"Save draft:\", id)}\n onDuplicate={handleDuplicate}\n onOpenAccountDetails={onOpenEntityPanel}\n onOpenRecentActivity={onOpenRecentActivity}\n onMarkComplete={(id) => console.log(\"Mark complete:\", id)}\n onDispatchAgent={(id) => console.log(\"Dispatch agent:\", id)}\n />\n </SignalApproval.Gate>\n )}\n {renderDetailExtra?.(item)}\n </div>\n </SignalApproval.Root>\n )\n}\n\n// ---------------------------------------------------------------------------\n// Main Component\n// ---------------------------------------------------------------------------\n\nexport function PrototypeInboxView({\n items,\n filterCategories,\n detailSections,\n accountContacts = [],\n buildAccountContacts,\n emailSignature = \"\",\n buildSuggestedActions: buildSuggestedActionsProp,\n buildSourceItems: buildSourceItemsProp,\n getSignalScore: getSignalScoreProp,\n getTimelineEvents,\n iconMap = {},\n hideToolbarActions,\n hideHoverActions,\n onSuggestedActionFeedback,\n onScoreFeedback,\n headerActions,\n onOpenEntityPanel,\n onOpenRecentActivity,\n onItemSelect,\n defaultViewMode,\n buildEntityChips,\n quickFilterTabs,\n hideAccountsButton,\n accountDetailsLabel,\n onSignalApprove,\n getSignalApprovalState,\n signalLabels,\n hideApproveButton,\n signalBriefCopy,\n renderDetailExtra,\n renderBeforeScore,\n renderAfterScore,\n lastActivityTime,\n sortOptions,\n activeSortId,\n onSortChange,\n}: PrototypeInboxViewProps) {\n const [inboxViewMode, setInboxViewMode] = React.useState<\"inbox\" | \"list\" | \"detail\">(\n defaultViewMode === \"list\" ? \"list\" : defaultViewMode === \"split\" ? \"inbox\" : \"inbox\"\n )\n const [previousViewMode, setPreviousViewMode] = React.useState<\"inbox\" | \"list\">(\"inbox\")\n const [selectedTask, setSelectedTask] = React.useState(items[0])\n const [inboxAssignee, setInboxAssignee] = React.useState<AssigneeFilter>(\"me\")\n const [inboxFilters, setInboxFilters] = React.useState<Record<string, string>>({})\n const [activeQuickFilter, setActiveQuickFilter] = React.useState<string>(\"all\")\n const [splitViewSearch, setSplitViewSearch] = React.useState(\"\")\n\n const sections = React.useMemo(\n () => ({ ...DEFAULT_DETAIL_SECTIONS, ...detailSections }),\n [detailSections],\n )\n\n const resolvedFilterCategories: InboxFilterCategory[] = React.useMemo(\n () =>\n filterCategories ?? [\n {\n id: \"category\",\n label: \"Category\",\n icon: <Tag className=\"h-3.5 w-3.5 text-muted-foreground\" />,\n options: [...new Set(items.map((i) => i.tag1))],\n },\n {\n id: \"account\",\n label: \"Account\",\n icon: <Building className=\"h-3.5 w-3.5 text-muted-foreground\" />,\n options: [...new Set(items.map((i) => i.company))],\n },\n ],\n [filterCategories, items],\n )\n\n const buildSuggestedActions = React.useMemo(\n () => buildSuggestedActionsProp ?? (() => []),\n [buildSuggestedActionsProp],\n )\n\n const buildSourceItems = React.useMemo(\n () => buildSourceItemsProp ?? (() => []),\n [buildSourceItemsProp],\n )\n\n const getSignalScore = React.useMemo(\n () => getSignalScoreProp ?? (() => DEFAULT_SIGNAL_SCORE),\n [getSignalScoreProp],\n )\n\n // Build a map from filter category id → QueueItem field for targeted filtering.\n // Known category ids are mapped explicitly; unknown categories fall back to a\n // broad search across display fields so consumer-defined filters still work.\n const filterFieldMap = React.useMemo<\n Record<string, (item: QueueItem, value: string) => boolean>\n >(() => {\n const map: Record<string, (item: QueueItem, value: string) => boolean> = {}\n for (const cat of resolvedFilterCategories) {\n switch (cat.id) {\n case \"category\":\n case \"signalType\":\n map[cat.id] = (item, v) => item.tag1.toLowerCase() === v.toLowerCase()\n break\n case \"account\":\n map[cat.id] = (item, v) => item.company.toLowerCase() === v.toLowerCase()\n break\n default:\n // Fallback: check all display fields\n map[cat.id] = (item, v) => {\n const lv = v.toLowerCase()\n return (\n item.tag1.toLowerCase() === lv ||\n item.company.toLowerCase() === lv ||\n item.title.toLowerCase().includes(lv) ||\n item.details.toLowerCase().includes(lv)\n )\n }\n }\n }\n return map\n }, [resolvedFilterCategories])\n\n // Filter items for list view based on toolbar filters\n const filteredItems = React.useMemo(() => {\n const activeFilters = Object.entries(inboxFilters).filter(\n ([, value]) => value && value !== \"all\"\n )\n if (activeFilters.length === 0) return items\n return items.filter((item) =>\n activeFilters.every(([key, value]) => {\n const matcher = filterFieldMap[key]\n return matcher ? matcher(item, value) : true\n })\n )\n }, [items, inboxFilters, filterFieldMap])\n\n // Resolve quick filter tabs once — used by both the split view filter and\n // the tab bar render. Each tab's `matchValue` (falling back to `label`) is\n // compared against `item.tag1` so consumer labels can differ from data values.\n type QuickFilterTab = { id: string; label: string; matchValue?: string; count?: number }\n const resolvedQuickFilterTabs = React.useMemo<QuickFilterTab[]>(() => {\n if (quickFilterTabs) return quickFilterTabs\n // Derive default tabs from the actual item tag1 values\n const uniqueTags = [...new Set(items.map((i) => i.tag1))]\n return uniqueTags.map((tag) => ({\n id: tag.toLowerCase().replace(/\\s+/g, \"-\"),\n label: tag,\n }))\n }, [quickFilterTabs, items])\n\n // Compute per-tab counts once so they can be displayed in the tab bar\n const quickFilterTabCounts = React.useMemo(() => {\n const counts: Record<string, number> = {}\n for (const tab of resolvedQuickFilterTabs) {\n const match = (tab.matchValue ?? tab.label).toLowerCase()\n counts[tab.id] = items.filter((i) => i.tag1.toLowerCase() === match).length\n }\n return counts\n }, [resolvedQuickFilterTabs, items])\n\n // Filter items for split view based on quick filter tabs and search\n const splitViewItems = React.useMemo(() => {\n let filtered = items\n // Apply quick filter tab\n if (activeQuickFilter !== \"all\") {\n const activeTab = resolvedQuickFilterTabs.find((t) => t.id === activeQuickFilter)\n if (activeTab) {\n const match = (activeTab.matchValue ?? activeTab.label).toLowerCase()\n filtered = filtered.filter(\n (item) => item.tag1.toLowerCase() === match\n )\n }\n }\n // Apply search input\n if (splitViewSearch.trim()) {\n const q = splitViewSearch.trim().toLowerCase()\n filtered = filtered.filter(\n (item) =>\n item.tag1.toLowerCase().includes(q) ||\n item.company.toLowerCase().includes(q) ||\n item.title.toLowerCase().includes(q)\n )\n }\n return filtered\n }, [items, activeQuickFilter, resolvedQuickFilterTabs, splitViewSearch])\n\n // Grouped items for list view — one group per severity tier so items\n // are labelled correctly (e.g. \"Urgent\", \"High\", \"Active\").\n const inboxGroups = React.useMemo<GroupedListGroup<QueueItem>[]>(() => {\n const urgent = filteredItems.filter((i) => i.statusColor === \"red\")\n const high = filteredItems.filter((i) => i.statusColor === \"orange\")\n const active = filteredItems.filter((i) => i.statusColor !== \"red\" && i.statusColor !== \"orange\")\n return [\n { key: \"urgent\", label: \"Urgent\", items: urgent },\n { key: \"high\", label: \"High\", items: high },\n { key: \"active\", label: \"Active\", items: active },\n ].filter((g) => g.items.length > 0)\n }, [filteredItems])\n\n const renderInboxRow = React.useCallback(\n (item: QueueItem) => (\n <>\n <span className={`h-2 w-2 shrink-0 rounded-full ${dotColorClass(item.statusColor)}`} />\n <span className=\"w-[80px] shrink-0 font-mono text-xs text-muted-foreground/80\">{item.id}</span>\n <span className=\"shrink-0 rounded-md border border-border bg-muted px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground whitespace-nowrap\">{item.tag1}</span>\n <span className=\"min-w-0 flex-1 truncate text-sm font-semibold text-foreground\">{item.title}</span>\n <span className=\"w-[120px] shrink-0 truncate text-xs font-medium text-foreground\">{item.company}</span>\n <span className=\"w-[80px] shrink-0 text-right text-xs text-muted-foreground\">{item.time}</span>\n </>\n ),\n [],\n )\n\n const handleInboxItemSelect = React.useCallback(\n (item: QueueItem) => {\n setSelectedTask(item)\n if (onItemSelect) {\n onItemSelect(item)\n } else if (inboxViewMode === \"list\") {\n setPreviousViewMode(\"list\")\n setInboxViewMode(\"detail\")\n }\n },\n [inboxViewMode, onItemSelect],\n )\n\n const handleBackFromDetail = React.useCallback(() => {\n setInboxViewMode(previousViewMode)\n }, [previousViewMode])\n\n const handleViewModeChange = React.useCallback((id: string) => {\n const mode = id as \"inbox\" | \"list\" | \"detail\"\n if (mode !== \"detail\") {\n setPreviousViewMode(mode)\n }\n setInboxViewMode(mode)\n }, [])\n\n React.useEffect(() => {\n const mql = window.matchMedia(\"(max-width: 768px)\")\n function handleChange(e: MediaQueryListEvent | MediaQueryList) {\n if (e.matches && inboxViewMode === \"inbox\") {\n setPreviousViewMode(\"inbox\")\n setInboxViewMode(\"detail\")\n }\n }\n handleChange(mql)\n mql.addEventListener(\"change\", handleChange)\n return () => mql.removeEventListener(\"change\", handleChange)\n }, [inboxViewMode])\n\n const detailViewProps: DetailViewProps = {\n item: selectedTask,\n sections,\n getSignalScore,\n buildSuggestedActions,\n buildSourceItems,\n getTimelineEvents,\n accountContacts: buildAccountContacts?.(selectedTask) ?? accountContacts,\n emailSignature,\n iconMap,\n onOpenEntityPanel,\n onOpenRecentActivity,\n onSuggestedActionFeedback,\n onSignalApprove,\n getSignalApprovalState,\n signalLabels,\n hideApproveButton,\n signalBriefCopy,\n renderDetailExtra,\n renderBeforeScore,\n renderAfterScore,\n lastActivityTime,\n onScoreFeedback,\n }\n\n return (\n <div className=\"flex h-full w-full flex-col\">\n {/* Toolbar */}\n <div className=\"flex items-center justify-between border-b border-border bg-background px-4 py-3 shrink-0\">\n <div className=\"flex items-center gap-3\">\n {inboxViewMode === \"detail\" ? (\n <button\n type=\"button\"\n onClick={handleBackFromDetail}\n className=\"flex items-center gap-2 text-sm font-medium text-muted-foreground hover:text-foreground transition-colors\"\n >\n <ArrowLeft className=\"h-4 w-4\" />\n Back\n </button>\n ) : null}\n <h2 className=\"text-lg font-semibold text-foreground\">Inbox</h2>\n <Badge variant=\"secondary\" className=\"bg-muted text-muted-foreground hover:bg-muted font-medium text-[11px] px-2 py-0.5 rounded-md\">\n {items.length}\n </Badge>\n </div>\n <div className=\"flex items-center gap-3\">\n <ViewModeToggle\n modes={[\n { id: \"inbox\", icon: <Columns2 className=\"h-3.5 w-3.5\" />, label: \"Split View\" },\n { id: \"list\", icon: <LayoutList className=\"h-3.5 w-3.5\" />, label: \"List View\" },\n { id: \"detail\", icon: <Square className=\"h-3.5 w-3.5\" />, label: \"Detail View\" },\n ]}\n activeMode={inboxViewMode}\n onModeChange={handleViewModeChange}\n />\n {headerActions}\n </div>\n </div>\n\n {/* View modes */}\n {inboxViewMode === \"detail\" ? (\n <div className=\"flex h-full flex-1 flex-col overflow-hidden bg-background\">\n <div className=\"flex-1 overflow-y-auto\">\n <DetailView {...detailViewProps} />\n </div>\n </div>\n ) : inboxViewMode === \"list\" ? (\n <div className=\"flex-1 overflow-y-auto bg-background\">\n <InboxToolbar\n assignee={inboxAssignee}\n onAssigneeChange={setInboxAssignee}\n filterCategories={resolvedFilterCategories}\n selectedFilters={inboxFilters}\n onFilterChange={(catId, val) =>\n setInboxFilters((prev) => ({ ...prev, [catId]: val }))\n }\n onClearFilters={() => setInboxFilters({})}\n />\n <GroupedListView<QueueItem>\n groups={inboxGroups}\n renderRow={renderInboxRow}\n getItemKey={(item) => item.id}\n selectedKey={selectedTask.id}\n onItemClick={handleInboxItemSelect}\n emptyMessage=\"No inbox items\"\n />\n </div>\n ) : (\n /* Split view */\n <div className=\"flex h-full min-h-0 w-full flex-1\">\n <div className=\"flex h-full min-w-[380px] w-[380px] flex-col border-r border-border bg-background shadow-sm z-10\">\n <div className=\"flex flex-col gap-4 border-b border-border p-4 shrink-0\">\n {!hideToolbarActions && (\n <div className=\"flex items-center justify-between\">\n <div className=\"flex items-center gap-1\">\n <Button variant=\"outline\" size=\"icon\" className=\"h-8 w-8 text-muted-foreground\"><Eye className=\"w-4 h-4\" /></Button>\n <Button variant=\"outline\" size=\"icon\" className=\"h-8 w-8 text-muted-foreground\"><FileText className=\"w-4 h-4\" /></Button>\n <Button variant=\"outline\" size=\"icon\" className=\"h-8 w-8 text-muted-foreground\"><Clock className=\"w-4 h-4\" /></Button>\n <Button variant=\"outline\" size=\"icon\" className=\"h-8 w-8 text-muted-foreground\"><CheckSquare className=\"w-4 h-4\" /></Button>\n </div>\n <Button size=\"sm\" className=\"h-8 px-4 bg-foreground text-background hover:bg-foreground/90 text-xs font-semibold gap-1.5 rounded-md\">\n <Plus className=\"w-4 h-4\" /> Add Task\n </Button>\n </div>\n )}\n <div className=\"flex items-center gap-2\">\n <div className=\"relative flex-1\">\n <Filter className=\"absolute left-2.5 top-1.5 w-4 h-4 text-muted-foreground\" />\n <Input\n className=\"h-8 pl-8 text-xs bg-background border-border rounded-md shadow-none\"\n placeholder=\"Filter by category...\"\n value={splitViewSearch}\n onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSplitViewSearch(e.target.value)}\n />\n </div>\n {sortOptions && sortOptions.length > 0 && (\n <DropdownMenu>\n <DropdownMenuTrigger asChild>\n <Button variant=\"outline\" size=\"sm\" className=\"h-8 text-xs font-medium rounded-md shadow-none gap-1.5\">\n <ArrowUpDown className=\"w-3.5 h-3.5\" />\n {sortOptions.find(o => o.id === activeSortId)?.label ?? 'Sort'}\n <ChevronDown className=\"w-3 h-3\" />\n </Button>\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"end\">\n <DropdownMenuRadioGroup value={activeSortId ?? ''} onValueChange={(val) => onSortChange?.(val)}>\n {sortOptions.map(option => (\n <DropdownMenuRadioItem key={option.id} value={option.id}>\n {option.label}\n </DropdownMenuRadioItem>\n ))}\n </DropdownMenuRadioGroup>\n </DropdownMenuContent>\n </DropdownMenu>\n )}\n {!hideAccountsButton && (\n <Button variant=\"outline\" size=\"sm\" className=\"h-8 text-xs font-medium rounded-md shadow-none\">\n <Building className=\"w-3.5 h-3.5 mr-1.5\" /> {accountDetailsLabel ?? \"Accounts\"}\n </Button>\n )}\n </div>\n <div className=\"flex items-center gap-1.5 overflow-x-auto pb-1 mt-1 scrollbar-hide\">\n <Button\n size=\"sm\"\n variant={activeQuickFilter === \"all\" ? \"default\" : \"outline\"}\n className={`h-7 rounded-full px-3.5 text-[11px] font-semibold shadow-none ${\n activeQuickFilter === \"all\"\n ? \"bg-foreground text-background hover:bg-foreground/90\"\n : \"bg-transparent border-border text-muted-foreground hover:text-foreground\"\n }`}\n onClick={() => setActiveQuickFilter(\"all\")}\n >\n All\n </Button>\n {resolvedQuickFilterTabs.map((tab) => {\n const count = tab.count ?? quickFilterTabCounts[tab.id]\n return (\n <Button\n key={tab.id}\n size=\"sm\"\n variant={activeQuickFilter === tab.id ? \"default\" : \"outline\"}\n className={`h-7 rounded-full px-3.5 text-[11px] font-medium shadow-none ${\n activeQuickFilter === tab.id\n ? \"bg-foreground text-background hover:bg-foreground/90\"\n : \"bg-transparent border-border text-muted-foreground hover:text-foreground\"\n }`}\n onClick={() => setActiveQuickFilter(tab.id)}\n >\n {tab.label}{count != null && count > 0 ? ` (${count})` : \"\"}\n </Button>\n )\n })}\n </div>\n </div>\n\n <div className=\"flex-1 overflow-y-auto\">\n {splitViewItems.map((item) => (\n <div\n key={item.id}\n onClick={() => { setSelectedTask(item); onItemSelect?.(item) }}\n className={`cursor-pointer border-b border-border p-4 transition-colors group relative border-l-2 ${\n selectedTask.id === item.id\n ? \"bg-muted/30 border-l-brand-purple\"\n : \"bg-transparent border-l-transparent hover:bg-muted/10\"\n }`}\n >\n <div className=\"mb-1.5 flex items-center gap-2\">\n <span className=\"min-w-0 truncate text-[13px] font-semibold text-foreground leading-tight\">{item.title}</span>\n {selectedTask.id !== item.id && item.tag1 && (\n <span className=\"shrink-0 rounded-md border border-border bg-muted/60 px-2 py-0.5 text-[10px] font-medium text-muted-foreground\">\n {item.tag1}\n </span>\n )}\n <span className=\"ml-auto shrink-0 text-[10px] font-medium text-muted-foreground/80\">{item.time}</span>\n </div>\n <div className=\"flex items-start gap-2 mt-2\">\n <span className={`w-1.5 h-1.5 rounded-full shrink-0 mt-1.5 ${dotColorClass(item.statusColor)}`} />\n <span className=\"text-xs text-muted-foreground leading-tight\">{item.details}</span>\n </div>\n {buildEntityChips && (() => {\n const chips = buildEntityChips(item)\n if (!chips.length) return null\n return (\n <div className=\"flex items-center gap-1.5 mt-2 flex-wrap\">\n {chips.map((chip) => (\n <button\n key={chip.id}\n type=\"button\"\n onClick={(e) => { e.stopPropagation(); chip.onClick?.() }}\n className=\"inline-flex items-center gap-1 rounded-md border border-border/60 bg-muted/30 px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground transition-colors hover:bg-muted/50 hover:text-foreground\"\n >\n <span className=\"flex h-3.5 w-3.5 items-center justify-center rounded bg-muted-foreground/10 text-[8px] font-semibold\">{chip.avatarLetter}</span>\n {chip.label}\n </button>\n ))}\n </div>\n )\n })()}\n {!hideHoverActions && (\n <div className={`absolute right-4 bottom-4 flex items-center gap-1.5 bg-background shadow-sm rounded-md px-1 py-0.5 border border-border ${\n selectedTask.id === item.id ? \"opacity-100\" : \"opacity-0 group-hover:opacity-100 transition-opacity\"\n }`}>\n <Button variant=\"ghost\" size=\"icon\" className=\"h-6 w-6 rounded text-muted-foreground hover:text-foreground\"><CheckSquare className=\"w-3.5 h-3.5\" /></Button>\n <Button variant=\"ghost\" size=\"icon\" className=\"h-6 w-6 rounded text-muted-foreground hover:text-foreground\"><Clock className=\"w-3.5 h-3.5\" /></Button>\n </div>\n )}\n </div>\n ))}\n <div className=\"p-4\">\n <Button variant=\"outline\" size=\"sm\" className=\"h-8 text-xs font-semibold rounded-md shadow-none\">See more</Button>\n </div>\n </div>\n </div>\n\n <div className=\"flex h-full flex-1 flex-col overflow-hidden bg-background\">\n <div className=\"flex-1 overflow-y-auto\">\n <DetailView {...detailViewProps} />\n </div>\n </div>\n </div>\n )}\n </div>\n )\n}\n"],"mappings":"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","names":["_a","_b"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@handled-ai/design-system",
3
- "version": "0.14.0",
3
+ "version": "0.14.2",
4
4
  "description": "Handled UI component library (shadcn-style, New York)",
5
5
  "type": "module",
6
6
  "packageManager": "pnpm@9.12.0",
@@ -25,9 +25,11 @@ import {
25
25
  import { TimelineActivity, type TimelineEvent } from "./timeline-activity"
26
26
 
27
27
  // ---------------------------------------------------------------------------
28
- // EntityPanel supports both Sheet (side panel) and fullscreen modes
28
+ // EntityPanel -- supports Sheet (side panel), wide, and fullscreen modes
29
29
  // ---------------------------------------------------------------------------
30
30
 
31
+ export type PanelMode = 'default' | 'wide' | 'fullscreen'
32
+
31
33
  export function EntityPanel({
32
34
  isOpen,
33
35
  onClose,
@@ -37,19 +39,41 @@ export function EntityPanel({
37
39
  onClose: (open: boolean) => void
38
40
  children?: React.ReactNode
39
41
  }) {
40
- const [isFullscreen, setIsFullscreen] = React.useState(false)
42
+ const [panelMode, setPanelMode] = React.useState<PanelMode>('default')
43
+
44
+ // Backward-compatible derived values
45
+ const isFullscreen = panelMode === 'fullscreen'
46
+ const setIsFullscreen = React.useCallback(
47
+ (val: boolean) => setPanelMode(val ? 'fullscreen' : 'default'),
48
+ [],
49
+ )
50
+
51
+ const cyclePanelMode = React.useCallback(() => {
52
+ setPanelMode((prev) =>
53
+ prev === 'default' ? 'wide' : prev === 'wide' ? 'fullscreen' : 'default',
54
+ )
55
+ }, [])
41
56
 
42
57
  React.useEffect(() => {
43
- if (!isOpen) setIsFullscreen(false)
58
+ if (!isOpen) setPanelMode('default')
44
59
  }, [isOpen])
45
60
 
46
61
  const handleClose = React.useCallback(() => {
47
- setIsFullscreen(false)
62
+ setPanelMode('default')
48
63
  onClose(false)
49
64
  }, [onClose])
50
65
 
51
66
  const panelContent = (
52
- <EntityPanelContext.Provider value={{ isFullscreen, setIsFullscreen, onClose: handleClose }}>
67
+ <EntityPanelContext.Provider
68
+ value={{
69
+ isFullscreen,
70
+ setIsFullscreen,
71
+ panelMode,
72
+ setPanelMode,
73
+ cyclePanelMode,
74
+ onClose: handleClose,
75
+ }}
76
+ >
53
77
  {children}
54
78
  </EntityPanelContext.Provider>
55
79
  )
@@ -62,11 +86,16 @@ export function EntityPanel({
62
86
  )
63
87
  }
64
88
 
89
+ const widthClass =
90
+ panelMode === 'wide'
91
+ ? 'sm:w-[800px] sm:max-w-[900px]'
92
+ : 'sm:w-[500px] sm:max-w-[600px]'
93
+
65
94
  return (
66
95
  <Sheet open={isOpen} onOpenChange={onClose}>
67
96
  <SheetContent
68
97
  side="right"
69
- className="w-full sm:w-[500px] sm:max-w-[600px] overflow-hidden p-0 bg-background border-l border-border flex flex-col"
98
+ className={`w-full ${widthClass} overflow-hidden p-0 bg-background border-l border-border flex flex-col`}
70
99
  showCloseButton={false}
71
100
  >
72
101
  <SheetHeader className="sr-only p-0">
@@ -81,14 +110,20 @@ export function EntityPanel({
81
110
  const EntityPanelContext = React.createContext<{
82
111
  isFullscreen: boolean
83
112
  setIsFullscreen: (v: boolean) => void
113
+ panelMode: PanelMode
114
+ setPanelMode: (mode: PanelMode) => void
115
+ cyclePanelMode: () => void
84
116
  onClose: () => void
85
117
  }>({
86
118
  isFullscreen: false,
87
119
  setIsFullscreen: () => {},
120
+ panelMode: 'default',
121
+ setPanelMode: () => {},
122
+ cyclePanelMode: () => {},
88
123
  onClose: () => {},
89
124
  })
90
125
 
91
- function useEntityPanel() {
126
+ export function useEntityPanel() {
92
127
  return React.useContext(EntityPanelContext)
93
128
  }
94
129
 
@@ -109,7 +144,10 @@ export function EntityPanelHeader({
109
144
  subtitle?: string
110
145
  headerAction?: React.ReactNode
111
146
  }) {
112
- const { isFullscreen, setIsFullscreen, onClose } = useEntityPanel()
147
+ const { panelMode, cyclePanelMode, onClose } = useEntityPanel()
148
+
149
+ const sizeButtonTitle =
150
+ panelMode === 'default' ? 'Wide' : panelMode === 'wide' ? 'Fullscreen' : 'Exit fullscreen'
113
151
 
114
152
  return (
115
153
  <div className="flex items-center justify-between mb-4">
@@ -136,11 +174,11 @@ export function EntityPanelHeader({
136
174
  </button>
137
175
  <button
138
176
  type="button"
139
- onClick={() => setIsFullscreen(!isFullscreen)}
177
+ onClick={cyclePanelMode}
140
178
  className="p-1.5 rounded-md hover:bg-secondary transition-colors"
141
- title={isFullscreen ? "Exit fullscreen" : "Fullscreen"}
179
+ title={sizeButtonTitle}
142
180
  >
143
- {isFullscreen ? (
181
+ {panelMode === 'fullscreen' ? (
144
182
  <Minimize2 className="w-4 h-4" />
145
183
  ) : (
146
184
  <Maximize2 className="w-4 h-4" />
@@ -44,7 +44,8 @@ export interface VirtualizedDataTableProps<TData> {
44
44
  columnVisibility?: VisibilityState
45
45
  onColumnVisibilityChange?: OnChangeFn<VisibilityState>
46
46
 
47
- // Empty state
47
+ // Loading / Empty state
48
+ isLoading?: boolean
48
49
  emptyIcon?: React.ReactNode
49
50
  emptyMessage?: string
50
51
  emptyDescription?: string
@@ -71,6 +72,7 @@ export function VirtualizedDataTable<TData>({
71
72
  onColumnFiltersChange,
72
73
  columnVisibility,
73
74
  onColumnVisibilityChange,
75
+ isLoading,
74
76
  emptyIcon,
75
77
  emptyMessage = "No rows found",
76
78
  emptyDescription = "Try adjusting your filters",
@@ -293,6 +295,11 @@ export function VirtualizedDataTable<TData>({
293
295
  )
294
296
  })}
295
297
  </div>
298
+ ) : isLoading ? (
299
+ <div className="flex flex-col items-center justify-center gap-2 text-muted-foreground py-20">
300
+ <Loader2 className="h-7 w-7 animate-spin opacity-60" />
301
+ <p className="text-sm font-medium">Loading...</p>
302
+ </div>
296
303
  ) : (
297
304
  <div className="flex flex-col items-center justify-center gap-1 text-muted-foreground py-20">
298
305
  {emptyIcon ?? <SearchX className="h-7 w-7 opacity-40" />}
@@ -123,6 +123,8 @@ export interface InboxViewConfig {
123
123
  }
124
124
  /** Render extra content at the end of the detail view, below the suggested actions section. */
125
125
  renderDetailExtra?: (item: QueueItem) => React.ReactNode
126
+ /** Render content between the signal brief text and the signal score bar (e.g. "Signals on Case" chips). */
127
+ renderBeforeScore?: (item: QueueItem) => React.ReactNode
126
128
  /** Render content between the signal score section and the activity timeline (e.g. OpportunityPanel). */
127
129
  renderAfterScore?: (item: QueueItem) => React.ReactNode
128
130
  /** Formatted string for "Last activity X ago" in the collapsed timeline header. If omitted, falls back to the first event's time. */
@@ -130,6 +130,8 @@ export interface DetailViewProps {
130
130
  hideApproveButton?: boolean
131
131
  signalBriefCopy?: InboxViewConfig["signalBriefCopy"]
132
132
  renderDetailExtra?: (item: QueueItem) => React.ReactNode
133
+ /** Render content between the signal brief text and the signal score bar (e.g. "Signals on Case" chips). */
134
+ renderBeforeScore?: (item: QueueItem) => React.ReactNode
133
135
  /** Render content between the signal score section and the activity timeline. */
134
136
  renderAfterScore?: (item: QueueItem) => React.ReactNode
135
137
  lastActivityTime?: string
@@ -160,6 +162,7 @@ export function DetailView({
160
162
  hideApproveButton,
161
163
  signalBriefCopy,
162
164
  renderDetailExtra,
165
+ renderBeforeScore,
163
166
  renderAfterScore,
164
167
  lastActivityTime,
165
168
  renderMetadataExtra,
@@ -335,6 +338,9 @@ export function DetailView({
335
338
  </p>
336
339
  )}
337
340
 
341
+ {/* Before-score content slot (e.g. "Signals on Case" chips) */}
342
+ {renderBeforeScore?.(item)}
343
+
338
344
  <ScoreFeedback.Root
339
345
  onSubmitFeedback={(type, pills, detail) => (signalData.onScoreFeedback ?? onScoreFeedback)?.(type, pills, detail)}
340
346
  initialFeedback={signalData.initialScoreFeedback}
@@ -485,6 +491,7 @@ export function PrototypeInboxView({
485
491
  hideApproveButton,
486
492
  signalBriefCopy,
487
493
  renderDetailExtra,
494
+ renderBeforeScore,
488
495
  renderAfterScore,
489
496
  lastActivityTime,
490
497
  sortOptions,
@@ -720,6 +727,7 @@ export function PrototypeInboxView({
720
727
  hideApproveButton,
721
728
  signalBriefCopy,
722
729
  renderDetailExtra,
730
+ renderBeforeScore,
723
731
  renderAfterScore,
724
732
  lastActivityTime,
725
733
  onScoreFeedback,