@handled-ai/design-system 0.18.35 → 0.18.36

package/dist/components/entity-panel.d.ts

@@ -75,5 +75,19 @@ declare function ConnectedApps({ icons, }: {
 declare function EntityDetails({ onClose: _onClose }: {
     onClose?: () => void;
 }): React.JSX.Element;
+/** Icon can be a ReactNode (e.g. a Lucide icon) or the string "salesforce" for the brand logo. */
+type RelatedRecordActionIcon = React.ReactNode | "salesforce";
+interface RelatedRecordActionCardProps {
+    kind: string;
+    label: string;
+    subtitle?: string;
+    href?: string;
+    external?: boolean;
+    icon?: RelatedRecordActionIcon;
+    onClick?: () => void;
+    disabledReason?: string;
+    testId?: string;
+}
+declare function RelatedRecordActionCard({ kind: _kind, label, subtitle, href, external, icon, onClick, disabledReason, testId, }: RelatedRecordActionCardProps): React.JSX.Element;
 
-export { type ActivityItem, ConnectedApps, EntityActivityItem, EntityDetails, type EntityMetadataField, EntityMetadataGrid, EntityPanel, type EntityPanelBrandIcons, EntityPanelHeader, EntityPanelTabs, EntitySection, type PanelMode, PotentialContacts, RecentActivity, SystemActivity, useEntityPanel };
+export { type ActivityItem, ConnectedApps, EntityActivityItem, EntityDetails, type EntityMetadataField, EntityMetadataGrid, EntityPanel, type EntityPanelBrandIcons, EntityPanelHeader, EntityPanelTabs, EntitySection, type PanelMode, PotentialContacts, RecentActivity, RelatedRecordActionCard, type RelatedRecordActionCardProps, type RelatedRecordActionIcon, SystemActivity, useEntityPanel };

package/dist/components/entity-panel.js

@@ -22,9 +22,11 @@ import {
   Link as LinkIcon,
   Maximize2,
   Minimize2,
-  CalendarDays
+  CalendarDays,
+  ChevronRight
 } from "lucide-react";
 import { TimelineActivity } from "./timeline-activity.js";
+import { BRAND_ICONS } from "../lib/icons.js";
 function EntityPanel({
   isOpen,
   onClose,
@@ -573,6 +575,76 @@ function EntityDetails({ onClose: _onClose }) {
     ] }) }) })
   ] });
 }
+function RelatedRecordActionCard({
+  kind: _kind,
+  label,
+  subtitle,
+  href,
+  external,
+  icon,
+  onClick,
+  disabledReason,
+  testId
+}) {
+  const disabled = !!disabledReason;
+  const iconNode = icon === "salesforce" ? /* @__PURE__ */ jsx(
+    "img",
+    {
+      src: BRAND_ICONS.salesforce,
+      alt: "Salesforce",
+      className: "w-4 h-4 object-contain"
+    }
+  ) : icon != null ? icon : /* @__PURE__ */ jsx(FileText, { className: "h-4 w-4", "aria-hidden": "true" });
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5 min-w-0", children: [
+      /* @__PURE__ */ jsx("div", { className: "w-7 h-7 rounded-md border border-border/60 bg-muted/30 flex items-center justify-center shrink-0 text-muted-foreground", children: iconNode }),
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-foreground leading-snug truncate", children: label }),
+        subtitle && /* @__PURE__ */ jsx("p", { className: "text-[11px] text-muted-foreground/70 truncate", children: subtitle })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 shrink-0 text-muted-foreground", children: [
+      external && /* @__PURE__ */ jsx(ExternalLink, { className: "w-3 h-3" }),
+      /* @__PURE__ */ jsx(ChevronRight, { className: "w-3.5 h-3.5" })
+    ] })
+  ] });
+  const baseClassName = "flex items-center justify-between gap-3 py-2 px-2 -mx-2 rounded-md transition-colors";
+  const interactiveClassName = disabled ? `${baseClassName} opacity-50 cursor-not-allowed` : `${baseClassName} hover:bg-muted/50 cursor-pointer`;
+  if (disabled) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: interactiveClassName,
+        title: disabledReason,
+        "data-testid": testId,
+        children: content
+      }
+    );
+  }
+  if (href) {
+    return /* @__PURE__ */ jsx(
+      "a",
+      {
+        href,
+        target: external ? "_blank" : void 0,
+        rel: external ? "noopener noreferrer" : void 0,
+        className: interactiveClassName,
+        "data-testid": testId,
+        children: content
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick,
+      className: `${interactiveClassName} w-full text-left`,
+      "data-testid": testId,
+      children: content
+    }
+  );
+}
 function SourcesToggle() {
   const [expanded, setExpanded] = React.useState(false);
   const sources = [
@@ -616,6 +688,7 @@ export {
   EntitySection,
   PotentialContacts,
   RecentActivity,
+  RelatedRecordActionCard,
   SystemActivity,
   useEntityPanel
 };

package/dist/components/entity-panel.js.map

@@ -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 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,\n  headerAction,\n  headerSecondaryAction,\n}: {\n  icon?: React.ReactNode\n  title: string\n  badgeLabel?: string\n  subtitle?: string\n  headerAction?: React.ReactNode\n  headerSecondaryAction?: 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=\"mb-3 space-y-2\">\n      <div className=\"flex items-center justify-between\">\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      {(subtitle || headerSecondaryAction) && (\n        <div className=\"flex flex-wrap items-center justify-between gap-x-3 gap-y-2\">\n          {subtitle ? (\n            <p className=\"min-w-0 flex-1 text-xs text-muted-foreground\">{subtitle}</p>\n          ) : (\n            <div className=\"min-w-0 flex-1\" />\n          )}\n          {headerSecondaryAction ? (\n            <div className=\"flex shrink-0 items-center gap-2\">{headerSecondaryAction}</div>\n          ) : null}\n        </div>\n      )}\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 overflow-x-auto\">\n      {tabs.map((tab) => (\n        <button\n          key={tab.id}\n          type=\"button\"\n          onClick={() => onTabChange(tab.id)}\n          className={`whitespace-nowrap shrink-0 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-3 gap-x-4 mb-7 text-[13px] overflow-hidden\">\n      {fields.map((field, idx) => (\n        <React.Fragment key={idx}>\n          <div className=\"flex items-center gap-1.5 text-muted-foreground text-[13px] font-normal\">\n            <field.icon className=\"w-3.5 h-3.5 shrink-0\" />\n            <span>{field.label}</span>\n          </div>\n          <div className=\"min-w-0 truncate 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-7\">\n      <div className=\"flex items-center justify-between mb-3\">\n        <h3 className=\"text-[12px] font-semibold text-muted-foreground tracking-wide\">{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":[]}
+{"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  ChevronRight,\n} from \"lucide-react\"\nimport { TimelineActivity, type TimelineEvent } from \"./timeline-activity\"\nimport { BRAND_ICONS } from \"../lib/icons\"\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,\n  headerAction,\n  headerSecondaryAction,\n}: {\n  icon?: React.ReactNode\n  title: string\n  badgeLabel?: string\n  subtitle?: string\n  headerAction?: React.ReactNode\n  headerSecondaryAction?: 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=\"mb-3 space-y-2\">\n      <div className=\"flex items-center justify-between\">\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      {(subtitle || headerSecondaryAction) && (\n        <div className=\"flex flex-wrap items-center justify-between gap-x-3 gap-y-2\">\n          {subtitle ? (\n            <p className=\"min-w-0 flex-1 text-xs text-muted-foreground\">{subtitle}</p>\n          ) : (\n            <div className=\"min-w-0 flex-1\" />\n          )}\n          {headerSecondaryAction ? (\n            <div className=\"flex shrink-0 items-center gap-2\">{headerSecondaryAction}</div>\n          ) : null}\n        </div>\n      )}\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 overflow-x-auto\">\n      {tabs.map((tab) => (\n        <button\n          key={tab.id}\n          type=\"button\"\n          onClick={() => onTabChange(tab.id)}\n          className={`whitespace-nowrap shrink-0 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-3 gap-x-4 mb-7 text-[13px] overflow-hidden\">\n      {fields.map((field, idx) => (\n        <React.Fragment key={idx}>\n          <div className=\"flex items-center gap-1.5 text-muted-foreground text-[13px] font-normal\">\n            <field.icon className=\"w-3.5 h-3.5 shrink-0\" />\n            <span>{field.label}</span>\n          </div>\n          <div className=\"min-w-0 truncate 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-7\">\n      <div className=\"flex items-center justify-between mb-3\">\n        <h3 className=\"text-[12px] font-semibold text-muted-foreground tracking-wide\">{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\n// ---------------------------------------------------------------------------\n// RelatedRecordActionCard – clickable card for related records (cases, accounts, etc.)\n// ---------------------------------------------------------------------------\n\n/** Icon can be a ReactNode (e.g. a Lucide icon) or the string \"salesforce\" for the brand logo. */\nexport type RelatedRecordActionIcon = React.ReactNode | \"salesforce\"\n\nexport interface RelatedRecordActionCardProps {\n  kind: string\n  label: string\n  subtitle?: string\n  href?: string\n  external?: boolean\n  icon?: RelatedRecordActionIcon\n  onClick?: () => void\n  disabledReason?: string\n  testId?: string\n}\n\nexport function RelatedRecordActionCard({\n  kind: _kind,\n  label,\n  subtitle,\n  href,\n  external,\n  icon,\n  onClick,\n  disabledReason,\n  testId,\n}: RelatedRecordActionCardProps) {\n  const disabled = !!disabledReason\n\n  const iconNode =\n    icon === \"salesforce\" ? (\n      <img\n        src={BRAND_ICONS.salesforce}\n        alt=\"Salesforce\"\n        className=\"w-4 h-4 object-contain\"\n      />\n    ) : (\n      icon ?? <FileText className=\"h-4 w-4\" aria-hidden=\"true\" />\n    )\n\n  const content = (\n    <>\n      <div className=\"flex items-center gap-2.5 min-w-0\">\n        <div className=\"w-7 h-7 rounded-md border border-border/60 bg-muted/30 flex items-center justify-center shrink-0 text-muted-foreground\">\n          {iconNode}\n        </div>\n        <div className=\"min-w-0\">\n          <p className=\"text-sm font-medium text-foreground leading-snug truncate\">\n            {label}\n          </p>\n          {subtitle && (\n            <p className=\"text-[11px] text-muted-foreground/70 truncate\">\n              {subtitle}\n            </p>\n          )}\n        </div>\n      </div>\n      <div className=\"flex items-center gap-1 shrink-0 text-muted-foreground\">\n        {external && <ExternalLink className=\"w-3 h-3\" />}\n        <ChevronRight className=\"w-3.5 h-3.5\" />\n      </div>\n    </>\n  )\n\n  const baseClassName =\n    \"flex items-center justify-between gap-3 py-2 px-2 -mx-2 rounded-md transition-colors\"\n  const interactiveClassName = disabled\n    ? `${baseClassName} opacity-50 cursor-not-allowed`\n    : `${baseClassName} hover:bg-muted/50 cursor-pointer`\n\n  if (disabled) {\n    return (\n      <div\n        className={interactiveClassName}\n        title={disabledReason}\n        data-testid={testId}\n      >\n        {content}\n      </div>\n    )\n  }\n\n  if (href) {\n    return (\n      <a\n        href={href}\n        target={external ? \"_blank\" : undefined}\n        rel={external ? \"noopener noreferrer\" : undefined}\n        className={interactiveClassName}\n        data-testid={testId}\n      >\n        {content}\n      </a>\n    )\n  }\n\n  return (\n    <button\n      type=\"button\"\n      onClick={onClick}\n      className={`${interactiveClassName} w-full text-left`}\n      data-testid={testId}\n    >\n      {content}\n    </button>\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":[]}

package/dist/index.d.ts

@@ -31,7 +31,7 @@ export { DetailDrawer, DetailDrawerProps } from './components/detail-drawer.js';
 export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger } from './components/dialog.js';
 export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from './components/dropdown-menu.js';
 export { EmptyState, EmptyStateProps } from './components/empty-state.js';
-export { ActivityItem, ConnectedApps, EntityActivityItem, EntityDetails, EntityMetadataField, EntityMetadataGrid, EntityPanel, EntityPanelBrandIcons, EntityPanelHeader, EntityPanelTabs, EntitySection, PanelMode, PotentialContacts, RecentActivity, SystemActivity, useEntityPanel } from './components/entity-panel.js';
+export { ActivityItem, ConnectedApps, EntityActivityItem, EntityDetails, EntityMetadataField, EntityMetadataGrid, EntityPanel, EntityPanelBrandIcons, EntityPanelHeader, EntityPanelTabs, EntitySection, PanelMode, PotentialContacts, RecentActivity, RelatedRecordActionCard, RelatedRecordActionCardProps, RelatedRecordActionIcon, SystemActivity, useEntityPanel } from './components/entity-panel.js';
 export { FeedbackActions, FeedbackActionsProps, FeedbackChipGroup, FeedbackChipGroupProps, FeedbackChipTree, FeedbackFooter, FeedbackFooterProps, FeedbackInput, FeedbackInputProps, FeedbackSubmitData, InlineFeedbackControl, InlineFeedbackControlProps, PersistedFeedbackData } from './components/feedback-primitives.js';
 export { A as AccountFilterTab, a as AccountsViewConfig, b as AdminTab, c as AdminViewConfig, B as BriefStyleVariant, E as EntityPanelConfig, d as EntityPanelSection, I as InboxDetailSections, e as InboxSortOption, f as InboxViewConfig, g as InsightsCustomTab, h as InsightsViewConfig, P as PriorityFactor, i as PrototypeBrandConfig, j as PrototypeConfig, Q as QueueItem, S as SignalPriorityPopover, k as SignalPriorityPopoverProps, l as SignalScoreData, m as SignalScoreExplanationBucket, n as SignalScoreExplanationSignal, o as SignalScoreUrgencyLabel, T as TimelineSystemEventsConfig, W as WorkQueueViewConfig } from './signal-priority-popover-B5b-XZ7i.js';
 export { FilterChip, FilterChipProps } from './components/filter-chip.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@handled-ai/design-system",
-  "version": "0.18.35",
+  "version": "0.18.36",
   "description": "Handled UI component library (shadcn-style, New York)",
   "type": "module",
   "packageManager": "pnpm@9.12.0",

package/src/components/entity-panel.tsx

@@ -21,8 +21,10 @@ import {
   Maximize2,
   Minimize2,
   CalendarDays,
+  ChevronRight,
 } from "lucide-react"
 import { TimelineActivity, type TimelineEvent } from "./timeline-activity"
+import { BRAND_ICONS } from "../lib/icons"
 
 // ---------------------------------------------------------------------------
 // EntityPanel -- supports Sheet (side panel), wide, and fullscreen modes
@@ -778,6 +780,121 @@ export function EntityDetails({ onClose: _onClose }: { onClose?: () => void }) {
 // SourcesToggle – collapsible sources list
 // ---------------------------------------------------------------------------
 
+// ---------------------------------------------------------------------------
+// RelatedRecordActionCard – clickable card for related records (cases, accounts, etc.)
+// ---------------------------------------------------------------------------
+
+/** Icon can be a ReactNode (e.g. a Lucide icon) or the string "salesforce" for the brand logo. */
+export type RelatedRecordActionIcon = React.ReactNode | "salesforce"
+
+export interface RelatedRecordActionCardProps {
+  kind: string
+  label: string
+  subtitle?: string
+  href?: string
+  external?: boolean
+  icon?: RelatedRecordActionIcon
+  onClick?: () => void
+  disabledReason?: string
+  testId?: string
+}
+
+export function RelatedRecordActionCard({
+  kind: _kind,
+  label,
+  subtitle,
+  href,
+  external,
+  icon,
+  onClick,
+  disabledReason,
+  testId,
+}: RelatedRecordActionCardProps) {
+  const disabled = !!disabledReason
+
+  const iconNode =
+    icon === "salesforce" ? (
+      <img
+        src={BRAND_ICONS.salesforce}
+        alt="Salesforce"
+        className="w-4 h-4 object-contain"
+      />
+    ) : (
+      icon ?? <FileText className="h-4 w-4" aria-hidden="true" />
+    )
+
+  const content = (
+    <>
+      <div className="flex items-center gap-2.5 min-w-0">
+        <div className="w-7 h-7 rounded-md border border-border/60 bg-muted/30 flex items-center justify-center shrink-0 text-muted-foreground">
+          {iconNode}
+        </div>
+        <div className="min-w-0">
+          <p className="text-sm font-medium text-foreground leading-snug truncate">
+            {label}
+          </p>
+          {subtitle && (
+            <p className="text-[11px] text-muted-foreground/70 truncate">
+              {subtitle}
+            </p>
+          )}
+        </div>
+      </div>
+      <div className="flex items-center gap-1 shrink-0 text-muted-foreground">
+        {external && <ExternalLink className="w-3 h-3" />}
+        <ChevronRight className="w-3.5 h-3.5" />
+      </div>
+    </>
+  )
+
+  const baseClassName =
+    "flex items-center justify-between gap-3 py-2 px-2 -mx-2 rounded-md transition-colors"
+  const interactiveClassName = disabled
+    ? `${baseClassName} opacity-50 cursor-not-allowed`
+    : `${baseClassName} hover:bg-muted/50 cursor-pointer`
+
+  if (disabled) {
+    return (
+      <div
+        className={interactiveClassName}
+        title={disabledReason}
+        data-testid={testId}
+      >
+        {content}
+      </div>
+    )
+  }
+
+  if (href) {
+    return (
+      <a
+        href={href}
+        target={external ? "_blank" : undefined}
+        rel={external ? "noopener noreferrer" : undefined}
+        className={interactiveClassName}
+        data-testid={testId}
+      >
+        {content}
+      </a>
+    )
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={`${interactiveClassName} w-full text-left`}
+      data-testid={testId}
+    >
+      {content}
+    </button>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// SourcesToggle – collapsible sources list
+// ---------------------------------------------------------------------------
+
 function SourcesToggle() {
   const [expanded, setExpanded] = React.useState(false)