@nextclaw/ui 0.15.10 → 0.15.12

package/src/features/cron/components/cron-job-detail-dialog.tsx

@@ -0,0 +1,210 @@
+import { ExternalLink, Play, Trash2 } from "lucide-react";
+
+import type { CronJobView } from "@/shared/lib/api";
+import { Button } from "@/shared/components/ui/button";
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+} from "@/shared/components/ui/overlays/sheet";
+import { Switch } from "@/shared/components/ui/switch";
+import {
+  describeCronSchedule,
+  describeCronSession,
+  formatCronDate,
+} from "@/shared/lib/cron";
+import { t } from "@/shared/lib/i18n";
+import { cn } from "@/shared/lib/utils";
+
+function DetailRow({
+  label,
+  value,
+}: {
+  readonly label: string;
+  readonly value: string;
+}) {
+  return (
+    <div className="flex items-start justify-between gap-4 border-b border-border/50 py-3 last:border-b-0">
+      <span className="text-xs text-muted-foreground">{label}</span>
+      <span className="max-w-[65%] break-words text-right text-xs font-medium text-foreground">
+        {value}
+      </span>
+    </div>
+  );
+}
+
+type CronJobDetailDialogProps = {
+  readonly job: CronJobView | null;
+  readonly open: boolean;
+  readonly onDelete: (job: CronJobView) => void;
+  readonly onOpenChange: (open: boolean) => void;
+  readonly onOpenSession: (job: CronJobView) => void;
+  readonly onRun: (job: CronJobView) => void;
+  readonly onToggle: (job: CronJobView, enabled: boolean) => void;
+};
+
+export function CronJobDetailDialog({
+  job,
+  open,
+  onDelete,
+  onOpenChange,
+  onOpenSession,
+  onRun,
+  onToggle,
+}: CronJobDetailDialogProps) {
+  if (!job) {
+    return null;
+  }
+
+  const sessionKey = describeCronSession(job);
+  const isBound = Boolean(job.payload.sessionId?.trim());
+  const canOpenSession = isBound || Boolean(job.state.lastRunAt);
+  const status = job.state.lastStatus
+    ? t(
+        `cronLastStatus${job.state.lastStatus[0].toUpperCase()}${job.state.lastStatus.slice(1)}`,
+      )
+    : t("cronNeverRun");
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent
+        side="right"
+        closeLabel={t("cronCloseDetails")}
+        className="flex w-full flex-col overflow-hidden p-0 sm:max-w-[510px]"
+      >
+        <SheetHeader className="shrink-0 border-b border-border/60 px-5 pb-5 pt-6 pr-14 sm:px-7 sm:pt-7">
+          <div className="mb-1 flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
+            <span>{describeCronSchedule(job)}</span>
+            <span aria-hidden="true">·</span>
+            <span>
+              {isBound ? t("cronBoundSession") : t("cronDedicatedSession")}
+            </span>
+          </div>
+          <SheetTitle>{job.name || job.id}</SheetTitle>
+          <SheetDescription>{t("cronDetailDescription")}</SheetDescription>
+        </SheetHeader>
+
+        <div className="min-h-0 flex-1 space-y-6 overflow-y-auto px-5 py-6 sm:px-7">
+          <section>
+            <h3 className="mb-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+              {t("cronTaskPrompt")}
+            </h3>
+            <div className="rounded-2xl bg-muted/55 px-4 py-3 text-sm leading-6 text-foreground">
+              {job.payload.message}
+            </div>
+          </section>
+
+          <section>
+            <h3 className="mb-1 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+              {t("cronTaskDetails")}
+            </h3>
+            <div>
+              <DetailRow
+                label={t("cronScheduleLabel")}
+                value={describeCronSchedule(job)}
+              />
+              <DetailRow
+                label={t("cronNextRun")}
+                value={formatCronDate(job.state.nextRunAt)}
+              />
+              <DetailRow
+                label={t("cronAgentLabel")}
+                value={job.payload.agentId?.trim() || "main"}
+              />
+              <DetailRow label={t("cronSessionLabel")} value={sessionKey} />
+              <DetailRow
+                label={t("cronCreatedAt")}
+                value={formatCronDate(job.createdAt)}
+              />
+            </div>
+          </section>
+
+          <section>
+            <div className="mb-2 flex items-center justify-between gap-4">
+              <div>
+                <h3 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                  {t("cronLatestRun")}
+                </h3>
+                <p className="mt-1 text-xs text-muted-foreground">
+                  {t("cronLatestRunHint")}
+                </p>
+              </div>
+              <span
+                className={cn(
+                  "rounded-full px-2.5 py-1 text-xs font-medium",
+                  job.state.lastStatus === "error"
+                    ? "bg-red-50 text-red-700"
+                    : job.state.lastStatus === "ok"
+                      ? "bg-emerald-50 text-emerald-700"
+                      : "bg-muted text-muted-foreground",
+                )}
+              >
+                {status}
+              </span>
+            </div>
+            <div className="rounded-2xl border border-border/60 px-4 py-1">
+              <DetailRow
+                label={t("cronLastRun")}
+                value={formatCronDate(job.state.lastRunAt)}
+              />
+              {job.state.lastError ? (
+                <DetailRow
+                  label={t("cronLastError")}
+                  value={job.state.lastError}
+                />
+              ) : null}
+            </div>
+          </section>
+
+          <section className="flex items-center justify-between rounded-2xl border border-border/60 px-4 py-3">
+            <div>
+              <div className="text-sm font-medium text-foreground">
+                {job.enabled ? t("cronEnabledState") : t("cronPaused")}
+              </div>
+              <div className="mt-0.5 text-xs text-muted-foreground">
+                {t("cronToggleHint")}
+              </div>
+            </div>
+            <Switch
+              checked={job.enabled}
+              onCheckedChange={(checked) => onToggle(job, checked)}
+              aria-label={job.enabled ? t("cronDisable") : t("cronEnable")}
+            />
+          </section>
+
+          {!canOpenSession ? (
+            <p className="text-xs text-muted-foreground">
+              {t("cronSessionAvailableAfterRun")}
+            </p>
+          ) : null}
+        </div>
+
+        <SheetFooter className="shrink-0 border-t border-border/60 bg-background px-5 py-4 sm:px-7">
+          <Button
+            variant="ghost"
+            className="text-red-600 hover:bg-red-50 hover:text-red-700"
+            onClick={() => onDelete(job)}
+          >
+            <Trash2 className="mr-2 h-4 w-4" />
+            {t("delete")}
+          </Button>
+          <Button
+            variant="outline"
+            onClick={() => onOpenSession(job)}
+            disabled={!canOpenSession}
+          >
+            <ExternalLink className="mr-2 h-4 w-4" />
+            {t("cronOpenSession")}
+          </Button>
+          <Button onClick={() => onRun(job)}>
+            <Play className="mr-2 h-4 w-4" />
+            {t("cronRunNow")}
+          </Button>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+}

package/src/features/cron/components/cron-job-row.tsx

@@ -0,0 +1,271 @@
+import { useState } from "react";
+import {
+  CalendarClock,
+  Check,
+  Clock,
+  MoreVertical,
+  Pencil,
+  Play,
+  Trash2,
+  TriangleAlert,
+} from "lucide-react";
+
+import type { CronJobView } from "@/shared/lib/api";
+import { Button } from "@/shared/components/ui/button";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/shared/components/ui/popover";
+import { Switch } from "@/shared/components/ui/switch";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/shared/components/ui/tooltip";
+import {
+  describeCronSchedule,
+  describeCronSession,
+  formatCronDate,
+  formatRelativeTime,
+} from "@/shared/lib/cron";
+import { t } from "@/shared/lib/i18n";
+import { cn } from "@/shared/lib/utils";
+
+function CronJobStatus({ job }: { readonly job: CronJobView }) {
+  const needsAttention = job.state.lastStatus === "error";
+  const label = needsAttention
+    ? t("cronNeedsAttention")
+    : job.enabled
+      ? t("cronRunningNormally")
+      : t("cronPaused");
+
+  return (
+    <span
+      className={cn(
+        "inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[11px] font-medium",
+        needsAttention
+          ? "bg-red-50 text-red-700"
+          : job.enabled
+            ? "bg-emerald-50 text-emerald-700"
+            : "bg-muted text-muted-foreground",
+      )}
+    >
+      <span
+        className={cn(
+          "h-1.5 w-1.5 rounded-full",
+          needsAttention
+            ? "bg-red-500"
+            : job.enabled
+              ? "bg-emerald-500"
+              : "bg-muted-foreground/50",
+        )}
+      />
+      {label}
+    </span>
+  );
+}
+
+type CronJobRowProps = {
+  readonly expanded: boolean;
+  readonly job: CronJobView;
+  readonly onDelete: (job: CronJobView) => void;
+  readonly onEdit: (job: CronJobView) => void;
+  readonly onRun: (job: CronJobView) => void;
+  readonly onToggleExpanded: (job: CronJobView) => void;
+  readonly onToggle: (job: CronJobView, enabled: boolean) => void;
+};
+
+export function CronJobRow({
+  expanded,
+  job,
+  onDelete,
+  onEdit,
+  onRun,
+  onToggleExpanded,
+  onToggle,
+}: CronJobRowProps) {
+  const [menuOpen, setMenuOpen] = useState(false);
+  const isBound = Boolean(job.payload.sessionId?.trim());
+  const needsAttention = job.state.lastStatus === "error";
+  const StatusIcon = needsAttention ? TriangleAlert : Check;
+  const jobLabel = job.name || job.id;
+  const previewId = `cron-job-preview-${job.id}`;
+
+  return (
+    <div
+      className={cn(
+        "group relative rounded-xl border-b border-border/55 transition-colors duration-150 last:border-b-0 hover:bg-muted/35 focus-within:bg-muted/35",
+        expanded && "bg-muted/35",
+      )}
+    >
+      <div className="flex items-center gap-3 px-1 py-3.5">
+        <button
+          type="button"
+          className="grid min-w-0 flex-1 grid-cols-[36px_minmax(0,1fr)] items-center gap-3 rounded-lg pr-16 text-left focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
+          aria-controls={previewId}
+          aria-expanded={expanded}
+          aria-label={`${t(expanded ? "cronCollapseTask" : "cronExpandTask")} ${jobLabel}`}
+          onClick={() => onToggleExpanded(job)}
+        >
+          <span
+            className={cn(
+              "flex h-9 w-9 items-center justify-center rounded-xl",
+              needsAttention
+                ? "bg-amber-50 text-amber-600"
+                : "bg-emerald-50 text-emerald-600",
+            )}
+          >
+            <StatusIcon className="h-4 w-4" aria-hidden="true" />
+          </span>
+          <span className="min-w-0">
+            <span className="flex flex-wrap items-center gap-2">
+              <strong className="truncate text-[13px] font-semibold text-foreground">
+                {jobLabel}
+              </strong>
+              <CronJobStatus job={job} />
+              <span className="rounded-full bg-muted px-2 py-0.5 text-[10px] font-medium text-muted-foreground">
+                {isBound ? t("cronBoundSession") : t("cronDedicatedSession")}
+              </span>
+              {job.deleteAfterRun ? (
+                <span className="rounded-full bg-muted px-2 py-0.5 text-[10px] font-medium text-muted-foreground">
+                  {t("cronOneShot")}
+                </span>
+              ) : null}
+            </span>
+            <span className="mt-1 flex flex-wrap items-center gap-x-3 gap-y-1 text-[11px] text-muted-foreground">
+              <span className="inline-flex items-center gap-1">
+                <CalendarClock className="h-3.5 w-3.5" aria-hidden="true" />
+                {describeCronSchedule(job)}
+              </span>
+              {job.state.nextRunAt ? (
+                <span className="inline-flex items-center gap-1">
+                  <Clock className="h-3.5 w-3.5" aria-hidden="true" />
+                  {t("cronNextRun")} {formatRelativeTime(job.state.nextRunAt)}
+                </span>
+              ) : null}
+            </span>
+          </span>
+        </button>
+
+        <TooltipProvider delayDuration={250}>
+          <div className="relative flex shrink-0 items-center">
+            <div className="absolute right-11 top-1/2 flex -translate-y-1/2 items-center gap-0.5 opacity-100 transition-opacity duration-150 [@media(hover:hover)]:pointer-events-none [@media(hover:hover)]:opacity-0 [@media(hover:hover)]:group-focus-within:pointer-events-auto [@media(hover:hover)]:group-focus-within:opacity-100 [@media(hover:hover)]:group-hover:pointer-events-auto [@media(hover:hover)]:group-hover:opacity-100">
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="h-8 w-8"
+                    onClick={() => onEdit(job)}
+                    aria-label={`${t("edit")} ${jobLabel}`}
+                  >
+                    <Pencil className="h-3.5 w-3.5" />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>{t("cronEditDetails")}</TooltipContent>
+              </Tooltip>
+
+              <Popover open={menuOpen} onOpenChange={setMenuOpen}>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <PopoverTrigger asChild>
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="h-8 w-8"
+                        aria-label={`${t("cronMoreActions")} ${jobLabel}`}
+                      >
+                        <MoreVertical className="h-4 w-4" />
+                      </Button>
+                    </PopoverTrigger>
+                  </TooltipTrigger>
+                  <TooltipContent>{t("cronMoreActions")}</TooltipContent>
+                </Tooltip>
+                <PopoverContent align="end" sideOffset={4} className="w-40 p-1">
+                  <button
+                    type="button"
+                    onClick={() => {
+                      setMenuOpen(false);
+                      onRun(job);
+                    }}
+                    className="flex w-full items-center gap-2 rounded-lg px-3 py-2 text-sm text-foreground transition-colors hover:bg-muted"
+                  >
+                    <Play className="h-3.5 w-3.5 text-muted-foreground" />
+                    {t("cronRunNow")}
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => {
+                      setMenuOpen(false);
+                      onDelete(job);
+                    }}
+                    className="flex w-full items-center gap-2 rounded-lg px-3 py-2 text-sm text-red-600 transition-colors hover:bg-red-50"
+                  >
+                    <Trash2 className="h-3.5 w-3.5" />
+                    {t("delete")}
+                  </button>
+                </PopoverContent>
+              </Popover>
+            </div>
+            <Switch
+              checked={job.enabled}
+              onCheckedChange={(checked) => onToggle(job, checked)}
+              aria-label={job.enabled ? t("cronDisable") : t("cronEnable")}
+            />
+          </div>
+        </TooltipProvider>
+      </div>
+
+      <div
+        id={previewId}
+        aria-hidden={!expanded}
+        className={cn(
+          "grid transition-[grid-template-rows,opacity] duration-200 ease-out",
+          expanded
+            ? "grid-rows-[1fr] opacity-100"
+            : "grid-rows-[0fr] opacity-0",
+        )}
+      >
+        <div className="overflow-hidden">
+          <div className="mb-3 ml-12 mr-1 rounded-xl bg-background/70 px-4 py-3">
+            <div className="text-[10px] font-semibold uppercase tracking-[0.1em] text-muted-foreground">
+              {t("cronTaskPrompt")}
+            </div>
+            <p className="mt-1.5 line-clamp-4 text-xs leading-5 text-foreground">
+              {job.payload.message}
+            </p>
+            <dl className="mt-3 grid gap-x-5 gap-y-2 border-t border-border/50 pt-3 text-[11px] sm:grid-cols-3">
+              <div className="min-w-0">
+                <dt className="text-muted-foreground">{t("cronAgentLabel")}</dt>
+                <dd className="mt-0.5 truncate font-medium text-foreground">
+                  {job.payload.agentId?.trim() || "main"}
+                </dd>
+              </div>
+              <div className="min-w-0">
+                <dt className="text-muted-foreground">
+                  {t("cronSessionLabel")}
+                </dt>
+                <dd className="mt-0.5 truncate font-medium text-foreground">
+                  {describeCronSession(job)}
+                </dd>
+              </div>
+              <div className="min-w-0">
+                <dt className="text-muted-foreground">{t("cronLastRun")}</dt>
+                <dd className="mt-0.5 truncate font-medium text-foreground">
+                  {formatCronDate(job.state.lastRunAt)}
+                </dd>
+              </div>
+            </dl>
+            {job.state.lastError ? (
+              <p className="mt-3 line-clamp-2 border-t border-red-100 pt-3 text-[11px] leading-5 text-red-700">
+                {job.state.lastError}
+              </p>
+            ) : null}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/features/cron/components/cron-task-discovery.tsx

@@ -0,0 +1,152 @@
+import { forwardRef, type FormEvent } from "react";
+import {
+  ArrowUp,
+  BookOpen,
+  CalendarDays,
+  ChartNoAxesColumnIncreasing,
+  Heart,
+  Lightbulb,
+  Newspaper,
+  Sparkles,
+  type LucideIcon,
+} from "lucide-react";
+
+import { Button } from "@/shared/components/ui/button";
+import { Input } from "@/shared/components/ui/input";
+import { t } from "@/shared/lib/i18n";
+import { cn } from "@/shared/lib/utils";
+
+type CronTemplate = {
+  readonly descriptionKey: string;
+  readonly icon: LucideIcon;
+  readonly promptKey: string;
+  readonly titleKey: string;
+};
+
+const CRON_TEMPLATES: readonly CronTemplate[] = [
+  {
+    titleKey: "cronTemplateAiNewsTitle",
+    descriptionKey: "cronTemplateAiNewsDescription",
+    promptKey: "cronTemplateAiNewsPrompt",
+    icon: Newspaper,
+  },
+  {
+    titleKey: "cronTemplateWeeklyReviewTitle",
+    descriptionKey: "cronTemplateWeeklyReviewDescription",
+    promptKey: "cronTemplateWeeklyReviewPrompt",
+    icon: ChartNoAxesColumnIncreasing,
+  },
+  {
+    titleKey: "cronTemplateMeetingPrepTitle",
+    descriptionKey: "cronTemplateMeetingPrepDescription",
+    promptKey: "cronTemplateMeetingPrepPrompt",
+    icon: CalendarDays,
+  },
+  {
+    titleKey: "cronTemplateLearningTitle",
+    descriptionKey: "cronTemplateLearningDescription",
+    promptKey: "cronTemplateLearningPrompt",
+    icon: BookOpen,
+  },
+  {
+    titleKey: "cronTemplateCompetitorTitle",
+    descriptionKey: "cronTemplateCompetitorDescription",
+    promptKey: "cronTemplateCompetitorPrompt",
+    icon: Lightbulb,
+  },
+  {
+    titleKey: "cronTemplateFamilyTitle",
+    descriptionKey: "cronTemplateFamilyDescription",
+    promptKey: "cronTemplateFamilyPrompt",
+    icon: Heart,
+  },
+];
+
+type CronTaskComposerProps = {
+  readonly prominent?: boolean;
+  readonly value: string;
+  readonly onChange: (value: string) => void;
+  readonly onSubmit: () => void;
+};
+
+export const CronTaskComposer = forwardRef<
+  HTMLInputElement,
+  CronTaskComposerProps
+>(function CronTaskComposer(
+  { prominent = false, value, onChange, onSubmit },
+  ref,
+) {
+  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    onSubmit();
+  };
+
+  return (
+    <form
+      className={cn("relative w-full", prominent && "mx-auto max-w-3xl")}
+      onSubmit={handleSubmit}
+    >
+      <Sparkles
+        className="pointer-events-none absolute left-3 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground/70"
+        aria-hidden="true"
+      />
+      <Input
+        ref={ref}
+        value={value}
+        onChange={(event) => onChange(event.target.value)}
+        className="pl-9 pr-11 focus:border-border/75"
+        placeholder={t("cronComposerPlaceholder")}
+        aria-label={t("cronComposerLabel")}
+      />
+      <Button
+        type="submit"
+        size="icon"
+        className="absolute right-1 top-1/2 h-7 w-7 -translate-y-1/2 rounded-full shadow-none"
+        disabled={!value.trim()}
+        aria-label={t("cronComposerSubmit")}
+      >
+        <ArrowUp className="h-4 w-4" />
+      </Button>
+    </form>
+  );
+});
+
+type CronTemplateGalleryProps = {
+  readonly compact?: boolean;
+  readonly onSelect: (prompt: string) => void;
+};
+
+export function CronTemplateGallery({
+  compact = false,
+  onSelect,
+}: CronTemplateGalleryProps) {
+  const templates = compact ? CRON_TEMPLATES.slice(0, 4) : CRON_TEMPLATES;
+
+  return (
+    <div className="grid grid-cols-[repeat(auto-fit,minmax(min(100%,17.5rem),1fr))] gap-3">
+      {templates.map((template) => {
+        const Icon = template.icon;
+        return (
+          <button
+            key={template.titleKey}
+            type="button"
+            onClick={() => onSelect(t(template.promptKey))}
+            className="group grid min-h-24 grid-cols-[38px_minmax(0,1fr)] items-center gap-3 rounded-2xl border border-border/60 bg-card px-4 py-4 text-left transition-all hover:-translate-y-0.5 hover:border-primary/20 hover:shadow-[0_12px_30px_rgba(30,45,52,0.08)] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
+          >
+            <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-muted text-muted-foreground transition-colors group-hover:bg-primary/10 group-hover:text-primary">
+              <Icon className="h-4 w-4" aria-hidden="true" />
+            </span>
+            <span className="min-w-0">
+              <strong className="block text-sm font-medium text-foreground">
+                {t(template.titleKey)}
+              </strong>
+              <span className="mt-1 block text-xs leading-5 text-muted-foreground">
+                {t(template.descriptionKey)}
+              </span>
+            </span>
+          </button>
+        );
+      })}
+    </div>
+  );
+}

package/src/features/cron/hooks/use-cron-jobs.ts

@@ -7,11 +7,13 @@ import {
 } from '@/shared/lib/api';
 import { toast } from 'sonner';
 import { t } from '@/shared/lib/i18n';
+import type { CronListQuery } from '@/shared/lib/api';
 
-export function useCronJobs(params: { all?: boolean } = { all: true }) {
+export function useCronJobs(params: CronListQuery = { all: true }) {
   return useQuery({
     queryKey: ['cron', params],
     queryFn: () => fetchCronJobs(params),
+    placeholderData: (previousData) => previousData,
     staleTime: 10_000
   });
 }

package/src/features/marketplace/components/__tests__/marketplace-page.test.tsx

@@ -356,10 +356,11 @@ describe("MarketplacePage", () => {
 
     render(<MarketplacePage forcedType="skills" />);
 
-    const openButton = screen.getByRole("button", {
+    const sourceLink = screen.getByRole("link", {
       name: /SkillHub/i,
     });
-    fireEvent.click(openButton);
+    expect(sourceLink.getAttribute("href")).toBe("https://skillhub.cn/");
+    fireEvent.click(sourceLink);
 
     expect(mocks.openExternalUrl).toHaveBeenCalledWith("https://skillhub.cn/");
   });

package/src/features/marketplace/components/marketplace-external-skill-source-action.tsx

@@ -1,14 +1,16 @@
-import { ExternalActionLink } from "@/shared/components/actions/action-link";
-import { hostCapabilityManager } from "@/shared/lib/host-capabilities";
+import { NavigationLink } from "@/shared/components/actions/navigation-link";
 import { t } from "@/shared/lib/i18n";
 
 const SKILLHUB_URL = "https://skillhub.cn/";
 
 export function MarketplaceExternalSkillSourceAction() {
   return (
-    <ExternalActionLink
-      label={t("marketplaceExternalSkillSourceTitle")}
-      onClick={() => void hostCapabilityManager.openExternalUrl(SKILLHUB_URL)}
-    />
+    <NavigationLink
+      href={SKILLHUB_URL}
+      external
+      className="h-7 shrink-0 px-1.5 text-[13px]"
+    >
+      {t("marketplaceExternalSkillSourceTitle")}
+    </NavigationLink>
   );
 }