diff --git a/src/components/swarm/swarm-mission-picker.tsx b/src/components/swarm/swarm-mission-picker.tsx
new file mode 100644
index 0000000..ae23491
--- /dev/null
+++ b/src/components/swarm/swarm-mission-picker.tsx
@@ -0,0 +1,34 @@
+"use client";
+
+import React from 'react';
+import { useUrlState } from '@/hooks/use-url-state';
+
+// Mock hook for now, would connect to actual beads data
+const useMissionList = () => ({
+    missions: [
+        { id: '1', title: 'Sample Mission', progress: 50 }
+    ]
+});
+
+export function SwarmMissionPicker() {
+    const { setUrlState, swarmId } = useUrlState();
+    const { missions } = useMissionList();
+
+    return (
+        <div className="flex flex-col gap-2 p-2 w-full">
+            <h2 className="px-2 text-sm font-semibold text-muted-foreground">Active Missions</h2>
+            {missions.map(m => (
+                <button
+                    key={m.id}
+                    onClick={() => setUrlState({ view: 'swarm', swarmId: m.id })}
+                    className={`flex flex-col items-start p-3 min-h-[44px] rounded-md hover:bg-accent transition-colors w-full focus:outline-none focus:ring-2 focus:ring-ring ${swarmId === m.id ? 'bg-accent border' : ''}`}
+                >
+                    <span className="font-medium text-sm">{m.title}</span>
+                    <div className="w-full bg-secondary h-1 mt-2 rounded">
+                        <div className="bg-primary h-1 rounded transition-all duration-300" style={{ width: `${m.progress}%` }} />
+                    </div>
+                </button>
+            ))}
+        </div>
+    );
+}
diff --git a/tests/components/swarm/swarm-mission-picker.test.tsx b/tests/components/swarm/swarm-mission-picker.test.tsx
new file mode 100644
index 0000000..cae41ea
--- /dev/null
+++ b/tests/components/swarm/swarm-mission-picker.test.tsx
@@ -0,0 +1,14 @@
+import { expect, test, describe, mock } from 'bun:test';
+
+// Mock the hook that the component tries to import
+mock.module('@/hooks/use-url-state', () => ({
+    useUrlState: () => ({ setUrlState: () => { }, swarmId: '1' })
+}));
+
+describe('SwarmMissionPicker Component', () => {
+    test('exports SwarmMissionPicker component that is a function', async () => {
+        const mod = await import('../../../src/components/swarm/swarm-mission-picker');
+        expect(mod.SwarmMissionPicker).toBeDefined();
+        expect(typeof mod.SwarmMissionPicker).toBe('function');
+    });
+});