From f290d7efad222397b77e454bbb19980be9dcc426 Mon Sep 17 00:00:00 2001
From: Phelipe Lorran <112786693+httpsphl@users.noreply.github.com>
Date: Fri, 9 Oct 2026 14:47:00 -0300
Subject: [PATCH] feat(app): reorder crews by dragging or from the menu

Drag a crew's name in the sidebar, or use Move up / Move down in its menu.
The order is a look of this computer, kept in localStorage; the crews page
follows it. Sidebar conversation lines moved to their own file.
---
 app/src/features/crews/CrewsOverview.tsx      |   3 +-
 app/src/features/crews/Sidebar.tsx            | 177 ++++++------------
 .../features/crews/SidebarConversation.tsx    | 111 +++++++++++
 app/src/features/crews/crewMenu.test.tsx      |   1 +
 app/src/features/crews/crewOrder.test.tsx     |  78 ++++++++
 app/src/features/crews/crewOrder.ts           |  85 +++++++++
 app/src/features/crews/useCrewDrag.ts         |  99 ++++++++++
 app/src/i18n/en/crews.ts                      |   2 +
 app/src/i18n/es/crews.ts                      |   2 +
 app/src/i18n/pt-BR/crews.ts                   |   2 +
 docs/spec.md                                  |   2 +-
 11 files changed, 445 insertions(+), 117 deletions(-)
 create mode 100644 app/src/features/crews/SidebarConversation.tsx
 create mode 100644 app/src/features/crews/crewOrder.test.tsx
 create mode 100644 app/src/features/crews/crewOrder.ts
 create mode 100644 app/src/features/crews/useCrewDrag.ts

diff --git a/app/src/features/crews/CrewsOverview.tsx b/app/src/features/crews/CrewsOverview.tsx
index fe66f7fc..4b9da228 100644
--- a/app/src/features/crews/CrewsOverview.tsx
+++ b/app/src/features/crews/CrewsOverview.tsx
@@ -10,6 +10,7 @@ import { CountBadge } from "../../ui/Badge";
 import { Button } from "../../ui/Button";
 import { BotAvatar, moodOf } from "../bots/BotAvatar";
 import { CrewDialog } from "./CrewDialog";
+import { orderedCrews, useCrewOrder } from "./crewOrder";
 
 /** Faces shown on a card; the rest are counted. */
 const FACES = 6;
@@ -18,7 +19,7 @@ const FACES = 6;
 export function CrewsOverview() {
   const t = useT();
   const words = t.crews.overview;
-  const crews = useApp(useShallow(crewList));
+  const crews = orderedCrews(useApp(useShallow(crewList)), useCrewOrder());
   const botCount = useApp((state) => Object.keys(state.bots).length);
   const [creating, setCreating] = useState(false);
   return (
diff --git a/app/src/features/crews/Sidebar.tsx b/app/src/features/crews/Sidebar.tsx
index feeab6b3..c5a8535e 100644
--- a/app/src/features/crews/Sidebar.tsx
+++ b/app/src/features/crews/Sidebar.tsx
@@ -1,35 +1,42 @@
-import { ChevronDown, ChevronsDownUp, ChevronsUpDown, Pause, Plus } from "lucide-react";
-import { memo, useCallback, useState } from "react";
+import {
+  ArrowDown,
+  ArrowUp,
+  ChevronDown,
+  ChevronsDownUp,
+  ChevronsUpDown,
+  Pause,
+  Plus,
+} from "lucide-react";
+import { useCallback, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { useShallow } from "zustand/react/shallow";
-import { type Messages, useT } from "../../i18n";
-import { when } from "../../lib/format";
-import { plainText } from "../../lib/plainText";
-import type { Activity, Bot, Crew } from "../../lib/protocol.gen";
-import { activityOf, crewList } from "../../store/app";
+import { useT } from "../../i18n";
+import type { Crew, CrewId } from "../../lib/protocol.gen";
+import { crewList } from "../../store/app";
 import { useApp } from "../../store/context";
-import { isUnread, unreadIn } from "../../store/seen";
+import { unreadIn } from "../../store/seen";
 import { CountBadge } from "../../ui/Badge";
 import { Button } from "../../ui/Button";
 import { ContextMenu, menuPoint, type Point } from "../../ui/ContextMenu";
-import { APP_OPENED } from "../../ui/motion";
-import { BotStateBadge, stateView } from "../bots/BotStateBadge";
-import { useBotActions } from "../bots/botActions";
-import { ChiefBadge, isChief } from "../bots/ChiefBadge";
-import { ListAvatar } from "../bots/ListAvatar";
-import { toolAction, toolTitle } from "../chat/toolNames";
 import { CrewDialog } from "./CrewDialog";
 import { setAllCollapsed, setCollapsed, useCollapsed, useCollapsedSet } from "./collapsed";
 import { useCrewActions } from "./crewActions";
+import { moveBy, orderedCrews, setCrewOrder, useCrewOrder } from "./crewOrder";
+import { Conversation } from "./SidebarConversation";
 import { row } from "./SidebarPages";
 import { StateFilters } from "./StateFilters";
 import { filteredBots, useStateFilter } from "./stateFilter";
+import { useCrewDrag } from "./useCrewDrag";
 
 /** Crews as sections and their bots as conversations (spec 15.1). */
 export function Sidebar() {
   const t = useT();
   const words = t.crews.sidebar;
-  const crews = useApp(useShallow(crewList));
+  const order = useCrewOrder();
+  const crews = orderedCrews(useApp(useShallow(crewList)), order);
+  const ids = crews.map((crew) => crew.id);
+  const list = useRef<HTMLUListElement>(null);
+  const drag = useCrewDrag(ids, list);
   const overview = useApp((state) => state.selectedCrewId === null && !state.page);
   const selectCrew = useApp((state) => state.selectCrew);
   const collapsed = useCollapsedSet();
@@ -66,9 +73,9 @@ export function Sidebar() {
           />
         </div>
         {crews.length > 0 && <StateFilters />}
-        <ul className="min-h-0 flex-1 overflow-y-auto px-2 pb-3">
+        <ul ref={list} className="min-h-0 flex-1 overflow-y-auto px-2 pb-3">
           {crews.map((crew) => (
-            <CrewEntry key={crew.id} crew={crew} />
+            <CrewEntry key={crew.id} crew={crew} ids={ids} drag={drag} />
           ))}
         </ul>
       </nav>
@@ -77,7 +84,15 @@ export function Sidebar() {
   );
 }
 
-function CrewEntry({ crew }: { crew: Crew }) {
+function CrewEntry({
+  crew,
+  ids,
+  drag,
+}: {
+  crew: Crew;
+  ids: CrewId[];
+  drag: ReturnType<typeof useCrewDrag>;
+}) {
   const t = useT();
   const filter = useStateFilter();
   const bots = useApp(useShallow((state) => filteredBots(state, crew.id, filter)));
@@ -95,13 +110,34 @@ function CrewEntry({ crew }: { crew: Crew }) {
   const waiting =
     collapsed && bots.some((bot) => bot.state === "needs_approval" || bot.state === "auth_error");
   const words = t.crews.sidebar;
+  // A line shows where the dragged crew would land.
+  const spot = drag.over?.id === crew.id && drag.dragging !== crew.id ? drag.over : null;
+  const dropEdge = spot
+    ? `border-accent border-solid ${spot.after ? "border-b-2" : "border-t-2"}`
+    : "";
+  const index = ids.indexOf(crew.id);
+  const moves = [
+    index > 0 && {
+      label: words.moveUp,
+      icon: ArrowUp,
+      onSelect: () => setCrewOrder(moveBy(ids, crew.id, -1)),
+    },
+    index < ids.length - 1 && {
+      label: words.moveDown,
+      icon: ArrowDown,
+      onSelect: () => setCrewOrder(moveBy(ids, crew.id, 1)),
+    },
+  ].filter((item) => item !== false);
 
   // Filtering, a crew with nothing to show steps aside.
   if (filter !== "all" && bots.length === 0) {
     return null;
   }
   return (
-    <li className="mt-2">
+    <li
+      data-crew-id={crew.id}
+      className={`mt-2 ${drag.dragging === crew.id ? "opacity-50" : ""} ${dropEdge}`}
+    >
       <div className="relative flex items-center">
         <button
           type="button"
@@ -120,7 +156,12 @@ function CrewEntry({ crew }: { crew: Crew }) {
         <button
           type="button"
           aria-current={selected ? "page" : undefined}
-          onClick={() => selectCrew(crew.id)}
+          onPointerDown={(event) => drag.start(crew.id, event)}
+          onClick={() => {
+            if (!drag.wasDrag()) {
+              selectCrew(crew.id);
+            }
+          }}
           onContextMenu={(event) => {
             event.preventDefault();
             setMenuAt(menuPoint(event));
@@ -156,7 +197,7 @@ function CrewEntry({ crew }: { crew: Crew }) {
       {menuAt && (
         <ContextMenu
           label={words.menuOf(crew.name)}
-          items={[actions.newBot, actions.pause, ...actions.items]}
+          items={[actions.newBot, actions.pause, ...moves, ...actions.items]}
           at={menuAt}
           onClose={closeMenu}
         />
@@ -171,97 +212,3 @@ function CrewEntry({ crew }: { crew: Crew }) {
     </li>
   );
 }
-
-/** Memoized: a change to one bot re-renders only its own line. */
-const Conversation = memo(function Conversation({ bot, crew }: { bot: Bot; crew: Crew }) {
-  const t = useT();
-  const selected = useApp((state) => state.selectedBotId === bot.id);
-  const selectBot = useApp((state) => state.selectBot);
-  // A right-click opens the bot's menu, the same as in its header.
-  const actions = useBotActions(bot, crew);
-  const [menuAt, setMenuAt] = useState<Point | null>(null);
-  const closeMenu = useCallback(() => setMenuAt(null), []);
-  const activity = useApp((state) => activityOf(state, bot.id));
-  const unread = useApp((state) => isUnread(state, bot.id));
-  return (
-    <li className={bot.createdAt > APP_OPENED ? "animate-rise" : undefined}>
-      <button
-        type="button"
-        aria-current={selected ? "page" : undefined}
-        aria-label={[bot.name, stateView(bot, crew.paused).label, unread && t.crews.sidebar.unread]
-          .filter(Boolean)
-          .join(", ")}
-        onClick={() => selectBot(bot.id)}
-        onContextMenu={(event) => {
-          event.preventDefault();
-          setMenuAt(menuPoint(event));
-        }}
-        className={`${row} gap-2.5 px-2.5 py-2 ${selected || menuAt ? "bg-sunken" : ""}`}
-      >
-        <ListAvatar bot={bot} crewPaused={crew.paused} size={32} />
-        <span className="min-w-0 flex-1">
-          <span className="flex items-baseline gap-2">
-            <span className="flex min-w-0 flex-1 items-center gap-1">
-              <span className={`truncate text-sm ${unread ? "font-semibold" : "font-medium"}`}>
-                {bot.name}
-              </span>
-              {isChief(bot, crew) && <ChiefBadge crew={crew} compact />}
-            </span>
-            {activity && (
-              <time
-                className={`shrink-0 text-xs ${unread ? "font-semibold text-accent-text" : "text-muted"}`}
-                dateTime={new Date(activity.at).toISOString()}
-              >
-                {when(activity.at)}
-              </time>
-            )}
-          </span>
-          <span className="mt-0.5 flex min-w-0 items-center gap-1.5 text-xs">
-            <BotStateBadge bot={bot} crewPaused={crew.paused} compact />
-            <span className={`min-w-0 flex-1 truncate ${unread ? "text-ink" : "text-muted"}`}>
-              {activity ? activityText(activity, t) : bot.role || t.crews.sidebar.noMessages}
-            </span>
-            {unread && <span aria-hidden className="size-2.5 shrink-0 rounded-full bg-accent" />}
-          </span>
-        </span>
-      </button>
-      {menuAt && (
-        <ContextMenu
-          label={t.bots.header.menuOf(bot.name)}
-          items={actions.items}
-          at={menuAt}
-          onClose={closeMenu}
-        />
-      )}
-      {/* Outside the list: a dialog is not part of the navigation. */}
-      {actions.dialogs && createPortal(actions.dialogs, document.body)}
-    </li>
-  );
-});
-
-/**
- * The conversation-list line, worded here in the owner's language from what
- * the daemon sends (it sends no wording). What someone wrote shows as plain
- * words: the chat renders its Markdown, a line would show the marks raw. A
- * command or a path keeps its own characters.
- */
-function activityText(activity: Activity, t: Messages): string {
-  const { text, tool } = activity;
-  switch (activity.kind) {
-    case "owner":
-      return t.crews.sidebar.fromOwner(plainText(text));
-    case "approval":
-      return t.crews.sidebar.awaitingApproval(tool ? toolAction(tool, t.tools) : text);
-    case "question":
-      return t.questions.activity(plainText(text));
-    case "tool": {
-      if (!tool) {
-        return text;
-      }
-      const title = toolTitle(tool, t.tools);
-      return text ? `${title} · ${text}` : title;
-    }
-    default:
-      return plainText(text);
-  }
-}
diff --git a/app/src/features/crews/SidebarConversation.tsx b/app/src/features/crews/SidebarConversation.tsx
new file mode 100644
index 00000000..9bf084fe
--- /dev/null
+++ b/app/src/features/crews/SidebarConversation.tsx
@@ -0,0 +1,111 @@
+import { memo, useCallback, useState } from "react";
+import { createPortal } from "react-dom";
+import { type Messages, useT } from "../../i18n";
+import { when } from "../../lib/format";
+import { plainText } from "../../lib/plainText";
+import type { Activity, Bot, Crew } from "../../lib/protocol.gen";
+import { activityOf } from "../../store/app";
+import { useApp } from "../../store/context";
+import { isUnread } from "../../store/seen";
+import { ContextMenu, menuPoint, type Point } from "../../ui/ContextMenu";
+import { APP_OPENED } from "../../ui/motion";
+import { BotStateBadge, stateView } from "../bots/BotStateBadge";
+import { useBotActions } from "../bots/botActions";
+import { ChiefBadge, isChief } from "../bots/ChiefBadge";
+import { ListAvatar } from "../bots/ListAvatar";
+import { toolAction, toolTitle } from "../chat/toolNames";
+import { row } from "./SidebarPages";
+
+/** Memoized: a change to one bot re-renders only its own line. */
+export const Conversation = memo(function Conversation({ bot, crew }: { bot: Bot; crew: Crew }) {
+  const t = useT();
+  const selected = useApp((state) => state.selectedBotId === bot.id);
+  const selectBot = useApp((state) => state.selectBot);
+  // A right-click opens the bot's menu, the same as in its header.
+  const actions = useBotActions(bot, crew);
+  const [menuAt, setMenuAt] = useState<Point | null>(null);
+  const closeMenu = useCallback(() => setMenuAt(null), []);
+  const activity = useApp((state) => activityOf(state, bot.id));
+  const unread = useApp((state) => isUnread(state, bot.id));
+  return (
+    <li className={bot.createdAt > APP_OPENED ? "animate-rise" : undefined}>
+      <button
+        type="button"
+        aria-current={selected ? "page" : undefined}
+        aria-label={[bot.name, stateView(bot, crew.paused).label, unread && t.crews.sidebar.unread]
+          .filter(Boolean)
+          .join(", ")}
+        onClick={() => selectBot(bot.id)}
+        onContextMenu={(event) => {
+          event.preventDefault();
+          setMenuAt(menuPoint(event));
+        }}
+        className={`${row} gap-2.5 px-2.5 py-2 ${selected || menuAt ? "bg-sunken" : ""}`}
+      >
+        <ListAvatar bot={bot} crewPaused={crew.paused} size={32} />
+        <span className="min-w-0 flex-1">
+          <span className="flex items-baseline gap-2">
+            <span className="flex min-w-0 flex-1 items-center gap-1">
+              <span className={`truncate text-sm ${unread ? "font-semibold" : "font-medium"}`}>
+                {bot.name}
+              </span>
+              {isChief(bot, crew) && <ChiefBadge crew={crew} compact />}
+            </span>
+            {activity && (
+              <time
+                className={`shrink-0 text-xs ${unread ? "font-semibold text-accent-text" : "text-muted"}`}
+                dateTime={new Date(activity.at).toISOString()}
+              >
+                {when(activity.at)}
+              </time>
+            )}
+          </span>
+          <span className="mt-0.5 flex min-w-0 items-center gap-1.5 text-xs">
+            <BotStateBadge bot={bot} crewPaused={crew.paused} compact />
+            <span className={`min-w-0 flex-1 truncate ${unread ? "text-ink" : "text-muted"}`}>
+              {activity ? activityText(activity, t) : bot.role || t.crews.sidebar.noMessages}
+            </span>
+            {unread && <span aria-hidden className="size-2.5 shrink-0 rounded-full bg-accent" />}
+          </span>
+        </span>
+      </button>
+      {menuAt && (
+        <ContextMenu
+          label={t.bots.header.menuOf(bot.name)}
+          items={actions.items}
+          at={menuAt}
+          onClose={closeMenu}
+        />
+      )}
+      {/* Outside the list: a dialog is not part of the navigation. */}
+      {actions.dialogs && createPortal(actions.dialogs, document.body)}
+    </li>
+  );
+});
+
+/**
+ * The conversation-list line, worded here in the owner's language from what
+ * the daemon sends (it sends no wording). What someone wrote shows as plain
+ * words: the chat renders its Markdown, a line would show the marks raw. A
+ * command or a path keeps its own characters.
+ */
+function activityText(activity: Activity, t: Messages): string {
+  const { text, tool } = activity;
+  switch (activity.kind) {
+    case "owner":
+      return t.crews.sidebar.fromOwner(plainText(text));
+    case "approval":
+      return t.crews.sidebar.awaitingApproval(tool ? toolAction(tool, t.tools) : text);
+    case "question":
+      return t.questions.activity(plainText(text));
+    case "tool": {
+      if (!tool) {
+        return text;
+      }
+      const title = toolTitle(tool, t.tools);
+      return text ? `${title} · ${text}` : title;
+    }
+    default:
+      return plainText(text);
+  }
+}
diff --git a/app/src/features/crews/crewMenu.test.tsx b/app/src/features/crews/crewMenu.test.tsx
index 3810d100..7f13a93b 100644
--- a/app/src/features/crews/crewMenu.test.tsx
+++ b/app/src/features/crews/crewMenu.test.tsx
@@ -39,6 +39,7 @@ describe("a crew's right-click menu", () => {
     ).toEqual([
       "New bot",
       "Pause crew",
+      "Move up",
       "Rename",
       "Open work folder",
       "Change work folder…",
diff --git a/app/src/features/crews/crewOrder.test.tsx b/app/src/features/crews/crewOrder.test.tsx
new file mode 100644
index 00000000..ecaa1674
--- /dev/null
+++ b/app/src/features/crews/crewOrder.test.tsx
@@ -0,0 +1,78 @@
+import { act, cleanup, fireEvent, screen, within } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, test } from "vitest";
+import { FakeBotloft } from "../../lib/fake";
+import { crewOpened, renderApp, sidebar } from "../../test/app";
+import { moveBeside, moveBy, resetCrewOrder } from "./crewOrder";
+
+beforeEach(() => {
+  localStorage.removeItem("botloft.collapsedCrews");
+  resetCrewOrder();
+});
+afterEach(() => {
+  cleanup();
+  resetCrewOrder();
+});
+
+/** The crews' names in the sidebar, top to bottom. */
+const names = () =>
+  [...sidebar().querySelectorAll<HTMLElement>(":scope [data-crew-id]")].map(
+    (item) => item.querySelector("button[aria-current], button.font-semibold")?.textContent ?? "",
+  );
+
+async function threeCrews() {
+  const fake = new FakeBotloft();
+  fake.addCrew("Alpha");
+  fake.addCrew("Beta");
+  fake.addCrew("Gamma");
+  renderApp(fake);
+  await crewOpened("Alpha");
+  return fake;
+}
+
+describe("the order of crews", () => {
+  test("moving an id beside another", () => {
+    expect(moveBeside(["a", "b", "c"], "a", "c", true)).toEqual(["b", "c", "a"]);
+    expect(moveBeside(["a", "b", "c"], "c", "a", false)).toEqual(["c", "a", "b"]);
+    expect(moveBeside(["a", "b", "c"], "b", "b", true)).toEqual(["a", "b", "c"]);
+    expect(moveBy(["a", "b", "c"], "a", -1)).toEqual(["a", "b", "c"]);
+    expect(moveBy(["a", "b", "c"], "a", 1)).toEqual(["b", "a", "c"]);
+  });
+
+  test("the menu moves a crew up and down, and it stays after a reload", async () => {
+    await threeCrews();
+    const open = (name: string) =>
+      fireEvent.contextMenu(within(sidebar()).getByRole("button", { name }), {
+        clientX: 100,
+        clientY: 100,
+      });
+    open("Gamma");
+    const menu = screen.getByRole("menu", { name: "Actions for Gamma" });
+    expect(within(menu).queryByRole("menuitem", { name: "Move down" })).toBeNull();
+    fireEvent.click(within(menu).getByRole("menuitem", { name: "Move up" }));
+    expect(names().map((n) => n.trim())).toEqual(["Alpha", "Gamma", "Beta"]);
+    expect(JSON.parse(localStorage.getItem("botloft.crewOrder") ?? "[]")).toHaveLength(3);
+  });
+
+  test("dragging a crew's name drops it where the pointer lets go", async () => {
+    await threeCrews();
+    const items = [...sidebar().querySelectorAll<HTMLElement>("[data-crew-id]")];
+    items.forEach((item, index) => {
+      item.getBoundingClientRect = () =>
+        ({ top: index * 100, bottom: index * 100 + 100, height: 100 }) as DOMRect;
+    });
+    const handle = within(sidebar()).getByRole("button", { name: "Alpha" });
+    fireEvent.pointerDown(handle, { button: 0, clientX: 20, clientY: 10 });
+    act(() => {
+      fireEvent.pointerMove(window, { clientX: 20, clientY: 150 });
+    });
+    act(() => {
+      fireEvent.pointerMove(window, { clientX: 20, clientY: 290 });
+    });
+    act(() => {
+      fireEvent.pointerUp(window);
+    });
+    expect(names().map((n) => n.trim())).toEqual(["Beta", "Gamma", "Alpha"]);
+    // The click that ends a drag does not open the crew.
+    fireEvent.click(handle);
+  });
+});
diff --git a/app/src/features/crews/crewOrder.ts b/app/src/features/crews/crewOrder.ts
new file mode 100644
index 00000000..bee4fc56
--- /dev/null
+++ b/app/src/features/crews/crewOrder.ts
@@ -0,0 +1,85 @@
+// The order of crews in the sidebar and on the crews page (spec 15.1): the
+// owner drags them, or moves them from the menu. A look of this computer,
+// like which crews are folded, so it lives in localStorage; a crew not in the
+// saved order (a new one) goes last, in the order it was made.
+
+import { useSyncExternalStore } from "react";
+import type { Crew, CrewId } from "../../lib/protocol.gen";
+
+const KEY = "botloft.crewOrder";
+
+const listeners = new Set<() => void>();
+let current = load();
+
+function load(): readonly CrewId[] {
+  try {
+    const parsed: unknown = JSON.parse(localStorage.getItem(KEY) ?? "[]");
+    return Array.isArray(parsed) ? parsed.filter((id) => typeof id === "string") : [];
+  } catch {
+    return [];
+  }
+}
+
+/** Saves the order of every crew shown, first to last. */
+export function setCrewOrder(ids: readonly CrewId[]): void {
+  current = [...ids];
+  try {
+    localStorage.setItem(KEY, JSON.stringify(current));
+  } catch {
+    // Storage off: the order lasts for this window.
+  }
+  for (const listener of listeners) {
+    listener();
+  }
+}
+
+const subscribe = (listener: () => void) => {
+  listeners.add(listener);
+  return () => listeners.delete(listener);
+};
+
+export function useCrewOrder(): readonly CrewId[] {
+  return useSyncExternalStore(subscribe, () => current);
+}
+
+/** `crews` (in creation order) arranged by the saved order. */
+export function orderedCrews(crews: Crew[], order: readonly CrewId[]): Crew[] {
+  const rank = new Map(order.map((id, index) => [id, index]));
+  const known = crews.filter((crew) => rank.has(crew.id));
+  known.sort((a, b) => (rank.get(a.id) ?? 0) - (rank.get(b.id) ?? 0));
+  return [...known, ...crews.filter((crew) => !rank.has(crew.id))];
+}
+
+/** `ids` with `id` taken out and put next to `target` (before it, or after). */
+export function moveBeside(
+  ids: readonly CrewId[],
+  id: CrewId,
+  target: CrewId,
+  after: boolean,
+): CrewId[] {
+  if (id === target) {
+    return [...ids];
+  }
+  const rest = ids.filter((other) => other !== id);
+  const at = rest.indexOf(target);
+  rest.splice(after ? at + 1 : at, 0, id);
+  return rest;
+}
+
+/** One place up or down; stays put at the ends. */
+export function moveBy(ids: readonly CrewId[], id: CrewId, delta: -1 | 1): CrewId[] {
+  const from = ids.indexOf(id);
+  const to = from + delta;
+  const next = [...ids];
+  if (from < 0 || to < 0 || to >= next.length) {
+    return next;
+  }
+  next.splice(from, 1);
+  next.splice(to, 0, id);
+  return next;
+}
+
+/** Back to creation order, for tests. */
+export function resetCrewOrder(): void {
+  setCrewOrder([]);
+}
diff --git a/app/src/features/crews/useCrewDrag.ts b/app/src/features/crews/useCrewDrag.ts
new file mode 100644
index 00000000..9bee4b89
--- /dev/null
+++ b/app/src/features/crews/useCrewDrag.ts
@@ -0,0 +1,99 @@
+// Dragging a crew to a new place in the sidebar. Pointer events, not the
+// browser's drag and drop: the window's own file-drop handling takes over the
+// latter on Windows.
+
+import { type PointerEvent, type RefObject, useCallback, useRef, useState } from "react";
+import type { CrewId } from "../../lib/protocol.gen";
+import { moveBeside, setCrewOrder } from "./crewOrder";
+
+/** How far the pointer moves before a press becomes a drag, in pixels. */
+const THRESHOLD = 5;
+
+export interface DropSpot {
+  id: CrewId;
+  after: boolean;
+}
+
+/** `ids` are the crews as listed; `list` holds one `<li data-crew-id>` for each. */
+export function useCrewDrag(ids: readonly CrewId[], list: RefObject<HTMLElement | null>) {
+  const [dragging, setDragging] = useState<CrewId | null>(null);
+  const [over, setOver] = useState<DropSpot | null>(null);
+  const swallow = useRef(false);
+  const idsRef = useRef(ids);
+  idsRef.current = ids;
+
+  const spotAt = useCallback(
+    (y: number): DropSpot | null => {
+      const items = [
+        ...(list.current?.querySelectorAll<HTMLElement>(":scope > [data-crew-id]") ?? []),
+      ];
+      for (const item of items) {
+        const box = item.getBoundingClientRect();
+        if (y <= box.bottom) {
+          const id = item.dataset.crewId as CrewId;
+          return { id, after: y > box.top + box.height / 2 && y > box.top + 16 };
+        }
+      }
+      const last = items.at(-1);
+      return last ? { id: last.dataset.crewId as CrewId, after: true } : null;
+    },
+    [list],
+  );
+
+  const start = useCallback(
+    (id: CrewId, event: PointerEvent) => {
+      if (event.button !== 0) {
+        return;
+      }
+      const from = { x: event.clientX, y: event.clientY };
+      let started = false;
+      let spot: DropSpot | null = null;
+      const finish = () => {
+        window.removeEventListener("pointermove", move);
+        window.removeEventListener("pointerup", up);
+        window.removeEventListener("pointercancel", cancel);
+        window.removeEventListener("keydown", key);
+        setDragging(null);
+        setOver(null);
+      };
+      const move = (e: globalThis.PointerEvent) => {
+        if (!started && Math.hypot(e.clientX - from.x, e.clientY - from.y) < THRESHOLD) {
+          return;
+        }
+        started = true;
+        setDragging(id);
+        spot = spotAt(e.clientY);
+        setOver(spot);
+      };
+      const up = () => {
+        if (started) {
+          // The click that follows a drag must not open the crew.
+          swallow.current = true;
+          setTimeout(() => {
+            swallow.current = false;
+          }, 0);
+          if (spot) {
+            setCrewOrder(moveBeside(idsRef.current, id, spot.id, spot.after));
+          }
+        }
+        finish();
+      };
+      const cancel = () => finish();
+      const key = (e: KeyboardEvent) => {
+        if (e.key === "Escape") {
+          spot = null;
+          finish();
+        }
+      };
+      window.addEventListener("pointermove", move);
+      window.addEventListener("pointerup", up);
+      window.addEventListener("pointercancel", cancel);
+      window.addEventListener("keydown", key);
+    },
+    [spotAt],
+  );
+
+  /** True once, right after a drag ended: the click to ignore. */
+  const wasDrag = useCallback(() => swallow.current, []);
+  return { dragging, over, start, wasDrag };
+}
diff --git a/app/src/i18n/en/crews.ts b/app/src/i18n/en/crews.ts
index 65b2bb33..ef8acad6 100644
--- a/app/src/i18n/en/crews.ts
+++ b/app/src/i18n/en/crews.ts
@@ -18,6 +18,8 @@ export const crews = {
     unread: "unread",
     /** Beside a crew's name: how many of its bots are unread. */
     unreadCount: (count: number) => `${count} unread`,
+    moveUp: "Move up",
+    moveDown: "Move down",
     showAll: "See all crews",
     collapseAll: "Fold all crews",
     expandAll: "Unfold all crews",
diff --git a/app/src/i18n/es/crews.ts b/app/src/i18n/es/crews.ts
index 985d26c2..a974385c 100644
--- a/app/src/i18n/es/crews.ts
+++ b/app/src/i18n/es/crews.ts
@@ -13,6 +13,8 @@ export const crews: Messages["crews"] = {
     awaitingApproval: (text: string) => `Esperando aprobación: ${text}`,
     unread: "sin leer",
     unreadCount: (count: number) => `${count} sin leer`,
+    moveUp: "Mover arriba",
+    moveDown: "Mover abajo",
     showAll: "Ver todos los equipos",
     collapseAll: "Contraer todos los equipos",
     expandAll: "Expandir todos los equipos",
diff --git a/app/src/i18n/pt-BR/crews.ts b/app/src/i18n/pt-BR/crews.ts
index a40739c4..09db0383 100644
--- a/app/src/i18n/pt-BR/crews.ts
+++ b/app/src/i18n/pt-BR/crews.ts
@@ -13,6 +13,8 @@ export const crews: Messages["crews"] = {
     awaitingApproval: (text: string) => `Aguardando aprovação: ${text}`,
     unread: "não lida",
     unreadCount: (count: number) => (count === 1 ? "1 não lida" : `${count} não lidas`),
+    moveUp: "Mover para cima",
+    moveDown: "Mover para baixo",
     showAll: "Ver todas as equipes",
     collapseAll: "Recolher todas as equipes",
     expandAll: "Expandir todas as equipes",
diff --git a/docs/spec.md b/docs/spec.md
index cb20ab62..cf24dec5 100644
--- a/docs/spec.md
+++ b/docs/spec.md
@@ -850,7 +850,7 @@ app/src/
   shell/          janela, barra de título, layout, atalhos
   features/
     onboarding/   checagens (claude instalado e versão, daemon rodando) e instalação do serviço
-    crews/        lista, criar, renomear, pausar; página da crew com timeline e tasks
+    crews/        lista, criar, renomear, pausar, reordenar (arrastar ou "Mover para cima/baixo" no menu; a ordem fica no localStorage); página da crew com timeline e tasks
     catalog/      modelos de bot: a Agência de bots, "Saber mais" e "Adicionar na equipe" (26.5)
     bots/         conversas na barra lateral, criar, editar, estado, detalhes
     chat/         conversa com o bot: itens, texto ao vivo, aprovações, compositor com anexos