diff --git a/.github/instructions/comp-vue.instructions.md b/.github/instructions/comp-vue.instructions.md
index da1844f..774f862 100644
--- a/.github/instructions/comp-vue.instructions.md
+++ b/.github/instructions/comp-vue.instructions.md
@@ -37,6 +37,7 @@ const emit = defineEmits(compNameEmits);
 
 - Use `<span>` instead of `<p>` for inline text
 - If template is duplicated inside a component and no third one will reuse it, define a reusable template inside the component scope using [VueUse createReusableTemplate](https://vueuse.org/core/createReusableTemplate/), instead of creating a new component.
+- Use UnoCSS utility classes for simple styles, instead of writing custom CSS/SCSS.
 
 ### Naming
 
diff --git a/.github/workflows/copilot-setup-steps.yml b/.github/workflows/copilot-setup-steps.yml
new file mode 100644
index 0000000..a8b0d9a
--- /dev/null
+++ b/.github/workflows/copilot-setup-steps.yml
@@ -0,0 +1,36 @@
+name: "Copilot Setup Steps"
+
+on:
+  workflow_dispatch:
+  push:
+    paths:
+      - .github/workflows/copilot-setup-steps.yml
+  pull_request:
+    paths:
+      - .github/workflows/copilot-setup-steps.yml
+
+jobs:
+  # The job MUST be called `copilot-setup-steps` or it will not be picked up by Copilot.
+  copilot-setup-steps:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: read
+
+    # These steps will run before agent starts
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v5
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+
+      - name: Install dependencies
+        run: pnpm install
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
index 1152f0f..66f511f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -6,10 +6,14 @@ yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
-pnpm-workspace.yaml
 
+# Dependency directories
+pnpm-workspace.yaml
 node_modules
-.DS_Store
+pnpm-lock.yaml
+package-lock.json
+
+# Build output
 dist
 dist-ssr
 coverage
@@ -31,8 +35,9 @@ coverage
 *.sln
 *.sw?
 
+# others
+.DS_Store
 *.tsbuildinfo
-pnpm-lock.yaml
 .__mf__temp
 
 # env files
diff --git a/.npmrc b/.npmrc
index 77862ad..79f2e36 100644
--- a/.npmrc
+++ b/.npmrc
@@ -1 +1,2 @@
-@inkcre:registry=https://npm.pkg.github.com
+@inkcre:registry=https://npm.pkg.github.com/
+//npm.pkg.github.com/:_authToken=${NODE_AUTH_TOKEN}
\ No newline at end of file
diff --git a/AGENTS.md b/AGENTS.md
index c6b14d7..a82cbc3 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -1,31 +1,31 @@
 # InKCre Client-Web
 
-This is a Vue SPA, provides an interface to interact with InKCre (an information management tool).
+InKCre is an information management application aims to provides automatic information collection, organization and powerful use of information.
+And this is the Vue implemetation of InKCre, mainly provides a GUI to manage info-base and use information.
 
 ## Tech Stacks
 
-- Framework: Vue3 + TypeScript + Sass(scss) + Vite
+- Framework: Vue3 + TypeScript + SCSS
 - Routing: vue-router
 - Internalization: vue-i18n
 - Date and time: dayjs
 - State management: pinia
-- Packagae management: pnpm
 
 ## Business Domains
 
-- obsrv: Observability
-- extension
+- source: Data collectors, the input of info-base
 - info-base
-  - block
-  - relation
-  - resolver
-  - storage
-  - source
-- sink
+  - block: Content units
+  - relation: Links between blocks
+  - storage: Store block content somewhere else than database.
+  - resolver: resolves block content
+- sink: Interface to use information base, the output of info-base
+- extension: extends info-base, source and sink abilities
+- obsrv: Observability
 
 ## Source Structure
 
-- `components/`: split by domain
+- `components/`: split by business domain
 - `views/`
 - `business/`: api requests, business logic, split by domain
 - `stores/`: split by domain
@@ -33,10 +33,18 @@ This is a Vue SPA, provides an interface to interact with InKCre (an information
 - `utils/`: utilities, composables
 - `locales/`: locale file, split by language
 - `static/`
-- router.ts
+- `router.ts`
+
+## Coding Guidelines
+
+- Do not repeat yourself:
+  - Search across the codebase before you creating a new type or something might can be reused.
+  - Make the code reusable if it's used in over two places.
+- [Write code for human](./.github/instructions/human-readable-code.instructions.md)
+
+## Deployment
 
-## Best Practices
+This project supports following deployments:
 
-- Search across the codebase before you creating a new type or something might can be reused.
-- Common components should be stateless or avoid maintaining state as much as possible.
-- Read more in `.github/instructions/`
+- Cloudflare Worker
+- Build and serve
diff --git a/docs/todo.md b/docs/todo.md
index ef3614d..5ad4b69 100644
--- a/docs/todo.md
+++ b/docs/todo.md
@@ -19,3 +19,5 @@
 - [ ] 时区转换有问题
 - [x] LogsViewer 的滚动到底部实现有问题
 - [x] pending job 不应该 poll logs
+- [ ] InkPagination new type
+- [ ] Source 不是 info-base 的一部分
diff --git a/package.json b/package.json
index fb2c172..ba6bb10 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,7 @@
     "@codemirror/lint": "^6.9.2",
     "@codemirror/state": "^6.5.2",
     "@codemirror/view": "^6.38.8",
-    "@inkcre/web-design": "^1.1.1",
+    "@inkcre/web-design": "^1.1.5",
     "@module-federation/runtime": "^0.21.4",
     "@supabase/postgrest-js": "^2.84.0",
     "@vueuse/core": "^14.0.0",
diff --git a/src/business/info-base/source.ts b/src/business/info-base/source.ts
index 45309b0..9c66cf5 100644
--- a/src/business/info-base/source.ts
+++ b/src/business/info-base/source.ts
@@ -170,6 +170,7 @@ export class SourceCollectJob extends Z.class({
     .enum(SourceCollectJobStatus)
     .default(SourceCollectJobStatus.PENDING),
   state: z.looseObject({}).default(() => ({})),
+  config: z.looseObject({}).default(() => ({})),
 }) {
   static dbApi: DBAPIClient = new DBAPIClient(
     "sources_collect_jobs",
@@ -186,6 +187,46 @@ export class SourceCollectJob extends Z.class({
     );
   }
 
+  static async getBySource(
+    sourceId: SourceRef,
+    options?: {
+      limit?: number;
+      offset?: number;
+      order?: "asc" | "desc";
+    }
+  ): Promise<{ data: SourceCollectJob[]; count: number }> {
+    const { limit = 10, offset = 0, order = "desc" } = options || {};
+    const query = this.dbApi
+      .from()
+      .select("*", { count: "exact" })
+      .eq("source", sourceId)
+      .order("created_at", { ascending: order === "asc" })
+      .range(offset, offset + limit - 1);
+
+    const result = await query;
+    return {
+      data: (result.data || []).map((d) => new SourceCollectJob(d)),
+      count: result.count || 0,
+    };
+  }
+
+  static async getLatestOpenBySource(
+    sourceId: SourceRef
+  ): Promise<SourceCollectJob | null> {
+    const result = await this.dbApi
+      .from()
+      .select()
+      .eq("source", sourceId)
+      .in("status", [SourceCollectJobStatus.PENDING, SourceCollectJobStatus.RUNNING])
+      .order("created_at", { ascending: false })
+      .limit(1);
+
+    if (result.data && result.data.length > 0) {
+      return new SourceCollectJob(result.data[0]);
+    }
+    return null;
+  }
+
   public async getLogs(options?: {
     limit?: number;
     cursor?: number;
diff --git a/src/components/info-base/source/collectJobForm/collectJobForm.md b/src/components/info-base/source/collectJobForm/collectJobForm.md
new file mode 100644
index 0000000..21b1345
--- /dev/null
+++ b/src/components/info-base/source/collectJobForm/collectJobForm.md
@@ -0,0 +1,26 @@
+# collectJobForm
+
+## Rationale
+
+Provides a form interface to configure a source collect job.
+
+## Goals
+
+Allow users to configure collect job settings including config object.
+
+## Specification
+
+- Pure form component with v-model support
+- Provides config editor (InkJsonEditor)
+- No create/submit buttons - just form fields
+- Parent component handles submission
+
+## Implementation
+
+### Props
+
+- `modelValue` (`SourceCollectJobForm`, required): The form data object
+
+### Events
+
+- `update:modelValue(form: SourceCollectJobForm)`: Emitted when form data changes
diff --git a/src/components/info-base/source/collectJobForm/collectJobForm.scss b/src/components/info-base/source/collectJobForm/collectJobForm.scss
new file mode 100644
index 0000000..a0ba3b0
--- /dev/null
+++ b/src/components/info-base/source/collectJobForm/collectJobForm.scss
@@ -0,0 +1,5 @@
+.collect-job-form {
+  display: flex;
+  flex-direction: column;
+  gap: sys-var(space, md);
+}
diff --git a/src/components/info-base/source/collectJobForm/collectJobForm.ts b/src/components/info-base/source/collectJobForm/collectJobForm.ts
new file mode 100644
index 0000000..25b6182
--- /dev/null
+++ b/src/components/info-base/source/collectJobForm/collectJobForm.ts
@@ -0,0 +1,15 @@
+import type { PropType } from "vue";
+import { SourceCollectJobForm } from "@/business/info-base/source";
+
+// --- Props ---
+export const collectJobFormProps = {
+  modelValue: {
+    type: Object as PropType<SourceCollectJobForm>,
+    required: true,
+  },
+} as const;
+
+// --- Emits ---
+export const collectJobFormEmits = {
+  "update:modelValue": (form: SourceCollectJobForm) => true,
+} as const;
diff --git a/src/components/info-base/source/collectJobForm/collectJobForm.vue b/src/components/info-base/source/collectJobForm/collectJobForm.vue
new file mode 100644
index 0000000..545a03e
--- /dev/null
+++ b/src/components/info-base/source/collectJobForm/collectJobForm.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { computed, ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
+import { InkForm, InkJsonEditor } from "@inkcre/web-design";
+import { collectJobFormProps, collectJobFormEmits } from "./collectJobForm";
+
+const props = defineProps(collectJobFormProps);
+const emit = defineEmits(collectJobFormEmits);
+const { t } = useI18n();
+
+const configJson = computed<string>({
+  get: () => {
+    return JSON.stringify(props.modelValue.config || {}, null, 2);
+  },
+  set: (newVal: string) => {
+    props.modelValue.config = JSON.parse(newVal);
+  },
+});
+</script>
+
+<template>
+  <InkForm class="collect-job-form">
+    <InkJsonEditor
+      v-model="configJson"
+      :label="t('collectJob.config')"
+      :placeholder="t('source.configPlaceholder')"
+      :rows="6"
+    />
+  </InkForm>
+</template>
+
+<style lang="scss" scoped src="./collectJobForm.scss" />
diff --git a/src/components/info-base/source/createSource/createSource.vue b/src/components/info-base/source/createSource/createSource.vue
index 7ba6b28..20468a7 100644
--- a/src/components/info-base/source/createSource/createSource.vue
+++ b/src/components/info-base/source/createSource/createSource.vue
@@ -1,22 +1,12 @@
 <script setup lang="ts">
-import { computed, reactive, ref, watch } from "vue";
-import {
-  InkInput,
-  InkJsonEditor,
-  InkField,
-  InkButton,
-  InkForm,
-  InkSwitch,
-  InkDropdown,
-  type DropdownOption,
-} from "@inkcre/web-design";
-import collectAtForm from "../collectAtForm/collectAtForm.vue";
+import { reactive } from "vue";
+import { InkButton } from "@inkcre/web-design";
+import sourceForm from "../sourceForm/sourceForm.vue";
 import { createSourceEmits } from "./createSource";
-import { CollectAt, SourceForm, SourceType } from "@/business/info-base/source";
+import { CollectAt, SourceForm } from "@/business/info-base/source";
 import { refManualReset } from "@vueuse/core";
 
 const emit = defineEmits(createSourceEmits);
-const configJson = ref<string>("");
 
 // --- data ---
 const form = refManualReset(() =>
@@ -29,93 +19,22 @@ const form = refManualReset(() =>
     })
   )
 );
-const sourceTypes = ref<(DropdownOption & SourceType)[]>([]);
-
-// --- computed ---
-const toggleAutoCollect = computed({
-  get: () => form.value.collect_at != null,
-  set: (value: boolean) => {
-    if (value) {
-      if (form.value.collect_at == null) {
-        form.value.collect_at = CollectAt.parse({});
-      }
-    } else {
-      form.value.collect_at = null;
-    }
-  },
-});
-
-const currentSourceType = computed(() => {
-  return sourceTypes.value.find((type) => type.value === form.value.type);
-});
 
 // --- methods ---
-const loadSourceTypes = async (): Promise<(DropdownOption & SourceType)[]> => {
-  const result = await SourceType.getAll();
-  return result.map((type) => ({
-    label: type.id,
-    value: type.id,
-    ...type,
-  }));
-};
-
 const onCreate = () => {
-  form.value.config = JSON.parse(configJson.value);
   form.value.create().then(() => {
     emit("create", form.value);
     // Reset form on success
     form.reset();
   });
 };
-
-// -- watchers ---
-watch(
-  () => form.value.config,
-  (newVal) => {
-    configJson.value = JSON.stringify(newVal, null, 2);
-  },
-  { immediate: true }
-);
 </script>
 
 <template>
   <div class="create-source">
     <h2 class="title">Create Source</h2>
 
-    <InkForm class="form">
-      <InkInput v-model="form.nickname" label="Nickname" editable />
-
-      <InkDropdown
-        v-model="form.type"
-        v-model:options="sourceTypes"
-        :refresher="loadSourceTypes"
-        label="Type"
-      />
-
-      <InkField label="Collect At" prop="collect_at">
-        <template #label-right>
-          <div class="flex flex-row flex-1 justify-end">
-            <InkSwitch v-model="toggleAutoCollect" size="xs" />
-          </div>
-        </template>
-        <collectAtForm
-          v-if="form.collect_at"
-          v-model="form.collect_at"
-          class="form__collect-at"
-        />
-        <span v-else class="form__collect-at-placeholder"
-          >Auto collect off.</span
-        >
-      </InkField>
-
-      <InkJsonEditor
-        v-model="configJson"
-        :schema="currentSourceType?.config_schema"
-        label="Config"
-        placeholder="{}"
-        :rows="6"
-      />
-    </InkForm>
+    <sourceForm v-model="form" class="form" />
 
     <div class="footer">
       <InkButton text="Create" type="primary" size="md" @click="onCreate" />
diff --git a/src/components/info-base/source/sourceCard/sourceCard.scss b/src/components/info-base/source/sourceCard/sourceCard.scss
index c92a80e..7e82f3a 100644
--- a/src/components/info-base/source/sourceCard/sourceCard.scss
+++ b/src/components/info-base/source/sourceCard/sourceCard.scss
@@ -8,6 +8,12 @@
   width: 100%;
   min-width: 280px;
   max-width: 380px;
+  cursor: pointer;
+  transition: background-color 0.2s, border-color 0.2s;
+
+  &:hover {
+    border-color: sys-var(color, border, subtle);
+  }
 
   &__metadata {
     display: flex;
@@ -72,6 +78,14 @@
     width: 100%;
   }
 
+  &__open-job {
+    @include apply-font(label-md);
+    color: sys-var(color, text, base);
+    text-decoration: underline;
+    cursor: pointer;
+    width: 100%;
+  }
+
   &__operations {
     display: flex;
     align-items: center;
diff --git a/src/components/info-base/source/sourceCard/sourceCard.vue b/src/components/info-base/source/sourceCard/sourceCard.vue
index 924c791..db36597 100644
--- a/src/components/info-base/source/sourceCard/sourceCard.vue
+++ b/src/components/info-base/source/sourceCard/sourceCard.vue
@@ -17,6 +17,7 @@ import { sourceCardEmits, type SourceCardProps } from "./sourceCard";
 import {
   CollectAt,
   Source,
+  SourceCollectJob,
   SourceCollectJobForm,
   SourceCollectJobStatus,
   SourceType,
@@ -51,6 +52,16 @@ const sourceType = computedAsync(
   undefined,
   { shallow: false }
 );
+const latestOpenJob = computedAsync(
+  async (): Promise<SourceCollectJob | null> => {
+    if (sourceData.value?.id) {
+      return await SourceCollectJob.getLatestOpenBySource(sourceData.value.id);
+    }
+    return null;
+  },
+  null,
+  { shallow: true }
+);
 const collectAtModel = ref<CollectAt | null>(null);
 const configPopupOpen = ref(false);
 const configModel = ref("");
@@ -112,6 +123,7 @@ const onRunNow = async () => {
     closed_at: null,
     status: SourceCollectJobStatus.PENDING,
     state: {},
+    config: {},
   });
   const job = await form.create();
   router.push(`/sources/collectJob/${job.id}`);
@@ -126,6 +138,18 @@ const onConfirmCollectAt = () => {
   sourceData.value!.save();
 };
 
+const onCheckOpenJob = () => {
+  if (latestOpenJob.value) {
+    router.push(`/sources/collectJob/${latestOpenJob.value.id}`);
+  }
+};
+
+const onCardClick = () => {
+  if (sourceData.value) {
+    router.push(`/sources/${sourceData.value.id}`);
+  }
+};
+
 const onConfirmConfig = () => {
   try {
     const parsedConfig = JSON.parse(configModel.value);
@@ -140,7 +164,7 @@ const onConfirmConfig = () => {
 </script>
 
 <template>
-  <div v-if="sourceData" class="source-card">
+  <div v-if="sourceData" class="source-card" @click="onCardClick">
     <div class="source-card__metadata">
       <div class="source-card__left">
         <span class="source-card__type">{{ sourceData.type }}</span>
@@ -148,6 +172,7 @@ const onConfirmConfig = () => {
           :modelValue="nicknameModel"
           type="inline"
           placeholder="Click to edit nickname"
+          @click.stop
           @update:modelValue="
             (value: string) => {
               nicknameModel = value;
@@ -168,6 +193,7 @@ const onConfirmConfig = () => {
       class="source-card__collect-at"
       label="Will run collect at"
       layout="inline"
+      @click.stop
     >
       <InkPicker
         :modelValue="sourceData.collect_at"
@@ -201,7 +227,15 @@ const onConfirmConfig = () => {
       <pre class="source-card__config-text">{{ formattedConfig }}</pre>
     </div>
 
-    <div class="source-card__operations">
+    <div
+      v-if="latestOpenJob"
+      class="source-card__open-job"
+      @click.stop="onCheckOpenJob"
+    >
+      {{ t("source.checkOpenJob") }}
+    </div>
+
+    <div class="source-card__operations" @click.stop>
       <div class="source-card__operations-left">
         <InkDoubleCheck
           :title="t('source.deleteConfirmTitle')"
diff --git a/src/components/info-base/source/sourceCollectJobCard/sourceCollectJobCard.md b/src/components/info-base/source/sourceCollectJobCard/sourceCollectJobCard.md
new file mode 100644
index 0000000..95d3411
--- /dev/null
+++ b/src/components/info-base/source/sourceCollectJobCard/sourceCollectJobCard.md
@@ -0,0 +1,25 @@
+# sourceCollectJobCard
+
+## Rationale
+
+Provides a card component to display source collect job information in a list.
+
+## Goals
+
+Display collect job details in a consistent, clickable card format.
+
+## Specification
+
+- Shows job ID, status (color-coded), and creation date
+- Clickable card that navigates to job detail
+- Compact layout for list display
+
+## Implementation
+
+### Props
+
+- `job` (`SourceCollectJob`, required): The job data to display
+
+### Events
+
+- `click()`: Emitted when card is clicked
diff --git a/src/components/info-base/source/sourceCollectJobCard/sourceCollectJobCard.scss b/src/components/info-base/source/sourceCollectJobCard/sourceCollectJobCard.scss
new file mode 100644
index 0000000..8e8f570
--- /dev/null
+++ b/src/components/info-base/source/sourceCollectJobCard/sourceCollectJobCard.scss
@@ -0,0 +1,57 @@
+.source-collect-job-card {
+  display: flex;
+  flex-direction: column;
+  gap: sys-var(space, xs);
+  padding: sys-var(space, md);
+  border: 1px solid sys-var(color, border, base);
+  box-sizing: border-box;
+  cursor: pointer;
+  transition: background-color 0.2s;
+
+  &:hover {
+    background-color: sys-var(color, surface, hover);
+  }
+
+  &__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  &__id {
+    @include apply-font(label-lg, mono);
+    color: sys-var(color, text, base);
+  }
+
+  &__status {
+    @include apply-font(label-md);
+    color: sys-var(color, text, base);
+
+    &.status--pending {
+      color: sys-var(color, warning, base);
+    }
+
+    &.status--running {
+      color: sys-var(color, info, base);
+    }
+
+    &.status--finished {
+      color: sys-var(color, success, base);
+    }
+
+    &.status--failed {
+      color: sys-var(color, danger, base);
+    }
+  }
+
+  &__dates {
+    display: flex;
+    flex-direction: column;
+    gap: sys-var(space, xs);
+  }
+
+  &__date {
+    @include apply-font(label-sm);
+    color: sys-var(color, text, subtle);
+  }
+}
diff --git a/src/components/info-base/source/sourceCollectJobCard/sourceCollectJobCard.ts b/src/components/info-base/source/sourceCollectJobCard/sourceCollectJobCard.ts
new file mode 100644
index 0000000..1af7adc
--- /dev/null
+++ b/src/components/info-base/source/sourceCollectJobCard/sourceCollectJobCard.ts
@@ -0,0 +1,15 @@
+import type { PropType } from "vue";
+import { SourceCollectJob } from "@/business/info-base/source";
+
+// --- Props ---
+export const sourceCollectJobCardProps = {
+  job: {
+    type: Object as PropType<SourceCollectJob>,
+    required: true,
+  },
+} as const;
+
+// --- Emits ---
+export const sourceCollectJobCardEmits = {
+  click: () => true,
+} as const;
diff --git a/src/components/info-base/source/sourceCollectJobCard/sourceCollectJobCard.vue b/src/components/info-base/source/sourceCollectJobCard/sourceCollectJobCard.vue
new file mode 100644
index 0000000..a53f9a6
--- /dev/null
+++ b/src/components/info-base/source/sourceCollectJobCard/sourceCollectJobCard.vue
@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { useI18n } from "vue-i18n";
+import { sourceCollectJobCardProps, sourceCollectJobCardEmits } from "./sourceCollectJobCard";
+import { SourceCollectJobStatus } from "@/business/info-base/source";
+import dayjs from "dayjs";
+
+const props = defineProps(sourceCollectJobCardProps);
+const emit = defineEmits(sourceCollectJobCardEmits);
+const { t } = useI18n();
+
+// --- computed ---
+const statusColor = computed(() => {
+  switch (props.job.status) {
+    case SourceCollectJobStatus.PENDING:
+      return "status--pending";
+    case SourceCollectJobStatus.RUNNING:
+      return "status--running";
+    case SourceCollectJobStatus.FINISHED:
+      return "status--finished";
+    case SourceCollectJobStatus.FAILED:
+      return "status--failed";
+    default:
+      return "";
+  }
+});
+
+// --- methods ---
+const formatDate = (date: Date | null) => {
+  if (!date) return t("collectJob.notAvailable");
+  return dayjs(date).format("YYYY-MM-DD HH:mm:ss");
+};
+
+const onClick = () => {
+  emit("click");
+};
+</script>
+
+<template>
+  <div class="source-collect-job-card" @click="onClick">
+    <div class="source-collect-job-card__header">
+      <span class="source-collect-job-card__id">#{{ job.id }}</span>
+      <span class="source-collect-job-card__status" :class="statusColor">
+        {{ job.status }}
+      </span>
+    </div>
+    <div class="source-collect-job-card__dates">
+      <span class="source-collect-job-card__date">
+        {{ t("collectJob.createdAt") }}: {{ formatDate(job.created_at) }}
+      </span>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped src="./sourceCollectJobCard.scss" />
diff --git a/src/components/info-base/source/sourceForm/sourceForm.md b/src/components/info-base/source/sourceForm/sourceForm.md
new file mode 100644
index 0000000..28044ea
--- /dev/null
+++ b/src/components/info-base/source/sourceForm/sourceForm.md
@@ -0,0 +1,26 @@
+# sourceForm
+
+## Rationale
+
+Provides a reusable form for editing source information including nickname, type, config, and collect schedule.
+
+## Goals
+
+Allow users to edit source configuration in a consistent way across different views.
+
+## Specification
+
+- Pure form component with v-model support
+- Provides all fields: nickname, type, config (InkJsonEditor), collect schedule
+- No save button - parent component handles submission
+- Supports both create and edit modes
+
+## Implementation
+
+### Props
+
+- `modelValue` (`Source | SourceForm`, required): The source data object
+
+### Events
+
+- `update:modelValue(source: Source | SourceForm)`: Emitted when form data changes
diff --git a/src/components/info-base/source/sourceForm/sourceForm.scss b/src/components/info-base/source/sourceForm/sourceForm.scss
new file mode 100644
index 0000000..98d5fbe
--- /dev/null
+++ b/src/components/info-base/source/sourceForm/sourceForm.scss
@@ -0,0 +1,10 @@
+.source-form {
+  display: flex;
+  flex-direction: column;
+  gap: sys-var(space, md);
+
+  &__collect-at-placeholder {
+    @include apply-font(body-md);
+    color: sys-var(color, text, subtle);
+  }
+}
diff --git a/src/components/info-base/source/sourceForm/sourceForm.ts b/src/components/info-base/source/sourceForm/sourceForm.ts
new file mode 100644
index 0000000..394cf20
--- /dev/null
+++ b/src/components/info-base/source/sourceForm/sourceForm.ts
@@ -0,0 +1,15 @@
+import type { PropType } from "vue";
+import { Source, SourceForm } from "@/business/info-base/source";
+
+// --- Props ---
+export const sourceFormProps = {
+  modelValue: {
+    type: Object as PropType<Source | SourceForm>,
+    required: true,
+  },
+} as const;
+
+// --- Emits ---
+export const sourceFormEmits = {
+  "update:modelValue": (source: Source | SourceForm) => true,
+} as const;
diff --git a/src/components/info-base/source/sourceForm/sourceForm.vue b/src/components/info-base/source/sourceForm/sourceForm.vue
new file mode 100644
index 0000000..fb41134
--- /dev/null
+++ b/src/components/info-base/source/sourceForm/sourceForm.vue
@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import { computed, ref, watch } from "vue";
+import {
+  InkInput,
+  InkJsonEditor,
+  InkField,
+  InkSwitch,
+  InkDropdown,
+  type DropdownOption,
+  InkForm,
+} from "@inkcre/web-design";
+import collectAtForm from "@/components/info-base/source/collectAtForm/collectAtForm.vue";
+import { sourceFormProps, sourceFormEmits } from "./sourceForm";
+import { CollectAt, SourceType } from "@/business/info-base/source";
+import { useI18n } from "vue-i18n";
+
+const props = defineProps(sourceFormProps);
+const emit = defineEmits(sourceFormEmits);
+const { t } = useI18n();
+
+// --- data ---
+const sourceTypes = ref<(DropdownOption & SourceType)[]>([]);
+
+// --- computed ---
+const toggleAutoCollect = computed({
+  get: () => props.modelValue.collect_at != null,
+  set: (value: boolean) => {
+    if (value) {
+      if (props.modelValue.collect_at == null) {
+        props.modelValue.collect_at = CollectAt.parse({});
+      }
+    } else {
+      props.modelValue.collect_at = null;
+    }
+  },
+});
+
+const configJson = computed<string>({
+  get: () => {
+    return JSON.stringify(props.modelValue.config, null, 2);
+  },
+  set: (newVal: string) => {
+    props.modelValue.config = JSON.parse(newVal);
+  },
+});
+
+const currentSourceType = computed(() => {
+  return sourceTypes.value.find((type) => type.value === props.modelValue.type);
+});
+
+// --- methods ---
+const loadSourceTypes = async (): Promise<(DropdownOption & SourceType)[]> => {
+  const result = await SourceType.getAll();
+  return result.map((type) => ({
+    label: type.id,
+    value: type.id,
+    ...type,
+  }));
+};
+</script>
+
+<template>
+  <InkForm class="source-form">
+    <InkInput
+      v-model="modelValue.nickname"
+      :label="t('source.nickname')"
+      editable
+    />
+
+    <InkDropdown
+      v-model="modelValue.type"
+      v-model:options="sourceTypes"
+      :refresher="loadSourceTypes"
+      :label="t('source.type')"
+    />
+
+    <InkField :label="t('source.collectAt')" prop="collect_at">
+      <template #label-right>
+        <div class="flex flex-row flex-1 justify-end">
+          <InkSwitch v-model="toggleAutoCollect" size="xs" />
+        </div>
+      </template>
+      <collectAtForm
+        v-if="props.modelValue.collect_at != null"
+        v-model="props.modelValue.collect_at"
+      />
+      <!-- <span v-else class="source-form__collect-at-placeholder">
+        {{ t("source.collectAtOff") }}
+      </span> -->
+    </InkField>
+
+    <InkJsonEditor
+      v-model="configJson"
+      :schema="currentSourceType?.config_schema"
+      :label="t('source.config')"
+      :placeholder="t('source.configPlaceholder')"
+      :rows="6"
+    />
+  </InkForm>
+</template>
+
+<style lang="scss" scoped src="./sourceForm.scss" />
diff --git a/src/locales/en.json b/src/locales/en.json
index 356014f..6b2470d 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -20,7 +20,30 @@
   },
   "source": {
     "deleteConfirmTitle": "Delete Source",
-    "deleteConfirmMessage": "Are you sure you want to delete this source? This action cannot be undone."
+    "deleteConfirmMessage": "Are you sure you want to delete this source? This action cannot be undone.",
+    "detailTitle": "Source Details",
+    "type": "Type",
+    "nickname": "Nickname",
+    "id": "ID",
+    "collectAt": "Collect At",
+    "config": "Config",
+    "collectJobs": "Collect Jobs",
+    "newJob": "New Job",
+    "newJobTitle": "Create New Collect Job",
+    "newJobDescription": "Create a new collect job for this source. The job will be queued and executed as soon as possible.",
+    "createJob": "Create Job",
+    "editConfig": "Edit Config",
+    "delete": "Delete",
+    "noJobs": "No collect jobs found",
+    "nicknamePlaceholder": "Click to edit nickname",
+    "collectAtNotSet": "click to set",
+    "collectAtConfig": "Config source auto collecting",
+    "collectAtOff": "Auto collect off.",
+    "configPlaceholder": "Enter JSON config...",
+    "prevPage": "Previous",
+    "nextPage": "Next",
+    "pageInfo": "Page {page} of {total}",
+    "checkOpenJob": "Check open collect job"
   },
   "extension": {
     "installNew": "Install Extension",
@@ -40,6 +63,7 @@
     "startedAt": "Started At",
     "closedAt": "Closed At",
     "state": "State",
+    "config": "Config",
     "logs": "Logs",
     "noLogs": "No logs available",
     "stop": "Stop",
diff --git a/src/locales/zh-CN.json b/src/locales/zh-CN.json
index d159f48..f787ab6 100644
--- a/src/locales/zh-CN.json
+++ b/src/locales/zh-CN.json
@@ -20,7 +20,30 @@
   },
   "source": {
     "deleteConfirmTitle": "删除数据源",
-    "deleteConfirmMessage": "您确定要删除此数据源吗？此操作无法撤销。"
+    "deleteConfirmMessage": "您确定要删除此数据源吗？此操作无法撤销。",
+    "detailTitle": "数据源详情",
+    "type": "类型",
+    "nickname": "昵称",
+    "id": "ID",
+    "collectAt": "采集时间",
+    "config": "配置",
+    "collectJobs": "采集任务",
+    "newJob": "新建任务",
+    "newJobTitle": "创建新采集任务",
+    "newJobDescription": "为此数据源创建新的采集任务。该任务将被加入队列并尽快执行。",
+    "createJob": "创建任务",
+    "editConfig": "编辑配置",
+    "delete": "删除",
+    "noJobs": "未找到采集任务",
+    "nicknamePlaceholder": "点击编辑昵称",
+    "collectAtNotSet": "点击设置",
+    "collectAtConfig": "配置数据源自动采集",
+    "collectAtOff": "自动采集已关闭。",
+    "configPlaceholder": "输入 JSON 配置...",
+    "prevPage": "上一页",
+    "nextPage": "下一页",
+    "pageInfo": "第 {page} 页，共 {total} 页",
+    "checkRunningJob": "查看运行中的采集任务"
   },
   "extension": {
     "installNew": "安装扩展",
@@ -39,6 +62,7 @@
     "startedAt": "开始时间",
     "closedAt": "结束时间",
     "state": "状态信息",
+    "config": "配置",
     "logs": "日志",
     "noLogs": "暂无日志",
     "stop": "停止",
diff --git a/src/router.ts b/src/router.ts
index 06a1e1d..f577878 100644
--- a/src/router.ts
+++ b/src/router.ts
@@ -3,6 +3,7 @@ import type { Router, RouteLocationNormalizedLoaded } from "vue-router";
 import type { InkRouter } from "@inkcre/web-design";
 import start from "@/views/start/start.vue";
 import sources from "@/views/sources/sources.vue";
+import source from "@/views/sources/source/source.vue";
 import sourceCollectJob from "@/views/sources/sourceCollectJob/sourceCollectJob.vue";
 import extensions from "@/views/extensions/extensions.vue";
 import { computed } from "vue";
@@ -25,6 +26,11 @@ const router = createRouter({
       name: "SourceCollectJob",
       component: sourceCollectJob,
     },
+    {
+      path: "/sources/:id",
+      name: "Source",
+      component: source,
+    },
     {
       path: "/extensions",
       name: "Extensions",
diff --git a/src/views/sources/source/source.md b/src/views/sources/source/source.md
new file mode 100644
index 0000000..b95eadb
--- /dev/null
+++ b/src/views/sources/source/source.md
@@ -0,0 +1,40 @@
+# Source Detail View
+
+## Rationale
+
+Provides a detailed view of a single source with its configuration and associated collect jobs.
+
+## Goals
+
+- Display comprehensive source information
+- Allow inline editing of nickname and config
+- List all collect jobs for this source with pagination
+- Provide actions to create new jobs and delete the source
+
+## Specification
+
+### Layout
+
+- Two-panel layout (left: source details, right: collect jobs)
+- Similar to SourceCollectJob view layout
+
+### Left Panel (Source Details)
+
+- Source type, nickname, and ID
+- Inline nickname editing (using InkInput)
+- Config display and editing (using InkJsonEditor with save button)
+- Collect at schedule display
+- Delete action button
+
+### Right Panel (Collect Jobs List)
+
+- "New Job" button at the top (full width)
+- List of collect jobs with pagination
+- Each job shows: ID, status, created date, and clickable link to job detail
+- Pagination controls at the bottom
+
+### Actions
+
+- New Job: Opens center popup with title, newCollectJob component, and cancel/create buttons
+- Delete: Deletes the source and navigates back to sources list
+- Save Config: Saves the edited configuration
diff --git a/src/views/sources/source/source.scss b/src/views/sources/source/source.scss
new file mode 100644
index 0000000..c34c93b
--- /dev/null
+++ b/src/views/sources/source/source.scss
@@ -0,0 +1,183 @@
+.source-view {
+  display: flex;
+  flex-direction: row;
+  gap: sys-var(space, xl);
+  flex: 1;
+  min-width: 0;
+  align-items: flex-start;
+  box-sizing: border-box;
+  padding: sys-var(space, lg) sys-var(space, xl);
+  background: sys-var(color, surface, base);
+
+  &__loading {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex: 1;
+  }
+
+  &__details {
+    display: flex;
+    flex-direction: column;
+    gap: sys-var(space, md);
+    padding: sys-var(space, lg);
+    border: 1px solid sys-var(color, border, base);
+    box-sizing: border-box;
+    min-width: 280px;
+    max-width: 40%;
+    max-height: 100%;
+  }
+
+  &__jobs {
+    display: flex;
+    flex-direction: column;
+    gap: sys-var(space, md);
+    padding: sys-var(space, lg);
+    border: 1px solid sys-var(color, border, base);
+    box-sizing: border-box;
+    align-self: stretch;
+    flex: 1;
+    max-width: 60%;
+    min-width: 360px;
+  }
+}
+
+.details {
+  &__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: sys-var(space, md);
+  }
+
+  &__title {
+    @include apply-font(title-sm);
+    color: sys-var(color, text, base);
+    margin: 0;
+  }
+
+  &__actions {
+    display: flex;
+    gap: sys-var(space, sm);
+    justify-content: flex-end;
+    align-self: stretch;
+    margin-top: sys-var(space, md);
+  }
+}
+
+.jobs {
+  &__header {
+    display: flex;
+    flex-direction: column;
+    gap: sys-var(space, md);
+  }
+
+  &__title {
+    @include apply-font(title-sm);
+    color: sys-var(color, text, base);
+    margin: 0;
+  }
+
+  &__loading {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex: 1;
+  }
+
+  &__empty {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: sys-var(space, xl);
+    @include apply-font(body-lg);
+    color: sys-var(color, text, subtle);
+  }
+
+  &__list {
+    display: flex;
+    flex-direction: column;
+    gap: sys-var(space, sm);
+    overflow-y: auto;
+    flex: 1;
+  }
+
+  &__pagination {
+    display: flex;
+    gap: sys-var(space, md);
+    justify-content: center;
+    align-items: center;
+    margin-top: sys-var(space, md);
+  }
+
+  &__pagination-info {
+    @include apply-font(label-md);
+    color: sys-var(color, text, base);
+  }
+}
+
+.collect-at {
+  &__title {
+    @include apply-font(title-sm);
+    color: sys-var(color, text, base);
+    margin-bottom: sys-var(space, md);
+  }
+
+  &__actions {
+    display: flex;
+    gap: sys-var(space, sm);
+    justify-content: flex-end;
+    align-self: stretch;
+    margin-top: sys-var(space, md);
+  }
+}
+
+.config-editor {
+  display: flex;
+  flex-direction: column;
+  gap: sys-var(space, md);
+  padding: sys-var(space, lg);
+  background: sys-var(color, surface, base);
+  border-radius: sys-var(radius, md);
+  box-shadow: sys-var(shadow, lg);
+  min-width: 400px;
+  max-width: 600px;
+
+  &__title {
+    @include apply-font(title-sm);
+    color: sys-var(color, text, base);
+    margin: 0;
+  }
+
+  &__actions {
+    display: flex;
+    gap: sys-var(space, sm);
+    justify-content: flex-end;
+    align-self: stretch;
+  }
+}
+
+.new-job-popup {
+  display: flex;
+  flex-direction: column;
+  gap: sys-var(space, md);
+  padding: sys-var(space, lg);
+  background: sys-var(color, surface, base);
+  border-radius: sys-var(radius, md);
+  box-shadow: sys-var(shadow, lg);
+  min-width: 400px;
+  max-width: 500px;
+
+  &__title {
+    @include apply-font(title-sm);
+    color: sys-var(color, text, base);
+    margin: 0;
+  }
+
+  &__actions {
+    display: flex;
+    gap: sys-var(space, sm);
+    justify-content: flex-end;
+    align-self: stretch;
+  }
+}
diff --git a/src/views/sources/source/source.ts b/src/views/sources/source/source.ts
new file mode 100644
index 0000000..579f105
--- /dev/null
+++ b/src/views/sources/source/source.ts
@@ -0,0 +1,6 @@
+// --- Types ---
+export interface PaginationState {
+  page: number;
+  pageSize: number;
+  total: number;
+}
diff --git a/src/views/sources/source/source.vue b/src/views/sources/source/source.vue
new file mode 100644
index 0000000..927a85c
--- /dev/null
+++ b/src/views/sources/source/source.vue
@@ -0,0 +1,255 @@
+<script setup lang="ts">
+import { computed, ref, watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { useI18n } from "vue-i18n";
+import { useAsyncState } from "@vueuse/core";
+import { useEAsyncState } from "@/composables/use-async-state";
+import {
+  InkLoading,
+  InkButton,
+  InkDoubleCheck,
+  InkPopup,
+} from "@inkcre/web-design";
+import sourceForm from "@/components/info-base/source/sourceForm/sourceForm.vue";
+import collectJobForm from "@/components/info-base/source/collectJobForm/collectJobForm.vue";
+import sourceCollectJobCard from "@/components/info-base/source/sourceCollectJobCard/sourceCollectJobCard.vue";
+import {
+  Source,
+  SourceCollectJob,
+  SourceCollectJobForm,
+  SourceCollectJobStatus,
+} from "@/business/info-base/source";
+import dayjs from "dayjs";
+import type { PaginationState } from "@/views/sources/source/source";
+
+const route = useRoute();
+const router = useRouter();
+const { t } = useI18n();
+
+// --- data ---
+const sourceId = computed(() => Number(route.params.id));
+const newJobPopupOpen = ref(false);
+const jobForm = ref<SourceCollectJobForm>(
+  SourceCollectJobForm.parse({
+    source: sourceId.value,
+    created_at: new Date(),
+    started_at: null,
+    closed_at: null,
+    status: SourceCollectJobStatus.PENDING,
+    state: {},
+    config: {},
+  })
+);
+
+const pagination = ref<PaginationState>({
+  page: 1,
+  pageSize: 10,
+  total: 0,
+});
+
+const { state: source, execute: refetchSource } = useEAsyncState(
+  () => Source.get(sourceId.value),
+  null,
+  { immediate: true, useLast: true }
+);
+
+const {
+  state: collectJobs,
+  execute: refetchCollectJobs,
+  isLoading: collectJobsLoading,
+} = useAsyncState(
+  async () => {
+    const offset = (pagination.value.page - 1) * pagination.value.pageSize;
+    const result = await SourceCollectJob.getBySource(sourceId.value, {
+      limit: pagination.value.pageSize,
+      offset,
+      order: "desc",
+    });
+    pagination.value.total = result.count;
+    return result.data;
+  },
+  [],
+  { shallow: false }
+);
+
+// --- computed ---
+const totalPages = computed(() =>
+  Math.ceil(pagination.value.total / pagination.value.pageSize)
+);
+
+const canGoPrev = computed(() => pagination.value.page > 1);
+const canGoNext = computed(() => pagination.value.page < totalPages.value);
+
+// --- methods ---
+const formatDate = (date: Date | null) => {
+  if (!date) return t("collectJob.notAvailable");
+  return dayjs(date).format("YYYY-MM-DD HH:mm:ss");
+};
+
+const onSaveSource = async () => {
+  await source.value!.save();
+};
+
+const onDelete = async () => {
+  await source.value!.delete();
+  router.push("/sources");
+};
+
+const onNewJob = () => {
+  // Reset form
+  jobForm.value = SourceCollectJobForm.parse({
+    source: sourceId.value,
+    created_at: new Date(),
+    started_at: null,
+    closed_at: null,
+    status: SourceCollectJobStatus.PENDING,
+    state: {},
+    config: {},
+  });
+  newJobPopupOpen.value = true;
+};
+
+const onCreateJob = async () => {
+  try {
+    const job = await jobForm.value.create();
+    newJobPopupOpen.value = false;
+    router.push(`/sources/collectJob/${job.id}`);
+  } catch (error) {
+    console.error("Failed to create job:", error);
+    // TODO: Show error toast to user
+  }
+};
+
+const goToJob = (jobId: number) => {
+  router.push(`/sources/collectJob/${jobId}`);
+};
+
+const goToPrevPage = () => {
+  if (canGoPrev.value) {
+    pagination.value.page--;
+  }
+};
+
+const goToNextPage = () => {
+  if (canGoNext.value) {
+    pagination.value.page++;
+  }
+};
+
+// --- watchers ---
+watch(
+  () => pagination.value.page,
+  () => {
+    refetchCollectJobs();
+  }
+);
+</script>
+
+<template>
+  <main class="source-view">
+    <div v-if="!source" class="source-view__loading">
+      <InkLoading />
+    </div>
+    <template v-else-if="source">
+      <!-- Left Section: Source Details -->
+      <section class="source-view__details">
+        <div class="details__header">
+          <h2 class="details__title">{{ t("source.detailTitle") }}</h2>
+        </div>
+
+        <sourceForm v-model="source" class="overflow-y-auto" />
+
+        <div class="details__actions">
+          <InkDoubleCheck
+            :title="t('source.deleteConfirmTitle')"
+            :message="t('source.deleteConfirmMessage')"
+            :confirmText="t('common.confirm')"
+            :cancelText="t('common.cancel')"
+            @confirm="onDelete"
+          >
+            <InkButton :text="t('source.delete')" type="danger" size="sm" />
+          </InkDoubleCheck>
+          <InkButton
+            :text="t('common.save')"
+            type="primary"
+            size="sm"
+            @click="onSaveSource"
+          />
+        </div>
+      </section>
+
+      <!-- Right Section: Collect Jobs -->
+      <section class="source-view__jobs">
+        <div class="jobs__header">
+          <h3 class="jobs__title">{{ t("source.collectJobs") }}</h3>
+          <InkButton
+            :text="t('source.newJob')"
+            type="primary"
+            size="md"
+            class="w-full"
+            @click="onNewJob"
+          />
+        </div>
+
+        <div v-if="collectJobsLoading" class="jobs__loading">
+          <InkLoading />
+        </div>
+        <div v-else-if="collectJobs.length === 0" class="jobs__empty">
+          <span>{{ t("source.noJobs") }}</span>
+        </div>
+        <div class="jobs__list">
+          <sourceCollectJobCard
+            v-for="job in collectJobs"
+            :key="job.id"
+            :job="job"
+            @click="goToJob(job.id)"
+          />
+        </div>
+
+        <div v-if="totalPages > 1" class="jobs__pagination">
+          <InkButton
+            :text="t('source.prevPage')"
+            type="subtle"
+            size="sm"
+            :disabled="!canGoPrev"
+            @click="goToPrevPage"
+          />
+          <span class="jobs__pagination-info">
+            {{
+              t("source.pageInfo", { page: pagination.page, total: totalPages })
+            }}
+          </span>
+          <InkButton
+            :text="t('source.nextPage')"
+            type="subtle"
+            size="sm"
+            :disabled="!canGoNext"
+            @click="goToNextPage"
+          />
+        </div>
+      </section>
+    </template>
+  </main>
+
+  <!-- New Job Popup -->
+  <InkPopup v-model:open="newJobPopupOpen" position="center">
+    <div class="new-job-popup">
+      <h3 class="new-job-popup__title">{{ t("source.newJobTitle") }}</h3>
+      <collectJobForm v-model="jobForm" />
+      <div class="new-job-popup__actions">
+        <InkButton
+          :text="t('common.cancel')"
+          type="subtle"
+          @click="newJobPopupOpen = false"
+        />
+        <InkButton
+          :text="t('common.confirm')"
+          type="primary"
+          @click="onCreateJob"
+        />
+      </div>
+    </div>
+  </InkPopup>
+</template>
+
+<style lang="scss" scoped src="./source.scss" />
diff --git a/src/views/sources/sourceCollectJob/sourceCollectJob.vue b/src/views/sources/sourceCollectJob/sourceCollectJob.vue
index 5da9daf..b443078 100644
--- a/src/views/sources/sourceCollectJob/sourceCollectJob.vue
+++ b/src/views/sources/sourceCollectJob/sourceCollectJob.vue
@@ -21,11 +21,14 @@ const jobId = computed(() => Number(route.params.id));
 const pollingInterval = computed(() => (isRunning.value ? 1500 : 5000));
 const jobPollingIntervalId = ref<ReturnType<typeof setInterval> | null>(null);
 
-const { state: job, execute: refetchJob } = useEAsyncState(
-  () => SourceCollectJob.get(jobId.value),
-  null,
-  { immediate: true, useLast: true }
-);
+const {
+  state: job,
+  isLoading: jobLoading,
+  execute: refetchJob,
+} = useEAsyncState(() => SourceCollectJob.get(jobId.value), null, {
+  immediate: true,
+  useLast: true,
+});
 
 const {
   state: source,
@@ -160,9 +163,15 @@ onUnmounted(() => {
         </InkField>
 
         <InkField :label="t('collectJob.status')">
-          <span class="metadata__value" :class="statusColor">
-            {{ job.status }}
-          </span>
+          <div class="flex items-center gap-2">
+            <span class="metadata__value" :class="statusColor">
+              {{ job.status }}
+            </span>
+            <span
+              class="i-mdi-refresh"
+              :class="{ 'animate-spin': jobLoading }"
+            />
+          </div>
         </InkField>
 
         <InkField :label="t('collectJob.source')">