npm - @nextclaw/ui - Versions diffs - 0.5.5 → 0.5.6 - Mend

@nextclaw/ui 0.5.5 → 0.5.6

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

package/CHANGELOG.md +7 -0
package/dist/assets/index-B3foa-xK.css +1 -0
package/dist/assets/index-CsMwBztg.js +347 -0
package/dist/index.html +2 -2
package/package.json +1 -1
package/src/App.tsx +2 -0
package/src/api/config.ts +46 -1
package/src/api/types.ts +50 -0
package/src/components/config/CronConfig.tsx +292 -0
package/src/components/layout/Sidebar.tsx +6 -1
package/src/hooks/useConfig.ts +58 -1
package/src/lib/i18n.ts +27 -0
package/dist/assets/index-BKd1WzmD.js +0 -332
package/dist/assets/index-D3I3sUSu.css +0 -1

package/dist/index.html CHANGED Viewed

@@ -6,8 +6,8 @@
   <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-BKd1WzmD.js"></script>
-  <link rel="stylesheet" crossorigin href="/assets/index-D3I3sUSu.css">
+  <script type="module" crossorigin src="/assets/index-CsMwBztg.js"></script>
+  <link rel="stylesheet" crossorigin href="/assets/index-B3foa-xK.css">
 </head>
 <body>

package/package.json CHANGED Viewed

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

package/src/App.tsx CHANGED Viewed

@@ -5,6 +5,7 @@ import { ProvidersList } from '@/components/config/ProvidersList';
 import { ChannelsList } from '@/components/config/ChannelsList';
 import { RuntimeConfig } from '@/components/config/RuntimeConfig';
 import { SessionsConfig } from '@/components/config/SessionsConfig';
+import { CronConfig } from '@/components/config/CronConfig';
 import { MarketplacePage } from '@/components/marketplace/MarketplacePage';
 import { useWebSocket } from '@/hooks/useWebSocket';
 import { Toaster } from 'sonner';
@@ -33,6 +34,7 @@ function AppContent() {
             <Route path="/channels" element={<ChannelsList />} />
             <Route path="/runtime" element={<RuntimeConfig />} />
             <Route path="/sessions" element={<SessionsConfig />} />
+            <Route path="/cron" element={<CronConfig />} />
             <Route path="/marketplace" element={<MarketplacePage />} />
             <Route path="/" element={<Navigate to="/model" replace />} />
             <Route path="*" element={<Navigate to="/model" replace />} />

package/src/api/config.ts CHANGED Viewed

@@ -11,7 +11,11 @@ import type {
   ConfigActionExecuteResult,
   SessionsListView,
   SessionHistoryView,
-  SessionPatchUpdate
+  SessionPatchUpdate,
+  CronListView,
+  CronEnableRequest,
+  CronRunRequest,
+  CronActionResult
 } from './types';
 // GET /api/config
@@ -162,3 +166,44 @@ export async function deleteSession(key: string): Promise<{ deleted: boolean }>
   }
   return response.data;
 }
+// GET /api/cron
+export async function fetchCronJobs(params?: { all?: boolean }): Promise<CronListView> {
+  const query = new URLSearchParams();
+  if (params?.all) {
+    query.set('all', '1');
+  }
+  const suffix = query.toString();
+  const response = await api.get<CronListView>(suffix ? '/api/cron?' + suffix : '/api/cron');
+  if (!response.ok) {
+    throw new Error(response.error.message);
+  }
+  return response.data;
+}
+// DELETE /api/cron/:id
+export async function deleteCronJob(id: string): Promise<{ deleted: boolean }> {
+  const response = await api.delete<{ deleted: boolean }>(`/api/cron/${encodeURIComponent(id)}`);
+  if (!response.ok) {
+    throw new Error(response.error.message);
+  }
+  return response.data;
+}
+// PUT /api/cron/:id/enable
+export async function setCronJobEnabled(id: string, data: CronEnableRequest): Promise<CronActionResult> {
+  const response = await api.put<CronActionResult>(`/api/cron/${encodeURIComponent(id)}/enable`, data);
+  if (!response.ok) {
+    throw new Error(response.error.message);
+  }
+  return response.data;
+}
+// POST /api/cron/:id/run
+export async function runCronJob(id: string, data: CronRunRequest): Promise<CronActionResult> {
+  const response = await api.post<CronActionResult>(`/api/cron/${encodeURIComponent(id)}/run`, data);
+  if (!response.ok) {
+    throw new Error(response.error.message);
+  }
+  return response.data;
+}

package/src/api/types.ts CHANGED Viewed

@@ -92,6 +92,56 @@ export type SessionPatchUpdate = {
   clearHistory?: boolean;
 };
+export type CronScheduleView =
+  | { kind: "at"; atMs?: number | null }
+  | { kind: "every"; everyMs?: number | null }
+  | { kind: "cron"; expr?: string | null; tz?: string | null };
+export type CronPayloadView = {
+  kind?: "system_event" | "agent_turn";
+  message: string;
+  deliver?: boolean;
+  channel?: string | null;
+  to?: string | null;
+};
+export type CronJobStateView = {
+  nextRunAt?: string | null;
+  lastRunAt?: string | null;
+  lastStatus?: "ok" | "error" | "skipped" | null;
+  lastError?: string | null;
+};
+export type CronJobView = {
+  id: string;
+  name: string;
+  enabled: boolean;
+  schedule: CronScheduleView;
+  payload: CronPayloadView;
+  state: CronJobStateView;
+  createdAt: string;
+  updatedAt: string;
+  deleteAfterRun: boolean;
+};
+export type CronListView = {
+  jobs: CronJobView[];
+  total: number;
+};
+export type CronEnableRequest = {
+  enabled: boolean;
+};
+export type CronRunRequest = {
+  force?: boolean;
+};
+export type CronActionResult = {
+  job: CronJobView | null;
+  executed?: boolean;
+};
 export type RuntimeConfigUpdate = {
   agents?: {
     defaults?: {

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

@@ -0,0 +1,292 @@
+import { useMemo, useState } from 'react';
+import type { CronJobView } from '@/api/types';
+import { useConfirmDialog } from '@/hooks/useConfirmDialog';
+import { useCronJobs, useDeleteCronJob, useToggleCronJob, useRunCronJob } from '@/hooks/useConfig';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Card, CardContent } from '@/components/ui/card';
+import { cn } from '@/lib/utils';
+import { t } from '@/lib/i18n';
+import { AlarmClock, RefreshCw, Trash2, Play, Power } from 'lucide-react';
+type StatusFilter = 'all' | 'enabled' | 'disabled';
+function formatDate(value?: string | null): string {
+  if (!value) {
+    return '-';
+  }
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) {
+    return value;
+  }
+  return date.toLocaleString();
+}
+function formatDateFromMs(value?: number | null): string {
+  if (typeof value !== 'number' || !Number.isFinite(value)) {
+    return '-';
+  }
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) {
+    return '-';
+  }
+  return date.toLocaleString();
+}
+function formatEveryDuration(ms?: number | null): string {
+  if (typeof ms !== 'number' || !Number.isFinite(ms)) {
+    return '-';
+  }
+  const seconds = Math.round(ms / 1000);
+  if (seconds < 60) return `${seconds}s`;
+  const minutes = Math.round(seconds / 60);
+  if (minutes < 60) return `${minutes}m`;
+  const hours = Math.round(minutes / 60);
+  if (hours < 24) return `${hours}h`;
+  const days = Math.round(hours / 24);
+  return `${days}d`;
+}
+function describeSchedule(job: CronJobView): string {
+  const schedule = job.schedule;
+  if (schedule.kind === 'cron') {
+    return schedule.expr ? `cron ${schedule.expr}` : 'cron';
+  }
+  if (schedule.kind === 'every') {
+    return `every ${formatEveryDuration(schedule.everyMs)}`;
+  }
+  if (schedule.kind === 'at') {
+    return `at ${formatDateFromMs(schedule.atMs)}`;
+  }
+  return '-';
+}
+function describeDelivery(job: CronJobView): string {
+  if (!job.payload.deliver) {
+    return '-';
+  }
+  const channel = job.payload.channel ?? '-';
+  const target = job.payload.to ?? '-';
+  return `${channel}:${target}`;
+}
+function matchQuery(job: CronJobView, query: string): boolean {
+  const q = query.trim().toLowerCase();
+  if (!q) return true;
+  const haystack = [
+    job.id,
+    job.name,
+    job.payload.message,
+    job.payload.channel ?? '',
+    job.payload.to ?? ''
+  ].join(' ').toLowerCase();
+  return haystack.includes(q);
+}
+function filterByStatus(job: CronJobView, status: StatusFilter): boolean {
+  if (status === 'all') return true;
+  if (status === 'enabled') return job.enabled;
+  return !job.enabled;
+}
+export function CronConfig() {
+  const [query, setQuery] = useState('');
+  const [status, setStatus] = useState<StatusFilter>('all');
+  const cronQuery = useCronJobs({ all: true });
+  const deleteCronJob = useDeleteCronJob();
+  const toggleCronJob = useToggleCronJob();
+  const runCronJob = useRunCronJob();
+  const { confirm, ConfirmDialog } = useConfirmDialog();
+  const jobs = useMemo(() => {
+    const data = cronQuery.data?.jobs ?? [];
+    return data
+      .filter((job) => matchQuery(job, query))
+      .filter((job) => filterByStatus(job, status));
+  }, [cronQuery.data, query, status]);
+  const handleDelete = async (job: CronJobView) => {
+    const confirmed = await confirm({
+      title: `${t('cronDeleteConfirm')}?`,
+      description: job.name ? `${job.name} (${job.id})` : job.id,
+      variant: 'destructive',
+      confirmLabel: t('delete')
+    });
+    if (!confirmed) return;
+    deleteCronJob.mutate({ id: job.id });
+  };
+  const handleToggle = async (job: CronJobView) => {
+    const nextEnabled = !job.enabled;
+    const confirmed = await confirm({
+      title: nextEnabled ? `${t('cronEnableConfirm')}?` : `${t('cronDisableConfirm')}?`,
+      description: job.name ? `${job.name} (${job.id})` : job.id,
+      variant: nextEnabled ? 'default' : 'destructive',
+      confirmLabel: nextEnabled ? t('cronEnable') : t('cronDisable')
+    });
+    if (!confirmed) return;
+    toggleCronJob.mutate({ id: job.id, enabled: nextEnabled });
+  };
+  const handleRun = async (job: CronJobView) => {
+    const force = !job.enabled;
+    const confirmed = await confirm({
+      title: force ? `${t('cronRunForceConfirm')}?` : `${t('cronRunConfirm')}?`,
+      description: job.name ? `${job.name} (${job.id})` : job.id,
+      confirmLabel: t('cronRunNow')
+    });
+    if (!confirmed) return;
+    runCronJob.mutate({ id: job.id, force });
+  };
+  return (
+    <div className="h-[calc(100vh-80px)] w-full max-w-[1200px] mx-auto animate-fade-in flex flex-col pt-6 pb-2">
+      <div className="flex items-center justify-between mb-6 shrink-0">
+        <div>
+          <h2 className="text-2xl font-bold text-gray-900 tracking-tight">{t('cronPageTitle')}</h2>
+          <p className="text-sm text-gray-500 mt-1">{t('cronPageDescription')}</p>
+        </div>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="h-9 w-9 rounded-lg text-gray-400 hover:text-gray-700 hover:bg-gray-100"
+          onClick={() => cronQuery.refetch()}
+        >
+          <RefreshCw className={cn('h-4 w-4', cronQuery.isFetching && 'animate-spin')} />
+        </Button>
+      </div>
+      <Card hover={false} className="mb-6">
+        <CardContent className="pt-6">
+          <div className="flex flex-wrap gap-3 items-center">
+            <div className="relative flex-1 min-w-[240px]">
+              <Input
+                value={query}
+                onChange={(e) => setQuery(e.target.value)}
+                placeholder={t('cronSearchPlaceholder')}
+                className="pl-9"
+              />
+              <AlarmClock className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" />
+            </div>
+            <div className="min-w-[180px]">
+              <Select value={status} onValueChange={(value) => setStatus(value as StatusFilter)}>
+                <SelectTrigger className="w-full">
+                  <SelectValue placeholder={t('cronStatusLabel')} />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all">{t('cronStatusAll')}</SelectItem>
+                  <SelectItem value="enabled">{t('cronStatusEnabled')}</SelectItem>
+                  <SelectItem value="disabled">{t('cronStatusDisabled')}</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="text-xs text-gray-500 ml-auto">
+              {t('cronTotalLabel')}: {cronQuery.data?.total ?? 0} / {jobs.length}
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+      <div className="flex-1 overflow-auto custom-scrollbar">
+        {cronQuery.isLoading ? (
+          <div className="text-sm text-gray-400 p-4 text-center">{t('cronLoading')}</div>
+        ) : jobs.length === 0 ? (
+          <div className="text-sm text-gray-400 p-4 text-center">{t('cronEmpty')}</div>
+        ) : (
+          <div className="space-y-4">
+            {jobs.map((job) => (
+              <Card key={job.id} className="border border-gray-200">
+                <CardContent className="pt-5 pb-5">
+                  <div className="flex flex-wrap items-start justify-between gap-4">
+                    <div className="min-w-[220px] flex-1">
+                      <div className="flex flex-wrap items-center gap-2">
+                        <span className="text-sm font-semibold text-gray-900">
+                          {job.name || job.id}
+                        </span>
+                        <span className="text-[10px] font-semibold px-2 py-0.5 rounded-full bg-gray-100 text-gray-500">
+                          {job.id}
+                        </span>
+                        <span
+                          className={cn(
+                            'text-[10px] font-semibold px-2 py-0.5 rounded-full',
+                            job.enabled ? 'bg-emerald-50 text-emerald-700' : 'bg-gray-100 text-gray-500'
+                          )}
+                        >
+                          {job.enabled ? t('enabled') : t('disabled')}
+                        </span>
+                        {job.deleteAfterRun && (
+                          <span className="text-[10px] font-semibold px-2 py-0.5 rounded-full bg-amber-50 text-amber-700">
+                            {t('cronOneShot')}
+                          </span>
+                        )}
+                      </div>
+                      <div className="mt-2 text-xs text-gray-500">
+                        {t('cronScheduleLabel')}: {describeSchedule(job)}
+                      </div>
+                      <div className="mt-2 text-sm text-gray-700 whitespace-pre-wrap break-words">
+                        {job.payload.message}
+                      </div>
+                      <div className="mt-2 text-xs text-gray-500">
+                        {t('cronDeliverTo')}: {describeDelivery(job)}
+                      </div>
+                    </div>
+                    <div className="min-w-[220px] text-xs text-gray-500 space-y-2">
+                      <div>
+                        <span className="font-medium text-gray-700">{t('cronNextRun')}:</span>{' '}
+                        {formatDate(job.state.nextRunAt)}
+                      </div>
+                      <div>
+                        <span className="font-medium text-gray-700">{t('cronLastRun')}:</span>{' '}
+                        {formatDate(job.state.lastRunAt)}
+                      </div>
+                      <div>
+                        <span className="font-medium text-gray-700">{t('cronLastStatus')}:</span>{' '}
+                        {job.state.lastStatus ?? '-'}
+                      </div>
+                      {job.state.lastError && (
+                        <div className="text-[11px] text-red-500 break-words">
+                          {job.state.lastError}
+                        </div>
+                      )}
+                    </div>
+                    <div className="flex items-start gap-2 flex-wrap justify-end">
+                      <Button
+                        variant="subtle"
+                        size="sm"
+                        onClick={() => handleRun(job)}
+                        className="gap-1"
+                      >
+                        <Play className="h-3.5 w-3.5" />
+                        {t('cronRunNow')}
+                      </Button>
+                      <Button
+                        variant={job.enabled ? 'outline' : 'primary'}
+                        size="sm"
+                        onClick={() => handleToggle(job)}
+                        className="gap-1"
+                      >
+                        <Power className="h-3.5 w-3.5" />
+                        {job.enabled ? t('cronDisable') : t('cronEnable')}
+                      </Button>
+                      <Button
+                        variant="destructive"
+                        size="sm"
+                        onClick={() => handleDelete(job)}
+                        className="gap-1"
+                      >
+                        <Trash2 className="h-3.5 w-3.5" />
+                        {t('delete')}
+                      </Button>
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        )}
+      </div>
+      <ConfirmDialog />
+    </div>
+  );
+}

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

@@ -1,6 +1,6 @@
 import { cn } from '@/lib/utils';
 import { t } from '@/lib/i18n';
-import { Cpu, GitBranch, History, MessageSquare, Sparkles, BookOpen, Store } from 'lucide-react';
+import { Cpu, GitBranch, History, MessageSquare, Sparkles, BookOpen, Store, AlarmClock } from 'lucide-react';
 import { NavLink } from 'react-router-dom';
 import { useDocBrowser } from '@/components/doc-browser';
@@ -30,6 +30,11 @@ const navItems = [
     label: t('sessions'),
     icon: History,
   },
+  {
+    target: '/cron',
+    label: t('cron'),
+    icon: AlarmClock,
+  },
   {
     target: '/marketplace',
     label: 'Marketplace',

package/src/hooks/useConfig.ts CHANGED Viewed

@@ -11,7 +11,11 @@ import {
   fetchSessions,
   fetchSessionHistory,
   updateSession,
-  deleteSession
+  deleteSession,
+  fetchCronJobs,
+  deleteCronJob,
+  setCronJobEnabled,
+  runCronJob
 } from '@/api/config';
 import { toast } from 'sonner';
 import { t } from '@/lib/i18n';
@@ -164,3 +168,56 @@ export function useDeleteSession() {
     }
   });
 }
+export function useCronJobs(params: { all?: boolean } = { all: true }) {
+  return useQuery({
+    queryKey: ['cron', params],
+    queryFn: () => fetchCronJobs(params),
+    staleTime: 10_000
+  });
+}
+export function useDeleteCronJob() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({ id }: { id: string }) => deleteCronJob(id),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['cron'] });
+      toast.success(t('configSavedApplied'));
+    },
+    onError: (error: Error) => {
+      toast.error(t('configSaveFailed') + ': ' + error.message);
+    }
+  });
+}
+export function useToggleCronJob() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({ id, enabled }: { id: string; enabled: boolean }) => setCronJobEnabled(id, { enabled }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['cron'] });
+      toast.success(t('configSavedApplied'));
+    },
+    onError: (error: Error) => {
+      toast.error(t('configSaveFailed') + ': ' + error.message);
+    }
+  });
+}
+export function useRunCronJob() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({ id, force }: { id: string; force?: boolean }) => runCronJob(id, { force }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['cron'] });
+      toast.success(t('configSavedApplied'));
+    },
+    onError: (error: Error) => {
+      toast.error(t('configSaveFailed') + ': ' + error.message);
+    }
+  });
+}

package/src/lib/i18n.ts CHANGED Viewed

@@ -4,6 +4,7 @@ export const LABELS: Record<string, { zh: string; en: string }> = {
   model: { zh: '模型', en: 'Model' },
   providers: { zh: '提供商', en: 'Providers' },
   channels: { zh: '渠道', en: 'Channels' },
+  cron: { zh: '定时任务', en: 'Cron Jobs' },
   // Common
   enabled: { zh: '启用', en: 'Enabled' },
@@ -137,6 +138,32 @@ export const LABELS: Record<string, { zh: string; en: string }> = {
   sessionsApplyingChanges: { zh: '正在应用会话变更...', en: 'Applying session changes...' },
   sessionsUnknownChannel: { zh: '未知渠道', en: 'Unknown channel' },
+  // Cron
+  cronPageTitle: { zh: '定时任务', en: 'Cron Jobs' },
+  cronPageDescription: { zh: '查看与删除定时任务，关注执行时间与状态。', en: 'View and delete cron jobs, track schedule and status.' },
+  cronSearchPlaceholder: { zh: '搜索名称 / 消息 / ID', en: 'Search name / message / ID' },
+  cronStatusLabel: { zh: '状态', en: 'Status' },
+  cronStatusAll: { zh: '全部', en: 'All' },
+  cronStatusEnabled: { zh: '仅启用', en: 'Enabled' },
+  cronStatusDisabled: { zh: '仅禁用', en: 'Disabled' },
+  cronTotalLabel: { zh: '总数', en: 'Total' },
+  cronLoading: { zh: '加载定时任务中...', en: 'Loading cron jobs...' },
+  cronEmpty: { zh: '暂无定时任务。', en: 'No cron jobs yet.' },
+  cronScheduleLabel: { zh: '计划', en: 'Schedule' },
+  cronDeliverTo: { zh: '投递到', en: 'Deliver to' },
+  cronNextRun: { zh: '下次执行', en: 'Next run' },
+  cronLastRun: { zh: '上次执行', en: 'Last run' },
+  cronLastStatus: { zh: '上次状态', en: 'Last status' },
+  cronDeleteConfirm: { zh: '确认删除定时任务', en: 'Delete cron job' },
+  cronOneShot: { zh: '一次性', en: 'One-shot' },
+  cronEnable: { zh: '启用', en: 'Enable' },
+  cronDisable: { zh: '禁用', en: 'Disable' },
+  cronRunNow: { zh: '立即执行', en: 'Run now' },
+  cronEnableConfirm: { zh: '确认启用定时任务', en: 'Enable cron job' },
+  cronDisableConfirm: { zh: '确认禁用定时任务', en: 'Disable cron job' },
+  cronRunConfirm: { zh: '确认立即执行定时任务', en: 'Run cron job now' },
+  cronRunForceConfirm: { zh: '任务已禁用，仍要立即执行', en: 'Cron job disabled. Force run now' },
   // UI
   saveVerifyConnect: { zh: '保存并验证 / 连接', en: 'Save & Verify / Connect' },