Reset a node to maintenance mode.

src/components/ClusterNodesComponent.tsx

@@ -4,7 +4,7 @@ import { Button } from './ui/button';
 import { Badge } from './ui/badge';
 import { Alert } from './ui/alert';
 import { Input } from './ui/input';
-import { Cpu, HardDrive, Network, Monitor, CheckCircle, AlertCircle, BookOpen, ExternalLink, Loader2 } from 'lucide-react';
+import { Cpu, HardDrive, Network, Monitor, CheckCircle, AlertCircle, BookOpen, ExternalLink, Loader2, RotateCcw } from 'lucide-react';
 import { useInstanceContext } from '../hooks/useInstanceContext';
 import { useNodes, useDiscoveryStatus } from '../hooks/useNodes';
 import { useCluster } from '../hooks/useCluster';
@@ -36,6 +36,8 @@ export function ClusterNodesComponent() {
     updateNode,
     applyNode,
     isApplying,
+    resetNode,
+    isResetting,
     refetch
   } = useNodes(currentInstance);
 
@@ -194,14 +196,12 @@ export function ClusterNodesComponent() {
       nodeName: drawerState.node.hostname,
       updates: {
         role: data.role,
-        config: {
+        disk: data.disk,
-          disk: data.disk,
+        target_ip: data.targetIp,
-          target_ip: data.targetIp,
+        current_ip: data.currentIp,
-          current_ip: data.currentIp,
+        interface: data.interface,
-          interface: data.interface,
+        schematic_id: data.schematicId,
-          schematic_id: data.schematicId,
+        maintenance: data.maintenance,
-          maintenance: data.maintenance,
-        },
       },
     });
     closeDrawer();
@@ -214,6 +214,16 @@ export function ClusterNodesComponent() {
     await applyNode(drawerState.node.hostname);
   };
 
+  const handleResetNode = (node: Node) => {
+    if (
+      confirm(
+        `Reset node ${node.hostname}?\n\nThis will wipe the node and return it to maintenance mode. The node will need to be reconfigured.`
+      )
+    ) {
+      resetNode(node.hostname);
+    }
+  };
+
   const handleDeleteNode = (hostname: string) => {
     if (!currentInstance) return;
     if (confirm(`Are you sure you want to remove node ${hostname}?`)) {
@@ -576,10 +586,21 @@ export function ClusterNodesComponent() {
                           )}
                         </div>
                       )}
-                      {node.talosVersion && (
+                      {(node.version || node.schematic_id) && (
                         <div className="text-xs text-muted-foreground mt-1">
-                          Talos: {node.talosVersion}
+                          {node.version && <span>Talos: {node.version}</span>}
-                          {node.kubernetesVersion && ` • K8s: ${node.kubernetesVersion}`}
+                          {node.version && node.schematic_id && <span> • </span>}
+                          {node.schematic_id && (
+                            <span
+                              title={node.schematic_id}
+                              onClick={() => {
+                                navigator.clipboard.writeText(node.schematic_id!);
+                              }}
+                              className="cursor-pointer hover:text-primary hover:underline"
+                            >
+                              Schema: {node.schematic_id.substring(0, 8)}...
+                            </span>
+                          )}
                         </div>
                       )}
                     </div>
@@ -600,6 +621,18 @@ export function ClusterNodesComponent() {
                           {isApplying ? <Loader2 className="h-4 w-4 animate-spin" /> : 'Apply'}
                         </Button>
                       )}
+                      {!node.maintenance && (node.configured || node.applied) && (
+                        <Button
+                          size="sm"
+                          variant="outline"
+                          onClick={() => handleResetNode(node)}
+                          disabled={isResetting}
+                          className="border-orange-500 text-orange-500 hover:bg-orange-50 hover:text-orange-600"
+                        >
+                          <RotateCcw className="h-4 w-4 mr-1" />
+                          Reset
+                        </Button>
+                      )}
                       <Button
                         size="sm"
                         variant="destructive"

src/components/apps/AppDetailModal.tsx

@@ -221,7 +221,7 @@ export function AppDetailModal({
                           <ReactMarkdown
                             components={{
                               // Style code blocks
-                              code: ({node, inline, className, children, ...props}) => {
+                              code: ({inline, children, ...props}) => {
                                 return inline ? (
                                   <code className="bg-muted px-1 py-0.5 rounded text-sm" {...props}>
                                     {children}
@@ -233,7 +233,7 @@ export function AppDetailModal({
                                 );
                               },
                               // Make links open in new tab
-                              a: ({node, children, href, ...props}) => (
+                              a: ({children, href, ...props}) => (
                                 <a href={href} target="_blank" rel="noopener noreferrer" className="text-primary hover:underline" {...props}>
                                   {children}
                                 </a>

src/components/nodes/NodeForm.tsx

@@ -28,6 +28,7 @@ interface NodeFormProps {
   detection?: HardwareInfo;
   onSubmit: (data: NodeFormData) => Promise<void>;
   onApply?: (data: NodeFormData) => Promise<void>;
+  onCancel?: () => void;
   submitLabel?: string;
   showApplyButton?: boolean;
   instanceName?: string;
@@ -123,6 +124,7 @@ export function NodeForm({
   detection,
   onSubmit,
   onApply,
+  onCancel,
   submitLabel = 'Save',
   showApplyButton = false,
   instanceName,
@@ -557,37 +559,37 @@ export function NodeForm({
         </p>
       </div>
 
-      <div className="flex items-center gap-2">
-        <input
-          id="maintenance"
-          type="checkbox"
-          {...register('maintenance')}
-          className="h-4 w-4 rounded border-input"
-        />
-        <Label htmlFor="maintenance" className="font-normal">
-          Start in maintenance mode
-        </Label>
-      </div>
-
       <div className="flex gap-2">
-        <Button
+        {onCancel && (
-          type="submit"
+          <Button
-          disabled={isSubmitting}
+            type="button"
-          className="flex-1"
+            variant="outline"
-        >
+            onClick={() => {
-          {isSubmitting ? 'Saving...' : submitLabel}
+              reset();
-        </Button>
+              onCancel();
-
+            }}
-        {showApplyButton && onApply && (
+            disabled={isSubmitting}
+          >
+            Cancel
+          </Button>
+        )}
+        {showApplyButton && onApply ? (
           <Button
             type="button"
             onClick={handleSubmit(onApply)}
             disabled={isSubmitting}
-            variant="secondary"
             className="flex-1"
           >
             {isSubmitting ? 'Applying...' : 'Apply Configuration'}
           </Button>
+        ) : (
+          <Button
+            type="submit"
+            disabled={isSubmitting}
+            className="flex-1"
+          >
+            {isSubmitting ? 'Saving...' : submitLabel}
+          </Button>
         )}
       </div>
     </form>

src/components/nodes/NodeFormDrawer.tsx

@@ -58,6 +58,7 @@ export function NodeFormDrawer({
         detection={detection}
         onSubmit={onSubmit}
         onApply={onApply}
+        onCancel={onClose}
         submitLabel={mode === 'add' ? 'Add Node' : 'Save'}
         showApplyButton={mode === 'configure'}
         instanceName={instanceName}

src/components/services/ServiceConfigEditor.tsx

@@ -18,10 +18,12 @@ interface ServiceConfigEditorProps {
 export function ServiceConfigEditor({
   instanceName,
   serviceName,
-  manifest: _manifestProp, // Ignore the prop, fetch from status instead
+  manifest: _manifest, // Ignore the prop, fetch from status instead
   onClose,
   onSuccess,
 }: ServiceConfigEditorProps) {
+  // Suppress unused variable warning - kept for API compatibility
+  void _manifest;
   const { config, isLoading: configLoading, updateConfig, isUpdating } = useServiceConfig(instanceName, serviceName);
   const { data: statusData, isLoading: statusLoading } = useServiceStatus(instanceName, serviceName);
 

src/hooks/useNodes.ts

@@ -71,6 +71,13 @@ export function useNodes(instanceName: string | null | undefined) {
     mutationFn: (ip: string) => nodesApi.getHardware(instanceName!, ip),
   });
 
+  const resetMutation = useMutation({
+    mutationFn: (nodeName: string) => nodesApi.reset(instanceName!, nodeName),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['instances', instanceName, 'nodes'] });
+    },
+  });
+
   return {
     nodes: nodesQuery.data?.nodes || [],
     isLoading: nodesQuery.isLoading,
@@ -101,6 +108,9 @@ export function useNodes(instanceName: string | null | undefined) {
     isFetchingTemplates: fetchTemplatesMutation.isPending,
     cancelDiscovery: cancelDiscoveryMutation.mutate,
     isCancellingDiscovery: cancelDiscoveryMutation.isPending,
+    resetNode: resetMutation.mutate,
+    isResetting: resetMutation.isPending,
+    resetError: resetMutation.error,
   };
 }
 

src/services/api/nodes.ts

@@ -59,4 +59,8 @@ export const nodesApi = {
   async fetchTemplates(instanceName: string): Promise<OperationResponse> {
     return apiClient.post(`/api/v1/instances/${instanceName}/nodes/fetch-templates`);
   },
+
+  async reset(instanceName: string, nodeName: string): Promise<OperationResponse> {
+    return apiClient.post(`/api/v1/instances/${instanceName}/nodes/${nodeName}/reset`);
+  },
 };