Surface entity lifecycle status control (apps + components)

README.md

@@ -13,8 +13,9 @@ Simple, open-source web UI for browsing SOVD (Service-Oriented Vehicle Diagnosti
 ros2_medkit_web_ui is a lightweight single-page application that connects to a SOVD server and visualizes the entity hierarchy. It provides:
 
 - **Server Connection Dialog** - Enter the URL of your SOVD server (supports both `http://ip:port` and `ip:port` formats)
-- **Entity Tree Sidebar** - Browse the hierarchical structure of SOVD entities with lazy-loading
+- **Entity Tree Sidebar** - Browse the hierarchical structure of SOVD entities with lazy-loading, with a readiness lamp on app and component nodes (a green disc for ready, an amber ring for not ready, a grey square for a readiness the UI has not established). The lamp is re-read while the branch is open, so it tracks an entity that stops or comes back
 - **Entity Detail Panel** - View raw JSON details of any selected entity
+- **Entity Lifecycle Status Control** - View readiness and request lifecycle transitions (start, restart, force-restart, shutdown, force-shutdown) for apps and components, degrading gracefully on an entity with no lifecycle provider, without taking the entities that have one with it. Actions are gated by the current status (a transition the current status does not allow is marked unavailable and rejected, and stays focusable so the tooltip explaining why reaches a screen reader), and every destructive transition (all but Start) asks for confirmation before dispatch. A transition is only reported as requested when the gateway accepts it; because acceptance is not completion, the readiness is dropped and re-established by the refresh rather than read back straight away
 
 This tool is designed for developers and integrators working with SOVD-compatible systems who need a quick way to explore and debug the entity structure.
 

package.json

@@ -18,7 +18,7 @@
         "test:coverage": "vitest --coverage",
         "format": "prettier --write .",
         "format:check": "prettier --check .",
-        "typecheck": "tsc --noEmit",
+        "typecheck": "tsc -b --emitDeclarationOnly false --noEmit",
         "prepare": "husky"
     },
     "lint-staged": {

src/components/AppsPanel.tsx

@@ -11,6 +11,7 @@ import {
     isResourceTabId,
     type ResourceTabId,
 } from '@/components/ResourceTabs';
+import { EntityStatusControl } from '@/components/EntityStatusControl';
 import type { ComponentTopic, Operation, Fault } from '@/lib/types';
 
 type AppTab = 'overview' | ResourceTabId;
@@ -136,6 +137,11 @@ export function AppsPanel({ appId, appName, fqn, nodeName, namespace, componentI
                             </CardDescription>
                         </div>
                     </div>
+
+                    {/* Lifecycle status control (gateway 0.6.0 lifecycle API) */}
+                    <div className="mt-4">
+                        <EntityStatusControl entityType="apps" entityId={appId} />
+                    </div>
                 </CardHeader>
 
                 {/* Tab Navigation */}

src/components/EntityDetailPanel.test.tsx

@@ -14,6 +14,7 @@
 
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { render, screen, waitFor } from '@testing-library/react';
+import { TooltipProvider } from '@/components/ui/tooltip';
 import { EntityDetailPanel } from './EntityDetailPanel';
 
 // Mock heavy child components - we only care about the top-level routing
@@ -49,6 +50,9 @@ vi.mock('@/lib/store', () => ({
     // The breadcrumb builder resolves segment types via findNode; these tests
     // don't load a tree, so it always falls back to position-based inference.
     findNode: () => null,
+    // EntityStatusControl (rendered for component/subcomponent entities) reads
+    // the status cache keyed by entityStatusKey.
+    entityStatusKey: (entityType: string, entityId: string) => `${entityType}:${entityId}`,
 }));
 
 function setStore(overrides: Record<string, unknown>) {
@@ -63,6 +67,12 @@ function setStore(overrides: Record<string, unknown>) {
         refreshSelectedEntity: mockRefreshSelectedEntity,
         prefetchResourceCounts: mockPrefetchResourceCounts,
         fetchEntityData: mockFetchEntityData,
+        // EntityStatusControl reads these from the store; provide inert values
+        // so the rendered control mounts without touching the network.
+        client: null,
+        statusByEntity: {},
+        actuationByEntity: {},
+        watchEntityStatus: vi.fn(() => () => {}),
         ...overrides,
     };
 }
@@ -84,7 +94,13 @@ describe('EntityDetailPanel - nested entity types', () => {
             },
         });
 
-        render(<EntityDetailPanel onConnectClick={() => {}} />);
+        // App.tsx wraps the whole tree in a TooltipProvider, and the panel
+        // renders tooltips for any disabled lifecycle action.
+        render(
+            <TooltipProvider>
+                <EntityDetailPanel onConnectClick={() => {}} />
+            </TooltipProvider>
+        );
 
         // Bug repro: subcomponent should fetch resource counts using the
         // 'components' entity type (gateway routes subcomponents through
@@ -115,7 +131,13 @@ describe('EntityDetailPanel - nested entity types', () => {
             },
         });
 
-        render(<EntityDetailPanel onConnectClick={() => {}} />);
+        // App.tsx wraps the whole tree in a TooltipProvider, and the panel
+        // renders tooltips for any disabled lifecycle action.
+        render(
+            <TooltipProvider>
+                <EntityDetailPanel onConnectClick={() => {}} />
+            </TooltipProvider>
+        );
 
         // Bug repro: subarea should fetch resource counts using the 'areas'
         // entity type (gateway routes subareas through /api/v1/areas/{id}/...).

src/components/EntityDetailPanel.tsx

@@ -31,6 +31,7 @@ import { FunctionsPanel } from '@/components/FunctionsPanel';
 import { ServerInfoPanel } from '@/components/ServerInfoPanel';
 import { FaultsDashboard } from '@/components/FaultsDashboard';
 import { UpdatesDashboard } from '@/components/UpdatesDashboard';
+import { EntityStatusControl } from '@/components/EntityStatusControl';
 import { useAppStore, findNode, type AppState } from '@/lib/store';
 import type { ComponentTopic, Parameter, SovdResourceEntityType } from '@/lib/types';
 
@@ -778,6 +779,11 @@ export function EntityDetailPanel({ onConnectClick, viewMode = 'entity', onEntit
                                         </div>
                                         <div>
                                             <CardTitle className="text-xl">{selectedEntity.name}</CardTitle>
+                                            {selectedEntity.description && (
+                                                <p className="text-sm text-muted-foreground">
+                                                    {selectedEntity.description}
+                                                </p>
+                                            )}
                                             <CardDescription className="flex items-center gap-2">
                                                 <Badge variant="outline">{selectedEntity.type}</Badge>
                                                 <span className="text-muted-foreground">•</span>
@@ -803,6 +809,12 @@ export function EntityDetailPanel({ onConnectClick, viewMode = 'entity', onEntit
                                         </Button>
                                     </div>
                                 </div>
+                                {/* Lifecycle status control (gateway 0.6.0 lifecycle API) */}
+                                {isComponent && (
+                                    <div className="mt-4">
+                                        <EntityStatusControl entityType="components" entityId={entityId} />
+                                    </div>
+                                )}
                             </CardHeader>
 
                             {/* Tab Navigation for Components */}