@nextclaw/ui 0.12.8 → 0.12.10

package/src/components/layout/runtime-status-entry.tsx

@@ -0,0 +1,143 @@
+import { useState } from 'react';
+import { useQueryClient } from '@tanstack/react-query';
+import { useRuntimeControl } from '@/hooks/use-runtime-control';
+import { runtimeControlManager } from '@/runtime-control/runtime-control.manager';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import { t } from '@/lib/i18n';
+import { cn } from '@/lib/utils';
+import { toast } from 'sonner';
+
+type RuntimeStatusTone = 'healthy' | 'attention' | 'inactive';
+
+const runtimeStatusToneStyles: Record<RuntimeStatusTone, string> = {
+  healthy: 'bg-emerald-500 shadow-[0_0_0_3px_rgba(16,185,129,0.14)]',
+  attention: 'bg-amber-400 shadow-[0_0_0_3px_rgba(251,191,36,0.16)]',
+  inactive: 'bg-gray-300 shadow-[0_0_0_3px_rgba(156,163,175,0.12)]'
+};
+
+type RuntimeStatusSummary = {
+  actionLabel: string | null;
+  description: string;
+  reasonLines: string[];
+  title: string;
+  tone: RuntimeStatusTone;
+};
+
+function buildRuntimeStatusSummary(
+  view: ReturnType<typeof useRuntimeControl>['data']
+): RuntimeStatusSummary {
+  if (!view) {
+    return {
+      tone: 'inactive',
+      title: t('runtimeStatusLoadingTitle'),
+      description: t('runtimeStatusLoadingDescription'),
+      reasonLines: [],
+      actionLabel: null
+    };
+  }
+
+  if (view.pendingRestart) {
+    return {
+      tone: 'attention',
+      title: t('runtimeStatusPendingRestartTitle'),
+      description: t('runtimeStatusPendingRestartDescription'),
+      reasonLines:
+        view.pendingRestart.changedPaths.length > 0
+          ? view.pendingRestart.changedPaths.map((path) =>
+              t('runtimeStatusPendingRestartReasonItem').replace('{path}', path)
+            )
+          : [view.pendingRestart.message],
+      actionLabel: view.canRestartService.available ? t('runtimeStatusRestartAction') : null
+    };
+  }
+
+  return {
+    tone: view.lifecycle === 'healthy' ? 'healthy' : 'inactive',
+    title: t('runtimeStatusHealthyTitle'),
+    description: t('runtimeStatusHealthyDescription'),
+    reasonLines: [],
+    actionLabel: null
+  };
+}
+
+export function RuntimeStatusEntry() {
+  const queryClient = useQueryClient();
+  const runtimeControlQuery = useRuntimeControl();
+  const [isRestarting, setIsRestarting] = useState(false);
+  const runtimeView = runtimeControlQuery.data;
+  const summary = buildRuntimeStatusSummary(runtimeView);
+  const title = runtimeControlQuery.isError ? t('runtimeControlLoadFailed') : summary.title;
+  const description =
+    runtimeControlQuery.isError && runtimeControlQuery.error instanceof Error
+      ? runtimeControlQuery.error.message
+      : summary.description;
+  const canRestart = Boolean(runtimeView?.pendingRestart && runtimeView.canRestartService.available);
+
+  const handleRestart = async () => {
+    if (!canRestart) {
+      return;
+    }
+    setIsRestarting(true);
+    try {
+      const result = await runtimeControlManager.controlService('restart-service');
+      toast.success(result.message);
+      await queryClient.invalidateQueries({ queryKey: ['runtime-control'] });
+    } catch (error) {
+      const message = error instanceof Error ? error.message : t('runtimeControlActionFailed');
+      toast.error(`${t('runtimeControlActionFailed')}: ${message}`);
+    } finally {
+      setIsRestarting(false);
+    }
+  };
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <button
+          type="button"
+          className="inline-flex items-center justify-center rounded-full p-0.5 transition-transform hover:scale-105"
+          aria-label={title}
+          title={title}
+          data-testid="runtime-status-entry"
+        >
+          <span className={cn('h-2.5 w-2.5 rounded-full', runtimeStatusToneStyles[summary.tone])} />
+        </button>
+      </PopoverTrigger>
+      <PopoverContent
+        align="start"
+        sideOffset={10}
+        className="w-[290px] space-y-3 rounded-2xl border border-gray-200 bg-white p-4"
+      >
+        <div className="space-y-1">
+          <div className="text-sm font-semibold text-gray-900">{title}</div>
+          <p className="text-xs leading-5 text-gray-600">{description}</p>
+        </div>
+        {summary.reasonLines.length > 0 ? (
+          <div className="space-y-2">
+            {summary.reasonLines.map((reason) => (
+              <div
+                key={reason}
+                className="rounded-xl border border-amber-200 bg-amber-50 px-3 py-2 text-xs leading-5 text-amber-900"
+              >
+                {reason}
+              </div>
+            ))}
+          </div>
+        ) : null}
+        {summary.actionLabel ? (
+          <div className="flex items-center justify-between border-t border-gray-100 pt-1">
+            <span className="text-[11px] text-gray-500">{t('runtimeStatusActionHint')}</span>
+            <button
+              type="button"
+              onClick={() => void handleRestart()}
+              disabled={isRestarting}
+              className="text-sm font-semibold text-sky-600 transition-colors hover:text-sky-700 disabled:text-gray-400"
+            >
+              {isRestarting ? t('runtimeStatusRestartingAction') : summary.actionLabel}
+            </button>
+          </div>
+        ) : null}
+      </PopoverContent>
+    </Popover>
+  );
+}

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

@@ -0,0 +1,93 @@
+function escapeHtml(text: string): string {
+  return text
+    .replace(/&/g, "&")
+    .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

@@ -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

@@ -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));
+}