supervisor/ui/ENHANCED_JOB_EDITING.md

Enhanced Job Editing Features

Summary

Added comprehensive job editing capabilities with name field, editable job ID, runner dropdown, and signature management directly in the sidebar.

New Features

1. Job Name Field ✅

• Optional field for human-readable job names
• Separate from the auto-generated job ID
• Placeholder: "My Job"
• Stored in job object as name field
• Displayed in edit/create mode

2. Editable Job ID ✅

• Auto-generated by default (job-{uuid})
• Manually editable if needed
• Monospace font for better readability
• Placeholder shows format: "job-xxxxx"
• Allows custom job IDs when required

3. Runner Dropdown ✅

• Replaced text input with proper dropdown/select
• Shows all available runners
• Auto-selects first runner when creating new job
• Clear "No runners available" message when empty
• Better UX than text input with datalist

4. Signature Management ✅

• Add signatures directly in sidebar
• Display signatures with public key preview
• Remove signatures with × button
• Private key input (password field)
• Sign button to add signature
• Signatures shown as compact cards with monospace font

Implementation Details

State Added

edit_job_name: String,              // Optional job name
edit_job_id: String,                // Editable job ID
edit_job_signatures: Vec<(String, String)>, // (pubkey, signature)
edit_job_private_key: String,       // For signing

Messages Added

UpdateEditJobName(String),          // Update name field
UpdateEditJobId(String),            // Update job ID
UpdateEditJobPrivateKey(String),    // Update private key
SignJobEdit,                        // Sign the job
RemoveEditSignature(usize),         // Remove signature by index

Sidebar Fields (Edit/Create Mode)

Order:

1. Name (optional) - Text input
2. Job ID - Editable text input (monospace)
3. Runner - Dropdown select
4. Timeout - Number input
5. Signatures - List + Add interface
   • Existing signatures displayed as cards
   • Private key input (password)
   • Sign button

Signature Display

Each signature shows:

• First 16 characters of public key
• Monospace font
• Remove button (×)
• Compact card layout
• Background color for visibility

Signature Adding

• Password input for private key
• Sign button (disabled when empty)
• Creates canonical representation
• Signs with provided key
• Adds to signatures list
• Clears private key after signing
• Shows toast notification

User Flow

Creating a Job

1. Click "+ New Job"
2. Fill in fields:
   - Name: "My Important Job" (optional)
   - Job ID: Auto-filled, can edit
   - Runner: Select from dropdown
   - Timeout: 30 (default)
   - Payload: Enter script/code
3. Optional: Add signatures
   - Enter private key
   - Click "Sign"
   - Repeat for multiple signatures
4. Click "Create"

Editing a Job

1. Click job in table
2. Click "Edit" in sidebar
3. Modify fields:
   - Name, Job ID, Runner, Timeout
   - Payload in main area
4. Optional: Add/remove signatures
5. Click "Save"

Signing a Job

1. In edit/create mode
2. Scroll to Signatures section
3. Enter private key (hex format)
4. Click "Sign"
5. Signature added to list
6. Private key cleared automatically
7. Repeat for multiple signers

Benefits

User Experience

• Clearer job identification: Name + ID
• Easier runner selection: Dropdown vs typing
• Flexible job IDs: Can customize when needed
• Integrated signing: No separate modal
• Visual feedback: Signatures displayed inline

Data Model

• Name field: Optional, human-readable
• ID field: Required, system identifier
• Separation of concerns: Name for humans, ID for system
• Signature support: Full cryptographic signing

Security

• Password field: Private keys not visible
• Canonical representation: Proper signing protocol
• Multiple signatures: Support for multi-sig workflows
• Key cleared: Private key removed after signing

Technical Details

Job Object Structure

{
  "id": "job-abc123",
  "name": "My Important Job",  // Optional
  "payload": "...",
  "runner": "runner-name",
  "timeout": 30,
  "signatures": [
    {
      "public_key": "04e58314...",
      "signature": "3045..."
    }
  ],
  ...
}

Signing Process

1. Validate all required fields
2. Create canonical representation using create_job_canonical_repr
3. Sign canonical with sign_job_canonical
4. Extract public key and signature from result
5. Add to signatures list
6. Clear private key input

Runner Dropdown

• Uses HTML <select> element
• Populated from self.runners vector
• Selected value bound to self.edit_job_runner
• Auto-selects first runner for new jobs
• Shows message when no runners available

CSS Styling

Signature cards use inline styles:

• Flex layout for horizontal arrangement
• Monospace font for public keys
• Background color for visibility
• Compact padding
• Remove button aligned right

Build Status

✅ Success

• Only minor warnings (unused variables)
• No errors
• Ready for deployment

Future Enhancements

Potential improvements:

• Show full public key on hover
• Validate private key format
• Import signatures from file
• Export signed job
• Signature verification indicator
• Show signature timestamps
• Multi-select for runners (parallel execution)