@zaip-ai/cli 1.0.7 → 1.0.8

package/templates/.agents/dashboard/modules/operations/src/react/TaskDetailsDialog.tsx

@@ -10,29 +10,35 @@ export function TaskDetailsDialog({
   locale = "pt-BR",
   onClose,
   onOpenTrace,
+  summary = false,
+  summaryRunCount = null,
 }: {
   detail: TaskDetailProjection;
-  operations: OperationsProjection;
+  operations: {
+    readonly runs: readonly OperationsProjection["runs"][number][];
+    readonly decisions: readonly OperationsProjection["decisions"][number][];
+  };
   locale?: OperationsLocale;
   onClose: () => void;
   onOpenTrace: (taskId: string) => void;
+  summary?: boolean;
+  /** Exact count supplied by the compact card projection, when available. */
+  summaryRunCount?: number | null;
 }) {
   const copy = taskDetailsCopy(locale);
   const runs = operations.runs.filter((run) => run.task_id === detail.task.id);
   const decisions = operations.decisions.filter(
     (decision) => decision.scope_type === "change" && decision.scope_id === detail.task.change_id,
   );
-  const operationalDurations = runs
-    .filter((run) => run.phase === "execution" && run.parent_run_id == null)
-    .flatMap((run) => {
-      const durationMs = operationalDurationMs(run);
-      return durationMs === null ? [] : [durationMs];
-    });
-  const duration =
-    operationalDurations.length === 0
-      ? null
-      : operationalDurations.reduce((total, durationMs) => total + durationMs, 0);
-  const tokens = runs.reduce((total, run) => total + (run.usage.total.tokens.total ?? 0), 0);
+  const telemetry = detail.task.telemetry
+    ? {
+        durationMs: detail.task.telemetry.duration_ms,
+        tokens: detail.task.telemetry.tokens,
+        costBrl: detail.task.telemetry.cost_brl,
+      }
+    : recoverExactTelemetry(runs);
+  const hasSummarySpecId = detail.task.spec_id !== null && detail.task.spec_id.trim() !== "";
+  const hasChangeId = detail.task.change_id.trim() !== "";
   return createPortal(
     <div className="operations-dialog-backdrop">
       <section aria-label={copy.aria} aria-modal="true" className="operations-dialog" role="dialog">
@@ -50,40 +56,71 @@ export function TaskDetailsDialog({
           <dl className="operations-detail-grid">
             <Detail label={copy.status} value={statusLabel(detail.task.status, locale)} />
             <Detail label={copy.risk} value={riskLabel(detail.task.risk, locale)} />
-            <Detail label="SPEC" value={detail.task.spec_id ?? "Task-first"} />
-            <Detail label="Change" value={detail.task.change_id} />
-            <Detail label="Runs" value={String(runs.length)} />
-            <Detail label={copy.duration} value={formatOperationDuration(duration, locale)} />
-            <Detail label="Tokens" value={formatCompactNumber(tokens || null, locale)} />
+            {!summary || hasSummarySpecId ? (
+              <Detail label="SPEC" value={detail.task.spec_id ?? "Task-first"} />
+            ) : null}
+            {!summary || hasChangeId ? <Detail label="Change" value={detail.task.change_id} /> : null}
+            {!summary || summaryRunCount !== null ? (
+              <Detail label="Runs" value={String(summary ? summaryRunCount : runs.length)} />
+            ) : null}
+            <Detail label={copy.duration} value={formatOperationDuration(telemetry.durationMs, locale)} />
+            <Detail
+              label="Tokens"
+              value={
+                telemetry.tokens === null
+                  ? locale === "pt-BR"
+                    ? "Indisponível"
+                    : "Unavailable"
+                  : formatCompactNumber(telemetry.tokens, locale)
+              }
+            />
+            <Detail
+              label={locale === "pt-BR" ? "Custo" : "Cost"}
+              value={
+                telemetry.costBrl === null
+                  ? locale === "pt-BR"
+                    ? "Indisponível"
+                    : "Unavailable"
+                  : new Intl.NumberFormat(locale, { style: "currency", currency: "BRL" }).format(
+                      telemetry.costBrl,
+                    )
+              }
+            />
             <Detail label={copy.updated} value={formatDateTime(detail.task.updated_at, locale)} />
           </dl>
-          <section>
-            <h3>{copy.acceptanceCriteria}</h3>
-            <div className="operations-tags">
-              {detail.task.acceptance_ids.map((id) => (
-                <span key={id}>{id}</span>
-              ))}
-            </div>
-          </section>
-          <section>
-            <h3>{copy.decisions}</h3>
-            {decisions.length === 0 ? (
-              <p>{copy.noDecisions}</p>
-            ) : (
-              decisions.map((decision) => (
-                <p key={decision.id}>
-                  <strong>{decision.origin}:</strong> {decision.title}
-                </p>
-              ))
-            )}
-          </section>
-          <section>
-            <h3>{copy.description}</h3>
-            <pre>{detail.body}</pre>
-          </section>
+          {!summary || detail.task.acceptance_ids.length > 0 ? (
+            <section>
+              <h3>{copy.acceptanceCriteria}</h3>
+              <div className="operations-tags">
+                {detail.task.acceptance_ids.map((id) => (
+                  <span key={id}>{id}</span>
+                ))}
+              </div>
+            </section>
+          ) : null}
+          {!summary ? (
+            <section>
+              <h3>{copy.decisions}</h3>
+              {decisions.length === 0 ? (
+                <p>{copy.noDecisions}</p>
+              ) : (
+                decisions.map((decision) => (
+                  <p key={decision.id}>
+                    <strong>{decision.origin}:</strong> {decision.title}
+                  </p>
+                ))
+              )}
+            </section>
+          ) : null}
+          {!summary && detail.body ? (
+            <section>
+              <h3>{copy.description}</h3>
+              <pre>{detail.body}</pre>
+            </section>
+          ) : null}
         </div>
         <footer>
-          <span>{detail.artifact_path}</span>
+          {!summary && detail.artifact_path ? <span>{detail.artifact_path}</span> : null}
           <button onClick={() => onOpenTrace(detail.task.id)} type="button">
             {copy.openTraceability}
           </button>
@@ -94,6 +131,26 @@ export function TaskDetailsDialog({
   );
 }
 
+function recoverExactTelemetry(runs: readonly OperationsProjection["runs"][number][]) {
+  const rootExecutionRuns = runs.filter(
+    (run) => run.phase === "execution" && run.parent_run_id == null,
+  );
+  return {
+    durationMs:
+      rootExecutionRuns.length === 0 || rootExecutionRuns.some((run) => operationalDurationMs(run) === null)
+        ? null
+        : rootExecutionRuns.reduce((total, run) => total + (operationalDurationMs(run) ?? 0), 0),
+    tokens:
+      runs.length === 0 || runs.some((run) => run.usage.total.tokens.total === null)
+        ? null
+        : runs.reduce((total, run) => total + (run.usage.total.tokens.total ?? 0), 0),
+    costBrl:
+      runs.length === 0 || runs.some((run) => run.usage.total.cost.brl === null)
+        ? null
+        : runs.reduce((total, run) => total + (run.usage.total.cost.brl ?? 0), 0),
+  };
+}
+
 export function taskDetailsCopy(locale: OperationsLocale) {
   return locale === "pt-BR"
     ? {

package/templates/.agents/dashboard/modules/operations/src/react/UnifiedWorkBoard.priority.test.ts

@@ -0,0 +1,19 @@
+import { describe, expect, it } from "vitest";
+import { mergeManualWorkOrder, sortWorkItems } from "./UnifiedWorkBoard.js";
+
+describe("UnifiedWorkBoard priority path", () => {
+  const item = (id: string, rank: number | null, createdAt = "2026-08-04T10:00:00.000Z") =>
+    ({ kind: "task", row: { id, manual_order: rank, updated_at: createdAt } }) as never;
+
+  it("uses optimistic ordering without a projection rebuild", () => {
+    const sorted = sortWorkItems([item("TASK-B", null), item("TASK-A", 0)], ["TASK-B", "TASK-A"]);
+    expect(sorted.map((entry) => entry.row.id)).toEqual(["TASK-B", "TASK-A"]);
+  });
+
+  it("only replaces slots in the moved column", () => {
+    const global = [item("PRD-1", 0), item("TASK-A", 1), item("TASK-B", 2)];
+    expect(
+      mergeManualWorkOrder(global, [global[1]!, global[2]!], [global[2]!, global[1]!]),
+    ).toEqual(["PRD-1", "TASK-B", "TASK-A"]);
+  });
+});

package/templates/.agents/dashboard/modules/operations/src/react/UnifiedWorkBoard.tsx

@@ -13,6 +13,7 @@ import { formatCardCreatedAt } from "./format-card-created-at.js";
 import { formatRoundedDuration } from "./format-rounded-duration.js";
 import { MacroPlanningDialog } from "./MacroPlanningDialog.js";
 import { type OperationsLocale, riskLabel } from "./status-labels.js";
+import { TaskDetailsDialog } from "./TaskDetailsDialog.js";
 import { taskTotals } from "./TaskBoard.js";
 import { taskOrigin } from "./task-origin.js";
 import { useCurrentTime } from "./use-current-time.js";
@@ -36,23 +37,39 @@ type WorkItem =
   | { kind: "prd" | "spec"; row: MacroProjection };
 
 export function UnifiedWorkBoard({
+  allPrds,
   allSpecs,
   allTasks,
+  boardTotals,
+  boardKindTotals,
+  boardStates,
   changes,
   locale,
   onOpenDocument,
   onOpenTask,
+  onPriorityChange,
+  onLoadMore,
+  onTypeChange,
   prds,
   runs,
   specs,
   tasks,
 }: {
+  allPrds: readonly MacroProjection[];
   allSpecs: readonly MacroProjection[];
   allTasks: readonly DashboardTaskProjection[];
+  boardTotals?: Partial<Record<WorkStage, number>> | undefined;
+  boardKindTotals?:
+    | Partial<Record<WorkStage, { all: number; task: number; prd: number; spec: number }>>
+    | undefined;
+  boardStates?: Partial<Record<WorkStage, { loading: boolean; error: string | null }>> | undefined;
   changes: readonly ChangeProjection[];
   locale: OperationsLocale;
   onOpenDocument: (kind: "prd" | "spec", id: string) => void;
   onOpenTask: (taskId: string) => Promise<boolean>;
+  onPriorityChange: (itemIds: readonly string[]) => Promise<void>;
+  onLoadMore?: ((stage: WorkStage) => void) | undefined;
+  onTypeChange?: ((value: WorkTypeFilter) => void) | undefined;
   prds: readonly MacroProjection[];
   runs: readonly RunProjection[];
   specs: readonly MacroProjection[];
@@ -62,18 +79,29 @@ export function UnifiedWorkBoard({
   const [typeFilter, setTypeFilter] = useState<WorkTypeFilter>("all");
   const [selectedStage, setSelectedStage] = useState<WorkStage | null>(null);
   const [selectedMacro, setSelectedMacro] = useState<MacroProjection | null>(null);
+  const [selectedTask, setSelectedTask] = useState<DashboardTaskProjection | null>(null);
   const [query, setQuery] = useState("");
-  const totalsByTask = useMemo(() => taskTotals(runs, tasks), [runs, tasks]);
-  const items = useMemo(
+  const [draggedId, setDraggedId] = useState<string | null>(null);
+  const [optimisticOrder, setOptimisticOrder] = useState<readonly string[] | null>(null);
+  // Card telemetry comes from the compact per-Task projection.  Do not scan the
+  // complete Run collection when a card opens; absent compact telemetry remains
+  // unavailable instead of being reconstructed from a partial page of Runs.
+  const totalsByTask = useMemo(() => taskTotals([], tasks), [tasks]);
+  const allItems = useMemo(
     () =>
       sortWorkItems(
         [
-          ...prds.map((row): WorkItem => ({ kind: "prd", row })),
-          ...specs.map((row): WorkItem => ({ kind: "spec", row })),
-          ...tasks.map((row): WorkItem => ({ kind: "task", row })),
-        ].filter((item) => isWorkItemVisible(item, typeFilter)),
+          ...allPrds.map((row): WorkItem => ({ kind: "prd", row })),
+          ...allSpecs.map((row): WorkItem => ({ kind: "spec", row })),
+          ...allTasks.map((row): WorkItem => ({ kind: "task", row })),
+        ],
+        optimisticOrder,
       ),
-    [prds, specs, tasks, typeFilter],
+    [allPrds, allSpecs, allTasks, optimisticOrder],
+  );
+  const items = useMemo(
+    () => allItems.filter((item) => isWorkItemVisible(item, typeFilter)),
+    [allItems, typeFilter],
   );
   const progressByMacro = useMemo(
     () =>
@@ -88,12 +116,19 @@ export function UnifiedWorkBoard({
       : items.filter((item) => itemStage(item, allTasks) === selectedStage);
   const openItem = (item: WorkItem) => {
     setSelectedStage(null);
-    if (item.kind === "task") void onOpenTask(item.row.id);
+    if (item.kind === "task") setSelectedTask(item.row);
     else setSelectedMacro(item.row);
   };
   return (
     <section className="operations-unified-work">
-      <WorkTypeFilters locale={locale} onChange={setTypeFilter} value={typeFilter} />
+      <WorkTypeFilters
+        locale={locale}
+        onChange={(value) => {
+          setTypeFilter(value);
+          onTypeChange?.(value);
+        }}
+        value={typeFilter}
+      />
       <section
         aria-label={locale === "pt-BR" ? "Kanban de trabalho" : "Work Kanban"}
         className="operations-board operations-work-board"
@@ -103,6 +138,7 @@ export function UnifiedWorkBoard({
           return (
             <WorkColumn
               changes={changes}
+              globalItems={allItems}
               items={rows}
               key={stage}
               locale={locale}
@@ -111,9 +147,30 @@ export function UnifiedWorkBoard({
                 setQuery("");
                 setSelectedStage(stage);
               }}
+              onLoadMore={onLoadMore === undefined ? undefined : () => onLoadMore(stage)}
               onOpenItem={openItem}
+              onPriorityChange={async (nextOrder) => {
+                const previous = optimisticOrder;
+                setOptimisticOrder(nextOrder);
+                try {
+                  await onPriorityChange(nextOrder);
+                } catch {
+                  setOptimisticOrder(previous);
+                }
+              }}
+              onDragEnd={() => setDraggedId(null)}
+              onDragStart={setDraggedId}
+              draggedId={draggedId}
               progressByMacro={progressByMacro}
               stage={stage}
+              totalItems={
+                typeFilter === "all"
+                  ? (boardKindTotals?.[stage]?.all ?? boardTotals?.[stage] ?? rows.length)
+                  : typeFilter === "task" || typeFilter === "prd" || typeFilter === "spec"
+                    ? (boardKindTotals?.[stage]?.[typeFilter] ?? rows.length)
+                    : rows.length
+              }
+              state={boardStates?.[stage]}
               totalsByTask={totalsByTask}
             />
           );
@@ -146,10 +203,31 @@ export function UnifiedWorkBoard({
           tasks={allTasks}
         />
       ) : null}
+      {selectedTask ? (
+        <TaskDetailsDialog
+          detail={{ task: selectedTask, body: "", artifact_path: selectedTask.artifact_path }}
+          locale={locale}
+          onClose={() => setSelectedTask(null)}
+          onOpenTrace={(taskId) => {
+            setSelectedTask(null);
+            void onOpenTask(taskId);
+          }}
+          operations={{ decisions: [], runs }}
+          summary
+          summaryRunCount={exactTaskRunCount(selectedTask)}
+        />
+      ) : null}
     </section>
   );
 }
 
+function exactTaskRunCount(task: DashboardTaskProjection): number | null {
+  const runCount = (task as DashboardTaskProjection & { run_count?: unknown }).run_count;
+  return typeof runCount === "number" && Number.isInteger(runCount) && runCount >= 0
+    ? runCount
+    : null;
+}
+
 export function WorkTypeFilters({
   locale,
   onChange,
@@ -197,26 +275,46 @@ export function WorkTypeFilters({
 
 function WorkColumn({
   changes,
+  globalItems,
   items,
+  totalItems,
+  state,
   locale,
   nowMs,
   onOpenColumn,
+  onLoadMore,
   onOpenItem,
+  onPriorityChange,
+  onDragEnd,
+  onDragStart,
+  draggedId,
   progressByMacro,
   stage,
   totalsByTask,
 }: {
   changes: readonly ChangeProjection[];
+  globalItems: readonly WorkItem[];
   items: readonly WorkItem[];
+  totalItems: number;
+  state: { loading: boolean; error: string | null } | undefined;
   locale: OperationsLocale;
   nowMs: number;
   onOpenColumn: () => void;
+  onLoadMore?: (() => void) | undefined;
   onOpenItem: (item: WorkItem) => void;
+  onPriorityChange: (itemIds: readonly string[]) => Promise<void>;
+  onDragEnd: () => void;
+  onDragStart: (id: string) => void;
+  draggedId: string | null;
   progressByMacro: ReadonlyMap<string, MacroWorkProgress>;
   stage: WorkStage;
   totalsByTask: ReturnType<typeof taskTotals>;
 }) {
-  const { hasMore, sentinelRef, visibleCount } = useInfiniteColumn(items.length);
+  const { hasMore, sentinelRef, visibleCount } = useInfiniteColumn(
+    items.length,
+    totalItems,
+    onLoadMore,
+  );
   return (
     <article className={`operations-column is-${stage}`}>
       <header>
@@ -224,16 +322,16 @@ function WorkColumn({
           {workStageLabel(stage, locale)}
         </button>
         <button
-          aria-label={`${items.length} — ${workStageLabel(stage, locale)}`}
+          aria-label={`${totalItems} — ${workStageLabel(stage, locale)}`}
           className="operations-column-count"
           onClick={onOpenColumn}
           type="button"
         >
-          {items.length}
+          {totalItems}
         </button>
       </header>
       <div className="operations-column-body">
-        {items.slice(0, visibleCount).map((item) => (
+        {items.slice(0, visibleCount).map((item, index) => (
           <WorkCard
             changes={changes}
             item={item}
@@ -241,17 +339,52 @@ function WorkColumn({
             locale={locale}
             nowMs={nowMs}
             onOpen={() => onOpenItem(item)}
+            onMove={(direction) => {
+              const next = index + direction;
+              if (next < 0 || next >= items.length) return;
+              const reordered = [...items];
+              [reordered[index], reordered[next]] = [reordered[next]!, reordered[index]!];
+              void onPriorityChange(mergeManualWorkOrder(globalItems, items, reordered));
+            }}
+            onDrop={() => {
+              const from = items.findIndex((candidate) => candidate.row.id === draggedId);
+              if (from < 0 || from === index) return;
+              const reordered = [...items];
+              const [moved] = reordered.splice(from, 1);
+              if (moved === undefined) return;
+              reordered.splice(index, 0, moved);
+              void onPriorityChange(mergeManualWorkOrder(globalItems, items, reordered));
+            }}
+            onDragEnd={onDragEnd}
+            onDragStart={() => onDragStart(item.row.id)}
+            order={index + 1}
             progress={progressByMacro.get(item.row.id)}
             stage={stage}
             totalsByTask={totalsByTask}
           />
         ))}
-        {items.length === 0 ? (
+        {items.length === 0 && !state?.loading ? (
           <p className="operations-empty">{locale === "pt-BR" ? "Sem itens" : "No items"}</p>
         ) : null}
         {hasMore ? (
-          <div className="operations-infinite-sentinel" ref={sentinelRef}>
-            {visibleCount} de {items.length} · carregando mais…
+          <div
+            aria-live="polite"
+            className="operations-infinite-sentinel"
+            ref={sentinelRef}
+            role={state?.error ? "alert" : "status"}
+          >
+            {state?.error ? (
+              <>
+                <span>{state.error}</span>
+                <button onClick={onLoadMore} type="button">
+                  Tentar novamente
+                </button>
+              </>
+            ) : state?.loading ? (
+              "Carregando mais…"
+            ) : (
+              `${visibleCount} de ${totalItems} · carregando mais…`
+            )}
           </div>
         ) : null}
       </div>
@@ -265,6 +398,11 @@ function WorkCard({
   locale,
   nowMs,
   onOpen,
+  onMove,
+  onDrop,
+  onDragEnd,
+  onDragStart,
+  order,
   progress,
   stage,
   totalsByTask,
@@ -274,6 +412,11 @@ function WorkCard({
   locale: OperationsLocale;
   nowMs: number;
   onOpen: () => void;
+  onMove: (direction: -1 | 1) => void;
+  onDrop: () => void;
+  onDragEnd: () => void;
+  onDragStart: () => void;
+  order: number;
   progress: MacroWorkProgress | undefined;
   stage: WorkStage;
   totalsByTask: ReturnType<typeof taskTotals>;
@@ -288,19 +431,64 @@ function WorkCard({
     ? [macro.duration_ms, macro.usage.total.tokens.total, macro.usage.total.cost.brl]
     : [totals?.durationMs ?? null, totals?.tokens ?? null, totals?.costBrl ?? null];
   return (
-    <button
+    <article
       className={`operations-task-card operations-work-card is-kind-${origin}`}
-      onClick={onOpen}
-      type="button"
+      draggable={stage === "ready"}
+      onDragEnd={stage === "ready" ? onDragEnd : undefined}
+      onDragOver={stage === "ready" ? (event) => event.preventDefault() : undefined}
+      onDragStart={stage === "ready" ? onDragStart : undefined}
+      onDrop={
+        stage === "ready"
+          ? (event) => {
+              event.preventDefault();
+              onDrop();
+            }
+          : undefined
+      }
     >
-      <span className={`operations-work-kind is-${item.kind}`}>{kindLabel}</span>
-      <span className={`operations-work-status is-${stage}`}>
-        {workStageBadgeLabel(stage, locale)}
-      </span>
-      {task ? (
-        <span className={`operations-risk is-${task.risk}`}>{riskLabel(task.risk, locale)}</span>
+      <button
+        aria-label={openWorkCardLabel(locale, item.row.title)}
+        className="operations-work-card-open"
+        onClick={onOpen}
+        type="button"
+      >
+        {stage === "ready" ? (
+          <span className="operations-work-card-first-line">
+            <span className="operations-work-order">#{order}</span>
+          </span>
+        ) : null}
+        <span className={`operations-work-kind is-${item.kind}`}>{kindLabel}</span>
+        {order === 1 && stage === "ready" ? (
+          <span className="operations-work-next">Próximo</span>
+        ) : null}
+        {stage !== "ready" ? (
+          <span className={`operations-work-status is-${stage}`}>
+            {workStageBadgeLabel(stage, locale)}
+          </span>
+        ) : null}
+        {task ? (
+          <span className={`operations-risk is-${task.risk}`}>{riskLabel(task.risk, locale)}</span>
+        ) : null}
+        <strong title={item.row.title}>{item.row.title}</strong>
+      </button>
+      {stage === "ready" ? (
+        <div className="operations-work-reorder">
+          <button
+            aria-label={locale === "pt-BR" ? "Mover acima" : "Move up"}
+            onClick={() => onMove(-1)}
+            type="button"
+          >
+            ↑
+          </button>
+          <button
+            aria-label={locale === "pt-BR" ? "Mover abaixo" : "Move down"}
+            onClick={() => onMove(1)}
+            type="button"
+          >
+            ↓
+          </button>
+        </div>
       ) : null}
-      <strong title={item.row.title}>{item.row.title}</strong>
       <small title={item.row.id}>{item.row.id}</small>
       {item.row.created_at ? (
         <small className="operations-card-created">
@@ -343,7 +531,25 @@ function WorkCard({
           </div>
         ))}
       </dl>
-    </button>
+    </article>
+  );
+}
+
+export function openWorkCardLabel(locale: OperationsLocale, title: string): string {
+  return locale === "pt-BR" ? `Abrir ${title}` : `Open ${title}`;
+}
+
+/** Replaces only visible-column slots, preserving the global order of all other work. */
+export function mergeManualWorkOrder(
+  globalItems: readonly WorkItem[],
+  previousColumn: readonly WorkItem[],
+  reorderedColumn: readonly WorkItem[],
+): string[] {
+  const columnIds = new Set(previousColumn.map((item) => item.row.id));
+  const reorderedIds = reorderedColumn.map((item) => item.row.id);
+  let cursor = 0;
+  return globalItems.map((item) =>
+    columnIds.has(item.row.id) ? (reorderedIds[cursor++] ?? item.row.id) : item.row.id,
   );
 }
 
@@ -448,18 +654,33 @@ function itemStage(item: WorkItem, tasks: readonly DashboardTaskProjection[]): W
   return item.kind === "task" ? taskWorkStage(item.row) : macroWorkStage(item.row, tasks);
 }
 
-function sortWorkItems(items: WorkItem[]): WorkItem[] {
-  const priorityOrder = { urgent: 0, high: 1, medium: 2, low: 3 } as const;
+export function sortWorkItems(
+  items: WorkItem[],
+  optimisticOrder: readonly string[] | null = null,
+): WorkItem[] {
+  const optimisticRanks =
+    optimisticOrder === null ? null : new Map(optimisticOrder.map((id, index) => [id, index]));
   return items.sort(
     (left, right) =>
-      workItemTimestamp(right).localeCompare(workItemTimestamp(left)) ||
-      String(itemStage(left, [])).localeCompare(String(itemStage(right, []))) ||
-      (left.kind === "task" ? priorityOrder[left.row.priority] : 4) -
-        (right.kind === "task" ? priorityOrder[right.row.priority] : 4) ||
-      right.row.id.localeCompare(left.row.id),
+      compareManualOrder(
+        optimisticRanks?.get(left.row.id) ?? left.row.manual_order,
+        optimisticRanks?.get(right.row.id) ?? right.row.manual_order,
+      ) ||
+      workItemTimestamp(left).localeCompare(workItemTimestamp(right)) ||
+      left.row.id.localeCompare(right.row.id),
   );
 }
 
+function compareManualOrder(
+  left: number | null | undefined,
+  right: number | null | undefined,
+): number {
+  if (left != null && right != null) return left - right;
+  if (left != null) return -1;
+  if (right != null) return 1;
+  return 0;
+}
+
 function workItemTimestamp(item: WorkItem): string {
   return item.kind === "task"
     ? item.row.updated_at