@igstack/app-catalog-frontend-core 6.3.1-alpha-20261003051755 → 6.5.0

package/dist/esm/modules/appCatalog/ui/detail/AppDetails.js

@@ -1,14 +1,14 @@
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { ExternalLink, CalendarPlus, Clock, Trash2, Plus, AppWindow } from "lucide-react";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useSearch } from "@tanstack/react-router";
+import { ExternalLink, Trash2, Plus, CalendarPlus, Clock } from "lucide-react";
 import React__default from "react";
 import { useHotkeys } from "react-hotkeys-hook";
-import { cn } from "../../../../lib/utils.js";
 import { Badge } from "../../../../ui/badge.js";
 import { Button } from "../../../../ui/button.js";
 import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "../../../../ui/accordion.js";
 import { AccessRequestSection } from "../components/AccessRequestSection.js";
 import { AccessPrerequisiteChain } from "../components/AccessPrerequisiteChain.js";
-import { LEAP, QUIET_FILL, LEAVE_FILL, hasQuickJumps, QuickJumpBar } from "../components/QuickJumpBar.js";
+import { hasQuickJumps, QuickJumpBar } from "../components/QuickJumpBar.js";
 import { useAppCatalogFilters } from "../context/AppCatalogFiltersContext.js";
 import { PersonBadge } from "../components/PersonBadge.js";
 import { useUser } from "../../../auth/AuthContext.js";
@@ -25,34 +25,29 @@ import { formatRelativeTime } from "../../utils/formatRelativeTime.js";
 import { TierVariantsSection } from "../components/TierVariantsSection.js";
 import { SubResourcesSection } from "../components/SubResourcesSection.js";
 import { getChildResources } from "../../utils/resolveHelpers.js";
-import { CommentsSection } from "./CommentsSection.js";
+import { FeedbackSection } from "./FeedbackSection.js";
 import { displayUrl } from "../../utils/displayUrl.js";
-function getIconUrl(iconName) {
-  return `/api/icons/${iconName}`;
-}
-function AppIcon({ app, className }) {
-  const [imageError, setImageError] = React__default.useState(false);
-  if (app.iconName && !imageError) {
-    return /* @__PURE__ */ jsx("div", { className: cn("size-12 shrink-0", className), children: /* @__PURE__ */ jsx(
-      "img",
-      {
-        src: getIconUrl(app.iconName),
-        alt: `${app.abbreviation || app.displayName} icon`,
-        className: "size-12 rounded-lg object-contain",
-        onError: () => setImageError(true)
-      }
-    ) });
-  }
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cn(
-        "flex items-center justify-center rounded-lg bg-primary/10 text-primary size-12 shrink-0",
-        className
-      ),
-      children: /* @__PURE__ */ jsx(AppWindow, { className: "size-6" })
-    }
-  );
+import { accessTabLabel } from "../../utils/accessTabLabel.js";
+import { AppDoor } from "./AppDoor.js";
+import { DetailTabs } from "./DetailTabs.js";
+const TAB = {
+  overview: "overview",
+  access: "access",
+  resources: "resources",
+  documentation: "documentation",
+  notes: "notes"
+};
+function Section({
+  title,
+  hint,
+  first,
+  children
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: first ? "" : "mt-7", children: [
+    /* @__PURE__ */ jsx("h3", { className: "section-label mb-1.5", children: title }),
+    hint && /* @__PURE__ */ jsx("p", { className: "mb-2 text-xs text-muted-foreground", children: hint }),
+    children
+  ] });
 }
 function AppScreenshot({ app }) {
   var _a;
@@ -80,39 +75,24 @@ function AppScreenshot({ app }) {
     (imageError || isLoadingImage) && /* @__PURE__ */ jsx("div", { className: "w-full h-64 bg-muted/30 flex items-center justify-center text-muted-foreground text-sm", children: isLoadingImage ? "Loading screenshot..." : "No screenshot available" })
   ] }) });
 }
-function TiersAndSubResourcesPanel({ app }) {
-  const { resources } = useAppCatalogContext();
-  const { state: filterState } = useAppCatalogFilters();
-  const appSubResources = React__default.useMemo(
-    () => getChildResources(resources, app.slug),
-    [resources, app.slug]
-  );
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    app.tiers && app.tiers.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-6", children: /* @__PURE__ */ jsx(TierVariantsSection, { tiers: app.tiers }) }),
-    appSubResources.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-6", children: /* @__PURE__ */ jsx(
-      SubResourcesSection,
-      {
-        subResources: appSubResources,
-        parentSlug: app.slug,
-        initialSearch: filterState.searchValue
-      }
-    ) })
-  ] });
-}
 function AppDetails({
   app,
   onAppClick,
   onClosePanel
 }) {
-  var _a, _b, _c, _d;
+  var _a, _b, _c;
   const [isGalleryOpen, setIsGalleryOpen] = React__default.useState(false);
   const [galleryInitialIndex, setGalleryInitialIndex] = React__default.useState(0);
+  const [composeRequests, setComposeRequests] = React__default.useState(0);
   const { approvalMethods, resources: allResources } = useAppCatalogContext();
   const { recordClick } = useAppClickHistory();
   const updateApp = useUpdateApp();
   const [draftSource, setDraftSource] = React__default.useState(null);
   const user = useUser();
   const isAdmin = (user == null ? void 0 : user.isAdmin) ?? false;
+  const { state: filterState } = useAppCatalogFilters();
+  const search = useSearch({ strict: false });
+  const subSlug = search.sub;
   const displayTags = (app.tags ?? []).filter((tag) => !tag.includes(":"));
   const sourceUrls = ((_a = app.sources) == null ? void 0 : _a.map((s) => typeof s === "string" ? s : s.url)) ?? [];
   const displaySources = draftSource !== null ? [...sourceUrls, draftSource] : sourceUrls;
@@ -125,6 +105,10 @@ function AppDetails({
     }
     return byUrl;
   }, [app.sources]);
+  const children = React__default.useMemo(
+    () => getChildResources(allResources, app.slug),
+    [allResources, app.slug]
+  );
   useHotkeys(
     "enter",
     () => {
@@ -156,122 +140,15 @@ function AppDetails({
     var _a2;
     return a.slug === ((_a2 = app.deprecated) == null ? void 0 : _a2.replacementSlug);
   }) : null;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col p-6", children: [
-      /* @__PURE__ */ jsx("div", { className: "-order-2 border-b pb-6", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-        /* @__PURE__ */ jsx(AppIcon, { app, className: "size-16" }),
-        /* @__PURE__ */ jsxs("div", { className: "-mx-3 flex-1 min-w-0", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-3", children: [
-            /* @__PURE__ */ jsx("div", { className: "font-serif text-2xl font-semibold min-w-0", children: app.abbreviation ? `${app.displayName} (${app.abbreviation})` : app.displayName }),
-            app.deprecated && /* @__PURE__ */ jsx(
-              Badge,
-              {
-                variant: app.deprecated.type === "discouraged" ? "secondary" : "destructive",
-                children: app.deprecated.type === "discouraged" ? "Discouraged" : "Deprecated"
-              }
-            )
-          ] }),
-          isAdmin && /* @__PURE__ */ jsxs("div", { className: "mt-1 px-3", children: [
-            /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground mr-2", children: "Slug:" }),
-            /* @__PURE__ */ jsx(
-              InlineEditableField,
-              {
-                value: app.slug,
-                onSave: (slug) => updateApp.mutate({ id: app.id, data: { slug } }),
-                className: "text-sm"
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "mt-3 flex flex-wrap items-stretch gap-3 px-3", children: [
-            isAdmin ? /* @__PURE__ */ jsx(
-              InlineEditableField,
-              {
-                value: app.appUrl ?? "",
-                onSave: (appUrl) => updateApp.mutate({ id: app.id, data: { appUrl } }),
-                placeholder: "App URL",
-                renderView: (url) => url ? /* @__PURE__ */ jsxs(
-                  "a",
-                  {
-                    href: url,
-                    target: "_blank",
-                    rel: "noopener noreferrer",
-                    onClick: () => recordClick(app.slug),
-                    className: "inline-flex items-center gap-1 rounded-md py-1 text-sm text-blue-600 hover:bg-accent/30 hover:underline dark:text-blue-400 transition-all",
-                    children: [
-                      displayUrl(url),
-                      /* @__PURE__ */ jsx(ExternalLink, { className: "size-3.5 shrink-0 opacity-40 group-hover:opacity-100 transition-opacity" })
-                    ]
-                  }
-                ) : /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "—" })
-              }
-            ) : app.appUrl ? /* @__PURE__ */ jsxs(
-              "a",
-              {
-                href: app.appUrl,
-                target: "_blank",
-                rel: "noopener noreferrer",
-                onClick: () => recordClick(app.slug),
-                className: cn(
-                  // The row's one inset and icon gap, and its height stated
-                  // rather than left to the taller neighbour.
-                  "inline-flex min-h-[34px] items-center gap-1.5 rounded-md px-3 text-sm font-medium shadow-sm",
-                  // Only ever ONE solid brand fill in this row: it goes to
-                  // Quick Jump's submit when there is one, because that is
-                  // the control that acts on something the user typed.
-                  hasQuickJumps(app) ? QUIET_FILL : LEAVE_FILL,
-                  LEAP
-                ),
-                title: displayUrl(app.appUrl),
-                "aria-label": `Open ${app.displayName} in a new tab (${displayUrl(app.appUrl)})`,
-                children: [
-                  /* @__PURE__ */ jsxs("span", { className: "max-w-[280px] truncate whitespace-nowrap", children: [
-                    "Go to ",
-                    displayUrl(app.appUrl)
-                  ] }),
-                  /* @__PURE__ */ jsx(ExternalLink, { className: "size-3.5 shrink-0" })
-                ]
-              }
-            ) : /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "—" }),
-            /* @__PURE__ */ jsx(QuickJumpBar, { app })
-          ] })
-        ] })
-      ] }) }),
-      app.deprecated && (() => {
-        const deprecationType = app.deprecated.type || "deprecated";
-        const isDiscouraged = deprecationType === "discouraged";
-        return /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: isDiscouraged ? "mt-6 p-4 border border-yellow-500/50 rounded-lg bg-yellow-50 dark:bg-yellow-950/20" : "mt-6 p-4 border border-destructive/50 rounded-lg bg-destructive/10",
-            children: [
-              /* @__PURE__ */ jsx(
-                "h3",
-                {
-                  className: isDiscouraged ? "text-sm font-semibold text-yellow-700 dark:text-yellow-500 mb-2" : "text-sm font-semibold text-destructive mb-2",
-                  children: isDiscouraged ? "Usage discouraged" : "This application is deprecated"
-                }
-              ),
-              /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mb-3", children: app.deprecated.comment }),
-              replacementApp && /* @__PURE__ */ jsxs(
-                "button",
-                {
-                  type: "button",
-                  onClick: () => onAppClick == null ? void 0 : onAppClick(replacementApp),
-                  className: "text-sm font-medium text-primary hover:underline inline-flex items-center gap-1",
-                  children: [
-                    "View replacement: ",
-                    replacementApp.displayName,
-                    /* @__PURE__ */ jsx(ExternalLink, { className: "size-3" })
-                  ]
-                }
-              )
-            ]
-          }
-        );
-      })(),
-      /* @__PURE__ */ jsxs("div", { className: "mt-6", children: [
-        /* @__PURE__ */ jsx("h3", { className: "mb-2 text-sm font-medium", children: "Description" }),
-        isAdmin ? /* @__PURE__ */ jsx(
+  const access = accessTabLabel(app, approvalMethods);
+  const hasResourcesTab = children.length > 0 || (((_c = app.tiers) == null ? void 0 : _c.length) ?? 0) > 0;
+  const resourcesLabel = children.length ? app.childrenLabel ?? "Resources" : "Environments";
+  const tabs = [
+    {
+      id: TAB.overview,
+      label: "Overview",
+      render: () => /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Section, { title: "Description", first: true, children: isAdmin ? /* @__PURE__ */ jsx(
           InlineEditableField,
           {
             value: app.description ?? "",
@@ -280,17 +157,8 @@ function AppDetails({
             placeholder: "Description",
             className: "min-h-[4rem] resize-y text-sm text-muted-foreground"
           }
-        ) : app.description ? /* @__PURE__ */ jsx(MarkdownText, { className: "prose prose-sm max-w-none text-sm text-muted-foreground [&_p]:m-0", children: app.description }) : /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "—" })
-      ] }),
-      /* @__PURE__ */ jsx(AccessPrerequisiteChain, { resource: app, onOpenParent: onAppClick }),
-      /* @__PURE__ */ jsx(AccessRequestSection, { app, approvalMethods }),
-      app.screenshotIds && app.screenshotIds.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mt-6", children: [
-        /* @__PURE__ */ jsxs("h3", { className: "mb-2 text-sm font-medium", children: [
-          "Screenshots (",
-          app.screenshotIds.length,
-          ")"
-        ] }),
-        /* @__PURE__ */ jsxs(
+        ) : app.description ? /* @__PURE__ */ jsx(MarkdownText, { className: "prose prose-sm max-w-none text-sm text-muted-foreground [&_p]:m-0", children: app.description }) : /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "—" }) }),
+        app.screenshotIds && app.screenshotIds.length > 0 && /* @__PURE__ */ jsx(Section, { title: `Screenshots (${app.screenshotIds.length})`, children: /* @__PURE__ */ jsxs(
           "button",
           {
             type: "button",
@@ -306,102 +174,167 @@ function AppDetails({
               ] })
             ]
           }
-        )
-      ] }),
-      app.ownerPersonSlug && /* @__PURE__ */ jsxs("div", { className: "mt-6", children: [
-        /* @__PURE__ */ jsx("h3", { className: "mb-1 text-sm font-medium", children: "Owner" }),
-        /* @__PURE__ */ jsx("p", { className: "mb-2 text-xs text-muted-foreground", children: "Who is responsible for this resource" }),
-        /* @__PURE__ */ jsx(PersonBadge, { slug: app.ownerPersonSlug })
-      ] }),
-      /* @__PURE__ */ jsx(TiersAndSubResourcesPanel, { app }),
-      app.links && app.links.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mt-4", children: [
-        /* @__PURE__ */ jsx("h3", { className: "mb-1 text-xs font-medium text-muted-foreground", children: "Links" }),
-        /* @__PURE__ */ jsx("div", { className: "space-y-0.5", children: app.links.map((link) => /* @__PURE__ */ jsxs(
-          "a",
-          {
-            href: link.url,
-            target: "_blank",
-            rel: "noopener noreferrer",
-            className: "flex items-center gap-1 text-xs text-muted-foreground hover:text-primary truncate",
-            children: [
-              /* @__PURE__ */ jsx(ExternalLink, { className: "size-3 shrink-0" }),
-              link.title || displayUrl(link.url)
-            ]
-          },
-          link.url
-        )) })
-      ] }),
-      displayTags.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mt-6", children: [
-        /* @__PURE__ */ jsx("h3", { className: "mb-2 text-sm font-medium", children: "Tags" }),
-        /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: displayTags.map((tag) => /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "text-xs", children: tag }, tag)) })
-      ] }),
-      app.teams && app.teams.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mt-6", children: [
-        /* @__PURE__ */ jsx("h3", { className: "mb-2 text-sm font-medium", children: "Teams" }),
-        /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: app.teams.map((team) => /* @__PURE__ */ jsx(Badge, { variant: "outline", className: "text-xs", children: team }, team)) })
-      ] }),
-      app.background && /* @__PURE__ */ jsxs("div", { className: "mt-6", children: [
-        /* @__PURE__ */ jsx("h3", { className: "text-muted-foreground mb-2 text-xs font-medium", children: "Background" }),
-        /* @__PURE__ */ jsx(MarkdownText, { className: "prose prose-sm text-muted-foreground max-w-none text-sm [&_p]:mt-0 [&_p]:mb-2 [&_p:last-child]:mb-0", children: app.background })
-      ] }),
-      (app.aiPrompt || app.aiMemory) && /* @__PURE__ */ jsx(Accordion, { type: "single", collapsible: true, className: "mt-6", children: /* @__PURE__ */ jsxs(
-        AccordionItem,
-        {
-          value: "technical-info",
-          className: "border rounded-lg px-4",
-          children: [
-            /* @__PURE__ */ jsx(AccordionTrigger, { className: "text-sm hover:no-underline py-3", children: "Technical information" }),
-            /* @__PURE__ */ jsxs(AccordionContent, { className: "pb-3 space-y-3", children: [
-              app.aiPrompt && /* @__PURE__ */ jsxs("div", { children: [
-                /* @__PURE__ */ jsx("h4", { className: "mb-1 text-xs font-medium text-muted-foreground", children: "AI Prompt" }),
-                /* @__PURE__ */ jsx("p", { className: "text-xs whitespace-pre-wrap", children: app.aiPrompt })
-              ] }),
-              app.aiMemory && /* @__PURE__ */ jsxs("div", { children: [
-                /* @__PURE__ */ jsx("h4", { className: "mb-1 text-xs font-medium text-muted-foreground", children: "AI Memory" }),
-                /* @__PURE__ */ jsx("p", { className: "text-xs whitespace-pre-wrap", children: app.aiMemory })
-              ] })
-            ] })
-          ]
+        ) }),
+        app.ownerPersonSlug && /* @__PURE__ */ jsx(Section, { title: "Owner", hint: "Who is responsible for this resource", children: /* @__PURE__ */ jsx(PersonBadge, { slug: app.ownerPersonSlug }) }),
+        displayTags.length > 0 && /* @__PURE__ */ jsx(Section, { title: "Tags", children: /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: displayTags.map((tag) => /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "text-xs", children: tag }, tag)) }) }),
+        app.teams && app.teams.length > 0 && /* @__PURE__ */ jsx(Section, { title: "Teams", children: /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: app.teams.map((team) => /* @__PURE__ */ jsx(Badge, { variant: "outline", className: "text-xs", children: team }, team)) }) })
+      ] })
+    },
+    {
+      id: TAB.access,
+      label: `Access — ${access.route}`,
+      chip: access.chip,
+      render: () => /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(AccessPrerequisiteChain, { resource: app, onOpenParent: onAppClick }),
+        /* @__PURE__ */ jsx(AccessRequestSection, { app, approvalMethods })
+      ] })
+    },
+    ...hasResourcesTab ? [
+      {
+        id: TAB.resources,
+        label: resourcesLabel,
+        chip: children.length ? String(children.length) : void 0,
+        render: () => {
+          var _a2;
+          return /* @__PURE__ */ jsxs(Fragment, { children: [
+            app.tiers && app.tiers.length > 0 && /* @__PURE__ */ jsx(TierVariantsSection, { tiers: app.tiers }),
+            children.length > 0 && /* @__PURE__ */ jsx("div", { className: ((_a2 = app.tiers) == null ? void 0 : _a2.length) ? "mt-7" : "", children: /* @__PURE__ */ jsx(
+              SubResourcesSection,
+              {
+                subResources: children,
+                parentSlug: app.slug,
+                initialSearch: filterState.searchValue
+              }
+            ) })
+          ] });
         }
-      ) }),
-      (app.createdAt || ((_c = app.freshness) == null ? void 0 : _c.lastCheckedAt)) && /* @__PURE__ */ jsxs("div", { className: "mt-6 flex flex-wrap gap-x-5 gap-y-1", children: [
-        app.createdAt && /* @__PURE__ */ jsxs(
-          "span",
-          {
-            className: "inline-flex items-center gap-1 text-xs text-muted-foreground",
-            title: app.createdAt,
-            children: [
-              /* @__PURE__ */ jsx(CalendarPlus, { className: "size-3" }),
-              "Added ",
-              formatRelativeTime(app.createdAt)
-            ]
-          }
-        ),
-        ((_d = app.freshness) == null ? void 0 : _d.lastCheckedAt) && /* @__PURE__ */ jsxs(
-          "span",
-          {
-            className: "inline-flex items-center gap-1 text-xs text-muted-foreground",
-            title: app.freshness.lastContentChangeAt ? `Content last changed ${app.freshness.lastContentChangeAt} · last checked ${app.freshness.lastCheckedAt}` : `Last checked ${app.freshness.lastCheckedAt}`,
-            children: [
-              /* @__PURE__ */ jsx(Clock, { className: "size-3" }),
-              "Updated",
-              " ",
-              formatRelativeTime(
-                app.freshness.lastContentChangeAt ?? app.freshness.lastCheckedAt
-              ),
-              app.freshness.isStale && /* @__PURE__ */ jsxs("span", { className: "italic opacity-75", children: [
-                " ",
-                "· may be out of date"
-              ] })
-            ]
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "mt-6", children: [
-        /* @__PURE__ */ jsx("h3", { className: "mb-2 text-sm font-medium", children: "Sources" }),
-        isAdmin ? /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx("ul", { className: "space-y-2", children: displaySources.map((url, index) => {
-            const isDraft = draftSource !== null && index === sourceUrls.length;
-            return /* @__PURE__ */ jsxs(
+      }
+    ] : [],
+    {
+      id: TAB.documentation,
+      label: "Documentation",
+      render: () => {
+        var _a2, _b2;
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          app.links && app.links.length > 0 && /* @__PURE__ */ jsx(Section, { title: "Documentation", first: true, children: /* @__PURE__ */ jsx("div", { className: "space-y-0.5", children: app.links.map((link) => /* @__PURE__ */ jsxs(
+            "a",
+            {
+              href: link.url,
+              target: "_blank",
+              rel: "noopener noreferrer",
+              className: "flex items-center gap-1 text-xs text-muted-foreground hover:text-primary truncate",
+              children: [
+                /* @__PURE__ */ jsx(ExternalLink, { className: "size-3 shrink-0" }),
+                link.title || displayUrl(link.url)
+              ]
+            },
+            link.url
+          )) }) }),
+          app.background && /* @__PURE__ */ jsx(Section, { title: "Background", children: /* @__PURE__ */ jsx(MarkdownText, { className: "prose prose-sm text-muted-foreground max-w-none text-sm [&_p]:mt-0 [&_p]:mb-2 [&_p:last-child]:mb-0", children: app.background }) }),
+          /* @__PURE__ */ jsx(Section, { title: "Sources", first: !app.background, children: isAdmin ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("ul", { className: "space-y-2", children: displaySources.map((url, index) => {
+              const isDraft = draftSource !== null && index === sourceUrls.length;
+              return /* @__PURE__ */ jsxs(
+                "li",
+                {
+                  className: "group flex items-center gap-2 text-xs",
+                  children: [
+                    /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground shrink-0 tabular-nums", children: [
+                      index + 1,
+                      "."
+                    ] }),
+                    /* @__PURE__ */ jsx(
+                      InlineEditableField,
+                      {
+                        value: url,
+                        initialEditMode: isDraft,
+                        onCancel: isDraft ? () => setDraftSource(null) : void 0,
+                        onSave: (newUrl) => {
+                          if (isDraft) {
+                            setDraftSource(null);
+                            if (newUrl) {
+                              updateApp.mutate({
+                                id: app.id,
+                                data: { sources: [...sourceUrls, newUrl] }
+                              });
+                            }
+                          } else {
+                            const next = [...sourceUrls];
+                            next[index] = newUrl;
+                            updateApp.mutate({
+                              id: app.id,
+                              data: { sources: next.filter(Boolean) }
+                            });
+                          }
+                        },
+                        placeholder: "https://...",
+                        viewClassName: "flex-1 min-w-0",
+                        renderView: (val) => val ? /* @__PURE__ */ jsxs(
+                          "a",
+                          {
+                            href: val,
+                            target: "_blank",
+                            rel: "noopener noreferrer",
+                            className: "hover:text-primary inline-flex items-center gap-1 truncate",
+                            children: [
+                              displayUrl(val),
+                              /* @__PURE__ */ jsx(ExternalLink, { className: "size-3 shrink-0" })
+                            ]
+                          }
+                        ) : /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "—" })
+                      }
+                    ),
+                    !isDraft && pulseByUrl.has(url) && /* @__PURE__ */ jsx(
+                      SourcePulse,
+                      {
+                        pulse: pulseByUrl.get(url),
+                        className: "ml-auto"
+                      }
+                    ),
+                    !isDraft && /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        type: "button",
+                        variant: "ghost",
+                        size: "icon-sm",
+                        "aria-label": "Remove source",
+                        className: "shrink-0 text-muted-foreground hover:text-destructive",
+                        onClick: () => {
+                          const next = sourceUrls.filter(
+                            (_, i) => i !== index
+                          );
+                          updateApp.mutate({
+                            id: app.id,
+                            data: { sources: next }
+                          });
+                        },
+                        children: /* @__PURE__ */ jsx(Trash2, { className: "size-3.5" })
+                      }
+                    )
+                  ]
+                },
+                isDraft ? "draft" : `${index}-${url}`
+              );
+            }) }),
+            /* @__PURE__ */ jsxs(
+              Button,
+              {
+                type: "button",
+                variant: "ghost",
+                size: "sm",
+                className: "mt-2 gap-1 text-muted-foreground",
+                onClick: () => setDraftSource(""),
+                children: [
+                  /* @__PURE__ */ jsx(Plus, { className: "size-3.5" }),
+                  "Add source"
+                ]
+              }
+            )
+          ] }) : /* @__PURE__ */ jsx("ul", { className: "space-y-2", children: sourceUrls.map((url, index) => (
+            // `group` so hovering anywhere on the row fades that source's
+            // track in — the mark sits in a right-hand column, and row
+            // hover is what ties the two ends of a wide row together.
+            /* @__PURE__ */ jsxs(
               "li",
               {
                 className: "group flex items-center gap-2 text-xs",
@@ -410,134 +343,193 @@ function AppDetails({
                     index + 1,
                     "."
                   ] }),
-                  /* @__PURE__ */ jsx(
-                    InlineEditableField,
+                  url ? /* @__PURE__ */ jsxs(
+                    "a",
                     {
-                      value: url,
-                      initialEditMode: isDraft,
-                      onCancel: isDraft ? () => setDraftSource(null) : void 0,
-                      onSave: (newUrl) => {
-                        if (isDraft) {
-                          setDraftSource(null);
-                          if (newUrl) {
-                            updateApp.mutate({
-                              id: app.id,
-                              data: { sources: [...sourceUrls, newUrl] }
-                            });
-                          }
-                        } else {
-                          const next = [...sourceUrls];
-                          next[index] = newUrl;
-                          updateApp.mutate({
-                            id: app.id,
-                            data: { sources: next.filter(Boolean) }
-                          });
-                        }
-                      },
-                      placeholder: "https://...",
-                      viewClassName: "flex-1 min-w-0",
-                      renderView: (val) => val ? /* @__PURE__ */ jsxs(
-                        "a",
-                        {
-                          href: val,
-                          target: "_blank",
-                          rel: "noopener noreferrer",
-                          className: "hover:text-primary inline-flex items-center gap-1 truncate",
-                          children: [
-                            displayUrl(val),
-                            /* @__PURE__ */ jsx(ExternalLink, { className: "size-3 shrink-0" })
-                          ]
-                        }
-                      ) : /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "—" })
+                      href: url,
+                      target: "_blank",
+                      rel: "noopener noreferrer",
+                      className: "hover:text-primary inline-flex min-w-0 items-center gap-1 truncate",
+                      children: [
+                        displayUrl(url),
+                        /* @__PURE__ */ jsx(ExternalLink, { className: "size-3 shrink-0" })
+                      ]
                     }
-                  ),
-                  !isDraft && pulseByUrl.has(url) && /* @__PURE__ */ jsx(
+                  ) : /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "—" }),
+                  pulseByUrl.has(url) && /* @__PURE__ */ jsx(
                     SourcePulse,
                     {
                       pulse: pulseByUrl.get(url),
                       className: "ml-auto"
                     }
-                  ),
-                  !isDraft && /* @__PURE__ */ jsx(
-                    Button,
-                    {
-                      type: "button",
-                      variant: "ghost",
-                      size: "icon-sm",
-                      "aria-label": "Remove source",
-                      className: "shrink-0 text-muted-foreground hover:text-destructive",
-                      onClick: () => {
-                        const next = sourceUrls.filter(
-                          (_, i) => i !== index
-                        );
-                        updateApp.mutate({
-                          id: app.id,
-                          data: { sources: next }
-                        });
-                      },
-                      children: /* @__PURE__ */ jsx(Trash2, { className: "size-3.5" })
-                    }
                   )
                 ]
               },
-              isDraft ? "draft" : `${index}-${url}`
-            );
-          }) }),
-          /* @__PURE__ */ jsxs(
-            Button,
+              index
+            )
+          )) }) }),
+          (app.createdAt || ((_a2 = app.freshness) == null ? void 0 : _a2.lastCheckedAt)) && /* @__PURE__ */ jsx(Section, { title: "Dates", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-x-5 gap-y-1", children: [
+            app.createdAt && /* @__PURE__ */ jsxs(
+              "span",
+              {
+                className: "inline-flex items-center gap-1 text-xs text-muted-foreground",
+                title: app.createdAt,
+                children: [
+                  /* @__PURE__ */ jsx(CalendarPlus, { className: "size-3" }),
+                  "Added ",
+                  formatRelativeTime(app.createdAt)
+                ]
+              }
+            ),
+            ((_b2 = app.freshness) == null ? void 0 : _b2.lastCheckedAt) && /* @__PURE__ */ jsxs(
+              "span",
+              {
+                className: "inline-flex items-center gap-1 text-xs text-muted-foreground",
+                title: app.freshness.lastContentChangeAt ? `Content last changed ${app.freshness.lastContentChangeAt} · last checked ${app.freshness.lastCheckedAt}` : `Last checked ${app.freshness.lastCheckedAt}`,
+                children: [
+                  /* @__PURE__ */ jsx(Clock, { className: "size-3" }),
+                  "Updated",
+                  " ",
+                  formatRelativeTime(
+                    app.freshness.lastContentChangeAt ?? app.freshness.lastCheckedAt
+                  ),
+                  app.freshness.isStale && /* @__PURE__ */ jsxs("span", { className: "italic opacity-75", children: [
+                    " ",
+                    "· may be out of date"
+                  ] })
+                ]
+              }
+            )
+          ] }) }),
+          (app.aiPrompt || app.aiMemory) && /* @__PURE__ */ jsx(Accordion, { type: "single", collapsible: true, className: "mt-7", children: /* @__PURE__ */ jsxs(
+            AccordionItem,
             {
-              type: "button",
-              variant: "ghost",
-              size: "sm",
-              className: "mt-2 gap-1 text-muted-foreground",
-              onClick: () => setDraftSource(""),
+              value: "technical-info",
+              className: "border rounded-lg px-4",
               children: [
-                /* @__PURE__ */ jsx(Plus, { className: "size-3.5" }),
-                "Add source"
+                /* @__PURE__ */ jsx(AccordionTrigger, { className: "text-sm hover:no-underline py-3", children: "Technical information" }),
+                /* @__PURE__ */ jsxs(AccordionContent, { className: "pb-3 space-y-3", children: [
+                  app.aiPrompt && /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsx("h4", { className: "section-label mb-1", children: "AI Prompt" }),
+                    /* @__PURE__ */ jsx("p", { className: "text-xs whitespace-pre-wrap", children: app.aiPrompt })
+                  ] }),
+                  app.aiMemory && /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsx("h4", { className: "section-label mb-1", children: "AI Memory" }),
+                    /* @__PURE__ */ jsx("p", { className: "text-xs whitespace-pre-wrap", children: app.aiMemory })
+                  ] })
+                ] })
               ]
             }
-          )
-        ] }) : /* @__PURE__ */ jsx("ul", { className: "space-y-2", children: sourceUrls.map((url, index) => (
-          // `group` so hovering anywhere on the row fades that source's
-          // track in — the mark sits in a right-hand column, and row hover
-          // is what ties the two ends of a wide row together.
-          /* @__PURE__ */ jsxs(
-            "li",
-            {
-              className: "group flex items-center gap-2 text-xs",
-              children: [
-                /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground shrink-0 tabular-nums", children: [
-                  index + 1,
-                  "."
-                ] }),
-                url ? /* @__PURE__ */ jsxs(
-                  "a",
-                  {
-                    href: url,
-                    target: "_blank",
-                    rel: "noopener noreferrer",
-                    className: "hover:text-primary inline-flex min-w-0 items-center gap-1 truncate",
-                    children: [
-                      displayUrl(url),
-                      /* @__PURE__ */ jsx(ExternalLink, { className: "size-3 shrink-0" })
-                    ]
-                  }
-                ) : /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "—" }),
-                pulseByUrl.has(url) && /* @__PURE__ */ jsx(
-                  SourcePulse,
-                  {
-                    pulse: pulseByUrl.get(url),
-                    className: "ml-auto"
-                  }
-                )
-              ]
-            },
-            index
-          )
-        )) })
+          ) })
+        ] });
+      }
+    },
+    {
+      id: TAB.notes,
+      label: "Notes & requests",
+      render: () => /* @__PURE__ */ jsx(FeedbackSection, { appSlug: app.slug, openComposer: composeRequests })
+    }
+  ];
+  const band = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-x-7 gap-y-2", children: [
+      /* @__PURE__ */ jsx(AppDoor, { app, onOpen: () => recordClick(app.slug) }),
+      app.deprecated && /* @__PURE__ */ jsx(
+        Badge,
+        {
+          variant: app.deprecated.type === "discouraged" ? "secondary" : "destructive",
+          children: app.deprecated.type === "discouraged" ? "Discouraged" : "Deprecated"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          size: "sm",
+          variant: "outline",
+          className: "ml-auto mr-10",
+          onClick: () => setComposeRequests((n) => n + 1),
+          children: "✎ Suggest a change"
+        }
+      )
+    ] }),
+    app.nicknames && app.nicknames.length > 0 && /* @__PURE__ */ jsxs("p", { className: "mt-2.5 text-xs text-muted-foreground", children: [
+      "Also known as ",
+      app.nicknames.join(", ")
+    ] }),
+    isAdmin && /* @__PURE__ */ jsxs("div", { className: "mt-3 flex flex-wrap items-center gap-x-6 gap-y-1", children: [
+      /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "Slug:" }),
+        /* @__PURE__ */ jsx(
+          InlineEditableField,
+          {
+            value: app.slug,
+            onSave: (slug) => updateApp.mutate({ id: app.id, data: { slug } }),
+            className: "text-sm"
+          }
+        )
       ] }),
-      /* @__PURE__ */ jsx(CommentsSection, { appSlug: app.slug })
+      /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "URL:" }),
+        /* @__PURE__ */ jsx(
+          InlineEditableField,
+          {
+            value: app.appUrl ?? "",
+            onSave: (appUrl) => updateApp.mutate({ id: app.id, data: { appUrl } }),
+            placeholder: "App URL",
+            className: "text-sm"
+          }
+        )
+      ] })
     ] }),
+    hasQuickJumps(app) && /* @__PURE__ */ jsxs("div", { className: "mt-4", children: [
+      /* @__PURE__ */ jsx("p", { className: "mb-1.5 text-xs text-muted-foreground", children: "Or go straight to a record:" }),
+      /* @__PURE__ */ jsx(QuickJumpBar, { app })
+    ] }),
+    app.deprecated && (() => {
+      const isDiscouraged = app.deprecated.type === "discouraged";
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: isDiscouraged ? "mt-4 rounded-lg border border-yellow-500/50 bg-yellow-50 p-4 dark:bg-yellow-950/20" : "mt-4 rounded-lg border border-destructive/50 bg-destructive/10 p-4",
+          children: [
+            /* @__PURE__ */ jsx(
+              "h3",
+              {
+                className: isDiscouraged ? "section-label mb-1.5 text-yellow-700 dark:text-yellow-500" : "section-label mb-1.5 text-destructive",
+                children: isDiscouraged ? "Usage discouraged" : "This application is deprecated"
+              }
+            ),
+            /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: app.deprecated.comment }),
+            replacementApp && /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => onAppClick == null ? void 0 : onAppClick(replacementApp),
+                className: "mt-3 inline-flex items-center gap-1 text-sm font-medium text-primary hover:underline",
+                children: [
+                  "View replacement: ",
+                  replacementApp.displayName,
+                  /* @__PURE__ */ jsx(ExternalLink, { className: "size-3" })
+                ]
+              }
+            )
+          ]
+        }
+      );
+    })()
+  ] });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: "flex h-full flex-col", children: /* @__PURE__ */ jsx(
+      DetailTabs,
+      {
+        tabs,
+        band,
+        bandClassName: "-mx-6 -mt-5 px-6 pt-5 sm:-mx-8 sm:-mt-7 sm:px-8 sm:pt-7",
+        forcedTab: subSlug && hasResourcesTab ? TAB.resources : void 0,
+        requestTab: composeRequests > 0 ? TAB.notes : void 0,
+        requestNonce: composeRequests
+      }
+    ) }),
     /* @__PURE__ */ jsx(
       ScreenshotGallery,
       {