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
```rust
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
```rust
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
```json
{
  "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)