@igstack/app-catalog-frontend-core 0.4.0-alpha-20260807174540 → 0.4.0-alpha-20260807203854

package/dist/esm/modules/appCatalog/ui/components/PersonBadge.d.ts

@@ -1,5 +1,11 @@
 interface PersonBadgeProps {
     slug: string;
 }
+/**
+ * Person chip. Clicking it opens a small popover exposing BOTH the full name
+ * and the email, each with its own copy button — so the user picks what to copy
+ * (previously a single button copied only the email). Email also links to
+ * mailto:. Falls back to just the name (no popover) when no email is known.
+ */
 export declare function PersonBadge({ slug }: PersonBadgeProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/modules/appCatalog/ui/components/PersonBadge.js

@@ -1,7 +1,8 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { User, Check, Copy } from "lucide-react";
+import { User, Copy, Mail, Check } from "lucide-react";
 import { useState, useRef, useEffect, useCallback } from "react";
 import { Badge } from "../../../../ui/badge.js";
+import { Popover, PopoverTrigger, PopoverContent } from "../../../../ui/popover.js";
 import { useAppCatalogContext } from "../../context/AppCatalogContext.js";
 import "../context/AppCatalogFiltersContext.js";
 import "@tanstack/react-router";
@@ -21,48 +22,111 @@ function PersonBadge({ slug }) {
   const person = getPersonBySlug(persons, slug);
   const displayName = person ? `${person.firstName} ${person.lastName}`.trim() || slug : slug;
   const email = person == null ? void 0 : person.email;
-  return /* @__PURE__ */ jsxs(
-    Badge,
-    {
-      variant: "outline",
-      className: "font-normal inline-flex items-center gap-1",
-      title: email ? `${displayName} (${email})` : displayName,
-      children: [
-        /* @__PURE__ */ jsx(User, { className: "size-3" }),
-        displayName,
-        email && /* @__PURE__ */ jsx(CopyEmailButton, { email })
-      ]
-    }
-  );
+  if (!email) {
+    return /* @__PURE__ */ jsxs(
+      Badge,
+      {
+        variant: "outline",
+        className: "font-normal inline-flex items-center gap-1",
+        title: displayName,
+        children: [
+          /* @__PURE__ */ jsx(User, { className: "size-3" }),
+          displayName
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(Popover, { children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "inline-flex",
+        title: `${displayName} · ${email}`,
+        children: /* @__PURE__ */ jsxs(
+          Badge,
+          {
+            variant: "outline",
+            className: "font-normal inline-flex items-center gap-1 cursor-pointer hover:border-primary transition-colors",
+            children: [
+              /* @__PURE__ */ jsx(User, { className: "size-3" }),
+              displayName,
+              /* @__PURE__ */ jsx(Copy, { className: "size-3 opacity-50" })
+            ]
+          }
+        )
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(PopoverContent, { align: "start", className: "w-64 p-2", children: [
+      /* @__PURE__ */ jsx(
+        CopyRow,
+        {
+          icon: /* @__PURE__ */ jsx(User, { className: "size-3.5" }),
+          label: "Name",
+          value: displayName
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        CopyRow,
+        {
+          icon: /* @__PURE__ */ jsx(Mail, { className: "size-3.5" }),
+          label: "Email",
+          value: email,
+          href: `mailto:${email}`
+        }
+      )
+    ] })
+  ] });
 }
-function CopyEmailButton({ email }) {
+function CopyRow({
+  icon,
+  label,
+  value,
+  href
+}) {
   const [copied, setCopied] = useState(false);
   const timeoutRef = useRef(null);
-  useEffect(() => {
-    return () => {
+  useEffect(
+    () => () => {
       if (timeoutRef.current) clearTimeout(timeoutRef.current);
-    };
-  }, []);
+    },
+    []
+  );
   const handleCopy = useCallback(
     (e) => {
       e.stopPropagation();
-      navigator.clipboard.writeText(email);
+      void navigator.clipboard.writeText(value);
       setCopied(true);
       if (timeoutRef.current) clearTimeout(timeoutRef.current);
       timeoutRef.current = setTimeout(() => setCopied(false), 2e3);
     },
-    [email]
-  );
-  return /* @__PURE__ */ jsx(
-    "button",
-    {
-      onClick: handleCopy,
-      className: "ml-0.5 hover:text-primary transition-colors",
-      title: copied ? "Copied!" : `Copy ${email}`,
-      type: "button",
-      children: copied ? /* @__PURE__ */ jsx(Check, { className: "size-3 text-green-600" }) : /* @__PURE__ */ jsx(Copy, { className: "size-3" })
-    }
+    [value]
   );
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 rounded-md px-2 py-1.5 hover:bg-muted", children: [
+    /* @__PURE__ */ jsx("span", { className: "text-muted-foreground shrink-0", children: icon }),
+    /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsx("span", { className: "block text-[10px] uppercase tracking-wide text-muted-foreground", children: label }),
+      href ? /* @__PURE__ */ jsx(
+        "a",
+        {
+          href,
+          className: "block truncate text-[13px] text-primary hover:underline",
+          children: value
+        }
+      ) : /* @__PURE__ */ jsx("span", { className: "block truncate text-[13px]", children: value })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: handleCopy,
+        className: "shrink-0 rounded p-1 text-muted-foreground hover:text-primary hover:bg-background transition-colors",
+        title: copied ? "Copied!" : `Copy ${label.toLowerCase()}`,
+        "aria-label": `Copy ${label.toLowerCase()}`,
+        children: copied ? /* @__PURE__ */ jsx(Check, { className: "size-3.5 text-green-600" }) : /* @__PURE__ */ jsx(Copy, { className: "size-3.5" })
+      }
+    )
+  ] });
 }
 export {
   PersonBadge

package/dist/esm/modules/appCatalog/ui/components/PersonBadge.js.map

@@ -1 +1 @@
-{"version":3,"file":"PersonBadge.js","sources":["../../../../../../src/modules/appCatalog/ui/components/PersonBadge.tsx"],"sourcesContent":["import { Check, Copy, User } from 'lucide-react'\nimport { useCallback, useEffect, useRef, useState } from 'react'\nimport { Badge } from '~/ui/badge'\nimport { useAppCatalogContext } from '~/modules/appCatalog'\nimport { getPersonBySlug } from '~/modules/appCatalog/utils/resolveHelpers'\n\ninterface PersonBadgeProps {\n  slug: string\n}\n\nexport function PersonBadge({ slug }: PersonBadgeProps) {\n  const { persons } = useAppCatalogContext()\n  const person = getPersonBySlug(persons, slug)\n\n  const displayName = person\n    ? `${person.firstName} ${person.lastName}`.trim() || slug\n    : slug\n\n  const email = person?.email\n\n  return (\n    <Badge\n      variant=\"outline\"\n      className=\"font-normal inline-flex items-center gap-1\"\n      title={email ? `${displayName} (${email})` : displayName}\n    >\n      <User className=\"size-3\" />\n      {displayName}\n      {email && <CopyEmailButton email={email} />}\n    </Badge>\n  )\n}\n\nfunction CopyEmailButton({ email }: { email: string }) {\n  const [copied, setCopied] = useState(false)\n  const timeoutRef = useRef<NodeJS.Timeout | null>(null)\n\n  useEffect(() => {\n    return () => {\n      if (timeoutRef.current) clearTimeout(timeoutRef.current)\n    }\n  }, [])\n\n  const handleCopy = useCallback(\n    (e: React.MouseEvent) => {\n      e.stopPropagation()\n      navigator.clipboard.writeText(email)\n      setCopied(true)\n      if (timeoutRef.current) clearTimeout(timeoutRef.current)\n      timeoutRef.current = setTimeout(() => setCopied(false), 2000)\n    },\n    [email],\n  )\n\n  return (\n    <button\n      onClick={handleCopy}\n      className=\"ml-0.5 hover:text-primary transition-colors\"\n      title={copied ? 'Copied!' : `Copy ${email}`}\n      type=\"button\"\n    >\n      {copied ? (\n        <Check className=\"size-3 text-green-600\" />\n      ) : (\n        <Copy className=\"size-3\" />\n      )}\n    </button>\n  )\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAUO,SAAS,YAAY,EAAE,QAA0B;AACtD,QAAM,EAAE,QAAA,IAAY,qBAAA;AACpB,QAAM,SAAS,gBAAgB,SAAS,IAAI;AAE5C,QAAM,cAAc,SAChB,GAAG,OAAO,SAAS,IAAI,OAAO,QAAQ,GAAG,KAAA,KAAU,OACnD;AAEJ,QAAM,QAAQ,iCAAQ;AAEtB,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAQ;AAAA,MACR,WAAU;AAAA,MACV,OAAO,QAAQ,GAAG,WAAW,KAAK,KAAK,MAAM;AAAA,MAE7C,UAAA;AAAA,QAAA,oBAAC,MAAA,EAAK,WAAU,SAAA,CAAS;AAAA,QACxB;AAAA,QACA,SAAS,oBAAC,iBAAA,EAAgB,MAAA,CAAc;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG/C;AAEA,SAAS,gBAAgB,EAAE,SAA4B;AACrD,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AAC1C,QAAM,aAAa,OAA8B,IAAI;AAErD,YAAU,MAAM;AACd,WAAO,MAAM;AACX,UAAI,WAAW,QAAS,cAAa,WAAW,OAAO;AAAA,IACzD;AAAA,EACF,GAAG,CAAA,CAAE;AAEL,QAAM,aAAa;AAAA,IACjB,CAAC,MAAwB;AACvB,QAAE,gBAAA;AACF,gBAAU,UAAU,UAAU,KAAK;AACnC,gBAAU,IAAI;AACd,UAAI,WAAW,QAAS,cAAa,WAAW,OAAO;AACvD,iBAAW,UAAU,WAAW,MAAM,UAAU,KAAK,GAAG,GAAI;AAAA,IAC9D;AAAA,IACA,CAAC,KAAK;AAAA,EAAA;AAGR,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAS;AAAA,MACT,WAAU;AAAA,MACV,OAAO,SAAS,YAAY,QAAQ,KAAK;AAAA,MACzC,MAAK;AAAA,MAEJ,UAAA,6BACE,OAAA,EAAM,WAAU,yBAAwB,IAEzC,oBAAC,MAAA,EAAK,WAAU,SAAA,CAAS;AAAA,IAAA;AAAA,EAAA;AAIjC;"}
+{"version":3,"file":"PersonBadge.js","sources":["../../../../../../src/modules/appCatalog/ui/components/PersonBadge.tsx"],"sourcesContent":["import { Check, Copy, Mail, User } from 'lucide-react'\nimport { useCallback, useEffect, useRef, useState } from 'react'\nimport { Badge } from '~/ui/badge'\nimport { Popover, PopoverContent, PopoverTrigger } from '~/ui/popover'\nimport { useAppCatalogContext } from '~/modules/appCatalog'\nimport { getPersonBySlug } from '~/modules/appCatalog/utils/resolveHelpers'\n\ninterface PersonBadgeProps {\n  slug: string\n}\n\n/**\n * Person chip. Clicking it opens a small popover exposing BOTH the full name\n * and the email, each with its own copy button — so the user picks what to copy\n * (previously a single button copied only the email). Email also links to\n * mailto:. Falls back to just the name (no popover) when no email is known.\n */\nexport function PersonBadge({ slug }: PersonBadgeProps) {\n  const { persons } = useAppCatalogContext()\n  const person = getPersonBySlug(persons, slug)\n\n  const displayName = person\n    ? `${person.firstName} ${person.lastName}`.trim() || slug\n    : slug\n  const email = person?.email\n\n  // No email → nothing to pick between; render a plain, non-interactive chip.\n  if (!email) {\n    return (\n      <Badge\n        variant=\"outline\"\n        className=\"font-normal inline-flex items-center gap-1\"\n        title={displayName}\n      >\n        <User className=\"size-3\" />\n        {displayName}\n      </Badge>\n    )\n  }\n\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <button\n          type=\"button\"\n          className=\"inline-flex\"\n          title={`${displayName} · ${email}`}\n        >\n          <Badge\n            variant=\"outline\"\n            className=\"font-normal inline-flex items-center gap-1 cursor-pointer hover:border-primary transition-colors\"\n          >\n            <User className=\"size-3\" />\n            {displayName}\n            <Copy className=\"size-3 opacity-50\" />\n          </Badge>\n        </button>\n      </PopoverTrigger>\n      <PopoverContent align=\"start\" className=\"w-64 p-2\">\n        <CopyRow\n          icon={<User className=\"size-3.5\" />}\n          label=\"Name\"\n          value={displayName}\n        />\n        <CopyRow\n          icon={<Mail className=\"size-3.5\" />}\n          label=\"Email\"\n          value={email}\n          href={`mailto:${email}`}\n        />\n      </PopoverContent>\n    </Popover>\n  )\n}\n\n/** One copyable field (label + value + copy button), value optionally a link. */\nfunction CopyRow({\n  icon,\n  label,\n  value,\n  href,\n}: {\n  icon: React.ReactNode\n  label: string\n  value: string\n  href?: string\n}) {\n  const [copied, setCopied] = useState(false)\n  const timeoutRef = useRef<NodeJS.Timeout | null>(null)\n\n  useEffect(\n    () => () => {\n      if (timeoutRef.current) clearTimeout(timeoutRef.current)\n    },\n    [],\n  )\n\n  const handleCopy = useCallback(\n    (e: React.MouseEvent) => {\n      e.stopPropagation()\n      void navigator.clipboard.writeText(value)\n      setCopied(true)\n      if (timeoutRef.current) clearTimeout(timeoutRef.current)\n      timeoutRef.current = setTimeout(() => setCopied(false), 2000)\n    },\n    [value],\n  )\n\n  return (\n    <div className=\"flex items-center gap-2 rounded-md px-2 py-1.5 hover:bg-muted\">\n      <span className=\"text-muted-foreground shrink-0\">{icon}</span>\n      <span className=\"min-w-0 flex-1\">\n        <span className=\"block text-[10px] uppercase tracking-wide text-muted-foreground\">\n          {label}\n        </span>\n        {href ? (\n          <a\n            href={href}\n            className=\"block truncate text-[13px] text-primary hover:underline\"\n          >\n            {value}\n          </a>\n        ) : (\n          <span className=\"block truncate text-[13px]\">{value}</span>\n        )}\n      </span>\n      <button\n        type=\"button\"\n        onClick={handleCopy}\n        className=\"shrink-0 rounded p-1 text-muted-foreground hover:text-primary hover:bg-background transition-colors\"\n        title={copied ? 'Copied!' : `Copy ${label.toLowerCase()}`}\n        aria-label={`Copy ${label.toLowerCase()}`}\n      >\n        {copied ? (\n          <Check className=\"size-3.5 text-green-600\" />\n        ) : (\n          <Copy className=\"size-3.5\" />\n        )}\n      </button>\n    </div>\n  )\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/modules/appCatalog/ui/launcher/LauncherDetailPanel.js

@@ -21,7 +21,7 @@ function LauncherDetailPanel({
         role: "dialog",
         "aria-modal": "true",
         "aria-label": `${app.displayName} details`,
-        className: "relative w-full max-w-[760px] my-auto rounded-[var(--radius)] border border-border bg-background shadow-2xl animate-in fade-in zoom-in-95 duration-200",
+        className: "relative w-full max-w-[min(1120px,94vw)] my-auto rounded-[var(--radius)] border border-border bg-background shadow-2xl animate-in fade-in zoom-in-95 duration-200",
         children: /* @__PURE__ */ jsx("div", { className: "max-h-[85vh] overflow-y-auto px-6 py-5 sm:px-8 sm:py-7", children: /* @__PURE__ */ jsx(
           AppDetails,
           {

package/dist/esm/modules/appCatalog/ui/launcher/LauncherDetailPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"LauncherDetailPanel.js","sources":["../../../../../../src/modules/appCatalog/ui/launcher/LauncherDetailPanel.tsx"],"sourcesContent":["import type { Resource } from '@igstack/app-catalog-backend-core'\nimport { AppDetails } from '../grid/AppCatalogGrid'\n\n/**\n * Centered detail card for the launcher (#38, item B). Renders the rich\n * AppDetails (access-hero, sub-resources, tiers) as a large centered modal card\n * over the launcher backdrop, instead of the old grid + resizable split-pane.\n *\n * Escape handling: this component does NOT globally bind Escape. Escape-to-close\n * is owned by AppDetails' own key handling (which first closes an open\n * screenshot gallery, then closes the card), so pressing Esc inside the gallery\n * returns to the card — not all the way to the home page (#38 Esc-stacking bug).\n */\nexport function LauncherDetailPanel({\n  app,\n  onClose,\n  onAppClick,\n}: {\n  app: Resource\n  onClose: () => void\n  onAppClick?: (app: Resource) => void\n}) {\n  return (\n    <div className=\"fixed inset-0 z-50 flex items-start justify-center overflow-y-auto p-4 sm:p-6 md:p-10\">\n      {/* scrim */}\n      <button\n        type=\"button\"\n        aria-label=\"Close details panel\"\n        onClick={onClose}\n        className=\"fixed inset-0 -z-10 bg-black/40 backdrop-blur-[2px] animate-in fade-in\"\n      />\n      {/* centered card */}\n      <div\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-label={`${app.displayName} details`}\n        className=\"relative w-full max-w-[760px] my-auto rounded-[var(--radius)] border border-border bg-background shadow-2xl animate-in fade-in zoom-in-95 duration-200\"\n      >\n        <div className=\"max-h-[85vh] overflow-y-auto px-6 py-5 sm:px-8 sm:py-7\">\n          <AppDetails\n            app={app}\n            onAppClick={onAppClick}\n            onClosePanel={onClose}\n          />\n        </div>\n      </div>\n    </div>\n  )\n}\n"],"names":[],"mappings":";;AAaO,SAAS,oBAAoB;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,SACE,qBAAC,OAAA,EAAI,WAAU,yFAEb,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,cAAW;AAAA,QACX,SAAS;AAAA,QACT,WAAU;AAAA,MAAA;AAAA,IAAA;AAAA,IAGZ;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,cAAW;AAAA,QACX,cAAY,GAAG,IAAI,WAAW;AAAA,QAC9B,WAAU;AAAA,QAEV,UAAA,oBAAC,OAAA,EAAI,WAAU,0DACb,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA,cAAc;AAAA,UAAA;AAAA,QAAA,EAChB,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;"}
+{"version":3,"file":"LauncherDetailPanel.js","sources":["../../../../../../src/modules/appCatalog/ui/launcher/LauncherDetailPanel.tsx"],"sourcesContent":["import type { Resource } from '@igstack/app-catalog-backend-core'\nimport { AppDetails } from '../grid/AppCatalogGrid'\n\n/**\n * Centered detail card for the launcher (#38, item B). Renders the rich\n * AppDetails (access-hero, sub-resources, tiers) as a large centered modal card\n * over the launcher backdrop, instead of the old grid + resizable split-pane.\n *\n * Escape handling: this component does NOT globally bind Escape. Escape-to-close\n * is owned by AppDetails' own key handling (which first closes an open\n * screenshot gallery, then closes the card), so pressing Esc inside the gallery\n * returns to the card — not all the way to the home page (#38 Esc-stacking bug).\n */\nexport function LauncherDetailPanel({\n  app,\n  onClose,\n  onAppClick,\n}: {\n  app: Resource\n  onClose: () => void\n  onAppClick?: (app: Resource) => void\n}) {\n  return (\n    <div className=\"fixed inset-0 z-50 flex items-start justify-center overflow-y-auto p-4 sm:p-6 md:p-10\">\n      {/* scrim */}\n      <button\n        type=\"button\"\n        aria-label=\"Close details panel\"\n        onClick={onClose}\n        className=\"fixed inset-0 -z-10 bg-black/40 backdrop-blur-[2px] animate-in fade-in\"\n      />\n      {/* centered card — wide enough for data tables (sub-resources have 5\n          columns incl. \"Access Contacts\"/\"AWS Account\" that wrapped at 760px);\n          prose inside AppDetails is width-capped separately so it stays\n          readable. Caps at 94vw so it never touches the edges. */}\n      <div\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-label={`${app.displayName} details`}\n        className=\"relative w-full max-w-[min(1120px,94vw)] my-auto rounded-[var(--radius)] border border-border bg-background shadow-2xl animate-in fade-in zoom-in-95 duration-200\"\n      >\n        <div className=\"max-h-[85vh] overflow-y-auto px-6 py-5 sm:px-8 sm:py-7\">\n          <AppDetails\n            app={app}\n            onAppClick={onAppClick}\n            onClosePanel={onClose}\n          />\n        </div>\n      </div>\n    </div>\n  )\n}\n"],"names":[],"mappings":";;AAaO,SAAS,oBAAoB;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,SACE,qBAAC,OAAA,EAAI,WAAU,yFAEb,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,cAAW;AAAA,QACX,SAAS;AAAA,QACT,WAAU;AAAA,MAAA;AAAA,IAAA;AAAA,IAMZ;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,cAAW;AAAA,QACX,cAAY,GAAG,IAAI,WAAW;AAAA,QAC9B,WAAU;AAAA,QAEV,UAAA,oBAAC,OAAA,EAAI,WAAU,0DACb,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA,cAAc;AAAA,UAAA;AAAA,QAAA,EAChB,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@igstack/app-catalog-frontend-core",
-  "version": "0.4.0-alpha-20260807174540",
+  "version": "0.4.0-alpha-20260807203854",
   "description": "Frontend core library for App Catalog",
   "homepage": "https://github.com/lislon/app-catalog",
   "repository": {
@@ -134,8 +134,8 @@
     "vite-plugin-static-copy": "^3.1.4",
     "vite-plugin-svgr": "^4.2.0",
     "vitest": "^4.1.2",
-    "@igstack/app-catalog-backend-core": "0.4.0-alpha-20260807174540",
-    "@igstack/app-catalog-shared-core": "0.4.0-alpha-20260807174540"
+    "@igstack/app-catalog-backend-core": "0.4.0-alpha-20260807203854",
+    "@igstack/app-catalog-shared-core": "0.4.0-alpha-20260807203854"
   },
   "peerDependencies": {
     "react": "19.1.2",
@@ -144,7 +144,7 @@
     "vite": "^6.3.5",
     "vite-plugin-svgr": "^4.2.0"
   },
-  "gitHead": "0a22262337b8737dc77c7d298a093f6e8ab11f22",
+  "gitHead": "0a15e91dad60cc02ed4998f363c812832fa6e74a",
   "scripts": {
     "build": "vite build",
     "build:lenient": "vite build --mode lenient",

package/src/modules/appCatalog/ui/components/PersonBadge.tsx

@@ -1,6 +1,7 @@
-import { Check, Copy, User } from 'lucide-react'
+import { Check, Copy, Mail, User } from 'lucide-react'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { Badge } from '~/ui/badge'
+import { Popover, PopoverContent, PopoverTrigger } from '~/ui/popover'
 import { useAppCatalogContext } from '~/modules/appCatalog'
 import { getPersonBySlug } from '~/modules/appCatalog/utils/resolveHelpers'
 
@@ -8,6 +9,12 @@ interface PersonBadgeProps {
   slug: string
 }
 
+/**
+ * Person chip. Clicking it opens a small popover exposing BOTH the full name
+ * and the email, each with its own copy button — so the user picks what to copy
+ * (previously a single button copied only the email). Email also links to
+ * mailto:. Falls back to just the name (no popover) when no email is known.
+ */
 export function PersonBadge({ slug }: PersonBadgeProps) {
   const { persons } = useAppCatalogContext()
   const person = getPersonBySlug(persons, slug)
@@ -15,55 +22,121 @@ export function PersonBadge({ slug }: PersonBadgeProps) {
   const displayName = person
     ? `${person.firstName} ${person.lastName}`.trim() || slug
     : slug
-
   const email = person?.email
 
+  // No email → nothing to pick between; render a plain, non-interactive chip.
+  if (!email) {
+    return (
+      <Badge
+        variant="outline"
+        className="font-normal inline-flex items-center gap-1"
+        title={displayName}
+      >
+        <User className="size-3" />
+        {displayName}
+      </Badge>
+    )
+  }
+
   return (
-    <Badge
-      variant="outline"
-      className="font-normal inline-flex items-center gap-1"
-      title={email ? `${displayName} (${email})` : displayName}
-    >
-      <User className="size-3" />
-      {displayName}
-      {email && <CopyEmailButton email={email} />}
-    </Badge>
+    <Popover>
+      <PopoverTrigger asChild>
+        <button
+          type="button"
+          className="inline-flex"
+          title={`${displayName} · ${email}`}
+        >
+          <Badge
+            variant="outline"
+            className="font-normal inline-flex items-center gap-1 cursor-pointer hover:border-primary transition-colors"
+          >
+            <User className="size-3" />
+            {displayName}
+            <Copy className="size-3 opacity-50" />
+          </Badge>
+        </button>
+      </PopoverTrigger>
+      <PopoverContent align="start" className="w-64 p-2">
+        <CopyRow
+          icon={<User className="size-3.5" />}
+          label="Name"
+          value={displayName}
+        />
+        <CopyRow
+          icon={<Mail className="size-3.5" />}
+          label="Email"
+          value={email}
+          href={`mailto:${email}`}
+        />
+      </PopoverContent>
+    </Popover>
   )
 }
 
-function CopyEmailButton({ email }: { email: string }) {
+/** One copyable field (label + value + copy button), value optionally a link. */
+function CopyRow({
+  icon,
+  label,
+  value,
+  href,
+}: {
+  icon: React.ReactNode
+  label: string
+  value: string
+  href?: string
+}) {
   const [copied, setCopied] = useState(false)
   const timeoutRef = useRef<NodeJS.Timeout | null>(null)
 
-  useEffect(() => {
-    return () => {
+  useEffect(
+    () => () => {
       if (timeoutRef.current) clearTimeout(timeoutRef.current)
-    }
-  }, [])
+    },
+    [],
+  )
 
   const handleCopy = useCallback(
     (e: React.MouseEvent) => {
       e.stopPropagation()
-      navigator.clipboard.writeText(email)
+      void navigator.clipboard.writeText(value)
       setCopied(true)
       if (timeoutRef.current) clearTimeout(timeoutRef.current)
       timeoutRef.current = setTimeout(() => setCopied(false), 2000)
     },
-    [email],
+    [value],
   )
 
   return (
-    <button
-      onClick={handleCopy}
-      className="ml-0.5 hover:text-primary transition-colors"
-      title={copied ? 'Copied!' : `Copy ${email}`}
-      type="button"
-    >
-      {copied ? (
-        <Check className="size-3 text-green-600" />
-      ) : (
-        <Copy className="size-3" />
-      )}
-    </button>
+    <div className="flex items-center gap-2 rounded-md px-2 py-1.5 hover:bg-muted">
+      <span className="text-muted-foreground shrink-0">{icon}</span>
+      <span className="min-w-0 flex-1">
+        <span className="block text-[10px] uppercase tracking-wide text-muted-foreground">
+          {label}
+        </span>
+        {href ? (
+          <a
+            href={href}
+            className="block truncate text-[13px] text-primary hover:underline"
+          >
+            {value}
+          </a>
+        ) : (
+          <span className="block truncate text-[13px]">{value}</span>
+        )}
+      </span>
+      <button
+        type="button"
+        onClick={handleCopy}
+        className="shrink-0 rounded p-1 text-muted-foreground hover:text-primary hover:bg-background transition-colors"
+        title={copied ? 'Copied!' : `Copy ${label.toLowerCase()}`}
+        aria-label={`Copy ${label.toLowerCase()}`}
+      >
+        {copied ? (
+          <Check className="size-3.5 text-green-600" />
+        ) : (
+          <Copy className="size-3.5" />
+        )}
+      </button>
+    </div>
   )
 }

package/src/modules/appCatalog/ui/launcher/LauncherDetailPanel.tsx

@@ -29,12 +29,15 @@ export function LauncherDetailPanel({
         onClick={onClose}
         className="fixed inset-0 -z-10 bg-black/40 backdrop-blur-[2px] animate-in fade-in"
       />
-      {/* centered card */}
+      {/* centered card — wide enough for data tables (sub-resources have 5
+          columns incl. "Access Contacts"/"AWS Account" that wrapped at 760px);
+          prose inside AppDetails is width-capped separately so it stays
+          readable. Caps at 94vw so it never touches the edges. */}
       <div
         role="dialog"
         aria-modal="true"
         aria-label={`${app.displayName} details`}
-        className="relative w-full max-w-[760px] my-auto rounded-[var(--radius)] border border-border bg-background shadow-2xl animate-in fade-in zoom-in-95 duration-200"
+        className="relative w-full max-w-[min(1120px,94vw)] my-auto rounded-[var(--radius)] border border-border bg-background shadow-2xl animate-in fade-in zoom-in-95 duration-200"
       >
         <div className="max-h-[85vh] overflow-y-auto px-6 py-5 sm:px-8 sm:py-7">
           <AppDetails