Merge pull request #41 from Ontos-AI/staging

suguanYang · web-flow · commit d57f9dcbfd78 · 2026-05-25T16:29:25.000+08:00
Release 0525, ui fix
diff --git a/.env.example b/.env.example
@@ -5,7 +5,7 @@ NEXT_PUBLIC_API_URL=http://localhost:5005/api
 NEXT_PUBLIC_AUTH_BASE_URL=/api/auth
 BETTER_AUTH_URL=http://localhost:3000
 BETTER_AUTH_SECRET=replace-with-a-random-secret-at-least-32-characters
-DATABASE_URL=postgres://postgres:postgres@localhost:5432/knowhere_dashboard
+DATABASE_URL=postgres://root:root123@localhost:5432/Knowhere
 # Set this to true only for local/self-hosted PostgreSQL without SSL.
 # UNSAFE_DB_SSL_ENABLED=true
 BILLING_ENABLED=false
diff --git a/LOCALIZATION_GUIDE.md b/LOCALIZATION_GUIDE.md
@@ -398,9 +398,6 @@
 | Cost | 花费 | 表头 |
 | Status | 状态 | 表头 |
 | Type | 类型 | 表头 |
-| OCR | OCR | 表头 |
-| Yes | 是 | 是/否 |
-| No | 否 | 是/否 |
 | No results. | 暂无数据 | 空状态 |
 | Previous | 上一页 | 分页 |
 | Next | 下一页 | 分页 |
diff --git a/README.md b/README.md
@@ -13,42 +13,36 @@ Knowhere API Dashboard is the Next.js web application for managing Knowhere API
 - PostgreSQL for the dashboard auth and account database
 - A reachable Knowhere API backend
 
-## Local Setup
+## Local Development
 
-Install dependencies:
+Install dependencies and create your local environment file:
 
 ```bash
 pnpm install
+cp .env.example .env.local
 ```
 
-Create local environment configuration:
+Fill in the required values in `.env.local`. For most local work, the important values are:
 
-```bash
-cp .env.example .env.local
-```
+- `DATABASE_URL`: PostgreSQL database used by the dashboard.
+- `NEXT_PUBLIC_API_URL`: Knowhere API backend URL.
+- `NEXT_PUBLIC_APP_URL` and `BETTER_AUTH_URL`: usually `http://localhost:3000`.
+- `BETTER_AUTH_SECRET`: any random secret with at least 32 characters.
 
-Fill in the required values in `.env.local`, then start the development server:
+Start the development server:
 
 ```bash
 pnpm dev
 ```
 
 The app runs on `http://localhost:3000` by default.
 
-## Self-hosted Dashboard Flow
-
-For the combined open-source stack, start the dashboard migration/bootstrap step before the API service runs its Alembic migrations. The dashboard owns the Better Auth user/auth schema and provides the normal first-user registration flow.
-
-The default self-hosted flow is:
+## Self-hosted
 
-1. Start PostgreSQL, Redis, object storage, and other shared dependencies.
-2. Start the dashboard migration/bootstrap step so Better Auth tables exist.
-3. Start the API with standalone mode disabled, then run API migrations.
-4. Register or sign in through the dashboard with email and password, or use Resend-backed magic-link login when email delivery is configured.
-5. Create and manage API keys from the dashboard.
-6. Process jobs through the API/worker with dashboard billing disabled.
+For self-hosted deployment, use the combined stack in the dedicated repository:
+https://github.com/Ontos-AI/knowhere-self-hosted
 
-Use `BILLING_ENABLED=false` for the open-source self-hosted dashboard unless the matching paid billing endpoints are deployed and configured.
+This dashboard repository is useful when developing the web app directly. The self-hosted repository owns the end-to-end local stack and deployment instructions.
 
 ## Environment Variables
 
@@ -122,26 +116,3 @@ The image runs the standard Next.js Node server with `pnpm start`. Runtime confi
 The public workflow runs lint, type-check, tests, and build on pull requests and pushes to `main` and `staging`.
 
 This repository does not publish standalone public dashboard images. Public self-hosted image publishing is handled by the combined self-hosted release workflow.
-
-## Deployment
-
-Merging a pull request into `staging` or `main` triggers `.github/workflows/deploy.yml` through the branch push created by the merge. The workflow builds the dashboard image, pushes it to the configured AWS image registry, and updates the configured Kubernetes deployment with `kubectl set image`.
-
-DevOps must configure these GitHub repository secrets:
-
-| Name | Purpose |
-| --- | --- |
-| `AWS_ACCESS_KEY_ID` | AWS principal allowed to push images and update the cluster. |
-| `AWS_SECRET_ACCESS_KEY` | Secret key for the AWS principal. |
-| `AWS_EKS_PROD_CLUSTER_NAME` | Kubernetes cluster name used by `aws eks update-kubeconfig`. |
-| `AWS_EKS_PROD_REGION` | AWS region for the image registry and cluster. |
-| `DASHBOARD_IMAGE_REGISTRY` | Registry host, for example an AWS account registry host. |
-| `DASHBOARD_IMAGE_REPOSITORY` | Dashboard image repository path inside the registry. |
-| `DASHBOARD_KUBE_CONTAINER` | Container name inside the dashboard Deployment. |
-| `DASHBOARD_KUBE_DEPLOYMENT` | Dashboard Kubernetes Deployment name. |
-| `DASHBOARD_KUBE_NAMESPACE_STAGING` | Namespace updated when `staging` is deployed. |
-| `DASHBOARD_KUBE_NAMESPACE_PROD` | Namespace updated when `main` is deployed. |
-
-The AWS principal must be able to authenticate to the image registry, push the dashboard image, call `eks:DescribeCluster`, and update the target deployment. The cluster must be able to pull the pushed image.
-
-Runtime environment variables are still injected by the deployment platform, not by the Docker build. Because the container runs `pnpm db:generate` and `pnpm db:migrate` before `pnpm start`, the deployed pod must have `DATABASE_URL` and the required auth/app URL environment variables at startup. The container filesystem must allow writes to the app directory unless the migration generation step is moved out of container startup.
diff --git a/app/(dashboard)/usage/_components/usage-table.tsx b/app/(dashboard)/usage/_components/usage-table.tsx
@@ -30,7 +30,6 @@ export type UsageRecord = {
   fileType: string;
   model: string;
   pages: number;
-  ocr: boolean;
   status: string;
   statusKind: UsageStatusKind;
   duration: string;
@@ -53,6 +52,23 @@ type UsageTableProps = {
 };
 
 type PaginationItem = number | "ellipsis";
+type FileTypeTheme = {
+  readonly background: string;
+  readonly border: string;
+  readonly text: string;
+  readonly darkBackground: string;
+  readonly darkBorder: string;
+  readonly darkText: string;
+};
+
+type FileTypeBadgeStyle = React.CSSProperties & {
+  readonly "--file-type-background": string;
+  readonly "--file-type-border": string;
+  readonly "--file-type-text": string;
+  readonly "--file-type-dark-background": string;
+  readonly "--file-type-dark-border": string;
+  readonly "--file-type-dark-text": string;
+};
 
 const tableHeaders = [
   { key: "date", labelKey: "date", width: "210px" },
@@ -61,16 +77,19 @@ const tableHeaders = [
   { key: "type", labelKey: "type", width: "80px" },
   { key: "model", labelKey: "model", width: "144px" },
   { key: "pages", labelKey: "pages", width: "60px" },
-  { key: "ocr", labelKey: "ocr", width: "56px" },
   { key: "status", labelKey: "status", width: "80px" },
   { key: "duration", labelKey: "duration", width: "100px" },
   { key: "cost", labelKey: "cost", width: "120px" },
 ] as const;
 
-const tableGridTemplate = tableHeaders.map((header) => header.width).join(" ");
+const rowActionColumnWidth = "48px";
+const tableGridTemplate = [
+  ...tableHeaders.map((header) => header.width),
+  rowActionColumnWidth,
+].join(" ");
 const tableMinWidth = tableHeaders.reduce(
   (total, header) => total + Number.parseInt(header.width, 10),
-  0
+  Number.parseInt(rowActionColumnWidth, 10)
 );
 const tableScrollThumbWidth: number = 151;
 
@@ -79,58 +98,100 @@ const fileTypeColorMap = {
     background: "#fef2f2",
     border: "#ffe2e2",
     text: "#c10007",
+    darkBackground: "#450a0a",
+    darkBorder: "#7f1d1d",
+    darkText: "#fca5a5",
   },
   docx: {
     background: "#eff6ff",
     border: "#dbeafe",
     text: "#1447e6",
+    darkBackground: "#172554",
+    darkBorder: "#1d4ed8",
+    darkText: "#93c5fd",
   },
   jpg: {
     background: "#fdf4ff",
     border: "#fae8ff",
     text: "#a800b7",
+    darkBackground: "#4a044e",
+    darkBorder: "#86198f",
+    darkText: "#f0abfc",
   },
   jpeg: {
     background: "#fdf4ff",
     border: "#fae8ff",
     text: "#a800b7",
+    darkBackground: "#4a044e",
+    darkBorder: "#86198f",
+    darkText: "#f0abfc",
   },
   pptx: {
     background: "#fff7ed",
     border: "#ffedd4",
     text: "#ca3500",
+    darkBackground: "#431407",
+    darkBorder: "#9a3412",
+    darkText: "#fdba74",
   },
   xlsx: {
     background: "#ecfdf5",
     border: "#d0fae5",
     text: "#007a55",
+    darkBackground: "#052e16",
+    darkBorder: "#047857",
+    darkText: "#86efac",
   },
   csv: {
     background: "#ecfeff",
     border: "#cefafe",
     text: "#007595",
+    darkBackground: "#083344",
+    darkBorder: "#0e7490",
+    darkText: "#67e8f9",
   },
   png: {
     background: "#f5f3ff",
     border: "#ede9fe",
     text: "#7008e7",
+    darkBackground: "#2e1065",
+    darkBorder: "#6d28d9",
+    darkText: "#c4b5fd",
   },
   md: {
     background: "#f7fee7",
     border: "#ecfcca",
     text: "#497d00",
+    darkBackground: "#1a2e05",
+    darkBorder: "#4d7c0f",
+    darkText: "#bef264",
   },
   json: {
     background: "#fefce8",
     border: "#fef9c2",
     text: "#a65f00",
+    darkBackground: "#422006",
+    darkBorder: "#a16207",
+    darkText: "#fde68a",
   },
   txt: {
     background: "#eef2ff",
     border: "#e0e7ff",
     text: "#432dd7",
+    darkBackground: "#1e1b4b",
+    darkBorder: "#4338ca",
+    darkText: "#a5b4fc",
   },
-} as const;
+} satisfies Readonly<Record<string, FileTypeTheme>>;
+
+const buildFileTypeBadgeStyle = (theme: FileTypeTheme): FileTypeBadgeStyle => ({
+  "--file-type-background": theme.background,
+  "--file-type-border": theme.border,
+  "--file-type-text": theme.text,
+  "--file-type-dark-background": theme.darkBackground,
+  "--file-type-dark-border": theme.darkBorder,
+  "--file-type-dark-text": theme.darkText,
+});
 
 const buildPaginationItems = (page: number, pageCount: number): PaginationItem[] => {
   if (pageCount <= 6) {
@@ -310,6 +371,10 @@ export function UsageTable({
                   {header.key === "date" ? <ArrowUp className="h-3 w-3 text-[#9f9fa9]" /> : null}
                 </div>
               ))}
+              <div
+                aria-hidden="true"
+                className="sticky right-0 z-10 h-full border-l border-[#e4e4e7] bg-[#f4f4f5] dark:border-[#3f3f46] dark:bg-[#27272a]"
+              />
             </div>
 
             {data.length > 0 ? (
@@ -350,12 +415,8 @@ export function UsageTable({
                     </TableCell>
                     <TableCell>
                       <span
-                        className="inline-flex items-center border py-1 pl-[6px] pr-2 font-mono-display text-[18px] leading-6"
-                        style={{
-                          backgroundColor: fileTypeTheme.background,
-                          borderColor: fileTypeTheme.border,
-                          color: fileTypeTheme.text,
-                        }}
+                        className="inline-flex items-center border border-[var(--file-type-border)] bg-[var(--file-type-background)] px-[6px] font-mono-display text-[12px] leading-4 text-[var(--file-type-text)] dark:border-[var(--file-type-dark-border)] dark:bg-[var(--file-type-dark-background)] dark:text-[var(--file-type-dark-text)]"
+                        style={buildFileTypeBadgeStyle(fileTypeTheme)}
                       >
                         {formatFileTypeLabel(row.fileType)}
                       </span>
@@ -366,9 +427,6 @@ export function UsageTable({
                     <TableCell className="font-mono-display leading-4 text-[#3f3f46] dark:text-[#e4e4e7]">
                       {row.pages}
                     </TableCell>
-                    <TableCell className={row.ocr ? "text-[#00a63e]" : "text-[#e7000b]"}>
-                      {row.ocr ? t("yes") : t("no")}
-                    </TableCell>
                     <TableCell className="gap-1.5">
                       <StatusIcon statusKind={row.statusKind} />
                       <span
@@ -392,19 +450,21 @@ export function UsageTable({
 
                     <button
                       type="button"
-                      className="sticky right-0 z-10 col-[1/-1] row-start-1 flex h-10 w-12 items-center justify-center self-center justify-self-end border-l border-[#f4f4f5] bg-[#fafafa] text-[#ff8904] transition-colors hover:bg-[#fff7ed] disabled:cursor-not-allowed disabled:text-[#d4d4d8] dark:border-[#3f3f46] dark:bg-[#27272a] dark:hover:bg-[#3f3f46]"
+                      className="sticky right-0 z-10 flex h-10 w-12 items-center justify-center border-l border-[#f4f4f5] bg-[#fafafa] text-[#ff8904] transition-colors hover:bg-[#fff7ed] disabled:cursor-not-allowed disabled:text-[#d4d4d8] dark:border-[#3f3f46] dark:bg-[#27272a] dark:hover:bg-[#3f3f46] sm:h-[22px] lg:h-8"
                       onClick={() => onDownloadResult?.(row.jobId, row.resultUrl)}
                       disabled={!row.resultUrl}
                       aria-label={row.resultUrl ? t("download") : row.status}
                     >
-                      <Image
-                        src="/icons/usage/row-action.svg"
-                        alt=""
-                        aria-hidden
-                        width={14.33}
-                        height={14.33}
-                        className="h-[14.33px] w-[14.33px]"
-                      />
+                      <span className="flex size-6 items-center justify-center overflow-hidden rounded-full">
+                        <Image
+                          src="/icons/usage/row-action.svg"
+                          alt=""
+                          aria-hidden
+                          width={16}
+                          height={16}
+                          className="h-4 w-4"
+                        />
+                      </span>
                     </button>
                   </div>
                 );
diff --git a/app/(dashboard)/usage/_hooks/use-jobs.ts b/app/(dashboard)/usage/_hooks/use-jobs.ts
@@ -134,7 +134,6 @@ function mapJobToUsageRecord(job: JobResponse): UsageRecord {
     fileType: fileType,
     model: job.model || (job.result_metadata?.model as string | undefined) || "-",
     pages: (job.result_metadata?.pages as number | undefined) || 0,
-    ocr: job.ocr_enabled ?? (job.result_metadata?.ocr as boolean | undefined) ?? false,
     status: statusInfo.label,
     statusKind: statusInfo.kind,
     duration: job.duration_seconds
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
@@ -106,9 +106,6 @@
     "cost": "Cost",
     "status": "Status",
     "type": "Type",
-    "ocr": "OCR",
-    "yes": "Yes",
-    "no": "No",
     "noResults": "No results.",
     "previous": "Previous",
     "next": "Next",
diff --git a/i18n/locales/zh.json b/i18n/locales/zh.json
@@ -106,9 +106,6 @@
     "cost": "花费",
     "status": "状态",
     "type": "类型",
-    "ocr": "OCR",
-    "yes": "是",
-    "no": "否",
     "noResults": "暂无数据",
     "previous": "上一页",
     "next": "下一页",
diff --git a/lib/usage-table-contract.test.ts b/lib/usage-table-contract.test.ts
diff --git a/public/icons/usage/row-action.svg b/public/icons/usage/row-action.svg
