@tutti-os/workspace-app-center 0.0.12 → 0.0.13

package/dist/ui/index.js

@@ -7,6 +7,7 @@ import {
 } from "../chunk-2HXFGEJS.js";
 
 // src/ui/AppCard.tsx
+import { memo, useCallback, useMemo } from "react";
 import {
   Button,
   ChatIcon,
@@ -25,21 +26,30 @@ import {
   cn
 } from "@tutti-os/ui-system";
 import { jsx, jsxs } from "react/jsx-runtime";
-function AppCard({
+var AppCard = memo(function AppCard2({
   actions,
   app,
   className,
   copy
 }) {
   const statusLabel = copy.t(app.statusLabelKey);
-  const primaryActionLabel = app.primaryAction === "install" ? copy.t("actions.installApp") : app.primaryAction === "retry" ? copy.t("actions.retryApp") : app.primaryAction === "update" ? copy.t("actions.updateApp") : copy.t("actions.openApp");
+  const installBusy = app.installProgress != null || app.status === "installing";
+  const busyStatusLabel = installBusy ? copy.t("status.installing") : statusLabel;
+  const showInstallProgressRing = installBusy;
+  const statusButtonTitle = app.installProgress ? resolveInstallProgressTitle(copy, app.installProgress, busyStatusLabel) : statusLabel;
+  const primaryActionLabel = app.primaryAction === "install" ? copy.t("actions.installApp") : app.primaryAction === "retry" ? copy.t("actions.retryApp") : app.primaryAction === "update" ? app.availableVersion ? copy.t("labels.updateAvailable", {
+    version: app.availableVersion
+  }) : copy.t("actions.updateApp") : copy.t("actions.openApp");
   const canExecutePrimaryAction = app.primaryAction !== "none";
   const canOpenFromCard = app.canOpen;
   const canPublishFactoryUpdate = app.canPublishFactoryUpdate && !!app.factoryJobId;
   const canOpenFactorySession = app.canOpenFactorySession && !!app.factoryAgentSessionId && !!app.factoryJobId;
-  const actionContext = createWorkspaceAppActionContext(app);
+  const actionContext = useMemo(
+    () => createWorkspaceAppActionContext(app),
+    [app]
+  );
   const hasMoreActions = canPublishFactoryUpdate || canOpenFactorySession || app.canExport || app.canDelete || app.canReplaceIcon || app.canOpenFolder || app.canOpenPackageFolder || app.canUninstall;
-  const executePrimaryAction = () => {
+  const executePrimaryAction = useCallback(() => {
     if (app.primaryAction === "retry") {
       void actions.retryApp?.(app.id);
       return;
@@ -55,12 +65,25 @@ function AppCard({
     if (app.primaryAction === "open") {
       void actions.openApp?.(app.id, actionContext);
     }
-  };
-  const executeCardAction = () => {
+  }, [actionContext, actions, app.id, app.primaryAction]);
+  const executeCardAction = useCallback(() => {
     if (canOpenFromCard) {
       void actions.openApp?.(app.id, actionContext);
     }
-  };
+  }, [actionContext, actions, app.id, canOpenFromCard]);
+  const handleCardKeyDown = useCallback(
+    (event) => {
+      if (!canOpenFromCard || event.key !== "Enter" && event.key !== " ") {
+        return;
+      }
+      event.preventDefault();
+      executeCardAction();
+    },
+    [canOpenFromCard, executeCardAction]
+  );
+  const handleReplaceIcon = useCallback(() => {
+    void actions.replaceAppIcon?.(app.id);
+  }, [actions, app.id]);
   return /* @__PURE__ */ jsxs(
     "article",
     {
@@ -74,13 +97,7 @@ function AppCard({
       role: "listitem",
       tabIndex: canOpenFromCard ? 0 : -1,
       onClick: executeCardAction,
-      onKeyDown: (event) => {
-        if (!canOpenFromCard || event.key !== "Enter" && event.key !== " ") {
-          return;
-        }
-        event.preventDefault();
-        executeCardAction();
-      },
+      onKeyDown: handleCardKeyDown,
       children: [
         /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
           /* @__PURE__ */ jsx(
@@ -88,13 +105,11 @@ function AppCard({
             {
               app,
               replaceIconLabel: copy.t("actions.replaceIcon"),
-              onReplaceIcon: () => {
-                void actions.replaceAppIcon?.(app.id);
-              }
+              onReplaceIcon: handleReplaceIcon
             }
           ),
           /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [
-            hasMoreActions ? /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx("div", { className: "flex size-8 shrink-0 items-center justify-center", children: hasMoreActions ? /* @__PURE__ */ jsx(
               AppCardMoreActions,
               {
                 actions,
@@ -103,27 +118,37 @@ function AppCard({
                 canPublishFactoryUpdate,
                 copy
               }
-            ) : null,
-            /* @__PURE__ */ jsx(
-              Button,
-              {
-                className: cn(
-                  "min-w-[56px]",
-                  !canExecutePrimaryAction ? "cursor-default" : null,
-                  canExecutePrimaryAction ? app.primaryAction === "retry" ? statusClassName(app.status) : "text-[var(--text-primary)]" : statusClassName(app.status)
-                ),
-                disabled: !canExecutePrimaryAction,
-                size: "default",
-                title: statusLabel,
-                type: "button",
-                variant: "ghost",
-                onClick: (event) => {
-                  event.stopPropagation();
-                  executePrimaryAction();
-                },
-                children: canExecutePrimaryAction ? primaryActionLabel : statusLabel
-              }
-            )
+            ) : null }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  className: cn(
+                    "min-w-[56px] shrink-0",
+                    !canExecutePrimaryAction ? "cursor-default" : null,
+                    canExecutePrimaryAction ? app.primaryAction === "retry" ? statusClassName(app.status) : "text-[var(--text-primary)]" : statusClassName(app.status)
+                  ),
+                  disabled: !canExecutePrimaryAction,
+                  size: "default",
+                  title: statusButtonTitle,
+                  type: "button",
+                  variant: "ghost",
+                  onClick: (event) => {
+                    event.stopPropagation();
+                    executePrimaryAction();
+                  },
+                  children: canExecutePrimaryAction ? primaryActionLabel : busyStatusLabel
+                }
+              ),
+              showInstallProgressRing ? /* @__PURE__ */ jsx(
+                AppInstallProgressRing,
+                {
+                  ariaLabel: copy.t("status.installProgress.progressAria"),
+                  fallbackPercent: 0,
+                  progress: app.installProgress
+                }
+              ) : null
+            ] })
           ] })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "mt-5 flex min-h-0 min-w-0 flex-1 flex-col p-1", children: [
@@ -132,52 +157,21 @@ function AppCard({
               /* @__PURE__ */ jsx("h3", { className: "block min-w-0 truncate text-[15px] font-semibold leading-6 tracking-[0] text-[var(--text-primary)]", 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.updateAvailable && app.availableVersion ? /* @__PURE__ */ jsx(
-              "button",
-              {
-                className: cn(
-                  "mt-1 inline-flex max-w-full items-center rounded-[4px] bg-[color-mix(in_srgb,var(--state-warning)_12%,transparent)] px-2 py-0.5 text-[11px] leading-4 text-[var(--state-warning)] outline-none transition-colors hover:bg-[color-mix(in_srgb,var(--state-warning)_18%,transparent)] focus-visible:ring-2 focus-visible:ring-[color-mix(in_srgb,var(--state-warning)_42%,transparent)]",
-                  app.canUpdate ? "cursor-pointer" : "cursor-default"
-                ),
-                disabled: !app.canUpdate,
-                title: copy.t("actions.updateApp"),
-                type: "button",
-                onClick: (event) => {
-                  event.stopPropagation();
-                  if (app.canUpdate) {
-                    void actions.updateApp?.(app.id, "badge_button");
-                  }
-                },
-                children: /* @__PURE__ */ jsx("span", { className: "truncate", children: copy.t("labels.updateAvailable", {
-                  version: app.availableVersion
-                }) })
-              }
-            ) : 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.errorMessage || app.tags.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "mt-auto flex min-w-0 flex-col gap-3 pt-3", children: [
-            app.errorMessage ? /* @__PURE__ */ jsx(
-              "p",
-              {
-                className: "min-w-0 rounded-[6px] bg-[color-mix(in_srgb,var(--state-danger)_10%,transparent)] px-2 py-1 text-[11px] leading-4 text-[var(--state-danger)]",
-                title: app.errorMessage,
-                children: copy.t("messages.appRuntimeFailed")
-              }
-            ) : null,
-            app.tags.length > 0 ? /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-wrap gap-1.5", children: app.tags.slice(0, 3).map((tag) => /* @__PURE__ */ jsx(
-              "span",
-              {
-                className: "inline-flex h-5 max-w-full items-center rounded-[4px] bg-[var(--transparency-block)] px-2 text-[11px] leading-4 text-[var(--text-secondary)]",
-                children: /* @__PURE__ */ jsx("span", { className: "truncate", children: tag })
-              },
-              tag
-            )) }) : null
-          ] }) : null
+          app.errorMessage ? /* @__PURE__ */ jsx("div", { className: "mt-auto flex min-w-0 flex-col gap-3 pt-3", children: /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: "min-w-0 rounded-[6px] bg-[color-mix(in_srgb,var(--state-danger)_10%,transparent)] px-2 py-1 text-[11px] leading-4 text-[var(--state-danger)]",
+              title: app.errorMessage,
+              children: copy.t("messages.appRuntimeFailed")
+            }
+          ) }) : null
         ] })
       ]
     }
   );
-}
+});
 function createWorkspaceAppActionContext(app) {
   return {
     installationId: app.installationId ?? null,
@@ -210,6 +204,13 @@ function AppCardMoreActions({
       key: "modify-app-with-agent",
       label: copy.t("actions.modifyAppWithAgent"),
       onSelect: () => {
+        if (app.factoryEditAction === "open_session") {
+          void actions.openFactoryJobAgentSession?.(
+            app.factoryAgentSessionId ?? "",
+            app.factoryProvider
+          );
+          return;
+        }
         void actions.modifyAppWithAgent?.(
           app.factoryJobId ?? "",
           app.factoryAgentSessionId ?? "",
@@ -403,6 +404,72 @@ function AppIcon({
     ) : null
   ] });
 }
+function AppInstallProgressRing({
+  ariaLabel,
+  fallbackPercent,
+  progress
+}) {
+  const percent = progress == null ? Math.max(0, Math.min(100, Math.round(fallbackPercent))) : Math.max(0, Math.min(100, Math.round(progress.overallPercent)));
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-label": ariaLabel,
+      "aria-valuemax": 100,
+      "aria-valuemin": 0,
+      "aria-valuenow": percent,
+      className: "relative inline-flex size-[14px] shrink-0 items-center justify-center rounded-full",
+      role: "progressbar",
+      style: {
+        background: `conic-gradient(var(--text-secondary) ${percent}%, color-mix(in srgb, var(--text-secondary) 24%, transparent) 0)`
+      },
+      children: /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-hidden": "true",
+          className: "absolute inset-[2px] rounded-full bg-[var(--surface-panel)]"
+        }
+      )
+    }
+  );
+}
+function resolveInstallProgressTitle(copy, progress, statusLabel) {
+  const byteLabel = formatInstallProgressBytes(copy, progress);
+  const percent = Math.max(
+    0,
+    Math.min(100, Math.round(progress.overallPercent))
+  );
+  if (byteLabel) {
+    return `${statusLabel} \xB7 ${byteLabel} \xB7 ${percent}%`;
+  }
+  return `${statusLabel} \xB7 ${percent}%`;
+}
+function formatInstallProgressBytes(copy, progress) {
+  if (progress.userPhase !== "downloading" || progress.downloadedBytes == null) {
+    return null;
+  }
+  const downloaded = formatByteSize(progress.downloadedBytes);
+  if (progress.totalBytes == null || progress.totalBytes <= 0) {
+    return downloaded;
+  }
+  return copy.t("status.installProgress.downloadedOfTotal", {
+    downloaded,
+    total: formatByteSize(progress.totalBytes)
+  });
+}
+function formatByteSize(value) {
+  if (!Number.isFinite(value) || value <= 0) {
+    return "0 B";
+  }
+  const units = ["B", "KB", "MB", "GB"];
+  let size = value;
+  let unitIndex = 0;
+  while (size >= 1024 && unitIndex < units.length - 1) {
+    size /= 1024;
+    unitIndex += 1;
+  }
+  const precision = size >= 10 || unitIndex === 0 ? 0 : 1;
+  return `${size.toFixed(precision)} ${units[unitIndex]}`;
+}
 function statusClassName(status) {
   if (status === "failed") {
     return "text-[var(--state-danger)]";
@@ -417,7 +484,7 @@ function statusClassName(status) {
 }
 
 // src/ui/AppCenterPanel.tsx
-import { useEffect, useId, useMemo, useState } from "react";
+import { useEffect, useId, useMemo as useMemo2, useState } from "react";
 import {
   Badge,
   BareIconButton,
@@ -491,10 +558,10 @@ var factoryTemplates = [
 ];
 var recommendedCategoryTabDefinitions = [
   { id: "all", labelKey: null },
-  { id: "tools", labelKey: "categories.tools" },
-  { id: "content-creation", labelKey: "categories.contentCreation" },
   { id: "product-design", labelKey: "categories.productDesign" },
-  { id: "office", labelKey: "categories.office" }
+  { id: "content-creation", labelKey: "categories.contentCreation" },
+  { id: "office", labelKey: "categories.office" },
+  { id: "tools", labelKey: "categories.tools" }
 ];
 function AppCenterPanel({
   actions,
@@ -517,6 +584,8 @@ function AppCenterPanel({
   const [pendingDeleteApp, setPendingDeleteApp] = useState(null);
   const [uninstallAppBusy, setUninstallAppBusy] = useState(false);
   const [pendingUninstallApp, setPendingUninstallApp] = useState(null);
+  const [updateAppBusy, setUpdateAppBusy] = useState(false);
+  const [pendingUpdateApp, setPendingUpdateApp] = useState(null);
   const [displayName, setDisplayName] = useState("");
   const [prompt, setPrompt] = useState("");
   const [providerConfiguration, setProviderConfiguration] = useState(null);
@@ -525,7 +594,7 @@ function AppCenterPanel({
   const [selectedModel, setSelectedModel] = useState("");
   const [selectedPermissionModeId, setSelectedPermissionModeId] = useState("");
   const [selectedReasoningEffort, setSelectedReasoningEffort] = useState("");
-  const normalizedProviderOptions = useMemo(
+  const normalizedProviderOptions = useMemo2(
     () => providerOptions.map((option) => {
       const provider = option.provider.trim();
       const label = option.label.trim() || provider;
@@ -695,27 +764,45 @@ function AppCenterPanel({
     }
     void actions.openFactoryJobAgentSession?.(agentSessionId, job.provider);
   };
-  const cardActions = {
-    ...actions,
-    deleteApp: (appId, appName) => {
-      setPendingDeleteApp({
-        id: appId,
-        installed: viewModel.apps.find((app) => app.id === appId)?.installed ?? false,
-        name: appName
-      });
-    },
-    uninstallApp: (appId) => {
-      const app = viewModel.apps.find((item) => item.id === appId);
-      if (!app) {
-        return;
+  const cardActions = useMemo2(
+    () => ({
+      ...actions,
+      deleteApp: (appId, appName) => {
+        setPendingDeleteApp({
+          id: appId,
+          installed: viewModel.apps.find((app) => app.id === appId)?.installed ?? false,
+          name: appName
+        });
+      },
+      uninstallApp: (appId) => {
+        const app = viewModel.apps.find((item) => item.id === appId);
+        if (!app) {
+          return;
+        }
+        setPendingUninstallApp({
+          id: app.id,
+          name: app.name,
+          sourceKind: app.sourceKind
+        });
+      },
+      updateApp: (appId, trigger) => {
+        const app = viewModel.apps.find((item) => item.id === appId);
+        if (!app) {
+          return;
+        }
+        if (app.installed && app.status === "running") {
+          setPendingUpdateApp({
+            id: app.id,
+            name: app.name,
+            trigger
+          });
+          return;
+        }
+        void actions.updateApp?.(appId, trigger);
       }
-      setPendingUninstallApp({
-        id: app.id,
-        name: app.name,
-        sourceKind: app.sourceKind
-      });
-    }
-  };
+    }),
+    [actions, viewModel.apps]
+  );
   const loadingMessage = catalogStatus === "loading" ? copy.t("messages.catalogLoading") : null;
   const catalogLoading = catalogStatus === "loading";
   const failedMessage = catalogStatus === "failed" ? copy.t("messages.catalogFailed") : null;
@@ -775,6 +862,9 @@ function AppCenterPanel({
   const uninstallAppConfirmTitle = copy.t("confirmations.uninstallAppTitle", {
     name: pendingUninstallApp?.name ?? ""
   });
+  const updateAppConfirmTitle = copy.t("confirmations.updateAppTitle", {
+    name: pendingUpdateApp?.name ?? ""
+  });
   return /* @__PURE__ */ jsxs2(
     "section",
     {
@@ -785,7 +875,7 @@ function AppCenterPanel({
       ),
       children: [
         statusToast ? /* @__PURE__ */ jsx2(AppCenterStatusToast, { toast: statusToast }) : null,
-        /* @__PURE__ */ jsx2("div", { className: "flex min-h-0 flex-1 flex-col gap-5 overflow-auto px-6 pb-6 pt-5 [container-type:inline-size]", children: /* @__PURE__ */ jsxs2("section", { className: "flex min-w-0 flex-col gap-3", children: [
+        /* @__PURE__ */ jsx2("div", { className: "flex min-h-0 flex-1 flex-col gap-5 overflow-auto px-6 pb-6 pt-5 [container-type:inline-size]", children: /* @__PURE__ */ jsxs2("section", { className: "flex min-h-0 min-w-0 flex-1 flex-col gap-3", children: [
           /* @__PURE__ */ jsxs2("div", { className: "flex h-8 min-w-0 items-center justify-between gap-3", children: [
             /* @__PURE__ */ jsx2(
               SectionTabs,
@@ -1024,6 +1114,35 @@ function AppCenterPanel({
             }
           }
         ),
+        /* @__PURE__ */ jsx2(
+          ConfirmationDialog,
+          {
+            cancelLabel: copy.t("actions.cancel"),
+            confirmBusy: updateAppBusy,
+            confirmLabel: copy.t("actions.updateApp"),
+            description: copy.t("confirmations.updateRunningAppDescription"),
+            open: pendingUpdateApp != null,
+            title: updateAppConfirmTitle,
+            onConfirm: () => {
+              const app = pendingUpdateApp;
+              if (!app) {
+                return;
+              }
+              setUpdateAppBusy(true);
+              void Promise.resolve(
+                actions.updateApp?.(app.id, app.trigger)
+              ).finally(() => {
+                setUpdateAppBusy(false);
+                setPendingUpdateApp(null);
+              });
+            },
+            onOpenChange: (nextOpen) => {
+              if (!nextOpen && !updateAppBusy) {
+                setPendingUpdateApp(null);
+              }
+            }
+          }
+        ),
         /* @__PURE__ */ jsx2(
           Dialog,
           {
@@ -1471,7 +1590,7 @@ function AppCardGrid({
       "div",
       {
         "aria-label": title,
-        className: "flex min-h-[min(360px,45vh)] min-w-0 flex-1 items-center justify-center rounded-[8px] px-6 text-center text-[13px] leading-5 text-[var(--text-secondary)]",
+        className: "flex min-h-0 min-w-0 flex-1 items-center justify-center rounded-[8px] px-6 text-center text-[13px] leading-5 text-[var(--text-secondary)]",
         role: "status",
         children: emptyMessage
       }
@@ -1524,7 +1643,7 @@ function RecommendedCategoryTabs({
     "div",
     {
       "aria-label": copy.t("labels.appCategories"),
-      className: "-mx-1 flex min-w-0 items-center gap-2 overflow-x-auto px-1 py-1",
+      className: "-mx-1 flex min-h-10 min-w-0 items-center gap-2 overflow-x-auto px-1 py-1",
       role: "tablist",
       children: tabs.map((tab) => {
         const selected = tab.id === value;
@@ -1533,8 +1652,8 @@ function RecommendedCategoryTabs({
           {
             "aria-selected": selected,
             className: cn2(
-              "flex h-8 shrink-0 items-center rounded-[8px] px-3 text-[13px] font-semibold leading-5 tracking-[0] transition-colors duration-150 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--border-focus)]",
-              selected ? "border border-[color:var(--line-1)] bg-[var(--background-fronted)] text-[var(--text-primary)]" : "border border-transparent text-[var(--text-tertiary)] hover:text-[var(--text-primary)]"
+              "flex h-8 shrink-0 items-center rounded-[8px] px-3 text-[13px] font-semibold leading-5 tracking-[0] transition-colors duration-150 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-[var(--border-focus)]",
+              selected ? "bg-[var(--background-fronted)] text-[var(--text-primary)] shadow-[inset_0_0_0_1px_var(--line-1)]" : "text-[var(--text-tertiary)] hover:text-[var(--text-primary)]"
             ),
             role: "tab",
             type: "button",