@shepai/cli 1.65.0 → 1.66.0

package/web/.next/standalone/src/presentation/web/app/page.tsx

@@ -3,38 +3,12 @@ import { resolve } from '@/lib/server-container';
 import type { ListFeaturesUseCase } from '@shepai/core/application/use-cases/features/list-features.use-case';
 import type { ListRepositoriesUseCase } from '@shepai/core/application/use-cases/repositories/list-repositories.use-case';
 import type { IAgentRunRepository } from '@shepai/core/application/ports/output/agents/agent-run-repository.interface';
-import {
-  deriveNodeState,
-  deriveProgress,
-} from '@/components/common/feature-node/derive-feature-state';
 import { layoutWithDagre } from '@/lib/layout-with-dagre';
-import type { CanvasNodeType } from '@/components/features/features-canvas';
-import type { Edge } from '@xyflow/react';
-import type { FeatureNodeData, FeatureLifecyclePhase } from '@/components/common/feature-node';
+import { buildGraphNodes } from '@/app/build-graph-nodes';
 
 /** Skip static pre-rendering since we need runtime DI container and server context. */
 export const dynamic = 'force-dynamic';
 
-/** Map domain SdlcLifecycle enum values to UI FeatureLifecyclePhase (1:1). */
-const lifecycleMap: Record<string, FeatureLifecyclePhase> = {
-  Requirements: 'requirements',
-  Research: 'research',
-  Implementation: 'implementation',
-  Review: 'review',
-  'Deploy & QA': 'deploy',
-  Maintain: 'maintain',
-};
-
-/** Map agent graph node names (from agent_run.result) to UI lifecycle phases. */
-const nodeToLifecyclePhase: Record<string, FeatureLifecyclePhase> = {
-  analyze: 'requirements',
-  requirements: 'requirements',
-  research: 'research',
-  plan: 'implementation',
-  implement: 'implementation',
-  merge: 'review',
-};
-
 export default async function HomePage() {
   const listFeatures = resolve<ListFeaturesUseCase>('ListFeaturesUseCase');
   const listRepos = resolve<ListRepositoriesUseCase>('ListRepositoriesUseCase');
@@ -49,108 +23,7 @@ export default async function HomePage() {
     })
   );
 
-  // Group features by repository path (features may still reference paths not yet in repositories table)
-  const featuresByRepo: Record<string, typeof featuresWithRuns> = {};
-  featuresWithRuns.forEach((entry) => {
-    const repoKey = entry.feature.repositoryPath;
-    if (!featuresByRepo[repoKey]) {
-      featuresByRepo[repoKey] = [];
-    }
-    featuresByRepo[repoKey].push(entry);
-  });
-
-  const nodes: CanvasNodeType[] = [];
-  const edges: Edge[] = [];
-
-  // First, add nodes for all persisted repositories (including those without features)
-  for (const repo of repositories) {
-    const repoNodeId = `repo-${repo.id}`;
-    nodes.push({
-      id: repoNodeId,
-      type: 'repositoryNode',
-      position: { x: 0, y: 0 },
-      data: { name: repo.name, repositoryPath: repo.path, id: repo.id },
-    });
-
-    const repoFeatures = featuresByRepo[repo.path] ?? [];
-    repoFeatures.forEach(({ feature, run }) => {
-      const agentNode = run?.result?.startsWith('node:') ? run.result.slice(5) : undefined;
-      const lifecycle: FeatureLifecyclePhase =
-        run?.status === 'completed'
-          ? 'maintain'
-          : ((agentNode ? nodeToLifecyclePhase[agentNode] : undefined) ??
-            lifecycleMap[feature.lifecycle] ??
-            'requirements');
-
-      // Resolve blockedBy display name from parent feature
-      let blockedBy: string | undefined;
-      if (feature.parentId && feature.lifecycle === 'Blocked') {
-        const parentEntry = featuresWithRuns.find((e) => e.feature.id === feature.parentId);
-        if (parentEntry) {
-          blockedBy = parentEntry.feature.name;
-        }
-      }
-
-      const nodeData: FeatureNodeData = {
-        name: feature.name,
-        description: feature.description ?? feature.slug,
-        featureId: feature.id,
-        lifecycle,
-        repositoryPath: feature.repositoryPath,
-        branch: feature.branch,
-        specPath: feature.specPath,
-        state: deriveNodeState(feature, run),
-        progress: deriveProgress(feature),
-        ...(run?.agentType && { agentType: run.agentType as FeatureNodeData['agentType'] }),
-        ...(run?.error && { errorMessage: run.error }),
-        ...(blockedBy && { blockedBy }),
-        ...(feature.pr && {
-          pr: {
-            url: feature.pr.url,
-            number: feature.pr.number,
-            status: feature.pr.status,
-            ciStatus: feature.pr.ciStatus,
-            commitHash: feature.pr.commitHash,
-          },
-        }),
-      };
-
-      const featureNodeId = `feat-${feature.id}`;
-      nodes.push({
-        id: featureNodeId,
-        type: 'featureNode',
-        position: { x: 0, y: 0 },
-        data: nodeData,
-      });
-
-      // Child features connect via parent→child dependency edge, not directly to repo
-      if (!feature.parentId) {
-        edges.push({
-          id: `edge-${repoNodeId}-${featureNodeId}`,
-          source: repoNodeId,
-          target: featureNodeId,
-          style: { strokeDasharray: '5 5' },
-        });
-      }
-    });
-  }
-
-  // Add parent→child dependency edges
-  for (const { feature } of featuresWithRuns) {
-    if (feature.parentId) {
-      const parentNodeId = `feat-${feature.parentId}`;
-      const childNodeId = `feat-${feature.id}`;
-      // Only add edge if both nodes exist on the canvas
-      if (nodes.some((n) => n.id === parentNodeId) && nodes.some((n) => n.id === childNodeId)) {
-        edges.push({
-          id: `dep-${parentNodeId}-${childNodeId}`,
-          source: parentNodeId,
-          target: childNodeId,
-          type: 'dependencyEdge',
-        });
-      }
-    }
-  }
+  const { nodes, edges } = buildGraphNodes(repositories, featuresWithRuns);
 
   // Use dagre LR layout for compact, automatic positioning
   const laid = layoutWithDagre(nodes, edges, {

package/web/.next/standalone/src/presentation/web/components/common/base-drawer/base-drawer.stories.tsx

@@ -181,6 +181,32 @@ export const WithHeaderAndFooter: Story = {
   ),
 };
 
+/** Drawer with deployTarget prop showing the dev server bar below the header. */
+export const WithDevServerBar: Story = {
+  render: () => (
+    <DrawerTrigger
+      header={
+        <>
+          <DrawerTitle>Auth Module</DrawerTitle>
+          <DrawerDescription>#f-001</DrawerDescription>
+        </>
+      }
+      deployTarget={{
+        targetId: '#f-001',
+        targetType: 'feature',
+        repositoryPath: '/Users/dev/my-project',
+        branch: 'feat/auth-module',
+      }}
+    >
+      <div className="p-4">
+        <p className="text-muted-foreground text-sm">
+          The deploy bar appears between the header and this content.
+        </p>
+      </div>
+    </DrawerTrigger>
+  ),
+};
+
 /** Drawer with content that exceeds viewport to demonstrate scroll behavior. */
 export const ScrollableContent: Story = {
   render: () => (

package/web/.next/standalone/src/presentation/web/components/common/base-drawer/base-drawer.tsx

@@ -1,8 +1,10 @@
 'use client';
 
-import { XIcon } from 'lucide-react';
+import { XIcon, Play, Square } from 'lucide-react';
 import { cva, type VariantProps } from 'class-variance-authority';
 import { cn } from '@/lib/utils';
+import { ActionButton } from '@/components/common/action-button';
+import { DeploymentStatusBadge } from '@/components/common/deployment-status-badge';
 import {
   Drawer,
   DrawerContent,
@@ -10,6 +12,9 @@ import {
   DrawerFooter,
   DrawerOverlay,
 } from '@/components/ui/drawer';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+import { useDeployAction, type DeployActionInput } from '@/hooks/use-deploy-action';
+import { featureFlags } from '@/lib/feature-flags';
 
 const drawerVariants = cva('', {
   variants: {
@@ -32,6 +37,7 @@ export interface BaseDrawerProps extends VariantProps<typeof drawerVariants> {
   footer?: React.ReactNode;
   className?: string;
   'data-testid'?: string;
+  deployTarget?: DeployActionInput;
 }
 
 export function BaseDrawer({
@@ -44,6 +50,7 @@ export function BaseDrawer({
   footer,
   className,
   'data-testid': testId,
+  deployTarget,
 }: BaseDrawerProps) {
   return (
     <Drawer
@@ -77,6 +84,9 @@ export function BaseDrawer({
         {/* Header slot */}
         {header ? <DrawerHeader>{header}</DrawerHeader> : null}
 
+        {/* Dev server bar — rendered when deployTarget is provided and env deploy is enabled */}
+        {featureFlags.envDeploy && deployTarget ? <DeployBar deployTarget={deployTarget} /> : null}
+
         {/* Scrollable content area */}
         <div className="flex-1 overflow-y-auto">
           <div className="flex flex-col">{children}</div>
@@ -88,3 +98,37 @@ export function BaseDrawer({
     </Drawer>
   );
 }
+
+function DeployBar({ deployTarget }: { deployTarget: DeployActionInput }) {
+  const deployAction = useDeployAction(deployTarget);
+  const isDeploymentActive = deployAction.status === 'Booting' || deployAction.status === 'Ready';
+
+  return (
+    <div data-testid="base-drawer-deploy-bar" className="flex items-center gap-2 px-4 pb-3">
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <span>
+              <ActionButton
+                label={isDeploymentActive ? 'Stop Dev Server' : 'Start Dev Server'}
+                onClick={isDeploymentActive ? deployAction.stop : deployAction.deploy}
+                loading={deployAction.deployLoading || deployAction.stopLoading}
+                error={!!deployAction.deployError}
+                icon={isDeploymentActive ? Square : Play}
+                iconOnly
+                variant="outline"
+                size="icon-sm"
+              />
+            </span>
+          </TooltipTrigger>
+          <TooltipContent>
+            {isDeploymentActive ? 'Stop Dev Server' : 'Start Dev Server'}
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+      {isDeploymentActive ? (
+        <DeploymentStatusBadge status={deployAction.status} url={deployAction.url} />
+      ) : null}
+    </div>
+  );
+}

package/web/.next/standalone/src/presentation/web/components/common/deployment-status-badge/deployment-status-badge.stories.tsx

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { DeploymentState } from '@shepai/core/domain/generated/output';
+import { DeploymentStatusBadge } from './deployment-status-badge';
+
+const meta: Meta<typeof DeploymentStatusBadge> = {
+  title: 'Common/DeploymentStatusBadge',
+  component: DeploymentStatusBadge,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof DeploymentStatusBadge>;
+
+/** Booting — blue badge with animated spinner. */
+export const Booting: Story = {
+  args: { status: DeploymentState.Booting },
+};
+
+/** Ready — green badge with clickable URL and external link icon. */
+export const Ready: Story = {
+  args: { status: DeploymentState.Ready, url: 'http://localhost:3000' },
+};
+
+/** Stopped — renders nothing (badge disappears). */
+export const Stopped: Story = {
+  args: { status: DeploymentState.Stopped },
+};
+
+/** No deployment — renders nothing. */
+export const NoDeployment: Story = {
+  args: { status: null },
+};

package/web/.next/standalone/src/presentation/web/components/common/deployment-status-badge/deployment-status-badge.tsx

@@ -0,0 +1,42 @@
+import { Loader2, ExternalLink } from 'lucide-react';
+import { DeploymentState } from '@shepai/core/domain/generated/output';
+import { Badge } from '@/components/ui/badge';
+
+export interface DeploymentStatusBadgeProps {
+  status: DeploymentState | null;
+  url?: string | null;
+}
+
+export function DeploymentStatusBadge({ status, url }: DeploymentStatusBadgeProps) {
+  switch (status) {
+    case DeploymentState.Booting:
+      return (
+        <Badge className="border-transparent bg-blue-50 text-blue-700 hover:bg-blue-50">
+          <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin" />
+          Starting...
+        </Badge>
+      );
+    case DeploymentState.Ready:
+      return (
+        <Badge className="border-transparent bg-green-50 text-green-700 hover:bg-green-50">
+          <span className="mr-1 inline-block h-2 w-2 rounded-full bg-green-500" />
+          {url ? (
+            <a
+              href={url}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center gap-1 hover:underline"
+              onClick={(e) => e.stopPropagation()}
+            >
+              {url}
+              <ExternalLink className="h-3 w-3" />
+            </a>
+          ) : (
+            'Ready'
+          )}
+        </Badge>
+      );
+    default:
+      return null;
+  }
+}

package/web/.next/standalone/src/presentation/web/components/common/deployment-status-badge/index.ts

@@ -0,0 +1 @@
+export { DeploymentStatusBadge, type DeploymentStatusBadgeProps } from './deployment-status-badge';

package/web/.next/standalone/src/presentation/web/components/common/feature-drawer/feature-drawer.tsx

@@ -70,6 +70,16 @@ export function FeatureDrawer({
           </div>
         ) : undefined
       }
+      deployTarget={
+        selectedNode?.repositoryPath && selectedNode.branch
+          ? {
+              targetId: selectedNode.featureId,
+              targetType: 'feature',
+              repositoryPath: selectedNode.repositoryPath,
+              branch: selectedNode.branch,
+            }
+          : undefined
+      }
     >
       {selectedNode ? (
         <>

package/web/.next/standalone/src/presentation/web/components/common/repository-node/repository-drawer.tsx

@@ -25,6 +25,15 @@ export function RepositoryDrawer({ data, onClose }: RepositoryDrawerProps) {
       size="sm"
       modal={false}
       data-testid="repository-drawer"
+      deployTarget={
+        data?.repositoryPath
+          ? {
+              targetId: data.repositoryPath,
+              targetType: 'repository',
+              repositoryPath: data.repositoryPath,
+            }
+          : undefined
+      }
       header={
         data ? (
           <div data-testid="repository-drawer-header">

package/web/.next/standalone/src/presentation/web/components/common/repository-node/repository-node.tsx

@@ -2,7 +2,7 @@
 
 import { useState } from 'react';
 import { Handle, Position } from '@xyflow/react';
-import { Github, Plus, Code2, Terminal, FolderOpen, Trash2 } from 'lucide-react';
+import { Github, Plus, Code2, Terminal, FolderOpen, Trash2, Play, Square } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { ActionButton } from '@/components/common/action-button';
 import {
@@ -16,6 +16,9 @@ import {
   AlertDialogTitle,
 } from '@/components/ui/alert-dialog';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+import { DeploymentStatusBadge } from '@/components/common/deployment-status-badge';
+import { useDeployAction } from '@/hooks/use-deploy-action';
+import { featureFlags } from '@/lib/feature-flags';
 import type { RepositoryNodeData } from './repository-node-config';
 import { useRepositoryActions } from './use-repository-actions';
 
@@ -24,6 +27,16 @@ export function RepositoryNode({ data }: { data: RepositoryNodeData; [key: strin
   const actions = useRepositoryActions(
     data.repositoryPath ? { repositoryPath: data.repositoryPath } : null
   );
+  const deployAction = useDeployAction(
+    data.repositoryPath
+      ? {
+          targetId: data.repositoryPath,
+          targetType: 'repository',
+          repositoryPath: data.repositoryPath,
+        }
+      : null
+  );
+  const isDeploymentActive = deployAction.status === 'Booting' || deployAction.status === 'Ready';
 
   return (
     <div className="group relative">
@@ -96,7 +109,7 @@ export function RepositoryNode({ data }: { data: RepositoryNodeData; [key: strin
             data.onClick?.();
           }
         }}
-        className="nodrag bg-card flex w-72 cursor-default items-center gap-3 rounded-full border px-4 py-3 shadow-sm"
+        className="nodrag bg-card flex min-w-[18rem] cursor-default items-center gap-3 rounded-full border px-4 py-3 shadow-sm"
       >
         <Github className="text-muted-foreground h-5 w-5 shrink-0" />
         <span data-testid="repository-node-name" className="min-w-0 truncate text-sm font-medium">
@@ -169,6 +182,34 @@ export function RepositoryNode({ data }: { data: RepositoryNodeData; [key: strin
                   <TooltipContent>Open Folder</TooltipContent>
                 </Tooltip>
               </TooltipProvider>
+              {featureFlags.envDeploy ? (
+                <>
+                  <TooltipProvider>
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <span className="flex items-center">
+                          <ActionButton
+                            label={isDeploymentActive ? 'Stop Dev Server' : 'Start Dev Server'}
+                            onClick={isDeploymentActive ? deployAction.stop : deployAction.deploy}
+                            loading={deployAction.deployLoading || deployAction.stopLoading}
+                            error={!!deployAction.deployError}
+                            icon={isDeploymentActive ? Square : Play}
+                            iconOnly
+                            variant="ghost"
+                            size="icon-xs"
+                          />
+                        </span>
+                      </TooltipTrigger>
+                      <TooltipContent>
+                        {isDeploymentActive ? 'Stop Dev Server' : 'Start Dev Server'}
+                      </TooltipContent>
+                    </Tooltip>
+                  </TooltipProvider>
+                  {isDeploymentActive ? (
+                    <DeploymentStatusBadge status={deployAction.status} url={deployAction.url} />
+                  ) : null}
+                </>
+              ) : null}
             </>
           ) : null}
 

package/web/.next/standalone/src/presentation/web/components/common/review-drawer-shell/review-drawer-shell.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { Loader2, Trash2 } from 'lucide-react';
+import { Loader2, Trash2, Play, Square } from 'lucide-react';
 import { BaseDrawer } from '@/components/common/base-drawer';
 import { DrawerTitle, DrawerDescription } from '@/components/ui/drawer';
 import { Button } from '@/components/ui/button';
@@ -16,8 +16,13 @@ import {
   AlertDialogTitle,
   AlertDialogTrigger,
 } from '@/components/ui/alert-dialog';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import { OpenActionMenu } from '@/components/common/open-action-menu';
+import { ActionButton } from '@/components/common/action-button';
 import { useFeatureActions } from '@/components/common/feature-drawer/use-feature-actions';
+import { DeploymentStatusBadge } from '@/components/common/deployment-status-badge';
+import { useDeployAction } from '@/hooks/use-deploy-action';
+import { featureFlags } from '@/lib/feature-flags';
 import type { ReviewDrawerShellProps } from './review-drawer-shell-config';
 
 export function ReviewDrawerShell({
@@ -36,6 +41,13 @@ export function ReviewDrawerShell({
   const actionsInput = repositoryPath && branch ? { repositoryPath, branch, specPath } : null;
   const actions = useFeatureActions(actionsInput);
 
+  const deployTargetInput =
+    featureId && repositoryPath && branch
+      ? { targetId: featureId, targetType: 'feature' as const, repositoryPath, branch }
+      : null;
+  const deployAction = useDeployAction(deployTargetInput);
+  const isDeploymentActive = deployAction.status === 'Booting' || deployAction.status === 'Ready';
+
   return (
     <BaseDrawer
       open={open}
@@ -54,7 +66,7 @@ export function ReviewDrawerShell({
             ) : null}
           </div>
 
-          {/* Action menu + inline delete */}
+          {/* Action row: Open | Deploy → Delete (right-aligned) */}
           {actionsInput ? (
             <div className="flex items-center gap-2 pt-2">
               <OpenActionMenu
@@ -62,54 +74,77 @@ export function ReviewDrawerShell({
                 repositoryPath={actionsInput.repositoryPath}
                 showSpecs={!!specPath}
               />
+              {featureFlags.envDeploy && deployTargetInput ? (
+                <TooltipProvider>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <span>
+                        <ActionButton
+                          label={isDeploymentActive ? 'Stop Dev Server' : 'Start Dev Server'}
+                          onClick={isDeploymentActive ? deployAction.stop : deployAction.deploy}
+                          loading={deployAction.deployLoading || deployAction.stopLoading}
+                          error={!!deployAction.deployError}
+                          icon={isDeploymentActive ? Square : Play}
+                          iconOnly
+                          variant="outline"
+                          size="icon-sm"
+                        />
+                      </span>
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      {isDeploymentActive ? 'Stop Dev Server' : 'Start Dev Server'}
+                    </TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
+              ) : null}
+              {featureFlags.envDeploy && isDeploymentActive ? (
+                <DeploymentStatusBadge status={deployAction.status} url={deployAction.url} />
+              ) : null}
               {onDelete && featureId ? (
-                <>
-                  <div className="bg-border mx-1 h-4 w-px" />
-                  <AlertDialog>
-                    <AlertDialogTrigger asChild>
-                      <Button
-                        variant="ghost"
-                        size="icon-sm"
-                        aria-label="Delete feature"
+                <AlertDialog>
+                  <AlertDialogTrigger asChild>
+                    <Button
+                      variant="ghost"
+                      size="icon-sm"
+                      aria-label="Delete feature"
+                      disabled={isDeleting}
+                      className="text-muted-foreground hover:text-destructive ml-auto"
+                      data-testid="review-drawer-delete"
+                    >
+                      {isDeleting ? (
+                        <Loader2 className="size-4 animate-spin" />
+                      ) : (
+                        <Trash2 className="size-4" />
+                      )}
+                    </Button>
+                  </AlertDialogTrigger>
+                  <AlertDialogContent>
+                    <AlertDialogHeader>
+                      <AlertDialogTitle>Delete feature?</AlertDialogTitle>
+                      <AlertDialogDescription>
+                        This will permanently delete <strong>{featureName}</strong> ({featureId}).
+                        This action cannot be undone.
+                      </AlertDialogDescription>
+                    </AlertDialogHeader>
+                    <AlertDialogFooter>
+                      <AlertDialogCancel disabled={isDeleting}>Cancel</AlertDialogCancel>
+                      <AlertDialogAction
+                        variant="destructive"
                         disabled={isDeleting}
-                        className="text-muted-foreground hover:text-destructive"
-                        data-testid="review-drawer-delete"
+                        onClick={() => onDelete(featureId)}
                       >
                         {isDeleting ? (
-                          <Loader2 className="size-4 animate-spin" />
+                          <>
+                            <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                            Deleting…
+                          </>
                         ) : (
-                          <Trash2 className="size-4" />
+                          'Delete'
                         )}
-                      </Button>
-                    </AlertDialogTrigger>
-                    <AlertDialogContent>
-                      <AlertDialogHeader>
-                        <AlertDialogTitle>Delete feature?</AlertDialogTitle>
-                        <AlertDialogDescription>
-                          This will permanently delete <strong>{featureName}</strong> ({featureId}).
-                          This action cannot be undone.
-                        </AlertDialogDescription>
-                      </AlertDialogHeader>
-                      <AlertDialogFooter>
-                        <AlertDialogCancel disabled={isDeleting}>Cancel</AlertDialogCancel>
-                        <AlertDialogAction
-                          variant="destructive"
-                          disabled={isDeleting}
-                          onClick={() => onDelete(featureId)}
-                        >
-                          {isDeleting ? (
-                            <>
-                              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                              Deleting…
-                            </>
-                          ) : (
-                            'Delete'
-                          )}
-                        </AlertDialogAction>
-                      </AlertDialogFooter>
-                    </AlertDialogContent>
-                  </AlertDialog>
-                </>
+                      </AlertDialogAction>
+                    </AlertDialogFooter>
+                  </AlertDialogContent>
+                </AlertDialog>
               ) : null}
             </div>
           ) : null}