Add source detail view with collect jobs list and enhance SourceCard navigation

.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
 

.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 }}

.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

.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}

AGENTS.md

@@ -1,42 +1,50 @@
 # 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
 - `styles/`
 - `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

docs/todo.md

@@ -19,3 +19,5 @@
 - [ ] 时区转换有问题
 - [x] LogsViewer 的滚动到底部实现有问题
 - [x] pending job 不应该 poll logs
+- [ ] InkPagination new type
+- [ ] Source 不是 info-base 的一部分

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",

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;

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

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);
+}

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;

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" />