feat: unify desktop selects through shared facade

.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

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

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;

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"