@tutti-os/workspace-app-center 0.0.49 → 0.0.51

package/dist/ui/index.js

@@ -1,13 +1,15 @@
 import {
+  isCommunityRecommendedApp,
   resolveDefaultAppFactoryProvider,
   resolveSelectedAppFactoryProvider,
+  sortCommunityApps,
   sortMyAppsByCreatedDesc,
   sortRecommendedApps,
   sortRecommendedAppsForAllTab
-} from "../chunk-DXJSCFY7.js";
+} from "../chunk-5BSF53JK.js";
 
 // src/ui/AppCard.tsx
-import { memo, useCallback, useMemo, useRef, useState } from "react";
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import {
   Button,
   ChatIcon,
@@ -26,11 +28,15 @@ import {
   PopoverContent,
   PopoverTrigger,
   RefreshIcon,
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
   UninstallIcon,
   UploadIcon,
   cn
 } from "@tutti-os/ui-system";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var AppCard = memo(function AppCard2({
   actions,
   app,
@@ -52,11 +58,12 @@ var AppCard = memo(function AppCard2({
   const canOpenFromCard = app.canOpen;
   const canPublishFactoryUpdate = app.canPublishFactoryUpdate && !!app.factoryJobId;
   const canOpenFactorySession = app.canOpenFactorySession && !!app.factoryAgentSessionId && !!app.factoryJobId;
+  const communityDeveloper = resolveCommunityAppDeveloper(app);
   const actionContext = useMemo(
     () => createWorkspaceAppActionContext(app),
     [app]
   );
-  const hasMoreActions = canPublishFactoryUpdate || canOpenFactorySession || app.canExport || app.canDelete || app.canReplaceIcon || app.canReloadLocal || app.canOpenFolder || app.canOpenPackageFolder || app.canUninstall;
+  const hasMoreActions = communityDeveloper != null || canPublishFactoryUpdate || canOpenFactorySession || app.canExport || app.canDelete || app.canReplaceIcon || app.canReloadLocal || app.canOpenFolder || app.canOpenPackageFolder || app.canUninstall;
   const executePrimaryAction = useCallback(() => {
     if (app.primaryAction === "retry") {
       void actions.retryApp?.(app.id);
@@ -128,6 +135,7 @@ var AppCard = memo(function AppCard2({
                 app,
                 canOpenFactorySession,
                 canPublishFactoryUpdate,
+                communityDeveloper,
                 copy
               }
             ) : null }),
@@ -166,11 +174,27 @@ var AppCard = memo(function AppCard2({
         /* @__PURE__ */ jsxs("div", { className: "mt-5 flex min-h-0 min-w-0 flex-1 flex-col p-1", children: [
           /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
             /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-baseline gap-2", children: [
-              /* @__PURE__ */ jsx("h3", { className: "block min-w-0 truncate text-[15px] font-semibold leading-6 tracking-[0] text-[var(--text-primary)]", children: app.name }),
+              /* @__PURE__ */ jsx(
+                AppCardTextTooltip,
+                {
+                  as: "h3",
+                  className: "block min-w-0 truncate text-[15px] font-semibold leading-6 tracking-[0] text-[var(--text-primary)]",
+                  content: app.name,
+                  children: app.name
+                }
+              ),
               app.version ? /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-none text-[11px] leading-4 text-[var(--text-tertiary)] opacity-0 transition-opacity duration-150 group-hover:opacity-100 group-focus-within:opacity-100", children: copy.t("labels.version", { version: app.version }) }) : null,
               app.canReloadLocal ? /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-none rounded-[5px] border border-[color:var(--line-2)] px-1.5 py-0 text-[10px] font-medium leading-4 text-[var(--text-secondary)]", children: copy.t("labels.localDev") }) : null
             ] }),
-            app.description ? /* @__PURE__ */ jsx("p", { className: "mt-2 line-clamp-3 text-[13px] font-normal leading-[1.3] text-[var(--text-secondary)]", children: app.description }) : null
+            app.description ? /* @__PURE__ */ jsx(
+              AppCardTextTooltip,
+              {
+                as: "p",
+                className: "mt-2 line-clamp-3 text-[13px] font-normal leading-[1.3] text-[var(--text-secondary)]",
+                content: app.description,
+                children: app.description
+              }
+            ) : null
           ] }),
           app.errorMessage ? /* @__PURE__ */ jsx("div", { className: "mt-auto flex min-w-0 flex-col gap-3 pt-3", children: /* @__PURE__ */ jsx(
             "p",
@@ -183,6 +207,7 @@ var AppCard = memo(function AppCard2({
           showDeveloperSources ? /* @__PURE__ */ jsx(
             AppDeveloperSourceRow,
             {
+              actions,
               app,
               copy,
               officialDeveloperIconUrl
@@ -193,6 +218,72 @@ var AppCard = memo(function AppCard2({
     }
   );
 });
+function AppCardTextTooltip({
+  as,
+  children,
+  className,
+  content
+}) {
+  const normalizedContent = content.trim();
+  const textRef = useRef(
+    null
+  );
+  const [overflowing, setOverflowing] = useState(false);
+  useEffect(() => {
+    const element = textRef.current;
+    if (!element || !normalizedContent) {
+      setOverflowing(false);
+      return;
+    }
+    let frame = 0;
+    const measure = () => {
+      frame = 0;
+      setOverflowing(
+        element.scrollWidth - element.clientWidth > 1 || element.scrollHeight - element.clientHeight > 1
+      );
+    };
+    const queueMeasure = () => {
+      if (frame !== 0) {
+        window.cancelAnimationFrame(frame);
+      }
+      frame = window.requestAnimationFrame(measure);
+    };
+    queueMeasure();
+    window.addEventListener("resize", queueMeasure);
+    if (typeof ResizeObserver === "undefined") {
+      return () => {
+        window.removeEventListener("resize", queueMeasure);
+        if (frame !== 0) {
+          window.cancelAnimationFrame(frame);
+        }
+      };
+    }
+    const observer = new ResizeObserver(queueMeasure);
+    observer.observe(element);
+    return () => {
+      observer.disconnect();
+      window.removeEventListener("resize", queueMeasure);
+      if (frame !== 0) {
+        window.cancelAnimationFrame(frame);
+      }
+    };
+  }, [normalizedContent]);
+  const textElement = as === "h3" ? /* @__PURE__ */ jsx("h3", { ref: textRef, className, children }) : /* @__PURE__ */ jsx("p", { ref: textRef, className, children });
+  if (!normalizedContent) {
+    return textElement;
+  }
+  return /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: 200, children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: textElement }),
+    overflowing ? /* @__PURE__ */ jsx(
+      TooltipContent,
+      {
+        className: "max-w-[min(420px,calc(100vw-32px))] whitespace-normal text-left [overflow-wrap:anywhere]",
+        collisionPadding: 12,
+        children: normalizedContent
+      }
+    ) : null
+  ] }) });
+}
 function createWorkspaceAppActionContext(app) {
   return {
     installationId: app.installationId ?? null,
@@ -201,6 +292,7 @@ function createWorkspaceAppActionContext(app) {
   };
 }
 function AppDeveloperSourceRow({
+  actions,
   app,
   copy,
   officialDeveloperIconUrl
@@ -313,7 +405,7 @@ function AppDeveloperSourceRow({
                 type: "button",
                 onClick: (event) => {
                   event.stopPropagation();
-                  openExternalURL(author.url);
+                  openExternalURL(actions, author.url);
                 },
                 children: [
                   /* @__PURE__ */ jsx(
@@ -335,7 +427,7 @@ function AppDeveloperSourceRow({
                 type: "button",
                 onClick: (event) => {
                   event.stopPropagation();
-                  openExternalURL(repository.url);
+                  openExternalURL(actions, repository.url);
                 },
                 children: [
                   /* @__PURE__ */ jsx(GitHubBrandIcon, { className: "size-4" }),
@@ -401,11 +493,15 @@ function isOfficialAuthor(name) {
 function displayRepositoryURL(url) {
   return url.replace(/^https?:\/\//u, "");
 }
-function openExternalURL(url) {
+function openExternalURL(actions, url) {
   const target = url?.trim();
   if (!target) {
     return;
   }
+  if (actions.openExternalUrl) {
+    void actions.openExternalUrl(target);
+    return;
+  }
   window.open(target, "_blank", "noopener,noreferrer");
 }
 function AppCardMoreActions({
@@ -413,9 +509,26 @@ function AppCardMoreActions({
   app,
   canOpenFactorySession,
   canPublishFactoryUpdate,
+  communityDeveloper,
   copy
 }) {
   const menuItems = [];
+  if (communityDeveloper) {
+    menuItems.push({
+      content: /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
+        /* @__PURE__ */ jsx("span", { className: "shrink-0", children: copy.t("sources.developer") }),
+        /* @__PURE__ */ jsx(AuthorAvatar, { author: communityDeveloper }),
+        /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: communityDeveloper.name })
+      ] }),
+      key: "developer",
+      label: copy.t("sources.developerMenuLabel", {
+        name: communityDeveloper.name
+      }),
+      onSelect: () => {
+        openExternalURL(actions, communityDeveloper.url);
+      }
+    });
+  }
   if (canPublishFactoryUpdate) {
     menuItems.push({
       attention: true,
@@ -590,8 +703,10 @@ function AppCenterActionMenu({
               item.onSelect();
             },
             children: [
-              item.icon,
-              /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: item.label }),
+              item.content ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+                item.icon,
+                /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: item.label })
+              ] }),
               item.attention ? /* @__PURE__ */ jsx(
                 "i",
                 {
@@ -607,6 +722,14 @@ function AppCenterActionMenu({
     )
   ] });
 }
+function resolveCommunityAppDeveloper(app) {
+  if (!isCommunityRecommendedApp(app.id)) {
+    return null;
+  }
+  return app.authors?.find(
+    (author) => author.name.trim() && Boolean(author.url?.trim())
+  ) ?? null;
+}
 function AppIcon({
   app,
   onReplaceIcon,
@@ -723,7 +846,7 @@ function statusClassName(status) {
 }
 
 // src/ui/AppCenterPanel.tsx
-import { useEffect, useId, useMemo as useMemo2, useState as useState2 } from "react";
+import { useEffect as useEffect2, useId, useMemo as useMemo2, useState as useState2 } from "react";
 import {
   Badge,
   BareIconButton,
@@ -749,16 +872,16 @@ import {
   SectionTabs,
   Spinner,
   Textarea,
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
+  Tooltip as Tooltip2,
+  TooltipContent as TooltipContent2,
+  TooltipTrigger as TooltipTrigger2,
   ToastProvider,
   ToastRoot,
   ToastTitle,
   UploadFolderIcon,
   cn as cn2
 } from "@tutti-os/ui-system";
-import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var factoryTemplates = [
   {
     defaultNameKey: "factory.templates.lovart.defaultName",
@@ -865,7 +988,7 @@ function AppCenterPanel({
   const [uncontrolledActiveAppTab, setUncontrolledActiveAppTab] = useState2("recommended");
   const [activeRecommendedCategoryTab, setActiveRecommendedCategoryTab] = useState2("all");
   const activeAppTab = controlledActiveAppTab ?? uncontrolledActiveAppTab;
-  useEffect(() => {
+  useEffect2(() => {
     setSelectedProvider(
       (current) => resolveSelectedAppFactoryProvider(
         current,
@@ -877,7 +1000,7 @@ function AppCenterPanel({
   const selectedProviderOption = normalizedProviderOptions.find(
     (option) => option.provider === selectedProvider
   ) ?? null;
-  useEffect(() => {
+  useEffect2(() => {
     if (!factoryDialogOpen) {
       setProviderConfiguration(null);
       setProviderConfigurationStatus("idle");
@@ -917,7 +1040,7 @@ function AppCenterPanel({
   const modelOptions = providerConfiguration?.modelOptions ?? [];
   const permissionModeOptions = providerConfiguration?.permissionModeOptions ?? [];
   const reasoningEffortOptions = providerConfiguration?.reasoningEffortOptions ?? [];
-  useEffect(() => {
+  useEffect2(() => {
     setSelectedModel(
       (current) => resolveSelectedFactoryOptionValue(
         current,
@@ -926,7 +1049,7 @@ function AppCenterPanel({
       )
     );
   }, [modelOptions, providerConfiguration?.defaultModel]);
-  useEffect(() => {
+  useEffect2(() => {
     setSelectedPermissionModeId(
       (current) => resolveSelectedFactoryOptionValue(
         current,
@@ -935,7 +1058,7 @@ function AppCenterPanel({
       )
     );
   }, [permissionModeOptions, providerConfiguration?.defaultPermissionModeId]);
-  useEffect(() => {
+  useEffect2(() => {
     setSelectedReasoningEffort(
       (current) => resolveSelectedFactoryOptionValue(
         current,
@@ -1076,12 +1199,16 @@ function AppCenterPanel({
     viewModel.apps.filter((app) => app.sourceKind === "local")
   );
   const recommendedSourceApps = viewModel.apps.filter(
-    (app) => app.sourceKind !== "local"
+    (app) => app.sourceKind !== "local" && !isCommunityRecommendedApp(app.id)
+  );
+  const communitySourceApps = viewModel.apps.filter(
+    (app) => app.sourceKind !== "local" && isCommunityRecommendedApp(app.id)
   );
   const recommendedApps = sortRecommendedApps(recommendedSourceApps);
   const recommendedAppsForAllTab = sortRecommendedAppsForAllTab(
     recommendedSourceApps
   );
+  const communityApps = sortCommunityApps(communitySourceApps);
   const recommendedCategoryTabs = createRecommendedCategoryTabs(
     recommendedApps,
     copy
@@ -1092,9 +1219,9 @@ function AppCenterPanel({
   const activeRecommendedApps = activeRecommendedCategoryLabel == null ? recommendedAppsForAllTab : recommendedApps.filter(
     (app) => app.category === activeRecommendedCategoryLabel
   );
-  const activeApps = activeAppTab === "recommended" ? activeRecommendedApps : myApps;
-  const activeAppTabTitle = activeAppTab === "recommended" ? copy.t("labels.recommendedApps") : copy.t("labels.myApps");
-  const activeAppEmptyMessage = activeAppTab === "recommended" ? copy.t("messages.recommendedAppsEmpty") : copy.t("messages.myAppsEmpty");
+  const activeApps = activeAppTab === "recommended" ? activeRecommendedApps : activeAppTab === "community" ? communityApps : myApps;
+  const activeAppTabTitle = activeAppTab === "recommended" ? copy.t("labels.recommendedApps") : activeAppTab === "community" ? copy.t("labels.communityApps") : copy.t("labels.myApps");
+  const activeAppEmptyMessage = activeAppTab === "recommended" ? copy.t("messages.recommendedAppsEmpty") : activeAppTab === "community" ? copy.t("messages.communityAppsEmpty") : copy.t("messages.myAppsEmpty");
   const pendingDeleteAppInstalled = pendingDeleteApp?.installed ?? false;
   const deleteAppConfirmLabel = copy.t(
     pendingDeleteAppInstalled ? "actions.uninstallAndDeleteApp" : "actions.deleteApp"
@@ -1144,6 +1271,10 @@ function AppCenterPanel({
                     label: copy.t("labels.recommendedApps"),
                     value: "recommended"
                   },
+                  {
+                    label: copy.t("labels.communityApps"),
+                    value: "community"
+                  },
                   {
                     label: copy.t("labels.myApps"),
                     value: "my"
@@ -1984,9 +2115,9 @@ function AppCenterHeaderActions({
   onImportApp,
   onLoadLocalApp
 }) {
-  return /* @__PURE__ */ jsxs2(Fragment, { children: [
-    /* @__PURE__ */ jsxs2(Tooltip, { children: [
-      /* @__PURE__ */ jsx2(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    /* @__PURE__ */ jsxs2(Tooltip2, { children: [
+      /* @__PURE__ */ jsx2(TooltipTrigger2, { asChild: true, children: /* @__PURE__ */ jsxs2(
         Button2,
         {
           size: "default",
@@ -1999,10 +2130,10 @@ function AppCenterHeaderActions({
           ]
         }
       ) }),
-      /* @__PURE__ */ jsx2(TooltipContent, { side: "bottom", children: copy.t("actions.loadUnpackedAppTooltip") })
+      /* @__PURE__ */ jsx2(TooltipContent2, { side: "bottom", children: copy.t("actions.loadUnpackedAppTooltip") })
     ] }),
-    /* @__PURE__ */ jsxs2(Tooltip, { children: [
-      /* @__PURE__ */ jsx2(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs2(
+    /* @__PURE__ */ jsxs2(Tooltip2, { children: [
+      /* @__PURE__ */ jsx2(TooltipTrigger2, { asChild: true, children: /* @__PURE__ */ jsxs2(
         Button2,
         {
           size: "default",
@@ -2015,7 +2146,7 @@ function AppCenterHeaderActions({
           ]
         }
       ) }),
-      /* @__PURE__ */ jsx2(TooltipContent, { side: "bottom", children: copy.t("actions.importAppTooltip") })
+      /* @__PURE__ */ jsx2(TooltipContent2, { side: "bottom", children: copy.t("actions.importAppTooltip") })
     ] }),
     /* @__PURE__ */ jsxs2(
       Button2,
@@ -2037,8 +2168,8 @@ function AppCenterRecommendedHeaderActions({
   loading,
   onRefreshCatalog
 }) {
-  return /* @__PURE__ */ jsxs2(Tooltip, { children: [
-    /* @__PURE__ */ jsx2(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsxs2(Tooltip2, { children: [
+    /* @__PURE__ */ jsx2(TooltipTrigger2, { asChild: true, children: /* @__PURE__ */ jsx2(
       Button2,
       {
         "aria-label": copy.t("actions.refreshCatalog"),
@@ -2051,7 +2182,7 @@ function AppCenterRecommendedHeaderActions({
         children: /* @__PURE__ */ jsx2(RefreshIcon2, { className: loading ? "animate-spin" : void 0 })
       }
     ) }),
-    /* @__PURE__ */ jsx2(TooltipContent, { side: "bottom", children: copy.t("actions.refreshCatalog") })
+    /* @__PURE__ */ jsx2(TooltipContent2, { side: "bottom", children: copy.t("actions.refreshCatalog") })
   ] });
 }
 function FactoryJobStatusIndicator({