Initial commit for env in UI

orchestrator/src/client/api/client.ts

@@ -198,6 +198,17 @@ export async function updateSettings(update: {
   jobspySites?: string[] | null
   jobspyLinkedinFetchDescription?: boolean | null
   showSponsorInfo?: boolean | null
+  openrouterApiKey?: string | null
+  rxresumeEmail?: string | null
+  rxresumePassword?: string | null
+  basicAuthUser?: string | null
+  basicAuthPassword?: string | null
+  ukvisajobsEmail?: string | null
+  ukvisajobsPassword?: string | null
+  ukvisajobsHeadless?: boolean | null
+  webhookSecret?: string | null
+  notionApiKey?: string | null
+  notionDatabaseId?: string | null
 }): Promise<AppSettings> {
   return fetchApi<AppSettings>('/settings', {
     method: 'PATCH',

orchestrator/src/client/pages/SettingsPage.test.tsx

@@ -95,6 +95,17 @@ const baseSettings: AppSettings = {
   showSponsorInfo: true,
   defaultShowSponsorInfo: true,
   overrideShowSponsorInfo: null,
+  openrouterApiKeyHint: null,
+  rxresumeEmail: "",
+  rxresumePasswordHint: null,
+  basicAuthUser: "",
+  basicAuthPasswordHint: null,
+  ukvisajobsEmail: "",
+  ukvisajobsPasswordHint: null,
+  ukvisajobsHeadless: true,
+  webhookSecretHint: null,
+  notionApiKeyHint: null,
+  notionDatabaseId: "",
 }
 
 const renderPage = () => {

orchestrator/src/client/pages/SettingsPage.tsx

@@ -14,6 +14,7 @@ import { arraysEqual } from "@/lib/utils"
 import { resumeProjectsEqual } from "@client/pages/settings/utils"
 import { DangerZoneSection } from "@client/pages/settings/components/DangerZoneSection"
 import { DisplaySettingsSection } from "@client/pages/settings/components/DisplaySettingsSection"
+import { EnvironmentSettingsSection } from "@client/pages/settings/components/EnvironmentSettingsSection"
 import { GradcrackerSection } from "@client/pages/settings/components/GradcrackerSection"
 import { JobCompleteWebhookSection } from "@client/pages/settings/components/JobCompleteWebhookSection"
 import { JobspySection } from "@client/pages/settings/components/JobspySection"
@@ -41,6 +42,17 @@ const DEFAULT_FORM_VALUES: UpdateSettingsInput = {
   jobspySites: null,
   jobspyLinkedinFetchDescription: null,
   showSponsorInfo: null,
+  openrouterApiKey: "",
+  rxresumeEmail: "",
+  rxresumePassword: "",
+  basicAuthUser: "",
+  basicAuthPassword: "",
+  ukvisajobsEmail: "",
+  ukvisajobsPassword: "",
+  ukvisajobsHeadless: null,
+  webhookSecret: "",
+  notionApiKey: "",
+  notionDatabaseId: "",
 }
 
 const NULL_SETTINGS_PAYLOAD: UpdateSettingsInput = {
@@ -61,6 +73,17 @@ const NULL_SETTINGS_PAYLOAD: UpdateSettingsInput = {
   jobspySites: null,
   jobspyLinkedinFetchDescription: null,
   showSponsorInfo: null,
+  openrouterApiKey: null,
+  rxresumeEmail: null,
+  rxresumePassword: null,
+  basicAuthUser: null,
+  basicAuthPassword: null,
+  ukvisajobsEmail: null,
+  ukvisajobsPassword: null,
+  ukvisajobsHeadless: null,
+  webhookSecret: null,
+  notionApiKey: null,
+  notionDatabaseId: null,
 }
 
 const mapSettingsToForm = (data: AppSettings): UpdateSettingsInput => ({
@@ -81,6 +104,17 @@ const mapSettingsToForm = (data: AppSettings): UpdateSettingsInput => ({
   jobspySites: data.overrideJobspySites,
   jobspyLinkedinFetchDescription: data.overrideJobspyLinkedinFetchDescription,
   showSponsorInfo: data.overrideShowSponsorInfo,
+  openrouterApiKey: "",
+  rxresumeEmail: data.rxresumeEmail ?? "",
+  rxresumePassword: "",
+  basicAuthUser: data.basicAuthUser ?? "",
+  basicAuthPassword: "",
+  ukvisajobsEmail: data.ukvisajobsEmail ?? "",
+  ukvisajobsPassword: "",
+  ukvisajobsHeadless: data.ukvisajobsHeadless,
+  webhookSecret: "",
+  notionApiKey: "",
+  notionDatabaseId: data.notionDatabaseId ?? "",
 })
 
 const normalizeString = (value: string | null | undefined) => {
@@ -88,6 +122,11 @@ const normalizeString = (value: string | null | undefined) => {
   return trimmed ? trimmed : null
 }
 
+const normalizePrivateInput = (value: string | null | undefined) => {
+  const trimmed = value?.trim()
+  return trimmed ? trimmed : undefined
+}
+
 const isSameStringList = (left: string[] | null | undefined, right: string[] | null | undefined) => {
   if (!left && !right) return true
   if (!left || !right) return false
@@ -170,6 +209,23 @@ const getDerivedSettings = (settings: AppSettings | null) => {
       effective: settings?.showSponsorInfo ?? true,
       default: settings?.defaultShowSponsorInfo ?? true,
     },
+    envSettings: {
+      readable: {
+        rxresumeEmail: settings?.rxresumeEmail ?? "",
+        ukvisajobsEmail: settings?.ukvisajobsEmail ?? "",
+        basicAuthUser: settings?.basicAuthUser ?? "",
+        notionDatabaseId: settings?.notionDatabaseId ?? "",
+        ukvisajobsHeadless: settings?.ukvisajobsHeadless ?? true,
+      },
+      private: {
+        openrouterApiKeyHint: settings?.openrouterApiKeyHint ?? null,
+        rxresumePasswordHint: settings?.rxresumePasswordHint ?? null,
+        ukvisajobsPasswordHint: settings?.ukvisajobsPasswordHint ?? null,
+        basicAuthPasswordHint: settings?.basicAuthPasswordHint ?? null,
+        webhookSecretHint: settings?.webhookSecretHint ?? null,
+        notionApiKeyHint: settings?.notionApiKeyHint ?? null,
+      },
+    },
     defaultResumeProjects: settings?.defaultResumeProjects ?? null,
     profileProjects,
     maxProjectsTotal: profileProjects.length,
@@ -188,7 +244,7 @@ export const SettingsPage: React.FC = () => {
     defaultValues: DEFAULT_FORM_VALUES,
   })
 
-  const { handleSubmit, reset, watch, formState: { isDirty, errors, isValid } } = methods
+  const { handleSubmit, reset, watch, formState: { isDirty, errors, isValid, dirtyFields } } = methods
 
   useEffect(() => {
     let isMounted = true
@@ -224,6 +280,7 @@ export const SettingsPage: React.FC = () => {
     searchTerms,
     jobspy,
     display,
+    envSettings,
     defaultResumeProjects,
     profileProjects,
     maxProjectsTotal,
@@ -245,6 +302,58 @@ export const SettingsPage: React.FC = () => {
         ? null
         : resumeProjectsData
 
+      const envPayload: Partial<UpdateSettingsInput> = {}
+
+      if (dirtyFields.rxresumeEmail) {
+        envPayload.rxresumeEmail = normalizeString(data.rxresumeEmail)
+      }
+
+      if (dirtyFields.ukvisajobsEmail) {
+        envPayload.ukvisajobsEmail = normalizeString(data.ukvisajobsEmail)
+      }
+
+      if (dirtyFields.basicAuthUser) {
+        envPayload.basicAuthUser = normalizeString(data.basicAuthUser)
+      }
+
+      if (dirtyFields.notionDatabaseId) {
+        envPayload.notionDatabaseId = normalizeString(data.notionDatabaseId)
+      }
+
+      if (dirtyFields.ukvisajobsHeadless) {
+        envPayload.ukvisajobsHeadless = data.ukvisajobsHeadless ?? null
+      }
+
+      if (dirtyFields.openrouterApiKey) {
+        const value = normalizePrivateInput(data.openrouterApiKey)
+        if (value !== undefined) envPayload.openrouterApiKey = value
+      }
+
+      if (dirtyFields.rxresumePassword) {
+        const value = normalizePrivateInput(data.rxresumePassword)
+        if (value !== undefined) envPayload.rxresumePassword = value
+      }
+
+      if (dirtyFields.ukvisajobsPassword) {
+        const value = normalizePrivateInput(data.ukvisajobsPassword)
+        if (value !== undefined) envPayload.ukvisajobsPassword = value
+      }
+
+      if (dirtyFields.basicAuthPassword) {
+        const value = normalizePrivateInput(data.basicAuthPassword)
+        if (value !== undefined) envPayload.basicAuthPassword = value
+      }
+
+      if (dirtyFields.webhookSecret) {
+        const value = normalizePrivateInput(data.webhookSecret)
+        if (value !== undefined) envPayload.webhookSecret = value
+      }
+
+      if (dirtyFields.notionApiKey) {
+        const value = normalizePrivateInput(data.notionApiKey)
+        if (value !== undefined) envPayload.notionApiKey = value
+      }
+
       const payload: UpdateSettingsInput = {
         model: normalizeString(data.model),
         modelScorer: normalizeString(data.modelScorer),
@@ -266,6 +375,7 @@ export const SettingsPage: React.FC = () => {
           jobspy.linkedinFetchDescription.default
         ),
         showSponsorInfo: nullIfSame(data.showSponsorInfo, display.default),
+        ...envPayload,
       }
 
       const updated = await api.updateSettings(payload)
@@ -407,6 +517,11 @@ export const SettingsPage: React.FC = () => {
             isLoading={isLoading}
             isSaving={isSaving}
           />
+          <EnvironmentSettingsSection
+            values={envSettings}
+            isLoading={isLoading}
+            isSaving={isSaving}
+          />
           <DangerZoneSection
             statusesToClear={statusesToClear}
             toggleStatusToClear={toggleStatusToClear}

orchestrator/src/client/pages/settings/components/EnvironmentSettingsSection.test.tsx

@@ -0,0 +1,73 @@
+import { render, screen } from "@testing-library/react"
+import { useForm, FormProvider } from "react-hook-form"
+
+import { Accordion } from "@/components/ui/accordion"
+import { EnvironmentSettingsSection } from "./EnvironmentSettingsSection"
+import { UpdateSettingsInput } from "@shared/settings-schema"
+
+const EnvironmentSettingsHarness = () => {
+  const methods = useForm<UpdateSettingsInput>({
+    defaultValues: {
+      rxresumeEmail: "resume@example.com",
+      ukvisajobsEmail: "visa@example.com",
+      basicAuthUser: "admin",
+      notionDatabaseId: "db-123",
+      ukvisajobsHeadless: false,
+      openrouterApiKey: "",
+      rxresumePassword: "",
+      ukvisajobsPassword: "",
+      basicAuthPassword: "",
+      webhookSecret: "",
+      notionApiKey: "",
+    }
+  })
+
+  return (
+    <FormProvider {...methods}>
+      <Accordion type="multiple" defaultValue={["environment"]}>
+        <EnvironmentSettingsSection
+          values={{
+            readable: {
+              rxresumeEmail: "resume@example.com",
+              ukvisajobsEmail: "visa@example.com",
+              basicAuthUser: "admin",
+              notionDatabaseId: "db-123",
+              ukvisajobsHeadless: false,
+            },
+            private: {
+              openrouterApiKeyHint: "sk-1",
+              rxresumePasswordHint: null,
+              ukvisajobsPasswordHint: "pass",
+              basicAuthPasswordHint: "abcd",
+              webhookSecretHint: "sec-",
+              notionApiKeyHint: "not-",
+            },
+          }}
+          isLoading={false}
+          isSaving={false}
+        />
+      </Accordion>
+    </FormProvider>
+  )
+}
+
+describe("EnvironmentSettingsSection", () => {
+  it("renders readable values and masks private secrets with hints", () => {
+    render(<EnvironmentSettingsHarness />)
+
+    expect(screen.getByDisplayValue("resume@example.com")).toBeInTheDocument()
+    expect(screen.getByDisplayValue("visa@example.com")).toBeInTheDocument()
+    expect(screen.getByDisplayValue("admin")).toBeInTheDocument()
+    expect(screen.getByDisplayValue("db-123")).toBeInTheDocument()
+
+    expect(screen.getByText("sk-1********")).toBeInTheDocument()
+    expect(screen.getByText("pass********")).toBeInTheDocument()
+    expect(screen.getByText("abcd********")).toBeInTheDocument()
+    expect(screen.getByText("sec-********")).toBeInTheDocument()
+    expect(screen.getByText("not-********")).toBeInTheDocument()
+    expect(screen.getByText("Not set")).toBeInTheDocument()
+
+    const headlessToggle = screen.getByLabelText("UKVisaJobs headless mode")
+    expect(headlessToggle).not.toBeChecked()
+  })
+})

orchestrator/src/client/pages/settings/components/EnvironmentSettingsSection.tsx

@@ -0,0 +1,218 @@
+import React from "react"
+import { useFormContext, Controller } from "react-hook-form"
+
+import { AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
+import { Checkbox } from "@/components/ui/checkbox"
+import { Input } from "@/components/ui/input"
+import { Separator } from "@/components/ui/separator"
+import { UpdateSettingsInput } from "@shared/settings-schema"
+import type { EnvSettingsValues } from "@client/pages/settings/types"
+
+type EnvironmentSettingsSectionProps = {
+  values: EnvSettingsValues
+  isLoading: boolean
+  isSaving: boolean
+}
+
+const formatSecretHint = (hint: string | null) => (hint ? `${hint}********` : "Not set")
+
+export const EnvironmentSettingsSection: React.FC<EnvironmentSettingsSectionProps> = ({
+  values,
+  isLoading,
+  isSaving,
+}) => {
+  const { register, control, formState: { errors } } = useFormContext<UpdateSettingsInput>()
+  const { readable, private: privateValues } = values
+
+  return (
+    <AccordionItem value="environment" className="border rounded-lg px-4">
+      <AccordionTrigger className="hover:no-underline py-4">
+        <span className="text-base font-semibold">Environment</span>
+      </AccordionTrigger>
+      <AccordionContent className="pb-4">
+        <div className="space-y-6">
+          <div className="space-y-4">
+            <div className="text-sm font-medium">Readable values</div>
+            <div className="grid gap-4 md:grid-cols-2">
+              <div className="space-y-2">
+                <div className="text-sm">RxResume email</div>
+                <Input
+                  {...register("rxresumeEmail")}
+                  placeholder="you@example.com"
+                  disabled={isLoading || isSaving}
+                />
+                {errors.rxresumeEmail && <p className="text-xs text-destructive">{errors.rxresumeEmail.message}</p>}
+                <div className="text-xs text-muted-foreground">
+                  Used for RxResume PDF automation.
+                </div>
+              </div>
+
+              <div className="space-y-2">
+                <div className="text-sm">UKVisaJobs email</div>
+                <Input
+                  {...register("ukvisajobsEmail")}
+                  placeholder="you@example.com"
+                  disabled={isLoading || isSaving}
+                />
+                {errors.ukvisajobsEmail && <p className="text-xs text-destructive">{errors.ukvisajobsEmail.message}</p>}
+                <div className="text-xs text-muted-foreground">
+                  Used for refreshing UKVisaJobs sessions.
+                </div>
+              </div>
+
+              <div className="space-y-2">
+                <div className="text-sm">Basic auth user</div>
+                <Input
+                  {...register("basicAuthUser")}
+                  placeholder="username"
+                  disabled={isLoading || isSaving}
+                />
+                {errors.basicAuthUser && <p className="text-xs text-destructive">{errors.basicAuthUser.message}</p>}
+                <div className="text-xs text-muted-foreground">
+                  Pair with a password to require auth on writes.
+                </div>
+              </div>
+
+              <div className="space-y-2">
+                <div className="text-sm">Notion database ID</div>
+                <Input
+                  {...register("notionDatabaseId")}
+                  placeholder="xxxxxxxxxxxxxxxxxxxx"
+                  disabled={isLoading || isSaving}
+                />
+                {errors.notionDatabaseId && <p className="text-xs text-destructive">{errors.notionDatabaseId.message}</p>}
+                <div className="text-xs text-muted-foreground">
+                  Destination database for applied job entries.
+                </div>
+              </div>
+
+              <div className="space-y-2 md:col-span-2">
+                <div className="flex items-start space-x-3">
+                  <Controller
+                    name="ukvisajobsHeadless"
+                    control={control}
+                    render={({ field }) => (
+                      <Checkbox
+                        id="ukvisajobsHeadless"
+                        checked={field.value ?? readable.ukvisajobsHeadless}
+                        onCheckedChange={(checked) => {
+                          field.onChange(checked === "indeterminate" ? null : checked === true)
+                        }}
+                        disabled={isLoading || isSaving}
+                      />
+                    )}
+                  />
+                  <div className="flex flex-col gap-1.5">
+                    <label
+                      htmlFor="ukvisajobsHeadless"
+                      className="text-sm font-medium leading-none cursor-pointer"
+                    >
+                      UKVisaJobs headless mode
+                    </label>
+                    <p className="text-xs text-muted-foreground">
+                      Disable to show the browser while authenticating.
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <Separator />
+
+          <div className="space-y-4">
+            <div className="text-sm font-medium">Private values</div>
+            <div className="grid gap-4 md:grid-cols-2">
+              <div className="space-y-2">
+                <div className="text-sm">OpenRouter API key</div>
+                <Input
+                  {...register("openrouterApiKey")}
+                  type="password"
+                  placeholder="Enter new key"
+                  disabled={isLoading || isSaving}
+                />
+                {errors.openrouterApiKey && <p className="text-xs text-destructive">{errors.openrouterApiKey.message}</p>}
+                <div className="text-xs text-muted-foreground">
+                  Current: <span className="font-mono">{formatSecretHint(privateValues.openrouterApiKeyHint)}</span>
+                </div>
+              </div>
+
+              <div className="space-y-2">
+                <div className="text-sm">RxResume password</div>
+                <Input
+                  {...register("rxresumePassword")}
+                  type="password"
+                  placeholder="Enter new password"
+                  disabled={isLoading || isSaving}
+                />
+                {errors.rxresumePassword && <p className="text-xs text-destructive">{errors.rxresumePassword.message}</p>}
+                <div className="text-xs text-muted-foreground">
+                  Current: <span className="font-mono">{formatSecretHint(privateValues.rxresumePasswordHint)}</span>
+                </div>
+              </div>
+
+              <div className="space-y-2">
+                <div className="text-sm">UKVisaJobs password</div>
+                <Input
+                  {...register("ukvisajobsPassword")}
+                  type="password"
+                  placeholder="Enter new password"
+                  disabled={isLoading || isSaving}
+                />
+                {errors.ukvisajobsPassword && <p className="text-xs text-destructive">{errors.ukvisajobsPassword.message}</p>}
+                <div className="text-xs text-muted-foreground">
+                  Current: <span className="font-mono">{formatSecretHint(privateValues.ukvisajobsPasswordHint)}</span>
+                </div>
+              </div>
+
+              <div className="space-y-2">
+                <div className="text-sm">Basic auth password</div>
+                <Input
+                  {...register("basicAuthPassword")}
+                  type="password"
+                  placeholder="Enter new password"
+                  disabled={isLoading || isSaving}
+                />
+                {errors.basicAuthPassword && <p className="text-xs text-destructive">{errors.basicAuthPassword.message}</p>}
+                <div className="text-xs text-muted-foreground">
+                  Current: <span className="font-mono">{formatSecretHint(privateValues.basicAuthPasswordHint)}</span>
+                </div>
+              </div>
+
+              <div className="space-y-2">
+                <div className="text-sm">Webhook secret</div>
+                <Input
+                  {...register("webhookSecret")}
+                  type="password"
+                  placeholder="Enter new secret"
+                  disabled={isLoading || isSaving}
+                />
+                {errors.webhookSecret && <p className="text-xs text-destructive">{errors.webhookSecret.message}</p>}
+                <div className="text-xs text-muted-foreground">
+                  Current: <span className="font-mono">{formatSecretHint(privateValues.webhookSecretHint)}</span>
+                </div>
+              </div>
+
+              <div className="space-y-2">
+                <div className="text-sm">Notion API key</div>
+                <Input
+                  {...register("notionApiKey")}
+                  type="password"
+                  placeholder="Enter new key"
+                  disabled={isLoading || isSaving}
+                />
+                {errors.notionApiKey && <p className="text-xs text-destructive">{errors.notionApiKey.message}</p>}
+                <div className="text-xs text-muted-foreground">
+                  Current: <span className="font-mono">{formatSecretHint(privateValues.notionApiKeyHint)}</span>
+                </div>
+              </div>
+            </div>
+            <div className="text-xs text-muted-foreground">
+              Private values are write-only. Enter a new value to replace the stored secret.
+            </div>
+          </div>
+        </div>
+      </AccordionContent>
+    </AccordionItem>
+  )
+}

orchestrator/src/client/pages/settings/types.ts

@@ -22,3 +22,21 @@ export type JobspyValues = {
   countryIndeed: EffectiveDefault<string>
   linkedinFetchDescription: EffectiveDefault<boolean>
 }
+
+export type EnvSettingsValues = {
+  readable: {
+    rxresumeEmail: string
+    ukvisajobsEmail: string
+    basicAuthUser: string
+    notionDatabaseId: string
+    ukvisajobsHeadless: boolean
+  }
+  private: {
+    openrouterApiKeyHint: string | null
+    rxresumePasswordHint: string | null
+    ukvisajobsPasswordHint: string | null
+    basicAuthPasswordHint: string | null
+    webhookSecretHint: string | null
+    notionApiKeyHint: string | null
+  }
+}