firewall + scripts working

frontend/src/App.css

@@ -3,4 +3,20 @@
   margin: 0 auto;
   padding: 2rem;
   text-align: center;
-}
+}
+
+.ant-notification-notice {
+  padding: 0px;
+  margin: 0;
+}
+
+.ant-notification {
+  left: 70% !important;
+  transform: translateX(-50%);
+}
+
+.ant-notification-topRight,
+.ant-notification-topLeft {
+  left: 70% !important;
+  right: auto !important;
+}

frontend/src/App.tsx

@@ -1,4 +1,4 @@
-import { Layout } from 'antd';
+import { Layout, notification } from 'antd';
 import { useState } from 'react';
 import { Outlet } from 'react-router-dom';
 import './App.css';
@@ -8,6 +8,14 @@ import Sidebar from './Layout/Sidebar';
 
 const { Content, Footer } = Layout;
 
+notification.config({
+  placement: 'topRight', // topLeft | topRight | bottomLeft | bottomRight
+  top: 20, // distance from top
+  bottom: 24, // distance from bottom
+  duration: 3, // auto close time (seconds)
+  maxCount: 3, // max notifications shown
+});
+
 export default function App() {
   const [collapsed, setCollapsed] = useState(false);
   return (

frontend/src/components/FireWallAddChainModal.tsx

@@ -14,11 +14,11 @@ import {
   Space,
   Spin,
   Typography,
-  message,
+  notification,
 } from 'antd';
 import { ReactElement, useEffect, useState } from 'react';
 import { execFirewallRaw, fetchRuleset } from '../api/apiClient';
-import { CmdResult, ExecResult } from '../types/firewall';
+import type { CmdResult, ExecResult } from '../types/firewall';
 
 const { Paragraph, Text } = Typography;
 const { Option } = Select;
@@ -30,7 +30,12 @@ type TableProp = {
 
 type Props = {
   open: boolean;
-  onClose: () => void;
+  /**
+   * onClose may be called with (created?: boolean).
+   * If created === true the parent can decide to refresh and optionally show notifications.
+   * If undefined or false, it's a plain close.
+   */
+  onClose?: (created?: boolean) => void;
   table?: TableProp; // if provided, family & tableName are prefilled & readonly
   startOnPreview?: boolean;
   onSuccess?: () => void;
@@ -60,13 +65,14 @@ export default function FirewallAddChainModal({
   const [results, setResults] = useState<CmdResult[]>([]);
   const [selectedFamily, setSelectedFamily] = useState<string>(table?.family ?? 'bridge');
 
-  // set defaults and prefill when modal opens or table prop changes
+  const isPrefilled = Boolean(table?.family && table?.name);
+
+  // init form values when modal opens or table prop changes
   useEffect(() => {
-    // only prefill family/tableName if provided by prop
     form.setFieldsValue({
       family: table?.family ?? 'bridge',
       tableName: table?.name ?? 'filter',
-      // intentionally do NOT set chainName here so user input is preserved normally
+      // Do not override chainName if the user has typed it previously
       type: 'filter',
       hook: 'forward',
       priority: 0,
@@ -94,36 +100,36 @@ export default function FirewallAddChainModal({
         setRulesetEmpty(false);
       }
     } catch (err: any) {
-      // don't block UI — warn user
-      message.warning('Could not load ruleset: ' + (err?.message ?? String(err)));
+      notification.warning({
+        message: 'Could not load ruleset',
+        description: err?.message ?? String(err),
+        duration: 6,
+      });
+      setRulesetEmpty(false);
     } finally {
       setLoadingRuleset(false);
     }
   }
 
-  // Build add chain command — now reads chainName from values OR live form value
-  function buildCommands(values: any): string[] {
-    const family = values.family ?? form.getFieldValue('family') ?? table?.family ?? 'bridge';
-    const tableName = values.tableName ?? form.getFieldValue('tableName') ?? table?.name ?? 'filter';
+  // Build add chain command — respects provided values or live form values
+  function buildCommands(values?: any): string[] {
+    const vals = values ?? form.getFieldsValue();
 
-    // prefer explicitly provided values.chainName, otherwise read from form live state
-    const chainFromValues =
-      values && typeof values.chainName === 'string' && values.chainName.trim().length > 0
-        ? values.chainName.trim()
-        : undefined;
-    const chainFromForm = form.getFieldValue('hook');
-    const chain =
-      chainFromValues ||
-      (typeof chainFromForm === 'string' && chainFromForm.trim().length > 0 ? chainFromForm.trim() : undefined) ||
-      'mychain';
+    const family = (vals.family ?? table?.family ?? 'bridge').trim();
+    const tableName = (vals.tableName ?? table?.name ?? 'filter').trim();
 
-    const type = values.type ?? form.getFieldValue('type') ?? 'filter';
-    const hook = values.hook ?? form.getFieldValue('hook') ?? 'forward';
+    const type = (vals.type ?? 'filter').trim();
+    const hook = (vals.hook ?? 'forward').trim();
     const priority =
-      typeof (values.priority ?? form.getFieldValue('priority')) === 'number'
-        ? (values.priority ?? form.getFieldValue('priority'))
-        : 0;
-    const policy = values.policy ?? form.getFieldValue('policy') ?? '';
+      typeof vals.priority === 'number'
+        ? vals.priority
+        : Number.isFinite(Number(vals.priority))
+          ? Number(vals.priority)
+          : 0;
+    const policy = vals.policy ?? '';
+
+    // chain name: prefer explicit chainName else fallback to hook (less ideal) else 'mychain'
+    const chain = hook;
 
     const policyPart = policy ? ` policy ${policy} ;` : '';
     const cmd = `add chain ${family} ${tableName} ${chain} { type ${type} hook ${hook} priority ${priority} ;${policyPart} }`;
@@ -150,20 +156,32 @@ export default function FirewallAddChainModal({
     setResults(acc);
     setRunning(false);
 
-    // refresh ruleset after running
+    // refresh ruleset shown in modal
     try {
       await refreshRuleset();
     } catch {
-      /* ignore - refreshRuleset handles messaging */
+      /* ignored, refreshRuleset already notified on failure */
     }
 
     const hadError = acc.some((r) => r.err);
     if (!hadError) {
-      message.success('Chain created and ruleset refreshed');
-      onClose();
+      // success notification inside the modal (not global refresh notification)
+      notification.success({
+        message: 'Chain created',
+        description: 'Chain created and ruleset refreshed locally in the modal.',
+        duration: 4,
+      });
+
+      // Inform parent that a resource was created.
+      // Parent can decide whether to refresh and whether to show a notification.
+      onClose?.(true);
       if (onSuccess) onSuccess();
     } else {
-      message.error('Some commands returned errors — see results in the modal');
+      notification.error({
+        message: 'Some commands returned errors',
+        description: 'See execution results below for details.',
+        duration: 6,
+      });
       setStep(1);
     }
   }
@@ -173,7 +191,7 @@ export default function FirewallAddChainModal({
       <Space>
         <Button
           onClick={() => {
-            if (step === 0) onClose();
+            if (step === 0) onClose?.(false);
             else setStep(0);
           }}
         >
@@ -184,22 +202,30 @@ export default function FirewallAddChainModal({
           <Space>
             <Button
               icon={<CopyOutlined />}
-              onClick={() => {
+              onClick={async () => {
                 const txt = buildCommands(form.getFieldsValue()).join('\n');
-                navigator.clipboard.writeText(txt).then(() => message.success('Command copied'));
+                try {
+                  await navigator.clipboard.writeText(txt);
+                  notification.success({ message: 'Command copied to clipboard' });
+                } catch {
+                  notification.warning({ message: 'Unable to copy to clipboard' });
+                }
               }}
             >
               Copy Command
             </Button>
+
             <Button
               type="primary"
               onClick={async () => {
-                // validate required fields before going to preview
                 try {
-                  await form.validateFields(['chainName', ...(table ? [] : ['tableName', 'family'])]);
+                  // validate name fields: chainName required; if not prefilled, tableName & family required
+                  const requiredFields = ['chainName'];
+                  if (!isPrefilled) requiredFields.push('tableName', 'family');
+                  await form.validateFields(requiredFields as any);
                   setStep(1);
-                } catch (e) {
-                  // validation errors shown by AntD
+                } catch {
+                  // AntD will show validation messages; no extra handling required
                 }
               }}
             >
@@ -221,7 +247,7 @@ export default function FirewallAddChainModal({
 
   if (loadingRuleset) {
     return (
-      <Modal title="Add Chain" open={open} onCancel={onClose} footer={null} width={800}>
+      <Modal title="Add Chain" open={open} onCancel={() => onClose?.(false)} footer={null} width={800} destroyOnClose>
         <div style={{ textAlign: 'center', padding: 28 }}>
           <Spin />
         </div>
@@ -229,10 +255,15 @@ export default function FirewallAddChainModal({
     );
   }
 
-  const isPrefilled = Boolean(table?.family && table?.name);
-
   return (
-    <Modal title="Add Chain" open={open} onCancel={onClose} width={800} footer={renderFooter()} destroyOnClose>
+    <Modal
+      title="Add Chain"
+      open={open}
+      onCancel={() => onClose?.(false)}
+      width={800}
+      footer={renderFooter()}
+      destroyOnClose
+    >
       {/* Step 0: Form */}
       {step === 0 && (
         <div>
@@ -346,9 +377,14 @@ export default function FirewallAddChainModal({
             <Space style={{ marginTop: 12 }}>
               <Button
                 icon={<CopyOutlined />}
-                onClick={() => {
+                onClick={async () => {
                   const txt = buildCommands(form.getFieldsValue()).join('\n');
-                  navigator.clipboard.writeText(txt).then(() => message.success('Command copied'));
+                  try {
+                    await navigator.clipboard.writeText(txt);
+                    notification.success({ message: 'Command copied to clipboard' });
+                  } catch {
+                    notification.warning({ message: 'Unable to copy to clipboard' });
+                  }
                 }}
               >
                 Copy command

frontend/src/components/FireWallAddTableModal.tsx

@@ -1,5 +1,5 @@
 // src/components/FirewallManager.tsx
-import { Button, Card, Col, Form, Input, Modal, Row, Select, Space, Spin, Typography, message } from 'antd';
+import { Button, Card, Col, Form, Input, Modal, Row, Select, Space, Spin, Typography, notification } from 'antd';
 import { ReactElement, useEffect, useState } from 'react';
 import { execFirewallRaw, fetchRuleset } from '../api/apiClient';
 
@@ -20,7 +20,7 @@ type CmdResult = {
 
 type Props = {
   open: boolean;
-  onClose: () => void;
+  onClose?: (created?: boolean) => void; // created === true when a table was created
   startOnPreview?: boolean;
 };
 
@@ -70,7 +70,13 @@ export default function FirewallAddTableModal({ open, onClose, startOnPreview =
         setRulesetEmpty(false);
       }
     } catch (err: any) {
-      message.warning('Could not load ruleset: ' + (err?.message ?? String(err)));
+      // use notification instead of message
+      notification.warning({
+        message: 'Could not load ruleset',
+        description: err?.message ?? String(err),
+        duration: 6,
+      });
+      setRulesetEmpty(false);
     } finally {
       setLocalLoadingRuleset(false);
     }
@@ -78,8 +84,8 @@ export default function FirewallAddTableModal({ open, onClose, startOnPreview =
 
   // Build commands: only create table
   function buildCommands(values: any): string[] {
-    const family = values.family ?? 'bridge';
-    const table = values.tableName ?? 'filter';
+    const family = (values.family ?? 'bridge').trim();
+    const table = (values.tableName ?? 'filter').trim();
     return [`add table ${family} ${table}`];
   }
 
@@ -107,15 +113,25 @@ export default function FirewallAddTableModal({ open, onClose, startOnPreview =
     try {
       await refreshRuleset();
     } catch {
-      // ignore — refreshRuleset handles messaging
+      // ignore — refreshRuleset handles notifications on error
     }
 
     const hadError = acc.some((r) => r.err);
     if (!hadError) {
-      message.success('Table created and ruleset refreshed');
-      onClose();
+      // success -> notify briefly and inform parent that a resource was created
+      notification.success({
+        message: 'Table created',
+        description: 'Table was created and ruleset has been refreshed locally in the modal.',
+        duration: 4,
+      });
+      onClose?.(true); // signal parent to refresh and close modal
     } else {
-      message.error('Some commands returned errors — see results in the modal');
+      // error -> open results view and show notification
+      notification.error({
+        message: 'Some commands returned errors',
+        description: 'See execution results below for details.',
+        duration: 6,
+      });
       setStep(1);
     }
   }
@@ -125,7 +141,7 @@ export default function FirewallAddTableModal({ open, onClose, startOnPreview =
       <Space>
         <Button
           onClick={() => {
-            if (step === 0) onClose();
+            if (step === 0) onClose?.(false);
             else setStep(0);
           }}
         >
@@ -134,7 +150,21 @@ export default function FirewallAddTableModal({ open, onClose, startOnPreview =
 
         {step === 0 ? (
           <Space>
-            <Button type="primary" onClick={() => setStep(1)}>
+            <Button
+              type="primary"
+              onClick={() => {
+                // validate form before preview
+                form
+                  .validateFields()
+                  .then(() => setStep(1))
+                  .catch(() =>
+                    notification.warning({
+                      message: 'Validation',
+                      description: 'Please fill required fields before preview.',
+                    }),
+                  );
+              }}
+            >
               Preview
             </Button>
           </Space>
@@ -154,7 +184,7 @@ export default function FirewallAddTableModal({ open, onClose, startOnPreview =
   // show spinner while checking ruleset
   if (localLoadingRuleset) {
     return (
-      <Modal title="Create Table" open={open} onCancel={onClose} footer={null} width={700}>
+      <Modal title="Create Table" open={open} onCancel={() => onClose?.(false)} footer={null} width={700}>
         <div style={{ textAlign: 'center', padding: 28 }}>
           <Spin />
         </div>
@@ -163,7 +193,14 @@ export default function FirewallAddTableModal({ open, onClose, startOnPreview =
   }
 
   return (
-    <Modal title="Create Table" open={open} onCancel={onClose} width={700} footer={renderFooter()} destroyOnClose>
+    <Modal
+      title="Create Table"
+      open={open}
+      onCancel={() => onClose?.(false)}
+      width={700}
+      footer={renderFooter()}
+      destroyOnClose
+    >
       {/* Step 0: minimal form */}
       {step === 0 && (
         <div>

frontend/src/components/FirewallRulesetViewer.tsx

@@ -1,6 +1,6 @@
 // src/components/FirewallTables.tsx
-import { ArrowDownOutlined, DeleteOutlined } from '@ant-design/icons';
-import { Alert, Button, Card, Divider, message, Modal, Space, Table, Typography } from 'antd';
+import { ArrowDownOutlined, DeleteOutlined, ReloadOutlined } from '@ant-design/icons';
+import { Alert, Button, Card, Divider, Modal, notification, Space, Spin, Table, Typography } from 'antd';
 import { ColumnsType } from 'antd/lib/table';
 import { ReactElement, useCallback, useMemo, useState } from 'react';
 import { execFirewallRaw } from '../api/apiClient';
@@ -12,18 +12,10 @@ const { Paragraph, Text, Title } = Typography;
 
 /* ---------- Helpers ---------- */
 
-/**
- * Render a human friendly one-line representation of a rule.
- * Accepts RuleOut (typed) but remains defensive against unexpected shapes.
- */
 function renderRuleFriendly(rule: RuleOut | any): string {
-  // prefer `text` if present
   if (rule?.text && typeof rule.text === 'string' && rule.text.trim() !== '') return rule.text;
-
-  // if expr is a string, show it
   if (rule?.expr && typeof rule.expr === 'string') return rule.expr;
 
-  // if expr is an array, try to pretty print common tokens
   const expr = rule?.expr ?? rule;
   if (Array.isArray(expr)) {
     const tokens: string[] = [];
@@ -107,7 +99,6 @@ function renderRuleFriendly(rule: RuleOut | any): string {
     if (tokens.length > 0) return tokens.join(' ');
   }
 
-  // fallback: if expr is an object, stringify a short excerpt
   if (rule?.expr && typeof rule.expr === 'object') {
     try {
       return JSON.stringify(rule.expr, (_k, v) => (v === undefined ? null : v)).slice(0, 500);
@@ -116,7 +107,6 @@ function renderRuleFriendly(rule: RuleOut | any): string {
     }
   }
 
-  // final fallback: stringify whole rule
   try {
     return JSON.stringify(rule, null, 2);
   } catch {
@@ -180,12 +170,20 @@ export default function FirewallTables({ tables, error, refreshRules: refresh }:
           try {
             const res = await runCommands([cmd]);
             const first = res[0];
-            if (!first.err) message.success('Rule deleted');
-            else message.error('Delete returned error — check results panel');
+            if (!first.err) {
+              notification.success({ message: 'Rule deleted', description: cmd });
+            } else {
+              notification.error({ message: 'Delete returned error', description: first.err });
+            }
           } catch (err: any) {
-            message.error('Delete failed: ' + (err?.message ?? String(err)));
+            notification.error({ message: 'Delete failed', description: err?.message ?? String(err) });
           } finally {
-            await refresh();
+            // auto-refresh after change (no refresh notification shown here)
+            try {
+              await refresh();
+            } catch {
+              /* ignore */
+            }
           }
         },
       });
@@ -212,12 +210,20 @@ export default function FirewallTables({ tables, error, refreshRules: refresh }:
           try {
             const res = await runCommands([cmd]);
             const first = res[0];
-            if (!first.err) message.success(`Chain ${chain} deleted`);
-            else message.error(`Chain deletion returned error — check results panel`);
+            if (!first.err) {
+              notification.success({ message: `Chain ${chain} deleted`, description: cmd });
+            } else {
+              notification.error({ message: 'Chain deletion returned error', description: first.err });
+            }
           } catch (err: any) {
-            message.error('Chain deletion failed: ' + (err?.message ?? String(err)));
+            notification.error({ message: 'Chain deletion failed', description: err?.message ?? String(err) });
           } finally {
-            await refresh();
+            // auto-refresh after change (no notification)
+            try {
+              await refresh();
+            } catch {
+              /* ignore */
+            }
           }
         },
       });
@@ -244,12 +250,20 @@ export default function FirewallTables({ tables, error, refreshRules: refresh }:
           try {
             const res = await runCommands([cmd]);
             const first = res[0];
-            if (!first.err) message.success(`Table ${table} deleted`);
-            else message.error(`Table deletion returned error — check results panel`);
+            if (!first.err) {
+              notification.success({ message: `Table ${table} deleted`, description: cmd });
+            } else {
+              notification.error({ message: 'Table deletion returned error', description: first.err });
+            }
           } catch (err: any) {
-            message.error('Table deletion failed: ' + (err?.message ?? String(err)));
+            notification.error({ message: 'Table deletion failed', description: err?.message ?? String(err) });
           } finally {
-            await refresh();
+            // auto-refresh after change (no notification)
+            try {
+              await refresh();
+            } catch {
+              /* ignore */
+            }
           }
         },
       });
@@ -262,9 +276,10 @@ export default function FirewallTables({ tables, error, refreshRules: refresh }:
     setRefreshing(true);
     try {
       await refresh();
-      message.success('Ruleset refreshed');
-    } catch {
-      // ignore
+      // Only show notification when user pressed the refresh button
+      notification.success({ message: 'Ruleset refreshed' });
+    } catch (err: any) {
+      notification.error({ message: 'Refresh failed', description: err?.message ?? String(err) });
     } finally {
       setRefreshing(false);
     }
@@ -277,22 +292,40 @@ export default function FirewallTables({ tables, error, refreshRules: refresh }:
 
   return (
     <>
-      <FirewallAddTableModal open={isOpenTableCreatorModal} onClose={() => setIsOpenTableCreatorModal(false)} />
+      {/* Pass onClose that accepts optional 'created' boolean. If the modal
+          calls onClose(true) we will auto-refresh (no refresh notification). */}
+      <FirewallAddTableModal
+        open={isOpenTableCreatorModal}
+        onClose={(created?: boolean) => {
+          setIsOpenTableCreatorModal(false);
+          if (created) {
+            // auto-refresh after create (no notification)
+            void refresh().catch(() => {});
+          }
+        }}
+      />
+
       <Card
         title="Firewall Tables"
         extra={
           <Space>
-            <Button onClick={handleRefresh} loading={refreshing}>
-              Refresh
+            <Button
+              onClick={handleRefresh}
+              loading={refreshing}
+              icon={refreshing ? <Spin size="small" /> : <ReloadOutlined />}
+            >
+              Refresh Ruleset
+            </Button>
+            <Button type="primary" onClick={() => setIsOpenTableCreatorModal(true)}>
+              Add Table
             </Button>
-            <Button onClick={() => setIsOpenTableCreatorModal(true)}>Add Table</Button>
           </Space>
         }
       >
         {tablesToRender.length === 0 && (
           <Alert
             type="info"
-            title="No firewall tables found"
+            message="No firewall tables found"
             description="You can create a new table using the button above."
             style={{ marginBottom: 12 }}
           />
@@ -321,20 +354,25 @@ export default function FirewallTables({ tables, error, refreshRules: refresh }:
                   <Space>
                     <Button
                       danger
-                      size="small"
                       icon={<DeleteOutlined />}
                       onClick={() => handleDeleteTable(table.family, table.name)}
                     />
-                    <Button size="small" onClick={() => setIsOpenChainCreatorModal(true)}>
+                    <Button type="primary" onClick={() => setIsOpenChainCreatorModal(true)}>
                       Add Chain
                     </Button>
                   </Space>
                 </div>
               }
             >
+              {/* Chain modal: same optional 'created' signal */}
               <FirewallAddChainModal
                 open={isOpenChainCreatorModal}
-                onClose={() => setIsOpenChainCreatorModal(false)}
+                onClose={(created?: boolean) => {
+                  setIsOpenChainCreatorModal(false);
+                  if (created) {
+                    void refresh().catch(() => {});
+                  }
+                }}
                 table={{ family: table.family ?? '', name: table.name }}
               />
 
@@ -406,7 +444,6 @@ export default function FirewallTables({ tables, error, refreshRules: refresh }:
                           <Space>
                             <Button
                               danger
-                              size="small"
                               icon={<DeleteOutlined />}
                               onClick={() => handleDeleteChain(table.family, table.name, chain.name)}
                             />
@@ -437,9 +474,7 @@ export default function FirewallTables({ tables, error, refreshRules: refresh }:
             <div key={i} style={{ marginBottom: 12 }}>
               <Text strong>{r.cmd}</Text>
               {r.err ? (
-                <Paragraph type="danger" style={{ marginTop: 6 }}>
-                  {r.err}
-                </Paragraph>
+                <Paragraph style={{ color: 'var(--ant-error-color)', marginTop: 6 }}>{r.err}</Paragraph>
               ) : r.out ? (
                 <>
                   <Paragraph>

frontend/src/components/ScriptManager.tsx

@@ -3,6 +3,7 @@ import {
   DeleteOutlined,
   DownloadOutlined,
   EditOutlined,
+  FileAddOutlined,
   PauseCircleOutlined,
   PlayCircleOutlined,
   PlusOutlined,
@@ -60,6 +61,7 @@ const { Paragraph } = Typography;
  * - Table action buttons are icon-only with Tooltip
  * - Expands nested rows by default
  * - Focus helper attempts to put caret at end inside editors when modals open
+ * - New: Add requirements UI for scripts that have no requirements
  */
 
 export default function ScriptsManager({ onOpenInEditor }: { onOpenInEditor?: (code: string) => void }) {
@@ -88,6 +90,13 @@ export default function ScriptsManager({ onOpenInEditor }: { onOpenInEditor?: (c
   const [reqEditorValue, setReqEditorValue] = useState<string>('');
   const [reqEditingName, setReqEditingName] = useState<string | null>(null);
 
+  // add-requirements modal (for scripts that have no requirements)
+  const [addReqModalVisible, setAddReqModalVisible] = useState(false);
+  const [addReqTarget, setAddReqTarget] = useState<string | null>(null);
+  const [addReqUseInline, setAddReqUseInline] = useState(false);
+  const [addReqInlineValue, setAddReqInlineValue] = useState('');
+  const [addReqFile, setAddReqFile] = useState<File | null>(null);
+
   // enable modal
   const [enableModalVisible, setEnableModalVisible] = useState(false);
   const [enableTarget, setEnableTarget] = useState<string | null>(null);
@@ -105,7 +114,31 @@ export default function ScriptsManager({ onOpenInEditor }: { onOpenInEditor?: (c
       const all = await fetchScriptsAll();
       setScripts(all || []);
     } catch (err: any) {
-      notification.error({ message: 'Failed to fetch scripts', description: err?.message ?? String(err) });
+      notification.error({
+        message: 'Failed to fetch scripts',
+        description: err?.message ?? String(err),
+      });
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  const handleManualRefresh = useCallback(async () => {
+    setLoading(true);
+    try {
+      const all = await fetchScriptsAll();
+      setScripts(all || []);
+
+      const count = (all || []).length;
+      notification.success({
+        message: 'Refresh complete',
+        description: `Loaded ${count} script${count === 1 ? '' : 's'}.`,
+      });
+    } catch (err: any) {
+      notification.error({
+        message: 'Failed to fetch scripts',
+        description: err?.message ?? String(err),
+      });
     } finally {
       setLoading(false);
     }
@@ -168,6 +201,10 @@ export default function ScriptsManager({ onOpenInEditor }: { onOpenInEditor?: (c
     if (reqModalVisible) focusEditorInModal('.ant-modal');
   }, [reqModalVisible, focusEditorInModal]);
 
+  useEffect(() => {
+    if (addReqModalVisible) focusEditorInModal('.ant-modal');
+  }, [addReqModalVisible, focusEditorInModal]);
+
   // show pip modal if pip output is present
   const showPipIfPresent = useCallback(
     (resp?: ScriptUploadResponse | { pip?: { stdout?: string; stderr?: string } } | null) => {
@@ -472,6 +509,57 @@ export default function ScriptsManager({ onOpenInEditor }: { onOpenInEditor?: (c
     );
   }
 
+  // --------------------
+  // Add Requirements (for scripts missing requirements)
+  // --------------------
+  const openAddRequirements = useCallback((scriptName: string) => {
+    setAddReqTarget(scriptName);
+    setAddReqUseInline(false);
+    setAddReqInlineValue('');
+    setAddReqFile(null);
+    setAddReqModalVisible(true);
+  }, []);
+
+  const saveAddRequirements = useCallback(async () => {
+    if (!addReqTarget) return;
+    let payload: File | Blob | null = null;
+    if (addReqFile) {
+      payload = addReqFile;
+    } else if (addReqUseInline && addReqInlineValue.trim() !== '') {
+      payload = new Blob([addReqInlineValue], { type: 'text/plain' });
+    } else {
+      notification.warning({
+        message: 'No requirements provided',
+        description: 'Upload a file or enter inline content.',
+      });
+      return;
+    }
+
+    try {
+      const resp = await uploadRequirements(addReqTarget, payload);
+      notification.success({ message: 'requirements uploaded', description: `${addReqTarget} updated` });
+      showPipIfPresent(resp);
+      setAddReqModalVisible(false);
+      setAddReqTarget(null);
+      setAddReqInlineValue('');
+      setAddReqFile(null);
+      await refreshAll();
+    } catch (err: any) {
+      notification.error({ message: 'Failed to upload requirements', description: err?.message ?? String(err) });
+    }
+  }, [addReqFile, addReqInlineValue, addReqTarget, refreshAll, showPipIfPresent]);
+
+  // helper for Upload change inside add-req modal
+  const onAddReqUploadChange = useCallback((info: any) => {
+    const list: UploadFile[] = info.fileList || [];
+    if (list.length === 0) {
+      setAddReqFile(null);
+      return;
+    }
+    const last = list[list.length - 1] as any;
+    setAddReqFile(last.originFileObj ?? last);
+  }, []);
+
   // --------------------
   // Table columns
   // --------------------
@@ -513,7 +601,13 @@ export default function ScriptsManager({ onOpenInEditor }: { onOpenInEditor?: (c
               />
             </Space>
           ) : (
-            <span style={{ color: '#999' }}>—</span>
+            <Space>
+              <IconButtonTooltip
+                title="Add requirements"
+                onClick={() => openAddRequirements(record.name)}
+                icon={<FileAddOutlined />}
+              />
+            </Space>
           ),
       },
       {
@@ -627,15 +721,13 @@ export default function ScriptsManager({ onOpenInEditor }: { onOpenInEditor?: (c
   return (
     <div>
       <Row justify="space-between" style={{ marginBottom: 12 }}>
-        <Col>
-          <Space>
-            <Button type="primary" icon={<PlusOutlined />} onClick={() => setUploadModalVisible(true)}>
-              Upload / New
-            </Button>
-            <Button onClick={refreshAll} icon={loading ? <Spin size="small" /> : <ReloadOutlined />}>
-              Refresh
-            </Button>
-          </Space>
+        <Col span={24} style={{ display: 'flex', justifyContent: 'space-between' }}>
+          <Button type="primary" icon={<PlusOutlined />} onClick={() => setUploadModalVisible(true)}>
+            Upload / New
+          </Button>
+          <Button onClick={handleManualRefresh} icon={loading ? <Spin size="small" /> : <ReloadOutlined />}>
+            Refresh
+          </Button>
         </Col>
       </Row>
 
@@ -821,6 +913,60 @@ export default function ScriptsManager({ onOpenInEditor }: { onOpenInEditor?: (c
         <PythonEditor value={reqEditorValue} onChange={setReqEditorValue} height={420} />
       </Modal>
 
+      {/* Add Requirements Modal (for scripts without requirements) */}
+      <Modal
+        open={addReqModalVisible}
+        title={addReqTarget ? `Add requirements — ${addReqTarget}` : 'Add requirements'}
+        onCancel={() => {
+          setAddReqModalVisible(false);
+          setAddReqTarget(null);
+          setAddReqInlineValue('');
+          setAddReqFile(null);
+          setAddReqUseInline(false);
+        }}
+        footer={
+          <Space style={{ display: 'flex', justifyContent: 'flex-end' }}>
+            <Button
+              onClick={() => {
+                setAddReqModalVisible(false);
+                setAddReqTarget(null);
+                setAddReqInlineValue('');
+                setAddReqFile(null);
+                setAddReqUseInline(false);
+              }}
+            >
+              Cancel
+            </Button>
+            <Button type="primary" onClick={saveAddRequirements}>
+              Save requirements
+            </Button>
+          </Space>
+        }
+        width={700}
+      >
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+          <div>
+            <div style={{ marginBottom: 8 }}>Upload a requirements.txt file (preferred)</div>
+            <Upload beforeUpload={() => false} maxCount={1} accept=".txt" onChange={onAddReqUploadChange}>
+              <Button icon={<UploadOutlined />}>Choose requirements file</Button>
+            </Upload>
+          </div>
+
+          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
+            <Checkbox checked={addReqUseInline} onChange={(e) => setAddReqUseInline(e.target.checked)}>
+              Edit requirements inline
+            </Checkbox>
+            <div style={{ color: '#666' }}>If both a file and inline content are present, file takes precedence.</div>
+          </div>
+
+          {addReqUseInline && (
+            <div>
+              <PythonEditor value={addReqInlineValue} onChange={setAddReqInlineValue} height={220} wrap />
+            </div>
+          )}
+        </div>
+      </Modal>
+
       {/* Pip output modal */}
       <Modal
         open={pipModalVisible}

frontend/src/pages/Firewall.tsx

@@ -1,5 +1,5 @@
 // src/pages/Firewall.tsx
-import { Alert, Col, Row, Spin } from 'antd';
+import { Alert, Col, Row } from 'antd';
 import React, { useCallback, useEffect, useState } from 'react';
 import { fetchRuleset } from '../api/apiClient';
 import RuleBuilder from '../components/FirewallRuleBuilder';
@@ -41,9 +41,7 @@ export const Firewall: React.FC = () => {
     await load();
   }, [load]);
 
-  return loading ? (
-    <Spin tip="Loading firewall rules..." />
-  ) : (
+  return (
     <div className="firewall-page">
       <Row gutter={16}>
         <Col xs={24}>