npm - @nextclaw/ui - Versions diffs - 0.5.18 → 0.5.20 - Mend

@nextclaw/ui 0.5.18 → 0.5.20

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 (43) hide show

package/CHANGELOG.md +15 -0
package/dist/assets/ChannelsList-DqgRRdUH.js +1 -0
package/dist/assets/ChatPage-BQyomkth.js +1 -0
package/dist/assets/CronConfig-Bmg449JI.js +1 -0
package/dist/assets/{DocBrowser-Bgv_z1RY.js → DocBrowser-C35MebbI.js} +1 -1
package/dist/assets/MarketplacePage-HjEQ8sFt.js +1 -0
package/dist/assets/{ModelConfig-BTAn_TG4.js → ModelConfig-BpBoi1sz.js} +1 -1
package/dist/assets/ProvidersList-0tYTV40v.js +1 -0
package/dist/assets/{RuntimeConfig-kKWoFQjf.js → RuntimeConfig-B_WI-DHf.js} +1 -1
package/dist/assets/SessionsConfig-BEt-f6WS.js +2 -0
package/dist/assets/{action-link-Ct1QpDX3.js → action-link-CSScZ_id.js} +1 -1
package/dist/assets/{card-DnpDTyLa.js → card-Cj58-DCd.js} +1 -1
package/dist/assets/dialog-Ce8jNftN.js +5 -0
package/dist/assets/index-CPFSdkyQ.css +1 -0
package/dist/assets/index-C_z1Na9N.js +2 -0
package/dist/assets/{label-CBp5G8Jf.js → label-CQdP2NhF.js} +1 -1
package/dist/assets/{page-layout-BgyUYe3t.js → page-layout-Byyxptub.js} +1 -1
package/dist/assets/{switch-BSkwgbGc.js → switch-ChJzdp0x.js} +1 -1
package/dist/assets/{tabs-custom-m7KnhudE.js → tabs-custom-DWlAbbCy.js} +1 -1
package/dist/assets/useConfig-8lC_4LwH.js +1 -0
package/dist/assets/{useConfirmDialog-CY7A5iAH.js → useConfirmDialog-B7iWHb5k.js} +1 -1
package/dist/assets/{vendor-Bhv7yx8z.js → vendor-Dz2q6Qmc.js} +67 -57
package/dist/index.html +3 -3
package/package.json +1 -1
package/src/App.tsx +4 -2
package/src/api/config.ts +11 -0
package/src/api/types.ts +22 -0
package/src/components/chat/ChatPage.tsx +413 -0
package/src/components/config/CronConfig.tsx +1 -1
package/src/components/config/SessionsConfig.tsx +1 -1
package/src/components/layout/Sidebar.tsx +6 -1
package/src/components/marketplace/MarketplacePage.tsx +40 -11
package/src/hooks/useConfig.ts +11 -0
package/src/lib/i18n.ts +26 -0
package/dist/assets/ChannelsList-BQpoGiEX.js +0 -1
package/dist/assets/CronConfig-K744sEal.js +0 -1
package/dist/assets/MarketplacePage-C4eeohin.js +0 -1
package/dist/assets/ProvidersList-DE_n9LRR.js +0 -1
package/dist/assets/SessionsConfig-Djq5Fzty.js +0 -2
package/dist/assets/dialog-BaD4ZHIg.js +0 -5
package/dist/assets/index-DdpR1fdj.css +0 -1
package/dist/assets/index-qoh9Y37b.js +0 -2
package/dist/assets/useConfig-BbiIjAg1.js +0 -1

package/dist/index.html CHANGED Viewed

@@ -6,9 +6,9 @@
   <link rel="icon" type="image/svg+xml" href="/logo.svg" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>NextClaw - 系统配置</title>
-  <script type="module" crossorigin src="/assets/index-qoh9Y37b.js"></script>
-  <link rel="modulepreload" crossorigin href="/assets/vendor-Bhv7yx8z.js">
-  <link rel="stylesheet" crossorigin href="/assets/index-DdpR1fdj.css">
+  <script type="module" crossorigin src="/assets/index-C_z1Na9N.js"></script>
+  <link rel="modulepreload" crossorigin href="/assets/vendor-Dz2q6Qmc.js">
+  <link rel="stylesheet" crossorigin href="/assets/index-CPFSdkyQ.css">
 </head>
 <body>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@nextclaw/ui",
-  "version": "0.5.18",
+  "version": "0.5.20",
   "private": false,
   "type": "module",
   "license": "MIT",

package/src/App.tsx CHANGED Viewed

@@ -15,6 +15,7 @@ const queryClient = new QueryClient({
 });
 const ModelConfigPage = lazy(async () => ({ default: (await import('@/components/config/ModelConfig')).ModelConfig }));
+const ChatPage = lazy(async () => ({ default: (await import('@/components/chat/ChatPage')).ChatPage }));
 const ProvidersListPage = lazy(async () => ({ default: (await import('@/components/config/ProvidersList')).ProvidersList }));
 const ChannelsListPage = lazy(async () => ({ default: (await import('@/components/config/ChannelsList')).ChannelsList }));
 const RuntimeConfigPage = lazy(async () => ({ default: (await import('@/components/config/RuntimeConfig')).RuntimeConfig }));
@@ -39,6 +40,7 @@ function AppContent() {
       <AppLayout>
         <div key={location.pathname} className="animate-fade-in w-full h-full">
           <Routes>
+            <Route path="/chat" element={<LazyRoute><ChatPage /></LazyRoute>} />
             <Route path="/model" element={<LazyRoute><ModelConfigPage /></LazyRoute>} />
             <Route path="/providers" element={<LazyRoute><ProvidersListPage /></LazyRoute>} />
             <Route path="/channels" element={<LazyRoute><ChannelsListPage /></LazyRoute>} />
@@ -47,8 +49,8 @@ function AppContent() {
             <Route path="/cron" element={<LazyRoute><CronConfigPage /></LazyRoute>} />
             <Route path="/marketplace" element={<Navigate to="/marketplace/plugins" replace />} />
             <Route path="/marketplace/:type" element={<LazyRoute><MarketplacePage /></LazyRoute>} />
-            <Route path="/" element={<Navigate to="/model" replace />} />
-            <Route path="*" element={<Navigate to="/model" replace />} />
+            <Route path="/" element={<Navigate to="/chat" replace />} />
+            <Route path="*" element={<Navigate to="/chat" replace />} />
           </Routes>
         </div>
       </AppLayout>

package/src/api/config.ts CHANGED Viewed

@@ -12,6 +12,8 @@ import type {
   SessionsListView,
   SessionHistoryView,
   SessionPatchUpdate,
+  ChatTurnRequest,
+  ChatTurnView,
   CronListView,
   CronEnableRequest,
   CronRunRequest,
@@ -167,6 +169,15 @@ export async function deleteSession(key: string): Promise<{ deleted: boolean }>
   return response.data;
 }
+// POST /api/chat/turn
+export async function sendChatTurn(data: ChatTurnRequest): Promise<ChatTurnView> {
+  const response = await api.post<ChatTurnView>('/api/chat/turn', data);
+  if (!response.ok) {
+    throw new Error(response.error.message);
+  }
+  return response.data;
+}
 // GET /api/cron
 export async function fetchCronJobs(params?: { all?: boolean }): Promise<CronListView> {
   const query = new URLSearchParams();

package/src/api/types.ts CHANGED Viewed

@@ -92,6 +92,26 @@ export type SessionPatchUpdate = {
   clearHistory?: boolean;
 };
+export type ChatTurnRequest = {
+  message: string;
+  sessionKey?: string;
+  agentId?: string;
+  channel?: string;
+  chatId?: string;
+  model?: string;
+  metadata?: Record<string, unknown>;
+};
+export type ChatTurnView = {
+  reply: string;
+  sessionKey: string;
+  agentId?: string;
+  model?: string;
+  requestedAt: string;
+  completedAt: string;
+  durationMs: number;
+};
 export type CronScheduleView =
   | { kind: "at"; atMs?: number | null }
   | { kind: "every"; everyMs?: number | null }
@@ -366,6 +386,8 @@ export type MarketplaceInstallRequest = {
   type: MarketplaceItemType;
   spec: string;
   kind?: MarketplaceInstallKind;
+  skill?: string;
+  installPath?: string;
   version?: string;
   registry?: string;
   force?: boolean;

package/src/components/chat/ChatPage.tsx ADDED Viewed

@@ -0,0 +1,413 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import type { SessionEntryView, SessionMessageView } from '@/api/types';
+import { useConfig, useDeleteSession, useSendChatTurn, useSessionHistory, useSessions } from '@/hooks/useConfig';
+import { useConfirmDialog } from '@/hooks/useConfirmDialog';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { PageHeader, PageLayout } from '@/components/layout/page-layout';
+import { cn } from '@/lib/utils';
+import { formatDateTime, t } from '@/lib/i18n';
+import { Bot, MessageSquareText, Plus, RefreshCw, Search, Send, Trash2, User } from 'lucide-react';
+const CHAT_SESSION_STORAGE_KEY = 'nextclaw.ui.chat.activeSession';
+function readStoredSessionKey(): string | null {
+  if (typeof window === 'undefined') {
+    return null;
+  }
+  try {
+    const value = window.localStorage.getItem(CHAT_SESSION_STORAGE_KEY);
+    return value && value.trim().length > 0 ? value : null;
+  } catch {
+    return null;
+  }
+}
+function writeStoredSessionKey(value: string | null): void {
+  if (typeof window === 'undefined') {
+    return;
+  }
+  try {
+    if (!value) {
+      window.localStorage.removeItem(CHAT_SESSION_STORAGE_KEY);
+      return;
+    }
+    window.localStorage.setItem(CHAT_SESSION_STORAGE_KEY, value);
+  } catch {
+    // ignore storage errors
+  }
+}
+function resolveAgentIdFromSessionKey(sessionKey: string): string | null {
+  const match = /^agent:([^:]+):/i.exec(sessionKey.trim());
+  if (!match) {
+    return null;
+  }
+  const value = match[1]?.trim();
+  return value ? value : null;
+}
+function buildNewSessionKey(agentId: string): string {
+  const slug = Math.random().toString(36).slice(2, 8);
+  return `agent:${agentId}:ui:direct:web-${Date.now().toString(36)}${slug}`;
+}
+function sessionDisplayName(session: SessionEntryView): string {
+  if (session.label && session.label.trim()) {
+    return session.label.trim();
+  }
+  const chunks = session.key.split(':');
+  return chunks[chunks.length - 1] || session.key;
+}
+function MessageBubble({ message }: { message: SessionMessageView }) {
+  const role = message.role.toLowerCase();
+  const isUser = role === 'user';
+  return (
+    <div className={cn('flex w-full', isUser ? 'justify-end' : 'justify-start')}>
+      <div
+        className={cn(
+          'max-w-[88%] rounded-2xl px-4 py-3 shadow-sm border',
+          isUser
+            ? 'bg-primary text-white border-primary rounded-br-md'
+            : 'bg-white text-gray-800 border-gray-200 rounded-bl-md'
+        )}
+      >
+        <div className="mb-1 flex items-center gap-2 text-[11px] opacity-80">
+          {isUser ? <User className="h-3.5 w-3.5" /> : <Bot className="h-3.5 w-3.5" />}
+          <span className="font-semibold">{message.role}</span>
+          <span>{formatDateTime(message.timestamp)}</span>
+        </div>
+        <div className="whitespace-pre-wrap break-words text-sm leading-relaxed">{message.content}</div>
+      </div>
+    </div>
+  );
+}
+export function ChatPage() {
+  const [query, setQuery] = useState('');
+  const [draft, setDraft] = useState('');
+  const [selectedSessionKey, setSelectedSessionKey] = useState<string | null>(() => readStoredSessionKey());
+  const [selectedAgentId, setSelectedAgentId] = useState('main');
+  const [optimisticUserMessage, setOptimisticUserMessage] = useState<SessionMessageView | null>(null);
+  const { confirm, ConfirmDialog } = useConfirmDialog();
+  const threadRef = useRef<HTMLDivElement | null>(null);
+  const configQuery = useConfig();
+  const sessionsQuery = useSessions({ q: query.trim() || undefined, limit: 120, activeMinutes: 0 });
+  const historyQuery = useSessionHistory(selectedSessionKey, 300);
+  const deleteSession = useDeleteSession();
+  const sendChatTurn = useSendChatTurn();
+  const agentOptions = useMemo(() => {
+    const list = configQuery.data?.agents.list ?? [];
+    const unique = new Set<string>(['main']);
+    for (const item of list) {
+      if (typeof item.id === 'string' && item.id.trim().length > 0) {
+        unique.add(item.id.trim().toLowerCase());
+      }
+    }
+    return Array.from(unique);
+  }, [configQuery.data?.agents.list]);
+  const sessions = useMemo(() => sessionsQuery.data?.sessions ?? [], [sessionsQuery.data?.sessions]);
+  const selectedSession = useMemo(
+    () => sessions.find((session) => session.key === selectedSessionKey) ?? null,
+    [selectedSessionKey, sessions]
+  );
+  const historyMessages = useMemo(() => historyQuery.data?.messages ?? [], [historyQuery.data?.messages]);
+  const mergedMessages = useMemo(() => {
+    if (!optimisticUserMessage) {
+      return historyMessages;
+    }
+    return [...historyMessages, optimisticUserMessage];
+  }, [historyMessages, optimisticUserMessage]);
+  useEffect(() => {
+    if (!selectedSessionKey && sessions.length > 0) {
+      setSelectedSessionKey(sessions[0].key);
+    }
+  }, [selectedSessionKey, sessions]);
+  useEffect(() => {
+    writeStoredSessionKey(selectedSessionKey);
+  }, [selectedSessionKey]);
+  useEffect(() => {
+    const inferred = selectedSessionKey ? resolveAgentIdFromSessionKey(selectedSessionKey) : null;
+    if (!inferred) {
+      return;
+    }
+    if (selectedAgentId !== inferred) {
+      setSelectedAgentId(inferred);
+    }
+  }, [selectedAgentId, selectedSessionKey]);
+  useEffect(() => {
+    const element = threadRef.current;
+    if (!element) {
+      return;
+    }
+    element.scrollTop = element.scrollHeight;
+  }, [mergedMessages.length, sendChatTurn.isPending, selectedSessionKey]);
+  const createNewSession = () => {
+    const next = buildNewSessionKey(selectedAgentId);
+    setSelectedSessionKey(next);
+    setOptimisticUserMessage(null);
+  };
+  const handleDeleteSession = async () => {
+    if (!selectedSessionKey) {
+      return;
+    }
+    const confirmed = await confirm({
+      title: t('chatDeleteSessionConfirm'),
+      variant: 'destructive',
+      confirmLabel: t('delete')
+    });
+    if (!confirmed) {
+      return;
+    }
+    deleteSession.mutate(
+      { key: selectedSessionKey },
+      {
+        onSuccess: async () => {
+          setSelectedSessionKey(null);
+          setOptimisticUserMessage(null);
+          await sessionsQuery.refetch();
+        }
+      }
+    );
+  };
+  const handleSend = async () => {
+    const message = draft.trim();
+    if (!message || sendChatTurn.isPending) {
+      return;
+    }
+    const hadActiveSession = Boolean(selectedSessionKey);
+    const sessionKey = selectedSessionKey ?? buildNewSessionKey(selectedAgentId);
+    if (!selectedSessionKey) {
+      setSelectedSessionKey(sessionKey);
+    }
+    setDraft('');
+    setOptimisticUserMessage({
+      role: 'user',
+      content: message,
+      timestamp: new Date().toISOString()
+    });
+    try {
+      const result = await sendChatTurn.mutateAsync({
+        data: {
+          message,
+          sessionKey,
+          agentId: selectedAgentId,
+          channel: 'ui',
+          chatId: 'web-ui'
+        }
+      });
+      setOptimisticUserMessage(null);
+      if (result.sessionKey !== sessionKey) {
+        setSelectedSessionKey(result.sessionKey);
+      }
+      await sessionsQuery.refetch();
+      if (hadActiveSession) {
+        await historyQuery.refetch();
+      }
+    } catch {
+      setOptimisticUserMessage(null);
+      setDraft(message);
+    }
+  };
+  return (
+    <PageLayout fullHeight>
+      <PageHeader
+        title={t('chatPageTitle')}
+        description={t('chatPageDescription')}
+        actions={
+          <div className="flex items-center gap-2">
+            <Button variant="outline" size="sm" onClick={() => historyQuery.refetch()} className="rounded-lg">
+              <RefreshCw className={cn('h-3.5 w-3.5 mr-1.5', historyQuery.isFetching && 'animate-spin')} />
+              {t('chatRefresh')}
+            </Button>
+            <Button variant="primary" size="sm" onClick={createNewSession} className="rounded-lg">
+              <Plus className="h-3.5 w-3.5 mr-1.5" />
+              {t('chatNewSession')}
+            </Button>
+          </div>
+        }
+      />
+      <div className="flex-1 min-h-0 flex gap-4 max-lg:flex-col">
+        <aside className="w-[320px] max-lg:w-full shrink-0 rounded-2xl border border-gray-200 bg-white shadow-card flex flex-col min-h-0">
+          <div className="p-4 border-b border-gray-100 space-y-3">
+            <div className="relative">
+              <Search className="h-3.5 w-3.5 absolute left-3 top-2.5 text-gray-400" />
+              <Input
+                value={query}
+                onChange={(event) => setQuery(event.target.value)}
+                placeholder={t('chatSearchSessionPlaceholder')}
+                className="pl-8 h-9 rounded-lg text-xs"
+              />
+            </div>
+            <div className="grid grid-cols-2 gap-2">
+              <Button variant="outline" size="sm" className="rounded-lg" onClick={() => sessionsQuery.refetch()}>
+                <RefreshCw className={cn('h-3.5 w-3.5 mr-1.5', sessionsQuery.isFetching && 'animate-spin')} />
+                {t('chatRefresh')}
+              </Button>
+              <Button variant="subtle" size="sm" className="rounded-lg" onClick={createNewSession}>
+                <Plus className="h-3.5 w-3.5 mr-1.5" />
+                {t('chatNewSession')}
+              </Button>
+            </div>
+          </div>
+          <div className="flex-1 min-h-0 overflow-y-auto custom-scrollbar p-2">
+            {sessionsQuery.isLoading ? (
+              <div className="text-sm text-gray-500 p-4">{t('sessionsLoading')}</div>
+            ) : sessions.length === 0 ? (
+              <div className="p-5 m-2 rounded-xl border border-dashed border-gray-200 text-center text-sm text-gray-500">
+                <MessageSquareText className="h-7 w-7 mx-auto mb-2 text-gray-300" />
+                {t('sessionsEmpty')}
+              </div>
+            ) : (
+              <div className="space-y-1">
+                {sessions.map((session) => {
+                  const active = selectedSessionKey === session.key;
+                  return (
+                    <button
+                      key={session.key}
+                      onClick={() => setSelectedSessionKey(session.key)}
+                      className={cn(
+                        'w-full rounded-xl border px-3 py-2.5 text-left transition-all',
+                        active
+                          ? 'border-primary/30 bg-primary/5'
+                          : 'border-transparent hover:border-gray-200 hover:bg-gray-50'
+                      )}
+                    >
+                      <div className="text-sm font-semibold text-gray-900 truncate">{sessionDisplayName(session)}</div>
+                      <div className="mt-1 text-[11px] text-gray-500 truncate">{session.key}</div>
+                      <div className="mt-1 text-[11px] text-gray-400">
+                        {session.messageCount} · {formatDateTime(session.updatedAt)}
+                      </div>
+                    </button>
+                  );
+                })}
+              </div>
+            )}
+          </div>
+        </aside>
+        <section className="flex-1 min-h-0 rounded-2xl border border-gray-200 bg-gradient-to-b from-gray-50/60 to-white shadow-card flex flex-col overflow-hidden">
+          <div className="px-5 py-4 border-b border-gray-200/80 bg-white/80 backdrop-blur-sm flex flex-wrap items-center gap-3">
+            <div className="min-w-[220px] max-w-[320px]">
+              <div className="text-[11px] text-gray-500 mb-1">{t('chatAgentLabel')}</div>
+              <Select value={selectedAgentId} onValueChange={setSelectedAgentId}>
+                <SelectTrigger className="h-9 rounded-lg">
+                  <SelectValue placeholder={t('chatSelectAgent')} />
+                </SelectTrigger>
+                <SelectContent>
+                  {agentOptions.map((agent) => (
+                    <SelectItem key={agent} value={agent}>
+                      {agent}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="flex-1 min-w-[260px]">
+              <div className="text-[11px] text-gray-500 mb-1">{t('chatSessionLabel')}</div>
+              <div className="h-9 rounded-lg border border-gray-200 bg-white px-3 text-xs text-gray-600 flex items-center truncate">
+                {selectedSessionKey ?? t('chatNoSession')}
+              </div>
+            </div>
+            <Button
+              variant="outline"
+              size="sm"
+              className="rounded-lg self-end"
+              onClick={handleDeleteSession}
+              disabled={!selectedSession || deleteSession.isPending}
+            >
+              <Trash2 className="h-3.5 w-3.5 mr-1.5" />
+              {t('chatDeleteSession')}
+            </Button>
+          </div>
+          <div ref={threadRef} className="flex-1 min-h-0 overflow-y-auto custom-scrollbar px-5 py-5 space-y-3">
+            {!selectedSessionKey ? (
+              <div className="h-full flex items-center justify-center">
+                <div className="text-center text-gray-500">
+                  <MessageSquareText className="h-8 w-8 mx-auto mb-2 text-gray-300" />
+                  <div className="text-sm font-medium">{t('chatNoSession')}</div>
+                  <div className="text-xs mt-1">{t('chatNoSessionHint')}</div>
+                </div>
+              </div>
+            ) : historyQuery.isLoading ? (
+              <div className="text-sm text-gray-500">{t('chatHistoryLoading')}</div>
+            ) : (
+              <>
+                {mergedMessages.length === 0 ? (
+                  <div className="text-sm text-gray-500">{t('chatNoMessages')}</div>
+                ) : (
+                  mergedMessages.map((message, index) => (
+                    <MessageBubble
+                      key={`${message.timestamp}-${message.role}-${index}`}
+                      message={message}
+                    />
+                  ))
+                )}
+                {sendChatTurn.isPending && (
+                  <div className="flex justify-start">
+                    <div className="rounded-2xl rounded-bl-md border border-gray-200 bg-white px-4 py-3 text-sm text-gray-500">
+                      {t('chatTyping')}
+                    </div>
+                  </div>
+                )}
+              </>
+            )}
+          </div>
+          <div className="border-t border-gray-200 bg-white p-4">
+            <div className="rounded-xl border border-gray-200 bg-white p-2">
+              <textarea
+                value={draft}
+                onChange={(event) => setDraft(event.target.value)}
+                onKeyDown={(event) => {
+                  if (event.key === 'Enter' && !event.shiftKey) {
+                    event.preventDefault();
+                    void handleSend();
+                  }
+                }}
+                placeholder={t('chatInputPlaceholder')}
+                className="w-full min-h-[68px] max-h-[220px] resize-y bg-transparent outline-none text-sm px-2 py-1.5 text-gray-800 placeholder:text-gray-400"
+                disabled={sendChatTurn.isPending}
+              />
+              <div className="flex items-center justify-between px-2 pb-1">
+                <div className="text-[11px] text-gray-400">{t('chatInputHint')}</div>
+                <Button
+                  size="sm"
+                  className="rounded-lg"
+                  onClick={() => void handleSend()}
+                  disabled={sendChatTurn.isPending || draft.trim().length === 0}
+                >
+                  <Send className="h-3.5 w-3.5 mr-1.5" />
+                  {sendChatTurn.isPending ? t('chatSending') : t('chatSend')}
+                </Button>
+              </div>
+            </div>
+          </div>
+        </section>
+      </div>
+      <ConfirmDialog />
+    </PageLayout>
+  );
+}

package/src/components/config/CronConfig.tsx CHANGED Viewed

@@ -8,7 +8,7 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@
 import { Card, CardContent } from '@/components/ui/card';
 import { cn } from '@/lib/utils';
 import { formatDateTime, t } from '@/lib/i18n';
-import { PageLayout, PageHeader, PageBody } from '@/components/layout/page-layout';
+import { PageLayout, PageHeader } from '@/components/layout/page-layout';
 import { AlarmClock, RefreshCw, Trash2, Play, Power } from 'lucide-react';
 type StatusFilter = 'all' | 'enabled' | 'disabled';

package/src/components/config/SessionsConfig.tsx CHANGED Viewed

@@ -7,7 +7,7 @@ import { Input } from '@/components/ui/input';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { cn } from '@/lib/utils';
 import { formatDateShort, formatDateTime, t } from '@/lib/i18n';
-import { PageLayout, PageHeader, PageBody } from '@/components/layout/page-layout';
+import { PageLayout, PageHeader } from '@/components/layout/page-layout';
 import { RefreshCw, Search, Clock, Inbox, Hash, Bot, User, MessageCircle, Settings as SettingsIcon } from 'lucide-react';
 const UNKNOWN_CHANNEL_KEY = '__unknown_channel__';

package/src/components/layout/Sidebar.tsx CHANGED Viewed

@@ -1,7 +1,7 @@
 import { cn } from '@/lib/utils';
 import { LANGUAGE_OPTIONS, t, type I18nLanguage } from '@/lib/i18n';
 import { THEME_OPTIONS, type UiTheme } from '@/lib/theme';
-import { Cpu, GitBranch, History, MessageSquare, Sparkles, BookOpen, Plug, BrainCircuit, AlarmClock, Languages, Palette } from 'lucide-react';
+import { Cpu, GitBranch, History, MessageCircle, MessageSquare, Sparkles, BookOpen, Plug, BrainCircuit, AlarmClock, Languages, Palette } from 'lucide-react';
 import { NavLink } from 'react-router-dom';
 import { useDocBrowser } from '@/components/doc-browser';
 import { useI18n } from '@/components/providers/I18nProvider';
@@ -31,6 +31,11 @@ export function Sidebar() {
   };
   const navItems = [
+    {
+      target: '/chat',
+      label: t('chat'),
+      icon: MessageCircle,
+    },
     {
       target: '/model',
       label: t('model'),

package/src/components/marketplace/MarketplacePage.tsx CHANGED Viewed

@@ -28,8 +28,7 @@ const PAGE_SIZE = 12;
 type ScopeType = 'all' | 'installed';
 type InstallState = {
-  isPending: boolean;
-  installingSpec?: string;
+  installingSpecs: ReadonlySet<string>;
 };
 type ManageState = {
@@ -234,7 +233,8 @@ function MarketplaceListCard(props: {
   const canUninstall = Boolean(canUninstallPlugin || canUninstallSkill);
   const isDisabled = record ? (record.enabled === false || record.runtimeStatus === 'disabled') : false;
-  const isInstalling = props.installState.isPending && props.item && props.installState.installingSpec === props.item.install.spec;
+  const installSpec = props.item?.install.spec;
+  const isInstalling = typeof installSpec === 'string' && props.installState.installingSpecs.has(installSpec);
   const displayType = type === 'plugin' ? t('marketplaceTypePlugin') : type === 'skill' ? t('marketplaceTypeSkill') : t('marketplaceTypeExtension');
@@ -288,7 +288,7 @@ function MarketplaceListCard(props: {
         {props.item && !record && (
           <button
             onClick={() => props.onInstall(props.item as MarketplaceItemSummary)}
-            disabled={props.installState.isPending}
+            disabled={isInstalling}
             className="inline-flex items-center gap-1.5 h-8 px-4 rounded-xl text-xs font-medium bg-primary text-white hover:bg-primary-600 disabled:opacity-50 transition-colors"
           >
             {isInstalling ? t('marketplaceInstalling') : t('marketplaceInstall')}
@@ -405,6 +405,7 @@ export function MarketplacePage() {
   const [scope, setScope] = useState<ScopeType>('all');
   const [sort, setSort] = useState<MarketplaceSort>('relevance');
   const [page, setPage] = useState(1);
+  const [installingSpecs, setInstallingSpecs] = useState<ReadonlySet<string>>(new Set());
   useEffect(() => {
     const timer = setTimeout(() => {
@@ -496,10 +497,7 @@ export function MarketplacePage() {
     return `${allItems.length} / ${total}`;
   }, [scope, installedQuery.isLoading, installedEntries.length, itemsQuery.data, allItems.length, total, copyKeys.installedCountSuffix]);
-  const installState: InstallState = {
-    isPending: installMutation.isPending,
-    installingSpec: installMutation.variables?.spec
-  };
+  const installState: InstallState = { installingSpecs };
   const manageState: ManageState = {
     isPending: manageMutation.isPending,
@@ -511,11 +509,42 @@ export function MarketplacePage() {
     { id: 'all', label: t(copyKeys.tabMarketplace) },
     { id: 'installed', label: t(copyKeys.tabInstalled), count: installedQuery.data?.total ?? 0 }
   ];
-  const handleInstall = (item: MarketplaceItemSummary) => {
-    if (installMutation.isPending) {
+  const handleInstall = async (item: MarketplaceItemSummary) => {
+    const installSpec = item.install.spec;
+    if (installingSpecs.has(installSpec)) {
       return;
     }
-    installMutation.mutate({ type: item.type, spec: item.install.spec, kind: item.install.kind });
+    setInstallingSpecs((prev) => {
+      const next = new Set(prev);
+      next.add(installSpec);
+      return next;
+    });
+    try {
+      await installMutation.mutateAsync({
+        type: item.type,
+        spec: installSpec,
+        kind: item.install.kind,
+        ...(item.type === 'skill'
+          ? {
+              skill: item.slug,
+              installPath: `skills/${item.slug}`
+            }
+          : {})
+      });
+    } catch {
+      // handled in mutation onError
+    } finally {
+      setInstallingSpecs((prev) => {
+        if (!prev.has(installSpec)) {
+          return prev;
+        }
+        const next = new Set(prev);
+        next.delete(installSpec);
+        return next;
+      });
+    }
   };
   const handleManage = async (action: MarketplaceManageAction, record: MarketplaceInstalledRecord) => {