chore: checkpoint related UI improvements and supporting components

Various supporting changes made during the assign archetypes feature development:

- Added contextual-right-panel.tsx and swarm-command-feed.tsx
- Updated activity-panel.tsx with new features
- UI improvements to left-panel, mobile-nav
- Test updates for url-state-integration, mobile-nav, top-bar
- Package.json updates for dependencies
- Global CSS refinements

These changes support the main assign archetypes feature but are
not directly part of its core functionality.

src/components/swarm/swarm-mission-picker.tsx

@@ -12,7 +12,6 @@ export function SwarmMissionPicker({ issues }: { issues: BeadIssue[] }) {
     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)
@@ -62,8 +61,8 @@ export function SwarmMissionPicker({ issues }: { issues: BeadIssue[] }) {
                         return (
                             <button
                                 key={m.id}
-                                onClick={() => {
-                                    setView('swarm');
+                            onClick={() => {
+                                    setView('graph');
                                     setSwarmId(m.id);
                                 }}
                                 className={cn(

src/components/swarm/telemetry-grid.tsx

@@ -1,22 +1,12 @@
 "use client";
 
 import React, { useState } from 'react';
-import dynamic from 'next/dynamic';
+
 import { Loader2, AlertCircle, Bot, Zap } from 'lucide-react';
 import type { BeadIssue } from '../../lib/types';
 import type { AgentArchetype } from '../../lib/types-swarm';
 
-const SpecializedAgentDagLazy = dynamic(
-    () => import('./specialized-agent-dag').then((m) => m.SpecializedAgentDag),
-    {
-        ssr: false,
-        loading: () => (
-            <div className="flex items-center justify-center p-8 w-full h-full min-h-[200px]">
-                <Loader2 className="animate-spin text-muted-foreground" />
-            </div>
-        ),
-    }
-);
+import { WorkflowGraph } from '../shared/workflow-graph';
 
 interface TelemetryGridProps {
     epicId: string;
@@ -99,11 +89,12 @@ export function TelemetryGrid({ epicId, issues, archetypes }: TelemetryGridProps
                     <span className="text-xs font-semibold tracking-wide uppercase text-[var(--ui-text-primary)]">Agent Flow</span>
                 </div>
                 <div className="flex-1 w-full h-full">
-                    <SpecializedAgentDagLazy
+                    <WorkflowGraph
                         beads={beads}
                         archetypes={archetypes}
-                        selectedId={selectedBeadId}
+                        selectedId={selectedBeadId || undefined}
                         onSelect={setSelectedBeadId}
+                        hideClosed={false}
                     />
                 </div>
             </div>