feat: enhance import handling with overwrite support and detailed conflict resolution

feat: add subroute handler extraction for improved Caddyfile parsing
test: add tests for subroute handler extraction functionality
fix: update UI to display staging certificate status and improve dashboard metrics
docs: clarify staging certificate deletion process in ACME documentation

frontend/src/components/__tests__/ImportReviewTable.test.tsx

@@ -121,4 +121,140 @@ describe('ImportReviewTable', () => {
     expect(screen.getByRole('combobox')).toBeInTheDocument()
     expect(screen.queryByText('No conflict')).not.toBeInTheDocument()
   })
+
+  it('expands and collapses conflict details', () => {
+    const conflicts = ['test.example.com']
+    const conflictDetails = {
+      'test.example.com': {
+        existing: {
+          forward_scheme: 'http',
+          forward_host: '192.168.1.1',
+          forward_port: 8080,
+          ssl_forced: true,
+          websocket: true,
+          enabled: true,
+        },
+        imported: {
+          forward_scheme: 'http',
+          forward_host: '192.168.1.2',
+          forward_port: 9090,
+          ssl_forced: false,
+          websocket: false,
+        },
+      },
+    }
+
+    render(
+      <ImportReviewTable
+        hosts={mockImportPreview.hosts}
+        conflicts={conflicts}
+        conflictDetails={conflictDetails}
+        errors={[]}
+        onCommit={mockOnCommit}
+        onCancel={mockOnCancel}
+      />
+    )
+
+    // Initially collapsed
+    expect(screen.queryByText('Current Configuration')).not.toBeInTheDocument()
+
+    // Find and click expand button (it's the ▶ button)
+    const expandButton = screen.getByText('▶')
+    fireEvent.click(expandButton)
+
+    // Now should show details
+    expect(screen.getByText('Current Configuration')).toBeInTheDocument()
+    expect(screen.getByText('Imported Configuration')).toBeInTheDocument()
+    expect(screen.getByText('http://192.168.1.1:8080')).toBeInTheDocument()
+    expect(screen.getByText('http://192.168.1.2:9090')).toBeInTheDocument()
+
+    // Click collapse button
+    const collapseButton = screen.getByText('▼')
+    fireEvent.click(collapseButton)
+
+    // Details should be hidden again
+    expect(screen.queryByText('Current Configuration')).not.toBeInTheDocument()
+  })
+
+  it('shows recommendation based on configuration differences', () => {
+    const conflicts = ['test.example.com']
+    const conflictDetails = {
+      'test.example.com': {
+        existing: {
+          forward_scheme: 'http',
+          forward_host: '192.168.1.1',
+          forward_port: 8080,
+          ssl_forced: true,
+          websocket: false,
+          enabled: true,
+        },
+        imported: {
+          forward_scheme: 'http',
+          forward_host: '192.168.1.1',
+          forward_port: 8080,
+          ssl_forced: false,
+          websocket: false,
+        },
+      },
+    }
+
+    render(
+      <ImportReviewTable
+        hosts={mockImportPreview.hosts}
+        conflicts={conflicts}
+        conflictDetails={conflictDetails}
+        errors={[]}
+        onCommit={mockOnCommit}
+        onCancel={mockOnCancel}
+      />
+    )
+
+    // Expand to see recommendation
+    const expandButton = screen.getByText('▶')
+    fireEvent.click(expandButton)
+
+    // Should show recommendation about config changes (SSL differs)
+    expect(screen.getByText(/different SSL or WebSocket settings/i)).toBeInTheDocument()
+  })
+
+  it('highlights configuration differences', () => {
+    const conflicts = ['test.example.com']
+    const conflictDetails = {
+      'test.example.com': {
+        existing: {
+          forward_scheme: 'http',
+          forward_host: '192.168.1.1',
+          forward_port: 8080,
+          ssl_forced: true,
+          websocket: true,
+          enabled: true,
+        },
+        imported: {
+          forward_scheme: 'https',
+          forward_host: '192.168.1.2',
+          forward_port: 9090,
+          ssl_forced: false,
+          websocket: false,
+        },
+      },
+    }
+
+    render(
+      <ImportReviewTable
+        hosts={mockImportPreview.hosts}
+        conflicts={conflicts}
+        conflictDetails={conflictDetails}
+        errors={[]}
+        onCommit={mockOnCommit}
+        onCancel={mockOnCancel}
+      />
+    )
+
+    const expandButton = screen.getByText('▶')
+    fireEvent.click(expandButton)
+
+    // Check for differences being displayed
+    expect(screen.getByText('https://192.168.1.2:9090')).toBeInTheDocument()
+    expect(screen.getByText('http://192.168.1.1:8080')).toBeInTheDocument()
+  })
 })