npm - @nextclaw/ui - Versions diffs - 0.12.9 → 0.12.11 - Mend

@nextclaw/ui 0.12.9 → 0.12.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (245) hide show

package/src/components/layout/sidebar.layout.test.tsx CHANGED Viewed

@@ -22,17 +22,23 @@ vi.mock('@/components/doc-browser', () => ({
   })
 }));
-vi.mock('@/presenter/app-presenter-context', () => ({
-  useAppPresenter: () => ({
+vi.mock('@/app/components/app-manager-provider', () => ({
+  useAppManager: () => ({
     accountManager: {
       openAccountPanel: mocks.openAccountPanel
     }
   })
 }));
-vi.mock('@/hooks/useRemoteAccess', () => ({
-  useRemoteStatus: () => mocks.remoteStatus
-}));
+vi.mock('@/features/remote', async () => {
+  const actual = await vi.importActual<typeof import('@/features/remote')>(
+    '@/features/remote'
+  );
+  return {
+    ...actual,
+    useRemoteStatus: () => mocks.remoteStatus
+  };
+});
 vi.mock('@/components/providers/I18nProvider', () => ({
   useI18n: () => ({

package/src/components/marketplace/marketplace-detail-doc.ts ADDED Viewed

@@ -0,0 +1,93 @@
+function escapeHtml(text: string): string {
+  return text
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#39;");
+}
+export function buildGenericDetailDataUrl(params: {
+  title: string;
+  typeLabel: string;
+  spec: string;
+  summary?: string;
+  description?: string;
+  metadataRaw?: string;
+  contentRaw?: string;
+  sourceUrl?: string;
+  sourceLabel?: string;
+  tags?: string[];
+  author?: string;
+}): string {
+  const {
+    title,
+    typeLabel,
+    spec,
+    summary: rawSummary,
+    description: rawDescription,
+    metadataRaw,
+    contentRaw,
+    sourceUrl,
+    sourceLabel,
+    tags,
+    author,
+  } = params;
+  const metadata = metadataRaw?.trim() || "-";
+  const content = contentRaw?.trim() || "-";
+  const summary = rawSummary?.trim();
+  const description = rawDescription?.trim();
+  const shouldShowDescription = Boolean(description) && description !== summary;
+  const html = `<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>${escapeHtml(title)}</title>
+    <style>
+      :root { color-scheme: light; }
+      body { margin: 0; background: #f7f9fc; color: #0f172a; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
+      .wrap { max-width: 980px; margin: 0 auto; padding: 28px 20px 40px; }
+      .hero { border: 1px solid #dbeafe; border-radius: 16px; background: linear-gradient(180deg, #eff6ff, #ffffff); padding: 20px; box-shadow: 0 6px 20px rgba(30, 64, 175, 0.08); }
+      .hero h1 { margin: 0; font-size: 26px; }
+      .meta { margin-top: 8px; color: #475569; font-size: 13px; overflow-wrap: anywhere; word-break: break-word; }
+      .summary { margin-top: 14px; font-size: 14px; line-height: 1.7; color: #334155; }
+      .grid { display: grid; grid-template-columns: 260px 1fr; gap: 14px; margin-top: 16px; }
+      .card { border: 1px solid #e2e8f0; background: #fff; border-radius: 14px; overflow: hidden; }
+      .card h2 { margin: 0; padding: 12px 14px; font-size: 13px; font-weight: 700; color: #1d4ed8; border-bottom: 1px solid #e2e8f0; background: #f8fafc; }
+      .card .body { padding: 12px 14px; font-size: 13px; color: #334155; line-height: 1.7; }
+      .code { white-space: pre-wrap; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 1.6; margin: 0; }
+      .tags { margin-top: 10px; }
+      .tag { display: inline-block; margin: 0 6px 6px 0; padding: 4px 9px; border-radius: 999px; background: #e0e7ff; color: #3730a3; font-size: 11px; }
+      .source { color: #2563eb; text-decoration: none; overflow-wrap: anywhere; word-break: break-all; }
+      @media (max-width: 860px) { .grid { grid-template-columns: 1fr; } }
+    </style>
+  </head>
+  <body>
+    <main class="wrap">
+      <section class="hero">
+        <h1>${escapeHtml(title)}</h1>
+        <div class="meta">${escapeHtml(typeLabel)} · ${escapeHtml(spec)}${author ? ` · ${escapeHtml(author)}` : ""}</div>
+        ${summary ? `<p class="summary">${escapeHtml(summary)}</p>` : ""}
+        ${shouldShowDescription ? `<p class="summary">${escapeHtml(description as string)}</p>` : ""}
+        ${tags && tags.length > 0 ? `<div class="tags">${tags.map((tag) => `<span class="tag">${escapeHtml(tag)}</span>`).join("")}</div>` : ""}
+        ${sourceUrl ? `<p class="meta" style="margin-top:12px;">${escapeHtml(sourceLabel ?? "Source")}: <a class="source" href="${escapeHtml(sourceUrl)}" target="_blank" rel="noopener noreferrer">${escapeHtml(sourceUrl)}</a></p>` : ""}
+      </section>
+      <section class="grid">
+        <article class="card">
+          <h2>Metadata</h2>
+          <div class="body"><pre class="code">${escapeHtml(metadata)}</pre></div>
+        </article>
+        <article class="card">
+          <h2>Content</h2>
+          <div class="body"><pre class="code">${escapeHtml(content)}</pre></div>
+        </article>
+      </section>
+    </main>
+  </body>
+</html>`;
+  return `data:text/html;charset=utf-8,${encodeURIComponent(html)}`;
+}

package/src/components/marketplace/marketplace-list-card.tsx ADDED Viewed

@@ -0,0 +1,288 @@
+import type {
+  MarketplaceInstalledRecord,
+  MarketplaceItemSummary,
+  MarketplaceManageAction,
+} from "@/api/types";
+import { Button } from "@/components/ui/button";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { t } from "@/lib/i18n";
+import { cn } from "@/lib/utils";
+import {
+  buildLocaleFallbacks,
+  pickLocalizedText,
+} from "@/components/marketplace/marketplace-localization";
+export type InstallState = {
+  installingSpecs: ReadonlySet<string>;
+};
+export type ManageState = {
+  actionsByTarget: ReadonlyMap<string, MarketplaceManageAction>;
+};
+const ITEM_ICON_COLORS = [
+  "bg-amber-600",
+  "bg-orange-500",
+  "bg-yellow-600",
+  "bg-emerald-600",
+  "bg-teal-600",
+  "bg-cyan-600",
+  "bg-stone-600",
+  "bg-rose-500",
+  "bg-violet-500",
+] as const;
+function getAvatarColor(text: string) {
+  let hash = 0;
+  for (let i = 0; i < text.length; i++) {
+    hash = text.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  return ITEM_ICON_COLORS[Math.abs(hash) % ITEM_ICON_COLORS.length];
+}
+function ItemIcon({ name, fallback }: { name?: string; fallback: string }) {
+  const displayName = name || fallback;
+  const letters = displayName.substring(0, 2).toUpperCase();
+  const colorClass = getAvatarColor(displayName);
+  return (
+    <div
+      className={cn(
+        "flex h-10 w-10 shrink-0 items-center justify-center rounded-xl text-sm font-semibold text-white",
+        colorClass,
+      )}
+    >
+      {letters}
+    </div>
+  );
+}
+function MarketplaceListCardMeta(props: {
+  title: string;
+  spec: string;
+  summary: string;
+}) {
+  const { title, spec, summary } = props;
+  return (
+    <TooltipProvider delayDuration={400}>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <div className="truncate text-[14px] font-semibold leading-tight text-gray-900">
+            {title}
+          </div>
+        </TooltipTrigger>
+        <TooltipContent className="max-w-[300px] text-xs">
+          {title}
+        </TooltipContent>
+      </Tooltip>
+      <div className="mb-1.5 mt-0.5 flex items-center gap-1.5">
+        {spec ? (
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <span className="max-w-full truncate font-mono text-[11px] text-gray-400">
+                {spec}
+              </span>
+            </TooltipTrigger>
+            <TooltipContent className="max-w-[300px] break-all font-mono text-xs">
+              {spec}
+            </TooltipContent>
+          </Tooltip>
+        ) : null}
+      </div>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <p className="line-clamp-1 text-left text-[12px] leading-relaxed text-gray-500/90 transition-colors">
+            {summary}
+          </p>
+        </TooltipTrigger>
+        {summary ? (
+          <TooltipContent className="max-w-[400px] text-xs leading-relaxed">
+            {summary}
+          </TooltipContent>
+        ) : null}
+      </Tooltip>
+    </TooltipProvider>
+  );
+}
+function readToggleLabel(
+  busyAction: MarketplaceManageAction | undefined,
+  isDisabled: boolean,
+) {
+  if (busyAction && busyAction !== "uninstall") {
+    return busyAction === "enable"
+      ? t("marketplaceEnabling")
+      : t("marketplaceDisabling");
+  }
+  return isDisabled ? t("marketplaceEnable") : t("marketplaceDisable");
+}
+function MarketplaceListCardActions(props: {
+  item?: MarketplaceItemSummary;
+  record?: MarketplaceInstalledRecord;
+  isInstalling: boolean;
+  busyAction: MarketplaceManageAction | undefined;
+  busyForRecord: boolean;
+  isDisabled: boolean;
+  onInstall: (item: MarketplaceItemSummary) => void;
+  onManage: (
+    action: MarketplaceManageAction,
+    record: MarketplaceInstalledRecord,
+  ) => void;
+}) {
+  const {
+    item,
+    record,
+    isInstalling,
+    busyAction,
+    busyForRecord,
+    isDisabled,
+    onInstall,
+    onManage,
+  } = props;
+  const pluginRecord = record?.type === "plugin" ? record : undefined;
+  const canUninstall =
+    (record?.type === "plugin" && record.origin !== "bundled") ||
+    (record?.type === "skill" && record.source === "workspace");
+  return (
+    <div className="flex h-full shrink-0 items-center">
+      {item && !record ? (
+        <Button
+          type="button"
+          size="sm"
+          variant="primary"
+          onClick={(event) => {
+            event.stopPropagation();
+            onInstall(item);
+          }}
+          disabled={isInstalling}
+          className="rounded-xl"
+        >
+          {isInstalling ? t("marketplaceInstalling") : t("marketplaceInstall")}
+        </Button>
+      ) : null}
+      {pluginRecord ? (
+        <Button
+          type="button"
+          size="sm"
+          variant="outline"
+          disabled={busyForRecord}
+          onClick={(event) => {
+            event.stopPropagation();
+            onManage(isDisabled ? "enable" : "disable", pluginRecord);
+          }}
+          className="rounded-xl border-gray-200/80 text-gray-600"
+        >
+          {readToggleLabel(busyAction, isDisabled)}
+        </Button>
+      ) : null}
+      {record && canUninstall ? (
+        <Button
+          type="button"
+          size="sm"
+          variant="outline"
+          disabled={busyForRecord}
+          onClick={(event) => {
+            event.stopPropagation();
+            onManage("uninstall", record);
+          }}
+          className="rounded-xl border-rose-100 text-rose-500 hover:border-rose-200 hover:bg-rose-50 hover:text-rose-600"
+        >
+          {busyAction === "uninstall"
+            ? t("marketplaceRemoving")
+            : t("marketplaceUninstall")}
+        </Button>
+      ) : null}
+    </div>
+  );
+}
+export function MarketplaceListCard(props: {
+  item?: MarketplaceItemSummary;
+  record?: MarketplaceInstalledRecord;
+  language: string;
+  installState: InstallState;
+  manageState: ManageState;
+  onOpen: () => void;
+  onInstall: (item: MarketplaceItemSummary) => void;
+  onManage: (
+    action: MarketplaceManageAction,
+    record: MarketplaceInstalledRecord,
+  ) => void;
+}) {
+  const {
+    item,
+    record,
+    language,
+    installState,
+    manageState,
+    onOpen,
+    onInstall,
+    onManage,
+  } = props;
+  const localeFallbacks = buildLocaleFallbacks(language);
+  const title =
+    item?.name ??
+    record?.label ??
+    record?.id ??
+    record?.spec ??
+    t("marketplaceUnknownItem");
+  const summary =
+    pickLocalizedText(item?.summaryI18n, item?.summary, localeFallbacks) ||
+    (record ? t("marketplaceInstalledLocalSummary") : "");
+  const spec = item?.install.spec ?? record?.spec ?? "";
+  const targetId = record?.id || record?.spec;
+  const busyAction = targetId
+    ? manageState.actionsByTarget.get(targetId)
+    : undefined;
+  const busyForRecord = Boolean(busyAction);
+  const isDisabled = record
+    ? record.enabled === false || record.runtimeStatus === "disabled"
+    : false;
+  const installSpec = item?.install.spec;
+  const isInstalling =
+    typeof installSpec === "string" &&
+    installState.installingSpecs.has(installSpec);
+  return (
+    <article
+      onClick={onOpen}
+      className="group flex cursor-pointer items-start justify-between gap-3.5 rounded-2xl border border-gray-200/40 bg-white px-5 py-4 shadow-sm transition-all hover:border-blue-300/80 hover:shadow-md"
+    >
+      <div className="flex h-full min-w-0 flex-1 items-start gap-3">
+        <ItemIcon
+          name={title}
+          fallback={spec || t("marketplaceTypeExtension")}
+        />
+        <div className="flex h-full min-w-0 flex-1 flex-col justify-center">
+          <MarketplaceListCardMeta
+            title={title}
+            spec={spec}
+            summary={summary}
+          />
+        </div>
+      </div>
+      <MarketplaceListCardActions
+        item={item}
+        record={record}
+        isInstalling={isInstalling}
+        busyAction={busyAction}
+        busyForRecord={busyForRecord}
+        isDisabled={isDisabled}
+        onInstall={onInstall}
+        onManage={onManage}
+      />
+    </article>
+  );
+}

package/src/components/marketplace/marketplace-page-data.ts ADDED Viewed

@@ -0,0 +1,129 @@
+import type {
+  MarketplaceInstalledRecord,
+  MarketplaceItemSummary,
+} from "@/api/types";
+import { pickLocalizedText } from "@/components/marketplace/marketplace-localization";
+export type InstalledRenderEntry = {
+  key: string;
+  record: MarketplaceInstalledRecord;
+  item?: MarketplaceItemSummary;
+};
+function normalizeMarketplaceKey(value: string | undefined): string {
+  return (value ?? "").trim().toLowerCase();
+}
+function toLookupKey(
+  type: MarketplaceItemSummary["type"],
+  value: string | undefined,
+): string {
+  const normalized = normalizeMarketplaceKey(value);
+  return normalized.length > 0 ? `${type}:${normalized}` : "";
+}
+export function buildCatalogLookup(
+  items: MarketplaceItemSummary[],
+): Map<string, MarketplaceItemSummary> {
+  const lookup = new Map<string, MarketplaceItemSummary>();
+  for (const item of items) {
+    const candidates = [item.install.spec, item.slug, item.id];
+    for (const candidate of candidates) {
+      const lookupKey = toLookupKey(item.type, candidate);
+      if (!lookupKey || lookup.has(lookupKey)) {
+        continue;
+      }
+      lookup.set(lookupKey, item);
+    }
+  }
+  return lookup;
+}
+export function buildInstalledRecordLookup(
+  records: MarketplaceInstalledRecord[],
+): Map<string, MarketplaceInstalledRecord> {
+  const lookup = new Map<string, MarketplaceInstalledRecord>();
+  for (const record of records) {
+    const candidates = [record.spec, record.id, record.label];
+    for (const candidate of candidates) {
+      const lookupKey = toLookupKey(record.type, candidate);
+      if (!lookupKey || lookup.has(lookupKey)) {
+        continue;
+      }
+      lookup.set(lookupKey, record);
+    }
+  }
+  return lookup;
+}
+export function findInstalledRecordForItem(
+  item: MarketplaceItemSummary,
+  installedRecordLookup: Map<string, MarketplaceInstalledRecord>,
+): MarketplaceInstalledRecord | undefined {
+  const candidates = [item.install.spec, item.slug, item.id];
+  for (const candidate of candidates) {
+    const lookupKey = toLookupKey(item.type, candidate);
+    if (!lookupKey) {
+      continue;
+    }
+    const record = installedRecordLookup.get(lookupKey);
+    if (record) {
+      return record;
+    }
+  }
+  return undefined;
+}
+export function findCatalogItemForRecord(
+  record: MarketplaceInstalledRecord,
+  catalogLookup: Map<string, MarketplaceItemSummary>,
+): MarketplaceItemSummary | undefined {
+  const bySpec = catalogLookup.get(toLookupKey(record.type, record.spec));
+  if (bySpec) {
+    return bySpec;
+  }
+  const byId = catalogLookup.get(toLookupKey(record.type, record.id));
+  if (byId) {
+    return byId;
+  }
+  return catalogLookup.get(toLookupKey(record.type, record.label));
+}
+export function matchInstalledSearch(
+  record: MarketplaceInstalledRecord,
+  item: MarketplaceItemSummary | undefined,
+  query: string,
+  localeFallbacks: string[],
+): boolean {
+  const normalizedQuery = normalizeMarketplaceKey(query);
+  if (!normalizedQuery) {
+    return true;
+  }
+  const localizedSummary = pickLocalizedText(
+    item?.summaryI18n,
+    item?.summary,
+    localeFallbacks,
+  );
+  const values = [
+    record.id,
+    record.spec,
+    record.label,
+    item?.name,
+    item?.slug,
+    item?.summary,
+    localizedSummary,
+    ...(item?.tags ?? []),
+  ];
+  return values
+    .map((value) => normalizeMarketplaceKey(value))
+    .filter(Boolean)
+    .some((value) => value.includes(normalizedQuery));
+}