@tutti-os/workspace-app-center 0.0.43 → 0.0.44

package/dist/ui/index.js

@@ -7,7 +7,7 @@ import {
 } from "../chunk-DXJSCFY7.js";
 
 // src/ui/AppCard.tsx
-import { memo, useCallback, useMemo } from "react";
+import { memo, useCallback, useMemo, useRef, useState } from "react";
 import {
   Button,
   ChatIcon,
@@ -19,8 +19,12 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
   FolderIcon,
+  GitHubBrandIcon,
   MoreHorizontalIcon,
   NavApplicationsFilledIcon,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
   RefreshIcon,
   UninstallIcon,
   UploadIcon,
@@ -31,7 +35,9 @@ var AppCard = memo(function AppCard2({
   actions,
   app,
   className,
-  copy
+  copy,
+  officialDeveloperIconUrl = null,
+  showDeveloperSources = false
 }) {
   const statusLabel = copy.t(app.statusLabelKey);
   const installBusy = app.installProgress != null || app.status === "installing";
@@ -173,7 +179,15 @@ var AppCard = memo(function AppCard2({
               title: app.errorMessage,
               children: copy.t("messages.appRuntimeFailed")
             }
-          ) }) : null
+          ) }) : null,
+          showDeveloperSources ? /* @__PURE__ */ jsx(
+            AppDeveloperSourceRow,
+            {
+              app,
+              copy,
+              officialDeveloperIconUrl
+            }
+          ) : null
         ] })
       ]
     }
@@ -186,6 +200,214 @@ function createWorkspaceAppActionContext(app) {
     launchUrl: app.launchUrl ?? null
   };
 }
+function AppDeveloperSourceRow({
+  app,
+  copy,
+  officialDeveloperIconUrl
+}) {
+  const sourceAuthors = app.authors ?? [];
+  const repository = app.repository ?? null;
+  const authors = sourceAuthors.length > 0 ? sourceAuthors : app.sourceKind === "bundled" ? [{ name: "Tutti" }] : [];
+  const [popoverOpen, setPopoverOpen] = useState(false);
+  const closeTimerRef = useRef(null);
+  const clearCloseTimer = useCallback(() => {
+    if (closeTimerRef.current === null) {
+      return;
+    }
+    window.clearTimeout(closeTimerRef.current);
+    closeTimerRef.current = null;
+  }, []);
+  const openPopover = useCallback(() => {
+    clearCloseTimer();
+    setPopoverOpen(true);
+  }, [clearCloseTimer]);
+  const scheduleClosePopover = useCallback(() => {
+    clearCloseTimer();
+    closeTimerRef.current = window.setTimeout(() => {
+      setPopoverOpen(false);
+      closeTimerRef.current = null;
+    }, 120);
+  }, [clearCloseTimer]);
+  if (authors.length === 0 && repository === null) {
+    return null;
+  }
+  const primaryAuthor = authors[0] ?? null;
+  const rowLabel = authors.length > 1 ? copy.t("sources.developerCount", { count: String(authors.length) }) : primaryAuthor?.name || (repository ? copy.t("sources.githubRepository") : "");
+  const official = isOfficialAuthor(primaryAuthor?.name);
+  const canOpenPopover = repository !== null || authors.some((author) => Boolean(author.url));
+  const content = /* @__PURE__ */ jsx("div", { className: "mt-auto min-w-0 pt-3", children: /* @__PURE__ */ jsxs("div", { className: "group/source flex min-h-7 min-w-0 items-center gap-2 border-t border-[color:var(--line-2)] pt-2 text-[12px] leading-4 text-[var(--text-secondary)]", children: [
+    /* @__PURE__ */ jsx(
+      AvatarStack,
+      {
+        authors,
+        fallbackIconUrl: official ? officialDeveloperIconUrl : null
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: rowLabel }),
+    official ? /* @__PURE__ */ jsx("span", { className: "shrink-0 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("sources.official") }) : null,
+    canOpenPopover ? /* @__PURE__ */ jsxs("span", { className: "flex size-5 shrink-0 items-center justify-center text-[var(--text-secondary)]", children: [
+      /* @__PURE__ */ jsx(GitHubBrandIcon, { className: "size-4 group-hover/source:hidden" }),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-hidden": "true",
+          className: "hidden text-[18px] leading-none group-hover/source:block",
+          children: "\u203A"
+        }
+      )
+    ] }) : null
+  ] }) });
+  if (!canOpenPopover) {
+    return content;
+  }
+  return /* @__PURE__ */ jsxs(Popover, { open: popoverOpen, onOpenChange: setPopoverOpen, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: "block w-full min-w-0 border-0 bg-transparent p-0 text-left",
+        type: "button",
+        onClick: (event) => {
+          event.stopPropagation();
+        },
+        onPointerEnter: openPopover,
+        onPointerLeave: scheduleClosePopover,
+        onPointerDown: (event) => {
+          event.stopPropagation();
+        },
+        children: content
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(
+      PopoverContent,
+      {
+        align: "start",
+        className: "w-[280px] max-w-[min(280px,calc(100vw-32px))]",
+        collisionPadding: 12,
+        side: "bottom",
+        style: { zIndex: "var(--z-panel-popover)" },
+        onPointerEnter: openPopover,
+        onPointerLeave: scheduleClosePopover,
+        onCloseAutoFocus: (event) => {
+          event.preventDefault();
+        },
+        onClick: (event) => {
+          event.stopPropagation();
+        },
+        onOpenAutoFocus: (event) => {
+          event.preventDefault();
+        },
+        onPointerDown: (event) => {
+          event.stopPropagation();
+        },
+        onKeyDown: (event) => {
+          event.stopPropagation();
+        },
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "px-2 py-1.5 text-[12px] font-semibold leading-4 text-[var(--text-primary)]", children: copy.t("sources.title") }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[2px]", children: [
+            authors.map((author, index) => /* @__PURE__ */ jsxs(
+              "button",
+              {
+                className: "flex min-h-8 min-w-0 items-center gap-2 rounded-[6px] px-2 py-1 text-left text-[12px] font-normal leading-4 text-[var(--text-primary)] hover:bg-[var(--transparency-hover)] disabled:cursor-default disabled:opacity-60",
+                disabled: !author.url,
+                type: "button",
+                onClick: (event) => {
+                  event.stopPropagation();
+                  openExternalURL(author.url);
+                },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    AuthorAvatar,
+                    {
+                      author,
+                      fallbackIconUrl: index === 0 && isOfficialAuthor(author.name) ? officialDeveloperIconUrl : null
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: author.name })
+                ]
+              },
+              `${author.name}:${author.url ?? ""}`
+            )),
+            repository ? /* @__PURE__ */ jsxs(
+              "button",
+              {
+                className: "flex min-h-8 min-w-0 items-center gap-2 rounded-[6px] px-2 py-1 text-left text-[12px] font-normal leading-4 text-[var(--text-primary)] hover:bg-[var(--transparency-hover)]",
+                type: "button",
+                onClick: (event) => {
+                  event.stopPropagation();
+                  openExternalURL(repository.url);
+                },
+                children: [
+                  /* @__PURE__ */ jsx(GitHubBrandIcon, { className: "size-4" }),
+                  /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: displayRepositoryURL(repository.url) })
+                ]
+              }
+            ) : null
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+function AvatarStack({
+  authors,
+  fallbackIconUrl
+}) {
+  const visibleAuthors = authors.slice(0, 2);
+  if (visibleAuthors.length === 0) {
+    return /* @__PURE__ */ jsx("span", { className: "flex size-5 shrink-0 items-center justify-center rounded-full bg-[var(--transparency-block)]", children: /* @__PURE__ */ jsx(GitHubBrandIcon, { className: "size-3.5" }) });
+  }
+  return /* @__PURE__ */ jsx("span", { className: "flex shrink-0 -space-x-1", children: visibleAuthors.map((author, index) => /* @__PURE__ */ jsx(
+    AuthorAvatar,
+    {
+      author,
+      fallbackIconUrl: index === 0 ? fallbackIconUrl : null
+    },
+    `${author.name}:${author.url ?? ""}`
+  )) });
+}
+function AuthorAvatar({
+  author,
+  fallbackIconUrl
+}) {
+  if (author.avatarUrl) {
+    return /* @__PURE__ */ jsx(
+      "img",
+      {
+        alt: "",
+        className: "size-5 shrink-0 rounded-full border border-[var(--background-fronted)] object-cover",
+        draggable: false,
+        src: author.avatarUrl
+      }
+    );
+  }
+  if (fallbackIconUrl) {
+    return /* @__PURE__ */ jsx(
+      "img",
+      {
+        alt: "",
+        className: "size-5 shrink-0 rounded-[5px] border border-[var(--background-fronted)] object-contain",
+        draggable: false,
+        src: fallbackIconUrl
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx("span", { className: "flex size-5 shrink-0 items-center justify-center rounded-full border border-[var(--background-fronted)] bg-[var(--transparency-block)] text-[10px] font-semibold uppercase text-[var(--text-secondary)]", children: author.name.slice(0, 1) });
+}
+function isOfficialAuthor(name) {
+  const normalized = name?.trim().toLowerCase() ?? "";
+  return normalized === "tutti" || normalized === "tutti official";
+}
+function displayRepositoryURL(url) {
+  return url.replace(/^https?:\/\//u, "");
+}
+function openExternalURL(url) {
+  const target = url?.trim();
+  if (!target) {
+    return;
+  }
+  window.open(target, "_blank", "noopener,noreferrer");
+}
 function AppCardMoreActions({
   actions,
   app,
@@ -501,7 +723,7 @@ function statusClassName(status) {
 }
 
 // src/ui/AppCenterPanel.tsx
-import { useEffect, useId, useMemo as useMemo2, useState } from "react";
+import { useEffect, useId, useMemo as useMemo2, useState as useState2 } from "react";
 import {
   Badge,
   BareIconButton,
@@ -592,29 +814,31 @@ function AppCenterPanel({
   errorMessage,
   loadProviderConfiguration,
   onActiveAppTabChange,
+  officialDeveloperIconUrl = null,
   providerErrorMessage = null,
   providerLoading = false,
   providerOptions = [],
+  showDeveloperSources = false,
   viewModel
 }) {
   const promptTextareaId = useId();
-  const [factoryDialogOpen, setFactoryDialogOpen] = useState(false);
-  const [deleteAppBusy, setDeleteAppBusy] = useState(false);
-  const [pendingDeleteApp, setPendingDeleteApp] = useState(null);
-  const [uninstallAppBusy, setUninstallAppBusy] = useState(false);
-  const [pendingUninstallApp, setPendingUninstallApp] = useState(null);
-  const [pendingLocalRepairRequest, setPendingLocalRepairRequest] = useState(null);
-  const [updateAppBusy, setUpdateAppBusy] = useState(false);
-  const [localRepairBusy, setLocalRepairBusy] = useState(false);
-  const [pendingUpdateApp, setPendingUpdateApp] = useState(null);
-  const [displayName, setDisplayName] = useState("");
-  const [prompt, setPrompt] = useState("");
-  const [providerConfiguration, setProviderConfiguration] = useState(null);
-  const [providerConfigurationStatus, setProviderConfigurationStatus] = useState("idle");
-  const [openFactorySettingsMenu, setOpenFactorySettingsMenu] = useState(null);
-  const [selectedModel, setSelectedModel] = useState("");
-  const [selectedPermissionModeId, setSelectedPermissionModeId] = useState("");
-  const [selectedReasoningEffort, setSelectedReasoningEffort] = useState("");
+  const [factoryDialogOpen, setFactoryDialogOpen] = useState2(false);
+  const [deleteAppBusy, setDeleteAppBusy] = useState2(false);
+  const [pendingDeleteApp, setPendingDeleteApp] = useState2(null);
+  const [uninstallAppBusy, setUninstallAppBusy] = useState2(false);
+  const [pendingUninstallApp, setPendingUninstallApp] = useState2(null);
+  const [pendingLocalRepairRequest, setPendingLocalRepairRequest] = useState2(null);
+  const [updateAppBusy, setUpdateAppBusy] = useState2(false);
+  const [localRepairBusy, setLocalRepairBusy] = useState2(false);
+  const [pendingUpdateApp, setPendingUpdateApp] = useState2(null);
+  const [displayName, setDisplayName] = useState2("");
+  const [prompt, setPrompt] = useState2("");
+  const [providerConfiguration, setProviderConfiguration] = useState2(null);
+  const [providerConfigurationStatus, setProviderConfigurationStatus] = useState2("idle");
+  const [openFactorySettingsMenu, setOpenFactorySettingsMenu] = useState2(null);
+  const [selectedModel, setSelectedModel] = useState2("");
+  const [selectedPermissionModeId, setSelectedPermissionModeId] = useState2("");
+  const [selectedReasoningEffort, setSelectedReasoningEffort] = useState2("");
   const normalizedProviderOptions = useMemo2(
     () => providerOptions.map((option) => {
       const provider = option.provider.trim();
@@ -632,14 +856,14 @@ function AppCenterPanel({
     }).filter((option) => option != null),
     [providerOptions]
   );
-  const [selectedProvider, setSelectedProvider] = useState(
+  const [selectedProvider, setSelectedProvider] = useState2(
     () => resolveDefaultAppFactoryProvider(
       normalizedProviderOptions,
       defaultAgentProvider
     )
   );
-  const [uncontrolledActiveAppTab, setUncontrolledActiveAppTab] = useState("recommended");
-  const [activeRecommendedCategoryTab, setActiveRecommendedCategoryTab] = useState("all");
+  const [uncontrolledActiveAppTab, setUncontrolledActiveAppTab] = useState2("recommended");
+  const [activeRecommendedCategoryTab, setActiveRecommendedCategoryTab] = useState2("all");
   const activeAppTab = controlledActiveAppTab ?? uncontrolledActiveAppTab;
   useEffect(() => {
     setSelectedProvider(
@@ -1086,6 +1310,8 @@ function AppCenterPanel({
               apps: activeApps,
               copy,
               emptyMessage: activeAppEmptyMessage,
+              officialDeveloperIconUrl,
+              showDeveloperSources,
               title: activeAppTabTitle
             }
           )
@@ -1630,6 +1856,8 @@ function AppCardGrid({
   apps,
   copy,
   emptyMessage,
+  officialDeveloperIconUrl,
+  showDeveloperSources,
   title
 }) {
   if (apps.length === 0) {
@@ -1650,7 +1878,17 @@ function AppCardGrid({
         "aria-label": title,
         className: "grid min-h-0 min-w-0 grid-cols-[repeat(auto-fill,minmax(min(100%,260px),1fr))] gap-3",
         role: "list",
-        children: apps.map((app) => /* @__PURE__ */ jsx2(AppCard, { actions, app, copy }, app.id))
+        children: apps.map((app) => /* @__PURE__ */ jsx2(
+          AppCard,
+          {
+            actions,
+            app,
+            copy,
+            officialDeveloperIconUrl,
+            showDeveloperSources
+          },
+          app.id
+        ))
       }
     ),
     /* @__PURE__ */ jsx2("div", { "aria-hidden": "true", className: "h-6 shrink-0" })