diff --git a/.github/workflows/verify.yml b/.github/workflows/verify.yml
index 77194666..94339b84 100644
--- a/.github/workflows/verify.yml
+++ b/.github/workflows/verify.yml
@@ -37,7 +37,7 @@ jobs:
         uses: actions/checkout@v6
         with:
           repository: ${{ github.repository_owner }}/design-system
-          ref: 910456901dda74da4d5b0320cd03d36ad18650b0
+          ref: 4a82fce41f89f1a55b6b02cdb54f7a4e9ce9d84d
           path: design-system
 
       - name: Set up Node
@@ -77,7 +77,7 @@ jobs:
         uses: actions/checkout@v6
         with:
           repository: ${{ github.repository_owner }}/design-system
-          ref: 910456901dda74da4d5b0320cd03d36ad18650b0
+          ref: 4a82fce41f89f1a55b6b02cdb54f7a4e9ce9d84d
           path: design-system
 
       - name: Set up Node
@@ -141,7 +141,7 @@ jobs:
         uses: actions/checkout@v6
         with:
           repository: ${{ github.repository_owner }}/design-system
-          ref: 910456901dda74da4d5b0320cd03d36ad18650b0
+          ref: 4a82fce41f89f1a55b6b02cdb54f7a4e9ce9d84d
           path: design-system
 
       - name: Set up Node
@@ -205,7 +205,7 @@ jobs:
         uses: actions/checkout@v6
         with:
           repository: ${{ github.repository_owner }}/design-system
-          ref: 910456901dda74da4d5b0320cd03d36ad18650b0
+          ref: 4a82fce41f89f1a55b6b02cdb54f7a4e9ce9d84d
           path: design-system
 
       - name: Set up Node
@@ -249,7 +249,7 @@ jobs:
         uses: actions/checkout@v6
         with:
           repository: ${{ github.repository_owner }}/design-system
-          ref: 910456901dda74da4d5b0320cd03d36ad18650b0
+          ref: 4a82fce41f89f1a55b6b02cdb54f7a4e9ce9d84d
           path: design-system
 
       - name: Set up Node
diff --git a/apps/desktop/renderer/src/goals/ProjectBoard.tsx b/apps/desktop/renderer/src/goals/ProjectBoard.tsx
index c23c08f1..86893321 100644
--- a/apps/desktop/renderer/src/goals/ProjectBoard.tsx
+++ b/apps/desktop/renderer/src/goals/ProjectBoard.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useRef, useState } from "react";
 import { Button, Drawer, Input } from "antd";
+import { Select } from "@fullstack-ai-infra/ui";
 import {
   CalendarDays,
   ChevronLeft,
@@ -419,31 +420,26 @@ export function ProjectBoard({
             t("project.unscheduled")
           )}
         </div>
-        <select
+        <Select<GoalWorkItem["status"]>
           aria-label={t("project.changeStatus", { title: item.title })}
           className="owb-project-select"
           value={item.status}
           disabled={busy}
-          onChange={(event) =>
+          options={STATUSES.map((status) => ({ value: status, label: t(`project.status.${status}`) }))}
+          onChange={(status) =>
             void save(
               items.map((existing) =>
                 existing.taskId === item.taskId
                   ? {
                       ...existing,
-                      status: event.target.value as GoalWorkItem["status"],
+                      status,
                     }
                   : existing,
               ),
               detail.goal.updatedAt,
             )
           }
-        >
-          {STATUSES.map((status) => (
-            <option key={status} value={status}>
-              {t(`project.status.${status}`)}
-            </option>
-          ))}
-        </select>
+        />
         <div className="owb-project-card__execution">
           {execution(item)}
           <Button
@@ -577,47 +573,38 @@ export function ProjectBoard({
           allowClear
           onChange={(event) => setQuery(event.target.value)}
         />
-        <select
+        <Select<string>
           className="owb-project-select owb-project-owner-filter"
           aria-label={t("project.filterOwner")}
           value={owner}
-          onChange={(event) => setOwner(event.target.value)}
-        >
-          <option value="all">{t("project.allOwners")}</option>
-          <option value="unassigned">{t("project.unassigned")}</option>
-          {ownerIds.map((id) => (
-            <option value={`position:${id}`} key={id}>
-              {own(positionNames, id) ?? id}
-            </option>
-          ))}
-        </select>
-        <select
+          options={[
+            { value: "all", label: t("project.allOwners") },
+            { value: "unassigned", label: t("project.unassigned") },
+            ...ownerIds.map((id) => ({ value: `position:${id}`, label: own(positionNames, id) ?? id })),
+          ]}
+          onChange={setOwner}
+        />
+        <Select<string>
           className="owb-project-select owb-project-status-filter"
           aria-label={t("project.filterStatus")}
           value={statusFilter}
-          onChange={(event) => setStatusFilter(event.target.value)}
-        >
-          <option value="all">{t("project.allStatuses")}</option>
-          {STATUSES.map((status) => (
-            <option value={status} key={status}>
-              {t(`project.status.${status}`)}
-            </option>
-          ))}
-          <option value="overdue">{t("project.overdue")}</option>
-        </select>
-        <select
+          options={[
+            { value: "all", label: t("project.allStatuses") },
+            ...STATUSES.map((status) => ({ value: status, label: t(`project.status.${status}`) })),
+            { value: "overdue", label: t("project.overdue") },
+          ]}
+          onChange={setStatusFilter}
+        />
+        <Select<string>
           className="owb-project-select owb-project-priority-filter"
           aria-label={t("project.filterPriority")}
           value={priorityFilter}
-          onChange={(event) => setPriorityFilter(event.target.value)}
-        >
-          <option value="all">{t("project.allPriorities")}</option>
-          {PRIORITIES.map((priority) => (
-            <option value={priority} key={priority}>
-              {t(`project.priority.${priority}`)}
-            </option>
-          ))}
-        </select>
+          options={[
+            { value: "all", label: t("project.allPriorities") },
+            ...PRIORITIES.map((priority) => ({ value: priority, label: t(`project.priority.${priority}`) })),
+          ]}
+          onChange={setPriorityFilter}
+        />
         <Button
           type="primary"
           icon={<Plus size={14} aria-hidden="true" />}
@@ -895,60 +882,52 @@ export function ProjectBoard({
               </label>
               <label>
                 <span>{t("project.assignee")}</span>
-                <select
+                <Select<string>
                   className="owb-project-select"
+                  aria-label={t("project.assignee")}
                   value={editor.item.assigneePositionId ?? ""}
-                  onChange={(event) =>
+                  disabled={busy}
+                  options={[
+                    { value: "", label: t("project.unassigned") },
+                    ...ownerIds.map((id) => ({ value: id, label: own(positionNames, id) ?? id })),
+                  ]}
+                  onChange={(assigneePositionId) =>
                     patch({
-                      assigneePositionId: event.target.value || undefined,
+                      assigneePositionId: assigneePositionId || undefined,
                     })
                   }
-                >
-                  <option value="">{t("project.unassigned")}</option>
-                  {ownerIds.map((id) => (
-                    <option key={id} value={id}>
-                      {own(positionNames, id) ?? id}
-                    </option>
-                  ))}
-                </select>
+                />
               </label>
               <div className="owb-project-form__row">
                 <label>
                   <span>{t("project.taskStatus")}</span>
-                  <select
+                  <Select<GoalWorkItem["status"]>
                     className="owb-project-select"
+                    aria-label={t("project.taskStatus")}
                     value={editor.item.status}
-                    onChange={(event) =>
+                    disabled={busy}
+                    options={STATUSES.map((status) => ({ value: status, label: t(`project.status.${status}`) }))}
+                    onChange={(status) =>
                       patch({
-                        status: event.target.value as GoalWorkItem["status"],
+                        status,
                       })
                     }
-                  >
-                    {STATUSES.map((status) => (
-                      <option key={status} value={status}>
-                        {t(`project.status.${status}`)}
-                      </option>
-                    ))}
-                  </select>
+                  />
                 </label>
                 <label>
                   <span>{t("project.priority")}</span>
-                  <select
+                  <Select<GoalWorkItem["priority"]>
                     className="owb-project-select"
+                    aria-label={t("project.priority")}
                     value={editor.item.priority}
-                    onChange={(event) =>
+                    disabled={busy}
+                    options={PRIORITIES.map((priority) => ({ value: priority, label: t(`project.priority.${priority}`) }))}
+                    onChange={(priority) =>
                       patch({
-                        priority: event.target
-                            .value as GoalWorkItem["priority"],
+                        priority,
                       })
                     }
-                  >
-                    {PRIORITIES.map((priority) => (
-                      <option key={priority} value={priority}>
-                        {t(`project.priority.${priority}`)}
-                      </option>
-                    ))}
-                  </select>
+                  />
                 </label>
               </div>
               <div className="owb-project-form__row">
diff --git a/apps/desktop/renderer/src/goals/project-board.css b/apps/desktop/renderer/src/goals/project-board.css
index cfe67b18..9f12a609 100644
--- a/apps/desktop/renderer/src/goals/project-board.css
+++ b/apps/desktop/renderer/src/goals/project-board.css
@@ -99,26 +99,16 @@
   max-width: 240px;
 }
 .owb-project-select {
-  height: 32px;
-  padding: 4px 26px 4px 9px;
-  border: 1px solid var(--ui-border);
-  border-radius: 6px;
-  background: var(--ui-surface);
-  color: var(--ui-foreground);
-  font: inherit;
-  font-size: 12px;
   min-width: 0;
   max-width: 100%;
 }
-.owb-project-select:focus-visible,
+.owb-project-select .ant-select-selector {
+  font-size: 12px;
+}
 .owb-project-board button:focus-visible {
   outline: 2px solid var(--ui-primary);
   outline-offset: 2px;
 }
-.owb-project-select:disabled {
-  opacity: 0.55;
-  cursor: not-allowed;
-}
 .owb-project-owner-filter {
   max-width: 170px;
 }
@@ -541,7 +531,6 @@
 }
 .owb-project-form .owb-project-select {
   width: 100%;
-  height: 36px;
 }
 .owb-project-form__row {
   display: grid;
diff --git a/apps/desktop/renderer/src/turns/TurnThread.tsx b/apps/desktop/renderer/src/turns/TurnThread.tsx
index ad211c5e..1f0aae28 100644
--- a/apps/desktop/renderer/src/turns/TurnThread.tsx
+++ b/apps/desktop/renderer/src/turns/TurnThread.tsx
@@ -5,6 +5,7 @@ import { useConversationCopy } from "../locales/conversation";
 import type { ConversationViewport } from "./conversation-memory";
 import { MessageActions, OperatorMessage } from "./message-actions";
 import { EmptyState, useT } from "@roleweave/ui";
+import { Select } from "@fullstack-ai-infra/ui";
 import { useEngineLabel } from "./engine-select";
 import { EngineIcon } from "./engine-icon";
 import type { TurnRecord } from "./types";
@@ -295,10 +296,15 @@ function ApprovalCard({
             onChange={(event) => setReason(event.target.value)}
           />
           <div className="owb-turn__approval-actions">
-            {request.scopeAllowed?.includes("run") ? <select aria-label={t("apr.scopeTitle")} value={scope} disabled={disabled} onChange={(event) => setScope(event.target.value as "once" | "run")}>
-              <option value="once">{t("apr.scope.once")}</option>
-              <option value="run">{t("apr.scope.run")}</option>
-            </select> : null}
+            {request.scopeAllowed?.includes("run") ? <Select<"once" | "run">
+              aria-label={t("apr.scopeTitle")}
+              className="owb-turn__approval-scope"
+              size="small"
+              value={scope}
+              disabled={disabled}
+              options={[{ value: "once", label: t("apr.scope.once") }, { value: "run", label: t("apr.scope.run") }]}
+              onChange={setScope}
+            /> : null}
             <button
               type="button"
               className="owb-turn__approval-grant"
diff --git a/apps/desktop/renderer/test/project-board.test.tsx b/apps/desktop/renderer/test/project-board.test.tsx
index ff560cf1..b440dbed 100644
--- a/apps/desktop/renderer/test/project-board.test.tsx
+++ b/apps/desktop/renderer/test/project-board.test.tsx
@@ -6,10 +6,11 @@ import {
   waitFor,
   within,
 } from "@testing-library/react";
-import { describe, expect, it, vi } from "vitest";
+import { afterEach, describe, expect, it, vi } from "vitest";
 import type { GoalDetail, GoalWorkItem } from "@roleweave/shared/goals";
 import type { OwbBridge } from "../src/owb";
 import { ProjectBoard } from "../src/goals/ProjectBoard";
+import { visibleSelectOptions } from "./select-helper";
 
 const task: GoalWorkItem = {
   taskId: "task-one",
@@ -94,8 +95,22 @@ function defer<T>() {
   });
   return { promise, resolve };
 }
+function chooseOption(control: HTMLElement, name: string) {
+  fireEvent.mouseDown(control);
+  const option = visibleSelectOptions().find(
+    (candidate) => candidate.textContent?.trim() === name,
+  );
+  if (!option) {
+    throw new Error(`Select has no visible option named "${name}"`);
+  }
+  fireEvent.click(option);
+}
 
 describe("ProjectBoard", () => {
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
   it("creates an assigned task with dates and guards duplicate submission until refresh", async () => {
     const saved = defer<{ status: number; body: { goalId: string } }>();
     const updateGoal = vi.fn().mockReturnValue(saved.promise);
@@ -108,9 +123,7 @@ describe("ProjectBoard", () => {
     fireEvent.change(drawer.getByLabelText("任务说明"), {
       target: { value: "Make plans visible" },
     });
-    fireEvent.change(drawer.getByLabelText("负责人"), {
-      target: { value: "engineer" },
-    });
+    chooseOption(drawer.getByLabelText("负责人"), "Engineer");
     fireEvent.change(drawer.getByLabelText("开始日期"), {
       target: { value: "2026-09-22" },
     });
@@ -180,9 +193,9 @@ describe("ProjectBoard", () => {
     const control = screen.getByRole("combobox", {
       name: "变更任务状态：Ship board",
     });
-    fireEvent.change(control, { target: { value: "blocked" } });
+    chooseOption(control, "阻塞");
     await screen.findByText("Save failed");
-    expect(control).toHaveValue("todo");
+    expect(control.closest(".ant-select")).toHaveTextContent("待办");
     expect(updateGoal).toHaveBeenCalledWith(
       expect.objectContaining({ workItems: [{ ...task, status: "blocked" }] }),
     );
@@ -253,8 +266,10 @@ describe("ProjectBoard", () => {
     context.rerender(<ProjectBoard {...context.props} detail={complete} />);
     await screen.findByText("Agent 执行完成");
     expect(
-      screen.getByRole("combobox", { name: "变更任务状态：Ship board" }),
-    ).toHaveValue("todo");
+      screen
+        .getByRole("combobox", { name: "变更任务状态：Ship board" })
+        .closest(".ant-select"),
+    ).toHaveTextContent("待办");
     expect(context.updateGoal).not.toHaveBeenCalled();
   });
 
@@ -290,7 +305,7 @@ describe("ProjectBoard", () => {
 
   it.each(["all", "unassigned"])(
     "filters the supported position ID %s separately from special filter options",
-    (positionId) => {
+    async (positionId) => {
       setup(
         detail([
           {
@@ -314,11 +329,7 @@ describe("ProjectBoard", () => {
         ]),
       );
       const filter = screen.getByRole("combobox", { name: "筛选负责人" });
-      const assignedOption = within(filter).getByRole("option", {
-        name: positionId,
-        exact: true,
-      }) as HTMLOptionElement;
-      fireEvent.change(filter, { target: { value: assignedOption.value } });
+      chooseOption(filter, positionId);
       expect(
         screen.getByRole("article", { name: "Assigned work" }),
       ).toBeInTheDocument();
@@ -329,11 +340,7 @@ describe("ProjectBoard", () => {
         screen.queryByRole("article", { name: "Unassigned work" }),
       ).not.toBeInTheDocument();
 
-      const unassignedOption = within(filter).getByRole("option", {
-        name: "未分配",
-        exact: true,
-      }) as HTMLOptionElement;
-      fireEvent.change(filter, { target: { value: unassignedOption.value } });
+      chooseOption(filter, "未分配");
       expect(
         screen.getByRole("article", { name: "Unassigned work" }),
       ).toBeInTheDocument();
@@ -341,16 +348,12 @@ describe("ProjectBoard", () => {
         screen.queryByRole("article", { name: "Assigned work" }),
       ).not.toBeInTheDocument();
 
-      const allOption = within(filter).getByRole("option", {
-        name: "全部负责人",
-        exact: true,
-      }) as HTMLOptionElement;
-      fireEvent.change(filter, { target: { value: allOption.value } });
+      chooseOption(filter, "全部负责人");
       expect(screen.getAllByRole("article")).toHaveLength(3);
     },
   );
 
-  it("filters tasks and shows partial dates without inventing a duration", () => {
+  it("filters tasks and shows partial dates without inventing a duration", async () => {
     setup(
       detail([
         task,
@@ -364,20 +367,17 @@ describe("ProjectBoard", () => {
       ]),
     );
     const ownerFilter = screen.getByRole("combobox", { name: "筛选负责人" });
-    const designerOption = within(ownerFilter).getByRole("option", {
-      name: "Designer",
-      exact: true,
-    }) as HTMLOptionElement;
-    fireEvent.change(ownerFilter, { target: { value: designerOption.value } });
+    chooseOption(ownerFilter, "Designer");
     expect(
       screen.queryByRole("article", { name: "Ship board" }),
     ).not.toBeInTheDocument();
     expect(
       screen.getByRole("article", { name: "Design board" }),
     ).toBeInTheDocument();
-    fireEvent.change(screen.getByRole("combobox", { name: "筛选负责人" }), {
-      target: { value: "all" },
-    });
+    chooseOption(
+      screen.getByRole("combobox", { name: "筛选负责人" }),
+      "全部负责人",
+    );
     fireEvent.click(screen.getByRole("button", { name: "排期" }));
     expect(screen.getByText("开始：2026-09-22 · 截止未定")).toBeInTheDocument();
     expect(
@@ -449,21 +449,21 @@ describe("ProjectBoard", () => {
     );
     // Filter by status dropdown
     const statusFilter = screen.getByRole("combobox", { name: "筛选状态" });
-    fireEvent.change(statusFilter, { target: { value: "in_progress" } });
+    chooseOption(statusFilter, "进行中");
     expect(screen.getByRole("article", { name: "Task 2" })).toBeInTheDocument();
     expect(screen.queryByRole("article", { name: "Task 1" })).not.toBeInTheDocument();
     expect(screen.queryByRole("article", { name: "Task 3" })).not.toBeInTheDocument();
 
     // Filter by priority dropdown
-    fireEvent.change(statusFilter, { target: { value: "all" } });
+    chooseOption(statusFilter, "全部状态");
     const priorityFilter = screen.getByRole("combobox", { name: "筛选优先级" });
-    fireEvent.change(priorityFilter, { target: { value: "high" } });
+    chooseOption(priorityFilter, "高优先级");
     expect(screen.getByRole("article", { name: "Task 2" })).toBeInTheDocument();
     expect(screen.getByRole("article", { name: "Task 3" })).toBeInTheDocument();
     expect(screen.queryByRole("article", { name: "Task 1" })).not.toBeInTheDocument();
 
     // Interactive summary metric toggle
-    fireEvent.change(priorityFilter, { target: { value: "all" } });
+    chooseOption(priorityFilter, "全部优先级");
     const inProgressMetric = screen.getByRole("button", { name: /进行中/ });
     fireEvent.click(inProgressMetric);
     expect(screen.getByRole("article", { name: "Task 2" })).toBeInTheDocument();