npm - @nextclaw/ui - Versions diffs - 0.6.15 → 0.8.0 - Mend

@nextclaw/ui 0.6.15 → 0.8.0

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

package/CHANGELOG.md +26 -0
package/README.md +2 -0
package/dist/assets/ChannelsList-DBcoVJRW.js +1 -0
package/dist/assets/ChatPage-CD3cxyyM.js +37 -0
package/dist/assets/DocBrowser-DDX2HMXW.js +1 -0
package/dist/assets/{LogoBadge-Cer0jX6t.js → LogoBadge-J53F_3JA.js} +1 -1
package/dist/assets/MarketplacePage-0BZ4bza0.js +49 -0
package/dist/assets/ModelConfig-Wzq9wGHV.js +1 -0
package/dist/assets/ProvidersList-kwzRS8_M.js +1 -0
package/dist/assets/RuntimeConfig-N771_AM6.js +1 -0
package/dist/assets/SearchConfig-DVt5QVa_.js +1 -0
package/dist/assets/{SecretsConfig-BnGVZiv4.js → SecretsConfig-CkwauPa8.js} +2 -2
package/dist/assets/SessionsConfig-C3mnHzkZ.js +2 -0
package/dist/assets/{session-run-status-tZ4ISNj-.js → chat-message-pxr79GDs.js} +3 -3
package/dist/assets/index-BIvFMkN4.js +1 -0
package/dist/assets/index-CzkY1reu.js +8 -0
package/dist/assets/{index-CkqvHQAt.js → index-GdpEEKnz.js} +1 -1
package/dist/assets/index-RZ0kHHRI.css +1 -0
package/dist/assets/{label-DkL14Jvl.js → label-CmksBHgc.js} +1 -1
package/dist/assets/page-layout-Db0GbnhS.js +1 -0
package/dist/assets/security-config-CjLFME5Q.js +1 -0
package/dist/assets/skeleton-CkpQeVWN.js +1 -0
package/dist/assets/{switch-CgbPbIX3.js → switch-C24d-UJU.js} +1 -1
package/dist/assets/tabs-custom-D89bh-fc.js +1 -0
package/dist/assets/useConfirmDialog-BeP35LcG.js +5 -0
package/dist/assets/vendor-psXJBy9u.js +407 -0
package/dist/index.html +3 -3
package/package.json +12 -5
package/src/App.tsx +49 -27
package/src/api/client.ts +1 -0
package/src/api/config.ts +98 -0
package/src/api/types.ts +45 -0
package/src/components/auth/login-page.tsx +69 -0
package/src/components/chat/ChatConversationPanel.tsx +12 -54
package/src/components/chat/ChatPage.tsx +10 -324
package/src/components/chat/adapters/chat-input-bar.adapter.test.ts +80 -0
package/src/components/chat/adapters/chat-input-bar.adapter.ts +329 -0
package/src/components/chat/adapters/chat-message.adapter.test.ts +138 -0
package/src/components/chat/adapters/chat-message.adapter.ts +200 -0
package/src/components/chat/chat-chain.test.ts +22 -0
package/src/components/chat/chat-chain.ts +23 -0
package/src/components/chat/chat-input/chat-input-bar.controller.test.tsx +128 -0
package/src/components/chat/chat-input/chat-input-bar.controller.ts +105 -0
package/src/components/chat/chat-page-shell.tsx +103 -0
package/src/components/chat/containers/chat-input-bar.container.tsx +270 -0
package/src/components/chat/containers/chat-message-list.container.tsx +71 -0
package/src/components/chat/index.ts +1 -0
package/src/components/chat/legacy/LegacyChatPage.tsx +228 -0
package/src/components/chat/managers/chat-thread.manager.ts +3 -1
package/src/components/chat/ncp/NcpChatPage.tsx +349 -0
package/src/components/chat/ncp/ncp-chat-input.manager.ts +173 -0
package/src/components/chat/ncp/ncp-chat-page-data.ts +134 -0
package/src/components/chat/ncp/ncp-chat-thread.manager.ts +89 -0
package/src/components/chat/ncp/ncp-chat.presenter.ts +33 -0
package/src/components/chat/ncp/ncp-session-adapter.test.ts +49 -0
package/src/components/chat/ncp/ncp-session-adapter.ts +194 -0
package/src/components/chat/nextclaw/index.ts +23 -0
package/src/components/chat/presenter/chat-presenter-context.tsx +43 -4
package/src/components/config/runtime-security-card.tsx +276 -0
package/src/components/config/security-config.tsx +12 -0
package/src/components/layout/Sidebar.tsx +6 -1
package/src/components/marketplace/MarketplacePage.test.tsx +170 -0
package/src/components/marketplace/MarketplacePage.tsx +77 -28
package/src/hooks/use-auth.ts +111 -0
package/src/hooks/useConfig.ts +42 -0
package/src/hooks/useMarketplace.ts +9 -0
package/src/lib/i18n.ts +73 -1
package/src/test/setup.ts +16 -0
package/tailwind.config.js +8 -3
package/tsconfig.json +6 -2
package/vite.config.ts +2 -1
package/vitest.config.ts +16 -0
package/dist/assets/ChannelsList-DzeVn-JC.js +0 -1
package/dist/assets/ChatPage-BiFhIm1-.js +0 -36
package/dist/assets/DocBrowser-By3lF9yN.js +0 -1
package/dist/assets/MarketplacePage-EZxALdIz.js +0 -49
package/dist/assets/ModelConfig-AchYxLft.js +0 -1
package/dist/assets/ProvidersList-BsD-4kKX.js +0 -1
package/dist/assets/RuntimeConfig-sKOERbFD.js +0 -1
package/dist/assets/SearchConfig-DAfvDwX6.js +0 -1
package/dist/assets/SessionsConfig-CzvrKDRs.js +0 -2
package/dist/assets/card-BAM7vbMg.js +0 -1
package/dist/assets/index-D9rRqOi8.css +0 -1
package/dist/assets/index-DJZ5y7t1.js +0 -8
package/dist/assets/input-BoelTiYL.js +0 -1
package/dist/assets/page-layout-CERNdqzB.js +0 -1
package/dist/assets/popover-uwYz3Chm.js +0 -1
package/dist/assets/tabs-custom-pDyl95el.js +0 -1
package/dist/assets/useConfirmDialog-DyP6Ac75.js +0 -5
package/dist/assets/vendor-BKtTvQYU.js +0 -407
package/src/components/chat/ChatThread.tsx +0 -402
package/src/components/chat/SkillsPicker.tsx +0 -137
package/src/components/chat/chat-input/ChatInputBarView.tsx +0 -82
package/src/components/chat/chat-input/ChatInputBottomToolbar.tsx +0 -83
package/src/components/chat/chat-input/components/ChatInputModelStateHint.tsx +0 -39
package/src/components/chat/chat-input/components/ChatInputSelectedSkillsSection.tsx +0 -31
package/src/components/chat/chat-input/components/ChatInputSlashPanelSection.tsx +0 -112
package/src/components/chat/chat-input/components/bottom-toolbar/ChatInputAttachButton.tsx +0 -24
package/src/components/chat/chat-input/components/bottom-toolbar/ChatInputModelSelector.tsx +0 -58
package/src/components/chat/chat-input/components/bottom-toolbar/ChatInputSendControls.tsx +0 -56
package/src/components/chat/chat-input/components/bottom-toolbar/ChatInputSessionTypeSelector.tsx +0 -40
package/src/components/chat/chat-input/components/bottom-toolbar/ChatInputThinkingSelector.tsx +0 -74
package/src/components/chat/chat-input/useChatInputBarController.ts +0 -322

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-DJZ5y7t1.js"></script>
-  <link rel="modulepreload" crossorigin href="/assets/vendor-BKtTvQYU.js">
-  <link rel="stylesheet" crossorigin href="/assets/index-D9rRqOi8.css">
+  <script type="module" crossorigin src="/assets/index-CzkY1reu.js"></script>
+  <link rel="modulepreload" crossorigin href="/assets/vendor-psXJBy9u.js">
+  <link rel="stylesheet" crossorigin href="/assets/index-RZ0kHHRI.css">
 </head>
 <body>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@nextclaw/ui",
-  "version": "0.6.15",
+  "version": "0.8.0",
   "private": false,
   "type": "module",
   "license": "MIT",
@@ -20,34 +20,41 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.53.2",
-    "react-markdown": "^10.1.0",
     "react-router-dom": "^7.13.0",
     "rehype-sanitize": "^6.0.0",
-    "remark-gfm": "^4.0.1",
     "rxjs": "^7.8.2",
     "sonner": "^1.7.1",
     "tailwind-merge": "^2.5.4",
     "zod": "^3.23.8",
     "zustand": "^5.0.2",
+    "@nextclaw/ncp-http-agent-client": "0.3.0",
+    "@nextclaw/ncp-react": "0.3.0",
+    "@nextclaw/agent-chat-ui": "0.2.0",
+    "@nextclaw/ncp": "0.3.0",
     "@nextclaw/agent-chat": "0.1.1"
   },
   "devDependencies": {
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react": "^4.3.4",
     "autoprefixer": "^10.4.20",
+    "jsdom": "^25.0.1",
     "postcss": "^8.4.49",
     "prettier": "^3.3.3",
     "tailwindcss": "^3.4.15",
     "tailwindcss-animate": "^1.0.7",
     "typescript": "^5.6.3",
-    "vite": "^6.0.1"
+    "vite": "^6.0.1",
+    "vitest": "^2.1.2"
   },
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
     "preview": "vite preview",
     "lint": "eslint .",
-    "tsc": "tsc --noEmit"
+    "tsc": "tsc --noEmit",
+    "test": "vitest run"
   }
 }

package/src/App.tsx CHANGED Viewed

@@ -1,6 +1,8 @@
 import { lazy, Suspense } from 'react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { LoginPage } from '@/components/auth/login-page';
 import { AppLayout } from '@/components/layout/AppLayout';
+import { useAuthStatus } from '@/hooks/use-auth';
 import { useWebSocket } from '@/hooks/useWebSocket';
 import { Toaster } from 'sonner';
 import { Routes, Route, Navigate } from 'react-router-dom';
@@ -20,6 +22,7 @@ const SearchConfigPage = lazy(async () => ({ default: (await import('@/component
 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 }));
+const SecurityConfigPage = lazy(async () => ({ default: (await import('@/components/config/security-config')).SecurityConfig }));
 const SessionsConfigPage = lazy(async () => ({ default: (await import('@/components/config/SessionsConfig')).SessionsConfig }));
 const SecretsConfigPage = lazy(async () => ({ default: (await import('@/components/config/SecretsConfig')).SecretsConfig }));
 const MarketplacePage = lazy(async () => ({ default: (await import('@/components/marketplace/MarketplacePage')).MarketplacePage }));
@@ -32,38 +35,57 @@ function LazyRoute({ children }: { children: JSX.Element }) {
   return <Suspense fallback={<RouteFallback />}>{children}</Suspense>;
 }
-function AppContent() {
+function ProtectedApp() {
   useWebSocket(queryClient); // Initialize WebSocket connection
+  return (
+    <AppLayout>
+      <div className="w-full h-full">
+        <Routes>
+          <Route path="/chat/skills" element={<Navigate to="/skills" replace />} />
+          <Route path="/chat/cron" element={<Navigate to="/cron" replace />} />
+          <Route path="/chat/:sessionId?" element={<LazyRoute><ChatPage view="chat" /></LazyRoute>} />
+          <Route path="/skills" element={<LazyRoute><ChatPage view="skills" /></LazyRoute>} />
+          <Route path="/cron" element={<LazyRoute><ChatPage view="cron" /></LazyRoute>} />
+          <Route path="/model" element={<LazyRoute><ModelConfigPage /></LazyRoute>} />
+          <Route path="/search" element={<LazyRoute><SearchConfigPage /></LazyRoute>} />
+          <Route path="/providers" element={<LazyRoute><ProvidersListPage /></LazyRoute>} />
+          <Route path="/channels" element={<LazyRoute><ChannelsListPage /></LazyRoute>} />
+          <Route path="/runtime" element={<LazyRoute><RuntimeConfigPage /></LazyRoute>} />
+          <Route path="/security" element={<LazyRoute><SecurityConfigPage /></LazyRoute>} />
+          <Route path="/sessions" element={<LazyRoute><SessionsConfigPage /></LazyRoute>} />
+          <Route path="/secrets" element={<LazyRoute><SecretsConfigPage /></LazyRoute>} />
+          <Route path="/settings" element={<Navigate to="/model" replace />} />
+          <Route path="/marketplace/skills" element={<Navigate to="/skills" replace />} />
+          <Route path="/marketplace" element={<Navigate to="/marketplace/plugins" replace />} />
+          <Route path="/marketplace/:type" element={<LazyRoute><MarketplacePage /></LazyRoute>} />
+          <Route path="/" element={<Navigate to="/chat" replace />} />
+          <Route path="*" element={<Navigate to="/chat" replace />} />
+        </Routes>
+      </div>
+    </AppLayout>
+  );
+}
+function AuthGate() {
+  const authStatus = useAuthStatus();
+  if (authStatus.isLoading && !authStatus.isError) {
+    return <RouteFallback />;
+  }
+  if (authStatus.data?.enabled && !authStatus.data.authenticated) {
+    return <LoginPage username={authStatus.data.username} />;
+  }
+  return <ProtectedApp />;
+}
+export default function AppContent() {
   return (
     <QueryClientProvider client={queryClient}>
-      <AppLayout>
-        <div className="w-full h-full">
-          <Routes>
-            <Route path="/chat/skills" element={<Navigate to="/skills" replace />} />
-            <Route path="/chat/cron" element={<Navigate to="/cron" replace />} />
-            <Route path="/chat/:sessionId?" element={<LazyRoute><ChatPage view="chat" /></LazyRoute>} />
-            <Route path="/skills" element={<LazyRoute><ChatPage view="skills" /></LazyRoute>} />
-            <Route path="/cron" element={<LazyRoute><ChatPage view="cron" /></LazyRoute>} />
-            <Route path="/model" element={<LazyRoute><ModelConfigPage /></LazyRoute>} />
-            <Route path="/search" element={<LazyRoute><SearchConfigPage /></LazyRoute>} />
-            <Route path="/providers" element={<LazyRoute><ProvidersListPage /></LazyRoute>} />
-            <Route path="/channels" element={<LazyRoute><ChannelsListPage /></LazyRoute>} />
-            <Route path="/runtime" element={<LazyRoute><RuntimeConfigPage /></LazyRoute>} />
-            <Route path="/sessions" element={<LazyRoute><SessionsConfigPage /></LazyRoute>} />
-            <Route path="/secrets" element={<LazyRoute><SecretsConfigPage /></LazyRoute>} />
-            <Route path="/settings" element={<Navigate to="/model" replace />} />
-            <Route path="/marketplace/skills" element={<Navigate to="/skills" replace />} />
-            <Route path="/marketplace" element={<Navigate to="/marketplace/plugins" replace />} />
-            <Route path="/marketplace/:type" element={<LazyRoute><MarketplacePage /></LazyRoute>} />
-            <Route path="/" element={<Navigate to="/chat" replace />} />
-            <Route path="*" element={<Navigate to="/chat" replace />} />
-          </Routes>
-        </div>
-      </AppLayout>
+      <AuthGate />
       <Toaster position="top-right" richColors />
     </QueryClientProvider>
   );
 }
-export default AppContent;

package/src/api/client.ts CHANGED Viewed

@@ -50,6 +50,7 @@ async function apiRequest<T>(
   const method = (options.method || 'GET').toUpperCase();
   const response = await fetch(url, {
+    credentials: 'include',
     headers: {
       'Content-Type': 'application/json',
       ...options.headers

package/src/api/config.ts CHANGED Viewed

@@ -1,5 +1,10 @@
 import { api, API_BASE } from './client';
 import type {
+  AuthEnabledUpdateRequest,
+  AuthLoginRequest,
+  AuthPasswordUpdateRequest,
+  AuthSetupRequest,
+  AuthStatusView,
   AppMetaView,
   ConfigView,
   ConfigMetaView,
@@ -19,6 +24,8 @@ import type {
   ProviderCreateRequest,
   ProviderCreateResult,
   ProviderDeleteResult,
+  NcpSessionMessagesView,
+  NcpSessionsListView,
   RuntimeConfigUpdate,
   SecretsConfigUpdate,
   SecretsView,
@@ -46,6 +53,60 @@ import type {
   CronActionResult
 } from './types';
+// GET /api/auth/status
+export async function fetchAuthStatus(): Promise<AuthStatusView> {
+  const response = await api.get<AuthStatusView>('/api/auth/status');
+  if (!response.ok) {
+    throw new Error(response.error.message);
+  }
+  return response.data;
+}
+// POST /api/auth/setup
+export async function setupAuth(data: AuthSetupRequest): Promise<AuthStatusView> {
+  const response = await api.post<AuthStatusView>('/api/auth/setup', data);
+  if (!response.ok) {
+    throw new Error(response.error.message);
+  }
+  return response.data;
+}
+// POST /api/auth/login
+export async function loginAuth(data: AuthLoginRequest): Promise<AuthStatusView> {
+  const response = await api.post<AuthStatusView>('/api/auth/login', data);
+  if (!response.ok) {
+    throw new Error(response.error.message);
+  }
+  return response.data;
+}
+// POST /api/auth/logout
+export async function logoutAuth(): Promise<{ success: boolean }> {
+  const response = await api.post<{ success: boolean }>('/api/auth/logout', {});
+  if (!response.ok) {
+    throw new Error(response.error.message);
+  }
+  return response.data;
+}
+// PUT /api/auth/password
+export async function updateAuthPassword(data: AuthPasswordUpdateRequest): Promise<AuthStatusView> {
+  const response = await api.put<AuthStatusView>('/api/auth/password', data);
+  if (!response.ok) {
+    throw new Error(response.error.message);
+  }
+  return response.data;
+}
+// PUT /api/auth/enabled
+export async function updateAuthEnabled(data: AuthEnabledUpdateRequest): Promise<AuthStatusView> {
+  const response = await api.put<AuthStatusView>('/api/auth/enabled', data);
+  if (!response.ok) {
+    throw new Error(response.error.message);
+  }
+  return response.data;
+}
 // GET /api/app/meta
 export async function fetchAppMeta(): Promise<AppMetaView> {
   const response = await api.get<AppMetaView>('/api/app/meta');
@@ -310,6 +371,42 @@ export async function deleteSession(key: string): Promise<{ deleted: boolean }>
   return response.data;
 }
+// GET /api/ncp/sessions
+export async function fetchNcpSessions(params?: { limit?: number }): Promise<NcpSessionsListView> {
+  const query = new URLSearchParams();
+  if (typeof params?.limit === 'number' && Number.isFinite(params.limit)) {
+    query.set('limit', String(Math.max(1, Math.trunc(params.limit))));
+  }
+  const suffix = query.toString();
+  const response = await api.get<NcpSessionsListView>(suffix ? `/api/ncp/sessions?${suffix}` : '/api/ncp/sessions');
+  if (!response.ok) {
+    throw new Error(response.error.message);
+  }
+  return response.data;
+}
+// GET /api/ncp/sessions/:sessionId/messages
+export async function fetchNcpSessionMessages(sessionId: string, limit = 200): Promise<NcpSessionMessagesView> {
+  const response = await api.get<NcpSessionMessagesView>(
+    `/api/ncp/sessions/${encodeURIComponent(sessionId)}/messages?limit=${Math.max(1, Math.trunc(limit))}`
+  );
+  if (!response.ok) {
+    throw new Error(response.error.message);
+  }
+  return response.data;
+}
+// DELETE /api/ncp/sessions/:sessionId
+export async function deleteNcpSession(sessionId: string): Promise<{ deleted: boolean; sessionId: string }> {
+  const response = await api.delete<{ deleted: boolean; sessionId: string }>(
+    `/api/ncp/sessions/${encodeURIComponent(sessionId)}`
+  );
+  if (!response.ok) {
+    throw new Error(response.error.message);
+  }
+  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);
@@ -356,6 +453,7 @@ async function readSseStream(params: {
 }): Promise<{ sessionKey: string; reply: string }> {
   const response = await fetch(`${API_BASE}${params.path}`, {
     method: params.method,
+    credentials: 'include',
     headers: {
       'Content-Type': 'application/json',
       Accept: 'text/event-stream'

package/src/api/types.ts CHANGED Viewed

@@ -1,3 +1,5 @@
+import type { NcpMessage, NcpSessionStatus, NcpSessionSummary } from '@nextclaw/ncp';
 // API Types - matching backend response format
 export type ApiError = {
   code: string;
@@ -158,6 +160,31 @@ export type ProviderAuthImportResult = {
   expiresAt?: string;
 };
+export type AuthStatusView = {
+  enabled: boolean;
+  configured: boolean;
+  authenticated: boolean;
+  username?: string;
+};
+export type AuthSetupRequest = {
+  username: string;
+  password: string;
+};
+export type AuthLoginRequest = {
+  username: string;
+  password: string;
+};
+export type AuthPasswordUpdateRequest = {
+  password: string;
+};
+export type AuthEnabledUpdateRequest = {
+  enabled: boolean;
+};
 export type AgentProfileView = {
   id: string;
   default?: boolean;
@@ -236,6 +263,23 @@ export type SessionHistoryView = {
   events: SessionEventView[];
 };
+export type NcpSessionSummaryView = NcpSessionSummary;
+export type NcpSessionsListView = {
+  sessions: NcpSessionSummaryView[];
+  total: number;
+};
+export type NcpMessageView = NcpMessage;
+export type NcpSessionMessagesView = {
+  sessionId: string;
+  messages: NcpMessageView[];
+  total: number;
+};
+export type NcpSessionStatusView = NcpSessionStatus;
 export type SessionPatchUpdate = {
   label?: string | null;
   preferredModel?: string | null;
@@ -501,6 +545,7 @@ export type ConfigView = {
   session?: SessionConfigView;
   tools?: Record<string, unknown>;
   gateway?: Record<string, unknown>;
+  ui?: Record<string, unknown>;
   secrets?: SecretsView;
 };

package/src/components/auth/login-page.tsx ADDED Viewed

@@ -0,0 +1,69 @@
+import { useState, type FormEvent } from 'react';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { useLoginAuth } from '@/hooks/use-auth';
+import { t } from '@/lib/i18n';
+type LoginPageProps = {
+  username?: string;
+};
+export function LoginPage({ username }: LoginPageProps) {
+  const loginMutation = useLoginAuth();
+  const [formUsername, setFormUsername] = useState(username ?? '');
+  const [password, setPassword] = useState('');
+  const canSubmit = formUsername.trim().length > 0 && password.length > 0 && !loginMutation.isPending;
+  const handleSubmit = (event?: FormEvent<HTMLFormElement>) => {
+    event?.preventDefault();
+    if (!canSubmit) {
+      return;
+    }
+    loginMutation.mutate({
+      username: formUsername.trim(),
+      password
+    });
+  };
+  return (
+    <main className="flex min-h-screen items-center justify-center bg-secondary px-6 py-10">
+      <Card hover={false} className="w-full max-w-md shadow-card-hover">
+        <CardHeader>
+          <p className="text-xs font-semibold uppercase tracking-[0.24em] text-gray-500">{t('authBrand')}</p>
+          <CardTitle className="text-2xl">{t('authLoginTitle')}</CardTitle>
+          <CardDescription>{t('authLoginDescription')}</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form className="space-y-4" onSubmit={handleSubmit}>
+          <div className="space-y-2">
+            <label className="text-sm font-medium text-gray-800">{t('authUsername')}</label>
+            <Input
+              value={formUsername}
+              onChange={(event) => setFormUsername(event.target.value)}
+              placeholder={t('authUsernamePlaceholder')}
+              autoFocus
+            />
+          </div>
+          <div className="space-y-2">
+            <label className="text-sm font-medium text-gray-800">{t('authPassword')}</label>
+            <Input
+              type="password"
+              value={password}
+              onChange={(event) => setPassword(event.target.value)}
+              placeholder={t('authPasswordPlaceholder')}
+            />
+          </div>
+          <Button
+            type="submit"
+            className="w-full"
+            disabled={!canSubmit}
+          >
+            {loginMutation.isPending ? t('authLoggingIn') : t('authLoginAction')}
+          </Button>
+          </form>
+        </CardContent>
+      </Card>
+    </main>
+  );
+}

package/src/components/chat/ChatConversationPanel.tsx CHANGED Viewed

@@ -1,16 +1,14 @@
-import { useCallback, useEffect, useLayoutEffect, useRef } from 'react';
+import { useRef } from 'react';
+import { useStickyBottomScroll } from '@nextclaw/agent-chat-ui';
 import { Button } from '@/components/ui/button';
-import { ChatThread } from '@/components/chat/ChatThread';
+import { ChatInputBarContainer, ChatMessageListContainer } from '@/components/chat/nextclaw';
 import { ChatWelcome } from '@/components/chat/ChatWelcome';
-import { ChatInputBarView } from '@/components/chat/chat-input/ChatInputBarView';
 import { usePresenter } from '@/components/chat/presenter/chat-presenter-context';
 import { useChatThreadStore } from '@/components/chat/stores/chat-thread.store';
 import { t } from '@/lib/i18n';
 import { cn } from '@/lib/utils';
 import { Trash2 } from 'lucide-react';
-const STICKY_BOTTOM_THRESHOLD_PX = 10;
 function ChatConversationSkeleton() {
   return (
     <section className="flex-1 min-h-0 flex flex-col overflow-hidden bg-gradient-to-b from-gray-50/60 to-white">
@@ -45,12 +43,6 @@ export function ChatConversationPanel() {
   const fallbackThreadRef = useRef<HTMLDivElement | null>(null);
   const threadRef = snapshot.threadRef ?? fallbackThreadRef;
-  // --- Sticky-to-bottom scroll state ---
-  const isStickyRef = useRef(true);
-  const isProgrammaticScrollRef = useRef(false);
-  const previousSessionKeyRef = useRef<string | null>(null);
-  const pendingInitialScrollRef = useRef(false);
   const showWelcome = !snapshot.selectedSessionKey && snapshot.uiMessages.length === 0 && !snapshot.isSending;
   const hasConfiguredModel = snapshot.modelOptions.length > 0;
   const shouldShowProviderHint = snapshot.isProviderStateResolved && !hasConfiguredModel;
@@ -60,47 +52,13 @@ export function ChatConversationPanel() {
     !snapshot.isSending &&
     !snapshot.isAwaitingAssistantOutput;
-  const scrollToBottom = useCallback(() => {
-    const el = threadRef.current;
-    if (!el) return;
-    isProgrammaticScrollRef.current = true;
-    el.scrollTop = el.scrollHeight;
-  }, [threadRef]);
-  const handleScroll = useCallback(() => {
-    // Skip sticky check for programmatic scrolls
-    if (isProgrammaticScrollRef.current) {
-      isProgrammaticScrollRef.current = false;
-      return;
-    }
-    const el = threadRef.current;
-    if (!el) return;
-    const distanceFromBottom = el.scrollHeight - el.scrollTop - el.clientHeight;
-    isStickyRef.current = distanceFromBottom <= STICKY_BOTTOM_THRESHOLD_PX;
-  }, [threadRef]);
-  // Session change → force sticky + schedule initial scroll
-  useEffect(() => {
-    if (previousSessionKeyRef.current === snapshot.selectedSessionKey) return;
-    previousSessionKeyRef.current = snapshot.selectedSessionKey;
-    isStickyRef.current = true;
-    pendingInitialScrollRef.current = true;
-  }, [snapshot.selectedSessionKey]);
-  // Initial scroll after history loads for a new session
-  useLayoutEffect(() => {
-    if (!pendingInitialScrollRef.current) return;
-    if (snapshot.isHistoryLoading || snapshot.uiMessages.length === 0) return;
-    pendingInitialScrollRef.current = false;
-    scrollToBottom();
-  }, [scrollToBottom, snapshot.isHistoryLoading, snapshot.uiMessages]);
-  // Streaming updates: keep bottom visible while still sticky.
-  useLayoutEffect(() => {
-    if (!isStickyRef.current) return;
-    if (snapshot.uiMessages.length === 0) return;
-    scrollToBottom();
-  }, [scrollToBottom, snapshot.uiMessages]);
+  const { onScroll: handleScroll } = useStickyBottomScroll({
+    scrollRef: threadRef,
+    resetKey: snapshot.selectedSessionKey,
+    isLoading: snapshot.isHistoryLoading,
+    hasContent: snapshot.uiMessages.length > 0,
+    contentVersion: snapshot.uiMessages
+  });
   if (!snapshot.isProviderStateResolved) {
     return <ChatConversationSkeleton />;
@@ -160,12 +118,12 @@ export function ChatConversationPanel() {
           <div className="px-5 py-5 text-sm text-gray-500">{t('chatNoMessages')}</div>
         ) : (
           <div className="mx-auto w-full max-w-[min(1120px,100%)] px-6 py-5">
-            <ChatThread uiMessages={snapshot.uiMessages} isSending={snapshot.isSending && snapshot.isAwaitingAssistantOutput} />
+            <ChatMessageListContainer uiMessages={snapshot.uiMessages} isSending={snapshot.isSending && snapshot.isAwaitingAssistantOutput} />
           </div>
         )}
       </div>
-      <ChatInputBarView />
+      <ChatInputBarContainer />
     </section>
   );
 }