fix: add sync subscription webui and check credential web ui

apps/webui/src/presentation/routeTree.gen.ts

@@ -17,12 +17,14 @@ import { Route as AppRouteImport } from './routes/_app/route'
 import { Route as IndexImport } from './routes/index'
 import { Route as AuthSignUpImport } from './routes/auth/sign-up'
 import { Route as AuthSignInImport } from './routes/auth/sign-in'
+import { Route as AppTasksRouteImport } from './routes/_app/tasks/route'
 import { Route as AppSubscriptionsRouteImport } from './routes/_app/subscriptions/route'
 import { Route as AppSettingsRouteImport } from './routes/_app/settings/route'
 import { Route as AppPlaygroundRouteImport } from './routes/_app/playground/route'
 import { Route as AppCredential3rdRouteImport } from './routes/_app/credential3rd/route'
 import { Route as AppBangumiRouteImport } from './routes/_app/bangumi/route'
 import { Route as AuthOidcCallbackImport } from './routes/auth/oidc/callback'
+import { Route as AppTasksManageImport } from './routes/_app/tasks/manage'
 import { Route as AppSubscriptionsManageImport } from './routes/_app/subscriptions/manage'
 import { Route as AppSubscriptionsCreateImport } from './routes/_app/subscriptions/create'
 import { Route as AppSettingsDownloaderImport } from './routes/_app/settings/downloader'
@@ -32,6 +34,7 @@ import { Route as AppCredential3rdCreateImport } from './routes/_app/credential3
 import { Route as AppBangumiManageImport } from './routes/_app/bangumi/manage'
 import { Route as AppExploreFeedImport } from './routes/_app/_explore/feed'
 import { Route as AppExploreExploreImport } from './routes/_app/_explore/explore'
+import { Route as AppTasksDetailIdImport } from './routes/_app/tasks/detail.$id'
 import { Route as AppSubscriptionsEditIdImport } from './routes/_app/subscriptions/edit.$id'
 import { Route as AppSubscriptionsDetailIdImport } from './routes/_app/subscriptions/detail.$id'
 import { Route as AppCredential3rdEditIdImport } from './routes/_app/credential3rd/edit.$id'
@@ -74,6 +77,12 @@ const AuthSignInRoute = AuthSignInImport.update({
   getParentRoute: () => rootRoute,
 } as any)
 
+const AppTasksRouteRoute = AppTasksRouteImport.update({
+  id: '/tasks',
+  path: '/tasks',
+  getParentRoute: () => AppRouteRoute,
+} as any)
+
 const AppSubscriptionsRouteRoute = AppSubscriptionsRouteImport.update({
   id: '/subscriptions',
   path: '/subscriptions',
@@ -110,6 +119,12 @@ const AuthOidcCallbackRoute = AuthOidcCallbackImport.update({
   getParentRoute: () => rootRoute,
 } as any)
 
+const AppTasksManageRoute = AppTasksManageImport.update({
+  id: '/manage',
+  path: '/manage',
+  getParentRoute: () => AppTasksRouteRoute,
+} as any)
+
 const AppSubscriptionsManageRoute = AppSubscriptionsManageImport.update({
   id: '/manage',
   path: '/manage',
@@ -166,6 +181,12 @@ const AppExploreExploreRoute = AppExploreExploreImport.update({
   getParentRoute: () => AppRouteRoute,
 } as any)
 
+const AppTasksDetailIdRoute = AppTasksDetailIdImport.update({
+  id: '/detail/$id',
+  path: '/detail/$id',
+  getParentRoute: () => AppTasksRouteRoute,
+} as any)
+
 const AppSubscriptionsEditIdRoute = AppSubscriptionsEditIdImport.update({
   id: '/edit/$id',
   path: '/edit/$id',
@@ -257,6 +278,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AppSubscriptionsRouteImport
       parentRoute: typeof AppRouteImport
     }
+    '/_app/tasks': {
+      id: '/_app/tasks'
+      path: '/tasks'
+      fullPath: '/tasks'
+      preLoaderRoute: typeof AppTasksRouteImport
+      parentRoute: typeof AppRouteImport
+    }
     '/auth/sign-in': {
       id: '/auth/sign-in'
       path: '/auth/sign-in'
@@ -334,6 +362,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AppSubscriptionsManageImport
       parentRoute: typeof AppSubscriptionsRouteImport
     }
+    '/_app/tasks/manage': {
+      id: '/_app/tasks/manage'
+      path: '/manage'
+      fullPath: '/tasks/manage'
+      preLoaderRoute: typeof AppTasksManageImport
+      parentRoute: typeof AppTasksRouteImport
+    }
     '/auth/oidc/callback': {
       id: '/auth/oidc/callback'
       path: '/auth/oidc/callback'
@@ -369,6 +404,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AppSubscriptionsEditIdImport
       parentRoute: typeof AppSubscriptionsRouteImport
     }
+    '/_app/tasks/detail/$id': {
+      id: '/_app/tasks/detail/$id'
+      path: '/detail/$id'
+      fullPath: '/tasks/detail/$id'
+      preLoaderRoute: typeof AppTasksDetailIdImport
+      parentRoute: typeof AppTasksRouteImport
+    }
   }
 }
 
@@ -446,12 +488,27 @@ const AppSubscriptionsRouteRouteWithChildren =
     AppSubscriptionsRouteRouteChildren,
   )
 
+interface AppTasksRouteRouteChildren {
+  AppTasksManageRoute: typeof AppTasksManageRoute
+  AppTasksDetailIdRoute: typeof AppTasksDetailIdRoute
+}
+
+const AppTasksRouteRouteChildren: AppTasksRouteRouteChildren = {
+  AppTasksManageRoute: AppTasksManageRoute,
+  AppTasksDetailIdRoute: AppTasksDetailIdRoute,
+}
+
+const AppTasksRouteRouteWithChildren = AppTasksRouteRoute._addFileChildren(
+  AppTasksRouteRouteChildren,
+)
+
 interface AppRouteRouteChildren {
   AppBangumiRouteRoute: typeof AppBangumiRouteRouteWithChildren
   AppCredential3rdRouteRoute: typeof AppCredential3rdRouteRouteWithChildren
   AppPlaygroundRouteRoute: typeof AppPlaygroundRouteRouteWithChildren
   AppSettingsRouteRoute: typeof AppSettingsRouteRouteWithChildren
   AppSubscriptionsRouteRoute: typeof AppSubscriptionsRouteRouteWithChildren
+  AppTasksRouteRoute: typeof AppTasksRouteRouteWithChildren
   AppExploreExploreRoute: typeof AppExploreExploreRoute
   AppExploreFeedRoute: typeof AppExploreFeedRoute
 }
@@ -462,6 +519,7 @@ const AppRouteRouteChildren: AppRouteRouteChildren = {
   AppPlaygroundRouteRoute: AppPlaygroundRouteRouteWithChildren,
   AppSettingsRouteRoute: AppSettingsRouteRouteWithChildren,
   AppSubscriptionsRouteRoute: AppSubscriptionsRouteRouteWithChildren,
+  AppTasksRouteRoute: AppTasksRouteRouteWithChildren,
   AppExploreExploreRoute: AppExploreExploreRoute,
   AppExploreFeedRoute: AppExploreFeedRoute,
 }
@@ -480,6 +538,7 @@ export interface FileRoutesByFullPath {
   '/playground': typeof AppPlaygroundRouteRouteWithChildren
   '/settings': typeof AppSettingsRouteRouteWithChildren
   '/subscriptions': typeof AppSubscriptionsRouteRouteWithChildren
+  '/tasks': typeof AppTasksRouteRouteWithChildren
   '/auth/sign-in': typeof AuthSignInRoute
   '/auth/sign-up': typeof AuthSignUpRoute
   '/explore': typeof AppExploreExploreRoute
@@ -491,11 +550,13 @@ export interface FileRoutesByFullPath {
   '/settings/downloader': typeof AppSettingsDownloaderRoute
   '/subscriptions/create': typeof AppSubscriptionsCreateRoute
   '/subscriptions/manage': typeof AppSubscriptionsManageRoute
+  '/tasks/manage': typeof AppTasksManageRoute
   '/auth/oidc/callback': typeof AuthOidcCallbackRoute
   '/credential3rd/detail/$id': typeof AppCredential3rdDetailIdRoute
   '/credential3rd/edit/$id': typeof AppCredential3rdEditIdRoute
   '/subscriptions/detail/$id': typeof AppSubscriptionsDetailIdRoute
   '/subscriptions/edit/$id': typeof AppSubscriptionsEditIdRoute
+  '/tasks/detail/$id': typeof AppTasksDetailIdRoute
 }
 
 export interface FileRoutesByTo {
@@ -508,6 +569,7 @@ export interface FileRoutesByTo {
   '/playground': typeof AppPlaygroundRouteRouteWithChildren
   '/settings': typeof AppSettingsRouteRouteWithChildren
   '/subscriptions': typeof AppSubscriptionsRouteRouteWithChildren
+  '/tasks': typeof AppTasksRouteRouteWithChildren
   '/auth/sign-in': typeof AuthSignInRoute
   '/auth/sign-up': typeof AuthSignUpRoute
   '/explore': typeof AppExploreExploreRoute
@@ -519,11 +581,13 @@ export interface FileRoutesByTo {
   '/settings/downloader': typeof AppSettingsDownloaderRoute
   '/subscriptions/create': typeof AppSubscriptionsCreateRoute
   '/subscriptions/manage': typeof AppSubscriptionsManageRoute
+  '/tasks/manage': typeof AppTasksManageRoute
   '/auth/oidc/callback': typeof AuthOidcCallbackRoute
   '/credential3rd/detail/$id': typeof AppCredential3rdDetailIdRoute
   '/credential3rd/edit/$id': typeof AppCredential3rdEditIdRoute
   '/subscriptions/detail/$id': typeof AppSubscriptionsDetailIdRoute
   '/subscriptions/edit/$id': typeof AppSubscriptionsEditIdRoute
+  '/tasks/detail/$id': typeof AppTasksDetailIdRoute
 }
 
 export interface FileRoutesById {
@@ -537,6 +601,7 @@ export interface FileRoutesById {
   '/_app/playground': typeof AppPlaygroundRouteRouteWithChildren
   '/_app/settings': typeof AppSettingsRouteRouteWithChildren
   '/_app/subscriptions': typeof AppSubscriptionsRouteRouteWithChildren
+  '/_app/tasks': typeof AppTasksRouteRouteWithChildren
   '/auth/sign-in': typeof AuthSignInRoute
   '/auth/sign-up': typeof AuthSignUpRoute
   '/_app/_explore/explore': typeof AppExploreExploreRoute
@@ -548,11 +613,13 @@ export interface FileRoutesById {
   '/_app/settings/downloader': typeof AppSettingsDownloaderRoute
   '/_app/subscriptions/create': typeof AppSubscriptionsCreateRoute
   '/_app/subscriptions/manage': typeof AppSubscriptionsManageRoute
+  '/_app/tasks/manage': typeof AppTasksManageRoute
   '/auth/oidc/callback': typeof AuthOidcCallbackRoute
   '/_app/credential3rd/detail/$id': typeof AppCredential3rdDetailIdRoute
   '/_app/credential3rd/edit/$id': typeof AppCredential3rdEditIdRoute
   '/_app/subscriptions/detail/$id': typeof AppSubscriptionsDetailIdRoute
   '/_app/subscriptions/edit/$id': typeof AppSubscriptionsEditIdRoute
+  '/_app/tasks/detail/$id': typeof AppTasksDetailIdRoute
 }
 
 export interface FileRouteTypes {
@@ -567,6 +634,7 @@ export interface FileRouteTypes {
     | '/playground'
     | '/settings'
     | '/subscriptions'
+    | '/tasks'
     | '/auth/sign-in'
     | '/auth/sign-up'
     | '/explore'
@@ -578,11 +646,13 @@ export interface FileRouteTypes {
     | '/settings/downloader'
     | '/subscriptions/create'
     | '/subscriptions/manage'
+    | '/tasks/manage'
     | '/auth/oidc/callback'
     | '/credential3rd/detail/$id'
     | '/credential3rd/edit/$id'
     | '/subscriptions/detail/$id'
     | '/subscriptions/edit/$id'
+    | '/tasks/detail/$id'
   fileRoutesByTo: FileRoutesByTo
   to:
     | '/'
@@ -594,6 +664,7 @@ export interface FileRouteTypes {
     | '/playground'
     | '/settings'
     | '/subscriptions'
+    | '/tasks'
     | '/auth/sign-in'
     | '/auth/sign-up'
     | '/explore'
@@ -605,11 +676,13 @@ export interface FileRouteTypes {
     | '/settings/downloader'
     | '/subscriptions/create'
     | '/subscriptions/manage'
+    | '/tasks/manage'
     | '/auth/oidc/callback'
     | '/credential3rd/detail/$id'
     | '/credential3rd/edit/$id'
     | '/subscriptions/detail/$id'
     | '/subscriptions/edit/$id'
+    | '/tasks/detail/$id'
   id:
     | '__root__'
     | '/'
@@ -621,6 +694,7 @@ export interface FileRouteTypes {
     | '/_app/playground'
     | '/_app/settings'
     | '/_app/subscriptions'
+    | '/_app/tasks'
     | '/auth/sign-in'
     | '/auth/sign-up'
     | '/_app/_explore/explore'
@@ -632,11 +706,13 @@ export interface FileRouteTypes {
     | '/_app/settings/downloader'
     | '/_app/subscriptions/create'
     | '/_app/subscriptions/manage'
+    | '/_app/tasks/manage'
     | '/auth/oidc/callback'
     | '/_app/credential3rd/detail/$id'
     | '/_app/credential3rd/edit/$id'
     | '/_app/subscriptions/detail/$id'
     | '/_app/subscriptions/edit/$id'
+    | '/_app/tasks/detail/$id'
   fileRoutesById: FileRoutesById
 }
 
@@ -690,6 +766,7 @@ export const routeTree = rootRoute
         "/_app/playground",
         "/_app/settings",
         "/_app/subscriptions",
+        "/_app/tasks",
         "/_app/_explore/explore",
         "/_app/_explore/feed"
       ]
@@ -741,6 +818,14 @@ export const routeTree = rootRoute
         "/_app/subscriptions/edit/$id"
       ]
     },
+    "/_app/tasks": {
+      "filePath": "_app/tasks/route.tsx",
+      "parent": "/_app",
+      "children": [
+        "/_app/tasks/manage",
+        "/_app/tasks/detail/$id"
+      ]
+    },
     "/auth/sign-in": {
       "filePath": "auth/sign-in.tsx"
     },
@@ -783,6 +868,10 @@ export const routeTree = rootRoute
       "filePath": "_app/subscriptions/manage.tsx",
       "parent": "/_app/subscriptions"
     },
+    "/_app/tasks/manage": {
+      "filePath": "_app/tasks/manage.tsx",
+      "parent": "/_app/tasks"
+    },
     "/auth/oidc/callback": {
       "filePath": "auth/oidc/callback.tsx"
     },
@@ -801,6 +890,10 @@ export const routeTree = rootRoute
     "/_app/subscriptions/edit/$id": {
       "filePath": "_app/subscriptions/edit.$id.tsx",
       "parent": "/_app/subscriptions"
+    },
+    "/_app/tasks/detail/$id": {
+      "filePath": "_app/tasks/detail.$id.tsx",
+      "parent": "/_app/tasks"
     }
   }
 }

apps/webui/src/presentation/routes/_app/credential3rd/-check-available.tsx

@@ -0,0 +1,92 @@
+import { Button } from '@/components/ui/button';
+import {
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { CHECK_CREDENTIAL_3RD_AVAILABLE } from '@/domains/recorder/schema/credential3rd';
+import {
+  apolloErrorToMessage,
+  getApolloQueryError,
+} from '@/infra/errors/apollo';
+import type { CheckCredential3rdAvailableQuery } from '@/infra/graphql/gql/graphql';
+import { useLazyQuery } from '@apollo/client';
+import { CheckIcon, Loader2, XIcon } from 'lucide-react';
+import { memo, useCallback } from 'react';
+import { toast } from 'sonner';
+
+export interface Credential3rdCheckAvailableViewProps {
+  id: number;
+}
+
+export const Credential3rdCheckAvailableView = memo(
+  ({ id }: Credential3rdCheckAvailableViewProps) => {
+    const [checkAvailable, { data, error, loading }] =
+      useLazyQuery<CheckCredential3rdAvailableQuery>(
+        CHECK_CREDENTIAL_3RD_AVAILABLE,
+        {
+          variables: { id },
+        }
+      );
+
+    const handleCheckAvailable = useCallback(async () => {
+      const checkResult = await checkAvailable();
+      const error = getApolloQueryError(checkResult);
+      console.error('error', error);
+      if (error) {
+        toast.error('Failed to check available', {
+          description: apolloErrorToMessage(error),
+        });
+        return;
+      }
+      if (checkResult.data?.credential3rdCheckAvailable.available) {
+        toast.success('Credential is available');
+      } else {
+        toast.error('Credential is not available');
+      }
+    }, [checkAvailable]);
+
+    const available = data?.credential3rdCheckAvailable?.available;
+
+    return (
+      <div className="flex flex-col gap-2">
+        <Button
+          variant="outline"
+          size="lg"
+          onClick={handleCheckAvailable}
+          disabled={loading}
+        >
+          <span> Check Available </span>
+          {available === true && (
+            <CheckIcon className="h-4 w-4 text-green-300" />
+          )}
+          {(available === false || !!error) && (
+            <XIcon className="h-4 w-4 text-red-500" />
+          )}
+          {loading && <Loader2 className="h-4 w-4 animate-spin" />}
+        </Button>
+      </div>
+    );
+  }
+);
+
+export interface Credential3rdCheckAvailableViewDialogContentProps {
+  id: number;
+}
+
+export const Credential3rdCheckAvailableViewDialogContent = memo(
+  ({ id }: Credential3rdCheckAvailableViewDialogContentProps) => {
+    return (
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Check Available</DialogTitle>
+          <DialogDescription>
+            Check if the credential is available.
+          </DialogDescription>
+        </DialogHeader>
+        <Credential3rdCheckAvailableView id={id} />
+      </DialogContent>
+    );
+  }
+);

apps/webui/src/presentation/routes/_app/credential3rd/detail.$id.tsx

@@ -9,6 +9,7 @@ import {
   CardTitle,
 } from '@/components/ui/card';
 import { DetailEmptyView } from '@/components/ui/detail-empty-view';
+import { Dialog, DialogTrigger } from '@/components/ui/dialog';
 import { Label } from '@/components/ui/label';
 import { QueryErrorView } from '@/components/ui/query-error-view';
 import { Separator } from '@/components/ui/separator';
@@ -23,8 +24,9 @@ import {
   useRouter,
 } from '@tanstack/react-router';
 import { format } from 'date-fns/format';
-import { ArrowLeft, Edit, Eye, EyeOff } from 'lucide-react';
+import { ArrowLeft, CheckIcon, Edit, Eye, EyeOff } from 'lucide-react';
 import { useState } from 'react';
+import { Credential3rdCheckAvailableViewDialogContent } from './-check-available';
 
 export const Route = createFileRoute('/_app/credential3rd/detail/$id')({
   component: Credential3rdDetailRouteComponent,
@@ -57,7 +59,6 @@ function Credential3rdDetailRouteComponent() {
       variables: {
         id: Number.parseInt(id),
       },
-      fetchPolicy: 'cache-and-network',
     }
   );
 
@@ -125,7 +126,19 @@ function Credential3rdDetailRouteComponent() {
                 View credential detail
               </CardDescription>
             </div>
-            <Badge variant="secondary">{credential.credentialType}</Badge>
+            <div className="flex items-center gap-2">
+              <Dialog>
+                <DialogTrigger asChild>
+                  <Button variant="outline" size="sm">
+                    <CheckIcon className="h-4 w-4" />
+                    Check Available
+                  </Button>
+                </DialogTrigger>
+                <Credential3rdCheckAvailableViewDialogContent
+                  id={credential.id}
+                />
+              </Dialog>
+            </div>
           </div>
         </CardHeader>
         <CardContent>

apps/webui/src/presentation/routes/_app/credential3rd/edit.$id.tsx

@@ -27,6 +27,10 @@ import {
   GET_CREDENTIAL_3RD_DETAIL,
   UPDATE_CREDENTIAL_3RD,
 } from '@/domains/recorder/schema/credential3rd';
+import {
+  apolloErrorToMessage,
+  getApolloQueryError,
+} from '@/infra/errors/apollo';
 import type {
   Credential3rdTypeEnum,
   GetCredential3rdDetailQuery,
@@ -260,19 +264,19 @@ function Credential3rdEditRouteComponent() {
       variables: {
         id: Number.parseInt(id),
       },
-      fetchPolicy: 'cache-and-network',
     });
 
   const credential = data?.credential3rd?.nodes?.[0];
 
   const onCompleted = useCallback(async () => {
     const refetchResult = await refetch();
-    if (refetchResult.errors) {
-      toast('Update credential failed', {
-        description: refetchResult.errors[0].message,
+    const error = getApolloQueryError(refetchResult);
+    if (error) {
+      toast.error('Update credential failed', {
+        description: apolloErrorToMessage(error),
       });
     } else {
-      toast('Update credential successfully');
+      toast.success('Update credential successfully');
     }
   }, [refetch]);
 

apps/webui/src/presentation/routes/_app/credential3rd/manage.tsx

@@ -18,6 +18,10 @@ import {
   DELETE_CREDENTIAL_3RD,
   GET_CREDENTIAL_3RD,
 } from '@/domains/recorder/schema/credential3rd';
+import {
+  apolloErrorToMessage,
+  getApolloQueryError,
+} from '@/infra/errors/apollo';
 import type { GetCredential3rdQuery } from '@/infra/graphql/gql/graphql';
 import type { RouteStateDataOption } from '@/infra/routes/traits';
 import { useDebouncedSkeleton } from '@/presentation/hooks/use-debounded-skeleton';
@@ -79,17 +83,16 @@ function CredentialManageRouteComponent() {
           },
         },
       },
-      fetchPolicy: 'cache-and-network',
-      nextFetchPolicy: 'network-only',
     }
   );
 
   const [deleteCredential] = useMutation(DELETE_CREDENTIAL_3RD, {
     onCompleted: async () => {
       const refetchResult = await refetch();
-      if (refetchResult.errors) {
+      const error = getApolloQueryError(refetchResult);
+      if (error) {
         toast.error('Failed to delete credential', {
-          description: refetchResult.errors[0].message,
+          description: apolloErrorToMessage(error),
         });
         return;
       }

apps/webui/src/presentation/routes/_app/subscriptions/-credential3rd-select.tsx

@@ -28,8 +28,6 @@ export function Credential3rdSelectContent({
     GetCredential3rdQuery,
     GetCredential3rdQueryVariables
   >(GET_CREDENTIAL_3RD, {
-    fetchPolicy: 'cache-and-network',
-    nextFetchPolicy: 'cache-and-network',
     variables: {
       filters: {
         credentialType: {

apps/webui/src/presentation/routes/_app/subscriptions/-sync.tsx

@@ -0,0 +1,160 @@
+import { Button } from '@/components/ui/button';
+import {
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Spinner } from '@/components/ui/spinner';
+import {
+  SYNC_SUBSCRIPTION_FEEDS_FULL,
+  SYNC_SUBSCRIPTION_FEEDS_INCREMENTAL,
+  SYNC_SUBSCRIPTION_SOURCES,
+} from '@/domains/recorder/schema/subscriptions';
+import type {
+  SyncSubscriptionFeedsFullMutation,
+  SyncSubscriptionFeedsFullMutationVariables,
+  SyncSubscriptionFeedsIncrementalMutation,
+  SyncSubscriptionFeedsIncrementalMutationVariables,
+  SyncSubscriptionSourcesMutation,
+  SyncSubscriptionSourcesMutationVariables,
+} from '@/infra/graphql/gql/graphql';
+import { useMutation } from '@apollo/client';
+import { useNavigate } from '@tanstack/react-router';
+import { RefreshCcwIcon } from 'lucide-react';
+import { memo, useCallback } from 'react';
+import { toast } from 'sonner';
+
+export type SubscriptionSyncViewCompletePayload = {
+  taskId: string;
+};
+
+export interface SubscriptionSyncViewProps {
+  id: number;
+  onComplete: (payload: SubscriptionSyncViewCompletePayload) => void;
+}
+
+export const SubscriptionSyncView = memo(
+  ({ id, onComplete }: SubscriptionSyncViewProps) => {
+    const [syncSubscriptionFeedsIncremental, { loading: loadingIncremental }] =
+      useMutation<
+        SyncSubscriptionFeedsIncrementalMutation,
+        SyncSubscriptionFeedsIncrementalMutationVariables
+      >(SYNC_SUBSCRIPTION_FEEDS_INCREMENTAL, {
+        onCompleted: (data) => {
+          toast.success('Sync completed');
+          onComplete(data.subscriptionSyncOneFeedsIncremental);
+        },
+        onError: (error) => {
+          toast.error('Failed to sync subscription', {
+            description: error.message,
+          });
+        },
+      });
+
+    const [syncSubscriptionFeedsFull, { loading: loadingFull }] = useMutation<
+      SyncSubscriptionFeedsFullMutation,
+      SyncSubscriptionFeedsFullMutationVariables
+    >(SYNC_SUBSCRIPTION_FEEDS_FULL, {
+      onCompleted: (data) => {
+        toast.success('Sync completed');
+        onComplete(data.subscriptionSyncOneFeedsFull);
+      },
+      onError: (error) => {
+        toast.error('Failed to sync subscription', {
+          description: error.message,
+        });
+      },
+    });
+
+    const [syncSubscriptionSources, { loading: loadingSources }] = useMutation<
+      SyncSubscriptionSourcesMutation,
+      SyncSubscriptionSourcesMutationVariables
+    >(SYNC_SUBSCRIPTION_SOURCES, {
+      onCompleted: (data) => {
+        toast.success('Sync completed');
+        onComplete(data.subscriptionSyncOneSources);
+      },
+      onError: (error) => {
+        toast.error('Failed to sync subscription', {
+          description: error.message,
+        });
+      },
+    });
+
+    const loading = loadingIncremental || loadingFull || loadingSources;
+
+    return (
+      <div className="flex flex-col gap-2">
+        <Button
+          size="lg"
+          variant="outline"
+          onClick={() => syncSubscriptionSources({ variables: { id } })}
+        >
+          <RefreshCcwIcon className="h-4 w-4" />
+          <span>Sources</span>
+        </Button>
+        <Button
+          size="lg"
+          variant="outline"
+          onClick={() =>
+            syncSubscriptionFeedsIncremental({ variables: { id } })
+          }
+        >
+          <RefreshCcwIcon className="h-4 w-4" />
+          <span>Incremental Feeds</span>
+        </Button>
+        <Button
+          size="lg"
+          variant="outline"
+          onClick={() => syncSubscriptionFeedsFull({ variables: { id } })}
+        >
+          <RefreshCcwIcon className="h-4 w-4" />
+          <span>Full Feeds</span>
+        </Button>
+
+        {loading && (
+          <div className="absolute inset-0 flex flex-row items-center justify-center gap-2">
+            <Spinner variant="circle-filled" size="16" />
+            <span>Syncing...</span>
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+
+export interface SubscriptionSyncDialogContentProps {
+  id: number;
+  onCancel: VoidFunction;
+}
+
+export const SubscriptionSyncDialogContent = memo(
+  ({ id, onCancel }: SubscriptionSyncDialogContentProps) => {
+    const navigate = useNavigate();
+
+    const handleSyncComplete = useCallback(
+      (payload: SubscriptionSyncViewCompletePayload) => {
+        navigate({
+          to: '/tasks/detail/$id',
+          params: {
+            id: `${payload.taskId}`,
+          },
+        });
+      },
+      [navigate]
+    );
+
+    return (
+      <DialogContent onAbort={onCancel}>
+        <DialogHeader>
+          <DialogTitle>Sync Subscription</DialogTitle>
+          <DialogDescription>
+            Sync the subscription with sources and feeds.
+          </DialogDescription>
+        </DialogHeader>
+        <SubscriptionSyncView id={id} onComplete={handleSyncComplete} />
+      </DialogContent>
+    );
+  }
+);

apps/webui/src/presentation/routes/_app/subscriptions/detail.$id.tsx

@@ -9,12 +9,17 @@ import {
   CardTitle,
 } from '@/components/ui/card';
 import { DetailEmptyView } from '@/components/ui/detail-empty-view';
+import { Dialog, DialogTrigger } from '@/components/ui/dialog';
 import { Label } from '@/components/ui/label';
 import { QueryErrorView } from '@/components/ui/query-error-view';
 import { Separator } from '@/components/ui/separator';
 import { GET_SUBSCRIPTION_DETAIL } from '@/domains/recorder/schema/subscriptions';
 import { SubscriptionService } from '@/domains/recorder/services/subscription.service';
 import { useInject } from '@/infra/di/inject';
+import {
+  apolloErrorToMessage,
+  getApolloQueryError,
+} from '@/infra/errors/apollo';
 import {
   type GetSubscriptionDetailQuery,
   SubscriptionCategoryEnum,
@@ -27,8 +32,16 @@ import {
   useRouter,
 } from '@tanstack/react-router';
 import { format } from 'date-fns';
-import { ArrowLeft, Edit, ExternalLink } from 'lucide-react';
+import {
+  ArrowLeft,
+  Edit,
+  ExternalLink,
+  ListIcon,
+  RefreshCcwIcon,
+} from 'lucide-react';
 import { useMemo } from 'react';
+import { toast } from 'sonner';
+import { SubscriptionSyncDialogContent } from './-sync';
 
 export const Route = createFileRoute('/_app/subscriptions/detail/$id')({
   component: SubscriptionDetailRouteComponent,
@@ -51,15 +64,22 @@ function SubscriptionDetailRouteComponent() {
     }
   };
 
-  const { data, loading, error } = useQuery<GetSubscriptionDetailQuery>(
-    GET_SUBSCRIPTION_DETAIL,
-    {
+  const handleReload = async () => {
+    const result = await refetch();
+    const error = getApolloQueryError(result);
+    if (error) {
+      toast.error('Failed to reload subscription', {
+        description: apolloErrorToMessage(error),
+      });
+    }
+  };
+
+  const { data, loading, error, refetch } =
+    useQuery<GetSubscriptionDetailQuery>(GET_SUBSCRIPTION_DETAIL, {
       variables: {
         id: Number.parseInt(id),
       },
-      fetchPolicy: 'cache-and-network',
-    }
-  );
+    });
 
   const handleEnterEditMode = () => {
     navigate({
@@ -69,6 +89,7 @@ function SubscriptionDetailRouteComponent() {
       },
     });
   };
+
   const subscription = data?.subscriptions?.nodes?.[0];
 
   const sourceUrlMeta = useMemo(
@@ -123,7 +144,7 @@ function SubscriptionDetailRouteComponent() {
           <Button onClick={handleEnterEditMode}>
             <Edit className="mr-2 h-4 w-4" />
             Edit
-          </Button>
+          </Button>{' '}
         </div>
       </div>
 
@@ -137,10 +158,30 @@ function SubscriptionDetailRouteComponent() {
               </CardDescription>
             </div>
             <div className="flex gap-2">
-              <Badge variant={subscription.enabled ? 'default' : 'secondary'}>
-                {subscription.enabled ? 'Enabled' : 'Disabled'}
-              </Badge>
-              <Badge variant="outline">{subscription.category}</Badge>
+              <Dialog>
+                <DialogTrigger asChild>
+                  <Button variant="outline" size="sm">
+                    <RefreshCcwIcon className="h-4 w-4" />
+                    Sync
+                  </Button>
+                </DialogTrigger>
+                <SubscriptionSyncDialogContent
+                  id={subscription.id}
+                  onCancel={handleReload}
+                />
+              </Dialog>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() =>
+                  navigate({
+                    to: '/tasks/manage',
+                  })
+                }
+              >
+                <ListIcon className="h-4 w-4" />
+                Tasks
+              </Button>
             </div>
           </div>
         </CardHeader>
@@ -173,11 +214,9 @@ function SubscriptionDetailRouteComponent() {
               <div className="space-y-2">
                 <Label className="font-medium text-sm">Enabled</Label>
                 <div className="rounded-md bg-muted p-3">
-                  <Badge
-                    variant={subscription.enabled ? 'default' : 'secondary'}
-                  >
+                  <span className="text-sm">
                     {subscription.enabled ? 'Enabled' : 'Disabled'}
-                  </Badge>
+                  </span>
                 </div>
               </div>
 

apps/webui/src/presentation/routes/_app/subscriptions/edit.$id.tsx

@@ -31,6 +31,10 @@ import {
 } from '@/domains/recorder/schema/subscriptions';
 import { SubscriptionService } from '@/domains/recorder/services/subscription.service';
 import { useInject } from '@/infra/di/inject';
+import {
+  apolloErrorToMessage,
+  getApolloQueryError,
+} from '@/infra/errors/apollo';
 import {
   Credential3rdTypeEnum,
   type GetSubscriptionDetailQuery,
@@ -382,16 +386,16 @@ function SubscriptionEditRouteComponent() {
       variables: {
         id: Number.parseInt(id),
       },
-      fetchPolicy: 'cache-and-network',
     });
 
   const subscription = data?.subscriptions?.nodes?.[0];
 
   const onCompleted = useCallback(async () => {
     const refetchResult = await refetch();
-    if (refetchResult.errors) {
+    const error = getApolloQueryError(refetchResult);
+    if (error) {
       toast.error('Update subscription failed', {
-        description: refetchResult.errors[0].message,
+        description: apolloErrorToMessage(error),
       });
     } else {
       toast.success('Update subscription successfully');

apps/webui/src/presentation/routes/_app/subscriptions/manage.tsx

@@ -19,6 +19,10 @@ import {
   type SubscriptionDto,
   UPDATE_SUBSCRIPTIONS,
 } from '@/domains/recorder/schema/subscriptions';
+import {
+  apolloErrorToMessage,
+  getApolloQueryError,
+} from '@/infra/errors/apollo';
 import type {
   GetSubscriptionsQuery,
   SubscriptionsUpdateInput,
@@ -81,15 +85,16 @@ function SubscriptionManageRouteComponent() {
           updatedAt: 'DESC',
         },
       },
-      refetchWritePolicy: 'overwrite',
-      nextFetchPolicy: 'network-only',
     }
   );
   const [updateSubscription] = useMutation(UPDATE_SUBSCRIPTIONS, {
     onCompleted: async () => {
       const refetchResult = await refetch();
-      if (refetchResult.errors) {
-        toast.error(refetchResult.errors[0].message);
+      const error = getApolloQueryError(refetchResult);
+      if (error) {
+        toast.error('Failed to update subscription', {
+          description: apolloErrorToMessage(error),
+        });
         return;
       }
       toast.success('Subscription updated');
@@ -103,8 +108,11 @@ function SubscriptionManageRouteComponent() {
   const [deleteSubscription] = useMutation(DELETE_SUBSCRIPTIONS, {
     onCompleted: async () => {
       const refetchResult = await refetch();
-      if (refetchResult.errors) {
-        toast.error(refetchResult.errors[0].message);
+      const error = getApolloQueryError(refetchResult);
+      if (error) {
+        toast.error('Failed to delete subscription', {
+          description: apolloErrorToMessage(error),
+        });
         return;
       }
       toast.success('Subscription deleted');

apps/webui/src/presentation/routes/_app/tasks/detail.$id.tsx

@@ -0,0 +1,13 @@
+import type { RouteStateDataOption } from '@/infra/routes/traits';
+import { createFileRoute } from '@tanstack/react-router';
+
+export const Route = createFileRoute('/_app/tasks/detail/$id')({
+  component: TaskDetailRouteComponent,
+  staticData: {
+    breadcrumb: { label: 'Detail' },
+  } satisfies RouteStateDataOption,
+});
+
+function TaskDetailRouteComponent() {
+  return <div>Hello "/_app/tasks/detail/$id"!</div>;
+}

apps/webui/src/presentation/routes/_app/tasks/manage.tsx

@@ -0,0 +1,13 @@
+import type { RouteStateDataOption } from '@/infra/routes/traits';
+import { createFileRoute } from '@tanstack/react-router';
+
+export const Route = createFileRoute('/_app/tasks/manage')({
+  component: TaskManageRouteComponent,
+  staticData: {
+    breadcrumb: { label: 'Manage' },
+  } satisfies RouteStateDataOption,
+});
+
+function TaskManageRouteComponent() {
+  return <div>Hello "/_app/tasks/manage"!</div>;
+}

apps/webui/src/presentation/routes/_app/tasks/route.tsx

@@ -0,0 +1,8 @@
+import { buildVirtualBranchRouteOptions } from '@/infra/routes/utils';
+import { createFileRoute } from '@tanstack/react-router';
+
+export const Route = createFileRoute('/_app/tasks')(
+  buildVirtualBranchRouteOptions({
+    title: 'Tasks',
+  })
+);