feat(swarm): implement mission picker for left panel

This commit is contained in:
zenchantlive 2026-02-20 17:12:01 -08:00
parent 1925d625b6
commit f35ae8df33
2 changed files with 48 additions and 0 deletions

View file

@ -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>
);
}

View file

@ -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');
});
});