@nextclaw/ui 0.12.11 → 0.12.13

package/src/components/marketplace/mcp/mcp-marketplace-page.tsx

@@ -1,414 +0,0 @@
-/* eslint-disable max-lines-per-function */
-import { useEffect, useMemo, useState } from "react";
-import { useMutation } from "@tanstack/react-query";
-import type {
-  MarketplaceInstalledRecord,
-  MarketplaceItemSummary,
-  MarketplaceMcpDoctorResult,
-  MarketplaceSort,
-} from "@/api/types";
-import {
-  fetchMcpMarketplaceContent,
-  doctorMcpMarketplaceItem,
-} from "@/api/mcp-marketplace";
-import { PageHeader, PageLayout } from "@/components/layout/page-layout";
-import {
-  MarketplaceInfiniteScrollStatus,
-  MarketplaceListSkeleton,
-} from "@/components/marketplace/marketplace-page-parts";
-import { buildLocaleFallbacks } from "@/components/marketplace/marketplace-localization";
-import { McpMarketplaceCard } from "@/components/marketplace/mcp/mcp-marketplace-card";
-import {
-  buildDocDataUrl,
-  buildInstalledRecordLookup,
-  findInstalledRecordForItem,
-  readSummary,
-} from "@/components/marketplace/mcp/mcp-marketplace-doc";
-import {
-  DoctorDialog,
-  InstallDialog,
-} from "@/components/marketplace/mcp/mcp-marketplace-dialogs";
-import { Tabs } from "@/components/ui/tabs-custom";
-import { Input } from "@/components/ui/input";
-import { NoticeCard } from "@/components/ui/notice-card";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { useConfirmDialog } from "@/hooks/useConfirmDialog";
-import {
-  useInstallMcpMarketplaceItem,
-  useManageMcpMarketplaceItem,
-  useMcpMarketplaceInstalled,
-  useMcpMarketplaceItems,
-} from "@/hooks/useMcpMarketplace";
-import { useDocBrowser } from "@/components/doc-browser";
-import { useI18n } from "@/components/providers/I18nProvider";
-import { t } from "@/lib/i18n";
-import { useInfiniteScrollLoader } from "@/hooks/use-infinite-scroll-loader";
-
-type ScopeType = "catalog" | "installed";
-
-const PAGE_SIZE = 12;
-
-export function McpMarketplacePage() {
-  const [scope, setScope] = useState<ScopeType>("catalog");
-  const [searchText, setSearchText] = useState("");
-  const [query, setQuery] = useState("");
-  const [sort, setSort] = useState<MarketplaceSort>("relevance");
-  const [installingItem, setInstallingItem] =
-    useState<MarketplaceItemSummary | null>(null);
-  const [doctorTarget, setDoctorTarget] = useState<string | null>(null);
-  const [doctorResult, setDoctorResult] =
-    useState<MarketplaceMcpDoctorResult | null>(null);
-  const { language } = useI18n();
-  const docBrowser = useDocBrowser();
-  const { confirm, ConfirmDialog } = useConfirmDialog();
-  const localeFallbacks = useMemo(
-    () => buildLocaleFallbacks(language),
-    [language],
-  );
-
-  useEffect(() => {
-    const timer = window.setTimeout(() => {
-      setQuery(searchText.trim());
-    }, 250);
-    return () => window.clearTimeout(timer);
-  }, [searchText]);
-
-  const itemsQuery = useMcpMarketplaceItems({
-    q: query || undefined,
-    sort,
-    pageSize: PAGE_SIZE,
-  });
-  const installedQuery = useMcpMarketplaceInstalled();
-
-  const infiniteScroll = useInfiniteScrollLoader({
-    disabled:
-      scope !== "catalog" ||
-      itemsQuery.isError ||
-      !itemsQuery.hasNextPage ||
-      itemsQuery.isFetchingNextPage,
-    onLoadMore: () => itemsQuery.fetchNextPage(),
-    watchValue: `${scope}:${query}:${sort}:${itemsQuery.data?.loadedItems ?? 0}:${itemsQuery.data?.loadedPages ?? 0}`,
-  });
-  const { containerRef, sentinelRef } = infiniteScroll;
-
-  useEffect(() => {
-    const container = containerRef.current;
-    if (container && typeof container.scrollTo === "function") {
-      container.scrollTo({ top: 0 });
-    }
-  }, [containerRef, query, scope, sort]);
-
-  const installMutation = useInstallMcpMarketplaceItem();
-  const manageMutation = useManageMcpMarketplaceItem();
-  const doctorMutation = useMutation({
-    mutationFn: doctorMcpMarketplaceItem,
-    onSuccess: (result, name) => {
-      setDoctorTarget(name);
-      setDoctorResult(result);
-    },
-  });
-
-  const installedRecordLookup = useMemo(() => {
-    return buildInstalledRecordLookup(installedQuery.data?.records ?? []);
-  }, [installedQuery.data?.records]);
-
-  const installedRecords = useMemo(() => {
-    const entries = installedQuery.data?.records ?? [];
-    return entries.filter((record) => {
-      const text = [
-        record.id ?? "",
-        record.label ?? "",
-        record.catalogSlug ?? "",
-        record.description ?? "",
-        record.descriptionZh ?? "",
-      ]
-        .join(" ")
-        .toLowerCase();
-      return query ? text.includes(query.toLowerCase()) : true;
-    });
-  }, [installedQuery.data?.records, query]);
-
-  const openDoc = async (
-    item?: MarketplaceItemSummary,
-    record?: MarketplaceInstalledRecord,
-  ) => {
-    const title = item?.name ?? record?.label ?? record?.id ?? "MCP";
-    const summary = readSummary(localeFallbacks, item, record);
-    if (!item) {
-      const url = buildDocDataUrl(
-        title,
-        JSON.stringify(record ?? {}, null, 2),
-        t("marketplaceInstalledLocalSummary"),
-        record?.docsUrl,
-        summary,
-      );
-      docBrowser.open(url, { newTab: true, title, kind: "content" });
-      return;
-    }
-    try {
-      const content = await fetchMcpMarketplaceContent(item.slug);
-      const url = buildDocDataUrl(
-        title,
-        content.metadataRaw || JSON.stringify(item, null, 2),
-        content.bodyRaw || content.raw,
-        content.sourceUrl,
-        summary,
-      );
-      docBrowser.open(url, { newTab: true, title, kind: "content" });
-    } catch (error) {
-      const url = buildDocDataUrl(
-        title,
-        JSON.stringify(
-          { error: error instanceof Error ? error.message : String(error) },
-          null,
-          2,
-        ),
-        summary,
-        undefined,
-        summary,
-      );
-      docBrowser.open(url, { newTab: true, title, kind: "content" });
-    }
-  };
-
-  const handleInstall = async (payload: {
-    name: string;
-    allAgents: boolean;
-    inputs: Record<string, string>;
-  }) => {
-    if (!installingItem) {
-      return;
-    }
-    await installMutation.mutateAsync({
-      spec: installingItem.slug,
-      name: payload.name.trim(),
-      allAgents: payload.allAgents,
-      inputs: payload.inputs,
-    });
-    setInstallingItem(null);
-  };
-
-  const handleManage = async (
-    action: "enable" | "disable" | "remove",
-    record: MarketplaceInstalledRecord,
-  ) => {
-    const target = record.id || record.spec;
-    if (!target) {
-      return;
-    }
-    if (action === "remove") {
-      const confirmed = await confirm({
-        title: `${t("marketplaceMcpRemoveTitle")} ${target}?`,
-        description: t("marketplaceMcpRemoveDescription"),
-        confirmLabel: t("marketplaceMcpRemove"),
-        variant: "destructive",
-      });
-      if (!confirmed) {
-        return;
-      }
-    }
-    await manageMutation.mutateAsync({
-      action,
-      id: target,
-      spec: record.spec,
-    });
-  };
-
-  return (
-    <PageLayout className="flex h-full min-h-0 flex-col pb-0">
-      <PageHeader
-        title={t("marketplaceMcpPageTitle")}
-        description={t("marketplaceMcpPageDescription")}
-      />
-
-      <Tabs
-        tabs={[
-          { id: "catalog", label: t("marketplaceMcpTabCatalog") },
-          {
-            id: "installed",
-            label: t("marketplaceMcpTabInstalled"),
-            count: installedQuery.data?.total ?? 0,
-          },
-        ]}
-        activeTab={scope}
-        onChange={(value) => setScope(value as ScopeType)}
-        className="mb-4"
-      />
-
-      <div className="mb-4 flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
-        <Input
-          value={searchText}
-          onChange={(event) => setSearchText(event.target.value)}
-          placeholder={t("marketplaceMcpSearchPlaceholder")}
-          className="md:max-w-sm"
-        />
-
-        <Select
-          value={sort}
-          onValueChange={(value) => setSort(value as MarketplaceSort)}
-        >
-          <SelectTrigger className="h-9 w-[180px] rounded-lg">
-            <SelectValue />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="relevance">
-              {t("marketplaceSortRelevance")}
-            </SelectItem>
-            <SelectItem value="updated">
-              {t("marketplaceSortUpdated")}
-            </SelectItem>
-          </SelectContent>
-        </Select>
-      </div>
-
-      <section className="flex min-h-0 flex-1 flex-col">
-        <div className="mb-3 flex items-center justify-between">
-          <h3 className="text-sm font-semibold text-gray-900">
-            {scope === "catalog"
-              ? t("marketplaceMcpSectionCatalog")
-              : t("marketplaceMcpSectionInstalled")}
-          </h3>
-          <span className="text-xs text-gray-500">
-            {scope === "catalog"
-              ? (itemsQuery.data?.total ?? 0)
-              : (installedQuery.data?.total ?? 0)}
-          </span>
-        </div>
-
-        <div
-          ref={containerRef}
-          className="min-h-0 flex-1 overflow-y-auto pr-1"
-          aria-busy={itemsQuery.isLoading || itemsQuery.isFetchingNextPage}
-        >
-          <div className="grid grid-cols-1 gap-3 lg:grid-cols-2 2xl:grid-cols-3">
-            {scope === "catalog" && itemsQuery.isLoading && (
-              <MarketplaceListSkeleton count={6} />
-            )}
-
-            {scope === "catalog" &&
-              !itemsQuery.isLoading &&
-              (itemsQuery.data?.items ?? []).map((item) => {
-                const installed = findInstalledRecordForItem(
-                  item,
-                  installedRecordLookup,
-                );
-                return (
-                  <McpMarketplaceCard
-                    key={item.id}
-                    item={item}
-                    record={installed}
-                    localeFallbacks={localeFallbacks}
-                    onOpen={() => void openDoc(item, installed)}
-                    onInstall={() => setInstallingItem(item)}
-                    onToggle={
-                      installed
-                        ? () =>
-                            void handleManage(
-                              installed.enabled === false
-                                ? "enable"
-                                : "disable",
-                              installed,
-                            )
-                        : undefined
-                    }
-                    onDoctor={
-                      installed
-                        ? () => {
-                            setDoctorTarget(installed.id ?? null);
-                            setDoctorResult(null);
-                            void doctorMutation.mutateAsync(installed.id ?? "");
-                          }
-                        : undefined
-                    }
-                    onRemove={
-                      installed
-                        ? () => void handleManage("remove", installed)
-                        : undefined
-                    }
-                  />
-                );
-              })}
-            {scope === "installed" &&
-              installedRecords.map((record) => (
-                <McpMarketplaceCard
-                  key={record.id ?? record.spec}
-                  record={record}
-                  localeFallbacks={localeFallbacks}
-                  onOpen={() => void openDoc(undefined, record)}
-                  onToggle={() =>
-                    void handleManage(
-                      record.enabled === false ? "enable" : "disable",
-                      record,
-                    )
-                  }
-                  onDoctor={() => {
-                    setDoctorTarget(record.id ?? null);
-                    setDoctorResult(null);
-                    void doctorMutation.mutateAsync(record.id ?? "");
-                  }}
-                  onRemove={() => void handleManage("remove", record)}
-                />
-              ))}
-          </div>
-
-          {scope === "catalog" && itemsQuery.isError && (
-            <NoticeCard
-              tone="danger"
-              title={t("marketplaceMcpSectionCatalog")}
-              description={itemsQuery.error.message}
-            />
-          )}
-          {scope === "installed" && installedQuery.isError && (
-            <NoticeCard
-              tone="danger"
-              title={t("marketplaceMcpSectionInstalled")}
-              description={installedQuery.error.message}
-            />
-          )}
-          {scope === "catalog" &&
-            !itemsQuery.isLoading &&
-            (itemsQuery.data?.items?.length ?? 0) === 0 && (
-              <div className="py-8 text-center text-sm text-gray-500">
-                {t("marketplaceNoMcp")}
-              </div>
-            )}
-          {scope === "installed" && installedRecords.length === 0 && (
-            <div className="py-8 text-center text-sm text-gray-500">
-              {t("marketplaceNoInstalledMcp")}
-            </div>
-          )}
-
-          {scope === "catalog" && !itemsQuery.isError && (
-            <MarketplaceInfiniteScrollStatus
-              hasMore={Boolean(itemsQuery.hasNextPage)}
-              loading={itemsQuery.isFetchingNextPage}
-              sentinelRef={sentinelRef}
-            />
-          )}
-        </div>
-      </section>
-
-      <InstallDialog
-        item={installingItem}
-        open={Boolean(installingItem)}
-        pending={installMutation.isPending}
-        onOpenChange={(open) => !open && setInstallingItem(null)}
-        onSubmit={handleInstall}
-      />
-      <DoctorDialog
-        open={Boolean(doctorTarget)}
-        targetName={doctorTarget}
-        result={doctorResult}
-        pending={doctorMutation.isPending}
-        onOpenChange={(open) => !open && setDoctorTarget(null)}
-      />
-      <ConfirmDialog />
-    </PageLayout>
-  );
-}

package/src/hooks/README.md

@@ -1,3 +0,0 @@
-## 目录预算豁免
-
-- 原因：`hooks/` 目录作为 UI 行为接入层，需要并列保留按能力划分的查询、变更和会话辅助 hooks；本次新增 `useAgents.ts` 是为了把 agent 管理职责从 `useConfig.ts` 拆出，属于减债后的职责回收，而不是继续堆叠到单文件。

package/src/hooks/useObservable.ts

@@ -1,20 +0,0 @@
-import { useEffect, useState } from 'react';
-import type { BehaviorSubject, Observable } from 'rxjs';
-
-export function useValueFromBehaviorSubject<T>(subject: BehaviorSubject<T>): T {
-  const [state, setState] = useState<T>(subject.getValue());
-  useEffect(() => {
-    const subscription = subject.subscribe(setState);
-    return () => subscription.unsubscribe();
-  }, [subject]);
-  return state;
-}
-
-export function useValueFromObservable<T>(observable: Observable<T>, defaultValue: T): T {
-  const [state, setState] = useState<T>(defaultValue);
-  useEffect(() => {
-    const subscription = observable.subscribe(setState);
-    return () => subscription.unsubscribe();
-  }, [observable]);
-  return state;
-}

package/src/lib/chat-runtime-utils.ts

@@ -1,250 +0,0 @@
-import type { SessionMessageView } from '@/api/types';
-import { extractMessageText } from '@/lib/chat-message';
-import { ToolInvocationStatus, type UIMessage } from '@nextclaw/agent-chat';
-
-export { isAbortLikeError, formatSendError, buildLocalAssistantMessage } from '@nextclaw/agent-chat';
-
-export function normalizeRequestedSkills(value: string[] | undefined): string[] {
-  if (!Array.isArray(value)) {
-    return [];
-  }
-  const deduped = new Set<string>();
-  for (const item of value) {
-    const trimmed = item.trim();
-    if (trimmed) {
-      deduped.add(trimmed);
-    }
-  }
-  return [...deduped];
-}
-
-export function buildUiMessagesFromHistoryMessages(messages: SessionMessageView[]): UIMessage[] {
-  const normalizedToolRoles = new Set(['tool', 'tool_result', 'toolresult', 'function']);
-  const output: UIMessage[] = [];
-  let cursor = 0;
-  let assistantIndex = 0;
-  let activeAssistant: UIMessage | null = null;
-
-  const buildId = (role: UIMessage['role'], timestamp: string) => {
-    cursor += 1;
-    return `history-${role}-${timestamp || 'unknown'}-${cursor}`;
-  };
-
-  const parseArgsPayload = (raw: unknown): { args: string; parsedArgs?: unknown } => {
-    const args = typeof raw === 'string' ? raw : JSON.stringify(raw ?? {});
-    try {
-      return { args, parsedArgs: JSON.parse(args) };
-    } catch {
-      return { args };
-    }
-  };
-
-  const findToolPartIndex = (parts: UIMessage['parts'], toolCallId: string): number => {
-    for (let index = parts.length - 1; index >= 0; index -= 1) {
-      const part = parts[index];
-      if (part.type === 'tool-invocation' && part.toolInvocation.toolCallId === toolCallId) {
-        return index;
-      }
-    }
-    return -1;
-  };
-
-  const ensureAssistant = (timestamp: string): UIMessage => {
-    if (activeAssistant) {
-      activeAssistant = {
-        ...activeAssistant,
-        meta: {
-          ...activeAssistant.meta,
-          timestamp
-        }
-      };
-      return activeAssistant;
-    }
-    assistantIndex += 1;
-    activeAssistant = {
-      id: `history-assistant-${assistantIndex}-${timestamp || 'unknown'}`,
-      role: 'assistant',
-      parts: [],
-      meta: {
-        source: 'history',
-        status: 'final',
-        timestamp
-      }
-    };
-    return activeAssistant;
-  };
-
-  const flushAssistant = () => {
-    if (!activeAssistant) {
-      return;
-    }
-    if (activeAssistant.parts.length > 0) {
-      output.push(activeAssistant);
-    }
-    activeAssistant = null;
-  };
-
-  const appendAssistantText = (timestamp: string, text: string) => {
-    if (!text) {
-      return;
-    }
-    const assistant = ensureAssistant(timestamp);
-    assistant.parts = [...assistant.parts, { type: 'text', text }];
-  };
-
-  const appendAssistantReasoning = (timestamp: string, reasoning: string) => {
-    if (!reasoning) {
-      return;
-    }
-    const assistant = ensureAssistant(timestamp);
-    assistant.parts = [...assistant.parts, { type: 'reasoning', reasoning, details: [] }];
-  };
-
-  const appendAssistantToolCall = (params: {
-    timestamp: string;
-    toolCallId: string;
-    toolName: string;
-    args: string;
-    parsedArgs?: unknown;
-  }) => {
-    const assistant = ensureAssistant(params.timestamp);
-    const partIndex = findToolPartIndex(assistant.parts, params.toolCallId);
-    const part = {
-      type: 'tool-invocation' as const,
-      toolInvocation: {
-        status: ToolInvocationStatus.CALL,
-        toolCallId: params.toolCallId,
-        toolName: params.toolName,
-        args: params.args,
-        parsedArgs: params.parsedArgs
-      }
-    };
-    if (partIndex >= 0) {
-      assistant.parts = [...assistant.parts.slice(0, partIndex), part, ...assistant.parts.slice(partIndex + 1)];
-      return;
-    }
-    assistant.parts = [...assistant.parts, part];
-  };
-
-  const appendAssistantToolResult = (params: {
-    timestamp: string;
-    toolCallId: string;
-    toolName: string;
-    result: unknown;
-  }) => {
-    if (!params.toolCallId) {
-      return;
-    }
-    const assistant = ensureAssistant(params.timestamp);
-    const partIndex = findToolPartIndex(assistant.parts, params.toolCallId);
-    if (partIndex < 0) {
-      assistant.parts = [
-        ...assistant.parts,
-        {
-          type: 'tool-invocation',
-          toolInvocation: {
-            status: ToolInvocationStatus.RESULT,
-            toolCallId: params.toolCallId,
-            toolName: params.toolName,
-            args: '{}',
-            parsedArgs: undefined,
-            result: params.result
-          }
-        }
-      ];
-      return;
-    }
-    const part = assistant.parts[partIndex];
-    if (part.type !== 'tool-invocation') {
-      return;
-    }
-    assistant.parts = [
-      ...assistant.parts.slice(0, partIndex),
-      {
-        ...part,
-        toolInvocation: {
-          ...part.toolInvocation,
-          status: ToolInvocationStatus.RESULT,
-          result: params.result
-        }
-      },
-      ...assistant.parts.slice(partIndex + 1)
-    ];
-  };
-
-  for (const message of messages) {
-    const roleValue = message.role?.toLowerCase().trim();
-    if (!roleValue) {
-      continue;
-    }
-    const timestamp = message.timestamp;
-
-    if (roleValue === 'user' || roleValue === 'system' || roleValue === 'data') {
-      flushAssistant();
-      const text = extractMessageText(message.content).trim();
-      if (!text) {
-        continue;
-      }
-      output.push({
-        id: buildId(roleValue as UIMessage['role'], timestamp),
-        role: roleValue as UIMessage['role'],
-        parts: [{ type: 'text', text }],
-        meta: {
-          source: 'history',
-          status: 'final',
-          timestamp
-        }
-      });
-      continue;
-    }
-
-    if (roleValue === 'assistant') {
-      const text = extractMessageText(message.content).trim();
-      if (text) {
-        appendAssistantText(timestamp, text);
-      }
-      if (typeof message.reasoning_content === 'string' && message.reasoning_content.trim()) {
-        appendAssistantReasoning(timestamp, message.reasoning_content.trim());
-      }
-      if (Array.isArray(message.tool_calls)) {
-        for (const call of message.tool_calls) {
-          if (!call || typeof call !== 'object') {
-            continue;
-          }
-          const callRecord = call as Record<string, unknown>;
-          const fnValue = callRecord.function;
-          const fn = typeof fnValue === 'object' && fnValue ? (fnValue as { name?: unknown; arguments?: unknown }) : null;
-          const toolCallId = typeof callRecord.id === 'string' ? callRecord.id.trim() : '';
-          if (!toolCallId) {
-            continue;
-          }
-          const toolName =
-            typeof fn?.name === 'string' ? fn.name : typeof callRecord.name === 'string' ? callRecord.name : 'tool';
-          const payload = parseArgsPayload(fn?.arguments ?? callRecord.arguments ?? '');
-          appendAssistantToolCall({
-            timestamp,
-            toolCallId,
-            toolName,
-            args: payload.args,
-            parsedArgs: payload.parsedArgs
-          });
-        }
-      }
-      continue;
-    }
-
-    if (normalizedToolRoles.has(roleValue)) {
-      const toolCallId = typeof message.tool_call_id === 'string' ? message.tool_call_id.trim() : '';
-      const toolName = typeof message.name === 'string' && message.name.trim() ? message.name.trim() : 'tool';
-      appendAssistantToolResult({
-        timestamp,
-        toolCallId,
-        toolName,
-        result: message.content
-      });
-    }
-  }
-
-  flushAssistant();
-  return output;
-}

package/src/stores/ui.store.ts

@@ -1,14 +0,0 @@
-import { create } from 'zustand';
-
-interface UiState {
-  // Channel modal
-  channelModal: { open: boolean; channel?: string };
-  openChannelModal: (channel?: string) => void;
-  closeChannelModal: () => void;
-}
-
-export const useUiStore = create<UiState>((set) => ({
-  channelModal: { open: false },
-  openChannelModal: (channel) => set({ channelModal: { open: true, channel } }),
-  closeChannelModal: () => set({ channelModal: { open: false } })
-}));