From 2d50b316549acc808cfe45dcd5c3d3061d01db10 Mon Sep 17 00:00:00 2001 From: zenchantlive Date: Fri, 20 Feb 2026 19:16:49 -0800 Subject: [PATCH] feat(swarm): major premium visual overhaul and restore missing view navigation --- src/components/shared/unified-shell.tsx | 2 +- src/components/swarm/swarm-mission-picker.tsx | 127 ++++++++++++++---- src/components/swarm/swarm-workspace.tsx | 125 +++++++++++++---- 3 files changed, 203 insertions(+), 51 deletions(-) diff --git a/src/components/shared/unified-shell.tsx b/src/components/shared/unified-shell.tsx index 9c27e7f..5cf7ddf 100644 --- a/src/components/shared/unified-shell.tsx +++ b/src/components/shared/unified-shell.tsx @@ -137,7 +137,7 @@ export function UnifiedShell({ {/* LEFT PANEL: 20rem generic tree or 20rem swarm mission picker */} {view === 'swarm' ? (
- +
) : ( ({ - missions: [ - { id: '1', title: 'Sample Mission', progress: 50 } - ] -}); +export function SwarmMissionPicker({ issues }: { issues: BeadIssue[] }) { + const { view, setView, setSwarmId, swarmId } = useUrlState(); -export function SwarmMissionPicker() { - const { setView, setSwarmId, swarmId } = useUrlState(); - const { missions } = useMissionList(); + const views: Array<{ id: ViewType; label: string }> = [ + { id: 'social', label: 'Social' }, + { id: 'graph', label: 'Graph' }, + { id: 'swarm', label: 'Swarm' }, + ]; + + // Filter issues to find epics (Missions) + const missions = issues.filter(i => i.issue_type === 'epic' && i.status !== 'closed'); return ( -
-

Active Missions

- {missions.map(m => ( - + ); + })} +
+ +
+ +

Active Missions

+
+ + +
+ {missions.length === 0 ? ( +
+ No active missions (epics) found.
- - ))} -
+ ) : ( + missions.map(m => { + const isSelected = swarmId === m.id; + const hasChildren = m.dependencies.filter(d => d.type === 'parent').length; + const progress = hasChildren > 0 ? 30 : 0; + + return ( + + ); + }) + )} + + +
+
+
+
+

Swarm Commander

+

Operations

+
+
+
+ ); } diff --git a/src/components/swarm/swarm-workspace.tsx b/src/components/swarm/swarm-workspace.tsx index 07887d9..4ded881 100644 --- a/src/components/swarm/swarm-workspace.tsx +++ b/src/components/swarm/swarm-workspace.tsx @@ -1,6 +1,10 @@ "use client"; import React, { useState } from 'react'; +import { SwarmLiveDag } from './swarm-live-dag'; +import { ConvoyStepper } from './convoy-stepper'; +import { Network, Blocks, FileCode2, Info } from 'lucide-react'; +import { cn } from '../../lib/utils'; export function SwarmWorkspace({ selectedMissionId }: { selectedMissionId?: string }) { const [activeTab, setActiveTab] = useState<'operations' | 'archetypes' | 'templates'>('operations'); @@ -9,39 +13,114 @@ export function SwarmWorkspace({ selectedMissionId }: { selectedMissionId?: stri switch (activeTab) { case 'operations': return selectedMissionId - ?
Ops Details for {selectedMissionId}
- :
Select a mission from the left panel.
; + ? ( +
+ +
+ +
+
+ ) + : ( +
+
+ +
+
+

No Mission Selected

+

+ Select an active mission from the left panel to view live DAG telemetry and convoy operations. +

+
+
+ ); case 'archetypes': - return
Archetypes UI
; + return ( +
+

Agent Archetypes

+

Manage the base roles and system prompts available to your swarms.

+
+ {/* Placeholder Cards */} + {[1, 2, 3].map(i => ( +
+
+
+
+
+ ))} +
+
+ ); case 'templates': - return
Templates UI
; + return ( +
+

Swarm Templates

+

Define predefined teams and formulas for rapid mission deployment.

+
+ {[1, 2].map(i => ( +
+
+
+
+
+
+
+ ))} +
+
+ ); default: return null; } }; return ( -
- {/* Tab Navigation - Min 44px for mobile targets */} -
- {['operations', 'archetypes', 'templates'].map(tab => ( - - ))} -
+
+
+
+
+

+ + Swarm Command +

+

Orchestrate agents, define archetypes, and monitor live DAG telemetry.

+
+ + {/* Premium Custom Tabs */} +
+ {[ + { id: 'operations', label: 'Operations', icon: Network }, + { id: 'archetypes', label: 'Archetypes', icon: Blocks }, + { id: 'templates', label: 'Templates', icon: FileCode2 } + ].map(tab => { + const Icon = tab.icon; + const isActive = activeTab === tab.id; + return ( + + ); + })} +
+
+
{/* Content Area */} -
- {renderTabContent()} -
+
+
+ {renderTabContent()} +
+
); }