@tutti-os/workspace-app-center 0.0.1

package/dist/ui/index.js

@@ -0,0 +1,1619 @@
+import {
+  resolveDefaultAppFactoryProvider,
+  resolveSelectedAppFactoryProvider,
+  sortMyAppsByCreatedDesc,
+  sortRecommendedApps,
+  sortRecommendedAppsForAllTab
+} from "../chunk-LBSZLLZK.js";
+
+// src/ui/AppCard.tsx
+import {
+  Button,
+  ChatIcon,
+  DeleteIcon,
+  EditIcon,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  FolderIcon,
+  MoreHorizontalIcon,
+  NavApplicationsFilledIcon,
+  UninstallIcon,
+  UploadIcon,
+  cn
+} from "@tutti-os/ui-system";
+import { jsx, jsxs } from "react/jsx-runtime";
+function AppCard({
+  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 canExecutePrimaryAction = app.primaryAction !== "none";
+  const canOpenFromCard = app.canOpen;
+  const canPublishFactoryUpdate = app.canPublishFactoryUpdate && !!app.factoryJobId;
+  const canOpenFactorySession = app.canOpenFactorySession && !!app.factoryAgentSessionId && !!app.factoryJobId;
+  const hasMoreActions = canPublishFactoryUpdate || canOpenFactorySession || app.canExport || app.canDelete || app.canReplaceIcon || app.canOpenFolder || app.canOpenPackageFolder || app.canUninstall;
+  const executePrimaryAction = () => {
+    if (app.primaryAction === "retry") {
+      void actions.retryApp?.(app.id);
+      return;
+    }
+    if (app.primaryAction === "install") {
+      void actions.installApp?.(app.id);
+      return;
+    }
+    if (app.primaryAction === "update") {
+      void actions.updateApp?.(app.id, "primary_action");
+      return;
+    }
+    if (app.primaryAction === "open") {
+      void actions.openApp?.(app.id);
+    }
+  };
+  const executeCardAction = () => {
+    if (canOpenFromCard) {
+      void actions.openApp?.(app.id);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "article",
+    {
+      "aria-disabled": canOpenFromCard ? void 0 : true,
+      className: cn(
+        "group flex h-full min-h-[168px] min-w-0 flex-col rounded-[12px] border border-[color:var(--line-2)] bg-[var(--background-fronted)] p-[12px] text-left text-[var(--text-primary)] transition-transform duration-200 ease-out will-change-transform hover:-translate-y-0.5 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color-mix(in_srgb,var(--border-focus)_70%,transparent)] motion-reduce:transition-none motion-reduce:hover:translate-y-0",
+        canOpenFromCard ? "cursor-pointer" : "cursor-default",
+        className
+      ),
+      "data-app-center-app-id": app.id,
+      role: "listitem",
+      tabIndex: canOpenFromCard ? 0 : -1,
+      onClick: executeCardAction,
+      onKeyDown: (event) => {
+        if (!canOpenFromCard || event.key !== "Enter" && event.key !== " ") {
+          return;
+        }
+        event.preventDefault();
+        executeCardAction();
+      },
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+          /* @__PURE__ */ jsx(
+            AppIcon,
+            {
+              app,
+              replaceIconLabel: copy.t("actions.replaceIcon"),
+              onReplaceIcon: () => {
+                void actions.replaceAppIcon?.(app.id);
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [
+            hasMoreActions ? /* @__PURE__ */ jsx(
+              AppCardMoreActions,
+              {
+                actions,
+                app,
+                canOpenFactorySession,
+                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
+              }
+            )
+          ] })
+        ] }),
+        /* @__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-[16px] 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-[12px] 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
+        ] })
+      ]
+    }
+  );
+}
+function AppCardMoreActions({
+  actions,
+  app,
+  canOpenFactorySession,
+  canPublishFactoryUpdate,
+  copy
+}) {
+  const menuItems = [];
+  if (canPublishFactoryUpdate) {
+    menuItems.push({
+      attention: true,
+      icon: /* @__PURE__ */ jsx(UploadIcon, {}),
+      key: "publish",
+      label: copy.t("actions.publishAppUpdate"),
+      onSelect: () => {
+        void actions.publishFactoryJob?.(app.factoryJobId ?? "");
+      }
+    });
+  }
+  if (canOpenFactorySession) {
+    menuItems.push({
+      icon: /* @__PURE__ */ jsx(ChatIcon, {}),
+      key: "modify-app-with-agent",
+      label: copy.t("actions.modifyAppWithAgent"),
+      onSelect: () => {
+        void actions.modifyAppWithAgent?.(
+          app.factoryJobId ?? "",
+          app.factoryAgentSessionId ?? "",
+          app.factoryProvider
+        );
+      }
+    });
+  }
+  if (app.canReplaceIcon) {
+    menuItems.push({
+      icon: /* @__PURE__ */ jsx(EditIcon, {}),
+      key: "replace-icon",
+      label: copy.t("actions.replaceIcon"),
+      onSelect: () => {
+        void actions.replaceAppIcon?.(app.id);
+      }
+    });
+  }
+  if (app.canOpenFolder) {
+    menuItems.push({
+      icon: /* @__PURE__ */ jsx(FolderIcon, {}),
+      key: "open-folder",
+      label: copy.t("actions.openAppFolder"),
+      onSelect: () => {
+        void actions.openAppFolder?.(app.id);
+      }
+    });
+  }
+  if (app.canOpenPackageFolder) {
+    menuItems.push({
+      icon: /* @__PURE__ */ jsx(FolderIcon, {}),
+      key: "open-package-folder",
+      label: copy.t("actions.openAppPackageFolder"),
+      onSelect: () => {
+        void actions.openAppPackageFolder?.(app.id);
+      }
+    });
+  }
+  if (app.canExport) {
+    menuItems.push({
+      icon: /* @__PURE__ */ jsx(UploadIcon, {}),
+      key: "export",
+      label: copy.t("actions.exportApp"),
+      onSelect: () => {
+        void actions.exportApp?.(app.id);
+      }
+    });
+  }
+  if (app.canUninstall) {
+    menuItems.push({
+      icon: /* @__PURE__ */ jsx(UninstallIcon, {}),
+      key: "uninstall",
+      label: copy.t("actions.uninstallApp"),
+      onSelect: () => {
+        void actions.uninstallApp?.(app.id);
+      },
+      variant: "destructive"
+    });
+  }
+  if (app.canDelete) {
+    menuItems.push({
+      icon: /* @__PURE__ */ jsx(DeleteIcon, {}),
+      key: "delete",
+      label: copy.t(
+        app.installed ? "actions.uninstallAndDeleteApp" : "actions.deleteApp"
+      ),
+      onSelect: () => {
+        void actions.deleteApp?.(app.id, app.name);
+      },
+      variant: "destructive"
+    });
+  }
+  return /* @__PURE__ */ jsx(
+    AppCenterActionMenu,
+    {
+      ariaLabel: copy.t("actions.moreActions"),
+      attention: canPublishFactoryUpdate,
+      items: menuItems,
+      triggerTitle: copy.t("actions.moreActions")
+    }
+  );
+}
+function AppCenterActionMenu({
+  ariaLabel,
+  attention = false,
+  items,
+  triggerTitle
+}) {
+  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      Button,
+      {
+        "aria-label": ariaLabel,
+        className: "relative",
+        size: "icon",
+        title: triggerTitle,
+        type: "button",
+        variant: "ghost",
+        onClick: (event) => {
+          event.stopPropagation();
+        },
+        children: [
+          /* @__PURE__ */ jsx(MoreHorizontalIcon, {}),
+          attention ? /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: "absolute right-1.5 top-1.5 size-1.5 rounded-full bg-[var(--state-danger)] shadow-[0_0_0_2px_var(--background-fronted)]"
+            }
+          ) : null
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      DropdownMenuContent,
+      {
+        align: "start",
+        className: "min-w-[192px]",
+        collisionPadding: 12,
+        side: "bottom",
+        style: { zIndex: "var(--z-panel-popover)" },
+        onClick: (event) => {
+          event.stopPropagation();
+        },
+        onPointerDown: (event) => {
+          event.stopPropagation();
+        },
+        onKeyDown: (event) => {
+          event.stopPropagation();
+        },
+        children: /* @__PURE__ */ jsx(DropdownMenuGroup, { className: "gap-[2px]", children: items.map((item) => /* @__PURE__ */ jsxs(
+          DropdownMenuItem,
+          {
+            className: "font-normal",
+            variant: item.variant,
+            onSelect: (event) => {
+              event.stopPropagation();
+              item.onSelect();
+            },
+            children: [
+              item.icon,
+              /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: item.label }),
+              item.attention ? /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  className: "ml-2 size-1.5 flex-none rounded-full bg-[var(--state-danger)]"
+                }
+              ) : null
+            ]
+          },
+          item.key
+        )) })
+      }
+    )
+  ] });
+}
+function AppIcon({
+  app,
+  onReplaceIcon,
+  replaceIconLabel
+}) {
+  const icon = app.icon?.type === "asset" ? /* @__PURE__ */ jsx(
+    "img",
+    {
+      alt: "",
+      className: "size-11 flex-none rounded-[10px] object-contain object-center select-none",
+      draggable: false,
+      src: app.icon.src
+    }
+  ) : /* @__PURE__ */ jsx("span", { className: "flex size-11 flex-none items-center justify-center rounded-[10px] bg-[var(--transparency-block)] text-[var(--text-secondary)]", children: /* @__PURE__ */ jsx(NavApplicationsFilledIcon, { className: "size-[22px]" }) });
+  return /* @__PURE__ */ jsxs("span", { className: "group/app-icon relative block size-11 flex-none", children: [
+    icon,
+    app.canReplaceIcon ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        "aria-label": replaceIconLabel,
+        className: "absolute inset-0 flex size-11 items-center justify-center rounded-[10px] bg-black/55 p-0 text-white opacity-0 transition-opacity duration-150 group-hover/app-icon:opacity-100 focus-visible:opacity-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color-mix(in_srgb,var(--border-focus)_70%,transparent)]",
+        title: replaceIconLabel,
+        type: "button",
+        onClick: (event) => {
+          event.stopPropagation();
+          event.currentTarget.blur();
+          onReplaceIcon();
+        },
+        onPointerDown: (event) => {
+          event.stopPropagation();
+        },
+        children: /* @__PURE__ */ jsx(EditIcon, { className: "size-3.5" })
+      }
+    ) : null
+  ] });
+}
+function statusClassName(status) {
+  if (status === "failed") {
+    return "text-[var(--state-danger)]";
+  }
+  if (status === "running") {
+    return "text-[var(--text-primary)]";
+  }
+  return "text-[var(--text-secondary)]";
+}
+
+// src/ui/AppCenterPanel.tsx
+import { useEffect, useId, useMemo, useState } from "react";
+import {
+  Badge,
+  BareIconButton,
+  Button as Button2,
+  CloseIcon,
+  ConfirmationDialog,
+  DeleteIcon as DeleteIcon2,
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  FileCreateIcon,
+  Input,
+  OpenSessionsIcon as OpenSessionsFilledIcon,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectSplitColumn,
+  SelectSplitColumnItems,
+  SelectSplitColumnLabel,
+  SelectSplitDivider,
+  SelectSplitLayout,
+  SelectTrigger,
+  SelectValue,
+  SectionTabs,
+  Spinner,
+  Textarea,
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+  ToastProvider,
+  ToastRoot,
+  ToastTitle,
+  UploadIcon as ImportIcon,
+  cn as cn2
+} from "@tutti-os/ui-system";
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var factoryTemplates = [
+  {
+    defaultNameKey: "factory.templates.weather.defaultName",
+    id: "weather",
+    promptKey: "factory.templates.weather.prompt",
+    titleKey: "factory.templates.weather.title"
+  },
+  {
+    defaultNameKey: "factory.templates.lookup.defaultName",
+    id: "lookup",
+    promptKey: "factory.templates.lookup.prompt",
+    titleKey: "factory.templates.lookup.title"
+  },
+  {
+    defaultNameKey: "factory.templates.system.defaultName",
+    id: "system",
+    promptKey: "factory.templates.system.prompt",
+    titleKey: "factory.templates.system.title"
+  },
+  {
+    defaultNameKey: "factory.templates.news.defaultName",
+    id: "news",
+    promptKey: "factory.templates.news.prompt",
+    titleKey: "factory.templates.news.title"
+  },
+  {
+    defaultNameKey: "factory.templates.gomoku.defaultName",
+    id: "gomoku",
+    promptKey: "factory.templates.gomoku.prompt",
+    titleKey: "factory.templates.gomoku.title"
+  }
+];
+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" }
+];
+function AppCenterPanel({
+  actions,
+  activeAppTab: controlledActiveAppTab,
+  catalogStatus,
+  className,
+  copy,
+  defaultAgentProvider = null,
+  errorMessage,
+  loadProviderConfiguration,
+  onActiveAppTabChange,
+  providerErrorMessage = null,
+  providerLoading = false,
+  providerOptions = [],
+  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 [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 normalizedProviderOptions = useMemo(
+    () => providerOptions.map((option) => {
+      const provider = option.provider.trim();
+      const label = option.label.trim() || provider;
+      if (!provider || !label) {
+        return null;
+      }
+      return {
+        ...option,
+        ...option.disabledReason?.trim() ? { disabledReason: option.disabledReason.trim() } : {},
+        ...option.iconUrl?.trim() ? { iconUrl: option.iconUrl.trim() } : {},
+        label,
+        provider
+      };
+    }).filter((option) => option != null),
+    [providerOptions]
+  );
+  const [selectedProvider, setSelectedProvider] = useState(
+    () => resolveDefaultAppFactoryProvider(
+      normalizedProviderOptions,
+      defaultAgentProvider
+    )
+  );
+  const [uncontrolledActiveAppTab, setUncontrolledActiveAppTab] = useState("recommended");
+  const [activeRecommendedCategoryTab, setActiveRecommendedCategoryTab] = useState("all");
+  const activeAppTab = controlledActiveAppTab ?? uncontrolledActiveAppTab;
+  useEffect(() => {
+    setSelectedProvider(
+      (current) => resolveSelectedAppFactoryProvider(
+        current,
+        normalizedProviderOptions,
+        defaultAgentProvider
+      )
+    );
+  }, [defaultAgentProvider, normalizedProviderOptions]);
+  const selectedProviderOption = normalizedProviderOptions.find(
+    (option) => option.provider === selectedProvider
+  ) ?? null;
+  useEffect(() => {
+    if (!factoryDialogOpen) {
+      setProviderConfiguration(null);
+      setProviderConfigurationStatus("idle");
+      return;
+    }
+    const provider = selectedProviderOption?.provider?.trim() ?? "";
+    if (!provider || !loadProviderConfiguration) {
+      setProviderConfiguration(null);
+      setProviderConfigurationStatus("ready");
+      return;
+    }
+    let canceled = false;
+    setProviderConfiguration(null);
+    setProviderConfigurationStatus("loading");
+    void loadProviderConfiguration(provider).then((configuration) => {
+      if (canceled) {
+        return;
+      }
+      setProviderConfiguration(configuration);
+      setProviderConfigurationStatus("ready");
+    }).catch(() => {
+      if (canceled) {
+        return;
+      }
+      setProviderConfiguration(null);
+      setProviderConfigurationStatus("ready");
+    });
+    return () => {
+      canceled = true;
+    };
+  }, [
+    factoryDialogOpen,
+    loadProviderConfiguration,
+    selectedProvider,
+    selectedProviderOption?.provider
+  ]);
+  const modelOptions = providerConfiguration?.modelOptions ?? [];
+  const permissionModeOptions = providerConfiguration?.permissionModeOptions ?? [];
+  const reasoningEffortOptions = providerConfiguration?.reasoningEffortOptions ?? [];
+  useEffect(() => {
+    setSelectedModel(
+      (current) => resolveSelectedFactoryOptionValue(
+        current,
+        modelOptions,
+        providerConfiguration?.defaultModel
+      )
+    );
+  }, [modelOptions, providerConfiguration?.defaultModel]);
+  useEffect(() => {
+    setSelectedPermissionModeId(
+      (current) => resolveSelectedFactoryOptionValue(
+        current,
+        permissionModeOptions,
+        providerConfiguration?.defaultPermissionModeId
+      )
+    );
+  }, [permissionModeOptions, providerConfiguration?.defaultPermissionModeId]);
+  useEffect(() => {
+    setSelectedReasoningEffort(
+      (current) => resolveSelectedFactoryOptionValue(
+        current,
+        reasoningEffortOptions,
+        providerConfiguration?.defaultReasoningEffort
+      )
+    );
+  }, [providerConfiguration?.defaultReasoningEffort, reasoningEffortOptions]);
+  const setActiveAppTab = (tab) => {
+    if (controlledActiveAppTab === void 0) {
+      setUncontrolledActiveAppTab(tab);
+    }
+    onActiveAppTabChange?.(tab);
+  };
+  const factoryJobs = viewModel.factoryJobs ?? [];
+  const hasFactoryJobs = factoryJobs.length > 0;
+  const closeFactoryDialog = () => {
+    setFactoryDialogOpen(false);
+    setDisplayName("");
+    setPrompt("");
+    setProviderConfiguration(null);
+    setProviderConfigurationStatus("idle");
+    setOpenFactorySettingsMenu(null);
+    setSelectedModel("");
+    setSelectedPermissionModeId("");
+    setSelectedReasoningEffort("");
+  };
+  const openFactoryDialog = () => {
+    setSelectedProvider(
+      resolveDefaultAppFactoryProvider(
+        normalizedProviderOptions,
+        defaultAgentProvider
+      )
+    );
+    setSelectedModel("");
+    setSelectedPermissionModeId("");
+    setSelectedReasoningEffort("");
+    setProviderConfiguration(null);
+    setProviderConfigurationStatus("idle");
+    setOpenFactorySettingsMenu(null);
+    setFactoryDialogOpen(true);
+  };
+  const canCreateFactoryJob = !!displayName.trim() && !!prompt.trim() && providerConfigurationStatus !== "loading" && !!selectedProviderOption && selectedProviderOption.disabled !== true;
+  const submitCreate = (event) => {
+    event.preventDefault();
+    const normalizedDisplayName = displayName.trim();
+    const normalizedPrompt = prompt.trim();
+    if (!normalizedDisplayName || !normalizedPrompt || !selectedProviderOption || selectedProviderOption.disabled === true) {
+      return;
+    }
+    setDisplayName("");
+    setPrompt("");
+    setFactoryDialogOpen(false);
+    void actions.createFactoryJob?.({
+      displayName: normalizedDisplayName,
+      ...selectedModel.trim() ? { model: selectedModel.trim() } : {},
+      ...selectedPermissionModeId.trim() ? { permissionModeId: selectedPermissionModeId.trim() } : {},
+      provider: selectedProviderOption.provider,
+      prompt: normalizedPrompt,
+      ...selectedReasoningEffort.trim() ? { reasoningEffort: selectedReasoningEffort.trim() } : {}
+    });
+  };
+  const selectTemplate = (template) => {
+    setDisplayName(copy.t(template.defaultNameKey));
+    setPrompt(copy.t(template.promptKey));
+  };
+  const openFactoryJobAgentSession = (job) => {
+    const agentSessionId = job.agentSessionId?.trim();
+    if (!agentSessionId) {
+      return;
+    }
+    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;
+      }
+      setPendingUninstallApp({
+        id: app.id,
+        name: app.name,
+        sourceKind: app.sourceKind
+      });
+    }
+  };
+  const loadingMessage = catalogStatus === "loading" ? copy.t("messages.catalogLoading") : null;
+  const failedMessage = catalogStatus === "failed" ? copy.t("messages.catalogFailed") : null;
+  const statusToast = errorMessage != null ? {
+    busy: false,
+    message: errorMessage,
+    tone: "destructive"
+  } : failedMessage != null ? {
+    busy: false,
+    message: failedMessage,
+    tone: "destructive"
+  } : loadingMessage != null ? {
+    busy: true,
+    message: loadingMessage,
+    tone: "default"
+  } : null;
+  const myApps = sortMyAppsByCreatedDesc(
+    viewModel.apps.filter((app) => app.sourceKind === "local")
+  );
+  const recommendedSourceApps = viewModel.apps.filter(
+    (app) => app.sourceKind !== "local"
+  );
+  const recommendedApps = sortRecommendedApps(recommendedSourceApps);
+  const recommendedAppsForAllTab = sortRecommendedAppsForAllTab(
+    recommendedSourceApps
+  );
+  const recommendedCategoryTabs = createRecommendedCategoryTabs(
+    recommendedApps,
+    copy
+  );
+  const activeRecommendedCategoryLabel = recommendedCategoryTabs.find(
+    (tab) => tab.id === activeRecommendedCategoryTab
+  )?.category ?? null;
+  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 pendingDeleteAppInstalled = pendingDeleteApp?.installed ?? false;
+  const deleteAppConfirmLabel = copy.t(
+    pendingDeleteAppInstalled ? "actions.uninstallAndDeleteApp" : "actions.deleteApp"
+  );
+  const deleteAppConfirmDescription = copy.t(
+    pendingDeleteAppInstalled ? "confirmations.uninstallAndDeleteAppDescription" : "confirmations.deleteAppDescription"
+  );
+  const deleteAppConfirmTitle = copy.t(
+    pendingDeleteAppInstalled ? "confirmations.uninstallAndDeleteAppTitle" : "confirmations.deleteAppTitle",
+    {
+      name: pendingDeleteApp?.name ?? ""
+    }
+  );
+  const pendingUninstallAppLocal = pendingUninstallApp?.sourceKind === "local";
+  const uninstallAppConfirmDescription = copy.t(
+    pendingUninstallAppLocal ? "confirmations.uninstallAppDescriptionLocal" : "confirmations.uninstallAppDescriptionRecommended"
+  );
+  const uninstallAppConfirmTitle = copy.t("confirmations.uninstallAppTitle", {
+    name: pendingUninstallApp?.name ?? ""
+  });
+  return /* @__PURE__ */ jsxs2(
+    "section",
+    {
+      "aria-label": copy.t("title"),
+      className: cn2(
+        "relative flex h-full min-h-0 w-full min-w-0 flex-col overflow-hidden bg-[var(--background-panel)] text-[var(--text-primary)]",
+        className
+      ),
+      children: [
+        statusToast ? /* @__PURE__ */ jsx2(AppCenterStatusToast, { toast: statusToast }) : null,
+        /* @__PURE__ */ jsxs2("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: [
+          hasFactoryJobs ? /* @__PURE__ */ jsxs2("section", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsx2("h2", { className: "mb-3 text-[15px] font-semibold leading-5 tracking-[0] text-[var(--text-primary)]", children: copy.t("factory.labels.jobs") }),
+            /* @__PURE__ */ jsx2("div", { className: "flex min-w-0 flex-col gap-2", children: factoryJobs.map((job) => /* @__PURE__ */ jsxs2(
+              "article",
+              {
+                "aria-disabled": job.canOpenAgentSession ? void 0 : true,
+                className: cn2(
+                  "group flex min-w-0 items-center justify-between gap-3 rounded-[8px] border border-[color:var(--line-2)] bg-[var(--background-fronted)] p-[12px] text-left transition-colors duration-150 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--border-focus)]",
+                  job.canOpenAgentSession ? "cursor-pointer hover:bg-[var(--transparency-block)]" : "cursor-default"
+                ),
+                role: "button",
+                tabIndex: job.canOpenAgentSession ? 0 : -1,
+                onClick: () => openFactoryJobAgentSession(job),
+                onKeyDown: (event) => {
+                  if (!job.canOpenAgentSession || event.currentTarget !== event.target || event.key !== "Enter" && event.key !== " ") {
+                    return;
+                  }
+                  event.preventDefault();
+                  openFactoryJobAgentSession(job);
+                },
+                children: [
+                  /* @__PURE__ */ jsxs2("div", { className: "min-w-0", children: [
+                    /* @__PURE__ */ jsxs2("div", { className: "flex min-w-0 items-center gap-2", children: [
+                      /* @__PURE__ */ jsx2("h3", { className: "truncate text-[13px] font-semibold leading-5 text-[var(--text-primary)]", children: job.title }),
+                      /* @__PURE__ */ jsx2(FactoryJobStatusIndicator, { copy, job })
+                    ] }),
+                    job.failureReason ? /* @__PURE__ */ jsx2(
+                      "p",
+                      {
+                        className: "mt-2 truncate text-[12px] leading-4 text-[var(--state-danger)]",
+                        title: job.failureReason,
+                        children: copy.t("factory.messages.factoryJobFailed")
+                      }
+                    ) : /* @__PURE__ */ jsx2("p", { className: "mt-2 truncate text-[12px] leading-4 text-[var(--text-secondary)]", children: job.prompt })
+                  ] }),
+                  /* @__PURE__ */ jsxs2("div", { className: "flex shrink-0 items-center gap-1", children: [
+                    job.canRetryValidation ? /* @__PURE__ */ jsx2(
+                      Button2,
+                      {
+                        size: "sm",
+                        type: "button",
+                        variant: "ghost",
+                        onClick: (event) => {
+                          event.stopPropagation();
+                          void actions.retryFactoryValidation?.(job.id);
+                        },
+                        children: copy.t("factory.actions.validate")
+                      }
+                    ) : null,
+                    job.canPublish ? /* @__PURE__ */ jsx2(
+                      Button2,
+                      {
+                        size: "sm",
+                        type: "button",
+                        variant: "ghost",
+                        onClick: (event) => {
+                          event.stopPropagation();
+                          void actions.publishFactoryJob?.(job.id);
+                        },
+                        children: copy.t("factory.actions.publish")
+                      }
+                    ) : null,
+                    job.canFix ? /* @__PURE__ */ jsx2(
+                      Button2,
+                      {
+                        size: "sm",
+                        type: "button",
+                        variant: "ghost",
+                        onClick: (event) => {
+                          event.stopPropagation();
+                          void actions.fixFactoryJob?.(
+                            job.id,
+                            copy.t("factory.prompts.fixDefault")
+                          );
+                        },
+                        children: copy.t("factory.actions.fix")
+                      }
+                    ) : null,
+                    job.canCancel ? /* @__PURE__ */ jsx2(
+                      Button2,
+                      {
+                        "aria-label": copy.t("factory.actions.cancel"),
+                        className: "opacity-0 transition-opacity duration-150 group-hover:opacity-100 group-focus-within:opacity-100",
+                        size: "icon-sm",
+                        title: copy.t("factory.actions.cancel"),
+                        type: "button",
+                        variant: "ghost",
+                        onClick: (event) => {
+                          event.stopPropagation();
+                          void actions.cancelFactoryJob?.(job.id);
+                        },
+                        children: /* @__PURE__ */ jsx2(CloseIcon, {})
+                      }
+                    ) : null,
+                    job.canDelete ? /* @__PURE__ */ jsx2(
+                      BareIconButton,
+                      {
+                        "aria-label": copy.t("factory.actions.delete"),
+                        className: "text-[var(--text-secondary)]",
+                        size: "md",
+                        title: copy.t("factory.actions.delete"),
+                        type: "button",
+                        onClick: (event) => {
+                          event.stopPropagation();
+                          void actions.deleteFactoryJob?.(job.id);
+                        },
+                        children: /* @__PURE__ */ jsx2(DeleteIcon2, {})
+                      }
+                    ) : null
+                  ] })
+                ]
+              },
+              job.id
+            )) })
+          ] }) : null,
+          /* @__PURE__ */ jsxs2("section", { className: "flex min-w-0 flex-col gap-3", children: [
+            /* @__PURE__ */ jsxs2("div", { className: "flex min-w-0 items-center justify-between gap-3", children: [
+              /* @__PURE__ */ jsx2(
+                SectionTabs,
+                {
+                  ariaLabel: copy.t("labels.appList"),
+                  tabs: [
+                    {
+                      label: copy.t("labels.recommendedApps"),
+                      value: "recommended"
+                    },
+                    {
+                      label: copy.t("labels.myApps"),
+                      value: "my"
+                    }
+                  ],
+                  value: activeAppTab,
+                  onValueChange: setActiveAppTab
+                }
+              ),
+              /* @__PURE__ */ jsx2("div", { className: "flex shrink-0 items-center gap-1", children: activeAppTab === "my" ? /* @__PURE__ */ jsx2(
+                AppCenterHeaderActions,
+                {
+                  copy,
+                  onCreateApp: () => {
+                    openFactoryDialog();
+                  },
+                  onImportApp: () => {
+                    void actions.importApp?.();
+                  }
+                }
+              ) : /* @__PURE__ */ jsx2("div", { "aria-hidden": "true", className: "h-8 w-[172px]" }) })
+            ] }),
+            viewModel.empty ? /* @__PURE__ */ jsx2("p", { className: "text-[13px] leading-5 text-[var(--text-secondary)]", children: copy.t("messages.empty") }) : null,
+            activeAppTab === "recommended" ? /* @__PURE__ */ jsx2(
+              RecommendedCategoryTabs,
+              {
+                copy,
+                tabs: recommendedCategoryTabs,
+                value: activeRecommendedCategoryTab,
+                onValueChange: setActiveRecommendedCategoryTab
+              }
+            ) : null,
+            /* @__PURE__ */ jsx2(
+              AppCardGrid,
+              {
+                actions: cardActions,
+                apps: activeApps,
+                copy,
+                emptyMessage: activeAppEmptyMessage,
+                title: activeAppTabTitle
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx2(
+          ConfirmationDialog,
+          {
+            cancelLabel: copy.t("actions.cancel"),
+            confirmBusy: deleteAppBusy,
+            confirmLabel: deleteAppConfirmLabel,
+            description: deleteAppConfirmDescription,
+            open: pendingDeleteApp != null,
+            title: deleteAppConfirmTitle,
+            tone: "destructive",
+            onConfirm: () => {
+              const app = pendingDeleteApp;
+              if (!app) {
+                return;
+              }
+              setDeleteAppBusy(true);
+              void Promise.resolve(actions.deleteApp?.(app.id, app.name)).finally(
+                () => {
+                  setDeleteAppBusy(false);
+                  setPendingDeleteApp(null);
+                }
+              );
+            },
+            onOpenChange: (nextOpen) => {
+              if (!nextOpen && !deleteAppBusy) {
+                setPendingDeleteApp(null);
+              }
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          ConfirmationDialog,
+          {
+            cancelLabel: copy.t("actions.cancel"),
+            confirmBusy: uninstallAppBusy,
+            confirmLabel: copy.t("actions.uninstallApp"),
+            description: uninstallAppConfirmDescription,
+            open: pendingUninstallApp != null,
+            title: uninstallAppConfirmTitle,
+            tone: "destructive",
+            onConfirm: () => {
+              const app = pendingUninstallApp;
+              if (!app) {
+                return;
+              }
+              setUninstallAppBusy(true);
+              void Promise.resolve(actions.uninstallApp?.(app.id)).finally(() => {
+                setUninstallAppBusy(false);
+                setPendingUninstallApp(null);
+              });
+            },
+            onOpenChange: (nextOpen) => {
+              if (!nextOpen && !uninstallAppBusy) {
+                setPendingUninstallApp(null);
+              }
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          Dialog,
+          {
+            open: factoryDialogOpen,
+            onOpenChange: (nextOpen) => {
+              if (!nextOpen) {
+                closeFactoryDialog();
+                return;
+              }
+              openFactoryDialog();
+            },
+            children: /* @__PURE__ */ jsx2(
+              DialogContent,
+              {
+                className: "sm:max-w-[min(640px,calc(100%-2rem))]",
+                showCloseButton: false,
+                children: /* @__PURE__ */ jsxs2(
+                  "form",
+                  {
+                    className: "grid max-h-[min(760px,calc(100vh-64px))] min-w-0 gap-4 overflow-auto",
+                    onSubmit: submitCreate,
+                    children: [
+                      /* @__PURE__ */ jsx2(DialogHeader, { children: /* @__PURE__ */ jsx2(DialogTitle, { children: copy.t("factory.labels.create") }) }),
+                      /* @__PURE__ */ jsxs2("label", { className: "grid min-w-0 gap-2", children: [
+                        /* @__PURE__ */ jsx2("span", { className: "text-[12px] font-semibold leading-4 text-[var(--text-secondary)]", children: copy.t("factory.labels.appName") }),
+                        /* @__PURE__ */ jsx2(
+                          Input,
+                          {
+                            autoFocus: true,
+                            className: "h-9 rounded-[8px]",
+                            placeholder: copy.t("factory.placeholders.appName"),
+                            value: displayName,
+                            onChange: (event) => setDisplayName(event.currentTarget.value)
+                          }
+                        )
+                      ] }),
+                      /* @__PURE__ */ jsxs2("div", { className: "grid min-w-0 gap-4", children: [
+                        /* @__PURE__ */ jsxs2("div", { className: "grid min-w-0 gap-2", children: [
+                          /* @__PURE__ */ jsx2(
+                            "label",
+                            {
+                              className: "text-[12px] font-semibold leading-4 text-[var(--text-secondary)]",
+                              htmlFor: promptTextareaId,
+                              children: copy.t("factory.labels.prompt")
+                            }
+                          ),
+                          /* @__PURE__ */ jsxs2("div", { className: "relative min-w-0", children: [
+                            /* @__PURE__ */ jsx2(
+                              Textarea,
+                              {
+                                className: "min-h-[148px] resize-none rounded-[10px] border border-[color:var(--line-2)] bg-[var(--background-fronted)] pb-14 leading-[1.45] sm:pb-8",
+                                id: promptTextareaId,
+                                placeholder: copy.t("factory.placeholders.prompt"),
+                                value: prompt,
+                                onChange: (event) => setPrompt(event.currentTarget.value)
+                              }
+                            ),
+                            /* @__PURE__ */ jsxs2("div", { className: "pointer-events-none absolute inset-x-3 bottom-1.5 flex min-w-0 flex-wrap items-end justify-between gap-2", children: [
+                              providerErrorMessage && normalizedProviderOptions.length === 0 ? /* @__PURE__ */ jsx2("p", { className: "pointer-events-auto max-w-[240px] text-[12px] leading-4 text-[var(--state-danger)]", children: providerErrorMessage }) : /* @__PURE__ */ jsx2("span", { "aria-hidden": "true", className: "min-h-4 flex-1" }),
+                              /* @__PURE__ */ jsxs2("div", { className: "pointer-events-auto flex min-w-0 max-w-full flex-wrap items-center justify-end gap-0.5 px-0.5 py-0", children: [
+                                /* @__PURE__ */ jsx2(
+                                  FactoryProviderSelect,
+                                  {
+                                    copy,
+                                    errorMessage: providerErrorMessage,
+                                    loading: providerLoading,
+                                    open: openFactorySettingsMenu === "provider",
+                                    options: normalizedProviderOptions,
+                                    selectedProvider,
+                                    triggerClassName: "h-6 w-auto max-w-full border-0 bg-transparent px-1.5 text-[11px] font-medium text-[var(--text-secondary)] shadow-none hover:bg-transparent focus-visible:bg-transparent data-[placeholder]:text-[var(--text-tertiary)]",
+                                    onOpenChange: (nextOpen) => setOpenFactorySettingsMenu(
+                                      nextOpen ? "provider" : null
+                                    ),
+                                    onSelectProvider: setSelectedProvider
+                                  }
+                                ),
+                                /* @__PURE__ */ jsx2(
+                                  "div",
+                                  {
+                                    "aria-hidden": "true",
+                                    className: "h-4 w-px bg-[var(--line-2)]"
+                                  }
+                                ),
+                                /* @__PURE__ */ jsx2(
+                                  FactoryPermissionDropdown,
+                                  {
+                                    copy,
+                                    loading: providerConfigurationStatus === "loading",
+                                    open: openFactorySettingsMenu === "permission",
+                                    options: permissionModeOptions,
+                                    selectedPermissionModeId,
+                                    triggerClassName: "h-6 w-auto max-w-full border-0 bg-transparent px-1.5 text-[11px] font-medium text-[var(--text-secondary)] shadow-none hover:bg-transparent focus-visible:bg-transparent",
+                                    onOpenChange: (nextOpen) => setOpenFactorySettingsMenu(
+                                      nextOpen ? "permission" : null
+                                    ),
+                                    onSelectPermissionMode: setSelectedPermissionModeId
+                                  }
+                                ),
+                                /* @__PURE__ */ jsx2(
+                                  "div",
+                                  {
+                                    "aria-hidden": "true",
+                                    className: "h-4 w-px bg-[var(--line-2)]"
+                                  }
+                                ),
+                                /* @__PURE__ */ jsx2(
+                                  FactoryModelReasoningDropdown,
+                                  {
+                                    copy,
+                                    loading: providerConfigurationStatus === "loading",
+                                    modelOptions,
+                                    open: openFactorySettingsMenu === "modelReasoning",
+                                    reasoningEffortOptions,
+                                    selectedModel,
+                                    selectedReasoningEffort,
+                                    triggerClassName: "h-6 w-auto max-w-full border-0 bg-transparent px-1.5 text-[11px] font-medium text-[var(--text-secondary)] shadow-none hover:bg-transparent focus-visible:bg-transparent",
+                                    onOpenChange: (nextOpen) => setOpenFactorySettingsMenu(
+                                      nextOpen ? "modelReasoning" : null
+                                    ),
+                                    onSelectModel: setSelectedModel,
+                                    onSelectReasoningEffort: setSelectedReasoningEffort
+                                  }
+                                )
+                              ] })
+                            ] })
+                          ] })
+                        ] }),
+                        /* @__PURE__ */ jsxs2("fieldset", { className: "min-w-0 border-0 p-0", children: [
+                          /* @__PURE__ */ jsx2("legend", { className: "sr-only", children: copy.t("factory.labels.templates") }),
+                          /* @__PURE__ */ jsxs2("div", { className: "flex min-w-0 flex-wrap items-center gap-x-3 gap-y-2", children: [
+                            /* @__PURE__ */ jsx2("span", { className: "shrink-0 text-[14px] font-medium leading-5 text-[var(--text-secondary)]", children: copy.t("factory.labels.templateInspirationPrefix") }),
+                            factoryTemplates.map((template) => /* @__PURE__ */ jsxs2(
+                              "button",
+                              {
+                                className: "inline-flex max-w-full items-center gap-1 border-0 bg-transparent p-0 text-[14px] font-medium leading-5 text-[var(--text-secondary)] transition-colors duration-150 hover:text-[var(--text-primary)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--border-focus)]",
+                                type: "button",
+                                onClick: () => selectTemplate(template),
+                                children: [
+                                  /* @__PURE__ */ jsx2("span", { className: "truncate", children: copy.t(template.titleKey) }),
+                                  /* @__PURE__ */ jsx2(
+                                    OpenSessionsFilledIcon,
+                                    {
+                                      "aria-hidden": "true",
+                                      className: "shrink-0",
+                                      size: 14
+                                    }
+                                  )
+                                ]
+                              },
+                              template.id
+                            ))
+                          ] })
+                        ] })
+                      ] }),
+                      /* @__PURE__ */ jsxs2(DialogFooter, { children: [
+                        /* @__PURE__ */ jsx2(
+                          Button2,
+                          {
+                            size: "dialog",
+                            type: "button",
+                            variant: "ghost",
+                            onClick: closeFactoryDialog,
+                            children: copy.t("factory.actions.cancel")
+                          }
+                        ),
+                        /* @__PURE__ */ jsx2(
+                          Button2,
+                          {
+                            disabled: !canCreateFactoryJob,
+                            size: "dialog",
+                            type: "submit",
+                            children: copy.t("factory.actions.create")
+                          }
+                        )
+                      ] })
+                    ]
+                  }
+                )
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function FactoryProviderSelect({
+  copy,
+  errorMessage,
+  loading,
+  onOpenChange,
+  onSelectProvider,
+  open,
+  options,
+  selectedProvider,
+  triggerClassName
+}) {
+  const selectedOption = options.find((option) => option.provider === selectedProvider) ?? null;
+  const placeholder = options.length > 0 ? copy.t("factory.messages.noAgentProviders") : loading ? copy.t("factory.messages.loadingProviders") : errorMessage?.trim() || copy.t("factory.messages.noAgentProviders");
+  return /* @__PURE__ */ jsxs2(
+    Select,
+    {
+      disabled: options.length === 0,
+      open,
+      value: selectedOption?.provider,
+      onOpenChange,
+      onValueChange: onSelectProvider,
+      children: [
+        /* @__PURE__ */ jsx2(
+          SelectTrigger,
+          {
+            "aria-label": copy.t("factory.labels.agent"),
+            className: cn2(
+              "h-9 w-full rounded-[8px] px-3 font-normal [&_[data-slot=select-value]]:flex [&_[data-slot=select-value]]:min-w-0 [&_[data-slot=select-value]]:items-center [&_[data-slot=select-value]]:gap-2",
+              loading && options.length === 0 ? "animate-pulse" : null,
+              triggerClassName
+            ),
+            children: /* @__PURE__ */ jsx2(SelectValue, { placeholder, children: selectedOption ? /* @__PURE__ */ jsxs2("span", { className: "flex min-w-0 items-center gap-2", children: [
+              /* @__PURE__ */ jsx2(AppCenterAgentProviderIcon, { iconUrl: selectedOption.iconUrl }),
+              /* @__PURE__ */ jsx2("span", { className: "truncate", children: selectedOption.label })
+            ] }) : null })
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          SelectContent,
+          {
+            align: "start",
+            className: "w-[300px] min-w-[240px] max-w-[min(100vw-64px,480px)]",
+            style: { zIndex: "var(--z-dialog-popover)" },
+            children: options.length === 0 ? /* @__PURE__ */ jsx2(SelectItem, { disabled: true, value: "__no-provider__", children: copy.t("factory.messages.noAgentProviders") }) : options.map((option) => /* @__PURE__ */ jsx2(
+              SelectItem,
+              {
+                disabled: option.disabled === true,
+                title: option.disabledReason,
+                value: option.provider,
+                children: /* @__PURE__ */ jsxs2("span", { className: "flex min-w-0 items-center gap-2", children: [
+                  /* @__PURE__ */ jsx2(AppCenterAgentProviderIcon, { iconUrl: option.iconUrl }),
+                  /* @__PURE__ */ jsx2("span", { className: "truncate", children: option.label })
+                ] })
+              },
+              option.provider
+            ))
+          }
+        )
+      ]
+    }
+  );
+}
+function FactoryPermissionDropdown({
+  copy,
+  loading,
+  onOpenChange,
+  onSelectPermissionMode,
+  open,
+  options,
+  selectedPermissionModeId,
+  triggerClassName
+}) {
+  const selectedOption = options.find((option) => option.value === selectedPermissionModeId) ?? null;
+  const disabled = loading || options.length === 0;
+  const selectedLabel = selectedOption ? permissionOptionLabel(copy, selectedOption) : selectedPermissionModeId;
+  return /* @__PURE__ */ jsxs2(
+    Select,
+    {
+      disabled,
+      open,
+      value: selectedOption?.value,
+      onOpenChange,
+      onValueChange: onSelectPermissionMode,
+      children: [
+        /* @__PURE__ */ jsx2(
+          SelectTrigger,
+          {
+            "aria-label": copy.t("factory.labels.review"),
+            className: cn2(
+              "h-9 max-w-full rounded-[999px] border border-[color:var(--line-2)] bg-[var(--background-panel)] px-3 text-[13px] font-medium text-[var(--text-primary)] shadow-none hover:bg-[var(--transparency-block)] [&>svg:last-child]:opacity-70",
+              loading ? "animate-pulse" : null,
+              disabled ? "cursor-not-allowed text-[var(--text-tertiary)] opacity-60 hover:bg-[var(--background-panel)]" : null,
+              triggerClassName
+            ),
+            children: /* @__PURE__ */ jsx2("span", { className: "flex min-w-0 items-center overflow-hidden", children: selectedLabel ? /* @__PURE__ */ jsx2("span", { className: "min-w-0 truncate", children: selectedLabel }) : /* @__PURE__ */ jsx2("span", { className: "min-w-0 truncate text-[var(--text-tertiary)]", children: loading ? copy.t("factory.messages.loadingConfiguration") : copy.t("factory.messages.noPermissionOptions") }) })
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          SelectContent,
+          {
+            align: "end",
+            className: "w-max min-w-[220px] max-w-[min(100vw-32px,360px)] data-[side=top]:!translate-y-0",
+            sideOffset: 4,
+            style: { zIndex: "var(--z-dialog-popover)" },
+            children: options.length > 0 ? options.map((option) => /* @__PURE__ */ jsx2(SelectItem, { value: option.value, children: /* @__PURE__ */ jsx2("span", { className: "min-w-0 truncate", children: permissionOptionLabel(copy, option) }) }, option.value)) : /* @__PURE__ */ jsx2(SelectItem, { disabled: true, value: "__empty__", children: copy.t("factory.messages.noPermissionOptions") })
+          }
+        )
+      ]
+    }
+  );
+}
+function FactoryModelReasoningDropdown({
+  copy,
+  loading,
+  modelOptions,
+  onOpenChange,
+  onSelectModel,
+  onSelectReasoningEffort,
+  open,
+  reasoningEffortOptions,
+  selectedModel,
+  selectedReasoningEffort,
+  triggerClassName
+}) {
+  const showModelSection = modelOptions.length > 0;
+  const showReasoningSection = reasoningEffortOptions.length > 0;
+  const disabled = loading || !showModelSection && !showReasoningSection;
+  const selectedModelLabel = modelOptions.find((option) => option.value === selectedModel)?.label ?? selectedModel;
+  const selectedReasoningLabel = reasoningEffortOptions.find(
+    (option) => option.value === selectedReasoningEffort
+  )?.label ?? selectedReasoningEffort;
+  const triggerLabel = [selectedModelLabel, selectedReasoningLabel].filter((value) => value.trim().length > 0).join(" ");
+  const selectedValue = showModelSection ? selectedModel ? `model:${selectedModel}` : void 0 : selectedReasoningEffort ? `reasoning:${selectedReasoningEffort}` : void 0;
+  const applySettingsValue = (nextValue) => {
+    if (nextValue.startsWith("reasoning:")) {
+      onSelectReasoningEffort(nextValue.slice("reasoning:".length));
+      return;
+    }
+    if (nextValue.startsWith("model:")) {
+      onSelectModel(nextValue.slice("model:".length));
+    }
+  };
+  return /* @__PURE__ */ jsxs2(
+    Select,
+    {
+      disabled,
+      open,
+      value: selectedValue,
+      onOpenChange,
+      onValueChange: applySettingsValue,
+      children: [
+        /* @__PURE__ */ jsx2(
+          SelectTrigger,
+          {
+            "aria-label": copy.t("factory.labels.modelReasoning"),
+            className: cn2(
+              "h-9 max-w-full rounded-[999px] border border-[color:var(--line-2)] bg-[var(--background-panel)] px-3 text-[13px] font-medium text-[var(--text-primary)] shadow-none hover:bg-[var(--transparency-block)] [&>svg:last-child]:opacity-70",
+              loading ? "animate-pulse" : null,
+              disabled ? "cursor-not-allowed text-[var(--text-tertiary)] opacity-60 hover:bg-[var(--background-panel)]" : null,
+              triggerClassName
+            ),
+            children: /* @__PURE__ */ jsx2("span", { className: "flex min-w-0 items-center gap-2 overflow-hidden", children: triggerLabel ? selectedModelLabel && selectedReasoningLabel ? /* @__PURE__ */ jsxs2(Fragment, { children: [
+              /* @__PURE__ */ jsx2("span", { className: "min-w-0 truncate", children: selectedModelLabel }),
+              /* @__PURE__ */ jsx2("span", { className: "shrink-0 text-[var(--text-secondary)]", children: selectedReasoningLabel })
+            ] }) : /* @__PURE__ */ jsx2("span", { className: "min-w-0 truncate", children: triggerLabel }) : /* @__PURE__ */ jsx2("span", { className: "min-w-0 truncate text-[var(--text-tertiary)]", children: loading ? copy.t("factory.messages.loadingConfiguration") : copy.t("factory.messages.noConfigurationOptions") }) })
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          SelectContent,
+          {
+            align: "end",
+            className: cn2(
+              "max-w-[min(100vw-32px,460px)] data-[side=top]:!translate-y-0",
+              showModelSection && showReasoningSection ? "w-[430px]" : "w-max min-w-[240px]"
+            ),
+            sideOffset: 4,
+            style: { zIndex: "var(--z-dialog-popover)" },
+            children: showModelSection && showReasoningSection ? /* @__PURE__ */ jsxs2(SelectSplitLayout, { children: [
+              /* @__PURE__ */ jsxs2(SelectSplitColumn, { children: [
+                /* @__PURE__ */ jsx2(SelectSplitColumnLabel, { children: copy.t("factory.labels.model") }),
+                /* @__PURE__ */ jsx2(SelectSplitColumnItems, { children: modelOptions.map((option) => /* @__PURE__ */ jsx2(
+                  SelectItem,
+                  {
+                    value: `model:${option.value}`,
+                    children: /* @__PURE__ */ jsx2("span", { className: "min-w-0 truncate", children: option.label })
+                  },
+                  option.value
+                )) })
+              ] }),
+              /* @__PURE__ */ jsx2(SelectSplitDivider, {}),
+              /* @__PURE__ */ jsxs2(SelectSplitColumn, { children: [
+                /* @__PURE__ */ jsx2(SelectSplitColumnLabel, { children: copy.t("factory.labels.reasoningEffort") }),
+                /* @__PURE__ */ jsx2(SelectSplitColumnItems, { children: reasoningEffortOptions.map((option) => /* @__PURE__ */ jsx2(
+                  SelectItem,
+                  {
+                    forceSelectedIndicator: selectedReasoningEffort === option.value,
+                    value: `reasoning:${option.value}`,
+                    children: /* @__PURE__ */ jsx2("span", { className: "min-w-0 truncate", children: option.label })
+                  },
+                  option.value
+                )) })
+              ] })
+            ] }) : showModelSection ? modelOptions.map((option) => /* @__PURE__ */ jsx2(SelectItem, { value: `model:${option.value}`, children: /* @__PURE__ */ jsx2("span", { className: "min-w-0 truncate", children: option.label }) }, option.value)) : showReasoningSection ? reasoningEffortOptions.map((option) => /* @__PURE__ */ jsx2(SelectItem, { value: `reasoning:${option.value}`, children: /* @__PURE__ */ jsx2("span", { className: "min-w-0 truncate", children: option.label }) }, option.value)) : /* @__PURE__ */ jsx2(SelectItem, { disabled: true, value: "__empty__", children: copy.t("factory.messages.noConfigurationOptions") })
+          }
+        )
+      ]
+    }
+  );
+}
+function permissionOptionLabel(copy, option) {
+  const semantic = option.semantic?.trim();
+  if (semantic) {
+    const key = `factory.permissionSemantics.${semantic}.label`;
+    const translated = copy.t(key);
+    if (translated !== key) {
+      return translated;
+    }
+  }
+  return option.label.trim() || option.value;
+}
+function AppCenterAgentProviderIcon({
+  iconUrl
+}) {
+  const normalizedIconUrl = iconUrl?.trim();
+  if (!normalizedIconUrl) {
+    return /* @__PURE__ */ jsx2("span", { "aria-hidden": "true", className: "size-4 shrink-0 rounded-[4px]" });
+  }
+  return /* @__PURE__ */ jsx2(
+    "img",
+    {
+      alt: "",
+      "aria-hidden": "true",
+      className: "size-4 shrink-0 rounded-[4px] object-contain",
+      decoding: "async",
+      draggable: false,
+      src: normalizedIconUrl
+    }
+  );
+}
+function resolveSelectedFactoryOptionValue(currentValue, options, defaultValue) {
+  if (options.some((option) => option.value === currentValue)) {
+    return currentValue;
+  }
+  const normalizedDefault = defaultValue?.trim() ?? "";
+  if (normalizedDefault && options.some((option) => option.value === normalizedDefault)) {
+    return normalizedDefault;
+  }
+  return options[0]?.value ?? "";
+}
+function AppCardGrid({
+  actions,
+  apps,
+  copy,
+  emptyMessage,
+  title
+}) {
+  if (apps.length === 0) {
+    return /* @__PURE__ */ jsx2(
+      "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)]",
+        role: "status",
+        children: emptyMessage
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      "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))
+    }
+  );
+}
+function createRecommendedCategoryTabs(apps, copy) {
+  const categoryCounts = /* @__PURE__ */ new Map();
+  for (const app of apps) {
+    const category = app.category?.trim();
+    if (!category) {
+      continue;
+    }
+    categoryCounts.set(category, (categoryCounts.get(category) ?? 0) + 1);
+  }
+  return recommendedCategoryTabDefinitions.map((definition) => {
+    if (definition.id === "all") {
+      return {
+        category: null,
+        count: apps.length,
+        id: definition.id,
+        label: copy.t("labels.allApps")
+      };
+    }
+    const category = copy.t(definition.labelKey);
+    return {
+      category,
+      count: categoryCounts.get(category) ?? 0,
+      id: definition.id,
+      label: category
+    };
+  });
+}
+function RecommendedCategoryTabs({
+  copy,
+  tabs,
+  value,
+  onValueChange
+}) {
+  return /* @__PURE__ */ jsx2(
+    "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",
+      role: "tablist",
+      children: tabs.map((tab) => {
+        const selected = tab.id === value;
+        return /* @__PURE__ */ jsxs2(
+          "button",
+          {
+            "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)]"
+            ),
+            role: "tab",
+            type: "button",
+            onClick: () => onValueChange(tab.id),
+            children: [
+              tab.label,
+              " ",
+              tab.count
+            ]
+          },
+          tab.id
+        );
+      })
+    }
+  );
+}
+function AppCenterStatusToast({
+  toast
+}) {
+  return /* @__PURE__ */ jsx2(ToastProvider, { children: /* @__PURE__ */ jsx2(
+    ToastRoot,
+    {
+      open: true,
+      anchor: "node",
+      busy: toast.busy,
+      className: cn2(
+        "z-30 w-[calc(100%_-_48px)] max-w-[640px] justify-start px-4 py-3 text-left text-[12px] leading-5 shadow-[0_14px_36px_var(--shadow-elevated)]",
+        toast.tone === "default" ? "border-[var(--line-2)] bg-[var(--background-fronted)] text-[var(--text-secondary)]" : ""
+      ),
+      nodeInsetTopPx: 20,
+      variant: toast.tone,
+      children: /* @__PURE__ */ jsx2(ToastTitle, { className: "w-full justify-start gap-2 text-left text-[12px] leading-5", children: /* @__PURE__ */ jsx2("span", { className: "min-w-0 truncate", children: toast.message }) })
+    },
+    `${toast.tone}:${toast.message}`
+  ) });
+}
+function AppCenterHeaderActions({
+  copy,
+  onCreateApp,
+  onImportApp
+}) {
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsxs2(Tooltip, { children: [
+      /* @__PURE__ */ jsx2(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs2(
+        Button2,
+        {
+          size: "default",
+          type: "button",
+          variant: "ghost",
+          onClick: onImportApp,
+          children: [
+            /* @__PURE__ */ jsx2(ImportIcon, {}),
+            /* @__PURE__ */ jsx2("span", { children: copy.t("actions.importApp") })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx2(TooltipContent, { side: "bottom", children: copy.t("actions.importAppTooltip") })
+    ] }),
+    /* @__PURE__ */ jsxs2(
+      Button2,
+      {
+        size: "default",
+        type: "button",
+        variant: "ghost",
+        onClick: onCreateApp,
+        children: [
+          /* @__PURE__ */ jsx2(FileCreateIcon, {}),
+          copy.t("factory.actions.create")
+        ]
+      }
+    )
+  ] });
+}
+function FactoryJobStatusIndicator({
+  copy,
+  job
+}) {
+  const statusLabel = copy.t(job.statusLabelKey);
+  if (job.status === "generating") {
+    return /* @__PURE__ */ jsx2(
+      "span",
+      {
+        "aria-label": statusLabel,
+        className: "inline-flex size-3 shrink-0 items-center justify-center",
+        role: "status",
+        title: statusLabel,
+        children: /* @__PURE__ */ jsx2(
+          Spinner,
+          {
+            className: "text-[var(--text-tertiary)]",
+            size: 12,
+            strokeWidth: 2,
+            trackColor: "var(--line-2)"
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx2(Badge, { variant: job.status === "failed" ? "destructive" : "secondary", children: statusLabel });
+}
+export {
+  AppCard,
+  AppCenterPanel
+};
+//# sourceMappingURL=index.js.map