FEAT Add GUI initializers

doc/gui/0_gui.md

@@ -164,6 +164,17 @@ For `AzureMLChatTarget`, additional fields are available: **Max New Tokens**, **
 
 Targets can also be auto-populated by adding the `target` initializer to your `~/.pyrit/.pyrit_conf` file. This reads endpoints from your `.env` and `.env.local` files. See [.pyrit_conf_example](https://github.com/microsoft/PyRIT/blob/main/.pyrit_conf_example) for details.
 
+### Initializers
+
+The **Initializers** page (in the left navigation) lets you review and extend how PyRIT sets itself up at startup — for example, the `target` initializer's `tags` and `auto_group` settings.
+
+The page has two sections:
+
+- **Baseline initializers** are read-only. They come from your active configuration file (`~/.pyrit/.pyrit_conf`) and run first, in order.
+- **Additional initializers** are added in the GUI and saved to the memory database. They run after the baseline, in the order shown. You can add more than one initializer of the same type — each is its own invocation.
+
+Use **Apply now** to re-run a single initializer immediately against the running backend — handy for picking up an environment or setting change without a restart. Saved additional initializers and `.pyrit_conf` edits otherwise take effect the next time the backend starts.
+
 ---
 
 ## Connection Health

frontend/jest.config.ts

@@ -10,6 +10,7 @@ const config: Config = {
     "\\.(css|less|scss|sass)$": "identity-obj-proxy",
   },
   setupFilesAfterEnv: ["<rootDir>/src/setupTests.ts"],
+  testTimeout: 15000,
   collectCoverageFrom: [
     "src/**/*.{ts,tsx}",
     "!src/**/*.d.ts",

frontend/src/App.tsx

@@ -8,6 +8,7 @@ import ChatWindow from './components/Chat/ChatWindow'
 import AttackNotFound from './components/Chat/AttackNotFound'
 import Home from './components/Home/Home'
 import TargetConfig from './components/Config/TargetConfig'
+import Initializers from './components/Initializers/Initializers'
 import AttackHistory from './components/History/AttackHistory'
 import FeedbackDialog from './components/Feedback/FeedbackDialog'
 import type { HistoryFilters } from './components/History/historyFilters'
@@ -36,6 +37,7 @@ const VIEW_PATHS: Record<ViewName, string> = {
   chat: '/chat',
   history: '/history',
   config: '/config',
+  initializers: '/initializers',
 }
 
 /** Resolves the active view from a URL path, defaulting to home for unknown paths. */
@@ -392,6 +394,7 @@ function App() {
                   />
                 }
               />
+              <Route path="/initializers" element={<Initializers />} />
               <Route
                 path="/history"
                 element={

frontend/src/components/Config/TargetConfig.test.tsx

@@ -403,4 +403,5 @@ describe("TargetConfig", () => {
     await userEvent.click(screen.getByTestId("dialog-close"));
     expect(screen.queryByTestId("create-dialog")).not.toBeInTheDocument();
   });
+
 });

frontend/src/components/Initializers/AdditionalInitializers.styles.ts

@@ -0,0 +1,88 @@
+import { makeStyles, tokens } from '@fluentui/react-components'
+
+export const useAdditionalInitializersStyles = makeStyles({
+  list: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: tokens.spacingVerticalL,
+    width: '100%',
+  },
+  card: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: tokens.spacingVerticalM,
+    padding: tokens.spacingVerticalL,
+    border: `1px solid ${tokens.colorNeutralStroke2}`,
+    borderRadius: tokens.borderRadiusLarge,
+    backgroundColor: tokens.colorNeutralBackground1,
+  },
+  cardHeader: {
+    display: 'flex',
+    alignItems: 'flex-start',
+    justifyContent: 'space-between',
+    flexWrap: 'wrap',
+    gap: tokens.spacingHorizontalM,
+  },
+  titleGroup: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: tokens.spacingVerticalXXS,
+  },
+  parameterList: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: tokens.spacingVerticalXXS,
+    marginBottom: tokens.spacingVerticalS,
+  },
+  parameterHint: {
+    color: tokens.colorNeutralForeground3,
+  },
+  parametersEditor: {
+    fontFamily: 'Consolas, "Courier New", monospace',
+    minHeight: '10rem',
+    width: '100%',
+  },
+  parametersBlock: {
+    margin: 0,
+    marginTop: tokens.spacingVerticalXS,
+    padding: tokens.spacingVerticalM,
+    borderRadius: tokens.borderRadiusMedium,
+    backgroundColor: tokens.colorNeutralBackground3,
+    overflowX: 'auto',
+    fontFamily: 'Consolas, "Courier New", monospace',
+  },
+  dialogContent: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: tokens.spacingVerticalS,
+  },
+  actionsRow: {
+    display: 'flex',
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: tokens.spacingHorizontalS,
+  },
+  errorText: {
+    color: tokens.colorPaletteRedForeground1,
+    marginTop: tokens.spacingVerticalXS,
+  },
+  envVarText: {
+    color: tokens.colorNeutralForeground3,
+    display: 'block',
+    marginTop: tokens.spacingVerticalXXS,
+  },
+  parameterFields: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: tokens.spacingVerticalM,
+  },
+  fieldHint: {
+    color: tokens.colorNeutralForeground3,
+    marginTop: tokens.spacingVerticalXXS,
+  },
+  checkboxGroup: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: tokens.spacingVerticalXXS,
+  },
+})