script protection update

frontend/src/components/ScriptManager.tsx

@@ -10,6 +10,7 @@ import {
   UploadOutlined,
 } from '@ant-design/icons';
 import {
+  Badge,
   Button,
   Checkbox,
   Col,
@@ -484,6 +485,12 @@ export default function ScriptsManager({ onOpenInEditor }: { onOpenInEditor?: (c
     setAddReqModalVisible(true);
   }, []);
 
+  const renderStatus = useCallback((isActive: boolean) => {
+    return <Badge color={isActive ? '#52c41a' : '#ff4d4f'} text={isActive ? 'Active' : 'Inactive'} />;
+  }, []);
+
+  const isScriptActive = useCallback((record: ScriptWithStatus) => record.mappings.some((mapping) => mapping.active), []);
+
   const saveAddRequirements = useCallback(async () => {
     if (!addReqTarget) return;
     let payload: File | Blob | null = null;
@@ -529,7 +536,18 @@ export default function ScriptsManager({ onOpenInEditor }: { onOpenInEditor?: (c
         title: 'Name',
         dataIndex: 'name',
         key: 'name',
-        render: (text) => <code>{text}</code>,
+        render: (_: unknown, record: ScriptWithStatus) => (
+          <Space>
+            <code>{record.name}</code>
+            {record.is_protected_example ? <Badge color="#1677ff" text="Protected" /> : null}
+          </Space>
+        ),
+      },
+      {
+        title: 'Status',
+        key: 'status',
+        width: 120,
+        render: (_: unknown, record: ScriptWithStatus) => renderStatus(isScriptActive(record)),
       },
       {
         title: 'Path',
@@ -540,7 +558,7 @@ export default function ScriptsManager({ onOpenInEditor }: { onOpenInEditor?: (c
       {
         title: 'Requirements',
         key: 'requirements',
-        render: (_: any, record: ScriptWithStatus) =>
+        render: (_: unknown, record: ScriptWithStatus) =>
           record.requirements_exists ? (
             <Space>
               <IconButtonTooltip
@@ -548,25 +566,33 @@ export default function ScriptsManager({ onOpenInEditor }: { onOpenInEditor?: (c
                 onClick={() => handleDownloadRequirements(record.name)}
                 icon={<DownloadOutlined />}
               />
-              <IconButtonTooltip
-                title="Edit requirements"
-                onClick={() => handleEditRequirements(record.name)}
-                icon={<EditOutlined />}
-              />
-              <IconButtonTooltip
-                title="Delete requirements"
-                danger
-                onClick={() => handleDeleteRequirements(record.name)}
-                icon={<DeleteOutlined />}
-              />
+              {!record.requirements_is_protected_example ? (
+                <IconButtonTooltip
+                  title="Edit requirements"
+                  onClick={() => handleEditRequirements(record.name)}
+                  icon={<EditOutlined />}
+                />
+              ) : null}
+              {!record.requirements_is_protected_example ? (
+                <IconButtonTooltip
+                  title="Delete requirements"
+                  danger
+                  onClick={() => handleDeleteRequirements(record.name)}
+                  icon={<DeleteOutlined />}
+                />
+              ) : null}
             </Space>
           ) : (
             <Space>
-              <IconButtonTooltip
-                title="Add requirements"
-                onClick={() => openAddRequirements(record.name)}
-                icon={<FileAddOutlined />}
-              />
+              {!record.is_protected_example ? (
+                <IconButtonTooltip
+                  title="Add requirements"
+                  onClick={() => openAddRequirements(record.name)}
+                  icon={<FileAddOutlined />}
+                />
+              ) : (
+                <span style={{ color: '#8c8c8c' }}>Protected</span>
+              )}
             </Space>
           ),
       },
@@ -574,18 +600,20 @@ export default function ScriptsManager({ onOpenInEditor }: { onOpenInEditor?: (c
         title: 'Actions',
         key: 'actions',
         width: 240,
-        render: (_: any, record: ScriptWithStatus) => (
+        render: (_: unknown, record: ScriptWithStatus) => (
           <Space>
             <IconButtonTooltip
               title="Download script"
               onClick={() => handleDownload(record.name)}
               icon={<DownloadOutlined />}
             />
-            <IconButtonTooltip
-              title="Open in editor"
-              onClick={() => openInEditorFromServer(record.name)}
-              icon={<EditOutlined />}
-            />
+            {!record.is_protected_example ? (
+              <IconButtonTooltip
+                title="Open in editor"
+                onClick={() => openInEditorFromServer(record.name)}
+                icon={<EditOutlined />}
+              />
+            ) : null}
             <IconButtonTooltip
               title="Enable"
               onClick={() => {
@@ -594,17 +622,28 @@ export default function ScriptsManager({ onOpenInEditor }: { onOpenInEditor?: (c
               }}
               icon={<PlayCircleOutlined />}
             />
-            <Popconfirm title={`Delete ${record.name}?`} onConfirm={() => handleDelete(record.name)}>
-              <Tooltip title="Delete script">
-                <Button danger size="small" icon={<DeleteOutlined />} />
-              </Tooltip>
-            </Popconfirm>
+            {!record.is_protected_example ? (
+              <Popconfirm title={`Delete ${record.name}?`} onConfirm={() => handleDelete(record.name)}>
+                <Tooltip title="Delete script">
+                  <Button danger size="small" icon={<DeleteOutlined />} />
+                </Tooltip>
+              </Popconfirm>
+            ) : null}
           </Space>
         ),
       },
     ],
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [],
+    [
+      handleDelete,
+      handleDeleteRequirements,
+      handleDownload,
+      handleDownloadRequirements,
+      handleEditRequirements,
+      isScriptActive,
+      openAddRequirements,
+      openInEditorFromServer,
+      renderStatus,
+    ],
   );
 
   const nestedColumns = useMemo(
@@ -621,7 +660,12 @@ export default function ScriptsManager({ onOpenInEditor }: { onOpenInEditor?: (c
         key: 'qnum',
         render: (q: number | null) => (q == null ? '-' : q),
       },
-      { title: 'Active', dataIndex: 'active', key: 'active', render: (a: boolean) => (a ? 'yes' : 'no') },
+      {
+        title: 'Status',
+        dataIndex: 'active',
+        key: 'active',
+        render: (active: boolean) => renderStatus(active),
+      },
       { title: 'Extra', dataIndex: ['parsed', 'extra'], key: 'extra', render: (e: string | null) => e || '-' },
       {
         title: 'ExecStart',
@@ -645,7 +689,7 @@ export default function ScriptsManager({ onOpenInEditor }: { onOpenInEditor?: (c
         ),
       },
     ],
-    [handleDisableInstance],
+    [handleDisableInstance, renderStatus],
   );
 
   const expandable = useMemo(